### Quick Start Chat Container Example

Source: https://github.com/gravity-ui/aikit/blob/main/README.md

Demonstrates how to use the ChatContainer component from @gravity-ui/aikit in a React application. It includes basic setup for messages, chats, and event handlers.

```typescript
import { ChatContainer } from '@gravity-ui/aikit';
import type { ChatType, TChatMessage } from '@gravity-ui/aikit';

function App() {
    const [messages, setMessages] = useState<TChatMessage[]>([]);
    const [chats, setChats] = useState<ChatType[]>([]);
    const [activeChat, setActiveChat] = useState<ChatType | null>(null);

    return (
        <ChatContainer
            chats={chats}
            activeChat={activeChat}
            messages={messages}
            onSendMessage={async (data) => {
                // Your sending logic
                console.log('Message:', data.content);
            }}
            onSelectChat={setActiveChat}
            onCreateChat={() => {
                // Create new chat
            }}
            onDeleteChat={(chat) => {
                // Delete chat
            }}
        />
    );
}
```

--------------------------------

### Install Optional Server Dependencies

Source: https://github.com/gravity-ui/aikit/blob/main/docs/TROUBLESHOOTING.md

Install the optional 'openai' and 'semver' packages if you are using the server-side code from `@gravity-ui/aikit/server/openai`. These are not installed by default.

```bash
npm install openai semver
```

--------------------------------

### Install Playwright Browsers and Dependencies

Source: https://github.com/gravity-ui/aikit/blob/main/playwright/README.md

Installs necessary Playwright browsers and dependencies for running tests. This command should be run once during initial setup.

```shell
npm run playwright:install
```

--------------------------------

### Install AIKit Package

Source: https://github.com/gravity-ui/aikit/blob/main/docs/GETTING_STARTED.md

Install the @gravity-ui/aikit package using npm.

```bash
npm install @gravity-ui/aikit
```

--------------------------------

### Minimal Toolset Wiring Example

Source: https://github.com/gravity-ui/aikit/blob/main/docs/GENUI.md

This example demonstrates how to define a custom tool, create a toolset, and set up a renderer for assistant messages. It includes a custom `ApprovalCard` component for user interaction.

```tsx
import {
  AssistantMessage,
  createToolset,
  createToolsetRenderer,
  defineTool,
  type ToolComponentProps,
  type ToolPartContent,
} from '@gravity-ui/aikit';

type ApprovalArgs = {summary: string};
type ApprovalResult = {approved: boolean; auditText: string};

function ApprovalCard({
  args,
  result,
  submitResult,
}: ToolComponentProps<ApprovalArgs, ApprovalResult>) {
  if (result) return <div>{result.auditText}</div>;
  return (
    <div>
      <p>{args.summary}</p>
      <button type="button" onClick={() => submitResult({approved: true, auditText: ''})}>
        Approve
      </button>
    </div>
  );
}

const toolset = createToolset(
  defineTool({
    name: 'approval.request',
    description: 'Ask the user to approve or reject an action.',
    parameters: {
      type: 'object',
      properties: {summary: {type: 'string'}},
      required: ['summary'],
    },
    schema: {
      validate: (input) => {
        if (
          !input ||
          typeof input !== 'object' ||
          typeof (input as ApprovalArgs).summary !== 'string'
        ) {
          return {success: false, error: {message: 'Expected args.summary to be a string'}}; 
        }
        return {success: true, data: input as ApprovalArgs};
      },
    },
    component: ApprovalCard,
    execute: ({args, result}) => ({
      approved: result.approved,
      auditText: `${result.approved ? 'Approved' : 'Rejected'} "${args.summary}".`,
    }),
  }),
);

// Pass messageRendererRegistry into AssistantMessage or ChatContainer messageListConfig.
const registry = createToolsetRenderer(toolset, {
  onToolResult: (event) => {
    // Merge the event into your messages with applyToolResult if needed.
    console.log(event);
  },
});
```

--------------------------------

### Quick Start Chat Container Example

Source: https://github.com/gravity-ui/aikit/blob/main/llms-full.txt

Basic implementation of the ChatContainer component to display chats, messages, and handle user interactions like sending messages and selecting chats. Requires state management for messages, chats, and active chat.

```typescript
import { ChatContainer } from '@gravity-ui/aikit';
import type { ChatType, TChatMessage } from '@gravity-ui/aikit';

function App() {
    const [messages, setMessages] = useState<TChatMessage[]>([]);
    const [chats, setChats] = useState<ChatType[]>([]);
    const [activeChat, setActiveChat] = useState<ChatType | null>(null);

    return (
        <ChatContainer
            chats={chats}
            activeChat={activeChat}
            messages={messages}
            onSendMessage={async (data) => {
                // Your sending logic
                console.log('Message:', data.content);
            }}
            onSelectChat={setActiveChat}
            onCreateChat={() => {
                // Create new chat
            }}
            onDeleteChat={(chat) => {
                // Delete chat
            }}
        />
    );
}
```

--------------------------------

### Install Peer Dependencies

Source: https://github.com/gravity-ui/aikit/blob/main/docs/GETTING_STARTED.md

Install the necessary peer dependencies for @gravity-ui/aikit.

```bash
npm install @gravity-ui/uikit @gravity-ui/icons @gravity-ui/i18n @diplodoc/transform highlight.js react react-dom
```

--------------------------------

### Basic Usage Example

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/ActionPopup/README.md

Demonstrates the basic implementation of the ActionPopup component.

```APIDOC
## Basic Usage

```tsx
import { ActionPopup } from '@gravity-ui/aikit';
import { useState, useRef } from 'react';

