AiFieldNotice

@cloud-ru/ds-ai-field-notice — Композиция AiFieldBanner и AiQueue для контекстных уведомлений над AI-полем.

AiFieldNotice — композиция над AiFieldBanner и AiQueue для AI-полей. Один корневой компонент, один баннер на экран: сценарий выбирается через variant, текст, иконка и тип баннера предзашиты.

Мастер-ширина — 400px. Размеры наследуются от AiFieldBanner: s — desktop, m — mobile.

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

• Контекстное уведомление над AI-полем ввода — password, SSH, управление ВМ, поддержка или очередь задач.
• Нужен готовый сценарий из Figma Field Notice без ручной сборки AiFieldBanner.

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

• Универсальный баннер с произвольным текстом и типом:
  • используйте @cloud-ru/ds-ai-field-banner напрямую.
• Inline-alert в контенте страницы:
  • используйте @cloud-ru/ds-alert.

Анатомия

Variant

variant — discriminated union: набор пропсов зависит от значения. В каждый момент рендерится один баннер.

• password — безопасный ввод пароля. Баннер security, иконка PasswordLock. Ротирующее описание с hover на «Гига не получит ваши данные».
• ssh — безопасный ввод SSH-ключа. Баннер security, иконка PasswordLock. Та же анимация описания, финальный кадр — «Введите SSH-ключ».
• vmAgent — управление виртуальной машиной. Баннер agentic, без иконки. Ротация между заголовком и строкой vmName / vmIp. Обязательны vmName и vmIp.
• support — чат с инженером. Баннер help, иконка Headphones, статичное описание.
• queue — очередь задач агента. Information-баннер с AiQueue внутри. Обязателен проп queue (AiQueueProps). onActionClick не используется.

<AiFieldNotice variant='password' onActionClick={handleCancel} />

<AiFieldNotice
  variant='vmAgent'
  vmName='my-lovely-vm'
  vmIp='93.7.94.11'
  onActionClick={handleNewSession}
/>

<AiFieldNotice variant='queue' queue={{ steps, defaultOpen: true }} />

Size (default s на desktop, m на mobile)

Общий size на корне — передаётся в AiFieldBanner и внутренние части описания. Как размер выбирается на mobile — раздел «Адаптивность».

• s — desktop (Mobile Off).
• m — mobile (Mobile On).

Action

Для password, ssh, support, vmAgent — текстовая кнопка справа с предзашитой подписью (VARIANT_ACTION_LABELS) и обработчиком onActionClick.

При variant='queue' action-слот не используется — управление очередью через пропсы queue.

Animated description

Для password и ssh — AiFieldNoticeAnimatedDescription: автосмена кадров до финального промпта («Введите пароль» / «Введите SSH-ключ»), затем при hover на баннер — кадр «Гига не получит ваши данные».

Для vmAgent — ротация между заголовком и блоком vmName / vmIp без hover-кадра.

Установка

pnpm add @cloud-ru/ds-ai-field-notice

import { AiFieldNotice, SIZE, VARIANT } from '@cloud-ru/ds-ai-field-notice'

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

Password

Безопасный режим с ротирующим описанием

import { AiFieldNotice, VARIANT } from '@cloud-ru/ds-ai-field-notice';

export function Password() {
  return <AiFieldNotice variant={VARIANT.Password} onActionClick={() => undefined} />;
}

SSH

Безопасный режим для SSH-ключа

import { AiFieldNotice, VARIANT } from '@cloud-ru/ds-ai-field-notice';

export function Ssh() {
  return <AiFieldNotice variant={VARIANT.Ssh} onActionClick={() => undefined} />;
}

Support

Чат с инженером

import { AiFieldNotice, VARIANT } from '@cloud-ru/ds-ai-field-notice';

export function Support() {
  return <AiFieldNotice variant={VARIANT.Support} onActionClick={() => undefined} />;
}

VM Agent

Режим управления ВМ с vmName и vmIp

import { AiFieldNotice, VARIANT } from '@cloud-ru/ds-ai-field-notice';

export function VmAgent() {
  return (
    <AiFieldNotice variant={VARIANT.VmAgent} vmName='my-lovely-vm' vmIp='93.7.94.11' onActionClick={() => undefined} />
  );
}

Queue

Очередь задач агента в information-баннере

import { AI_QUEUE_STEP_STATE, AiFieldNotice, VARIANT } from '@cloud-ru/ds-ai-field-notice';

const steps = [
  { label: 'Step Description', state: AI_QUEUE_STEP_STATE.Done },
  { label: 'Step Description', state: AI_QUEUE_STEP_STATE.Error },
  { label: 'Step Description', state: AI_QUEUE_STEP_STATE.Done },
  { label: 'Step Description', state: AI_QUEUE_STEP_STATE.Progress },
  { label: 'Step Description', state: AI_QUEUE_STEP_STATE.Planned },
];

export function Queue() {
  return (
    <AiFieldNotice
      variant={VARIANT.Queue}
      queue={{
        steps,
        defaultOpen: true,
      }}
    />
  );
}

Props

AiFieldNoticeProps — discriminated union по variant:

• queue — только при variant='queue'.
• vmName, vmIp — только при variant='vmAgent'.
• onActionClick — для остальных variant, кроме queue.

AiFieldNoticeProps

Смотри также

• @cloud-ru/ds-ai-field-banner — базовый баннер под полем ввода.
• @cloud-ru/ds-ai-queue — очередь задач для variant='queue'.

Адаптивность

Размер Notice зависит от раскладки AdaptiveProvider. Обычный проп size задаёт размер на desktop, а на mobile действует пресет AI_FIELD_BANNER_LAYOUT_PRESETS:

Чтобы изменить размер на mobile, передайте layoutPresets={{ mobile: { size: 's' } }}. Пресет нужен потому, что макет задаёт отдельный мобильный баннер.