From 1b1d3798324a12c9e9849028ddbde4a14dc66f89 Mon Sep 17 00:00:00 2001
From: Gerard Chaba <tl23383@bristol.ac.uk>
Date: Tue, 11 Mar 2025 16:38:36 +0000
Subject: [PATCH 1/3] feature: create TypingText.vue class

TypingText.vue takes a text prop (the full response) and a speed prop (milliseconds delay between characters), and then gradually displays the text.
---
 .../src/components/helpers/TypingText.vue     | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 frontend/src/components/helpers/TypingText.vue

diff --git a/frontend/src/components/helpers/TypingText.vue b/frontend/src/components/helpers/TypingText.vue
new file mode 100644
index 00000000..6355198d
--- /dev/null
+++ b/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>

From dd465906af0e36c239604ea9ece3dd4c78717588 Mon Sep 17 00:00:00 2001
From: Gerard Chaba <tl23383@bristol.ac.uk>
Date: Tue, 11 Mar 2025 16:44:04 +0000
Subject: [PATCH 2/3] feature: update MainContent.vue

- Replace static assistant message rendering with TypingText component.
- Import TypingText.
- Register TypingText in components.
---
 frontend/src/components/MainContent.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/MainContent.vue b/frontend/src/components/MainContent.vue
index 4d46f0e1..42cea946 100644
--- a/frontend/src/components/MainContent.vue
+++ b/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 "./TypingText.vue";
 
 export default {
+  components: {
+    TypingText  
+  },
   data() {
     return {
       userInput: "",

From 14a92008f7dc55b7de0a218de113e47e9b2f4999 Mon Sep 17 00:00:00 2001
From: Gerard Chaba <tl23383@bristol.ac.uk>
Date: Tue, 11 Mar 2025 17:03:40 +0000
Subject: [PATCH 3/3] bugfix: update MainContent.vue

Fixed folder location for import.
---
 frontend/src/components/MainContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/MainContent.vue b/frontend/src/components/MainContent.vue
index 42cea946..fb77a761 100644
--- a/frontend/src/components/MainContent.vue
+++ b/frontend/src/components/MainContent.vue
@@ -69,7 +69,7 @@ import axios from "axios";
 import { marked } from "marked";
 import { getTheme } from "../assets/color.js";
 import {getTranslation} from "../assets/language";
-import TypingText from "./TypingText.vue";
+import TypingText from "../components/helpers/TypingText.vue";
 
 export default {
   components: {