@frankieai/react 0.1.4 → 0.1.5

package/src/components/chat/FrankieChatPage.tsx

@@ -2,14 +2,11 @@
 
 import type { CSSProperties } from "react";
 import type { FrankieProviderProps } from "../../hooks/FrankieProvider.jsx";
-import { FrankieProvider } from "../../hooks/FrankieProvider.jsx";
+import { FrankieProvider, useFrankie } from "../../hooks/FrankieProvider.jsx";
+import { useFrankieChat } from "../../hooks/useFrankieChat.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<
@@ -20,6 +17,77 @@ export interface FrankieChatPageProps
   style?: CSSProperties;
 }
 
+function PageEmptyState() {
+  const { config } = useFrankie();
+  const { send, busy } = 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>
+  );
+}
+
+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>
+    </>
+  );
+}
+
+/**
+ * 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,
@@ -34,11 +102,11 @@ export function FrankieChatPage({
 }: FrankieChatPageProps) {
   return (
     <main
-      className={className}
+      className={["frankie-root", "frankie-chat-page", className].filter(Boolean).join(" ")}
       style={{ height: "100dvh", minHeight: "100dvh", width: "100%", ...style }}
     >
       <FrankieProvider {...providerProps}>
-        <FrankieInline
+        <PageChrome
           header={header}
           footer={footer}
           emptyState={emptyState}

package/src/hooks/useFrankieChat.ts

@@ -42,6 +42,9 @@ export function useFrankieChat(): UseFrankieChatResult {
   const [restored, setRestored] = useState(false);
   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,14 +66,21 @@ 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. */
       } finally {
@@ -96,11 +106,11 @@ 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(
@@ -114,15 +124,17 @@ export function useFrankieChat(): UseFrankieChatResult {
       const assistantId = nextId("a");
       setError(undefined);
       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;
@@ -175,13 +187,18 @@ 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;
       }
     },
@@ -193,6 +210,7 @@ export function useFrankieChat(): UseFrankieChatResult {
   const reset = useCallback(() => {
     abortRef.current?.abort();
     client.resetSession();
+    messagesRef.current = [];
     setMessages([]);
     setError(undefined);
     setBusy(false);

package/src/styles/frankie.css

@@ -164,3 +164,164 @@
     padding: 0;
   }
 }
+
+
+@layer components {
+  .frankie-chat-page {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    overflow: hidden;
+    background:
+      radial-gradient(60rem 24rem at 50% -12rem, color-mix(in srgb, var(--frankie-primary) 8%, transparent), transparent 65%),
+      var(--frankie-background);
+    color: var(--frankie-foreground);
+  }
+
+  .frankie-page-header {
+    display: flex;
+    min-height: 56px;
+    flex: 0 0 56px;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 0 24px;
+    border-bottom: 1px solid var(--frankie-border);
+    background: color-mix(in srgb, var(--frankie-background) 92%, transparent);
+    backdrop-filter: blur(18px);
+  }
+
+  .frankie-page-header > div {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .frankie-page-header strong { font-size: 0.925rem; font-weight: 650; }
+
+  .frankie-page-status {
+    width: 10px;
+    height: 10px;
+    border-radius: 999px;
+    background: var(--frankie-primary);
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--frankie-primary) 16%, transparent);
+  }
+
+  .frankie-page-header button {
+    min-height: 36px;
+    padding: 0 13px;
+    border: 1px solid var(--frankie-border);
+    border-radius: calc(var(--frankie-radius) * .9);
+    background: var(--frankie-secondary);
+    cursor: pointer;
+  }
+
+  .frankie-page-header button:hover { border-color: var(--frankie-primary); }
+
+  .frankie-page-canvas {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+  }
+
+  .frankie-page-canvas > .frankie-inline {
+    width: 100%;
+    max-width: 56rem;
+    margin: 0 auto;
+  }
+
+  .frankie-page-canvas .frankie-scroll { padding: 2rem clamp(1rem, 4vw, 4rem) 1.25rem; }
+  .frankie-page-canvas .frankie-root > .border-t {
+    padding: .75rem clamp(1rem, 4vw, 4rem) 1.5rem;
+    border-top: 0;
+    background: linear-gradient(180deg, transparent, var(--frankie-background) 30%);
+  }
+
+  .frankie-page-empty {
+    display: flex;
+    width: min(100%, 38rem);
+    min-height: 100%;
+    margin: auto;
+    padding: clamp(2rem, 7vh, 4.5rem) 1rem 2rem;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    text-align: center;
+  }
+
+  .frankie-page-avatar {
+    display: grid;
+    width: 48px;
+    height: 48px;
+    place-items: center;
+    border-radius: calc(var(--frankie-radius) * 1.4);
+    background: var(--frankie-primary);
+    color: var(--frankie-primary-foreground);
+    font-weight: 750;
+  }
+
+  .frankie-page-kicker {
+    margin: 0 0 .4rem;
+    color: var(--frankie-primary);
+    font-size: .7rem;
+    font-weight: 750;
+    letter-spacing: .1em;
+    text-transform: uppercase;
+  }
+
+  .frankie-page-empty h1 {
+    margin: 0;
+    font-size: clamp(1.65rem, 4vw, 2.15rem);
+    line-height: 1.08;
+    letter-spacing: -.045em;
+  }
+
+  .frankie-page-empty h1 + p {
+    margin: .6rem auto 0;
+    max-width: 30rem;
+    color: var(--frankie-muted-foreground);
+  }
+
+  .frankie-page-prompts {
+    display: grid;
+    width: 100%;
+    gap: .55rem;
+    margin-top: .4rem;
+  }
+
+  .frankie-page-prompts button {
+    display: grid;
+    min-height: 60px;
+    grid-template-columns: 2rem minmax(0, 1fr) auto;
+    align-items: center;
+    gap: .65rem;
+    padding: .75rem .9rem;
+    border: 1px solid var(--frankie-border);
+    border-radius: calc(var(--frankie-radius) * 1.25);
+    background: var(--frankie-secondary);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .frankie-page-prompts button:hover {
+    border-color: color-mix(in srgb, var(--frankie-primary) 58%, var(--frankie-border));
+    transform: translateY(-1px);
+  }
+
+  .frankie-page-prompts button > span {
+    color: var(--frankie-muted-foreground);
+    font-size: .68rem;
+    font-weight: 700;
+  }
+
+  .frankie-page-prompts button > strong { font-size: .875rem; }
+  .frankie-page-prompts button > b { color: var(--frankie-primary); font-size: 1rem; }
+
+  @media (max-width: 640px) {
+    .frankie-page-header { min-height: 52px; flex-basis: 52px; padding: 0 12px; }
+    .frankie-page-canvas .frankie-scroll { padding: 1.25rem .75rem .5rem; }
+    .frankie-page-canvas .frankie-root > .border-t { padding: .65rem .75rem calc(.65rem + env(safe-area-inset-bottom)); }
+  }
+}