@drawnagency/primitives 0.1.88 → 0.1.90

package/src/components/chat/ChatPanel.tsx

@@ -1,14 +1,30 @@
 import { useEffect, useRef, useState, type KeyboardEvent, type MouseEvent } from "react";
 import { marked } from "marked";
+import { ArrowDown, ChevronDown, ChevronRight, History, Pin, PinOff, SquarePen, Square, Trash2 } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { ensureSanitizer, sanitizeHtml } from "../../lib/sanitize";
+import { resolveThinkingPhrases } from "../../lib/chatbot";
+import { loadHistory, upsertConversation, setConversationPinned, removeConversation, type StoredConversation } from "./chat-history";
 import { Select } from "../shared/Select";
 import { IconButton } from "../shared/IconButton";
 import { RemoveIcon } from "../shared/icons";
 
 export interface ChatMessage { role: "user" | "assistant"; content: string }
 
+/** How the conversation is framed on screen:
+ *  - "floating": the compact anchored panel (/edit FAB + settings test chat)
+ *  - "docked":   full-height right sidebar (viewer, >=768px)
+ *  - "sheet":    bottom sheet (viewer, phones) */
+export type ChatPanelMode = "floating" | "docked" | "sheet";
+
 const SESSION_KEY = "bp-chat-session";
