@gravity-ui/aikit 0.2.1 → 0.3.0

package/README.md

@@ -1,5 +1,9 @@
 # @gravity-ui/aikit
 
+[![npm package](https://img.shields.io/npm/v/@gravity-ui/aikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/aikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/aikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/aikit/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/aikit/?path=/docs/pages-chatcontainer--docs)
+
+---
+
 UI component library for AI chats built with Atomic Design principles.
 
 ## Description

package/dist/components/atoms/ContextItem/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { QAProps } from '@gravity-ui/uikit';
 type ContextItemProps = QAProps & {
     content: React.ReactNode;
-    onClick: () => void;
+    onClick?: () => void;
     className?: string;
 };
 export declare const ContextItem: (props: ContextItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/ContextItem/index.js

@@ -4,5 +4,5 @@ import { block } from '../../../utils/cn';
 const b = block('context-item');
 export const ContextItem = (props) => {
     const { content, onClick, className, qa } = props;
-    return (_jsx(Label, { size: "s", theme: "clear", onCloseClick: onClick, type: "close", className: b(null, className), "data-qa": qa, children: content }));
+    return (_jsx(Label, Object.assign({ size: "s", theme: "clear" }, (onClick && { onCloseClick: onClick, type: 'close' }), { className: b(null, className), "data-qa": qa, children: content })));
 };

package/dist/components/atoms/IntersectionContainer/IntersectionContainer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './IntersectionContainer.scss';
+interface IIntersectionContainerProps {
+    children?: React.ReactNode;
+    onIntersect?: () => void;
+    options?: IntersectionObserverInit;
+    className?: string;
+}
+export declare const IntersectionContainer: ({ children, onIntersect, options, className, }: IIntersectionContainerProps) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/components/atoms/IntersectionContainer/IntersectionContainer.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useIntersection } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import './IntersectionContainer.scss';
+const b = block('intersection-container');
+export const IntersectionContainer = ({ children, onIntersect, options, className, }) => {
+    const [ref, setRef] = React.useState(null);
+    useIntersection({ element: ref, onIntersect, options });
+    if (onIntersect) {
+        return (_jsx("div", { className: b('container', className), ref: setRef, children: children }));
+    }
+    return children;
+};

package/dist/components/atoms/IntersectionContainer/IntersectionContainer.scss

@@ -0,0 +1,7 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}intersection-container';
+
+#{$block} {
+    width: 100%;
+}

package/dist/components/atoms/IntersectionContainer/index.d.ts

@@ -0,0 +1 @@
+export * from './IntersectionContainer';

package/dist/components/atoms/IntersectionContainer/index.js

@@ -0,0 +1 @@
+export * from './IntersectionContainer';

package/dist/components/atoms/Shimmer/Shimmer.scss

@@ -7,7 +7,8 @@ $block: '.#{variables.$ns}shimmer';
         position: relative;
         display: inline-block;
 
-        background: linear-gradient(
+        color: var(--g-aikit-text-primary, inherit);
+        mask-image: linear-gradient(
             90deg,
             var(--g-aikit-shimmer-color-from) 0%,
             var(--g-aikit-shimmer-color-from) 40%,
@@ -15,18 +16,17 @@ $block: '.#{variables.$ns}shimmer';
             var(--g-aikit-shimmer-color-from) 60%,
             var(--g-aikit-shimmer-color-from) 100%
         );
-        background-size: var(--g-aikit-shimmer-gradient-size) 100%;
-        background-clip: text;
-        -webkit-text-fill-color: transparent;
+        mask-size: var(--g-aikit-shimmer-gradient-size) 100%;
+        mask-clip: text;
         animation: shimmer var(--g-aikit-shimmer-duration) infinite linear;
     }
 }
 
 @keyframes shimmer {
     0% {
-        background-position: 200% 50%;
+        mask-position: 200% 50%;
     }
     100% {
-        background-position: 0% 50%;
+        mask-position: 0% 50%;
     }
 }

package/dist/components/atoms/index.d.ts

@@ -6,6 +6,7 @@ export * from './ContextItem';
 export * from './DiffStat';
 export * from './Disclaimer';
 export * from './InlineCitation';
+export * from './IntersectionContainer';
 export * from './Loader';
 export * from './MarkdownRenderer';
 export * from './MessageBalloon';

package/dist/components/atoms/index.js

@@ -7,6 +7,7 @@ export * from './ContextItem';
 export * from './DiffStat';
 export * from './Disclaimer';
 export * from './InlineCitation';
+export * from './IntersectionContainer';
 export * from './Loader';
 export * from './MarkdownRenderer';
 export * from './MessageBalloon';

package/dist/components/molecules/PromptInputHeader/PromptInputHeader.d.ts

