Feat: Add loop operator node. #10427 (#11449)

### What problem does this PR solve?

Feat: Add loop operator node. #10427

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

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

@@ -56,12 +56,14 @@ import { BeginNode } from './node/begin-node';
 import { CategorizeNode } from './node/categorize-node';
 import { DataOperationsNode } from './node/data-operations-node';
 import { NextStepDropdown } from './node/dropdown/next-step-dropdown';
+import { ExitLoopNode } from './node/exit-loop-node';
 import { ExtractorNode } from './node/extractor-node';
 import { FileNode } from './node/file-node';
 import { InvokeNode } from './node/invoke-node';
 import { IterationNode, IterationStartNode } from './node/iteration-node';
 import { KeywordNode } from './node/keyword-node';
 import { ListOperationsNode } from './node/list-operations-node';
+import { LoopNode, LoopStartNode } from './node/loop-node';
 import { MessageNode } from './node/message-node';
 import NoteNode from './node/note-node';
 import ParserNode from './node/parser-node';
@@ -105,6 +107,9 @@ export const nodeTypes: NodeTypes = {
   listOperationsNode: ListOperationsNode,
   variableAssignerNode: VariableAssignerNode,
   variableAggregatorNode: VariableAggregatorNode,
+  loopNode: LoopNode,
+  loopStartNode: LoopStartNode,
+  exitLoopNode: ExitLoopNode,
 };
 
 const edgeTypes = {

web/src/pages/agent/canvas/node/dropdown.tsx

@@ -1,58 +0,0 @@
-import OperateDropdown from '@/components/operate-dropdown';
-import { CopyOutlined } from '@ant-design/icons';
-import { Flex, MenuProps } from 'antd';
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Operator } from '../../constant';
-import { useDuplicateNode } from '../../hooks';
-import useGraphStore from '../../store';
-
-interface IProps {
-  id: string;
-  iconFontColor?: string;
-  label: string;
-}
-
-const NodeDropdown = ({ id, iconFontColor, label }: IProps) => {
-  const { t } = useTranslation();
-  const deleteNodeById = useGraphStore((store) => store.deleteNodeById);
-  const deleteIterationNodeById = useGraphStore(
-    (store) => store.deleteIterationNodeById,
-  );
-
-  const deleteNode = useCallback(() => {
-    if (label === Operator.Iteration) {
-      deleteIterationNodeById(id);
-    } else {
-      deleteNodeById(id);
-    }
-  }, [label, deleteIterationNodeById, id, deleteNodeById]);
-
-  const duplicateNode = useDuplicateNode();
-
-  const items: MenuProps['items'] = [
-    {
-      key: '2',
-      onClick: () => duplicateNode(id, label),
-      label: (
-        <Flex justify={'space-between'}>
-          {t('common.copy')}
-          <CopyOutlined />
-        </Flex>
-      ),
-    },
-  ];
-
-  return (
-    <OperateDropdown
-      iconFontSize={22}
-      height={14}
-      deleteItem={deleteNode}
-      items={items}
-      needsDeletionValidation={false}
-      iconFontColor={iconFontColor}
-    ></OperateDropdown>
-  );
-};
-
-export default NodeDropdown;

web/src/pages/agent/canvas/node/dropdown/accordion-operators.tsx

