AiToolDetailsLabel
Заголовок-чип части блока деталей — обычно «Запрос» или «Ответ». Опциональная кнопка-«глаз» (showEyeButton + onToggleSecret) переключает показ секретных значений в теле блока.
Когда использовать
- Подзаголовок секции внутри
AiToolDetails. - Переключатель показа секретов (токены, пароли) в результате инструмента.
Анатомия
State (default default)
default— нейтральный фон и текст.error— красный.
Secret
showEyeButton добавляет кнопку-«глаз». Видимое состояние — secretRevealed (источник истины — родитель): зачёркнутый глаз — секреты скрыты, открытый — показаны.
Copy
showCopyButton управляет кнопкой копирования. В copyValue передаётся строковое представление содержимого связанного ToolDetails. Кнопка отображается при showCopyButton=true и непустом copyValue. После копирования onCopyClick получает скопированное содержимое.
Установка
pnpm add @cloud-ru/ds-ai-toolimport { AiToolDetailsLabel } from '@cloud-ru/ds-ai-tool'Примеры использования
Переключение секрета
Ответ
tsx
import { AiToolDetailsLabel } from '@cloud-ru/ds-ai-tool';
import { useState } from 'react';
export function DetailsLabelSecret() {
const [revealed, setRevealed] = useState(false);
return (
<div style={{ width: 280 }}>
<AiToolDetailsLabel
label='Ответ'
copyValue='TextBlock Text'
showEyeButton
secretRevealed={revealed}
onToggleSecret={() => setRevealed(prev => !prev)}
/>
</div>
);
}Props
Types
Props
AiToolDetailsLabelProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
className | string | — | no | Доп. класс корня. |
copyValue | string | — | no | Содержимое связанного `ToolDetails` для копирования. |
data-test-id | string | ai-tool-details-label | no | |
label | ReactNode | — | no | Текст лейбла (заголовок блока деталей). |
onCopyClick | ((value: string) => void) | — | no | Вызывается после копирования содержимого. |
onToggleSecret | ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | — | no | Клик по кнопке-«глаз». Не вызывается, если `showEyeButton` не задан. |
secretRevealed | boolean | false | no | Секрет раскрыт: глаз открыт (секреты видны). Зачёркнутый глаз — секреты скрыты. Источник истины — родитель. |
showCopyButton | boolean | true | no | Показать кнопку копирования. По умолчанию `true`; требуется непустой `copyValue`. |
showEyeButton | boolean | false | no | Показать кнопку-«глаз» для раскрытия секретного значения. |
state | "default" | "error" | default | no | Состояние: `default` — нейтральный, `error` — красный. |