@epam/ai-dial-chat-shared 1.2.0-dev.28 → 1.2.0-dev.284

package/components/ConfirmationDialog/ConfirmationDialog.js

@@ -0,0 +1,34 @@
+import { ConfirmationView as e } from "../ConfirmationView/ConfirmationView.js";
+import { ConfirmationFooter as t } from "../ConfirmationView/ConfirmationFooter.js";
+import { ConfirmationPopupVariant as n, Popup as r, PopupSize as i } from "@epam/ai-dial-ui-kit";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/ConfirmationDialog/ConfirmationDialog.tsx
+var o = ({ open: o, title: s, confirmLabel: c, cancelLabel: l, isLoading: u = !1, isConfirmDisabled: d = !1, loadingStatusLabel: f, size: p = i.Sm, popupClassName: m, titleClassName: h, variant: g = n.Info, onConfirm: _, onClose: v, ...y }) => {
+	let b = () => {
+		u || v();
+	};
+	return /* @__PURE__ */ a(r, {
+		open: o,
+		header: s,
+		size: p,
+		className: m,
+		titleClassName: h,
+		onClose: b,
+		footer: /* @__PURE__ */ a(t, {
+			variant: g,
+			confirmLabel: c,
+			cancelLabel: l,
+			isLoading: u,
+			isConfirmDisabled: d,
+			loadingStatusLabel: f,
+			onConfirm: _,
+			onCancel: b
+		}),
+		children: /* @__PURE__ */ a(e, {
+			variant: g,
+			...y
+		})
+	});
+};
+//#endregion
+export { o as ConfirmationDialog };

package/components/ConfirmationIdentityCard/ConfirmationIdentityCard.js

@@ -0,0 +1,21 @@
+import { ResourceSummary as e } from "../ResourceSummary/ResourceSummary.js";
+import t from "./ConfirmationIdentityCard.module.scss.js";
+import { ConfirmationPopupVariant as n } from "@epam/ai-dial-ui-kit";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/ConfirmationIdentityCard/ConfirmationIdentityCard.tsx
+var i = ({ item: i, children: a, variant: o = n.Info, iconSize: s = 40, styles: c }) => {
+	let l = o === n.Danger, u = c?.colors, d = l ? {
+		background: u?.dangerBackground,
+		border: u?.dangerBorder
+	} : { background: u?.background };
+	return /* @__PURE__ */ r(e, {
+		item: i,
+		iconSize: s,
+		hasVersionTag: !1,
+		className: l ? t.danger : t.info,
+		styles: { colors: d },
+		children: a
+	});
+};
+//#endregion
+export { i as ConfirmationIdentityCard };

package/components/ConfirmationIdentityCard/ConfirmationIdentityCard.module.scss.js

@@ -0,0 +1,6 @@
+var e = {
+	info: "_info_vyo7p_1",
+	danger: "_danger_vyo7p_5"
+};
+//#endregion
+export { e as default };

package/components/ConfirmationIdentityRow/ConfirmationIdentityRow.js

@@ -0,0 +1,24 @@
+import { mergeClasses as e } from "../../utils/merge-class.js";
+import { buildCssVars as t } from "../../utils/build-css-vars.js";
+import n from "./ConfirmationIdentityRow.module.scss.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/ConfirmationIdentityRow/ConfirmationIdentityRow.tsx
+var a = ({ icon: a, typeLabel: o, name: s, styles: c }) => {
+	let { colors: l, typeLabelClassName: u = "dial-caption-lead-semi-text", nameClassName: d = "dial-small-semi-text" } = c ?? {};
+	return /* @__PURE__ */ i("div", {
+		style: t({ "--cir-type-label-text": l?.typeLabelText }),
+		className: "flex min-w-0 items-center gap-2",
+		children: [a, /* @__PURE__ */ i("div", {
+			className: "flex min-w-0 flex-col",
+			children: [o != null && /* @__PURE__ */ r("span", {
+				className: e(u, n.typeLabel),
+				children: o
+			}), /* @__PURE__ */ r("span", {
+				className: e(d, "truncate"),
+				children: s
+			})]
+		})]
+	});
+};
+//#endregion
+export { a as ConfirmationIdentityRow };

package/components/ConfirmationIdentityRow/ConfirmationIdentityRow.module.scss.js

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

package/components/ConfirmationView/ConfirmationFooter.js

