@firstlovecenter/ai-chat 0.9.3 → 0.9.4

package/CHANGELOG.md

@@ -5,6 +5,18 @@ 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.4] — 2026-05-09
+
+Markdown in assistant answers now actually renders as markdown.
+
+### Fixed
+
+- **Literal `**bold**` / `*italic*` showing in chat output.** `paragraph_brief` prose, `list` items, and `callout` text were rendered as plain text inside `<p>{block.prose}</p>`, so markdown emitted by the model leaked through verbatim. The renderer now pipes those three block types through `react-markdown` (with `remark-gfm`) and a small components map that keeps the existing `text-sm leading-6` look. Errors and the user's own messages are still rendered as plain text — only model-authored content is parsed.
+
+### Added
+
+- **`react-markdown` + `remark-gfm` dependencies.** Required by the change above. The `ui` bundle grows by ~30 KB gzipped — small enough that no lazy-load gymnastics are warranted.
+
 ## [0.9.3] — 2026-05-09
 
 Fixes the actual root cause of the "messages persisted but reload shows empty thread" bug — turns out it was at the data layer, not the navigation layer.

package/dist/ui/index.cjs

@@ -7,6 +7,8 @@ var Link = require('next/link');
 var lucideReact = require('lucide-react');
 var radixUi = require('radix-ui');
 var jsxRuntime = require('react/jsx-runtime');
+var ReactMarkdown = require('react-markdown');
+var remarkGfm = require('remark-gfm');
 var RechartsPrimitive = require('recharts');
 var react = require('@ai-sdk/react');
 
@@ -32,6 +34,8 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Link__default = /*#__PURE__*/_interopDefault(Link);
+var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
+var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
 var RechartsPrimitive__namespace = /*#__PURE__*/_interopNamespace(RechartsPrimitive);
 
 // src/ui/_shared/cn.ts
@@ -512,22 +516,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__ */ jsxRuntime.jsx("p", { className: "mb-2 last:mb-0", children }),
+  ul: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "my-1 list-disc pl-6", children }),
+  ol: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "my-1 list-decimal pl-6", children }),
+  li: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "leading-6", children }),
+  strong: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "font-semibold", children }),
+  em: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("em", { className: "italic", children }),
+  code: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("code", { className: "rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]", children }),
+  a: ({ children, href }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noreferrer noopener",
+      className: "underline underline-offset-2",
+      children
+    }
+  )
+};
+var INLINE_MD_COMPONENTS = {
+  ...PROSE_MD_COMPONENTS,
+  p: ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children })
+};
+function ProseMarkdown({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { remarkPlugins: [remarkGfm__default.default], components: PROSE_MD_COMPONENTS, children });
+}
+function InlineMarkdown({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { remarkPlugins: [remarkGfm__default.default], components: INLINE_MD_COMPONENTS, children });
+}
 function AnswerBlocks({ blocks }) {
   const visible = blocks.filter((b) => !isBlockEmpty(b));
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3", children: visible.map((b, i) => /* @__PURE__ */ jsxRuntime.jsx(BlockView, { block: b }, i)) });
 }
 function BlockView({ block }) {
   if (block.kind === "paragraph_brief") {
-    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "whitespace-pre-wrap text-sm leading-6 text-foreground", children: block.prose || /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
-      block.key_facts.join(". "),
-      "\u2026"
-    ] }) });
+    if (!block.prose) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm leading-6 text-muted-foreground", children: [
+        block.key_facts.join(". "),
+        "\u2026"
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-6 text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(ProseMarkdown, { children: block.prose }) });
   }
   if (block.kind === "list") {
     const Tag = block.style === "numbered" ? "ol" : "ul";
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       block.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 text-sm font-medium", children: block.title }),
-      /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: block.style === "numbered" ? "list-decimal pl-6" : "list-disc pl-6", children: block.items.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-sm leading-6", children: it }, i)) })
+      /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: block.style === "numbered" ? "list-decimal pl-6" : "list-disc pl-6", children: block.items.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "text-sm leading-6", children: /* @__PURE__ */ jsxRuntime.jsx(InlineMarkdown, { children: it }) }, i)) })
     ] });
   }
   if (block.kind === "chart") {
@@ -544,7 +580,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__ */ jsxRuntime.jsx("div", { className: `rounded border p-3 text-sm ${cls}`, children: block.text });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `rounded border p-3 text-sm leading-6 ${cls}`, children: /* @__PURE__ */ jsxRuntime.jsx(ProseMarkdown, { children: block.text }) });
   }
   return null;
 }