@lobehub/ui/es/Markdown/SyntaxMarkdown/StreamdownRender.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

'use client';

import { useMarkdownContext } from "../components/MarkdownProvider.mjs";
import { useMarkdownComponents } from "../../hooks/useMarkdown/useMarkdownComponents.mjs";
import { useMarkdownContent } from "../../hooks/useMarkdown/useMarkdownContent.mjs";
import { useMarkdownRehypePlugins } from "../../hooks/useMarkdown/useMarkdownRehypePlugins.mjs";
import { useMarkdownRemarkPlugins } from "../../hooks/useMarkdown/useMarkdownRemarkPlugins.mjs";
import { rehypeStreamAnimated } from "../plugins/rehypeStreamAnimated.mjs";
import { styles } from "./style.mjs";
import { useSmoothStreamContent } from "./useSmoothStreamContent.mjs";
import { useStreamQueue } from "./useStreamQueue.mjs";
import { createElement, memo, useEffect, useId, useMemo, useRef } from "react";
import { jsx } from "react/jsx-runtime";
import Markdown from "react-markdown";
import { marked } from "marked";
import remend from "remend";

//#region src/Markdown/SyntaxMarkdown/StreamdownRender.tsx
const STREAM_FADE_DURATION = 280;
function countChars(text) {
	return [...text].length;
}
const isRecord = (value) => typeof value === "object" && value !== null;
const isDeepEqualValue = (a, b) => {
	if (a === b) return true;
	if (Array.isArray(a) || Array.isArray(b)) {
		if (!Array.isArray(a) || !Array.isArray(b)) return false;
		if (a.length !== b.length) return false;
		for (let i = 0; i < a.length; i++) if (!isDeepEqualValue(a[i], b[i])) return false;
		return true;
	}
	if (!isRecord(a) || !isRecord(b)) return false;
	const keysA = Object.keys(a);
	const keysB = Object.keys(b);
	if (keysA.length !== keysB.length) return false;
	for (const key of keysA) if (!isDeepEqualValue(a[key], b[key])) return false;
	return true;
};
const isSamePlugin = (prevPlugin, nextPlugin) => {
	const prevTuple = Array.isArray(prevPlugin) ? prevPlugin : [prevPlugin];
	const nextTuple = Array.isArray(nextPlugin) ? nextPlugin : [nextPlugin];
	if (prevTuple.length !== nextTuple.length) return false;
	if (prevTuple[0] !== nextTuple[0]) return false;
	return isDeepEqualValue(prevTuple.slice(1), nextTuple.slice(1));
};
const isSamePlugins = (prevPlugins, nextPlugins) => {
	if (prevPlugins === nextPlugins) return true;
	if (!prevPlugins || !nextPlugins) return !prevPlugins && !nextPlugins;
	if (prevPlugins.length !== nextPlugins.length) return false;
	for (let i = 0; i < prevPlugins.length; i++) if (!isSamePlugin(prevPlugins[i], nextPlugins[i])) return false;
	return true;
};
const useStablePlugins = (plugins) => {
	const stableRef = useRef(plugins);
	if (!isSamePlugins(stableRef.current, plugins)) stableRef.current = plugins;
	return stableRef.current;
};
const StreamdownBlock = memo(({ children, ...rest }) => {
	return /* @__PURE__ */ jsx(Markdown, {
		...rest,
		children
	});
}, (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.components === nextProps.components && isSamePlugins(prevProps.rehypePlugins, nextProps.rehypePlugins) && isSamePlugins(prevProps.remarkPlugins, nextProps.remarkPlugins));
StreamdownBlock.displayName = "StreamdownBlock";
const StreamdownRender = memo(({ children, ...rest }) => {
	const { streamSmoothingPreset = "balanced" } = useMarkdownContext();
	const escapedContent = useMarkdownContent(children || "");
	const components = useMarkdownComponents();
	const baseRehypePlugins = useStablePlugins(useMarkdownRehypePlugins());
	const remarkPlugins = useStablePlugins(useMarkdownRemarkPlugins());
	const generatedId = useId();
	const smoothedContent = useSmoothStreamContent(typeof escapedContent === "string" ? escapedContent : "", { preset: streamSmoothingPreset });
	const processedContent = useMemo(() => {
		return remend(smoothedContent);
	}, [smoothedContent]);
	const blocks = useMemo(() => {
		const tokens = marked.lexer(processedContent);
		let offset = 0;
		return tokens.map((token) => {
			const block = {
				content: token.raw,
				startOffset: offset
			};
			offset += token.raw.length;
			return block;
		});
	}, [processedContent]);
	const { getBlockState, charDelay } = useStreamQueue(blocks);
	const prevBlockCharCountRef = useRef(/* @__PURE__ */ new Map());
	const blockTimelineRef = useRef(/* @__PURE__ */ new Map());
	const lastRenderTsRef = useRef(null);
	const renderTs = typeof performance === "undefined" ? Date.now() : performance.now();
	const frameDt = lastRenderTsRef.current === null ? 0 : Math.max(0, Math.min(renderTs - lastRenderTsRef.current, 120));
	const timelineForRender = useMemo(() => {
		const next = /* @__PURE__ */ new Map();
		const prevTimeline = blockTimelineRef.current;
		const prevCharCounts = prevBlockCharCountRef.current;
		for (const block of blocks) {
			const blockCharCount = countChars(block.content);
			const prevCharCount = prevCharCounts.get(block.startOffset) ?? 0;
			const prevElapsed = prevTimeline.get(block.startOffset);
			const latestCharStart = Math.max(0, (blockCharCount - 1) * charDelay);
			if (prevElapsed === void 0 || blockCharCount < prevCharCount) {
				next.set(block.startOffset, latestCharStart);
				continue;
			}
			const elapsedByTime = prevElapsed + frameDt;
			const minElapsed = Math.max(0, latestCharStart - charDelay * 2);
			next.set(block.startOffset, Math.max(elapsedByTime, minElapsed));
		}
		return next;
	}, [
		blocks,
		charDelay,
		frameDt
	]);
	useEffect(() => {
		const nextCharCount = /* @__PURE__ */ new Map();
		for (const block of blocks) nextCharCount.set(block.startOffset, countChars(block.content));
		prevBlockCharCountRef.current = nextCharCount;
		blockTimelineRef.current = timelineForRender;
		lastRenderTsRef.current = typeof performance === "undefined" ? Date.now() : performance.now();
	}, [blocks, timelineForRender]);
	return /* @__PURE__ */ jsx("div", {
		className: styles.animated,
		children: blocks.map((block, index) => {
			const state = getBlockState(index);
			if (state === "queued") return null;
			const timelineElapsedMs = timelineForRender.get(block.startOffset) ?? 0;
			let plugins;
			if (state === "streaming") plugins = [...baseRehypePlugins, [rehypeStreamAnimated, {
				charDelay,
				fadeDuration: STREAM_FADE_DURATION,
				timelineElapsedMs
			}]];
			else if (state === "animating") plugins = [...baseRehypePlugins, [rehypeStreamAnimated, {
				charDelay,
				fadeDuration: STREAM_FADE_DURATION,
				timelineElapsedMs
			}]];
			else plugins = [...baseRehypePlugins, [rehypeStreamAnimated, {
				charDelay,
				fadeDuration: STREAM_FADE_DURATION,
				timelineElapsedMs
			}]];
			return /* @__PURE__ */ createElement(StreamdownBlock, {
				...rest,
				components,
				key: `${generatedId}-${block.startOffset}`,
				rehypePlugins: plugins,
				remarkPlugins
			}, block.content);
		})
	});
});
StreamdownRender.displayName = "StreamdownRender";
var StreamdownRender_default = StreamdownRender;

//#endregion
export { StreamdownRender_default as default };
//# sourceMappingURL=StreamdownRender.mjs.map