Message

Componente para mensagens de chat com suporte a avatares, markdown, indicadores de status e design responsivo.

Olá! Como posso ajudar você hoje?

Preciso de ajuda com o componente Message.

Claro! Vou te mostrar como usar.

Utilização

index.tsx
import { Message, MessageAvatar, MessageContent } from "@convertcompany/ui/chat";

Adicione e customize o css para as mensagens

globals.css
:root{
  --color-message-sent-background: 223, 252, 214;
  --color-message-sent-foreground: var(--color-foreground);
  --color-message-received-background: 255, 255, 255;
  --color-message-received-foreground: var(--color-foreground);
}
.dark {
  --color-message-received-background: var(--color-muted), 0.4;
  --color-message-received-foreground: 255, 255, 255;
  --color-message-sent-background: 19, 78, 55;
  --color-message-sent-foreground: 255, 255, 255;
}

Exemplos

Mensagens básicas

Exemplo de mensagens enviadas e recebidas com avatares.

U

Olá! Como posso ajudar você hoje?

E

Preciso de ajuda com o componente Message.

U

Claro! Vou te mostrar como usar.

Mensagens sequenciais

Mensagens do mesmo usuário sem repetir o avatar.

U

Aqui está a primeira mensagem.

E aqui está a segunda mensagem sequencial.

E a terceira mensagem também.

Com markdown

Mensagens com conteúdo markdown renderizado.

U

Título da mensagem

Aqui está um texto em negrito e um texto em itálico.
  • Item da lista 1
  • Item da lista 2
  • Item da lista 3
Código inline e links também funcionam!
E

Resposta

Perfeito! O markdown funciona muito bem aqui.function exemplo() { return "Código em bloco!"; }

Indicadores de status

Mensagens com diferentes tipos de indicadores de loading.

U

O que você está fazendo?

E
Carregando

Com timestamp

Mensagens com horário de envio.

U

Mensagem recebida às 14:30

14:30
E

Resposta enviada às 14:32

14:32
U

Última mensagem às 14:35

14:35

Avatares customizados

Mensagens com avatares personalizados e fallbacks.

🤖

Olá! Sou um bot de assistência.

👤

Olá bot! Como você está?

🤖

Estou funcionando perfeitamente! 😊

👤

Que ótimo! Até logo!

Conversa completa

Exemplo de uma conversa completa com todos os recursos.

A

Olá! Como posso ajudar você hoje?

U

Preciso de ajuda com React!

A

Ajuda com React

Aqui estão algumas dicas importantes:
  • useState - Para estado local
  • useEffect - Para efeitos colaterais
  • useContext - Para contexto global
Espero que isso ajude! 🚀
U

Perfeito! Muito obrigado pela ajuda! 😊

Com AudioWavePlayer

Mensagens com player de áudio integrado.

U

Enviei uma mensagem de voz para você!

E
0:00
U

Perfeito! O áudio está muito claro.

✨ Dica

Você pode editar a variável --color-audio-wave para deixar a renderização do áudio mais amigável

globals.css
[data-role="message"] {
  --color-audio-wave: 206, 208, 208;
  &[data-type="sent"] {
    --color-audio-wave: 178, 208, 178;
  }
}

.dark {
  [data-role="message"] {
    --color-audio-wave: 99, 107, 112;
    &[data-type="sent"] {
      --color-audio-wave: 77, 141, 129;
    }
  }
}

Props

Message

PropriedadeTipo
typeTipo da mensagem (enviada ou recebida).
sent
received
sequentialSe a mensagem é parte de uma sequência (oculta o avatar).
boolean
classNameClasse CSS adicional para customização.
string
childrenConteúdo da mensagem (MessageAvatar e MessageContent).
ReactNode
...propsTodas as demais props nativas de <div>.
<HTMLDivElement>

MessageAvatar

PropriedadeTipo
srcURL da imagem do avatar.
string
altTexto alternativo para acessibilidade.
string
fallbackTexto ou emoji de fallback quando não há imagem.
string
delayMsDelay para mostrar o fallback (em milissegundos).
number
classNameClasse CSS adicional para customização.
string
childrenConteúdo customizado do avatar.
ReactNode

MessageContent

PropriedadeTipo
markdownSe o conteúdo deve ser renderizado como markdown.
boolean
indicatorTipo de indicador de status a ser exibido.
thinking
typing
loading
recording
null
timeTimestamp da mensagem (exibido no canto inferior direito).
string
classNameClasse CSS adicional para customização.
string
childrenConteúdo da mensagem (texto ou markdown).
ReactNode
string
...propsTodas as demais props nativas de <div>.
<HTMLDivElement>