Merge pull request #2185 from Yidadaa/bugfix-0628

feat: many ux improvments
feat: close #2136 click avatar to edit message
2025-08-31 03:09:04 +08:00 · 2023-06-29 01:32:57 +08:00 · 2023-06-29 01:31:27 +08:00 · 2023-06-29 01:09:51 +08:00 · 2023-06-29 00:27:18 +08:00 · 2023-06-29 00:09:56 +08:00
62 changed files with 1676 additions and 646 deletions
--- a/.env.template
+++ b/.env.template
@@ -27,3 +27,8 @@ HIDE_USER_API_KEY=
 # Default: Empty
 # If you do not want users to use GPT-4, set this value to 1.
 DISABLE_GPT4=
+
+# (optional)
+# Default: Empty
+# If you do not want users to query balance, set this value to 1.
+HIDE_BALANCE_QUERY=
--- a/README.md
+++ b/README.md
@@ -19,15 +19,10 @@ One-Click to get well-designed cross-platform ChatGPT web UI.
 [网页版](https://chatgpt.nextweb.fun/) / [客户端](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [反馈](https://github.com/Yidadaa/ChatGPT-Next-Web/issues) / [QQ 群](https://github.com/Yidadaa/ChatGPT-Next-Web/discussions/1724) / [打赏开发者](https://user-images.githubusercontent.com/16968934/227772541-5bcd52d8-61b7-488c-a203-0330d8006e2b.jpg)

 [web-url]: https://chatgpt.nextweb.fun
-   
 [download-url]: https://github.com/Yidadaa/ChatGPT-Next-Web/releases
-
 [Web-image]: https://img.shields.io/badge/Web-PWA-orange?logo=microsoftedge
-
 [Windows-image]: https://img.shields.io/badge/-Windows-blue?logo=windows
-
 [MacOS-image]: https://img.shields.io/badge/-MacOS-black?logo=apple
-
 [Linux-image]: https://img.shields.io/badge/-Linux-333?logo=ubuntu

 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FYidadaa%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=chatgpt-next-web&repository-name=ChatGPT-Next-Web)
@@ -190,6 +185,16 @@ If you do not want users to input their own API key, set this value to 1.

 If you do not want users to use GPT-4, set this value to 1.

