# Components 49 components organized by Atomic Design level. Each component lives in `src/components///` and ships with its own README and Storybook stories. Each component also has a dedicated subpath export for tree-shaking — `import {ComponentName} from '@gravity-ui/aikit/ComponentName'` — except `AIStudioChat` (use the main entry). ## Atoms (16) | Component | Description | | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | | [ActionButton](../components/atoms/ActionButton.md) | Button with integrated tooltip (Button + ActionTooltip from Gravity UI). | | [Alert](../components/atoms/Alert.md) | Alert message with type indicator and optional button. | | [ChatDate](../components/atoms/ChatDate.md) | Formatted date with time and locale support. | | [ContextIndicator](../components/atoms/ContextIndicator.md) | Circular progress indicator for context usage (0–100%). | | [ContextItem](../components/atoms/ContextItem.md) | Label for rendering a context chip. | | [DiffStat](../components/atoms/DiffStat.md) | Diff statistics — added/deleted line counts. | | [Disclaimer](../components/atoms/Disclaimer.md) | Informational or warning message block. | | [FileIcon](../components/atoms/FileIcon.md) | Icon for a file based on MIME type or extension. | | InlineCitation | Citation link rendered inline in markdown. | | [IntersectionContainer](../components/atoms/IntersectionContainer.md) | Intersection Observer wrapper (used by `MessageList` for infinite scroll). | | [Loader](../components/atoms/Loader.md) | Loading-state indicator. | | [MarkdownRenderer](../components/atoms/MarkdownRenderer.md) | Yandex Flavored Markdown (YFM) → HTML renderer. | | [MessageBalloon](../components/atoms/MessageBalloon.md) | Visual wrapper for a user message. | | [Shimmer](../components/atoms/Shimmer.md) | Shimmer animation overlay for loading state. | | [SubmitButton](../components/atoms/SubmitButton.md) | Submit button with send/cancel state switching. | | [ToolIndicator](../components/atoms/ToolIndicator.md) | Tool-execution status icon. | ## Molecules (19) | Component | Description | | ---------------------------------------------------------------------------- | ----------------------------------------------------------- | | [ActionPopup](../components/molecules/ActionPopup.md) | Anchored popup container for action-button content. | | [BaseMessage](../components/molecules/BaseMessage.md) | Base wrapper with support for action buttons. | | [ButtonGroup](../components/molecules/ButtonGroup.md) | Wrapper for a button group with orientation support. | | [FeedbackForm](../components/molecules/FeedbackForm.md) | Reusable feedback form with reason selection and comment. | | [FileDropZone](../components/molecules/FileDropZone.md) | Drag-and-drop area with hidden file input (native HTML5). | | [FileItem](../components/molecules/FileItem.md) | File row: icon, name, size, status, remove button. | | [InputContext](../components/molecules/InputContext.md) | React context for prompt-input attachments and chips. | | [PromptInputBody](../components/molecules/PromptInputBody.md) | Textarea body for prompt input with auto-grow. | | [PromptInputFooter](../components/molecules/PromptInputFooter.md) | Footer with action icons and submit button. | | [PromptInputHeader](../components/molecules/PromptInputHeader.md) | Header with context items / context indicator. | | [PromptInputPanel](../components/molecules/PromptInputPanel.md) | Panel container for custom prompt content. | | [RatingBlock](../components/molecules/RatingBlock.md) | Rating block with title and star rating. | | [StarRating](../components/molecules/StarRating.md) | 1–5 star rating component. | | [Suggestions](../components/molecules/Suggestions.md) | Clickable suggestion buttons in grid or list layout. | | [Tabs](../components/molecules/Tabs.md) | Section tabs with optional delete (built on uikit `Label`). | | [ToolFooter](../components/molecules/ToolFooter.md) | Tool-message footer with action buttons and status. | | [ToolHeader](../components/molecules/ToolHeader.md) | Tool-message header with icon, name, actions, indicators. | | [ToolStatus](../components/molecules/ToolStatus.md) | Tool-status indicator with localized text. | ## Organisms (9) | Component | Description | | -------------------------------------------------------------------------- | -------------------------------------------------------------------------- | | [AssistantMessage](../components/organisms/AssistantMessage.md) | Assistant message with multi-part content and custom renderers. | | [AttachmentPicker](../components/organisms/AttachmentPicker.md) | Paperclip button that opens the file upload dialog. | | [FileUploadDialog](../components/organisms/FileUploadDialog.md) | Dialog with drag-and-drop and queued/uploaded files list. | | [Header](../components/organisms/Header.md) | Chat header with navigation and actions. | | [MessageList](../components/organisms/MessageList.md) | Message list with custom renderer registry support. | | [PromptInput](../components/organisms/PromptInput.md) | Flexible chat input — simple/full views, panels, suggestions, attachments. | | [ThinkingMessage](../components/organisms/ThinkingMessage.md) | AI thinking process with collapsible content and status. | | [ToolMessage](../components/organisms/ToolMessage.md) | Tool message with automatic expand/collapse and status behavior. | | [UserMessage](../components/organisms/UserMessage.md) | User message renderer. | ## Templates (3) | Component | Description | | ---------------------------------------------------------------------- | --------------------------------------------------------------- | | [ChatContent](../components/templates/ChatContent.md) | Chat content container — empty state vs message list switching. | | [EmptyContainer](../components/templates/EmptyContainer.md) | Welcome screen with image, title, description, suggestions. | | [History](../components/templates/History.md) | Chat history popup — list, search, grouping, actions. | ## Pages (2) | Component | Description | | ---------------------------------------------------------------- | ------------------------------------------------------------------------- | | [AIStudioChat](../components/pages/AIStudioChat.md) | Ready-to-use chat with built-in OpenAI streaming — needs only an API URL. | | [ChatContainer](../components/pages/ChatContainer.md) | Fully assembled chat — integrates Header, ChatContent, and History. |