Refactor ChatBubble to ChatMessage

src/App.vue

@@ -105,7 +105,7 @@ export default {
             // Add a new prompt message to the messages array
             this.$refs.chatMessages.messages.push({ type: "prompt", content: prompt });
 
-            // Send the prompt to all the bots and update the message bubble with the response
+            // Send the prompt to all the bots and update the message with the response
             for (const bot of this.bots) {
                 if (!this.activeBots[bot.getId()])
                     continue;
@@ -118,7 +118,7 @@ export default {
                 };
                 bot.sendPrompt(
                     prompt,
-                    this.$refs.chatMessages.updateBubble,
+                    this.$refs.chatMessages.updateMessage,
                     this.$refs.chatMessages.messages.push(message) - 1 // The index of the message in the messages array
                 );
             }

src/components/Messages/ChatMessage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['bubble', message.type]">
+    <div :class="['message', message.type]">
         <div v-if="message.type === 'response'" class="title">
             <img :src="message.logo" alt="Bot Icon" />
             <span>{{ message.name }}</span>
@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style scoped>
-.bubble {
+.message {
     border-radius: 8px;
     padding: 16px;
     word-wrap: break-word;

src/components/Messages/ChatMessages.vue

@@ -1,21 +1,21 @@
 <template>
     <div class="messages">
         <div class="message-grid" :style="{ gridTemplateColumns: gridTemplateColumns }" >
-            <bubble v-for="(message, index) in messages" 
+            <chat-message v-for="(message, index) in messages" 
                 :key="index"
                 :columns="columns"
                 :message="message">
-            </bubble>
+            </chat-message>
         </div>
     </div>
 </template>
 
 <script>
-import Bubble from "./ChatBubble.vue";
+import ChatMessage from "./ChatMessage.vue";
 
 export default {
     components: {
-        Bubble
+        ChatMessage
     },
     props: {
         columns: {
@@ -34,8 +34,8 @@ export default {
         },
     },
     methods: {
-        // Update the bubble with the new message
-        updateBubble(response, index) {
+        // Update the chat-message with the new message
+        updateMessage(response, index) {
             this.messages[index].content = response;
         }
     },