@gravity-ui/aikit 1.7.0 → 1.8.0

package/dist/components/atoms/Loader/Loader.scss

@@ -1,72 +0,0 @@
-@use '../../../styles/variables';
-
-$block: '.#{variables.$ns}loader';
-
-$pulse-duration: 800ms;
-$pulse-delay: $pulse-duration * 0.25;
-$animation: pulse ease $pulse-duration infinite;
-
-@keyframes pulse {
-    100% {
-        opacity: 0;
-    }
-    50% {
-        opacity: 70%;
-    }
-    0% {
-        opacity: 40%;
-    }
-}
-
-#{$block} {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--g-spacing-1);
-
-    &__left,
-    &__center,
-    &__right {
-        background: var(--g-color-text-secondary);
-        border-radius: 50%;
-        animation: $animation;
-    }
-
-    &_size_xs {
-        #{$block}__left,
-        #{$block}__center,
-        #{$block}__right {
-            width: 3px;
-            height: 3px;
-        }
-    }
-
-    &_size_s {
-        #{$block}__left,
-        #{$block}__center,
-        #{$block}__right {
-            width: 5px;
-            height: 5px;
-        }
-    }
-
-    &_size_m {
-        #{$block}__left,
-        #{$block}__center,
-        #{$block}__right {
-            width: 8px;
-            height: 8px;
-        }
-    }
-
-    &__left {
-        animation-delay: $pulse-delay;
-    }
-
-    &__center {
-        animation-delay: 2 * $pulse-delay;
-    }
-
-    &__right {
-        animation-delay: 3 * $pulse-delay;
-    }
-}

package/dist/components/atoms/MarkdownRenderer/MarkdownRenderer.scss

@@ -1,10 +0,0 @@
-@use '../../../styles/variables';
-
-@import '@diplodoc/transform/dist/css/yfm.css';
-
-$block: '.#{variables.$ns}markdown-renderer';
-
-#{$block} {
-    max-width: 100%;
-    color: var(--g-color-text-primary);
-}

package/dist/components/atoms/MessageBalloon/MessageBalloon.scss

@@ -1,11 +0,0 @@
-@use '../../../styles/variables';
-
-$block: '.#{variables.$ns}message-balloon';
-
-#{$block} {
-    display: inline-block;
-    background-color: var(--g-color-base-info-light);
-    padding: var(--g-spacing-2) var(--g-spacing-3);
-    border-radius: var(--g-spacing-3) 0 var(--g-spacing-3) var(--g-spacing-3);
-    max-width: 100%;
-}

package/dist/components/atoms/Shimmer/Shimmer.scss

@@ -1,32 +0,0 @@
-@use '../../../styles/variables';
-
-$block: '.#{variables.$ns}shimmer';
-
-#{$block} {
-    &__container {
-        position: relative;
-        display: inline-block;
-
-        color: var(--g-aikit-text-primary, inherit);
-        mask-image: linear-gradient(
-            90deg,
-            var(--g-aikit-shimmer-color-from) 0%,
-            var(--g-aikit-shimmer-color-from) 40%,
-            var(--g-aikit-shimmer-color-to) 50%,
-            var(--g-aikit-shimmer-color-from) 60%,
-            var(--g-aikit-shimmer-color-from) 100%
-        );
-        mask-size: var(--g-aikit-shimmer-gradient-size) 100%;
-        mask-clip: text;
-        animation: shimmer var(--g-aikit-shimmer-duration) infinite linear;
-    }
-}
-
-@keyframes shimmer {
-    0% {
-        mask-position: 200% 50%;
-    }
-    100% {
-        mask-position: 0% 50%;
-    }
-}

package/dist/components/atoms/SubmitButton/SubmitButton.scss

@@ -1,29 +0,0 @@
-@use '../../../styles/variables';
-
-$block: '.#{variables.$ns}submit-button';
-
-#{$block} {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &_size_s#{&}_loading {
-        padding: 4px;
-    }
-
-    &_size_m#{&}_loading {
-        padding: 6px;
-    }
-
-    &_size_l#{&}_loading {
-        padding: 10px;
-    }
-
-    &__loader {
-        display: flex;
-    }
-
-    &__spinner {
-        --g-color-line-brand: var(--g-color-text-brand-contrast);
-    }
-}

package/dist/components/atoms/ToolIndicator/ToolIndicator.scss

@@ -1,15 +0,0 @@
-@use '../../../styles/variables';
-
-$block: '.#{variables.$ns}tool-indicator';
-
-#{$block} {
-    &__success {
-        color: var(--g-color-text-positive);
-    }
-    &__error {
-        color: var(--g-color-text-danger);
-    }
-    &__info {
-        color: var(--g-color-text-secondary);
-    }
-}

package/dist/components/molecules/BaseMessage/BaseMessage.scss

@@ -1,41 +0,0 @@
-@use '../../../styles/variables';
-
-$block: '.#{variables.$ns}base-message';
-
-#{$block} {
-    display: flex;
-    flex-direction: column;
-    gap: var(--g-spacing-1);
-
-    &_variant_user {
-        align-items: flex-end;
-        max-width: 90%;
-    }
-
-    &_variant_system,
-    &_variant_assistant {
-        align-items: flex-start;
-    }
-
-    &_btn-hover {
-        #{$block}__actions {
-            visibility: hidden;
-        }
-
-        &:hover {
-            #{$block}__actions {
-                visibility: visible;
-            }
-        }
-    }
-
-    &__actions {
-        display: flex;
-        align-items: center;
-        gap: var(--g-spacing-3);
-
-        &_reverse {
-            flex-direction: row-reverse;
-        }
-    }
-}

package/dist/components/molecules/ButtonGroup/ButtonGroup.scss

@@ -1,19 +0,0 @@
-@use '../../../styles/variables';
-
-$block: '.#{variables.$ns}button-group';
-
-#{$block} {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--g-spacing-1);
-
-    &_or_vertical {
-        flex-direction: column;
-        justify-content: center;
-    }
-
-    &_or_horizontal {
-        flex-direction: row;
-        align-items: center;
-    }
-}

package/dist/components/molecules/PromptInputBody/PromptInputBody.scss

@@ -1,22 +0,0 @@
-@use '../../../styles/variables.scss';
-
-$block: '.#{variables.$ns}prompt-input-body';
-
-#{$block} {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    align-self: stretch;
-
-    &__textarea {
-        width: 100%;
-    }
-
-    &__textarea-control {
-        resize: none;
-    }
-
-    .g-text-area_disabled {
-        --_--background-color: none;
-    }
-}

package/dist/components/molecules/PromptInputFooter/PromptInputFooter.scss

@@ -1,25 +0,0 @@
-@use '../../../styles/variables.scss';
-
-$block: '.#{variables.$ns}prompt-input-footer';
-
-#{$block} {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    align-self: stretch;
-    gap: var(--g-spacing-1);
-
-    &__action-button {
-        color: var(--g-color-text-secondary);
-
-        &:hover {
-            color: var(--g-color-text-primary);
-        }
-    }
-
-    &__content {
-        display: flex;
-        align-items: center;
-        flex: 1;
-    }
-}

package/dist/components/molecules/PromptInputHeader/PromptInputHeader.scss

@@ -1,27 +0,0 @@
-@use '../../../styles/variables.scss';
-
-$block: '.#{variables.$ns}prompt-input-header';
-
-#{$block} {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--g-spacing-2);
-    align-self: stretch;
-
-    &__context-items {
-        display: flex;
-        align-items: center;
-        gap: var(--g-spacing-1);
-        flex-wrap: wrap;
-        flex: 1;
-        min-width: 0;
-    }
-
-    &__context-indicator {
-        display: flex;
-        align-items: center;
-        flex-shrink: 0;
-        margin-left: auto;
-    }
-}

package/dist/components/molecules/PromptInputPanel/PromptInputPanel.scss

@@ -1,11 +0,0 @@
-@use '../../../styles/variables.scss';
-
-$block: '.#{variables.$ns}prompt-input-panel';
-
-#{$block} {
-    display: flex;
-    padding: var(--g-spacing-2);
-    flex-direction: row;
-    align-items: center;
-    gap: var(--g-spacing-2);
-}

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

@@ -1,90 +0,0 @@
-@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

@@ -1,46 +0,0 @@
-@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/ToolFooter/ToolFooter.scss

@@ -1,15 +0,0 @@
-@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

@@ -1,24 +0,0 @@
-@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/molecules/ToolStatus/ToolStatus.scss

@@ -1,6 +0,0 @@
-@use '../../../styles/variables';
-
-$block: '.#{variables.$ns}tool-status';
-
-#{$block} {
-}

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

@@ -1,10 +0,0 @@
-@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

@@ -1,51 +0,0 @@
-@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/MessageList/MessageList.scss

@@ -1,35 +0,0 @@
-@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;
-
-    &__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);
-    }
-
-    &__load-trigger {
-        display: flex;
-        justify-content: center;
-        padding: var(--g-spacing-2);
-    }
-}

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

@@ -1,77 +0,0 @@
-@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);
-    }
-
-    &_view_full &__textarea {
-        padding-top: 0;
-    }
-
-    &__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);
-    }
-}