From b2e88e993b4fab3bd820b44a2d30cb75b457c14c Mon Sep 17 00:00:00 2001
From: wangyijing <wangyijing@wangyijing>
Date: Mon, 1 Jul 2024 01:35:49 +0800
Subject: [PATCH 1/7] Add import and export functionality for sync
 configuration

---
 app/components/settings.module.scss |   8 +++
 app/components/settings.tsx         | 104 ++++++++++++++++++++++++----
 app/locales/cn.ts                   |   9 +++
 app/store/sync.ts                   |  52 ++++++++++++--
 package.json                        |   2 +
 yarn.lock                           |  10 +++
 6 files changed, 168 insertions(+), 17 deletions(-)

diff --git a/app/components/settings.module.scss b/app/components/settings.module.scss
index c6aec4203cf..c2cd517c34e 100644
--- a/app/components/settings.module.scss
+++ b/app/components/settings.module.scss
@@ -23,6 +23,14 @@
   }
 }
 
+.import-config-modal {
+  .import-config-content {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 10px;
+  }
+}
+
 .user-prompt-modal {
   min-height: 40vh;
 
diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index db08b48a9ff..36ffdb84a08 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useMemo } from "react";
 
 import styles from "./settings.module.scss";
+import uiStyle from "./ui-lib.module.scss";
 
 import ResetIcon from "../icons/reload.svg";
 import AddIcon from "../icons/add.svg";
@@ -72,6 +73,7 @@ import { useSyncStore } from "../store/sync";
 import { nanoid } from "nanoid";
 import { useMaskStore } from "../store/mask";
 import { ProviderType } from "../utils/cloud";
+import CancelIcon from "../icons/cancel.svg";
 
 function EditPromptModal(props: { id: string; onClose: () => void }) {
   const promptStore = usePromptStore();
@@ -467,6 +469,61 @@ function SyncConfigModal(props: { onClose?: () => void }) {
   );
 }
 
