@gravity-ui/aikit 0.0.1 → 0.1.1

package/dist/package.json

@@ -1,12 +1,23 @@
 {
     "name": "@gravity-ui/aikit",
-    "version": "0.0.1",
-    "description": "",
+    "version": "0.1.1",
+    "description": "Gravity UI base kit for building ai assistant chats",
     "license": "MIT",
     "main": "dist/index.js",
+    "types": "dist/index.d.ts",
     "files": [
         "dist"
     ],
+    "engines": {
+        "node": ">= 20",
+        "npm": ">= 9",
+        "yarn": "Please use npm instead of yarn to install dependencies",
+        "pnpm": "Please use npm instead of pnpm to install dependencies"
+    },
+    "sideEffects": [
+        "*.css",
+        "*.scss"
+    ],
     "repository": {
         "type": "git",
         "url": "git+https://github.com/gravity-ui/aikit.git"
@@ -26,10 +37,11 @@
         "lint:styles:fix": "stylelint **/*.scss --fix",
         "lint:prettier": "prettier --check '**/*.{js,jsx,ts,tsx,css,scss,json,yaml,yml,md,mdx}'",
         "lint:prettier:fix": "prettier --write '**/*.{js,jsx,ts,tsx,css,scss,json,yaml,yml,md,mdx}'",
-        "test": "jest --passWithNoTests",
+        "test": "npm run test:unit",
         "build": "tsc",
         "start": "TS_NODE_PROJECT=.storybook/tsconfig.json storybook dev",
         "prepublishOnly": "npm run build",
+        "test:unit": "jest --passWithNoTests",
         "playwright:install": "playwright install chromium webkit --with-deps",
         "playwright": "playwright test --config=playwright-ct.config.ts",
         "playwright:update": "npm run playwright -- -u all",

package/dist/src/components/atoms/ActionButton/ActionButton.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { ActionTooltip, Button } from '@gravity-ui/uikit';

package/dist/src/components/organisms/MessageList/ErrorAlert.d.ts

@@ -2,5 +2,6 @@ import { AlertProps } from '../../atoms/Alert';
 export type ErrorAlertProps = {
     onRetry?: () => void;
     errorMessage?: AlertProps;
+    className?: string;
 };
-export declare function ErrorAlert({ onRetry, errorMessage }: ErrorAlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorAlert({ onRetry, errorMessage, className }: ErrorAlertProps): import("react/jsx-runtime").JSX.Element;

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

@@ -5,11 +5,11 @@ import { block } from '../../../utils/cn';
 import { Alert } from '../../atoms/Alert';
 import { i18n } from './i18n';
 const b = block('message-list');
-export function ErrorAlert({ onRetry, errorMessage }) {
+export function ErrorAlert({ onRetry, errorMessage, className }) {
     return (_jsx(Alert, Object.assign({ text: i18n('default-error-text'), variant: "warning", button: onRetry
             ? {
                 content: (_jsxs("div", { className: b('retry-button'), children: [_jsx(Icon, { data: ArrowRotateLeft, size: 14 }), i18n('retry-button')] })),
                 onClick: onRetry,
             }
-            : undefined }, errorMessage)));
+            : undefined, className: className }, errorMessage)));
 }

package/dist/src/components/organisms/MessageList/MessageList.d.ts

@@ -1,6 +1,7 @@
 import type { OptionsType } from '@diplodoc/transform/lib/typings';
 import { ChatStatus } from '../../../types';
-import type { TChatMessage, TMessageContent, TMessageMetadata } from '../../../types/messages';
+import type { TAssistantMessage, TChatMessage, TMessageContent, TMessageMetadata, TUserMessage } from '../../../types/messages';
+import { type DefaultMessageAction } from '../../../utils';
 import { type MessageRendererRegistry } from '../../../utils/messageTypeRegistry';
 import { AlertProps } from '../../atoms/Alert';
 import './MessageList.scss';
@@ -14,7 +15,9 @@ export type MessageListProps<TContent extends TMessageContent = never> = {
     showActionsOnHover?: boolean;
     showTimestamp?: boolean;
     showAvatar?: boolean;
+    userActions?: DefaultMessageAction<TUserMessage<TMessageMetadata>>[];
+    assistantActions?: DefaultMessageAction<TAssistantMessage<TContent, TMessageMetadata>>[];
     className?: string;
     qa?: string;
 };
