@gravity-ui/aikit 0.0.1

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from '@gravity-ui/uikit';
+import { useToolMessage } from '../../../hooks/useToolMessage';
+import { block } from '../../../utils/cn';
+import { ToolFooter, ToolHeader } from '../../molecules';
+import './ToolMessage.scss';
+const b = block('tool-message');
+export function ToolMessage(props) {
+    const { toolName, className, qa, bodyContent, status, toolIcon, headerContent } = props;
+    const { isExpanded, headerActions, footerActions, footerContent, showLoader, isWaiting } = useToolMessage(props);
+    return (_jsx(Card, { className: b({ waiting: isWaiting }, className), "data-qa": qa, children: _jsxs("div", { className: b('container'), children: [_jsx(ToolHeader, { toolName: toolName, actions: headerActions, toolIcon: toolIcon, content: headerContent, status: status }), bodyContent && isExpanded && _jsx("div", { className: b('content'), children: bodyContent }), isWaiting && (_jsx(ToolFooter, { actions: footerActions, content: footerContent, showLoader: showLoader }))] }) }));
+}

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

@@ -0,0 +1,7 @@
+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 ShowAvatar: StoryFn<UserMessageProps>;
+export declare const ShowTimestamp: StoryFn<UserMessageProps>;

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

@@ -0,0 +1,70 @@
+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 = [
+    { type: 'copy', onClick: () => ({}) },
+    { type: '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 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,
+};

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

@@ -0,0 +1,13 @@
+import type { OptionsType } from '@diplodoc/transform/lib/typings';
+import type { BaseMessageProps } from '../../../types/messages';
+import './UserMessage.scss';
+export type UserMessageProps = Pick<BaseMessageProps, 'actions' | 'showActionsOnHover' | 'showTimestamp' | 'timestamp'> & {
+    content: string | React.ReactNode;
+    format?: 'plain' | 'markdown';
+    showAvatar?: boolean;
+    avatarUrl?: string;
+    transformOptions?: OptionsType;
+    className?: string;
+    qa?: string;
+};
+export declare const UserMessage: (props: UserMessageProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import { MarkdownRenderer } from '../../atoms/MarkdownRenderer';
+import { MessageBalloon } from '../../atoms/MessageBalloon';
+import { BaseMessage } from '../../molecules/BaseMessage';
+import './UserMessage.scss';
+const b = block('user-message');
+export const UserMessage = (props) => {
+    const { className, qa, content, actions, showActionsOnHover, showAvatar, avatarUrl = '', timestamp = '', showTimestamp, format = 'plain', transformOptions, } = props;
+    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [showAvatar ? _jsx(Avatar, { imgUrl: avatarUrl, size: "s", view: "filled" }) : null, _jsx(BaseMessage, { role: "user", actions: actions, showActionsOnHover: showActionsOnHover, showTimestamp: showTimestamp, timestamp: timestamp, children: _jsx(MessageBalloon, { children: format === 'markdown' ? (_jsx(MarkdownRenderer, { content: content, transformOptions: transformOptions })) : (content) }) })] }));
+};

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

@@ -0,0 +1,7 @@
+export * from './AssistantMessage';
+export * from './Header';
+export * from './MessageList';
+export * from './PromptInput';
+export * from './ThinkingMessage';
+export * from './ToolMessage';
+export * from './UserMessage';

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

@@ -0,0 +1,8 @@
+// Export all organisms
+export * from './AssistantMessage';
+export * from './Header';
+export * from './MessageList';
+export * from './PromptInput';
+export * from './ThinkingMessage';
+export * from './ToolMessage';
+export * from './UserMessage';

package/dist/src/components/pages/ChatContainer/ChatContainer.d.ts

