@epam/ai-dial-chat-shared 1.3.0-dev.29 → 1.3.0-dev.294

package/components/MarkdownRenderer/MarkdownRenderer.d.ts

@@ -0,0 +1,145 @@
+import { FC } from 'react';
+import { Components, Options } from 'react-markdown';
+import { CodeBlockTheme } from '../../types/code-editor';
+import { MarkdownTableActionLabels, MarkdownTableClassNames } from './Table/MarkdownTable';
+/** Per-element className overrides passed to {@link MarkdownRenderer}. */
+export interface MarkdownRendererClassNames extends MarkdownTableClassNames {
+    /** Class on `<h1>`. */
+    h1?: string;
+    /** Class on `<h2>`. */
+    h2?: string;
+    /** Class on `<h3>`. */
+    h3?: string;
+    /** Class on `<h4>`. */
+    h4?: string;
+    /** Class on `<h5>`. */
+    h5?: string;
+    /** Class on `<h6>`. */
+    h6?: string;
+    /** Classes on `<p>` elements. */
+    p?: string;
+    /** Extra classes on `<ul>` (base: `list-disc ps-[2em]`). */
+    ul?: string;
+    /** Extra classes on `<ol>` (base: `list-decimal ps-[2em]`). */
+    ol?: string;
+    /** Typography class for `<strong>`. Defaults to `'dial-body-paragraph-semi-text'` — the semibold step matching the default `p` class. */
+    strong?: string;
+    /** Typography class for `<em>`. Defaults to `'italic'`. */
+    em?: string;
+    /** Extra classes on the {@link MarkdownCodeBlock} outer container. */
+    codeBlockContainer?: string;
+    /** Extra classes on the {@link MarkdownCodeBlock} header bar. */
+    codeBlockHeader?: string;
+    /** Typography class for the `<code>` element inside a code block. Defaults to `'dial-code-text'`. */
+    codeFont?: string;
+    /** Extra classes on inline `<code>` (base: `rounded px-1 py-0.5`). */
+    codeInline?: string;
+    /** Typography class for inline `<code>`. Defaults to `'dial-code-text'`. */
+    codeInlineFont?: string;
+    /** Extra classes on `<blockquote>` (base uses a logical start border and padding). */
+    blockquote?: string;
+    /** Extra classes on `<a>` (base uses the accent text color and an offset underline). */
+    link?: string;
+    /** Extra classes on `<hr>` separators. */
+    hr?: string;
+    /** Extra classes on deleted text rendered by GFM. */
+    del?: string;
+    /** Extra classes on `<th>` and `<td>` (base includes borders, spacing, and text wrapping). */
+    tableCell?: string;
+    /** Extra classes on `<td>` only (applied before `tableCell`, e.g. a body-cell background). */
+    tableBodyCell?: string;
+    /** Extra classes on `<th>` only (applied alongside `tableCell`). */
+    tableHeader?: string;
+    /** Typography class for `<th>` cells. Defaults to `'dial-tiny-lead-semi-text'`. Text color is set separately via `colors.tableHeaderText`. */
+    tableHeaderFont?: string;
+    /** Extra classes on the scrollable wrapper around block (display) LaTeX formulas. */
+    mathBlock?: string;
+}
+/** Props for {@link MarkdownRenderer}. */
+export interface MarkdownRendererProps {
+    /** Raw markdown string to render. */
+    content: string;
+    /** Classes applied to the renderer root. */
+    containerClassName?: string;
+    /** When true, appended content is revealed gradually for smoother streaming updates. */
+    isStreaming?: boolean;
+    /** Reveal speed used while `isStreaming` is true. Defaults to 120 characters per second. */
+    streamCharactersPerSecond?: number;
+    /** Per-element styling classes. Merged with structural base classes inside the component. Defaults to no overrides (`{}`). */
+    classNames?: MarkdownRendererClassNames;
+    /**
+     * Full component overrides merged on top of the built-in map.
+     * Use for elements not covered by `classNames`.
+     */
+    components?: Components;
+    /**
+     * Rewrites `href` and `src` values before they are rendered. The result is
+     * still passed through react-markdown's protocol allowlist. Hosts use this
+     * to map DIAL file ids (`files/{bucket}/{path}`) to download URLs. Defaults
+     * to no extra rewrite.
+     */
+    urlTransform?: (url: string) => string;
+    /** Extra rehype plugins, applied after the built-in KaTeX pass. Defaults to none. */
+    rehypePlugins?: NonNullable<Options['rehypePlugins']>;
+    /** When `false`, raw HTML in `content` renders as literal text instead of being parsed into elements. Defaults to `true`. */
+    isRawHtmlEnabled?: boolean;
+    /**
+     * Label shown with a shimmer animation while `isStreaming` is true and no content has arrived yet.
+     * Defaults to `'Thinking'`. Pass a translated string from the consuming app.
+     */
+    thinkingLabel?: string;
+    /** Accessible label for the copy button in code blocks. Defaults to `'Copy code'`. */
+    codeBlockCopyLabel?: string;
+    /** Accessible label for the copy button after copying. Defaults to `'Copied!'`. */
+    codeBlockCopiedLabel?: string;
+    /** Accessible label for the download button in code blocks. Defaults to `'Download code'`. */
+    codeBlockDownloadLabel?: string;
+    /** Syntax highlight color theme for code blocks and tables. Defaults to `'dark'`. */
+    codeBlockTheme?: CodeBlockTheme;
+    /** Color overrides applied as CSS custom properties. */
+    colors?: MarkdownRendererColors;
+    /** Localized labels for Markdown table actions. Supplying them enables the action bar. */
+    tableActionLabels?: MarkdownTableActionLabels;
+    /** Filename used when downloading a Markdown table as CSV. Defaults to `'table.csv'`. */
+    tableDownloadFilename?: string;
+    tableOnOpenInCanvas?: (markdown: string) => void;
+    /** Accessible label for a table's horizontally scrollable region. Defaults to `'Scrollable table'`. */
+    tableScrollRegionAriaLabel?: string;
+    /** Accessible label for a block formula's horizontally scrollable region. Defaults to `'Scrollable formula'`. */
+    mathScrollRegionAriaLabel?: string;
+    /** Accessible label for a code block's scrollable region. Defaults to `'Scrollable code'`. */
+    codeBlockScrollRegionAriaLabel?: string;
+}
+/** CSS custom-property overrides for the `MarkdownRenderer` component. */
+export interface MarkdownRendererColors {
+    /** Primary color of the "thinking" shimmer gradient. */
+    thinkingPrimary?: string;
+    /** Secondary color of the "thinking" shimmer gradient. */
+    thinkingSecondary?: string;
+    /** Border color for `<hr>` separators and table cell borders. */
+    border?: string;
+    /** Border color for the `<blockquote>` start border. Defaults to `--stroke-primary`. */
+    blockquoteBorder?: string;
+    /** Text color for `<blockquote>` content. Defaults to `--text-secondary`. */
+    blockquoteText?: string;
+    /** Text color for `<a>` links. Defaults to `--text-accent`. */
+    linkText?: string;
+    /** Focus-visible outline color for `<a>` links. Defaults to `--stroke-focus`. */
+    linkFocus?: string;
+    /** Text color for `<th>` table header cells. Defaults to `--text-secondary`. */
+    tableHeaderText?: string;
+    /** Text color for `<h6>` headings. Defaults to `--text-secondary`. */
+    headingSixText?: string;
+    /** Background color for inline `<code>` spans. Defaults to `--bg-layer-raised`. */
+    inlineCodeBackground?: string;
+    /** Text color for inline `<code>` spans. Defaults to `--text-primary`. */
+    inlineCodeText?: string;
+    /** Scrollbar thumb color of a horizontally scrolling display formula. Defaults to `--stroke-primary`. */
+    mathScrollbar?: string;
+    /** Focus-visible outline color of a scrollable display formula. Defaults to `--stroke-focus`. */
+    mathFocus?: string;
+}
+export declare const defaultMarkdownComponents: Components;
+/** Markdown renderer with GFM support. Styling is driven by `classNames`; structural overrides via `components`. */
+export declare const MarkdownRenderer: FC<MarkdownRendererProps>;
+//# sourceMappingURL=MarkdownRenderer.d.ts.map

