Spaces:

MGZON
/

mgzon-app

Running

App Files Files Community

Mark-Lasfar commited on Sep 17

Commit

0644199

1 Parent(s): 4b15bb2

add chat

Browse files

Files changed (1) hide show

templates/chat.html +188 -157

templates/chat.html CHANGED Viewed

@@ -3,9 +3,12 @@
 <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="author" content="Mark Al-Asfar" />
   <meta name="robots" content="index, follow" />
   <title>MGZon Chatbot – AI Assistant</title>
@@ -14,20 +17,30 @@
   <link rel="apple-touch-icon" href="/static/images/mg.svg" />
   <!-- Open Graph -->
   <meta property="og:title" content="MGZon Chatbot – AI Assistant" />
   <link rel="manifest" href="/static/manifest.json">
   <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">
   <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:image" content="/static/images/mg.svg" />
   <meta property="og:url" content="https://mgzon-mgzon-app.hf.space/chat" />
   <meta property="og:type" content="website" />
   <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:image" content="/static/images/mg.svg" />
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",
@@ -37,21 +50,29 @@
     "description": "An AI-powered chatbot for coding, analysis, and e-commerce queries."
   }
   </script>
   <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://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" />
   <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" />
   <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.css" />
   <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
   <link rel="stylesheet" href="/static/css/animation/style.css" />
   <link rel="stylesheet" href="/static/css/button.css" />
   <link rel="stylesheet" href="/static/css/chat/bubble.css" />
@@ -74,6 +95,7 @@
   <link rel="stylesheet" href="/static/css/style.css" />
   <link rel="stylesheet" href="/static/css/webkit.css" />
   <link rel="stylesheet" href="/static/css/sidebar.css" />
   <link rel="preload" href="/static/js/chat.js" as="script">
   <link rel="preload" href="/static/css/chat/style.css" as="style">
   <link rel="preload" href="/static/images/mg.svg" as="image">
@@ -82,7 +104,8 @@
 <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">
     <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" />
@@ -98,7 +121,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">
               <path d="M3 11.5L12 4l9 7.5M5 21V11.5h14V21"></path>
             </svg>
             Home
@@ -106,41 +130,56 @@
         </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>
             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>
             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>
             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>
             </svg>
             Settings
           </button>
         </li>
         <li>
-          <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
           </button>
@@ -148,8 +187,10 @@
         {% 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>
             Login
           </a>
@@ -161,14 +202,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">
               <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>
           </svg>
           Show History
         </button>
@@ -194,7 +239,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">
             <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" />
@@ -207,7 +253,7 @@
     <!-- Chat Area -->
     <main class="flex-1 flex flex-col">
-      <div id="initialContent" class="flex flex-col items-center justify-center text-center h-full show">
         <div class="title mb-4 gradient-text text-3xl font-bold">
           How can I help you today?
         </div>
@@ -219,7 +265,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" />
               <circle cx="12" cy="12" r="4" stroke-width="2" />
             </svg>
             <span>What's the capital of France?</span>
@@ -244,49 +292,53 @@
           </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.
         </div>
       </div>
-      <div id="chatArea" class="flex-1 overflow-y-auto hide">
-        <div id="chatBox" class="flex flex-col w-full"></div>
-        <!-- Footer Form moved inside chatArea -->
-        <form id="footerForm" class="flex p-4">
-          <div id="inputContainer" class="w-full">
-            <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">
-                  <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">
-                  <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">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7-7 7M3 12h11" />
-                </svg>
-              </button>
-              <button id="stopBtn" class="icon-btn" aria-label="Stop" title="Stop" style="display: none;">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
-                  <rect x="6" y="6" width="12" height="12" rx="2" fill="white" />
-                </svg>
-              </button>
-            </div>
-          </div>
-          <div id="filePreview" class="upload-preview" style="display: none;"></div>
-          <div id="audioPreview" class="audio-preview" style="display: none;"></div>
-        </form>
       </div>
-    </main>
   </div>
   <!-- Settings Modal -->
   <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
@@ -327,7 +379,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>
         </div>
         <div>
           <label for="conversation_style" class="block text-sm text-gray-300">Conversation Style</label>
@@ -350,108 +403,86 @@
   <div class="text-center text-xs text-gray-400 py-2">
     © 2025 Mark Al-Asfar & MGZon AI. All rights reserved.
   </div>
   <!-- Install Button -->
-  <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>
   <!-- PWA Install Instructions -->
   <div id="pwa-instructions" class="fixed bottom-4 left-4 right-4 bg-blue-600 text-white p-4 rounded-lg z-50 hidden">
-    <p><strong>Add to Home Screen:</strong> Tap the share button in your browser, then "Add to Home Screen" for a native-like experience!</p>
-    <button onclick="document.getElementById('pwa-instructions').classList.add('hidden')" class="ml-2 text-sm">Close</button>
   </div>
-</div>
-<!-- Scripts -->
-<script src="/static/js/chat.js?v=1.2"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-<script>
-  // تهيئة مكتبة AOS
-  AOS.init();
-  // تمرير conversation_id و conversation_title إذا كانا موجودين
-  {% if conversation_id %}
-  window.conversationId = "{{ conversation_id }}";
-  window.conversationTitle = "{{ conversation_title }}";
-  if (window.loadConversation) {
-    window.loadConversation("{{ conversation_id }}");
-  }
-  {% 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);
-      });
-  }
-  // التعامل مع حدث 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;
         });
