orcheo-canvas 0.0.1

package/src/features/workflow/pages/workflow-canvas/hooks/use-workflow-canvas-history.ts

@@ -0,0 +1,233 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import type { EdgeChange, NodeChange } from "@xyflow/react";
+import { useEdgesState, useNodesState } from "@xyflow/react";
+
+import {
+  cloneEdge,
+  cloneNode,
+} from "@features/workflow/pages/workflow-canvas/helpers/clipboard";
+import type {
+  CanvasEdge,
+  CanvasNode,
+  WorkflowSnapshot,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+
+const HISTORY_LIMIT = 50;
+
+type UseWorkflowCanvasHistoryOptions = {
+  initialNodes: CanvasNode[];
+  initialEdges: CanvasEdge[];
+};
+
+type SetStateAction<T> = React.SetStateAction<T>;
+
+export interface WorkflowCanvasHistory {
+  nodes: CanvasNode[];
+  edges: CanvasEdge[];
+  nodesRef: React.MutableRefObject<CanvasNode[]>;
+  edgesRef: React.MutableRefObject<CanvasEdge[]>;
+  latestNodesRef: React.MutableRefObject<CanvasNode[]>;
+  isRestoringRef: React.MutableRefObject<boolean>;
+  onNodesChange: (changes: NodeChange<CanvasNode>[]) => void;
+  onEdgesChange: (changes: EdgeChange<CanvasEdge>[]) => void;
+  setNodes: (updater: SetStateAction<CanvasNode[]>) => void;
+  setEdges: (updater: SetStateAction<CanvasEdge[]>) => void;
+  setNodesState: React.Dispatch<SetStateAction<CanvasNode[]>>;
+  setEdgesState: React.Dispatch<SetStateAction<CanvasEdge[]>>;
+  createSnapshot: () => WorkflowSnapshot;
+  recordSnapshot: (options?: { force?: boolean }) => void;
+  applySnapshot: (
+    snapshot: WorkflowSnapshot,
+    options?: { resetHistory?: boolean },
+  ) => void;
+  handleUndo: () => void;
+  handleRedo: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+}
+
+export function useWorkflowCanvasHistory({
+  initialNodes,
+  initialEdges,
+}: UseWorkflowCanvasHistoryOptions): WorkflowCanvasHistory {
+  const [nodes, setNodesState, onNodesChangeState] =
+    useNodesState<CanvasNode>(initialNodes);
+  const [edges, setEdgesState, onEdgesChangeState] =
+    useEdgesState<CanvasEdge>(initialEdges);
+
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+
+  const nodesRef = useRef<CanvasNode[]>(nodes);
+  const edgesRef = useRef<CanvasEdge[]>(edges);
+  const latestNodesRef = useRef<CanvasNode[]>(nodes);
+  const undoStackRef = useRef<WorkflowSnapshot[]>([]);
+  const redoStackRef = useRef<WorkflowSnapshot[]>([]);
+  const isRestoringRef = useRef(false);
+
+  useEffect(() => {
+    nodesRef.current = nodes;
+    latestNodesRef.current = nodes;
+  }, [nodes]);
+
+  useEffect(() => {
+    edgesRef.current = edges;
+  }, [edges]);
+
+  useLayoutEffect(() => {
+    if (isRestoringRef.current) {
+      isRestoringRef.current = false;
+    }
+  }, [nodes, edges]);
+
+  const createSnapshot = useCallback((): WorkflowSnapshot => {
+    return {
+      nodes: nodesRef.current.map(cloneNode),
+      edges: edgesRef.current.map(cloneEdge),
+    };
+  }, []);
+
+  const recordSnapshot = useCallback(
+    (options?: { force?: boolean }) => {
+      if (isRestoringRef.current && !options?.force) {
+        return;
+      }
+      const snapshot = createSnapshot();
+      undoStackRef.current = [...undoStackRef.current, snapshot].slice(
+        -HISTORY_LIMIT,
+      );
+      redoStackRef.current = [];
+      setCanUndo(undoStackRef.current.length > 0);
+      setCanRedo(false);
+    },
+    [createSnapshot],
+  );
+
+  const applySnapshot = useCallback(
+    (snapshot: WorkflowSnapshot, options?: { resetHistory?: boolean }) => {
+      isRestoringRef.current = true;
+      setNodesState(snapshot.nodes);
+      setEdgesState(snapshot.edges);
+      if (options?.resetHistory) {
+        undoStackRef.current = [];
+        redoStackRef.current = [];
+        setCanUndo(false);
+        setCanRedo(false);
+      }
+    },
+    [setNodesState, setEdgesState],
+  );
+
+  const setNodes = useCallback(
+    (updater: SetStateAction<CanvasNode[]>) => {
+      if (!isRestoringRef.current) {
+        recordSnapshot();
+      }
+      setNodesState((current) =>
+        typeof updater === "function"
+          ? (updater as (value: CanvasNode[]) => CanvasNode[])(current)
+          : updater,
+      );
+    },
+    [recordSnapshot, setNodesState],
+  );
+
+  const setEdges = useCallback(
+    (updater: SetStateAction<CanvasEdge[]>) => {
+      if (!isRestoringRef.current) {
+        recordSnapshot();
+      }
+      setEdgesState((current) =>
+        typeof updater === "function"
+          ? (updater as (value: CanvasEdge[]) => CanvasEdge[])(current)
+          : updater,
+      );
+    },
+    [recordSnapshot, setEdgesState],
+  );
+
+  const handleUndo = useCallback(() => {
+    const previousSnapshot = undoStackRef.current.pop();
+    if (!previousSnapshot) {
+      return;
+    }
+    const currentSnapshot = createSnapshot();
+    redoStackRef.current = [...redoStackRef.current, currentSnapshot].slice(
+      -HISTORY_LIMIT,
+    );
+    applySnapshot(previousSnapshot);
+    setCanUndo(undoStackRef.current.length > 0);
+    setCanRedo(true);
+  }, [applySnapshot, createSnapshot]);
+
+  const handleRedo = useCallback(() => {
+    const nextSnapshot = redoStackRef.current.pop();
+    if (!nextSnapshot) {
+      return;
+    }
+    const currentSnapshot = createSnapshot();
+    undoStackRef.current = [...undoStackRef.current, currentSnapshot].slice(
+      -HISTORY_LIMIT,
+    );
+    applySnapshot(nextSnapshot);
+    setCanRedo(redoStackRef.current.length > 0);
+    setCanUndo(true);
+  }, [applySnapshot, createSnapshot]);
+
+  const onNodesChange = useCallback(
+    (changes: NodeChange<CanvasNode>[]) => {
+      const shouldRecord = changes.some((change) => {
+        if (change.type === "select") {
+          return false;
+        }
+        if (change.type === "position" && change.dragging) {
+          return false;
+        }
+        return true;
+      });
+      if (shouldRecord) {
+        recordSnapshot();
+      }
+      onNodesChangeState(changes);
+    },
+    [onNodesChangeState, recordSnapshot],
+  );
+
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange<CanvasEdge>[]) => {
+      if (changes.some((change) => change.type !== "select")) {
+        recordSnapshot();
+      }
+      onEdgesChangeState(changes);
+    },
+    [onEdgesChangeState, recordSnapshot],
+  );
+
+  return {
+    nodes,
+    edges,
+    nodesRef,
+    edgesRef,
+    latestNodesRef,
+    isRestoringRef,
+    onNodesChange,
+    onEdgesChange,
+    setNodes,
+    setEdges,
+    setNodesState,
+    setEdgesState,
+    createSnapshot,
+    recordSnapshot,
+    applySnapshot,
+    handleUndo,
+    handleRedo,
+    canUndo,
+    canRedo,
+  };
+}

