From 3ed50a84f5ad2881aadc4baded3a583317e47712 Mon Sep 17 00:00:00 2001
From: Chek Wei Tan <weiwei1@live.com.my>
Date: Sat, 25 Nov 2023 12:22:08 +0800
Subject: [PATCH] Add export / import data back (#630)

* Export chats and settings

* Migrate setting array item index to use UUID for importing and exporting

* Import chats and settings

* Add import log

---------

Co-authored-by: Sun Zhigang <sunner@gmail.com>
---
 package-lock.json              |  30 +-
 package.json                   |   2 +
 src/components/ChatSetting.vue | 589 ++++++++++++++++++++++++++++-----
 src/components/PromptModal.vue |   6 +-
 src/i18n/locales/en.json       |  13 +-
 src/i18n/locales/zh.json       |  13 +-
 src/main.js                    |   1 +
 src/store/index.js             |  53 ++-
 8 files changed, 600 insertions(+), 107 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 94e4d6ed44..b90d3e84e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,9 @@
         "compare-versions": "^6.1.0",
         "core-js": "^3.32.2",
         "dexie": "^4.0.1-alpha.25",
+        "dexie-export-import": "^4.0.7",
         "electron-builder": "^24.6.4",
+        "jszip": "^3.10.1",
         "katex": "^0.16.8",
         "langchain": "~0.0.156",
         "localforage": "^1.10.0",
@@ -7578,8 +7580,7 @@
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz",
-      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
-      "dev": true
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
     "node_modules/cors": {
       "version": "2.8.5",
@@ -8993,6 +8994,14 @@
       "resolved": "https://registry.npmmirror.com/dexie/-/dexie-4.0.1-beta.1.tgz",
       "integrity": "sha512-+IAkY8U09pavDFecWFOfTkwVN3NTmIsWZN2wh+RQ+9ya35Kr6AicQp+Tt1NDCM4UG2P/PDFBq/Mp4dt151LmuQ=="
     },
+    "node_modules/dexie-export-import": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/dexie-export-import/-/dexie-export-import-4.0.7.tgz",
+      "integrity": "sha512-h22soiockhhWch6edw8XL/JNfn7akPLuLf6kPQdR4uneG/P0XQus4I8wpjV86dck61oEYKPHm36jyft/zVK0jQ==",
+      "peerDependencies": {
+        "dexie": "^2.0.4 || ^3.0.0 || ^4.0.1-alpha.5"
+      }
+    },
     "node_modules/diff": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/diff/-/diff-5.1.0.tgz",
