orcheo-canvas 0.0.1

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

@@ -0,0 +1,175 @@
+import { buildBackendHttpUrl } from "@/lib/config";
+
+export interface PublicChatHttpError {
+  status: number;
+  message: string;
+  code?: string;
+}
+
+interface PublicChatFetchOptions {
+  workflowId: string;
+  backendBaseUrl?: string;
+  onHttpError?: (error: PublicChatHttpError) => void;
+  metadata?: Record<string, unknown>;
+}
+
+type RuntimeConfig = {
+  chatkitDomainKey?: unknown;
+};
+
+const safeString = (value: unknown): string | undefined => {
+  if (typeof value === "string" && value.trim()) {
+    return value.trim();
+  }
+  return undefined;
+};
+
+const DEFAULT_DOMAIN_KEY =
+  safeString(import.meta.env?.VITE_ORCHEO_CHATKIT_DEFAULT_DOMAIN_KEY) ??
+  "domain_pk_localhost_dev";
+
+const getRuntimeDomainKey = (): string | undefined => {
+  if (typeof window === "undefined") {
+    return undefined;
+  }
+  const runtimeConfig = (
+    window as typeof window & {
+      __ORCHEO_CONFIG__?: RuntimeConfig;
+    }
+  ).__ORCHEO_CONFIG__;
+  return safeString(runtimeConfig?.chatkitDomainKey);
+};
+
+const parseErrorPayload = async (
+  response: Response,
+): Promise<Pick<PublicChatHttpError, "message" | "code">> => {
+  try {
+    const body = await response.json();
+    if (!body) {
+      return {
+        message: response.statusText || "ChatKit request failed.",
+      };
+    }
+    if (typeof body === "string") {
+      return { message: body };
+    }
+    if (typeof body === "object") {
+      const detail =
+        (("detail" in body ? body.detail : undefined) as Record<
+          string,
+          unknown
+        >) ?? (body as Record<string, unknown>);
+      const message =
+        safeString(detail?.message) ??
+        safeString((body as Record<string, unknown>).message);
+      const code =
+        safeString(detail?.code) ??
+        safeString((body as Record<string, unknown>).code);
+      return {
+        message:
+          message ??
+          (response.statusText ||
+            "ChatKit request failed. Please retry shortly."),
+        code,
+      };
+    }
+    return {
+      message: response.statusText || "ChatKit request failed.",
+    };
+  } catch {
+    return {
+      message: response.statusText || "ChatKit request failed.",
+    };
+  }
+};
+
+export const getChatKitDomainKey = (): string => {
+  const fromEnv = safeString(import.meta.env?.VITE_ORCHEO_CHATKIT_DOMAIN_KEY);
+  const fromRuntime = getRuntimeDomainKey();
+  return fromEnv ?? fromRuntime ?? DEFAULT_DOMAIN_KEY;
+};
+
+export const buildPublicChatFetch = ({
+  workflowId,
+  backendBaseUrl,
+  onHttpError,
+  metadata,
+}: PublicChatFetchOptions): typeof fetch => {
+  const baseFetch = window.fetch.bind(window);
+  const resolvedUrl = buildBackendHttpUrl("/api/chatkit", backendBaseUrl);
+
+  const emitError = async (response: Response) => {
+    if (!onHttpError) {
+      return;
+    }
+    const detail = await parseErrorPayload(response);
+    onHttpError({
+      status: response.status,
+      message: detail.message,
+      code: detail.code,
+    });
+  };
+
+  return async (input: RequestInfo | URL, init: RequestInit = {}) => {
+    const nextInit: RequestInit = {
+      ...init,
+      credentials: "include",
+    };
+    // Ensure OAuth HttpOnly cookies are sent with every ChatKit request.
+
+    const headers = new Headers(nextInit.headers ?? {});
+    const contentType = headers.get("Content-Type") ?? "";
+    const expectsJson = contentType.includes("application/json");
+    const stringBody = typeof nextInit.body === "string";
+
+    const augmentPayload = (serialized: string | null) => {
+      if (!serialized) {
+        return JSON.stringify({
+          workflow_id: workflowId,
+          metadata: {
+            ...(metadata ?? {}),
+            workflow_id: workflowId,
+          },
+        });
+      }
+      try {
+        const payload = JSON.parse(serialized);
+        if (payload && typeof payload === "object") {
+          if (!payload.workflow_id) {
+            payload.workflow_id = workflowId;
+          }
+          const payloadMetadata =
+            payload.metadata && typeof payload.metadata === "object"
+              ? { ...(payload.metadata as Record<string, unknown>) }
+              : {};
+          if (metadata) {
+            Object.assign(payloadMetadata, metadata);
+          }
+          payloadMetadata.workflow_id = workflowId;
+          payload.metadata = payloadMetadata;
+        }
+        return JSON.stringify(payload);
+      } catch {
+        return serialized;
+      }
+    };
+
+    if (expectsJson || stringBody || !nextInit.body) {
+      nextInit.body = augmentPayload(
+        stringBody ? (nextInit.body as string) : null,
+      );
+      headers.set("Content-Type", "application/json");
+    }
+
+    nextInit.headers = headers;
+
+    const requestInfo = input ?? resolvedUrl;
+    const response = await baseFetch(requestInfo, nextInit);
+
+    if (!response.ok) {
+      await emitError(response.clone());
+    }
+
+    return response;
+  };
+};