package/src/features/workflow/pages/workflow-canvas/hooks/use-workflow-chat.ts

@@ -0,0 +1,284 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { buildBackendHttpUrl } from "@/lib/config";
+import type {
+  CanvasNode,
+  NodeData,
+  NodeStatus,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+import {
+  requestWorkflowChatSession,
+  type WorkflowChatSession,
+} from "@features/chatkit/lib/workflow-session";
+import { recordChatTelemetry } from "@features/chatkit/lib/telemetry";
+
+export type ChatSessionStatus = "idle" | "loading" | "ready" | "error";
+
+type UseWorkflowChatArgs = {
+  nodesRef: React.MutableRefObject<CanvasNode[]>;
+  setNodes: React.Dispatch<React.SetStateAction<CanvasNode[]>>;
+  workflowId: string | null | undefined;
+  backendBaseUrl: string | null;
+  userName: string;
+};
+
+const SESSION_REFRESH_BUFFER_MS = 30_000;
+
+export const useWorkflowChat = ({
+  nodesRef,
+  setNodes,
+  workflowId,
+  backendBaseUrl,
+  userName,
+}: UseWorkflowChatArgs) => {
+  const [isChatOpen, setIsChatOpen] = useState(false);
+  const [activeChatNodeId, setActiveChatNodeId] = useState<string | null>(null);
+  const [chatTitle, setChatTitle] = useState("Chat");
+  const [sessionStatus, setSessionStatus] = useState<ChatSessionStatus>("idle");
+  const [sessionError, setSessionError] = useState<string | null>(null);
+  const sessionRef = useRef<WorkflowChatSession | null>(null);
+  const pendingSessionRef = useRef<Promise<string> | null>(null);
+  const previousWorkflowIdRef = useRef<string | null | undefined>(workflowId);
+
+  const resetSession = useCallback(() => {
+    sessionRef.current = null;
+    pendingSessionRef.current = null;
+    setSessionStatus("idle");
+    setSessionError(null);
+  }, []);
+
+  useEffect(() => {
+    if (workflowId === previousWorkflowIdRef.current) {
+      return;
+    }
+    previousWorkflowIdRef.current = workflowId;
+    resetSession();
+  }, [resetSession, workflowId]);
+
+  const isSessionValid = useCallback((session: WorkflowChatSession | null) => {
+    if (!session?.clientSecret) {
+      return false;
+    }
+    if (!session.expiresAt) {
+      return true;
+    }
+    return Date.now() + SESSION_REFRESH_BUFFER_MS < session.expiresAt;
+  }, []);
+
+  const refreshSession = useCallback(async () => {
+    if (!workflowId) {
+      const message = "Save the workflow before opening ChatKit.";
+      setSessionStatus("error");
+      setSessionError(message);
+      recordChatTelemetry("canvas.chat.session.failure", {
+        reason: "missing_workflow",
+      });
+      throw new Error(message);
+    }
+
+    if (pendingSessionRef.current) {
+      return pendingSessionRef.current;
+    }
+
+    const pending = (async () => {
+      setSessionStatus("loading");
+      setSessionError(null);
+      try {
+        const session = await requestWorkflowChatSession(
+          workflowId,
+          backendBaseUrl ?? undefined,
+        );
+        sessionRef.current = session;
+        setSessionStatus("ready");
+        recordChatTelemetry("canvas.chat.session.success", { workflowId });
+        return session.clientSecret;
+      } catch (error) {
+        const message =
+          error instanceof Error
+            ? error.message
+            : "Unable to start a ChatKit session.";
+        setSessionStatus("error");
+        setSessionError(message);
+        sessionRef.current = null;
+        recordChatTelemetry("canvas.chat.session.failure", {
+          workflowId,
+          message,
+        });
+        throw error instanceof Error ? error : new Error(message);
+      } finally {
+        pendingSessionRef.current = null;
+      }
+    })();
+
+    pendingSessionRef.current = pending;
+    return pending;
+  }, [backendBaseUrl, workflowId]);
+
+  const getClientSecret = useCallback(
+    async (currentSecret: string | null) => {
+      void currentSecret;
+      const reusableSession = sessionRef.current;
+      if (reusableSession && isSessionValid(reusableSession)) {
+        return reusableSession.clientSecret;
+      }
+      return refreshSession();
+    },
+    [isSessionValid, refreshSession],
+  );
+
+  const handleOpenChat = useCallback(
+    (nodeId: string) => {
+      const chatNode = nodesRef.current.find((node) => node.id === nodeId);
+      if (chatNode) {
+        setChatTitle(chatNode.data.label || "Chat");
+        setActiveChatNodeId(nodeId);
+        setIsChatOpen(true);
+        recordChatTelemetry("canvas.chat.open", {
+          workflowId,
+          nodeId,
+        });
+        void refreshSession();
+      }
+    },
+    [nodesRef, refreshSession, workflowId],
+  );
+
+  const handleCloseChat = useCallback(() => {
+    setIsChatOpen(false);
+    setActiveChatNodeId(null);
+    recordChatTelemetry("canvas.chat.close", { workflowId });
+  }, [workflowId]);
+
+  const handleChatResponseStart = useCallback(() => {
+    if (!activeChatNodeId) {
+      return;
+    }
+
+    setNodes((nodes) =>
+      nodes.map((node) =>
+        node.id === activeChatNodeId
+          ? {
+              ...node,
+              data: {
+                ...node.data,
+                status: "running" as NodeStatus,
+              },
+            }
+          : node,
+      ),
+    );
+  }, [activeChatNodeId, setNodes]);
+
+  const handleChatResponseEnd = useCallback(() => {
+    if (!activeChatNodeId) {
+      return;
+    }
+
+    setNodes((nodes) =>
+      nodes.map((node) =>
+        node.id === activeChatNodeId
+          ? {
+              ...node,
+              data: {
+                ...node.data,
+                status: "success" as NodeStatus,
+              },
+            }
+          : node,
+      ),
+    );
+  }, [activeChatNodeId, setNodes]);
+
+  const handleChatClientTool = useCallback(
+    async (toolCall: { name: string; params: Record<string, unknown> }) => {
+      if (!activeChatNodeId || toolCall.name !== "orcheo.run_workflow") {
+        return {};
+      }
+
+      if (!workflowId) {
+        throw new Error("Cannot trigger workflow without a workflow ID");
+      }
+
+      const params = toolCall.params ?? {};
+      const rawMessage =
+        typeof params.message === "string" ? params.message : "";
+      const threadId =
+        typeof params.threadId === "string"
+          ? params.threadId
+          : typeof params.thread_id === "string"
+            ? params.thread_id
+            : null;
+
+      const metadata = { ...(params as Record<string, unknown>) };
+      delete metadata.message;
+      delete metadata.threadId;
+      delete metadata.thread_id;
+
+      const response = await fetch(
+        buildBackendHttpUrl(
+          `/api/chatkit/workflows/${workflowId}/trigger`,
+          backendBaseUrl,
+        ),
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            message: rawMessage,
+            actor: userName,
+            client_thread_id: threadId,
+            metadata,
+          }),
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error("Failed to trigger workflow via ChatKit client tool");
+      }
+
+      const result = (await response.json()) as Record<string, unknown>;
+
+      return result;
+    },
+    [activeChatNodeId, backendBaseUrl, userName, workflowId],
+  );
+
+  const attachChatHandlerToNode = useCallback(
+    (node: CanvasNode): CanvasNode => {
+      if (node.type !== "chatTrigger") {
+        return node;
+      }
+      const data = node.data as NodeData;
+      return {
+        ...node,
+        data: {
+          ...data,
+          onOpenChat: () => handleOpenChat(node.id),
+        },
+      };
+    },
+    [handleOpenChat],
+  );
+
+  return {
+    isChatOpen,
+    setIsChatOpen,
+    activeChatNodeId,
+    setActiveChatNodeId,
+    chatTitle,
+    setChatTitle,
+    handleOpenChat,
+    handleCloseChat,
+    handleChatResponseStart,
+    handleChatResponseEnd,
+    handleChatClientTool,
+    attachChatHandlerToNode,
+    getClientSecret,
+    refreshSession,
+    sessionStatus,
+    sessionError,
+    workflowId: workflowId ?? null,
+    backendBaseUrl,
+  };
+};