@gravity-ui/aikit 1.0.0 → 1.0.2

package/dist/components/organisms/MessageList/MessageList.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
 import { useScrollPreservation, useSmartScroll } from '../../../hooks';
 import { isAssistantMessage, isUserMessage, resolveMessageActions, } from '../../../utils';
 import { block } from '../../../utils/cn';
@@ -13,12 +12,12 @@ const b = block('message-list');
 export function MessageList({ messages, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, showAvatar, userActions, assistantActions, loaderStatuses = ['submitted'], className, qa, status, errorMessage, onRetry, hasPreviousMessages = false, onLoadPreviousMessages, }) {
     const isStreaming = status === 'streaming';
     const isSubmitted = status === 'submitted';
-    const messagesCount = messages.length;
     const showLoader = status && loaderStatuses.includes(status);
-    const { containerRef, endRef, scrollToBottom } = useSmartScroll(isStreaming, messagesCount);
-    useEffect(() => {
-        scrollToBottom();
-    }, []);
+    const { containerRef, endRef } = useSmartScroll({
+        isStreaming: isStreaming || isSubmitted,
+        messagesCount: messages.length,
+        status,
+    });
     // Preserve scroll position when older messages are loaded
     useScrollPreservation(containerRef, messages.length);
     const renderMessage = (message, index) => {

package/dist/hooks/useSmartScroll.d.ts

@@ -1,7 +1,12 @@
 import { type RefObject } from 'react';
+import type { ChatStatus } from '../types';
 export interface UseSmartScrollReturn<T extends HTMLElement> {
     containerRef: RefObject<T>;
     endRef: RefObject<T>;
-    scrollToBottom: () => void;
+    scrollToBottom: (behavior?: ScrollBehavior) => void;
 }
-export declare function useSmartScroll<T extends HTMLElement>(isStreaming?: boolean, messagesCount?: number): UseSmartScrollReturn<T>;
+export declare function useSmartScroll<T extends HTMLElement>({ isStreaming, messagesCount, status, }: {
+    isStreaming?: boolean;
+    messagesCount: number;
+    status?: ChatStatus;
+}): UseSmartScrollReturn<T>;

package/dist/hooks/useSmartScroll.js

@@ -1,26 +1,21 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 const SCROLL_THRESHOLD = 10;
-export function useSmartScroll(isStreaming = false, messagesCount = 0) {
+export function useSmartScroll({ isStreaming = false, messagesCount, status, }) {
     const containerRef = useRef(null);
     const endRef = useRef(null);
-    const [userScrolledUp, setUserScrolledUp] = useState(false);
-    const prevMessagesCount = useRef(messagesCount);
-    const checkIfUserScrolledUp = useCallback(() => {
-        const container = containerRef.current;
-        if (!container)
-            return false;
-        const { scrollTop, scrollHeight, clientHeight } = container;
-        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-        return distanceFromBottom > SCROLL_THRESHOLD;
-    }, []);
+    const userScrolledUpRef = useRef(false);
     const scrollToBottom = useCallback((behavior = 'instant') => {
-        if (!userScrolledUp) {
+        if (!userScrolledUpRef.current) {
             const end = endRef.current;
             if (end) {
                 end.scrollIntoView({ behavior, block: 'end' });
             }
         }
-    }, [userScrolledUp]);
+    }, []);
+    // Initial scroll to bottom
+    useEffect(() => {
+        scrollToBottom();
+    }, []);
     // Handle user scroll events
     useEffect(() => {
         const container = containerRef.current;
@@ -28,14 +23,19 @@ export function useSmartScroll(isStreaming = false, messagesCount = 0) {
             return undefined;
         }
         const handleScroll = () => {
-            const scrolledUp = checkIfUserScrolledUp();
-            setUserScrolledUp(scrolledUp);
+            if (!container) {
+                return;
+            }
+            const { scrollTop, scrollHeight, clientHeight } = container;
+            const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+            const scrolledUp = distanceFromBottom > SCROLL_THRESHOLD;
+            userScrolledUpRef.current = scrolledUp;
         };
         container.addEventListener('scroll', handleScroll, { passive: true });
         return () => {
             container.removeEventListener('scroll', handleScroll);
         };
-    }, [checkIfUserScrolledUp]);
+    }, []);
     // Handle DOM mutations during streaming
     useEffect(() => {
         const container = containerRef.current;
@@ -54,14 +54,16 @@ export function useSmartScroll(isStreaming = false, messagesCount = 0) {
         return () => {
             observer.disconnect();
         };
-    }, [isStreaming, scrollToBottom]);
-    // Handle new messages
+    }, [isStreaming]);
+    // Handle status changes
+    useEffect(() => {
+        scrollToBottom('smooth');
+    }, [status]);
     useEffect(() => {
-        if (messagesCount > prevMessagesCount.current) {
+        if (messagesCount) {
             scrollToBottom('smooth');
         }
-        prevMessagesCount.current = messagesCount;
-    }, [messagesCount, scrollToBottom]);
+    }, [messagesCount]);
     return {
         containerRef,
         endRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/aikit",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Gravity UI base kit for building ai assistant chats",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -118,8 +118,8 @@
     "typescript": "^5.4.2"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "@diplodoc/transform": "^4.63.3",
     "@gravity-ui/i18n": "^1.8.0",
     "@gravity-ui/icons": "^2.16.0",