@gravity-ui/aikit 0.0.1

package/dist/src/components/pages/ChatContainer/i18n/en.json

@@ -0,0 +1,10 @@
+{
+    "header-default-title": "AI Chat",
+    "empty-state-title": "Welcome to AI Chat",
+    "empty-state-description": "Start a conversation by typing a message below or selecting a suggestion.",
+    "empty-state-suggestions-title": "Try asking:",
+    "empty-state-show-more": "Show more examples",
+    "prompt-placeholder": "Type your message...",
+    "history-empty": "No chat history yet",
+    "disclaimer-text": "AI can make mistakes. Check important info."
+}

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

@@ -0,0 +1,13 @@
+export declare const i18n: ((key: "header-default-title" | "empty-state-title" | "empty-state-description" | "empty-state-suggestions-title" | "empty-state-show-more" | "prompt-placeholder" | "history-empty" | "disclaimer-text", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "header-default-title" | "empty-state-title" | "empty-state-description" | "empty-state-suggestions-title" | "empty-state-show-more" | "prompt-placeholder" | "history-empty" | "disclaimer-text", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "header-default-title" | "empty-state-title" | "empty-state-description" | "empty-state-suggestions-title" | "empty-state-show-more" | "prompt-placeholder" | "history-empty" | "disclaimer-text", params?: import("@gravity-ui/i18n").Params) => string;
+    };
+    keysetData: {
+        "g-aikit-ChatContainer": Record<"header-default-title" | "empty-state-title" | "empty-state-description" | "empty-state-suggestions-title" | "empty-state-show-more" | "prompt-placeholder" | "history-empty" | "disclaimer-text", import("@gravity-ui/i18n").KeyData>;
+    };
+};

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

package/dist/src/components/pages/ChatContainer/i18n/ru.json

@@ -0,0 +1,10 @@
+{
+    "header-default-title": "AI Чат",
+    "empty-state-title": "Добро пожаловать в AI Чат",
+    "empty-state-description": "Начните разговор, введя сообщение ниже или выбрав подсказку.",
+    "empty-state-suggestions-title": "Попробуйте спросить:",
+    "empty-state-show-more": "Показать больше примеров",
+    "prompt-placeholder": "Введите ваше сообщение...",
+    "history-empty": "История чатов пока пуста",
+    "disclaimer-text": "ИИ может ошибаться. Проверяйте важную информацию."
+}

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

@@ -0,0 +1,2 @@
+export { ChatContainer } from './ChatContainer';
+export type { ChatContainerProps, ChatContainerI18nConfig, WelcomeConfig } from './types';

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

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

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

