add chat

static/css/chat/style.css

@@ -44,10 +44,11 @@ html {
   word-wrap: break-word;
   word-break: break-word;
   max-width: 100%;
+  opacity: 1 !important; /* إضافة لضمان الظهور */
 }
 
 #chatBox {
-  display: flex; /* غير display: none إلى flex ليظهر */
+  display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
@@ -58,4 +59,5 @@ html {
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
-}
+  opacity: 1 !important; /* إضافة لضمان الظهور */
+}

static/js/chat.js

@@ -47,6 +47,7 @@ let audioChunks = [];
 let streamMsg = null;
 let currentAssistantText = '';
 let isSidebarOpen = window.innerWidth >= 768;
+let abortController = null;
 
 // Initialize AOS and load initial conversation
 document.addEventListener('DOMContentLoaded', async () => {
@@ -69,6 +70,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     });
   } else {
     console.log('No conversation history or ID, starting fresh');
+    enterChatView(); // تأكيد إظهار المحادثة حتى لو فارغة
   }
 
   autoResizeTextarea();
@@ -161,7 +163,7 @@ function renderMarkdown(el) {
     });
   }
   el.style.display = 'block'; // إجبار عرض الفقاعة
-} 
+}
 
 // Toggle chat view
 function enterChatView() {
@@ -174,8 +176,8 @@ function enterChatView() {
   }
   if (uiElements.chatArea) {
     uiElements.chatArea.classList.remove('hidden');
-    uiElements.chatArea.style.display = 'flex'; // إجبار العرض
-    uiElements.chatArea.style.opacity = '1'; // إضافة الشفافية للتأكد
+    uiElements.chatArea.style.display = 'flex';
+    uiElements.chatArea.style.opacity = '1';
   }
   if (uiElements.chatBox) {
     uiElements.chatBox.classList.remove('hidden');
@@ -183,7 +185,12 @@ function enterChatView() {
     uiElements.chatBox.style.opacity = '1';
   }
   if (uiElements.initialContent) uiElements.initialContent.classList.add('hidden');
+  if (uiElements.form) {
+    uiElements.form.classList.remove('hidden');
+    uiElements.form.style.display = 'flex';
+  }
 }
+
 // Toggle home view
 function leaveChatView() {
   if (uiElements.chatHeader) {
@@ -192,6 +199,7 @@ function leaveChatView() {
   }
   if (uiElements.chatBox) uiElements.chatBox.classList.add('hidden');
   if (uiElements.initialContent) uiElements.initialContent.classList.remove('hidden');
+  if (uiElements.form) uiElements.form.classList.add('hidden');
 }
 
 // Add chat bubble
@@ -204,7 +212,7 @@ function addMsg(who, text) {
   div.style.display = 'block';
   if (uiElements.chatBox) {
     uiElements.chatBox.appendChild(div);
-    uiElements.chatBox.classList.remove('hidden');
+    uiElements.chatBox.scrollTop = uiElements.chatBox.scrollHeight; // تمرير تلقائي
   } else {
     console.error('chatBox is not found in DOM');
   }
@@ -232,7 +240,7 @@ function clearAllMessages() {
   currentConversationId = null;
   currentConversationTitle = null;
   if (uiElements.conversationTitle) uiElements.conversationTitle.textContent = 'MGZon AI Assistant';
-  enterChatView();
+  enterChatView(); // تأكيد إظهار المحادثة بعد المسح
   autoResizeTextarea();
 }
 
@@ -330,9 +338,7 @@ async function submitAudioMessage(formData) {
 
   try {
     const response = await sendRequest('/api/audio-transcription', formData);
-    if (!response.ok) {
-      throw new Error(`Request failed with status ${response.status}`);
-    }
+    if (!response.ok) throw new Error(`Request failed with status ${response.status}`);
     const data = await response.json();
     if (!data.transcription) throw new Error('No transcription received from server');
     const transcription = data.transcription || 'Error: No transcription generated.';
@@ -412,8 +418,12 @@ function finalizeRequest() {
   streamMsg = null;
   isRequestActive = false;
   abortController = null;
-  if (uiElements.sendBtn) uiElements.sendBtn.style.display = 'inline-flex';
+  if (uiElements.sendBtn) {
+    uiElements.sendBtn.style.display = 'inline-flex';
+    uiElements.sendBtn.disabled = false;
+  }
   if (uiElements.stopBtn) uiElements.stopBtn.style.display = 'none';
+  updateSendButtonState();
 }
 
 // Helper to handle request errors
@@ -437,8 +447,12 @@ function handleRequestError(error) {
   if (!(checkAuth())) {
     sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
   }
-  if (uiElements.sendBtn) uiElements.sendBtn.style.display = 'inline-flex';
+  if (uiElements.sendBtn) {
+    uiElements.sendBtn.style.display = 'inline-flex';
+    uiElements.sendBtn.disabled = false;
+  }
   if (uiElements.stopBtn) uiElements.stopBtn.style.display = 'none';
+  enterChatView(); // إعادة إظهار المحادثة بعد الخطأ
 }
 
 // Load conversations for sidebar
@@ -689,6 +703,8 @@ async function submitMessage() {
   // إظهار واجهة المحادثة عند أول رسالة
   if (uiElements.initialContent && !uiElements.initialContent.classList.contains('hidden')) {
     enterChatView();
+  } else {
+    enterChatView(); // تأكيد إظهار المحادثة في كل مرة
   }
 
   if (uiElements.fileInput?.files.length > 0) {
@@ -725,12 +741,12 @@ async function submitMessage() {
     headers['Content-Type'] = 'application/json';
   }
 
-  addMsg('user', message); // أضف رسالة المستخدم
+  addMsg('user', message);
   if (!(await checkAuth())) {
     conversationHistory.push({ role: 'user', content: message });
     sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
   }
-  streamMsg = addMsg('assistant', ''); // أضف رسالة المساعد الفارغة
+  streamMsg = addMsg('assistant', '');
   const loadingEl = document.createElement('span');
   loadingEl.className = 'loading';
   streamMsg.appendChild(loadingEl);
@@ -750,48 +766,48 @@ async function submitMessage() {
       const data = await response.json();
       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();
-    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;
-      history.pushState(null, '', `/chat/${currentConversationId}`);
-      await loadConversations();
-    }
-  } else {
-    const reader = response.body.getReader();
-    const decoder = new TextDecoder();
-    let buffer = '';
-    streamMsg.dataset.text = '';
-    streamMsg.querySelector('.loading')?.remove();
-
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) {
-        if (!buffer.trim()) throw new Error('Empty response from server');
-        break;
-      }
-      const chunk = decoder.decode(value, { stream: true });
-      buffer += chunk;
-      console.log('Received chunk:', chunk);
-
-      if (streamMsg) {
-        streamMsg.dataset.text = buffer;
-        currentAssistantText = buffer;
-        renderMarkdown(streamMsg);
-        streamMsg.style.opacity = '1'; // إجبار الظهور
-        if (uiElements.chatBox) {
-          uiElements.chatBox.style.display = 'flex';
-          uiElements.chatBox.scrollTop = uiElements.chatBox.scrollHeight; // تمرير إجباري
+      const contentType = response.headers.get('Content-Type');
+      if (contentType?.includes('application/json')) {
+        const data = await response.json();
+        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;
+          history.pushState(null, '', `/chat/${currentConversationId}`);
+          await loadConversations();
         }
+      } else {
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        streamMsg.dataset.text = '';
+        streamMsg.querySelector('.loading')?.remove();
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            if (!buffer.trim()) throw new Error('Empty response from server');
+            break;
+          }
+          const chunk = decoder.decode(value, { stream: true });
+          buffer += chunk;
+          console.log('Received chunk:', chunk);
+
+          if (streamMsg) {
+            streamMsg.dataset.text = buffer;
+            currentAssistantText = buffer;
+            renderMarkdown(streamMsg);
+            streamMsg.style.opacity = '1';
+            if (uiElements.chatBox) {
+              uiElements.chatBox.style.display = 'flex';
+              uiElements.chatBox.scrollTop = uiElements.chatBox.scrollHeight;
+            }
+          }
+        }
+        responseText = buffer;
       }
     }
-    responseText = buffer;
-  }
-}
 
     if (streamMsg) {
       streamMsg.dataset.text = responseText;
@@ -827,6 +843,7 @@ function stopStream(forceCancel = false) {
   if (uiElements.stopBtn) uiElements.stopBtn.style.display = 'none';
   if (uiElements.sendBtn) uiElements.sendBtn.style.display = 'inline-flex';
   if (uiElements.stopBtn) uiElements.stopBtn.style.pointerEvents = 'auto';
+  enterChatView(); // إعادة إظهار المحادثة بعد الإلغاء
 }
 
 // Logout handler
@@ -1074,8 +1091,6 @@ if (uiElements.newConversationBtn) {
   });
 }
 
-
-
 // Debug localStorage
 const originalRemoveItem = localStorage.removeItem;
 localStorage.removeItem = function (key) {
@@ -1102,7 +1117,7 @@ function autoResizeTextarea() {
   if (uiElements.input) {
     uiElements.input.style.height = 'auto';
     uiElements.input.style.height = `${uiElements.input.scrollHeight}px`;
-    updateSendButtonState(); // تحديث حالة الزر بعد تغيير الحجم
+    updateSendButtonState();
   }
 }
 

templates/chat.html

@@ -3,12 +3,9 @@
 
 <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>
@@ -17,30 +14,20 @@
   <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: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">
   {
     "@context": "https://schema.org",
@@ -50,29 +37,21 @@
     "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://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" />
@@ -95,7 +74,6 @@
   <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">
@@ -104,8 +82,7 @@
 
 <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" />
@@ -121,8 +98,7 @@
       <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
@@ -130,56 +106,41 @@
         </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>
-          <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>
+          <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>
@@ -187,10 +148,8 @@
         {% 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>
@@ -202,18 +161,14 @@
         <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>
@@ -239,8 +194,7 @@
       </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" />
@@ -253,7 +207,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">
+      <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>
@@ -265,9 +219,7 @@
         <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>
@@ -292,53 +244,49 @@
           </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 overflow-y-auto hidden" aria-live="polite">
-        <div id="chatBox" class="flex flex-col w-full" aria-live="polite"></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>
-  <!-- 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">
@@ -379,8 +327,7 @@
         </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>
@@ -403,86 +350,108 @@
   <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">
+  <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>
+    <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>
+<!-- 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();
+<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 %}
+  // تمرير 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);
-        });
-    }
+  // تسجيل 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;
-          });
+  // التعامل مع حدث 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>
+  // 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');
+  }
 
-</body>
+  // 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>