@gravity-ui/aikit 0.6.0 → 1.0.1

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

@@ -1,10 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Button, Text } from '@gravity-ui/uikit';
+import { isActionConfig } from '../../../utils/actionUtils';
 import { block } from '../../../utils/cn';
 import { Loader, Shimmer } from '../../atoms';
 import { ButtonGroup } from '../ButtonGroup';
 import './ToolFooter.scss';
 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) => (_jsx(Button, { view: action.view, onClick: action.onClick, size: "s", children: action.label }, index))) })] }));
+    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) => {
+                    if (!isActionConfig(action)) {
+                        return _jsx(React.Fragment, { children: action }, index);
+                    }
+                    return (_jsx(Button, { view: action.view, onClick: action.onClick, size: "s", children: action.label }, index));
+                }) })] }));
 }

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

@@ -0,0 +1,8 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import type { ToolHeaderProps } from '../../../../types/tool';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ToolHeaderProps>;
+export declare const Loading: StoryObj<ToolHeaderProps>;
+export declare const Success: StoryObj<ToolHeaderProps>;
+export declare const Cancelled: StoryObj<ToolHeaderProps>;

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronDown, Copy, Pencil } from '@gravity-ui/icons';
+import { Icon, Text } from '@gravity-ui/uikit';
+import { ToolHeader } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/ToolHeader',
+    component: ToolHeader,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        toolName: {
+            control: 'text',
+            description: 'Name of the tool',
+        },
+        status: {
+            control: 'select',
+            options: ['success', 'error', 'loading', 'cancelled'],
+            description: 'Status indicator',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(Showcase, { children: _jsx(Story, {}) })),
+];
+const copyAction = {
+    label: 'Copy',
+    onClick: () => alert('Copied'),
+    icon: _jsx(Icon, { data: Copy, size: 16 }),
+};
+const collapseAction = {
+    label: 'Collapse',
+    onClick: () => alert('Collapsed'),
+    icon: _jsx(Icon, { data: ChevronDown, size: 16 }),
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { width: "430px", children: _jsx(ToolHeader, Object.assign({}, args)) }));
+Playground.args = {
+    toolIcon: _jsx(Icon, { data: Pencil, size: 16 }),
+    toolName: 'Writing',
+    content: (_jsx(Text, { color: "secondary", variant: "body-1", children: "expectScreenshotFixture.ts" })),
+    status: 'success',
+};
+export const Loading = {
+    render: (args) => (_jsx(ContentWrapper, { width: "430px", children: _jsx(ToolHeader, Object.assign({}, args, { toolIcon: _jsx(Icon, { data: Pencil, size: 16 }), toolName: "Writing", content: _jsx(Text, { color: "secondary", variant: "body-1", children: "expectScreenshotFixture.ts" }), status: "loading" })) })),
+    decorators: defaultDecorators,
+};
+export const Success = {
+    render: (args) => (_jsx(ContentWrapper, { width: "430px", children: _jsx(ToolHeader, Object.assign({}, args, { toolIcon: _jsx(Icon, { data: Pencil, size: 16 }), toolName: "Writing", content: _jsx(Text, { color: "secondary", variant: "body-1", children: "expectScreenshotFixture.ts" }), actions: [collapseAction, copyAction], status: "success" })) })),
+    decorators: defaultDecorators,
+};
+export const Cancelled = {
+    render: (args) => (_jsx(ContentWrapper, { width: "430px", children: _jsx(ToolHeader, Object.assign({}, args, { toolIcon: _jsx(Icon, { data: Pencil, size: 16 }), toolName: "Writing", content: _jsx(Text, { color: "secondary", variant: "body-1", children: "expectScreenshotFixture.ts" }), status: "cancelled" })) })),
+    decorators: defaultDecorators,
+};

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

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Text } from '@gravity-ui/uikit';
+import { isActionConfig } from '../../../utils/actionUtils';
 import { block } from '../../../utils/cn';
 import { ActionButton } from '../../atoms';
 import { ButtonGroup } from '../ButtonGroup';
