@gravity-ui/aikit 0.0.1

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

@@ -0,0 +1,315 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-console */
+import { useState } from 'react';
+import { CircleInfo } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { ChatContent } from '..';
+import { BaseMessageAction } from '../../../../components/molecules/BaseMessage';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'templates/ChatContent',
+    component: ChatContent,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { width: "600px", height: "800px", children: _jsx(Story, {}) })),
+];
+const sampleActions = [
+    {
+        type: BaseMessageAction.Copy,
+        onClick: () => console.log('Copy clicked'),
+    },
+    {
+        type: BaseMessageAction.Edit,
+        onClick: () => console.log('Edit clicked'),
+    },
+    {
+        type: BaseMessageAction.Retry,
+        onClick: () => console.log('Retry clicked'),
+    },
+    {
+        type: BaseMessageAction.Like,
+        onClick: () => console.log('Like clicked'),
+    },
+    {
+        type: BaseMessageAction.Unlike,
+        onClick: () => console.log('Unlike clicked'),
+    },
+    {
+        type: BaseMessageAction.Delete,
+        onClick: () => console.log('Delete clicked'),
+    },
+];
+// Sample messages for stories
+const sampleMessages = [
+    {
+        id: '1',
+        role: 'user',
+        content: 'Hello! Can you help me with React?',
+        timestamp: '2024-01-01T12:00:00Z',
+        actions: sampleActions,
+    },
+    {
+        id: '2',
+        role: 'assistant',
+        content: 'Of course! I would be happy to help you with React. What would you like to know?',
+        timestamp: '2024-01-01T12:00:05Z',
+        actions: sampleActions,
+    },
+    {
+        id: '3',
+        role: 'user',
+        content: 'How do I use hooks?',
+        timestamp: '2024-01-01T12:01:00Z',
+        actions: sampleActions,
+    },
+    {
+        id: '4',
+        role: 'assistant',
+        content: 'React Hooks are functions that let you use state and other React features without writing a class. The most commonly used hooks are:\n\n1. **useState** - for managing component state\n2. **useEffect** - for side effects\n3. **useContext** - for consuming context\n\nWould you like examples of how to use any of these?',
+        timestamp: '2024-01-01T12:01:10Z',
+        actions: sampleActions,
+    },
+];
+// Sample suggestions for empty state
+const sampleSuggestions = [
+    { id: '1', title: 'Explain React hooks' },
+    { id: '2', title: 'How to use TypeScript with React?' },
+    { id: '3', title: 'Best practices for component structure' },
+    { id: '4', title: 'State management options' },
+];
+export const Playground = {
+    args: {
+        view: 'empty',
+        emptyContainerProps: {
+            image: (_jsx(Icon, { data: CircleInfo, size: 120, style: { color: 'var(--g-color-text-complementary)' } })),
+            title: 'Welcome to AI Chat',
+            description: 'Start a conversation or choose a suggestion below',
+            suggestionTitle: "Don't know where to start? Try this:",
+            suggestions: sampleSuggestions,
+            onSuggestionClick: (content, id) => {
+                console.log('Suggestion clicked:', content, id);
+            },
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const EmptyState = {
+    args: {
+        view: 'empty',
+        emptyContainerProps: {
+            title: 'Welcome to AI Assistant',
+            description: 'I can help you with coding questions, explain concepts, and assist with your development tasks.',
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const EmptyStateWithSuggestions = {
+    args: {
+        view: 'empty',
+        emptyContainerProps: {
+            image: (_jsx(Icon, { data: CircleInfo, size: 100, style: { color: 'var(--g-color-text-complementary)' } })),
+            title: 'AI Development Assistant',
+            description: 'Ask questions, get code suggestions, or explore best practices.',
+            suggestionTitle: 'Popular topics:',
+            suggestions: sampleSuggestions,
+            onSuggestionClick: (content, id) => {
+                console.log('Suggestion clicked:', content, id);
+            },
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const ChatStateWithMessages = {
+    args: {
+        view: 'chat',
+        messageListProps: {
+            messages: sampleMessages,
+            showTimestamp: true,
+            showAvatar: false,
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const ChatStateWithActionsOnHover = {
+    args: {
+        view: 'chat',
+        messageListProps: {
+            messages: sampleMessages,
+            showTimestamp: true,
+            showActionsOnHover: true,
+            showAvatar: true,
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithLongMessages = {
+    args: {
+        view: 'chat',
+        messageListProps: {
+            messages: sampleMessages,
+            showTimestamp: true,
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithManyMessages = {
+    args: {
+        view: 'chat',
+        messageListProps: {
+            messages: [
+                ...sampleMessages,
+                {
+                    id: '5',
+                    role: 'user',
+                    content: 'Can you show me an example?',
+                    timestamp: '2024-01-01T12:02:00Z',
+                    actions: sampleActions,
+                },
+                {
+                    id: '6',
+                    role: 'assistant',
+                    content: `Here's a simple useState example:
+
+\`\`\`tsx
+import { useState } from 'react';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  );
+}
+\`\`\`
+
+This component maintains a count state and updates it when the button is clicked.`,
+                    timestamp: '2024-01-01T12:02:05Z',
+                    actions: sampleActions,
+                },
+            ],
+            showTimestamp: true,
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const Interactive = {
+    render: () => {
+        const [view, setView] = useState('empty');
+        const [messages, setMessages] = useState([]);
+        const handleSuggestionClick = (content) => {
+            // Add user message
+            const userMessage = {
+                id: Date.now().toString(),
+                role: 'user',
+                content,
+                timestamp: new Date().toISOString(),
+            };
+            setMessages([userMessage]);
+            setView('chat');
+            // Simulate assistant response
+            setTimeout(() => {
+                const assistantMessage = {
+                    id: (Date.now() + 1).toString(),
+                    role: 'assistant',
+                    content: `I received your message: "${content}". How can I help you further?`,
+                    timestamp: new Date().toISOString(),
+                };
+                setMessages((prev) => [...prev, assistantMessage]);
+            }, 1000);
+        };
+        return (_jsx(ChatContent, { view: view, emptyContainerProps: {
+                title: 'Welcome to AI Chat',
+                description: 'Start a conversation or choose a suggestion below',
+                suggestionTitle: 'Try asking:',
+                suggestions: sampleSuggestions,
+                onSuggestionClick: handleSuggestionClick,
+            }, messageListProps: {
+                messages,
+                showTimestamp: true,
+            } }));
+    },
+    decorators: defaultDecorators,
+};
+export const LongConversation = {
+    args: {
+        view: 'chat',
+        messageListProps: {
+            messages: [
+                ...sampleMessages,
+                {
+                    id: '5',
+                    role: 'user',
+                    content: 'Can you show me an example?',
+                    timestamp: '2024-01-01T12:02:00Z',
+                    actions: sampleActions,
+                },
+                {
+                    id: '6',
+                    role: 'assistant',
+                    content: `Here's a simple useState example:
+
+\`\`\`tsx
+import { useState } from 'react';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  );
+}
+\`\`\`
+
+This component maintains a count state and updates it when the button is clicked.`,
+                    timestamp: '2024-01-01T12:02:05Z',
+                    actions: sampleActions,
+                },
+                {
+                    id: '7',
+                    role: 'user',
+                    content: 'What about useEffect?',
+                    timestamp: '2024-01-01T12:03:00Z',
+                    actions: sampleActions,
+                },
+                {
+                    id: '8',
+                    role: 'assistant',
+                    content: `useEffect is used for side effects. Here's an example:
+
+\`\`\`tsx
+import { useState, useEffect } from 'react';
+
+function DataFetcher() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    fetch('https://api.example.com/data')
+      .then(response => response.json())
+      .then(data => setData(data));
+  }, []); // Empty array means run once on mount
+
+  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
+}
+\`\`\``,
+                    timestamp: '2024-01-01T12:03:10Z',
+                    actions: sampleActions,
+                },
+            ],
+            showTimestamp: true,
+            showActionsOnHover: true,
+        },
+    },
+    decorators: defaultDecorators,
+};

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

@@ -0,0 +1 @@
+export { ChatContent, type ChatContentProps, type ChatContentView } from './ChatContent';

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

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

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { SuggestionsItem } from '../../molecules/Suggestions';
+import './EmptyContainer.scss';
+/**
+ * Suggestion item for EmptyContainer
+ */
+export type Suggestion = SuggestionsItem;
+/**
+ * Alignment options for content elements
+ */
+export type ContentAlignment = 'left' | 'center' | 'right';
+/**
+ * Alignment configuration for different sections
+ */
+export interface AlignmentConfig {
+    /** Alignment for the image */
+    image?: ContentAlignment;
+    /** Alignment for the title */
+    title?: ContentAlignment;
+    /** Alignment for the description */
+    description?: ContentAlignment;
+}
+/**
+ * Props for the EmptyContainer component
+ */
+export interface EmptyContainerProps {
+    /** Image or icon to display at the top */
+    image?: React.ReactNode;
+    /** Title text for the welcome screen */
+    title?: string;
+    /** Description text explaining the functionality */
+    description?: string;
+    /** Title for the suggestions section */
+    suggestionTitle?: string;
+    /** Array of suggestion items */
+    suggestions?: Suggestion[];
+    /** Callback when a suggestion is clicked */
+    onSuggestionClick?: (content: string, id?: string) => void;
+    /** Alignment configuration for image, title, and description */
+    alignment?: AlignmentConfig;
+    /** Callback for showing more suggestions */
+    showMore?: () => void;
+    /** Custom text for the show more button */
+    showMoreText?: string;
+    /** Additional CSS class */
+    className?: string;
+    /** QA/test identifier */
+    qa?: string;
+}
+/**
+ * EmptyContainer component - displays a welcome screen with image, title, description,
+ * and suggestions
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export declare function EmptyContainer(props: EmptyContainerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowRotateRight } from '@gravity-ui/icons';
+import { Button, Text } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import { Suggestions } from '../../molecules/Suggestions';
+import { i18n } from './i18n';
+import './EmptyContainer.scss';
+const b = block('empty-container');
+/**
+ * EmptyContainer component - displays a welcome screen with image, title, description,
+ * and suggestions
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export function EmptyContainer(props) {
+    const { image, title, description, suggestionTitle, suggestions = [], onSuggestionClick, alignment, showMore, showMoreText, className, qa, } = props;
+    const hasContent = title || description || (suggestions && suggestions.length > 0);
+    // Define alignment for each element
+    const imageAlignment = (alignment === null || alignment === void 0 ? void 0 : alignment.image) || 'left';
+    const titleAlignment = (alignment === null || alignment === void 0 ? void 0 : alignment.title) || 'left';
+    const descriptionAlignment = (alignment === null || alignment === void 0 ? void 0 : alignment.description) || 'left';
+    // Define text for "Show more" button with localization support
+    const showMoreButtonText = showMoreText || i18n('show-more-button');
+    return (_jsx("div", { className: b(null, className), "data-qa": qa, children: _jsx("div", { className: b('content'), children: hasContent && (_jsxs(_Fragment, { children: [_jsxs("div", { className: b('welcome-section'), children: [image && (_jsx("div", { className: b('image-container', { align: imageAlignment }), children: image })), _jsxs("div", { className: b('text-container'), children: [title && (_jsx(Text, { variant: "header-2", className: b('title', { align: titleAlignment }), children: title })), description && (_jsx(Text, { variant: "body-2", color: "complementary", className: b('description', { align: descriptionAlignment }), children: description }))] })] }), suggestions && suggestions.length > 0 && onSuggestionClick && (_jsxs("div", { className: b('suggestions-section'), children: [suggestionTitle && (_jsx("div", { className: b('suggestions-title'), children: _jsx(Text, { variant: "subheader-3", color: "primary", children: suggestionTitle }) })), _jsx("div", { children: _jsx(Suggestions, { items: suggestions, onClick: onSuggestionClick, layout: "grid" }) }), showMore && (_jsx("div", { className: b('show-more'), children: _jsxs(Button, { view: "flat-secondary", size: "l", onClick: showMore, className: b('show-more-button'), children: [_jsx(Button.Icon, { children: _jsx(ArrowRotateRight, {}) }), showMoreButtonText] }) }))] }))] })) }) }));
+}

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { EmptyContainer } from '..';
+declare const _default: Meta;
+export default _default;
+type Story = StoryObj<typeof EmptyContainer>;
+export declare const Playground: Story;
+export declare const Default: Story;
+export declare const WithImage: Story;
+export declare const WithSuggestions: Story;
+export declare const MinimalContent: Story;
+export declare const OnlyDescription: Story;
+export declare const CustomSuggestions: Story;
+export declare const LongContent: Story;
+export declare const WithLeftAlignment: Story;
+export declare const WithRightAlignment: Story;
+export declare const WithMixedAlignment: Story;
+export declare const WithShowMoreButton: Story;
+export declare const WithShowMoreButtonCustomText: Story;
+export declare const WithShowMoreInteractive: Story;
+export declare const CompleteExample: Story;

package/dist/src/components/templates/EmptyContainer/__stories__/EmptyContainer.stories.js

@@ -0,0 +1,250 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable no-console */
+import { useState } from 'react';
+import { CircleInfo } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { EmptyContainer } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'templates/EmptyContainer',
+    component: EmptyContainer,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { width: "600px", children: _jsx(Story, {}) })),
+];
+const sampleSuggestions = [
+    { id: '1', title: 'Summarize recent activity' },
+    { id: '2', title: 'Check code for vulnerabilities' },
+    { id: '3', title: 'Explain project structure' },
+    { id: '4', title: 'Generate documentation' },
+];
+export const Playground = {
+    args: {
+        image: (_jsx(Icon, { data: CircleInfo, size: 120, style: { color: 'var(--g-color-text-complementary)' } })),
+        title: 'Welcome to AI Chat',
+        description: 'Experience smarter, faster teamwork right inside your product! AI chat seamlessly integrates with your workflow – helping you with answering technical questions and much more.',
+        suggestionTitle: "Don't know where to start from? Try this:",
+        suggestions: sampleSuggestions,
+        onSuggestionClick: (content, id) => {
+            console.log('Suggestion clicked:', content, id);
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const Default = {
+    args: {
+        title: 'Welcome to AI Chat',
+        description: 'Experience smarter, faster teamwork right inside your product! AI chat seamlessly integrates with your workflow – helping you with answering technical questions and much more.',
+    },
+    decorators: defaultDecorators,
+};
+export const WithImage = {
+    args: {
+        image: (_jsx(Icon, { data: CircleInfo, size: 120, style: { color: 'var(--g-color-text-complementary)' } })),
+        title: 'Welcome to AI Chat',
+        description: 'Ask me anything and I will help you with your tasks.',
+    },
+    decorators: defaultDecorators,
+};
+export const WithSuggestions = {
+    args: {
+        title: 'Welcome to AI Chat',
+        description: 'Get started with these helpful suggestions.',
+        suggestionTitle: "Don't know where to start from? Try this:",
+        suggestions: sampleSuggestions,
+        onSuggestionClick: (content, id) => {
+            console.log('Suggestion clicked:', content, id);
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const MinimalContent = {
+    args: {
+        title: 'Welcome',
+    },
+    decorators: defaultDecorators,
+};
+export const OnlyDescription = {
+    args: {
+        description: 'This is a simple empty state with only a description.',
+    },
+    decorators: defaultDecorators,
+};
+export const CustomSuggestions = {
+    args: {
+        title: 'Quick Actions',
+        suggestionTitle: 'Choose an action:',
+        suggestions: [
+            { id: '1', title: 'Start new conversation', view: 'outlined' },
+            { id: '2', title: 'View history', view: 'flat', icon: 'right' },
+            { id: '3', title: 'Settings', view: 'flat', icon: 'left' },
+        ],
+        onSuggestionClick: (content, id) => {
+            console.log('Action clicked:', content, id);
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const LongContent = {
+    args: {
+        title: 'Welcome to Our Advanced AI-Powered Chat Interface',
+        description: 'Experience the next generation of conversational AI technology that seamlessly integrates with your existing workflow. Our platform offers intelligent responses, context-aware suggestions, and advanced natural language processing capabilities to help you accomplish tasks faster and more efficiently. Whether you need help with code reviews, documentation, project planning, or answering complex technical questions, our AI assistant is here to support you every step of the way.',
+        suggestionTitle: 'Here are some popular ways to get started with the platform:',
+        suggestions: [
+            { id: '1', title: 'Analyze and summarize recent project activity and changes' },
+            {
+                id: '2',
+                title: 'Run comprehensive security audit and check code for vulnerabilities',
+            },
+            { id: '3', title: 'Generate detailed explanation of project structure and architecture' },
+            {
+                id: '4',
+                title: 'Create comprehensive documentation for all public APIs and methods',
+            },
+        ],
+        onSuggestionClick: (content, id) => {
+            console.log('Suggestion clicked:', content, id);
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithLeftAlignment = {
+    args: {
+        image: (_jsx(Icon, { data: CircleInfo, size: 120, style: { color: 'var(--g-color-text-complementary)' } })),
+        title: 'Welcome to AI Chat',
+        description: 'Experience smarter, faster teamwork right inside your product! All content is aligned to the left.',
+        alignment: {
+            image: 'left',
+            title: 'left',
+            description: 'left',
+        },
+        suggestionTitle: "Don't know where to start from? Try this:",
+        suggestions: sampleSuggestions.slice(0, 3),
+        onSuggestionClick: (content, id) => {
+            console.log('Suggestion clicked:', content, id);
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithRightAlignment = {
+    args: {
+        image: (_jsx(Icon, { data: CircleInfo, size: 80, style: { color: 'var(--g-color-text-complementary)' } })),
+        title: 'Welcome to AI Chat',
+        description: 'Experience smarter, faster teamwork right inside your product! All content is aligned to the right.',
+        alignment: {
+            image: 'right',
+            title: 'right',
+            description: 'right',
+        },
+        suggestionTitle: "Don't know where to start from? Try this:",
+        suggestions: sampleSuggestions.slice(0, 3),
+        onSuggestionClick: (content, id) => {
+            console.log('Suggestion clicked:', content, id);
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithMixedAlignment = {
+    args: {
+        image: (_jsx(Icon, { data: CircleInfo, size: 64, style: { color: 'var(--g-color-text-complementary)' } })),
+        title: 'Welcome to AI Chat',
+        description: 'This example demonstrates mixed alignment: left title, right description.',
+        alignment: {
+            image: 'center',
+            title: 'left',
+            description: 'right',
+        },
+        suggestionTitle: "Don't know where to start from? Try this:",
+        suggestions: sampleSuggestions.slice(0, 2),
+        onSuggestionClick: (content, id) => {
+            console.log('Suggestion clicked:', content, id);
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithShowMoreButton = {
+    args: {
+        title: 'Welcome to AI Chat',
+        description: 'Click the button below to load more suggestions.',
+        suggestionTitle: "Don't know where to start from? Try this:",
+        suggestions: sampleSuggestions.slice(0, 2),
+        onSuggestionClick: (content, id) => {
+            console.log('Suggestion clicked:', content, id);
+        },
+        showMore: () => {
+            console.log('Show more clicked');
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const WithShowMoreButtonCustomText = {
+    args: {
+        title: 'Welcome to AI Chat',
+        description: 'Custom button text for loading more suggestions.',
+        suggestionTitle: 'Popular actions:',
+        suggestions: sampleSuggestions.slice(0, 2),
+        onSuggestionClick: (content, id) => {
+            console.log('Suggestion clicked:', content, id);
+        },
+        showMore: () => {
+            console.log('Show more clicked');
+        },
+        showMoreText: 'Load more suggestions',
+    },
+    decorators: defaultDecorators,
+};
+export const WithShowMoreInteractive = {
+    render: (args) => {
+        const [suggestions, setSuggestions] = useState(sampleSuggestions.slice(0, 2));
+        const [hasMore, setHasMore] = useState(true);
+        const loadMore = () => {
+            if (suggestions.length < sampleSuggestions.length) {
+                setSuggestions([
+                    ...suggestions,
+                    ...sampleSuggestions.slice(suggestions.length, suggestions.length + 2),
+                ]);
+            }
+            if (suggestions.length + 2 >= sampleSuggestions.length) {
+                setHasMore(false);
+            }
+        };
+        return (_jsx(EmptyContainer, Object.assign({}, args, { suggestions: suggestions, showMore: hasMore ? loadMore : undefined })));
+    },
+    args: {
+        title: 'Welcome to AI Chat',
+        description: 'Interactive example: click "Show more" to load additional suggestions.',
+        suggestionTitle: "Don't know where to start from? Try this:",
+        onSuggestionClick: (content, id) => {
+            console.log('Suggestion clicked:', content, id);
+        },
+    },
+    decorators: defaultDecorators,
+};
+export const CompleteExample = {
+    args: {
+        image: (_jsx(Icon, { data: CircleInfo, size: 120, style: { color: 'var(--g-color-text-complementary)' } })),
+        title: 'Welcome to AI Chat',
+        description: 'Experience smarter, faster teamwork right inside your product! This example combines alignment and show more button.',
+        alignment: {
+            image: 'left',
+            title: 'left',
+            description: 'left',
+        },
+        suggestionTitle: "Don't know where to start from? Try this:",
+        suggestions: sampleSuggestions.slice(0, 2),
+        onSuggestionClick: (content, id) => {
+            console.log('Suggestion clicked:', content, id);
+        },
+        showMore: () => {
+            console.log('Show more clicked');
+        },
+        showMoreText: 'View all suggestions',
+    },
+    decorators: defaultDecorators,
+};

package/dist/src/components/templates/EmptyContainer/i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "show-more-button": "Show more examples"
+}