@firstlovecenter/ai-chat 0.7.0 → 0.8.1

package/dist/ui/index.d.cts

@@ -8,8 +8,14 @@ type AiChatProps$1 = {
     scopeLabel: string;
     /** User's stored narrative provider, surfaced as the model picker default. */
     initialProvider: NarrativeProvider;
+    /**
+     * Session to open on mount. The host resolves this from the URL
+     * (`/chat/[id]`) so reload/bookmark/multi-tab restore the exact
+     * conversation. `null` (or omitted) renders the empty new-chat state.
+     */
+    initialSessionId?: number | null;
 };
-declare function AiChat({ userFirstName, scopeLabel, initialProvider }: AiChatProps$1): react_jsx_runtime.JSX.Element;
+declare function AiChat({ userFirstName, scopeLabel, initialProvider, initialSessionId }: AiChatProps$1): react_jsx_runtime.JSX.Element;
 
 type AiChatSessionSummary = {
     id: number;
@@ -22,9 +28,16 @@ type AiChatProps = {
     scopeLabel: string;
     /** User's stored narrative provider, surfaced as the model picker default. */
     initialProvider: 'claude' | 'grok' | 'gemini';
+    /**
+     * Session to open on mount. The host resolves this from the URL
+     * (`/chat/[id]`) so reload/bookmark/multi-tab restore the exact
+     * conversation the user was viewing. Pass `null` (or omit) for the
+     * empty "new chat" state.
+     */
+    initialSessionId?: number | null;
 };
 
-declare function VercelChat({ userFirstName, scopeLabel, initialProvider }: AiChatProps): react_jsx_runtime.JSX.Element;
+declare function VercelChat({ userFirstName, scopeLabel, initialProvider, initialSessionId }: AiChatProps): react_jsx_runtime.JSX.Element;
 
 type ChartSpec = {
     type: 'line' | 'bar' | 'stacked_bar' | 'pie';

package/dist/ui/index.d.ts

@@ -8,8 +8,14 @@ type AiChatProps$1 = {
     scopeLabel: string;
     /** User's stored narrative provider, surfaced as the model picker default. */
     initialProvider: NarrativeProvider;
+    /**
+     * Session to open on mount. The host resolves this from the URL
+     * (`/chat/[id]`) so reload/bookmark/multi-tab restore the exact
+     * conversation. `null` (or omitted) renders the empty new-chat state.
+     */
+    initialSessionId?: number | null;
 };
-declare function AiChat({ userFirstName, scopeLabel, initialProvider }: AiChatProps$1): react_jsx_runtime.JSX.Element;
+declare function AiChat({ userFirstName, scopeLabel, initialProvider, initialSessionId }: AiChatProps$1): react_jsx_runtime.JSX.Element;
 
 type AiChatSessionSummary = {
     id: number;
@@ -22,9 +28,16 @@ type AiChatProps = {
     scopeLabel: string;
     /** User's stored narrative provider, surfaced as the model picker default. */
     initialProvider: 'claude' | 'grok' | 'gemini';
+    /**
+     * Session to open on mount. The host resolves this from the URL
+     * (`/chat/[id]`) so reload/bookmark/multi-tab restore the exact
+     * conversation the user was viewing. Pass `null` (or omit) for the
+     * empty "new chat" state.
+     */
+    initialSessionId?: number | null;
 };
 
-declare function VercelChat({ userFirstName, scopeLabel, initialProvider }: AiChatProps): react_jsx_runtime.JSX.Element;
+declare function VercelChat({ userFirstName, scopeLabel, initialProvider, initialSessionId }: AiChatProps): react_jsx_runtime.JSX.Element;
 
 type ChartSpec = {
     type: 'line' | 'bar' | 'stacked_bar' | 'pie';

package/dist/ui/index.js

@@ -1,6 +1,8 @@
 'use client';
 import * as React from 'react';
 import { useMemo, useState, useRef, useLayoutEffect, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 import { PanelLeftClose, Plus, Pencil, Trash2, Menu, Sparkles, Loader2, ChevronDown, Check, ArrowUp, Copy, RotateCcw, ChevronUp } from 'lucide-react';
 import { DropdownMenu as DropdownMenu$1 } from 'radix-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -651,10 +653,14 @@ var PROVIDER_DESCRIPTIONS = {
 function AiChat({
   userFirstName,
   scopeLabel,
-  initialProvider
+  initialProvider,
+  initialSessionId = null
 }) {
+  const router = useRouter();
   const [sessions, setSessions] = useState([]);
-  const [activeSessionId, setActiveSessionId] = useState(null);
+  const [activeSessionId, setActiveSessionId] = useState(
+    initialSessionId
+  );
   const [answers, setAnswers] = useState([]);
   const [pending, setPending] = useState(false);
   const [question, setQuestion] = useState("");
@@ -668,7 +674,6 @@ function AiChat({
   const textareaRef = useRef(null);
   const lastAnswerRef = useRef(null);
   const prevAnswersLen = useRef(0);
-  const autoOpenedRef = useRef(false);
   useLayoutEffect(() => {
     const el = textareaRef.current;
     if (!el) return;
@@ -684,33 +689,7 @@ function AiChat({
         if (!res.ok) return;
         const data = await res.json();
         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;
-        }
+        setSessions(data.sessions ?? []);
       } catch {
       }
     }
@@ -719,6 +698,35 @@ function AiChat({
       cancelled = true;
     };
   }, []);
+  useEffect(() => {
+    if (initialSessionId == null) {
+      setAnswers([]);
+      return;
+    }
+    let cancelled = false;
+    async function load(id) {
+      setLoadingSession(true);
+      try {
+        const res = await fetch(`/api/chat/sessions/${id}`, { cache: "no-store" });
+        if (cancelled) return;
+        if (!res.ok) {
+          setAnswers([]);
+          return;
+        }
+        const data = await res.json();
+        if (cancelled) return;
+        setAnswers(messagesToAnswers(data.messages ?? []));
+      } catch {
+        if (!cancelled) setAnswers([]);
+      } finally {
+        if (!cancelled) setLoadingSession(false);
+      }
+    }
+    void load(initialSessionId);
+    return () => {
+      cancelled = true;
+    };
+  }, [initialSessionId]);
   useEffect(() => {
     if (answers.length > prevAnswersLen.current && lastAnswerRef.current) {
       lastAnswerRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -734,11 +742,18 @@ function AiChat({
     } catch {
     }
   }, []);
+  const syncUrl = useCallback(
+    (id) => {
+      router.push(id == null ? "/chat" : `/chat/${id}`);
+    },
+    [router]
+  );
   const newChat = useCallback(() => {
     setActiveSessionId(null);
     setAnswers([]);
     setQuestion("");
-  }, []);
+    router.push("/chat?new");
+  }, [router]);
   const changeProvider = useCallback(
     async (next) => {
       if (next === provider || providerSaving) return;
@@ -761,23 +776,27 @@ function AiChat({
     },
     [provider, providerSaving]
   );
-  const openSession = useCallback(async (id) => {
-    setLoadingSession(true);
-    setActiveSessionId(id);
-    try {
-      const res = await fetch(`/api/chat/sessions/${id}`, { cache: "no-store" });
-      if (!res.ok) {
+  useCallback(
+    async (id) => {
+      setLoadingSession(true);
+      setActiveSessionId(id);
+      syncUrl(id);
+      try {
+        const res = await fetch(`/api/chat/sessions/${id}`, { cache: "no-store" });
+        if (!res.ok) {
+          setAnswers([]);
+          return;
+        }
+        const data = await res.json();
+        setAnswers(messagesToAnswers(data.messages ?? []));
+      } catch {
         setAnswers([]);
-        return;
+      } finally {
+        setLoadingSession(false);
       }
-      const data = await res.json();
-      setAnswers(messagesToAnswers(data.messages ?? []));
-    } catch {
-      setAnswers([]);
-    } finally {
-      setLoadingSession(false);
-    }
-  }, []);
+    },
+    [syncUrl]
+  );
   const persistTitle = useCallback(
     async (id, title) => {
       const trimmed = title.trim();
@@ -807,9 +826,10 @@ function AiChat({
       if (activeSessionId === id) {
         setActiveSessionId(null);
         setAnswers([]);
+        syncUrl(null);
       }
     },
-    [activeSessionId]
+    [activeSessionId, syncUrl]
   );
   const submit = useCallback(
     async (q) => {
@@ -829,6 +849,7 @@ function AiChat({
             const data = await create.json();
             sessionId = data.session.id;
             setActiveSessionId(sessionId);
+            syncUrl(sessionId);
             setSessions((prev) => [
               { id: data.session.id, title: data.session.title, updatedAt: null },
               ...prev
@@ -909,7 +930,7 @@ function AiChat({
         void refreshSessions();
       }
     },
-    [activeSessionId, pending, refreshSessions]
+    [activeSessionId, pending, refreshSessions, syncUrl]
   );
   const heroVisible = answers.length === 0 && !loadingSession;
   const greeting = useMemo(
@@ -983,13 +1004,10 @@ function AiChat({
             }
             return /* @__PURE__ */ jsxs("li", { className: "group relative", children: [
               /* @__PURE__ */ jsx(
-                "button",
+                Link,
                 {
-                  type: "button",
-                  onClick: () => {
-                    void openSession(s.id);
-                    setSidebarOpen(false);
-                  },
+                  href: `/chat/${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",
                     active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/80 hover:bg-sidebar-accent/60 hover:text-sidebar-foreground"
@@ -1470,10 +1488,14 @@ function asDataPart(v) {
 function VercelChat({
   userFirstName,
   scopeLabel,
-  initialProvider
+  initialProvider,
+  initialSessionId = null
 }) {
+  const router = useRouter();
   const [sessions, setSessions] = useState([]);
-  const [activeSessionId, setActiveSessionId] = useState(null);
+  const [activeSessionId, setActiveSessionId] = useState(
+    initialSessionId
+  );
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [loadingSession, setLoadingSession] = useState(false);
   const [provider, setProvider] = useState(initialProvider);
@@ -1487,7 +1509,6 @@ function VercelChat({
   const textareaRef = useRef(null);
   const lastAnswerRef = useRef(null);
   const prevAnswersLen = useRef(0);
-  const autoOpenedRef = useRef(false);
   const activeSessionIdRef = useRef(activeSessionId);
   const providerRef = useRef(provider);
   useEffect(() => {
@@ -1543,48 +1564,7 @@ function VercelChat({
         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;
-        }
+        setSessions(json.sessions ?? []);
       } catch {
       }
     }
@@ -1592,7 +1572,54 @@ function VercelChat({
     return () => {
       cancelled = true;
     };
-  }, [setMessages]);
+  }, []);
+  useEffect(() => {
+    if (initialSessionId == null) {
+      setMessages([]);
+      setHydratedBlocks({});
+      setHydratedProse({});
+      setHydratedErrors({});
+      return;
+    }
+    let cancelled = false;
+    async function load(id) {
+      setLoadingSession(true);
+      try {
+        const res = await fetch(`/api/chat/sessions/${id}`, { cache: "no-store" });
+        if (cancelled) return;
+        if (!res.ok) {
+          setMessages([]);
+          setHydratedBlocks({});
+          setHydratedProse({});
+          setHydratedErrors({});
+          return;
+        }
+        const json = await res.json();
+        if (cancelled) return;
+        const { uiMessages, blocksMap, proseMap, errorsMap } = storedToUseChat(
+          json.messages ?? []
+        );
+        setMessages(uiMessages);
+        setHydratedBlocks(blocksMap);
+        setHydratedProse(proseMap);
+        setHydratedErrors(errorsMap);
+        setStartedAt({});
+      } catch {
+        if (!cancelled) {
+          setMessages([]);
+          setHydratedBlocks({});
+          setHydratedProse({});
+          setHydratedErrors({});
+        }
+      } finally {
+        if (!cancelled) setLoadingSession(false);
+      }
+    }
+    void load(initialSessionId);
+    return () => {
+      cancelled = true;
+    };
+  }, [initialSessionId, setMessages]);
   const answers = useMemo(() => {
     const liveBlocks = [];
     const liveErrors = [];
@@ -1691,6 +1718,12 @@ function VercelChat({
     }
     prevAnswersLen.current = answers.length;
   }, [answers.length]);
+  const syncUrl = useCallback(
+    (id) => {
+      router.push(id == null ? "/chat" : `/chat/${id}`);
+    },
+    [router]
+  );
   const newChat = useCallback(() => {
     setActiveSessionId(null);
     setMessages([]);
@@ -1699,7 +1732,8 @@ function VercelChat({
     setHydratedErrors({});
     setStartedAt({});
     setInput("");
-  }, [setMessages, setInput]);
+    router.push("/chat?new");
+  }, [setMessages, setInput, router]);
   const changeProvider = useCallback(
     async (next) => {
       if (next === provider || providerSaving) return;
@@ -1722,10 +1756,11 @@ function VercelChat({
     },
     [provider, providerSaving]
   );
-  const openSession = useCallback(
+  useCallback(
     async (id) => {
       setLoadingSession(true);
       setActiveSessionId(id);
+      syncUrl(id);
       try {
         const res = await fetch(`/api/chat/sessions/${id}`, { cache: "no-store" });
         if (!res.ok) {
@@ -1753,7 +1788,7 @@ function VercelChat({
         setLoadingSession(false);
       }
     },
-    [setMessages]
+    [setMessages, syncUrl]
   );
   const persistTitle = useCallback(
     async (id, title) => {
@@ -1787,9 +1822,10 @@ function VercelChat({
         setHydratedBlocks({});
         setHydratedProse({});
         setHydratedErrors({});
+        syncUrl(null);
       }
     },
-    [activeSessionId, setMessages]
+    [activeSessionId, setMessages, syncUrl]
   );
   const submitForm = useCallback(
     async (e) => {
@@ -1806,6 +1842,7 @@ function VercelChat({
             const json = await create.json();
             activeSessionIdRef.current = json.session.id;
             setActiveSessionId(json.session.id);
+            syncUrl(json.session.id);
             setSessions((prev) => [
               { id: json.session.id, title: json.session.title, updatedAt: null },
               ...prev
@@ -1816,7 +1853,7 @@ function VercelChat({
       }
       handleSubmit(e);
     },
-    [input, status, handleSubmit]
+    [input, status, handleSubmit, syncUrl]
   );
   useEffect(() => {
     setStartedAt((prev) => {
@@ -1924,13 +1961,10 @@ function VercelChat({
             }
             return /* @__PURE__ */ jsxs("li", { className: "group relative", children: [
               /* @__PURE__ */ jsx(
-                "button",
+                Link,
                 {
-                  type: "button",
-                  onClick: () => {
-                    void openSession(s.id);
-                    setSidebarOpen(false);
-                  },
+                  href: `/chat/${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",
                     active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/80 hover:bg-sidebar-accent/60 hover:text-sidebar-foreground"