AiToolDetails
Карточка деталей инструмента: заголовок-лейбл (AiToolDetailsLabel) поверх скроллируемого тела.
Весь текстовый контент внутри карточки автоматически становится моноширинным; в состоянии error — ещё и красным. Это прокидывается во вложенные AiToolText, AiToolKeyValue, AiToolObject, AiToolArray без ручной простановки пропсов.
Когда использовать
- Блок с аргументами или результатом одного вызова инструмента.
- Контейнер для дерева данных с фиксированной высотой и скроллом.
Анатомия
State (default default)
default— нейтральная рамка и заголовок.error— красная рамка и заголовок; вложенный контент становится mono + error.
Scroll (default true)
Ограничивает высоту тела и включает вертикальный скролл. При false карточка растягивается по контенту.
Height (default small)
Задаёт максимальную высоту тела при scroll=true:
small— компактный блок до 140 px.large— расширенный блок до 360 px для длинных аргументов или результатов.
При scroll=false значение height не ограничивает рост карточки.
Copy
showCopyButton управляет кнопкой копирования в заголовке. В copyValue передаётся строковое представление содержимого ToolDetails, например JSON или многострочный текст. Кнопка отображается при showCopyButton=true и непустом copyValue. После копирования onCopyClick получает скопированное содержимое.
Установка
pnpm add @cloud-ru/ds-ai-toolimport { AiToolDetails } from '@cloud-ru/ds-ai-tool'Примеры использования
Блок деталей
import { AiToolDetails, AiToolText } from '@cloud-ru/ds-ai-tool';
const DETAILS_CONTENT = '{ "region": "ru-central1", "status": "ok" }';
export function DetailsCard() {
return (
<AiToolDetails label='create_instance' state='default' height='large' copyValue={DETAILS_CONTENT}>
<AiToolText mono>{DETAILS_CONTENT}</AiToolText>
</AiToolDetails>
);
}Props
Types
AiToolDetailsProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
children | ReactNode | — | no | Контент блока деталей (текст, key-value, дерево). |
className | string | — | no | Доп. класс корня. |
copyValue | string | — | no | Сериализованное содержимое `ToolDetails` для копирования. |
data-test-id | string | ai-tool-details | no | |
height | "large" | "small" | small | no | Максимальная высота прокручиваемого контента. По умолчанию `small`. |
label | ReactNode | — | no | Текст заголовка-лейбла. |
onCopyClick | ((value: string) => void) | — | no | Вызывается после копирования содержимого. |
onToggleSecret | ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | — | no | Клик по кнопке-«глаз» заголовка. |
scroll | boolean | true | no | Ограничить высоту контента и включить вертикальный скролл. По умолчанию `true`. |
secretRevealed | boolean | false | no | Секрет раскрыт. Источник истины — родитель. |
showCopyButton | boolean | true | no | Показать кнопку копирования. По умолчанию `true`; требуется непустой `copyValue`. |
showEyeButton | boolean | false | no | Показать кнопку-«глаз» в заголовке для раскрытия секрета. |
state | "default" | "error" | default | no | Состояние: `default` — нейтральный, `error` — красная рамка и лейбл. |