fix: Could not load the logo of workflow as Tool in Agent Node (#18243)

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

@@ -10,6 +10,7 @@ import { Group } from '@/app/components/base/icons/src/vender/other'
 type Status = 'not-installed' | 'not-authorized' | undefined
 
 export type ToolIconProps = {
+  id: string
   providerName: string
 }
 
@@ -29,10 +30,11 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
   const author = providerNameParts[0]
   const name = providerNameParts[1]
   const icon = useMemo(() => {
+    if (!isDataReady) return ''
     if (currentProvider) return currentProvider.icon as string
     const iconFromMarketPlace = getIconFromMarketPlace(`${author}/${name}`)
     return iconFromMarketPlace
-  }, [author, currentProvider, name])
+  }, [author, currentProvider, name, isDataReady])
   const status: Status = useMemo(() => {
     if (!isDataReady) return undefined
     if (!currentProvider) return 'not-installed'
@@ -60,7 +62,7 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
       )}
       ref={containerRef}
     >
-      {!iconFetchError
+      {(!iconFetchError && isDataReady)
 
         ? <img
           src={icon}

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

@@ -39,12 +39,13 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
 
   const tools = useMemo(() => {
     const tools: Array<ToolIconProps> = []
-    currentStrategy?.parameters.forEach((param) => {
+    currentStrategy?.parameters.forEach((param, i) => {
       if (param.type === FormTypeEnum.toolSelector) {
         const field = param.name
         const value = inputs.agent_parameters?.[field]?.value
         if (value) {
           tools.push({
+            id: `${param.name}-${i}`,
             providerName: value.provider_name as any,
           })
         }
@@ -55,6 +56,7 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
         if (value) {
           (value as unknown as any[]).forEach((item) => {
             tools.push({
+              id: `${param.name}-${i}`,
               providerName: item.provider_name,
             })
           })
@@ -102,8 +104,7 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
       {t('workflow.nodes.agent.toolbox')}
     </GroupLabel>}>
       <div className='grid grid-cols-10 gap-0.5'>
-        {/* eslint-disable-next-line sonarjs/no-uniq-key */}
+        {tools.map(tool => <ToolIcon {...tool} key={tool.id} />)}
-        {tools.map(tool => <ToolIcon {...tool} key={Math.random()} />)}
       </div>
     </Group>}
   </div>

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

@@ -54,7 +54,6 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
     outputSchema,
     handleMemoryChange,
   } = useConfig(props.id, props.data)
-  console.log('currentStrategy', currentStrategy)
   const { t } = useTranslation()
   const nodeInfo = useMemo(() => {
     if (!runResult)