From 45ef4059f0d37b2eb3f39de0e0f446ac36da92be Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Thu, 7 Mar 2024 11:48:42 +0800
Subject: [PATCH] block-icon

---
 web/app/components/workflow/block-icon.tsx    | 34 ++++++++++++++-
 .../workflow/block-selector/tools/item.tsx    |  1 +
 .../workflow/block-selector/types.ts          |  1 +
 .../_base/components/next-step/index.tsx      |  5 ++-
 .../nodes/_base/components/next-step/item.tsx |  1 +
 .../components/workflow/nodes/_base/node.tsx  | 42 +++----------------
 .../components/workflow/nodes/_base/panel.tsx | 41 +++---------------
 7 files changed, 52 insertions(+), 73 deletions(-)

diff --git a/web/app/components/workflow/block-icon.tsx b/web/app/components/workflow/block-icon.tsx
index 21fd624fe8..e17975a601 100644
--- a/web/app/components/workflow/block-icon.tsx
+++ b/web/app/components/workflow/block-icon.tsx
@@ -14,11 +14,13 @@ import {
   TemplatingTransform,
   VariableX,
 } from '@/app/components/base/icons/src/vender/workflow'
+import AppIcon from '@/app/components/base/app-icon'
 
 type BlockIconProps = {
   type: BlockEnum
   size?: string
   className?: string
+  icon?: any
 }
 const ICON_CONTAINER_CLASSNAME_SIZE_MAP: Record<string, string> = {
   sm: 'w-5 h-5 rounded-md shadow-xs',
@@ -57,6 +59,7 @@ const BlockIcon: FC<BlockIconProps> = ({
   type,
   size = 'sm',
   className,
+  icon,
 }) => {
   return (
     <div className={`
@@ -66,7 +69,36 @@ const BlockIcon: FC<BlockIconProps> = ({
       ${className}
     `}
     >
-      {getIcon(type, 'w-3.5 h-3.5')}
+      {
+        type !== BlockEnum.Tool && (
+          getIcon(type, 'w-3.5 h-3.5')
+        )
+      }
+      {
+        type === BlockEnum.Tool && icon && (
+          <>
+            {
+              typeof icon === 'string'
+                ? (
+                  <div
+                    className='shrink-0 w-full h-full bg-cover bg-center rounded-md'
+                    style={{
+                      backgroundImage: `url(${icon})`,
+                    }}
+                  ></div>
+                )
+                : (
+                  <AppIcon
+                    className='shrink-0 !w-full !h-full'
+                    size='tiny'
+                    icon={icon?.content}
+                    background={icon?.background}
+                  />
+                )
+            }
+          </>
+        )
+      }
     </div>
   )
 }
diff --git a/web/app/components/workflow/block-selector/tools/item.tsx b/web/app/components/workflow/block-selector/tools/item.tsx
index dd5f317a0c..3cef90c33e 100644
--- a/web/app/components/workflow/block-selector/tools/item.tsx
+++ b/web/app/components/workflow/block-selector/tools/item.tsx
@@ -107,6 +107,7 @@ const Item = ({
               tool_name: tool.name,
               _icon: data.icon,
               title: tool.label[language],
+              desc: tool.description[language],
             })}
           >
             <div className='absolute left-[22px] w-[1px] h-8 bg-black/5' />