function Example() {
  const [open, setOpen] = useState(false);
  const anchorRef = useRef<HTMLButtonElement>(null);

  return (
    <>
      <Button ref={anchorRef} onClick={() => setOpen(true)}>
        Open Popup
      </Button>

      <ActionPopup
        open={open}
        onOpenChange={setOpen}
        anchorElement={anchorRef.current}
        title="Popup Title"
        subtitle="Optional subtitle"
        placement="bottom-start"
      >
        <div>Your content here</div>
      </ActionPopup>
    </>
  );
}
```
```

--------------------------------

### Install Playwright Browsers Locally (Linux)

Source: https://github.com/gravity-ui/aikit/blob/main/README.md

Install the necessary Playwright browsers for local testing on Linux. This command should be run once before local testing.

```bash
npm run playwright:install
```

--------------------------------

### SuggestionsItem Examples

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/pages/ChatContainer/README.md

Illustrates different ways to define suggestion items for the welcome screen, including custom styling and icons.

```typescript
// Simple suggestion
{
  id: '1',
  title: 'Explain quantum computing',
}
```

```typescript
// Suggestion with custom styling and icon
{
  id: '2',
  title: 'Write a creative poem about nature',
  view: 'outlined',
  icon: 'right',
}
```

```typescript
// Suggestion with different button view
{
  id: '3',
  title: 'Help me debug my code',
  view: 'flat-secondary',
}
```

--------------------------------

### Install OpenAI Dependency

Source: https://github.com/gravity-ui/aikit/blob/main/llms-full.txt

Install the optional 'openai' dependency for server-side OpenAI integration.

```bash
npm install openai
```

--------------------------------

### Date Format Examples

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/atoms/ChatDate/README.md

Provides examples of different input types accepted by the 'date' prop: ISO string, Date object, and timestamp.

```tsx
// ISO string
<ChatDate date="2024-01-15T10:30:00Z" />

// Date object
<ChatDate date={new Date(2024, 0, 15, 10, 30)} />

// Timestamp (milliseconds)
<ChatDate date={1705312200000} />
```

--------------------------------

### PromptInputPanel Usage Examples

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/PromptInputPanel/README.md

Demonstrates basic implementation, complex content layouts with buttons, and the use of a SwapArea component.

```tsx
import {PromptInputPanel} from '@gravity-ui/aikit';

// Basic usage
<PromptInputPanel>
  <div>Panel content goes here</div>
</PromptInputPanel>

// With complex content and close button
<PromptInputPanel>
  <div style={{flex: 1}}>
    <span>Upgrade your plan to Business</span>
  </div>
  <Button view="action">Upgrade</Button>
  <ActionButton view="flat" onClick={handleClose}>
    <Icon data={Xmark} size={16} />
  </ActionButton>
</PromptInputPanel>

// With swap area
<PromptInputPanel>
  <SwapArea />
</PromptInputPanel>
```

--------------------------------

### Implement PromptInputHeader with various configurations

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/PromptInputHeader/README.md

Examples showing how to render context items, usage indicators (percent or number based), and custom content within the header.

```tsx
import {PromptInputHeader} from '@gravity-ui/aikit';

// With context items
<PromptInputHeader
  contextItems={[
    {
      id: '1',
      content: 'file.tsx',
      onRemove: () => console.log('Remove file.tsx'),
    },
    {
      id: '2',
      content: 'component.tsx',
      onRemove: () => console.log('Remove component.tsx'),
    },
  ]}
/>

// With context items and indicator
<PromptInputHeader
  contextItems={[
    {id: '1', content: 'README.md', onRemove: () => {}},
  ]}
  showContextIndicator={true}
  contextIndicatorProps={{
    type: 'percent',
    usedContext: 75,
  }}
/>

// With context indicator only
<PromptInputHeader
  showContextIndicator={true}
  contextIndicatorProps={{
    type: 'percent',
    usedContext: 24,
  }}
/>

// With number-based context indicator
<PromptInputHeader
  showContextIndicator={true}
  contextIndicatorProps={{
    type: 'number',
    usedContext: 2400,
    maxContext: 10000,
  }}
/>

// With custom content
<PromptInputHeader>
  <div>Custom header content</div>
</PromptInputHeader>
```

--------------------------------

### Basic Component Usage Example

Source: https://github.com/gravity-ui/aikit/blob/main/docs/guidelines/readme.md

Demonstrates the minimal required props for basic usage of a component. Ensure correct import statements are used.

```tsx
import {ComponentName} from '@gravity-ui/aikit';

// Basic usage example
<ComponentName
  prop1="value"
  prop2={handler}
/>
```

--------------------------------

### Implement PromptInputFooter variants

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/PromptInputFooter/README.md

Examples showing basic usage, enabling all action icons, and providing custom content within the footer.

```tsx
import {PromptInputFooter} from '@gravity-ui/aikit';

// Basic usage
<PromptInputFooter
  submitButton={{
    onClick: async () => handleSubmit(),
    state: 'enabled',
  }}
/>

// With all icons
<PromptInputFooter
  submitButton={{
    onClick: async () => handleSubmit(),
    state: 'enabled',
  }}
  showSettings={true}
  showAttachment={true}
  showMicrophone={true}
  onSettingsClick={() => console.log('Settings')}
  onAttachmentClick={() => console.log('Attachment')}
  onMicrophoneClick={() => console.log('Microphone')}
/>

// With custom content
<PromptInputFooter
  submitButton={{
    onClick: async () => handleSubmit(),
    state: 'enabled',
  }}
>
  <select>
    <option>Model 1</option>
    <option>Model 2</option>
  </select>
</PromptInputFooter>
```

