feat:add voice input

resources/js/pages/apps/chat.vue

@@ -103,6 +103,285 @@ const undoTimer = ref(null);
 const undoProgress = ref(100);
 const undoInterval = ref(null);
 
+const formatRecordingTime = (seconds) => {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+};
+
+
+// Voice Recording
+const isRecording = ref(false);
+const mediaRecorder = ref(null);
+const audioChunks = ref([]);
+const recordingStartTime = ref(null);
+const recordingDuration = ref(0);
+const recordingInterval = ref(null);
+const voiceMessage = ref(null);
+const audioStream = ref(null);
+const audioContext = ref(null);
+const analyser = ref(null);
+const dataArray = ref(null);
+const animationFrame = ref(null);
+const waveformData = ref(new Array(50).fill(0));
+const waveformCanvas = ref(null);
+const canvasCtx = ref(null);
+
+
+const startRecording = async () => {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    audioStream.value = stream;
+    mediaRecorder.value = new MediaRecorder(stream);
+    audioChunks.value = [];
+
+    audioContext.value = new (window.AudioContext || window.webkitAudioContext)();
+    analyser.value = audioContext.value.createAnalyser();
+    analyser.value.smoothingTimeConstant = 0.9;
+    const source = audioContext.value.createMediaStreamSource(stream);
+
+    analyser.value.fftSize = 2048;
+    analyser.value.smoothingTimeConstant = 0.7;
+    source.connect(analyser.value);
+
+    const bufferLength = analyser.value.fftSize;
+    dataArray.value = new Uint8Array(bufferLength);
+
+    mediaRecorder.value.ondataavailable = (event) => {
+      audioChunks.value.push(event.data);
+    };
+
+    mediaRecorder.value.onstop = () => {
+      const audioBlob = new Blob(audioChunks.value, { type: "audio/wav" });
+      voiceMessage.value = audioBlob;
+      stopAudioAnalysis();
+    };
+
+    mediaRecorder.value.start();
+    isRecording.value = true;
+    recordingStartTime.value = Date.now();
+
+    recordingInterval.value = setInterval(() => {
+      recordingDuration.value = Math.floor((Date.now() - recordingStartTime.value) / 1000);
+    }, 1000);
+
+    nextTick(() => {
+      if (waveformCanvas.value) {
+        canvasCtx.value = waveformCanvas.value.getContext("2d");
+        drawWaveform();
+      }
+    });
+  } catch (error) {
+    console.error("Error accessing microphone:", error);
+  }
+};
+
+
+const drawWaveform = () => {
+  if (!isRecording.value || !analyser.value || !canvasCtx.value) return;
+
+  analyser.value.getByteTimeDomainData(dataArray.value);
+
+  const canvas = waveformCanvas.value;
+  const ctx = canvasCtx.value;
+  const width = canvas.width;
+  const height = canvas.height;
+
+  ctx.clearRect(0, 0, width, height);
+
+  ctx.lineWidth = 2;
+  ctx.strokeStyle = `rgb(${getComputedStyle(document.documentElement)
+    .getPropertyValue(`--v-theme-${activeModelColor.value}`)
+    .trim()})`;
+
+  ctx.beginPath();
+
+  const sliceWidth = (width * 1.0) / dataArray.value.length;
+  let x = 0;
+
+  for (let i = 0; i < dataArray.value.length; i++) {
+    const v = dataArray.value[i] / 128.0;
+    const y = (v * height) / 2;
+
+    if (i === 0) {
+      ctx.moveTo(x, y);
+    } else {
+      ctx.lineTo(x, y);
+    }
+
+    x += sliceWidth;
+  }
+
+  ctx.lineTo(width, height / 2);
+  ctx.stroke();
+
+  animationFrame.value = requestAnimationFrame(drawWaveform);
+};
+
+
+const animateWaveform = () => {
+  if (!isRecording.value || !analyser.value) return;
+
+  analyser.value.getByteFrequencyData(dataArray.value);
+
+  const chunkSize = Math.floor(dataArray.value.length / 50);
+
+  for (let i = 0; i < 50; i++) {
+    let sum = 0;
+    const start = i * chunkSize;
+    const end = Math.min(start + chunkSize, dataArray.value.length);
+
+    for (let j = start; j < end; j++) {
+      sum += dataArray.value[j];
+    }
+
+    const average = sum / (end - start);
+    let normalizedValue = (average / 255) * 100;
+
+    waveformData.value[i] = waveformData.value[i] * 0.7 + normalizedValue * 0.3;
+  }
+
+  updateWaveformBars();
+  animationFrame.value = requestAnimationFrame(() => animateWaveform());
+};
+
+const updateWaveformBars = () => {
+  const bars = document.querySelectorAll('.waveform-bar');
+  bars.forEach((bar, index) => {
+    if (index < waveformData.value.length) {
+      const height = Math.max(6, Math.min(20, 6 + (waveformData.value[index] * 0.14)));
+      bar.style.height = `${height}px`;
+    }
+  });
+};
+
+
+const stopRecording = () => {
+  if (mediaRecorder.value && mediaRecorder.value.state !== 'inactive') {
+    mediaRecorder.value.stop();
+    isRecording.value = false;
+
+    if (recordingInterval.value) {
+      clearInterval(recordingInterval.value);
+      recordingInterval.value = null;
+    }
+  }
+};
+
+const cancelRecording = () => {
+  if (mediaRecorder.value && mediaRecorder.value.state !== 'inactive') {
+    mediaRecorder.value.onstop = null;
+    mediaRecorder.value.stop();
+  }
+
+  stopAudioAnalysis();
+
+  if (audioStream.value) {
+    audioStream.value.getTracks().forEach(track => track.stop());
+    audioStream.value = null;
+  }
+
+  if (recordingInterval.value) {
+    clearInterval(recordingInterval.value);
+    recordingInterval.value = null;
+  }
+
+  mediaRecorder.value = null;
+  isRecording.value = false;
+  voiceMessage.value = null;
+  recordingDuration.value = 0;
+  recordingStartTime.value = null;
+  waveformData.value = new Array(50).fill(0);
+  audioChunks.value = [];
+};
+const stopAudioAnalysis = () => {
+  if (animationFrame.value) {
+    cancelAnimationFrame(animationFrame.value);
+    animationFrame.value = null;
+  }
+  if (audioContext.value && audioContext.value.state !== 'closed') {
+    audioContext.value.close();
+    audioContext.value = null;
+  }
+  if (audioStream.value) {
+    audioStream.value.getTracks().forEach(track => track.stop());
+    audioStream.value = null;
+  }
+};
+
+const sendVoiceMessage = async () => {
+  if (!voiceMessage.value) return;
+
+  isQuickRepliesVisible.value = false;
+
+  isRequestCancelled.value = false;
+  if (isInputCentered.value) isInputCentered.value = false;
+
+  messageQueue.value.push({
+    text: "Voice message sent",
+    sender: "user",
+    isVoiceMessage: true,
+    voiceBlob: voiceMessage.value,
+    duration: recordingDuration.value
+  });
+
+  const voiceBlob = voiceMessage.value;
+  const duration = recordingDuration.value;
+  voiceMessage.value = null;
+  recordingDuration.value = 0;
+
+  await nextTick();
+  scrollToBottom();
+
+  if (!isProcessingQueue.value && messageQueue.value.length > 0) {
+    processMessageQueue();
+  }
+
+  isBotTyping.value = true;
+  abortController.value = new AbortController();
+
+  try {
+    const formData = new FormData();
+    formData.append('voice', voiceBlob, 'voice_message.wav');
+
+    const response = await fetch("/dev/voice", {
+      method: "POST",
+      body: formData,
+      signal: abortController.value.signal,
+    });
+
+    if (response.ok) {
+      const result = await response.json();
+      const responseText = result.response || result.message || result;
+      const cleanText = cleanHtmlResponse(responseText);
+      messageQueue.value.push({ text: cleanText, sender: "bot" });
+    } else {
+      messageQueue.value.push({
+        text: "خطا در پردازش پیام صوتی. لطفاً دوباره امتحان کنید.",
+        sender: "bot",
+      });
+    }
+  } catch (error) {
+    console.error("Voice API Error:", error);
+    if (error.name !== "AbortError") {
+      messageQueue.value.push({
+        text: "خطا در ارسال پیام صوتی. لطفاً اتصال را چک کنید.",
+        sender: "bot",
+      });
+    }
+  } finally {
+    isBotTyping.value = false;
+  }
+
+  await nextTick();
+  scrollToBottom();
+};
+
+const isVoiceRecordingAvailable = computed(() => {
+  return !isInputDisabled.value && !isConfirmationActive.value && !activeForm.value && !activeMultiForm.value;
+});
+
+
 // Suggestion database
 const suggestionDatabase = {
   پروژه: ["New Project ایجاد کنم", "پروژه وب سایت", "پروژه اپلیکیشن موبایل", "پروژه سیستم مدیریت", "پروژه فروشگاه آنلاین", "پروژه های انجام شده", "پروژه در حال اجرا"],
@@ -254,6 +533,11 @@ const findNextValidStep = (form, currentStepIndex, formData) => {
   return null;
 };
 
+const rtlRegex = /[\u0600-\u06FF\u0750-\u077F]/;
+function getDir(str = "") {
+  return rtlRegex.test(str) ? "rtl" : "ltr";
+}
+
 const getSuggestions = (input) => {
   if (!input || input.length < 2) return [];
 
@@ -473,6 +757,11 @@ const startMultiForm = (formId) => {
 const sendMessage = async () => {
   if (isConfirmationActive.value) return;
 
+  if (voiceMessage.value) {
+    await sendVoiceMessage();
+    return;
+  }
+
   const userMsg = msg.value.trim();
   if (!userMsg && selectedAttachments.value.length === 0) return;
 
@@ -485,7 +774,10 @@ const sendMessage = async () => {
   if (userMsg === "/cancel") {
     activeForm.value = null;
     activeMultiForm.value = null;
-    messageQueue.value.push({ text: "The form has been cancelled", sender: "bot" });
+    messageQueue.value.push({
+      text: "The form has been cancelled",
+      sender: "bot",
+    });
     msg.value = "";
     return;
   }
@@ -493,16 +785,27 @@ const sendMessage = async () => {
   isRequestCancelled.value = false;
   if (isInputCentered.value) isInputCentered.value = false;
 
-  // Handle file uploads
   if (selectedAttachments.value.length > 0) {
-    const fileNames = selectedAttachments.value.map(f => f.name).join(", ");
+    const fileNames = selectedAttachments.value.map((f) => f.name).join(", ");
     messageQueue.value.push({
       text: userMsg || `Files sent: ${fileNames}`,
       sender: "user",
       isAttachment: true,
-      files: [...selectedAttachments.value]
+      files: [...selectedAttachments.value],
     });
+
     selectedAttachments.value = [];
+    msg.value = "";
+
+    messageQueue.value.push({
+      text: "فایل‌ها با موفقیت دریافت شد ✅",
+      sender: "bot",
+      isSystemMessage: true
+    });
+
+    await nextTick();
+    scrollToBottom();
+    return;
   } else {
     messageQueue.value.push({ text: userMsg, sender: "user" });
   }
@@ -515,7 +818,6 @@ const sendMessage = async () => {
     processMessageQueue();
   }
 
-  // Handle different message types
   if (activeMultiForm.value) {
     const formResponse = handleMultiFormResponse(userMsg);
     if (formResponse.completed) {
@@ -526,20 +828,23 @@ const sendMessage = async () => {
       messageQueue.value.push({
         sender: "bot",
         multiForm: formResponse.nextStep,
-        type: "multi-form"
+        type: "multi-form",
       });
     }
+    return;
   } else if (activeForm.value) {
     const formResponse = handleFormResponse(userMsg);
     messageQueue.value.push({ text: formResponse, sender: "bot" });
     activeForm.value = null;
+    return;
   } else {
     const botReply = getBotReply(userMsg);
 
     if (botReply && typeof botReply === "object") {
       if (botReply.type === "multi-form") {
         isBotTyping.value = true;
-        await new Promise(r => setTimeout(r, 500));
+        try {
+          await new Promise((r) => setTimeout(r, 500));
           activeMultiForm.value = botReply.formId;
           currentFormStep.value = 0;
           multiFormData.value = {};
@@ -550,11 +855,15 @@ const sendMessage = async () => {
               ...form.steps[0],
               stepNumber: 1,
               totalSteps: form.steps.length,
-            formTitle: form.title
+              formTitle: form.title,
             },
-          type: "multi-form"
+            type: "multi-form",
           });
+        } catch (error) {
+          console.error("Multi-form setup error:", error);
+        } finally {
           isBotTyping.value = false;
+        }
       } else if (botReply.type === "form") {
         activeForm.value = botReply.formId;
         const form = forms[botReply.formId];
@@ -565,43 +874,75 @@ const sendMessage = async () => {
             id: form.id,
             title: form.title,
             question: form.question,
-            options: form.options
+            options: form.options,
           },
-          type: "form"
+          type: "form",
         });
       }
       return;
     } else if (typeof botReply === "string") {
       messageQueue.value.push({ text: botReply, sender: "bot" });
+      return;
     } else {
-      // API call
       isBotTyping.value = true;
       abortController.value = new AbortController();
 
+      const SHOW_GENERIC_ERROR_IN_CHAT = true;
+
       try {
-        const response = await fetch("/CallChatService.php", {
+        console.log("Sending message to server:", userMsg);
+
+        const response = await fetch("/dev/chatbot", {
           method: "POST",
-          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+          headers: {
-          body: new URLSearchParams({ message: userMsg }),
+            "Content-Type": "application/json",
-          signal: abortController.value.signal
+            Accept: "application/json",
+          },
+          body: JSON.stringify({ message: userMsg }),
+          signal: abortController.value.signal,
         });
 
+        console.log("Response status:", response.status);
+        console.log("Response ok:", response.ok);
+
         if (response.ok) {
-          const resultText = await response.text();
+          const result = await response.json();
-          const cleanText = cleanHtmlResponse(resultText);
+          const responseText = result.response || result.message || result;
+          const cleanText = cleanHtmlResponse(responseText);
           messageQueue.value.push({ text: cleanText, sender: "bot" });
         } else {
-          messageQueue.value.push({ text: "Error receiving response from server", sender: "bot" });
+          let serverText = "";
+          try {
+            serverText = await response.text();
+          } catch (e) { }
+          console.error(`Server error (${response.status})`, serverText);
+          if (SHOW_GENERIC_ERROR_IN_CHAT) {
+            messageQueue.value.push({
+              text: "چت‌بات با مشکل روبه‌رو شد. لطفاً دوباره امتحان کن.",
+              sender: "bot",
+            });
           }
-      } catch {
+          return;
-        if (!isRequestCancelled.value) {
-          messageQueue.value.push({ text: "Could not connect to the server", sender: "bot" });
         }
+      } catch (error) {
+        console.error("Chatbot API Error:", error);
+        if (error.name === "AbortError") {
+          console.log("Request was aborted");
+          return;
+        }
+        if (SHOW_GENERIC_ERROR_IN_CHAT) {
+          messageQueue.value.push({
+            text: "چت‌بات با مشکل روبه‌رو شد. لطفاً اتصال را چک کن و دوباره تلاش کن.",
+            sender: "bot",
+          });
+        }
+        return;
+      } finally {
+        isBotTyping.value = false;
       }
     }
   }
 
-  isBotTyping.value = false;
   await nextTick();
   scrollToBottom();
 };
@@ -1134,6 +1475,9 @@ watch([activeForm, activeMultiForm, isConfirmationActive], ([form, multiForm, co
   if (form !== null || multiForm !== null || confirmation) {
     console.log('Quick replies hidden due to active form');
   }
+  if (voiceMessage.value) {
+    voiceMessage.value = null;
+  }
 });
 
 // Lifecycle
@@ -1147,6 +1491,7 @@ const models = MODELS;
 const commands = COMMANDS;
 </script>
 
+
 <template>
   <VLayout class="chat-app-layout" style="z-index: 0">
     <VMain class="chat-content-container">
@@ -1169,15 +1514,21 @@ const commands = COMMANDS;
               </VAvatar>
             </template>
 
-            <div class="pa-3 rounded-lg message-bubble" :class="[
+            <div class="pa-3 rounded-lg message-bubble bidi-text" :dir="getDir(message.text)" :class="[
               message.sender === 'user'
                 ? 'bg-primary text-white'
                 : message.isSystemMessage
                   ? 'bg-grey-lighten-3 text-grey-darken-3'
                   : `bg-${activeModelBgColor} text-white`,
               message.isAnimating ? 'animate-message' : '',
+              message.isVoiceMessage ? 'voice-message-bubble' : '',
             ]">
-              <div v-if="!message.form && !message.multiForm && !message.type">
+              <div v-if="message.isVoiceMessage" class="voice-message-display d-flex align-center gap-2">
+                <VIcon icon="tabler-microphone" size="16" />
+                <span class="text-caption">Voice message ({{ message.duration }}s)</span>
+              </div>
+
+              <div v-else-if="!message.form && !message.multiForm && !message.type">
                 {{ message.text }}
               </div>
 
@@ -1239,6 +1590,16 @@ const commands = COMMANDS;
                     </VBtn>
                   </div>
                 </div>
+
+                <div v-else-if="message.multiForm.type === 'date'" class="form-date-input">
+                  <VTextField v-model="tempDateValue" :label="message.multiForm.question" type="date"
+                    :min="getMinDate(message.multiForm.id)" variant="outlined" :required="message.multiForm.required"
+                    @keyup.enter="handleDateSubmit" class="mb-3" hide-details />
+                  <VBtn :color="activeModelColor" variant="flat" size="small" @click="handleDateSubmit"
+                    :disabled="!tempDateValue" class="mt-2">
+                    Submit
+                  </VBtn>
+                </div>
               </div>
 
               <div v-else-if="message.type === 'confirmation'" class="confirmation-container">
@@ -1326,9 +1687,11 @@ const commands = COMMANDS;
         'centered-input': isInputCentered,
         'bottom-input': !isInputCentered,
       }">
-        <div class="chat-input-container rounded-3xl pa-3 mb-2" :class="{ 'pt-0': selectedAttachments.length === 0 }"
+        <div class="chat-input-container rounded-3xl pa-3 mb-2" :class="{
-          :style="`border: 1px solid rgba(var(--v-theme-${activeModelColor}), 0.5); 
+          'pt-0': selectedAttachments.length === 0
+        }" :style="`border: 1px solid rgba(var(--v-theme-${activeModelColor}), 0.5); 
               --active-model-color: var(--v-theme-${activeModelColor})`">
+
           <div v-if="selectedAttachments.length > 0" class="d-flex flex-wrap gap-2 mt-3 mb-2 attachment-chip-container">
             <VChip v-for="(file, index) in selectedAttachments" :key="index" closable
               @click:close="removeAttachment(index)" color="grey-lighten-3" class="align-center attachment-chip">
@@ -1338,6 +1701,43 @@ const commands = COMMANDS;
             </VChip>
           </div>
 
+          <div v-if="isRecording" class="voice-recording-ui">
+            <div class="waveform-visualizer">
+              <canvas ref="waveformCanvas"></canvas>
+            </div>
+            <div class="voice-controls-wrapper">
+              <div class="recording-time">{{ formatRecordingTime(recordingDuration) }}</div>
+              <div class="voice-controls">
+                <VBtn icon size="small" color="error" variant="flat" @click="cancelRecording" class="voice-btn">
+                  <VIcon icon="tabler-x" size="18" />
+                </VBtn>
+                <VBtn icon size="small" :color="activeModelColor" variant="flat" @click="stopRecording"
+                  class="voice-btn">
+                  <VIcon icon="tabler-check" size="18" />
+                </VBtn>
+              </div>
+            </div>
+          </div>
+
+
+
+          <div v-else-if="voiceMessage" class="voice-preview-ui">
+            <div class="voice-preview-content">
+              <VIcon icon="tabler-microphone" size="18" :color="activeModelColor" />
+              <span class="voice-preview-text">Voice message ready</span>
+              <span class="voice-duration">({{ recordingDuration }}s)</span>
+            </div>
+            <div class="voice-controls">
+              <VBtn icon size="small" color="error" variant="flat" @click="cancelRecording" class="voice-btn">
+                <VIcon icon="tabler-x" size="18" />
+              </VBtn>
+              <VBtn icon size="small" :color="activeModelColor" variant="flat" @click="sendMessage" class="voice-btn">
+                <VIcon icon="tabler-send" size="18" />
+              </VBtn>
+            </div>
+          </div>
+
+          <div v-else class="normal-input-ui">
             <div class="position-relative">
               <VTextarea v-model="msg" auto-grow rows="1" row-height="30"
                 :disabled="isInputDisabled || isConfirmationActive" hide-details variant="plain" persistent-placeholder
@@ -1378,11 +1778,17 @@ const commands = COMMANDS;
                   <input ref="fileInputRef" type="file" multiple class="d-none" @change="handleFileUpload" />
                 </VBtn>
 
+                <VBtn icon variant="text" density="comfortable" :color="activeModelColor" @click="startRecording"
+                  :disabled="!isVoiceRecordingAvailable">
+                  <VIcon icon="tabler-microphone" />
+                </VBtn>
+
                 <VBtn :color="isWebSearchEnabled ? 'primary' : 'grey-darken-1'"
                   :variant="isWebSearchEnabled ? 'tonal' : 'text'" :elevation="isWebSearchEnabled ? 8 : 2"
                   density="comfortable" class="text-none web-search-btn"
                   :class="{ 'web-search-active': isWebSearchEnabled }" @click="toggleWebSearch">
-                <VIcon icon="tabler-analyze" class="me-1 web-icon" :class="{ 'web-icon-active': isWebSearchEnabled }" />
+                  <VIcon icon="tabler-analyze" class="me-1 web-icon"
+                    :class="{ 'web-icon-active': isWebSearchEnabled }" />
                   <span class="d-none d-sm-block web-text">Scenario</span>
                 </VBtn>
 
@@ -1404,7 +1810,8 @@ const commands = COMMANDS;
                   </template>
 
                   <VList density="compact" max-height="200">
-                  <VListItem v-for="option in projectOptions" :key="option" @click="handleProjectSelect(option)" :class="{
+                    <VListItem v-for="option in projectOptions" :key="option" @click="handleProjectSelect(option)"
+                      :class="{
                         'bg-primary text-white':
                           option === selectedProject &&
                           option !== '+ New Project',
@@ -1419,41 +1826,10 @@ const commands = COMMANDS;
                     </VListItem>
                   </VList>
                 </VMenu>
-
-              <!-- <VMenu v-model="showModelMenu" location="top">
-                <template #activator="{ props }">
-                  <VBtn v-bind="props" :color="activeModelColor" variant="text" class="text-none model-select-btn"
-                    density="comfortable">
-                    <span class="d-none d-sm-block">{{
-                      selectedModelName
-                    }}</span>
-                    <span class="d-block d-sm-none">Model</span>
-                    <VIcon icon="tabler-chevron-down" class="ms-1"></VIcon>
-                  </VBtn>
-                </template>
-
-                <VList density="compact" max-height="300">
-                  <VListItem v-for="model in models" :key="model.identifier" @click="handleModelChange(model)" :class="{
-                    'bg-primary text-white':
-                      selectedModelIdentifier === model.identifier,
-                  }">
-                    <template #prepend>
-                      <div class="model-color-indicator me-2"
-                        :style="`background-color: var(--v-theme-${model.color}); width: 12px; height: 12px; border-radius: 50%`">
-                      </div>
-                    </template>
-
-                    <template #append v-if="selectedModelIdentifier === model.identifier">
-                    </template>
-
-                    <VListItemTitle>{{ model.name }}</VListItemTitle>
-                  </VListItem>
-                </VList>
-              </VMenu> -->
               </div>
 
               <VBtn v-if="!isBotTyping" icon :color="activeModelColor" @click="sendMessage" :disabled="isInputDisabled ||
-              (!msg.trim() && selectedAttachments.length === 0)
+                (!msg.trim() && selectedAttachments.length === 0 && !voiceMessage)
                 ">
                 <VIcon icon="tabler-send"></VIcon>
               </VBtn>
@@ -1463,17 +1839,24 @@ const commands = COMMANDS;
               </VBtn>
             </div>
           </div>
+        </div>
 
         <Transition name="quick-replies-fade" mode="out-in" appear>
-          <div v-if="isQuickRepliesVisible && !activeForm && !activeMultiForm && !isConfirmationActive"
+          <div v-if="
-            class="quick-replies-container" key="quick-replies">
+            isQuickRepliesVisible &&
+            !activeForm &&
+            !activeMultiForm &&
+            !isConfirmationActive &&
+            !isRecording &&
+            !voiceMessage &&
+            !isBotTyping
+          " class="quick-replies-container" key="quick-replies">
             <TransitionGroup name="quick-reply" appear>
               <div v-for="(reply, index) in quickReplies" :key="reply" class="quick-reply-item"
                 :style="{ transitionDelay: `${index * 50}ms` }">
                 <VBtn class="quick-reply-transparent" variant="text" size="small" :style="`border: 1px solid rgba(var(--v-theme-${activeModelColor}), 0.5) !important;
                --hover-bg-color: rgba(var(--v-theme-${activeModelColor}), 0.1);
-                       --hover-border-color: rgba(var(--v-theme-${activeModelColor}), 0.8)`"
+               --hover-border-color: rgba(var(--v-theme-${activeModelColor}), 0.8)`" @click="selectQuickReply(reply)">
-                  @click="selectQuickReply(reply)">
                   {{ reply }}
                 </VBtn>
               </div>

resources/styles/chat-app.scss

@@ -138,7 +138,8 @@
 }
 
 @keyframes pulse-enhanced {
-  0%, 100% {
+  0%,
+  100% {
     transform: scale(0.6);
     opacity: 0.4;
   }
@@ -248,7 +249,8 @@
 }
 
 .message-bubble.is-deleting {
-  animation: delete-message-bubble 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
+  animation: delete-message-bubble 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53)
+    forwards;
 }
 
 /* Typing indicator */
@@ -271,7 +273,8 @@
     background-color: #9e9e9e;
     box-shadow: none;
     margin: 0 2px;
-    animation: pulse-enhanced 1.8s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    animation: pulse-enhanced 1.8s infinite
+      cubic-bezier(0.68, -0.55, 0.265, 1.55);
 
     &:nth-child(2) {
       animation-delay: 0.3s;
@@ -322,7 +325,9 @@
   &:hover,
   &:focus-within {
     border-color: v-bind("`rgb(var(--v-theme-${activeModelColor}))`");
-    box-shadow: v-bind("`0 0 0 2px rgba(var(--v-theme-${activeModelColor}), 0.25)`");
+    box-shadow: v-bind(
+      "`0 0 0 2px rgba(var(--v-theme-${activeModelColor}), 0.25)`"
+    );
     transform: translateY(-1px) scale(1.005);
   }
 }
@@ -441,10 +446,18 @@
   border: 1px solid transparent;
   animation: suggestion-fade-in 0.3s ease-out;
 
-  &:nth-child(1) { animation-delay: 0.1s; }
+  &:nth-child(1) {
-  &:nth-child(2) { animation-delay: 0.15s; }
+    animation-delay: 0.1s;
-  &:nth-child(3) { animation-delay: 0.2s; }
+  }
-  &:nth-child(4) { animation-delay: 0.25s; }
+  &:nth-child(2) {
+    animation-delay: 0.15s;
+  }
+  &:nth-child(3) {
+    animation-delay: 0.2s;
+  }
+  &:nth-child(4) {
+    animation-delay: 0.25s;
+  }
 
   &:hover,
   &.suggestion-selected {
@@ -586,7 +599,10 @@
   width: 100%;
   background-color: transparent !important;
   box-shadow: none !important;
-  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
+  color: rgba(
+    var(--v-theme-on-background),
+    var(--v-high-emphasis-opacity)
+  ) !important;
   font-size: 0.78rem;
   border-radius: 20px !important;
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -594,19 +610,30 @@
   overflow: hidden;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.1),
+      transparent
+    );
     transition: left 0.5s ease;
   }
 
   &:hover {
-    background-color: var(--hover-bg-color, rgba(var(--v-theme-primary), 0.1)) !important;
+    background-color: var(
-    border-color: var(--hover-border-color, rgba(var(--v-theme-primary), 0.8)) !important;
+      --hover-bg-color,
+      rgba(var(--v-theme-primary), 0.1)
+    ) !important;
+    border-color: var(
+      --hover-border-color,
+      rgba(var(--v-theme-primary), 0.8)
+    ) !important;
     transform: translateY(-5px) scale(1.05) rotateZ(0.5deg);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
   }
