@frankieai/react 0.1.4 → 0.2.0

package/src/components/chat/FrankieChatPage.tsx

@@ -1,53 +1,93 @@
 "use client";
 
-import type { CSSProperties } from "react";
+import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import { History, Menu, Plus, Settings, X } from "lucide-react";
 import type { FrankieProviderProps } from "../../hooks/FrankieProvider.jsx";
-import { FrankieProvider } from "../../hooks/FrankieProvider.jsx";
+import { FrankieProvider, useFrankie, useFrankieTheme } from "../../hooks/FrankieProvider.jsx";
+import { useFrankieChat } from "../../hooks/useFrankieChat.js";
+import { themeToCssVars, resolveMode } from "../../lib/theme.js";
+import type { ChatConversation } from "../../lib/client.js";
 import { FrankieInline } from "./FrankieInline.js";
 import type { ChatPanelProps } from "./ChatPanel.js";
 
-/**
- * A complete chat route in one component. This is the simplest way to add a
- * dedicated /chat page to an app while keeping the existing floating widget.
- */
-export interface FrankieChatPageProps
-  extends Omit<FrankieProviderProps, "children">,
-    Pick<
-      ChatPanelProps,
-      "header" | "footer" | "emptyState" | "renderMessage" | "renderTool" | "placeholder" | "autoFocus"
-    > {
+export interface FrankieChatPageProps extends Omit<FrankieProviderProps, "children">,
+  Pick<ChatPanelProps, "header" | "footer" | "emptyState" | "renderMessage" | "renderTool" | "placeholder" | "autoFocus"> {
   className?: string;
   style?: CSSProperties;
+  /** Include the built-in conversation sidebar. Defaults to true. */
+  showHistory?: boolean;
+  /** Optional host navigation, e.g. a Back to dashboard link. */
+  navigation?: React.ReactNode;
 }
 
-export function FrankieChatPage({
-  className,
-  style,
-  header,
-  footer,
-  emptyState,
-  renderMessage,
-  renderTool,
-  placeholder,
-  autoFocus,
-  ...providerProps
-}: FrankieChatPageProps) {
-  return (
-    <main
-      className={className}
-      style={{ height: "100dvh", minHeight: "100dvh", width: "100%", ...style }}
-    >
-      <FrankieProvider {...providerProps}>
-        <FrankieInline
-          header={header}
-          footer={footer}
-          emptyState={emptyState}
-          renderMessage={renderMessage}
-          renderTool={renderTool}
-          placeholder={placeholder}
-          autoFocus={autoFocus}
-        />
-      </FrankieProvider>
-    </main>
-  );
+function PageEmptyState() {
+  const { config } = useFrankie();
+  const { send, busy, restoring } = useFrankieChat();
+  const name = config?.branding.name ?? "Frankie";
+  return <section className="frankie-page-empty" aria-label="Start a conversation">
+    <span className="frankie-page-avatar" aria-hidden>{name.trim().slice(0, 1).toUpperCase()}</span>
+    <div><p className="frankie-page-kicker">Your product assistant</p><h1>How can I help?</h1><p>{config?.greeting ?? "Ask a question or choose a task to get started."}</p></div>
+    <div className="frankie-page-prompts">{config?.suggestedPrompts?.slice(0, 3).map(prompt => <button key={prompt} type="button" disabled={busy || restoring} onClick={() => void send(prompt)}><strong>{prompt}</strong><b aria-hidden>↗</b></button>)}</div>
+  </section>;
+}
+
+function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...panel }: Pick<FrankieChatPageProps, "header" | "footer" | "emptyState" | "renderMessage" | "renderTool" | "placeholder" | "autoFocus" | "navigation"> & { showHistory: boolean; currentId: string; onSelect: (id: string) => void; onNew: () => void }) {
+  const { client, config } = useFrankie();
+  const { busy } = useFrankieChat();
+  const theme = useFrankieTheme();
+  const [conversations, setConversations] = useState<ChatConversation[]>([]);
+  const [historyError, setHistoryError] = useState("");
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const dialog = useRef<HTMLDialogElement>(null);
+  const menu = useRef<HTMLButtonElement>(null);
+  const requestVersion = useRef(0);
+  const name = config?.branding.name ?? "Frankie";
+  const refresh = 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’t load. Check your sign-in and try again."); }
+    finally { if (version === requestVersion.current) setHistoryLoading(false); }
+  }, [client, showHistory, config?.allowAnonymous]);
+  useEffect(() => { if (!busy) void refresh(); return () => { requestVersion.current++; }; }, [refresh, busy]);
+  useEffect(() => {
+    const node = dialog.current;
+    if (drawerOpen) { node?.showModal?.(); }
+    else { node?.close?.(); }
+  }, [drawerOpen]);
+  const close = () => { setDrawerOpen(false); menu.current?.focus(); };
+  const select = (id: string) => { if (!busy) { onSelect(id); close(); } };
+  const history = <>
+    <div className="frankie-history-heading"><strong>Conversations</strong><button type="button" className="frankie-mobile-only" aria-label="Close conversations" onClick={close}><X size={18} /></button></div>
+    <button type="button" className="frankie-new-chat" disabled={busy} onClick={() => { onNew(); close(); }}><Plus size={17} />New chat</button>
+    <label className="frankie-history-search"><span>Search conversations</span><input type="search" placeholder="Search chats…" value={query} onChange={event => setQuery(event.target.value)} /></label>
+    <nav className="frankie-history-list" aria-label="Conversations">{conversations.filter(item => item.title.toLowerCase().includes(query.toLowerCase())).map(item => <button type="button" key={item.id} aria-current={item.id === currentId ? "page" : undefined} disabled={busy} onClick={() => select(item.id)}><span>{item.title}</span><small>{new Date(item.updatedAt).toLocaleDateString()}</small></button>)}</nav>
+    {historyLoading ? <p role="status">Loading history…</p> : historyError ? <p role="status">{historyError}<button type="button" onClick={() => void refresh()}>Try again</button></p> : !conversations.length ? <p>{config?.allowAnonymous ? "Sign in to sync conversations across devices." : "Your conversations will appear here."}</p> : null}
+    {navigation ? <div className="frankie-host-navigation">{navigation}</div> : null}
+  </>;
+  return <div className={"frankie-page-shell" + (resolveMode(theme?.mode) === "dark" ? " dark" : "")} style={themeToCssVars(theme)}>
+    {showHistory ? <aside className="frankie-history-desktop">{history}</aside> : null}
+    <div className="frankie-page-main">
+      <header className="frankie-page-header"><div>{showHistory ? <button type="button" className="frankie-mobile-only" ref={menu} aria-label="Open conversations" aria-haspopup="dialog" aria-expanded={drawerOpen} onClick={() => setDrawerOpen(true)}><Menu size={20} /></button> : null}<strong>{name}</strong><span className="frankie-header-caption">Product assistant</span></div><div>
+        <button type="button" disabled={busy} onClick={onNew} aria-label="Start a new conversation"><Plus size={16} /><span>New chat</span></button>
+        <details className="frankie-chat-settings"><summary aria-label="Chat settings"><Settings size={19} /></summary><div><strong>Chat settings</strong><p>History syncs automatically for signed-in users.</p><button type="button" onClick={() => void refresh()} disabled={historyLoading || !showHistory}><History size={16} />Refresh history</button><small>Skills are checked at the start of each message.</small></div></details>
+      </div></header>
+      <div className="frankie-page-canvas"><FrankieInline {...panel} header={panel.header ?? false} emptyState={panel.emptyState ?? <PageEmptyState />} /></div>
+    </div>
+    {showHistory ? <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(); }}><aside>{history}</aside></dialog> : null}
+  </div>;
+}
+
+/** Reusable product chat with one shared conversation state and scoped styling. */
+export function FrankieChatPage({ className, style, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus, showHistory = true, navigation, ...provider }: FrankieChatPageProps) {
+  const [id, setId] = useState(() => provider.conversationId ?? crypto.randomUUID());
+  const onNew = () => setId(crypto.randomUUID());
+  return <div className={["frankie-root", "frankie-chat-page", className].filter(Boolean).join(" ")} style={{ height: "100%", minHeight: "min(36rem, 100dvh)", width: "100%", ...style }}>
+    <FrankieProvider {...provider} conversationId={id} storageNamespace={(provider.storageNamespace ?? "frankie." + provider.publishableKey) + "." + id}>
+      <PageChrome showHistory={showHistory} navigation={navigation} currentId={id} onSelect={setId} onNew={onNew} header={header} footer={footer} emptyState={emptyState} renderMessage={renderMessage} renderTool={renderTool} placeholder={placeholder} autoFocus={autoFocus} />
+    </FrankieProvider>
+  </div>;
 }