-      });
     }
-  });
-  // Show PWA instructions on first visit
-  if (localStorage.getItem('pwa-instructions-shown') !== 'true') {
-    document.getElementById('pwa-instructions').classList.remove('hidden');
-    localStorage.setItem('pwa-instructions-shown', 'true');
-  }
-  // Enhance touch gestures for sidebar
-  const sidebar = document.getElementById('sidebar');
-  const hammer = new Hammer(sidebar);
-  hammer.on('swipeleft', () => {
-    sidebar.classList.remove('open');
-  });
-  hammer.on('swiperight', () => {
-    sidebar.classList.add('open');
-  });
-</script>
-<style>
-  .show {
-    display: flex;
-    opacity: 1;
-    transition: opacity 0.3s ease-in-out;
-  }
-  .hide {
-    display: none;
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
-  }
-  #chatArea.show {
-    display: flex;
-    opacity: 1;
-  }
-  #initialContent.hide {
-    display: none;
-    opacity: 0;
-  }
-  #footerForm {
-    display: flex !important;
-    opacity: 1 !important;
-  }
-</style>
 </body>
 </html>

 <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="author" content="Mark Al-Asfar" />
   <meta name="robots" content="index, follow" />
   <title>MGZon Chatbot – AI Assistant</title>
   <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">
+  <!-- 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">
+  <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:image" content="/static/images/mg.svg" />
+  <!-- JSON-LD -->
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",
     "description": "An AI-powered chatbot for coding, analysis, and e-commerce queries."
   }
   </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://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
   <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Markdown & Syntax Highlight -->
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+  <!-- Animations -->
   <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" />
+  <!-- Carousel -->
   <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" />
+  <!-- Smooth Scroll -->
   <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.css" />
+  <!-- Hammer.js for touch gestures -->
   <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
+  <!-- Project-Specific Styles -->
   <link rel="stylesheet" href="/static/css/animation/style.css" />
   <link rel="stylesheet" href="/static/css/button.css" />
   <link rel="stylesheet" href="/static/css/chat/bubble.css" />
   <link rel="stylesheet" href="/static/css/style.css" />
   <link rel="stylesheet" href="/static/css/webkit.css" />
   <link rel="stylesheet" href="/static/css/sidebar.css" />
