@epam/ai-dial-conversation-input 1.2.0-rc.0 → 1.3.0-dev.5

package/components/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAalE,wIAAwI;AACxI,eAAO,MAAM,KAAK,oGAquCjB,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAalE,wIAAwI;AACxI,eAAO,MAAM,KAAK,oGAqvCjB,CAAC"}

package/hooks/useMentionSelectionMirror.d.ts

@@ -16,6 +16,8 @@ interface UseMentionSelectionMirrorResult {
     selectionRects: DOMRect[];
     /** Recomputes `selectionRects` from the textarea's current native selection. */
     updateSelectionRects: () => void;
+    /** Copies the textarea's vertical scroll offset and scrollbar gutter onto the mirror; wire it to the textarea's `onScroll`. */
+    syncMirrorToTextarea: () => void;
 }
 export declare const useMentionSelectionMirror: ({ textareaRef, message, isMirrorActive, }: UseMentionSelectionMirrorParams) => UseMentionSelectionMirrorResult;
 export {};

package/hooks/useMentionSelectionMirror.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMentionSelectionMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useMentionSelectionMirror.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,wDAAwD;AACxD,UAAU,+BAA+B;IACvC,6EAA6E;IAC7E,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACnD,mEAAmE;IACnE,OAAO,EAAE,MAAM,CAAC;IAChB,gGAAgG;IAChG,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,yDAAyD;AACzD,UAAU,+BAA+B;IACvC,qDAAqD;IACrD,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,kFAAkF;IAClF,cAAc,EAAE,OAAO,EAAE,CAAC;IAC1B,gFAAgF;IAChF,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAmBD,eAAO,MAAM,yBAAyB,GAAI,2CAIvC,+BAA+B,KAAG,+BA6DpC,CAAC"}
+{"version":3,"file":"useMentionSelectionMirror.d.ts","sourceRoot":"","sources":["../../src/hooks/useMentionSelectionMirror.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,wDAAwD;AACxD,UAAU,+BAA+B;IACvC,6EAA6E;IAC7E,WAAW,EAAE,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACnD,mEAAmE;IACnE,OAAO,EAAE,MAAM,CAAC;IAChB,gGAAgG;IAChG,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,yDAAyD;AACzD,UAAU,+BAA+B;IACvC,qDAAqD;IACrD,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,kFAAkF;IAClF,cAAc,EAAE,OAAO,EAAE,CAAC;IAC1B,gFAAgF;IAChF,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,+HAA+H;IAC/H,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAmBD,eAAO,MAAM,yBAAyB,GAAI,2CAIvC,+BAA+B,KAAG,+BAwGpC,CAAC"}

package/index.js

@@ -372,6 +372,11 @@ var H = {
 	return a.setStart(r.node, r.offset), a.setEnd(i.node, i.offset), a;
 }, He = ({ textareaRef: e, message: t, isMirrorActive: n }) => {
 	let r = B(null), [i, a] = V([]), o = L(() => {
+		let t = e.current, n = r.current;
+		if (t == null || n == null) return;
+		let i = t.offsetWidth > t.clientWidth;
+		n.style.scrollbarGutter = i ? "stable" : "", n.scrollTop = t.scrollTop;
+	}, [e]), s = L(() => {
 		let t = e.current, i = r.current, o = t?.selectionStart, s = t?.selectionEnd;
 		if (!n || t == null || i == null || o == null || s == null || o === s) {
 			a((e) => e.length === 0 ? e : []);
@@ -383,24 +388,33 @@ var H = {
 			return;
 		}
 		let l = i.getBoundingClientRect();
-		a(Array.from(c.getClientRects()).map((e) => new DOMRect(e.left - l.left, e.top - l.top, e.width, e.height)));
+		a(Array.from(c.getClientRects()).map((e) => new DOMRect(e.left - l.left, e.top - l.top + i.scrollTop, e.width, e.height)));
 	}, [n, e]);
 	return De(() => {
-		o();
-	}, [o, t]), R(() => {
+		n && o(), s();
+	}, [
+		n,
+		o,
+		s,
+		t
+	]), R(() => {
 		if (!n) return;
 		let t = e.current;
 		if (t == null || typeof ResizeObserver > "u") return;
-		let r = new ResizeObserver(o);
+		let r = new ResizeObserver(() => {
+			o(), s();
+		});
 		return r.observe(t), () => r.disconnect();
 	}, [
 		n,
 		e,
-		o
+		o,
+		s
 	]), {
 		mirrorRef: r,
 		selectionRects: i,
-		updateSelectionRects: o
+		updateSelectionRects: s,
+		syncMirrorToTextarea: o
 	};
 }, Ue = ({ messageProp: e, messageRevision: t }) => {
 	let [n, r] = V(e), i = B(null);
@@ -2111,13 +2125,7 @@ var Kt = {
 			top: n.top - r.top
 		});
 	}, []);
