Merge branch 'feat/plugins' of https://github.com/langgenius/dify into feat/plugins

web/app/components/workflow/nodes/agent/components/tool-icon.tsx

@@ -1,30 +1,40 @@
 import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
 import classNames from '@/utils/classnames'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
+import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
 
 export type ToolIconProps = {
-  src: string
-  alt?: string
   status?: 'error' | 'warning'
   tooltip?: string
+  providerName: string
 }
 
-export const ToolIcon = ({ src, status, tooltip, alt }: ToolIconProps) => {
+export const ToolIcon = ({ status, tooltip, providerName }: ToolIconProps) => {
   const indicator = status === 'error' ? 'red' : status === 'warning' ? 'yellow' : undefined
   const containerRef = useRef<HTMLDivElement>(null)
   const notSuccess = (['error', 'warning'] as Array<ToolIconProps['status']>).includes(status)
+  const { data: buildInTools } = useAllBuiltInTools()
+  const { data: customTools } = useAllCustomTools()
+  const { data: workflowTools } = useAllWorkflowTools()
+  const currentProvider = useMemo(() => {
+    const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || [])]
+    return mergedTools.find((toolWithProvider) => {
+      return toolWithProvider.name === providerName
+    })
+  }, [providerName, buildInTools, customTools, workflowTools])
   return <Tooltip triggerMethod='hover' popupContent={tooltip} disabled={!notSuccess}>
     <div className={classNames(
-      'size-5 border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge relative',
+      'size-5 border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge relative flex items-center justify-center rounded-[6px]',
     )}
     ref={containerRef}
     >
