@firstlovecenter/ai-chat 0.9.3 → 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;
 }