@frankieai/react 0.1.4 → 0.1.5

package/dist/index.js

@@ -354,6 +354,7 @@ function useFrankieChat() {
   const [restored, setRestored] = useState2(false);
   const abortRef = useRef(null);
   const mounted = useRef(true);
+  const messagesRef = useRef([]);
   useEffect2(() => {
     mounted.current = true;
     return () => {
@@ -369,13 +370,20 @@ function useFrankieChat() {
         try {
           const raw = window.localStorage.getItem(storageKey);
           const stored = raw ? JSON.parse(raw) : [];
-          if (Array.isArray(stored) && stored.length && active) setMessages(stored);
+          if (Array.isArray(stored) && stored.length && active) {
+            messagesRef.current = stored;
+            setMessages(stored);
+          }
         } catch {
         }
       }
       try {
         const remote = await client.resumeConversation();
-        if (active && remote?.messages.length) setMessages(remote.messages);
+        if (active && remote?.messages.length) {
+          const restoredMessages = remote.messages;
+          messagesRef.current = restoredMessages;
+          setMessages(restoredMessages);
+        }
       } catch {
       } finally {
         if (active) setRestored(true);
@@ -396,11 +404,11 @@ function useFrankieChat() {
     if (messages.length) void client.syncConversation(messages, conversationTitle(messages)).catch(() => void 0);
   }, [messages, busy, client, storageKey, restored]);
   const patchAssistant = useCallback((id, update) => {
-    setMessages(
-      (current) => current.map(
-        (message) => message.id === id && message.role === "assistant" ? update(message) : message
-      )
+    const next = messagesRef.current.map(
+      (message) => message.id === id && message.role === "assistant" ? update(message) : message
     );
+    messagesRef.current = next;
+    setMessages(next);
   }, []);
   const send = useCallback(
     async (text, opts) => {
@@ -411,15 +419,17 @@ function useFrankieChat() {
       const assistantId = nextId("a");
       setError(void 0);
       setBusy(true);
-      setMessages((current) => [
-        ...current,
+      const next = [
+        ...messagesRef.current,
         newUserMessage(
           nextId("u"),
           trimmed,
           attachments.map((file) => ({ name: file.name, mimeType: file.mimeType }))
         ),
         newAssistantMessage(assistantId)
-      ]);
+      ];
+      messagesRef.current = next;
+      setMessages(next);
       const abort = new AbortController();
       abortRef.current = abort;
       try {
@@ -460,13 +470,15 @@ function useFrankieChat() {
           patchAssistant(assistantId, (current) => ({ ...current, status: "error", error: message }));
         }
       } finally {
-        if (mounted.current) {
-          setBusy(false);
-          patchAssistant(
-            assistantId,
-            (message) => message.status === "streaming" ? { ...message, status: "done" } : message
-          );
+        patchAssistant(
+          assistantId,
+          (message) => message.status === "streaming" ? { ...message, status: "done" } : message
+        );
+        const transcript = messagesRef.current;
+        if (transcript.length) {
+          await client.syncConversation(transcript, conversationTitle(transcript)).catch(() => void 0);
         }
+        if (mounted.current) setBusy(false);
         abortRef.current = null;
       }
     },
@@ -476,6 +488,7 @@ function useFrankieChat() {
   const reset = useCallback(() => {
     abortRef.current?.abort();
     client.resetSession();
+    messagesRef.current = [];
     setMessages([]);
     setError(void 0);
     setBusy(false);
@@ -1244,7 +1257,63 @@ function FrankieInline({ className, style, ...panelProps }) {
 }
 
 // src/components/chat/FrankieChatPage.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+function PageEmptyState() {
+  const { config } = useFrankie();
+  const { send, busy } = useFrankieChat();
+  const name = config?.branding.name ?? "Frankie";
+  const prompts = config?.suggestedPrompts?.slice(0, 3) ?? [];
+  return /* @__PURE__ */ jsxs6("section", { className: "frankie-page-empty", "aria-label": "Start a conversation", children: [
+    /* @__PURE__ */ jsx16("span", { className: "frankie-page-avatar", "aria-hidden": true, children: name.trim().slice(0, 1).toUpperCase() }),
+    /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsxs6("p", { className: "frankie-page-kicker", children: [
+        name,
+        " assistant"
+      ] }),
+      /* @__PURE__ */ jsx16("h1", { children: "What would you like to do?" }),
+      /* @__PURE__ */ jsx16("p", { children: config?.greeting ?? "Ask a question or choose a task to get started." })
+    ] }),
+    prompts.length ? /* @__PURE__ */ jsx16("div", { className: "frankie-page-prompts", children: prompts.map((prompt, index) => /* @__PURE__ */ jsxs6("button", { type: "button", disabled: busy, onClick: () => send(prompt), children: [
+      /* @__PURE__ */ jsx16("span", { children: String(index + 1).padStart(2, "0") }),
+      /* @__PURE__ */ jsx16("strong", { children: prompt }),
+      /* @__PURE__ */ jsx16("b", { "aria-hidden": true, children: "\u2197" })
+    ] }, prompt)) }) : null
+  ] });
+}
+function PageChrome({
+  header,
+  footer,
+  emptyState,
+  renderMessage,
+  renderTool,
+  placeholder,
+  autoFocus
+}) {
+  const { config } = useFrankie();
+  const { reset } = useFrankieChat();
+  const name = config?.branding.name ?? "Frankie";
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsxs6("header", { className: "frankie-page-header", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx16("span", { className: "frankie-page-status", "aria-hidden": true }),
+        /* @__PURE__ */ jsx16("strong", { children: name })
+      ] }),
+      /* @__PURE__ */ jsx16("button", { type: "button", onClick: reset, "aria-label": "Start a new conversation", children: "New chat" })
+    ] }),
+    /* @__PURE__ */ jsx16("div", { className: "frankie-page-canvas", children: /* @__PURE__ */ jsx16(
+      FrankieInline,
+      {
+        header: header ?? false,
+        footer,
+        emptyState: emptyState ?? /* @__PURE__ */ jsx16(PageEmptyState, {}),
+        renderMessage,
+        renderTool,
+        placeholder,
+        autoFocus
+      }
+    ) })
+  ] });
+}
 function FrankieChatPage({
   className,
   style,
@@ -1260,10 +1329,10 @@ function FrankieChatPage({
   return /* @__PURE__ */ jsx16(
     "main",
     {
-      className,
+      className: ["frankie-root", "frankie-chat-page", className].filter(Boolean).join(" "),
       style: { height: "100dvh", minHeight: "100dvh", width: "100%", ...style },
       children: /* @__PURE__ */ jsx16(FrankieProvider, { ...providerProps, children: /* @__PURE__ */ jsx16(
-        FrankieInline,
+        PageChrome,
         {
           header,
           footer,