# 📦 Chat Modular - Guia Completo

## 📋 Estrutura de Arquivos

```
📁 Chat Modular
├── styles-chat.php        ← Estilos CSS compartilhados
├── topo.php               ← Header/Barra de topo
├── contatos.php           ← Sidebar com lista de contatos
├── msg.php                ← Área de mensagens
├── digitacao.php          ← Área de input/digitação
├── chat-main.php          ← Arquivo principal (monta tudo)
└── exemplo-modular.php    ← Exemplo completo
```

---

## 🚀 Como Usar

### Opção 1: Include do Arquivo Principal (Recomendado)

Simplesmente inclua o `chat-main.php` em sua página:

```php
<?php include 'chat-main.php'; ?>
```

**Pronto!** Todos os componentes serão carregados automaticamente.

---

### Opção 2: Incluir Componentes Individuais

Se quiser customizar, pode incluir cada componente separadamente:

```php
<!-- Incluir estilos -->
<?php include 'styles-chat.php'; ?>

<!-- Montar estrutura manualmente -->
<div class="chat-component-wrapper">
    <div class="chat-component-container">
        
        <!-- Sidebar de contatos -->
        <?php include 'contatos.php'; ?>
        
        <!-- Chat principal -->
        <div class="chat-component-main">
            <?php include 'topo.php'; ?>
            <?php include 'msg.php'; ?>
            <?php include 'digitacao.php'; ?>
        </div>
    </div>
</div>
```

---

## 📝 Descrição de Cada Arquivo

### 1️⃣ **styles-chat.php**
Contém todos os estilos CSS do chat.

**Inclui:**
- Estilos do container
- Estilos da sidebar
- Estilos do header
- Estilos de mensagens
- Estilos do input
- Menu dropdown
- Animações

**Como usar:**
```php
<?php include 'styles-chat.php'; ?>
```

---

### 2️⃣ **contatos.php**
Sidebar com lista de contatos.

**Inclui:**
- Header de busca
- Lista de 8 contatos
- Avatares coloridos
- Status (online/ausente/offline)

**Customizar:**
```php
<!-- Edite diretamente para adicionar/remover contatos -->
<li class="chat-component-contact-item">
    <div class="chat-component-avatar">
        <span class="chat-component-status online"></span>
        Sigla
    </div>
    <div class="chat-component-contact-info">
        <p class="chat-component-contact-name">Nome</p>
        <p class="chat-component-contact-status">Status</p>
    </div>
</li>
```

---

### 3️⃣ **topo.php**
Header/barra de topo do chat.

**Inclui:**
- Nome do contato
- Status (Online agora)
- Botão de chamada ☎️
- Botão de vídeo 📹
- Menu de 3 pontinhos ⋮

**Menu tem opções:**
- 👤 Ver Perfil
- 🔍 Pesquisar
- 🔇 Silenciar
- 🗑️ Limpar Chat
- 💾 Exportar
- ⛔ Bloquear

---

### 4️⃣ **msg.php**
Área de mensagens do chat.

**Inclui:**
- Mensagens recebidas (esquerda, cinza)
- Mensagens próprias (direita, azul)
- Hora de cada mensagem
- 7 mensagens de exemplo

**Adicionar mensagem:**
```php
<!-- Mensagem recebida -->
<div class="chat-component-message received">
    <div>
        <div class="chat-component-message-bubble">Sua mensagem</div>
        <div class="chat-component-message-time">10:30</div>
    </div>
</div>

<!-- Mensagem própria -->
<div class="chat-component-message own">
    <div>
        <div class="chat-component-message-bubble">Sua mensagem</div>
        <div class="chat-component-message-time">10:31</div>
    </div>
</div>
```

---

### 5️⃣ **digitacao.php**
Área de input/digitação de mensagens.

**Inclui:**
- Botão de anexo 📎
- Textarea para mensagem
- Botão de emoji 😊
- Botão de envio ✈️

**Auto-features:**
- Textarea cresce conforme digita
- Máximo de 80px de altura

---

### 6️⃣ **chat-main.php**
Arquivo principal que monta tudo.

**Faz:**
1. Inclui `styles-chat.php`
2. Inclui `contatos.php`
3. Inclui `topo.php`
4. Inclui `msg.php`
5. Inclui `digitacao.php`
6. Adiciona JavaScript funcional

