Feat: Display operator icons on the agent form #3221 (#9138)

### What problem does this PR solve?

Feat: Display operator icons on the agent form #3221
Fix: Fixed the issue where the form corresponding to the tool operator
icon could not appear after clicking it #3211

### Type of change


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

web/src/pages/agent/canvas/node/tool-node.tsx

 import { NodeHandleId, Operator } from '../../constant';
 import { ToolCard } from '../../form/agent-form/agent-tools';
 import { useFindMcpById } from '../../hooks/use-find-mcp-by-id';
+import OperatorIcon from '../../operator-icon';
 import useGraphStore from '../../store';
 import { NodeWrapper } from './node-wrapper';
 
             className="cursor-pointer"
             data-tool={x.component_name}
           >
-            {x.component_name}
+            <div className="flex gap-1 items-center pointer-events-none">
+              <OperatorIcon name={x.component_name as Operator}></OperatorIcon>
+              {x.component_name}
+            </div>
           </ToolCard>
         ))}
 

web/src/pages/agent/constant.tsx

 // no connection lines are allowed between key and value
 export const RestrictedUpstreamMap = {
   [Operator.Begin]: [Operator.Relevant],
-  [Operator.Categorize]: [
-    Operator.Begin,
-    Operator.Categorize,
-    Operator.Answer,
-    Operator.Relevant,
-  ],
-  [Operator.Answer]: [
-    Operator.Begin,
-    Operator.Answer,
-    Operator.Message,
-    Operator.Relevant,
-  ],
+  [Operator.Categorize]: [Operator.Begin, Operator.Categorize, Operator.Answer],
+  [Operator.Answer]: [Operator.Begin, Operator.Answer, Operator.Message],
   [Operator.Retrieval]: [Operator.Begin, Operator.Retrieval],
   [Operator.Generate]: [Operator.Begin, Operator.Relevant],
   [Operator.Message]: [
     Operator.Retrieval,
     Operator.RewriteQuestion,
     Operator.Categorize,
-    Operator.Relevant,
   ],
-  [Operator.Relevant]: [Operator.Begin, Operator.Answer, Operator.Relevant],
+  [Operator.Relevant]: [Operator.Begin, Operator.Answer],
   [Operator.RewriteQuestion]: [
     Operator.Begin,
     Operator.Message,

web/src/pages/agent/form/agent-form/agent-tools.tsx

 import { AgentInstanceContext } from '../../context';
 import { useFindMcpById } from '../../hooks/use-find-mcp-by-id';
 import { INextOperatorForm } from '../../interface';
+import OperatorIcon from '../../operator-icon';
 import useGraphStore from '../../store';
 import { filterDownstreamAgentNodeIds } from '../../utils/filter-downstream-nodes';
 import { ToolPopover } from './tool-popover';
       <ul className="space-y-2">
         {toolNames.map((x) => (
           <ToolCard key={x}>
-            {x}
+            <div className="flex gap-2 items-center">
+              <OperatorIcon name={x as Operator}></OperatorIcon>
+              {x}
+            </div>
             <ActionButton
               record={x}
               deleteRecord={deleteNodeTool(x)}

web/src/pages/agent/form/agent-form/tool-popover/tool-command.tsx

-import { Calendar, CheckIcon } from 'lucide-react';
+import { CheckIcon } from 'lucide-react';
 
 import {
   Command,
 import { useListMcpServer } from '@/hooks/use-mcp-request';
 import { cn } from '@/lib/utils';
 import { Operator } from '@/pages/agent/constant';
+import OperatorIcon from '@/pages/agent/operator-icon';
+import { lowerFirst } from 'lodash';
 import { PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const Menus = [
   {
       Operator.TavilySearch,
       Operator.TavilyExtract,
       Operator.Google,
-      Operator.Bing,
+      // Operator.Bing,
       Operator.DuckDuckGo,
       Operator.Wikipedia,
       Operator.YahooFinance,
 }
 
 export function ToolCommand({ value, onChange }: ToolCommandProps) {
+  const { t } = useTranslation();
   const { toggleOption, currentValue } = useHandleSelectChange({
     onChange,
     value,
                   isSelected={isSelected}
                 >
                   <>
-                    <Calendar />
-                    <span>{y}</span>
+                    <OperatorIcon name={y as Operator}></OperatorIcon>
+                    <span>{t(`flow.${lowerFirst(y)}`)}</span>
                   </>
                 </ToolCommandItem>
               );