@gravity-ui/aikit 0.3.1 → 0.4.0

package/dist/components/atoms/Alert/Alert.scss

@@ -4,9 +4,19 @@ $block: '.#{variables.$ns}alert';
 
 #{$block} {
     display: flex;
-    align-items: center;
+    flex-direction: column;
     gap: var(--g-spacing-2);
 
+    &__header {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-2);
+    }
+
+    &__text {
+        flex: 1;
+    }
+
     &__icon {
         flex-shrink: 0;
 

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

@@ -7,7 +7,9 @@ export interface AlertProps {
         content: React.ReactNode;
         onClick: () => void;
     };
+    content?: React.ReactNode;
+    initialExpanded?: boolean;
     className?: string;
     qa?: string;
 }
-export declare function Alert({ text, icon, button, variant, className, qa }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function Alert({ text, icon, button, content, initialExpanded, variant, className, qa, }: AlertProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { CircleExclamationFill, CircleInfoFill, TriangleExclamationFill } from '@gravity-ui/icons';
+import { useMemo, useState } from 'react';
+import { ChevronDown, ChevronUp, CircleExclamationFill, CircleInfoFill, TriangleExclamationFill, } from '@gravity-ui/icons';
 import { Button, Icon, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
 import './Alert.scss';
@@ -10,7 +10,8 @@ const statusIcons = {
     warning: TriangleExclamationFill,
     error: CircleExclamationFill,
 };
-export function Alert({ text, icon, button, variant = 'default', className, qa }) {
+export function Alert({ text, icon, button, content, initialExpanded = false, variant = 'default', className, qa, }) {
+    const [isExpanded, setIsExpanded] = useState(initialExpanded);
     const statusIcon = useMemo(() => {
         if (icon) {
             return _jsx("div", { className: b('icon'), children: icon });
@@ -21,5 +22,8 @@ export function Alert({ text, icon, button, variant = 'default', className, qa }
         }
         return null;
     }, [icon, variant]);
-    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [statusIcon, _jsx(Text, { variant: "body-1", children: text }), button ? (_jsx(Button, { onClick: button.onClick, size: "s", view: "outlined", className: b('action'), children: button.content })) : null] }));
+    const toggleExpanded = () => {
+        setIsExpanded((prev) => !prev);
+    };
+    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [_jsxs("div", { className: b('header'), children: [statusIcon, _jsx(Text, { variant: "body-1", className: b('text'), children: text }), content && (_jsx(Button, { onClick: toggleExpanded, size: "s", view: "flat", className: b('collapse-button'), children: _jsx(Icon, { data: isExpanded ? ChevronUp : ChevronDown, size: 16 }) })), button ? (_jsx(Button, { onClick: button.onClick, size: "s", view: "outlined", className: b('action'), children: button.content })) : null] }), content && isExpanded && _jsx("div", { className: b('content'), children: content })] }));
 }

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

