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/workflow/block-selector/tool/action-item.tsx
+++ b/dify/web/app/components/workflow/block-selector/tool/action-item.tsx
@@ -0,0 +1,98 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+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'
+import BlockIcon from '../../block-icon'
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+import { basePath } from '@/utils/var'
+
+const normalizeProviderIcon = (icon: ToolWithProvider['icon']) => {
+  if (typeof icon === 'string' && basePath && icon.startsWith('/') && !icon.startsWith(`${basePath}/`))
+    return `${basePath}${icon}`
+  return icon
+}
+
+type Props = {
+  provider: ToolWithProvider
+  payload: Tool
+  disabled?: boolean
+  isAdded?: boolean
+  onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
+}
+
+const ToolItem: FC<Props> = ({
+  provider,
+  payload,
+  onSelect,
+  disabled,
+  isAdded,
+}) => {
+  const { t } = useTranslation()
+
+  const language = useGetLanguage()
+
+  return (
+    <Tooltip
+      key={payload.name}
+      position='right'
+      needsDelay={false}
+      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-text-primary'>{payload.label[language]}</div>
+          <div className='text-xs leading-[18px] text-text-secondary'>{payload.description[language]}</div>
+        </div>
+      )}
+    >
+      <div
+        key={payload.name}
+        className='flex cursor-pointer items-center justify-between rounded-lg pl-[21px] pr-1 hover:bg-state-base-hover'
+        onClick={() => {
+          if (disabled) return
+          const params: Record<string, string> = {}
+          if (payload.parameters) {
+            payload.parameters.forEach((item) => {
+              params[item.name] = ''
+            })
+          }
+          onSelect(BlockEnum.Tool, {
+            provider_id: provider.id,
+            provider_type: provider.type,
+            provider_name: provider.name,
+            plugin_id: provider.plugin_id,
+            plugin_unique_identifier: provider.plugin_unique_identifier,
+            provider_icon: normalizeProviderIcon(provider.icon),
+            tool_name: payload.name,
+            tool_label: payload.label[language],
+            tool_description: payload.description[language],
+            title: payload.label[language],
+            is_team_authorization: provider.is_team_authorization,
+            paramSchemas: payload.parameters,
+            params,
+            meta: provider.meta,
+          })
+        }}
+      >
+        <div className={cn('system-sm-medium h-8 truncate border-l-2 border-divider-subtle pl-4 leading-8 text-text-secondary')}>
+          <span className={cn(disabled && 'opacity-30')}>{payload.label[language]}</span>
+        </div>
+        {isAdded && (
+          <div className='system-xs-regular mr-4 text-text-tertiary'>{t('tools.addToolModal.added')}</div>
+        )}
+      </div>
+    </Tooltip >
+  )
+}
+export default React.memo(ToolItem)
--- a/dify/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
+++ b/dify/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx
@@ -0,0 +1,77 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { ToolWithProvider } from '../../../types'
+import type { BlockEnum } from '../../../types'
+import type { ToolDefaultValue, ToolValue } from '../../types'
+import Tool from '../tool'
+import { ViewType } from '../../view-type-select'
+import { useMemo } from 'react'
+
+type Props = {
+  payload: ToolWithProvider[]
+  isShowLetterIndex: boolean
+  indexBar: React.ReactNode
+  hasSearchText: boolean
+  onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
+  letters: string[]
+  toolRefs: any
+  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
+}
+
+const ToolViewFlatView: FC<Props> = ({
+  letters,
+  payload,
+  isShowLetterIndex,
+  indexBar,
+  hasSearchText,
+  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
+  toolRefs,
+  selectedTools,
+  canChooseMCPTool,
+}) => {
+  const firstLetterToolIds = useMemo(() => {
+    const res: Record<string, string> = {}
+    letters.forEach((letter) => {
+      const firstToolId = payload.find(tool => tool.letter === letter)?.id
+      if (firstToolId)
+        res[firstToolId] = letter
+    })
+    return res
+  }, [payload, letters])
+  return (
+    <div className='flex w-full'>
+      <div className='mr-1 grow'>
+        {payload.map(tool => (
+          <div
+            key={tool.id}
+            ref={(el) => {
+              const letter = firstLetterToolIds[tool.id]
+              if (letter)
+                toolRefs.current[letter] = el
+            }}
+          >
+            <Tool
+              payload={tool}
+              viewType={ViewType.flat}
+              hasSearchText={hasSearchText}
+              onSelect={onSelect}
+              canNotSelectMultiple={canNotSelectMultiple}
+              onSelectMultiple={onSelectMultiple}
+              selectedTools={selectedTools}
+              canChooseMCPTool={canChooseMCPTool}
+            />
+          </div>
+        ))}
+      </div>
+      {isShowLetterIndex && indexBar}
+    </div>
+  )
+}
+
+export default React.memo(ToolViewFlatView)
--- a/dify/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
+++ b/dify/web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx
@@ -0,0 +1,55 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { ToolWithProvider } from '../../../types'
+import Tool from '../tool'
+import type { BlockEnum } from '../../../types'
+import { ViewType } from '../../view-type-select'
+import type { ToolDefaultValue, ToolValue } from '../../types'
+
+type Props = {
+  groupName: string
+  toolList: ToolWithProvider[]
+  hasSearchText: boolean
+  onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
+  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
+}
+
+const Item: FC<Props> = ({
+  groupName,
+  toolList,
+  hasSearchText,
+  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
+  selectedTools,
+  canChooseMCPTool,
+}) => {
+  return (
+    <div>
+      <div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>
+        {groupName}
+      </div>
+      <div>
+        {toolList.map((tool: ToolWithProvider) => (
+          <Tool
+            key={tool.id}
+            payload={tool}
+            viewType={ViewType.tree}
+            hasSearchText={hasSearchText}
+            onSelect={onSelect}
+            canNotSelectMultiple={canNotSelectMultiple}
+            onSelectMultiple={onSelectMultiple}
+            selectedTools={selectedTools}
+            canChooseMCPTool={canChooseMCPTool}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Item)
--- a/dify/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx
+++ b/dify/web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx
@@ -0,0 +1,65 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import type { ToolWithProvider } from '../../../types'
+import type { BlockEnum } from '../../../types'
+import type { ToolDefaultValue, ToolValue } from '../../types'
+import Item from './item'
+import { useTranslation } from 'react-i18next'
+import { AGENT_GROUP_NAME, CUSTOM_GROUP_NAME, WORKFLOW_GROUP_NAME } from '../../index-bar'
+
+type Props = {
+  payload: Record<string, ToolWithProvider[]>
+  hasSearchText: boolean
+  onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
+  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
+}
+
+const ToolListTreeView: FC<Props> = ({
+  payload,
+  hasSearchText,
+  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
+  selectedTools,
+  canChooseMCPTool,
+}) => {
+  const { t } = useTranslation()
+  const getI18nGroupName = useCallback((name: string) => {
+    if (name === CUSTOM_GROUP_NAME)
+      return t('workflow.tabs.customTool')
+
+    if (name === WORKFLOW_GROUP_NAME)
+      return t('workflow.tabs.workflowTool')
+
+    if (name === AGENT_GROUP_NAME)
+      return t('workflow.tabs.agent')
+
+    return name
+  }, [t])
+
+  if (!payload) return null
+
+  return (
+    <div>
+      {Object.keys(payload).map(groupName => (
+        <Item
+          key={groupName}
+          groupName={getI18nGroupName(groupName)}
+          toolList={payload[groupName]}
+          hasSearchText={hasSearchText}
+          onSelect={onSelect}
+          canNotSelectMultiple={canNotSelectMultiple}
+          onSelectMultiple={onSelectMultiple}
+          selectedTools={selectedTools}
+          canChooseMCPTool={canChooseMCPTool}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default React.memo(ToolListTreeView)
--- a/dify/web/app/components/workflow/block-selector/tool/tool.tsx
+++ b/dify/web/app/components/workflow/block-selector/tool/tool.tsx
@@ -0,0 +1,231 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import cn from '@/utils/classnames'
+import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
+import { useGetLanguage } from '@/context/i18n'
+import type { Tool as ToolType } from '../../../tools/types'
+import { CollectionType } from '../../../tools/types'
+import type { ToolWithProvider } from '../../types'
+import { BlockEnum } from '../../types'
+import type { ToolDefaultValue, ToolValue } from '../types'
+import { ViewType } from '../view-type-select'
+import ActionItem from './action-item'
+import BlockIcon from '../../block-icon'
+import { useTranslation } from 'react-i18next'
+import { useHover } from 'ahooks'
+import McpToolNotSupportTooltip from '../../nodes/_base/components/mcp-tool-not-support-tooltip'
+import { Mcp } from '@/app/components/base/icons/src/vender/other'
+import { basePath } from '@/utils/var'
+
+const normalizeProviderIcon = (icon: ToolWithProvider['icon']) => {
+  if (typeof icon === 'string' && basePath && icon.startsWith('/') && !icon.startsWith(`${basePath}/`))
+    return `${basePath}${icon}`
+  return icon
+}
+
+type Props = {
+  className?: string
+  payload: ToolWithProvider
+  viewType: ViewType
+  hasSearchText: boolean
+  onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
+  canNotSelectMultiple?: boolean
+  onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
+  selectedTools?: ToolValue[]
+  canChooseMCPTool?: boolean
+  isShowLetterIndex?: boolean
+}
+
+const Tool: FC<Props> = ({
+  className,
+  payload,
+  viewType,
+  hasSearchText,
+  onSelect,
+  canNotSelectMultiple,
+  onSelectMultiple,
+  selectedTools,
+  canChooseMCPTool,
+}) => {
+  const { t } = useTranslation()
+  const language = useGetLanguage()
+  const isFlatView = viewType === ViewType.flat
+  const notShowProvider = payload.type === CollectionType.workflow
+  const actions = payload.tools
+  const hasAction = !notShowProvider
+  const [isFold, setFold] = React.useState<boolean>(true)
+  const ref = useRef(null)
+  const isHovering = useHover(ref)
+  const isMCPTool = payload.type === CollectionType.mcp
+  const isShowCanNotChooseMCPTip = !canChooseMCPTool && isMCPTool
+  const getIsDisabled = useCallback((tool: ToolType) => {
+    if (!selectedTools || !selectedTools.length) return false
+    return selectedTools.some(selectedTool => (selectedTool.provider_name === payload.name || selectedTool.provider_name === payload.id) && selectedTool.tool_name === tool.name)
+  }, [payload.id, payload.name, selectedTools])
+
+  const totalToolsNum = actions.length
+  const selectedToolsNum = actions.filter(action => getIsDisabled(action)).length
+  const isAllSelected = selectedToolsNum === totalToolsNum
+
+  const notShowProviderSelectInfo = useMemo(() => {
+    if (isAllSelected) {
+      return (
+        <span className='system-xs-regular text-text-tertiary'>
+          {t('tools.addToolModal.added')}
+        </span>
+      )
+    }
+  }, [isAllSelected, t])
+  const selectedInfo = useMemo(() => {
+    if (isHovering && !isAllSelected) {
+      return (
+        <span className='system-xs-regular text-components-button-secondary-accent-text'
+          onClick={() => {
+            onSelectMultiple?.(BlockEnum.Tool, actions.filter(action => !getIsDisabled(action)).map((tool) => {
+              const params: Record<string, string> = {}
+              if (tool.parameters) {
+                tool.parameters.forEach((item) => {
+                  params[item.name] = ''
+                })
+              }
+              return {
+                provider_id: payload.id,
+                provider_type: payload.type,
+                provider_name: payload.name,
+                plugin_id: payload.plugin_id,
+                plugin_unique_identifier: payload.plugin_unique_identifier,
+                provider_icon: normalizeProviderIcon(payload.icon),
+                tool_name: tool.name,
+                tool_label: tool.label[language],
+                tool_description: tool.description[language],
+                title: tool.label[language],
+                is_team_authorization: payload.is_team_authorization,
+                paramSchemas: tool.parameters,
+                params,
+              }
+            }))
+          }}
+        >
+          {t('workflow.tabs.addAll')}
+        </span>
+      )
+    }
+
+    if (selectedToolsNum === 0)
+      return <></>
+
+    return (
+      <span className='system-xs-regular text-text-tertiary'>
+        {isAllSelected
+          ? t('workflow.tabs.allAdded')
+          : `${selectedToolsNum} / ${totalToolsNum}`
+        }
+      </span>
+    )
+  }, [actions, getIsDisabled, isAllSelected, isHovering, language, onSelectMultiple, payload.id, payload.is_team_authorization, payload.name, payload.type, selectedToolsNum, t, totalToolsNum])
+
+  useEffect(() => {
+    if (hasSearchText && isFold) {
+      setFold(false)
+      return
+    }
+    if (!hasSearchText && !isFold)
+      setFold(true)
+  }, [hasSearchText])
+
+  const FoldIcon = isFold ? RiArrowRightSLine : RiArrowDownSLine
+
+  const groupName = useMemo(() => {
+    if (payload.type === CollectionType.builtIn)
+      return payload.author
+
+    if (payload.type === CollectionType.custom)
+      return t('workflow.tabs.customTool')
+
+    if (payload.type === CollectionType.workflow)
+      return t('workflow.tabs.workflowTool')
+
+    return ''
+  }, [payload.author, payload.type, t])
+
+  return (
+    <div
+      key={payload.id}
+      className={cn('mb-1 last-of-type:mb-0')}
+      ref={ref}
+    >
+      <div className={cn(className)}>
+        <div
+          className='group/item flex w-full cursor-pointer select-none items-center justify-between rounded-lg pl-3 pr-1 hover:bg-state-base-hover'
+          onClick={() => {
+            if (hasAction) {
+              setFold(!isFold)
+              return
+            }
+
+            const tool = actions[0]
+            const params: Record<string, string> = {}
+            if (tool.parameters) {
+              tool.parameters.forEach((item) => {
+                params[item.name] = ''
+              })
+            }
+            onSelect(BlockEnum.Tool, {
+              provider_id: payload.id,
+              provider_type: payload.type,
+              provider_name: payload.name,
+              plugin_id: payload.plugin_id,
+              plugin_unique_identifier: payload.plugin_unique_identifier,
+              provider_icon: normalizeProviderIcon(payload.icon),
+              tool_name: tool.name,
+              tool_label: tool.label[language],
+              tool_description: tool.description[language],
+              title: tool.label[language],
+              is_team_authorization: payload.is_team_authorization,
+              paramSchemas: tool.parameters,
+              params,
+            })
+          }}
+        >
+          <div className={cn('flex h-8 grow items-center', isShowCanNotChooseMCPTip && 'opacity-30')}>
+            <BlockIcon
+              className='shrink-0'
+              type={BlockEnum.Tool}
+              toolIcon={payload.icon}
+            />
+            <div className='ml-2 flex w-0 grow items-center text-sm text-text-primary'>
+              <span className='max-w-[250px] truncate'>{notShowProvider ? actions[0]?.label[language] : payload.label[language]}</span>
+              {isFlatView && groupName && (
+                <span className='system-xs-regular ml-2 shrink-0 text-text-quaternary'>{groupName}</span>
+              )}
+              {isMCPTool && <Mcp className='ml-2 size-3.5 shrink-0 text-text-quaternary' />}
+            </div>
+          </div>
+
+          <div className='ml-2 flex items-center'>
+            {!isShowCanNotChooseMCPTip && !canNotSelectMultiple && (notShowProvider ? notShowProviderSelectInfo : selectedInfo)}
+            {isShowCanNotChooseMCPTip && <McpToolNotSupportTooltip />}
+            {hasAction && (
+              <FoldIcon className={cn('h-4 w-4 shrink-0 text-text-tertiary group-hover/item:text-text-tertiary', isFold && 'text-text-quaternary')} />
+            )}
+          </div>
+        </div>
+
+        {!notShowProvider && hasAction && !isFold && (
+          actions.map(action => (
+            <ActionItem
+              key={action.name}
+              provider={payload}
+              payload={action}
+              onSelect={onSelect}
+              disabled={getIsDisabled(action) || isShowCanNotChooseMCPTip}
+              isAdded={getIsDisabled(action)}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(Tool)