-	De(() => {
-		dn();
-	}, [
-		dn,
-		on,
-		Y
-	]), R(() => {
+	R(() => {
 		if (on == null) return;
 		let e = Z.current;
 		if (e == null || typeof ResizeObserver > "u") return;
@@ -2290,11 +2298,19 @@ var Kt = {
 		an,
 		G,
 		nn
-	]), Qn = It || Zn.length > 0, { mirrorRef: $n, selectionRects: er, updateSelectionRects: tr } = He({
+	]), Qn = It || Zn.length > 0, { mirrorRef: $n, selectionRects: er, updateSelectionRects: tr, syncMirrorToTextarea: nr } = He({
 		textareaRef: Z,
 		message: Y,
 		isMirrorActive: Qn
-	}), nr = /* @__PURE__ */ P("textarea", {
+	});
+	De(() => {
+		dn();
+	}, [
+		dn,
+		on,
+		Y
+	]);
+	let rr = /* @__PURE__ */ P("textarea", {
 		className: l(K.textarea, Qn && K.textareaMentionMode, I?.fontClassName || "dial-body-paragraph-text", "relative z-0 max-h-[272px] w-full resize-none overflow-y-auto border-0 bg-transparent pe-1 ps-1 outline-none [field-sizing:content]", "disabled:cursor-not-allowed"),
 		ref: Z,
 		autoFocus: mt,
@@ -2305,6 +2321,9 @@ var Kt = {
 			Wt(e.target.value, e.target.selectionStart ?? e.target.value.length, t?.isComposing ?? !1), u?.(e.target.value);
 		},
 		onSelect: tr,
+		onScroll: () => {
+			nr(), on != null && dn();
+		},
 		onFocus: $t,
 		onClick: Qt,
 		onKeyDown: Yn,
@@ -2319,7 +2338,7 @@ var Kt = {
 		disabled: W,
 		readOnly: $,
 		rows: 1
-	}), rr = G == null ? nr : /* @__PURE__ */ F(N, { children: [nr, /* @__PURE__ */ P("div", {
+	}), ir = G == null ? rr : /* @__PURE__ */ F(N, { children: [rr, /* @__PURE__ */ P("div", {
 		"aria-hidden": !0,
 		className: l("pointer-events-none absolute", I?.fontClassName || "dial-body-paragraph-text"),
 		style: {
@@ -2353,7 +2372,7 @@ var Kt = {
 				className: "inline-block h-[1lh] w-0"
 			})
 		})
-	})] }), ir = /* @__PURE__ */ F("div", {
+	})] }), ar = /* @__PURE__ */ F("div", {
 		ref: cn,
 		className: "relative -me-1 -ms-1 w-[calc(100%+8px)]",
 		children: [Qn && /* @__PURE__ */ F("div", {
@@ -2369,8 +2388,8 @@ var Kt = {
 					height: e.height
 				}
 			}, `selection-${t}`))]
-		}), rr]
-	}), ar = Te ? void 0 : /* @__PURE__ */ P(pt, {
+		}), ir]
+	}), or = Te ? void 0 : /* @__PURE__ */ P(pt, {
 		onAttachClick: Oe ? void 0 : () => Nn.current?.click(),
 		attachLabel: y,
 		addMenuTitle: C,
@@ -2388,10 +2407,10 @@ var Kt = {
 		toolsBackLabel: st,
 		menuOverlays: lt,
 		getCaretPosition: () => Z.current?.selectionStart ?? Y.length
-	}), or = ke === tt.Inline && (!Mt || je), sr = ar && /* @__PURE__ */ P("div", {
+	}), sr = ke === tt.Inline && (!Mt || je), cr = or && /* @__PURE__ */ P("div", {
 		className: l("flex", H.addCluster),
-		children: ar
-	}), cr = Hn.length > 0 && it != null && /* @__PURE__ */ P("div", {
+		children: or
+	}), lr = Hn.length > 0 && it != null && /* @__PURE__ */ P("div", {
 		className: l("min-w-0 flex-1", H.toolsChips),
 		children: /* @__PURE__ */ P(ht, {
 			items: Hn,
@@ -2451,26 +2470,26 @@ var Kt = {
 				analyserNodeRef: On,
 				onStop: jn,
 				onDiscard: Mn,
-				attachButton: ar,
+				attachButton: or,
 				stopLabel: ae,
 				discardLabel: oe,
 				processingLabel: Ge
 			}),
-			!$ && U && ir,
-			!$ && !U && or && cr && /* @__PURE__ */ P("div", {
+			!$ && U && ar,
+			!$ && !U && sr && lr && /* @__PURE__ */ P("div", {
 				className: "flex",
-				children: cr
+				children: lr
 			}),
 			!$ && !U && /* @__PURE__ */ F("div", {
-				className: l("flex items-center gap-2", or ? "flex-nowrap" : "flex-wrap", H.actionRow),
+				className: l("flex items-center gap-2", sr ? "flex-nowrap" : "flex-wrap", H.actionRow),
 				children: [
-					or && sr,
+					sr && cr,
 					/* @__PURE__ */ P("div", {
-						className: l("flex min-w-0 items-center self-stretch", or ? "flex-1" : "w-full", H.textareaWrap),
-						children: ir
+						className: l("flex min-w-0 items-center self-stretch", sr ? "flex-1" : "w-full", H.textareaWrap),
+						children: ar
 					}),
-					!or && sr,
-					!or && cr,
+					!sr && cr,
+					!sr && lr,
 					/* @__PURE__ */ P("div", {
 						className: l("ms-auto flex flex-shrink-0 items-center gap-2", H.footerActions),
 						children: Me ? Me({

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.2.0-rc.0",
+  "version": "1.3.0-dev.5",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -19,10 +19,10 @@
   "dependencies": {
     "react-window": "^2.2.7",
     "@tabler/icons-react": "^3.44.0",
-    "@epam/ai-dial-attachment-input": "1.2.0-rc.0"
+    "@epam/ai-dial-attachment-input": "1.3.0-dev.5"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.2.0-rc.0",
+    "@epam/ai-dial-chat-shared": "1.3.0-dev.5",
     "react": "^19.2.8",
     "@epam/ai-dial-ui-kit": "^0.15.0"
   },