AiChainOfThoughts

AiChainOfThoughts — цепочка рассуждений AI-агента (Chain of Thoughts) для Гига-помощника: сворачиваемый заголовок «Размышляю» / «Размышлял» с длительностью и список строк-инструментов под ним.

Раскрытие — controlled (open + onOpenChange) либо uncontrolled (defaultOpen). Контент цепочки передаётся слотом children (строки @cloud-ru/ds-ai-tool), сам компонент его не запоминает.

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

• Показ процесса рассуждения агента в чате: заголовок со статусом и список выполненных шагов-инструментов.
• Потоковое отображение размышлений (стриминг) — заголовок остаётся, контент дополняется по мере поступления шагов.

Когда не нужен

• Одиночный шаг reasoning без заголовка-цепочки:
  • используйте @cloud-ru/ds-ai-reasoning.
• Отдельный вызов инструмента вне цепочки:
  • используйте AiTool / AiToolSimple из @cloud-ru/ds-ai-tool.

Анатомия

InProgress (default true)

• true — слева иконка (по умолчанию GigaChat), подпись «Размышляю» (настоящее время) и длительность. По умолчанию shimmer покрывает иконку Giga и подпись.
• false — без иконки, подпись «Размышлял» (прошедшее время), без shimmer.

Icon (default GigaChat)

Слот icon в активном состоянии (inProgress или broken):

• не передан — иконка GigaChat;
• передан React-узел — кастомная иконка (например Sun Loader);
• null — иконка скрыта.

При включённом shimmer любая иконка заливается волной вместе с подписью, см. раздел «Shimmer».

Проп прокидывается с AiChainOfThoughts в AiChainOfThoughtsHeadline.

Shimmer (default true)

В активном состоянии по строке заголовка идёт брендовая волна: сине-зелёная полоса проходит слева направо за 3 секунды, затем держит паузу 2 секунды. Параметры волны заданы в @cloud-ru/ds-ai-shimmer.

Волна покрывает иконку, подпись и длительность одной сплошной полосой. Своя иконка из icon переливается наравне с GigaChat, а Sun из @cloud-ru/ds-loader — ещё и с собственной анимацией внутри волны. shimmer={false} возвращает статичную строку с обычной иерархией цветов и не сдвигает ни один элемент ряда.

Проп прокидывается с AiChainOfThoughts в Headline.

Broken (default false)

Поток рассуждения прерван: вместо длительности и chevron’а заголовок показывает сообщение brokenMessage, контент-цепочка не раскрывается.

Open (default false)

Раскрытие контент-цепочки. Chevron в заголовке появляется только при наличии children и вне состояния broken.

Установка

pnpm add @cloud-ru/ds-ai-chain-of-thoughts

import { AiChainOfThoughts, AiChainOfThoughtsHeadline } from '@cloud-ru/ds-ai-chain-of-thoughts'

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

Default

import { AiChainOfThoughts } from '@cloud-ru/ds-ai-chain-of-thoughts';
import { AI_TOOL_ICON_TYPE, AI_TOOL_STATUS_STATE, AiTool, AiToolSimple } from '@cloud-ru/ds-ai-tool';

export function Default() {
  return (
    <AiChainOfThoughts inProgress duration={31568949} defaultOpen>
      <AiToolSimple name='status_for_users' icon={AI_TOOL_ICON_TYPE.Search} connector />
      <AiTool
        name='status_for_users'
        icon={AI_TOOL_ICON_TYPE.Search}
        state={AI_TOOL_STATUS_STATE.Success}
        duration={9}
        call='{ "user_ids": [1, 2, 3] }'
      />
    </AiChainOfThoughts>
  );
}

Broken

import { AiChainOfThoughts } from '@cloud-ru/ds-ai-chain-of-thoughts';

export function Broken() {
  return <AiChainOfThoughts broken />;
}

Headline

import { AiChainOfThoughtsHeadline } from '@cloud-ru/ds-ai-chain-of-thoughts';

export function HeadlineStates() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <AiChainOfThoughtsHeadline inProgress duration={31568949} />
      <AiChainOfThoughtsHeadline inProgress={false} duration={31568949} />
    </div>
  );
}

Props

AiChainOfThoughts

Types

AiChainOfThoughtsProps

AiChainOfThoughtsHeadline

Types

AiChainOfThoughtsHeadlineProps

Storybook

Figma