-export declare function MessageList<TContent extends TMessageContent = never>({ messages, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, showAvatar, className, qa, status, errorMessage, onRetry, }: MessageListProps<TContent>): import("react/jsx-runtime").JSX.Element;
+export declare function MessageList<TContent extends TMessageContent = never>({ messages, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, showAvatar, userActions, assistantActions, className, qa, status, errorMessage, onRetry, }: MessageListProps<TContent>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isAssistantMessage, isUserMessage } from '../../../utils';
+import { useSmartScroll } from '../../../hooks';
+import { isAssistantMessage, isUserMessage, resolveMessageActions, } from '../../../utils';
 import { block } from '../../../utils/cn';
 import { Loader } from '../../atoms/Loader';
 import { AssistantMessage } from '../AssistantMessage';
@@ -7,15 +8,23 @@ import { UserMessage } from '../UserMessage';
 import { ErrorAlert } from './ErrorAlert';
 import './MessageList.scss';
 const b = block('message-list');
-export function MessageList({ messages, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, showAvatar, className, qa, status, errorMessage, onRetry, }) {
+export function MessageList({ messages, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, showAvatar, userActions, assistantActions, className, qa, status, errorMessage, onRetry, }) {
+    const isStreaming = status === 'streaming';
+    const messagesCount = messages.length;
+    const { containerRef, endRef } = useSmartScroll(isStreaming, messagesCount);
     const renderMessage = (message, index) => {
         if (isUserMessage(message)) {
-            return (_jsx(UserMessage, { content: message.content, actions: message.actions, timestamp: message.timestamp, format: message.format, avatarUrl: message.avatarUrl, transformOptions: transformOptions, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp, showAvatar: showAvatar }, message.id || `message-${index}`));
+            const actions = resolveMessageActions(message, userActions);
+            return (_jsx(UserMessage, { content: message.content, actions: actions, timestamp: message.timestamp, format: message.format, avatarUrl: message.avatarUrl, transformOptions: transformOptions, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp, showAvatar: showAvatar }, message.id || `message-${index}`));
         }
         if (isAssistantMessage(message)) {
-            return (_jsx(AssistantMessage, { content: message.content, actions: message.actions, timestamp: message.timestamp, id: message.id, messageRendererRegistry: messageRendererRegistry, transformOptions: transformOptions, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp }, message.id || `message-${index}`));
+            const showActions = message.status === 'complete';
+            const actions = showActions
+                ? resolveMessageActions(message, assistantActions)
+                : undefined;
+            return (_jsx(AssistantMessage, { content: message.content, actions: actions, timestamp: message.timestamp, id: message.id, messageRendererRegistry: messageRendererRegistry, transformOptions: transformOptions, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp }, message.id || `message-${index}`));
         }
         return null;
     };
-    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [_jsx("div", { className: b('messages', className), "data-qa": qa, children: messages.map(renderMessage) }), status === 'submitted' && _jsx(Loader, {}), status === 'error' && _jsx(ErrorAlert, { onRetry: onRetry, errorMessage: errorMessage })] }));
+    return (_jsxs("div", { ref: containerRef, className: b(null, className), "data-qa": qa, children: [_jsx("div", { className: b('messages', className), "data-qa": qa, children: messages.map(renderMessage) }), status === 'submitted' && _jsx(Loader, { className: b('loader') }), status === 'error' && (_jsx(ErrorAlert, { className: b('error-alert'), onRetry: onRetry, errorMessage: errorMessage })), _jsx("div", { ref: endRef })] }));
 }

package/dist/src/components/organisms/MessageList/__stories__/MessageList.stories.d.ts

@@ -20,3 +20,5 @@ interface ChartMessageData {
 }
 type ChartMessageContent = TMessageContent<'chart', ChartMessageData>;
 export declare const WithCustomMessageType: StoryObj<MessageListProps<ChartMessageContent>>;
+export declare const WithStreamingMessage: StoryObj<MessageListProps>;
+export declare const WithDefaultActions: StoryObj<MessageListProps>;

package/dist/src/components/organisms/MessageList/__stories__/MessageList.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { Pencil } from '@gravity-ui/icons';
 import { Icon, Text } from '@gravity-ui/uikit';
 import { MessageList } from '..';
@@ -6,6 +7,7 @@ import { ContentWrapper } from '../../../../demo/ContentWrapper';
 import { Showcase } from '../../../../demo/Showcase';
 import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
 import { createMessageRendererRegistry, registerMessageRenderer, } from '../../../../utils/messageTypeRegistry';
