@gravity-ui/aikit 0.1.2 → 0.2.0

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

@@ -18,10 +18,14 @@ 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;
     /** Layout orientation: 'grid' for horizontal, 'list' for vertical */
     layout?: 'grid' | 'list';
     /** Text alignment inside buttons: 'left', 'center', or 'right' */
     textAlign?: 'left' | 'center' | 'right';
+    /** Enable text wrapping inside buttons instead of ellipsis */
+    wrapText?: boolean;
     /** Additional CSS class */
     className?: string;
     /** QA/test identifier */

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

@@ -13,7 +13,7 @@ const b = block('suggestions');
  * @returns React component
  */
 export function Suggestions(props) {
-    const { items, onClick, layout = 'list', textAlign = 'left', className, qa } = props;
+    const { items, onClick, title, layout = 'list', textAlign = 'left', wrapText = false, className, qa, } = props;
     const handleClick = (item) => {
         onClick(item.title, item.id);
     };
@@ -21,7 +21,7 @@ export function Suggestions(props) {
         return (_jsx(ActionButton, { tooltipTitle: item.title, size: "m", view: item.view || 'outlined', onClick: () => handleClick(item), className: b('button', { layout }), width: "auto", children: _jsxs("div", { className: b('button-content', {
                     layout,
                     '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('button-text'), children: item.title }), item.icon === 'right' && (_jsx("div", { className: b('button-icon'), children: _jsx(Icon, { data: ChevronRight, size: 16 }) }))] }) }, item.id || index));
+                }), 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 (_jsx("div", { className: b({ layout }, className), "data-qa": qa, 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: _jsx(Text, { variant: "body-1", color: "primary", children: title }) })), _jsx("div", { className: b({ layout }), children: items.map((item, index) => renderButton(item, index)) })] }));
 }

package/dist/components/molecules/Suggestions/Suggestions.scss

@@ -4,6 +4,16 @@
 $block: '.#{variables.$ns}suggestions';
 
 #{$block} {
+    &__container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-2);
+    }
+
+    &__title {
+        padding-bottom: 0;
+    }
+
     display: flex;
     align-items: flex-start;
     align-content: flex-start;
@@ -62,6 +72,13 @@ $block: '.#{variables.$ns}suggestions';
         min-width: 0;
     }
 