+const MESSAGES_KEY = "bp-chat-messages";
+const CONVO_ID_KEY = "bp-chat-convo-id";
+const STORED_MESSAGE_CAP = 40;
+/** Distance (px) from the bottom of the transcript within which auto-scroll
+ *  stays engaged. Generous on purpose: a single wheel tick travels ~100px and
+ *  must not silently disengage the pin. */
+const PIN_THRESHOLD = 160;
 
 function sessionId(): string {
   let id = window.localStorage.getItem(SESSION_KEY);
@@ -19,12 +35,31 @@ function sessionId(): string {
   return id;
 }
 
+/** Conversation persistence (viewer modes only): internal links open in the
+ *  same tab, so the transcript must survive page navigation. sessionStorage —
+ *  per-tab, cleared when the visit ends. */
+function loadStoredMessages(): ChatMessage[] {
+  try {
+    const parsed: unknown = JSON.parse(window.sessionStorage.getItem(MESSAGES_KEY) ?? "[]");
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .filter((m): m is ChatMessage =>
+        !!m && typeof m === "object" &&
+        ((m as ChatMessage).role === "user" || (m as ChatMessage).role === "assistant") &&
+        typeof (m as ChatMessage).content === "string")
+      .slice(-STORED_MESSAGE_CAP);
+  } catch {
+    return [];
+  }
+}
+
 const ERROR_COPY: Record<string, string> = {
   rate_limited: "You've hit the message limit — try again in a minute.",
   disabled: "Chat isn't available right now.",
   not_authorized: "You don't have access to chat on this site.",
   upstream_error: "Something went wrong — please try again.",
 };
+const RETRYABLE = new Set(["rate_limited", "upstream_error"]);
 
 /** Assistant markdown → sanitized HTML. Callers MUST gate on the sanitizer
  *  having loaded (`mdReady`) — before then sanitizeHtml passes raw HTML
@@ -34,7 +69,7 @@ export function assistantHtml(md: string): string {
 }
 
 // Tailwind preflight makes h1–h6 inherit size/weight, so headings only need
-// weight + spacing to clamp to the bubble's text scale.
+// weight + spacing to clamp to the message's text scale.
 const MD_STYLES =
   "[&_p:not(:first-child)]:mt-2 [&_ul]:mt-1 [&_ul]:list-disc [&_ul]:pl-4 " +
   "[&_ol]:mt-1 [&_ol]:list-decimal [&_ol]:pl-4 [&_li:not(:first-child)]:mt-1 " +
@@ -49,12 +84,14 @@ const MD_STYLES =
 export async function streamChat(
   body: { messages: ChatMessage[]; sessionId: string; taskId?: string; draftChatbot?: unknown; simulateAudience?: string },
   onText: (text: string) => void,
+  signal?: AbortSignal,
 ): Promise<{ ok: true; truncated: boolean } | { ok: false; error: string; retryAfterMs?: number }> {
   try {
     const res = await fetch("/api/chat", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(body),
+      signal,
     });
     if (!res.ok || !res.body) {
       const err = await res.json().catch(() => ({ error: "upstream_error" }));
@@ -86,32 +123,72 @@ export async function streamChat(
     }
     return errored ? { ok: false, error: errored } : { ok: true, truncated };
   } catch {
+    // A user-initiated stop is a clean finish, not a failure — whatever text
+    // already streamed stays in the transcript.
+    if (signal?.aborted) return { ok: true, truncated: false };
     // Network failure or a mid-stream reader rejection (upstream abort) — never
     // let this propagate out of send(), or `busy` sticks true forever.
     return { ok: false, error: "upstream_error" };
   }
 }
 
-export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, draftChatbot, simulateAudience, variant = "viewer" }: {
+export default function ChatPanel({ open, onClose, siteName, botName, thinkingPhrases, tasks, isEditor, draftChatbot, simulateAudience, variant = "viewer", mode = "floating", focusComposer, audience }: {
   open: boolean;
   onClose: () => void;
   siteName: string;
+  /** Resolved assistant display name (per-audience, server-side). */
+  botName: string;
+  /** Raw configured phrases; "…" appending + fallback happen here. */
+  thinkingPhrases?: string[];
   tasks: { id: string; label: string }[];
   isEditor?: boolean;
   /** Set by the configurator's test panel and the /edit chat FAB. */
   draftChatbot?: unknown;
   /** Configurator test panel only: preview this audience's prompt overlay. */
   simulateAudience?: string;
-  /** Anchors the panel above its launcher: viewer corner FAB vs /edit FAB column. */
+  /** Floating mode only — anchors the panel above its launcher: viewer corner
+   *  FAB vs /edit FAB column. */
   variant?: "viewer" | "editor";
+  mode?: ChatPanelMode;
+  /** Focus the composer when opened (explicit user open on desktop). Never
+   *  used for the sheet — autofocusing there pops the keyboard over content. */
+  focusComposer?: boolean;
+  /** Viewer's audience (null for editor sessions) — tags history entries so
+   *  the list never shows another audience's transcripts. */
+  audience?: string | null;
 }) {
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const persistent = mode !== "floating";
+  const [messages, setMessages] = useState<ChatMessage[]>(() => (persistent ? loadStoredMessages() : []));
   const [taskId, setTaskId] = useState<string>("");
   const [input, setInput] = useState("");
   const [busy, setBusy] = useState(false);
   const [notice, setNotice] = useState<string | null>(null);
+  const [canRetry, setCanRetry] = useState(false);
+  const [thinking, setThinking] = useState("");
+  const [jumpVisible, setJumpVisible] = useState(false);
+  const [showHistory, setShowHistory] = useState(false);
+  const [history, setHistory] = useState<StoredConversation[]>([]);
   const streamingRef = useRef("");
+  const convoIdRef = useRef<string | null>(null);
+  const historyAudience = audience ?? "editor";
+
+  // Stable per-conversation id, shared with sessionStorage so a same-tab
+  // navigation keeps appending to the same history entry.
+  function ensureConvoId(): string {
+    if (!convoIdRef.current) {
+      try { convoIdRef.current = window.sessionStorage.getItem(CONVO_ID_KEY); } catch {}
+      if (!convoIdRef.current) {
+        convoIdRef.current = crypto.randomUUID();
+        try { window.sessionStorage.setItem(CONVO_ID_KEY, convoIdRef.current); } catch {}
+      }
+    }
+    return convoIdRef.current;
+  }
+  const abortRef = useRef<AbortController | null>(null);
   const composerRef = useRef<HTMLTextAreaElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const pinnedRef = useRef(true);
 
   // Autosize the composer: height tracks content up to the className's
   // 4-line max-h cap, then it scrolls internally. Keyed on `input` so the
@@ -148,6 +225,84 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
     return () => { alive = false; };
   }, []);
 
