update main.py chat.js auth.py login.html

api/auth.py

@@ -12,12 +12,13 @@ from fastapi import Depends, Request, FastAPI
 from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy import select
 from fastapi_users.models import UP
-from typing import Optional, Dict
+from typing import Optional
 import os
 import logging
 import secrets
+from fastapi.responses import RedirectResponse
 
-from api.database import User, OAuthAccount, CustomSQLAlchemyUserDatabase, get_user_db  # استيراد من database.py
+from api.database import User, OAuthAccount, CustomSQLAlchemyUserDatabase, get_user_db
 from api.models import UserRead, UserCreate, UserUpdate
 
 # إعداد اللوقينج
@@ -110,7 +111,8 @@ class UserManager(IntegerIDMixin, BaseUserManager[User, int]):
             if user:
                 logger.info(f"User found: {user.email}, proceeding with on_after_login")
                 await self.on_after_login(user, request)
-                return user
+                logger.info(f"Redirecting user {user.email} to /chat")
+                return RedirectResponse(url="/chat", status_code=302)
             else:
                 logger.error(f"No user found for OAuth account with user_id: {existing_oauth_account.user_id}")
                 raise ValueError("User not found for existing OAuth account")
@@ -123,7 +125,8 @@ class UserManager(IntegerIDMixin, BaseUserManager[User, int]):
                 await self.add_oauth_account(oauth_account)
                 logger.info(f"User associated: {user.email}, proceeding with on_after_login")
                 await self.on_after_login(user, request)
-                return user
+                logger.info(f"Redirecting user {user.email} to /chat")
+                return RedirectResponse(url="/chat", status_code=302)
 
         logger.info(f"Creating new user for email: {account_email}")
         user_dict = {
@@ -138,7 +141,8 @@ class UserManager(IntegerIDMixin, BaseUserManager[User, int]):
         await self.add_oauth_account(oauth_account)
         logger.info(f"New user created: {user.email}, proceeding with on_after_login")
         await self.on_after_login(user, request)
-        return user
+        logger.info(f"Redirecting new user {user.email} to /chat")
+        return RedirectResponse(url="/chat", status_code=302)
 
 # استدعاء user manager من get_user_db
 async def get_user_manager(user_db: CustomSQLAlchemyUserDatabase = Depends(get_user_db)):
@@ -180,4 +184,4 @@ def get_auth_router(app: FastAPI):
     app.include_router(fastapi_users.get_register_router(UserRead, UserCreate), prefix="/auth", tags=["auth"])
     app.include_router(fastapi_users.get_reset_password_router(), prefix="/auth", tags=["auth"])
     app.include_router(fastapi_users.get_verify_router(UserRead), prefix="/auth", tags=["auth"])
-    app.include_router(fastapi_users.get_users_router(UserRead, UserUpdate), prefix="/users", tags=["users"])
+    app.include_router(fastapi_users.get_users_router(UserRead, UserUpdate), prefix="/users", tags=["users"])

main.py

@@ -134,13 +134,13 @@ get_auth_router(app)
 logger.debug("API and auth routers included")
 
 # Add logout endpoint
-@app.get("/logout")
+@app.post("/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 = RedirectResponse("/login", status_code=302)
     response.delete_cookie("access_token")
     response.delete_cookie("session")
     logger.debug("Session and access_token cookies deleted")

static/js/chat.js

@@ -39,27 +39,27 @@ const uiElements = {
     once: true,
     offset: 50,
   });
-  if (currentConversationId && checkAuth()) {
+  if(currentConversationId && checkAuth()) {
     console.log('Loading conversation with ID:', currentConversationId);
-    await loadConversation(currentConversationId);
+await loadConversation(currentConversationId);
   } else if (conversationHistory.length > 0) {
-    console.log('Restoring conversation history from sessionStorage:', conversationHistory);
-    enterChatView();
-    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();
-  if (uiElements.swipeHint) {
-    setTimeout(() => {
-      uiElements.swipeHint.style.display = 'none';
-    }, 3000);
-  }
-  setupTouchGestures();
+  console.log('Restoring conversation history from sessionStorage:', conversationHistory);
+  enterChatView();
+  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();
+if (uiElements.swipeHint) {
+  setTimeout(() => {
+    uiElements.swipeHint.style.display = 'none';
+  }, 3000);
+}
+setupTouchGestures();
 });
 
 // Check authentication token
@@ -526,6 +526,7 @@ async function createNewConversation() {
     console.error('Error creating conversation:', error);
     alert('Failed to create new conversation. Please try again.');
   }
+  if (uiElements.chatBox) uiElements.chatBox.scrollTop = uiElements.chatBox.scrollHeight;
 }
 
 // Update conversation title
