From 89c2067a16b9ffd674ee7999e4bb5f91b108a2b6 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Thu, 31 Jul 2025 18:53:03 +0800
Subject: [PATCH] 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   |  6 +++++-
 web/src/pages/agent/constant.tsx                | 17 +++--------------
 .../pages/agent/form/agent-form/agent-tools.tsx |  6 +++++-
 .../agent-form/tool-popover/tool-command.tsx    | 12 ++++++++----
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/web/src/pages/agent/canvas/node/tool-node.tsx b/web/src/pages/agent/canvas/node/tool-node.tsx
index ccdf7be83..42c7bf3b5 100644
--- a/web/src/pages/agent/canvas/node/tool-node.tsx
+++ b/web/src/pages/agent/canvas/node/tool-node.tsx
@@ -5,6 +5,7 @@ import { MouseEventHandler, memo, useCallback } from 'react';
 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';
 
@@ -57,7 +58,10 @@ function InnerToolNode({
             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>
         ))}
 
diff --git a/web/src/pages/agent/constant.tsx b/web/src/pages/agent/constant.tsx
index 8950b658b..fe3255d17 100644
--- a/web/src/pages/agent/constant.tsx
+++ b/web/src/pages/agent/constant.tsx
@@ -788,18 +788,8 @@ export const CategorizeAnchorPointPositions = [
 // 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]: [
@@ -809,9 +799,8 @@ export const RestrictedUpstreamMap = {
     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,
diff --git a/web/src/pages/agent/form/agent-form/agent-tools.tsx b/web/src/pages/agent/form/agent-form/agent-tools.tsx
index 60ae326b8..079297e0b 100644
--- a/web/src/pages/agent/form/agent-form/agent-tools.tsx
+++ b/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)}
diff --git a/web/src/pages/agent/form/agent-form/tool-popover/tool-command.tsx b/web/src/pages/agent/form/agent-form/tool-popover/tool-command.tsx
index 8d86a007a..801234b97 100644
--- a/web/src/pages/agent/form/agent-form/tool-popover/tool-command.tsx
+++ b/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>
               );