HA07/mindsync-ai-chatbot
1
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>MindSync AI - Your Intelligent Chat Companion</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>11 <script>12 tailwind.config = {13 theme: {14 extend: {15 colors: {16 primary: '#10b981',17 secondary: '#3b82f6',18 dark: '#1f2937',19 light: '#f8fafc'20 }21 }22 }23 }24 </script>25 <style>26 .gradient-bg {27 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);28 }29 .message-bubble {30 max-width: 80%;31 animation: fadeInUp 0.3s ease-out;32 }33 @keyframes fadeInUp {34 from {35 opacity: 0;36 transform: translateY(10px);37 }38 to {39 opacity: 1;40 transform: translateY(0);41 }42 }43 .typing-indicator {44 display: inline-flex;45 align-items: center;46 }47 .typing-dot {48 width: 8px;49 height: 8px;50 border-radius: 50%;51 background-color: #9ca3af;52 margin: 0 2px;53 animation: typing 1.4s infinite ease-in-out;54 }55 .typing-dot:nth-child(1) { animation-delay: -0.32s; }56 .typing-dot:nth-child(2) { animation-delay: -0.16s; }57 @keyframes typing {58 0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }59 40% { transform: scale(1); opacity: 1; }60 }61 .smooth-scroll {62 scroll-behavior: smooth;63 }64 </style>65</head>66<body class="bg-gray-50 min-h-screen">67 <!-- Navigation -->68 <nav class="bg-white shadow-sm border-b border-gray-200">69 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">70 <div class="flex justify-between items-center h-16">71 <div class="flex items-center">72 <div class="flex-shrink-0 flex items-center">73 <i data-feather="brain" class="w-8 h-8 text-primary mr-2"></i>74 <span class="text-xl font-bold text-gray-900">MindSync AI</span>75 </div>76 </div>77 <div class="flex items-center space-x-4">78 <button class="text-gray-600 hover:text-gray-900 transition-colors">79 <i data-feather="moon" class="w-5 h-5"></i>80 </button>81 <button class="text-gray-600 hover:text-gray-900 transition-colors">82 <i data-feather="settings" class="w-5 h-5"></i>83 </button>84 </div>85 </div>86 </div>87 </nav>88 89 <!-- Main Chat Interface -->90 <div class="max-w-4xl mx-auto py-6 px-4 sm:px-6 lg:px-8">91 <!-- Welcome Section -->92 <div class="text-center mb-8">93 <h1 class="text-4xl font-bold text-gray-900 mb-4">How can I help you today?</h1>94 <p class="text-lg text-gray-600">Ask me anything and I'll do my best to assist you</p>95 </div>96 97 <!-- Quick Action Cards -->98 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">99 <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 cursor-pointer hover:shadow-md transition-shadow">100 <i data-feather="search" class="w-6 h-6 text-primary mb-2"></i>101 <h3 class="font-semibold text-gray-900">Search & Research</h3>102 <p class="text-sm text-gray-600 mt-1">Find information quickly</p>103 </div>104 <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 cursor-pointer hover:shadow-md transition-shadow">105 <i data-feather="edit-3" class="w-6 h-6 text-secondary mb-2"></i>106 <h3 class="font-semibold text-gray-900">Writing Assistant</h3>107 <p class="text-sm text-gray-600 mt-1">Help with writing tasks</p>108 </div>109 <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 cursor-pointer hover:shadow-md transition-shadow">110 <i data-feather="code" class="w-6 h-6 text-green-500 mb-2"></i>111 <h3 class="font-semibold text-gray-900">Code Helper</h3>112 <p class="text-sm text-gray-600 mt-1">Programming assistance</p>113 </div>114 <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 cursor-pointer hover:shadow-md transition-shadow">115 <i data-feather="message-circle" class="w-6 h-6 text-purple-500 mb-2"></i>116 <h3 class="font-semibold text-gray-900">General Chat</h3>117 <p class="text-sm text-gray-600 mt-1">Casual conversation</p>118 </div>119 </div>120 121 <!-- Chat Container -->122 <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">123 <!-- Chat Header -->124 <div class="border-b border-gray-200 px-6 py-4">125 <div class="flex items-center justify-between">126 <div class="flex items-center space-x-3">127 <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>128 <span class="text-sm font-medium text-gray-700">Online</span>129 </div>130 <div class="flex items-center space-x-2">131 <button class="p-2 text-gray-400 hover:text-gray-600 transition-colors">132 <i data-feather="copy" class="w-4 h-4"></i>133 </button>134 <button class="p-2 text-gray-400 hover:text-gray-600 transition-colors">135 <i data-feather="trash-2" class="w-4 h-4"></i>136 </button>137 </div>138 </div>139 </div>140 141 <!-- Messages Container -->142 <div id="messages-container" class="h-96 overflow-y-auto p-6 space-y-4 smooth-scroll">143 <!-- Welcome Message -->144 <div class="flex justify-start">145 <div class="message-bubble bg-gray-100 rounded-2xl rounded-tl-none px-4 py-3">146 <div class="flex items-center space-x-2 mb-2">147 <i data-feather="brain" class="w-4 h-4 text-primary"></i>148 <span class="text-sm font-medium text-gray-700">MindSync AI</span>149 </div>150 <p class="text-gray-800">Hello! I'm your AI assistant. I can help you with research, writing, coding, and much more. What would you like to explore today?</p>151 </div>152 </div>153 </div>154 155 <!-- Input Area -->156 <div class="border-t border-gray-200 p-6">157 <div class="flex space-x-4">158 <div class="flex-1">159 <textarea 160 id="message-input"161 placeholder="Ask me anything..."162 class="w-full px-4 py-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-primary focus:border-transparent"163 rows="1"164 ></textarea>165 </div>166 <button 167 id="send-button"168 class="bg-primary hover:bg-emerald-600 text-white px-6 py-3 rounded-lg transition-colors flex items-center space-x-2"169 >170 <i data-feather="send" class="w-4 h-4"></i>171 <span>Send</span>172 </button>173 </div>174 <div class="flex items-center justify-between mt-3">175 <div class="flex items-center space-x-3">176 <button class="text-gray-400 hover:text-gray-600 transition-colors">177 <i data-feather="paperclip" class="w-4 h-4"></i>178 </button>179 <button class="text-gray-400 hover:text-gray-600 transition-colors">180 <i data-feather="mic" class="w-4 h-4"></i>181 </button>182 </div>183 <div class="text-xs text-gray-400">184 Press Enter to send, Shift+Enter for new line185 </div>186 </div>187 </div>188 </div>189 190 <!-- Features Section -->191 <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">192 <div class="text-center">193 <i data-feather="zap" class="w-8 h-8 text-primary mx-auto mb-3"></i>194 <h3 class="font-semibold text-gray-900 mb-2">Lightning Fast</h3>195 <p class="text-sm text-gray-600">Get instant responses with our optimized AI models</p>196 </div>197 <div class="text-center">198 <i data-feather="shield" class="w-8 h-8 text-secondary mx-auto mb-3"></i>199 <h3 class="font-semibold text-gray-900 mb-2">Secure & Private</h3>200 <p class="text-sm text-gray-600">Your conversations are encrypted and never stored</p>201 </div>202 <div class="text-center">203 <i data-feather="award" class="w-8 h-8 text-yellow-500 mx-auto mb-3"></i>204 <h3 class="font-semibold text-gray-900 mb-2">Premium Quality</h3>205 <p class="text-sm text-gray-600">Access to the latest AI models and features</p>206 </div>207 </div>208 </div>209 210 <!-- Footer -->211 <footer class="bg-white border-t border-gray-200 mt-12">212 <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">213 <div class="text-center text-gray-600">214 <p>© 2024 MindSync AI. All rights reserved.</p>215 </div>216 </div>217 </footer>218 219 <script>220 // Initialize feather icons221 feather.replace();222 223 // Chat functionality224 const messagesContainer = document.getElementById('messages-container');225 const messageInput = document.getElementById('message-input');226 const sendButton = document.getElementById('send-button');227 const attachButton = document.querySelector('[data-feather="paperclip"]').closest('button');228 const micButton = document.querySelector('[data-feather="mic"]').closest('button');229 230 let recognition = null;231 let isListening = false;232 let isProcessing = false;233 234 // Initialize speech recognition235 function initializeSpeechRecognition() {236 if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {237 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;238 recognition = new SpeechRecognition();239 recognition.continuous = false;240 recognition.interimResults = false;241 recognition.lang = 'en-US';242 243 recognition.onstart = function() {244 isListening = true;245 micButton.innerHTML = '<i data-feather="square" class="w-4 h-4 text-red-500"></i>';246 feather.replace();247 };248 249 recognition.onresult = function(event) {250 const transcript = event.results[0][0].transcript;251 messageInput.value = transcript;252 messageInput.style.height = 'auto';253 messageInput.style.height = (messageInput.scrollHeight) + 'px';254 };255 256 recognition.onend = function() {257 isListening = false;258 micButton.innerHTML = '<i data-feather="mic" class="w-4 h-4"></i>';259 feather.replace();260 };261 262 recognition.onerror = function(event) {263 console.error('Speech recognition error:', event.error);264 isListening = false;265 micButton.innerHTML = '<i data-feather="mic" class="w-4 h-4"></i>';266 feather.replace();267 };268 } else {269 console.warn('Speech recognition not supported in this browser');270 micButton.disabled = true;271 micButton.classList.add('opacity-50', 'cursor-not-allowed');272 }273 }274 275 function addMessage(content, isUser = false, isFile = false) {276 const messageDiv = document.createElement('div');277 messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`;278 279 const bubbleDiv = document.createElement('div');280 bubbleDiv.className = `message-bubble ${isUser ? 'bg-primary text-white rounded-2xl rounded-tr-none' : 'bg-gray-100 rounded-2xl rounded-tl-none'} px-4 py-3`;281 282 if (!isUser && !isFile) {283 const headerDiv = document.createElement('div');284 headerDiv.className = 'flex items-center space-x-2 mb-2';285 headerDiv.innerHTML = `286 <i data-feather="brain" class="w-4 h-4 text-primary"></i>287 <span class="text-sm font-medium ${isUser ? 'text-white' : 'text-gray-700'}">MindSync AI</span>288 `;289 bubbleDiv.appendChild(headerDiv);290 }291 292 if (isFile) {293 const fileDiv = document.createElement('div');294 fileDiv.className = 'flex items-center space-x-2';295 fileDiv.innerHTML = `296 <i data-feather="file" class="w-4 h-4 ${isUser ? 'text-white' : 'text-primary'}"></i>297 <span class="${isUser ? 'text-white' : 'text-gray-800'}">${content}</span>298 `;299 bubbleDiv.appendChild(fileDiv);300 } else {301 const contentP = document.createElement('p');302 contentP.className = isUser ? 'text-white' : 'text-gray-800';303 contentP.textContent = content;304 bubbleDiv.appendChild(contentP);305 }306 307 messageDiv.appendChild(bubbleDiv);308 messagesContainer.appendChild(messageDiv);309 310 // Scroll to bottom311 messagesContainer.scrollTop = messagesContainer.scrollHeight;312 313 // Re-initialize feather icons for new elements314 feather.replace();315 }316 317 function showTypingIndicator() {318 const typingDiv = document.createElement('div');319 typingDiv.className = 'flex justify-start';320 typingDiv.id = 'typing-indicator';321 322 const bubbleDiv = document.createElement('div');323 bubbleDiv.className = 'message-bubble bg-gray-100 rounded-2xl rounded-tl-none px-4 py-3';324 325 const headerDiv = document.createElement('div');326 headerDiv.className = 'flex items-center space-x-2 mb-2';327 headerDiv.innerHTML = `328 <i data-feather="brain" class="w-4 h-4 text-primary"></i>329 <span class="text-sm font-medium text-gray-700">MindSync AI</span>330 `;331 bubbleDiv.appendChild(headerDiv);332 333 const typingContent = document.createElement('div');334 typingContent.className = 'typing-indicator';335 typingContent.innerHTML = `336 <span class="text-gray-600 mr-2">Thinking</span>337 <div class="typing-dot"></div>338 <div class="typing-dot"></div>339 <div class="typing-dot"></div>340 `;341 bubbleDiv.appendChild(typingContent);342 343 typingDiv.appendChild(bubbleDiv);344 messagesContainer.appendChild(typingDiv);345 messagesContainer.scrollTop = messagesContainer.scrollHeight;346 347 feather.replace();348 }349 350 function hideTypingIndicator() {351 const typingIndicator = document.getElementById('typing-indicator');352 if (typingIndicator) {353 typingIndicator.remove();354 }355 }356 357 async function getAIResponse(message) {358 try {359 // Simulate API delay360 await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 1000));361 362 // Fallback to a simple response generator363 return generateFallbackResponse(message);364 } catch (error) {365 console.error('AI API Error:', error);366 // Fallback to a simple response generator367 return generateFallbackResponse(message);368 }369 }370 371 function generateFallbackResponse(message) {372 const lowerMessage = message.toLowerCase();373 374 if (lowerMessage.includes('hello') || lowerMessage.includes('hi') || lowerMessage.includes('hey')) {375 return "Hello! I'm MindSync AI, your intelligent assistant. How can I help you today?";376 }377 else if (lowerMessage.includes('weather')) {378 return "I don't have real-time weather data access, but you can check reliable sources like weather.com or your local weather service for current conditions.";379 }380 else if (lowerMessage.includes('time')) {381 return `The current time is ${new Date().toLocaleTimeString()}.`;382 }383 else if (lowerMessage.includes('help')) {384 return "I can help you with research, writing, coding, answering questions, and much more. Just ask me anything specific you'd like to know!";385 }386 else if (lowerMessage.includes('joke')) {387 const jokes = [388 "Why don't scientists trust atoms? Because they make up everything!",389 "Why did the scarecrow win an award? He was outstanding in his field!",390 "Why don't eggs tell jokes? They'd crack each other up!",391 "What do you call a fake noodle? An impasta!"392 ];393 return jokes[Math.floor(Math.random() * jokes.length)];394 }395 else if (lowerMessage.includes('thank')) {396 return "You're welcome! Is there anything else I can help you with?";397 }398 else {399 return `I understand you're asking about "${message}". While I'm currently using a limited response system, I'd be happy to help you with this topic. Could you provide more specific details about what you'd like to know?`;400 }401 }402 403 async function sendMessage() {404 if (isProcessing) return;405 406 const message = messageInput.value.trim();407 if (!message) return;408 409 isProcessing = true;410 411 // Add user message412 addMessage(message, true);413 messageInput.value = '';414 messageInput.style.height = 'auto';415 416 // Show typing indicator417 showTypingIndicator();418 419 try {420 // Get AI response421 const aiResponse = await getAIResponse(message);422 423 hideTypingIndicator();424 addMessage(aiResponse, false);425 isProcessing = false;426 427 } catch (error) {428 hideTypingIndicator();429 addMessage("I apologize, but I'm having trouble processing your request right now. Please try again in a moment.", false);430 isProcessing = false;431 }432 }433 434 // File attachment functionality435 function handleFileUpload(event) {436 const file = event.target.files[0];437 if (file) {438 addMessage(`Attached: ${file.name} (${(file.size / 1024).toFixed(1)} KB)`, true, true);439 440 // In a real implementation, you would upload the file to your server441 // and process it with the AI, but for now we'll just acknowledge the attachment442 showTypingIndicator();443 setTimeout(() => {444 hideTypingIndicator();445 addMessage(`I've received your file "${file.name}". In a full implementation, I would be able to analyze its contents and help you with it.`, false);446 }, 1000);447 }448 }449 450 // Event listeners451 sendButton.addEventListener('click', sendMessage);452 453 messageInput.addEventListener('keydown', (e) => {454 if (e.key === 'Enter' && !e.shiftKey && !isProcessing) {455 e.preventDefault();456 sendMessage();457 }458 });459 460 // Enable the input field and make it focusable461 messageInput.disabled = false;462 messageInput.focus();463 464 // Auto-resize textarea465 messageInput.addEventListener('input', function() {466 this.style.height = 'auto';467 this.style.height = (this.scrollHeight) + 'px';468 });469 470 // File attachment471 attachButton.addEventListener('click', () => {472 const fileInput = document.createElement('input');473 fileInput.type = 'file';474 fileInput.accept = '.txt,.pdf,.doc,.docx,.jpg,.jpeg,.png';475 fileInput.style.display = 'none';476 fileInput.addEventListener('change', handleFileUpload);477 document.body.appendChild(fileInput);478 fileInput.click();479 document.body.removeChild(fileInput);480 });481 482 // Speech recognition483 micButton.addEventListener('click', () => {484 if (recognition) {485 if (isListening) {486 recognition.stop();487 } else {488 recognition.start();489 }490 } else {491 initializeSpeechRecognition();492 if (recognition) {493 recognition.start();494 }495 }496 });497 498 // Quick action cards499 document.querySelectorAll('.bg-white.rounded-lg').forEach(card => {500 card.addEventListener('click', () => {501 const title = card.querySelector('h3').textContent;502 let prompt = '';503 504 switch(title) {505 case 'Search & Research':506 prompt = 'Can you help me research and find information about ';507 break;508 case 'Writing Assistant':509 prompt = 'I need help writing ';510 break;511 case 'Code Helper':512 prompt = 'Can you assist me with programming code for ';513 break;514 case 'General Chat':515 prompt = 'Let\'s have a conversation about ';516 break;517 }518 519 messageInput.value = prompt;520 messageInput.focus();521 messageInput.style.height = 'auto';522 messageInput.style.height = (messageInput.scrollHeight) + 'px';523 });524 });525 526 // Initialize speech recognition on page load527 initializeSpeechRecognition();528 529 // Add some initial animation530 anime({531 targets: '.message-bubble',532 translateY: [20, 0],533 opacity: [0, 1],534 duration: 300,535 easing: 'easeOutQuad'536 });537 </script>538</body>539</html>