Merge remote-tracking branch 'upstream/main'

2025-10-12 04:53:44 +08:00 · 2023-06-30 09:55:24 +02:00
parent 959d263b92 5d6e7de667
commit c6644bfcaa
99 changed files with 3518 additions and 1038 deletions
--- a/app/api/auth.ts
+++ b/app/api/auth.ts
@@ -2,7 +2,6 @@ import { NextRequest } from "next/server";
 import { getServerSideConfig } from "../config/server";
 import md5 from "spark-md5";
 import { ACCESS_CODE_PREFIX } from "../constant";
-import { OPENAI_URL } from "./common";

 function getIP(req: NextRequest) {
  let ip = req.ip ?? req.headers.get("x-real-ip");
--- a/app/api/common.ts
+++ b/app/api/common.ts
@@ -43,6 +43,8 @@ export async function requestOpenai(req: NextRequest) {
    cache: "no-store",
    method: req.method,
    body: req.body,
+    // @ts-ignore
+    duplex: "half",
    signal: controller.signal,
  };

--- 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/api/openai/[...path]/route.ts
+++ b/app/api/openai/[...path]/route.ts
@@ -12,6 +12,10 @@ async function handle(
 ) {
  console.log("[OpenAI Route] params ", params);

+  if (req.method === "OPTIONS") {
+    return NextResponse.json({ body: "OK" }, { status: 200 });
+  }
+
  const subpath = params.path.join("/");

  if (!ALLOWD_PATH.has(subpath)) {
--- a/app/client/api.ts
+++ b/app/client/api.ts
@@ -1,3 +1,4 @@
+import { getClientConfig } from "../config/client";
 import { ACCESS_CODE_PREFIX } from "../constant";
 import { ChatMessage, ModelType, useAccessStore } from "../store";
 import { ChatGPTApi } from "./platforms/openai";
@@ -93,7 +94,11 @@ export class ClientApi {
    // Please do not modify this message

    console.log("[Share]", msgs);
-    const res = await fetch("/sharegpt", {
+    const clientConfig = getClientConfig();
+    const proxyUrl = "/sharegpt";
+    const rawUrl = "https://sharegpt.com/api/conversations";
+    const shareUrl = clientConfig?.isApp ? rawUrl : proxyUrl;
+    const res = await fetch(shareUrl, {
      body: JSON.stringify({
        avatarUrl,
        items: msgs,
--- 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);
    }
@@ -42,6 +49,7 @@ export class ChatGPTApi implements LLMApi {
      model: modelConfig.model,
      temperature: modelConfig.temperature,
      presence_penalty: modelConfig.presence_penalty,
+      frequency_penalty: modelConfig.frequency_penalty,
    };

    console.log("[Request] openai payload: ", requestPayload);
--- 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,277 @@
    }
  }
 }
+
+.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;
+  }
+
+  &:hover {
+    .chat-message-actions {
+      opacity: 1;
+      transform: translateY(0px);
+      max-width: 100%;
+      height: 40px;
+    }
+
+    .chat-message-action-date {
+      opacity: 0.2;
+    }
+  }
+}
+
+.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;
+
+  .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 0.15s;
+    transform: translateX(-5px) scale(0.9) translateY(30px);
+    opacity: 0;
+    height: 0;
+    max-width: 0;
+    position: absolute;
+    left: 0;
+    z-index: 2;
+
+    .chat-input-actions {
+      display: flex;
+      flex-wrap: nowrap;
+    }
+  }
+}
+
+.chat-message-action-date {
+  font-size: 12px;
+  opacity: 0.2;
+  white-space: nowrap;
+  transition: all ease 0.6s;
+  color: var(--black);
+  text-align: right;
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 10px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.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
@@ -1,5 +1,11 @@
 import { useDebouncedCallback } from "use-debounce";
-import React, { useState, useRef, useEffect, useLayoutEffect } from "react";
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useMemo,
+  useCallback,
+} from "react";

 import SendWhiteIcon from "../icons/send-white.svg";
 import BrainIcon from "../icons/brain.svg";
@@ -15,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,
@@ -32,6 +42,7 @@ import {
  Theme,
  useAppConfig,
  DEFAULT_TOPIC,
+  ALL_MODELS,
 } from "../store";

 import {
@@ -49,18 +60,18 @@ 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";

 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
  loading: () => <LoadingIcon />,
@@ -83,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 = ""),
                );
