style: stylized the chat message to be a little more user friendly

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> -->
+</template>

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>
+<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>