@@ -689,63 +690,20 @@ async function submitMessage() {
 
   try {
     const response = await sendRequest(endpoint, payload ? JSON.stringify(payload) : formData, headers);
+    let responseText = '';
     if (endpoint === '/api/audio-transcription') {
       const data = await response.json();
       if (!data.transcription) throw new Error('No transcription received from server');
-      const transcription = data.transcription || 'Error: No transcription generated.';
-      if (streamMsg) {
-        streamMsg.dataset.text = transcription;
-        renderMarkdown(streamMsg);
-        streamMsg.dataset.done = '1';
-      }
-      conversationHistory.push({ role: 'assistant', content: transcription });
-      sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
-      if (checkAuth() && currentConversationId) {
-        await saveMessageToConversation(currentConversationId, 'assistant', transcription);
-      }
-      if (checkAuth() && data.conversation_id) {
-        currentConversationId = data.conversation_id;
-        currentConversationTitle = data.conversation_title || 'Untitled Conversation';
-        if (uiElements.conversationTitle) uiElements.conversationTitle.textContent = currentConversationTitle;
-        history.pushState(null, '', `/chat/${currentConversationId}`);
-        await loadConversations();
-      }
+      responseText = data.transcription || 'Error: No transcription generated.';
     } else if (endpoint === '/api/image-analysis') {
       const data = await response.json();
-      const analysis = data.image_analysis || 'Error: No analysis generated.';
-      if (streamMsg) {
-        streamMsg.dataset.text = analysis;
-        renderMarkdown(streamMsg);
-        streamMsg.dataset.done = '1';
-      }
-      conversationHistory.push({ role: 'assistant', content: analysis });
-      sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
-      if (checkAuth() && currentConversationId) {
-        await saveMessageToConversation(currentConversationId, 'assistant', analysis);
-      }
-      if (checkAuth() && data.conversation_id) {
-        currentConversationId = data.conversation_id;
-        currentConversationTitle = data.conversation_title || 'Untitled Conversation';
-        if (uiElements.conversationTitle) uiElements.conversationTitle.textContent = currentConversationTitle;
-        history.pushState(null, '', `/chat/${currentConversationId}`);
-        await loadConversations();
-      }
+      responseText = data.image_analysis || 'Error: No analysis generated.';
     } else {
       const contentType = response.headers.get('Content-Type');
       if (contentType?.includes('application/json')) {
         const data = await response.json();
-        const responseText = data.response || 'Error: No response generated.';
-        if (streamMsg) {
-          streamMsg.dataset.text = responseText;
-          renderMarkdown(streamMsg);
-          streamMsg.dataset.done = '1';
-        }
-        conversationHistory.push({ role: 'assistant', content: responseText });
-        sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
-        if (checkAuth() && currentConversationId) {
-          await saveMessageToConversation(currentConversationId, 'assistant', responseText);
-        }
-        if (checkAuth() && data.conversation_id) {
+        responseText = data.response || 'Error: No response generated.';
+        if (data.conversation_id) {
           currentConversationId = data.conversation_id;
           currentConversationTitle = data.conversation_title || 'Untitled Conversation';
           if (uiElements.conversationTitle) uiElements.conversationTitle.textContent = currentConversationTitle;
@@ -771,14 +729,23 @@ async function submitMessage() {
             if (uiElements.chatBox) uiElements.chatBox.scrollTop = uiElements.chatBox.scrollHeight;
           }
         }
-        if (streamMsg) streamMsg.dataset.done = '1';
-        conversationHistory.push({ role: 'assistant', content: buffer });
-        sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
-        if (checkAuth() && currentConversationId) {
-          await saveMessageToConversation(currentConversationId, 'assistant', buffer);
-        }
+        responseText = buffer;
       }
     }
+
+    if (streamMsg) {
+      streamMsg.dataset.text = responseText;
+      renderMarkdown(streamMsg);
+      streamMsg.dataset.done = '1';
+    }
+    conversationHistory.push({ role: 'assistant', content: responseText });
+    sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+    if (checkAuth() && currentConversationId) {
+      await saveMessageToConversation(currentConversationId, 'assistant', responseText);
+    }
+    if (checkAuth()) {
+      await loadConversations(); // تحديث السايدبار
+    }
     finalizeRequest();
   } catch (error) {
     handleRequestError(error);
@@ -807,13 +774,13 @@ function stopStream(forceCancel = false) {
 }
 
 // Logout handler
-const logoutBtn = document.getElementById('logoutBtn');
+const logoutBtn = document.querySelector('#logoutBtn');
 if (logoutBtn) {
   logoutBtn.addEventListener('click', async () => {
     console.log('Logout button clicked');
     try {
       const response = await fetch('/logout', {
-        method: 'GET',
+        method: 'POST',
         credentials: 'include'
       });
       if (response.ok) {
@@ -831,59 +798,60 @@ if (logoutBtn) {
   });
 }
 
+
+
 // Settings Modal
 if (uiElements.settingsBtn) {
-  uiElements.settingsBtn.addEventListener('click', () => {
+  uiElements.settingsBtn.addEventListener('click', async () => {
     if (!checkAuth()) {
       alert('Please log in to access settings.');
       window.location.href = '/login';
       return;
     }
-    uiElements.settingsModal.classList.remove('hidden');
-    fetch('/api/settings', {
-      headers: { 'Authorization': `Bearer ${checkAuth()}` }
-    })
-      .then(res => {
-        if (!res.ok) {
-          if (res.status === 401) {
-            localStorage.removeItem('token');
-            window.location.href = '/login';
-          }
-          throw new Error('Failed to fetch settings');
+    try {
+      const response = await fetch('/api/settings', {
+        headers: { 'Authorization': `Bearer ${checkAuth()}` }
+      });
+      if (!response.ok) {
+        if (response.status === 401) {
+          localStorage.removeItem('token');
+          window.location.href = '/login';
         }
-        return res.json();
-      })
-      .then(data => {
-        document.getElementById('display_name').value = data.user_settings.display_name || '';
-        document.getElementById('preferred_model').value = data.user_settings.preferred_model || 'standard';
-        document.getElementById('job_title').value = data.user_settings.job_title || '';
-        document.getElementById('education').value = data.user_settings.education || '';
-        document.getElementById('interests').value = data.user_settings.interests || '';
-        document.getElementById('additional_info').value = data.user_settings.additional_info || '';
-        document.getElementById('conversation_style').value = data.user_settings.conversation_style || 'default';
+        throw new Error('Failed to fetch settings');
+      }
+      const data = await response.json();
+      document.getElementById('display_name').value = data.user_settings.display_name || '';
+      document.getElementById('preferred_model').value = data.user_settings.preferred_model || 'standard';
+      document.getElementById('job_title').value = data.user_settings.job_title || '';
+      document.getElementById('education').value = data.user_settings.education || '';
+      document.getElementById('interests').value = data.user_settings.interests || '';
+      document.getElementById('additional_info').value = data.user_settings.additional_info || '';
+      document.getElementById('conversation_style').value = data.user_settings.conversation_style || 'default';
 
-        const modelSelect = document.getElementById('preferred_model');
-        modelSelect.innerHTML = '';
-        data.available_models.forEach(model => {
-          const option = document.createElement('option');
-          option.value = model.alias;
-          option.textContent = `${model.alias} - ${model.description}`;
-          modelSelect.appendChild(option);
-        });
+      const modelSelect = document.getElementById('preferred_model');
+      modelSelect.innerHTML = '';
+      data.available_models.forEach(model => {
+        const option = document.createElement('option');
+        option.value = model.alias;
+        option.textContent = `${model.alias} - ${model.description}`;
+        modelSelect.appendChild(option);
+      });
 
-        const styleSelect = document.getElementById('conversation_style');
-        styleSelect.innerHTML = '';
-        data.conversation_styles.forEach(style => {
-          const option = document.createElement('option');
-          option.value = style;
-          option.textContent = style.charAt(0).toUpperCase() + style.slice(1);
-          styleSelect.appendChild(option);
-        });
-      })
-      .catch(err => {
-        console.error('Error fetching settings:', err);
-        alert('Failed to load settings. Please try again.');
+      const styleSelect = document.getElementById('conversation_style');
+      styleSelect.innerHTML = '';
+      data.conversation_styles.forEach(style => {
+        const option = document.createElement('option');
+        option.value = style;
+        option.textContent = style.charAt(0).toUpperCase() + style.slice(1);
+        styleSelect.appendChild(option);
       });
+
+      uiElements.settingsModal.classList.remove('hidden');
+      toggleSidebar(false);
+    } catch (err) {
+      console.error('Error fetching settings:', err);
+      alert('Failed to load settings. Please try again.');
+    }
   });
 }
 
@@ -905,7 +873,7 @@ if (uiElements.settingsForm) {
     const data = Object.fromEntries(formData);
     fetch('/users/me', {
       method: 'PUT',
-      headers: { 
+      headers: {
         'Content-Type': 'application/json',
         'Authorization': `Bearer ${checkAuth()}`
       },
@@ -1062,7 +1030,7 @@ if (uiElements.newConversationBtn) {
 
 // Debug localStorage
 const originalRemoveItem = localStorage.removeItem;
-localStorage.removeItem = function(key) {
+localStorage.removeItem = function (key) {
   console.log('Removing from localStorage:', key);
   originalRemoveItem.apply(this, arguments);
 };

templates/chat.html

@@ -1,10 +1,14 @@
 <!DOCTYPE html>
 <html lang="en" class="dark-theme">
+
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-  <meta name="description" content="Chat with MGZon Chatbot, an AI-powered tool for coding, analysis, and e-commerce queries. Supports text, image, and audio inputs." />
-  <meta name="keywords" content="MGZon Chatbot, AI chatbot, code generation, DeepSeek, Gradio, FastAPI, e-commerce, programming, Mark Al-Asfar" />
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <meta name="description"
+    content="Chat with MGZon Chatbot, an AI-powered tool for coding, analysis, and e-commerce queries. Supports text, image, and audio inputs." />
+  <meta name="keywords"
+    content="MGZon Chatbot, AI chatbot, code generation, DeepSeek, Gradio, FastAPI, e-commerce, programming, Mark Al-Asfar" />
   <meta name="author" content="Mark Al-Asfar" />
   <meta name="robots" content="index, follow" />
   <title>MGZon Chatbot – AI Assistant</title>
@@ -13,26 +17,28 @@
   <link rel="apple-touch-icon" href="/static/images/mg.svg" />
   <!-- Open Graph -->
   <meta property="og:title" content="MGZon Chatbot – AI Assistant" />
-<!-- manifest for Android/Chrome -->
-<link rel="manifest" href="/static/manifest.json">
+  <!-- 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">
+  <!-- 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">
+  <!-- General Theme -->
+  <meta name="theme-color" content="#2d3748">
 
-  <meta property="og:description" content="Chat with MGZon Chatbot for coding, analysis, and e-commerce queries with text, image, and audio support." />
+  <meta property="og:description"
+    content="Chat with MGZon Chatbot for coding, analysis, and e-commerce queries with text, image, and audio support." />
   <meta property="og:image" content="/static/images/mg.svg" />
   <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/chat" />
   <meta property="og:type" content="website" />
   <!-- Twitter Card -->
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content="MGZon Chatbot – AI Assistant" />
-  <meta name="twitter:description" content="Chat with MGZon Chatbot for coding, analysis, and e-commerce queries with text, image, and audio support." />
+  <meta name="twitter:description"
+    content="Chat with MGZon Chatbot for coding, analysis, and e-commerce queries with text, image, and audio support." />
   <meta name="twitter:image" content="/static/images/mg.svg" />
   <!-- JSON-LD -->
   <script type="application/ld+json">
@@ -46,7 +52,8 @@
   </script>
   <!-- Fonts & Styles -->
   <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet" />
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
   <script src="https://cdn.tailwindcss.com"></script>
   <!-- Markdown & Syntax Highlight -->
@@ -89,9 +96,11 @@
   <link rel="stylesheet" href="/static/css/webkit.css" />
   <link rel="stylesheet" href="/static/css/sidebar.css" />
 </head>
+
 <body class="min-h-screen flex flex-col bg-gradient-to-br from-gray-900 via-teal-900 to-emerald-900">
   <!-- Sidebar -->
-  <aside id="sidebar" class="fixed inset-y-0 left-0 w-64 bg-gray-800/90 backdrop-blur-md transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out z-50">
+  <aside id="sidebar"
+    class="fixed inset-y-0 left-0 w-64 bg-gray-800/90 backdrop-blur-md transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out z-50">
     <div class="flex items-center justify-between p-4 border-b border-gray-700">
       <div class="flex items-center">
         <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-10 h-10 mr-2 animate-pulse" />
@@ -107,7 +116,8 @@
       <ul class="space-y-2">
         <li>
           <a href="/" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
               <path d="M3 11.5L12 4l9 7.5M5 21V11.5h14V21"></path>
             </svg>
             Home
@@ -115,50 +125,67 @@
         </li>
         <li>
           <a href="/about" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
             </svg>
             About
           </a>
         </li>
         <li>
           <a href="/blog" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 006 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"></path>
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 006 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25">
+              </path>
             </svg>
             Blog
           </a>
         </li>
         <li>
           <a href="/docs" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
+              </path>
             </svg>
             Docs
           </a>
         </li>
         {% if user %}
         <li>
-          <button id="settingsBtn" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors w-full text-left">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
+          <button id="settingsBtn"
+            class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors w-full text-left">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4">
+              </path>
             </svg>
             Settings
           </button>
         </li>
         <li>
-          <a href="/auth/jwt/logout" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+          <button id="logoutBtn"
+            class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors w-full text-left">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
             </svg>
             Logout
-          </a>
+          </button>
         </li>
         {% else %}
         <li>
           <a href="/login" class="flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
             </svg>
             Login
           </a>
@@ -170,14 +197,18 @@
         <div class="flex justify-between items-center px-2 mb-2">
           <h3 class="text-sm font-semibold text-white">Conversations</h3>
           <button id="newConversationBtn" class="text-white hover:bg-gray-700 p-1 rounded" title="New Conversation">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
             </svg>
           </button>
         </div>
-        <button id="historyToggle" class="md:hidden flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors w-full text-left">
-          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        <button id="historyToggle"
+          class="md:hidden flex items-center text-white hover:bg-gray-700 p-2 rounded transition-colors w-full text-left">
+          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
           </svg>
           Show History
         </button>
@@ -203,7 +234,8 @@
       </div>
       <div class="chat-controls flex gap-2">
         <button id="clearBtn" class="icon-btn" aria-label="Clear All Messages" title="Clear All Messages">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"
+            stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
             <path d="M3 6h18" />
             <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
             <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
@@ -228,7 +260,9 @@
         <div class="prompts w-full max-w-md mx-auto grid gap-2">
           <div class="prompt-item" data-prompt="What's the capital of France?">
             <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-              <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M18.66 18.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M18.66 5.34l1.41-1.41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              <path
+                d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M18.66 18.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M18.66 5.34l1.41-1.41"
+                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
               <circle cx="12" cy="12" r="4" stroke-width="2" />
             </svg>
             <span>What's the capital of France?</span>
@@ -253,7 +287,8 @@
           </div>
         </div>
         <div id="messageLimitWarning" class="text-red-500 text-center hidden mt-4">
-          You have reached the message limit. Please <a href="/login" class="text-blue-300 underline">login</a> to continue.
+          You have reached the message limit. Please <a href="/login" class="text-blue-300 underline">login</a> to
+          continue.
         </div>
       </div>
       <div id="chatArea" class="flex-1 hidden" aria-live="polite">
@@ -265,22 +300,27 @@
           <textarea id="userInput" placeholder="Ask anything..." required></textarea>
           <div id="rightIconGroup" class="flex gap-2">
             <button type="button" id="fileBtn" class="icon-btn" aria-label="Upload File" title="Upload File">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+                stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
                 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                 <path d="M14 2v6h6" />
               </svg>
             </button>
             <input type="file" id="fileInput" accept="image/*,.mp3,.wav" style="display: none;" />
-            <button type="button" id="audioBtn" class="icon-btn" aria-label="Upload Audio File" title="Upload Audio File">
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+            <button type="button" id="audioBtn" class="icon-btn" aria-label="Upload Audio File"
+              title="Upload Audio File">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"
+                stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
                 <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
                 <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
                 <path d="M12 19v4" />
               </svg>
             </button>
             <input type="file" id="audioInput" accept="audio/*" style="display: none;" />
-            <button type="submit" id="sendBtn" class="icon-btn" disabled aria-label="Send or Hold to Record" title="Click to Send or Hold to Record Voice">
-              <svg id="sendIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <button type="submit" id="sendBtn" class="icon-btn" disabled aria-label="Send or Hold to Record"
+              title="Click to Send or Hold to Record Voice">
+              <svg id="sendIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7-7 7M3 12h11" />
               </svg>
             </button>
@@ -302,7 +342,8 @@
         <div class="flex justify-between items-center mb-4">
           <h2 class="text-xl font-bold text-white">User Settings</h2>
           <button id="closeSettingsBtn" class="text-gray-400 hover:text-white">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
             </svg>
           </button>
@@ -335,7 +376,8 @@
           </div>
           <div>
             <label for="additional_info" class="block text-sm text-gray-300">Additional Info</label>
-            <textarea id="additional_info" name="additional_info" class="w-full p-2 bg-gray-700 text-white rounded"></textarea>
+            <textarea id="additional_info" name="additional_info"
+              class="w-full p-2 bg-gray-700 text-white rounded"></textarea>
           </div>
           <div>
             <label for="conversation_style" class="block text-sm text-gray-300">Conversation Style</label>
@@ -358,7 +400,8 @@
     <div class="text-center text-xs text-gray-400 py-2">
       © 2025 Mark Al-Asfar & MGZon AI. All rights reserved.
     </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>
   </div>
@@ -367,52 +410,53 @@
   <script src="/static/js/chat.js?v=1.0"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 
-<script>
-  // تهيئة مكتبة AOS
-  AOS.init();
+  <script>
+    // تهيئة مكتبة AOS
+    AOS.init();
 
-  // تمرير conversation_id و conversation_title إذا كانا موجودين
-  {% if conversation_id %}
+    // تمرير conversation_id و conversation_title إذا كانا موجودين
+    {% if conversation_id %}
     window.conversationId = "{{ conversation_id }}";
     window.conversationTitle = "{{ conversation_title }}";
     if (window.loadConversation) {
       window.loadConversation("{{ conversation_id }}");
     }
-  {% endif %}
+    {% endif %}
 
-  // تسجيل Service Worker لتفعيل ا��ـ 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);
-      });
-  }
+    // تسجيل Service Worker لتفعيل الـ 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);
+        });
+    }
 
-  // التعامل مع حدث beforeinstallprompt لتثبيت التطبيق
-  let deferredPrompt;
-  window.addEventListener('beforeinstallprompt', (e) => {
-    e.preventDefault();
-    deferredPrompt = e;
-    const installBtn = document.getElementById('installAppBtn');
-    if (installBtn) {
-      installBtn.style.display = 'block';
+    // التعامل مع حدث 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');
-          } else {
-            console.log('❌ User dismissed the install prompt');
-          }
-          deferredPrompt = null;
+        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;
+          });
         });
-      });
-    }
-  });
-</script>
+      }
+    });
+  </script>
 
 </body>
-</html>
+
+</html>

templates/login.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign in with email, Google, or GitHub.">
+  <meta name="description"
+    content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools. Sign in with email, Google, or GitHub.">
   <meta name="keywords" content="MGZon Chatbot, login, AI assistant, code generation, e-commerce, Mark Al-Asfar">
   <meta name="author" content="Mark Al-Asfar">
   <meta name="robots" content="index, follow">
@@ -20,14 +22,16 @@
   <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
   <!-- Open Graph -->
   <meta property="og:title" content="Login - MGZon Chatbot">
-  <meta property="og:description" content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
+  <meta property="og:description"
+    content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
   <meta property="og:image" content="/static/images/mg.svg">
   <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/login">
   <meta property="og:type" content="website">
   <!-- Twitter Card -->
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="Login - MGZon Chatbot">
-  <meta name="twitter:description" content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
+  <meta name="twitter:description"
+    content="Login to MGZon Chatbot to access AI-powered code generation and e-commerce tools.">
   <meta name="twitter:image" content="/static/images/mg.svg">
   <!-- JSON-LD -->
   <script type="application/ld+json">
@@ -51,16 +55,26 @@
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css" rel="stylesheet">
   <style>
     @keyframes gradientShift {
-      0% { background-position: 0% 50%; }
-      50% { background-position: 100% 50%; }
-      100% { background-position: 0% 50%; }
+      0% {
+        background-position: 0% 50%;
+      }
+
+      50% {
+        background-position: 100% 50%;
+      }
+
+      100% {
+        background-position: 0% 50%;
+      }
     }
+
     body {
       background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
       background-size: 400% 400%;
       animation: gradientShift 15s ease infinite;
       font-family: system-ui, sans-serif;
     }
+
     .glass {
       background: rgba(255, 255, 255, 0.07);
       border-radius: 1rem;
@@ -68,6 +82,7 @@
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
     }
+
     .loading {
       display: inline-block;
       width: 1rem;
@@ -78,9 +93,13 @@
       animation: spin 0.8s linear infinite;
       margin-left: 0.5rem;
     }
+
     @keyframes spin {
-      to { transform: rotate(360deg); }
+      to {
+        transform: rotate(360deg);
+      }
     }
+
     .glass:hover {
       transform: scale(1.05);
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
@@ -88,6 +107,7 @@
     }
   </style>
 </head>
+
 <body class="text-white min-h-screen flex flex-col justify-center items-center">
   <div class="container max-w-md mx-auto text-center py-12">
     <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-32 h-32 mx-auto mb-6 animate-bounce">
@@ -96,22 +116,30 @@
     </h1>
     <div class="glass p-8">
       <form id="loginForm" action="/auth/jwt/login" method="POST" class="flex flex-col gap-4">
-        <input type="email" name="username" id="email" placeholder="Email" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
-        <input type="password" name="password" id="password" placeholder="Password" class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500" required>
-        <button type="submit" id="loginBtn" class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+        <input type="email" name="username" id="email" placeholder="Email"
+          class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500"
+          required>
+        <input type="password" name="password" id="password" placeholder="Password"
+          class="p-3 rounded-lg bg-gray-800/60 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-emerald-500"
+          required>
+        <button type="submit" id="loginBtn"
+          class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
           Login <i class="bx bx-log-in ml-2"></i>
           <span id="spinner" class="loading hidden"></span>
         </button>
       </form>
       <div class="flex justify-center gap-4 mt-4 flex-wrap">
-        <button id="googleLoginBtn" class="inline-flex items-center bg-gradient-to-r from-white to-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+        <button id="googleLoginBtn"
+          class="inline-flex items-center bg-gradient-to-r from-white to-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
           Login with Google <i class="bx bxl-google ml-2"></i>
         </button>
-        <button id="githubLoginBtn" class="inline-flex items-center bg-gradient-to-r from-gray-800 to-black text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
+        <button id="githubLoginBtn"
+          class="inline-flex items-center bg-gradient-to-r from-gray-800 to-black text-white px-6 py-3 rounded-full font-semibold hover:scale-105 transition-transform">
           Login with GitHub <i class="bx bxl-github ml-2"></i>
         </button>
       </div>
-      <p class="mt-4">Don't have an account? <a href="/register" class="text-emerald-300 hover:underline">Register</a></p>
+      <p class="mt-4">Don't have an account? <a href="/register" class="text-emerald-300 hover:underline">Register</a>
+      </p>
       <p id="errorMsg" class="text-red-500 mt-4 hidden"></p>
     </div>
   </div>
@@ -119,8 +147,10 @@
     <div class="container max-w-6xl mx-auto text-center">
       <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-24 h-24 mx-auto mb-6 animate-pulse">
       <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>
+        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>
       </p>
       <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
         <div class="glass p-4 cursor-pointer" onclick="showCardDetails('email')">
@@ -129,7 +159,8 @@
           <p><a href="mailto:[email protected]" class="text-emerald-300 hover:underline">[email protected]</a></p>
           <div id="email-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
             <p>Reach out to our support team for any inquiries or assistance.</p>
-            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+            <button onclick="closeCardDetails('email')"
+              class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
           </div>
         </div>
         <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
@@ -138,7 +169,8 @@
           <p>+1-800-123-4567</p>
           <div id="phone-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
             <p>Contact our support team via phone for immediate assistance.</p>
-            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+            <button onclick="closeCardDetails('phone')"
+              class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
           </div>
         </div>
         <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
@@ -147,7 +179,8 @@
           <p><a href="https://hager-zon.vercel.app/community" class="text-emerald-300 hover:underline">Join us</a></p>
           <div id="community-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
             <p>Join our vibrant community to share ideas and collaborate.</p>
-            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+            <button onclick="closeCardDetails('community')"
+              class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
           </div>
         </div>
         <div class="glass p-4 cursor-pointer" onclick="showCardDetails('api-docs')">
@@ -156,16 +189,19 @@
           <p><a href="/docs" class="text-emerald-300 hover:underline">Explore Docs</a></p>
           <div id="api-docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
             <p>Explore our API documentation for seamless integration.</p>
-            <button onclick="closeCardDetails('api-docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+            <button onclick="closeCardDetails('api-docs')"
+              class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
           </div>
         </div>
         <div class="glass p-4 cursor-pointer" onclick="showCardDetails('faq')">
           <i class="bx bx-help-circle text-3xl text-emerald-300 mb-2"></i>
           <h4 class="font-semibold mb-1">FAQ</h4>
-          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read FAQ</a></p>
+          <p><a href="https://hager-zon.vercel.app/faq" target="_blank" class="text-emerald-300 hover:underline">Read
+              FAQ</a></p>
           <div id="faq-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
             <p>Find answers to common questions in our FAQ section.</p>
-            <button onclick="closeCardDetails('faq')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+            <button onclick="closeCardDetails('faq')"
+              class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
           </div>
         </div>
         <div class="glass p-4 cursor-pointer" onclick="showCardDetails('docs')">
@@ -174,198 +210,203 @@
           <p><a href="/docs" class="text-emerald-300 hover:underline">Full Docs</a></p>
           <div id="docs-details" class="hidden mt-4 p-4 bg-gray-700/80 rounded-lg">
             <p>Access comprehensive documentation for MGZon Chatbot.</p>
-            <button onclick="closeCardDetails('docs')" class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
+            <button onclick="closeCardDetails('docs')"
+              class="bg-emerald-500 text-white px-4 py-2 rounded-lg mt-2">Close</button>
           </div>
         </div>
       </div>
       <div class="flex justify-center gap-6 mt-6">
-        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-github"></i></a>
-        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-twitter"></i></a>
-        <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/" class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-facebook"></i></a>
+        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i
+            class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-2xl text-white hover:text-emerald-300 transition"><i
+            class="bx bxl-twitter"></i></a>
+        <a href="https://www.facebook.com/people/Mark-Al-Asfar/pfbid02GMisUQ8AqWkNZjoKtWFHH1tbdHuVscN1cjcFnZWy9HkRaAsmanBfT6mhySAyqpg4l/"
+          class="text-2xl text-white hover:text-emerald-300 transition"><i class="bx bxl-facebook"></i></a>
       </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>
-  console.log('Login page script loaded'); // Debugging: Ensure script is running
+    console.log('Login page script loaded'); // Debugging: Ensure script is running
 
-  const loginForm = document.getElementById('loginForm');
-  const loginBtn = document.getElementById('loginBtn');
-  const spinner = document.getElementById('spinner');
-  const errorMsg = document.getElementById('errorMsg');
-  const googleLoginBtn = document.getElementById('googleLoginBtn');
-  const githubLoginBtn = document.getElementById('githubLoginBtn');
+    const loginForm = document.getElementById('loginForm');
+    const loginBtn = document.getElementById('loginBtn');
+    const spinner = document.getElementById('spinner');
+    const errorMsg = document.getElementById('errorMsg');
+    const googleLoginBtn = document.getElementById('googleLoginBtn');
+    const githubLoginBtn = document.getElementById('githubLoginBtn');
 
-  // Check authentication status on page load
-  async function checkAuthStatus() {
-    try {
-      const response = await fetch('/api/check-auth', {
-        method: 'GET',
-        credentials: 'include',
-        headers: { 'Accept': 'application/json' }
-      });
-      const data = await response.json();
-      if (data.is_authenticated) {
-        console.log('User is authenticated, redirecting to /chat');
-        window.location.href = '/chat';
+    // Check authentication status on page load
+    async function checkAuthStatus() {
+      try {
+        const response = await fetch('/api/check-auth', {
+          method: 'GET',
+          credentials: 'include',
+          headers: { 'Accept': 'application/json' }
+        });
+        const data = await response.json();
+        if (data.is_authenticated) {
+          console.log('User is authenticated, redirecting to /chat');
+          window.location.href = '/chat';
+        }
+      } catch (error) {
+        console.error('Error checking auth status:', error);
       }
-    } catch (error) {
-      console.error('Error checking auth status:', error);
     }
-  }
 
-  // Handle email/password login
-  loginForm.addEventListener('submit', async (e) => {
-    e.preventDefault();
-    console.log('Login form submitted'); // Debugging
-    spinner.classList.remove('hidden');
-    errorMsg.classList.add('hidden');
-    const formData = new FormData(loginForm);
-    try {
-      const response = await fetch('/auth/jwt/login', {
-        method: 'POST',
-        body: formData
-      });
-      spinner.classList.add('hidden');
-      if (response.ok) {
-        console.log('Login successful, redirecting to /chat'); // Debugging
-        window.location.href = '/chat';
-      } else {
-        const error = await response.json();
-        errorMsg.textContent = error.detail || 'Login failed. Please try again.';
+    // Handle email/password login
+    loginForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      console.log('Login form submitted'); // Debugging
+      spinner.classList.remove('hidden');
+      errorMsg.classList.add('hidden');
+      const formData = new FormData(loginForm);
+      try {
+        const response = await fetch('/auth/jwt/login', {
+          method: 'POST',
+          body: formData
+        });
+        spinner.classList.add('hidden');
+        if (response.ok) {
+          console.log('Login successful, redirecting to /chat'); // Debugging
+          window.location.href = '/chat';
+        } else {
+          const error = await response.json();
+          errorMsg.textContent = error.detail || 'Login failed. Please try again.';
+          errorMsg.classList.remove('hidden');
+          console.error('Login failed:', error); // Debugging
+        }
+      } catch (error) {
+        spinner.classList.add('hidden');
+        errorMsg.textContent = 'An error occurred. Please try again.';
         errorMsg.classList.remove('hidden');
-        console.error('Login failed:', error); // Debugging
+        console.error('Error during login:', error); // Debugging
       }
-    } catch (error) {
-      spinner.classList.add('hidden');
-      errorMsg.textContent = 'An error occurred. Please try again.';
-      errorMsg.classList.remove('hidden');
-      console.error('Error during login:', error); // Debugging
-    }
-  });
+    });
 
-  // Handle Google OAuth login
-  googleLoginBtn.addEventListener('click', async (e) => {
-    e.preventDefault();
-    console.log('Google login button clicked'); // Debugging
-    spinner.classList.remove('hidden');
-    errorMsg.classList.add('hidden');
-    try {
-      const response = await fetch('https://mgzon-mgzon-app.hf.space/auth/google/authorize', {
-        method: 'GET',
-        headers: { 'Accept': 'application/json' }
-      });
-      console.log('Google authorize response:', response); // Debugging
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-      const data = await response.json();
-      console.log('Google authorize data:', data); // Debugging
-      if (data.authorization_url) {
-        console.log('Redirecting to Google:', data.authorization_url); // Debugging
-        window.location.href = data.authorization_url;
-      } else {
-        throw new Error('No authorization URL received');
+    // Handle Google OAuth login
+    googleLoginBtn.addEventListener('click', async (e) => {
+      e.preventDefault();
+      console.log('Google login button clicked');
+      spinner.classList.remove('hidden');
+      errorMsg.classList.add('hidden');
+      try {
+        const response = await fetch('https://mgzon-mgzon-app.hf.space/auth/google/authorize', {
+          method: 'GET',
+          headers: { 'Accept': 'application/json' }
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        const data = await response.json();
+        if (data.authorization_url) {
+          console.log('Redirecting to Google:', data.authorization_url);
+          window.location.href = data.authorization_url;
+        } else {
+          throw new Error('No authorization URL received');
+        }
+      } catch (error) {
+        spinner.classList.add('hidden');
+        errorMsg.textContent = 'Failed to initiate Google login. Please try again.';
+        errorMsg.classList.remove('hidden');
+        console.error('Error initiating Google login:', error);
       }
-    } catch (error) {
-      spinner.classList.add('hidden');
-      errorMsg.textContent = 'Failed to initiate Google login. Please try again.';
-      errorMsg.classList.remove('hidden');
-      console.error('Error initiating Google login:', error); // Debugging
-    }
-  });
+    });
 
-  // Handle GitHub OAuth login
-  githubLoginBtn.addEventListener('click', async (e) => {
-    e.preventDefault();
-    console.log('GitHub login button clicked'); // Debugging
-    spinner.classList.remove('hidden');
-    errorMsg.classList.add('hidden');
-    try {
-      const response = await fetch('https://mgzon-mgzon-app.hf.space/auth/github/authorize', {
-        method: 'GET',
-        headers: { 'Accept': 'application/json' }
-      });
-      console.log('GitHub authorize response:', response); // Debugging
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
+    // Handle GitHub OAuth login
+    githubLoginBtn.addEventListener('click', async (e) => {
+      e.preventDefault();
+      console.log('GitHub login button clicked');
+      spinner.classList.remove('hidden');
+      errorMsg.classList.add('hidden');
+      try {
+        const response = await fetch('https://mgzon-mgzon-app.hf.space/auth/github/authorize', {
+          method: 'GET',
+          headers: { 'Accept': 'application/json' }
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        const data = await response.json();
+        if (data.authorization_url) {
+          console.log('Redirecting to GitHub:', data.authorization_url);
+          window.location.href = data.authorization_url;
+        } else {
+          throw new Error('No authorization URL received');
+        }
+      } catch (error) {
+        spinner.classList.add('hidden');
+        errorMsg.textContent = 'Failed to initiate GitHub login. Please try again.';
+        errorMsg.classList.remove('hidden');
+        console.error('Error initiating GitHub login:', error);
       }
-      const data = await response.json();
-      console.log('GitHub authorize data:', data); // Debugging
-      if (data.authorization_url) {
-        console.log('Redirecting to GitHub:', data.authorization_url); // Debugging
-        window.location.href = data.authorization_url;
-      } else {
-        throw new Error('No authorization URL received');
+    });
+
+    // Check for error query parameters on page load (for OAuth errors)
+    window.addEventListener('load', () => {
+      console.log('Page loaded, checking for OAuth callback');
+      const urlParams = new URLSearchParams(window.location.search);
+      const error = urlParams.get('error');
+      if (error) {
+        errorMsg.textContent = decodeURIComponent(error);
+        errorMsg.classList.remove('hidden');
+        console.error('OAuth error from URL:', error);
+      } else if (urlParams.get('code')) {
+        // If there's a 'code' parameter, it means OAuth login was successful
+        console.log('OAuth login successful, redirecting to /chat');
+        window.location.href = '/chat';
       }
-    } catch (error) {
-      spinner.classList.add('hidden');
-      errorMsg.textContent = 'Failed to initiate GitHub login. Please try again.';
-      errorMsg.classList.remove('hidden');
-      console.error('Error initiating GitHub login:', error); // Debugging
-    }
-  });
+    });
 
-  // Check for error query parameters on page load (for OAuth errors)
-  window.addEventListener('load', () => {
-    console.log('Page loaded, checking auth status');
-    checkAuthStatus();
-    const urlParams = new URLSearchParams(window.location.search);
-    const error = urlParams.get('error');
-    if (error) {
-      errorMsg.textContent = decodeURIComponent(error);
-      errorMsg.classList.remove('hidden');
-      console.error('OAuth error from URL:', error); // Debugging
+    // Handle card details toggle
+    function showCardDetails(cardId) {
+      console.log('Showing card details:', cardId); // Debugging
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
     }
-  });
 
-  // Handle card details toggle
-  function showCardDetails(cardId) {
-    console.log('Showing card details:', cardId); // Debugging
-    document.getElementById(`${cardId}-details`).classList.remove('hidden');
-  }
-
-  function closeCardDetails(cardId) {
-    console.log('Closing card details:', cardId); // Debugging
-    document.getElementById(`${cardId}-details`).classList.add('hidden');
-  }
+    function closeCardDetails(cardId) {
+      console.log('Closing card details:', cardId); // Debugging
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
 
-  // Service Worker for PWA
-  if ('serviceWorker' in navigator) {
-    console.log('Registering service worker'); // Debugging
-    navigator.serviceWorker.register('/static/js/sw.js')
-      .then(reg => console.log('✅ Service Worker Registered', reg))
-      .catch(err => console.error('❌ Service Worker registration failed', err));
-  }
+    // Service Worker for PWA
+    if ('serviceWorker' in navigator) {
+      console.log('Registering service worker'); // Debugging
+      navigator.serviceWorker.register('/static/js/sw.js')
+        .then(reg => console.log('✅ Service Worker Registered', reg))
+        .catch(err => console.error('❌ Service Worker registration failed', err));
+    }
 
-  // Handle PWA install prompt
-  let deferredPrompt;
-  window.addEventListener('beforeinstallprompt', (e) => {
-    console.log('Before install prompt triggered'); // Debugging
-    e.preventDefault();
-    deferredPrompt = e;
-    const installBtn = document.getElementById('installAppBtn');
-    if (installBtn) {
-      installBtn.style.display = 'block';
-      installBtn.addEventListener('click', () => {
-        console.log('Install button clicked'); // Debugging
-        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;
+    // Handle PWA install prompt
+    let deferredPrompt;
+    window.addEventListener('beforeinstallprompt', (e) => {
+      console.log('Before install prompt triggered'); // Debugging
+      e.preventDefault();
+      deferredPrompt = e;
+      const installBtn = document.getElementById('installAppBtn');
+      if (installBtn) {
+        installBtn.style.display = 'block';
+        installBtn.addEventListener('click', () => {
+          console.log('Install button clicked'); // Debugging
+          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;
+          });
         });
-      });
-    }
-  });
-</script>
-  
+      }
+    });
+  </script>
+
 </body>
+
 </html>