AI Conversation
Composez une fenêtre d'affichage de conversation sensible au lecteur avec des messages et des commentaires explicites.
Composez votre conversationLien vers la section
AIConversation affiche une liste de messages déroulante et étiquetée. Il suit le nouveau contenu alors que le lecteur est à la fin et conserve leur position quand ils font défiler vers l'arrière. Votre application fournit des messages et du transport ; ce composant ne fait aucune demande de modèle.
Disponibilité du forfait
AIConversation, AIMessage et AIMessageActions sont introduits par la
conversation primitives minor Changeset. Utilisez l’espace de travail du
référentiel jusqu’à ce que cette version soit publiée. Ils ne sont pas
exportés par @pycolors/ui@1.6.1 ou plus tôt.
Suivez le lecteur
Retourner explicitement
Garder la propriété de l'application
AperçuLien vers la section
You
Comment puis-je rendre la prochaine étape plus claire pour la personne qui utilise cette interface?Assistant
Commencez avec un résultat clair et gardez la récupération visible. Il s'agit d'une réponse d'échantillon fixe.You
Comment puis-je rendre la prochaine étape plus claire pour la personne qui utilise cette interface?Assistant
Commencez avec un résultat clair et gardez la récupération visible. Il s'agit d'une réponse d'échantillon fixe.You
Comment puis-je rendre la prochaine étape plus claire pour la personne qui utilise cette interface?Assistant
Commencez avec un résultat clair et gardez la récupération visible. Il s'agit d'une réponse d'échantillon fixe.
Faites défiler vers le haut, puis ajoutez un message : votre position de lecture reste en place. Choisissez Jump to latest pour reprendre la suite. Aucun modèle n'est connecté.
L'exemple s'exécute ici dans la documentation. Le lien Explorer apparaît lorsque cette histoire est disponible dans le catalogue publié ; sinon, utilisez cet aperçu en ligne.
Composition contrôléeLien vers la section
"use client";
import { AIConversation, AIMessage, AIMessageActions } from "@pycolors/ui";
type Message = { id: string; author: string; text: string };
export function Conversation({ messages }: { messages: Message[] }) {
return (
<AIConversation
label="Support conversation"
messagesLabel="Support messages"
>
{messages.map((message) => (
<AIMessage
key={message.id}
author={message.author}
actions={
<AIMessageActions
value={message.text}
copyAriaLabel={`Copy ${message.author} message`}
onCopy={(text) => navigator.clipboard.writeText(text)}
/>
}
>
{message.text}
</AIMessage>
))}
</AIConversation>
);
}Lieu AIComposer après la conversation. Gardez les erreurs de demande, réessayez et annulez chez votre consommateur, ou utilisez le AI Chat Bloquer pour toute la surface composée. Ce composant n'analyse pas Markdown ou HTML.
Comportement et accessibilitéLien vers la section
Fournir des messages sémantiquesLien vers la section
Les enfants font partie d’une liste ordonnée. Render AIMessage ou natif li éléments, avec des clés stables. L'état vide appartient en dehors de cette liste. Utilisez un sens label et messagesLabel lorsque plus d'une conversation apparaît sur la page.
Respecter la position de lectureLien vers la section
La fenêtre de focus suit le contenu et redimensionne les modifications à la fin. Le défilement de plus de 32 pixels des pauses suivantes. Retour vers la fin ou choix Aller au plus tard Je reprends. Les modifications de mise en page ne forcent pas un lecteur à revenir vers le bas. Sans ResizeObserver, les mises à jour enfants React suivent toujours.
Annoncer l'état de la demande dans votre demandeLien vers la section
La liste des messages n'est pas une région en direct: les tokens de diffusion ne doivent pas interrompre de manière répétée un lecteur d'écran. Fournir des annonces concises du statut de la demande en dehors de la liste. Le saut utilise le défilement immédiat et restaure le focus de la fenêtre sans mouvement animé. La vérification du clavier et du lecteur d'écran fait partie des vérifications d'intégration de votre application.
APILien vers la section
| Prop | Par défaut | Objet |
|---|---|---|
children | — | Éléments de liste sémantique, généralement des instances AIMessage |
label | Conversation | Nom de viewport accessible |
messagesLabel | Messages | Nom de liste ordonnée accessible |
jumpLabel | Jump to latest | Étiquette de bouton de retour visible |
viewportClassName | — | Remplacer la valeur par défaut max-h-[28rem] Style de viewport |
className, native div props | — | Attributs et style de l'emballage extérieur |
ref | — | HTMLDivElement externe, pas la fenêtre d'affichage interne |
Emplacements: ai-conversation et ai-conversation-viewport. Les classes d'appelants utilisent la norme PyColors cn() priorité. La fenêtre d'affichage possède son comportement de gestion du défilement et de focus. Utilisez une clé de composant stable pour réinitialiser une conversation entière.