@gravity-ui/aikit 0.0.1

package/dist/src/components/organisms/PromptInput/types.d.ts

@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+import { PromptInputHeaderProps } from '../../molecules/PromptInputHeader';
+import { SuggestionsItem, SuggestionsProps } from '../../molecules/Suggestions';
+/**
+ * Props for a panel (top or bottom)
+ */
+export type PromptInputPanelConfig = {
+    /** Is panel open */
+    isOpen: boolean;
+    /** Panel content */
+    children?: ReactNode;
+};
+/**
+ * Props for the header section of PromptInput
+ */
+export type PromptInputHeaderConfig = {
+    /** Custom content for header area */
+    topContent?: ReactNode;
+    /** Array of context items to display on the left */
+    contextItems?: PromptInputHeaderProps['contextItems'];
+    /** Show context indicator in header */
+    showContextIndicator?: boolean;
+    /** Props for context indicator */
+    contextIndicatorProps?: PromptInputHeaderProps['contextIndicatorProps'];
+};
+/**
+ * Props for the body/textarea section of PromptInput
+ */
+export type PromptInputBodyConfig = {
+    /** Placeholder text for textarea */
+    placeholder?: string;
+    /** Minimum number of textarea rows */
+    minRows?: number;
+    /** Maximum number of textarea rows */
+    maxRows?: number;
+    /** Auto focus textarea on mount */
+    autoFocus?: boolean;
+};
+/**
+ * Props for the footer section of PromptInput
+ */
+export type PromptInputFooterConfig = {
+    /** Custom content for footer area (SubmitButton will still be shown) */
+    bottomContent?: ReactNode;
+    /** Show settings icon in footer */
+    showSettings?: boolean;
+    /** Settings icon click handler */
+    onSettingsClick?: () => void;
+    /** Show attachment icon in footer */
+    showAttachment?: boolean;
+    /** Attachment icon click handler */
+    onAttachmentClick?: () => void;
+    /** Show microphone icon in footer */
+    showMicrophone?: boolean;
+    /** Microphone icon click handler */
+    onMicrophoneClick?: () => void;
+};
+/**
+ * Props for the suggestions section of PromptInput
+ */
+export type PromptInputSuggestionsConfig = {
+    /** Submit suggestions array */
+    suggestions?: SuggestionsItem[];
+    /** Show submit suggestions */
+    showSuggestions?: boolean;
+    /** Layout orientation for suggestions: 'grid' for horizontal, 'list' for vertical */
+    suggestionsLayout?: SuggestionsProps['layout'];
+    /** Text alignment inside suggestion buttons */
+    suggestionsTextAlign?: SuggestionsProps['textAlign'];
+    /** Callback when suggestion is clicked */
+    onSuggestionClick?: (content: string, id?: string) => void;
+};

package/dist/src/components/organisms/PromptInput/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/organisms/PromptInput/useDelayedUnmount.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Hook for delaying component unmount during animation
+ *
+ * @param isOpen - Open/close flag
+ * @param delayTime - Delay time in milliseconds (default 300ms)
+ * @returns shouldRender - Whether the element should be rendered
+ */
+export declare function useDelayedUnmount(isOpen: boolean, delayTime?: number): boolean;

package/dist/src/components/organisms/PromptInput/useDelayedUnmount.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+/**
+ * Hook for delaying component unmount during animation
+ *
+ * @param isOpen - Open/close flag
+ * @param delayTime - Delay time in milliseconds (default 300ms)
+ * @returns shouldRender - Whether the element should be rendered
+ */
+export function useDelayedUnmount(isOpen, delayTime = 300) {
+    const [shouldRender, setShouldRender] = useState(isOpen);
+    useEffect(() => {
+        if (isOpen) {
+            // If opening, show immediately
+            setShouldRender(true);
+        }
+        else {
+            // If closing, wait for animation to complete
+            const timeoutId = setTimeout(() => {
+                setShouldRender(false);
+            }, delayTime);
+            return () => clearTimeout(timeoutId);
+        }
+        return undefined;
+    }, [isOpen, delayTime]);
+    return shouldRender;
+}

