Feat: Allow users to enter text in the middle of a chat #3221 (#8569)

### What problem does this PR solve?

Feat: Allow users to enter text in the middle of a chat #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/form/begin-form/use-edit-query.ts

@@ -23,10 +23,7 @@ export const useEditQueryRecord = ({
       const nextQuery: BeginQuery[] =
         index > -1 ? inputs.toSpliced(index, 1, record) : [...inputs, record];
 
-      form.setValue('inputs', nextQuery, {
-        shouldDirty: true,
-        shouldTouch: true,
-      });
+      form.setValue('inputs', nextQuery);
 
       hideModal();
     },
@@ -45,11 +42,11 @@ export const useEditQueryRecord = ({
   const handleDeleteRecord = useCallback(
     (idx: number) => {
       const inputs = form?.getValues('inputs') || [];
-      const nextQuery = inputs.filter(
+      const nextInputs = inputs.filter(
         (item: BeginQuery, index: number) => index !== idx,
       );
 
-      form.setValue('inputs', nextQuery, { shouldDirty: true });
+      form.setValue('inputs', nextInputs);
     },
     [form],
   );

web/src/pages/agent/form/begin-form/use-watch-change.ts

@@ -17,8 +17,8 @@ export function useWatchFormChange(id?: string, form?: UseFormReturn) {
   const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
 
   useEffect(() => {
-    if (id && form?.formState.isDirty) {
-      values = form?.getValues();
+    if (id) {
+      values = form?.getValues() || {};
 
       const nextValues = {
         ...values,