@gravity-ui/aikit 2.24.1-beta.883c85d04b93d8521b2733baa3e86da20249b4e7.0 → 2.25.0

package/build/cjs/types/messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"messages.js","sourceRoot":"../../../src","sources":["types/messages.ts"],"names":[],"mappings":";;;AAmDA,IAAY,qBAOX;AAPD,WAAY,qBAAqB;IAC7B,sCAAa,CAAA;IACb,sCAAa,CAAA;IACb,wCAAe,CAAA;IACf,sCAAa,CAAA;IACb,4CAAmB,CAAA;IACnB,0CAAiB,CAAA;AACrB,CAAC,EAPW,qBAAqB,qCAArB,qBAAqB,QAOhC","sourcesContent":["import type React from 'react';\n\nimport type {ButtonView, PopupPlacement} from '@gravity-ui/uikit';\n\nimport {ActionConfig} from './common';\nimport {ToolMessageProps} from './tool';\n\n/**\n * Context object passed to popup content generator function\n */\nexport interface ActionPopupContext {\n    /** Update popup content without closing it */\n    setContent: (content: React.ReactNode) => void;\n    /** Update popup title dynamically */\n    setTitle: (title: string | undefined) => void;\n    /** Update popup subtitle dynamically */\n    setSubtitle: (subtitle: string | undefined) => void;\n    /** Programmatically close the popup */\n    closePopup: () => void;\n}\n\n/**\n * Configuration for action popup\n */\nexport interface ActionPopupConfig<TMessage> {\n    /** Function that generates popup content */\n    getContent: (message: TMessage, context: ActionPopupContext) => React.ReactNode;\n    /** Optional popup title (can be overridden by actionPopupProps) */\n    title?: string;\n    /** Optional popup subtitle (can be overridden by actionPopupProps) */\n    subtitle?: string;\n    /** Optional popup placement (can be overridden by actionPopupProps) */\n    placement?: PopupPlacement;\n}\n\nexport type BaseMessageActionConfig<TMessage = unknown> = ActionConfig & {\n    /** Optional popup configuration for this action */\n    popup?: ActionPopupConfig<TMessage>;\n};\n\n/**\n * BaseMessage action can be either:\n * - BaseMessageActionConfig object with properties (including type for default icons)\n * - React.ReactNode for fully custom content\n */\nexport type BaseMessageAction<TMessage = unknown> =\n    | BaseMessageActionConfig<TMessage>\n    | React.ReactNode;\n\nexport type UserRating = 'like' | 'dislike';\n\nexport enum BaseMessageActionType {\n    Copy = 'copy',\n    Edit = 'edit',\n    Retry = 'retry',\n    Like = 'like',\n    Dislike = 'dislike',\n    Delete = 'delete',\n}\n\n/**\n * Default action descriptor for message action buttons.\n * Generic over the message type to provide typed onClick handler.\n */\nexport type DefaultMessageAction<TMessage> = {\n    type?: string;\n    onClick: (message: TMessage) => void;\n    icon?: React.ReactNode;\n    /**\n     * Arbitrary button content (text, badges, or any ReactNode).\n     * Takes precedence over `icon` when both are provided.\n     * Can be a static ReactNode or a render function that receives the message,\n     * allowing dynamic content based on message data (e.g. token count from metadata).\n     */\n    children?: React.ReactNode | ((message: TMessage) => React.ReactNode);\n    label?: string;\n    view?: ButtonView;\n    /** Optional popup configuration for this action */\n    popup?: ActionPopupConfig<TMessage>;\n};\n\n/**\n * React component used to render extra contextual info for a message\n * (e.g. token count, latency). Receives the message as a `message` prop.\n */\nexport type MessageExtraInfoComponent<TMessage> = React.ComponentType<{message: TMessage}>;\n\nexport type BaseMessageProps<TMessage = unknown> = {\n    children: React.ReactNode;\n    role: TMessageRole;\n    actions?: BaseMessageAction<TMessage>[];\n    /** Extra info node rendered alongside the action buttons (e.g. token count). */\n    extraInfo?: React.ReactNode;\n    userRating?: UserRating;\n    timestamp?: string;\n    showTimestamp?: boolean;\n    showActionsOnHover?: boolean;\n    className?: string;\n    qa?: string;\n    /** Callback when action with popup config is clicked */\n    onActionPopup?: (action: BaseMessageActionConfig<TMessage>, anchorElement: HTMLElement) => void;\n};\n\nexport type TMessageMetadata = Record<string, unknown>;\n\n/** Context passed when a message is sent via suggestion click */\nexport type TSuggestionContext = {\n    id?: string;\n    data?: Record<string, unknown>;\n};\n\nexport type TSubmitData = {\n    content: string;\n    attachments?: File[];\n    metadata?: TMessageMetadata;\n    /** Set when the message is sent by clicking a suggestion */\n    suggestion?: TSuggestionContext;\n};\n\nexport type TMessageRole = 'user' | 'assistant' | 'system';\n\nexport type TMessageContent<Type extends string = string, Data = unknown> = {\n    id?: string;\n    type: Type;\n    data: Data;\n};\n\nexport type TextMessageContentData = {\n    text: string;\n};\n\nexport type TextMessageContent = TMessageContent<'text', TextMessageContentData>;\n\nexport type ThinkingMessageContentData = {\n    title?: string;\n    content: string | string[];\n    status: 'thinking' | 'thought';\n    defaultExpanded?: boolean;\n    showStatusIndicator?: boolean;\n    onCopyClick?: () => void;\n    enabledCopy?: boolean;\n    className?: string;\n    qa?: string;\n};\n\nexport type ThinkingMessageContent = TMessageContent<'thinking', ThinkingMessageContentData>;\n\nexport type ToolMessageContentData = ToolMessageProps & {\n    /** MCP arguments, pretty-printed JSON. Read by AIStudioChat's tool renderer. */\n    mcpRequest?: string;\n    /** MCP output (or error), pretty-printed JSON. Read by AIStudioChat's tool renderer. */\n    mcpResponse?: string;\n};\n\nexport type ToolMessageContent = TMessageContent<'tool', ToolMessageContentData>;\n\nexport type TDefaultMessageContent =\n    | TextMessageContent\n    | ThinkingMessageContent\n    | ToolMessageContent;\n\nexport type TMessageContentUnion<TCustomMessageContent extends TMessageContent = never> =\n    | TDefaultMessageContent\n    | TCustomMessageContent;\n\nexport type TAssistantMessageContent<TCustomMessageContent extends TMessageContent = never> =\n    | string\n    | TMessageContentUnion<TCustomMessageContent>\n    | TMessageContentUnion<TCustomMessageContent>[];\n\nexport type TBaseMessage<Metadata = TMessageMetadata> = Pick<\n    BaseMessageProps,\n    'actions' | 'timestamp'\n> & {\n    id?: string;\n    error?: unknown;\n    metadata?: Metadata;\n};\n\nexport type FileAttachment = {\n    id: string;\n    name: string;\n    mimeType?: string;\n};\n\nexport type TUserMessage<Metadata = TMessageMetadata> = TBaseMessage<Metadata> & {\n    role: 'user';\n    content: string;\n    format?: 'plain' | 'markdown';\n    avatarUrl?: string;\n    /** Base64 data URLs or regular image URLs attached to the message */\n    images?: string[];\n    /** File attachments sent with this message */\n    fileAttachments?: FileAttachment[];\n};\n\nexport type TAssistantMessage<\n    TCustomMessageContent extends TMessageContent = never,\n    Metadata = TMessageMetadata,\n> = TBaseMessage<Metadata> & {\n    role: 'assistant';\n    content: TAssistantMessageContent<TCustomMessageContent>;\n    userRating?: UserRating;\n};\n\nexport type TChatMessage<\n    TCustomMessageContent extends TMessageContent = never,\n    Metadata = TMessageMetadata,\n> = TUserMessage<Metadata> | TAssistantMessage<TCustomMessageContent, Metadata>;\n"]}
+{"version":3,"file":"messages.js","sourceRoot":"../../../src","sources":["types/messages.ts"],"names":[],"mappings":";;;AAoDA,IAAY,qBAOX;AAPD,WAAY,qBAAqB;IAC7B,sCAAa,CAAA;IACb,sCAAa,CAAA;IACb,wCAAe,CAAA;IACf,sCAAa,CAAA;IACb,4CAAmB,CAAA;IACnB,0CAAiB,CAAA;AACrB,CAAC,EAPW,qBAAqB,qCAArB,qBAAqB,QAOhC","sourcesContent":["import type React from 'react';\n\nimport type {ButtonView, PopupPlacement} from '@gravity-ui/uikit';\n\nimport {ActionConfig} from './common';\nimport type {PromptSelection} from './promptCommands';\nimport {ToolMessageProps} from './tool';\n\n/**\n * Context object passed to popup content generator function\n */\nexport interface ActionPopupContext {\n    /** Update popup content without closing it */\n    setContent: (content: React.ReactNode) => void;\n    /** Update popup title dynamically */\n    setTitle: (title: string | undefined) => void;\n    /** Update popup subtitle dynamically */\n    setSubtitle: (subtitle: string | undefined) => void;\n    /** Programmatically close the popup */\n    closePopup: () => void;\n}\n\n/**\n * Configuration for action popup\n */\nexport interface ActionPopupConfig<TMessage> {\n    /** Function that generates popup content */\n    getContent: (message: TMessage, context: ActionPopupContext) => React.ReactNode;\n    /** Optional popup title (can be overridden by actionPopupProps) */\n    title?: string;\n    /** Optional popup subtitle (can be overridden by actionPopupProps) */\n    subtitle?: string;\n    /** Optional popup placement (can be overridden by actionPopupProps) */\n    placement?: PopupPlacement;\n}\n\nexport type BaseMessageActionConfig<TMessage = unknown> = ActionConfig & {\n    /** Optional popup configuration for this action */\n    popup?: ActionPopupConfig<TMessage>;\n};\n\n/**\n * BaseMessage action can be either:\n * - BaseMessageActionConfig object with properties (including type for default icons)\n * - React.ReactNode for fully custom content\n */\nexport type BaseMessageAction<TMessage = unknown> =\n    | BaseMessageActionConfig<TMessage>\n    | React.ReactNode;\n\nexport type UserRating = 'like' | 'dislike';\n\nexport enum BaseMessageActionType {\n    Copy = 'copy',\n    Edit = 'edit',\n    Retry = 'retry',\n    Like = 'like',\n    Dislike = 'dislike',\n    Delete = 'delete',\n}\n\n/**\n * Default action descriptor for message action buttons.\n * Generic over the message type to provide typed onClick handler.\n */\nexport type DefaultMessageAction<TMessage> = {\n    type?: string;\n    onClick: (message: TMessage) => void;\n    icon?: React.ReactNode;\n    /**\n     * Arbitrary button content (text, badges, or any ReactNode).\n     * Takes precedence over `icon` when both are provided.\n     * Can be a static ReactNode or a render function that receives the message,\n     * allowing dynamic content based on message data (e.g. token count from metadata).\n     */\n    children?: React.ReactNode | ((message: TMessage) => React.ReactNode);\n    label?: string;\n    view?: ButtonView;\n    /** Optional popup configuration for this action */\n    popup?: ActionPopupConfig<TMessage>;\n};\n\n/**\n * React component used to render extra contextual info for a message\n * (e.g. token count, latency). Receives the message as a `message` prop.\n */\nexport type MessageExtraInfoComponent<TMessage> = React.ComponentType<{message: TMessage}>;\n\nexport type BaseMessageProps<TMessage = unknown> = {\n    children: React.ReactNode;\n    role: TMessageRole;\n    actions?: BaseMessageAction<TMessage>[];\n    /** Extra info node rendered alongside the action buttons (e.g. token count). */\n    extraInfo?: React.ReactNode;\n    userRating?: UserRating;\n    timestamp?: string;\n    showTimestamp?: boolean;\n    showActionsOnHover?: boolean;\n    className?: string;\n    qa?: string;\n    /** Callback when action with popup config is clicked */\n    onActionPopup?: (action: BaseMessageActionConfig<TMessage>, anchorElement: HTMLElement) => void;\n};\n\nexport type TMessageMetadata = Record<string, unknown>;\n\n/** Context passed when a message is sent via suggestion click */\nexport type TSuggestionContext = {\n    id?: string;\n    data?: Record<string, unknown>;\n};\n\nexport type TSubmitData = {\n    /** Snapshot of commands and context selected for this message. */\n    selections?: PromptSelection[];\n    content: string;\n    attachments?: File[];\n    metadata?: TMessageMetadata;\n    /** Set when the message is sent by clicking a suggestion */\n    suggestion?: TSuggestionContext;\n};\n\nexport type TMessageRole = 'user' | 'assistant' | 'system';\n\nexport type TMessageContent<Type extends string = string, Data = unknown> = {\n    id?: string;\n    type: Type;\n    data: Data;\n};\n\nexport type TextMessageContentData = {\n    text: string;\n};\n\nexport type TextMessageContent = TMessageContent<'text', TextMessageContentData>;\n\nexport type ThinkingMessageContentData = {\n    title?: string;\n    content: string | string[];\n    status: 'thinking' | 'thought';\n    defaultExpanded?: boolean;\n    showStatusIndicator?: boolean;\n    onCopyClick?: () => void;\n    enabledCopy?: boolean;\n    className?: string;\n    qa?: string;\n};\n\nexport type ThinkingMessageContent = TMessageContent<'thinking', ThinkingMessageContentData>;\n\nexport type ToolMessageContentData = ToolMessageProps & {\n    /** MCP arguments, pretty-printed JSON. Read by AIStudioChat's tool renderer. */\n    mcpRequest?: string;\n    /** MCP output (or error), pretty-printed JSON. Read by AIStudioChat's tool renderer. */\n    mcpResponse?: string;\n};\n\nexport type ToolMessageContent = TMessageContent<'tool', ToolMessageContentData>;\n\nexport type TDefaultMessageContent =\n    | TextMessageContent\n    | ThinkingMessageContent\n    | ToolMessageContent;\n\nexport type TMessageContentUnion<TCustomMessageContent extends TMessageContent = never> =\n    | TDefaultMessageContent\n    | TCustomMessageContent;\n\nexport type TAssistantMessageContent<TCustomMessageContent extends TMessageContent = never> =\n    | string\n    | TMessageContentUnion<TCustomMessageContent>\n    | TMessageContentUnion<TCustomMessageContent>[];\n\nexport type TBaseMessage<Metadata = TMessageMetadata> = Pick<\n    BaseMessageProps,\n    'actions' | 'timestamp'\n> & {\n    id?: string;\n    error?: unknown;\n    metadata?: Metadata;\n};\n\nexport type FileAttachment = {\n    id: string;\n    name: string;\n    mimeType?: string;\n};\n\nexport type TUserMessage<Metadata = TMessageMetadata> = TBaseMessage<Metadata> & {\n    role: 'user';\n    content: string;\n    format?: 'plain' | 'markdown';\n    avatarUrl?: string;\n    /** Base64 data URLs or regular image URLs attached to the message */\n    images?: string[];\n    /** File attachments sent with this message */\n    fileAttachments?: FileAttachment[];\n};\n\nexport type TAssistantMessage<\n    TCustomMessageContent extends TMessageContent = never,\n    Metadata = TMessageMetadata,\n> = TBaseMessage<Metadata> & {\n    role: 'assistant';\n    content: TAssistantMessageContent<TCustomMessageContent>;\n    userRating?: UserRating;\n};\n\nexport type TChatMessage<\n    TCustomMessageContent extends TMessageContent = never,\n    Metadata = TMessageMetadata,\n> = TUserMessage<Metadata> | TAssistantMessage<TCustomMessageContent, Metadata>;\n"]}

