let chatWindow = null; let chatMessages = []; let isTyping = false; function openChatWindow() { if (chatWindow) { chatWindow.style.display = 'flex'; return; } chatWindow = document.createElement('div'); chatWindow.style.cssText = 'position:fixed!important;bottom:90px!important;right:20px!important;width:350px!important;height:500px!important;background:white!important;border-radius:15px!important;box-shadow:0 10px 30px rgba(0,0,0,0.3)!important;z-index:99998!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;'; // Header const header = document.createElement('div'); header.style.cssText = 'background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important;color:white!important;padding:15px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;'; header.innerHTML = '

🤖 Assistente Fly2Any

Especialista em viagens

'; // Messages area const messagesArea = document.createElement('div'); messagesArea.id = 'chatMessages'; messagesArea.style.cssText = 'flex:1!important;padding:15px!important;overflow-y:auto!important;background:#f8f9fa!important;'; // Input area const inputArea = document.createElement('div'); inputArea.style.cssText = 'padding:15px!important;border-top:1px solid #eee!important;display:flex!important;gap:10px!important;'; inputArea.innerHTML = ''; chatWindow.appendChild(header); chatWindow.appendChild(messagesArea); chatWindow.appendChild(inputArea); document.body.appendChild(chatWindow); // Event listeners document.getElementById('closeChatBtn').onclick = function() { chatWindow.style.display = 'none'; }; const input = document.getElementById('chatInput'); const sendBtn = document.getElementById('sendChatBtn'); sendBtn.onclick = sendMessage; input.onkeypress = function(e) { if (e.key === 'Enter') sendMessage(); }; // Mensagem de boas-vindas addMessage('agent', 'Olá! 👋 Sou o assistente virtual da Fly2Any. Como posso ajudar com sua viagem?'); showQuickReplies(['Cotação de voos', 'Hotéis no Brasil', 'Seguro viagem', 'Falar com humano']); } function addMessage(sender, text, isHtml = false) { const messagesArea = document.getElementById('chatMessages'); if (!messagesArea) return; const messageDiv = document.createElement('div'); messageDiv.style.cssText = 'margin-bottom:15px!important;display:flex!important;' + (sender === 'user' ? 'justify-content:flex-end!important;' : 'justify-content:flex-start!important;'); const bubble = document.createElement('div'); bubble.style.cssText = 'max-width:80%!important;padding:10px 15px!important;border-radius:15px!important;' + (sender === 'user' ? 'background:#667eea!important;color:white!important;border-bottom-right-radius:5px!important;' : 'background:white!important;color:#333!important;border:1px solid #eee!important;border-bottom-left-radius:5px!important;'); if (isHtml) { bubble.innerHTML = text; } else { bubble.textContent = text; } messageDiv.appendChild(bubble); messagesArea.appendChild(messageDiv); messagesArea.scrollTop = messagesArea.scrollHeight; } function showQuickReplies(options) { const messagesArea = document.getElementById('chatMessages'); if (!messagesArea) return; const quickReplies = document.createElement('div'); quickReplies.style.cssText = 'margin-bottom:15px!important;display:flex!important;flex-wrap:wrap!important;gap:8px!important;'; options.forEach(option => { const btn = document.createElement('button'); btn.textContent = option; btn.style.cssText = 'background:white!important;border:1px solid #667eea!important;color:#667eea!important;padding:8px 12px!important;border-radius:15px!important;cursor:pointer!important;font-size:12px!important;transition:all 0.2s!important;'; btn.onmouseover = function() { this.style.background = '#667eea'; this.style.color = 'white'; }; btn.onmouseout = function() { this.style.background = 'white'; this.style.color = '#667eea'; }; btn.onclick = function() { document.getElementById('chatInput').value = option; sendMessage(); quickReplies.remove(); }; quickReplies.appendChild(btn); }); messagesArea.appendChild(quickReplies); messagesArea.scrollTop = messagesArea.scrollHeight; } function showTyping() { const messagesArea = document.getElementById('chatMessages'); if (!messagesArea) return; const typingDiv = document.createElement('div'); typingDiv.id = 'typingIndicator'; typingDiv.style.cssText = 'margin-bottom:15px!important;display:flex!important;justify-content:flex-start!important;'; typingDiv.innerHTML = '

Digitando ...

'; messagesArea.appendChild(typingDiv); messagesArea.scrollTop = messagesArea.scrollHeight; } function hideTyping() { const typing = document.getElementById('typingIndicator'); if (typing) typing.remove(); } async function sendMessage() { const input = document.getElementById('chatInput'); if (!input || !input.value.trim()) return; const message = input.value.trim(); input.value = ''; // Add user message addMessage('user', message); // Show typing showTyping(); try { const response = await fetch('/api/chat/agent', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: message, sessionId: 'web-chat-' + Date.now() }) }); const data = await response.json(); hideTyping(); if (data.success) { addMessage('agent', data.message); // Show relevant quick replies based on response if (message.toLowerCase().includes('voo') || message.toLowerCase().includes('passagem')) { showQuickReplies(['Voos Brasil-EUA', 'Quando viajar?', 'Orçamento disponível']); } else if (message.toLowerCase().includes('hotel')) { showQuickReplies(['Hotéis em SP', 'Hotéis no RJ', 'Resort na Bahia']); } else if (message.toLowerCase().includes('humano') || message.toLowerCase().includes('atendente')) { showQuickReplies(['WhatsApp agora', 'Agendar ligação', 'Email']); } } else { addMessage('agent', 'Desculpe, estou com dificuldades técnicas. Use nosso WhatsApp para atendimento imediato! 📱'); showQuickReplies(['Abrir WhatsApp', 'Tentar novamente']); } } catch (error) { hideTyping(); addMessage('agent', 'Ops! Algo deu errado. Vamos te conectar com nosso WhatsApp! 📱'); showQuickReplies(['Abrir WhatsApp']); } } // CSS para animação const style = document.createElement('style'); style.textContent = '@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }'; document.head.appendChild(style); function createChatButtons() { // Remove botões existentes se houver const existingButtons = document.querySelectorAll('.fly2any-chat-button'); existingButtons.forEach(btn => btn.remove()); const container = document.body; // Chat IA (azul) const chatButton = document.createElement('button'); chatButton.className = 'fly2any-chat-button'; chatButton.innerHTML = ''; chatButton.style.cssText = 'position:fixed!important;bottom:20px!important;right:20px!important;z-index:99999!important;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important;color:white!important;border:none!important;border-radius:50%!important;width:80px!important;height:80px!important;cursor:pointer!important;box-shadow:0 6px 25px rgba(102, 126, 234, 0.5)!important;transition:all 0.3s ease!important;display:flex!important;align-items:center!important;justify-content:center!important;'; chatButton.onmouseover = function() { this.style.transform = 'scale(1.1)'; }; chatButton.onmouseout = function() { this.style.transform = 'scale(1)'; }; chatButton.onclick = function() { openChatWindow(); }; container.appendChild(chatButton); // WhatsApp (verde) const whatsappButton = document.createElement('button'); whatsappButton.className = 'fly2any-chat-button'; whatsappButton.innerHTML = ''; whatsappButton.style.cssText = 'position:fixed!important;bottom:20px!important;right:110px!important;z-index:99999!important;background:linear-gradient(135deg, #25d366 0%, #128c7e 100%)!important;color:white!important;border:none!important;border-radius:50%!important;width:80px!important;height:80px!important;cursor:pointer!important;box-shadow:0 6px 25px rgba(37, 211, 102, 0.5)!important;transition:all 0.3s ease!important;display:flex!important;align-items:center!important;justify-content:center!important;'; whatsappButton.onmouseover = function() { this.style.transform = 'scale(1.1)'; }; whatsappButton.onmouseout = function() { this.style.transform = 'scale(1)'; }; whatsappButton.onclick = function() { const message = encodeURIComponent('Olá! Gostaria de solicitar uma cotação de viagem.'); const phone = '551151944717'; // Detectar dispositivo const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); if (isMobile) { // Tentar abrir o app do WhatsApp primeiro const whatsappUrl = 'whatsapp://send?phone=' + phone + '&text=' + message; const webUrl = 'https://wa.me/' + phone + '?text=' + message; // Tentar abrir o app window.location.href = whatsappUrl; // Se não funcionar, abrir no navegador após 2 segundos setTimeout(function() { window.open(webUrl, '_blank'); }, 2000); } else { // Desktop: abrir WhatsApp Web diretamente window.open('https://wa.me/' + phone + '?text=' + message, '_blank'); } }; container.appendChild(whatsappButton); } // Criar botões com verificação para evitar duplicação function createButtonsIfNeeded() { // Só criar se não existir nenhum botão de chat ainda if (!document.querySelector('.fly2any-chat-button') && !document.querySelector('[class*="ChatAgent"]')) { createChatButtons(); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', createButtonsIfNeeded); } else { createButtonsIfNeeded(); } // Recriar após carregamento completo window.addEventListener('load', createButtonsIfNeeded); // Verificar periodicamente se os botões ainda existem setInterval(function() { createButtonsIfNeeded(); }, 3000);

Aluguel de Carros no Brasil