@gravity-ui/aikit 1.7.0 → 1.8.0

package/README.md

@@ -185,10 +185,8 @@ If you're on Linux, you can run tests locally:
 ```bash
 # Install Playwright browsers (run once)
 npm run playwright:install
-
 # Run all component tests
 npm run playwright
-
 # Update screenshot baselines
 npm run playwright:update
 ```

package/dist/components/atoms/Alert/Alert.css

@@ -0,0 +1,28 @@
+.g-aikit-alert {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-2);
+}
+.g-aikit-alert__header {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+.g-aikit-alert__text {
+  flex: 1;
+}
+.g-aikit-alert__icon {
+  flex-shrink: 0;
+}
+.g-aikit-alert__icon_variant_error {
+  color: var(--g-color-text-danger);
+}
+.g-aikit-alert__icon_variant_warning {
+  color: var(--g-color-text-warning-heavy);
+}
+.g-aikit-alert__icon_variant_info {
+  color: var(--g-color-text-info);
+}
+.g-aikit-alert__action {
+  margin-left: auto;
+}

package/dist/components/atoms/ChatDate/ChatDate.css

@@ -0,0 +1,9 @@
+.g-aikit-chat-date {
+  color: var(--g-color-text-secondary);
+  font-family: var(--g-text-body-font-family);
+  font-size: var(--g-text-body-1-font-size);
+  font-style: normal;
+  font-weight: var(--g-text-body-font-weight);
+  line-height: var(--g-text-body-1-line-height);
+  display: inline-block;
+}

package/dist/components/atoms/ContextIndicator/ContextIndicator.css

@@ -0,0 +1,66 @@
+.g-aikit-context-indicator__container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.g-aikit-context-indicator__container_orientation_horizontal {
+  flex-direction: row;
+}
+.g-aikit-context-indicator__container_orientation_horizontal.g-aikit-context-indicator__container_reversed {
+  flex-direction: row-reverse;
+}
+.g-aikit-context-indicator__container_orientation_vertical {
+  flex-direction: column;
+}
+.g-aikit-context-indicator__container_orientation_vertical.g-aikit-context-indicator__container_reversed {
+  flex-direction: column-reverse;
+}
+.g-aikit-context-indicator__progress {
+  --percentage: 0;
+  --progress-color: var(--g-aikit-ci-color-progress-1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  position: relative;
+}
+.g-aikit-context-indicator__progress::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  opacity: 0.3;
+  background: var(--progress-color);
+  opacity: 0.3;
+}
+.g-aikit-context-indicator__progress::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  opacity: 1;
+  background: conic-gradient(var(--progress-color) 0deg, var(--progress-color) calc(3.6deg * var(--percentage)), transparent calc(3.6deg * var(--percentage)), transparent 360deg);
+}
+.g-aikit-context-indicator__inner {
+  box-sizing: border-box;
+  width: calc(100% - 4px);
+  height: calc(100% - 4px);
+  border-radius: 50%;
+  background: var(--g-aikit-color-bg-primary);
+  position: relative;
+  z-index: 1;
+}
+.g-aikit-context-indicator__value {
+  color: var(--g-color-text-primary);
+  font-family: var(--g-text-body-font-family);
+  font-size: var(--g-text-body-1-font-size);
+  font-style: normal;
+  font-weight: var(--g-text-body-font-weight);
+  line-height: var(--g-text-body-1-line-height);
+}
+.g-aikit-context-indicator__value::after {
+  content: "%";
+}

package/dist/components/atoms/DiffStat/DiffStat.css

@@ -0,0 +1,23 @@
+.g-aikit-diff-stat {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--g-color-text-danger);
+  font-family: var(--g-text-code-font-family);
+  font-size: var(--g-text-code-inline-1);
+  font-style: normal;
+  font-weight: var(--g-text-code-font-weight);
+  line-height: var(--g-text-code-inline-1-line-height);
+}
+.g-aikit-diff-stat__added {
+  color: var(--g-color-text-positive-heavy);
+}
+.g-aikit-diff-stat__added_allow_sign::before {
+  content: "+";
+}
+.g-aikit-diff-stat__deleted {
+  color: var(--g-color-text-danger);
+}
+.g-aikit-diff-stat__deleted_allow_sign::before {
+  content: "-";
+}

package/dist/components/atoms/Disclaimer/Disclaimer.css

@@ -0,0 +1,7 @@
+.g-aikit-disclaimer__container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--g-aikit-disclaimer-gap);
+  align-self: stretch;
+}

package/dist/components/atoms/IntersectionContainer/IntersectionContainer.css

@@ -0,0 +1,3 @@
+.g-aikit-intersection-container {
+  width: 100%;
+}

package/dist/components/atoms/Loader/Loader.css

@@ -0,0 +1,48 @@
+@keyframes pulse {
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 70%;
+  }
+  0% {
+    opacity: 40%;
+  }
+}
+.g-aikit-loader {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--g-spacing-1);
+}
+.g-aikit-loader__left, .g-aikit-loader__center, .g-aikit-loader__right {
+  background: var(--g-color-text-secondary);
+  border-radius: 50%;
+  animation: pulse ease 800ms infinite;
+}
+.g-aikit-loader_size_xs .g-aikit-loader__left,
+.g-aikit-loader_size_xs .g-aikit-loader__center,
+.g-aikit-loader_size_xs .g-aikit-loader__right {
+  width: 3px;
+  height: 3px;
+}
+.g-aikit-loader_size_s .g-aikit-loader__left,
+.g-aikit-loader_size_s .g-aikit-loader__center,
+.g-aikit-loader_size_s .g-aikit-loader__right {
+  width: 5px;
+  height: 5px;
+}
+.g-aikit-loader_size_m .g-aikit-loader__left,
+.g-aikit-loader_size_m .g-aikit-loader__center,
+.g-aikit-loader_size_m .g-aikit-loader__right {
+  width: 8px;
+  height: 8px;
+}
+.g-aikit-loader__left {
+  animation-delay: 200ms;
+}
+.g-aikit-loader__center {
+  animation-delay: 400ms;
+}
+.g-aikit-loader__right {
+  animation-delay: 600ms;
+}

package/dist/components/atoms/MarkdownRenderer/MarkdownRenderer.css

@@ -0,0 +1,5 @@
+@import '@diplodoc/transform/dist/css/yfm.css';
+.g-aikit-markdown-renderer {
+  max-width: 100%;
+  color: var(--g-color-text-primary);
+}

package/dist/components/atoms/MessageBalloon/MessageBalloon.css

@@ -0,0 +1,7 @@
+.g-aikit-message-balloon {
+  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.css

@@ -0,0 +1,18 @@
+.g-aikit-shimmer__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.css

@@ -0,0 +1,20 @@
+.g-aikit-submit-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.g-aikit-submit-button_size_s.g-aikit-submit-button_loading {
+  padding: 4px;
+}
+.g-aikit-submit-button_size_m.g-aikit-submit-button_loading {
+  padding: 6px;
+}
+.g-aikit-submit-button_size_l.g-aikit-submit-button_loading {
+  padding: 10px;
+}
+.g-aikit-submit-button__loader {
+  display: flex;
+}
+.g-aikit-submit-button__spinner {
+  --g-color-line-brand: var(--g-color-text-brand-contrast);
+}

package/dist/components/atoms/ToolIndicator/ToolIndicator.css

@@ -0,0 +1,9 @@
+.g-aikit-tool-indicator__success {
+  color: var(--g-color-text-positive);
+}
+.g-aikit-tool-indicator__error {
+  color: var(--g-color-text-danger);
+}
+.g-aikit-tool-indicator__info {
+  color: var(--g-color-text-secondary);
+}

package/dist/components/molecules/BaseMessage/BaseMessage.css

@@ -0,0 +1,26 @@
+.g-aikit-base-message {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-1);
+}
+.g-aikit-base-message_variant_user {
+  align-items: flex-end;
+  max-width: 90%;
+}
+.g-aikit-base-message_variant_system, .g-aikit-base-message_variant_assistant {
+  align-items: flex-start;
+}
+.g-aikit-base-message_btn-hover .g-aikit-base-message__actions {
+  visibility: hidden;
+}
+.g-aikit-base-message_btn-hover:hover .g-aikit-base-message__actions {
+  visibility: visible;
+}
+.g-aikit-base-message__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-3);
+}
+.g-aikit-base-message__actions_reverse {
+  flex-direction: row-reverse;
+}

