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,

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

@@ -3,7 +3,7 @@ import { UseFormReturn, useWatch } from 'react-hook-form';
 import useGraphStore from '../../store';
 import { OutputArray, OutputObject } from './interface';
 
-function transferToObject(list: OutputArray) {
+export function transferToObject(list: OutputArray) {
   return list.reduce<OutputObject>((pre, cur) => {
     pre[cur.name] = { ref: cur.ref, type: cur.type };
     return pre;

web/src/pages/agent/form/user-fill-up-form/use-watch-change.ts

@@ -17,8 +17,9 @@ export function useWatchFormChange(id?: string, form?: UseFormReturn) {
   const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
 
   useEffect(() => {
-    if (id && form?.formState.isDirty) {
-      values = form?.getValues();
+    // TODO: This should only be executed when the form changes
+    if (id) {
+      values = form?.getValues() || {};
 
       const nextValues = {
         ...values,