@epam/ai-dial-conversation-messages 1.1.0-dev.12 → 1.1.0-dev.18

package/index.js

@@ -1,6 +1,6 @@
 import { AttachmentErrorReason as e, AttachmentType as t, DeploymentIcon as n, Highlight as r, MDMessageViewer as i, MIME_TYPE_EXT_MAP as a, MessageRating as o, MessageRole as s, RequestStatus as c, ResponseFormat as l, buildCssVars as u, mergeClasses as d, useCollapsedText as f } from "@epam/ai-dial-chat-shared";
 import { DIAL_ICON_SIZE as p, DialGhostIconButton as m, DialInput as h, DialLinkButton as g, DialNotification as _, DialPopup as v, DialPrimaryButton as y, DialRadioGroup as b, DialRoundedButton as x, DialSkeleton as S, DialSkeletonVariant as C, DialSlider as w, DialTag as T, DialTooltip as E, ElementSize as D, PopupSize as O, RadioGroupOrientation as k } from "@epam/ai-dial-ui-kit";
-import { IconCheck as A, IconChevronDown as j, IconChevronUp as M, IconClipboard as N, IconCopy as P, IconDownload as F, IconExternalLink as I, IconFile as L, IconFileTypeBmp as R, IconFileTypeCss as z, IconFileTypeCsv as B, IconFileTypeDoc as ee, IconFileTypeDocx as V, IconFileTypeHtml as te, IconFileTypeJpg as ne, IconFileTypeJs as re, IconFileTypeJsx as ie, IconFileTypePdf as ae, IconFileTypePhp as oe, IconFileTypePng as se, IconFileTypePpt as ce, IconFileTypeRs as le, IconFileTypeSql as ue, IconFileTypeSvg as de, IconFileTypeTs as fe, IconFileTypeTsx as pe, IconFileTypeTxt as me, IconFileTypeVue as he, IconFileTypeXls as ge, IconFileTypeXml as _e, IconFileTypeZip as ve, IconMarkdown as ye, IconMusic as be, IconPaperclip as xe, IconPencilMinus as Se, IconPhoto as H, IconRefresh as Ce, IconReload as we, IconTerminal2 as Te, IconThumbDown as Ee, IconThumbUp as De, IconTrashX as Oe, IconVideo as ke, IconX as Ae } from "@tabler/icons-react";
+import { IconCheck as A, IconChevronDown as j, IconChevronUp as M, IconClipboard as N, IconCopy as P, IconDownload as F, IconExternalLink as I, IconFile as L, IconFileTypeBmp as R, IconFileTypeCss as z, IconFileTypeCsv as B, IconFileTypeDoc as V, IconFileTypeDocx as ee, IconFileTypeHtml as te, IconFileTypeJpg as ne, IconFileTypeJs as re, IconFileTypeJsx as ie, IconFileTypePdf as ae, IconFileTypePhp as oe, IconFileTypePng as se, IconFileTypePpt as ce, IconFileTypeRs as le, IconFileTypeSql as ue, IconFileTypeSvg as de, IconFileTypeTs as fe, IconFileTypeTsx as pe, IconFileTypeTxt as me, IconFileTypeVue as he, IconFileTypeXls as ge, IconFileTypeXml as _e, IconFileTypeZip as ve, IconMarkdown as ye, IconMusic as be, IconPaperclip as xe, IconPencilMinus as Se, IconPhoto as H, IconRefresh as Ce, IconReload as we, IconTerminal2 as Te, IconThumbDown as Ee, IconThumbUp as De, IconTrashX as Oe, IconVideo as ke, IconX as Ae } from "@tabler/icons-react";
 import "react-dom";
 import { memo as je, useCallback as U, useEffect as Me, useId as Ne, useMemo as W, useRef as Pe, useState as G } from "react";
 import { Fragment as K, jsx as q, jsxs as J } from "react/jsx-runtime";
