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/form/agent-form/agent-tools.tsx

@@ -18,6 +18,7 @@ import { Operator } from '../../constant';
 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';
@@ -109,7 +110,10 @@ export function AgentTools() {
       <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

@@ -1,4 +1,4 @@
-import { Calendar, CheckIcon } from 'lucide-react';
+import { CheckIcon } from 'lucide-react';
 
 import {
   Command,
@@ -11,7 +11,10 @@ import {
 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 = [
   {
@@ -20,7 +23,7 @@ const Menus = [
       Operator.TavilySearch,
       Operator.TavilyExtract,
       Operator.Google,
-      Operator.Bing,
+      // Operator.Bing,
       Operator.DuckDuckGo,
       Operator.Wikipedia,
       Operator.YahooFinance,
@@ -105,6 +108,7 @@ function useHandleSelectChange({ onChange, value }: ToolCommandProps) {
 }
 
 export function ToolCommand({ value, onChange }: ToolCommandProps) {
+  const { t } = useTranslation();
   const { toggleOption, currentValue } = useHandleSelectChange({
     onChange,
     value,
@@ -127,8 +131,8 @@ export function ToolCommand({ value, onChange }: ToolCommandProps) {
                   isSelected={isSelected}
                 >
                   <>
-                    <Calendar />
-                    <span>{y}</span>
+                    <OperatorIcon name={y as Operator}></OperatorIcon>
+                    <span>{t(`flow.${lowerFirst(y)}`)}</span>
                   </>
                 </ToolCommandItem>
               );