jotis.meRegula

Message

Mensaje de una conversación, recibido (con avatar, a la izquierda) o enviado (a la derecha).

Cuándo usarlo

Props. author, avatar (props de Avatar), time, sent, typing (puntos de "escribiendo"), online, footer, contenido en children.

Visual. Burbuja text-md-regular, padding 8/12. Recibido: bg-secondary, esquina superior izquierda recta. Enviado: bg-primary, esquina superior derecha recta. Ambos con borde border-secondary. Nombre text-sm-medium en text-secondary, hora text-xs en text-tertiary.

Uso. Es el chat de Emptor. Respuestas de la IA cortas, en párrafos; nada de listas eternas dentro de una burbuja.

Detalles. Funciona sin JavaScript. Los puntos de "escribiendo" se anuncian como "Escribiendo" y solo se animan si el sistema no pide reducir el movimiento.

Ejemplos

Em
EmptorJueves 18:02
He encontrado tres aspiradoras escoba por debajo de 300 €. ¿Te las comparo por autonomía?
TúJueves 18:03
Sí, y quita las que no tengan batería extraíble.
Em
Emptor
Escribiendo

Props

PropTipoPor defectoDescripción
authorReactNode—Quien escribe. En los enviados, por defecto "Tú".
avatarAvatarProps—Avatar del recibido (32px). Por defecto, las dos primeras letras del autor.
timeReactNode—
sentboolean—Enviado por el usuario: a la derecha, sin avatar, burbuja bg-primary con la esquina superior derecha recta.
typingboolean—Puntos de "escribiendo" en lugar del contenido.
onlineboolean—Punto de en línea en el avatar.
footerReactNode—Bajo la burbuja: reacciones, adjuntos, "Visto".
childrenReactNode—Texto del mensaje. Respuestas cortas, en párrafos.
classNamestring—

Código

import { Message } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<Message author="Emptor" avatar={{ initials: "Em" }} time="10:24">
				He encontrado tres opciones por debajo de 200 €.
			</Message>
		</>
	);
}