feat: add record feature to chat page

Author: glorat

src/components/AudioTranscriber.vue

@@ -1,67 +1,66 @@
 <template>
-  <div>
-    <button @click="toggleRecording">
-      {{ recording ? 'Stop Recording' : 'Start Recording' }}
-    </button>
-    <button @click="playRecording" :disabled="!audioUrl">Play Recording</button>
-  </div>
+  <q-btn round flat :icon="recording ? matStop :matMic " :color="recording ? 'primary' : ''" @click="toggleRecording">
+  </q-btn>
+  <btn v-if="props.showPlay" @click="playRecording" :disabled="!audioUrl">Play Recording</btn>
 </template>
 
 <script setup lang="ts">
-import { Ref, ref } from 'vue'
-import { createTranscription } from 'src/lib/ai/openaiFacade'
+import {Ref, ref} from 'vue'
+import {createTranscription} from 'src/lib/ai/openaiFacade'
+import {matStop, matMic} from '@quasar/extras/material-icons'
 
-const recording: Ref<boolean> = ref(false);
-const mediaRecorder: Ref<MediaRecorder | null> = ref(null);
-const audioUrl: Ref<string> = ref('');
+const recording: Ref<boolean> = ref(false)
+const mediaRecorder: Ref<MediaRecorder | null> = ref(null)
+const audioUrl: Ref<string> = ref('')
 const emit = defineEmits(['message'])
+const props = defineProps({showPlay: Boolean})
 
 const toggleRecording = async () => {
   try {
     if (recording.value && mediaRecorder.value) {
-      mediaRecorder.value.stop();
-      recording.value = false;
+      mediaRecorder.value.stop()
+      recording.value = false
     } else {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      mediaRecorder.value = new MediaRecorder(stream);
-      recording.value = true;
-      audioUrl.value = '';
+      const stream = await navigator.mediaDevices.getUserMedia({audio: true})
+      mediaRecorder.value = new MediaRecorder(stream)
+      recording.value = true
+      audioUrl.value = ''
 
-      const recordedChunks: Blob[] = [];
+      const recordedChunks: Blob[] = []
       mediaRecorder.value.ondataavailable = (event) => {
         if (event.data.size > 0) {
-          recordedChunks.push(event.data);
+          recordedChunks.push(event.data)
         }
-      };
+      }
 
       mediaRecorder.value.onstop = async () => {
         try {
-          const blob = new Blob(recordedChunks, { type: 'audio/wav' });
-          const file = new File([blob], 'recording.wav', { type: 'audio/wav' });
-          audioUrl.value = URL.createObjectURL(file);
-          const text = await createTranscription({ blob });
-          emit('message', text);
+          const blob = new Blob(recordedChunks, {type: 'audio/wav'})
+          const file = new File([blob], 'recording.wav', {type: 'audio/wav'})
+          audioUrl.value = URL.createObjectURL(file)
+          const text = await createTranscription({blob})
+          emit('message', text)
         } catch (error) {
-          console.error('Error during transcription:', error);
+          console.error('Error during transcription:', error)
         } finally {
-          mediaRecorder.value = null;
+          mediaRecorder.value = null
         }
-      };
+      }
 
-      mediaRecorder.value.start();
+      mediaRecorder.value.start()
     }
   } catch (error) {
-    console.error('Error accessing microphone:', error);
+    console.error('Error accessing microphone:', error)
   }
-};
+}
 
 const playRecording = () => {
   if (audioUrl.value) {
-    const audioElement = new Audio(audioUrl.value);
-    audioElement.play();
+    const audioElement = new Audio(audioUrl.value)
+    audioElement.play()
     audioElement.onended = () => {
-      audioUrl.value = '';
-    };
+      audioUrl.value = ''
+    }
   }
-};
+}
 </script>

src/pages/AudioPage.vue

@@ -1,6 +1,6 @@
 <template>
   <q-page>
-    <audio-transcriber @message="onRecordedMessage"></audio-transcriber>
+    <audio-transcriber show-play @message="onRecordedMessage"></audio-transcriber>
   </q-page>
 </template>
 

src/pages/ChatPage.vue

@@ -9,7 +9,7 @@
                v-model="newMessage"
                @keydown.enter="sendMessage"
                placeholder="Type your message"/>
-      <q-btn disable round flat :icon="matMic"/>
+      <audio-transcriber @message="onAudioMessage"></audio-transcriber>
       <q-btn disable round flat :icon="true ? matVolumeUp : matVolumeOff"/>
       <q-btn @click="sendMessage" flat class="q-ml-sm" icon="send" color="primary"/>
     </q-toolbar>
@@ -25,6 +25,7 @@ import {getOpenAIAPI, OpenAIParams} from 'src/lib/ai/config'
 import {v4, v4 as uuidv4} from 'uuid'
 import {matMic, matVolumeOff, matVolumeUp} from '@quasar/extras/material-icons'
 import {sendChatMessage} from 'src/lib/ai/openaiFacade'
+import AudioTranscriber from 'components/AudioTranscriber.vue'
 
 const cache = reactive({})
 const getCache = async(id:string):Promise<any> => cache[id]
@@ -87,6 +88,10 @@ const sendMessage = async () => {
   }
 }
 
+const onAudioMessage = (msg:string) => {
+  newMessage.value = msg
+}
+
 </script>
 
 <style scoped>