Carregando…Carregando…Carregando…Carregando…Single chat message bubble with sender info, timestamp and read status.
$ npx kikitocn add chat-bubbleimport { ChatBubble } from "@/components/ui/cn/chat-bubble/ChatBubble";
export function ChatBubbleExample() {
return (
<ChatBubble message="Exemplo" side="left" status="sent" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
message* | string | — | Texto da mensagem |
side | 'left' | 'right' | 'left' | Lado do bubble na conversa |
time | string | — | Timestamp formatado |
senderName | string | — | Nome do remetente |
avatar | string | — | URL do avatar |
avatarFallback | string | — | Iniciais para o fallback |
status | 'sent' | 'delivered' | 'read' | 'error' | — | Status de entrega |
isTyping | boolean | false | Exibir indicador de digitação |
className | string | — | Classes CSS extras |
style | React.CSSProperties | — | Estilos inline extras |
Sent · received (with avatar)
Animated dots
Sent · delivered · read