package/build/cjs/types/promptCommands.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+/** Serializable application data attached to a single submitted draft. */
+export type PromptSelection = {
+    sourceId: string;
+    id: string;
+    title: string;
+    data?: Record<string, unknown>;
+};
+export type PromptCommandItem = {
+    id: string;
+    title: string;
+    description?: string;
+    icon?: ReactNode;
+    keywords?: string[];
+    disabled?: boolean;
+    data?: Record<string, unknown>;
+    /** Replaces the active trigger and query. Omit to remove them. */
+    insertText?: string;
+    /** Keep this item in the draft and submit it. Defaults to true. */
+    keepSelected?: boolean;
+};
+export type PromptCommandSource = {
+    id: string;
+    title: string;
+    trigger?: '/' | '@';
+    /** Also expose a button opening this source. */
+    buttonLabel?: string;
+    items?: readonly PromptCommandItem[];
+    /** Overrides items; the application owns remote filtering. */
+    getItems?: (query: string, options: {
+        signal: AbortSignal;
+    }) => Promise<readonly PromptCommandItem[]>;
+    /** Called before committing the selection. Throw to keep the picker open. */
+    onSelect?: (item: PromptCommandItem, context: {
+        query: string;
+        origin: 'input' | 'button';
+    }) => void;
+};
+export type PromptCommandsConfig = {
+    sources: readonly PromptCommandSource[];
+    /** Controlled selections. Reset these when switching conversations. */
+    selections?: readonly PromptSelection[];
+    onSelectionsChange?: (selections: PromptSelection[]) => void;
+};

