@epam/ai-dial-chat-shared 1.1.0-dev.99 → 1.2.0-dev.1

package/components/CopyButton/CopyButton.js

@@ -0,0 +1,33 @@
+import { DIAL_ICON_SIZE as e, DIAL_KIT_ICON_STROKE as t, ElementSize as n, NeutralButton as r, ToggleIconButton as i } from "@epam/ai-dial-ui-kit";
+import { jsx as a } from "react/jsx-runtime";
+import { IconCheck as o, IconCopy as s } from "@tabler/icons-react";
+//#region src/components/CopyButton/CopyButton.tsx
+var c = ({ onClick: r, isCopied: c, copyLabel: l, copiedLabel: u, size: d = n.Standard, ariaLabel: f, iconSize: p = e.LG, iconCopy: m, isDisabled: h = !1 }) => /* @__PURE__ */ a(i, {
+	size: d,
+	icon: c ? /* @__PURE__ */ a(o, {
+		size: p,
+		stroke: t,
+		"aria-hidden": !0
+	}) : m ?? /* @__PURE__ */ a(s, {
+		size: p,
+		stroke: t,
+		"aria-hidden": !0
+	}),
+	"aria-label": c ? u : f ?? l,
+	tooltipProps: { tooltip: c ? u : l },
+	onClick: r,
+	disabled: h
+}), l = ({ onClick: i, isCopied: c, copyLabel: l, copiedLabel: u, size: d = n.Standard, isDisabled: f = !1 }) => /* @__PURE__ */ a(r, {
+	size: d,
+	label: c ? u : l,
+	iconBefore: a(c ? o : s, {
+		size: e.SM,
+		"aria-hidden": !0,
+		stroke: t
+	}),
+	onClick: i,
+	disabled: f,
+	className: "shrink-0"
+});
+//#endregion
+export { l as CopyButton, c as CopyIconButton };

package/components/DeploymentIcon/DeploymentIcon.js

@@ -0,0 +1,62 @@
+import { mergeClasses as e } from "../../utils/merge-class.js";
+import { buildCssVars as t } from "../../utils/build-css-vars.js";
+import { InitialsAvatar as n } from "../InitialsAvatar/InitialsAvatar.js";
+import r from "./DeploymentIcon.module.scss.js";
+import { Tooltip as i } from "@epam/ai-dial-ui-kit";
+import { useEffect as a, useRef as o, useState as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/DeploymentIcon/DeploymentIcon.tsx
+var l = ({ src: l, size: u, initialsName: d, fallback: f, labels: p, styles: m }) => {
+	let { tooltip: h } = p ?? {}, { badgeClassName: g, colors: _ } = m ?? {}, v = t({ "--di-icon-bg": _?.background }), [y, b] = s(l), [x, S] = s(), C = o(null);
+	a(() => {
+		if (l === y) return;
+		if (l == null) {
+			b(void 0);
+			return;
+		}
+		let e = !1, t = new Image();
+		return t.onload = () => {
+			e || b(l);
+		}, t.onerror = () => {
+			e || (S(l), b(l));
+		}, t.src = l, () => {
+			e = !0;
+		};
+	}, [l, y]), a(() => {
+		let e = C.current;
+		if (!e) return;
+		let t = () => S(y);
+		return e.addEventListener("error", t), () => e.removeEventListener("error", t);
+	}, [y]);
+	let w = y != null && x === y, T = /* @__PURE__ */ c(n, {
+		name: d,
+		size: u,
+		className: "shrink-0"
+	}), E = /* @__PURE__ */ c("div", {
+		style: {
+			width: u,
+			height: u,
+			...v
+		},
+		className: e(r.agentIconBadge, "shrink-0 overflow-hidden rounded-md", g),
+		children: !y || w ? /* @__PURE__ */ c("div", {
+			className: "flex size-full items-center justify-center",
+			children: f ?? T
+		}) : /* @__PURE__ */ c("div", {
+			className: "size-full",
+			children: /* @__PURE__ */ c("img", {
+				ref: C,
+				src: y,
+				alt: "",
+				className: "size-full object-contain"
+			})
+		})
+	});
+	return h ? /* @__PURE__ */ c(i, {
+		tooltip: h,
+		triggerClassName: "flex shrink-0",
+		children: E
+	}) : E;
+};
+//#endregion
+export { l as DeploymentIcon };

package/components/DeploymentIcon/DeploymentIcon.module.scss.js

@@ -0,0 +1,3 @@
+var e = { agentIconBadge: "_agentIconBadge_1ger8_1" };
+//#endregion
+export { e as default };

package/components/EntityHeader/EntityHeader.js

@@ -0,0 +1,48 @@
+import { mergeClasses as e } from "../../utils/merge-class.js";
+import { DeploymentIcon as t } from "../DeploymentIcon/DeploymentIcon.js";
+import { ItemHeader as n } from "../ItemHeader/ItemHeader.js";
+import { EntityTypeLabel as r } from "../EntityTypeLabel/EntityTypeLabel.js";
+import { FeaturedChip as i } from "../FeaturedChip/FeaturedChip.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/EntityHeader/EntityHeader.tsx
+var s = ({ item: s, nameClassName: c, versionClassName: l, showVersion: u = !0, typeClassName: d = "dial-caption-lead-semi-text", iconBadgeClassName: f = "rounded-[14px]", featuredChipClassName: p, featuredChipStyle: m, featuredLabel: h = "Featured", hasFeaturedTag: g = !0, iconSize: _ = 48, query: v, footer: y, statusBadge: b }) => /* @__PURE__ */ o("div", {
+	className: "flex items-start gap-2",
+	children: [/* @__PURE__ */ a(t, {
+		src: s.iconUrl,
+		size: _,
+		initialsName: s.name,
+		styles: { badgeClassName: f }
+	}), /* @__PURE__ */ o("div", {
+		className: e("flex min-w-0 flex-1 flex-col gap-1", y != null && "self-stretch"),
+		children: [
+			/* @__PURE__ */ o("div", {
+				className: "relative flex flex-row items-center justify-between",
+				children: [/* @__PURE__ */ a(r, {
+					type: s.type,
+					className: d
+				}), (b != null || g && s.isFeatured) && /* @__PURE__ */ o("div", {
+					className: "absolute end-0 top-[-6px] flex items-center gap-2",
+					children: [b, g && s.isFeatured && /* @__PURE__ */ a(i, {
+						type: s.type,
+						label: h,
+						className: p,
+						style: m
+					})]
+				})]
+			}),
+			/* @__PURE__ */ a(n, {
+				title: s.name,
+				postfix: u ? s.version : void 0,
+				postfixClassName: l,
+				titleClassName: c,
+				query: v
+			}),
+			y != null && /* @__PURE__ */ a("div", {
+				className: "mt-auto pt-1",
+				children: y
+			})
+		]
+	})]
+});
+//#endregion
+export { s as EntityHeader };

package/components/EntityTypeLabel/EntityTypeLabel.js

@@ -0,0 +1,10 @@
+import { ENTITY_TYPE_COLOR as e } from "../../constants/entity-colors.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/EntityTypeLabel/EntityTypeLabel.tsx
+var n = ({ type: n, className: r = "dial-caption-lead-semi-text" }) => /* @__PURE__ */ t("span", {
+	className: r,
+	style: { color: e[n] },
+	children: n
+});
+//#endregion
+export { n as EntityTypeLabel };

package/components/FeaturedChip/FeaturedChip.js

@@ -0,0 +1,18 @@
+import { mergeClasses as e } from "../../utils/merge-class.js";
+import { ENTITY_TYPE_BG_COLOR as t, ENTITY_TYPE_COLOR as n } from "../../constants/entity-colors.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/FeaturedChip/FeaturedChip.tsx
+var i = ({ label: i, className: a, type: o, style: s }) => {
+	let c = t[o], l = n[o];
+	return /* @__PURE__ */ r("div", {
+		className: e("h-[24px] gap-1 rounded-2xl border-none px-2", "flex items-center justify-center", a ?? "dial-caption-lead-semi-text"),
+		style: {
+			backgroundColor: c,
+			color: l,
+			...s
+		},
+		children: i
+	});
+};
+//#endregion
+export { i as FeaturedChip };

package/components/InitialsAvatar/InitialsAvatar.js

@@ -0,0 +1,29 @@
+import { mergeClasses as e } from "../../utils/merge-class.js";
+import { buildCssVars as t } from "../../utils/build-css-vars.js";
+import { pickAvatarColor as n } from "../../utils/avatar-color.js";
+import { extractInitials as r } from "../../utils/initials.js";
+import i from "./InitialsAvatar.module.scss.js";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/InitialsAvatar/InitialsAvatar.tsx
+var o = ({ name: o, size: s, className: c, textClassName: l = "dial-h3-text" }) => {
+	let { background: u, foreground: d } = n(o), f = r(o), p = Math.round(s * .4), m = t({
+		"--ia-bg": u,
+		"--ia-fg": d
+	});
+	return /* @__PURE__ */ a("div", {
+		"aria-hidden": "true",
+		className: e("flex select-none items-center justify-center rounded-md", i.badge, c),
+		style: {
+			...m,
+			width: s,
+			height: s
+		},
+		children: /* @__PURE__ */ a("h3", {
+			className: e(i.initials, l),
+			style: { fontSize: p },
+			children: f
+		})
+	});
+};
+//#endregion
+export { o as InitialsAvatar };

package/components/InitialsAvatar/InitialsAvatar.module.scss.js

@@ -0,0 +1,6 @@
+var e = {
+	badge: "_badge_1ko75_1",
+	initials: "_initials_1ko75_5"
+};
+//#endregion
+export { e as default };

package/components/ItemHeader/ItemHeader.js

@@ -0,0 +1,35 @@
+import { mergeClasses as e } from "../../utils/merge-class.js";
+import { buildCssVars as t } from "../../utils/build-css-vars.js";
+import n from "./ItemHeader.module.scss.js";
+import { EllipsisTooltip as r, Highlight as i } from "@epam/ai-dial-ui-kit";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/ItemHeader/ItemHeader.tsx
+var s = ({ title: s, postfix: c, titleClassName: l = "dial-h3-text", postfixClassName: u = "dial-tiny-text", className: d, query: f, trailing: p, colors: m, shouldTruncateTitle: h = !0 }) => {
+	let g = t({
+		"--ih-title-color": m?.title,
+		"--ih-count-color": m?.count
+	});
+	return /* @__PURE__ */ o("div", {
+		className: e("flex items-center gap-2", d),
+		style: g,
+		children: [
+			/* @__PURE__ */ a("h3", {
+				className: e(h ? "min-w-0 shrink" : "shrink-0 whitespace-nowrap", l, n.title),
+				children: f ? /* @__PURE__ */ a(i, {
+					text: s,
+					query: f
+				}) : h ? /* @__PURE__ */ a(r, { text: s }) : s
+			}),
+			c != null && /* @__PURE__ */ a(r, {
+				className: e("max-w-[30%] shrink-0", u, n.count),
+				text: c
+			}),
+			p != null && /* @__PURE__ */ a("div", {
+				className: "ms-auto",
+				children: p
+			})
+		]
+	});
+};
+//#endregion
+export { s as ItemHeader };

package/components/ItemHeader/ItemHeader.module.scss.js

@@ -0,0 +1,6 @@
+var e = {
+	title: "_title_11w3i_1",
+	count: "_count_11w3i_5"
+};
+//#endregion
+export { e as default };

package/components/MarkdownRenderer/CodeBlock/CodeBlock.js

@@ -0,0 +1,104 @@
+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";
+//#region src/components/MarkdownRenderer/CodeBlock/CodeBlock.tsx
+var b = {
+	dark: s,
+	light: s
+}, x = p(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", {
+		className: "p-4",
+		children: /* @__PURE__ */ h("code", {
+			className: t("whitespace-pre", A),
+			children: m
+		})
+	});
+	return /* @__PURE__ */ g("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
+		}),
+		className: t("my-4 max-w-full overflow-hidden rounded-xl border", o.container, L && o.containerLight, O),
+		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", {
+					className: "flex items-center gap-1",
+					children: [!D && /* @__PURE__ */ h(d, {
+						icon: /* @__PURE__ */ h(y, {
+							size: c.SM,
+							stroke: l
+						}),
+						"aria-label": E,
+						size: u.Small,
+						onClick: R
+					}), /* @__PURE__ */ h(d, {
+						icon: F ? /* @__PURE__ */ h(_, {
+							size: c.SM,
+							className: o.copiedIcon,
+							"aria-hidden": !0,
+							stroke: l
+						}) : /* @__PURE__ */ h(v, {
+							size: c.SM,
+							"aria-hidden": !0,
+							stroke: l
+						}),
+						"aria-label": w,
+						size: u.Small,
+						onClick: I
+					})]
+				})]
+			}),
+			/* @__PURE__ */ h("div", {
+				className: t(o.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,
+						customStyle: {
+							margin: 0,
+							borderRadius: 0,
+							background: "transparent",
+							fontSize: 14,
+							lineHeight: 1.5,
+							padding: "14px 16px",
+							letterSpacing: 0
+						},
+						codeTagProps: { className: A },
+						children: m
+					})
+				}) : z
+			}),
+			/* @__PURE__ */ h("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: F ? T : ""
+			})
+		]
+	});
+});
+//#endregion
+export { S as MarkdownCodeBlock };

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