@@ -9,5 +11,12 @@ const b = block('tool-header');
 export function ToolHeader(props) {
     const { toolIcon, toolName, content, actions, status, className, qa } = props;
     const hasActions = actions && actions.length > 0;
-    return (_jsxs("div", { className: b('', className), "data-qa": qa, children: [_jsxs("div", { className: b('left'), children: [toolIcon, _jsx(Text, { children: toolName }), content] }), _jsxs("div", { className: b('right'), children: [hasActions && (_jsx(ButtonGroup, { children: actions.map((action, index) => (_jsx(ActionButton, Object.assign({ tooltipTitle: action.label, view: "flat-secondary", size: "s" }, action, { children: action.icon }), index))) })), _jsx(ToolStatus, { status: status })] })] }));
+    return (_jsxs("div", { className: b('', className), "data-qa": qa, children: [_jsxs("div", { className: b('left'), children: [toolIcon, _jsx(Text, { children: toolName }), content] }), _jsxs("div", { className: b('right'), children: [hasActions && (_jsx(ButtonGroup, { children: actions.map((action, index) => {
+                            // Check if action is a ReactNode (not an object with properties)
+                            if (!isActionConfig(action)) {
+                                return _jsx(React.Fragment, { children: action }, index);
+                            }
+                            // TypeScript now knows that action is ActionConfig
+                            return (_jsx(ActionButton, { tooltipTitle: action.label, view: action.view || 'flat-secondary', size: "s", onClick: action.onClick, children: action.icon }, index));
+                        }) })), _jsx(ToolStatus, { status: status })] })] }));
 }

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

@@ -0,0 +1,9 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import type { ToolStatusProps } from '../index';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ToolStatusProps>;
+export declare const Success: StoryObj<ToolStatusProps>;
+export declare const Error: StoryObj<ToolStatusProps>;
+export declare const Loading: StoryObj<ToolStatusProps>;
+export declare const Cancelled: StoryObj<ToolStatusProps>;

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToolStatus } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/ToolStatus',
+    component: ToolStatus,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        status: {
+            control: 'select',
+            options: ['success', 'error', 'loading', 'cancelled', undefined],
+            description: 'Tool status',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(Showcase, { children: _jsx(Story, {}) })),
+];
+export const Playground = (args) => (_jsx(ContentWrapper, { width: "430px", children: _jsx(ToolStatus, Object.assign({}, args)) }));
+Playground.args = {
+    status: 'success',
+};
+export const Success = {
+    render: (args) => (_jsx(ContentWrapper, { width: "430px", children: _jsx(ToolStatus, Object.assign({}, args, { status: "success" })) })),
+    decorators: defaultDecorators,
+};
+export const Error = {
+    render: (args) => (_jsx(ContentWrapper, { width: "430px", children: _jsx(ToolStatus, Object.assign({}, args, { status: "error" })) })),
+    decorators: defaultDecorators,
+};
+export const Loading = {
+    render: (args) => (_jsx(ContentWrapper, { width: "430px", children: _jsx(ToolStatus, Object.assign({}, args, { status: "loading" })) })),
+    decorators: defaultDecorators,
+};
+export const Cancelled = {
+    render: (args) => (_jsx(ContentWrapper, { width: "430px", children: _jsx(ToolStatus, Object.assign({}, args, { status: "cancelled" })) })),
+    decorators: defaultDecorators,
+};

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

