Improved the style of the chat window, using message bubbles.

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img alt="demo" src="./demos/demo.gif?v=1">
+  <img alt="demo" src="./demos/demo.png?v=1">
 </p>
 
 # ChatGPT UI

components/MsgContent.vue

@@ -20,6 +20,7 @@ const contentHtml = computed(() => {
 <template>
   <div
       v-html="contentHtml"
+      class="text-body-1 text-justify"
   ></div>
 
 </template>

pages/index.vue

@@ -3,6 +3,7 @@ definePageMeta({
   middleware: ["auth"]
 })
 import {EventStreamContentType, fetchEventSource} from '@microsoft/fetch-event-source'
+import { nextTick } from 'vue'
 
 const { $i18n, $auth } = useNuxtApp()
 const runtimeConfig = useRuntimeConfig()
@@ -49,7 +50,7 @@ const fetchReply = async (message, parentMessageId) => {
       onerror(err) {
         throw err;
       },
-      onmessage(message) {
+      async onmessage(message) {
         // console.log(message)
         const event = message.event
         const data = JSON.parse(message.data)
@@ -119,6 +120,7 @@ const showSnackbar = (text) => {
   snackbar.value = true
 }
 
+
 </script>
 
 <template>
@@ -126,21 +128,41 @@ const showSnackbar = (text) => {
       v-if="currentConversation.messages.length > 0"
       ref="chatWindow"
   >
-    <v-card
+    <v-container>
-        rounded="0"
+      <v-row>
-        elevation="0"
+        <v-col
-        v-for="(conversation, index) in currentConversation.messages"
+            v-for="(message, index) in currentConversation.messages" :key="index"
-        :key="index"
+            cols="12"
-        :variant="conversation.is_bot ? 'tonal' : 'text'"
+        >
-    >
+          <div
-      <v-container>
+              class="d-flex"
-        <v-card-text class="text-caption text-disabled">{{ $t(`roles.${conversation.is_bot?'ai':'me'}`) }}</v-card-text>
+              :class="message.is_bot ? 'justify-start mr-16' : 'justify-end ml-16'"
-        <v-card-text>
+          >
-          <MsgContent :content="conversation.message" />
+            <v-card
-        </v-card-text>
+                :color="message.is_bot ? '' : 'primary'"
-      </v-container>
+                rounded="lg"
-      <v-divider></v-divider>
+                elevation="2"
-    </v-card>
+            >
+              <v-card-text>
+                <MsgContent :content="message.message" />
+              </v-card-text>
+
+<!--              <v-card-actions-->
+<!--                  v-if="message.is_bot"-->
+<!--              >-->
+<!--                <v-spacer></v-spacer>-->
+<!--                <v-tooltip text="Copy">-->
+<!--                  <template v-slot:activator="{ props }">-->
+<!--                    <v-btn v-bind="props" icon="content_copy"></v-btn>-->
+<!--                  </template>-->
+<!--                </v-tooltip>-->
+<!--              </v-card-actions>-->
+            </v-card>
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+
     <div ref="grab" class="w-100" style="height: 200px;"></div>
   </div>
   <Welcome v-else />