Feat: Add a tool operator node from the agent form #3221 (#8344)

### What problem does this PR solve?
Feat: Add a tool operator node from the agent form #3221

### Type of change


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

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

@@ -63,6 +63,13 @@ function InnerAgentNode({
           id="e"
           style={{ left: 180 }}
         ></Handle>
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          isConnectable={false}
+          id={NodeHandleId.Tool}
+          style={{ left: 20 }}
+        ></Handle>
         <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
       </NodeWrapper>
     </ToolBar>

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

@@ -1,12 +1,8 @@
 import { IToolNode } from '@/interfaces/database/agent';
-import { NodeProps, Position } from '@xyflow/react';
+import { Handle, NodeProps, Position } from '@xyflow/react';
 import { memo } from 'react';
 import { NodeHandleId } from '../../constant';
-import { CommonHandle } from './handle';
-import { LeftHandleStyle } from './handle-icon';
-import NodeHeader from './node-header';
 import { NodeWrapper } from './node-wrapper';
-import { ToolBar } from './toolbar';
 
 function InnerToolNode({
   id,
@@ -15,19 +11,14 @@ function InnerToolNode({
   selected,
 }: NodeProps<IToolNode>) {
   return (
-    <ToolBar selected={selected} id={id} label={data.label}>
-      <NodeWrapper>
-        <CommonHandle
-          id={NodeHandleId.End}
-          type="target"
-          position={Position.Top}
-          isConnectable={isConnectable}
-          style={LeftHandleStyle}
-          nodeId={id}
-        ></CommonHandle>
-        <NodeHeader id={id} name={data.name} label={data.label}></NodeHeader>
-      </NodeWrapper>
-    </ToolBar>
+    <NodeWrapper>
+      <Handle
+        id={NodeHandleId.End}
+        type="target"
+        position={Position.Top}
+        isConnectable={isConnectable}
+      ></Handle>
+    </NodeWrapper>
   );
 }
 

web/src/pages/agent/constant.tsx

@@ -84,6 +84,7 @@ export enum Operator {
   Code = 'Code',
   WaitingDialogue = 'WaitingDialogue',
   Agent = 'Agent',
+  Tool = 'Tool',
 }
 
 export const SwitchLogicOperatorOptions = ['and', 'or'];
@@ -809,6 +810,7 @@ export const NodeMap = {
   [Operator.Code]: 'ragNode',
   [Operator.WaitingDialogue]: 'ragNode',
   [Operator.Agent]: 'agentNode',
+  [Operator.Tool]: 'toolNode',
 };
 
 export const LanguageOptions = [
@@ -3012,4 +3014,5 @@ export const NoDebugOperatorsList = [
 export enum NodeHandleId {
   Start = 'start',
   End = 'end',
+  Tool = 'tool',
 }

web/src/pages/agent/form/agent-form/tool-popover/index.tsx

@@ -3,15 +3,33 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
-import { PropsWithChildren } from 'react';
+import { Operator } from '@/pages/agent/constant';
+import { AgentFormContext, AgentInstanceContext } from '@/pages/agent/context';
+import { Position } from '@xyflow/react';
+import { PropsWithChildren, useCallback, useContext } from 'react';
 import { ToolCommand } from './tool-command';
 
 export function ToolPopover({ children }: PropsWithChildren) {
+  const { addCanvasNode } = useContext(AgentInstanceContext);
+  const node = useContext(AgentFormContext);
+
+  const handleChange = useCallback(
+    (value: string[]) => {
+      if (Array.isArray(value) && value.length > 0) {
+        addCanvasNode(Operator.Tool, {
+          position: Position.Bottom,
+          nodeId: node?.id,
+        })();
+      }
+    },
+    [addCanvasNode, node?.id],
+  );
+
   return (
     <Popover>
       <PopoverTrigger asChild>{children}</PopoverTrigger>
       <PopoverContent className="w-80 p-0">
-        <ToolCommand></ToolCommand>
+        <ToolCommand onChange={handleChange}></ToolCommand>
       </PopoverContent>
     </Popover>
   );

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

@@ -0,0 +1,61 @@
+import { FormContainer } from '@/components/form-container';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { RAGFlowSelect } from '@/components/ui/select';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { INextOperatorForm } from '../../interface';
+import { useValues } from './use-values';
+import { useWatchFormChange } from './use-watch-change';
+
+const MessageForm = ({ node }: INextOperatorForm) => {
+  const values = useValues(node);
+
+  const FormSchema = z.object({
+    query: z.string(),
+  });
+
+  const form = useForm({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(node?.id, form);
+
+  return (
+    <Form {...form}>
+      <form
+        className="space-y-5 px-5 "
+        autoComplete="off"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <FormContainer>
+          <FormField
+            control={form.control}
+            name="query"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <RAGFlowSelect placeholder="shadcn" {...field} options={[]} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </FormContainer>
+      </form>
+    </Form>
+  );
+};
+
+export default MessageForm;

web/src/pages/agent/form/tavily-form/use-values.ts

@@ -0,0 +1,23 @@
+import { RAGFlowNodeType } from '@/interfaces/database/flow';
+import { isEmpty } from 'lodash';
+import { useMemo } from 'react';
+
+const defaultValues = {
+  content: [],
+};
+
+export function useValues(node?: RAGFlowNodeType) {
+  const values = useMemo(() => {
+    const formData = node?.data?.form;
+
+    if (isEmpty(formData)) {
+      return defaultValues;
+    }
+
+    return {
+      ...formData,
+    };
+  }, [node]);
+
+  return values;
+}

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

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { UseFormReturn, useWatch } from 'react-hook-form';
+import useGraphStore from '../../store';
+
+export function useWatchFormChange(id?: string, form?: UseFormReturn) {
+  let values = useWatch({ control: form?.control });
+  const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
+
+  useEffect(() => {
+    // Manually triggered form updates are synchronized to the canvas
+    if (id && form?.formState.isDirty) {
+      values = form?.getValues();
+      let nextValues: any = values;
+
+      nextValues = {
+        ...values,
+      };
+
+      updateNodeForm(id, nextValues);
+    }
+  }, [form?.formState.isDirty, id, updateNodeForm, values]);
+}

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

@@ -0,0 +1,7 @@
+import { INextOperatorForm } from '../../interface';
+
+const ToolForm = ({ node }: INextOperatorForm) => {
+  return <section>xxx</section>;
+};
+
+export default ToolForm;

web/src/pages/agent/hooks/use-add-node.ts

@@ -103,6 +103,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.Code]: initialCodeValues,
       [Operator.WaitingDialogue]: initialWaitingDialogueValues,
       [Operator.Agent]: { ...initialAgentValues, llm_id: llmId },
+      [Operator.Tool]: {},
     };
   }, [llmId]);
 
@@ -183,6 +184,53 @@ function useAddChildEdge() {
   return { addChildEdge };
 }
 
+function useAddTooNode() {
+  const addNode = useGraphStore((state) => state.addNode);
+  const getNode = useGraphStore((state) => state.getNode);
+  const addEdge = useGraphStore((state) => state.addEdge);
+  const edges = useGraphStore((state) => state.edges);
+  const nodes = useGraphStore((state) => state.nodes);
+
+  const addToolNode = useCallback(
+    (newNode: Node<any>, nodeId?: string) => {
+      const agentNode = getNode(nodeId);
+
+      if (agentNode) {
+        const childToolNodeIds = edges
+          .filter(
+            (x) => x.source === nodeId && x.sourceHandle === NodeHandleId.Tool,
+          )
+          .map((x) => x.target);
+
+        if (
+          childToolNodeIds.length > 0 &&
+          nodes.some((x) => x.id === childToolNodeIds[0])
+        ) {
+          return;
+        }
+
+        newNode.position = {
+          x: agentNode.position.x - 82,
+          y: agentNode.position.y + 140,
+        };
+
+        addNode(newNode);
+        if (nodeId) {
+          addEdge({
+            source: nodeId,
+            target: newNode.id,
+            sourceHandle: NodeHandleId.Tool,
+            targetHandle: NodeHandleId.End,
+          });
+        }
+      }
+    },
+    [addEdge, addNode, edges, getNode, nodes],
+  );
+
+  return { addToolNode };
+}
+
 export function useAddNode(reactFlowInstance?: ReactFlowInstance<any, any>) {
   const addNode = useGraphStore((state) => state.addNode);
   const getNode = useGraphStore((state) => state.getNode);
@@ -193,6 +241,7 @@ export function useAddNode(reactFlowInstance?: ReactFlowInstance<any, any>) {
   const initializeOperatorParams = useInitializeOperatorParams();
   const { calculateNewlyBackChildPosition } = useCalculateNewlyChildPosition();
   const { addChildEdge } = useAddChildEdge();
+  const { addToolNode } = useAddTooNode();
   //   const [reactFlowInstance, setReactFlowInstance] =
   //     useState<ReactFlowInstance<any, any>>();
 
@@ -203,15 +252,15 @@ export function useAddNode(reactFlowInstance?: ReactFlowInstance<any, any>) {
         position: Position.Right,
       },
     ) =>
-      (event: React.MouseEvent<HTMLElement>) => {
+      (event?: React.MouseEvent<HTMLElement>) => {
         const nodeId = params.nodeId;
 
         // reactFlowInstance.project was renamed to reactFlowInstance.screenToFlowPosition
         // and you don't need to subtract the reactFlowBounds.left/top anymore
         // details: https://@xyflow/react.dev/whats-new/2023-11-10
         let position = reactFlowInstance?.screenToFlowPosition({
-          x: event.clientX,
-          y: event.clientY,
+          x: event?.clientX || 0,
+          y: event?.clientY || 0,
         });
 
         if (params.position === Position.Right) {
@@ -287,6 +336,8 @@ export function useAddNode(reactFlowInstance?: ReactFlowInstance<any, any>) {
               targetHandle: 'f',
             });
           }
+        } else if (type === Operator.Tool) {
+          addToolNode(newNode, params.nodeId);
         } else {
           const subNodeOfIteration = getRelativePositionToIterationNode(
             nodes,
@@ -309,6 +360,7 @@ export function useAddNode(reactFlowInstance?: ReactFlowInstance<any, any>) {
       addChildEdge,
       addEdge,
       addNode,
+      addToolNode,
       calculateNewlyBackChildPosition,
       edges,
       getNode,