@frankieai/react 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frankieai/react",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Embeddable, themeable chat widget for the Frankie onboarding agent — shadcn/ui components, works with or without Tailwind in the host app.",
   "license": "MIT",
   "type": "module",

package/src/components/chat/FrankieChatPage.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
-import { History, Menu, Plus, Settings, X } from "lucide-react";
+import { ChevronsLeft, ChevronsRight, History, Menu, Plus, Settings, X } from "lucide-react";
 import type { FrankieProviderProps } 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 { FrankieApiError, type ChatConversation } from "../../lib/client.js";
 import { FrankieInline } from "./FrankieInline.js";
 import type { ChatPanelProps } from "./ChatPanel.js";
 
@@ -39,6 +39,10 @@ function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...pa
   const [historyError, setHistoryError] = useState("");
   const [historyLoading, setHistoryLoading] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [collapsed, setCollapsed] = useState(() => {
+    try { return window.localStorage.getItem("frankie.history-collapsed") === "1"; }
+    catch { return false; }
+  });
   const [query, setQuery] = useState("");
   const dialog = useRef<HTMLDialogElement>(null);
   const menu = useRef<HTMLButtonElement>(null);
@@ -48,10 +52,23 @@ function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...pa
     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."); }
+    catch (caught) {
+      if (version !== requestVersion.current) { /* superseded by a newer request */ }
+      else {
+        const message =
+          caught instanceof FrankieApiError ? caught.message
+          : caught instanceof Error && caught.message.startsWith("Frankie") ? caught.message
+          : "History couldn’t load. Check your sign-in and try again.";
+        setHistoryError(message);
+      }
+    }
     finally { if (version === requestVersion.current) setHistoryLoading(false); }
   }, [client, showHistory, config?.allowAnonymous]);
   useEffect(() => { if (!busy) void refresh(); return () => { requestVersion.current++; }; }, [refresh, busy]);