+import { BaseMessageAction } from '../../../molecules/BaseMessage';
 import MDXDocs from './Docs.mdx';
 export default {
     title: 'organisms/MessageList',
@@ -166,3 +168,121 @@ export const WithCustomMessageType = {
     },
     decorators: defaultDecorators,
 };
+const streamingText = 'React Hooks are functions that let you use state and other React features without writing a class. ' +
+    'The most commonly used hooks are:\n\n' +
+    '1. **useState** - for managing component state\n' +
+    '2. **useEffect** - for side effects like data fetching or subscriptions\n' +
+    '3. **useContext** - for consuming context values\n' +
+    '4. **useCallback** - for memoizing functions\n' +
+    '5. **useMemo** - for memoizing computed values\n\n' +
+    'Each hook serves a specific purpose and helps you write cleaner, more maintainable React code. ' +
+    'Would you like examples of how to use any of these hooks?';
+export const WithStreamingMessage = {
+    render: (args) => {
+        const [streamedText, setStreamedText] = useState('');
+        const [isStreaming, setIsStreaming] = useState(true);
+        useEffect(() => {
+            setStreamedText('');
+            setIsStreaming(true);
+            const resultText = streamingText.repeat(10);
+            let currentIndex = 0;
+            const interval = setInterval(() => {
+                if (currentIndex < resultText.length) {
+                    const nextChunk = resultText.slice(0, currentIndex + 1);
+                    setStreamedText(nextChunk);
+                    currentIndex += Math.floor(Math.random() * 4) + 3;
+                }
+                else {
+                    setIsStreaming(false);
+                    clearInterval(interval);
+                }
+            }, 20);
+            return () => {
+                clearInterval(interval);
+            };
+        }, []);
+        const messages = [
+            {
+                id: 'user-1',
+                role: 'user',
+                timestamp: '2024-01-01T00:00:00Z',
+                content: 'Can you explain React Hooks to me?',
+            },
+            {
+                id: 'assistant-1',
+                role: 'assistant',
+                timestamp: '2024-01-01T00:00:01Z',
+                content: streamedText || ' ',
+            },
+        ];
+        return (_jsx(ShowcaseItem, { title: "With Streaming Message", children: _jsx(ContentWrapper, { width: "480px", height: "200px", display: "flex", children: _jsx(MessageList, Object.assign({}, args, { messages: messages, status: isStreaming ? 'streaming' : 'ready' })) }) }));
+    },
+    decorators: defaultDecorators,
+};
+export const WithDefaultActions = {
+    render: (args) => {
+        const userActions = [
+            {
+                type: BaseMessageAction.Edit,
+                onClick: (message) => {
+                    // eslint-disable-next-line no-console
+                    console.log('Edit user message:', message.id);
+                },
+            },
+            {
+                type: BaseMessageAction.Delete,
+                onClick: (message) => {
+                    // eslint-disable-next-line no-console
+                    console.log('Delete user message:', message.id);
+                },
+            },
+        ];
+        const assistantActions = [
+            {
+                type: BaseMessageAction.Copy,
+                onClick: (message) => {
+                    // eslint-disable-next-line no-console
+                    console.log('Copy assistant message:', message.id);
+                },
+            },
+            {
+                type: BaseMessageAction.Like,
+                onClick: (message) => {
+                    // eslint-disable-next-line no-console
+                    console.log('Like assistant message:', message.id);
+                },
+            },
+        ];
+        return (_jsx(ShowcaseItem, { title: "With Default Actions", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(MessageList, Object.assign({}, args, { messages: [
+                        {
+                            id: 'user-1',
+                            role: 'user',
+                            timestamp: '2024-01-01T00:00:00Z',
+                            content: 'Hello! This message has default actions.',
+                        },
+                        {
+                            id: 'assistant-1',
+                            role: 'assistant',
+                            timestamp: '2024-01-01T00:00:01Z',
+                            content: 'Hi! This message also has default actions.',
+                            status: 'complete',
+                        },
+                        {
+                            id: 'user-2',
+                            role: 'user',
+                            timestamp: '2024-01-01T00:00:02Z',
+                            content: 'This message has custom actions.',
+                            actions: [
+                                {
+                                    type: 'custom',
+                                    onClick: () => {
+                                        // eslint-disable-next-line no-console
+                                        console.log('Custom action clicked');
+                                    },
+                                },
+                            ],
+                        },
+                    ], userActions: userActions, assistantActions: assistantActions })) }) }));
+    },
+    decorators: defaultDecorators,
+};

