Merge remote-tracking branch 'upstream/main'

2025-11-19 23:43:45 +08:00 · 2023-10-20 10:03:12 +08:00
parent 49794bb2ca cc565cf57e
commit 3578382c9f
86 changed files with 3460 additions and 1051 deletions
--- a/app/api/config/route.ts
+++ b/app/api/config/route.ts
@@ -4,7 +4,7 @@ import { getServerSideConfig } from "../../config/server";

 const serverConfig = getServerSideConfig();

-// Danger! Don not write any secret value here!
+// Danger! Do not hard code any secret value here!
 // 警告！不要在这里写入任何敏感信息！
 const DANGER_CONFIG = {
  needCode: serverConfig.needCode,
--- a/app/api/cors/[...path]/route.ts
+++ b/app/api/cors/[...path]/route.ts
@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from "next/server";
+
+async function handle(
+  req: NextRequest,
+  { params }: { params: { path: string[] } },
+) {
+  if (req.method === "OPTIONS") {
+    return NextResponse.json({ body: "OK" }, { status: 200 });
+  }
+
+  const [protocol, ...subpath] = params.path;
+  const targetUrl = `${protocol}://${subpath.join("/")}`;
+
+  const method = req.headers.get("method") ?? undefined;
+  const shouldNotHaveBody = ["get", "head"].includes(
+    method?.toLowerCase() ?? "",
+  );
+
+  const fetchOptions: RequestInit = {
+    headers: {
+      authorization: req.headers.get("authorization") ?? "",
+    },
+    body: shouldNotHaveBody ? null : req.body,
+    method,
+    // @ts-ignore
+    duplex: "half",
+  };
+
+  const fetchResult = await fetch(targetUrl, fetchOptions);
+
+  console.log("[Any Proxy]", targetUrl, {
+    status: fetchResult.status,
+    statusText: fetchResult.statusText,
+  });
+
+  return fetchResult;
+}
+
+export const POST = handle;
+export const GET = handle;
+export const OPTIONS = handle;
+
+export const runtime = "nodejs";
--- a/app/components/auth.tsx
+++ b/app/components/auth.tsx
@@ -15,6 +15,8 @@ export function AuthPage() {
  const access = useAccessStore();

  const goHome = () => navigate(Path.Home);
+  const goChat = () => navigate(Path.Chat);
+  const resetAccessCode = () => { access.updateCode(""); access.updateToken(""); }; // Reset access code to empty string

  useEffect(() => {
    if (getClientConfig()?.isApp) {
@@ -41,14 +43,34 @@ export function AuthPage() {
          access.updateCode(e.currentTarget.value);
        }}
      />
+      {!access.hideUserApiKey ? (
+        <>
+          <div className={styles["auth-tips"]}>{Locale.Auth.SubTips}</div>
+          <input
+            className={styles["auth-input"]}
+            type="password"
+            placeholder={Locale.Settings.Token.Placeholder}
+            value={access.token}
+            onChange={(e) => {
+              access.updateToken(e.currentTarget.value);
+            }}
+          />
+        </>
+      ) : null}

      <div className={styles["auth-actions"]}>
        <IconButton
          text={Locale.Auth.Confirm}
          type="primary"
-          onClick={goHome}
+          onClick={goChat}
+        />
+        <IconButton
+          text={Locale.Auth.Later}
+          onClick={() => {
+            resetAccessCode();
+            goHome();
+          }}
        />
-        <IconButton text={Locale.Auth.Later} onClick={goHome} />
      </div>
    </div>
  );
--- a/app/components/chat.module.scss
+++ b/app/components/chat.module.scss
@@ -349,6 +349,14 @@
      padding: 7px;
    }
  }
+  /* Specific styles for iOS devices */
+  @media screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) {
+    @supports (-webkit-touch-callout: none) {
+      .chat-message-edit {
+        top: -8%;
+      }
+    }
+  }
 }

 .chat-message-status {
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -80,6 +80,7 @@ import {
  MAX_RENDER_MSG_COUNT,
  Path,
  REQUEST_TIMEOUT_MS,
+  UNFINISHED_INPUT,
 } from "../constant";
 import { Avatar } from "./emoji";
 import { ContextPrompts, MaskAvatar, MaskConfig } from "./mask";
@@ -802,7 +803,7 @@ function _Chat() {
      (m) => m.id === message.id,
    );

-    if (resendingIndex <= 0 || resendingIndex >= session.messages.length) {
+    if (resendingIndex < 0 || resendingIndex >= session.messages.length) {
      console.error("[Chat] failed to find resending message", message);
      return;
    }
@@ -935,7 +936,8 @@ function _Chat() {

    const isTouchTopEdge = e.scrollTop <= edgeThreshold;
    const isTouchBottomEdge = bottomHeight >= e.scrollHeight - edgeThreshold;
-    const isHitBottom = bottomHeight >= e.scrollHeight - 10;
+    const isHitBottom =
+      bottomHeight >= e.scrollHeight - (isMobileScreen ? 4 : 10);

    const prevPageMsgIndex = msgRenderIndex - CHAT_PAGE_SIZE;
    const nextPageMsgIndex = msgRenderIndex + CHAT_PAGE_SIZE;
@@ -1013,6 +1015,23 @@ function _Chat() {
  // edit / insert message modal
  const [isEditingMessage, setIsEditingMessage] = useState(false);

+  // remember unfinished input
+  useEffect(() => {
+    // try to load from local storage
+    const key = UNFINISHED_INPUT(session.id);
+    const mayBeUnfinishedInput = localStorage.getItem(key);
+    if (mayBeUnfinishedInput && userInput.length === 0) {
+      setUserInput(mayBeUnfinishedInput);
+      localStorage.removeItem(key);
+    }
+
+    const dom = inputRef.current;
+    return () => {
+      localStorage.setItem(key, dom?.value ?? "");
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
  return (
    <div className={styles.chat} key={session.id}>
      <div className="window-header" data-tauri-drag-region>
@@ -1136,7 +1155,13 @@ function _Chat() {
                      {isUser ? (
                        <Avatar avatar={config.avatar} />
                      ) : (
-                        <MaskAvatar mask={session.mask} />
+                        <>
+                          {["system"].includes(message.role) ? (
+                            <Avatar avatar="2699-fe0f" />
+                          ) : (
+                            <MaskAvatar mask={session.mask} />
+                          )}
+                        </>
                      )}
                    </div>

--- a/app/components/error.tsx
+++ b/app/components/error.tsx
@@ -4,8 +4,8 @@ import GithubIcon from "../icons/github.svg";
 import ResetIcon from "../icons/reload.svg";
 import { ISSUE_URL } from "../constant";
 import Locale from "../locales";
-import { downloadAs } from "../utils";
 import { showConfirm } from "./ui-lib";
+import { useSyncStore } from "../store/sync";

 interface IErrorBoundaryState {
  hasError: boolean;
@@ -26,10 +26,7 @@ export class ErrorBoundary extends React.Component<any, IErrorBoundaryState> {

  clearAndSaveData() {
    try {
-      downloadAs(
-        JSON.stringify(localStorage),
-        "chatgpt-next-web-snapshot.json",
-      );
+      useSyncStore.getState().export();
    } finally {
      localStorage.clear();
      location.reload();
--- a/app/components/exporter.tsx
+++ b/app/components/exporter.tsx
@@ -383,7 +383,7 @@ export function PreviewActions(props: {
 function ExportAvatar(props: { avatar: string }) {
  if (props.avatar === DEFAULT_MASK_AVATAR) {
    return (
-      <NextImage
+      <img
        src={BotIcon.src}
        width={30}
        height={30}
@@ -393,7 +393,7 @@ function ExportAvatar(props: { avatar: string }) {
    );
  }

-  return <Avatar avatar={props.avatar}></Avatar>;
+  return <Avatar avatar={props.avatar} />;
 }

 export function ImagePreviewer(props: {
@@ -422,6 +422,7 @@ export function ImagePreviewer(props: {
          ])
          .then(() => {
            showToast(Locale.Copy.Success);
+            refreshPreview();
          });
      } catch (e) {
        console.error("[Copy Image] ", e);
@@ -432,24 +433,62 @@ export function ImagePreviewer(props: {

  const isMobile = useMobileScreen();

-  const download = () => {
+  const download = async () => {
    showToast(Locale.Export.Image.Toast);
    const dom = previewRef.current;
    if (!dom) return;
-    toPng(dom)
-      .then((blob) => {
-        if (!blob) return;
-
-        if (isMobile || getClientConfig()?.isApp) {
-          showImageModal(blob);
+  
+    const isApp = getClientConfig()?.isApp;
+  
+    try {
+      const blob = await toPng(dom);
+      if (!blob) return;
+  
+      if (isMobile || (isApp && window.__TAURI__)) {
+        if (isApp && window.__TAURI__) {
+          const result = await window.__TAURI__.dialog.save({
+            defaultPath: `${props.topic}.png`,
+            filters: [
+              {
+                name: "PNG Files",
+                extensions: ["png"],
+              },
+              {
+                name: "All Files",
+                extensions: ["*"],
+              },
+            ],
+          });
+  
+          if (result !== null) {
+            const response = await fetch(blob);
+            const buffer = await response.arrayBuffer();
+            const uint8Array = new Uint8Array(buffer);
+            await window.__TAURI__.fs.writeBinaryFile(result, uint8Array);
+            showToast(Locale.Download.Success);
+          } else {
+            showToast(Locale.Download.Failed);
+          }
        } else {
-          const link = document.createElement("a");
-          link.download = `${props.topic}.png`;
-          link.href = blob;
-          link.click();
+          showImageModal(blob);
        }
-      })
-      .catch((e) => console.log("[Export Image] ", e));
+      } else {
+        const link = document.createElement("a");
+        link.download = `${props.topic}.png`;
+        link.href = blob;
+        link.click();
+        refreshPreview();
+      }
+    } catch (error) {
+      showToast(Locale.Download.Failed);
+    }
+  };
+
+  const refreshPreview = () => {
+    const dom = previewRef.current;
+    if (dom) {
+      dom.innerHTML = dom.innerHTML; // Refresh the content of the preview by resetting its HTML for fix a bug glitching
+    }
  };

  return (
@@ -565,21 +604,32 @@ export function MarkdownPreviewer(props: {
  );
 }

+// modified by BackTrackZ now it's looks better
+
 export function JsonPreviewer(props: {
  messages: ChatMessage[];
  topic: string;
 }) {
-  const msgs = props.messages.map((m) => ({
-    role: m.role,
-    content: m.content,
-  }));
-  const mdText = "\n" + JSON.stringify(msgs, null, 2) + "\n";
+  const msgs = {
+    messages: [
+      {
+        role: "system",
+        content: `${Locale.FineTuned.Sysmessage} ${props.topic}`,
+      },
+      ...props.messages.map((m) => ({
+        role: m.role,
+        content: m.content,
+      })),
+    ],
+  };
+  const mdText = "```json\n" + JSON.stringify(msgs, null, 2) + "\n```";
+  const minifiedJson = JSON.stringify(msgs);

  const copy = () => {
-    copyToClipboard(JSON.stringify(msgs, null, 2));
+    copyToClipboard(minifiedJson);
  };
  const download = () => {
-    downloadAs(JSON.stringify(msgs, null, 2), `${props.topic}.json`);
+    downloadAs(JSON.stringify(msgs), `${props.topic}.json`);
  };

  return (
@@ -587,11 +637,11 @@ export function JsonPreviewer(props: {
      <PreviewActions
        copy={copy}
        download={download}
-        showCopy={true}
+        showCopy={false}
        messages={props.messages}
      />
-      <div className="markdown-body">
-        <pre className={styles["export-content"]}>{mdText}</pre>
+      <div className="markdown-body" onClick={copy}>
+        <Markdown content={mdText} />
      </div>
    </>
  );
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@@ -6,7 +6,7 @@
  color: var(--black);
  background-color: var(--white);
  min-width: 600px;
-  min-height: 480px;
+  min-height: 370px;
  max-width: 1200px;

  display: flex;
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -115,7 +115,10 @@ const loadAsyncGoogleFont = () => {
    getClientConfig()?.buildMode === "export" ? remoteFontUrl : proxyFontUrl;
  linkEl.rel = "stylesheet";
  linkEl.href =
-    googleFontUrl + "/css2?family=Noto+Sans:wght@300;400;700;900&display=swap";
+    googleFontUrl +
+    "/css2?family=" +
+    encodeURIComponent("Noto Sans:wght@300;400;700;900") +
+    "&display=swap";
  document.head.appendChild(linkEl);
 };

@@ -125,6 +128,7 @@ function Screen() {
  const isHome = location.pathname === Path.Home;
  const isAuth = location.pathname === Path.Auth;
  const isMobileScreen = useMobileScreen();
+  const shouldTightBorder = getClientConfig()?.isApp || (config.tightBorder && !isMobileScreen);

  useEffect(() => {
    loadAsyncGoogleFont();
@@ -134,11 +138,9 @@ function Screen() {
    <div
      className={
        styles.container +
-        ` ${
-          config.tightBorder && !isMobileScreen
-            ? styles["tight-container"]
-            : styles.container
-        } ${getLang() === "ar" ? styles["rtl-screen"] : ""}`
+        ` ${shouldTightBorder ? styles["tight-container"] : styles.container} ${
+          getLang() === "ar" ? styles["rtl-screen"] : ""
+        }`
      }
    >
      {isAuth ? (
--- a/app/components/markdown.tsx
+++ b/app/components/markdown.tsx
@@ -115,6 +115,7 @@ function _MarkDownContent(props: { content: string }) {
      ]}
      components={{
        pre: PreCode,
+        p: (pProps) => <p {...pProps} dir="auto" />,
        a: (aProps) => {
          const href = aProps.href || "";
          const isInternal = /^\/#/i.test(href);
--- a/app/components/mask.tsx
+++ b/app/components/mask.tsx
@@ -393,11 +393,13 @@ export function MaskPage() {
  const [searchText, setSearchText] = useState("");
  const masks = searchText.length > 0 ? searchMasks : allMasks;

-  // simple search, will refactor later
+  // refactored already, now it accurate
  const onSearch = (text: string) => {
    setSearchText(text);
    if (text.length > 0) {
-      const result = allMasks.filter((m) => m.name.includes(text));
+      const result = allMasks.filter((m) =>
+        m.name.toLowerCase().includes(text.toLowerCase())
+      );
      setSearchMasks(result);
    } else {
      setSearchMasks(allMasks);
@@ -410,7 +412,7 @@ export function MaskPage() {
  const closeMaskModal = () => setEditingMaskId(undefined);

  const downloadAll = () => {
-    downloadAs(JSON.stringify(masks), FileName.Masks);
+    downloadAs(JSON.stringify(masks.filter((v) => !v.builtin)), FileName.Masks);
  };

  const importFromFile = () => {
@@ -452,11 +454,13 @@ export function MaskPage() {
                icon={<DownloadIcon />}
                bordered
                onClick={downloadAll}
+                text={Locale.UI.Export}
              />
            </div>
            <div className="window-action-button">
              <IconButton
                icon={<UploadIcon />}
+                text={Locale.UI.Import}
                bordered
                onClick={() => importFromFile()}
              />
@@ -604,7 +608,7 @@ export function MaskPage() {
            <MaskConfig
              mask={editingMask}
              updateMask={(updater) =>
-                maskStore.update(editingMaskId!, updater)
+                maskStore.updateMask(editingMaskId!, updater)
              }
              readonly={editingMask.builtin}
            />
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -10,6 +10,15 @@ import ClearIcon from "../icons/clear.svg";
 import LoadingIcon from "../icons/three-dots.svg";
 import EditIcon from "../icons/edit.svg";
 import EyeIcon from "../icons/eye.svg";
+import DownloadIcon from "../icons/download.svg";
+import UploadIcon from "../icons/upload.svg";
+import ConfigIcon from "../icons/config.svg";
+import ConfirmIcon from "../icons/confirm.svg";
+
+import ConnectionIcon from "../icons/connection.svg";
+import CloudSuccessIcon from "../icons/cloud-success.svg";
+import CloudFailIcon from "../icons/cloud-fail.svg";
+
 import {
  Input,
  List,
@@ -19,6 +28,7 @@ import {
  Popover,
  Select,
  showConfirm,
+  showToast,
 } from "./ui-lib";
 import { ModelConfigList } from "./model-config";

@@ -40,7 +50,7 @@ import Locale, {
 } from "../locales";
 import { copyToClipboard } from "../utils";
 import Link from "next/link";
-import { Path, RELEASE_URL, UPDATE_URL } from "../constant";
+import { Path, RELEASE_URL, STORAGE_KEY, UPDATE_URL } from "../constant";
 import { Prompt, SearchService, usePromptStore } from "../store/prompt";
 import { ErrorBoundary } from "./error";
 import { InputRange } from "./input-range";
@@ -49,6 +59,8 @@ import { Avatar, AvatarPicker } from "./emoji";
 import { getClientConfig } from "../config/client";
 import { useSyncStore } from "../store/sync";
 import { nanoid } from "nanoid";
+import { useMaskStore } from "../store/mask";
+import { ProviderType } from "../utils/cloud";

 function EditPromptModal(props: { id: string; onClose: () => void }) {
  const promptStore = usePromptStore();
@@ -75,7 +87,7 @@ function EditPromptModal(props: { id: string; onClose: () => void }) {
            readOnly={!prompt.isUser}
            className={styles["edit-prompt-title"]}
            onInput={(e) =>
-              promptStore.update(
+              promptStore.updatePrompt(
                props.id,
                (prompt) => (prompt.title = e.currentTarget.value),
              )
@@ -87,7 +99,7 @@ function EditPromptModal(props: { id: string; onClose: () => void }) {
            className={styles["edit-prompt-content"]}
            rows={10}
            onInput={(e) =>
-              promptStore.update(
+              promptStore.updatePrompt(
                props.id,
                (prompt) => (prompt.content = e.currentTarget.value),
              )
@@ -127,14 +139,15 @@ function UserPromptModal(props: { onClose?: () => void }) {
        actions={[
          <IconButton
            key="add"
-            onClick={() =>
-              promptStore.add({
+            onClick={() => {
+              const promptId = promptStore.add({
                id: nanoid(),
                createdAt: Date.now(),
                title: "Empty Prompt",
                content: "Empty Prompt Content",
-              })
-            }
+              });
+              setEditingPromptId(promptId);
+            }}
            icon={<AddIcon />}
            bordered
            text={Locale.Settings.Prompt.Modal.Add}
@@ -241,75 +254,297 @@ function DangerItems() {
  );
 }

-function SyncItems() {
+function CheckButton() {
  const syncStore = useSyncStore();
-  const webdav = syncStore.webDavConfig;

-  // not ready: https://github.com/Yidadaa/ChatGPT-Next-Web/issues/920#issuecomment-1609866332
-  return null;
+  const couldCheck = useMemo(() => {
+    return syncStore.coundSync();
+  }, [syncStore]);
+
+  const [checkState, setCheckState] = useState<
+    "none" | "checking" | "success" | "failed"
+  >("none");
+
+  async function check() {
+    setCheckState("checking");
+    const valid = await syncStore.check();
+    setCheckState(valid ? "success" : "failed");
+  }
+
+  if (!couldCheck) return null;

  return (
-    <List>
-      <ListItem
-        title={"上次同步：" + new Date().toLocaleString()}
-        subTitle={"20 次对话，100 条消息，200 提示词，20 面具"}
+    <IconButton
+      text={Locale.Settings.Sync.Config.Modal.Check}
+      bordered
+      onClick={check}
+      icon={
+        checkState === "none" ? (
+          <ConnectionIcon />
+        ) : checkState === "checking" ? (
+          <LoadingIcon />
+        ) : checkState === "success" ? (
+          <CloudSuccessIcon />
+        ) : checkState === "failed" ? (
+          <CloudFailIcon />
+        ) : (
+          <ConnectionIcon />
+        )
+      }
+    ></IconButton>
+  );
+}
+
+function SyncConfigModal(props: { onClose?: () => void }) {
+  const syncStore = useSyncStore();
+
+  return (
+    <div className="modal-mask">
+      <Modal
+        title={Locale.Settings.Sync.Config.Modal.Title}
+        onClose={() => props.onClose?.()}
+        actions={[
+          <CheckButton key="check" />,
+          <IconButton
+            key="confirm"
+            onClick={props.onClose}
+            icon={<ConfirmIcon />}
+            bordered
+            text={Locale.UI.Confirm}
+          />,
+        ]}
      >
-        <IconButton
-          icon={<ResetIcon />}
-          text="同步"
-          onClick={() => {
-            syncStore.check().then(console.log);
-          }}
-        />
-      </ListItem>
+        <List>
+          <ListItem
+            title={Locale.Settings.Sync.Config.SyncType.Title}
+            subTitle={Locale.Settings.Sync.Config.SyncType.SubTitle}
+          >
+            <select
+              value={syncStore.provider}
+              onChange={(e) => {
+                syncStore.update(
+                  (config) =>
+                    (config.provider = e.target.value as ProviderType),
+                );
+              }}
+            >
+              {Object.entries(ProviderType).map(([k, v]) => (
+                <option value={v} key={k}>
+                  {k}
+                </option>
+              ))}
+            </select>
+          </ListItem>

-      <ListItem
-        title={"本地备份"}
-        subTitle={"20 次对话，100 条消息，200 提示词，20 面具"}
-      ></ListItem>
+          <ListItem
+            title={Locale.Settings.Sync.Config.Proxy.Title}
+            subTitle={Locale.Settings.Sync.Config.Proxy.SubTitle}
+          >
+            <input
+              type="checkbox"
+              checked={syncStore.useProxy}
+              onChange={(e) => {
+                syncStore.update(
+                  (config) => (config.useProxy = e.currentTarget.checked),
+                );
+              }}
+            ></input>
+          </ListItem>
+          {syncStore.useProxy ? (
+            <ListItem
+              title={Locale.Settings.Sync.Config.ProxyUrl.Title}
+              subTitle={Locale.Settings.Sync.Config.ProxyUrl.SubTitle}
+            >
+              <input
+                type="text"
+                value={syncStore.proxyUrl}
+                onChange={(e) => {
+                  syncStore.update(
+                    (config) => (config.proxyUrl = e.currentTarget.value),
+                  );
+                }}
+              ></input>
+            </ListItem>
+          ) : null}
+        </List>

-      <ListItem
-        title={"Web Dav Server"}
-        subTitle={Locale.Settings.AccessCode.SubTitle}
-      >
-        <input
-          value={webdav.server}
-          type="text"
-          placeholder={"https://example.com"}
-          onChange={(e) => {
-            syncStore.update(
-              (config) => (config.server = e.currentTarget.value),
-            );
-          }}
-        />
-      </ListItem>
+        {syncStore.provider === ProviderType.WebDAV && (
+          <>
+            <List>
+              <ListItem title={Locale.Settings.Sync.Config.WebDav.Endpoint}>
+                <input
+                  type="text"
+                  value={syncStore.webdav.endpoint}
+                  onChange={(e) => {
+                    syncStore.update(
+                      (config) =>
+                        (config.webdav.endpoint = e.currentTarget.value),
+                    );
+                  }}
+                ></input>
+              </ListItem>

-      <ListItem title="Web Dav User Name" subTitle="user name here">
-        <input
-          value={webdav.username}
-          type="text"
-          placeholder={"username"}
-          onChange={(e) => {
-            syncStore.update(
-              (config) => (config.username = e.currentTarget.value),
-            );
-          }}
-        />
-      </ListItem>
+              <ListItem title={Locale.Settings.Sync.Config.WebDav.UserName}>
+                <input
+                  type="text"
+                  value={syncStore.webdav.username}
+                  onChange={(e) => {
+                    syncStore.update(
+                      (config) =>
+                        (config.webdav.username = e.currentTarget.value),
+                    );
+                  }}
+                ></input>
+              </ListItem>
+              <ListItem title={Locale.Settings.Sync.Config.WebDav.Password}>
+                <PasswordInput
+                  value={syncStore.webdav.password}
+                  onChange={(e) => {
+                    syncStore.update(
+                      (config) =>
+                        (config.webdav.password = e.currentTarget.value),
+                    );
+                  }}
+                ></PasswordInput>
+              </ListItem>
+            </List>
+          </>
+        )}

-      <ListItem title="Web Dav Password" subTitle="password here">
-        <input
-          value={webdav.password}
-          type="text"
-          placeholder={"password"}
-          onChange={(e) => {
-            syncStore.update(
-              (config) => (config.password = e.currentTarget.value),
-            );
-          }}
-        />
-      </ListItem>
-    </List>
+        {syncStore.provider === ProviderType.UpStash && (
+          <List>
+            <ListItem title={Locale.Settings.Sync.Config.UpStash.Endpoint}>
+              <input
+                type="text"
+                value={syncStore.upstash.endpoint}
+                onChange={(e) => {
+                  syncStore.update(
+                    (config) =>
+                      (config.upstash.endpoint = e.currentTarget.value),
+                  );
+                }}
+              ></input>
+            </ListItem>
+
+            <ListItem title={Locale.Settings.Sync.Config.UpStash.UserName}>
+              <input
+                type="text"
+                value={syncStore.upstash.username}
+                placeholder={STORAGE_KEY}
+                onChange={(e) => {
+                  syncStore.update(
+                    (config) =>
+                      (config.upstash.username = e.currentTarget.value),
+                  );
+                }}
+              ></input>
+            </ListItem>
+            <ListItem title={Locale.Settings.Sync.Config.UpStash.Password}>
+              <PasswordInput
+                value={syncStore.upstash.apiKey}
+                onChange={(e) => {
+                  syncStore.update(
+                    (config) => (config.upstash.apiKey = e.currentTarget.value),
+                  );
+                }}
+              ></PasswordInput>
+            </ListItem>
+          </List>
+        )}
+      </Modal>
+    </div>
+  );
+}
+
+function SyncItems() {
+  const syncStore = useSyncStore();
+  const chatStore = useChatStore();
+  const promptStore = usePromptStore();
+  const maskStore = useMaskStore();
+  const couldSync = useMemo(() => {
+    return syncStore.coundSync();
+  }, [syncStore]);
+
+  const [showSyncConfigModal, setShowSyncConfigModal] = useState(false);
+
+  const stateOverview = useMemo(() => {
+    const sessions = chatStore.sessions;
+    const messageCount = sessions.reduce((p, c) => p + c.messages.length, 0);
+
+    return {
+      chat: sessions.length,
+      message: messageCount,
+      prompt: Object.keys(promptStore.prompts).length,
+      mask: Object.keys(maskStore.masks).length,
+    };
+  }, [chatStore.sessions, maskStore.masks, promptStore.prompts]);
+
+  return (
+    <>
+      <List>
+        <ListItem
+          title={Locale.Settings.Sync.CloudState}
+          subTitle={
+            syncStore.lastProvider
+              ? `${new Date(syncStore.lastSyncTime).toLocaleString()} [${
+                  syncStore.lastProvider
+                }]`
+              : Locale.Settings.Sync.NotSyncYet
+          }
+        >
+          <div style={{ display: "flex" }}>
+            <IconButton
+              icon={<ConfigIcon />}
+              text={Locale.UI.Config}
+              onClick={() => {
+                setShowSyncConfigModal(true);
+              }}
+            />
+            {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);
+                  }
+                }}
+              />
+            )}
+          </div>
+        </ListItem>
+
+        <ListItem
+          title={Locale.Settings.Sync.LocalState}
+          subTitle={Locale.Settings.Sync.Overview(stateOverview)}
+        >
+          <div style={{ display: "flex" }}>
+            <IconButton
+              icon={<UploadIcon />}
+              text={Locale.UI.Export}
+              onClick={() => {
+                syncStore.export();
+              }}
+            />
+            <IconButton
+              icon={<DownloadIcon />}
+              text={Locale.UI.Import}
+              onClick={() => {
+                syncStore.import();
+              }}
+            />
+          </div>
+        </ListItem>
+      </List>
+
+      {showSyncConfigModal && (
+        <SyncConfigModal onClose={() => setShowSyncConfigModal(false)} />
+      )}
+    </>
  );
 }

@@ -518,7 +753,7 @@ export function Settings() {
              title={`${config.fontSize ?? 14}px`}
              value={config.fontSize}
              min="12"
-              max="18"
+              max="40"
              step="1"
              onChange={(e) =>
                updateConfig(
@@ -562,6 +797,8 @@ export function Settings() {
          </ListItem>
        </List>

+        <SyncItems />
+
        <List>
          <ListItem
            title={Locale.Settings.Mask.Splash.Title}
@@ -722,8 +959,6 @@ export function Settings() {
          </ListItem>
        </List>

-        <SyncItems />
-
        <List>
          <ModelConfigList
            modelConfig={config.modelConfig}
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useCallback } from "react";

 import styles from "./home.module.scss";

@@ -17,6 +17,7 @@ import Locale from "../locales";
 import { useAppConfig, useChatStore } from "../store";

 import {
+  DEFAULT_SIDEBAR_WIDTH,
  MAX_SIDEBAR_WIDTH,
  MIN_SIDEBAR_WIDTH,
  NARROW_SIDEBAR_WIDTH,
@@ -57,31 +58,57 @@ function useDragSideBar() {

  const config = useAppConfig();
  const startX = useRef(0);
-  const startDragWidth = useRef(config.sidebarWidth ?? 300);
+  const startDragWidth = useRef(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH);
  const lastUpdateTime = useRef(Date.now());

-  const handleMouseMove = useRef((e: MouseEvent) => {
-    if (Date.now() < lastUpdateTime.current + 50) {
-      return;
-    }
-    lastUpdateTime.current = Date.now();
-    const d = e.clientX - startX.current;
-    const nextWidth = limit(startDragWidth.current + d);
-    config.update((config) => (config.sidebarWidth = nextWidth));
-  });
-
-  const handleMouseUp = useRef(() => {
-    startDragWidth.current = config.sidebarWidth ?? 300;
-    window.removeEventListener("mousemove", handleMouseMove.current);
-    window.removeEventListener("mouseup", handleMouseUp.current);
-  });
-
-  const onDragMouseDown = (e: MouseEvent) => {
-    startX.current = e.clientX;
-
-    window.addEventListener("mousemove", handleMouseMove.current);
-    window.addEventListener("mouseup", handleMouseUp.current);
+  const toggleSideBar = () => {
+    config.update((config) => {
+      if (config.sidebarWidth < MIN_SIDEBAR_WIDTH) {
+        config.sidebarWidth = DEFAULT_SIDEBAR_WIDTH;
+      } else {
+        config.sidebarWidth = NARROW_SIDEBAR_WIDTH;
+      }
+    });
  };
+
+  const onDragStart = (e: MouseEvent) => {
+    // Remembers the initial width each time the mouse is pressed
+    startX.current = e.clientX;
+    startDragWidth.current = config.sidebarWidth;
+    const dragStartTime = Date.now();
+
+    const handleDragMove = (e: MouseEvent) => {
+      if (Date.now() < lastUpdateTime.current + 20) {
+        return;
+      }
+      lastUpdateTime.current = Date.now();
+      const d = e.clientX - startX.current;
+      const nextWidth = limit(startDragWidth.current + d);
+      config.update((config) => {
+        if (nextWidth < MIN_SIDEBAR_WIDTH) {
+          config.sidebarWidth = NARROW_SIDEBAR_WIDTH;
+        } else {
+          config.sidebarWidth = nextWidth;
+        }
+      });
+    };
+
+    const handleDragEnd = () => {
+      // In useRef the data is non-responsive, so `config.sidebarWidth` can't get the dynamic sidebarWidth
+      window.removeEventListener("pointermove", handleDragMove);
+      window.removeEventListener("pointerup", handleDragEnd);
+
+      // if user click the drag icon, should toggle the sidebar
+      const shouldFireClick = Date.now() - dragStartTime < 300;
+      if (shouldFireClick) {
+        toggleSideBar();
+      }
+    };
+
+    window.addEventListener("pointermove", handleDragMove);
+    window.addEventListener("pointerup", handleDragEnd);
+  };
+
  const isMobileScreen = useMobileScreen();
  const shouldNarrow =
    !isMobileScreen && config.sidebarWidth < MIN_SIDEBAR_WIDTH;
@@ -89,13 +116,13 @@ function useDragSideBar() {
  useEffect(() => {
    const barWidth = shouldNarrow
      ? NARROW_SIDEBAR_WIDTH
-      : limit(config.sidebarWidth ?? 300);
+      : limit(config.sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH);
    const sideBarWidth = isMobileScreen ? "100vw" : `${barWidth}px`;
    document.documentElement.style.setProperty("--sidebar-width", sideBarWidth);
  }, [config.sidebarWidth, isMobileScreen, shouldNarrow]);

  return {
-    onDragMouseDown,
+    onDragStart,
    shouldNarrow,
  };
 }
@@ -104,7 +131,7 @@ export function SideBar(props: { className?: string }) {
  const chatStore = useChatStore();

  // drag side bar
-  const { onDragMouseDown, shouldNarrow } = useDragSideBar();
+  const { onDragStart, shouldNarrow } = useDragSideBar();
  const navigate = useNavigate();
  const config = useAppConfig();

@@ -133,7 +160,13 @@ export function SideBar(props: { className?: string }) {
          icon={<MaskIcon />}
          text={shouldNarrow ? undefined : Locale.Mask.Name}
          className={styles["sidebar-bar-button"]}
-          onClick={() => navigate(Path.NewChat, { state: { fromHome: true } })}
+          onClick={() => {
+            if (config.dontShowMaskSplashScreen !== true) {
+              navigate(Path.NewChat, { state: { fromHome: true } });
+            } else {
+              navigate(Path.Masks, { state: { fromHome: true } });
+            }
+          }}
          shadow
        />
        <IconButton
@@ -174,7 +207,7 @@ export function SideBar(props: { className?: string }) {
            </Link>
          </div>
          <div className={styles["sidebar-action"]}>
-            <a href={REPO_URL} target="_blank">
+            <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
              <IconButton icon={<GithubIcon />} shadow />
            </a>
          </div>
@@ -198,7 +231,7 @@ export function SideBar(props: { className?: string }) {

      <div
        className={styles["sidebar-drag"]}
-        onMouseDown={(e) => onDragMouseDown(e as any)}
+        onPointerDown={(e) => onDragStart(e as any)}
      >
        <DragIcon />
      </div>
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -7,7 +7,9 @@ export const RELEASE_URL = `${REPO_URL}/releases`;
 export const FETCH_COMMIT_URL = `https://api.github.com/repos/${OWNER}/${REPO}/commits?per_page=1`;
 export const FETCH_TAG_URL = `https://api.github.com/repos/${OWNER}/${REPO}/tags?per_page=1`;
 export const RUNTIME_CONFIG_DOM = "danger-runtime-config";
-export const DEFAULT_API_HOST = "https://chatgpt1.nextweb.fun/api/proxy";
+
+export const DEFAULT_CORS_HOST = "https://ab.nextweb.fun";
+export const DEFAULT_API_HOST = `${DEFAULT_CORS_HOST}/api/proxy`;

 export enum Path {
  Home = "/",
@@ -18,6 +20,10 @@ export enum Path {
  Auth = "/auth",
 }

+export enum ApiPath {
+  Cors = "/api/cors",
+}
+
 export enum SlotID {
  AppBody = "app-body",
 }
@@ -37,6 +43,7 @@ export enum StoreKey {
  Sync = "sync",
 }

+export const DEFAULT_SIDEBAR_WIDTH = 300;
 export const MAX_SIDEBAR_WIDTH = 500;
 export const MIN_SIDEBAR_WIDTH = 230;
 export const NARROW_SIDEBAR_WIDTH = 100;
@@ -44,6 +51,9 @@ export const NARROW_SIDEBAR_WIDTH = 100;
 export const ACCESS_CODE_PREFIX = "nk-";

 export const LAST_INPUT_KEY = "last-input";
+export const UNFINISHED_INPUT = (id: string) => "unfinished-input-" + id;
+
+export const STORAGE_KEY = "chatgpt-next-web";

 export const REQUEST_TIMEOUT_MS = 60000;

@@ -63,6 +73,8 @@ Knowledge cutoff: 2021-09
 Current model: {{model}}
 Current time: {{time}}`;

+export const SUMMARIZE_MODEL = "gpt-3.5-turbo";
+
 export const DEFAULT_MODELS = [
  {
    name: "gpt-4",
--- a/app/global.d.ts
+++ b/app/global.d.ts
@@ -13,5 +13,17 @@ declare module "*.svg";
 declare interface Window {
  __TAURI__?: {
    writeText(text: string): Promise<void>;
+    invoke(command: string, payload?: Record<string, unknown>): Promise<any>;
+    dialog: {
+      save(options?: Record<string, unknown>): Promise<string | null>;
+    };
+    fs: {
+      writeBinaryFile(path: string, data: Uint8Array): Promise<void>;
+    };
+    notification:{
+      requestPermission(): Promise<Permission>;
+      isPermissionGranted(): Promise<boolean>;
+      sendNotification(options: string | Options): void;
+    };
  };
 }
--- a/app/icons/cloud-fail.svg
+++ b/app/icons/cloud-fail.svg
--- a/app/icons/cloud-success.svg
+++ b/app/icons/cloud-success.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><g opacity="1"  transform="translate(0 0)  rotate(0)"><mask id="bg-mask-0" fill="white"><use transform="translate(0 0)  rotate(0)" xlink:href="#path_0"></use></mask><g mask="url(#bg-mask-0)" ><path  id="路径 1" style="fill:#333333; opacity:1;" d="M4.00337,11.6633M4.00337,11.6633c-0.8391,0 -1.5514,-0.20763 -2.13691,-0.6229c-0.79984,-0.56727 -1.19975,-1.41519 -1.19975,-2.54377c0,-1.2521 0.52073,-2.20348 1.56218,-2.85415c0.68561,-0.42835 1.38711,-0.64252 2.10448,-0.64252v0.66667l-0.64163,-0.18098l0.64163,0.18098l-0.64163,-0.18098c0.65543,-2.32379 2.09264,-3.48569 4.31163,-3.48569c2.30635,0 3.74023,0.99523 4.30163,2.98569l-0.6416,0.18098l0.0729,-0.66267l-0.0729,0.66267l0.0729,-0.66267c2.3958,0.26354 3.5937,1.5411 3.5937,3.83267c0,2.21778 -1.10887,3.32667 -3.3266,3.32667c-0.0438,0 -0.08717,-0.00427 -0.1301,-0.0128c-0.04293,-0.00853 -0.0846,-0.0212 -0.125,-0.038c-0.04047,-0.01673 -0.0789,-0.03727 -0.1153,-0.0616c-0.0364,-0.02427 -0.07007,-0.0519 -0.101,-0.0829c-0.031,-0.03093 -0.05863,-0.0646 -0.0829,-0.101c-0.02433,-0.0364 -0.04487,-0.07483 -0.0616,-0.1153c-0.0168,-0.0404 -0.02947,-0.08207 -0.038,-0.125c-0.00853,-0.04293 -0.0128,-0.0863 -0.0128,-0.1301c0,-0.04373 0.00427,-0.08707 0.0128,-0.13c0.00853,-0.04293 0.0212,-0.08463 0.038,-0.1251c0.01673,-0.04047 0.03727,-0.0789 0.0616,-0.1153c0.02427,-0.0364 0.0519,-0.07007 0.0829,-0.101c0.03093,-0.03093 0.0646,-0.05857 0.101,-0.0829c0.0364,-0.02433 0.07483,-0.04487 0.1153,-0.0616c0.0404,-0.01673 0.08207,-0.02937 0.125,-0.0379c0.04293,-0.00853 0.0863,-0.0128 0.1301,-0.0128c1.32887,0 1.9933,-0.66446 1.9933,-1.99337c0,-1.4951 -0.80207,-2.33088 -2.4062,-2.50733c-0.27,-0.02971 -0.495,-0.22026 0,0c-0.27,-0.02971 -0.495,-0.22026 -0.5688,-0.4817c-0.37873,-1.34287 -1.38484,-2.01431 -3.01833,-2.01431c-1.54613,0 -2.55559,0.8381 -3.02836,2.51431c-0.08103,0.28728 -0.34314,0.48569 0,0c-0.08103,0.28728 -0.34314,0.48569 -0.64164,0.48569c-0.46252,0 -0.92852,0.14666 -1.39801,0.43998c-0.62355,0.38957 -0.93532,0.96402 -0.93532,1.72336c0,0.66927 0.21258,1.15467 0.63775,1.45621c0.35449,0.25144 0.80969,0.37716 1.36558,0.37716c0.04378,0 0.08713,0.00427 0.13006,0.0128c0.04293,0.00853 0.08462,0.02117 0.12507,0.0379c0.04044,0.01673 0.07886,0.03727 0.11525,0.0616c0.0364,0.02433 0.07008,0.05197 0.10103,0.0829c0.03095,0.03093 0.05859,0.0646 0.08291,0.101c0.02432,0.0364 0.04485,0.07483 0.0616,0.1153c0.01675,0.04047 0.0294,0.08217 0.03794,0.1251c0.00854,0.04293 0.01281,0.08627 0.01281,0.13c0,0.0438 -0.00427,0.08717 -0.01281,0.1301c-0.00854,0.04293 -0.02119,0.0846 -0.03794,0.125c-0.01675,0.04047 -0.03728,0.0789 -0.0616,0.1153c-0.02432,0.0364 -0.05196,0.07007 -0.08291,0.101c-0.03095,0.031 -0.06463,0.05863 -0.10103,0.0829c-0.03639,0.02433 -0.07481,0.04487 -0.11525,0.0616c-0.04045,0.0168 -0.08214,0.02947 -0.12507,0.038c-0.04293,0.00853 -0.08628,0.0128 -0.13006,0.0128z"></path><path  id="路径 2" style="fill:#333333; opacity:1;" d="M6.42578,10.4903l2,1.66l-0.42578,0.513l-0.52012,-0.4171l2.67002,-3.32998c0.0274,-0.03415 0.05783,-0.06531 0.0913,-0.09346c0.03353,-0.02815 0.0695,-0.05277 0.1079,-0.07384c0.03833,-0.02107 0.07837,-0.0382 0.1201,-0.05138c0.04173,-0.01319 0.08437,-0.02217 0.1279,-0.02696c0.04353,-0.00479 0.0871,-0.00528 0.1307,-0.00149c0.0436,0.00379 0.0864,0.01181 0.1284,0.02404c0.04207,0.01223 0.0825,0.02844 0.1213,0.04863c0.03887,0.0202 0.07537,0.04399 0.1095,0.07137c0.0342,0.02738 0.06537,0.05783 0.0935,0.09135c0.02813,0.03352 0.05273,0.06946 0.0738,0.10783c0.02107,0.03837 0.0382,0.07843 0.0514,0.12017c0.0132,0.04174 0.0222,0.08437 0.027,0.12788c0.00473,0.04351 0.00523,0.08707 0.0015,0.13068c-0.0038,0.04361 -0.01183,0.08643 -0.0241,0.12846c-0.0122,0.04203 -0.0284,0.08247 -0.0486,0.1213c-0.0202,0.03884 -0.044,0.07534 -0.0714,0.10949l-2.66998,3.33001c-0.23308,0.2907 -0.65919,0.3339 -0.9459,0.0959l-2,-1.66c-0.03369,-0.02793 -0.06432,-0.0589 -0.0919,-0.0929c-0.02758,-0.034 -0.05158,-0.07037 -0.072,-0.1091c-0.02042,-0.03867 -0.03687,-0.079 -0.04934,-0.121c-0.01248,-0.04193 -0.02074,-0.0847 -0.02479,-0.1283c-0.00405,-0.0436 -0.0038,-0.08717 0.00073,-0.1307c0.00453,-0.04353 0.01326,-0.0862 0.0262,-0.128c0.01294,-0.0418 0.02983,-0.08197 0.05068,-0.1205c0.02085,-0.03847 0.04526,-0.07453 0.07321,-0.1082c0.02796,-0.03373 0.05893,-0.06437 0.09292,-0.0919c0.03399,-0.0276 0.07035,-0.0516 0.10907,-0.072c0.03872,-0.02047 0.07906,-0.03693 0.12102,-0.0494c0.04196,-0.01247 0.08473,-0.02073 0.12831,-0.0248c0.04359,-0.004 0.08715,-0.00373 0.13069,0.0008c0.04354,0.00453 0.08622,0.01327 0.12804,0.0262c0.04181,0.01293 0.08197,0.02983 0.12046,0.0507c0.03849,0.0208 0.07457,0.0452 0.10826,0.0732z"></path></g></g><defs><rect id="path_0" x="0" y="0" width="16" height="16" /></defs></svg>
--- a/app/icons/config.svg
+++ b/app/icons/config.svg
--- a/app/icons/connection.svg
+++ b/app/icons/connection.svg
--- a/app/locales/ar.ts
+++ b/app/locales/ar.ts
@@ -10,6 +10,7 @@ const ar: PartialLocaleType = {
  Auth: {
    Title: "تحتاج إلى رمز الوصول",
    Tips: "يرجى إدخال رمز الوصول أدناه",
+    SubTips: "أو أدخل مفتاح واجهة برمجة تطبيقات OpenAI الخاص بك",
    Input: "رمز الوصول",
    Confirm: "تأكيد",
    Later: "لاحقًا",
@@ -233,6 +234,9 @@ ${builtin} مدمجة، ${custom} تم تعريفها من قبل المستخد
  Plugin: {
    Name: "المكوّن الإضافي",
  },
+  FineTuned: {
+    Sysmessage: "أنت مساعد ي",
+  },
  Mask: {
    Name: "الأقنعة",
    Page: {
--- a/app/locales/bn.ts
+++ b/app/locales/bn.ts
@@ -10,6 +10,7 @@ const bn: PartialLocaleType = {
  Auth: {
    Title: "একটি অ্যাক্সেস কোড প্রয়োজন",
    Tips: "নীচে অ্যাক্সেস কোড ইনপুট করুন",
+    SubTips: "অথবা আপনার OpenAI API কী প্রবেশ করুন",
    Input: "অ্যাক্সেস কোড",
    Confirm: "নিশ্চিত করুন",
    Later: "পরে",
@@ -271,6 +272,9 @@ const bn: PartialLocaleType = {
  Plugin: {
    Name: "প্লাগইন",
  },
+  FineTuned: {
+    Sysmessage: "আপনি একটি সহকারী যা",
+  },
  Mask: {
    Name: "মাস্ক",
    Page: {
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -13,6 +13,7 @@ const cn = {
  Auth: {
    Title: "需要密码",
    Tips: "管理员开启了密码验证，请在下方填入访问码",
+    SubTips: "或者输入你的 OpenAI API 密钥",
    Input: "在此处填写访问码",
    Confirm: "确认",
    Later: "稍后再说",
@@ -178,6 +179,49 @@ const cn = {
      Title: "自动生成标题",
      SubTitle: "根据对话内容生成合适的标题",
    },
+    Sync: {
+      CloudState: "云端数据",
+      NotSyncYet: "还没有进行过同步",
+      Success: "同步成功",
+      Fail: "同步失败",
+
+      Config: {
+        Modal: {
+          Title: "配置云同步",
+          Check: "检查可用性",
+        },
+        SyncType: {
+          Title: "同步类型",
+          SubTitle: "选择喜爱的同步服务器",
+        },
+        Proxy: {
+          Title: "启用代理",
+          SubTitle: "在浏览器中同步时，必须启用代理以避免跨域限制",
+        },
+        ProxyUrl: {
+          Title: "代理地址",
+          SubTitle: "仅适用于本项目自带的跨域代理",
+        },
+
+        WebDav: {
+          Endpoint: "WebDAV 地址",
+          UserName: "用户名",
+          Password: "密码",
+        },
+
+        UpStash: {
+          Endpoint: "UpStash Redis REST Url",
+          UserName: "备份名称",
+          Password: "UpStash Redis REST Token",
+        },
+      },
+
+      LocalState: "本地数据",
+      Overview: (overview: any) => {
+        return `${overview.chat} 次对话，${overview.message} 条消息，${overview.prompt} 条提示词，${overview.mask} 个面具`;
+      },
+      ImportFailed: "导入失败",
+    },
    Mask: {
      Splash: {
        Title: "面具启动页",
@@ -280,6 +324,10 @@ const cn = {
    Success: "已写入剪切板",
    Failed: "复制失败，请赋予剪切板权限",
  },
+  Download: {
+    Success: "内容已下载到您的目录。",
+    Failed: "下载失败。",
+  },
  Context: {
    Toast: (x: any) => `包含 ${x} 条预设提示词`,
    Edit: "当前对话设置",
@@ -290,6 +338,9 @@ const cn = {
  Plugin: {
    Name: "插件",
  },
+  FineTuned: {
+    Sysmessage: "你是一个助手",
+  },
  Mask: {
    Name: "面具",
    Page: {
@@ -352,6 +403,10 @@ const cn = {
    Close: "关闭",
    Create: "新建",
    Edit: "编辑",
+    Export: "导出",
+    Import: "导入",
+    Sync: "同步",
+    Config: "配置",
  },
  Exporter: {
    Model: "模型",
--- a/app/locales/cs.ts
+++ b/app/locales/cs.ts
@@ -188,6 +188,9 @@ const cs: PartialLocaleType = {
  Plugin: {
    Name: "Plugin",
  },
+  FineTuned: {
+    Sysmessage: "Jste asistent, který",
+  },
  Mask: {
    Name: "Maska",
    Page: {
--- a/app/locales/de.ts
+++ b/app/locales/de.ts
@@ -192,6 +192,9 @@ const de: PartialLocaleType = {
  Plugin: {
    Name: "Plugin",
  },
+  FineTuned: {
+    Sysmessage: "Du bist ein Assistent, der",
+  },
  Mask: {
    Name: "Mask",
    Page: {
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -15,6 +15,7 @@ const en: LocaleType = {
  Auth: {
    Title: "Need Access Code",
    Tips: "Please enter access code below",
+    SubTips: "Or enter your OpenAI API Key",
    Input: "access code",
    Confirm: "Confirm",
    Later: "Later",
@@ -180,6 +181,50 @@ const en: LocaleType = {
      Title: "Auto Generate Title",
      SubTitle: "Generate a suitable title based on the conversation content",
    },
+    Sync: {
+      CloudState: "Last Update",
+      NotSyncYet: "Not sync yet",
+      Success: "Sync Success",
+      Fail: "Sync Fail",
+
+      Config: {
+        Modal: {
+          Title: "Config Sync",
+          Check: "Check Connection",
+        },
+        SyncType: {
+          Title: "Sync Type",
+          SubTitle: "Choose your favorite sync service",
+        },
+        Proxy: {
+          Title: "Enable CORS Proxy",
+          SubTitle: "Enable a proxy to avoid cross-origin restrictions",
+        },
+        ProxyUrl: {
+          Title: "Proxy Endpoint",
+          SubTitle:
+            "Only applicable to the built-in CORS proxy for this project",
+        },
+
+        WebDav: {
+          Endpoint: "WebDAV Endpoint",
+          UserName: "User Name",
+          Password: "Password",
+        },
+
+        UpStash: {
+          Endpoint: "UpStash Redis REST Url",
+          UserName: "Backup Name",
+          Password: "UpStash Redis REST Token",
+        },
+      },
+
+      LocalState: "Local Data",
+      Overview: (overview: any) => {
+        return `${overview.chat} chats，${overview.message} messages，${overview.prompt} prompts，${overview.mask} masks`;
+      },
+      ImportFailed: "Failed to import from file",
+    },
    Mask: {
      Splash: {
        Title: "Mask Splash Screen",
@@ -285,6 +330,10 @@ const en: LocaleType = {
    Success: "Copied to clipboard",
    Failed: "Copy failed, please grant permission to access clipboard",
  },
+  Download: {
+    Success: "Content downloaded to your directory.",
+    Failed: "Download failed.",
+  },
  Context: {
    Toast: (x: any) => `With ${x} contextual prompts`,
    Edit: "Current Chat Settings",
@@ -295,6 +344,9 @@ const en: LocaleType = {
  Plugin: {
    Name: "Plugin",
  },
+  FineTuned: {
+    Sysmessage: "You are an assistant that",
+  },
  Mask: {
    Name: "Mask",
    Page: {
@@ -352,6 +404,10 @@ const en: LocaleType = {
    Close: "Close",
    Create: "Create",
    Edit: "Edit",
+    Export: "Export",
+    Import: "Import",
+    Sync: "Sync",
+    Config: "Config",
  },
  Exporter: {
    Model: "Model",
--- a/app/locales/es.ts
+++ b/app/locales/es.ts
@@ -190,6 +190,9 @@ const es: PartialLocaleType = {
  Plugin: {
    Name: "Plugin",
  },
+  FineTuned: {
+    Sysmessage: "Eres un asistente que",
+  },
  Mask: {
    Name: "Mask",
    Page: {
--- a/app/locales/fr.ts
+++ b/app/locales/fr.ts
@@ -244,6 +244,9 @@ const fr: PartialLocaleType = {
  Plugin: {
    Name: "Extension",
  },
+  FineTuned: {
+    Sysmessage: "Eres un asistente que",
+  },
  Mask: {
    Name: "Masque",
    Page: {
--- a/app/locales/id.ts
+++ b/app/locales/id.ts
@@ -0,0 +1,393 @@
+import { SubmitKey } from "../store/config";
+import { PartialLocaleType } from "./index";
+
+const id: PartialLocaleType = {
+  WIP: "Coming Soon...",
+  Error: {
+    Unauthorized: "Akses tidak diizinkan, silakan masukkan kode akses atau masukkan kunci API OpenAI Anda. di halaman [autentikasi](/#/auth) atau di halaman [Pengaturan](/#/settings).",
+  },  
+  Auth: {
+    Title: "Diperlukan Kode Akses",
+    Tips: "Masukkan kode akses di bawah",
+    SubTips: "Atau masukkan kunci API OpenAI Anda",
+    Input: "Kode Akses",
+    Confirm: "Konfirmasi",
+    Later: "Nanti",
+  },
+  ChatItem: {
+    ChatItemCount: (count: number) => `${count} pesan`,
+  },
+  Chat: {
+    SubTitle: (count: number) => `${count} pesan`,
+    Actions: {
+      ChatList: "Buka Daftar Chat",
+      CompressedHistory: "Ekspor Riwayat Terkompresi",
+      Export: "Ekspor Semua Pesan sebagai Markdown",
+      Copy: "Salin",
+      Stop: "Berhenti",
+      Retry: "Coba Lagi",
+      Pin: "Pin",
+      PinToastContent: "2 pesan telah ditandai",
+      PinToastAction: "Lihat",
+      Delete: "Hapus",
+      Edit: "Edit",
+    },
+    Commands: {
+      new: "Mulai Chat Baru",
+      newm: "Mulai Chat Baru dengan Masks",
+      next: "Chat Selanjutnya",
+      prev: "Chat Sebelumnya",
+      clear: "Bersihkan Percakapan",
+      del: "Hapus Chat",
+    },
+    InputActions: {
+      Stop: "Berhenti",
+      ToBottom: "Ke Bagian Bawah",
+      Theme: {
+        auto: "Otomatis",
+        light: "Tema Terang",
+        dark: "Tema Gelap",
+      },
+      Prompt: "Prompts",
+      Masks: "Masks",
+      Clear: "Bersihkan Percakapan",
+      Settings: "Pengaturan",
+    },
+    Rename: "Ubah Nama Chat",
+    Typing: "Mengetik...",
+    Input: (submitKey: string) => {
+      var inputHints = `${submitKey} untuk mengirim`;
+      if (submitKey === String(SubmitKey.Enter)) {
+        inputHints += ", Shift + Enter untuk membalut";
+      }
+      return (
+        inputHints + ", / untuk mencari prompt, : untuk menggunakan perintah"
+      );
+    },
+    Send: "Kirim",
+    Config: {
+      Reset: "Reset ke Default",
+      SaveAs: "Simpan sebagai Masks",
+    },
+  },
+  Export: {
+    Title: "Ekspor Pesan",
+    Copy: "Salin Semua",
+    Download: "Unduh",
+    MessageFromYou: "Pesan dari Anda",
+    MessageFromChatGPT: "Pesan dari ChatGPT",
+    Share: "Bagikan ke ShareGPT",
+    Format: {
+      Title: "Format Ekspor",
+      SubTitle: "Markdown atau Gambar PNG",
+    },
+    IncludeContext: {
+      Title: "Sertakan Konteks",
+      SubTitle: "Apakah akan menyertakan masks",
+    },
+    Steps: {
+      Select: "Pilih",
+      Preview: "Pratinjau",
+    },
+  },
+  Select: {
+    Search: "Cari",
+    All: "Pilih Semua",
+    Latest: "Pilih Terbaru",
+    Clear: "Bersihkan",
+  },
+  Memory: {
+    Title: "Prompt Memori",
+    EmptyContent: "Belum ada yang tersedia.",
+    Send: "Kirim Memori",
+    Copy: "Salin Memori",
+    Reset: "Reset",
+    ResetConfirm:
+      "Jika Anda mereset, riwayat obrolan saat ini dan memori historis akan dihapus. Apakah Anda yakin ingin melakukan reset?",
+  },
+  Home: {
+    NewChat: "Obrolan Baru",
+    DeleteChat: "Anda yakin ingin menghapus percakapan yang dipilih?",
+    DeleteToast: "Percakapan telah dihapus",
+    Revert: "Kembali",
+  },
+  Settings: {
+    Title: "Pengaturan",
+    SubTitle: "Semua Pengaturan",
+    Danger: {
+      Reset: {
+        Title: "Setel Ulang Semua Pengaturan",
+        SubTitle: "Mengembalikan semua pengaturan ke nilai default",
+        Action: "Setel Ulang",
+        Confirm:
+          "Anda yakin ingin mengembalikan semua pengaturan ke nilai default?",
+      },
+      Clear: {
+        Title: "Hapus Semua Data",
+        SubTitle: "Semua data yang tersimpan secara lokal akan dihapus",
+        Action: "Hapus",
+        Confirm:
+          "Apakah Anda yakin ingin menghapus semua data yang tersimpan secara lokal?",
+      },
+    },
+    Lang: {
+      Name: "Bahasa", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
+      All: "Semua Bahasa",
+    },
+    Avatar: "Avatar",
+    FontSize: {
+      Title: "Ukuran Font",
+      SubTitle: "Ubah ukuran font konten chat",
+    },
+    InjectSystemPrompts: {
+      Title: "Suntikkan Petunjuk Sistem",
+      SubTitle:
+        "Tambahkan petunjuk simulasi sistem ChatGPT di awal daftar pesan yang diminta dalam setiap permintaan",
+    },
+    InputTemplate: {
+      Title: "Template Input",
+      SubTitle: "Pesan baru akan diisi menggunakan template ini",
+    },
+
+    Update: {
+      Version: (x: string) => `Version: ${x}`,
+      IsLatest: "Versi terbaru",
+      CheckUpdate: "Periksa Pembaruan",
+      IsChecking: "Memeriksa pembaruan...",
+      FoundUpdate: (x: string) => `Versi terbaru ditemukan: ${x}`,
+      GoToUpdate: "Perbarui Sekarang",
+    },
+    AutoGenerateTitle: {
+      Title: "Hasilkan Judul Otomatis",
+      SubTitle: "Hasilkan judul yang sesuai berdasarkan konten percakapan",
+    },
+    Sync: {
+      CloudState: "Pembaruan Terakhir",
+      NotSyncYet: "Belum disinkronkan",
+      Success: "Sinkronisasi Berhasil",
+      Fail: "Sinkronisasi Gagal",
+
+      Config: {
+        Modal: {
+          Title: "Konfigurasi Sinkronisasi",
+        },
+        SyncType: {
+          Title: "Tipe Sinkronisasi",
+          SubTitle: "Pilih layanan sinkronisasi favorit Anda",
+        },
+        Proxy: {
+          Title: "Aktifkan Proxy CORS",
+          SubTitle:
+            "Aktifkan Proxy untuk menghindari pembatasan atau pemblokiran lintas sumber",
+        },
+        ProxyUrl: {
+          Title: "Lokasi Titik Akhir Proxy CORS",
+          SubTitle: "Hanya berlaku untuk Proxy CORS bawaan untuk proyek ini",
+        },
+
+        WebDav: {
+          Endpoint: "Lokasi Titik Akhir WebDAV",
+          UserName: "User Pengguna",
+          Password: "Kata Sandi",
+        },
+      },
+    },
+    SendKey: "Kirim",
+    Theme: "Tema",
+    TightBorder: "Batas Ketat",
+    SendPreviewBubble: {
+      Title: "Pratinjau Obrolan",
+      SubTitle: "Pratinjau Obrolan dengan markdown",
+    },
+    Mask: {
+      Splash: {
+        Title: "Layar Pembuka Masks",
+        SubTitle:
+          "Tampilkan layar pembuka masks sebelum memulai percakapan baru",
+      },
+      Builtin: {
+        Title: "Sembunyikan Masks Bawaan",
+        SubTitle: "Sembunyikan Masks bawaan dari daftar masks",
+      },
+    },
+    Prompt: {
+      Disable: {
+        Title: "Nonaktifkan Otomatisasi",
+        SubTitle: "Aktifkan/Matikan otomatisasi",
+      },
+      List: "Daftar Prompt",
+      ListCount: (builtin: number, custom: number) =>
+        `${builtin} bawaan, ${custom} penggunaan khusus`,
+      Edit: "Edit",
+      Modal: {
+        Title: "Daftar Prompt",
+        Add: "Tambahkan",
+        Search: "Cari Prompt",
+      },
+      EditModal: {
+        Title: "Edit Prompt",
+      },
+    },
+    HistoryCount: {
+      Title: "Jumlah Pesan Riwayat",
+      SubTitle: "Jumlah pesan yang akan dikirim setiap permintaan",
+    },
+    CompressThreshold: {
+      Title: "Batas Kompresi Riwayat",
+      SubTitle:
+        "Jika panjang pesan melebihi batas yang ditentukan, pesan tersebut akan dikompresi",
+    },
+    Token: {
+      Title: "Kunci API",
+      SubTitle: "Gunakan kunci Anda untuk melewati batas kode akses",
+      Placeholder: "Kunci API OpenAI",
+    },
+    Usage: {
+      Title: "Saldo Akun",
+      SubTitle(used: any, total: any) {
+        return `Digunakan bulan ini: ${used}, total langganan: ${total}`;
+      },
+      IsChecking: "Memeriksa...",
+      Check: "Periksa",
+      NoAccess: "Masukkan kunci API untuk memeriksa saldo",
+    },
+    AccessCode: {
+      Title: "Kode Akses",
+      SubTitle: "Kontrol akses diaktifkan",
+      Placeholder: "Diperlukan kode akses",
+    },
+    Endpoint: {
+      Title: "Endpoint",
+      SubTitle: "Harus dimulai dengan http(s):// untuk endpoint kustom",
+    },
+    Model: "Model",
+    Temperature: {
+      Title: "Suhu",
+      SubTitle: "Semakin tinggi nilainya, semakin acak keluarannya",
+    },
+    TopP: {
+      Title: "Top P",
+      SubTitle: "Tidak mengubah nilai dengan suhu",
+    },
+    MaxTokens: {
+      Title: "Token Maksimum",
+      SubTitle: "Panjang maksimum token input dan output",
+    },
+    PresencePenalty: {
+      Title: "Penalti Kehadiran",
+      SubTitle: "Semakin tinggi nilai, semakin mungkin topik baru muncul",
+    },
+    FrequencyPenalty: {
+      Title: "Penalti Frekuensi",
+      SubTitle:
+        "Semakin tinggi nilai, semakin rendah kemungkinan penggunaan ulang baris yang sama",
+    },
+  },
+  Store: {
+    DefaultTopic: "Percakapan Baru",
+    BotHello: "Halo! Bagaimana saya bisa membantu Anda hari ini?",
+    Error: "Terjadi kesalahan, silakan coba lagi nanti.",
+    Prompt: {
+      History: (content: string) =>
+        "Ini adalah ringkasan singkat dari riwayat percakapan: " + content,
+      Topic:
+        "Buat judul berisi empat hingga lima kata untuk percakapan kita yang tidak akan disertakan dalam ringkasan percakapan, seperti instruksi, format, kutipan, tanda baca awal, tanda kutip pendahuluan, atau karakter tambahan. Silakan coba dengan kutipan berakhir.",
+      Summarize:
+        "Buat ringkasan percakapan dalam 200 kata yang akan digunakan sebagai promp di masa depan.",
+    },
+  },
+  Copy: {
+    Success: "Tersalin ke clipboard",
+    Failed:
+      "Gagal menyalin, mohon berikan izin untuk mengakses clipboard atau Clipboard API tidak didukung (Tauri)",
+  },
+  Download: {
+    Success: "Konten berhasil diunduh ke direktori Anda.",
+    Failed: "Unduhan gagal.",
+  },
+  Context: {
+    Toast: (x: any) => `Dengan ${x} promp kontekstual`,
+    Edit: "Pengaturan Obrolan Saat Ini",
+    Add: "Tambahkan Promp",
+    Clear: "Bersihkan Konteks",
+    Revert: "Kembali ke Posisi Sebelumnya",
+  },
+  Plugin: {
+    Name: "Plugin",
+  },
+  FineTuned: {
+    Sysmessage: "Anda adalah asisten yang",
+  },
+  Mask: {
+    Name: "Masks",
+    Page: {
+      Title: "Template Promp",
+      SubTitle: (count: number) => `${count} template prompt`,
+      Search: "Cari template",
+      Create: "Buat",
+    },
+    Item: {
+      Info: (count: number) => `${count} prompt`,
+      Chat: "Obrolan",
+      View: "Lihat",
+      Edit: "Edit",
+      Delete: "Hapus",
+      DeleteConfirm: "Anda yakin ingin menghapus?",
+    },
+    EditModal: {
+      Title: (readonly: boolean) =>
+        `Edit Template Prompt ${readonly ? "(hanya baca)" : ""}`,
+      Download: "Unduh",
+      Clone: "Duplikat",
+    },
+    Config: {
+      Avatar: "Avatar Bot",
+      Name: "Nama Bot",
+      Sync: {
+        Title: "Gunakan Konfigurasi Global",
+        SubTitle: "Gunakan konfigurasi global dalam percakapan ini",
+        Confirm:
+          "Pastikan untuk mengganti konfigurasi kustom dengan konfigurasi global?",
+      },
+      HideContext: {
+        Title: "Sembunyikan Prompt Konteks",
+        SubTitle: "Tidak menampilkan prompt konteks dalam obrolan",
+      },
+      Share: {
+        Title: "Bagikan Masks Ini",
+        SubTitle: "Buat tautan untuk masks ini",
+        Action: "Salin Tautan",
+      },
+    },
+  },
+  NewChat: {
+    Return: "Kembali",
+    Skip: "Lewati",
+    Title: "Pilih Masks",
+    SubTitle: "Berkonversasilah dengan diri Anda di balik masks",
+    More: "Lebih Lanjut",
+    NotShow: "Jangan Tampilkan Sekarang",
+    ConfirmNoShow:
+      "Pastikan untuk menonaktifkannya? Anda dapat mengaktifkannya nanti melalui pengaturan.",
+  },
+
+  UI: {
+    Confirm: "Konfirmasi",
+    Cancel: "Batal",
+    Close: "Tutup",
+    Create: "Buat",
+    Edit: "Edit",
+  },
+  Exporter: {
+    Model: "Model",
+    Messages: "Pesan",
+    Topic: "Topik",
+    Time: "Tanggal & Waktu",
+  },
+  URLCommand: {
+    Code: "Kode akses terdeteksi dari url, konfirmasi untuk mendaftar ? ",
+    Settings: "Pengaturan terdeteksi dari url, konfirmasi untuk diterapkan ?",
+  },
+};
+
+export default id;
--- a/app/locales/index.ts
+++ b/app/locales/index.ts
@@ -1,6 +1,7 @@
 import cn from "./cn";
 import en from "./en";
 import tw from "./tw";
+import id from "./id";
 import fr from "./fr";
 import es from "./es";
 import it from "./it";
@@ -25,6 +26,7 @@ const ALL_LANGS = {
  tw,
  jp,
  ko,
+  id,
  fr,
  es,
  it,
@@ -48,6 +50,7 @@ export const ALL_LANG_OPTIONS: Record<Lang, string> = {
  tw: "繁體中文",
  jp: "日本語",
  ko: "한국어",
+  id: "Indonesia",
  fr: "Français",
  es: "Español",
  it: "Italiano",
--- a/app/locales/it.ts
+++ b/app/locales/it.ts
@@ -191,6 +191,9 @@ const it: PartialLocaleType = {
  Plugin: {
    Name: "Plugin",
  },
+  FineTuned: {
+    Sysmessage: "Sei un assistente che",
+  },
  Mask: {
    Name: "Mask",
    Page: {
--- a/app/locales/jp.ts
+++ b/app/locales/jp.ts
@@ -19,7 +19,11 @@ const jp: PartialLocaleType = {
      Copy: "コピー",
      Stop: "停止",
      Retry: "リトライ",
+      Pin: "ピン",
+      PinToastContent: "コンテキストプロンプトに1つのメッセージをピン留めしました",
+      PinToastAction: "表示",
      Delete: "削除",
+      Edit: "編集",
    },
    Rename: "チャットの名前を変更",
    Typing: "入力中…",
@@ -33,7 +37,7 @@ const jp: PartialLocaleType = {
    Send: "送信",
    Config: {
      Reset: "リセット",
-      SaveAs: "另存为面具",
+      SaveAs: "保存",
    },
  },
  Export: {
@@ -204,6 +208,7 @@ const jp: PartialLocaleType = {
    Add: "追加",
  },
  Plugin: { Name: "プラグイン" },
+  FineTuned: { Sysmessage: "あなたはアシスタントです" },
  Mask: {
    Name: "キャラクタープリセット",
    Page: {
--- a/app/locales/ko.ts
+++ b/app/locales/ko.ts
@@ -186,6 +186,9 @@ const ko: PartialLocaleType = {
  Plugin: {
    Name: "플러그인",
  },
+  FineTuned: {
+    Sysmessage: "당신은 어시스턴트입니다",
+  },
  Mask: {
    Name: "마스크",
    Page: {
--- a/app/locales/ru.ts
+++ b/app/locales/ru.ts
@@ -191,6 +191,9 @@ const ru: PartialLocaleType = {
  Plugin: {
    Name: "Плагин",
  },
+  FineTuned: {
+    Sysmessage: "Вы - ассистент, который",
+  },
  Mask: {
    Name: "Маска",
    Page: {
--- a/app/locales/tr.ts
+++ b/app/locales/tr.ts
@@ -191,6 +191,9 @@ const tr: PartialLocaleType = {
  Plugin: {
    Name: "Plugin",
  },
+  FineTuned: {
+    Sysmessage: "Sen bir asistansın",
+  },
  Mask: {
    Name: "Mask",
    Page: {
--- a/app/locales/tw.ts
+++ b/app/locales/tw.ts
@@ -7,32 +7,32 @@ const tw: PartialLocaleType = {
    Unauthorized: "目前您的狀態是未授權，請前往[設定頁面](/#/auth)輸入授權碼。",
  },
  ChatItem: {
-    ChatItemCount: (count: number) => `${count} 條對話`,
+    ChatItemCount: (count: number) => `${count} 則對話`,
  },
  Chat: {
-    SubTitle: (count: number) => `您已經與 SoulShellGPT 進行了 ${count} 條對話`,
+    SubTitle: (count: number) => `您已經與 ChatGPT 進行了 ${count} 則對話`,
    Actions: {
-      ChatList: "查看訊息列表",
-      CompressedHistory: "查看壓縮後的歷史 Prompt",
+      ChatList: "檢視訊息列表",
+      CompressedHistory: "檢視壓縮後的歷史 Prompt",
      Export: "匯出聊天紀錄",
      Copy: "複製",
      Stop: "停止",
      Retry: "重試",
      Delete: "刪除",
    },
-    Rename: "重命名對話",
+    Rename: "重新命名對話",
    Typing: "正在輸入…",
    Input: (submitKey: string) => {
-      var inputHints = `輸入訊息後，按下 ${submitKey} 鍵即可發送`;
+      var inputHints = `輸入訊息後，按下 ${submitKey} 鍵即可傳送`;
      if (submitKey === String(SubmitKey.Enter)) {
        inputHints += "，Shift + Enter 鍵換行";
      }
      return inputHints;
    },
-    Send: "發送",
+    Send: "傳送",
    Config: {
-      Reset: "重置默认",
-      SaveAs: "另存为面具",
+      Reset: "重設",
+      SaveAs: "另存新檔",
    },
  },
  Export: {
@@ -46,7 +46,7 @@ const tw: PartialLocaleType = {
    Title: "上下文記憶 Prompt",
    EmptyContent: "尚未記憶",
    Copy: "複製全部",
-    Send: "發送記憶",
+    Send: "傳送記憶",
    Reset: "重設對話",
    ResetConfirm: "重設後將清除目前對話記錄以及歷史記憶，確認重設？",
  },
@@ -62,7 +62,7 @@ const tw: PartialLocaleType = {

    Lang: {
      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
-      All: "所有语言",
+      All: "所有語言",
    },
    Avatar: "大頭貼",
    FontSize: {
@@ -70,28 +70,28 @@ const tw: PartialLocaleType = {
      SubTitle: "聊天內容的字型大小",
    },
    InjectSystemPrompts: {
-      Title: "注入系統提示",
-      SubTitle: "強制在每個請求的訊息列表開頭添加一個模擬 ChatGPT 的系統提示",
+      Title: "匯入系統提示",
+      SubTitle: "強制在每個請求的訊息列表開頭新增一個模擬 ChatGPT 的系統提示",
    },
    Update: {
-      Version: (x: string) => `當前版本：${x}`,
+      Version: (x: string) => `目前版本：${x}`,
      IsLatest: "已是最新版本",
      CheckUpdate: "檢查更新",
      IsChecking: "正在檢查更新...",
      FoundUpdate: (x: string) => `發現新版本：${x}`,
      GoToUpdate: "前往更新",
    },
-    SendKey: "發送鍵",
+    SendKey: "傳送鍵",
    Theme: "主題",
    TightBorder: "緊湊邊框",
    SendPreviewBubble: {
      Title: "預覽氣泡",
-      SubTitle: "在预览气泡中预览 Markdown 内容",
+      SubTitle: "在預覽氣泡中預覽 Markdown 內容",
    },
    Mask: {
      Splash: {
-        Title: "面具启动页",
-        SubTitle: "新建聊天时，展示面具启动页",
+        Title: "面具啟動頁面",
+        SubTitle: "新增聊天時，呈現面具啟動頁面",
      },
    },
    Prompt: {
@@ -101,7 +101,7 @@ const tw: PartialLocaleType = {
      },
      List: "自定義提示詞列表",
      ListCount: (builtin: number, custom: number) =>
-        `內建 ${builtin} 條，用戶定義 ${custom} 條`,
+        `內建 ${builtin} 條，使用者定義 ${custom} 條`,
      Edit: "編輯",
      Modal: {
        Title: "提示詞列表",
@@ -109,7 +109,7 @@ const tw: PartialLocaleType = {
        Search: "搜尋提示詞",
      },
      EditModal: {
-        Title: "编辑提示词",
+        Title: "編輯提示詞",
      },
    },
    HistoryCount: {
@@ -132,7 +132,7 @@ const tw: PartialLocaleType = {
      },
      IsChecking: "正在檢查…",
      Check: "重新檢查",
-      NoAccess: "輸入API Key查看餘額",
+      NoAccess: "輸入 API Key 檢視餘額",
    },
    AccessCode: {
      Title: "授權碼",
@@ -150,7 +150,7 @@ const tw: PartialLocaleType = {
    },
    PresencePenalty: {
      Title: "話題新穎度 (presence_penalty)",
-      SubTitle: "值越大，越有可能擴展到新話題",
+      SubTitle: "值越大，越有可能拓展到新話題",
    },
    FrequencyPenalty: {
      Title: "頻率懲罰度 (frequency_penalty)",
@@ -163,7 +163,7 @@ const tw: PartialLocaleType = {
    Error: "出錯了，請稍後再嘗試",
    Prompt: {
      History: (content: string) =>
-        "這是 AI 與用戶的歷史聊天總結，作為前情提要：" + content,
+        "這是 AI 與使用者的歷史聊天總結，作為前情提要：" + content,
      Topic:
        "Use the language used by the user (e.g. en for english conversation, zh-hant for chinese conversation, etc.) to generate a title (at most 6 words) summarizing our conversation without any lead-in, quotation marks, preamble like 'Title:', direct text copies, single-word replies, quotation marks, translations, or brackets. Remove enclosing quotation marks. The title should make third-party grasp the essence of the conversation in first sight.",
      Summarize:
@@ -179,53 +179,54 @@ const tw: PartialLocaleType = {
    Edit: "前置上下文和歷史記憶",
    Add: "新增一條",
  },
-  Plugin: { Name: "插件" },
+  Plugin: { Name: "外掛" },
+  FineTuned: { Sysmessage: "你是一個助手" },
  Mask: {
    Name: "面具",
    Page: {
-      Title: "预设角色面具",
-      SubTitle: (count: number) => `${count} 个预设角色定义`,
-      Search: "搜索角色面具",
-      Create: "新建",
+      Title: "預設角色面具",
+      SubTitle: (count: number) => `${count} 個預設角色定義`,
+      Search: "搜尋角色面具",
+      Create: "新增",
    },
    Item: {
-      Info: (count: number) => `包含 ${count} 条预设对话`,
-      Chat: "对话",
-      View: "查看",
-      Edit: "编辑",
-      Delete: "删除",
-      DeleteConfirm: "确认删除？",
+      Info: (count: number) => `包含 ${count} 條預設對話`,
+      Chat: "對話",
+      View: "檢視",
+      Edit: "編輯",
+      Delete: "刪除",
+      DeleteConfirm: "確認刪除？",
    },
    EditModal: {
      Title: (readonly: boolean) =>
-        `编辑预设面具 ${readonly ? "（只读）" : ""}`,
-      Download: "下载预设",
-      Clone: "克隆预设",
+        `編輯預設面具 ${readonly ? "（只讀）" : ""}`,
+      Download: "下載預設",
+      Clone: "複製預設",
    },
    Config: {
-      Avatar: "角色头像",
-      Name: "角色名称",
+      Avatar: "角色頭像",
+      Name: "角色名稱",
    },
  },
  NewChat: {
    Return: "返回",
-    Skip: "跳过",
-    Title: "挑选一个面具",
-    SubTitle: "现在开始，与面具背后的灵魂思维碰撞",
-    More: "搜索更多",
-    NotShow: "不再展示",
-    ConfirmNoShow: "确认禁用？禁用后可以随时在设置中重新启用。",
+    Skip: "跳過",
+    Title: "挑選一個面具",
+    SubTitle: "現在開始，與面具背後的靈魂思維碰撞",
+    More: "搜尋更多",
+    NotShow: "不再呈現",
+    ConfirmNoShow: "確認停用？停用後可以隨時在設定中重新啟用。",
  },
  UI: {
-    Confirm: "确认",
+    Confirm: "確認",
    Cancel: "取消",
-    Close: "关闭",
-    Create: "新建",
-    Edit: "编辑",
+    Close: "關閉",
+    Create: "新增",
+    Edit: "編輯",
  },
  Exporter: {
    Model: "模型",
-    Messages: "消息",
+    Messages: "訊息",
    Topic: "主題",
    Time: "時間",
  },
--- a/app/locales/vi.ts
+++ b/app/locales/vi.ts
@@ -186,6 +186,9 @@ const vi: PartialLocaleType = {
  Plugin: {
    Name: "Plugin",
  },
+  FineTuned: {
+    Sysmessage: "Bạn là một trợ lý",
+  },
  Mask: {
    Name: "Mẫu",
    Page: {
--- a/app/masks/en.ts
+++ b/app/masks/en.ts
@@ -35,7 +35,7 @@ export const EN_MASKS: BuiltinMask[] = [
        id: "prompt-improve-0",
        role: "user",
        content:
-          'Read all of the instructions below and once you understand them say "Shall we begin:"\n \nI want you to become my Prompt Creator. Your goal is to help me craft the best possible prompt for my needs. The prompt will be used by you, ChatGPT. You will follow the following process:\nYour first response will be to ask me what the prompt should be about. I will provide my answer, but we will need to improve it through continual iterations by going through the next steps.\n \nBased on my input, you will generate 3 sections.\n \nRevised Prompt (provide your rewritten prompt. it should be clear, concise, and easily understood by you)\nSuggestions (provide 3 suggestions on what details to include in the prompt to improve it)\nQuestions (ask the 3 most relevant questions pertaining to what additional information is needed from me to improve the prompt)\n \nAt the end of these sections give me a reminder of my options which are:\n \nOption 1: Read the output and provide more info or answer one or more of the questions\nOption 2: Type "Use this prompt" and I will submit this as a query for you\nOption 3: Type "Restart" to restart this process from the beginning\nOption 4: Type "Quit" to end this script and go back to a regular ChatGPT session\n \nIf I type "Option 2", "2" or "Use this prompt" then we have finsihed and you should use the Revised Prompt as a prompt to generate my request\nIf I type "option 3", "3" or "Restart" then forget the latest Revised Prompt and restart this process\nIf I type "Option 4", "4" or "Quit" then finish this process and revert back to your general mode of operation\n\n\nWe will continue this iterative process with me providing additional information to you and you updating the prompt in the Revised Prompt section until it is complete.',
+          'Read all of the instructions below and once you understand them say "Shall we begin:"\n \nI want you to become my Prompt Creator. Your goal is to help me craft the best possible prompt for my needs. The prompt will be used by you, ChatGPT. You will follow the following process:\nYour first response will be to ask me what the prompt should be about. I will provide my answer, but we will need to improve it through continual iterations by going through the next steps.\n \nBased on my input, you will generate 3 sections.\n \nRevised Prompt (provide your rewritten prompt. it should be clear, concise, and easily understood by you)\nSuggestions (provide 3 suggestions on what details to include in the prompt to improve it)\nQuestions (ask the 3 most relevant questions pertaining to what additional information is needed from me to improve the prompt)\n \nAt the end of these sections give me a reminder of my options which are:\n \nOption 1: Read the output and provide more info or answer one or more of the questions\nOption 2: Type "Use this prompt" and I will submit this as a query for you\nOption 3: Type "Restart" to restart this process from the beginning\nOption 4: Type "Quit" to end this script and go back to a regular ChatGPT session\n \nIf I type "Option 2", "2" or "Use this prompt" then we have finished and you should use the Revised Prompt as a prompt to generate my request\nIf I type "option 3", "3" or "Restart" then forget the latest Revised Prompt and restart this process\nIf I type "Option 4", "4" or "Quit" then finish this process and revert back to your general mode of operation\n\n\nWe will continue this iterative process with me providing additional information to you and you updating the prompt in the Revised Prompt section until it is complete.',
        date: "",
      },
      {
--- a/app/store/access.ts
+++ b/app/store/access.ts
@@ -1,28 +1,7 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
 import { DEFAULT_API_HOST, DEFAULT_MODELS, StoreKey } from "../constant";
 import { getHeaders } from "../client/api";
-import { BOT_HELLO } from "./chat";
 import { getClientConfig } from "../config/client";
-
-export interface AccessControlStore {
-  accessCode: string;
-  token: string;
-
-  needCode: boolean;
-  hideUserApiKey: boolean;
-  hideBalanceQuery: boolean;
-  disableGPT4: boolean;
-
-  openaiUrl: string;
-
-  updateToken: (_: string) => void;
-  updateCode: (_: string) => void;
-  updateOpenAiUrl: (_: string) => void;
-  enabledAccessControl: () => boolean;
-  isAuthorized: () => boolean;
-  fetch: () => void;
-}
+import { createPersistStore } from "../utils/store";

 let fetchState = 0; // 0 not fetch, 1 fetching, 2 done

@@ -30,72 +9,74 @@ const DEFAULT_OPENAI_URL =
  getClientConfig()?.buildMode === "export" ? DEFAULT_API_HOST : "/api/openai/";
 console.log("[API] default openai url", DEFAULT_OPENAI_URL);

-export const useAccessStore = create<AccessControlStore>()(
-  persist(
-    (set, get) => ({
-      token: "",
-      accessCode: "",
-      needCode: true,
-      hideUserApiKey: false,
-      hideBalanceQuery: false,
-      disableGPT4: false,
+const DEFAULT_ACCESS_STATE = {
+  token: "",
+  accessCode: "",
+  needCode: true,
+  hideUserApiKey: false,
+  hideBalanceQuery: false,
+  disableGPT4: false,

-      openaiUrl: DEFAULT_OPENAI_URL,
+  openaiUrl: DEFAULT_OPENAI_URL,
+};

-      enabledAccessControl() {
-        get().fetch();
+export const useAccessStore = createPersistStore(
+  { ...DEFAULT_ACCESS_STATE },

-        return get().needCode;
-      },
-      updateCode(code: string) {
-        set(() => ({ accessCode: code?.trim() }));
-      },
-      updateToken(token: string) {
-        set(() => ({ token: token?.trim() }));
-      },
-      updateOpenAiUrl(url: string) {
-        set(() => ({ openaiUrl: url?.trim() }));
-      },
-      isAuthorized() {
-        get().fetch();
+  (set, get) => ({
+    enabledAccessControl() {
+      this.fetch();

-        // has token or has code or disabled access control
-        return (
-          !!get().token || !!get().accessCode || !get().enabledAccessControl()
-        );
-      },
-      fetch() {
-        if (fetchState > 0 || getClientConfig()?.buildMode === "export") return;
-        fetchState = 1;
-        fetch("/api/config", {
-          method: "post",
-          body: null,
-          headers: {
-            ...getHeaders(),
-          },
-        })
-          .then((res) => res.json())
-          .then((res: DangerConfig) => {
-            console.log("[Config] got config from server", res);
-            set(() => ({ ...res }));
-
-            if (res.disableGPT4) {
-              DEFAULT_MODELS.forEach(
-                (m: any) => (m.available = !m.name.startsWith("gpt-4")),
-              );
-            }
-          })
-          .catch(() => {
-            console.error("[Config] failed to fetch config");
-          })
-          .finally(() => {
-            fetchState = 2;
-          });
-      },
-    }),
-    {
-      name: StoreKey.Access,
-      version: 1,
+      return get().needCode;
    },
-  ),
+    updateCode(code: string) {
+      set(() => ({ accessCode: code?.trim() }));
+    },
+    updateToken(token: string) {
+      set(() => ({ token: token?.trim() }));
+    },
+    updateOpenAiUrl(url: string) {
+      set(() => ({ openaiUrl: url?.trim() }));
+    },
+    isAuthorized() {
+      this.fetch();
+
+      // has token or has code or disabled access control
+      return (
+        !!get().token || !!get().accessCode || !this.enabledAccessControl()
+      );
+    },
+    fetch() {
+      if (fetchState > 0 || getClientConfig()?.buildMode === "export") return;
+      fetchState = 1;
+      fetch("/api/config", {
+        method: "post",
+        body: null,
+        headers: {
+          ...getHeaders(),
+        },
+      })
+        .then((res) => res.json())
+        .then((res: DangerConfig) => {
+          console.log("[Config] got config from server", res);
+          set(() => ({ ...res }));
+
+          if (res.disableGPT4) {
+            DEFAULT_MODELS.forEach(
+              (m: any) => (m.available = !m.name.startsWith("gpt-4")),
+            );
+          }
+        })
+        .catch(() => {
+          console.error("[Config] failed to fetch config");
+        })
+        .finally(() => {
+          fetchState = 2;
+        });
+    },
+  }),
+  {
+    name: StoreKey.Access,
+    version: 1,
+  },
 );
--- a/app/store/chat.ts
+++ b/app/store/chat.ts
@@ -1,6 +1,3 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-
 import { trimTopic } from "../utils";

 import Locale, { getLang } from "../locales";
@@ -11,12 +8,14 @@ import {
  DEFAULT_INPUT_TEMPLATE,
  DEFAULT_SYSTEM_TEMPLATE,
  StoreKey,
+  SUMMARIZE_MODEL,
 } from "../constant";
 import { api, RequestMessage } from "../client/api";
 import { ChatControllerPool } from "../client/controller";
 import { prettyObject } from "../utils/format";
 import { estimateTokenLength } from "../utils/token";
 import { nanoid } from "nanoid";
+import { createPersistStore } from "../utils/store";

 export type ChatMessage = RequestMessage & {
  date: string;
@@ -80,6 +79,11 @@ function createEmptySession(): ChatSession {
  };
 }

+function getSummarizeModel(currentModel: string) {
+  // if it is using gpt-* models, force to use 3.5 to summarize
+  return currentModel.startsWith("gpt") ? SUMMARIZE_MODEL : currentModel;
+}
+
 interface ChatStore {
  sessions: ChatSession[];
  currentSessionIndex: number;
@@ -134,12 +138,22 @@ function fillTemplateWith(input: string, modelConfig: ModelConfig) {
  return output;
 }

-export const useChatStore = create<ChatStore>()(
-  persist(
-    (set, get) => ({
-      sessions: [createEmptySession()],
-      currentSessionIndex: 0,
+const DEFAULT_CHAT_STATE = {
+  sessions: [createEmptySession()],
+  currentSessionIndex: 0,
+};

+export const useChatStore = createPersistStore(
+  DEFAULT_CHAT_STATE,
+  (set, _get) => {
+    function get() {
+      return {
+        ..._get(),
+        ...methods,
+      };
+    }
+
+    const methods = {
      clearSessions() {
        set(() => ({
          sessions: [createEmptySession()],
@@ -178,7 +192,7 @@ export const useChatStore = create<ChatStore>()(
        });
      },

-      newSession(mask) {
+      newSession(mask?: Mask) {
        const session = createEmptySession();

        if (mask) {
@@ -201,14 +215,14 @@ export const useChatStore = create<ChatStore>()(
        }));
      },

-      nextSession(delta) {
+      nextSession(delta: number) {
        const n = get().sessions.length;
        const limit = (x: number) => (x + n) % n;
        const i = get().currentSessionIndex;
        get().selectSession(limit(i + delta));
      },

-      deleteSession(index) {
+      deleteSession(index: number) {
        const deletingLastSession = get().sessions.length === 1;
        const deletedSession = get().sessions.at(index);

@@ -265,7 +279,7 @@ export const useChatStore = create<ChatStore>()(
        return session;
      },

-      onNewMessage(message) {
+      onNewMessage(message: ChatMessage) {
        get().updateCurrentSession((session) => {
          session.messages = session.messages.concat();
          session.lastUpdate = Date.now();
@@ -274,7 +288,7 @@ export const useChatStore = create<ChatStore>()(
        get().summarizeSession();
      },

-      async onUserInput(content) {
+      async onUserInput(content: string) {
        const session = get().currentSession();
        const modelConfig = session.mask.modelConfig;

@@ -501,7 +515,7 @@ export const useChatStore = create<ChatStore>()(
          api.llm.chat({
            messages: topicMessages,
            config: {
-              model: "gpt-3.5-turbo",
+              model: getSummarizeModel(session.mask.modelConfig.model),
            },
            onFinish(message) {
              get().updateCurrentSession(
@@ -555,7 +569,11 @@ export const useChatStore = create<ChatStore>()(
                date: "",
              }),
            ),
-            config: { ...modelConfig, stream: true, model: "gpt-3.5-turbo" },
+            config: {
+              ...modelConfig,
+              stream: true,
+              model: getSummarizeModel(session.mask.modelConfig.model),
+            },
            onUpdate(message) {
              session.memoryPrompt = message;
            },
@@ -570,14 +588,14 @@ export const useChatStore = create<ChatStore>()(
        }
      },

-      updateStat(message) {
+      updateStat(message: ChatMessage) {
        get().updateCurrentSession((session) => {
          session.stat.charCount += message.content.length;
          // TODO: should update chat count and word count
        });
      },

-      updateCurrentSession(updater) {
+      updateCurrentSession(updater: (session: ChatSession) => void) {
        const sessions = get().sessions;
        const index = get().currentSessionIndex;
        updater(sessions[index]);
@@ -588,56 +606,60 @@ export const useChatStore = create<ChatStore>()(
        localStorage.clear();
        location.reload();
      },
-    }),
-    {
-      name: StoreKey.Chat,
-      version: 3.1,
-      migrate(persistedState, version) {
-        const state = persistedState as any;
-        const newState = JSON.parse(JSON.stringify(state)) as ChatStore;
+    };

-        if (version < 2) {
-          newState.sessions = [];
+    return methods;
+  },
+  {
+    name: StoreKey.Chat,
+    version: 3.1,
+    migrate(persistedState, version) {
+      const state = persistedState as any;
+      const newState = JSON.parse(
+        JSON.stringify(state),
+      ) as typeof DEFAULT_CHAT_STATE;

-          const oldSessions = state.sessions;
-          for (const oldSession of oldSessions) {
-            const newSession = createEmptySession();
-            newSession.topic = oldSession.topic;
-            newSession.messages = [...oldSession.messages];
-            newSession.mask.modelConfig.sendMemory = true;
-            newSession.mask.modelConfig.historyMessageCount = 4;
-            newSession.mask.modelConfig.compressMessageLengthThreshold = 1000;
-            newState.sessions.push(newSession);
+      if (version < 2) {
+        newState.sessions = [];
+
+        const oldSessions = state.sessions;
+        for (const oldSession of oldSessions) {
+          const newSession = createEmptySession();
+          newSession.topic = oldSession.topic;
+          newSession.messages = [...oldSession.messages];
+          newSession.mask.modelConfig.sendMemory = true;
+          newSession.mask.modelConfig.historyMessageCount = 4;
+          newSession.mask.modelConfig.compressMessageLengthThreshold = 1000;
+          newState.sessions.push(newSession);
+        }
+      }
+
+      if (version < 3) {
+        // migrate id to nanoid
+        newState.sessions.forEach((s) => {
+          s.id = nanoid();
+          s.messages.forEach((m) => (m.id = nanoid()));
+        });
+      }
+
+      // Enable `enableInjectSystemPrompts` attribute for old sessions.
+      // Resolve issue of old sessions not automatically enabling.
+      if (version < 3.1) {
+        newState.sessions.forEach((s) => {
+          if (
+            // Exclude those already set by user
+            !s.mask.modelConfig.hasOwnProperty("enableInjectSystemPrompts")
+          ) {
+            // Because users may have changed this configuration,
+            // the user's current configuration is used instead of the default
+            const config = useAppConfig.getState();
+            s.mask.modelConfig.enableInjectSystemPrompts =
+              config.modelConfig.enableInjectSystemPrompts;
          }
-        }
+        });
+      }

-        if (version < 3) {
-          // migrate id to nanoid
-          newState.sessions.forEach((s) => {
-            s.id = nanoid();
-            s.messages.forEach((m) => (m.id = nanoid()));
-          });
-        }
-
-        // Enable `enableInjectSystemPrompts` attribute for old sessions.
-        // Resolve issue of old sessions not automatically enabling.
-        if (version < 3.1) {
-          newState.sessions.forEach((s) => {
-            if (
-              // Exclude those already set by user
-              !s.mask.modelConfig.hasOwnProperty("enableInjectSystemPrompts")
-            ) {
-              // Because users may have changed this configuration,
-              // the user's current configuration is used instead of the default
-              const config = useAppConfig.getState();
-              s.mask.modelConfig.enableInjectSystemPrompts =
-                config.modelConfig.enableInjectSystemPrompts;
-            }
-          });
-        }
-
-        return newState;
-      },
+      return newState as any;
    },
-  ),
+  },
 );
--- a/app/store/config.ts
+++ b/app/store/config.ts
@@ -1,8 +1,13 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
 import { LLMModel } from "../client/api";
+import { isMacOS } from "../utils";
 import { getClientConfig } from "../config/client";
-import { DEFAULT_INPUT_TEMPLATE, DEFAULT_MODELS, StoreKey } from "../constant";
+import {
+  DEFAULT_INPUT_TEMPLATE,
+  DEFAULT_MODELS,
+  DEFAULT_SIDEBAR_WIDTH,
+  StoreKey,
+} from "../constant";
+import { createPersistStore } from "../utils/store";

 export type ModelType = (typeof DEFAULT_MODELS)[number]["name"];

@@ -21,14 +26,16 @@ export enum Theme {
 }

 export const DEFAULT_CONFIG = {
-  submitKey: SubmitKey.CtrlEnter as SubmitKey,
-  avatar: "1f437",
+  lastUpdate: Date.now(), // timestamp, to merge state
+
+  submitKey: isMacOS() ? SubmitKey.MetaEnter : SubmitKey.CtrlEnter,
+  avatar: "1f603",
  fontSize: 14,
  theme: Theme.Auto as Theme,
  tightBorder: !!getClientConfig()?.isApp,
  sendPreviewBubble: true,
  enableAutoGenerateTitle: true,
-  sidebarWidth: 300,
+  sidebarWidth: DEFAULT_SIDEBAR_WIDTH,

  disablePromptHint: false,

@@ -55,13 +62,6 @@ export const DEFAULT_CONFIG = {

 export type ChatConfig = typeof DEFAULT_CONFIG;

-export type ChatConfigStore = ChatConfig & {
-  reset: () => void;
-  update: (updater: (config: ChatConfig) => void) => void;
-  mergeModels: (newModels: LLMModel[]) => void;
-  allModels: () => LLMModel[];
-};
-
 export type ModelConfig = ChatConfig["modelConfig"];

 export function limitNumber(
@@ -70,7 +70,7 @@ export function limitNumber(
  max: number,
  defaultValue: number,
 ) {
-  if (typeof x !== "number" || isNaN(x)) {
+  if (isNaN(x)) {
    return defaultValue;
  }

@@ -98,85 +98,78 @@ export const ModalConfigValidator = {
  },
 };

-export const useAppConfig = create<ChatConfigStore>()(
-  persist(
-    (set, get) => ({
-      ...DEFAULT_CONFIG,
-
-      reset() {
-        set(() => ({ ...DEFAULT_CONFIG }));
-      },
-
-      update(updater) {
-        const config = { ...get() };
-        updater(config);
-        set(() => config);
-      },
-
-      mergeModels(newModels) {
-        if (!newModels || newModels.length === 0) {
-          return;
-        }
-
-        const oldModels = get().models;
-        const modelMap: Record<string, LLMModel> = {};
-
-        for (const model of oldModels) {
-          model.available = false;
-          modelMap[model.name] = model;
-        }
-
-        for (const model of newModels) {
-          model.available = true;
-          modelMap[model.name] = model;
-        }
-
-        set(() => ({
-          models: Object.values(modelMap),
-        }));
-      },
-
-      allModels() {
-        const customModels = get()
-          .customModels.split(",")
-          .filter((v) => !!v && v.length > 0)
-          .map((m) => ({ name: m, available: true }));
-
-        const models = get().models.concat(customModels);
-        return models;
-      },
-    }),
-    {
-      name: StoreKey.Config,
-      version: 3.7,
-      migrate(persistedState, version) {
-        const state = persistedState as ChatConfig;
-
-        if (version < 3.4) {
-          state.modelConfig.sendMemory = true;
-          state.modelConfig.historyMessageCount = 4;
-          state.modelConfig.compressMessageLengthThreshold = 1000;
-          state.modelConfig.frequency_penalty = 0;
-          state.modelConfig.top_p = 1;
-          state.modelConfig.template = DEFAULT_INPUT_TEMPLATE;
-          state.dontShowMaskSplashScreen = false;
-          state.hideBuiltinMasks = false;
-        }
-
-        if (version < 3.5) {
-          state.customModels = "claude,claude-100k";
-        }
-
-        if (version < 3.6) {
-          state.modelConfig.enableInjectSystemPrompts = true;
-        }
-
-        if (version < 3.7) {
-          state.enableAutoGenerateTitle = true;
-        }
-
-        return state as any;
-      },
+export const useAppConfig = createPersistStore(
+  { ...DEFAULT_CONFIG },
+  (set, get) => ({
+    reset() {
+      set(() => ({ ...DEFAULT_CONFIG }));
    },
-  ),
+
+    mergeModels(newModels: LLMModel[]) {
+      if (!newModels || newModels.length === 0) {
+        return;
+      }
+
+      const oldModels = get().models;
+      const modelMap: Record<string, LLMModel> = {};
+
+      for (const model of oldModels) {
+        model.available = false;
+        modelMap[model.name] = model;
+      }
+
+      for (const model of newModels) {
+        model.available = true;
+        modelMap[model.name] = model;
+      }
+
+      set(() => ({
+        models: Object.values(modelMap),
+      }));
+    },
+
+    allModels() {
+      const customModels = get()
+        .customModels.split(",")
+        .filter((v) => !!v && v.length > 0)
+        .map((m) => ({ name: m, available: true }));
+      return get().models.concat(customModels);
+    },
+  }),
+  {
+    name: StoreKey.Config,
+    version: 3.8,
+    migrate(persistedState, version) {
+      const state = persistedState as ChatConfig;
+
+      if (version < 3.4) {
+        state.modelConfig.sendMemory = true;
+        state.modelConfig.historyMessageCount = 4;
+        state.modelConfig.compressMessageLengthThreshold = 1000;
+        state.modelConfig.frequency_penalty = 0;
+        state.modelConfig.top_p = 1;
+        state.modelConfig.template = DEFAULT_INPUT_TEMPLATE;
+        state.dontShowMaskSplashScreen = false;
+        state.hideBuiltinMasks = false;
+      }
+
+      if (version < 3.5) {
+        state.customModels = "claude,claude-100k";
+      }
+
+      if (version < 3.6) {
+        state.modelConfig.enableInjectSystemPrompts = true;
+      }
+
+      if (version < 3.7) {
+        state.enableAutoGenerateTitle = true;
+      }
+
+      if (version < 3.8) {
+        state.lastUpdate = Date.now();
+      }
+
+      return state as any;
+    },
+  },
 );
--- a/app/store/mask.ts
+++ b/app/store/mask.ts
@@ -1,11 +1,10 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
 import { BUILTIN_MASKS } from "../masks";
 import { getLang, Lang } from "../locales";
 import { DEFAULT_TOPIC, ChatMessage } from "./chat";
 import { ModelConfig, useAppConfig } from "./config";
 import { StoreKey } from "../constant";
 import { nanoid } from "nanoid";
+import { createPersistStore } from "../utils/store";

 export type Mask = {
  id: string;
@@ -25,14 +24,6 @@ export const DEFAULT_MASK_STATE = {
 };

 export type MaskState = typeof DEFAULT_MASK_STATE;
-type MaskStore = MaskState & {
-  create: (mask?: Partial<Mask>) => Mask;
-  update: (id: string, updater: (mask: Mask) => void) => void;
-  delete: (id: string) => void;
-  search: (text: string) => Mask[];
-  get: (id?: string) => Mask | null;
-  getAll: () => Mask[];
-};

 export const DEFAULT_MASK_AVATAR = "gpt-bot";
 export const createEmptyMask = () =>
@@ -46,89 +37,90 @@ export const createEmptyMask = () =>
    lang: getLang(),
    builtin: false,
    createdAt: Date.now(),
-  } as Mask);
+  }) as Mask;

-export const useMaskStore = create<MaskStore>()(
-  persist(
-    (set, get) => ({
-      ...DEFAULT_MASK_STATE,
+export const useMaskStore = createPersistStore(
+  { ...DEFAULT_MASK_STATE },

-      create(mask) {
-        const masks = get().masks;
-        const id = nanoid();
-        masks[id] = {
-          ...createEmptyMask(),
-          ...mask,
-          id,
-          builtin: false,
-        };
+  (set, get) => ({
+    create(mask?: Partial<Mask>) {
+      const masks = get().masks;
+      const id = nanoid();
+      masks[id] = {
+        ...createEmptyMask(),
+        ...mask,
+        id,
+        builtin: false,
+      };

-        set(() => ({ masks }));
+      set(() => ({ masks }));
+      get().markUpdate();

-        return masks[id];
-      },
-      update(id, updater) {
-        const masks = get().masks;
-        const mask = masks[id];
-        if (!mask) return;
-        const updateMask = { ...mask };
-        updater(updateMask);
-        masks[id] = updateMask;
-        set(() => ({ masks }));
-      },
-      delete(id) {
-        const masks = get().masks;
-        delete masks[id];
-        set(() => ({ masks }));
-      },
-
-      get(id) {
-        return get().masks[id ?? 1145141919810];
-      },
-      getAll() {
-        const userMasks = Object.values(get().masks).sort(
-          (a, b) => b.createdAt - a.createdAt,
-        );
-        const config = useAppConfig.getState();
-        if (config.hideBuiltinMasks) return userMasks;
-        const buildinMasks = BUILTIN_MASKS.map(
-          (m) =>
-            ({
-              ...m,
-              modelConfig: {
-                ...config.modelConfig,
-                ...m.modelConfig,
-              },
-            } as Mask),
-        );
-        return userMasks.concat(buildinMasks);
-      },
-      search(text) {
-        return Object.values(get().masks);
-      },
-    }),
-    {
-      name: StoreKey.Mask,
-      version: 3.1,
-
-      migrate(state, version) {
-        const newState = JSON.parse(JSON.stringify(state)) as MaskState;
-
-        // migrate mask id to nanoid
-        if (version < 3) {
-          Object.values(newState.masks).forEach((m) => (m.id = nanoid()));
-        }
-
-        if (version < 3.1) {
-          const updatedMasks: Record<string, Mask> = {};
-          Object.values(newState.masks).forEach((m) => {
-            updatedMasks[m.id] = m;
-          });
-          newState.masks = updatedMasks;
-        }
-
-        return newState as any;
-      },
+      return masks[id];
    },
-  ),
+    updateMask(id: string, updater: (mask: Mask) => void) {
+      const masks = get().masks;
+      const mask = masks[id];
+      if (!mask) return;
+      const updateMask = { ...mask };
+      updater(updateMask);
+      masks[id] = updateMask;
+      set(() => ({ masks }));
+      get().markUpdate();
+    },
+    delete(id: string) {
+      const masks = get().masks;
+      delete masks[id];
+      set(() => ({ masks }));
+      get().markUpdate();
+    },
+
+    get(id?: string) {
+      return get().masks[id ?? 1145141919810];
+    },
+    getAll() {
+      const userMasks = Object.values(get().masks).sort(
+        (a, b) => b.createdAt - a.createdAt,
+      );
+      const config = useAppConfig.getState();
+      if (config.hideBuiltinMasks) return userMasks;
+      const buildinMasks = BUILTIN_MASKS.map(
+        (m) =>
+          ({
+            ...m,
+            modelConfig: {
+              ...config.modelConfig,
+              ...m.modelConfig,
+            },
+          }) as Mask,
+      );
+      return userMasks.concat(buildinMasks);
+    },
+    search(text: string) {
+      return Object.values(get().masks);
+    },
+  }),
+  {
+    name: StoreKey.Mask,
+    version: 3.1,
+
+    migrate(state, version) {
+      const newState = JSON.parse(JSON.stringify(state)) as MaskState;
+
+      // migrate mask id to nanoid
+      if (version < 3) {
+        Object.values(newState.masks).forEach((m) => (m.id = nanoid()));
+      }
+
+      if (version < 3.1) {
+        const updatedMasks: Record<string, Mask> = {};
+        Object.values(newState.masks).forEach((m) => {
+          updatedMasks[m.id] = m;
+        });
+        newState.masks = updatedMasks;
+      }
+
+      return newState as any;
+    },
+  },
 );
--- a/app/store/prompt.ts
+++ b/app/store/prompt.ts
@@ -1,9 +1,8 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
 import Fuse from "fuse.js";
 import { getLang } from "../locales";
 import { StoreKey } from "../constant";
 import { nanoid } from "nanoid";
+import { createPersistStore } from "../utils/store";

 export interface Prompt {
  id: string;
@@ -13,19 +12,6 @@ export interface Prompt {
  createdAt: number;
 }

-export interface PromptStore {
-  counter: number;
-  prompts: Record<string, Prompt>;
-
-  add: (prompt: Prompt) => string;
-  get: (id: string) => Prompt | undefined;
-  remove: (id: string) => void;
-  search: (text: string) => Prompt[];
-  update: (id: string, updater: (prompt: Prompt) => void) => void;
-
-  getUserPrompts: () => Prompt[];
-}
-
 export const SearchService = {
  ready: false,
  builtinEngine: new Fuse<Prompt>([], { keys: ["title"] }),
@@ -62,130 +48,136 @@ export const SearchService = {
  },
 };

-export const usePromptStore = create<PromptStore>()(
-  persist(
-    (set, get) => ({
-      counter: 0,
-      latestId: 0,
-      prompts: {},
+export const usePromptStore = createPersistStore(
+  {
+    counter: 0,
+    prompts: {} as Record<string, Prompt>,
+  },

-      add(prompt) {
-        const prompts = get().prompts;
-        prompt.id = nanoid();
-        prompt.isUser = true;
-        prompt.createdAt = Date.now();
-        prompts[prompt.id] = prompt;
+  (set, get) => ({
+    add(prompt: Prompt) {
+      const prompts = get().prompts;
+      prompt.id = nanoid();
+      prompt.isUser = true;
+      prompt.createdAt = Date.now();
+      prompts[prompt.id] = prompt;

-        set(() => ({
-          latestId: prompt.id!,
-          prompts: prompts,
-        }));
+      set(() => ({
+        prompts: prompts,
+      }));

-        return prompt.id!;
-      },
-
-      get(id) {
-        const targetPrompt = get().prompts[id];
-
-        if (!targetPrompt) {
-          return SearchService.builtinPrompts.find((v) => v.id === id);
-        }
-
-        return targetPrompt;
-      },
-
-      remove(id) {
-        const prompts = get().prompts;
-        delete prompts[id];
-        SearchService.remove(id);
-
-        set(() => ({
-          prompts,
-          counter: get().counter + 1,
-        }));
-      },
-
-      getUserPrompts() {
-        const userPrompts = Object.values(get().prompts ?? {});
-        userPrompts.sort((a, b) =>
-          b.id && a.id ? b.createdAt - a.createdAt : 0,
-        );
-        return userPrompts;
-      },
-
-      update(id, updater) {
-        const prompt = get().prompts[id] ?? {
-          title: "",
-          content: "",
-          id,
-        };
-
-        SearchService.remove(id);
-        updater(prompt);
-        const prompts = get().prompts;
-        prompts[id] = prompt;
-        set(() => ({ prompts }));
-        SearchService.add(prompt);
-      },
-
-      search(text) {
-        if (text.length === 0) {
-          // return all rompts
-          return get().getUserPrompts().concat(SearchService.builtinPrompts);
-        }
-        return SearchService.search(text) as Prompt[];
-      },
-    }),
-    {
-      name: StoreKey.Prompt,
-      version: 3,
-
-      migrate(state, version) {
-        const newState = JSON.parse(JSON.stringify(state)) as PromptStore;
-
-        if (version < 3) {
-          Object.values(newState.prompts).forEach((p) => (p.id = nanoid()));
-        }
-
-        return newState;
-      },
-
-      onRehydrateStorage(state) {
-        const PROMPT_URL = "./prompts.json";
-
-        type PromptList = Array<[string, string]>;
-
-        fetch(PROMPT_URL)
-          .then((res) => res.json())
-          .then((res) => {
-            let fetchPrompts = [res.en, res.cn];
-            if (getLang() === "cn") {
-              fetchPrompts = fetchPrompts.reverse();
-            }
-            const builtinPrompts = fetchPrompts.map(
-              (promptList: PromptList) => {
-                return promptList.map(
-                  ([title, content]) =>
-                    ({
-                      id: nanoid(),
-                      title,
-                      content,
-                      createdAt: Date.now(),
-                    } as Prompt),
-                );
-              },
-            );
-
-            const userPrompts =
-              usePromptStore.getState().getUserPrompts() ?? [];
-
-            const allPromptsForSearch = builtinPrompts
-              .reduce((pre, cur) => pre.concat(cur), [])
-              .filter((v) => !!v.title && !!v.content);
-            SearchService.count.builtin = res.en.length + res.cn.length;
-            SearchService.init(allPromptsForSearch, userPrompts);
-          });
-      },
+      return prompt.id!;
    },
-  ),
+
+    get(id: string) {
+      const targetPrompt = get().prompts[id];
+
+      if (!targetPrompt) {
+        return SearchService.builtinPrompts.find((v) => v.id === id);
+      }
+
+      return targetPrompt;
+    },
+
+    remove(id: string) {
+      const prompts = get().prompts;
+      delete prompts[id];
+
+      Object.entries(prompts).some(([key, prompt]) => {
+        if (prompt.id === id) {
+          delete prompts[key];
+          return true;
+        }
+        return false;
+      });
+
+      SearchService.remove(id);
+
+      set(() => ({
+        prompts,
+        counter: get().counter + 1,
+      }));
+    },
+
+    getUserPrompts() {
+      const userPrompts = Object.values(get().prompts ?? {});
+      userPrompts.sort((a, b) =>
+        b.id && a.id ? b.createdAt - a.createdAt : 0,
+      );
+      return userPrompts;
+    },
+
+    updatePrompt(id: string, updater: (prompt: Prompt) => void) {
+      const prompt = get().prompts[id] ?? {
+        title: "",
+        content: "",
+        id,
+      };
+
+      SearchService.remove(id);
+      updater(prompt);
+      const prompts = get().prompts;
+      prompts[id] = prompt;
+      set(() => ({ prompts }));
+      SearchService.add(prompt);
+    },
+
+    search(text: string) {
+      if (text.length === 0) {
+        // return all rompts
+        return this.getUserPrompts().concat(SearchService.builtinPrompts);
+      }
+      return SearchService.search(text) as Prompt[];
+    },
+  }),
+  {
+    name: StoreKey.Prompt,
+    version: 3,
+
+    migrate(state, version) {
+      const newState = JSON.parse(JSON.stringify(state)) as {
+        prompts: Record<string, Prompt>;
+      };
+
+      if (version < 3) {
+        Object.values(newState.prompts).forEach((p) => (p.id = nanoid()));
+      }
+
+      return newState as any;
+    },
+
+    onRehydrateStorage(state) {
+      const PROMPT_URL = "./prompts.json";
+
+      type PromptList = Array<[string, string]>;
+
+      fetch(PROMPT_URL)
+        .then((res) => res.json())
+        .then((res) => {
+          let fetchPrompts = [res.en, res.cn];
+          if (getLang() === "cn") {
+            fetchPrompts = fetchPrompts.reverse();
+          }
+          const builtinPrompts = fetchPrompts.map((promptList: PromptList) => {
+            return promptList.map(
+              ([title, content]) =>
+                ({
+                  id: nanoid(),
+                  title,
+                  content,
+                  createdAt: Date.now(),
+                }) as Prompt,
+            );
+          });
+
+          const userPrompts = usePromptStore.getState().getUserPrompts() ?? [];
+
+          const allPromptsForSearch = builtinPrompts
+            .reduce((pre, cur) => pre.concat(cur), [])
+            .filter((v) => !!v.title && !!v.content);
+          SearchService.count.builtin = res.en.length + res.cn.length;
+          SearchService.init(allPromptsForSearch, userPrompts);
+        });
+    },
+  },
 );
--- a/app/store/sync.ts
+++ b/app/store/sync.ts
@@ -1,7 +1,19 @@
+import { getClientConfig } from "../config/client";
 import { Updater } from "../typing";
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-import { StoreKey } from "../constant";
+import { ApiPath, STORAGE_KEY, StoreKey } from "../constant";
+import { createPersistStore } from "../utils/store";
+import {
+  AppState,
+  getLocalAppState,
+  GetStoreState,
+  mergeAppState,
+  setLocalAppState,
+} from "../utils/sync";
+import { downloadAs, readFromFile } from "../utils";
+import { showToast } from "../components/ui-lib";
+import Locale from "../locales";
+import { createSyncClient, ProviderType } from "../utils/cloud";
+import { corsPath } from "../utils/cors";

 export interface WebDavConfig {
  server: string;
@@ -9,79 +21,111 @@ export interface WebDavConfig {
  password: string;
 }

-export interface SyncStore {
-  webDavConfig: WebDavConfig;
-  lastSyncTime: number;
+const isApp = !!getClientConfig()?.isApp;
+export type SyncStore = GetStoreState<typeof useSyncStore>;

-  update: Updater<WebDavConfig>;
-  check: () => Promise<boolean>;
+const DEFAULT_SYNC_STATE = {
+  provider: ProviderType.WebDAV,
+  useProxy: true,
+  proxyUrl: corsPath(ApiPath.Cors),

-  path: (path: string) => string;
-  headers: () => { Authorization: string };
-}
+  webdav: {
+    endpoint: "",
+    username: "",
+    password: "",
+  },

-const FILE = {
-  root: "/chatgpt-next-web/",
+  upstash: {
+    endpoint: "",
+    username: STORAGE_KEY,
+    apiKey: "",
+  },
+
+  lastSyncTime: 0,
+  lastProvider: "",
 };

-export const useSyncStore = create<SyncStore>()(
-  persist(
-    (set, get) => ({
-      webDavConfig: {
-        server: "",
-        username: "",
-        password: "",
-      },
-
-      lastSyncTime: 0,
-
-      update(updater) {
-        const config = { ...get().webDavConfig };
-        updater(config);
-        set({ webDavConfig: config });
-      },
-
-      async check() {
-        try {
-          const res = await fetch(this.path(""), {
-            method: "PROFIND",
-            headers: this.headers(),
-          });
-          console.log(res);
-          return res.status === 207;
-        } catch (e) {
-          console.error("[Sync] ", e);
-          return false;
-        }
-      },
-
-      path(path: string) {
-        let url = get().webDavConfig.server;
-
-        if (!url.endsWith("/")) {
-          url += "/";
-        }
-
-        if (path.startsWith("/")) {
-          path = path.slice(1);
-        }
-
-        return url + path;
-      },
-
-      headers() {
-        const auth = btoa(
-          [get().webDavConfig.username, get().webDavConfig.password].join(":"),
-        );
-
-        return {
-          Authorization: `Basic ${auth}`,
-        };
-      },
-    }),
-    {
-      name: StoreKey.Sync,
-      version: 1,
+export const useSyncStore = createPersistStore(
+  DEFAULT_SYNC_STATE,
+  (set, get) => ({
+    coundSync() {
+      const config = get()[get().provider];
+      return Object.values(config).every((c) => c.toString().length > 0);
    },
-  ),
+
+    markSyncTime() {
+      set({ lastSyncTime: Date.now(), lastProvider: get().provider });
+    },
+
+    export() {
+      const state = getLocalAppState();
+      const datePart = isApp
+      ? `${new Date().toLocaleDateString().replace(/\//g, '_')} ${new Date().toLocaleTimeString().replace(/:/g, '_')}`
+      : new Date().toLocaleString();
+
+      const fileName = `Backup-${datePart}.json`;
+      downloadAs(JSON.stringify(state), fileName);
+    },
+
+    async import() {
+      const rawContent = await readFromFile();
+
+      try {
+        const remoteState = JSON.parse(rawContent) as AppState;
+        const localState = getLocalAppState();
+        mergeAppState(localState, remoteState);
+        setLocalAppState(localState);
+        location.reload();
+      } catch (e) {
+        console.error("[Import]", e);
+        showToast(Locale.Settings.Sync.ImportFailed);
+      }
+    },
+
+    getClient() {
+      const provider = get().provider;
+      const client = createSyncClient(provider, get());
+      return client;
+    },
+
+    async sync() {
+      const localState = getLocalAppState();
+      const provider = get().provider;
+      const config = get()[provider];
+      const client = this.getClient();
+
+      try {
+        const remoteState = JSON.parse(
+          await client.get(config.username),
+        ) as AppState;
+        mergeAppState(localState, remoteState);
+        setLocalAppState(localState);
+      } catch (e) {
+        console.log("[Sync] failed to get remote state", e);
+      }
+
+      await client.set(config.username, JSON.stringify(localState));
+
+      this.markSyncTime();
+    },
+
+    async check() {
+      const client = this.getClient();
+      return await client.check();
+    },
+  }),
+  {
+    name: StoreKey.Sync,
+    version: 1.1,
+
+    migrate(persistedState, version) {
+      const newState = persistedState as typeof DEFAULT_SYNC_STATE;
+
+      if (version < 1.1) {
+        newState.upstash.username = STORAGE_KEY;
+      }
+
+      return newState as any;
+    },
+  },
 );
--- a/app/store/update.ts
+++ b/app/store/update.ts
@@ -1,26 +1,12 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
 import { FETCH_COMMIT_URL, FETCH_TAG_URL, StoreKey } from "../constant";
 import { api } from "../client/api";
 import { getClientConfig } from "../config/client";
-
-export interface UpdateStore {
-  versionType: "date" | "tag";
-  lastUpdate: number;
-  version: string;
-  remoteVersion: string;
-
-  used?: number;
-  subscription?: number;
-  lastUpdateUsage: number;
-
-  getLatestVersion: (force?: boolean) => Promise<void>;
-  updateUsage: (force?: boolean) => Promise<void>;
-
-  formatVersion: (version: string) => string;
-}
+import { createPersistStore } from "../utils/store";
+import ChatGptIcon from "../icons/chatgpt.png";
+import Locale from "../locales";

 const ONE_MINUTE = 60 * 1000;
+const isApp = !!getClientConfig()?.isApp;

 function formatVersionDate(t: string) {
  const d = new Date(+t);
@@ -35,7 +21,9 @@ function formatVersionDate(t: string) {
  ].join("");
 }

-async function getVersion(type: "date" | "tag") {
+type VersionType = "date" | "tag";
+
+async function getVersion(type: VersionType) {
  if (type === "date") {
    const data = (await (await fetch(FETCH_COMMIT_URL)).json()) as {
      commit: {
@@ -55,75 +43,108 @@ async function getVersion(type: "date" | "tag") {
  }
 }

-export const useUpdateStore = create<UpdateStore>()(
-  persist(
-    (set, get) => ({
-      versionType: "tag",
-      lastUpdate: 0,
-      version: "unknown",
-      remoteVersion: "",
+export const useUpdateStore = createPersistStore(
+  {
+    versionType: "tag" as VersionType,
+    lastUpdate: 0,
+    version: "unknown",
+    remoteVersion: "",
+    used: 0,
+    subscription: 0,

-      lastUpdateUsage: 0,
-
-      formatVersion(version: string) {
-        if (get().versionType === "date") {
-          version = formatVersionDate(version);
-        }
-        return version;
-      },
-
-      async getLatestVersion(force = false) {
-        const versionType = get().versionType;
-        let version =
-          versionType === "date"
-            ? getClientConfig()?.commitDate
-            : getClientConfig()?.version;
-
-        set(() => ({ version }));
-
-        const shouldCheck = Date.now() - get().lastUpdate > 2 * 60 * ONE_MINUTE;
-        if (!force && !shouldCheck) return;
-
-        set(() => ({
-          lastUpdate: Date.now(),
-        }));
-
-        try {
-          const remoteId = await getVersion(versionType);
-          set(() => ({
-            remoteVersion: remoteId,
-          }));
-          console.log("[Got Upstream] ", remoteId);
-        } catch (error) {
-          console.error("[Fetch Upstream Commit Id]", error);
-        }
-      },
-
-      async updateUsage(force = false) {
-        const overOneMinute = Date.now() - get().lastUpdateUsage >= ONE_MINUTE;
-        if (!overOneMinute && !force) return;
-
-        set(() => ({
-          lastUpdateUsage: Date.now(),
-        }));
-
-        try {
-          const usage = await api.llm.usage();
-
-          if (usage) {
-            set(() => ({
-              used: usage.used,
-              subscription: usage.total,
-            }));
-          }
-        } catch (e) {
-          console.error((e as Error).message);
-        }
-      },
-    }),
-    {
-      name: StoreKey.Update,
-      version: 1,
+    lastUpdateUsage: 0,
+  },
+  (set, get) => ({
+    formatVersion(version: string) {
+      if (get().versionType === "date") {
+        version = formatVersionDate(version);
+      }
+      return version;
    },
-  ),
+
+    async getLatestVersion(force = false) {
+      const versionType = get().versionType;
+      let version =
+        versionType === "date"
+          ? getClientConfig()?.commitDate
+          : getClientConfig()?.version;
+
+      set(() => ({ version }));
+
+      const shouldCheck = Date.now() - get().lastUpdate > 2 * 60 * ONE_MINUTE;
+      if (!force && !shouldCheck) return;
+
+      set(() => ({
+        lastUpdate: Date.now(),
+      }));
+
+      try {
+        const remoteId = await getVersion(versionType);
+        set(() => ({
+          remoteVersion: remoteId,
+        }));
+        if (window.__TAURI__?.notification && isApp) {
+          // Check if notification permission is granted
+          await window.__TAURI__?.notification.isPermissionGranted().then((granted) => {
+            if (!granted) {
+              return;
+            } else {
+              // Request permission to show notifications
+              window.__TAURI__?.notification.requestPermission().then((permission) => {
+                if (permission === 'granted') {
+                  if (version === remoteId) {
+                    // Show a notification using Tauri
+                    window.__TAURI__?.notification.sendNotification({
+                      title: "ChatGPT Next Web",
+                      body: `${Locale.Settings.Update.IsLatest}`,
+                      icon: `${ChatGptIcon.src}`,
+                      sound: "Default"
+                    });
+                  } else {
+                    const updateMessage = Locale.Settings.Update.FoundUpdate(`${remoteId}`);
+                    // Show a notification for the new version using Tauri
+                    window.__TAURI__?.notification.sendNotification({
+                      title: "ChatGPT Next Web",
+                      body: updateMessage,
+                      icon: `${ChatGptIcon.src}`,
+                      sound: "Default"
+                    });
+                  }
+                }
+              });
+            }
+          });
+        }
+        console.log("[Got Upstream] ", remoteId);
+      } catch (error) {
+        console.error("[Fetch Upstream Commit Id]", error);
+      }
+    },
+
+    async updateUsage(force = false) {
+      const overOneMinute = Date.now() - get().lastUpdateUsage >= ONE_MINUTE;
+      if (!overOneMinute && !force) return;
+
+      set(() => ({
+        lastUpdateUsage: Date.now(),
+      }));
+
+      try {
+        const usage = await api.llm.usage();
+
+        if (usage) {
+          set(() => ({
+            used: usage.used,
+            subscription: usage.total,
+          }));
+        }
+      } catch (e) {
+        console.error((e as Error).message);
+      }
+    },
+  }),
+  {
+    name: StoreKey.Update,
+    version: 1,
+  },
 );
--- a/app/styles/globals.scss
+++ b/app/styles/globals.scss
@@ -349,7 +349,7 @@ pre {
  justify-content: center;
  border: var(--border-in-light);
  box-shadow: var(--card-shadow);
-  border-radius: 10px;
+  border-radius: 11px;
 }

 .one-line {
--- a/app/utils.ts
+++ b/app/utils.ts
@@ -31,12 +31,41 @@ export async function copyToClipboard(text: string) {
  }
 }

-export function downloadAs(text: string, filename: string) {
-  const element = document.createElement("a");
-  element.setAttribute(
-    "href",
-    "data:text/plain;charset=utf-8," + encodeURIComponent(text),
-  );
+export async function downloadAs(text: string, filename: string) {
+  if (window.__TAURI__) {
+    const result = await window.__TAURI__.dialog.save({
+      defaultPath: `${filename}`,
+      filters: [
+        {
+          name: `${filename.split('.').pop()} files`,
+          extensions: [`${filename.split('.').pop()}`],
+        },
+        {
+          name: "All Files",
+          extensions: ["*"],
+        },
+      ],
+    });
+
+    if (result !== null) {
+      try {
+        await window.__TAURI__.fs.writeBinaryFile(
+          result,
+          new Uint8Array([...text].map((c) => c.charCodeAt(0)))
+        );
+        showToast(Locale.Download.Success);
+      } catch (error) {
+        showToast(Locale.Download.Failed);
+      }
+    } else {
+      showToast(Locale.Download.Failed);
+    }
+  } else {
+    const element = document.createElement("a");
+    element.setAttribute(
+      "href",
+      "data:text/plain;charset=utf-8," + encodeURIComponent(text),
+    );
  element.setAttribute("download", filename);

  element.style.display = "none";
@@ -46,7 +75,7 @@ export function downloadAs(text: string, filename: string) {

  document.body.removeChild(element);
 }
-
+}
 export function readFromFile() {
  return new Promise<string>((res, rej) => {
    const fileInput = document.createElement("input");
@@ -173,3 +202,15 @@ export function autoGrowTextArea(dom: HTMLTextAreaElement) {
 export function getCSSVar(varName: string) {
  return getComputedStyle(document.body).getPropertyValue(varName).trim();
 }
+
+/**
+ * Detects Macintosh
+ */
+export function isMacOS(): boolean {
+  if (typeof window !== "undefined") {
+    let userAgent = window.navigator.userAgent.toLocaleLowerCase();
+    const macintosh = /iphone|ipad|ipod|macintosh/.test(userAgent)
+    return !!macintosh
+  }
+  return false
+}
--- a/app/utils/clone.ts
+++ b/app/utils/clone.ts
@@ -0,0 +1,3 @@
+export function deepClone<T>(obj: T) {
+  return JSON.parse(JSON.stringify(obj));
+}
--- a/app/utils/cloud/index.ts
+++ b/app/utils/cloud/index.ts
@@ -0,0 +1,33 @@
+import { createWebDavClient } from "./webdav";
+import { createUpstashClient } from "./upstash";
+
+export enum ProviderType {
+  WebDAV = "webdav",
+  UpStash = "upstash",
+}
+
+export const SyncClients = {
+  [ProviderType.UpStash]: createUpstashClient,
+  [ProviderType.WebDAV]: createWebDavClient,
+} as const;
+
+type SyncClientConfig = {
+  [K in keyof typeof SyncClients]: (typeof SyncClients)[K] extends (
+    _: infer C,
+  ) => any
+    ? C
+    : never;
+};
+
+export type SyncClient = {
+  get: (key: string) => Promise<string>;
+  set: (key: string, value: string) => Promise<void>;
+  check: () => Promise<boolean>;
+};
+
+export function createSyncClient<T extends ProviderType>(
+  provider: T,
+  config: SyncClientConfig[T],
+): SyncClient {
+  return SyncClients[provider](config as any) as any;
+}
--- a/app/utils/cloud/upstash.ts
+++ b/app/utils/cloud/upstash.ts
@@ -0,0 +1,101 @@
+import { STORAGE_KEY } from "@/app/constant";
+import { SyncStore } from "@/app/store/sync";
+import { corsFetch } from "../cors";
+import { chunks } from "../format";
+
+export type UpstashConfig = SyncStore["upstash"];
+export type UpStashClient = ReturnType<typeof createUpstashClient>;
+
+export function createUpstashClient(store: SyncStore) {
+  const config = store.upstash;
+  const storeKey = config.username.length === 0 ? STORAGE_KEY : config.username;
+  const chunkCountKey = `${storeKey}-chunk-count`;
+  const chunkIndexKey = (i: number) => `${storeKey}-chunk-${i}`;
+
+  const proxyUrl =
+    store.useProxy && store.proxyUrl.length > 0 ? store.proxyUrl : undefined;
+
+  return {
+    async check() {
+      try {
+        const res = await corsFetch(this.path(`get/${storeKey}`), {
+          method: "GET",
+          headers: this.headers(),
+          proxyUrl,
+        });
+        console.log("[Upstash] check", res.status, res.statusText);
+        return [200].includes(res.status);
+      } catch (e) {
+        console.error("[Upstash] failed to check", e);
+      }
+      return false;
+    },
+
+    async redisGet(key: string) {
+      const res = await corsFetch(this.path(`get/${key}`), {
+        method: "GET",
+        headers: this.headers(),
+        proxyUrl,
+      });
+
+      console.log("[Upstash] get key = ", key, res.status, res.statusText);
+      const resJson = (await res.json()) as { result: string };
+
+      return resJson.result;
+    },
+
+    async redisSet(key: string, value: string) {
+      const res = await corsFetch(this.path(`set/${key}`), {
+        method: "POST",
+        headers: this.headers(),
+        body: value,
+        proxyUrl,
+      });
+
+      console.log("[Upstash] set key = ", key, res.status, res.statusText);
+    },
+
+    async get() {
+      const chunkCount = Number(await this.redisGet(chunkCountKey));
+      if (!Number.isInteger(chunkCount)) return;
+
+      const chunks = await Promise.all(
+        new Array(chunkCount)
+          .fill(0)
+          .map((_, i) => this.redisGet(chunkIndexKey(i))),
+      );
+      console.log("[Upstash] get full chunks", chunks);
+      return chunks.join("");
+    },
+
+    async set(_: string, value: string) {
+      // upstash limit the max request size which is 1Mb for “Free” and “Pay as you go”
+      // so we need to split the data to chunks
+      let index = 0;
+      for await (const chunk of chunks(value)) {
+        await this.redisSet(chunkIndexKey(index), chunk);
+        index += 1;
+      }
+      await this.redisSet(chunkCountKey, index.toString());
+    },
+
+    headers() {
+      return {
+        Authorization: `Bearer ${config.apiKey}`,
+      };
+    },
+    path(path: string) {
+      let url = config.endpoint;
+
+      if (!url.endsWith("/")) {
+        url += "/";
+      }
+
+      if (path.startsWith("/")) {
+        path = path.slice(1);
+      }
+
+      return url + path;
+    },
+  };
+}
--- a/app/utils/cloud/webdav.ts
+++ b/app/utils/cloud/webdav.ts
@@ -0,0 +1,76 @@
+import { STORAGE_KEY } from "@/app/constant";
+import { SyncStore } from "@/app/store/sync";
+import { corsFetch } from "../cors";
+
+export type WebDAVConfig = SyncStore["webdav"];
+export type WebDavClient = ReturnType<typeof createWebDavClient>;
+
+export function createWebDavClient(store: SyncStore) {
+  const folder = STORAGE_KEY;
+  const fileName = `${folder}/backup.json`;
+  const config = store.webdav;
+  const proxyUrl =
+    store.useProxy && store.proxyUrl.length > 0 ? store.proxyUrl : undefined;
+
+  return {
+    async check() {
+      try {
+        const res = await corsFetch(this.path(folder), {
+          method: "MKCOL",
+          headers: this.headers(),
+          proxyUrl,
+        });
+        console.log("[WebDav] check", res.status, res.statusText);
+        return [201, 200, 404, 301, 302, 307, 308].includes(res.status);
+      } catch (e) {
+        console.error("[WebDav] failed to check", e);
+      }
+
+      return false;
+    },
+
+    async get(key: string) {
+      const res = await corsFetch(this.path(fileName), {
+        method: "GET",
+        headers: this.headers(),
+        proxyUrl,
+      });
+
+      console.log("[WebDav] get key = ", key, res.status, res.statusText);
+
+      return await res.text();
+    },
+
+    async set(key: string, value: string) {
+      const res = await corsFetch(this.path(fileName), {
+        method: "PUT",
+        headers: this.headers(),
+        body: value,
+        proxyUrl,
+      });
+
+      console.log("[WebDav] set key = ", key, res.status, res.statusText);
+    },
+
+    headers() {
+      const auth = btoa(config.username + ":" + config.password);
+
+      return {
+        authorization: `Basic ${auth}`,
+      };
+    },
+    path(path: string) {
+      let url = config.endpoint;
+
+      if (!url.endsWith("/")) {
+        url += "/";
+      }
+
+      if (path.startsWith("/")) {
+        path = path.slice(1);
+      }
+
+      return url + path;
+    },
+  };
+}
--- a/app/utils/cors.ts
+++ b/app/utils/cors.ts
@@ -0,0 +1,50 @@
+import { getClientConfig } from "../config/client";
+import { ApiPath, DEFAULT_CORS_HOST } from "../constant";
+
+export function corsPath(path: string) {
+  const baseUrl = getClientConfig()?.isApp ? `${DEFAULT_CORS_HOST}` : "";
+
+  if (!path.startsWith("/")) {
+    path = "/" + path;
+  }
+
+  if (!path.endsWith("/")) {
+    path += "/";
+  }
+
+  return `${baseUrl}${path}`;
+}
+
+export function corsFetch(
+  url: string,
+  options: RequestInit & {
+    proxyUrl?: string;
+  },
+) {
+  if (!url.startsWith("http")) {
+    throw Error("[CORS Fetch] url must starts with http/https");
+  }
+
+  let proxyUrl = options.proxyUrl ?? corsPath(ApiPath.Cors);
+  if (!proxyUrl.endsWith("/")) {
+    proxyUrl += "/";
+  }
+
+  url = url.replace("://", "/");
+
+  const corsOptions = {
+    ...options,
+    method: "POST",
+    headers: options.method
+      ? {
+          ...options.headers,
+          method: options.method,
+        }
+      : options.headers,
+  };
+
+  const corsUrl = proxyUrl + url;
+  console.info("[CORS] target = ", corsUrl);
+
+  return fetch(corsUrl, corsOptions);
+}
--- a/app/utils/format.ts
+++ b/app/utils/format.ts
@@ -11,3 +11,18 @@ export function prettyObject(msg: any) {
  }
  return ["```json", msg, "```"].join("\n");
 }
+
+export function* chunks(s: string, maxBytes = 1000 * 1000) {
+  const decoder = new TextDecoder("utf-8");
+  let buf = new TextEncoder().encode(s);
+  while (buf.length) {
+    let i = buf.lastIndexOf(32, maxBytes + 1);
+    // If no space found, try forward search
+    if (i < 0) i = buf.indexOf(32, maxBytes);
+    // If there's no space at all, take all
+    if (i < 0) i = buf.length;
+    // This is a safe cut-off point; never half-way a multi-byte
+    yield decoder.decode(buf.slice(0, i));
+    buf = buf.slice(i + 1); // Skip space (if any)
+  }
+}
--- a/app/utils/merge.ts
+++ b/app/utils/merge.ts
@@ -1,9 +1,13 @@
 export function merge(target: any, source: any) {
  Object.keys(source).forEach(function (key) {
-    if (source[key] && typeof source[key] === "object") {
+    if (
+      source.hasOwnProperty(key) && // Check if the property is not inherited
+      source[key] &&
+      typeof source[key] === "object" || key === "__proto__" || key === "constructor"
+    ) {
      merge((target[key] = target[key] || {}), source[key]);
      return;
    }
    target[key] = source[key];
  });
-}
+} 
--- a/app/utils/store.ts
+++ b/app/utils/store.ts
@@ -0,0 +1,55 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { Updater } from "../typing";
+import { deepClone } from "./clone";
+
+type SecondParam<T> = T extends (
+  _f: infer _F,
+  _s: infer S,
+  ...args: infer _U
+) => any
+  ? S
+  : never;
+
+type MakeUpdater<T> = {
+  lastUpdateTime: number;
+
+  markUpdate: () => void;
+  update: Updater<T>;
+};
+
+type SetStoreState<T> = (
+  partial: T | Partial<T> | ((state: T) => T | Partial<T>),
+  replace?: boolean | undefined,
+) => void;
+
+export function createPersistStore<T, M>(
+  defaultState: T,
+  methods: (
+    set: SetStoreState<T & MakeUpdater<T>>,
+    get: () => T & MakeUpdater<T>,
+  ) => M,
+  persistOptions: SecondParam<typeof persist<T & M & MakeUpdater<T>>>,
+) {
+  return create<T & M & MakeUpdater<T>>()(
+    persist((set, get) => {
+      return {
+        ...defaultState,
+        ...methods(set as any, get),
+
+        lastUpdateTime: 0,
+        markUpdate() {
+          set({ lastUpdateTime: Date.now() } as Partial<
+            T & M & MakeUpdater<T>
+          >);
+        },
+        update(updater) {
+          const state = deepClone(get());
+          updater(state);
+          get().markUpdate();
+          set(state);
+        },
+      };
+    }, persistOptions),
+  );
+}
--- a/app/utils/sync.ts
+++ b/app/utils/sync.ts
@@ -0,0 +1,165 @@
+import {
+  ChatSession,
+  useAccessStore,
+  useAppConfig,
+  useChatStore,
+} from "../store";
+import { useMaskStore } from "../store/mask";
+import { usePromptStore } from "../store/prompt";
+import { StoreKey } from "../constant";
+import { merge } from "./merge";
+
+type NonFunctionKeys<T> = {
+  [K in keyof T]: T[K] extends (...args: any[]) => any ? never : K;
+}[keyof T];
+type NonFunctionFields<T> = Pick<T, NonFunctionKeys<T>>;
+
+export function getNonFunctionFileds<T extends object>(obj: T) {
+  const ret: any = {};
+
+  Object.entries(obj).map(([k, v]) => {
+    if (typeof v !== "function") {
+      ret[k] = v;
+    }
+  });
+
+  return ret as NonFunctionFields<T>;
+}
+
+export type GetStoreState<T> = T extends { getState: () => infer U }
+  ? NonFunctionFields<U>
+  : never;
+
+const LocalStateSetters = {
+  [StoreKey.Chat]: useChatStore.setState,
+  [StoreKey.Access]: useAccessStore.setState,
+  [StoreKey.Config]: useAppConfig.setState,
+  [StoreKey.Mask]: useMaskStore.setState,
+  [StoreKey.Prompt]: usePromptStore.setState,
+} as const;
+
+const LocalStateGetters = {
+  [StoreKey.Chat]: () => getNonFunctionFileds(useChatStore.getState()),
+  [StoreKey.Access]: () => getNonFunctionFileds(useAccessStore.getState()),
+  [StoreKey.Config]: () => getNonFunctionFileds(useAppConfig.getState()),
+  [StoreKey.Mask]: () => getNonFunctionFileds(useMaskStore.getState()),
+  [StoreKey.Prompt]: () => getNonFunctionFileds(usePromptStore.getState()),
+} as const;
+
+export type AppState = {
+  [k in keyof typeof LocalStateGetters]: ReturnType<
+    (typeof LocalStateGetters)[k]
+  >;
+};
+
+type Merger<T extends keyof AppState, U = AppState[T]> = (
+  localState: U,
+  remoteState: U,
+) => U;
+
+type StateMerger = {
+  [K in keyof AppState]: Merger<K>;
+};
+
+// we merge remote state to local state
+const MergeStates: StateMerger = {
+  [StoreKey.Chat]: (localState, remoteState) => {
+    // merge sessions
+    const localSessions: Record<string, ChatSession> = {};
+    localState.sessions.forEach((s) => (localSessions[s.id] = s));
+
+    remoteState.sessions.forEach((remoteSession) => {
+      // skip empty chats
+      if (remoteSession.messages.length === 0) return;
+
+      const localSession = localSessions[remoteSession.id];
+      if (!localSession) {
+        // if remote session is new, just merge it
+        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));
+        remoteSession.messages.forEach((m) => {
+          if (!localMessageIds.has(m.id)) {
+            localSession.messages.push(m);
+          }
+        });
+
+        // sort local messages with date field in asc order
+        localSession.messages.sort(
+          (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
+        );
+      }
+    });
+
+    // sort local sessions with date field in desc order
+    localState.sessions.sort(
+      (a, b) =>
+        new Date(b.lastUpdate).getTime() - new Date(a.lastUpdate).getTime(),
+    );
+
+    return localState;
+  },
+  [StoreKey.Prompt]: (localState, remoteState) => {
+    localState.prompts = {
+      ...remoteState.prompts,
+      ...localState.prompts,
+    };
+    return localState;
+  },
+  [StoreKey.Mask]: (localState, remoteState) => {
+    localState.masks = {
+      ...remoteState.masks,
+      ...localState.masks,
+    };
+    return localState;
+  },
+  [StoreKey.Config]: mergeWithUpdate<AppState[StoreKey.Config]>,
+  [StoreKey.Access]: mergeWithUpdate<AppState[StoreKey.Access]>,
+};
+
+export function getLocalAppState() {
+  const appState = Object.fromEntries(
+    Object.entries(LocalStateGetters).map(([key, getter]) => {
+      return [key, getter()];
+    }),
+  ) as AppState;
+
+  return appState;
+}
+
+export function setLocalAppState(appState: AppState) {
+  Object.entries(LocalStateSetters).forEach(([key, setter]) => {
+    setter(appState[key as keyof AppState]);
+  });
+}
+
+export function mergeAppState(localState: AppState, remoteState: AppState) {
+  Object.keys(localState).forEach(<T extends keyof AppState>(k: string) => {
+    const key = k as T;
+    const localStoreState = localState[key];
+    const remoteStoreState = remoteState[key];
+    MergeStates[key](localStoreState, remoteStoreState);
+  });
+
+  return localState;
+}
+
+/**
+ * Merge state with `lastUpdateTime`, older state will be override
+ */
+export function mergeWithUpdate<T extends { lastUpdateTime?: number }>(
+  localState: T,
+  remoteState: T,
+) {
+  const localUpdateTime = localState.lastUpdateTime ?? 0;
+  const remoteUpdateTime = localState.lastUpdateTime ?? 1;
+
+  if (localUpdateTime < remoteUpdateTime) {
+    merge(remoteState, localState);
+    return { ...remoteState };
+  } else {
+    merge(localState, remoteState);
+    return { ...localState };
+  }
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><g opacity="1" transform="translate(0 0) rotate(0)"><mask id="bg-mask-0" fill="white"><use transform="translate(0 0) rotate(0)" xlink:href="#path_0"></use></mask><g mask="url(#bg-mask-0)" ><path id="路径 1" style="fill:#333333; opacity:1;" d="M4.00337,11.6633M4.00337,11.6633c-0.8391,0 -1.5514,-0.20763 -2.13691,-0.6229c-0.79984,-0.56727 -1.19975,-1.41519 -1.19975,-2.54377c0,-1.2521 0.52073,-2.20348 1.56218,-2.85415c0.68561,-0.42835 1.38711,-0.64252 2.10448,-0.64252v0.66667l-0.64163,-0.18098l0.64163,0.18098l-0.64163,-0.18098c0.65543,-2.32379 2.09264,-3.48569 4.31163,-3.48569c2.30635,0 3.74023,0.99523 4.30163,2.98569l-0.6416,0.18098l0.0729,-0.66267l-0.0729,0.66267l0.0729,-0.66267c2.3958,0.26354 3.5937,1.5411 3.5937,3.83267c0,2.21778 -1.10887,3.32667 -3.3266,3.32667c-0.0438,0 -0.08717,-0.00427 -0.1301,-0.0128c-0.04293,-0.00853 -0.0846,-0.0212 -0.125,-0.038c-0.04047,-0.01673 -0.0789,-0.03727 -0.1153,-0.0616c-0.0364,-0.02427 -0.07007,-0.0519 -0.101,-0.0829c-0.031,-0.03093 -0.05863,-0.0646 -0.0829,-0.101c-0.02433,-0.0364 -0.04487,-0.07483 -0.0616,-0.1153c-0.0168,-0.0404 -0.02947,-0.08207 -0.038,-0.125c-0.00853,-0.04293 -0.0128,-0.0863 -0.0128,-0.1301c0,-0.04373 0.00427,-0.08707 0.0128,-0.13c0.00853,-0.04293 0.0212,-0.08463 0.038,-0.1251c0.01673,-0.04047 0.03727,-0.0789 0.0616,-0.1153c0.02427,-0.0364 0.0519,-0.07007 0.0829,-0.101c0.03093,-0.03093 0.0646,-0.05857 0.101,-0.0829c0.0364,-0.02433 0.07483,-0.04487 0.1153,-0.0616c0.0404,-0.01673 0.08207,-0.02937 0.125,-0.0379c0.04293,-0.00853 0.0863,-0.0128 0.1301,-0.0128c1.32887,0 1.9933,-0.66446 1.9933,-1.99337c0,-1.4951 -0.80207,-2.33088 -2.4062,-2.50733c-0.27,-0.02971 -0.495,-0.22026 0,0c-0.27,-0.02971 -0.495,-0.22026 -0.5688,-0.4817c-0.37873,-1.34287 -1.38484,-2.01431 -3.01833,-2.01431c-1.54613,0 -2.55559,0.8381 -3.02836,2.51431c-0.08103,0.28728 -0.34314,0.48569 0,0c-0.08103,0.28728 -0.34314,0.48569 -0.64164,0.48569c-0.46252,0 -0.92852,0.14666 -1.39801,0.43998c-0.62355,0.38957 -0.93532,0.96402 -0.93532,1.72336c0,0.66927 0.21258,1.15467 0.63775,1.45621c0.35449,0.25144 0.80969,0.37716 1.36558,0.37716c0.04378,0 0.08713,0.00427 0.13006,0.0128c0.04293,0.00853 0.08462,0.02117 0.12507,0.0379c0.04044,0.01673 0.07886,0.03727 0.11525,0.0616c0.0364,0.02433 0.07008,0.05197 0.10103,0.0829c0.03095,0.03093 0.05859,0.0646 0.08291,0.101c0.02432,0.0364 0.04485,0.07483 0.0616,0.1153c0.01675,0.04047 0.0294,0.08217 0.03794,0.1251c0.00854,0.04293 0.01281,0.08627 0.01281,0.13c0,0.0438 -0.00427,0.08717 -0.01281,0.1301c-0.00854,0.04293 -0.02119,0.0846 -0.03794,0.125c-0.01675,0.04047 -0.03728,0.0789 -0.0616,0.1153c-0.02432,0.0364 -0.05196,0.07007 -0.08291,0.101c-0.03095,0.031 -0.06463,0.05863 -0.10103,0.0829c-0.03639,0.02433 -0.07481,0.04487 -0.11525,0.0616c-0.04045,0.0168 -0.08214,0.02947 -0.12507,0.038c-0.04293,0.00853 -0.08628,0.0128 -0.13006,0.0128z"></path><path id="路径 2" style="fill:#333333; opacity:1;" d="M6.42578,10.4903l2,1.66l-0.42578,0.513l-0.52012,-0.4171l2.67002,-3.32998c0.0274,-0.03415 0.05783,-0.06531 0.0913,-0.09346c0.03353,-0.02815 0.0695,-0.05277 0.1079,-0.07384c0.03833,-0.02107 0.07837,-0.0382 0.1201,-0.05138c0.04173,-0.01319 0.08437,-0.02217 0.1279,-0.02696c0.04353,-0.00479 0.0871,-0.00528 0.1307,-0.00149c0.0436,0.00379 0.0864,0.01181 0.1284,0.02404c0.04207,0.01223 0.0825,0.02844 0.1213,0.04863c0.03887,0.0202 0.07537,0.04399 0.1095,0.07137c0.0342,0.02738 0.06537,0.05783 0.0935,0.09135c0.02813,0.03352 0.05273,0.06946 0.0738,0.10783c0.02107,0.03837 0.0382,0.07843 0.0514,0.12017c0.0132,0.04174 0.0222,0.08437 0.027,0.12788c0.00473,0.04351 0.00523,0.08707 0.0015,0.13068c-0.0038,0.04361 -0.01183,0.08643 -0.0241,0.12846c-0.0122,0.04203 -0.0284,0.08247 -0.0486,0.1213c-0.0202,0.03884 -0.044,0.07534 -0.0714,0.10949l-2.66998,3.33001c-0.23308,0.2907 -0.65919,0.3339 -0.9459,0.0959l-2,-1.66c-0.03369,-0.02793 -0.06432,-0.0589 -0.0919,-0.0929c-0.02758,-0.034 -0.05158,-0.07037 -0.072,-0.1091c-0.02042,-0.03867 -0.03687,-0.079 -0.04934,-0.121c-0.01248,-0.04193 -0.02074,-0.0847 -0.02479,-0.1283c-0.00405,-0.0436 -0.0038,-0.08717 0.00073,-0.1307c0.00453,-0.04353 0.01326,-0.0862 0.0262,-0.128c0.01294,-0.0418 0.02983,-0.08197 0.05068,-0.1205c0.02085,-0.03847 0.04526,-0.07453 0.07321,-0.1082c0.02796,-0.03373 0.05893,-0.06437 0.09292,-0.0919c0.03399,-0.0276 0.07035,-0.0516 0.10907,-0.072c0.03872,-0.02047 0.07906,-0.03693 0.12102,-0.0494c0.04196,-0.01247 0.08473,-0.02073 0.12831,-0.0248c0.04359,-0.004 0.08715,-0.00373 0.13069,0.0008c0.04354,0.00453 0.08622,0.01327 0.12804,0.0262c0.04181,0.01293 0.08197,0.02983 0.12046,0.0507c0.03849,0.0208 0.07457,0.0452 0.10826,0.0732z"></path></g></g><defs><rect id="path_0" x="0" y="0" width="16" height="16" /></defs></svg>