@frankieai/react 0.1.5 → 0.2.0

package/dist/index.cjs

@@ -63,7 +63,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/hooks/FrankieProvider.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/lib/client.ts
 var FRANKIE_CLOUD_URL = "https://frankie-data-gq5o5syq2q-uc.a.run.app";
@@ -82,11 +82,18 @@ var FrankieClient = class {
     this.baseUrl = (options.baseUrl ?? FRANKIE_CLOUD_URL).replace(/\/+$/, "");
     this.doFetch = options.fetchImpl ?? globalThis.fetch.bind(globalThis);
     this.session = this.readStored();
+    if (options.getUserToken && typeof window !== "undefined") {
+      try {
+        for (const suffix of ["session", "messages"]) window.localStorage.removeItem(`${this.namespace}.${suffix}`);
+      } catch {
+      }
+    }
   }
   options;
   baseUrl;
   doFetch;
   session;
+  sessionUserToken;
   get sessionId() {
     return this.session?.sessionId;
   }
@@ -95,7 +102,7 @@ var FrankieClient = class {
   }
   /** Whether this client persists across reloads (browser only, opt-out via `persist:false`). */
   get persist() {
-    return this.options.persist !== false && typeof window !== "undefined";
+    return !this.options.getUserToken && this.options.persist !== false && typeof window !== "undefined";
   }
   /** localStorage namespace for this tenant/conversation, shared with the chat hook. */
   get namespace() {
@@ -128,15 +135,17 @@ var FrankieClient = class {
     return await this.unwrap(response);
   }
   async ensureSession(context) {
-    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) {
+      this.resetSession();
       throw new FrankieApiError(
         "Your signed-in Frankie session could not be verified. Refresh the page and sign in again.",
         401,
         "user_token_unavailable"
       );
     }
+    if (userToken !== this.sessionUserToken) this.resetSession();
+    if (this.session && new Date(this.session.expiresAt).getTime() > Date.now() + 3e4) return this.session;
     const response = await this.doFetch(`${this.baseUrl}/v1/session`, {
       method: "POST",
       headers: { "content-type": "application/json", "x-frankie-key": this.options.publishableKey },
@@ -147,6 +156,7 @@ var FrankieClient = class {
       })
     });
     this.session = await this.unwrap(response);
+    this.sessionUserToken = userToken;
     this.writeStored();
     return this.session;
   }
