@gravity-ui/aikit 0.3.0 → 0.3.2

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/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

@@ -53,25 +53,26 @@ export function ChatContainer(props) {
             } });
     }, [welcomeConfig, i18nConfig.emptyState, emptyContainerProps, onSendMessage]);
     // Build props for MessageList
-    const messageListProps = useMemo(() => ({
-        messages,
-        status,
-        errorMessage: error ? { text: error.message } : undefined,
-        onRetry,
+    const messageListProps = useMemo(() => (Object.assign(Object.assign({}, messageListConfig), { messages,
+        status, errorMessage: (messageListConfig === null || messageListConfig === void 0 ? void 0 : messageListConfig.errorMessage) || (error ? { text: error.message } : undefined), 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]);
+        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

@@ -1,6 +1,6 @@
 import type { OptionsType } from '@diplodoc/transform/lib/typings';
-import type { ChatStatus, ChatType, TAssistantMessage, TChatMessage, TMessageContent, TMessageMetadata, TSubmitData, TUserMessage } from '../../../types';
-import type { DefaultMessageAction } from '../../../utils';
+import { MessageListProps } from 'src/components/organisms/MessageList';
+import type { ChatStatus, ChatType, TChatMessage, TSubmitData } from '../../../types';
 import type { ContextItemConfig } from '../../molecules/PromptInputHeader';
 import type { SuggestionsItem } from '../../molecules/Suggestions';
 import type { HeaderProps } from '../../organisms/Header';
@@ -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,14 +87,7 @@ export interface WelcomeConfig {
 /**
  * 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[];
-}
+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/package.json

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