@gravity-ui/aikit 0.0.1

package/dist/src/components/molecules/Tabs/__stories__/Tabs.stories.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { At, Envelope, Gear } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { Tabs } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/Tabs',
+    component: Tabs,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        items: {
+            control: 'object',
+            description: 'Array of tab items',
+        },
+        activeId: {
+            control: 'text',
+            description: 'ID of the currently active tab',
+        },
+        allowDelete: {
+            control: 'boolean',
+            description: 'Whether to show delete buttons',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        styles: {
+            control: 'object',
+            description: 'Additional CSS properties',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(Story, {}) }) })),
+];
+const basicItems = [
+    { id: '1', title: 'Chat name 1' },
+    { id: '2', title: 'Chat name 2' },
+    { id: '3', title: 'Chat name 3' },
+    { id: '4', title: 'Chat name 4' },
+];
+const itemsWithIcons = [
+    { id: '1', title: 'Chat name 1', icon: _jsx(Icon, { data: At, size: 16 }) },
+    { id: '2', title: 'Chat name 2', icon: _jsx(Icon, { data: Envelope, size: 16 }) },
+    { id: '3', title: 'Chat name 3', icon: _jsx(Icon, { data: Gear, size: 16 }) },
+];
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(Tabs, Object.assign({}, args)) }));
+Playground.args = {
+    items: basicItems,
+    activeId: '1',
+    allowDelete: true,
+};
+export const Basic = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "Basic Tabs", children: _jsx(Tabs, Object.assign({}, args)) })),
+    decorators: defaultDecorators,
+};
+Basic.args = {
+    items: basicItems,
+    activeId: '1',
+    allowDelete: true,
+};
+export const WithIcons = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "Tabs with Icons", children: _jsx(Tabs, Object.assign({}, args)) })),
+    decorators: defaultDecorators,
+};
+WithIcons.args = {
+    items: itemsWithIcons,
+    activeId: '1',
+    allowDelete: true,
+};
+export const WithStyle = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "Tabs with Style", children: _jsx(Tabs, Object.assign({}, args)) })),
+    decorators: defaultDecorators,
+};
+WithStyle.args = {
+    items: basicItems,
+    activeId: '1',
+    allowDelete: true,
+    style: {
+        '--g-color-base-info-light': '#ff9100',
+        '--g-color-base-info-light-hover': '#aa9100',
+        '--g-color-text-info-heavy': '#ffffff',
+        '--g-color-base-simple-hover': '#aa9100',
+        '--g-color-text-complementary': '#ff9100',
+        '--g-color-line-generic': '#ff9100',
+    },
+};
+export const MaxWidth = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "Max width (200px)", children: _jsxs("div", { style: { maxWidth: '200px', border: '1px solid lightgray' }, children: [_jsx("h1", { style: { paddingInline: '10px' }, children: "Lorem ipsum" }), _jsx(Tabs, Object.assign({}, args)), _jsx("p", { style: { paddingInline: '10px' }, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio consectetur commodi natus dolor repellendus sit, similique aliquam, quia ad hic quam porro nobis a? Cumque ratione est nostrum exercitationem velit." })] }) })),
+    decorators: defaultDecorators,
+};
+MaxWidth.args = {
+    items: basicItems,
+    activeId: '1',
+    allowDelete: true,
+};

package/dist/src/components/molecules/Tabs/i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "close-tooltip": "Close"
+}

package/dist/src/components/molecules/Tabs/i18n/index.d.ts

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

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

package/dist/src/components/molecules/Tabs/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+    "close-tooltip": "Закрыть"
+}

package/dist/src/components/molecules/Tabs/index.d.ts

@@ -0,0 +1 @@
+export { Tabs, type TabsProps } from './Tabs';

package/dist/src/components/molecules/Tabs/index.js

@@ -0,0 +1 @@
+export { Tabs } from './Tabs';

package/dist/src/components/molecules/ToolFooter/__stories__/ToolFooter.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { ToolFooterProps } from 'src/types';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ToolFooterProps>;
+export declare const ConfirmationState: StoryObj<ToolFooterProps>;
+export declare const WaitingState: StoryObj<ToolFooterProps>;

package/dist/src/components/molecules/ToolFooter/__stories__/ToolFooter.stories.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToolFooter } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'molecules/ToolFooter',
+    component: ToolFooter,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        content: {
+            control: 'text',
+            description: 'Status message to display',
+        },
+        showLoader: {
+            control: 'boolean',
+            description: 'Whether to show loading indicator',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(Showcase, { children: _jsx(Story, {}) })),
+];
+const rejectAction = {
+    label: 'Reject',
+    onClick: () => alert('Rejected'),
+    view: 'outlined',
+};
+const acceptAction = {
+    label: 'Accept',
+    onClick: () => alert('Accepted'),
+    view: 'action',
+};
+const cancelAction = {
+    label: 'Cancel',
+    onClick: () => alert('Cancelled'),
+    view: 'outlined',
+};
+const defaultActions = [rejectAction, acceptAction];
+export const Playground = (args) => (_jsx(ContentWrapper, { width: "430px", children: _jsx(ToolFooter, Object.assign({}, args)) }));
+Playground.args = {
+    content: 'Awaiting confirmation',
+    actions: defaultActions,
+    showLoader: true,
+};
+export const ConfirmationState = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "Confirmation State", children: _jsx(ContentWrapper, { width: "430px", children: _jsx(ToolFooter, Object.assign({}, args, { content: "Awaiting confirmation", actions: defaultActions })) }) })),
+    decorators: defaultDecorators,
+};
+export const WaitingState = {
+    render: (args) => (_jsx(ShowcaseItem, { title: "Waiting State", children: _jsx(ContentWrapper, { width: "430px", children: _jsx(ToolFooter, Object.assign({}, args, { content: "Awaiting form submission", actions: [cancelAction] })) }) })),
+    decorators: defaultDecorators,
+};

