📎 Anexos: botão de clipe + drag & drop + preview (imagens e documentos)

public/app.js

@@ -301,6 +301,118 @@ document.addEventListener('DOMContentLoaded', () => {
     window.speechSynthesis.speak(utterance);
   };
 
+  // ==========================================================================
+  // ANEXOS — Upload de imagens e documentos
+  // ==========================================================================
+
+  const fileInput = document.getElementById('fileInput');
+  const btnAttach = document.getElementById('btnAttach');
+  let attachedFiles = [];
+
+  // Criar preview container se não existir
+  let attachPreview = document.querySelector('.attachments-preview');
+
+  const ensureAttachPreview = () => {
+    if (!attachPreview) {
+      attachPreview = document.createElement('div');
+      attachPreview.className = 'attachments-preview';
+      document.getElementById('chatForm').appendChild(attachPreview);
+    }
+  };
+
+  // Botão de anexar → abre seletor de arquivos
+  btnAttach.addEventListener('click', () => {
+    fileInput.click();
+  });
+
+  // Quando arquivos são selecionados
+  fileInput.addEventListener('change', () => {
+    const files = Array.from(fileInput.files);
+    if (files.length === 0) return;
+
+    files.forEach(file => {
+      // Limite de 10MB por arquivo
+      if (file.size > 10 * 1024 * 1024) {
+        alert(`Arquivo "${file.name}" é muito grande. Máximo: 10MB.`);
+        return;
+      }
+      attachedFiles.push(file);
+    });
+
+    renderAttachPreview();
+    fileInput.value = ''; // reset para permitir selects again
+  });
+
+  // Arrastar e soltar na área do chat
+  const chatContainer = document.querySelector('.chat-container');
+  chatContainer.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    chatContainer.classList.add('drag-over');
+  });
+  chatContainer.addEventListener('dragleave', () => {
+    chatContainer.classList.remove('drag-over');
+  });
+  chatContainer.addEventListener('drop', (e) => {
+    e.preventDefault();
+    chatContainer.classList.remove('drag-over');
+    const files = Array.from(e.dataTransfer.files);
+    files.forEach(file => {
+      if (file.size <= 10 * 1024 * 1024) {
+        attachedFiles.push(file);
+      }
+    });
+    renderAttachPreview();
+  });
+
+  // Renderizar preview dos anexos
+  const renderAttachPreview = () => {
+    ensureAttachPreview();
+    attachPreview.innerHTML = '';
+
+    if (attachedFiles.length === 0) {
+      attachPreview.style.display = 'none';
+      btnAttach.classList.remove('has-files');
+      return;
+    }
+
+    btnAttach.classList.add('has-files');
+    attachPreview.style.display = 'flex';
+
+    attachedFiles.forEach((file, index) => {
+      const item = document.createElement('div');
+      item.className = 'attachment-item';
+
+      const isImage = file.type.startsWith('image/');
+      let previewHtml = '';
+
+      if (isImage) {
+        const url = URL.createObjectURL(file);
+        previewHtml = `<img src="${url}" alt="${file.name}">`;
+      } else {
+        previewHtml = `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
+        </svg>`;
+      }
+
+      item.innerHTML = `
+        ${previewHtml}
+        <span class="file-name">${file.name}</span>
+        <button type="button" class="remove-attachment" data-index="${index}">×</button>
+      `;
+
+      attachPreview.appendChild(item);
+    });
+
+    // Botões de remover
+    attachPreview.querySelectorAll('.remove-attachment').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const idx = parseInt(btn.dataset.index);
+        attachedFiles.splice(idx, 1);
+        renderAttachPreview();
+      });
+    });
+  };
+
   // ==========================================================================
   // ATALHOS DE TECLADO
   // ==========================================================================
