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, #voiceBtn, #fileBtn, #audioBtn {
+#sendBtn, #stopBtn, #fileBtn, #audioBtn {
   width: 2.75rem;
   height: 2.75rem;
   border: none;
@@ -22,12 +22,17 @@
   color: white;
 }
 
-#sendBtn:hover:not(:disabled) {
+#sendBtn.recording {
+  background: linear-gradient(135deg, #f87171, #ef4444);
+  transform: scale(1.1);
+}
+
+#sendBtn:hover:not(:disabled):not(.recording) {
   transform: translateY(-2px) scale(1.05);
   box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
 }
 
-#sendBtn:active:not(:disabled) {
+#sendBtn:active:not(:disabled):not(.recording) {
   transform: translateY(0) scale(0.98);
 }
 
@@ -53,25 +58,6 @@
   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;
@@ -93,6 +79,18 @@
   transition: transform 0.2s ease;
 }
 
-#sendBtn:hover:not(:disabled) #sendIcon {
+#sendBtn:hover:not(:disabled):not(.recording) #sendIcon {
   transform: translateX(2px);
 }
+
+#sendBtn.recording #sendIcon {
+  display: none;
+}
+
+#sendBtn.recording::after {
+  content: '';
+  width: 1rem;
+  height: 1rem;
+  background: url('/static/images/mic.svg') no-repeat center;
+  background-size: contain;
+}

static/css/input.css

@@ -5,15 +5,15 @@
 
 #inputContainer {
   display: flex;
-  align-items: center;
+  align-items: flex-end; /* Align items to the bottom for better textarea expansion */
   flex: 1;
   background: linear-gradient(145deg, #1a1a1a, #141414);
   border-radius: 1rem;
   border: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 0.25rem;
+  padding: 0.5rem;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   max-width: 800px;
-  margin: 0 auto;
+  margin: 0 auto 1rem auto; /* Reduced bottom margin */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   position: relative;
 }
@@ -38,24 +38,29 @@
   word-break: break-word;
   overflow-wrap: break-word;
   min-height: 40px;
-  max-height: 120px;
-  resize: vertical;
+  max-height: 200px; /* Increased max-height for more expansion */
+  resize: none; /* Disable manual resize */
   font-family: 'Inter', sans-serif;
+  line-height: 1.5;
+  overflow-y: auto;
 }
 
 #rightIconGroup {
   position: absolute;
   right: 0.5rem;
+  bottom: 0.5rem;
   display: flex;
   gap: 0.5rem;
+  align-items: center;
 }
 
 @media (max-width: 768px) {
   #inputContainer {
     max-width: 100%;
-    padding: 0.25rem 0.5rem;
+    padding: 0.5rem;
   }
   #userInput {
     padding: 0.5rem 2.5rem 0.5rem 0.5rem;
+    font-size: 0.9rem;
   }
 }

static/js/chat.js

@@ -15,7 +15,6 @@ 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');
@@ -36,6 +35,14 @@ let isRequestActive = false;
 let abortController = null;
 let mediaRecorder = null;
 let audioChunks = [];
+let isRecording = false;
+let pressTimer = null;
+
+// Auto-resize textarea
+function autoResizeTextarea() {
+  input.style.height = 'auto';
+  input.style.height = `${Math.min(input.scrollHeight, 200)}px`; // Max height is 200px as per CSS
+}
 
 // تحميل المحادثة عند تحميل الصفحة
 document.addEventListener('DOMContentLoaded', () => {
@@ -51,6 +58,10 @@ document.addEventListener('DOMContentLoaded', () => {
       addMsg(msg.role, msg.content);
     });
   }
+  // Initialize textarea height
+  autoResizeTextarea();
+  // Enable send button based on input
+  btn.disabled = input.value.trim() === '' && fileInput.files.length === 0 && audioInput.files.length === 0;
 });
 
 // تحقق من الـ token
@@ -143,6 +154,7 @@ function clearAllMessages() {
   audioPreview.style.display = 'none';
   messageLimitWarning.classList.add('hidden');
   enterChatView();
+  autoResizeTextarea();
 }
 
 // File preview.
@@ -155,6 +167,7 @@ function previewFile() {
         filePreview.innerHTML = `<img src="${e.target.result}" class="upload-preview">`;
         filePreview.style.display = 'block';
         audioPreview.style.display = 'none';
+        btn.disabled = false; // Enable send button when file is selected
       };
       reader.readAsDataURL(file);
     }
@@ -167,6 +180,7 @@ function previewFile() {
         audioPreview.innerHTML = `<audio controls src="${e.target.result}"></audio>`;
         audioPreview.style.display = 'block';
         filePreview.style.display = 'none';
+        btn.disabled = false; // Enable send button when audio is selected
       };
       reader.readAsDataURL(file);
     }
