@gravity-ui/aikit 0.2.0 → 0.2.2

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, qa, } = props;
+    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 hookState = useChatContainer(props);
     // Collect i18n texts with overrides
     const headerTitle = useMemo(() => {
@@ -41,24 +41,15 @@ export function ChatContainer(props) {
     ]);
     // Build props for EmptyContainer
     const finalEmptyContainerProps = useMemo(() => {
-        var _a, _b, _c, _d, _e;
-        // Map suggestions from WelcomeConfig to SuggestionsItem format
-        const defaultSuggestions = (_a = welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.suggestions) === null || _a === void 0 ? void 0 : _a.map((s) => ({
-            id: s.id,
-            title: s.label || s.content, // Use label or content as button title
-        }));
-        return Object.assign(Object.assign({}, emptyContainerProps), { image: welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.image, title: (welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.title) || ((_b = i18nConfig.emptyState) === null || _b === void 0 ? void 0 : _b.title) || i18n('empty-state-title'), description: (welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.description) ||
-                ((_c = i18nConfig.emptyState) === null || _c === void 0 ? void 0 : _c.description) ||
+        var _a, _b, _c, _d;
+        return Object.assign(Object.assign({}, emptyContainerProps), { image: welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.image, title: (welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.title) || ((_a = i18nConfig.emptyState) === null || _a === void 0 ? void 0 : _a.title) || i18n('empty-state-title'), description: (welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.description) ||
+                ((_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) ||
-                ((_d = i18nConfig.emptyState) === null || _d === void 0 ? void 0 : _d.suggestionsTitle) ||
-                i18n('empty-state-suggestions-title'), suggestions: defaultSuggestions, showMore: welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.showMore, showMoreText: (welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.showMoreText) ||
-                ((_e = i18nConfig.emptyState) === null || _e === void 0 ? void 0 : _e.showMoreText) ||
+                ((_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) ||
+                ((_d = i18nConfig.emptyState) === null || _d === void 0 ? void 0 : _d.showMoreText) ||
                 i18n('empty-state-show-more'), onSuggestionClick: async (clickedTitle) => {
-                var _a;
-                // Find original suggestion by title to get content
-                const originalSuggestion = (_a = welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.suggestions) === null || _a === void 0 ? void 0 : _a.find((s) => (s.label || s.content) === clickedTitle);
-                const contentToSend = (originalSuggestion === null || originalSuggestion === void 0 ? void 0 : originalSuggestion.content) || clickedTitle;
-                await onSendMessage({ content: contentToSend });
+                await onSendMessage({ content: clickedTitle });
             } });
     }, [welcomeConfig, i18nConfig.emptyState, emptyContainerProps, onSendMessage]);
     // Build props for MessageList
@@ -106,5 +97,5 @@ export function ChatContainer(props) {
         historyProps,
     ]);
     const showFooter = finalPromptInputProps || disclaimerProps;
-    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [_jsx("div", { className: b('header'), children: _jsx(Header, Object.assign({}, finalHeaderProps)) }), _jsx("div", { className: b('content'), children: _jsx(ChatContent, Object.assign({}, finalContentProps)) }), showFooter && (_jsxs("div", { className: b('footer'), children: [finalPromptInputProps && _jsx(PromptInput, Object.assign({}, finalPromptInputProps)), disclaimerProps && _jsx(Disclaimer, Object.assign({}, disclaimerProps))] })), _jsx(History, Object.assign({}, finalHistoryProps))] }));
+    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [_jsx("div", { className: b('header', headerClassName), children: _jsx(Header, Object.assign({}, finalHeaderProps)) }), _jsx("div", { className: b('content', { view: hookState.chatContentView }, contentClassName), children: _jsx(ChatContent, Object.assign({}, finalContentProps)) }), showFooter && (_jsxs("div", { className: b('footer', { view: hookState.chatContentView }, footerClassName), children: [finalPromptInputProps && _jsx(PromptInput, Object.assign({}, finalPromptInputProps)), disclaimerProps && _jsx(Disclaimer, Object.assign({}, disclaimerProps))] })), _jsx(History, Object.assign({}, finalHistoryProps))] }));
 }

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

@@ -32,6 +32,14 @@
         flex: 1 0 0;
     }
 
+    &__content_view_empty {
+        background: var(--g-aikit-chat-container-content-empty-background);
+    }
+
+    &__content_view_chat {
+        background: var(--g-aikit-chat-container-content-chat-background);
+    }
+
     &__footer {
         display: flex;
         padding: var(--g-aikit-layout-base-padding-m);
@@ -41,4 +49,12 @@
         align-self: stretch;
         background: var(--g-aikit-chat-container-footer-background);
     }
