Kit d'interface d'assistant IA : 30 composants de conversation, états de génération et panneau latéral (HTML, Tailwind, Astro, clair et sombre)

Ce kit s’adresse aux designers et aux développeurs front-end qui construisent l’interface d’un produit à base d’IA : un assistant autonome, une conversation intégrée à un logiciel en ligne, un outil interne. Il réunit les écrans et les états qu’une telle interface doit prévoir, déjà dessinés, codés et contrôlés : la réponse en cours de génération et son bouton d’arrêt, l’état « réflexion », l’appel d’outil, l’erreur avec réessayer, la limite atteinte, la perte de connexion, les retours sur une réponse, l’historique et sa recherche, le panneau d’aperçu. Chaque composant existe en composant Astro aux props typées et en HTML statique, avec la même feuille de style. L’apparence est volontairement neutre, sans imiter un assistant existant : vous l’habillez aux couleurs de votre produit en modifiant les tokens. Les textes de démonstration sont en anglais (voir « Langue des textes » plus bas).

30 composants, dans astro/ et, avec tous leurs états, dans html/sections/ :

• Conversation :
  • message de l’utilisateur (UserMessage) ;
  • réponse rédigée, avec titres et listes (AnswerProse) ;
  • réponse en cours de génération, avec curseur et bouton d’arrêt, dans une région annoncée poliment aux lecteurs d’écran (StreamingAnswer) ;
  • bloc de code avec bouton de copie (CodeBlock) ;
  • tableau de données (DataTable) ;
  • sources numérotées et renvois dans le texte (Sources, Cite) ;
  • pièce jointe (FileCard).
• Génération et retours :
  • état « réflexion » (ThinkingState) ;
  • appel d’outil repliable, en cours ou terminé (ToolCall) ;
  • actions sur une réponse : utile, pas utile, copier, régénérer (FeedbackActions) ;
  • motifs d’un avis négatif (FeedbackReasons) ;
  • modification d’un message envoyé (MessageEdit) ;
  • versions successives d’une réponse (AnswerVersions).
• États et messages :
  • bouton de retour au dernier message (JumpToLatest) ;
  • erreur avec bouton réessayer (ErrorRetry) ;
  • limite d’usage atteinte (LimitReached) ;
  • barre hors ligne (OfflineBar) ;
  • notification (Toast).
• Saisie :
  • zone de saisie multiligne (Composer) ;
  • sélecteur de mode générique (ModeSelector) ;
  • suggestions de départ (StarterSuggestions).
• Navigation et historique :
  • barre latérale (Sidebar) ;
  • liste des conversations (ConversationList) ;
  • recherche dans l’historique, avec les résultats surlignés (HistorySearch) ;
  • menu d’une conversation (RowMenu) ;
  • dialogue de confirmation (ConfirmDialog).
• Écran et réglages :
  • barre supérieure (TopBar) ;
  • panneau latéral d’aperçu à onglets (PreviewPanel) ;
  • écran d’accueil vide (EmptyHome) ;
  • réglages de confidentialité (PrivacySettings).

Autour de ces composants :

• 46 variantes et états, repérés dans la page de démonstration.
• 4 écrans assemblés : accueil, conversation, conversation avec panneau d’aperçu, historique. Une page d’exemple (PageExample.astro) les réunit avec les données fictives de sample-data.ts.
• 42 fichiers .astro : les composants, les 4 écrans, la page d’exemple et les aides (tour de parole, pictogramme, bouton à pictogramme, sprite, script).
• 4 fichiers TypeScript : la forme des données (types.ts), les données d’exemple, la recherche dans l’historique et la liste des noms de pictogrammes.
• 32 fichiers HTML dans html/sections/ : un par composant, plus le sprite et le script à placer une fois par page. La page complète est html/index.html.
• 37 pictogrammes SVG, réunis dans un sprite.
• 31 tokens de couleur, chacun en mode clair et en mode sombre.
• Un guide d’installation en anglais, astro/LISEZMOI-astro.txt.
• 83 fichiers au total.