@@ -727,7 +754,8 @@
 
 /* Web search button animations */
 @keyframes webPulseImproved {
-  0%, 100% {
+  0%,
+  100% {
     transform: scale(1) rotate(0deg);
     opacity: 1;
     filter: drop-shadow(0 0 8px rgba(var(--v-theme-primary), 0.5)) brightness(1);
@@ -735,41 +763,45 @@
   25% {
     transform: scale(1.1) rotate(90deg);
     opacity: 0.9;
-    filter: drop-shadow(0 0 12px rgba(var(--v-theme-primary), 0.7)) brightness(1.1);
+    filter: drop-shadow(0 0 12px rgba(var(--v-theme-primary), 0.7))
+      brightness(1.1);
   }
   50% {
     transform: scale(1.05) rotate(180deg);
     opacity: 0.8;
-    filter: drop-shadow(0 0 15px rgba(var(--v-theme-primary), 0.8)) brightness(1.2);
+    filter: drop-shadow(0 0 15px rgba(var(--v-theme-primary), 0.8))
+      brightness(1.2);
   }
   75% {
     transform: scale(1.08) rotate(270deg);
     opacity: 0.9;
-    filter: drop-shadow(0 0 12px rgba(var(--v-theme-primary), 0.7)) brightness(1.1);
+    filter: drop-shadow(0 0 12px rgba(var(--v-theme-primary), 0.7))
+      brightness(1.1);
   }
 }
 
 @keyframes webActiveHoverImproved {
   0% {
     transform: scale(1.1) rotate(-3deg);
-    filter: drop-shadow(0 0 10px rgba(var(--v-theme-primary), 0.6)) brightness(1.1);
+    filter: drop-shadow(0 0 10px rgba(var(--v-theme-primary), 0.6))
+      brightness(1.1);
   }
   100% {
     transform: scale(1.2) rotate(3deg);
-    filter: drop-shadow(0 0 16px rgba(var(--v-theme-primary), 0.8)) brightness(1.3);
+    filter: drop-shadow(0 0 16px rgba(var(--v-theme-primary), 0.8))
+      brightness(1.3);
   }
 }
 
 @keyframes webGlowImproved {
-  0%, 100% {
+  0%,
-    box-shadow: 
+  100% {
-      0 0 20px rgba(var(--v-theme-primary), 0.4),
+    box-shadow: 0 0 20px rgba(var(--v-theme-primary), 0.4),
       0 4px 15px rgba(var(--v-theme-primary), 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.1);
   }
   50% {
-    box-shadow: 
+    box-shadow: 0 0 30px rgba(var(--v-theme-primary), 0.6),
-      0 0 30px rgba(var(--v-theme-primary), 0.6),
       0 6px 20px rgba(var(--v-theme-primary), 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.15);
   }
@@ -785,7 +817,7 @@
   min-width: 100px;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 50%;
     left: 50%;
@@ -805,7 +837,7 @@
   }
 
   &::after {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: -100%;
@@ -842,8 +874,7 @@
 
   &:focus {
     outline: none;
-    box-shadow: 
+    box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.2),
-      0 0 0 3px rgba(var(--v-theme-primary), 0.2),
       0 4px 15px rgba(var(--v-theme-primary), 0.1);
   }
 
@@ -902,8 +933,7 @@
     rgba(var(--v-theme-primary), 0.7) 100%
   ) !important;
   border: 2px solid rgba(var(--v-theme-primary), 0.3);
-  box-shadow: 
+  box-shadow: 0 0 20px rgba(var(--v-theme-primary), 0.4),
-    0 0 20px rgba(var(--v-theme-primary), 0.4),
     0 4px 15px rgba(var(--v-theme-primary), 0.2),
     inset 0 1px 0 rgba(255, 255, 255, 0.1);
   animation: webGlowImproved 3s ease-in-out infinite;
@@ -1113,7 +1143,8 @@
 }
 
 @keyframes gentle-pulse {
-  0%, 100% {
+  0%,
+  100% {
     box-shadow: 0 2px 8px rgba(var(--v-theme-primary), 0.2);
   }
   50% {
@@ -1174,21 +1205,38 @@
       overflow: hidden;
 
       /* Staggered animations for each option */
-      &:nth-child(1) { animation-delay: 0.5s; }
+      &:nth-child(1) {
-      &:nth-child(2) { animation-delay: 0.6s; }
+        animation-delay: 0.5s;
-      &:nth-child(3) { animation-delay: 0.7s; }
+      }
-      &:nth-child(4) { animation-delay: 0.8s; }
+      &:nth-child(2) {
-      &:nth-child(5) { animation-delay: 0.9s; }
+        animation-delay: 0.6s;
-      &:nth-child(6) { animation-delay: 1.0s; }
+      }
+      &:nth-child(3) {
+        animation-delay: 0.7s;
+      }
+      &:nth-child(4) {
+        animation-delay: 0.8s;
+      }
+      &:nth-child(5) {
+        animation-delay: 0.9s;
+      }
+      &:nth-child(6) {
+        animation-delay: 1s;
+      }
 
       &::before {
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+        background: linear-gradient(
+          90deg,
+          transparent,
+          rgba(255, 255, 255, 0.2),
+          transparent
+        );
         transition: left 0.5s ease;
         z-index: 1;
       }
@@ -1243,10 +1291,18 @@
       opacity: 0;
       animation-fill-mode: forwards;
 
-      &:nth-child(1) { animation-delay: 0.5s; }
+      &:nth-child(1) {
-      &:nth-child(2) { animation-delay: 0.6s; }
+        animation-delay: 0.5s;
-      &:nth-child(3) { animation-delay: 0.7s; }
+      }
-      &:nth-child(4) { animation-delay: 0.8s; }
+      &:nth-child(2) {
+        animation-delay: 0.6s;
+      }
+      &:nth-child(3) {
+        animation-delay: 0.7s;
+      }
+      &:nth-child(4) {
+        animation-delay: 0.8s;
+      }
 
       span:first-child {
         color: rgba(var(--v-theme-on-surface), 0.8);
@@ -1274,13 +1330,18 @@
       overflow: hidden;
 
       &::before {
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+        background: linear-gradient(
+          90deg,
+          transparent,
+          rgba(255, 255, 255, 0.2),
+          transparent
+        );
         transition: left 0.5s ease;
         z-index: 1;
       }
@@ -1329,19 +1390,32 @@
       position: relative;
       overflow: hidden;
 
-      &:nth-child(1) { animation-delay: 0.2s; }
+      &:nth-child(1) {
-      &:nth-child(2) { animation-delay: 0.3s; }
+        animation-delay: 0.2s;
-      &:nth-child(3) { animation-delay: 0.4s; }
+      }
-      &:nth-child(4) { animation-delay: 0.5s; }
+      &:nth-child(2) {
+        animation-delay: 0.3s;
+      }
+      &:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+      &:nth-child(4) {
+        animation-delay: 0.5s;
+      }
 
       &::before {
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+        background: linear-gradient(
+          90deg,
+          transparent,
+          rgba(255, 255, 255, 0.2),
+          transparent
+        );
         transition: left 0.5s ease;
         z-index: 1;
       }
@@ -1387,19 +1461,32 @@
       position: relative;
       overflow: hidden;
 
-      &:nth-child(1) { animation-delay: 0.3s; }
+      &:nth-child(1) {
-      &:nth-child(2) { animation-delay: 0.4s; }
+        animation-delay: 0.3s;
-      &:nth-child(3) { animation-delay: 0.5s; }
+      }
-      &:nth-child(4) { animation-delay: 0.6s; }
+      &:nth-child(2) {
+        animation-delay: 0.4s;
+      }
+      &:nth-child(3) {
+        animation-delay: 0.5s;
+      }
+      &:nth-child(4) {
+        animation-delay: 0.6s;
+      }
 
       &::before {
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+        background: linear-gradient(
+          90deg,
+          transparent,
+          rgba(255, 255, 255, 0.2),
+          transparent
+        );
         transition: left 0.5s ease;
         z-index: 1;
       }
@@ -1639,7 +1726,9 @@
   &:hover,
   &:focus-within {
     border-color: v-bind("`rgb(var(--v-theme-${activeModelColor}))`");
-    box-shadow: v-bind("`0 0 0 2px rgba(var(--v-theme-${activeModelColor}), 0.25)`");
+    box-shadow: v-bind(
+      "`0 0 0 2px rgba(var(--v-theme-${activeModelColor}), 0.25)`"
+    );
     transform: translateY(-1px) scale(1.005) translateZ(0);
     transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
   }
@@ -1750,3 +1839,190 @@
     margin-top: 0.8rem !important;
   }
 }
+
+.recording-indicator {
+  width: 8px;
+  height: 8px;
+  background-color: #f44336;
+  border-radius: 50%;
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.voice-message-display {
+  padding: 8px 12px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 16px;
+  margin-top: 8px;
+}
+
+.voice-recording-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  background-color: rgba(var(--v-theme-surface), 0.8);
+  border-radius: 20px;
+  backdrop-filter: blur(8px);
+}
+
+.recording-duration {
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--v-theme-on-surface);
+  min-width: 30px;
+  text-align: center;
+}
+
+.voice-ready-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  background-color: rgba(var(--active-model-color), 0.1);
+  border-radius: 16px;
+  border: 1px solid rgba(var(--active-model-color), 0.3);
+}
+
+.voice-message-bubble {
+  background: linear-gradient(
+    135deg,
+    rgba(var(--active-model-color), 0.1),
+    rgba(var(--active-model-color), 0.05)
+  );
+  border: 1px solid rgba(var(--active-model-color), 0.2);
+}
+
+.voice-controls-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.voice-recording-ui {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+}
+
+.voice-waveform {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 28px;
+  flex: 1;
+  justify-content: space-between;
+  padding: 0 8px;
+}
+
+.waveform-bar {
+  width: 3px;
+  background: rgba(var(--active-model-color), 0.7);
+  border-radius: 2px;
+  transition: height 0.1s ease;
+  animation: waveform 1.5s ease-in-out infinite;
+  animation-delay: var(--delay);
+}
+
+@keyframes waveform {
+  0%, 100% {
+    height: 6px;
+    opacity: 0.5;
+  }
+  50% {
+    height: 20px;
+    opacity: 1;
+  }
+}
+
+.voice-controls-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.recording-time {
+  position: absolute;
+  top: -20px;
+  right: 50%;
+  transform: translateX(50%);
+  font-family: 'Courier New', monospace;
+  font-size: 11px;
+  color: rgba(var(--v-theme-on-surface), 0.7);
+  background: rgba(var(--v-theme-surface), 0.9);
+  padding: 2px 6px;
+  border-radius: 8px;
+  white-space: nowrap;
+}
+
+.voice-controls {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.voice-btn {
+  min-width: 36px;
+  min-height: 36px;
+}
+
+.voice-preview-ui {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+}
+
+.voice-preview-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 8px;
+}
+
+.voice-preview-text {
+  font-weight: 500;
+  color: rgba(var(--v-theme-on-surface), 0.8);
+  font-size: 14px;
+}
+
+.voice-duration {
+  font-size: 12px;
+  color: rgba(var(--v-theme-on-surface), 0.6);
+}
+
+.normal-input-ui {
+  width: 100%;
+}
+
+.waveform-visualizer {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 8px;
+}
+
+.waveform-visualizer canvas {
+  width: 100%;
+  height: 100%;
+}
+