@gravity-ui/aikit 0.0.1

package/dist/src/components/organisms/Header/Header.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronsCollapseUpRight, ChevronsExpandUpRight, ClockArrowRotateLeft, Plus, Sparkles, Xmark, } from '@gravity-ui/icons';
+import { Button, Icon, Text } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import { ActionButton } from '../../atoms';
+import { ButtonGroup } from '../../molecules';
+import { i18n } from './i18n';
+import { HeaderAction } from './types';
+import { useHeader } from './useHeader';
+import './Header.scss';
+const b = block('header');
+// Icons for base actions
+const ACTION_ICONS = {
+    [HeaderAction.NewChat]: Plus,
+    [HeaderAction.History]: ClockArrowRotateLeft,
+    [HeaderAction.Folding]: ChevronsCollapseUpRight, // Default icon, will be switched based on state
+    [HeaderAction.Close]: Xmark,
+};
+// Icons for folding states
+const FOLDING_ICONS = {
+    collapsed: ChevronsExpandUpRight,
+    opened: ChevronsCollapseUpRight,
+};
+/**
+ * Header component for displaying chat header with navigation and actions
+ *
+ * @param props - Component props
+ * @returns Header component
+ */
+export function Header(props) {
+    const { title, preview, icon, baseActions, additionalActions, titlePosition, className, historyButtonRef, } = useHeader(props);
+    // Render base action
+    const renderBaseAction = (action) => {
+        let IconComponent = ACTION_ICONS[action.id];
+        // Handle folding icon based on state
+        if (action.id === HeaderAction.Folding && action.foldingState) {
+            IconComponent = FOLDING_ICONS[action.foldingState];
+        }
+        if (!IconComponent) {
+            return null;
+        }
+        // Get tooltip text
+        let tooltipKey = `action-tooltip-${action.id}`;
+        if (action.id === HeaderAction.Folding && action.foldingState) {
+            tooltipKey = `action-tooltip-folding-${action.foldingState}`;
+        }
+        // Determine ref for history button
+        const buttonRef = action.id === HeaderAction.History ? historyButtonRef : undefined;
+        return (_jsx(ActionButton, { ref: buttonRef, tooltipTitle: i18n(tooltipKey), size: "m", view: "flat", onClick: action.onClick, className: b('action-button'), qa: `header-action-${action.id}`, children: _jsx(Icon, { data: IconComponent, size: 16 }) }, action.id));
+    };
+    // Render additional action
+    const renderAdditionalAction = (action, index) => {
+        if (action.content && React.isValidElement(action.content)) {
+            return (_jsx(React.Fragment, { children: action.content }, action.id || `additional-${index}`));
+        }
+        if (action.buttonProps) {
+            return _jsx(Button, Object.assign({}, action.buttonProps), action.id);
+        }
+        return null;
+    };
+    // Determine class for title positioning
+    const titlePositionClass = b('title-container', { position: titlePosition });
+    return (_jsxs("div", { className: b('', className), children: [icon ? _jsx("div", { className: b('icon'), children: icon }) : _jsx(Icon, { data: Sparkles, size: 16 }), _jsxs("div", { className: titlePositionClass, children: [title && (_jsx(Text, { as: "div", variant: "subheader-2", className: b('title'), children: title })), preview && _jsx("div", { className: b('preview'), children: preview })] }), _jsxs(ButtonGroup, { children: [additionalActions.map((action, index) => renderAdditionalAction(action, index)), baseActions.map((action) => renderBaseAction(action))] })] }));
+}

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

@@ -0,0 +1,13 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { type HeaderProps } from '../index';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<HeaderProps>;
+export declare const WithTitle: StoryFn<HeaderProps>;
+export declare const WithIcon: StoryFn<HeaderProps>;
+export declare const WithPreview: StoryFn<HeaderProps>;
+export declare const TitlePositions: StoryObj<HeaderProps>;
+export declare const BaseActions: StoryObj<HeaderProps>;
+export declare const AdditionalActions: StoryFn<HeaderProps>;
+export declare const FullExample: StoryFn<HeaderProps>;
+export declare const FoldingInteractive: StoryFn<HeaderProps>;

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