@@ -18,6 +18,14 @@ export interface SubmitButtonProps {
      * Button size
      */
     size?: ButtonButtonProps['size'];
+    /**
+     * Custom tooltip for enabled state
+     */
+    tooltipSend?: string;
+    /**
+     * Custom tooltip for cancelable state
+     */
+    tooltipCancel?: string;
     /**
      * QA/test identifier
      */
@@ -34,4 +42,4 @@ export interface SubmitButtonProps {
  *
  * @returns Submit button component
  */
-export declare function SubmitButton({ onClick, state, className, size, qa }: SubmitButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubmitButton({ onClick, state, className, size, tooltipSend, tooltipCancel, qa, }: SubmitButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/SubmitButton/SubmitButton.js

@@ -18,7 +18,7 @@ const b = block('submit-button');
  *
  * @returns Submit button component
  */
-export function SubmitButton({ onClick, state, className, size = 'm', qa }) {
+export function SubmitButton({ onClick, state, className, size = 'm', tooltipSend, tooltipCancel, qa, }) {
     const isCancelable = state === 'cancelable';
     const isLoading = state === 'loading';
     const isDisabled = state === 'disabled';
@@ -29,5 +29,19 @@ export function SubmitButton({ onClick, state, className, size = 'm', qa }) {
         }
         return Promise.resolve();
     }, [state, onClick]);
-    return (_jsx(ActionButton, { view: "action", size: size, color: "brand", disabled: isDisabled, onClick: handleClick, className: b({ size, loading: isLoading, cancelable: isCancelable }, className), qa: qa, tooltipTitle: i18n('tooltip-send'), children: isLoading ? (_jsx("div", { className: b('loader'), children: _jsx(Spin, { className: b('spinner'), size: "xs" }) })) : (_jsx(Icon, { size: 16, data: iconData })) }));
+    // Get tooltip based on state
+    const getTooltipTitle = () => {
+        switch (state) {
+            case 'enabled':
+                return tooltipSend || i18n('tooltip-send');
+            case 'cancelable':
+                return tooltipCancel || i18n('tooltip-cancel');
+            case 'disabled':
+            case 'loading':
+                return undefined;
+            default:
+                return undefined;
+        }
+    };
+    return (_jsx(ActionButton, { view: "action", size: size, color: "brand", disabled: isDisabled, onClick: handleClick, className: b({ size, loading: isLoading, cancelable: isCancelable }, className), qa: qa, tooltipTitle: getTooltipTitle(), children: isLoading ? (_jsx("div", { className: b('loader'), children: _jsx(Spin, { className: b('spinner'), size: "xs" }) })) : (_jsx(Icon, { size: 16, data: iconData })) }));
 }

package/dist/components/atoms/SubmitButton/i18n/en.json

@@ -1,3 +1,4 @@
 {
-  "tooltip-send": "Send"
+  "tooltip-send": "Send",
+  "tooltip-cancel": "Cancel"
 }

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

@@ -1,13 +1,13 @@
-export declare const i18n: ((key: "tooltip-send", params?: import("@gravity-ui/i18n").Params) => string) & {
+export declare const i18n: ((key: "tooltip-send" | "tooltip-cancel", params?: import("@gravity-ui/i18n").Params) => string) & {
     Translation: import("react").ComponentType<{
         children: (props: {
-            t: (key: "tooltip-send", params?: import("@gravity-ui/i18n").Params) => string;
+            t: (key: "tooltip-send" | "tooltip-cancel", params?: import("@gravity-ui/i18n").Params) => string;
         }) => React.ReactNode;
     }>;
     useTranslation: () => {
-        t: (key: "tooltip-send", params?: import("@gravity-ui/i18n").Params) => string;
+        t: (key: "tooltip-send" | "tooltip-cancel", params?: import("@gravity-ui/i18n").Params) => string;
     };
     keysetData: {
-        "g-aikit-SubmitButton": Record<"tooltip-send", import("@gravity-ui/i18n").KeyData>;
+        "g-aikit-SubmitButton": Record<"tooltip-send" | "tooltip-cancel", import("@gravity-ui/i18n").KeyData>;
     };
 };

package/dist/components/atoms/SubmitButton/i18n/ru.json

@@ -1,3 +1,4 @@
 {
-  "tooltip-send": "Отправить"
+  "tooltip-send": "Отправить",
+  "tooltip-cancel": "Отменить"
 }

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ButtonButtonProps } from '@gravity-ui/uikit';
 import './Suggestions.scss';
 export type SuggestionsItem = {
@@ -18,8 +19,8 @@ export type SuggestionsProps = {
     items: SuggestionsItem[];
     /** Callback function called when a suggestion is clicked */
     onClick: (content: string, id?: string) => void | Promise<void>;
-    /** Title to display above suggestions */
-    title?: string;
+    /** Title to display above suggestions - can be string or custom React element */
+    title?: React.ReactNode;
     /** Layout orientation: 'grid' for horizontal, 'list' for vertical */
     layout?: 'grid' | 'list';
     /** Text alignment inside buttons: 'left', 'center', or 'right' */

package/dist/components/molecules/Suggestions/Suggestions.js

@@ -23,5 +23,5 @@ export function Suggestions(props) {
                     'text-align': item.icon ? undefined : textAlign,
                 }), children: [item.icon === 'left' && (_jsx("div", { className: b('button-icon'), children: _jsx(Icon, { data: ChevronLeft, size: 16 }) })), _jsx(Text, { as: "div", className: b(wrapText ? 'button-text-wrap' : 'button-text'), children: item.title }), item.icon === 'right' && (_jsx("div", { className: b('button-icon'), children: _jsx(Icon, { data: ChevronRight, size: 16 }) }))] }) }, item.id || index));
     };