package/src/components/chat/FrankieWidget.tsx

@@ -13,6 +13,8 @@ export interface FrankieWidgetProps extends ChatPanelProps {
   /** Distance from the viewport edges, in pixels. */
   offset?: number;
   defaultOpen?: boolean;
+  /** Host overlays should sit above the assistant. Override for your layer system. */
+  zIndex?: number;
   /** Controlled mode: pass both to drive open state from the host app. */
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -30,6 +32,7 @@ export function FrankieWidget({
   position = "bottom-right",
   offset = 24,
   defaultOpen = false,
+  zIndex = 20,
   open: controlledOpen,
   onOpenChange,
   renderLauncher,
@@ -63,11 +66,12 @@ export function FrankieWidget({
   return (
     <div
       className={cn("frankie-root frankie-widget", mode === "dark" && "dark")}
-      style={{ ...themeToCssVars(theme), position: "fixed", bottom: offset, ...side, zIndex: 2147483000 }}
+      style={{ ...themeToCssVars(theme), position: "fixed", bottom: offset, ...side, zIndex, pointerEvents: "none" }}
       data-frankie-mode={mode}
     >
       <div className={cn("flex flex-col gap-3", position === "bottom-left" ? "items-start" : "items-end")}>
-        {open ? <ChatPanel {...panelProps} onClose={() => setOpen(false)} autoFocus /> : null}
+        {open ? <div style={{ pointerEvents: "auto", maxHeight: "calc(100dvh - 100px)", overflow: "hidden" }}><ChatPanel {...panelProps} className={cn("frankie-widget-panel", panelProps.className)} onClose={() => setOpen(false)} autoFocus /></div> : null}
+        <div style={{ pointerEvents: "auto" }}>
         {renderLauncher ? (
           renderLauncher({ open, toggle: () => setOpen(!open), label })
         ) : (
@@ -81,7 +85,7 @@ export function FrankieWidget({
           >
             {open ? <X className="size-5" /> : <MessageCircle className="size-5" />}
           </Button>
-        )}
+        )}</div>
       </div>
     </div>
   );

package/src/hooks/FrankieProvider.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
+import { createContext, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import type { PublicWidgetConfig, WidgetTheme } from "@frankieai/core";
 import { FrankieClient, type FrankieClientOptions, type PageContext } from "../lib/client.js";
+import { FrankieChatContext, useFrankieChatState } from "./useFrankieChat.js";
 
 export interface FrankieProviderProps extends FrankieClientOptions {
   children: ReactNode;
@@ -29,10 +30,12 @@ export function FrankieProvider({
   config: providedConfig,
   ...clientOptions
 }: FrankieProviderProps) {
+  const tokenCallback = useRef(clientOptions.getUserToken);
+  tokenCallback.current = clientOptions.getUserToken;
   const client = useMemo(
-    () => new FrankieClient(clientOptions),
+    () => 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.baseUrl, clientOptions.publishableKey, clientOptions.storageNamespace, clientOptions.conversationId, clientOptions.persist, clientOptions.fetchImpl, Boolean(clientOptions.getUserToken)],
   );
 
   const [config, setConfig] = useState<PublicWidgetConfig | undefined>(providedConfig);
@@ -71,7 +74,12 @@ export function FrankieProvider({
     [client, config, configError, loading, context, theme],
   );
 
-  return <FrankieContext.Provider value={value}>{children}</FrankieContext.Provider>;
+  return <FrankieContext.Provider value={value}><ConversationState key={client.namespace + ":" + (client.conversationId ?? "")}>{children}</ConversationState></FrankieContext.Provider>;
+}
+
+function ConversationState({ children }: { children: ReactNode }) {
+  const chat = useFrankieChatState();
+  return <FrankieChatContext.Provider value={chat}>{children}</FrankieChatContext.Provider>;
 }
 
 export function useFrankie(): FrankieContextValue {

package/src/hooks/useFrankieChat.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { ChatAttachment } from "@frankieai/core";
+import { createContext, useContext, useCallback, useEffect, useRef, useState } from "react";
+import type { ChatAttachment, LoadedSkill } from "@frankieai/core";
 import { FrankieApiError } from "../lib/client.js";
 import {
   applyEvent,
@@ -19,6 +19,8 @@ export interface SendOptions {
 }
 
 export interface UseFrankieChatResult {
+  loadedSkills: LoadedSkill[] | null;
+  restoring: boolean;
   messages: ChatMessage[];
   /** True from the moment a message is sent until the turn ends. */
   busy: boolean;
@@ -34,14 +36,25 @@ export interface UseFrankieChatResult {
 let counter = 0;
 const nextId = (prefix: string) => `${prefix}_${Date.now().toString(36)}_${(counter += 1)}`;
 
+export const FrankieChatContext = createContext<UseFrankieChatResult | null>(null);
 export function useFrankieChat(): UseFrankieChatResult {
+  const value = useContext(FrankieChatContext);
+  if (!value) throw new Error("useFrankieChat requires FrankieProvider.");
+  return value;
+}
+
+export function useFrankieChatState(): UseFrankieChatResult {
   const { client, context } = useFrankie();
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | undefined>(undefined);
   const [restored, setRestored] = useState(false);
+  const [loadedSkills, setLoadedSkills] = useState<LoadedSkill[] | null>(null);
   const abortRef = useRef<AbortController | null>(null);
   const mounted = useRef(true);
+  // State updates can be batched while a stream is arriving. Keep the latest
+  // transcript synchronously so the final server sync cannot save a stale copy.
+  const messagesRef = useRef<ChatMessage[]>([]);
 
   useEffect(() => {
     mounted.current = true;
@@ -63,16 +76,23 @@ export function useFrankieChat(): UseFrankieChatResult {
         try {
           const raw = window.localStorage.getItem(storageKey);
           const stored = raw ? (JSON.parse(raw) as ChatMessage[]) : [];
-          if (Array.isArray(stored) && stored.length && active) setMessages(stored);
+          if (Array.isArray(stored) && stored.length && active) {
+            messagesRef.current = stored;
+            setMessages(stored);
+          }
         } catch {
           /* storage unavailable; server history can still restore */
         }
       }
       try {
         const remote = await client.resumeConversation();
-        if (active && remote?.messages.length) setMessages(remote.messages as ChatMessage[]);
+        if (active && remote?.messages.length) {
+          const restoredMessages = remote.messages as ChatMessage[];
+          messagesRef.current = restoredMessages;
+          setMessages(restoredMessages);
+        }
       } catch {
-        /* A new conversation does not exist remotely until its first message. */
+        if (active) setError("Could not restore this conversation. Check your sign-in and connection, then try opening it again.");
       } finally {
         if (active) setRestored(true);
       }
@@ -96,33 +116,36 @@ export function useFrankieChat(): UseFrankieChatResult {
   }, [messages, busy, client, storageKey, restored]);
 
   const patchAssistant = useCallback((id: string, update: (m: AssistantChatMessage) => AssistantChatMessage) => {
-    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: string, opts?: SendOptions) => {
       const trimmed = text.trim();
       const attachments = opts?.attachments ?? [];
-      if ((!trimmed && attachments.length === 0) || busy) return;
+      if ((!trimmed && attachments.length === 0) || abortRef.current || !restored) return;
       // The server needs a message; an attachment-only turn gets a stand-in.
       const outgoing = trimmed || "Please take a look at the attached file(s).";
 
       const assistantId = nextId("a");
       setError(undefined);
+      setLoadedSkills(null);
       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;
@@ -139,6 +162,7 @@ export function useFrankieChat(): UseFrankieChatResult {
             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;
@@ -175,17 +199,22 @@ export function useFrankieChat(): UseFrankieChatResult {
           patchAssistant(assistantId, (current) => ({ ...current, status: "error", error: message }));
         }
       } finally {
-        if (mounted.current) {
-          setBusy(false);
-          // A turn that ended without a `turn_end` event still has to settle.
-          patchAssistant(assistantId, (message) =>
-            message.status === "streaming" ? { ...message, status: "done" } : message,
-          );
+        // A turn that ended without a `turn_end` event still has to settle.
+        patchAssistant(assistantId, (message) =>
+          message.status === "streaming" ? { ...message, status: "done" } : message,
+        );
+        // Persist before send() resolves. This closes the previous gap where a
+        // route change or tab close could leave a server conversation with no
+        // rendered messages even though the agent transcript existed.
+        const transcript = messagesRef.current;
+        if (transcript.length) {
+          await client.syncConversation(transcript, conversationTitle(transcript)).catch(() => undefined);
         }
+        if (mounted.current) setBusy(false);
         abortRef.current = null;
       }
     },
-    [busy, client, context, patchAssistant],
+    [busy, client, context, patchAssistant, restored],
   );
 
   const stop = useCallback(() => abortRef.current?.abort(), []);
@@ -193,10 +222,12 @@ export function useFrankieChat(): UseFrankieChatResult {
   const reset = useCallback(() => {
     abortRef.current?.abort();
     client.resetSession();
+    messagesRef.current = [];
     setMessages([]);
     setError(undefined);
     setBusy(false);
     setRestored(true);
+    setLoadedSkills(null);
     try {
       if (client.persist) window.localStorage.removeItem(`${client.namespace}.messages`);
     } catch {
@@ -204,7 +235,7 @@ export function useFrankieChat(): UseFrankieChatResult {
     }
   }, [client]);
 
-  return { messages, busy, ...(error ? { error } : {}), send, stop, reset };
+  return { messages, busy, loadedSkills, restoring: !restored, ...(error ? { error } : {}), send, stop, reset };
 }
 
 

package/src/lib/client.ts

@@ -21,15 +21,15 @@ export interface FrankieClientOptions {
   publishableKey: string;
   /**
    * Fetches a short-lived JWT for the signed-in user from the host's own
-   * backend. Called once per session, and again when a session expires.
+   * backend. Called before each turn; return undefined after sign-out.
    * Omit only for tenants that allow anonymous chat.
    */
   getUserToken?: () => Promise<string | undefined> | string | undefined;
   fetchImpl?: typeof fetch;
   /**
    * Remember the session (and, in the hook, the transcript) in localStorage so a
-   * page reload resumes the same conversation. On by default in the browser;
-   * set false for an ephemeral chat that starts fresh every load.
+   * page reload resumes the same anonymous conversation. Authenticated chat
+   * never writes tokens or transcripts to localStorage; it uses server history.
    */
   persist?: boolean;
   /** Override localStorage namespace for session and transcript. */
@@ -59,11 +59,15 @@ export class FrankieClient {
   private readonly baseUrl: string;
   private readonly doFetch: typeof fetch;
   private session?: CreateSessionResponse;
+  private sessionUserToken?: string;
 
   constructor(private readonly options: FrankieClientOptions) {
     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 { /* storage may be unavailable */ }
+    }
   }
 
   get sessionId(): string | undefined {
@@ -76,7 +80,9 @@ export class FrankieClient {
 
   /** Whether this client persists across reloads (browser only, opt-out via `persist:false`). */
   get persist(): boolean {
-    return this.options.persist !== false && typeof window !== "undefined";
+    // Authenticated history comes from the identity-checked server. Do not leave
+    // a previous user's bearer token or transcript in shared browser storage.
+    return !this.options.getUserToken && this.options.persist !== false && typeof window !== "undefined";
   }
 
   /** localStorage namespace for this tenant/conversation, shared with the chat hook. */
@@ -115,15 +121,17 @@ export class FrankieClient {
   }
 
   async ensureSession(context?: PageContext): Promise<CreateSessionResponse> {
-    if (this.session && new Date(this.session.expiresAt).getTime() > Date.now() + 30_000) 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() + 30_000) 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 },
@@ -134,6 +142,7 @@ export class FrankieClient {
       }),
     });
     this.session = (await this.unwrap(response)) as CreateSessionResponse;
+    this.sessionUserToken = userToken;
     this.writeStored();
     return this.session;
   }
@@ -148,7 +157,7 @@ export class FrankieClient {
   }
 
   async resumeConversation(id = this.options.conversationId): Promise<{ messages: unknown[]; title: string } | undefined> {
-    if (!id) return undefined;
+    if (!id || !this.options.getUserToken) return undefined;
     const userToken = await this.requireUserToken();
     const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(id)}/resume`, {
       method: "POST",
@@ -157,6 +166,7 @@ export class FrankieClient {
     if (response.status === 404) return undefined;
     const body = (await this.unwrap(response)) as { session: CreateSessionResponse; messages?: unknown[]; title?: string };
     this.session = body.session;
+    this.sessionUserToken = userToken;
     this.writeStored();
     return { messages: Array.isArray(body.messages) ? body.messages : [], title: body.title ?? "New chat" };
   }