https://neobrutalism.com/fr/blocks/ai/ai-chat-assistant-interface
Interface de chat assistant IA
Intelligence artificielle · Source Pro
Une interface de chat complète en un seul fichier : une barre d'en-tête avec des contrôles rapides, un fil déroulant de bulles utilisateur et assistant qui conserve sa propre position de défilement, un indicateur de saisie à trois points pendant qu'une réponse est en attente, et une zone de composition qui envoie sur Entrée et ajoute une nouvelle ligne avec Maj+Entrée. La réponse est simulée par un délai, si bien que le bloc fonctionne sans backend tout en montrant chaque état dont une intégration réelle a besoin.
Intelligence artificielle
Interface de chat assistant IAOuvrir l'aperçu en direct
- Hero, tarifs & auth
- Aperçu à chaque breakpoint
- Copiez le code
- Installable via MCP
- Radix · Base UI · React Aria
- 158 blocs prêts à l'emploi
- Sections de page qui livrent
- Dashboards & marketing
- Pro débloque le code
- Layouts prêts à coller
Adoré par les devs, designers
& créateurs
Je suis tombé sur ton kit UI et je l’ai adopté aussitôt. Bluffé de voir que c’est récent, activement maintenu et sans cesse amélioré — super boulot ! 🤘
Ziv Reich, Développeur logiciel Je voulais juste dire : super travail sur neobrutalism.com. J’adore vraiment. Je suis nul en design, alors c’était génial. Je l’ai utilisé sur mon site perso.
Paul Bratslavsky, Créateur de Coding With Paul J’ai enfin refait mon site perso avec Neobrutalism.com — super bibliothèque, trop simple pour démarrer !
Cameron Blackwood, Créateur de contenu Neobrutalism.com est l’une de mes bibliothèques de composants UI rétro préférées — des composants qui se shippent vraiment.
Zhengyang Hou, Indie hacker l’une de mes bibliothèques ui préférées pour le web. beau travail — j’espère que ça ira encore plus loin.
Taseen Tanvir, Fondateur & designer Je viens d’essayer Neobrutalism.com Pro — un kit UI qui ne ressemble pas à tout le reste. Les blocs néobrutalistes 🔥 m’ont permis de prototyper des layouts barrés bien plus vite.
Nitesh Padghan, Rédacteur fantôme Un design de landing page magnifique, avec un équilibre et un rythme parfaits. La palette de couleurs associée aux animations crée une expérience utilisateur exceptionnelle.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Je suis vraiment impressionné par le design livré. Le résultat final correspond exactement à ce que j’avais imaginé.
Desmond, Co-fondateur @ VectorlabsVentures En tant que dirigeant d’agence, je passais souvent des semaines à peaufiner les landing pages de mes clients. Avec Neobrutalism.com, j’insère un template, j’ajuste le texte, et je suis prêt à shipper.
Duke Opoku Amankwah, Fondateur @ Midas Les templates ne sont pas seulement superbes visuellement : ils sont aussi extrêmement bien structurés. Ils nous ont fait gagner des semaines de développement.
Abiola Braimah, Développeur @ Studio IX Qualité remarquable et souci du détail. Le design responsive fonctionne parfaitement sur tous les appareils.
Acromond X., Co-fondateur @ VectorlabsVentures Intégrer ces templates à notre workflow a nettement réduit notre cycle de développement. Excellent travail.
Raquib S., Développeur backend Ces templates sont devenus notre ressource de référence. Le code est propre, bien documenté et facilement personnalisable.
Hallic M., Développeur @ AtlasLabs Les templates Neobrutalism.com trouvent le juste équilibre entre esthétique et fonctionnalité. Un vrai game-changer pour nos projets.
Ibrahim S., Lead frontend @ ScaleUp Un support remarquable et des templates premium. Le ROI de ces templates est phénoménal.
Kevin K., CEO @ WebCraft Les templates Neobrutalism.com ont complètement transformé notre façon d’aborder les projets clients. La qualité du code est exceptionnelle et les designs vraiment world-class.
Danny G., Fondateur de DevStack J’ai utilisé beaucoup de bibliothèques de templates, mais Neobrutalism.com se démarque par son attention à la performance et à une architecture de code propre.
Ian D., CTO @ Wavelength Les animations et micro-interactions de ces templates sont absolument bluffantes. Le meilleur investissement pour notre équipe design.
Ben S., Lead designer @ PixelPerfect En tant que fondateur non technique, les templates Neobrutalism.com nous ont permis de lancer notre MVP en un temps record sans sacrifier la qualité du design. Nos investisseurs ont été bluffés.
Matthew I., Fondateur de startup J’apprécie à quel point ces composants sont modulaires et bien documentés. On a pu mélanger des pièces de différents templates sans friction.
Garrett P., Lead frontend @ TechFusion Le ROI des templates Neobrutalism.com est incroyable. Nous avons radicalement réduit notre temps de développement tout en livrant des sites de meilleure qualité à nos clients.
Xavier C., Dirigeant d’agence
Questions
fréquentes
Comment le bloc Interface de chat assistant IA est construit, ce que vous pouvez modifier et quand l'utiliser à la place des autres dispositions ici.
Non. handleSend ajoute le message du visiteur, active isReplying, puis un setTimeout renvoie une réponse toute faite 1,5 seconde plus tard. C'est ce point précis qu'il faut remplacer : substituez le timeout par votre appel fetch ou de streaming, et conservez le drapeau isReplying, car l'indicateur de saisie, la désactivation du bouton d'envoi et le comportement de défilement en dépendent tous.
Chaque message comprend un id, un sender (user ou assistant), le contenu, ainsi qu'une heure d'affichage et un dateTime lisible par machine pour l'élément time. L'heure est formatée au moment de la création du message plutôt qu'au rendu, car formater une Date pendant le rendu fait diverger le serveur et le navigateur sur le fuseau horaire, et React signale alors une erreur d'hydratation au chargement.
Le panneau fait h-[36rem] sur téléphone et h-[44rem] à partir de sm, et seul le fil entre l'en-tête et la zone de composition défile. L'en-tête et la zone de composition sont des enfants flex à hauteur fixe, donc changer la hauteur du panneau ne modifie que la portion de fil visible. Utilisez une unité de viewport comme h-[80vh] si vous voulez qu'il remplisse une page entière plutôt qu'occuper une section.
Oui — ce sont trois entrées du tableau composerActions, chacune avec un label et une icône : supprimer une entrée retire le bouton correspondant. Ce sont des carrés de 44 px, taille minimale confortable pour une cible tactile, et chacun porte un aria-label avec son icône marquée aria-hidden, une icône seule n'ayant pas de nom accessible. Ce sont volontairement des boutons contourés, de sorte que seul le bouton d'envoi se distingue comme primaire.
Une version antérieure les teintait avec bg-chart-1, bg-chart-5 et bg-chart-2, avec des icônes par-dessus. Or les jetons de graphique changent de valeur entre clair et sombre : ces icônes étaient lisibles dans un thème et presque invisibles dans l'autre. Chaque surface colorée utilise désormais une paire de jetons — bg-primary avec text-primary-foreground, bg-card avec text-card-foreground — qui garantit un contraste stable quelle que soit la palette.
Le fil est un role log avec aria-live polite : un lecteur d'écran annonce les nouveaux messages sans interrompre, et l'indicateur de saisie porte une ligne « Assistant is typing » masquée visuellement plutôt que de reposer sur trois points animés. Le défilement fixe scrollTop directement sur le fil au lieu d'appeler scrollIntoView, et seulement après le premier envoi — scrollIntoView aurait sinon entraîné toute la page vers ce bloc au chargement.