+function ImportConfigModal(props: { onClose?: () => void }) {
+  const [importString, setImportString] = useState("");
+  const syncStore = useSyncStore();
+
+  return (
+    <div className="modal-mask">
+      <Modal
+        title={Locale.Settings.Sync.Config.ImportModal.Title}
+        onClose={() => props.onClose?.()}
+        actions={[
+          <IconButton
+            key="cancel"
+            onClick={() => {
+              props.onClose();
+            }}
+            icon={<CancelIcon />}
+            bordered
+            shadow
+            text={Locale.UI.Cancel}
+          />,
+          <IconButton
+            key="confirm"
+            onClick={async () => {
+              try {
+                await syncStore.importSyncConfig(importString);
+                showToast(Locale.Settings.Sync.ImportSuccess);
+                props.onClose?.();
+              } catch (e) {
+                showToast(Locale.Settings.Sync.ImportFail);
+                console.log("[Sync] Failed to import sync config", e);
+              }
+            }}
+            icon={<ConfirmIcon />}
+            bordered
+            text={Locale.UI.Confirm}
+          />,
+        ]}
+      >
+        <div className={styles["import-config-modal"]}>
+          <textarea
+            className={uiStyle["modal-input"]}
+            autoFocus
+            placeholder={Locale.Settings.Sync.Config.ImportModal.Placeholder}
+            value={importString}
+            rows={props.rows ?? 3}
+            onInput={(e) => {
+              setImportString(e.currentTarget.value);
+            }}
+          />
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
 function SyncItems() {
   const syncStore = useSyncStore();
   const chatStore = useChatStore();
@@ -477,6 +534,7 @@ function SyncItems() {
   }, [syncStore]);
 
   const [showSyncConfigModal, setShowSyncConfigModal] = useState(false);
+  const [showImportModal, setShowImportModal] = useState(false);
 
   const stateOverview = useMemo(() => {
     const sessions = chatStore.sessions;
@@ -512,19 +570,35 @@ function SyncItems() {
               }}
             />
             {couldSync && (
-              <IconButton
-                icon={<ResetIcon />}
-                text={Locale.UI.Sync}
-                onClick={async () => {
-                  try {
-                    await syncStore.sync();
-                    showToast(Locale.Settings.Sync.Success);
-                  } catch (e) {
-                    showToast(Locale.Settings.Sync.Fail);
-                    console.error("[Sync]", e);
-                  }
-                }}
-              />
+              <>
+                <IconButton
+                  icon={<ResetIcon />}
+                  text={Locale.UI.Sync}
+                  onClick={async () => {
+                    try {
+                      await syncStore.sync();
+                      showToast(Locale.Settings.Sync.Success);
+                    } catch (e) {
+                      showToast(Locale.Settings.Sync.Fail);
+                      console.error("[Sync]", e);
+                    }
+                  }}
+                />
+                <IconButton
+                  icon={<UploadIcon />}
+                  text={Locale.UI.Export}
+                  onClick={() => {
+                    syncStore.exportSyncConfig();
+                  }}
+                />
+                <IconButton
+                  icon={<DownloadIcon />}
+                  text={Locale.UI.Import}
+                  onClick={() => {
+                    setShowImportModal(true);
+                  }}
+                />
+              </>
             )}
           </div>
         </ListItem>
@@ -555,6 +629,10 @@ function SyncItems() {
       {showSyncConfigModal && (
         <SyncConfigModal onClose={() => setShowSyncConfigModal(false)} />
       )}
+
+      {showImportModal && (
+        <ImportConfigModal onClose={() => setShowImportModal(false)} />
+      )}
     </>
   );
 }
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index 2ff94e32d43..fbd9cdc7968 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -186,11 +186,20 @@ const cn = {
       Success: "同步成功",
       Fail: "同步失败",
 
+      ExportSuccess: "同步配置已复制到剪贴板",
+      ExportFail: "导出失败，请重试",
+      ImportSuccess: "同步配置导入成功",
+      ImportFail: "导入失败，请检查配置字符串",
+
       Config: {
         Modal: {
           Title: "配置云同步",
           Check: "检查可用性",
         },
+        ImportModal: {
+          Title: "导入同步配置",
+          Placeholder: "请输入同步配置",
+        },
         SyncType: {
           Title: "同步类型",
           SubTitle: "选择喜爱的同步服务器",
diff --git a/app/store/sync.ts b/app/store/sync.ts
index d3582e3c935..297997d485f 100644
--- a/app/store/sync.ts
+++ b/app/store/sync.ts
@@ -1,3 +1,4 @@
+import pako from "pako";
 import { getClientConfig } from "../config/client";
 import { Updater } from "../typing";
 import { ApiPath, STORAGE_KEY, StoreKey } from "../constant";
@@ -44,10 +45,51 @@ const DEFAULT_SYNC_STATE = {
   lastSyncTime: 0,
   lastProvider: "",
 };
-
 export const useSyncStore = createPersistStore(
   DEFAULT_SYNC_STATE,
   (set, get) => ({
+    async exportSyncConfig() {
+      const currentProvider = get().provider;
+      const exportData = {
+        provider: currentProvider,
+        config: get()[currentProvider],
+        useProxy: get().useProxy,
+        proxyUrl: get().proxyUrl,
+      };
+
+      const jsonString = JSON.stringify(exportData);
+      const compressed = pako.deflate(jsonString);
+      const encoded = btoa(String.fromCharCode.apply(null, compressed));
+
+      try {
+        await navigator.clipboard.writeText(encoded);
+        showToast(Locale.Settings.Sync.ExportSuccess);
+      } catch (e) {
+        console.log("[Sync] failed to copy", e);
+        showToast(Locale.Settings.Sync.ExportFail);
+      }
+    },
+    importSyncConfig(encodedString: string) {
+      try {
+        const decoded = atob(encodedString);
+        const decompressed = pako.inflate(
+          new Uint8Array(decoded.split("").map((char) => char.charCodeAt(0))),
+          { to: "string" },
+        );
+        const importedData = JSON.parse(decompressed);
+
+        set({
+          provider: importedData.provider,
+          [importedData.provider]: importedData.config,
+          useProxy: importedData.useProxy,
+          proxyUrl: importedData.proxyUrl,
+        });
+      } catch (e) {
+        console.log("[Sync] failed to set sync config", e);
+        throw e;
+      }
+    },
+
     cloudSync() {
       const config = get()[get().provider];
       return Object.values(config).every((c) => c.toString().length > 0);
@@ -100,15 +142,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;
diff --git a/package.json b/package.json
index 4d06b0b14e4..fd1fbfc59eb 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "nanoid": "^5.0.3",
     "next": "^14.1.1",
     "node-fetch": "^3.3.1",
+    "pako": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.7",
@@ -47,6 +48,7 @@
   "devDependencies": {
     "@tauri-apps/cli": "1.5.11",
     "@types/node": "^20.11.30",
+    "@types/pako": "^2.0.3",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.7",
     "@types/react-katex": "^3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 72df8cafc54..35c72d9754d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1601,6 +1601,11 @@
   dependencies:
     undici-types "~5.26.4"
 
+"@types/pako@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.npmmirror.com/@types/pako/-/pako-2.0.3.tgz#b6993334f3af27c158f3fe0dfeeba987c578afb1"
+  integrity sha512-bq0hMV9opAcrmE0Byyo0fY3Ew4tgOevJmQ9grUhpXQhYfyLJ1Kqg3P33JT5fdbT2AjeAjR51zqqVjAL/HMkx7Q==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -4971,6 +4976,11 @@ p-map@^4.0.0:
   dependencies:
     aggregate-error "^3.0.0"
 
+pako@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86"
+  integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"

From c75c07a4fefebc8a5f47e29aac632ff07d6b288e Mon Sep 17 00:00:00 2001
From: wangyijing <wangyijing@wangyijing>
Date: Mon, 1 Jul 2024 02:17:00 +0800
Subject: [PATCH 2/7] fix bug

---
 app/components/settings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index 36ffdb84a08..66faef5983c 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -482,7 +482,7 @@ function ImportConfigModal(props: { onClose?: () => void }) {
           <IconButton
             key="cancel"
             onClick={() => {
-              props.onClose();
+              props.onClose?.();
             }}
             icon={<CancelIcon />}
             bordered

From 36ebb869be26f119053767f18ec54ea7c24e6314 Mon Sep 17 00:00:00 2001
From: wangyijing <wangyijing@wangyijing>
Date: Mon, 1 Jul 2024 02:22:11 +0800
Subject: [PATCH 3/7] fix bug

---
 app/components/settings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index 66faef5983c..7aca4525872 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -513,7 +513,7 @@ function ImportConfigModal(props: { onClose?: () => void }) {
             autoFocus
             placeholder={Locale.Settings.Sync.Config.ImportModal.Placeholder}
             value={importString}
-            rows={props.rows ?? 3}
+            rows={props?.rows ?? 3}
             onInput={(e) => {
               setImportString(e.currentTarget.value);
             }}

From 82cb4a4dba44403dc11e5f3c712c98e651d82658 Mon Sep 17 00:00:00 2001
From: wangyijing <wangyijing@wangyijing>
Date: Mon, 1 Jul 2024 02:27:52 +0800
Subject: [PATCH 4/7] fix bug

---
 app/components/settings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index 7aca4525872..ce0357fdcd8 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -469,7 +469,7 @@ function SyncConfigModal(props: { onClose?: () => void }) {
   );
 }
 
-function ImportConfigModal(props: { onClose?: () => void }) {
+function ImportConfigModal(props: { onClose?: () => void; rows?: number }) {
   const [importString, setImportString] = useState("");
   const syncStore = useSyncStore();
 

From ca2eeb8370cfd2aa9cf7b0c50b798463b78b1eb4 Mon Sep 17 00:00:00 2001
From: wangyijing <wangyijing@wangyijing>
Date: Mon, 1 Jul 2024 02:50:29 +0800
Subject: [PATCH 5/7] fix bug

---
 app/locales/cn.ts | 6 ++----
 app/locales/en.ts | 9 ++++++++-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index fbd9cdc7968..ee8003000a0 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -185,12 +185,10 @@ const cn = {
       NotSyncYet: "还没有进行过同步",
       Success: "同步成功",
       Fail: "同步失败",
-
       ExportSuccess: "同步配置已复制到剪贴板",
-      ExportFail: "导出失败，请重试",
+      ExportFail: "同步配置导出失败，请重试",
       ImportSuccess: "同步配置导入成功",
-      ImportFail: "导入失败，请检查配置字符串",
-
+      ImportFail: "同步配置导入失败，请检查配置字符串",
       Config: {
         Modal: {
           Title: "配置云同步",
diff --git a/app/locales/en.ts b/app/locales/en.ts
index aa153f52369..7b2a92c5696 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -187,12 +187,19 @@ const en: LocaleType = {
       NotSyncYet: "Not sync yet",
       Success: "Sync Success",
       Fail: "Sync Fail",
-
+      ExportSuccess: "Sync config copied to clipboard",
+      ExportFail: "Export failed, please retry",
+      ImportSuccess: "Sync config imported successfully",
+      ImportFail: "Import failed, please check config string",
       Config: {
         Modal: {
           Title: "Config Sync",
           Check: "Check Connection",
         },
+        ImportModal: {
+          Title: "Import Sync Config",
+          Placeholder: "Enter sync config",
+        },
         SyncType: {
           Title: "Sync Type",
           SubTitle: "Choose your favorite sync service",

From 45d2ccc11976eeb35586e534b7ef160f17d29a89 Mon Sep 17 00:00:00 2001
From: wangyijing <wangyijing@wangyijing>
Date: Mon, 1 Jul 2024 02:57:29 +0800
Subject: [PATCH 6/7] fix bug

---
 app/store/sync.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/store/sync.ts b/app/store/sync.ts
index 297997d485f..3953c140d46 100644
--- a/app/store/sync.ts
+++ b/app/store/sync.ts
@@ -59,8 +59,9 @@ export const useSyncStore = createPersistStore(
 
       const jsonString = JSON.stringify(exportData);
       const compressed = pako.deflate(jsonString);
-      const encoded = btoa(String.fromCharCode.apply(null, compressed));
-
+      const encoded = btoa(
+        String.fromCharCode.apply(null, Array.from(compressed)),
+      );
       try {
         await navigator.clipboard.writeText(encoded);
         showToast(Locale.Settings.Sync.ExportSuccess);

From c234160b82627f1d1185ffbcfc712a449469480c Mon Sep 17 00:00:00 2001
From: wangyijing <wangyijing@wangyijing>
Date: Mon, 1 Jul 2024 03:19:28 +0800
Subject: [PATCH 7/7] fix bug

---
 app/components/settings.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index ce0357fdcd8..89253532c6d 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -569,6 +569,13 @@ function SyncItems() {
                 setShowSyncConfigModal(true);
               }}
             />
+            <IconButton
+              icon={<DownloadIcon />}
+              text={Locale.UI.Import}
+              onClick={() => {
+                setShowImportModal(true);
+              }}
+            />
             {couldSync && (
               <>
                 <IconButton
@@ -591,13 +598,6 @@ function SyncItems() {
                     syncStore.exportSyncConfig();
                   }}
                 />
-                <IconButton
-                  icon={<DownloadIcon />}
-                  text={Locale.UI.Import}
-                  onClick={() => {
-                    setShowImportModal(true);
-                  }}
-                />
               </>
             )}
           </div>