@firstlovecenter/ai-chat 0.7.0 → 0.8.1

package/dist/ui/index.cjs

@@ -2,12 +2,16 @@
 'use strict';
 
 var React = require('react');
+var navigation = require('next/navigation');
+var Link = require('next/link');
 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 _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -27,6 +31,7 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Link__default = /*#__PURE__*/_interopDefault(Link);
 var RechartsPrimitive__namespace = /*#__PURE__*/_interopNamespace(RechartsPrimitive);
 
 // src/ui/_shared/cn.ts
@@ -672,10 +677,14 @@ var PROVIDER_DESCRIPTIONS = {
 function AiChat({
   userFirstName,
   scopeLabel,
-  initialProvider
+  initialProvider,
+  initialSessionId = null
 }) {
+  const router = navigation.useRouter();
   const [sessions, setSessions] = React.useState([]);
-  const [activeSessionId, setActiveSessionId] = React.useState(null);
+  const [activeSessionId, setActiveSessionId] = React.useState(
+    initialSessionId
+  );
   const [answers, setAnswers] = React.useState([]);
   const [pending, setPending] = React.useState(false);
   const [question, setQuestion] = React.useState("");
@@ -689,7 +698,6 @@ 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;
@@ -705,33 +713,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 {
       }
     }
@@ -740,6 +722,35 @@ function AiChat({
       cancelled = true;
     };
   }, []);
+  React.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]);
   React.useEffect(() => {
     if (answers.length > prevAnswersLen.current && lastAnswerRef.current) {
       lastAnswerRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -755,11 +766,18 @@ function AiChat({
     } catch {
     }
   }, []);
+  const syncUrl = React.useCallback(
+    (id) => {
+      router.push(id == null ? "/chat" : `/chat/${id}`);
+    },
+    [router]
+  );
   const newChat = React.useCallback(() => {
     setActiveSessionId(null);
     setAnswers([]);
     setQuestion("");
-  }, []);
+    router.push("/chat?new");
+  }, [router]);
   const changeProvider = React.useCallback(
     async (next) => {
       if (next === provider || providerSaving) return;
@@ -782,23 +800,27 @@ function AiChat({
     },
     [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) {
+  React.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 = React.useCallback(
     async (id, title) => {
       const trimmed = title.trim();
@@ -828,9 +850,10 @@ function AiChat({
       if (activeSessionId === id) {
         setActiveSessionId(null);
         setAnswers([]);
+        syncUrl(null);
       }
     },
-    [activeSessionId]
+    [activeSessionId, syncUrl]
   );
   const submit = React.useCallback(
     async (q) => {
@@ -850,6 +873,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
@@ -930,7 +954,7 @@ function AiChat({
         void refreshSessions();
       }
     },
-    [activeSessionId, pending, refreshSessions]
+    [activeSessionId, pending, refreshSessions, syncUrl]
   );
   const heroVisible = answers.length === 0 && !loadingSession;
   const greeting = React.useMemo(
@@ -1004,13 +1028,10 @@ function AiChat({
             }
             return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "group relative", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                Link__default.default,
                 {
-                  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"
@@ -1491,10 +1512,14 @@ function asDataPart(v) {
 function VercelChat({
   userFirstName,
   scopeLabel,
-  initialProvider
+  initialProvider,
+  initialSessionId = null
 }) {
+  const router = navigation.useRouter();
   const [sessions, setSessions] = React.useState([]);
-  const [activeSessionId, setActiveSessionId] = React.useState(null);
+  const [activeSessionId, setActiveSessionId] = React.useState(
+    initialSessionId
+  );
   const [sidebarOpen, setSidebarOpen] = React.useState(false);
   const [loadingSession, setLoadingSession] = React.useState(false);
   const [provider, setProvider] = React.useState(initialProvider);
@@ -1508,7 +1533,6 @@ function VercelChat({
   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(() => {
@@ -1564,48 +1588,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 {
       }
     }
@@ -1613,7 +1596,54 @@ function VercelChat({
     return () => {
       cancelled = true;
     };
-  }, [setMessages]);
+  }, []);
+  React.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 = React.useMemo(() => {
     const liveBlocks = [];
     const liveErrors = [];
@@ -1712,6 +1742,12 @@ function VercelChat({
     }
     prevAnswersLen.current = answers.length;
   }, [answers.length]);
+  const syncUrl = React.useCallback(
+    (id) => {
+      router.push(id == null ? "/chat" : `/chat/${id}`);
+    },
+    [router]
+  );
   const newChat = React.useCallback(() => {
     setActiveSessionId(null);
     setMessages([]);
@@ -1720,7 +1756,8 @@ function VercelChat({
     setHydratedErrors({});
     setStartedAt({});
     setInput("");
-  }, [setMessages, setInput]);
+    router.push("/chat?new");
+  }, [setMessages, setInput, router]);
   const changeProvider = React.useCallback(
     async (next) => {
       if (next === provider || providerSaving) return;
@@ -1743,10 +1780,11 @@ function VercelChat({
     },
     [provider, providerSaving]
   );
-  const openSession = React.useCallback(
+  React.useCallback(
     async (id) => {
       setLoadingSession(true);
       setActiveSessionId(id);
+      syncUrl(id);
       try {
         const res = await fetch(`/api/chat/sessions/${id}`, { cache: "no-store" });
         if (!res.ok) {
@@ -1774,7 +1812,7 @@ function VercelChat({
         setLoadingSession(false);
       }
     },
-    [setMessages]
+    [setMessages, syncUrl]
   );
   const persistTitle = React.useCallback(
     async (id, title) => {
@@ -1808,9 +1846,10 @@ function VercelChat({
         setHydratedBlocks({});
         setHydratedProse({});
         setHydratedErrors({});
+        syncUrl(null);
       }
     },
-    [activeSessionId, setMessages]
+    [activeSessionId, setMessages, syncUrl]
   );
   const submitForm = React.useCallback(
     async (e) => {
@@ -1827,6 +1866,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
@@ -1837,7 +1877,7 @@ function VercelChat({
       }
       handleSubmit(e);
     },
-    [input, status, handleSubmit]
+    [input, status, handleSubmit, syncUrl]
   );
   React.useEffect(() => {
     setStartedAt((prev) => {
@@ -1945,13 +1985,10 @@ function VercelChat({
             }
             return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "group relative", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                Link__default.default,
                 {
-                  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"