orcheo-studio 0.21.1

package/src/features/workflow/pages/workflow/hooks/use-workflow-loader.ts

@@ -0,0 +1,236 @@
+import type { Dispatch, SetStateAction } from "react";
+import { useEffect, useRef } from "react";
+
+import { toast } from "@/hooks/use-toast";
+import {
+  getWorkflowById,
+  type StoredWorkflow,
+} from "@features/workflow/lib/workflow-storage";
+import type {
+  ChatKitStartScreenPrompt,
+  ChatKitSupportedModel,
+} from "@features/workflow/lib/workflow-storage.types";
+import { loadWorkflowExecutions } from "@features/workflow/lib/workflow-execution-storage";
+import type { WorkflowExecution } from "@features/workflow/pages/workflow/helpers/types";
+
+interface UseWorkflowLoaderParams {
+  workflowId: string | undefined;
+  loadExecutionHistory: boolean;
+  setCurrentWorkflowId: Dispatch<SetStateAction<string | null>>;
+  setWorkflowName: Dispatch<SetStateAction<string>>;
+  setWorkflowDescription: Dispatch<SetStateAction<string>>;
+  setWorkflowTags: Dispatch<SetStateAction<string[]>>;
+  setWorkflowVersions: Dispatch<SetStateAction<StoredWorkflow["versions"]>>;
+  setChatkitStartScreenPrompts: Dispatch<
+    SetStateAction<ChatKitStartScreenPrompt[] | null>
+  >;
+  setChatkitSupportedModels: Dispatch<
+    SetStateAction<ChatKitSupportedModel[] | null>
+  >;
+  setIsWorkflowPublic: Dispatch<SetStateAction<boolean>>;
+  setWorkflowShareUrl: Dispatch<SetStateAction<string | null>>;
+  setIsWorkflowLoading: Dispatch<SetStateAction<boolean>>;
+  setWorkflowLoadError: Dispatch<SetStateAction<string | null>>;
+  setExecutions: Dispatch<SetStateAction<WorkflowExecution[]>>;
+  setActiveExecutionId: Dispatch<SetStateAction<string | null>>;
+}
+
+export function useWorkflowLoader({
+  workflowId,
+  loadExecutionHistory,
+  setCurrentWorkflowId,
+  setWorkflowName,
+  setWorkflowDescription,
+  setWorkflowTags,
+  setWorkflowVersions,
+  setChatkitStartScreenPrompts,
+  setChatkitSupportedModels,
+  setIsWorkflowPublic,
+  setWorkflowShareUrl,
+  setIsWorkflowLoading,
+  setWorkflowLoadError,
+  setExecutions,
+  setActiveExecutionId,
+}: UseWorkflowLoaderParams) {
+  const currentWorkflowRef = useRef<StoredWorkflow | null>(null);
+  const loadedHistoryWorkflowIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const resetToBlank = () => {
+      setCurrentWorkflowId(null);
+      setWorkflowName("New Workflow");
+      setWorkflowDescription("");
+      setWorkflowTags(["draft"]);
+      setWorkflowVersions([]);
+      setChatkitStartScreenPrompts(null);
+      setChatkitSupportedModels(null);
+      setIsWorkflowPublic(false);
+      setWorkflowShareUrl(null);
+      setExecutions([]);
+      setActiveExecutionId(null);
+    };
+
+    const loadWorkflow = async () => {
+      if (!workflowId) {
+        currentWorkflowRef.current = null;
+        loadedHistoryWorkflowIdRef.current = null;
+        setExecutions([]);
+        setActiveExecutionId(null);
+        setChatkitStartScreenPrompts(null);
+        setChatkitSupportedModels(null);
+        setIsWorkflowLoading(false);
+        setWorkflowLoadError(null);
+        return;
+      }
+
+      try {
+        setIsWorkflowLoading(true);
+        setWorkflowLoadError(null);
+        const persisted = await getWorkflowById(workflowId);
+        if (persisted && isMounted) {
+          currentWorkflowRef.current = persisted;
+          loadedHistoryWorkflowIdRef.current = null;
+          setCurrentWorkflowId(persisted.id);
+          setWorkflowName(persisted.name);
+          setWorkflowDescription(persisted.description ?? "");
+          setWorkflowTags(persisted.tags ?? ["draft"]);
+          setWorkflowVersions(persisted.versions ?? []);
+          setChatkitStartScreenPrompts(
+            persisted.chatkitStartScreenPrompts ?? null,
+          );
+          setChatkitSupportedModels(persisted.chatkitSupportedModels ?? null);
+          setIsWorkflowPublic(persisted.isPublic ?? false);
+          setWorkflowShareUrl(persisted.shareUrl ?? null);
+          setExecutions([]);
+          setActiveExecutionId(null);
+          setIsWorkflowLoading(false);
+          return;
+        }
+      } catch (error) {
+        if (isMounted) {
+          currentWorkflowRef.current = null;
+          loadedHistoryWorkflowIdRef.current = null;
+          toast({
+            title: "Failed to load workflow",
+            description:
+              error instanceof Error ? error.message : "Unknown error occurred",
+            variant: "destructive",
+          });
+          setWorkflowLoadError(
+            error instanceof Error ? error.message : "Unknown error occurred",
+          );
+          setChatkitStartScreenPrompts(null);
+          setChatkitSupportedModels(null);
+          setIsWorkflowPublic(false);
+          setWorkflowShareUrl(null);
+          setExecutions([]);
+          setActiveExecutionId(null);
+          setIsWorkflowLoading(false);
+        }
+        return;
+      }
+
+      if (!isMounted) {
+        return;
+      }
+
+      currentWorkflowRef.current = null;
+      loadedHistoryWorkflowIdRef.current = null;
+      toast({
+        title: "Workflow not found",
+        description: "The requested workflow could not be found.",
+        variant: "destructive",
+      });
+      setWorkflowLoadError("Workflow not found");
+      resetToBlank();
+      setIsWorkflowLoading(false);
+    };
+
+    void loadWorkflow();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [
+    setCurrentWorkflowId,
+    setExecutions,
+    setActiveExecutionId,
+    setWorkflowDescription,
+    setChatkitStartScreenPrompts,
+    setChatkitSupportedModels,
+    setIsWorkflowPublic,
+    setWorkflowName,
+    setIsWorkflowLoading,
+    setWorkflowLoadError,
+    setWorkflowShareUrl,
+    setWorkflowTags,
+    setWorkflowVersions,
+    workflowId,
+  ]);
+
+  useEffect(() => {
+    if (!loadExecutionHistory || !workflowId) {
+      return;
+    }
+
+    if (loadedHistoryWorkflowIdRef.current === workflowId) {
+      return;
+    }
+
+    let isMounted = true;
+
+    const loadHistory = async () => {
+      const persisted =
+        currentWorkflowRef.current?.id === workflowId
+          ? currentWorkflowRef.current
+          : await getWorkflowById(workflowId);
+
+      if (!persisted || !isMounted) {
+        return;
+      }
+
+      try {
+        const history = await loadWorkflowExecutions(persisted.id, {
+          workflow: persisted,
+        });
+        if (!isMounted) {
+          return;
+        }
+        setExecutions(history);
+        setActiveExecutionId((current) => {
+          if (
+            current &&
+            history.some((execution) => execution.id === current)
+          ) {
+            return current;
+          }
+          return history[0]?.id ?? null;
+        });
+        loadedHistoryWorkflowIdRef.current = workflowId;
+      } catch (historyError) {
+        if (!isMounted) {
+          return;
+        }
+        setExecutions([]);
+        setActiveExecutionId(null);
+        toast({
+          title: "Failed to load execution history",
+          description:
+            historyError instanceof Error
+              ? historyError.message
+              : "Unable to retrieve workflow runs.",
+          variant: "destructive",
+        });
+        console.error("Failed to load workflow executions", historyError);
+      }
+    };
+
+    void loadHistory();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [loadExecutionHistory, setActiveExecutionId, setExecutions, workflowId]);
+}