package/dist/src/components/organisms/PromptInput/usePromptInput.d.ts

@@ -0,0 +1,52 @@
+import { ChatStatus, TSubmitData } from '../../../types';
+/**
+ * Hook props for managing PromptInput state
+ */
+export type UsePromptInputProps = {
+    /** Callback when message is sent */
+    onSend: (data: TSubmitData) => Promise<void>;
+    /** Callback when sending is cancelled */
+    onCancel?: () => Promise<void>;
+    /** Initial value */
+    initialValue?: string;
+    /** Maximum length of input */
+    maxLength?: number;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Chat status to determine input behavior */
+    status?: ChatStatus;
+};
+/**
+ * Hook return type for PromptInput state management
+ */
+export type UsePromptInputReturn = {
+    /** Current input value */
+    value: string;
+    /** Set the input value */
+    setValue: (value: string) => void;
+    /** Is currently sending */
+    isSending: boolean;
+    /** Can submit the form */
+    canSubmit: boolean;
+    /** Submit button state */
+    submitButtonState: 'enabled' | 'disabled' | 'loading' | 'cancelable';
+    /** Is input disabled (when loading) */
+    isInputDisabled: boolean;
+    /** Handle input change */
+    handleChange: (value: string) => void;
+    /** Handle key down */
+    handleKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    /** Handle submit */
+    handleSubmit: () => Promise<void>;
+    /** Attachments */
+    attachments: File[];
+    /** Set attachments */
+    setAttachments: (files: File[]) => void;
+};
+/**
+ * Custom hook for managing PromptInput state and behavior
+ *
+ * @param props - Hook props
+ * @returns Hook return value with state and handlers
+ */
+export declare function usePromptInput(props: UsePromptInputProps): UsePromptInputReturn;

package/dist/src/components/organisms/PromptInput/usePromptInput.js

@@ -0,0 +1,102 @@
+import { useCallback, useState } from 'react';
+/**
+ * Custom hook for managing PromptInput state and behavior
+ *
+ * @param props - Hook props
+ * @returns Hook return value with state and handlers
+ */
+export function usePromptInput(props) {
+    const { onSend, onCancel, initialValue = '', maxLength, disabled = false, status = 'ready', } = props;
+    const [value, setValue] = useState(initialValue);
+    const [isSending, setIsSending] = useState(false);
+    const [attachments, setAttachments] = useState([]);
+    const trimmedValue = value.trim();
+    const canSubmit = !disabled && !isSending && trimmedValue.length > 0;
+    // Map ChatStatus to submit button state
+    // ChatStatus.ready → submitButtonState.enabled
+    // ChatStatus.error → submitButtonState.enabled
+    // ChatStatus.streaming → submitButtonState.cancelable
+    // ChatStatus.submitted → submitButtonState.loading
+    let submitButtonState = 'disabled';
+    if (disabled || !trimmedValue) {
+        submitButtonState = 'disabled';
+    }
+    else if (isSending) {
+        submitButtonState = 'loading';
+    }
+    else {
+        switch (status) {
+            case 'ready':
+            case 'error':
+                submitButtonState = 'enabled';
+                break;
+            case 'streaming':
+                submitButtonState = onCancel ? 'cancelable' : 'enabled';
+                break;
+            case 'submitted':
+                submitButtonState = 'loading';
+                break;
+            default:
+                submitButtonState = 'enabled';
+        }
+    }
+    // Input is disabled when loading
+    const isInputDisabled = submitButtonState === 'loading';
+    const handleChange = useCallback((newValue) => {
+        if (maxLength && newValue.length > maxLength) {
+            return;
+        }
+        setValue(newValue);
+    }, [maxLength]);
+    const handleSubmit = useCallback(async () => {
+        if (submitButtonState === 'cancelable' && onCancel) {
+            await onCancel();
+            return;
+        }
+        if (!canSubmit) {
+            return;
+        }
+        setIsSending(true);
+        try {
+            const submitData = Object.assign({ content: trimmedValue }, (attachments.length > 0 && { attachments }));
+            await onSend(submitData);
+            setValue('');
+            setAttachments([]);
+        }
+        finally {
+            setIsSending(false);
+        }
+    }, [submitButtonState, canSubmit, trimmedValue, attachments, onSend, onCancel]);
+    const handleKeyDown = useCallback((event) => {
+        const isEnter = event.code === 'Enter' || event.code === 'NumpadEnter';
+        // Insert new line on Ctrl/Cmd + Enter
+        if (isEnter && (event.ctrlKey || event.metaKey)) {
+            setValue((prev) => prev + '\n');
+            event.preventDefault();
+            return;
+        }
+        // Prevent submission if can't submit
+        if (isEnter && !event.shiftKey && !canSubmit) {
+            event.preventDefault();
+            return;
+        }
+        // Submit on Enter (without Shift)
+        if (isEnter && !event.shiftKey && canSubmit) {
+            event.preventDefault();
+            handleSubmit();
+        }
+    }, [canSubmit, handleSubmit]);
+    return {
+        value,
+        setValue,
+        isSending,
+        canSubmit,
+        submitButtonState,
+        isInputDisabled,
+        handleChange,
+        handleKeyDown,
+        handleSubmit,
+        attachments,
+        setAttachments,
+    };
+}

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

