style: Made the user's first name appear on the chat bubble as well as the selected name for the Ai agent

src/modules/chatbot/components/conversation-box.vue

@@ -7,14 +7,12 @@ import { useChatStore } from "src/stores/message-store";
 
 const text = ref('');
 const { messages } = useChatStore();
-
 const { sendMessage } = useChatApi();
+
 const handleSend = async () => {
-  console.log(`'handleSend' ${text.value}`);
   await sendMessage(text.value);
   text.value = '';
 };
-
 </script>
 
 <template>

src/modules/chatbot/components/dialogue-content.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import DialoguePhrase from './dialogue-phrase.vue';
 import type { Message } from '../types/dialogue-message';
+import { useAuthStore } from 'src/stores/auth-store';
+
+const authStore = useAuthStore();
+const currentUser = authStore.user;
 
 defineProps<{
     messages: Message[];
@@ -14,6 +18,7 @@ defineProps<{
             :key="index"
             :text="msg.text"
             :sent="msg.sent"
+            :name="msg.sent ? currentUser.firstName : 'AI Assistant'"
         />
     </q-infinite-scroll>
 </template>

src/modules/chatbot/components/dialogue-phrase.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 
 
-defineProps<{
+const props = defineProps<{
     text: string;
     sent: boolean;
 }>();
 </script>
 
 <template>
-    <q-chat-message :sent="sent" :text="[text]" :bg-color="!sent ? 'secondary' : 'accent'">
+    <q-chat-message
+        :sent="props.sent"
+        :text="[text]"
+        :bg-color="!sent ? 'secondary' : 'accent'"
+    >
     </q-chat-message>
 </template>
 

src/modules/chatbot/composables/chat-api.ts

@@ -3,9 +3,9 @@ import { useChatStore } from "src/stores/message-store";
 
 export const useChatApi = () => {
   const chatStore = useChatStore();
+
   const sendMessage = async (text: string) => {
     await chatStore.sendMessage(text);
-    console.log(`'useChatAPI' ${text}`);
   };
 
   return { sendMessage };

src/modules/chatbot/services/messageService.ts

@@ -2,11 +2,10 @@ import type { Message } from "../types/dialogue-message";
 import { api } from "src/boot/axios";
 
 export const chatbotService = {
-
+  // Function to get the message from the backend
   getChatMessage: async (userInput: string): Promise<Message> => {
-    console.log('messageService');
-    const response = await api.post('/chat/respond', {userInput});
-    console.log({userInput});
+    const response = await api.post("/chat/respond", { userInput });
+    console.log(response.data);
     return response.data as Message;
-  }
-};
+  },
+};

src/stores/message-store.ts

@@ -4,13 +4,10 @@ import { chatbotService } from "src/modules/chatbot/services/messageService";
 import { ref } from "vue";
 
 export const useChatStore = defineStore("chat", () => {
-  const messages = ref<Message[]>([{ text: "test", sent: false }]);
+  const messages = ref<Message[]>([]);
 
   const sendMessage = async (userInput: string) => {
-    console.log(`'useChatStore' ${userInput}`);
-
     const reply = await chatbotService.getChatMessage(userInput);
-
     messages.value.push({ text: userInput, sent: true });
     messages.value.push(reply);
     return reply;