package/components/MarkdownRenderer/MarkdownRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/MarkdownRenderer/MarkdownRenderer.tsx"],"names":[],"mappings":"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"}

package/components/MarkdownRenderer/MarkdownRenderer.js

@@ -2,28 +2,29 @@ import { mergeClasses as e } from "../../utils/merge-class.js";
 import { buildCssVars as t } from "../../utils/build-css-vars.js";
 import { useStreamedMarkdownContent as n } from "../../hooks/useStreamedMarkdownContent.js";
 import { preprocessLaTeX as r } from "../../utils/latex.js";
-import { MarkdownCodeBlock as i } from "./CodeBlock/CodeBlock.js";
-import { rehypePreserveSpaces as a } from "./markdown-whitespace.js";
-import o from "./MarkdownRenderer.module.scss.js";
-import { MarkdownMathBlock as s } from "./Math/MarkdownMathBlock.js";
-import c from "./Table/MarkdownTable.module.scss.js";
-import { MarkdownTable as l } from "./Table/MarkdownTable.js";
-import { MarkdownTaskCheckbox as u } from "./TaskCheckbox/MarkdownTaskCheckbox.js";
-import { ThinkingShimmer as d } from "./ThinkingShimmer.js";
-import f from "remark-gfm";
-import { memo as p, useEffect as m, useMemo as h, useState as g } from "react";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
-import b, { defaultUrlTransform as x } from "react-markdown";
-import S from "rehype-raw";
-import C, { defaultSchema as w } from "rehype-sanitize";
-import T from "remark-breaks";
-import E from "remark-math";
+import { rehypeRawAsText as i } from "../../utils/markdown-html.js";
+import { MarkdownCodeBlock as a } from "./CodeBlock/CodeBlock.js";
+import { rehypePreserveSpaces as o } from "./markdown-whitespace.js";
+import s from "./MarkdownRenderer.module.scss.js";
+import { MarkdownMathBlock as c } from "./Math/MarkdownMathBlock.js";
+import l from "./Table/MarkdownTable.module.scss.js";
+import { MarkdownTable as u } from "./Table/MarkdownTable.js";
+import { MarkdownTaskCheckbox as d } from "./TaskCheckbox/MarkdownTaskCheckbox.js";
+import { ThinkingShimmer as f } from "./ThinkingShimmer.js";
+import p from "remark-gfm";
+import { memo as m, useEffect as h, useMemo as g, useState as _ } from "react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import x, { defaultUrlTransform as S } from "react-markdown";
+import C from "rehype-raw";
+import w, { defaultSchema as T } from "rehype-sanitize";
+import E from "remark-breaks";
+import D from "remark-math";
 //#region src/components/MarkdownRenderer/MarkdownRenderer.tsx