@@ -0,0 +1,13 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { type AssistantMessageProps } from '..';
+import type { TMessageContent } from '../../../../types/messages';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<AssistantMessageProps>;
+export declare const WithToolCall: StoryObj<AssistantMessageProps>;
+interface CustomMessageData {
+    title: string;
+    description: string;
+}
+type CustomMessageContent = TMessageContent<'custom', CustomMessageData>;
+export declare const WithCustomRenderer: StoryObj<AssistantMessageProps<CustomMessageContent>>;

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

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-console */
+import { Pencil } from '@gravity-ui/icons';
+import { Icon, Text } from '@gravity-ui/uikit';
+import { AssistantMessage } 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/AssistantMessage',
+    component: AssistantMessage,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        content: {
+            control: 'object',
+            description: 'Message content',
+        },
+        actions: {
+            control: 'object',
+            description: 'Message actions',
+        },
+        timestamp: {
+            control: 'text',
+            description: 'Message timestamp',
+        },
+        id: {
+            control: 'text',
+            description: 'Message ID',
+        },
+        messageRendererRegistry: {
+            control: false,
+            description: 'Custom message renderer registry',
+        },
+        showActionsOnHover: {
+            control: 'boolean',
+            description: 'Show action buttons on hover',
+        },
+        showTimestamp: {
+            control: 'boolean',
+            description: 'Show timestamp in actions area',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+const simpleMessage = {
+    id: '1',
+    role: 'assistant',
+    content: 'Hello! How can I help you today?',
+};
+const multiPartMessage = {
+    id: '4',
+    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',
+                headerContent: (_jsx(Text, { color: "secondary", variant: "body-1", children: "Warning.css" })),
+                status: 'success',
+                toolIcon: _jsx(Icon, { data: Pencil }),
+            },
+        },
+        {
+            type: 'text',
+            data: {
+                text: 'I’m organizing which files to read first. I’ll start with the essentials like package.json, README.md, tsconfig.json, jest.config.js, and eslint.config.mjs.',
+            },
+        },
+    ],
+};
+const actions = [
+    // eslint-disable-next-line no-console
+    { actionType: 'copy', onClick: () => console.log('Copy clicked') },
+    // eslint-disable-next-line no-console
+    { actionType: 'like', onClick: () => console.log('Like clicked') },
+    // eslint-disable-next-line no-console
+    { actionType: 'unlike', onClick: () => console.log('Unlike clicked') },
+];
+export const Playground = (args) => (_jsx(ContentWrapper, { width: "480px", children: _jsx(AssistantMessage, Object.assign({}, args)) }));
+Playground.args = {
+    content: simpleMessage.content,
+    actions,
+    timestamp: simpleMessage.timestamp,
+    id: simpleMessage.id,
+};
+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: [
+        (StoryComponent) => (_jsx(Showcase, { children: _jsx(StoryComponent, {}) })),
+    ],
+};
+const CustomMessageView = ({ part, }) => {
+    const { title, description } = 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: [_jsx("div", { style: { fontWeight: 'bold', marginBottom: '8px' }, children: title }), _jsx("div", { style: { color: 'var(--g-color-text-secondary)' }, children: description })] }));
+};
+export const WithCustomRenderer = {
+    render: (args) => {
+        const customRegistry = createMessageRendererRegistry();
+        registerMessageRenderer(customRegistry, 'custom', {
+            component: CustomMessageView,
+        });
+        const customMessage = {
+            id: '5',
+            role: 'assistant',
+            timestamp: '2024-01-01T00:00:04Z',
+            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: 'custom',
+                    data: {
+                        title: 'Custom Message',
+                        description: 'This is a custom message part rendered with a custom renderer.',
+                    },
+                },
+            ],
+        };
+        return (_jsx(ShowcaseItem, { title: "With Custom Renderer", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(AssistantMessage, Object.assign({}, args, { content: customMessage.content, actions: actions, timestamp: customMessage.timestamp, id: customMessage.id, messageRendererRegistry: customRegistry })) }) }));
+    },
+    decorators: [
+        (StoryComponent) => (_jsx(Showcase, { children: _jsx(StoryComponent, {}) })),
+    ],
+};

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import React, { useCallback } from 'react';
 import { ChevronsCollapseUpRight, ChevronsExpandUpRight, ClockArrowRotateLeft, Plus, Sparkles, Xmark, } from '@gravity-ui/icons';
-import { Button, Icon, Text } from '@gravity-ui/uikit';
+import { Icon, Text } from '@gravity-ui/uikit';
+import { isActionConfig } from '../../../utils/actionUtils';
 import { block } from '../../../utils/cn';
 import { ActionButton } from '../../atoms';
 import { ButtonGroup } from '../../molecules';
@@ -30,8 +31,11 @@ const FOLDING_ICONS = {
  */
 export function Header(props) {
     const { title, preview, icon, baseActions, additionalActions, titlePosition, withIcon, showTitle = true, className, historyButtonRef, } = useHeader(props);
+    // Determine class for title positioning
+    const titlePositionClass = b('title-container', { position: titlePosition });
+    const iconElement = icon ? (_jsx("div", { className: b('icon'), children: icon })) : (_jsx(Icon, { data: Sparkles, size: 16 }));
     // Render base action
-    const renderBaseAction = (action) => {
+    const renderBaseAction = useCallback((action, ref) => {
         let IconComponent = ACTION_ICONS[action.id];
         // Handle folding icon based on state
         if (action.id === HeaderAction.Folding && action.foldingState) {
@@ -46,21 +50,16 @@ export function Header(props) {
             tooltipKey = `action-tooltip-folding-${action.foldingState}`;
         }
         // Determine ref for history button
-        const buttonRef = action.id === HeaderAction.History ? historyButtonRef : undefined;
+        const buttonRef = action.id === HeaderAction.History ? ref : 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);
+    const renderAdditionalAction = useCallback((action, index) => {
+        const id = `additional-${index}`;
+        if (!isActionConfig(action)) {
+            return _jsx(React.Fragment, { children: action }, id);
         }
-        return null;
-    };
-    // Determine class for title positioning
-    const titlePositionClass = b('title-container', { position: titlePosition });
-    const iconElement = icon ? (_jsx("div", { className: b('icon'), children: icon })) : (_jsx(Icon, { data: Sparkles, size: 16 }));
-    return (_jsxs("div", { className: b('', className), children: [withIcon && iconElement, showTitle && (_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))] })] }));
+        return (_jsx(ActionButton, Object.assign({}, action, { view: action.view || 'flat', size: "m", children: action.icon || action.label }), `${index}`));
+    }, []);
+    return (_jsxs("div", { className: b('', className), children: [withIcon && iconElement, showTitle && (_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, historyButtonRef))] })] }));
 }

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

