orcheo-canvas 0.0.1

package/src/features/workflow/components/dialogs/version-control-dialog.tsx

@@ -0,0 +1,232 @@
+import React, { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/design-system/ui/dialog";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/design-system/ui/tabs";
+import { Input } from "@/design-system/ui/input";
+import { Button } from "@/design-system/ui/button";
+import { Label } from "@/design-system/ui/label";
+import { Textarea } from "@/design-system/ui/textarea";
+import { Badge } from "@/design-system/ui/badge";
+import { Save, Download, Upload, Copy, GitBranch } from "lucide-react";
+
+interface VersionControlDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave?: (version: string, description: string) => void;
+  onDuplicate?: () => void;
+  onExport?: () => void;
+  onImport?: (jsonData: string) => void;
+  currentVersion?: string;
+}
+
+export default function VersionControlDialog({
+  open,
+  onOpenChange,
+  onSave,
+  onDuplicate,
+  onExport,
+  onImport,
+  currentVersion = "1.0.0",
+}: VersionControlDialogProps) {
+  const [activeTab, setActiveTab] = useState("save");
+  const [version, setVersion] = useState(currentVersion);
+  const [description, setDescription] = useState("");
+  const [importData, setImportData] = useState("");
+  const [importError, setImportError] = useState("");
+
+  const handleSave = () => {
+    if (onSave) {
+      onSave(version, description);
+    }
+    onOpenChange(false);
+  };
+
+  const handleImport = () => {
+    try {
+      // Basic validation to check if it's valid JSON
+      JSON.parse(importData);
+      setImportError("");
+      if (onImport) {
+        onImport(importData);
+      }
+      onOpenChange(false);
+    } catch {
+      setImportError("Invalid JSON format");
+    }
+  };
+
+  const handleExport = () => {
+    if (onExport) {
+      onExport();
+    }
+    onOpenChange(false);
+  };
+
+  const handleDuplicate = () => {
+    if (onDuplicate) {
+      onDuplicate();
+    }
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Workflow Version Control</DialogTitle>
+        </DialogHeader>
+
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+          <TabsList className="grid grid-cols-4 mb-4">
+            <TabsTrigger value="save" className="flex items-center gap-2">
+              <Save className="h-4 w-4" />
+
+              <span className="hidden sm:inline">Save</span>
+            </TabsTrigger>
+            <TabsTrigger value="duplicate" className="flex items-center gap-2">
+              <Copy className="h-4 w-4" />
+
+              <span className="hidden sm:inline">Duplicate</span>
+            </TabsTrigger>
+            <TabsTrigger value="export" className="flex items-center gap-2">
+              <Download className="h-4 w-4" />
+
+              <span className="hidden sm:inline">Export</span>
+            </TabsTrigger>
+            <TabsTrigger value="import" className="flex items-center gap-2">
+              <Upload className="h-4 w-4" />
+
+              <span className="hidden sm:inline">Import</span>
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="save" className="space-y-4">
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <GitBranch className="h-4 w-4 text-muted-foreground" />
+
+                <Label htmlFor="version">Version</Label>
+                <Badge variant="outline" className="ml-auto">
+                  Current: {currentVersion}
+                </Badge>
+              </div>
+              <Input
+                id="version"
+                value={version}
+                onChange={(e) => setVersion(e.target.value)}
+                placeholder="1.0.0"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Describe your changes..."
+                rows={4}
+              />
+            </div>
+            <DialogFooter className="sm:justify-end">
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="button" onClick={handleSave}>
+                Save Version
+              </Button>
+            </DialogFooter>
+          </TabsContent>
+
+          <TabsContent value="duplicate" className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Create a duplicate copy of this workflow. The new workflow will be
+              added to your workspace with "(Copy)" appended to its name.
+            </p>
+            <DialogFooter className="sm:justify-end">
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="button" onClick={handleDuplicate}>
+                Duplicate Workflow
+              </Button>
+            </DialogFooter>
+          </TabsContent>
+
+          <TabsContent value="export" className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Export this workflow as a JSON file. You can import it later or
+              share it with others.
+            </p>
+            <DialogFooter className="sm:justify-end">
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="button" onClick={handleExport}>
+                Export JSON
+              </Button>
+            </DialogFooter>
+          </TabsContent>
+
+          <TabsContent value="import" className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="import-data">Paste JSON Data</Label>
+              <Textarea
+                id="import-data"
+                value={importData}
+                onChange={(e) => {
+                  setImportData(e.target.value);
+                  setImportError("");
+                }}
+                placeholder="Paste your workflow JSON here..."
+                rows={6}
+                className={importError ? "border-red-500" : ""}
+              />
+
+              {importError && (
+                <p className="text-sm text-red-500">{importError}</p>
+              )}
+            </div>
+            <DialogFooter className="sm:justify-end">
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                onClick={handleImport}
+                disabled={!importData}
+              >
+                Import
+              </Button>
+            </DialogFooter>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/workflow/components/layouts/sidebar-layout.tsx

@@ -0,0 +1,208 @@
+import React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@/design-system/ui/button";
+import { cn } from "@/lib/utils";
+
+import { useSidebarResize } from "./use-sidebar-resize";
+
+export interface SidebarLayoutProps {
+  /**
+   * Sidebar content
+   */
+  sidebar: React.ReactNode;
+
+  /**
+   * Main content area
+   */
+  children: React.ReactNode;
+
+  /**
+   * Whether the sidebar is collapsed
+   */
+  isCollapsed?: boolean;
+
+  /**
+   * Callback when sidebar collapse state changes
+   */
+  onToggleCollapse?: () => void;
+
+  /**
+   * Sidebar width when expanded (default: 300px)
+   */
+  sidebarWidth?: number;
+
+  /**
+   * Sidebar width when collapsed (default: 50px)
+   */
+  collapsedWidth?: number;
+
+  /**
+   * Whether the sidebar is resizable
+   */
+  resizable?: boolean;
+
+  /**
+   * Minimum sidebar width when resizing (default: 200px)
+   */
+  minWidth?: number;
+
+  /**
+   * Maximum sidebar width when resizing (default: 500px)
+   */
+  maxWidth?: number;
+
+  /**
+   * Callback when sidebar width changes
+   */
+  onWidthChange?: (width: number) => void;
+
+  /**
+   * Whether to show collapse button
+   */
+  showCollapseButton?: boolean;
+
+  /**
+   * Sidebar position
+   */
+  position?: "left" | "right";
+
+  /**
+   * Additional CSS classes for the container
+   */
+  className?: string;
+
+  /**
+   * Additional CSS classes for the sidebar
+   */
+  sidebarClassName?: string;
+
+  /**
+   * Additional CSS classes for the main content
+   */
+  mainClassName?: string;
+}
+
+/**
+ * SidebarLayout - A reusable layout component with a collapsible, optionally
+ * resizable sidebar and a main content area.
+ *
+ * This component provides:
+ * - Collapsible sidebar with smooth transitions
+ * - Optional resize handle for adjusting sidebar width
+ * - Consistent styling across pages
+ * - Support for left or right sidebar positioning
+ * - Responsive behavior
+ */
+export default function SidebarLayout({
+  sidebar,
+  children,
+  isCollapsed = false,
+  onToggleCollapse,
+  sidebarWidth = 300,
+  collapsedWidth = 50,
+  resizable = false,
+  minWidth = 200,
+  maxWidth = 500,
+  onWidthChange,
+  showCollapseButton = true,
+  position = "left",
+  className,
+  sidebarClassName,
+  mainClassName,
+}: SidebarLayoutProps) {
+  const currentWidth = isCollapsed ? collapsedWidth : sidebarWidth;
+  const { handleMouseDown } = useSidebarResize({
+    resizable,
+    isCollapsed,
+    sidebarWidth,
+    minWidth,
+    maxWidth,
+    position,
+    onWidthChange,
+  });
+
+  return (
+    <div className={cn("flex h-full min-h-0", className)}>
+      {position === "left" && (
+        <>
+          <aside
+            className={cn(
+              "relative h-full border-r border-border bg-card transition-all duration-300 flex flex-col",
+              sidebarClassName,
+            )}
+            style={{ width: `${currentWidth}px` }}
+          >
+            {sidebar}
+
+            {showCollapseButton && onToggleCollapse && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onToggleCollapse}
+                className="absolute top-3 right-3 z-10"
+                title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+              >
+                {isCollapsed ? (
+                  <ChevronRight className="h-5 w-5" />
+                ) : (
+                  <ChevronLeft className="h-5 w-5" />
+                )}
+              </Button>
+            )}
+
+            {resizable && !isCollapsed && (
+              <div
+                className="absolute top-0 right-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/20 transition-colors"
+                onMouseDown={handleMouseDown}
+              />
+            )}
+          </aside>
+          <main className={cn("flex-1 h-full min-h-0", mainClassName)}>
+            {children}
+          </main>
+        </>
+      )}
+
+      {position === "right" && (
+        <>
+          <main className={cn("flex-1 h-full min-h-0", mainClassName)}>
+            {children}
+          </main>
+          <aside
+            className={cn(
+              "relative h-full border-l border-border bg-card transition-all duration-300 flex flex-col",
+              sidebarClassName,
+            )}
+            style={{ width: `${currentWidth}px` }}
+          >
+            {sidebar}
+
+            {showCollapseButton && onToggleCollapse && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onToggleCollapse}
+                className="absolute top-3 left-3 z-10"
+                title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+              >
+                {isCollapsed ? (
+                  <ChevronLeft className="h-5 w-5" />
+                ) : (
+                  <ChevronRight className="h-5 w-5" />
+                )}
+              </Button>
+            )}
+
+            {resizable && !isCollapsed && (
+              <div
+                className="absolute top-0 left-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/20 transition-colors"
+                onMouseDown={handleMouseDown}
+              />
+            )}
+          </aside>
+        </>
+      )}
+    </div>
+  );
+}

