@epam/ai-dial-conversation-messages 1.1.0-dev.209 → 1.1.0-dev.211

package/index.js

@@ -1,5 +1,5 @@
 import { AttachmentErrorReason as e, AttachmentType as t, CopyIconButton as n, DeploymentIcon 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, DialRadioGroup as m, DialSlider as h, DialTooltip as g, ElementSize as _, GhostIconButton as v, Highlight as y, InfoMessageNotification as b, Input as x, LinkButton as S, NeutralButton as C, Popup as w, PopupSize as T, PrimaryButton as E, RadioGroupOrientation as D, Skeleton as O, SkeletonVariant as k, Spinner as A, StaticIconButton as j } from "@epam/ai-dial-ui-kit";
+import { DIAL_ICON_SIZE as p, DialRadioGroup as m, DialSlider as h, DialTooltip as g, ElementSize as _, GhostIconButton as v, Highlight as y, InfoMessageNotification as b, LinkButton as x, NeutralButton as S, Popup as C, PopupSize as w, PrimaryButton as T, RadioGroupOrientation as E, Skeleton as D, SkeletonVariant as O, Spinner as k, StaticIconButton as A, Textarea as j } from "@epam/ai-dial-ui-kit";
 import { IconChevronDown as M, IconChevronUp as N, IconClipboard 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 H, IconFileTypeHtml as U, IconFileTypeJpg as W, IconFileTypeJs as ee, IconFileTypeJsx as te, IconFileTypePdf as ne, IconFileTypePhp as re, IconFileTypePng as ie, IconFileTypePpt as ae, IconFileTypeRs as oe, IconFileTypeSql as se, IconFileTypeSvg as ce, IconFileTypeTs as le, IconFileTypeTsx as ue, IconFileTypeTxt as de, IconFileTypeVue as fe, IconFileTypeXls as pe, IconFileTypeXml as me, IconFileTypeZip as he, IconMarkdown as ge, IconMusic as _e, IconPaperclip as ve, IconPencilMinus as ye, IconPhoto as G, IconRefresh as be, IconReload as xe, IconTerminal2 as Se, IconThumbDown as Ce, IconThumbUp as we, IconTrashX as Te, IconVideo as Ee, IconX as De } from "@tabler/icons-react";
 import "react-dom";
 import { memo as Oe, useCallback as K, useEffect as ke, useId as Ae, useMemo as je, useRef as Me, useState as q } from "react";
