update main.py

main.py

@@ -31,7 +31,7 @@ import re
 import anyio
 
 # Setup logging
-logging.basicConfig(level=logging.DEBUG)  # غيّرنا لـ DEBUG عشان نعرف نتبع كل حاجة
+logging.basicConfig(level=logging.DEBUG)
 logger = logging.getLogger(__name__)
 logger.info("Starting application...")
 logger.debug("Files in current directory: %s", os.listdir(os.getcwd()))
@@ -73,7 +73,7 @@ async def setup_mongo_index():
         logger.error(f"Failed to create MongoDB index: {e}")
 
 # Jinja2 setup
-os.makedirs("templates", exist_ok=True)  # تأكد إن مجلد templates موجود
+os.makedirs("templates", exist_ok=True)
 templates = Jinja2Templates(directory="templates")
 templates.env.filters['markdown'] = lambda text: markdown2.markdown(text)
 
@@ -117,28 +117,32 @@ app.add_middleware(
     allow_origins=[
         "https://mgzon-mgzon-app.hf.space",
         "http://localhost:7860",
-        "http://localhost:8000",  # أضفنا ده للتستيج المحلي
+        "http://localhost:8000",
         "https://mgzon-mgzon-app.hf.space/auth/google/callback",
         "https://mgzon-mgzon-app.hf.space/auth/github/callback",
     ],
     allow_credentials=True,
     allow_methods=["GET", "POST", "OPTIONS", "PUT", "DELETE"],
-    allow_headers=["Accept", "Content-Type", "Authorization", "X-Requested-With"],
+    allow_headers=["Accept", "Content-Type", "Authorization", "X-Requested-With", "X-Session-ID"],
 )
 logger.debug("CORS middleware configured with allowed origins")
 
 # Include routers
 app.include_router(api_router)
-get_auth_router(app)  # Add OAuth and auth routers
+get_auth_router(app)
 logger.debug("API and auth routers included")
 
 # Add logout endpoint
 @app.get("/logout")
 async def logout(request: Request):
     logger.info("User logout requested")
+    session_data = request.session.copy()
     request.session.clear()
+    logger.debug(f"Cleared session data: {session_data}")
     response = RedirectResponse("/login")
     response.delete_cookie("access_token")
+    response.delete_cookie("session")
+    logger.debug("Session and access_token cookies deleted")
     return response
 
 # Debug routes endpoint
@@ -200,7 +204,11 @@ async def handle_oauth_error(request: Request, exc: GetIdEmailError):
 @app.get("/", response_class=HTMLResponse)
 async def root(request: Request, user: User = Depends(current_active_user)):
     logger.debug(f"Root endpoint accessed by user: {user.email if user else 'Anonymous'}")
-    return templates.TemplateResponse("index.html", {"request": request, "user": user})
+    return templates.TemplateResponse("index.html", {
+        "request": request,
+        "user": user,
+        "is_authenticated": user is not None
+    })
 
 # Google verification
 @app.get("/google97468ef1f6b6e804.html", response_class=PlainTextResponse)

static/js/chat.js

@@ -33,51 +33,24 @@ const uiElements = {
   settingsModal: document.getElementById('settingsModal'),
   closeSettingsBtn: document.getElementById('closeSettingsBtn'),
   settingsForm: document.getElementById('settingsForm'),
-  historyToggle: document.getElementById('historyToggle')
-};
-
-// Track state
-let streamMsg = null;
-let conversationHistory = JSON.parse(sessionStorage.getItem('conversationHistory') || '[]');
-let currentAssistantText = '';
-let isRequestActive = false;
-let abortController = null;
-let mediaRecorder = null;
-let audioChunks = [];
-let isRecording = false;
-let currentConversationId = window.conversationId || null;
-let currentConversationTitle = window.conversationTitle || null;
-let isSidebarOpen = false;
-
-// Auto-resize textarea
-function autoResizeTextarea() {
-  if (uiElements.input) {
-    uiElements.input.style.height = 'auto';
-    uiElements.input.style.height = `${Math.min(uiElements.input.scrollHeight, 200)}px`;
-  }
-}
-
-// Detect Arabic text
-function isArabicText(text) {
-  return /[\u0600-\u06FF]/.test(text);
-}
-
-// Initialize page
-document.addEventListener('DOMContentLoaded', async () => {
-  AOS.init({
+  historyToggle: document.getElementBy AOS.init({
     duration: 800,
     easing: 'ease-out-cubic',
     once: true,
     offset: 50,
   });
   if (currentConversationId && checkAuth()) {
+    console.log('Loading conversation with ID:', currentConversationId);
     await loadConversation(currentConversationId);
   } else if (conversationHistory.length > 0) {
+    console.log('Restoring conversation history from sessionStorage:', conversationHistory);
     enterChatView();
-    conversationHistory.forEach(msg => addMsg(msg.role, msg.content));
-  }
-  if (checkAuth()) {
-    await loadConversations();
+    conversationHistory.forEach(msg => {
+      console.log('Adding message from history:', msg);
+      addMsg(msg.role, msg.content);
+    });
+  } else {
+    console.log('No conversation history or ID, starting fresh');
   }
   autoResizeTextarea();
   updateSendButtonState();
@@ -91,7 +64,22 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 // Check authentication token
 function checkAuth() {
-  return localStorage.getItem('token');
+  const token = localStorage.getItem('token');
+  console.log('Auth token:', token ? 'Found' : 'Not found');
+  return token;
+}
+
+// Handle session for non-logged-in users
+async function handleSession() {
+  const sessionId = sessionStorage.getItem('session_id');
+  if (!sessionId) {
+    const newSessionId = crypto.randomUUID();
+    sessionStorage.setItem('session_id', newSessionId);
+    console.log('New session_id created:', newSessionId);
+    return newSessionId;
+  }
+  console.log('Existing session_id:', sessionId);
+  return sessionId;
 }
 
 // Update send button state
@@ -156,11 +144,15 @@ function addMsg(who, text) {
   const div = document.createElement('div');
   div.className = `bubble ${who === 'user' ? 'bubble-user' : 'bubble-assist'} ${isArabicText(text) ? 'rtl' : ''}`;
   div.dataset.text = text;
+  console.log('Adding message:', { who, text });
   renderMarkdown(div);
   if (uiElements.chatBox) {
     uiElements.chatBox.appendChild(div);
     uiElements.chatBox.classList.remove('hidden');
     uiElements.chatBox.scrollTop = uiElements.chatBox.scrollHeight;
+    console.log('Message added to chatBox:', div);
+  } else {
+    console.error('chatBox is null');
   }
   return div;
 }
@@ -226,14 +218,22 @@ function previewFile() {
 
 // Voice recording
 function startVoiceRecording() {
-  if (isRequestActive || isRecording) return;
+  if (isRequestActive || isRecording) {
+    console.log('Voice recording blocked: Request active or already recording');
+    return;
+  }
+  console.log('Starting voice recording...');
   isRecording = true;
   if (uiElements.sendBtn) uiElements.sendBtn.classList.add('recording');
   navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
     mediaRecorder = new MediaRecorder(stream);
     audioChunks = [];
     mediaRecorder.start();
-    mediaRecorder.addEventListener('dataavailable', event => audioChunks.push(event.data));
+    console.log('MediaRecorder started');
+    mediaRecorder.addEventListener('dataavailable', event => {
+      audioChunks.push(event.data);
+      console.log('Audio chunk received:', event.data);
+    });
   }).catch(err => {
     console.error('Error accessing microphone:', err);
     alert('Failed to access microphone. Please check permissions.');
@@ -248,6 +248,7 @@ function stopVoiceRecording() {
     if (uiElements.sendBtn) uiElements.sendBtn.classList.remove('recording');
     isRecording = false;
     mediaRecorder.addEventListener('stop', async () => {
+      console.log('Stopping voice recording, sending audio...');
       const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
       const formData = new FormData();
       formData.append('file', audioBlob, 'voice-message.webm');
@@ -306,6 +307,8 @@ async function submitAudioMessage(formData) {
 async function sendRequest(endpoint, body, headers = {}) {
   const token = checkAuth();
   if (token) headers['Authorization'] = `Bearer ${token}`;
+  headers['X-Session-ID'] = await handleSession();
+  console.log('Sending request to:', endpoint, 'with headers:', headers);
   try {
     const response = await fetch(endpoint, {
       method: 'POST',
@@ -330,9 +333,7 @@ async function sendRequest(endpoint, body, headers = {}) {
     }
     return response;
   } catch (error) {
-    if (error.name === 'AbortError') {
-      throw new Error('Request was aborted');
-    }
+    console.error('Send request error:', error);
     throw error;
   }
 }
@@ -362,6 +363,11 @@ function handleRequestError(error) {
   if (streamMsg) {
     streamMsg.querySelector('.loading')?.remove();
     streamMsg.dataset.text = `Error: ${error.message || 'An error occurred during the request.'}`;
+    const retryBtn = document.createElement('button');
+    retryBtn.innerText = 'Retry';
+    retryBtn.className = 'retry-btn text-sm text-blue-400 hover:text-blue-600';
+    retryBtn.onclick = () => submitMessage();
+    streamMsg.appendChild(retryBtn);
     renderMarkdown(streamMsg);
     streamMsg.dataset.done = '1';
     streamMsg = null;
@@ -372,6 +378,7 @@ function handleRequestError(error) {
   abortController = null;
   if (uiElements.sendBtn) uiElements.sendBtn.style.display = 'inline-flex';
   if (uiElements.stopBtn) uiElements.stopBtn.style.display = 'none';
+  sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
 }
 
 // Load conversations for sidebar
@@ -627,6 +634,11 @@ async function submitMessage() {
   let outputFormat = 'text';
   let title = null;
 
+  if (!message && !uiElements.fileInput?.files.length && !uiElements.audioInput?.files.length) {
+    console.log('No message, file, or audio to send');
+    return;
+  }
+
   if (uiElements.fileInput?.files.length > 0) {
     const file = uiElements.fileInput.files[0];
     if (file.type.startsWith('image/')) {
@@ -660,8 +672,6 @@ async function submitMessage() {
       title: title
     };
     headers['Content-Type'] = 'application/json';
-  } else {
-    return;
   }
 
   enterChatView();
@@ -796,6 +806,31 @@ function stopStream(forceCancel = false) {
   if (uiElements.stopBtn) uiElements.stopBtn.style.pointerEvents = 'auto';
 }
 
+// Logout handler
+const logoutBtn = document.getElementById('logoutBtn');
+if (logoutBtn) {
+  logoutBtn.addEventListener('click', async () => {
+    console.log('Logout button clicked');
+    try {
+      const response = await fetch('/logout', {
+        method: 'GET',
+        credentials: 'include'
+      });
+      if (response.ok) {
+        localStorage.removeItem('token');
+        console.log('Token removed from localStorage');
+        window.location.href = '/login';
+      } else {
+        console.error('Logout failed:', response.status);
+        alert('Failed to log out. Please try again.');
+      }
+    } catch (error) {
+      console.error('Logout error:', error);
+      alert('Error during logout: ' + error.message);
+    }
+  });
+}
+
 // Settings Modal
 if (uiElements.settingsBtn) {
   uiElements.settingsBtn.addEventListener('click', () => {
@@ -933,36 +968,60 @@ if (uiElements.fileInput) uiElements.fileInput.addEventListener('change', previe
 if (uiElements.audioInput) uiElements.audioInput.addEventListener('change', previewFile);
 
 if (uiElements.sendBtn) {
-  uiElements.sendBtn.addEventListener('mousedown', e => {
+  uiElements.sendBtn.addEventListener('click', (e) => {
+    e.preventDefault();
     if (uiElements.sendBtn.disabled || isRequestActive || isRecording) return;
-    startVoiceRecording();
+    if (uiElements.input.value.trim()) {
+      submitMessage();
+    }
+  });
+
+  let pressTimer;
+  uiElements.sendBtn.addEventListener('mousedown', (e) => {
+    if (uiElements.sendBtn.disabled || isRequestActive || isRecording) return;
+    pressTimer = setTimeout(() => {
+      startVoiceRecording();
+    }, 500);
+  });
+  uiElements.sendBtn.addEventListener('mouseup', () => {
+    clearTimeout(pressTimer);
+    if (isRecording) stopVoiceRecording();
   });
-  uiElements.sendBtn.addEventListener('mouseup', () => isRecording && stopVoiceRecording());
-  uiElements.sendBtn.addEventListener('mouseleave', () => isRecording && stopVoiceRecording());
-  uiElements.sendBtn.addEventListener('touchstart', e => {
+  uiElements.sendBtn.addEventListener('mouseleave', () => {
+    clearTimeout(pressTimer);
+    if (isRecording) stopVoiceRecording();
+  });
+
+  uiElements.sendBtn.addEventListener('touchstart', (e) => {
     e.preventDefault();
     if (uiElements.sendBtn.disabled || isRequestActive || isRecording) return;
-    startVoiceRecording();
+    pressTimer = setTimeout(() => {
+      startVoiceRecording();
+    }, 500);
   });
-  uiElements.sendBtn.addEventListener('touchend', e => {
+  uiElements.sendBtn.addEventListener('touchend', (e) => {
     e.preventDefault();
+    clearTimeout(pressTimer);
     if (isRecording) stopVoiceRecording();
   });
-  uiElements.sendBtn.addEventListener('touchcancel', e => {
+  uiElements.sendBtn.addEventListener('touchcancel', (e) => {
     e.preventDefault();
+    clearTimeout(pressTimer);
     if (isRecording) stopVoiceRecording();
   });
 }
 
 if (uiElements.form) {
-  uiElements.form.addEventListener('submit', e => {
+  uiElements.form.addEventListener('submit', (e) => {
     e.preventDefault();
-    if (!isRecording) submitMessage();
+    if (!isRecording && uiElements.input.value.trim()) {
+      submitMessage();
+    }
   });
 }
 
 if (uiElements.input) {
-  uiElements.input.addEventListener('keydown', e => {
+  uiElements.input.addEventListener('keydown', (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       if (!isRecording && !uiElements.sendBtn.disabled) submitMessage();
@@ -1000,3 +1059,10 @@ if (uiElements.sidebarToggle) {
 if (uiElements.newConversationBtn) {
   uiElements.newConversationBtn.addEventListener('click', createNewConversation);
 }
+
+// Debug localStorage
+const originalRemoveItem = localStorage.removeItem;
+localStorage.removeItem = function(key) {
+  console.log('Removing from localStorage:', key);
+  originalRemoveItem.apply(this, arguments);
+};

templates/index.html

@@ -4,24 +4,20 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="MGZon Chatbot – AI-powered assistant for code generation, web search, and e-commerce solutions by Mark Al-Asfar from Alexandria, Egypt.">
-  <meta name="keywords" content="MGZon Chatbot, AI assistant, code generation, e-commerce, Mark Al-Asfar, 
-United States, FastAPI, Gradio">
+  <meta name="keywords" content="MGZon Chatbot, AI assistant, code generation, e-commerce, Mark Al-Asfar, United States, FastAPI, Gradio">
   <meta name="author" content="Mark Al-Asfar">
   <meta name="robots" content="index, follow">
   <title>MGZon Chatbot – Powered by AI</title>
   <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-<!-- manifest for Android/Chrome -->
-<link rel="manifest" href="/static/manifest.json">
-
-<!-- iOS Web App Support -->
-<link rel="apple-touch-icon" sizes="180x180" href="/static/images/icons/mg-180.png">
-<meta name="apple-mobile-web-app-capable" content="yes">
-<meta name="apple-mobile-web-app-title" content="MGZon">
-<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-
-<!-- General Theme -->
-<meta name="theme-color" content="#2d3748">
-
+  <!-- manifest for Android/Chrome -->
+  <link rel="manifest" href="/static/manifest.json">
+  <!-- iOS Web App Support -->
+  <link rel="apple-touch-icon" sizes="180x180" href="/static/images/mg-180.png">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-title" content="MGZon">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <!-- General Theme -->
+  <meta name="theme-color" content="#2d3748">
   <!-- Open Graph -->
   <meta property="og:title" content="MGZon Chatbot – AI-Powered Solutions">
   <meta property="og:description" content="Explore MGZon Chatbot for code generation, web search, and e-commerce solutions by Mark Al-Asfar.">
@@ -34,29 +30,29 @@ United States, FastAPI, Gradio">
   <meta name="twitter:description" content="Explore MGZon Chatbot for code generation, web search, and e-commerce solutions by Mark Al-Asfar.">
   <meta name="twitter:image" content="/static/images/mg.svg">
   <!-- JSON-LD -->
-<script type="application/ld+json">
-{
-  "@context": "https://schema.org",
-  "@type": "WebSite",
-  "name": "MGZon Chatbot",
-  "url": "https://mgzon-mgzon-app.hf.space/",
-  "description": "MGZon Chatbot by Mark Al-Asfar: Your AI assistant for code generation, real-time web search, and e-commerce solutions.",
-  "keywords": ["MGZon Chatbot", "AI chatbot", "Code generation AI", "E-commerce AI solutions", "Mark Al-Asfar", "AI assistant for developers", "FastAPI chatbot", "Real-time web search AI", "MGZon AI", "Python AI chatbot", "AI for coding", "E-commerce automation", "Hugging Face AI", "2025 AI trends", "chatgpt", "grok", "deepseek", "text generation"],
-  "potentialAction": {
-    "@type": "SearchAction",
-    "target": "https://mgzon-mgzon-app.hf.space/?q={search_term_string}",
-    "query-input": "required name=search_term_string"
-  },
-  "publisher": {
-    "@type": "Organization",
-    "name": "MGZon AI",
-    "logo": {
-      "@type": "ImageObject",
-      "url": "/static/images/mg.svg"
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    "name": "MGZon Chatbot",
+    "url": "https://mgzon-mgzon-app.hf.space/",
+    "description": "MGZon Chatbot by Mark Al-Asfar: Your AI assistant for code generation, real-time web search, and e-commerce solutions.",
+    "keywords": ["MGZon Chatbot", "AI chatbot", "Code generation AI", "E-commerce AI solutions", "Mark Al-Asfar", "AI assistant for developers", "FastAPI chatbot", "Real-time web search AI", "MGZon AI", "Python AI chatbot", "AI for coding", "E-commerce automation", "Hugging Face AI", "2025 AI trends", "chatgpt", "grok", "deepseek", "text generation"],
+    "potentialAction": {
+      "@type": "SearchAction",
+      "target": "https://mgzon-mgzon-app.hf.space/?q={search_term_string}",
+      "query-input": "required name=search_term_string"
+    },
+    "publisher": {
+      "@type": "Organization",
+      "name": "MGZon AI",
+      "logo": {
+        "@type": "ImageObject",
+        "url": "/static/images/mg.svg"
+      }
     }
   }
-}
-</script>
+  </script>
   <!-- Tailwind (v3) -->
   <script src="https://cdn.tailwindcss.com"></script>
   <!-- Boxicons -->
@@ -134,8 +130,13 @@ United States, FastAPI, Gradio">
       <a href="/" class="px-4 py-2 rounded-lg bg-emerald-600">Home</a>
       <a href="/docs" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">API Documentation</a>
       <a href="/about" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">About MGZon</a>
-      <a href="/login" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Login</a>
-      <a href="/register" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Register</a>
+      {% if is_authenticated %}
+        <a href="/chat" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Chat</a>
+        <a id="logoutBtn" href="/logout" class="px-4 py-2 rounded-lg hover:bg-red-600 transition">Logout</a>
+      {% else %}
+        <a href="/login" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Login</a>
+        <a href="/register" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Register</a>
+      {% endif %}
       <a href="https://hager-zon.vercel.app/community" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Community</a>
       <a href="https://mark-elasfar.web.app/" target="_blank" class="px-4 py-2 rounded-lg hover:bg-emerald-600 transition">Mark Al-Asfar</a>
     </nav>
@@ -150,17 +151,15 @@ United States, FastAPI, Gradio">
           Welcome to MGZon Chatbot 🚀
         </h1>
         <p class="text-lg max-w-2xl mx-auto mb-8">
-          MGZon Chatbot is an AI-powered assistant for code generation, web search, and e-commerce solutions. Built with Gradio and FastAPI by Mark Al-Asfar from 
-United States. Ready to code smarter and shop better?
-  Discover MGZon Chatbot, an AI-powered assistant by Mark Al-Asfar for code generation, real-time web search, and e-commerce automation. Built with FastAPI and Hugging Face AI, MGZon rivals tools like ChatGPT, Grok, and DeepSeek.
+          MGZon Chatbot is an AI-powered assistant for code generation, web search, and e-commerce solutions. Built with Gradio and FastAPI by Mark Al-Asfar from United States. Ready to code smarter and shop better? Discover MGZon Chatbot, an AI-powered assistant by Mark Al-Asfar for code generation, real-time web search, and e-commerce automation. Built with FastAPI and Hugging Face AI, MGZon rivals tools like ChatGPT, Grok, and DeepSeek.
         </p>
-        {% if user %}
+        {% if is_authenticated %}
           <div class="flex justify-center gap-4">
             <a href="/chat" id="launchBtn" class="inline-flex items-center bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
               Launch Chatbot <i class="bx bx-rocket ml-2"></i>
               <span id="spinner" class="loading hidden"></span>
             </a>
-            <a href="/auth/jwt/logout" class="inline-flex items-center bg-gradient-to-r from-red-500 to-orange-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
+            <a id="logoutBtn" href="/logout" class="inline-flex items-center bg-gradient-to-r from-red-500 to-orange-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:scale-105 transition-transform shadow-lg hover:shadow-xl">
               Logout <i class="bx bx-log-out ml-2"></i>
             </a>
           </div>
@@ -246,7 +245,7 @@ United States. Ready to code smarter and shop better?
   <!-- Footer -->
   <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 mt-8">
     <div class="container max-w-6xl mx-auto text-center">
-     <img src="/static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
+      <img src="/static/images/mg.svg" alt="MGZon Chatbot Logo by Mark Al-Asfar" class="w-32 h-32 mx-auto mb-6 animate-bounce">
       <p class="mb-4">
         Developed by <a href="https://mark-elasfar.web.app/" target="_blank" class="text-emerald-300 hover:underline">Mark Al-Asfar</a>
         | Powered by <a href="https://hager-zon.vercel.app/" target="_blank" class="text-emerald-300 hover:underline">MGZon AI</a>
@@ -314,75 +313,132 @@ United States. Ready to code smarter and shop better?
       </div>
       <p class="mt-6">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
     </div>
-        <button id="installAppBtn" style="display: none;" class="fixed bottom-4 right-4 bg-blue-600 text-white px-4 py-2 rounded shadow-lg z-50">
+    <button id="installAppBtn" style="display: none;" class="fixed bottom-4 right-4 bg-blue-600 text-white px-4 py-2 rounded shadow-lg z-50">
       📲 Install MG Chat
     </button>
   </footer>
   <script>
+    // Sidebar toggle
     const sidebar = document.getElementById('sidebar');
     const toggleBtn = document.getElementById('sidebarToggle');
     const closeSidebarBtn = document.getElementById('closeSidebar');
-    toggleBtn.addEventListener('click', () => {
-      sidebar.classList.toggle('active');
-      sidebar.classList.toggle('-translate-x-full');
-      sidebar.classList.toggle('translate-x-0');
-    });
-    closeSidebarBtn.addEventListener('click', () => {
-      sidebar.classList.remove('active');
-      sidebar.classList.add('-translate-x-full');
-      sidebar.classList.remove('translate-x-0');
-    });
+
+    if (toggleBtn && sidebar) {
+      toggleBtn.addEventListener('click', () => {
+        sidebar.classList.toggle('active');
+        sidebar.classList.toggle('-translate-x-full');
+        sidebar.classList.toggle('translate-x-0');
+        console.log('Sidebar toggled');
+      });
+    } else {
+      console.warn('Sidebar or toggle button not found');
+    }
+
+    if (closeSidebarBtn && sidebar) {
+      closeSidebarBtn.addEventListener('click', () => {
+        sidebar.classList.remove('active');
+        sidebar.classList.add('-translate-x-full');
+        sidebar.classList.remove('translate-x-0');
+        console.log('Sidebar closed');
+      });
+    }
+
+    // Close sidebar when clicking outside on mobile
     document.addEventListener('click', (e) => {
       if (!sidebar.contains(e.target) && !toggleBtn.contains(e.target) && window.innerWidth < 768) {
         sidebar.classList.remove('active');
         sidebar.classList.add('-translate-x-full');
         sidebar.classList.remove('translate-x-0');
+        console.log('Sidebar closed due to outside click');
       }
     });
+
+    // Show/hide card details
     function showCardDetails(cardId) {
       document.getElementById(`${cardId}-details`).classList.remove('hidden');
     }
+
     function closeCardDetails(cardId) {
       document.getElementById(`${cardId}-details`).classList.add('hidden');
     }
+
+    // Launch button spinner
     const launchBtn = document.getElementById('launchBtn');
     const spinner = document.getElementById('spinner');
-    launchBtn.addEventListener('click', (e) => {
-      spinner.classList.remove('hidden');
-      setTimeout(() => spinner.classList.add('hidden'), 2000);
-    });
-    
-    if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('/static/js/sw.js')
-      .then(function(reg) {
-        console.log('✅ Service Worker Registered', reg);
-      }).catch(function(err) {
-        console.error('❌ Service Worker registration failed', err);
+    if (launchBtn && spinner) {
+      launchBtn.addEventListener('click', (e) => {
+        spinner.classList.remove('hidden');
+        setTimeout(() => spinner.classList.add('hidden'), 2000);
       });
-  }
-
-  // التعامل مع حدث beforeinstallprompt لتثبيت التطبيق
-  let deferredPrompt;
-  window.addEventListener('beforeinstallprompt', (e) => {
-    e.preventDefault();
-    deferredPrompt = e;
-    const installBtn = document.getElementById('installAppBtn');
-    if (installBtn) {
-      installBtn.style.display = 'block';
+    }
 
-      installBtn.addEventListener('click', () => {
-        deferredPrompt.prompt();
-        deferredPrompt.userChoice.then(choice => {
-          if (choice.outcome === 'accepted') {
-            console.log('✅ User accepted the install prompt');
+    // Logout handler
+    const logoutBtn = document.getElementById('logoutBtn');
+    if (logoutBtn) {
+      logoutBtn.addEventListener('click', async (e) => {
+        e.preventDefault();
+        console.log('Logout button clicked');
+        try {
+          const response = await fetch('/logout', {
+            method: 'GET',
+            credentials: 'include'
+          });
+          if (response.ok) {
+            localStorage.removeItem('token');
+            console.log('Token removed from localStorage');
+            window.location.href = '/login';
           } else {
-            console.log('❌ User dismissed the install prompt');
+            console.error('Logout failed:', response.status);
+            alert('Failed to log out. Please try again.');
           }
-          deferredPrompt = null;
-        });
+        } catch (error) {
+          console.error('Logout error:', error);
+          alert('Error during logout: ' + error.message);
+        }
       });
     }
-  });
+
+    // Service Worker for PWA
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/static/js/sw.js')
+        .then(function(reg) {
+          console.log('✅ Service Worker Registered', reg);
+        }).catch(function(err) {
+          console.error('❌ Service Worker registration failed', err);
+        });
+    }
+
+    // Handle beforeinstallprompt for PWA
+    let deferredPrompt;
+    window.addEventListener('beforeinstallprompt', (e) => {
+      e.preventDefault();
+      deferredPrompt = e;
+      const installBtn = document.getElementById('installAppBtn');
+      if (installBtn) {
+        installBtn.style.display = 'block';
+        installBtn.addEventListener('click', () => {
+          deferredPrompt.prompt();
+          deferredPrompt.userChoice.then(choice => {
+            if (choice.outcome === 'accepted') {
+              console.log('✅ User accepted the install prompt');
+            } else {
+              console.log('❌ User dismissed the install prompt');
+            }
+            deferredPrompt = null;
+          });
+        });
+      }
+    });
+
+    // Card animations
+    document.querySelectorAll('.glass').forEach(card => {
+      card.addEventListener('mouseenter', () => {
+        card.style.transform = 'scale(1.05) rotate(1deg)';
+      });
+      card.addEventListener('mouseleave', () => {
+        card.style.transform = 'scale(1) rotate(0deg)';
+      });
+    });
   </script>
 </body>
 </html>