# Chat

![Status](https://img.shields.io/badge/status-stable-brightgreen)

Componente para exibir conversas em formato de chat com mensagens enviadas e recebidas. Suporta thumbnail de usuário, timestamp, anexos e scroll automático para novas mensagens.

## Quando usar

- Exibir histórico de conversas entre usuários em módulos de mensageria
- Interfaces de suporte ao cliente com troca de mensagens
- Logs de comunicação entre sistemas ou usuários com contexto temporal

## Quando não usar

- Para construir um chat com campo de digitação — o componente exibe apenas o histórico; implemente o input separadamente
- Para exibir notificações ou feeds de atividade — use componentes de timeline ou lista de eventos

## Instalação

```typescript
import { ChatModule } from '@seniorsistemas/angular-components/chat';

@NgModule({
  imports: [ChatModule],
})
export class MeuModule {}
```

> **Dependência:** O componente usa `LocaleService` para formatar timestamps. Importe `LocaleModule` no módulo raiz:
>
> ```typescript
> import { LocaleModule } from '@seniorsistemas/angular-components/locale';
> @NgModule({ imports: [LocaleModule] })
> export class AppModule {}
> ```

## Uso básico

```html
<s-chat [messages]="mensagens" />
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `messages` | `ChatMessage[]` | `[]` | não | Lista de mensagens exibidas no chat |

### Tipos

```typescript
type ChatMessage = {
  senderName: string;       // Nome do remetente (obrigatório)
  text: string;             // Conteúdo da mensagem (obrigatório)
  isMine: boolean;          // true para mensagens do usuário atual (obrigatório)
  thumbnailUrl?: string;    // URL da foto do remetente (opcional)
  sentAt?: Date;            // Data/hora de envio (opcional)
  attachmentUrl?: string;   // URL do arquivo anexado (opcional)
};
```

## Exemplos

### Conversa básica

```html
<s-chat [messages]="mensagens"></s-chat>
```

```typescript
mensagens: ChatMessage[] = [
  {
    senderName: 'João Silva',
    text: 'Olá! Tudo bem?',
    thumbnailUrl: 'https://exemplo.com/foto-joao.jpg',
    isMine: false,
    sentAt: new Date('2025-01-28T10:00:00Z'),
  },
  {
    senderName: 'Você',
    text: 'Oi João! Tudo ótimo, e você?',
    thumbnailUrl: 'https://exemplo.com/minha-foto.jpg',
    isMine: true,
    sentAt: new Date('2025-01-28T10:00:30Z'),
  },
];
```

### Com anexo para download

```typescript
mensagens: ChatMessage[] = [
  {
    senderName: 'Ana Costa',
    text: 'Segue o relatório solicitado.',
    isMine: false,
    sentAt: new Date(),
    attachmentUrl: 'https://exemplo.com/relatorio.pdf',
  },
];
```

### Sem thumbnails e sem timestamps

```typescript
mensagens: ChatMessage[] = [
  {
    senderName: 'Suporte',
    text: 'Como posso ajudar?',
    isMine: false,
  },
  {
    senderName: 'Usuário',
    text: 'Preciso de ajuda com o sistema.',
    isMine: true,
  },
];
```

## Acessibilidade

- As mensagens são renderizadas em uma lista ordenada — leitores de tela anunciam o nome do remetente e o conteúdo
- Links de anexo possuem texto descritivo para leitores de tela
- O scroll automático é feito via `scrollIntoView` para garantir que novas mensagens sejam anunciadas

## Componentes relacionados

- [`Chips`](../chips/README.md) — quando a interface de chat precisa de entrada de tags/destinatários