- ¿Al final quedamos el sábado?
- Yo puedo por la tarde
Mensaje que sube al chat
El texto sale del campo y se convierte en burbuja; después pasa de enviado a entregado y leído, y la otra persona contesta.
Ajustes
Código
<div class="uvq15-cht"><header><span class="av" aria-hidden="true">L</span><div><b>Lola</b><small class="ty">en línea</small></div></header><ol class="ls" aria-live="polite"><li class="in"><span class="tx">¿Al final quedamos el sábado?</span></li><li class="in"><span class="tx">Yo puedo por la tarde</span></li></ol><form class="cp"><input type="text" value="Perfecto, ¿a las ocho?" placeholder="Escribe un mensaje" aria-label="Mensaje" autocomplete="off" enterkeyhint="send"><button type="submit" class="sd" aria-label="Enviar"><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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Enviar un mensaje se siente mejor cuando se ve viajar. Aquí el texto sale del campo y se coloca como burbuja en la conversación, el aviso cambia de Enviado a Entregado y Leído con un segundo check, y un indicador de escritura da paso a la respuesta. Funciona con Intro o con el botón redondo de enviar.
El color principal pinta tus burbujas y el botón, y el secundario marca la lectura. El primer mensaje es el texto editable y las respuestas rotan entre una lista corta del script. Úsalo en widgets de soporte, asistentes de reservas o maquetas de mensajería.