@epam/ai-dial-conversation-messages 1.3.0-dev.29 → 1.3.0-dev.290

package/index.js

@@ -1,17 +1,17 @@
-import { AttachmentType as e, CopyIconButton as t, DeploymentIcon as n, MDMessageViewer as r, MessageRating as i, MessageRole as a, ResponseFormat as o, buildCssVars as s, mergeClasses as c, useCollapsedText as l } from "@epam/ai-dial-chat-shared";
-import { AttachmentGroup as u } from "@epam/ai-dial-attachment-input";
-import { Button as d, ButtonVariant as f, DIAL_ICON_SIZE as p, DIAL_KIT_ICON_STROKE as m, ElementSize as h, GhostIconButton as g, InfoMessageNotification as _, LinkButton as v, NeutralButton as y } from "@epam/ai-dial-ui-kit";
-import { useCallback as b, useEffect as x, useId as S, useLayoutEffect as C, useMemo as ee, useRef as w, useState as T } from "react";
-import { IconArrowBackUp as E, IconChevronDown as D, IconChevronUp as O, IconMarkdown as k, IconPencilMinus as A, IconRefresh as j, IconThumbDown as M, IconThumbDownFilled as N, IconThumbUp as P, IconThumbUpFilled as te, IconTrashX as ne } from "@tabler/icons-react";
-import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";
-import { createPortal as R } from "react-dom";
+import { AttachmentType as e, CopyIconButton as t, DeploymentIcon as n, MDMessageViewer as r, MessageRating as i, MessageRole as a, ResponseFormat as o, buildCssVars as s, buildInlineSegmentSource as c, createInlineSegmentComponents as l, createRehypeInlineSegments as u, mergeClasses as d, useCollapsedText as f } from "@epam/ai-dial-chat-shared";
+import { AttachmentGroup as p } from "@epam/ai-dial-attachment-input";
+import { Button as m, ButtonVariant as h, DIAL_ICON_SIZE as g, DIAL_KIT_ICON_STROKE as _, ElementSize as v, GhostIconButton as y, InfoMessageNotification as b, LinkButton as x, LiveRegion as S, LiveRegionElement as C, NeutralButton as w, Tooltip as T } from "@epam/ai-dial-ui-kit";
+import { useCallback as E, useEffect as D, useId as ee, useLayoutEffect as O, useMemo as k, useRef as te, useState as A } from "react";
+import { IconArrowBackUp as j, IconChevronDown as M, IconChevronUp as N, IconMarkdown as ne, IconPencilMinus as P, IconRefresh as F, IconThumbDown as re, IconThumbDownFilled as ie, IconThumbUp as ae, IconThumbUpFilled as oe, IconTrashX as I } from "@tabler/icons-react";
+import { Fragment as L, jsx as R, jsxs as z } from "react/jsx-runtime";
+import { createPortal as B } from "react-dom";
 //#region src/constants/public-class-names.ts