package/dist/components/molecules/ButtonGroup/ButtonGroup.css

@@ -0,0 +1,13 @@
+.g-aikit-button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--g-spacing-1);
+}
+.g-aikit-button-group_or_vertical {
+  flex-direction: column;
+  justify-content: center;
+}
+.g-aikit-button-group_or_horizontal {
+  flex-direction: row;
+  align-items: center;
+}

package/dist/components/molecules/PromptInputBody/PromptInputBody.css

@@ -0,0 +1,15 @@
+.g-aikit-prompt-input-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-self: stretch;
+}
+.g-aikit-prompt-input-body__textarea {
+  width: 100%;
+}
+.g-aikit-prompt-input-body__textarea-control {
+  resize: none;
+}
+.g-aikit-prompt-input-body .g-text-area_disabled {
+  --_--background-color: none;
+}

package/dist/components/molecules/PromptInputFooter/PromptInputFooter.css

@@ -0,0 +1,18 @@
+.g-aikit-prompt-input-footer {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  align-self: stretch;
+  gap: var(--g-spacing-1);
+}
+.g-aikit-prompt-input-footer__action-button {
+  color: var(--g-color-text-secondary);
+}
+.g-aikit-prompt-input-footer__action-button:hover {
+  color: var(--g-color-text-primary);
+}
+.g-aikit-prompt-input-footer__content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}

package/dist/components/molecules/PromptInputHeader/PromptInputHeader.css

@@ -0,0 +1,21 @@
+.g-aikit-prompt-input-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--g-spacing-2);
+  align-self: stretch;
+}
+.g-aikit-prompt-input-header__context-items {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-1);
+  flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
+}
+.g-aikit-prompt-input-header__context-indicator {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+}

package/dist/components/molecules/PromptInputPanel/PromptInputPanel.css

@@ -0,0 +1,7 @@
+.g-aikit-prompt-input-panel {
+  display: flex;
+  padding: var(--g-spacing-2);
+  flex-direction: row;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}

package/dist/components/molecules/Suggestions/Suggestions.css

@@ -0,0 +1,71 @@
+.g-aikit-suggestions__container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-2);
+}
+.g-aikit-suggestions__title {
+  padding-bottom: 0;
+}
+.g-aikit-suggestions {
+  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;
+}
+.g-aikit-suggestions_layout_grid {
+  flex-direction: row;
+}
+.g-aikit-suggestions_layout_list {
+  flex-direction: column;
+}
+.g-aikit-suggestions_layout_list .g-aikit-suggestions__button {
+  width: 100%;
+}
+.g-aikit-suggestions__button {
+  padding: calc(var(--g-spacing-base) * 2) calc(var(--g-spacing-base) * 4);
+  height: 100%;
+  box-shadow: none;
+}
+.g-aikit-suggestions__button .g-button__text {
+  width: 100%;
+}
+.g-aikit-suggestions__button-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  gap: calc(var(--g-spacing-base) * 1);
+  min-width: 0;
+}
+.g-aikit-suggestions__button-content_text-align_left {
+  justify-content: flex-start;
+}
+.g-aikit-suggestions__button-content_text-align_center {
+  justify-content: center;
+}
+.g-aikit-suggestions__button-content_text-align_right {
+  justify-content: flex-end;
+}
+.g-aikit-suggestions__button-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.g-aikit-suggestions__button-text-wrap {
+  word-break: break-word;
+  white-space: normal;
+  min-width: 0;
+  text-align: left;
+}
+.g-aikit-suggestions__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.css

@@ -0,0 +1,35 @@
+.g-aikit-tabs {
+  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;
+}
+.g-aikit-tabs:hover {
+  scrollbar-color: var(--g-color-base-generic-medium) transparent;
+}
+.g-aikit-tabs::-webkit-scrollbar {
+  height: 6px;
+}
+.g-aikit-tabs::-webkit-scrollbar-track {
+  background: transparent;
+}
+.g-aikit-tabs::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 3px;
+  transition: background-color 0.3s ease-in-out;
+}
+.g-aikit-tabs:hover::-webkit-scrollbar-thumb {
+  background-color: var(--g-color-base-generic-medium);
+}
+.g-aikit-tabs__tab {
+  flex-shrink: 0;
+  cursor: default;
+  overflow: hidden;
+}