package/dist/src/components/organisms/ThinkingMessage/index.js

@@ -1,15 +1,5 @@
 'use client';
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp, Copy } from '@gravity-ui/icons';
 import { Button, Icon, Text } from '@gravity-ui/uikit';

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

@@ -79,24 +79,28 @@ const mockChatMessages = {
             role: 'user',
             content: 'What is quantum computing?',
             timestamp: new Date(Date.now() - 1000 * 60 * 60).toISOString(),
+            status: 'complete',
         },
         {
             id: '1-2',
             role: 'assistant',
             content: 'Quantum computing is a revolutionary approach to computation that leverages the principles of quantum mechanics. Unlike classical computers that use bits (0 or 1), quantum computers use quantum bits or "qubits" that can exist in multiple states simultaneously through a phenomenon called superposition.\n\nKey concepts include:\n1. **Superposition**: Qubits can be in multiple states at once\n2. **Entanglement**: Qubits can be correlated in ways that classical bits cannot\n3. **Quantum Interference**: Used to amplify correct answers and cancel out wrong ones',
             timestamp: new Date(Date.now() - 1000 * 60 * 59).toISOString(),
+            status: 'complete',
         },
         {
             id: '1-3',
             role: 'user',
             content: 'Can you explain quantum entanglement in simple terms?',
             timestamp: new Date(Date.now() - 1000 * 60 * 58).toISOString(),
+            status: 'complete',
         },
         {
             id: '1-4',
             role: 'assistant',
             content: 'Quantum entanglement is like having two magic coins that are mysteriously connected. When you flip one coin and it lands on heads, the other coin - no matter how far away - will instantly land on tails (or vice versa).\n\nIn quantum physics terms:\n- Two particles become "entangled" and share a quantum state\n- Measuring one particle instantly affects the other\n- This happens regardless of the distance between them\n- Einstein called it "spooky action at a distance"\n\nThis phenomenon is fundamental to quantum computing and quantum communication technologies.',
             timestamp: new Date(Date.now() - 1000 * 60 * 57).toISOString(),
+            status: 'complete',
         },
     ],
     '2': [
@@ -105,24 +109,28 @@ const mockChatMessages = {
             role: 'user',
             content: 'Write a poem about autumn leaves',
             timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
+            status: 'complete',
         },
         {
             id: '2-2',
             role: 'assistant',
             content: "Golden whispers fall from trees,\nDancing softly on the breeze,\nCrimsons, ambers, russet bright,\nPainting pathways with their light.\n\nNature's canvas, rich and warm,\nBefore the coming winter storm,\nEach leaf a story, each one told,\nOf seasons passing, growing old.",
             timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24 + 60000).toISOString(),
+            status: 'complete',
         },
         {
             id: '2-3',
             role: 'user',
             content: 'That was beautiful! Can you write one about winter snow?',
             timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24 + 120000).toISOString(),
+            status: 'complete',
         },
         {
             id: '2-4',
             role: 'assistant',
             content: "Snowflakes drift from silent skies,\nBlankets white before our eyes,\nCrystal diamonds, soft and pure,\nWinter's gentle signature.\n\nFrosted windows, frozen streams,\nLandscapes wrapped in silver dreams,\nQuiet peace in cold embrace,\nNature sleeps in gentle grace.",
             timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24 + 180000).toISOString(),
+            status: 'complete',
         },
     ],
     '3': [
@@ -131,24 +139,28 @@ const mockChatMessages = {
             role: 'user',
             content: "I have a bug in my async function. It's not waiting for the promise to resolve.",
             timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24 * 2).toISOString(),
+            status: 'complete',
         },
         {
             id: '3-2',
             role: 'assistant',
             content: "Let's debug this step by step. The most common issues with async/await are:\n\n1. **Missing await keyword**: Make sure you're using `await` before the promise\n2. **Function not marked as async**: The function must be declared with `async` keyword\n3. **Promise not being returned**: Ensure the function returns a promise\n\nCan you share your code? Here's a common pattern:\n\n```javascript\nasync function fetchData() {\n  const result = await fetch('/api/data');\n  const data = await result.json();\n  return data;\n}\n```",
             timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24 * 2 + 60000).toISOString(),
+            status: 'complete',
         },
         {
             id: '3-3',
             role: 'user',
             content: 'Oh! I forgot to mark the parent function as async. That was the issue. Thanks!',
             timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24 * 2 + 120000).toISOString(),
