admtracksteel/camila
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
admtracksteel
2026-05-25 23:57:02 +00:00
parent e1e3e422de
commit e325c888fc
3 changed files with 243 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+150 -5
View File
@@ -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) => {
if (!text || isGenerating) return;
const handleSendMessage = async (text, skipUserAppend = false, files = null) => {
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
+6
View File
@@ -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
+87
View File
@@ -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;
}