add block-icon

web/app/components/workflow/block-icon.tsx

@@ -0,0 +1,70 @@
+import type { FC } from 'react'
+import { BlockEnum } from './types'
+import {
+  Code,
+  DirectAnswer,
+  End,
+  Home,
+  Http,
+  IfElse,
+  KnowledgeRetrieval,
+  Llm,
+  QuestionClassifier,
+  TemplatingTransform,
+  VariableX,
+} from '@/app/components/base/icons/src/public/workflow'
+
+type BlockIconProps = {
+  type: BlockEnum
+  size?: string
+  className?: string
+}
+const ICON_CONTAINER_CLASSNAME_SIZE_MAP: Record<string, string> = {
+  sm: 'w-5 h-5 rounded-md shadow-xs',
+  md: 'w-6 h-6 rounded-lg shadow-md',
+}
+const ICON_MAP: Record<string, any> = {
+  [BlockEnum.Start]: <Home className='w-3.5 h-3.5' />,
+  [BlockEnum.LLM]: <Llm className='w-3.5 h-3.5' />,
+  [BlockEnum.Code]: <Code className='w-3.5 h-3.5' />,
+  [BlockEnum.End]: <End className='w-3.5 h-3.5' />,
+  [BlockEnum.IfElse]: <IfElse className='w-3.5 h-3.5' />,
+  [BlockEnum.HttpRequest]: <Http className='w-3.5 h-3.5' />,
+  [BlockEnum.DirectAnswer]: <DirectAnswer className='w-3.5 h-3.5' />,
+  [BlockEnum.KnowledgeRetrieval]: <KnowledgeRetrieval className='w-3.5 h-3.5' />,
+  [BlockEnum.QuestionClassifier]: <QuestionClassifier className='w-3.5 h-3.5' />,
+  [BlockEnum.TemplateTransform]: <TemplatingTransform className='w-3.5 h-3.5' />,
+  [BlockEnum.VariableAssigner]: <VariableX className='w-3.5 h-3.5' />,
+}
+const ICON_CONTAINER_BG_COLOR_MAP: Record<string, string> = {
+  [BlockEnum.Start]: 'bg-primary-500',
+  [BlockEnum.LLM]: 'bg-[#6172F3]',
+  [BlockEnum.Code]: 'bg-[#2E90FA]',
+  [BlockEnum.End]: 'bg-[#F79009]',
+  [BlockEnum.IfElse]: 'bg-[#06AED4]',
+  [BlockEnum.HttpRequest]: 'bg-[#875BF7]',
+  [BlockEnum.DirectAnswer]: 'bg-[#F79009]',
+  [BlockEnum.KnowledgeRetrieval]: 'bg-[#16B364]',
+  [BlockEnum.QuestionClassifier]: 'bg-[#16B364]',
+  [BlockEnum.TemplateTransform]: 'bg-[#2E90FA]',
+  [BlockEnum.VariableAssigner]: 'bg-[#2E90FA]',
+}
+const BlockIcon: FC<BlockIconProps> = ({
+  type,
+  size = 'sm',
+  className,
+}) => {
+  return (
+    <div className={`
+      flex items-center justify-center border-[0.5px] border-white/[0.02]
+      ${ICON_CONTAINER_CLASSNAME_SIZE_MAP[size]} 
+      ${ICON_CONTAINER_BG_COLOR_MAP[type]}
+      ${className}
+    `}
+    >
+      {ICON_MAP[type]}
+    </div>
+  )
+}
+
+export default BlockIcon

web/app/components/workflow/block-selector/constants.tsx

