@farming-labs/theme 0.2.3 → 0.2.4

package/dist/ai-markdown.mjs

@@ -1,6 +1,7 @@
 import { highlight } from "sugar-high";
 
 //#region src/ai-markdown.ts
+const codeBlockTokenBoundary = String.fromCharCode(0);
 function buildCodeBlock(lang, code) {
 	const highlighted = highlight(code.replace(/\n$/, "")).replace(/<\/span>\n<span/g, "</span><span");
 	return `<div class="fd-ai-code-block"><div class="fd-ai-code-header">${lang ? `<div class="fd-ai-code-lang">${escapeHtml(lang)}</div>` : ""}<button class="fd-ai-code-copy" onclick="(function(btn){var code=btn.closest('.fd-ai-code-block').querySelector('code').textContent;navigator.clipboard.writeText(code).then(function(){btn.textContent='Copied!';setTimeout(function(){btn.textContent='Copy'},1500)})})(this)">Copy</button></div><pre><code>${highlighted}</code></pre></div>`;
@@ -51,13 +52,36 @@ function replaceFencedCodeBlocks(text, codeBlocks, tokenBoundary) {
 	return output.join("\n");
 }
 function renderAIResponseMarkdown(text) {
-	const codeBlockTokenBoundary = String.fromCharCode(0);
-	const codeBlockTokenPattern = new RegExp(`${codeBlockTokenBoundary}CB(\\d+)${codeBlockTokenBoundary}`, "g");
 	const codeBlocks = [];
-	const lines = replaceFencedCodeBlocks(text, codeBlocks, codeBlockTokenBoundary).split("\n");
+	return renderMarkdownBlocks(replaceFencedCodeBlocks(text, codeBlocks, codeBlockTokenBoundary), codeBlocks);
+}
+function renderMarkdownBlocks(text, codeBlocks) {
+	const lines = text.split("\n");
 	const output = [];
 	let i = 0;
 	while (i < lines.length) {
+		const trimmed = lines[i].trim();
+		if (!trimmed) {
+			i++;
+			continue;
+		}
+		const codeBlockIndex = getCodeBlockTokenIndex(trimmed);
+		if (codeBlockIndex !== null) {
+			output.push(codeBlocks[codeBlockIndex] ?? "");
+			i++;
+			continue;
+		}
+		if (isHorizontalRule(trimmed)) {
+			output.push("<hr class=\"fd-ai-hr\" />");
+			i++;
+			continue;
+		}
+		const heading = getHeading(trimmed);
+		if (heading) {
+			output.push(`<h${heading.level}>${renderInlineMarkdown(heading.text)}</h${heading.level}>`);
+			i++;
+			continue;
+		}
 		if (isTableRow(lines[i]) && i + 1 < lines.length && isTableSeparator(lines[i + 1])) {
 			const tableLines = [lines[i]];
 			i++;
@@ -69,17 +93,82 @@ function renderAIResponseMarkdown(text) {
 			output.push(renderTable(tableLines));
 			continue;
 		}
-		output.push(lines[i]);
+		const unorderedItems = collectListItems(lines, i, "unordered");
+		if (unorderedItems) {
+			output.push(`<ul>${unorderedItems.items.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join("")}</ul>`);
+			i = unorderedItems.nextIndex;
+			continue;
+		}
+		const orderedItems = collectListItems(lines, i, "ordered");
+		if (orderedItems) {
+			output.push(`<ol>${orderedItems.items.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join("")}</ol>`);
+			i = orderedItems.nextIndex;
+			continue;
+		}
+		const paragraphLines = [];
+		while (i < lines.length && lines[i].trim() && !isMarkdownBlockStart(lines, i)) {
+			paragraphLines.push(lines[i].trim());
+			i++;
+		}
+		output.push(`<p>${paragraphLines.map((paragraphLine) => renderInlineMarkdown(paragraphLine)).join("<br>")}</p>`);
+	}
+	return output.join("");
+}
+function getCodeBlockTokenIndex(line) {
+	const prefix = `${codeBlockTokenBoundary}CB`;
+	if (!line.startsWith(prefix) || !line.endsWith(codeBlockTokenBoundary)) return null;
+	const rawIndex = line.slice(prefix.length, -1);
+	if (!/^\d+$/.test(rawIndex)) return null;
+	return Number(rawIndex);
+}
+function getHeading(line) {
+	const match = /^(#{1,4})\s+(.+)$/.exec(line);
+	if (!match) return null;
+	return {
+		level: match[1].length + 1,
+		text: match[2]
+	};
+}
+function collectListItems(lines, startIndex, type) {
+	const pattern = type === "ordered" ? /^(?: {0,3})\d+\.\s+(.+)$/ : /^(?: {0,3})[-*+]\s+(.+)$/;
+	const items = [];
+	let i = startIndex;
+	while (i < lines.length) {
+		const match = pattern.exec(lines[i]);
+		if (!match) break;
+		items.push(match[1]);
 		i++;
 	}
-	let result = output.join("\n");
-	result = result.replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>").replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, "<em>$1</em>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, "<a href=\"$2\">$1</a>").replace(/^### (.*$)/gm, "<h4>$1</h4>").replace(/^## (.*$)/gm, "<h3>$1</h3>").replace(/^# (.*$)/gm, "<h2>$1</h2>").replace(/^[-*] (.*$)/gm, "<div style=\"display:flex;gap:8px;padding:2px 0\"><span style=\"opacity:0.5\">•</span><span>$1</span></div>").replace(/^(\d+)\. (.*$)/gm, "<div style=\"display:flex;gap:8px;padding:2px 0\"><span style=\"opacity:0.5\">$1.</span><span>$2</span></div>").replace(/\n\n/g, "<div style=\"height:8px\"></div>").replace(/\n/g, "<br>");
-	result = result.replace(codeBlockTokenPattern, (_m, idx) => codeBlocks[Number(idx)]);
-	return result;
+	return items.length > 0 ? {
+		items,
+		nextIndex: i
+	} : null;
+}
+function isMarkdownBlockStart(lines, index) {
+	const line = lines[index];
+	const trimmed = line.trim();
+	return getCodeBlockTokenIndex(trimmed) !== null || isHorizontalRule(trimmed) || Boolean(getHeading(trimmed)) || isTableRow(line) && index + 1 < lines.length && isTableSeparator(lines[index + 1]) || Boolean(collectListItems(lines, index, "unordered")) || Boolean(collectListItems(lines, index, "ordered"));
+}
+function renderInlineMarkdown(text) {
+	const inlineCodeTokens = [];
+	let result = escapeHtml(text).replace(/`([^`]+)`/g, (_match, code) => {
+		inlineCodeTokens.push(`<code>${code}</code>`);
+		return `${codeBlockTokenBoundary}IC${inlineCodeTokens.length - 1}${codeBlockTokenBoundary}`;
+	});
+	result = result.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>").replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, "<em>$1</em>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, label, href) => {
+		return `<a href="${escapeAttribute(href)}">${label}</a>`;
+	});
+	return result.replace(new RegExp(`${codeBlockTokenBoundary}IC(\\d+)${codeBlockTokenBoundary}`, "g"), (_match, idx) => inlineCodeTokens[Number(idx)] ?? "");
 }
 function escapeHtml(s) {
 	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
+function escapeAttribute(s) {
+	return escapeHtml(s).replace(/"/g, "&quot;");
+}
+function isHorizontalRule(line) {
+	return /^(?:-{3,}|\*{3,}|_{3,})$/.test(line);
+}
 function isTableRow(line) {
 	const trimmed = line.trim();
 	return trimmed.startsWith("|") && trimmed.endsWith("|") && trimmed.includes("|");
@@ -89,8 +178,8 @@ function isTableSeparator(line) {
 }
 function renderTable(rows) {
 	const parseRow = (row) => row.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((c) => c.trim());
-	return `<table>${`<thead><tr>${parseRow(rows[0]).map((c) => `<th>${c}</th>`).join("")}</tr></thead>`}<tbody>${rows.slice(1).map((row) => {
-		return `<tr>${parseRow(row).map((c) => `<td>${c}</td>`).join("")}</tr>`;
+	return `<table>${`<thead><tr>${parseRow(rows[0]).map((c) => `<th>${renderInlineMarkdown(c)}</th>`).join("")}</tr></thead>`}<tbody>${rows.slice(1).map((row) => {
+		return `<tr>${parseRow(row).map((c) => `<td>${renderInlineMarkdown(c)}</td>`).join("")}</tr>`;
 	}).join("")}</tbody></table>`;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/theme",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Theme package for @farming-labs/docs — layout, provider, MDX components, and styles",
   "keywords": [
     "docs",
@@ -145,7 +145,7 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vitest": "^4.1.8",
-    "@farming-labs/docs": "0.2.3"
+    "@farming-labs/docs": "0.2.4"
   },
   "peerDependencies": {
     "@farming-labs/docs": ">=0.0.1",

package/styles/ai.css

@@ -924,6 +924,35 @@
   color: inherit;
 }
 
+.fd-ai-bubble-ai h5 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 8px 0 4px;
+  line-height: 1.4;
+  color: inherit;
+}
+
+.fd-ai-bubble-ai ul,
+.fd-ai-bubble-ai ol {
+  margin: 6px 0 8px;
+  padding-left: 1.25rem;
+}
+
+.fd-ai-bubble-ai li {
+  margin: 3px 0;
+  padding-left: 2px;
+}
+
+.fd-ai-bubble-ai li::marker {
+  color: var(--color-fd-muted-foreground, #71717a);
+}
+
+.fd-ai-bubble-ai .fd-ai-hr {
+  border: 0;
+  border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  margin: 12px 0;
+}
+
 .fd-ai-bubble-ai strong {
   font-weight: 600;
   color: var(--color-fd-foreground, #e4e4e7);
@@ -1251,6 +1280,35 @@
   color: var(--color-fd-foreground, #e4e4e7);
 }
 
+.fd-ai-fm-msg-content h5 {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  margin: 10px 0 4px;
+  line-height: 1.4;
+  color: var(--color-fd-foreground, #e4e4e7);
+}
+
+.fd-ai-fm-msg-content ul,
+.fd-ai-fm-msg-content ol {
+  margin: 8px 0 10px;
+  padding-left: 1.35rem;
+}
+
+.fd-ai-fm-msg-content li {
+  margin: 4px 0;
+  padding-left: 2px;
+}
+
+.fd-ai-fm-msg-content li::marker {
+  color: var(--color-fd-muted-foreground, #71717a);
+}
+
+.fd-ai-fm-msg-content .fd-ai-hr {
+  border: 0;
+  border-top: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
+  margin: 16px 0;
+}
+
 .fd-ai-fm-msg-content strong {
   font-weight: 600;
   color: var(--color-fd-foreground, #e4e4e7);