@@ -25,8 +25,8 @@ var Fe = "flex size-[84px] items-center justify-center rounded-xl border", Y = /
 	switch (e) {
 		case "application/pdf": return ae;
 		case "application/msword":
-		case "application/vnd.ms-word": return ee;
-		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return V;
+		case "application/vnd.ms-word": return V;
+		case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": return ee;
 		case "application/vnd.ms-powerpoint": return ce;
 		case "application/vnd.openxmlformats-officedocument.presentationml.presentation": return ce;
 		case "application/vnd.ms-excel": return ge;
@@ -147,33 +147,51 @@ var Fe = "flex size-[84px] items-center justify-center rounded-xl border", Y = /
 	}),
 	className: X.hoverIcon,
 	...e
-}), qe = ({ attachment: e, searchQuery: t = "", onClick: n, labels: i, styles: a, cssVars: o }) => {
-	let { clickLabel: s = "Open attachment" } = i ?? {}, { typography: c, className: l } = a ?? {};
+}), qe = ({ attachment: e, searchQuery: t = "", onClick: n, onDownload: i, onRemove: a, labels: o, styles: s, cssVars: c }) => {
+	let { clickLabel: l = "Open attachment", downloadLabel: u = "Download attachment", removeLabel: f = "Remove attachment" } = o ?? {}, { typography: p, className: m } = s ?? {}, h = () => {
+		n?.(e.id);
+	};
 	return /* @__PURE__ */ J("div", {
-		style: o,
-		className: d("group flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 rounded-xl border p-3", l),
-		children: [/* @__PURE__ */ J("div", {
-			className: "flex items-center justify-between gap-2",
-			children: [/* @__PURE__ */ q("span", {
+		style: c,
+		...n == null ? {} : {
+			role: "button",
+			tabIndex: 0,
+			"aria-label": l,
+			onClick: h,
+			onKeyDown: (e) => {
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), h());
+			}
+		},
+		className: d("group relative flex w-full min-w-[280px] max-w-[300px] flex-col gap-2 rounded-xl border p-3", n && "cursor-pointer", (i || a) && "pe-8", m),
+		children: [
+			/* @__PURE__ */ q("span", {
 				title: e.name,
-				className: d(c?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", X.nameText),
+				className: d(p?.fontClassName ?? "dial-tiny-text", "min-w-0 truncate", X.nameText),
 				children: t ? /* @__PURE__ */ q(r, {
 					text: e.name,
 					query: t,
 					maxLines: 1
 				}) : e.name
-			}), n && /* @__PURE__ */ q(We, {
-				ariaLabel: s,
-				onClick: n,
+			}),
+			e.playUrl && /* @__PURE__ */ q("audio", {
+				controls: !0,
+				src: e.playUrl,
+				"aria-label": e.name,
+				className: "w-full",
+				preload: "metadata",
+				onClick: (e) => e.stopPropagation()
+			}),
+			i && /* @__PURE__ */ q(We, {
+				ariaLabel: u,
+				onClick: i,
 				id: e.id
-			})]
-		}), e.playUrl && /* @__PURE__ */ q("audio", {
-			controls: !0,
-			src: e.playUrl,
-			"aria-label": e.name,
-			className: "w-full",
-			preload: "metadata"
-		})]
+			}),
+			a && /* @__PURE__ */ q(Ke, {
+				ariaLabel: f,
+				onClick: a,
+				id: e.id
+			})
+		]
 	});
 }, Je = {
 	[e.Network]: "Upload failed · network error",
@@ -183,11 +201,11 @@ var Fe = "flex size-[84px] items-center justify-center rounded-xl border", Y = /
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), n?.(t.id));
 	}, R = W(() => s ? T : Ie(T), [s, T]), z = U(() => {
 		window.open(t.referenceUrl, "_blank", "noopener,noreferrer");
-	}, [t]), B = d(Fe, "group relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", X.tile, !k && X.tileLight, k && X.tileError), ee = /* @__PURE__ */ q("div", {
+	}, [t]), B = d(Fe, "group relative flex-col justify-between items-start gap-1 overflow-hidden p-1.5", X.tile, !k && X.tileLight, k && X.tileError), V = /* @__PURE__ */ q("div", {
 		title: R,
 		className: d(x, "line-clamp-2 min-w-0 break-all", X.nameText, !k && I),
 		children: R
-	}), V = M && /* @__PURE__ */ J("div", {
+	}), ee = M && /* @__PURE__ */ J("div", {
 		className: d("flex w-full items-center gap-1", k && I),
 		children: [/* @__PURE__ */ q(M, {
 			size: 16,
@@ -200,7 +218,7 @@ var Fe = "flex size-[84px] items-center justify-center rounded-xl border", Y = /
 	}), te = () => {
 		p && f ? f(w) : n && n(w);
 	}, ne = /* @__PURE__ */ J(K, { children: [
-		k ? /* @__PURE__ */ J(K, { children: [V, ee] }) : /* @__PURE__ */ J(K, { children: [ee, V] }),
+		k ? /* @__PURE__ */ J(K, { children: [ee, V] }) : /* @__PURE__ */ J(K, { children: [V, ee] }),
 		O && /* @__PURE__ */ q("div", {
 			role: "progressbar",
 			"aria-label": v,
@@ -344,6 +362,8 @@ var Fe = "flex size-[84px] items-center justify-center rounded-xl border", Y = /
 		attachment: e,
 		labels: c,
 		onClick: o,
+		onDownload: s,
+		onRemove: r,
 		searchQuery: n,
 		styles: l,
 		cssVars: m
@@ -820,7 +840,7 @@ var lt = 2e3, ut = ({ role: e = s.User, onEdit: t, onEditHover: n, onDelete: r,
 		"--cm-bubble-text": _?.text,
 		"--cm-bubble-collapsed-height": P ? `${F}px` : void 0,
 		"--cm-bubble-expanded-height": P ? `${I}px` : void 0
-	}), B = t === pt.Top ? "rounded-ee-[6px] rounded-se-[16px]" : "rounded-se-[6px] rounded-ee-[16px]", ee = d($.text, v?.fontClassName), V = C ?? x, te = w ?? S, ne = L ? x : S, re = L ? V : te, ie = L ? j : M, ae = Ne();
+	}), B = t === pt.Top ? "rounded-ee-[6px] rounded-se-[16px]" : "rounded-se-[6px] rounded-ee-[16px]", V = d($.text, v?.fontClassName), ee = C ?? x, te = w ?? S, ne = L ? x : S, re = L ? ee : te, ie = L ? j : M, ae = Ne();
 	return /* @__PURE__ */ q("div", {
 		role: "group",
 		"aria-label": k,
@@ -850,7 +870,7 @@ var lt = 2e3, ut = ({ role: e = s.User, onEdit: t, onEditHover: n, onDelete: r,
 							className: d("relative overflow-hidden", P && $.collapsibleText, P && !L && $.expandedText, N && $.collapsedText),
 							children: /* @__PURE__ */ q("p", {
 								ref: A,
-								className: d(ee, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
+								className: d(V, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
 								children: e
 							})
 						}), P && /* @__PURE__ */ q(g, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-conversation-messages",
   "description": "Message bubble components for rendering conversation history with actions and source citations",
-  "version": "1.1.0-dev.12",
+  "version": "1.1.0-dev.18",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -20,8 +20,8 @@
     "react": "^19.0.0",
     "@tabler/icons-react": "^3.0.0",
     "@epam/ai-dial-ui-kit": "0.12.0-dev.36",
-    "@epam/ai-dial-chat-shared": "1.1.0-dev.12",
-    "@epam/ai-dial-conversation-input": "1.1.0-dev.12",
+    "@epam/ai-dial-chat-shared": "1.1.0-dev.18",
+    "@epam/ai-dial-conversation-input": "1.1.0-dev.18",
     "react-markdown": "^10.1.0"
   },
   "repository": {