Fix: Fixed the issue of retrieval operator text overlapping #3221 (#8652)

### What problem does this PR solve?

Fix: Fixed the issue of retrieval operator text overlapping #3221

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

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

@@ -1,9 +1,9 @@
-import { IconFont } from '@/components/icon-font';
 import { Card, CardContent } from '@/components/ui/card';
 import { ISwitchCondition, ISwitchNode } from '@/interfaces/database/flow';
 import { NodeProps, Position } from '@xyflow/react';
 import { memo, useCallback } from 'react';
 import { NodeHandleId, SwitchOperatorOptions } from '../../constant';
+import { LogicalOperatorIcon } from '../../form/switch-form';
 import { useGetVariableLabelByValue } from '../../hooks/use-get-begin-query';
 import { CommonHandle } from './handle';
 import { RightHandleStyle } from './handle-icon';
@@ -30,8 +30,16 @@ const ConditionBlock = ({
   const getLabel = useGetVariableLabelByValue(nodeId);
 
   const renderOperatorIcon = useCallback((operator?: string) => {
-    const name = SwitchOperatorOptions.find((x) => x.value === operator)?.icon;
-    return <IconFont name={name!}></IconFont>;
+    const item = SwitchOperatorOptions.find((x) => x.value === operator);
+    if (item) {
+      return (
+        <LogicalOperatorIcon
+          icon={item?.icon}
+          value={item?.value}
+        ></LogicalOperatorIcon>
+      );
+    }
+    return <></>;
   }, []);
 
   return (

web/src/pages/agent/constant.tsx

@@ -34,6 +34,8 @@ export enum PromptRole {
 }
 
 import {
+  Circle,
+  CircleSlash2,
   CloudUpload,
   ListOrdered,
   OptionIcon,
@@ -378,8 +380,16 @@ export const SwitchOperatorOptions = [
   { value: 'not contains', label: 'notContains', icon: 'not-contains' },
   { value: 'start with', label: 'startWith', icon: 'list-start' },
   { value: 'end with', label: 'endWith', icon: 'list-end' },
-  { value: 'empty', label: 'empty', icon: 'circle' },
-  { value: 'not empty', label: 'notEmpty', icon: 'circle-slash-2' },
+  {
+    value: 'empty',
+    label: 'empty',
+    icon: <Circle className="size-4" />,
+  },
+  {
+    value: 'not empty',
+    label: 'notEmpty',
+    icon: <CircleSlash2 className="size-4" />,
+  },
 ];
 
 export const SwitchElseTo = 'end_cpn_ids';

web/src/pages/agent/form/code-form/use-watch-change.ts

@@ -8,9 +8,7 @@ import { FormSchemaType } from './schema';
 
 function convertToObject(list: FormSchemaType['arguments'] = []) {
   return list.reduce<Record<string, string>>((pre, cur) => {
-    if (cur.name && cur.type) {
-      pre[cur.name] = cur.type;
-    }
+    pre[cur.name] = cur.type;
 
     return pre;
   }, {});

web/src/pages/agent/form/switch-form/index.tsx

@@ -41,18 +41,21 @@ type ConditionCardsProps = {
   parentLength: number;
 } & IOperatorForm;
 
-const OperatorIcon = function OperatorIcon({
+export const LogicalOperatorIcon = function OperatorIcon({
   icon,
   value,
 }: Omit<(typeof SwitchOperatorOptions)[0], 'label'>) {
-  return (
-    <IconFont
-      name={icon}
-      className={cn('size-4', {
-        'rotate-180': value === '>',
-      })}
-    ></IconFont>
-  );
+  if (typeof icon === 'string') {
+    return (
+      <IconFont
+        name={icon}
+        className={cn('size-4', {
+          'rotate-180': value === '>',
+        })}
+      ></IconFont>
+    );
+  }
+  return icon;
 };
 
 function useBuildSwitchOperatorOptions() {
@@ -61,7 +64,12 @@ function useBuildSwitchOperatorOptions() {
   const switchOperatorOptions = useMemo(() => {
     return SwitchOperatorOptions.map((x) => ({
       value: x.value,
-      icon: <OperatorIcon icon={x.icon} value={x.value}></OperatorIcon>,
+      icon: (
+        <LogicalOperatorIcon
+          icon={x.icon}
+          value={x.value}
+        ></LogicalOperatorIcon>
+      ),
       label: t(`flow.switchOperatorOptions.${x.label}`),
     }));
   }, [t]);