@@ -139,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>
@@ -199,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
@@ -262,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>
@@ -287,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() {
@@ -302,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`,
@@ -320,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>
@@ -334,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();
  });

@@ -378,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}
@@ -446,6 +465,12 @@ export function ChatActions(props: {
          });
        }}
      />
+
+      <ChatAction
+        onClick={nextModel}
+        text={currentModel}
+        icon={<RobotIcon />}
+      />
    </div>
  );
 }
@@ -473,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);
  };

@@ -482,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(
@@ -515,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) => {
@@ -524,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("/")) {
@@ -535,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);
@@ -544,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);
@@ -598,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();
    }
  };
@@ -642,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();
@@ -698,15 +779,22 @@ 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(), []);
+
  const location = useLocation();
  const isChat = location.pathname === Path.Chat;
+
  const autoFocus = !isMobileScreen || isChat; // only focus in chat page
+  const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;

  useCommand({
    fill: setUserInput,
@@ -717,10 +805,23 @@ export function Chat() {

  return (
    <div className={styles.chat} key={session.id}>
-      <div className="window-header">
-        <div className="window-header-title">
+      <div className="window-header" data-tauri-drag-region>
+        {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}
@@ -730,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 />}
@@ -755,7 +850,7 @@ export function Chat() {
              }}
            />
          </div>
-          {!isMobileScreen && (
+          {showMaxIcon && (
            <div className="window-action-button">
              <IconButton
                icon={config.tightBorder ? <MinIcon /> : <MaxIcon />}
@@ -808,7 +903,26 @@ export function Chat() {
              >
                <div className={styles["chat-message-container"]}>
                  <div className={styles["chat-message-avatar"]}>
-                    {message.role === "user" ? (
+                    <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>
+                    {isUser ? (
                      <Avatar avatar={config.avatar} />
                    ) : (
                      <MaskAvatar mask={session.mask} />
@@ -820,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={
@@ -869,12 +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>
+                    )}
+                  </div>
+
+                  {showActions && (
+                    <div className={styles["chat-message-action-date"]}>
+                      {message.date.toLocaleString()}
                    </div>
                  )}
                </div>
@@ -916,6 +1040,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/exporter.tsx
+++ b/app/components/exporter.tsx
@@ -449,16 +449,16 @@ export function ImagePreviewer(props: {
          </div>
          <div>
            <div className={styles["chat-info-item"]}>
-              Model: {mask.modelConfig.model}
+              {Locale.Exporter.Model}: {mask.modelConfig.model}
            </div>
            <div className={styles["chat-info-item"]}>
-              Messages: {props.messages.length}
+              {Locale.Exporter.Messages}: {props.messages.length}
            </div>
            <div className={styles["chat-info-item"]}>
-              Topic: {session.topic}
+              {Locale.Exporter.Topic}: {session.topic}
            </div>
            <div className={styles["chat-info-item"]}>
-              Time:{" "}
+              {Locale.Exporter.Time}:{" "}
              {new Date(
                props.messages.at(-1)?.date ?? Date.now(),
              ).toLocaleString()}
--- 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,
@@ -94,9 +96,14 @@ const useHasHydrated = () => {

 const loadAsyncGoogleFont = () => {
  const linkEl = document.createElement("link");
+  const proxyFontUrl = "/google-fonts";
+  const remoteFontUrl = "https://fonts.googleapis.com";
+  const googleFontUrl =
+    getClientConfig()?.buildMode === "export" ? remoteFontUrl : proxyFontUrl;
  linkEl.rel = "stylesheet";
  linkEl.href =
-    "/google-fonts/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap";
+    googleFontUrl +
+    "/css2?family=Noto+Sans+SC:wght@300;400;700;900&display=swap";
  document.head.appendChild(linkEl);
 };

@@ -119,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
@@ -11,18 +11,21 @@ import mermaid from "mermaid";

 import LoadingIcon from "../icons/three-dots.svg";
 import React from "react";
+import { useDebouncedCallback, useThrottledCallback } from "use-debounce";

-export function Mermaid(props: { code: string; onError: () => void }) {
+export function Mermaid(props: { code: string }) {
  const ref = useRef<HTMLDivElement>(null);
+  const [hasError, setHasError] = useState(false);

  useEffect(() => {
    if (props.code && ref.current) {
      mermaid
        .run({
          nodes: [ref.current],
+          suppressErrors: true,
        })
        .catch((e) => {
-          props.onError();
+          setHasError(true);
          console.error("[Mermaid] ", e.message);
        });
    }
@@ -41,10 +44,17 @@ export function Mermaid(props: { code: string; onError: () => void }) {
    }
  }

+  if (hasError) {
+    return null;
+  }
+
  return (
    <div
-      className="no-dark"
-      style={{ cursor: "pointer", overflow: "auto" }}
+      className="no-dark mermaid"
+      style={{
+        cursor: "pointer",
+        overflow: "auto",
+      }}
      ref={ref}
      onClick={() => viewSvgInNewWindow()}
    >
@@ -55,33 +65,40 @@ export function Mermaid(props: { code: string; onError: () => void }) {

 export function PreCode(props: { children: any }) {
  const ref = useRef<HTMLPreElement>(null);
+  const refText = ref.current?.innerText;
  const [mermaidCode, setMermaidCode] = useState("");

-  useEffect(() => {
+  const renderMermaid = useDebouncedCallback(() => {
    if (!ref.current) return;
    const mermaidDom = ref.current.querySelector("code.language-mermaid");
    if (mermaidDom) {
      setMermaidCode((mermaidDom as HTMLElement).innerText);
    }
-  }, [props.children]);
+  }, 600);

-  if (mermaidCode) {
-    return <Mermaid code={mermaidCode} onError={() => setMermaidCode("")} />;
-  }
+  useEffect(() => {
+    setTimeout(renderMermaid, 1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refText]);

  return (
-    <pre ref={ref}>
-      <span
-        className="copy-code-button"
-        onClick={() => {
-          if (ref.current) {
-            const code = ref.current.innerText;
-            copyToClipboard(code);
-          }
-        }}
-      ></span>
-      {props.children}
-    </pre>
+    <>
+      {mermaidCode.length > 0 && (
+        <Mermaid code={mermaidCode} key={mermaidCode} />
+      )}
+      <pre ref={ref}>
+        <span
+          className="copy-code-button"
+          onClick={() => {
+            if (ref.current) {
+              const code = ref.current.innerText;
+              copyToClipboard(code);
+            }
+          }}
+        ></span>
+        {props.children}
+      </pre>
+    </>
  );
 }

@@ -127,43 +144,58 @@ export function Markdown(
 ) {
  const mdRef = useRef<HTMLDivElement>(null);
  const renderedHeight = useRef(0);
+  const renderedWidth = useRef(0);
  const inView = useRef(!!props.defaultShow);
+  const [_, triggerRender] = useState(0);
+  const checkInView = useThrottledCallback(
+    () => {
+      const parent = props.parentRef?.current;
+      const md = mdRef.current;
+      if (parent && md && !props.defaultShow) {
+        const parentBounds = parent.getBoundingClientRect();
+        const twoScreenHeight = Math.max(500, parentBounds.height * 2);
+        const mdBounds = md.getBoundingClientRect();
+        const parentTop = parentBounds.top - twoScreenHeight;
+        const parentBottom = parentBounds.bottom + twoScreenHeight;
+        const isOverlap =
+          Math.max(parentTop, mdBounds.top) <=
+          Math.min(parentBottom, mdBounds.bottom);
+        inView.current = isOverlap;
+        triggerRender(Date.now());
+      }

-  const parent = props.parentRef?.current;
-  const md = mdRef.current;
+      if (inView.current && md) {
+        const rect = md.getBoundingClientRect();
+        renderedHeight.current = Math.max(renderedHeight.current, rect.height);
+        renderedWidth.current = Math.max(renderedWidth.current, rect.width);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    },
+    300,
+    {
+      leading: true,
+      trailing: true,
+    },
+  );

-  const checkInView = () => {
-    if (parent && md) {
-      const parentBounds = parent.getBoundingClientRect();
-      const twoScreenHeight = Math.max(500, parentBounds.height * 2);
-      const mdBounds = md.getBoundingClientRect();
-      const parentTop = parentBounds.top - twoScreenHeight;
-      const parentBottom = parentBounds.bottom + twoScreenHeight;
-      const isOverlap =
-        Math.max(parentTop, mdBounds.top) <=
-        Math.min(parentBottom, mdBounds.bottom);
-      inView.current = isOverlap;
-    }
+  useEffect(() => {
+    props.parentRef?.current?.addEventListener("scroll", checkInView);
+    checkInView();
+    return () =>
+      props.parentRef?.current?.removeEventListener("scroll", checkInView);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);

-    if (inView.current && md) {
-      renderedHeight.current = Math.max(
-        renderedHeight.current,
-        md.getBoundingClientRect().height,
-      );
-    }
-  };
-
-  setTimeout(() => checkInView(), 1);
+  const getSize = (x: number) => (!inView.current && x > 0 ? x : "auto");

  return (
    <div
      className="markdown-body"
      style={{
        fontSize: `${props.fontSize ?? 14}px`,
-        height:
-          !inView.current && renderedHeight.current > 0
-            ? renderedHeight.current
-            : "auto",
+        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;
@@ -88,6 +88,42 @@ export function ModelConfigList(props: {
        ></InputRange>
      </ListItem>

+      <ListItem
+        title={Locale.Settings.FrequencyPenalty.Title}
+        subTitle={Locale.Settings.FrequencyPenalty.SubTitle}
+      >
+        <InputRange
+          value={props.modelConfig.frequency_penalty?.toFixed(1)}
+          min="-2"
+          max="2"
+          step="0.1"
+          onChange={(e) => {
+            props.updateConfig(
+              (config) =>
+                (config.frequency_penalty =
+                  ModalConfigValidator.frequency_penalty(
+                    e.currentTarget.valueAsNumber,
+                  )),
+            );
+          }}
+        ></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";

@@ -39,13 +40,14 @@ import Locale, {
 } from "../locales";
 import { copyToClipboard } from "../utils";
 import Link from "next/link";
-import { Path, UPDATE_URL } from "../constant";
+import { Path, RELEASE_URL, UPDATE_URL } from "../constant";
 import { Prompt, SearchService, usePromptStore } from "../store/prompt";
 import { ErrorBoundary } from "./error";
 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,17 +200,114 @@ function UserPromptModal(props: { onClose?: () => void }) {
  );
 }

-function formatVersionDate(t: string) {
-  const d = new Date(+t);
-  const year = d.getUTCFullYear();
-  const month = d.getUTCMonth() + 1;
-  const day = d.getUTCDate();
+function DangerItems() {
+  const chatStore = useChatStore();
+  const appConfig = useAppConfig();

-  return [
-    year.toString(),
-    month.toString().padStart(2, "0"),
-    day.toString().padStart(2, "0"),
-  ].join("");
+  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>
+  );
 }

 export function Settings() {
@@ -216,14 +315,14 @@ 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();
  const [checkingUpdate, setCheckingUpdate] = useState(false);
-  const currentVersion = formatVersionDate(updateStore.version);
-  const remoteId = formatVersionDate(updateStore.remoteVersion);
+  const currentVersion = updateStore.formatVersion(updateStore.version);
+  const remoteId = updateStore.formatVersion(updateStore.remoteVersion);
  const hasNewVersion = currentVersion !== remoteId;
+  const updateUrl = getClientConfig()?.isApp ? RELEASE_URL : UPDATE_URL;

  function checkUpdate(force = false) {
    setCheckingUpdate(true);
@@ -231,14 +330,8 @@ export function Settings() {
      setCheckingUpdate(false);
    });

-    console.log(
-      "[Update] local version ",
-      new Date(+updateStore.version).toLocaleString(),
-    );
-    console.log(
-      "[Update] remote version ",
-      new Date(+updateStore.remoteVersion).toLocaleString(),
-    );
+    console.log("[Update] local version ", updateStore.version);
+    console.log("[Update] remote version ", updateStore.remoteVersion);
  }

  const usage = {
@@ -286,9 +379,12 @@ export function Settings() {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

+  const clientConfig = useMemo(() => getClientConfig(), []);
+  const showAccessCode = enabledAccessControl && !clientConfig?.isApp;
+
  return (
    <ErrorBoundary>
-      <div className="window-header">
+      <div className="window-header" data-tauri-drag-region>
        <div className="window-header-title">
          <div className="window-header-main-title">
            {Locale.Settings.Title}
@@ -298,36 +394,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>
@@ -369,7 +442,7 @@ export function Settings() {
            {checkingUpdate ? (
              <LoadingIcon />
            ) : hasNewVersion ? (
-              <Link href={UPDATE_URL} target="_blank" className="link">
+              <Link href={updateUrl} target="_blank" className="link">
                {Locale.Settings.Update.GoToUpdate}
              </Link>
            ) : (
@@ -485,7 +558,7 @@ export function Settings() {
        </List>

        <List>
-          {enabledAccessControl ? (
+          {showAccessCode ? (
            <ListItem
              title={Locale.Settings.AccessCode.Title}
              subTitle={Locale.Settings.AccessCode.SubTitle}
@@ -519,29 +592,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
@@ -551,6 +626,7 @@ export function Settings() {
              <input
                type="text"
                value={accessStore.openaiUrl}
+                placeholder="https://api.openai.com/"
                onChange={(e) =>
                  accessStore.updateOpenAiUrl(e.currentTarget.value)
                }
@@ -591,6 +667,8 @@ export function Settings() {
          </ListItem>
        </List>

+        <SyncItems />
+
        <List>
          <ModelConfigList
            modelConfig={config.modelConfig}
@@ -605,6 +683,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);
        }
      }
    };
@@ -118,8 +115,10 @@ export function SideBar(props: { className?: string }) {
        shouldNarrow && styles["narrow-sidebar"]
      }`}
    >
