From 0fe4fd65e2a79572a06e0ba25d4e1af4da8e6f5c Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Thu, 9 Jan 2025 15:47:50 +0800
Subject: [PATCH] fix: down arrow not shown not agent strategy selector

---
 .../components/agent-strategy-selector.tsx    | 14 +++----
 .../nodes/agent/components/tool-icon.tsx      | 41 ++++++++++++-------
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
index db684ea2df..221ce479d0 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
@@ -105,16 +105,16 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
   )
 
   const showPluginNotInstalledWarn = strategyStatus?.plugin?.source === 'external'
-    && !strategyStatus.plugin.installed
+    && !strategyStatus.plugin.installed && !!value
 
   const showUnsupportedStrategy = strategyStatus?.plugin.source === 'external'
-    && !strategyStatus?.isExistInPlugin
+    && !strategyStatus?.isExistInPlugin && !!value
 
   const showSwitchVersion = !strategyStatus?.isExistInPlugin
-    && strategyStatus?.plugin.source === 'marketplace' && strategyStatus.plugin.installed
+    && strategyStatus?.plugin.source === 'marketplace' && strategyStatus.plugin.installed && !!value
 
   const showInstallButton = !strategyStatus?.isExistInPlugin
-    && strategyStatus?.plugin.source === 'marketplace' && !strategyStatus.plugin.installed
+    && strategyStatus?.plugin.source === 'marketplace' && !strategyStatus.plugin.installed && !!value
 
   const icon = list?.find(
     coll => coll.tools?.find(tool => tool.name === value?.agent_strategy_name),
@@ -159,8 +159,8 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
         >
           {value?.agent_strategy_label || t('workflow.nodes.agent.strategy.selectTip')}
         </p>
-        {value && <div className='ml-auto flex items-center gap-1'>
-          {showInstallButton && <InstallPluginButton
+        <div className='ml-auto flex items-center gap-1'>
+          {showInstallButton && value && <InstallPluginButton
             onClick={e => e.stopPropagation()}
             size={'small'}
             uniqueIdentifier={value.plugin_unique_identifier}
@@ -187,7 +187,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
               // TODO: refresh all strategies
             }}
           />}
-        </div>}
+        </div>
       </div>
     </PortalToFollowElemTrigger>
     <PortalToFollowElemContent className='z-10'>
diff --git a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
index 99dc45d46c..0d2d3c2837 100644
--- a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
+++ b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
@@ -1,10 +1,11 @@
 import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
 import classNames from '@/utils/classnames'
-import { memo, useMemo, useRef } from 'react'
+import { memo, useMemo, useRef, useState } from 'react'
 import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
 import { getIconFromMarketPlace } from '@/utils/get-icon'
 import { useTranslation } from 'react-i18next'
+import { Group } from '@/app/components/base/icons/src/vender/other'
 
 type Status = 'not-installed' | 'not-authorized' | undefined
 
@@ -45,21 +46,31 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
     if (status === 'not-authorized') return t('workflow.nodes.agent.toolNotAuthorizedTooltip', { tool: name })
     throw new Error('Unknown status')
   }, [name, notSuccess, status, t])
-  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 flex items-center justify-center rounded-[6px]',
-    )}
-    ref={containerRef}
+  const [iconFetchError, setIconFetchError] = useState(false)
+  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 flex items-center justify-center rounded-[6px]',
+      )}
+      ref={containerRef}
     >
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        src={icon}
-        alt='tool icon'
-        className={classNames(
-          'w-full h-full size-3.5 object-cover',
-          notSuccess && 'opacity-50',
-        )}
-      />
+      {!iconFetchError
+        // eslint-disable-next-line @next/next/no-img-element
+        ? <img
+          src={icon}
+          alt='tool icon'
+          className={classNames(
+            'w-full h-full size-3.5 object-cover',
+            notSuccess && 'opacity-50',
+          )}
+          onError={() => setIconFetchError(true)}
+        />
+        : <Group className="w-3 h-3 opacity-35" />
+      }
       {indicator && <Indicator color={indicator} className="absolute right-[-1px] top-[-1px]" />}
     </div>
   </Tooltip>