@@ -21,11 +21,23 @@ function OperatorAccordionTrigger({ children }: PropsWithChildren) {
 export function AccordionOperators({
   isCustomDropdown = false,
   mousePosition,
+  nodeId,
 }: {
   isCustomDropdown?: boolean;
   mousePosition?: { x: number; y: number };
+  nodeId?: string;
 }) {
   const { t } = useTranslation();
+  const { getOperatorTypeFromId, getParentIdById } = useGraphStore(
+    (state) => state,
+  );
+
+  const exitLoopList = useMemo(() => {
+    if (getOperatorTypeFromId(getParentIdById(nodeId)) === Operator.Loop) {
+      return [Operator.ExitLoop];
+    }
+    return [];
+  }, [getOperatorTypeFromId, getParentIdById, nodeId]);
 
   return (
     <Accordion
@@ -62,6 +74,8 @@ export function AccordionOperators({
             operators={[
               Operator.Switch,
               Operator.Iteration,
+              Operator.Loop,
+              ...exitLoopList,
               Operator.Categorize,
             ]}
             isCustomDropdown={isCustomDropdown}

web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx

@@ -73,6 +73,7 @@ export function InnerNextStepDropdown({
                 <AccordionOperators
                   isCustomDropdown={true}
                   mousePosition={position}
+                  nodeId={nodeId}
                 ></AccordionOperators>
               )}
             </OnNodeCreatedContext.Provider>
@@ -101,9 +102,11 @@ export function InnerNextStepDropdown({
         </DropdownMenuLabel>
         <HideModalContext.Provider value={hideModal}>
           {isPipeline ? (
-            <PipelineAccordionOperators></PipelineAccordionOperators>
+            <PipelineAccordionOperators
+              nodeId={nodeId}
+            ></PipelineAccordionOperators>
           ) : (
-            <AccordionOperators></AccordionOperators>
+            <AccordionOperators nodeId={nodeId}></AccordionOperators>
           )}
         </HideModalContext.Provider>
       </DropdownMenuContent>

web/src/pages/agent/canvas/node/exit-loop-node.tsx

@@ -0,0 +1,23 @@
+import { BaseNode } from '@/interfaces/database/agent';
+import { NodeProps } from '@xyflow/react';
+import { LeftEndHandle } from './handle';
+import NodeHeader from './node-header';
+import { NodeWrapper } from './node-wrapper';
+import { ToolBar } from './toolbar';
+
+export function ExitLoopNode({ id, data, selected }: NodeProps<BaseNode<any>>) {
+  return (
+    <ToolBar
+      selected={selected}
+      id={id}
+      label={data.label}
+      showRun={false}
+      showCopy={false}
+    >
+      <NodeWrapper selected={selected}>
+        <LeftEndHandle></LeftEndHandle>
+        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
+      </NodeWrapper>
+    </ToolBar>
+  );
+}

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

@@ -56,7 +56,7 @@ export function InnerIterationNode({
   );
 }
 
-function InnerIterationStartNode({
+export function InnerIterationStartNode({
   isConnectable = true,
   id,
   selected,

web/src/pages/agent/canvas/node/labeled-group-node.tsx

@@ -0,0 +1,75 @@
+import { Panel, type NodeProps, type PanelPosition } from '@xyflow/react';
+import { type ComponentProps, type ReactNode } from 'react';
+
+import { BaseNode } from '@/components/xyflow/base-node';
+import { cn } from '@/lib/utils';
+
+/* GROUP NODE Label ------------------------------------------------------- */
+
+export type GroupNodeLabelProps = ComponentProps<'div'>;
+
+export function GroupNodeLabel({
+  children,
+  className,
+  ...props
+}: GroupNodeLabelProps) {
+  return (
+    <div className="h-full w-full" {...props}>
+      <div
+        className={cn(
+          'text-card-foreground bg-secondary w-fit p-2 text-xs',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export type GroupNodeProps = Partial<NodeProps> & {
+  label?: ReactNode;
+  position?: PanelPosition;
+};
+
+/* GROUP NODE -------------------------------------------------------------- */
+
+export function LabeledGroupNode({
+  label = '',
+  position,
+  ...props
+}: GroupNodeProps) {
+  const getLabelClassName = (position?: PanelPosition) => {
+    switch (position) {
+      case 'top-left':
+        return 'rounded-br-sm';
+      case 'top-center':
+        return 'rounded-b-sm';
+      case 'top-right':
+        return 'rounded-bl-sm';
+      case 'bottom-left':
+        return 'rounded-tr-sm';
+      case 'bottom-right':
+        return 'rounded-tl-sm';
+      case 'bottom-center':
+        return 'rounded-t-sm';
+      default:
+        return 'rounded-br-sm';
+    }
+  };
+
+  return (
+    <BaseNode
+      className="bg-opacity-50 h-full overflow-hidden rounded-sm"
+      {...props}
+    >
+      <Panel className="m-0 p-0" position={position}>
+        {label && (
+          <GroupNodeLabel className={getLabelClassName(position)}>
+            {label}
+          </GroupNodeLabel>
+        )}
+      </Panel>
+    </BaseNode>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { BaseNode } from '@/interfaces/database/agent';
+import { NodeProps } from '@xyflow/react';
+import { memo } from 'react';
+import { InnerIterationNode, InnerIterationStartNode } from './iteration-node';
+
+export function InnerLoopNode({ ...props }: NodeProps<BaseNode<any>>) {
+  return <InnerIterationNode {...props}></InnerIterationNode>;
+}
+
+export const LoopNode = memo(InnerLoopNode);
+
+export function InnerLoopStartNode({ ...props }: NodeProps<BaseNode<any>>) {
+  return <InnerIterationStartNode {...props}></InnerIterationStartNode>;
+}
+
+export const LoopStartNode = memo(InnerLoopStartNode);

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

@@ -23,7 +23,7 @@ function InnerRetrievalNode({
   const knowledgeBaseIds: string[] = get(data, 'form.kb_ids', []);
   const { list: knowledgeList } = useFetchKnowledgeList(true);
 
-  const { getLabel } = useGetVariableLabelOrTypeByValue(id);
+  const { getLabel } = useGetVariableLabelOrTypeByValue({ nodeId: id });
 
   return (
     <ToolBar selected={selected} id={id} label={data.label}>

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

@@ -27,7 +27,7 @@ const ConditionBlock = ({
   nodeId,
 }: { condition: ISwitchCondition } & { nodeId: string }) => {
   const items = condition?.items ?? [];
-  const { getLabel } = useGetVariableLabelOrTypeByValue(nodeId);
+  const { getLabel } = useGetVariableLabelOrTypeByValue({ nodeId });
 
   const renderOperatorIcon = useCallback((operator?: string) => {
     const item = SwitchOperatorOptions.find((x) => x.value === operator);

web/src/pages/agent/canvas/node/toolbar.tsx

@@ -58,7 +58,7 @@ export function ToolBar({
   const deleteNode: MouseEventHandler<HTMLDivElement> = useCallback(
     (e) => {
       e.stopPropagation();
-      if (label === Operator.Iteration) {
+      if ([Operator.Iteration, Operator.Loop].includes(label as Operator)) {
         deleteIterationNodeById(id);
       } else {
         deleteNodeById(id);