spe-uob · yi23484 · Mar 19, 2025 · Mar 8, 2025 · Mar 8, 2025 · Mar 8, 2025
diff --git a/frontend/node/node.exe b/frontend/node/node.exe
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
@@ -2,58 +2,75 @@
   <main>
     <div class="chat-area">
       <!-- Welcome Screen with Logo -->
-      <div v-if="this.currentChatID.length === 0" class="welcome-container">
+      <div v-if="currentChatID.length === 0" class="welcome-container">
         <img src="../assets/logo.png" alt="Logo" class="logo" />
         <p class="welcome-text">
           {{ getTranslation(currentLanguage, 'WELCOME_TO_WATSONX_AI') }}
         </p>
-        <p v-if="this.currentChatID.length === 0" class="instruction-text">
+        <p v-if="currentChatID.length === 0" class="instruction-text">
           {{ getTranslation(currentLanguage, 'SELECT_INITIAL_TOPIC') }}
         </p>
 
         <!-- Buttons for chat initialisation -->
-        <div v-if="this.currentChatID.length === 0" class="button-container">
-          <button @click="sendInitialMessage(getTranslation(currentLanguage, 'I_NEED_HELP_WITH_CHOOSING_A_COURSE'))" :disabled="chatInitButtonsDisabled">
+        <div v-if="currentChatID.length === 0" class="button-container">
+          <button 
+            @click="sendInitialMessage(getTranslation(currentLanguage, 'I_NEED_HELP_WITH_CHOOSING_A_COURSE'))" 
+            :disabled="chatInitButtonsDisabled">
             {{ getTranslation(currentLanguage, "I_NEED_HELP_WITH_CHOOSING_A_COURSE") }}
           </button>
-          <button @click="sendInitialMessage(getTranslation(currentLanguage, 'I_NEED_HELP_WITH_PLATFORM'))" :disabled="chatInitButtonsDisabled">
-            {{ getTranslation(currentLanguage, "I_NEED_HELP_WITH_PLATFORM")}}
+          <button 
+            @click="sendInitialMessage(getTranslation(currentLanguage, 'I_NEED_HELP_WITH_PLATFORM'))" 
+            :disabled="chatInitButtonsDisabled">
+            {{ getTranslation(currentLanguage, "I_NEED_HELP_WITH_PLATFORM") }}
           </button>
-          <button @click="sendInitialMessage(getTranslation(currentLanguage, 'I_HAVE_QUESTIONS_ABOUT_UNI_LIFE'))" :disabled="chatInitButtonsDisabled">
-            {{getTranslation(currentLanguage, "I_HAVE_QUESTIONS_ABOUT_UNI_LIFE")}}
+          <button 
+            @click="sendInitialMessage(getTranslation(currentLanguage, 'I_HAVE_QUESTIONS_ABOUT_UNI_LIFE'))" 
+            :disabled="chatInitButtonsDisabled">
+            {{ getTranslation(currentLanguage, "I_HAVE_QUESTIONS_ABOUT_UNI_LIFE") }}
           </button>
         </div>
       </div>
 
       <!-- Display all messages in the conversation -->
-      <div v-if="this.currentChatID.length > 0" class="chat-container">
+      <div v-if="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" :key="index">
+            <div 
               class="message"
               :class="{
-              'user-message': msg.sender === 'user',
-              'assistant-message': msg.sender === 'assistant',
-              'system-message': msg.sender === 'System'
-            }"
-          >
-            <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>
+                'user-message': msg.sender === 'user',
+                'assistant-message': msg.sender === 'assistant',
+                'system-message': msg.sender === 'System'
+              }"
+            >
+              <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>
+              <!-- For assistant messages, use TypingText to animate the output -->
+              <TypingText 
+                v-if="msg.sender === 'assistant'" 
+                :text="formatMessage(msg.content)" 
+                :speed="15" 
+              />
+              <!-- For non-assistant messages, render markdown as HTML -->
+              <p v-else v-html="formatMessage(msg.content)"></p>
+            </div>
+            <!-- TTS Button: For assistant messages, show a speaker icon 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"></i>
+              </button>
+            </div>
           </div>
         </div>
 
         <!-- Input area for user messages -->
         <div class="input-area">
           <textarea
-              v-model="userInput"
-              :placeholder="getTranslation(currentLanguage, 'TYPE_YOUR_MESSAGE')"
-              @keypress.enter.prevent="sendMessage"
+            v-model="userInput"
+            :placeholder="getTranslation(currentLanguage, 'TYPE_YOUR_MESSAGE')"
+            @keypress.enter.prevent="sendMessage"
           ></textarea>
           <button @click="sendMessage" :disabled="chatInitButtonsDisabled">
             {{ getTranslation(currentLanguage, "SEND") }}
@@ -64,6 +81,8 @@
   </main>
 </template>
 
+
+
 <script>
 import { marked } from "marked";
 import { getTheme } from "../assets/color.js";
@@ -72,7 +91,7 @@ import TypingText from "../components/helpers/TypingText.vue";
 
 export default {
   components: {
-    TypingText
+    TypingText,
   },
   data() {
     return {
@@ -108,6 +127,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 +517,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>