From bb60db7078535cf43aa90744b8e8bf0ed337a60a Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Thu, 9 Jan 2025 13:00:43 +0800
Subject: [PATCH] feat: tool selector get icon from marketplace

---
 .../workflow/nodes/agent/components/tool-icon.tsx     | 11 ++++++++++-
 web/utils/get-icon.ts                                 |  5 +++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 web/utils/get-icon.ts

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 4228c5694d..9e8365b1c8 100644
--- a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
+++ b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
@@ -3,6 +3,7 @@ import Indicator from '@/app/components/header/indicator'
 import classNames from '@/utils/classnames'
 import { memo, useMemo, useRef } from 'react'
 import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
+import { getIconFromMarketPlace } from '@/utils/get-icon'
 
 export type ToolIconProps = {
   status?: 'error' | 'warning'
@@ -23,6 +24,14 @@ export const ToolIcon = memo(({ status, tooltip, providerName }: ToolIconProps)
       return toolWithProvider.name === providerName
     })
   }, [providerName, buildInTools, customTools, workflowTools])
+  const icon = useMemo(() => {
+    if (currentProvider) return currentProvider.icon as string
+    const providerNameParts = providerName.split('/')
+    const author = providerNameParts[0]
+    const name = providerNameParts[1]
+    const iconFromMarketPlace = getIconFromMarketPlace(`${author}/${name}`)
+    return iconFromMarketPlace
+  }, [currentProvider, providerName])
   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]',
@@ -31,7 +40,7 @@ export const ToolIcon = memo(({ status, tooltip, providerName }: ToolIconProps)
     >
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
-        src={currentProvider?.icon as string}
+        src={icon}
         alt='tool icon'
         className={classNames(
           'w-full h-full size-3.5 object-cover',
diff --git a/web/utils/get-icon.ts b/web/utils/get-icon.ts
new file mode 100644
index 0000000000..f2ed116a14
--- /dev/null
+++ b/web/utils/get-icon.ts
@@ -0,0 +1,5 @@
+import { MARKETPLACE_API_PREFIX } from '@/config'
+
+export const getIconFromMarketPlace = (plugin_id: string) => {
+  return `${MARKETPLACE_API_PREFIX}/plugins/${plugin_id}/icon`
+}