From 156b779a1d5b28e09d8299d08c4039b10bff9c53 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 28 Jan 2026 15:42:45 +0800
Subject: [PATCH] chore: enchance ui

---
 .../llm/components/computer-use-config.tsx    |  2 +-
 .../llm/components/reference-tool-config.tsx  | 97 ++++++++++++-------
 2 files changed, 62 insertions(+), 37 deletions(-)

diff --git a/web/app/components/workflow/nodes/llm/components/computer-use-config.tsx b/web/app/components/workflow/nodes/llm/components/computer-use-config.tsx
index f27cb2731c..7ddad20c73 100644
--- a/web/app/components/workflow/nodes/llm/components/computer-use-config.tsx
+++ b/web/app/components/workflow/nodes/llm/components/computer-use-config.tsx
@@ -55,7 +55,7 @@ const ComputerUseConfig: FC<Props> = ({
           </div>
         )}
       >
-        <div className="mt-1 flex flex-col gap-2 pb-1">
+        <div className="mt-1 flex flex-col gap-1 p-1">
           <div className="flex h-6 items-center gap-1">
             <div className="system-xs-medium text-text-tertiary">
               {t(`${i18nPrefix}.referenceTools`, { ns: 'workflow' })}
diff --git a/web/app/components/workflow/nodes/llm/components/reference-tool-config.tsx b/web/app/components/workflow/nodes/llm/components/reference-tool-config.tsx
index 46cc7a82d9..506a7c1e46 100644
--- a/web/app/components/workflow/nodes/llm/components/reference-tool-config.tsx
+++ b/web/app/components/workflow/nodes/llm/components/reference-tool-config.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import type { LLMNodeType, ToolSetting } from '../types'
-import { RiArrowDownSLine } from '@remixicon/react'
 import { useQuery } from '@tanstack/react-query'
 import * as React from 'react'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { DefaultToolIcon } from '@/app/components/base/icons/src/public/other'
+import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 import Switch from '@/app/components/base/switch'
 import { useNodeCurdKit } from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import { consoleClient, consoleQuery } from '@/service/client'
@@ -123,45 +123,70 @@ const ReferenceToolConfig: FC<ReferenceToolConfigProps> = ({
     })
   }, [handleNodeDataUpdate, toolSettings])
 
+  const [openMap, setOpenMap] = useState<Record<string, boolean>>({})
+  const handleToggleProvider = useCallback((providerId: string) => {
+    setOpenMap(prev => ({
+      ...prev,
+      [providerId]: !prev[providerId],
+    }))
+  }, [])
+
   return (
     <div className={cn('flex flex-col gap-2', isDisabled && 'opacity-50')}>
-      {providers.map(provider => (
-        <div
-          key={provider.id}
-          className="flex flex-col gap-1 rounded-lg border border-components-panel-border-subtle bg-components-panel-bg p-1 shadow-xs"
-        >
-          <div className="flex items-center gap-2 rounded-lg px-2 py-1.5">
-            <div className="flex min-w-0 flex-1 items-center gap-2">
-              <div className="flex h-6 w-6 items-center justify-center rounded-md border border-divider-subtle bg-background-default">
-                <DefaultToolIcon className="h-4 w-4 text-text-primary" />
+      {providers.map((provider) => {
+        const isOpen = openMap[provider.id] ?? false
+        return (
+          <div
+            key={provider.id}
+            className="flex flex-col gap-1 rounded-lg border border-components-panel-border-subtle bg-components-panel-bg p-1 shadow-xs"
+          >
+            <div className="flex items-center rounded-lg p-1">
+              <div className="flex min-w-0 items-center gap-2">
+                <div className="flex h-6 w-6 items-center justify-center rounded-md border border-divider-subtle bg-background-default">
+                  <DefaultToolIcon className="h-4 w-4 text-text-primary" />
+                </div>
+                <div className="system-sm-medium truncate text-text-primary">
+                  {provider.id}
+                </div>
               </div>
-              <div className="system-sm-medium truncate text-text-primary">
-                {provider.id}
-              </div>
-              <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />
+              <button
+                type="button"
+                className="group/collapse-btn flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary transition-colors hover:bg-state-base-hover"
+                onClick={() => handleToggleProvider(provider.id)}
+                aria-expanded={isOpen}
+              >
+                <ArrowDownRoundFill className={cn('h-4 w-4 text-text-quaternary group-hover/collapse-btn:text-text-secondary', isOpen ? 'rotate-0' : '-rotate-90')} />
+              </button>
             </div>
+            {isOpen && (
+              <div className="pb-1">
+                {provider.actions.map(action => (
+                  <div
+                    key={`${action.type}-${action.provider}-${action.tool_name}`}
+                    className={cn(
+                      'relative flex h-7 items-center justify-between rounded-md pl-9 pr-2',
+                      !isDisabled && 'hover:bg-state-base-hover',
+                    )}
+                  >
+                    <div className="absolute left-4 top-0 h-full w-[2px] bg-divider-subtle" />
+                    <div className="flex min-w-0 flex-1 items-center">
+                      <span className="system-sm-regular truncate text-text-secondary">
+                        {action.tool_name}
+                      </span>
+                    </div>
+                    <Switch
+                      size="md"
+                      disabled={isDisabled}
+                      defaultValue={resolveToolEnabled(action)}
+                      onChange={value => handleToolEnabledChange(action, value)}
+                    />
+                  </div>
+                ))}
+              </div>
+            )}
           </div>
-          {provider.actions.map(action => (
-            <div
-              key={`${action.type}-${action.provider}-${action.tool_name}`}
-              className="relative flex items-center gap-2 rounded-md px-2 py-1"
-            >
-              <div className="absolute left-3 top-0 h-full w-px bg-divider-subtle" />
-              <div className="flex min-w-0 flex-1 items-center pl-5">
-                <span className="system-sm-regular truncate text-text-secondary">
-                  {action.tool_name}
-                </span>
-              </div>
-              <Switch
-                size="md"
-                disabled={isDisabled}
-                defaultValue={resolveToolEnabled(action)}
-                onChange={value => handleToolEnabledChange(action, value)}
-              />
-            </div>
-          ))}
-        </div>
-      ))}
+        )
+      })}
     </div>
   )
 }