feature/issue-172/real-time-response

frontend/src/components/MainContent.vue

@@ -42,7 +42,9 @@
             <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>
-            <p v-html="formatMessage(msg.content)"></p>
+            <!-- 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>
           </div>
         </div>
 
@@ -67,8 +69,12 @@ import axios from "axios";
 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: {
+    TypingText  
+  },
   data() {
     return {
       userInput: "",

frontend/src/components/helpers/TypingText.vue

@@ -0,0 +1,64 @@
+<template>
+    <!-- v-html so that if the formatted text contains HTML, it is rendered correctly -->
+    <p v-html="displayedText"></p>
+  </template>
+
+  <script>
+  export default {
+    name: 'TypingText',
+    props: {
+      text: {
+        type: String,
+        required: true
+      },
+      speed: {
+        type: Number,
+        default: 15 // Delay in milliseconds between characters
+      }
+    },
+    data() {
+      return {
+        displayedText: '',
+        timer: null
+      };
+    },
+    watch: {
+      text(newText) {
+        this.startTyping();
+      }
+    },
+    mounted() {
+      this.startTyping();
+    },
+    methods: {
+      startTyping() {
+        // Clear any existing timer and reset displayedText
+        if (this.timer) {
+          clearInterval(this.timer);
+        }
+        this.displayedText = '';
+        let index = 0;
+        this.timer = setInterval(() => {
+          if (index < this.text.length) {
+            this.displayedText += this.text[index];
+            index++;
+          } else {
+            clearInterval(this.timer);
+          }
+        }, this.speed);
+      }
+    },
+    beforeDestroy() {
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+    }
+  };
+  </script>
+
+  <style scoped>
+  p {
+    margin: 0;
+    white-space: pre-wrap;
+  }
+  </style>