Fix footer position, prompts size, flexible textarea, send button, prompts refresh, and add voice recording

static/css/button.css

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-#sendBtn, #stopBtn {
+#sendBtn, #stopBtn, #voiceBtn, #fileBtn, #audioBtn {
   width: 2.75rem;
   height: 2.75rem;
   border: none;
@@ -53,6 +53,39 @@
   transform: translateY(0) scale(0.98);
 }
 
+#voiceBtn {
+  background: linear-gradient(135deg, #10b981, #059669);
+  color: white;
+}
+
+#voiceBtn.recording {
+  background: linear-gradient(135deg, #f87171, #ef4444);
+  transform: scale(1.1);
+}
+
+#voiceBtn:hover:not(.recording) {
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
+}
+
+#voiceBtn:active:not(.recording) {
+  transform: translateY(0) scale(0.98);
+}
+
+#fileBtn, #audioBtn {
+  background: linear-gradient(135deg, #6b7280, #4b5563);
+  color: white;
+}
+
+#fileBtn:hover, #audioBtn:hover {
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 4px 8px rgba(107, 114, 128, 0.3);
+}
+
+#fileBtn:active, #audioBtn:active {
+  transform: translateY(0) scale(0.98);
+}
+
 #sendIcon {
   width: 1.25rem;
   height: 1.25rem;
@@ -62,4 +95,4 @@
 
 #sendBtn:hover:not(:disabled) #sendIcon {
   transform: translateX(2px);
-}
+}

static/css/footer.css

@@ -6,16 +6,27 @@
 #footerForm {
   display: flex;
   gap: 0.75rem;
-  background-color: transparent;
+  background: transparent;
   align-items: center;
   width: 100%;
-  max-width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0.5rem 1rem;
   box-sizing: border-box;
-  position: fixed;
-  bottom: 5rem;
-  left: 0;
-  right: 0;
+  position: sticky;
+  bottom: 0;
   z-index: 1000;
-  animation: slideInUp 0.3s ease-out forwards;
-  height: 0;
-}
+  animation: fadeIn 0.3s ease-out forwards;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 768px) {
+  #footerForm {
+    max-width: 100%;
+    padding: 0.5rem;
+  }
+}

static/css/input.css

@@ -8,12 +8,14 @@
   align-items: center;
   flex: 1;
   background: linear-gradient(145deg, #1a1a1a, #141414);
-  border-radius: 2rem;
+  border-radius: 1rem;
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 0.25rem;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  max-width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
 }
 
 #inputContainer:focus-within {
@@ -25,8 +27,8 @@
 
 #userInput {
   flex: 1;
-  padding: 0.75rem 0.75rem;
-  border-radius: 2rem;
+  padding: 0.75rem 3rem 0.75rem 0.75rem;
+  border-radius: 1rem;
   border: 1px solid transparent;
   background-color: transparent;
   color: #e0e0e0;
@@ -35,7 +37,25 @@
   transition: border-color 0.2s, background-color 0.2s;
   word-break: break-word;
   overflow-wrap: break-word;
-  max-width: 100%;
-  min-width: 0;
+  min-height: 40px;
+  max-height: 120px;
+  resize: vertical;
   font-family: 'Inter', sans-serif;
-}
+}
+
+#rightIconGroup {
+  position: absolute;
+  right: 0.5rem;
+  display: flex;
+  gap: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  #inputContainer {
+    max-width: 100%;
+    padding: 0.25rem 0.5rem;
+  }
+  #userInput {
+    padding: 0.5rem 2.5rem 0.5rem 0.5rem;
+  }
+}

static/css/prompts.css

