From 11247d1a9d61d509e14ed932120856a00941bf7d Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Tue, 28 Oct 2025 19:16:49 +0800
Subject: [PATCH] Feat: Adjust the style of the agent operator form tool #10703
 (#10841)

### What problem does this PR solve?

Feat: Adjust the style of the agent operator form tool #10703

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/components/ui/tabs.tsx                    |  4 ++--
 .../agent/form/agent-form/tool-popover/index.tsx  |  6 ++----
 .../form/agent-form/tool-popover/tool-command.tsx | 15 ++-------------
 web/src/pages/agent/form/components/output.tsx    |  2 +-
 4 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/web/src/components/ui/tabs.tsx b/web/src/components/ui/tabs.tsx
index d3315591d..575782497 100644
--- a/web/src/components/ui/tabs.tsx
+++ b/web/src/components/ui/tabs.tsx
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md  p-1 ',
+      'inline-flex h-10 items-center justify-center rounded-md  p-1 bg-bg-card',
       className,
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-text-title-invert data-[state=active]:text-text-primary data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-bg-base data-[state=active]:text-text-primary data-[state=active]:shadow-sm',
       className,
     )}
     {...props}
diff --git a/web/src/pages/agent/form/agent-form/tool-popover/index.tsx b/web/src/pages/agent/form/agent-form/tool-popover/index.tsx
index 84f1ed46a..ce294f091 100644
--- a/web/src/pages/agent/form/agent-form/tool-popover/index.tsx
+++ b/web/src/pages/agent/form/agent-form/tool-popover/index.tsx
@@ -66,12 +66,10 @@ export function ToolPopover({ children }: PropsWithChildren) {
       <PopoverContent className="w-80 p-4">
         <Tabs defaultValue={ToolType.Common}>
           <TabsList>
-            <TabsTrigger value={ToolType.Common} className="bg-bg-card">
+            <TabsTrigger value={ToolType.Common}>
               {t('flow.builtIn')}
             </TabsTrigger>
-            <TabsTrigger value={ToolType.MCP} className="bg-bg-card">
-              MCP
-            </TabsTrigger>
+            <TabsTrigger value={ToolType.MCP}>MCP</TabsTrigger>
           </TabsList>
           <TabsContent value={ToolType.Common}>
             <ToolCommand
diff --git a/web/src/pages/agent/form/agent-form/tool-popover/tool-command.tsx b/web/src/pages/agent/form/agent-form/tool-popover/tool-command.tsx
index 6118c43ab..7ade01008 100644
--- a/web/src/pages/agent/form/agent-form/tool-popover/tool-command.tsx
+++ b/web/src/pages/agent/form/agent-form/tool-popover/tool-command.tsx
@@ -1,5 +1,4 @@
-import { CheckIcon } from 'lucide-react';
-
+import { Checkbox } from '@/components/ui/checkbox';
 import {
   Command,
   CommandEmpty,
@@ -9,7 +8,6 @@ import {
   CommandList,
 } from '@/components/ui/command';
 import { useListMcpServer } from '@/hooks/use-mcp-request';
-import { cn } from '@/lib/utils';
 import { Operator } from '@/pages/agent/constant';
 import OperatorIcon from '@/pages/agent/operator-icon';
 import { t } from 'i18next';
@@ -68,16 +66,7 @@ function ToolCommandItem({
 }: ToolCommandItemProps & PropsWithChildren) {
   return (
     <CommandItem className="cursor-pointer" onSelect={() => toggleOption(id)}>
-      <div
-        className={cn(
-          'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
-          isSelected
-            ? 'bg-primary text-primary-foreground'
-            : 'opacity-50 [&_svg]:invisible',
-        )}
-      >
-        <CheckIcon className="h-4 w-4" />
-      </div>
+      <Checkbox checked={isSelected} />
       {children}
     </CommandItem>
   );
diff --git a/web/src/pages/agent/form/components/output.tsx b/web/src/pages/agent/form/components/output.tsx
index c481c7a38..3419761e2 100644
--- a/web/src/pages/agent/form/components/output.tsx
+++ b/web/src/pages/agent/form/components/output.tsx
@@ -19,7 +19,7 @@ export function transferOutputs(outputs: Record<string, any>) {
 export function Output({ list }: OutputProps) {
   return (
     <section className="space-y-2">
-      <div>{t('flow.output')}</div>
+      <div className="text-sm">{t('flow.output')}</div>
       <ul>
         {list.map((x, idx) => (
           <li