orcheo-canvas 0.0.1

package/src/features/chatkit/components/canvas-chat-bubble.tsx

@@ -0,0 +1,324 @@
+import {
+  lazy,
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { Alert, AlertDescription, AlertTitle } from "@/design-system/ui/alert";
+import { Button } from "@/design-system/ui/button";
+import { Skeleton } from "@/design-system/ui/skeleton";
+import { cn } from "@/lib/utils";
+import { Loader2, MessageSquare, MinimizeIcon, XIcon } from "lucide-react";
+import type { UseChatKitOptions } from "@openai/chatkit-react";
+import { useChatInterfaceOptions } from "@features/shared/components/chat-interface-options";
+import type { ChatParticipant } from "@features/shared/components/chat-interface.types";
+import type { ChatSessionStatus } from "@features/workflow/pages/workflow-canvas/hooks/use-workflow-chat";
+import { recordChatTelemetry } from "@features/chatkit/lib/telemetry";
+import { useColorScheme } from "@/hooks/use-color-scheme";
+import { buildChatTheme } from "@features/chatkit/lib/chatkit-theme";
+
+const ChatKitSurfaceLazy = lazy(() =>
+  import("@features/chatkit/components/chatkit-surface").then((module) => ({
+    default: module.ChatKitSurface,
+  })),
+);
+
+const MINIMAP_SELECTOR = ".react-flow__panel.react-flow__minimap";
+const DEFAULT_FLOATING_OFFSET = 96;
+const MINIMAP_GAP = 16;
+
+interface CanvasChatBubbleProps {
+  title: string;
+  user: ChatParticipant;
+  ai: ChatParticipant;
+  workflowId: string | null;
+  sessionPayload?: Record<string, unknown>;
+  backendBaseUrl?: string | null;
+  getClientSecret: (currentSecret: string | null) => Promise<string>;
+  sessionStatus: ChatSessionStatus;
+  sessionError: string | null;
+  onRetry: () => Promise<string>;
+  onResponseStart?: () => void;
+  onResponseEnd?: () => void;
+  onClientTool?: (tool: {
+    name: string;
+    params: Record<string, unknown>;
+  }) => Promise<unknown>;
+  onDismiss?: () => void;
+  onOpen?: () => void;
+  isExternallyOpen: boolean;
+}
+
+export function CanvasChatBubble({
+  title,
+  user,
+  ai,
+  workflowId,
+  sessionPayload,
+  backendBaseUrl,
+  getClientSecret,
+  sessionStatus,
+  sessionError,
+  onRetry,
+  onResponseStart,
+  onResponseEnd,
+  onClientTool,
+  onDismiss,
+  onOpen,
+  isExternallyOpen,
+}: CanvasChatBubbleProps) {
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+  const [shouldLoadChat, setShouldLoadChat] = useState(false);
+  const [isRetrying, setIsRetrying] = useState(false);
+  const [floatingOffset, setFloatingOffset] = useState(DEFAULT_FLOATING_OFFSET);
+  const colorScheme = useColorScheme();
+
+  useEffect(() => {
+    if (isExternallyOpen) {
+      setIsPanelOpen(true);
+      setShouldLoadChat(true);
+    } else {
+      setIsPanelOpen(false);
+    }
+  }, [isExternallyOpen]);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+
+    let resizeObserver: ResizeObserver | null = null;
+    let mutationObserver: MutationObserver | null = null;
+    let observedElement: Element | null = null;
+
+    const updateOffset = () => {
+      if (typeof window === "undefined") {
+        return;
+      }
+
+      const minimap = document.querySelector<HTMLElement>(MINIMAP_SELECTOR);
+
+      if (!minimap) {
+        setFloatingOffset(DEFAULT_FLOATING_OFFSET);
+        return;
+      }
+
+      const rect = minimap.getBoundingClientRect();
+      const offset = window.innerHeight - rect.top + MINIMAP_GAP;
+      setFloatingOffset(Math.max(offset, DEFAULT_FLOATING_OFFSET));
+
+      if (
+        typeof ResizeObserver !== "undefined" &&
+        minimap !== observedElement
+      ) {
+        resizeObserver?.disconnect();
+        resizeObserver = new ResizeObserver(() => updateOffset());
+        resizeObserver.observe(minimap);
+        observedElement = minimap;
+      }
+    };
+
+    const handleResize = () => updateOffset();
+
+    updateOffset();
+    window.addEventListener("resize", handleResize);
+
+    if (typeof MutationObserver !== "undefined" && document.body) {
+      mutationObserver = new MutationObserver(() => updateOffset());
+      mutationObserver.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    }
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+    };
+  }, []);
+
+  const floatingPositionStyle = useMemo(
+    () => ({
+      bottom: floatingOffset,
+    }),
+    [floatingOffset],
+  );
+
+  const handleFabClick = () => {
+    setIsPanelOpen(true);
+    setShouldLoadChat(true);
+    recordChatTelemetry("canvas.chat.open", {
+      workflowId,
+      source: "bubble",
+    });
+    onOpen?.();
+  };
+
+  const handleCollapse = () => {
+    setIsPanelOpen(false);
+    recordChatTelemetry("canvas.chat.close", {
+      workflowId,
+      source: "bubble",
+    });
+  };
+
+  const handleDismiss = () => {
+    handleCollapse();
+    onDismiss?.();
+  };
+
+  const handleRetry = useCallback(async () => {
+    setIsRetrying(true);
+    try {
+      await onRetry();
+    } finally {
+      setIsRetrying(false);
+    }
+  }, [onRetry]);
+
+  const chatKitOptions: UseChatKitOptions = useChatInterfaceOptions({
+    chatkitOptions: {
+      composer: {
+        placeholder: `Ask ${title} a question`,
+      },
+      onClientTool,
+      theme: buildChatTheme(colorScheme),
+    },
+    getClientSecret,
+    backendBaseUrl: backendBaseUrl ?? undefined,
+    sessionPayload: {
+      ...sessionPayload,
+      workflowId,
+      workflowLabel: title,
+    },
+    workflowId: workflowId ?? null,
+    title,
+    user,
+    ai,
+    initialMessages: [
+      {
+        id: "canvas-chat-greeting",
+        content: `You're chatting with ${title}.`,
+        sender: {
+          ...ai,
+          isAI: true,
+        },
+        timestamp: new Date(),
+      },
+    ],
+    onResponseStart,
+    onResponseEnd,
+  });
+
+  const statusView = useMemo(() => {
+    if (sessionStatus === "loading") {
+      return (
+        <div className="flex h-full flex-col items-center justify-center space-y-3 text-sm text-muted-foreground">
+          <Loader2 className="h-5 w-5 animate-spin" />
+          <p>Starting a secure chat session…</p>
+        </div>
+      );
+    }
+
+    if (sessionStatus === "error") {
+      return (
+        <Alert variant="destructive" className="mt-4 text-left">
+          <AlertTitle>Chat unavailable</AlertTitle>
+          <AlertDescription className="mt-1 text-sm">
+            {sessionError ||
+              "We couldn't reach the chat service. Try again in a moment."}
+          </AlertDescription>
+          <div className="mt-3 flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleRetry}
+              disabled={isRetrying}
+            >
+              {isRetrying && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Retry
+            </Button>
+          </div>
+        </Alert>
+      );
+    }
+
+    return null;
+  }, [handleRetry, isRetrying, sessionError, sessionStatus]);
+
+  return (
+    <>
+      {!isPanelOpen && (
+        <Button
+          className="fixed right-6 z-50 h-14 w-14 rounded-full shadow-xl"
+          style={floatingPositionStyle}
+          size="icon"
+          onClick={handleFabClick}
+        >
+          <MessageSquare className="h-5 w-5" />
+          <span className="sr-only">Open ChatKit</span>
+        </Button>
+      )}
+
+      {isPanelOpen && (
+        <div
+          className="fixed right-6 z-50 flex h-[520px] w-full max-w-md flex-col rounded-2xl border border-border bg-card text-foreground shadow-2xl"
+          style={floatingPositionStyle}
+        >
+          <div className="flex items-center justify-between border-b border-border px-4 py-3">
+            <div>
+              <p className="text-sm uppercase text-muted-foreground">
+                Chatting
+              </p>
+              <p className="text-base font-semibold">{title}</p>
+            </div>
+            <div className="flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleCollapse}
+              >
+                <MinimizeIcon className="h-4 w-4" />
+                <span className="sr-only">Collapse chat</span>
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={handleDismiss}
+              >
+                <XIcon className="h-4 w-4" />
+                <span className="sr-only">Hide chat</span>
+              </Button>
+            </div>
+          </div>
+          <div className="flex-1 overflow-hidden px-2 py-2">
+            {statusView}
+            {sessionStatus !== "error" && shouldLoadChat && (
+              <Suspense
+                fallback={
+                  <div className="flex h-full w-full flex-col gap-3">
+                    <Skeleton className="h-10 w-1/2 self-center" />
+                    <Skeleton className="h-full w-full" />
+                  </div>
+                }
+              >
+                <ChatKitSurfaceLazy
+                  options={chatKitOptions}
+                  className={cn(
+                    sessionStatus !== "ready" &&
+                      "pointer-events-none opacity-50",
+                  )}
+                />
+              </Suspense>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/features/chatkit/components/chatkit-surface.tsx

@@ -0,0 +1,18 @@
+import { ChatKit, useChatKit } from "@openai/chatkit-react";
+import type { UseChatKitOptions } from "@openai/chatkit-react";
+import { cn } from "@/lib/utils";
+
+interface ChatKitSurfaceProps {
+  options: UseChatKitOptions;
+  className?: string;
+}
+
+export function ChatKitSurface({ options, className }: ChatKitSurfaceProps) {
+  const { control } = useChatKit(options);
+
+  return (
+    <div className={cn("flex h-full w-full flex-col", className)}>
+      <ChatKit control={control} className="flex h-full w-full flex-col" />
+    </div>
+  );
+}

package/src/features/chatkit/components/public-chat-error-boundary.tsx

@@ -0,0 +1,74 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { Alert, AlertDescription, AlertTitle } from "@/design-system/ui/alert";
+import { Button } from "@/design-system/ui/button";
+
+interface PublicChatErrorBoundaryProps {
+  children: ReactNode;
+  onReset?: () => void;
+}
+
+interface PublicChatErrorBoundaryState {
+  hasError: boolean;
+  errorMessage?: string;
+}
+
+export class PublicChatErrorBoundary extends Component<
+  PublicChatErrorBoundaryProps,
+  PublicChatErrorBoundaryState
+> {
+  public state: PublicChatErrorBoundaryState = {
+    hasError: false,
+    errorMessage: undefined,
+  };
+
+  public static getDerivedStateFromError(
+    error: Error,
+  ): PublicChatErrorBoundaryState {
+    return {
+      hasError: true,
+      errorMessage: error.message,
+    };
+  }
+
+  public componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("PublicChatErrorBoundary caught an error", error, info);
+  }
+
+  private handleReset = () => {
+    this.setState({ hasError: false, errorMessage: undefined });
+    this.props.onReset?.();
+  };
+
+  public override render(): ReactNode {
+    if (this.state.hasError) {
+      return (
+        <Alert className="rounded-3xl border-red-500/40 bg-red-500/10 p-6 text-red-100">
+          <AlertTitle>Something went wrong</AlertTitle>
+          <AlertDescription>
+            {this.state.errorMessage ||
+              "The public chat encountered an unexpected error. Please try again."}
+          </AlertDescription>
+          <div className="mt-4 flex flex-wrap gap-3">
+            <Button variant="outline" onClick={this.handleReset}>
+              Try again
+            </Button>
+            <Button
+              variant="ghost"
+              onClick={() => {
+                if (typeof window !== "undefined") {
+                  window.location.reload();
+                }
+              }}
+            >
+              Reload page
+            </Button>
+          </div>
+        </Alert>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default PublicChatErrorBoundary;

package/src/features/chatkit/components/public-chat-widget.tsx

@@ -0,0 +1,138 @@
+import { useMemo } from "react";
+import type { StartScreenPrompt } from "@openai/chatkit";
+import type { UseChatKitOptions } from "@openai/chatkit-react";
+import { buildBackendHttpUrl } from "@/lib/config";
+import { cn } from "@/lib/utils";
+import type { ColorScheme } from "@/hooks/use-color-scheme";
+import {
+  buildPublicChatFetch,
+  getChatKitDomainKey,
+  type PublicChatHttpError,
+} from "@features/chatkit/lib/chatkit-client";
+import { ChatKitSurface } from "@features/chatkit/components/chatkit-surface";
+import { buildChatTheme } from "@features/chatkit/lib/chatkit-theme";
+
+interface PublicChatWidgetProps {
+  workflowId: string;
+  workflowName: string;
+  backendBaseUrl?: string;
+  onReady?: () => void;
+  onHttpError?: (error: PublicChatHttpError) => void;
+  onLog?: (payload: Record<string, unknown>) => void;
+  colorScheme?: ColorScheme;
+  onThemeRequest?: (scheme: ColorScheme) => Promise<void> | void;
+}
+
+const buildStartScreenPrompts = (workflowName: string): StartScreenPrompt[] => [
+  {
+    label: "What can you do?",
+    prompt: `What can ${workflowName} help with?`,
+    icon: "circle-question",
+  },
+  {
+    label: "Introduce yourself",
+    prompt: "My name is ...",
+    icon: "book-open",
+  },
+  {
+    label: "Latest results",
+    prompt: `Summarize the latest run for ${workflowName}.`,
+    icon: "search",
+  },
+  {
+    label: "Switch theme",
+    prompt: "Change the theme to dark mode",
+    icon: "sparkle",
+  },
+];
+
+const buildGreeting = (workflowName: string): string =>
+  `Welcome to the ${workflowName} public chat.`;
+
+const buildComposerPlaceholder = (workflowName: string): string =>
+  `Share a fact for ${workflowName}`;
+
+export function PublicChatWidget({
+  workflowId,
+  workflowName,
+  backendBaseUrl,
+  onReady,
+  onHttpError,
+  onLog,
+  colorScheme = "light",
+  onThemeRequest,
+}: PublicChatWidgetProps) {
+  const options = useMemo<UseChatKitOptions>(() => {
+    const domainKey = getChatKitDomainKey();
+    return {
+      api: {
+        url: buildBackendHttpUrl("/api/chatkit", backendBaseUrl),
+        domainKey,
+        fetch: buildPublicChatFetch({
+          workflowId,
+          backendBaseUrl,
+          onHttpError,
+          metadata: {
+            workflow_name: workflowName,
+          },
+        }),
+      },
+      header: {
+        enabled: true,
+        title: { text: workflowName },
+      },
+      history: {
+        enabled: true,
+      },
+      theme: buildChatTheme(colorScheme),
+      startScreen: {
+        greeting: buildGreeting(workflowName),
+        prompts: buildStartScreenPrompts(workflowName),
+      },
+      composer: {
+        placeholder: buildComposerPlaceholder(workflowName),
+      },
+      threadItemActions: {
+        feedback: false,
+      },
+      onClientTool: async (invocation) => {
+        if (invocation.name === "switch_theme") {
+          const requested = invocation.params?.theme;
+          if (requested === "light" || requested === "dark") {
+            if (onThemeRequest) {
+              await onThemeRequest(requested);
+              return { success: true };
+            }
+            return { success: false };
+          }
+          return { success: false };
+        }
+        return { success: false };
+      },
+      onReady,
+      onLog,
+    };
+  }, [
+    backendBaseUrl,
+    colorScheme,
+    onHttpError,
+    onLog,
+    onReady,
+    onThemeRequest,
+    workflowId,
+    workflowName,
+  ]);
+
+  return (
+    <div
+      className={cn(
+        "relative h-full w-full overflow-hidden rounded-3xl",
+        "border border-slate-200/70 bg-white",
+        "shadow-[0_25px_80px_rgba(15,23,42,0.12)]",
+        "dark:border-slate-800/70 dark:bg-slate-900",
+      )}
+    >
+      <ChatKitSurface options={options} />
+    </div>
+  );
+}

package/src/features/chatkit/lib/chatkit-client.test.ts

@@ -0,0 +1,98 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { buildPublicChatFetch } from "./chatkit-client";
+
+const originalFetch = window.fetch;
+
+afterEach(() => {
+  window.fetch = originalFetch;
+  vi.restoreAllMocks();
+});
+
+const createResponse = (status: number, body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+
+describe("buildPublicChatFetch", () => {
+  it("injects workflow id into JSON bodies", async () => {
+    const fetchMock = vi.fn(async () => createResponse(200, { ok: true }));
+    window.fetch = fetchMock as unknown as typeof window.fetch;
+
+    const handler = buildPublicChatFetch({
+      workflowId: "wf-123",
+      backendBaseUrl: "http://localhost:8000",
+      metadata: { workflow_name: "LangGraph" },
+    });
+
+    await handler("http://localhost:8000/api/chatkit", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ foo: "bar" }),
+    });
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    const [, options] = fetchMock.mock.calls[0]!;
+    expect(options?.credentials).toBe("include");
+
+    const payload = JSON.parse((options?.body as string) ?? "{}");
+    expect(payload.workflow_id).toBe("wf-123");
+    expect(payload.foo).toBe("bar");
+    expect(payload.metadata.workflow_id).toBe("wf-123");
+    expect(payload.metadata.workflow_name).toBe("LangGraph");
+  });
+
+  it("emits structured errors when the backend rejects a request", async () => {
+    const fetchMock = vi.fn(async () =>
+      createResponse(401, {
+        code: "chatkit.auth.oauth_required",
+        message: "login first",
+      }),
+    );
+    window.fetch = fetchMock as unknown as typeof window.fetch;
+
+    const onHttpError = vi.fn();
+    const handler = buildPublicChatFetch({
+      workflowId: "wf-123",
+      onHttpError,
+    });
+
+    await handler("http://localhost:8000/api/chatkit", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({}),
+    });
+
+    expect(onHttpError).toHaveBeenCalledWith({
+      status: 401,
+      message: "login first",
+      code: "chatkit.auth.oauth_required",
+    });
+  });
+
+  it("merges existing metadata without overwriting it", async () => {
+    const fetchMock = vi.fn(async () => createResponse(200, { ok: true }));
+    window.fetch = fetchMock as unknown as typeof window.fetch;
+
+    const handler = buildPublicChatFetch({
+      workflowId: "wf-789",
+      metadata: { injected: "value" },
+    });
+
+    await handler("http://localhost:8000/api/chatkit", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        metadata: { existing: "field" },
+      }),
+    });
+
+    const [, options] = fetchMock.mock.calls[0]!;
+    const payload = JSON.parse((options?.body as string) ?? "{}");
+    expect(payload.metadata).toMatchObject({
+      existing: "field",
+      injected: "value",
+      workflow_id: "wf-789",
+    });
+  });
+});