https://neobrutalism.com/uk/blocks/ai/ai-chat-assistant-interface
Інтерфейс чат-асистента ШІ
Штучний інтелект · Вихідник Pro
Повноцінна поверхня чату в одному файлі: заголовна панель зі швидкими елементами керування, прокручувана стрічка бульбашок користувача й асистента, що зберігає власну позицію прокрутки, індикатор набору тексту з трьох крапок під час очікування відповіді, а також поле вводу, що надсилає повідомлення по Enter і додає новий рядок по Shift+Enter. Відповідь імітується через timeout, тож блок працює без бекенду й демонструє всі стани, потрібні для реальної інтеграції.
Штучний інтелект
Інтерфейс чат-асистента ШІВідкрити живий прев'ю
- 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., Власник агенції
Часто задавані
запитання
Як зібрано блок Інтерфейс чат-асистента ШІ, що ви можете змінити й коли його використовувати замість інших макетів.
Ні. handleSend додає повідомлення відвідувача, встановлює isReplying, а setTimeout повертає одну заготовлену репліку через 1,5 секунди. Саме це місце треба замінити: підставте свій виклик fetch або стрімінгу замість timeout і збережіть прапорець isReplying, оскільки на ньому тримаються індикатор набору тексту, вимкнена кнопка відправки та поведінка прокрутки.
Кожне повідомлення містить id, відправника user або assistant, вміст, а також час для показу і машиночитаний dateTime для елемента time. Час форматується в момент створення повідомлення, а не під час рендеру, оскільки форматування Date під час рендеру призводить до розбіжності часових поясів між сервером і браузером, і React повідомляє про невідповідність гідратації при завантаженні.
Панель — h-[36rem] на телефонах і h-[44rem] від sm і вище, і лише стрічка між заголовком і полем вводу прокручується. І заголовок, і поле вводу — це flex-елементи фіксованої висоти, тож зміна висоти панелі впливає лише на те, скільки стрічки видно. Використайте одиницю в'юпорту на кшталт 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 перетягнула б усю сторінку до цього блоку при завантаженні.