Feat: Modify the style of the agent operator form #10703 (#10821)

### What problem does this PR solve?

Feat: Modify the style of the agent operator form #10703

### Type of change


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

web/src/pages/agent/form-sheet/next.tsx

@@ -1,4 +1,3 @@
-import { Input } from '@/components/ui/input';
 import {
   Sheet,
   SheetContent,
@@ -10,17 +9,17 @@ import { IModalProps } from '@/interfaces/common';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { cn } from '@/lib/utils';
 import { lowerFirst } from 'lodash';
-import { Play, X } from 'lucide-react';
-import { useMemo } from 'react';
-import { BeginId, Operator } from '../constant';
+import { CirclePlay, X } from 'lucide-react';
+import { Operator } from '../constant';
 import { AgentFormContext } from '../context';
 import { RunTooltip } from '../flow-tooltip';
-import { useHandleNodeNameChange } from '../hooks/use-change-node-name';
+import { useIsMcp } from '../hooks/use-is-mcp';
 import OperatorIcon from '../operator-icon';
 import useGraphStore from '../store';
 import { needsSingleStepDebugging } from '../utils';
 import { FormConfigMap } from './form-config-map';
 import SingleDebugSheet from './single-debug-sheet';
+import { TitleInput } from './title-input';
 
 interface IProps {
   node?: RAGFlowNodeType;
@@ -48,17 +47,7 @@ const FormSheet = ({
 
   const OperatorForm = currentFormMap?.component ?? EmptyContent;
 
-  const { name, handleNameBlur, handleNameChange } = useHandleNodeNameChange({
-    id: node?.id,
-    data: node?.data,
-  });
-
-  const isMcp = useMemo(() => {
-    return (
-      operatorName === Operator.Tool &&
-      Object.values(Operator).every((x) => x !== clickedToolId)
-    );
-  }, [clickedToolId, operatorName]);
+  const isMcp = useIsMcp(operatorName);
 
   const { t } = useTranslate('flow');
 
@@ -75,36 +64,19 @@ const FormSheet = ({
           <section className="flex-col border-b py-2 px-5">
             <div className="flex items-center gap-2 pb-3">
               <OperatorIcon name={operatorName}></OperatorIcon>
-
-              {isMcp ? (
-                <div className="flex-1">MCP Config</div>
-              ) : (
-                <div className="flex items-center gap-1 flex-1">
-                  <label htmlFor="">{t('title')}</label>
-                  {node?.id === BeginId ? (
-                    <span>{t(BeginId)}</span>
-                  ) : (
-                    <Input
-                      value={name}
-                      onBlur={handleNameBlur}
-                      onChange={handleNameChange}
-                    ></Input>
-                  )}
-                </div>
-              )}
-
+              <TitleInput node={node}></TitleInput>
               {needsSingleStepDebugging(operatorName) && (
                 <RunTooltip>
-                  <Play
-                    className="size-5 cursor-pointer"
+                  <CirclePlay
+                    className="size-3.5 cursor-pointer"
                     onClick={showSingleDebugDrawer}
                   />
                 </RunTooltip>
               )}
-              <X onClick={hideModal} />
+              <X onClick={hideModal} className="size-3.5 cursor-pointer" />
             </div>
             {isMcp || (
-              <span>
+              <span className="text-text-secondary">
                 {t(
                   `${lowerFirst(operatorName === Operator.Tool ? clickedToolId : operatorName)}Description`,
                 )}