Feat: Displays the tool operator icon #3221 (#9133)

### What problem does this PR solve?

Feat: Displays the tool operator icon #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx

@@ -16,7 +16,7 @@ import { Operator } from '@/pages/agent/constant';
 import { AgentInstanceContext, HandleContext } from '@/pages/agent/context';
 import OperatorIcon from '@/pages/agent/operator-icon';
 import { lowerFirst } from 'lodash';
-import { PropsWithChildren, createContext, useContext } from 'react';
+import { PropsWithChildren, createContext, memo, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type OperatorItemProps = { operators: Operator[] };
@@ -124,7 +124,7 @@ function AccordionOperators() {
   );
 }
 
-export function NextStepDropdown({
+export function InnerNextStepDropdown({
   children,
   hideModal,
 }: PropsWithChildren & IModalProps<any>) {
@@ -143,3 +143,5 @@ export function NextStepDropdown({
     </DropdownMenu>
   );
 }
+
+export const NextStepDropdown = memo(InnerNextStepDropdown);

web/src/pages/agent/canvas/node/handle.tsx

@@ -4,7 +4,7 @@ import { Handle, HandleProps } from '@xyflow/react';
 import { Plus } from 'lucide-react';
 import { useMemo } from 'react';
 import { HandleContext } from '../../context';
-import { NextStepDropdown } from './dropdown/next-step-dropdown';
+import { InnerNextStepDropdown } from './dropdown/next-step-dropdown';
 
 export function CommonHandle({
   className,
@@ -38,9 +38,9 @@ export function CommonHandle({
       >
         <Plus className="size-3 pointer-events-none" />
         {visible && (
-          <NextStepDropdown hideModal={hideModal}>
+          <InnerNextStepDropdown hideModal={hideModal}>
             <span></span>
-          </NextStepDropdown>
+          </InnerNextStepDropdown>
         )}
       </Handle>
     </HandleContext.Provider>

web/src/pages/agent/operator-icon.tsx

@@ -1,4 +1,5 @@
 import { IconFont } from '@/components/icon-font';
+import SvgIcon from '@/components/svg-icon';
 import { cn } from '@/lib/utils';
 import { CirclePlay } from 'lucide-react';
 import { Operator } from './constant';
@@ -10,8 +11,6 @@ interface IProps {
 
 export const OperatorIconMap = {
   [Operator.Retrieval]: 'KR',
-  // [Operator.Generate]: MergeCellsOutlined,
-  // [Operator.Answer]: SendOutlined,
   [Operator.Begin]: CirclePlay,
   [Operator.Categorize]: 'a-QuestionClassification',
   [Operator.Message]: 'reply',
@@ -22,35 +21,25 @@ export const OperatorIconMap = {
   [Operator.UserFillUp]: 'await',
   [Operator.StringTransform]: 'a-textprocessing',
   [Operator.Note]: 'notebook-pen',
-  // [Operator.Relevant]: BranchesOutlined,
-  // [Operator.RewriteQuestion]: FormOutlined,
-  // [Operator.KeywordExtract]: KeywordIcon,
-  // [Operator.DuckDuckGo]: DuckIcon,
-  // [Operator.Baidu]: BaiduIcon,
-  // [Operator.Wikipedia]: WikipediaIcon,
-  // [Operator.PubMed]: PubMedIcon,
-  // [Operator.ArXiv]: ArXivIcon,
-  // [Operator.Google]: GoogleIcon,
-  // [Operator.Bing]: BingIcon,
-  // [Operator.GoogleScholar]: GoogleScholarIcon,
-  // [Operator.DeepL]: DeepLIcon,
-  // [Operator.GitHub]: GitHubIcon,
-  // [Operator.BaiduFanyi]: baiduFanyiIcon,
-  // [Operator.QWeather]: QWeatherIcon,
-  // [Operator.ExeSQL]: ExeSqlIcon,
-  // [Operator.WenCai]: WenCaiIcon,
-  // [Operator.AkShare]: AkShareIcon,
-  // [Operator.YahooFinance]: YahooFinanceIcon,
-  // [Operator.Jin10]: Jin10Icon,
-  // [Operator.Concentrator]: ConcentratorIcon,
-  // [Operator.TuShare]: TuShareIcon,
-  // [Operator.Note]: NoteIcon,
-  // [Operator.Crawler]: CrawlerIcon,
-  // [Operator.Invoke]: InvokeIcon,
-  // [Operator.Template]: TemplateIcon,
-  // [Operator.Email]: EmailIcon,
-  // [Operator.IterationStart]: CirclePower,
-  // [Operator.WaitingDialogue]: MessageSquareMore,
+  [Operator.ExeSQL]: 'executesql-0',
+  [Operator.Invoke]: 'httprequest-0',
+  [Operator.Email]: 'sendemail-0',
+};
+
+const SVGIconMap = {
+  [Operator.ArXiv]: 'arxiv',
+  [Operator.GitHub]: 'github',
+  [Operator.Bing]: 'bing',
+  [Operator.DuckDuckGo]: 'duck',
+  [Operator.Google]: 'google',
+  [Operator.GoogleScholar]: 'google-scholar',
+  [Operator.PubMed]: 'pubmed',
+  [Operator.TavilyExtract]: 'tavily',
+  [Operator.TavilySearch]: 'tavily',
+  [Operator.Wikipedia]: 'wikipedia',
+  [Operator.YahooFinance]: 'yahoo-finance',
+  [Operator.WenCai]: 'wencai',
+  [Operator.Crawler]: 'crawler',
 };
 
 const Empty = () => {
@@ -60,10 +49,20 @@ const Empty = () => {
 const OperatorIcon = ({ name, className }: IProps) => {
   const Icon = OperatorIconMap[name as keyof typeof OperatorIconMap] || Empty;
 
+  if (name in SVGIconMap) {
+    return (
+      <SvgIcon
+        name={SVGIconMap[name as keyof typeof SVGIconMap]}
+        width={20}
+        className={className}
+      ></SvgIcon>
+    );
+  }
+
   return typeof Icon === 'string' ? (
     <IconFont name={Icon} className={cn('size-5', className)}></IconFont>
   ) : (
-    <Icon className={cn('size-5', className)}> </Icon>
+    <Icon width={20} className={cn('size-5 fill-current', className)}></Icon>
   );
 };