@@ -0,0 +1,143 @@
+import type { OptionsType } from '@diplodoc/transform/lib/typings';
+import type { ChatStatus, ChatType, TChatMessage, TSubmitData } from '../../../types';
+import type { ContextItemConfig } from '../../molecules/PromptInputHeader';
+import type { HeaderProps } from '../../organisms/Header';
+import type { PromptInputProps } from '../../organisms/PromptInput';
+import type { ChatContentProps } from '../../templates/ChatContent';
+import type { EmptyContainerProps } from '../../templates/EmptyContainer';
+import type { HistoryProps } from '../../templates/History';
+/**
+ * I18n configuration for all text labels in ChatContainer
+ */
+export interface ChatContainerI18nConfig {
+    /** Header texts */
+    header?: {
+        /** Default header title */
+        defaultTitle?: string;
+        /** Tooltip for new chat button */
+        newChatTooltip?: string;
+        /** Tooltip for history button */
+        historyTooltip?: string;
+        /** Tooltip for close button */
+        closeTooltip?: string;
+    };
+    /** Empty state texts */
+    emptyState?: {
+        /** Welcome title */
+        title?: string;
+        /** Welcome description */
+        description?: string;
+        /** Suggestions section title */
+        suggestionsTitle?: string;
+        /** Show more suggestions button text */
+        showMoreText?: string;
+    };
+    /** Prompt input texts */
+    promptInput?: {
+        /** Placeholder text */
+        placeholder?: string;
+        /** Send button tooltip */
+        sendTooltip?: string;
+        /** Cancel button tooltip */
+        cancelTooltip?: string;
+    };
+    /** History texts */
+    history?: {
+        /** Empty state placeholder */
+        emptyPlaceholder?: string;
+        /** Search placeholder */
+        searchPlaceholder?: string;
+    };
+    /** Disclaimer text */
+    disclaimer?: {
+        /** Disclaimer text content */
+        text?: string;
+    };
+}
+/**
+ * Welcome screen configuration
+ */
+export interface WelcomeConfig {
+    /** Image or icon to display */
+    image?: React.ReactNode;
+    /** Title text */
+    title?: string;
+    /** Description text */
+    description?: string;
+    /** Suggestions section title */
+    suggestionTitle?: string;
+    /** Array of suggestions */
+    suggestions?: Array<{
+        /** Unique identifier for the suggestion */
+        id: string;
+        /** Suggestion text content that will be sent as message */
+        content: string;
+        /** Display title for the suggestion button (defaults to content if not provided) */
+        label?: string;
+    }>;
+    /** Show more suggestions callback */
+    showMore?: () => void;
+    /** Show more button text */
+    showMoreText?: string;
+}
+/**
+ * Props for ChatContainer component
+ */
+export interface ChatContainerProps {
+    /** Array of chats for history */
+    chats?: ChatType[];
+    /** Currently active chat */
+    activeChat?: ChatType | null;
+    /** Array of messages in current chat */
+    messages?: TChatMessage[];
+    /** Callback when user sends a message */
+    onSendMessage: (data: TSubmitData) => Promise<void>;
+    /** Callback when user selects a chat from history */
+    onSelectChat?: (chat: ChatType) => void;
+    /** Callback when user creates a new chat */
+    onCreateChat?: () => void;
+    /** Callback when user deletes a chat */
+    onDeleteChat?: (chat: ChatType) => void;
+    /** Callback when user deletes all chats */
+    onDeleteAllChats?: () => Promise<void>;
+    /** Callback when user closes the chat */
+    onClose?: () => void;
+    /** Callback when user cancels streaming */
+    onCancel?: () => Promise<void>;
+    /** Chat status: submitted, streaming, ready, error */
+    status?: ChatStatus;
+    /** Error state */
+    error?: Error | null;
+    /** Show message actions on hover */
+    showActionsOnHover?: boolean;
+    /** Callback to retry after error */
+    onRetry?: () => void;
+    /** Array of context items to display in prompt input header */
+    contextItems?: ContextItemConfig[];
+    /** Transform options for markdown rendering */
+    transformOptions?: OptionsType;
+    /** Props override for Header component */
+    headerProps?: Partial<Omit<HeaderProps, 'handleNewChat' | 'handleHistoryToggle' | 'handleClose'>>;
+    /** Props override for ChatContent component */
+    contentProps?: Partial<Omit<ChatContentProps, 'view' | 'messageListProps'>>;
+    /** Props override for EmptyContainer (welcome screen) */
+    emptyContainerProps?: Partial<EmptyContainerProps>;
+    /** Props override for PromptInput component */
+    promptInputProps?: Partial<Omit<PromptInputProps, 'onSend' | 'onCancel'>>;
+    /** Props override for History component */
+    historyProps?: Partial<Omit<HistoryProps, 'chats' | 'selectedChat' | 'onSelectChat' | 'onDeleteChat' | 'anchorElement'>>;
+    /** Welcome screen configuration for empty state */
+    welcomeConfig?: WelcomeConfig;
+    /** I18n configuration for all text labels */
+    i18nConfig?: ChatContainerI18nConfig;
+    /** Show chat history feature */
+    showHistory?: boolean;
+    /** Show new chat button */
+    showNewChat?: boolean;
+    /** Show close button */
+    showClose?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** QA/test identifier */
+    qa?: string;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,20 @@
+import { HeaderAction } from '../../organisms/Header';
+import type { ChatContainerProps } from './types';
+/**
+ * Hook for managing ChatContainer state
+ *
+ * @param props - ChatContainer component props
+ * @returns object with state and handlers
+ */
+export declare function useChatContainer(props: ChatContainerProps): {
+    chatContentView: string;
+    isHistoryOpen: boolean;
+    activeChat: import("../../..").ChatType | null | undefined;
+    historyButtonRef: import("react").RefObject<HTMLElement>;
+    handleNewChat: () => void;
+    handleHistoryToggle: () => void;
+    handleClose: () => void;
+    handleSelectChat: (chat: ChatContainerProps["activeChat"]) => void;
+    handleHistoryOpenChange: (open: boolean) => void;
+    baseActions: HeaderAction[];
+};

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

@@ -0,0 +1,77 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { HeaderAction } from '../../organisms/Header';
+/**
+ * Hook for managing ChatContainer state
+ *
+ * @param props - ChatContainer component props
+ * @returns object with state and handlers
+ */
+export function useChatContainer(props) {
+    const { messages = [], activeChat, onCreateChat, onClose, onSelectChat, showHistory = true, showNewChat = true, showClose = false, } = props;
+    // Refs for History integration with Header
+    const historyButtonRef = useRef(null);
+    const [isHistoryOpen, setIsHistoryOpen] = useState(false);
+    // Determine view for ChatContent (empty or chat)
+    const chatContentView = useMemo(() => {
+        // If there is an active chat (selected from history), show chat view
+        // even if there are no messages yet
+        if (activeChat) {
+            return 'chat';
+        }
+        // If no active chat, determine by the presence of messages
+        return messages.length === 0 ? 'empty' : 'chat';
+    }, [messages.length, activeChat]);
+    // Handler for creating new chat
+    const handleNewChat = useCallback(() => {
+        onCreateChat === null || onCreateChat === void 0 ? void 0 : onCreateChat();
+    }, [onCreateChat]);
+    // Handler for toggling history
+    const handleHistoryToggle = useCallback(() => {
+        setIsHistoryOpen((prev) => !prev);
+    }, []);
+    // Handler for closing
+    const handleClose = useCallback(() => {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [onClose]);
+    // Handler for selecting chat from history
+    const handleSelectChat = useCallback((chat) => {
+        if (chat) {
+            onSelectChat === null || onSelectChat === void 0 ? void 0 : onSelectChat(chat);
+            setIsHistoryOpen(false);
+        }
+    }, [onSelectChat]);
+    // Handler for history popup state changes
+    const handleHistoryOpenChange = useCallback((open) => {
+        setIsHistoryOpen(open);
+    }, []);
+    // Build baseActions for Header
+    const baseActions = useMemo(() => {
+        const actions = [];
+        if (showNewChat) {
+            actions.push(HeaderAction.NewChat);
+        }
+        if (showHistory) {
+            actions.push(HeaderAction.History);
+        }
+        if (showClose) {
+            actions.push(HeaderAction.Close);
+        }
+        return actions;
+    }, [showNewChat, showHistory, showClose]);
+    return {
+        // State
+        chatContentView,
+        isHistoryOpen,
+        activeChat,
+        // Refs
+        historyButtonRef,
+        // Handlers
+        handleNewChat,
+        handleHistoryToggle,
+        handleClose,
+        handleSelectChat,
+        handleHistoryOpenChange,
+        // Configuration
+        baseActions,
+    };
+}

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

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

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

@@ -0,0 +1,2 @@
+// Export all pages
+export * from './ChatContainer';

package/dist/src/components/templates/ChatContent/ChatContent.d.ts

@@ -0,0 +1,29 @@
+import { type MessageListProps } from '../../organisms/MessageList';
+import { type EmptyContainerProps } from '../EmptyContainer';
+import './ChatContent.scss';
+/**
+ * ChatContent display mode
+ */
+export type ChatContentView = 'empty' | 'chat';
+/**
+ * Props for ChatContent component
+ */
+export interface ChatContentProps {
+    /** Display mode: 'empty' - EmptyContainer, 'chat' - MessageList */
+    view: ChatContentView;
+    /** Props for EmptyContainer (used when view='empty') */
+    emptyContainerProps?: EmptyContainerProps;
+    /** Props for MessageList (used when view='chat') */
+    messageListProps?: MessageListProps;
+    /** Additional CSS class */
+    className?: string;
+    /** QA/test identifier */
+    qa?: string;
+}
+/**
+ * ChatContent - main chat content with state switching (EmptyContainer/MessageList).
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export declare function ChatContent(props: ChatContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/templates/ChatContent/ChatContent.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { block } from '../../../utils/cn';
+import { MessageList } from '../../organisms/MessageList';
+import { EmptyContainer } from '../EmptyContainer';
+import './ChatContent.scss';
+const b = block('chat-content');
+/**
+ * ChatContent - main chat content with state switching (EmptyContainer/MessageList).
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export function ChatContent(props) {
+    const { view, emptyContainerProps, messageListProps, className, qa } = props;
+    const isEmptyView = view === 'empty';
+    return (_jsx("div", { className: b(null, className), "data-qa": qa, children: isEmptyView
+            ? emptyContainerProps && _jsx(EmptyContainer, Object.assign({}, emptyContainerProps))
+            : messageListProps && (_jsx("div", { className: b('message-list-container'), children: _jsx(MessageList, Object.assign({}, messageListProps)) })) }));
+}

package/dist/src/components/templates/ChatContent/__stories__/ChatContent.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { ChatContent } from '..';
+declare const _default: Meta;
+export default _default;
+type Story = StoryObj<typeof ChatContent>;
+export declare const Playground: Story;
+export declare const EmptyState: Story;
+export declare const EmptyStateWithSuggestions: Story;
+export declare const ChatStateWithMessages: Story;
+export declare const ChatStateWithActionsOnHover: Story;
+export declare const WithLongMessages: Story;
+export declare const WithManyMessages: Story;
+export declare const Interactive: Story;
+export declare const LongConversation: Story;