+  useEffect(() => {
+    try { window.localStorage.setItem("frankie.history-collapsed", collapsed ? "1" : "0"); }
+    catch { /* storage unavailable */ }
+  }, [collapsed]);
   useEffect(() => {
     const node = dialog.current;
     if (drawerOpen) { node?.showModal?.(); }
@@ -68,7 +85,10 @@ function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...pa
     {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}
+    {showHistory ? <aside className={"frankie-history-desktop" + (collapsed ? " frankie-history-collapsed" : "")}>
+      <button type="button" className="frankie-history-toggle" aria-label={collapsed ? "Expand conversations" : "Collapse conversations"} aria-expanded={!collapsed} onClick={() => setCollapsed(value => !value)}>{collapsed ? <ChevronsRight size={16} /> : <ChevronsLeft size={16} />}</button>
+      {collapsed ? null : 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 className="frankie-thread-title">{conversations.find(item => item.id === currentId)?.title ?? messages.find(message => message.role === "user")?.text ?? "New chat"}</strong></div><div>
         <button type="button" disabled={busy} onClick={onNew} aria-label="Start a new conversation"><Plus size={16} /><span>New chat</span></button>

package/src/hooks/useFrankieChat.ts

@@ -91,8 +91,16 @@ export function useFrankieChatState(): UseFrankieChatResult {
           messagesRef.current = restoredMessages;
           setMessages(restoredMessages);
         }
-      } catch {
-        if (active) setError("Could not restore this conversation. Check your sign-in and connection, then try opening it again.");
+      } catch (caught) {
+        if (active) {
+          const message =
+            caught instanceof FrankieApiError
+              ? caught.message
+              : caught instanceof Error && caught.message.startsWith("Frankie")
+                ? caught.message
+                : "Could not restore this conversation. Check your sign-in and connection, then try opening it again.";
+          setError(message);
+        }
       } finally {
         if (active) setRestored(true);
       }

package/src/styles/frankie.css

@@ -47,7 +47,11 @@
 @layer components {
   .frankie-page-shell { display:flex; flex:1; min-height:0; height:100%; background:var(--frankie-background); color:var(--frankie-foreground); }
   .frankie-page-main { display:flex; flex:1; min-width:0; min-height:0; flex-direction:column; }
-  .frankie-history-desktop { width:260px; flex-shrink:0; display:flex; flex-direction:column; gap:16px; padding:20px 14px; border-right:1px solid var(--frankie-border); background:var(--frankie-secondary); overflow:auto; }
+  .frankie-history-desktop { width:260px; flex-shrink:0; display:flex; flex-direction:column; gap:16px; padding:20px 14px; border-right:1px solid var(--frankie-border); background:var(--frankie-secondary); overflow:auto; transition:width .16s ease, padding .16s ease; }
+  .frankie-history-toggle { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:32px; height:32px; border:1px solid var(--frankie-border); border-radius:8px; background:var(--frankie-background); color:var(--frankie-muted-foreground); cursor:pointer; align-self:flex-end; }
+  .frankie-history-toggle:hover { color:var(--frankie-foreground); }
+  .frankie-history-collapsed { width:56px; padding:20px 8px; overflow:visible; }
+  .frankie-history-collapsed .frankie-history-toggle { align-self:center; }
   .frankie-history-heading { display:flex; align-items:center; justify-content:space-between; font-size:14px; }
   .frankie-new-chat { display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--frankie-border); border-radius:10px; background:var(--frankie-background); min-height:44px; font-weight:600; cursor:pointer; }
   .frankie-history-search > span { display:block; font-size:12px; color:var(--frankie-muted-foreground); margin-bottom:6px; }
@@ -381,6 +385,7 @@
 .frankie-root.frankie-chat-panel-fill .frankie-composer button[aria-label="Send"],.frankie-root.frankie-chat-panel-fill .frankie-composer button[aria-label="Stop"] { margin-left:auto; width:42px; height:42px; border-radius:50%; background:var(--frankie-primary); color:var(--frankie-primary-foreground); border:0; }
 .frankie-root.frankie-chat-panel-fill .frankie-composer button[aria-label="Attach files"] { width:42px; height:42px; border-radius:50%; }
 .frankie-root .frankie-history-desktop { width:290px; background:var(--frankie-background); padding:20px 12px; }
+.frankie-root .frankie-history-collapsed { width:56px; padding:20px 8px; }
 .frankie-root .frankie-new-chat { justify-content:flex-start; border:0; background:transparent; padding:8px 12px; font-size:15px; }
 .frankie-root .frankie-history-heading { font-size:12px; font-weight:400; color:var(--frankie-muted-foreground); padding:0 12px; }
 .frankie-root .frankie-history-list button { min-height:44px; padding:10px 12px; }

package/src/widget.test.tsx

@@ -1,8 +1,9 @@
-import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { FrankieServerEvent, PublicWidgetConfig } from "@frankieai/core";
 import { FrankieProvider } from "./hooks/FrankieProvider.jsx";
 import { ChatPanel } from "./components/chat/ChatPanel.js";
+import { FrankieChatPage } from "./components/chat/FrankieChatPage.js";
 import { Markdown } from "./components/chat/Markdown.js";
 import { FrankieClient, readEventStream } from "./lib/client.js";
 import { applyEvent, newAssistantMessage } from "./lib/messages.js";
@@ -282,3 +283,35 @@ describe("ChatPanel", () => {
     expect(root.classList.contains("dark")).toBe(true);
   });
 });
+
+describe("FrankieChatPage", () => {
+  it("collapses and expands the desktop conversations sidebar, remembering the choice", async () => {
+    cleanup();
+    window.localStorage.clear();
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => String(url).endsWith("/v1/session") ? Response.json({ sessionId: "page", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: true } }) : new Response(sseStream([{ type: "turn_end", stopReason: "end_turn" }])));
+    const { container } = render(<FrankieChatPage publishableKey="pk_page_fixture" config={config} fetchImpl={fetchImpl} persist={false} />);
+    const aside = () => container.querySelector(".frankie-history-desktop") as HTMLElement;
+    await waitFor(() => expect(within(aside()).getByText("Conversations")).toBeTruthy());
+    fireEvent.click(within(aside()).getByRole("button", { name: "Collapse conversations" }));
+    expect(within(aside()).queryByText("Conversations")).toBeNull();
+    expect(aside().classList.contains("frankie-history-collapsed")).toBe(true);
+    expect(window.localStorage.getItem("frankie.history-collapsed")).toBe("1");
+    fireEvent.click(within(aside()).getByRole("button", { name: "Expand conversations" }));
+    expect(within(aside()).getByText("Conversations")).toBeTruthy();
+    expect(aside().classList.contains("frankie-history-collapsed")).toBe(false);
+    expect(window.localStorage.getItem("frankie.history-collapsed")).toBe("0");
+    cleanup();
+  });
+
+  it("starts collapsed when a prior visit left the sidebar collapsed", async () => {
+    cleanup();
+    window.localStorage.setItem("frankie.history-collapsed", "1");
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => String(url).endsWith("/v1/session") ? Response.json({ sessionId: "page-2", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: true } }) : new Response(sseStream([{ type: "turn_end", stopReason: "end_turn" }])));
+    const { container } = render(<FrankieChatPage publishableKey="pk_page_fixture_2" config={config} fetchImpl={fetchImpl} persist={false} />);
+    const aside = () => container.querySelector(".frankie-history-desktop") as HTMLElement;
+    await waitFor(() => expect(within(aside()).getByRole("button", { name: "Expand conversations" })).toBeTruthy());
+    expect(within(aside()).queryByText("Conversations")).toBeNull();
+    window.localStorage.clear();
+    cleanup();
+  });
+});