package/dist/src/components/molecules/ToolFooter/index.d.ts

@@ -0,0 +1,3 @@
+import type { ToolFooterProps } from '../../../types';
+import './ToolFooter.scss';
+export declare function ToolFooter({ actions, content, showLoader, className, qa }: ToolFooterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Text } from '@gravity-ui/uikit';
+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))) })] }));
+}

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

@@ -0,0 +1,7 @@
+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>;

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

@@ -0,0 +1,55 @@
+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'],
+            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,
+};

package/dist/src/components/molecules/ToolHeader/index.d.ts

@@ -0,0 +1,3 @@
+import type { ToolHeaderProps } from '../../../types/tool';
+import './ToolHeader.scss';
+export declare function ToolHeader(props: ToolHeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import { ActionButton, ToolIndicator } from '../../atoms';
+import { ButtonGroup } from '../ButtonGroup';
+import './ToolHeader.scss';
+const b = block('tool-header');
+function getIndicatorStatus(status) {
+    if (status === 'success' || status === 'error' || status === 'loading') {
+        return status;
+    }
+    return undefined;
+}
+export function ToolHeader(props) {
+    const { toolIcon, toolName, content, actions, status, className, qa } = props;
+    const hasActions = actions && actions.length > 0;
+    const indicatorStatus = getIndicatorStatus(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) => (_jsx(ActionButton, Object.assign({ tooltipTitle: action.label, view: "flat-secondary", size: "s" }, action, { children: action.icon }), index))) })), indicatorStatus && _jsx(ToolIndicator, { status: indicatorStatus })] })] }));
+}

package/dist/src/components/molecules/index.d.ts

@@ -0,0 +1,11 @@
+export * from './BaseMessage';
+export * from './ButtonGroup';
+export * from './InputContext';
+export * from './PromptInputBody';
+export * from './PromptInputFooter';
+export * from './PromptInputHeader';
+export * from './PromptInputPanel';
+export * from './Suggestions';
+export * from './Tabs';
+export * from './ToolFooter';
+export * from './ToolHeader';

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

@@ -0,0 +1,12 @@
+// Export all molecules
+export * from './BaseMessage';
+export * from './ButtonGroup';
+export * from './InputContext';
+export * from './PromptInputBody';
+export * from './PromptInputFooter';
+export * from './PromptInputHeader';
+export * from './PromptInputPanel';
+export * from './Suggestions';
+export * from './Tabs';
+export * from './ToolFooter';
+export * from './ToolHeader';

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

