Bubble

AI-примитив пузыря сообщения чата на shadcn / Radix Slot. Стиль задаётся через variant, сторона — через align (start — входящее, end — исходящее). Фон и паддинги живут на BubbleContent, а BubbleReactions — плавающая пилюля реакций поверх пузыря. BubbleGroup держит вертикальный стек сообщений.

Variants — готовые конфигурации компонента: один и тот же компонент с разными преднастроенными пропсами. Витрина состояний (напр. обычный Select и Select с расширенной информацией — два варианта).

Examples — приёмы в коде: как решить задачу. Напр. как разные Data Provider’ы работают с компонентом (рецепты использования).

variant: default / secondary / muted / tinted / outline / ghost / destructive. Стиль применяется к вложенному BubbleContent.

Загрузка демо…

align="start" прижимает пузырь влево (входящее сообщение), align="end" — вправо (исходящее). Оборачивайте в BubbleGroup, чтобы получить вертикальный стек.

Загрузка демо…