Fix the bug of conversation title

layouts/default.vue

@@ -54,7 +54,6 @@ const deleteConversation = async (index) => {
   deletingConversationIndex.value = null
   if (!error.value) {
     if (conversations.value[index].id === currentConversation.value.id) {
-      console.log('delete current conversation')
       createNewConversation()
     }
     conversations.value.splice(index, 1)
@@ -129,10 +128,15 @@ onMounted(async () => {
       >
         <v-list>
           <v-list-item
-              prepend-icon="face"
               :title="$auth.user.username"
               :subtitle="$auth.user.email"
           >
+            <template v-slot:prepend>
+              <v-icon
+                  icon="face"
+                  size="x-large"
+              ></v-icon>
+            </template>
             <template v-slot:append>
               <v-menu>
                 <template v-slot:activator="{ props }">
@@ -205,7 +209,7 @@ onMounted(async () => {
                   :to="conversation.id ? `/${conversation.id}` : undefined"
                   v-bind="props"
               >
-                <v-list-item-title>{{ conversation.topic }}</v-list-item-title>
+                <v-list-item-title>{{ conversation.topic !== "" ? conversation.topic : $t('defaultConversationTitle') }}</v-list-item-title>
                 <template v-slot:append>
                   <div
                       v-show="isHovering && conversation.id"
@@ -326,14 +330,14 @@ onMounted(async () => {
     >
       <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
 
-      <v-toolbar-title>{{ currentConversation.topic ?? runtimeConfig.public.appName }}</v-toolbar-title>
+      <v-toolbar-title>{{ currentConversation.id ? currentConversation.topic : runtimeConfig.public.appName }}</v-toolbar-title>
 
       <v-spacer></v-spacer>
 
       <v-btn
           :title="$t('newConversation')"
           icon="add"
-          @click="createNewConversation()"
+          @click="createNewConversation"
           class="d-md-none"
       ></v-btn>
       <v-btn

pages/index.vue

@@ -11,7 +11,8 @@ const conversation = ref(getDefaultConversationData())
 const loadConversation = async () => {
   const { data, error } = await useAuthFetch('/api/chat/conversations/' + route.params.id)
   if (!error.value) {
-    conversation.value = data.value
+    conversation.value = Object.assign(conversation.value, data.value)
+    console.log(conversation.value)
   }
 }
 
@@ -24,7 +25,6 @@ const loadMessage = async () => {
 
 onActivated(async () => {
   console.log('activated')
-  console.log(conversation.value)
   if (route.params.id) {
     conversation.value.loadingMessages = true
     await loadConversation()
@@ -33,9 +33,12 @@ onActivated(async () => {
   } else {
     conversation.value = getDefaultConversationData()
   }
-  console.log(conversation.value)
   currentConversation.value = Object.assign({}, conversation.value)
 })
+
+watchEffect(() => {
+  console.log('conversation.value', conversation.value)
+})
 </script>
 
 <template>

utils/helper.js

@@ -18,8 +18,6 @@ export const getConversations = async () => {
 }
 
 export const createNewConversation = () => {
-    const conversation = useConversation()
-    conversation.value = getDefaultConversationData()
     navigateTo('/')
 }