https://neobrutalism.com/vi/blocks/ai/ai-chat-assistant-interface
Giao diện trợ lý chat AI
Trí tuệ nhân tạo · Nguồn Pro
Một giao diện chat hoàn chỉnh gói gọn trong một tệp: thanh tiêu đề có tên và các điều khiển nhanh, một luồng tin nhắn dạng bong bóng của người dùng và trợ lý tự giữ vị trí cuộn riêng, một chỉ báo đang gõ ba chấm khi đang chờ phản hồi, và một ô soạn tin gửi bằng Enter và xuống dòng bằng Shift kèm Enter. Phản hồi được giả lập bằng một timeout, nên block chạy được mà không cần backend và vẫn thể hiện đủ mọi trạng thái mà một tích hợp thật cần có.
Trí tuệ nhân tạo
Giao diện trợ lý chat AIMở xem trước trực tiếp
- Hero, bảng giá & auth
- Xem trước mọi điểm dừng
- Sao chép mã nguồn
- MCP đã sẵn sàng cài đặt
- Radix · Base UI · React Aria
- 158 khối đúc sẵn
- Các phần trang được cung cấp
- Bảng điều khiển & tiếp thị
- Pro mở khóa mã
- Bố cục linh hoạt
Được yêu thích bởi nhà phát triển, nhà thiết kế
& người sáng tạo
Tình cờ thấy bộ UI kit và lấy về dùng ngay. Còn mới, duy trì tích cực và liên tục cải tiến — làm quá tuyệt! 🤘
Ziv Reich, Nhà phát triển phần mềm Chỉ muốn nói là bạn làm neobrutalism.com tuyệt lắm. Mình thích thật sự. Mình dở tệ khoản thiết kế nên cái này đúng là cứu tinh. Đã dùng cho trang cá nhân của mình.
Paul Bratslavsky, Nhà sáng tạo Coding With Paul Cuối cùng cũng dựng lại xong trang cá nhân với Neobrutalism.com — thư viện thú vị, rất dễ bắt đầu!
Cameron Blackwood, Nhà sáng tạo nội dung Neobrutalism.com là một trong những thư viện thành phần UI phong cách retro mình thích nhất — component ship được thật.
Zhengyang Hou, Indie hacker một trong những thư viện ui mình thích nhất cho web. làm tốt lắm — mong dự án tiến xa hơn nữa.
Taseen Tanvir, Nhà sáng lập & nhà thiết kế Vừa thử Neobrutalism.com Pro — UI kit không giống mọi thứ khác. Các khối neo-brutalist 🔥 giúp dựng layout kỳ quặc nhanh hơn hẳn.
Nitesh Padghan, Ghostwriter Thiết kế landing page đẹp, cân bằng và nhịp chảy hoàn hảo. Bảng màu kết hợp animation tạo trải nghiệm người dùng xuất sắc.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Tôi thực sự ấn tượng với thiết kế họ giao. Sản phẩm cuối khớp đúng với những gì tôi hình dung.
Desmond, Đồng sáng lập @ VectorlabsVentures Là chủ agency, tôi thường mất cả tuần hoàn thiện layout landing cho khách. Với Neobrutalism.com, tôi gắn template, chỉnh copy là sẵn sàng ship.
Duke Opoku Amankwah, Nhà sáng lập @ Midas Template không chỉ đẹp mắt mà còn cấu trúc cực tốt. Tiết kiệm cho chúng tôi cả tuần phát triển.
Abiola Braimah, Developer @ Studio IX Chất lượng vượt trội và chú ý đến chi tiết. Thiết kế responsive hoạt động mượt trên mọi thiết bị.
Acromond X., Đồng sáng lập @ VectorlabsVentures Tích hợp các template này vào quy trình đã rút ngắn đáng kể chu kỳ phát triển. Làm việc xuất sắc.
Raquib S., Backend Developer Những template này đã trở thành nguồn tham chiếu của chúng tôi. Code sạch, tài liệu tốt và dễ tùy biến.
Hallic M., Developer @ AtlasLabs Template Neobrutalism.com cân bằng hoàn hảo giữa thẩm mỹ và chức năng. Thật sự thay đổi cách làm dự án của chúng tôi.
Ibrahim S., Frontend Lead @ ScaleUp Hỗ trợ xuất sắc và template chất lượng premium. ROI của các template này thật ấn tượng.
Kevin K., CEO @ WebCraft Template Neobrutalism.com đã hoàn toàn thay đổi cách chúng tôi tiếp cận dự án khách. Chất lượng code xuất sắc và thiết kế đẳng cấp.
Danny G., Nhà sáng lập DevStack Tôi đã dùng nhiều thư viện template, nhưng Neobrutalism.com nổi bật nhờ tối ưu hiệu năng và kiến trúc code sạch.
Ian D., CTO tại Wavelength Animation và micro-interaction trong các template này thật sự ấn tượng. Khoản đầu tư tốt nhất cho team thiết kế.
Ben S., Lead Designer tại PixelPerfect Là founder không technical, template Neobrutalism.com giúp chúng tôi launch MVP kỷ lục mà không hy sinh chất lượng thiết kế. Nhà đầu tư rất ấn tượng.
Matthew I., Nhà sáng lập startup Tôi thích cách các component này modular và được tài liệu hóa tốt. Chúng tôi trộn ghép mảnh từ nhiều template rất mượt.
Garrett P., Frontend Lead tại TechFusion ROI của template Neobrutalism.com thật sự lớn. Chúng tôi giảm mạnh thời gian phát triển mà vẫn giao site chất lượng hơn cho khách.
Xavier C., Chủ agency
Câu hỏi thường
gặp
Cách xây dựng khối Giao diện trợ lý chat AI, những gì bạn có thể thay đổi, và khi nào nên sử dụng thay cho các bố cục khác ở đây.
Không. handleSend thêm tin nhắn của khách, set isReplying, và một setTimeout trả về một câu trả lời dựng sẵn sau 1.5 giây. Đó là điểm cần thay thế: đổi timeout bằng lệnh fetch hoặc streaming của bạn và giữ lại cờ isReplying, vì chỉ báo đang gõ, nút gửi bị vô hiệu hóa và hành vi cuộn đều dựa vào cờ đó.
Mỗi tin nhắn có một id, một sender là user hoặc assistant, nội dung, cùng cả một thời gian hiển thị và một dateTime dạng máy đọc được cho phần tử time. Thời gian được định dạng ngay khi tin nhắn được tạo ra thay vì lúc render, vì định dạng một Date trong lúc render khiến server và trình duyệt bất đồng về múi giờ và React sẽ báo lỗi lệch hydration khi tải trang.
Bảng dùng h-[36rem] trên điện thoại và h-[44rem] từ sm trở lên, và luồng tin nhắn giữa header và ô soạn tin là phần duy nhất có thể cuộn. Cả header lẫn ô soạn tin đều là các phần tử flex có chiều cao cố định, nên đổi chiều cao bảng chỉ đổi lượng luồng tin nhắn hiển thị được. Dùng đơn vị viewport như h-[80vh] nếu muốn nó lấp đầy cả trang thay vì nằm trong một mục.
Có — chúng là ba mục trong mảng composerActions, mỗi mục có một nhãn và một icon, nên xóa một mục sẽ xóa nút tương ứng. Chúng là các ô vuông 44px vì đó là kích thước chạm tối thiểu thoải mái, và mỗi nút có một aria-label với icon được đánh dấu aria-hidden, vì một icon đứng riêng không có tên truy cập. Chúng cố tình là nút outline, để chỉ nút gửi đọc như primary.
Một phiên bản trước đã tô chúng bằng bg-chart-1, bg-chart-5 và bg-chart-2 rồi in icon lên trên. Các token chart mang giá trị khác nhau ở chế độ sáng và tối, nên những icon đó đọc rõ ở chủ đề này nhưng gần như vô hình ở chủ đề kia. Mọi bề mặt có màu ở đây giờ đều dùng một cặp token — bg-primary với text-primary-foreground, bg-card với text-card-foreground — giúp giữ độ tương phản cố định dù bảng màu thay đổi thế nào.
Luồng tin nhắn có role log với aria-live polite, nên trình đọc màn hình thông báo tin mới đến mà không ngắt lời, và chỉ báo đang gõ mang một dòng chữ Assistant is typing ẩn trực quan thay vì chỉ dựa vào ba chấm hoạt hình. Việc cuộn set scrollTop trực tiếp trên luồng tin nhắn thay vì gọi scrollIntoView, và chỉ sau lần gửi đầu tiên — scrollIntoView sẽ kéo cả trang xuống block này khi tải.