dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
+++ b/dify/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
@@ -0,0 +1,197 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+  RiQuestionLine,
+} from '@remixicon/react'
+import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
+import ActionButton from '@/app/components/base/action-button'
+import Tooltip from '@/app/components/base/tooltip'
+import Divider from '@/app/components/base/divider'
+import type { ToolValue } from '@/app/components/workflow/block-selector/types'
+import type { Node } from 'reactflow'
+import type { NodeOutPutVar } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
+import { useAllMCPTools } from '@/service/use-tools'
+
+type Props = {
+  disabled?: boolean
+  value: ToolValue[]
+  label: string
+  required?: boolean
+  tooltip?: any
+  supportCollapse?: boolean
+  scope?: string
+  onChange: (value: ToolValue[]) => void
+  nodeOutputVars: NodeOutPutVar[],
+  availableNodes: Node[],
+  nodeId?: string
+  canChooseMCPTool?: boolean
+}
+
+const MultipleToolSelector = ({
+  disabled,
+  value = [],
+  label,
+  required,
+  tooltip,
+  supportCollapse,
+  scope,
+  onChange,
+  nodeOutputVars,
+  availableNodes,
+  nodeId,
+  canChooseMCPTool,
+}: Props) => {
+  const { t } = useTranslation()
+  const { data: mcpTools } = useAllMCPTools()
+  const enabledCount = value.filter((item) => {
+    const isMCPTool = mcpTools?.find(tool => tool.id === item.provider_name)
+    if(isMCPTool)
+      return item.enabled && canChooseMCPTool
+    return item.enabled
+  }).length
+  // collapse control
+  const [collapse, setCollapse] = React.useState(false)
+  const handleCollapse = () => {
+    if (supportCollapse)
+      setCollapse(!collapse)
+  }
+
+  // add tool
+  const [open, setOpen] = React.useState(false)
+  const [panelShowState, setPanelShowState] = React.useState(true)
+  const handleAdd = (val: ToolValue) => {
+    const newValue = [...value, val]
+    // deduplication
+    const deduplication = newValue.reduce((acc, cur) => {
+      if (!acc.find(item => item.provider_name === cur.provider_name && item.tool_name === cur.tool_name))
+        acc.push(cur)
+      return acc
+    }, [] as ToolValue[])
+    // update value
+    onChange(deduplication)
+    setOpen(false)
+  }
+
+  const handleAddMultiple = (val: ToolValue[]) => {
+    const newValue = [...value, ...val]
+    // deduplication
+    const deduplication = newValue.reduce((acc, cur) => {
+      if (!acc.find(item => item.provider_name === cur.provider_name && item.tool_name === cur.tool_name))
+        acc.push(cur)
+      return acc
+    }, [] as ToolValue[])
+    // update value
+    onChange(deduplication)
+    setOpen(false)
+  }
+
+  // delete tool
+  const handleDelete = (index: number) => {
+    const newValue = [...value]
+    newValue.splice(index, 1)
+    onChange(newValue)
+  }
+
+  // configure tool
+  const handleConfigure = (val: ToolValue, index: number) => {
+    const newValue = [...value]
+    newValue[index] = val
+    onChange(newValue)
+  }
+
+  return (
+    <>
+      <div className='mb-1 flex items-center'>
+        <div
+          className={cn('relative flex grow items-center gap-0.5', supportCollapse && 'cursor-pointer')}
+          onClick={handleCollapse}
+        >
+          <div className='system-sm-semibold-uppercase flex h-6 items-center text-text-secondary'>{label}</div>
+          {required && <div className='text-red-500'>*</div>}
+          {tooltip && (
+            <Tooltip
+              popupContent={tooltip}
+            >
+              <div><RiQuestionLine className='h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary' /></div>
+            </Tooltip>
+          )}
+          {supportCollapse && (
+            <ArrowDownRoundFill
+              className={cn(
+                'h-4 w-4 cursor-pointer text-text-quaternary group-hover/collapse:text-text-secondary',
+                collapse && 'rotate-[270deg]',
+              )}
+            />
+          )}
+        </div>
+        {value.length > 0 && (
+          <>
+            <div className='system-xs-medium flex items-center gap-1 text-text-tertiary'>
+              <span>{`${enabledCount}/${value.length}`}</span>
+              <span>{t('appDebug.agent.tools.enabled')}</span>
+            </div>
+            <Divider type='vertical' className='ml-3 mr-1 h-3' />
+          </>
+        )}
+        {!disabled && (
+          <ActionButton className='mx-1' onClick={() => {
+            setCollapse(false)
+            setOpen(!open)
+            setPanelShowState(true)
+          }}>
+            <RiAddLine className='h-4 w-4' />
+          </ActionButton>
+        )}
+      </div>
+      {!collapse && (
+        <>
+          {value.length === 0 && (
+            <div className='system-xs-regular flex justify-center rounded-[10px] bg-background-section p-3 text-text-tertiary'>{t('plugin.detailPanel.toolSelector.empty')}</div>
+          )}
+          {value.length > 0 && value.map((item, index) => (
+            <div className='mb-1' key={index}>
+              <ToolSelector
+                nodeId={nodeId}
+                nodeOutputVars={nodeOutputVars}
+                availableNodes={availableNodes}
+                scope={scope}
+                value={item}
+                selectedTools={value}
+                onSelect={item => handleConfigure(item, index)}
+                onSelectMultiple={handleAddMultiple}
+                onDelete={() => handleDelete(index)}
+                supportEnableSwitch
+                canChooseMCPTool={canChooseMCPTool}
+                isEdit
+              />
+            </div>
+          ))}
+        </>
+      )}
+      <ToolSelector
+        nodeId={nodeId}
+        nodeOutputVars={nodeOutputVars}
+        availableNodes={availableNodes}
+        scope={scope}
+        value={undefined}
+        selectedTools={value}
+        onSelect={handleAdd}
+        controlledState={open}
+        onControlledStateChange={setOpen}
+        trigger={
+          <div className=''></div>
+        }
+        panelShowState={panelShowState}
+        onPanelShowStateChange={setPanelShowState}
+        isEdit={false}
+        canChooseMCPTool={canChooseMCPTool}
+        onSelectMultiple={handleAddMultiple}
+      />
+    </>
+  )
+}
+
+export default MultipleToolSelector