@@ -0,0 +1,130 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Gear } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import { Header, HeaderAction } from '../index';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'organisms/Header',
+    component: Header,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        titlePosition: {
+            control: 'radio',
+            options: ['left', 'center'],
+            description: 'Title position',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(Showcase, { children: _jsx(Story, {}) })),
+];
+// Mock handlers for actions
+const mockHandlers = {
+    handleNewChat: () => {
+        // eslint-disable-next-line no-console
+        console.log('New chat clicked');
+    },
+    handleHistoryToggle: () => {
+        // eslint-disable-next-line no-console
+        console.log('History toggle clicked');
+    },
+    handleFolding: (value) => {
+        // eslint-disable-next-line no-console
+        console.log('Folding clicked:', value);
+    },
+    handleClose: () => {
+        // eslint-disable-next-line no-console
+        console.log('Close clicked');
+    },
+};
+export const Playground = (args) => {
+    return (_jsx(ContentWrapper, { width: "480px", children: _jsx(Header, Object.assign({}, args)) }));
+};
+Playground.args = Object.assign({ title: 'Chat Header', baseActions: [
+        HeaderAction.NewChat,
+        HeaderAction.History,
+        HeaderAction.Folding,
+        HeaderAction.Close,
+    ], foldingState: 'opened' }, mockHandlers);
+export const WithTitle = (args) => {
+    return (_jsx(ContentWrapper, { width: "480px", children: _jsx(Header, Object.assign({ title: "Chat Header", baseActions: [HeaderAction.NewChat, HeaderAction.History, HeaderAction.Close] }, mockHandlers, args)) }));
+};
+export const WithIcon = (args) => {
+    return (_jsx(ContentWrapper, { width: "480px", children: _jsx(Header, Object.assign({ icon: _jsx("div", { style: { width: 24, height: 24, background: '#ccc', borderRadius: 4 } }), title: "Chat Header", baseActions: [HeaderAction.NewChat, HeaderAction.History, HeaderAction.Close] }, mockHandlers, args)) }));
+};
+export const WithPreview = (args) => {
+    return (_jsx(ContentWrapper, { width: "480px", children: _jsx(Header, Object.assign({ title: "Chat Header", preview: _jsx("div", { children: "Preview" }), baseActions: [HeaderAction.NewChat, HeaderAction.History, HeaderAction.Close] }, mockHandlers, args)) }));
+};
+export const TitlePositions = {
+    render: (args) => {
+        return (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Left", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(Header, Object.assign({ title: "Left Title", titlePosition: "left", baseActions: [HeaderAction.NewChat, HeaderAction.Close] }, mockHandlers, args)) }) }), _jsx(ShowcaseItem, { title: "Center", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(Header, Object.assign({ title: "Center Title", titlePosition: "center", baseActions: [HeaderAction.NewChat, HeaderAction.Close] }, mockHandlers, args)) }) })] }));
+    },
+    decorators: defaultDecorators,
+};
+export const BaseActions = {
+    render: (args) => {
+        return (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "All actions", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(Header, Object.assign({ title: "All Actions", baseActions: [
+                                HeaderAction.NewChat,
+                                HeaderAction.History,
+                                HeaderAction.Folding,
+                                HeaderAction.Close,
+                            ], foldingState: "opened" }, mockHandlers)) }) }), _jsx(ShowcaseItem, { title: "Folding opened", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(Header, Object.assign({ title: "With Folding (opened)", baseActions: [
+                                HeaderAction.NewChat,
+                                HeaderAction.History,
+                                HeaderAction.Folding,
+                            ], foldingState: "opened" }, mockHandlers)) }) }), _jsx(ShowcaseItem, { title: "Folding collapsed", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(Header, Object.assign({ title: "With Folding (collapsed)", baseActions: [
+                                HeaderAction.NewChat,
+                                HeaderAction.History,
+                                HeaderAction.Folding,
+                            ], foldingState: "collapsed" }, mockHandlers, args)) }) })] }));
+    },
+    decorators: defaultDecorators,
+};
+export const AdditionalActions = (args) => {
+    return (_jsx(ContentWrapper, { width: "480px", children: _jsx(Header, Object.assign({ title: "With Additional Actions", baseActions: [HeaderAction.NewChat, HeaderAction.History, HeaderAction.Close], additionalActions: [
+                {
+                    children: 'Action 1',
+                    onClick: () => {
+                        // eslint-disable-next-line no-console
+                        console.log('Additional action 1');
+                    },
+                },
+                _jsx(Button, { size: "m", view: "flat", children: _jsx(Icon, { data: Gear, size: 16 }) }, "settings"),
+            ] }, mockHandlers, args)) }));
+};
+export const FullExample = (args) => {
+    return (_jsx(ContentWrapper, { width: "480px", children: _jsx(Header, Object.assign({ icon: _jsx("div", { style: { width: 24, height: 24, background: '#ccc', borderRadius: 4 } }), title: "Chat Header", preview: _jsx("div", { children: "Preview" }), baseActions: [HeaderAction.NewChat, HeaderAction.History, HeaderAction.Close], additionalActions: [
+                {
+                    children: 'Settings',
+                    view: 'outlined',
+                    size: 'm',
+                    onClick: () => {
+                        // eslint-disable-next-line no-console
+                        console.log('Settings clicked');
+                    },
+                },
+                _jsx(Button, { size: "m", view: "flat", children: _jsx(Icon, { data: Gear, size: 16 }) }, "settings"),
+            ], titlePosition: "center" }, mockHandlers, args)) }));
+};
+// Interactive story to demonstrate folding state toggle
+export const FoldingInteractive = (args) => {
+    const [foldingState, setFoldingState] = useState('opened');
+    return (_jsx(ContentWrapper, { width: "480px", children: _jsx(Header, Object.assign({ title: "Interactive Folding", baseActions: [
+                HeaderAction.NewChat,
+                HeaderAction.History,
+                HeaderAction.Folding,
+                HeaderAction.Close,
+            ], foldingState: foldingState, handleFolding: (value) => {
+                setFoldingState(value);
+                // eslint-disable-next-line no-console
+                console.log('Folding state changed to:', value);
+            }, handleNewChat: mockHandlers.handleNewChat, handleHistoryToggle: mockHandlers.handleHistoryToggle, handleClose: mockHandlers.handleClose }, args)) }));
+};

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