@@ -1,3 +1,6 @@
+import type { Block } from '../types'
+import { BlockEnum } from '../types'
+
 export const TABS = [
   {
     key: 'blocks',
@@ -13,68 +16,57 @@ export const TABS = [
   },
 ]
 
-export const BLOCKS = [
+export const BLOCKS: Block[] = [
   {
-    type: 'start',
+    type: BlockEnum.Start,
     title: 'Start',
     description: '',
-    icon: '',
   },
   {
-    type: 'llm',
+    type: BlockEnum.LLM,
     title: 'LLM',
-    icon: '',
   },
   {
-    type: 'end',
+    type: BlockEnum.End,
     title: 'End',
-    icon: '',
   },
   {
-    type: 'direct-answer',
+    type: BlockEnum.DirectAnswer,
     title: 'Direct Answer',
-    icon: '',
   },
   {
     classification: 'Question Understand',
-    type: 'knowledge-retrieval',
+    type: BlockEnum.KnowledgeRetrieval,
     title: 'Knowledge Retrieval',
-    icon: '',
   },
   {
     classification: 'Question Understand',
-    type: 'question-classifier',
+    type: BlockEnum.QuestionClassifier,
     title: 'Question Classifier',
-    icon: '',
   },
   {
     classification: 'Logic',
-    type: 'if-else',
+    type: BlockEnum.IfElse,
     title: 'IF/ELSE',
-    icon: '',
   },
   {
     classification: 'Transform',
-    type: 'code',
+    type: BlockEnum.Code,
     title: 'Code',
-    icon: '',
   },
   {
     classification: 'Transform',
-    type: 'template-transform',
+    type: BlockEnum.TemplateTransform,
     title: 'Templating Transform',
-    icon: '',
   },
   {
     classification: 'Transform',
-    type: 'variable-assigner',
+    type: BlockEnum.VariableAssigner,
     title: 'Variable Assigner',
-    icon: '',
   },
   {
     classification: 'Utilities',
-    type: 'http-request',
+    type: BlockEnum.HttpRequest,
     title: 'HTTP Request',
-    icon: '',
   },
 ]

web/app/components/workflow/block-selector/tabs.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import BlockIcon from '../block-icon'
 import {
   BLOCKS,
   TABS,
@@ -30,9 +31,12 @@ const Tabs = () => {
           BLOCKS.map(block => (
             <div
               key={block.type}
-              className='flex items-center h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
+              className='flex items-center px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer'
             >
-              <div className='mr-2 w-5 h-5' />
+              <BlockIcon
+                className='mr-2'
+                type={block.type}
+              />
               <div className='text-sm text-gray-900'>{block.title}</div>
             </div>
           ))

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

@@ -9,6 +9,7 @@ import {
 } from 'reactflow'
 import { useWorkflowContext } from '../../context'
 import BlockSelector from '../../block-selector'
+import BlockIcon from '../../block-icon'
 import { Plus } from '@/app/components/base/icons/src/vender/line/general'
 
 type BaseNodeProps = {
@@ -42,7 +43,11 @@ const BaseNode: FC<BaseNodeProps> = ({
       onClick={() => handleSelectedNodeIdChange(nodeId || '')}
     >
       <div className='flex items-center px-3 pt-3 pb-2'>
-        <div className='mr-2'></div>
+        <BlockIcon
+          className='mr-2'
+          type={currentNode!.data.type}
+          size='md'
+        />
         <div className='text-[13px] font-semibold text-gray-700'>START</div>
       </div>
       {children}

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

@@ -4,6 +4,7 @@ import type {
 } from 'react'
 import { useState } from 'react'
 import { useWorkflowContext } from '../../context'
+import BlockIcon from '../../block-icon'
 import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 
 enum TabEnum {
@@ -24,12 +25,19 @@ const BasePanel: FC<BasePanelProps> = ({
 }) => {
   const initialActiveTab = inputsElement ? TabEnum.Inputs : outputsElement ? TabEnum.Outputs : ''
   const [activeTab, setActiveTab] = useState(initialActiveTab)
-  const { handleSelectedNodeIdChange } = useWorkflowContext()
+  const {
+    handleSelectedNodeIdChange,
+    selectedNode,
+  } = useWorkflowContext()
 
   return (
     <div className='absolute top-2 right-2 bottom-2 w-[420px] bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl z-20'>
       <div className='flex items-center px-4 pt-3'>
-        <div className='shrink-0 mr-2 w-6 h-6'></div>
+        <BlockIcon
+          className='shrink-0 mr-2'
+          type={selectedNode!.data.type}
+          size='md'
+        />
         <div className='grow py-1 text-base text-gray-900 font-semibold '>LLM</div>
         <div className='shrink-0 flex items-center'>
           <div

web/app/components/workflow/types.ts

@@ -1,7 +1,22 @@
 import type { Node as ReactFlowNode } from 'reactflow'
 import type { Resolution } from '@/types/app'
+
+export enum BlockEnum {
+  Start = 'start',
+  End = 'end',
+  DirectAnswer = 'direct-answer',
+  LLM = 'llm',
+  KnowledgeRetrieval = 'knowledge-retrieval',
+  QuestionClassifier = 'question-classifier',
+  IfElse = 'if-else',
+  Code = 'code',
+  TemplateTransform = 'template-transform',
+  HttpRequest = 'http-request',
+  VariableAssigner = 'variable-assigner',
+}
+
 export type NodeData = {
-  type: string
+  type: BlockEnum
   name?: string
   icon?: any
   description?: string
@@ -66,3 +81,10 @@ export type LLMNodeData = {
     }
   }
 }
+
+export type Block = {
+  classification?: string
+  type: BlockEnum
+  title: string
+  description?: string
+}