-    return (_jsxs("div", { className: b('container', className), "data-qa": qa, children: [title && (_jsx("div", { className: b('title'), children: _jsx(Text, { variant: "body-1", color: "primary", children: title }) })), _jsx("div", { className: b({ layout }), children: items.map((item, index) => renderButton(item, index)) })] }));
+    return (_jsxs("div", { className: b('container', className), "data-qa": qa, children: [title && (_jsx("div", { className: b('title'), children: typeof title === 'string' ? (_jsx(Text, { variant: "body-1", color: "primary", children: title })) : (title) })), _jsx("div", { className: b({ layout }), children: items.map((item, index) => renderButton(item, index)) })] }));
 }

package/dist/components/molecules/ToolHeader/index.js

@@ -1,19 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
-import { ActionButton, ToolIndicator } from '../../atoms';
+import { ActionButton } from '../../atoms';
 import { ButtonGroup } from '../ButtonGroup';
+import { ToolStatus } from '../ToolStatus';
 import './ToolHeader.scss';
 const b = block('tool-header');
-function getIndicatorStatus(status) {
-    if (status === 'success' || status === 'error' || status === 'loading') {
-        return status;
-    }
-    return undefined;
-}
 export function ToolHeader(props) {
     const { toolIcon, toolName, content, actions, status, className, qa } = props;
     const hasActions = actions && actions.length > 0;
-    const indicatorStatus = getIndicatorStatus(status);
-    return (_jsxs("div", { className: b('', className), "data-qa": qa, children: [_jsxs("div", { className: b('left'), children: [toolIcon, _jsx(Text, { children: toolName }), content] }), _jsxs("div", { className: b('right'), children: [hasActions && (_jsx(ButtonGroup, { children: actions.map((action, index) => (_jsx(ActionButton, Object.assign({ tooltipTitle: action.label, view: "flat-secondary", size: "s" }, action, { children: action.icon }), index))) })), indicatorStatus && _jsx(ToolIndicator, { status: indicatorStatus })] })] }));
+    return (_jsxs("div", { className: b('', className), "data-qa": qa, children: [_jsxs("div", { className: b('left'), children: [toolIcon, _jsx(Text, { children: toolName }), content] }), _jsxs("div", { className: b('right'), children: [hasActions && (_jsx(ButtonGroup, { children: actions.map((action, index) => (_jsx(ActionButton, Object.assign({ tooltipTitle: action.label, view: "flat-secondary", size: "s" }, action, { children: action.icon }), index))) })), _jsx(ToolStatus, { status: status })] })] }));
 }

package/dist/components/molecules/ToolStatus/ToolStatus.scss

@@ -0,0 +1,6 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}tool-status';
+
+#{$block} {
+}

package/dist/components/molecules/ToolStatus/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "status-cancelled": "Cancelled"
+}

package/dist/components/molecules/ToolStatus/i18n/index.d.ts

@@ -0,0 +1,13 @@
+export declare const i18n: ((key: "status-cancelled", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "status-cancelled", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "status-cancelled", params?: import("@gravity-ui/i18n").Params) => string;
+    };
+    keysetData: {
+        "g-aikit-ToolStatus": Record<"status-cancelled", import("@gravity-ui/i18n").KeyData>;
+    };
+};

