Chat UI
UI du chat
Une interface de messagerie rassemble des messages, les noms des expéditeurs, une zone d'écriture, les états d'envoi et les pièces jointes. Elle montre aussi comment corriger les erreurs.
V.Which pattern are you building?
YouA compact picker with search.
Un vrai exemple
Un chat IA sépare les messages de l'utilisateur et de l'assistant. Il diffuse les réponses, affiche les sources et offre les boutons Stop et Réessayer.
Parties principales
- 01Trigger or task context
- 02Primary control surface
- 03Feedback, focus, and dismissal
Utilisez-le lorsque
Utilisez-le lorsque prendre des tours dans le chat est la manière la plus claire de terminer la tâche.
Ne l'utilisez pas lorsque
Ne cachez jamais les étapes définies, les erreurs, les autorisations ou les actions irréversibles dans un chat vague.
Nom utilisé dans le code
message list + composer + status Avant d'expédier
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with UI du chat (Chat UI). User context: Un chat IA sépare les messages de l'utilisateur et de l'assistant. Il diffuse les réponses, affiche les sources et offre les boutons Stop et Réessayer. Recommended pattern: UI du chat (Chat UI). Why it fits: Utilisez-le lorsque prendre des tours dans le chat est la manière la plus claire de terminer la tâche. Do not use it when: Ne cachez jamais les étapes définies, les erreurs, les autorisations ou les actions irréversibles dans un chat vague. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Aucun standard officiel unique ne régit l’ensemble du terme. Sa signification peut varier selon les équipes, plateformes ou frameworks. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how UI du chat (Chat UI) is used now. Definition: Une interface de messagerie rassemble des messages, les noms des expéditeurs, une zone d'écriture, les états d'envoi et les pièces jointes. Elle montre aussi comment corriger les erreurs. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.