From 064f941ca56f456152588a59950e50d624420017 Mon Sep 17 00:00:00 2001
From: Lion Arar <lion@targointernet.com>
Date: Mon, 6 Oct 2025 11:28:41 -0400
Subject: [PATCH] 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 |  4 +---
 src/modules/chatbot/components/dialogue-content.vue |  5 +++++
 src/modules/chatbot/components/dialogue-phrase.vue  |  8 ++++++--
 src/modules/chatbot/composables/chat-api.ts         |  2 +-
 src/modules/chatbot/services/messageService.ts      | 11 +++++------
 src/stores/message-store.ts                         |  5 +----
 6 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/modules/chatbot/components/conversation-box.vue b/src/modules/chatbot/components/conversation-box.vue
index 9e3181e..704b672 100644
--- a/src/modules/chatbot/components/conversation-box.vue
+++ b/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>
diff --git a/src/modules/chatbot/components/dialogue-content.vue b/src/modules/chatbot/components/dialogue-content.vue
index 64d14b7..704fac9 100644
--- a/src/modules/chatbot/components/dialogue-content.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/modules/chatbot/components/dialogue-phrase.vue b/src/modules/chatbot/components/dialogue-phrase.vue
index 4b52bdc..1723e5c 100644
--- a/src/modules/chatbot/components/dialogue-phrase.vue
+++ b/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>
 
diff --git a/src/modules/chatbot/composables/chat-api.ts b/src/modules/chatbot/composables/chat-api.ts
index 5e1077c..cd5b9af 100644
--- a/src/modules/chatbot/composables/chat-api.ts
+++ b/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 };
diff --git a/src/modules/chatbot/services/messageService.ts b/src/modules/chatbot/services/messageService.ts
index a27bf08..5dd3d02 100644
--- a/src/modules/chatbot/services/messageService.ts
+++ b/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;
-  }
-};
\ No newline at end of file
+  },
+};
diff --git a/src/stores/message-store.ts b/src/stores/message-store.ts
index 72b3e1f..41b9236 100644
--- a/src/stores/message-store.ts
+++ b/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;