@firstlovecenter/ai-chat 0.9.2 → 0.9.4

package/dist/ui/index.js

@@ -6,6 +6,8 @@ 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';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 import * as RechartsPrimitive from 'recharts';
 import { PieChart, Pie, Cell, Label, BarChart, CartesianGrid, XAxis, YAxis, Bar, LineChart, Line } from 'recharts';
 import { useChat } from '@ai-sdk/react';
@@ -488,22 +490,54 @@ function isBlockEmpty(b) {
   if (b.kind === "table") return !Array.isArray(b.rows) || b.rows.length === 0;
   return false;
 }
+var PROSE_MD_COMPONENTS = {
+  p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "mb-2 last:mb-0", children }),
+  ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "my-1 list-disc pl-6", children }),
+  ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "my-1 list-decimal pl-6", children }),
+  li: ({ children }) => /* @__PURE__ */ jsx("li", { className: "leading-6", children }),
+  strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold", children }),
+  em: ({ children }) => /* @__PURE__ */ jsx("em", { className: "italic", children }),
+  code: ({ children }) => /* @__PURE__ */ jsx("code", { className: "rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]", children }),
+  a: ({ children, href }) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noreferrer noopener",
+      className: "underline underline-offset-2",
+      children
+    }
+  )
+};
+var INLINE_MD_COMPONENTS = {
+  ...PROSE_MD_COMPONENTS,
+  p: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children })
+};
+function ProseMarkdown({ children }) {
+  return /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: PROSE_MD_COMPONENTS, children });
+}
+function InlineMarkdown({ children }) {
+  return /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: INLINE_MD_COMPONENTS, children });
+}
 function AnswerBlocks({ blocks }) {
   const visible = blocks.filter((b) => !isBlockEmpty(b));
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: visible.map((b, i) => /* @__PURE__ */ jsx(BlockView, { block: b }, i)) });
 }
 function BlockView({ block }) {
   if (block.kind === "paragraph_brief") {
-    return /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-sm leading-6 text-foreground", children: block.prose || /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-      block.key_facts.join(". "),
-      "\u2026"
-    ] }) });
+    if (!block.prose) {
+      return /* @__PURE__ */ jsxs("p", { className: "text-sm leading-6 text-muted-foreground", children: [
+        block.key_facts.join(". "),
+        "\u2026"
+      ] });
+    }
+    return /* @__PURE__ */ jsx("div", { className: "text-sm leading-6 text-foreground", children: /* @__PURE__ */ jsx(ProseMarkdown, { children: block.prose }) });
   }
   if (block.kind === "list") {
     const Tag = block.style === "numbered" ? "ol" : "ul";
     return /* @__PURE__ */ jsxs("div", { children: [
       block.title && /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium", children: block.title }),
-      /* @__PURE__ */ jsx(Tag, { className: block.style === "numbered" ? "list-decimal pl-6" : "list-disc pl-6", children: block.items.map((it, i) => /* @__PURE__ */ jsx("li", { className: "text-sm leading-6", children: it }, i)) })
+      /* @__PURE__ */ jsx(Tag, { className: block.style === "numbered" ? "list-decimal pl-6" : "list-disc pl-6", children: block.items.map((it, i) => /* @__PURE__ */ jsx("li", { className: "text-sm leading-6", children: /* @__PURE__ */ jsx(InlineMarkdown, { children: it }) }, i)) })
     ] });
   }
   if (block.kind === "chart") {
@@ -520,7 +554,7 @@ function BlockView({ block }) {
   }
   if (block.kind === "callout") {
     const cls = block.tone === "warn" ? "border-amber-300 dark:border-amber-800 bg-amber-50 dark:bg-amber-950/30 text-amber-900 dark:text-amber-100" : block.tone === "success" ? "border-emerald-300 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-950/30 text-emerald-900 dark:text-emerald-100" : "border-sky-300 bg-sky-50 text-sky-900";
-    return /* @__PURE__ */ jsx("div", { className: `rounded border p-3 text-sm ${cls}`, children: block.text });
+    return /* @__PURE__ */ jsx("div", { className: `rounded border p-3 text-sm leading-6 ${cls}`, children: /* @__PURE__ */ jsx(ProseMarkdown, { children: block.text }) });
   }
   return null;
 }
@@ -699,6 +733,11 @@ function AiChat({
       cancelled = true;
     };
   }, []);
