AiSuggestion

Компонент Suggestion / Simple — pill-чип для AI-сценариев: быстрый выбор подсказки с иконкой и коротким текстом.

Демо

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

Подсказки в AI-чате или поиске с генерацией.
Быстрые действия рядом с полем ввода (suggested prompts).

Анатомия

Appearance

neutral — нейтральная обводка и серый текст (Figma: Primary=Off).
primary — акцентная обводка и зелёный текст (Figma: Primary=On).

Size

s — компактный размер, 32px по высоте (Figma: Mobile=Off).
m — увеличенный размер, 40px по высоте (Figma: Mobile=On).

Состояния hover и focus реализованы через CSS (:hover, :focus-visible), а не через пропы.

Установка

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

import { AiSuggestionSimple, AiSuggestionParent, APPEARANCE, CHILD_TYPE, SIZE } from '@cloud-ru/ds-ai-suggestion';

Примеры

Базовый

tsx

import { AiSuggestionSimple, APPEARANCE, SIZE } from '@cloud-ru/ds-ai-suggestion';
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';

export function Basic() {
  return (
    <AiSuggestionSimple label='Label text' icon={<PlaceholderSVG />} appearance={APPEARANCE.Primary} size={SIZE.M} />
  );
}

AiSuggestionParent

Компонент Suggestion / Parent — триггер с chevron; по клику в одну строку показывает вложенные AiSuggestionSimple и другие AiSuggestionParent (рекурсивно). Список задаётся пропом items. Повторный клик по триггеру сворачивает группу.

expanded / onExpandedChange — controlled / uncontrolled раскрытие (без expanded по умолчанию свёрнут).
В свёрнутом виде триггер neutral (Figma: Activated=Off), в раскрытом — primary (Activated=On).
Вложенные подсказки в items всегда рендерятся как AiSuggestionSimple с appearance="primary"; проп appearance для элементов списка недоступен.
Элемент items: без type или type: 'suggestion' → AiSuggestionSimple; type: 'parent' → вложенная группа.

Раскрывающаяся группа

tsx

import { AiSuggestionParent, CHILD_TYPE } from '@cloud-ru/ds-ai-suggestion';
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';

export function ParentExpandable() {
  return (
    <AiSuggestionParent
      label='Label text'
      icon={<PlaceholderSVG />}
      items={[
        { label: 'Suggestion 1', icon: <PlaceholderSVG /> },
        { label: 'Suggestion 2' },
        {
          type: CHILD_TYPE.Parent,
          label: 'More',
          icon: <PlaceholderSVG />,
          items: [
            { label: 'Nested A' },
            {
              label: 'More nested',
              items: [{ label: 'Nested B' }, { label: 'Nested C' }],
            },
          ],
        },
      ]}
    />
  );
}

Controlled parent

tsx

import { AiSuggestionParent, SIZE } from '@cloud-ru/ds-ai-suggestion';
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';
import { useState } from 'react';

export function ControlledParent() {
  const [expanded, setExpanded] = useState(false);

  return (
    <AiSuggestionParent
      label='Suggested actions'
      icon={<PlaceholderSVG />}
      size={SIZE.S}
      expanded={expanded}
      onExpandedChange={setExpanded}
      items={[{ label: 'Summarize this thread' }, { label: 'Write follow-up email' }, { label: 'Create TODO list' }]}
    />
  );
}

Nested groups

tsx

import { AiSuggestionParent, CHILD_TYPE, SIZE } from '@cloud-ru/ds-ai-suggestion';
import { PlaceholderSVG } from '@cloud-ru/ds-icons/interface/system';

export function NestedParent() {
  return (
    <AiSuggestionParent
      label='Label text'
      icon={<PlaceholderSVG />}
      size={SIZE.S}
      items={[
        { label: 'Simple suggestion A' },
        {
          type: CHILD_TYPE.Parent,
          key: 'group-a',
          label: 'Group A',
          icon: <PlaceholderSVG />,
          items: [{ label: 'A 1' }, { label: 'A 2' }],
        },
        {
          type: CHILD_TYPE.Parent,
          key: 'group-b',
          label: 'Group B',
          icon: <PlaceholderSVG />,
          items: [
            { label: 'B 1' },
            {
              type: CHILD_TYPE.Parent,
              key: 'group-b-2',
              label: 'Group B.2',
              icon: <PlaceholderSVG />,
              items: [{ label: 'B 2.1' }],
            },
          ],
        },
      ]}
    />
  );
}

