feat: Enhance cloud synchronization functionality, support syncing delete operations for messages and conversations, and add support for automatic sync settings

app/components/chat.tsx

@@ -64,6 +64,7 @@ import {
   getMessageImages,
   isVisionModel,
   isDalle3,
+  removeOutdatedEntries,
 } from "../utils";
 
 import { uploadImage as uploadImageRemote } from "@/app/utils/chat";
@@ -1023,10 +1024,20 @@ function _Chat() {
   };
 
   const deleteMessage = (msgId?: string) => {
-    chatStore.updateCurrentSession(
-      (session) =>
-        (session.messages = session.messages.filter((m) => m.id !== msgId)),
-    );
+    chatStore.updateCurrentSession((session) => {
+      session.deletedMessageIds &&
+        removeOutdatedEntries(session.deletedMessageIds);
+      session.messages = session.messages.filter((m) => {
+        if (m.id !== msgId) {
+          return true;
+        }
+        if (!session.deletedMessageIds) {
+          session.deletedMessageIds = {} as Record<string, number>;
+        }
+        session.deletedMessageIds[m.id] = Date.now();
+        return false;
+      });
+    });
   };
 
   const onDelete = (msgId: string) => {

app/components/settings.tsx

@@ -357,6 +357,21 @@ function SyncConfigModal(props: { onClose?: () => void }) {
             </select>
           </ListItem>
 
+          <ListItem
+            title={Locale.Settings.Sync.Config.EnableAutoSync.Title}
+            subTitle={Locale.Settings.Sync.Config.EnableAutoSync.SubTitle}
+          >
+            <input
+              type="checkbox"
+              checked={syncStore.enableAutoSync}
+              onChange={(e) => {
+                syncStore.update(
+                  (config) => (config.enableAutoSync = e.currentTarget.checked),
+                );
+              }}
+            ></input>
+          </ListItem>
+
           <ListItem
             title={Locale.Settings.Sync.Config.Proxy.Title}
             subTitle={Locale.Settings.Sync.Config.Proxy.SubTitle}

app/locales/cn.ts

@@ -206,6 +206,10 @@ const cn = {
           Title: "同步类型",
           SubTitle: "选择喜爱的同步服务器",
         },
+        EnableAutoSync: {
+          Title: "自动同步设置",
+          SubTitle: "在回复完成或删除消息后自动同步数据",
+        },
         Proxy: {
           Title: "启用代理",
           SubTitle: "在浏览器中同步时，必须启用代理以避免跨域限制",

app/locales/en.ts

@@ -209,6 +209,11 @@ const en: LocaleType = {
           Title: "Sync Type",
           SubTitle: "Choose your favorite sync service",
         },
+        EnableAutoSync: {
+          Title: "Auto Sync Settings",
+          SubTitle:
+            "Automatically synchronize data after replying or deleting messages",
+        },
         Proxy: {
           Title: "Enable CORS Proxy",
           SubTitle: "Enable a proxy to avoid cross-origin restrictions",

app/store/chat.ts

@@ -1,4 +1,8 @@
-import { trimTopic, getMessageTextContent } from "../utils";
+import {
+  trimTopic,
+  getMessageTextContent,
+  removeOutdatedEntries,
+} from "../utils";
 
 import Locale, { getLang } from "../locales";
 import { showToast } from "../components/ui-lib";
@@ -26,6 +30,7 @@ import { nanoid } from "nanoid";
 import { createPersistStore } from "../utils/store";
 import { collectModelsWithDefaultModel } from "../utils/model";
 import { useAccessStore } from "./access";
+import { useSyncStore } from "./sync";
 import { isDalle3 } from "../utils";
 
 export type ChatMessage = RequestMessage & {
@@ -62,6 +67,7 @@ export interface ChatSession {
   lastUpdate: number;
   lastSummarizeIndex: number;
   clearContextIndex?: number;
+  deletedMessageIds?: Record<string, number>;
 
   mask: Mask;
 }
@@ -85,6 +91,7 @@ function createEmptySession(): ChatSession {
     },
     lastUpdate: Date.now(),
     lastSummarizeIndex: 0,
+    deletedMessageIds: {},
 
     mask: createEmptyMask(),
   };
@@ -162,9 +169,19 @@ function fillTemplateWith(input: string, modelConfig: ModelConfig) {
   return output;
 }
 
+let cloudSyncTimer: any = null;
+function noticeCloudSync(): void {
+  const syncStore = useSyncStore.getState();
+  cloudSyncTimer && clearTimeout(cloudSyncTimer);
+  cloudSyncTimer = setTimeout(() => {
+    syncStore.autoSync();
+  }, 500);
+}
+
 const DEFAULT_CHAT_STATE = {
   sessions: [createEmptySession()],
   currentSessionIndex: 0,
+  deletedSessionIds: {} as Record<string, number>,
 };
 
 export const useChatStore = createPersistStore(
@@ -253,7 +270,18 @@ export const useChatStore = createPersistStore(
         if (!deletedSession) return;
 
         const sessions = get().sessions.slice();
-        sessions.splice(index, 1);
+        const deletedSessionIds = { ...get().deletedSessionIds };
+
+        removeOutdatedEntries(deletedSessionIds);
+
+        const hasDelSessions = sessions.splice(index, 1);
+        if (hasDelSessions?.length) {
+          hasDelSessions.forEach((session) => {
+            if (session.messages.length > 0) {
+              deletedSessionIds[session.id] = Date.now();
+            }
+          });
+        }
 
         const currentIndex = get().currentSessionIndex;
         let nextIndex = Math.min(
@@ -270,19 +298,24 @@ export const useChatStore = createPersistStore(
         const restoreState = {
           currentSessionIndex: get().currentSessionIndex,
           sessions: get().sessions.slice(),
+          deletedSessionIds: get().deletedSessionIds,
         };
 
         set(() => ({
           currentSessionIndex: nextIndex,
           sessions,
+          deletedSessionIds,
         }));
 
+        noticeCloudSync();
+
         showToast(
           Locale.Home.DeleteToast,
           {
             text: Locale.Home.Revert,
             onClick() {
               set(() => restoreState);
+              noticeCloudSync();
             },
           },
           5000,
@@ -310,6 +343,7 @@ export const useChatStore = createPersistStore(
         });
         get().updateStat(message);
         get().summarizeSession();
+        noticeCloudSync();
       },
 
       async onUserInput(content: string, attachImages?: string[]) {

app/store/sync.ts

@@ -26,6 +26,7 @@ export type SyncStore = GetStoreState<typeof useSyncStore>;
 
 const DEFAULT_SYNC_STATE = {
   provider: ProviderType.WebDAV,
+  enableAutoSync: true,
   useProxy: true,
   proxyUrl: corsPath(ApiPath.Cors),
 
@@ -91,6 +92,11 @@ export const useSyncStore = createPersistStore(
     },
 
     async sync() {
+      const enableAutoSync = get().enableAutoSync;
+      if (!enableAutoSync) {
+        return;
+      }
+
       const localState = getLocalAppState();
       const provider = get().provider;
       const config = get()[provider];
@@ -100,15 +106,17 @@ export const useSyncStore = createPersistStore(
         const remoteState = await client.get(config.username);
         if (!remoteState || remoteState === "") {
           await client.set(config.username, JSON.stringify(localState));
-          console.log("[Sync] Remote state is empty, using local state instead.");
-          return
+          console.log(
+            "[Sync] Remote state is empty, using local state instead.",
+          );
+          return;
         } else {
           const parsedRemoteState = JSON.parse(
             await client.get(config.username),
           ) as AppState;
           mergeAppState(localState, parsedRemoteState);
           setLocalAppState(localState);
-       } 
+        }
       } catch (e) {
         console.log("[Sync] failed to get remote state", e);
         throw e;
@@ -123,6 +131,14 @@ export const useSyncStore = createPersistStore(
       const client = this.getClient();
       return await client.check();
     },
+
+    async autoSync() {
+      const { lastSyncTime, provider } = get();
+      const syncStore = useSyncStore.getState();
+      if (lastSyncTime && syncStore.cloudSync()) {
+        syncStore.sync();
+      }
+    },
   }),
   {
     name: StoreKey.Sync,

app/utils.ts

@@ -270,3 +270,16 @@ export function isVisionModel(model: string) {
 export function isDalle3(model: string) {
   return "dall-e-3" === model;
 }
+
+export function removeOutdatedEntries(
+  timeMap: Record<string, number>,
+): Record<string, number> {
+  const oneMonthAgo = Date.now() - 30 * 24 * 60 * 60 * 1000;
+  // Delete data from a month ago
+  Object.keys(timeMap).forEach((id) => {
+    if (timeMap[id] < oneMonthAgo) {
+      delete timeMap[id];
+    }
+  });
+  return timeMap;
+}

app/utils/sync.ts

@@ -8,6 +8,7 @@ import { useMaskStore } from "../store/mask";
 import { usePromptStore } from "../store/prompt";
 import { StoreKey } from "../constant";
 import { merge } from "./merge";
+import { removeOutdatedEntries } from "@/app/utils";
 
 type NonFunctionKeys<T> = {
   [K in keyof T]: T[K] extends (...args: any[]) => any ? never : K;
@@ -66,6 +67,7 @@ const MergeStates: StateMerger = {
   [StoreKey.Chat]: (localState, remoteState) => {
     // merge sessions
     const localSessions: Record<string, ChatSession> = {};
+    const localDeletedSessionIds = localState.deletedSessionIds || {};
     localState.sessions.forEach((s) => (localSessions[s.id] = s));
 
     remoteState.sessions.forEach((remoteSession) => {
@@ -75,28 +77,70 @@ const MergeStates: StateMerger = {
       const localSession = localSessions[remoteSession.id];
       if (!localSession) {
         // if remote session is new, just merge it
-        localState.sessions.push(remoteSession);
+        if (
+          (localDeletedSessionIds[remoteSession.id] || -1) <
+          remoteSession.lastUpdate
+        ) {
+          localState.sessions.push(remoteSession);
+        }
       } else {
         // if both have the same session id, merge the messages
         const localMessageIds = new Set(localSession.messages.map((v) => v.id));
+        const localDeletedMessageIds = localSession.deletedMessageIds || {};
         remoteSession.messages.forEach((m) => {
           if (!localMessageIds.has(m.id)) {
-            localSession.messages.push(m);
+            if (
+              !localDeletedMessageIds[m.id] ||
+              new Date(localDeletedMessageIds[m.id]).toLocaleString() < m.date
+            ) {
+              localSession.messages.push(m);
+            }
           }
         });
 
+        const remoteDeletedMessageIds = remoteSession.deletedMessageIds || {};
+        localSession.messages = localSession.messages.filter((localMessage) => {
+          return (
+            !remoteDeletedMessageIds[localMessage.id] ||
+            new Date(localDeletedMessageIds[localMessage.id]).toLocaleString() <
+              localMessage.date
+          );
+        });
+
         // sort local messages with date field in asc order
         localSession.messages.sort(
           (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
         );
+
+        const deletedMessageIds = {
+          ...remoteDeletedMessageIds,
+          ...localDeletedMessageIds,
+        };
+        removeOutdatedEntries(deletedMessageIds);
+        localSession.deletedMessageIds = deletedMessageIds;
       }
     });
 
+    const remoteDeletedSessionIds = remoteState.deletedSessionIds || {};
+    localState.sessions = localState.sessions.filter((localSession) => {
+      return (
+        (remoteDeletedSessionIds[localSession.id] || -1) <=
+        localSession.lastUpdate
+      );
+    });
+
     // sort local sessions with date field in desc order
-    localState.sessions.sort(
-      (a, b) =>
-        new Date(b.lastUpdate).getTime() - new Date(a.lastUpdate).getTime(),
-    );
+    // localState.sessions.sort(
+    //   (a, b) =>
+    //     new Date(b.lastUpdate).getTime() - new Date(a.lastUpdate).getTime(),
+    // );
+
+    const deletedSessionIds = {
+      ...remoteDeletedSessionIds,
+      ...localDeletedSessionIds,
+    };
+    removeOutdatedEntries(deletedSessionIds);
+    localState.deletedSessionIds = deletedSessionIds;
 
     return localState;
   },