AiToolSimple

Компактный инструмент AI-стриминга (Гига-помощник): иконка типа, имя и chevron в заголовке; в раскрытом состоянии — текстовое описание и контент (обычно бейджи ресурсов). В отличие от AiTool — без статус-точки, длительности и фона-карточки.

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

• Готовый компактный вызов инструмента в Гига-помощнике.
• Пошаговый таймлайн: несколько AiToolSimple подряд с connector.

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

• Полный инструмент со статусом и блоками запроса/ответа (VibeOps):
  • используйте AiTool.
• Обычный контент-блок без семантики инструмента:
  • используйте @cloud-ru/ds-card или типографику @cloud-ru/ds-typography.

Анатомия

• Stepper — иконка типа (icon) или, в состоянии loading, пульсирующий AiToolStatus; опциональная линия-коннектор (connector).
• Header — имя (name) и chevron-кнопка раскрытия (рендерится только когда есть description или children).
• Контент раскрытия — текстовое описание (description) и children (обычно ряд AiToolBadge, выкладывается с переносом).

State (default pending)

В состоянии loading тип инструмента ещё неизвестен, поэтому слева вместо иконки показывается пульсирующая точка AiToolStatus, а заголовок подсвечивается основным цветом текста. В остальных состояниях (pending / success / error) слева — иконка типа (icon). Раскрытие — controlled (opened + onToggle) либо uncontrolled (defaultOpened).

Установка

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

import { AiToolSimple } from '@cloud-ru/ds-ai-tool'

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

Компактный инструмент с бейджами

import { AI_TOOL_BADGE_TYPE, AI_TOOL_ICON_TYPE, AI_TOOL_STATUS_STATE, AiToolBadge, AiToolSimple } from '@cloud-ru/ds-ai-tool';

export function ToolSimpleBadges() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <AiToolSimple
        name='search_documents'
        icon={AI_TOOL_ICON_TYPE.Search}
        connector
        description='Ищет документы по запросу пользователя.'
      >
        <AiToolBadge badgeType={AI_TOOL_BADGE_TYPE.CloudRu} label='docs-service' />
        <AiToolBadge badgeType={AI_TOOL_BADGE_TYPE.Other} label='search-index' />
      </AiToolSimple>
      <AiToolSimple
        name='status_for_users'
        icon={AI_TOOL_ICON_TYPE.Act}
        state={AI_TOOL_STATUS_STATE.Loading}
        defaultOpened
        description='Запрашивает статусы пользователей и агрегирует результат.'
      >
        <AiToolBadge badgeType={AI_TOOL_BADGE_TYPE.CloudRu} label='users-service' />
        <AiToolBadge badgeType={AI_TOOL_BADGE_TYPE.Other} label='audit-log' />
      </AiToolSimple>
    </div>
  );
}

Props

Types

AiToolSimpleProps

Unions

AiToolIconType

AiToolStatusState

Storybook

Figma