+  useEffect(() => {
+    if (initialSessionId != null && activeSessionId !== initialSessionId) {
+      setActiveSessionId(initialSessionId);
+    }
+  }, [initialSessionId]);
   useEffect(() => {
     if (initialSessionId == null) {
       setAnswers([]);
@@ -711,13 +750,18 @@ function AiChat({
         const res = await fetch(`/api/chat/sessions/${id}`, { cache: "no-store" });
         if (cancelled) return;
         if (!res.ok) {
+          console.warn(
+            "[AiChat] hydration: GET /api/chat/sessions failed",
+            { id, status: res.status }
+          );
           setAnswers([]);
           return;
         }
         const data = await res.json();
         if (cancelled) return;
         setAnswers(messagesToAnswers(data.messages ?? []));
-      } catch {
+      } catch (err) {
+        console.error("[AiChat] hydration threw \u2014 setting empty answers", err);
         if (!cancelled) setAnswers([]);
       } finally {
         if (!cancelled) setLoadingSession(false);
@@ -1459,6 +1503,15 @@ function updateLast(prev, updater) {
   next[next.length - 1] = updater(next[next.length - 1]);
   return next;
 }
+function coerceJsonField(v) {
+  if (v == null) return null;
+  if (typeof v !== "string") return v;
+  try {
+    return JSON.parse(v);
+  } catch {
+    return null;
+  }
+}
 function messagesToAnswers(messages) {
   const out = [];
   let pendingUser = null;
@@ -1469,19 +1522,24 @@ function messagesToAnswers(messages) {
       const question = pendingUser ?? "";
       pendingUser = null;
       const blocks = [];
-      const stored = m.blocks ?? [];
-      stored.forEach((b, i) => {
-        const sanitised = sanitiseBlock({ ...b});
-        if (sanitised.kind === "paragraph_brief") {
-          sanitised.prose = m.prose?.[String(i)] ?? "";
-        }
-        blocks[i] = sanitised;
-      });
+      const storedBlocks = coerceJsonField(m.blocks) ?? [];
+      const storedProse = coerceJsonField(m.prose) ?? {};
+      const storedError = coerceJsonField(m.errorJson);
+      if (Array.isArray(storedBlocks)) {
+        storedBlocks.forEach((b, i) => {
+          const sanitised = sanitiseBlock({
+            ...b});
+          if (sanitised.kind === "paragraph_brief") {
+            sanitised.prose = storedProse[String(i)] ?? "";
+          }
+          blocks[i] = sanitised;
+        });
+      }
       out.push({
         question,
         blocks,
         done: true,
-        error: m.errorJson ?? void 0
+        error: storedError ?? void 0
       });
     }
   }
@@ -2377,6 +2435,15 @@ function UserChip2({ text }) {
     )
   ] });
 }
+function coerceJsonField2(v) {
+  if (v == null) return null;
+  if (typeof v !== "string") return v;
+  try {
+    return JSON.parse(v);
+  } catch {
+    return null;
+  }
+}
 function storedToUseChat(stored) {
   const uiMessages = [];
   const blocksMap = {};
@@ -2392,15 +2459,20 @@ function storedToUseChat(stored) {
     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");
+      const storedBlocks = coerceJsonField2(m.blocks) ?? [];
+      const storedProse = coerceJsonField2(m.prose) ?? {};
+      const storedError = coerceJsonField2(m.errorJson);
+      if (Array.isArray(storedBlocks)) {
+        storedBlocks.forEach((b, i) => {
+          const sanitised = sanitiseBlock({
+            ...b});
+          if (sanitised.kind === "paragraph_brief") {
+            sanitised.prose = storedProse[String(i)] ?? "";
+          }
+          blocks[i] = sanitised;
+        });
+      }
+      const joinedProse = Object.values(storedProse).filter(Boolean).join("\n\n");
       uiMessages.push({
         id,
         role: "assistant",
@@ -2408,7 +2480,7 @@ function storedToUseChat(stored) {
       });
       blocksMap[id] = blocks;
       if (joinedProse) proseMap[id] = joinedProse;
-      if (m.errorJson) errorsMap[id] = m.errorJson;
+      if (storedError) errorsMap[id] = storedError;
     }
   }
   return { uiMessages, blocksMap, proseMap, errorsMap };