@@ -175,24 +189,29 @@ function previewFile() {
 
 // Voice recording.
 function startVoiceRecording() {
+  if (isRequestActive || isRecording) return;
+  isRecording = true;
+  btn.classList.add('recording');
   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.');
+    isRecording = false;
+    btn.classList.remove('recording');
   });
 }
 
 function stopVoiceRecording() {
   if (mediaRecorder && mediaRecorder.state === 'recording') {
     mediaRecorder.stop();
-    voiceBtn.classList.remove('recording');
+    btn.classList.remove('recording');
+    isRecording = false;
     mediaRecorder.addEventListener('stop', async () => {
       const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
       const formData = new FormData();
@@ -285,7 +304,7 @@ async function submitAudioMessage(formData) {
 
 // Send user message.
 async function submitMessage() {
-  if (isRequestActive) return;
+  if (isRequestActive || isRecording) return;
   let message = input.value.trim();
   let formData = new FormData();
   let endpoint = '/api/chat';
@@ -335,6 +354,7 @@ async function submitMessage() {
   btn.disabled = true;
   filePreview.style.display = 'none';
   audioPreview.style.display = 'none';
+  autoResizeTextarea();
 
   isRequestActive = true;
   abortController = new AbortController();
@@ -431,7 +451,10 @@ async function submitMessage() {
 
 // Stop streaming and cancel the ongoing request.
 function stopStream(forceCancel = false) {
-  if (!isRequestActive) return;
+  if (!isRequestActive && !isRecording) return;
+  if (isRecording) {
+    stopVoiceRecording();
+  }
   isRequestActive = false;
   if (abortController) {
     abortController.abort();
@@ -455,6 +478,8 @@ promptItems.forEach(p => {
   p.addEventListener('click', e => {
     e.preventDefault();
     input.value = p.dataset.prompt;
+    autoResizeTextarea();
+    btn.disabled = false;
     submitMessage();
   });
 });
@@ -469,32 +494,58 @@ audioBtn.addEventListener('click', () => {
 fileInput.addEventListener('change', previewFile);
 audioInput.addEventListener('change', previewFile);
 
-// Voice recording events.
-voiceBtn.addEventListener('mousedown', startVoiceRecording);
-voiceBtn.addEventListener('touchstart', e => {
+// Send button events for send and voice recording.
+btn.addEventListener('mousedown', e => {
+  if (btn.disabled || isRequestActive) return;
+  pressTimer = setTimeout(() => {
+    startVoiceRecording();
+  }, 500); // 500ms for long press
+});
+btn.addEventListener('mouseup', e => {
+  clearTimeout(pressTimer);
+  if (isRecording) {
+    stopVoiceRecording();
+  }
+});
+btn.addEventListener('touchstart', e => {
   e.preventDefault();
-  startVoiceRecording();
+  if (btn.disabled || isRequestActive) return;
+  pressTimer = setTimeout(() => {
+    startVoiceRecording();
+  }, 500);
 });
-voiceBtn.addEventListener('mouseup', stopVoiceRecording);
-voiceBtn.addEventListener('touchend', e => {
+btn.addEventListener('touchend', e => {
   e.preventDefault();
-  stopVoiceRecording();
+  clearTimeout(pressTimer);
+  if (isRecording) {
+    stopVoiceRecording();
+  }
 });
 
 // Submit.
 form.addEventListener('submit', e => {
   e.preventDefault();
-  submitMessage();
+  if (!isRecording) {
+    submitMessage();
+  }
 });
 
 // Handle Enter key to submit without adding new line.
 input.addEventListener('keydown', e => {
   if (e.key === 'Enter' && !e.shiftKey) {
     e.preventDefault();
-    submitMessage();
+    if (!isRecording && !btn.disabled) {
+      submitMessage();
+    }
   }
 });
 
+// Auto-resize textarea on input.
+input.addEventListener('input', () => {
+  autoResizeTextarea();
+  btn.disabled = input.value.trim() === '' && fileInput.files.length === 0 && audioInput.files.length === 0;
+});
+
 // Stop.
 stopBtn.addEventListener('click', () => {
   stopBtn.style.pointerEvents = 'none';
@@ -517,8 +568,3 @@ if (loginBtn) {
     window.location.href = '/login';
   });
 }
-
-// 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;
-});

templates/chat.html

@@ -119,7 +119,7 @@
       </div>
       <p class="system text-gray-300 mb-4">
         A versatile chatbot powered by DeepSeek, GPT-OSS, CLIP, Whisper, and TTS.<br>
-        Type your query, upload images/files, or record audio!
+        Type your query, upload images/files, or hold the send button to record audio!
       </p>
       <!-- Prompts -->
       <div class="prompts w-full max-w-md mx-auto grid gap-2">
@@ -176,14 +176,7 @@
             </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">
+          <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>