+    &__button-text-wrap {
+        word-break: break-word;
+        white-space: normal;
+        min-width: 0;
+        text-align: left;
+    }
+
     &__button-icon {
         width: 16px;
         height: 16px;

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

@@ -10,7 +10,7 @@ const b = block('prompt-input');
  */
 export function PromptInputWithSuggestions(props) {
     const { children, suggestionsProps = {}, className, qa } = props;
-    const { showSuggestions = false, suggestions, onSuggestionClick, suggestionsLayout, suggestionsTextAlign = 'center', } = suggestionsProps;
+    const { showSuggestions = false, suggestions, suggestTitle, onSuggestionClick, suggestionsLayout, suggestionsTextAlign = 'center', } = suggestionsProps;
     const hasSuggestions = showSuggestions && suggestions && suggestions.length > 0;
-    return (_jsxs("div", { className: b('suggestions-wrapper', className), "data-qa": qa, children: [hasSuggestions && (_jsx("div", { className: b('suggestions'), children: _jsx(Suggestions, { items: suggestions, onClick: onSuggestionClick || (() => { }), layout: suggestionsLayout, textAlign: suggestionsTextAlign }) })), children] }));
+    return (_jsxs("div", { className: b('suggestions-wrapper', className), "data-qa": qa, children: [hasSuggestions && (_jsx("div", { className: b('suggestions'), children: _jsx(Suggestions, { items: suggestions, onClick: onSuggestionClick || (() => { }), title: suggestTitle, layout: suggestionsLayout, textAlign: suggestionsTextAlign }) })), children] }));
 }

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

@@ -63,6 +63,8 @@ export type PromptInputSuggestionsConfig = {
     suggestions?: SuggestionsItem[];
     /** Show submit suggestions */
     showSuggestions?: boolean;
+    /** Title for the suggestions section */
+    suggestTitle?: string;
     /** Layout orientation for suggestions: 'grid' for horizontal, 'list' for vertical */
     suggestionsLayout?: SuggestionsProps['layout'];
     /** Text alignment inside suggestion buttons */

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

@@ -20,5 +20,5 @@ const b = block('thinking-message');
 export const ThinkingMessage = (props) => {
     const { className, qa, style, onCopyClick } = props, data = __rest(props, ["className", "qa", "style", "onCopyClick"]);
     const { isExpanded, toggleExpanded, buttonTitle, content, showLoader } = useThinkingMessage(Object.assign({}, data));
-    return (_jsxs("div", { className: b(null, className), "data-qa": qa, style: style, children: [_jsxs("div", { className: b('buttons'), children: [_jsxs(Button, { size: "s", onClick: toggleExpanded, children: [buttonTitle, _jsx(Icon, { data: isExpanded ? ChevronUp : ChevronDown })] }), showLoader ? (_jsx(Loader, { view: "loading", size: "xs" })) : (onCopyClick && (_jsx(ActionButton, { size: "s", onClick: onCopyClick, children: _jsx(Icon, { data: Copy, size: 16 }) })))] }), isExpanded && (_jsx("div", { className: b('container'), children: content.map((item) => (_jsx(Text, { className: b('content'), children: item }, item))) }))] }));
+    return (_jsxs("div", { className: b(null, className), "data-qa": qa, style: style, children: [_jsxs("div", { className: b('buttons'), children: [_jsxs(Button, { size: "s", onClick: toggleExpanded, children: [buttonTitle, _jsx(Icon, { data: isExpanded ? ChevronUp : ChevronDown })] }), showLoader ? (_jsx(Loader, { view: "loading", size: "xs" })) : (onCopyClick && (_jsx(ActionButton, { size: "s", onClick: onCopyClick, children: _jsx(Icon, { data: Copy, size: 16 }) })))] }), isExpanded && (_jsx("div", { className: b('container'), children: content.map((item, index) => (_jsx(Text, { className: b('content'), children: item }, index))) }))] }));
 };

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

@@ -5,8 +5,8 @@
     flex-direction: column;
     height: 100%;
     width: 100%;
-    background-color: var(--g-color-base-background);
     overflow: hidden;
+    background: var(--g-aikit-chat-container-background);
 
     &__header {
         display: flex;
@@ -15,6 +15,7 @@
         align-items: flex-start;
         gap: var(--g-spacing-2);
         align-self: stretch;
+        background: var(--g-aikit-chat-container-header-background);
     }
 
     &__content {
@@ -23,6 +24,7 @@
         flex-direction: column;
         align-items: flex-start;
         align-self: stretch;
+        background: var(--g-aikit-chat-container-content-background);
 
         padding: 0 var(--g-aikit-layout-base-padding-m) var(--g-spacing-4)
             var(--g-aikit-layout-base-padding-m);
@@ -37,5 +39,6 @@
         align-items: flex-start;
         gap: var(--g-spacing-1);
         align-self: stretch;
+        background: var(--g-aikit-chat-container-footer-background);
     }
 }

package/dist/components/templates/EmptyContainer/EmptyContainer.scss

@@ -5,7 +5,7 @@
     flex-direction: column;
     height: 100%;
     width: 100%;
-    background-color: var(--g-aikit-empty-container-background);
+    background: var(--g-aikit-empty-container-background);
 
     &__content {
         flex: 1;

package/dist/themes/variables.css

@@ -60,4 +60,10 @@
     --g-aikit-chat-content-background: var(--g-color-base-background);
     --g-aikit-chat-content-padding: 0 var(--g-aikit-layout-base-padding-m) var(--g-spacing-4)
         var(--g-aikit-layout-base-padding-m);
+
+    /* === Chat Container === */
+    --g-aikit-chat-container-header-background: var(--g-color-base-background);
+    --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);
 }

package/package.json

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