orcheo-studio 0.21.1

package/src/features/chatkit/components/public-chat-config.ts

@@ -0,0 +1,70 @@
+import type { ModelOption, StartScreenPrompt } from "@openai/chatkit";
+import type {
+  ChatKitStartScreenPrompt as WorkflowChatKitStartScreenPrompt,
+  ChatKitSupportedModel as WorkflowChatKitSupportedModel,
+} from "@features/workflow/lib/workflow-storage.types";
+
+export const buildStartScreenPrompts = (
+  workflowName: string,
+  configuredPrompts?: WorkflowChatKitStartScreenPrompt[] | null,
+): StartScreenPrompt[] => {
+  if (configuredPrompts !== undefined && configuredPrompts !== null) {
+    return configuredPrompts.map((prompt) => ({
+      label: prompt.label,
+      prompt: prompt.prompt,
+      ...(prompt.icon ? { icon: prompt.icon } : {}),
+    }));
+  }
+
+  return [
+    {
+      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",
+    },
+  ];
+};
+
+export const buildModelOptions = (
+  configuredModels?: WorkflowChatKitSupportedModel[] | null,
+): ModelOption[] | undefined => {
+  if (configuredModels === undefined || configuredModels === null) {
+    return undefined;
+  }
+
+  const enabledModels = configuredModels.filter((model) => !model.disabled);
+  const hasExplicitDefault = enabledModels.some((model) => model.default);
+  let assignedFallbackDefault = false;
+  const normalized = configuredModels.map((model) => {
+    const shouldAssignFallbackDefault =
+      !hasExplicitDefault && !model.disabled && !assignedFallbackDefault;
+    if (shouldAssignFallbackDefault) {
+      assignedFallbackDefault = true;
+    }
+    return {
+      id: model.id,
+      label: model.label?.trim() || model.id,
+      ...(model.description ? { description: model.description } : {}),
+      ...(model.disabled ? { disabled: true } : {}),
+      ...(model.default || shouldAssignFallbackDefault
+        ? { default: true }
+        : {}),
+    };
+  });
+  return normalized.length > 0 ? normalized : undefined;
+};

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,150 @@
+import { useMemo } from "react";
+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 type {
+  ChatKitStartScreenPrompt as WorkflowChatKitStartScreenPrompt,
+  ChatKitSupportedModel as WorkflowChatKitSupportedModel,
+} from "@features/workflow/lib/workflow-storage.types";
+import { buildChatKitAttachmentOptions } from "@features/chatkit/lib/chatkit-attachments";
+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";
+import {
+  buildModelOptions,
+  buildStartScreenPrompts,
+} from "@features/chatkit/components/public-chat-config";
+
+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;
+  startScreenPrompts?: WorkflowChatKitStartScreenPrompt[] | null;
+  supportedModels?: WorkflowChatKitSupportedModel[] | null;
+}
+
+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,
+  startScreenPrompts,
+  supportedModels,
+}: PublicChatWidgetProps) {
+  const options = useMemo<UseChatKitOptions>(() => {
+    const domainKey = getChatKitDomainKey();
+    const uploadBase = buildBackendHttpUrl(
+      "/api/chatkit/upload",
+      backendBaseUrl,
+    );
+    const uploadUrlObj = new URL(uploadBase);
+    uploadUrlObj.searchParams.set("workflow_id", workflowId);
+    const uploadUrl = uploadUrlObj.toString();
+    const modelOptions = buildModelOptions(supportedModels);
+
+    return {
+      api: {
+        url: buildBackendHttpUrl("/api/chatkit", backendBaseUrl),
+        domainKey,
+        fetch: buildPublicChatFetch({
+          workflowId,
+          onHttpError,
+          metadata: {
+            workflow_name: workflowName,
+          },
+        }),
+        uploadStrategy: { type: "direct", uploadUrl },
+      },
+      header: {
+        enabled: true,
+        title: { text: workflowName },
+      },
+      history: {
+        enabled: true,
+      },
+      theme: buildChatTheme(colorScheme),
+      startScreen: {
+        greeting: buildGreeting(workflowName),
+        prompts: buildStartScreenPrompts(workflowName, startScreenPrompts),
+      },
+      composer: {
+        placeholder: buildComposerPlaceholder(workflowName),
+        ...(modelOptions ? { models: modelOptions } : {}),
+        tools: [
+          {
+            id: "search_docs",
+            label: "Search docs",
+            shortLabel: "Docs",
+            placeholderOverride: "Search documentation",
+            icon: "book-open",
+            pinned: false,
+          },
+        ],
+        attachments: buildChatKitAttachmentOptions(),
+      },
+      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,
+    startScreenPrompts,
+    supportedModels,
+    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>
+  );
+}