https://neobrutalism.com/ru/blocks/ai/ai-chat-assistant-interface
Интерфейс AI-чата
Искусственный интеллект · Исходник Pro
Полноценная поверхность чата в одном файле: заголовочная панель с названием и быстрыми элементами управления, прокручиваемая лента сообщений пользователя и ассистента, сохраняющая собственную позицию прокрутки, индикатор набора текста из трёх точек, пока ответ ожидается, и композер, отправляющий сообщение по Enter и добавляющий новую строку по Shift+Enter. Ответ имитируется через таймаут, поэтому блок работает без бэкенда и показывает все состояния, нужные для реальной интеграции.
Искусственный интеллект
Интерфейс AI-чатаОткрыть живой превью
- Hero, цены и auth
- Предварительный просмотр каждой точки останова
- Скопировать исходный текст
- MCP готово к установке
- Radix · Base UI · React Aria
- 158 готовые блоки
- Доставляемые разделы страницы
- Информационные панели и маркетинг
- Pro разблокирует код
- Схемы с возможностью подключения без предварительной настройки
Любят разработчики, дизайнеры
и креаторы
Наткнулся на ваш UI-кит и сразу забрал. Новый, активно поддерживается и постоянно улучшается — отличная работа! 🤘
Ziv Reich, Разработчик ПО Просто хочу сказать: neobrutalism.com — отличная работа. Правда нравится. С дизайном у меня беда, так что это просто спасение. Поставил на свой личный сайт.
Paul Bratslavsky, Автор канала Coding With Paul Наконец-то пересобрал свой личный сайт на Neobrutalism.com — весёлая библиотека, очень легко стартовать!
Cameron Blackwood, Контент-креатор Neobrutalism.com — одна из моих любимых библиотек UI-компонентов в ретро-стиле: компоненты, которые реально можно ship’ить.
Zhengyang Hou, Индихакер одна из моих любимых ui-библиотек для веба. классная работа, Ариф. Надеюсь, у проекта всё сложится по-крупному.
Taseen Tanvir, Основатель и дизайнер Попробовал Neobrutalism.com Pro — UI-кит, который не похож на всё остальное. Необруталистские блоки 🔥 ускорили прототипы странных макетов.
Nitesh Padghan, Гострайтер Красивый дизайн лендинга с идеальным балансом и ритмом. Цветовая палитра вместе с анимациями создаёт исключительный пользовательский опыт.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Я по-настоящему впечатлён дизайном, который они сдали. Итоговый продукт совпал с тем, что я себе представлял.
Desmond, Сооснователь @ VectorlabsVentures Как владелец агентства я обычно трачу недели на доводку макетов лендингов для клиентов. С Neobrutalism.com я подключаю шаблон, правя copy — и готов к релизу.
Duke Opoku Amankwah, Основатель @ Midas Шаблоны не только визуально сильные, но и невероятно хорошо структурированы. Сэкономили нам недели разработки.
Abiola Braimah, Разработчик @ Studio IX Выдающееся качество и внимание к деталям. Адаптивный дизайн безупречно работает на всех устройствах.
Acromond X., Сооснователь @ VectorlabsVentures Интеграция этих шаблонов в наш workflow заметно сократила цикл разработки. Отличная работа.
Raquib S., Backend-разработчик Эти шаблоны стали нашим основным ресурсом. Код чистый, хорошо документирован и легко кастомизируется.
Hallic M., Разработчик @ AtlasLabs Шаблоны Neobrutalism.com находят идеальный баланс между эстетикой и функциональностью. Настоящий game-changer для наших проектов.
Ibrahim S., Frontend Lead @ ScaleUp Отличная поддержка и шаблоны премиум-качества. ROI этих шаблонов феноменален.
Kevin K., CEO @ WebCraft Шаблоны Neobrutalism.com полностью изменили наш подход к клиентским проектам. Качество кода исключительное, а дизайны — действительно world-class.
Danny G., Основатель DevStack Я пользовался многими библиотеками шаблонов, но Neobrutalism.com выделяется вниманием к оптимизации производительности и чистой архитектуре кода.
Ian D., CTO в Wavelength Анимации и микроинтеракции в этих шаблонах абсолютно потрясающие. Лучшая инвестиция для нашей design-команды.
Ben S., Lead Designer в PixelPerfect Как нетехнический основатель, шаблоны Neobrutalism.com помогли нам запустить MVP в рекордные сроки без компромиссов по качеству дизайна. Наши инвесторы были в восторге.
Matthew I., Основатель стартапа Мне нравится, насколько модульны и хорошо документированы эти компоненты. Мы без трения смешиваем куски из разных шаблонов.
Garrett P., Frontend Lead в TechFusion ROI шаблонов Neobrutalism.com невероятен. Мы резко сократили время разработки и при этом отдаём клиентам сайты более высокого качества.
Xavier C., Владелец агентства
Часто задаваемые
вопросы
Как собран блок Интерфейс AI-чата, что вы можете изменить и когда его использовать вместо других макетов.
Нет. handleSend добавляет сообщение посетителя, устанавливает isReplying, а setTimeout через 1,5 секунды возвращает одну заготовленную строку. Именно это место нужно заменить: подставьте вместо таймаута свой fetch или потоковый вызов и сохраните флаг isReplying, поскольку от него зависят индикатор набора, отключённая кнопка отправки и поведение прокрутки.
Каждое сообщение — это id, отправитель user или assistant, содержимое, а также отображаемое время и машиночитаемое значение dateTime для элемента time. Время форматируется в момент создания сообщения, а не при рендере, поскольку форматирование Date во время рендера приводит к рассинхронизации часовых поясов сервера и браузера, и React сообщает о несовпадении при гидратации.
Панель имеет высоту h-[36rem] на телефонах и h-[44rem] от sm и выше, а прокручивается только лента между заголовком и композером. И заголовок, и композер — гибкие дочерние элементы фиксированной высоты, поэтому изменение высоты панели меняет лишь то, сколько ленты видно. Используйте единицу вьюпорта, например h-[80vh], если хотите, чтобы чат заполнял всю страницу, а не помещался в секцию.
Да — это три записи в массиве composerActions, у каждой есть подпись и иконка, поэтому удаление записи убирает кнопку. Они представляют собой квадраты 44px, потому что это минимальный комфортный размер для касания, и у каждой есть aria-label, а её иконка помечена aria-hidden, поскольку у одной иконки нет доступного имени. Это контурные кнопки намеренно, чтобы только кнопка отправки читалась как основная.
В более ранней версии их окрашивали в bg-chart-1, bg-chart-5 и bg-chart-2 и печатали иконки поверх. Токены диаграмм имеют разные значения в светлой и тёмной теме, поэтому эти иконки были читаемы в одной теме и почти невидимы в другой. Теперь каждая цветная поверхность здесь использует пару токенов — bg-primary с text-primary-foreground, bg-card с text-card-foreground, — что сохраняет контраст неизменным при любой палитре.
Лента имеет role log и aria-live polite, поэтому программа чтения с экрана объявляет о новых сообщениях, не прерывая пользователя, а индикатор набора несёт визуально скрытую строку «Assistant is typing» вместо того, чтобы полагаться на три анимированные точки. Прокрутка задаёт scrollTop самой ленте вместо вызова scrollIntoView, причём только после первой отправки — scrollIntoView перетащил бы всю страницу к этому блоку при загрузке.