@gravity-ui/aikit 1.7.0 → 1.9.0

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/Suggestions/Suggestions.js

@@ -3,7 +3,7 @@ import { ChevronLeft, ChevronRight } from '@gravity-ui/icons';
 import { Icon, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
 import { ActionButton } from '../../atoms';
-import './Suggestions.scss';
+import './Suggestions.css';
 const b = block('suggestions');
 /**
  * Suggestions component displays a group of clickable suggestion buttons

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/Tabs/Tabs.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { Label } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
-import './Tabs.scss';
+import './Tabs.css';
 const b = block('tabs');
 export const Tabs = (props) => {
     const { items, activeId, onSelectItem, onDeleteItem, allowDelete = false, className, style, qa, } = props;

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/ToolFooter/index.js

@@ -5,7 +5,7 @@ import { isActionConfig } from '../../../utils/actionUtils';
 import { block } from '../../../utils/cn';
 import { Loader, Shimmer } from '../../atoms';
 import { ButtonGroup } from '../ButtonGroup';
-import './ToolFooter.scss';
+import './ToolFooter.css';
 const b = block('tool-footer');
 export function ToolFooter({ actions, content, showLoader = true, className, qa }) {
     return (_jsxs("div", { className: b('', className), "data-qa": qa, children: [_jsxs("div", { className: b('left'), children: [showLoader && _jsx(Loader, { view: "loading", size: "xs" }), content && (_jsx(Shimmer, { children: _jsx(Text, { children: content }) }))] }), _jsx(ButtonGroup, { children: actions.map((action, index) => {

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/ToolHeader/index.js

@@ -6,7 +6,7 @@ import { block } from '../../../utils/cn';
 import { ActionButton } from '../../atoms';
 import { ButtonGroup } from '../ButtonGroup';
 import { ToolStatus } from '../ToolStatus';
-import './ToolHeader.scss';
+import './ToolHeader.css';
 const b = block('tool-header');
 export function ToolHeader(props) {
     const { toolIcon, toolName, content, actions, status, className, qa } = props;

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

@@ -0,0 +1 @@
+

package/dist/components/molecules/ToolStatus/index.js

@@ -3,7 +3,7 @@ import { Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
 import { ToolIndicator } from '../../atoms';
 import { i18n } from './i18n';
-import './ToolStatus.scss';
+import './ToolStatus.css';
 const b = block('tool-status');
 function getIndicatorStatus(status) {
     if (status === 'success' || status === 'error' || status === 'loading') {

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/AssistantMessage/AssistantMessage.d.ts

@@ -3,7 +3,7 @@ import type { BaseMessageProps, TAssistantMessage, TMessageContent, TMessageMeta
 import { type MessageRendererRegistry } from '../../../utils/messageTypeRegistry';
 import './AssistantMessage.scss';
 type BaseMessagePick = Pick<BaseMessageProps, 'actions' | 'timestamp' | 'showActionsOnHover' | 'showTimestamp'>;
-type AssistantMessagePick<TContent extends TMessageContent> = Pick<TAssistantMessage<TContent, TMessageMetadata>, 'id' | 'content'>;
+type AssistantMessagePick<TContent extends TMessageContent> = Pick<TAssistantMessage<TContent, TMessageMetadata>, 'id' | 'content' | 'userRating'>;
 export type AssistantMessageProps<TContent extends TMessageContent = never> = BaseMessagePick & AssistantMessagePick<TContent> & {
     messageRendererRegistry?: MessageRendererRegistry;
     transformOptions?: OptionsType;
@@ -11,5 +11,5 @@ export type AssistantMessageProps<TContent extends TMessageContent = never> = Ba
     className?: string;
     qa?: string;
 };
-export declare function AssistantMessage<TContent extends TMessageContent = never>({ content, actions, timestamp, id, messageRendererRegistry, transformOptions, shouldParseIncompleteMarkdown, showActionsOnHover, showTimestamp, className, qa, }: AssistantMessageProps<TContent>): import("react/jsx-runtime").JSX.Element | null;
+export declare function AssistantMessage<TContent extends TMessageContent = never>({ content, actions, timestamp, id, messageRendererRegistry, transformOptions, shouldParseIncompleteMarkdown, showActionsOnHover, showTimestamp, userRating, className, qa, }: AssistantMessageProps<TContent>): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/organisms/AssistantMessage/AssistantMessage.js

@@ -5,9 +5,9 @@ import { getMessageRenderer, mergeMessageRendererRegistries, } from '../../../ut
 import { normalizeContent } from '../../../utils/messageUtils';
 import { BaseMessage } from '../../molecules/BaseMessage';
 import { createDefaultMessageRegistry } from './defaultMessageTypeRegistry';
-import './AssistantMessage.scss';
+import './AssistantMessage.css';
 const b = block('assistant-message');
-export function AssistantMessage({ content, actions, timestamp, id, messageRendererRegistry, transformOptions, shouldParseIncompleteMarkdown, showActionsOnHover, showTimestamp, className, qa, }) {
+export function AssistantMessage({ content, actions, timestamp, id, messageRendererRegistry, transformOptions, shouldParseIncompleteMarkdown, showActionsOnHover, showTimestamp, userRating, className, qa, }) {
     const registry = useMemo(() => {
         const defaultRegistry = createDefaultMessageRegistry(transformOptions, shouldParseIncompleteMarkdown);
         if (messageRendererRegistry) {
@@ -27,5 +27,5 @@ export function AssistantMessage({ content, actions, timestamp, id, messageRende
         const key = part.id || `${id || 'message'}-part-${partIndex}`;
         return _jsx(PartComponent, { part: part }, key);
     };
-    return (_jsx(BaseMessage, { role: "assistant", actions: actions, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp, timestamp: timestamp, className: b(null, className), qa: qa, children: _jsx("div", { className: b('content'), children: parts.map((part, index) => renderPart(part, index)) }) }));
+    return (_jsx(BaseMessage, { role: "assistant", actions: actions, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp, timestamp: timestamp, userRating: userRating, className: b(null, className), qa: qa, children: _jsx("div", { className: b('content'), children: parts.map((part, index) => renderPart(part, index)) }) }));
 }

package/dist/components/organisms/AssistantMessage/__stories__/AssistantMessage.stories.d.ts

@@ -4,6 +4,7 @@ import type { TMessageContent } from '../../../../types/messages';
 declare const _default: Meta;
 export default _default;
 export declare const Playground: StoryFn<AssistantMessageProps>;
+export declare const WithUserRating: StoryObj<AssistantMessageProps>;
 export declare const WithToolCall: StoryObj<AssistantMessageProps>;
 export declare const WithThinkingContent: StoryObj<AssistantMessageProps>;
 interface CustomMessageData {

package/dist/components/organisms/AssistantMessage/__stories__/AssistantMessage.stories.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-console */
 import { Pencil } from '@gravity-ui/icons';
 import { Icon, Text } from '@gravity-ui/uikit';
@@ -45,6 +45,11 @@ export default {
             control: 'boolean',
             description: 'Show timestamp in actions area',
         },
+        userRating: {
+            control: 'radio',
+            options: [undefined, 'like', 'dislike'],
+            description: 'Current user rating (filled like/unlike icons when set)',
+        },
         className: {
             control: 'text',
             description: 'Additional CSS class',
@@ -102,6 +107,12 @@ Playground.args = {
     timestamp: simpleMessage.timestamp,
     id: simpleMessage.id,
 };
+export const WithUserRating = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Rated like", width: "400px", children: _jsx(AssistantMessage, Object.assign({}, args, { content: "This message has userRating: like (thumb up filled).", actions: actions, userRating: "like" })) }), _jsx(ShowcaseItem, { title: "Rated dislike", width: "400px", children: _jsx(AssistantMessage, Object.assign({}, args, { content: "This message has userRating: dislike (thumb down filled).", actions: actions, userRating: "dislike" })) })] })),
+    decorators: [
+        (Story) => (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(Story, {}) }) })),
+    ],
+};
 export const WithToolCall = {
     render: (args) => (_jsx(ShowcaseItem, { title: "With Tool Call", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(AssistantMessage, Object.assign({}, args, { content: multiPartMessage.content, actions: actions, timestamp: multiPartMessage.timestamp, id: multiPartMessage.id })) }) })),
     decorators: [

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/Header/Header.js

@@ -9,7 +9,7 @@ import { ButtonGroup } from '../../molecules';
 import { i18n } from './i18n';
 import { HeaderAction } from './types';
 import { useHeader } from './useHeader';
-import './Header.scss';
+import './Header.css';
 const b = block('header');
 // Icons for base actions
 const ACTION_ICONS = {

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/MessageList/MessageList.js

@@ -7,7 +7,7 @@ import { Loader } from '../../atoms/Loader';
 import { AssistantMessage } from '../AssistantMessage';
 import { UserMessage } from '../UserMessage';
 import { ErrorAlert } from './ErrorAlert';
-import './MessageList.scss';
+import './MessageList.css';
 const b = block('message-list');
 export function MessageList({ messages, messageRendererRegistry, transformOptions, shouldParseIncompleteMarkdown, showActionsOnHover, showTimestamp, showAvatar, userActions, assistantActions, loaderStatuses = ['submitted', 'streaming_loading'], className, qa, status, errorMessage, onRetry, hasPreviousMessages = false, onLoadPreviousMessages, }) {
     const isStreaming = status === 'streaming' || status === 'streaming_loading';
@@ -34,7 +34,7 @@ export function MessageList({ messages, messageRendererRegistry, transformOption
             const actions = showActions && !hasOnlyThinkingContent(message.content)
                 ? resolveMessageActions(message, assistantActions)
                 : undefined;
-            return (_jsx(AssistantMessage, { content: message.content, actions: actions, timestamp: message.timestamp, id: message.id, messageRendererRegistry: messageRendererRegistry, transformOptions: transformOptions, shouldParseIncompleteMarkdown: shouldParseIncompleteMarkdown, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp }, message.id || `message-${index}`));
+            return (_jsx(AssistantMessage, { content: message.content, actions: actions, timestamp: message.timestamp, id: message.id, messageRendererRegistry: messageRendererRegistry, transformOptions: transformOptions, shouldParseIncompleteMarkdown: shouldParseIncompleteMarkdown, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp, userRating: message.userRating }, message.id || `message-${index}`));
         }
         return null;
     };

package/dist/components/organisms/MessageList/__stories__/MessageList.stories.d.ts

@@ -22,4 +22,5 @@ type ChartMessageContent = TMessageContent<'chart', ChartMessageData>;
 export declare const WithCustomMessageType: StoryObj<MessageListProps<ChartMessageContent>>;
 export declare const WithStreamingMessage: StoryObj<MessageListProps>;
 export declare const WithDefaultActions: StoryObj<MessageListProps>;
+export declare const WithUserRating: StoryObj<MessageListProps>;
 export declare const WithPreviousMessages: StoryObj<MessageListProps>;

package/dist/components/organisms/MessageList/__stories__/MessageList.stories.js

@@ -223,14 +223,14 @@ export const WithDefaultActions = {
     render: (args) => {
         const userActions = [
             {
-                actionType: BaseMessageActionType.Edit,
+                type: BaseMessageActionType.Edit,
                 onClick: (message) => {
                     // eslint-disable-next-line no-console
                     console.log('Edit user message:', message.id);
                 },
             },
             {
-                actionType: BaseMessageActionType.Delete,
+                type: BaseMessageActionType.Delete,
                 onClick: (message) => {
                     // eslint-disable-next-line no-console
                     console.log('Delete user message:', message.id);
@@ -239,14 +239,14 @@ export const WithDefaultActions = {
         ];
         const assistantActions = [
             {
-                actionType: BaseMessageActionType.Copy,
+                type: BaseMessageActionType.Copy,
                 onClick: (message) => {
                     // eslint-disable-next-line no-console
                     console.log('Copy assistant message:', message.id);
                 },
             },
             {
-                actionType: BaseMessageActionType.Like,
+                type: BaseMessageActionType.Like,
                 onClick: (message) => {
                     // eslint-disable-next-line no-console
                     console.log('Like assistant message:', message.id);
@@ -291,6 +291,56 @@ export const WithDefaultActions = {
     },
     decorators: defaultDecorators,
 };
+export const WithUserRating = {
+    render: (args) => {
+        const assistantActions = [
+            {
+                type: BaseMessageActionType.Copy,
+                onClick: (message) => {
+                    // eslint-disable-next-line no-console
+                    console.log('Copy:', message.id);
+                },
+            },
+            {
+                type: BaseMessageActionType.Like,
+                onClick: (message) => {
+                    // eslint-disable-next-line no-console
+                    console.log('Like:', message.id);
+                },
+            },
+            {
+                type: BaseMessageActionType.Unlike,
+                onClick: (message) => {
+                    // eslint-disable-next-line no-console
+                    console.log('Unlike:', message.id);
+                },
+            },
+        ];
+        return (_jsx(ShowcaseItem, { title: "With User Rating", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(MessageList, Object.assign({}, args, { messages: [
+                        {
+                            id: 'user-1',
+                            role: 'user',
+                            timestamp: '2024-01-01T00:00:00Z',
+                            content: 'Compare these two answers.',
+                        },
+                        {
+                            id: 'assistant-like',
+                            role: 'assistant',
+                            timestamp: '2024-01-01T00:00:01Z',
+                            content: 'This message is rated as liked (filled thumb up).',
+                            userRating: 'like',
+                        },
+                        {
+                            id: 'assistant-dislike',
+                            role: 'assistant',
+                            timestamp: '2024-01-01T00:00:02Z',
+                            content: 'This message is rated as disliked (filled thumb down).',
+                            userRating: 'dislike',
+                        },
+                    ], assistantActions: assistantActions, status: "ready" })) }) }));
+    },
+    decorators: defaultDecorators,
+};
 export const WithPreviousMessages = {
     render: (args) => {
         const createMessage = (num) => {

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/PromptInput/PromptInput.js

@@ -4,7 +4,7 @@ import { PromptInputSimple } from './PromptInputSimple';
 import { PromptInputWithPanels } from './PromptInputWithPanels';
 import { PromptInputWithSuggestions } from './PromptInputWithSuggestions';
 import { usePromptInput } from './usePromptInput';
-import './PromptInput.scss';
+import './PromptInput.css';
 /**
  * PromptInput component - a flexible input component for chat interfaces
  * with support for simple and full views, attachments, suggestions, and expandable panels

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/ThinkingMessage/index.js

@@ -7,7 +7,7 @@ import { block } from '../../../utils/cn';
 import { ActionButton } from '../../atoms';
 import { Loader } from '../../atoms/Loader';
 import { useThinkingMessage } from './useThinkingMessage';
-import './ThinkingMessage.scss';
+import './ThinkingMessage.css';
 const b = block('thinking-message');
 /**
  * ThinkingMessage component displays AI model's internal reasoning process.

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

package/dist/components/organisms/ToolMessage/index.js

@@ -3,7 +3,7 @@ import { Card } from '@gravity-ui/uikit';
 import { useToolMessage } from '../../../hooks/useToolMessage';
 import { block } from '../../../utils/cn';
 import { ToolFooter, ToolHeader } from '../../molecules';
-import './ToolMessage.scss';
+import './ToolMessage.css';
 const b = block('tool-message');
 export function ToolMessage(props) {
     const { toolName, className, qa, bodyContent, status, toolIcon, headerContent } = props;

package/dist/components/organisms/UserMessage/UserMessage.css

@@ -0,0 +1,10 @@
+.g-aikit-user-message {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-1);
+  align-items: flex-end;
+}
+
+.g-aikit-user-message_format_plain {
+  white-space: pre-wrap;
+}

package/dist/components/organisms/UserMessage/index.js

@@ -4,7 +4,7 @@ import { block, modsClassName } from '../../../utils/cn';
 import { MarkdownRenderer } from '../../atoms/MarkdownRenderer';
 import { MessageBalloon } from '../../atoms/MessageBalloon';
 import { BaseMessage } from '../../molecules/BaseMessage';
-import './UserMessage.scss';
+import './UserMessage.css';
 const b = block('user-message');
 export const UserMessage = (props) => {
     const { className, qa, content, actions, showActionsOnHover, showAvatar, avatarUrl = '', timestamp = '', showTimestamp, format = 'plain', transformOptions, shouldParseIncompleteMarkdown, } = props;