ChatChoiceListNon officiel
Les réponses entre lesquelles choisir, posées dans la bulle de l'assistant. Le choix fait reste dans le fil, coché.
Utilisation
import { ChatChoiceList } from "@monstera/ui"Dans la bulle
La liste se pose dans une ChatBubble, sous son texte : la bulle prend alors toute sa largeur, et le panneau blanc s'y inscrit à 8 px des bords, coins concentriques. Chaque option tient sur deux niveaux, le libellé puis son détail en texte secondaire, avec un picto de 24 px devant. Toucher une option la choisit.
Le choix fait
value pose le choix : l'option passe en gras avec une coche, les autres s'éteignent et ne se touchent plus, picto compris. La liste reste dans le fil, et la poser depuis l'état de l'écran la remonte figée au retour d'une autre page. La réponse suivante mène ailleurs : c'est un Button à contour avec une flèche, pas une option de plus.
Au-delà de trois
Au-delà de visibleCount, trois par défaut, la liste montre ses premières options puis « Voir les N autres », qui la déplie sur place et donne le focus à la première option dévoilée. moreLabel en change le libellé.
Un choix ou une action
Un choix reste dans la conversation : ses options vivent dans la bulle qui pose la question, et le choix fait s'y relit après coup. Une action mène à une autre page : c'est un Button outlined sm avec une flèche à droite, sous la dernière bulle, empilé avec les autres actions, la principale en tête. Pas de bouton plein dans le fil.
Laisser la coche se voir avant de quitter l'écran : dans le prototype chatbot, la page suivante s'ouvre 300 ms après le toucher.
API
Prop
Type