@@ -0,0 +1,10 @@
+import type { ChatContainerProps } from './types';
+import './ChatContainer.scss';
+/**
+ * ChatContainer - fully assembled chat component, the main exportable component of the library.
+ * Integrates Header, ChatContent, History and manages their state.
+ *
+ * @param props - component props
+ * @returns React component
+ */
+export declare function ChatContainer(props: ChatContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/pages/ChatContainer/ChatContainer.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { block } from '../../../utils/cn';
+import { Disclaimer } from '../../atoms/Disclaimer';
+import { Header } from '../../organisms/Header';
+import { PromptInput } from '../../organisms/PromptInput';
+import { ChatContent } from '../../templates/ChatContent';
+import { History } from '../../templates/History';
+import { i18n } from './i18n';
+import { useChatContainer } from './useChatContainer';
+import './ChatContainer.scss';
+const b = block('chat-container');
+/**
+ * ChatContainer - fully assembled chat component, the main exportable component of the library.
+ * Integrates Header, ChatContent, History and manages their state.
+ *
+ * @param props - component props
+ * @returns React component
+ */
+export function ChatContainer(props) {
+    var _a, _b;
+    const { chats = [], messages = [], onSendMessage, onDeleteChat, onCancel, onRetry, status = 'ready', error = null, showActionsOnHover = false, contextItems = [], transformOptions, headerProps = {}, contentProps = {}, emptyContainerProps = {}, promptInputProps = {}, historyProps = {}, welcomeConfig, i18nConfig = {}, className, qa, } = props;
+    const hookState = useChatContainer(props);
+    // Collect i18n texts with overrides
+    const headerTitle = useMemo(() => {
+        var _a, _b;
+        return ((_a = i18nConfig.header) === null || _a === void 0 ? void 0 : _a.defaultTitle) ||
+            headerProps.title ||
+            ((_b = hookState.activeChat) === null || _b === void 0 ? void 0 : _b.name) ||
+            i18n('header-default-title');
+    }, [(_a = i18nConfig.header) === null || _a === void 0 ? void 0 : _a.defaultTitle, headerProps.title, (_b = hookState.activeChat) === null || _b === void 0 ? void 0 : _b.name]);
+    // Build props for Header
+    const finalHeaderProps = useMemo(() => (Object.assign(Object.assign({}, headerProps), { title: headerTitle, baseActions: hookState.baseActions, handleNewChat: hookState.handleNewChat, handleHistoryToggle: hookState.handleHistoryToggle, handleClose: hookState.handleClose, historyButtonRef: hookState.historyButtonRef })), [
+        headerTitle,
+        hookState.baseActions,
+        hookState.handleNewChat,
+        hookState.handleHistoryToggle,
+        hookState.handleClose,
+        hookState.historyButtonRef,
+        headerProps,
+    ]);
+    // Build props for EmptyContainer
+    const finalEmptyContainerProps = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        // Map suggestions from WelcomeConfig to SuggestionsItem format
+        const defaultSuggestions = (_a = welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.suggestions) === null || _a === void 0 ? void 0 : _a.map((s) => ({
+            id: s.id,
+            title: s.label || s.content, // Use label or content as button title
+        }));
+        return Object.assign(Object.assign({}, emptyContainerProps), { image: welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.image, title: (welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.title) || ((_b = i18nConfig.emptyState) === null || _b === void 0 ? void 0 : _b.title) || i18n('empty-state-title'), description: (welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.description) ||
+                ((_c = i18nConfig.emptyState) === null || _c === void 0 ? void 0 : _c.description) ||
+                i18n('empty-state-description'), suggestionTitle: (welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.suggestionTitle) ||
+                ((_d = i18nConfig.emptyState) === null || _d === void 0 ? void 0 : _d.suggestionsTitle) ||
+                i18n('empty-state-suggestions-title'), suggestions: defaultSuggestions, showMore: welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.showMore, showMoreText: (welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.showMoreText) ||
+                ((_e = i18nConfig.emptyState) === null || _e === void 0 ? void 0 : _e.showMoreText) ||
+                i18n('empty-state-show-more'), onSuggestionClick: async (clickedTitle) => {
+                var _a;
+                // Find original suggestion by title to get content
+                const originalSuggestion = (_a = welcomeConfig === null || welcomeConfig === void 0 ? void 0 : welcomeConfig.suggestions) === null || _a === void 0 ? void 0 : _a.find((s) => (s.label || s.content) === clickedTitle);
+                const contentToSend = (originalSuggestion === null || originalSuggestion === void 0 ? void 0 : originalSuggestion.content) || clickedTitle;
+                await onSendMessage({ content: contentToSend });
+            } });
+    }, [welcomeConfig, i18nConfig.emptyState, emptyContainerProps, onSendMessage]);
+    // Build props for MessageList
+    const messageListProps = useMemo(() => ({
+        messages,
+        status,
+        errorMessage: error ? { text: error.message } : undefined,
+        onRetry,
+        showActionsOnHover,
+        transformOptions,
+    }), [messages, status, error, onRetry, showActionsOnHover, transformOptions]);
+    // Build props for PromptInput
+    const finalPromptInputProps = useMemo(() => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, promptInputProps), { onSend: onSendMessage, onCancel,
+            status, headerProps: Object.assign(Object.assign({}, promptInputProps === null || promptInputProps === void 0 ? void 0 : promptInputProps.headerProps), { contextItems }), bodyProps: Object.assign(Object.assign({}, promptInputProps === null || promptInputProps === void 0 ? void 0 : promptInputProps.bodyProps), { placeholder: ((_a = i18nConfig.promptInput) === null || _a === void 0 ? void 0 : _a.placeholder) ||
+                    ((_b = promptInputProps === null || promptInputProps === void 0 ? void 0 : promptInputProps.bodyProps) === null || _b === void 0 ? void 0 : _b.placeholder) ||
+                    i18n('prompt-placeholder') }) }));
+    }, [onSendMessage, onCancel, status, contextItems, i18nConfig.promptInput, promptInputProps]);
+    // Build props for Disclaimer
+    const disclaimerProps = useMemo(() => {
+        var _a;
+        const disclaimerText = ((_a = i18nConfig.disclaimer) === null || _a === void 0 ? void 0 : _a.text) || i18n('disclaimer-text');
+        return {
+            text: disclaimerText,
+        };
+    }, [i18nConfig.disclaimer]);
+    // Build props for ChatContent
+    const finalContentProps = useMemo(() => (Object.assign(Object.assign({}, contentProps), { view: hookState.chatContentView, emptyContainerProps: finalEmptyContainerProps, messageListProps })), [hookState.chatContentView, finalEmptyContainerProps, messageListProps, contentProps]);
+    // Build props for History
+    const finalHistoryProps = useMemo(() => {
+        var _a;
+        return (Object.assign(Object.assign({}, historyProps), { chats, selectedChat: hookState.activeChat, onSelectChat: hookState.handleSelectChat, onDeleteChat, open: hookState.isHistoryOpen, onOpenChange: hookState.handleHistoryOpenChange, anchorElement: hookState.historyButtonRef.current, emptyPlaceholder: ((_a = i18nConfig.history) === null || _a === void 0 ? void 0 : _a.emptyPlaceholder) ||
+                historyProps.emptyPlaceholder ||
+                i18n('history-empty') }));
+    }, [
+        chats,
+        hookState.activeChat,
+        hookState.handleSelectChat,
+        onDeleteChat,
+        hookState.isHistoryOpen,
+        hookState.handleHistoryOpenChange,
+        hookState.historyButtonRef,
+        i18nConfig.history,
+        historyProps,
+    ]);
+    const showFooter = finalPromptInputProps || disclaimerProps;
+    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [_jsx("div", { className: b('header'), children: _jsx(Header, Object.assign({}, finalHeaderProps)) }), _jsx("div", { className: b('content'), children: _jsx(ChatContent, Object.assign({}, finalContentProps)) }), showFooter && (_jsxs("div", { className: b('footer'), children: [finalPromptInputProps && _jsx(PromptInput, Object.assign({}, finalPromptInputProps)), disclaimerProps && _jsx(Disclaimer, Object.assign({}, disclaimerProps))] })), _jsx(History, Object.assign({}, finalHistoryProps))] }));
+}

package/dist/src/components/pages/ChatContainer/__stories__/ChatContainer.stories.d.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { ChatContainer } from '..';
+declare const _default: Meta;
+export default _default;
+type Story = StoryObj<typeof ChatContainer>;
+/**
+ * Playground story for interactive testing
+ */
+export declare const Playground: Story;
+/**
+ * Empty state with welcome screen
+ */
+export declare const EmptyState: Story;
+/**
+ * State with messages
+ */
+export declare const WithMessages: Story;
+/**
+ * With streaming
+ */
+export declare const WithStreaming: Story;
+/**
+ * With history
+ */
+export declare const WithHistory: Story;
+/**
+ * With custom i18n configuration
+ */
+export declare const WithI18nConfig: Story;
+/**
+ * With component props override
+ */
+export declare const WithComponentPropsOverride: Story;
+/**
+ * With context items
+ */
+export declare const WithContextItems: Story;
+/**
+ * With context items and indicator
+ */
+export declare const WithContextItemsAndIndicator: Story;
+/**
+ * With loading state
+ */
+export declare const LoadingState: Story;
+/**
+ * With error
+ */
+export declare const ErrorState: Story;
+/**
+ * Full example with realistic streaming via fetch API
+ */
+export declare const FullStreamingExample: Story;