**JavaScript gerencia:**
- Clique em contatos
- Menu dropdown
- Resize da textarea
- Envio de mensagens

---

## 📊 Fluxo de Incluções

```
Seu arquivo.php
    ↓
    <?php include 'chat-main.php'; ?>
    ↓
    chat-main.php inclui:
    ├── styles-chat.php
    ├── contatos.php
    ├── topo.php
    ├── msg.php
    └── digitacao.php
```

---

## 🎨 Customizações

### Mudar Cor Principal

Edite `styles-chat.php`:

```css
.chat-component-wrapper {
    --chat-primary: #007bff;  ← Mude aqui
}
```

### Adicionar Mais Contatos

Edite `contatos.php` e copie um `<li>`:

```php
<li class="chat-component-contact-item">
    <div class="chat-component-avatar" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
        <span class="chat-component-status online"></span>
        XX
    </div>
    <div class="chat-component-contact-info">
        <p class="chat-component-contact-name">Seu Nome</p>
        <p class="chat-component-contact-status">Online</p>
    </div>
</li>
```

### Mudar Mensagens Iniciais

Edite `msg.php` e copie um `<div>` de mensagem.

### Customizar Menu

Edite `topo.php` na seção `<ul class="chat-component-menu-dropdown">`.

---

## 💻 Exemplo Completo

### Arquivo: pagina-chat.php

```php
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Chat</title>
</head>
<body style="margin: 0; height: 100vh;">
    
    <!-- Basta incluir chat-main.php -->
    <?php include 'chat-main.php'; ?>
    
</body>
</html>
```

### Resultado

Chat inteiro aparece ocupando toda a tela! ✅

---

## 🔧 Integração com Banco de Dados

### Exemplo: Carregar contatos do banco

Edite `contatos.php`:

```php
<?php
// Conectar ao banco
$pdo = new PDO('mysql:host=localhost;dbname=seu_banco', 'user', 'pass');

// Buscar contatos
$contatos = $pdo->query('SELECT * FROM usuarios')->fetchAll();
?>

<div class="chat-component-sidebar">
    <div class="chat-component-sidebar-header">
        <h4>💬 Chat</h4>
        <div class="chat-component-search">
            <input type="text" placeholder="Pesquisar...">
        </div>
    </div>
    
    <ul class="chat-component-contacts-list">
        <?php foreach($contatos as $contato): ?>
        <li class="chat-component-contact-item">
            <div class="chat-component-avatar">
                <span class="chat-component-status <?php echo $contato['status']; ?>"></span>
                <?php echo substr($contato['nome'], 0, 2); ?>
            </div>
            <div class="chat-component-contact-info">
                <p class="chat-component-contact-name"><?php echo $contato['nome']; ?></p>
                <p class="chat-component-contact-status"><?php echo $contato['status_texto']; ?></p>
            </div>
        </li>
        <?php endforeach; ?>
    </ul>
</div>
```

---

## ✨ Vantagens da Estrutura Modular

✅ **Separação de responsabilidades** - Cada arquivo tem um propósito  
✅ **Fácil manutenção** - Editar um componente não afeta os outros  
✅ **Reusável** - Use em vários projetos  
✅ **Escalável** - Fácil adicionar novos componentes  
✅ **Limpo** - Código organizado e legível  

---

## 📱 Estrutura Recomendada

```
seu-projeto/
├── public/
│   └── chat/
│       ├── styles-chat.php
│       ├── topo.php
│       ├── contatos.php
│       ├── msg.php
│       ├── digitacao.php
│       └── chat-main.php
├── pages/
│   └── chat.php          ← Sua página que inclui
└── index.php
```

Na página chat.php:

```php
<?php include '../public/chat/chat-main.php'; ?>
```

---

## 🎯 Próximos Passos

1. ✅ Use `chat-main.php` no seu projeto
2. 📝 Customize cores e estilos conforme necessário
3. 💾 Integre com seu banco de dados
4. 🔗 Conecte as ações do menu com suas APIs
5. 📱 Teste em dispositivos móveis

---

**Seu chat modular está pronto para usar! 🚀**