diff --git a/web/app/components/workflow/block-selector/types.ts b/web/app/components/workflow/block-selector/types.ts
index c1e543d94f..09fe34c87c 100644
--- a/web/app/components/workflow/block-selector/types.ts
+++ b/web/app/components/workflow/block-selector/types.ts
@@ -30,5 +30,6 @@ export type ToolDefaultValue = {
   provider_type: string
   tool_name: string
   title: string
+  desc: string
   _icon: Collection['icon']
 }
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
index 3d4246022f..34c3e68587 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx
@@ -26,7 +26,10 @@ const NextStep = ({
   return (
     <div className='flex py-1'>
       <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} />
+        <BlockIcon
+          type={selectedNode!.data.type}
+          icon={selectedNode!.data._icon}
+        />
       </div>
       <Line linesNumber={branches ? branches.length : 1} />
       <div className='grow'>
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
index 576e25cbac..f88a9c8c33 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
@@ -53,6 +53,7 @@ const Item = ({
       }
       <BlockIcon
         type={data.type}
+        icon={data._icon}
         className='shrink-0 mr-1.5'
       />
       <div className='grow'>{data.title}</div>
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index 15c8b0951b..2d1725c424 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -7,9 +7,7 @@ import {
   memo,
 } from 'react'
 import type { NodeProps } from '../../types'
-import { BlockEnum } from '@/app/components/workflow/types'
 import BlockIcon from '@/app/components/workflow/block-icon'
-import AppIcon from '@/app/components/base/app-icon'
 
 type BaseNodeProps = {
   children: ReactElement
@@ -31,40 +29,12 @@ const BaseNode: FC<BaseNodeProps> = ({
       `}
     >
       <div className='flex items-center px-3 pt-3 pb-2'>
-        {
-          type !== BlockEnum.Tool && (
-            <BlockIcon
-              className='shrink-0 mr-2'
-              type={data.type}
-              size='md'
-            />
-          )
-        }
-        {
-          type === BlockEnum.Tool && (
-            <>
-              {
-                typeof data._icon === 'string'
-                  ? (
-                    <div
-                      className='shrink-0 mr-2 w-6 h-6 bg-cover bg-center rounded-md'
-                      style={{
-                        backgroundImage: `url(${data._icon})`,
-                      }}
-                    ></div>
-                  )
-                  : (
-                    <AppIcon
-                      className='shrink-0 mr-2'
-                      size='tiny'
-                      icon={data._icon?.content}
-                      background={data._icon?.background}
-                    />
-                  )
-              }
-            </>
-          )
-        }
+        <BlockIcon
+          className='shrink-0 mr-2'
+          type={data.type}
+          size='md'
+          icon={data._icon}
+        />
         <div
           title={data.title}
           className='grow text-[13px] font-semibold text-gray-700 truncate'
diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx
index 668b97cede..c82f3ae4a8 100644
--- a/web/app/components/workflow/nodes/_base/panel.tsx
+++ b/web/app/components/workflow/nodes/_base/panel.tsx
@@ -24,7 +24,6 @@ import { Play } from '@/app/components/base/icons/src/vender/line/mediaAndDevice
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import type { Node } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
-import AppIcon from '@/app/components/base/app-icon'
 
 type BasePanelProps = {
   children: ReactElement
@@ -51,40 +50,12 @@ const BasePanel: FC<BasePanelProps> = ({
     <div className='w-[420px] h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl overflow-y-auto'>
       <div className='sticky top-0 bg-white border-b-[0.5px] border-black/5 z-10'>
         <div className='flex items-center px-4 pt-4 pb-1'>
-          {
-            type !== BlockEnum.Tool && (
-              <BlockIcon
-                className='shrink-0 mr-1'
-                type={data.type}
-                size='md'
-              />
-            )
-          }
-          {
-            type === BlockEnum.Tool && (
-              <>
-                {
-                  typeof data._icon === 'string'
-                    ? (
-                      <div
-                        className='shrink-0 mr-2 w-6 h-6 bg-cover bg-center rounded-md'
-                        style={{
-                          backgroundImage: `url(${data._icon})`,
-                        }}
-                      ></div>
-                    )
-                    : (
-                      <AppIcon
-                        className='shrink-0 mr-2'
-                        size='tiny'
-                        icon={data._icon?.content}
-                        background={data._icon?.background}
-                      />
-                    )
-                }
-              </>
-            )
-          }
+          <BlockIcon
+            className='shrink-0 mr-1'
+            type={data.type}
+            icon={data._icon}
+            size='md'
+          />
           <TitleInput
             value={data.title || ''}
             onChange={handleTitleChange}