@@ -5,29 +5,31 @@
 
 .prompts {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.75rem;
   width: 100%;
-  max-width: 100%;
-  margin-bottom: 1.5rem;
+  max-width: 600px;
+  margin: 0 auto 2rem auto;
 }
 
 .prompt-item {
   background: linear-gradient(145deg, #1a1a1a, #141414);
-  padding: 1rem 1.25rem;
-  border-radius: var(--prompt-radius);
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
   display: flex;
   align-items: center;
-  gap: 0.8rem;
+  gap: 0.5rem;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   word-break: break-word;
   overflow-wrap: break-word;
   border: 1px solid rgba(255, 255, 255, 0.05);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   animation: fadeIn 0.5s ease-out forwards;
   transform: translateY(20px);
   opacity: 0;
+  font-size: 0.9rem;
+  color: #fff;
 }
 
 .prompt-item:nth-child(1) { animation-delay: 0.1s; }
@@ -37,10 +39,23 @@
 
 .prompt-item:hover {
   background: linear-gradient(145deg, #1f1f1f, #1a1a1a);
-  transform: translateY(-3px) scale(1.02);
-  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 .prompt-item:active {
   transform: translateY(0) scale(0.98);
-}
+}
+
+.prompt-item .icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  .prompts {
+    grid-template-columns: 1fr;
+    max-width: 100%;
+  }
+}

static/css/styles.css

@@ -1,241 +1,259 @@
+/*
+ * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 body {
-    font-family: 'Arial', sans-serif;
-    margin: 0;
-    padding: 0;
-    background: linear-gradient(45deg, #1e3c72, #2a5298, #ff6f61, #1e3c72);
-    background-size: 400% 400%;
-    animation: gradient 15s ease infinite;
-    color: #fff;
-    min-height: 100vh;
-    display: flex;
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(135deg, #0f172a, #0e7490, #065f46, #064e3b);
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+  color: #fff;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 @keyframes gradient {
-    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%; }
 }
 
 .sidebar {
-    width: 250px;
-    background: rgba(0, 0, 0, 0.8);
-    padding: 20px;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  width: 250px;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 20px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .sidebar-logo {
-    width: 80px;
-    height: 80px;
-    margin-bottom: 20px;
-    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
+  width: 80px;
+  height: 80px;
+  margin-bottom: 20px;
+  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
 }
 
 .sidebar nav {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .sidebar nav a {
-    color: #fff;
-    text-decoration: none;
-    padding: 10px;
-    border-radius: 5px;
-    transition: background 0.3s;
+  color: #fff;
+  text-decoration: none;
+  padding: 10px;
+  border-radius: 5px;
+  transition: background 0.3s;
 }
 
 .sidebar nav a:hover, .sidebar nav a.active {
-    background: #ff6f61;
+  background: #ff6f61;
 }
 
 .container {
-    max-width: 1200px;
-    margin-left: 270px;
-    padding: 20px;
-    flex: 1;
+  max-width: 1200px;
+  margin-left: 270px;
+  padding: 20px;
+  flex: 1;
 }
 
 .logo {
-    width: 120px;
-    height: 120px;
-    margin-bottom: 20px;
-    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
+  width: 120px;
+  height: 120px;
+  margin-bottom: 20px;
+  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
 }
 
 h1 {
-    font-size: 3.5rem;
-    margin-bottom: 20px;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-    animation: fadeIn 1s ease-in-out;
+  font-size: 3.5rem;
+  margin-bottom: 20px;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+  animation: fadeIn 1s ease-in-out;
 }
 
 p {
-    font-size: 1.2rem;
-    line-height: 1.6;
-    margin-bottom: 30px;
+  font-size: 1.2rem;
+  line-height: 1.6;
+  margin-bottom: 30px;
 }
 
 .btn {
-    display: inline-block;
-    padding: 15px 30px;
-    background: linear-gradient(45deg, #ff6f61, #e55a50);
-    color: #fff;
-    text-decoration: none;
-    border-radius: 25px;
-    font-size: 1.1rem;
-    transition: transform 0.3s, box-shadow 0.3s;
+  display: inline-block;
+  padding: 15px 30px;
+  background: linear-gradient(45deg, #ff6f61, #e55a50);
+  color: #fff;
+  text-decoration: none;
+  border-radius: 25px;
+  font-size: 1.1rem;
+  transition: transform 0.3s, box-shadow 0.3s;
 }
 
 .btn:hover {
-    transform: scale(1.1);
-    box-shadow: 0 4px 15px rgba(255, 111, 97, 0.5);
+  transform: scale(1.1);
+  box-shadow: 0 4px 15px rgba(255, 111, 97, 0.5);
 }
 
 .features, .docs, .news {
-    margin-top: 40px;
-    text-align: left;
+  margin-top: 40px;
+  text-align: left;
 }
 
 .features h2, .docs h2, .news h2 {
-    font-size: 2rem;
-    margin-bottom: 20px;
-    text-align: center;
-    color: #fff;
+  font-size: 2rem;
+  margin-bottom: 20px;
+  text-align: center;
+  color: #fff;
 }
 
 .feature-grid, .footer-grid, .news-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
 }
 
 .feature-card, .footer-card, .news-card {
-    background: rgba(255, 255, 255, 0.1);
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
-    text-align: center;
-    aspect-ratio: 1/1;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
+  text-align: center;
+  aspect-ratio: 1/1;
 }
 
 .feature-card:hover, .footer-card:hover, .news-card:hover {
-    transform: scale(1.05);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-    background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.05);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .feature-card i, .footer-card i {
-    font-size: 2.5rem;
-    margin-bottom: 10px;
-    color: #ff6f61;
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+  color: #ff6f61;
 }
 
 .news-card a {
-    color: #ff6f61;
-    text-decoration: none;
-    font-weight: bold;
+  color: #ff6f61;
+  text-decoration: none;
+  font-weight: bold;
 }
 
 .news-card a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 .code-block {
-    position: relative;
-    margin-bottom: 20px;
-    background: #1a1a1a;
-    padding: 20px;
-    border-radius: 10px;
+  position: relative;
+  margin-bottom: 20px;
+  background: #1a1a1a;
+  padding: 20px;
+  border-radius: 10px;
 }
 
 .code-block h3 {
-    color: #ff6f61;
-    margin-bottom: 10px;
+  color: #ff6f61;
+  margin-bottom: 10px;
 }
 
 .code-block pre {
-    background: transparent;
-    padding: 0;
-    color: #c9e4ca;
-    font-family: 'Courier New', monospace;
-    overflow-x: auto;
+  background: transparent;
+  padding: 0;
+  color: #c9e4ca;
+  font-family: 'Courier New', monospace;
+  overflow-x: auto;
 }
 
 .copy-btn {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 5px 10px;
-    background: #ff6f61;
-    color: #fff;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background 0.3s;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px 10px;
+  background: #ff6f61;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background 0.3s;
 }
 
 .copy-btn:hover {
-    background: #e55a50;
+  background: #e55a50;
+}
+
+main {
+  flex: 1 0 auto;
 }
 
 footer {
-    background: linear-gradient(270deg, #1f2937, #111827, #1f2937);
-    background-size: 200% 200%;
-    animation: gradient 15s ease infinite;
-    padding: 40px 20px;
-    margin-top: 40px;
+  flex-shrink: 0;
+  position: sticky;
+  bottom: 0;
+  width: 100%;
+  padding: 1rem 0;
+  background: linear-gradient(270deg, #1f2937, #111827, #1f2937);
+  background-size: 200% 200%;
+  animation: gradient 15s ease infinite;
+}
+
+footer .container {
+  max-width: 1200px;
+  padding: 0 1rem;
+  margin: 0 auto;
 }
 
-.footer-container {
-    max-width: 1200px;
-    margin: auto;
-    text-align: center;
+footer .grid {
+  gap: 1rem;
+}
+
+footer .glass {
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 8px;
+}
+
+footer .glass h4 {
+  font-size: 1rem;
+}
+
+footer .glass p {
+  font-size: 0.875rem;
+}
+
+footer .glass .bx {
+  font-size: 1.5rem;
 }
 
 .footer-logo {
-    width: 100px;
-    height: 100px;
-    margin-bottom: 20px;
-    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
+  width: 100px;
+  height: 100px;
+  margin-bottom: 20px;
+  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
 }
 
 .footer-social a {
-    font-size: 1.8rem;
-    color: #fff;
-    margin: 0 15px;
-    transition: color 0.3s, transform 0.3s;
+  font-size: 1.8rem;
+  color: #fff;
+  margin: 0 15px;
+  transition: color 0.3s, transform 0.3s;
 }
 
 .footer-social a:hover {
-    color: #ff6f61;
-    transform: scale(1.2);
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
+  color: #ff6f61;
+  transform: scale(1.2);
 }
 
-@media (max-width: 768px) {
-    .sidebar {
-        width: 100%;
-        height: auto;
-        position: static;
-        padding: 10px;
-    }
-    .container {
-        margin-left: 0;
-    }
-}
-
-/* /static/css/style.css */
 .chat-title {
   font-weight: 700;
   font-size: 1.2rem;
@@ -255,7 +273,7 @@ footer {
   align-items: center;
   gap: 0.5rem;
   padding: 10px;
-  background: #ffffff;
+  background: rgba(255, 255, 255, 0.1);
   border-radius: 50px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 }
@@ -264,11 +282,9 @@ footer {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 70vh;
   max-width: 800px;
   margin: 0 auto;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: #f5f7fa;
+  font-family: 'Inter', sans-serif;
 }
 
 #chatArea {
@@ -278,25 +294,18 @@ footer {
   overflow-y: auto;
   width: 100%;
   box-sizing: border-box;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-  padding: 20px;
-  background: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  padding: 1rem;
+  background: transparent;
 }
 
 #chatBox {
   display: flex;
   flex-direction: column;
   width: 100%;
-  overflow-y: auto;
-  padding: 0.75rem 0.75rem calc(var(--footer-height) + 1rem) 1rem;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0.75rem;
   box-sizing: border-box;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
 }
 
 .bubble {
@@ -304,6 +313,7 @@ footer {
   padding: 10px 15px;
   border-radius: 8px;
   max-width: 80%;
+  word-break: break-word;
 }
 
 .bubble-user {
@@ -314,55 +324,10 @@ footer {
 }
 
 .bubble-assist {
-  background: #f1f0f0;
+  background: rgba(255, 255, 255, 0.1);
   margin-right: 20%;
   border-radius: 8px 8px 8px 0;
-}
-
-#inputContainer {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  background: #ffffff;
-  border: 1px solid #e0e0e0;
-  border-radius: 50px;
-  padding: 10px;
-  margin: 20px 0;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-}
-
-#userInput {
-  flex-grow: 1;
-  border: none;
-  outline: none;
-  font-size: 16px;
-  padding: 12px 15px;
-  background: transparent;
-}
-
-#rightIconGroup button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 20px;
-  padding: 10px;
-  color: #333;
-  transition: color 0.2s;
-}
-
-#rightIconGroup button:hover {
-  color: #25D366;
-}
-
-#sendBtn {
-  background: #25D366;
-  color: white;
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  color: #fff;
 }
 
 .upload-preview {
@@ -403,7 +368,7 @@ footer {
 }
 
 .md-content th {
-  background: #f1f0f0;
+  background: rgba(255, 255, 255, 0.1);
 }
 
 .styled-hr {
@@ -412,3 +377,21 @@ footer {
   background: #ddd;
   margin: 20px 0;
 }
+
+@media (max-width: 768px) {
+  .sidebar {
+    width: 100%;
+    height: auto;
+    position: static;
+    padding: 10px;
+  }
+  .container {
+    margin-left: 0;
+  }
+  #chatBox {
+    max-width: 100%;
+  }
+  .bubble-user, .bubble-assist {
+    max-width: 90%;
+  }
+}

static/js/chat.js

@@ -15,6 +15,7 @@ const btn = document.getElementById('sendBtn');
 const stopBtn = document.getElementById('stopBtn');
 const fileBtn = document.getElementById('fileBtn');
 const audioBtn = document.getElementById('audioBtn');
+const voiceBtn = document.getElementById('voiceBtn');
 const fileInput = document.getElementById('fileInput');
 const audioInput = document.getElementById('audioInput');
 const filePreview = document.getElementById('filePreview');
@@ -30,360 +31,494 @@ const messageLimitWarning = document.getElementById('messageLimitWarning');
 // Track state.
 let streamMsg = null;
 let conversationHistory = JSON.parse(sessionStorage.getItem('conversationHistory') || '[]');
-let currentAssistantText = "";
+let currentAssistantText = '';
 let isRequestActive = false;
 let abortController = null;
+let mediaRecorder = null;
+let audioChunks = [];
 
 // تحميل المحادثة عند تحميل الصفحة
 document.addEventListener('DOMContentLoaded', () => {
-    AOS.init({
-        duration: 800,
-        easing: 'ease-out-cubic',
-        once: true,
-        offset: 50
+  AOS.init({
+    duration: 800,
+    easing: 'ease-out-cubic',
+    once: true,
+    offset: 50,
+  });
+  if (conversationHistory.length > 0) {
+    enterChatView();
+    conversationHistory.forEach(msg => {
+      addMsg(msg.role, msg.content);
     });
-    if (conversationHistory.length > 0) {
-        enterChatView();
-        conversationHistory.forEach(msg => {
-            addMsg(msg.role, msg.content);
-        });
-    }
+  }
 });
 
 // تحقق من الـ token
 function checkAuth() {
-    return localStorage.getItem('token');
+  return localStorage.getItem('token');
 }
 
 // Render markdown content.
 function renderMarkdown(el) {
-    const raw = el.dataset.text || "";
-    const html = marked.parse(raw, {
-        gfm: true,
-        breaks: true,
-        smartLists: true,
-        smartypants: false,
-        headerIds: false
-    });
-    el.innerHTML = '<div class="md-content">' + html + '</div>';
-    const wrapper = el.querySelector('.md-content');
-
-    // Wrap tables.
-    const tables = wrapper.querySelectorAll('table');
-    tables.forEach(t => {
-        if (t.parentNode && t.parentNode.classList && t.parentNode.classList.contains('table-wrapper')) return;
-        const div = document.createElement('div');
-        div.className = 'table-wrapper';
-        t.parentNode.insertBefore(div, t);
-        div.appendChild(t);
-    });
-
-    // Style horizontal rules.
-    const hrs = wrapper.querySelectorAll('hr');
-    hrs.forEach(h => {
-        if (!h.classList.contains('styled-hr')) {
-            h.classList.add('styled-hr');
-        }
-    });
+  const raw = el.dataset.text || '';
+  const html = marked.parse(raw, {
+    gfm: true,
+    breaks: true,
+    smartLists: true,
+    smartypants: false,
+    headerIds: false,
+  });
+  el.innerHTML = '<div class="md-content">' + html + '</div>';
+  const wrapper = el.querySelector('.md-content');
+
+  // Wrap tables.
+  const tables = wrapper.querySelectorAll('table');
+  tables.forEach(t => {
+    if (t.parentNode && t.parentNode.classList && t.parentNode.classList.contains('table-wrapper')) return;
+    const div = document.createElement('div');
+    div.className = 'table-wrapper';
+    t.parentNode.insertBefore(div, t);
+    div.appendChild(t);
+  });
+
+  // Style horizontal rules.
+  const hrs = wrapper.querySelectorAll('hr');
+  hrs.forEach(h => {
+    if (!h.classList.contains('styled-hr')) {
+      h.classList.add('styled-hr');
+    }
+  });
 
-    // Highlight code.
-    Prism.highlightAllUnder(wrapper);
+  // Highlight code.
+  Prism.highlightAllUnder(wrapper);
 }
 
 // Chat view.
 function enterChatView() {
-    mainHeader.style.display = 'none';
-    chatHeader.style.display = 'flex';
-    chatHeader.setAttribute('aria-hidden', 'false');
-    chatBox.style.display = 'flex';
-    initialContent.style.display = 'none';
+  mainHeader.style.display = 'none';
+  chatHeader.style.display = 'flex';
+  chatHeader.setAttribute('aria-hidden', 'false');
+  chatBox.style.display = 'flex';
+  initialContent.style.display = 'none';
 }
 
 // Home view.
 function leaveChatView() {
-    mainHeader.style.display = 'flex';
-    chatHeader.style.display = 'none';
-    chatHeader.setAttribute('aria-hidden', 'true');
-    chatBox.style.display = 'none';
-    initialContent.style.display = 'flex';
+  mainHeader.style.display = 'flex';
+  chatHeader.style.display = 'none';
+  chatHeader.setAttribute('aria-hidden', 'true');
+  chatBox.style.display = 'none';
+  initialContent.style.display = 'flex';
 }
 
 // Chat bubble.
 function addMsg(who, text) {
-    const div = document.createElement('div');
-    div.className = 'bubble ' + (who === 'user' ? 'bubble-user' : 'bubble-assist');
-    div.dataset.text = text;
-    renderMarkdown(div);
-    chatBox.appendChild(div);
-    chatBox.style.display = 'flex';
-    chatBox.scrollTop = chatBox.scrollHeight;
-    return div;
+  const div = document.createElement('div');
+  div.className = 'bubble ' + (who === 'user' ? 'bubble-user' : 'bubble-assist');
+  div.dataset.text = text;
+  renderMarkdown(div);
+  chatBox.appendChild(div);
+  chatBox.style.display = 'flex';
+  chatBox.scrollTop = chatBox.scrollHeight;
+  return div;
 }
 
 // Clear all chat.
 function clearAllMessages() {
-    stopStream(true);
-    conversationHistory = [];
-    sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
-    currentAssistantText = "";
-    if (streamMsg) {
-        const loadingEl = streamMsg.querySelector('.loading');
-        if (loadingEl) loadingEl.remove();
-        streamMsg = null;
-    }
-    chatBox.innerHTML = "";
-    input.value = "";
-    btn.disabled = true;
-    stopBtn.style.display = 'none';
-    btn.style.display = 'inline-flex';
-    filePreview.style.display = 'none';
-    audioPreview.style.display = 'none';
-    messageLimitWarning.classList.add('hidden');
-    enterChatView();
+  stopStream(true);
+  conversationHistory = [];
+  sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+  currentAssistantText = '';
+  if (streamMsg) {
+    const loadingEl = streamMsg.querySelector('.loading');
+    if (loadingEl) loadingEl.remove();
+    streamMsg = null;
+  }
+  chatBox.innerHTML = '';
+  input.value = '';
+  btn.disabled = true;
+  stopBtn.style.display = 'none';
+  btn.style.display = 'inline-flex';
+  filePreview.style.display = 'none';
+  audioPreview.style.display = 'none';
+  messageLimitWarning.classList.add('hidden');
+  enterChatView();
 }
 
 // File preview.
 function previewFile() {
-    if (fileInput.files.length > 0) {
-        const file = fileInput.files[0];
-        if (file.type.startsWith('image/')) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                filePreview.innerHTML = `<img src="${e.target.result}" class="upload-preview">`;
-                filePreview.style.display = 'block';
-                audioPreview.style.display = 'none';
-            };
-            reader.readAsDataURL(file);
-        }
+  if (fileInput.files.length > 0) {
+    const file = fileInput.files[0];
+    if (file.type.startsWith('image/')) {
+      const reader = new FileReader();
+      reader.onload = e => {
+        filePreview.innerHTML = `<img src="${e.target.result}" class="upload-preview">`;
+        filePreview.style.display = 'block';
+        audioPreview.style.display = 'none';
+      };
+      reader.readAsDataURL(file);
     }
-    if (audioInput.files.length > 0) {
-        const file = audioInput.files[0];
-        if (file.type.startsWith('audio/')) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                audioPreview.innerHTML = `<audio controls src="${e.target.result}"></audio>`;
-                audioPreview.style.display = 'block';
-                filePreview.style.display = 'none';
-            };
-            reader.readAsDataURL(file);
-        }
+  }
+  if (audioInput.files.length > 0) {
+    const file = audioInput.files[0];
+    if (file.type.startsWith('audio/')) {
+      const reader = new FileReader();
+      reader.onload = e => {
+        audioPreview.innerHTML = `<audio controls src="${e.target.result}"></audio>`;
+        audioPreview.style.display = 'block';
+        filePreview.style.display = 'none';
+      };
+      reader.readAsDataURL(file);
     }
+  }
 }
 
-// Send user message.
-async function submitMessage() {
-    if (isRequestActive) return;
-    let message = input.value.trim();
-    let formData = new FormData();
-    let endpoint = '/api/chat';
-    let inputType = 'text';
-    let outputFormat = 'text';
-
-    if (fileInput.files.length > 0) {
-        const file = fileInput.files[0];
-        if (file.type.startsWith('image/')) {
-            endpoint = '/api/image-analysis';
-            inputType = 'image';
-            message = 'Analyze this image';
-            formData.append('file', file);
-            formData.append('output_format', 'text');
-        }
-    } else if (audioInput.files.length > 0) {
-        const file = audioInput.files[0];
-        if (file.type.startsWith('audio/')) {
-            endpoint = '/api/audio-transcription';
-            inputType = 'audio';
-            message = 'Transcribe this audio';
-            formData.append('file', file);
-        }
-    } else if (message) {
-        formData.append('message', message);
-        formData.append('system_prompt', 'You are an expert assistant providing detailed, comprehensive, and well-structured responses.');
-        formData.append('history', JSON.stringify(conversationHistory));
-        formData.append('temperature', '0.7');
-        formData.append('max_new_tokens', '128000');
-        formData.append('enable_browsing', 'true');
-        formData.append('output_format', 'text');
-    } else {
-        return;
-    }
+// Voice recording.
+function startVoiceRecording() {
+  navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
+    mediaRecorder = new MediaRecorder(stream);
+    audioChunks = [];
+    mediaRecorder.start();
+    voiceBtn.classList.add('recording');
+    mediaRecorder.addEventListener('dataavailable', event => {
+      audioChunks.push(event.data);
+    });
+  }).catch(err => {
+    console.error('Error accessing microphone:', err);
+    alert('Failed to access microphone. Please check permissions.');
+  });
+}
 