package/src/features/chatkit/lib/chatkit-theme.ts

@@ -0,0 +1,20 @@
+import type { UseChatKitOptions } from "@openai/chatkit-react";
+import type { ColorScheme } from "@/hooks/use-color-scheme";
+
+export const buildChatTheme = (
+  scheme: ColorScheme,
+): NonNullable<UseChatKitOptions["theme"]> => ({
+  colorScheme: scheme,
+  color: {
+    grayscale: {
+      hue: 220,
+      tint: 6,
+      shade: scheme === "dark" ? -1 : -4,
+    },
+    accent: {
+      primary: scheme === "dark" ? "#f1f5f9" : "#0f172a",
+      level: 1,
+    },
+  },
+  radius: "round",
+});

package/src/features/chatkit/lib/telemetry.ts

@@ -0,0 +1,29 @@
+type ChatTelemetryEvent =
+  | "canvas.chat.open"
+  | "canvas.chat.close"
+  | "canvas.chat.session.success"
+  | "canvas.chat.session.failure";
+
+const buildDetail = (detail?: Record<string, unknown>) => ({
+  timestamp: new Date().toISOString(),
+  ...(detail ?? {}),
+});
+
+export function recordChatTelemetry(
+  event: ChatTelemetryEvent,
+  detail?: Record<string, unknown>,
+) {
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(
+      new CustomEvent("chatkit:telemetry", {
+        detail: { event, ...buildDetail(detail) },
+      }),
+    );
+  }
+
+  if (process.env.NODE_ENV !== "production") {
+    console.info(`[telemetry] ${event}`, buildDetail(detail));
+  }
+}
+
+export type { ChatTelemetryEvent };

package/src/features/chatkit/lib/workflow-session.ts

@@ -0,0 +1,69 @@
+import { buildBackendHttpUrl } from "@/lib/config";
+
+interface WorkflowSessionResponse {
+  client_secret?: string;
+  clientSecret?: string;
+  expires_at?: string;
+  expiresAt?: string;
+}
+
+export interface WorkflowChatSession {
+  clientSecret: string;
+  expiresAt: number | null;
+}
+
+const parseErrorDetail = async (response: Response): Promise<string> => {
+  try {
+    const payload = (await response.json()) as Record<string, unknown>;
+    if (typeof payload?.detail === "object" && payload.detail !== null) {
+      const detail = payload.detail as Record<string, unknown>;
+      const message =
+        typeof detail.message === "string" ? detail.message : null;
+      if (message) {
+        return message;
+      }
+    }
+    if (typeof payload.message === "string") {
+      return payload.message;
+    }
+  } catch {
+    // Ignore JSON parse errors and fall through to status text.
+  }
+  return response.statusText || "ChatKit session request failed.";
+};
+
+export async function requestWorkflowChatSession(
+  workflowId: string,
+  backendBaseUrl?: string | null,
+): Promise<WorkflowChatSession> {
+  const url = buildBackendHttpUrl(
+    `/api/workflows/${workflowId}/chatkit/session`,
+    backendBaseUrl ?? undefined,
+  );
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+  });
+
+  if (!response.ok) {
+    const message = await parseErrorDetail(response);
+    throw new Error(message);
+  }
+
+  const payload = (await response.json()) as WorkflowSessionResponse;
+  const secret = payload.client_secret ?? payload.clientSecret;
+  if (!secret) {
+    throw new Error("ChatKit session response missing client secret.");
+  }
+
+  const expiresRaw = payload.expires_at ?? payload.expiresAt;
+  const expiresAt = expiresRaw ? new Date(expiresRaw).getTime() : null;
+
+  return {
+    clientSecret: secret,
+    expiresAt,
+  };
+}