-var D = [
-	f,
-	T,
-	[E, { singleDollarTextMath: !1 }]
-], O = /* @__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("."), k = {
+var O = [
+	p,
+	E,
+	[D, { singleDollarTextMath: !1 }]
+], k = /* @__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("."), A = {
 	math: ["display", "xmlns"],
 	annotation: ["encoding"],
 	mfrac: ["linethickness"],
@@ -52,134 +53,135 @@ var D = [
 		"width"
 	],
 	mtd: ["width"]
-}, A = [S], j = [C, {
-	...w,
+}, j = [C], M = [i], N = [w, {
+	...T,
 	tagNames: [
-		...w.tagNames ?? [],
-		...O,
+		...T.tagNames ?? [],
+		...k,
 		"cit"
 	],
 	attributes: {
-		...w.attributes,
-		...k,
-		code: [...w.attributes?.code ?? [], ["className"]],
+		...T.attributes,
+		...A,
+		code: [...T.attributes?.code ?? [], ["className"]],
 		cit: ["dataId"],
-		span: [...w.attributes?.span ?? [], [
+		span: [...T.attributes?.span ?? [], [
 			"className",
 			"katex",
 			"katex-error"
 		]]
 	}
-}], M = [], N = /\$\$|\\\(|\\\[/, P = (e) => N.test(e), F = {}, I = (e) => e == null ? x : (t) => x(e(t)), L = {
-	li: ({ children: e }) => /* @__PURE__ */ v("li", {
+}], P = [], F = /\$\$|\\\(|\\\[/, I = (e) => F.test(e), L = {}, R = (e) => e == null ? S : (t) => S(e(t)), z = {
+	li: ({ children: e }) => /* @__PURE__ */ y("li", {
 		className: "mb-1.5 last:mb-0",
 		children: e
 	}),
-	cit: ({ children: e, ...t }) => /* @__PURE__ */ y(_, { children: [
+	cit: ({ children: e, ...t }) => /* @__PURE__ */ b(v, { children: [
 		t["data-id"] == null ? "<cit>" : `<cit data-id="${t["data-id"]}">`,
 		e,
 		"</cit>"
 	] })
-}, R = (e) => {
+}, B = (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");
-}, z = {
+}, V = {
 	left: "text-start",
 	center: "text-center",
 	right: "text-end"
-}, B = (e) => {
+}, H = (e) => {
 	let t = e?.properties?.align;
-	return typeof t == "string" ? z[t] : void 0;
-}, V = (e) => e ? e.type === "text" ? e.value ?? "" : (e.children ?? []).map(V).join("") : "", H = (t, { isStreaming: n, codeBlockCopyLabel: r, codeBlockCopiedLabel: a, codeBlockDownloadLabel: d, codeBlockTheme: f, tableActionLabels: p, tableDownloadFilename: m, tableOnOpenInCanvas: h, tableScrollRegionAriaLabel: g, mathScrollRegionAriaLabel: y }) => ({
-	h1: ({ children: e }) => /* @__PURE__ */ v("h1", {
+	return typeof t == "string" ? V[t] : void 0;
+}, U = (e) => e ? e.type === "text" ? e.value ?? "" : (e.children ?? []).map(U).join("") : "", W = (t, { isStreaming: n, codeBlockCopyLabel: r, codeBlockCopiedLabel: i, codeBlockDownloadLabel: o, codeBlockTheme: f, tableActionLabels: p, tableDownloadFilename: m, tableOnOpenInCanvas: h, tableScrollRegionAriaLabel: g, mathScrollRegionAriaLabel: _, codeBlockScrollRegionAriaLabel: b }) => ({
+	h1: ({ children: e }) => /* @__PURE__ */ y("h1", {
 		className: t.h1,
 		children: e
 	}),
-	h2: ({ children: e }) => /* @__PURE__ */ v("h2", {
+	h2: ({ children: e }) => /* @__PURE__ */ y("h2", {
 		className: t.h2,
 		children: e
 	}),
-	h3: ({ children: e }) => /* @__PURE__ */ v("h3", {
+	h3: ({ children: e }) => /* @__PURE__ */ y("h3", {
 		className: t.h3,
 		children: e
 	}),
-	h4: ({ children: e }) => /* @__PURE__ */ v("h4", {
+	h4: ({ children: e }) => /* @__PURE__ */ y("h4", {
 		className: t.h4,
 		children: e
 	}),
-	h5: ({ children: e }) => /* @__PURE__ */ v("h5", {
+	h5: ({ children: e }) => /* @__PURE__ */ y("h5", {
 		className: t.h5,
 		children: e
 	}),
-	h6: ({ children: n }) => /* @__PURE__ */ v("h6", {
-		className: e(o.h6, t.h6),
+	h6: ({ children: n }) => /* @__PURE__ */ y("h6", {
+		className: e(s.h6, t.h6),
 		children: n
 	}),
-	p: ({ children: n }) => /* @__PURE__ */ v("p", {
-		className: e("break-words", t.p),
+	p: ({ children: n }) => /* @__PURE__ */ y("p", {
+		className: e("wrap-break-word", t.p),
 		children: n
 	}),
-	ul: ({ children: n }) => /* @__PURE__ */ v("ul", {
+	ul: ({ children: n }) => /* @__PURE__ */ y("ul", {
 		className: e("list-disc ps-[2em]", t.ul),
 		children: n
 	}),
-	ol: ({ children: n }) => /* @__PURE__ */ v("ol", {
+	ol: ({ children: n }) => /* @__PURE__ */ y("ol", {
 		className: e("list-decimal ps-[2em]", t.ol),
 		children: n
 	}),
-	strong: ({ children: e }) => /* @__PURE__ */ v("strong", {
+	strong: ({ children: e }) => /* @__PURE__ */ y("strong", {
 		className: t.strong ?? "dial-body-paragraph-semi-text",
 		children: e
 	}),
-	em: ({ children: e }) => /* @__PURE__ */ v("em", {
+	em: ({ children: e }) => /* @__PURE__ */ y("em", {
 		className: t.em ?? "italic",
 		children: e
 	}),
-	pre: ({ children: e }) => /* @__PURE__ */ v(_, { children: e }),
-	code: ({ children: s, className: c }) => {
-		let l = /language-(\w+)/.exec(c ?? "")?.[1] ?? "", u = String(s);
-		return l || u.includes("\n") ? /* @__PURE__ */ v(i, {
-			language: l,
-			value: u.replace(/\n$/, ""),
+	pre: ({ children: e }) => /* @__PURE__ */ y(v, { children: e }),
+	code: ({ children: c, className: l }) => {
+		let u = /language-(\w+)/.exec(l ?? "")?.[1] ?? "", d = String(c);
+		return u || d.includes("\n") ? /* @__PURE__ */ y(a, {
+			language: u,
+			value: d.replace(/\n$/, ""),
 			isStreaming: n,
 			theme: f,
 			copyLabel: r,
-			copiedLabel: a,
-			downloadLabel: d,
+			copiedLabel: i,
+			downloadLabel: o,
+			scrollRegionAriaLabel: b,
 			containerClassName: t.codeBlockContainer,
 			headerClassName: t.codeBlockHeader,
 			codeClassName: t.codeFont
-		}) : /* @__PURE__ */ v("code", {
-			className: e("rounded px-1 py-0.5", o.codeInline, t.codeInlineFont ?? "dial-code-text", t.codeInline),
-			children: s
+		}) : /* @__PURE__ */ y("code", {
+			className: e("rounded px-1 py-0.5", s.codeInline, t.codeInlineFont ?? "dial-code-text", t.codeInline),
+			children: c
 		});
 	},
-	blockquote: ({ children: n }) => /* @__PURE__ */ v("blockquote", {
-		className: e("border-s-2 py-1 ps-4", o.blockquote, t.blockquote),
+	blockquote: ({ children: n }) => /* @__PURE__ */ y("blockquote", {
+		className: e("border-s-2 py-1 ps-4", s.blockquote, t.blockquote),
 		children: n
 	}),
-	a: ({ href: n, children: r }) => /* @__PURE__ */ v("a", {
+	a: ({ href: n, children: r }) => /* @__PURE__ */ y("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", o.link, t.link),
+		className: e("wrap-break-word underline decoration-current/60 underline-offset-2 hover:decoration-current focus-visible:outline-1 focus-visible:outline-offset-2", s.link, t.link),
 		children: r
 	}),
-	hr: () => /* @__PURE__ */ v("hr", { className: e("my-5 border-t", o.secondaryBorder, t.hr) }),
-	del: ({ children: n }) => /* @__PURE__ */ v("del", {
+	hr: () => /* @__PURE__ */ y("hr", { className: e("my-5 border-t", s.secondaryBorder, t.hr) }),
+	del: ({ children: n }) => /* @__PURE__ */ y("del", {
 		className: e("opacity-75", t.del),
 		children: n
 	}),
-	input: ({ type: e, checked: t }) => e === "checkbox" ? /* @__PURE__ */ v(u, { checked: t ?? !1 }) : null,
-	span: ({ children: e, node: n, ...r }) => R(n) ? /* @__PURE__ */ v(s, {
+	input: ({ type: e, checked: t }) => e === "checkbox" ? /* @__PURE__ */ y(d, { checked: t ?? !1 }) : null,
+	span: ({ children: e, node: n, ...r }) => B(n) ? /* @__PURE__ */ y(c, {
 		className: t.mathBlock,
-		scrollRegionAriaLabel: y,
+		scrollRegionAriaLabel: _,
 		children: e
-	}) : /* @__PURE__ */ v("span", {
+	}) : /* @__PURE__ */ y("span", {
 		...r,
 		children: e
 	}),
-	table: ({ children: e }) => /* @__PURE__ */ v(l, {
+	table: ({ children: e }) => /* @__PURE__ */ y(u, {
 		classNames: t,
 		actionLabels: p,
 		downloadFilename: m,
@@ -189,95 +191,103 @@ var D = [
 		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) => V(e).trim().length > 0).length, o = !i && r.length > 1 && a === 1;
-		return /* @__PURE__ */ v("tr", {
-			className: e(c.row, o && c.sectionRow),
+		let r = n?.children.filter((e) => e.type === "element") ?? [], i = r.some((e) => e.tagName === "th"), a = r.filter((e) => U(e).trim().length > 0).length, o = !i && r.length > 1 && a === 1;
+		return /* @__PURE__ */ y("tr", {
+			className: e(l.row, o && l.sectionRow),
 			children: t
 		});
 	},
-	th: ({ children: n, node: r }) => /* @__PURE__ */ v("th", {
+	th: ({ children: n, node: r }) => /* @__PURE__ */ y("th", {
 		scope: "col",
-		className: e("sticky top-0 z-[2] max-w-96 whitespace-normal break-words px-3 py-2.5 text-start", B(r), c.rowDivider, c.tableHeaderCell, t.tableHeaderFont ?? "dial-tiny-lead-semi-text", t.tableCell, t.tableHeader),
+		className: e("sticky top-0 z-2 max-w-96 px-3 py-2.5 text-start wrap-break-word whitespace-normal", H(r), l.rowDivider, l.tableHeaderCell, t.tableHeaderFont ?? "dial-tiny-lead-semi-text", t.tableCell, t.tableHeader),
 		children: n
 	}),
-	td: ({ children: n, node: r }) => /* @__PURE__ */ v("td", {
-		className: e("max-w-96 whitespace-normal px-3 py-[7px] align-top [overflow-wrap:anywhere]", B(r), c.rowDivider, t.tableBodyCell, t.tableCell),
+	td: ({ children: n, node: r }) => /* @__PURE__ */ y("td", {
+		className: e("max-w-96 px-3 py-[7px] align-top wrap-anywhere whitespace-normal", H(r), l.rowDivider, t.tableBodyCell, t.tableCell),
 		children: n
 	})
-}), U = p(({ content: e, containerClassName: i, isStreaming: o, streamCharactersPerSecond: s, classNames: c = F, components: l, urlTransform: u, rehypePlugins: f = M, thinkingLabel: p = "Thinking", codeBlockCopyLabel: _, codeBlockCopiedLabel: y, codeBlockDownloadLabel: x, codeBlockTheme: S, colors: C, tableActionLabels: w, tableDownloadFilename: T, tableOnOpenInCanvas: E, tableScrollRegionAriaLabel: O, mathScrollRegionAriaLabel: k }) => {
-	let N = n(e, o, s), R = h(() => r(N), [N]), z = h(() => P(R), [R]), [B, V] = g(null);
-	m(() => {
-		if (!z || B) return;
+}), G = m(({ content: i, containerClassName: a, isStreaming: s, streamCharactersPerSecond: c, classNames: l = L, components: u, urlTransform: d, rehypePlugins: p = P, isRawHtmlEnabled: m = !0, thinkingLabel: v = "Thinking", codeBlockCopyLabel: b, codeBlockCopiedLabel: S, codeBlockDownloadLabel: C, codeBlockTheme: w, colors: T, tableActionLabels: E, tableDownloadFilename: D, tableOnOpenInCanvas: k, tableScrollRegionAriaLabel: A, mathScrollRegionAriaLabel: F, codeBlockScrollRegionAriaLabel: B }) => {
+	let V = n(i, s, c), H = g(() => r(V), [V]), U = g(() => I(H), [H]), [G, K] = _(null);
+	h(() => {
+		if (!U || G) return;
 		let e = !1;
 		return (async () => {
 			let [t] = await Promise.all([import("rehype-katex"), import("katex/dist/katex.min.css")]);
-			e || V([t.default, {
+			e || K([t.default, {
 				output: "mathml",
 				strict: !1
 			}]);
 		})(), () => {
 			e = !0;
 		};
-	}, [z, B]);
-	let U = h(() => [
-		...A,
-		...B ? [B] : [],
-		j,
-		a,
-		...f
-	], [B, f]), W = t({
-		"--cm-markdown-border": C?.border,
-		"--cm-blockquote-border": C?.blockquoteBorder,
-		"--cm-blockquote-text": C?.blockquoteText,
-		"--cm-link-text": C?.linkText,
-		"--cm-link-focus": C?.linkFocus,
-		"--cm-table-header-text": C?.tableHeaderText,
-		"--cm-h6-text": C?.headingSixText,
-		"--cm-code-inline-bg": C?.inlineCodeBackground,
-		"--cm-code-inline-text": C?.inlineCodeText
-	}), G = h(() => I(u), [u]), K = h(() => ({
-		...H(c, {
-			isStreaming: o,
-			codeBlockCopyLabel: _,
-			codeBlockCopiedLabel: y,
-			codeBlockDownloadLabel: x,
-			codeBlockTheme: S,
-			tableActionLabels: w,
-			tableDownloadFilename: T,
-			tableOnOpenInCanvas: E,
-			tableScrollRegionAriaLabel: O,
-			mathScrollRegionAriaLabel: k
+	}, [U, G]);
+	let q = g(() => [
+		...m ? j : M,
+		...G ? [G] : [],
+		N,
+		o,
+		...p
+	], [
+		m,
+		G,
+		p
+	]), J = t({
+		"--cm-markdown-border": T?.border,
+		"--cm-blockquote-border": T?.blockquoteBorder,
+		"--cm-blockquote-text": T?.blockquoteText,
+		"--cm-link-text": T?.linkText,
+		"--cm-link-focus": T?.linkFocus,
+		"--cm-table-header-text": T?.tableHeaderText,
+		"--cm-h6-text": T?.headingSixText,
+		"--cm-code-inline-bg": T?.inlineCodeBackground,
+		"--cm-code-inline-text": T?.inlineCodeText,
+		"--cm-math-scrollbar": T?.mathScrollbar,
+		"--cm-math-focus": T?.mathFocus
+	}), Y = g(() => R(d), [d]), X = g(() => ({
+		...W(l, {
+			isStreaming: s,
+			codeBlockCopyLabel: b,
+			codeBlockCopiedLabel: S,
+			codeBlockDownloadLabel: C,
+			codeBlockTheme: w,
+			tableActionLabels: E,
+			tableDownloadFilename: D,
+			tableOnOpenInCanvas: k,
+			tableScrollRegionAriaLabel: A,
+			mathScrollRegionAriaLabel: F,
+			codeBlockScrollRegionAriaLabel: B
 		}),
-		...L,
-		...l
+		...z,
+		...u
 	}), [
-		c,
-		o,
-		_,
-		y,
-		x,
+		l,
+		s,
+		b,
 		S,
+		C,
 		w,
-		T,
 		E,
-		O,
+		D,
 		k,
-		l
+		A,
+		F,
+		B,
+		u
 	]);
-	return o && !N ? /* @__PURE__ */ v(d, {
-		label: p,
-		colors: C
-	}) : /* @__PURE__ */ v("div", {
-		style: W,
-		className: i,
-		children: /* @__PURE__ */ v(b, {
-			remarkPlugins: D,
-			rehypePlugins: U,
-			components: K,
-			urlTransform: G,
-			children: R
+	return s && !V ? /* @__PURE__ */ y(f, {
+		label: v,
+		colors: T
+	}) : /* @__PURE__ */ y("div", {
+		style: J,
+		className: e("wrap-anywhere", a),
+		children: /* @__PURE__ */ y(x, {
+			remarkPlugins: O,
+			rehypePlugins: q,
+			components: X,
+			urlTransform: Y,
+			children: H
 		})
 	});
 });
 //#endregion
-export { U as MarkdownRenderer, L as defaultMarkdownComponents };
+export { G as MarkdownRenderer, z as defaultMarkdownComponents };

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

@@ -1,11 +1,12 @@
-var e = {
-	thinking: "_thinking_1ql91_9",
+//#region src/components/MarkdownRenderer/MarkdownRenderer.module.scss
+var e = "_thinking_1ql91_9", t = "_h6_1ql91_18", n = "_codeInline_1ql91_22", r = "_secondaryBorder_1ql91_27", i = "_blockquote_1ql91_31", a = "_link_1ql91_36", o = {
+	thinking: e,
 	"cm-shimmer": "_cm-shimmer_1ql91_1",
-	h6: "_h6_1ql91_18",
-	codeInline: "_codeInline_1ql91_22",
-	secondaryBorder: "_secondaryBorder_1ql91_27",
-	blockquote: "_blockquote_1ql91_31",
-	link: "_link_1ql91_36"
+	h6: t,
+	codeInline: n,
+	secondaryBorder: r,
+	blockquote: i,
+	link: a
 };
 //#endregion
-export { e as default };
+export { i as blockquote, n as codeInline, o as default, t as h6, a as link, r as secondaryBorder, e as thinking };

package/components/MarkdownRenderer/Math/MarkdownMathBlock.d.ts

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from 'react';
+/** Props for {@link MarkdownMathBlock}. */
+export interface MarkdownMathBlockProps {
+    /** Rendered KaTeX output — the `<math display="block">` element and its subtree. */
+    children: ReactNode;
+    /** Extra classes on the scroll container. */
+    className?: string;
+    /** Accessible label for the horizontally scrollable region. Defaults to `'Scrollable formula'`. */
+    scrollRegionAriaLabel?: string;
+}
+/**
+ * Wraps KaTeX display math in a horizontally scrollable region so a formula
+ * wider than the message column stays reachable instead of being clipped.
+ * The region only becomes a labelled, keyboard-focusable landmark while it
+ * actually overflows, so ordinary formulas add no tab stop or noise.
+ */
+export declare const MarkdownMathBlock: FC<MarkdownMathBlockProps>;
+//# sourceMappingURL=MarkdownMathBlock.d.ts.map

package/components/MarkdownRenderer/Math/MarkdownMathBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownMathBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/MarkdownRenderer/Math/MarkdownMathBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAQ,MAAM,OAAO,CAAC;AAMtD,2CAA2C;AAC3C,MAAM,WAAW,sBAAsB;IACrC,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mGAAmG;IACnG,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAqCxD,CAAC"}

package/components/MarkdownRenderer/Math/MarkdownMathBlock.js

@@ -9,7 +9,7 @@ var o = i(({ children: i, className: o, scrollRegionAriaLabel: s = "Scrollable f
 	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),
+		className: e("w-full max-w-full min-w-0 overflow-x-auto overflow-y-hidden", r.scrollContainer, o, t.mathBlock),
 		onScroll: f,
 		role: p ? "region" : void 0,
 		"aria-label": p ? s : void 0,

package/components/MarkdownRenderer/Math/MarkdownMathBlock.module.scss.js

@@ -1,6 +1,7 @@
-var e = {
-	scrollContainer: "_scrollContainer_n2oom_1",
-	mathContent: "_mathContent_n2oom_24"
+//#region src/components/MarkdownRenderer/Math/MarkdownMathBlock.module.scss
+var e = "_scrollContainer_n2oom_1", t = "_mathContent_n2oom_24", n = {
+	scrollContainer: e,
+	mathContent: t
 };
 //#endregion
-export { e as default };
+export { n as default, t as mathContent, e as scrollContainer };