@gravity-ui/aikit 0.1.1 → 0.2.0

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

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

@@ -1,10 +0,0 @@
-{
-    "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/templates/ChatContent/__stories__/ChatContent.stories.d.ts

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

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

@@ -1,327 +0,0 @@
-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',
-        status: 'complete',
-        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',
-        status: 'complete',
-        actions: sampleActions,
-    },
-    {
-        id: '3',
-        role: 'user',
-        content: 'How do I use hooks?',
-        timestamp: '2024-01-01T12:01:00Z',
-        status: 'complete',
-        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',
-        status: 'complete',
-        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',
-                    status: 'complete',
-                    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',
-                    status: 'complete',
-                    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(),
-                status: 'complete',
-            };
-            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(),
-                    status: 'complete',
-                };
-                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',
-                    status: 'complete',
-                    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',
-                    status: 'complete',
-                    actions: sampleActions,
-                },
-                {
-                    id: '7',
-                    role: 'user',
-                    content: 'What about useEffect?',
-                    timestamp: '2024-01-01T12:03:00Z',
-                    status: 'complete',
-                    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',
-                    status: 'complete',
-                    actions: sampleActions,
-                },
-            ],
-            showTimestamp: true,
-            showActionsOnHover: true,
-        },
-    },
-    decorators: defaultDecorators,
-};

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

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

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

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

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

@@ -1,3 +0,0 @@
-{
-    "show-more-button": "Показать больше примеров"
-}

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

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { History } from '..';
-declare const _default: Meta;
-export default _default;
-type Story = StoryObj<typeof History>;
-export declare const Playground: Story;
-export declare const WithSelectedChat: Story;
-export declare const WithLoadMore: Story;
-export declare const WithoutSearch: Story;
-export declare const WithoutGrouping: Story;
-export declare const WithoutActions: Story;
-export declare const EmptyState: Story;
-export declare const WithLoadMoreAndDelete: Story;
-export declare const Interactive: Story;
-export declare const WithCustomEmptyPlaceholder: Story;
-export declare const WithCustomFilter: Story;
-export declare const NotForceOpen: Story;