@@ -159,7 +169,7 @@ var FrankieClient = class {
     return Array.isArray(body.conversations) ? body.conversations : [];
   }
   async resumeConversation(id = this.options.conversationId) {
-    if (!id) return void 0;
+    if (!id || !this.options.getUserToken) return void 0;
     const userToken = await this.requireUserToken();
     const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(id)}/resume`, {
       method: "POST",
@@ -168,6 +178,7 @@ var FrankieClient = class {
     if (response.status === 404) return void 0;
     const body = await this.unwrap(response);
     this.session = body.session;
+    this.sessionUserToken = userToken;
     this.writeStored();
     return { messages: Array.isArray(body.messages) ? body.messages : [], title: body.title ?? "New chat" };
   }
@@ -274,64 +285,8 @@ function parseFrame(frame) {
   }
 }
 
-// src/hooks/FrankieProvider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var FrankieContext = (0, import_react.createContext)(null);
-function FrankieProvider({
-  children,
-  context,
-  theme,
-  config: providedConfig,
-  ...clientOptions
-}) {
-  const client = (0, import_react.useMemo)(
-    () => new FrankieClient(clientOptions),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [clientOptions.baseUrl, clientOptions.publishableKey, clientOptions.storageNamespace, clientOptions.conversationId]
-  );
-  const [config, setConfig] = (0, import_react.useState)(providedConfig);
-  const [configError, setConfigError] = (0, import_react.useState)(void 0);
-  const [loading, setLoading] = (0, import_react.useState)(!providedConfig);
-  (0, import_react.useEffect)(() => {
-    if (providedConfig) return;
-    const abort = new AbortController();
-    setLoading(true);
-    client.getConfig(abort.signal).then((next) => {
-      setConfig(next);
-      setConfigError(void 0);
-    }).catch((error) => {
-      if (abort.signal.aborted) return;
-      setConfigError(error instanceof Error ? error.message : "Could not load the assistant.");
-    }).finally(() => {
-      if (!abort.signal.aborted) setLoading(false);
-    });
-    return () => abort.abort();
-  }, [client, providedConfig]);
-  const value = (0, import_react.useMemo)(
-    () => ({
-      client,
-      ...config ? { config } : {},
-      ...configError ? { configError } : {},
-      loading,
-      ...context ? { context } : {},
-      ...theme ? { theme } : {}
-    }),
-    [client, config, configError, loading, context, theme]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FrankieContext.Provider, { value, children });
-}
-function useFrankie() {
-  const value = (0, import_react.useContext)(FrankieContext);
-  if (!value) throw new Error("Frankie components must be rendered inside <FrankieProvider>.");
-  return value;
-}
-function useFrankieTheme() {
-  const { config, theme } = useFrankie();
-  return (0, import_react.useMemo)(() => ({ ...config?.theme, ...theme }), [config?.theme, theme]);
-}
-
 // src/hooks/useFrankieChat.ts
-var import_react2 = require("react");
+var import_react = require("react");
 
 // src/lib/messages.ts
 function applyEvent(message, event) {
@@ -408,16 +363,23 @@ function newUserMessage(id, text, attachments) {
 // src/hooks/useFrankieChat.ts
 var counter = 0;
 var nextId = (prefix) => `${prefix}_${Date.now().toString(36)}_${counter += 1}`;
+var FrankieChatContext = (0, import_react.createContext)(null);
 function useFrankieChat() {
+  const value = (0, import_react.useContext)(FrankieChatContext);
+  if (!value) throw new Error("useFrankieChat requires FrankieProvider.");
+  return value;
+}
+function useFrankieChatState() {
   const { client, context } = useFrankie();
-  const [messages, setMessages] = (0, import_react2.useState)([]);
-  const [busy, setBusy] = (0, import_react2.useState)(false);
-  const [error, setError] = (0, import_react2.useState)(void 0);
-  const [restored, setRestored] = (0, import_react2.useState)(false);
-  const abortRef = (0, import_react2.useRef)(null);
-  const mounted = (0, import_react2.useRef)(true);
-  const messagesRef = (0, import_react2.useRef)([]);
-  (0, import_react2.useEffect)(() => {
+  const [messages, setMessages] = (0, import_react.useState)([]);
+  const [busy, setBusy] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(void 0);
+  const [restored, setRestored] = (0, import_react.useState)(false);
+  const [loadedSkills, setLoadedSkills] = (0, import_react.useState)(null);
+  const abortRef = (0, import_react.useRef)(null);
+  const mounted = (0, import_react.useRef)(true);
+  const messagesRef = (0, import_react.useRef)([]);
+  (0, import_react.useEffect)(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -425,7 +387,7 @@ function useFrankieChat() {
     };
   }, []);
   const storageKey = `${client.namespace}.messages`;
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     let active = true;
     const restore = async () => {
       if (client.persist) {
@@ -447,6 +409,7 @@ function useFrankieChat() {
           setMessages(restoredMessages);
         }
       } catch {
+        if (active) setError("Could not restore this conversation. Check your sign-in and connection, then try opening it again.");
       } finally {
         if (active) setRestored(true);
       }
@@ -456,7 +419,7 @@ function useFrankieChat() {
       active = false;
     };
   }, [client, storageKey]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (!client.persist || !restored || busy) return;
     try {
       if (messages.length) window.localStorage.setItem(storageKey, JSON.stringify(messages));
@@ -465,21 +428,22 @@ function useFrankieChat() {
     }
     if (messages.length) void client.syncConversation(messages, conversationTitle(messages)).catch(() => void 0);
   }, [messages, busy, client, storageKey, restored]);
-  const patchAssistant = (0, import_react2.useCallback)((id, update) => {
+  const patchAssistant = (0, import_react.useCallback)((id, update) => {
     const next = messagesRef.current.map(
       (message) => message.id === id && message.role === "assistant" ? update(message) : message
     );
     messagesRef.current = next;
     setMessages(next);
   }, []);
-  const send = (0, import_react2.useCallback)(
+  const send = (0, import_react.useCallback)(
     async (text, opts) => {
       const trimmed = text.trim();
       const attachments = opts?.attachments ?? [];
-      if (!trimmed && attachments.length === 0 || busy) return;
+      if (!trimmed && attachments.length === 0 || abortRef.current || !restored) return;
       const outgoing = trimmed || "Please take a look at the attached file(s).";
       const assistantId = nextId("a");
       setError(void 0);
+      setLoadedSkills(null);
       setBusy(true);
       const next = [
         ...messagesRef.current,
@@ -506,6 +470,10 @@ function useFrankieChat() {
             signal: abort.signal
           },
           (event) => {
+            if (event.type === "skills_loaded") {
+              setLoadedSkills(event.skills);
+              return;
+            }
             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;
@@ -544,10 +512,10 @@ function useFrankieChat() {
         abortRef.current = null;
       }
     },
-    [busy, client, context, patchAssistant]
+    [busy, client, context, patchAssistant, restored]
   );
-  const stop = (0, import_react2.useCallback)(() => abortRef.current?.abort(), []);
-  const reset = (0, import_react2.useCallback)(() => {
+  const stop = (0, import_react.useCallback)(() => abortRef.current?.abort(), []);
+  const reset = (0, import_react.useCallback)(() => {
     abortRef.current?.abort();
     client.resetSession();
     messagesRef.current = [];
@@ -555,12 +523,13 @@ function useFrankieChat() {
     setError(void 0);
     setBusy(false);
     setRestored(true);
+    setLoadedSkills(null);
     try {
       if (client.persist) window.localStorage.removeItem(`${client.namespace}.messages`);
     } catch {
     }
   }, [client]);
-  return { messages, busy, ...error ? { error } : {}, send, stop, reset };
+  return { messages, busy, loadedSkills, restoring: !restored, ...error ? { error } : {}, send, stop, reset };
 }
 function conversationTitle(messages) {
   const first = messages.find((message) => message.role === "user" && message.text.trim());
@@ -569,6 +538,68 @@ function conversationTitle(messages) {
   return title.length > 42 ? `${title.slice(0, 42)}\u2026` : title;
 }
 
+// src/hooks/FrankieProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FrankieContext = (0, import_react2.createContext)(null);
+function FrankieProvider({
+  children,
+  context,
+  theme,
+  config: providedConfig,
+  ...clientOptions
+}) {
+  const tokenCallback = (0, import_react2.useRef)(clientOptions.getUserToken);
+  tokenCallback.current = clientOptions.getUserToken;
+  const client = (0, import_react2.useMemo)(
+    () => new FrankieClient({ ...clientOptions, ...clientOptions.getUserToken ? { getUserToken: () => tokenCallback.current?.() } : {} }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [clientOptions.baseUrl, clientOptions.publishableKey, clientOptions.storageNamespace, clientOptions.conversationId, clientOptions.persist, clientOptions.fetchImpl, Boolean(clientOptions.getUserToken)]
+  );
+  const [config, setConfig] = (0, import_react2.useState)(providedConfig);
+  const [configError, setConfigError] = (0, import_react2.useState)(void 0);
+  const [loading, setLoading] = (0, import_react2.useState)(!providedConfig);
+  (0, import_react2.useEffect)(() => {
+    if (providedConfig) return;
+    const abort = new AbortController();
+    setLoading(true);
+    client.getConfig(abort.signal).then((next) => {
+      setConfig(next);
+      setConfigError(void 0);
+    }).catch((error) => {
+      if (abort.signal.aborted) return;
+      setConfigError(error instanceof Error ? error.message : "Could not load the assistant.");
+    }).finally(() => {
+      if (!abort.signal.aborted) setLoading(false);
+    });
+    return () => abort.abort();
+  }, [client, providedConfig]);
+  const value = (0, import_react2.useMemo)(
+    () => ({
+      client,
+      ...config ? { config } : {},
+      ...configError ? { configError } : {},
+      loading,
+      ...context ? { context } : {},
+      ...theme ? { theme } : {}
+    }),
+    [client, config, configError, loading, context, theme]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FrankieContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConversationState, { children }, client.namespace + ":" + (client.conversationId ?? "")) });
+}
+function ConversationState({ children }) {
+  const chat = useFrankieChatState();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FrankieChatContext.Provider, { value: chat, children });
+}
+function useFrankie() {
+  const value = (0, import_react2.useContext)(FrankieContext);
+  if (!value) throw new Error("Frankie components must be rendered inside <FrankieProvider>.");
+  return value;
+}
+function useFrankieTheme() {
+  const { config, theme } = useFrankie();
+  return (0, import_react2.useMemo)(() => ({ ...config?.theme, ...theme }), [config?.theme, theme]);
+}
+
 // src/components/chat/FrankieWidget.tsx
 var import_lucide_react5 = require("lucide-react");
 var import_react9 = require("react");
@@ -1171,7 +1202,7 @@ function ChatPanel({
 }) {
   const { config, configError, loading } = useFrankie();
   const theme = useFrankieTheme();
-  const { messages, busy, error, send, stop, reset } = useFrankieChat();
+  const { messages, busy, restoring, loadedSkills, error, send, stop, reset } = useFrankieChat();
   const scrollRef = (0, import_react8.useRef)(null);
   const features = config?.features;
   const pickerModels = features?.modelPicker.enabled ? features.modelPicker.models : [];
@@ -1226,6 +1257,16 @@ function ChatPanel({
           )
         ) }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(CardFooter, { className: "flex flex-col gap-2", children: [
+          loadedSkills !== null ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("details", { className: "frankie-loaded-skills", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("summary", { role: "status", children: loadedSkills.length ? `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"} loaded` : "No skills loaded for this turn" }),
+            loadedSkills.length ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ul", { children: loadedSkills.map((skill) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("li", { children: [
+              skill.name,
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("small", { children: [
+                "v",
+                skill.revision
+              ] })
+            ] }, skill.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { children: "Your assistant can still answer using its available tools." })
+          ] }) : null,
           error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "w-full text-xs text-red-600 dark:text-red-400", children: error }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Composer,