package/src/features/workflow/pages/workflow/hooks/use-workflow-metadata-state.ts

@@ -0,0 +1,56 @@
+import { useState } from "react";
+
+import type { StoredWorkflow } from "@features/workflow/lib/workflow-storage";
+import type {
+  ChatKitStartScreenPrompt,
+  ChatKitSupportedModel,
+} from "@features/workflow/lib/workflow-storage.types";
+
+export function useWorkflowMetadataState() {
+  const [workflowName, setWorkflowName] = useState("New Workflow");
+  const [workflowDescription, setWorkflowDescription] = useState("");
+  const [currentWorkflowId, setCurrentWorkflowId] = useState<string | null>(
+    null,
+  );
+  const [workflowVersions, setWorkflowVersions] = useState<
+    StoredWorkflow["versions"]
+  >([]);
+  const [workflowTags, setWorkflowTags] = useState<string[]>(["draft"]);
+  const [isWorkflowLoading, setIsWorkflowLoading] = useState(false);
+  const [workflowLoadError, setWorkflowLoadError] = useState<string | null>(
+    null,
+  );
+  const [isWorkflowPublic, setIsWorkflowPublic] = useState(false);
+  const [workflowShareUrl, setWorkflowShareUrl] = useState<string | null>(null);
+  const [chatkitStartScreenPrompts, setChatkitStartScreenPrompts] = useState<
+    ChatKitStartScreenPrompt[] | null
+  >(null);
+  const [chatkitSupportedModels, setChatkitSupportedModels] = useState<
+    ChatKitSupportedModel[] | null
+  >(null);
+
+  return {
+    workflowName,
+    setWorkflowName,
+    workflowDescription,
+    setWorkflowDescription,
+    currentWorkflowId,
+    setCurrentWorkflowId,
+    workflowVersions,
+    setWorkflowVersions,
+    workflowTags,
+    setWorkflowTags,
+    isWorkflowLoading,
+    setIsWorkflowLoading,
+    workflowLoadError,
+    setWorkflowLoadError,
+    isWorkflowPublic,
+    setIsWorkflowPublic,
+    workflowShareUrl,
+    setWorkflowShareUrl,
+    chatkitStartScreenPrompts,
+    setChatkitStartScreenPrompts,
+    chatkitSupportedModels,
+    setChatkitSupportedModels,
+  };
+}

