- ¿Al final quedamos el sábado?
- Yo puedo por la tarde
Message qui monte dans le chat
Le texte quitte le champ et devient une bulle, puis passe d'envoyé à distribué et lu avant que l'autre personne réponde.
Réglages
Code
<div class="uvq15-cht"><header><span class="av" aria-hidden="true">L</span><div><b>Lola</b><small class="ty">en ligne</small></div></header><ol class="ls" aria-live="polite"><li class="in"><span class="tx">Alors, on se voit samedi ?</span></li><li class="in"><span class="tx">Moi, je peux l’après-midi</span></li></ol><form class="cp"><input type="text" value="Parfait, à huit heures ?" placeholder="Écris un message" aria-label="Message" autocomplete="off" enterkeyhint="send"><button type="submit" class="sd" aria-label="Envoyer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button></form></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Envoyer un message est plus agréable quand on le voit partir. Ici le texte glisse hors du champ et se pose en bulle dans la conversation, l'accusé passe d'Envoyé à Livré puis Lu avec une deuxième coche, et un indicateur de saisie annonce la réponse. On envoie avec Entrée ou avec le bouton rond.
La couleur principale colore tes bulles et le bouton d'envoi, la secondaire signale la lecture. Le premier message est le texte modifiable et les réponses tournent dans une courte liste du script. Idéal pour un widget de support, un assistant de réservation ou une maquette de messagerie.