spe-uob · yi23484 · Mar 19, 2025 · Mar 8, 2025 · Mar 8, 2025 · Mar 8, 2025
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
   <body>
     <noscript>

diff --git a/frontend/src/components/MainContent.vue b/frontend/src/components/MainContent.vue
@@ -29,9 +29,8 @@
       <div v-if="this.currentChatID.length > 0" class="chat-container">
         <!-- Scrollable message area -->
         <div class="messages-container" ref="messagesContainer">
-          <div
-              v-for="(msg, index) in messages"
-              :key="index"
+          <div v-for="(msg, index) in messages">
+             <div :key="index"
               class="message"
               :class="{
               'user-message': msg.sender === 'user',
@@ -42,9 +41,14 @@
             <strong v-if="msg.sender === 'user'">{{ getTranslation(currentLanguage, "USER") }}</strong>
             <strong v-else-if="msg.sender === 'assistant'">{{ getTranslation(currentLanguage, "AI") }}</strong>
             <strong v-else>{{ msg.sender }}</strong>
-            <!-- Use TypingText for assistant messages instead of static output -->
-            <TypingText v-if="msg.sender === 'assistant'" :text="formatMessage(msg.content)" :speed="15" />
-            <p v-else v-html="formatMessage(msg.content)"></p>
+            <p v-html="formatMessage(msg.content)"></p>
+            </div>
+            <!-- Add TTS button below the message -->
+             <div v-if="msg.sender === 'assistant'" class="tts-button-wrapper">
+              <button @click="speakMessage(msg.content)" class="tts-button">
+                <i class="fa fa-volume-up" aria-hidden="true"></i>
+              </button>
+             </div>
           </div>
         </div>
 
@@ -68,7 +72,6 @@
 import { marked } from "marked";
 import { getTheme } from "../assets/color.js";
 import {getTranslation} from "../assets/language";
-import TypingText from "../components/helpers/TypingText.vue";
 
 export default {
   components: {
@@ -108,6 +111,53 @@ export default {
       // Use marked to convert markdown to HTML.
       return marked(message);
     },
+
+        /**
+     * Uses the Web Speech API to speak the given text.
+     */
+    speakMessage(text) {
+      // If something is currently being spoken, cancel it and return.
+      if (window.speechSynthesis.speaking) {
+        window.speechSynthesis.cancel();
+        return;
+      }
+
+      // Create a new utterance with the provided text.
+      const utterance = new SpeechSynthesisUtterance(text);
+      // Set the rate and pitch.
+      utterance.rate = 1.0;
+      utterance.pitch = 1.0;
+      // Set the language from currentLanguage (or default to 'en-US').
+      utterance.lang = this.currentLanguage || "en-US";
+
+      // Function to select and assign a voice, then speak the utterance.
+      const assignVoice = () => {
+        const voices = window.speechSynthesis.getVoices();
+        let preferredVoice;
+        // If the language is English, try to select the preferred English voice.
+        if (utterance.lang.startsWith("en")) {
+          preferredVoice = voices.find(
+            (v) => v.lang === "en-GB" && v.name === "Google UK English Female"
+          ) || voices.find((v) => v.lang === "en-GB") || voices.find((v) => v.lang === "en-US");
+        } else {
+          // Otherwise, select a voice that matches the utterance language.
+          preferredVoice = voices.find((v) => v.lang === utterance.lang);
+        }
+        if (preferredVoice) {
+          utterance.voice = preferredVoice;
+        }
+        window.speechSynthesis.speak(utterance);
+      };
+
+      // Get the voices list. If it's empty, wait for voices to be loaded.
+      const voices = window.speechSynthesis.getVoices();
+      if (voices.length === 0) {
+        window.speechSynthesis.onvoiceschanged = assignVoice;
+      } else {
+        assignVoice();
+      }
+    },
+
     /**
      * Initializes a new chat with a predefined message.
      */
@@ -451,4 +501,21 @@ button {
   transform: scale(0.96);
 }
 
+.tts-button-wrapper {
+  margin-top: 5px;
+  text-align: left;
+}
+
+.tts-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2em;
+  color: var(--accent-color);
+  padding: 2px;
+}
+
+.tts-button:hover {
+color: var(--accent-color);
+}
 </style>