package/build/cjs/types/promptCommands.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=promptCommands.js.map

package/build/cjs/types/promptCommands.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"promptCommands.js","sourceRoot":"../../../src","sources":["types/promptCommands.ts"],"names":[],"mappings":"","sourcesContent":["import type {ReactNode} from 'react';\n\n/** Serializable application data attached to a single submitted draft. */\nexport type PromptSelection = {\n    sourceId: string;\n    id: string;\n    title: string;\n    data?: Record<string, unknown>;\n};\n\nexport type PromptCommandItem = {\n    id: string;\n    title: string;\n    description?: string;\n    icon?: ReactNode;\n    keywords?: string[];\n    disabled?: boolean;\n    data?: Record<string, unknown>;\n    /** Replaces the active trigger and query. Omit to remove them. */\n    insertText?: string;\n    /** Keep this item in the draft and submit it. Defaults to true. */\n    keepSelected?: boolean;\n};\n\nexport type PromptCommandSource = {\n    id: string;\n    title: string;\n    trigger?: '/' | '@';\n    /** Also expose a button opening this source. */\n    buttonLabel?: string;\n    items?: readonly PromptCommandItem[];\n    /** Overrides items; the application owns remote filtering. */\n    getItems?: (\n        query: string,\n        options: {signal: AbortSignal},\n    ) => Promise<readonly PromptCommandItem[]>;\n    /** Called before committing the selection. Throw to keep the picker open. */\n    onSelect?: (\n        item: PromptCommandItem,\n        context: {query: string; origin: 'input' | 'button'},\n    ) => void;\n};\n\nexport type PromptCommandsConfig = {\n    sources: readonly PromptCommandSource[];\n    /** Controlled selections. Reset these when switching conversations. */\n    selections?: readonly PromptSelection[];\n    onSelectionsChange?: (selections: PromptSelection[]) => void;\n};\n"]}

package/build/docs/components/molecules/PromptInputBody.md

@@ -49,21 +49,22 @@ import {PromptInputBody} from '@gravity-ui/aikit';
 
 ## Props
 
-| Prop            | Type                                                        | Required | Default                       | Description                                    |
-| --------------- | ----------------------------------------------------------- | -------- | ----------------------------- | ---------------------------------------------- |
-| `value`         | `string`                                                    | -        | -                             | Value of the textarea                          |
-| `placeholder`   | `string`                                                    | -        | -                             | Placeholder text                               |
-| `maxLength`     | `number`                                                    | -        | -                             | Maximum length of input                        |
-| `size`          | `TextAreaProps['size']`                                     | -        | `'l'` (`'xl'` in mobile mode) | Size of the textarea                           |
-| `minRows`       | `number`                                                    | -        | `1`                           | Minimum number of rows                         |
-| `maxRows`       | `number`                                                    | -        | `15`                          | Maximum number of rows                         |
-| `autoFocus`     | `boolean`                                                   | -        | `false`                       | Auto focus on mount                            |
-| `disabledInput` | `boolean`                                                   | -        | `false`                       | Disabled state for input                       |
-| `onChange`      | `(value: string) => void`                                   | -        | -                             | Change handler                                 |
-| `onKeyDown`     | `(event: React.KeyboardEvent<HTMLTextAreaElement>) => void` | -        | -                             | Key down handler                               |
-| `children`      | `ReactNode`                                                 | -        | -                             | Custom content to replace the default textarea |
-| `className`     | `string`                                                    | -        | -                             | Additional CSS class                           |
-| `qa`            | `string`                                                    | -        | -                             | QA/test identifier                             |
+| Prop            | Type                                                        | Required | Default                       | Description                                                     |
+| --------------- | ----------------------------------------------------------- | -------- | ----------------------------- | --------------------------------------------------------------- |
+| `controlProps`  | `TextAreaProps['controlProps']`                             | -        | -                             | Native textarea attributes, including ARIA and selection events |
+| `value`         | `string`                                                    | -        | -                             | Value of the textarea                                           |
+| `placeholder`   | `string`                                                    | -        | -                             | Placeholder text                                                |
+| `maxLength`     | `number`                                                    | -        | -                             | Maximum length of input                                         |
+| `size`          | `TextAreaProps['size']`                                     | -        | `'l'` (`'xl'` in mobile mode) | Size of the textarea                                            |
+| `minRows`       | `number`                                                    | -        | `1`                           | Minimum number of rows                                          |
+| `maxRows`       | `number`                                                    | -        | `15`                          | Maximum number of rows                                          |
+| `autoFocus`     | `boolean`                                                   | -        | `false`                       | Auto focus on mount                                             |
+| `disabledInput` | `boolean`                                                   | -        | `false`                       | Disabled state for input                                        |
+| `onChange`      | `(value: string) => void`                                   | -        | -                             | Change handler                                                  |
+| `onKeyDown`     | `(event: React.KeyboardEvent<HTMLTextAreaElement>) => void` | -        | -                             | Key down handler                                                |
+| `children`      | `ReactNode`                                                 | -        | -                             | Custom content to replace the default textarea                  |
+| `className`     | `string`                                                    | -        | -                             | Additional CSS class                                            |
+| `qa`            | `string`                                                    | -        | -                             | QA/test identifier                                              |
 
 ## Styling
 

package/build/docs/components/organisms/PromptInput.md

@@ -4,6 +4,8 @@ A flexible input component for chat interfaces with support for simple and full
 
 ## Features
 
+- **Application Commands**: Trigger-based and button-based selection with async search and per-message data
+
 - **Two View Modes**: Simple view with minimal UI, Full view with header and footer
 - **Expandable Panels**: Top and bottom panels with smooth animation for additional content
 - **Context Indicator**: Show usage context with percentage or number display
