@frankieai/react 0.1.5 → 0.2.1

package/src/components/chat/AgentContext.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { ArrowUpRight, Sparkles } from "lucide-react";
+import { useFrankie } from "../../hooks/FrankieProvider.jsx";
+import { useFrankieChat } from "../../hooks/useFrankieChat.js";
+
+/** Reports server-confirmed skills for the current turn; never implies drafts are active. */
+export function AgentContext() {
+  const { loading, configError } = useFrankie();
+  const { loadedSkills, busy, restoring, error } = useFrankieChat();
+  const status = configError || error ? "Unavailable" : loading || restoring ? "Connecting" : busy && loadedSkills === null ? "Checking" : loadedSkills?.length ? "Active" : loadedSkills ? "Tools only" : "Ready";
+  return <div className="frankie-agent-context-wrap">
+    <details className="frankie-agent-context">
+      <summary aria-label="Agent context"><Sparkles size={17} aria-hidden="true" /><span>Agent context</span><span className="frankie-context-count">{loadedSkills === null ? "Not checked" : `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"}`}</span><span className="frankie-context-status" data-active={status === "Active"}><i aria-hidden="true" />{status}</span><ArrowUpRight size={15} aria-hidden="true" /></summary>
+      <div className="frankie-context-detail">
+        <strong>{loadedSkills === null ? "Skills are checked when you send a message" : loadedSkills.length ? `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"} loaded` : "No skills loaded for this turn"}</strong>
+        {loadedSkills?.length ? <ul>{loadedSkills.map(skill => <li key={skill.id}><span>{skill.name}</span><small>v{skill.revision}</small></li>)}</ul> : <p>Frankie can use the tools approved for this workspace. Drafts and skills without available tools are not loaded.</p>}
+        <p>Published skills and updates are checked on every message. Only approved, available tools can run.</p>
+      </div>
+    </details>
+    <span className="frankie-sr-only" role="status">{loadedSkills === null ? status : `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"} loaded. ${status}.`}</span>
+  </div>;
+}

package/src/components/chat/ChatPanel.tsx

@@ -11,6 +11,7 @@ import { Avatar } from "../ui/avatar.js";
 import { Button } from "../ui/button.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../ui/card.js";
 import { ScrollArea } from "../ui/scroll-area.js";
+import { AgentContext } from "./AgentContext.js";
 import { Composer } from "./Composer.js";
 import { MessageBubble } from "./MessageBubble.js";
 import { SuggestedPrompts } from "./SuggestedPrompts.js";
