¿Subimos a ver el atardecer?
¡Sí! Llevo la cámara 📷
Chat avec barre de saisie en verre
Une conversation sur un fond coloré avec une barre de message en verre ; le micro devient bouton d'envoi pendant la saisie.
Réglages
Code
<div class="uv-gcc"><div class="ms" aria-live="polite"><p class="in">On monte voir le coucher de soleil ?</p><p class="me">Oui ! J’apporte l’appareil photo 📷</p></div><form class="cp"><button type="button" class="ad" aria-label="Joindre"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button><input placeholder="Message" aria-label="Message"><button type="submit" class="sd" aria-label="Envoyer"><span class="mi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21"/></svg></span><span class="ar"><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.5 11.5L12 5l6.5 6.5"/></svg></span></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 Liquid Glass
Voir tout : Liquid GlassOù l’utiliser
Les messageries font désormais flotter la barre de saisie en verre au-dessus de la conversation. Les bulles reçues sont en verre dépoli, les tiennes bleues et pleines, et la barre du bas contient un bouton pièce jointe, le champ de message et un bouton rond qui affiche un micro quand il est vide puis devient une flèche d'envoi en pivotant dès qu'on écrit.
L'envoi ajoute ton message dans une nouvelle bulle et garde les derniers à l'écran. La transformation repose sur :placeholder-shown et la barre est un formulaire natif, Entrée envoie donc le message.