Conversación@unozero-ai/ui

ChannelBadge

De qué canal viene una conversación: WhatsApp, Instagram, Facebook o web.

Usar

import { ChannelBadge } from "@unozero-ai/ui/react";

<ChannelBadge></ChannelBadge>

Canales

WhatsApp, Facebook e Instagram llevan el glifo en el color de su marca, no en el del tenant, porque identifican a un tercero; Web usa el tono informativo del sistema. El nombre va escrito al lado, así que el canal se lee aunque no se distinga el color (la Regla del Tenant). CHANNEL_KEYS, del paquete raíz, trae la lista en el orden en que la muestran los filtros.

Cambia frente al kit React: la pastilla ahora es neutra, con borde y fondo de tarjeta, y solo el glifo lleva el color de la marca. Antes se teñía entera con la paleta de Tailwind (bg-green-500…), que no sigue los tokens ni cambia con el tema.

Solo el icono, en la bandeja

Una bandeja es una lista de personas, no de canales: repetir «WhatsApp» en cada fila le quita al nombre del huésped el ancho que necesita. Con iconOnly queda el glifo, y el nombre del canal sigue disponible como etiqueta accesible y como tooltip nativo. Va en el slot trailing de ListItem.

Canales desconocidos

channel acepta el texto que llega del backend sin limpiarlo: no distingue mayúsculas y cualquier valor que no conoce (un canal antiguo como google_sheets o uno que aún no existe) se muestra como «Web». Así la etiqueta y los filtros de la bandeja, que usan la misma función resolveChannel del paquete raíz, siempre coinciden. getChannelMeta te da el nombre del canal para tus propios filtros.

API

Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).

ChannelBadge · <uz-channel-badge>

PropTipoDefectoDescripción
channelConversationChannel"web"El canal tal como llega del backend; lo desconocido se muestra como «Web».
iconOnlybooleanfalseSolo el glifo; el nombre del canal queda como etiqueta accesible y tooltip.
Parte CSSDescripción
uz-channel-badge::part(base)La pastilla.