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/agent-form/agent-tools.tsx

@@ -28,18 +28,31 @@ import { useDeleteAgentNodeMCP } from './tool-popover/use-update-mcp';
 import { useDeleteAgentNodeTools } from './tool-popover/use-update-tools';
 import { useGetAgentMCPIds, useGetAgentToolNames } from './use-get-tools';
 
+type ToolCardProps = React.HTMLAttributes<HTMLLIElement> &
+  PropsWithChildren & {
+    isNodeTool?: boolean;
+  };
+
 export function ToolCard({
   children,
   className,
+  isNodeTool = true,
   ...props
-}: PropsWithChildren & React.HTMLAttributes<HTMLLIElement>) {
+}: ToolCardProps) {
   const element = useMemo(() => {
     return (
-      <LabelCard {...props} className={cn('flex justify-between', className)}>
+      <LabelCard
+        {...props}
+        className={cn(
+          'flex justify-between ',
+          { 'p-2.5 text-text-primary text-sm': !isNodeTool },
+          className,
+        )}
+      >
         {children}
       </LabelCard>
     );
-  }, [children, className, props]);
+  }, [children, className, isNodeTool, props]);
 
   if (children === Operator.Code) {
     return (
@@ -67,13 +80,13 @@ function ActionButton<T>({ deleteRecord, record, edit }: ActionButtonProps<T>) {
   }, [deleteRecord, record]);
 
   return (
-    <div className="flex items-center gap-2 text-text-secondary">
+    <div className="flex items-center gap-4 text-text-secondary">
       <PencilLine
-        className="size-4 cursor-pointer"
+        className="size-3.5 cursor-pointer"
         data-tool={record}
         onClick={edit}
       />
-      <X className="size-4 cursor-pointer" onClick={handleDelete} />
+      <X className="size-3.5 cursor-pointer" onClick={handleDelete} />
     </div>
   );
 }
@@ -102,10 +115,10 @@ export function AgentTools() {
 
   return (
     <section className="space-y-2.5">
-      <span className="text-text-secondary">{t('flow.tools')}</span>
-      <ul className="space-y-2">
+      <span className="text-text-secondary text-sm">{t('flow.tools')}</span>
+      <ul className="space-y-2.5">
         {toolNames.map((x) => (
-          <ToolCard key={x}>
+          <ToolCard key={x} isNodeTool={false}>
             <div className="flex gap-2 items-center">
               <OperatorIcon name={x as Operator}></OperatorIcon>
               {x}
@@ -118,7 +131,7 @@ export function AgentTools() {
           </ToolCard>
         ))}
         {mcpIds.map((id) => (
-          <ToolCard key={id}>
+          <ToolCard key={id} isNodeTool={false}>
             {findMcpById(id)?.name}
             <ActionButton
               record={id}
@@ -156,13 +169,13 @@ export function Agents({ node }: INextOperatorForm) {
 
   return (
     <section className="space-y-2.5">
-      <span className="text-text-secondary">{t('flow.agent')}</span>
-      <ul className="space-y-2">
+      <span className="text-text-secondary text-sm">{t('flow.agent')}</span>
+      <ul className="space-y-2.5">
         {subBottomAgentNodeIds.map((id) => {
           const currentNode = getNode(id);
 
           return (
-            <ToolCard key={id}>
+            <ToolCard key={id} isNodeTool={false}>
               {currentNode?.data.name}
               <ActionButton
                 record={id}

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

@@ -1,5 +1,4 @@
 import { Collapse } from '@/components/collapse';
-import { FormContainer } from '@/components/form-container';
 import {
   LargeModelFilterFormSchema,
   LargeModelFormField,
@@ -15,6 +14,7 @@ import {
   FormLabel,
 } from '@/components/ui/form';
 import { Input, NumberInput } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
 import { Switch } from '@/components/ui/switch';
 import { LlmModelType } from '@/constants/knowledge';
 import { useFindLlmByUuid } from '@/hooks/use-llm-request';
@@ -124,66 +124,53 @@ function AgentForm({ node }: INextOperatorForm) {
   return (
     <Form {...form}>
       <FormWrapper>
-        <FormContainer>
-          {isSubAgent && <DescriptionField></DescriptionField>}
-          <LargeModelFormField showSpeech2TextModel></LargeModelFormField>
-          {findLlmByUuid(llmId)?.model_type === LlmModelType.Image2text && (
-            <QueryVariable
-              name="visual_files_var"
-              label="Visual Input File"
-              type={VariableType.File}
-            ></QueryVariable>
+        {isSubAgent && <DescriptionField></DescriptionField>}
+        <LargeModelFormField showSpeech2TextModel></LargeModelFormField>
+        {findLlmByUuid(llmId)?.model_type === LlmModelType.Image2text && (
+          <QueryVariable
+            name="visual_files_var"
+            label="Visual Input File"
+            type={VariableType.File}
+          ></QueryVariable>
+        )}
+        <FormField
+          control={form.control}
+          name={`sys_prompt`}
+          render={({ field }) => (
+            <FormItem className="flex-1">
+              <FormLabel>{t('flow.systemPrompt')}</FormLabel>
+              <FormControl>
+                <PromptEditor
+                  {...field}
+                  placeholder={t('flow.messagePlaceholder')}
+                  showToolbar={true}
+                  extraOptions={extraOptions}
+                ></PromptEditor>
+              </FormControl>
+            </FormItem>
           )}
-        </FormContainer>
-
-        <FormContainer>
+        />
+        {isSubAgent || (
           <FormField
             control={form.control}
-            name={`sys_prompt`}
+            name={`prompts`}
             render={({ field }) => (
               <FormItem className="flex-1">
-                <FormLabel>{t('flow.systemPrompt')}</FormLabel>
+                <FormLabel>{t('flow.userPrompt')}</FormLabel>
                 <FormControl>
-                  <PromptEditor
-                    {...field}
-                    placeholder={t('flow.messagePlaceholder')}
-                    showToolbar={true}
-                    extraOptions={extraOptions}
-                  ></PromptEditor>
+                  <section>
+                    <PromptEditor {...field} showToolbar={true}></PromptEditor>
+                  </section>
                 </FormControl>
               </FormItem>
             )}
           />
-        </FormContainer>
-        {isSubAgent || (
-          <FormContainer>
-            {/* <DynamicPrompt></DynamicPrompt> */}
-            <FormField
-              control={form.control}
-              name={`prompts`}
-              render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormLabel>{t('flow.userPrompt')}</FormLabel>
-                  <FormControl>
-                    <section>
-                      <PromptEditor
-                        {...field}
-                        showToolbar={true}
-                      ></PromptEditor>
-                    </section>
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-          </FormContainer>
         )}
-
-        <FormContainer>
-          <AgentTools></AgentTools>
-          <Agents node={node}></Agents>
-        </FormContainer>
+        <Separator></Separator>
+        <AgentTools></AgentTools>
+        <Agents node={node}></Agents>
         <Collapse title={<div>{t('flow.advancedSettings')}</div>}>
-          <FormContainer>
+          <section className="space-y-5">
             <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
             <FormField
               control={form.control}
@@ -270,7 +257,7 @@ function AgentForm({ node }: INextOperatorForm) {
                 )}
               />
             )}
-          </FormContainer>
+          </section>
         </Collapse>
         <Output list={outputList}></Output>
       </FormWrapper>