@@ -49,7 +50,7 @@ export function ChatPanel({
 }: ChatPanelProps) {
   const { config, configError, loading } = useFrankie();
   const theme = useFrankieTheme();
-  const { messages, busy, error, send, stop, reset } = useFrankieChat();
+  const { messages, busy, restoring, error, send, stop, reset } = useFrankieChat();
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const features = config?.features;
@@ -70,7 +71,8 @@ export function ChatPanel({
   return (
     <Card
       className={cn(
-        "frankie-root",
+        "frankie-root frankie-chat-panel",
+        fill && "frankie-chat-panel-fill",
         fill ? "h-full w-full rounded-none border-0 shadow-none" : "h-[32rem] w-[22rem] max-w-[calc(100vw-2rem)]",
         mode === "dark" && "dark",
         className,
@@ -98,8 +100,9 @@ export function ChatPanel({
         </CardHeader>
       )}
 
-      <CardContent>
-        <ScrollArea ref={scrollRef} className="flex h-full flex-col gap-4 p-4" aria-live="polite">
+      <AgentContext />
+      <CardContent className="frankie-conversation-content">
+        <ScrollArea ref={scrollRef} className="frankie-transcript flex h-full flex-col gap-4 p-4" aria-live="polite">
           {configError ? (
             <div className="frankie-config-error" role="alert">
               <strong>Frankie couldn’t start</strong>
@@ -116,7 +119,7 @@ export function ChatPanel({
               </div>
             ))
           ) : (
-            <div className="flex flex-col gap-4">
+            <div className="frankie-message-list flex flex-col gap-4">
               {messages.map((message) =>
                 renderMessage ? (
                   <div key={message.id}>{renderMessage(message)}</div>
@@ -136,14 +139,14 @@ export function ChatPanel({
         </ScrollArea>
       </CardContent>
 
-      <CardFooter className="flex flex-col gap-2">
+      <CardFooter className="frankie-composer-footer flex flex-col gap-2">
         {error ? <p className="w-full text-xs text-red-600 dark:text-red-400">{error}</p> : null}
         <div className="w-full">
           <Composer
             onSend={send}
             onStop={stop}
             busy={busy}
-            disabled={Boolean(configError)}
+            disabled={loading || restoring || Boolean(configError)}
             {...(placeholder ? { placeholder } : {})}
             {...(autoFocus ? { autoFocus } : {})}
             {...(features?.attachments.enabled ? { attachments: features.attachments } : {})}

package/src/components/chat/Composer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowUp, Paperclip, Square, X } from "lucide-react";
+import { ArrowUp, Paperclip, Plus, Square, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type KeyboardEvent } from "react";
 import type { ChatAttachment } from "@frankieai/core";
 import { Button } from "../ui/button.js";
@@ -107,7 +107,7 @@ export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocu
   }, [busy, disabled, files, modelPicker?.value, onSend, value]);
 
   const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key === "Enter" && !event.shiftKey) {
+    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
       event.preventDefault();
       submit();
     }
@@ -117,7 +117,7 @@ export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocu
 
   return (
     <form
-      className="flex flex-col gap-2"
+      className="frankie-composer flex flex-col gap-2"
       onSubmit={(event) => {
         event.preventDefault();
         submit();
@@ -147,7 +147,7 @@ export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocu
 
       {fileError ? <p className="text-xs text-red-600 dark:text-red-400">{fileError}</p> : null}
 
-      <div className="flex items-end gap-2">
+      <div className="frankie-composer-controls flex items-end gap-2">
         {canAttach ? (
           <>
             <input
@@ -170,7 +170,7 @@ export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocu
               aria-label="Attach files"
               title="Attach files"
             >
-              <Paperclip />
+              <Plus />
             </Button>
           </>
         ) : null}
@@ -236,3 +236,4 @@ function readAsBase64(file: File): Promise<string> {
     reader.readAsDataURL(file);
   });
 }
+

package/src/components/chat/FrankieChatPage.tsx

@@ -1,121 +1,92 @@
 "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, useFrankie } 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";
 
-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;
 }
 
 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 (
-    <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">{name} assistant</p>
-        <h1>What would you like to do?</h1>
-        <p>{config?.greeting ?? "Ask a question or choose a task to get started."}</p>
-      </div>
-      {prompts.length ? (
-        <div className="frankie-page-prompts">
-          {prompts.map((prompt, index) => (
-            <button key={prompt} type="button" disabled={busy} onClick={() => send(prompt)}>
-              <span>{String(index + 1).padStart(2, "0")}</span>
-              <strong>{prompt}</strong>
-              <b aria-hidden>↗</b>
-            </button>
-          ))}
-        </div>
-      ) : null}
-    </section>
-  );
+  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({
-  header,
-  footer,
-  emptyState,
-  renderMessage,
-  renderTool,
-  placeholder,
-  autoFocus,
-}: Pick<FrankieChatPageProps, "header" | "footer" | "emptyState" | "renderMessage" | "renderTool" | "placeholder" | "autoFocus">) {
-  const { config } = useFrankie();
-  const { reset } = useFrankieChat();
-  const name = config?.branding.name ?? "Frankie";
-
-  return (
-    <>
-      <header className="frankie-page-header">
-        <div>
-          <span className="frankie-page-status" aria-hidden />
-          <strong>{name}</strong>
-        </div>
-        <button type="button" onClick={reset} aria-label="Start a new conversation">New chat</button>
-      </header>
-      <div className="frankie-page-canvas">
-        <FrankieInline
-          header={header ?? false}
-          footer={footer}
-          emptyState={emptyState ?? <PageEmptyState />}
-          renderMessage={renderMessage}
-          renderTool={renderTool}
-          placeholder={placeholder}
-          autoFocus={autoFocus}
-        />
-      </div>
-    </>
-  );
+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, messages } = 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 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 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>
+        <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>;
 }
 
-/**
- * A complete, polished chat route matching Frankie's own conversation canvas.
- * The shell, header, empty state and composer are all scoped under
- * `.frankie-root`, so host application styles remain untouched.
- */
-export function FrankieChatPage({
-  className,
-  style,
-  header,
-  footer,
-  emptyState,
-  renderMessage,
-  renderTool,
-  placeholder,
-  autoFocus,
-  ...providerProps
-}: FrankieChatPageProps) {
-  return (
-    <main
-      className={["frankie-root", "frankie-chat-page", className].filter(Boolean).join(" ")}
-      style={{ height: "100dvh", minHeight: "100dvh", width: "100%", ...style }}
-    >
-      <FrankieProvider {...providerProps}>
-        <PageChrome
-          header={header}
-          footer={footer}
-          emptyState={emptyState}
-          renderMessage={renderMessage}
-          renderTool={renderTool}
-          placeholder={placeholder}
-          autoFocus={autoFocus}
-        />
-      </FrankieProvider>
-    </main>
-  );
+/** 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/components/chat/MessageBubble.tsx

@@ -26,7 +26,7 @@ export function MessageBubble({
 }: MessageBubbleProps) {
   if (message.role === "user") {
     return (
-      <div className="flex flex-col items-end gap-1">
+      <div className="frankie-user-message flex flex-col items-end gap-1">
         {message.attachments?.length ? (
           <div className="flex max-w-[85%] flex-wrap justify-end gap-1">
             {message.attachments.map((file, index) => (
@@ -42,7 +42,7 @@ export function MessageBubble({
         ) : null}
         {message.text ? (
           <div className="flex max-w-[85%] items-end gap-1">
-            <div className="rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground">{message.text}</div>
+            <div className="frankie-user-bubble rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground">{message.text}</div>
             <MessageCopyButton text={message.text} />
           </div>
         ) : null}
@@ -53,12 +53,12 @@ export function MessageBubble({
   const empty = message.text.length === 0 && message.tools.length === 0;
 
   return (
-    <div className="flex gap-2">
+    <div className="frankie-assistant-message flex gap-2">
       <div className="frankie-assistant-actions mt-0.5 flex shrink-0 flex-col items-center gap-1">
         <Avatar {...(avatarUrl ? { src: avatarUrl } : {})} name={assistantName} />
         {message.text ? <MessageCopyButton text={message.text} /> : null}
       </div>
-      <div className="min-w-0 max-w-[85%]">
+      <div className="frankie-assistant-content min-w-0 max-w-[85%]">
         {message.status === "error" ? (
           <p className="rounded-[var(--frankie-radius)] bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400">
             {message.error}
@@ -90,7 +90,8 @@ function MessageCopyButton({ text }: { text: string }) {
 
 export function TypingDots() {
   return (
-    <span className="inline-flex items-center gap-1 py-2" role="status" aria-label="Thinking">
+    <span className="frankie-thinking inline-flex items-center gap-1 py-2" role="status" aria-label="Thinking">
+      <span className="frankie-thinking-label">Thinking</span>
       {[0, 1, 2].map((index) => (
         <span
           key={index}
@@ -101,3 +102,4 @@ export function TypingDots() {
     </span>
   );
 }
+

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,12 +36,20 @@ 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
@@ -82,7 +92,7 @@ export function useFrankieChat(): UseFrankieChatResult {
           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);
       }
@@ -117,12 +127,13 @@ export function useFrankieChat(): UseFrankieChatResult {
     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);
       const next = [
         ...messagesRef.current,
@@ -151,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;
@@ -202,7 +214,7 @@ export function useFrankieChat(): UseFrankieChatResult {
         abortRef.current = null;
       }
     },
-    [busy, client, context, patchAssistant],
+    [busy, client, context, patchAssistant, restored],
   );
 
   const stop = useCallback(() => abortRef.current?.abort(), []);
@@ -215,6 +227,7 @@ export function useFrankieChat(): UseFrankieChatResult {
     setError(undefined);
     setBusy(false);
     setRestored(true);
+    setLoadedSkills(null);
     try {
       if (client.persist) window.localStorage.removeItem(`${client.namespace}.messages`);
     } catch {
@@ -222,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 };
 }