shadcn/ui выпустил первую партию компонентов для чата — MessageScroller, Message, Bubble, Attachment и Marker. Это не финальный релиз, а начало: каждую часть переосмысляют по отдельности, чтобы потом склеивать в готовый интерфейс.
MessageScroller — это контейнер для скролла в диалоге. Он берёт на себя всё, что легко сделать криво: якорные повороты, стрим ответов, восстановление сохранённой переписки, догрузку истории, прыжок к сообщению и отслеживание видимости. При этом он не касается сообщений, AI-состояния, транспорта или модели — разработчик подкладывает свой рендерер контента. Для тех, кому не нужна стилизация, есть и headless-версия в @shadcn/react.
Message отвечает за строку в чате: аватар, выравнивание, заголовок, контент, футер и группировку сообщений. Bubble рисует само сообщение — варианты, выравнивание, реакции, ссылки, кнопки и сворачиваемый текст. Attachment показывает файлы и картинки с медиа, метаданными, статусом загрузки и триггером на полный просмотр. Marker — это статусы, системные заметки, обрамлённые строки и разделители вроде «Думает…» или даты. Всё задумано маленьким и модульным, чтобы собирать из этого не только AI-чаты, но и тикеты поддержки, командные треды или продуктовые диалоги.
Ещё добавили две CSS-утилиты. scroll-fade создаёт затухание по краям скролла — работает на MessageScroller, ScrollArea и любых длинных списках без наложения оверлеев. shimmer — текстовая анимация для живых статусов вроде «Генерирую ответ…» или «Thinking…». Обе утилиты уже в shadcn/tailwind.css, так что у проектов, инициализированных через npx shadcn@latest init, они есть по умолчанию.
Параллельно появился пакет @shadcn/react с headless-компонентами. Пока там только message-scroller, но вся логика якорения, автоследования, сохранения препанда и видимости живёт именно в нём, а штуки из shadcn/ui уже просто натягивают стили. Это позволяет менять визуал без потери поведения.
Авторы подчёркивают: это не замена AI Elements. Релиз про то, чтобы принести базовые блоки чата в shadcn/ui постепенно. Если уже используете AI Elements — ничего ломать не надо, просто попробуйте новые компоненты, когда понадобится свежая абстракция или поддержка Radix и Base UI. Задача — дать возможность подменять части по одной, собирая интерфейс поверх того, что уже есть.