package/src/features/workflow/components/layouts/use-sidebar-resize.ts

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef } from "react";
+
+interface UseSidebarResizeProps {
+  resizable: boolean;
+  isCollapsed: boolean;
+  sidebarWidth: number;
+  minWidth: number;
+  maxWidth: number;
+  position: "left" | "right";
+  onWidthChange?: (width: number) => void;
+}
+
+export const useSidebarResize = ({
+  resizable,
+  isCollapsed,
+  sidebarWidth,
+  minWidth,
+  maxWidth,
+  position,
+  onWidthChange,
+}: UseSidebarResizeProps) => {
+  const resizingRef = useRef(false);
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(sidebarWidth);
+
+  useEffect(() => {
+    startWidthRef.current = sidebarWidth;
+  }, [sidebarWidth]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (!resizable || isCollapsed) return;
+
+      resizingRef.current = true;
+      startXRef.current = e.clientX;
+      startWidthRef.current = sidebarWidth;
+      e.preventDefault();
+    },
+    [resizable, isCollapsed, sidebarWidth],
+  );
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!resizingRef.current) return;
+
+      const delta =
+        position === "left"
+          ? e.clientX - startXRef.current
+          : startXRef.current - e.clientX;
+      let newWidth = startWidthRef.current + delta;
+      newWidth = Math.max(minWidth, Math.min(maxWidth, newWidth));
+
+      onWidthChange?.(newWidth);
+    },
+    [position, minWidth, maxWidth, onWidthChange],
+  );
+
+  const handleMouseUp = useCallback(() => {
+    resizingRef.current = false;
+  }, []);
+
+  useEffect(() => {
+    if (!resizable) {
+      return;
+    }
+
+    const targetDocument =
+      typeof document !== "undefined" ? document : undefined;
+    if (!targetDocument) {
+      return;
+    }
+
+    targetDocument.addEventListener("mousemove", handleMouseMove);
+    targetDocument.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      targetDocument.removeEventListener("mousemove", handleMouseMove);
+      targetDocument.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [resizable, handleMouseMove, handleMouseUp]);
+
+  return { handleMouseDown };
+};