+            status: 'complete',
         },
         {
             id: '3-4',
             role: 'assistant',
             content: "Great! That's a very common mistake. Remember: to use `await`, the containing function must be `async`. Also, if you're using `await` in a callback (like in `.map()` or `.forEach()`), make sure to make the callback function async too. Happy coding!",
             timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24 * 2 + 180000).toISOString(),
+            status: 'complete',
         },
     ],
     '4': [
@@ -157,12 +169,14 @@ const mockChatMessages = {
             role: 'user',
             content: 'What are the latest developments in AI?',
             timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3).toISOString(),
+            status: 'complete',
         },
         {
             id: '4-2',
             role: 'assistant',
             content: 'Recent AI developments include:\n\n**Large Language Models**\n- More efficient training methods\n- Better reasoning capabilities\n- Multimodal models (text, image, audio)\n\n**Computer Vision**\n- Improved object detection and segmentation\n- Real-time video analysis\n- 3D reconstruction from 2D images\n\n**AI Safety**\n- Constitutional AI and alignment research\n- Better interpretability tools\n- Red-teaming and safety testing\n\n**Edge AI**\n- Running models on mobile devices\n- Reduced latency for real-time applications\n- Privacy-preserving local inference',
             timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3 + 60000).toISOString(),
+            status: 'complete',
         },
     ],
 };
@@ -235,6 +249,7 @@ export const Playground = {
                 role: 'user',
                 content: data.content,
                 timestamp: new Date().toISOString(),
+                status: 'complete',
                 actions: createMessageActions(Date.now().toString(), 'user'),
             };
             setMessages((prev) => [...prev, userMessage]);
@@ -247,6 +262,7 @@ export const Playground = {
                 role: 'assistant',
                 content: `This is a mock response to: "${data.content}". In a real application, this would be a streamed response from an AI model.`,
                 timestamp: new Date().toISOString(),
+                status: 'complete',
                 actions: createMessageActions(assistantMessageId, 'assistant'),
             };
             setMessages((prev) => [...prev, assistantMessage]);
@@ -287,6 +303,7 @@ export const EmptyState = {
                 id: Date.now().toString(),
                 role: 'user',
                 content: data.content,
+                status: 'complete',
             };
             setMessages((prev) => [...prev, userMessage]);
         };
@@ -312,6 +329,7 @@ export const WithMessages = {
                 id: userMessageId,
                 role: 'user',
                 content: data.content,
+                status: 'complete',
                 actions: createMessageActions(userMessageId, 'user'),
             };
             setMessages((prev) => [...prev, userMessage]);
@@ -337,6 +355,7 @@ export const WithStreaming = {
                 id: userMessageId,
                 role: 'user',
                 content: data.content,
+                status: 'complete',
                 actions: createMessageActions(userMessageId, 'user'),
             };
             setMessages((prev) => [...prev, userMessage]);
@@ -351,6 +370,7 @@ export const WithStreaming = {
                     id: assistantMessageId,
                     role: 'assistant',
                     content: '',
+                    status: 'streaming',
                     actions: createMessageActions(assistantMessageId, 'assistant'),
                 },
             ]);
@@ -359,7 +379,9 @@ export const WithStreaming = {
             for (let i = 0; i < words.length; i++) {
                 await new Promise((resolve) => setTimeout(resolve, 100));
                 const currentText = words.slice(0, i + 1).join(' ');
-                setMessages((prev) => prev.map((msg) => msg.id === assistantMessageId ? Object.assign(Object.assign({}, msg), { content: currentText }) : msg));
+                const isLast = i === words.length - 1;
+                setMessages((prev) => prev.map((msg) => msg.id === assistantMessageId
+                    ? Object.assign(Object.assign({}, msg), { content: currentText, status: isLast ? 'complete' : 'streaming' }) : msg));
             }
             setStatus('ready');
         };
@@ -391,6 +413,7 @@ export const WithHistory = {
                 id: userMessageId,
                 role: 'user',
                 content: data.content,
+                status: 'complete',
                 actions: createMessageActions(userMessageId, 'user'),
             };
             setMessages((prev) => [...prev, userMessage]);
@@ -455,6 +478,7 @@ export const WithI18nConfig = {
                 id: Date.now().toString(),
                 role: 'user',
                 content: data.content,
+                status: 'complete',
             };
             setMessages((prev) => [...prev, userMessage]);
         };
