@epam/ai-dial-chat-hooks 1.1.0-dev.194

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useConversationScroll/useConversationScroll';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,+CAA+C,CAAC"}

package/index.js

@@ -0,0 +1,122 @@
+import { useCallback as e, useEffect as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
+//#region src/useConversationScroll/useConversationScroll.ts
+var a = 80, o = 1, s = ({ messages: s, isAssistantTyping: c, conversationId: l }) => {
+	let [u, d] = i(!1), f = r(null), p = r(null), m = r(null), h = r(!1), g = r(!1), _ = r(null), v = r(/* @__PURE__ */ new Map()), y = e((e, t) => {
+		t ? v.current.set(e, t) : v.current.delete(e);
+	}, []), b = r(null), x = e((e) => {
+		b.current = e;
+	}, []), S = e((e, t) => {
+		let n = f.current;
+		n && n.scrollTo({
+			top: e,
+			behavior: t ? "instant" : "smooth"
+		});
+	}, []), C = e(() => {
+		m.current && (m.current.style.height = "0px"), h.current = !1, g.current = !1, _.current = null;
+	}, []), w = e(() => {
+		let e = f.current, t = p.current;
+		if (!e || !t) return null;
+		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+		return e.scrollTop + (r.bottom - n.top) - e.clientHeight;
+	}, []), T = e((e = !1) => {
+		let t = w();
+		t != null && S(Math.max(t, 0), e);
+	}, [S, w]), E = e(() => {
+		let e = f.current, t = p.current;
+		if (!e || !t) return null;
+		let n = e.getBoundingClientRect();
+		return t.getBoundingClientRect().bottom - n.top - e.clientHeight;
+	}, []), D = e(() => {
+		if (!g.current) return;
+		let e = E();
+		e == null || e < -1 || C();
+	}, [C, E]), O = e((e) => {
+		let t = f.current, n = v.current.get(e);
+		if (!t || !n) return null;
+		let r = t.getBoundingClientRect(), i = n.getBoundingClientRect(), a = t.scrollTop + (i.top - r.top);
+		return Math.max(a, 0);
+	}, []), k = e((e, t = !1) => {
+		let n = O(e);
+		n != null && S(n, t);
+	}, [O, S]), A = e(() => {
+		let e = w();
+		return e == null ? null : Math.max(e, 0);
+	}, [w]), j = e(() => {
+		if (!h.current) return null;
+		let e = _.current, t = A();
+		return e == null || t == null ? null : Math.max(e, t);
+	}, [A]), M = e(() => {
+		let e = f.current, t = j();
+		!e || t == null || e.scrollTop > t + o && (e.scrollTop = t);
+	}, [j]), N = e((e) => {
+		let t = m.current, n = A();
+		if (!t || n == null) return;
+		let r = Math.max(e - n, 0);
+		t.style.height = `${r}px`, h.current = r > 0, g.current = !1, _.current = r > 0 ? e : null;
+	}, [A]), P = e((e) => {
+		let t = O(e);
+		t != null && (N(t), k(e, !1));
+	}, [
+		N,
+		O,
+		k
+	]), F = e(() => {
+		let e = E();
+		e != null && d(e >= a);
+	}, [E]), I = r(s.length), L = r(null);
+	n(() => {
+		let e = s.length !== I.current, t = l !== L.current, n = () => {
+			I.current = s.length, L.current = l;
+		};
+		t && C();
+		let r = b.current;
+		if (r != null && v.current.has(r)) {
+			b.current = null, P(r), n();
+			return;
+		}
+		c || ((e || t) && T(!1), n());
+	}, [
+		s,
+		c,
+		l,
+		T,
+		P,
+		C
+	]), n(() => {
+		!c && h.current && (g.current = !0, D());
+	}, [c, D]);
+	let R = e(() => {
+		M(), D(), F();
+	}, [
+		M,
+		D,
+		F
+	]);
+	return t(() => {
+		let e = f.current;
+		if (e) return e.addEventListener("scroll", R, { passive: !0 }), () => e.removeEventListener("scroll", R);
+	}, [R]), t(() => {
+		let e = p.current;
+		if (!e) return;
+		let t = new ResizeObserver(() => {
+			M(), D(), F();
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [
+		M,
+		D,
+		F
+	]), {
+		containerRef: f,
+		contentRef: p,
+		spacerRef: m,
+		setMessageRef: y,
+		isScrollButtonVisible: u,
+		scrollToBottom: e(() => {
+			T(!1);
+		}, [T]),
+		armAnchor: x
+	};
+};
+//#endregion
+export { s as useConversationScroll };

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@epam/ai-dial-chat-hooks",
+  "description": "Framework-level React hooks extracted from AI DIAL Chat for building custom chat interfaces",
+  "version": "1.1.0-dev.194",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.2.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/epam/ai-dial-chat.git",
+    "directory": "libs/ai-dial-chat-hooks"
+  }
+}

package/useConversationScroll/useConversationScroll.d.ts

@@ -0,0 +1,46 @@
+import { RefObject } from 'react';
+/** Parameters for {@link useConversationScroll}. `T` is never read — only `messages.length` is used to detect growth/reset. */
+export interface UseConversationScrollParams<T> {
+    /** Messages currently rendered in the list. */
+    messages: T[];
+    /** Whether an assistant response is currently streaming in. */
+    isAssistantTyping: boolean;
+    /** Identifier of the conversation being displayed. */
+    conversationId: string;
+}
+/** Return value of {@link useConversationScroll}. */
+export interface UseConversationScrollResult {
+    /** Attach to the scrollable message-list element. */
+    containerRef: RefObject<HTMLDivElement | null>;
+    /** Attach to the element wrapping all rendered messages (used to detect content growth). */
+    contentRef: RefObject<HTMLDivElement | null>;
+    /**
+     * Attach to a spacer element, a sibling rendered right after `contentRef`
+     * inside `containerRef`. Its height is set imperatively, not via React
+     * state. Render it with `shrink-0` and an initial `style={{ height: 0 }}`.
+     */
+    spacerRef: RefObject<HTMLDivElement | null>;
+    /** Callback ref to register/unregister a rendered message's DOM node by index. */
+    setMessageRef: (index: number, el: HTMLDivElement | null) => void;
+    /** Whether the scroll-to-bottom button should be shown. */
+    isScrollButtonVisible: boolean;
+    /** Smoothly scrolls to the current bottom of the actual message content. */
+    scrollToBottom: () => void;
+    /**
+     * Arms the message at `index` to be scrolled near the top of the viewport
+     * on the next render — call right before triggering a send, regenerate,
+     * or edit-and-resubmit so the resulting message anchors near the top.
+     */
+    armAnchor: (index: number) => void;
+}
+/**
+ * Owns chat-list scrolling: anchors a new turn near the viewport top, keeps
+ * the position stable while the response streams, and reports whether the
+ * scroll-to-bottom button should be shown.
+ *
+ * The temporary spacer is technical scroll room, not user-visible content:
+ * it is sized to the minimum required to make the anchor reachable and manual
+ * scrolling is clamped before the user can move past the real message content.
+ */
+export declare const useConversationScroll: <T>({ messages, isAssistantTyping, conversationId, }: UseConversationScrollParams<T>) => UseConversationScrollResult;
+//# sourceMappingURL=useConversationScroll.d.ts.map

package/useConversationScroll/useConversationScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConversationScroll.d.ts","sourceRoot":"","sources":["../../src/useConversationScroll/useConversationScroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,+HAA+H;AAC/H,MAAM,WAAW,2BAA2B,CAAC,CAAC;IAC5C,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,+DAA+D;IAC/D,iBAAiB,EAAE,OAAO,CAAC;IAC3B,sDAAsD;IACtD,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,qDAAqD;AACrD,MAAM,WAAW,2BAA2B;IAC1C,qDAAqD;IACrD,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC/C,4FAA4F;IAC5F,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C;;;;OAIG;IACH,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,kFAAkF;IAClF,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAClE,2DAA2D;IAC3D,qBAAqB,EAAE,OAAO,CAAC;IAC/B,4EAA4E;IAC5E,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B;;;;OAIG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,GAAI,CAAC,EAAE,kDAItC,2BAA2B,CAAC,CAAC,CAAC,KAAG,2BAySnC,CAAC"}