--------------------------------

### Basic PromptInput Usage (Simple View)

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/organisms/PromptInput/README.md

Demonstrates the basic setup for a simple view of the PromptInput component. Requires the PromptInput import and an onSend handler.

```tsx
import {PromptInput} from '@gravity-ui/aikit';

// Simple view
<PromptInput
  view="simple"
  onSend={async (data) => {
    console.log('Sending:', data.content);
  }}
  bodyProps={{
    placeholder: "Type your message..."
  }}
/>
```

--------------------------------

### PromptInputBody Component Usage

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/PromptInputBody/README.md

Examples demonstrating how to use the PromptInputBody component with various configurations.

```APIDOC
## PromptInputBody Component Usage

### Description
Examples demonstrating how to use the PromptInputBody component with various configurations.

### Basic Usage
```tsx
import {PromptInputBody} from '@gravity-ui/aikit';

<PromptInputBody
  value={value}
  onChange={setValue}
  placeholder="Type your message..."
/>
```

### With Configuration
```tsx
import {PromptInputBody} from '@gravity-ui/aikit';

<PromptInputBody
  value={value}
  onChange={setValue}
  placeholder="Type your message..."
  minRows={1}
  maxRows={15}
  maxLength={1000}
  autoFocus={true}
/>
```

### Disabled State
```tsx
import {PromptInputBody} from '@gravity-ui/aikit';

<PromptInputBody
  value={value}
  onChange={setValue}
  placeholder="Type your message..."
  disabledInput={true}
/>
```

### With Custom Content
```tsx
import {PromptInputBody} from '@gravity-ui/aikit';

<PromptInputBody>
  <div>Custom body content</div>
</PromptInputBody>
```

### Props

| Prop            | Type                                                        |
| --------------- | ----------------------------------------------------------- |
| `value`         | `string`                                                    |
| `placeholder`   | `string`                                                    |
| `maxLength`     | `number`                                                    |
| `minRows`       | `number`                                                    |
| `maxRows`       | `number`                                                    |
| `autoFocus`     | `boolean`                                                   |
| `disabledInput` | `boolean`                                                   |
| `onChange`      | `(value: string) => void`                                   |
| `onKeyDown`     | `(event: React.KeyboardEvent<HTMLTextAreaElement>) => void` |
| `children`      | `ReactNode`                                                 |
| `className`     | `string`                                                    |
| `qa`            | `string`                                                    |
```

--------------------------------

### Custom Format Examples

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/atoms/ChatDate/README.md

Illustrates applying custom date and time formats using the 'format' prop. Examples include European, US, and combined date-time formats.

```tsx
// European format
<ChatDate date="2024-01-15T10:30:00Z" format="DD/MM/YYYY" />
// Output: "15/01/2024"

// US format
<ChatDate date="2024-01-15T10:30:00Z" format="MM-DD-YYYY" />
// Output: "01-15-2024"

// With time
<ChatDate date="2024-01-15T10:30:00Z" format="YYYY/MM/DD HH:mm" />
// Output: "2024/01/15 10:30"
```

--------------------------------

### Install AIKit Peer Dependencies

Source: https://github.com/gravity-ui/aikit/blob/main/docs/TROUBLESHOOTING.md

Install the required peer dependencies for AIKit. Missing these can lead to 'Module not found' errors.

```bash
npm install \
  @gravity-ui/uikit@^7.25 \
  @gravity-ui/icons@^2.16 \
  @gravity-ui/i18n@^1.8 \
  @diplodoc/transform@^4.63 \
  highlight.js@^11.11 \
  react@^18 react-dom@^18
```

--------------------------------

### Basic Component Usage

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/templates/EmptyContainer/README.md

A simple example demonstrating how to use the EmptyContainer component with a title and description. Ensure the component is imported before use.

```tsx
/* Example: Using the component */
<EmptyContainer title="Welcome!" description="Get started with AI" />
```

--------------------------------

### Advanced Component Usage Example

Source: https://github.com/gravity-ui/aikit/blob/main/docs/guidelines/readme.md

Illustrates advanced usage with optional props and children. This example shows how to pass additional properties and content.

```tsx
import {ComponentName} from '@gravity-ui/aikit';

// Advanced usage example
<ComponentName
prop1="value"
prop2={handler}
prop3={true}

>   <ChildComponent /> 
</ComponentName>
```

--------------------------------

### Custom Actions with ReactNode Example

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/BaseMessage/README.md

Demonstrates passing fully custom React nodes as actions, allowing for complete control over rendering. This example includes a custom button and a div element.

```tsx
const actions = [
  {type: 'copy', onClick: handleCopy},
  <Button key="custom" view="outlined-info" size="s" onClick={handleCustom}>
    Custom Button
  </Button>,
  <div key="custom-div" onClick={handleAction}>
    Custom Element
  </div>,
];
```

--------------------------------

### Full-Featured History Component Example

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/templates/History/README.md

A comprehensive example demonstrating the History component with multiple features enabled, including chat selection, deletion, loading more data, search, grouping, and action visibility.