@@ -99,7 +99,7 @@ var Ne = (e) => {
 	track: "_track_3jao2_37",
 	actionButton: "_actionButton_3jao2_43",
 	imageActionButton: "_imageActionButton_3jao2_47"
-}, Q = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o }) => /* @__PURE__ */ Y(j, {
+}, Q = ({ ariaLabel: e, errorTitle: t, errorDescId: n, onClick: r, id: i, icon: a, className: o }) => /* @__PURE__ */ Y(A, {
 	icon: a,
 	size: _.Small,
 	className: d("absolute end-1 top-1 opacity-0 focus-visible:opacity-100 group-focus-within/attachment-tile:opacity-100 group-hover/attachment-tile:opacity-100", Z.actionButton, o),
@@ -137,7 +137,7 @@ var Ne = (e) => {
 	[e.Network]: "Upload failed · network error",
 	[e.UnsupportedType]: "Upload failed · unsupported file type"
 }, Ge = ({ attachment: t, searchQuery: n = "", onClick: r, onRetry: i, labels: a, styles: o, onDownload: s, isPasted: l, isLink: u, cssVars: f, onExpand: p, isExpandable: m, onRemove: h, isSelected: g }) => {
-	let { clickLabel: _ = "Download attachment", retryLabel: v = "Retry upload", sizeLabel: b, uploadingLabel: x = "Uploading", errorReasonLabels: S, genericErrorLabel: C = "Upload failed" } = a ?? {}, { typography: w, className: T } = o ?? {}, { id: E, name: D, status: O, errorReason: k } = t, j = O === c.Loading, M = O === c.Error, N = Ae(), P = M ? k && (S?.[k] ?? We[k]) || C : "", { BottomIcon: F, typeLabel: I } = Re(t), L = !M && !j && s && !u, R = M && !!i && k !== e.UnsupportedType, z = L || R ? "pe-5" : void 0, B = (e) => {
+	let { clickLabel: _ = "Download attachment", retryLabel: v = "Retry upload", sizeLabel: b, uploadingLabel: x = "Uploading", errorReasonLabels: S, genericErrorLabel: C = "Upload failed" } = a ?? {}, { typography: w, className: T } = o ?? {}, { id: E, name: D, status: O, errorReason: A } = t, j = O === c.Loading, M = O === c.Error, N = Ae(), P = M ? A && (S?.[A] ?? We[A]) || C : "", { BottomIcon: F, typeLabel: I } = Re(t), L = !M && !j && s && !u, R = M && !!i && A !== e.UnsupportedType, z = L || R ? "pe-5" : void 0, B = (e) => {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r?.(t.id));
 	}, V = je(() => l ? D : Ne(D), [l, D]), H = K(() => {
 		window.open(t.referenceUrl, "_blank", "noopener,noreferrer");
@@ -167,7 +167,7 @@ var Ne = (e) => {
 		j && /* @__PURE__ */ Y("div", {
 			"aria-label": x,
 			className: d("absolute left-[-1px] top-[-1px] flex size-full items-center justify-center rounded", Z.track),
-			children: /* @__PURE__ */ Y(A, { size: 32 })
+			children: /* @__PURE__ */ Y(k, { size: 32 })
 		}),
 		/* @__PURE__ */ X("div", {
 			className: d("absolute right-0 top-0 flex gap-1"),
@@ -270,8 +270,8 @@ var Ne = (e) => {
 					id: h,
 					className: Z.imageActionButton
 				}),
-				w !== Ke.Loaded && /* @__PURE__ */ Y(O, {
-					variant: k.Rectangular,
+				w !== Ke.Loaded && /* @__PURE__ */ Y(D, {
+					variant: O.Rectangular,
 					width: "100%",
 					height: "100%",
 					active: w === Ke.Loading,
@@ -437,17 +437,19 @@ var Ne = (e) => {
 	"Precise",
 	"Neutral",
 	"Creative"
-], temperatureHint: b, labelClassName: S = "!dial-small-semi-text", colors: C }) => {
-	let w = u({ "--csf-label-text": C?.labelText }), T = d(S, et.label, "gap-1");
+], temperatureHint: b, labelClassName: x = "!dial-small-semi-text", colors: S }) => {
+	let C = u({ "--csf-label-text": S?.labelText }), w = d(x, et.label, "gap-1");
 	return /* @__PURE__ */ X("div", {
-		className: "flex flex-col gap-4 px-6 py-3",
-		style: w,
+		className: "flex flex-col gap-4 px-6 pb-3",
+		style: C,
 		children: [
 			e.responseFormat && /* @__PURE__ */ Y(m, {
 				fieldTitle: s,
-				labelClassName: T,
+				groupLabelClassName: w,
+				containerClassName: "!gap-2",
+				formItemChildrenClassName: "mb-2",
 				elementId: "response-format",
-				orientation: D.Column,
+				orientation: E.Column,
 				activeRadioButton: t ?? l.Markdown,
 				labelDescription: c,
 				radioButtons: [{
@@ -459,11 +461,12 @@ var Ne = (e) => {
 				}],
 				onChange: (e) => i(e)
 			}),
-			e.systemPrompt && /* @__PURE__ */ Y(x, {
+			e.systemPrompt && /* @__PURE__ */ Y(j, {
 				value: n,
 				placeholder: _,
+				resize: !0,
 				labelProps: {
-					className: T,
+					className: w,
 					label: g
 				},
 				onChange: (e) => a(e ?? "")
@@ -471,7 +474,7 @@ var Ne = (e) => {
 			e.temperature && /* @__PURE__ */ Y(h, {
 				labelProps: {
 					label: v,
-					className: T,
+					className: w,
 					caption: b
 				},
 				value: r,
@@ -483,9 +486,9 @@ var Ne = (e) => {
 			})
 		]
 	});
-}, nt = { modal: "_modal_od073_1" };
-Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, title: o = "Chat settings", responseFormatLabel: s, responseFormatHint: c, responseFormatMarkdownLabel: l, responseFormatPlainTextLabel: u, systemPromptLabel: d, systemPromptTooltip: f, temperatureLabel: p, temperatureLabels: m, temperatureHint: h, saveLabel: _ = "Apply changes", saveDisabledTooltip: v, backgroundClassName: y = nt.modal }) => {
-	let { responseFormat: b, systemPrompt: x, temperature: S, canSubmit: C, setResponseFormat: D, setSystemPrompt: O, setTemperature: k, handleSubmit: A } = $e({
+}, nt = { modal: "_modal_kl0h0_1" };
+Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemperature: r, onSave: i, onClose: a, title: o = "Chat settings", titleClassName: s = "dial-h1-text", responseFormatLabel: c, responseFormatHint: l, responseFormatMarkdownLabel: u, responseFormatPlainTextLabel: d, systemPromptLabel: f, systemPromptTooltip: p, temperatureLabel: m, temperatureLabels: h, temperatureHint: _, saveLabel: v = "Apply changes", saveDisabledTooltip: y, backgroundClassName: b = nt.modal }) => {
+	let { responseFormat: x, systemPrompt: S, temperature: E, canSubmit: D, setResponseFormat: O, setSystemPrompt: k, setTemperature: A, handleSubmit: j } = $e({
 		features: e,
 		initialResponseFormat: t,
 		initialSystemPrompt: n,
@@ -493,41 +496,42 @@ Oe(({ features: e, initialResponseFormat: t, initialSystemPrompt: n, initialTemp
 		onSave: i,
 		onClose: a
 	});
-	return /* @__PURE__ */ Y(w, {
+	return /* @__PURE__ */ Y(C, {
 		open: !0,
 		header: o,
-		size: T.Sm,
+		titleClassName: s,
+		size: w.Sm,
 		onClose: a,
-		className: y,
+		className: b,
 		footer: /* @__PURE__ */ Y("div", {
 			className: "flex justify-end px-6 py-4",
 			children: /* @__PURE__ */ Y(g, {
-				tooltip: v,
-				hideTooltip: C || !v,
-				children: /* @__PURE__ */ Y(E, {
-					label: _,
-					onClick: A,
-					disabled: !C
+				tooltip: y,
+				hideTooltip: D || !y,
+				children: /* @__PURE__ */ Y(T, {
+					label: v,
+					onClick: j,
+					disabled: !D
 				})
 			})
 		}),
 		children: /* @__PURE__ */ Y(tt, {
 			features: e,
-			responseFormat: b,
-			systemPrompt: x,
-			temperature: S,
-			onResponseFormatChange: D,
-			onSystemPromptChange: O,
-			onTemperatureChange: k,
-			responseFormatLabel: s,
-			responseFormatHint: c,
-			responseFormatMarkdownLabel: l,
-			responseFormatPlainTextLabel: u,
-			systemPromptLabel: d,
-			systemPromptTooltip: f,
-			temperatureLabel: p,
-			temperatureLabels: m,
-			temperatureHint: h
+			responseFormat: x,
+			systemPrompt: S,
+			temperature: E,
+			onResponseFormatChange: O,
+			onSystemPromptChange: k,
+			onTemperatureChange: A,
+			responseFormatLabel: c,
+			responseFormatHint: l,
+			responseFormatMarkdownLabel: u,
+			responseFormatPlainTextLabel: d,
+			systemPromptLabel: f,
+			systemPromptTooltip: p,
+			temperatureLabel: m,
+			temperatureLabels: h,
+			temperatureHint: _
 		})
 	});
 });
@@ -633,8 +637,8 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 	collapsedText: "_collapsedText_ovjc1_15",
 	startersDivider: "_startersDivider_ovjc1_26",
 	text: "_text_ovjc1_30"
-}, ot = ({ text: e, styles: n, actions: a, hasAlwaysVisibleActions: o, isStreaming: c, attachments: l, afterContent: f, starters: p, onSelectStarter: m, deploymentIconUrl: h, deploymentDisplayName: g, markdownComponents: _, onAttachmentClick: v, onDownloadAll: y, onAttachmentRetry: b, codeBlockTheme: x, labels: S, selectedAttachmentId: w }) => {
-	let { colors: T, typography: E, className: D, bubbleClassName: O } = n ?? {}, { attachmentClickLabel: k, attachmentRetryLabel: A, attachmentOpenInNewTabLabel: j, startersAriaLabel: M = "Quick reply buttons", thinkingLabel: N, codeBlockCopyLabel: P, codeBlockCopiedLabel: F, assistantMessageAriaLabel: I = "Assistant message", deploymentIconFallbackLabel: L = "AI" } = S ?? {}, R = c ? (l ?? []).filter((e) => e.type !== t.Audio) : l ?? [], z = u({
+}, ot = ({ text: e, styles: n, actions: a, hasAlwaysVisibleActions: o, isStreaming: c, attachments: l, afterContent: f, starters: p, onSelectStarter: m, deploymentIconUrl: h, deploymentDisplayName: g, markdownComponents: _, onAttachmentClick: v, onDownloadAll: y, onAttachmentRetry: b, codeBlockTheme: x, labels: C, selectedAttachmentId: w }) => {
+	let { colors: T, typography: E, className: D, bubbleClassName: O } = n ?? {}, { attachmentClickLabel: k, attachmentRetryLabel: A, attachmentOpenInNewTabLabel: j, startersAriaLabel: M = "Quick reply buttons", thinkingLabel: N, codeBlockCopyLabel: P, codeBlockCopiedLabel: F, assistantMessageAriaLabel: I = "Assistant message", deploymentIconFallbackLabel: L = "AI" } = C ?? {}, R = c ? (l ?? []).filter((e) => e.type !== t.Audio) : l ?? [], z = u({
 		"--cm-bubble-text": T?.text,
 		"--cm-starters-divider": T?.startersDivider
 	}), B = d($.text, E?.fontClassName), V = !!(h || g);
@@ -693,7 +697,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 				children: p.map((e, t) => /* @__PURE__ */ Y("div", {
 					role: "listitem",
 					className: "min-w-[40px]",
-					children: /* @__PURE__ */ Y(C, {
+					children: /* @__PURE__ */ Y(S, {
 						label: e.title,
 						className: "min-w-[40px]",
 						onClick: () => m(e)
@@ -713,7 +717,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 }), ct = /* @__PURE__ */ function(e) {
 	return e.Bottom = "Bottom", e.Top = "Top", e;
 }({}), lt = 10, ut = ({ text: e, position: t = ct.Bottom, styles: n, actions: r, hasAlwaysVisibleActions: i, attachments: a, collapsedLineCount: o = lt, labels: c, onAttachmentClick: l, onDownloadAll: m, onAttachmentRetry: h, selectedAttachmentId: g }) => {
-	let { colors: v, typography: y, className: b, bubbleClassName: x } = n ?? {}, { showMoreLabel: C = "Show more", showLessLabel: w = "Show less", showMoreAriaLabel: T, showLessAriaLabel: E, attachmentClickLabel: D, attachmentRetryLabel: O, attachmentOpenInNewTabLabel: k, userMessageAriaLabel: A = "User message" } = c ?? {}, { textRef: j, isTextCollapsed: P, isOverflowing: F, collapsedMaxHeight: I, expandedMaxHeight: L, isCollapsed: R, toggleCollapsed: z } = f({
+	let { colors: v, typography: y, className: b, bubbleClassName: S } = n ?? {}, { showMoreLabel: C = "Show more", showLessLabel: w = "Show less", showMoreAriaLabel: T, showLessAriaLabel: E, attachmentClickLabel: D, attachmentRetryLabel: O, attachmentOpenInNewTabLabel: k, userMessageAriaLabel: A = "User message" } = c ?? {}, { textRef: j, isTextCollapsed: P, isOverflowing: F, collapsedMaxHeight: I, expandedMaxHeight: L, isCollapsed: R, toggleCollapsed: z } = f({
 		text: e,
 		collapsedLineCount: o
 	}), B = u({
@@ -746,7 +750,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 					selectedAttachmentId: g
 				}),
 				e && /* @__PURE__ */ Y("div", {
-					className: d($.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", V, x),
+					className: d($.userBubble, "flex w-fit items-center justify-end rounded-es-2xl rounded-ss-2xl border px-6 py-4", V, S),
 					children: /* @__PURE__ */ X("div", {
 						className: "flex min-w-0 flex-col items-start",
 						children: [/* @__PURE__ */ Y("div", {
@@ -757,7 +761,7 @@ var rt = { activeRating: "_activeRating_7jito_1" }, it = 2e3, at = ({ role: e =
 								className: d(H, "whitespace-pre-wrap text-start [overflow-wrap:anywhere]"),
 								children: e
 							})
-						}), F && /* @__PURE__ */ Y(S, {
+						}), F && /* @__PURE__ */ Y(x, {
 							label: /* @__PURE__ */ Y(J, { children: ee }),
 							iconBefore: /* @__PURE__ */ Y(ne, {
 								size: p.SM,

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.209",
+  "version": "1.1.0-dev.211",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -19,8 +19,8 @@
   "peerDependencies": {
     "react": "^19.0.0",
     "@tabler/icons-react": "^3.0.0",
-    "@epam/ai-dial-chat-shared": "1.1.0-dev.209",
-    "@epam/ai-dial-conversation-input": "1.1.0-dev.209",
+    "@epam/ai-dial-chat-shared": "1.1.0-dev.211",
+    "@epam/ai-dial-conversation-input": "1.1.0-dev.211",
     "react-markdown": "^10.1.0",
     "@epam/ai-dial-ui-kit": "^0.13.0-dev.26"
   },