feat: tool item support action

web/app/components/workflow/block-selector/tool-item.tsx

@@ -0,0 +1,110 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { RiArrowRightSLine } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import BlockIcon from '../block-icon'
+import type { ToolWithProvider } from '../types'
+import { BlockEnum } from '../types'
+import type { ToolDefaultValue } from './types'
+import Tooltip from '@/app/components/base/tooltip'
+import type { Tool } from '@/app/components/tools/types'
+import { useGetLanguage } from '@/context/i18n'
+
+type Props = {
+  isToolPlugin: boolean // Tool plugin should choose action
+  provider: ToolWithProvider
+  payload: Tool
+  onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
+}
+
+const ToolItem: FC<Props> = ({
+  isToolPlugin,
+  provider,
+  payload,
+  onSelect,
+}) => {
+  const language = useGetLanguage()
+  const [isFold, {
+    toggle: toggleFold,
+  }] = useBoolean(true)
+
+  const actions = [
+    'DuckDuckGo AI Search',
+    'DuckDuckGo Connect',
+  ]
+
+  return (
+    <Tooltip
+      key={payload.name}
+      position='right'
+      popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
+      popupContent={(
+        <div>
+          <BlockIcon
+            size='md'
+            className='mb-2'
+            type={BlockEnum.Tool}
+            toolIcon={provider.icon}
+          />
+          <div className='mb-1 text-sm leading-5 text-gray-900'>{payload.label[language]}</div>
+          <div className='text-xs text-gray-700 leading-[18px]'>{payload.description[language]}</div>
+        </div>
+      )}
+    >
+      <div>
+        <div
+          className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
+          onClick={() => {
+            if (isToolPlugin) {
+              toggleFold()
+              return
+            }
+            onSelect(BlockEnum.Tool, {
+              provider_id: provider.id,
+              provider_type: provider.type,
+              provider_name: provider.name,
+              tool_name: payload.name,
+              tool_label: payload.label[language],
+              title: payload.label[language],
+            })
+          }}
+        >
+          {isToolPlugin && (
+            <RiArrowRightSLine className='mr-1 w-4 h-4 text-text-quaternary shrink-0' />
+          )}
+          <BlockIcon
+            className='mr-2 shrink-0'
+            type={BlockEnum.Tool}
+            toolIcon={provider.icon}
+          />
+          <div className='text-sm text-gray-900 flex-1 min-w-0 truncate'>{payload.label[language]}</div>
+        </div>
+        {(!isFold && isToolPlugin) && (
+          <div>
+            {actions.map(action => (
+              <div
+                key={action}
+                className='rounded-lg pl-[37px] hover:bg-state-base-hover cursor-pointer'
+                onClick={() => {
+                  onSelect(BlockEnum.Tool, {
+                    provider_id: provider.id,
+                    provider_type: provider.type,
+                    provider_name: provider.name,
+                    tool_name: payload.name,
+                    tool_label: payload.label[language],
+                    title: payload.label[language],
+                  })
+                }}
+              >
+                <div className='h-8 leading-8 border-l-2 border-divider-subtle pl-[19px] truncate text-text-secondary system-sm-medium'>{action}</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+    </Tooltip>
+  )
+}
+export default React.memo(ToolItem)

web/app/components/workflow/block-selector/tools.tsx

@@ -4,12 +4,10 @@ import {
   useRef,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import BlockIcon from '../block-icon'
+import type { BlockEnum, ToolWithProvider } from '../types'
-import { BlockEnum } from '../types'
-import type { ToolWithProvider } from '../types'
 import IndexBar, { groupItems } from './index-bar'
 import type { ToolDefaultValue } from './types'
-import Tooltip from '@/app/components/base/tooltip'
+import ToolItem from './tool-item'
 import Empty from '@/app/components/tools/add-tool-modal/empty'
 import { useGetLanguage } from '@/context/i18n'
 
@@ -42,42 +40,13 @@ const Blocks = ({
         </div>
         {
           list.map(tool => (
-            <Tooltip
+            <ToolItem
               key={tool.name}
-              position='right'
+              isToolPlugin={toolWithProvider.type === 'builtin'}
-              popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
+              provider={toolWithProvider}
-              popupContent={(
+              payload={tool}
-                <div>
+              onSelect={onSelect}
-                  <BlockIcon
+            />
-                    size='md'
-                    className='mb-2'
-                    type={BlockEnum.Tool}
-                    toolIcon={toolWithProvider.icon}
-                  />
-                  <div className='mb-1 text-sm leading-5 text-gray-900'>{tool.label[language]}</div>
-                  <div className='text-xs text-gray-700 leading-[18px]'>{tool.description[language]}</div>
-                </div>
-              )}
-            >
-              <div
-                className='flex items-center px-3 w-full h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
-                onClick={() => onSelect(BlockEnum.Tool, {
-                  provider_id: toolWithProvider.id,
-                  provider_type: toolWithProvider.type,
-                  provider_name: toolWithProvider.name,
-                  tool_name: tool.name,
-                  tool_label: tool.label[language],
-                  title: tool.label[language],
-                })}
-              >
-                <BlockIcon
-                  className='mr-2 shrink-0'
-                  type={BlockEnum.Tool}
-                  toolIcon={toolWithProvider.icon}
-                />
-                <div className='text-sm text-gray-900 flex-1 min-w-0 truncate'>{tool.label[language]}</div>
-              </div>
-            </Tooltip>
           ))
         }
       </div>