```typescript
import {useState} from 'react';
import {History} from '@gravity-ui/aikit';

function AdvancedChatApp() {
  const [chats, setChats] = useState([...]);
  const [selectedChat, setSelectedChat] = useState(null);
  const [hasMore, setHasMore] = useState(true);

  const handleSelectChat = (chat) => {
    setSelectedChat(chat);
  };

  const handleDeleteChat = (chat) => {
    setChats(prev => prev.filter(c => c.id !== chat.id));
    if (selectedChat?.id === chat.id) {
      setSelectedChat(null);
    }
  };

  const handleLoadMore = () => {
    fetchMoreChats().then(newChats => {
      setChats(prev => [...prev, ...newChats]);
      setHasMore(newChats.length > 0);
    });
  };

  return (
    <History
      chats={chats}
      selectedChat={selectedChat}
      onSelectChat={handleSelectChat}
      onDeleteChat={handleDeleteChat}
      onLoadMore={handleLoadMore}
      hasMore={hasMore}
      searchable={true}
      groupBy="date"
      showActions={true}
    />
  );
}
```

--------------------------------

### AIKit Documentation URLs for Agents

Source: https://github.com/gravity-ui/aikit/blob/main/docs/AI_AGENTS.md

Direct GitHub URLs for AIKit documentation files, useful when the package is not installed locally but the agent can fetch URLs.

```text
https://raw.githubusercontent.com/gravity-ui/aikit/main/llms.txt
```

```text
https://raw.githubusercontent.com/gravity-ui/aikit/main/llms-full.txt
```

--------------------------------

### Basic FeedbackForm Usage

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/FeedbackForm/README.md

Demonstrates the basic setup of the FeedbackForm component with options and an onSubmit handler. Ensure to import FeedbackForm from '@gravity-ui/aikit'.

```tsx
import {FeedbackForm} from '@gravity-ui/aikit';

function Example() {
  const handleSubmit = (reasons: string[], comment: string) => {
    console.log('Selected reasons:', reasons);
    console.log('Comment:', comment);
    // Send feedback to backend
  };

  return (
    <FeedbackForm
      options={[
        {id: 'no-answer', label: 'No answer'},
        {id: 'wrong-info', label: 'Wrong information'},
        {id: 'not-helpful', label: 'Not helpful'},
        {id: 'other', label: 'Other'},
      ]}
      onSubmit={handleSubmit}
    />
  );
}
```

--------------------------------

### Import Storybook Addons and Stories

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/atoms/SubmitButton/__stories__/Docs.mdx

Imports necessary components from '@storybook/addon-docs' and the component stories. Ensure '@storybook/addon-docs' is installed and configured.

```javascript
import {Meta, Canvas, Controls, Markdown} from '@storybook/addon-docs';
import * as Stories from './SubmitButton.stories';
import Readme from '../README.md?raw';
```

--------------------------------

### FileDropZone Usage Example

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/FileDropZone/README.md

Demonstrates how to import and use the FileDropZone component with 'accept', 'multiple', and 'onAdd' props. The 'onAdd' prop logs the added files to the console.

```tsx
import {FileDropZone} from '@gravity-ui/aikit';

<FileDropZone accept="image/*,.pdf" multiple onAdd={(files) => console.log(files)} />;
```

--------------------------------

### PromptInputPanel Component

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/PromptInputPanel/README.md

Documentation for the PromptInputPanel component, including its props and usage examples.

```APIDOC
## PromptInputPanel Component

### Description
A simple panel container component that displays custom content with a flexible layout.

### Props
- **children** (ReactNode) - Optional - Panel content
- **className** (string) - Optional - Additional CSS class
- **qa** (string) - Optional - QA/test identifier

### Usage Example
```tsx
import {PromptInputPanel} from '@gravity-ui/aikit';

<PromptInputPanel>
  <div>Panel content goes here</div>
</PromptInputPanel>
```

### Styling
The component uses CSS variables for theming:
- **--g-spacing-2**: Gap between content
```

--------------------------------

### ChatContainer with Message Actions and Loader Configuration

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/pages/ChatContainer/README.md

Example of how to configure user and assistant message actions, along with loader statuses for the ChatContainer component.

```jsx
<ChatContainer
  messages={messages}
  onSendMessage={handleSendMessage}
  messageListConfig={{
    userActions: [
      {
        type: 'copy',
        onClick: (message) => navigator.clipboard.writeText(message.content),
        icon: CopyIcon,
      },
      {
        type: 'edit',
        onClick: (message) => handleEdit(message),
        icon: EditIcon,
      },
    ],
    assistantActions: [
      {
        type: 'copy',
        onClick: (message) => navigator.clipboard.writeText(message.content),
        icon: CopyIcon,
      },
      {
        type: 'like',
        onClick: (message) => handleLike(message.id),
        icon: LikeIcon,
      },
    ],
    loaderStatuses: ['submitted', 'streaming'],
  }}
/>
```

--------------------------------

### FileItem Basic Usage

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/FileItem/README.md

Demonstrates how to use the FileItem component with essential props like name, size, status, and mimeType. Includes an example of handling the remove action.

```tsx
import {FileItem} from '@gravity-ui/aikit';

<FileItem
  name="document.pdf"
  size={102400}
  status="loading"
  mimeType="application/pdf"
  onRemove={() => handleRemove()}
/>;
```

--------------------------------

### AttachmentPicker Usage Examples

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/organisms/AttachmentPicker/README.md

Demonstrates how to use the AttachmentPicker component for both upload-only scenarios and scenarios that include selecting files from storage. Ensure necessary imports are included.

```tsx
import {AttachmentPicker} from '@gravity-ui/aikit';

// Upload-only (e.g. image-to-text models)
<AttachmentPicker
    uploadOnly
    fileDialogProps={{
        accept: 'image/*',
        onAdd: handleFilesQueued,
        files: fileItems,
    }}
/>

// With storage selection (e.g. code interpreter)
<AttachmentPicker
    fileDialogProps={{
        onAdd: handleFilesQueued,
        files: fileItems,
    }}
    onSelectFromStorage={() => setStorageDialogOpen(true)}
/>
```

--------------------------------

### Suggestions Component with Mixed Icons and No Icons

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/Suggestions/README.md

An example combining suggestions with and without icons in a grid layout. This showcases flexibility in item configuration within the same Suggestions component.

```tsx
// Mixed icons and no icons
<Suggestions
  items={[
    {id: '1', title: 'Back', icon: 'left'},
    {id: '2', title: 'Home'},
    {id: '3', title: 'Forward', icon: 'right'},
  ]}
  layout="grid"
  onClick={(content, id) => {
    console.log('Clicked:', content, id);
  }}
/>
```

--------------------------------

### Custom Actions with Explicit Properties Example

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/BaseMessage/README.md

Shows how to define custom actions by explicitly providing a label, icon, and click handler. The 'view' property can also be set for styling.

```tsx
const actions = [
  {
    label: 'Custom Action',
    icon: <Icon data={CustomIcon} />,
    onClick: handleCustom,
    view: 'outlined',
  },
];
```

--------------------------------

### Example Playwright Component Test

Source: https://github.com/gravity-ui/aikit/blob/main/docs/TESTING.md

A basic Playwright component test written in TypeScript. It demonstrates mounting a React component and asserting its visibility and screenshot. Ensure '@playwright/experimental-ct-react' is installed.

```typescript
import {test, expect} from '@playwright/experimental-ct-react';
import {MyComponent} from '../MyComponent';

test.describe('MyComponent', () => {
    test('should render correctly', async ({mount}) => {
        const component = await mount(<MyComponent />);
        await expect(component).toBeVisible();
    });

    test('should match screenshot', async ({mount}) => {
        const component = await mount(<MyComponent />);
        await expect(component).toHaveScreenshot('my-component.png');
    });
});
```

--------------------------------

### Full PromptInput Configuration

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/organisms/PromptInput/README.md

Shows a comprehensive example of the PromptInput in full view, enabling all features like context indicator, action icons, and custom props. Ensure all necessary handlers and props are provided.

```tsx
import {PromptInput} from '@gravity-ui/aikit';

// Full view with all features
<PromptInput
  view="full"
  onSend={async (data) => {
    console.log('Sending:', data.content);
  }}
  onCancel={async () => {
    console.log('Cancelling');
  }}
  bodyProps={{
    placeholder: "Type your message..."
  }}
  headerProps={{
    showContextIndicator: true,
    contextIndicatorProps: {
      type: 'percent',
      usedContext: 24,
    }
  }}
  footerProps={{
    showSettings: true,
    showAttachment: true,
    showMicrophone: true,
    onSettingsClick: () => console.log('Settings'),
    onAttachmentClick: () => console.log('Attachment'),
    onMicrophoneClick: () => console.log('Microphone')
  }}
/>
```

--------------------------------

### CSS Variable Override Example

Source: https://github.com/gravity-ui/aikit/blob/main/docs/guidelines/readme.md

Demonstrates how to override CSS variables for component theming. This example shows custom styling applied to the component.

```css
/_ Example of how to override _/
.custom-component {
--variable-name: custom-value;
}
```

--------------------------------

### Initialize Toolset and Handle Continuations

Source: https://github.com/gravity-ui/aikit/blob/main/docs/GENUI.md

Set up the toolset and manage the continuation of tool results. `useToolset` applies tool results, while `useToolResultContinuation` handles side effects after a tool's final state.

```tsx
const {messageRendererRegistry} = useToolset<ToolPartContent>({
  toolset,
  setMessages,
});

useToolResultContinuation<ToolPartContent>({
  messages,
  onSettled: ({messages: updated}) => {
    sendTurn(updated).catch(console.warn);
  },
});

<ChatContainer
  messages={messages}
  messageListConfig={{messageRendererRegistry}}
  /* ... */
/>;
```

--------------------------------

### Storybook Variant Story Example

Source: https://github.com/gravity-ui/aikit/blob/main/docs/guidelines/storybook.md

Example of a story showcasing a specific variant of the component, such as size. Use 'args' to pass the specific prop that defines the variant.

```tsx
export const LargeSize: Story = {
  args: {
    size: 'l',
  },
  decorators: defaultDecorators,
};
```

--------------------------------

### Component Directory Structure

Source: https://github.com/gravity-ui/aikit/blob/main/docs/PROJECT_STRUCTURE.md

Illustrates the standard file and directory organization for a single UI component within the `src/components/` directory.

```bash
ComponentName/
├── ComponentName.tsx        # Implementation
├── ComponentName.scss       # Styles (optional)
├── types.ts                 # Component types (optional)
├── README.md                # Public API documentation
├── i18n/                    # Localization (optional)
│   ├── index.ts
│   ├── en.json
│   └── ru.json
├── __stories__/
│   ├── ComponentName.stories.tsx
│   └── Docs.mdx
├── __tests__/
│   ├── ComponentName.visual.spec.tsx
│   ├── helpersPlaywright.tsx
│   └── __snapshots__/
└── index.ts                 # Barrel export
```

--------------------------------

### Storybook Complex Example Story

Source: https://github.com/gravity-ui/aikit/blob/main/docs/guidelines/storybook.md

Example of a story for a complex usage scenario, such as providing custom children. Use 'args' to pass complex JSX elements or configurations.

```tsx
export const WithCustomContent: Story = {
  args: {
    children: <CustomComponent />,
  },
  decorators: defaultDecorators,
};
```

--------------------------------