@@ -486,6 +510,7 @@ export const WithComponentPropsOverride = {
                 id: Date.now().toString(),
                 role: 'user',
                 content: data.content,
+                status: 'complete',
             };
             setMessages((prev) => [...prev, userMessage]);
         };
@@ -515,6 +540,7 @@ export const WithContextItems = {
                 id: Date.now().toString(),
                 role: 'user',
                 content: data.content,
+                status: 'complete',
             };
             setMessages((prev) => [...prev, userMessage]);
         };
@@ -553,6 +579,7 @@ export const WithContextItemsAndIndicator = {
                 id: Date.now().toString(),
                 role: 'user',
                 content: data.content,
+                status: 'complete',
             };
             setMessages((prev) => [...prev, userMessage]);
         };
@@ -595,6 +622,7 @@ export const ErrorState = {
                 id: userMessageId,
                 role: 'user',
                 content: data.content,
+                status: 'complete',
                 actions: createMessageActions(userMessageId, 'user'),
             };
             setMessages((prev) => [...prev, userMessage]);
@@ -636,11 +664,12 @@ export const FullStreamingExample = {
                 role: 'user',
                 content: data.content,
                 timestamp: new Date().toISOString(),
+                status: 'complete',
                 actions: createMessageActions(userMessageId, 'user'),
             };
             setMessages((prev) => [...prev, userMessage]);