-      <div className={styles["sidebar-header"]}>
-        <div className={styles["sidebar-title"]}>AdEx<b>GPT</b> - via API</div>
+      <div className={styles["sidebar-header"]} data-tauri-drag-region>
+        <div className={styles["sidebar-title"]} data-tauri-drag-region>
+          AdEx<b>GPT</b> - via API
+        </div>
        <div className={styles["sidebar-sub-title"]}>
          secure local UI for OpenAI API<br />
          <a href="https://adexpartners.sharepoint.com/sites/AdExGPT/SitePages/AdExGPT.aspx">FAQ & Support</a>
@@ -162,8 +161,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;
+  resize: none;
+  outline: none;
+  box-sizing: border-box;
+  min-height: 30vh;
+
+  &: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/build.ts
+++ b/app/config/build.ts
@@ -1,3 +1,5 @@
+import tauriConfig from "../../src-tauri/tauri.conf.json";
+
 export const getBuildConfig = () => {
  if (typeof process === "undefined") {
    throw Error(
@@ -5,22 +7,37 @@ export const getBuildConfig = () => {
    );
  }

-  const COMMIT_ID: string = (() => {
+  const buildMode = process.env.BUILD_MODE ?? "standalone";
+  const isApp = !!process.env.BUILD_APP;
+  const version = "v" + tauriConfig.package.version;
+
+  const commitInfo = (() => {
    try {
      const childProcess = require("child_process");
-      return childProcess
+      const commitDate: string = childProcess
        .execSync('git log -1 --format="%at000" --date=unix')
        .toString()
        .trim();
+      const commitHash: string = childProcess
+        .execSync('git log --pretty=format:"%H" -n 1')
+        .toString()
+        .trim();
+
+      return { commitDate, commitHash };
    } catch (e) {
      console.error("[Build Config] No git or not from git repo.");
-      return "unknown";
+      return {
+        commitDate: "unknown",
+        commitHash: "unknown",
+      };
    }
  })();

  return {
-    commitId: COMMIT_ID,
-    buildMode: process.env.BUILD_MODE ?? "standalone",
+    version,
+    ...commitInfo,
+    buildMode,
+    isApp,
  };
 };

--- a/app/config/server.ts
+++ b/app/config/server.ts
@@ -11,6 +11,8 @@ declare global {
      HIDE_USER_API_KEY?: string; // disable user's api key input
      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
    }
  }
 }
@@ -45,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
@@ -3,10 +3,11 @@ export const REPO = "ChatGPT-Next-Web";
 export const REPO_URL = `https://github.com/${OWNER}/${REPO}`;
 export const ISSUE_URL = `https://github.com/${OWNER}/${REPO}/issues`;
 export const UPDATE_URL = `${REPO_URL}#keep-updated`;
+export const RELEASE_URL = `${REPO_URL}/releases`;
 export const FETCH_COMMIT_URL = `https://api.github.com/repos/${OWNER}/${REPO}/commits?per_page=1`;
 export const FETCH_TAG_URL = `https://api.github.com/repos/${OWNER}/${REPO}/tags?per_page=1`;
 export const RUNTIME_CONFIG_DOM = "danger-runtime-config";
-export const DEFAULT_API_HOST = "https://chatgpt.nextweb.fun/api/proxy";
+export const DEFAULT_API_HOST = "https://chatgpt1.nextweb.fun/api/proxy";

 export enum Path {
  Home = "/",
@@ -33,6 +34,7 @@ export enum StoreKey {
  Mask = "mask-store",
  Prompt = "prompt-store",
  Update = "chat-update",
+  Sync = "sync",
 }

 export const MAX_SIDEBAR_WIDTH = 500;
@@ -52,3 +54,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/layout.tsx
+++ b/app/layout.tsx
@@ -2,7 +2,6 @@
 import "./styles/globals.scss";
 import "./styles/markdown.scss";
 import "./styles/highlight.scss";
-import { getBuildConfig } from "./config/build";
 import { getClientConfig } from "./config/client";

 export const metadata = {
--- 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: "已是最新版本",
@@ -197,6 +222,10 @@ const cn = {
      Title: "话题新鲜度 (presence_penalty)",
      SubTitle: "值越大，越有可能扩展到新话题",
    },
+    FrequencyPenalty: {
+      Title: "频率惩罚度 (frequency_penalty)",
+      SubTitle: "值越大，越有可能降低重复字词",
+    },
  },
  Store: {
    DefaultTopic: "新的聊天",
@@ -277,6 +306,12 @@ const cn = {
    Create: "新建",
    Edit: "编辑",
  },
+  Exporter: {
+    Model: "模型",
+    Messages: "消息",
+    Topic: "主题",
+    Time: "时间",
+  },
 };

 type DeepPartial<T> = T extends object
@@ -284,7 +319,8 @@ type DeepPartial<T> = T extends object
      [P in keyof T]?: DeepPartial<T[P]>;
    }
  : T;
-export type LocaleType = DeepPartial<typeof cn>;
-export type RequiredLocaleType = typeof cn;
+
+export type LocaleType = typeof cn;
+export type PartialLocaleType = DeepPartial<typeof cn>;

 export default cn;
--- a/app/locales/cs.ts
+++ b/app/locales/cs.ts
@@ -1,7 +1,7 @@
 import { SubmitKey } from "../store/config";
-import type { LocaleType } from "./index";
+import type { PartialLocaleType } from "./index";

-const cs: LocaleType = {
+const cs: PartialLocaleType = {
  WIP: "V přípravě...",
  Error: {
    Unauthorized:
@@ -61,13 +61,7 @@ const cs: LocaleType = {
  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",
@@ -155,6 +149,11 @@ const cs: LocaleType = {
      Title: "Přítomnostní korekce",
      SubTitle: "Větší hodnota zvyšuje pravděpodobnost nových témat.",
    },
+    FrequencyPenalty: {
+      Title: "Frekvenční penalizace",
+      SubTitle:
+        "Větší hodnota snižující pravděpodobnost opakování stejného řádku",
+    },
  },
  Store: {
    DefaultTopic: "Nová konverzace",
@@ -226,6 +225,12 @@ const cs: LocaleType = {
    Create: "Vytvořit",
    Edit: "Upravit",
  },
+  Exporter: {
+    Model: "Model",
+    Messages: "Zprávy",
+    Topic: "Téma",
+    Time: "Čas",
+  },
 };

 export default cs;
--- a/app/locales/de.ts
+++ b/app/locales/de.ts
@@ -1,7 +1,7 @@
 import { SubmitKey } from "../store/config";
-import type { LocaleType } from "./index";
+import type { PartialLocaleType } from "./index";

-const de: LocaleType = {
+const de: PartialLocaleType = {
  WIP: "In Bearbeitung...",
  Error: {
    Unauthorized:
@@ -61,14 +61,7 @@ const de: LocaleType = {
  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",
@@ -158,6 +151,11 @@ const de: LocaleType = {
      SubTitle:
        "Ein größerer Wert erhöht die Wahrscheinlichkeit, dass über neue Themen gesprochen wird",
    },
+    FrequencyPenalty: {
+      Title: "Frequency Penalty", // HäufigkeitStrafe
+      SubTitle:
+        "Ein größerer Wert, der die Wahrscheinlichkeit verringert, dass dieselbe Zeile wiederholt wird",
+    },
  },
  Store: {
    DefaultTopic: "Neues Gespräch",
@@ -231,6 +229,12 @@ const de: LocaleType = {
    Create: "Create",
    Edit: "Edit",
  },
+  Exporter: {
+    Model: "Modell",
+    Messages: "Nachrichten",
+    Topic: "Thema",
+    Time: "Zeit",
+  },
 };

 export default de;
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -1,7 +1,7 @@
 import { SubmitKey } from "../store/config";
-import { RequiredLocaleType } from "./index";
+import { LocaleType } from "./index";

-const en: RequiredLocaleType = {
+const en: LocaleType = {
  WIP: "Coming Soon...",
  Error: {
    Unauthorized:
@@ -18,7 +18,7 @@ const en: RequiredLocaleType = {
    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: RequiredLocaleType = {
      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: RequiredLocaleType = {
      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: RequiredLocaleType = {
  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: RequiredLocaleType = {
      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",
@@ -199,6 +224,11 @@ const en: RequiredLocaleType = {
      SubTitle:
        "A larger value increases the likelihood to talk about new topics",
    },
+    FrequencyPenalty: {
+      Title: "Frequency Penalty",
+      SubTitle:
+        "A larger value decreasing the likelihood to repeat the same line",
+    },
  },
  Store: {
    DefaultTopic: "New Conversation",
@@ -280,6 +310,12 @@ const en: RequiredLocaleType = {
    Create: "Create",
    Edit: "Edit",
  },
+  Exporter: {
+    Model: "Model",
+    Messages: "Messages",
+    Topic: "Topic",
+    Time: "Time",
+  },
 };

 export default en;
--- a/app/locales/es.ts
+++ b/app/locales/es.ts
@@ -1,7 +1,7 @@
 import { SubmitKey } from "../store/config";
-import type { LocaleType } from "./index";
+import type { PartialLocaleType } from "./index";

-const es: LocaleType = {
+const es: PartialLocaleType = {
  WIP: "En construcción...",
  Error: {
    Unauthorized:
@@ -61,13 +61,7 @@ const es: LocaleType = {
  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",
@@ -156,6 +150,11 @@ const es: LocaleType = {
      SubTitle:
        "Un valor mayor aumenta la probabilidad de hablar sobre nuevos temas",
    },
+    FrequencyPenalty: {
+      Title: "Penalización de frecuencia",
+      SubTitle:
+        "Un valor mayor que disminuye la probabilidad de repetir la misma línea",
+    },
  },
  Store: {
    DefaultTopic: "Nueva conversación",
@@ -228,6 +227,12 @@ const es: LocaleType = {
    Create: "Create",
    Edit: "Edit",
  },
+  Exporter: {
+    Model: "Modelo",
+    Messages: "Mensajes",
+    Topic: "Tema",
+    Time: "Time",
+  },
 };

 export default es;
--- a/app/locales/fr.ts
+++ b/app/locales/fr.ts
@@ -1,7 +1,7 @@
 import { SubmitKey } from "../store/config";
-import type { LocaleType } from "./index";
+import type { PartialLocaleType } from "./index";

-const fr: LocaleType = {
+const fr: PartialLocaleType = {
  WIP: "Prochainement...",
  Error: {
    Unauthorized:
@@ -61,14 +61,7 @@ const fr: LocaleType = {
  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",
@@ -159,6 +152,11 @@ const fr: LocaleType = {
      SubTitle:
        "Une valeur plus élevée augmentera la probabilité d'introduire de nouveaux sujets",
    },
+    FrequencyPenalty: {
+      Title: "Pénalité de fréquence",
+      SubTitle:
+        "Une valeur plus élevée diminuant la probabilité de répéter la même ligne",
+    },
  },
  Store: {
    DefaultTopic: "Nouvelle conversation",
@@ -232,6 +230,12 @@ const fr: LocaleType = {
    Create: "Créer",
    Edit: "Éditer",
  },
+  Exporter: {
+    Model: "Modèle",
+    Messages: "Messages",
+    Topic: "Sujet",
+    Time: "Temps",
+  },
 };

 export default fr;
--- a/app/locales/index.ts
+++ b/app/locales/index.ts
@@ -1,56 +1,74 @@
-import CN from "./cn";
-import EN from "./en";
-import TW from "./tw";
-import FR from "./fr";
-import ES from "./es";
-import IT from "./it";
-import TR from "./tr";
-import JP from "./jp";
-import DE from "./de";
-import VI from "./vi";
-import RU from "./ru";
-import CS from "./cs";
-import KO from "./ko";
+import cn from "./cn";
+import en from "./en";
+import tw from "./tw";
+import fr from "./fr";
+import es from "./es";
+import it from "./it";
+import tr from "./tr";
+import jp from "./jp";
+import de from "./de";
+import vi from "./vi";
+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";

-export type { LocaleType, RequiredLocaleType } from "./cn";
+import type { LocaleType } from "./cn";
+export type { LocaleType, PartialLocaleType } from "./cn";

-export const AllLangs = [
-  "en",
-  "cn",
-  "tw",
-  "fr",
-  "es",
-  "it",
-  "tr",
-  "jp",
-  "de",
-  "vi",
-  "ru",
-  "cs",
-  "ko",
-] as const;
-export type Lang = (typeof AllLangs)[number];
+const ALL_LANGS = {
+  cn,
+  en,
+  tw,
+  jp,
+  ko,
+  fr,
+  es,
+  it,
+  tr,
+  de,
+  vi,
+  ru,
+  cs,
+  no,
+  ar,
+};
+
+export type Lang = keyof typeof ALL_LANGS;
+
+export const AllLangs = Object.keys(ALL_LANGS) as Lang[];

 export const ALL_LANG_OPTIONS: Record<Lang, string> = {
  cn: "简体中文",
  en: "English",
  tw: "繁體中文",
+  jp: "日本語",
+  ko: "한국어",
  fr: "Français",
  es: "Español",
  it: "Italiano",
  tr: "Türkçe",
-  jp: "日本語",
  de: "Deutsch",
  vi: "Tiếng Việt",
  ru: "Русский",
  cs: "Čeština",
-  ko: "한국어",
+  no: "Nynorsk",
+  ar: "العربية",
 };

 const LANG_KEY = "lang";
 const DEFAULT_LANG = "en";

+const fallbackLang = en;
+const targetLang = ALL_LANGS[getLang()] as LocaleType;
+
+// if target lang missing some fields, it will use fallback lang string
+merge(fallbackLang, targetLang);
+
+export default fallbackLang as LocaleType;
+
 function getItem(key: string) {
  try {
    return localStorage.getItem(key);
@@ -69,7 +87,6 @@ function getLanguage() {
  try {
    return navigator.language.toLowerCase();
  } catch {
-    console.log("[Lang] failed to detect user lang.");
    return DEFAULT_LANG;
  }
 }
@@ -96,25 +113,3 @@ export function changeLang(lang: Lang) {
  setItem(LANG_KEY, lang);
  location.reload();
 }
-
-const fallbackLang = EN;
-const targetLang = {
-  en: EN,
-  cn: CN,
-  tw: TW,
-  fr: FR,
-  es: ES,
-  it: IT,
-  tr: TR,
-  jp: JP,
-  de: DE,
-  vi: VI,
-  ru: RU,
-  cs: CS,
-  ko: KO,
-}[getLang()] as typeof CN;
-
-// if target lang missing some fields, it will use fallback lang string
-merge(fallbackLang, targetLang);
-
-export default fallbackLang as typeof CN;
--- a/app/locales/it.ts
+++ b/app/locales/it.ts
@@ -1,7 +1,7 @@
 import { SubmitKey } from "../store/config";
-import type { LocaleType } from "./index";
+import type { PartialLocaleType } from "./index";

-const it: LocaleType = {
+const it: PartialLocaleType = {
  WIP: "Work in progress...",
  Error: {
    Unauthorized:
@@ -61,13 +61,7 @@ const it: LocaleType = {
  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",
@@ -157,6 +151,11 @@ const it: LocaleType = {
      SubTitle:
        "Un valore maggiore aumenta la probabilità di parlare di nuovi argomenti",
    },
+    FrequencyPenalty: {
+      Title: "Penalità di frequenza",
+      SubTitle:
+        "Un valore maggiore che diminuisce la probabilità di ripetere la stessa riga",
+    },
  },
  Store: {
    DefaultTopic: "Nuova conversazione",
@@ -229,6 +228,12 @@ const it: LocaleType = {
    Create: "Create",
    Edit: "Edit",
  },
+  Exporter: {
+    Model: "Modello",
+    Messages: "Messaggi",
+    Topic: "Argomento",
+    Time: "Tempo",
+  },
 };

 export default it;
--- a/app/locales/jp.ts
+++ b/app/locales/jp.ts
@@ -1,11 +1,11 @@
 import { SubmitKey } from "../store/config";
-import type { LocaleType } from "./index";
+import type { PartialLocaleType } from "./index";

-const jp: LocaleType = {
-  WIP: "この機能は開発中です……",
+const jp: PartialLocaleType = {
+  WIP: "この機能は開発中です",
  Error: {
    Unauthorized:
-      "現在は未承認状態です。左下の設定ボタンをクリックし、アクセスパスワードを入力してください。",
+      "現在は未承認状態です。左下の設定ボタンをクリックし、アクセスパスワードかOpenAIのAPIキーを入力してください。",
  },
  ChatItem: {
    ChatItemCount: (count: number) => `${count} 通のチャット`,
@@ -19,7 +19,7 @@ const jp: LocaleType = {
      Copy: "コピー",
      Stop: "停止",
      Retry: "リトライ",
-      Delete: "Delete",
+      Delete: "削除",
    },
    Rename: "チャットの名前を変更",
    Typing: "入力中…",
@@ -32,7 +32,7 @@ const jp: LocaleType = {
    },
    Send: "送信",
    Config: {
-      Reset: "重置默认",
+      Reset: "リセット",
      SaveAs: "另存为面具",
    },
  },
@@ -61,16 +61,10 @@ const jp: LocaleType = {
  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: "全ての言語",
    },
    Avatar: "アバター",
    FontSize: {
@@ -91,11 +85,11 @@ const jp: LocaleType = {
    TightBorder: "ボーダーレスモード",
    SendPreviewBubble: {
      Title: "プレビューバブルの送信",
-      SubTitle: "在预览气泡中预览 Markdown 内容",
+      SubTitle: "プレビューバブルでマークダウンコンテンツをプレビュー",
    },
    Mask: {
-      Title: "面具启动页",
-      SubTitle: "新建聊天时，展示面具启动页",
+      Title: "キャラクターページ",
+      SubTitle: "新規チャット作成時にキャラクターページを表示する",
    },
    Prompt: {
      Disable: {
@@ -113,7 +107,7 @@ const jp: LocaleType = {
        Search: "プロンプトワード検索",
      },
      EditModal: {
-        Title: "编辑提示词",
+        Title: "編集",
      },
    },
    HistoryCount: {
@@ -158,6 +152,10 @@ const jp: LocaleType = {
      Title: "トピックの新鮮度 (presence_penalty)",
      SubTitle: "値が大きいほど、新しいトピックへの展開が可能になります。",
    },
+    FrequencyPenalty: {
+      Title: "話題の頻度 (frequency_penalty)",
+      SubTitle: "値が大きいほど、重複語を低減する可能性が高くなります",
+    },
  },
  Store: {
    DefaultTopic: "新しいチャット",
@@ -178,54 +176,70 @@ const jp: LocaleType = {
    Failed: "コピーに失敗しました。クリップボード許可を与えてください。",
  },
  Context: {
-    Toast: (x: any) => `前置コンテキストが ${x} 件設定されました`,
-    Edit: "前置コンテキストと履歴メモリ",
-    Add: "新規追加",
+    Toast: (x: any) => `キャラクターが ${x} 件設定されました`,
+    Edit: "キャラクタープリセットとモデル設定",
+    Add: "追加",
  },
-  Plugin: { Name: "插件" },
+  Plugin: { Name: "プラグイン" },
  Mask: {
-    Name: "面具",
+    Name: "キャラクタープリセット",
    Page: {
-      Title: "预设角色面具",
-      SubTitle: (count: number) => `${count} 个预设角色定义`,
-      Search: "搜索角色面具",
-      Create: "新建",
+      Title: "キャラクタープリセット",
+      SubTitle: (count: number) => `${count} 件見つかりました。`,
+      Search: "検索",
+      Create: "新規",
    },
    Item: {
      Info: (count: number) => `包含 ${count} 条预设对话`,
-      Chat: "对话",
-      View: "查看",
-      Edit: "编辑",
-      Delete: "删除",
-      DeleteConfirm: "确认删除？",
+      Chat: "会話",
+      View: "詳細",
+      Edit: "編集",
+      Delete: "削除",
+      DeleteConfirm: "本当に削除しますか？",
    },
    EditModal: {
      Title: (readonly: boolean) =>
-        `编辑预设面具 ${readonly ? "（只读）" : ""}`,
-      Download: "下载预设",
-      Clone: "克隆预设",
+        `キャラクタープリセットを編集 ${readonly ? "（読み取り専用）" : ""}`,
+      Download: "ダウンロード",
+      Clone: "複製",
    },
    Config: {
-      Avatar: "角色头像",
-      Name: "角色名称",
+      Avatar: "キャラクターのアイコン",
+      Name: "キャラクターの名前",
+      Sync: {
+        Title: "グローバル設定を利用する",
+        SubTitle: "このチャットでグローバル設定を利用します。",
+        Confirm:
+          "カスタム設定を上書きしてグローバル設定を使用します、よろしいですか？",
+      },
+      HideContext: {
+        Title: "キャラクター設定を表示しない",
+        SubTitle: "チャット画面でのキャラクター設定を非表示にします。",
+      },
    },
  },
  NewChat: {
-    Return: "返回",
-    Skip: "跳过",
-    Title: "挑选一个面具",
-    SubTitle: "现在开始，与面具背后的灵魂思维碰撞",
-    More: "搜索更多",
-    NotShow: "不再展示",
-    ConfirmNoShow: "确认禁用？禁用后可以随时在设置中重新启用。",
+    Return: "戻る",
+    Skip: "スキップ",
+    Title: "キャラクター",
+    SubTitle: "さあ、AIにキャラクターを設定して会話を始めてみましょう",
+    More: "もっと探す",
+    NotShow: "今後は表示しない",
+    ConfirmNoShow: "いつでも設定から有効化できます。",
  },

  UI: {
-    Confirm: "确认",
-    Cancel: "取消",
-    Close: "关闭",
-    Create: "新建",
-    Edit: "编辑",
+    Confirm: "確認",
+    Cancel: "キャンセル",
+    Close: "閉じる",
+    Create: "新規",
+    Edit: "編集",
+  },
+  Exporter: {
+    Model: "モデル",
+    Messages: "メッセージ",
+    Topic: "トピック",
+    Time: "時間",
  },
 };

--- a/app/locales/ko.ts
+++ b/app/locales/ko.ts
@@ -1,8 +1,8 @@
 import { SubmitKey } from "../store/config";

-import type { LocaleType } from "./index";
+import type { PartialLocaleType } from "./index";

-const ko: LocaleType = {
+const ko: PartialLocaleType = {
  WIP: "곧 출시 예정...",
  Error: {
    Unauthorized: "권한이 없습니다. 설정 페이지에서 액세스 코드를 입력하세요.",
@@ -61,13 +61,7 @@ const ko: LocaleType = {
  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",
@@ -154,6 +148,10 @@ const ko: LocaleType = {
      Title: "존재 페널티 (presence_penalty)",
      SubTitle: "값이 클수록 새로운 주제에 대해 대화할 가능성이 높아집니다.",
    },
+    FrequencyPenalty: {
+      Title: "빈도 페널티(frequency penalty)",
+      SubTitle: "값이 클수록 같은 줄이 반복될 가능성이 줄어듭니다.",
+    },
  },
  Store: {
    DefaultTopic: "새 대화",
@@ -225,6 +223,12 @@ const ko: LocaleType = {
    Create: "생성",
    Edit: "편집",
  },
+  Exporter: {
+    Model: "모델",
+    Messages: "메시지",
+    Topic: "주제",
+    Time: "시간",
+  },
 };

 export default ko;
--- a/app/locales/no.ts
+++ b/app/locales/no.ts
@@ -0,0 +1,164 @@
+import { SubmitKey } from "../store/config";
+import type { PartialLocaleType } from "./index";
+
+const no: PartialLocaleType = {
+  WIP: "Arbeid pågår ...",
+  Error: {
+    Unauthorized: "Du har ikke tilgang. Vennlig oppgi tildelt adgangskode.",
+  },
+  ChatItem: {
+    ChatItemCount: (count: number) => `${count} meldinger`,
+  },
+  Chat: {
+    SubTitle: (count: number) => `${count} meldinger med ChatGPT`,
+    Actions: {
+      ChatList: "Gå til chatlisten",
+      CompressedHistory: "Komprimert historikk for instrukser",
+      Export: "Eksporter alle meldinger i markdown-format",
+      Copy: "Kopier",
+      Stop: "Stopp",
+      Retry: "Prøv igjen",
+      Delete: "Slett",
+    },
+    Rename: "Gi nytt navn",
+    Typing: "Skriver …",
+    Input: (submitKey: string) => {
+      var inputHints = `${submitKey} for å sende`;
+      if (submitKey === String(SubmitKey.Enter)) {
+        inputHints += ", Shift + Enter for å omgi";
+      }
+      return inputHints + ", / for å søke instrukser";
+    },
+    Send: "Send",
+  },
+  Export: {
+    Title: "Alle meldinger",
+    Copy: "Kopiere alle",
+    Download: "Last ned",
+    MessageFromYou: "Melding fra deg",
+    MessageFromChatGPT: "Melding fra ChatGPT",
+  },
+  Memory: {
+    Title: "Minneinstruks",
+    EmptyContent: "Ingen sålant.",
+    Send: "Send minne",
+    Copy: "Kopiere minne",
+    Reset: "Nulstill sesjon",
+    ResetConfirm:
+      "Om du nillstiller vil du slette hele historikken. Er du sikker på at du vil nullstille?",
+  },
+  Home: {
+    NewChat: "Ny chat",
+    DeleteChat: "Bekreft for å slette det valgte dialogen",
+    DeleteToast: "Samtale slettet",
+    Revert: "Tilbakestill",
+  },
+  Settings: {
+    Title: "Innstillinger",
+    SubTitle: "Alle innstillinger",
+
+    Lang: {
+      Name: "Language", // ATTENTION: if you wanna add a new translation, please do not translate this value, leave it as `Language`
+    },
+    Avatar: "Avatar",
+    FontSize: {
+      Title: "Fontstørrelsen",
+      SubTitle: "Juster fontstørrelsen for samtaleinnholdet.",
+    },
+    Update: {
+      Version: (x: string) => `Versjon: ${x}`,
+      IsLatest: "Siste versjon",
+      CheckUpdate: "Se etter oppdatering",
+      IsChecking: "Ser etter oppdatering ...",
+      FoundUpdate: (x: string) => `Fant ny versjon: ${x}`,
+      GoToUpdate: "Oppdater",
+    },
+    SendKey: "Send nøkkel",
+    Theme: "Tema",
+    TightBorder: "Stram innramming",
+    Prompt: {
+      Disable: {
+        Title: "Skru av autofullfør",
+        SubTitle: "Skriv / for å trigge autofullfør",
+      },
+      List: "Instruksliste",
+      ListCount: (builtin: number, custom: number) =>
+        `${builtin} innebygde, ${custom} brukerdefinerte`,
+      Edit: "Endre",
+      Modal: {
+        Title: "Instruksliste",
+        Add: "Legg til",
+        Search: "Søk instrukser",
+      },
+    },
+    HistoryCount: {
+      Title: "Tall på tilhørende meldinger",
+      SubTitle: "Antall sendte meldinger tilknyttet hver spørring",
+    },
+    CompressThreshold: {
+      Title: "Terskeverdi for komprimering av historikk",
+      SubTitle:
+        "Komprimer dersom ikke-komprimert lengde på meldinger overskrider denne verdien",
+    },
+    Token: {
+      Title: "API Key",
+      SubTitle:
+        "Bruk din egen API-nøkkel for å ignorere tilgangskoden begrensning",
+      Placeholder: "OpenAI API-nøkkel",
+    },
+    Usage: {
+      Title: "Saldo for konto",
+      SubTitle(used: any, total: any) {
+        return `Brukt denne måneden $${used}, abonnement $${total}`;
+      },
+      IsChecking: "Sjekker ...",
+      Check: "Sjekk",
+      NoAccess: "Skriv inn API-nøkkelen for å sjekke saldo",
+    },
+    AccessCode: {
+      Title: "Tilgangskode",
+      SubTitle: "Tilgangskontroll på",
+      Placeholder: "Trenger tilgangskode",
+    },
+    Model: "Model",
+    Temperature: {
+      Title: "Temperatur",
+      SubTitle: "Høyere verdi gir mer kreative svar",
+    },
+    MaxTokens: {
+      Title: "Maks tokens",
+      SubTitle: "Maksimum lengde på tokens for instrukser og svar",
+    },
+  },
+  Store: {
+    DefaultTopic: "Ny samtale",
+    BotHello: "Hei! Hva kan jeg hjelpe deg med i dag?",
+    Error: "Noe gikk galt, vennligst prøv igjen senere.",
+    Prompt: {
+      History: (content: string) =>
+        "Dette er et sammendrag av chatthistorikken mellom AI-en og brukeren som en oppsummering: " +
+        content,
+      Topic:
+        "Vennligst lag en fire til fem ords tittel som oppsummerer samtalen vår uten innledning, punktsetting, anførselstegn, punktum, symboler eller tillegg tekst. Fjern innrammende anførselstegn.",
+      Summarize:
+        "Oppsummer diskusjonen vår kort i 200 ord eller mindre for å bruke som en oppfordring til fremtidig sammenheng.",
+    },
+  },
+  Copy: {
+    Success: "Kopiert til utklippstavle",
+    Failed: "Kopiering feilet. Vennligst gi tilgang til utklippstavlen.",
+  },
+  Context: {
+    Toast: (x: any) => `Med ${x} kontekstuelle instrukser`,
+    Edit: "Kontekstuelle -og minneinstrukser",
+    Add: "Legg til",
+  },
+  Exporter: {
+    Model: "Model",
+    Messages: "Meldingar",
+    Topic: "Emne",
+    Time: "Tid",
+  },
+};
+
+export default no;
--- a/app/locales/ru.ts
+++ b/app/locales/ru.ts
@@ -1,7 +1,7 @@
 import { SubmitKey } from "../store/config";
-import type { LocaleType } from "./index";
+import type { PartialLocaleType } from "./index";

-const ru: LocaleType = {
+const ru: PartialLocaleType = {
  WIP: "Скоро...",
  Error: {
    Unauthorized:
@@ -61,13 +61,7 @@ const ru: LocaleType = {
  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: "Все языки",
@@ -157,6 +151,11 @@ const ru: LocaleType = {
      SubTitle:
        "Чем выше значение, тем больше вероятность общения на новые темы",
    },
+    FrequencyPenalty: {
+      Title: "Штраф за частоту",
+      SubTitle:
+        "Большее значение снижает вероятность повторения одной и той же строки",
+    },
  },
  Store: {
    DefaultTopic: "Новый разговор",
@@ -232,6 +231,12 @@ const ru: LocaleType = {
    Create: "Создать",
    Edit: "Редактировать",
  },
+  Exporter: {
+    Model: "Модель",
+    Messages: "Сообщения",
+    Topic: "Тема",
+    Time: "Время",
+  },
 };

 export default ru;
--- a/app/locales/tr.ts
+++ b/app/locales/tr.ts
@@ -1,7 +1,7 @@
 import { SubmitKey } from "../store/config";
-import type { LocaleType } from "./index";
+import type { PartialLocaleType } from "./index";

-const tr: LocaleType = {
+const tr: PartialLocaleType = {
  WIP: "Çalışma devam ediyor...",
  Error: {
    Unauthorized:
@@ -61,13 +61,7 @@ const tr: LocaleType = {
  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",
@@ -158,6 +152,11 @@ const tr: LocaleType = {
      SubTitle:
        "Daha büyük bir değer, yeni konular hakkında konuşma olasılığını artırır",
    },
+    FrequencyPenalty: {
+      Title: "Frekans Cezası",
+      SubTitle:
+        "Aynı satırı tekrar etme olasılığını azaltan daha büyük bir değer",
+    },
  },
  Store: {
    DefaultTopic: "Yeni Konuşma",
@@ -229,6 +228,12 @@ const tr: LocaleType = {
    Create: "Create",
    Edit: "Edit",
  },
+  Exporter: {
+    Model: "Model",
+    Messages: "Mesajlar",
+    Topic: "Konu",
+    Time: "Zaman",
+  },
 };

 export default tr;
--- a/app/locales/tw.ts
+++ b/app/locales/tw.ts
@@ -1,7 +1,7 @@
 import { SubmitKey } from "../store/config";
-import type { LocaleType } from "./index";
+import type { PartialLocaleType } from "./index";

-const tw: LocaleType = {
+const tw: PartialLocaleType = {
  WIP: "該功能仍在開發中……",
  Error: {
    Unauthorized: "目前您的狀態是未授權，請前往設定頁面輸入授權碼。",
@@ -59,13 +59,7 @@ const tw: LocaleType = {
  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: "所有语言",
@@ -152,6 +146,10 @@ const tw: LocaleType = {
      Title: "話題新穎度 (presence_penalty)",
      SubTitle: "值越大，越有可能擴展到新話題",
    },
+    FrequencyPenalty: {
+      Title: "頻率懲罰度 (frequency_penalty)",
+      SubTitle: "值越大，越有可能降低重複字詞",
+    },
  },
  Store: {
    DefaultTopic: "新的對話",
@@ -219,6 +217,12 @@ const tw: LocaleType = {
    Create: "新建",
    Edit: "编辑",
  },
+  Exporter: {
+    Model: "模型",
+    Messages: "消息",
+    Topic: "主題",
+    Time: "時間",
+  },
 };

 export default tw;
--- a/app/locales/vi.ts
+++ b/app/locales/vi.ts
@@ -1,7 +1,7 @@
 import { SubmitKey } from "../store/config";
-import type { LocaleType } from "./index";
+import type { PartialLocaleType } from "./index";

-const vi: LocaleType = {
+const vi: PartialLocaleType = {
  WIP: "Sắp ra mắt...",
  Error: {
    Unauthorized:
@@ -61,13 +61,7 @@ const vi: LocaleType = {
  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ữ",
@@ -154,6 +148,10 @@ const vi: LocaleType = {
      Title: "Chủ đề mới (presence_penalty)",
      SubTitle: "Giá trị càng lớn tăng khả năng mở rộng sang các chủ đề mới",
    },
+    FrequencyPenalty: {
+      Title: "Hình phạt tần suất",
+      SubTitle: "Giá trị lớn hơn làm giảm khả năng lặp lại cùng một dòng",
+    },
  },
  Store: {
    DefaultTopic: "Cuộc trò chuyện mới",
@@ -225,6 +223,12 @@ const vi: LocaleType = {
    Create: "Tạo",
    Edit: "Chỉnh sửa",
  },
+  Exporter: {
+    Model: "Mô hình",
+    Messages: "Thông điệp",
+    Topic: "Chủ đề",
+    Time: "Thời gian",
+  },
 };

 export default vi;
--- a/app/masks/en.ts
+++ b/app/masks/en.ts
@@ -17,6 +17,7 @@ export const EN_MASKS: BuiltinMask[] = [
      temperature: 0.3,
      max_tokens: 2000,
      presence_penalty: 0,
+      frequency_penalty: 0,
      sendMemory: true,
      historyMessageCount: 4,
      compressMessageLengthThreshold: 1000,
@@ -57,6 +58,7 @@ export const EN_MASKS: BuiltinMask[] = [
      temperature: 0.5,
      max_tokens: 2000,
      presence_penalty: 0,
+      frequency_penalty: 0,
      sendMemory: true,
      historyMessageCount: 4,
      compressMessageLengthThreshold: 1000,
@@ -80,6 +82,7 @@ export const EN_MASKS: BuiltinMask[] = [
      temperature: 0.5,
      max_tokens: 2000,
      presence_penalty: 0,
+      frequency_penalty: 0,
      sendMemory: true,
      historyMessageCount: 4,
      compressMessageLengthThreshold: 1000,
@@ -108,6 +111,7 @@ export const EN_MASKS: BuiltinMask[] = [
      temperature: 0.5,
      max_tokens: 2000,
      presence_penalty: 0,
+      frequency_penalty: 0,
      sendMemory: true,
      historyMessageCount: 4,
      compressMessageLengthThreshold: 2000,
--- 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();
@@ -60,7 +62,7 @@ export const useAccessStore = create<AccessControlStore>()(
        );
      },
      fetch() {
-        if (fetchState > 0) return;
+        if (fetchState > 0 || getClientConfig()?.buildMode === "export") return;
        fetchState = 1;
        fetch("/api/config", {
          method: "post",
--- a/app/store/chat.ts
+++ b/app/store/chat.ts
@@ -3,14 +3,19 @@ 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";
+import { estimateTokenLength } from "../utils/token";

 export type ChatMessage = RequestMessage & {
  date: string;
@@ -84,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;
@@ -102,7 +108,30 @@ interface ChatStore {
 }

 function countMessages(msgs: ChatMessage[]) {
-  return msgs.reduce((pre, cur) => pre + cur.content.length, 0);
+  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>()(
@@ -157,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;
        }

@@ -167,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);
@@ -226,6 +271,7 @@ export const useChatStore = create<ChatStore>()(

      onNewMessage(message) {
        get().updateCurrentSession((session) => {
+          session.messages = session.messages.concat();
          session.lastUpdate = Date.now();
        });
        get().updateStat(message);
@@ -236,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({
@@ -248,36 +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.push(userMessage);
-          session.messages.push(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 },
@@ -286,7 +324,9 @@ export const useChatStore = create<ChatStore>()(
            if (message) {
              botMessage.content = message;
            }
-            set(() => ({}));
+            get().updateCurrentSession((session) => {
+              session.messages = session.messages.concat();
+            });
          },
          onFinish(message) {
            botMessage.streaming = false;
@@ -298,7 +338,6 @@ export const useChatStore = create<ChatStore>()(
              sessionIndex,
              botMessage.id ?? messageIndex,
            );
-            set(() => ({}));
          },
          onError(error) {
            const isAborted = error.message.includes("aborted");
@@ -311,8 +350,9 @@ export const useChatStore = create<ChatStore>()(
            botMessage.streaming = false;
            userMessage.isError = !isAborted;
            botMessage.isError = !isAborted;
-
-            set(() => ({}));
+            get().updateCurrentSession((session) => {
+              session.messages = session.messages.concat();
+            });
            ChatControllerPool.remove(
              sessionIndex,
              botMessage.id ?? messageIndex,
@@ -347,53 +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 unmemoried long term memory
-        const shortTermMemoryMessageIndex = Math.max(
-          0,
-          n - modelConfig.historyMessageCount,
-        );
-        const longTermMemoryMessageIndex = session.lastSummarizeIndex;
-        const mostRecentIndex = Math.max(
-          shortTermMemoryMessageIndex,
-          longTermMemoryMessageIndex,
-        );
-        const threshold = modelConfig.compressMessageLengthThreshold * 2;
+        // 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;

-        // get recent messages as many as possible
+        // short term memory
+        const shortTermMemoryStartIndex = Math.max(
+          0,
+          totalMessageCount - modelConfig.historyMessageCount,
+        );
+
+        // 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 much as possible
        const reversedRecentMessages = [];
        for (
-          let i = n - 1, count = 0;
-          i >= mostRecentIndex && count < threshold;
+          let i = totalMessageCount - 1, tokenCount = 0;
+          i >= contextStartIndex && tokenCount < maxTokenThreshold;
          i -= 1
        ) {
          const msg = messages[i];
          if (!msg || msg.isError) continue;
-          count += msg.content.length;
+          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,6 +1,7 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import { StoreKey } from "../constant";
+import { getClientConfig } from "../config/client";
+import { DEFAULT_INPUT_TEMPLATE, StoreKey } from "../constant";

 export enum SubmitKey {
  Enter = "Enter",
@@ -21,7 +22,7 @@ export const DEFAULT_CONFIG = {
  avatar: "1f603",
  fontSize: 14,
  theme: Theme.Auto as Theme,
-  tightBorder: false,
+  tightBorder: !!getClientConfig()?.isApp,
  sendPreviewBubble: true,
  sidebarWidth: 300,

@@ -34,9 +35,11 @@ export const DEFAULT_CONFIG = {
    temperature: 0.5,
    max_tokens: 2000,
    presence_penalty: 0,
+    frequency_penalty: 0,
    sendMemory: true,
    historyMessageCount: 4,
    compressMessageLengthThreshold: 1000,
+    template: DEFAULT_INPUT_TEMPLATE,
  },
 };

@@ -92,6 +95,10 @@ export const ALL_MODELS = [
    name: "gpt-3.5-turbo-16k",
    available: true,
  },
+  {
+    name: "gpt-3.5-turbo-16k-0613",
+    available: true,
+  },
  {
    name: "qwen-v1", // 通义千问
    available: false,
@@ -145,6 +152,9 @@ export const ModalConfigValidator = {
  presence_penalty(x: number) {
    return limitNumber(x, -2, 2, 0);
  },
+  frequency_penalty(x: number) {
+    return limitNumber(x, -2, 2, 0);
+  },
  temperature(x: number) {
    return limitNumber(x, 0, 1, 1);
  },
@@ -167,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/store/update.ts
+++ b/app/store/update.ts
@@ -1,48 +1,96 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import { FETCH_COMMIT_URL, StoreKey } from "../constant";
+import { FETCH_COMMIT_URL, FETCH_TAG_URL, StoreKey } from "../constant";
 import { api } from "../client/api";
 import { getClientConfig } from "../config/client";

 export interface UpdateStore {
+  versionType: "date" | "tag";
  lastUpdate: number;
+  version: string;
  remoteVersion: string;

  used?: number;
  subscription?: number;
  lastUpdateUsage: number;

-  version: string;
  getLatestVersion: (force?: boolean) => Promise<void>;
  updateUsage: (force?: boolean) => Promise<void>;
+
+  formatVersion: (version: string) => string;
 }

 const ONE_MINUTE = 60 * 1000;

+function formatVersionDate(t: string) {
+  const d = new Date(+t);
+  const year = d.getUTCFullYear();
+  const month = d.getUTCMonth() + 1;
+  const day = d.getUTCDate();
+
+  return [
+    year.toString(),
+    month.toString().padStart(2, "0"),
+    day.toString().padStart(2, "0"),
+  ].join("");
+}
+
+async function getVersion(type: "date" | "tag") {
+  if (type === "date") {
+    const data = (await (await fetch(FETCH_COMMIT_URL)).json()) as {
+      commit: {
+        author: { name: string; date: string };
+      };
+      sha: string;
+    }[];
+    const remoteCommitTime = data[0].commit.author.date;
+    const remoteId = new Date(remoteCommitTime).getTime().toString();
+    return remoteId;
+  } else if (type === "tag") {
+    const data = (await (await fetch(FETCH_TAG_URL)).json()) as {
+      commit: { sha: string; url: string };
+      name: string;
+    }[];
+    return data.at(0)?.name;
+  }
+}
+
 export const useUpdateStore = create<UpdateStore>()(
  persist(
    (set, get) => ({
+      versionType: "tag",
      lastUpdate: 0,
+      version: "unknown",
      remoteVersion: "",

      lastUpdateUsage: 0,

-      version: "unknown",
+      formatVersion(version: string) {
+        if (get().versionType === "date") {
+          version = formatVersionDate(version);
+        }
+        return version;
+      },

      async getLatestVersion(force = false) {
-        set(() => ({ version: getClientConfig()?.commitId ?? "unknown" }));
+        const versionType = get().versionType;
+        let version =
+          versionType === "date"
+            ? getClientConfig()?.commitDate
+            : getClientConfig()?.version;

-        const overTenMins = Date.now() - get().lastUpdate > 10 * ONE_MINUTE;
-        if (!force && !overTenMins) return;
+        set(() => ({ version }));
+
+        const shouldCheck =
+          Date.now() - get().lastUpdate > 24 * 60 * ONE_MINUTE;
+        if (!force && !shouldCheck) return;

        set(() => ({
          lastUpdate: Date.now(),
        }));

        try {
-          const data = await (await fetch(FETCH_COMMIT_URL)).json();
-          const remoteCommitTime = data[0].commit.committer.date;
-          const remoteId = new Date(remoteCommitTime).getTime().toString();
+          const remoteId = await getVersion(versionType);
          set(() => ({
            remoteVersion: remoteId,
          }));
--- 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,
@@ -1116,4 +1117,16 @@

 .markdown-body ::-webkit-calendar-picker-indicator {
  filter: invert(50%);
-}
+}
+
+.markdown-body .mermaid {
+  border: var(--border-in-light);
+  margin-bottom: 10px;
+  border-radius: 4px;
+  padding: 10px;
+  background-color: var(--white);
+}
+
+#dmermaid {
+  display: none;
+}
--- 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/app/utils/token.ts
+++ b/app/utils/token.ts
@@ -0,0 +1,22 @@
+export function estimateTokenLength(input: string): number {
+  let tokenLength = 0;
+
+  for (let i = 0; i < input.length; i++) {
+    const charCode = input.charCodeAt(i);
+
+    if (charCode < 128) {
+      // ASCII character
+      if (charCode <= 122 && charCode >= 65) {
+        // a-Z
+        tokenLength += 0.25;
+      } else {
+        tokenLength += 0.5;
+      }
+    } else {
+      // Unicode character
+      tokenLength += 1.5;
+    }
+  }
+
+  return tokenLength;
+}
				`@@ -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>