@@ -13263,9 +13272,8 @@
     },
     "node_modules/jszip": {
       "version": "3.10.1",
-      "resolved": "https://registry.npmmirror.com/jszip/-/jszip-3.10.1.tgz",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
       "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
-      "dev": true,
       "dependencies": {
         "lie": "~3.3.0",
         "pako": "~1.0.2",
@@ -13277,7 +13285,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/lie/-/lie-3.3.0.tgz",
       "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
-      "dev": true,
       "dependencies": {
         "immediate": "~3.0.5"
       }
@@ -16120,8 +16127,7 @@
     "node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmmirror.com/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-      "dev": true
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
     },
     "node_modules/param-case": {
       "version": "3.0.4",
@@ -17171,8 +17177,7 @@
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "dev": true
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
     "node_modules/progress": {
       "version": "2.0.3",
@@ -17636,7 +17641,6 @@
       "version": "2.3.8",
       "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz",
       "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dev": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -17650,8 +17654,7 @@
     "node_modules/readable-stream/node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "node_modules/readdirp": {
       "version": "3.6.0",
@@ -18475,8 +18478,7 @@
     "node_modules/setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
-      "dev": true
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
     },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
diff --git a/package.json b/package.json
index 1612c39414..b6d60eaf3e 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,9 @@
     "compare-versions": "^6.1.0",
     "core-js": "^3.32.2",
     "dexie": "^4.0.1-alpha.25",
+    "dexie-export-import": "^4.0.7",
     "electron-builder": "^24.6.4",
+    "jszip": "^3.10.1",
     "katex": "^0.16.8",
     "langchain": "~0.0.156",
     "localforage": "^1.10.0",
diff --git a/src/components/ChatSetting.vue b/src/components/ChatSetting.vue
index e9b247f6d7..0d0d26d5df 100644
--- a/src/components/ChatSetting.vue
+++ b/src/components/ChatSetting.vue
@@ -7,15 +7,33 @@
         :text="$t('chat.deleteAllChatHistory')"
         @click="deleteChats"
       ></v-btn>
-      <v-btn
-        disabled
-        color="primary"
-        variant="outlined"
-        :text="$t('chat.downloadAllChatHistory')"
-        @click="downloadJson"
-        style="margin-left: 10px"
-      ></v-btn>
     </v-list-item>
+    <br />
+    <v-list-item>
+      <v-list-item-title style="font-size: 1.5rem" class="pb-2">
+        {{ $t("chat.exportImport") }}</v-list-item-title
+      >
+      <v-list-item-subtitle>
+        {{ $t("chat.exportImportDesc") }}</v-list-item-subtitle
+      >
+      <div class="pt-2">
+        <v-btn
+          color="primary"
+          variant="outlined"
+          :text="$t('chat.export')"
+          @click="exportData"
+        ></v-btn>
+        <v-btn
+          color="primary"
+          variant="outlined"
+          :text="$t('chat.import')"
+          @click="importData"
+          style="margin-left: 10px"
+        >
+        </v-btn>
+      </div>
+    </v-list-item>
+    <br />
     <v-list-item>
       <v-row>
         <v-col class="align-baseline d-flex" style="font-size: 1.5rem">
@@ -148,21 +166,64 @@
     </v-card>
   </v-dialog>
   <ConfirmModal ref="confirmModal" />
+  <v-snackbar
+    v-model="snackbar.show"
+    :timeout="snackbar.timeout"
+    :color="snackbar.color"
+  >
+    {{ snackbar.text }}
+    <template v-slot:actions>
+      <v-btn variant="text" @click="snackbar.show = false">
+        {{ $t("updates.close") }}
+      </v-btn>
+    </template>
+  </v-snackbar>
+  <v-dialog width="85vw" :model-value="isShowImportProgressDialog" persistent>
+    <v-card>
+      <v-card-title> {{ $t("chat.importLog") }} </v-card-title>
+      <v-textarea
+        readonly
+        hide-details
+        rows="20"
+        v-model="importProgressText"
+        id="import-log-textarea"
+        :loading="isImportCompleted === false"
+      ></v-textarea>
+      <v-card-actions class="justify-end pr-6 pt-0" style="gap: 0.3rem">
+        <v-btn
+          variant="text"
+          @click="isShowImportProgressDialog = false"
+          :disabled="isImportCompleted === false"
+        >
+          {{ $t("modal.done") }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
-import { useStore } from "vuex";
-import i18n from "@/i18n";
-import ChatPrompt from "@/components/Messages/ChatPrompt.vue";
-import ConfirmModal from "@/components/ConfirmModal.vue";
 import bots from "@/bots";
+import ConfirmModal from "@/components/ConfirmModal.vue";
+import ChatPrompt from "@/components/Messages/ChatPrompt.vue";
+import i18n from "@/i18n";
+import Chats from "@/store/chats";
+import db from "@/store/db";
+import Messages from "@/store/messages";
+import Threads from "@/store/threads";
+import Dexie from "dexie";
+import { exportDB } from "dexie-export-import";
+import localForage from "localforage";
+import { computed, reactive, ref } from "vue";
+import { useStore } from "vuex";
 import {
-  preview,
   prefixPlaceholder,
-  templatePlaceholder,
+  preview,
   suffixPlaceholder,
+  templatePlaceholder,
 } from "../helpers/template-helper";
+import { nextTick } from "vue";
+
 const emit = defineEmits(["close-dialog"]);
 const confirmModal = ref();
 const formRef = ref(null);
@@ -172,6 +233,14 @@ const prefix = ref("");
 const template = ref("");
 const suffix = ref("");
 const previewRef = ref("");
+const importProgressText = ref("");
+const isImportCompleted = ref(false);
+const snackbar = reactive({
+  show: false,
+  text: "",
+  timeout: -1,
+  color: "",
+});
 const templateParametersInfo = `
 #### ${i18n.global.t("chat.templateParameters")}:
 | ${i18n.global.t("chat.parameter")}|${i18n.global.t("chat.description")}|
@@ -179,6 +248,7 @@ const templateParametersInfo = `
 |{botName}|${i18n.global.t("chat.botNameDesc")}|
 |{botResponse}|${i18n.global.t("chat.botResponseDesc")}|`;
 const isShowTemplateParametersDialog = ref(false);
+const isShowImportProgressDialog = ref(false);
 const store = useStore();
 const userActions = computed(() => {
   return store.state.actions.filter((p) => !p.hide);
@@ -206,83 +276,442 @@ let isEdit = false;
 const required = (value) =>
   value?.trim() ? true : i18n.global.t("prompt.required");
 
-// This function downloads the chat history as a JSON file.
-const downloadJson = () => {
-  // Get the chat history from localStorage.
-  const chatallMessages = localStorage.getItem("chatall-messages");
-  if (!chatallMessages) {
-    console.error("chatall-messages not found in localStorage");
-    return;
-  }
-
-  const chats = JSON.parse(chatallMessages)?.chats ?? [];
-
-  // Create an array of messages from the chat history.
-  const messages = chats
-    .filter((d) => !d.hide)
-    .map((chat) => ({
-      // The title of the chat.
-      title: chat.title,
-      // The messages in the chat.
-      messages: chat.messages
-        .filter((d) => !d.hide)
-        .reduce((arr, message) => {
-          const t = message.type;
-          const content = message.content;
-          if (t == "prompt") {
-            arr.push({
-              prompt: content,
-              responses: [],
-            });
-          } else {
-            const botClassname = message.className;
-            const bot = bots.getBotByClassName(botClassname);
-            const botName = bot.getFullname();
-            arr.at(-1).responses.push({
-              content,
-              botName,
-              botClassname,
-              botModel: message.model,
-              highlight: message.highlight,
-            });
-          }
-          return arr;
-        }, []),
-    }));
-
-  // Create a blob that contains the JSON data.
-  // The space parameter specifies the indentation of nested objects in the string representation.
-  const blob = new Blob([JSON.stringify({ chats: messages }, null, 2)], {
-    // The type of the blob.
-    type: "application/json",
-  });
-
-  const url = URL.createObjectURL(blob);
+const SETTING_FILE_NAME = "localforage.json";
+const CHAT_FILE_NAME = "ChatALL.json";
+const EXPORT_IMPORT_FILE_EXTENSION = ".ChatALL";
 
-  // Create a file name for the JSON file.
+function getExportedFileName() {
   const date = new Date();
   const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0"); // months are 0-based in JavaScript
+  const month = String(date.getMonth() + 1).padStart(2, "0");
   const day = String(date.getDate()).padStart(2, "0");
   const hour = String(date.getHours()).padStart(2, "0");
   const minute = String(date.getMinutes()).padStart(2, "0");
   const second = String(date.getSeconds()).padStart(2, "0");
   const fileName = `chatall-history-${year}${month}${day}-${hour}${minute}${second}`;
+  return fileName;
+}
+
+async function exportData() {
+  const confirm = await confirmModal.value.showModal(
+    "",
+    i18n.global.t("chat.exportDesc"),
+  );
+  if (confirm === false) {
+    return;
+  }
+  try {
+    const settingBlob = getSettingWithoutBotSetting();
+    const chatHistoryBlob = await exportDB(db);
+
+    const { default: JSZip } = await import("jszip");
+    const zip = new JSZip();
+    zip.file(SETTING_FILE_NAME, settingBlob);
+    zip.file(CHAT_FILE_NAME, chatHistoryBlob);
+    zip.generateAsync({ type: "blob" }).then(function (zipBlob) {
+      const url = URL.createObjectURL(zipBlob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${getExportedFileName()}${EXPORT_IMPORT_FILE_EXTENSION}`;
+      document.body.appendChild(a);
+
+      // Click the anchor element to download the file.
+      a.click();
+
+      // Remove the anchor element from the document body.
+      document.body.removeChild(a);
+
+      // Revoke the URL for the blob.
+      URL.revokeObjectURL(url);
+    });
+    snackbar.text = i18n.global.t("chat.exportSuccess");
+    snackbar.color = "success";
+  } catch (error) {
+    console.error(error);
+    snackbar.text = `${i18n.global.t("chat.exportFailed")}: ${error.message}`;
+    snackbar.color = "error";
+  }
+  snackbar.show = true;
+}
 
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = `${fileName}.json`;
-  document.body.appendChild(a);
+async function importData() {
+  const confirm = await confirmModal.value.showModal(
+    "",
+    i18n.global.t("chat.importDesc"),
+  );
+  if (confirm === false) {
+    return;
+  }
+  importProgressText.value = "";
+  isImportCompleted.value = false;
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = EXPORT_IMPORT_FILE_EXTENSION;
+  input.addEventListener("change", importDataOnChangeFile);
+  document.body.appendChild(input);
 
-  // Click the anchor element to download the file.
-  a.click();
+  // Click the input element to select the file.
+  input.click();
+}
+
+async function importDataOnChangeFile(event) {
+  try {
+    isShowImportProgressDialog.value = true;
+    logImportProgress(`Import started`);
 
-  // Remove the anchor element from the document body.
-  document.body.removeChild(a);
+    const file = event.target.files[0];
+    const { default: JSZip } = await import("jszip");
+    logImportProgress(`Reading file "${file.name}" (${file.size} bytes)`);
+    const zip = await JSZip.loadAsync(file);
+    logImportProgress(
+      `Done reading file "${file.name}", containing ${
+        Object.keys(zip?.files).length
+      } files`,
+    );
+
+    let chatString;
+    let settingString;
+    await new Promise((resolve, reject) => {
+      let fileCount = 0;
+      zip.forEach(async (relativePath, zipEntry) => {
+        try {
+          logImportProgress(`Reading file "${relativePath}"`);
+          const zipFileString = await zipEntry.async("string");
+          logImportProgress(
+            `Done reading "${relativePath}" content, length: ${zipFileString?.length}`,
+          );
+          if (relativePath === CHAT_FILE_NAME) {
+            chatString = zipFileString;
+          } else if (relativePath === SETTING_FILE_NAME) {
+            settingString = zipFileString;
+          }
+          fileCount++;
+          if (fileCount === 2) {
+            resolve();
+          }
+        } catch (error) {
+          reject(error);
+        }
+      });
+    });
+
+    // import ChatALL db
+    let unchangedCount = 0;
+    let updatedCount = 0;
+    let addedCount = 0;
+    let errorCount = 0;
+    const addedRecords = [];
+    const updatedRecords = [];
+    const errorRecords = [];
+
+    logImportProgress(`"${CHAT_FILE_NAME}" import started`);
+    logImportProgress(`Parsing "${CHAT_FILE_NAME}" content to JSON object`);
+    const chatDbObject = JSON.parse(chatString);
+    try {
+      logImportProgress(`Retrieving chats table records`);
+      const chatRow = chatDbObject.data.data.find(
+        (d) => d.tableName === "chats",
+      )?.rows;
+      logImportProgress(`Filtering $types from chats record`);
+      const rows = chatRow
+        .filter((record) => record.index && typeof record.index === "string")
+        .map((record) => {
+          delete record.$types;
+          return record;
+        });
+      logImportProgress(
+        `Importing. There are ${chatRow?.length} records in chats table. This process may take some time.`,
+      );
+
+      for (const row of rows) {
+        try {
+          const chat = await Chats.table.get(row.index);
+          if (chat) {
+            if (compare(chat, row)) {
+              unchangedCount++;
+            } else {
+              await Chats.table.put(row);
+              updatedRecords.push({ row, table: "chats" });
+              updatedCount++;
+            }
+          } else {
+            await Chats.table.add(row);
+            addedRecords.push({ row, table: "chats" });
+            addedCount++;
+          }
+        } catch (error) {
+          errorCount++;
+          console.error(error);
+          errorRecords.push({ error, row, table: "chats" });
+        }
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      logImportProgress(
+        `chats table import completed: ${addedCount} added, ${updatedCount} updated, ${unchangedCount} unchanged, ${errorCount} error`,
+      );
+    }
+
+    unchangedCount = 0;
+    updatedCount = 0;
+    addedCount = 0;
+    errorCount = 0;
+    try {
+      logImportProgress(`Retrieving messages table records`);
+      const messagesRow = chatDbObject.data.data.find(
+        (d) => d.tableName === "messages",
+      )?.rows;
+      logImportProgress(
+        `Importing. There are ${messagesRow?.length} records in messages table. This process may take some time.`,
+      );
+      for (const row of messagesRow) {
+        try {
+          const message = await Messages.table.get(row.index);
+          if (message) {
+            if (compare(message, row)) {
+              unchangedCount++;
+            } else {
+              await Messages.table.put(row);
+              updatedRecords.push({ row, table: "messages" });
+              updatedCount++;
+            }
+          } else {
+            await Messages.table.add(row);
+            addedRecords.push({ row, table: "messages" });
+            addedCount++;
+          }
+        } catch (error) {
+          errorCount++;
+          console.error(error);
+          errorRecords.push({ error, row, table: "messages" });
+        }
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      logImportProgress(
+        `messages table import completed: ${addedCount} added, ${updatedCount} updated, ${unchangedCount} unchanged, ${errorCount} error`,
+      );
+    }
+
+    unchangedCount = 0;
+    updatedCount = 0;
+    addedCount = 0;
+    errorCount = 0;
+    try {
+      logImportProgress(`Retrieving threads table records`);
+      const threadsRow = chatDbObject.data.data.find(
+        (d) => d.tableName === "threads",
+      )?.rows;
+      logImportProgress(
+        `Importing. There are ${threadsRow?.length} records in threads table. This process may take some time.`,
+      );
+      for (const row of threadsRow) {
+        try {
+          const message = await Threads.table.get(row.index);
+          if (message) {
+            if (compare(message, row)) {
+              unchangedCount++;
+            } else {
+              await Threads.table.put(row);
+              updatedRecords.push({ row, table: "threads" });
+              updatedCount++;
+            }
+          } else {
+            await Threads.table.add(row);
+            addedRecords.push({ row, table: "threads" });
+            addedCount++;
+          }
+        } catch (error) {
+          errorCount++;
+          console.error(error);
+          errorRecords.push({ error, row, table: "threads" });
+        }
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      logImportProgress(
+        `threads table import completed: ${addedCount} added, ${updatedCount} updated, ${unchangedCount} unchanged, ${errorCount} error`,
+      );
+    }
+
+    // import localforage keyvaluepairs
+    logImportProgress(`"${SETTING_FILE_NAME}" import started`);
+    logImportProgress(`Parsing "${SETTING_FILE_NAME}" content to JSON object`);
+    const settingDbObject = JSON.parse(settingString);
+    logImportProgress(`Retrieving keyvaluepairs table records`);
+    const rows = settingDbObject.data.data.find(
+      (d) => d.tableName === "keyvaluepairs",
+    )?.rows;
+    logImportProgress(
+      `Importing. There are ${rows?.length} records in keyvaluepairs table. This process may take some time.`,
+    );
+
+    unchangedCount = 0;
+    updatedCount = 0;
+    addedCount = 0;
+    errorCount = 0;
+    try {
+      if (rows.length && rows[0].$ && rows[0].$.length > 1) {
+        const chatallKey = rows[0].$[1];
+        for (const key in chatallKey) {
+          try {
+            if (Array.isArray(chatallKey[key])) {
+              const storeIndexes = store.state[key].map((item) => item.index);
+              for (const importItem of chatallKey[key]) {
+                let index = storeIndexes.indexOf(importItem.index);
+                if (index === -1) {
+                  store.commit("pushSettingArray", {
+                    key,
+                    value: importItem,
+                  });
+                  addedRecords.push({
+                    row: `key: ${key}, added: ${JSON.stringify(importItem)}`,
+                    table: "keyvaluepairs",
+                  });
+                  addedCount++;
+                } else {
+                  if (compare(importItem, store.state[key][index])) {
+                    unchangedCount++;
+                  } else {
+                    store.commit("updateSettingArray", {
+                      key,
+                      index,
+                      value: importItem,
+                    });
+                    updatedRecords.push({
+                      row: `key: ${key}, updated: ${JSON.stringify(
+                        importItem,
+                      )}`,
+                      table: "keyvaluepairs",
+                    });
+                    updatedCount++;
+                  }
+                }
+              }
+            } else {
+              if (compare(chatallKey[key], store.state[key])) {
+                unchangedCount++;
+              } else {
+                store.commit("updateSetting", {
+                  key,
+                  value: chatallKey[key],
+                });
+                updatedRecords.push({
+                  row: `key: ${key}, updated: ${JSON.stringify(
+                    chatallKey[key],
+                  )}`,
+                  table: "keyvaluepairs",
+                });
+                updatedCount++;
+              }
+            }
+          } catch (error) {
+            errorCount++;
+            console.error(error);
+            errorRecords.push({
+              row: `key: ${key}, error: ${JSON.stringify(chatallKey[key])}`,
+              table: "keyvaluepairs",
+            });
+          }
+        }
+      } else {
+        logImportProgress(`Invalid rows`);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      logImportProgress(
+        `keyvaluepairs table import completed: ${addedCount} added, ${updatedCount} updated, ${unchangedCount} unchanged, ${errorCount} error`,
+      );
+    }
+
+    logImportProgress(`Added:\n${JSON.stringify(addedRecords, null, 2)}`);
+    logImportProgress(`Updated:\n${JSON.stringify(updatedRecords, null, 2)}`);
+    logImportProgress(`Error:\n${JSON.stringify(errorRecords, null, 2)}`);
+
+    logImportProgress(
+      `Import completed, added ${addedRecords.length}, updated ${updatedRecords.length}, error ${errorRecords.length}`,
+    );
+
+    snackbar.text = i18n.global.t("chat.importSuccess");
+    snackbar.color = "success";
+  } catch (error) {
+    console.error(error);
+    snackbar.text = `${i18n.global.t("chat.importFailed")}: ${error.message}`;
+    snackbar.color = "error";
+  } finally {
+    // Remove the input element from the document body.
+    document.body.removeChild(event.target);
+    isImportCompleted.value = true;
+    snackbar.show = true;
+  }
+}
+
+function compare(obj1, obj2) {
+  //Loop through properties in object 1
+  for (var p in obj1) {
+    //Check property exists on both objects
+    if (
+      Object.hasOwnProperty.call(obj1, p) !==
+      Object.hasOwnProperty.call(obj2, p)
+    )
+      return false;
+
+    switch (typeof obj1[p]) {
+      //Deep compare objects
+      case "object":
+        if (!compare(obj1[p], obj2[p])) return false;
+        break;
+      //Compare function code
+      case "function":
+        if (
+          typeof obj2[p] == "undefined" ||
+          (p != "compare" && obj1[p].toString() != obj2[p].toString())
+        )
+          return false;
+        break;
+      //Compare values
+      default:
+        if (obj1[p] != obj2[p]) return false;
+    }
+  }
+
+  //Check object 2 for any extra properties
+  for (const p in obj2) {
+    if (typeof obj1[p] == "undefined") return false;
+  }
+  return true;
+}
+
+function logImportProgress(text) {
+  importProgressText.value += `${new Date().toISOString()} - ${text}\n`;
+  const element = document.getElementById("import-log-textarea");
+  if (element) {
+    nextTick(() => (element.scrollTop = element.scrollHeight));
+  }
+}
+
+async function getSettingWithoutBotSetting() {
+  await localForage._dbInfo.db.close();
+  const settingDb = await new Dexie("localforage").open();
+  const userSettingBlob = await exportDB(settingDb);
+  const userSettingText = await userSettingBlob.text();
+  const userSettingJson = JSON.parse(userSettingText);
+  const allBotBrandId = bots.all.map((bot) => bot.constructor._brandId);
+  for (const brandId of allBotBrandId) {
+    // delete bot related setting
+    delete userSettingJson.data.data[0].rows[0].$[1][brandId];
+  }
+  const str = JSON.stringify(userSettingJson);
+  const bytes = new TextEncoder().encode(str);
+  return new Blob([bytes], {
+    type: "application/json;charset=utf-8",
+  });
+}
 
-  // Revoke the URL for the blob.
-  URL.revokeObjectURL(url);
-};
 async function deleteChats() {
   const confirm = await confirmModal.value.showModal(
     "",
diff --git a/src/components/PromptModal.vue b/src/components/PromptModal.vue
index 1a5179eefe..615454953d 100644
--- a/src/components/PromptModal.vue
+++ b/src/components/PromptModal.vue
@@ -77,14 +77,14 @@
                   size="x-small"
                   icon="mdi-pencil"
                   @click="edit(item)"
-                  v-if="item.index >= 0"
+                  v-if="item.index"
                 ></v-btn>
                 <v-btn
                   flat
                   size="x-small"
                   icon="mdi-delete-outline"
                   @click="deletePrompt(item)"
-                  v-if="item.index >= 0"
+                  v-if="item.index"
                 ></v-btn>
               </td>
             </tr>
@@ -197,7 +197,7 @@ const closeDialog = (value) => {
 };
 
 function pin(row) {
-  if (row.index >= 0) {
+  if (row.index) {
     store.commit("editPrompt", {
       ...row,
       isPin: !row.isPin,
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 8d1c7a7df3..3f8744cb5c 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -55,6 +55,17 @@
     "newChat": "New Chat",
     "deleteAllChatHistory": "Delete All Chat History",
     "downloadAllChatHistory": "Save All Chat History",
+    "exportImport": "Export / Import",
+    "exportImportDesc": "Export / Import settings and chats, excluding bot settings and API keys.",
+    "export": "Export Data",
+    "exportDesc": "Exporter will create a .ChatALL file containing data excluding bot settings and API keys. Confirm export?",
+    "exportFailed": "Failed to Export Data",
+    "exportSuccess": "Data Export Successful",
+    "import": "Import Data",
+    "importDesc": "Importer will attempt to merge and update your current chat with the selected .ChatALL exported file. Back up your data by clicking Export to save the current chat history and settings. This allows restoration in case of import errors. Confirm import?",
+    "importLog": "Import Log",
+    "importSuccess": "Import Data Successful",
+    "importFailed": "Import Data Failed",
     "confirmDeleteAllChatHistory": "Are you sure you want to delete all chat history? This action cannot be undone.",
     "actions": "Actions",
     "addAction": "Add Action",
@@ -308,4 +319,4 @@
   "25": "25",
   "50": "50",
   "100": "100"
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index f557634992..ec4459468c 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -55,6 +55,17 @@
     "newChat": "新对话",
     "deleteAllChatHistory": "删除所有对话记录",
     "downloadAllChatHistory": "保存所有对话记录",
+    "exportImport": "导出 / 导入",
+    "exportImportDesc": "导出 / 导入设置和聊天，不包括机器人设置和 API 密钥。",
+    "export": "导出数据",
+    "exportDesc": "导出器将创建一个包含不包括机器人设置和 API 密钥的数据的 .ChatALL 文件。确认导出？",
+    "exportFailed": "导出数据失败",
+    "exportSuccess": "数据导出成功",
+    "import": "导入数据",
+    "importDesc": "导入器将尝试将您当前的聊天与所选的 .ChatALL 导出文件合并和更新。点击导出按钮备份数据，保存当前聊天历史和设置。这允许在导入错误时进行恢复。确认导入？",
+    "importLog": "导入日志",
+    "importSuccess": "数据导入成功",
+    "importFailed": "导入数据失败",
     "confirmDeleteAllChatHistory": "你确定要删除所有对话记录吗？此操作无法撤消。",
     "actions": "操作",
     "addAction": "添加操作",
@@ -299,4 +310,4 @@
   "25": "25",
   "50": "50",
   "100": "100"
-}
\ No newline at end of file
+}
diff --git a/src/main.js b/src/main.js
index afe70de02c..0297b1b4cb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -41,6 +41,7 @@ const { ipcRenderer } = window.require("electron");
 
 await store.restored; // wait for state to be restore
 store.commit("migrateSettingsPrompts");
+store.commit("migrateSettingArrayIndexUseUUID");
 await migrateChatsMessagesThreads();
 await Chats.addFirstChatIfEmpty();
 
diff --git a/src/store/index.js b/src/store/index.js
index 3fb49be3cb..5fbe837226 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -316,26 +316,34 @@ export default createStore({
       });
     },
     addPrompt(state, values) {
-      const addPrompt = { ...values };
-      addPrompt.index = state.prompts.push(addPrompt) - 1;
+      state.prompts.push({ ...values, index: uuidv4() });
     },
     editPrompt(state, values) {
       const { index } = values;
-      state.prompts[index] = { ...state.prompts[index], ...values };
+      const prompt = state.prompts.find((item) => item.index === index);
+      for (const key in values) {
+        prompt[key] = values[key];
+      }
     },
     deletePrompt(state, values) {
-      state.prompts[values.index].hide = true;
+      const { index } = values;
+      let prompt = state.prompts.find((item) => item.index === index);
+      prompt.hide = true;
     },
     addAction(state, values) {
-      const addAction = { ...values };
-      addAction.index = state.actions.push(addAction) - 1;
+      state.actions.push({ ...values, index: uuidv4() });
     },
     editAction(state, values) {
       const { index } = values;
-      state.actions[index] = { ...state.actions[index], ...values };
+      const action = state.actions.find((item) => item.index === index);
+      for (const key in values) {
+        action[key] = values[key];
+      }
     },
     deleteAction(state, values) {
-      state.actions[values.index].hide = true;
+      const { index } = values;
+      let action = state.actions.find((item) => item.index === index);
+      action.hide = true;
     },
     addSelectedResponses(state, value) {
       value.selectedIndex = state.selectedResponses.push(value) - 1;
@@ -361,6 +369,35 @@ export default createStore({
       state.prompts = promptsData ? promptsData.prompts : [];
       localStorage.setItem("isMigratedSettingsPrompts", true);
     },
+    updateSetting(state, { key, value }) {
+      state[key] = value;
+    },
+    updateSettingArray(state, { key, value, index }) {
+      for (const prop in state[key][index]) {
+        state[key][index][prop] = value[prop];
+      }
+    },
+    pushSettingArray(state, { key, value }) {
+      state[key].push(value);
+    },
+    migrateSettingArrayIndexUseUUID(state) {
+      if (
+        localStorage.getItem("isMigrateSettingArrayIndexUseUUID") === "true"
+      ) {
+        return;
+      }
+      const settings = toRaw(state);
+      for (const key in settings) {
+        if (Array.isArray(state[key])) {
+          for (const item of state[key]) {
+            if (typeof item.index === "number" || !item.index) {
+              item.index = uuidv4();
+            }
+          }
+        }
+      }
+      localStorage.setItem("isMigrateSettingArrayIndexUseUUID", true);
+    },
   },
   actions: {
     async sendPrompt({ commit, dispatch }, { prompt, bots, promptIndex }) {