-            // Start streaming
-            setStatus('streaming');
+            // Show submitted state first
+            setStatus('submitted');
             const abortController = new AbortController();
             setController(abortController);
             try {
@@ -654,14 +683,19 @@ export const FullStreamingExample = {
                 // Simulate streaming for demo
                 const assistantMessageId = (Date.now() + 1).toString();
                 const fullResponse = `This is a detailed response to your question: "${data.content}"\n\nIn a production environment, this text would be streamed from an AI model in real-time. The streaming provides several benefits:\n\n1. **Better User Experience**: Users see the response as it's being generated\n2. **Lower Perceived Latency**: The wait feels shorter when content appears incrementally\n3. **Ability to Cancel**: Users can stop generation if they have enough information\n4. **Resource Efficiency**: Responses can be processed as they arrive\n\nThe implementation would use Server-Sent Events (SSE) or streaming fetch API to receive chunks of text from the backend, updating the message content in real-time.`;
+                // Wait a bit before starting streaming
+                await new Promise((resolve) => setTimeout(resolve, 500));
+                // Start streaming
+                setStatus('streaming');
                 // Create empty assistant message
                 setMessages((prev) => [
                     ...prev,
                     {
                         id: assistantMessageId,
                         role: 'assistant',
-                        content: '',
+                        content: ' ',
                         timestamp: new Date().toISOString(),
+                        status: 'streaming',
                         actions: createMessageActions(assistantMessageId, 'assistant'),
                     },
                 ]);
@@ -673,7 +707,9 @@ export const FullStreamingExample = {
                     }
                     await new Promise((resolve) => setTimeout(resolve, 50));
                     const currentText = words.slice(0, i + 1).join(' ');
-                    setMessages((prev) => prev.map((msg) => msg.id === assistantMessageId ? Object.assign(Object.assign({}, msg), { content: currentText }) : msg));
+                    const isLast = i === words.length - 1;
+                    setMessages((prev) => prev.map((msg) => msg.id === assistantMessageId
+                        ? Object.assign(Object.assign({}, msg), { content: currentText, status: isLast ? 'complete' : 'streaming' }) : msg));
                 }
             }
             catch (error) {

package/dist/src/components/templates/ChatContent/__stories__/ChatContent.stories.js

@@ -52,6 +52,7 @@ const sampleMessages = [
         role: 'user',
         content: 'Hello! Can you help me with React?',
         timestamp: '2024-01-01T12:00:00Z',
+        status: 'complete',
         actions: sampleActions,
     },
     {
@@ -59,6 +60,7 @@ const sampleMessages = [
         role: 'assistant',
         content: 'Of course! I would be happy to help you with React. What would you like to know?',
         timestamp: '2024-01-01T12:00:05Z',
+        status: 'complete',
         actions: sampleActions,
     },
     {
@@ -66,6 +68,7 @@ const sampleMessages = [
         role: 'user',
         content: 'How do I use hooks?',
         timestamp: '2024-01-01T12:01:00Z',
+        status: 'complete',
         actions: sampleActions,
     },
     {
@@ -73,6 +76,7 @@ const sampleMessages = [
         role: 'assistant',
         content: 'React Hooks are functions that let you use state and other React features without writing a class. The most commonly used hooks are:\n\n1. **useState** - for managing component state\n2. **useEffect** - for side effects\n3. **useContext** - for consuming context\n\nWould you like examples of how to use any of these?',
         timestamp: '2024-01-01T12:01:10Z',
+        status: 'complete',
         actions: sampleActions,
     },
 ];
@@ -169,6 +173,7 @@ export const WithManyMessages = {
                     role: 'user',
                     content: 'Can you show me an example?',
                     timestamp: '2024-01-01T12:02:00Z',
+                    status: 'complete',
                     actions: sampleActions,
                 },
                 {
@@ -193,6 +198,7 @@ function Counter() {
 
 This component maintains a count state and updates it when the button is clicked.`,
                     timestamp: '2024-01-01T12:02:05Z',
+                    status: 'complete',
                     actions: sampleActions,
                 },
             ],
@@ -212,6 +218,7 @@ export const Interactive = {
                 role: 'user',
                 content,
                 timestamp: new Date().toISOString(),
+                status: 'complete',
             };
             setMessages([userMessage]);
             setView('chat');
@@ -222,6 +229,7 @@ export const Interactive = {
                     role: 'assistant',
                     content: `I received your message: "${content}". How can I help you further?`,
                     timestamp: new Date().toISOString(),
+                    status: 'complete',
                 };
                 setMessages((prev) => [...prev, assistantMessage]);
             }, 1000);
@@ -250,6 +258,7 @@ export const LongConversation = {
                     role: 'user',
                     content: 'Can you show me an example?',
                     timestamp: '2024-01-01T12:02:00Z',
+                    status: 'complete',
                     actions: sampleActions,
                 },
                 {
@@ -274,6 +283,7 @@ function Counter() {
 
 This component maintains a count state and updates it when the button is clicked.`,
                     timestamp: '2024-01-01T12:02:05Z',
+                    status: 'complete',
                     actions: sampleActions,
                 },
                 {
@@ -281,6 +291,7 @@ This component maintains a count state and updates it when the button is clicked
                     role: 'user',
                     content: 'What about useEffect?',
                     timestamp: '2024-01-01T12:03:00Z',
+                    status: 'complete',
                     actions: sampleActions,
                 },
                 {
@@ -304,6 +315,7 @@ function DataFetcher() {
 }
 \`\`\``,
                     timestamp: '2024-01-01T12:03:10Z',
+                    status: 'complete',
                     actions: sampleActions,
                 },
             ],

package/dist/src/components/templates/History/__stories__/History.stories.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { ClockArrowRotateLeft } from '@gravity-ui/icons';

package/dist/src/demo/ContentWrapper/ContentWrapper.d.ts

@@ -1,7 +1,4 @@
 import './ContentWrapper.scss';
-type Props = React.PropsWithChildren<{
-    width?: string;
-    height?: string;
-}>;
-export declare function ContentWrapper({ children, width, height }: Props): import("react/jsx-runtime").JSX.Element;
+type Props = React.PropsWithChildren<React.CSSProperties>;
+export declare function ContentWrapper(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/demo/ContentWrapper/ContentWrapper.js

@@ -1,7 +1,9 @@
+import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../utils/cn';
 import './ContentWrapper.scss';
 const b = cn('content-wrapper');
-export function ContentWrapper({ children, width, height }) {
-    return (_jsx("div", { className: b(), style: { width, height }, children: children }));
+export function ContentWrapper(props) {
+    const { children } = props, style = __rest(props, ["children"]);
+    return (_jsx("div", { className: b(), style: style, children: children }));
 }

package/dist/src/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useDateFormatter';
 export * from './useToolMessage';
+export * from './useSmartScroll';

package/dist/src/hooks/index.js

@@ -1,2 +1,3 @@
 export * from './useDateFormatter';
 export * from './useToolMessage';
+export * from './useSmartScroll';

package/dist/src/hooks/useSmartScroll.d.ts

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

package/dist/src/hooks/useSmartScroll.js

@@ -0,0 +1,70 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+const SCROLL_THRESHOLD = 10;
+export function useSmartScroll(isStreaming = false, messagesCount = 0) {
+    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 scrollToBottom = useCallback((behavior = 'instant') => {
+        if (!userScrolledUp) {
+            const end = endRef.current;
+            if (end) {
+                end.scrollIntoView({ behavior, block: 'end' });
+            }
+        }
+    }, [userScrolledUp]);
+    // Handle user scroll events
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return undefined;
+        }
+        const handleScroll = () => {
+            const scrolledUp = checkIfUserScrolledUp();
+            setUserScrolledUp(scrolledUp);
+        };
+        container.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            container.removeEventListener('scroll', handleScroll);
+        };
+    }, [checkIfUserScrolledUp]);
+    // Handle DOM mutations during streaming
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || !isStreaming) {
+            return undefined;
+        }
+        const observer = new MutationObserver(() => {
+            scrollToBottom('instant');
+        });
+        observer.observe(container, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            characterData: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [isStreaming, scrollToBottom]);
+    // Handle new messages
+    useEffect(() => {
+        if (messagesCount > prevMessagesCount.current) {
+            scrollToBottom('smooth');
+        }
+        prevMessagesCount.current = messagesCount;
+    }, [messagesCount, scrollToBottom]);
+    return {
+        containerRef,
+        endRef,
+        scrollToBottom,
+    };
+}

