@epam/ai-dial-chat-shared 1.2.0-dev.11 → 1.2.0-dev.111

package/components/MarkdownRenderer/CodeBlock/CodeBlock.js

@@ -2,81 +2,82 @@ import { CodeBlockTheme as e } from "../../../types/code-editor.js";
 import { mergeClasses as t } from "../../../utils/merge-class.js";
 import { buildCssVars as n } from "../../../utils/build-css-vars.js";
 import { downloadTextFile as r, getFileExtensionForLanguage as i } from "../../../utils/file-download.js";
-import { useCodeCopy as a } from "../../../hooks/useCodeCopy.js";
-import o from "./CodeBlock.module.scss.js";
-import { restrainedSyntaxTheme as s } from "./syntax-theme.js";
-import { DIAL_ICON_SIZE as c, DIAL_KIT_ICON_STROKE as l, ElementSize as u, GhostIconButton as d } from "@epam/ai-dial-ui-kit";
-import { Suspense as f, lazy as p, memo as m } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { IconCheck as _, IconCopy as v, IconDownload as y } from "@tabler/icons-react";
+import { CHAT_SHARED_CLASS as a } from "../../../constants/public-class-names.js";
+import { useCodeCopy as o } from "../../../hooks/useCodeCopy.js";
+import s from "./CodeBlock.module.scss.js";
+import { restrainedSyntaxTheme as c } from "./syntax-theme.js";
+import { DIAL_ICON_SIZE as l, DIAL_KIT_ICON_STROKE as u, ElementSize as d, GhostIconButton as f } from "@epam/ai-dial-ui-kit";
+import { Suspense as p, lazy as m, memo as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { IconCheck as v, IconCopy as y, IconDownload as b } from "@tabler/icons-react";
 //#region src/components/MarkdownRenderer/CodeBlock/CodeBlock.tsx
-var b = {
-	dark: s,
-	light: s
-}, x = p(async () => {
+var x = {
+	dark: c,
+	light: c
+}, S = m(async () => {
 	let { Prism: e } = await import("react-syntax-highlighter");
 	return { default: e };
-}), S = m(({ language: p, value: m, isStreaming: S, theme: C = e.Dark, copyLabel: w = "Copy code", copiedLabel: T = "Copied!", downloadLabel: E = "Download code", hideDownload: D = !1, containerClassName: O, headerClassName: k, codeClassName: A = "dial-code-text", languageLabelClassName: j = "dial-tiny-lead-semi-text", title: M, titleSlot: N, colors: P }) => {
-	let { isCopied: F, copy: I } = a(m), L = C === e.Light, R = () => {
-		r(m, `code.${i(p)}`);
-	}, z = /* @__PURE__ */ h("pre", {
+}), C = h(({ language: m, value: h, isStreaming: C, theme: w = e.Dark, copyLabel: T = "Copy code", copiedLabel: E = "Copied!", downloadLabel: D = "Download code", hideDownload: O = !1, containerClassName: k, headerClassName: A, codeClassName: j = "dial-code-text", languageLabelClassName: M = "dial-tiny-lead-semi-text", title: N, titleSlot: P, colors: F }) => {
+	let { isCopied: I, copy: L } = o(h), R = w === e.Light, z = () => {
+		r(h, `code.${i(m)}`);
+	}, B = /* @__PURE__ */ g("pre", {
 		className: "p-4",
-		children: /* @__PURE__ */ h("code", {
-			className: t("whitespace-pre", A),
-			children: m
+		children: /* @__PURE__ */ g("code", {
+			className: t("whitespace-pre", j),
+			children: h
 		})
 	});
-	return /* @__PURE__ */ g("div", {
+	return /* @__PURE__ */ _("div", {
 		style: n({
-			"--cm-code-block-bg": P?.background,
-			"--cm-code-block-border": P?.border,
-			"--cm-code-block-header-bg": P?.headerBackground,
-			"--cm-code-block-language": P?.language,
-			"--cm-code-block-copied": P?.copied,
-			"--cm-code-block-scrollbar": P?.scrollbar
+			"--cm-code-block-bg": F?.background,
+			"--cm-code-block-border": F?.border,
+			"--cm-code-block-header-bg": F?.headerBackground,
+			"--cm-code-block-language": F?.language,
+			"--cm-code-block-copied": F?.copied,
+			"--cm-code-block-scrollbar": F?.scrollbar
 		}),
-		className: t("my-4 max-w-full overflow-hidden rounded-xl border", o.container, L && o.containerLight, O),
+		className: t("my-4 max-w-full rounded-xl border [overflow:clip]", s.container, R && s.containerLight, k, a.codeBlock),
 		children: [
-			/* @__PURE__ */ g("div", {
-				className: t("flex min-h-10 items-center justify-between border-b px-4", N == null ? "py-2" : "py-0", o.header, k),
-				children: [N ?? /* @__PURE__ */ h("span", {
-					className: t(o.languageLabel, j),
-					children: M ?? p
-				}), !S && /* @__PURE__ */ g("div", {
+			/* @__PURE__ */ _("div", {
+				className: t("sticky top-0 z-10 flex min-h-10 items-center justify-between px-4", P == null ? "py-2" : "py-0", s.header, A, a.codeBlockHeader),
+				children: [P ?? /* @__PURE__ */ g("span", {
+					className: t(s.languageLabel, M),
+					children: N ?? m
+				}), !C && /* @__PURE__ */ _("div", {
 					className: "flex items-center gap-1",
-					children: [!D && /* @__PURE__ */ h(d, {
-						icon: /* @__PURE__ */ h(y, {
-							size: c.SM,
-							stroke: l
+					children: [!O && /* @__PURE__ */ g(f, {
+						icon: /* @__PURE__ */ g(b, {
+							size: l.SM,
+							stroke: u
 						}),
-						"aria-label": E,
-						size: u.Small,
-						onClick: R
-					}), /* @__PURE__ */ h(d, {
-						icon: F ? /* @__PURE__ */ h(_, {
-							size: c.SM,
-							className: o.copiedIcon,
+						"aria-label": D,
+						size: d.Small,
+						onClick: z
+					}), /* @__PURE__ */ g(f, {
+						icon: I ? /* @__PURE__ */ g(v, {
+							size: l.SM,
+							className: s.copiedIcon,
 							"aria-hidden": !0,
-							stroke: l
-						}) : /* @__PURE__ */ h(v, {
-							size: c.SM,
+							stroke: u
+						}) : /* @__PURE__ */ g(y, {
+							size: l.SM,
 							"aria-hidden": !0,
-							stroke: l
+							stroke: u
 						}),
-						"aria-label": w,
-						size: u.Small,
-						onClick: I
+						"aria-label": T,
+						size: d.Small,
+						onClick: L
 					})]
 				})]
 			}),
-			/* @__PURE__ */ h("div", {
-				className: t(o.scrollContainer, "max-h-[60vh] overflow-auto"),
+			/* @__PURE__ */ g("div", {
+				className: t(s.scrollContainer, "max-h-[60vh] overflow-auto"),
 				dir: "ltr",
-				children: p ? /* @__PURE__ */ h(f, {
-					fallback: z,
-					children: /* @__PURE__ */ h(x, {
-						language: p,
-						style: b[C] ?? s,
+				children: m ? /* @__PURE__ */ g(p, {
+					fallback: B,
+					children: /* @__PURE__ */ g(S, {
+						language: m,
+						style: x[w] ?? c,
 						customStyle: {
 							margin: 0,
 							borderRadius: 0,
@@ -86,19 +87,19 @@ var b = {
 							padding: "14px 16px",
 							letterSpacing: 0
 						},
-						codeTagProps: { className: A },
-						children: m
+						codeTagProps: { className: j },
+						children: h
 					})
-				}) : z
+				}) : B
 			}),
-			/* @__PURE__ */ h("span", {
+			/* @__PURE__ */ g("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
-				children: F ? T : ""
+				children: I ? E : ""
 			})
 		]
 	});
 });
 //#endregion
-export { S as MarkdownCodeBlock };
+export { C as MarkdownCodeBlock };

package/components/MarkdownRenderer/CodeBlock/CodeBlock.module.scss.js

@@ -1,10 +1,10 @@
 var e = {
-	container: "_container_spugt_1",
-	containerLight: "_containerLight_spugt_6",
-	header: "_header_spugt_10",
-	languageLabel: "_languageLabel_spugt_15",
-	copiedIcon: "_copiedIcon_spugt_19",
-	scrollContainer: "_scrollContainer_spugt_23"
+	container: "_container_sqe5k_1",
+	containerLight: "_containerLight_sqe5k_6",
+	header: "_header_sqe5k_10",
+	languageLabel: "_languageLabel_sqe5k_15",
+	copiedIcon: "_copiedIcon_sqe5k_19",
+	scrollContainer: "_scrollContainer_sqe5k_23"
 };
 //#endregion
 export { e as default };

package/components/MarkdownRenderer/MDMessageViewer.js

@@ -1,22 +1,28 @@
 import { MarkdownRenderer as e } from "./MarkdownRenderer.js";
 import { DEFAULT_MARKDOWN_CLASS_NAMES as t } from "./markdown-class-names.js";
-import { memo as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
+import { PlainTextRenderer as n } from "./PlainTextRenderer.js";
+import { memo as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/components/MarkdownRenderer/MDMessageViewer.tsx
-var i = n(({ content: n, isStreaming: i, thinkingLabel: a, components: o, urlTransform: s, codeBlockCopyLabel: c, codeBlockCopiedLabel: l, codeBlockTheme: u, tableActionLabels: d, tableDownloadFilename: f, tableOnOpenInCanvas: p, tableScrollRegionAriaLabel: m, classNames: h = t }) => /* @__PURE__ */ r(e, {
-	content: n,
-	isStreaming: i,
-	thinkingLabel: a,
-	components: o,
-	urlTransform: s,
-	codeBlockCopyLabel: c,
-	codeBlockCopiedLabel: l,
-	codeBlockTheme: u,
-	tableActionLabels: d,
-	tableDownloadFilename: f,
-	tableOnOpenInCanvas: p,
-	tableScrollRegionAriaLabel: m,
-	classNames: h
+var a = r(({ content: r, isPlainText: a, isStreaming: o, thinkingLabel: s, components: c, urlTransform: l, codeBlockCopyLabel: u, codeBlockCopiedLabel: d, codeBlockTheme: f, tableActionLabels: p, tableDownloadFilename: m, tableOnOpenInCanvas: h, tableScrollRegionAriaLabel: g, classNames: _ = t }) => a ? /* @__PURE__ */ i(n, {
+	content: r,
+	isStreaming: o,
+	thinkingLabel: s,
+	classNames: _
+}) : /* @__PURE__ */ i(e, {
+	content: r,
+	isStreaming: o,
+	thinkingLabel: s,
+	components: c,
+	urlTransform: l,
+	codeBlockCopyLabel: u,
+	codeBlockCopiedLabel: d,
+	codeBlockTheme: f,
+	tableActionLabels: p,
+	tableDownloadFilename: m,
+	tableOnOpenInCanvas: h,
+	tableScrollRegionAriaLabel: g,
+	classNames: _
 }));
 //#endregion
-export { i as MDMessageViewer };
+export { a as MDMessageViewer };

package/components/MarkdownRenderer/MarkdownRenderer.js

@@ -8,20 +8,21 @@ import { MarkdownMathBlock as o } from "./Math/MarkdownMathBlock.js";
 import s from "./Table/MarkdownTable.module.scss.js";
 import { MarkdownTable as c } from "./Table/MarkdownTable.js";
 import { MarkdownTaskCheckbox as l } from "./TaskCheckbox/MarkdownTaskCheckbox.js";
-import u from "remark-gfm";
-import { memo as d, useEffect as f, useMemo as p, useState as m } from "react";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import v, { defaultUrlTransform as y } from "react-markdown";
-import b from "rehype-raw";
-import x, { defaultSchema as S } from "rehype-sanitize";
-import C from "remark-breaks";
-import w from "remark-math";
+import { ThinkingShimmer as u } from "./ThinkingShimmer.js";
+import d from "remark-gfm";
+import { memo as f, useEffect as p, useMemo as m, useState as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import y, { defaultUrlTransform as b } from "react-markdown";
+import x from "rehype-raw";
+import S, { defaultSchema as C } from "rehype-sanitize";
+import w from "remark-breaks";
+import T from "remark-math";
 //#region src/components/MarkdownRenderer/MarkdownRenderer.tsx
-var T = [
-	u,
-	C,
-	[w, { singleDollarTextMath: !1 }]
-], E = /* @__PURE__ */ "math.maction.annotation.annotation-xml.menclose.merror.mfenced.mfrac.mi.mmultiscripts.mn.mo.mover.mpadded.mphantom.mroot.mrow.ms.semantics.mspace.msqrt.mstyle.msub.msup.msubsup.mtable.mtd.mtext.mtr.munder.munderover".split("."), D = {
+var E = [
+	d,
+	w,
+	[T, { singleDollarTextMath: !1 }]
+], D = /* @__PURE__ */ "math.maction.annotation.annotation-xml.menclose.merror.mfenced.mfrac.mi.mmultiscripts.mn.mo.mover.mpadded.mphantom.mroot.mrow.ms.semantics.mspace.msqrt.mstyle.msub.msup.msubsup.mtable.mtd.mtext.mtr.munder.munderover".split("."), O = {
 	math: ["display", "xmlns"],
 	annotation: ["encoding"],
 	mfrac: ["linethickness"],
@@ -50,93 +51,93 @@ var T = [
 		"width"
 	],
 	mtd: ["width"]
-}, O = [b], k = [x, {
-	...S,
+}, k = [x], A = [S, {
+	...C,
 	tagNames: [
-		...S.tagNames ?? [],
-		...E,
+		...C.tagNames ?? [],
+		...D,
 		"cit"
 	],
 	attributes: {
-		...S.attributes,
-		...D,
-		code: [...S.attributes?.code ?? [], ["className"]],
+		...C.attributes,
+		...O,
+		code: [...C.attributes?.code ?? [], ["className"]],
 		cit: ["dataId"],
-		span: [...S.attributes?.span ?? [], [
+		span: [...C.attributes?.span ?? [], [
 			"className",
 			"katex",
 			"katex-error"
 		]]
 	}
-}], A = [], j = /\$\$|\\\(|\\\[/, M = (e) => j.test(e), N = {}, P = (e) => e == null ? y : (t) => y(e(t)), F = {
-	li: ({ children: e }) => /* @__PURE__ */ g("li", {
+}], j = [], M = /\$\$|\\\(|\\\[/, N = (e) => M.test(e), P = {}, F = (e) => e == null ? b : (t) => b(e(t)), I = {
+	li: ({ children: e }) => /* @__PURE__ */ _("li", {
 		className: "mb-1.5 last:mb-0",
 		children: e
 	}),
-	cit: ({ children: e, ...t }) => /* @__PURE__ */ _(h, { children: [
+	cit: ({ children: e, ...t }) => /* @__PURE__ */ v(g, { children: [
 		t["data-id"] == null ? "<cit>" : `<cit data-id="${t["data-id"]}">`,
 		e,
 		"</cit>"
 	] })
-}, I = (e) => {
+}, L = (e) => {
 	let t = e?.properties?.className;
 	return !Array.isArray(t) || !t.includes("katex") ? !1 : (e?.children ?? []).some((e) => e.type === "element" && e.tagName === "math" && e.properties?.display === "block");
-}, L = {
+}, R = {
 	left: "text-start",
 	center: "text-center",
 	right: "text-end"
-}, R = (e) => {
+}, z = (e) => {
 	let t = e?.properties?.align;
-	return typeof t == "string" ? L[t] : void 0;
-}, z = (e) => e ? e.type === "text" ? e.value ?? "" : (e.children ?? []).map(z).join("") : "", B = (t, { isStreaming: n, codeBlockCopyLabel: r, codeBlockCopiedLabel: u, codeBlockTheme: d, tableActionLabels: f, tableDownloadFilename: p, tableOnOpenInCanvas: m, tableScrollRegionAriaLabel: _, mathScrollRegionAriaLabel: v }) => ({
-	h1: ({ children: e }) => /* @__PURE__ */ g("h1", {
+	return typeof t == "string" ? R[t] : void 0;
+}, B = (e) => e ? e.type === "text" ? e.value ?? "" : (e.children ?? []).map(B).join("") : "", V = (t, { isStreaming: n, codeBlockCopyLabel: r, codeBlockCopiedLabel: u, codeBlockTheme: d, tableActionLabels: f, tableDownloadFilename: p, tableOnOpenInCanvas: m, tableScrollRegionAriaLabel: h, mathScrollRegionAriaLabel: v }) => ({
+	h1: ({ children: e }) => /* @__PURE__ */ _("h1", {
 		className: t.h1,
 		children: e
 	}),
-	h2: ({ children: e }) => /* @__PURE__ */ g("h2", {
+	h2: ({ children: e }) => /* @__PURE__ */ _("h2", {
 		className: t.h2,
 		children: e
 	}),
-	h3: ({ children: e }) => /* @__PURE__ */ g("h3", {
+	h3: ({ children: e }) => /* @__PURE__ */ _("h3", {
 		className: t.h3,
 		children: e
 	}),
-	h4: ({ children: e }) => /* @__PURE__ */ g("h4", {
+	h4: ({ children: e }) => /* @__PURE__ */ _("h4", {
 		className: t.h4,
 		children: e
 	}),
-	h5: ({ children: e }) => /* @__PURE__ */ g("h5", {
+	h5: ({ children: e }) => /* @__PURE__ */ _("h5", {
 		className: t.h5,
 		children: e
 	}),
-	h6: ({ children: n }) => /* @__PURE__ */ g("h6", {
+	h6: ({ children: n }) => /* @__PURE__ */ _("h6", {
 		className: e(a.h6, t.h6),
 		children: n
 	}),
-	p: ({ children: n }) => /* @__PURE__ */ g("p", {
+	p: ({ children: n }) => /* @__PURE__ */ _("p", {
 		className: e("break-words", t.p),
 		children: n
 	}),
-	ul: ({ children: n }) => /* @__PURE__ */ g("ul", {
+	ul: ({ children: n }) => /* @__PURE__ */ _("ul", {
 		className: e("list-disc ps-[2em]", t.ul),
 		children: n
 	}),
-	ol: ({ children: n }) => /* @__PURE__ */ g("ol", {
+	ol: ({ children: n }) => /* @__PURE__ */ _("ol", {
 		className: e("list-decimal ps-[2em]", t.ol),
 		children: n
 	}),
-	strong: ({ children: e }) => /* @__PURE__ */ g("strong", {
+	strong: ({ children: e }) => /* @__PURE__ */ _("strong", {
 		className: t.strong ?? "dial-body-paragraph-semi-text",
 		children: e
 	}),
-	em: ({ children: e }) => /* @__PURE__ */ g("em", {
+	em: ({ children: e }) => /* @__PURE__ */ _("em", {
 		className: t.em ?? "italic",
 		children: e
 	}),
-	pre: ({ children: e }) => /* @__PURE__ */ g(h, { children: e }),
+	pre: ({ children: e }) => /* @__PURE__ */ _(g, { children: e }),
 	code: ({ children: o, className: s }) => {
 		let c = /language-(\w+)/.exec(s ?? "")?.[1] ?? "", l = String(o);
-		return c || l.includes("\n") ? /* @__PURE__ */ g(i, {
+		return c || l.includes("\n") ? /* @__PURE__ */ _(i, {
 			language: c,
 			value: l.replace(/\n$/, ""),
 			isStreaming: n,
@@ -146,64 +147,64 @@ var T = [
 			containerClassName: t.codeBlockContainer,
 			headerClassName: t.codeBlockHeader,
 			codeClassName: t.codeFont
-		}) : /* @__PURE__ */ g("code", {
+		}) : /* @__PURE__ */ _("code", {
 			className: e("rounded px-1 py-0.5", a.codeInline, t.codeInlineFont ?? "dial-code-text", t.codeInline),
 			children: o
 		});
 	},
-	blockquote: ({ children: n }) => /* @__PURE__ */ g("blockquote", {
+	blockquote: ({ children: n }) => /* @__PURE__ */ _("blockquote", {
 		className: e("border-s-2 py-1 ps-4", a.blockquote, t.blockquote),
 		children: n
 	}),
-	a: ({ href: n, children: r }) => /* @__PURE__ */ g("a", {
+	a: ({ href: n, children: r }) => /* @__PURE__ */ _("a", {
 		href: n,
 		target: "_blank",
 		rel: "noopener noreferrer",
 		className: e("decoration-current/60 break-words underline underline-offset-2 hover:decoration-current focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2", a.link, t.link),
 		children: r
 	}),
-	hr: () => /* @__PURE__ */ g("hr", { className: e("my-5 border-t", a.secondaryBorder, t.hr) }),
-	del: ({ children: n }) => /* @__PURE__ */ g("del", {
+	hr: () => /* @__PURE__ */ _("hr", { className: e("my-5 border-t", a.secondaryBorder, t.hr) }),
+	del: ({ children: n }) => /* @__PURE__ */ _("del", {
 		className: e("opacity-75", t.del),
 		children: n
 	}),
-	input: ({ type: e, checked: t }) => e === "checkbox" ? /* @__PURE__ */ g(l, { checked: t ?? !1 }) : null,
-	span: ({ children: e, node: n, ...r }) => I(n) ? /* @__PURE__ */ g(o, {
+	input: ({ type: e, checked: t }) => e === "checkbox" ? /* @__PURE__ */ _(l, { checked: t ?? !1 }) : null,
+	span: ({ children: e, node: n, ...r }) => L(n) ? /* @__PURE__ */ _(o, {
 		className: t.mathBlock,
 		scrollRegionAriaLabel: v,
 		children: e
-	}) : /* @__PURE__ */ g("span", {
+	}) : /* @__PURE__ */ _("span", {
 		...r,
 		children: e
 	}),
-	table: ({ children: e }) => /* @__PURE__ */ g(c, {
+	table: ({ children: e }) => /* @__PURE__ */ _(c, {
 		classNames: t,
 		actionLabels: f,
 		downloadFilename: p,
 		onOpenInCanvas: m,
 		isStreaming: n,
-		scrollRegionAriaLabel: _,
+		scrollRegionAriaLabel: h,
 		children: e
 	}),
 	tr: ({ children: t, node: n }) => {
-		let r = n?.children.filter((e) => e.type === "element") ?? [], i = r.some((e) => e.tagName === "th"), a = r.filter((e) => z(e).trim().length > 0).length, o = !i && r.length > 1 && a === 1;
-		return /* @__PURE__ */ g("tr", {
+		let r = n?.children.filter((e) => e.type === "element") ?? [], i = r.some((e) => e.tagName === "th"), a = r.filter((e) => B(e).trim().length > 0).length, o = !i && r.length > 1 && a === 1;
+		return /* @__PURE__ */ _("tr", {
 			className: e(s.row, o && s.sectionRow),
 			children: t
 		});
 	},
-	th: ({ children: n, node: r }) => /* @__PURE__ */ g("th", {
+	th: ({ children: n, node: r }) => /* @__PURE__ */ _("th", {
 		scope: "col",
-		className: e("sticky top-0 z-[2] max-w-96 whitespace-normal break-words px-3 py-2.5 text-start", R(r), s.rowDivider, s.tableHeaderCell, t.tableHeaderFont ?? "dial-tiny-lead-semi-text", t.tableCell, t.tableHeader),
+		className: e("sticky top-0 z-[2] max-w-96 whitespace-normal break-words px-3 py-2.5 text-start", z(r), s.rowDivider, s.tableHeaderCell, t.tableHeaderFont ?? "dial-tiny-lead-semi-text", t.tableCell, t.tableHeader),
 		children: n
 	}),
-	td: ({ children: n, node: r }) => /* @__PURE__ */ g("td", {
-		className: e("max-w-96 whitespace-normal px-3 py-2.5 align-top [overflow-wrap:anywhere]", R(r), s.rowDivider, t.tableBodyCell, t.tableCell),
+	td: ({ children: n, node: r }) => /* @__PURE__ */ _("td", {
+		className: e("max-w-96 whitespace-normal px-3 py-[7px] align-top [overflow-wrap:anywhere]", z(r), s.rowDivider, t.tableBodyCell, t.tableCell),
 		children: n
 	})
-}), V = d(({ content: e, containerClassName: i, isStreaming: o, streamCharactersPerSecond: s, classNames: c = N, components: l, urlTransform: u, rehypePlugins: d = A, thinkingLabel: h = "Thinking", codeBlockCopyLabel: _, codeBlockCopiedLabel: y, codeBlockTheme: b, colors: x, tableActionLabels: S, tableDownloadFilename: C, tableOnOpenInCanvas: w, tableScrollRegionAriaLabel: E, mathScrollRegionAriaLabel: D }) => {
-	let j = n(e, o, s), I = p(() => r(j), [j]), L = p(() => M(I), [I]), [R, z] = m(null);
-	f(() => {
+}), H = f(({ content: e, containerClassName: i, isStreaming: a, streamCharactersPerSecond: o, classNames: s = P, components: c, urlTransform: l, rehypePlugins: d = j, thinkingLabel: f = "Thinking", codeBlockCopyLabel: g, codeBlockCopiedLabel: v, codeBlockTheme: b, colors: x, tableActionLabels: S, tableDownloadFilename: C, tableOnOpenInCanvas: w, tableScrollRegionAriaLabel: T, mathScrollRegionAriaLabel: D }) => {
+	let O = n(e, a, o), M = m(() => r(O), [O]), L = m(() => N(M), [M]), [R, z] = h(null);
+	p(() => {
 		if (!L || R) return;
 		let e = !1;
 		return (async () => {
@@ -216,14 +217,12 @@ var T = [
 			e = !0;
 		};
 	}, [L, R]);
-	let V = p(() => [
-		...O,
+	let B = m(() => [
+		...k,
 		...R ? [R] : [],
-		k,
+		A,
 		...d
 	], [R, d]), H = t({
-		"--cm-thinking-inverted": x?.thinkingPrimary,
-		"--cm-thinking-secondary": x?.thinkingSecondary,
 		"--cm-markdown-border": x?.border,
 		"--cm-blockquote-border": x?.blockquoteBorder,
 		"--cm-blockquote-text": x?.blockquoteText,
@@ -233,48 +232,47 @@ var T = [
 		"--cm-h6-text": x?.headingSixText,
 		"--cm-code-inline-bg": x?.inlineCodeBackground,
 		"--cm-code-inline-text": x?.inlineCodeText
-	}), U = p(() => P(u), [u]), W = p(() => ({
-		...B(c, {
-			isStreaming: o,
-			codeBlockCopyLabel: _,
-			codeBlockCopiedLabel: y,
+	}), U = m(() => F(l), [l]), W = m(() => ({
+		...V(s, {
+			isStreaming: a,
+			codeBlockCopyLabel: g,
+			codeBlockCopiedLabel: v,
 			codeBlockTheme: b,
 			tableActionLabels: S,
 			tableDownloadFilename: C,
 			tableOnOpenInCanvas: w,
-			tableScrollRegionAriaLabel: E,
+			tableScrollRegionAriaLabel: T,
 			mathScrollRegionAriaLabel: D
 		}),
-		...F,
-		...l
+		...I,
+		...c
 	}), [
-		c,
-		o,
-		_,
-		y,
+		s,
+		a,
+		g,
+		v,
 		b,
 		S,
 		C,
 		w,
-		E,
+		T,
 		D,
-		l
+		c
 	]);
-	return o && !j ? /* @__PURE__ */ g("span", {
-		className: a.thinking,
-		style: H,
-		children: h
-	}) : /* @__PURE__ */ g("div", {
+	return a && !O ? /* @__PURE__ */ _(u, {
+		label: f,
+		colors: x
+	}) : /* @__PURE__ */ _("div", {
 		style: H,
 		className: i,
-		children: /* @__PURE__ */ g(v, {
-			remarkPlugins: T,
-			rehypePlugins: V,
+		children: /* @__PURE__ */ _(y, {
+			remarkPlugins: E,
+			rehypePlugins: B,
 			components: W,
 			urlTransform: U,
-			children: I
+			children: M
 		})
 	});
 });
 //#endregion
-export { V as MarkdownRenderer, F as defaultMarkdownComponents };
+export { H as MarkdownRenderer, I as defaultMarkdownComponents };

package/components/MarkdownRenderer/Math/MarkdownMathBlock.js

@@ -1,24 +1,25 @@
 import { mergeClasses as e } from "../../../utils/merge-class.js";
-import { useHorizontalOverflow as t } from "../../../hooks/useHorizontalOverflow.js";
-import n from "./MarkdownMathBlock.module.scss.js";
-import { memo as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
+import { CHAT_SHARED_CLASS as t } from "../../../constants/public-class-names.js";
+import { useHorizontalOverflow as n } from "../../../hooks/useHorizontalOverflow.js";
+import r from "./MarkdownMathBlock.module.scss.js";
+import { memo as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/components/MarkdownRenderer/Math/MarkdownMathBlock.tsx
-var a = r(({ children: r, className: a, scrollRegionAriaLabel: o = "Scrollable formula" }) => {
-	let { scrollContainerRef: s, contentRef: c, hasContentBeyondStart: l, hasContentBeyondEnd: u, handleScroll: d } = t(), f = l || u;
-	return /* @__PURE__ */ i("div", {
-		ref: s,
-		className: e("w-full min-w-0 max-w-full overflow-x-auto overflow-y-hidden", n.scrollContainer, a),
-		onScroll: d,
-		role: f ? "region" : void 0,
-		"aria-label": f ? o : void 0,
-		tabIndex: f ? 0 : void 0,
-		children: /* @__PURE__ */ i("span", {
-			ref: c,
-			className: e("katex", n.mathContent),
-			children: r
+var o = i(({ children: i, className: o, scrollRegionAriaLabel: s = "Scrollable formula" }) => {
+	let { scrollContainerRef: c, contentRef: l, hasContentBeyondStart: u, hasContentBeyondEnd: d, handleScroll: f } = n(), p = u || d;
+	return /* @__PURE__ */ a("div", {
+		ref: c,
+		className: e("w-full min-w-0 max-w-full overflow-x-auto overflow-y-hidden", r.scrollContainer, o, t.mathBlock),
+		onScroll: f,
+		role: p ? "region" : void 0,
+		"aria-label": p ? s : void 0,
+		tabIndex: p ? 0 : void 0,
+		children: /* @__PURE__ */ a("span", {
+			ref: l,
+			className: e("katex", r.mathContent),
+			children: i
 		})
 	});
 });
 //#endregion
-export { a as MarkdownMathBlock };
+export { o as MarkdownMathBlock };

package/components/MarkdownRenderer/PlainTextRenderer.js

@@ -0,0 +1,21 @@
+import { mergeClasses as e } from "../../utils/merge-class.js";
+import { useStreamedMarkdownContent as t } from "../../hooks/useStreamedMarkdownContent.js";
+import { ThinkingShimmer as n } from "./ThinkingShimmer.js";
+import { memo as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/MarkdownRenderer/PlainTextRenderer.tsx
+var a = {}, o = r(({ content: r, containerClassName: o, isStreaming: s, streamCharactersPerSecond: c, classNames: l = a, thinkingLabel: u = "Thinking", colors: d }) => {
+	let f = t(r, s, c);
+	return s && !f ? /* @__PURE__ */ i(n, {
+		label: u,
+		colors: d
+	}) : /* @__PURE__ */ i("div", {
+		className: o,
+		children: /* @__PURE__ */ i("p", {
+			className: e(l.p, "whitespace-pre-wrap break-words [overflow-wrap:anywhere]"),
+			children: f
+		})
+	});
+});
+//#endregion
+export { o as PlainTextRenderer };