{code};
}
return {part};
});
}
function ChatN8n({ onClose }) {
const [cfg, setCfg] = useState(() => {
try { return JSON.parse(localStorage.getItem('neura-n8n-cfg') || '{}'); } catch { return {}; }
});
const [webhook, setWebhook] = useState(cfg.webhook || '');
const [apiKey, setApiKey] = useState(cfg.apiKey || '');
const [showCfg, setShowCfg] = useState(!cfg.webhook);
const [userId] = useState(() => {
let id = localStorage.getItem('neura-n8n-uid');
if (!id) { id = genUserId(); localStorage.setItem('neura-n8n-uid', id); }
return id;
});
const [msgs, setMsgs] = useState(() => {
try { return JSON.parse(localStorage.getItem('neura-n8n-hist') || '[]'); } catch { return []; }
});
const [input, setInput] = useState('');
const [attachments, setAttachments] = useState([]);
const [sending, setSending] = useState(false);
const [fileKey, setFileKey] = useState(0); // força remount do input file após cada envio
const bottomRef = useRef(null);
const fileRef = useRef(null);
const textaRef = useRef(null);
useEffect(() => {
try { localStorage.setItem('neura-n8n-hist', JSON.stringify(msgs.slice(-200))); } catch {}
}, [msgs]);
useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [msgs, sending]);
const autoResize = () => {
const el = textaRef.current;
if (!el) return;
el.style.height = 'auto';
el.style.height = Math.min(140, el.scrollHeight) + 'px';
};
const saveCfg = () => {
const c = { webhook: webhook.trim(), apiKey: apiKey.trim() };
setCfg(c);
localStorage.setItem('neura-n8n-cfg', JSON.stringify(c));
setShowCfg(false);
};
const newSession = () => {
if (!window.confirm('Iniciar nova sessão? O histórico local será apagado.')) return;
localStorage.removeItem('neura-n8n-uid');
localStorage.removeItem('neura-n8n-hist');
window.location.reload();
};
const send = async () => {
const text = input.trim();
// Captura snapshot dos anexos ANTES de qualquer setState (evita closure stale)
const currentFiles = attachments.slice();
if (!text && currentFiles.length === 0) return;
if (!cfg.webhook) { setShowCfg(true); return; }
// Garante mensagem não-vazia (workflow n8n exige 'message')
const messageText = text || (currentFiles.length > 0 ? `Arquivo em anexo: ${currentFiles[0].name}` : '');
// Ler arquivo como base64 ANTES de limpar estado (evita bug no segundo envio)
let attachment = null;
if (currentFiles.length > 0) {
const file = currentFiles[0];
try {
const b64 = await new Promise((resolve, reject) => {
const r = new FileReader();
r.onload = () => resolve(r.result.split(',')[1]);
r.onerror = () => reject(new Error('Erro ao ler o arquivo'));
r.readAsDataURL(file);
});
attachment = { name: file.name, type: file.type, size: file.size, data: b64 };
} catch (readErr) {
// leitura falhou — envia mensagem sem o arquivo
console.warn('[neura] FileReader error:', readErr.message);
}
}
// Só agora atualiza a UI (limpa input, anexos, ativa spinner)
const msgId = Date.now().toString(36) + Math.random().toString(36).slice(2,5);
setMsgs(m => [...m, {
id: msgId,
role: 'user',
text,
files: currentFiles.map(f => ({ name: f.name, size: f.size, type: f.type })),
ts: Date.now(),
}]);
setInput('');
setAttachments([]);
if (fileRef.current) fileRef.current.value = ''; // garante reset do input file
setSending(true);
if (textaRef.current) { textaRef.current.style.height = 'auto'; }
try {
// Envia via server.js (/api/agent/send): ele assina o HMAC com o
// WEBHOOK_HMAC_SECRET do .env e encaminha pro webhook do n8n.
const t0 = performance.now();
const res = await fetch('/api/agent/send', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
webhook: cfg.webhook,
apiKey: cfg.apiKey || '',
message: messageText,
session_id: userId,
...(attachment ? { attachment } : {}),
}),
});
// server.js envolve a resposta: { ok, status, took_ms, data: session: {userId}