@@ -1233,7 +1274,7 @@ function ChatPanel({
               onSend: send,
               onStop: stop,
               busy,
-              disabled: Boolean(configError),
+              disabled: loading || restoring || Boolean(configError),
               ...placeholder ? { placeholder } : {},
               ...autoFocus ? { autoFocus } : {},
               ...features?.attachments.enabled ? { attachments: features.attachments } : {},
@@ -1253,6 +1294,7 @@ function FrankieWidget({
   position = "bottom-right",
   offset = 24,
   defaultOpen = false,
+  zIndex = 20,
   open: controlledOpen,
   onOpenChange,
   renderLauncher,
@@ -1281,11 +1323,11 @@ function FrankieWidget({
     "div",
     {
       className: cn("frankie-root frankie-widget", mode === "dark" && "dark"),
-      style: { ...themeToCssVars(theme), position: "fixed", bottom: offset, ...side, zIndex: 2147483e3 },
+      style: { ...themeToCssVars(theme), position: "fixed", bottom: offset, ...side, zIndex, pointerEvents: "none" },
       "data-frankie-mode": mode,
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("flex flex-col gap-3", position === "bottom-left" ? "items-start" : "items-end"), children: [
-        open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChatPanel, { ...panelProps, onClose: () => setOpen(false), autoFocus: true }) : null,
-        renderLauncher ? renderLauncher({ open, toggle: () => setOpen(!open), label }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { pointerEvents: "auto", maxHeight: "calc(100dvh - 100px)", overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChatPanel, { ...panelProps, className: cn("frankie-widget-panel", panelProps.className), onClose: () => setOpen(false), autoFocus: true }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { pointerEvents: "auto" }, children: renderLauncher ? renderLauncher({ open, toggle: () => setOpen(!open), label }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Button,
           {
             size: "icon",
@@ -1296,7 +1338,7 @@ function FrankieWidget({
             title: label,
             children: open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.X, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.MessageCircle, { className: "size-5" })
           }
-        )
+        ) })
       ] })
     }
   );
@@ -1319,94 +1361,145 @@ function FrankieInline({ className, style, ...panelProps }) {
 }
 
 // src/components/chat/FrankieChatPage.tsx
+var import_react10 = require("react");
+var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function PageEmptyState() {
   const { config } = useFrankie();
-  const { send, busy } = useFrankieChat();
+  const { send, busy, restoring } = useFrankieChat();
   const name = config?.branding.name ?? "Frankie";
-  const prompts = config?.suggestedPrompts?.slice(0, 3) ?? [];
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { className: "frankie-page-empty", "aria-label": "Start a conversation", children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "frankie-page-avatar", "aria-hidden": true, children: name.trim().slice(0, 1).toUpperCase() }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "frankie-page-kicker", children: [
-        name,
-        " assistant"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h1", { children: "What would you like to do?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "frankie-page-kicker", children: "Your product assistant" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h1", { children: "How can I help?" }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: config?.greeting ?? "Ask a question or choose a task to get started." })
     ] }),
-    prompts.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "frankie-page-prompts", children: prompts.map((prompt, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", disabled: busy, onClick: () => send(prompt), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: String(index + 1).padStart(2, "0") }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "frankie-page-prompts", children: config?.suggestedPrompts?.slice(0, 3).map((prompt) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", disabled: busy || restoring, onClick: () => void send(prompt), children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("strong", { children: prompt }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("b", { "aria-hidden": true, children: "\u2197" })
-    ] }, prompt)) }) : null
+    ] }, prompt)) })
   ] });
 }