package/src/features/chatkit/pages/public-chat.tsx

@@ -0,0 +1,391 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+import { Monitor, Moon, Sun } from "lucide-react";
+import { Link, useParams } from "react-router-dom";
+import { Alert, AlertDescription, AlertTitle } from "@/design-system/ui/alert";
+import { Button } from "@/design-system/ui/button";
+import { Skeleton } from "@/design-system/ui/skeleton";
+import { ToggleGroup, ToggleGroupItem } from "@/design-system/ui/toggle-group";
+import { getBackendBaseUrl } from "@/lib/config";
+import { cn } from "@/lib/utils";
+import type { Theme } from "@/lib/theme";
+import { useThemePreferences } from "@features/account/components/use-theme-preferences";
+import {
+  ApiRequestError,
+  fetchWorkflow,
+} from "@features/workflow/lib/workflow-storage-api";
+import type { ApiWorkflow } from "@features/workflow/lib/workflow-storage.types";
+import { PublicChatWidget } from "@features/chatkit/components/public-chat-widget";
+import { PublicChatErrorBoundary } from "@features/chatkit/components/public-chat-error-boundary";
+import type { PublicChatHttpError } from "@features/chatkit/lib/chatkit-client";
+
+type ColorScheme = "light" | "dark";
+
+type WorkflowState =
+  | { status: "loading" }
+  | { status: "error"; message: string }
+  | { status: "ready"; workflow: ApiWorkflow };
+
+const sanitizeWorkflowNameForEmail = (value: string): string =>
+  value
+    .replace(/[\r\n]+/g, " ")
+    .replace(/[<>]/g, "")
+    .trim();
+
+export default function PublicChatPage() {
+  const { workflowId } = useParams<{ workflowId: string }>();
+  const [workflowState, setWorkflowState] = useState<WorkflowState>({
+    status: workflowId ? "loading" : "error",
+    ...(workflowId ? {} : { message: "Workflow identifier missing from URL." }),
+  });
+  const [chatError, setChatError] = useState<PublicChatHttpError | null>(null);
+  const [rateLimitError, setRateLimitError] =
+    useState<PublicChatHttpError | null>(null);
+  const [isChatReady, setIsChatReady] = useState(false);
+  const [systemColorScheme, setSystemColorScheme] = useState<ColorScheme>(() =>
+    typeof window !== "undefined" &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light",
+  );
+  const { theme, setTheme } = useThemePreferences({});
+  const backendBaseUrl = useMemo(() => getBackendBaseUrl(), []);
+
+  useEffect(() => {
+    setChatError(null);
+    setRateLimitError(null);
+    setIsChatReady(false);
+  }, [workflowId]);
+
+  useEffect(() => {
+    if (!workflowId) {
+      return;
+    }
+    let cancelled = false;
+    setWorkflowState({ status: "loading" });
+
+    fetchWorkflow(workflowId)
+      .then((workflow) => {
+        if (cancelled) {
+          return;
+        }
+        if (!workflow) {
+          setWorkflowState({
+            status: "error",
+            message: "This workflow does not exist or is no longer available.",
+          });
+          return;
+        }
+        if (!workflow.is_public) {
+          setWorkflowState({
+            status: "error",
+            message:
+              "This workflow is private. Ask the owner to republish it before trying again.",
+          });
+          return;
+        }
+        setWorkflowState({ status: "ready", workflow });
+      })
+      .catch((error: unknown) => {
+        if (cancelled) {
+          return;
+        }
+        if (error instanceof ApiRequestError) {
+          const message =
+            error.status >= 500
+              ? "The workflow service is unavailable. Please try again later."
+              : "Unable to load workflow metadata.";
+          setWorkflowState({ status: "error", message });
+          return;
+        }
+        setWorkflowState({
+          status: "error",
+          message: "Unexpected error while loading workflow metadata.",
+        });
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [workflowId]);
+
+  const contactHref = useMemo(() => {
+    if (workflowState.status !== "ready") {
+      return "mailto:?subject=Orcheo%20workflow%20access";
+    }
+    const sanitizedName = sanitizeWorkflowNameForEmail(
+      workflowState.workflow.name,
+    );
+    const subject = encodeURIComponent(`Request access to ${sanitizedName}`);
+    const link = typeof window !== "undefined" ? window.location.href : "";
+    const body = encodeURIComponent(
+      `Hi,%0A%0ACould you confirm access for workflow "${sanitizedName}" (${workflowState.workflow.id})?%0A%0ALink: ${link}%0A`,
+    );
+    return `mailto:?subject=${subject}&body=${body}`;
+  }, [workflowState]);
+
+  const handleErrorBoundaryReset = useCallback(() => {
+    setChatError(null);
+    setRateLimitError(null);
+    setIsChatReady(false);
+  }, []);
+
+  const handleChatHttpError = (error: PublicChatHttpError) => {
+    if (error.status === 429 || error.code?.startsWith("chatkit.rate_limit")) {
+      setRateLimitError(error);
+      return;
+    }
+    if (error.code === "chatkit.auth.oauth_required") {
+      setChatError({
+        ...error,
+        message:
+          "OAuth login is required before this workflow can be used. Sign in and try again.",
+      });
+      setIsChatReady(false);
+      return;
+    }
+    if (error.status === 401 || error.status === 403) {
+      setChatError({
+        ...error,
+        message:
+          "You do not have access to this workflow yet. Ask the owner to confirm it is still published.",
+      });
+      setIsChatReady(false);
+      return;
+    }
+    setChatError({
+      ...error,
+      message:
+        error.message ||
+        "ChatKit could not start this conversation. Please try again shortly.",
+    });
+    setIsChatReady(false);
+  };
+
+  const resolvedColorScheme: ColorScheme =
+    theme === "system" ? systemColorScheme : theme;
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (event: MediaQueryListEvent) => {
+      setSystemColorScheme(event.matches ? "dark" : "light");
+    };
+    if (typeof media.addEventListener === "function") {
+      media.addEventListener("change", handleChange);
+    } else {
+      media.addListener(handleChange);
+    }
+    return () => {
+      if (typeof media.removeEventListener === "function") {
+        media.removeEventListener("change", handleChange);
+      } else {
+        media.removeListener(handleChange);
+      }
+    };
+  }, []);
+
+  const handleThemeRequest = useCallback(
+    (requestedScheme: ColorScheme) => {
+      setTheme(requestedScheme);
+    },
+    [setTheme],
+  );
+
+  const renderChatColumn = () => {
+    const currentWorkflowName =
+      workflowState.status === "ready"
+        ? workflowState.workflow.name
+        : "this workflow";
+
+    const renderBody = () => {
+      if (workflowState.status === "loading") {
+        return (
+          <div className="space-y-4">
+            <Skeleton className="h-10 w-40 rounded-full" />
+            <Skeleton className="h-[520px] w-full rounded-3xl" />
+          </div>
+        );
+      }
+
+      if (workflowState.status === "error") {
+        return (
+          <div className="rounded-3xl border border-slate-200/80 bg-white/70 p-6 text-slate-900 shadow-sm dark:border-slate-800/60 dark:bg-slate-950/40 dark:text-white">
+            <p className="text-lg font-semibold">Chat unavailable</p>
+            <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">
+              We cannot open a ChatKit session until the workflow loads.
+            </p>
+            <Button asChild variant="secondary" className="mt-4">
+              <Link to="/">Return home</Link>
+            </Button>
+          </div>
+        );
+      }
+
+      return (
+        <div className="space-y-4">
+          {rateLimitError && (
+            <Alert className="border-amber-500/50 bg-amber-500/[0.08] text-amber-100">
+              <AlertTitle>Slow down for a moment</AlertTitle>
+              <AlertDescription>
+                {rateLimitError.message ||
+                  "Too many requests were sent for this workflow. Please wait before retrying."}
+              </AlertDescription>
+              <div className="mt-3">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="border-amber-400/60 text-amber-100"
+                  onClick={() => setRateLimitError(null)}
+                >
+                  Dismiss
+                </Button>
+              </div>
+            </Alert>
+          )}
+
+          {chatError ? (
+            <div className="space-y-4 rounded-3xl border border-red-500/40 bg-red-500/10 p-6 text-center">
+              <p className="font-medium text-red-100">{chatError.message}</p>
+              <div className="flex flex-wrap justify-center gap-3">
+                <Button asChild variant="outline">
+                  <a href={contactHref}>Contact owner</a>
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="relative min-h-[520px]">
+              {!isChatReady && (
+                <div className="absolute inset-0 flex flex-col gap-4 rounded-3xl bg-white/90 p-6 shadow-sm dark:bg-slate-950/80">
+                  <Skeleton className="h-10 w-1/2 self-center" />
+                  <Skeleton className="h-full w-full" />
+                </div>
+              )}
+              <div
+                className={cn(
+                  "h-[520px] w-full",
+                  isChatReady ? "opacity-100" : "opacity-0",
+                  "transition-opacity duration-200",
+                )}
+              >
+                <PublicChatWidget
+                  key={workflowState.workflow.id}
+                  workflowId={workflowState.workflow.id}
+                  workflowName={workflowState.workflow.name}
+                  backendBaseUrl={backendBaseUrl}
+                  onHttpError={handleChatHttpError}
+                  onReady={() => setIsChatReady(true)}
+                  colorScheme={resolvedColorScheme}
+                  onThemeRequest={handleThemeRequest}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      );
+    };
+
+    return (
+      <div className="space-y-6">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="space-y-2">
+            <p className="text-3xl font-semibold text-slate-900 dark:text-white">
+              Chat with “{currentWorkflowName}”
+            </p>
+            <p className="text-base text-slate-600 dark:text-slate-300">
+              Chat sessions open automatically for published workflows unless
+              the owner requires OAuth login.
+            </p>
+          </div>
+          <ThemeToggleButtonGroup value={theme} onChange={setTheme} />
+        </div>
+        {renderBody()}
+      </div>
+    );
+  };
+
+  return (
+    <PublicChatErrorBoundary onReset={handleErrorBoundaryReset}>
+      <div className="h-screen overflow-hidden bg-white text-slate-900 dark:bg-slate-950 dark:text-white">
+        <div className="mx-auto flex h-full max-w-6xl flex-col px-4 py-6 lg:py-8">
+          <div className="flex flex-1 items-center justify-center">
+            <div className="w-full max-w-3xl">{renderChatColumn()}</div>
+          </div>
+        </div>
+      </div>
+    </PublicChatErrorBoundary>
+  );
+}
+
+const THEME_OPTIONS: Array<{
+  icon: ReactNode;
+  label: string;
+  value: Theme;
+}> = [
+  {
+    value: "light",
+    label: "Light",
+    icon: <Sun className="h-4 w-4" />,
+  },
+  {
+    value: "dark",
+    label: "Dark",
+    icon: <Moon className="h-4 w-4" />,
+  },
+  {
+    value: "system",
+    label: "System",
+    icon: <Monitor className="h-4 w-4" />,
+  },
+];
+
+const isThemeValue = (value: string): value is Theme =>
+  THEME_OPTIONS.some((option) => option.value === value);
+
+interface ThemeToggleButtonGroupProps {
+  className?: string;
+  value: Theme;
+  onChange: (theme: Theme) => void;
+}
+
+function ThemeToggleButtonGroup({
+  className,
+  value,
+  onChange,
+}: ThemeToggleButtonGroupProps) {
+  const handleThemeChange = (value: string) => {
+    if (!value || !isThemeValue(value)) {
+      return;
+    }
+    onChange(value);
+  };
+
+  return (
+    <ToggleGroup
+      type="single"
+      value={value}
+      onValueChange={handleThemeChange}
+      aria-label="Select display theme"
+      className={cn(
+        "rounded-full border border-slate-200 bg-white/90 px-1 py-1 shadow-[inset_0_-1px_4px_rgba(15,23,42,0.12)] backdrop-blur-sm dark:border-slate-800 dark:bg-slate-950/70",
+        className,
+      )}
+      variant="default"
+      size="default"
+    >
+      {THEME_OPTIONS.map((option) => (
+        <ToggleGroupItem
+          key={option.value}
+          value={option.value}
+          aria-label={`Use ${option.label.toLowerCase()} theme`}
+          className="h-9 w-9 rounded-full border border-transparent p-0 text-slate-400 transition-all hover:bg-transparent hover:text-slate-900 dark:text-slate-400 dark:hover:text-white data-[state=on]:border-slate-900/20 data-[state=on]:bg-slate-900 data-[state=on]:text-white data-[state=on]:shadow-[0_4px_12px_rgba(15,23,42,0.3)] dark:data-[state=on]:border-white/30 dark:data-[state=on]:bg-white dark:data-[state=on]:text-slate-900"
+        >
+          {option.icon}
+          <span className="sr-only">{option.label}</span>
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  );
+}