@frankieai/react 0.1.1 → 0.1.5

package/dist/index.js

@@ -28,13 +28,16 @@ var FrankieClient = class {
   get sessionId() {
     return this.session?.sessionId;
   }
+  get conversationId() {
+    return this.options.conversationId;
+  }
   /** Whether this client persists across reloads (browser only, opt-out via `persist:false`). */
   get persist() {
     return this.options.persist !== false && typeof window !== "undefined";
   }
-  /** localStorage namespace for this tenant, shared with the chat hook. */
+  /** localStorage namespace for this tenant/conversation, shared with the chat hook. */
   get namespace() {
-    return `frankie.${this.options.publishableKey}`;
+    return this.options.storageNamespace ?? `frankie.${this.options.publishableKey}`;
   }
   readStored() {
     if (!this.persist) return void 0;
@@ -62,30 +65,80 @@ var FrankieClient = class {
     });
     return await this.unwrap(response);
   }
-  /** Opens (or reuses) a chat session. */
   async ensureSession(context) {
-    if (this.session && new Date(this.session.expiresAt).getTime() > Date.now() + 3e4) {
-      return this.session;
-    }
+    if (this.session && new Date(this.session.expiresAt).getTime() > Date.now() + 3e4) return this.session;
     const userToken = await this.options.getUserToken?.();
+    if (this.options.getUserToken && !userToken) {
+      throw new FrankieApiError(
+        "Your signed-in Frankie session could not be verified. Refresh the page and sign in again.",
+        401,
+        "user_token_unavailable"
+      );
+    }
     const response = await this.doFetch(`${this.baseUrl}/v1/session`, {
       method: "POST",
       headers: { "content-type": "application/json", "x-frankie-key": this.options.publishableKey },
-      body: JSON.stringify({ ...userToken ? { userToken } : {}, ...context ? { context } : {} })
+      body: JSON.stringify({
+        ...userToken ? { userToken } : {},
+        ...context ? { context } : {},
+        ...this.options.conversationId ? { conversationId: this.options.conversationId } : {}
+      })
     });
     this.session = await this.unwrap(response);
     this.writeStored();
     return this.session;
   }