package/src/features/workflow/components/layouts/workflow-page-layout.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export interface WorkflowPageLayoutProps {
+  /**
+   * Header content (e.g., navigation, title, actions)
+   */
+  header?: React.ReactNode;
+
+  /**
+   * Main content area
+   */
+  children: React.ReactNode;
+
+  /**
+   * Additional CSS classes for the container
+   */
+  className?: string;
+
+  /**
+   * Additional CSS classes for the header
+   */
+  headerClassName?: string;
+
+  /**
+   * Additional CSS classes for the main content
+   */
+  mainClassName?: string;
+}
+
+/**
+ * WorkflowPageLayout - A reusable page layout component for workflow pages.
+ *
+ * This component provides:
+ * - Consistent full-height layout
+ * - Optional header area
+ * - Main content area that fills remaining space
+ * - Proper overflow handling
+ */
+export default function WorkflowPageLayout({
+  header,
+  children,
+  className,
+  headerClassName,
+  mainClassName,
+}: WorkflowPageLayoutProps) {
+  return (
+    <div
+      className={cn(
+        "h-screen w-full flex flex-col overflow-hidden bg-background",
+        className,
+      )}
+    >
+      {header && (
+        <header
+          className={cn(
+            "flex-shrink-0 border-b border-border bg-card",
+            headerClassName,
+          )}
+        >
+          {header}
+        </header>
+      )}
+      <main className={cn("flex-1 overflow-hidden min-h-0", mainClassName)}>
+        {children}
+      </main>
+    </div>
+  );
+}