@@ -0,0 +1,42 @@
+import { mergeClasses as e } from "../../utils/merge-class.js";
+import { buildCssVars as t } from "../../utils/build-css-vars.js";
+import n from "./ConfirmationView.module.scss.js";
+import { ConfirmationPopupVariant as r, DIAL_ICON_SIZE as i, DIAL_KIT_ICON_STROKE as a, DangerButton as o, GhostButton as s, NeutralButton as c, Spinner as l } from "@epam/ai-dial-ui-kit";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { IconTrashX as f } from "@tabler/icons-react";
+//#region src/components/ConfirmationView/ConfirmationFooter.tsx
+var p = ({ confirmLabel: p, cancelLabel: m, variant: h = r.Info, isLoading: g = !1, isConfirmDisabled: _ = !1, loadingStatusLabel: v, styles: y, onConfirm: b, onCancel: x }) => {
+	let S = h === r.Danger, C = t({ "--cfm-footer-border": y?.colors?.border }), w = (() => {
+		if (g) return /* @__PURE__ */ u(l, { size: i.SM });
+		if (S) return /* @__PURE__ */ u(f, {
+			size: i.MD,
+			"aria-hidden": !0,
+			stroke: a
+		});
+	})(), T = S ? o : c;
+	return /* @__PURE__ */ d("div", {
+		style: C,
+		className: e("flex items-center justify-end gap-2 px-6 py-4 rtl:flex-row-reverse rtl:justify-start", n.footer),
+		children: [
+			/* @__PURE__ */ u(s, {
+				label: m,
+				disabled: g,
+				onClick: x
+			}),
+			/* @__PURE__ */ u(T, {
+				label: p,
+				disabled: g || _,
+				iconBefore: w,
+				onClick: b
+			}),
+			g && v != null && /* @__PURE__ */ u("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: v
+			})
+		]
+	});
+};
+//#endregion
+export { p as ConfirmationFooter };

package/components/ConfirmationView/ConfirmationView.js

@@ -0,0 +1,39 @@
+import { mergeClasses as e } from "../../utils/merge-class.js";
+import { buildCssVars as t } from "../../utils/build-css-vars.js";
+import { ConfirmationIdentityCard as n } from "../ConfirmationIdentityCard/ConfirmationIdentityCard.js";
+import r from "./ConfirmationView.module.scss.js";
+import { ConfirmationPopupVariant as i } from "@epam/ai-dial-ui-kit";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/ConfirmationView/ConfirmationView.tsx
+var s = ({ item: s, identity: c, message: l, consequences: u, variant: d = i.Info, messageClassName: f = "dial-small-text", styles: p, children: m }) => {
+	let h = p?.colors;
+	return /* @__PURE__ */ o("div", {
+		style: t({
+			"--cfm-message-text": h?.messageText,
+			"--cfm-consequence-text": h?.consequenceText
+		}),
+		className: "flex flex-col gap-4 px-6 py-4",
+		children: [
+			c ?? (s != null && /* @__PURE__ */ a(n, {
+				item: s,
+				variant: d,
+				styles: { colors: {
+					background: h?.cardBackground,
+					dangerBackground: h?.cardDangerBackground,
+					dangerBorder: h?.cardDangerBorder
+				} }
+			})),
+			/* @__PURE__ */ a("p", {
+				className: e(f, "break-words", r.message),
+				children: l
+			}),
+			u != null && u.length > 0 && /* @__PURE__ */ a("ul", {
+				className: e("flex list-disc flex-col gap-2 ps-5", f, r.consequences),
+				children: u.map((e) => /* @__PURE__ */ a("li", { children: e }, e))
+			}),
+			m
+		]
+	});
+};
+//#endregion
+export { s as ConfirmationView };

package/components/ConfirmationView/ConfirmationView.module.scss.js

@@ -0,0 +1,7 @@
+var e = {
+	message: "_message_1iqfi_1",
+	consequences: "_consequences_1iqfi_5",
+	footer: "_footer_1iqfi_9"
+};
+//#endregion
+export { e as default };

package/components/FeaturedChip/FeaturedChip.js

@@ -1,18 +1,13 @@
-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 { getEntityTypeBadgeColor as e } from "../../utils/entity-type.js";
+import { Badge as t, BadgeVariant as n } from "@epam/ai-dial-ui-kit";
 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
-	});
-};
+var i = ({ label: i, className: a, type: o, style: s }) => /* @__PURE__ */ r(t, {
+	label: i,
+	variant: n.Filled,
+	color: e(o),
+	textClassName: a,
+	style: s
+});
 //#endregion
 export { i as FeaturedChip };

package/components/InitialsAvatar/InitialsAvatar.js

@@ -1,29 +1,12 @@
-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";
+import { Avatar as e, AvatarShape as t } from "@epam/ai-dial-ui-kit";
+import { jsx as n } 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
-		})
-	});
-};
+var r = ({ name: r, size: i, className: a, textClassName: o }) => /* @__PURE__ */ n(e, {
+	name: r,
+	size: i,
+	shape: t.Square,
+	className: a,
+	textClassName: o
+});
 //#endregion
-export { o as InitialsAvatar };
+export { r as InitialsAvatar };

package/components/MarkdownRenderer/CodeBlock/CodeBlock.js

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