@gravity-ui/aikit 1.3.3 → 1.3.5

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

@@ -13,7 +13,7 @@ export function MessageList({ messages, messageRendererRegistry, transformOption
     const isStreaming = status === 'streaming';
     const isSubmitted = status === 'submitted';
     const showLoader = status && loaderStatuses.includes(status);
-    const { containerRef, endRef } = useSmartScroll({
+    const { containerRef } = useSmartScroll({
         isStreaming: isStreaming || isSubmitted,
         messagesCount: messages.length,
         status,
@@ -38,5 +38,5 @@ export function MessageList({ messages, messageRendererRegistry, transformOption
         }
         return null;
     };
-    return (_jsxs("div", { ref: containerRef, className: b(null, className), "data-qa": qa, children: [hasPreviousMessages && (_jsx(IntersectionContainer, { onIntersect: onLoadPreviousMessages, className: b('load-trigger'), children: _jsx(Loader, { view: "loading" }) })), _jsx("div", { className: b('messages'), "data-qa": qa, children: messages.map(renderMessage) }), showLoader && _jsx(Loader, { className: b('loader') }), status === 'error' && (_jsx(ErrorAlert, { className: b('error-alert'), onRetry: onRetry, errorMessage: errorMessage })), _jsx("div", { ref: endRef })] }));
+    return (_jsxs("div", { ref: containerRef, className: b(null, className), "data-qa": qa, children: [hasPreviousMessages && (_jsx(IntersectionContainer, { onIntersect: onLoadPreviousMessages, className: b('load-trigger'), children: _jsx(Loader, { view: "loading" }) })), _jsx("div", { className: b('messages'), "data-qa": qa, children: messages.map(renderMessage) }), showLoader && _jsx(Loader, { className: b('loader') }), status === 'error' && (_jsx(ErrorAlert, { className: b('error-alert'), onRetry: onRetry, errorMessage: errorMessage }))] }));
 }

package/dist/components/organisms/PromptInput/PromptInputWithSuggestions.js

@@ -10,7 +10,6 @@ const b = block('prompt-input');
  */
 export function PromptInputWithSuggestions(props) {
     const { children, suggestionsProps = {}, className, qa } = props;
-    const { showSuggestions = false, suggestions, suggestTitle, onSuggestionClick, suggestionsLayout, suggestionsTextAlign = 'center', } = suggestionsProps;
-    const hasSuggestions = showSuggestions && suggestions && suggestions.length > 0;
-    return (_jsxs("div", { className: b('suggestions-wrapper', className), "data-qa": qa, children: [hasSuggestions && (_jsx("div", { className: b('suggestions'), children: _jsx(Suggestions, { items: suggestions, onClick: onSuggestionClick || (() => { }), title: suggestTitle, layout: suggestionsLayout, textAlign: suggestionsTextAlign }) })), children] }));
+    const { showSuggestions = false, suggestions = [], suggestTitle, onSuggestionClick, suggestionsLayout, suggestionsTextAlign = 'center', } = suggestionsProps;
+    return (_jsxs("div", { className: b('suggestions-wrapper', className), "data-qa": qa, children: [showSuggestions && (_jsx("div", { className: b('suggestions'), children: _jsx(Suggestions, { items: suggestions, onClick: onSuggestionClick || (() => { }), title: suggestTitle, layout: suggestionsLayout, textAlign: suggestionsTextAlign }) })), children] }));
 }

package/dist/components/pages/ChatContainer/__stories__/ChatContainer.stories.d.ts

@@ -72,6 +72,12 @@ export declare const FullStreamingExample: Story;
  * and preview when the chat is empty (no messages)
  */
 export declare const HiddenTitleOnEmpty: Story;
+/**
+ * Embedded in page with tall content and streaming.
+ * Chat is placed in a sidebar; main content has large height and is scrollable.
+ * When long text streams in the chat, only the chat panel scrolls — the main page does not jump.
+ */
+export declare const EmbeddedInPageWithStreaming: Story;
 /**
  * With Additional Actions
  * Demonstrates passing additional actions to Header and custom actions to BaseMessage

package/dist/components/pages/ChatContainer/__stories__/ChatContainer.stories.js

@@ -949,6 +949,96 @@ const customAssistantActions = [
 const addCustomActionsToMessages = (messages) => {
     return messages.map((msg) => (Object.assign(Object.assign({}, msg), { actions: msg.role === 'user' ? customUserActions : customAssistantActions })));
 };
+/**
+ * Embedded in page with tall content and streaming.
+ * Chat is placed in a sidebar; main content has large height and is scrollable.
+ * When long text streams in the chat, only the chat panel scrolls — the main page does not jump.
+ */
+export const EmbeddedInPageWithStreaming = {
+    args: {
+        messages: [],
+        showActionsOnHover: true,
+        welcomeConfig: {
+            title: 'Sidebar Chat',
+            description: 'Send a message to see streaming. Only the chat area scrolls.',
+            suggestionTitle: 'Try:',
+            suggestions: [{ id: '1', title: 'Stream a long response' }],
+        },
+    },
+    render: (args) => {
+        const [messages, setMessages] = useState([]);
+        const [status, setStatus] = useState('ready');
+        const handleSendMessage = async (data) => {
+            const userMessageId = Date.now().toString();
+            const userMessage = {
+                id: userMessageId,
+                role: 'user',
+                content: data.content,
+                actions: createMessageActions(userMessageId, 'user'),
+            };
+            setMessages((prev) => [...prev, userMessage]);
+            setStatus('streaming');
+            const assistantMessageId = (Date.now() + 1).toString();
+            const fullResponse = [
+                'This is a simulated long streaming response. When the chat is embedded in an application,',
+                'the scroll logic must only scroll the chat container, not the main page.',
+                'Using containerRef.scrollTo({ top: scrollHeight, behavior }) ensures that only the message list',
+                'container scrolls to the bottom, so the main content stays in place and there is no jerking.',
+                '',
+                '**Before the fix**, scrollIntoView on the end element could scroll all scrollable ancestors',
+                '(including the document), which caused the whole page to jump during streaming.',
+                '',
+                '**After the fix**, we explicitly scroll only the container element that holds the messages.',
+                'The main content on the left can stay scrolled at any position while the chat streams.',
+                '',
+                'You can scroll the left column up or down and then send a message — only the chat panel',
+                'will scroll to show the new content.',
+            ].join('\n\n');
+            setMessages((prev) => [
+                ...prev,
+                {
+                    id: assistantMessageId,
+                    role: 'assistant',
+                    content: '',
+                    actions: createMessageActions(assistantMessageId, 'assistant'),
+                },
+            ]);
+            const words = fullResponse.split(' ');
+            for (let i = 0; i < words.length; i++) {
+                await new Promise((resolve) => setTimeout(resolve, 80));
+                const currentText = words.slice(0, i + 1).join(' ');
+                setMessages((prev) => prev.map((msg) => msg.id === assistantMessageId ? Object.assign(Object.assign({}, msg), { content: currentText }) : msg));
+            }
+            setStatus('ready');
+        };
+        const handleCancel = async () => {
+            setStatus('ready');
+        };
+        const tallContent = Array.from({ length: 30 }, (_, i) => (_jsxs("p", { children: ["Main application content paragraph ", i + 1, ". This area has large height so the page is scrollable. When the chat on the right streams a long response, only the chat container should scroll \u2014 this column must not move."] }, i)));
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                minHeight: '100vh',
+            }, children: [_jsxs("div", { style: {
+                        flex: 1,
+                        minWidth: 0,
+                        padding: 24,
+                        borderRight: '1px solid var(--g-color-line-generic, #e5e5e5)',
+                    }, children: [_jsx("h2", { style: { marginTop: 0 }, children: "Main content (tall, scrollable)" }), tallContent] }), _jsx("div", { style: {
+                        width: 420,
+                        flexShrink: 0,
+                        position: 'sticky',
+                        top: 0,
+                        alignSelf: 'flex-start',
+                        height: '100vh',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        minHeight: 0,
+                    }, children: _jsx(ChatContainer, Object.assign({}, args, { messages: messages, onSendMessage: handleSendMessage, onCancel: handleCancel, status: status })) })] }));
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { minHeight: '100vh', overflow: 'visible' }, children: _jsx(Story, {}) })),
+    ],
+};
 /**
  * With Additional Actions
  * Demonstrates passing additional actions to Header and custom actions to BaseMessage

package/dist/hooks/useSmartScroll.d.ts

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

package/dist/hooks/useSmartScroll.js

@@ -2,13 +2,15 @@ import { useCallback, useEffect, useRef } from 'react';
 const SCROLL_THRESHOLD = 10;
 export function useSmartScroll({ isStreaming = false, messagesCount, status, }) {
     const containerRef = useRef(null);
-    const endRef = useRef(null);
     const userScrolledUpRef = useRef(false);
     const scrollToBottom = useCallback((behavior = 'instant') => {
         if (!userScrolledUpRef.current) {
-            const end = endRef.current;
-            if (end) {
-                end.scrollIntoView({ behavior, block: 'end' });
+            const container = containerRef.current;
+            if (container) {
+                container.scrollTo({
+                    top: container.scrollHeight,
+                    behavior,
+                });
             }
         }
     }, []);
@@ -66,7 +68,6 @@ export function useSmartScroll({ isStreaming = false, messagesCount, status, })
     }, [messagesCount]);
     return {
         containerRef,
-        endRef,
         scrollToBottom,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/aikit",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "Gravity UI base kit for building ai assistant chats",
   "license": "MIT",
   "main": "./dist/index.js",