@@ -116,6 +118,7 @@ import {PromptInput} from '@gravity-ui/aikit';
 | Prop               | Type                                   | Required | Default    | Description                                                                                     |
 | ------------------ | -------------------------------------- | -------- | ---------- | ----------------------------------------------------------------------------------------------- |
 | `view`             | `'full' \| 'simple'`                   | -        | `'simple'` | View variant                                                                                    |
+| `commands`         | `PromptCommandsConfig`                 | -        | -          | Application command and context sources                                                         |
 | `onSend`           | `(data: TSubmitData) => Promise<void>` | ✓        | -          | Callback when message is sent                                                                   |
 | `onCancel`         | `() => Promise<void>`                  | -        | -          | Callback when sending is cancelled                                                              |
 | `disabled`         | `boolean`                              | -        | `false`    | Disabled state                                                                                  |
@@ -351,3 +354,151 @@ function MyComponent({isOpen}) {
 - `shouldRender` (boolean): Whether the element should be rendered in DOM
 
 The hook is particularly useful when you have CSS transitions that need to complete before removing elements from DOM.
+
+## Commands and context
+
+Pass `commands` directly to `PromptInput`, or through `promptInputProps` on
+`ChatContainer` and `AIStudioChat`. Sources are owned by the application and are
+scoped to this input. Use unique source IDs and at most one source per trigger.
+Item IDs must be unique within a source.
+
+```tsx
+import {PromptInput, type PromptCommandSource} from '@gravity-ui/aikit';
+
+const sources: PromptCommandSource[] = [
+  {
+    id: 'commands',
+    title: 'Commands',
+    trigger: '/',
+    items: [
+      {id: 'review', title: '/review', data: {mode: 'review'}},
+      {
+        id: 'summary',
+        title: '/summary',
+        insertText: 'Summarize this document.',
+        keepSelected: false,
+      },
+    ],
+  },
+  {
+    id: 'documents',
+    title: 'Document context',
+    trigger: '@',
+    buttonLabel: 'Add context',
+    getItems: async (query, {signal}) => {
+      const response = await fetch(`/api/documents?q=${encodeURIComponent(query)}`, {signal});
+      if (!response.ok) throw new Error('Could not search documents');
+      return response.json();
+    },
+  },
+];
+
+<PromptInput
+  commands={{sources}}
+  onSend={async ({content, selections}) => {
+    const response = await fetch('/api/chat', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({message: content, context: selections}),
+    });
+    if (!response.ok) throw new Error('Could not send message');
+  }}
+/>;
+```
+
+### Configuration
+
+| Field                | Type                                 | Default        | Description                                    |
+| -------------------- | ------------------------------------ | -------------- | ---------------------------------------------- |
+| `sources`            | `readonly PromptCommandSource[]`     | Required       | Available command and context sources          |
+| `selections`         | `readonly PromptSelection[]`         | Internal state | Controlled draft selections                    |
+| `onSelectionsChange` | `(items: PromptSelection[]) => void` | —              | Selection, removal and successful-send updates |
+
+Each source accepts `id`, `title`, optional `/` or `@` `trigger`, optional
+`buttonLabel`, `items`, `getItems(query, {signal})`, and synchronous
+`onSelect(item, {query, origin})`. `getItems` takes precedence over `items` and
+owns filtering; static items are filtered by title, description and keywords.
+Keep source objects stable while searching. The search signal is aborted when
+the query/source changes or the picker closes. Stale results are ignored even
+when the application does not honor cancellation.
+
+Items accept `id`, `title`, `description`, `icon`, `keywords`, `disabled`, `data`,
+`insertText` and `keepSelected`. By default, a selection is shown as a removable
+chip and passed to `onSend` as `{sourceId, id, title, data}`. Selecting the same
+source/item replaces its previous selection. Different items may coexist.
+`data` should contain serializable application data, not UI nodes or credentials.
+
+`insertText` replaces the active token, preserving surrounding text. With
+`keepSelected: false`, the item only inserts text and/or invokes `onSelect`.
+Choosing context via a button preserves the input text. Throwing from `onSelect`
+keeps the picker open; asynchronous preparation belongs in `getItems` or the
+send handler. Trigger characters inside URLs and email addresses do not open
+the picker. The first matching source owns a trigger.
+
+### Programmatic submission
+
+Pass an `apiRef` to access `PromptInputHandle`. `submit(data?)` uses the same
+submission lifecycle as the send button and includes current attachments and
+command selections. With no argument it submits the current text. `ChatContainer`
+uses this method for welcome suggestions, preserving suggestion metadata.
+`clearFailedDraft()` clears an unchanged restored draft after a successful external
+retry and returns whether it was cleared. `AIStudioChat` uses it to reconcile Retry
+without erasing a newer draft.
+
+### Sending and lifecycle
+
+`onSend` receives a snapshot of the current selection array. Return `false` to
+cancel or reject to report an error. Text, attachments and selections clear immediately,
+including when the send callback awaits a complete stream. A failed or cancelled
+send restores the snapshot only if the draft and conversation have not changed.
+New typing and selections are never overwritten by a late result. Treat selection
+objects and their data as immutable. Text is required to submit, including when
+only a command or context has been selected.
+
+`ChatContainer` resets uncontrolled selections and closes pending searches on
+conversation changes, independently of autofocus settings. Active-conversation
+deletion also resets the command state. `AIStudioChat` preserves the draft when
+it automatically creates a conversation for the first send.
+
+Applications using controlled `selections` must reset or restore them with their
+own conversation state. A standalone `PromptInput` accepts `commandsResetKey`
+(`string | number`): changing it clears only uncontrolled command state without
+moving focus. `ChatContainer` derives this key from conversation identity and
+explicit new/select actions unless the application supplies its own key.
+
+In `AIStudioChat`, `onBeforeSend` receives all submit data, including selections.
+Use `transformRequest(request, data)` to map them into any field of the final
+request body after file processing. Return a new request object, or `false` to
+cancel. No command data is sent automatically. Retries reuse the serialized
+request from the original send, without rerunning the mapping callbacks.
+
+```tsx
+const transformRequest = (request, {selections = []}) => ({
+  ...request,
+  metadata: {
+    commands: selections.filter((item) => item.sourceId === 'commands'),
+  },
+  retrieval: {
+    documents: selections.filter((item) => item.sourceId === 'documents'),
+  },
+});
+```
+
+See **Commands And Context** in Storybook for a complete `ChatContainer`
+integration with request inspection, controlled selections, simulated failures
+and both input layouts.
+
+### Picker keyboard support
+
+Arrow keys navigate available options; Enter selects without sending the
+message. Escape dismisses suggestions until the text changes. Tab closes the
+picker and moves focus normally. Shift+Enter remains a newline. IME composition
+never submits or selects a command.
+
+### Command picker styling
+
+The picker uses `--g-spacing-1`, `--g-spacing-2`, `--g-spacing-3`,
+`--g-border-radius-m`, `--g-color-base-simple-hover`, `--g-color-text-secondary`
+and `--g-text-body-1-font-size` for spacing, corner radius, active background,
+description color and description typography respectively. Its width is limited
+to the viewport and long result lists scroll.

package/build/docs/components/pages/AIStudioChat.md

@@ -186,3 +186,41 @@ On every `onSendMessage` call the component:
 7. If `showHistory` is enabled and no active chat exists, a new chat is created automatically using the first message as its name.
 
 On **retry**, the original user message text and stored `images` are re-sent without requiring the user to re-attach files.
+
+## Application commands and context
+
+Configure command sources through `promptInputProps.commands`. See the
+[PromptInput command guide](../organisms/PromptInput.md#commands-and-context).
+`onBeforeSend(data)` receives the complete `TSubmitData`, including `selections`.
+It can contribute request body fields or return `false`/`null` to cancel.
+Returning `undefined` contributes no extra fields and continues sending.
+
+`transformRequest(request, data)` runs after `extraRequestParams`, per-send
+parameters, file parameters and conversation continuity have been assembled.
+Return the final request body, synchronously or asynchronously, or `false` to
+cancel without clearing the draft. The application determines exactly where
+command instructions and context belong. Selection data is not automatically
+serialized into the request. UI message text remains the user's input even if
+the mapping adds instructions to the API messages.
+
+```tsx
+<AIStudioChat
+  apiUrl="/api/chat"
+  fileUpload={fileUpload}
+  promptInputProps={{commands: {sources}}}
+  transformRequest={(request, {selections = []}) => ({
+    ...request,
+    context: selections.map(({sourceId, id, data}) => ({sourceId, id, data})),
+  })}
+/>
+```
+
+Retry reuses the original serialized request body. Later draft selections and
+changed mapping callbacks do not alter the retried request. HTTP headers still
+come from the current `requestInit` configuration.
+
+Failed HTTP attempts are displayed separately from model history. Technical
+errors are shown through the chat error state and are never added as assistant
+messages. Sending the retained draft again uses the accepted history and the
+current draft exactly once, even when the draft has been edited. Retry reuses
+the failed attempt's original request snapshot.

package/build/esm/components/molecules/PromptInputBody/PromptInputBody.d.ts

@@ -21,6 +21,7 @@ export type PromptInputBodyProps = {
     autoFocus?: boolean;
     /** Disabled state for input */
     disabledInput?: boolean;
+    controlProps?: TextAreaProps['controlProps'];
     /** Change handler */
     onChange?: (value: string) => void;
     /** Key down handler */

package/build/esm/components/molecules/PromptInputBody/PromptInputBody.js

@@ -23,7 +23,7 @@ const scheduleCaretAtEndIfCollapsed = (textarea) => {
  * @returns React component
  */
 export const PromptInputBody = forwardRef((props, ref) => {
-    const { value, placeholder, maxLength, size, minRows = 1, maxRows = 15, autoFocus = false, disabledInput = false, onChange, onKeyDown, children, className, inputClassName, qa, } = props;
+    const { controlProps, value, placeholder, maxLength, size, minRows = 1, maxRows = 15, autoFocus = false, disabledInput = false, onChange, onKeyDown, children, className, inputClassName, qa, } = props;
     const resolvedSize = useMobileControlSize(size, 'l', 'xl');
     const hasHandledInitialFocusRef = useRef(false);
     const pendingInitialPointerIdRef = useRef(null);
@@ -64,13 +64,7 @@ export const PromptInputBody = forwardRef((props, ref) => {
         return (_jsx("div", { className: b(null, className), "data-qa": qa, children: children }));
     }
     // Render default textarea
-    return (_jsx("div", { className: b(null, className), "data-qa": qa, children: _jsx(TextArea, { controlRef: ref, size: resolvedSize, value: value, placeholder: placeholder, minRows: minRows, maxRows: maxRows, autoFocus: autoFocus, disabled: disabledInput, onUpdate: onChange, onFocus: handleFocus, onKeyDown: onKeyDown, view: "clear", className: b('textarea'), controlProps: {
-                className: b('textarea-control', inputClassName),
-                maxLength,
-                onPointerDown: handlePointerDown,
-                onPointerUp: handlePointerUp,
-                onPointerCancel: handlePointerCancel,
-            } }) }));
+    return (_jsx("div", { className: b(null, className), "data-qa": qa, children: _jsx(TextArea, { controlRef: ref, size: resolvedSize, value: value, placeholder: placeholder, minRows: minRows, maxRows: maxRows, autoFocus: autoFocus, disabled: disabledInput, onUpdate: onChange, onFocus: handleFocus, onKeyDown: onKeyDown, view: "clear", className: b('textarea'), controlProps: Object.assign(Object.assign({}, controlProps), { className: b('textarea-control', inputClassName), maxLength, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel }) }) }));
 });
 PromptInputBody.displayName = 'PromptInputBody';
 //# sourceMappingURL=PromptInputBody.js.map

package/build/esm/components/molecules/PromptInputBody/PromptInputBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromptInputBody.js","sourceRoot":"../../../../../src","sources":["components/molecules/PromptInputBody/PromptInputBody.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,UAAU,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,oBAAoB,EAAC,+CAA4C;AACzE,OAAO,EAAC,KAAK,EAAC,6BAA0B;AAExC,+BAAgC;AAEhC,MAAM,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,6BAA6B,GAAG,CAAC,QAA6B,EAAE,EAAE;IACpE,qBAAqB,CAAC,GAAG,EAAE;QACvB,IACI,QAAQ,CAAC,WAAW;YACpB,QAAQ,CAAC,aAAa,CAAC,aAAa,KAAK,QAAQ;YACjD,QAAQ,CAAC,cAAc,KAAK,QAAQ,CAAC,YAAY,EACnD,CAAC;YACC,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;YAC5C,QAAQ,CAAC,iBAAiB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QAC7D,CAAC;IACL,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAoCF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACrC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACX,MAAM,EACF,KAAK,EACL,WAAW,EACX,SAAS,EACT,IAAI,EACJ,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,EAAE,EACZ,SAAS,GAAG,KAAK,EACjB,aAAa,GAAG,KAAK,EACrB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,cAAc,EACd,EAAE,GACL,GAAG,KAAK,CAAC;IAEV,MAAM,YAAY,GAAG,oBAAoB,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;IAC3D,MAAM,yBAAyB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,0BAA0B,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAE/D,MAAM,iBAAiB,GAAG,CAAC,KAA8C,EAAE,EAAE;QACzE,0BAA0B,CAAC,OAAO;YAC9B,CAAC,yBAAyB,CAAC,OAAO,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;gBACvE,CAAC,CAAC,KAAK,CAAC,SAAS;gBACjB,CAAC,CAAC,IAAI,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,KAA8C,EAAE,EAAE;QACvE,IAAI,0BAA0B,CAAC,OAAO,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;YACzD,OAAO;QACX,CAAC;QAED,0BAA0B,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1C,6BAA6B,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,KAA8C,EAAE,EAAE;QAC3E,IAAI,0BAA0B,CAAC,OAAO,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;YACzD,0BAA0B,CAAC,OAAO,GAAG,IAAI,CAAC;QAC9C,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAA4C,EAAE,EAAE;QACjE,IAAI,yBAAyB,CAAC,OAAO,EAAE,CAAC;YACpC,OAAO;QACX,CAAC;QAED,yBAAyB,CAAC,OAAO,GAAG,IAAI,CAAC;QAEzC,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC;QACrC,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YAClB,0BAA0B,CAAC,OAAO,GAAG,IAAI,CAAC;YAC1C,OAAO;QACX,CAAC;QAED,IAAI,0BAA0B,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAC9C,6BAA6B,CAAC,QAAQ,CAAC,CAAC;QAC5C,CAAC;IACL,CAAC,CAAC;IAEF,2CAA2C;IAC3C,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAAW,EAAE,YAC1C,QAAQ,GACP,CACT,CAAC;IACN,CAAC;IAED,0BAA0B;IAC1B,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAAW,EAAE,YAC3C,KAAC,QAAQ,IACL,UAAU,EAAE,GAAG,EACf,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,EACxB,YAAY,EAAE;gBACV,SAAS,EAAE,CAAC,CAAC,kBAAkB,EAAE,cAAc,CAAC;gBAChD,SAAS;gBACT,aAAa,EAAE,iBAAiB;gBAChC,WAAW,EAAE,eAAe;gBAC5B,eAAe,EAAE,mBAAmB;aACvC,GACH,GACA,CACT,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import {ReactNode, forwardRef, useRef} from 'react';\n\nimport type {TextAreaProps} from '@gravity-ui/uikit';\nimport {TextArea} from '@gravity-ui/uikit';\n\nimport {useMobileControlSize} from '../../../hooks/useMobileControlSize';\nimport {block} from '../../../utils/cn';\n\nimport './PromptInputBody.scss';\n\nconst b = block('prompt-input-body');\n\nconst scheduleCaretAtEndIfCollapsed = (textarea: HTMLTextAreaElement) => {\n    requestAnimationFrame(() => {\n        if (\n            textarea.isConnected &&\n            textarea.ownerDocument.activeElement === textarea &&\n            textarea.selectionStart === textarea.selectionEnd\n        ) {\n            const caretPosition = textarea.value.length;\n            textarea.setSelectionRange(caretPosition, caretPosition);\n        }\n    });\n};\n\n/**\n * Props for the PromptInputBody component\n */\nexport type PromptInputBodyProps = {\n    /** Value of the textarea */\n    value?: string;\n    /** Placeholder text */\n    placeholder?: string;\n    /** Maximum length of input */\n    maxLength?: number;\n    /** Size of the textarea. Defaults to `l`, or `xl` in mobile mode */\n    size?: TextAreaProps['size'];\n    /** Minimum number of rows */\n    minRows?: number;\n    /** Maximum number of rows */\n    maxRows?: number;\n    /** Auto focus on mount */\n    autoFocus?: boolean;\n    /** Disabled state for input */\n    disabledInput?: boolean;\n    /** Change handler */\n    onChange?: (value: string) => void;\n    /** Key down handler */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n    /** Custom content to replace the default textarea */\n    children?: ReactNode;\n    /** Additional CSS class */\n    className?: string;\n    /** Additional CSS class for input element */\n    inputClassName?: string;\n    /** QA/test identifier */\n    qa?: string;\n};\n\n/**\n * PromptInputBody component displays the main input area\n * with textarea or custom content\n *\n * @param props - Component props\n * @returns React component\n */\nexport const PromptInputBody = forwardRef<HTMLTextAreaElement, PromptInputBodyProps>(\n    (props, ref) => {\n        const {\n            value,\n            placeholder,\n            maxLength,\n            size,\n            minRows = 1,\n            maxRows = 15,\n            autoFocus = false,\n            disabledInput = false,\n            onChange,\n            onKeyDown,\n            children,\n            className,\n            inputClassName,\n            qa,\n        } = props;\n\n        const resolvedSize = useMobileControlSize(size, 'l', 'xl');\n        const hasHandledInitialFocusRef = useRef(false);\n        const pendingInitialPointerIdRef = useRef<number | null>(null);\n\n        const handlePointerDown = (event: React.PointerEvent<HTMLTextAreaElement>) => {\n            pendingInitialPointerIdRef.current =\n                !hasHandledInitialFocusRef.current && event.isPrimary && event.button === 0\n                    ? event.pointerId\n                    : null;\n        };\n\n        const handlePointerUp = (event: React.PointerEvent<HTMLTextAreaElement>) => {\n            if (pendingInitialPointerIdRef.current !== event.pointerId) {\n                return;\n            }\n\n            pendingInitialPointerIdRef.current = null;\n            scheduleCaretAtEndIfCollapsed(event.currentTarget);\n        };\n\n        const handlePointerCancel = (event: React.PointerEvent<HTMLTextAreaElement>) => {\n            if (pendingInitialPointerIdRef.current === event.pointerId) {\n                pendingInitialPointerIdRef.current = null;\n            }\n        };\n\n        const handleFocus = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n            if (hasHandledInitialFocusRef.current) {\n                return;\n            }\n\n            hasHandledInitialFocusRef.current = true;\n\n            const textarea = event.currentTarget;\n            if (!textarea.value) {\n                pendingInitialPointerIdRef.current = null;\n                return;\n            }\n\n            if (pendingInitialPointerIdRef.current === null) {\n                scheduleCaretAtEndIfCollapsed(textarea);\n            }\n        };\n\n        // If custom content is provided, render it\n        if (children) {\n            return (\n                <div className={b(null, className)} data-qa={qa}>\n                    {children}\n                </div>\n            );\n        }\n\n        // Render default textarea\n        return (\n            <div className={b(null, className)} data-qa={qa}>\n                <TextArea\n                    controlRef={ref}\n                    size={resolvedSize}\n                    value={value}\n                    placeholder={placeholder}\n                    minRows={minRows}\n                    maxRows={maxRows}\n                    autoFocus={autoFocus}\n                    disabled={disabledInput}\n                    onUpdate={onChange}\n                    onFocus={handleFocus}\n                    onKeyDown={onKeyDown}\n                    view=\"clear\"\n                    className={b('textarea')}\n                    controlProps={{\n                        className: b('textarea-control', inputClassName),\n                        maxLength,\n                        onPointerDown: handlePointerDown,\n                        onPointerUp: handlePointerUp,\n                        onPointerCancel: handlePointerCancel,\n                    }}\n                />\n            </div>\n        );\n    },\n);\n\nPromptInputBody.displayName = 'PromptInputBody';\n"]}
+{"version":3,"file":"PromptInputBody.js","sourceRoot":"../../../../../src","sources":["components/molecules/PromptInputBody/PromptInputBody.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,UAAU,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,oBAAoB,EAAC,+CAA4C;AACzE,OAAO,EAAC,KAAK,EAAC,6BAA0B;AAExC,+BAAgC;AAEhC,MAAM,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,6BAA6B,GAAG,CAAC,QAA6B,EAAE,EAAE;IACpE,qBAAqB,CAAC,GAAG,EAAE;QACvB,IACI,QAAQ,CAAC,WAAW;YACpB,QAAQ,CAAC,aAAa,CAAC,aAAa,KAAK,QAAQ;YACjD,QAAQ,CAAC,cAAc,KAAK,QAAQ,CAAC,YAAY,EACnD,CAAC;YACC,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;YAC5C,QAAQ,CAAC,iBAAiB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QAC7D,CAAC;IACL,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAqCF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACrC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACX,MAAM,EACF,YAAY,EACZ,KAAK,EACL,WAAW,EACX,SAAS,EACT,IAAI,EACJ,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,EAAE,EACZ,SAAS,GAAG,KAAK,EACjB,aAAa,GAAG,KAAK,EACrB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,cAAc,EACd,EAAE,GACL,GAAG,KAAK,CAAC;IAEV,MAAM,YAAY,GAAG,oBAAoB,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;IAC3D,MAAM,yBAAyB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,0BAA0B,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAE/D,MAAM,iBAAiB,GAAG,CAAC,KAA8C,EAAE,EAAE;QACzE,0BAA0B,CAAC,OAAO;YAC9B,CAAC,yBAAyB,CAAC,OAAO,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;gBACvE,CAAC,CAAC,KAAK,CAAC,SAAS;gBACjB,CAAC,CAAC,IAAI,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,KAA8C,EAAE,EAAE;QACvE,IAAI,0BAA0B,CAAC,OAAO,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;YACzD,OAAO;QACX,CAAC;QAED,0BAA0B,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1C,6BAA6B,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,KAA8C,EAAE,EAAE;QAC3E,IAAI,0BAA0B,CAAC,OAAO,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;YACzD,0BAA0B,CAAC,OAAO,GAAG,IAAI,CAAC;QAC9C,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAA4C,EAAE,EAAE;QACjE,IAAI,yBAAyB,CAAC,OAAO,EAAE,CAAC;YACpC,OAAO;QACX,CAAC;QAED,yBAAyB,CAAC,OAAO,GAAG,IAAI,CAAC;QAEzC,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC;QACrC,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YAClB,0BAA0B,CAAC,OAAO,GAAG,IAAI,CAAC;YAC1C,OAAO;QACX,CAAC;QAED,IAAI,0BAA0B,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAC9C,6BAA6B,CAAC,QAAQ,CAAC,CAAC;QAC5C,CAAC;IACL,CAAC,CAAC;IAEF,2CAA2C;IAC3C,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAAW,EAAE,YAC1C,QAAQ,GACP,CACT,CAAC;IACN,CAAC;IAED,0BAA0B;IAC1B,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAAW,EAAE,YAC3C,KAAC,QAAQ,IACL,UAAU,EAAE,GAAG,EACf,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,EACxB,YAAY,kCACL,YAAY,KACf,SAAS,EAAE,CAAC,CAAC,kBAAkB,EAAE,cAAc,CAAC,EAChD,SAAS,EACT,aAAa,EAAE,iBAAiB,EAChC,WAAW,EAAE,eAAe,EAC5B,eAAe,EAAE,mBAAmB,MAE1C,GACA,CACT,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import {ReactNode, forwardRef, useRef} from 'react';\n\nimport type {TextAreaProps} from '@gravity-ui/uikit';\nimport {TextArea} from '@gravity-ui/uikit';\n\nimport {useMobileControlSize} from '../../../hooks/useMobileControlSize';\nimport {block} from '../../../utils/cn';\n\nimport './PromptInputBody.scss';\n\nconst b = block('prompt-input-body');\n\nconst scheduleCaretAtEndIfCollapsed = (textarea: HTMLTextAreaElement) => {\n    requestAnimationFrame(() => {\n        if (\n            textarea.isConnected &&\n            textarea.ownerDocument.activeElement === textarea &&\n            textarea.selectionStart === textarea.selectionEnd\n        ) {\n            const caretPosition = textarea.value.length;\n            textarea.setSelectionRange(caretPosition, caretPosition);\n        }\n    });\n};\n\n/**\n * Props for the PromptInputBody component\n */\nexport type PromptInputBodyProps = {\n    /** Value of the textarea */\n    value?: string;\n    /** Placeholder text */\n    placeholder?: string;\n    /** Maximum length of input */\n    maxLength?: number;\n    /** Size of the textarea. Defaults to `l`, or `xl` in mobile mode */\n    size?: TextAreaProps['size'];\n    /** Minimum number of rows */\n    minRows?: number;\n    /** Maximum number of rows */\n    maxRows?: number;\n    /** Auto focus on mount */\n    autoFocus?: boolean;\n    /** Disabled state for input */\n    disabledInput?: boolean;\n    controlProps?: TextAreaProps['controlProps'];\n    /** Change handler */\n    onChange?: (value: string) => void;\n    /** Key down handler */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n    /** Custom content to replace the default textarea */\n    children?: ReactNode;\n    /** Additional CSS class */\n    className?: string;\n    /** Additional CSS class for input element */\n    inputClassName?: string;\n    /** QA/test identifier */\n    qa?: string;\n};\n\n/**\n * PromptInputBody component displays the main input area\n * with textarea or custom content\n *\n * @param props - Component props\n * @returns React component\n */\nexport const PromptInputBody = forwardRef<HTMLTextAreaElement, PromptInputBodyProps>(\n    (props, ref) => {\n        const {\n            controlProps,\n            value,\n            placeholder,\n            maxLength,\n            size,\n            minRows = 1,\n            maxRows = 15,\n            autoFocus = false,\n            disabledInput = false,\n            onChange,\n            onKeyDown,\n            children,\n            className,\n            inputClassName,\n            qa,\n        } = props;\n\n        const resolvedSize = useMobileControlSize(size, 'l', 'xl');\n        const hasHandledInitialFocusRef = useRef(false);\n        const pendingInitialPointerIdRef = useRef<number | null>(null);\n\n        const handlePointerDown = (event: React.PointerEvent<HTMLTextAreaElement>) => {\n            pendingInitialPointerIdRef.current =\n                !hasHandledInitialFocusRef.current && event.isPrimary && event.button === 0\n                    ? event.pointerId\n                    : null;\n        };\n\n        const handlePointerUp = (event: React.PointerEvent<HTMLTextAreaElement>) => {\n            if (pendingInitialPointerIdRef.current !== event.pointerId) {\n                return;\n            }\n\n            pendingInitialPointerIdRef.current = null;\n            scheduleCaretAtEndIfCollapsed(event.currentTarget);\n        };\n\n        const handlePointerCancel = (event: React.PointerEvent<HTMLTextAreaElement>) => {\n            if (pendingInitialPointerIdRef.current === event.pointerId) {\n                pendingInitialPointerIdRef.current = null;\n            }\n        };\n\n        const handleFocus = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n            if (hasHandledInitialFocusRef.current) {\n                return;\n            }\n\n            hasHandledInitialFocusRef.current = true;\n\n            const textarea = event.currentTarget;\n            if (!textarea.value) {\n                pendingInitialPointerIdRef.current = null;\n                return;\n            }\n\n            if (pendingInitialPointerIdRef.current === null) {\n                scheduleCaretAtEndIfCollapsed(textarea);\n            }\n        };\n\n        // If custom content is provided, render it\n        if (children) {\n            return (\n                <div className={b(null, className)} data-qa={qa}>\n                    {children}\n                </div>\n            );\n        }\n\n        // Render default textarea\n        return (\n            <div className={b(null, className)} data-qa={qa}>\n                <TextArea\n                    controlRef={ref}\n                    size={resolvedSize}\n                    value={value}\n                    placeholder={placeholder}\n                    minRows={minRows}\n                    maxRows={maxRows}\n                    autoFocus={autoFocus}\n                    disabled={disabledInput}\n                    onUpdate={onChange}\n                    onFocus={handleFocus}\n                    onKeyDown={onKeyDown}\n                    view=\"clear\"\n                    className={b('textarea')}\n                    controlProps={{\n                        ...controlProps,\n                        className: b('textarea-control', inputClassName),\n                        maxLength,\n                        onPointerDown: handlePointerDown,\n                        onPointerUp: handlePointerUp,\n                        onPointerCancel: handlePointerCancel,\n                    }}\n                />\n            </div>\n        );\n    },\n);\n\nPromptInputBody.displayName = 'PromptInputBody';\n"]}

package/build/esm/components/organisms/PromptInput/PromptInput.css

@@ -47,4 +47,41 @@
 }
 .g-aikit-prompt-input__suggestions {
   padding-bottom: var(--g-spacing-2);
+}
+
+.g-aikit-prompt-input__command-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--g-spacing-1);
+}
+.g-aikit-prompt-input__commands {
+  width: min(400px, 100vw - 32px);
+  padding: var(--g-spacing-3);
+  box-sizing: border-box;
+}
+.g-aikit-prompt-input__commands-title {
+  font-weight: 600;
+  margin-bottom: var(--g-spacing-2);
+}
+.g-aikit-prompt-input__command-list {
+  max-height: 240px;
+  overflow-y: auto;
+}
+.g-aikit-prompt-input__command {
+  display: flex;
+  gap: var(--g-spacing-2);
+  padding: var(--g-spacing-2);
+  border-radius: var(--g-border-radius-m);
+  cursor: pointer;
+}
+.g-aikit-prompt-input__command_active, .g-aikit-prompt-input__command:hover {
+  background: var(--g-color-base-simple-hover);
+}
+.g-aikit-prompt-input__command_disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.g-aikit-prompt-input__command-description {
+  color: var(--g-color-text-secondary);
+  font-size: var(--g-text-body-1-font-size);
 }

package/build/esm/components/organisms/PromptInput/PromptInput.d.ts

@@ -1,14 +1,25 @@
-import { ChatStatus, TSubmitData } from "../../../types/index.js";
+import { type Ref } from 'react';
+import { ChatStatus, type PromptCommandsConfig, TSubmitData } from "../../../types/index.js";
 import { PromptInputBodyConfig, PromptInputFooterConfig, PromptInputHeaderConfig, PromptInputPanelConfig, PromptInputSuggestionsConfig } from "./types.js";
 import "./PromptInput.css";
 /**
  * Props for the PromptInput component
  */
+export type PromptInputHandle = {
+    submit: (data?: TSubmitData) => Promise<void>;
+    clearFailedDraft: () => boolean;
+};
 export type PromptInputProps = {
+    /** Programmatic submission uses the same draft lifecycle as the send button. */
+    apiRef?: Ref<PromptInputHandle>;
+    /** Application-defined commands and context sources. */
+    commands?: PromptCommandsConfig;
+    /** Resets uncontrolled command selections and search without changing focus. */
+    commandsResetKey?: string | number;
     /** View variant: 'full' with all features, 'simple' with minimal UI */
     view?: 'full' | 'simple';
     /** Callback when message is sent */
-    onSend: (data: TSubmitData) => Promise<void>;
+    onSend: (data: TSubmitData) => Promise<void | false>;
     /** Callback when sending is cancelled */
     onCancel?: () => Promise<void>;
     /** Initial value */

package/build/esm/components/organisms/PromptInput/PromptInput.js

@@ -1,8 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, useRef } from 'react';
+import { useForkRef } from '@gravity-ui/uikit';
+import { PromptInputCommands } from "./PromptInputCommands.js";
 import { PromptInputFull } from "./PromptInputFull.js";
 import { PromptInputSimple } from "./PromptInputSimple.js";
 import { PromptInputWithPanels } from "./PromptInputWithPanels.js";
 import { PromptInputWithSuggestions } from "./PromptInputWithSuggestions.js";
+import { i18n } from "./i18n/index.js";
+import { usePromptCommands } from "./usePromptCommands.js";
 import { usePromptInput } from "./usePromptInput.js";
 import "./PromptInput.css";
 /**
@@ -13,9 +18,23 @@ import "./PromptInput.css";
  * @returns React component
  */
 export function PromptInput(props) {
-    const { view = 'simple', onSend, onCancel, initialValue, disabled = false, status = 'ready', maxLength, onValueChange, headerProps, bodyProps, footerProps, suggestionsProps, topPanel, bottomPanel, className, qa, } = props;
+    var _a;
+    const { apiRef, commands: commandsConfig, commandsResetKey, view = 'simple', onSend, onCancel, initialValue, disabled = false, status = 'ready', maxLength, onValueChange, headerProps, bodyProps, footerProps, suggestionsProps, topPanel, bottomPanel, className, qa, } = props;
+    const inputRef = useRef(null);
+    const mergedInputRef = useForkRef(inputRef, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.inputRef);
+    const commandsRef = useRef(null);
+    const submittedSelections = useRef([]);
     const hookState = usePromptInput({
-        onSend,
+        resetKey: commandsResetKey,
+        captureSubmission: () => {
+            var _a, _b;
+            const snapshot = (_a = commandsRef.current) === null || _a === void 0 ? void 0 : _a.captureSubmission();
+            submittedSelections.current = (_b = snapshot === null || snapshot === void 0 ? void 0 : snapshot.selections) !== null && _b !== void 0 ? _b : [];
+            return snapshot !== null && snapshot !== void 0 ? snapshot : { restore: () => { }, clear: () => { }, hasChanged: () => false };
+        },
+        onSend: (data) => onSend(Object.assign(Object.assign({}, data), (submittedSelections.current.length && {
+            selections: [...submittedSelections.current],
+        }))),
         onCancel,
         initialValue,
         disabled,
@@ -23,6 +42,48 @@ export function PromptInput(props) {
         maxLength,
         onValueChange,
     });
+    useImperativeHandle(apiRef, () => ({
+        submit: hookState.submit,
+        clearFailedDraft: hookState.clearFailedDraft,
+    }));
+    const commandsDisabled = disabled || hookState.isInputDisabled || Boolean(bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.disabledInput);
+    const commands = usePromptCommands({
+        config: commandsConfig,
+        resetKey: commandsResetKey,
+        value: hookState.value,
+        onChange: hookState.handleChange,
+        inputRef,
+        disabled: commandsDisabled,
+        maxLength,
+    });
+    commandsRef.current = commands;
+    const inputBodyProps = Object.assign(Object.assign({}, bodyProps), { inputRef: mergedInputRef, controlProps: Object.assign(Object.assign({}, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.controlProps), (commandsConfig && {
+            role: 'combobox',
+            'aria-expanded': commands.open && ((_a = commands.session) === null || _a === void 0 ? void 0 : _a.origin) === 'input',
+            'aria-controls': commands.open ? commands.listId : undefined,
+            'aria-autocomplete': 'list',
+            'aria-activedescendant': commands.open && commands.items[commands.activeIndex]
+                ? `${commands.listId}-${commands.activeIndex}`
+                : undefined,
+            onSelect: (event) => {
+                var _a, _b;
+                (_b = (_a = bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.controlProps) === null || _a === void 0 ? void 0 : _a.onSelect) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                const input = event.currentTarget;
+                commands.detect(input.value, input.selectionStart, input.selectionEnd);
+            },
+        })) });
+    const commandHookState = Object.assign(Object.assign({}, hookState), { isInputDisabled: commandsDisabled, handleChange: (value) => {
+            if (maxLength !== undefined && value.length > maxLength)
+                return;
+            hookState.handleChange(value);
+            const input = inputRef.current;
+            if (input)
+                commands.detect(value, input.selectionStart, input.selectionEnd, true);
+        }, handleKeyDown: (event) => {
+            if (!commands.handleKeyDown(event))
+                hookState.handleKeyDown(event);
+        } });
+    const commandsContent = (_jsxs(_Fragment, { children: [commandsConfig && (_jsx(PromptInputCommands, { commands: commands, config: commandsConfig, inputRef: inputRef, disabled: commandsDisabled })), hookState.sendError && _jsx("div", { role: "alert", children: i18n('send-error') })] }));
     // Handle suggestion click with custom handler or default to input change
     const handleSuggestionClick = (content, id, data) => {
         if (suggestionsProps === null || suggestionsProps === void 0 ? void 0 : suggestionsProps.onSuggestionClick) {
@@ -36,6 +97,6 @@ export function PromptInput(props) {
     // Prepare suggestions props with wrapped handler
     const wrappedSuggestionsProps = suggestionsProps
         ? Object.assign(Object.assign({}, suggestionsProps), { onSuggestionClick: handleSuggestionClick }) : undefined;
-    return (_jsx(PromptInputWithSuggestions, { suggestionsProps: wrappedSuggestionsProps, children: _jsx(PromptInputWithPanels, { topPanel: topPanel, bottomPanel: bottomPanel, children: isFullView ? (_jsx(PromptInputFull, { hookState: hookState, headerProps: headerProps, bodyProps: bodyProps, footerProps: footerProps, className: className, qa: qa })) : (_jsx(PromptInputSimple, { hookState: hookState, bodyProps: bodyProps, footerProps: footerProps, className: className, qa: qa })) }) }));
+    return (_jsx(PromptInputWithSuggestions, { suggestionsProps: wrappedSuggestionsProps, children: _jsx(PromptInputWithPanels, { topPanel: topPanel, bottomPanel: bottomPanel, children: isFullView ? (_jsx(PromptInputFull, { hookState: commandHookState, commandsContent: commandsContent, headerProps: headerProps, bodyProps: inputBodyProps, footerProps: footerProps, className: className, qa: qa })) : (_jsx(PromptInputSimple, { hookState: commandHookState, commandsContent: commandsContent, bodyProps: inputBodyProps, footerProps: footerProps, className: className, qa: qa })) }) }));
 }
 //# sourceMappingURL=PromptInput.js.map