-    enterChatView();
-    addMsg('user', message);
-    conversationHistory.push({ role: 'user', content: message });
-    sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
-    streamMsg = addMsg('assistant', '');
-    const loadingEl = document.createElement('span');
-    loadingEl.className = 'loading';
-    streamMsg.appendChild(loadingEl);
-    stopBtn.style.display = 'inline-flex';
-    btn.style.display = 'none';
-    input.value = '';
-    btn.disabled = true;
-    filePreview.style.display = 'none';
-    audioPreview.style.display = 'none';
-
-    isRequestActive = true;
-    abortController = new AbortController();
-
-    try {
-        const token = checkAuth();
-        const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            body: formData,
-            headers: headers,
-            signal: abortController.signal
-        });
-
-        if (!response.ok) {
-            if (response.status === 403) {
-                messageLimitWarning.classList.remove('hidden');
-                input.disabled = true;
-                const loadingEl = streamMsg.querySelector('.loading');
-                if (loadingEl) loadingEl.remove();
-                streamMsg = null;
-                isRequestActive = false;
-                abortController = null;
-                btn.style.display = 'inline-flex';
-                stopBtn.style.display = 'none';
-                return;
-            }
-            if (response.status === 401) {
-                localStorage.removeItem('token');
-                window.location.href = '/login';
-                return;
-            }
-            throw new Error('Request failed');
-        }
-
-        if (endpoint === '/api/audio-transcription') {
-            const data = await response.json();
-            const transcription = data.transcription || 'Error: No transcription generated.';
-            streamMsg.dataset.text = transcription;
-            renderMarkdown(streamMsg);
-            streamMsg.dataset.done = '1';
-            conversationHistory.push({ role: 'assistant', content: transcription });
-            sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
-        } else if (endpoint === '/api/image-analysis') {
-            const data = await response.json();
-            const analysis = data.image_analysis || 'Error: No analysis generated.';
-            streamMsg.dataset.text = analysis;
-            renderMarkdown(streamMsg);
-            streamMsg.dataset.done = '1';
-            conversationHistory.push({ role: 'assistant', content: analysis });
-            sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
-        } else {
-            const reader = response.body.getReader();
-            const decoder = new TextDecoder();
-            let buffer = '';
-
-            while (true) {
-                const { done, value } = await reader.read();
-                if (done) break;
-                buffer += decoder.decode(value, { stream: true });
-                streamMsg.dataset.text = buffer;
-                currentAssistantText = buffer;
-                const loadingEl = streamMsg.querySelector('.loading');
-                if (loadingEl) loadingEl.remove();
-                renderMarkdown(streamMsg);
-                chatBox.scrollTop = chatBox.scrollHeight;
-            }
-            streamMsg.dataset.done = '1';
-            conversationHistory.push({ role: 'assistant', content: buffer });
-            sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
-        }
+function stopVoiceRecording() {
+  if (mediaRecorder && mediaRecorder.state === 'recording') {
+    mediaRecorder.stop();
+    voiceBtn.classList.remove('recording');
+    mediaRecorder.addEventListener('stop', async () => {
+      const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
+      const formData = new FormData();
+      formData.append('file', audioBlob, 'voice-message.webm');
+      submitAudioMessage(formData);
+    });
+  }
+}
 