@@ -0,0 +1,14 @@
+import type { OptionsType } from '@diplodoc/transform/lib/typings';
+import type { BaseMessageProps, TAssistantMessage, TMessageContent, TMessageMetadata } from '../../../types/messages';
+import { type MessageRendererRegistry } from '../../../utils/messageTypeRegistry';
+import './AssistantMessage.scss';
+type BaseMessagePick = Pick<BaseMessageProps, 'actions' | 'timestamp' | 'showActionsOnHover' | 'showTimestamp'>;
+type AssistantMessagePick<TContent extends TMessageContent> = Pick<TAssistantMessage<TContent, TMessageMetadata>, 'id' | 'content'>;
+export type AssistantMessageProps<TContent extends TMessageContent = never> = BaseMessagePick & AssistantMessagePick<TContent> & {
+    messageRendererRegistry?: MessageRendererRegistry;
+    transformOptions?: OptionsType;
+    className?: string;
+    qa?: string;
+};
+export declare function AssistantMessage<TContent extends TMessageContent = never>({ content, actions, timestamp, id, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, className, qa, }: AssistantMessageProps<TContent>): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { block } from '../../../utils/cn';
+import { getMessageRenderer, mergeMessageRendererRegistries, } from '../../../utils/messageTypeRegistry';
+import { normalizeContent } from '../../../utils/messageUtils';
+import { BaseMessage } from '../../molecules/BaseMessage';
+import { createDefaultMessageRegistry } from './defaultMessageTypeRegistry';
+import './AssistantMessage.scss';
+const b = block('assistant-message');
+export function AssistantMessage({ content, actions, timestamp, id, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, className, qa, }) {
+    const registry = useMemo(() => {
+        const defaultRegistry = createDefaultMessageRegistry(transformOptions);
+        if (messageRendererRegistry) {
+            return mergeMessageRendererRegistries(defaultRegistry, messageRendererRegistry);
+        }
+        return defaultRegistry;
+    }, [messageRendererRegistry, transformOptions]);
+    const parts = normalizeContent(content);
+    if (parts.length === 0) {
+        return null;
+    }
+    const renderPart = (part, partIndex) => {
+        const PartComponent = getMessageRenderer(registry, part.type);
+        if (!PartComponent) {
+            return null;
+        }
+        const key = part.id || `${id || 'message'}-part-${partIndex}`;
+        return _jsx(PartComponent, { part: part }, key);
+    };
+    return (_jsx(BaseMessage, { role: "assistant", actions: actions, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp, timestamp: timestamp, className: b(null, className), qa: qa, children: _jsx("div", { className: b('content'), children: parts.map((part, index) => renderPart(part, index)) }) }));
+}

package/dist/src/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/src/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
+    { type: 'copy', onClick: () => console.log('Copy clicked') },
+    // eslint-disable-next-line no-console
+    { type: 'like', onClick: () => console.log('Like clicked') },
+    // eslint-disable-next-line no-console
+    { type: '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/src/components/organisms/AssistantMessage/defaultMessageTypeRegistry.d.ts

@@ -0,0 +1,3 @@
+import type { OptionsType } from '@diplodoc/transform/lib/typings';
+import { type MessageRendererRegistry } from '../../../utils/messageTypeRegistry';
+export declare function createDefaultMessageRegistry(transformOptions?: OptionsType): MessageRendererRegistry;

package/dist/src/components/organisms/AssistantMessage/defaultMessageTypeRegistry.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createMessageRendererRegistry, registerMessageRenderer, } from '../../../utils/messageTypeRegistry';
+import { MarkdownRenderer } from '../../atoms/MarkdownRenderer';
+import { ThinkingMessage } from '../ThinkingMessage';
+import { ToolMessage } from '../ToolMessage';
+export function createDefaultMessageRegistry(transformOptions) {
+    const registry = createMessageRendererRegistry();
+    registerMessageRenderer(registry, 'text', {
+        component: ({ part }) => (_jsx(MarkdownRenderer, { content: part.data.text, transformOptions: transformOptions })),
+    });
+    registerMessageRenderer(registry, 'tool', {
+        component: ({ part }) => _jsx(ToolMessage, Object.assign({}, part.data)),
+    });
+    registerMessageRenderer(registry, 'thinking', {
+        component: ({ part }) => _jsx(ThinkingMessage, { data: part.data }),
+    });
+    return registry;
+}

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

@@ -0,0 +1 @@
+export * from './AssistantMessage';

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

@@ -0,0 +1 @@
+export * from './AssistantMessage';

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

@@ -0,0 +1,9 @@
+import { type HeaderProps } from './types';
+import './Header.scss';
+/**
+ * Header component for displaying chat header with navigation and actions
+ *
+ * @param props - Component props
+ * @returns Header component
+ */
+export declare function Header(props: HeaderProps): import("react/jsx-runtime").JSX.Element;