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