+      {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
-        src={src}
-        alt={alt}
+        src={currentProvider?.icon as string}
+        alt='tool icon'
         className={classNames(
-          'w-full h-full max-w-5 max-h-5 object-cover rounded-[6px]',
+          'w-full h-full size-3.5 object-cover',
           notSuccess && 'opacity-50',
         )}
       />

web/app/components/workflow/nodes/agent/node.tsx

@@ -8,13 +8,11 @@ import type { ToolIconProps } from './components/tool-icon'
 import { ToolIcon } from './components/tool-icon'
 import useConfig from './use-config'
 import { useTranslation } from 'react-i18next'
-import { useInstalledPluginList } from '@/service/use-plugins'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 
 const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
   const { inputs, currentStrategy } = useConfig(props.id, props.data)
   const { t } = useTranslation()
-  const pluginList = useInstalledPluginList()
   // TODO: Implement models
   const models = useMemo(() => {
     if (!inputs) return []
@@ -41,17 +39,28 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
   const tools = useMemo(() => {
     const tools: Array<ToolIconProps> = []
     currentStrategy?.parameters.forEach((param) => {
-      if (['array[tool]', 'tool'].includes(param.type)) {
-        const vari = inputs.agent_parameters?.[param.name]
-        if (!vari) return
-        if (Array.isArray(vari.value)) {
-          // TODO: Implement array of tools
+      if (param.type === FormTypeEnum.toolSelector) {
+        const field = param.name
+        const value = inputs.agent_parameters?.[field]
+        if (value) {
+          tools.push({
+            providerName: value.provider_name,
+          })
         }
-        else {
-          // TODO: Implement single tool
+      }
+      if (param.type === FormTypeEnum.multiToolSelector) {
+        const field = param.name
+        const value = inputs.agent_parameters?.[field]
+        if (value) {
+          (value as any[]).forEach((item) => {
+            tools.push({
+              providerName: item.provider_name,
+            })
+          })
         }
       }
     })
+    return tools
   }, [currentStrategy, inputs.agent_parameters])
   return <div className='mb-1 px-3 py-1 space-y-1'>
     {inputs.agent_strategy_name
@@ -89,19 +98,7 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
       {t('workflow.nodes.agent.toolbox')}
     </GroupLabel>}>
       <div className='grid grid-cols-10 gap-0.5'>
-        <ToolIcon src='/logo/logo.png' />
-        <ToolIcon
-          src='/logo/logo.png'
-          status='error'
-          tooltip={t('workflow.nodes.agent.toolNotInstallTooltip', {
-            tool: 'Gmail Sender',
-          })} />
-        <ToolIcon
-          src='/logo/logo.png'
-          status='warning'
-          tooltip={t('workflow.nodes.agent.toolNotAuthorizedTooltip', {
-            tool: 'DuckDuckGo AI Search',
-          })} />
+        {tools.map(tool => <ToolIcon {...tool} key={Math.random()} />)}
       </div>
     </Group>
   </div>

web/app/components/workflow/run/agent-log/agent-log-nav-more.tsx

@@ -6,12 +6,15 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Button from '@/app/components/base/button'
+import type { AgentLogItemWithChildren } from '@/types/workflow'
 
 type AgentLogNavMoreProps = {
   options: { id: string; label: string }[]
+  onShowAgentOrToolLog: (detail?: AgentLogItemWithChildren) => void
 }
 const AgentLogNavMore = ({
   options,
+  onShowAgentOrToolLog,
 }: AgentLogNavMoreProps) => {
   const [open, setOpen] = useState(false)
 
@@ -40,6 +43,10 @@ const AgentLogNavMore = ({
               <div
                 key={option.id}
                 className='flex items-center px-2 h-8 rounded-lg system-md-regular text-text-secondary hover:bg-state-base-hover cursor-pointer'
+                onClick={() => {
+                  onShowAgentOrToolLog(option as AgentLogItemWithChildren)
+                  setOpen(false)
+                }}
               >
                 {option.label}
               </div>

web/app/components/workflow/run/agent-log/agent-log-nav.tsx

@@ -1,15 +1,25 @@
 import { RiArrowLeftLine } from '@remixicon/react'
 import AgentLogNavMore from './agent-log-nav-more'
 import Button from '@/app/components/base/button'
+import type { AgentLogItemWithChildren } from '@/types/workflow'
+
+type AgentLogNavProps = {
+  agentOrToolLogItemStack: { id: string; label: string }[]
+  onShowAgentOrToolLog: (detail?: AgentLogItemWithChildren) => void
+}
+const AgentLogNav = ({
+  agentOrToolLogItemStack,
+  onShowAgentOrToolLog,
+}: AgentLogNavProps) => {
+  const options = agentOrToolLogItemStack.slice(2)
 
-const AgentLogNav = () => {
   return (
     <div className='flex items-center p-1 pr-3 h-8'>
       <Button
         className='shrink-0 px-[5px]'
         size='small'
         variant='ghost-accent'
-        onClick={() => {}}
+        onClick={() => onShowAgentOrToolLog()}
       >
         <RiArrowLeftLine className='mr-1 w-3.5 h-3.5' />
         Agent
@@ -24,10 +34,17 @@ const AgentLogNav = () => {
         <RiArrowLeftLine className='mr-1 w-3.5 h-3.5' />
         Agent strategy
       </Button>
-      <div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
-      <AgentLogNavMore
-        options={[]}
-      />
+      {
+        !!options.length && (
+          <>
+            <div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
+            <AgentLogNavMore
+              options={options}
+              onShowAgentOrToolLog={onShowAgentOrToolLog}
+            />
+          </>
+        )
+      }
       <div className='shrink-0 mx-0.5 system-xs-regular text-divider-deep'>/</div>
       <div className='flex items-center px-[5px] system-xs-medium-uppercase text-text-tertiary'>
         Run Actions

web/app/components/workflow/run/agent-log/agent-log-trigger.tsx

@@ -6,7 +6,7 @@ import type {
 
 type AgentLogTriggerProps = {
   nodeInfo: NodeTracing
-  onShowAgentOrToolLog: (detail: AgentLogItemWithChildren) => void
+  onShowAgentOrToolLog: (detail?: AgentLogItemWithChildren) => void
 }
 const AgentLogTrigger = ({
   nodeInfo,

web/app/components/workflow/run/agent-log/agent-result-panel.tsx

@@ -3,21 +3,24 @@ import AgentLogNav from './agent-log-nav'
 import type { AgentLogItemWithChildren } from '@/types/workflow'
 
 type AgentResultPanelProps = {
-  agentOrToolLogIdStack: string[]
+  agentOrToolLogItemStack: { id: string; label: string }[]
   agentOrToolLogListMap: Record<string, AgentLogItemWithChildren[]>
-  onShowAgentOrToolLog: (detail: AgentLogItemWithChildren) => void
+  onShowAgentOrToolLog: (detail?: AgentLogItemWithChildren) => void
 }
 const AgentResultPanel = ({
-  agentOrToolLogIdStack,
+  agentOrToolLogItemStack,
   agentOrToolLogListMap,
   onShowAgentOrToolLog,
 }: AgentResultPanelProps) => {
-  const top = agentOrToolLogIdStack[agentOrToolLogIdStack.length - 1]
-  const list = agentOrToolLogListMap[top]
+  const top = agentOrToolLogItemStack[agentOrToolLogItemStack.length - 1]
+  const list = agentOrToolLogListMap[top.id]
 
   return (
     <div className='overflow-y-auto'>
-      <AgentLogNav />
+      <AgentLogNav
+        agentOrToolLogItemStack={agentOrToolLogItemStack}
+        onShowAgentOrToolLog={onShowAgentOrToolLog}
+      />
       {
         <div className='p-2'>
           {

web/app/components/workflow/run/hooks.ts

@@ -33,22 +33,27 @@ export const useLogs = () => {
     setIterationResultDurationMap(iterDurationMap)
   }, [setShowIteratingDetailTrue, setIterationResultList, setIterationResultDurationMap])
 
-  const [agentOrToolLogIdStack, setAgentOrToolLogIdStack] = useState<string[]>([])
-  const agentOrToolLogIdStackRef = useRef(agentOrToolLogIdStack)
+  const [agentOrToolLogItemStack, setAgentOrToolLogItemStack] = useState<{ id: string; label: string }[]>([])
+  const agentOrToolLogItemStackRef = useRef(agentOrToolLogItemStack)
   const [agentOrToolLogListMap, setAgentOrToolLogListMap] = useState<Record<string, AgentLogItemWithChildren[]>>({})
   const agentOrToolLogListMapRef = useRef(agentOrToolLogListMap)
-  const handleShowAgentOrToolLog = useCallback((detail: AgentLogItemWithChildren) => {
-    const { id, children } = detail
-    let currentAgentOrToolLogIdStack = agentOrToolLogIdStackRef.current.slice()
-    const index = currentAgentOrToolLogIdStack.findIndex(logId => logId === id)
+  const handleShowAgentOrToolLog = useCallback((detail?: AgentLogItemWithChildren) => {
+    if (!detail) {
+      setAgentOrToolLogItemStack([])
+      agentOrToolLogItemStackRef.current = []
+      return
+    }
+    const { id, label, children } = detail
+    let currentAgentOrToolLogItemStack = agentOrToolLogItemStackRef.current.slice()
+    const index = currentAgentOrToolLogItemStack.findIndex(logItem => logItem.id === id)
 
     if (index > -1)
-      currentAgentOrToolLogIdStack = currentAgentOrToolLogIdStack.slice(0, index + 1)
+      currentAgentOrToolLogItemStack = currentAgentOrToolLogItemStack.slice(0, index + 1)
     else
-      currentAgentOrToolLogIdStack = [...currentAgentOrToolLogIdStack.slice(), id]
+      currentAgentOrToolLogItemStack = [...currentAgentOrToolLogItemStack.slice(), { id, label }]
 
-    setAgentOrToolLogIdStack(currentAgentOrToolLogIdStack)
-    agentOrToolLogIdStackRef.current = currentAgentOrToolLogIdStack
+    setAgentOrToolLogItemStack(currentAgentOrToolLogItemStack)
+    agentOrToolLogItemStackRef.current = currentAgentOrToolLogItemStack
 
     if (children) {
       setAgentOrToolLogListMap({
@@ -56,10 +61,10 @@ export const useLogs = () => {
         [id]: children,
       })
     }
-  }, [setAgentOrToolLogIdStack, setAgentOrToolLogListMap])
+  }, [setAgentOrToolLogItemStack, setAgentOrToolLogListMap])
 
   return {
-    showSpecialResultPanel: showRetryDetail || showIteratingDetail || !!agentOrToolLogIdStack.length,
+    showSpecialResultPanel: showRetryDetail || showIteratingDetail || !!agentOrToolLogItemStack.length,
     showRetryDetail,
     setShowRetryDetailTrue,
     setShowRetryDetailFalse,
@@ -76,7 +81,7 @@ export const useLogs = () => {
     setIterationResultDurationMap,
     handleShowIterationResultList,
 
-    agentOrToolLogIdStack,
+    agentOrToolLogItemStack,
     agentOrToolLogListMap,
     handleShowAgentOrToolLog,
   }

web/app/components/workflow/run/node.tsx

@@ -34,7 +34,7 @@ type Props = {
   hideProcessDetail?: boolean
   onShowIterationDetail?: (detail: NodeTracing[][], iterDurationMap: IterationDurationMap) => void
   onShowRetryDetail?: (detail: NodeTracing[]) => void
-  onShowAgentOrToolLog?: (detail: AgentLogItemWithChildren) => void
+  onShowAgentOrToolLog?: (detail?: AgentLogItemWithChildren) => void
   notShowIterationNav?: boolean
 }
 

web/app/components/workflow/run/result-panel.tsx

@@ -34,7 +34,7 @@ type ResultPanelProps = {
   execution_metadata?: any
   handleShowIterationResultList?: (detail: NodeTracing[][], iterDurationMap: any) => void
   onShowRetryDetail?: (detail: NodeTracing[]) => void
-  handleShowAgentOrToolLog?: (detail: AgentLogItemWithChildren) => void
+  handleShowAgentOrToolLog?: (detail?: AgentLogItemWithChildren) => void
 }
 
 const ResultPanel: FC<ResultPanelProps> = ({

web/app/components/workflow/run/special-result-panel.tsx

@@ -17,9 +17,9 @@ export type SpecialResultPanelProps = {
   iterationResultList?: NodeTracing[][]
   iterationResultDurationMap?: IterationDurationMap
 
-  agentOrToolLogIdStack?: string[]
+  agentOrToolLogItemStack?: { id: string; label: string }[]
   agentOrToolLogListMap?: Record<string, AgentLogItemWithChildren[]>
-  handleShowAgentOrToolLog?: (detail: AgentLogItemWithChildren) => void
+  handleShowAgentOrToolLog?: (detail?: AgentLogItemWithChildren) => void
 }
 const SpecialResultPanel = ({
   showRetryDetail,
@@ -31,7 +31,7 @@ const SpecialResultPanel = ({
   iterationResultList,
   iterationResultDurationMap,
 
-  agentOrToolLogIdStack,
+  agentOrToolLogItemStack,
   agentOrToolLogListMap,
   handleShowAgentOrToolLog,
 }: SpecialResultPanelProps) => {
@@ -55,9 +55,9 @@ const SpecialResultPanel = ({
         )
       }
       {
-        !!agentOrToolLogIdStack?.length && agentOrToolLogListMap && handleShowAgentOrToolLog && (
+        !!agentOrToolLogItemStack?.length && agentOrToolLogListMap && handleShowAgentOrToolLog && (
           <AgentResultPanel
-            agentOrToolLogIdStack={agentOrToolLogIdStack}
+            agentOrToolLogItemStack={agentOrToolLogItemStack}
             agentOrToolLogListMap={agentOrToolLogListMap}
             onShowAgentOrToolLog={handleShowAgentOrToolLog}
           />

web/app/components/workflow/run/tracing-panel.tsx

@@ -79,7 +79,7 @@ const TracingPanel: FC<TracingPanelProps> = ({
     iterationResultDurationMap,
     handleShowIterationResultList,
 
-    agentOrToolLogIdStack,
+    agentOrToolLogItemStack,
     agentOrToolLogListMap,
     handleShowAgentOrToolLog,
   } = useLogs()
@@ -158,7 +158,7 @@ const TracingPanel: FC<TracingPanelProps> = ({
         iterationResultList={iterationResultList}
         iterationResultDurationMap={iterationResultDurationMap}
 
-        agentOrToolLogIdStack={agentOrToolLogIdStack}
+        agentOrToolLogItemStack={agentOrToolLogItemStack}
         agentOrToolLogListMap={agentOrToolLogListMap}
         handleShowAgentOrToolLog={handleShowAgentOrToolLog}
       />