+### `HIDE_BALANCE_QUERY` (optional)
+
+> Default: Empty
+
+If you do not want users to query balance, set this value to 1.
+
+## Requirements
+
+NodeJS >= 18, Docker >= 20
+
 ## Development

 > [简体中文 > 如何进行二次开发](./README_CN.md#开发)
@@ -240,6 +245,12 @@ docker run -d -p 3000:3000 \
   yidadaa/chatgpt-next-web
 ```

+If your proxy needs password, use:
+
+```shell
+-e PROXY_URL="http://127.0.0.1:7890 user pass"
+```
+
 ### Shell

 ```shell
--- a/README_CN.md
+++ b/README_CN.md
@@ -98,6 +98,10 @@ OpenAI 接口代理 URL，如果你手动配置了 openai 接口代理，请填

 如果你不想让用户使用 GPT-4，将此环境变量设置为 1 即可。

+### `HIDE_BALANCE_QUERY` （可选）
+
+如果你不想让用户查询余额，将此环境变量设置为 1 即可。
+
 ## 开发

 点击下方按钮，开始二次开发：
@@ -147,6 +151,12 @@ docker run -d -p 3000:3000 \
   yidadaa/chatgpt-next-web
 ```

+如果你的本地代理需要账号密码，可以使用：
+
+```shell
+-e PROXY_URL="http://127.0.0.1:7890 user password"
+```
+
 如果你需要指定其他环境变量，请自行在上述命令中增加 `-e 环境变量=环境变量值` 来指定。

 ### 本地部署
--- a/README_ES.md
+++ b/README_ES.md
@@ -96,6 +96,10 @@ Si no desea que los usuarios rellenen la clave de API ellos mismos, establezca e

 Si no desea que los usuarios utilicen GPT-4, establezca esta variable de entorno en 1.

+### `HIDE_BALANCE_QUERY` (Opcional)
+
+Si no desea que los usuarios consulte el saldo, establezca esta variable de entorno en 1.
+
 ## explotación

 > No se recomienda encarecidamente desarrollar o implementar localmente, debido a algunas razones técnicas, es difícil configurar el agente API de OpenAI localmente, a menos que pueda asegurarse de que puede conectarse directamente al servidor OpenAI.
--- a/app/api/config/route.ts
+++ b/app/api/config/route.ts
@@ -10,6 +10,7 @@ const DANGER_CONFIG = {
  needCode: serverConfig.needCode,
  hideUserApiKey: serverConfig.hideUserApiKey,
  enableGPT4: serverConfig.enableGPT4,
+  hideBalanceQuery: serverConfig.hideBalanceQuery,
 };

 declare global {
--- a/app/client/platforms/openai.ts
+++ b/app/client/platforms/openai.ts
@@ -1,4 +1,8 @@
-import { OpenaiPath, REQUEST_TIMEOUT_MS } from "@/app/constant";
+import {
+  DEFAULT_API_HOST,
+  OpenaiPath,
+  REQUEST_TIMEOUT_MS,
+} from "@/app/constant";
 import { useAccessStore, useAppConfig, useChatStore } from "@/app/store";

 import { ChatOptions, getHeaders, LLMApi, LLMUsage } from "../api";
@@ -12,6 +16,9 @@ import { prettyObject } from "@/app/utils/format";
 export class ChatGPTApi implements LLMApi {
  path(path: string): string {
    let openaiUrl = useAccessStore.getState().openaiUrl;
+    if (openaiUrl.length === 0) {
+      openaiUrl = DEFAULT_API_HOST;
+    }
    if (openaiUrl.endsWith("/")) {
      openaiUrl = openaiUrl.slice(0, openaiUrl.length - 1);
    }
--- a/app/command.ts
+++ b/app/command.ts
@@ -1,4 +1,5 @@
 import { useSearchParams } from "react-router-dom";
+import Locale from "./locales";

 type Command = (param: string) => void;
 interface Commands {
@@ -26,3 +27,45 @@ export function useCommand(commands: Commands = {}) {
    setSearchParams(searchParams);
  }
 }
+
+interface ChatCommands {
+  new?: Command;
+  newm?: Command;
+  next?: Command;
+  prev?: Command;
+  clear?: Command;
+  del?: Command;
+}
+
+export const ChatCommandPrefix = ":";
+
+export function useChatCommand(commands: ChatCommands = {}) {
+  function extract(userInput: string) {
+    return (
+      userInput.startsWith(ChatCommandPrefix) ? userInput.slice(1) : userInput
+    ) as keyof ChatCommands;
+  }
+
+  function search(userInput: string) {
+    const input = extract(userInput);
+    const desc = Locale.Chat.Commands;
+    return Object.keys(commands)
+      .filter((c) => c.startsWith(input))
+      .map((c) => ({
+        title: desc[c as keyof ChatCommands],
+        content: ChatCommandPrefix + c,
+      }));
+  }
+
+  function match(userInput: string) {
+    const command = extract(userInput);
+    const matched = typeof commands[command] === "function";
+
+    return {
+      matched,
+      invoke: () => matched && commands[command]!(userInput),
+    };
+  }
+
+  return { match, search };
+}
--- a/app/components/button.module.scss
+++ b/app/components/button.module.scss
@@ -27,6 +27,26 @@
      fill: white !important;
    }
  }
+
+  &.danger {
+    color: rgba($color: red, $alpha: 0.8);
+    border-color: rgba($color: red, $alpha: 0.5);
+    background-color: rgba($color: red, $alpha: 0.05);
+
+    &:hover {
+      border-color: red;
+      background-color: rgba($color: red, $alpha: 0.1);
+    }
+
+    path {
+      fill: red !important;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    border-color: var(--primary);
+  }
 }

 .shadow {
@@ -37,10 +57,6 @@
  border: var(--border-in-light);
 }

-.icon-button:hover {
-  border-color: var(--primary);
-}
-
 .icon-button-icon {
  width: 16px;
  height: 16px;
@@ -56,9 +72,12 @@
 }

 .icon-button-text {
-  margin-left: 5px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+
+  &:not(:first-child) {
+    margin-left: 5px;
+  }
 }
--- a/app/components/button.tsx
+++ b/app/components/button.tsx
@@ -2,16 +2,20 @@ import * as React from "react";

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

+export type ButtonType = "primary" | "danger" | null;
+
 export function IconButton(props: {
  onClick?: () => void;
  icon?: JSX.Element;
-  type?: "primary" | "danger";
+  type?: ButtonType;
  text?: string;
  bordered?: boolean;
  shadow?: boolean;
  className?: string;
  title?: string;
  disabled?: boolean;
+  tabIndex?: number;
+  autoFocus?: boolean;
 }) {
  return (
    <button
@@ -25,6 +29,8 @@ export function IconButton(props: {
      title={props.title}
      disabled={props.disabled}
      role="button"
+      tabIndex={props.tabIndex}
+      autoFocus={props.autoFocus}
    >
      {props.icon && (
        <div
--- a/app/components/chat-list.tsx
+++ b/app/components/chat-list.tsx
@@ -17,6 +17,7 @@ import { Path } from "../constant";
 import { MaskAvatar } from "./mask";
 import { Mask } from "../store/mask";
 import { useRef, useEffect } from "react";
+import { showConfirm } from "./ui-lib";

 export function ChatItem(props: {
  onClick?: () => void;
@@ -139,8 +140,11 @@ export function ChatList(props: { narrow?: boolean }) {
                  navigate(Path.Chat);
                  selectSession(i);
                }}
-                onDelete={() => {
-                  if (!props.narrow || confirm(Locale.Home.DeleteChat)) {
+                onDelete={async () => {
+                  if (
+                    !props.narrow ||
+                    (await showConfirm(Locale.Home.DeleteChat))
+                  ) {
                    chatStore.deleteSession(i);
                  }
                }}
--- a/app/components/chat.module.scss
+++ b/app/components/chat.module.scss
@@ -15,7 +15,6 @@
    animation: slide-in ease 0.3s;
    box-shadow: var(--card-shadow);
    transition: all ease 0.3s;
-    margin-bottom: 10px;
    align-items: center;
    height: 16px;
    width: var(--icon-width);
@@ -202,3 +201,269 @@
    }
  }
 }
+
+.chat {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+}
+
+.chat-body {
+  flex: 1;
+  overflow: auto;
+  padding: 20px;
+  padding-bottom: 40px;
+  position: relative;
+  overscroll-behavior: none;
+}
+
+.chat-body-main-title {
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .chat-body-title {
+    text-align: center;
+  }
+}
+
+.chat-message {
+  display: flex;
+  flex-direction: row;
+
+  &:last-child {
+    animation: slide-in ease 0.3s;
+  }
+}
+
+.chat-message-user {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.chat-message-container {
+  max-width: var(--message-max-width);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  &:hover {
+    .chat-message-edit {
+      opacity: 0.9;
+    }
+  }
+}
+
+.chat-message-user > .chat-message-container {
+  align-items: flex-end;
+}
+
+.chat-message-avatar {
+  margin-top: 20px;
+  position: relative;
+
+  .chat-message-edit {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: all ease 0.3s;
+
+    button {
+      padding: 7px;
+    }
+  }
+}
+
+.chat-message-status {
+  font-size: 12px;
+  color: #aaa;
+  line-height: 1.5;
+  margin-top: 5px;
+}
+
+.chat-message-item {
+  box-sizing: border-box;
+  max-width: 100%;
+  margin-top: 10px;
+  border-radius: 10px;
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 10px;
+  font-size: 14px;
+  user-select: text;
+  word-break: break-word;
+  border: var(--border-in-light);
+  position: relative;
+  transition: all ease 0.3s;
+
+  &:hover {
+    .chat-message-actions {
+      opacity: 1;
+      transform: translateY(0px);
+      max-width: 100%;
+      height: 40px;
+
+      .chat-message-action-date {
+        opacity: 0.3;
+      }
+    }
+  }
+
+  .chat-message-actions {
+    display: flex;
+    box-sizing: border-box;
+    font-size: 12px;
+    align-items: flex-end;
+    justify-content: space-between;
+    transition: all ease 0.3s;
+    transform: translateY(10px);
+    opacity: 0;
+    height: 0;
+    max-width: 0;
+
+    .chat-input-actions {
+      display: flex;
+      flex-wrap: nowrap;
+    }
+  }
+
+  .chat-message-action-date {
+    white-space: nowrap;
+    transition: all ease 0.6s;
+    color: var(--black);
+    opacity: 0;
+    text-align: right;
+    margin-left: 20px;
+  }
+}
+
+.chat-message-user > .chat-message-container > .chat-message-item {
+  background-color: var(--second);
+
+  &:hover {
+    min-width: 0;
+  }
+}
+
+.chat-input-panel {
+  position: relative;
+  width: 100%;
+  padding: 20px;
+  padding-top: 10px;
+  box-sizing: border-box;
+  flex-direction: column;
+  border-top: var(--border-in-light);
+  box-shadow: var(--card-shadow);
+
+  .chat-input-actions {
+    .chat-input-action {
+      margin-bottom: 10px;
+    }
+  }
+}
+
+@mixin single-line {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.prompt-hints {
+  min-height: 20px;
+  width: 100%;
+  max-height: 50vh;
+  overflow: auto;
+  display: flex;
+  flex-direction: column-reverse;
+
+  background-color: var(--white);
+  border: var(--border-in-light);
+  border-radius: 10px;
+  margin-bottom: 10px;
+  box-shadow: var(--shadow);
+
+  .prompt-hint {
+    color: var(--black);
+    padding: 6px 10px;
+    animation: slide-in ease 0.3s;
+    cursor: pointer;
+    transition: all ease 0.3s;
+    border: transparent 1px solid;
+    margin: 4px;
+    border-radius: 8px;
+
+    &:not(:last-child) {
+      margin-top: 0;
+    }
+
+    .hint-title {
+      font-size: 12px;
+      font-weight: bolder;
+
+      @include single-line();
+    }
+    .hint-content {
+      font-size: 12px;
+
+      @include single-line();
+    }
+
+    &-selected,
+    &:hover {
+      border-color: var(--primary);
+    }
+  }
+}
+
+.chat-input-panel-inner {
+  display: flex;
+  flex: 1;
+}
+
+.chat-input {
+  height: 100%;
+  width: 100%;
+  border-radius: 10px;
+  border: var(--border-in-light);
+  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
+  background-color: var(--white);
+  color: var(--black);
+  font-family: inherit;
+  padding: 10px 90px 10px 14px;
+  resize: none;
+  outline: none;
+  box-sizing: border-box;
+  min-height: 68px;
+}
+
+.chat-input:focus {
+  border: 1px solid var(--primary);
+}
+
+.chat-input-send {
+  background-color: var(--primary);
+  color: white;
+
+  position: absolute;
+  right: 30px;
+  bottom: 32px;
+}
+
+@media only screen and (max-width: 600px) {
+  .chat-input {
+    font-size: 16px;
+  }
+
+  .chat-input-send {
+    bottom: 30px;
+  }
+}
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -3,8 +3,8 @@ import React, {
  useState,
  useRef,
  useEffect,
-  useLayoutEffect,
  useMemo,
+  useCallback,
 } from "react";

 import SendWhiteIcon from "../icons/send-white.svg";
@@ -21,12 +21,16 @@ import MinIcon from "../icons/min.svg";
 import ResetIcon from "../icons/reload.svg";
 import BreakIcon from "../icons/break.svg";
 import SettingsIcon from "../icons/chat-settings.svg";
+import DeleteIcon from "../icons/clear.svg";
+import PinIcon from "../icons/pin.svg";
+import EditIcon from "../icons/rename.svg";

 import LightIcon from "../icons/light.svg";
 import DarkIcon from "../icons/dark.svg";
 import AutoIcon from "../icons/auto.svg";
 import BottomIcon from "../icons/bottom.svg";
 import StopIcon from "../icons/pause.svg";
+import RobotIcon from "../icons/robot.svg";

 import {
  ChatMessage,
@@ -38,6 +42,7 @@ import {
  Theme,
  useAppConfig,
  DEFAULT_TOPIC,
+  ALL_MODELS,
 } from "../store";

 import {
@@ -55,16 +60,15 @@ import { Prompt, usePromptStore } from "../store/prompt";
 import Locale from "../locales";

 import { IconButton } from "./button";
-import styles from "./home.module.scss";
-import chatStyle from "./chat.module.scss";
+import styles from "./chat.module.scss";

-import { ListItem, Modal } from "./ui-lib";
+import { ListItem, Modal, showConfirm, showPrompt, showToast } from "./ui-lib";
 import { useLocation, useNavigate } from "react-router-dom";
 import { LAST_INPUT_KEY, Path, REQUEST_TIMEOUT_MS } from "../constant";
 import { Avatar } from "./emoji";
 import { MaskAvatar, MaskConfig } from "./mask";
 import { useMaskStore } from "../store/mask";
-import { useCommand } from "../command";
+import { ChatCommandPrefix, useChatCommand, useCommand } from "../command";
 import { prettyObject } from "../utils/format";
 import { ExportMessageModal } from "./exporter";
 import { getClientConfig } from "../config/client";
@@ -90,8 +94,8 @@ export function SessionConfigModel(props: { onClose: () => void }) {
            icon={<ResetIcon />}
            bordered
            text={Locale.Chat.Config.Reset}
-            onClick={() => {
-              if (confirm(Locale.Memory.ResetConfirm)) {
+            onClick={async () => {
+              if (await showConfirm(Locale.Memory.ResetConfirm)) {
                chatStore.updateCurrentSession(
                  (session) => (session.memoryPrompt = ""),
                );
@@ -146,15 +150,15 @@ function PromptToast(props: {
  const context = session.mask.context;

  return (
-    <div className={chatStyle["prompt-toast"]} key="prompt-toast">
+    <div className={styles["prompt-toast"]} key="prompt-toast">
      {props.showToast && (
        <div
-          className={chatStyle["prompt-toast-inner"] + " clickable"}
+          className={styles["prompt-toast-inner"] + " clickable"}
          role="button"
          onClick={() => props.setShowModal(true)}
        >
          <BrainIcon />
-          <span className={chatStyle["prompt-toast-content"]}>
+          <span className={styles["prompt-toast-content"]}>
            {Locale.Context.Toast(context.length)}
          </span>
        </div>
@@ -206,8 +210,7 @@ export function PromptHints(props: {

  useEffect(() => {
    const onKeyDown = (e: KeyboardEvent) => {
-      if (noPrompts) return;
-      if (e.metaKey || e.altKey || e.ctrlKey) {
+      if (noPrompts || e.metaKey || e.altKey || e.ctrlKey) {
        return;
      }
      // arrow up / down to select prompt
@@ -269,17 +272,15 @@ function ClearContextDivider() {

  return (
    <div
-      className={chatStyle["clear-context"]}
+      className={styles["clear-context"]}
      onClick={() =>
        chatStore.updateCurrentSession(
          (session) => (session.clearContextIndex = undefined),
        )
      }
    >
-      <div className={chatStyle["clear-context-tips"]}>
-        {Locale.Context.Clear}
-      </div>
-      <div className={chatStyle["clear-context-revert-btn"]}>
+      <div className={styles["clear-context-tips"]}>{Locale.Context.Clear}</div>
+      <div className={styles["clear-context-revert-btn"]}>
        {Locale.Context.Revert}
      </div>
    </div>
@@ -294,8 +295,8 @@ function ChatAction(props: {
  const iconRef = useRef<HTMLDivElement>(null);
  const textRef = useRef<HTMLDivElement>(null);
  const [width, setWidth] = useState({
-    full: 20,
-    icon: 20,
+    full: 16,
+    icon: 16,
  });

  function updateWidth() {
@@ -309,17 +310,15 @@ function ChatAction(props: {
    });
  }

-  useEffect(() => {
-    updateWidth();
-  }, []);
-
  return (
    <div
-      className={`${chatStyle["chat-input-action"]} clickable`}
+      className={`${styles["chat-input-action"]} clickable`}
      onClick={() => {
        props.onClick();
        setTimeout(updateWidth, 1);
      }}
+      onMouseEnter={updateWidth}
+      onTouchStart={updateWidth}
      style={
        {
          "--icon-width": `${width.icon}px`,
@@ -327,10 +326,10 @@ function ChatAction(props: {
        } as React.CSSProperties
      }
    >
-      <div ref={iconRef} className={chatStyle["icon"]}>
+      <div ref={iconRef} className={styles["icon"]}>
        {props.icon}
      </div>
-      <div className={chatStyle["text"]} ref={textRef}>
+      <div className={styles["text"]} ref={textRef}>
        {props.text}
      </div>
    </div>
@@ -341,15 +340,15 @@ function useScrollToBottom() {
  // for auto-scroll
  const scrollRef = useRef<HTMLDivElement>(null);
  const [autoScroll, setAutoScroll] = useState(true);
-  const scrollToBottom = () => {
+  const scrollToBottom = useCallback(() => {
    const dom = scrollRef.current;
    if (dom) {
-      setTimeout(() => (dom.scrollTop = dom.scrollHeight), 1);
+      requestAnimationFrame(() => dom.scrollTo(0, dom.scrollHeight));
    }
-  };
+  }, []);

  // auto scroll
-  useLayoutEffect(() => {
+  useEffect(() => {
    autoScroll && scrollToBottom();
  });

@@ -385,8 +384,21 @@ export function ChatActions(props: {
  const couldStop = ChatControllerPool.hasPending();
  const stopAll = () => ChatControllerPool.stopAll();

+  // switch model
+  const currentModel = chatStore.currentSession().mask.modelConfig.model;
+  function nextModel() {
+    const models = ALL_MODELS.filter((m) => m.available).map((m) => m.name);
+    const modelIndex = models.indexOf(currentModel);
+    const nextIndex = (modelIndex + 1) % models.length;
+    const nextModel = models[nextIndex];
+    chatStore.updateCurrentSession((session) => {
+      session.mask.modelConfig.model = nextModel;
+      session.mask.syncGlobalConfig = false;
+    });
+  }
+
  return (
-    <div className={chatStyle["chat-input-actions"]}>
+    <div className={styles["chat-input-actions"]}>
      {couldStop && (
        <ChatAction
          onClick={stopAll}
@@ -453,6 +465,12 @@ export function ChatActions(props: {
          });
        }}
      />
+
+      <ChatAction
+        onClick={nextModel}
+        text={currentModel}
+        icon={<RobotIcon />}
+      />
    </div>
  );
 }
@@ -480,7 +498,7 @@ export function Chat() {
  const navigate = useNavigate();

  const onChatBodyScroll = (e: HTMLElement) => {
-    const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 100;
+    const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 10;
    setHitBottom(isTouchBottom);
  };

@@ -489,18 +507,13 @@ export function Chat() {
  const [promptHints, setPromptHints] = useState<Prompt[]>([]);
  const onSearch = useDebouncedCallback(
    (text: string) => {
-      setPromptHints(promptStore.search(text));
+      const matchedPrompts = promptStore.search(text);
+      setPromptHints(matchedPrompts);
    },
    100,
    { leading: true, trailing: true },
  );

-  const onPromptSelect = (prompt: Prompt) => {
-    setPromptHints([]);
-    inputRef.current?.focus();
-    setTimeout(() => setUserInput(prompt.content), 60);
-  };
-
  // auto grow input
  const [inputRows, setInputRows] = useState(2);
  const measure = useDebouncedCallback(
@@ -522,6 +535,19 @@ export function Chat() {
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(measure, [userInput]);

+  // chat commands shortcuts
+  const chatCommands = useChatCommand({
+    new: () => chatStore.newSession(),
+    newm: () => navigate(Path.NewChat),
+    prev: () => chatStore.nextSession(-1),
+    next: () => chatStore.nextSession(1),
+    clear: () =>
+      chatStore.updateCurrentSession(
+        (session) => (session.clearContextIndex = session.messages.length),
+      ),
+    del: () => chatStore.deleteSession(chatStore.currentSessionIndex),
+  });
+
  // only search prompts when user input is short
  const SEARCH_TEXT_LIMIT = 30;
  const onInput = (text: string) => {
@@ -531,6 +557,8 @@ export function Chat() {
    // clear search results
    if (n === 0) {
      setPromptHints([]);
+    } else if (text.startsWith(ChatCommandPrefix)) {
+      setPromptHints(chatCommands.search(text));
    } else if (!config.disablePromptHint && n < SEARCH_TEXT_LIMIT) {
      // check if need to trigger auto completion
      if (text.startsWith("/")) {
@@ -542,6 +570,13 @@ export function Chat() {

  const doSubmit = (userInput: string) => {
    if (userInput.trim() === "") return;
+    const matchCommand = chatCommands.match(userInput);
+    if (matchCommand.matched) {
+      setUserInput("");
+      setPromptHints([]);
+      matchCommand.invoke();
+      return;
+    }
    setIsLoading(true);
    chatStore.onUserInput(userInput).then(() => setIsLoading(false));
    localStorage.setItem(LAST_INPUT_KEY, userInput);
@@ -551,6 +586,23 @@ export function Chat() {
    setAutoScroll(true);
  };

+  const onPromptSelect = (prompt: Prompt) => {
+    setTimeout(() => {
+      setPromptHints([]);
+
+      const matchedChatCommand = chatCommands.match(prompt.content);
+      if (matchedChatCommand.matched) {
+        // if user is selecting a chat command, just trigger it
+        matchedChatCommand.invoke();
+        setUserInput("");
+      } else {
+        // or fill the prompt
+        setUserInput(prompt.content);
+      }
+      inputRef.current?.focus();
+    }, 30);
+  };
+
  // stop response
  const onUserStop = (messageId: number) => {
    ChatControllerPool.stop(sessionIndex, messageId);
@@ -605,6 +657,10 @@ export function Chat() {
  const onRightClick = (e: any, message: ChatMessage) => {
    // copy to clipboard
    if (selectOrCopy(e.currentTarget, message.content)) {
+      if (userInput.length === 0) {
+        setUserInput(message.content);
+      }
+
      e.preventDefault();
    }
  };
@@ -649,6 +705,24 @@ export function Chat() {
    inputRef.current?.focus();
  };

+  const onPinMessage = (botMessage: ChatMessage) => {
+    if (!botMessage.id) return;
+    const userMessageIndex = findLastUserIndex(botMessage.id);
+    if (userMessageIndex === null) return;
+
+    const userMessage = session.messages[userMessageIndex];
+    chatStore.updateCurrentSession((session) =>
+      session.mask.context.push(userMessage, botMessage),
+    );
+
+    showToast(Locale.Chat.Actions.PinToastContent, {
+      text: Locale.Chat.Actions.PinToastAction,
+      onClick: () => {
+        setShowPromptModal(true);
+      },
+    });
+  };
+
  const context: RenderMessage[] = session.mask.hideContext
    ? []
    : session.mask.context.slice();
@@ -705,10 +779,13 @@ export function Chat() {
  const [showPromptModal, setShowPromptModal] = useState(false);

  const renameSession = () => {
-    const newTopic = prompt(Locale.Chat.Rename, session.topic);
-    if (newTopic && newTopic !== session.topic) {
-      chatStore.updateCurrentSession((session) => (session.topic = newTopic!));
-    }
+    showPrompt(Locale.Chat.Rename, session.topic).then((newTopic) => {
+      if (newTopic && newTopic !== session.topic) {
+        chatStore.updateCurrentSession(
+          (session) => (session.topic = newTopic!),
+        );
+      }
+    });
  };

  const clientConfig = useMemo(() => getClientConfig(), []);
@@ -729,9 +806,22 @@ export function Chat() {
  return (
    <div className={styles.chat} key={session.id}>
      <div className="window-header" data-tauri-drag-region>
-        <div className="window-header-title">
+        {isMobileScreen && (
+          <div className="window-actions">
+            <div className={"window-action-button"}>
+              <IconButton
+                icon={<ReturnIcon />}
+                bordered
+                title={Locale.Chat.Actions.ChatList}
+                onClick={() => navigate(Path.Home)}
+              />
+            </div>
+          </div>
+        )}
+
+        <div className={`window-header-title ${styles["chat-body-title"]}`}>
          <div
-            className={`window-header-main-title " ${styles["chat-body-title"]}`}
+            className={`window-header-main-title ${styles["chat-body-main-title"]}`}
            onClickCapture={renameSession}
          >
            {!session.topic ? DEFAULT_TOPIC : session.topic}
@@ -741,21 +831,15 @@ export function Chat() {
          </div>
        </div>
        <div className="window-actions">
-          <div className={"window-action-button" + " " + styles.mobile}>
-            <IconButton
-              icon={<ReturnIcon />}
-              bordered
-              title={Locale.Chat.Actions.ChatList}
-              onClick={() => navigate(Path.Home)}
-            />
-          </div>
-          <div className="window-action-button">
-            <IconButton
-              icon={<RenameIcon />}
-              bordered
-              onClick={renameSession}
-            />
-          </div>
+          {!isMobileScreen && (
+            <div className="window-action-button">
+              <IconButton
+                icon={<RenameIcon />}
+                bordered
+                onClick={renameSession}
+              />
+            </div>
+          )}
          <div className="window-action-button">
            <IconButton
              icon={<ExportIcon />}
@@ -819,6 +903,25 @@ export function Chat() {
              >
                <div className={styles["chat-message-container"]}>
                  <div className={styles["chat-message-avatar"]}>
+                    <div className={styles["chat-message-edit"]}>
+                      <IconButton
+                        icon={<EditIcon />}
+                        onClick={async () => {
+                          const newMessage = await showPrompt(
+                            Locale.Chat.Actions.Edit,
+                            message.content,
+                          );
+                          chatStore.updateCurrentSession((session) => {
+                            const m = session.messages.find(
+                              (m) => m.id === message.id,
+                            );
+                            if (m) {
+                              m.content = newMessage;
+                            }
+                          });
+                        }}
+                      ></IconButton>
+                    </div>
                    {message.role === "user" ? (
                      <Avatar avatar={config.avatar} />
                    ) : (
@@ -831,40 +934,6 @@ export function Chat() {
                    </div>
                  )}
                  <div className={styles["chat-message-item"]}>
-                    {showActions && (
-                      <div className={styles["chat-message-top-actions"]}>
-                        {message.streaming ? (
-                          <div
-                            className={styles["chat-message-top-action"]}
-                            onClick={() => onUserStop(message.id ?? i)}
-                          >
-                            {Locale.Chat.Actions.Stop}
-                          </div>
-                        ) : (
-                          <>
-                            <div
-                              className={styles["chat-message-top-action"]}
-                              onClick={() => onDelete(message.id ?? i)}
-                            >
-                              {Locale.Chat.Actions.Delete}
-                            </div>
-                            <div
-                              className={styles["chat-message-top-action"]}
-                              onClick={() => onResend(message.id ?? i)}
-                            >
-                              {Locale.Chat.Actions.Retry}
-                            </div>
-                          </>
-                        )}
-
-                        <div
-                          className={styles["chat-message-top-action"]}
-                          onClick={() => copyToClipboard(message.content)}
-                        >
-                          {Locale.Chat.Actions.Copy}
-                        </div>
-                      </div>
-                    )}
                    <Markdown
                      content={message.content}
                      loading={
@@ -880,14 +949,56 @@ export function Chat() {
                      parentRef={scrollRef}
                      defaultShow={i >= messages.length - 10}
                    />
-                  </div>
-                  {!isUser && !message.preview && (
-                    <div className={styles["chat-message-actions"]}>
-                      <div className={styles["chat-message-action-date"]}>
-                        {message.date.toLocaleString()}
+
+                    {showActions && (
+                      <div className={styles["chat-message-actions"]}>
+                        <div
+                          className={styles["chat-input-actions"]}
+                          style={{
+                            marginTop: 10,
+                            marginBottom: 0,
+                          }}
+                        >
+                          {message.streaming ? (
+                            <ChatAction
+                              text={Locale.Chat.Actions.Stop}
+                              icon={<StopIcon />}
+                              onClick={() => onUserStop(message.id ?? i)}
+                            />
+                          ) : (
+                            <>
+                              <ChatAction
+                                text={Locale.Chat.Actions.Retry}
+                                icon={<ResetIcon />}
+                                onClick={() => onResend(message.id ?? i)}
+                              />
+
+                              <ChatAction
+                                text={Locale.Chat.Actions.Delete}
+                                icon={<DeleteIcon />}
+                                onClick={() => onDelete(message.id ?? i)}
+                              />
+
+                              <ChatAction
+                                text={Locale.Chat.Actions.Pin}
+                                icon={<PinIcon />}
+                                onClick={() => onPinMessage(message)}
+                              />
+                              <ChatAction
+                                text={Locale.Chat.Actions.Copy}
+                                icon={<CopyIcon />}
+                                onClick={() => copyToClipboard(message.content)}
+                              />
+                            </>
+                          )}
+                        </div>
+
+                        <div className={styles["chat-message-action-date"]}>
+                          {message.date.toLocaleString()}
+                        </div>
                      </div>
-                    </div>
-                  )}
+                    )}
+                  </div>
                </div>
              </div>
              {shouldShowClearContextDivider && <ClearContextDivider />}
@@ -927,6 +1038,9 @@ export function Chat() {
            onBlur={() => setAutoScroll(false)}
            rows={inputRows}
            autoFocus={autoFocus}
+            style={{
+              fontSize: config.fontSize,
+            }}
          />
          <IconButton
            icon={<SendWhiteIcon />}
--- a/app/components/error.tsx
+++ b/app/components/error.tsx
@@ -5,6 +5,7 @@ import ResetIcon from "../icons/reload.svg";
 import { ISSUE_URL } from "../constant";
 import Locale from "../locales";
 import { downloadAs } from "../utils";
+import { showConfirm } from "./ui-lib";

 interface IErrorBoundaryState {
  hasError: boolean;
@@ -57,10 +58,11 @@ export class ErrorBoundary extends React.Component<any, IErrorBoundaryState> {
            <IconButton
              icon={<ResetIcon />}
              text="Clear All Data"
-              onClick={() =>
-                confirm(Locale.Settings.Actions.ConfirmClearAll) &&
-                this.clearAndSaveData()
-              }
+              onClick={async () => {
+                if (await showConfirm(Locale.Settings.Danger.Reset.Confirm)) {
+                  this.clearAndSaveData();
+                }
+              }}
              bordered
            />
          </div>
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@@ -185,7 +185,7 @@

 .chat-item-delete {
  position: absolute;
-  top: 10px;
+  top: 0;
  right: 0;
  transition: all ease 0.3s;
  opacity: 0;
@@ -194,7 +194,7 @@

 .chat-item:hover > .chat-item-delete {
  opacity: 0.5;
-  transform: translateX(-10px);
+  transform: translateX(-4px);
 }

 .chat-item:hover > .chat-item-delete:hover {
@@ -283,15 +283,6 @@
    }
  }

-  .chat-item-delete {
-    top: 15px;
-  }
-
-  .chat-item:hover > .chat-item-delete {
-    opacity: 0.5;
-    right: 5px;
-  }
-
  .sidebar-tail {
    flex-direction: column-reverse;
    align-items: center;
@@ -322,243 +313,6 @@
  margin-right: 15px;
 }

-.chat {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  height: 100%;
-}
-
-.chat-body {
-  flex: 1;
-  overflow: auto;
-  padding: 20px;
-  padding-bottom: 40px;
-  position: relative;
-  overscroll-behavior: none;
-}
-
-.chat-body-title {
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.chat-message {
-  display: flex;
-  flex-direction: row;
-
-  &:last-child {
-    animation: slide-in ease 0.3s;
-  }
-}
-
-.chat-message-user {
-  display: flex;
-  flex-direction: row-reverse;
-}
-
-.chat-message-container {
-  max-width: var(--message-max-width);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-
-  &:hover {
-    .chat-message-top-actions {
-      opacity: 1;
-      transform: translateX(10px);
-      pointer-events: all;
-    }
-  }
-}
-
-.chat-message-user > .chat-message-container {
-  align-items: flex-end;
-}
-
-.chat-message-avatar {
-  margin-top: 20px;
-}
-
-.chat-message-status {
-  font-size: 12px;
-  color: #aaa;
-  line-height: 1.5;
-  margin-top: 5px;
-}
-
-.chat-message-item {
-  box-sizing: border-box;
-  max-width: 100%;
-  margin-top: 10px;
-  border-radius: 10px;
-  background-color: rgba(0, 0, 0, 0.05);
-  padding: 10px;
-  font-size: 14px;
-  user-select: text;
-  word-break: break-word;
-  border: var(--border-in-light);
-  position: relative;
-}
-
-.chat-message-top-actions {
-  min-width: 120px;
-  font-size: 12px;
-  position: absolute;
-  right: 20px;
-  top: -26px;
-  left: 30px;
-  transition: all ease 0.3s;
-  opacity: 0;
-  pointer-events: none;
-
-  display: flex;
-  flex-direction: row-reverse;
-
-  .chat-message-top-action {
-    opacity: 0.5;
-    color: var(--black);
-    white-space: nowrap;
-    cursor: pointer;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    &:not(:first-child) {
-      margin-right: 10px;
-    }
-  }
-}
-
-.chat-message-user > .chat-message-container > .chat-message-item {
-  background-color: var(--second);
-}
-
-.chat-message-actions {
-  display: flex;
-  flex-direction: row-reverse;
-  width: 100%;
-  padding-top: 5px;
-  box-sizing: border-box;
-  font-size: 12px;
-}
-
-.chat-message-action-date {
-  color: #aaa;
-}
-
-.chat-input-panel {
-  position: relative;
-  width: 100%;
-  padding: 20px;
-  padding-top: 10px;
-  box-sizing: border-box;
-  flex-direction: column;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-  border-top: var(--border-in-light);
-  box-shadow: var(--card-shadow);
-}
-
-@mixin single-line {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.prompt-hints {
-  min-height: 20px;
-  width: 100%;
-  max-height: 50vh;
-  overflow: auto;
-  display: flex;
-  flex-direction: column-reverse;
-
-  background-color: var(--white);
-  border: var(--border-in-light);
-  border-radius: 10px;
-  margin-bottom: 10px;
-  box-shadow: var(--shadow);
-
-  .prompt-hint {
-    color: var(--black);
-    padding: 6px 10px;
-    animation: slide-in ease 0.3s;
-    cursor: pointer;
-    transition: all ease 0.3s;
-    border: transparent 1px solid;
-    margin: 4px;
-    border-radius: 8px;
-
-    &:not(:last-child) {
-      margin-top: 0;
-    }
-
-    .hint-title {
-      font-size: 12px;
-      font-weight: bolder;
-
-      @include single-line();
-    }
-    .hint-content {
-      font-size: 12px;
-
-      @include single-line();
-    }
-
-    &-selected,
-    &:hover {
-      border-color: var(--primary);
-    }
-  }
-}
-
-.chat-input-panel-inner {
-  display: flex;
-  flex: 1;
-}
-
-.chat-input {
-  height: 100%;
-  width: 100%;
-  border-radius: 10px;
-  border: var(--border-in-light);
-  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
-  background-color: var(--white);
-  color: var(--black);
-  font-family: inherit;
-  padding: 10px 90px 10px 14px;
-  resize: none;
-  outline: none;
-}
-
-.chat-input:focus {
-  border: 1px solid var(--primary);
-}
-
-.chat-input-send {
-  background-color: var(--primary);
-  color: white;
-
-  position: absolute;
-  right: 30px;
-  bottom: 32px;
-}
-
-@media only screen and (max-width: 600px) {
-  .chat-input {
-    font-size: 16px;
-  }
-
-  .chat-input-send {
-    bottom: 30px;
-  }
-}
-
 .loading-content {
  display: flex;
  flex-direction: column;
@@ -567,3 +321,7 @@
  height: 100%;
  width: 100%;
 }
+
+.rtl-screen {
+  direction: rtl;
+}
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -15,6 +15,8 @@ import dynamic from "next/dynamic";
 import { Path, SlotID } from "../constant";
 import { ErrorBoundary } from "./error";

+import { getLang } from "../locales";
+
 import {
  HashRouter as Router,
  Routes,
@@ -124,7 +126,7 @@ function Screen() {
          config.tightBorder && !isMobileScreen
            ? styles["tight-container"]
            : styles.container
-        }`
+        } ${getLang() === "ar" ? styles["rtl-screen"] : ""}`
      }
    >
      {isAuth ? (
--- a/app/components/input-range.module.scss
+++ b/app/components/input-range.module.scss
@@ -1,12 +1,13 @@
 .input-range {
  border: var(--border-in-light);
  border-radius: 10px;
-  padding: 5px 15px 5px 10px;
+  padding: 5px 10px 5px 10px;
  font-size: 12px;
  display: flex;
+  justify-content: space-between;
  max-width: 40%;

  input[type="range"] {
-    max-width: calc(100% - 50px);
+    max-width: calc(100% - 34px);
  }
 }
--- a/app/components/markdown.tsx
+++ b/app/components/markdown.tsx
@@ -195,6 +195,7 @@ export function Markdown(
        fontSize: `${props.fontSize ?? 14}px`,
        height: getSize(renderedHeight.current),
        width: getSize(renderedWidth.current),
+        direction: /[\u0600-\u06FF]/.test(props.content) ? "rtl" : "ltr",
      }}
      ref={mdRef}
      onContextMenu={props.onContextMenu}
--- a/app/components/mask.tsx
+++ b/app/components/mask.tsx
@@ -15,7 +15,15 @@ import CopyIcon from "../icons/copy.svg";
 import { DEFAULT_MASK_AVATAR, Mask, useMaskStore } from "../store/mask";
 import { ChatMessage, ModelConfig, useAppConfig, useChatStore } from "../store";
 import { ROLES } from "../client/api";
-import { Input, List, ListItem, Modal, Popover, Select } from "./ui-lib";
+import {
+  Input,
+  List,
+  ListItem,
+  Modal,
+  Popover,
+  Select,
+  showConfirm,
+} from "./ui-lib";
 import { Avatar, AvatarPicker } from "./emoji";
 import Locale, { AllLangs, ALL_LANG_OPTIONS, Lang } from "../locales";
 import { useNavigate } from "react-router-dom";
@@ -125,10 +133,10 @@ export function MaskConfig(props: {
            <input
              type="checkbox"
              checked={props.mask.syncGlobalConfig}
-              onChange={(e) => {
+              onChange={async (e) => {
                if (
                  e.currentTarget.checked &&
-                  confirm(Locale.Mask.Config.Sync.Confirm)
+                  (await showConfirm(Locale.Mask.Config.Sync.Confirm))
                ) {
                  props.updateMask((mask) => {
                    mask.syncGlobalConfig = e.currentTarget.checked;
@@ -439,8 +447,8 @@ export function MaskPage() {
                    <IconButton
                      icon={<DeleteIcon />}
                      text={Locale.Mask.Item.Delete}
-                      onClick={() => {
-                        if (confirm(Locale.Mask.Item.DeleteConfirm)) {
+                      onClick={async () => {
+                        if (await showConfirm(Locale.Mask.Item.DeleteConfirm)) {
                          maskStore.delete(m.id);
                        }
                      }}
--- a/app/components/model-config.tsx
+++ b/app/components/model-config.tsx
@@ -2,7 +2,7 @@ import { ALL_MODELS, ModalConfigValidator, ModelConfig } from "../store";

 import Locale from "../locales";
 import { InputRange } from "./input-range";
-import { List, ListItem, Select } from "./ui-lib";
+import { ListItem, Select } from "./ui-lib";

 export function ModelConfigList(props: {
  modelConfig: ModelConfig;
@@ -109,6 +109,21 @@ export function ModelConfigList(props: {
        ></InputRange>
      </ListItem>

+      <ListItem
+        title={Locale.Settings.InputTemplate.Title}
+        subTitle={Locale.Settings.InputTemplate.SubTitle}
+      >
+        <input
+          type="text"
+          value={props.modelConfig.template}
+          onChange={(e) =>
+            props.updateConfig(
+              (config) => (config.template = e.currentTarget.value),
+            )
+          }
+        ></input>
+      </ListItem>
+
      <ListItem
        title={Locale.Settings.HistoryCount.Title}
        subTitle={Locale.Settings.HistoryCount.SubTitle}
--- a/app/components/new-chat.tsx
+++ b/app/components/new-chat.tsx
@@ -14,6 +14,7 @@ import Locale from "../locales";
 import { useAppConfig, useChatStore } from "../store";
 import { MaskAvatar } from "./mask";
 import { useCommand } from "../command";
+import { showConfirm } from "./ui-lib";

 function getIntersectionArea(aRect: DOMRect, bRect: DOMRect) {
  const xmin = Math.max(aRect.x, bRect.x);
@@ -125,8 +126,8 @@ export function NewChat() {
        {!state?.fromHome && (
          <IconButton
            text={Locale.NewChat.NotShow}
-            onClick={() => {
-              if (confirm(Locale.NewChat.ConfirmNoShow)) {
+            onClick={async () => {
+              if (await showConfirm(Locale.NewChat.ConfirmNoShow)) {
                startChat();
                config.update(
                  (config) => (config.dontShowMaskSplashScreen = true),
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -18,6 +18,7 @@ import {
  PasswordInput,
  Popover,
  Select,
+  showConfirm,
 } from "./ui-lib";
 import { ModelConfigList } from "./model-config";

@@ -46,6 +47,7 @@ import { InputRange } from "./input-range";
 import { useNavigate } from "react-router-dom";
 import { Avatar, AvatarPicker } from "./emoji";
 import { getClientConfig } from "../config/client";
+import { useSyncStore } from "../store/sync";

 function EditPromptModal(props: { id: number; onClose: () => void }) {
  const promptStore = usePromptStore();
@@ -198,6 +200,116 @@ function UserPromptModal(props: { onClose?: () => void }) {
  );
 }

+function DangerItems() {
+  const chatStore = useChatStore();
+  const appConfig = useAppConfig();
+
+  return (
+    <List>
+      <ListItem
+        title={Locale.Settings.Danger.Reset.Title}
+        subTitle={Locale.Settings.Danger.Reset.SubTitle}
+      >
+        <IconButton
+          text={Locale.Settings.Danger.Reset.Action}
+          onClick={async () => {
+            if (await showConfirm(Locale.Settings.Danger.Reset.Confirm)) {
+              appConfig.reset();
+            }
+          }}
+          type="danger"
+        />
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.Danger.Clear.Title}
+        subTitle={Locale.Settings.Danger.Clear.SubTitle}
+      >
+        <IconButton
+          text={Locale.Settings.Danger.Clear.Action}
+          onClick={async () => {
+            if (await showConfirm(Locale.Settings.Danger.Clear.Confirm)) {
+              chatStore.clearAllData();
+            }
+          }}
+          type="danger"
+        />
+      </ListItem>
+    </List>
+  );
+}
+
+function SyncItems() {
+  const syncStore = useSyncStore();
+  const webdav = syncStore.webDavConfig;
+
+  // not ready: https://github.com/Yidadaa/ChatGPT-Next-Web/issues/920#issuecomment-1609866332
+  return null;
+
+  return (
+    <List>
+      <ListItem
+        title={"上次同步：" + new Date().toLocaleString()}
+        subTitle={"20 次对话，100 条消息，200 提示词，20 面具"}
+      >
+        <IconButton
+          icon={<ResetIcon />}
+          text="同步"
+          onClick={() => {
+            syncStore.check().then(console.log);
+          }}
+        />
+      </ListItem>
+
+      <ListItem
+        title={"本地备份"}
+        subTitle={"20 次对话，100 条消息，200 提示词，20 面具"}
+      ></ListItem>
+
+      <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>
+
+      <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="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>
+  );
+}
+
 function formatVersionDate(t: string) {
  const d = new Date(+t);
  const year = d.getUTCFullYear();
@@ -216,7 +328,6 @@ export function Settings() {
  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
  const config = useAppConfig();
  const updateConfig = config.update;
-  const resetConfig = config.reset;
  const chatStore = useChatStore();

  const updateStore = useUpdateStore();
@@ -301,36 +412,13 @@ export function Settings() {
          </div>
        </div>
        <div className="window-actions">
-          <div className="window-action-button">
-            <IconButton
-              icon={<ClearIcon />}
-              onClick={() => {
-                if (confirm(Locale.Settings.Actions.ConfirmClearAll)) {
-                  chatStore.clearAllData();
-                }
-              }}
-              bordered
-              title={Locale.Settings.Actions.ClearAll}
-            />
-          </div>
-          <div className="window-action-button">
-            <IconButton
-              icon={<ResetIcon />}
-              onClick={() => {
-                if (confirm(Locale.Settings.Actions.ConfirmResetAll)) {
-                  resetConfig();
-                }
-              }}
-              bordered
-              title={Locale.Settings.Actions.ResetAll}
-            />
-          </div>
+          <div className="window-action-button"></div>
+          <div className="window-action-button"></div>
          <div className="window-action-button">
            <IconButton
              icon={<CloseIcon />}
              onClick={() => navigate(Path.Home)}
              bordered
-              title={Locale.Settings.Actions.Close}
            />
          </div>
        </div>
@@ -522,29 +610,31 @@ export function Settings() {
            </ListItem>
          ) : null}

-          <ListItem
-            title={Locale.Settings.Usage.Title}
-            subTitle={
-              showUsage
-                ? loadingUsage
-                  ? Locale.Settings.Usage.IsChecking
-                  : Locale.Settings.Usage.SubTitle(
-                      usage?.used ?? "[?]",
-                      usage?.subscription ?? "[?]",
-                    )
-                : Locale.Settings.Usage.NoAccess
-            }
-          >
-            {!showUsage || loadingUsage ? (
-              <div />
-            ) : (
-              <IconButton
-                icon={<ResetIcon></ResetIcon>}
-                text={Locale.Settings.Usage.Check}
-                onClick={() => checkUsage(true)}
-              />
-            )}
-          </ListItem>
+          {!accessStore.hideBalanceQuery ? (
+            <ListItem
+              title={Locale.Settings.Usage.Title}
+              subTitle={
+                showUsage
+                  ? loadingUsage
+                    ? Locale.Settings.Usage.IsChecking
+                    : Locale.Settings.Usage.SubTitle(
+                        usage?.used ?? "[?]",
+                        usage?.subscription ?? "[?]",
+                      )
+                  : Locale.Settings.Usage.NoAccess
+              }
+            >
+              {!showUsage || loadingUsage ? (
+                <div />
+              ) : (
+                <IconButton
+                  icon={<ResetIcon></ResetIcon>}
+                  text={Locale.Settings.Usage.Check}
+                  onClick={() => checkUsage(true)}
+                />
+              )}
+            </ListItem>
+          ) : null}

          {!accessStore.hideUserApiKey ? (
            <ListItem
@@ -554,6 +644,7 @@ export function Settings() {
              <input
                type="text"
                value={accessStore.openaiUrl}
+                placeholder="https://api.openai.com/"
                onChange={(e) =>
                  accessStore.updateOpenAiUrl(e.currentTarget.value)
                }
@@ -594,6 +685,8 @@ export function Settings() {
          </ListItem>
        </List>

+        <SyncItems />
+
        <List>
          <ModelConfigList
            modelConfig={config.modelConfig}
@@ -608,6 +701,8 @@ export function Settings() {
        {shouldShowPromptModal && (
          <UserPromptModal onClose={() => setShowPromptModal(false)} />
        )}
+
+        <DangerItems />
      </div>
    </ErrorBoundary>
  );
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -26,7 +26,7 @@ import {
 import { Link, useNavigate } from "react-router-dom";
 import { useMobileScreen } from "../utils";
 import dynamic from "next/dynamic";
-import { showToast } from "./ui-lib";
+import { showConfirm, showToast } from "./ui-lib";

 const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
  loading: () => null,
@@ -37,14 +37,11 @@ function useHotKey() {

  useEffect(() => {
    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.metaKey || e.altKey || e.ctrlKey) {
-        const n = chatStore.sessions.length;
-        const limit = (x: number) => (x + n) % n;
-        const i = chatStore.currentSessionIndex;
+      if (e.altKey || e.ctrlKey) {
        if (e.key === "ArrowUp") {
-          chatStore.selectSession(limit(i - 1));
+          chatStore.nextSession(-1);
        } else if (e.key === "ArrowDown") {
-          chatStore.selectSession(limit(i + 1));
+          chatStore.nextSession(1);
        }
      }
    };
@@ -163,8 +160,8 @@ export function SideBar(props: { className?: string }) {
          <div className={styles["sidebar-action"] + " " + styles.mobile}>
            <IconButton
              icon={<CloseIcon />}
-              onClick={() => {
-                if (confirm(Locale.Home.DeleteChat)) {
+              onClick={async () => {
+                if (await showConfirm(Locale.Home.DeleteChat)) {
                  chatStore.deleteSession(chatStore.currentSessionIndex);
                }
              }}
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -207,7 +207,7 @@
 .select-with-icon {
  position: relative;
  max-width: fit-content;
-  
+
  .select-with-icon-select {
    height: 100%;
    border: var(--border-in-light);
@@ -227,4 +227,24 @@
    transform: translateY(-50%);
    pointer-events: none;
  }
-}
+}
+
+.modal-input {
+  height: 100%;
+  width: 100%;
+  border-radius: 10px;
+  border: var(--border-in-light);
+  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03);
+  background-color: var(--white);
+  color: var(--black);
+  font-family: inherit;
+  padding: 10px 90px 10px 14px;
+  resize: none;
+  outline: none;
+  box-sizing: border-box;
+  min-height: 68px;
+
+  &:focus {
+    border: 1px solid var(--primary);
+  }
+}
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -4,6 +4,10 @@ import CloseIcon from "../icons/close.svg";
 import EyeIcon from "../icons/eye.svg";
 import EyeOffIcon from "../icons/eye-off.svg";
 import DownIcon from "../icons/down.svg";
+import ConfirmIcon from "../icons/confirm.svg";
+import CancelIcon from "../icons/cancel.svg";
+
+import Locale from "../locales";

 import { createRoot } from "react-dom/client";
 import React, { HTMLProps, useEffect, useState } from "react";
@@ -87,7 +91,7 @@ export function Loading() {

 interface ModalProps {
  title: string;
-  children?: JSX.Element | JSX.Element[];
+  children?: any;
  actions?: JSX.Element[];
  onClose?: () => void;
 }
@@ -262,3 +266,128 @@ export function Select(
    </div>
  );
 }
+
+export function showConfirm(content: any) {
+  const div = document.createElement("div");
+  div.className = "modal-mask";
+  document.body.appendChild(div);
+
+  const root = createRoot(div);
+  const closeModal = () => {
+    root.unmount();
+    div.remove();
+  };
+
+  return new Promise<boolean>((resolve) => {
+    root.render(
+      <Modal
+        title={Locale.UI.Confirm}
+        actions={[
+          <IconButton
+            key="cancel"
+            text={Locale.UI.Cancel}
+            onClick={() => {
+              resolve(false);
+              closeModal();
+            }}
+            icon={<CancelIcon />}
+            tabIndex={0}
+            bordered
+            shadow
+          ></IconButton>,
+          <IconButton
+            key="confirm"
+            text={Locale.UI.Confirm}
+            type="primary"
+            onClick={() => {
+              resolve(true);
+              closeModal();
+            }}
+            icon={<ConfirmIcon />}
+            tabIndex={0}
+            autoFocus
+            bordered
+            shadow
+          ></IconButton>,
+        ]}
+        onClose={closeModal}
+      >
+        {content}
+      </Modal>,
+    );
+  });
+}
+
+function PromptInput(props: {
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const [input, setInput] = useState(props.value);
+  const onInput = (value: string) => {
+    props.onChange(value);
+    setInput(value);
+  };
+
+  return (
+    <textarea
+      className={styles["modal-input"]}
+      autoFocus
+      value={input}
+      onInput={(e) => onInput(e.currentTarget.value)}
+    ></textarea>
+  );
+}
+
+export function showPrompt(content: any, value = "") {
+  const div = document.createElement("div");
+  div.className = "modal-mask";
+  document.body.appendChild(div);
+
+  const root = createRoot(div);
+  const closeModal = () => {
+    root.unmount();
+    div.remove();
+  };
+
+  return new Promise<string>((resolve) => {
+    let userInput = "";
+
+    root.render(
+      <Modal
+        title={content}
+        actions={[
+          <IconButton
+            key="cancel"
+            text={Locale.UI.Cancel}
+            onClick={() => {
+              closeModal();
+            }}
+            icon={<CancelIcon />}
+            bordered
+            shadow
+            tabIndex={0}
+          ></IconButton>,
+          <IconButton
+            key="confirm"
+            text={Locale.UI.Confirm}
+            type="primary"
+            onClick={() => {
+              resolve(userInput);
+              closeModal();
+            }}
+            icon={<ConfirmIcon />}
+            bordered
+            shadow
+            tabIndex={0}
+          ></IconButton>,
+        ]}
+        onClose={closeModal}
+      >
+        <PromptInput
+          onChange={(val) => (userInput = val)}
+          value={value}
+        ></PromptInput>
+      </Modal>,
+    );
+  });
+}
--- a/app/config/server.ts
+++ b/app/config/server.ts
@@ -12,6 +12,7 @@ declare global {
      DISABLE_GPT4?: string; // allow user to use gpt-4 or not
      BUILD_MODE?: "standalone" | "export";
      BUILD_APP?: string; // is building desktop app
+      HIDE_BALANCE_QUERY?: string; // allow user to query balance or not
    }
  }
 }
@@ -46,5 +47,6 @@ export const getServerSideConfig = () => {
    isVercel: !!process.env.VERCEL,
    hideUserApiKey: !!process.env.HIDE_USER_API_KEY,
    enableGPT4: !process.env.DISABLE_GPT4,
+    hideBalanceQuery: !!process.env.HIDE_BALANCE_QUERY,
  };
 };
--- a/app/constant.ts
+++ b/app/constant.ts
@@ -33,6 +33,7 @@ export enum StoreKey {
  Mask = "mask-store",
  Prompt = "prompt-store",
  Update = "chat-update",
+  Sync = "sync",
 }

 export const MAX_SIDEBAR_WIDTH = 500;
@@ -52,3 +53,10 @@ export const OpenaiPath = {
  UsagePath: "dashboard/billing/usage",
  SubsPath: "dashboard/billing/subscription",
 };
+
+export const DEFAULT_INPUT_TEMPLATE = `{{input}}`; // input / time / model / lang
+export const DEFAULT_SYSTEM_TEMPLATE = `
+You are ChatGPT, a large language model trained by OpenAI.
+Knowledge cutoff: 2021-09
+Current model: {{model}}
+Current time: {{time}}`;
--- a/app/global.d.ts
+++ b/app/global.d.ts
@@ -9,3 +9,9 @@ declare module "*.scss" {
 }

 declare module "*.svg";
+
+declare interface Window {
+  __TAURI__?: {
+    writeText(text: string): Promise<void>;
+  };
+}
--- a/app/icons/cancel.svg
+++ b/app/icons/cancel.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 xlink:href="#path_0"></use></mask><g mask="url(#bg-mask-0)" ><path  id="路径 1" style="fill:#333333; opacity:1;" d="M13.9967,8.00337c0,-0.81625 -0.1569,-1.59615 -0.4707,-2.3397c-0.30307,-0.71824 -0.73117,-1.3542 -1.2843,-1.90789c-0.55287,-0.55348 -1.18783,-0.98185 -1.9049,-1.28512c-0.74182,-0.31375 -1.51963,-0.47062 -2.33343,-0.47062c-0.81634,0 -1.59621,0.15693 -2.3396,0.47079c-0.71828,0.30325 -1.35419,0.73165 -1.90774,1.2852c-0.55355,0.55354 -0.98195,1.18945 -1.2852,1.90774c-0.31386,0.74339 -0.47079,1.52326 -0.47079,2.3396c0,0.8138 0.15687,1.59161 0.47062,2.33343c0.30327,0.71707 0.73164,1.35203 1.28512,1.9049c0.55369,0.55313 1.18965,0.98123 1.90789,1.2843c0.74355,0.3138 1.52345,0.4707 2.3397,0.4707c0.81371,0 1.59155,-0.15683 2.33353,-0.4705c0.717,-0.30313 1.35203,-0.7312 1.9051,-1.2842c0.553,-0.55307 0.98107,-1.1881 1.2842,-1.9051c0.31367,-0.74198 0.4705,-1.51982 0.4705,-2.33353zM15.33,8.00337c0,0.99387 -0.1919,1.94478 -0.5757,2.85273c-0.37067,0.87673 -0.89383,1.65297 -1.5695,2.3287c-0.67573,0.67567 -1.45197,1.19883 -2.3287,1.5695c-0.90795,0.3838 -1.85886,0.5757 -2.85273,0.5757c-0.99612,0 -1.94882,-0.19183 -2.8581,-0.5755c-0.8781,-0.3706 -1.65537,-0.89377 -2.33181,-1.5695c-0.67631,-0.6756 -1.19992,-1.45187 -1.57081,-2.3288c-0.38396,-0.90784 -0.57594,-1.85878 -0.57594,-2.85283c0,-0.99629 0.19192,-1.94903 0.57577,-2.8582c0.37081,-0.87829 0.89439,-1.6556 1.57074,-2.33195c0.67635,-0.67635 1.45367,-1.19993 2.33195,-1.57074c0.90917,-0.38385 1.86191,-0.57577 2.8582,-0.57577c0.99405,0 1.94499,0.19198 2.85283,0.57594c0.87693,0.37089 1.6532,0.8945 2.3288,1.57081c0.67573,0.67644 1.1989,1.45371 1.5695,2.33181c0.38367,0.90928 0.5755,1.86198 0.5755,2.8581z"></path><path  id="路径 2" style="fill:#333333; opacity:1;" d="M5.4714,4.5286l6,6c0.03093,0.03093 0.05857,0.0646 0.0829,0.101c0.02433,0.0364 0.04487,0.07483 0.0616,0.1153c0.01673,0.0404 0.0294,0.08207 0.038,0.125c0.00853,0.04293 0.0128,0.0863 0.0128,0.1301c0,0.0438 -0.00427,0.08717 -0.0128,0.1301c-0.0086,0.04293 -0.02127,0.0846 -0.038,0.125c-0.01673,0.04047 -0.03727,0.0789 -0.0616,0.1153c-0.02433,0.0364 -0.05197,0.07007 -0.0829,0.101c-0.03093,0.03093 -0.0646,0.05857 -0.101,0.0829c-0.0364,0.02433 -0.07483,0.04487 -0.1153,0.0616c-0.0404,0.01673 -0.08207,0.0294 -0.125,0.038c-0.04293,0.00853 -0.0863,0.0128 -0.1301,0.0128c-0.0438,0 -0.08717,-0.00427 -0.1301,-0.0128c-0.04293,-0.0086 -0.0846,-0.02127 -0.125,-0.038c-0.04047,-0.01673 -0.0789,-0.03727 -0.1153,-0.0616c-0.0364,-0.02433 -0.07007,-0.05197 -0.101,-0.0829l-6,-6c-0.03095,-0.03095 -0.05859,-0.06463 -0.08291,-0.10102c-0.02432,-0.0364 -0.04486,-0.07482 -0.06161,-0.11526c-0.01675,-0.04044 -0.0294,-0.08213 -0.03794,-0.12506c-0.00854,-0.04293 -0.01281,-0.08629 -0.01281,-0.13006c0,-0.04377 0.00427,-0.08713 0.01281,-0.13006c0.00854,-0.04293 0.02119,-0.08462 0.03794,-0.12506c0.01675,-0.04045 0.03729,-0.07887 0.06161,-0.11526c0.02432,-0.0364 0.05196,-0.07007 0.08291,-0.10102c0.03095,-0.03095 0.06462,-0.05859 0.10102,-0.08291c0.03639,-0.02432 0.07481,-0.04486 0.11526,-0.06161c0.04044,-0.01675 0.08213,-0.0294 0.12506,-0.03794c0.04293,-0.00854 0.08629,-0.01281 0.13006,-0.01281c0.04377,0 0.08713,0.00427 0.13006,0.01281c0.04293,0.00854 0.08462,0.02119 0.12506,0.03794c0.04044,0.01675 0.07886,0.03729 0.11526,0.06161c0.03639,0.02432 0.07007,0.05196 0.10102,0.08291z"></path></g></g><defs><rect id="path_0" x="0" y="0" width="16" height="16" /></defs></svg>
--- a/app/icons/confirm.svg
+++ b/app/icons/confirm.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 xlink:href="#path_0"></use></mask><g mask="url(#bg-mask-0)" ><path  id="路径 1" style="fill:#333333; opacity:1;" d="M5.99607,12.8916c-0.03633,0.02413 -0.07466,0.04453 -0.11499,0.0612c-0.04034,0.01667 -0.08191,0.02923 -0.12471,0.0377c-0.04281,0.00853 -0.08603,0.0128 -0.12967,0.0128c-0.04364,0 -0.08686,-0.00423 -0.12966,-0.0127c-0.04281,-0.00847 -0.08438,-0.02103 -0.12472,-0.0377c-0.04034,-0.01667 -0.07867,-0.03707 -0.115,-0.0612c-0.03633,-0.0242 -0.06997,-0.0517 -0.1009,-0.0825l-3.96,-3.93998c-0.03103,-0.03087 -0.05876,-0.06448 -0.08317,-0.10081c-0.02441,-0.03634 -0.04505,-0.07471 -0.0619,-0.1151c-0.01685,-0.0404 -0.0296,-0.08206 -0.03825,-0.12497c-0.00865,-0.04291 -0.01303,-0.08626 -0.01314,-0.13003c-0.00011,-0.04377 0.00405,-0.08714 0.01248,-0.13009c0.00843,-0.04295 0.02097,-0.08467 0.03762,-0.12516c0.01665,-0.04048 0.03709,-0.07895 0.06132,-0.11541c0.02423,-0.03646 0.05178,-0.0702 0.08265,-0.10123c0.03087,-0.03103 0.06448,-0.05876 0.10081,-0.08317c0.03634,-0.02441 0.07471,-0.04505 0.11511,-0.0619c0.04039,-0.01685 0.08205,-0.0296 0.12496,-0.03825c0.04291,-0.00865 0.08626,-0.01303 0.13003,-0.01314c0.04377,-0.00011 0.08714,0.00405 0.13009,0.01248c0.04295,0.00843 0.08467,0.02097 0.12516,0.03762c0.04048,0.01665 0.07895,0.03709 0.11541,0.06132c0.03646,0.02423 0.07021,0.05178 0.10124,0.08265l3.48968,3.47207l8.23978,-8.20196c0.031,-0.03088 0.06473,-0.05844 0.1012,-0.08268c0.03647,-0.02423 0.07493,-0.04468 0.1154,-0.06134c0.04047,-0.01666 0.0822,-0.02921 0.1252,-0.03765c0.04293,-0.00844 0.0863,-0.01261 0.1301,-0.01251c0.04373,0.0001 0.08707,0.00447 0.13,0.01311c0.04293,0.00864 0.0846,0.02138 0.125,0.03822c0.0404,0.01685 0.07877,0.03747 0.1151,0.06188c0.03633,0.0244 0.06993,0.05211 0.1008,0.08314c0.0624,0.06265 0.1104,0.13486 0.144,0.21661c0.03367,0.08175 0.0504,0.16683 0.0502,0.25524c-0.0002,0.08841 -0.0173,0.17341 -0.0513,0.25501c-0.03407,0.08159 -0.08243,0.15357 -0.1451,0.21594l-8.70996,8.66999c-0.03093,0.0308 -0.06455,0.0583 -0.10087,0.0825z"></path></g></g><defs><rect id="path_0" x="0" y="0" width="16" height="16" /></defs></svg>
--- a/app/icons/pin.svg
+++ b/app/icons/pin.svg
--- a/app/icons/robot.svg
+++ b/app/icons/robot.svg
--- a/app/locales/ar.ts
+++ b/app/locales/ar.ts
@@ -0,0 +1,290 @@
+import { SubmitKey } from "../store/config";
+import type { PartialLocaleType } from "./index";
+
+const ar: PartialLocaleType = {
+  WIP: "قريبًا...",
+  Error: {
+    Unauthorized:
+      "غير مصرح بالوصول، يرجى إدخال رمز الوصول [auth](/#/auth) في صفحة المصادقة.",
+  },
+  Auth: {
+    Title: "تحتاج إلى رمز الوصول",
+    Tips: "يرجى إدخال رمز الوصول أدناه",
+    Input: "رمز الوصول",
+    Confirm: "تأكيد",
+    Later: "لاحقًا",
+  },
+  ChatItem: {
+    ChatItemCount: (count: number) => `${count} رسائل`,
+  },
+  Chat: {
+    SubTitle: (count: number) => ` ${count} رسائل مع ChatGPT`,
+    Actions: {
+      ChatList: "الانتقال إلى قائمة الدردشة",
+      CompressedHistory: "ملخص ضغط ذاكرة التاريخ",
+      Export: "تصدير جميع الرسائل كـ Markdown",
+      Copy: "نسخ",
+      Stop: "توقف",
+      Retry: "إعادة المحاولة",
+      Delete: "حذف",
+    },
+    InputActions: {
+      Stop: "توقف",
+      ToBottom: "إلى آخر",
+      Theme: {
+        auto: "تلقائي",
+        light: "نمط فاتح",
+        dark: "نمط داكن",
+      },
+      Prompt: "الاقتراحات",
+      Masks: "الأقنعة",
+      Clear: "مسح السياق",
+      Settings: "الإعدادات",
+    },
+    Rename: "إعادة تسمية الدردشة",
+    Typing: "كتابة...",
+    Input: (submitKey: string) => {
+      var inputHints = ` اضغط على ${submitKey} للإرسال`;
+      if (submitKey === String(SubmitKey.Enter)) {
+        inputHints += "، Shift + Enter للإنشاء";
+      }
+      return inputHints + "، / للبحث في الاقتراحات";
+    },
+    Send: "إرسال",
+    Config: {
+      Reset: "إعادة التعيين إلى الإعدادات الافتراضية",
+      SaveAs: "حفظ كأقنعة",
+    },
+  },
+  Export: {
+    Title: "تصدير الرسائل",
+    Copy: "نسخ الكل",
+    Download: "تنزيل",
+    MessageFromYou: "رسالة منك",
+    MessageFromChatGPT: "رسالة من ChatGPT",
+    Share: "مشاركة على ShareGPT",
+    Format: {
+      Title: "صيغة التصدير",
+      SubTitle: "Markdown أو صورة PNG",
+    },
+    IncludeContext: {
+      Title: "تضمين السياق",
+      SubTitle: "تصدير اقتراحات السياق في الأقنعة أم لا",
+    },
+    Steps: {
+      Select: "تحديد",
+      Preview: "معاينة",
+    },
+  },
+  Select: {
+    Search: "بحث",
+    All: "تحديد الكل",
+    Latest: "تحديد أحدث",
+    Clear: "مسح",
+  },
+  Memory: {
+    Title: "اقتراحات الذاكرة",
+    EmptyContent: "لا شيء حتى الآن.",
+    Send: "إرسال الذاكرة",
+    Copy: "نسخ الذاكرة",
+    Reset: "إعادة التعيين",
+    ResetConfirm:
+      "سيؤدي إعادة التعيين إلى مسح سجل المحادثة الحالي والذاكرة التاريخية. هل أنت متأكد أنك تريد الاستمرار؟",
+  },
+  Home: {
+    NewChat: "دردشة جديدة",
+    DeleteChat: "هل تريد تأكيد حذف المحادثة المحددة؟",
+    DeleteToast: "تم حذف الدردشة",
+    Revert: "التراجع",
+  },
+  Settings: {
+    Title: "الإعدادات",
+    SubTitle: "جميع الإعدادات",
+
+    Lang: {
+      Name: "Language", // تنبيه: إذا كنت ترغب في إضافة ترجمة جديدة، يرجى عدم ترجمة هذه القيمة وتركها "Language"
+      All: "كل اللغات",
+    },
+    Avatar: "الصورة الرمزية",
+    FontSize: {
+      Title: "حجم الخط",
+      SubTitle: "ضبط حجم الخط لمحتوى الدردشة",
+    },
+    InputTemplate: {
+      Title: "نموذج الإدخال",
+      SubTitle: "سيتم ملء أحدث رسالة في هذا النموذج",
+    },
+    Update: {
+      Version: (x: string) => ` الإصدار: ${x}`,
+      IsLatest: "أحدث إصدار",
+      CheckUpdate: "التحقق من التحديث",
+      IsChecking: "جارٍ التحقق من التحديث...",
+      FoundUpdate: (x: string) => ` تم العثور على إصدار جديد: ${x}`,
+      GoToUpdate: "التحديث",
+    },
+    SendKey: "مفتاح الإرسال",
+    Theme: "السمة",
+    TightBorder: "حدود ضيقة",
+    SendPreviewBubble: {
+      Title: "عرض معاينة الـ Send",
+      SubTitle: "معاينة Markdown في فقاعة",
+    },
+    Mask: {
+      Title: "شاشة تظهر الأقنعة",
+      SubTitle: "عرض شاشة تظهر الأقنعة قبل بدء الدردشة الجديدة",
+    },
+    Prompt: {
+      Disable: {
+        Title: "تعطيل الاكتمال التلقائي",
+        SubTitle: "اكتب / لتشغيل الاكتمال التلقائي",
+      },
+      List: "قائمة الاقتراحات",
+      ListCount: (builtin: number, custom: number) => `
+${builtin} مدمجة، ${custom} تم تعريفها من قبل المستخدم`,
+      Edit: "تعديل",
+      Modal: {
+        Title: "قائمة الاقتراحات",
+        Add: "إضافة واحدة",
+        Search: "البحث في الاقتراحات",
+      },
+      EditModal: {
+        Title: "تحرير الاقتراح",
+      },
+    },
+    HistoryCount: {
+      Title: "عدد الرسائل المرفقة",
+      SubTitle: "عدد الرسائل المرسلة المرفقة في كل طلب",
+    },
+    CompressThreshold: {
+      Title: "حد الضغط للتاريخ",
+      SubTitle: "سيتم الضغط إذا تجاوزت طول الرسائل غير المضغوطة الحد المحدد",
+    },
+    Token: {
+      Title: "مفتاح API",
+      SubTitle: "استخدم مفتاحك لتجاوز حد رمز الوصول",
+      Placeholder: "مفتاح OpenAI API",
+    },
+    Usage: {
+      Title: "رصيد الحساب",
+      SubTitle(used: any, total: any) {
+        return `تم استخدام $${used} من هذا الشهر، الاشتراك ${total}`;
+      },
+      IsChecking: "جارٍ التحقق...",
+      Check: "التحقق",
+      NoAccess: "أدخل مفتاح API للتحقق من الرصيد",
+    },
+    AccessCode: {
+      Title: "رمز الوصول",
+      SubTitle: "تم تمكين التحكم في الوصول",
+      Placeholder: "رمز الوصول المطلوب",
+    },
+    Endpoint: {
+      Title: "نقطة النهاية",
+      SubTitle: "يجب أن تبدأ نقطة النهاية المخصصة بـ http(s)://",
+    },
+    Model: "النموذج",
+    Temperature: {
+      Title: "الحرارة",
+      SubTitle: "قيمة أكبر تجعل الإخراج أكثر عشوائية",
+    },
+    MaxTokens: {
+      Title: "الحد الأقصى للرموز",
+      SubTitle: "الحد الأقصى لعدد الرموز المدخلة والرموز المُنشأة",
+    },
+    PresencePenalty: {
+      Title: "تأثير الوجود",
+      SubTitle: "قيمة أكبر تزيد من احتمالية التحدث عن مواضيع جديدة",
+    },
+    FrequencyPenalty: {
+      Title: "تأثير التكرار",
+      SubTitle: "قيمة أكبر تقلل من احتمالية تكرار نفس السطر",
+    },
+  },
+  Store: {
+    DefaultTopic: "محادثة جديدة",
+    BotHello: "مرحبًا! كيف يمكنني مساعدتك اليوم؟",
+    Error: "حدث خطأ ما، يرجى المحاولة مرة أخرى في وقت لاحق.",
+    Prompt: {
+      History: (content: string) => "هذا ملخص لسجل الدردشة كمراجعة: " + content,
+      Topic:
+        "يرجى إنشاء عنوان يتكون من أربع إلى خمس كلمات يلخص محادثتنا دون أي مقدمة أو ترقيم أو علامات ترقيم أو نقاط أو رموز إضافية. قم بإزالة علامات التنصيص المحيطة.",
+      Summarize:
+        "قم بتلخيص النقاش بشكل موجز في 200 كلمة أو أقل لاستخدامه كاقتراح للسياق في المستقبل.",
+    },
+  },
+  Copy: {
+    Success: "تم النسخ إلى الحافظة",
+    Failed: "فشلت عملية النسخ، يرجى منح الإذن للوصول إلى الحافظة",
+  },
+  Context: {
+    Toast: (x: any) => `مع ${x} اقتراحًا ذا سياق`,
+    Edit: "الاقتراحات السياقية والذاكرة",
+    Add: "إضافة اقتراح",
+    Clear: "مسح السياق",
+    Revert: "التراجع",
+  },
+  Plugin: {
+    Name: "المكوّن الإضافي",
+  },
+  Mask: {
+    Name: "الأقنعة",
+    Page: {
+      Title: "قالب الاقتراح",
+      SubTitle: (count: number) => `${count} قوالب الاقتراح`,
+      Search: "البحث في القوالب",
+      Create: "إنشاء",
+    },
+    Item: {
+      Info: (count: number) => `${count} اقتراحات`,
+      Chat: "الدردشة",
+      View: "عرض",
+      Edit: "تعديل",
+      Delete: "حذف",
+      DeleteConfirm: "تأكيد الحذف؟",
+    },
+    EditModal: {
+      Title: (readonly: boolean) => `
+تعديل قالب الاقتراح ${readonly ? "(للقراءة فقط)" : ""}`,
+      Download: "تنزيل",
+      Clone: "استنساخ",
+    },
+    Config: {
+      Avatar: "صورة الروبوت",
+      Name: "اسم الروبوت",
+      Sync: {
+        Title: "استخدام الإعدادات العامة",
+        SubTitle: "استخدام الإعدادات العامة في هذه الدردشة",
+        Confirm: "تأكيد الاستبدال بالإعدادات المخصصة بالإعدادات العامة؟",
+      },
+      HideContext: {
+        Title: "إخفاء اقتراحات السياق",
+        SubTitle: "عدم عرض اقتراحات السياق في الدردشة",
+      },
+    },
+  },
+  NewChat: {
+    Return: "العودة",
+    Skip: "ابدأ فقط",
+    Title: "اختيار قناع",
+    SubTitle: "دردشة مع الروح وراء القناع",
+    More: "المزيد",
+    NotShow: "عدم العرض مرة أخرى",
+    ConfirmNoShow: "تأكيد تعطيله؟ يمكنك تمكينه في الإعدادات لاحقًا.",
+  },
+
+  UI: {
+    Confirm: "تأكيد",
+    Cancel: "إلغاء",
+    Close: "إغلاق",
+    Create: "إنشاء",
+    Edit: "تعديل",
+  },
+  Exporter: {
+    Model: "النموذج",
+    Messages: "الرسائل",
+    Topic: "الموضوع",
+    Time: "الوقت",
+  },
+};
+
+export default ar;
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -17,7 +17,7 @@ const cn = {
    ChatItemCount: (count: number) => `${count} 条对话`,
  },
  Chat: {
-    SubTitle: (count: number) => `与 ChatGPT 的 ${count} 条对话`,
+    SubTitle: (count: number) => `共 ${count} 条对话`,
    Actions: {
      ChatList: "查看消息列表",
      CompressedHistory: "查看压缩后的历史 Prompt",
@@ -25,7 +25,19 @@ const cn = {
      Copy: "复制",
      Stop: "停止",
      Retry: "重试",
+      Pin: "固定",
+      PinToastContent: "已将 2 条对话固定至预设提示词",
+      PinToastAction: "查看",
      Delete: "删除",
+      Edit: "编辑",
+    },
+    Commands: {
+      new: "新建聊天",
+      newm: "从面具新建聊天",
+      next: "下一个聊天",
+      prev: "上一个聊天",
+      clear: "清除上下文",
+      del: "删除聊天",
    },
    InputActions: {
      Stop: "停止响应",
@@ -47,7 +59,7 @@ const cn = {
      if (submitKey === String(SubmitKey.Enter)) {
        inputHints += "，Shift + Enter 换行";
      }
-      return inputHints + "，/ 触发补全";
+      return inputHints + "，/ 触发补全，: 触发命令";
    },
    Send: "发送",
    Config: {
@@ -97,13 +109,21 @@ const cn = {
  },
  Settings: {
    Title: "设置",
-    SubTitle: "设置选项",
-    Actions: {
-      ClearAll: "清除所有数据",
-      ResetAll: "重置所有选项",
-      Close: "关闭",
-      ConfirmResetAll: "确认重置所有配置？",
-      ConfirmClearAll: "确认清除所有数据？",
+    SubTitle: "所有设置选项",
+
+    Danger: {
+      Reset: {
+        Title: "重置所有设置",
+        SubTitle: "重置所有设置项回默认值",
+        Action: "立即重置",
+        Confirm: "确认重置所有设置？",
+      },
+      Clear: {
+        Title: "清除所有数据",
+        SubTitle: "清除所有聊天、设置数据",
+        Action: "立即清除",
+        Confirm: "确认清除所有聊天、设置数据？",
+      },
    },
    Lang: {
      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
@@ -115,6 +135,11 @@ const cn = {
      SubTitle: "聊天内容的字体大小",
    },

+    InputTemplate: {
+      Title: "用户输入预处理",
+      SubTitle: "用户最新的一条消息会填充到此模板",
+    },
+
    Update: {
      Version: (x: string) => `当前版本：${x}`,
      IsLatest: "已是最新版本",
--- a/app/locales/cs.ts
+++ b/app/locales/cs.ts
@@ -61,13 +61,7 @@ const cs: PartialLocaleType = {
  Settings: {
    Title: "Nastavení",
    SubTitle: "Všechna nastavení",
-    Actions: {
-      ClearAll: "Vymazat všechna data",
-      ResetAll: "Obnovit veškeré nastavení",
-      Close: "Zavřít",
-      ConfirmResetAll: "Jste si jisti, že chcete obnovit všechna nastavení?",
-      ConfirmClearAll: "Jste si jisti, že chcete smazat všechna data?",
-    },
+
    Lang: {
      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
      All: "Všechny jazyky",
--- a/app/locales/de.ts
+++ b/app/locales/de.ts
@@ -61,14 +61,7 @@ const de: PartialLocaleType = {
  Settings: {
    Title: "Einstellungen",
    SubTitle: "Alle Einstellungen",
-    Actions: {
-      ClearAll: "Alle Daten löschen",
-      ResetAll: "Alle Einstellungen zurücksetzen",
-      Close: "Schließen",
-      ConfirmResetAll:
-        "Möchten Sie wirklich alle Konfigurationen zurücksetzen?",
-      ConfirmClearAll: "Möchten Sie wirklich alle Chats zurücksetzen?",
-    },
+
    Lang: {
      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
      All: "Alle Sprachen",
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -18,7 +18,7 @@ const en: LocaleType = {
    ChatItemCount: (count: number) => `${count} messages`,
  },
  Chat: {
-    SubTitle: (count: number) => `${count} messages with ChatGPT`,
+    SubTitle: (count: number) => `${count} messages`,
    Actions: {
      ChatList: "Go To Chat List",
      CompressedHistory: "Compressed History Memory Prompt",
@@ -26,7 +26,19 @@ const en: LocaleType = {
      Copy: "Copy",
      Stop: "Stop",
      Retry: "Retry",
+      Pin: "Pin",
+      PinToastContent: "Pinned 2 messages to contextual prompts",
+      PinToastAction: "View",
      Delete: "Delete",
+      Edit: "Edit",
+    },
+    Commands: {
+      new: "Start a new chat",
+      newm: "Start a new chat with mask",
+      next: "Next Chat",
+      prev: "Previous Chat",
+      clear: "Clear Context",
+      del: "Delete Chat",
    },
    InputActions: {
      Stop: "Stop",
@@ -48,7 +60,7 @@ const en: LocaleType = {
      if (submitKey === String(SubmitKey.Enter)) {
        inputHints += ", Shift + Enter to wrap";
      }
-      return inputHints + ", / to search prompts";
+      return inputHints + ", / to search prompts, : to use commands";
    },
    Send: "Send",
    Config: {
@@ -100,12 +112,19 @@ const en: LocaleType = {
  Settings: {
    Title: "Settings",
    SubTitle: "All Settings",
-    Actions: {
-      ClearAll: "Clear All Data",
-      ResetAll: "Reset All Settings",
-      Close: "Close",
-      ConfirmResetAll: "Are you sure you want to reset all configurations?",
-      ConfirmClearAll: "Are you sure you want to reset all data?",
+    Danger: {
+      Reset: {
+        Title: "Reset All Settings",
+        SubTitle: "Reset all setting items to default",
+        Action: "Reset",
+        Confirm: "Confirm to reset all settings to default?",
+      },
+      Clear: {
+        Title: "Clear All Data",
+        SubTitle: "Clear all messages and settings",
+        Action: "Clear",
+        Confirm: "Confirm to clear all messages and settings?",
+      },
    },
    Lang: {
      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
@@ -116,6 +135,12 @@ const en: LocaleType = {
      Title: "Font Size",
      SubTitle: "Adjust font size of chat content",
    },
+
+    InputTemplate: {
+      Title: "Input Template",
+      SubTitle: "Newest message will be filled to this template",
+    },
+
    Update: {
      Version: (x: string) => `Version: ${x}`,
      IsLatest: "Latest version",
--- a/app/locales/es.ts
+++ b/app/locales/es.ts
@@ -61,13 +61,7 @@ const es: PartialLocaleType = {
  Settings: {
    Title: "Configuración",
    SubTitle: "Todas las configuraciones",
-    Actions: {
-      ClearAll: "Borrar todos los datos",
-      ResetAll: "Restablecer todas las configuraciones",
-      Close: "Cerrar",
-      ConfirmResetAll: "Are you sure you want to reset all configurations?",
-      ConfirmClearAll: "Are you sure you want to reset all chat?",
-    },
+
    Lang: {
      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
      All: "Todos los idiomas",
--- a/app/locales/fr.ts
+++ b/app/locales/fr.ts
@@ -61,14 +61,7 @@ const fr: PartialLocaleType = {
  Settings: {
    Title: "Paramètres",
    SubTitle: "Toutes les configurations",
-    Actions: {
-      ClearAll: "Effacer toutes les données",
-      ResetAll: "Réinitialiser les configurations",
-      Close: "Fermer",
-      ConfirmResetAll:
-        "Êtes-vous sûr de vouloir réinitialiser toutes les configurations?",
-      ConfirmClearAll: "Êtes-vous sûr de vouloir supprimer toutes les données?",
-    },
+
    Lang: {
      Name: "Language", // ATTENTION : si vous souhaitez ajouter une nouvelle traduction, ne traduisez pas cette valeur, laissez-la sous forme de `Language`
      All: "Toutes les langues",
--- a/app/locales/index.ts
+++ b/app/locales/index.ts
@@ -12,6 +12,7 @@ import ru from "./ru";
 import no from "./no";
 import cs from "./cs";
 import ko from "./ko";
+import ar from "./ar";
 import { merge } from "../utils/merge";

 import type { LocaleType } from "./cn";
@@ -32,6 +33,7 @@ const ALL_LANGS = {
  ru,
  cs,
  no,
+  ar,
 };

 export type Lang = keyof typeof ALL_LANGS;
@@ -53,6 +55,7 @@ export const ALL_LANG_OPTIONS: Record<Lang, string> = {
  ru: "Русский",
  cs: "Čeština",
  no: "Nynorsk",
+  ar: "العربية",
 };

 const LANG_KEY = "lang";
--- a/app/locales/it.ts
+++ b/app/locales/it.ts
@@ -61,13 +61,7 @@ const it: PartialLocaleType = {
  Settings: {
    Title: "Impostazioni",
    SubTitle: "Tutte le impostazioni",
-    Actions: {
-      ClearAll: "Cancella tutti i dati",
-      ResetAll: "Resetta tutte le impostazioni",
-      Close: "Chiudi",
-      ConfirmResetAll: "Sei sicuro vuoi cancellare tutte le impostazioni?",
-      ConfirmClearAll: "Sei sicuro vuoi cancellare tutte le chat?",
-    },
+
    Lang: {
      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
      All: "Tutte le lingue",
--- a/app/locales/jp.ts
+++ b/app/locales/jp.ts
@@ -61,13 +61,7 @@ const jp: PartialLocaleType = {
  Settings: {
    Title: "設定",
    SubTitle: "設定オプション",
-    Actions: {
-      ClearAll: "すべてのデータをクリア",
-      ResetAll: "すべてのオプションをリセット",
-      Close: "閉じる",
-      ConfirmResetAll: "すべての設定をリセットしてもよろしいですか？",
-      ConfirmClearAll: "すべてのチャットをリセットしてもよろしいですか？",
-    },
+
    Lang: {
      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
      All: "全ての言語",
--- a/app/locales/ko.ts
+++ b/app/locales/ko.ts
@@ -61,13 +61,7 @@ const ko: PartialLocaleType = {
  Settings: {
    Title: "설정",
    SubTitle: "모든 설정",
-    Actions: {
-      ClearAll: "모든 데이터 지우기",
-      ResetAll: "모든 설정 초기화",
-      Close: "닫기",
-      ConfirmResetAll: "모든 설정을 초기화하시겠습니까?",
-      ConfirmClearAll: "모든 데이터를 지우시겠습니까?",
-    },
+
    Lang: {
      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
      All: "All Languages",
--- a/app/locales/no.ts
+++ b/app/locales/no.ts
@@ -56,11 +56,7 @@ const no: PartialLocaleType = {
  Settings: {
    Title: "Innstillinger",
    SubTitle: "Alle innstillinger",
-    Actions: {
-      ClearAll: "Fjern alle data",
-      ResetAll: "Nullstill innstillinger",
-      Close: "Lukk",
-    },
+
    Lang: {
      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
    },
--- a/app/locales/ru.ts
+++ b/app/locales/ru.ts
@@ -61,13 +61,7 @@ const ru: PartialLocaleType = {
  Settings: {
    Title: "Настройки",
    SubTitle: "Все настройки",
-    Actions: {
-      ClearAll: "Очистить все данные",
-      ResetAll: "Сбросить все настройки",
-      Close: "Закрыть",
-      ConfirmResetAll: "Вы уверены, что хотите сбросить все настройки?",
-      ConfirmClearAll: "Вы уверены, что хотите очистить все данные?",
-    },
+
    Lang: {
      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
      All: "Все языки",
--- a/app/locales/tr.ts
+++ b/app/locales/tr.ts
@@ -61,13 +61,7 @@ const tr: PartialLocaleType = {
  Settings: {
    Title: "Ayarlar",
    SubTitle: "Tüm Ayarlar",
-    Actions: {
-      ClearAll: "Tüm Verileri Temizle",
-      ResetAll: "Tüm Ayarları Sıfırla",
-      Close: "Kapat",
-      ConfirmResetAll: "Tüm ayarları sıfırlamak istediğinizden emin misiniz?",
-      ConfirmClearAll: "Tüm sohbeti sıfırlamak istediğinizden emin misiniz?",
-    },
+
    Lang: {
      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
      All: "Tüm Diller",
--- a/app/locales/tw.ts
+++ b/app/locales/tw.ts
@@ -59,13 +59,7 @@ const tw: PartialLocaleType = {
  Settings: {
    Title: "設定",
    SubTitle: "設定選項",
-    Actions: {
-      ClearAll: "清除所有資料",
-      ResetAll: "重設所有設定",
-      Close: "關閉",
-      ConfirmResetAll: "您確定要重設所有設定嗎？",
-      ConfirmClearAll: "您確定要清除所有数据嗎？",
-    },
+
    Lang: {
      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
      All: "所有语言",
--- a/app/locales/vi.ts
+++ b/app/locales/vi.ts
@@ -61,13 +61,7 @@ const vi: PartialLocaleType = {
  Settings: {
    Title: "Cài đặt",
    SubTitle: "Tất cả cài đặt",
-    Actions: {
-      ClearAll: "Xóa toàn bộ dữ liệu",
-      ResetAll: "Khôi phục cài đặt gốc",
-      Close: "Đóng",
-      ConfirmResetAll: "Bạn chắc chắn muốn thiết lập lại tất cả cài đặt?",
-      ConfirmClearAll: "Bạn chắc chắn muốn thiết lập lại tất cả dữ liệu?",
-    },
+
    Lang: {
      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
      All: "Tất cả ngôn ngữ",
--- a/app/masks/index.ts
+++ b/app/masks/index.ts
@@ -9,7 +9,7 @@ export const BUILTIN_MASK_ID = 100000;

 export const BUILTIN_MASK_STORE = {
  buildinId: BUILTIN_MASK_ID,
-  masks: {} as Record<number, Mask>,
+  masks: {} as Record<number, BuiltinMask>,
  get(id?: number) {
    if (!id) return undefined;
    return this.masks[id] as Mask | undefined;
@@ -21,6 +21,6 @@ export const BUILTIN_MASK_STORE = {
  },
 };

-export const BUILTIN_MASKS: Mask[] = [...CN_MASKS, ...EN_MASKS].map((m) =>
-  BUILTIN_MASK_STORE.add(m),
+export const BUILTIN_MASKS: BuiltinMask[] = [...CN_MASKS, ...EN_MASKS].map(
+  (m) => BUILTIN_MASK_STORE.add(m),
 );
--- a/app/masks/typing.ts
+++ b/app/masks/typing.ts
@@ -1,5 +1,7 @@
+import { ModelConfig } from "../store";
 import { type Mask } from "../store/mask";

-export type BuiltinMask = Omit<Mask, "id"> & {
-  builtin: true;
+export type BuiltinMask = Omit<Mask, "id" | "modelConfig"> & {
+  builtin: Boolean;
+  modelConfig: Partial<ModelConfig>;
 };
--- a/app/store/access.ts
+++ b/app/store/access.ts
@@ -13,6 +13,7 @@ export interface AccessControlStore {
  needCode: boolean;
  hideUserApiKey: boolean;
  openaiUrl: string;
+  hideBalanceQuery: boolean;

  updateToken: (_: string) => void;
  updateCode: (_: string) => void;
@@ -36,6 +37,7 @@ export const useAccessStore = create<AccessControlStore>()(
      needCode: true,
      hideUserApiKey: false,
      openaiUrl: DEFAULT_OPENAI_URL,
+      hideBalanceQuery: false,

      enabledAccessControl() {
        get().fetch();
--- a/app/store/chat.ts
+++ b/app/store/chat.ts
@@ -3,11 +3,15 @@ import { persist } from "zustand/middleware";

 import { trimTopic } from "../utils";

-import Locale from "../locales";
+import Locale, { getLang } from "../locales";
 import { showToast } from "../components/ui-lib";
-import { ModelType } from "./config";
+import { ModelConfig, ModelType, useAppConfig } from "./config";
 import { createEmptyMask, Mask } from "./mask";
-import { StoreKey } from "../constant";
+import {
+  DEFAULT_INPUT_TEMPLATE,
+  DEFAULT_SYSTEM_TEMPLATE,
+  StoreKey,
+} from "../constant";
 import { api, RequestMessage } from "../client/api";
 import { ChatControllerPool } from "../client/controller";
 import { prettyObject } from "../utils/format";
@@ -85,6 +89,7 @@ interface ChatStore {
  newSession: (mask?: Mask) => void;
  deleteSession: (index: number) => void;
  currentSession: () => ChatSession;
+  nextSession: (delta: number) => void;
  onNewMessage: (message: ChatMessage) => void;
  onUserInput: (content: string) => Promise<void>;
  summarizeSession: () => void;
@@ -106,6 +111,29 @@ function countMessages(msgs: ChatMessage[]) {
  return msgs.reduce((pre, cur) => pre + estimateTokenLength(cur.content), 0);
 }

+function fillTemplateWith(input: string, modelConfig: ModelConfig) {
+  const vars = {
+    model: modelConfig.model,
+    time: new Date().toLocaleString(),
+    lang: getLang(),
+    input: input,
+  };
+
+  let output = modelConfig.template ?? DEFAULT_INPUT_TEMPLATE;
+
+  // must contains {{input}}
+  const inputVar = "{{input}}";
+  if (!output.includes(inputVar)) {
+    output += "\n" + inputVar;
+  }
+
+  Object.entries(vars).forEach(([name, value]) => {
+    output = output.replaceAll(`{{${name}}}`, value);
+  });
+
+  return output;
+}
+
 export const useChatStore = create<ChatStore>()(
  persist(
    (set, get) => ({
@@ -158,7 +186,16 @@ export const useChatStore = create<ChatStore>()(
        session.id = get().globalId;

        if (mask) {
-          session.mask = { ...mask };
+          const config = useAppConfig.getState();
+          const globalModelConfig = config.modelConfig;
+
+          session.mask = {
+            ...mask,
+            modelConfig: {
+              ...globalModelConfig,
+              ...mask.modelConfig,
+            },
+          };
          session.topic = mask.name;
        }

@@ -168,6 +205,13 @@ export const useChatStore = create<ChatStore>()(
        }));
      },

+      nextSession(delta) {
+        const n = get().sessions.length;
+        const limit = (x: number) => (x + n) % n;
+        const i = get().currentSessionIndex;
+        get().selectSession(limit(i + delta));
+      },
+
      deleteSession(index) {
        const deletingLastSession = get().sessions.length === 1;
        const deletedSession = get().sessions.at(index);
@@ -238,9 +282,12 @@ export const useChatStore = create<ChatStore>()(
        const session = get().currentSession();
        const modelConfig = session.mask.modelConfig;

+        const userContent = fillTemplateWith(content, modelConfig);
+        console.log("[User Input] after template: ", userContent);
+
        const userMessage: ChatMessage = createMessage({
          role: "user",
-          content,
+          content: userContent,
        });

        const botMessage: ChatMessage = createMessage({
@@ -250,35 +297,25 @@ export const useChatStore = create<ChatStore>()(
          model: modelConfig.model,
        });

-        const systemInfo = createMessage({
-          role: "system",
-          content: `IMPORTANT: You are a virtual assistant powered by the ${
-            modelConfig.model
-          } model, now time is ${new Date().toLocaleString()}}`,
-          id: botMessage.id! + 1,
-        });
-
        // get recent messages
-        const systemMessages = [];
-        // if user define a mask with context prompts, wont send system info
-        if (session.mask.context.length === 0) {
-          systemMessages.push(systemInfo);
-        }
-
        const recentMessages = get().getMessagesWithMemory();
-        const sendMessages = systemMessages.concat(
-          recentMessages.concat(userMessage),
-        );
+        const sendMessages = recentMessages.concat(userMessage);
        const sessionIndex = get().currentSessionIndex;
        const messageIndex = get().currentSession().messages.length + 1;

        // save user's and bot's message
        get().updateCurrentSession((session) => {
-          session.messages = session.messages.concat([userMessage, botMessage]);
+          const savedUserMessage = {
+            ...userMessage,
+            content,
+          };
+          session.messages = session.messages.concat([
+            savedUserMessage,
+            botMessage,
+          ]);
        });

        // make request
-        console.log("[User Input] ", sendMessages);
        api.llm.chat({
          messages: sendMessages,
          config: { ...modelConfig, stream: true },
@@ -350,55 +387,84 @@ export const useChatStore = create<ChatStore>()(
      getMessagesWithMemory() {
        const session = get().currentSession();
        const modelConfig = session.mask.modelConfig;
+        const clearContextIndex = session.clearContextIndex ?? 0;
+        const messages = session.messages.slice();
+        const totalMessageCount = session.messages.length;

-        // wont send cleared context messages
-        const clearedContextMessages = session.messages.slice(
-          session.clearContextIndex ?? 0,
-        );
-        const messages = clearedContextMessages.filter((msg) => !msg.isError);
-        const n = messages.length;
+        // in-context prompts
+        const contextPrompts = session.mask.context.slice();

-        const context = session.mask.context.slice();
-
-        // long term memory
-        if (
-          modelConfig.sendMemory &&
-          session.memoryPrompt &&
-          session.memoryPrompt.length > 0
-        ) {
-          const memoryPrompt = get().getMemoryPrompt();
-          context.push(memoryPrompt);
+        // system prompts, to get close to OpenAI Web ChatGPT
+        // only will be injected if user does not use a mask or set none context prompts
+        const shouldInjectSystemPrompts = contextPrompts.length === 0;
+        const systemPrompts = shouldInjectSystemPrompts
+          ? [
+              createMessage({
+                role: "system",
+                content: fillTemplateWith("", {
+                  ...modelConfig,
+                  template: DEFAULT_SYSTEM_TEMPLATE,
+                }),
+              }),
+            ]
+          : [];
+        if (shouldInjectSystemPrompts) {
+          console.log(
+            "[Global System Prompt] ",
+            systemPrompts.at(0)?.content ?? "empty",
+          );
        }

-        // get short term and unmemorized long term memory
-        const shortTermMemoryMessageIndex = Math.max(
+        // long term memory
+        const shouldSendLongTermMemory =
+          modelConfig.sendMemory &&
+          session.memoryPrompt &&
+          session.memoryPrompt.length > 0 &&
+          session.lastSummarizeIndex <= clearContextIndex;
+        const longTermMemoryPrompts = shouldSendLongTermMemory
+          ? [get().getMemoryPrompt()]
+          : [];
+        const longTermMemoryStartIndex = session.lastSummarizeIndex;
+
+        // short term memory
+        const shortTermMemoryStartIndex = Math.max(
          0,
-          n - modelConfig.historyMessageCount,
+          totalMessageCount - modelConfig.historyMessageCount,
        );
-        const longTermMemoryMessageIndex = session.lastSummarizeIndex;

-        // try to concat history messages
-        const memoryStartIndex = Math.min(
-          shortTermMemoryMessageIndex,
-          longTermMemoryMessageIndex,
-        );
-        const threshold = modelConfig.max_tokens;
+        // lets concat send messages, including 4 parts:
+        // 0. system prompt: to get close to OpenAI Web ChatGPT
+        // 1. long term memory: summarized memory messages
+        // 2. pre-defined in-context prompts
+        // 3. short term memory: latest n messages
+        // 4. newest input message
+        const memoryStartIndex = shouldSendLongTermMemory
+          ? Math.min(longTermMemoryStartIndex, shortTermMemoryStartIndex)
+          : shortTermMemoryStartIndex;
+        // and if user has cleared history messages, we should exclude the memory too.
+        const contextStartIndex = Math.max(clearContextIndex, memoryStartIndex);
+        const maxTokenThreshold = modelConfig.max_tokens;

-        // get recent messages as many as possible
+        // get recent messages as much as possible
        const reversedRecentMessages = [];
        for (
-          let i = n - 1, count = 0;
-          i >= memoryStartIndex && count < threshold;
+          let i = totalMessageCount - 1, tokenCount = 0;
+          i >= contextStartIndex && tokenCount < maxTokenThreshold;
          i -= 1
        ) {
          const msg = messages[i];
          if (!msg || msg.isError) continue;
-          count += estimateTokenLength(msg.content);
+          tokenCount += estimateTokenLength(msg.content);
          reversedRecentMessages.push(msg);
        }

-        // concat
-        const recentMessages = context.concat(reversedRecentMessages.reverse());
+        // concat all messages
+        const recentMessages = [
+          ...systemPrompts,
+          ...longTermMemoryPrompts,
+          ...contextPrompts,
+          ...reversedRecentMessages.reverse(),
+        ];

        return recentMessages;
      },
--- a/app/store/config.ts
+++ b/app/store/config.ts
@@ -1,7 +1,7 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { getClientConfig } from "../config/client";
-import { StoreKey } from "../constant";
+import { DEFAULT_INPUT_TEMPLATE, StoreKey } from "../constant";

 export enum SubmitKey {
  Enter = "Enter",
@@ -39,6 +39,7 @@ export const DEFAULT_CONFIG = {
    sendMemory: true,
    historyMessageCount: 4,
    compressMessageLengthThreshold: 1000,
+    template: DEFAULT_INPUT_TEMPLATE,
  },
 };

@@ -176,14 +177,16 @@ export const useAppConfig = create<ChatConfigStore>()(
    }),
    {
      name: StoreKey.Config,
-      version: 2,
+      version: 3.2,
      migrate(persistedState, version) {
-        if (version === 2) return persistedState as any;
+        if (version === 3.2) return persistedState as any;

        const state = persistedState as ChatConfig;
        state.modelConfig.sendMemory = true;
        state.modelConfig.historyMessageCount = 4;
        state.modelConfig.compressMessageLengthThreshold = 1000;
+        state.modelConfig.frequency_penalty = 0;
+        state.modelConfig.template = DEFAULT_INPUT_TEMPLATE;
        state.dontShowMaskSplashScreen = false;

        return state;
--- a/app/store/mask.ts
+++ b/app/store/mask.ts
@@ -3,7 +3,7 @@ import { persist } from "zustand/middleware";
 import { BUILTIN_MASKS } from "../masks";
 import { getLang, Lang } from "../locales";
 import { DEFAULT_TOPIC, ChatMessage } from "./chat";
-import { ModelConfig, ModelType, useAppConfig } from "./config";
+import { ModelConfig, useAppConfig } from "./config";
 import { StoreKey } from "../constant";

 export type Mask = {
@@ -89,7 +89,18 @@ export const useMaskStore = create<MaskStore>()(
        const userMasks = Object.values(get().masks).sort(
          (a, b) => b.id - a.id,
        );
-        return userMasks.concat(BUILTIN_MASKS);
+        const config = useAppConfig.getState();
+        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);
--- a/app/store/sync.ts
+++ b/app/store/sync.ts
@@ -0,0 +1,87 @@
+import { Updater } from "../typing";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { StoreKey } from "../constant";
+
+export interface WebDavConfig {
+  server: string;
+  username: string;
+  password: string;
+}
+
+export interface SyncStore {
+  webDavConfig: WebDavConfig;
+  lastSyncTime: number;
+
+  update: Updater<WebDavConfig>;
+  check: () => Promise<boolean>;
+
+  path: (path: string) => string;
+  headers: () => { Authorization: string };
+}
+
+const FILE = {
+  root: "/chatgpt-next-web/",
+};
+
+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,
+    },
+  ),
+);
--- a/app/styles/globals.scss
+++ b/app/styles/globals.scss
@@ -304,6 +304,9 @@ pre {
  &:hover {
    filter: brightness(0.9);
  }
+  &:focus {
+    filter: brightness(0.95);
+  }
 }

 .error {
--- a/app/styles/markdown.scss
+++ b/app/styles/markdown.scss
@@ -844,6 +844,7 @@
  font-size: 85%;
  line-height: 1.45;
  border-radius: 6px;
+  direction: ltr;
 }

 .markdown-body pre code,
--- a/app/styles/window.scss
+++ b/app/styles/window.scss
@@ -24,7 +24,6 @@

  .window-header-sub-title {
    font-size: 14px;
-    margin-top: 5px;
  }
 }

@@ -32,6 +31,6 @@
  display: inline-flex;
 }

-.window-action-button {
+.window-action-button:not(:first-child) {
  margin-left: 10px;
 }
--- a/app/utils.ts
+++ b/app/utils.ts
@@ -8,7 +8,12 @@ export function trimTopic(topic: string) {

 export async function copyToClipboard(text: string) {
  try {
-    await navigator.clipboard.writeText(text);
+    if (window.__TAURI__) {
+      window.__TAURI__.writeText(text);
+    } else {
+      await navigator.clipboard.writeText(text);
+    }
+
    showToast(Locale.Copy.Success);
  } catch (error) {
    const textArea = document.createElement("textarea");
@@ -152,6 +157,7 @@ export function autoGrowTextArea(dom: HTMLTextAreaElement) {
  const width = getDomContentWidth(dom);
  measureDom.style.width = width + "px";
  measureDom.innerText = dom.value !== "" ? dom.value : "1";
+  measureDom.style.fontSize = dom.style.fontSize;
  const endWithEmptyLine = dom.value.endsWith("\n");
  const height = parseFloat(window.getComputedStyle(measureDom).height);
  const singleLineHeight = parseFloat(
--- a/docs/vercel-cn.md
+++ b/docs/vercel-cn.md
@@ -14,7 +14,7 @@

 ![vercel-create-3](./images/vercel/vercel-create-3.jpg)
 1. 在项目配置页，点开 Environmane Variables 开始配置环境变量；
-2. 依次新增名为 OPENAI_API_KEY 和 CODE 的环境变量；
+2. 依次新增名为 OPENAI_API_KEY 和 CODE ([访问密码](https://github.com/Yidadaa/ChatGPT-Next-Web/blob/357296986609c14de10bf210871d30e2f67a8784/docs/faq-cn.md#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F-code-%E6%98%AF%E4%BB%80%E4%B9%88%E5%BF%85%E9%A1%BB%E8%AE%BE%E7%BD%AE%E5%90%97)) 的环境变量；
 3. 填入环境变量对应的值；
 4. 点击 Add 确认增加环境变量；
 5. 请确保你添加了 OPENAI_API_KEY，否则无法使用；
@@ -36,4 +36,4 @@
 ![vercel-redeploy](./images/vercel/vercel-redeploy.jpg)
 1. 进入 Vercel 项目内部控制台，点击顶部的 Deployments 按钮；
 2. 选择列表最顶部一条的右侧按钮；
-3. 点击 Redeploy 即可重新部署。
+3. 点击 Redeploy 即可重新部署。
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -63,7 +63,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2c3d816ce6f0e2909a96830d6911c2aff044370b1ef92d7f267b43bae5addedd"
 dependencies = [
 "atk-sys",
- "bitflags",
+ "bitflags 1.3.2",
 "glib",
 "libc",
 ]
@@ -114,12 +114,27 @@ version = "0.21.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a4a4ddaa51a5bc52a6948f74c06d20aaaddb71924eab79b8c97a8c556e942d6a"

+[[package]]
+name = "bincode"
+version = "1.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b1f45e9417d87227c7a56d22e471c6206462cba514c7590c09aff4cf6d1ddcad"
+dependencies = [
+ "serde",
+]
+
 [[package]]
 name = "bitflags"
 version = "1.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"

+[[package]]
+name = "bitflags"
+version = "2.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6dbe3c979c178231552ecba20214a8272df4e09f232a87aef4320cf06539aded"
+
 [[package]]
 name = "block"
 version = "0.1.6"
@@ -196,7 +211,7 @@ version = "0.15.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c76ee391b03d35510d9fa917357c7f1855bd9a6659c95a1b392e33f49b3369bc"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "cairo-sys-rs",
 "glib",
 "libc",
@@ -280,6 +295,7 @@ dependencies = [
 "serde_json",
 "tauri",
 "tauri-build",
+ "tauri-plugin-window-state",
 ]

 [[package]]
@@ -301,7 +317,7 @@ version = "0.24.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f425db7937052c684daec3bd6375c8abe2d146dca4b8b143d6db777c39138f3a"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "block",
 "cocoa-foundation",
 "core-foundation",
@@ -317,7 +333,7 @@ version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "931d3837c286f56e3c58423ce4eba12d08db2374461a785c86f672b08b5650d6"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "block",
 "core-foundation",
 "core-graphics-types",
@@ -370,7 +386,7 @@ version = "0.22.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2581bbab3b8ffc6fcbd550bf46c355135d16e9ff2a6ea032ad6b9bf1d7efe4fb"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "core-foundation",
 "core-graphics-types",
 "foreign-types",
@@ -383,7 +399,7 @@ version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3a68b68b3446082644c91ac778bf50cd4104bfb002b5a6a7c44cca5a2c70788b"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "core-foundation",
 "foreign-types",
 "libc",
@@ -802,7 +818,7 @@ version = "0.15.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a6e05c1f572ab0e1f15be94217f0dc29088c248b14f792a5ff0af0d84bcda9e8"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "cairo-rs",
 "gdk-pixbuf",
 "gdk-sys",
@@ -818,7 +834,7 @@ version = "0.15.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ad38dd9cc8b099cceecdf41375bb6d481b1b5a7cd5cd603e10a69a9383f8619a"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "gdk-pixbuf-sys",
 "gio",
 "glib",
@@ -933,7 +949,7 @@ version = "0.15.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "68fdbc90312d462781a395f7a16d96a2b379bb6ef8cd6310a2df272771c4283b"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "futures-channel",
 "futures-core",
 "futures-io",
@@ -963,7 +979,7 @@ version = "0.15.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "edb0306fbad0ab5428b0ca674a23893db909a98582969c9b537be4ced78c505d"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "futures-channel",
 "futures-core",
 "futures-executor",
@@ -1039,7 +1055,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "92e3004a2d5d6d8b5057d2b57b3712c9529b62e82c77f25c1fecde1fd5c23bd0"
 dependencies = [
 "atk",
- "bitflags",
+ "bitflags 1.3.2",
 "cairo-rs",
 "field-offset",
 "futures-channel",
@@ -1298,7 +1314,7 @@ version = "0.16.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "bf053e7843f2812ff03ef5afe34bb9c06ffee120385caad4f6b9967fcd37d41c"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "glib",
 "javascriptcore-rs-sys",
 ]
@@ -1528,7 +1544,7 @@ version = "0.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2032c77e030ddee34a6787a64166008da93f6a352b629261d0fee232b8742dd4"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "jni-sys",
 "ndk-sys",
 "num_enum",
@@ -1699,11 +1715,11 @@ dependencies = [

 [[package]]
 name = "openssl"
-version = "0.10.52"
+version = "0.10.55"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "01b8574602df80f7b85fdfc5392fa884a4e3b3f4f35402c070ab34c3d3f78d56"
+checksum = "345df152bc43501c5eb9e4654ff05f794effb78d4efe3d53abc158baddc0703d"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "cfg-if",
 "foreign-types",
 "libc",
@@ -1731,9 +1747,9 @@ checksum = "ff011a302c396a5197692431fc1948019154afc178baf7d8e37367442a4601cf"

 [[package]]
 name = "openssl-sys"
-version = "0.9.87"
+version = "0.9.90"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8e17f59264b2809d77ae94f0e1ebabc434773f370d6ca667bd223ea10e06cc7e"
+checksum = "374533b0e45f3a7ced10fcaeccca020e66656bc03dac384f852e4e5a7a8104a6"
 dependencies = [
 "cc",
 "libc",
@@ -1753,7 +1769,7 @@ version = "0.15.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "22e4045548659aee5313bde6c582b0d83a627b7904dd20dc2d9ef0895d414e4f"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "glib",
 "libc",
 "once_cell",
@@ -1943,7 +1959,7 @@ version = "0.17.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "aaeebc51f9e7d2c150d3f3bfeb667f2aa985db5ef1e3d212847bdedb488beeaa"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "crc32fast",
 "fdeflate",
 "flate2",
@@ -2125,7 +2141,7 @@ version = "0.2.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fb5a58c1855b4b6819d59012155603f0b22ad30cad752600aadfcb695265519a"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 ]

 [[package]]
@@ -2134,7 +2150,7 @@ version = "0.3.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "567664f262709473930a4bf9e51bf2ebf3348f2e748ccc50dea20646858f8f29"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 ]

 [[package]]
@@ -2219,7 +2235,7 @@ version = "0.37.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "acf8729d8542766f1b2cf77eb034d52f40d375bb8b615d0b147089946e16613d"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "errno",
 "io-lifetimes",
 "libc",
@@ -2281,7 +2297,7 @@ version = "2.9.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1fc758eb7bffce5b308734e9b0c1468893cae9ff70ebf13e7090be8dcbcc83a8"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "core-foundation",
 "core-foundation-sys",
 "libc",
@@ -2304,7 +2320,7 @@ version = "0.22.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "df320f1889ac4ba6bc0cdc9c9af7af4bd64bb927bccdf32d81140dc1f9be12fe"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "cssparser",
 "derive_more",
 "fxhash",
@@ -2503,7 +2519,7 @@ version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b2b4d76501d8ba387cf0fefbe055c3e0a59891d09f0f995ae4e4b16f6b60f3c0"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "gio",
 "glib",
 "libc",
@@ -2517,7 +2533,7 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "009ef427103fcb17f802871647a7fa6c60cbb654b4c4e4c0ac60a31c5f6dc9cf"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "gio-sys",
 "glib-sys",
 "gobject-sys",
@@ -2626,7 +2642,7 @@ version = "0.16.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "dd3cde9c0cd2b872616bba26b818e0d6469330196869d7e5000dba96ce9431df"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "cairo-rs",
 "cc",
 "cocoa",
@@ -2806,6 +2822,20 @@ dependencies = [
 "tauri-utils",
 ]

+[[package]]
+name = "tauri-plugin-window-state"
+version = "0.1.0"
+source = "git+https://github.com/tauri-apps/plugins-workspace?branch=v1#7b9d7a1d8896c213998949a423d5835e8e2734c6"
+dependencies = [
+ "bincode",
+ "bitflags 2.3.2",
+ "log",
+ "serde",
+ "serde_json",
+ "tauri",
+ "thiserror",
+]
+
 [[package]]
 name = "tauri-runtime"
 version = "0.13.0"
@@ -3313,7 +3343,7 @@ version = "0.18.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b8f859735e4a452aeb28c6c56a852967a8a76c8eb1cc32dbf931ad28a13d6370"
 dependencies = [
- "bitflags",
+ "bitflags 1.3.2",
 "cairo-rs",
 "gdk",
 "gdk-sys",
@@ -3338,7 +3368,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4d76ca6ecc47aeba01ec61e480139dda143796abcae6f83bcddf50d6b5b1dcf3"
 dependencies = [
 "atk-sys",
- "bitflags",
+ "bitflags 1.3.2",
 "cairo-sys-rs",
 "gdk-pixbuf-sys",
 "gdk-sys",
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -17,7 +17,7 @@ tauri-build = { version = "1.3.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.3.0", features = ["clipboard-all", "shell-open", "updater", "window-close", "window-hide", "window-maximize", "window-minimize", "window-set-icon", "window-set-ignore-cursor-events", "window-set-resizable", "window-show", "window-start-dragging", "window-unmaximize", "window-unminimize"] }
+tauri = { version = "1.3.0", features = ["clipboard-all", "dialog-all", "shell-open", "updater", "window-close", "window-hide", "window-maximize", "window-minimize", "window-set-icon", "window-set-ignore-cursor-events", "window-set-resizable", "window-show", "window-start-dragging", "window-unmaximize", "window-unminimize"] }
 tauri-plugin-window-state = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }

 [features]
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -4,11 +4,12 @@
    "beforeBuildCommand": "yarn export",
    "beforeDevCommand": "yarn export:dev",
    "devPath": "http://localhost:3000",
-    "distDir": "../out"
+    "distDir": "../out",
+    "withGlobalTauri": true
  },
  "package": {
    "productName": "chatgpt-next-web",
-    "version": "2.8.2"
+    "version": "2.8.5"
  },
  "tauri": {
    "allowlist": {
@@ -17,8 +18,18 @@
        "all": false,
        "open": true
      },
+      "dialog": {
+        "all": true,
+        "ask": true,
+        "confirm": true,
+        "message": true,
+        "open": true,
+        "save": true
+      },
      "clipboard": {
-        "all": true
+        "all": true,
+        "writeText": true,
+        "readText": true
      },
      "window": {
        "all": false,
Author	SHA1	Message	Date
Yifei Zhang	7748a980f9	Merge pull request #2185 from Yidadaa/bugfix-0628 feat: many ux improvments	2023-06-29 01:32:57 +08:00
Yidadaa	b044e274aa	feat: close #2136 click avatar to edit message	2023-06-29 01:31:27 +08:00
Yidadaa	6c3d4a11cc	feat: close #2141 danger zone	2023-06-29 01:09:51 +08:00
Yidadaa	98afd5516b	feat: close #1994 add clipboard write api	2023-06-29 00:27:18 +08:00
Yidadaa	ea6926cad3	feat: replace window.prompt with showPrompt	2023-06-29 00:09:56 +08:00
Yidadaa	3298961748	feat: replace window.confirm with showConfirm	2023-06-28 23:40:39 +08:00
Yidadaa	0140f771c6	feat: close #2175 use default api host if endpoint is empty	2023-06-28 23:12:35 +08:00
Yidadaa	64c4f512ce	fixup: #2149 chat action button style	2023-06-28 01:15:55 +08:00
Yidadaa	5b1d45c1a9	fix: #2149 try to fix chat action button style	2023-06-28 01:09:25 +08:00
Yifei Zhang	efbd1c15a9	Merge pull request #2174 from Yidadaa/bugfix-0627 fix: #2149 try to fix chat action button style	2023-06-28 01:03:19 +08:00
Yidadaa	bce74890dc	fix: #2149 try to fix chat action button style	2023-06-28 01:02:56 +08:00
Yifei Zhang	eb93a43d13	Merge pull request #2173 from Yidadaa/bugfix-0627 feat: improve chat commands	2023-06-28 00:46:38 +08:00
Yidadaa	1dd75b63de	feat: [WIP] support webdav	2023-06-28 00:34:01 +08:00
Yidadaa	6caf79121b	feat: improve chat commands	2023-06-27 23:39:27 +08:00
Yifei Zhang	5cdd34a388	Merge pull request #2171 from Yidadaa/bugfix-0627 fix: #2149 try to fix ChatAction style on ios mobile	2023-06-27 23:31:04 +08:00
Yidadaa	38c8ee8cd2	feat: improve message item buttons style	2023-06-27 23:29:53 +08:00
Yidadaa	d5c33a1183	fix: #2149 try to fix ChatAction style on ios mobile	2023-06-27 23:07:12 +08:00
Yifei Zhang	058e28911a	fix: #2135 disable cmd + arrow to change session	2023-06-26 18:29:46 +08:00
Yifei Zhang	25a3bb351d	Merge pull request #2143 from yorunning/fix2 fix: alignment of mobile settings page title.	2023-06-26 13:27:00 +08:00
Yifei Zhang	1607640bed	Merge pull request #2145 from Yidadaa/bugfix-0626 feat: #2144 improve input template	2023-06-26 13:21:48 +08:00
Yidadaa	5f0cda829f	feat: #2144 improve input template	2023-06-26 13:18:59 +08:00
Yorun	b003a374b8	fix: alignment of mobile settings page title.	2023-06-26 04:16:06 +00:00
Yifei Zhang	5f7c262759	Merge pull request #2134 from Yidadaa/bugfix-0625 fix: input-range style	2023-06-26 01:51:55 +08:00
Yidadaa	f3ab6b27c9	fix: input-range style	2023-06-26 01:51:35 +08:00
Yifei Zhang	d62eb56886	Merge pull request #2133 from quzard/fix_pin_bug Fix Pin Message	2023-06-26 01:43:20 +08:00
quzard	c2724c6aad	Fix Pin Message: when userMessageIndex === 0, pinning a message was not possible.	2023-06-26 01:36:27 +08:00
Yifei Zhang	0cde1683b6	Update window.scss	2023-06-26 01:35:38 +08:00
Yifei Zhang	128f596f93	Update tauri.conf.json	2023-06-26 01:31:01 +08:00
Yifei Zhang	27fae8eed0	Merge pull request #2132 from Yidadaa/bugfix-0625 feat: align chat page title center on mobile screen	2023-06-26 01:28:56 +08:00
Yidadaa	82ec4474c2	feat: align chat page title center on mobile screen	2023-06-26 01:27:36 +08:00
Yifei Zhang	0d85dae239	Merge pull request #2131 from Yidadaa/bugfix-0625 feat: close #1615 pin messages to contextual prompts	2023-06-26 00:40:07 +08:00
Yidadaa	7893693706	feat: close #1615 pin messages to contextual prompts	2023-06-26 00:21:58 +08:00
Yidadaa	25ce6af36e	feat: new chat message actions style	2023-06-25 23:53:22 +08:00
Yifei Zhang	c0269254e8	Merge pull request #2129 from Constaline/main feat: add "Hide_Balance_Query" environment variable	2023-06-25 22:01:27 +08:00
Constaline	2f2aefd48e	fix: typo	2023-06-25 21:33:22 +08:00
Constaline	c05de45d99	feat: add "Hide_Balance_Query" environment variable	2023-06-25 20:20:36 +08:00
Yifei Zhang	8f66da1128	Merge pull request #2119 from Yidadaa/bugfix-0624 chore: delete chat button position	2023-06-24 23:54:14 +08:00
Yidadaa	b5eaa8272b	chore: delete chat button position	2023-06-24 23:53:37 +08:00
Yifei Zhang	7ee062e1de	Merge pull request #2118 from Yidadaa/bugfix-0624 feat: #2013 #628 switch model button & chat commands	2023-06-24 23:40:54 +08:00
Yidadaa	8915af9b6d	fixup	2023-06-24 23:39:38 +08:00
Yidadaa	ae1ef3215b	feat: close #628 add chat commands	2023-06-24 23:38:11 +08:00
Yidadaa	5d06fa217c	feat: close #2013 add switch model button to chat actions	2023-06-24 22:41:13 +08:00
Yidadaa	50b1f7db12	feat: right-click to copy message to user input	2023-06-24 22:32:46 +08:00
Yifei Zhang	fb82806956	Merge pull request #2117 from JunJD/优化useScrollToBottom refactor: 优化 useScrollToBottom	2023-06-24 22:25:45 +08:00
Yifei Zhang	0658a93962	Merge pull request #2116 from Zizwar/main Added support for Arabic language and right-to-left direction	2023-06-24 18:37:52 +08:00
Yifei Zhang	f33be37070	Update constant.ts	2023-06-24 16:50:05 +08:00
dingjunjie	9278d7f851	refactor: 优化 useScrollToBottom	2023-06-24 16:37:29 +08:00
Yifei Zhang	35ba898c97	Merge pull request #2112 from songxiaocheng/PR/history-message-count fix: #2111 make "Attached Messages Count" working	2023-06-24 14:34:48 +08:00
Zizwar	15f8d13d81	Set markdown-body RTL for Arabic text	2023-06-24 05:53:58 +00:00
Zizwar	946e508e8f	Support left to right in language arabic	2023-06-24 05:10:34 +00:00
Zizwar	35b4125b98	Added support Arabic language	2023-06-24 04:30:52 +00:00
Xiaocheng Song	91d8f9d73e	fix: #2111 make "Attached Messages Count" working	2023-06-24 05:53:39 +08:00
Yifei Zhang	c636993989	Merge pull request #2110 from Yidadaa/bugfix-0623 doc: #695 how to use a proxy with password in docker	2023-06-24 00:30:17 +08:00
Yidadaa	65a24c16bc	doc: #695 how to use a proxy with password in docker	2023-06-24 00:29:47 +08:00
Yifei Zhang	15ce114440	Merge pull request #2109 from Yidadaa/bugfix-0623 feat: close #1789 add user input template	2023-06-24 00:20:05 +08:00
Yidadaa	1722f75dcb	fixup	2023-06-24 00:18:27 +08:00
Yidadaa	be597a551d	feat: #close 1789 add user input template	2023-06-24 00:07:46 +08:00
Yifei Zhang	56bc945335	Merge pull request #2107 from Yidadaa/bugfix-0623 fix: #2087 chat box font size use global config	2023-06-23 20:58:09 +08:00
Yidadaa	fa9ceb5875	fix: #2087 chat box font size use global config	2023-06-23 20:57:43 +08:00
Yifei Zhang	0ccf5a16c7	Merge pull request #2106 from Yidadaa/bugfix-0623 feat: close #2025 just use a smaller to-bottom threshold	2023-06-23 20:53:28 +08:00
Yidadaa	93c666b03d	feat: close #2025 just use a smaller to-bottom threshold	2023-06-23 20:53:08 +08:00
Yifei Zhang	d5c28b506c	Update README.md	2023-06-23 20:21:41 +08:00
Yifei Zhang	3318f01aa1	Merge pull request #2099 from johan456789/patch-1 add explanation and link to FAQ	2023-06-23 13:20:02 +08:00
Tsung-Han Yu	1641019091	add explanation and link to FAQ	2023-06-23 05:54:39 +08:00
Yifei Zhang	3572969866	Merge pull request #2096 from Yidadaa/dependabot/cargo/src-tauri/openssl-0.10.55 chore(deps): bump openssl from 0.10.52 to 0.10.55 in /src-tauri	2023-06-22 17:43:41 +08:00
Yifei Zhang	ad1fe8762b	Merge pull request #2092 from PaRaD1SE98/main fix: migrate modelConfig state	2023-06-22 11:31:46 +08:00
dependabot[bot]	c9c3e32a78	chore(deps): bump openssl from 0.10.52 to 0.10.55 in /src-tauri Bumps [openssl](https://github.com/sfackler/rust-openssl) from 0.10.52 to 0.10.55. - [Release notes](https://github.com/sfackler/rust-openssl/releases) - [Commits](https://github.com/sfackler/rust-openssl/compare/openssl-v0.10.52...openssl-v0.10.55) --- updated-dependencies: - dependency-name: openssl dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2023-06-21 22:57:40 +00:00
PaRaD1SE98	f4c99c9cf7	fix: migrate modelConfig state	2023-06-22 02:11:07 +09:00
Yifei Zhang	57447c24c8	Update tauri.conf.json	2023-06-21 15:36:17 +08:00
				`@@ -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 xlink:href="#path_0"></use></mask><g mask="url(#bg-mask-0)" ><path id="路径 1" style="fill:#333333; opacity:1;" d="M13.9967,8.00337c0,-0.81625 -0.1569,-1.59615 -0.4707,-2.3397c-0.30307,-0.71824 -0.73117,-1.3542 -1.2843,-1.90789c-0.55287,-0.55348 -1.18783,-0.98185 -1.9049,-1.28512c-0.74182,-0.31375 -1.51963,-0.47062 -2.33343,-0.47062c-0.81634,0 -1.59621,0.15693 -2.3396,0.47079c-0.71828,0.30325 -1.35419,0.73165 -1.90774,1.2852c-0.55355,0.55354 -0.98195,1.18945 -1.2852,1.90774c-0.31386,0.74339 -0.47079,1.52326 -0.47079,2.3396c0,0.8138 0.15687,1.59161 0.47062,2.33343c0.30327,0.71707 0.73164,1.35203 1.28512,1.9049c0.55369,0.55313 1.18965,0.98123 1.90789,1.2843c0.74355,0.3138 1.52345,0.4707 2.3397,0.4707c0.81371,0 1.59155,-0.15683 2.33353,-0.4705c0.717,-0.30313 1.35203,-0.7312 1.9051,-1.2842c0.553,-0.55307 0.98107,-1.1881 1.2842,-1.9051c0.31367,-0.74198 0.4705,-1.51982 0.4705,-2.33353zM15.33,8.00337c0,0.99387 -0.1919,1.94478 -0.5757,2.85273c-0.37067,0.87673 -0.89383,1.65297 -1.5695,2.3287c-0.67573,0.67567 -1.45197,1.19883 -2.3287,1.5695c-0.90795,0.3838 -1.85886,0.5757 -2.85273,0.5757c-0.99612,0 -1.94882,-0.19183 -2.8581,-0.5755c-0.8781,-0.3706 -1.65537,-0.89377 -2.33181,-1.5695c-0.67631,-0.6756 -1.19992,-1.45187 -1.57081,-2.3288c-0.38396,-0.90784 -0.57594,-1.85878 -0.57594,-2.85283c0,-0.99629 0.19192,-1.94903 0.57577,-2.8582c0.37081,-0.87829 0.89439,-1.6556 1.57074,-2.33195c0.67635,-0.67635 1.45367,-1.19993 2.33195,-1.57074c0.90917,-0.38385 1.86191,-0.57577 2.8582,-0.57577c0.99405,0 1.94499,0.19198 2.85283,0.57594c0.87693,0.37089 1.6532,0.8945 2.3288,1.57081c0.67573,0.67644 1.1989,1.45371 1.5695,2.33181c0.38367,0.90928 0.5755,1.86198 0.5755,2.8581z"></path><path id="路径 2" style="fill:#333333; opacity:1;" d="M5.4714,4.5286l6,6c0.03093,0.03093 0.05857,0.0646 0.0829,0.101c0.02433,0.0364 0.04487,0.07483 0.0616,0.1153c0.01673,0.0404 0.0294,0.08207 0.038,0.125c0.00853,0.04293 0.0128,0.0863 0.0128,0.1301c0,0.0438 -0.00427,0.08717 -0.0128,0.1301c-0.0086,0.04293 -0.02127,0.0846 -0.038,0.125c-0.01673,0.04047 -0.03727,0.0789 -0.0616,0.1153c-0.02433,0.0364 -0.05197,0.07007 -0.0829,0.101c-0.03093,0.03093 -0.0646,0.05857 -0.101,0.0829c-0.0364,0.02433 -0.07483,0.04487 -0.1153,0.0616c-0.0404,0.01673 -0.08207,0.0294 -0.125,0.038c-0.04293,0.00853 -0.0863,0.0128 -0.1301,0.0128c-0.0438,0 -0.08717,-0.00427 -0.1301,-0.0128c-0.04293,-0.0086 -0.0846,-0.02127 -0.125,-0.038c-0.04047,-0.01673 -0.0789,-0.03727 -0.1153,-0.0616c-0.0364,-0.02433 -0.07007,-0.05197 -0.101,-0.0829l-6,-6c-0.03095,-0.03095 -0.05859,-0.06463 -0.08291,-0.10102c-0.02432,-0.0364 -0.04486,-0.07482 -0.06161,-0.11526c-0.01675,-0.04044 -0.0294,-0.08213 -0.03794,-0.12506c-0.00854,-0.04293 -0.01281,-0.08629 -0.01281,-0.13006c0,-0.04377 0.00427,-0.08713 0.01281,-0.13006c0.00854,-0.04293 0.02119,-0.08462 0.03794,-0.12506c0.01675,-0.04045 0.03729,-0.07887 0.06161,-0.11526c0.02432,-0.0364 0.05196,-0.07007 0.08291,-0.10102c0.03095,-0.03095 0.06462,-0.05859 0.10102,-0.08291c0.03639,-0.02432 0.07481,-0.04486 0.11526,-0.06161c0.04044,-0.01675 0.08213,-0.0294 0.12506,-0.03794c0.04293,-0.00854 0.08629,-0.01281 0.13006,-0.01281c0.04377,0 0.08713,0.00427 0.13006,0.01281c0.04293,0.00854 0.08462,0.02119 0.12506,0.03794c0.04044,0.01675 0.07886,0.03729 0.11526,0.06161c0.03639,0.02432 0.07007,0.05196 0.10102,0.08291z"></path></g></g><defs><rect id="path_0" x="0" y="0" width="16" height="16" /></defs></svg>