package/dist/components/molecules/ToolFooter/ToolFooter.css

@@ -0,0 +1,10 @@
+.g-aikit-tool-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.g-aikit-tool-footer__left {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}

package/dist/components/molecules/ToolHeader/ToolHeader.css

@@ -0,0 +1,18 @@
+.g-aikit-tool-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 24px;
+  gap: var(--g-spacing-2);
+}
+.g-aikit-tool-header__left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+.g-aikit-tool-header__right {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-3);
+}

package/dist/components/molecules/ToolStatus/ToolStatus.css

@@ -0,0 +1 @@
+

package/dist/components/organisms/AssistantMessage/AssistantMessage.css

@@ -0,0 +1,6 @@
+.g-aikit-assistant-message__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-3);
+  width: 100%;
+}

package/dist/components/organisms/Header/Header.css

@@ -0,0 +1,40 @@
+.g-aikit-header {
+  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);
+}
+.g-aikit-header__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.g-aikit-header__title-container {
+  display: flex;
+  gap: var(--g-spacing-1);
+  flex: 1;
+  align-items: baseline;
+}
+.g-aikit-header__title-container_position_left {
+  justify-content: flex-start;
+}
+.g-aikit-header__title-container_position_center {
+  justify-content: center;
+}
+.g-aikit-header__title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.g-aikit-header__preview {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.g-aikit-header__action-button {
+  flex-shrink: 0;
+}

package/dist/components/organisms/MessageList/MessageList.css

@@ -0,0 +1,26 @@
+.g-aikit-message-list {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+  align-self: stretch;
+}
+.g-aikit-message-list__messages {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-4);
+}
+.g-aikit-message-list__retry-button {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-1);
+}
+.g-aikit-message-list__loader, .g-aikit-message-list__error-alert {
+  margin-top: var(--g-spacing-4);
+}
+.g-aikit-message-list__load-trigger {
+  display: flex;
+  justify-content: center;
+  padding: var(--g-spacing-2);
+}

package/dist/components/organisms/PromptInput/PromptInput.css

@@ -0,0 +1,50 @@
+.g-aikit-prompt-input {
+  border-radius: var(--g-border-radius-xl);
+  border: 1px solid var(--g-color-line-generic);
+  background: var(--g-color-base-float);
+  overflow: hidden;
+}
+.g-aikit-prompt-input_view_simple {
+  display: flex;
+  flex-direction: column;
+  padding: var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-3);
+}
+.g-aikit-prompt-input_view_full {
+  display: flex;
+  padding: var(--g-spacing-2);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--g-spacing-2);
+}
+.g-aikit-prompt-input_view_full .g-aikit-prompt-input__textarea {
+  padding-top: 0;
+}
+.g-aikit-prompt-input__content {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--g-spacing-2);
+  width: 100%;
+}
+.g-aikit-prompt-input__panel-wrapper {
+  background: var(--g-color-base-simple-hover-solid);
+  border-radius: var(--g-border-radius-xl);
+}
+.g-aikit-prompt-input__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;
+  max-height: 0;
+  opacity: 0;
+  margin: 0;
+}
+.g-aikit-prompt-input__panel_open {
+  max-height: var(--g-aikit-prompt-input-panel-max-height);
+  opacity: 1;
+}
+.g-aikit-prompt-input__suggestions-wrapper {
+  align-self: stretch;
+  flex: 1;
+}
+.g-aikit-prompt-input__suggestions {
+  padding-bottom: var(--g-spacing-2);
+}

package/dist/components/organisms/ThinkingMessage/ThinkingMessage.css

@@ -0,0 +1,20 @@
+.g-aikit-thinking-message {
+  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);
+}
+.g-aikit-thinking-message__buttons {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+.g-aikit-thinking-message__container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-6);
+}
+.g-aikit-thinking-message__content {
+  color: var(--g-color-text-complementary);
+}

package/dist/components/organisms/ToolMessage/ToolMessage.css

@@ -0,0 +1,13 @@
+.g-aikit-tool-message {
+  padding: var(--g-spacing-2);
+  border-radius: var(--g-border-radius-xl);
+  width: 100%;
+}
+.g-aikit-tool-message_waiting {
+  border-color: var(--g-color-line-brand);
+}
+.g-aikit-tool-message__container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-2);
+}