@firstlovecenter/ai-chat 0.9.0 → 0.9.2

package/CHANGELOG.md

@@ -5,6 +5,32 @@ All notable changes to `@firstlovecenter/ai-chat` are documented here.
 The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and the project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.9.2] — 2026-05-09
+
+Fixes a streaming-vs-navigation race that caused the first turn of a brand-new conversation to vanish on reload.
+
+### Fixed
+
+- **Race condition on lazy-create-on-submit**. When the user sent the first message in a fresh conversation, the client used `router.push('/chat/<uid>')` to update the URL. App-Router navigation **unmounted the chat component mid-streaming**, so the in-flight SSE / Vercel-AI data stream was dropped on the floor. The newly-mounted page would then re-hydrate from `/api/chat/sessions/<uid>` *before* the assistant message had finished persisting — so reload showed an empty thread. Now the URL is updated via `window.history.replaceState` (shallow update, no remount), and the streaming connection survives. Affects both `AiChat` and `VercelChat`.
+
+### Added
+
+- **Defensive `meta` event handling**. The custom-SSE route emits `event: meta` carrying the persistent `chatSessionId` as its first frame; the Vercel route emits the same as a `{ type: 'meta' }` data part. Both shells now sync `activeSessionId` and the URL from that event as a backstop, so even if the lazy-create POST silently fails the client still picks up the server-resolved session id.
+
+## [0.9.1] — 2026-05-09
+
+Lets a host mount multiple chat surfaces side-by-side without yanking users between shells.
+
+### Added
+
+- **`AiChatProps.basePath`** (`string`, optional, default `'/chat'`) — URL prefix the chat surface is mounted at. Sidebar `<Link>` entries resolve to `${basePath}/${sessionId}`, `+ New chat` pushes `${basePath}?new`, and the open-session router push uses the same prefix. Both `AiChat` and `VercelChat` honour it.
+
+### Migration notes
+
+- Pure addition — `basePath` defaults to `/chat`, so existing `/chat`-mounted surfaces work unchanged.
+- Hosts that want a second surface (e.g. an admin AI page at `/admin/ai`) need to (a) pass `basePath="/admin/ai"`, (b) add a matching dynamic segment (`/admin/ai/[id]`) so reload/bookmark URLs resolve, and (c) wire a redirect-to-most-recent at the basePath that respects `?new`.
+- **Tailwind v4 hosts**: the package ships no CSS, so its component classes need to be in your Tailwind content scan. Add `@source "../node_modules/@firstlovecenter/ai-chat";` to your `globals.css` (path relative to the CSS file). Without this, the in-chat sidebar's `absolute`/`translate-x-*`/`bg-sidebar` classes are stripped from the production bundle and the sidebar renders as a static flex column instead of an overlay.
+
 ## [0.9.0] — 2026-05-09
 
 Chat session and message identifiers are now short URL-safe UIDs (12 chars) instead of auto-incrementing BIGINTs. URLs like `/chat/V1StGXR8_Z5j` don't leak per-user chat counts and are unguessable, which matters as soon as a session URL is ever shared.

package/dist/ui/index.cjs

