Todos los componentes (204)

Conversación

Datos · Conversation · .amset-thread

Qué es y cuándo usarlo

Un hilo de mensajes: un ticket de soporte, un chat con la tienda, las notas de un pedido. Lo propio a un lado, lo ajeno al otro y los avisos del sistema en medio; cada mensaje con su autor, su hora y, si hace falta, su estado.

Cuándo usarlo

Para enseñar un intercambio entre personas. Los mensajes salen en el orden en que llegan en messages: no los ordena por fecha.
side: custom (quien mira la pantalla), other (por defecto) o system (asignaciones, cambios de estado).
state en un mensaje para «Enviando» o «No se ha podido enviar»; extra para adjuntos o respuestas rápidas.
maxHeight cuando el hilo es largo y tiene que desplazarse dentro de su caja. empty es lo que se ve sin mensajes.

Cuándo no

Para comentarios con respuestas anidadas: Comments.
Para un registro de lo que ha pasado, sin diálogo: History.

Teclado: el hilo es una parada de Tab, para poder desplazarlo con las flechas cuando no cabe en su maxHeight. Después, Tab sigue por lo que haya dentro de los mensajes (los botones de extra).

Accesibilidad: es una lista ordenada (ol) con nombre (label), así que se oye cuántos mensajes hay. Cada mensaje dice quién lo escribe con una palabra (el autor, «Tú» en lo propio sin autor —customName lo cambia— o «Sistema»): el lado y el color no se oyen. El avatar (con la photo del mensaje, o las iniciales) es decorativo, porque el nombre ya va escrito al lado. La hora es relativa («hace 5 minutos») y lleva la fecha exacta en su datetime.

Aspecto fino: variables CSS --amset-thread-*: -author, -bubble, -footer, -gap, -radius, -text, -width. El tamaño mueve el hueco, el relleno de la burbuja y lo ancho que llega a ser un mensaje.

Cómo se ve

Ada
No me llega el resguardo del pedido.
Fecha desconocida
Soporte
Lo reenviamos ahora mismo.
Fecha desconocida

<Conversation
  label="Conversacion con soporte"
  messages={[
    { key: '1', author: 'Ada', text: 'No me llega el resguardo.', date: '10:02' },
    { key: '2', author: 'Soporte', text: 'Lo reenviamos.', date: '10:05', side: 'custom' },
  ]}
/>

Props

Se importa con import { Conversation } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	De que es la conversacion: «Ticket 1042», «Chat con soporte».
`messages`obligatoria	`readonly Message[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`customName`	`string`	Como se llama quien escribe los mensajes propios. Por defecto, «Tú».
`empty`	`ReactNode`	Lo que se ve sin mensajes: un texto, o un nodo con su ilustracion y su llamada a la accion.
`loading`	`boolean`	El hilo esta llegando: tres burbujas de esqueleto en lugar de los mensajes, y el hilo se marca ocupado.
`loadingOlder`	`boolean`	Estan llegando mensajes anteriores: una fila con su texto arriba del hilo.
`maxHeight`	`string`	Alto maximo antes de hacer scroll dentro del hilo.
`onReachStart`	`() => void`	Se llama UNA vez al llegar arriba del todo, para pedir los mensajes anteriores. Hasta que `loadingOlder` pase de `true` a `false` -o se aleje y vuelva a llegar- no se repite.
`revealKey`	`string`	Lleva a la vista el mensaje con esta `key` cada vez que cambia: la siguiente coincidencia de una busqueda. Mueve el desplazamiento del hilo, no el de la pagina.
`size`	`"sm" \| "md" \| "lg"`	—
`stickToBottom`	`boolean`	Sigue el final: cada mensaje nuevo, y cada letra de uno que se escribe, lleva el hilo abajo SOLO si quien lee ya estaba abajo. Quien se ha alejado a releer no se ve arrastrado.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-thread-gap`	`var(--amset-space-3)`
`--amset-thread-bubble`	`var(--amset-space-2) var(--amset-space-3)`
`--amset-thread-radius`	`var(--amset-radius-lg)`
`--amset-thread-text`	`var(--amset-text-sm)`
`--amset-thread-author`	`var(--amset-text-xs)`
`--amset-thread-footer`	`var(--amset-text-xs)`
`--amset-thread-width`	`85%`

Cómo se cambia

.amset-thread {
  --amset-thread-gap: ...;
  --amset-thread-bubble: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: