orcheo-canvas 0.0.1

package/src/features/shared/components/chat-interface-options.ts

@@ -0,0 +1,305 @@
+import { useCallback, useMemo } from "react";
+
+import { buildBackendHttpUrl } from "@/lib/config";
+import {
+  buildPublicChatFetch,
+  getChatKitDomainKey,
+} from "@features/chatkit/lib/chatkit-client";
+import type { CustomApiConfig, HostedApiConfig } from "@openai/chatkit";
+import type { UseChatKitOptions } from "@openai/chatkit-react";
+
+import type { ChatInterfaceProps } from "./chat-interface.types";
+
+type ChatKitApiOptions = NonNullable<UseChatKitOptions["api"]>;
+type OptionalApiConfig = UseChatKitOptions["api"] | undefined;
+
+type OptionalHandlers = Pick<
+  ChatInterfaceProps,
+  "onResponseStart" | "onResponseEnd" | "onThreadChange" | "onLog"
+>;
+
+type OptionParams = Pick<
+  ChatInterfaceProps,
+  | "chatkitOptions"
+  | "getClientSecret"
+  | "backendBaseUrl"
+  | "workflowId"
+  | "sessionPayload"
+  | "title"
+  | "user"
+  | "ai"
+  | "initialMessages"
+> &
+  OptionalHandlers;
+
+const normalizeWorkflowId = (value: unknown): string | null => {
+  if (typeof value !== "string") {
+    return null;
+  }
+  const trimmed = value.trim();
+  return trimmed || null;
+};
+
+const deriveWorkflowIdFromPayload = (
+  payload?: Record<string, unknown>,
+): string | null => {
+  if (!payload) {
+    return null;
+  }
+  const camel = normalizeWorkflowId(payload["workflowId"]);
+  if (camel) {
+    return camel;
+  }
+  return normalizeWorkflowId(payload["workflow_id"]);
+};
+
+const hasGetClientSecret = (api: OptionalApiConfig): api is HostedApiConfig =>
+  Boolean(api && typeof api.getClientSecret === "function");
+
+const hasCustomApiConfig = (api: OptionalApiConfig): api is CustomApiConfig =>
+  Boolean(
+    api &&
+      typeof api === "object" &&
+      typeof api.url === "string" &&
+      typeof api.domainKey === "string",
+  );
+
+const useInitialGreeting = (
+  initialMessages: ChatInterfaceProps["initialMessages"],
+  aiId: string,
+) =>
+  useMemo(() => {
+    const greeting = initialMessages?.find(
+      (message) =>
+        typeof message.content === "string" && message.sender?.id === aiId,
+    );
+    return greeting?.content as string | undefined;
+  }, [aiId, initialMessages]);
+
+const useSessionSecretResolver = ({
+  getClientSecret,
+  backendBaseUrl,
+  sessionPayload,
+  title,
+  user,
+  ai,
+}: OptionParams) =>
+  useCallback(
+    async (currentSecret: string | null) => {
+      if (getClientSecret) {
+        return getClientSecret(currentSecret);
+      }
+
+      const url = buildBackendHttpUrl("/api/chatkit/session", backendBaseUrl);
+      const response = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          current_client_secret: currentSecret,
+          currentClientSecret: currentSecret,
+          user,
+          assistant: ai,
+          metadata: { title, ...sessionPayload },
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch ChatKit client secret");
+      }
+
+      const data = (await response.json()) as {
+        client_secret?: string;
+        clientSecret?: string;
+      };
+
+      const secret = data.client_secret ?? data.clientSecret;
+      if (!secret) {
+        throw new Error("ChatKit session response missing client secret");
+      }
+
+      return secret;
+    },
+    [ai, backendBaseUrl, getClientSecret, sessionPayload, title, user],
+  );
+
+const useHandlerComposer = () =>
+  useCallback(
+    <T extends unknown[]>(
+      ...handlers: Array<((...args: T) => void) | undefined>
+    ) => {
+      const valid = handlers.filter(Boolean) as Array<(...args: T) => void>;
+      if (valid.length === 0) {
+        return undefined;
+      }
+      return (...args: T) => {
+        valid.forEach((handler) => handler(...args));
+      };
+    },
+    [],
+  );
+
+export const useChatInterfaceOptions = ({
+  chatkitOptions,
+  getClientSecret,
+  backendBaseUrl,
+  workflowId,
+  sessionPayload,
+  title,
+  user,
+  ai,
+  initialMessages,
+  onResponseStart,
+  onResponseEnd,
+  onThreadChange,
+  onLog,
+}: OptionParams): UseChatKitOptions => {
+  const resolveSessionSecret = useSessionSecretResolver({
+    chatkitOptions,
+    getClientSecret,
+    backendBaseUrl,
+    sessionPayload,
+    title,
+    user,
+    ai,
+    initialMessages,
+    onResponseStart,
+    onResponseEnd,
+    onThreadChange,
+    onLog,
+  });
+  const composeHandlers = useHandlerComposer();
+  const initialGreeting = useInitialGreeting(initialMessages, ai.id);
+  const resolvedWorkflowId = useMemo(
+    () =>
+      normalizeWorkflowId(workflowId) ??
+      deriveWorkflowIdFromPayload(sessionPayload),
+    [sessionPayload, workflowId],
+  );
+  const defaultApiOptions = useMemo<
+    Partial<ChatKitApiOptions> | undefined
+  >(() => {
+    if (!resolvedWorkflowId) {
+      return undefined;
+    }
+    const url = buildBackendHttpUrl("/api/chatkit", backendBaseUrl);
+    const domainKey = getChatKitDomainKey();
+    if (typeof window === "undefined") {
+      return { url, domainKey };
+    }
+    // If a session getter is provided, prefer JWT-authenticated requests to the
+    // custom backend. Otherwise, fall back to cookie/public mode.
+    const makeJwtFetch = (
+      tokenResolver: (current: string | null) => Promise<string>,
+    ): typeof fetch => {
+      const base = buildPublicChatFetch({
+        workflowId: resolvedWorkflowId,
+        backendBaseUrl,
+        metadata: sessionPayload,
+      });
+      return async (input: RequestInfo | URL, init: RequestInit = {}) => {
+        const token = await tokenResolver(null);
+        const headers = new Headers(init.headers ?? {});
+        if (token) {
+          headers.set("Authorization", `Bearer ${token}`);
+        }
+        return base(input, { ...init, headers });
+      };
+    };
+
+    const fetchImpl = getClientSecret
+      ? makeJwtFetch(getClientSecret)
+      : buildPublicChatFetch({
+          workflowId: resolvedWorkflowId,
+          backendBaseUrl,
+          metadata: sessionPayload,
+        });
+
+    return {
+      url,
+      domainKey,
+      fetch: fetchImpl,
+    };
+  }, [backendBaseUrl, getClientSecret, resolvedWorkflowId, sessionPayload]);
+  const providedApi = chatkitOptions?.api;
+  const providedHostedSecret = useMemo(() => {
+    if (hasGetClientSecret(providedApi)) {
+      return providedApi.getClientSecret;
+    }
+    return null;
+  }, [providedApi]);
+  const providedCustomApi = useMemo(() => {
+    if (hasCustomApiConfig(providedApi)) {
+      return providedApi;
+    }
+    return undefined;
+  }, [providedApi]);
+  // When a workflow is present (Canvas bubble), force Custom API mode so
+  // requests go to our backend instead of the hosted ChatKit service.
+  const hostedSecret = resolvedWorkflowId
+    ? null
+    : (getClientSecret ??
+      providedHostedSecret ??
+      (!defaultApiOptions && !providedCustomApi ? resolveSessionSecret : null));
+
+  return useMemo(() => {
+    const merged = {
+      ...(chatkitOptions as UseChatKitOptions),
+    } as UseChatKitOptions;
+    let apiConfig: ChatKitApiOptions;
+    if (hostedSecret) {
+      apiConfig = {
+        getClientSecret: hostedSecret,
+      };
+    } else {
+      const mergedCustom: Partial<CustomApiConfig> = {
+        ...(defaultApiOptions ?? {}),
+        ...(providedCustomApi ?? {}),
+      };
+      apiConfig = mergedCustom as ChatKitApiOptions;
+    }
+
+    merged.api = apiConfig;
+
+    if (!merged.header) {
+      merged.header = {
+        enabled: true,
+        title: { enabled: true, text: title },
+      };
+    }
+
+    if (!merged.startScreen && initialGreeting) {
+      merged.startScreen = { greeting: initialGreeting };
+    }
+
+    merged.onResponseStart = composeHandlers(
+      chatkitOptions?.onResponseStart,
+      onResponseStart,
+    );
+    merged.onResponseEnd = composeHandlers(
+      chatkitOptions?.onResponseEnd,
+      onResponseEnd,
+    );
+    merged.onThreadChange = composeHandlers(
+      chatkitOptions?.onThreadChange,
+      onThreadChange,
+    );
+    merged.onThreadLoadStart = chatkitOptions?.onThreadLoadStart;
+    merged.onThreadLoadEnd = chatkitOptions?.onThreadLoadEnd;
+    merged.onLog = composeHandlers(chatkitOptions?.onLog, onLog);
+    merged.onError = chatkitOptions?.onError;
+
+    return merged;
+  }, [
+    chatkitOptions,
+    composeHandlers,
+    defaultApiOptions,
+    hostedSecret,
+    initialGreeting,
+    onLog,
+    onResponseEnd,
+    onResponseStart,
+    onThreadChange,
+    providedCustomApi,
+    title,
+  ]);
+};

package/src/features/shared/components/chat-interface.tsx

@@ -0,0 +1,162 @@
+import React, { useState } from "react";
+import { Button } from "@/design-system/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/design-system/ui/dialog";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/design-system/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { MessageSquare, MinimizeIcon, XIcon } from "lucide-react";
+
+import { ChatKitSurface } from "@features/chatkit/components/chatkit-surface";
+import { useChatInterfaceOptions } from "./chat-interface-options";
+import type { ChatInterfaceProps } from "./chat-interface.types";
+
+export default function ChatInterface({
+  title = "Chat",
+  initialMessages = [],
+  className,
+  isMinimizable = true,
+  isClosable = true,
+  position = "bottom-right",
+  triggerButton,
+  user,
+  ai,
+  backendBaseUrl,
+  workflowId,
+  sessionPayload,
+  getClientSecret,
+  chatkitOptions,
+  onResponseStart,
+  onResponseEnd,
+  onThreadChange,
+  onLog,
+}: ChatInterfaceProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isMinimized, setIsMinimized] = useState(false);
+
+  const chatKitOptions = useChatInterfaceOptions({
+    chatkitOptions,
+    getClientSecret,
+    backendBaseUrl,
+    workflowId,
+    sessionPayload,
+    title,
+    user,
+    ai,
+    initialMessages,
+    onResponseStart,
+    onResponseEnd,
+    onThreadChange,
+    onLog,
+  });
+
+  const handleToggleMinimize = () => {
+    setIsMinimized(!isMinimized);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setIsMinimized(false);
+  };
+
+  // Position classes
+  const positionClasses = {
+    "bottom-right": "bottom-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "top-right": "top-4 right-4",
+    "top-left": "top-4 left-4",
+    center: "bottom-1/2 right-1/2 transform translate-x-1/2 translate-y-1/2",
+  };
+
+  // If using Dialog mode (with trigger button)
+  if (triggerButton) {
+    return (
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogTrigger asChild>{triggerButton}</DialogTrigger>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+          </DialogHeader>
+          <div className="flex h-[60vh] flex-col">
+            <ChatKitSurface options={chatKitOptions} />
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // Floating chat interface
+  return (
+    <>
+      {!isOpen && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                onClick={() => setIsOpen(true)}
+                className="rounded-full h-14 w-14 shadow-lg fixed z-50 bottom-4 right-4"
+              >
+                <MessageSquare className="h-6 w-6" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Open chat</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+
+      {isOpen && (
+        <div
+          className={cn(
+            "fixed z-50 flex flex-col rounded-lg shadow-lg bg-background border",
+            positionClasses[position],
+            isMinimized ? "w-72 h-12" : "w-80 sm:w-96 h-[500px]",
+            className,
+          )}
+        >
+          <div className="flex items-center justify-between p-3 border-b">
+            <h3 className="font-medium truncate">{title}</h3>
+            <div className="flex items-center gap-1">
+              {isMinimizable && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6"
+                  onClick={handleToggleMinimize}
+                >
+                  <MinimizeIcon className="h-4 w-4" />
+                </Button>
+              )}
+              {isClosable && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6"
+                  onClick={handleClose}
+                >
+                  <XIcon className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+          </div>
+
+          {!isMinimized && (
+            <>
+              <div className="flex-1 overflow-hidden">
+                <ChatKitSurface options={chatKitOptions} />
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </>
+  );
+}

package/src/features/shared/components/chat-interface.types.ts

@@ -0,0 +1,36 @@
+import type React from "react";
+import type { UseChatKitOptions } from "@openai/chatkit-react";
+
+import type { ChatMessageProps } from "@features/shared/components/chat-message";
+
+export interface ChatParticipant {
+  id: string;
+  name: string;
+  avatar?: string;
+}
+
+export interface ChatInterfaceProps {
+  title?: string;
+  initialMessages?: ChatMessageProps[];
+  className?: string;
+  isMinimizable?: boolean;
+  isClosable?: boolean;
+  position?:
+    | "bottom-right"
+    | "bottom-left"
+    | "top-right"
+    | "top-left"
+    | "center";
+  triggerButton?: React.ReactNode;
+  user: ChatParticipant;
+  ai: ChatParticipant;
+  backendBaseUrl?: string;
+  workflowId?: string | null;
+  sessionPayload?: Record<string, unknown>;
+  getClientSecret?: (currentSecret: string | null) => Promise<string>;
+  chatkitOptions?: Partial<UseChatKitOptions>;
+  onResponseStart?: () => void;
+  onResponseEnd?: () => void;
+  onThreadChange?: (threadId: string | null) => void;
+  onLog?: (payload: Record<string, unknown>) => void;
+}

package/src/features/shared/components/chat-message-attachments.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { FileIcon, FileTextIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+export type ChatAttachment = {
+  id: string;
+  type: "image" | "video" | "file" | "code";
+  name: string;
+  url?: string;
+  content?: string;
+  language?: string;
+  size?: string;
+};
+
+interface ChatAttachmentListProps {
+  attachments: ChatAttachment[];
+  isUserMessage: boolean;
+}
+
+const MediaOverlay: React.FC<{ title: string }> = ({ title }) => (
+  <div className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 truncate">
+    {title}
+  </div>
+);
+
+const ChatAttachmentList: React.FC<ChatAttachmentListProps> = ({
+  attachments,
+  isUserMessage,
+}) => {
+  if (!attachments.length) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-2 mt-1">
+      {attachments.map((attachment) => (
+        <div
+          key={attachment.id}
+          className={cn(
+            "rounded-lg overflow-hidden",
+            isUserMessage ? "bg-primary/80" : "bg-muted/80",
+            attachment.type === "image" ? "max-w-xs" : "max-w-sm",
+          )}
+        >
+          {attachment.type === "image" && attachment.url && (
+            <div className="relative">
+              <img
+                src={attachment.url}
+                alt={attachment.name}
+                className="w-full h-auto rounded-lg"
+              />
+              <MediaOverlay title={attachment.name} />
+            </div>
+          )}
+
+          {attachment.type === "video" && attachment.url && (
+            <div className="relative">
+              <video
+                src={attachment.url}
+                controls
+                className="w-full h-auto rounded-lg"
+              />
+              <MediaOverlay title={attachment.name} />
+            </div>
+          )}
+
+          {attachment.type === "file" && (
+            <div
+              className={cn(
+                "flex items-center gap-2 p-2",
+                isUserMessage ? "text-primary-foreground" : "text-foreground",
+              )}
+            >
+              <div className="p-2 rounded-md bg-background/20">
+                {attachment.name.endsWith(".pdf") ? (
+                  <FileTextIcon className="h-6 w-6" />
+                ) : (
+                  <FileIcon className="h-6 w-6" />
+                )}
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-sm font-medium truncate">
+                  {attachment.name}
+                </div>
+                {attachment.size && (
+                  <div className="text-xs opacity-70">{attachment.size}</div>
+                )}
+              </div>
+              <a
+                href={attachment.url}
+                download={attachment.name}
+                className={cn(
+                  "text-xs px-2 py-1 rounded-md",
+                  isUserMessage
+                    ? "bg-primary-foreground/20 hover:bg-primary-foreground/30 text-primary-foreground"
+                    : "bg-background/20 hover:bg-background/30",
+                )}
+              >
+                Download
+              </a>
+            </div>
+          )}
+
+          {attachment.type === "code" && attachment.content && (
+            <div className="p-1">
+              <div className="text-xs px-3 py-1 bg-background/20 rounded-t-md flex justify-between">
+                <span>{attachment.language || "Code"}</span>
+                <span className="opacity-70">{attachment.name}</span>
+              </div>
+              <pre className="bg-black text-white p-3 text-sm overflow-x-auto rounded-b-md">
+                <code>{attachment.content}</code>
+              </pre>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ChatAttachmentList;

package/src/features/shared/components/chat-message-markdown.ts

@@ -0,0 +1,33 @@
+const wrapParagraphs = (text: string): string => {
+  if (!text.trim()) {
+    return "";
+  }
+
+  return `<p>${text}</p>`;
+};
+
+export const parseChatMarkdown = (text: string): string => {
+  let parsedText = text.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
+
+  parsedText = parsedText.replace(/\*(.*?)\*/g, "<em>$1</em>");
+
+  parsedText = parsedText.replace(
+    /```(.*?)```/gs,
+    "<pre><code>$1</code></pre>",
+  );
+
+  parsedText = parsedText.replace(/`(.*?)`/g, "<code>$1</code>");
+
+  parsedText = parsedText.replace(
+    /\[(.*?)\]\((.*?)\)/g,
+    '<a href="$2" target="_blank" rel="noopener noreferrer" class="text-primary underline">$1</a>',
+  );
+
+  parsedText = parsedText.replace(/^\d+\.\s+(.*?)$/gm, "<li>$1</li>");
+  parsedText = parsedText.replace(/^-\s+(.*?)$/gm, "<li>$1</li>");
+
+  parsedText = parsedText.replace(/\n\n/g, "</p><p>");
+  parsedText = parsedText.replace(/\n/g, "<br/>");
+
+  return wrapParagraphs(parsedText);
+};