@gravity-ui/aikit 0.1.1 → 0.2.0

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

@@ -0,0 +1,90 @@
+@use '../../../styles/variables';
+@use '../../../styles/functions' as *;
+
+$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;
+    gap: var(--g-spacing-2) var(--g-spacing-2);
+    align-self: stretch;
+    flex-wrap: wrap;
+
+    &_layout_grid {
+        flex-direction: row;
+    }
+
+    &_layout_list {
+        flex-direction: column;
+    }
+
+    &_layout_list &__button {
+        width: 100%;
+    }
+
+    &__button {
+        padding: spacing(2) spacing(4);
+        height: 100%;
+        box-shadow: none;
+
+        .g-button__text {
+            width: 100%;
+        }
+    }
+
+    &__button-content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        flex: 1;
+        gap: spacing(1);
+        min-width: 0;
+
+        &_text-align_left {
+            justify-content: flex-start;
+        }
+
+        &_text-align_center {
+            justify-content: center;
+        }
+
+        &_text-align_right {
+            justify-content: flex-end;
+        }
+    }
+
+    &__button-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        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;
+        color: var(--g-color-text-hint);
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+    }
+}

package/dist/components/molecules/Tabs/Tabs.scss

@@ -0,0 +1,46 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}tabs';
+
+#{$block} {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--g-spacing-2);
+    overflow: scroll hidden;
+    white-space: nowrap;
+    padding: var(--g-spacing-1) 0;
+
+    scrollbar-width: thin;
+    transition: scrollbar-color 0.3s ease-in-out;
+    scrollbar-color: transparent transparent;
+
+    &:hover {
+        scrollbar-color: var(--g-color-base-generic-medium) transparent;
+    }
+
+    &::-webkit-scrollbar {
+        height: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: transparent;
+        border-radius: 3px;
+        transition: background-color 0.3s ease-in-out;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+        background-color: var(--g-color-base-generic-medium);
+    }
+
+    &__tab {
+        flex-shrink: 0;
+        cursor: default;
+        overflow: hidden;
+    }
+}

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

@@ -0,0 +1,3 @@
+{
+  "close-tooltip": "Close"
+}

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

@@ -0,0 +1,3 @@
+{
+  "close-tooltip": "Закрыть"
+}

package/dist/components/molecules/ToolFooter/ToolFooter.scss

@@ -0,0 +1,15 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}tool-footer';
+
+#{$block} {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__left {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-2);
+    }
+}

package/dist/components/molecules/ToolHeader/ToolHeader.scss

@@ -0,0 +1,24 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}tool-header';
+
+#{$block} {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 24px;
+    gap: var(--g-spacing-2);
+
+    &__left {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--g-spacing-2);
+    }
+
+    &__right {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-3);
+    }
+}

package/dist/components/organisms/AssistantMessage/AssistantMessage.scss

@@ -0,0 +1,10 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}assistant-message';
+
+#{$block}__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-spacing-3);
+    width: 100%;
+}

package/dist/components/organisms/Header/Header.scss

@@ -0,0 +1,51 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}header';
+
+#{$block} {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--g-spacing-2);
+    width: 100%;
+    box-sizing: border-box;
+    background: var(--g-aikit-header-background);
+
+    &__icon {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    &__title-container {
+        display: flex;
+        gap: var(--g-spacing-1);
+        flex: 1;
+        align-items: baseline;
+
+        &_position_left {
+            justify-content: flex-start;
+        }
+
+        &_position_center {
+            justify-content: center;
+        }
+    }
+
+    &__title {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        flex-shrink: 0;
+    }
+
+    &__preview {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    &__action-button {
+        flex-shrink: 0;
+    }
+}

package/dist/components/organisms/Header/i18n/en.json

@@ -0,0 +1,7 @@
+{
+  "action-tooltip-newChat": "New chat",
+  "action-tooltip-history": "History",
+  "action-tooltip-folding-collapsed": "Expand",
+  "action-tooltip-folding-opened": "Collapse",
+  "action-tooltip-close": "Close"
+}

package/dist/components/organisms/Header/i18n/ru.json

@@ -0,0 +1,7 @@
+{
+  "action-tooltip-newChat": "Новый чат",
+  "action-tooltip-history": "История",
+  "action-tooltip-folding-collapsed": "Развернуть",
+  "action-tooltip-folding-opened": "Свернуть",
+  "action-tooltip-close": "Закрыть"
+}

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

@@ -0,0 +1,30 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}message-list';
+
+#{$block} {
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex: 1;
+    align-self: stretch;
+    width: 100%;
+
+    &__messages {
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-4);
+    }
+
+    &__retry-button {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-1);
+    }
+
+    &__loader,
+    &__error-alert {
+        margin-top: var(--g-spacing-4);
+    }
+}