### Storybook Edge Case Story Example

Source: https://github.com/gravity-ui/aikit/blob/main/docs/guidelines/storybook.md

Example of a story for an edge case, such as a disabled state. Use 'args' to set the prop that enables the edge case behavior.

```tsx
export const Disabled: Story = {
  args: {
    disabled: true,
  },
  decorators: defaultDecorators,
};
```

--------------------------------

### Storybook Playground Story Example

Source: https://github.com/gravity-ui/aikit/blob/main/docs/guidelines/storybook.md

Example of a Playground story definition. Use 'args' for default props and 'decorators' for applying wrappers or other enhancements. This story is intended for interactive testing.

```tsx
export const Playground: Story = {
  args: {
    // All configurable props
  },
  decorators: defaultDecorators,
};
```

--------------------------------

### Implement ToolFooter with Actions

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/ToolFooter/README.md

Demonstrates basic usage with multiple actions and a single action configuration.

```tsx
import {ToolFooter} from '@/components/molecules/ToolFooter';
import type {Action} from '@/types/common';

// Basic usage with multiple actions
const actions: Action[] = [
    {label: 'Accept', onClick: () => console.log('Accepted'), view: 'action'},
    {label: 'Reject', onClick: () => console.log('Rejected'), view: 'outlined'},
];

<ToolFooter
    content="Awaiting confirmation"
    actions={actions}
/>

// With single action
<ToolFooter
    content="Awaiting form submission"
    actions={[{label: 'Cancel', onClick: () => console.log('Cancelled'), view: 'outlined'}]}
/>
```

--------------------------------

### Predefined Action Types Example

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/BaseMessage/README.md

Example of defining an array of actions using predefined types like 'copy', 'edit', and 'delete'. These types map to default icons and internationalized tooltips.

```tsx
const actions = [
  {type: 'copy', onClick: handleCopy},
  {type: 'edit', onClick: handleEdit},
  {type: 'delete', onClick: handleDelete},
];
```

--------------------------------

### InputContextProvider with Mock File Upload

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/InputContext/README.md

Shows how to use the mockInputContextFileUpload utility with InputContextProvider for testing or demo purposes. This simplifies setting up a mock upload pipeline.

```tsx
import {InputContextProvider, mockInputContextFileUpload} from '@gravity-ui/aikit';

<InputContextProvider fileUpload={mockInputContextFileUpload}>...</InputContextProvider>;
```

--------------------------------

### PromptInput with Both Expandable Panels

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/organisms/PromptInput/README.md

Shows how to configure both top and bottom expandable panels simultaneously in the PromptInput component. The `isOpen` state for each panel needs to be managed externally.

```tsx
import {PromptInput} from '@gravity-ui/aikit';

// With both panels
<PromptInput
  view="full"
  onSend={handleSend}
  topPanel={{
    isOpen: isTopPanelOpen,
    children: <TopPanelContent />
  }}
  bottomPanel={{
    isOpen: isBottomPanelOpen,
    children: <BottomPanelContent />
  }}
/>
```

--------------------------------

### Storybook With State Story Example

Source: https://github.com/gravity-ui/aikit/blob/main/docs/guidelines/storybook.md

Example of a story demonstrating stateful behavior using the 'render' function. This allows for managing component state (e.g., using useState) and passing callbacks for state updates.

```tsx
export const WithValue: Story = {
  render: (args) => {
    const [value, setValue] = useState('initial value');
    return <ComponentName {...args} value={value} onChange={setValue} />;
  },
  decorators: defaultDecorators,
};
```

--------------------------------

### Storybook Default State Story Example

Source: https://github.com/gravity-ui/aikit/blob/main/docs/guidelines/storybook.md

Example of a Default story. Use 'args' to specify minimal required props for the component's default state. This story demonstrates the basic rendering of the component.

```tsx
export const Default: Story = {
  args: {
    // Minimal required props
  },
  decorators: defaultDecorators,
};
```

--------------------------------

### AIStudioChat with Welcome Screen and System Prompt

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/pages/AIStudioChat/README.md

Configure a welcome screen with customizable title and suggestions, and set a persistent system prompt for the AI assistant. This enhances user guidance and AI behavior.

```tsx
<AIStudioChat
  apiUrl="/api/chat"
  systemPrompt="You are a helpful coding assistant."
  welcomeConfig={{
    title: 'How can I help you today?',
    suggestions: [
      {id: '1', title: 'Explain async/await'},
      {id: '2', title: 'Review my code'},
    ],
  }}
  showActionsOnHover
/>
```

--------------------------------

### Content Only Usage

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/ActionPopup/README.md

Example of using ActionPopup with only content, without a header.

```APIDOC
### Content Only (No Header)

```tsx
<ActionPopup open={open} onOpenChange={setOpen} anchorElement={buttonRef}>
  <Text>Simple message without header</Text>
</ActionPopup>
```
```

--------------------------------

### WelcomeConfig Interface

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/pages/ChatContainer/README.md

Defines the structure for configuring the welcome screen displayed in the ChatContainer.

```typescript
interface WelcomeConfig {
  image?: React.ReactNode;
  title?: React.ReactNode;
  description?: React.ReactNode;
  suggestionTitle?: string;
  suggestions?: SuggestionsItem[];
  alignment?: AlignmentConfig;
  wrapText?: boolean;
  showDefaultTitle?: boolean;
  showDefaultDescription?: boolean;
  showMore?: () => void;
  showMoreText?: string;
}
```

--------------------------------

### Basic InputContextProvider Usage

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/InputContext/README.md

