@gravity-ui/aikit 1.2.0 → 1.3.0

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

@@ -5,6 +5,7 @@ declare const _default: Meta;
 export default _default;
 export declare const Playground: StoryFn<AssistantMessageProps>;
 export declare const WithToolCall: StoryObj<AssistantMessageProps>;
+export declare const WithThinkingContent: StoryObj<AssistantMessageProps>;
 interface CustomMessageData {
     title: string;
     description: string;

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

@@ -108,6 +108,37 @@ export const WithToolCall = {
         (StoryComponent) => (_jsx(Showcase, { children: _jsx(StoryComponent, {}) })),
     ],
 };
+const thinkingWithTextMessage = {
+    id: '5',
+    role: 'assistant',
+    content: [
+        {
+            type: 'thinking',
+            data: {
+                title: 'Analyzing request',
+                content: [
+                    'Breaking down the task into steps',
+                    'Checking available context',
+                    'Planning the response structure',
+                ],
+                status: 'thought',
+                enabledCopy: true,
+            },
+        },
+        {
+            type: 'text',
+            data: {
+                text: "Based on my analysis, here's the answer to your question. The solution involves several key components that work together.",
+            },
+        },
+    ],
+};
+export const WithThinkingContent = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "With Thinking Content", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(AssistantMessage, Object.assign({}, args, { content: thinkingWithTextMessage.content, actions: actions, timestamp: thinkingWithTextMessage.timestamp, id: thinkingWithTextMessage.id })) }) })),
+    decorators: [
+        (StoryComponent) => (_jsx(Showcase, { children: _jsx(StoryComponent, {}) })),
+    ],
+};
 const CustomMessageView = ({ part, }) => {
     const { title, description } = part.data;
     return (_jsxs("div", { style: {

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useScrollPreservation, useSmartScroll } from '../../../hooks';
-import { isAssistantMessage, isUserMessage, resolveMessageActions, } from '../../../utils';
+import { hasOnlyThinkingContent, isAssistantMessage, isUserMessage, resolveMessageActions, } from '../../../utils';
 import { block } from '../../../utils/cn';
 import { IntersectionContainer } from '../../atoms/IntersectionContainer';
 import { Loader } from '../../atoms/Loader';
@@ -29,7 +29,9 @@ export function MessageList({ messages, messageRendererRegistry, transformOption
             const isLastMessage = index === messages.length - 1;
             const isNotCompleted = isSubmitted || isStreaming;
             const showActions = !(isLastMessage && isNotCompleted);
-            const actions = showActions
+            // Don't show assistantActions for messages with ONLY thinking content
+            // For mixed content (thinking + text), actions are shown and copy entire message
+            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}`));

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

@@ -9,4 +9,6 @@ export declare const SingleContent: StoryObj<ThinkingMessageProps>;
 export declare const Collapsed: StoryObj<ThinkingMessageProps>;
 export declare const WithoutLoader: StoryObj<ThinkingMessageProps>;
 export declare const WithCopyAction: StoryObj<ThinkingMessageProps>;
+export declare const WithEnabledCopy: StoryObj<ThinkingMessageProps>;
+export declare const CopyOnlyWhenThought: StoryObj<ThinkingMessageProps>;
 export declare const WithCustomStyle: StoryObj<ThinkingMessageProps>;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ThinkingMessage } from '..';
 import { ContentWrapper } from '../../../../demo/ContentWrapper';
 import { Showcase } from '../../../../demo/Showcase';
@@ -44,7 +44,11 @@ export default {
         },
         onCopyClick: {
             action: 'copy clicked',
-            description: 'Copy button click handler',
+            description: 'Copy button click handler (custom logic)',
+        },
+        enabledCopy: {
+            control: 'boolean',
+            description: 'Enable default copy functionality',
         },
     },
 };
@@ -89,7 +93,15 @@ export const WithoutLoader = {
     decorators: defaultDecorators,
 };
 export const WithCopyAction = {
-    render: () => (_jsx(ShowcaseItem, { title: "With Copy Action", children: _jsx(ContentWrapper, { width: "600px", children: _jsx(ThinkingMessage, Object.assign({}, thoughtData, { defaultExpanded: true, onCopyClick: () => alert('Content copied to clipboard!') })) }) })),
+    render: () => (_jsx(ShowcaseItem, { title: "With Copy Action (Custom Handler)", children: _jsx(ContentWrapper, { width: "600px", children: _jsx(ThinkingMessage, Object.assign({}, thoughtData, { defaultExpanded: true, onCopyClick: () => alert('Custom copy handler called!') })) }) })),
+    decorators: defaultDecorators,
+};
+export const WithEnabledCopy = {
+    render: () => (_jsx(ShowcaseItem, { title: "With Enabled Copy (Default Logic)", children: _jsx(ContentWrapper, { width: "600px", children: _jsx(ThinkingMessage, Object.assign({}, thoughtData, { defaultExpanded: true, enabledCopy: true })) }) })),
+    decorators: defaultDecorators,
+};
+export const CopyOnlyWhenThought = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Thinking Status - No Copy Button", children: _jsx(ContentWrapper, { width: "600px", children: _jsx(ThinkingMessage, Object.assign({}, thinkingData, { defaultExpanded: true, enabledCopy: true })) }) }), _jsx(ShowcaseItem, { title: "Thought Status - With Copy Button", children: _jsx(ContentWrapper, { width: "600px", children: _jsx(ThinkingMessage, Object.assign({}, thoughtData, { defaultExpanded: true, enabledCopy: true })) }) })] })),
     decorators: defaultDecorators,
 };
 export const WithCustomStyle = {

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

@@ -18,7 +18,7 @@ const b = block('thinking-message');
  * @returns Rendered thinking message component
  */
 export const ThinkingMessage = (props) => {
-    const { className, qa, style, onCopyClick } = props, data = __rest(props, ["className", "qa", "style", "onCopyClick"]);
-    const { isExpanded, toggleExpanded, buttonTitle, content, showLoader } = useThinkingMessage(Object.assign({}, data));
-    return (_jsxs("div", { className: b(null, className), "data-qa": qa, style: style, children: [_jsxs("div", { className: b('buttons'), children: [_jsxs(Button, { size: "s", onClick: toggleExpanded, children: [buttonTitle, _jsx(Icon, { data: isExpanded ? ChevronUp : ChevronDown })] }), showLoader ? (_jsx(Loader, { view: "loading", size: "xs" })) : (onCopyClick && (_jsx(ActionButton, { size: "s", onClick: onCopyClick, children: _jsx(Icon, { data: Copy, size: 16 }) })))] }), isExpanded && (_jsx("div", { className: b('container'), children: content.map((item, index) => (_jsx(Text, { className: b('content'), children: item }, index))) }))] }));
+    const { className, qa, style } = props, data = __rest(props, ["className", "qa", "style"]);
+    const { isExpanded, toggleExpanded, buttonTitle, content, showLoader, handleCopy, showCopyButton, } = useThinkingMessage(data);
+    return (_jsxs("div", { className: b(null, className), "data-qa": qa, style: style, children: [_jsxs("div", { className: b('buttons'), children: [_jsxs(Button, { size: "s", onClick: toggleExpanded, children: [buttonTitle, _jsx(Icon, { data: isExpanded ? ChevronUp : ChevronDown })] }), showLoader ? (_jsx(Loader, { view: "loading", size: "xs" })) : (showCopyButton && (_jsx(ActionButton, { size: "s", onClick: handleCopy, children: _jsx(Icon, { data: Copy, size: 16 }) })))] }), isExpanded && (_jsx("div", { className: b('container'), children: content.map((item, index) => (_jsx(Text, { className: b('content'), children: item }, index))) }))] }));
 };

package/dist/components/organisms/ThinkingMessage/useThinkingMessage.d.ts

@@ -5,4 +5,6 @@ export declare function useThinkingMessage(options: ThinkingMessageContentData):
     buttonTitle: string;
     content: string[];
     showLoader: boolean;
+    handleCopy: () => void;
+    showCopyButton: boolean;
 };

package/dist/components/organisms/ThinkingMessage/useThinkingMessage.js

@@ -1,7 +1,8 @@
 import { useCallback, useMemo, useState } from 'react';
+import { copyToClipboard } from '../../../utils';
 import { i18n } from './i18n';
 export function useThinkingMessage(options) {
-    const { defaultExpanded = true, showStatusIndicator = true, status, content } = options;
+    const { defaultExpanded = true, showStatusIndicator = true, status, content, onCopyClick, enabledCopy = false, } = options;
     const [isExpanded, setIsExpanded] = useState(defaultExpanded);
     const buttonTitle = useMemo(() => {
         return i18n(`title-${status}`);
@@ -12,11 +13,24 @@ export function useThinkingMessage(options) {
     const toggleExpanded = useCallback(() => {
         setIsExpanded((prev) => !prev);
     }, []);
+    const handleCopy = useCallback(() => {
+        if (onCopyClick) {
+            // Priority 1: Use custom handler for backward compatibility
+            onCopyClick();
+        }
+        else if (enabledCopy) {
+            // Priority 2: Use default copy logic
+            copyToClipboard(content);
+        }
+    }, [onCopyClick, enabledCopy, content]);
+    const showCopyButton = Boolean(onCopyClick || enabledCopy);
     return {
         isExpanded,
         toggleExpanded,
         buttonTitle,
         content: contentArray,
         showLoader: showStatusIndicator && status === 'thinking',
+        handleCopy,
+        showCopyButton,
     };
 }

package/dist/styles/styles.scss

@@ -1 +1,3 @@
-@import '@gravity-ui/uikit/styles/styles.css';
+@import '../themes/common.css';
+@import '../themes/light.css';
+@import '../themes/dark.css';

package/dist/themes/common.css

@@ -0,0 +1,73 @@
+/**
+ * CSS variables for library theming
+ */
+
+.g-root {
+    /* === Colors === */
+    --g-aikit-color-bg-primary: var(--g-aikit-bg-primary, var(--g-color-base-float));
+    --g-aikit-color-bg-secondary: #f5f5f5;
+
+    /* === Layout === */
+    --g-aikit-layout-base-padding-m: 12px;
+
+    /* === Messages === */
+    --g-aikit-color-bg-message-user: #0077ff;
+    --g-aikit-color-bg-message-assistant: #f0f0f0;
+
+    /* === Disclaimer === */
+    --g-aikit-disclaimer-gap: 10px;
+
+    /* === Suggestions === */
+    --g-aikit-suggestions-box-shadow: 0 3px 10px rgba(198, 172, 255, 0.52);
+
+    /* === Header === */
+    --g-aikit-header-background: none;
+
+    /* === Context Indicator === */
+    --g-aikit-ci-color-progress-1: var(
+        --g-aikit-ci-progress-1,
+        var(--g-color-private-green-550-solid)
+    );
+    --g-aikit-ci-color-progress-2: var(
+        --g-aikit-ci-progress-2,
+        var(--g-color-private-orange-500-solid)
+    );
+    --g-aikit-ci-color-progress-3: var(
+        --g-aikit-ci-progress-3,
+        var(--g-color-private-red-500-solid)
+    );
+
+    /* === Shimmer === */
+    --g-aikit-shimmer-color-from: var(--g-aikit-shimmer-from, rgba(0, 0, 0, 0.35));
+    --g-aikit-shimmer-color-to: var(--g-aikit-shimmer-to, rgba(0, 0, 0, 0.85));
+    --g-aikit-shimmer-duration: var(--g-aikit-shimmer-time, 2.5s);
+    --g-aikit-shimmer-gradient-size: 200%;
+
+    /* === Chat History === */
+    --g-aikit-history-width: 360px;
+    --g-aikit-history-max-height: 560px;
+    --g-aikit-history-item-height: 24px;
+
+    /* === Prompt Input === */
+    --g-aikit-prompt-input-panel-max-height: 500px;
+
+    /* === Empty Container === */
+    --g-aikit-empty-container-background: var(--g-color-base-background);
+    --g-aikit-empty-container-content-gap: 48px;
+    --g-aikit-empty-container-padding: 48px 32px;
+
+    /* === Chat Content === */
+    --g-aikit-chat-content-background: var(--g-color-base-background);
+    --g-aikit-chat-content-padding: 0 var(--g-aikit-layout-base-padding-m) var(--g-spacing-4)
+        var(--g-aikit-layout-base-padding-m);
+
+    /* === Chat Container === */
+    --g-aikit-chat-container-header-background: var(--g-color-base-background);
+    --g-aikit-chat-container-content-background: var(--g-color-base-background);
+    --g-aikit-chat-container-footer-background: var(--g-color-base-background);
+    --g-aikit-chat-container-background: var(--g-color-base-background);
+    --g-aikit-chat-container-content-empty-background: var(--g-color-base-background);
+    --g-aikit-chat-container-content-chat-background: var(--g-color-base-background);
+    --g-aikit-chat-container-footer-empty-background: var(--g-color-base-background);
+    --g-aikit-chat-container-footer-chat-background: var(--g-color-base-background);
+}

package/dist/themes/variables.css

@@ -1,3 +1,5 @@
+/* DEPRECATED: Use common.css instead */
+
 /**
  * CSS variables for library theming
  */

package/dist/types/messages.d.ts

@@ -41,6 +41,7 @@ export type ThinkingMessageContentData = {
     defaultExpanded?: boolean;
     showStatusIndicator?: boolean;
     onCopyClick?: () => void;
+    enabledCopy?: boolean;
     className?: string;
     qa?: string;
 };

package/dist/utils/clipboardUtils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Formats content for copying to clipboard.
+ * Joins array items with double newline, or returns string as-is.
+ *
+ * @param content - Content to format (string or array of strings)
+ * @returns Formatted text ready for clipboard
+ */
+export declare function formatCopyText(content: string | string[]): string;
+/**
+ * Copy content to clipboard using execCommand.
+ * Reliable method that works in all environments including iframes, HTTP, and older browsers.
+ * Accepts both string and array of strings (arrays are joined with double newline).
+ *
+ * @param content - Content to copy (string or array of strings)
+ * @returns true if copy was successful, false otherwise
+ */
+export declare function copyToClipboard(content: string | string[]): boolean;

package/dist/utils/clipboardUtils.js

@@ -0,0 +1,43 @@
+/**
+ * Formats content for copying to clipboard.
+ * Joins array items with double newline, or returns string as-is.
+ *
+ * @param content - Content to format (string or array of strings)
+ * @returns Formatted text ready for clipboard
+ */
+export function formatCopyText(content) {
+    if (Array.isArray(content)) {
+        return content.join('\n\n');
+    }
+    return content;
+}
+/**
+ * Copy content to clipboard using execCommand.
+ * Reliable method that works in all environments including iframes, HTTP, and older browsers.
+ * Accepts both string and array of strings (arrays are joined with double newline).
+ *
+ * @param content - Content to copy (string or array of strings)
+ * @returns true if copy was successful, false otherwise
+ */
+export function copyToClipboard(content) {
+    const text = formatCopyText(content);
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.style.top = '0';
+    textarea.style.left = '0';
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    textarea.focus();
+    textarea.select();
+    let successful = false;
+    try {
+        successful = document.execCommand('copy');
+    }
+    catch (err) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to copy text:', err);
+    }
+    document.body.removeChild(textarea);
+    return successful;
+}

package/dist/utils/index.d.ts

@@ -2,3 +2,4 @@ export * from './chatUtils';
 export * from './messageUtils';
 export * from './validation';
 export * from './messageTypeRegistry';
+export * from './clipboardUtils';

package/dist/utils/index.js

@@ -3,3 +3,4 @@ export * from './chatUtils';
 export * from './messageUtils';
 export * from './validation';
 export * from './messageTypeRegistry';
+export * from './clipboardUtils';

package/dist/utils/messageUtils.d.ts

@@ -3,6 +3,12 @@ import type { BaseMessageAction, TAssistantMessage, TChatMessage, TMessageConten
 export declare function isUserMessage<Metadata = TMessageMetadata, TCustomMessageContent extends TMessageContent = never>(message: TChatMessage<TCustomMessageContent, Metadata>): message is TUserMessage<Metadata>;
 export declare function isAssistantMessage<Metadata = TMessageMetadata, TCustomMessageContent extends TMessageContent = never>(message: TChatMessage<TCustomMessageContent, Metadata>): message is TAssistantMessage<TCustomMessageContent, Metadata>;
 export declare function normalizeContent<TCustomMessageContent extends TMessageContent = never>(content: TAssistantMessage<TCustomMessageContent, TMessageMetadata>['content']): TMessageContentUnion<TCustomMessageContent>[];
+/**
+ * Check if message content contains ONLY thinking content (no other content types).
+ * @param content - Message content to check
+ * @returns true if content contains only thinking parts and nothing else
+ */
+export declare function hasOnlyThinkingContent<TCustomMessageContent extends TMessageContent = never>(content: TAssistantMessage<TCustomMessageContent, TMessageMetadata>['content']): boolean;
 export type DefaultMessageAction<TMessage> = {
     type?: string;
     onClick: (message: TMessage) => void;

package/dist/utils/messageUtils.js

@@ -23,6 +23,18 @@ export function normalizeContent(content) {
     }
     return [content];
 }
+/**
+ * Check if message content contains ONLY thinking content (no other content types).
+ * @param content - Message content to check
+ * @returns true if content contains only thinking parts and nothing else
+ */
+export function hasOnlyThinkingContent(content) {
+    const parts = normalizeContent(content);
+    if (parts.length === 0) {
+        return false;
+    }
+    return parts.every((part) => part.type === 'thinking');
+}
 export function resolveMessageActions(message, defaultActions) {
     if (message.actions) {
         return message.actions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/aikit",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Gravity UI base kit for building ai assistant chats",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -11,6 +11,7 @@
       "default": "./dist/index.js"
     },
     "./styles": "./dist/styles/styles.scss",
+    "./themes/common": "./dist/themes/common.css",
     "./themes/dark": "./dist/themes/dark.css",
     "./themes/light": "./dist/themes/light.css",
     "./themes/variables": "./dist/themes/variables.css",