-var z = {
+var V = {
 	userBubble: "dial-cm-user-bubble",
 	assistantContent: "dial-cm-assistant-content"
-}, B = 4, V = (e) => {
-	let t = w(null), [n, r] = T(0);
-	return x(() => {
+}, H = 4, U = (e) => {
+	let t = te(null), [n, r] = A(0);
+	return D(() => {
 		if (!e) return;
 		let n = t.current;
 		if (n == null) return;
@@ -22,416 +22,536 @@ var z = {
 		return i.observe(n), () => i.disconnect();
 	}, [e]), {
 		slotRef: t,
-		firstLineIndent: e ? `calc(${n}px + ${B}px)` : void 0
+		firstLineIndent: e ? `calc(${n}px + ${H}px)` : void 0
 	};
-}, H = [
+}, se = [
 	"href",
 	"src",
 	"alt",
 	"colspan",
 	"rowspan",
 	"start"
-], U = new Set([
+], ce = /* @__PURE__ */ new Set([
 	"pre",
 	"pre-wrap",
 	"pre-line",
 	"break-spaces"
 ]), W = (e) => {
 	let t = document.createElement(e.tagName.toLowerCase());
-	H.forEach((n) => {
+	se.forEach((n) => {
 		let r = e.getAttribute(n);
 		r !== null && t.setAttribute(n, r);
 	});
 	let { whiteSpace: n } = window.getComputedStyle(e);
-	return U.has(n) && (t.style.whiteSpace = "pre-wrap"), t;
-}, re = (e) => e instanceof SVGElement || window.getComputedStyle(e).display === "none", G = (e, t) => {
+	return ce.has(n) && (t.style.whiteSpace = "pre-wrap"), t;
+}, le = (e) => e instanceof SVGElement || window.getComputedStyle(e).display === "none", ue = (e, t) => {
 	if (!t.intersectsNode(e)) return null;
 	if (e.nodeType === Node.TEXT_NODE) {
 		let n = e.data, r = e === t.startContainer ? t.startOffset : 0, i = e === t.endContainer ? t.endOffset : n.length;
 		return document.createTextNode(n.slice(r, i));
 	}
-	if (!(e instanceof Element) || re(e)) return null;
+	if (!(e instanceof Element) || le(e)) return null;
 	let n = W(e);
 	return e.childNodes.forEach((e) => {
-		let r = G(e, t);
+		let r = ue(e, t);
 		r && n.appendChild(r);
 	}), n;
-}, ie = (e, t, n) => {
+}, de = (e, t, n) => {
 	let r = e, i = t;
 	for (; i && i !== n && n.contains(i);) {
 		let e = W(i);
 		e.appendChild(r), r = e, i = i.parentElement;
 	}
 	return r;
-}, ae = (e, t) => {
+}, fe = (e, t) => {
 	let n = e.commonAncestorContainer, r = n instanceof Element ? n : n.parentElement;
 	if (!r) return null;
-	let i = G(r, e);
-	return i ? ie(i, r.parentElement, t) : null;
-}, oe = (e) => {
+	let i = ue(r, e);
+	return i ? de(i, r.parentElement, t) : null;
+}, pe = (e) => {
 	let t = window.getSelection();
 	if (!t || t.isCollapsed || t.rangeCount === 0 || !e.clipboardData) return;
 	let n = t.toString();
 	if (!n) return;
 	let r = document.createElement("div");
 	for (let n = 0; n < t.rangeCount; n++) {
-		let i = ae(t.getRangeAt(n), e.currentTarget);
+		let i = fe(t.getRangeAt(n), e.currentTarget);
 		i && r.appendChild(i);
 	}
 	e.clipboardData.setData("text/html", r.innerHTML), e.clipboardData.setData("text/plain", n), e.preventDefault();
-}, K = { activeRating: "_activeRating_ygoee_1" }, q = 2e3, se = ({ role: e = a.User, onEdit: n, onEditHover: r, onDelete: o, onRegenerate: l, onCopy: u, onCopyMarkdown: d, onLike: f, onDislike: _, activeRating: v, isAlwaysVisible: y, isDisabled: x = !1, className: S, labels: C, colors: ee }) => {
-	let { tooltips: w, ariaLabels: E } = C ?? {}, [D, O] = T(null), [R, z] = T(""), B = n != null || o != null || l != null || u != null || d != null || f != null || _ != null, V = s({ "--ma-active-rating-text": ee?.activeRatingText }), H = b(() => {
-		u?.(), O("copy"), z(e === a.User ? E?.copiedMessageStatus ?? "Message copied to clipboard" : E?.copiedStatus ?? "Copied to clipboard"), setTimeout(() => O(null), q);
+}, G = { activeRating: "_activeRating_ygoee_1" }, K = 2e3, me = ({ role: e = a.User, onEdit: n, onEditHover: r, onDelete: o, onRegenerate: c, onCopy: l, onCopyMarkdown: u, onLike: f, onDislike: p, activeRating: m, isAlwaysVisible: h, leadingContent: b, trailingContent: x, isDisabled: w = !1, className: T, labels: ee, colors: O }) => {
+	let { tooltips: k, ariaLabels: j } = ee ?? {}, [M, N] = A(null), [B, V] = A(""), H = te(void 0);
+	D(() => () => clearTimeout(H.current), []);
+	let U = E(() => {
+		clearTimeout(H.current), H.current = setTimeout(() => N(null), K);
+	}, []), se = n != null || o != null || c != null || l != null || u != null || f != null || p != null || b != null || x != null, ce = s({ "--ma-active-rating-text": O?.activeRatingText }), W = E(() => {
+		l?.(), N("copy"), V(e === a.User ? j?.copiedMessageStatus ?? "Message copied to clipboard" : j?.copiedStatus ?? "Copied to clipboard"), U();
 	}, [
-		u,
+		l,
 		e,
-		E?.copiedStatus,
-		E?.copiedMessageStatus
-	]), U = b(() => {
-		d?.(), O("markdown"), z(E?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), setTimeout(() => O(null), q);
-	}, [d, E?.copiedMarkdownStatus]);
-	return B ? /* @__PURE__ */ L("div", {
+		j?.copiedStatus,
+		j?.copiedMessageStatus,
+		U
+	]), le = E(() => {
+		u?.(), N("markdown"), V(j?.copiedMarkdownStatus ?? "Copied as Markdown to clipboard"), U();
+	}, [
+		u,
+		j?.copiedMarkdownStatus,
+		U
+	]);
+	return se ? /* @__PURE__ */ z("div", {
 		role: "toolbar",
-		"aria-label": E?.actionsGroup ?? "Message actions",
-		style: V,
-		className: c("flex gap-1", !y && "opacity-0 group-hover:opacity-100", S),
-		children: [/* @__PURE__ */ I("span", {
-			role: "status",
-			"aria-live": "polite",
-			className: "sr-only",
-			children: R
-		}), e === a.User ? /* @__PURE__ */ L(F, { children: [
-			u && /* @__PURE__ */ I(t, {
-				iconSize: p.SM,
-				onClick: H,
-				size: h.Small,
-				isCopied: D === "copy",
-				copyLabel: w?.copyMessage ?? "Copy message",
-				copiedLabel: w?.copied ?? "Copied!",
-				ariaLabel: E?.copyMessage ?? "Copy message",
-				isDisabled: x
+		"aria-label": j?.actionsGroup ?? "Message actions",
+		style: ce,
+		className: d("flex items-center gap-1", !h && "opacity-0 group-hover:opacity-100", T),
+		children: [
+			b,
+			/* @__PURE__ */ R(S, {
+				visuallyHidden: !0,
+				as: C.Span,
+				children: B
 			}),
-			n && /* @__PURE__ */ I(g, {
-				icon: /* @__PURE__ */ I(A, {
-					size: p.SM,
-					"aria-hidden": !0,
-					stroke: m
+			e === a.User ? /* @__PURE__ */ z(L, { children: [
+				l && /* @__PURE__ */ R(t, {
+					iconSize: g.SM,
+					onClick: W,
+					size: v.Small,
+					isCopied: M === "copy",
+					copyLabel: k?.copyMessage ?? "Copy message",
+					copiedLabel: k?.copied ?? "Copied!",
+					ariaLabel: j?.copyMessage ?? "Copy message",
+					isDisabled: w
 				}),
-				size: h.Small,
-				"aria-label": E?.editMessage ?? "Edit message",
-				tooltipProps: { tooltip: w?.edit ?? "Edit" },
-				onClick: n,
-				onMouseEnter: r,
-				onFocus: r,
-				disabled: x
-			}),
-			o && /* @__PURE__ */ I(g, {
-				icon: /* @__PURE__ */ I(ne, {
-					size: p.SM,
-					"aria-hidden": !0,
-					stroke: m
+				n && /* @__PURE__ */ R(y, {
+					icon: /* @__PURE__ */ R(P, {
+						size: g.SM,
+						"aria-hidden": !0,
+						stroke: _
+					}),
+					size: v.Small,
+					"aria-label": j?.editMessage ?? "Edit message",
+					tooltipProps: { tooltip: k?.edit ?? "Edit" },
+					onClick: n,
+					onMouseEnter: r,
+					onFocus: r,
+					disabled: w
 				}),
-				size: h.Small,
-				"aria-label": E?.deleteMessage ?? "Delete message",
-				tooltipProps: { tooltip: w?.delete ?? "Delete" },
-				onClick: o,
-				disabled: x
-			})
-		] }) : /* @__PURE__ */ L(F, { children: [
-			l && /* @__PURE__ */ I(g, {
-				icon: /* @__PURE__ */ I(j, {
-					size: p.SM,
-					"aria-hidden": !0,
-					stroke: m
+				o && /* @__PURE__ */ R(y, {
+					icon: /* @__PURE__ */ R(I, {
+						size: g.SM,
+						"aria-hidden": !0,
+						stroke: _
+					}),
+					size: v.Small,
+					"aria-label": j?.deleteMessage ?? "Delete message",
+					tooltipProps: { tooltip: k?.delete ?? "Delete" },
+					onClick: o,
+					disabled: w
+				})
+			] }) : /* @__PURE__ */ z(L, { children: [
+				c && /* @__PURE__ */ R(y, {
+					icon: /* @__PURE__ */ R(F, {
+						size: g.SM,
+						"aria-hidden": !0,
+						stroke: _
+					}),
+					size: v.Small,
+					"aria-label": j?.regenerateResponse ?? "Regenerate response",
+					tooltipProps: { tooltip: k?.regenerate ?? "Regenerate" },
+					onClick: c,
+					disabled: w
 				}),
-				size: h.Small,
-				"aria-label": E?.regenerateResponse ?? "Regenerate response",
-				tooltipProps: { tooltip: w?.regenerate ?? "Regenerate" },
-				onClick: l,
-				disabled: x
-			}),
-			u && /* @__PURE__ */ I(t, {
-				iconSize: p.SM,
-				onClick: H,
-				size: h.Small,
-				isCopied: D === "copy",
-				copyLabel: w?.copy ?? "Copy",
-				copiedLabel: w?.copied ?? "Copied!",
-				ariaLabel: E?.copyResponse ?? "Copy response",
-				isDisabled: x
-			}),
-			d && /* @__PURE__ */ I(t, {
-				iconSize: p.SM,
-				onClick: U,
-				size: h.Small,
-				isCopied: D === "markdown",
-				iconCopy: /* @__PURE__ */ I(k, {
-					size: p.SM,
-					"aria-hidden": !0,
-					stroke: m
+				l && /* @__PURE__ */ R(t, {
+					iconSize: g.SM,
+					onClick: W,
+					size: v.Small,
+					isCopied: M === "copy",
+					copyLabel: k?.copy ?? "Copy",
+					copiedLabel: k?.copied ?? "Copied!",
+					ariaLabel: j?.copyResponse ?? "Copy response",
+					isDisabled: w
 				}),
-				copyLabel: w?.copyMarkdown ?? "Copy as Markdown",
-				copiedLabel: w?.copiedMarkdown ?? "Copied!",
-				ariaLabel: E?.copyAsMarkdown ?? "Copy as markdown",
-				isDisabled: x
-			}),
-			f && /* @__PURE__ */ I(g, {
-				icon: v === i.Like ? /* @__PURE__ */ I(te, {
-					className: K.activeRating,
-					size: p.SM,
-					"aria-hidden": !0
-				}) : /* @__PURE__ */ I(P, {
-					size: p.SM,
-					"aria-hidden": !0,
-					stroke: m
+				u && /* @__PURE__ */ R(t, {
+					iconSize: g.SM,
+					onClick: le,
+					size: v.Small,
+					isCopied: M === "markdown",
+					iconCopy: /* @__PURE__ */ R(ne, {
+						size: g.SM,
+						"aria-hidden": !0,
+						stroke: _
+					}),
+					copyLabel: k?.copyMarkdown ?? "Copy as Markdown",
+					copiedLabel: k?.copiedMarkdown ?? "Copied!",
+					ariaLabel: j?.copyAsMarkdown ?? "Copy as markdown",
+					isDisabled: w
 				}),
-				size: h.Small,
-				"aria-label": E?.likeResponse ?? "Like response",
-				"aria-pressed": v === i.Like,
-				tooltipProps: { tooltip: w?.like ?? "Like" },
-				onClick: f,
-				disabled: x
-			}),
-			_ && /* @__PURE__ */ I(g, {
-				icon: v === i.Dislike ? /* @__PURE__ */ I(N, {
-					className: K.activeRating,
-					size: p.SM,
-					"aria-hidden": !0
-				}) : /* @__PURE__ */ I(M, {
-					size: p.SM,
-					"aria-hidden": !0,
-					stroke: m
+				f && /* @__PURE__ */ R(y, {
+					icon: m === i.Like ? /* @__PURE__ */ R(oe, {
+						className: G.activeRating,
+						size: g.SM,
+						"aria-hidden": !0
+					}) : /* @__PURE__ */ R(ae, {
+						size: g.SM,
+						"aria-hidden": !0,
+						stroke: _
+					}),
+					size: v.Small,
+					"aria-label": j?.likeResponse ?? "Like response",
+					"aria-pressed": m === i.Like,
+					tooltipProps: { tooltip: k?.like ?? "Like" },
+					onClick: f,
+					disabled: w
 				}),
-				size: h.Small,
-				"aria-label": E?.dislikeResponse ?? "Dislike response",
-				"aria-pressed": v === i.Dislike,
-				tooltipProps: { tooltip: w?.dislike ?? "Dislike" },
-				onClick: _,
-				disabled: x
-			})
-		] })]
+				p && /* @__PURE__ */ R(y, {
+					icon: m === i.Dislike ? /* @__PURE__ */ R(ie, {
+						className: G.activeRating,
+						size: g.SM,
+						"aria-hidden": !0
+					}) : /* @__PURE__ */ R(re, {
+						size: g.SM,
+						"aria-hidden": !0,
+						stroke: _
+					}),
+					size: v.Small,
+					"aria-label": j?.dislikeResponse ?? "Dislike response",
+					"aria-pressed": m === i.Dislike,
+					tooltipProps: { tooltip: k?.dislike ?? "Dislike" },
+					onClick: p,
+					disabled: w
+				})
+			] }),
+			x
+		]
 	}) : null;
-}, J = {
-	userBubble: "_userBubble_cq829_1",
-	collapsibleText: "_collapsibleText_cq829_6",
-	expandedText: "_expandedText_cq829_11",
-	collapsedText: "_collapsedText_cq829_15",
-	startersDivider: "_startersDivider_cq829_26",
-	text: "_text_cq829_30"
-}, ce = "[&>.cm-bubble-markdown>div>*:first-child]:indent-[var(--cm-bubble-first-line-indent,0px)]", Y = ({ text: t, contentRef: i, styles: l, actions: d, hasAlwaysVisibleActions: f, isStreaming: p, attachments: m, beforeContent: h, responseFormat: g, afterContent: _, hasThinkingPlaceholder: v = !0, starters: b, onSelectStarter: x, deploymentIconUrl: S, deploymentDisplayName: C, markdownComponents: w, markdownClassNames: T, markdownUrlTransform: E, onAttachmentClick: D, onDownloadAll: O, onAttachmentRetry: k, codeBlockTheme: A, tableOnOpenInCanvas: j, labels: M, selectedAttachmentId: N }) => {
-	let { colors: P, typography: te, className: ne, bubbleClassName: F } = l ?? {}, { attachmentClickLabel: R, attachmentDownloadLabel: B, attachmentRetryLabel: H, attachmentOpenInNewTabLabel: U, startersAriaLabel: W = "Quick reply buttons", thinkingLabel: re, codeBlockCopyLabel: G, codeBlockCopiedLabel: ie, codeBlockDownloadLabel: ae, tableCopyLabel: K, tableCopiedLabel: q, tableDownloadCsvLabel: Y, tableOpenInCanvasLabel: X, tableDownloadFilename: Z, tableScrollRegionAriaLabel: le, mathScrollRegionAriaLabel: Q, assistantMessageAriaLabel: ue = "Assistant message", deploymentIconFallbackLabel: de = "AI" } = M ?? {}, fe = ee(() => ({
-		copyLabel: K,
-		copiedLabel: q,
-		downloadCsvLabel: Y,
-		openInCanvasLabel: X
+}, q = (e) => {
+	let [t, n] = A(() => /* @__PURE__ */ new Date());
+	return D(() => {
+		let t = setInterval(() => n(/* @__PURE__ */ new Date()), e);
+		return () => clearInterval(t);
+	}, [e]), t;
+}, J = /* @__PURE__ */ function(e) {
+	return e.Today = "today", e.Yesterday = "yesterday", e.Absolute = "absolute", e;
+}({}), Y = {
+	hour: "numeric",
+	minute: "2-digit"
+}, he = {
+	year: "numeric",
+	month: "short",
+	day: "numeric",
+	...Y
+}, ge = 60, _e = 3600, X = 24 * _e, ve = [
+	["year", 365 * X],
+	["month", 30 * X],
+	["week", 7 * X],
+	["day", X],
+	["hour", _e],
+	["minute", ge]
+], ye = (e, t) => e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate(), Z = (e) => {
+	if (!e) return null;
+	let t = new Date(e);
+	return Number.isNaN(t.getTime()) ? null : t;
+}, be = (e, t) => new Intl.DateTimeFormat(t, he).format(e), xe = (e, t, n) => {
+	let r = new Date(t.getFullYear(), t.getMonth(), t.getDate() - 1);
+	return ye(e, t) ? {
+		kind: J.Today,
+		text: new Intl.DateTimeFormat(n, Y).format(e)
+	} : ye(e, r) ? {
+		kind: J.Yesterday,
+		text: new Intl.DateTimeFormat(n, Y).format(e)
+	} : {
+		kind: J.Absolute,
+		text: be(e, n)
+	};
+}, Q = (e, t, n) => {
+	let r = new Intl.RelativeTimeFormat(n, { numeric: "auto" }), i = (t.getTime() - e.getTime()) / 1e3;
+	for (let [e, t] of ve) {
+		let n = Math.floor(i / t);
+		if (n >= 1) return r.format(-n, e);
+	}
+	return r.format(0, "second");
+}, Se = { time: "_time_16pwx_2" }, Ce = 6e4, we = "opacity-0 transition-opacity group-hover/message:opacity-100 group-focus-within/message:opacity-100 [@media(hover:none)]:opacity-100", Te = ({ timestamp: e, locale: t, className: n = "dial-small-text" }) => {
+	let r = q(Ce), i = Z(e);
+	return i == null ? null : /* @__PURE__ */ R(T, {
+		tooltip: be(i, t),
+		asChild: !0,
+		children: /* @__PURE__ */ R("time", {
+			dateTime: e,
+			tabIndex: 0,
+			className: d("px-1 whitespace-nowrap", Se.time, n, we),
+			children: Q(i, r, t)
+		})
+	});
+}, $ = {
+	userBubble: "_userBubble_17fln_1",
+	collapsibleText: "_collapsibleText_17fln_6",
+	expandedText: "_expandedText_17fln_11",
+	collapsedText: "_collapsedText_17fln_15",
+	startersDivider: "_startersDivider_17fln_31",
+	text: "_text_17fln_35"
+}, Ee = "[&>.cm-bubble-markdown>div>*:first-child]:indent-[var(--cm-bubble-first-line-indent,0px)]", De = ({ text: t, contentRef: i, styles: c, actions: l, hasAlwaysVisibleActions: u, timestamp: f, locale: m, isStreaming: h, attachments: g, beforeContent: _, responseFormat: v, afterContent: y, hasThinkingPlaceholder: b = !0, starters: x, onSelectStarter: S, deploymentIconUrl: C, deploymentDisplayName: T, markdownComponents: E, markdownClassNames: D, markdownUrlTransform: ee, onAttachmentClick: O, onDownloadAll: te, isAttachmentDownloadable: A, onAttachmentRetry: j, codeBlockTheme: M, tableOnOpenInCanvas: N, labels: ne, selectedAttachmentId: P }) => {
+	let { colors: F, typography: re, className: ie, bubbleClassName: ae, timestampClassName: oe } = c ?? {}, I = f == null ? void 0 : /* @__PURE__ */ R(Te, {
+		timestamp: f,
+		locale: m,
+		className: oe
+	}), { attachmentClickLabel: B, attachmentDownloadLabel: H, attachmentRetryLabel: se, attachmentOpenInNewTabLabel: ce, startersAriaLabel: W = "Quick reply buttons", thinkingLabel: le, codeBlockCopyLabel: ue, codeBlockCopiedLabel: de, codeBlockDownloadLabel: fe, tableCopyLabel: G, tableCopiedLabel: K, tableDownloadCsvLabel: q, tableOpenInCanvasLabel: J, tableDownloadFilename: Y, tableScrollRegionAriaLabel: he, mathScrollRegionAriaLabel: ge, assistantMessageAriaLabel: _e = "Assistant message", deploymentIconFallbackLabel: X = "AI" } = ne ?? {}, ve = k(() => ({
+		copyLabel: G,
+		copiedLabel: K,
+		downloadCsvLabel: q,
+		openInCanvasLabel: J
 	}), [
+		G,
 		K,
 		q,
-		Y,
-		X
-	]), pe = p ? (m ?? []).filter((t) => t.type !== e.Audio) : m ?? [], $ = !!t?.trim(), { slotRef: me, firstLineIndent: he } = V(h != null && $), ge = s({
-		"--cm-bubble-text": P?.text,
-		"--cm-starters-divider": P?.startersDivider,
-		"--cm-bubble-first-line-indent": he
-	}), _e = c(J.text, te?.fontClassName), ve = !!(S || C);
-	return /* @__PURE__ */ L("div", {
+		J
+	]), ye = h ? (g ?? []).filter((t) => t.type !== e.Audio) : g ?? [], Z = !!t?.trim(), { slotRef: be, firstLineIndent: xe } = U(_ != null && Z), Q = s({
+		"--cm-bubble-text": F?.text,
+		"--cm-starters-divider": F?.startersDivider,
+		"--cm-timestamp-text": F?.timestampText,
+		"--cm-bubble-first-line-indent": xe
+	}), Se = d($.text, re?.fontClassName), Ce = !!(C || T);
+	return /* @__PURE__ */ z("div", {
 		role: "group",
-		"aria-label": ue,
-		style: ge,
-		onCopy: oe,
-		className: c("flex w-full items-start gap-3", ne),
-		children: [ve && /* @__PURE__ */ I(n, {
-			src: S,
+		"aria-label": _e,
+		style: Q,
+		onCopy: pe,
+		className: d("group/message flex w-full items-start gap-3", ie),
+		children: [Ce && /* @__PURE__ */ R(n, {
+			src: C,
 			size: 28,
-			initialsName: C || de,
-			labels: { tooltip: C ?? de }
-		}), /* @__PURE__ */ L("div", {
-			className: "flex w-full min-w-0 max-w-full flex-col items-start gap-5",
-			children: [/* @__PURE__ */ L("div", {
-				className: c("flex w-full min-w-0 max-w-full flex-col items-start gap-4", F),
+			initialsName: T || X,
+			labels: { tooltip: T ?? X }
+		}), /* @__PURE__ */ z("div", {
+			className: "flex w-full max-w-full min-w-0 flex-col items-start gap-5",
+			children: [/* @__PURE__ */ z("div", {
+				className: d("flex w-full max-w-full min-w-0 flex-col items-start gap-4", ae),
 				children: [
-					h != null && !$ && /* @__PURE__ */ I("div", {
+					_ != null && !Z && /* @__PURE__ */ R("div", {
 						className: "min-w-0",
-						children: h
+						children: _
 					}),
-					($ || p && v) && /* @__PURE__ */ L("div", {
+					(Z || h && b) && /* @__PURE__ */ z("div", {
 						"aria-live": "polite",
 						"aria-atomic": "false",
-						className: c(_e, "relative min-w-0 max-w-full text-start", h != null && $ && ce, z.assistantContent),
-						children: [h != null && $ && /* @__PURE__ */ I("div", {
-							ref: me,
-							className: "absolute start-0 top-0",
-							children: h
-						}), /* @__PURE__ */ I("div", {
+						className: d(Se, "relative max-w-full min-w-0 text-start", _ != null && Z && Ee, V.assistantContent),
+						children: [_ != null && Z && /* @__PURE__ */ R("div", {
+							ref: be,
+							className: "absolute inset-s-0 top-0",
+							children: _
+						}), /* @__PURE__ */ R("div", {
 							ref: i,
-							className: "cm-bubble-markdown min-w-0 max-w-full",
-							children: /* @__PURE__ */ I(r, {
+							className: "cm-bubble-markdown max-w-full min-w-0 wrap-anywhere",
+							children: /* @__PURE__ */ R(r, {
 								content: t ?? "",
-								isPlainText: g === o.PlainText,
-								isStreaming: p,
-								thinkingLabel: re,
-								components: w,
-								classNames: T,
-								urlTransform: E,
-								codeBlockCopyLabel: G,
-								codeBlockCopiedLabel: ie,
-								codeBlockDownloadLabel: ae,
-								codeBlockTheme: A,
-								tableActionLabels: fe,
-								tableDownloadFilename: Z,
-								tableOnOpenInCanvas: j,
-								tableScrollRegionAriaLabel: le,
-								mathScrollRegionAriaLabel: Q
+								isPlainText: v === o.PlainText,
+								isStreaming: h,
+								thinkingLabel: le,
+								components: E,
+								classNames: D,
+								urlTransform: ee,
+								codeBlockCopyLabel: ue,
+								codeBlockCopiedLabel: de,
+								codeBlockDownloadLabel: fe,
+								codeBlockTheme: M,
+								tableActionLabels: ve,
+								tableDownloadFilename: Y,
+								tableOnOpenInCanvas: N,
+								tableScrollRegionAriaLabel: he,
+								mathScrollRegionAriaLabel: ge
 							})
 						})]
 					}),
-					/* @__PURE__ */ I(u, {
-						attachments: pe,
-						onAttachmentClick: D ? (e) => {
-							let t = m?.find((t) => t.id === e);
-							t && D(t);
+					/* @__PURE__ */ R(p, {
+						attachments: ye,
+						onAttachmentClick: O ? (e) => {
+							let t = g?.find((t) => t.id === e);
+							t && O(t);
 						} : void 0,
-						onDownloadAll: O,
-						onRetry: k,
+						onDownloadAll: te,
+						isAttachmentDownloadable: A,
+						onRetry: j,
 						labels: {
-							clickLabel: R,
-							downloadLabel: B,
-							retryLabel: H,
-							openInNewTabLabel: U
+							clickLabel: B,
+							downloadLabel: H,
+							retryLabel: se,
+							openInNewTabLabel: ce
 						},
-						selectedAttachmentId: N
+						selectedAttachmentId: P
 					}),
-					_,
-					/* @__PURE__ */ I(se, {
-						...d,
-						isAlwaysVisible: f,
+					y,
+					/* @__PURE__ */ R(me, {
+						...l,
+						isAlwaysVisible: u,
+						trailingContent: I == null ? l?.trailingContent : /* @__PURE__ */ z(L, { children: [l?.trailingContent, I] }),
 						role: a.Assistant
 					})
 				]
-			}), b && b.length > 0 && x && /* @__PURE__ */ I("div", {
+			}), x && x.length > 0 && S && /* @__PURE__ */ R("div", {
 				role: "list",
 				"aria-label": W,
-				className: c("flex w-full flex-wrap gap-2 border-t pt-5", J.startersDivider),
-				children: b.map((e, t) => /* @__PURE__ */ I("div", {
+				className: d("flex w-full flex-wrap gap-2 border-t pt-5", $.startersDivider),
+				children: x.map((e, t) => /* @__PURE__ */ R("div", {
 					role: "listitem",
 					className: "min-w-[40px]",
-					children: /* @__PURE__ */ I(y, {
+					children: /* @__PURE__ */ R(w, {
 						label: e.title,
 						className: "min-w-[40px]",
-						onClick: () => x(e)
+						onClick: () => S(e)
 					})
 				}, t))
 			})]
 		})]
 	});
-}, X = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ I("div", {
-	role: "status",
-	"aria-live": "polite",
-	children: /* @__PURE__ */ I(_, {
-		title: e,
-		message: t,
-		textClassName: "flex-row flex-wrap gap-1"
-	})
-}), Z = /* @__PURE__ */ function(e) {
+}, Oe = ({ labels: { titleText: e = "Model switched.", bodyText: t } }) => /* @__PURE__ */ R(b, {
+	title: e,
+	message: t,
+	textClassName: "flex-row flex-wrap gap-1"
+}), ke = /* @__PURE__ */ function(e) {
 	return e.Bottom = "Bottom", e.Top = "Top", e;
-}({}), le = 10, Q = ({ text: e, contentRef: t, position: n = Z.Bottom, styles: r, actions: i, hasAlwaysVisibleActions: o, attachments: d, collapsedLineCount: f = le, labels: m, textSegments: g, onAttachmentClick: _, onDownloadAll: y, onAttachmentRetry: b, selectedAttachmentId: x }) => {
-	let { colors: C, typography: ee, className: w, bubbleClassName: T } = r ?? {}, { showMoreLabel: E = "Show more", showLessLabel: k = "Show less", showMoreAriaLabel: A, showLessAriaLabel: j, attachmentClickLabel: M, attachmentDownloadLabel: N, attachmentRetryLabel: P, attachmentOpenInNewTabLabel: te, userMessageAriaLabel: ne = "User message" } = m ?? {}, { textRef: R, isTextCollapsed: B, isOverflowing: V, collapsedMaxHeight: H, expandedMaxHeight: U, isCollapsed: W, toggleCollapsed: re } = l({
+}({}), Ae = 10, je = "[&>div>*:first-child]:mt-0 [&>div>*:last-child]:mb-0", Me = [], Ne = ({ text: e, contentRef: t, position: n = ke.Bottom, styles: i, actions: o, hasAlwaysVisibleActions: m, timestamp: h, locale: _, attachments: y, collapsedLineCount: b = Ae, labels: S, textSegments: C, onAttachmentClick: w, onDownloadAll: T, isAttachmentDownloadable: E, onAttachmentRetry: D, selectedAttachmentId: O, markdownClassNames: te, markdownUrlTransform: A, codeBlockTheme: j, tableOnOpenInCanvas: ne }) => {
+	let { colors: P, typography: F, className: re, bubbleClassName: ie, timestampClassName: ae } = i ?? {}, oe = h == null ? void 0 : /* @__PURE__ */ R(Te, {
+		timestamp: h,
+		locale: _,
+		className: ae
+	}), { showMoreLabel: I = "Show more", showLessLabel: B = "Show less", showMoreAriaLabel: H, showLessAriaLabel: U, attachmentClickLabel: se, attachmentDownloadLabel: ce, attachmentRetryLabel: W, attachmentOpenInNewTabLabel: le, userMessageAriaLabel: ue = "User message", codeBlockCopyLabel: de, codeBlockCopiedLabel: fe, codeBlockDownloadLabel: G, tableCopyLabel: K, tableCopiedLabel: q, tableDownloadCsvLabel: J, tableOpenInCanvasLabel: Y, tableDownloadFilename: he, tableScrollRegionAriaLabel: ge, mathScrollRegionAriaLabel: _e } = S ?? {}, X = k(() => ({
+		copyLabel: K,
+		copiedLabel: q,
+		downloadCsvLabel: J,
+		openInCanvasLabel: Y
+	}), [
+		K,
+		q,
+		J,
+		Y
+	]), { textRef: ve, isTextCollapsed: ye, isOverflowing: Z, collapsedMaxHeight: be, expandedMaxHeight: xe, isCollapsed: Q, toggleCollapsed: Se } = f({
 		text: e ?? "",
-		collapsedLineCount: f
-	}), G = s({
-		"--cm-bubble-user-bg": C?.userBackground,
-		"--cm-bubble-user-border": C?.userBorder,
-		"--cm-bubble-fade-start": C?.fadeStart,
-		"--cm-bubble-text": C?.text,
-		"--cm-bubble-collapsed-height": V ? `${H}px` : void 0,
-		"--cm-bubble-expanded-height": V ? `${U}px` : void 0
-	}), ie = n === Z.Top ? "rounded-ee-md rounded-se-2xl" : "rounded-se-md rounded-ee-2xl", ae = c(J.text, ee?.fontClassName), K = A ?? E, q = j ?? k, ce = W ? E : k, Y = W ? K : q, X = W ? D : O, Q = S();
-	return /* @__PURE__ */ I("div", {
+		collapsedLineCount: b
+	}), Ce = s({
+		"--cm-bubble-user-bg": P?.userBackground,
+		"--cm-bubble-user-border": P?.userBorder,
+		"--cm-bubble-fade-start": P?.fadeStart,
+		"--cm-bubble-text": P?.text,
+		"--cm-timestamp-text": P?.timestampText,
+		"--cm-bubble-collapsed-height": Z ? `${be}px` : void 0,
+		"--cm-bubble-expanded-height": Z ? `${xe}px` : void 0
+	}), we = n === ke.Top ? "rounded-ee-md rounded-se-2xl" : "rounded-se-md rounded-ee-2xl", Ee = d($.text, F?.fontClassName), { markdownSource: De, segmentRehypePlugins: Oe, segmentComponents: Ne } = k(() => {
+		if (C == null) return {
+			markdownSource: e ?? "",
+			segmentRehypePlugins: Me,
+			segmentComponents: void 0
+		};
+		let { source: t, inlineSegments: n } = c(C);
+		return {
+			markdownSource: t,
+			segmentRehypePlugins: [u(n)],
+			segmentComponents: l(n)
+		};
+	}, [e, C]), Pe = H ?? I, Fe = U ?? B, Ie = Q ? I : B, Le = Q ? Pe : Fe, Re = Q ? M : N, ze = ee();
+	return /* @__PURE__ */ R("div", {
 		role: "group",
-		"aria-label": ne,
-		style: G,
-		onCopy: oe,
-		className: c("flex w-full", w),
-		children: /* @__PURE__ */ L("div", {
-			className: "ms-auto flex w-fit min-w-0 max-w-full flex-col items-end gap-4",
+		"aria-label": ue,
+		style: Ce,
+		onCopy: pe,
+		className: d("group/message flex w-full", re),
+		children: /* @__PURE__ */ z("div", {
+			className: "ms-auto flex w-fit max-w-full min-w-0 flex-col items-end gap-4",
 			children: [
-				/* @__PURE__ */ I(u, {
-					attachments: d ?? [],
-					onAttachmentClick: _ ? (e) => {
-						let t = d?.find((t) => t.id === e);
-						t && _(t);
+				/* @__PURE__ */ R(p, {
+					attachments: y ?? [],
+					onAttachmentClick: w ? (e) => {
+						let t = y?.find((t) => t.id === e);
+						t && w(t);
 					} : void 0,
-					onDownloadAll: y,
-					onRetry: b,
+					onDownloadAll: T,
+					isAttachmentDownloadable: E,
+					onRetry: D,
 					labels: {
-						clickLabel: M,
-						downloadLabel: N,
-						retryLabel: P,
-						openInNewTabLabel: te
+						clickLabel: se,
+						downloadLabel: ce,
+						retryLabel: W,
+						openInNewTabLabel: le
 					},
 					styles: { className: "max-w-[640px]" },
-					selectedAttachmentId: x
+					selectedAttachmentId: O
 				}),
-				e && /* @__PURE__ */ I("div", {
-					className: c(J.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", ie, T, z.userBubble),
-					children: /* @__PURE__ */ L("div", {
+				e && /* @__PURE__ */ R("div", {
+					className: d($.userBubble, "flex w-fit max-w-full min-w-0 items-center justify-end rounded-ss-2xl rounded-es-2xl border px-6 py-4 wrap-anywhere", we, ie, V.userBubble),
+					children: /* @__PURE__ */ z("div", {
 						className: "flex min-w-0 flex-col items-start",
-						children: [/* @__PURE__ */ I("div", {
-							id: Q,
+						children: [/* @__PURE__ */ R("div", {
+							id: ze,
 							ref: t,
-							className: c("relative -me-1 -ms-1 w-[calc(100%+8px)] overflow-hidden pe-1 ps-1", V && J.collapsibleText, V && !W && J.expandedText, B && J.collapsedText),
-							children: /* @__PURE__ */ I("p", {
-								ref: R,
-								className: c(ae, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
-								children: g ?? e
+							className: d("relative -ms-1 -me-1 w-[calc(100%+8px)] overflow-hidden ps-1 pe-1", Z && $.collapsibleText, Z && !Q && $.expandedText, ye && $.collapsedText),
+							children: /* @__PURE__ */ R("div", {
+								ref: ve,
+								className: d(Ee, "max-w-full min-w-0 text-start", je),
+								children: /* @__PURE__ */ R(r, {
+									content: De,
+									isRawHtmlEnabled: !1,
+									rehypePlugins: Oe,
+									components: Ne,
+									classNames: te,
+									urlTransform: A,
+									codeBlockCopyLabel: de,
+									codeBlockCopiedLabel: fe,
+									codeBlockDownloadLabel: G,
+									codeBlockTheme: j,
+									tableActionLabels: X,
+									tableDownloadFilename: he,
+									tableOnOpenInCanvas: ne,
+									tableScrollRegionAriaLabel: ge,
+									mathScrollRegionAriaLabel: _e
+								})
 							})
-						}), V && /* @__PURE__ */ I(v, {
-							label: /* @__PURE__ */ I(F, { children: ce }),
-							iconBefore: /* @__PURE__ */ I(X, {
-								size: p.SM,
+						}), Z && /* @__PURE__ */ R(x, {
+							label: /* @__PURE__ */ R(L, { children: Ie }),
+							iconBefore: /* @__PURE__ */ R(Re, {
+								size: g.SM,
 								"aria-hidden": "true"
 							}),
-							"aria-label": Y,
-							"aria-expanded": !W,
-							"aria-controls": Q,
+							"aria-label": Le,
+							"aria-expanded": !Q,
+							"aria-controls": ze,
 							className: "mt-3",
-							onClick: re,
-							size: h.Small
+							onClick: Se,
+							size: v.Small
 						})]
 					})
 				}),
-				/* @__PURE__ */ I(se, {
-					...i,
-					isAlwaysVisible: o,
+				/* @__PURE__ */ R(me, {
+					...o,
+					isAlwaysVisible: m,
+					leadingContent: oe == null ? o?.leadingContent : /* @__PURE__ */ z(L, { children: [oe, o?.leadingContent] }),
 					role: a.User
 				})
 			]
 		})
 	});
-}, ue = ({ role: e, beforeContent: t, textSegments: n, onAttachmentClick: r, responseFormat: i, markdownComponents: o, markdownUrlTransform: s, ...c }) => e === a.Status ? /* @__PURE__ */ I(X, { labels: {
+}, Pe = ({ role: e, beforeContent: t, textSegments: n, onAttachmentClick: r, responseFormat: i, markdownComponents: o, markdownUrlTransform: s, ...c }) => e === a.Status ? /* @__PURE__ */ R(Oe, { labels: {
 	titleText: c.labels?.statusTitleText,
 	bodyText: c.labels?.statusBodyText ?? ""
-} }) : e === a.User ? /* @__PURE__ */ I(Q, {
+} }) : e === a.User ? /* @__PURE__ */ R(Ne, {
 	...c,
 	textSegments: n,
+	markdownUrlTransform: s,
 	onAttachmentClick: r
-}) : /* @__PURE__ */ I(Y, {
+}) : /* @__PURE__ */ R(De, {
 	...c,
 	beforeContent: t,
 	responseFormat: i,
 	markdownComponents: o,
 	markdownUrlTransform: s,
 	onAttachmentClick: r
-}), de = { button: "_button_tqo4d_3" }, fe = ({ rect: e, actionRef: t, onReply: n, addedRevision: r, labels: i, styles: a, portalContainer: o }) => {
-	let { colors: l, typography: u, className: p, buttonClassName: g } = a ?? {}, _ = u?.fontClassName ?? "dial-small-text", v = o === void 0 ? typeof document > "u" ? null : document.body : o, y = s({
-		"--cm-reply-background": l?.background,
-		"--cm-reply-hover-background": l?.hoverBackground,
-		"--cm-reply-text": l?.text
-	}), [b, x] = T({
+}), Fe = { button: "_button_tqo4d_3" }, Ie = ({ rect: e, actionRef: t, onReply: n, addedRevision: r, labels: i, styles: a, portalContainer: o }) => {
+	let { colors: c, typography: l, className: u, buttonClassName: f } = a ?? {}, p = l?.fontClassName ?? "dial-small-text", g = o === void 0 ? typeof document > "u" ? null : document.body : o, y = s({
+		"--cm-reply-background": c?.background,
+		"--cm-reply-hover-background": c?.hoverBackground,
+		"--cm-reply-text": c?.text
+	}), [b, x] = A({
 		x: 0,
 		y: 0
 	});
-	return C(() => {
+	return O(() => {
 		if (!e || !t.current) return;
 		let n = t.current.getBoundingClientRect(), r = window.visualViewport, i = r?.offsetLeft ?? 0, a = r?.offsetTop ?? 0, o = r?.width ?? document.documentElement.clientWidth, s = r?.height ?? document.documentElement.clientHeight, c = e.top - n.height - 8 >= a + 8 ? e.top - n.height - 8 : e.bottom + 8;
 		x({
@@ -441,38 +561,46 @@ var z = {
 	}, [
 		e,
 		t,
-		v,
-		p,
 		g,
-		_,
+		u,
+		f,
+		p,
 		i.reply
-	]), v ? R(/* @__PURE__ */ L(F, { children: [e && /* @__PURE__ */ I("div", {
+	]), g ? B(/* @__PURE__ */ z(L, { children: [e && /* @__PURE__ */ R("div", {
 		ref: t,
-		className: c("fixed left-0 top-0 z-50 max-w-[calc(100vw-16px)]", p),
+		className: d("fixed top-0 left-0 z-50 max-w-[calc(100vw-16px)]", u),
 		style: {
 			...y,
 			transform: `translate(${b.x}px, ${b.y}px)`
 		},
-		children: /* @__PURE__ */ I(d, {
-			variant: f.Neutral,
-			size: h.Small,
+		children: /* @__PURE__ */ R(m, {
+			variant: h.Neutral,
+			size: v.Small,
 			label: i.reply,
 			onClick: n,
-			textClassName: _,
-			className: c(de.button, "h-8 min-h-8 min-w-11 px-2 shadow-lg mobile:h-11 mobile:min-h-11", g),
-			iconAfter: /* @__PURE__ */ I(E, {
+			textClassName: p,
+			className: d(Fe.button, "h-8 min-h-8 min-w-11 px-2 shadow-lg mobile:h-11 mobile:min-h-11", f),
+			iconAfter: /* @__PURE__ */ R(j, {
 				size: 16,
-				stroke: m,
+				stroke: _,
 				"aria-hidden": "true",
 				className: "rtl:scale-x-[-1]"
 			})
 		})
-	}), /* @__PURE__ */ I("div", {
-		role: "status",
-		"aria-live": "polite",
-		className: "sr-only",
-		children: e ? i.selectionAvailable : r > 0 ? /* @__PURE__ */ I("span", { children: i.attachmentAdded }, r) : null
-	})] }), v) : null;
+	}), /* @__PURE__ */ R(S, {
+		visuallyHidden: !0,
+		children: e ? i.selectionAvailable : r > 0 ? /* @__PURE__ */ R("span", { children: i.attachmentAdded }, r) : null
+	})] }), g) : null;
+}, Le = { label: "_label_1nohb_1" }, Re = (e) => `Today ${e}`, ze = (e) => `Yesterday ${e}`, Be = ({ timestamp: e, locale: t, labels: n, className: r = "dial-small-text", colors: i }) => {
+	let a = Z(e);
+	if (a == null) return null;
+	let { kind: o, text: c } = xe(a, /* @__PURE__ */ new Date(), t), l = c;
+	return o === J.Today ? l = (n?.today ?? Re)(c) : o === J.Yesterday && (l = (n?.yesterday ?? ze)(c)), /* @__PURE__ */ R("time", {
+		dateTime: e,
+		className: d("self-center text-center", Le.label, r),
+		style: s({ "--cst-text": i?.text }),
+		children: l
+	});
 };
 //#endregion
-export { Y as AssistantMessageBubble, Z as BubblePosition, z as CONVERSATION_MESSAGES_CLASS, se as MessageActions, ue as MessageBubble, fe as MessageSelectionReply, X as StatusMessageBubble, Q as UserMessageBubble };
+export { De as AssistantMessageBubble, ke as BubblePosition, V as CONVERSATION_MESSAGES_CLASS, Be as ConversationStartTimestamp, me as MessageActions, Pe as MessageBubble, Ie as MessageSelectionReply, Oe as StatusMessageBubble, Ne as UserMessageBubble };