Fix: Fixed the issue that the condition of deleting the classification operator cannot be connected anymore #3221 (#9068)

### What problem does this PR solve?
Fix: Fixed the issue that the condition of deleting the classification
operator cannot be connected anymore #3221
### Type of change



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

web/src/pages/agent/canvas/edge/index.tsx

@@ -5,6 +5,7 @@ import {
   EdgeProps,
   getBezierPath,
 } from '@xyflow/react';
+import { memo } from 'react';
 import useGraphStore from '../../store';
 
 import { useFetchAgent } from '@/hooks/use-agent-request';
@@ -12,7 +13,7 @@ import { cn } from '@/lib/utils';
 import { useMemo } from 'react';
 import { NodeHandleId, Operator } from '../../constant';
 
-export function ButtonEdge({
+function InnerButtonEdge({
   id,
   sourceX,
   sourceY,
@@ -77,7 +78,8 @@ export function ButtonEdge({
   const visible = useMemo(() => {
     return (
       data?.isHovered &&
-      sourceHandleId !== NodeHandleId.Tool && // The connection between the agent node and the tool node does not need to display the delete button
+      sourceHandleId !== NodeHandleId.Tool &&
+      sourceHandleId !== NodeHandleId.AgentBottom && // The connection between the agent node and the tool node does not need to display the delete button
       !target.startsWith(Operator.Tool)
     );
   }, [data?.isHovered, sourceHandleId, target]);
@@ -120,3 +122,5 @@ export function ButtonEdge({
     </>
   );
 }
+
+export const ButtonEdge = memo(InnerButtonEdge);

web/src/pages/agent/canvas/node/categorize-handle.tsx

@@ -1,40 +0,0 @@
-import { Handle, Position } from '@xyflow/react';
-
-import React, { memo } from 'react';
-import styles from './index.less';
-
-const DEFAULT_HANDLE_STYLE = {
-  width: 6,
-  height: 6,
-  bottom: -5,
-  fontSize: 8,
-};
-
-interface IProps extends React.PropsWithChildren {
-  top: number;
-  right: number;
-  id: string;
-  idx?: number;
-}
-
-const CategorizeHandle = ({ top, right, id, children }: IProps) => {
-  return (
-    <Handle
-      type="source"
-      position={Position.Right}
-      id={id}
-      isConnectable
-      style={{
-        ...DEFAULT_HANDLE_STYLE,
-        top: `${top}%`,
-        right: `${right}%`,
-        background: 'red',
-        color: 'black',
-      }}
-    >
-      <span className={styles.categorizeAnchorPointText}>{children || id}</span>
-    </Handle>
-  );
-};
-
-export default memo(CategorizeHandle);

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

@@ -34,15 +34,15 @@ export function InnerCategorizeNode({
           <div className={'bg-background-card rounded-sm px-1'}>
             <LLMLabel value={get(data, 'form.llm_id')}></LLMLabel>
           </div>
-          {positions.map((position, idx) => {
+          {positions.map((position) => {
             return (
-              <div key={idx}>
-                <div className={'bg-background-card rounded-sm p-1'}>
-                  {position.text}
+              <div key={position.uuid}>
+                <div className={'bg-background-card rounded-sm p-1 truncate'}>
+                  {position.name}
                 </div>
                 <CommonHandle
-                  key={position.text}
-                  id={position.text}
+                  // key={position.text}
+                  id={position.uuid}
                   type="source"
                   position={Position.Right}
                   isConnectable

web/src/pages/agent/canvas/node/use-build-categorize-handle-positions.ts

@@ -1,8 +1,9 @@
-import { ICategorizeItemResult } from '@/interfaces/database/agent';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { useUpdateNodeInternals } from '@xyflow/react';
 import { get } from 'lodash';
 import { useEffect, useMemo } from 'react';
+import { z } from 'zod';
+import { useCreateCategorizeFormSchema } from '../../form/categorize-form/use-form-schema';
 
 export const useBuildCategorizeHandlePositions = ({
   data,
@@ -13,33 +14,35 @@ export const useBuildCategorizeHandlePositions = ({
 }) => {
   const updateNodeInternals = useUpdateNodeInternals();
 
-  const categoryData: ICategorizeItemResult = useMemo(() => {
-    return get(data, `form.category_description`, {});
+  const FormSchema = useCreateCategorizeFormSchema();
+
+  type FormSchemaType = z.infer<typeof FormSchema>;
+
+  const items: Required<FormSchemaType['items']> = useMemo(() => {
+    return get(data, `form.items`, []);
   }, [data]);
 
   const positions = useMemo(() => {
     const list: Array<{
-      text: string;
       top: number;
-      idx: number;
-    }> = [];
+      name: string;
+      uuid: string;
+    }> &
+      Required<FormSchemaType['items']> = [];
 
-    Object.keys(categoryData)
-      .sort((a, b) => categoryData[a].index - categoryData[b].index)
-      .forEach((x, idx) => {
-        list.push({
-          text: x,
-          idx,
-          top: idx === 0 ? 86 : list[idx - 1].top + 8 + 24,
-        });
+    items.forEach((x, idx) => {
+      list.push({
+        ...x,
+        top: idx === 0 ? 86 : list[idx - 1].top + 8 + 24,
       });
+    });
 
     return list;
-  }, [categoryData]);
+  }, [items]);
 
   useEffect(() => {
     updateNodeInternals(id);
-  }, [id, updateNodeInternals, categoryData]);
+  }, [id, updateNodeInternals, items]);
 
   return { positions };
 };