+// Send audio message.
+async function submitAudioMessage(formData) {
+  enterChatView();
+  addMsg('user', 'Voice message');
+  conversationHistory.push({ role: 'user', content: 'Voice message' });
+  sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+  streamMsg = addMsg('assistant', '');
+  const loadingEl = document.createElement('span');
+  loadingEl.className = 'loading';
+  streamMsg.appendChild(loadingEl);
+  stopBtn.style.display = 'inline-flex';
+  btn.style.display = 'none';
+  input.value = '';
+  btn.disabled = true;
+  filePreview.style.display = 'none';
+  audioPreview.style.display = 'none';
+
+  isRequestActive = true;
+  abortController = new AbortController();
+
+  try {
+    const token = checkAuth();
+    const headers = token ? { Authorization: `Bearer ${token}` } : {};
+    const response = await fetch('/api/audio-transcription', {
+      method: 'POST',
+      body: formData,
+      headers: headers,
+      signal: abortController.signal,
+    });
+
+    if (!response.ok) {
+      if (response.status === 403) {
+        messageLimitWarning.classList.remove('hidden');
+        input.disabled = true;
+        const loadingEl = streamMsg.querySelector('.loading');
+        if (loadingEl) loadingEl.remove();
         streamMsg = null;
         isRequestActive = false;
         abortController = null;
         btn.style.display = 'inline-flex';
         stopBtn.style.display = 'none';
-    } catch (error) {
-        if (streamMsg) {
-            const loadingEl = streamMsg.querySelector('.loading');
-            if (loadingEl) loadingEl.remove();
-            streamMsg.dataset.text = error.message || 'An error occurred during the request.';
-            renderMarkdown(streamMsg);
-            streamMsg.dataset.done = '1';
-            streamMsg = null;
-            isRequestActive = false;
-            abortController = null;
-        }
-        btn.style.display = 'inline-flex';
-        stopBtn.style.display = 'none';
+        window.location.href = '/login';
+        return;
+      }
+      if (response.status === 401) {
+        localStorage.removeItem('token');
+        window.location.href = '/login';
+        return;
+      }
+      throw new Error('Request failed');
     }
-}
 
-// Stop streaming and cancel the ongoing request.
-function stopStream(forceCancel = false) {
-    if (!isRequestActive) return;
+    const data = await response.json();
+    const transcription = data.transcription || 'Error: No transcription generated.';
+    streamMsg.dataset.text = transcription;
+    renderMarkdown(streamMsg);
+    streamMsg.dataset.done = '1';
+    conversationHistory.push({ role: 'assistant', content: transcription });
+    sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+
+    streamMsg = null;
     isRequestActive = false;
-    if (abortController) {
-        abortController.abort();
+    abortController = null;
+    btn.style.display = 'inline-flex';
+    stopBtn.style.display = 'none';
+  } catch (error) {
+    if (streamMsg) {
+      const loadingEl = streamMsg.querySelector('.loading');
+      if (loadingEl) loadingEl.remove();
+      streamMsg.dataset.text = error.message || 'An error occurred during the request.';
+      renderMarkdown(streamMsg);
+      streamMsg.dataset.done = '1';
+      streamMsg = null;
+      isRequestActive = false;
+      abortController = null;
+    }
+    btn.style.display = 'inline-flex';
+    stopBtn.style.display = 'none';
+  }
+}
+
+// Send user message.
+async function submitMessage() {
+  if (isRequestActive) return;
+  let message = input.value.trim();
+  let formData = new FormData();
+  let endpoint = '/api/chat';
+  let inputType = 'text';
+  let outputFormat = 'text';
+
+  if (fileInput.files.length > 0) {
+    const file = fileInput.files[0];
+    if (file.type.startsWith('image/')) {
+      endpoint = '/api/image-analysis';
+      inputType = 'image';
+      message = 'Analyze this image';
+      formData.append('file', file);
+      formData.append('output_format', 'text');
+    }
+  } else if (audioInput.files.length > 0) {
+    const file = audioInput.files[0];
+    if (file.type.startsWith('audio/')) {
+      endpoint = '/api/audio-transcription';
+      inputType = 'audio';
+      message = 'Transcribe this audio';
+      formData.append('file', file);
+    }
+  } else if (message) {
+    formData.append('message', message);
+    formData.append('system_prompt', 'You are an expert assistant providing detailed, comprehensive, and well-structured responses.');
+    formData.append('history', JSON.stringify(conversationHistory));
+    formData.append('temperature', '0.7');
+    formData.append('max_new_tokens', '128000');
+    formData.append('enable_browsing', 'true');
+    formData.append('output_format', 'text');
+  } else {
+    return;
+  }
+
+  enterChatView();
+  addMsg('user', message);
+  conversationHistory.push({ role: 'user', content: message });
+  sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+  streamMsg = addMsg('assistant', '');
+  const loadingEl = document.createElement('span');
+  loadingEl.className = 'loading';
+  streamMsg.appendChild(loadingEl);
+  stopBtn.style.display = 'inline-flex';
+  btn.style.display = 'none';
+  input.value = '';
+  btn.disabled = true;
+  filePreview.style.display = 'none';
+  audioPreview.style.display = 'none';
+
+  isRequestActive = true;
+  abortController = new AbortController();
+
+  try {
+    const token = checkAuth();
+    const headers = token ? { Authorization: `Bearer ${token}` } : {};
+    const response = await fetch(endpoint, {
+      method: 'POST',
+      body: formData,
+      headers: headers,
+      signal: abortController.signal,
+    });
+
+    if (!response.ok) {
+      if (response.status === 403) {
+        messageLimitWarning.classList.remove('hidden');
+        input.disabled = true;
+        const loadingEl = streamMsg.querySelector('.loading');
+        if (loadingEl) loadingEl.remove();
+        streamMsg = null;
+        isRequestActive = false;
         abortController = null;
+        btn.style.display = 'inline-flex';
+        stopBtn.style.display = 'none';
+        window.location.href = '/login';
+        return;
+      }
+      if (response.status === 401) {
+        localStorage.removeItem('token');
+        window.location.href = '/login';
+        return;
+      }
+      throw new Error('Request failed');
     }
-    if (streamMsg && !forceCancel) {
+
+    if (endpoint === '/api/audio-transcription') {
+      const data = await response.json();
+      const transcription = data.transcription || 'Error: No transcription generated.';
+      streamMsg.dataset.text = transcription;
+      renderMarkdown(streamMsg);
+      streamMsg.dataset.done = '1';
+      conversationHistory.push({ role: 'assistant', content: transcription });
+      sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+    } else if (endpoint === '/api/image-analysis') {
+      const data = await response.json();
+      const analysis = data.image_analysis || 'Error: No analysis generated.';
+      streamMsg.dataset.text = analysis;
+      renderMarkdown(streamMsg);
+      streamMsg.dataset.done = '1';
+      conversationHistory.push({ role: 'assistant', content: analysis });
+      sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
+    } else {
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        streamMsg.dataset.text = buffer;
+        currentAssistantText = buffer;
         const loadingEl = streamMsg.querySelector('.loading');
         if (loadingEl) loadingEl.remove();
-        streamMsg.dataset.text += '';
         renderMarkdown(streamMsg);
-        streamMsg.dataset.done = '1';
-        streamMsg = null;
+        chatBox.scrollTop = chatBox.scrollHeight;
+      }
+      streamMsg.dataset.done = '1';
+      conversationHistory.push({ role: 'assistant', content: buffer });
+      sessionStorage.setItem('conversationHistory', JSON.stringify(conversationHistory));
     }
+
+    streamMsg = null;
+    isRequestActive = false;
+    abortController = null;
+    btn.style.display = 'inline-flex';
     stopBtn.style.display = 'none';
+  } catch (error) {
+    if (streamMsg) {
+      const loadingEl = streamMsg.querySelector('.loading');
+      if (loadingEl) loadingEl.remove();
+      streamMsg.dataset.text = error.message || 'An error occurred during the request.';
+      renderMarkdown(streamMsg);
+      streamMsg.dataset.done = '1';
+      streamMsg = null;
+      isRequestActive = false;
+      abortController = null;
+    }
     btn.style.display = 'inline-flex';
-    stopBtn.style.pointerEvents = 'auto';
+    stopBtn.style.display = 'none';
+  }
+}
+
+// Stop streaming and cancel the ongoing request.
+function stopStream(forceCancel = false) {
+  if (!isRequestActive) return;
+  isRequestActive = false;
+  if (abortController) {
+    abortController.abort();
+    abortController = null;
+  }
+  if (streamMsg && !forceCancel) {
+    const loadingEl = streamMsg.querySelector('.loading');
+    if (loadingEl) loadingEl.remove();
+    streamMsg.dataset.text += '';
+    renderMarkdown(streamMsg);
+    streamMsg.dataset.done = '1';
+    streamMsg = null;
+  }
+  stopBtn.style.display = 'none';
+  btn.style.display = 'inline-flex';
+  stopBtn.style.pointerEvents = 'auto';
 }
 
 // Prompts.
 promptItems.forEach(p => {
-    p.addEventListener('click', () => {
-        input.value = p.dataset.prompt;
-        submitMessage();
-    });
+  p.addEventListener('click', e => {
+    e.preventDefault();
+    input.value = p.dataset.prompt;
+    submitMessage();
+  });
 });
 
 // File and audio inputs.
 fileBtn.addEventListener('click', () => {
-    fileInput.click();
+  fileInput.click();
 });
 audioBtn.addEventListener('click', () => {
-    audioInput.click();
+  audioInput.click();
 });
 fileInput.addEventListener('change', previewFile);
 audioInput.addEventListener('change', previewFile);
 
+// Voice recording events.
+voiceBtn.addEventListener('mousedown', startVoiceRecording);
+voiceBtn.addEventListener('touchstart', e => {
+  e.preventDefault();
+  startVoiceRecording();
+});
+voiceBtn.addEventListener('mouseup', stopVoiceRecording);
+voiceBtn.addEventListener('touchend', e => {
+  e.preventDefault();
+  stopVoiceRecording();
+});
+
 // Submit.
 form.addEventListener('submit', e => {
+  e.preventDefault();
+  submitMessage();
+});
+
+// Handle Enter key to submit without adding new line.
+input.addEventListener('keydown', e => {
+  if (e.key === 'Enter' && !e.shiftKey) {
     e.preventDefault();
     submitMessage();
+  }
 });
 
 // Stop.
 stopBtn.addEventListener('click', () => {
-    stopBtn.style.pointerEvents = 'none';
-    stopStream();
+  stopBtn.style.pointerEvents = 'none';
+  stopStream();
 });
 
 // Home.
 homeBtn.addEventListener('click', () => {
-    window.location.href = '/';
+  window.location.href = '/';
 });
 
 // Clear messages.
 clearBtn.addEventListener('click', () => {
-    clearAllMessages();
+  clearAllMessages();
 });
 
 // Login button.
 if (loginBtn) {
-    loginBtn.addEventListener('click', () => {
-        window.location.href = '/login';
-    });
+  loginBtn.addEventListener('click', () => {
+    window.location.href = '/login';
+  });
 }
 
-// Enable send button only if input has text.
+// Enable send button only if input has text or files.
 input.addEventListener('input', () => {
-    btn.disabled = input.value.trim() === '' && fileInput.files.length === 0 && audioInput.files.length === 0;
+  btn.disabled = input.value.trim() === '' && fileInput.files.length === 0 && audioInput.files.length === 0;
 });

templates/chat.html

@@ -123,26 +123,26 @@
       </p>
       <!-- Prompts -->
       <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?" style="word-break: break-word;">
+        <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 class="prompt-item" data-prompt="Generate a Python script for a simple web server" style="word-break: break-word;">
+        <div class="prompt-item" data-prompt="Generate a Python script for a simple web server">
           <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
             <path d="M4 7h16M4 12h16M4 17h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
           </svg>
           <span>Generate a Python script for a simple web server</span>
         </div>
-        <div class="prompt-item" data-prompt="Analyze this image for me" style="word-break: break-word;">
+        <div class="prompt-item" data-prompt="Analyze this image for me">
           <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
             <path d="M3 12h18M12 3v18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
           </svg>
           <span>Analyze this image for me</span>
         </div>
-        <div class="prompt-item" data-prompt="Convert this text to audio" style="word-break: break-word;">
+        <div class="prompt-item" data-prompt="Convert this text to audio">
           <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
             <path d="M12 3v18M7 12h10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
           </svg>
@@ -157,9 +157,9 @@
       <div id="chatBox" class="flex-col" aria-live="polite"></div>
     </div>
     <!-- Footer Form -->
-    <form id="footerForm" class="flex p-3 bg-transparent" autocomplete="off" style="position: relative; margin-top: auto; width: 100%;">
+    <form id="footerForm" class="flex" autocomplete="off">
       <div id="inputContainer" class="w-full">
-        <input type="text" id="userInput" placeholder="Ask anything..." required style="word-break: break-word;" />
+        <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">
@@ -168,7 +168,7 @@
             </svg>
           </button>
           <input type="file" id="fileInput" accept="image/*,.mp3,.wav" style="display: none;" />
-          <button type="button" id="audioBtn" class="icon-btn" aria-label="Record Audio" title="Record Audio">
+          <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" />
@@ -176,6 +176,13 @@
             </svg>
           </button>
           <input type="file" id="audioInput" accept="audio/*" style="display: none;" />
+          <button type="button" id="voiceBtn" class="icon-btn" aria-label="Record Voice" title="Hold to Record Voice">
+            <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>
           <button type="submit" id="sendBtn" class="icon-btn" disabled aria-label="Send" title="Send">
             <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" />
@@ -194,48 +201,48 @@
   </main>
 
   <!-- Footer -->
-  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 py-12 w-full">
+  <footer class="bg-gradient-to-r from-teal-900 to-emerald-900 w-full">
     <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">
+      <img src="/static/images/mg.svg" alt="MGZon Logo" class="w-16 h-16 mx-auto mb-4 animate-pulse">
+      <p class="mb-2 text-sm">
         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')">
-          <i class="bx bx-mail-send text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Email Us</h4>
-          <p><a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">support@mgzon.com</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>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+        <div class="glass p-3 cursor-pointer" onclick="showCardDetails('email')">
+          <i class="bx bx-mail-send text-2xl text-emerald-300 mb-1"></i>
+          <h4 class="font-semibold mb-1 text-sm">Email Us</h4>
+          <p class="text-xs"><a href="mailto:support@mgzon.com" class="text-emerald-300 hover:underline">support@mgzon.com</a></p>
+          <div id="email-details" class="hidden mt-2 p-3 bg-gray-700/80 rounded-lg">
+            <p class="text-xs">Reach out to our support team for any inquiries or assistance.</p>
+            <button onclick="closeCardDetails('email')" class="bg-emerald-500 text-white px-3 py-1 rounded-lg mt-2 text-xs">Close</button>
           </div>
         </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('phone')">
-          <i class="bx bx-phone text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Phone Support</h4>
-          <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>
+        <div class="glass p-3 cursor-pointer" onclick="showCardDetails('phone')">
+          <i class="bx bx-phone text-2xl text-emerald-300 mb-1"></i>
+          <h4 class="font-semibold mb-1 text-sm">Phone Support</h4>
+          <p class="text-xs">+1-800-123-4567</p>
+          <div id="phone-details" class="hidden mt-2 p-3 bg-gray-700/80 rounded-lg">
+            <p class="text-xs">Contact our support team via phone for immediate assistance.</p>
+            <button onclick="closeCardDetails('phone')" class="bg-emerald-500 text-white px-3 py-1 rounded-lg mt-2 text-xs">Close</button>
           </div>
         </div>
-        <div class="glass p-4 cursor-pointer" onclick="showCardDetails('community')">
-          <i class="bx bx-group text-3xl text-emerald-300 mb-2"></i>
-          <h4 class="font-semibold mb-1">Community</h4>
-          <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>
+        <div class="glass p-3 cursor-pointer" onclick="showCardDetails('community')">
+          <i class="bx bx-group text-2xl text-emerald-300 mb-1"></i>
+          <h4 class="font-semibold mb-1 text-sm">Community</h4>
+          <p class="text-xs"><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-2 p-3 bg-gray-700/80 rounded-lg">
+            <p class="text-xs">Join our vibrant community to share ideas and collaborate.</p>
+            <button onclick="closeCardDetails('community')" class="bg-emerald-500 text-white px-3 py-1 rounded-lg mt-2 text-xs">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>
+      <div class="flex justify-center gap-4 mt-4">
+        <a href="https://github.com/Mark-Lasfar/MGZon" class="text-xl text-white hover:text-emerald-300 transition"><i class="bx bxl-github"></i></a>
+        <a href="https://x.com/MGZon" class="text-xl 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-xl 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>
+      <p class="mt-4 text-xs">© 2025 Mark Al-Asfar & MGZon AI. All rights reserved.</p>
     </div>
   </footer>
 
@@ -244,40 +251,12 @@
   <script src="/static/js/chat.js"></script>
   <script>
     AOS.init();
-    document.addEventListener('DOMContentLoaded', () => {
-      const prompts = document.querySelectorAll('.prompt-item');
-      prompts.forEach(prompt => {
-        prompt.addEventListener('click', () => {
-          document.getElementById('userInput').value = prompt.getAttribute('data-prompt');
-          document.getElementById('footerForm').dispatchEvent(new Event('submit'));
-        });
-      });
-      document.getElementById('homeBtn').addEventListener('click', () => {
-        window.location.href = '/';
-      });
-      document.getElementById('clearBtn').addEventListener('click', () => {
-        document.getElementById('chatBox').innerHTML = '';
-        document.getElementById('initialContent').classList.remove('hidden');
-        document.getElementById('chatArea').classList.add('hidden');
-      });
-      document.getElementById('fileBtn').addEventListener('click', () => {
-        document.getElementById('fileInput').click();
-      });
-      document.getElementById('audioBtn').addEventListener('click', () => {
-        document.getElementById('audioInput').click();
-      });
-      {% if not user %}
-        document.getElementById('loginBtn').addEventListener('click', () => {
-          window.location.href = '/login';
-        });
-      {% endif %}
-      function showCardDetails(cardId) {
-        document.getElementById(`${cardId}-details`).classList.remove('hidden');
-      }
-      function closeCardDetails(cardId) {
-        document.getElementById(`${cardId}-details`).classList.add('hidden');
-      }
-    });
+    function showCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.remove('hidden');
+    }
+    function closeCardDetails(cardId) {
+      document.getElementById(`${cardId}-details`).classList.add('hidden');
+    }
   </script>
 </body>
 </html>