@gravity-ui/aikit 0.6.0 → 1.0.1

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

@@ -0,0 +1,304 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Xmark } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { SwapArea } from '../../../../demo/SwapArea';
+import { ActionButton } from '../../../atoms/ActionButton';
+import { PromptInput } from '../PromptInput';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'organisms/PromptInput',
+    component: PromptInput,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { width: "450px", children: _jsx(Story, {}) })),
+];
+const handleSend = async (data) => {
+    // eslint-disable-next-line no-console
+    console.log('Sending:', data);
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+};
+const handleCancel = async () => {
+    // eslint-disable-next-line no-console
+    console.log('Cancelling');
+};
+export const Playground = {
+    args: {
+        view: 'simple',
+        onSend: handleSend,
+        onCancel: handleCancel,
+        bodyProps: {
+            placeholder: 'Plan, code, build and test anything',
+        },
+        footerProps: {
+            showAttachment: true,
+            showMicrophone: true,
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const FullView = {
+    args: {
+        view: 'full',
+        onSend: handleSend,
+        bodyProps: {
+            placeholder: 'Plan, code, build and test anything',
+        },
+        headerProps: {
+            showContextIndicator: true,
+            contextIndicatorProps: {
+                type: 'percent',
+                usedContext: 24,
+            },
+        },
+        footerProps: {
+            showSettings: true,
+            showAttachment: true,
+            showMicrophone: true,
+            // eslint-disable-next-line no-console
+            onSettingsClick: () => console.log('Settings clicked'),
+            // eslint-disable-next-line no-console
+            onAttachmentClick: () => console.log('Attachment clicked'),
+            // eslint-disable-next-line no-console
+            onMicrophoneClick: () => console.log('Microphone clicked'),
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithSuggestions = {
+    args: {
+        view: 'simple',
+        onSend: handleSend,
+        bodyProps: {
+            placeholder: 'Plan, code, build and test anything',
+        },
+        suggestionsProps: {
+            showSuggestions: true,
+            suggestions: [
+                { title: 'Write a Python function', view: 'action' },
+                { title: 'Explain this code' },
+            ],
+            // eslint-disable-next-line no-console
+            onSuggestionClick: (suggestion) => console.log('Suggestion clicked:', suggestion),
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithSuggestionsAndTitle = {
+    args: {
+        view: 'simple',
+        onSend: handleSend,
+        bodyProps: {
+            placeholder: 'Plan, code, build and test anything',
+        },
+        suggestionsProps: {
+            showSuggestions: true,
+            suggestTitle: 'Try these prompts:',
+            suggestions: [
+                { title: 'Write a Python function', view: 'action' },
+                { title: 'Explain this code' },
+                { title: 'Debug my code' },
+            ],
+            // eslint-disable-next-line no-console
+            onSuggestionClick: (suggestion) => console.log('Suggestion clicked:', suggestion),
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithContextIndicator = {
+    args: {
+        view: 'full',
+        onSend: handleSend,
+        bodyProps: {
+            placeholder: 'Plan, code, build and test anything',
+        },
+        headerProps: {
+            showContextIndicator: true,
+            contextIndicatorProps: {
+                type: 'percent',
+                usedContext: 24,
+            },
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithCustomTopContent = {
+    args: {
+        view: 'full',
+        onSend: handleSend,
+        bodyProps: {
+            placeholder: 'Plan, code, build and test anything',
+        },
+        headerProps: {
+            topContent: _jsx(SwapArea, {}),
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithCustomBottomContent = {
+    args: {
+        view: 'full',
+        onSend: handleSend,
+        bodyProps: {
+            placeholder: 'Plan, code, build and test anything',
+        },
+        footerProps: {
+            bottomContent: _jsx(SwapArea, {}),
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithTopPanel = {
+    args: {
+        view: 'simple',
+        onSend: handleSend,
+        bodyProps: {
+            placeholder: 'Plan, code, build and test anything',
+        },
+        topPanel: {
+            isOpen: true,
+            children: _jsx(SwapArea, {}),
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithBottomPanel = {
+    args: {
+        view: 'simple',
+        onSend: handleSend,
+        bodyProps: {
+            placeholder: 'Plan, code, build and test anything',
+        },
+        bottomPanel: {
+            isOpen: true,
+            children: _jsx(SwapArea, {}),
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithBothPanels = {
+    args: {
+        view: 'full',
+        onSend: handleSend,
+        bodyProps: {
+            placeholder: 'Plan, code, build and test anything',
+        },
+        headerProps: {
+            showContextIndicator: true,
+            contextIndicatorProps: {
+                type: 'percent',
+                usedContext: 24,
+            },
+        },
+        topPanel: {
+            isOpen: true,
+            children: _jsx(SwapArea, {}),
+        },
+        bottomPanel: {
+            isOpen: true,
+            children: _jsx(SwapArea, {}),
+        },
+    },
+    decorators: defaultDecorators,
+};
+const PanelExample = ({ onClose }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(SwapArea, {}), _jsx(ActionButton, { view: "flat", size: "m", onClick: onClose, children: _jsx(Icon, { data: Xmark, size: 16 }) })] }));
+};
+export const WithPanelToggle = {
+    render: () => {
+        const [isTopPanelOpen, setIsTopPanelOpen] = useState(false);
+        const [isBottomPanelOpen, setIsBottomPanelOpen] = useState(false);
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [_jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsx(ActionButton, { view: "action", size: "m", onClick: () => setIsTopPanelOpen((prev) => !prev), children: "Toggle Top Panel" }), _jsx(ActionButton, { view: "action", size: "m", onClick: () => setIsBottomPanelOpen((prev) => !prev), children: "Toggle Bottom Panel" })] }), _jsx(PromptInput, { view: "full", onSend: handleSend, bodyProps: {
+                        placeholder: 'Plan, code, build and test anything',
+                    }, topPanel: {
+                        isOpen: isTopPanelOpen,
+                        children: _jsx(PanelExample, { onClose: () => setIsTopPanelOpen(false) }),
+                    }, bottomPanel: {
+                        isOpen: isBottomPanelOpen,
+                        children: _jsx(PanelExample, { onClose: () => setIsBottomPanelOpen(false) }),
+                    } })] }));
+    },
+    decorators: defaultDecorators,
+};
+export const Disabled = {
+    args: {
+        view: 'simple',
+        onSend: handleSend,
+        disabled: true,
+        bodyProps: {
+            placeholder: 'Plan, code, build and test anything',
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const Streaming = {
+    render: (args) => {
+        const [status, setStatus] = useState('ready');
+        const handleSendWithStreaming = async (data) => {
+            // eslint-disable-next-line no-console
+            console.log('Sending:', data);
+            setStatus('streaming');
+            await new Promise((resolve) => setTimeout(resolve, 3000));
+            setStatus('ready');
+        };
+        const customHandleCancel = async () => {
+            // eslint-disable-next-line no-console
+            console.log('Cancelling');
+            setStatus('ready');
+        };
+        return (_jsx(PromptInput, Object.assign({}, args, { view: "full", onSend: handleSendWithStreaming, onCancel: customHandleCancel, status: status, bodyProps: {
+                placeholder: 'Plan, code, build and test anything',
+            }, footerProps: {
+                showSettings: true,
+                showAttachment: true,
+                showMicrophone: true,
+            } })));
+    },
+    decorators: defaultDecorators,
+};
+export const ComplexExample = {
+    render: (args) => {
+        const [status, setStatus] = useState('ready');
+        const handleSendComplex = async (data) => {
+            // eslint-disable-next-line no-console
+            console.log('Sending:', data);
+            setStatus('streaming');
+            await new Promise((resolve) => setTimeout(resolve, 2000));
+            setStatus('ready');
+        };
+        const customHandleCancel = async () => {
+            // eslint-disable-next-line no-console
+            console.log('Cancelling');
+            setStatus('ready');
+        };
+        return (_jsx(PromptInput, Object.assign({}, args, { view: "full", onSend: handleSendComplex, onCancel: customHandleCancel, status: status, bodyProps: {
+                placeholder: 'Plan, code, build and test anything',
+            }, headerProps: {
+                showContextIndicator: true,
+                contextIndicatorProps: {
+                    type: 'percent',
+                    usedContext: 24,
+                },
+            }, footerProps: {
+                showSettings: true,
+                showAttachment: true,
+                showMicrophone: true,
+                // eslint-disable-next-line no-console
+                onSettingsClick: () => console.log('Settings'),
+                // eslint-disable-next-line no-console
+                onAttachmentClick: () => console.log('Attachment'),
+                // eslint-disable-next-line no-console
+                onMicrophoneClick: () => console.log('Microphone'),
+            }, suggestionsProps: {
+                showSuggestions: status !== 'streaming',
+                suggestions: [{ title: 'Yes', view: 'action' }, { title: 'No' }],
+            } })));
+    },
+    decorators: defaultDecorators,
+};

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

@@ -0,0 +1,12 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { type ThinkingMessageProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ThinkingMessageProps>;
+export declare const ThinkingState: StoryObj<ThinkingMessageProps>;
+export declare const ThoughtState: StoryObj<ThinkingMessageProps>;
+export declare const SingleContent: StoryObj<ThinkingMessageProps>;
+export declare const Collapsed: StoryObj<ThinkingMessageProps>;
+export declare const WithoutLoader: StoryObj<ThinkingMessageProps>;
+export declare const WithCopyAction: StoryObj<ThinkingMessageProps>;
+export declare const WithCustomStyle: StoryObj<ThinkingMessageProps>;

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+import { type UserMessageProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<UserMessageProps>;
+export declare const MarkdownFormat: StoryFn<UserMessageProps>;
+export declare const ShowAvatar: StoryFn<UserMessageProps>;
+export declare const ShowTimestamp: StoryFn<UserMessageProps>;
+export declare const PlainTextWithLineBreaks: StoryFn<UserMessageProps>;

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

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UserMessage } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'organisms/UserMessage',
+    component: UserMessage,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        data: {
+            control: 'text',
+            description: 'Message text',
+        },
+        actions: {
+            control: 'object',
+            description: 'Actions',
+        },
+        showActionsOnHover: {
+            control: 'boolean',
+            description: 'Show actions on hover',
+        },
+        showTimestamp: {
+            control: 'boolean',
+            description: 'Show timestamp',
+        },
+        timestamp: {
+            control: 'text',
+            description: 'Timestamp',
+        },
+        withAvatar: {
+            control: 'boolean',
+            description: 'Show avatar',
+        },
+        avatarUrl: {
+            control: 'text',
+            description: 'Avatar URL',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+const buttons = [
+    { actionType: 'copy', onClick: () => ({}) },
+    { actionType: 'edit', onClick: () => ({}) },
+];
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(UserMessage, Object.assign({}, args)) }));
+Playground.args = {
+    content: 'Analyze the project and suggest a better solution to implement a feature-name',
+    actions: buttons,
+};
+export const MarkdownFormat = (args) => (_jsx(ContentWrapper, { width: "480px", children: _jsx(UserMessage, Object.assign({}, args, { format: "markdown" })) }));
+MarkdownFormat.args = {
+    content: `
+Explain this code snippet: 
+
+\`\`\`
+CREATE TABLE log_counter (
+  id           INT PRIMARY KEY, -- topicpartition table name id
+  next_offset  BIGINT NOT NULL  -- next offset to assign
+);
+
+for i in NUM_PARTITIONS:
+  CREATE TABLE topicpartition%d (
+    id          BIGSERIAL PRIMARY KEY,
+    -- strictly increasing offset (indexed by UNIQUE)
+    c_offset    BIGINT UNIQUE NOT NULL,
+    payload     BYTEA NOT NULL,
+    created_at  TIMESTAMPTZ NOT NULL DEFAULT now()
+  );
+  INSERT INTO log_counter(id, next_offset) VALUES (%d, 1);
+
+CREATE TABLE consumer_offsets (
+  group_id     TEXT NOT NULL,     -- consumer group identifier
+  -- topic-partition id (matches log_counter.id / topicpartitionN)
+  topic_id     INT  NOT NULL,
+  -- next offset the consumer group should claim
+  next_offset  BIGINT NOT NULL DEFAULT 1,
+  PRIMARY KEY (group_id, topic_id)
+);
+\`\`\`
+    `,
+    actions: buttons,
+};
+export const ShowAvatar = (args) => (_jsx(ContentWrapper, { children: _jsx(UserMessage, Object.assign({}, args, { showAvatar: true })) }));
+ShowAvatar.args = {
+    content: 'Analyze the project and suggest a better solution to implement a feature-name',
+    actions: buttons,
+};
+export const ShowTimestamp = (args) => (_jsx(ContentWrapper, { children: _jsx(UserMessage, Object.assign({}, args, { showTimestamp: true, timestamp: "1705312234567" })) }));
+ShowTimestamp.args = {
+    content: 'Analyze the project and suggest a better solution to implement a feature-name',
+    actions: buttons,
+};
+export const PlainTextWithLineBreaks = (args) => (_jsx(ContentWrapper, { width: "480px", children: _jsx(UserMessage, Object.assign({}, args, { format: "plain" })) }));
+PlainTextWithLineBreaks.args = {
+    content: `Analyze this code:
+
+function calculateTotal(items) {
+    let total = 0;
+    for (let i = 0; i < items.length; i++) {
+        total += items[i].price;
+    }
+    return total;
+}
+
+Can it be improved?`,
+    actions: buttons,
+};