@firstlovecenter/ai-chat 0.2.3 → 0.6.0

package/dist/ui/index.cjs

@@ -6,6 +6,7 @@ var lucideReact = require('lucide-react');
 var radixUi = require('radix-ui');
 var jsxRuntime = require('react/jsx-runtime');
 var RechartsPrimitive = require('recharts');
+var react = require('@ai-sdk/react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -99,6 +100,92 @@ function DropdownMenuItem({
     }
   );
 }
+function SidebarTitleEditor({
+  initial,
+  onSave,
+  onCancel
+}) {
+  const [draft, setDraft] = React.useState(initial);
+  const commit = () => {
+    const trimmed = draft.trim();
+    if (trimmed && trimmed !== initial) onSave(trimmed);
+    else onCancel();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      autoFocus: true,
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onFocus: (e) => e.currentTarget.select(),
+      onClick: (e) => e.stopPropagation(),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commit();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          onCancel();
+        }
+      },
+      maxLength: 200,
+      className: "w-full rounded-md border border-sidebar-border bg-sidebar-accent/40 px-2 py-1.5 text-sm text-sidebar-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+    }
+  );
+}
+function EditableTitle({
+  title,
+  onSave
+}) {
+  const [editing, setEditing] = React.useState(false);
+  const [draft, setDraft] = React.useState(title);
+  React.useEffect(() => {
+    if (!editing) setDraft(title);
+  }, [title, editing]);
+  if (!editing) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setDraft(title);
+          setEditing(true);
+        },
+        className: "w-64 max-w-full min-w-0 truncate rounded px-2 py-0.5 text-left hover:bg-accent hover:text-foreground",
+        title: "Click to rename",
+        children: title
+      }
+    );
+  }
+  const commit = () => {
+    const trimmed = draft.trim();
+    setEditing(false);
+    if (trimmed && trimmed !== title) onSave(trimmed);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      autoFocus: true,
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onFocus: (e) => e.currentTarget.select(),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commit();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          setEditing(false);
+          setDraft(title);
+        }
+      },
+      className: "w-64 max-w-full min-w-0 rounded border border-border bg-background px-2 py-0.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring",
+      maxLength: 200
+    }
+  );
+}
 function ChartCard({
   title,
   subtitle,
@@ -597,6 +684,7 @@ function AiChat({
   const textareaRef = React.useRef(null);
   const lastAnswerRef = React.useRef(null);
   const prevAnswersLen = React.useRef(0);
+  const autoOpenedRef = React.useRef(false);
   React.useLayoutEffect(() => {
     const el = textareaRef.current;
     if (!el) return;
@@ -611,7 +699,34 @@ function AiChat({
         const res = await fetch("/api/chat/sessions", { cache: "no-store" });
         if (!res.ok) return;
         const data = await res.json();
-        if (!cancelled) setSessions(data.sessions ?? []);
+        if (cancelled) return;
+        const list = data.sessions ?? [];
+        setSessions(list);
+        if (!autoOpenedRef.current && list.length > 0) {
+          autoOpenedRef.current = true;
+          const mostRecentId = list[0].id;
+          setLoadingSession(true);
+          setActiveSessionId(mostRecentId);
+          try {
+            const sres = await fetch(`/api/chat/sessions/${mostRecentId}`, {
+              cache: "no-store"
+            });
+            if (cancelled) return;
+            if (!sres.ok) {
+              setAnswers([]);
+              return;
+            }
+            const sdata = await sres.json();
+            if (cancelled) return;
+            setAnswers(messagesToAnswers(sdata.messages ?? []));
+          } catch {
+            if (!cancelled) setAnswers([]);
+          } finally {
+            if (!cancelled) setLoadingSession(false);
+          }
+        } else if (!autoOpenedRef.current) {
+          autoOpenedRef.current = true;
+        }
       } catch {
       }
     }
@@ -1179,92 +1294,6 @@ function AnswerView({
     }
   );
 }
-function SidebarTitleEditor({
-  initial,
-  onSave,
-  onCancel
-}) {
-  const [draft, setDraft] = React.useState(initial);
-  const commit = () => {
-    const trimmed = draft.trim();
-    if (trimmed && trimmed !== initial) onSave(trimmed);
-    else onCancel();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      autoFocus: true,
-      value: draft,
-      onChange: (e) => setDraft(e.target.value),
-      onFocus: (e) => e.currentTarget.select(),
-      onClick: (e) => e.stopPropagation(),
-      onBlur: commit,
-      onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          commit();
-        } else if (e.key === "Escape") {
-          e.preventDefault();
-          onCancel();
-        }
-      },
-      maxLength: 200,
-      className: "w-full rounded-md border border-sidebar-border bg-sidebar-accent/40 px-2 py-1.5 text-sm text-sidebar-foreground focus:outline-none focus:ring-1 focus:ring-ring"
-    }
-  );
-}
-function EditableTitle({
-  title,
-  onSave
-}) {
-  const [editing, setEditing] = React.useState(false);
-  const [draft, setDraft] = React.useState(title);
-  React.useEffect(() => {
-    if (!editing) setDraft(title);
-  }, [title, editing]);
-  if (!editing) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          setDraft(title);
-          setEditing(true);
-        },
-        className: "w-64 max-w-full min-w-0 truncate rounded px-2 py-0.5 text-left hover:bg-accent hover:text-foreground",
-        title: "Click to rename",
-        children: title
-      }
-    );
-  }
-  const commit = () => {
-    const trimmed = draft.trim();
-    setEditing(false);
-    if (trimmed && trimmed !== title) onSave(trimmed);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      autoFocus: true,
-      value: draft,
-      onChange: (e) => setDraft(e.target.value),
-      onFocus: (e) => e.currentTarget.select(),
-      onBlur: commit,
-      onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          commit();
-        } else if (e.key === "Escape") {
-          e.preventDefault();
-          setEditing(false);
-          setDraft(title);
-        }
-      },
-      className: "w-64 max-w-full min-w-0 rounded border border-border bg-background px-2 py-0.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-ring",
-      maxLength: 200
-    }
-  );
-}
 function blocksToPlainText(blocks) {
   return blocks.map((b) => {
     if (b.kind === "paragraph_brief") {
@@ -1429,9 +1458,917 @@ function messagesToAnswers(messages) {
   }
   return out;
 }
+function formatDuration2(ms) {
+  if (ms < 0) ms = 0;
+  const totalSec = Math.round(ms / 1e3);
+  if (totalSec < 60) return `${totalSec}s`;
+  const m = Math.floor(totalSec / 60);
+  const s = totalSec % 60;
+  return s === 0 ? `${m}m` : `${m}m ${s}s`;
+}
+var PROVIDER_LABELS2 = {
+  claude: "Claude",
+  grok: "Grok",
+  gemini: "Gemini"
+};
+var TEXTAREA_MAX_PX2 = 176;
+var PROVIDER_DESCRIPTIONS2 = {
+  claude: "Anthropic Claude on Vertex AI",
+  grok: "xAI Grok on Vertex AI",
+  gemini: "Google Gemini on Vertex AI"
+};
+function asDataPart(v) {
+  if (typeof v !== "object" || v === null || Array.isArray(v)) return null;
+  const t = v.type;
+  if (typeof t !== "string") return null;
+  return v;
+}
+function VercelChat({
+  userFirstName,
+  scopeLabel,
+  initialProvider
+}) {
+  const [sessions, setSessions] = React.useState([]);
+  const [activeSessionId, setActiveSessionId] = React.useState(null);
+  const [sidebarOpen, setSidebarOpen] = React.useState(false);
+  const [loadingSession, setLoadingSession] = React.useState(false);
+  const [provider, setProvider] = React.useState(initialProvider);
+  const [providerSaving, setProviderSaving] = React.useState(false);
+  const [editingSidebarId, setEditingSidebarId] = React.useState(null);
+  const [hydratedBlocks, setHydratedBlocks] = React.useState({});
+  const [hydratedProse, setHydratedProse] = React.useState({});
+  const [hydratedErrors, setHydratedErrors] = React.useState({});
+  const [startedAt, setStartedAt] = React.useState({});
+  const threadRef = React.useRef(null);
+  const textareaRef = React.useRef(null);
+  const lastAnswerRef = React.useRef(null);
+  const prevAnswersLen = React.useRef(0);
+  const autoOpenedRef = React.useRef(false);
+  const activeSessionIdRef = React.useRef(activeSessionId);
+  const providerRef = React.useRef(provider);
+  React.useEffect(() => {
+    activeSessionIdRef.current = activeSessionId;
+  }, [activeSessionId]);
+  React.useEffect(() => {
+    providerRef.current = provider;
+  }, [provider]);
+  const refreshSessions = React.useCallback(async () => {
+    try {
+      const res = await fetch("/api/chat/sessions", { cache: "no-store" });
+      if (!res.ok) return;
+      const data2 = await res.json();
+      setSessions(data2.sessions ?? []);
+    } catch {
+    }
+  }, []);
+  const {
+    messages,
+    input,
+    handleInputChange,
+    handleSubmit,
+    status,
+    setMessages,
+    setInput,
+    data
+  } = react.useChat({
+    api: "/api/agent/vercel",
+    // `body` here is captured at hook init and stale-closes over
+    // `activeSessionId`/`provider`. Real per-submit body comes through
+    // `experimental_prepareRequestBody` below, which reads from refs.
+    experimental_prepareRequestBody: ({ messages: msgs }) => ({
+      messages: msgs,
+      chatSessionId: activeSessionIdRef.current,
+      model: providerRef.current
+    }),
+    onFinish: () => {
+      void refreshSessions();
+    }
+  });
+  React.useLayoutEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "0px";
+    const next = Math.min(el.scrollHeight, TEXTAREA_MAX_PX2);
+    el.style.height = `${next}px`;
+  }, [input]);
+  React.useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      try {
+        const res = await fetch("/api/chat/sessions", { cache: "no-store" });
+        if (!res.ok) return;
+        const json = await res.json();
+        if (cancelled) return;
+        const list = json.sessions ?? [];
+        setSessions(list);
+        if (!autoOpenedRef.current && list.length > 0) {
+          autoOpenedRef.current = true;
+          const mostRecentId = list[0].id;
+          setLoadingSession(true);
+          setActiveSessionId(mostRecentId);
+          try {
+            const sres = await fetch(`/api/chat/sessions/${mostRecentId}`, {
+              cache: "no-store"
+            });
+            if (cancelled) return;
+            if (!sres.ok) {
+              setMessages([]);
+              setHydratedBlocks({});
+              setHydratedProse({});
+              setHydratedErrors({});
+              return;
+            }
+            const sjson = await sres.json();
+            if (cancelled) return;
+            const { uiMessages, blocksMap, proseMap, errorsMap } = storedToUseChat(
+              sjson.messages ?? []
+            );
+            setMessages(uiMessages);
+            setHydratedBlocks(blocksMap);
+            setHydratedProse(proseMap);
+            setHydratedErrors(errorsMap);
+            setStartedAt({});
+          } catch {
+            if (!cancelled) {
+              setMessages([]);
+              setHydratedBlocks({});
+              setHydratedProse({});
+              setHydratedErrors({});
+            }
+          } finally {
+            if (!cancelled) setLoadingSession(false);
+          }
+        } else if (!autoOpenedRef.current) {
+          autoOpenedRef.current = true;
+        }
+      } catch {
+      }
+    }
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [setMessages]);
+  const answers = React.useMemo(() => {
+    const liveBlocks = [];
+    const liveErrors = [];
+    if (Array.isArray(data)) {
+      for (const raw of data) {
+        const part = asDataPart(raw);
+        if (!part) continue;
+        if (part.type === "block") liveBlocks.push(part.value);
+        else if (part.type === "error") liveErrors.push(part.value);
+      }
+    }
+    const out = [];
+    let pendingQuestion = null;
+    let liveAssistantSeen = 0;
+    const liveTurns = [];
+    {
+      let current = [];
+      let lastIdx = -1;
+      for (const b of liveBlocks) {
+        if (b.index <= lastIdx && current.length > 0) {
+          liveTurns.push(current);
+          current = [];
+        }
+        current.push(b);
+        lastIdx = b.index;
+      }
+      if (current.length > 0) liveTurns.push(current);
+    }
+    for (const m of messages) {
+      if (m.role === "user") {
+        pendingQuestion = m.content;
+        continue;
+      }
+      if (m.role !== "assistant") continue;
+      const question = pendingQuestion ?? "";
+      pendingQuestion = null;
+      const hydrated = hydratedBlocks[m.id];
+      const hydratedProseStr = hydratedProse[m.id];
+      const hydratedError = hydratedErrors[m.id];
+      let blocks = [];
+      let prose = "";
+      let error;
+      if (hydrated != null) {
+        blocks = hydrated;
+        prose = hydratedProseStr ?? "";
+        error = hydratedError;
+      } else {
+        const run = liveTurns[liveAssistantSeen] ?? [];
+        const acc = [];
+        for (const raw of run) {
+          acc[raw.index] = sanitiseBlock(raw);
+        }
+        blocks = acc;
+        prose = m.content ?? "";
+        error = liveErrors[liveAssistantSeen];
+        liveAssistantSeen += 1;
+      }
+      if (prose) {
+        const firstPb = blocks.findIndex((b) => b && b.kind === "paragraph_brief");
+        if (firstPb >= 0) {
+          const target = blocks[firstPb];
+          if (target.kind === "paragraph_brief") {
+            blocks[firstPb] = { ...target, prose };
+          }
+        }
+      }
+      const isLive = hydrated == null;
+      const turnDone = !isLive || status === "ready" || status === "error";
+      const startedTs = startedAt[m.id];
+      out.push({
+        question,
+        blocks: blocks.filter(Boolean),
+        prose,
+        done: turnDone,
+        error,
+        startedAt: startedTs,
+        durationMs: turnDone && startedTs != null ? Date.now() - startedTs : void 0
+      });
+    }
+    if (pendingQuestion != null) {
+      const lastUser = [...messages].reverse().find((m) => m.role === "user");
+      const ts = lastUser ? startedAt[lastUser.id] : void 0;
+      out.push({
+        question: pendingQuestion,
+        blocks: [],
+        prose: "",
+        done: false,
+        startedAt: ts
+      });
+    }
+    return out;
+  }, [messages, data, hydratedBlocks, hydratedProse, hydratedErrors, status, startedAt]);
+  React.useEffect(() => {
+    if (answers.length > prevAnswersLen.current && lastAnswerRef.current) {
+      lastAnswerRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+    prevAnswersLen.current = answers.length;
+  }, [answers.length]);
+  const newChat = React.useCallback(() => {
+    setActiveSessionId(null);
+    setMessages([]);
+    setHydratedBlocks({});
+    setHydratedProse({});
+    setHydratedErrors({});
+    setStartedAt({});
+    setInput("");
+  }, [setMessages, setInput]);
+  const changeProvider = React.useCallback(
+    async (next) => {
+      if (next === provider || providerSaving) return;
+      setProvider(next);
+      setProviderSaving(true);
+      try {
+        const res = await fetch("/api/settings/me", {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ narrative_provider: next })
+        });
+        if (!res.ok) {
+          setProvider((curr) => curr === next ? provider : curr);
+        }
+      } catch {
+        setProvider((curr) => curr === next ? provider : curr);
+      } finally {
+        setProviderSaving(false);
+      }
+    },
+    [provider, providerSaving]
+  );
+  const openSession = React.useCallback(
+    async (id) => {
+      setLoadingSession(true);
+      setActiveSessionId(id);
+      try {
+        const res = await fetch(`/api/chat/sessions/${id}`, { cache: "no-store" });
+        if (!res.ok) {
+          setMessages([]);
+          setHydratedBlocks({});
+          setHydratedProse({});
+          setHydratedErrors({});
+          return;
+        }
+        const json = await res.json();
+        const { uiMessages, blocksMap, proseMap, errorsMap } = storedToUseChat(
+          json.messages ?? []
+        );
+        setMessages(uiMessages);
+        setHydratedBlocks(blocksMap);
+        setHydratedProse(proseMap);
+        setHydratedErrors(errorsMap);
+        setStartedAt({});
+      } catch {
+        setMessages([]);
+        setHydratedBlocks({});
+        setHydratedProse({});
+        setHydratedErrors({});
+      } finally {
+        setLoadingSession(false);
+      }
+    },
+    [setMessages]
+  );
+  const persistTitle = React.useCallback(
+    async (id, title) => {
+      const trimmed = title.trim();
+      if (!trimmed) return;
+      const res = await fetch(`/api/chat/sessions/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ title: trimmed })
+      });
+      if (res.ok) {
+        setSessions(
+          (prev) => prev.map((s) => s.id === id ? { ...s, title: trimmed } : s)
+        );
+      }
+    },
+    []
+  );
+  const startSidebarRename = React.useCallback((id) => {
+    setEditingSidebarId(id);
+  }, []);
+  const deleteSession = React.useCallback(
+    async (id) => {
+      if (!window.confirm("Delete this chat? This cannot be undone.")) return;
+      const res = await fetch(`/api/chat/sessions/${id}`, { method: "DELETE" });
+      if (!res.ok) return;
+      setSessions((prev) => prev.filter((s) => s.id !== id));
+      if (activeSessionId === id) {
+        setActiveSessionId(null);
+        setMessages([]);
+        setHydratedBlocks({});
+        setHydratedProse({});
+        setHydratedErrors({});
+      }
+    },
+    [activeSessionId, setMessages]
+  );
+  const submitForm = React.useCallback(
+    async (e) => {
+      const trimmed = input.trim();
+      if (!trimmed || status !== "ready") return;
+      if (activeSessionIdRef.current == null) {
+        try {
+          const create = await fetch("/api/chat/sessions", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({})
+          });
+          if (create.ok) {
+            const json = await create.json();
+            activeSessionIdRef.current = json.session.id;
+            setActiveSessionId(json.session.id);
+            setSessions((prev) => [
+              { id: json.session.id, title: json.session.title, updatedAt: null },
+              ...prev
+            ]);
+          }
+        } catch {
+        }
+      }
+      handleSubmit(e);
+    },
+    [input, status, handleSubmit]
+  );
+  React.useEffect(() => {
+    setStartedAt((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      for (const m of messages) {
+        if (m.role === "user" && next[m.id] == null) {
+          next[m.id] = Date.now();
+          changed = true;
+        }
+        if (m.role === "assistant" && next[m.id] == null) {
+          const idx = messages.findIndex((mm) => mm.id === m.id);
+          for (let i = idx - 1; i >= 0; i -= 1) {
+            const prior = messages[i];
+            if (prior.role === "user" && next[prior.id] != null) {
+              next[m.id] = next[prior.id];
+              changed = true;
+              break;
+            }
+          }
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [messages]);
+  const heroVisible = answers.length === 0 && !loadingSession;
+  const greeting = React.useMemo(
+    () => `Hi ${userFirstName || "there"}${userFirstName.endsWith("s") ? "" : ""},`,
+    [userFirstName]
+  );
+  const activeTitle = activeSessionId ? sessions.find((s) => s.id === activeSessionId)?.title ?? "Chat" : "New chat";
+  const retry = React.useCallback(
+    (q) => {
+      setInput(q);
+      window.setTimeout(() => {
+        const form = textareaRef.current?.form;
+        if (form) form.requestSubmit();
+      }, 0);
+    },
+    [setInput]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-full min-h-0 w-full overflow-hidden rounded-lg border border-border bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        onClick: () => setSidebarOpen(false),
+        "aria-hidden": "true",
+        className: cn(
+          "absolute inset-0 z-10 bg-background/60 backdrop-blur-sm transition-opacity duration-200",
+          sidebarOpen ? "opacity-100" : "pointer-events-none opacity-0"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "aside",
+      {
+        inert: !sidebarOpen,
+        className: cn(
+          "absolute inset-y-0 left-0 z-20 flex w-72 max-w-[85vw] flex-col border-r border-border bg-sidebar text-sidebar-foreground shadow-lg transition-transform duration-200 ease-out",
+          sidebarOpen ? "translate-x-0" : "-translate-x-full"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-sidebar-border p-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setSidebarOpen(false),
+                className: "inline-flex size-8 items-center justify-center rounded-md text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground",
+                "aria-label": "Close sidebar",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  newChat();
+                  setSidebarOpen(false);
+                },
+                className: "ml-auto inline-flex items-center gap-1.5 rounded-full border border-sidebar-border bg-sidebar-accent px-3 py-1.5 text-xs font-medium text-sidebar-accent-foreground hover:bg-sidebar-accent/80",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-3.5" }),
+                  "New chat"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-2", children: sessions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 py-3 text-xs text-sidebar-foreground/60", children: "No chats yet. Ask something below to start." }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-0.5", children: sessions.map((s) => {
+            const active = s.id === activeSessionId;
+            const editing = s.id === editingSidebarId;
+            if (editing) {
+              return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-1 py-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarTitleEditor,
+                {
+                  initial: s.title,
+                  onCancel: () => setEditingSidebarId(null),
+                  onSave: (next) => {
+                    setEditingSidebarId(null);
+                    void persistTitle(s.id, next);
+                  }
+                }
+              ) }, s.id);
+            }
+            return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "group relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    void openSession(s.id);
+                    setSidebarOpen(false);
+                  },
+                  className: cn(
+                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm",
+                    active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/80 hover:bg-sidebar-accent/60 hover:text-sidebar-foreground"
+                  ),
+                  title: s.title,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: s.title })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-1 top-1/2 hidden -translate-y-1/2 items-center gap-0.5 group-hover:flex", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      startSidebarRename(s.id);
+                    },
+                    "aria-label": "Rename",
+                    className: "inline-flex size-6 items-center justify-center rounded text-sidebar-foreground/60 hover:bg-sidebar hover:text-sidebar-foreground",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "size-3" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      void deleteSession(s.id);
+                    },
+                    "aria-label": "Delete",
+                    className: "inline-flex size-6 items-center justify-center rounded text-sidebar-foreground/60 hover:bg-sidebar hover:text-destructive",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-3" })
+                  }
+                )
+              ] })
+            ] }, s.id);
+          }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "relative flex flex-1 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center gap-2 px-3 py-3 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSidebarOpen(true),
+            "aria-label": "Open chat history",
+            className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4 text-primary" }),
+        activeSessionId != null ? /* @__PURE__ */ jsxRuntime.jsx(
+          EditableTitle,
+          {
+            title: activeTitle,
+            onSave: (next) => void persistTitle(activeSessionId, next)
+          },
+          activeSessionId
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: activeTitle })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: threadRef,
+          className: "min-h-0 flex-1 overflow-y-auto px-4 pb-6 pt-2",
+          children: loadingSession ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 size-4 animate-spin" }),
+            " Loading conversation\u2026"
+          ] }) : heroVisible ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-medium tracking-tight text-foreground sm:text-3xl", children: greeting }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-2xl font-light tracking-tight text-muted-foreground sm:text-3xl", children: "What's on your mind?" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-6", children: answers.map((a, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+            AnswerView2,
+            {
+              answer: a,
+              onRetry: () => retry(a.question),
+              forwardRef: idx === answers.length - 1 ? lastAnswerRef : void 0,
+              isLast: idx === answers.length - 1
+            },
+            idx
+          )) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 px-4 pb-4 pt-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "form",
+        {
+          className: "mx-auto w-full max-w-3xl",
+          onSubmit: (e) => {
+            e.preventDefault();
+            void submitForm(e);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 rounded-3xl border border-border bg-background px-4 py-3 shadow-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "textarea",
+                {
+                  ref: textareaRef,
+                  value: input,
+                  onChange: handleInputChange,
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" && !e.shiftKey) {
+                      e.preventDefault();
+                      e.currentTarget.form?.requestSubmit();
+                    }
+                  },
+                  placeholder: "Ask AI...",
+                  rows: 1,
+                  disabled: status !== "ready",
+                  style: { maxHeight: TEXTAREA_MAX_PX2 },
+                  className: "w-full resize-none overflow-y-auto border-0 bg-transparent py-1 text-sm leading-6 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-0 disabled:opacity-60"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: "inline-flex max-w-[60%] items-center gap-1.5 truncate rounded-full border border-border bg-muted/40 px-2.5 py-1 text-xs font-medium text-muted-foreground",
+                    title: `Scope: ${scopeLabel}`,
+                    children: [
+                      "Scope: ",
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-foreground", children: scopeLabel })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground",
+                        "aria-label": "Choose model",
+                        children: [
+                          PROVIDER_LABELS2[provider],
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-3.5" })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", className: "w-56", children: ["claude", "grok", "gemini"].map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      DropdownMenuItem,
+                      {
+                        onSelect: () => void changeProvider(p),
+                        className: "flex items-start gap-2",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            lucideReact.Check,
+                            {
+                              className: cn(
+                                "mt-0.5 size-4",
+                                provider === p ? "opacity-100" : "opacity-0"
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: PROVIDER_LABELS2[p] }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: PROVIDER_DESCRIPTIONS2[p] })
+                          ] })
+                        ]
+                      },
+                      p
+                    )) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "submit",
+                      disabled: status !== "ready" || !input.trim(),
+                      "aria-label": "Send",
+                      className: "inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors enabled:hover:bg-primary/90 disabled:opacity-40",
+                      children: status === "streaming" || status === "submitted" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "size-4" })
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-2 text-center text-xs text-muted-foreground", children: [
+              PROVIDER_LABELS2[provider],
+              " is AI and can make mistakes."
+            ] })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+function AnswerView2({
+  answer,
+  onRetry,
+  forwardRef,
+  isLast
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const handleCopy = React.useCallback(async () => {
+    const blockText = blocksToPlainText2(answer.blocks);
+    const text = blockText || (answer.error ? `${answer.error.code}: ${answer.error.message}` : "");
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+    }
+  }, [answer.blocks, answer.error]);
+  const showActions = answer.done && (answer.blocks.length > 0 || answer.error != null);
+  const isThinking = !answer.done && answer.blocks.length === 0 && !answer.error;
+  const [, forceTick] = React.useState(0);
+  React.useEffect(() => {
+    if (answer.done || answer.startedAt == null) return;
+    const id = window.setInterval(() => forceTick((n) => n + 1), 1e3);
+    return () => window.clearInterval(id);
+  }, [answer.done, answer.startedAt]);
+  const liveElapsed = answer.startedAt != null ? Date.now() - answer.startedAt : null;
+  const finalDuration = answer.durationMs;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: forwardRef,
+      className: cn(
+        "flex flex-col gap-4 scroll-mt-2",
+        // Reserve space below the latest turn so the AI response has a
+        // full screen to fill without bouncing the user. Calc subtracts
+        // the chat header (~3rem) and the input pill area (~10rem) from
+        // the dynamic viewport height.
+        isLast && "min-h-[calc(100dvh-13rem)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(UserChip2, { text: answer.question }) }),
+        isThinking ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-1 inline size-3.5 animate-spin" }),
+            "Thinking\u2026",
+            liveElapsed != null && liveElapsed >= 1e3 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-2 text-xs tabular-nums", children: [
+              "(",
+              formatDuration2(liveElapsed),
+              ")"
+            ] })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(AnswerBlocks, { blocks: answer.blocks }),
+            answer.error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "wrap-break-word whitespace-pre-wrap rounded border border-amber-300 bg-amber-50 p-3 text-sm text-amber-900 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-100", children: [
+              answer.error.code,
+              ": ",
+              answer.error.message
+            ] }),
+            showActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              (answer.blocks.length > 0 || answer.error != null) && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleCopy,
+                  "aria-label": answer.blocks.length === 0 && answer.error ? "Copy error" : "Copy response",
+                  title: copied ? "Copied" : "Copy",
+                  className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground",
+                  children: copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onRetry,
+                  "aria-label": "Retry",
+                  title: "Retry",
+                  className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "size-4" })
+                }
+              ),
+              finalDuration != null && finalDuration >= 1e3 && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "ml-1 text-xs text-muted-foreground tabular-nums",
+                  title: "Time taken to generate this response",
+                  children: formatDuration2(finalDuration)
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function blocksToPlainText2(blocks) {
+  return blocks.map((b) => {
+    if (b.kind === "paragraph_brief") {
+      return b.prose || b.key_facts.join(". ");
+    }
+    if (b.kind === "list") {
+      const lines = b.items.map(
+        (it, i) => b.style === "numbered" ? `${i + 1}. ${it}` : `- ${it}`
+      );
+      return [b.title, ...lines].filter(Boolean).join("\n");
+    }
+    if (b.kind === "chart") {
+      return `${b.title} (chart)`;
+    }
+    if (b.kind === "table") {
+      const header = b.columns.join("	");
+      const rows = b.rows.map(
+        (r) => r.map((c) => c == null ? "\u2014" : String(c)).join("	")
+      );
+      return [b.title, header, ...rows].join("\n");
+    }
+    if (b.kind === "callout") return b.text;
+    return "";
+  }).filter(Boolean).join("\n\n");
+}
+function UserChip2({ text }) {
+  const [expanded, setExpanded] = React.useState(false);
+  const [overflowing, setOverflowing] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || expanded) return;
+    setOverflowing(el.scrollHeight > el.clientHeight + 1);
+  }, [text, expanded]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[85%] rounded-2xl bg-muted px-4 py-2 text-sm text-foreground", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          className: cn(
+            "whitespace-pre-wrap wrap-break-word leading-6",
+            // 3 lines × leading-6 (24px) = 72px → max-h-18.
+            !expanded && "max-h-18 overflow-hidden"
+          ),
+          children: text
+        }
+      ),
+      !expanded && overflowing && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-muted to-transparent"
+        }
+      )
+    ] }),
+    (overflowing || expanded) && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded((v) => !v),
+        className: "mt-1 inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground",
+        children: expanded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-3.5" }),
+          "Show less"
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-3.5" }),
+          "Show more"
+        ] })
+      }
+    )
+  ] });
+}
+function storedToUseChat(stored) {
+  const uiMessages = [];
+  const blocksMap = {};
+  const proseMap = {};
+  const errorsMap = {};
+  for (const m of stored) {
+    if (m.role === "user") {
+      const id = `user-${m.id}`;
+      const question = m.question ?? "";
+      uiMessages.push({ id, role: "user", content: question });
+      continue;
+    }
+    if (m.role === "assistant") {
+      const id = `assistant-${m.id}`;
+      const blocks = [];
+      const stored2 = m.blocks ?? [];
+      stored2.forEach((b, i) => {
+        const sanitised = sanitiseBlock({ ...b});
+        if (sanitised.kind === "paragraph_brief") {
+          sanitised.prose = m.prose?.[String(i)] ?? "";
+        }
+        blocks[i] = sanitised;
+      });
+      const joinedProse = Object.values(m.prose ?? {}).filter(Boolean).join("\n\n");
+      uiMessages.push({
+        id,
+        role: "assistant",
+        content: joinedProse
+      });
+      blocksMap[id] = blocks;
+      if (joinedProse) proseMap[id] = joinedProse;
+      if (m.errorJson) errorsMap[id] = m.errorJson;
+    }
+  }
+  return { uiMessages, blocksMap, proseMap, errorsMap };
+}
+
+// src/ui/index.tsx
+var chatInterfaces = [
+  {
+    id: "custom",
+    label: "Custom",
+    description: "Bespoke SSE chat with structured blocks and prose narrator pass.",
+    Component: AiChat
+  },
+  {
+    id: "vercel",
+    label: "Vercel",
+    description: "Vercel AI SDK chat with native tool loop and data-stream protocol.",
+    Component: VercelChat
+  }
+];
+function getChatInterface(id) {
+  return chatInterfaces.find((c) => c.id === id) ?? chatInterfaces[0];
+}
 
 exports.AiChat = AiChat;
 exports.AnswerBlocks = AnswerBlocks;
+exports.VercelChat = VercelChat;
+exports.chatInterfaces = chatInterfaces;
+exports.getChatInterface = getChatInterface;
 exports.sanitiseBlock = sanitiseBlock;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map