+
+    &__footer_view_empty {
+        background: var(--g-aikit-chat-container-footer-empty-background);
+    }
+
+    &__footer_view_chat {
+        background: var(--g-aikit-chat-container-footer-chat-background);
+    }
 }

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

@@ -1,10 +1,11 @@
 import type { OptionsType } from '@diplodoc/transform/lib/typings';
 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';
 import type { PromptInputProps } from '../../organisms/PromptInput';
 import type { ChatContentProps } from '../../templates/ChatContent';
-import type { EmptyContainerProps } from '../../templates/EmptyContainer';
+import type { AlignmentConfig, EmptyContainerProps } from '../../templates/EmptyContainer';
 import type { HistoryProps } from '../../templates/History';
 /**
  * I18n configuration for all text labels in ChatContainer
@@ -60,21 +61,18 @@ export interface ChatContainerI18nConfig {
 export interface WelcomeConfig {
     /** Image or icon to display */
     image?: React.ReactNode;
-    /** Title text */
-    title?: string;
-    /** Description text */
-    description?: string;
+    /** Title text or custom React element */
+    title?: string | React.ReactNode;
+    /** Description text or custom React element */
+    description?: string | React.ReactNode;
     /** Suggestions section title */
     suggestionTitle?: string;
-    /** Array of suggestions */
-    suggestions?: Array<{
-        /** Unique identifier for the suggestion */
-        id: string;
-        /** Suggestion text content that will be sent as message */
-        content: string;
-        /** Display title for the suggestion button (defaults to content if not provided) */
-        label?: string;
-    }>;
+    /** Array of suggestions (title will be used as message content) */
+    suggestions?: SuggestionsItem[];
+    /** Alignment configuration for image, title, and description */
+    alignment?: AlignmentConfig;
+    /** Enable text wrapping inside suggestion buttons instead of ellipsis */
+    wrapText?: boolean;
     /** Show more suggestions callback */
     showMore?: () => void;
     /** Show more button text */
@@ -138,6 +136,12 @@ export interface ChatContainerProps {
     showClose?: boolean;
     /** Additional CSS class */
     className?: string;
+    /** Additional CSS class for header section */
+    headerClassName?: string;
+    /** Additional CSS class for content section */
+    contentClassName?: string;
+    /** Additional CSS class for footer section */
+    footerClassName?: string;
     /** QA/test identifier */
     qa?: string;
 }

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

@@ -26,10 +26,10 @@ export interface AlignmentConfig {
 export interface EmptyContainerProps {
     /** Image or icon to display at the top */
     image?: React.ReactNode;
-    /** Title text for the welcome screen */
-    title?: string;
-    /** Description text explaining the functionality */
-    description?: string;
+    /** Title text or custom React element for the welcome screen */
+    title?: string | React.ReactNode;
+    /** Description text or custom React element explaining the functionality */
+    description?: string | React.ReactNode;
     /** Title for the suggestions section */
     suggestionTitle?: string;
     /** Array of suggestion items */
@@ -38,6 +38,8 @@ export interface EmptyContainerProps {
     onSuggestionClick?: (content: string, id?: string) => void;
     /** Alignment configuration for image, title, and description */
     alignment?: AlignmentConfig;
+    /** Enable text wrapping inside suggestion buttons instead of ellipsis */
+    wrapText?: boolean;
     /** Callback for showing more suggestions */
     showMore?: () => void;
     /** Custom text for the show more button */

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, showMore, showMoreText, className, qa, } = props;
+    const { image, title, description, suggestionTitle, suggestions = [], onSuggestionClick, alignment, 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" }) }), 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: "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] }) }))] }))] })) }) }));
 }

package/dist/themes/variables.css

@@ -66,4 +66,8 @@
     --g-aikit-chat-container-content-background: var(--g-color-base-background);
     --g-aikit-chat-container-footer-background: var(--g-color-base-background);
     --g-aikit-chat-container-background: var(--g-color-base-background);
+    --g-aikit-chat-container-content-empty-background: var(--g-color-base-background);
+    --g-aikit-chat-container-content-chat-background: var(--g-color-base-background);
+    --g-aikit-chat-container-footer-empty-background: var(--g-color-base-background);
+    --g-aikit-chat-container-footer-chat-background: var(--g-color-base-background);
 }

package/package.json

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