package/dist/components/molecules/ToolStatus/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}ToolStatus`);

package/dist/components/molecules/ToolStatus/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "status-cancelled": "Отменено"
+}

package/dist/components/molecules/ToolStatus/index.d.ts

@@ -0,0 +1,8 @@
+import type { TToolStatus as ToolStatusType } from '../../../types/tool';
+import './ToolStatus.scss';
+export type ToolStatusProps = {
+    status?: ToolStatusType;
+    className?: string;
+    qa?: string;
+};
+export declare function ToolStatus(props: ToolStatusProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/molecules/ToolStatus/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import { ToolIndicator } from '../../atoms';
+import { i18n } from './i18n';
+import './ToolStatus.scss';
+const b = block('tool-status');
+function getIndicatorStatus(status) {
+    if (status === 'success' || status === 'error' || status === 'loading') {
+        return status;
+    }
+    return undefined;
+}
+export function ToolStatus(props) {
+    const { status, className, qa } = props;
+    const indicatorStatus = getIndicatorStatus(status);
+    if (status === 'cancelled') {
+        return (_jsx(Text, { color: "secondary", className: b('', className), "data-qa": qa, children: i18n('status-cancelled') }));
+    }
+    if (indicatorStatus) {
+        return _jsx(ToolIndicator, { status: indicatorStatus, className: className, qa: qa });
+    }
+    return null;
+}

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

@@ -9,3 +9,4 @@ export * from './Suggestions';
 export * from './Tabs';
 export * from './ToolFooter';
 export * from './ToolHeader';
+export * from './ToolStatus';

package/dist/components/molecules/index.js

@@ -10,3 +10,4 @@ export * from './Suggestions';
 export * from './Tabs';
 export * from './ToolFooter';
 export * from './ToolHeader';
+export * from './ToolStatus';

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

@@ -14,12 +14,14 @@ export function PromptInputFull(props) {
     const { hookState, headerProps = {}, bodyProps = {}, footerProps = {}, className, qa } = props;
     const { topContent, contextItems = [], showContextIndicator = false, contextIndicatorProps, } = headerProps;
     const { placeholder = 'Plan, code, build and test anything', minRows = 1, maxRows = 15, autoFocus = false, } = bodyProps;
-    const { bottomContent, showSettings = false, onSettingsClick, showAttachment = false, onAttachmentClick, showMicrophone = false, onMicrophoneClick, } = footerProps;
+    const { bottomContent, showSettings = false, onSettingsClick, showAttachment = false, onAttachmentClick, showMicrophone = false, onMicrophoneClick, submitButtonTooltipSend, submitButtonTooltipCancel, } = footerProps;
     const { value, submitButtonState, handleChange, handleKeyDown, handleSubmit } = hookState;
     const shouldShowHeader = topContent || contextItems.length > 0 || showContextIndicator;
     const shouldShowFooter = true;
     return (_jsxs("div", { className: b({ view: 'full' }, className), "data-qa": qa, children: [shouldShowHeader && (_jsx(PromptInputHeader, { contextItems: contextItems, showContextIndicator: showContextIndicator, contextIndicatorProps: contextIndicatorProps, children: topContent })), _jsx(PromptInputBody, { value: value, placeholder: placeholder, minRows: minRows, maxRows: maxRows, autoFocus: autoFocus, onChange: handleChange, onKeyDown: handleKeyDown }), shouldShowFooter && (_jsx(PromptInputFooter, { submitButton: {
                     onClick: handleSubmit,
                     state: submitButtonState,
+                    tooltipSend: submitButtonTooltipSend,
+                    tooltipCancel: submitButtonTooltipCancel,
                 }, showSettings: showSettings, onSettingsClick: onSettingsClick, showAttachment: showAttachment, onAttachmentClick: onAttachmentClick, showMicrophone: showMicrophone, onMicrophoneClick: onMicrophoneClick, children: bottomContent }))] }));
 }

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

@@ -12,10 +12,12 @@ const b = block('prompt-input');
 export function PromptInputSimple(props) {
     const { hookState, bodyProps = {}, footerProps = {}, className, qa } = props;
     const { placeholder = 'Plan, code, build and test anything', minRows = 1, maxRows = 15, autoFocus = false, } = bodyProps;
-    const { bottomContent, showAttachment = false, onAttachmentClick, showMicrophone = false, onMicrophoneClick, } = footerProps;
+    const { bottomContent, showAttachment = false, onAttachmentClick, showMicrophone = false, onMicrophoneClick, submitButtonTooltipSend, submitButtonTooltipCancel, } = footerProps;
     const { value, submitButtonState, handleChange, handleKeyDown, handleSubmit } = hookState;
     return (_jsx("div", { className: b({ view: 'simple' }, className), "data-qa": qa, children: _jsxs("div", { className: b('content'), children: [_jsx(PromptInputBody, { value: value, placeholder: placeholder, minRows: minRows, maxRows: maxRows, autoFocus: autoFocus, onChange: handleChange, onKeyDown: handleKeyDown }), _jsx(PromptInputFooter, { submitButton: {
                         onClick: handleSubmit,
                         state: submitButtonState,
+                        tooltipSend: submitButtonTooltipSend,
+                        tooltipCancel: submitButtonTooltipCancel,
                     }, showAttachment: showAttachment, onAttachmentClick: onAttachmentClick, showMicrophone: showMicrophone, onMicrophoneClick: onMicrophoneClick, buttonSize: "l", children: bottomContent })] }) }));
 }

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

@@ -54,6 +54,10 @@ export type PromptInputFooterConfig = {
     showMicrophone?: boolean;
     /** Microphone icon click handler */
     onMicrophoneClick?: () => void;
+    /** Custom tooltip for submit button in enabled state */
+    submitButtonTooltipSend?: string;
+    /** Custom tooltip for submit button in cancelable state */
+    submitButtonTooltipCancel?: string;
 };
 /**
  * Props for the suggestions section of PromptInput
@@ -63,8 +67,8 @@ export type PromptInputSuggestionsConfig = {
     suggestions?: SuggestionsItem[];
     /** Show submit suggestions */
     showSuggestions?: boolean;
-    /** Title for the suggestions section */
-    suggestTitle?: string;
+    /** Title for the suggestions section - can be string or custom React element */
+    suggestTitle?: string | ReactNode;
     /** Layout orientation for suggestions: 'grid' for horizontal, 'list' for vertical */
     suggestionsLayout?: SuggestionsProps['layout'];
     /** Text alignment inside suggestion buttons */

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

@@ -2,7 +2,7 @@ import type { OptionsType } from '@diplodoc/transform/lib/typings';
 import type { BaseMessageProps } from '../../../types/messages';
 import './UserMessage.scss';
 export type UserMessageProps = Pick<BaseMessageProps, 'actions' | 'showActionsOnHover' | 'showTimestamp' | 'timestamp'> & {
-    content: string | React.ReactNode;
+    content: React.ReactNode;
     format?: 'plain' | 'markdown';
     showAvatar?: boolean;
     avatarUrl?: string;

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

@@ -54,17 +54,25 @@ export function ChatContainer(props) {
     }, [welcomeConfig, i18nConfig.emptyState, emptyContainerProps, onSendMessage]);
     // Build props for MessageList
     const messageListProps = useMemo(() => (Object.assign(Object.assign({}, messageListConfig), { messages,
-        status, errorMessage: error ? { text: error.message } : undefined, onRetry,
+        status, errorMessage: (messageListConfig === null || messageListConfig === void 0 ? void 0 : messageListConfig.errorMessage) || (error ? { text: error.message } : undefined), onRetry,
         showActionsOnHover,
         transformOptions })), [messages, status, error, onRetry, showActionsOnHover, transformOptions, messageListConfig]);
     // Build props for PromptInput
     const finalPromptInputProps = useMemo(() => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         return (Object.assign(Object.assign({}, promptInputProps), { onSend: onSendMessage, onCancel,
             status, headerProps: Object.assign(Object.assign({}, promptInputProps === null || promptInputProps === void 0 ? void 0 : promptInputProps.headerProps), { contextItems }), bodyProps: Object.assign(Object.assign({}, promptInputProps === null || promptInputProps === void 0 ? void 0 : promptInputProps.bodyProps), { placeholder: ((_a = i18nConfig.promptInput) === null || _a === void 0 ? void 0 : _a.placeholder) ||
                     ((_b = promptInputProps === null || promptInputProps === void 0 ? void 0 : promptInputProps.bodyProps) === null || _b === void 0 ? void 0 : _b.placeholder) ||
-                    i18n('prompt-placeholder') }) }));
-    }, [onSendMessage, onCancel, status, contextItems, i18nConfig.promptInput, promptInputProps]);
+                    i18n('prompt-placeholder') }), footerProps: Object.assign(Object.assign({}, promptInputProps === null || promptInputProps === void 0 ? void 0 : promptInputProps.footerProps), { submitButtonTooltipSend: (_c = i18nConfig.submitButton) === null || _c === void 0 ? void 0 : _c.sendTooltip, submitButtonTooltipCancel: (_d = i18nConfig.submitButton) === null || _d === void 0 ? void 0 : _d.cancelTooltip }) }));
+    }, [
+        onSendMessage,
+        onCancel,
+        status,
+        contextItems,
+        i18nConfig.promptInput,
+        i18nConfig.submitButton,
+        promptInputProps,
+    ]);
     // Build props for Disclaimer
     const disclaimerProps = useMemo(() => {
         var _a;

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

@@ -38,9 +38,12 @@ export interface ChatContainerI18nConfig {
     promptInput?: {
         /** Placeholder text */
         placeholder?: string;
-        /** Send button tooltip */
+    };
+    /** Submit button tooltips */
+    submitButton?: {
+        /** Send button tooltip (enabled state) */
         sendTooltip?: string;
-        /** Cancel button tooltip */
+        /** Cancel button tooltip (cancelable state) */
         cancelTooltip?: string;
     };
     /** History texts */
@@ -63,11 +66,11 @@ export interface WelcomeConfig {
     /** Image or icon to display */
     image?: React.ReactNode;
     /** Title text or custom React element */
-    title?: string | React.ReactNode;
+    title?: React.ReactNode;
     /** Description text or custom React element */
-    description?: string | React.ReactNode;
-    /** Suggestions section title */
-    suggestionTitle?: string;
+    description?: React.ReactNode;
+    /** Suggestions section title - can be string or custom React element */
+    suggestionTitle?: React.ReactNode;
     /** Array of suggestions (title will be used as message content) */
     suggestions?: SuggestionsItem[];
     /** Alignment configuration for image, title, and description */
@@ -84,7 +87,7 @@ export interface WelcomeConfig {
 /**
  * MessageList configuration
  */
-export type MessageListConfig = Omit<MessageListProps, 'messages' | 'status' | 'errorMessage' | 'onRetry' | 'showActionsOnHover' | 'transformOptions'>;
+export type MessageListConfig = Omit<MessageListProps, 'messages' | 'status' | 'onRetry' | 'showActionsOnHover' | 'transformOptions'>;
 /**
  * Props for ChatContainer component
  */

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

@@ -27,11 +27,11 @@ export interface EmptyContainerProps {
     /** Image or icon to display at the top */
     image?: React.ReactNode;
     /** Title text or custom React element for the welcome screen */
-    title?: string | React.ReactNode;
+    title?: React.ReactNode;
     /** Description text or custom React element explaining the functionality */
-    description?: string | React.ReactNode;
-    /** Title for the suggestions section */
-    suggestionTitle?: string;
+    description?: React.ReactNode;
+    /** Title for the suggestions section - can be string or custom React element */
+    suggestionTitle?: React.ReactNode;
     /** Array of suggestion items */
     suggestions?: Suggestion[];
     /** Callback when a suggestion is clicked */

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

@@ -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: 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] }) }))] }))] })) }) }));
+    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: typeof suggestionTitle === 'string' ? (_jsx(Text, { variant: "subheader-3", color: "primary", children: suggestionTitle })) : (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/hooks/index.d.ts

@@ -2,3 +2,5 @@ export * from './useDateFormatter';
 export * from './useToolMessage';
 export * from './useSmartScroll';
 export * from './useScrollPreservation';
+export * from './useAutoCollapseOnSuccess';
+export * from './useAutoCollapseOnCancelled';

package/dist/hooks/index.js

@@ -2,3 +2,5 @@ export * from './useDateFormatter';
 export * from './useToolMessage';
 export * from './useSmartScroll';
 export * from './useScrollPreservation';
+export * from './useAutoCollapseOnSuccess';
+export * from './useAutoCollapseOnCancelled';

package/dist/hooks/useAutoCollapseOnCancelled.d.ts

@@ -0,0 +1,6 @@
+import type { TToolStatus } from '../types/tool';
+export declare function useAutoCollapseOnCancelled(options: {
+    enabled: boolean;
+    status: TToolStatus | undefined;
+    setIsExpanded: (expanded: boolean) => void;
+}): void;

package/dist/hooks/useAutoCollapseOnCancelled.js

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+export function useAutoCollapseOnCancelled(options) {
+    const { enabled, status, setIsExpanded } = options;
+    const isCancelled = status === 'cancelled';
+    useEffect(() => {
+        if (enabled && isCancelled) {
+            setIsExpanded(false);
+        }
+    }, [enabled, isCancelled, setIsExpanded]);
+}

package/dist/hooks/useAutoCollapseOnSuccess.d.ts

@@ -0,0 +1,6 @@
+import type { TToolStatus } from '../types/tool';
+export declare function useAutoCollapseOnSuccess(options: {
+    enabled: boolean;
+    status: TToolStatus | undefined;
+    setIsExpanded: (expanded: boolean) => void;
+}): void;

package/dist/hooks/useAutoCollapseOnSuccess.js

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+export function useAutoCollapseOnSuccess(options) {
+    const { enabled, status, setIsExpanded } = options;
+    const isSuccess = status === 'success';
+    useEffect(() => {
+        if (enabled && isSuccess) {
+            setIsExpanded(false);
+        }
+    }, [enabled, isSuccess, setIsExpanded]);
+}

package/dist/hooks/useToolMessage.js

@@ -3,6 +3,8 @@ import { useCallback, useMemo, useState } from 'react';
 import { ChevronDown, ChevronUp } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import { i18n } from '../components/organisms/ToolMessage/i18n';
+import { useAutoCollapseOnCancelled } from './useAutoCollapseOnCancelled';
+import { useAutoCollapseOnSuccess } from './useAutoCollapseOnSuccess';
 function getDefaultFooterActions(status, footerActions, onAccept, onReject) {
     if (footerActions !== undefined) {
         return footerActions;
@@ -60,8 +62,10 @@ function getDefaultInitialExpanded(status, initialExpanded) {
 }
 const defaultHeaderActions = [];
 export function useToolMessage(options) {
-    const { footerActions, headerActions = defaultHeaderActions, bodyContent, status, footerContent, expandable = Boolean(bodyContent), initialExpanded, onAccept, onReject, } = options;
+    const { footerActions, headerActions = defaultHeaderActions, bodyContent, status, footerContent, expandable = Boolean(bodyContent), initialExpanded, autoCollapseOnSuccess, autoCollapseOnCancelled, onAccept, onReject, } = options;
     const [isExpanded, setIsExpanded] = useState(getDefaultInitialExpanded(status, initialExpanded));
+    useAutoCollapseOnSuccess({ enabled: Boolean(autoCollapseOnSuccess), status, setIsExpanded });
+    useAutoCollapseOnCancelled({ enabled: Boolean(autoCollapseOnCancelled), status, setIsExpanded });
     const toggleExpanded = useCallback(() => {
         setIsExpanded((prev) => !prev);
     }, []);

package/dist/types/tool.d.ts

@@ -1,11 +1,11 @@
 import { Action } from './common';
-export type ToolStatus = 'success' | 'error' | 'loading' | 'waitingConfirmation' | 'waitingSubmission';
+export type TToolStatus = 'success' | 'error' | 'loading' | 'waitingConfirmation' | 'waitingSubmission' | 'cancelled';
 export type ToolHeaderProps = {
     toolIcon?: React.ReactNode;
     toolName: string;
     content?: React.ReactNode;
     actions?: Action[];
-    status?: ToolStatus;
+    status?: TToolStatus;
     className?: string;
     qa?: string;
 };
@@ -24,9 +24,11 @@ export type ToolMessageProps = {
     bodyContent?: React.ReactNode;
     headerContent?: React.ReactNode;
     footerContent?: React.ReactNode;
-    status?: ToolStatus;
+    status?: TToolStatus;
     expandable?: boolean;
     initialExpanded?: boolean;
+    autoCollapseOnSuccess?: boolean;
+    autoCollapseOnCancelled?: boolean;
     onAccept?: () => void;
     onReject?: () => void;
     className?: string;

package/package.json

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