@@ -0,0 +1,7 @@
+{
+    "action-tooltip-newChat": "New chat",
+    "action-tooltip-history": "History",
+    "action-tooltip-folding-collapsed": "Expand",
+    "action-tooltip-folding-opened": "Collapse",
+    "action-tooltip-close": "Close"
+}

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

@@ -0,0 +1,13 @@
+export declare const i18n: ((key: "action-tooltip-newChat" | "action-tooltip-history" | "action-tooltip-folding-collapsed" | "action-tooltip-folding-opened" | "action-tooltip-close", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "action-tooltip-newChat" | "action-tooltip-history" | "action-tooltip-folding-collapsed" | "action-tooltip-folding-opened" | "action-tooltip-close", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "action-tooltip-newChat" | "action-tooltip-history" | "action-tooltip-folding-collapsed" | "action-tooltip-folding-opened" | "action-tooltip-close", params?: import("@gravity-ui/i18n").Params) => string;
+    };
+    keysetData: {
+        "g-aikit-Header": Record<"action-tooltip-newChat" | "action-tooltip-history" | "action-tooltip-folding-collapsed" | "action-tooltip-folding-opened" | "action-tooltip-close", import("@gravity-ui/i18n").KeyData>;
+    };
+};

package/dist/src/components/organisms/Header/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}Header`);

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

@@ -0,0 +1,7 @@
+{
+    "action-tooltip-newChat": "Новый чат",
+    "action-tooltip-history": "История",
+    "action-tooltip-folding-collapsed": "Развернуть",
+    "action-tooltip-folding-opened": "Свернуть",
+    "action-tooltip-close": "Закрыть"
+}

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

@@ -0,0 +1,4 @@
+export * from './types';
+export { Header } from './Header';
+export { useHeader } from './useHeader';
+export type { ActionItem } from './useHeader';

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

@@ -0,0 +1,6 @@
+// Types
+export * from './types';
+// Components
+export { Header } from './Header';
+// Hooks
+export { useHeader } from './useHeader';

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

@@ -0,0 +1,23 @@
+import type { ButtonProps } from '@gravity-ui/uikit';
+export declare enum HeaderAction {
+    NewChat = "newChat",
+    History = "history",
+    Folding = "folding",
+    Close = "close"
+}
+export type AdditionalActionsConfig = ButtonProps | React.ReactNode;
+export type HeaderProps = {
+    icon?: React.ReactNode;
+    title?: string;
+    preview?: React.ReactNode;
+    baseActions?: HeaderAction[];
+    handleNewChat?: () => void;
+    handleHistoryToggle?: () => void;
+    handleFolding?: (value: 'collapsed' | 'opened') => void;
+    handleClose?: () => void;
+    additionalActions?: AdditionalActionsConfig[];
+    historyButtonRef?: React.RefObject<HTMLElement>;
+    foldingState?: 'collapsed' | 'opened';
+    titlePosition?: 'left' | 'center';
+    className?: string;
+};

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

@@ -0,0 +1,7 @@
+export var HeaderAction;
+(function (HeaderAction) {
+    HeaderAction["NewChat"] = "newChat";
+    HeaderAction["History"] = "history";
+    HeaderAction["Folding"] = "folding";
+    HeaderAction["Close"] = "close";
+})(HeaderAction || (HeaderAction = {}));

package/dist/src/components/organisms/Header/useHeader.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { ButtonProps } from '@gravity-ui/uikit';
+import { type HeaderProps } from './types';
+export type ActionItem = {
+    id: string;
+    type: 'base' | 'additional';
+    content: React.ReactNode;
+    onClick?: () => void;
+    buttonProps?: ButtonProps;
+    foldingState?: 'collapsed' | 'opened';
+};
+export declare function useHeader(props: HeaderProps): {
+    title: string | undefined;
+    preview: React.ReactNode | undefined;
+    icon: React.ReactNode | undefined;
+    baseActions: ActionItem[];
+    additionalActions: ActionItem[];
+    titlePosition: 'left' | 'center';
+    className?: string;
+    historyButtonRef?: React.RefObject<HTMLElement>;
+};

package/dist/src/components/organisms/Header/useHeader.js

@@ -0,0 +1,71 @@
+import React, { useMemo } from 'react';
+import { HeaderAction } from './types';
+export function useHeader(props) {
+    const { icon, title, preview, baseActions = [], handleNewChat, handleHistoryToggle, handleClose, handleFolding, foldingState = 'opened', additionalActions = [], titlePosition = 'left', className, historyButtonRef, } = props;
+    // Build base actions
+    const baseActionsList = useMemo(() => {
+        const actions = [];
+        baseActions.forEach((action) => {
+            if (action === HeaderAction.Folding) {
+                if (handleFolding) {
+                    actions.push({
+                        id: action,
+                        type: 'base',
+                        content: null, // Will be rendered in component
+                        onClick: () => {
+                            const newState = foldingState === 'opened' ? 'collapsed' : 'opened';
+                            handleFolding(newState);
+                        },
+                        foldingState,
+                    });
+                }
+                return;
+            }
+            const actionMap = {
+                [HeaderAction.NewChat]: handleNewChat,
+                [HeaderAction.History]: handleHistoryToggle,
+                [HeaderAction.Close]: handleClose,
+            };
+            const handler = actionMap[action];
+            if (handler) {
+                actions.push({
+                    id: action,
+                    type: 'base',
+                    content: null, // Will be rendered in component
+                    onClick: handler,
+                });
+            }
+        });
+        return actions;
+    }, [baseActions, handleNewChat, handleHistoryToggle, handleClose, handleFolding, foldingState]);
+    // Build additional actions
+    const additionalActionsList = useMemo(() => {
+        return additionalActions.map((action, index) => {
+            if (React.isValidElement(action)) {
+                return {
+                    id: `additional-${index}`,
+                    type: 'additional',
+                    content: action,
+                };
+            }
+            // If it's ButtonProps, create a button
+            const buttonProps = action;
+            return {
+                id: buttonProps.qa || `additional-${index}`,
+                type: 'additional',
+                content: null, // Will be rendered in component
+                buttonProps,
+            };
+        });
+    }, [additionalActions]);
+    return {
+        title,
+        preview,
+        icon,
+        baseActions: baseActionsList,
+        additionalActions: additionalActionsList,
+        titlePosition,
+        className,
+        historyButtonRef,
+    };
+}

package/dist/src/components/organisms/MessageList/ErrorAlert.d.ts

@@ -0,0 +1,6 @@
+import { AlertProps } from '../../atoms/Alert';
+export type ErrorAlertProps = {
+    onRetry?: () => void;
+    errorMessage?: AlertProps;
+};
+export declare function ErrorAlert({ onRetry, errorMessage }: ErrorAlertProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRotateLeft } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import { Alert } from '../../atoms/Alert';
+import { i18n } from './i18n';
+const b = block('message-list');
+export function ErrorAlert({ onRetry, errorMessage }) {
+    return (_jsx(Alert, Object.assign({ text: i18n('default-error-text'), variant: "warning", button: onRetry
+            ? {
+                content: (_jsxs("div", { className: b('retry-button'), children: [_jsx(Icon, { data: ArrowRotateLeft, size: 14 }), i18n('retry-button')] })),
+                onClick: onRetry,
+            }
+            : undefined }, errorMessage)));
+}

package/dist/src/components/organisms/MessageList/MessageList.d.ts

@@ -0,0 +1,20 @@
+import type { OptionsType } from '@diplodoc/transform/lib/typings';
+import { ChatStatus } from '../../../types';
+import type { TChatMessage, TMessageContent, TMessageMetadata } from '../../../types/messages';
+import { type MessageRendererRegistry } from '../../../utils/messageTypeRegistry';
+import { AlertProps } from '../../atoms/Alert';
+import './MessageList.scss';
+export type MessageListProps<TContent extends TMessageContent = never> = {
+    messages: TChatMessage<TContent, TMessageMetadata>[];
+    status?: ChatStatus;
+    errorMessage?: AlertProps;
+    onRetry?: () => void;
+    messageRendererRegistry?: MessageRendererRegistry;
+    transformOptions?: OptionsType;
+    showActionsOnHover?: boolean;
+    showTimestamp?: boolean;
+    showAvatar?: boolean;
+    className?: string;
+    qa?: string;
+};
+export declare function MessageList<TContent extends TMessageContent = never>({ messages, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, showAvatar, className, qa, status, errorMessage, onRetry, }: MessageListProps<TContent>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isAssistantMessage, isUserMessage } from '../../../utils';
+import { block } from '../../../utils/cn';
+import { Loader } from '../../atoms/Loader';
+import { AssistantMessage } from '../AssistantMessage';
+import { UserMessage } from '../UserMessage';
+import { ErrorAlert } from './ErrorAlert';
+import './MessageList.scss';
+const b = block('message-list');
+export function MessageList({ messages, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, showAvatar, className, qa, status, errorMessage, onRetry, }) {
+    const renderMessage = (message, index) => {
+        if (isUserMessage(message)) {
+            return (_jsx(UserMessage, { content: message.content, actions: message.actions, timestamp: message.timestamp, format: message.format, avatarUrl: message.avatarUrl, transformOptions: transformOptions, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp, showAvatar: showAvatar }, message.id || `message-${index}`));
+        }
+        if (isAssistantMessage(message)) {
+            return (_jsx(AssistantMessage, { content: message.content, actions: message.actions, timestamp: message.timestamp, id: message.id, messageRendererRegistry: messageRendererRegistry, transformOptions: transformOptions, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp }, message.id || `message-${index}`));
+        }
+        return null;
+    };
+    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [_jsx("div", { className: b('messages', className), "data-qa": qa, children: messages.map(renderMessage) }), status === 'submitted' && _jsx(Loader, {}), status === 'error' && _jsx(ErrorAlert, { onRetry: onRetry, errorMessage: errorMessage })] }));
+}

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

@@ -0,0 +1,22 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { type MessageListProps } from '..';
+import type { TMessageContent } from '../../../../types/messages';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<MessageListProps>;
+export declare const WithSubmittedStatus: StoryObj<MessageListProps>;
+export declare const WithErrorMessage: StoryObj<MessageListProps>;
+export declare const WithToolMessage: StoryObj<MessageListProps>;
+interface ChartMessageData {
+    chartData: {
+        labels: string[];
+        datasets: Array<{
+            label: string;
+            data: number[];
+            color?: string;
+        }>;
+    };
+    chartType: 'line' | 'bar' | 'pie';
+}
+type ChartMessageContent = TMessageContent<'chart', ChartMessageData>;
+export declare const WithCustomMessageType: StoryObj<MessageListProps<ChartMessageContent>>;

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

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pencil } from '@gravity-ui/icons';
+import { Icon, Text } from '@gravity-ui/uikit';
+import { MessageList } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import { createMessageRendererRegistry, registerMessageRenderer, } from '../../../../utils/messageTypeRegistry';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'organisms/MessageList',
+    component: MessageList,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        messages: {
+            control: 'object',
+            description: 'Array of messages to render',
+        },
+        messageRendererRegistry: {
+            control: false,
+            description: 'Custom message renderer registry',
+        },
+        showActionsOnHover: {
+            control: 'boolean',
+            description: 'Show action buttons on hover for all messages',
+        },
+        showTimestamp: {
+            control: 'boolean',
+            description: 'Show timestamp for all messages',
+        },
+        showAvatar: {
+            control: 'boolean',
+            description: 'Show avatar for user messages',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+const defaultDecorators = [
+    (StoryComponent) => (_jsx(Showcase, { children: _jsx(StoryComponent, {}) })),
+];
+const userMessage = {
+    id: '1',
+    role: 'user',
+    timestamp: '2024-01-01T00:00:00Z',
+    content: 'Hello, how are you?',
+};
+const assistantMessage = {
+    id: '2',
+    role: 'assistant',
+    timestamp: '2024-01-01T00:00:01Z',
+    content: 'Hi! I am doing well, thank you for asking.',
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { width: "480px", children: _jsx(MessageList, Object.assign({}, args)) }));
+Playground.args = {
+    messages: [userMessage, assistantMessage],
+};
+export const WithSubmittedStatus = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "With Submitted Status", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(MessageList, Object.assign({}, args, { messages: [userMessage], status: "submitted" })) }) })),
+};
+export const WithErrorMessage = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "With Error Message", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(MessageList, Object.assign({}, args, { messages: [userMessage], status: "error", 
+                // eslint-disable-next-line no-console
+                onRetry: () => console.log('retry') })) }) })),
+};
+const toolIcon = _jsx(Icon, { data: Pencil });
+const toolHeaderContent = (_jsx(Text, { color: "secondary", variant: "body-1", children: "expectScreenshotFixture.ts" }));
+export const WithToolMessage = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "With Tool Message", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(MessageList, Object.assign({}, args, { messages: [
+                    {
+                        role: 'user',
+                        content: 'Analyze the project and suggest a better solution to implement a feature-name',
+                    },
+                    {
+                        role: 'assistant',
+                        content: [
+                            {
+                                type: 'text',
+                                data: {
+                                    text: "I'll scan the SCSS structure: global styles and mixins, theme files, and a couple of component styles. I'll also search for the custom Sass function usage and theming patterns.",
+                                },
+                            },
+                            {
+                                type: 'tool',
+                                data: {
+                                    toolName: 'Reading',
+                                    status: 'success',
+                                    toolIcon,
+                                    expandable: true,
+                                    headerContent: toolHeaderContent,
+                                },
+                            },
+                            {
+                                type: 'text',
+                                data: {
+                                    text: "Absolutely! Here are some suggestions for improving the SCSS structure: \n\n- Consider organizing global styles and mixins into separate directories for better modularity. \n- Group theme files and component styles to simplify maintenance. \n- Use consistent naming patterns for custom Sass functions and variables. \n- Leverage nesting carefully to avoid deeply nested selectors and improve readability. \n- Document theming patterns to ease onboarding for new contributors.\n\nLet me know if you'd like examples or more details on any point!",
+                                },
+                            },
+                        ],
+                    },
+                ] })) }) })),
+    decorators: defaultDecorators,
+};
+const ChartMessageView = ({ part }) => {
+    const { chartData, chartType } = part.data;
+    return (_jsxs("div", { style: {
+            padding: '16px',
+            border: '1px solid var(--g-color-line-generic)',
+            borderRadius: '8px',
+            backgroundColor: 'var(--g-color-base-float)',
+        }, children: [_jsxs("div", { style: { marginBottom: '8px', fontWeight: 'bold' }, children: ["Chart: ", chartType] }), _jsxs("div", { style: { fontSize: '12px', color: 'var(--g-color-text-secondary)' }, children: ["Labels: ", chartData.labels.join(', ')] }), _jsxs("div", { style: { fontSize: '12px', color: 'var(--g-color-text-secondary)' }, children: ["Datasets: ", chartData.datasets.length] })] }));
+};
+export const WithCustomMessageType = {
+    render: (args) => {
+        const customRegistry = createMessageRendererRegistry();
+        registerMessageRenderer(customRegistry, 'chart', {
+            component: ChartMessageView,
+        });
+        return (_jsx(ShowcaseItem, { title: "With Custom Message Type", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(MessageList, Object.assign({}, args, { messages: [
+                        {
+                            id: 'user-1',
+                            role: 'user',
+                            timestamp: '2024-01-01T00:00:00Z',
+                            content: 'Hi! Can you show me the sales statistics for the first months of the year?',
+                        },
+                        {
+                            id: 'assistant-1',
+                            role: 'assistant',
+                            timestamp: '2024-01-01T00:00:02Z',
+                            content: [
+                                {
+                                    type: 'text',
+                                    data: {
+                                        text: 'Sure! Here is a bar chart showing sales statistics by month. As you can see, February had the highest sales.',
+                                    },
+                                },
+                                {
+                                    type: 'chart',
+                                    data: {
+                                        chartData: {
+                                            labels: ['January', 'February', 'March', 'April'],
+                                            datasets: [
+                                                {
+                                                    label: 'Sales',
+                                                    data: [12, 19, 3, 5],
+                                                    color: '#0077ff',
+                                                },
+                                            ],
+                                        },
+                                        chartType: 'bar',
+                                    },
+                                },
+                            ],
+                        },
+                    ], messageRendererRegistry: customRegistry })) }) }));
+    },
+    decorators: defaultDecorators,
+};