@@ -0,0 +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"
+};
+//#endregion
+export { e as default };

package/components/MarkdownRenderer/CodeBlock/syntax-theme.js

@@ -0,0 +1,69 @@
+//#region src/components/MarkdownRenderer/CodeBlock/syntax-theme.ts
+var e = { color: "var(--text-secondary, #57647A)" }, t = { color: "var(--text-accent, #1d4ed8)" }, n = { color: "var(--text-accent-tertiary, #7e39ec)" }, r = { color: "var(--text-primary, #161b2d)" }, i = {
+	"code[class*=\"language-\"]": {
+		color: "var(--text-primary, #161b2d)",
+		background: "none",
+		textShadow: "none"
+	},
+	"pre[class*=\"language-\"]": {
+		color: "var(--text-primary, #161b2d)",
+		background: "none",
+		textShadow: "none"
+	},
+	comment: {
+		...e,
+		fontStyle: "italic"
+	},
+	prolog: e,
+	cdata: e,
+	doctype: e,
+	punctuation: e,
+	entity: e,
+	operator: e,
+	"attr-name": e,
+	variable: e,
+	boolean: e,
+	number: e,
+	constant: e,
+	symbol: e,
+	deleted: e,
+	tag: e,
+	selector: e,
+	property: e,
+	namespace: e,
+	builtin: e,
+	keyword: t,
+	atrule: t,
+	important: {
+		...t,
+		fontWeight: "bold"
+	},
+	url: t,
+	string: n,
+	char: n,
+	regex: n,
+	"attr-value": n,
+	inserted: n,
+	"class-name": r,
+	function: r,
+	bold: {
+		...r,
+		fontWeight: "bold"
+	},
+	italic: {
+		...r,
+		fontStyle: "italic"
+	},
+	"code.keyword": {
+		...n,
+		borderRadius: "5px",
+		padding: "1px 5px"
+	},
+	"keyword.code": {
+		...n,
+		borderRadius: "5px",
+		padding: "1px 5px"
+	}
+};
+//#endregion
+export { i as restrainedSyntaxTheme };

package/components/MarkdownRenderer/MDMessageViewer.js

@@ -0,0 +1,22 @@
+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";
+//#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
+}));
+//#endregion
+export { i as MDMessageViewer };