@epam/ai-dial-chat-shared 1.2.0-dev.3 → 1.2.0-dev.303

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,231 +51,231 @@ 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, codeBlockDownloadLabel: d, codeBlockTheme: f, tableActionLabels: p, tableDownloadFilename: m, tableOnOpenInCanvas: h, tableScrollRegionAriaLabel: v, mathScrollRegionAriaLabel: y }) => ({
+	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,
-			theme: d,
+			theme: f,
 			copyLabel: r,
 			copiedLabel: u,
+			downloadLabel: d,
 			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,
+		scrollRegionAriaLabel: y,
 		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,
+		actionLabels: p,
+		downloadFilename: m,
+		onOpenInCanvas: h,
 		isStreaming: n,
-		scrollRegionAriaLabel: _,
+		scrollRegionAriaLabel: v,
 		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(() => {
-		if (!L || R) return;
+}), 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, codeBlockDownloadLabel: b, codeBlockTheme: x, colors: S, tableActionLabels: C, tableDownloadFilename: w, tableOnOpenInCanvas: T, tableScrollRegionAriaLabel: D, mathScrollRegionAriaLabel: O }) => {
+	let M = n(e, a, o), L = m(() => r(M), [M]), R = m(() => N(L), [L]), [z, B] = h(null);
+	p(() => {
+		if (!R || z) return;
 		let e = !1;
 		return (async () => {
 			let [t] = await Promise.all([import("rehype-katex"), import("katex/dist/katex.min.css")]);
-			e || z([t.default, {
+			e || B([t.default, {
 				output: "mathml",
 				strict: !1
 			}]);
 		})(), () => {
 			e = !0;
 		};
-	}, [L, R]);
-	let V = p(() => [
-		...O,
-		...R ? [R] : [],
-		k,
+	}, [R, z]);
+	let H = m(() => [
+		...k,
+		...z ? [z] : [],
+		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,
-		"--cm-link-text": x?.linkText,
-		"--cm-link-focus": x?.linkFocus,
-		"--cm-table-header-text": x?.tableHeaderText,
-		"--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,
-			codeBlockTheme: b,
-			tableActionLabels: S,
-			tableDownloadFilename: C,
-			tableOnOpenInCanvas: w,
-			tableScrollRegionAriaLabel: E,
-			mathScrollRegionAriaLabel: D
+	], [z, d]), U = t({
+		"--cm-markdown-border": S?.border,
+		"--cm-blockquote-border": S?.blockquoteBorder,
+		"--cm-blockquote-text": S?.blockquoteText,
+		"--cm-link-text": S?.linkText,
+		"--cm-link-focus": S?.linkFocus,
+		"--cm-table-header-text": S?.tableHeaderText,
+		"--cm-h6-text": S?.headingSixText,
+		"--cm-code-inline-bg": S?.inlineCodeBackground,
+		"--cm-code-inline-text": S?.inlineCodeText
+	}), W = m(() => F(l), [l]), G = m(() => ({
+		...V(s, {
+			isStreaming: a,
+			codeBlockCopyLabel: g,
+			codeBlockCopiedLabel: v,
+			codeBlockDownloadLabel: b,
+			codeBlockTheme: x,
+			tableActionLabels: C,
+			tableDownloadFilename: w,
+			tableOnOpenInCanvas: T,
+			tableScrollRegionAriaLabel: D,
+			mathScrollRegionAriaLabel: O
 		}),
-		...F,
-		...l
+		...I,
+		...c
 	}), [
-		c,
-		o,
-		_,
-		y,
+		s,
+		a,
+		g,
+		v,
 		b,
-		S,
+		x,
 		C,
 		w,
-		E,
+		T,
 		D,
-		l
+		O,
+		c
 	]);
-	return o && !j ? /* @__PURE__ */ g("span", {
-		className: a.thinking,
-		style: H,
-		children: h
-	}) : /* @__PURE__ */ g("div", {
-		style: H,
+	return a && !M ? /* @__PURE__ */ _(u, {
+		label: f,
+		colors: S
+	}) : /* @__PURE__ */ _("div", {
+		style: U,
 		className: i,
-		children: /* @__PURE__ */ g(v, {
-			remarkPlugins: T,
-			rehypePlugins: V,
-			components: W,
-			urlTransform: U,
-			children: I
+		children: /* @__PURE__ */ _(y, {
+			remarkPlugins: E,
+			rehypePlugins: H,
+			components: G,
+			urlTransform: W,
+			children: L
 		})
 	});
 });
 //#endregion
-export { V as MarkdownRenderer, F as defaultMarkdownComponents };
+export { H as MarkdownRenderer, I as defaultMarkdownComponents };

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

@@ -1,11 +1,11 @@
 var e = {
-	thinking: "_thinking_1g29w_9",
-	"cm-shimmer": "_cm-shimmer_1g29w_1",
-	h6: "_h6_1g29w_18",
-	codeInline: "_codeInline_1g29w_22",
-	secondaryBorder: "_secondaryBorder_1g29w_27",
-	blockquote: "_blockquote_1g29w_31",
-	link: "_link_1g29w_36"
+	thinking: "_thinking_1ql91_9",
+	"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"
 };
 //#endregion
 export { e as default };

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/Math/MarkdownMathBlock.module.scss.js

@@ -1,6 +1,6 @@
 var e = {
-	scrollContainer: "_scrollContainer_1f433_1",
-	mathContent: "_mathContent_1f433_24"
+	scrollContainer: "_scrollContainer_n2oom_1",
+	mathContent: "_mathContent_n2oom_24"
 };
 //#endregion
 export { e as default };

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 };

package/components/MarkdownRenderer/Table/MarkdownTable.js

@@ -1,77 +1,92 @@
 import { mergeClasses as e } from "../../../utils/merge-class.js";
 import { buildCssVars as t } from "../../../utils/build-css-vars.js";
-import { copyToClipboard as n } from "../../../utils/copy-to-clipboard.js";
+import { copyMarkdownAsRichText as n } from "../../../utils/copy-to-clipboard.js";
 import { downloadTextFile as r } from "../../../utils/file-download.js";
-import { TableHeader as i } from "./TableHeader.js";
+import { CHAT_SHARED_CLASS as i } from "../../../constants/public-class-names.js";
 import { useHorizontalOverflow as a } from "../../../hooks/useHorizontalOverflow.js";
 import o from "./MarkdownTable.module.scss.js";
 import { MARKDOWN_TABLE_CSV_MIME_TYPE as s, MarkdownTableCopyFormat as c, serializeMarkdownTableRows as l } from "./table-serialization.js";
 import { useMarkdownTableActions as u } from "./useMarkdownTableActions/useMarkdownTableActions.js";
-import { memo as d, useCallback as f, useEffect as p, useRef as m, useState as h } from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { ElementSize as d, GhostIconButton as f } from "@epam/ai-dial-ui-kit";
+import { memo as p, useCallback as m, useEffect as h, useRef as g, useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/components/MarkdownRenderer/Table/MarkdownTable.tsx
-var v = 2e3, y = d(({ children: d, classNames: y, colors: b, actionLabels: x, downloadFilename: S, isStreaming: C, onOpenInCanvas: w, scrollRegionAriaLabel: T = "Scrollable table" }) => {
-	let [E, D] = h(void 0), O = m(null), { scrollContainerRef: k, contentRef: A, hasContentBeyondStart: j, hasContentBeyondEnd: M, handleScroll: N } = a(), P = t({
-		"--cm-markdown-border": b?.border,
-		"--cm-table-scrollbar": b?.scrollbar,
-		"--cm-table-fade": b?.fade,
-		"--cm-table-row-divider": b?.rowDivider,
-		"--cm-table-row-zebra-bg": b?.rowZebraBackground,
-		"--cm-table-row-hover-bg": b?.rowHoverBackground
-	}), F = j || M;
-	p(() => () => {
-		O.current != null && clearTimeout(O.current);
+var b = 2e3, x = p(({ children: p, classNames: x, colors: S, actionLabels: C, downloadFilename: w, isStreaming: T, onOpenInCanvas: E, scrollRegionAriaLabel: D = "Scrollable table" }) => {
+	let [O, k] = _(!1), A = g(null), { scrollContainerRef: j, contentRef: M, hasContentBeyondStart: N, hasContentBeyondEnd: P, handleScroll: F } = a(), I = t({
+		"--cm-markdown-border": S?.border,
+		"--cm-table-scrollbar": S?.scrollbar,
+		"--cm-table-fade": S?.fade,
+		"--cm-table-row-divider": S?.rowDivider,
+		"--cm-table-row-hover-bg": S?.rowHoverBackground
+	}), L = N || P;
+	h(() => () => {
+		A.current != null && clearTimeout(A.current);
 	}, []);
-	let I = f((e) => {
-		let t = A.current;
-		t != null && n(l(Array.from(t.rows), e)).then((t) => {
-			t && (O.current != null && clearTimeout(O.current), D(e), O.current = setTimeout(() => {
-				D(void 0);
-			}, v));
+	let R = m(() => {
+		let e = M.current;
+		e != null && n(l(Array.from(e.rows), c.Markdown)).then((e) => {
+			e && (A.current != null && clearTimeout(A.current), k(!0), A.current = setTimeout(() => {
+				k(!1);
+			}, b));
 		});
-	}, [A]), L = f(() => {
-		let e = A.current;
-		e != null && r(`\uFEFF${l(Array.from(e.rows), c.Csv)}`, S ?? "table.csv", s);
-	}, [A, S]), R = f(() => {
-		let e = A.current;
-		e == null || w == null || w(l(Array.from(e.rows), c.Markdown));
-	}, [A, w]), z = u({
-		actionLabels: x,
-		copiedFormat: E,
-		onCopy: I,
-		onDownloadCsv: L,
-		onOpenInCanvas: w == null ? void 0 : R
-	}), B = z.length > 0 && !C;
-	return /* @__PURE__ */ _("div", {
-		style: P,
-		className: e("relative w-full min-w-0 max-w-full overflow-hidden rounded-xl border", o.tableContainer, o.tableContainerLight, y.tableWrapper),
+	}, [M]), z = m(() => {
+		let e = M.current;
+		e != null && r(`\uFEFF${l(Array.from(e.rows), c.Csv)}`, w ?? "table.csv", s);
+	}, [M, w]), B = m(() => {
+		let e = M.current;
+		e == null || E == null || E(l(Array.from(e.rows), c.Markdown));
+	}, [M, E]), V = u({
+		actionLabels: C,
+		isCopied: O,
+		onCopy: R,
+		onDownloadCsv: z,
+		onOpenInCanvas: E == null ? void 0 : B
+	}), H = V.length > 0 && !T;
+	return /* @__PURE__ */ y("div", {
+		style: I,
+		className: e("group/table relative w-full min-w-0 max-w-full rounded-xl border [overflow:clip]", o.tableContainer, x.tableWrapper, i.table),
 		children: [
-			B && /* @__PURE__ */ g(i, { actions: z }),
-			/* @__PURE__ */ g("div", {
-				ref: k,
-				className: e("w-full min-w-0 max-w-full overflow-x-auto", o.scrollContainer, y.tableScrollContainer, {
-					[o.tableScrollFadeBoth]: j && M,
-					[o.tableScrollFadeStart]: j && !M,
-					[o.tableScrollFadeEnd]: !j && M
-				}),
-				onScroll: N,
-				role: F ? "region" : void 0,
-				"aria-label": F ? T : void 0,
-				tabIndex: F ? 0 : void 0,
-				children: /* @__PURE__ */ g("table", {
-					ref: A,
-					className: e("w-max min-w-full border-collapse", y.tableFont ?? "dial-small-text"),
-					children: d
+			H && /* @__PURE__ */ v("div", {
+				className: "sticky top-0 z-10 h-0",
+				children: /* @__PURE__ */ v("div", {
+					className: "absolute end-2 top-2 flex items-center gap-1 rounded-lg border border-tertiary bg-layer-raised px-2 py-1 opacity-0 shadow-xs transition-opacity focus-within:opacity-100 group-hover/table:opacity-100",
+					children: V.map((e) => /* @__PURE__ */ v(f, {
+						tooltipProps: { tooltip: e.label },
+						"aria-label": e.label,
+						icon: /* @__PURE__ */ v("span", {
+							"aria-hidden": !0,
+							children: e.icon
+						}),
+						size: d.Small,
+						onClick: e.onClick
+					}, e.label))
 				})
 			}),
-			x?.copiedLabel && /* @__PURE__ */ g("span", {
+			/* @__PURE__ */ v("div", {
+				ref: j,
+				className: e("w-full min-w-0 max-w-full overflow-x-auto", o.scrollContainer, x.tableScrollContainer, {
+					[o.tableScrollFadeBoth]: N && P,
+					[o.tableScrollFadeStart]: N && !P,
+					[o.tableScrollFadeEnd]: !N && P
+				}, i.tableScroll),
+				onScroll: F,
+				role: L ? "region" : void 0,
+				"aria-label": L ? D : void 0,
+				tabIndex: L ? 0 : void 0,
+				children: /* @__PURE__ */ v("table", {
+					ref: M,
+					className: e("w-max min-w-full border-collapse", x.tableFont ?? "dial-small-text"),
+					children: p
+				})
+			}),
+			C?.copyLabel && /* @__PURE__ */ v("span", {
 				"aria-live": "polite",
 				className: "sr-only",
 				role: "status",
-				children: E ? x.copiedLabel : ""
+				children: O ? C.copiedLabel ?? "" : ""
 			})
 		]
 	});
 });
 //#endregion
-export { y as MarkdownTable };
+export { x as MarkdownTable };