AiReasoning

AiReasoning — презентационный элемент для показа промежуточного шага reasoning в AI-цепочке: иконка, вертикальная степпер-линия и краткое описание текущего шага.

Когда использовать

• В timeline/chain-of-thought интерфейсах, где нужно компактно показать служебный reasoning-шаг.
• Перед или между блоками выполнения tool-вызовов.

Анатомия

Description + Children

description рендерится верхней строкой, а children можно прокинуть как вложенный контент ниже (например карточку с деталями запроса/ответа).
Высота шага вычисляется по всему контенту, поэтому линия степпера растягивается вместе с children.

Icon

Иконка шага фиксированная: ProductIcons.DotSmallSVG.

Stepper line (default true)

• true — показывает продолжение степпера вниз (промежуточный шаг).
• false — скрывает продолжение (последний шаг цепочки).

Connector (default stepperLine)

connector позволяет явно переопределить видимость нижнего коннектора:

• true — коннектор виден всегда.
• false — коннектор скрыт даже при stepperLine=true.
• не передан — поведение наследуется от stepperLine.

Установка

pnpm add @cloud-ru/ds-ai-reasoning

import { AiReasoning } from '@cloud-ru/ds-ai-reasoning'

Примеры использования

Default

import { AiReasoning } from '@cloud-ru/ds-ai-reasoning';

export function Default() {
  return <AiReasoning description='Tool is reasoning about the next action' />;
}

Storybook

Figma