package/dist/components/organisms/MessageList/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "default-error-text": "(｡•́︿•̀｡) Whoops, something went wrong",
+  "retry-button": "Retry"
+}

package/dist/components/organisms/MessageList/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "default-error-text": "(｡•́︿•̀｡) Упс, что-то пошло не так",
+  "retry-button": "Повторить"
+}

package/dist/components/organisms/PromptInput/PromptInput.scss

@@ -0,0 +1,73 @@
+@use '../../../styles/variables.scss';
+
+$block: '.#{variables.$ns}prompt-input';
+
+#{$block} {
+    border-radius: var(--g-border-radius-xl);
+    border: 1px solid var(--g-color-line-generic);
+    background: var(--g-color-base-float);
+    overflow: hidden;
+
+    &_view_simple {
+        display: flex;
+        flex-direction: column;
+        padding: var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-3);
+    }
+
+    &_view_full {
+        display: flex;
+        padding: var(--g-spacing-2);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--g-spacing-2);
+    }
+
+    &__content {
+        display: flex;
+        align-items: flex-end;
+        gap: var(--g-spacing-2);
+        width: 100%;
+    }
+
+    &__panel-wrapper {
+        background: var(--g-color-base-simple-hover-solid);
+
+        border-radius: var(--g-border-radius-xl);
+    }
+
+    &__panel {
+        overflow: hidden;
+        transition:
+            max-height 0.3s ease-in-out,
+            opacity 0.3s ease-in-out,
+            margin 0.3s ease-in-out;
+        will-change: max-height, opacity, margin;
+
+        // Closed state
+        max-height: 0;
+        opacity: 0;
+        margin: 0;
+
+        // Open state
+        &_open {
+            max-height: var(
+                --g-aikit-prompt-input-panel-max-height
+            ); // Large enough value for most content
+            opacity: 1;
+        }
+
+        // Animation works thanks to useDelayedUnmount hook:
+        // - When isOpen=true, element is immediately added to DOM and animation plays
+        // - When isOpen=false, _open class is removed, animation plays,
+        //   then element is removed from DOM after transition completes (300ms)
+    }
+
+    &__suggestions-wrapper {
+        align-self: stretch;
+        flex: 1;
+    }
+
+    &__suggestions {
+        padding-bottom: var(--g-spacing-2);
+    }
+}

package/dist/{src/components → 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/{src/components → 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/ThinkingMessage.scss

@@ -0,0 +1,27 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}thinking-message';
+
+#{$block} {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-spacing-2);
+    padding: var(--g-spacing-1) 0 var(--g-spacing-1) var(--g-spacing-4);
+    border-left: 2px solid var(--g-color-line-generic);
+
+    &__buttons {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-2);
+    }
+
+    &__container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-6);
+    }
+
+    &__content {
+        color: var(--g-color-text-complementary);
+    }
+}

package/dist/components/organisms/ThinkingMessage/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "title-thinking": "Thinking",
+  "title-thought": "Thought"
+}

package/dist/components/organisms/ThinkingMessage/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "title-thinking": "Думает",
+  "title-thought": "Размышление"
+}