@@ -10,7 +10,7 @@ export type ContextItemConfig = {
     /** Content to display in the context item */
     content: ReactNode;
     /** Callback when context item is removed */
-    onRemove: () => void;
+    onRemove?: () => void;
 };
 /**
  * Props for the PromptInputHeader component

package/dist/components/organisms/AssistantMessage/defaultMessageTypeRegistry.js

@@ -12,7 +12,7 @@ export function createDefaultMessageRegistry(transformOptions) {
         component: ({ part }) => _jsx(ToolMessage, Object.assign({}, part.data)),
     });
     registerMessageRenderer(registry, 'thinking', {
-        component: ({ part }) => _jsx(ThinkingMessage, { data: part.data }),
+        component: ({ part }) => _jsx(ThinkingMessage, Object.assign({}, part.data)),
     });
     return registry;
 }

package/dist/components/organisms/Header/Header.js

@@ -29,7 +29,7 @@ const FOLDING_ICONS = {
  * @returns Header component
  */
 export function Header(props) {
-    const { title, preview, icon, baseActions, additionalActions, titlePosition, className, historyButtonRef, } = useHeader(props);
+    const { title, preview, icon, baseActions, additionalActions, titlePosition, withIcon, className, historyButtonRef, } = useHeader(props);
     // Render base action
     const renderBaseAction = (action) => {
         let IconComponent = ACTION_ICONS[action.id];
@@ -61,5 +61,6 @@ export function Header(props) {
     };
     // Determine class for title positioning
     const titlePositionClass = b('title-container', { position: titlePosition });
-    return (_jsxs("div", { className: b('', className), children: [icon ? _jsx("div", { className: b('icon'), children: icon }) : _jsx(Icon, { data: Sparkles, size: 16 }), _jsxs("div", { className: titlePositionClass, children: [title && (_jsx(Text, { as: "div", variant: "subheader-2", className: b('title'), children: title })), preview && _jsx("div", { className: b('preview'), children: preview })] }), _jsxs(ButtonGroup, { children: [additionalActions.map((action, index) => renderAdditionalAction(action, index)), baseActions.map((action) => renderBaseAction(action))] })] }));
+    const iconElement = icon ? (_jsx("div", { className: b('icon'), children: icon })) : (_jsx(Icon, { data: Sparkles, size: 16 }));
+    return (_jsxs("div", { className: b('', className), children: [withIcon && iconElement, _jsxs("div", { className: titlePositionClass, children: [title && (_jsx(Text, { as: "div", variant: "subheader-2", className: b('title'), children: title })), preview && _jsx("div", { className: b('preview'), children: preview })] }), _jsxs(ButtonGroup, { children: [additionalActions.map((action, index) => renderAdditionalAction(action, index)), baseActions.map((action) => renderBaseAction(action))] })] }));
 }

package/dist/components/organisms/Header/types.d.ts

@@ -19,5 +19,6 @@ export type HeaderProps = {
     historyButtonRef?: React.RefObject<HTMLElement>;
     foldingState?: 'collapsed' | 'opened';
     titlePosition?: 'left' | 'center';
+    withIcon?: boolean;
     className?: string;
 };

package/dist/components/organisms/Header/useHeader.d.ts

@@ -16,6 +16,7 @@ export declare function useHeader(props: HeaderProps): {
     baseActions: ActionItem[];
     additionalActions: ActionItem[];
     titlePosition: 'left' | 'center';
+    withIcon: boolean;
     className?: string;
     historyButtonRef?: React.RefObject<HTMLElement>;
 };

package/dist/components/organisms/Header/useHeader.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { HeaderAction } from './types';
 export function useHeader(props) {
-    const { icon, title, preview, baseActions = [], handleNewChat, handleHistoryToggle, handleClose, handleFolding, foldingState = 'opened', additionalActions = [], titlePosition = 'left', className, historyButtonRef, } = props;
+    const { icon, title, preview, baseActions = [], handleNewChat, handleHistoryToggle, handleClose, handleFolding, foldingState = 'opened', additionalActions = [], titlePosition = 'left', withIcon = true, className, historyButtonRef, } = props;
     // Build base actions
     const baseActionsList = useMemo(() => {
         const actions = [];
@@ -65,6 +65,7 @@ export function useHeader(props) {
         baseActions: baseActionsList,
         additionalActions: additionalActionsList,
         titlePosition,
+        withIcon,
         className,
         historyButtonRef,
     };

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

@@ -17,7 +17,11 @@ export type MessageListProps<TContent extends TMessageContent = never> = {
     showAvatar?: boolean;
     userActions?: DefaultMessageAction<TUserMessage<TMessageMetadata>>[];
     assistantActions?: DefaultMessageAction<TAssistantMessage<TContent, TMessageMetadata>>[];
+    /** Array of chat statuses that should display the loader */
+    loaderStatuses?: ChatStatus[];
     className?: string;
     qa?: string;
+    hasPreviousMessages?: boolean;
+    onLoadPreviousMessages?: () => void;
 };
-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;
+export declare function MessageList<TContent extends TMessageContent = never>({ messages, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, showAvatar, userActions, assistantActions, loaderStatuses, className, qa, status, errorMessage, onRetry, hasPreviousMessages, onLoadPreviousMessages, }: MessageListProps<TContent>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,24 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSmartScroll } from '../../../hooks';
+import { useEffect } from 'react';
+import { useScrollPreservation, useSmartScroll } from '../../../hooks';
 import { isAssistantMessage, isUserMessage, resolveMessageActions, } from '../../../utils';
 import { block } from '../../../utils/cn';
+import { IntersectionContainer } from '../../atoms/IntersectionContainer';
 import { Loader } from '../../atoms/Loader';
 import { AssistantMessage } from '../AssistantMessage';
 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, userActions, assistantActions, className, qa, status, errorMessage, onRetry, }) {
+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 messagesCount = messages.length;
-    const { containerRef, endRef } = useSmartScroll(isStreaming, messagesCount);
+    const showLoader = status && loaderStatuses.includes(status);
+    const { containerRef, endRef, scrollToBottom } = useSmartScroll(isStreaming, messagesCount);
+    useEffect(() => {
+        scrollToBottom();
+    }, []);
+    // Preserve scroll position when older messages are loaded
+    useScrollPreservation(containerRef, messages.length);
     const renderMessage = (message, index) => {
         if (isUserMessage(message)) {
             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)) {
-            const showActions = message.status === 'complete';
+            const isLastMessage = index === messages.length - 1;
+            const showActions = !(isLastMessage && isStreaming);
             const actions = showActions
                 ? resolveMessageActions(message, assistantActions)
                 : undefined;
@@ -26,5 +35,5 @@ export function MessageList({ messages, messageRendererRegistry, transformOption
         }
         return null;
     };
-    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 })] }));
+    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 })] }));
 }

