From a1bd1b90880fcdd71b825430d96b1484000e0584 Mon Sep 17 00:00:00 2001
From: Chek Wei Tan <weiwei1@live.com.my>
Date: Thu, 19 Oct 2023 07:55:34 +0800
Subject: [PATCH] refactor: Use IndexedDB as storage (#576)

---
 package-lock.json                            | 110 ++++-
 package.json                                 |   4 +
 src/App.vue                                  |  18 +-
 src/bots/Bot.js                              |   5 +-
 src/components/ChatAction.vue                |  10 +-
 src/components/ChatDrawer/ChatDrawer.vue     |  80 ++--
 src/components/ChatDrawer/ChatDrawerItem.vue |  48 +-
 src/components/ChatSetting.vue               |   1 +
 src/components/Footer/FooterBar.vue          |  46 +-
 src/components/Messages/ChatMessages.vue     | 140 +++---
 src/components/Messages/ChatPrompt.vue       |   4 +-
 src/components/Messages/ChatResponse.vue     | 191 ++++----
 src/components/Messages/ChatResponses.vue    |  52 ---
 src/components/Messages/ChatThread.vue       | 103 +++--
 src/components/PromptModal.vue               |  20 +-
 src/i18n/locales/en.json                     |   6 +-
 src/i18n/locales/zh.json                     |   3 +-
 src/main.js                                  |  10 +-
 src/store/chats.js                           |  62 +++
 src/store/db.js                              |  10 +
 src/store/index.js                           | 437 ++++++++-----------
 src/store/messages.js                        |  37 ++
 src/store/messagesPersist.js                 |  10 -
 src/store/migration.js                       | 100 +++++
 src/store/promptsPersist.js                  |  10 -
 src/store/threads.js                         |  28 ++
 26 files changed, 922 insertions(+), 623 deletions(-)
 delete mode 100644 src/components/Messages/ChatResponses.vue
 create mode 100644 src/store/chats.js
 create mode 100644 src/store/db.js
 create mode 100644 src/store/messages.js
 delete mode 100644 src/store/messagesPersist.js
 create mode 100644 src/store/migration.js
 delete mode 100644 src/store/promptsPersist.js
 create mode 100644 src/store/threads.js

diff --git a/package-lock.json b/package-lock.json
index c645ff1dbf..6850674bad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,15 +12,19 @@
       "dependencies": {
         "@kangc/v-md-editor": "^2.3.16",
         "@mdi/font": "^7.2.96",
+        "@vueuse/rxjs": "^10.4.1",
         "async-lock": "^1.4.0",
         "axios": "^1.5.1",
         "babel-plugin-prismjs": "^2.1.0",
         "compare-versions": "^6.1.0",
         "core-js": "^3.32.2",
+        "dexie": "^4.0.1-alpha.25",
         "electron-builder": "^24.6.4",
         "katex": "^0.16.8",
         "langchain": "~0.0.156",
+        "localforage": "^1.10.0",
         "material-design-icons": "^3.0.1",
+        "rxjs": "^7.8.1",
         "sortablejs": "^1.15.0",
         "update-electron-app": "^2.0.1",
         "uuid": "^9.0.1",
@@ -5104,6 +5108,82 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/@vueuse/rxjs": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/rxjs/-/rxjs-10.4.1.tgz",
+      "integrity": "sha512-UU2v4qNKlVjpI9MUYVJ2lAd59IZ29ALwumh5POjaUaqZ+Sapg1+2pscxU7gVDX5pTcTvQ7LPpxDujfS8BSJ/rw==",
+      "dependencies": {
+        "@vueuse/shared": "10.4.1",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "rxjs": ">=6.0.0"
+      }
+    },
+    "node_modules/@vueuse/rxjs/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.4.1.tgz",
+      "integrity": "sha512-vz5hbAM4qA0lDKmcr2y3pPdU+2EVw/yzfRsBdu+6+USGa4PxqSQRYIUC9/NcT06y+ZgaTsyURw2I9qOFaaXHAg==",
+      "dependencies": {
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -9073,6 +9153,11 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "devOptional": true
     },
+    "node_modules/dexie": {
+      "version": "4.0.1-alpha.25",
+      "resolved": "https://registry.npmjs.org/dexie/-/dexie-4.0.1-alpha.25.tgz",
+      "integrity": "sha512-udAExYYfJaC6IzVC+ygHdlWYoYxhwYHtiITkthGgSH7dh2FBk3qqDGkJ/Mn2lfxsmATcq9qJDUjyO7yWOo/ZPA=="
+    },
     "node_modules/digest-fetch": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/digest-fetch/-/digest-fetch-1.3.0.tgz",
@@ -12293,8 +12378,7 @@
     "node_modules/immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
-      "dev": true
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
@@ -14202,6 +14286,22 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "dependencies": {
+        "lie": "3.1.1"
+      }
+    },
+    "node_modules/localforage/node_modules/lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-6.0.0.tgz",
@@ -17917,9 +18017,8 @@
     },
     "node_modules/rxjs": {
       "version": "7.8.1",
-      "resolved": "https://registry.npmmirror.com/rxjs/-/rxjs-7.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
       "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -19827,8 +19926,7 @@
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
diff --git a/package.json b/package.json
index 240a206b51..fe064e5f41 100644
--- a/package.json
+++ b/package.json
@@ -27,15 +27,19 @@
   "dependencies": {
     "@kangc/v-md-editor": "^2.3.16",
     "@mdi/font": "^7.2.96",
+    "@vueuse/rxjs": "^10.4.1",
     "async-lock": "^1.4.0",
     "axios": "^1.5.1",
     "babel-plugin-prismjs": "^2.1.0",
     "compare-versions": "^6.1.0",
     "core-js": "^3.32.2",
+    "dexie": "^4.0.1-alpha.25",
     "electron-builder": "^24.6.4",
     "katex": "^0.16.8",
     "langchain": "~0.0.156",
+    "localforage": "^1.10.0",
     "material-design-icons": "^3.0.1",
+    "rxjs": "^7.8.1",
     "sortablejs": "^1.15.0",
     "update-electron-app": "^2.0.1",
     "uuid": "^9.0.1",
diff --git a/src/App.vue b/src/App.vue
index 6f94eb78ea..4a5a29d7a9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -120,12 +120,10 @@
         </v-app-bar>
         <FindModal ref="findRef"></FindModal>
 
-        <ChatMessages
-          :chat-index="store.state.currentChatIndex"
-          :columns="columns"
-        ></ChatMessages>
+        <ChatMessages :chat="currentChat" :columns="columns"></ChatMessages>
         <FooterBar
           ref="footerBarRef"
+          :chat="currentChat"
           @update-active-bots="(bots) => (activeBots = bots)"
         ></FooterBar>
       </v-main>
@@ -162,6 +160,9 @@ import {
 } from "./components/ShortcutGuide/shortcut.const";
 
 import i18n from "./i18n";
+import Chats from "@/store/chats";
+import { useObservable } from "@vueuse/rxjs";
+import { liveQuery } from "dexie";
 
 // Components
 import ChatDrawer from "@/components/ChatDrawer/ChatDrawer.vue";
@@ -187,6 +188,15 @@ const onUpdatedSystemTheme = async () => {
   applyTheme(resolvedTheme, vuetifyTheme);
 };
 
+const currentChat = useObservable(
+  liveQuery(() => {
+    const chat = Chats.table.orderBy("selectedTime").last();
+    console.log("chat changed");
+    return chat;
+  }),
+  { initialValue: {} },
+);
+
 ipcRenderer.on("on-updated-system-theme", onUpdatedSystemTheme);
 
 const confirmModal = ref(null);
diff --git a/src/bots/Bot.js b/src/bots/Bot.js
index f1aa60211b..0734ed7608 100644
--- a/src/bots/Bot.js
+++ b/src/bots/Bot.js
@@ -1,5 +1,6 @@
 import i18n from "@/i18n";
 import store from "@/store";
+import Chats from "@/store/chats";
 
 export default class Bot {
   static _logoPackedPaths = null;
@@ -247,7 +248,9 @@ export default class Bot {
    * @returns {object} - Chat context defined by the bot
    */
   async getChatContext(createIfNotExists = true) {
-    let context = store.getters.currentChat?.contexts?.[this.getClassname()];
+    let context = (await Chats.getCurrentChat())?.contexts?.[
+      this.getClassname()
+    ];
     if (!context && createIfNotExists) {
       context = await this.createChatContext();
       this.setChatContext(context);
diff --git a/src/components/ChatAction.vue b/src/components/ChatAction.vue
index 9e62cb5070..cf0aadb4a1 100644
--- a/src/components/ChatAction.vue
+++ b/src/components/ChatAction.vue
@@ -83,6 +83,7 @@ import { preview } from "../helpers/template-helper";
 import ChatPrompt from "@/components/Messages/ChatPrompt.vue";
 import BotLogo from "@/components/Footer/BotLogo.vue";
 import _bots from "@/bots";
+import Chats from "@/store/chats";
 
 const store = useStore();
 const isEdit = ref(false);
@@ -140,8 +141,10 @@ function closeDialog(value) {
 }
 
 async function send() {
+  let newChatIndex;
   if (chatRef.value === "new") {
-    await store.dispatch("createChatAndSelect");
+    newChatIndex = await Chats.add();
+    store.commit("selectChat", newChatIndex);
   }
   await store
     .dispatch("sendPrompt", {
@@ -151,7 +154,10 @@ async function send() {
     .then(() => {
       if (chatRef.value === "new") {
         store.commit("editChatTitle", {
-          title: previewTextarea.value.substring(0, 30),
+          index: newChatIndex,
+          payload: {
+            title: previewTextarea.value.substring(0, 30),
+          },
         });
       }
     });
diff --git a/src/components/ChatDrawer/ChatDrawer.vue b/src/components/ChatDrawer/ChatDrawer.vue
index 77aabe26f5..90d34b0681 100644
--- a/src/components/ChatDrawer/ChatDrawer.vue
+++ b/src/components/ChatDrawer/ChatDrawer.vue
@@ -6,8 +6,8 @@
         density="comfortable"
         class="mb-1 border"
         :title="$t('chat.newChat')"
-        @click="onAddNewChat"
-        @shortkey="onAddNewChat"
+        @click="onAddChat"
+        @shortkey="onAddChat"
         v-shortkey="SHORTCUT_NEW_CHAT.key"
       >
         <template v-slot:prepend>
@@ -16,13 +16,16 @@
       </v-list-item>
     </v-list>
 
-    <template v-for="chat in chatsReversed">
+    <template v-for="chat in drawerItems">
       <ChatDrawerItem
         v-if="!chat.hide"
+        :key="chat.index"
         :chat="chat"
-        @confirm-hide-chat="confirmHideChat"
+        :current-chat-index="store.state.currentChatIndex"
+        @hide-chat="hideChat"
+        @select-chat="selectChat"
+        @edit-chat-title="editChatTitle"
         @focus-textarea="focusTextarea"
-        :key="chat.index"
       ></ChatDrawerItem>
     </template>
   </v-navigation-drawer>
@@ -30,58 +33,69 @@
 </template>
 
 <script setup>
-import { ref, computed, onUpdated, nextTick } from "vue";
-import { useStore } from "vuex";
-import i18n from "@/i18n";
-import ConfirmModal from "@/components/ConfirmModal.vue";
 import ChatDrawerItem from "@/components/ChatDrawer/ChatDrawerItem.vue";
+import ConfirmModal from "@/components/ConfirmModal.vue";
 import { SHORTCUT_NEW_CHAT } from "@/components/ShortcutGuide/shortcut.const";
+import i18n from "@/i18n";
+import Chats from "@/store/chats";
+import { useObservable } from "@vueuse/rxjs";
+import { liveQuery } from "dexie";
+import { nextTick, onUpdated, ref } from "vue";
+import { useStore } from "vuex";
 
 const store = useStore();
-
 const props = defineProps(["open"]);
 const emit = defineEmits(["update:open", "focusTextarea"]);
 onUpdated(setIsChatDrawerOpen);
 
 const confirmModal = ref(null);
-const chatsReversed = computed(() => store.state.chats.slice().reverse());
+const drawerItems = useObservable(
+  liveQuery(() => Chats.table.orderBy("modifiedTime").reverse().toArray()),
+);
 
 function setIsChatDrawerOpen() {
   store.commit("setIsChatDrawerOpen", props.open);
 }
 
-function onAddNewChat() {
-  store.commit("createChat");
-  store.commit("selectChat", store.state.chats.length - 1);
+function selectChat(index) {
+  store.commit("selectChat", index);
   focusTextarea();
 }
 
-async function confirmHideChat() {
-  const result = await confirmModal.value.showModal(
+async function onAddChat() {
+  store.commit("selectChat", await Chats.add());
+  focusTextarea();
+}
+
+async function hideChat() {
+  const confirm = await confirmModal.value.showModal(
     i18n.global.t("modal.confirmHideChat"),
   );
-  if (result) {
-    store.commit("hideChat");
+  if (confirm) {
+    await Chats.update(store.state.currentChatIndex, { hide: true });
     selectLatestVisibleChat();
   }
 }
 
-function selectLatestVisibleChat() {
-  let isAnyChatVisible = false;
-  for (let i = 0; i < chatsReversed.value.length; i++) {
-    const chat = chatsReversed.value[i];
-    if (!chat.hide) {
-      isAnyChatVisible = true;
-      store.commit("selectChat", chat.index);
-      focusTextarea();
-      break;
-    }
-  }
-  if (!isAnyChatVisible) {
-    // if there is no visible chat, create a new chat
-    store.commit("createChat");
-    store.commit("selectChat", store.state.chats.length - 1);
+async function editChatTitle(payload) {
+  store.commit("editChatTitle", {
+    index: store.state.currentChatIndex,
+    payload,
+  });
+}
+
+async function selectLatestVisibleChat() {
+  const latestChat = await Chats.table
+    .orderBy("modifiedTime")
+    .reverse()
+    .filter((chat) => !chat.hide)
+    .first();
+  if (latestChat) {
+    store.commit("selectChat", latestChat.index);
     focusTextarea();
+  } else {
+    // if there is no visible chat, create a new chat
+    onAddChat();
   }
 }
 
diff --git a/src/components/ChatDrawer/ChatDrawerItem.vue b/src/components/ChatDrawer/ChatDrawerItem.vue
index 5abc1e8797..22db43fec6 100644
--- a/src/components/ChatDrawer/ChatDrawerItem.vue
+++ b/src/components/ChatDrawer/ChatDrawerItem.vue
@@ -3,7 +3,7 @@
     density="comfortable"
     v-if="!isEditMode"
     :key="`chat-${props.chat.index}`"
-    :active="store.getters.currentChat.index === props.chat.index"
+    :active="props.currentChatIndex === props.chat.index"
     :title="props.chat.title"
     :value="props.chat.index"
     class="pa-3 pr-0"
@@ -13,10 +13,7 @@
     <template v-slot:prepend>
       <v-icon color="primary" class="mr-4"> mdi-message-outline </v-icon>
     </template>
-    <template
-      #append
-      v-if="store.getters.currentChat.index === props.chat.index"
-    >
+    <template #append v-if="props.currentChatIndex === props.chat.index">
       <v-btn
         flat
         size="x-small"
@@ -62,43 +59,35 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
-import { useStore } from "vuex";
+import { ref } from "vue";
 
-const store = useStore();
-const emit = defineEmits(["confirmHideChat", "focusTextarea"]);
+const emit = defineEmits([
+  "hideChat",
+  "editChatTitle",
+  "selectChat",
+  "focusTextarea",
+]);
 const props = defineProps({
   chat: {
     type: Object,
     required: true,
   },
+  currentChatIndex: {
+    type: String,
+    required: true,
+  },
 });
-watch(() => store.state.currentChatIndex, unsetCursorWait);
 
 const isEditMode = ref(false);
 const isCursorWait = ref(false);
 const chatTitleEditModel = ref("");
 
 async function onSelectChat() {
-  if (props.chat.index === store.state.currentChatIndex) return;
-  setCursorWait();
-  await new Promise((r) => setTimeout(r, 25));
-  store.commit("selectChat", props.chat.index);
-  emit("focusTextarea");
-}
-
-function setCursorWait() {
-  document.body.style.cursor = "wait";
-  isCursorWait.value = true;
-}
-
-function unsetCursorWait() {
-  document.body.style.cursor = "";
-  isCursorWait.value = false;
+  emit("selectChat", props.chat.index);
 }
 
 async function confirmHideChat() {
-  emit("confirmHideChat");
+  emit("hideChat");
 }
 
 function editChat() {
@@ -107,7 +96,7 @@ function editChat() {
 }
 
 function confirmEdit() {
-  store.commit("editChatTitle", {
+  emit("editChatTitle", {
     title: chatTitleEditModel.value,
     isEditedByUser: true,
   });
@@ -138,4 +127,9 @@ function onPressEnter(event) {
 :deep() i.v-icon {
   color: rgb(var(--v-theme-primary));
 }
+
+:deep() div.v-list-item__prepend {
+  display: block;
+  margin-right: 0.1rem;
+}
 </style>
diff --git a/src/components/ChatSetting.vue b/src/components/ChatSetting.vue
index 303ddd8a80..e9b247f6d7 100644
--- a/src/components/ChatSetting.vue
+++ b/src/components/ChatSetting.vue
@@ -8,6 +8,7 @@
         @click="deleteChats"
       ></v-btn>
       <v-btn
+        disabled
         color="primary"
         variant="outlined"
         :text="$t('chat.downloadAllChatHistory')"
diff --git a/src/components/Footer/FooterBar.vue b/src/components/Footer/FooterBar.vue
index 6650823917..88379473f7 100644
--- a/src/components/Footer/FooterBar.vue
+++ b/src/components/Footer/FooterBar.vue
@@ -114,12 +114,19 @@ import {
   SHORTCUT_PROMPT_MANAGEMENT,
   SHORTCUT_BOTS_MENU,
 } from "./../ShortcutGuide/shortcut.const";
+import Messages from "@/store/messages";
 
 const { ipcRenderer } = window.require("electron");
 
 const store = useStore();
 const matomo = useMatomo();
 const emit = defineEmits(["updateActiveBots"]);
+const props = defineProps({
+  chat: {
+    type: Object,
+    required: true,
+  },
+});
 
 const confirmModal = ref(null);
 const promptTextArea = ref(null);
@@ -131,8 +138,11 @@ const bots = ref(_bots.all);
 const activeBots = reactive({});
 const rerenderFavBotLogos = ref(0);
 const favBots = computed(() => {
+  if (!props.chat || !props.chat.favBots) {
+    return [];
+  }
   const _favBots = [];
-  store.getters.currentChat.favBots.forEach((favBot) => {
+  props.chat.favBots.forEach((favBot) => {
     _favBots.push({
       ...favBot,
       instance: _bots.getBotByClassName(favBot.classname),
@@ -228,7 +238,7 @@ function filterEnterKey(event) {
   }
 }
 
-function sendPromptToBots() {
+async function sendPromptToBots() {
   if (prompt.value.trim() === "") return;
 
   const toBots = favBots.value
@@ -237,13 +247,15 @@ function sendPromptToBots() {
 
   if (toBots.length === 0) return;
 
-  const isFirstPrompt = store.getters.currentChat.messages.length === 0;
-  store
-    .dispatch("sendPrompt", {
-      prompt: prompt.value,
-      bots: toBots,
-    })
-    .then(() => updateChatTitleWithFirstPrompt(isFirstPrompt));
+  const count = await Messages.getMessagesCount(store.state.currentChatIndex);
+  const isFirstPrompt = count === 0;
+  await store.dispatch("sendPrompt", {
+    prompt: prompt.value,
+    bots: toBots,
+  });
+  if (isFirstPrompt) {
+    updateChatTitleWithFirstPrompt();
+  }
 
   // Clear the textarea after sending the prompt
   prompt.value = "";
@@ -367,13 +379,15 @@ function initializeSortable() {
   });
 }
 
-function updateChatTitleWithFirstPrompt(isFirstPrompt) {
-  if (isFirstPrompt) {
-    // if this is first prompt, update chat title to first 30 characters of user prompt
-    store.commit("editChatTitle", {
-      title: store.getters.currentChat.messages[0].content.substring(0, 30),
-    });
-  }
+async function updateChatTitleWithFirstPrompt() {
+  // if this is first prompt, update chat title to first 30 characters of user prompt
+  const messages = await Messages.getMessages(store.state.currentChatIndex);
+  store.commit("editChatTitle", {
+    index: store.state.currentChatIndex,
+    payload: {
+      title: messages[0].content.substring(0, 30),
+    },
+  });
 }
 
 async function usePrompt(value) {
diff --git a/src/components/Messages/ChatMessages.vue b/src/components/Messages/ChatMessages.vue
index cef99cafd6..9bffecfc39 100644
--- a/src/components/Messages/ChatMessages.vue
+++ b/src/components/Messages/ChatMessages.vue
@@ -1,37 +1,38 @@
 <template>
+  <v-container v-if="loading" class="ma-0 position-fixed" style="z-index: 1">
+    <v-label class="bg-background" style="opacity: 1">{{
+      $t("chat.loading")
+    }}</v-label>
+  </v-container>
   <div class="messages">
     <div
       class="message-grid"
       :style="{ gridTemplateColumns: gridTemplateColumns }"
     >
-      <template v-for="(message, index) in messages" :key="index">
-        <!-- Check if the current message is a prompt
-          If true, render <chat-prompt> component and set responses array empty -->
+      <template v-for="(message, index) in currentChatMessages" :key="index">
         <chat-prompt
-          v-if="checkIsMessagePromptTypeAndEmptyResponsesIfTrue(message)"
+          v-if="message.type === 'prompt'"
           :columns="columns"
           :message="message"
         ></chat-prompt>
-        <template v-else>
-          <!-- If current message is response, push current message to responses array.
-            Then check if next message.type === 'prompt', if true, render <chat-responses> -->
-          <chat-responses
-            v-if="pushResponseAndCheckIsNextMessagePromptType(index, message)"
-            :columns="columns"
-            :responses="responses"
-            :update-message="updateMessage"
-          ></chat-responses>
-        </template>
+        <chat-response
+          v-else
+          :chat="chat"
+          :columns="columns"
+          :messages="message"
+        ></chat-response>
       </template>
     </div>
   </div>
 </template>
 
 <script setup>
+import Messages from "@/store/messages";
+import { liveQuery } from "dexie";
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { useStore } from "vuex";
 import ChatPrompt from "./ChatPrompt.vue";
-import ChatResponses from "./ChatResponses.vue";
+import ChatResponse from "./ChatResponse.vue";
 
 const store = useStore();
 
@@ -40,29 +41,54 @@ const props = defineProps({
     type: Number,
     default: 3,
   },
-  chatIndex: {
-    type: Number,
-    default: 0,
+  chat: {
+    type: Object,
   },
 });
 
 const autoScroll = ref(true);
+const loading = ref(false);
 const gridTemplateColumns = computed(() => `repeat(${props.columns}, 1fr)`);
-const messages = computed(() => store.state.chats[props.chatIndex].messages);
-
-const updateMessage = (index, values) => {
-  store.dispatch("updateMessage", {
-    indexes: { chatIndex: store.state.currentChatIndex, messageIndex: index },
-    message: values,
+const currentChatMessages = ref([]);
+let createChatMessageLiveQuery = (index) => {
+  return liveQuery(async () => {
+    const keys = await Messages.table
+      .where("chatIndex")
+      .equals(index)
+      .primaryKeys();
+    const messages = await Messages.table.bulkGet(keys);
+    messages.sort((a, b) => a.createdTime - b.createdTime);
+    const groupedMessage = [];
+    let responses = Object.create(null);
+    for (let i = 0; i < messages.length; i++) {
+      const message = messages[i];
+      if (message.type === "prompt") {
+        if (Object.keys(responses).length !== 0) {
+          groupedMessage.push.apply(groupedMessage, Object.values(responses));
+        }
+        groupedMessage.push(message);
+        responses = Object.create(null);
+        continue;
+      }
+      if (message.hide !== true) {
+        if (!responses[message.className]) {
+          // group responses with same bot for carousel
+          responses[message.className] = [];
+        }
+        responses[message.className].push(message);
+      }
+    }
+    if (Object.keys(responses).length !== 0) {
+      groupedMessage.push.apply(groupedMessage, Object.values(responses));
+    }
+    currentChatMessages.value = groupedMessage;
   });
 };
 
 const scrollToBottom = ({ immediately = false }) => {
-  nextTick(() => {
-    window.scrollTo({
-      top: document.documentElement.scrollHeight,
-      behavior: immediately ? "instant" : "smooth",
-    });
+  window.scrollTo({
+    top: document.documentElement.scrollHeight,
+    behavior: immediately ? "instant" : "smooth",
   });
 };
 
@@ -72,43 +98,49 @@ const autoScrollToBottom = () => {
   }
 };
 
-watch(() => store.getters.currentChat.messages.length, autoScrollToBottom);
+const currentChatIndex = computed(() => store.state.currentChatIndex);
+let currentMessageSub;
+let scrollToBottomFirst;
+watch(
+  currentChatIndex,
+  (newChat, oldChat) => {
+    if (newChat !== oldChat) {
+      loading.value = true;
+      scrollToBottomFirst = true;
+      if (currentMessageSub) {
+        currentMessageSub.unsubscribe();
+      }
+      currentMessageSub = createChatMessageLiveQuery(
+        store.state.currentChatIndex,
+      ).subscribe(() => {
+        loading.value = false;
+        if (scrollToBottomFirst) {
+          scrollToBottomFirst = false;
+          nextTick(() => scrollToBottom({ immediately: true }));
+        }
+      });
+    }
+  },
+  { immediate: true },
+);
+
 watch(() => store.state.updateCounter, autoScrollToBottom);
 
 const onScroll = () => {
   const scrollPosition = window.pageYOffset + window.innerHeight;
   autoScroll.value =
-    scrollPosition >= document.documentElement.scrollHeight - 10;
+    scrollPosition >= document.documentElement.scrollHeight - 40;
 };
 
-onMounted(() => {
-  store.getters.currentChat.messages.forEach((message) => {
-    message.done = true;
-  });
+onMounted(async () => {
+  await Messages.table
+    .filter((message) => message.done !== true)
+    .modify({ done: true });
   window.addEventListener("scroll", onScroll);
-  scrollToBottom({ immediately: true });
 });
 onUnmounted(() => {
   window.removeEventListener("scroll", onScroll);
 });
-
-let responses = []; // this array store a prompt responses
-function checkIsMessagePromptTypeAndEmptyResponsesIfTrue(message) {
-  if (message.type === "prompt") {
-    responses = []; // clear responses for next prompt's responses
-    return true;
-  }
-  return false;
-}
-
-function pushResponseAndCheckIsNextMessagePromptType(index, response) {
-  const nextIndex = index + 1;
-  if (!response.hide) responses.push(response);
-  if (nextIndex >= messages.value.length) {
-    return true; // allow last element
-  }
-  return messages.value[nextIndex].type === "prompt";
-}
 </script>
 
 <style scoped>
diff --git a/src/components/Messages/ChatPrompt.vue b/src/components/Messages/ChatPrompt.vue
index 06e309aa6a..acd97f1d74 100644
--- a/src/components/Messages/ChatPrompt.vue
+++ b/src/components/Messages/ChatPrompt.vue
@@ -2,9 +2,9 @@
   <v-card
     ref="root"
     class="message prompt"
-    :class="props.isThread ? 'thread-prompt' : ''"
+    :class="isThread ? 'thread-prompt' : ''"
   >
-    <pre>{{ props.message.content }}</pre>
+    <pre>{{ message ? message.content : "" }}</pre>
   </v-card>
 </template>
 
diff --git a/src/components/Messages/ChatResponse.vue b/src/components/Messages/ChatResponse.vue
index f5225fa01a..20294f6978 100644
--- a/src/components/Messages/ChatResponse.vue
+++ b/src/components/Messages/ChatResponse.vue
@@ -64,15 +64,13 @@
         }}</v-icon>
       </v-btn>
     </v-card-title>
-    <template v-if="props.messages.length === 1">
+    <template v-if="messages && messages.length === 1">
       <v-md-preview :text="messages[0].content" @click="handleClick" />
-      <template v-if="!props.isThread && messages[0].threadIndex !== undefined">
-        <!-- if the repsonse is not a thread and there is value in message.threadIndex, means thread existed for this response
-            we pass in threadIndex into <chat-thread> to render based on the threadIndex -->
+      <template v-if="!isThread && messages.length && messages[0].hasThread">
         <chat-thread
-          :key="rerenderThread"
-          :threadIndex="messages[0].threadIndex"
-          :updateThreadMessage="updateThreadMessage"
+          :chat="chat"
+          :messageIndex="messages[0].index"
+          :messagePromptIndex="messages[0].promptIndex"
         ></chat-thread>
       </template>
     </template>
@@ -86,13 +84,11 @@
     >
       <v-carousel-item v-for="(message, i) in messages" :key="i">
         <v-md-preview :text="message.content" @click="handleClick" />
-        <template v-if="!props.isThread && message.threadIndex !== undefined">
-          <!-- if the repsonse is not a thread and there is value in message.threadIndex, means thread existed for this response
-          we pass in threadIndex into <chat-thread> to render based on the threadIndex -->
+        <template v-if="!isThread && message && message.hasThread">
           <chat-thread
-            :key="rerenderThread"
-            :threadIndex="message.threadIndex"
-            :updateThreadMessage="updateThreadMessage"
+            :chat="chat"
+            :messageIndex="message.index"
+            :messagePromptIndex="messages[0].promptIndex"
           ></chat-thread>
         </template>
       </v-carousel-item>
@@ -136,7 +132,7 @@
           flat
           icon
           size="x-small"
-          v-if="!(!isShowResendButton && !isShowReplyButton)"
+          v-if="isShowReplyButtonInDOM"
           :style="{ visibility: isShowReplyButton ? 'visible' : 'hidden' }"
           :color="isShowReplyTextField ? 'primary' : ''"
           @click="toggleReplyButton"
@@ -180,16 +176,21 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watch, computed, nextTick, toRaw } from "vue";
-import { useStore } from "vuex";
-import i18n from "@/i18n";
-import { useMatomo } from "@/composables/matomo";
-import ConfirmModal from "@/components/ConfirmModal.vue";
-import ChatThread from "./ChatThread.vue";
 import bots from "@/bots";
+import ConfirmModal from "@/components/ConfirmModal.vue";
+import { useMatomo } from "@/composables/matomo";
+import i18n from "@/i18n";
+import Messages from "@/store/messages";
+import Threads from "@/store/threads";
 import { Theme } from "@/theme";
+import { computed, nextTick, onMounted, ref, toRaw, watch } from "vue";
+import { useStore } from "vuex";
+import ChatThread from "./ChatThread.vue";
 
 const props = defineProps({
+  chat: {
+    type: Object,
+  },
   messages: {
     type: Array,
     required: true,
@@ -198,9 +199,8 @@ const props = defineProps({
     type: Number,
     required: true,
   },
-  threadIndex: {
-    type: Number,
-    required: false,
+  messagePromptIndex: {
+    type: String,
   },
   isThread: {
     type: Boolean,
@@ -208,10 +208,17 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(["update-message", "update-thread-message"]);
-
 const matomo = useMatomo();
 const store = useStore();
+const messages = computed(() => props.messages);
+const chat = computed(() => props.chat);
+watch(
+  messages,
+  async () => {
+    carouselModel.value = maxPage.value;
+  },
+  { deep: true },
+);
 
 const root = ref();
 const replyModel = ref("");
@@ -227,7 +234,9 @@ const isSelectedResponsesEmpty = ref(
   store.state.selectedResponses.length === 0,
 );
 const botInstance = computed(() => {
-  return bots.getBotByClassName(props.messages[0].className);
+  return messages.value && messages.value.length
+    ? bots.getBotByClassName(messages.value[0].className)
+    : undefined;
 });
 
 const botLogo = computed(() => {
@@ -242,33 +251,29 @@ const isBotLogoInverted = computed(() => {
   return store.state.theme === Theme.DARK && botInstance.value?.isDarkLogo();
 });
 
-const isHighlighted = computed(() => props.messages[maxPage.value].highlight); // if last response is hightlighted, return true
+const isHighlighted = computed(() =>
+  props.messages.length ? props.messages[maxPage.value].highlight : false,
+); // if last response is hightlighted, return true
 const isAllDone = computed(() => !props.messages.some((m) => !m.done)); // if any message is not done, return false
 const isLatestPrompt = computed(
   // if the current message response to user latest prompt, return true
   // this flag is used to determine whether to hide Resend button, hide it when is not latest prompt
-  // to ensure the prompt and response in messages array is in correct order
+  // to ensure the prompt and response in messagesRef array is in correct order
   () =>
-    props.messages[0].promptIndex !== undefined &&
-    store.getters.currentChat.latestPromptIndex !== undefined &&
-    store.getters.currentChat.latestPromptIndex ===
-      props.messages[0].promptIndex,
+    props.messages.length &&
+    props.chat?.latestPromptIndex === props.messages[0].promptIndex,
 );
 
 const isLatestPromptForThread = computed(() => {
   if (props.isThread) {
     // if the current thread is response latest prompt, return true
     // this flag is used to determine whether to hide Resend button in thread, hide it when is not latest prompt
-    // to ensure the prompt and response in messages array is in correct order
-    const responseIndex =
-      store.getters.currentChat.threads[props.threadIndex].responseIndex; // get responseIndex, from current thread
-    const threadPromptIndex =
-      store.getters.currentChat.messages[responseIndex].promptIndex; // using responseIndex to get response from messages, and in the repsonse we can retrieve promptIndex
-    return (
-      threadPromptIndex !== undefined &&
-      store.getters.currentChat.latestPromptIndex !== undefined &&
-      store.getters.currentChat.latestPromptIndex === threadPromptIndex
-    );
+    // to ensure the prompt and response in messagesRef array is in correct order
+    // const responseIndex = props.chat.threads[props.threadIndex].responseIndex; // get responseIndex, from current thread
+    const threadPromptIndex = messages.value?.length
+      ? messages.value[0].promptIndex
+      : undefined; // using responseIndex to get response from messagesRef, and in the repsonse we can retrieve promptIndex
+    return props.chat?.latestThreadPromptIndex === threadPromptIndex;
   }
   return false;
 });
@@ -278,33 +283,39 @@ const isShowReplyButton = computed(() => {
     // show the thread text field when all conditions met
     !props.isThread && // if current response is not a thread,
     isAllDone.value && // if all response done,
-    messageBotIsSelected() && // if responding bot selected,
+    messageBotIsSelected.value && // if responding bot selected,
     isLatestPrompt.value // if current response is a response to latest prompt,
   );
 });
+const isShowReplyButtonInDOM = computed(() => {
+  if (props.isThread) {
+    return false;
+  } else {
+    return !(!isShowResendButton.value && !isShowReplyButton.value);
+  }
+});
 const isSomeResponsesHasThread = computed(() =>
   // if some responses contain threadIndex, return true
-  props.messages.some((m) => m.threadIndex !== undefined),
+  props.messages.some((m) => m.hasThread),
 );
 
 const isShowResendButton = computed(() => {
   // show the resend button when all conditions met
   if (props.isThread) {
     return (
+      props.chat &&
       isAllDone.value && // if all response done
-      messageBotIsSelected() && // if responding bot selected
-      props.messages[0].promptIndex !== undefined && // if current threads is a response to latest prompt
-      store.getters.currentChat.threads[props.threadIndex].latestPromptIndex !==
-        undefined &&
-      store.getters.currentChat.threads[props.threadIndex].latestPromptIndex ===
-        props.messages[0].promptIndex &&
+      messageBotIsSelected.value && // if responding bot selected
+      props.messages[0].promptIndex && // if current threads is a response to latest prompt
+      props.chat.latestPromptIndex &&
+      props.chat.latestPromptIndex === props.messagePromptIndex &&
       isLatestPromptForThread.value
     );
   } else {
     return (
       !isSomeResponsesHasThread.value && // if all responses don't have thread
       isAllDone.value && // if all response done
-      messageBotIsSelected() && // if responding bot selected
+      messageBotIsSelected.value && // if responding bot selected
       isLatestPrompt.value // if current response is a response to latest prompt
     );
   }
@@ -318,6 +329,15 @@ const getSelectButtonClass = computed(() => ({
   "hide-btn": !props.isThread && isSelectedResponsesEmpty.value,
   "hide-thread-btn": props.isThread && isSelectedResponsesEmpty.value,
 }));
+const messageBotIsSelected = computed(() => {
+  if (!messages.value.length) {
+    return false;
+  }
+  var favBot = chat.value?.favBots.find(
+    (b) => b.classname === props.messages[0].className,
+  );
+  return favBot?.selected;
+});
 
 // Send the prompt when the user presses enter and prevent the default behavior
 // But if the shift, ctrl, alt, or meta keys are pressed, do as default
@@ -338,8 +358,7 @@ function sendPromptToBot() {
   if (replyModel.value.trim() === "") return;
 
   store.dispatch("sendPromptInThread", {
-    responseIndex: props.messages[maxPage.value].index, // always send prompt in thread to last page
-    threadIndex: props.messages[carouselModel.value].threadIndex,
+    messageIndex: messages.value[messages.value.length - 1].index, // always send prompt in thread to last page
     prompt: replyModel.value,
     bot: botInstance.value,
   });
@@ -357,27 +376,11 @@ watch(
   },
 );
 
-const rerenderThread = ref(0);
-const rerenderThreadWhenChatIndexChanged = () => {
-  rerenderThread.value = Math.random();
-};
-watch(() => store.state.currentChatIndex, rerenderThreadWhenChatIndexChanged);
 watch(
   () => store.state.selectedResponses.length,
   updateIsSelectedResponsesEmpty,
 );
 
-const updateThreadMessage = (threadIndex, messageIndex, values) => {
-  store.dispatch("updateThreadMessage", {
-    indexes: {
-      chatIndex: store.state.currentChatIndex,
-      messageIndex,
-      threadIndex,
-    },
-    message: values,
-  });
-};
-
 onMounted(() => {
   root.value.$el.style.setProperty("--columns", props.columns);
 });
@@ -393,24 +396,19 @@ function copyToClipboard() {
 
 function toggleHighlight() {
   if (props.isThread) {
-    emits(
-      "update-thread-message",
-      props.threadIndex,
-      props.messages[maxPage.value].index,
-      {
-        highlight: !props.messages[maxPage.value].highlight, // only update last response highlight
-      },
-    );
+    Threads.update(props.messages[maxPage.value].index, {
+      highlight: !isHighlighted.value,
+    });
   } else {
-    emits("update-message", props.messages[maxPage.value].index, {
-      highlight: !props.messages[maxPage.value].highlight,
+    Messages.update(props.messages[maxPage.value].index, {
+      highlight: !isHighlighted.value,
     });
   }
   matomo.value?.trackEvent(
     "vote",
     "highlight",
-    props.messages[carouselModel.value].className,
-    props.messages[carouselModel.value].highlight ? -1 : 1,
+    props.messages[maxPage.value].className,
+    props.messages[maxPage.value].highlight ? -1 : 1,
   );
 }
 
@@ -420,14 +418,11 @@ async function hide() {
   );
   if (result) {
     if (props.isThread) {
-      emits(
-        "update-thread-message",
-        props.threadIndex,
-        props.messages[carouselModel.value].index,
-        { hide: true },
-      );
+      Threads.update(props.messages[carouselModel.value].index, {
+        hide: true,
+      });
     } else {
-      emits("update-message", props.messages[carouselModel.value].index, {
+      Messages.update(props.messages[carouselModel.value].index, {
         hide: true,
       });
     }
@@ -451,31 +446,26 @@ function handleClick(event) {
   electron.shell.openExternal(url);
 }
 
-function resendPrompt(responseMessage) {
+async function resendPrompt(responseMessage) {
   matomo.value?.trackEvent("vote", "resend", responseMessage.className, 1);
 
   if (responseMessage.promptIndex === undefined) {
     return;
   }
   if (props.isThread) {
-    const promptMessage =
-      store.getters.currentChat.threads[props.threadIndex].messages[
-        responseMessage.promptIndex
-      ];
+    const promptMessage = await Threads.table.get(responseMessage.promptIndex);
     if (promptMessage) {
       store.dispatch("sendPromptInThread", {
         prompt: promptMessage.content,
         bot: botInstance.value,
         promptIndex: responseMessage.promptIndex,
-        responseIndex: responseMessage.index,
-        threadIndex: props.threadIndex,
+        messageIndex: messages.value[maxPage.value].messageIndex, // always send prompt in thread to last page
       });
     } else {
       // show not found
     }
   } else {
-    const promptMessage =
-      store.getters.currentChat.messages[responseMessage.promptIndex];
+    const promptMessage = await Messages.table.get(responseMessage.promptIndex);
     if (promptMessage) {
       store.dispatch("sendPrompt", {
         prompt: promptMessage.content,
@@ -488,13 +478,6 @@ function resendPrompt(responseMessage) {
   }
 }
 
-function messageBotIsSelected() {
-  var favBot = store.getters.currentChat.favBots.find(
-    (b) => b.classname === props.messages[0].className,
-  );
-  return favBot?.selected;
-}
-
 function toggleReplyButton() {
   isShowReplyTextField.value = !isShowReplyTextField.value;
   if (isShowReplyTextField.value) {
diff --git a/src/components/Messages/ChatResponses.vue b/src/components/Messages/ChatResponses.vue
deleted file mode 100644
index effa4489ce..0000000000
--- a/src/components/Messages/ChatResponses.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <template v-for="(grouped, index) in groupedResponses" :key="index">
-    <chat-response
-      :columns="columns"
-      :messages="grouped"
-      :isThread="props.isThread"
-      :threadIndex="props.threadIndex"
-      @update-message="props.updateMessage"
-      @update-thread-message="props.updateThreadMessage"
-    ></chat-response>
-  </template>
-</template>
-
-<script setup>
-import { computed } from "vue";
-import ChatResponse from "./ChatResponse.vue";
-
-const props = defineProps({
-  responses: {
-    type: Array,
-    default: () => [],
-  },
-  columns: {
-    type: Number,
-    required: true,
-  },
-  updateMessage: {
-    type: Function,
-  },
-  updateThreadMessage: {
-    type: Function,
-  },
-  threadIndex: {
-    type: Number,
-    required: false,
-  },
-  isThread: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const groupedResponses = computed(() => {
-  // group by bot class name
-  // group responses' from same bot in an array to populate to v-carousel
-  return props.responses.reduce(function (r, a) {
-    r[a.className] = r[a.className] || [];
-    r[a.className].push(a);
-    return r;
-  }, Object.create(null));
-});
-</script>
diff --git a/src/components/Messages/ChatThread.vue b/src/components/Messages/ChatThread.vue
index a3e44e4919..3ec73456e3 100644
--- a/src/components/Messages/ChatThread.vue
+++ b/src/components/Messages/ChatThread.vue
@@ -1,65 +1,80 @@
 <template>
-  <template v-for="(message, index) in messages" :key="index">
+  <template v-for="(message, index) in currentChatMessages" :key="index">
     <chat-prompt
-      v-if="checkIsMessagePromptTypeAndEmptyResponsesIfTrue(message)"
+      v-if="message.type === 'prompt'"
       :message="message"
       :columns="1"
       :isThread="true"
     ></chat-prompt>
-    <template v-else>
-      <chat-responses
-        v-if="pushResponseAndCheckIsNextMessagePromptType(index, message)"
-        :columns="1"
-        :responses="responses"
-        :threadIndex="props.threadIndex"
-        :isThread="true"
-        :updateThreadMessage="props.updateThreadMessage"
-      ></chat-responses>
-    </template>
+    <chat-response
+      v-else
+      :chat="chat"
+      :columns="1"
+      :messages="message"
+      :messagePromptIndex="messagePromptIndex"
+      :isThread="true"
+    ></chat-response>
   </template>
 </template>
 
 <script setup>
-import { ref, computed, toRefs } from "vue";
-import { useStore } from "vuex";
 import ChatPrompt from "@/components/Messages/ChatPrompt.vue";
-import ChatResponses from "@/components/Messages/ChatResponses.vue";
-
-const store = useStore();
+import ChatResponse from "@/components/Messages/ChatResponse.vue";
+import Threads from "@/store/threads";
+import { useObservable } from "@vueuse/rxjs";
+import { liveQuery } from "dexie";
 
 const props = defineProps({
-  threadIndex: {
-    type: Number,
+  chat: {
+    type: Object,
+  },
+  messageIndex: {
+    type: String,
     required: true,
   },
-  updateThreadMessage: {
-    type: Function,
+  messagePromptIndex: {
+    type: String,
+    required: true,
   },
 });
 
-const { threadIndex } = toRefs(props);
-const thread = ref(store.getters.currentChat.threads[threadIndex.value]);
-const messages = computed(() => {
-  return (thread.value ? thread.value.messages : []).filter(
-    (message) => !message.hide,
-  );
-});
+const currentChatMessages = useObservable(
+  liveQuery(async () => {
+    const keys = await Threads.table
+      .where("messageIndex")
+      .equals(props.messageIndex)
+      .primaryKeys();
+    console.log("thread key count: ", keys.length);
+    const messages = await Threads.table.bulkGet(keys);
+    messages.sort((a, b) => a.createdTime - b.createdTime);
+
+    const groupedMessage = [];
+    let responses = Object.create(null);
+    for (let i = 0; i < messages.length; i++) {
+      const message = messages[i];
+      if (message.type === "prompt") {
+        if (Object.keys(responses).length !== 0) {
+          groupedMessage.push.apply(groupedMessage, Object.values(responses));
+        }
+        groupedMessage.push(message);
+        responses = Object.create(null);
+        continue;
+      }
 
-let responses = []; // this array store a prompt responses in a thread
-function checkIsMessagePromptTypeAndEmptyResponsesIfTrue(message) {
-  if (message.type === "prompt") {
-    responses = []; // clear responses for next prompt's responses
-    return true;
-  }
-  return false;
-}
+      if (message.hide !== true) {
+        if (!responses[message.className]) {
+          responses[message.className] = [];
+        }
+        responses[message.className].push(message);
+      }
+    }
+    if (Object.keys(responses).length !== 0) {
+      groupedMessage.push.apply(groupedMessage, Object.values(responses));
+    }
 
-function pushResponseAndCheckIsNextMessagePromptType(index, response) {
-  const nextIndex = index + 1;
-  if (!response.hide) responses.push(response);
-  if (nextIndex >= messages.value.length) {
-    return true; // allow last element
-  }
-  return messages.value[nextIndex].type === "prompt";
-}
+    currentChatMessages.value = groupedMessage;
+    console.log("groupedMessage threads: ", groupedMessage);
+    return groupedMessage;
+  }),
+);
 </script>
diff --git a/src/components/PromptModal.vue b/src/components/PromptModal.vue
index d7ff5ee79f..1a5179eefe 100644
--- a/src/components/PromptModal.vue
+++ b/src/components/PromptModal.vue
@@ -52,39 +52,39 @@
           <template v-slot:item="{ item }">
             <tr>
               <td
-                @click="usePrompt(item.raw)"
+                @click="usePrompt(item)"
                 @mouseover="showFullText($event)"
                 @mouseleave="hideFullText($event)"
               >
-                {{ item.columns.title }}
+                {{ item.title }}
               </td>
               <td
-                @click="usePrompt(item.raw)"
+                @click="usePrompt(item)"
                 @mouseover="showFullText($event)"
                 @mouseleave="hideFullText($event)"
               >
-                {{ item.columns.prompt }}
+                {{ item.prompt }}
               </td>
               <td>
                 <v-btn
                   flat
                   size="x-small"
-                  :icon="item.raw.isPin ? 'mdi-star' : 'mdi-star-outline'"
-                  @click="pin(item.raw)"
+                  :icon="item.isPin ? 'mdi-star' : 'mdi-star-outline'"
+                  @click="pin(item)"
                 ></v-btn>
                 <v-btn
                   flat
                   size="x-small"
                   icon="mdi-pencil"
-                  @click="edit(item.raw)"
-                  v-if="item.raw.index >= 0"
+                  @click="edit(item)"
+                  v-if="item.index >= 0"
                 ></v-btn>
                 <v-btn
                   flat
                   size="x-small"
                   icon="mdi-delete-outline"
-                  @click="deletePrompt(item.raw)"
-                  v-if="item.raw.index >= 0"
+                  @click="deletePrompt(item)"
+                  v-if="item.index >= 0"
                 ></v-btn>
               </td>
             </tr>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 4d6a917d57..61a8472e4f 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -69,7 +69,8 @@
     "parameter": "Parameter",
     "description": "Description",
     "botNameDesc": "name of the selected response’s bot",
-    "botResponseDesc": "the selected response"
+    "botResponseDesc": "the selected response",
+    "loading": "Loading..."
   },
   "bot": {
     "creatingConversation": "Creating conversation...",
@@ -299,7 +300,8 @@
     },
     "input": {
       "clear": "Clear"
-    }
+    },
+    "open": "open"
   },
   "10": "10",
   "25": "25",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index d642a95438..11b2f1143a 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -69,7 +69,8 @@
     "parameter": "参数",
     "description": "描述",
     "botNameDesc": "所选响应的机器人名称",
-    "botResponseDesc": "所选响应内容"
+    "botResponseDesc": "所选响应内容",
+    "loading": "加载中..."
   },
   "bot": {
     "creatingConversation": "创建新对话...",
diff --git a/src/main.js b/src/main.js
index 96db154a72..d3c890b875 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,8 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import i18n from "./i18n";
 import store from "./store";
+import Chats from "@/store/chats";
+import { migrateChatsMessagesThreads } from "@/store/migration";
 import { createVueI18nAdapter } from "vuetify/locale/adapters/vue-i18n";
 import { useI18n } from "vue-i18n";
 import "material-design-icons/iconfont/material-icons.css";
@@ -38,8 +40,12 @@ VMdPreview.use(vuepressTheme, {
 
 const { ipcRenderer } = window.require("electron");
 
-// Init storage
-store.commit("init");
+(async () => {
+  await store.restored; // wait for state to be restore
+  store.commit("migrateSettingsPrompts");
+  await migrateChatsMessagesThreads();
+  await Chats.addFirstChatIfEmpty();
+})();
 
 const defaultTheme = await resolveTheme(store.state.mode, ipcRenderer);
 store.commit("setTheme", defaultTheme);
diff --git a/src/store/chats.js b/src/store/chats.js
new file mode 100644
index 0000000000..a8b7143d16
--- /dev/null
+++ b/src/store/chats.js
@@ -0,0 +1,62 @@
+import db from "@/store/db";
+import store from "@/store/index";
+import i18n from "@/i18n";
+import { v4 as uuidv4 } from "uuid";
+
+class Chats {
+  static get table() {
+    return db.table("chats");
+  }
+
+  static async addFirstChatIfEmpty() {
+    const count = await Chats.table.count();
+    if (count === 0) {
+      store.commit(
+        "selectChat",
+        await Chats.add({
+          favBots: [
+            // default bots
+            { classname: "ChatGPT35Bot", selected: true },
+            { classname: "ChatGPT4Bot", selected: true },
+            { classname: "BingChatCreativeBot", selected: true },
+            { classname: "BingChatBalancedBot", selected: true },
+            { classname: "BingChatPreciseBot", selected: true },
+            { classname: "BardBot", selected: true },
+            { classname: "ClaudeInstantPoeBot", selected: true },
+            { classname: "FalconHC180bBot", selected: true },
+            { classname: "Llama270bBot", selected: true },
+            { classname: "VicunaBot", selected: true },
+          ],
+        }),
+      );
+    }
+  }
+
+  static async getCurrentChat() {
+    return await Chats.table.get(store.state.currentChatIndex);
+  }
+
+  static async add(payload) {
+    const currentChat = await Chats.getCurrentChat();
+    const count = await Chats.table.count();
+    const newKey = await Chats.table.add({
+      index: uuidv4(),
+      contexts: {},
+      favBots: currentChat ? currentChat.favBots : [],
+      createdTime: new Date().getTime(),
+      modifiedTime: new Date().getTime(),
+      title: `${i18n.global.t("chat.newChat")} ${count + 1}`,
+      ...payload,
+    });
+    return newKey;
+  }
+
+  static async update(index, payload) {
+    return await Chats.table.update(index, {
+      modifiedTime: new Date().getTime(),
+      ...payload,
+    });
+  }
+}
+
+export default Chats;
diff --git a/src/store/db.js b/src/store/db.js
new file mode 100644
index 0000000000..08b485ef0a
--- /dev/null
+++ b/src/store/db.js
@@ -0,0 +1,10 @@
+import Dexie from "dexie";
+
+const db = new Dexie("ChatALL");
+db.version(1).stores({
+  chats: "index, title, modifiedTime, selectedTime",
+  messages: "index, chatIndex, createdTime, modifiedTime",
+  threads: "index, chatIndex, messageIndex, createdTime, modifiedTime",
+});
+
+export default db;
diff --git a/src/store/index.js b/src/store/index.js
index 1279a9af62..d2feea115c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,30 +1,27 @@
-import { createStore } from "vuex";
-import VuexPersist from "vuex-persist";
-import i18n from "@/i18n";
-import messagesPersist from "./messagesPersist";
-import promptsPersist from "./promptsPersist";
 import { getMatomo } from "@/composables/matomo";
+import i18n from "@/i18n";
+import localForage from "localforage";
+import { isProxy, isReactive, isRef, toRaw } from "vue";
+import { createStore } from "vuex";
+import VuexPersistence from "vuex-persist";
+import Chats from "@/store/chats";
+import Messages from "@/store/messages";
+import { v4 as uuidv4 } from "uuid";
+import Threads from "./threads";
 
 let isThrottleMessage = false;
 let isThrottleThreadMessage = false;
 let messageBuffer = [];
 let threadMessageBuffer = [];
-// 初始化 VuexPersist 实例
-const vuexPersist = new VuexPersist({
-  key: "chatall-app", // 用于存储的键名，可以根据你的应用更改
-  storage: window.localStorage, // 使用 localStorage，你还可以选择其他存储方式，如 sessionStorage
+const vuexPersist = new VuexPersistence({
+  key: "chatall-app",
+  storage: localForage,
+  asyncStorage: true,
   reducer: (state) => {
     /* eslint-disable no-unused-vars */
-    const {
-      messages,
-      chats,
-      prompts,
-      updateCounter,
-      selectedResponses,
-      ...persistedState
-    } = state;
+    const { updateCounter, selectedResponses, ...persistedState } = state;
     /* eslint-enable no-unused-vars */
-    return persistedState;
+    return deepToRaw(persistedState);
   },
 });
 
@@ -92,37 +89,11 @@ export default createStore({
     phind: {
       model: "Phind Model",
     },
-    chats: [
-      {
-        title: "New Chat",
-        favBots: [
-          // default bots
-          { classname: "ChatGPT35Bot", selected: true },
-          { classname: "ChatGPT4Bot", selected: true },
-          { classname: "BingChatCreativeBot", selected: true },
-          { classname: "BingChatBalancedBot", selected: true },
-          { classname: "BingChatPreciseBot", selected: true },
-          { classname: "BardBot", selected: true },
-          { classname: "ClaudeInstantPoeBot", selected: true },
-          { classname: "FalconHC180bBot", selected: true },
-          { classname: "Llama270bBot", selected: true },
-          { classname: "VicunaBot", selected: true },
-        ],
-        contexts: {},
-        messages: [],
-        threads: [],
-        hide: false,
-        createdTime: new Date().getTime(),
-      },
-    ],
     currentChatIndex: 0,
     updateCounter: 0,
     theme: undefined,
     mode: "system",
     isChatDrawerOpen: true,
-    // TODO: delete following fields
-    selectedBots: null,
-    messages: [],
     prompts: [],
     actions: [
       {
@@ -144,16 +115,21 @@ export default createStore({
     setUuid(state, uuid) {
       state.uuid = uuid;
     },
-    setBotSelected(state, { botClassname, selected }) {
-      const currentChat = state.chats[state.currentChatIndex];
-      const bot = currentChat.favBots.find(
-        (bot) => bot.classname === botClassname,
-      );
-      if (bot) bot.selected = selected;
-      else currentChat.favBots.push({ classname: botClassname, selected });
+    async setBotSelected(state, { botClassname, selected }) {
+      const currentChat = await Chats.getCurrentChat();
+      for (let i = 0; i < currentChat.favBots.length; i++) {
+        const bot = currentChat.favBots[i];
+        if (bot.classname === botClassname) {
+          bot.selected = selected;
+          await Chats.table.update(currentChat.index, {
+            favBots: currentChat.favBots,
+          });
+          return;
+        }
+      }
     },
-    setFavBotOrder(state, newOrder) {
-      const currentChat = state.chats[state.currentChatIndex];
+    async setFavBotOrder(state, newOrder) {
+      const currentChat = await Chats.getCurrentChat();
       newOrder.forEach((botClassname, order) => {
         const bot = currentChat.favBots.find(
           (bot) => bot.classname === botClassname,
@@ -161,17 +137,27 @@ export default createStore({
         if (bot) bot.order = order;
       });
     },
-    addFavoriteBot(state, botClassname) {
-      const currentChat = state.chats[state.currentChatIndex];
+    async addFavoriteBot(state, botClassname) {
+      const currentChat = await Chats.getCurrentChat();
       const favBots = currentChat.favBots;
-      if (favBots.find((bot) => bot.classname === botClassname) == undefined)
-        favBots.push({ classname: botClassname, selected: true });
+      currentChat.favBots.push({ classname: botClassname, selected: true });
+      Chats.table.update(currentChat.index, {
+        favBots,
+      });
     },
-    removeFavoriteBot(state, botClassname) {
-      const currentChat = state.chats[state.currentChatIndex];
-      const favBots = currentChat.favBots;
-      const index = favBots.findIndex((bot) => bot.classname === botClassname);
-      favBots.splice(index, 1);
+    async removeFavoriteBot(state, botClassname) {
+      const currentChat = await Chats.getCurrentChat();
+      for (let i = 0; i < currentChat.favBots.length; i++) {
+        const bot = currentChat.favBots[i];
+        if (bot.classname === botClassname) {
+          currentChat.favBots.splice(i, 1);
+
+          await Chats.table.update(currentChat.index, {
+            favBots: currentChat.favBots,
+          });
+          return;
+        }
+      }
     },
     setCurrentLanguage(state, language) {
       state.lang = language;
@@ -217,43 +203,41 @@ export default createStore({
       state.phind = { ...state.phind, ...values };
     },
     setLatestPromptIndex(state, promptIndex) {
-      const currentChat = state.chats[state.currentChatIndex];
-      currentChat.latestPromptIndex = promptIndex;
+      Chats.table.update(state.currentChatIndex, {
+        latestPromptIndex: promptIndex,
+      });
     },
-    setLatestThreadPromptIndex(state, { threadIndex, promptIndex }) {
-      const currentChat =
-        state.chats[state.currentChatIndex].threads[threadIndex];
-      currentChat.latestPromptIndex = promptIndex;
+    setLatestThreadPromptIndex(state, { promptIndex, messageIndex }) {
+      Chats.table.update(state.currentChatIndex, {
+        latestThreadPromptIndex: promptIndex,
+      });
+      Messages.table.update(messageIndex, {
+        hasThread: true,
+      });
     },
     setResponseThreadIndex(state, { responseIndex, threadIndex }) {
       const currentChat = state.chats[state.currentChatIndex];
       currentChat.messages[responseIndex].threadIndex = threadIndex;
     },
-    updateMessage(state) {
-      messageBuffer.forEach((update) => {
-        const { indexes, message } = update;
-        const { chatIndex, messageIndex } = indexes;
-        const i = chatIndex == -1 ? state.currentChatIndex : chatIndex;
-        const chat = state.chats[i];
-        chat.messages[messageIndex] = {
-          ...chat.messages[messageIndex],
-          ...message,
-        };
-      });
+    async updateMessage(state) {
+      const keyAndChangesArr = [];
+      for (const update of messageBuffer) {
+        const { index, message } = update;
+        keyAndChangesArr.push({ key: index, changes: message });
+      }
+      await Messages.table.bulkUpdate(keyAndChangesArr);
+      state.updateCounter += 1;
       messageBuffer = [];
       isThrottleMessage = false;
     },
-    updateThreadMessage(state) {
-      threadMessageBuffer.forEach((update) => {
-        const { indexes, message } = update;
-        const { chatIndex, messageIndex, threadIndex } = indexes;
-        const i = chatIndex == -1 ? state.currentChatIndex : chatIndex;
-        const chat = state.chats[i];
-        chat.threads[threadIndex].messages[messageIndex] = {
-          ...chat.threads[threadIndex].messages[messageIndex],
-          ...message,
-        };
-      });
+    async updateThreadMessage(state) {
+      const keyAndChangesArr = [];
+      for (const update of threadMessageBuffer) {
+        const { index, message } = update;
+        keyAndChangesArr.push({ key: index, changes: message });
+      }
+      await Threads.table.bulkUpdate(keyAndChangesArr);
+      state.updateCounter += 1;
       threadMessageBuffer = [];
       isThrottleThreadMessage = false;
     },
@@ -265,45 +249,15 @@ export default createStore({
       state.updateCounter += 1;
     },
     setChatContext(state, { botClassname, context }) {
-      const currentChat = state.chats[state.currentChatIndex];
-      if (currentChat.contexts == undefined) currentChat.contexts = {};
-      currentChat.contexts[botClassname] = context;
+      Chats.table.update(state.currentChatIndex, {
+        [`contexts.${botClassname}`]: context,
+      });
     },
     clearMessages(state) {
-      const currentChat = state.chats[state.currentChatIndex];
-      currentChat.contexts = {};
-      currentChat.messages = [];
-      currentChat.threads = [];
-    },
-    init(state) {
-      // Upgrade messages data structure
-      if (state.messages.length > 0) {
-        const chat = {
-          title: i18n.global.t("chat.newChat"),
-          contexts: {},
-          messages: state.messages,
-        };
-        state.chats[0] = chat;
-        state.messages = [];
-      }
-      // Migrate to favorited bots
-      if (state.selectedBots) {
-        const bots = Object.keys(state.selectedBots);
-        state.chats[0].favBots = [];
-        for (const bot of bots) {
-          if (state.selectedBots[bot])
-            state.chats[0].favBots.push({ classname: bot, selected: true });
-        }
-        state.selectedBots = null;
-      }
-      if (state.chats[0].threads === undefined) {
-        state.chats[0].threads = [];
-      }
-      if (state.chats[0].index === undefined) {
-        state.chats[0].index = 0;
-        state.chats[0].createdTime = new Date().getTime();
-        state.isChatDrawerOpen = true;
-      }
+      Chats.table.where("index").equals(state.currentChatIndex).modify({
+        contexts: {},
+      });
+      Messages.table.where("chatIndex").equals(state.currentChatIndex).delete();
     },
     setTheme(state, theme) {
       state.theme = theme;
@@ -328,39 +282,41 @@ export default createStore({
     },
     selectChat(state, index) {
       state.currentChatIndex = index;
+      Chats.table.update(index, { selectedTime: new Date().getTime() });
     },
     hideChat(state) {
       state.chats[state.currentChatIndex].hide = true;
     },
-    editChatTitle(state, { title, isEditedByUser = false }) {
-      if (isEditedByUser) {
-        state.chats[state.currentChatIndex].title = title;
-        state.chats[state.currentChatIndex].isTitleUserEdited = true;
-      } else {
-        if (!state.chats[state.currentChatIndex].isTitleUserEdited) {
-          // if user has not edit title before, set title
-          state.chats[state.currentChatIndex].title = title;
-        } // else do not overwrite user title
+    async editChatTitle(state, { index, payload }) {
+      const currentChat = await Chats.table.get(index);
+      if (currentChat) {
+        if (
+          payload.isEditedByUser ||
+          (!currentChat.isTitleUserEdited && !payload.isEditedByUser)
+        ) {
+          Chats.update(index, {
+            ...payload,
+            isTitleUserEdited: payload.isEditedByUser
+              ? true
+              : currentChat.isTitleUserEdited,
+          });
+        }
       }
     },
     setIsChatDrawerOpen(state, isChatDrawerOpen) {
       state.isChatDrawerOpen = isChatDrawerOpen;
     },
-    deleteChats(state) {
-      const { favBots } = state.chats[state.currentChatIndex];
-      const newChats = [
-        {
-          favBots,
-          contexts: {},
-          messages: [],
-          threads: [],
-          index: 0,
-          title: i18n.global.t("chat.newChat"),
-          createdTime: new Date().getTime(),
-        },
-      ];
-      state.chats = newChats;
-      state.currentChatIndex = 0;
+    async deleteChats(state) {
+      const currentChat = await Chats.getCurrentChat();
+      await Chats.table.clear();
+      await Messages.table.clear();
+      await Threads.table.clear();
+      state.currentChatIndex = await Chats.add({
+        favBots: currentChat ? currentChat.favBots : [],
+      });
+      Chats.table.update(state.currentChatIndex, {
+        selectedTime: new Date().getTime(),
+      });
     },
     addPrompt(state, values) {
       const addPrompt = { ...values };
@@ -396,125 +352,107 @@ export default createStore({
     deleteAllSelectedResponses(state) {
       state.selectedResponses = [];
     },
+    migrateSettingsPrompts(state) {
+      if (localStorage.getItem("isMigratedSettingsPrompts") === "true") {
+        return;
+      }
+      const app = JSON.parse(localStorage.getItem("chatall-app"));
+      const promptsData = JSON.parse(localStorage.getItem("chatall-prompts"));
+      for (const key in app) {
+        state[key] = app[key];
+      }
+      state.prompts = promptsData ? promptsData.prompts : [];
+      localStorage.setItem("isMigratedSettingsPrompts", true);
+    },
   },
   actions: {
-    sendPrompt({ commit, state, dispatch }, { prompt, bots, promptIndex }) {
+    async sendPrompt({ commit, dispatch }, { prompt, bots, promptIndex }) {
       isThrottleMessage = false;
-      const currentChat = state.chats[state.currentChatIndex];
+      const currentChat = await Chats.getCurrentChat();
       if (promptIndex === undefined) {
         // if promptIndex not found, not resend, push to messages array
         const promptMessage = {
           type: "prompt",
           content: prompt,
           done: true,
-          hide: false,
         };
         // add message
-        const index = currentChat.messages.push(promptMessage);
-        promptMessage.index = index - 1;
-        promptIndex = promptMessage.index;
+        promptIndex = await Messages.add(currentChat.index, promptMessage);
       }
       commit("setLatestPromptIndex", promptIndex); // to keep track of the latest prompt index for hiding old prompt's resend button
 
+      const bulkAddReq = [];
       for (const bot of bots) {
-        const message = {
+        bulkAddReq.push({
+          index: uuidv4(),
+          promptIndex: promptIndex,
+          chatIndex: currentChat.index,
           type: "response",
           content: "",
           format: bot.getOutputFormat(),
           model: bot.constructor._model,
-          done: false,
-          highlight: false,
-          hide: false,
           className: bot.getClassname(),
-          promptIndex: promptIndex,
-        };
-
-        // workaround for tracking message position
-        message.index = currentChat.messages.push(message) - 1;
-
+          createdTime: new Date().getTime(),
+        });
+      }
+      await Messages.table.bulkAdd(bulkAddReq);
+      for (let i = 0; i < bots.length; i++) {
+        const bot = bots[i];
+        const message = bulkAddReq[i];
         bot.sendPrompt(
           prompt,
-          (indexes, values) =>
-            dispatch("updateMessage", { indexes, message: values }),
-          { chatIndex: state.currentChatIndex, messageIndex: message.index },
+          (index, values) =>
+            dispatch("updateMessage", { index, message: values }),
+          message.index,
         );
 
         getMatomo()?.trackEvent(
           "prompt",
           "sendTo",
-          bot.getClassname(),
+          message.className,
           prompt.length,
         );
       }
     },
-    sendPromptInThread(
+    async sendPromptInThread(
       { commit, state, dispatch },
-      { prompt, bot, responseIndex, threadIndex, promptIndex },
+      { prompt, bot, messageIndex, promptIndex },
     ) {
       isThrottleThreadMessage = false;
-      const currentChat = state.chats[state.currentChatIndex];
-      let thread;
-      if (threadIndex !== undefined) {
-        // existing thread
-        thread = currentChat.threads[threadIndex];
-      } else {
-        // new thread
-        const newThreadMessage = {
-          responseIndex: responseIndex,
-          messages: [],
-        };
-        newThreadMessage.index = currentChat.threads.push(newThreadMessage) - 1;
-        thread = newThreadMessage;
-        threadIndex = thread.index;
-        // update threadIndex to response
-        commit("setResponseThreadIndex", {
-          responseIndex,
-          threadIndex: thread.index,
-        });
-      }
 
-      if (promptIndex === undefined) {
-        // index starts at zero, using `if (!promptIndex)` will enter wrong condition for first time.
-        // if promptIndex not found, not resend, push to messages array
+      if (!promptIndex) {
+        // not resend
         const threadPromptMessage = {
           type: "prompt",
           content: prompt,
         };
-        // add message
-        threadPromptMessage.index =
-          thread.messages.push(threadPromptMessage) - 1;
-        promptIndex = threadPromptMessage.index;
+        promptIndex = await Threads.add(
+          state.currentChatIndex,
+          messageIndex,
+          threadPromptMessage,
+        );
       }
-      commit("setLatestThreadPromptIndex", {
-        threadIndex: thread.index,
-        promptIndex,
-      }); // to keep track of the latest prompt index for hiding old prompt's resend button
+      commit("setLatestThreadPromptIndex", { promptIndex, messageIndex }); // to keep track of the latest prompt index for hiding old prompt's resend button
 
       const threadResponseMessage = {
         type: "response",
         content: "",
         format: bot.getOutputFormat(),
         model: bot.constructor._model,
-        done: false,
-        highlight: false,
-        hide: false,
         className: bot.getClassname(),
         promptIndex: promptIndex,
       };
-
-      // workaround for tracking message position
-      threadResponseMessage.index =
-        thread.messages.push(threadResponseMessage) - 1;
+      threadResponseMessage.index = await Threads.add(
+        state.currentChatIndex,
+        messageIndex,
+        threadResponseMessage,
+      );
 
       bot.sendPrompt(
         prompt,
-        (indexes, values) =>
-          dispatch("updateThreadMessage", { indexes, message: values }),
-        {
-          chatIndex: state.currentChatIndex,
-          messageIndex: threadResponseMessage.index,
-          threadIndex: threadIndex,
-        },
+        (index, values) =>
+          dispatch("updateThreadMessage", { index, message: values }),
+        threadResponseMessage.index,
       );
 
       getMatomo()?.trackEvent(
@@ -524,8 +462,8 @@ export default createStore({
         prompt.length,
       );
     },
-    updateMessage({ commit, state }, { indexes, message: values }) {
-      messageBuffer.push({ indexes, message: values });
+    async updateMessage({ commit }, { index, message: values }) {
+      messageBuffer.push({ index, message: values });
       if (!isThrottleMessage) {
         isThrottleMessage = true;
         setTimeout(() => {
@@ -534,10 +472,8 @@ export default createStore({
         }, 200); // save every 0.2 seconds
       }
       if (values.done) {
-        const i =
-          indexes.chatIndex == -1 ? state.currentChatIndex : indexes.chatIndex;
-        const chat = state.chats[i];
-        const message = { ...chat.messages[indexes.messageIndex], ...values };
+        const chat = await Messages.table.get(index);
+        const message = { ...chat, ...values };
         getMatomo()?.trackEvent(
           "prompt",
           "received",
@@ -546,8 +482,8 @@ export default createStore({
         );
       }
     },
-    updateThreadMessage({ commit, state }, { indexes, message: values }) {
-      threadMessageBuffer.push({ indexes, message: values });
+    async updateThreadMessage({ commit }, { index, message: values }) {
+      threadMessageBuffer.push({ index, message: values });
       if (!isThrottleThreadMessage) {
         isThrottleThreadMessage = true;
         setTimeout(() => {
@@ -556,10 +492,8 @@ export default createStore({
         }, 200); // save every 0.2 seconds
       }
       if (values.done) {
-        const i =
-          indexes.chatIndex == -1 ? state.currentChatIndex : indexes.chatIndex;
-        const chat = state.chats[i];
-        let message = { ...chat.threads[indexes.threadIndex], ...values };
+        const thread = await Threads.table.get(index);
+        let message = { ...thread, ...values };
         getMatomo()?.trackEvent(
           "prompt",
           "received",
@@ -572,17 +506,11 @@ export default createStore({
       commit("addSelectedResponses", value);
       return state.selectedResponses.length - 1;
     },
-    createChatAndSelect({ commit, state }) {
-      commit("createChat");
-      commit("selectChat", state.chats.length - 1);
-    },
   },
   getters: {
-    currentChat: (state) => {
-      if (state.chats.length === 0) {
-        return null;
-      }
-      return state.chats[state.currentChatIndex];
+    currentChat: async (state) => {
+      const currentChat = await Chats.table.get(state.currentChatIndex);
+      return currentChat;
     },
     // get current chat prompt
     getCurrentChatPrompt: (state, getters) => {
@@ -590,8 +518,31 @@ export default createStore({
       return messages.filter((message) => message?.type === "prompt");
     },
   },
-  modules: {
-    // ...你的模块
-  },
-  plugins: [vuexPersist.plugin, messagesPersist.plugin, promptsPersist.plugin], // 添加插件到 store
+  modules: {},
+  plugins: [vuexPersist.plugin],
 });
+
+// call toRaw to nested array before storing with localForage
+function deepToRaw(sourceObj) {
+  const objectIterator = (input) => {
+    if (Array.isArray(input)) {
+      const result = [];
+      for (const item of input) {
+        result.push(objectIterator(item));
+      }
+      return result;
+    }
+    if (isRef(input) || isReactive(input) || isProxy(input)) {
+      return objectIterator(toRaw(input));
+    }
+    if (input && typeof input === "object") {
+      return Object.keys(input).reduce((acc, key) => {
+        acc[key] = objectIterator(input[key]);
+        return acc;
+      }, {});
+    }
+    return input;
+  };
+
+  return objectIterator(sourceObj);
+}
diff --git a/src/store/messages.js b/src/store/messages.js
new file mode 100644
index 0000000000..97386b5e47
--- /dev/null
+++ b/src/store/messages.js
@@ -0,0 +1,37 @@
+import db from "@/store/db";
+import { v4 as uuidv4 } from "uuid";
+
+class Messages {
+  static get table() {
+    return db.table("messages");
+  }
+
+  static async add(chatIndex, payload) {
+    const newKey = await Messages.table.add({
+      chatIndex,
+      index: uuidv4(),
+      createdTime: new Date().getTime(),
+      ...payload,
+    });
+    return newKey;
+  }
+
+  static async update(index, payload) {
+    return await Messages.table.update(index, {
+      modifiedTime: new Date().getTime(),
+      ...payload,
+    });
+  }
+
+  static async getMessages(index) {
+    return await Messages.table
+      .where({ chatIndex: index })
+      .sortBy("createdTime");
+  }
+
+  static async getMessagesCount(index) {
+    return await Messages.table.where({ chatIndex: index }).count();
+  }
+}
+
+export default Messages;
diff --git a/src/store/messagesPersist.js b/src/store/messagesPersist.js
deleted file mode 100644
index af82229af9..0000000000
--- a/src/store/messagesPersist.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// store/messagesPersist.js
-import VuexPersist from "vuex-persist";
-
-const messagesPersist = new VuexPersist({
-  key: "chatall-messages",
-  storage: window.localStorage,
-  reducer: (state) => ({ messages: state.messages, chats: state.chats }), // Store only messages and chats
-});
-
-export default messagesPersist;
diff --git a/src/store/migration.js b/src/store/migration.js
new file mode 100644
index 0000000000..5533bcb239
--- /dev/null
+++ b/src/store/migration.js
@@ -0,0 +1,100 @@
+import Chats from "@/store/chats";
+import Messages from "@/store/messages";
+import Threads from "@/store/threads";
+import { v4 as uuidv4 } from "uuid";
+
+const migrateChatsMessagesThreads = async () => {
+  const chatIndexMap = {};
+  let messageIndexMap = {};
+  let threadIndexMap = {};
+  const chatsMigrateData = [];
+  const messagesMigrateData = [];
+  const threadsMigrateData = [];
+  try {
+    if (localStorage.getItem("isMigratedChatsMessagesThreads") === "true") {
+      return;
+    }
+    const data = JSON.parse(localStorage.getItem("chatall-messages"));
+    if (data === null) {
+      localStorage.setItem("isMigratedChatsMessagesThreads", true);
+      return;
+    }
+    const chats = data.chats;
+    for (let i = 0; i < chats.length; i++) {
+      const chat = chats[i];
+      chat.index = getAndGenerateUuidIfNotExist(chatIndexMap, chat.index);
+      chat.modifiedTime = chat.createdTime;
+      let createdTime = chat.createdTime || 0;
+      for (let j = 0; j < chat.messages.length; j++) {
+        const message = chat.messages[j];
+        message.index = getAndGenerateUuidIfNotExist(
+          messageIndexMap,
+          message.index,
+        );
+        message.chatIndex = chat.index;
+        message.createdTime = createdTime + j;
+        messagesMigrateData.push(message);
+      }
+      for (let q = 0; q < chat.threads.length; q++) {
+        const thread = chat.threads[q];
+        const messageIndex = getAndGenerateUuidIfNotExist(
+          messageIndexMap,
+          thread.responseIndex,
+        );
+        let createdTime = chat.createdTime || 0;
+        for (let p = 0; p < thread.messages.length; p++) {
+          const threadMessage = thread.messages[p];
+          threadMessage.index = getAndGenerateUuidIfNotExist(
+            threadIndexMap,
+            threadMessage.index,
+          );
+          threadMessage.messageIndex = messageIndex;
+          threadMessage.chatIndex = chat.index;
+          threadMessage.createdTime = createdTime + p;
+          if (threadMessage.type === "response") {
+            threadMessage.promptIndex = getAndGenerateUuidIfNotExist(
+              threadIndexMap,
+              threadMessage.promptIndex,
+            );
+          }
+          threadsMigrateData.push(threadMessage);
+        }
+      }
+      messageIndexMap = {};
+      threadIndexMap = {};
+      delete chat.messages;
+      chatsMigrateData.push(chat);
+    }
+    console.log(chatsMigrateData);
+    console.log(messagesMigrateData);
+    console.log(threadsMigrateData);
+    try {
+      await Chats.table.bulkAdd(chatsMigrateData);
+    } catch (error) {
+      console.error("Chats Migration error:", error);
+    }
+    try {
+      await Messages.table.bulkAdd(messagesMigrateData);
+    } catch (error) {
+      console.error("Messages Migration error:", error);
+    }
+    try {
+      await Threads.table.bulkAdd(threadsMigrateData);
+    } catch (error) {
+      console.error("Threads Migration error:", error);
+    }
+    localStorage.setItem("isMigratedChatsMessagesThreads", true);
+    console.log("Migration done");
+  } catch (error) {
+    console.error("Migration error:", error);
+  }
+};
+
+function getAndGenerateUuidIfNotExist(map, key) {
+  if (map[key] === undefined) {
+    map[key] = uuidv4();
+  }
+  return map[key];
+}
+
+export { migrateChatsMessagesThreads };
diff --git a/src/store/promptsPersist.js b/src/store/promptsPersist.js
deleted file mode 100644
index b29f2a663a..0000000000
--- a/src/store/promptsPersist.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// store/promptsPersist.js
-import VuexPersist from "vuex-persist";
-
-const promptsPersist = new VuexPersist({
-  key: "chatall-prompts",
-  storage: window.localStorage,
-  reducer: (state) => ({ prompts: state.prompts }), // Store prompts
-});
-
-export default promptsPersist;
diff --git a/src/store/threads.js b/src/store/threads.js
new file mode 100644
index 0000000000..a847c2a64e
--- /dev/null
+++ b/src/store/threads.js
@@ -0,0 +1,28 @@
+import db from "@/store/db";
+import { v4 as uuidv4 } from "uuid";
+
+class Threads {
+  static get table() {
+    return db.table("threads");
+  }
+
+  static async add(chatIndex, messageIndex, payload) {
+    const newKey = await Threads.table.add({
+      chatIndex,
+      messageIndex,
+      index: uuidv4(),
+      createdTime: new Date().getTime(),
+      ...payload,
+    });
+    return newKey;
+  }
+
+  static async update(index, payload) {
+    return await Threads.table.update(index, {
+      modifiedTime: new Date().getTime(),
+      ...payload,
+    });
+  }
+}
+
+export default Threads;