@gravity-ui/aikit 1.6.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/adapters/openai/helpers/mapOpenAIConversationsToChats.d.ts

@@ -0,0 +1,3 @@
+import type { ChatType } from '../../../types';
+import type { OpenAIConversationLike } from '../types/openAiTypes';
+export declare function mapOpenAIConversationsToChats(conversations: OpenAIConversationLike[] | null | undefined): ChatType[];

package/dist/adapters/openai/helpers/mapOpenAIConversationsToChats.js

@@ -0,0 +1,22 @@
+const DEFAULT_CHAT_NAME = 'Chat';
+function getConversationName(metadata) {
+    var _a;
+    const title = (_a = metadata === null || metadata === void 0 ? void 0 : metadata.title) !== null && _a !== void 0 ? _a : metadata === null || metadata === void 0 ? void 0 : metadata.name;
+    return title && title.trim() ? title.trim() : DEFAULT_CHAT_NAME;
+}
+export function mapOpenAIConversationsToChats(conversations) {
+    if (!Array.isArray(conversations)) {
+        return [];
+    }
+    return conversations.map((conv) => {
+        var _a, _b;
+        const createTime = conv.created_at ? new Date(conv.created_at * 1000).toISOString() : null;
+        return {
+            id: conv.id,
+            name: getConversationName(conv.metadata),
+            createTime,
+            lastMessage: ((_a = conv.metadata) === null || _a === void 0 ? void 0 : _a.last_message) || undefined,
+            metadata: (_b = conv.metadata) !== null && _b !== void 0 ? _b : undefined,
+        };
+    });
+}

package/dist/adapters/openai/index.d.ts

@@ -1,10 +1,13 @@
 export { fetchResponseToStreamEvents } from './helpers/fetchResponseToStreamEvents';
 export { getTextDeltaFromStreamEvent } from './helpers/getTextDeltaFromStreamEvent';
 export { isFetchResponse } from './helpers/isFetchResponse';
+export { mapOpenAIConversationsToChats } from './helpers/mapOpenAIConversationsToChats';
 export { isOutputItemDoneEvent } from './helpers/isOutputItemDoneEvent';
 export { isStreamEndOrErrorEvent } from './helpers/isStreamEndOrErrorEvent';
 export { openAIResponseToMessages } from './helpers/openAIResponseToMessages';
+export { useOpenAIConversationsAdapter } from './useOpenAIConversationsAdapter';
 export { useOpenAIResponsesAdapter, useOpenAIStreamAdapter } from './useOpenAIResponsesAdapter';
-export type { OpenAIStreamAdapterOptions, OpenAIStreamAdapterResult, OpenAIStreamSource, } from './types';
+export type { OpenAIStreamAdapterOptions, OpenAIStreamAdapterResult, OpenAIStreamAdapterStatus, OpenAIStreamSource, } from './types';
 export type { FetchResponseLike, OpenAIStreamEventLike } from './types';
-export type { OpenAIResponseLike } from './types/openAiTypes';
+export type { OpenAIResponseLike, OpenAIConversationLike } from './types/openAiTypes';
+export type { OpenAIConversationsListResponseLike, UseOpenAIConversationsAdapterResult, } from './useOpenAIConversationsAdapter';

package/dist/adapters/openai/index.js

@@ -1,7 +1,9 @@
 export { fetchResponseToStreamEvents } from './helpers/fetchResponseToStreamEvents';
 export { getTextDeltaFromStreamEvent } from './helpers/getTextDeltaFromStreamEvent';
 export { isFetchResponse } from './helpers/isFetchResponse';
+export { mapOpenAIConversationsToChats } from './helpers/mapOpenAIConversationsToChats';
 export { isOutputItemDoneEvent } from './helpers/isOutputItemDoneEvent';
 export { isStreamEndOrErrorEvent } from './helpers/isStreamEndOrErrorEvent';
 export { openAIResponseToMessages } from './helpers/openAIResponseToMessages';
+export { useOpenAIConversationsAdapter } from './useOpenAIConversationsAdapter';
 export { useOpenAIResponsesAdapter, useOpenAIStreamAdapter } from './useOpenAIResponsesAdapter';

package/dist/adapters/openai/types/index.d.ts

@@ -1,4 +1,5 @@
 import type { TChatMessage } from '../../../types';