Organisation des fichiers :

• astro/ : les composants .astro, les fichiers TypeScript et le guide.
• html/ : index.html et sections/*.html.
• html/css/ : tokens.css et kit.css.
• tailwind/ : theme.css.

Une interface, sans modèle ni serveur

Le kit ne contient aucun modèle d’IA, aucun appel à un service et aucun serveur. Son script montre les états dans le navigateur : copie avec confirmation, avis utile ou pas utile et formulaire de motifs, menus au clavier, barre latérale sur petit écran, arrêt d’une réponse en cours, suggestions qui remplissent la zone de saisie, onglets du panneau et recherche dans l’historique. L’envoi d’un message, la réception de la réponse au fil de l’eau, l’enregistrement et la suppression des conversations restent à brancher sur votre propre code : le guide indique où.

Fabrication et IA

Le code du kit (composants Astro, HTML, CSS, thème Tailwind) et les pictogrammes du sprite ont été produits avec un assistant d’IA, puis relus et contrôlés avant la mise en vente.

Langue des textes

Les textes de démonstration, les libellés et le guide sont en anglais neutre, avec des données fictives. Dans les composants Astro, les textes passent par les props et les données d’exemple ; dans la version HTML, ils se modifient directement dans le balisage.

• Astro : composants .astro aux props typées en TypeScript, et un seul script intégré, en JavaScript sans dépendance (KitScript). Les versions prises en charge sont indiquées dans le guide d’installation.
• HTML et CSS : tokens.css (mode clair et mode sombre) et kit.css, déjà compilée, sans CDN. Ces fichiers s’utilisent dans n’importe quel projet web, avec ou sans framework. Chaque fichier de html/sections/ se colle dans une page avec le sprite et le script.
• Thème Tailwind v4 : tailwind/theme.css reprend les mêmes tokens sous forme de @theme, pour les utiliser en classes utilitaires. Il est facultatif : kit.css suffit si votre projet n’utilise pas Tailwind.
• SVG : les 37 pictogrammes du sprite, dont le trait prend la couleur du texte. Le guide explique comment en ajouter un.

Tout passe par des tokens : espacements sur une grille de 4 px, tailles, rayons, ombres et couleurs. Le mode sombre suit le réglage du système ; l’attribut data-theme sur la balise html force l’un ou l’autre mode. Les composants se placent selon la largeur de leur conteneur, pas de la fenêtre : un écran fonctionne de la même façon dans une page, une fenêtre modale ou une colonne étroite.

Les polices Atkinson Hyperlegible Next et Atkinson Hyperlegible Mono (licence SIL OFL 1.1) ne sont pas incluses dans les fichiers : elles sont chargées par lien depuis un service public de polices, une ligne à remplacer si vous les hébergez vous-même. Le kit ne contient pas de fichier de maquette pour un outil de design.

Contrôles faits avant la mise en vente, en mode clair et en mode sombre : aucune violation relevée par axe-core sur la page de démonstration et sur les sections, aucun défilement horizontal à 375, 768, 1 024 et 1 440 px de large, tous les espacements mesurés sur la grille de 4 px, et un score Lighthouse sur mobile de 100 en accessibilité. Au clavier, chaque élément atteint affiche un anneau de focus visible.

Le kit est vendu sous licence commerciale : vous pouvez l’utiliser dans vos projets et livrer à vos clients les produits construits avec ses composants. Vous ne pouvez pas revendre ni redistribuer le kit ou ses fichiers, ni remettre le kit d’origine à un client pour qu’il le réutilise ailleurs. Les polices gardent leur propre licence.

• Pour comparer les outils qui génèrent une interface à partir d’une consigne : notre comparatif de deux générateurs d’interfaces par IA.
• Pour choisir un outil d’IA selon votre façon de concevoir : quel outil d’IA choisir pour designer.

1.0.0 (11 novembre 2026) : première version.