@gravity-ui/aikit 1.3.4 → 1.4.0

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

@@ -9,11 +9,11 @@ import { UserMessage } from '../UserMessage';
 import { ErrorAlert } from './ErrorAlert';
 import './MessageList.scss';
 const b = block('message-list');
-export function MessageList({ messages, messageRendererRegistry, transformOptions, shouldParseIncompleteMarkdown, showActionsOnHover, showTimestamp, showAvatar, userActions, assistantActions, loaderStatuses = ['submitted'], className, qa, status, errorMessage, onRetry, hasPreviousMessages = false, onLoadPreviousMessages, }) {
-    const isStreaming = status === 'streaming';
+export function MessageList({ messages, messageRendererRegistry, transformOptions, shouldParseIncompleteMarkdown, showActionsOnHover, showTimestamp, showAvatar, userActions, assistantActions, loaderStatuses = ['submitted', 'streaming_loading'], className, qa, status, errorMessage, onRetry, hasPreviousMessages = false, onLoadPreviousMessages, }) {
+    const isStreaming = status === 'streaming' || status === 'streaming_loading';
     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/usePromptInput.js

@@ -16,6 +16,7 @@ export function usePromptInput(props) {
     // ChatStatus.ready → submitButtonState.enabled
     // ChatStatus.error → submitButtonState.enabled
     // ChatStatus.streaming → submitButtonState.cancelable
+    // ChatStatus.streaming_loading → submitButtonState.cancelable (same as streaming)
     // ChatStatus.submitted → submitButtonState.loading
     let submitButtonState = 'disabled';
     // disabled by props or empty value and status is ready
@@ -32,6 +33,7 @@ export function usePromptInput(props) {
                 submitButtonState = 'enabled';
                 break;
             case 'streaming':
+            case 'streaming_loading':
                 submitButtonState = onCancel ? 'cancelable' : 'enabled';
                 break;
             case 'submitted':

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

@@ -359,9 +359,16 @@ export const WithStreaming = {
                     actions: createMessageActions(assistantMessageId, 'assistant'),
                 },
             ]);
-            // Simulate word-by-word streaming
+            // Simulate word-by-word streaming with a streaming_loading pause in the middle
             const words = fullResponse.split(' ');
+            const pauseIndex = Math.floor(words.length / 2);
             for (let i = 0; i < words.length; i++) {
+                // Pause streaming at the midpoint: switch to streaming_loading for 5 seconds
+                if (i === pauseIndex) {
+                    setStatus('streaming_loading');
+                    await new Promise((resolve) => setTimeout(resolve, 5000));
+                    setStatus('streaming');
+                }
                 await new Promise((resolve) => setTimeout(resolve, 100));
                 const currentText = words.slice(0, i + 1).join(' ');
                 setMessages((prev) => prev.map((msg) => msg.id === assistantMessageId
@@ -747,7 +754,10 @@ export const FullStreamingExample = {
         const [controller, setController] = useState(null);
         const isProcessingRef = React.useRef(false);
         const handleSendMessage = async (data) => {
-            if (isProcessingRef.current || status === 'streaming' || status === 'submitted') {
+            if (isProcessingRef.current ||
+                status === 'streaming' ||
+                status === 'streaming_loading' ||
+                status === 'submitted') {
                 return;
             }
             isProcessingRef.current = true;
@@ -949,6 +959,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/dist/types/chat.d.ts

@@ -5,7 +5,7 @@ export type ChatType = {
     lastMessage?: string;
     metadata?: Record<string, unknown>;
 };
-export type ChatStatus = 'submitted' | 'streaming' | 'ready' | 'error';
+export type ChatStatus = 'submitted' | 'streaming' | 'streaming_loading' | 'ready' | 'error';
 /**
  * List item type for chat history that can be either a chat or a date header
  */

package/package.json

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