Свойства

AiSuggestionSimple

Types

PropsAiSuggestionSimpleProps

Prop	Type	Default	Required	Description
`appearance`	`"neutral" \| "primary"`	`neutral`	no	Внешний вид (Figma: Primary On/Off)
`className`	`string`	—	no	Дополнительный CSS-класс
`data-test-id`	`string`	—	no
`disabled`	`boolean`	`false`	no	Блокирует взаимодействие
`icon`	`ReactNode`	—	no	Иконка слева от текста
`label`	`string`	`Label text`	no	Текст подсказки
`size`	`"m" \| "s"`	`s`	no	Размер (Figma: Mobile Off → `s`, Mobile On → `m`)

Unions

Types

AiSuggestionSimpleProps

Unions

AiSuggestionParent

Types

PropsAiSuggestionParentInternalProps

Prop	Type	Default	Required	Description
`className`	`string`	—	no	Дополнительный CSS-класс
`data-test-id`	`string`	—	no
`defaultExpanded`	`boolean`	`false`	no	Uncontrolled — initial expanded
`disabled`	`boolean`	`false`	no	Блокирует взаимодействие
`expanded`	`boolean`	—	no	Controlled — раскрыт (Figma: Activated=On)
`icon`	`ReactNode`	—	no	Иконка слева от текста
`items`	`AiSuggestionParentItem[]`	`[]`	no	Вложенные подсказки и группы
`label`	`string`	`Label text`	no	Текст на триггере
`onExpandedChange`	`((expanded: boolean) => void)`	—	no	Колбэк toggle (controlled и uncontrolled)
`onItemClick`	`((index: number, event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)`	—	no	Колбэк клика по вложенной подсказке
`shown`	`boolean`	`true`	no	Родительская группа раскрыта — управляет видимостью вложенной ветки
`size`	`"m" \| "s"`	`s`	no	Размер (Figma: Mobile Off → `s`, Mobile On → `m`)

`AiSuggestionParentNestedItem`interface

Prop	Type	Default	Required
`disabled`	`boolean \| undefined`	—	no
`icon`	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined`	—	no
`items`	`AiSuggestionParentItem[] \| undefined`	—	no
`key`	`string \| undefined`	—	no
`label`	`string \| undefined`	—	no
`type`	`"parent"`	—	no

`AiSuggestionParentSuggestionItem`interface

Prop	Type	Default	Required
`disabled`	`boolean \| undefined`	—	no
`icon`	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined`	—	no
`items`	`undefined`	—	no
`key`	`string \| undefined`	—	no
`label`	`string \| undefined`	—	no
`onClick`	`((event: MouseEvent<HTMLButtonElement>) => void) \| undefined`	—	no
`type`	`"suggestion"`	—	no

AiSuggestion

Демо

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

Анатомия

Appearance

Size

Установка

Примеры

Базовый

AiSuggestionParent

Раскрывающаяся группа

Controlled parent

Controlled parent

Nested groups

Nested groups

Свойства

AiSuggestionSimple

Types

Unions

Appearanceunion

Sizeunion

Types

AiSuggestionSimpleProps

Unions

Appearance

Size

AiSuggestionParent

Types

AiSuggestionParentItemtype

AiSuggestionParentNestedIteminterface

AiSuggestionParentSuggestionIteminterface

Unions

Sizeunion

Types

AiSuggestionParentInternalProps

AiSuggestionParentItem

AiSuggestionParentNestedItem

AiSuggestionParentSuggestionItem

Unions

Size

Storybook

Figma

`Appearance`union

`Size`union

`AiSuggestionParentItem`type

`AiSuggestionParentNestedItem`interface

`AiSuggestionParentSuggestionItem`interface

`Size`union