@gravity-ui/aikit 0.1.0 → 0.1.2

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

@@ -1,15 +1,5 @@
 'use client';
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp, Copy } from '@gravity-ui/icons';
 import { Button, Icon, Text } from '@gravity-ui/uikit';

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,41 @@
+@use '../../../styles/variables';
+
+.#{variables.$ns}chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-color: var(--g-color-base-background);
+    overflow: hidden;
+
+    &__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;
+    }
+
+    &__content {
+        min-height: 0; // Important for proper overflow behavior in child elements
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+
+        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;
+    }
+}

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;
+    }
+}

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

@@ -0,0 +1,86 @@
+@use '../../../styles/variables';
+
+.#{variables.$ns}empty-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-color: var(--g-aikit-empty-container-background);
+
+    &__content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-self: stretch;
+        gap: var(--g-aikit-empty-container-content-gap);
+        padding: var(--g-aikit-empty-container-padding);
+    }
+
+    &__welcome-section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-6);
+    }
+
+    &__text-container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-3);
+    }
+
+    &__image-container {
+        display: flex;
+        flex: 1;
+
+        &_align {
+            &_left {
+                justify-content: flex-start;
+            }
+
+            &_center {
+                justify-content: center;
+            }
+
+            &_right {
+                justify-content: flex-end;
+            }
+        }
+    }
+
+    &__title,
+    &__description {
+        &_align {
+            &_left {
+                text-align: left;
+            }
+
+            &_center {
+                text-align: center;
+            }
+
+            &_right {
+                text-align: right;
+            }
+        }
+    }
+
+    &__suggestions-section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-3);
+    }
+
+    &__suggestions-title {
+        display: flex;
+        padding: 0 var(--g-spacing-2);
+        align-items: flex-start;
+        gap: var(--g-spacing-2);
+        align-self: stretch;
+    }
+
+    &__show-more {
+        display: flex;
+        justify-content: flex-start;
+        padding-top: var(--g-spacing-2);
+    }
+}

package/dist/components/templates/EmptyContainer/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "show-more-button": "Show more examples"
+}

package/dist/components/templates/EmptyContainer/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "show-more-button": "Показать больше примеров"
+}