Chat

Apresentação

O componente Chat é responsável por exibir mensagens em um formato de chat, permitindo a criação de interfaces de conversação com suporte a avatares, cabeçalhos e rodapés. O componente é composto por vários subcomponentes que facilitam a estruturação das mensagens.

Quando usar

• Para exibir conversas em tempo real
• Para criar interfaces de chat
• Para mostrar histórico de mensagens
• Para implementar sistemas de mensagens
• Para exibir notificações em formato de chat
• Para criar interfaces de suporte ao cliente

Forma básica de uso

import { Chat } from 'eitri-luminus';

// Mensagem do usuário (à direita)
<Chat>
  <Chat.End>
    <Chat.Image src="/avatar.jpg" alt="Meu avatar" />
    <Chat.Header>Você</Chat.Header>
    <Chat.Bubble>Olá, como posso ajudar?</Chat.Bubble>
    <Chat.Footer>14:30</Chat.Footer>
  </Chat.End>
</Chat>

// Mensagem do outro participante (à esquerda)
<Chat>
  <Chat.Start>
    <Chat.Image src="/outro-avatar.jpg" alt="Avatar do outro" />
    <Chat.Header>João</Chat.Header>
    <Chat.Bubble>Preciso de ajuda com um problema</Chat.Bubble>
    <Chat.Footer>14:31</Chat.Footer>
  </Chat.Start>
</Chat>

// Chat com classes personalizadas
<Chat className="space-y-4">
  <Chat.Start>
    <Chat.Bubble className="bg-primary text-white">
      Mensagem personalizada
    </Chat.Bubble>
  </Chat.Start>
</Chat>

Propriedades

Chat

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o container
id	string	Identificador único do componente

Chat.Start

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o início
id	string	Identificador único do componente

Chat.End

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o fim
id	string	Identificador único do componente

Chat.Bubble

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para a bolha
id	string	Identificador único do componente

Chat.Image

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para a imagem
id	string	Identificador único do componente
src	string	URL da imagem do avatar
alt	string	Texto alternativo para acessibilidade

Chat.Header

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o cabeçalho
id	string	Identificador único do componente

Chat.Footer

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o rodapé
id	string	Identificador único do componente

Heranças

O componente Chat e seus subcomponentes herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente é composto por subcomponentes que facilitam a estruturação das mensagens
• Chat.Start é usado para mensagens alinhadas à esquerda (outro participante)
• Chat.End é usado para mensagens alinhadas à direita (usuário atual)
• O componente suporta avatares, cabeçalhos e rodapés para cada mensagem
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Recomenda-se manter uma hierarquia visual clara entre os elementos
• O componente é ideal para interfaces de chat e sistemas de mensagens