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>