fix issue when chat export modal is hidden (#122)

frontend/components/ChatExporter.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import {useMainStore} from "~/store";
+const props = defineProps(['allowDownloadAll'])
+const store = useMainStore()
+const emit = defineEmits(['exit:dialog'])
+
+const linkDownload = computed(() => {
+  if (props.allowDownloadAll) {
+    return useRuntimeConfig().public.api.exportAllChats
+  } else {
+    return useRuntimeConfig().public.api.exportChatById.replace(":chatId", store.chatActive?.chatId?.toString())
+  }
+})
+
+const chatName = computed(() => {
+  if (props.allowDownloadAll) {
+    return "all-chats.zip"
+  } else {
+    return store.chatActive.chatName + '.zip'
+  }
+})
+
+
+function cancel() {
+  emit('exit:dialog')
+}
+
+</script>
+
+<template>
+  <div class="m-auto col-md-3">
+    <div class="form-control">
+      <div class="form-group d-flex justify-content-center mb-3">
+        <a class="d-block text-center"
+           :href="linkDownload"
+           :download="chatName"
+        >
+          Get the entire chat
+        </a>
+      </div>
+
+      <div class="btn-group" role="group">
+        <button type="button" @click="cancel"
+                class="btn btn-outline-secondary ml-2">Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

frontend/components/ChatList.vue

@@ -6,7 +6,7 @@
       <div class="btn-group" role="group">
         <button type="button" class="btn btn-outline-primary btn-sm" @click="emitCreateNewChat">Create new chat</button>
         <button type="button" class="btn btn-outline-primary btn-sm" @click="emitDiskImport">Execute Disk Import</button>
-        <import-export-chat style="margin-top: 0 !important;"  allow-download-all="true" @click="() => exitThisChat()"/>
+        <button type="button" class="btn btn-outline-primary btn-sm" @click="emitChatExport">Execute chat export</button>
       </div>
 
     </div>
@@ -25,7 +25,7 @@ import {useMainStore} from "~/store";
 const store = useMainStore()
 
 const props = defineProps(['chats', 'mobile'])
-const emit = defineEmits(['update:chat-active', 'create:chat', 'update:disk-import'])
+const emit = defineEmits(['update:chat-active', 'create:chat', 'update:disk-import', 'export:chat'])
 
 const chatOpened = computed(() => store.chatActive?.chatId != null)
 const dynamicClass = computed(() => {
@@ -43,6 +43,11 @@ function emitCreateNewChat() {
   emit('create:chat')
 }
 
+function emitChatExport() {
+  exitThisChat()
+  emit( 'export:chat')
+}
+
 async function emitDiskImport() {
   store.loading = true
   await useFetch(useRuntimeConfig().public.api.importFromDisk, {method: 'post'})

frontend/pages/index.vue

@@ -13,11 +13,17 @@
         >
 
         </new-chat-uploader>
+
+        <chat-exporter v-else-if="exportChatAction"
+                            allow-download-all="true"
+                            @exit:dialog="() => exportChatAction = false" />
+
         <template v-else>
           <chat-list :chats="chats"
                      :mobile="isMobile"
                      @create:chat="createNewChat"
                      @update:chat-active="updateChatActive"
+                     @export:chat="exportChat"
                      @update:disk-import="refreshPage"
           />
           <message-area
@@ -46,6 +52,7 @@ const {data: chats, refresh} = await useFetch(listChatsAPIUrl)
 const isMobile = ref(true)
 const indexRef = ref(null)
 const createChatAction = ref(false)
+const exportChatAction = ref(false)
 
 function checkWindowSize() {
   if (indexRef.value) {
@@ -57,6 +64,7 @@ function checkWindowSize() {
 function refreshPage() {
   store.loading = true
   createChatAction.value = false
+  exportChatAction.value = false
   refresh()
   store.loading = false
 }
@@ -65,6 +73,10 @@ function createNewChat() {
   createChatAction.value = true
 }
 
+function exportChat() {
+  exportChatAction.value = true
+}
+
 function updateChatActive(item: any) {
   store.openChat(item)
 }