+  <!-- Preload Resources -->
   <link rel="preload" href="/static/js/chat.js" as="script">
   <link rel="preload" href="/static/css/chat/style.css" as="style">
   <link rel="preload" href="/static/images/mg.svg" as="image">
 <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">
     <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" />
       <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">
               <path d="M3 11.5L12 4l9 7.5M5 21V11.5h14V21"></path>
             </svg>
             Home
         </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>
             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>
             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>
             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>
             </svg>
             Settings
           </button>
         </li>
         <li>
+          <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
           </button>
         {% 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>
             Login
           </a>
         <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">
               <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>
           </svg>
           Show History
         </button>
       </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">
             <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" />
     <!-- Chat Area -->
     <main class="flex-1 flex flex-col">
+      <div id="initialContent" class="flex flex-col items-center justify-center text-center h-full">
         <div class="title mb-4 gradient-text text-3xl font-bold">
           How can I help you today?
         </div>
         <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" />
               <circle cx="12" cy="12" r="4" stroke-width="2" />
             </svg>
             <span>What's the capital of France?</span>
           </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.
         </div>
       </div>
+<div id="chatArea" class="flex-1 overflow-y-auto hidden" aria-live="polite">
+  <div id="chatBox" class="flex flex-col w-full" aria-live="polite"></div>
       </div>
   </div>
+  <!-- Footer Form -->
+  <form id="footerForm" class="flex p-4">
+    <div id="inputContainer" class="w-full">
+      <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">
+            <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">
+            <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">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7-7 7M3 12h11" />
+          </svg>
+        </button>
+        <button id="stopBtn" class="icon-btn" aria-label="Stop" title="Stop" style="display: none;">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
+            <rect x="6" y="6" width="12" height="12" rx="2" fill="white" />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div id="filePreview" class="upload-preview" style="display: none;"></div>
+    <div id="audioPreview" class="audio-preview" style="display: none;"></div>
+  </form>
+  </main>
   <!-- Settings Modal -->
   <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
         </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>
         </div>
         <div>
           <label for="conversation_style" class="block text-sm text-gray-300">Conversation Style</label>
   <div class="text-center text-xs text-gray-400 py-2">
     © 2025 Mark Al-Asfar & MGZon AI. All rights reserved.
   </div>
   <!-- Install Button -->
+  <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>
   <!-- PWA Install Instructions -->
   <div id="pwa-instructions" class="fixed bottom-4 left-4 right-4 bg-blue-600 text-white p-4 rounded-lg z-50 hidden">
+    <p><strong>Add to Home Screen:</strong> Tap the share button in your browser, then "Add to Home Screen" for a
+      native-like experience!</p>
+    <button onclick="document.getElementById('pwa-instructions').classList.add('hidden')"
+      class="ml-2 text-sm">Close</button>
+  </div>
   </div>
+  <!-- Scripts -->
+  <script src="/static/js/chat.js?v=1.2"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <script>
+    // تهيئة مكتبة AOS
+    AOS.init();
+    // تمرير conversation_id و conversation_title إذا كانا موجودين
+    {% if conversation_id %}
+    window.conversationId = "{{ conversation_id }}";
+    window.conversationTitle = "{{ conversation_title }}";
+    if (window.loadConversation) {
+      window.loadConversation("{{ conversation_id }}");
+    }
+    {% 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);
         });
     }
+    // التعامل مع حدث 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;
+          });
+        });
+      }
+    });
+    // Show PWA instructions on first visit
+    if (localStorage.getItem('pwa-instructions-shown') !== 'true') {
+      document.getElementById('pwa-instructions').classList.remove('hidden');
+      localStorage.setItem('pwa-instructions-shown', 'true');
+    }
+    // Enhance touch gestures for sidebar
+    const sidebar = document.getElementById('sidebar');
+    const hammer = new Hammer(sidebar);
+    hammer.on('swipeleft', () => {
+      sidebar.classList.remove('open');
+    });
+    hammer.on('swiperight', () => {
+      sidebar.classList.add('open');
+    });
+  </script>
 </body>
 </html>