+  // Persist the transcript across same-tab navigations (see loadStoredMessages).
+  // The mid-stream assistant stub is empty — don't store it. The history
+  // archive updates only between responses (`busy` in deps: the flip to false
+  // after a stream lands the final transcript) — not on every token.
+  useEffect(() => {
+    if (!persistent) return;
+    const stored = messages.filter((m) => m.content !== "").slice(-STORED_MESSAGE_CAP);
+    try {
+      window.sessionStorage.setItem(MESSAGES_KEY, JSON.stringify(stored));
+    } catch { /* storage unavailable — transcript just won't survive navigation */ }
+    if (!busy && stored.length > 0) {
+      upsertConversation({ id: ensureConvoId(), audience: historyAudience, messages: stored });
+    }
+  }, [messages, busy, persistent, historyAudience]);
+
+  // Stick-to-bottom: keep the newest tokens in view ONLY while the reader is
+  // already near the bottom; the moment they scroll up to read, stop moving
+  // them. They re-engage by scrolling back down or via the jump pill.
+  useEffect(() => {
+    const el = listRef.current;
+    if (el && pinnedRef.current) el.scrollTop = el.scrollHeight;
+  }, [messages, thinking]);
+
+  function onListScroll() {
+    const el = listRef.current;
+    if (!el) return;
+    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
+    const pinned = distance < PIN_THRESHOLD;
+    pinnedRef.current = pinned;
+    setJumpVisible(!pinned);
+  }
+
+  function jumpToLatest() {
+    const el = listRef.current;
+    if (!el) return;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    el.scrollTo({ top: el.scrollHeight, behavior: reduced ? "auto" : "smooth" });
+    pinnedRef.current = true;
+    setJumpVisible(false);
+  }
+
+  // Sheet mode on iOS: the keyboard shrinks visualViewport while fixed
+  // elements stay put behind it. Track the keyboard as --kb-offset (raises
+  // the sheet) and the visual height as --vvh (caps the sheet's height).
+  useEffect(() => {
+    if (mode !== "sheet" || !open) return;
+    const vv = window.visualViewport;
+    const el = panelRef.current;
+    if (!vv || !el) return;
+    const update = () => {
+      el.style.setProperty("--vvh", `${vv.height}px`);
+      el.style.setProperty("--kb-offset", `${Math.max(0, window.innerHeight - vv.height - vv.offsetTop)}px`);
+    };
+    update();
+    vv.addEventListener("resize", update);
+    vv.addEventListener("scroll", update);
+    return () => {
+      vv.removeEventListener("resize", update);
+      vv.removeEventListener("scroll", update);
+    };
+  }, [mode, open]);
+
+  // The open sheet is modal: the page behind it must not scroll.
+  useEffect(() => {
+    if (mode !== "sheet" || !open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => { document.body.style.overflow = prev; };
+  }, [mode, open]);
+
+  // Explicit-open focus: composer on desktop, the panel itself on the sheet
+  // (keyboard-pop on open is hostile on phones).
+  useEffect(() => {
+    if (!open) return;
+    if (mode === "sheet") panelRef.current?.focus();
+    else if (focusComposer) composerRef.current?.focus();
+  }, [open, mode, focusComposer]);
+
   function onMessagesClick(e: MouseEvent<HTMLDivElement>) {
     const link = (e.target as HTMLElement).closest("a");
     if (!link || !link.getAttribute("href")) return;
@@ -157,7 +312,7 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
     // #anchor but improvises the path around it (a bare "#anchor", or a path
     // copied from elsewhere in the prompt). If the cited anchor exists in the
     // CURRENT document — viewer page or /edit editor, both render heading
-    // ids — scroll to it in place; nothing navigates and the panel survives.
+    // ids — scroll to it in place.
     let anchorId = "";
     if (url.hash.length > 1 && url.origin === window.location.origin) {
       try {
@@ -168,25 +323,38 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
     }
     const target = anchorId ? document.getElementById(anchorId) : null;
     if (target) {
+      // Phone convention: the sheet covers the page, so following a citation
+      // collapses it to reveal the section. The docked sidebar stays open.
+      if (mode === "sheet") onClose();
       target.scrollIntoView({ behavior: "smooth", block: "start" });
       window.history.replaceState(null, "", url.hash);
       return;
     }
-    // Anchor not in this document (cross-page citation on a multi-page
-    // portal, external URL, hashless link, or hallucinated anchor): new tab
-    // so chat history and any unsaved editor state survive.
+    if (url.origin === window.location.origin) {
+      if (persistent) {
+        // Internal cross-page citation, viewer chat: navigate in place — the
+        // sessionStorage transcript (and docked-open state) survive the load.
+        window.location.assign(url.href);
+        return;
+      }
+      // Editor surfaces (floating mode): same-tab navigation would destroy
+      // unsaved editor state — keep internal links in a new tab there.
+      window.open(url.href, "_blank", "noopener");
+      return;
+    }
     window.open(url.href, "_blank", "noopener");
   }
 
-  async function send() {
-    const text = input.trim();
-    if (!text || busy) return;
+  async function run(history: ChatMessage[]) {
     setNotice(null);
-    setInput("");
+    setCanRetry(false);
     setBusy(true);
-    const history: ChatMessage[] = [...messages, { role: "user", content: text }];
+    const phrases = resolveThinkingPhrases(thinkingPhrases);
+    setThinking(phrases[Math.floor(Math.random() * phrases.length)]);
     setMessages([...history, { role: "assistant", content: "" }]);
     streamingRef.current = "";
+    const controller = new AbortController();
+    abortRef.current = controller;
     const result = await streamChat(
       { messages: history, sessionId: sessionId(), ...(taskId ? { taskId } : {}), ...(draftChatbot !== undefined ? { draftChatbot } : {}), ...(simulateAudience ? { simulateAudience } : {}) },
       (delta) => {
@@ -194,72 +362,276 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
         const streamed = streamingRef.current;
         setMessages([...history, { role: "assistant", content: streamed }]);
       },
+      controller.signal,
     );
+    abortRef.current = null;
     setBusy(false);
     if (!result.ok) {
       setMessages(history); // drop the empty assistant stub
       setNotice(ERROR_COPY[result.error] ?? ERROR_COPY.upstream_error);
-    } else if (result.truncated) {
-      setNotice("Some brand content didn't fit — answers may be incomplete.");
+      setCanRetry(RETRYABLE.has(result.error));
+    } else {
+      if (!streamingRef.current) setMessages(history); // stopped before the first token
+      if (result.truncated) setNotice("Some brand content didn't fit — answers may be incomplete.");
     }
   }
 
+  async function send(textOverride?: string) {
+    const text = (textOverride ?? input).trim();
+    if (!text || busy) return;
+    if (textOverride === undefined) setInput("");
+    await run([...messages, { role: "user", content: text }]);
+  }
+
+  function retry() {
+    if (busy || messages.length === 0 || messages[messages.length - 1].role !== "user") return;
+    void run(messages);
+  }
+
+  function stop() {
+    abortRef.current?.abort();
+  }
+
+  // Starts fresh; the previous conversation stays in the history archive.
+  function clearConversation() {
+    if (busy) stop();
+    setMessages([]);
+    setNotice(null);
+    setCanRetry(false);
+    setShowHistory(false);
+    convoIdRef.current = null;
+    try {
+      window.sessionStorage.removeItem(MESSAGES_KEY);
+      window.sessionStorage.removeItem(CONVO_ID_KEY);
+    } catch {}
+    composerRef.current?.focus();
+  }
+
+  function openHistory() {
+    setHistory(loadHistory(historyAudience));
+    setShowHistory(true);
+  }
+
+  function restoreConversation(c: StoredConversation) {
+    if (busy) stop();
+    convoIdRef.current = c.id;
+    try { window.sessionStorage.setItem(CONVO_ID_KEY, c.id); } catch {}
+    setMessages(c.messages);
+    setNotice(null);
+    setCanRetry(false);
+    setShowHistory(false);
+  }
+
+  function togglePinned(c: StoredConversation) {
+    setConversationPinned(c.id, !c.pinned);
+    setHistory(loadHistory(historyAudience));
+  }
+
+  function deleteFromHistory(c: StoredConversation) {
+    removeConversation(c.id);
+    // Deleting the ACTIVE conversation also clears the live transcript —
+    // otherwise the next message would silently resurrect the entry.
+    if (c.id === convoIdRef.current) {
+      setMessages([]);
+      convoIdRef.current = null;
+      try {
+        window.sessionStorage.removeItem(MESSAGES_KEY);
+        window.sessionStorage.removeItem(CONVO_ID_KEY);
+      } catch {}
+    }
+    setHistory(loadHistory(historyAudience));
+  }
+
   if (!open) return null;
 
+  const lastIndex = messages.length - 1;
+
   return (
-    <div role="dialog" aria-label={`Chat with ${siteName}`}
-      className={cn(
-        "fixed z-40 flex h-[28rem] w-80 flex-col rounded-outer border border-base-200 bg-base shadow-xl",
-        variant === "editor" ? "bottom-4 fab-panel-left max-w-[calc(100vw-5.25rem)]" : "bottom-20 right-4",
-      )}>
-
-      <div className="flex items-center justify-between gap-2 border-b border-base-200 px-3 py-2">
-        <span className="text-sm font-medium text-base-contrast">Portal Assistant</span>
-        <IconButton icon={<RemoveIcon size={18} />} label="Close chat" onClick={onClose} className="rounded-inner hover:bg-base-accent" />
-      </div>
-      {tasks.length > 0 && (
-        <div className="border-b border-base-200 px-3 py-2">
-          <Select
-            label="Task"
-            value={taskId}
-            onChange={setTaskId}
-            options={[{ value: "", label: "General" }, ...tasks.map((t) => ({ value: t.id, label: t.label }))]}
-            selectClassName="py-1"
-          />
-        </div>
+    <>
+      {mode === "sheet" && (
+        <div className="fixed inset-0 z-50 bg-black/50" onClick={onClose} aria-hidden="true" />
       )}
-      <div className="flex-1 space-y-2 overflow-y-auto p-3" onClick={onMessagesClick}>
-        {messages.map((m, i) =>
-          m.role === "assistant" && mdReady && m.content ? (
-            <div
-              key={i}
-              className={cn("max-w-[85%] rounded-outer bg-base-accent px-3 py-2 text-sm text-base-contrast", MD_STYLES)}
-              dangerouslySetInnerHTML={{ __html: assistantHtml(m.content) }}
-            />
-          ) : (
-            <div key={i} className={cn("max-w-[85%] whitespace-pre-wrap rounded-outer px-3 py-2 text-sm",
-              m.role === "user" ? "ml-auto bg-primary text-primary-contrast" : "bg-base-accent text-base-contrast")}>
-              {m.content || (busy && i === messages.length - 1 ? "…" : m.content)}
-            </div>
+      <div
+        ref={panelRef}
+        role={mode === "docked" ? "complementary" : "dialog"}
+        aria-modal={mode === "sheet" ? true : undefined}
+        aria-label={botName}
+        tabIndex={-1}
+        onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
+        className={cn(
+          "flex flex-col bg-base focus:outline-none",
+          mode === "floating" && cn(
+            "fixed z-40 h-[28rem] w-80 rounded-outer border border-base-200 shadow-xl",
+            variant === "editor" ? "bottom-4 fab-panel-left max-w-[calc(100vw-5.25rem)]" : "bottom-20 right-4",
           ),
+          mode === "docked" && "fixed right-0 bottom-0 top-16 xl:top-0 z-40 w-[var(--chat-w)] border-l border-base-200",
+          mode === "sheet" && "fixed inset-x-0 bottom-0 z-50 h-[85dvh] rounded-t-outer border-t border-base-200 shadow-xl",
         )}
-        {notice && <p className="text-xs text-base-contrast-light">{notice}</p>}
+        style={mode === "sheet" ? { bottom: "var(--kb-offset, 0px)", maxHeight: "calc(var(--vvh, 100dvh) - 2.5rem)" } : undefined}
+      >
+        <div className={cn(
+          "flex shrink-0 items-center justify-between gap-2 border-b border-base-200 px-3",
+          mode === "docked" ? "h-16" : "py-2",
+        )}>
+          <span className="text-sm font-medium text-base-contrast">{botName}</span>
+          <div className="flex items-center gap-1">
+            {persistent && (
+              <IconButton icon={<History size={16} />} label="Chat history"
+                onClick={() => (showHistory ? setShowHistory(false) : openHistory())}
+                className="rounded-inner hover:bg-base-accent" />
+            )}
+            {messages.length > 0 && (
+              <IconButton icon={<SquarePen size={16} />} label="New conversation" onClick={clearConversation} className="rounded-inner hover:bg-base-accent" />
+            )}
+            <IconButton
+              icon={mode === "docked" ? <ChevronRight size={18} /> : mode === "sheet" ? <ChevronDown size={18} /> : <RemoveIcon size={18} />}
+              label={mode === "docked" ? "Hide chat" : "Close chat"}
+              onClick={onClose}
+              className="rounded-inner hover:bg-base-accent"
+            />
+          </div>
+        </div>
+        {tasks.length > 0 && (
+          <div className="shrink-0 border-b border-base-200 px-3 py-2">
+            <Select
+              label="Task"
+              value={taskId}
+              onChange={setTaskId}
+              options={[{ value: "", label: "General" }, ...tasks.map((t) => ({ value: t.id, label: t.label }))]}
+              selectClassName="py-1"
+            />
+          </div>
+        )}
+        <div className="relative min-h-0 flex-1">
+          <div
+            ref={listRef}
+            role="log"
+            aria-label="Conversation"
+            onScroll={onListScroll}
+            onClick={onMessagesClick}
+            className="h-full space-y-3 overflow-y-auto p-3"
+          >
+            {messages.length === 0 && (
+              <div className="flex h-full flex-col justify-end gap-2 pb-1">
+                <p className="text-sm text-base-contrast-light">
+                  Ask about {siteName} — colors, voice, logo usage, anything in the brand guide.
+                </p>
+                <div className="mt-1 flex flex-wrap gap-1.5">
+                  {tasks.slice(0, 4).map((t) => (
+                    <button key={t.id} type="button"
+                      onClick={() => { setTaskId(t.id); composerRef.current?.focus(); }}
+                      className="cursor-pointer rounded-full border border-base-200 bg-base-accent px-2.5 py-1 text-xs text-base-contrast hover:border-primary">
+                      {t.label}
+                    </button>
+                  ))}
+                  {tasks.length === 0 && ["What are our primary brand colors?", "How should the logo be used?"].map((s) => (
+                    <button key={s} type="button" onClick={() => void send(s)}
+                      className="cursor-pointer rounded-full border border-base-200 bg-base-accent px-2.5 py-1 text-xs text-base-contrast hover:border-primary">
+                      {s}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+            {messages.map((m, i) =>
+              m.role === "user" ? (
+                <div key={i} className="ml-auto max-w-[85%] whitespace-pre-wrap rounded-outer bg-primary px-3 py-2 text-sm text-primary-contrast">
+                  {m.content}
+                </div>
+              ) : m.content === "" ? (
+                busy && i === lastIndex ? (
+                  <div key={i} className="text-sm text-base-contrast-light motion-safe:animate-pulse">{thinking}</div>
+                ) : null
+              ) : mdReady ? (
+                <div
+                  key={i}
+                  className={cn("text-sm leading-relaxed text-base-contrast", MD_STYLES)}
+                  dangerouslySetInnerHTML={{ __html: assistantHtml(m.content) }}
+                />
+              ) : (
+                <div key={i} className="whitespace-pre-wrap text-sm leading-relaxed text-base-contrast">{m.content}</div>
+              ),
+            )}
+            {notice && (
+              <p className="text-xs text-base-contrast-light">
+                {notice}
+                {canRetry && !busy && (
+                  <button type="button" onClick={retry} className="ml-2 cursor-pointer text-primary underline underline-offset-2">
+                    Try again
+                  </button>
+                )}
+              </p>
+            )}
+          </div>
+          {showHistory && persistent && (
+            <div className="absolute inset-0 z-20 overflow-y-auto bg-base p-2" role="region" aria-label="Saved conversations">
+              <p className="px-1 pb-2 text-xs font-medium text-base-contrast-light">
+                Chat history — pinned conversations are kept forever; others expire after 30 days.
+              </p>
+              {history.length === 0 ? (
+                <p className="px-1 text-xs text-base-contrast-light">No saved conversations yet.</p>
+              ) : (
+                <ul className="space-y-1">
+                  {history.map((c) => (
+                    <li key={c.id} className="flex items-center gap-1 rounded-inner border border-base-200 px-2 py-1.5 hover:bg-base-accent">
+                      <button type="button" onClick={() => restoreConversation(c)} className="min-w-0 flex-1 cursor-pointer text-left">
+                        <span className="block truncate text-sm text-base-contrast">{c.title}</span>
+                        <span className="block text-[10px] text-base-contrast-light">
+                          {c.pinned ? "Pinned · " : ""}
+                          {new Date(c.updatedAt).toLocaleDateString(undefined, { month: "short", day: "numeric" })}
+                        </span>
+                      </button>
+                      <IconButton icon={c.pinned ? <PinOff size={14} /> : <Pin size={14} />}
+                        label={c.pinned ? `Unpin "${c.title}"` : `Pin "${c.title}"`}
+                        onClick={() => togglePinned(c)} className="rounded-inner hover:bg-base-200" />
+                      <IconButton icon={<Trash2 size={14} />} label={`Delete "${c.title}"`}
+                        onClick={() => deleteFromHistory(c)} className="rounded-inner hover:bg-base-200" />
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          )}
+          {jumpVisible && (
+            <button
+              type="button"
+              onClick={jumpToLatest}
+              className="absolute bottom-2 left-1/2 z-10 flex -translate-x-1/2 cursor-pointer items-center gap-1 rounded-full border border-base-200 bg-base px-3 py-1 text-xs text-base-contrast shadow-md hover:bg-base-accent"
+            >
+              <ArrowDown size={12} aria-hidden="true" /> Latest
+            </button>
+          )}
+        </div>
+        <p role="status" className="sr-only">{busy ? thinking : ""}</p>
+        <form
+          className={cn(
+            "flex shrink-0 items-end gap-2 border-t border-base-200 p-2",
+            mode === "sheet" && "pb-[max(0.5rem,env(safe-area-inset-bottom))]",
+          )}
+          onSubmit={(e) => { e.preventDefault(); void send(); }}
+        >
+          <textarea
+            ref={composerRef}
+            rows={1}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={onComposerKeyDown}
+            placeholder={`Ask about ${siteName}…`}
+            maxLength={4000}
+            className="max-h-[5.625rem] min-w-0 flex-1 resize-none overflow-y-auto rounded-inner border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast focus:outline-none focus:bg-[color-mix(in_srgb,var(--color-base),var(--color-base-contrast)_5%)]"
+          />
+          {busy ? (
+            <button type="button" aria-label="Stop" onClick={stop}
+              className="flex cursor-pointer items-center rounded-inner bg-primary px-3 py-1.5 text-sm text-primary-contrast">
+              <Square size={12} fill="currentColor" aria-hidden="true" />
+            </button>
+          ) : (
+            <button type="submit" aria-label="Send"
+              className="rounded-inner bg-primary px-3 py-1 text-sm text-primary-contrast disabled:opacity-50">→</button>
+          )}
+        </form>
+        {isEditor && <p className="shrink-0 border-t border-base-200 px-3 py-1 text-[10px] text-base-contrast-light">Editor view — answers ground on published content.</p>}
       </div>
-      <form className="flex items-end gap-2 border-t border-base-200 p-2" onSubmit={(e) => { e.preventDefault(); void send(); }}>
-        <textarea
-          ref={composerRef}
-          rows={1}
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={onComposerKeyDown}
-          placeholder={`Ask about ${siteName}…`}
-          maxLength={4000}
-          className="max-h-[5.625rem] min-w-0 flex-1 resize-none overflow-y-auto rounded-inner border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast focus:outline-none focus:bg-[color-mix(in_srgb,var(--color-base),var(--color-base-contrast)_5%)]"
-        />
-        <button type="submit" aria-label="Send" disabled={busy}
-          className="rounded-inner bg-primary px-3 py-1 text-sm text-primary-contrast disabled:opacity-50">→</button>
-      </form>
-      {isEditor && <p className="border-t border-base-200 px-3 py-1 text-[10px] text-base-contrast-light">Editor view — answers ground on published content.</p>}
-    </div>
+    </>
   );
 }