package/src/features/workflow/pages/workflow/hooks/use-workflow-saver.ts

@@ -0,0 +1,191 @@
+import { useCallback, useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
+
+import { toast } from "@/hooks/use-toast";
+import {
+  saveWorkflowMetadata,
+  getVersionSnapshot,
+  type StoredWorkflow,
+} from "@features/workflow/lib/workflow-storage";
+import { persistRunnableConfig } from "@features/workflow/lib/workflow-storage-versioning";
+import type { WorkflowRunnableConfig } from "@features/workflow/lib/workflow-storage.types";
+
+interface WorkflowSaverOptions {
+  setWorkflowName: Dispatch<SetStateAction<string>>;
+  setWorkflowDescription: Dispatch<SetStateAction<string>>;
+  setWorkflowVersions: Dispatch<SetStateAction<StoredWorkflow["versions"]>>;
+  setWorkflowTags: Dispatch<SetStateAction<string[]>>;
+  workflowName: string;
+  workflowDescription: string;
+  workflowTags: string[];
+  currentWorkflowId: string | null;
+}
+
+interface WorkflowSaverHandlers {
+  handleSaveWorkflowDetails: () => Promise<void>;
+  handleSaveWorkflowConfig: (
+    runnableConfig: WorkflowRunnableConfig | null,
+  ) => Promise<void>;
+  handleTagsChange: (value: string) => void;
+  handleRestoreVersion: (versionId: string) => Promise<void>;
+  isSavingWorkflowDetails: boolean;
+}
+
+export function useWorkflowSaver(
+  options: WorkflowSaverOptions,
+): WorkflowSaverHandlers {
+  const {
+    setWorkflowName,
+    setWorkflowDescription,
+    setWorkflowVersions,
+    setWorkflowTags,
+    workflowName,
+    workflowDescription,
+    workflowTags,
+    currentWorkflowId,
+  } = options;
+  const [isSavingWorkflowDetails, setIsSavingWorkflowDetails] = useState(false);
+
+  const handleSaveWorkflowConfig = useCallback(
+    async (runnableConfig: WorkflowRunnableConfig | null) => {
+      if (!currentWorkflowId) {
+        toast({
+          title: "Save required",
+          description: "Save this workflow before updating its config.",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      try {
+        await persistRunnableConfig(
+          currentWorkflowId,
+          "studio",
+          runnableConfig,
+        );
+        toast({
+          title: "Workflow config saved",
+          description: `Saved config for "${workflowName}".`,
+        });
+      } catch (error) {
+        toast({
+          title: "Failed to save workflow config",
+          description:
+            error instanceof Error ? error.message : "Unknown error occurred",
+          variant: "destructive",
+        });
+      }
+    },
+    [currentWorkflowId, workflowName],
+  );
+
+  const handleSaveWorkflowDetails = useCallback(async () => {
+    if (!currentWorkflowId) {
+      toast({
+        title: "Save required",
+        description: "Save this workflow before updating its details.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsSavingWorkflowDetails(true);
+    try {
+      const tagsToPersist = workflowTags.length > 0 ? workflowTags : ["draft"];
+      const saved = await saveWorkflowMetadata({
+        id: currentWorkflowId,
+        name: workflowName.trim() || "Untitled Workflow",
+        description: workflowDescription.trim(),
+        tags: tagsToPersist,
+      });
+
+      setWorkflowName(saved.name);
+      setWorkflowDescription(saved.description ?? "");
+      setWorkflowTags(saved.tags ?? tagsToPersist);
+      setWorkflowVersions(saved.versions ?? []);
+
+      toast({
+        title: "Workflow details saved",
+        description: `Saved details for "${saved.name}".`,
+      });
+    } catch (error) {
+      toast({
+        title: "Failed to save workflow details",
+        description:
+          error instanceof Error ? error.message : "Unknown error occurred",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSavingWorkflowDetails(false);
+    }
+  }, [
+    currentWorkflowId,
+    setWorkflowDescription,
+    setWorkflowName,
+    setWorkflowTags,
+    setWorkflowVersions,
+    workflowDescription,
+    workflowName,
+    workflowTags,
+  ]);
+
+  const handleTagsChange = useCallback(
+    (value: string) => {
+      const tags = value
+        .split(",")
+        .map((tag) => tag.trim())
+        .filter((tag) => tag.length > 0);
+      setWorkflowTags(tags);
+    },
+    [setWorkflowTags],
+  );
+
+  const handleRestoreVersion = useCallback(
+    async (versionId: string) => {
+      if (!currentWorkflowId) {
+        toast({
+          title: "Save required",
+          description: "Save this workflow before restoring versions.",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      try {
+        const snapshot = await getVersionSnapshot(currentWorkflowId, versionId);
+        if (!snapshot) {
+          toast({
+            title: "Version unavailable",
+            description: "We couldn't load that version. Please try again.",
+            variant: "destructive",
+          });
+          return;
+        }
+
+        setWorkflowName(snapshot.name);
+        setWorkflowDescription(snapshot.description ?? "");
+        toast({
+          title: "Version loaded",
+          description:
+            "Metadata restored from the selected version. Save to persist.",
+        });
+      } catch (error) {
+        toast({
+          title: "Failed to restore version",
+          description:
+            error instanceof Error ? error.message : "Unknown error occurred",
+          variant: "destructive",
+        });
+      }
+    },
+    [currentWorkflowId, setWorkflowDescription, setWorkflowName],
+  );
+
+  return {
+    handleSaveWorkflowDetails,
+    handleSaveWorkflowConfig,
+    handleTagsChange,
+    handleRestoreVersion,
+    isSavingWorkflowDetails,
+  };
+}

package/src/features/workflow/pages/workflow/hooks/use-workflow-storage-listener.ts

@@ -0,0 +1,81 @@
+import type { Dispatch, SetStateAction } from "react";
+import { useEffect } from "react";
+
+import {
+  WORKFLOW_STORAGE_EVENT,
+  getWorkflowById,
+} from "@features/workflow/lib/workflow-storage";
+import type { StoredWorkflow } from "@features/workflow/lib/workflow-storage";
+import type {
+  ChatKitStartScreenPrompt,
+  ChatKitSupportedModel,
+} from "@features/workflow/lib/workflow-storage.types";
+
+interface UseWorkflowStorageListenerParams {
+  currentWorkflowId: string | null;
+  setWorkflowName: Dispatch<SetStateAction<string>>;
+  setWorkflowDescription: Dispatch<SetStateAction<string>>;
+  setWorkflowVersions: Dispatch<SetStateAction<StoredWorkflow["versions"]>>;
+  setWorkflowTags: Dispatch<SetStateAction<string[]>>;
+  setChatkitStartScreenPrompts: Dispatch<
+    SetStateAction<ChatKitStartScreenPrompt[] | null>
+  >;
+  setChatkitSupportedModels: Dispatch<
+    SetStateAction<ChatKitSupportedModel[] | null>
+  >;
+}
+
+export function useWorkflowStorageListener({
+  currentWorkflowId,
+  setWorkflowName,
+  setWorkflowDescription,
+  setWorkflowVersions,
+  setWorkflowTags,
+  setChatkitStartScreenPrompts,
+  setChatkitSupportedModels,
+}: UseWorkflowStorageListenerParams) {
+  useEffect(() => {
+    if (!currentWorkflowId) {
+      return;
+    }
+
+    const targetWindow = typeof window !== "undefined" ? window : undefined;
+    if (!targetWindow) {
+      return;
+    }
+
+    const handleStorageUpdate = async () => {
+      try {
+        const updated = await getWorkflowById(currentWorkflowId);
+        if (updated) {
+          setWorkflowName(updated.name);
+          setWorkflowDescription(updated.description ?? "");
+          setWorkflowVersions(updated.versions ?? []);
+          setWorkflowTags(updated.tags ?? ["draft"]);
+          setChatkitStartScreenPrompts(
+            updated.chatkitStartScreenPrompts ?? null,
+          );
+          setChatkitSupportedModels(updated.chatkitSupportedModels ?? null);
+        }
+      } catch (error) {
+        console.error("Failed to reload workflow", error);
+      }
+    };
+
+    targetWindow.addEventListener(WORKFLOW_STORAGE_EVENT, handleStorageUpdate);
+    return () => {
+      targetWindow.removeEventListener(
+        WORKFLOW_STORAGE_EVENT,
+        handleStorageUpdate,
+      );
+    };
+  }, [
+    currentWorkflowId,
+    setWorkflowDescription,
+    setChatkitStartScreenPrompts,
+    setChatkitSupportedModels,
+    setWorkflowName,
+    setWorkflowTags,
+    setWorkflowVersions,
+  ]);
+}