Demonstrates how to wrap a component tree with InputContextProvider and use the useInputContext hook to access context items and attachment content. The fileUpload prop is required to define the upload pipeline.

```tsx
import {InputContextProvider, useInputContext} from '@gravity-ui/aikit';
import {PromptInputHeader} from '@gravity-ui/aikit';

function ChatShell() {
  return (
    <InputContextProvider
      fileUpload={{
        upload: async (file) => ({
          id: crypto.randomUUID(),
          name: file.name,
          mimeType: file.type || undefined,
        }),
      }}
      fileDialogTitle="Attach files"
    >
      <PromptAttachmentsSection />
    </InputContextProvider>
  );
}

function PromptAttachmentsSection() {
  const {contextItems, attachmentContent, prepareFilesForSend, reset} = useInputContext();

  return (
    <>
      <PromptInputHeader contextItems={contextItems} />
      {attachmentContent}
    </>
  );
}
```

--------------------------------

### Left-align Text Content

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/templates/EmptyContainer/README.md

Configure the EmptyContainer to left-align its title and description. This is a common setup for standard empty states.

```tsx
<EmptyContainer
  alignment={{
    title: 'left',
    description: 'left',
  }}
/>
```

--------------------------------

### Theme CSS Import

Source: https://github.com/gravity-ui/aikit/blob/main/llms.txt

Import the common theme CSS and a specific theme (light or dark) at your application's root.

```bash
import "@gravity-ui/aikit/themes/common";
import "@gravity-ui/aikit/themes/light";
```

--------------------------------

### Run Playwright Tests

Source: https://github.com/gravity-ui/aikit/blob/main/playwright/README.md

Executes the Playwright tests. This command is used for running the visual regression tests after setup.

```shell
npm run playwright
```

--------------------------------

### Project Structure

Source: https://github.com/gravity-ui/aikit/blob/main/README.md

Illustrates the directory structure of the @gravity-ui/aikit project, categorizing components, hooks, types, utilities, and themes.

```bash
src/
├── components/
│   ├── atoms/          # Basic indivisible UI elements
│   ├── molecules/      # Simple groups of atoms
│   ├── organisms/      # Complex components with logic
│   ├── templates/      # Complete layouts
│   └── pages/          # Full integrations with data
├── hooks/              # General purpose hooks
├── types/              # TypeScript types
├── utils/              # Utilities
└── themes/             # CSS themes and variables
```

--------------------------------

### Implement ToolHeader with Actions

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/ToolHeader/README.md

Displays a basic ToolHeader with an icon, name, and a set of action buttons.

```tsx
import {ToolHeader} from '@/components/molecules/ToolHeader';
import type {Action} from '@/types/common';
import {Icon} from '@gravity-ui/uikit';
import {CircleInfo, Copy, TrashBin} from '@gravity-ui/icons';

const actions: Action[] = [
  {label: 'Copy', onClick: () => console.log('Copied'), icon: <Icon data={Copy} size={16} />},
  {
    label: 'Delete',
    onClick: () => console.log('Deleted'),
    icon: <Icon data={TrashBin} size={16} />,
  },
];

<ToolHeader
  toolIcon={<Icon data={CircleInfo} size={20} />}
  toolName="My Tool"
  actions={actions}
  status="success"
/>;
```

--------------------------------

### Tabs Component Usage

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/molecules/Tabs/README.md

Examples of implementing basic tabs, tabs with icons, tabs with delete functionality, and custom styling.

```tsx
import {Tabs} from '@/components/molecules/Tabs';
import {Icon} from '@gravity-ui/uikit';
import {ChatIcon} from '@gravity-ui/icons';

// Basic tabs
<Tabs
  items={[
    {id: '1', title: 'Chat name 1'},
    {id: '2', title: 'Chat name 2'},
    {id: '3', title: 'Chat name 3'},
  ]}
  activeId="1"
  onSelectItem={(id) => console.log('Selected:', id)}
/>

// Tabs with icons
<Tabs
  items={[
    {id: '1', title: 'Chat name 1', icon: <Icon data={ChatIcon} size={16} />},
    {id: '2', title: 'Chat name 2', icon: <Icon data={ChatIcon} size={16} />},
  ]}
  activeId="1"
  onSelectItem={(id) => console.log('Selected:', id)}
/>

// Tabs with delete functionality
<Tabs
  items={[
    {id: '1', title: 'Chat name 1'},
    {id: '2', title: 'Chat name 2'},
  ]}
  activeId="1"
  onSelectItem={(id) => console.log('Selected:', id)}
  onDeleteItem={async (id) => {
    await deleteTab(id);
  }}
  allowDelete={true}
/>

// Tabs with custom styling
<Tabs
  items={basicItems}
  activeId="1"
  allowDelete={true}
  style={{
    '--g-color-base-info-light': '#ff9100',
    '--g-color-base-info-light-hover': '#aa9100',
    '--g-color-text-info-heavy': '#ffffff',
  }}
/>
```

--------------------------------

### Importing Documentation Components

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/atoms/IntersectionContainer/__stories__/Docs.mdx

Imports necessary Storybook addons and the component stories for documentation rendering.

```javascript
import {Meta, Canvas, Controls, Markdown} from '@storybook/addon-docs';
import * as Stories from './IntersectionContainer.stories';
import Readme from '../README.md?raw';
```

--------------------------------

### Tree-shakable Import Example

Source: https://github.com/gravity-ui/aikit/blob/main/llms-full.txt

Use subpath imports for individual components to achieve smaller bundle sizes. This is preferred for production code.

```typescript
// Tree-shakable
import {Header} from '@gravity-ui/aikit/Header';
```