package/dist/components/organisms/MessageList/MessageList.scss

@@ -9,7 +9,6 @@ $block: '.#{variables.$ns}message-list';
     min-height: 0;
     flex: 1;
     align-self: stretch;
-    width: 100%;
 
     &__messages {
         display: flex;
@@ -27,4 +26,10 @@ $block: '.#{variables.$ns}message-list';
     &__error-alert {
         margin-top: var(--g-spacing-4);
     }
+
+    &__load-trigger {
+        display: flex;
+        justify-content: center;
+        padding: var(--g-spacing-2);
+    }
 }

package/dist/components/organisms/PromptInput/PromptInput.d.ts

@@ -11,6 +11,8 @@ export type PromptInputProps = {
     onSend: (data: TSubmitData) => Promise<void>;
     /** Callback when sending is cancelled */
     onCancel?: () => Promise<void>;
+    /** Initial value */
+    initialValue?: string;
     /** Disabled state */
     disabled?: boolean;
     /** Chat status to determine input behavior */

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

@@ -13,10 +13,11 @@ import './PromptInput.scss';
  * @returns React component
  */
 export function PromptInput(props) {
-    const { view = 'simple', onSend, onCancel, disabled = false, status = 'ready', maxLength, headerProps, bodyProps, footerProps, suggestionsProps, topPanel, bottomPanel, className, qa, } = props;
+    const { view = 'simple', onSend, onCancel, initialValue, disabled = false, status = 'ready', maxLength, headerProps, bodyProps, footerProps, suggestionsProps, topPanel, bottomPanel, className, qa, } = props;
     const hookState = usePromptInput({
         onSend,
         onCancel,
+        initialValue,
         disabled,
         status,
         maxLength,

package/dist/components/organisms/PromptInput/usePromptInput.d.ts

@@ -24,8 +24,6 @@ export type UsePromptInputReturn = {
     value: string;
     /** Set the input value */
     setValue: (value: string) => void;
-    /** Is currently sending */
-    isSending: boolean;
     /** Can submit the form */
     canSubmit: boolean;
     /** Submit button state */

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

@@ -8,21 +8,22 @@ import { useCallback, useState } from 'react';
 export function usePromptInput(props) {
     const { onSend, onCancel, initialValue = '', maxLength, disabled = false, status = 'ready', } = props;
     const [value, setValue] = useState(initialValue);
-    const [isSending, setIsSending] = useState(false);
     const [attachments, setAttachments] = useState([]);
+    const isSubmitted = status === 'submitted';
     const trimmedValue = value.trim();
-    const canSubmit = !disabled && !isSending && trimmedValue.length > 0;
+    const canSubmit = !disabled && !isSubmitted && trimmedValue.length > 0;
     // Map ChatStatus to submit button state
     // ChatStatus.ready → submitButtonState.enabled
     // ChatStatus.error → submitButtonState.enabled
     // ChatStatus.streaming → submitButtonState.cancelable
     // ChatStatus.submitted → submitButtonState.loading
     let submitButtonState = 'disabled';
-    if (disabled || !trimmedValue) {
+    // disabled by props or empty value and status is ready
+    if (disabled) {
         submitButtonState = 'disabled';
     }
-    else if (isSending) {
-        submitButtonState = 'loading';
+    else if (!trimmedValue && (status === 'ready' || status === 'error')) {
+        submitButtonState = 'disabled';
     }
     else {
         switch (status) {
@@ -56,16 +57,10 @@ export function usePromptInput(props) {
         if (!canSubmit) {
             return;
         }
-        setIsSending(true);
-        try {
-            const submitData = Object.assign({ content: trimmedValue }, (attachments.length > 0 && { attachments }));
-            await onSend(submitData);
-            setValue('');
-            setAttachments([]);
-        }
-        finally {
-            setIsSending(false);
-        }
+        const submitData = Object.assign({ content: trimmedValue }, (attachments.length > 0 && { attachments }));
+        onSend(submitData);
+        setValue('');
+        setAttachments([]);
     }, [submitButtonState, canSubmit, trimmedValue, attachments, onSend, onCancel]);
     const handleKeyDown = useCallback((event) => {
         const isEnter = event.code === 'Enter' || event.code === 'NumpadEnter';
@@ -89,7 +84,6 @@ export function usePromptInput(props) {
     return {
         value,
         setValue,
-        isSending,
         canSubmit,
         submitButtonState,
         isInputDisabled,

package/dist/components/organisms/ThinkingMessage/index.d.ts

@@ -1,18 +1,11 @@
 import { DOMProps, QAProps } from '@gravity-ui/uikit';
-import { ThinkingMessageData } from './useThinkingMessage';
+import type { ThinkingMessageContentData } from '../../../types/messages';
 import './ThinkingMessage.scss';
 /**
  * Props for the ThinkingMessage component.
  * Combines DOM props, QA props, and thinking message data.
  */
-export type ThinkingMessageProps = DOMProps & QAProps & ThinkingMessageData & {
-    /** Whether the thinking content should be expanded by default */
-    defaultExpanded?: boolean;
-    /** Whether to show the status indicator (loader) */
-    showStatusIndicator?: boolean;
-    /** Callback fired when the copy button is clicked */
-    onCopyClick?: () => void;
-};
+export type ThinkingMessageProps = DOMProps & QAProps & ThinkingMessageContentData;
 /**
  * ThinkingMessage component displays AI model's internal reasoning process.
  * Shows a collapsible block with thinking content and a copy button.

package/dist/components/organisms/ThinkingMessage/useThinkingMessage.d.ts

@@ -1,15 +1,5 @@
-import type { ThinkingMessageContent } from '../../../types/messages';
-import { BaseMessageAction } from '../../molecules/BaseMessage';
-export type ThinkingMessageData = Omit<ThinkingMessageContent, 'type'>;
-export type UseThinkingMessageOptions = ThinkingMessageData & {
-    defaultExpanded?: boolean;
-    showStatusIndicator?: boolean;
-};
-export type ThinkingMessageAction = {
-    type: BaseMessageAction | string;
-    onClick: () => void;
-};
-export declare function useThinkingMessage(options: UseThinkingMessageOptions): {
+import type { ThinkingMessageContentData } from '../../../types/messages';
+export declare function useThinkingMessage(options: ThinkingMessageContentData): {
     isExpanded: boolean;
     toggleExpanded: () => void;
     buttonTitle: string;

package/dist/components/organisms/ThinkingMessage/useThinkingMessage.js

@@ -1,8 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { i18n } from './i18n';
 export function useThinkingMessage(options) {
-    const { defaultExpanded = true, showStatusIndicator = true, data } = options;
-    const { status, content } = data;
+    const { defaultExpanded = true, showStatusIndicator = true, status, content } = options;
     const [isExpanded, setIsExpanded] = useState(defaultExpanded);
     const buttonTitle = useMemo(() => {
         return i18n(`title-${status}`);

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

@@ -19,7 +19,7 @@ const b = block('chat-container');
  */
 export function ChatContainer(props) {
     var _a, _b;
-    const { chats = [], messages = [], onSendMessage, onDeleteChat, onCancel, onRetry, status = 'ready', error = null, showActionsOnHover = false, contextItems = [], transformOptions, headerProps = {}, contentProps = {}, emptyContainerProps = {}, promptInputProps = {}, historyProps = {}, welcomeConfig, i18nConfig = {}, className, headerClassName, contentClassName, footerClassName, qa, } = props;
+    const { chats = [], messages = [], onSendMessage, onDeleteChat, onCancel, onRetry, status = 'ready', error = null, showActionsOnHover = false, contextItems = [], transformOptions, messageListConfig, headerProps = {}, contentProps = {}, emptyContainerProps = {}, promptInputProps = {}, historyProps = {}, welcomeConfig, i18nConfig = {}, className, headerClassName, contentClassName, footerClassName, qa, } = props;
     const hookState = useChatContainer(props);
     // Collect i18n texts with overrides
     const headerTitle = useMemo(() => {
@@ -46,7 +46,7 @@ export function ChatContainer(props) {
                 ((_b = i18nConfig.emptyState) === null || _b === void 0 ? void 0 : _b.description) ||
                 i18n('empty-state-description'), suggestionTitle: (welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.suggestionTitle) ||
                 ((_c = i18nConfig.emptyState) === null || _c === void 0 ? void 0 : _c.suggestionsTitle) ||
-                i18n('empty-state-suggestions-title'), suggestions: welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.suggestions, alignment: welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.alignment, wrapText: welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.wrapText, showMore: welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.showMore, showMoreText: (welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.showMoreText) ||
+                i18n('empty-state-suggestions-title'), suggestions: welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.suggestions, alignment: welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.alignment, layout: welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.layout, wrapText: welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.wrapText, showMore: welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.showMore, showMoreText: (welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.showMoreText) ||
                 ((_d = i18nConfig.emptyState) === null || _d === void 0 ? void 0 : _d.showMoreText) ||
                 i18n('empty-state-show-more'), onSuggestionClick: async (clickedTitle) => {
                 await onSendMessage({ content: clickedTitle });
@@ -60,7 +60,10 @@ export function ChatContainer(props) {
         onRetry,
         showActionsOnHover,
         transformOptions,
-    }), [messages, status, error, onRetry, showActionsOnHover, transformOptions]);
+        userActions: messageListConfig === null || messageListConfig === void 0 ? void 0 : messageListConfig.userActions,
+        assistantActions: messageListConfig === null || messageListConfig === void 0 ? void 0 : messageListConfig.assistantActions,
+        loaderStatuses: messageListConfig === null || messageListConfig === void 0 ? void 0 : messageListConfig.loaderStatuses,
+    }), [messages, status, error, onRetry, showActionsOnHover, transformOptions, messageListConfig]);
     // Build props for PromptInput
     const finalPromptInputProps = useMemo(() => {
         var _a, _b;

package/dist/components/pages/ChatContainer/ChatContainer.scss

@@ -32,11 +32,11 @@
         flex: 1 0 0;
     }
 
-    &__content--view-empty {
+    &__content_view_empty {
         background: var(--g-aikit-chat-container-content-empty-background);
     }
 
-    &__content--view-chat {
+    &__content_view_chat {
         background: var(--g-aikit-chat-container-content-chat-background);
     }
 
@@ -50,11 +50,11 @@
         background: var(--g-aikit-chat-container-footer-background);
     }
 
-    &__footer--view-empty {
+    &__footer_view_empty {
         background: var(--g-aikit-chat-container-footer-empty-background);
     }
 
-    &__footer--view-chat {
+    &__footer_view_chat {
         background: var(--g-aikit-chat-container-footer-chat-background);
     }
 }

package/dist/components/pages/ChatContainer/index.d.ts

@@ -1,2 +1,2 @@
 export { ChatContainer } from './ChatContainer';
-export type { ChatContainerProps, ChatContainerI18nConfig, WelcomeConfig } from './types';
+export type { ChatContainerProps, ChatContainerI18nConfig, WelcomeConfig, MessageListConfig, } from './types';

package/dist/components/pages/ChatContainer/types.d.ts

@@ -1,5 +1,6 @@
 import type { OptionsType } from '@diplodoc/transform/lib/typings';
-import type { ChatStatus, ChatType, TChatMessage, TSubmitData } from '../../../types';
+import type { ChatStatus, ChatType, TAssistantMessage, TChatMessage, TMessageContent, TMessageMetadata, TSubmitData, TUserMessage } from '../../../types';
+import type { DefaultMessageAction } from '../../../utils';
 import type { ContextItemConfig } from '../../molecules/PromptInputHeader';
 import type { SuggestionsItem } from '../../molecules/Suggestions';
 import type { HeaderProps } from '../../organisms/Header';
@@ -71,6 +72,8 @@ export interface WelcomeConfig {
     suggestions?: SuggestionsItem[];
     /** Alignment configuration for image, title, and description */
     alignment?: AlignmentConfig;
+    /** Layout orientation for suggestions: 'grid' for horizontal, 'list' for vertical */
+    layout?: 'grid' | 'list';
     /** Enable text wrapping inside suggestion buttons instead of ellipsis */
     wrapText?: boolean;
     /** Show more suggestions callback */
@@ -78,6 +81,17 @@ export interface WelcomeConfig {
     /** Show more button text */
     showMoreText?: string;
 }
+/**
+ * MessageList configuration
+ */
+export interface MessageListConfig {
+    /** Default actions for user messages */
+    userActions?: DefaultMessageAction<TUserMessage<TMessageMetadata>>[];
+    /** Default actions for assistant messages */
+    assistantActions?: DefaultMessageAction<TAssistantMessage<TMessageContent, TMessageMetadata>>[];
+    /** Array of chat statuses that should display the loader */
+    loaderStatuses?: ChatStatus[];
+}
 /**
  * Props for ChatContainer component
  */
@@ -114,6 +128,8 @@ export interface ChatContainerProps {
     contextItems?: ContextItemConfig[];
     /** Transform options for markdown rendering */
     transformOptions?: OptionsType;
+    /** MessageList configuration for actions and loader behavior */
+    messageListConfig?: MessageListConfig;
     /** Props override for Header component */
     headerProps?: Partial<Omit<HeaderProps, 'handleNewChat' | 'handleHistoryToggle' | 'handleClose'>>;
     /** Props override for ChatContent component */

package/dist/components/templates/ChatContent/ChatContent.js

@@ -15,5 +15,5 @@ export function ChatContent(props) {
     const isEmptyView = view === 'empty';
     return (_jsx("div", { className: b(null, className), "data-qa": qa, children: isEmptyView
             ? emptyContainerProps && _jsx(EmptyContainer, Object.assign({}, emptyContainerProps))
-            : messageListProps && (_jsx("div", { className: b('message-list-container'), children: _jsx(MessageList, Object.assign({}, messageListProps)) })) }));
+            : messageListProps && (_jsx("div", { className: b('message-list-container'), children: _jsx(MessageList, Object.assign({}, messageListProps, { className: b('message-list', messageListProps.className) })) })) }));
 }

package/dist/components/templates/ChatContent/ChatContent.scss

@@ -16,7 +16,6 @@ $block: '.#{variables.$ns}chat-content';
 
     &__message-list-container {
         display: flex;
-        padding: var(--g-spacing-2) var(--g-spacing-2) 0 var(--g-spacing-2);
         flex-direction: column;
         align-items: flex-start;
         gap: var(--g-spacing-4);
@@ -24,4 +23,8 @@ $block: '.#{variables.$ns}chat-content';
         flex: 1;
         min-height: 0;
     }
+
+    &__message-list {
+        padding: var(--g-spacing-2) var(--g-spacing-2) 0 var(--g-spacing-2);
+    }
 }

package/dist/components/templates/EmptyContainer/EmptyContainer.d.ts

@@ -38,6 +38,8 @@ export interface EmptyContainerProps {
     onSuggestionClick?: (content: string, id?: string) => void;
     /** Alignment configuration for image, title, and description */
     alignment?: AlignmentConfig;
+    /** Layout orientation for suggestions: 'grid' for horizontal, 'list' for vertical */
+    layout?: 'grid' | 'list';
     /** Enable text wrapping inside suggestion buttons instead of ellipsis */
     wrapText?: boolean;
     /** Callback for showing more suggestions */

package/dist/components/templates/EmptyContainer/EmptyContainer.js

@@ -14,7 +14,7 @@ const b = block('empty-container');
  * @returns React component
  */
 export function EmptyContainer(props) {
-    const { image, title, description, suggestionTitle, suggestions = [], onSuggestionClick, alignment, wrapText = false, showMore, showMoreText, className, qa, } = props;
+    const { image, title, description, suggestionTitle, suggestions = [], onSuggestionClick, alignment, layout = 'grid', wrapText = false, showMore, showMoreText, className, qa, } = props;
     const hasContent = title || description || (suggestions && suggestions.length > 0);
     // Define alignment for each element
     const imageAlignment = (alignment === null || alignment === void 0 ? void 0 : alignment.image) || 'left';
@@ -22,5 +22,5 @@ export function EmptyContainer(props) {
     const descriptionAlignment = (alignment === null || alignment === void 0 ? void 0 : alignment.description) || 'left';
     // Define text for "Show more" button with localization support
     const showMoreButtonText = showMoreText || i18n('show-more-button');
-    return (_jsx("div", { className: b(null, className), "data-qa": qa, children: _jsx("div", { className: b('content'), children: hasContent && (_jsxs(_Fragment, { children: [_jsxs("div", { className: b('welcome-section'), children: [image && (_jsx("div", { className: b('image-container', { align: imageAlignment }), children: image })), _jsxs("div", { className: b('text-container'), children: [title && (_jsx(Text, { variant: "header-2", className: b('title', { align: titleAlignment }), children: title })), description && (_jsx(Text, { variant: "body-2", color: "complementary", className: b('description', { align: descriptionAlignment }), children: description }))] })] }), suggestions && suggestions.length > 0 && onSuggestionClick && (_jsxs("div", { className: b('suggestions-section'), children: [suggestionTitle && (_jsx("div", { className: b('suggestions-title'), children: _jsx(Text, { variant: "subheader-3", color: "primary", children: suggestionTitle }) })), _jsx("div", { children: _jsx(Suggestions, { items: suggestions, onClick: onSuggestionClick, layout: "grid", wrapText: wrapText }) }), showMore && (_jsx("div", { className: b('show-more'), children: _jsxs(Button, { view: "flat-secondary", size: "l", onClick: showMore, className: b('show-more-button'), children: [_jsx(Button.Icon, { children: _jsx(ArrowRotateRight, {}) }), showMoreButtonText] }) }))] }))] })) }) }));
+    return (_jsx("div", { className: b(null, className), "data-qa": qa, children: _jsx("div", { className: b('content'), children: hasContent && (_jsxs(_Fragment, { children: [_jsxs("div", { className: b('welcome-section'), children: [image && (_jsx("div", { className: b('image-container', { align: imageAlignment }), children: image })), _jsxs("div", { className: b('text-container'), children: [title && (_jsx(Text, { variant: "header-2", className: b('title', { align: titleAlignment }), children: title })), description && (_jsx(Text, { variant: "body-2", color: "complementary", className: b('description', { align: descriptionAlignment }), children: description }))] })] }), suggestions && suggestions.length > 0 && onSuggestionClick && (_jsxs("div", { className: b('suggestions-section'), children: [suggestionTitle && (_jsx("div", { className: b('suggestions-title'), children: _jsx(Text, { variant: "subheader-3", color: "primary", children: suggestionTitle }) })), _jsx("div", { children: _jsx(Suggestions, { items: suggestions, onClick: onSuggestionClick, layout: layout, wrapText: wrapText }) }), showMore && (_jsx("div", { className: b('show-more'), children: _jsxs(Button, { view: "flat-secondary", size: "l", onClick: showMore, className: b('show-more-button'), children: [_jsx(Button.Icon, { children: _jsx(ArrowRotateRight, {}) }), showMoreButtonText] }) }))] }))] })) }) }));
 }

package/dist/components/templates/History/History.d.ts

@@ -30,6 +30,8 @@ export interface HistoryProps extends QAProps, DOMProps {
     className?: string;
     /** Custom filter function for search */
     filterFunction?: ChatFilterFunction;
+    /** Loading state */
+    loading?: boolean;
     /** Control popup open state */
     open?: boolean;
     /** Callback when popup open state changes */

package/dist/components/templates/History/History.js

@@ -8,9 +8,9 @@ import { HistoryList } from './HistoryList';
  * @returns React component
  */
 export function History(props) {
-    const { chats, selectedChat, onSelectChat, onDeleteChat, onLoadMore, hasMore = false, searchable = true, groupBy = 'date', showActions = true, emptyPlaceholder, className, qa, style, filterFunction, open = false, onOpenChange, anchorElement, } = props;
+    const { chats, selectedChat, onSelectChat, onDeleteChat, onLoadMore, hasMore = false, searchable = true, groupBy = 'date', showActions = true, emptyPlaceholder, className, qa, style, filterFunction, loading = false, open = false, onOpenChange, anchorElement, } = props;
     const handleChatClick = () => {
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
     };
-    return (_jsx(Popup, { anchorElement: anchorElement, placement: "bottom-end", open: open, onOpenChange: onOpenChange, children: _jsx(HistoryList, { chats: chats, selectedChat: selectedChat, onSelectChat: onSelectChat, onDeleteChat: onDeleteChat, onLoadMore: onLoadMore, hasMore: hasMore, searchable: searchable, groupBy: groupBy, showActions: showActions, emptyPlaceholder: emptyPlaceholder, className: className, qa: qa, style: style, filterFunction: filterFunction, onChatClick: handleChatClick }) }));
+    return (_jsx(Popup, { anchorElement: anchorElement, placement: "bottom-end", open: open, onOpenChange: onOpenChange, children: _jsx(HistoryList, { chats: chats, selectedChat: selectedChat, onSelectChat: onSelectChat, onDeleteChat: onDeleteChat, onLoadMore: onLoadMore, hasMore: hasMore, searchable: searchable, groupBy: groupBy, showActions: showActions, emptyPlaceholder: emptyPlaceholder, className: className, qa: qa, style: style, filterFunction: filterFunction, loading: loading, onChatClick: handleChatClick }) }));
 }

package/dist/components/templates/History/History.scss

@@ -87,4 +87,12 @@ $block: '.#{variables.$ns}history';
         text-align: center;
         flex: 1;
     }
+
+    &__loader-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: spacing(8) spacing(4);
+        flex: 1;
+    }
 }

package/dist/components/templates/History/HistoryList.d.ts

@@ -31,6 +31,8 @@ export interface HistoryListProps extends QAProps, DOMProps {
     className?: string;
     /** Custom filter function for search */
     filterFunction?: ChatFilterFunction;
+    /** Loading state */
+    loading?: boolean;
     /** Callback when chat is clicked (for closing popup in parent) */
     onChatClick?: (chat: ChatType) => void;
 }

package/dist/components/templates/History/HistoryList.js

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { Button, List } from '@gravity-ui/uikit';
 import { defaultChatFilter, groupChatsByDate } from '../../../utils/chatUtils';
 import { block } from '../../../utils/cn';
+import { Loader } from '../../atoms/Loader';
 import { ChatItem } from './ChatItem';
 import { DateHeaderItem } from './DateHeaderItem';
 import { i18n } from './i18n';
@@ -15,7 +16,7 @@ const b = block('history');
  * @returns React component
  */
 export function HistoryList(props) {
-    const { chats, selectedChat, onSelectChat, onDeleteChat, onLoadMore, hasMore = false, searchable = true, groupBy = 'date', showActions = true, emptyPlaceholder, className, qa, style, filterFunction = defaultChatFilter, onChatClick, } = props;
+    const { chats, selectedChat, onSelectChat, onDeleteChat, onLoadMore, hasMore = false, searchable = true, groupBy = 'date', showActions = true, emptyPlaceholder, className, qa, style, filterFunction = defaultChatFilter, loading = false, onChatClick, } = props;
     // Group chats if needed
     const groupedChats = useMemo(() => {
         if (groupBy === 'none') {
@@ -83,5 +84,5 @@ export function HistoryList(props) {
         return (_jsx(ChatItem, { chat: item, showActions: showActions, onChatClick: handleChatClick, onDeleteClick: onDeleteChat ? handleDeleteClick : undefined }, item.id));
     };
     const emptyState = emptyPlaceholder || _jsx("div", { className: b('empty'), children: i18n('empty-state') });
-    return (_jsxs("div", { className: b('container', className), "data-qa": qa, style: style, children: [_jsx("div", { className: b('list-wrapper'), children: _jsx(List, { items: listItems, renderItem: renderItem, virtualized: false, filterable: searchable, filterItem: wrappedFilterFunction, filterPlaceholder: i18n('search-placeholder'), filterClassName: b('filter'), emptyPlaceholder: emptyState, selectedItemIndex: selectedItemIndex, itemsClassName: b('list'), itemClassName: b('list-item') }) }), hasMore && onLoadMore && (_jsx(Button, { view: "flat-action", size: "m", width: "max", onClick: onLoadMore, children: i18n('action-load-more') }))] }));
+    return (_jsxs("div", { className: b('container', className), "data-qa": qa, style: style, children: [_jsx("div", { className: b('list-wrapper'), children: loading ? (_jsx("div", { className: b('loader-wrapper'), children: _jsx(Loader, { view: "loading" }) })) : (_jsx(List, { items: listItems, renderItem: renderItem, virtualized: false, filterable: searchable, filterItem: wrappedFilterFunction, filterPlaceholder: i18n('search-placeholder'), filterClassName: b('filter'), emptyPlaceholder: emptyState, selectedItemIndex: selectedItemIndex, itemsClassName: b('list'), itemClassName: b('list-item') })) }), hasMore && onLoadMore && (_jsx(Button, { view: "flat-action", size: "m", width: "max", onClick: onLoadMore, children: i18n('action-load-more') }))] }));
 }

package/dist/hooks/index.d.ts

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

package/dist/hooks/index.js

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

package/dist/hooks/useScrollPreservation.d.ts

@@ -0,0 +1,9 @@
+import { type RefObject } from 'react';
+/**
+ * Hook to preserve scroll position when older messages are loaded at the top
+ * This prevents the chat from jumping when new content is prepended
+ * @param {RefObject<T>} containerRef - Reference to the scrollable container element
+ * @param {number} messagesCount - Current count of messages in the list
+ * @returns {void}
+ */
+export declare function useScrollPreservation<T extends HTMLElement>(containerRef: RefObject<T>, messagesCount: number): void;

package/dist/hooks/useScrollPreservation.js

@@ -0,0 +1,28 @@
+import { useLayoutEffect, useRef } from 'react';
+/**
+ * Hook to preserve scroll position when older messages are loaded at the top
+ * This prevents the chat from jumping when new content is prepended
+ * @param {RefObject<T>} containerRef - Reference to the scrollable container element
+ * @param {number} messagesCount - Current count of messages in the list
+ * @returns {void}
+ */
+export function useScrollPreservation(containerRef, messagesCount) {
+    const prevScrollHeight = useRef(0);
+    const prevMessagesCount = useRef(messagesCount);
+    useLayoutEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const currentScrollHeight = container.scrollHeight;
+        // Only adjust scroll if messages were added at the top (older messages loaded)
+        if (prevScrollHeight.current > 0 &&
+            messagesCount > prevMessagesCount.current &&
+            currentScrollHeight > prevScrollHeight.current) {
+            // Calculate the height difference and adjust scroll position
+            const heightDiff = currentScrollHeight - prevScrollHeight.current;
+            container.scrollTop += heightDiff;
+        }
+        prevScrollHeight.current = currentScrollHeight;
+        prevMessagesCount.current = messagesCount;
+    }, [containerRef, messagesCount]);
+}

package/dist/themes/dark.css

@@ -16,4 +16,7 @@
     --g-aikit-accent-color: #0077ff;
 
     --g-aikit-line-brand: var(--g-aikit-accent-color);
+
+    --g-aikit-shimmer-color-from: rgba(255, 255, 255, 0.35);
+    --g-aikit-shimmer-color-to: rgba(255, 255, 255, 0.85);
 }

package/dist/types/messages.d.ts

@@ -21,7 +21,6 @@ export type TSubmitData = {
     attachments?: File[];
     metadata?: TMessageMetadata;
 };
-export type TMessageStatus = 'sending' | 'complete' | 'error' | 'streaming';
 export type TMessageRole = 'user' | 'assistant' | 'system';
 export type TMessageContent<Type extends string = string, Data = unknown> = {
     id?: string;
@@ -36,6 +35,11 @@ export type ThinkingMessageContentData = {
     title?: string;
     content: string | string[];
     status: 'thinking' | 'thought';
+    defaultExpanded?: boolean;
+    showStatusIndicator?: boolean;
+    onCopyClick?: () => void;
+    className?: string;
+    qa?: string;
 };
 export type ThinkingMessageContent = TMessageContent<'thinking', ThinkingMessageContentData>;
 export type ToolMessageContentData = ToolMessageProps;
@@ -45,7 +49,6 @@ export type TMessageContentUnion<TCustomMessageContent extends TMessageContent =
 export type TAssistantMessageContent<TCustomMessageContent extends TMessageContent = never> = string | TMessageContentUnion<TCustomMessageContent> | TMessageContentUnion<TCustomMessageContent>[];
 export type TBaseMessage<Metadata = TMessageMetadata> = Pick<BaseMessageProps, 'actions' | 'timestamp'> & {
     id?: string;
-    status?: TMessageStatus;
     error?: unknown;
     metadata?: Metadata;
 };

package/package.json

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