@copilotkit/markdown 2.0.0-rc.20 → 2.0.0-rc.21

package/dist/index.mjs

@@ -5,7 +5,8 @@
 const DEFAULT_OPTIONS = {
 	segmenter: true,
 	enableTables: true,
-	enableAutolinks: true
+	enableAutolinks: true,
+	enableMath: false
 };
 /**
 * Merges user-provided parser options with defaults.
@@ -17,7 +18,8 @@ function normalizeOptions(options) {
 	return {
 		segmenter: options?.segmenter ?? DEFAULT_OPTIONS.segmenter,
 		enableTables: options?.enableTables ?? DEFAULT_OPTIONS.enableTables,
-		enableAutolinks: options?.enableAutolinks ?? DEFAULT_OPTIONS.enableAutolinks
+		enableAutolinks: options?.enableAutolinks ?? DEFAULT_OPTIONS.enableAutolinks,
+		enableMath: options?.enableMath ?? DEFAULT_OPTIONS.enableMath
 	};
 }
 /**
@@ -663,6 +665,13 @@ function parseInline(text, absoluteStart, path, context) {
 			i = code.next;
 			continue;
 		}
+		const math = context.options.enableMath ? parseMathInline(text, i, absoluteStart, path, nodes.length) : null;
+		if (math) {
+			flushTextBuffer();
+			nodes.push(math.node);
+			i = math.next;
+			continue;
+		}
 		const strong = parseDelimitedInline(text, i, "**", "strong", absoluteStart, path, nodes.length, context, citations, warnings, hasWarnedSegmenterUnavailable) ?? parseDelimitedInline(text, i, "__", "strong", absoluteStart, path, nodes.length, context, citations, warnings, hasWarnedSegmenterUnavailable);
 		if (strong) {
 			flushTextBuffer();
@@ -1014,6 +1023,32 @@ function parseInlineCode(text, at, start, path, index) {
 		next: close + len
 	};
 }
+const DISPLAY_MATH = /^\$\$([\s\S]+?)\$\$/;
+const INLINE_MATH = /^\$(?!\s)([^$\n]*?\S)\$(?!\d)/;
+function parseMathInline(text, at, start, path, index) {
+	if (text[at] !== "$") return null;
+	const rest = text.slice(at);
+	const display = DISPLAY_MATH.exec(rest);
+	const match = display ?? INLINE_MATH.exec(rest);
+	if (!match) return null;
+	return {
+		node: {
+			path: `${path}.${index}`,
+			type: "math",
+			range: {
+				start: start + at,
+				end: start + at + match[0].length
+			},
+			closed: true,
+			props: {
+				text: match[1],
+				display: display !== null
+			},
+			children: []
+		},
+		next: at + match[0].length
+	};
+}
 function parseDelimitedInline(text, at, delimiter, type, start, path, index, context, citations, warnings, hasWarnedSegmenterUnavailable) {
 	if (!text.startsWith(delimiter, at)) return null;
 	const close = text.indexOf(delimiter, at + delimiter.length);
@@ -1070,6 +1105,11 @@ function parseDelimitedInline(text, at, delimiter, type, start, path, index, con
 //#endregion
 //#region src/parser/block-parser.ts
 /**
+* GFM task-list marker at the start of a list item: `[ ]`, `[x]` or `[X]`,
+* followed by whitespace and then content.
+*/
+const TASK_MARKER = /^\[([ xX])\][ \t]+(?=\S)/;
+/**
 * Parses a contiguous range of source lines into block-level draft nodes.
 *
 * @param lines - Line-split source with offsets.
@@ -1342,9 +1382,10 @@ function parseList(lines, from, to, path, context, ordered) {
 		const marker = matchListItem(lines[i].text);
 		if (!marker || marker.ordered !== ordered) break;
 		if (ordered && listStartNumber === null) listStartNumber = marker.start;
+		const task = TASK_MARKER.exec(marker.content);
 		const contentLines = [{
 			...lines[i],
-			text: marker.content
+			text: task ? marker.content.slice(task[0].length) : marker.content
 		}];
 		const contentIndent = marker.contentIndent;
 		i += 1;
@@ -1399,7 +1440,7 @@ function parseList(lines, from, to, path, context, ordered) {
 				end: contentLines[contentLines.length - 1].end
 			},
 			closed: context.isComplete || contentLines[contentLines.length - 1].hasNewline,
-			props: {},
+			props: task ? { checked: task[1] !== " " } : {},
 			children: [paragraph]
 		});
 		citations = parsedInline.citations;
@@ -1674,11 +1715,19 @@ function opToAstNode(op, id, parentId, children) {
 			tight: op.props["tight"],
 			children
 		};
-		case "list-item": return {
-			...base,
-			type: "list-item",
-			children
-		};
+		case "list-item": {
+			const checked = op.props["checked"];
+			return checked === void 0 ? {
+				...base,
+				type: "list-item",
+				children
+			} : {
+				...base,
+				type: "list-item",
+				checked,
+				children
+			};
+		}
 		case "code-block": return {
 			...base,
 			type: "code-block",
@@ -1762,6 +1811,12 @@ function opToAstNode(op, id, parentId, children) {
 			url: op.props["url"],
 			text: op.props["text"]
 		};
+		case "math": return {
+			...base,
+			type: "math",
+			text: op.props["text"],
+			display: op.props["display"]
+		};
 		case "citation": return {
 			...base,
 			type: "citation",
@@ -2000,12 +2055,14 @@ function isProduction() {
 *
 * No-op in production and after the first warning. Only the built-in default
 * renderers call this — a custom `markdownRenderer` never triggers it.
+* Pass `{ rendersMath: true }` from a default renderer that typesets math, so
+* only code blocks are flagged.
 *
 * @internal
 */