+import type { ChatStatus } from '../../../types/chat';
 import type { OpenAIStreamEventLike } from './openAiTypes';
 export type FetchResponseLike = {
     body?: ReadableStream<Uint8Array> | null;
@@ -12,9 +13,11 @@ export type OpenAIStreamAdapterOptions = {
     assistantMessageId?: string;
     onStreamEnd?: (messages: TChatMessage[]) => void;
 };
+/** Status from useOpenAIStreamAdapter. Subset of ChatStatus (no 'submitted'); safe to pass to ChatContainer. */
+export type OpenAIStreamAdapterStatus = Exclude<ChatStatus, 'submitted'>;
 export type OpenAIStreamAdapterResult = {
     messages: TChatMessage[];
-    status: 'idle' | 'streaming' | 'done' | 'error';
+    status: OpenAIStreamAdapterStatus;
     error: Error | null;
 };
 export type OpenAIStreamSource = AsyncIterable<OpenAIStreamEventLike> | FetchResponseLike;

package/dist/adapters/openai/types/openAiTypes.d.ts

@@ -6,6 +6,12 @@
  * raw SSE and partial API responses.
  */
 import type { ResponseOutputRefusal, ResponseOutputText } from 'openai/resources/responses/responses';
+export type OpenAIConversationLike = {
+    id: string;
+    created_at: number;
+    metadata?: Record<string, string> | null;
+    object?: 'conversation';
+};
 /** Minimal response shape (Response subset); all optional for partial/SSE. */
 export type OpenAIResponseLike = {
     id?: string;

package/dist/adapters/openai/useOpenAIConversationsAdapter.d.ts

@@ -0,0 +1,9 @@
+import type { ChatType } from '../../types';
+import type { OpenAIConversationLike } from './types/openAiTypes';
+export type OpenAIConversationsListResponseLike = {
+    data?: OpenAIConversationLike[] | null;
+};
+export type UseOpenAIConversationsAdapterResult = {
+    chats: ChatType[];
+};
+export declare function useOpenAIConversationsAdapter(conversations: OpenAIConversationLike[] | OpenAIConversationsListResponseLike | null | undefined): UseOpenAIConversationsAdapterResult;

package/dist/adapters/openai/useOpenAIConversationsAdapter.js

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { mapOpenAIConversationsToChats } from './helpers/mapOpenAIConversationsToChats';
+function getConversationsList(input) {
+    var _a;
+    if (!input || Array.isArray(input))
+        return input;
+    if (typeof input === 'object' && 'data' in input)
+        return (_a = input.data) !== null && _a !== void 0 ? _a : null;
+    return null;
+}
+export function useOpenAIConversationsAdapter(conversations) {
+    const list = getConversationsList(conversations);
+    const chats = useMemo(() => mapOpenAIConversationsToChats(list), [list]);
+    return { chats };
+}

package/dist/adapters/openai/useOpenAIResponsesAdapter.d.ts

@@ -1,7 +1,7 @@
 import type { TChatMessage } from '../../types';
 import type { OpenAIStreamAdapterOptions, OpenAIStreamAdapterResult, OpenAIStreamSource } from './types';
 import { OpenAIResponseLike } from './types/openAiTypes';
-export type { OpenAIStreamAdapterOptions, OpenAIStreamAdapterResult, OpenAIStreamSource, } from './types';
+export type { OpenAIStreamAdapterOptions, OpenAIStreamAdapterResult, OpenAIStreamAdapterStatus, OpenAIStreamSource, } from './types';
 /** Single non-streaming response → TChatMessage[]. For streaming use useOpenAIStreamAdapter. */
 export declare function useOpenAIResponsesAdapter(response: OpenAIResponseLike | null): TChatMessage[];
 /**

package/dist/adapters/openai/useOpenAIResponsesAdapter.js

@@ -19,12 +19,12 @@ export function useOpenAIStreamAdapter(stream, options = {}) {
     const initialMessagesRef = useRef(initialMessages);
     initialMessagesRef.current = initialMessages;
     const [messages, setMessages] = useState(initialMessages);
-    const [status, setStatus] = useState('idle');
+    const [status, setStatus] = useState('ready');
     const [error, setError] = useState(null);
     const assistantMessageId = useMemo(() => optionId !== null && optionId !== void 0 ? optionId : `assistant-${Date.now()}`, [optionId]);
     useEffect(() => {
         if (!stream) {
-            setStatus('idle');
+            setStatus('ready');
             setError(null);
             return undefined;
         }
@@ -68,7 +68,7 @@ export function useOpenAIStreamAdapter(stream, options = {}) {
             },
             onEnd: (finalMessages, s, err) => {
                 var _a;
-                setStatus(s);
+                setStatus(s === 'done' ? 'ready' : s);
                 setError(err !== null && err !== void 0 ? err : null);
                 (_a = onStreamEndRef.current) === null || _a === void 0 ? void 0 : _a.call(onStreamEndRef, finalMessages);
             },

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