@farming-labs/theme 0.2.2 → 0.2.4

package/dist/ai-markdown.mjs

@@ -0,0 +1,187 @@
+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>`;
+}
+function getCodeFenceOpening(line) {
+	const match = /^(?: {0,3})(`{3,}|~{3,})(.*)$/.exec(line);
+	if (!match) return null;
+	const marker = match[1];
+	const rawInfo = match[2] ?? "";
+	if (!marker) return null;
+	if (marker.startsWith("`") && rawInfo.includes("`")) return null;
+	return {
+		markerChar: marker[0],
+		markerLength: marker.length,
+		lang: extractCodeFenceLanguage(rawInfo)
+	};
+}
+function isCodeFenceClosing(line, fence) {
+	const trimmed = line.trim();
+	if (trimmed.length < fence.markerLength) return false;
+	for (const char of trimmed) if (char !== fence.markerChar) return false;
+	return true;
+}
+function extractCodeFenceLanguage(rawInfo) {
+	return (rawInfo.trim().split(/\s+/, 1)[0] ?? "").replace(/^\{\.?/, "").replace(/^\./, "").replace(/[},].*$/, "");
+}
+function replaceFencedCodeBlocks(text, codeBlocks, tokenBoundary) {
+	const lines = text.split("\n");
+	const output = [];
+	let i = 0;
+	while (i < lines.length) {
+		const fence = getCodeFenceOpening(lines[i]);
+		if (!fence) {
+			output.push(lines[i]);
+			i += 1;
+			continue;
+		}
+		const codeLines = [];
+		i += 1;
+		while (i < lines.length && !isCodeFenceClosing(lines[i], fence)) {
+			codeLines.push(lines[i]);
+			i += 1;
+		}
+		if (i < lines.length) i += 1;
+		codeBlocks.push(buildCodeBlock(fence.lang, codeLines.join("\n")));
+		output.push(`${tokenBoundary}CB${codeBlocks.length - 1}${tokenBoundary}`);
+	}
+	return output.join("\n");
+}
+function renderAIResponseMarkdown(text) {
+	const codeBlocks = [];
+	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++;
+			i++;
+			while (i < lines.length && isTableRow(lines[i])) {
+				tableLines.push(lines[i]);
+				i++;
+			}
+			output.push(renderTable(tableLines));
+			continue;
+		}
+		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++;
+	}
+	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("|");
+}
+function isTableSeparator(line) {
+	return /^\|[\s:]*-+[\s:]*(\|[\s:]*-+[\s:]*)*\|$/.test(line.trim());
+}
+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>${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>`;
+}
+
+//#endregion
+export { renderAIResponseMarkdown };

package/dist/ai-search-dialog.mjs

@@ -1,10 +1,10 @@
 "use client";
 
 import { emitClientAnalyticsEvent } from "./client-analytics.mjs";
+import { renderAIResponseMarkdown } from "./ai-markdown.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { highlight } from "sugar-high";
 
 //#region src/ai-search-dialog.tsx
 /**
@@ -282,61 +282,6 @@ async function copyTextToClipboard(text) {
 		return fallbackCopyText(text);
 	}
 }
-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>`;
-}
-function renderMarkdown(text) {
-	const codeBlockTokenBoundary = String.fromCharCode(0);
-	const codeBlockTokenPattern = new RegExp(`${codeBlockTokenBoundary}CB(\\d+)${codeBlockTokenBoundary}`, "g");
-	const codeBlocks = [];
-	let processed = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_match, lang, code) => {
-		codeBlocks.push(buildCodeBlock(lang, code));
-		return `\x00CB${codeBlocks.length - 1}\x00`;
-	});
-	processed = processed.replace(/```(\w*)\n([\s\S]*)$/, (_match, lang, code) => {
-		codeBlocks.push(buildCodeBlock(lang, code));
-		return `\x00CB${codeBlocks.length - 1}\x00`;
-	});
-	const lines = processed.split("\n");
-	const output = [];
-	let i = 0;
-	while (i < lines.length) {
-		if (isTableRow(lines[i]) && i + 1 < lines.length && isTableSeparator(lines[i + 1])) {
-			const tableLines = [lines[i]];
-			i++;
-			i++;
-			while (i < lines.length && isTableRow(lines[i])) {
-				tableLines.push(lines[i]);
-				i++;
-			}
-			output.push(renderTable(tableLines));
-			continue;
-		}
-		output.push(lines[i]);
-		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;
-}
-function escapeHtml(s) {
-	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-function isTableRow(line) {
-	const trimmed = line.trim();
-	return trimmed.startsWith("|") && trimmed.endsWith("|") && trimmed.includes("|");
-}
-function isTableSeparator(line) {
-	return /^\|[\s:]*-+[\s:]*(\|[\s:]*-+[\s:]*)*\|$/.test(line.trim());
-}
-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>`;
-	}).join("")}</tbody></table>`;
-}
 function SearchIcon() {
 	return /* @__PURE__ */ jsxs("svg", {
 		width: "16",
@@ -936,7 +881,7 @@ function AIChat({ api, requestMode, requestHeaders, requestStream = true, messag
 					className: "fd-ai-bubble-ai",
 					children: msg.content ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 						className: isStreaming && i === messages.length - 1 ? "fd-ai-streaming" : void 0,
-						dangerouslySetInnerHTML: { __html: renderMarkdown(msg.content) }
+						dangerouslySetInnerHTML: { __html: renderAIResponseMarkdown(msg.content) }
 					}), feedbackEnabled && !msg.isError && !isStreaming && /* @__PURE__ */ jsx(AIFeedbackControls, {
 						value: msg.feedback,
 						onCopy: () => handleCopyMessage(msg, i),
@@ -1685,7 +1630,7 @@ function FullModalAIChat({ api, requestMode, requestHeaders, requestStream, isOp
 						className: "fd-ai-fm-msg-content",
 						children: msg.content ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 							className: isStreaming && i === messages.length - 1 ? "fd-ai-streaming" : void 0,
-							dangerouslySetInnerHTML: { __html: renderMarkdown(msg.content) }
+							dangerouslySetInnerHTML: { __html: renderAIResponseMarkdown(msg.content) }
 						}), msg.role === "assistant" && feedbackEnabled && !msg.isError && !isStreaming && /* @__PURE__ */ jsx(AIFeedbackControls, {
 							value: msg.feedback,
 							onCopy: () => handleCopyMessage(msg, i),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/theme",
-  "version": "0.2.2",
+  "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.2"
+    "@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);