(feature)frontend improve exception handle

frontend/components/Attachment.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="attachment">
-    <img class="w-100 img-thumbnail" v-if="isImage" :src="attachment.url" :alt="attachment.name"/>
+    <img class="w-100 img-thumbnail" loading="lazy" v-if="isImage" :src="attachment.url" :alt="attachment.name"/>
     <video class="w-100" v-else-if="isVideo" :src="attachment.url" controls></video>
     <audio class="w-100" v-else-if="isAudio" :src="attachment.url" controls></audio>
     <a class="w-100" v-else :download='attachment.name'

frontend/components/ChatList.vue

@@ -44,7 +44,9 @@ function emitCreateNewChat() {
 }
 
 async function emitDiskImport() {
+  store.loading = true
   await useFetch(useRuntimeConfig().public.api.importFromDisk, {method: 'post'})
+  store.loading = false
   emit('update:disk-import')
 }
 

frontend/components/ImportExportChat.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
+<script setup lang="ts" xmlns="http://www.w3.org/1999/html">
 import {useMainStore} from "~/store";
 
 const store = useMainStore()
 const clickModal = ref(false)
 const chatImportRef = ref(null)
-const importChatResult = ref({})
+const errorMessage = ref(undefined)
 const disableUpload = ref(true)
 const modalClass = computed(() => {
   return {
@@ -17,7 +17,7 @@ const downloadChatPath = computed(() => useRuntimeConfig().public.api.exportChat
 
 function toggleModal() {
   clickModal.value = !clickModal.value
-  importChatResult.value = {}
+  errorMessage.value = undefined
   if (chatImportRef.value) {
     chatImportRef.value.value = ''
   }
@@ -31,20 +31,20 @@ async function onFilePicked() {
 
 async function uploadFile() {
   if (chatImportRef?.value?.files && chatImportRef?.value?.files[0]) {
-    let input = chatImportRef.value;
-    const file = input.files[0]
-    console.log(file)
-
+    store.loading = true
     const form = new FormData()
-    form.append("file", file);
-    importChatResult.value = await useAsyncData(`upload ${file.name}`, () => $fetch(importChatPath.value, {
+    form.append("file", chatImportRef.value.files[0]);
+    $fetch(importChatPath.value, {
       method: "POST",
       body: form
-    }))
-    chatImportRef.value.value = ''
-    if (importChatResult.value.data) {
+    }).then(() => {
+      store.loading = false
+      chatImportRef.value = null
       store.clearMessages()
-    }
+    }).catch(e => {
+      store.loading = false
+      errorMessage.value = e.data.detail
+    })
   }
 }
 
@@ -76,11 +76,9 @@ watch(
           </div>
           <div class="modal-body">
             <div class="form-control">
-              <div class="alert alert-success" v-if="importChatResult.data" role="alert">
-                {{ importChatResult.data }}
-              </div>
-              <div class="alert alert-warning" v-if="importChatResult.error" role="alert">
-                Failed to import, check server error logs
+              <div class="alert alert-warning" v-if="errorMessage" role="alert">
+                Failed to import<br/>
+                {{ errorMessage }}
               </div>
 
               <div class="form-group d-flex justify-content-center mb-3">

frontend/components/MessageArea.vue

@@ -76,6 +76,15 @@ watch(
     }
 )
 
+watch(
+    () => messages.value.length,
+    (sizeOfMessages) => {
+      if (sizeOfMessages === 0) {
+        refresh()
+      }
+    }
+)
+
 watch(content, async (newContent, oldContent) => {
   store.updateMessages([...newContent.reverse().map((it: any) => store.toChatMessage(it)), ...messages.value])
   await nextTick()

frontend/components/NewChatUploader.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import {useMainStore} from "~/store";
+
+const store = useMainStore()
 const emit = defineEmits(['update:chats', 'exit:dialog'])
 const chatImportRef = ref(null)
-const importChatResult = ref({})
+const importChatResult = ref({data: null, errorMessage: null})
 const fileValid = ref(false)
 const chatName = ref(null)
 const importChatPath = computed(() => {
@@ -24,20 +27,21 @@ async function onFilePicked() {
 
 async function uploadFile() {
   if (chatImportRef?.value?.files && chatImportRef?.value?.files[0]) {
-    let input = chatImportRef.value;
-    const file = input.files[0]
-    console.log(file)
-
+    store.loading = true
     const form = new FormData()
-    form.append("file", file);
-    importChatResult.value = await useAsyncData(`upload ${file.name}`, () => $fetch(importChatPath.value, {
+    form.append("file", chatImportRef.value.files[0]);
+
+    $fetch(importChatPath.value, {
       method: "POST",
       body: form
-    }))
-    chatImportRef.value.value = ''
-    if (importChatResult.value.data) {
+    }).then(() => {
+      store.loading = true
       emit('update:chats')
-    }
+      chatImportRef.value.value = {}
+    }).catch(e => {
+      store.loading = false
+      importChatResult.value.errorMessage = e.data.detail
+    })
   }
 }
 
@@ -50,11 +54,9 @@ function cancel() {
 <template>
   <div class="m-auto col-md-3">
     <div class="form-control">
-      <div class="alert alert-success" v-if="importChatResult.data" role="alert">
-        {{ importChatResult.data }}
-      </div>
-      <div class="alert alert-warning" v-if="importChatResult.error" role="alert">
-        Failed to import, check server error logs
+      <div class="alert alert-warning" v-if="importChatResult.errorMessage" role="alert">
+        Failed to import.<br/>
+        {{ importChatResult.errorMessage }}
       </div>
 
       <div class="form-group">

frontend/pages/index.vue

@@ -2,7 +2,7 @@
   <div class="index-page" ref="indexRef">
 
     <main class="container-fluid">
-      <div class="d-flex justify-content-center" v-if="loading">
+      <div class="d-flex justify-content-center" v-if="store.loading">
         <strong>Loading...</strong>
         <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
       </div>
@@ -42,16 +42,10 @@ import {useMainStore} from "~/store";
 const store = useMainStore()
 const listChatsAPIUrl = useRuntimeConfig().public.api.listChats
 const {data: chats, refresh} = await useFetch(listChatsAPIUrl)
-const loading = ref(false)
 const isMobile = ref(true)
 const indexRef = ref(null)
 const createChatAction = ref(false)
 
-function sleep(ms: number) {
-  return new Promise(resolve => setTimeout(resolve, ms))
-}
-
-
 function checkWindowSize() {
   if (indexRef.value) {
     isMobile.value = indexRef.value.offsetWidth <= 575;
@@ -60,13 +54,10 @@ function checkWindowSize() {
 }
 
 function refreshPage() {
-  loading.value = true
-  sleep(2000).then(() => {
-        createChatAction.value = false
-        refresh()
-        loading.value = false
-      }
-  )
+  store.loading = true
+  createChatAction.value = false
+  refresh()
+  store.loading = false
 }
 
 function createNewChat() {

frontend/store/index.ts

@@ -2,6 +2,7 @@ import {defineStore} from 'pinia'
 import {type Attachment, AttachmentConstructor, type Chat, ChatMessage} from "~/types";
 
 export const useMainStore = defineStore('main', () => {
+    const loading = ref(false)
     const messages = ref([] as ChatMessage[])
     const attachmentsInfo = ref([] as any)
     const chatActive = ref({} as Chat)
@@ -62,7 +63,12 @@ export const useMainStore = defineStore('main', () => {
         }
     }
 
+    function sleep(ms: number) {
+        return new Promise(resolve => setTimeout(resolve, ms))
+    }
+
     return {
+        loading,
         chatActive,
         messages,
         attachmentsInfo,
@@ -79,7 +85,8 @@ export const useMainStore = defineStore('main', () => {
         updatePageSize,
         chatExited,
         openChat,
-        toChatMessage
+        toChatMessage,
+        sleep
     }
 })