-  /** Forget the current session so the next send starts a fresh conversation. */
+  async listConversations() {
+    const userToken = await this.requireUserToken();
+    const response = await this.doFetch(`${this.baseUrl}/v1/conversations`, {
+      headers: { "x-frankie-key": this.options.publishableKey, authorization: `Bearer ${userToken}` }
+    });
+    const body = await this.unwrap(response);
+    return Array.isArray(body.conversations) ? body.conversations : [];
+  }
+  async resumeConversation(id = this.options.conversationId) {
+    if (!id) return void 0;
+    const userToken = await this.requireUserToken();
+    const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(id)}/resume`, {
+      method: "POST",
+      headers: { "x-frankie-key": this.options.publishableKey, authorization: `Bearer ${userToken}` }
+    });
+    if (response.status === 404) return void 0;
+    const body = await this.unwrap(response);
+    this.session = body.session;
+    this.writeStored();
+    return { messages: Array.isArray(body.messages) ? body.messages : [], title: body.title ?? "New chat" };
+  }
+  async syncConversation(messages, title) {
+    if (!this.session || !this.options.conversationId) return;
+    const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(this.options.conversationId)}`, {
+      method: "PUT",
+      headers: {
+        "content-type": "application/json",
+        "x-frankie-key": this.options.publishableKey,
+        authorization: `Bearer ${this.session.sessionToken}`
+      },
+      body: JSON.stringify({ messages, ...title ? { title } : {} })
+    });
+    await this.unwrap(response);
+  }
+  async deleteConversation(id) {
+    const userToken = await this.requireUserToken();
+    const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(id)}`, {
+      method: "DELETE",
+      headers: { "x-frankie-key": this.options.publishableKey, authorization: `Bearer ${userToken}` }
+    });
+    if (response.status !== 404) await this.unwrap(response);
+  }
+  async requireUserToken() {
+    const token = await this.options.getUserToken?.();
+    if (!token) throw new FrankieApiError("Sign in to access your chat history.", 401, "unauthorized");
+    return token;
+  }
   resetSession() {
     this.session = void 0;
     this.writeStored();
   }
-  /**
-   * Sends a message and invokes `onEvent` for each server event as it arrives.
-   * Resolves when the turn ends.
-   */
   async send(input, onEvent) {
     const session = await this.ensureSession(input.context);
     const body = {
@@ -171,9 +224,8 @@ function FrankieProvider({
 }) {
   const client = useMemo(
     () => new FrankieClient(clientOptions),
-    // The client holds session state; rebuild it only when the endpoint changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [clientOptions.baseUrl, clientOptions.publishableKey]
+    [clientOptions.baseUrl, clientOptions.publishableKey, clientOptions.storageNamespace, clientOptions.conversationId]
   );
   const [config, setConfig] = useState(providedConfig);
   const [configError, setConfigError] = useState(void 0);
@@ -299,8 +351,10 @@ function useFrankieChat() {
   const [messages, setMessages] = useState2([]);
   const [busy, setBusy] = useState2(false);
   const [error, setError] = useState2(void 0);
+  const [restored, setRestored] = useState2(false);
   const abortRef = useRef(null);
   const mounted = useRef(true);
+  const messagesRef = useRef([]);
   useEffect2(() => {
     mounted.current = true;
     return () => {
@@ -310,28 +364,51 @@ function useFrankieChat() {
   }, []);
   const storageKey = `${client.namespace}.messages`;
   useEffect2(() => {
-    if (!client.persist) return;
-    try {
-      const raw = window.localStorage.getItem(storageKey);
-      const stored = raw ? JSON.parse(raw) : [];
-      if (Array.isArray(stored) && stored.length) setMessages(stored);
-    } catch {
-    }
-  }, [storageKey]);
+    let active = true;
+    const restore = async () => {
+      if (client.persist) {
+        try {
+          const raw = window.localStorage.getItem(storageKey);
+          const stored = raw ? JSON.parse(raw) : [];
+          if (Array.isArray(stored) && stored.length && active) {
+            messagesRef.current = stored;
+            setMessages(stored);
+          }
+        } catch {
+        }
+      }
+      try {
+        const remote = await client.resumeConversation();
+        if (active && remote?.messages.length) {
+          const restoredMessages = remote.messages;
+          messagesRef.current = restoredMessages;
+          setMessages(restoredMessages);
+        }
+      } catch {
+      } finally {
+        if (active) setRestored(true);
+      }
+    };
+    void restore();
+    return () => {
+      active = false;
+    };
+  }, [client, storageKey]);
   useEffect2(() => {
-    if (!client.persist || busy) return;
+    if (!client.persist || !restored || busy) return;
     try {
       if (messages.length) window.localStorage.setItem(storageKey, JSON.stringify(messages));
       else window.localStorage.removeItem(storageKey);
     } catch {
     }
-  }, [messages, busy, client, storageKey]);
+    if (messages.length) void client.syncConversation(messages, conversationTitle(messages)).catch(() => void 0);
+  }, [messages, busy, client, storageKey, restored]);
   const patchAssistant = useCallback((id, update) => {
-    setMessages(
-      (current) => current.map(
-        (message) => message.id === id && message.role === "assistant" ? update(message) : message
-      )
+    const next = messagesRef.current.map(
+      (message) => message.id === id && message.role === "assistant" ? update(message) : message
     );
+    messagesRef.current = next;
+    setMessages(next);
   }, []);
   const send = useCallback(
     async (text, opts) => {
@@ -342,18 +419,22 @@ function useFrankieChat() {
       const assistantId = nextId("a");
       setError(void 0);
       setBusy(true);
-      setMessages((current) => [
-        ...current,
+      const next = [
+        ...messagesRef.current,
         newUserMessage(
           nextId("u"),
           trimmed,
           attachments.map((file) => ({ name: file.name, mimeType: file.mimeType }))
         ),
         newAssistantMessage(assistantId)
-      ]);
+      ];
+      messagesRef.current = next;
+      setMessages(next);
       const abort = new AbortController();
       abortRef.current = abort;
       try {
+        let receivedText = false;
+        let receivedToolActivity = false;
         await client.send(
           {
             message: outgoing,
@@ -364,9 +445,18 @@ function useFrankieChat() {
           },
           (event) => {
             if (event.type === "ping" || event.type === "session") return;
+            if (event.type === "text_delta") receivedText = true;
+            if (event.type === "tool_start" || event.type === "tool_end") receivedToolActivity = true;
             patchAssistant(assistantId, (message) => applyEvent(message, event));
           }
         );
+        if (!receivedText) {
+          patchAssistant(assistantId, (message) => ({
+            ...message,
+            status: "done",
+            text: receivedToolActivity ? "Completed. Open Agent activity for the details." : "Frankie didn\u2019t return an answer. Please try again."
+          }));
+        }
       } catch (caught) {
         if (abort.signal.aborted) {
           patchAssistant(assistantId, (message) => ({
@@ -375,18 +465,20 @@ function useFrankieChat() {
             text: message.text || "Stopped."
           }));
         } else {
-          const message = caught instanceof FrankieApiError ? caught.message : "Could not reach the assistant. Check your connection and try again.";
+          const message = caught instanceof FrankieApiError ? caught.message : caught instanceof Error && caught.message.startsWith("Frankie") ? caught.message : "Could not reach the assistant. Check your connection and try again.";
           if (mounted.current) setError(message);
           patchAssistant(assistantId, (current) => ({ ...current, status: "error", error: message }));
         }
       } finally {
-        if (mounted.current) {
-          setBusy(false);
-          patchAssistant(
-            assistantId,
-            (message) => message.status === "streaming" ? { ...message, status: "done" } : message
-          );
+        patchAssistant(
+          assistantId,
+          (message) => message.status === "streaming" ? { ...message, status: "done" } : message
+        );
+        const transcript = messagesRef.current;
+        if (transcript.length) {
+          await client.syncConversation(transcript, conversationTitle(transcript)).catch(() => void 0);
         }
+        if (mounted.current) setBusy(false);
         abortRef.current = null;
       }
     },
@@ -396,9 +488,11 @@ function useFrankieChat() {
   const reset = useCallback(() => {
     abortRef.current?.abort();
     client.resetSession();
+    messagesRef.current = [];
     setMessages([]);
     setError(void 0);
     setBusy(false);
+    setRestored(true);
     try {
       if (client.persist) window.localStorage.removeItem(`${client.namespace}.messages`);
     } catch {
@@ -406,10 +500,16 @@ function useFrankieChat() {
   }, [client]);
   return { messages, busy, ...error ? { error } : {}, send, stop, reset };
 }
+function conversationTitle(messages) {
+  const first = messages.find((message) => message.role === "user" && message.text.trim());
+  if (!first) return void 0;
+  const title = first.text.trim().replace(/\s+/g, " ");
+  return title.length > 42 ? `${title.slice(0, 42)}\u2026` : title;
+}
 
 // src/components/chat/FrankieWidget.tsx
 import { MessageCircle, X as X4 } from "lucide-react";
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect5, useState as useState6 } from "react";
 
 // src/lib/theme.ts
 function themeToCssVars(theme) {
@@ -470,7 +570,7 @@ function Button({ className, variant, size, asChild = false, ...props }) {
 
 // src/components/chat/ChatPanel.tsx
 import { RotateCcw, X as X3 } from "lucide-react";
-import { useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 
 // src/components/ui/avatar.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -731,7 +831,8 @@ function readAsBase64(file) {
 }
 
 // src/components/chat/MessageBubble.tsx
-import { Paperclip as Paperclip2 } from "lucide-react";
+import { Check as Check2, Copy, Paperclip as Paperclip2 } from "lucide-react";
+import { useState as useState4 } from "react";
 
 // src/components/chat/Markdown.tsx
 import { Fragment as Fragment2 } from "react";
@@ -836,7 +937,7 @@ function renderToken(token) {
 }
 
 // src/components/chat/ToolActivityList.tsx
-import { Check, Loader2, ShieldAlert, X as X2 } from "lucide-react";
+import { Check, ChevronDown, Loader2, ShieldAlert, X as X2 } from "lucide-react";
 
 // src/components/ui/badge.tsx
 import { cva as cva2 } from "class-variance-authority";
@@ -867,7 +968,20 @@ function Badge({
 import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 function ToolActivityList({ tools, renderTool }) {
   if (tools.length === 0) return null;
-  return /* @__PURE__ */ jsx10("ul", { className: "mt-2 flex flex-col gap-1", children: tools.map((tool) => /* @__PURE__ */ jsx10("li", { children: renderTool ? renderTool(tool) : /* @__PURE__ */ jsx10(ToolActivityRow, { tool }) }, tool.id)) });
+  const running = tools.some((tool) => tool.status === "running");
+  return /* @__PURE__ */ jsxs2("details", { className: "frankie-tool-activity mt-2", open: running, children: [
+    /* @__PURE__ */ jsxs2("summary", { className: "inline-flex min-h-7 cursor-pointer list-none items-center gap-1.5 rounded-md px-1 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground [&::-webkit-details-marker]:hidden", children: [
+      /* @__PURE__ */ jsx10(ChevronDown, { className: "frankie-tool-chevron size-3.5 transition-transform", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx10("span", { children: running ? "Working" : "Activity" }),
+      /* @__PURE__ */ jsxs2("span", { className: "text-[11px]", children: [
+        "\xB7 ",
+        tools.length,
+        " tool call",
+        tools.length === 1 ? "" : "s"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx10("ul", { className: "mt-1 flex flex-col gap-1 border-l border-border pl-2", children: tools.map((tool) => /* @__PURE__ */ jsx10("li", { children: renderTool ? renderTool(tool) : /* @__PURE__ */ jsx10(ToolActivityRow, { tool }) }, tool.id)) })
+  ] });
 }
 function ToolActivityRow({ tool }) {
   return /* @__PURE__ */ jsxs2(Badge, { variant: badgeVariant(tool.status), title: tool.detail ?? tool.name, children: [
@@ -916,18 +1030,36 @@ function MessageBubble({
         },
         `${file.name}-${index}`
       )) }) : null,
-      message.text ? /* @__PURE__ */ jsx11("div", { className: "max-w-[85%] rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground", children: message.text }) : null
+      message.text ? /* @__PURE__ */ jsxs3("div", { className: "flex max-w-[85%] items-end gap-1", children: [
+        /* @__PURE__ */ jsx11("div", { className: "rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground", children: message.text }),
+        /* @__PURE__ */ jsx11(MessageCopyButton, { text: message.text })
+      ] }) : null
     ] });
   }
   const empty = message.text.length === 0 && message.tools.length === 0;
   return /* @__PURE__ */ jsxs3("div", { className: "flex gap-2", children: [
-    /* @__PURE__ */ jsx11(Avatar, { ...avatarUrl ? { src: avatarUrl } : {}, name: assistantName, className: "mt-0.5" }),
+    /* @__PURE__ */ jsxs3("div", { className: "frankie-assistant-actions mt-0.5 flex shrink-0 flex-col items-center gap-1", children: [
+      /* @__PURE__ */ jsx11(Avatar, { ...avatarUrl ? { src: avatarUrl } : {}, name: assistantName }),
+      message.text ? /* @__PURE__ */ jsx11(MessageCopyButton, { text: message.text }) : null
+    ] }),
     /* @__PURE__ */ jsxs3("div", { className: "min-w-0 max-w-[85%]", children: [
       message.status === "error" ? /* @__PURE__ */ jsx11("p", { className: "rounded-[var(--frankie-radius)] bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400", children: message.error }) : empty && message.status === "streaming" ? /* @__PURE__ */ jsx11(TypingDots, {}) : /* @__PURE__ */ jsx11(Markdown, { text: message.text, className: "text-sm" }),
       showToolActivity ? /* @__PURE__ */ jsx11(ToolActivityList, { tools: message.tools, ...renderTool ? { renderTool } : {} }) : null
     ] })
   ] });
 }
+function MessageCopyButton({ text }) {
+  const [copied, setCopied] = useState4(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsx11("button", { type: "button", onClick: () => void copy(), className: "frankie-message-copy inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-transparent text-muted-foreground transition hover:border-border hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary", "aria-label": copied ? "Copied" : "Copy message", title: copied ? "Copied" : "Copy message", children: copied ? /* @__PURE__ */ jsx11(Check2, { className: "size-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx11(Copy, { className: "size-3.5", "aria-hidden": "true" }) });
+}
 function TypingDots() {
   return /* @__PURE__ */ jsx11("span", { className: "inline-flex items-center gap-1 py-2", role: "status", "aria-label": "Thinking", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx11(
     "span",
@@ -981,7 +1113,7 @@ function ChatPanel({
   const scrollRef = useRef3(null);
   const features = config?.features;
   const pickerModels = features?.modelPicker.enabled ? features.modelPicker.models : [];
-  const [model, setModel] = useState4(void 0);
+  const [model, setModel] = useState5(void 0);
   useEffect4(() => {
     const node = scrollRef.current;
     if (!node) return;
@@ -1011,7 +1143,11 @@ function ChatPanel({
           /* @__PURE__ */ jsx13(Button, { size: "icon", variant: "ghost", onClick: reset, "aria-label": "Start a new conversation", title: "New conversation", children: /* @__PURE__ */ jsx13(RotateCcw, {}) }),
           onClose ? /* @__PURE__ */ jsx13(Button, { size: "icon", variant: "ghost", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx13(X3, {}) }) : null
         ] }),
-        /* @__PURE__ */ jsx13(CardContent, { children: /* @__PURE__ */ jsx13(ScrollArea, { ref: scrollRef, className: "flex h-full flex-col gap-4 p-4", "aria-live": "polite", children: configError ? /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: configError }) : loading ? /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: "Loading\u2026" }) : messages.length === 0 ? emptyState ?? /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx13(CardContent, { children: /* @__PURE__ */ jsx13(ScrollArea, { ref: scrollRef, className: "flex h-full flex-col gap-4 p-4", "aria-live": "polite", children: configError ? /* @__PURE__ */ jsxs4("div", { className: "frankie-config-error", role: "alert", children: [
+          /* @__PURE__ */ jsx13("strong", { children: "Frankie couldn\u2019t start" }),
+          /* @__PURE__ */ jsx13("p", { children: configError }),
+          /* @__PURE__ */ jsx13("p", { children: "Refresh this page after checking the workspace\u2019s allowed origin and sign-in settings." })
+        ] }) : loading ? /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: "Starting Frankie\u2026" }) : messages.length === 0 ? emptyState ?? /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4", children: [
           /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: config?.greeting }),
           /* @__PURE__ */ jsx13(SuggestedPrompts, { prompts: config?.suggestedPrompts ?? [], onPick: send, disabled: busy })
         ] }) : /* @__PURE__ */ jsx13("div", { className: "flex flex-col gap-4", children: messages.map(
@@ -1062,7 +1198,7 @@ function FrankieWidget({
 }) {
   const { config } = useFrankie();
   const theme = useFrankieTheme();
-  const [uncontrolledOpen, setUncontrolledOpen] = useState5(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState6(defaultOpen);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = (next) => {
     if (controlledOpen === void 0) setUncontrolledOpen(next);
@@ -1120,10 +1256,101 @@ function FrankieInline({ className, style, ...panelProps }) {
   );
 }
 
+// src/components/chat/FrankieChatPage.tsx
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+function PageEmptyState() {
+  const { config } = useFrankie();
+  const { send, busy } = useFrankieChat();
+  const name = config?.branding.name ?? "Frankie";
+  const prompts = config?.suggestedPrompts?.slice(0, 3) ?? [];
+  return /* @__PURE__ */ jsxs6("section", { className: "frankie-page-empty", "aria-label": "Start a conversation", children: [
+    /* @__PURE__ */ jsx16("span", { className: "frankie-page-avatar", "aria-hidden": true, children: name.trim().slice(0, 1).toUpperCase() }),
+    /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsxs6("p", { className: "frankie-page-kicker", children: [
+        name,
+        " assistant"
+      ] }),
+      /* @__PURE__ */ jsx16("h1", { children: "What would you like to do?" }),
+      /* @__PURE__ */ jsx16("p", { children: config?.greeting ?? "Ask a question or choose a task to get started." })
+    ] }),
+    prompts.length ? /* @__PURE__ */ jsx16("div", { className: "frankie-page-prompts", children: prompts.map((prompt, index) => /* @__PURE__ */ jsxs6("button", { type: "button", disabled: busy, onClick: () => send(prompt), children: [
+      /* @__PURE__ */ jsx16("span", { children: String(index + 1).padStart(2, "0") }),
+      /* @__PURE__ */ jsx16("strong", { children: prompt }),
+      /* @__PURE__ */ jsx16("b", { "aria-hidden": true, children: "\u2197" })
+    ] }, prompt)) }) : null
+  ] });
+}
+function PageChrome({
+  header,
+  footer,
+  emptyState,
+  renderMessage,
+  renderTool,
+  placeholder,
+  autoFocus
+}) {
+  const { config } = useFrankie();
+  const { reset } = useFrankieChat();
+  const name = config?.branding.name ?? "Frankie";
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsxs6("header", { className: "frankie-page-header", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx16("span", { className: "frankie-page-status", "aria-hidden": true }),
+        /* @__PURE__ */ jsx16("strong", { children: name })
+      ] }),
+      /* @__PURE__ */ jsx16("button", { type: "button", onClick: reset, "aria-label": "Start a new conversation", children: "New chat" })
+    ] }),
+    /* @__PURE__ */ jsx16("div", { className: "frankie-page-canvas", children: /* @__PURE__ */ jsx16(
+      FrankieInline,
+      {
+        header: header ?? false,
+        footer,
+        emptyState: emptyState ?? /* @__PURE__ */ jsx16(PageEmptyState, {}),
+        renderMessage,
+        renderTool,
+        placeholder,
+        autoFocus
+      }
+    ) })
+  ] });
+}
+function FrankieChatPage({
+  className,
+  style,
+  header,
+  footer,
+  emptyState,
+  renderMessage,
+  renderTool,
+  placeholder,
+  autoFocus,
+  ...providerProps
+}) {
+  return /* @__PURE__ */ jsx16(
+    "main",
+    {
+      className: ["frankie-root", "frankie-chat-page", className].filter(Boolean).join(" "),
+      style: { height: "100dvh", minHeight: "100dvh", width: "100%", ...style },
+      children: /* @__PURE__ */ jsx16(FrankieProvider, { ...providerProps, children: /* @__PURE__ */ jsx16(
+        PageChrome,
+        {
+          header,
+          footer,
+          emptyState,
+          renderMessage,
+          renderTool,
+          placeholder,
+          autoFocus
+        }
+      ) })
+    }
+  );
+}
+
 // src/components/ui/separator.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function Separator({ className }) {
-  return /* @__PURE__ */ jsx16("div", { role: "separator", className: cn("h-px w-full bg-border", className) });
+  return /* @__PURE__ */ jsx17("div", { role: "separator", className: cn("h-px w-full bg-border", className) });
 }
 export {
   Avatar,
@@ -1139,6 +1366,7 @@ export {
   Composer,
   FRANKIE_CLOUD_URL,
   FrankieApiError,
+  FrankieChatPage,
   FrankieClient,
   FrankieInline,
   FrankieProvider,