Fix: The prompt variable for the agent operator disappears after input. (#15218)

### What problem does this PR solve?

Fix: The prompt variable for the agent operator disappears after input.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/global.less

@@ -50,5 +50,9 @@ body,
 }
 
 .Highlight--scrolledTo .Highlight__part {
-  background: #ffe28f !important;
+  background: rgb(var(--accent-primary) / 0.5) !important;
+}
+
+.Highlight__part {
+  background: rgb(var(--accent-primary) / 0.1) !important;
 }

web/src/pages/agent/form/agent-form/index.tsx

@@ -32,7 +32,6 @@ import {
   NodeHandleId,
   VariableType,
 } from '../../constant';
-import { useSaveOnBlur } from '../../hooks/use-save-on-blur';
 import { INextOperatorForm } from '../../interface';
 import useGraphStore from '../../store';
 import { hasSubAgentOrTool, isBottomSubAgent } from '../../utils';
@@ -94,8 +93,6 @@ function AgentForm({ node }: INextOperatorForm) {
 
   const { extraOptions } = useBuildPromptExtraPromptOptions(edges, node?.id);
 
-  const { handleSaveOnBlur } = useSaveOnBlur();
-
   const ExceptionMethodOptions = Object.values(AgentExceptionMethod).map(
     (x) => ({
       label: t(`flow.${x}`),
@@ -180,7 +177,6 @@ function AgentForm({ node }: INextOperatorForm) {
                     placeholder={t('flow.messagePlaceholder')}
                     showToolbar={true}
                     extraOptions={extraOptions}
-                    onBlur={handleSaveOnBlur}
                   ></PromptEditor>
                 </FormControl>
               </FormItem>
@@ -198,7 +194,6 @@ function AgentForm({ node }: INextOperatorForm) {
                       <PromptEditor
                         {...field}
                         showToolbar={true}
-                        onBlur={handleSaveOnBlur}
                       ></PromptEditor>
                     </section>
                   </FormControl>

web/src/pages/agent/form/code-form/next-variable.tsx

@@ -93,13 +93,20 @@ export function DynamicVariableForm({ name = 'arguments', isOutputs }: IProps) {
                 </FormItem>
               )}
             />
-            <Button variant={'ghost'} onClick={() => remove(index)}>
+            <Button
+              variant={'ghost'}
+              type="button"
+              onClick={() => remove(index)}
+            >
               <X className="text-text-sub-title-invert " />
             </Button>
           </div>
         );
       })}
-      <BlockButton onClick={() => append({ name: '', type: undefined })}>
+      <BlockButton
+        type="button"
+        onClick={() => append({ name: '', type: undefined })}
+      >
         {t('flow.addVariable')}
       </BlockButton>
     </div>

web/src/pages/agent/hooks/use-save-on-blur.ts

@@ -1,14 +0,0 @@
-import { useCallback } from 'react';
-import { useSaveGraph } from './use-save-graph';
-
-// Hook to save the graph when a form field loses focus.
-// This ensures changes are persisted immediately without waiting for the debounce timer.
-export const useSaveOnBlur = () => {
-  const { saveGraph } = useSaveGraph(false);
-
-  const handleSaveOnBlur = useCallback(() => {
-    saveGraph();
-  }, [saveGraph]);
-
-  return { handleSaveOnBlur };
-};