@@ -0,0 +1,12 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { type ThinkingMessageProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ThinkingMessageProps>;
+export declare const ThinkingState: StoryObj<ThinkingMessageProps>;
+export declare const ThoughtState: StoryObj<ThinkingMessageProps>;
+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 WithCustomStyle: StoryObj<ThinkingMessageProps>;

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThinkingMessage } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'organisms/ThinkingMessage',
+    component: ThinkingMessage,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        data: {
+            control: 'object',
+            description: 'Thinking message data',
+        },
+        defaultExpanded: {
+            control: 'boolean',
+            description: 'Initial expanded state',
+        },
+        showStatusIndicator: {
+            control: 'boolean',
+            description: 'Show loader when status is "thinking"',
+        },
+        className: {
+            control: 'text',
+            description: 'Class name',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA attribute',
+        },
+        style: {
+            control: 'object',
+            description: 'Style',
+        },
+        onCopyClick: {
+            action: 'copy clicked',
+            description: 'Copy button click handler',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(Showcase, { children: _jsx(Story, {}) })),
+];
+const thinkingData = {
+    data: {
+        content: [
+            'Lore ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            'Lore ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        ],
+        status: 'thinking',
+    },
+};
+const thoughtData = {
+    data: {
+        content: [
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        ],
+        status: 'thought',
+    },
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { width: "600px", children: _jsx(ThinkingMessage, Object.assign({}, args)) }));
+Playground.args = Object.assign(Object.assign({}, thinkingData), { defaultExpanded: true, showStatusIndicator: true });
+export const ThinkingState = {
+    render: () => (_jsx(ShowcaseItem, { title: "Thinking State (with loader)", children: _jsx(ContentWrapper, { width: "600px", children: _jsx(ThinkingMessage, Object.assign({}, thinkingData, { defaultExpanded: true, showStatusIndicator: true })) }) })),
+    decorators: defaultDecorators,
+};
+export const ThoughtState = {
+    render: () => (_jsx(ShowcaseItem, { title: "Thought State (completed)", children: _jsx(ContentWrapper, { width: "600px", children: _jsx(ThinkingMessage, Object.assign({}, thoughtData, { defaultExpanded: true, showStatusIndicator: true })) }) })),
+    decorators: defaultDecorators,
+};
+export const SingleContent = {
+    render: () => (_jsx(ShowcaseItem, { title: "Single Content String", children: _jsx(ContentWrapper, { width: "600px", children: _jsx(ThinkingMessage, { data: {
+                    content: 'Processing your request and analyzing possible solutions.',
+                    status: 'thinking',
+                }, defaultExpanded: true }) }) })),
+    decorators: defaultDecorators,
+};
+export const Collapsed = {
+    render: () => (_jsx(ShowcaseItem, { title: "Collapsed Initially", children: _jsx(ContentWrapper, { width: "600px", children: _jsx(ThinkingMessage, Object.assign({}, thoughtData, { defaultExpanded: false })) }) })),
+    decorators: defaultDecorators,
+};
+export const WithoutLoader = {
+    render: () => (_jsx(ShowcaseItem, { title: "Without Loader (showStatusIndicator=false)", children: _jsx(ContentWrapper, { width: "600px", children: _jsx(ThinkingMessage, Object.assign({}, thinkingData, { defaultExpanded: true, showStatusIndicator: false })) }) })),
+    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!') })) }) })),
+    decorators: defaultDecorators,
+};
+export const WithCustomStyle = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "With Custom Style", children: _jsx(ContentWrapper, { width: "600px", children: _jsx(ThinkingMessage, Object.assign({}, args)) }) })),
+    decorators: defaultDecorators,
+};
+WithCustomStyle.args = Object.assign(Object.assign({}, thoughtData), { defaultExpanded: true, style: {
+        '--g-color-text-complementary': '#00aa00',
+        '--g-color-line-generic': '#ff6b35',
+        '--g-text-body-1-font-size': '16px',
+        '--g-text-body-font-weight': '500',
+        '--g-text-body-1-line-height': '18px',
+    }, onCopyClick: undefined });