@@ -773,8 +885,41 @@ document.addEventListener('DOMContentLoaded', () => {
   };
 
   // Função principal de envio de mensagens
-  const handleSendMessage = async (text, skipUserAppend = false) => {
+  const handleSendMessage = async (text, skipUserAppend = false, files = null) => {
-    if (!text || isGenerating) return;
+    if (!text && (!files || files.length === 0)) return;
+
+    // Se não recebe files por parâmetro, usa os anexados globalmente
+    const filesToSend = files || attachedFiles;
+    let fullText = text || '';
+
+    // Processar anexos: imagens viram descrição em texto (o modelo não tem visão)
+    if (filesToSend.length > 0) {
+      for (const file of filesToSend) {
+        if (file.type.startsWith('image/')) {
+          const reader = new FileReader();
+          const base64 = await new Promise((resolve) => {
+            reader.onload = (e) => resolve(e.target.result);
+            reader.readAsDataURL(file);
+          });
+          fullText += `\n\n[Imagem anexada: ${file.name}]\n\`\`\`\n${base64}\n\`\`\``;
+        } else {
+          const reader = new FileReader();
+          const content = await new Promise((resolve) => {
+            reader.onload = (e) => resolve(e.target.result);
+            reader.readAsText(file);
+          });
+          const truncated = content.length > 2000 ? content.substring(0, 2000) + '...[arquivo truncado]' : content;
+          fullText += `\n\n[Documento anexo: ${file.name}]\n\`\`\`\n${truncated}\n\`\`\``;
+        }
+      }
+      // Limpar anexos após envio
+      attachedFiles = [];
+      if (attachPreview) {
+        attachPreview.innerHTML = '';
+        attachPreview.style.display = 'none';
+        btnAttach.classList.remove('has-files');
+      }
+    }
 
     isGenerating = true;
     btnSend.disabled = true;
@@ -790,7 +935,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // Criar o chat se for novo
     if (!currentChatId) {
       const newId = 'chat_' + Date.now();
-      const firstLine = text.split('\n')[0];
+      const firstLine = fullText.split('\n')[0];
       const title = firstLine.length > 26 ? firstLine.substring(0, 26) + '...' : firstLine;
       
       chats.push({
@@ -811,10 +956,10 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Adicionar mensagem do usuário no estado e na tela (pula se for regeneração)
     if (!skipUserAppend) {
-      const userMsg = { role: 'user', content: text };
+      const userMsg = { role: 'user', content: fullText };
       chat.messages.push(userMsg);
       chat.updatedAt = Date.now();
-      appendMessageUI('user', text);
+      appendMessageUI('user', fullText);
       scrollToBottom();
       saveChats();
       renderHistory();

public/index.html

@@ -154,6 +154,12 @@
         <div class="input-container">
           <form id="chatForm">
             <div class="input-box">
+              <button type="button" id="btnAttach" class="btn-attach" aria-label="Anexar arquivo" title="Anexar imagem ou documento">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
+                </svg>
+              </button>
+              <input type="file" id="fileInput" accept="image/*,.pdf,.doc,.docx,.txt" multiple style="display:none">
               <textarea id="userInput" placeholder="Mensagem Camila AI..." rows="1" autocomplete="off"></textarea>
               <button type="button" id="btnVoice" class="btn-voice" aria-label="Usar microfone" title="Ditar mensagem">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor">

public/style.css

@@ -1255,6 +1255,93 @@ code {
   transition: transform 0.2s ease;
 }
 
+/* Botão de anexar */
+.btn-attach {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 8px;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.btn-attach svg {
+  width: 20px;
+  height: 20px;
+}
+
+.btn-attach:hover {
+  background: var(--hover-bg);
+  color: var(--text-color);
+}
+
+.btn-attach.has-files {
+  color: var(--accent);
+}
+
+/* Preview de anexos na barra de input */
+.attachments-preview {
+  display: flex;
+  gap: 6px;
+  padding: 6px 12px;
+  flex-wrap: wrap;
+  border-top: 1px solid var(--border-color);
+  min-height: 0;
+}
+
+.attachment-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px 4px 4px;
+  background: var(--hover-bg);
+  border-radius: 8px;
+  font-size: 12px;
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  max-width: 150px;
+}
+
+.attachment-item img {
+  width: 36px;
+  height: 36px;
+  object-fit: cover;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.attachment-item .file-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 90px;
+}
+
+.attachment-item .remove-attachment {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #ef4444;
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  line-height: 1;
+}
+
 .msg-action-btn.btn-speak svg {
   transition: transform 0.2s ease;
 }