File size: 8,140 Bytes
eadb2e2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 | <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot n8n</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #f0f7f4;
}
.chat-bubble-user {
background-color: #a8d8ea;
border-radius: 18px 18px 0 18px;
}
.chat-bubble-bot {
background-color: #e0f0ea;
border-radius: 18px 18px 18px 0;
}
.gradient-bg {
background: linear-gradient(135deg, #a8d8ea 0%, #e0f0ea 100%);
}
.input-focus:focus {
box-shadow: 0 0 0 2px #a8d8ea;
}
.btn-primary {
background-color: #5aa897;
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: #478f7e;
transform: translateY(-1px);
}
.pulse-animation {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<!-- Chat Interface (hidden initially) -->
<div id="chat-interface" class="w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col" style="height: 600px;">
<!-- Chat Header -->
<div class="gradient-bg p-4 flex items-center justify-between">
<div class="flex items-center space-x-3">
<i class="fas fa-robot text-2xl text-white"></i>
<h2 class="text-lg font-semibold text-gray-800">Assistente Virtual</h2>
</div>
<button id="logout-btn" class="text-gray-700 hover:text-gray-900">
<i class="fas fa-sign-out-alt"></i>
</button>
</div>
<!-- Chat Messages -->
<div id="chat-messages" class="flex-1 p-4 overflow-y-auto space-y-3">
<!-- Messages will be added here dynamically -->
<div class="chat-bubble-bot p-3 max-w-xs md:max-w-md">
<p class="text-gray-800">Olá! Sou o assistente virtual integrado ao n8n. Como posso te ajudar hoje?</p>
</div>
</div>
<!-- Chat Input -->
<div class="border-t border-gray-200 p-4 bg-gray-50">
<form id="message-form" class="flex space-x-2">
<input type="text" id="message-input"
class="flex-1 px-4 py-2 rounded-full border border-gray-300 focus:input-focus focus:outline-none"
placeholder="Digite sua mensagem..." autocomplete="off">
<button type="submit" class="btn-primary w-10 h-10 rounded-full flex items-center justify-center text-white">
<i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
</div>
<script>
// DOM Elements
const chatInterface = document.getElementById('chat-interface');
const messageForm = document.getElementById('message-form');
const messageInput = document.getElementById('message-input');
const chatMessages = document.getElementById('chat-messages');
// Show chat interface by default
chatInterface.classList.remove('hidden');
// Message handler
messageForm.addEventListener('submit', (e) => {
e.preventDefault();
const message = messageInput.value.trim();
if(message) {
// Add user message to chat
addUserMessage(message);
messageInput.value = '';
// Show typing indicator
const typingIndicator = document.createElement('div');
typingIndicator.className = 'flex space-x-1 items-center p-3';
typingIndicator.id = 'typing-indicator';
typingIndicator.innerHTML = `
<div class="w-2 h-2 rounded-full bg-gray-400 pulse-animation"></div>
<div class="w-2 h-2 rounded-full bg-gray-400 pulse-animation" style="animation-delay: 0.2s"></div>
<div class="w-2 h-2 rounded-full bg-gray-400 pulse-animation" style="animation-delay: 0.4s"></div>
`;
chatMessages.appendChild(typingIndicator);
chatMessages.scrollTop = chatMessages.scrollHeight;
// Simulate bot response (replace with actual API call to n8n)
setTimeout(() => {
document.getElementById('typing-indicator').remove();
// Sample responses - in a real app, this would come from your n8n workflow
const responses = [
"Entendi sua solicitação. Estou processando as informações...",
"Posso te ajudar com automações, integrações ou configurações do n8n. Qual você precisa?",
"Para integrar esse chatbot ao n8n, você pode usar o nó HTTP Request em seu workflow.",
"Estou verificando os dados solicitados. Um momento por favor.",
"Você pode automatizar esse processo criando um workflow no n8n com os nós apropriados."
];
const randomResponse = responses[Math.floor(Math.random() * responses.length)];
addBotMessage(randomResponse);
}, 1500);
}
});
// Helper functions
function addUserMessage(message) {
const messageDiv = document.createElement('div');
messageDiv.className = 'flex justify-end';
messageDiv.innerHTML = `
<div class="chat-bubble-user p-3 max-w-xs md:max-w-md">
<p class="text-gray-800">${message}</p>
</div>
`;
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function addBotMessage(message) {
const messageDiv = document.createElement('div');
messageDiv.className = 'flex justify-start';
messageDiv.innerHTML = `
<div class="chat-bubble-bot p-3 max-w-xs md:max-w-md">
<p class="text-gray-800">${message}</p>
</div>
`;
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
// Allow sending message with Enter key (but allow Shift+Enter for new lines)
messageInput.addEventListener('keydown', (e) => {
if(e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
messageForm.dispatchEvent(new Event('submit'));
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DigiVelo/chatbot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |