node about author

web/app/components/workflow/nodes/_base/components/next-step/index.tsx

@@ -40,7 +40,7 @@ const NextStep = ({
       <div className='shrink-0 relative flex items-center justify-center w-9 h-9 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-xs'>
         <BlockIcon
           type={selectedNode!.data.type}
-          icon={selectedNode!.data._icon}
+          toolProviderId={selectedNode!.data.provider_id}
         />
       </div>
       <Line linesNumber={branches ? branches.length : 1} />

web/app/components/workflow/nodes/_base/components/next-step/item.tsx

@@ -55,7 +55,7 @@ const Item = ({
       }
       <BlockIcon
         type={data.type}
-        icon={data._icon}
+        toolProviderId={data.provider_id}
         className='shrink-0 mr-1.5'
       />
       <div className='grow'>{data.title}</div>

web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx

@@ -1,11 +1,20 @@
 import {
   memo,
+  useCallback,
+  useEffect,
+  useMemo,
   useState,
 } from 'react'
+import produce from 'immer'
+import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { useEdges } from 'reactflow'
 import ChangeBlock from './change-block'
-import { useWorkflow } from '@/app/components/workflow/hooks'
+import { useStore } from '@/app/components/workflow/store'
+import {
+  useNodesExtraData,
+  useWorkflow,
+} from '@/app/components/workflow/hooks'
 import { DotsHorizontal } from '@/app/components/base/icons/src/vender/line/general'
 import {
   PortalToFollowElem,
@@ -14,6 +23,12 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import type { Node } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+import {
+  fetchBuiltInToolList,
+  fetchCustomToolList,
+} from '@/service/tools'
 
 type PanelOperatorProps = {
   id: string
@@ -24,12 +39,53 @@ const PanelOperator = ({
   data,
 }: PanelOperatorProps) => {
   const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
   const edges = useEdges()
   const { handleNodeDelete } = useWorkflow()
+  const nodesExtraData = useNodesExtraData()
+  const toolsets = useStore(s => s.toolsets)
+  const toolsMap = useStore(s => s.toolsMap)
+  const setToolsMap = useStore(s => s.setToolsMap)
   const [open, setOpen] = useState(false)
+  const fetchToolList = useMemo(() => {
+    const toolset = toolsets.find(toolset => toolset.id === data.provider_id)
+    return toolset?.type === 'api' ? fetchCustomToolList : fetchBuiltInToolList
+  }, [toolsets, data.provider_id])
+
+  const handleGetAbout = useCallback(() => {
+    if (data.provider_id && !toolsMap[data.provider_id]?.length) {
+      fetchToolList(data.provider_id).then((list: any) => {
+        setToolsMap(produce(toolsMap, (draft) => {
+          draft[data.provider_id as string] = list
+        }))
+      })
+    }
+  }, [data, toolsMap, fetchToolList, setToolsMap])
+  useEffect(() => {
+    handleGetAbout()
+  }, [handleGetAbout])
 
   const edge = edges.find(edge => edge.target === id)
 
+  const author = useMemo(() => {
+    if (data.type !== BlockEnum.Tool)
+      return nodesExtraData[data.type].author
+
+    const toolset = toolsets.find(toolset => toolset.id === data.provider_id)
+
+    return toolset?.author
+  }, [data, nodesExtraData, toolsets])
+
+  const about = useMemo(() => {
+    if (data.type !== BlockEnum.Tool)
+      return nodesExtraData[data.type].about
+
+    const tool = toolsMap[data.provider_id as string]?.find(tool => tool.name === data.tool_name)
+
+    return tool?.description[language] || ''
+  }, [data, nodesExtraData, toolsMap, language])
+
   return (
     <PortalToFollowElem
       placement='bottom-end'
@@ -83,10 +139,10 @@ const PanelOperator = ({
               <div className='flex items-center mb-1 h-[22px] font-medium'>
                 {t('workflow.panel.about')}
               </div>
-              <div className='text-gray-500 leading-[18px]'>{data._about}</div>
+              <div className='text-gray-500 leading-[18px]'>{about}</div>
               <div className='my-2 h-[0.5px] bg-black/5'></div>
               <div className='leading-[18px]'>
-                {t('workflow.panel.createdBy')} {data._author}
+                {t('workflow.panel.createdBy')} {author}
               </div>
             </div>
           </div>

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

@@ -29,7 +29,7 @@ const BaseNode: FC<BaseNodeProps> = ({
     <div
       className={`
         flex border-[2px] rounded-2xl
-        ${data._selected ? 'border-primary-600' : 'border-transparent'}
+        ${data.selected ? 'border-primary-600' : 'border-transparent'}
       `}
     >
       <div
@@ -75,7 +75,7 @@ const BaseNode: FC<BaseNodeProps> = ({
             className='shrink-0 mr-2'
             type={data.type}
             size='md'
-            icon={data._icon}
+            toolProviderId={data.provider_id}
           />
           <div
             title={data.title}

web/app/components/workflow/nodes/_base/panel.tsx

@@ -54,7 +54,7 @@ const BasePanel: FC<BasePanelProps> = ({
           <BlockIcon
             className='shrink-0 mr-1'
             type={data.type}
-            icon={data._icon}
+            toolProviderId={data.provider_id}
             size='md'
           />
           <TitleInput