@gravity-ui/aikit 1.8.0 → 1.9.0

package/dist/components/atoms/Alert/index.js

@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react';
 import { ChevronDown, ChevronUp, CircleExclamationFill, CircleInfoFill, TriangleExclamationFill, } from '@gravity-ui/icons';
 import { Button, Icon, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
-import './Alert.scss';
+import './Alert.css';
 const b = block('alert');
 const statusIcons = {
     info: CircleInfoFill,

package/dist/components/atoms/ChatDate/ChatDate.js

@@ -3,7 +3,7 @@ import { Fragment } from 'react';
 import { useDateFormatter } from '../../../hooks';
 import { block } from '../../../utils/cn';
 import { i18n } from './i18n';
-import './ChatDate.scss';
+import './ChatDate.css';
 const b = block('chat-date');
 /**
  * ChatDate component displays formatted dates with optional time

package/dist/components/atoms/ContextIndicator/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
 import { getProgressColor } from './utils';
-import './ContextIndicator.scss';
+import './ContextIndicator.css';
 const b = block('context-indicator');
 export const ContextIndicator = (props) => {
     const { className, qa, orientation = 'horizontal', reversed = false } = props;

package/dist/components/atoms/DiffStat/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
-import './DiffStat.scss';
+import './DiffStat.css';
 const b = block('diff-stat');
 export const DiffStat = (props) => {
     const { added, deleted, className, style, qa } = props;

package/dist/components/atoms/Disclaimer/Disclaimer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
-import './Disclaimer.scss';
+import './Disclaimer.css';
 const b = block('disclaimer');
 /**
  * Disclaimer component displays informational or warning messages

package/dist/components/atoms/IntersectionContainer/IntersectionContainer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useIntersection } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
-import './IntersectionContainer.scss';
+import './IntersectionContainer.css';
 const b = block('intersection-container');
 export const IntersectionContainer = ({ children, onIntersect, options, className, }) => {
     const [ref, setRef] = React.useState(null);

package/dist/components/atoms/Loader/Loader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Spin } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
-import './Loader.scss';
+import './Loader.css';
 const b = block('loader');
 export function Loader({ view = 'streaming', size = 's', className, qa }) {
     if (view === 'streaming') {

package/dist/components/atoms/MarkdownRenderer/MarkdownRenderer.js

@@ -4,7 +4,7 @@ import { useMarkdownTransform } from '../../../hooks/useMarkdownTransform';
 import { useRemend } from '../../../hooks/useRemend';
 import { block } from '../../../utils/cn';
 import { areOptionsEqual } from '../../../utils/markdownUtils';
-import './MarkdownRenderer.scss';
+import './MarkdownRenderer.css';
 const b = block('markdown-renderer');
 function MarkdownRendererComponent({ content, className, qa, transformOptions, shouldParseIncompleteMarkdown = false, }) {
     const closedContent = useRemend(content, shouldParseIncompleteMarkdown);

package/dist/components/atoms/MessageBalloon/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
-import './MessageBalloon.scss';
+import './MessageBalloon.css';
 const b = block('message-balloon');
 export const MessageBalloon = (props) => {
     const { className, qa, children } = props;

package/dist/components/atoms/Shimmer/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
-import './Shimmer.scss';
+import './Shimmer.css';
 const b = block('shimmer');
 export const Shimmer = (props) => {
     const { className, qa, children } = props;

package/dist/components/atoms/SubmitButton/SubmitButton.js

@@ -5,7 +5,7 @@ import { Icon, Spin } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
 import { ActionButton } from '../ActionButton';
 import { i18n } from './i18n';
-import './SubmitButton.scss';
+import './SubmitButton.css';
 const b = block('submit-button');
 /**
  * Submit button component with state management through props

package/dist/components/atoms/ToolIndicator/index.js

@@ -3,7 +3,7 @@ import { CircleCheck, CircleInfo, CircleXmark } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
 import { Loader } from '../Loader';
-import './ToolIndicator.scss';
+import './ToolIndicator.css';
 const b = block('tool-indicator');
 export const ToolIndicator = (props) => {
     const { status = 'info', className, qa } = props;

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

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--g-spacing-1);
+  word-break: break-word;
 }
 .g-aikit-base-message_variant_user {
   align-items: flex-end;

package/dist/components/molecules/BaseMessage/__stories__/BaseMessage.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Variant: StoryObj<BaseMessageProps>;
 export declare const ShowActionsOnHover: StoryFn<BaseMessageProps>;
 export declare const ShowTimestamp: StoryObj<BaseMessageProps>;
 export declare const WithCustomAction: StoryFn<BaseMessageProps>;
+export declare const WithUserRating: StoryObj<BaseMessageProps>;

package/dist/components/molecules/BaseMessage/__stories__/BaseMessage.stories.js

@@ -50,6 +50,12 @@ const buttons = [
     // eslint-disable-next-line no-console
     { actionType: 'unlike', onClick: () => console.log('unlike') },
 ];
+const likeUnlikeButtons = [
+    // eslint-disable-next-line no-console
+    { actionType: 'like', onClick: () => console.log('like') },
+    // eslint-disable-next-line no-console
+    { actionType: 'unlike', onClick: () => console.log('unlike') },
+];
 export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(BaseMessage, Object.assign({}, args)) }));
 Playground.args = {
     children: 'My message',
@@ -75,3 +81,7 @@ export const WithCustomAction = (args) => (_jsx(ContentWrapper, { children: _jsx
                 // eslint-disable-next-line no-console
                 onClick: () => console.log('custom'), children: "Custom" }, "custom"),
         ], role: "assistant", children: 'Message with custom action button' })) }));
+export const WithUserRating = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "No rating", width: "300px", children: _jsx(BaseMessage, Object.assign({}, args, { actions: likeUnlikeButtons, role: "assistant", children: 'Message' })) }), _jsx(ShowcaseItem, { title: "Rated like", width: "300px", children: _jsx(BaseMessage, Object.assign({}, args, { actions: likeUnlikeButtons, role: "assistant", userRating: "like", children: 'Message' })) }), _jsx(ShowcaseItem, { title: "Rated dislike", width: "300px", children: _jsx(BaseMessage, Object.assign({}, args, { actions: likeUnlikeButtons, role: "assistant", userRating: "dislike", children: 'Message' })) })] })),
+    decorators: defaultDecorators,
+};

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { ArrowRotateLeft, Copy as CopyIcon, Pencil, ThumbsDown, ThumbsUp, TrashBin, } from '@gravity-ui/icons';
+import { ArrowRotateLeft, Copy as CopyIcon, Pencil, ThumbsDown, ThumbsDownFill, ThumbsUp, ThumbsUpFill, TrashBin, } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import { isActionConfig } from '../../../utils/actionUtils';
 import { block } from '../../../utils/cn';
@@ -8,7 +8,7 @@ import { ActionButton } from '../../atoms';
 import { ChatDate } from '../../atoms/ChatDate';
 import { ButtonGroup } from '../ButtonGroup';
 import { i18n } from './i18n';
-import './BaseMessage.scss';
+import './BaseMessage.css';
 const b = block('base-message');
 export var BaseMessageActionType;
 (function (BaseMessageActionType) {
@@ -19,16 +19,8 @@ export var BaseMessageActionType;
     BaseMessageActionType["Unlike"] = "unlike";
     BaseMessageActionType["Delete"] = "delete";
 })(BaseMessageActionType || (BaseMessageActionType = {}));
-const BaseMessageActionIcons = {
-    [BaseMessageActionType.Copy]: CopyIcon,
-    [BaseMessageActionType.Edit]: Pencil,
-    [BaseMessageActionType.Retry]: ArrowRotateLeft,
-    [BaseMessageActionType.Like]: ThumbsUp,
-    [BaseMessageActionType.Unlike]: ThumbsDown,
-    [BaseMessageActionType.Delete]: TrashBin,
-};
 export const BaseMessage = (props) => {
-    const { className, qa, showActionsOnHover, actions, children, role: variant, showTimestamp, timestamp = '', } = props;
+    const { className, qa, showActionsOnHover, actions, children, role: variant, showTimestamp, timestamp = '', userRating, } = props;
     // Get tooltip text for action
     const getTooltipText = (actionType) => {
         if (!actionType) {
@@ -49,9 +41,7 @@ export const BaseMessage = (props) => {
                                 return _jsx(React.Fragment, { children: action }, index);
                             }
                             const tooltipText = getTooltipText(action.actionType);
-                            const defaultIcon = action.actionType
-                                ? BaseMessageActionIcons[action.actionType]
-                                : undefined;
+                            const defaultIcon = getDefaultIcon(action.actionType, userRating);
                             // Determine tooltip title
                             let tooltipTitle;
                             if (action.label) {
@@ -77,3 +67,21 @@ export const BaseMessage = (props) => {
                             return (_jsx(ActionButton, Object.assign({}, action, { tooltipTitle: tooltipTitle, view: action.view || 'flat-secondary', children: buttonContent }), action.actionType || index));
                         }) })] }))] }));
 };
+function getDefaultIcon(actionType, userRating) {
+    switch (actionType) {
+        case BaseMessageActionType.Copy:
+            return CopyIcon;
+        case BaseMessageActionType.Edit:
+            return Pencil;
+        case BaseMessageActionType.Retry:
+            return ArrowRotateLeft;
+        case BaseMessageActionType.Delete:
+            return TrashBin;
+        case BaseMessageActionType.Like:
+            return userRating === 'like' ? ThumbsUpFill : ThumbsUp;
+        case BaseMessageActionType.Unlike:
+            return userRating === 'dislike' ? ThumbsDownFill : ThumbsDown;
+        default:
+            return undefined;
+    }
+}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
-import './ButtonGroup.scss';
+import './ButtonGroup.css';
 const b = block('button-group');
 export const ButtonGroup = (props) => {
     const { orientation = 'horizontal', className, qa, children } = props;

package/dist/components/molecules/PromptInputBody/PromptInputBody.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { TextArea } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
-import './PromptInputBody.scss';
+import './PromptInputBody.css';
 const b = block('prompt-input-body');
 /**
  * PromptInputBody component displays the main input area

package/dist/components/molecules/PromptInputFooter/PromptInputFooter.js

@@ -6,7 +6,7 @@ import { ActionButton } from '../../atoms/ActionButton';
 import { SubmitButton } from '../../atoms/SubmitButton';
 import { ButtonGroup } from '../ButtonGroup';
 import { i18n } from './i18n';
-import './PromptInputFooter.scss';
+import './PromptInputFooter.css';
 const b = block('prompt-input-footer');
 /**
  * PromptInputFooter component displays the footer section with action icons

package/dist/components/molecules/PromptInputHeader/PromptInputHeader.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
 import { ContextIndicator } from '../../atoms/ContextIndicator';
 import { ContextItem } from '../../atoms/ContextItem';
-import './PromptInputHeader.scss';
+import './PromptInputHeader.css';
 const b = block('prompt-input-header');
 /**
  * PromptInputHeader component displays the header section of prompt input

package/dist/components/molecules/PromptInputPanel/PromptInputPanel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
-import './PromptInputPanel.scss';
+import './PromptInputPanel.css';
 const b = block('prompt-input-panel');
 /**
  * PromptInputPanel component displays a panel with custom content

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

package/dist/components/pages/ChatContainer/ChatContainer.js

@@ -8,7 +8,7 @@ import { ChatContent } from '../../templates/ChatContent';
 import { History } from '../../templates/History';
 import { i18n } from './i18n';
 import { useChatContainer } from './useChatContainer';
-import './ChatContainer.scss';
+import './ChatContainer.css';
 const b = block('chat-container');
 /**
  * ChatContainer - fully assembled chat component, the main exportable component of the library.

package/dist/components/pages/ChatContainer/__stories__/ChatContainer.stories.d.ts

@@ -83,3 +83,8 @@ export declare const EmbeddedInPageWithStreaming: Story;
  * Demonstrates passing additional actions to Header and custom actions to BaseMessage
  */
 export declare const WithAdditionalActions: Story;
+/**
+ * Like / Unlike actions with local rating state.
+ * Only like and unlike actions; rating toggles on repeated click (like → clear, dislike → clear).
+ */
+export declare const WithLikeUnlikeActions: Story;

package/dist/components/pages/ChatContainer/__stories__/ChatContainer.stories.js

@@ -5,6 +5,7 @@ import { Gear, Sparkles, Star } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import { ChatContainer } from '..';
 import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { BaseMessageActionType } from '../../../molecules/BaseMessage';
 import MDXDocs from './Docs.mdx';
 export default {
     title: 'pages/ChatContainer',
@@ -1110,3 +1111,79 @@ export const WithAdditionalActions = {
     },
     decorators: defaultDecorators,
 };
+/**
+ * Like / Unlike actions with local rating state.
+ * Only like and unlike actions; rating toggles on repeated click (like → clear, dislike → clear).
+ */
+export const WithLikeUnlikeActions = {
+    args: {
+        chats: mockChats,
+        activeChat: mockChats[0],
+        showHistory: true,
+        showNewChat: true,
+        showActionsOnHover: true,
+    },
+    render: (args) => {
+        const initialChat = mockChats[0];
+        const [messages, setMessages] = useState(() => mockChatMessages[initialChat.id] || []);
+        const [status, setStatus] = useState('ready');
+        const [activeChat, setActiveChat] = useState(initialChat);
+        const assistantActions = [
+            {
+                type: BaseMessageActionType.Like,
+                onClick: (message) => {
+                    setMessages((prev) => prev.map((m) => m.id === message.id
+                        ? Object.assign(Object.assign({}, m), { userRating: m.userRating === 'like'
+                                ? undefined
+                                : 'like' }) : m));
+                },
+            },
+            {
+                type: BaseMessageActionType.Unlike,
+                onClick: (message) => {
+                    setMessages((prev) => prev.map((m) => m.id === message.id
+                        ? Object.assign(Object.assign({}, m), { userRating: m.userRating === 'dislike'
+                                ? undefined
+                                : 'dislike' }) : m));
+                },
+            },
+        ];
+        const handleSendMessage = async (data) => {
+            const timestamp = Date.now();
+            const userMessageId = `user-${timestamp}`;
+            const userMessage = {
+                id: userMessageId,
+                role: 'user',
+                content: data.content,
+                timestamp: new Date().toISOString(),
+            };
+            setMessages((prev) => [...prev, userMessage]);
+            setStatus('streaming');
+            await new Promise((resolve) => setTimeout(resolve, 500));
+            const assistantMessageId = `assistant-${timestamp + 1}`;
+            const assistantMessage = {
+                id: assistantMessageId,
+                role: 'assistant',
+                content: `Response to: "${data.content}". Use like/unlike below — they toggle on second click.`,
+                timestamp: new Date().toISOString(),
+            };
+            setMessages((prev) => [...prev, assistantMessage]);
+            setStatus('ready');
+        };
+        const handleSelectChat = (chat) => {
+            setActiveChat(chat);
+            setMessages(mockChatMessages[chat.id] || []);
+        };
+        const handleCreateChat = () => {
+            setActiveChat(null);
+            setMessages([]);
+        };
+        const handleCancel = async () => {
+            setStatus('ready');
+        };
+        return (_jsx(ChatContainer, Object.assign({}, args, { messages: messages, activeChat: activeChat, onSendMessage: handleSendMessage, onCancel: handleCancel, onSelectChat: handleSelectChat, onCreateChat: handleCreateChat, status: status, messageListConfig: {
+                assistantActions,
+            } })));
+    },
+    decorators: defaultDecorators,
+};

package/dist/components/templates/ChatContent/ChatContent.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { block } from '../../../utils/cn';
 import { MessageList } from '../../organisms/MessageList';
 import { EmptyContainer } from '../EmptyContainer';
-import './ChatContent.scss';
+import './ChatContent.css';
 const b = block('chat-content');
 /**
  * ChatContent - main chat content with state switching (EmptyContainer/MessageList).

package/dist/components/templates/EmptyContainer/EmptyContainer.js

@@ -4,7 +4,7 @@ import { Button, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
 import { Suggestions } from '../../molecules/Suggestions';
 import { i18n } from './i18n';
-import './EmptyContainer.scss';
+import './EmptyContainer.css';
 const b = block('empty-container');
 /**
  * EmptyContainer component - displays a welcome screen with image, title, description,

package/dist/components/templates/History/HistoryList.js

@@ -7,7 +7,7 @@ import { Loader } from '../../atoms/Loader';
 import { ChatItem } from './ChatItem';
 import { DateHeaderItem } from './DateHeaderItem';
 import { i18n } from './i18n';
-import './History.scss';
+import './History.css';
 const b = block('history');
 /**
  * HistoryList component - displays a list of chats with search, grouping, and actions

package/dist/demo/ContentWrapper/ContentWrapper.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../utils/cn';
-import './ContentWrapper.scss';
+import './ContentWrapper.css';
 const b = cn('content-wrapper');
 export function ContentWrapper(props) {
     const { children } = props, style = __rest(props, ["children"]);

package/dist/demo/Showcase/Showcase.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../utils/cn';
-import './Showcase.scss';
+import './Showcase.css';
 const b = cn('showcase');
 export function Showcase({ title, description, direction = 'row', className, children }) {
     return (_jsxs("div", { className: b({ direction }, className), children: [title && _jsx("div", { className: b('title'), children: title }), description && _jsx("div", { className: b('description'), children: description }), _jsx("div", { className: b('content'), children: children })] }));

package/dist/demo/ShowcaseItem/ShowcaseItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../utils/cn';
-import './ShowcaseItem.scss';
+import './ShowcaseItem.css';
 const b = cn('showcase-item');
 export function ShowcaseItem({ title, children, width }) {
     return (_jsxs("div", { className: b(), style: { width }, children: [_jsx("div", { className: b('title'), children: title }), _jsx("div", { className: b('content'), children: children })] }));

package/dist/demo/SwapArea/SwapArea.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { block } from '../../utils/cn';
-import './SwapArea.scss';
+import './SwapArea.css';
 const b = block('swap-area');
 export const SwapArea = () => {
     return _jsx("div", { className: b(), children: "Swap Area" });

package/dist/types/messages.d.ts

@@ -8,10 +8,12 @@ export type BaseMessageActionConfig = ActionConfig;
  * - React.ReactNode for fully custom content
  */
 export type BaseMessageAction = BaseMessageActionConfig | React.ReactNode;
+export type UserRating = 'like' | 'dislike';
 export type BaseMessageProps = {
     children: React.ReactNode;
     role: TMessageRole;
     actions?: BaseMessageAction[];
+    userRating?: UserRating;
     timestamp?: string;
     showTimestamp?: boolean;
     showActionsOnHover?: boolean;
@@ -65,5 +67,6 @@ export type TUserMessage<Metadata = TMessageMetadata> = TBaseMessage<Metadata> &
 export type TAssistantMessage<TCustomMessageContent extends TMessageContent = never, Metadata = TMessageMetadata> = TBaseMessage<Metadata> & {
     role: 'assistant';
     content: TAssistantMessageContent<TCustomMessageContent>;
+    userRating?: UserRating;
 };
 export type TChatMessage<TCustomMessageContent extends TMessageContent = never, Metadata = TMessageMetadata> = TUserMessage<Metadata> | TAssistantMessage<TCustomMessageContent, Metadata>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/aikit",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Gravity UI base kit for building ai assistant chats",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -55,10 +55,11 @@
     "lint:prettier": "prettier --check '**/*.{js,jsx,ts,tsx,css,scss,json,yaml,yml,md,mdx}'",
     "lint:prettier:fix": "prettier --write '**/*.{js,jsx,ts,tsx,css,scss,json,yaml,yml,md,mdx}'",
     "test": "npm run test:unit && npm run test:server:unit",
-    "build": "npm run build:clean && npm run build:ts && npm run build:compile:scss && npm run build:copy && npm run build:server",
+    "build": "npm run build:clean && npm run build:ts && npm run build:fix-imports && npm run build:compile:scss && npm run build:copy && npm run build:server",
     "build:clean": "rm -rf dist",
     "build:ts": "tsc",
     "build:compile:scss": "sass --no-source-map --load-path=src --load-path=node_modules src:dist",
+    "build:fix-imports": "find dist -type f -name '*.js' -exec perl -i -pe \"s/\\.scss'/.css'/g; s/\\.scss\\\"/.css\\\"/g\" {} +",
     "build:copy": "npm run build:copy:themes && npm run build:copy:i18n",
     "build:copy:themes": "copyfiles -u 1 'src/themes/**/*.css' dist",
     "build:copy:i18n": "copyfiles -u 1 'src/**/i18n/*.json' dist",