@gravity-ui/aikit 0.6.0 → 1.0.1

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

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

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

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
 import { useScrollPreservation, useSmartScroll } from '../../../hooks';
 import { isAssistantMessage, isUserMessage, resolveMessageActions, } from '../../../utils';
 import { block } from '../../../utils/cn';
@@ -13,12 +12,12 @@ const b = block('message-list');
 export function MessageList({ messages, messageRendererRegistry, transformOptions, showActionsOnHover, showTimestamp, showAvatar, userActions, assistantActions, loaderStatuses = ['submitted'], className, qa, status, errorMessage, onRetry, hasPreviousMessages = false, onLoadPreviousMessages, }) {
     const isStreaming = status === 'streaming';
     const isSubmitted = status === 'submitted';
-    const messagesCount = messages.length;
     const showLoader = status && loaderStatuses.includes(status);
-    const { containerRef, endRef, scrollToBottom } = useSmartScroll(isStreaming, messagesCount);
-    useEffect(() => {
-        scrollToBottom();
-    }, []);
+    const { containerRef, endRef } = useSmartScroll({
+        isStreaming: isStreaming || isSubmitted,
+        messagesCount: messages.length,
+        status,
+    });
     // Preserve scroll position when older messages are loaded
     useScrollPreservation(containerRef, messages.length);
     const renderMessage = (message, index) => {

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

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

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

@@ -0,0 +1,340 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, 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 { BaseMessageActionType } 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 = [
+            {
+                actionType: BaseMessageActionType.Edit,
+                onClick: (message) => {
+                    // eslint-disable-next-line no-console
+                    console.log('Edit user message:', message.id);
+                },
+            },
+            {
+                actionType: BaseMessageActionType.Delete,
+                onClick: (message) => {
+                    // eslint-disable-next-line no-console
+                    console.log('Delete user message:', message.id);
+                },
+            },
+        ];
+        const assistantActions = [
+            {
+                actionType: BaseMessageActionType.Copy,
+                onClick: (message) => {
+                    // eslint-disable-next-line no-console
+                    console.log('Copy assistant message:', message.id);
+                },
+            },
+            {
+                actionType: BaseMessageActionType.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.',
+                        },
+                        {
+                            id: 'user-2',
+                            role: 'user',
+                            timestamp: '2024-01-01T00:00:02Z',
+                            content: 'This message has custom actions.',
+                            actions: [
+                                {
+                                    actionType: 'custom',
+                                    onClick: () => {
+                                        // eslint-disable-next-line no-console
+                                        console.log('Custom action clicked');
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            id: 'assistant-1',
+                            role: 'assistant',
+                            timestamp: '2024-01-01T00:00:01Z',
+                            content: 'On stream, the last message does not have actions.',
+                        },
+                    ], userActions: userActions, assistantActions: assistantActions, status: "streaming" })) }) }));
+    },
+    decorators: defaultDecorators,
+};
+export const WithPreviousMessages = {
+    render: (args) => {
+        const createMessage = (num) => {
+            const isUser = num % 2 === 1;
+            return {
+                id: `msg-${num}`,
+                role: isUser ? 'user' : 'assistant',
+                timestamp: `2024-01-01T00:00:${String(num).padStart(2, '0')}Z`,
+                content: isUser ? `User message ${num}` : `Assistant response ${num}`,
+            };
+        };
+        const [messages, setMessages] = useState(() => Array.from({ length: 10 }, (_, i) => createMessage(11 + i)));
+        const [hasMore, setHasMore] = useState(true);
+        const isLoadingRef = useRef(false);
+        const handleLoadPrevious = useCallback(() => {
+            if (isLoadingRef.current || !hasMore) {
+                return;
+            }
+            isLoadingRef.current = true;
+            setTimeout(() => {
+                setMessages((prev) => {
+                    const firstMessage = prev[0];
+                    if (!(firstMessage === null || firstMessage === void 0 ? void 0 : firstMessage.id)) {
+                        isLoadingRef.current = false;
+                        return prev;
+                    }
+                    const firstNum = parseInt(firstMessage.id.replace('msg-', ''), 10);
+                    const startNum = Math.max(1, firstNum - 5);
+                    const count = firstNum - startNum;
+                    if (count <= 0 || startNum >= firstNum) {
+                        setHasMore(false);
+                        isLoadingRef.current = false;
+                        return prev;
+                    }
+                    const newMessages = Array.from({ length: count }, (_, i) => createMessage(startNum + i));
+                    if (startNum <= 1) {
+                        setHasMore(false);
+                    }
+                    isLoadingRef.current = false;
+                    return [...newMessages, ...prev];
+                });
+            }, 500);
+        }, [hasMore]);
+        return (_jsx(ShowcaseItem, { title: "With Previous Messages Loading", children: _jsx(ContentWrapper, { width: "480px", height: "400px", display: "flex", children: _jsx(MessageList, Object.assign({}, args, { messages: messages, hasPreviousMessages: hasMore, onLoadPreviousMessages: handleLoadPrevious })) }) }));
+    },
+    decorators: defaultDecorators,
+};

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

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