-function warnUnsupportedRichSyntaxOnce(content) {
+function warnUnsupportedRichSyntaxOnce(content, { rendersMath = false } = {}) {
 	if (warned || !content || isProduction()) return;
-	const hasMath = BLOCK_MATH.test(content) || BRACKET_MATH.test(content);
+	const hasMath = !rendersMath && (BLOCK_MATH.test(content) || BRACKET_MATH.test(content));
 	const hasHighlightableCode = HIGHLIGHTABLE_CODE.test(content);
 	if (!hasMath && !hasHighlightableCode) return;
 	warned = true;
@@ -2014,5 +2071,448 @@ function warnUnsupportedRichSyntaxOnce(content) {
 }
 
 //#endregion
-export { createStreamingMarkdownParserState, finalizeStreamingMarkdown, parseStreamingMarkdownChunk, warnUnsupportedRichSyntaxOnce };
+//#region src/render/parser-session.ts
+function getSegmenterKey(segmenter) {
+	if (segmenter === true || segmenter === false) return String(segmenter);
+	return `object:${segmenter.locale ?? ""}:${segmenter.granularity ?? "word"}`;
+}
+function getOptionsKey(options) {
+	return `${getSegmenterKey(options.segmenter)}|tables:${String(options.enableTables)}|autolinks:${String(options.enableAutolinks)}|math:${String(options.enableMath)}`;
+}
+function parseFullText(text, options, isCompleteInput) {
+	const initialState = createStreamingMarkdownParserState(options);
+	const parsedState = text.length > 0 ? parseStreamingMarkdownChunk(initialState, text) : initialState;
+	return isCompleteInput ? finalizeStreamingMarkdown(parsedState) : parsedState;
+}
+/**
+* Returns the parser session for `text`, reusing `previous` when it can.
+*
+* - Same inputs: returns `previous` unchanged.
+* - Text grew by a suffix: parses only the suffix, so unchanged AST nodes keep
+*   their identity (renderers rely on this to keep DOM and animations stable).
+* - Text was replaced or options changed: parses from scratch.
+* - `isComplete` toggled: finalizes (or re-opens) the current state.
+*
+* @param previous - The session from the last update, or `null` on first use.
+* @param text - Full markdown source, which usually grows over time.
+* @param options - Parser option overrides.
+* @param isCompleteInput - `true` once the source is final.
+* @public
+*/
+function updateStreamingMarkdownParserSession(previous, text, options, isCompleteInput) {
+	const normalized = normalizeOptions(options);
+	const optionsKey = getOptionsKey(normalized);
+	if (previous === null || previous.optionsKey !== optionsKey) return {
+		parserState: parseFullText(text, normalized, isCompleteInput),
+		text,
+		optionsKey,
+		isCompleteInput
+	};
+	const textChanged = text !== previous.text;
+	const completionChanged = previous.isCompleteInput !== isCompleteInput;
+	if (!textChanged && !completionChanged) return previous;
+	if (!textChanged) {
+		const parserState = isCompleteInput ? finalizeStreamingMarkdown(previous.parserState) : parseStreamingMarkdownChunk(previous.parserState, "");
+		return {
+			...previous,
+			parserState,
+			isCompleteInput
+		};
+	}
+	const suffix = text.startsWith(previous.text) ? text.slice(previous.text.length) : null;
+	const parsed = suffix === null ? parseFullText(text, normalized, false) : parseStreamingMarkdownChunk(previous.parserState, suffix);
+	return {
+		parserState: isCompleteInput ? finalizeStreamingMarkdown(parsed) : parsed,
+		text,
+		optionsKey,
+		isCompleteInput
+	};
+}
+
+//#endregion
+//#region src/render/render-tree.ts
+/**
+* Class on the root element every renderer emits.
+* @public
+*/
+const STREAMING_MARKDOWN_ROOT_CLASS = "cpk-streaming-markdown-root";
+/**
+* Node classes CopilotKit's built-in chat markdown renderers (React, Vue,
+* Angular) apply, so all three emit the same themed markup.
+* @public
+*/
+const CHAT_MARKDOWN_NODE_CLASS_NAMES = { codeBlock: "cpk-markdown-code-block" };
+const SEGMENT_CLASS = "cpk-streaming-markdown-segment";
+const CITATION_CLASS = "cpk-streaming-markdown-citation";
+const CITATION_LABEL_CLASS = "cpk-streaming-markdown-citation-label";
+const WORD_JOINER = "⁠";
+/**
+* Attributes of the default caret element.
+* @public
+*/
+const STREAMING_MARKDOWN_CARET_ATTRS = {
+	"aria-hidden": "true",
+	class: "cpk-streaming-markdown-caret",
+	"data-streaming-markdown-caret": "true"
+};
+/**
+* Inline style of the default caret element (camelCase CSS properties).
+* @public
+*/
+const STREAMING_MARKDOWN_CARET_STYLE = {
+	display: "inline-block",
+	width: "0.48em",
+	height: "0.48em",
+	marginInlineStart: "0.08em",
+	verticalAlign: "-0.08em",
+	borderRadius: "999px",
+	backgroundColor: "currentColor",
+	opacity: "0.55"
+};
+const CITATION_STYLES = `
+  .${STREAMING_MARKDOWN_ROOT_CLASS} .${CITATION_CLASS} {
+    vertical-align: baseline;
+  }
+
+  .${STREAMING_MARKDOWN_ROOT_CLASS} .${CITATION_LABEL_CLASS} {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.4em;
+    block-size: 1.4em;
+    border-radius: 999px;
+    border: 1px solid hsl(0 0% 50% / 0.35);
+    background-color: hsl(0 0% 50% / 0.16);
+    color: inherit;
+    font-size: 0.7em;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    text-decoration: none;
+    transform: translateY(-0.15em);
+  }
+`;
+const SEGMENT_FADE_IN_STYLES = `
+  .${STREAMING_MARKDOWN_ROOT_CLASS} .${SEGMENT_CLASS} {
+    opacity: 1;
+    transition: opacity 400ms ease-out;
+    @starting-style {
+      opacity: 0;
+    }
+  }
+`;
+const SEGMENT_FALLBACK_STYLES = `
+  .${STREAMING_MARKDOWN_ROOT_CLASS} .${SEGMENT_CLASS} {
+    opacity: 1;
+    transition: opacity 400ms ease-out;
+  }
+`;
+/**
+* Stylesheet every renderer injects next to its root: the per-token fade-in
+* for text segments and the citation pill. Read at render time, so it is safe
+* to call during server rendering.
+*
+* @public
+*/
+function getStreamingMarkdownStyles() {
+	return (typeof navigator !== "undefined" && /jsdom/i.test(navigator.userAgent) ? SEGMENT_FALLBACK_STYLES : SEGMENT_FADE_IN_STYLES) + CITATION_STYLES;
+}
+const SAFE_HREF = /^(https?:|mailto:|tel:|#|\/|\.\/|\.\.\/)/i;
+const SAFE_IMG_SRC = /^(https?:|data:image\/(?!svg)|\/|\.\/|\.\.\/)/i;
+/**
+* Returns `href` when its scheme is allowed for links, else `undefined`.
+* @public
+*/
+function sanitizeStreamingMarkdownHref(href) {
+	if (!href) return void 0;
+	return SAFE_HREF.test(href.trim()) ? href : void 0;
+}
+/**
+* Returns `src` when its scheme is allowed for images, else `undefined`.
+* @public
+*/
+function sanitizeStreamingMarkdownImageSrc(src) {
+	if (!src) return void 0;
+	return SAFE_IMG_SRC.test(src.trim()) ? src : void 0;
+}
+const RENDERER_KEY_BY_NODE_TYPE = {
+	document: "document",
+	paragraph: "paragraph",
+	heading: "heading",
+	blockquote: "blockquote",
+	list: "list",
+	"list-item": "listItem",
+	"code-block": "codeBlock",
+	table: "table",
+	"table-row": "tableRow",
+	"table-cell": "tableCell",
+	"thematic-break": "thematicBreak",
+	text: "text",
+	em: "em",
+	strong: "strong",
+	strikethrough: "strikethrough",
+	"inline-code": "inlineCode",
+	"soft-break": "softBreak",
+	"hard-break": "hardBreak",
+	image: "image",
+	link: "link",
+	autolink: "autolink",
+	citation: "citation",
+	math: "math"
+};
+const SLOT = {
+	kind: "slot",
+	key: "slot"
+};
+function indexNodes(state) {
+	return new Map(state.nodes.map((node) => [node.id, node]));
+}
+function findOpenNode(stack, nodeById) {
+	for (let index = stack.length - 1; index >= 0; index -= 1) {
+		const candidate = nodeById.get(stack[index]);
+		if (candidate && candidate.type !== "document") return candidate;
+	}
+	return null;
+}
+/**
+* The deepest open (still streaming) node other than the document, or `null`.
+* This is where the caret goes.
+*
+* @public
+*/
+function findStreamingMarkdownOpenNode(state) {
+	return findOpenNode(state.stack, indexNodes(state));
+}
+/**
+* Citation number and definition for a citation node.
+*
+* @public
+*/
+function getStreamingMarkdownCitationData(node, citations) {
+	return {
+		id: node.idRef,
+		number: node.number ?? citations.numbers[node.idRef] ?? node.idRef,
+		definition: citations.definitions[node.idRef]
+	};
+}
+function nodeAttrs(node, context, extra = {}) {
+	const attrs = {};
+	const className = context.nodeClassNames?.[RENDERER_KEY_BY_NODE_TYPE[node.type]];
+	if (className) attrs.class = className;
+	const entries = Object.entries(extra);
+	for (const [name, value] of entries) if (value !== void 0) attrs[name] = value;
+	attrs["data-streaming-markdown-node"] = node.type;
+	attrs["data-node-open"] = String(!node.closed);
+	return attrs;
+}
+function element(key, tag, attrs, children, action) {
+	return action ? {
+		kind: "element",
+		key,
+		tag,
+		attrs,
+		children,
+		action
+	} : {
+		kind: "element",
+		key,
+		tag,
+		attrs,
+		children
+	};
+}
+function text(key, value) {
+	return {
+		kind: "text",
+		key,
+		text: value
+	};
+}
+function caretFor(nodeId, context) {
+	return context.caretTargetNodeId === nodeId ? [{
+		kind: "caret",
+		key: `caret-${nodeId}`
+	}] : [];
+}
+function renderNode(node, context, children, output, citation) {
+	const base = {
+		kind: "node",
+		key: String(node.id),
+		node,
+		rendererKey: RENDERER_KEY_BY_NODE_TYPE[node.type],
+		children,
+		output,
+		containsCaret: context.caretPath.has(node.id)
+	};
+	return citation ? {
+		...base,
+		citation
+	} : base;
+}
+function containerChildren(node, context) {
+	return [...node.children.flatMap((childId) => {
+		const child = context.nodeById.get(childId);
+		return child ? [buildNode(child, context)] : [];
+	}), ...caretFor(node.id, context)];
+}
+/** A container whose default output is one element wrapping its children. */
+function wrapped(node, context, tag, extra = {}, action) {
+	const attrs = nodeAttrs(node, context, extra);
+	return renderNode(node, context, containerChildren(node, context), [element(String(node.id), tag, attrs, [SLOT], action)]);
+}
+function textSegments(node) {
+	if (node.text.length === 0) return [];
+	if (node.segments.length === 0) return [element(`segment-${node.id}-full`, "span", {
+		class: SEGMENT_CLASS,
+		"data-streaming-markdown-segment-kind": "full",
+		"data-streaming-markdown-whitespace": "false"
+	}, [text("text", node.text)])];
+	return node.segments.map((segment) => element(`segment-${node.id}-${segment.start}-${segment.kind}`, "span", {
+		class: SEGMENT_CLASS,
+		"data-streaming-markdown-segment-kind": segment.kind,
+		"data-streaming-markdown-whitespace": String(segment.isWhitespace)
+	}, [text("text", segment.noBreakBefore ? `${WORD_JOINER}${segment.text}` : segment.text)]));
+}
+function taskCheckbox(node, context) {
+	const parent = node.parentId == null ? void 0 : context.nodeById.get(node.parentId);
+	if (!(parent?.type === "list-item" && parent.checked !== void 0 && parent.children[0] === node.id)) return [];
+	const attrs = {
+		type: "checkbox",
+		disabled: true,
+		"data-streaming-markdown-task": "true"
+	};
+	if (parent.checked) attrs.checked = true;
+	return [element(`task-${parent.id}`, "input", attrs, []), text("task-space", " ")];
+}
+function buildCitation(node, context) {
+	const citation = getStreamingMarkdownCitationData(node, context.citations);
+	const label = [text("label", String(citation.number))];
+	const href = sanitizeStreamingMarkdownHref(citation.definition?.url);
+	const inner = href ? element("label", "a", {
+		href,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		role: "doc-noteref",
+		class: CITATION_LABEL_CLASS
+	}, label, {
+		type: "citation",
+		citation,
+		node
+	}) : element("label", "span", {
+		role: "doc-noteref",
+		class: CITATION_LABEL_CLASS
+	}, label);
+	const attrs = nodeAttrs(node, context);
+	const supClass = attrs.class ? `${CITATION_CLASS} ${attrs.class}` : CITATION_CLASS;
+	return renderNode(node, context, null, [element(String(node.id), "sup", {
+		...attrs,
+		class: supClass
+	}, [inner])], citation);
+}
+function buildNode(node, context) {
+	const key = String(node.id);
+	switch (node.type) {
+		case "document": return renderNode(node, context, containerChildren(node, context), [SLOT]);
+		case "paragraph": {
+			const attrs = nodeAttrs(node, context);
+			return renderNode(node, context, containerChildren(node, context), [element(key, "p", attrs, [...taskCheckbox(node, context), SLOT])]);
+		}
+		case "heading": return wrapped(node, context, `h${node.level}`);
+		case "blockquote": return wrapped(node, context, "blockquote");
+		case "list": return wrapped(node, context, node.ordered ? "ol" : "ul", {
+			start: node.ordered && node.start != null ? String(node.start) : void 0,
+			"data-list-tight": String(node.tight)
+		});
+		case "list-item": return wrapped(node, context, "li");
+		case "table": {
+			const attrs = nodeAttrs(node, context);
+			return renderNode(node, context, containerChildren(node, context), [element(key, "table", attrs, [element("tbody", "tbody", {}, [SLOT])])]);
+		}
+		case "table-row": return wrapped(node, context, "tr");
+		case "table-cell": {
+			const parent = node.parentId == null ? void 0 : context.nodeById.get(node.parentId);
+			return wrapped(node, context, parent?.type === "table-row" && parent.isHeader ? "th" : "td");
+		}
+		case "em": return wrapped(node, context, "em");
+		case "strong": return wrapped(node, context, "strong");
+		case "strikethrough": return wrapped(node, context, "s");
+		case "link": {
+			const href = sanitizeStreamingMarkdownHref(node.url);
+			return wrapped(node, context, "a", {
+				href,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				title: node.title
+			}, href ? {
+				type: "link",
+				url: href,
+				node
+			} : void 0);
+		}
+		case "code-block": return renderNode(node, context, null, [element(key, "pre", nodeAttrs(node, context), [element("code", "code", node.info ? { "data-code-info": node.info } : {}, [text("text", node.text), ...caretFor(node.id, context)])])]);
+		case "thematic-break": return renderNode(node, context, null, [element(key, "hr", nodeAttrs(node, context), [])]);
+		case "hard-break": return renderNode(node, context, null, [element(key, "br", nodeAttrs(node, context), [])]);
+		case "text": return renderNode(node, context, textSegments(node), [SLOT]);
+		case "soft-break": return renderNode(node, context, [text("text", "\n")], [SLOT]);
+		case "inline-code": return renderNode(node, context, [text("text", node.text)], [element(key, "code", nodeAttrs(node, context), [SLOT])]);
+		case "image": return renderNode(node, context, null, [element(key, "img", nodeAttrs(node, context, {
+			src: sanitizeStreamingMarkdownImageSrc(node.url),
+			alt: node.alt,
+			title: node.title
+		}), [])]);
+		case "autolink": {
+			const href = sanitizeStreamingMarkdownHref(node.url);
+			return renderNode(node, context, [text("text", node.text)], [element(key, "a", nodeAttrs(node, context, {
+				href,
+				target: "_blank",
+				rel: "noopener noreferrer"
+			}), [SLOT], href ? {
+				type: "link",
+				url: href,
+				node
+			} : void 0)]);
+		}
+		case "math": return renderNode(node, context, [text("text", node.text)], [element(key, "span", nodeAttrs(node, context, { "data-math-display": String(node.display) }), [SLOT])]);
+		case "citation": return buildCitation(node, context);
+		default: return node;
+	}
+}
+/**
+* Turns parser state into a framework-neutral render tree: which elements to
+* create, their sanitized attributes, click actions, text segments for the
+* per-token animation, and where the caret goes. The React, Vue, and DOM
+* renderers all render this tree, so markup and sanitization live here only.
+*
+* @param state - Parser state from the streaming markdown parser.
+* @param options - Whether to place a caret, and optional per-node classes.
+* @returns The root render node (`null` when the state has no root) and the
+* open node the caret targets.
+* @public
+*/
+function buildStreamingMarkdownRenderTree(state, options) {
+	const nodeById = indexNodes(state);
+	const openNode = findOpenNode(state.stack, nodeById);
+	const caretTargetNodeId = options.caret && !state.isComplete && openNode ? openNode.id : null;
+	const caretPath = /* @__PURE__ */ new Set();
+	let cursor = caretTargetNodeId == null ? void 0 : nodeById.get(caretTargetNodeId);
+	while (cursor) {
+		caretPath.add(cursor.id);
+		cursor = cursor.parentId == null ? void 0 : nodeById.get(cursor.parentId);
+	}
+	const context = {
+		nodeById,
+		citations: state.citations,
+		caretTargetNodeId,
+		caretPath,
+		nodeClassNames: options.nodeClassNames
+	};
+	const rootNode = state.rootId == null ? void 0 : nodeById.get(state.rootId);
+	return {
+		root: rootNode ? buildNode(rootNode, context) : null,
+		openNode,
+		isComplete: state.isComplete
+	};
+}
+
+//#endregion
+export { CHAT_MARKDOWN_NODE_CLASS_NAMES, STREAMING_MARKDOWN_CARET_ATTRS, STREAMING_MARKDOWN_CARET_STYLE, STREAMING_MARKDOWN_ROOT_CLASS, buildStreamingMarkdownRenderTree, createStreamingMarkdownParserState, finalizeStreamingMarkdown, findStreamingMarkdownOpenNode, getStreamingMarkdownCitationData, getStreamingMarkdownStyles, parseStreamingMarkdownChunk, sanitizeStreamingMarkdownHref, sanitizeStreamingMarkdownImageSrc, updateStreamingMarkdownParserSession, warnUnsupportedRichSyntaxOnce };
 //# sourceMappingURL=index.mjs.map