@@ -0,0 +1,15 @@
+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 WithoutIcon: StoryFn<HeaderProps>;
+export declare const WithPreview: StoryFn<HeaderProps>;
+export declare const WithoutTitle: 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/components/organisms/Header/__stories__/Header.stories.js

@@ -0,0 +1,159 @@
+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 { 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 WithoutIcon = (args) => {
+    return (_jsx(ContentWrapper, { width: "480px", children: _jsx(Header, Object.assign({ withIcon: false, 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 WithoutTitle = (args) => {
+    return (_jsx(ContentWrapper, { width: "480px", children: _jsx(Header, Object.assign({ title: "Chat Header", preview: _jsx("div", { children: "Preview" }), showTitle: false, 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,
+};
+// Статический массив для additionalActions - вынесен за пределы компонента,
+// чтобы не создавать новый массив при каждом рендере
+const additionalActionsConfig = [
+    {
+        label: 'Action 1',
+        onClick: () => {
+            // eslint-disable-next-line no-console
+            console.log('Additional action 1');
+        },
+    },
+    {
+        icon: _jsx(Icon, { data: Gear, size: 16 }),
+        onClick: () => {
+            // eslint-disable-next-line no-console
+            console.log('Settings clicked');
+        },
+        view: 'flat',
+    },
+    // Custom ReactNode
+    _jsx("button", { onClick: () => {
+            // eslint-disable-next-line no-console
+            console.log('Custom button');
+        }, style: { padding: '6px 12px', cursor: 'pointer' }, children: "Custom" }, "custom"),
+];
+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: additionalActionsConfig }, mockHandlers, args)) }));
+};
+// Статический массив для FullExample - вынесен за пределы компонента
+const fullExampleAdditionalActions = [
+    {
+        label: 'Settings',
+        view: 'outlined',
+        onClick: () => {
+            // eslint-disable-next-line no-console
+            console.log('Settings clicked');
+        },
+    },
+    {
+        icon: _jsx(Icon, { data: Gear, size: 16 }),
+        onClick: () => {
+            // eslint-disable-next-line no-console
+            console.log('Settings icon clicked');
+        },
+        view: 'flat',
+    },
+];
+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: fullExampleAdditionalActions, 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/components/organisms/Header/types.d.ts

@@ -1,11 +1,10 @@
-import type { ButtonProps } from '@gravity-ui/uikit';
+import type { Action } from '../../../types/common';
 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;
@@ -15,7 +14,7 @@ export type HeaderProps = {
     handleHistoryToggle?: () => void;
     handleFolding?: (value: 'collapsed' | 'opened') => void;
     handleClose?: () => void;
-    additionalActions?: AdditionalActionsConfig[];
+    additionalActions?: Action[];
     historyButtonRef?: React.RefObject<HTMLElement>;
     foldingState?: 'collapsed' | 'opened';
     titlePosition?: 'left' | 'center';

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

@@ -1,12 +1,10 @@
 import React from 'react';
-import type { ButtonProps } from '@gravity-ui/uikit';
+import type { Action } from '../../../types/common';
 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): {
@@ -14,7 +12,7 @@ export declare function useHeader(props: HeaderProps): {
     preview: React.ReactNode | undefined;
     icon: React.ReactNode | undefined;
     baseActions: ActionItem[];
-    additionalActions: ActionItem[];
+    additionalActions: Action[];
     titlePosition: 'left' | 'center';
     withIcon: boolean;
     showTitle: boolean;