package/src/features/workflow/components/nodes/chat-trigger-node.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/design-system/ui/tooltip";
+import { NodeProps, Handle, Position } from "@xyflow/react";
+import { cn } from "@/lib/utils";
+import { MessageSquare } from "lucide-react";
+import NodeLabel from "@features/workflow/components/nodes/node-label";
+
+export type ChatTriggerNodeData = {
+  label: string;
+  description?: string;
+  status?: "idle" | "running" | "success" | "error";
+  onOpenChat?: () => void;
+  onLabelChange?: (id: string, newLabel: string) => void;
+  [key: string]: unknown;
+};
+
+const ChatTriggerNode = ({ data, selected, id }: NodeProps) => {
+  const nodeData = data as ChatTriggerNodeData;
+  const {
+    label,
+    description,
+    status = "idle",
+    onOpenChat,
+    onLabelChange,
+  } = nodeData;
+
+  const statusColors = {
+    idle: "bg-muted",
+    running: "bg-blue-500",
+    success: "bg-green-500",
+    error: "bg-red-500",
+  } as const;
+
+  return (
+    <div className="flex flex-col items-center">
+      <div
+        className={cn(
+          "relative group rounded-lg border p-3 shadow-sm bg-background w-[180px]",
+          selected
+            ? "border-primary ring-2 ring-primary ring-opacity-20"
+            : "border-border",
+        )}
+      >
+        {/* Status indicator */}
+        <div
+          className={cn(
+            "absolute top-1 right-1 w-2 h-2 rounded-full",
+            statusColors[status],
+          )}
+        />
+
+        {/* Output handle on right side */}
+        <Handle
+          type="source"
+          position={Position.Right}
+          id="out"
+          className="!h-3 !w-3 !bg-primary !border-2 !border-background"
+        />
+
+        <div className="flex flex-col items-center gap-2">
+          <div className="rounded-full bg-primary/10 p-2">
+            <MessageSquare className="h-5 w-5 text-primary" />
+          </div>
+
+          <div className="text-center">
+            {description && (
+              <p className="text-xs text-muted-foreground truncate max-w-[150px]">
+                {description}
+              </p>
+            )}
+          </div>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  className="mt-1 w-full"
+                  onClick={onOpenChat}
+                >
+                  <MessageSquare className="h-3.5 w-3.5 mr-1" />
+                  Test Chat
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Open chat interface to test this trigger</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+
+      {/* Node label component */}
+      <NodeLabel id={id} label={label} onLabelChange={onLabelChange} />
+    </div>
+  );
+};
+
+export default ChatTriggerNode;