```typescript
// Pulls in the whole library (still tree-shakes with a modern bundler, but slower)
import {Header} from '@gravity-ui/aikit';
```

--------------------------------

### Single Part Content Type

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/organisms/AssistantMessage/README.md

Provide a single message part object for more structured content. This example uses a text part.

```tsx
content: {
    type: 'text',
    data: { text: 'Hello world' }
}
```

--------------------------------

### Implement ActionButton with various configurations

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/atoms/ActionButton/README.md

Demonstrates basic usage, button-only mode, custom tooltip placement, and disabled state for the ActionButton component.

```tsx
import {ActionButton} from '@gravity-ui/aikit';
import {Icon} from '@gravity-ui/uikit';
import {Copy} from '@gravity-ui/icons';

// Basic usage with tooltip
<ActionButton
    tooltipTitle="Copy"
    view="flat"
    onClick={handleCopy}
>
    <Icon data={Copy} size={16} />
</ActionButton>

// Without tooltip (works as regular button)
<ActionButton
    view="outlined"
    onClick={handleClick}
>
    Click me
</ActionButton>

// With custom tooltip placement
<ActionButton
    tooltipTitle="Edit"
    tooltipPlacement="bottom"
    view="flat"
    size="l"
    onClick={handleEdit}
>
    <Icon data={Pencil} size={16} />
</ActionButton>

// Disabled state
<ActionButton
    tooltipTitle="Delete"
    disabled={true}
    view="flat-secondary"
    onClick={handleDelete}
>
    <Icon data={TrashBin} size={16} />
</ActionButton>
```

--------------------------------

### Importing Documentation Components

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/atoms/DiffStat/__stories__/Docs.mdx

Imports necessary Storybook addons and local stories for rendering the component documentation.

```javascript
import {Meta, Canvas, Controls, Markdown} from '@storybook/addon-docs';
import * as Stories from './DiffStat.stories';
import Readme from '../README.md?raw';
```

--------------------------------

### ChatContainer with Custom React Elements in Welcome Screen

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/pages/ChatContainer/README.md

Demonstrates using custom React elements for the title and description in the welcome screen, allowing for rich content and complex layouts.

```tsx
// With custom React elements for title and description
<ChatContainer
  messages={[]}
  onSendMessage={handleSendMessage}
  welcomeConfig={{
    title: (
      <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
        <YourCustomIcon />
        <span>Welcome to AI Assistant</span>
      </div>
    ),
    description: (
      <div>
        <p>Get started by selecting a suggestion below or typing your own message.</p>
        <strong>Available 24/7</strong>
      </div>
    ),
    suggestions: [{id: '1', title: 'Get started'}],
  }}
/>
```

--------------------------------

### SubmitButton Usage with Size

Source: https://github.com/gravity-ui/aikit/blob/main/docs/guidelines/readme.md

Usage of the SubmitButton component specifying a size prop. This example shows how to control the button's dimensions.

```tsx
import {SubmitButton} from '@gravity-ui/aikit';

// With size
<SubmitButton
onClick={async () => handleSubmit()}
state="enabled"
size="l"
/>
```

--------------------------------

### Custom CSS Styling

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/templates/EmptyContainer/README.md

Customize the appearance of the EmptyContainer component by overriding CSS variables. This example shows how to change the background, gap, and padding.

```css
/* Example: Custom styling */
.g-root {
  --g-aikit-empty-container-background: #f5f5f5;
  --g-aikit-empty-container-content-gap: 32px;
  --g-aikit-empty-container-padding: 24px;
}
```

--------------------------------

### ActionButton Storybook Configuration

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/atoms/ActionButton/__stories__/Docs.mdx

Imports necessary Storybook addons and the component stories for documentation rendering.

```javascript
import {Meta, Canvas, Controls, Markdown} from '@storybook/addon-docs';
import * as Stories from './ActionButton.stories';
import Readme from '../README.md?raw';
```

--------------------------------

### Basic Usage of AIAgentContext

Source: https://github.com/gravity-ui/aikit/blob/main/src/utils/aiAgentContext/README.md

Demonstrates how to set up the AIAgentContextProvider, register data using AIData components, and retrieve context for LLM prompts using useAIAgentContext and buildAIContextSystemPrompt.

```tsx
import {
  AIAgentContextProvider,
  AIData,
  buildAIContextSystemPrompt,
  useAIAgentContext,
} from '@gravity-ui/aikit/utils/aiAgentContext';

function ProductPage({product, user}) {
  return (
    <AIAgentContextProvider>
      <AIData label="Current user" data={user} />
      <AIData label="Current product" data={product} />
      <ChatWithContext />
    </AIAgentContextProvider>
  );
}

function ChatWithContext() {
  const {getData} = useAIAgentContext();

  const handleSend = async (message: string) => {
    const systemPrompt = buildAIContextSystemPrompt(getData());
    await sendToLLM({message, systemPrompt});
  };

  return <ChatContainer onSendMessage={handleSend} />;
}
```

--------------------------------

### Customizing ChatContainer Texts

Source: https://github.com/gravity-ui/aikit/blob/main/src/components/pages/ChatContainer/README.md

Example of how to use the `texts` prop to override specific user-visible strings in the ChatContainer component. This allows for easy localization and branding.

```tsx
<ChatContainer
  messages={messages}
  onSendMessage={onSendMessage}
  texts={{
    headerTitle: 'My AI',
    promptPlaceholder: 'Ask anything...',
    submitSendTooltip: 'Send',
    disclaimerText: 'AI may be wrong.',
  }}
/>
```