Chat Bubble

Display

Single chat message bubble with sender info, timestamp and read status.

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for display/chat-bubble

Instalação via CLI

$ npx kikitocn add chat-bubble

Exemplo de uso

Chat BubbleExample.tsx

import { ChatBubble } from "@/components/ui/cn/chat-bubble/ChatBubble";

export function ChatBubbleExample() {
  return (
    <ChatBubble />
  );
}

Props

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'`	—	Status de entrega
`isTyping`	`boolean`	`false`	Exibir indicador de digitação
`className`	`string`	—	Classes CSS extras

Carregando…