package/dist/src/utils/messageUtils.d.ts

@@ -1,4 +1,15 @@
+import type { IconData } from '@gravity-ui/uikit';
 import type { TAssistantMessage, TChatMessage, TMessageContent, TMessageContentUnion, TMessageMetadata, TUserMessage } from '../types';
 export declare function isUserMessage<Metadata = TMessageMetadata, TCustomMessageContent extends TMessageContent = never>(message: TChatMessage<TCustomMessageContent, Metadata>): message is TUserMessage<Metadata>;
 export declare function isAssistantMessage<Metadata = TMessageMetadata, TCustomMessageContent extends TMessageContent = never>(message: TChatMessage<TCustomMessageContent, Metadata>): message is TAssistantMessage<TCustomMessageContent, Metadata>;
 export declare function normalizeContent<TCustomMessageContent extends TMessageContent = never>(content: TAssistantMessage<TCustomMessageContent, TMessageMetadata>['content']): TMessageContentUnion<TCustomMessageContent>[];
+export type DefaultMessageAction<TMessage> = {
+    type: string;
+    onClick: (message: TMessage) => void;
+    icon?: IconData;
+};
+export declare function resolveMessageActions<TMessage extends TChatMessage<TMessageContent, TMessageMetadata>>(message: TMessage, defaultActions?: DefaultMessageAction<TMessage>[]): Array<{
+    type: string;
+    onClick: () => void;
+    icon?: IconData;
+}> | undefined;

package/dist/src/utils/messageUtils.js

@@ -23,3 +23,12 @@ export function normalizeContent(content) {
     }
     return [content];
 }
+export function resolveMessageActions(message, defaultActions) {
+    if (message.actions) {
+        return message.actions;
+    }
+    if (defaultActions) {
+        return defaultActions.map((action) => (Object.assign(Object.assign({}, action), { onClick: () => action.onClick(message) })));
+    }
+    return undefined;
+}

package/package.json

@@ -1,12 +1,23 @@
 {
   "name": "@gravity-ui/aikit",
-  "version": "0.0.1",
-  "description": "",
+  "version": "0.1.1",
+  "description": "Gravity UI base kit for building ai assistant chats",
   "license": "MIT",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
+  "engines": {
+    "node": ">= 20",
+    "npm": ">= 9",
+    "yarn": "Please use npm instead of yarn to install dependencies",
+    "pnpm": "Please use npm instead of pnpm to install dependencies"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gravity-ui/aikit.git"
@@ -26,10 +37,11 @@
     "lint:styles:fix": "stylelint **/*.scss --fix",
     "lint:prettier": "prettier --check '**/*.{js,jsx,ts,tsx,css,scss,json,yaml,yml,md,mdx}'",
     "lint:prettier:fix": "prettier --write '**/*.{js,jsx,ts,tsx,css,scss,json,yaml,yml,md,mdx}'",
-    "test": "jest --passWithNoTests",
+    "test": "npm run test:unit",
     "build": "tsc",
     "start": "TS_NODE_PROJECT=.storybook/tsconfig.json storybook dev",
     "prepublishOnly": "npm run build",
+    "test:unit": "jest --passWithNoTests",
     "playwright:install": "playwright install chromium webkit --with-deps",
     "playwright": "playwright test --config=playwright-ct.config.ts",
     "playwright:update": "npm run playwright -- -u all",