Update js/script.js

js/script.js

@@ -1,668 +1,668 @@
-// Chat Configuration
-const DEFAULT_API_KEY = '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';
-const DEFAULT_MODEL = 'qwen/qwen3-14b:free';
-
-let chatConfig = {
-    apiKey: DEFAULT_API_KEY,
-    model: DEFAULT_MODEL,
-    siteUrl: window.location.origin,
-    siteName: 'Muhafiz AI Chat'
-};
-
-// Conversation history
-let conversationHistory = [];
-
-// DOM Elements
-const messageInput = document.getElementById('message-input');
-const sendButton = document.getElementById('send-btn');
-const chatMessages = document.getElementById('chat-messages');
-const moreButton = document.querySelector('.more-btn');
-const newChatButton = document.getElementById('new-chat-btn');
-const menuButton = document.querySelector('.menu-btn');
-const menuOverlay = document.getElementById('menuOverlay');
-const closeMenuButton = document.getElementById('closeMenuBtn');
-const conversationList = document.getElementById('conversationList');
-const seeMoreBtn = document.getElementById('seeMoreBtn');
-const themeToggleBtn = document.getElementById('themeToggleBtn');
-
-// Initialize chat
-function initChat() {
-    // Load saved configuration and conversations
-    loadChatConfig();
-    loadConversations();
-    loadTheme();
-    
-    // Add event listeners
-    messageInput.addEventListener('input', handleInput);
-    messageInput.addEventListener('keypress', handleKeyPress);
-    sendButton.addEventListener('click', handleSend);
-    moreButton.addEventListener('click', handleMore);
-    newChatButton.addEventListener('click', handleNewChat);
-    menuButton.addEventListener('click', handleMenuOpen);
-    closeMenuButton.addEventListener('click', handleMenuClose);
-    seeMoreBtn.addEventListener('click', handleSeeMore);
-    themeToggleBtn.addEventListener('click', handleThemeToggle);
-    menuOverlay.addEventListener('click', (e) => {
-        if (e.target === menuOverlay) {
-            handleMenuClose();
-        }
-    });
-    
-    // Disable send button initially
-    sendButton.disabled = true;
-    sendButton.style.opacity = '0.5';
-    
-    // Update status bar time
-    updateTime();
-    setInterval(updateTime, 60000);
-}
-
-// Load conversations from localStorage
-function loadConversations() {
-    const savedConversations = localStorage.getItem('conversations');
-    if (savedConversations) {
-        conversationHistory = JSON.parse(savedConversations);
-        
-        // If there are saved conversations, update the chat interface
-        if (conversationHistory.length > 0) {
-            const currentConversation = conversationHistory[0];
-            if (currentConversation.messages.length > 0) {
-                // Clear welcome message
-                while (chatMessages.firstChild) {
-                    chatMessages.removeChild(chatMessages.firstChild);
-                }
-                
-                // Load messages from the current conversation
-                currentConversation.messages.forEach(msg => {
-                    addMessage(msg.content, msg.type);
-                });
-            }
-        }
-    }
-    updateConversationList();
-}
-
-// Save conversations to localStorage
-function saveConversations() {
-    localStorage.setItem('conversations', JSON.stringify(conversationHistory));
-}
-
-// Update conversation list in menu
-function updateConversationList() {
-    conversationList.innerHTML = '';
-    const recentConversations = conversationHistory.slice(0, 4);
-    
-    if (recentConversations.length === 0) {
-        const emptyState = document.createElement('div');
-        emptyState.className = 'empty-conversations';
-        emptyState.textContent = 'No conversations yet';
-        conversationList.appendChild(emptyState);
-        return;
-    }
-    
-    recentConversations.forEach(conv => {
-        const item = document.createElement('div');
-        item.className = 'conversation-item';
-        item.innerHTML = `
-            <i class="fas fa-comment"></i>
-            <span>${conv.title}</span>
-            <span class="message-count">${conv.messages.length} messages</span>
-        `;
-        item.addEventListener('click', () => loadConversation(conv.id));
-        conversationList.appendChild(item);
-    });
-}
-
-// Handle new chat
-async function handleNewChat() {
-    // If there's an existing conversation, generate a title for it
-    if (conversationHistory.length > 0 && conversationHistory[0].messages.length > 0) {
-        const currentConversation = conversationHistory[0];
-        try {
-            const messages = currentConversation.messages.map(msg => `${msg.type}: ${msg.content}`).join('\n');
-            const titlePrompt = `Please summarize this conversation in 4-5 words:\n${messages}`;
-            
-            // Show loading state for the conversation title
-            const tempTitle = 'Generating title...';
-            currentConversation.title = tempTitle;
-            updateConversationList();
-            
-            // Get AI-generated title
-            const response = await fetchBotResponse(titlePrompt);
-            currentConversation.title = response.slice(0, 40).trim();
-            saveConversations();
-            updateConversationList();
-        } catch (error) {
-            console.error('Error generating title:', error);
-            // Fallback to first message if title generation fails
-            currentConversation.title = currentConversation.messages[0].content.slice(0, 30) + '...';
-            saveConversations();
-            updateConversationList();
-        }
-    }
-    
-    // Create new conversation
-    const newConversation = {
-        id: Date.now(),
-        title: 'New Chat',
-        messages: []
-    };
-    
-    // Add to conversations array
-    conversationHistory.unshift(newConversation);
-    saveConversations();
-    updateConversationList();
-    
-    // Clear chat messages
-    while (chatMessages.firstChild) {
-        chatMessages.removeChild(chatMessages.firstChild);
-    }
-    
-    // Add welcome message
-    const welcomeMessage = document.createElement('div');
-    welcomeMessage.className = 'welcome-message';
-    welcomeMessage.innerHTML = `
-        <img src="images/welcome-logo.png" alt="Muhafiz AI Logo" class="welcome-logo">
-        <h2>Hi, I'm Muhafiz AI.</h2>
-        <p>Your digital safety assistant dedicated to combating cyber threats and providing support.</p>
-        <div class="context-info">Ask me about cyber security, online protection, or digital safety concerns.</div>
-    `;
-    chatMessages.appendChild(welcomeMessage);
-    
-    // Clear input
-    messageInput.value = '';
-    handleInput({ target: messageInput });
-    
-    // Focus input
-    messageInput.focus();
-}
-
-// Handle see more button click
-function handleSeeMore() {
-    // Create full conversation list overlay
-    const overlay = document.createElement('div');
-    overlay.className = 'conversation-overlay';
-    
-    const content = document.createElement('div');
-    content.className = 'conversation-overlay-content';
-    
-    // Add header
-    content.innerHTML = `
-        <div class="overlay-header">
-            <h2>All Conversations</h2>
-            <button class="close-overlay-btn"><i class="fas fa-times"></i></button>
-        </div>
-        <div class="conversation-list-full"></div>
-    `;
-    
-    // Add all conversations
-    const listContainer = content.querySelector('.conversation-list-full');
-    conversationHistory.forEach(conv => {
-        const item = document.createElement('div');
-        item.className = 'conversation-item';
-        item.innerHTML = `
-            <i class="fas fa-comment"></i>
-            <div class="conversation-details">
-                <span class="conversation-title">${conv.title}</span>
-                <span class="message-count">${conv.messages.length} messages</span>
-                <span class="conversation-date">${new Date(conv.id).toLocaleDateString()}</span>
-            </div>
-        `;
-        item.addEventListener('click', () => {
-            loadConversation(conv.id);
-            overlay.remove();
-        });
-        listContainer.appendChild(item);
-    });
-    
-    // Add close button handler
-    overlay.appendChild(content);
-    content.querySelector('.close-overlay-btn').addEventListener('click', () => {
-        overlay.remove();
-    });
-    
-    // Add overlay click handler
-    overlay.addEventListener('click', (e) => {
-        if (e.target === overlay) {
-            overlay.remove();
-        }
-    });
-    
-    document.body.appendChild(overlay);
-}
-
-// Load specific conversation
-function loadConversation(id) {
-    const conversation = conversationHistory.find(conv => conv.id === id);
-    if (conversation) {
-        // Clear current chat
-        while (chatMessages.firstChild) {
-            chatMessages.removeChild(chatMessages.firstChild);
-        }
-        
-        // Load conversation messages
-        conversation.messages.forEach(msg => {
-            addMessage(msg.content, msg.type);
-        });
-        
-        // Close menu
-        handleMenuClose();
-    }
-}
-
-// Handle input changes
-function handleInput(e) {
-    const isEmpty = !e.target.value.trim();
-    sendButton.style.opacity = isEmpty ? '0.5' : '1';
-    sendButton.disabled = isEmpty;
-}
-
-// Handle enter key
-function handleKeyPress(e) {
-    if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        handleSend();
-    }
-}
-
-// Handle send button click
-async function handleSend() {
-    const message = messageInput.value.trim();
-    if (!message) return;
-    
-    // Add user message to chat and conversation history
-    addMessage(message, 'user');
-    if (conversationHistory.length === 0) {
-        handleNewChat();
-    }
-    
-    // Update current conversation
-    const currentConversation = conversationHistory[0];
-    currentConversation.messages.push({ type: 'user', content: message });
-    if (currentConversation.messages.length === 1) {
-        // Update conversation title with first message
-        currentConversation.title = message.slice(0, 30) + (message.length > 30 ? '...' : '');
-        updateConversationList();
-    }
-    saveConversations();
-    
-    messageInput.value = '';
-    handleInput({ target: messageInput });
-    
-    try {
-        // Show typing indicator
-        showTypingIndicator();
-        
-        // Get bot response
-        const response = await fetchBotResponse(message);
-        
-        // Remove typing indicator and add bot message
-        removeTypingIndicator();
-        addMessage(response, 'bot');
-        
-        // Update conversation history
-        currentConversation.messages.push({ type: 'bot', content: response });
-        saveConversations();
-    } catch (error) {
-        console.error('Error:', error);
-        removeTypingIndicator();
-        showError(error.message || 'Failed to get response. Please try again.');
-    }
-}
-
-// Add message to chat
-function addMessage(content, type) {
-    // Create message element
-    const messageDiv = document.createElement('div');
-    messageDiv.className = `message ${type}-message`;
-    
-    // Get current time
-    const now = new Date();
-    const hours = now.getHours().toString().padStart(2, '0');
-    const minutes = now.getMinutes().toString().padStart(2, '0');
-    const timeString = `${hours}:${minutes}`;
-    
-    if (type === 'user') {
-        messageDiv.innerHTML = `
-            <div class="question-bubble">${content}</div>
-            <div class="message-time">${timeString}</div>
-        `;
-    } else {
-        messageDiv.innerHTML = `
-            <div class="answer-container">
-                <div class="bot-icon">
-                    <img src="images/bot-message-logo.png" alt="Muhafiz AI">
-                </div>
-                <div class="answer-content">${formatBotResponse(content)}</div>
-            </div>
-            <div class="message-time">${timeString}</div>
-        `;
-    }
-    
-    // Remove welcome message if present
-    const welcomeMessage = document.querySelector('.welcome-message');
-    if (welcomeMessage) {
-        welcomeMessage.remove();
-    }
-    
-    chatMessages.appendChild(messageDiv);
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-    
-    // Add message to current conversation
-    if (conversationHistory.length === 0) {
-        handleNewChat();
-    }
-    conversationHistory[0].messages.push({ type, content });
-    saveConversations();
-}
-
-// Format bot response with proper styling
-function formatBotResponse(content) {
-    // Split content into sections
-    const sections = content.split('\n\n');
-    
-    let formattedContent = '';
-    let inList = false;
-    
-    sections.forEach(section => {
-        // Handle main headings (e.g., "Types of AI:")
-        if (section.match(/^[A-Z][^:]+:$/)) {
-            if (inList) {
-                formattedContent += '</div>';
-                inList = false;
-            }
-            formattedContent += `<h2 class="response-heading">${section}</h2>`;
-            return;
-        }
-
-        // Handle definitions (text with parentheses)
-        if (section.includes('(') && section.includes(')')) {
-            section = section.replace(/([A-Za-z\s]+)\s*\((.*?)\)/, '<div class="definition"><span class="term">$1</span> <span class="definition-text">($2)</span></div>');
-        }
-
-        // Handle numbered lists
-        if (section.match(/^\d+\./)) {
-            if (!inList) {
-                formattedContent += '<div class="numbered-list">';
-                inList = true;
-            }
-            const [number, ...rest] = section.split('.');
-            const content = rest.join('.').trim();
-            
-            // Check if the list item has a dash/hyphen definition
-            if (content.includes('–')) {
-                const [term, definition] = content.split('–').map(s => s.trim());
-                formattedContent += `
-                    <div class="list-item">
-                        <span class="number">${number}.</span>
-                        <div class="list-content">
-                            <span class="list-term">${term}</span>
-                            <span class="list-definition">– ${definition}</span>
-                        </div>
-                    </div>`;
-            } else {
-                formattedContent += `
-                    <div class="list-item">
-                        <span class="number">${number}.</span>
-                        <div class="list-content">${content}</div>
-                    </div>`;
-            }
-            return;
-        }
-
-        // Close list if we're not processing a list item
-        if (inList) {
-            formattedContent += '</div>';
-            inList = false;
-        }
-
-        // Regular paragraphs
-        formattedContent += `<p class="response-paragraph">${section}</p>`;
-    });
-
-    // Close any open list
-    if (inList) {
-        formattedContent += '</div>';
-    }
-
-    return formattedContent;
-}
-
-// Show typing indicator
-function showTypingIndicator() {
-    const indicator = document.createElement('div');
-    indicator.classList.add('message', 'bot-message', 'typing-indicator');
-    indicator.innerHTML = '<span></span><span></span><span></span>';
-    chatMessages.appendChild(indicator);
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-}
-
-// Remove typing indicator
-function removeTypingIndicator() {
-    const indicator = document.querySelector('.typing-indicator');
-    if (indicator) {
-        indicator.remove();
-    }
-}
-
-// Show error message
-function showError(message) {
-    const errorDiv = document.createElement('div');
-    errorDiv.classList.add('message', 'error-message');
-    errorDiv.textContent = message;
-    chatMessages.appendChild(errorDiv);
-    chatMessages.scrollTop = chatMessages.scrollHeight;
-    
-    // Remove error after 5 seconds
-    setTimeout(() => {
-        errorDiv.remove();
-    }, 5000);
-}
-
-// Fetch bot response from OpenRouter API
-async function fetchBotResponse(userMessage) {
-    try {
-        // Check for API key
-        const apiKey = chatConfig.apiKey || localStorage.getItem('openRouterApiKey');
-        if (!apiKey) {
-            throw new Error('Please set up your API key in the admin panel');
-        }
-
-        // Format messages for the API
-        const messages = [
-            {
-                role: 'system',
-                content: `You are Muhafiz AI, a digital safety assistant by the Mohsin Kamil Foundation. Your role is strictly limited to:
-1. Combating cyber threats
-2. Providing emotional support for cybercrime victims
-3. Guiding users through digital safety solutions
-4. Handling cybersecurity incidents
-5. Addressing online harassment and blackmail
-6. Assisting with content removal and legal reporting
-
-IMPORTANT: You must NEVER respond to questions outside these areas. For any off-topic questions (e.g., general AI, weather, news, etc.), respond with:
-"I am Muhafiz AI, focused exclusively on digital safety and cybersecurity. I cannot assist with questions about [topic]. However, I'm here to help if you need support with:
-- Cybersecurity incidents
-- Online harassment or blackmail
-- Account hacking
-- Content removal
-- Digital safety guidance
-- Reporting cybercrimes
-
-Would you like assistance with any of these issues?"
-
-Response Framework:
-1. Emotional Check-In:
-   - Start with empathy: "This sounds incredibly stressful. How are you feeling right now?"
-   - Reassure: "We'll tackle this together—you're not alone."
-
-2. URL Safety Analysis:
-   - If a user shares a suspicious link:
-     - "Let's check this link safely. First check the Link looking formating feel Safe or Not. Avoid clicking it. Use tools like Google Safe Browsing or VirusTotal to scan it."
-     - "If you've already clicked it, change your passwords immediately and enable 2FA."
-
-3. Tech Support for Hacking:
-   - Account Security:
-     - "Let's secure your account: 1) Change passwords, 2) Enable 2FA, 3) Check login activity."
-   - Phishing Guidance:
-     - "Never share OTPs or passwords. Legitimate organizations won't ask for these."
-   - Breach Response:
-     - "Check if your data was leaked at Have I Been Pwned?"
-
-4. Legal & Content Removal:
-   - "Under Pakistan's PECA 2016, blackmail is punishable. Report to FIA Cyber Crime or call 1991."
-   - "To remove content from platforms:
-     - Google: Content Removal Request
-     - Meta (FB/IG): Reporting Tool"
-
-5. Founder's Role:
-   - "Abdullah Tarar, our founder, is a Certified Ethical Hacker. He's helped many in your situation—no judgment, only solutions. Chat directly: WhatsApp or call 0342-4844392."
-
-Always end responses with:
-- "What else can I do to help you feel safer?"
-- "You're in control. Let's take the next step."`
-            }
-        ];
-        
-        // Add conversation history if available
-        if (conversationHistory.length > 0) {
-            const currentConversation = conversationHistory[0];
-            if (currentConversation.messages) {
-                // Get all messages from the current conversation for context
-                currentConversation.messages.forEach(msg => {
-                    messages.push({
-                        role: msg.type === 'user' ? 'user' : 'assistant',
-                        content: msg.content
-                    });
-                });
-            }
-        }
-        
-        // Add the new message
-        messages.push({
-            role: 'user',
-            content: userMessage
-        });
-
-        console.log('Sending request to OpenRouter with context:', {
-            model: chatConfig.model,
-            messageCount: messages.length,
-            apiKeySet: !!apiKey
-        });
-
-        const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
-            method: 'POST',
-            headers: {
-                'Authorization': `Bearer ${apiKey}`,
-                'HTTP-Referer': chatConfig.siteUrl,
-                'X-Title': chatConfig.siteName,
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                model: chatConfig.model || DEFAULT_MODEL,
-                messages: messages,
-                temperature: 0.7,
-                max_tokens: 2000
-            })
-        });
-
-        const data = await response.json();
-
-        if (!response.ok) {
-            console.error('OpenRouter API Error:', data);
-            throw new Error(data.error?.message || `HTTP error! status: ${response.status}`);
-        }
-
-        console.log('OpenRouter API Response:', data);
-        
-        if (!data.choices?.[0]?.message?.content) {
-            throw new Error('Invalid response format from API');
-        }
-
-        return data.choices[0].message.content;
-
-    } catch (error) {
-        console.error('API Error:', error);
-        throw new Error(`Failed to get response: ${error.message}`);
-    }
-}
-
-// Handle more options
-function handleMore() {
-    // Implement more options menu
-    console.log('More options clicked');
-}
-
-// Handle menu open
-function handleMenuOpen() {
-    menuOverlay.classList.add('active');
-    document.body.style.overflow = 'hidden';
-}
-
-// Handle menu close
-function handleMenuClose() {
-    menuOverlay.classList.remove('active');
-    document.body.style.overflow = '';
-}
-
-// Update time in status bar
-function updateTime() {
-    const timeElement = document.querySelector('.time');
-    const now = new Date();
-    const hours = now.getHours().toString().padStart(2, '0');
-    const minutes = now.getMinutes().toString().padStart(2, '0');
-    timeElement.textContent = `${hours}:${minutes}`;
-}
-
-// Load chat configuration
-function loadChatConfig() {
-    // Try to load API key from localStorage if no default is set
-    if (!DEFAULT_API_KEY) {
-        const storedApiKey = localStorage.getItem('openRouterApiKey');
-        if (storedApiKey) {
-            chatConfig.apiKey = storedApiKey;
-        }
-    }
-
-    // Load model from localStorage or use default
-    chatConfig.model = localStorage.getItem('selectedModel') || DEFAULT_MODEL;
-    
-    // Log configuration (without API key)
-    console.log('Chat Configuration:', {
-        ...chatConfig,
-        apiKey: chatConfig.apiKey ? '[SET]' : '[NOT SET]',
-        model: chatConfig.model
-    });
-}
-
-// Load theme from localStorage
-function loadTheme() {
-    const savedTheme = localStorage.getItem('theme') || 'light';
-    document.documentElement.setAttribute('data-theme', savedTheme);
-    updateThemeIcon(savedTheme);
-}
-
-// Handle theme toggle
-function handleThemeToggle() {
-    const currentTheme = document.documentElement.getAttribute('data-theme');
-    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-    
-    document.documentElement.setAttribute('data-theme', newTheme);
-    localStorage.setItem('theme', newTheme);
-    updateThemeIcon(newTheme);
-}
-
-// Update theme toggle icon
-function updateThemeIcon(theme) {
-    const icon = themeToggleBtn.querySelector('i');
-    if (theme === 'dark') {
-        icon.className = 'fas fa-sun';
-        themeToggleBtn.title = 'Switch to light mode';
-    } else {
-        icon.className = 'fas fa-moon';
-        themeToggleBtn.title = 'Switch to dark mode';
-    }
-}
-
-// Initialize chat when DOM is loaded
+// Chat Configuration
+const DEFAULT_API_KEY = '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';
+const DEFAULT_MODEL = 'deepseek/deepseek-chat-v3-0324:free';
+
+let chatConfig = {
+    apiKey: DEFAULT_API_KEY,
+    model: DEFAULT_MODEL,
+    siteUrl: window.location.origin,
+    siteName: 'Muhafiz AI Chat'
+};
+
+// Conversation history
+let conversationHistory = [];
+
+// DOM Elements
+const messageInput = document.getElementById('message-input');
+const sendButton = document.getElementById('send-btn');
+const chatMessages = document.getElementById('chat-messages');
+const moreButton = document.querySelector('.more-btn');
+const newChatButton = document.getElementById('new-chat-btn');
+const menuButton = document.querySelector('.menu-btn');
+const menuOverlay = document.getElementById('menuOverlay');
+const closeMenuButton = document.getElementById('closeMenuBtn');
+const conversationList = document.getElementById('conversationList');
+const seeMoreBtn = document.getElementById('seeMoreBtn');
+const themeToggleBtn = document.getElementById('themeToggleBtn');
+
+// Initialize chat
+function initChat() {
+    // Load saved configuration and conversations
+    loadChatConfig();
+    loadConversations();
+    loadTheme();
+    
+    // Add event listeners
+    messageInput.addEventListener('input', handleInput);
+    messageInput.addEventListener('keypress', handleKeyPress);
+    sendButton.addEventListener('click', handleSend);
+    moreButton.addEventListener('click', handleMore);
+    newChatButton.addEventListener('click', handleNewChat);
+    menuButton.addEventListener('click', handleMenuOpen);
+    closeMenuButton.addEventListener('click', handleMenuClose);
+    seeMoreBtn.addEventListener('click', handleSeeMore);
+    themeToggleBtn.addEventListener('click', handleThemeToggle);
+    menuOverlay.addEventListener('click', (e) => {
+        if (e.target === menuOverlay) {
+            handleMenuClose();
+        }
+    });
+    
+    // Disable send button initially
+    sendButton.disabled = true;
+    sendButton.style.opacity = '0.5';
+    
+    // Update status bar time
+    updateTime();
+    setInterval(updateTime, 60000);
+}
+
+// Load conversations from localStorage
+function loadConversations() {
+    const savedConversations = localStorage.getItem('conversations');
+    if (savedConversations) {
+        conversationHistory = JSON.parse(savedConversations);
+        
+        // If there are saved conversations, update the chat interface
+        if (conversationHistory.length > 0) {
+            const currentConversation = conversationHistory[0];
+            if (currentConversation.messages.length > 0) {
+                // Clear welcome message
+                while (chatMessages.firstChild) {
+                    chatMessages.removeChild(chatMessages.firstChild);
+                }
+                
+                // Load messages from the current conversation
+                currentConversation.messages.forEach(msg => {
+                    addMessage(msg.content, msg.type);
+                });
+            }
+        }
+    }
+    updateConversationList();
+}
+
+// Save conversations to localStorage
+function saveConversations() {
+    localStorage.setItem('conversations', JSON.stringify(conversationHistory));
+}
+
+// Update conversation list in menu
+function updateConversationList() {
+    conversationList.innerHTML = '';
+    const recentConversations = conversationHistory.slice(0, 4);
+    
+    if (recentConversations.length === 0) {
+        const emptyState = document.createElement('div');
+        emptyState.className = 'empty-conversations';
+        emptyState.textContent = 'No conversations yet';
+        conversationList.appendChild(emptyState);
+        return;
+    }
+    
+    recentConversations.forEach(conv => {
+        const item = document.createElement('div');
+        item.className = 'conversation-item';
+        item.innerHTML = `
+            <i class="fas fa-comment"></i>
+            <span>${conv.title}</span>
+            <span class="message-count">${conv.messages.length} messages</span>
+        `;
+        item.addEventListener('click', () => loadConversation(conv.id));
+        conversationList.appendChild(item);
+    });
+}
+
+// Handle new chat
+async function handleNewChat() {
+    // If there's an existing conversation, generate a title for it
+    if (conversationHistory.length > 0 && conversationHistory[0].messages.length > 0) {
+        const currentConversation = conversationHistory[0];
+        try {
+            const messages = currentConversation.messages.map(msg => `${msg.type}: ${msg.content}`).join('\n');
+            const titlePrompt = `Please summarize this conversation in 4-5 words:\n${messages}`;
+            
+            // Show loading state for the conversation title
+            const tempTitle = 'Generating title...';
+            currentConversation.title = tempTitle;
+            updateConversationList();
+            
+            // Get AI-generated title
+            const response = await fetchBotResponse(titlePrompt);
+            currentConversation.title = response.slice(0, 40).trim();
+            saveConversations();
+            updateConversationList();
+        } catch (error) {
+            console.error('Error generating title:', error);
+            // Fallback to first message if title generation fails
+            currentConversation.title = currentConversation.messages[0].content.slice(0, 30) + '...';
+            saveConversations();
+            updateConversationList();
+        }
+    }
+    
+    // Create new conversation
+    const newConversation = {
+        id: Date.now(),
+        title: 'New Chat',
+        messages: []
+    };
+    
+    // Add to conversations array
+    conversationHistory.unshift(newConversation);
+    saveConversations();
+    updateConversationList();
+    
+    // Clear chat messages
+    while (chatMessages.firstChild) {
+        chatMessages.removeChild(chatMessages.firstChild);
+    }
+    
+    // Add welcome message
+    const welcomeMessage = document.createElement('div');
+    welcomeMessage.className = 'welcome-message';
+    welcomeMessage.innerHTML = `
+        <img src="images/welcome-logo.png" alt="Muhafiz AI Logo" class="welcome-logo">
+        <h2>Hi, I'm Muhafiz AI.</h2>
+        <p>Your digital safety assistant dedicated to combating cyber threats and providing support.</p>
+        <div class="context-info">Ask me about cyber security, online protection, or digital safety concerns.</div>
+    `;
+    chatMessages.appendChild(welcomeMessage);
+    
+    // Clear input
+    messageInput.value = '';
+    handleInput({ target: messageInput });
+    
+    // Focus input
+    messageInput.focus();
+}
+
+// Handle see more button click
+function handleSeeMore() {
+    // Create full conversation list overlay
+    const overlay = document.createElement('div');
+    overlay.className = 'conversation-overlay';
+    
+    const content = document.createElement('div');
+    content.className = 'conversation-overlay-content';
+    
+    // Add header
+    content.innerHTML = `
+        <div class="overlay-header">
+            <h2>All Conversations</h2>
+            <button class="close-overlay-btn"><i class="fas fa-times"></i></button>
+        </div>
+        <div class="conversation-list-full"></div>
+    `;
+    
+    // Add all conversations
+    const listContainer = content.querySelector('.conversation-list-full');
+    conversationHistory.forEach(conv => {
+        const item = document.createElement('div');
+        item.className = 'conversation-item';
+        item.innerHTML = `
+            <i class="fas fa-comment"></i>
+            <div class="conversation-details">
+                <span class="conversation-title">${conv.title}</span>
+                <span class="message-count">${conv.messages.length} messages</span>
+                <span class="conversation-date">${new Date(conv.id).toLocaleDateString()}</span>
+            </div>
+        `;
+        item.addEventListener('click', () => {
+            loadConversation(conv.id);
+            overlay.remove();
+        });
+        listContainer.appendChild(item);
+    });
+    
+    // Add close button handler
+    overlay.appendChild(content);
+    content.querySelector('.close-overlay-btn').addEventListener('click', () => {
+        overlay.remove();
+    });
+    
+    // Add overlay click handler
+    overlay.addEventListener('click', (e) => {
+        if (e.target === overlay) {
+            overlay.remove();
+        }
+    });
+    
+    document.body.appendChild(overlay);
+}
+
+// Load specific conversation
+function loadConversation(id) {
+    const conversation = conversationHistory.find(conv => conv.id === id);
+    if (conversation) {
+        // Clear current chat
+        while (chatMessages.firstChild) {
+            chatMessages.removeChild(chatMessages.firstChild);
+        }
+        
+        // Load conversation messages
+        conversation.messages.forEach(msg => {
+            addMessage(msg.content, msg.type);
+        });
+        
+        // Close menu
+        handleMenuClose();
+    }
+}
+
+// Handle input changes
+function handleInput(e) {
+    const isEmpty = !e.target.value.trim();
+    sendButton.style.opacity = isEmpty ? '0.5' : '1';
+    sendButton.disabled = isEmpty;
+}
+
+// Handle enter key
+function handleKeyPress(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+    }
+}
+
+// Handle send button click
+async function handleSend() {
+    const message = messageInput.value.trim();
+    if (!message) return;
+    
+    // Add user message to chat and conversation history
+    addMessage(message, 'user');
+    if (conversationHistory.length === 0) {
+        handleNewChat();
+    }
+    
+    // Update current conversation
+    const currentConversation = conversationHistory[0];
+    currentConversation.messages.push({ type: 'user', content: message });
+    if (currentConversation.messages.length === 1) {
+        // Update conversation title with first message
+        currentConversation.title = message.slice(0, 30) + (message.length > 30 ? '...' : '');
+        updateConversationList();
+    }
+    saveConversations();
+    
+    messageInput.value = '';
+    handleInput({ target: messageInput });
+    
+    try {
+        // Show typing indicator
+        showTypingIndicator();
+        
+        // Get bot response
+        const response = await fetchBotResponse(message);
+        
+        // Remove typing indicator and add bot message
+        removeTypingIndicator();
+        addMessage(response, 'bot');
+        
+        // Update conversation history
+        currentConversation.messages.push({ type: 'bot', content: response });
+        saveConversations();
+    } catch (error) {
+        console.error('Error:', error);
+        removeTypingIndicator();
+        showError(error.message || 'Failed to get response. Please try again.');
+    }
+}
+
+// Add message to chat
+function addMessage(content, type) {
+    // Create message element
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${type}-message`;
+    
+    // Get current time
+    const now = new Date();
+    const hours = now.getHours().toString().padStart(2, '0');
+    const minutes = now.getMinutes().toString().padStart(2, '0');
+    const timeString = `${hours}:${minutes}`;
+    
+    if (type === 'user') {
+        messageDiv.innerHTML = `
+            <div class="question-bubble">${content}</div>
+            <div class="message-time">${timeString}</div>
+        `;
+    } else {
+        messageDiv.innerHTML = `
+            <div class="answer-container">
+                <div class="bot-icon">
+                    <img src="images/bot-message-logo.png" alt="Muhafiz AI">
+                </div>
+                <div class="answer-content">${formatBotResponse(content)}</div>
+            </div>
+            <div class="message-time">${timeString}</div>
+        `;
+    }
+    
+    // Remove welcome message if present
+    const welcomeMessage = document.querySelector('.welcome-message');
+    if (welcomeMessage) {
+        welcomeMessage.remove();
+    }
+    
+    chatMessages.appendChild(messageDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+    
+    // Add message to current conversation
+    if (conversationHistory.length === 0) {
+        handleNewChat();
+    }
+    conversationHistory[0].messages.push({ type, content });
+    saveConversations();
+}
+
+// Format bot response with proper styling
+function formatBotResponse(content) {
+    // Split content into sections
+    const sections = content.split('\n\n');
+    
+    let formattedContent = '';
+    let inList = false;
+    
+    sections.forEach(section => {
+        // Handle main headings (e.g., "Types of AI:")
+        if (section.match(/^[A-Z][^:]+:$/)) {
+            if (inList) {
+                formattedContent += '</div>';
+                inList = false;
+            }
+            formattedContent += `<h2 class="response-heading">${section}</h2>`;
+            return;
+        }
+
+        // Handle definitions (text with parentheses)
+        if (section.includes('(') && section.includes(')')) {
+            section = section.replace(/([A-Za-z\s]+)\s*\((.*?)\)/, '<div class="definition"><span class="term">$1</span> <span class="definition-text">($2)</span></div>');
+        }
+
+        // Handle numbered lists
+        if (section.match(/^\d+\./)) {
+            if (!inList) {
+                formattedContent += '<div class="numbered-list">';
+                inList = true;
+            }
+            const [number, ...rest] = section.split('.');
+            const content = rest.join('.').trim();
+            
+            // Check if the list item has a dash/hyphen definition
+            if (content.includes('–')) {
+                const [term, definition] = content.split('–').map(s => s.trim());
+                formattedContent += `
+                    <div class="list-item">
+                        <span class="number">${number}.</span>
+                        <div class="list-content">
+                            <span class="list-term">${term}</span>
+                            <span class="list-definition">– ${definition}</span>
+                        </div>
+                    </div>`;
+            } else {
+                formattedContent += `
+                    <div class="list-item">
+                        <span class="number">${number}.</span>
+                        <div class="list-content">${content}</div>
+                    </div>`;
+            }
+            return;
+        }
+
+        // Close list if we're not processing a list item
+        if (inList) {
+            formattedContent += '</div>';
+            inList = false;
+        }
+
+        // Regular paragraphs
+        formattedContent += `<p class="response-paragraph">${section}</p>`;
+    });
+
+    // Close any open list
+    if (inList) {
+        formattedContent += '</div>';
+    }
+
+    return formattedContent;
+}
+
+// Show typing indicator
+function showTypingIndicator() {
+    const indicator = document.createElement('div');
+    indicator.classList.add('message', 'bot-message', 'typing-indicator');
+    indicator.innerHTML = '<span></span><span></span><span></span>';
+    chatMessages.appendChild(indicator);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+// Remove typing indicator
+function removeTypingIndicator() {
+    const indicator = document.querySelector('.typing-indicator');
+    if (indicator) {
+        indicator.remove();
+    }
+}
+
+// Show error message
+function showError(message) {
+    const errorDiv = document.createElement('div');
+    errorDiv.classList.add('message', 'error-message');
+    errorDiv.textContent = message;
+    chatMessages.appendChild(errorDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+    
+    // Remove error after 5 seconds
+    setTimeout(() => {
+        errorDiv.remove();
+    }, 5000);
+}
+
+// Fetch bot response from OpenRouter API
+async function fetchBotResponse(userMessage) {
+    try {
+        // Check for API key
+        const apiKey = chatConfig.apiKey || localStorage.getItem('openRouterApiKey');
+        if (!apiKey) {
+            throw new Error('Please set up your API key in the admin panel');
+        }
+
+        // Format messages for the API
+        const messages = [
+            {
+                role: 'system',
+                content: `You are Muhafiz AI, a digital safety assistant by the Mohsin Kamil Foundation. Your role is strictly limited to:
+1. Combating cyber threats
+2. Providing emotional support for cybercrime victims
+3. Guiding users through digital safety solutions
+4. Handling cybersecurity incidents
+5. Addressing online harassment and blackmail
+6. Assisting with content removal and legal reporting
+
+IMPORTANT: You must NEVER respond to questions outside these areas. For any off-topic questions (e.g., general AI, weather, news, etc.), respond with:
+"I am Muhafiz AI, focused exclusively on digital safety and cybersecurity. I cannot assist with questions about [topic]. However, I'm here to help if you need support with:
+- Cybersecurity incidents
+- Online harassment or blackmail
+- Account hacking
+- Content removal
+- Digital safety guidance
+- Reporting cybercrimes
+
+Would you like assistance with any of these issues?"
+
+Response Framework:
+1. Emotional Check-In:
+   - Start with empathy: "This sounds incredibly stressful. How are you feeling right now?"
+   - Reassure: "We'll tackle this together—you're not alone."
+
+2. URL Safety Analysis:
+   - If a user shares a suspicious link:
+     - "Let's check this link safely. First check the Link looking formating feel Safe or Not. Avoid clicking it. Use tools like Google Safe Browsing or VirusTotal to scan it."
+     - "If you've already clicked it, change your passwords immediately and enable 2FA."
+
+3. Tech Support for Hacking:
+   - Account Security:
+     - "Let's secure your account: 1) Change passwords, 2) Enable 2FA, 3) Check login activity."
+   - Phishing Guidance:
+     - "Never share OTPs or passwords. Legitimate organizations won't ask for these."
+   - Breach Response:
+     - "Check if your data was leaked at Have I Been Pwned?"
+
+4. Legal & Content Removal:
+   - "Under Pakistan's PECA 2016, blackmail is punishable. Report to FIA Cyber Crime or call 1991."
+   - "To remove content from platforms:
+     - Google: Content Removal Request
+     - Meta (FB/IG): Reporting Tool"
+
+5. Founder's Role:
+   - "Abdullah Tarar, our founder, is a Certified Ethical Hacker. He's helped many in your situation—no judgment, only solutions. Chat directly: WhatsApp or call 0342-4844392."
+
+Always end responses with:
+- "What else can I do to help you feel safer?"
+- "You're in control. Let's take the next step."`
+            }
+        ];
+        
+        // Add conversation history if available
+        if (conversationHistory.length > 0) {
+            const currentConversation = conversationHistory[0];
+            if (currentConversation.messages) {
+                // Get all messages from the current conversation for context
+                currentConversation.messages.forEach(msg => {
+                    messages.push({
+                        role: msg.type === 'user' ? 'user' : 'assistant',
+                        content: msg.content
+                    });
+                });
+            }
+        }
+        
+        // Add the new message
+        messages.push({
+            role: 'user',
+            content: userMessage
+        });
+
+        console.log('Sending request to OpenRouter with context:', {
+            model: chatConfig.model,
+            messageCount: messages.length,
+            apiKeySet: !!apiKey
+        });
+
+        const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${apiKey}`,
+                'HTTP-Referer': chatConfig.siteUrl,
+                'X-Title': chatConfig.siteName,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                model: chatConfig.model || DEFAULT_MODEL,
+                messages: messages,
+                temperature: 0.7,
+                max_tokens: 2000
+            })
+        });
+
+        const data = await response.json();
+
+        if (!response.ok) {
+            console.error('OpenRouter API Error:', data);
+            throw new Error(data.error?.message || `HTTP error! status: ${response.status}`);
+        }
+
+        console.log('OpenRouter API Response:', data);
+        
+        if (!data.choices?.[0]?.message?.content) {
+            throw new Error('Invalid response format from API');
+        }
+
+        return data.choices[0].message.content;
+
+    } catch (error) {
+        console.error('API Error:', error);
+        throw new Error(`Failed to get response: ${error.message}`);
+    }
+}
+
+// Handle more options
+function handleMore() {
+    // Implement more options menu
+    console.log('More options clicked');
+}
+
+// Handle menu open
+function handleMenuOpen() {
+    menuOverlay.classList.add('active');
+    document.body.style.overflow = 'hidden';
+}
+
+// Handle menu close
+function handleMenuClose() {
+    menuOverlay.classList.remove('active');
+    document.body.style.overflow = '';
+}
+
+// Update time in status bar
+function updateTime() {
+    const timeElement = document.querySelector('.time');
+    const now = new Date();
+    const hours = now.getHours().toString().padStart(2, '0');
+    const minutes = now.getMinutes().toString().padStart(2, '0');
+    timeElement.textContent = `${hours}:${minutes}`;
+}
+
+// Load chat configuration
+function loadChatConfig() {
+    // Try to load API key from localStorage if no default is set
+    if (!DEFAULT_API_KEY) {
+        const storedApiKey = localStorage.getItem('openRouterApiKey');
+        if (storedApiKey) {
+            chatConfig.apiKey = storedApiKey;
+        }
+    }
+
+    // Load model from localStorage or use default
+    chatConfig.model = localStorage.getItem('selectedModel') || DEFAULT_MODEL;
+    
+    // Log configuration (without API key)
+    console.log('Chat Configuration:', {
+        ...chatConfig,
+        apiKey: chatConfig.apiKey ? '[SET]' : '[NOT SET]',
+        model: chatConfig.model
+    });
+}
+
+// Load theme from localStorage
+function loadTheme() {
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    document.documentElement.setAttribute('data-theme', savedTheme);
+    updateThemeIcon(savedTheme);
+}
+
+// Handle theme toggle
+function handleThemeToggle() {
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    
+    document.documentElement.setAttribute('data-theme', newTheme);
+    localStorage.setItem('theme', newTheme);
+    updateThemeIcon(newTheme);
+}
+
+// Update theme toggle icon
+function updateThemeIcon(theme) {
+    const icon = themeToggleBtn.querySelector('i');
+    if (theme === 'dark') {
+        icon.className = 'fas fa-sun';
+        themeToggleBtn.title = 'Switch to light mode';
+    } else {
+        icon.className = 'fas fa-moon';
+        themeToggleBtn.title = 'Switch to dark mode';
+    }
+}
+
+// Initialize chat when DOM is loaded
 document.addEventListener('DOMContentLoaded', initChat);