@gravity-ui/aikit 0.1.1 → 0.2.0

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

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

@@ -1,7 +0,0 @@
-{
-    "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/ru.json

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

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

@@ -1,24 +0,0 @@
-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>>;
-export declare const WithStreamingMessage: StoryObj<MessageListProps>;
-export declare const WithDefaultActions: StoryObj<MessageListProps>;

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

@@ -1,288 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-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 { BaseMessageAction } from '../../../molecules/BaseMessage';
-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,
-};
-const streamingText = 'React Hooks are functions that let you use state and other React features without writing a class. ' +
-    'The most commonly used hooks are:\n\n' +
-    '1. **useState** - for managing component state\n' +
-    '2. **useEffect** - for side effects like data fetching or subscriptions\n' +
-    '3. **useContext** - for consuming context values\n' +
-    '4. **useCallback** - for memoizing functions\n' +
-    '5. **useMemo** - for memoizing computed values\n\n' +
-    'Each hook serves a specific purpose and helps you write cleaner, more maintainable React code. ' +
-    'Would you like examples of how to use any of these hooks?';
-export const WithStreamingMessage = {
-    render: (args) => {
-        const [streamedText, setStreamedText] = useState('');
-        const [isStreaming, setIsStreaming] = useState(true);
-        useEffect(() => {
-            setStreamedText('');
-            setIsStreaming(true);
-            const resultText = streamingText.repeat(10);
-            let currentIndex = 0;
-            const interval = setInterval(() => {
-                if (currentIndex < resultText.length) {
-                    const nextChunk = resultText.slice(0, currentIndex + 1);
-                    setStreamedText(nextChunk);
-                    currentIndex += Math.floor(Math.random() * 4) + 3;
-                }
-                else {
-                    setIsStreaming(false);
-                    clearInterval(interval);
-                }
-            }, 20);
-            return () => {
-                clearInterval(interval);
-            };
-        }, []);
-        const messages = [
-            {
-                id: 'user-1',
-                role: 'user',
-                timestamp: '2024-01-01T00:00:00Z',
-                content: 'Can you explain React Hooks to me?',
-            },
-            {
-                id: 'assistant-1',
-                role: 'assistant',
-                timestamp: '2024-01-01T00:00:01Z',
-                content: streamedText || ' ',
-            },
-        ];
-        return (_jsx(ShowcaseItem, { title: "With Streaming Message", children: _jsx(ContentWrapper, { width: "480px", height: "200px", display: "flex", children: _jsx(MessageList, Object.assign({}, args, { messages: messages, status: isStreaming ? 'streaming' : 'ready' })) }) }));
-    },
-    decorators: defaultDecorators,
-};
-export const WithDefaultActions = {
-    render: (args) => {
-        const userActions = [
-            {
-                type: BaseMessageAction.Edit,
-                onClick: (message) => {
-                    // eslint-disable-next-line no-console
-                    console.log('Edit user message:', message.id);
-                },
-            },
-            {
-                type: BaseMessageAction.Delete,
-                onClick: (message) => {
-                    // eslint-disable-next-line no-console
-                    console.log('Delete user message:', message.id);
-                },
-            },
-        ];
-        const assistantActions = [
-            {
-                type: BaseMessageAction.Copy,
-                onClick: (message) => {
-                    // eslint-disable-next-line no-console
-                    console.log('Copy assistant message:', message.id);
-                },
-            },
-            {
-                type: BaseMessageAction.Like,
-                onClick: (message) => {
-                    // eslint-disable-next-line no-console
-                    console.log('Like assistant message:', message.id);
-                },
-            },
-        ];
-        return (_jsx(ShowcaseItem, { title: "With Default Actions", children: _jsx(ContentWrapper, { width: "480px", children: _jsx(MessageList, Object.assign({}, args, { messages: [
-                        {
-                            id: 'user-1',
-                            role: 'user',
-                            timestamp: '2024-01-01T00:00:00Z',
-                            content: 'Hello! This message has default actions.',
-                        },
-                        {
-                            id: 'assistant-1',
-                            role: 'assistant',
-                            timestamp: '2024-01-01T00:00:01Z',
-                            content: 'Hi! This message also has default actions.',
-                            status: 'complete',
-                        },
-                        {
-                            id: 'user-2',
-                            role: 'user',
-                            timestamp: '2024-01-01T00:00:02Z',
-                            content: 'This message has custom actions.',
-                            actions: [
-                                {
-                                    type: 'custom',
-                                    onClick: () => {
-                                        // eslint-disable-next-line no-console
-                                        console.log('Custom action clicked');
-                                    },
-                                },
-                            ],
-                        },
-                    ], userActions: userActions, assistantActions: assistantActions })) }) }));
-    },
-    decorators: defaultDecorators,
-};

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

@@ -1,4 +0,0 @@
-{
-    "default-error-text": "(｡•́︿•̀｡) Whoops, something went wrong",
-    "retry-button": "Retry"
-}

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

@@ -1,4 +0,0 @@
-{
-    "default-error-text": "(｡•́︿•̀｡) Упс, что-то пошло не так",
-    "retry-button": "Повторить"
-}

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

@@ -1,18 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { PromptInput } from '../PromptInput';
-declare const _default: Meta;
-export default _default;
-type Story = StoryObj<typeof PromptInput>;
-export declare const Playground: Story;
-export declare const FullView: Story;
-export declare const WithSuggestions: Story;
-export declare const WithContextIndicator: Story;
-export declare const WithCustomTopContent: Story;
-export declare const WithCustomBottomContent: Story;
-export declare const WithTopPanel: Story;
-export declare const WithBottomPanel: Story;
-export declare const WithBothPanels: Story;
-export declare const WithPanelToggle: Story;
-export declare const Disabled: Story;
-export declare const Streaming: Story;
-export declare const ComplexExample: Story;