feat: config reference tool ui

web/app/components/workflow/nodes/llm/components/computer-use-config.tsx

@@ -1,9 +1,14 @@
 'use client'
 import type { FC } from 'react'
+import { RiArrowDownSLine } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Switch from '@/app/components/base/switch'
-import Field from '@/app/components/workflow/nodes/_base/components/field'
+import Tooltip from '@/app/components/base/tooltip'
+import { BoxGroup } from '@/app/components/workflow/nodes/_base/components/layout'
+import { cn } from '@/utils/classnames'
+import ReferenceToolConfig from './reference-tool-config'
 
 const i18nPrefix = 'nodes.llm.computerUse'
 
@@ -19,20 +24,56 @@ const ComputerUseConfig: FC<Props> = ({
   onChange,
 }) => {
   const { t } = useTranslation()
+  const [isCollapsed, { toggle: toggleCollapsed }] = useBoolean(false)
 
   return (
-    <Field
-      title={t(`${i18nPrefix}.title`, { ns: 'workflow' })}
-      tooltip={t(`${i18nPrefix}.tooltip`, { ns: 'workflow' })!}
-      operations={(
-        <Switch
-          size="md"
-          disabled={readonly}
-          defaultValue={enabled}
-          onChange={onChange}
-        />
-      )}
-    />
+    <BoxGroup
+      boxProps={{
+        withBorderBottom: true,
+        withBorderTop: true,
+        className: 'py-0',
+      }}
+      groupProps={{
+        className: 'px-0 py-0',
+      }}
+    >
+      <div className="pb-2 pt-1">
+        <div className="flex items-center pb-1 pt-2">
+          <div className="flex min-w-0 flex-1 items-center gap-1">
+            <div className="system-sm-semibold-uppercase text-text-secondary">
+              {t(`${i18nPrefix}.title`, { ns: 'workflow' })}
+            </div>
+            <Tooltip
+              popupContent={t(`${i18nPrefix}.tooltip`, { ns: 'workflow' })}
+              triggerClassName="h-4 w-4"
+            />
+            <button
+              type="button"
+              onClick={toggleCollapsed}
+              className="flex h-6 w-6 items-center justify-center rounded-md text-text-tertiary transition-colors hover:bg-state-base-hover"
+            >
+              <RiArrowDownSLine
+                className={cn('h-4 w-4 transition-transform', isCollapsed && '-rotate-90')}
+              />
+            </button>
+          </div>
+          <Switch
+            size="md"
+            disabled={readonly}
+            defaultValue={enabled}
+            onChange={onChange}
+          />
+        </div>
+        {!isCollapsed && (
+          <div className="flex flex-col gap-2 pb-2">
+            <div className="system-xs-medium text-text-tertiary">
+              {t(`${i18nPrefix}.referenceTools`, { ns: 'workflow' })}
+            </div>
+            <ReferenceToolConfig readonly={readonly} enabled={enabled} />
+          </div>
+        )}
+      </div>
+    </BoxGroup>
   )
 }
 

web/app/components/workflow/nodes/llm/components/reference-tool-config.tsx

@@ -0,0 +1,110 @@
+'use client'
+import type { FC } from 'react'
+import { RiArrowDownSLine } from '@remixicon/react'
+import * as React from 'react'
+import { DefaultToolIcon } from '@/app/components/base/icons/src/public/other'
+import Switch from '@/app/components/base/switch'
+import { cn } from '@/utils/classnames'
+
+type ToolPermissionAction = {
+  id: string
+  label: string
+  defaultEnabled: boolean
+}
+
+type ToolPermissionProvider = {
+  id: string
+  label: string
+  actions?: ToolPermissionAction[]
+}
+
+type ReferenceToolConfigProps = {
+  readonly: boolean
+  enabled: boolean
+}
+
+const ReferenceToolConfig: FC<ReferenceToolConfigProps> = ({
+  readonly,
+  enabled,
+}) => {
+  const isDisabled = readonly || !enabled
+  const providers: ToolPermissionProvider[] = [
+    {
+      id: 'duckduckgo',
+      label: 'DuckDuckGo',
+      actions: [
+        {
+          id: 'duckduckgo-ai-chat',
+          label: 'DuckDuckGo AI Chat',
+          defaultEnabled: true,
+        },
+        {
+          id: 'duckduckgo-image-search',
+          label: 'DuckDuckGo Image Search',
+          defaultEnabled: true,
+        },
+        {
+          id: 'duckduckgo-search',
+          label: 'DuckDuckGo Search',
+          defaultEnabled: true,
+        },
+        {
+          id: 'duckduckgo-translate',
+          label: 'DuckDuckGo Translate',
+          defaultEnabled: false,
+        },
+      ],
+    },
+    {
+      id: 'web-search',
+      label: 'Web Search',
+    },
+    {
+      id: 'stability',
+      label: 'Stability',
+    },
+  ]
+
+  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" />
+              </div>
+              <div className="system-sm-medium truncate text-text-primary">
+                {provider.label}
+              </div>
+              <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />
+            </div>
+          </div>
+          {provider.actions?.map(action => (
+            <div
+              key={action.id}
+              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.label}
+                </span>
+              </div>
+              <Switch
+                size="md"
+                disabled={isDisabled}
+                defaultValue={action.defaultEnabled}
+              />
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default React.memo(ReferenceToolConfig)

web/i18n/en-US/workflow.json

@@ -667,8 +667,9 @@
   "nodes.llm.addContext": "Add Context",
   "nodes.llm.addMessage": "Add Message",
   "nodes.llm.advancedSettings": "Advanced Settings",
+  "nodes.llm.computerUse.referenceTools": "Reference Tools",
   "nodes.llm.computerUse.title": "Computer Use",
-  "nodes.llm.computerUse.tooltip": "Allow the model to operate a sandboxed computer.",
+  "nodes.llm.computerUse.tooltip": "Manage the runtime filesystem and tool access for your agent.",
   "nodes.llm.context": "context",
   "nodes.llm.contextBlock": "Context Block",
   "nodes.llm.contextTooltip": "You can import Knowledge as context",

web/i18n/zh-Hans/workflow.json

@@ -660,8 +660,9 @@
   "nodes.listFilter.selectVariableKeyPlaceholder": "选择子变量的 Key",
   "nodes.llm.addContext": "添加上下文",
   "nodes.llm.addMessage": "添加消息",
+  "nodes.llm.computerUse.referenceTools": "引用工具",
   "nodes.llm.computerUse.title": "计算机使用",
-  "nodes.llm.computerUse.tooltip": "允许模型操作沙箱计算机。",
+  "nodes.llm.computerUse.tooltip": "管理代理的运行时文件系统与工具访问权限。",
   "nodes.llm.context": "上下文",
   "nodes.llm.contextBlock": "上下文块",
   "nodes.llm.contextTooltip": "您可以导入知识库作为上下文",