From 8cc700d0e7f183aaead3c36a861833acf4d412c9 Mon Sep 17 00:00:00 2001
From: Lion Arar <lion@targointernet.com>
Date: Mon, 6 Oct 2025 15:17:32 -0400
Subject: [PATCH] style: stylized the chat message to be a little more user
 friendly

---
 .../chatbot/components/dialogue-content.vue   | 27 +++++++------------
 .../chatbot/components/dialogue-phrase.vue    | 21 ++++++++++++++-
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/modules/chatbot/components/dialogue-content.vue b/src/modules/chatbot/components/dialogue-content.vue
index 7ea148b..6d1e05b 100644
--- a/src/modules/chatbot/components/dialogue-content.vue
+++ b/src/modules/chatbot/components/dialogue-content.vue
@@ -2,13 +2,21 @@
 import DialoguePhrase from './dialogue-phrase.vue';
 import type { Message } from '../types/dialogue-message';
 import { useAuthStore } from 'src/stores/auth-store';
+import { watch, nextTick } from 'vue';
 
 const authStore = useAuthStore();
 const currentUser = authStore.user;
 
-defineProps<{
+const props = defineProps<{
     messages: Message[];
 }>();
+
+watch(props.messages, async () => {
+    await nextTick(() => {
+        const chatBody = document.querySelector('.chat-body');
+        if (chatBody) chatBody.scrollTop = chatBody.scrollHeight;
+    });
+});
 </script>
 
 <template>
@@ -37,19 +45,4 @@ defineProps<{
             </div>
         </template>
     </q-infinite-scroll>
-</template>
-
-
-
-<!-- <template>
-    <q-infinite-scroll>
-        <DialoguePhrase
-            v-for="(msg, index) in messages"
-            :key="index"
-            :text="msg.text"
-            :sent="msg.sent"
-            :name="msg.sent ? currentUser.firstName : 'AI Assistant'"
-            :class="['chat-message', msg.sent ? 'user' : 'ai']"
-        />
-    </q-infinite-scroll>
-</template> -->
\ No newline at end of file
+</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 1723e5c..86a85de 100644
--- a/src/modules/chatbot/components/dialogue-phrase.vue
+++ b/src/modules/chatbot/components/dialogue-phrase.vue
@@ -12,8 +12,27 @@ const props = defineProps<{
         :sent="props.sent"
         :text="[text]"
         :bg-color="!sent ? 'secondary' : 'accent'"
+        class="bubble"
+        :class="sent ? 'user' : 'ai'"
     >
     </q-chat-message>
 </template>
 
-<style></style>
\ No newline at end of file
+<style scoped>
+.bubble {
+    margin: 8px;
+    border-radius: 12px;
+    line-height: 1.5;
+    word-break: break-word;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+.user {
+    align-self: flex-end;
+}
+
+.ai {
+    align-self: flex-start;
+}
+</style>