-function PageChrome({
-  header,
-  footer,
-  emptyState,
-  renderMessage,
-  renderTool,
-  placeholder,
-  autoFocus
-}) {
-  const { config } = useFrankie();
-  const { reset } = useFrankieChat();
+function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...panel }) {
+  const { client, config } = useFrankie();
+  const { busy } = useFrankieChat();
+  const theme = useFrankieTheme();
+  const [conversations, setConversations] = (0, import_react10.useState)([]);
+  const [historyError, setHistoryError] = (0, import_react10.useState)("");
+  const [historyLoading, setHistoryLoading] = (0, import_react10.useState)(false);
+  const [drawerOpen, setDrawerOpen] = (0, import_react10.useState)(false);
+  const [query, setQuery] = (0, import_react10.useState)("");
+  const dialog = (0, import_react10.useRef)(null);
+  const menu = (0, import_react10.useRef)(null);
+  const requestVersion = (0, import_react10.useRef)(0);
   const name = config?.branding.name ?? "Frankie";
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("header", { className: "frankie-page-header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "frankie-page-status", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("strong", { children: name })
+  const refresh = (0, import_react10.useCallback)(async () => {
+    if (!showHistory || !config || config.allowAnonymous) {
+      setHistoryError("");
+      return;
+    }
+    const version = ++requestVersion.current;
+    setHistoryLoading(true);
+    setHistoryError("");
+    try {
+      const items = await client.listConversations();
+      if (version === requestVersion.current) setConversations(items);
+    } catch {
+      if (version === requestVersion.current) setHistoryError("History couldn\u2019t load. Check your sign-in and try again.");
+    } finally {
+      if (version === requestVersion.current) setHistoryLoading(false);
+    }
+  }, [client, showHistory, config?.allowAnonymous]);
+  (0, import_react10.useEffect)(() => {
+    if (!busy) void refresh();
+    return () => {
+      requestVersion.current++;
+    };
+  }, [refresh, busy]);
+  (0, import_react10.useEffect)(() => {
+    const node = dialog.current;
+    if (drawerOpen) {
+      node?.showModal?.();
+    } else {
+      node?.close?.();
+    }
+  }, [drawerOpen]);
+  const close = () => {
+    setDrawerOpen(false);
+    menu.current?.focus();
+  };
+  const select = (id) => {
+    if (!busy) {
+      onSelect(id);
+      close();
+    }
+  };
+  const history = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "frankie-history-heading", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("strong", { children: "Conversations" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "frankie-mobile-only", "aria-label": "Close conversations", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.X, { size: 18 }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", className: "frankie-new-chat", disabled: busy, onClick: () => {
+      onNew();
+      close();
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.Plus, { size: 17 }),
+      "New chat"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: "frankie-history-search", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "Search conversations" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "search", placeholder: "Search chats\u2026", value: query, onChange: (event) => setQuery(event.target.value) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("nav", { className: "frankie-history-list", "aria-label": "Conversations", children: conversations.filter((item) => item.title.toLowerCase().includes(query.toLowerCase())).map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", "aria-current": item.id === currentId ? "page" : void 0, disabled: busy, onClick: () => select(item.id), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: item.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("small", { children: new Date(item.updatedAt).toLocaleDateString() })
+    ] }, item.id)) }),
+    historyLoading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { role: "status", children: "Loading history\u2026" }) : historyError ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { role: "status", children: [
+      historyError,
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", onClick: () => void refresh(), children: "Try again" })
+    ] }) : !conversations.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: config?.allowAnonymous ? "Sign in to sync conversations across devices." : "Your conversations will appear here." }) : null,
+    navigation ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "frankie-host-navigation", children: navigation }) : null
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "frankie-page-shell" + (resolveMode(theme?.mode) === "dark" ? " dark" : ""), style: themeToCssVars(theme), children: [
+    showHistory ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("aside", { className: "frankie-history-desktop", children: history }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "frankie-page-main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("header", { className: "frankie-page-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+          showHistory ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "frankie-mobile-only", ref: menu, "aria-label": "Open conversations", "aria-haspopup": "dialog", "aria-expanded": drawerOpen, onClick: () => setDrawerOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.Menu, { size: 20 }) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("strong", { children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "frankie-header-caption", children: "Product assistant" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", disabled: busy, onClick: onNew, "aria-label": "Start a new conversation", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.Plus, { size: 16 }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "New chat" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("details", { className: "frankie-chat-settings", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("summary", { "aria-label": "Chat settings", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.Settings, { size: 19 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("strong", { children: "Chat settings" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { children: "History syncs automatically for signed-in users." }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", onClick: () => void refresh(), disabled: historyLoading || !showHistory, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.History, { size: 16 }),
+                "Refresh history"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("small", { children: "Skills are checked at the start of each message." })
+            ] })
+          ] })
+        ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", onClick: reset, "aria-label": "Start a new conversation", children: "New chat" })
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "frankie-page-canvas", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FrankieInline, { ...panel, header: panel.header ?? false, emptyState: panel.emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PageEmptyState, {}) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "frankie-page-canvas", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      FrankieInline,
-      {
-        header: header ?? false,
-        footer,
-        emptyState: emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PageEmptyState, {}),
-        renderMessage,
-        renderTool,
-        placeholder,
-        autoFocus
-      }
-    ) })
+    showHistory ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("dialog", { ref: dialog, className: "frankie-history-dialog frankie-root", "aria-label": "Chat conversations", style: themeToCssVars(theme), onCancel: close, onClick: (event) => {
+      if (event.target === event.currentTarget) close();
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("aside", { children: history }) }) : null
   ] });
 }
-function FrankieChatPage({
-  className,
-  style,
-  header,
-  footer,
-  emptyState,
-  renderMessage,
-  renderTool,
-  placeholder,
-  autoFocus,
-  ...providerProps
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    "main",
-    {
-      className: ["frankie-root", "frankie-chat-page", className].filter(Boolean).join(" "),
-      style: { height: "100dvh", minHeight: "100dvh", width: "100%", ...style },
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FrankieProvider, { ...providerProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        PageChrome,
-        {
-          header,
-          footer,
-          emptyState,
-          renderMessage,
-          renderTool,
-          placeholder,
-          autoFocus
-        }
-      ) })
-    }
-  );
+function FrankieChatPage({ className, style, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus, showHistory = true, navigation, ...provider }) {
+  const [id, setId] = (0, import_react10.useState)(() => provider.conversationId ?? crypto.randomUUID());
+  const onNew = () => setId(crypto.randomUUID());
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: ["frankie-root", "frankie-chat-page", className].filter(Boolean).join(" "), style: { height: "100%", minHeight: "min(36rem, 100dvh)", width: "100%", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FrankieProvider, { ...provider, conversationId: id, storageNamespace: (provider.storageNamespace ?? "frankie." + provider.publishableKey) + "." + id, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PageChrome, { showHistory, navigation, currentId: id, onSelect: setId, onNew, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus }) }) });
 }
 
 // src/components/ui/separator.tsx