add tool description

2024-12-26 15:29:00 +08:00 · 2024-12-26 15:29:00 +08:00 · 469ce0f23d
commit 469ce0f23d
parent 23bf0a6812
7 changed files with 94 additions and 40 deletions
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@ -28,8 +28,10 @@ const PluginDetailPanel: FC<Props> = ({
    onUpdate()
  }

+  const [value, setValue] = React.useState<any>(undefined)
  const testChange = (val: any) => {
    console.log('tool change', val)
+    setValue(val)
  }

  if (!detail)
@ -57,9 +59,9 @@ const PluginDetailPanel: FC<Props> = ({
            {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
            {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
            {!!detail.declaration.model && <ModelList detail={detail} />}
-            <div>
+            <div className='px-4 py-2'>
              <ToolSelector
-                value={undefined}
+                value={value}
                onSelect={item => testChange(item)}
              />
            </div>
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@ -13,6 +13,7 @@ import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
 import ToolCredentialForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form'
 import Toast from '@/app/components/base/toast'
+import Textarea from '@/app/components/base/textarea'

 import { useAppContext } from '@/context/app-context'
 import {
@ -34,6 +35,8 @@ type Props = {
  value?: {
    provider: string
    tool_name: string
+    description?: string
+    parameters?: Record<string, any>
  }
  disabled?: boolean
  placement?: Placement
@ -41,6 +44,8 @@ type Props = {
  onSelect: (tool: {
    provider: string
    tool_name: string
+    description?: string
+    parameters?: Record<string, any>
  }) => void
  supportAddCustomTool?: boolean
  scope?: string
@ -80,9 +85,18 @@ const ToolSelector: FC<Props> = ({
    }
    onSelect(toolValue)
    setIsShowChooseTool(false)
-    if (tool.provider_type === CollectionType.builtIn && tool.is_team_authorization)
-      onShowChange(false)
+    // if (tool.provider_type === CollectionType.builtIn && tool.is_team_authorization)
+    //   onShowChange(false)
  }
+
+  const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onSelect({
+      ...value,
+      description: e.target.value || '',
+    } as any)
+  }
+
+  // authorization
  const { isCurrentWorkspaceManager } = useAppContext()
  const [isShowSettingAuth, setShowSettingAuth] = useState(false)
  const handleCredentialSettingUpdate = () => {
@ -112,32 +126,45 @@ const ToolSelector: FC<Props> = ({
          onClick={handleTriggerClick}
        >
          <ToolTrigger
+            isConfigure
            open={isShow}
            value={value}
            provider={currentProvider}
          />
        </PortalToFollowElemTrigger>
        <PortalToFollowElemContent className='z-[1000]'>
-          <div className="relative w-[389px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
-            <div className='px-4 py-3 flex flex-col gap-1'>
-              <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('tools.toolSelector.label')}</div>
-              <ToolPicker
-                placement='bottom'
-                offset={offset}
-                trigger={
-                  <ToolTrigger
-                    open={isShowChooseTool}
-                    value={value}
-                    provider={currentProvider}
-                  />
-                }
-                isShow={isShowChooseTool}
-                onShowChange={setIsShowChooseTool}
-                disabled={false}
-                supportAddCustomTool
-                onSelect={handleSelectTool}
-                scope={scope}
-              />
+          <div className="relative w-[361px] min-h-20 pb-2 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
+            <div className='px-4 pt-3.5 pb-1 text-text-primary system-xl-semibold'>{t('plugin.detailPanel.toolSelector.title')}</div>
+            <div className='px-4 py-2 flex flex-col gap-3'>
+              <div className='flex flex-col gap-1'>
+                <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
+                <ToolPicker
+                  placement='bottom'
+                  offset={offset}
+                  trigger={
+                    <ToolTrigger
+                      open={isShowChooseTool}
+                      value={value}
+                      provider={currentProvider}
+                    />
+                  }
+                  isShow={isShowChooseTool}
+                  onShowChange={setIsShowChooseTool}
+                  disabled={false}
+                  supportAddCustomTool
+                  onSelect={handleSelectTool}
+                  scope={scope}
+                />
+              </div>
+              <div className='flex flex-col gap-1'>
+                <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
+                <Textarea
+                  className='resize-none'
+                  placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
+                  value={value?.description || ''}
+                  onChange={handleDescriptionChange}
+                />
+              </div>
            </div>
            {/* authorization panel */}
            {isShowSettingAuth && currentProvider && (
@ -154,7 +181,7 @@ const ToolSelector: FC<Props> = ({
            )}
            {!isShowSettingAuth && currentProvider && currentProvider.type === CollectionType.builtIn && currentProvider.is_team_authorization && currentProvider.allow_delete && (
              <div className='px-4 py-3 flex items-center border-t border-divider-subtle'>
-                <div className='grow mr-3 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('tools.toolSelector.auth')}</div>
+                <div className='grow mr-3 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.auth')}</div>
                {isCurrentWorkspaceManager && (
                  <Button
                    variant='secondary'
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
@ -3,6 +3,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
  RiArrowDownSLine,
+  RiEqualizer2Line,
 } from '@remixicon/react'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BlockEnum } from '@/app/components/workflow/types'
@ -16,21 +17,23 @@ type Props = {
    provider: string
    tool_name: string
  }
+  isConfigure?: boolean
 }

 const ToolTrigger = ({
  open,
  provider,
  value,
+  isConfigure,
 }: Props) => {
  const { t } = useTranslation()
  return (
    <div className={cn(
      'group flex items-center p-2 pl-3 bg-components-input-bg-normal rounded-lg cursor-pointer hover:bg-state-base-hover-alt',
      open && 'bg-state-base-hover-alt',
-      value && 'pl-1.5 py-1.5',
+      value?.provider && 'pl-1.5 py-1.5',
    )}>
-      {value && provider && (
+      {value?.provider && provider && (
        <div className='shrink-0 mr-1 p-px rounded-lg bg-components-panel-bg border border-components-panel-border'>
          <BlockIcon
            className='!w-4 !h-4'
@ -39,13 +42,20 @@ const ToolTrigger = ({
          />
        </div>
      )}
-      {value && (
+      {value?.tool_name && (
        <div className='grow system-sm-medium text-components-input-text-filled'>{value.tool_name}</div>
      )}
-      {!value && (
-        <div className='grow text-components-input-text-placeholder system-sm-regular'>{t('tools.toolSelector.placeholder')}</div>
+      {!value?.provider && (
+        <div className='grow text-components-input-text-placeholder system-sm-regular'>
+          {!isConfigure ? t('plugin.detailPanel.toolSelector.placeholder') : t('plugin.detailPanel.configureTool')}
+        </div>
+      )}
+      {isConfigure && (
+        <RiEqualizer2Line className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
+      )}
+      {!isConfigure && (
+        <RiArrowDownSLine className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
      )}
-      <RiArrowDownSLine className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
    </div>
  )
 }
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@ -65,6 +65,18 @@ const translation = {
    serviceOk: 'Service OK',
    disabled: 'Disabled',
    modelNum: '{{num}} MODELS INCLUDED',
+    toolSelector: {
+      title: 'Add tool',
+      toolLabel: 'Tool',
+      descriptionLabel: 'Tool description',
+      descriptionPlaceholder: 'Brief description of the tool\'s purpose, e.g., get the temperature for a specific location.',
+      placeholder: 'Select a tool...',
+      auth: 'AUTHORIZATION',
+      settings: 'TOOL SETTINGS',
+    },
+    configureApp: 'Configure App',
+    configureModel: 'Configure model',
+    configureTool: 'Configure tool',
  },
  install: '{{num}} installs',
  installAction: 'Install',
--- a/web/i18n/en-US/tools.ts
+++ b/web/i18n/en-US/tools.ts
@ -152,11 +152,6 @@ const translation = {
  openInStudio: 'Open in Studio',
  toolNameUsageTip: 'Tool call name for agent reasoning and prompting',
  copyToolName: 'Copy Name',
-  toolSelector: {
-    label: 'TOOL',
-    placeholder: 'Select a tool...',
-    auth: 'AUTHORIZATION',
-  },
  noTools: 'No tools found',
 }

--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@ -65,6 +65,18 @@ const translation = {
    serviceOk: '服务正常',
    disabled: '停用',
    modelNum: '{{num}} 模型已包含',
+    toolSelector: {
+      title: '添加工具',
+      toolLabel: '工具',
+      descriptionLabel: '工具描述',
+      descriptionPlaceholder: '简要描述工具目的，例如，获取特定位置的温度。',
+      placeholder: '选择工具',
+      auth: '授权',
+      settings: '工具设置',
+    },
+    configureApp: '应用设置',
+    configureModel: '模型设置',
+    configureTool: '工具设置',
  },
  install: '{{num}} 次安装',
  installAction: '安装',
--- a/web/i18n/zh-Hans/tools.ts
+++ b/web/i18n/zh-Hans/tools.ts
@ -152,10 +152,6 @@ const translation = {
  openInStudio: '在工作室中打开',
  toolNameUsageTip: '工具调用名称，用于 Agent 推理和提示词',
  copyToolName: '复制名称',
-  toolSelector: {
-    label: '工具',
-    placeholder: '选择一个工具...',
-  },
  noTools: '没有工具',
 }