package/dist/{src/components → 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/organisms/ToolMessage/ToolMessage.scss

@@ -0,0 +1,19 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}tool-message';
+
+#{$block} {
+    padding: var(--g-spacing-2);
+    border-radius: var(--g-border-radius-xl);
+    width: 100%;
+
+    &_waiting {
+        border-color: var(--g-color-line-brand);
+    }
+
+    &__container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-2);
+    }
+}

package/dist/components/organisms/ToolMessage/i18n/en.json

@@ -0,0 +1,9 @@
+{
+  "action-reject": "Reject",
+  "action-accept": "Accept",
+  "action-cancel": "Cancel",
+  "action-collapse": "Collapse",
+  "action-expand": "Expand",
+  "status-waiting-confirmation": "Awaiting confirmation",
+  "status-waiting-submission": "Awaiting form submission"
+}

package/dist/components/organisms/ToolMessage/i18n/ru.json

@@ -0,0 +1,9 @@
+{
+  "action-reject": "Отклонить",
+  "action-accept": "Принять",
+  "action-cancel": "Отменить",
+  "action-collapse": "Свернуть",
+  "action-expand": "Развернуть",
+  "status-waiting-confirmation": "Ожидание подтверждения",
+  "status-waiting-submission": "Ожидание отправки формы"
+}

package/dist/components/organisms/UserMessage/UserMessage.scss

@@ -0,0 +1,10 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}user-message';
+
+#{$block} {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-spacing-1);
+    align-items: flex-end;
+}

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

@@ -0,0 +1,44 @@
+@use '../../../styles/variables';
+
+.#{variables.$ns}chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background: var(--g-aikit-chat-container-background);
+
+    &__header {
+        display: flex;
+        padding: var(--g-aikit-layout-base-padding-m);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--g-spacing-2);
+        align-self: stretch;
+        background: var(--g-aikit-chat-container-header-background);
+    }
+
+    &__content {
+        min-height: 0; // Important for proper overflow behavior in child elements
+        display: flex;
+        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);
+        gap: var(--g-spacing-2);
+        flex: 1 0 0;
+    }
+
+    &__footer {
+        display: flex;
+        padding: var(--g-aikit-layout-base-padding-m);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--g-spacing-1);
+        align-self: stretch;
+        background: var(--g-aikit-chat-container-footer-background);
+    }
+}

package/dist/components/pages/ChatContainer/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "header-default-title": "AI Chat",
+  "empty-state-title": "Welcome to AI Chat",
+  "empty-state-description": "Start a conversation by typing a message below or selecting a suggestion.",
+  "empty-state-suggestions-title": "Try asking:",
+  "empty-state-show-more": "Show more examples",
+  "prompt-placeholder": "Type your message...",
+  "history-empty": "No chat history yet",
+  "disclaimer-text": "AI can make mistakes. Check important info."
+}

package/dist/components/pages/ChatContainer/i18n/ru.json

@@ -0,0 +1,10 @@
+{
+  "header-default-title": "AI Чат",
+  "empty-state-title": "Добро пожаловать в AI Чат",
+  "empty-state-description": "Начните разговор, введя сообщение ниже или выбрав подсказку.",
+  "empty-state-suggestions-title": "Попробуйте спросить:",
+  "empty-state-show-more": "Показать больше примеров",
+  "prompt-placeholder": "Введите ваше сообщение...",
+  "history-empty": "История чатов пока пуста",
+  "disclaimer-text": "ИИ может ошибаться. Проверяйте важную информацию."
+}

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

@@ -0,0 +1,27 @@
+@use '../../../styles/variables';
+@use '../../../styles/functions' as *;
+
+$block: '.#{variables.$ns}chat-content';
+
+#{$block} {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    background: var(--g-aikit-chat-content-background);
+    align-items: flex-start;
+    gap: var(--g-spacing-2);
+    flex: 1 0 0;
+    align-self: stretch;
+
+    &__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);
+        align-self: stretch;
+        flex: 1;
+        min-height: 0;
+    }
+}