Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Chat Assistant</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-color: #6366f1; | |
| --secondary-color: #8b5cf6; | |
| --bg-primary: #0f172a; | |
| --bg-secondary: #1e293b; | |
| --bg-tertiary: #334155; | |
| --text-primary: #f1f5f9; | |
| --text-secondary: #94a3b8; | |
| --accent: #22d3ee; | |
| --message-user: #6366f1; | |
| --message-ai: #334155; | |
| --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); | |
| --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1); | |
| --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| --border-radius: 12px; | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| body.light-theme { | |
| --bg-primary: #ffffff; | |
| --bg-secondary: #f8fafc; | |
| --bg-tertiary: #e2e8f0; | |
| --text-primary: #1e293b; | |
| --text-secondary: #64748b; | |
| --message-user: #6366f1; | |
| --message-ai: #f1f5f9; | |
| --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); | |
| --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1); | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| height: 100vh; | |
| overflow: hidden; | |
| transition: var(--transition); | |
| } | |
| .app-container { | |
| display: flex; | |
| height: 100vh; | |
| position: relative; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| width: 280px; | |
| background: var(--bg-secondary); | |
| border-right: 1px solid var(--bg-tertiary); | |
| display: flex; | |
| flex-direction: column; | |
| transition: var(--transition); | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .sidebar-header { | |
| padding: 20px; | |
| border-bottom: 1px solid var(--bg-tertiary); | |
| background: var(--bg-tertiary); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| } | |
| .logo i { | |
| font-size: 2rem; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .new-chat-btn { | |
| margin: 20px; | |
| padding: 12px; | |
| background: var(--gradient); | |
| border: none; | |
| border-radius: var(--border-radius); | |
| color: white; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| .new-chat-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .chat-history { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 10px; | |
| } | |
| .chat-history-item { | |
| padding: 12px 16px; | |
| margin-bottom: 8px; | |
| border-radius: var(--border-radius); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .chat-history-item:hover { | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .chat-history-item.active { | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| .chat-history-item i { | |
| font-size: 1.2rem; | |
| } | |
| /* Main Chat Area */ | |
| .main-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| } | |
| .chat-header { | |
| padding: 20px 30px; | |
| background: var(--bg-secondary); | |
| border-bottom: 1px solid var(--bg-tertiary); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .chat-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| background: #10b981; | |
| border-radius: 50%; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 15px; | |
| } | |
| .header-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| padding: 8px; | |
| border-radius: 8px; | |
| transition: var(--transition); | |
| } | |
| .header-btn:hover { | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .messages-container { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 30px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| scroll-behavior: smooth; | |
| } | |
| .message { | |
| display: flex; | |
| gap: 15px; | |
| animation: slideIn 0.3s ease-out; | |
| max-width: 80%; | |
| } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .message.user { | |
| align-self: flex-end; | |
| flex-direction: row-reverse; | |
| } | |
| .message-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| flex-shrink: 0; | |
| } | |
| .message.user .message-avatar { | |
| background: var(--gradient); | |
| color: white; | |
| } | |
| .message.ai .message-avatar { | |
| background: var(--bg-tertiary); | |
| color: var(--primary-color); | |
| } | |
| .message-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| .message-bubble { | |
| padding: 15px 20px; | |
| border-radius: var(--border-radius); | |
| background: var(--message-ai); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| word-wrap: break-word; | |
| position: relative; | |
| box-shadow: var(--shadow); | |
| } | |
| .message.user .message-bubble { | |
| background: var(--message-user); | |
| color: white; | |
| } | |
| .message-time { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| padding: 0 5px; | |
| } | |
| .typing-indicator { | |
| display: none; | |
| align-items: center; | |
| gap: 15px; | |
| padding: 0 30px; | |
| } | |
| .typing-indicator.active { | |
| display: flex; | |
| } | |
| .typing-dots { | |
| display: flex; | |
| gap: 5px; | |
| padding: 15px 20px; | |
| background: var(--message-ai); | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| } | |
| .typing-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--text-secondary); | |
| animation: typing 1.4s infinite; | |
| } | |
| .typing-dot:nth-child(2) { animation-delay: 0.2s; } | |
| .typing-dot:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes typing { | |
| 0%, 60%, 100% { transform: translateY(0); } | |
| 30% { transform: translateY(-10px); } | |
| } | |
| /* Input Area */ | |
| .input-container { | |
| padding: 20px 30px; | |
| background: var(--bg-secondary); | |
| border-top: 1px solid var(--bg-tertiary); | |
| } | |
| .input-wrapper { | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| background: var(--bg-primary); | |
| border: 2px solid var(--bg-tertiary); | |
| border-radius: var(--border-radius); | |
| padding: 5px; | |
| transition: var(--transition); | |
| } | |
| .input-wrapper:focus-within { | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); | |
| } | |
| .message-input { | |
| flex: 1; | |
| border: none; | |
| background: none; | |
| padding: 12px 15px; | |
| font-size: 1rem; | |
| color: var(--text-primary); | |
| outline: none; | |
| resize: none; | |
| max-height: 120px; | |
| min-height: 24px; | |
| } | |
| .input-actions { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .input-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| padding: 10px; | |
| border-radius: 8px; | |
| transition: var(--transition); | |
| } | |
| .input-btn:hover { | |
| background: var(--bg-tertiary); | |
| color: var(--text-primary); | |
| } | |
| .send-btn { | |
| background: var(--gradient); | |
| color: white; | |
| padding: 10px 15px; | |
| border-radius: 8px; | |
| } | |
| .send-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow); | |
| } | |
| /* Mobile Menu Toggle */ | |
| .mobile-menu-toggle { | |
| display: none; | |
| position: fixed; | |
| top: 20px; | |
| left: 20px; | |
| z-index: 100; | |
| background: var(--bg-secondary); | |
| border: none; | |
| color: var(--text-primary); | |
| font-size: 1.5rem; | |
| padding: 10px; | |
| border-radius: var(--border-radius); | |
| cursor: pointer; | |
| box-shadow: var(--shadow); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| position: fixed; | |
| left: -280px; | |
| height: 100vh; | |
| z-index: 50; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .sidebar.active { | |
| left: 0; | |
| } | |
| .mobile-menu-toggle { | |
| display: block; | |
| } | |
| .message { | |
| max-width: 90%; | |
| } | |
| .messages-container { | |
| padding: 20px 15px; | |
| } | |
| .input-container { | |
| padding: 15px; | |
| } | |
| .chat-header { | |
| padding: 15px 20px; | |
| } | |
| } | |
| /* Scrollbar Styling */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-tertiary); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--text-secondary); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary-color); | |
| } | |
| /* Welcome Screen */ | |
| .welcome-screen { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| text-align: center; | |
| padding: 40px; | |
| } | |
| .welcome-icon { | |
| font-size: 4rem; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 20px; | |
| } | |
| .welcome-title { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| } | |
| .welcome-subtitle { | |
| color: var(--text-secondary); | |
| font-size: 1.1rem; | |
| margin-bottom: 30px; | |
| } | |
| .suggestions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| justify-content: center; | |
| max-width: 600px; | |
| } | |
| .suggestion-chip { | |
| padding: 10px 20px; | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--bg-tertiary); | |
| border-radius: 20px; | |
| color: var(--text-primary); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-size: 0.9rem; | |
| } | |
| .suggestion-chip:hover { | |
| background: var(--primary-color); | |
| color: white; | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <!-- Mobile Menu Toggle --> | |
| <button class="mobile-menu-toggle" onclick="toggleSidebar()"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <!-- Sidebar --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <div class="logo"> | |
| <i class="fas fa-robot"></i> | |
| <span>AI Assistant</span> | |
| </div> | |
| </div> | |
| <button class="new-chat-btn" onclick="startNewChat()"> | |
| <i class="fas fa-plus"></i> | |
| New Chat | |
| </button> | |
| <div class="chat-history" id="chatHistory"> | |
| <div class="chat-history-item active"> | |
| <i class="fas fa-message"></i> | |
| <span>Current Conversation</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <!-- Chat Header --> | |
| <div class="chat-header"> | |
| <div class="chat-info"> | |
| <div class="status-indicator"></div> | |
| <div> | |
| <div style="font-weight: 600;">AI Assistant</div> | |
| <div style="font-size: 0.85rem; color: var(--text-secondary);">Always here to help</div> | |
| </div> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="header-btn" onclick="toggleTheme()" title="Toggle theme"> | |
| <i class="fas fa-moon" id="themeIcon"></i> | |
| </button> | |
| <button class="header-btn" onclick="clearChat()" title="Clear chat"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| <button class="header-btn" onclick="downloadChat()" title="Download chat"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Messages Container --> | |
| <div class="messages-container" id="messagesContainer"> | |
| <div class="welcome-screen" id="welcomeScreen"> | |
| <i class="fas fa-comments welcome-icon"></i> | |
| <h1 class="welcome-title">Welcome to AI Chat</h1> | |
| <p class="welcome-subtitle">Start a conversation with your AI assistant. I'm here to help with any questions or tasks you have!</p> | |
| <div class="suggestions"> | |
| <div class="suggestion-chip" onclick="sendSuggestion('Help me write a professional email')"> | |
| ✉️ Write an email | |
| </div> | |
| <div class="suggestion-chip" onclick="sendSuggestion('Explain quantum computing simply')"> | |
| 🧠 Explain concept | |
| </div> | |
| <div class="suggestion-chip" onclick="sendSuggestion('Give me coding tips for JavaScript')"> | |
| 💻 Coding help | |
| </div> | |
| <div class="suggestion-chip" onclick="sendSuggestion('Create a workout plan')"> | |
| 🏃 Fitness plan | |
| </div> | |
| <div class="suggestion-chip" onclick="sendSuggestion('Help me brainstorm ideas')"> | |
| 💡 Brainstorm | |
| </div> | |
| <div class="suggestion-chip" onclick="sendSuggestion('Tell me a fun fact')"> | |
| 🎉 Fun fact | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Typing Indicator --> | |
| <div class="typing-indicator" id="typingIndicator"> | |
| <div class="message-avatar"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="typing-dots"> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| <div class="typing-dot"></div> | |
| </div> | |
| </div> | |
| <!-- Input Container --> | |
| <div class="input-container"> | |
| <div class="input-wrapper"> | |
| <textarea | |
| class="message-input" | |
| id="messageInput" | |
| placeholder="Type your message..." | |
| rows="1" | |
| onkeydown="handleKeyPress(event)" | |
| oninput="autoResize(this)" | |
| ></textarea> | |
| <div class="input-actions"> | |
| <button class="input-btn" onclick="attachFile()" title="Attach file"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <button class="input-btn" onclick="voiceInput()" title="Voice input"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <button class="input-btn send-btn" onclick="sendMessage()" title="Send message"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| let chatStarted = false; | |
| let messageHistory = []; | |
| // AI Responses Database | |
| const aiResponses = { | |
| greeting: [ | |
| "Hello! I'm your AI assistant. How can I help you today?", | |
| "Hi there! What can I do for you?", | |
| "Greetings! I'm here to assist you with any questions or tasks." | |
| ], | |
| coding: [ | |
| "I'd be happy to help you with coding! JavaScript is a versatile language. Some key tips: 1) Use const and let instead of var, 2) Learn async/await for handling promises, 3) Master array methods like map, filter, and reduce. What specific aspect would you like to explore?", | |
| "For JavaScript development, I recommend focusing on modern ES6+ features, understanding closures, and practicing DOM manipulation. Would you like me to explain any of these in detail?" | |
| ], | |
| email: [ | |
| "I can help you write a professional email! Here's a template:\n\nSubject: [Your Subject]\n\nDear [Recipient Name],\n\n[Opening sentence stating purpose]\n\n[Main body with details]\n\n[Closing sentence]\n\nBest regards,\n[Your Name]\n\nWould you like me to help you customize this for a specific situation?" | |
| ], | |
| quantum: [ | |
| "Quantum computing is like traditional computing but uses quantum bits (qubits) instead of regular bits. While regular bits are either 0 or 1, qubits can be both at the same time! This allows quantum computers to process many possibilities simultaneously. Think of it like exploring all paths in a maze at once instead of one by one. It's particularly useful for complex problems like drug discovery and cryptography." | |
| ], | |
| workout: [ | |
| "Here's a balanced workout plan:\n\n🏋️ **Monday**: Upper body (push-ups, pull-ups, shoulder press)\n🏃 **Tuesday**: Cardio (30 min run or cycling)\n💪 **Wednesday**: Lower body (squats, lunges, deadlifts)\n🧘 **Thursday**: Flexibility & core (yoga, planks)\n🏊 **Friday**: Full body circuit\n🚶 **Weekend**: Active recovery (walking, stretching)\n\nRemember to warm up, stay hydrated, and listen to your body!" | |
| ], | |
| brainstorm: [ | |
| "I love brainstorming! Let's explore some creative thinking techniques:\n\n1. **Mind Mapping**: Start with a central idea and branch out\n2. **SCAMPER**: Substitute, Combine, Adapt, Modify, Put to another use, Eliminate, Reverse\n3. **Six Thinking Hats**: Look at problems from different perspectives\n4. **Random Word Association**: Connect unrelated concepts\n\nWhat topic would you like to brainstorm about?" | |
| ], | |
| fact: [ | |
| "Here's a fun fact: Octopuses have three hearts! Two pump blood through the gills, while the third pumps it to the rest of the body. When they swim, the heart that delivers blood to the body actually stops beating, which is why they prefer crawling over swimming!", | |
| "Fun fact: Honey never spoils! Archaeologists have found pots of honey in ancient Egyptian tombs that are over 3,000 years old and still perfectly edible. The low water content and acidic pH make it impossible for bacteria to grow." | |
| ], | |
| default: [ | |
| "That's an interesting question! Let me think about that for you...", | |
| "I understand what you're asking. Here's what I think about it...", | |
| "Great question! Based on my knowledge, I can tell you that...", | |
| "That's something I can definitely help with. Here's my take on it..." | |
| ] | |
| }; | |
| // Get relevant response | |
| function getAIResponse(message) { | |
| const lowerMessage = message.toLowerCase(); | |
| if (lowerMessage.includes('hello') || lowerMessage.includes('hi') || lowerMessage.includes('hey')) { | |
| return getRandomResponse(aiResponses.greeting); | |
| } else if (lowerMessage.includes('coding') || lowerMessage.includes('javascript') || lowerMessage.includes('code')) { | |
| return getRandomResponse(aiResponses.coding); | |
| } else if (lowerMessage.includes('email') || lowerMessage.includes('mail')) { | |
| return getRandomResponse(aiResponses.email); | |
| } else if (lowerMessage.includes('quantum') || lowerMessage.includes('computing')) { | |
| return getRandomResponse(aiResponses.quantum); | |
| } else if (lowerMessage.includes('workout') || lowerMessage.includes('exercise') || lowerMessage.includes('fitness')) { | |
| return getRandomResponse(aiResponses.workout); | |
| } else if (lowerMessage.includes('brainstorm') || lowerMessage.includes('ideas')) { | |
| return getRandomResponse(aiResponses.brainstorm); | |
| } else if (lowerMessage.includes('fact') || lowerMessage.includes('fun')) { | |
| return getRandomResponse(aiResponses.fact); | |
| } else { | |
| return getRandomResponse(aiResponses.default) + " " + generateContextualResponse(message); | |
| } | |
| } | |
| function getRandomResponse(responses) { | |
| return responses[Math.floor(Math.random() * responses.length)]; | |
| } | |
| function generateContextualResponse(message) { | |
| const words = message.split(' '); | |
| const keyWords = words.filter(word => word.length > 4).slice(0, 2); | |
| return `You mentioned ${keyWords.join(' and ') || 'this topic'}. This is definitely worth exploring further. Could you tell me more about what specifically interests you?`; | |
| } | |
| // Send message | |
| function sendMessage() { | |
| const input = document.getElementById('messageInput'); | |
| const message = input.value.trim(); | |
| if (message === '') return; | |
| if (!chatStarted) { | |
| document.getElementById('welcomeScreen').style.display = 'none'; | |
| chatStarted = true; | |
| } | |
| // Add user message | |
| addMessage(message, 'user'); | |
| messageHistory.push({ role: 'user', content: message, time: new Date() }); | |
| // Clear input | |
| input.value = ''; | |
| autoResize(input); | |
| // Show typing indicator | |
| showTypingIndicator(); | |
| // Simulate AI response | |
| setTimeout(() => { | |
| hideTypingIndicator(); | |
| const aiResponse = getAIResponse(message); | |
| addMessage(aiResponse, 'ai'); | |
| messageHistory.push({ role: 'ai', content: aiResponse, time: new Date() }); | |
| }, 1000 + Math.random() * 1000); | |
| } | |
| // Add message to chat | |
| function addMessage(text, sender) { | |
| const container = document.getElementById('messagesContainer'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message ${sender}`; | |
| const time = new Date().toLocaleTimeString('en-US', { | |
| hour: '2-digit', | |
| minute: '2-digit' | |
| }); | |
| messageDiv.innerHTML = ` | |
| <div class="message-avatar"> | |
| <i class="fas fa-${sender === 'user' ? 'user' : 'robot'}"></i> | |
| </div> | |
| <div class="message-content"> | |
| <div class="message-bubble">${text.replace(/\n/g, '<br>')}</div> | |
| <div class="message-time">${time}</div> | |
| </div> | |
| `; | |
| container.appendChild(messageDiv); | |
| scrollToBottom(); | |
| } | |
| // Show/hide typing indicator | |
| function showTypingIndicator() { | |
| document.getElementById('typingIndicator').classList.add('active'); | |
| scrollToBottom(); | |
| } | |
| function hideTypingIndicator() { | |
| document.getElementById('typingIndicator').classList.remove('active'); | |
| } | |
| // Scroll to bottom | |
| function scrollToBottom() { | |
| const container = document.getElementById('messagesContainer'); | |
| setTimeout(() => { | |
| container.scrollTop = container.scrollHeight; | |
| }, 100); | |
| } | |
| // Handle key press | |
| function handleKeyPress(event) { | |
| if (event.key === 'Enter' && !event.shiftKey) { | |
| event.preventDefault(); | |
| sendMessage(); | |
| } | |
| } | |
| // Auto resize textarea | |
| function autoResize(textarea) { | |
| textarea.style.height = 'auto'; | |
| textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px'; | |
| } | |
| // Send suggestion | |
| function sendSuggestion(text) { | |
| document.getElementById('messageInput').value = text; | |
| sendMessage(); | |
| } | |
| // Theme toggle | |
| function toggleTheme() { | |
| document.body.classList.toggle('light-theme'); | |
| const icon = document.getElementById('themeIcon'); | |
| icon.className = document.body.classList.contains('light-theme') ? 'fas fa-sun' : 'fas fa-moon'; | |
| } | |
| // Clear chat | |
| function clearChat() { | |
| if (confirm('Are you sure you want to clear the chat history?')) { | |
| document.getElementById('messagesContainer').innerHTML = ` | |
| <div class="welcome-screen" id="welcomeScreen"> | |
| <i class="fas fa-comments welcome-icon"></i> | |
| <h1 class="welcome-title">Welcome to AI Chat</h1> | |
| <p class="welcome-subtitle">Start a conversation with your AI assistant. I'm here to help with any questions or tasks you have!</p> | |
| <div class="suggestions"> | |
| <div class="suggestion-chip" onclick="sendSuggestion('Help me write a professional email')"> | |
| ✉️ Write an email | |
| </div> | |
| <div class="suggestion-chip" onclick="sendSuggestion('Explain quantum computing simply')"> | |
| 🧠 Explain concept | |
| </div> | |
| <div class="suggestion-chip" onclick="sendSuggestion('Give me coding tips for JavaScript')"> | |
| 💻 Coding help | |
| </div> | |
| <div class="suggestion-chip" onclick="sendSuggestion('Create a workout plan')"> | |
| 🏃 Fitness plan | |
| </div> | |
| <div class="suggestion-chip" onclick="sendSuggestion('Help me brainstorm ideas')"> | |
| 💡 Brainstorm | |
| </div> | |
| <div class="suggestion-chip" onclick="sendSuggestion('Tell me a fun fact')"> | |
| 🎉 Fun fact | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatStarted = false; | |
| messageHistory = []; | |
| } | |
| } | |
| // Download chat | |
| function downloadChat() { | |
| if (messageHistory.length === 0) { | |
| alert('No chat history to download'); | |
| return; | |
| } | |
| let content = 'AI Chat History\n'; | |
| content += '================\n\n'; | |
| messageHistory.forEach(msg => { | |
| content += `${msg.role.toUpperCase()} (${msg.time.toLocaleString()}):\n`; | |
| content += `${msg.content}\n\n`; | |
| }); | |
| const blob = new Blob([content], { type: 'text/plain' }); | |
| const url = window.URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `chat-history-${Date.now()}.txt`; | |
| a.click(); | |
| window.URL.revokeObjectURL(url); | |
| } | |
| // Start new chat | |
| function startNewChat() { | |
| if (messageHistory.length > 0 && confirm('Start a new chat? Current conversation will be saved to history.')) { | |
| // Add to history | |
| const historyItem = document.createElement('div'); | |
| historyItem.className = 'chat-history-item'; | |
| historyItem.innerHTML = ` | |
| <i class="fas fa-message"></i> | |
| <span>Chat ${document.querySelectorAll('.chat-history-item').length}</span> | |
| `; | |
| document.getElementById('chatHistory').appendChild(historyItem); | |
| clearChat(); | |
| } | |
| // Close sidebar on mobile | |
| if (window.innerWidth <= 768) { | |
| toggleSidebar(); | |
| } | |
| } | |
| // Toggle sidebar | |
| function toggleSidebar() { | |
| document.getElementById('sidebar').classList.toggle('active'); | |
| } | |
| // Attach file (placeholder) | |
| function attachFile() { | |
| alert('File attachment feature coming soon!'); | |
| } | |
| // Voice input (placeholder) | |
| function voiceInput() { | |
| alert('Voice input feature coming soon!'); | |
| } | |
| // Close sidebar when clicking outside on mobile | |
| document.addEventListener('click', function(event) { | |
| const sidebar = document.getElementById('sidebar'); | |
| const toggle = document.querySelector('.mobile-menu-toggle'); | |
| if (window.innerWidth <= 768 && | |
| sidebar.classList.contains('active') && | |
| !sidebar.contains(event.target) && | |
| !toggle.contains(event.target)) { | |
| sidebar.classList.remove('active'); | |
| } | |
| }); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Focus input | |
| document.getElementById('messageInput').focus(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |