@epam/ai-dial-conversation-input 1.1.0-dev.124 → 1.1.0-dev.126

package/index.js

@@ -1,5 +1,5 @@
 import { AttachmentErrorReason as e, AttachmentType as t, DeploymentIcon as n, RequestStatus as r, ResponseFormat as i, buildCssVars as a, mergeClasses as o, useIsMobile as s } from "@epam/ai-dial-chat-shared";
-import { BASE_ICON_SIZE as c, Button as l, DIAL_ICON_SIZE as u, DialCloseButton as d, DialDropdown as f, DialDropdownIcon as p, DialErrorText as m, DialInput as h, DialPopup as g, DialRadioGroup as _, DialSearch as v, DialSkeleton as y, DialSkeletonVariant as b, DialSlider as x, DialTooltip as S, ElementSize as C, GhostIconButton as w, Highlight as T, NeutralButton as E, PopupSize as D, PrimaryButton as O, PrimaryIconButton as k, RadioGroupOrientation as A, StaticIconButton as j } from "@epam/ai-dial-ui-kit";
+import { BASE_ICON_SIZE as c, Button as l, DIAL_ICON_SIZE as u, DialCloseButton as d, DialDropdown as f, DialDropdownIcon as p, DialErrorText as m, DialPopup as h, DialRadioGroup as g, DialSearch as _, DialSkeleton as v, DialSkeletonVariant as y, DialSlider as b, DialTooltip as x, ElementSize as S, GhostIconButton as C, Highlight as w, Input as T, NeutralButton as E, PopupSize as D, PrimaryButton as O, PrimaryIconButton as k, RadioGroupOrientation as A, StaticIconButton as j } from "@epam/ai-dial-ui-kit";
 import { IconArrowLeft as M, IconArrowNarrowRight as N, IconCheck as P, IconChevronDown as ee, IconChevronRight as F, IconFile as te, IconMicrophone as ne, IconPaperclip as re, IconPlayerStopFilled as ie, IconPlaystationSquare as ae, IconPlus as oe, IconSettings as se, IconTool as ce, IconX as le } from "@tabler/icons-react";
 import { createPortal as ue } from "react-dom";
 import { createElement as de, memo as fe, useCallback as I, useEffect as L, useImperativeHandle as pe, useLayoutEffect as R, useMemo as z, useRef as B, useState as V } from "react";
@@ -51,7 +51,7 @@ var Ce = (e, t) => {
 			children: [
 				i && /* @__PURE__ */ U("div", {
 					className: "absolute start-4",
-					children: /* @__PURE__ */ U(w, {
+					children: /* @__PURE__ */ U(C, {
 						icon: /* @__PURE__ */ U(M, {
 							size: u.LG,
 							stroke: 1.5,
@@ -434,19 +434,19 @@ var Ce = (e, t) => {
 			a
 		])
 	};
-}, Be = { label: "_label_14i7c_1" }, Ve = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: s, onSystemPromptChange: c, onTemperatureChange: l, responseFormatLabel: u = "Response format", responseFormatHint: d = "Applies to new and existing messages", responseFormatMarkdownLabel: f = "Markdown", responseFormatPlainTextLabel: p = "Plain text", systemPromptLabel: m = "System prompt", systemPromptTooltip: g = "Enter a prompt", temperatureLabel: v = "Temperature", temperatureLabels: y = [
+}, Be = { label: "_label_14i7c_1" }, Ve = ({ features: e, responseFormat: t, systemPrompt: n, temperature: r, onResponseFormatChange: s, onSystemPromptChange: c, onTemperatureChange: l, responseFormatLabel: u = "Response format", responseFormatHint: d = "Applies to new and existing messages", responseFormatMarkdownLabel: f = "Markdown", responseFormatPlainTextLabel: p = "Plain text", systemPromptLabel: m = "System prompt", systemPromptTooltip: h = "Enter a prompt", temperatureLabel: _ = "Temperature", temperatureLabels: v = [
 	"Precise",
 	"Neutral",
 	"Creative"
-], temperatureHint: b, labelClassName: S = "!dial-small-semi-text", colors: C }) => {
-	let w = a({ "--csf-label-text": C?.labelText }), T = o(S, Be.label, "gap-1");
+], temperatureHint: y, labelClassName: x = "!dial-small-semi-text", colors: S }) => {
+	let C = a({ "--csf-label-text": S?.labelText }), w = o(x, Be.label, "gap-1");
 	return /* @__PURE__ */ W("div", {
 		className: "flex flex-col gap-4 px-6 py-3",
-		style: w,
+		style: C,
 		children: [
-			e.responseFormat && /* @__PURE__ */ U(_, {
+			e.responseFormat && /* @__PURE__ */ U(g, {
 				fieldTitle: u,
-				labelClassName: T,
+				labelClassName: w,
 				elementId: "response-format",
 				orientation: A.Column,
 				activeRadioButton: t ?? i.Markdown,
@@ -460,31 +460,31 @@ var Ce = (e, t) => {
 				}],
 				onChange: (e) => s(e)
 			}),
-			e.systemPrompt && /* @__PURE__ */ U(h, {
+			e.systemPrompt && /* @__PURE__ */ U(T, {
 				value: n,
-				placeholder: g,
+				placeholder: h,
 				labelProps: {
-					className: T,
+					className: w,
 					label: m
 				},
 				onChange: (e) => c(e ?? "")
 			}),
-			e.temperature && /* @__PURE__ */ U(x, {
+			e.temperature && /* @__PURE__ */ U(b, {
 				labelProps: {
-					label: v,
-					className: T,
-					caption: b
+					label: _,
+					className: w,
+					caption: y
 				},
 				value: r,
 				min: 0,
 				max: 1,
 				step: .1,
-				labels: y,
+				labels: v,
 				onChange: l
 			})
 		]
 	});
-}, He = ({ isOpen: e, onBack: t, backLabel: n, onClose: r, closeLabel: i, style: a, features: s, initialResponseFormat: c, initialSystemPrompt: l, initialTemperature: u, onSave: d, title: f = "Chat settings", responseFormatLabel: p, responseFormatHint: m, responseFormatMarkdownLabel: h, responseFormatPlainTextLabel: g, systemPromptLabel: _, systemPromptTooltip: v, temperatureLabel: y, temperatureLabels: b, temperatureHint: x, saveLabel: C = "Apply changes", saveDisabledTooltip: w }) => {
+}, He = ({ isOpen: e, onBack: t, backLabel: n, onClose: r, closeLabel: i, style: a, features: s, initialResponseFormat: c, initialSystemPrompt: l, initialTemperature: u, onSave: d, title: f = "Chat settings", responseFormatLabel: p, responseFormatHint: m, responseFormatMarkdownLabel: h, responseFormatPlainTextLabel: g, systemPromptLabel: _, systemPromptTooltip: v, temperatureLabel: y, temperatureLabels: b, temperatureHint: S, saveLabel: C = "Apply changes", saveDisabledTooltip: w }) => {
 	let { responseFormat: T, systemPrompt: E, temperature: D, canSubmit: k, setResponseFormat: A, setSystemPrompt: j, setTemperature: M, handleSubmit: N } = ze({
 		isOpen: e,
 		features: s,
@@ -518,10 +518,10 @@ var Ce = (e, t) => {
 			systemPromptTooltip: v,
 			temperatureLabel: y,
 			temperatureLabels: b,
-			temperatureHint: x
+			temperatureHint: S
 		}), /* @__PURE__ */ U("div", {
 			className: o("px-6 py-4 mobile:pb-8"),
-			children: /* @__PURE__ */ U(S, {
+			children: /* @__PURE__ */ U(x, {
 				tooltip: w,
 				hideTooltip: k || !w,
 				triggerClassName: "w-full",
@@ -534,8 +534,8 @@ var Ce = (e, t) => {
 			})
 		})]
 	});
-}, Ue = { modal: "_modal_od073_1" }, We = ({ 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 = Ue.modal }) => {
-	let { responseFormat: b, systemPrompt: x, temperature: C, canSubmit: w, setResponseFormat: T, setSystemPrompt: E, setTemperature: k, handleSubmit: A } = ze({
+}, Ue = { modal: "_modal_od073_1" }, We = ({ 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: g, saveLabel: _ = "Apply changes", saveDisabledTooltip: v, backgroundClassName: y = Ue.modal }) => {
+	let { responseFormat: b, systemPrompt: S, temperature: C, canSubmit: w, setResponseFormat: T, setSystemPrompt: E, setTemperature: k, handleSubmit: A } = ze({
 		features: e,
 		initialResponseFormat: t,
 		initialSystemPrompt: n,
@@ -543,7 +543,7 @@ var Ce = (e, t) => {
 		onSave: i,
 		onClose: a
 	});
-	return /* @__PURE__ */ U(g, {
+	return /* @__PURE__ */ U(h, {
 		open: !0,
 		header: o,
 		size: D.Sm,
@@ -551,7 +551,7 @@ var Ce = (e, t) => {
 		className: y,
 		footer: /* @__PURE__ */ U("div", {
 			className: "flex justify-end px-6 py-4",
-			children: /* @__PURE__ */ U(S, {
+			children: /* @__PURE__ */ U(x, {
 				tooltip: v,
 				hideTooltip: w || !v,
 				children: /* @__PURE__ */ U(O, {
@@ -564,7 +564,7 @@ var Ce = (e, t) => {
 		children: /* @__PURE__ */ U(Ve, {
 			features: e,
 			responseFormat: b,
-			systemPrompt: x,
+			systemPrompt: S,
 			temperature: C,
 			onResponseFormatChange: T,
 			onSystemPromptChange: E,
@@ -577,7 +577,7 @@ var Ce = (e, t) => {
 			systemPromptTooltip: f,
 			temperatureLabel: p,
 			temperatureLabels: m,
-			temperatureHint: h
+			temperatureHint: g
 		})
 	});
 };
@@ -631,7 +631,7 @@ var Ge = {
 	toolIcon: "_toolIcon_r268y_5",
 	chevronIcon: "_chevronIcon_r268y_9"
 }, qe = ({ onAttachClick: e, attachLabel: t, addMenuTitle: n, menuTitle: r, menuCloseLabel: l, style: d, listClassName: p = "cp-dropdown-overlay !w-[240px]", isDisabled: m = !1, chatSettings: h, extraMenuItems: g, toolsMenuItems: _ = [], onToolToggle: v, toolsMenuTitle: y = "Tools", toolsBackLabel: b = "Back", colors: x }) => {
-	let S = s(), [T, E] = V(!1), [D, O] = V(!1), [k, A] = V(!1), j = z(() => a({
+	let w = s(), [T, E] = V(!1), [D, O] = V(!1), [k, A] = V(!1), j = z(() => a({
 		"--aab-selected-tool-icon": x?.selectedToolIcon,
 		"--aab-tool-icon": x?.toolIcon,
 		"--aab-chevron-icon": x?.chevronIcon
@@ -681,10 +681,10 @@ var Ge = {
 				size: c,
 				"aria-hidden": !0
 			}),
-			onClick: S ? () => {
+			onClick: w ? () => {
 				A(!0), E(!1);
 			} : () => void 0,
-			...S ? { iconAfter: /* @__PURE__ */ U(F, {
+			...w ? { iconAfter: /* @__PURE__ */ U(F, {
 				size: c,
 				stroke: 1.5,
 				style: j,
@@ -699,7 +699,7 @@ var Ge = {
 				size: c,
 				"aria-hidden": !0
 			}),
-			iconAfter: S ? /* @__PURE__ */ U(F, {
+			iconAfter: w ? /* @__PURE__ */ U(F, {
 				size: c,
 				stroke: 1.5,
 				style: j,
@@ -713,20 +713,20 @@ var Ge = {
 		e,
 		h,
 		g,
-		S,
+		w,
 		M,
 		y,
 		N,
 		j
 	]);
-	return ee.length === 0 ? null : /* @__PURE__ */ U(H, { children: S ? /* @__PURE__ */ W(H, { children: [
-		/* @__PURE__ */ U(w, {
+	return ee.length === 0 ? null : /* @__PURE__ */ U(H, { children: w ? /* @__PURE__ */ W(H, { children: [
+		/* @__PURE__ */ U(C, {
 			icon: /* @__PURE__ */ U(oe, {
 				size: u.LG,
 				"aria-hidden": !0
 			}),
 			"aria-label": n,
-			size: C.Large,
+			size: S.Large,
 			tooltipProps: { tooltip: n },
 			disabled: m,
 			onClick: () => E(!0)
@@ -786,7 +786,7 @@ var Ge = {
 		placement: "bottom-start",
 		listClassName: p,
 		items: ee,
-		children: /* @__PURE__ */ U(w, {
+		children: /* @__PURE__ */ U(C, {
 			icon: /* @__PURE__ */ U(oe, {
 				size: u.LG,
 				"aria-hidden": !0
@@ -947,7 +947,7 @@ var Ge = {
 	}, [b]);
 	let x = /* @__PURE__ */ W("div", {
 		className: "flex flex-shrink-0 items-center justify-end gap-1",
-		children: [/* @__PURE__ */ U(w, {
+		children: [/* @__PURE__ */ U(C, {
 			icon: /* @__PURE__ */ U(le, {
 				size: u.LG,
 				"aria-hidden": !0
@@ -1001,15 +1001,15 @@ var Ge = {
 	icon: /* @__PURE__ */ U(ae, { size: u.LG }),
 	onClick: () => e?.(),
 	"aria-label": t
-}), nt = ({ size: e = 20 }) => /* @__PURE__ */ U(y, {
-	variant: b.Circular,
+}), nt = ({ size: e = 20 }) => /* @__PURE__ */ U(v, {
+	variant: y.Circular,
 	width: e,
 	height: e,
 	active: !0
 }), rt = ({ loadingLabel: e }) => /* @__PURE__ */ W("span", {
 	className: "flex min-w-0 flex-1 items-center",
-	children: [/* @__PURE__ */ U(y, {
-		variant: b.Text,
+	children: [/* @__PURE__ */ U(v, {
+		variant: y.Text,
 		width: "100%",
 		height: 16,
 		active: !0
@@ -1065,7 +1065,7 @@ var Ge = {
 					label: /* @__PURE__ */ W("span", {
 						className: "flex w-full items-center justify-between gap-2",
 						style: a({ "--ms-selected-item-check": l?.selectedItemCheck }),
-						children: [/* @__PURE__ */ U(T, {
+						children: [/* @__PURE__ */ U(w, {
 							text: at(e),
 							query: d,
 							maxLines: 1
@@ -1095,10 +1095,10 @@ var Ge = {
 		menuHeader: z(() => !m && e && e.length > 0 ? /* @__PURE__ */ U("div", {
 			style: a({ "--ms-search-header-bg": l?.searchHeaderBackground }),
 			className: o("sticky top-0 z-10 pb-1 pe-2 pt-2", i),
-			children: /* @__PURE__ */ U(v, {
+			children: /* @__PURE__ */ U(_, {
 				value: d,
 				placeholder: r?.searchPlaceholder ?? "Search",
-				size: C.Small,
+				size: S.Small,
 				wrapperClassName: "border-0",
 				onChange: f
 			})
@@ -1577,7 +1577,7 @@ var kt = {
 			}),
 			label: /* @__PURE__ */ W("span", {
 				className: "flex flex-1 items-center justify-between gap-2",
-				children: [/* @__PURE__ */ U(T, {
+				children: [/* @__PURE__ */ U(w, {
 					text: d.displayName ?? d.id,
 					query: s,
 					maxLines: 1,
@@ -1592,11 +1592,11 @@ var kt = {
 		})
 	});
 }, Nt = ({ isOpen: e, title: t, closeLabel: n, searchPlaceholder: r = "Search", onClose: i, deployments: s, selectedDeploymentId: c, onSelect: l, loadingLabel: u, errorLabel: d, emptyLabel: f, style: p, titleClassName: m = "dial-body-semi-text", labelClassName: h = "dial-small-text", colors: g }) => {
-	let [_, y] = V("");
+	let [v, y] = V("");
 	L(() => {
 		e || y("");
 	}, [e]);
-	let b = s && s.length > 0, x = u !== void 0, S = !b && !x ? d ?? f : void 0, w = b ? ot(s, _) : [], T = (e) => {
+	let b = s && s.length > 0, x = u !== void 0, C = !b && !x ? d ?? f : void 0, w = b ? ot(s, v) : [], T = (e) => {
 		l(e), i();
 	}, E = a({
 		"--ci-sheet-divider": g?.divider,
@@ -1620,16 +1620,16 @@ var kt = {
 			style: E,
 			children: [b && !x && /* @__PURE__ */ W(H, { children: [/* @__PURE__ */ U("div", {
 				className: "flex-shrink-0 px-4 py-[10px]",
-				children: /* @__PURE__ */ U(v, {
-					value: _,
+				children: /* @__PURE__ */ U(_, {
+					value: v,
 					placeholder: r,
-					size: C.Standard,
+					size: S.Standard,
 					onChange: y
 				})
-			}), /* @__PURE__ */ U("div", { className: o(kt.divider, "h-px flex-shrink-0") })] }), x ? /* @__PURE__ */ U(it, { loadingLabel: u }) : S ? /* @__PURE__ */ U("div", {
+			}), /* @__PURE__ */ U("div", { className: o(kt.divider, "h-px flex-shrink-0") })] }), x ? /* @__PURE__ */ U(it, { loadingLabel: u }) : C ? /* @__PURE__ */ U("div", {
 				role: "list",
 				className: o(kt.stateLabel, h, "px-4 py-4"),
-				children: S
+				children: C
 			}) : /* @__PURE__ */ U(Ot, {
 				role: "list",
 				className: "overflow-y-auto",
@@ -1641,14 +1641,14 @@ var kt = {
 					items: w,
 					selectedDeploymentId: c,
 					labelClassName: h,
-					query: _,
+					query: v,
 					onSelect: T
 				}
 			})]
 		})
 	});
 }, Pt = ({ deployments: e, selectedDeploymentId: t, onDeploymentChange: n, modelSelectorLabels: r, isStreaming: i, isMobile: a, isInputDisabled: s = !1, isDisabled: c = !1, style: l, modelPickerOverlay: d, isPickerOpen: m, onPickerToggle: h, onPickerOpenChange: g }) => {
-	let [_, v] = V(!1), { selectorIcon: y, selectorAriaLabel: b, selectedLabel: x, menuItems: T, menuHeader: E, onOpenChange: D } = lt({
+	let [_, v] = V(!1), { selectorIcon: y, selectorAriaLabel: b, selectedLabel: w, menuItems: T, menuHeader: E, onOpenChange: D } = lt({
 		deployments: e,
 		selectedDeploymentId: t,
 		onDeploymentChange: n,
@@ -1660,9 +1660,9 @@ var kt = {
 		className: Y.modelSelectorCaret,
 		"aria-hidden": !0
 	});
-	return a ? /* @__PURE__ */ W(H, { children: [/* @__PURE__ */ U(S, {
-		tooltip: x,
-		children: /* @__PURE__ */ U(w, {
+	return a ? /* @__PURE__ */ W(H, { children: [/* @__PURE__ */ U(x, {
+		tooltip: w,
+		children: /* @__PURE__ */ U(C, {
 			icon: /* @__PURE__ */ W("div", {
 				className: "flex items-center gap-1",
 				children: [y, k]
@@ -1702,8 +1702,8 @@ var kt = {
 		outsideClosable: !0,
 		renderOverlay: () => d(() => g?.(!1)),
 		listClassName: "cp-dropdown-overlay !w-[320px]",
-		children: /* @__PURE__ */ U(S, {
-			tooltip: x,
+		children: /* @__PURE__ */ U(x, {
+			tooltip: w,
 			children: /* @__PURE__ */ W("button", {
 				type: "button",
 				"aria-label": b,
@@ -1717,8 +1717,8 @@ var kt = {
 	}) : /* @__PURE__ */ U("div", {
 		className: o(c && O),
 		"aria-disabled": c || void 0,
-		children: /* @__PURE__ */ U(S, {
-			tooltip: x,
+		children: /* @__PURE__ */ U(x, {
+			tooltip: w,
 			children: /* @__PURE__ */ U(p, {
 				icon: y,
 				ariaLabel: b,
@@ -1728,7 +1728,7 @@ var kt = {
 				matchReferenceWidth: !1,
 				listClassName: "cp-dropdown-overlay !w-[240px] !max-h-80",
 				onOpenChange: c ? void 0 : D,
-				size: C.Standard,
+				size: S.Standard,
 				caretIcon: k,
 				iconClassName: s || c ? O : void 0,
 				buttonClassName: o("bg-transparent", Y.modelSelectorButton, (s || c) && O && Y.modelSelectorButtonDisabled)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-conversation-input",
   "description": "Conversation message input with model selection, attachments, voice input, and edit mode",
-  "version": "1.1.0-dev.124",
+  "version": "1.1.0-dev.126",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -17,8 +17,8 @@
     }
   },
   "peerDependencies": {
-    "@epam/ai-dial-attachment-input": "1.1.0-dev.124",
-    "@epam/ai-dial-chat-shared": "1.1.0-dev.124",
+    "@epam/ai-dial-attachment-input": "1.1.0-dev.126",
+    "@epam/ai-dial-chat-shared": "1.1.0-dev.126",
     "@tabler/icons-react": "^3.44.0",
     "react": "^19.0.0",
     "react-dom": "^19.2.6",