package/dist/src/components/organisms/ThinkingMessage/i18n/en.json

@@ -0,0 +1,4 @@
+{
+    "title-thinking": "Thinking",
+    "title-thought": "Thought"
+}

package/dist/src/components/organisms/ThinkingMessage/i18n/index.d.ts

@@ -0,0 +1,13 @@
+export declare const i18n: ((key: "title-thinking" | "title-thought", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "title-thinking" | "title-thought", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "title-thinking" | "title-thought", params?: import("@gravity-ui/i18n").Params) => string;
+    };
+    keysetData: {
+        "g-aikit-ThinkingMessage": Record<"title-thinking" | "title-thought", import("@gravity-ui/i18n").KeyData>;
+    };
+};

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

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}ThinkingMessage`);

package/dist/src/components/organisms/ThinkingMessage/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+    "title-thinking": "Думает",
+    "title-thought": "Размышление"
+}

package/dist/src/components/organisms/ThinkingMessage/index.d.ts

@@ -0,0 +1,24 @@
+import { DOMProps, QAProps } from '@gravity-ui/uikit';
+import { ThinkingMessageData } from './useThinkingMessage';
+import './ThinkingMessage.scss';
+/**
+ * Props for the ThinkingMessage component.
+ * Combines DOM props, QA props, and thinking message data.
+ */
+export type ThinkingMessageProps = DOMProps & QAProps & ThinkingMessageData & {
+    /** Whether the thinking content should be expanded by default */
+    defaultExpanded?: boolean;
+    /** Whether to show the status indicator (loader) */
+    showStatusIndicator?: boolean;
+    /** Callback fired when the copy button is clicked */
+    onCopyClick?: () => void;
+};
+/**
+ * ThinkingMessage component displays AI model's internal reasoning process.
+ * Shows a collapsible block with thinking content and a copy button.
+ * Displays a loader when the thinking process is still in progress.
+ *
+ * @param props - Component props
+ * @returns Rendered thinking message component
+ */
+export declare const ThinkingMessage: (props: ThinkingMessageProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp, Copy } from '@gravity-ui/icons';
+import { Button, Icon, Text } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import { ActionButton } from '../../atoms';
+import { Loader } from '../../atoms/Loader';
+import { useThinkingMessage } from './useThinkingMessage';
+import './ThinkingMessage.scss';
+const b = block('thinking-message');
+/**
+ * ThinkingMessage component displays AI model's internal reasoning process.
+ * Shows a collapsible block with thinking content and a copy button.
+ * Displays a loader when the thinking process is still in progress.
+ *
+ * @param props - Component props
+ * @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) => (_jsx(Text, { className: b('content'), children: item }, item))) }))] }));
+};

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

@@ -0,0 +1,18 @@
+import type { ThinkingMessageContent } from '../../../types/messages';
+import { BaseMessageAction } from '../../molecules/BaseMessage';
+export type ThinkingMessageData = Omit<ThinkingMessageContent, 'type'>;
+export type UseThinkingMessageOptions = ThinkingMessageData & {
+    defaultExpanded?: boolean;
+    showStatusIndicator?: boolean;
+};
+export type ThinkingMessageAction = {
+    type: BaseMessageAction | string;
+    onClick: () => void;
+};
+export declare function useThinkingMessage(options: UseThinkingMessageOptions): {
+    isExpanded: boolean;
+    toggleExpanded: () => void;
+    buttonTitle: string;
+    content: string[];
+    showLoader: boolean;
+};

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

@@ -0,0 +1,23 @@
+import { useCallback, useMemo, useState } from 'react';
+import { i18n } from './i18n';
+export function useThinkingMessage(options) {
+    const { defaultExpanded = true, showStatusIndicator = true, data } = options;
+    const { status, content } = data;
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    const buttonTitle = useMemo(() => {
+        return i18n(`title-${status}`);
+    }, [status]);
+    const contentArray = useMemo(() => {
+        return Array.isArray(content) ? content : [content];
+    }, [content]);
+    const toggleExpanded = useCallback(() => {
+        setIsExpanded((prev) => !prev);
+    }, []);
+    return {
+        isExpanded,
+        toggleExpanded,
+        buttonTitle,
+        content: contentArray,
+        showLoader: showStatusIndicator && status === 'thinking',
+    };
+}

package/dist/src/components/organisms/ToolMessage/__stories__/ToolMessage.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import type { ToolMessageProps } from '../../../../types/tool';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ToolMessageProps>;
+export declare const WaitingSubmission: StoryObj<ToolMessageProps>;
+export declare const WaitingConfirmation: StoryObj<ToolMessageProps>;
+export declare const CustomHeaderActions: StoryObj<ToolMessageProps>;
+export declare const CustomFooterActions: StoryObj<ToolMessageProps>;
+export declare const Loading: StoryObj<ToolMessageProps>;
+export declare const Error: StoryObj<ToolMessageProps>;

package/dist/src/components/organisms/ToolMessage/__stories__/ToolMessage.stories.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Archive, Copy, Pencil } from '@gravity-ui/icons';
+import { Icon, Text } from '@gravity-ui/uikit';
+import { ToolMessage } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import { SwapArea } from '../../../../demo/SwapArea';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'organisms/ToolMessage',
+    component: ToolMessage,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        toolName: {
+            control: 'text',
+            description: 'Name of the tool',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(Showcase, { children: _jsx(Story, {}) })),
+];
+const defaultArgs = {
+    toolName: 'Writing',
+    toolIcon: _jsx(Icon, { data: Pencil, size: 16 }),
+    headerContent: _jsx(Text, { color: "secondary", children: "expectScreenshotFixture.ts" }),
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { width: "430px", children: _jsx(ToolMessage, Object.assign({}, args)) }));
+Playground.args = Object.assign(Object.assign({}, defaultArgs), { status: 'success', bodyContent: _jsx(SwapArea, {}) });
+export const WaitingSubmission = {
+    render: () => (_jsx(ShowcaseItem, { title: "Waiting Submission", children: _jsx(ContentWrapper, { width: "430px", children: _jsx(ToolMessage, { toolName: "Creating repository", status: "waitingSubmission", toolIcon: _jsx(Icon, { data: Archive, size: 16 }), bodyContent: _jsx(Text, { children: "Almost done creating your shiny new repository. Take a moment to review the name, visibility, and template. When you're ready, click 'Create repository' to finish!" }) }) }) })),
+    decorators: defaultDecorators,
+};
+export const WaitingConfirmation = {
+    render: () => (_jsx(ShowcaseItem, { title: "Waiting Confirmation", children: _jsx(ContentWrapper, { width: "430px", children: _jsx(ToolMessage, Object.assign({}, defaultArgs, { status: "waitingConfirmation", bodyContent: _jsx(SwapArea, {}) })) }) })),
+    decorators: defaultDecorators,
+};
+export const CustomHeaderActions = {
+    render: () => (_jsx(ShowcaseItem, { title: "With Custom Header Actions", children: _jsx(ContentWrapper, { width: "430px", children: _jsx(ToolMessage, Object.assign({}, defaultArgs, { headerActions: [
+                    {
+                        label: 'Copy',
+                        onClick: () => alert('Copied'),
+                        icon: _jsx(Icon, { data: Copy, size: 16 }),
+                    },
+                ] })) }) })),
+    decorators: defaultDecorators,
+};
+export const CustomFooterActions = {
+    render: () => (_jsx(ShowcaseItem, { title: "With Custom Footer Actions", children: _jsx(ContentWrapper, { width: "430px", children: _jsx(ToolMessage, Object.assign({}, defaultArgs, { status: "waitingConfirmation", footerActions: [
+                    {
+                        label: 'Custom action',
+                        onClick: () => alert('Custom action'),
+                        view: 'action',
+                    },
+                ], bodyContent: _jsx(SwapArea, {}), footerContent: "Custom footer content" })) }) })),
+    decorators: defaultDecorators,
+};
+export const Loading = {
+    render: () => (_jsx(ShowcaseItem, { title: "Loading", children: _jsx(ContentWrapper, { width: "430px", children: _jsx(ToolMessage, Object.assign({}, defaultArgs, { status: "loading" })) }) })),
+    decorators: defaultDecorators,
+};
+export const Error = {
+    render: () => (_jsx(ShowcaseItem, { title: "Error", children: _jsx(ContentWrapper, { width: "430px", children: _jsx(ToolMessage, Object.assign({}, defaultArgs, { status: "error", bodyContent: _jsx(SwapArea, {}) })) }) })),
+    decorators: defaultDecorators,
+};

package/dist/src/components/organisms/ToolMessage/i18n/en.json

@@ -0,0 +1,9 @@
+{
+    "action-reject": "Reject",
+    "action-accept": "Accept",
+    "action-cancel": "Cancel",
+    "action-collapse": "Collapse",
+    "action-expand": "Expand",
+    "status-waiting-confirmation": "Awaiting confirmation",
+    "status-waiting-submission": "Awaiting form submission"
+}

package/dist/src/components/organisms/ToolMessage/i18n/index.d.ts

@@ -0,0 +1,13 @@
+export declare const i18n: ((key: "action-reject" | "action-accept" | "action-cancel" | "action-collapse" | "action-expand" | "status-waiting-confirmation" | "status-waiting-submission", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "action-reject" | "action-accept" | "action-cancel" | "action-collapse" | "action-expand" | "status-waiting-confirmation" | "status-waiting-submission", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "action-reject" | "action-accept" | "action-cancel" | "action-collapse" | "action-expand" | "status-waiting-confirmation" | "status-waiting-submission", params?: import("@gravity-ui/i18n").Params) => string;
+    };
+    keysetData: {
+        "g-aikit-ToolMessage": Record<"action-reject" | "action-accept" | "action-cancel" | "action-collapse" | "action-expand" | "status-waiting-confirmation" | "status-waiting-submission", import("@gravity-ui/i18n").KeyData>;
+    };
+};

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

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}ToolMessage`);

package/dist/src/components/organisms/ToolMessage/i18n/ru.json

@@ -0,0 +1,9 @@
+{
+    "action-reject": "Отклонить",
+    "action-accept": "Принять",
+    "action-cancel": "Отменить",
+    "action-collapse": "Свернуть",
+    "action-expand": "Развернуть",
+    "status-waiting-confirmation": "Ожидание подтверждения",
+    "status-waiting-submission": "Ожидание отправки формы"
+}