@@ -678,7 +678,8 @@ function AiChat({
   userFirstName,
   scopeLabel,
   initialProvider,
-  initialSessionId = null
+  initialSessionId = null,
+  basePath = "/chat"
 }) {
   const router = navigation.useRouter();
   const [sessions, setSessions] = React.useState([]);
@@ -768,16 +769,16 @@ function AiChat({
   }, []);
   const syncUrl = React.useCallback(
     (id) => {
-      router.push(id == null ? "/chat" : `/chat/${id}`);
+      router.push(id == null ? basePath : `${basePath}/${id}`);
     },
-    [router]
+    [router, basePath]
   );
   const newChat = React.useCallback(() => {
     setActiveSessionId(null);
     setAnswers([]);
     setQuestion("");
-    router.push("/chat?new");
-  }, [router]);
+    router.push(`${basePath}?new`);
+  }, [router, basePath]);
   const changeProvider = React.useCallback(
     async (next) => {
       if (next === provider || providerSaving) return;
@@ -873,7 +874,9 @@ function AiChat({
             const data = await create.json();
             sessionId = data.session.id;
             setActiveSessionId(sessionId);
-            syncUrl(sessionId);
+            if (typeof window !== "undefined") {
+              window.history.replaceState(null, "", `${basePath}/${sessionId}`);
+            }
             setSessions((prev) => [
               { id: data.session.id, title: data.session.title, updatedAt: null },
               ...prev
@@ -935,6 +938,17 @@ function AiChat({
           const events = buffer.split("\n\n");
           buffer = events.pop() ?? "";
           for (const raw of events) {
+            const meta = parseMetaChatSessionId(raw);
+            if (meta != null) {
+              setActiveSessionId((prev) => prev ?? meta);
+              if (typeof window !== "undefined" && !window.location.pathname.endsWith(`/${meta}`)) {
+                window.history.replaceState(
+                  null,
+                  "",
+                  `${basePath}/${meta}`
+                );
+              }
+            }
             handleEvent(raw, setAnswers);
           }
         }
@@ -1030,7 +1044,7 @@ function AiChat({
               /* @__PURE__ */ jsxRuntime.jsx(
                 Link__default.default,
                 {
-                  href: `/chat/${s.id}`,
+                  href: `${basePath}/${s.id}`,
                   onClick: () => setSidebarOpen(false),
                   className: cn(
                     "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm",
@@ -1393,6 +1407,22 @@ function UserChip({ text }) {
     )
   ] });
 }
+function parseMetaChatSessionId(raw) {
+  const lines = raw.split("\n");
+  let event = "";
+  let dataStr = "";
+  for (const line of lines) {
+    if (line.startsWith("event: ")) event = line.slice(7).trim();
+    else if (line.startsWith("data: ")) dataStr += line.slice(6);
+  }
+  if (event !== "meta") return null;
+  try {
+    const parsed = JSON.parse(dataStr || "{}");
+    return typeof parsed.chatSessionId === "string" && parsed.chatSessionId.length > 0 ? parsed.chatSessionId : null;
+  } catch {
+    return null;
+  }
+}
 function handleEvent(raw, setAnswers) {
   const lines = raw.split("\n");
   let event = "";
@@ -1513,7 +1543,8 @@ function VercelChat({
   userFirstName,
   scopeLabel,
   initialProvider,
-  initialSessionId = null
+  initialSessionId = null,
+  basePath = "/chat"
 }) {
   const router = navigation.useRouter();
   const [sessions, setSessions] = React.useState([]);
@@ -1644,6 +1675,20 @@ function VercelChat({
       cancelled = true;
     };
   }, [initialSessionId, setMessages]);
+  React.useEffect(() => {
+    if (!Array.isArray(data)) return;
+    for (const raw of data) {
+      const part = asDataPart(raw);
+      if (!part || part.type !== "meta") continue;
+      const id = part.value.chatSessionId;
+      if (!id) continue;
+      setActiveSessionId((prev) => prev ?? id);
+      if (typeof window !== "undefined" && !window.location.pathname.endsWith(`/${id}`)) {
+        window.history.replaceState(null, "", `${basePath}/${id}`);
+      }
+      break;
+    }
+  }, [data, basePath]);
   const answers = React.useMemo(() => {
     const liveBlocks = [];
     const liveErrors = [];
@@ -1744,9 +1789,9 @@ function VercelChat({
   }, [answers.length]);
   const syncUrl = React.useCallback(
     (id) => {
-      router.push(id == null ? "/chat" : `/chat/${id}`);
+      router.push(id == null ? basePath : `${basePath}/${id}`);
     },
-    [router]
+    [router, basePath]
   );
   const newChat = React.useCallback(() => {
     setActiveSessionId(null);
@@ -1756,8 +1801,8 @@ function VercelChat({
     setHydratedErrors({});
     setStartedAt({});
     setInput("");
-    router.push("/chat?new");
-  }, [setMessages, setInput, router]);
+    router.push(`${basePath}?new`);
+  }, [setMessages, setInput, router, basePath]);
   const changeProvider = React.useCallback(
     async (next) => {
       if (next === provider || providerSaving) return;
@@ -1866,7 +1911,13 @@ function VercelChat({
             const json = await create.json();
             activeSessionIdRef.current = json.session.id;
             setActiveSessionId(json.session.id);
-            syncUrl(json.session.id);
+            if (typeof window !== "undefined") {
+              window.history.replaceState(
+                null,
+                "",
+                `${basePath}/${json.session.id}`
+              );
+            }
             setSessions((prev) => [
               { id: json.session.id, title: json.session.title, updatedAt: null },
               ...prev
@@ -1987,7 +2038,7 @@ function VercelChat({
               /* @__PURE__ */ jsxRuntime.jsx(
                 Link__default.default,
                 {
-                  href: `/chat/${s.id}`,
+                  href: `${basePath}/${s.id}`,
                   onClick: () => setSidebarOpen(false),
                   className: cn(
                     "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm",