Merge remote-tracking branch 'up/main'

# Conflicts: # app/store/chat.ts
2025-11-15 21:43:45 +08:00 · 2024-09-26 20:47:29 +08:00
parent 659a389fd4 93ff7d26cc
commit 60bd3c56c1
93 changed files with 2232 additions and 324 deletions
--- a/app/components/artifacts.tsx
+++ b/app/components/artifacts.tsx
@@ -7,7 +7,6 @@ import {
  useImperativeHandle,
 } from "react";
 import { useParams } from "react-router";
-import { useWindowSize } from "@/app/utils";
 import { IconButton } from "./button";
 import { nanoid } from "nanoid";
 import ExportIcon from "../icons/share.svg";
--- a/app/components/auth.module.scss
+++ b/app/components/auth.module.scss
@@ -1,12 +1,70 @@
 .auth-page {
  display: flex;
-  justify-content: center;
+  justify-content: flex-start;
  align-items: center;
  height: 100%;
  width: 100%;
  flex-direction: column;
+  .top-banner {
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 12px 64px;
+    box-sizing: border-box;
+    background: var(--second);
+    .top-banner-inner {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+      line-height: 150%;
+      span {
+        gap: 8px;
+        a {
+          display: inline-flex;
+          align-items: center;
+          text-decoration: none;
+          margin-left: 8px;
+          color: var(--primary);
+        }
+      }
+    }
+    .top-banner-close {
+      cursor: pointer;
+      position: absolute;
+      top: 50%;
+      right: 48px;
+      transform: translateY(-50%);
+    }
+  }
+
+  @media (max-width: 600px) {
+    .top-banner {
+      padding: 12px 24px 12px 12px;
+      .top-banner-close {
+        right: 10px;
+      }
+      .top-banner-inner {
+        .top-banner-logo {
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+
+  .auth-header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    animation: slide-in-from-top ease 0.3s;
+  }

  .auth-logo {
+    margin-top: 10vh;
    transform: scale(1.4);
  }

@@ -14,6 +72,7 @@
    font-size: 24px;
    font-weight: bold;
    line-height: 2;
+    margin-bottom: 1vh;
  }

  .auth-tips {
@@ -24,6 +83,10 @@
    margin: 3vh 0;
  }

+  .auth-input-second {
+    margin: 0 0 3vh 0;
+  }
+
  .auth-actions {
    display: flex;
    justify-content: center;
--- a/app/components/auth.tsx
+++ b/app/components/auth.tsx
@@ -1,21 +1,34 @@
 import styles from "./auth.module.scss";
 import { IconButton } from "./button";
-
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { Path } from "../constant";
+import { Path, SAAS_CHAT_URL } from "../constant";
 import { useAccessStore } from "../store";
 import Locale from "../locales";
-
+import Delete from "../icons/close.svg";
+import Arrow from "../icons/arrow.svg";
+import Logo from "../icons/logo.svg";
+import { useMobileScreen } from "@/app/utils";
 import BotIcon from "../icons/bot.svg";
-import { useEffect } from "react";
 import { getClientConfig } from "../config/client";
+import LeftIcon from "@/app/icons/left.svg";
+import { safeLocalStorage } from "@/app/utils";
+import {
+  trackSettingsPageGuideToCPaymentClick,
+  trackAuthorizationPageButtonToCPaymentClick,
+} from "../utils/auth-settings-events";
+const storage = safeLocalStorage();

 export function AuthPage() {
  const navigate = useNavigate();
  const accessStore = useAccessStore();
-
  const goHome = () => navigate(Path.Home);
  const goChat = () => navigate(Path.Chat);
+  const goSaas = () => {
+    trackAuthorizationPageButtonToCPaymentClick();
+    window.location.href = SAAS_CHAT_URL;
+  };
+
  const resetAccessCode = () => {
    accessStore.update((access) => {
      access.openaiApiKey = "";
@@ -32,6 +45,14 @@ export function AuthPage() {

  return (
    <div className={styles["auth-page"]}>
+      <TopBanner></TopBanner>
+      <div className={styles["auth-header"]}>
+        <IconButton
+          icon={<LeftIcon />}
+          text={Locale.Auth.Return}
+          onClick={() => navigate(Path.Home)}
+        ></IconButton>
+      </div>
      <div className={`no-dark ${styles["auth-logo"]}`}>
        <BotIcon />
      </div>
@@ -65,7 +86,7 @@ export function AuthPage() {
            }}
          />
          <input
-            className={styles["auth-input"]}
+            className={styles["auth-input-second"]}
            type="password"
            placeholder={Locale.Settings.Access.Google.ApiKey.Placeholder}
            value={accessStore.googleApiKey}
@@ -85,13 +106,74 @@ export function AuthPage() {
          onClick={goChat}
        />
        <IconButton
-          text={Locale.Auth.Later}
+          text={Locale.Auth.SaasTips}
          onClick={() => {
-            resetAccessCode();
-            goHome();
+            goSaas();
          }}
        />
      </div>
    </div>
  );
 }
+
+function TopBanner() {
+  const [isHovered, setIsHovered] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+  const isMobile = useMobileScreen();
+  useEffect(() => {
+    // 检查 localStorage 中是否有标记
+    const bannerDismissed = storage.getItem("bannerDismissed");
+    // 如果标记不存在，存储默认值并显示横幅
+    if (!bannerDismissed) {
+      storage.setItem("bannerDismissed", "false");
+      setIsVisible(true); // 显示横幅
+    } else if (bannerDismissed === "true") {
+      // 如果标记为 "true"，则隐藏横幅
+      setIsVisible(false);
+    }
+  }, []);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  const handleClose = () => {
+    setIsVisible(false);
+    storage.setItem("bannerDismissed", "true");
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+  return (
+    <div
+      className={styles["top-banner"]}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className={`${styles["top-banner-inner"]} no-dark`}>
+        <Logo className={styles["top-banner-logo"]}></Logo>
+        <span>
+          {Locale.Auth.TopTips}
+          <a
+            href={SAAS_CHAT_URL}
+            rel="stylesheet"
+            onClick={() => {
+              trackSettingsPageGuideToCPaymentClick();
+            }}
+          >
+            {Locale.Settings.Access.SaasStart.ChatNow}
+            <Arrow style={{ marginLeft: "4px" }} />
+          </a>
+        </span>
+      </div>
+      {(isHovered || isMobile) && (
+        <Delete className={styles["top-banner-close"]} onClick={handleClose} />
+      )}
+    </div>
+  );
+}
--- a/app/components/button.module.scss
+++ b/app/components/button.module.scss
@@ -5,7 +5,6 @@
  align-items: center;
  justify-content: center;
  padding: 10px;
-
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
--- a/app/components/chat-list.tsx
+++ b/app/components/chat-list.tsx
@@ -1,5 +1,4 @@
 import DeleteIcon from "../icons/delete.svg";
-import BotIcon from "../icons/bot.svg";

 import styles from "./home.module.scss";
 import {
@@ -12,7 +11,7 @@ import {
 import { useChatStore } from "../store";

 import Locale from "../locales";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { Path } from "../constant";
 import { MaskAvatar } from "./mask";
 import { Mask } from "../store/mask";
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -15,6 +15,8 @@ import RenameIcon from "../icons/rename.svg";
 import ExportIcon from "../icons/share.svg";
 import ReturnIcon from "../icons/return.svg";
 import CopyIcon from "../icons/copy.svg";
+import SpeakIcon from "../icons/speak.svg";
+import SpeakStopIcon from "../icons/speak-stop.svg";
 import LoadingIcon from "../icons/three-dots.svg";
 import LoadingButtonIcon from "../icons/loading.svg";
 import PromptIcon from "../icons/prompt.svg";
@@ -43,6 +45,7 @@ import QualityIcon from "../icons/hd.svg";
 import StyleIcon from "../icons/palette.svg";
 import PluginIcon from "../icons/plugin.svg";
 import ShortcutkeyIcon from "../icons/shortcutkey.svg";
+import ReloadIcon from "../icons/reload.svg";

 import {
  ChatMessage,
@@ -96,7 +99,8 @@ import {
 import { useNavigate } from "react-router-dom";
 import {
  CHAT_PAGE_SIZE,
-  LAST_INPUT_KEY,
+  DEFAULT_TTS_ENGINE,
+  ModelProvider,
  Path,
  REQUEST_TIMEOUT_MS,
  UNFINISHED_INPUT,
@@ -113,6 +117,11 @@ import { useAllModels } from "../utils/hooks";
 import { MultimodalContent } from "../client/api";

 const localStorage = safeLocalStorage();
+import { ClientApi } from "../client/api";
+import { createTTSPlayer } from "../utils/audio";
+import { MsEdgeTTS, OUTPUT_FORMAT } from "../utils/ms_edge_tts";
+
+const ttsPlayer = createTTSPlayer();

 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
  loading: () => <LoadingIcon />,
@@ -443,6 +452,7 @@ export function ChatActions(props: {
  hitBottom: boolean;
  uploading: boolean;
  setShowShortcutKeyModal: React.Dispatch<React.SetStateAction<boolean>>;
+  setUserInput: (input: string) => void;
 }) {
  const config = useAppConfig();
  const navigate = useNavigate();
@@ -520,8 +530,8 @@ export function ChatActions(props: {

    // if current model is not available
    // switch to first available model
-    const isUnavaliableModel = !models.some((m) => m.name === currentModel);
-    if (isUnavaliableModel && models.length > 0) {
+    const isUnavailableModel = !models.some((m) => m.name === currentModel);
+    if (isUnavailableModel && models.length > 0) {
      // show next model to default model if exist
      let nextModel = models.find((model) => model.isDefault) || models[0];
      chatStore.updateCurrentSession((session) => {
@@ -625,7 +635,7 @@ export function ChatActions(props: {
          items={models.map((m) => ({
            title: `${m.displayName}${
              m?.provider?.providerName
-                ? "(" + m?.provider?.providerName + ")"
+                ? " (" + m?.provider?.providerName + ")"
                : ""
            }`,
            value: `${m.name}@${m?.provider?.providerName}`,
@@ -982,6 +992,7 @@ function _Chat() {
      chatStore.updateCurrentSession(
        (session) => (session.clearContextIndex = session.messages.length),
      ),
+    fork: () => chatStore.forkSession(),
    del: () => chatStore.deleteSession(chatStore.currentSessionIndex),
  });

@@ -1195,10 +1206,55 @@ function _Chat() {
    });
  };

+  const accessStore = useAccessStore();
+  const [speechStatus, setSpeechStatus] = useState(false);
+  const [speechLoading, setSpeechLoading] = useState(false);
+  async function openaiSpeech(text: string) {
+    if (speechStatus) {
+      ttsPlayer.stop();
+      setSpeechStatus(false);
+    } else {
+      var api: ClientApi;
+      api = new ClientApi(ModelProvider.GPT);
+      const config = useAppConfig.getState();
+      setSpeechLoading(true);
+      ttsPlayer.init();
+      let audioBuffer: ArrayBuffer;
+      const { markdownToTxt } = require("markdown-to-txt");
+      const textContent = markdownToTxt(text);
+      if (config.ttsConfig.engine !== DEFAULT_TTS_ENGINE) {
+        const edgeVoiceName = accessStore.edgeVoiceName();
+        const tts = new MsEdgeTTS();
+        await tts.setMetadata(
+          edgeVoiceName,
+          OUTPUT_FORMAT.AUDIO_24KHZ_96KBITRATE_MONO_MP3,
+        );
+        audioBuffer = await tts.toArrayBuffer(textContent);
+      } else {
+        audioBuffer = await api.llm.speech({
+          model: config.ttsConfig.model,
+          input: textContent,
+          voice: config.ttsConfig.voice,
+          speed: config.ttsConfig.speed,
+        });
+      }
+      setSpeechStatus(true);
+      ttsPlayer
+        .play(audioBuffer, () => {
+          setSpeechStatus(false);
+        })
+        .catch((e) => {
+          console.error("[OpenAI Speech]", e);
+          showToast(prettyObject(e));
+          setSpeechStatus(false);
+        })
+        .finally(() => setSpeechLoading(false));
+    }
+  }
+
  const context: RenderMessage[] = useMemo(() => {
    return session.mask.hideContext ? [] : session.mask.context.slice();
  }, [session.mask.context, session.mask.hideContext]);
-  const accessStore = useAccessStore();

  if (
    context.length === 0 &&
@@ -1553,6 +1609,17 @@ function _Chat() {
          </div>
        </div>
        <div className="window-actions">
+          <div className="window-action-button">
+            <IconButton
+              icon={<ReloadIcon />}
+              bordered
+              title={Locale.Chat.Actions.RefreshTitle}
+              onClick={() => {
+                showToast(Locale.Chat.Actions.RefreshToast);
+                chatStore.summarizeSession(true);
+              }}
+            />
+          </div>
          {!isMobileScreen && (
            <div className="window-action-button">
              <IconButton
@@ -1724,6 +1791,25 @@ function _Chat() {
                                  )
                                }
                              />
+                              {config.ttsConfig.enable && (
+                                <ChatAction
+                                  text={
+                                    speechStatus
+                                      ? Locale.Chat.Actions.StopSpeech
+                                      : Locale.Chat.Actions.Speech
+                                  }
+                                  icon={
+                                    speechStatus ? (
+                                      <SpeakStopIcon />
+                                    ) : (
+                                      <SpeakIcon />
+                                    )
+                                  }
+                                  onClick={() =>
+                                    openaiSpeech(getMessageTextContent(message))
+                                  }
+                                />
+                              )}
                            </>
                          )}
                        </div>
@@ -1842,6 +1928,7 @@ function _Chat() {
            onSearch("");
          }}
          setShowShortcutKeyModal={setShowShortcutKeyModal}
+          setUserInput={setUserInput}
        />
        <label
          className={`${styles["chat-input-panel-inner"]} ${
--- a/app/components/exporter.tsx
+++ b/app/components/exporter.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import { ChatMessage, ModelType, useAppConfig, useChatStore } from "../store";
+import { ChatMessage, useAppConfig, useChatStore } from "../store";
 import Locale from "../locales";
 import styles from "./exporter.module.scss";
 import {
--- a/app/components/markdown.tsx
+++ b/app/components/markdown.tsx
@@ -22,6 +22,8 @@ import {
 import { useChatStore } from "../store";
 import { IconButton } from "./button";

+import { useAppConfig } from "../store/config";
+
 export function Mermaid(props: { code: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const [hasError, setHasError] = useState(false);
@@ -92,7 +94,9 @@ export function PreCode(props: { children: any }) {
    }
  }, 600);

-  const enableArtifacts = session.mask?.enableArtifacts !== false;
+  const config = useAppConfig();
+  const enableArtifacts =
+    session.mask?.enableArtifacts !== false && config.enableArtifacts;

  //Wrap the paragraph for plain-text
  useEffect(() => {
@@ -128,8 +132,9 @@ export function PreCode(props: { children: any }) {
          className="copy-code-button"
          onClick={() => {
            if (ref.current) {
-              const code = ref.current.innerText;
-              copyToClipboard(code);
+              copyToClipboard(
+                ref.current.querySelector("code")?.innerText ?? "",
+              );
            }
          }}
        ></span>
@@ -278,6 +283,20 @@ function _MarkDownContent(props: { content: string }) {
        p: (pProps) => <p {...pProps} dir="auto" />,
        a: (aProps) => {
          const href = aProps.href || "";
+          if (/\.(aac|mp3|opus|wav)$/.test(href)) {
+            return (
+              <figure>
+                <audio controls src={href}></audio>
+              </figure>
+            );
+          }
+          if (/\.(3gp|3g2|webm|ogv|mpeg|mp4|avi)$/.test(href)) {
+            return (
+              <video controls width="99.9%">
+                <source src={href} />
+              </video>
+            );
+          }
          const isInternal = /^\/#/i.test(href);
          const target = isInternal ? "_self" : aProps.target ?? "_blank";
          return <a {...aProps} target={target} />;
--- a/app/components/mask.tsx
+++ b/app/components/mask.tsx
@@ -37,7 +37,7 @@ import Locale, { AllLangs, ALL_LANG_OPTIONS, Lang } from "../locales";
 import { useNavigate } from "react-router-dom";

 import chatStyle from "./chat.module.scss";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import {
  copyToClipboard,
  downloadAs,
@@ -48,7 +48,6 @@ import { Updater } from "../typing";
 import { ModelConfigList } from "./model-config";
 import { FileName, Path } from "../constant";
 import { BUILTIN_MASK_STORE } from "../masks";
-import { nanoid } from "nanoid";
 import {
  DragDropContext,
  Droppable,
@@ -167,21 +166,23 @@ export function MaskConfig(props: {
          ></input>
        </ListItem>

-        <ListItem
-          title={Locale.Mask.Config.Artifacts.Title}
-          subTitle={Locale.Mask.Config.Artifacts.SubTitle}
-        >
-          <input
-            aria-label={Locale.Mask.Config.Artifacts.Title}
-            type="checkbox"
-            checked={props.mask.enableArtifacts !== false}
-            onChange={(e) => {
-              props.updateMask((mask) => {
-                mask.enableArtifacts = e.currentTarget.checked;
-              });
-            }}
-          ></input>
-        </ListItem>
+        {globalConfig.enableArtifacts && (
+          <ListItem
+            title={Locale.Mask.Config.Artifacts.Title}
+            subTitle={Locale.Mask.Config.Artifacts.SubTitle}
+          >
+            <input
+              aria-label={Locale.Mask.Config.Artifacts.Title}
+              type="checkbox"
+              checked={props.mask.enableArtifacts !== false}
+              onChange={(e) => {
+                props.updateMask((mask) => {
+                  mask.enableArtifacts = e.currentTarget.checked;
+                });
+              }}
+            ></input>
+          </ListItem>
+        )}

        {!props.shouldSyncFromGlobal ? (
          <ListItem
--- a/app/components/model-config.module.scss
+++ b/app/components/model-config.module.scss
@@ -0,0 +1,7 @@
+.select-compress-model {
+  width: 60%;
+  select {
+    max-width: 100%;
+    white-space: normal;
+  }
+}
--- a/app/components/model-config.tsx
+++ b/app/components/model-config.tsx
@@ -5,13 +5,20 @@ import Locale from "../locales";
 import { InputRange } from "./input-range";
 import { ListItem, Select } from "./ui-lib";
 import { useAllModels } from "../utils/hooks";
+import { groupBy } from "lodash-es";
+import styles from "./model-config.module.scss";

 export function ModelConfigList(props: {
  modelConfig: ModelConfig;
  updateConfig: (updater: (config: ModelConfig) => void) => void;
 }) {
  const allModels = useAllModels();
+  const groupModels = groupBy(
+    allModels.filter((v) => v.available),
+    "provider.providerName",
+  );
  const value = `${props.modelConfig.model}@${props.modelConfig?.providerName}`;
+  const compressModelValue = `${props.modelConfig.compressModel}@${props.modelConfig?.compressProviderName}`;

  return (
    <>
@@ -19,6 +26,7 @@ export function ModelConfigList(props: {
        <Select
          aria-label={Locale.Settings.Model}
          value={value}
+          align="left"
          onChange={(e) => {
            const [model, providerName] = e.currentTarget.value.split("@");
            props.updateConfig((config) => {
@@ -27,13 +35,15 @@ export function ModelConfigList(props: {
            });
          }}
        >
-          {allModels
-            .filter((v) => v.available)
-            .map((v, i) => (
-              <option value={`${v.name}@${v.provider?.providerName}`} key={i}>
-                {v.displayName}({v.provider?.providerName})
-              </option>
-            ))}
+          {Object.keys(groupModels).map((providerName, index) => (
+            <optgroup label={providerName} key={index}>
+              {groupModels[providerName].map((v, i) => (
+                <option value={`${v.name}@${v.provider?.providerName}`} key={i}>
+                  {v.displayName}
+                </option>
+              ))}
+            </optgroup>
+          ))}
        </Select>
      </ListItem>
      <ListItem
@@ -228,6 +238,31 @@ export function ModelConfigList(props: {
          }
        ></input>
      </ListItem>
+      <ListItem
+        title={Locale.Settings.CompressModel.Title}
+        subTitle={Locale.Settings.CompressModel.SubTitle}
+      >
+        <Select
+          className={styles["select-compress-model"]}
+          aria-label={Locale.Settings.CompressModel.Title}
+          value={compressModelValue}
+          onChange={(e) => {
+            const [model, providerName] = e.currentTarget.value.split("@");
+            props.updateConfig((config) => {
+              config.compressModel = ModalConfigValidator.model(model);
+              config.compressProviderName = providerName as ServiceProvider;
+            });
+          }}
+        >
+          {allModels
+            .filter((v) => v.available)
+            .map((v, i) => (
+              <option value={`${v.name}@${v.provider?.providerName}`} key={i}>
+                {v.displayName}({v.provider?.providerName})
+              </option>
+            ))}
+        </Select>
+      </ListItem>
    </>
  );
 }
--- a/app/components/plugin.module.scss
+++ b/app/components/plugin.module.scss
@@ -10,7 +10,29 @@
    max-height: 240px;
    overflow-y: auto;
    white-space: pre-wrap;
-    min-width: 300px;
+    min-width: 280px;
  }
 }

+.plugin-schema {
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row;
+
+  input {
+    margin-right: 20px;
+
+    @media screen and (max-width: 600px) {
+        margin-right: 0px;
+      }
+  }
+
+  @media screen and (max-width: 600px) {
+    flex-direction: column;
+    gap: 5px;
+
+    button {
+      padding: 10px;
+    }
+  }
+}
--- a/app/components/plugin.tsx
+++ b/app/components/plugin.tsx
@@ -12,7 +12,6 @@ import EditIcon from "../icons/edit.svg";
 import AddIcon from "../icons/add.svg";
 import CloseIcon from "../icons/close.svg";
 import DeleteIcon from "../icons/delete.svg";
-import EyeIcon from "../icons/eye.svg";
 import ConfirmIcon from "../icons/confirm.svg";
 import ReloadIcon from "../icons/reload.svg";
 import GithubIcon from "../icons/github.svg";
@@ -28,8 +27,7 @@ import {
 } from "./ui-lib";
 import Locale from "../locales";
 import { useNavigate } from "react-router-dom";
-import { useEffect, useState } from "react";
-import { getClientConfig } from "../config/client";
+import { useState } from "react";

 export function PluginPage() {
  const navigate = useNavigate();
@@ -209,19 +207,11 @@ export function PluginPage() {
                  </div>
                </div>
                <div className={styles["mask-actions"]}>
-                  {m.builtin ? (
-                    <IconButton
-                      icon={<EyeIcon />}
-                      text={Locale.Plugin.Item.View}
-                      onClick={() => setEditingPluginId(m.id)}
-                    />
-                  ) : (
-                    <IconButton
-                      icon={<EditIcon />}
-                      text={Locale.Plugin.Item.Edit}
-                      onClick={() => setEditingPluginId(m.id)}
-                    />
-                  )}
+                  <IconButton
+                    icon={<EditIcon />}
+                    text={Locale.Plugin.Item.Edit}
+                    onClick={() => setEditingPluginId(m.id)}
+                  />
                  {!m.builtin && (
                    <IconButton
                      icon={<DeleteIcon />}
@@ -325,30 +315,13 @@ export function PluginPage() {
                  ></PasswordInput>
                </ListItem>
              )}
-              {!getClientConfig()?.isApp && (
-                <ListItem
-                  title={Locale.Plugin.Auth.Proxy}
-                  subTitle={Locale.Plugin.Auth.ProxyDescription}
-                >
-                  <input
-                    type="checkbox"
-                    checked={editingPlugin?.usingProxy}
-                    style={{ minWidth: 16 }}
-                    onChange={(e) => {
-                      pluginStore.updatePlugin(editingPlugin.id, (plugin) => {
-                        plugin.usingProxy = e.currentTarget.checked;
-                      });
-                    }}
-                  ></input>
-                </ListItem>
-              )}
            </List>
            <List>
              <ListItem title={Locale.Plugin.EditModal.Content}>
-                <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                <div className={pluginStyles["plugin-schema"]}>
                  <input
                    type="text"
-                    style={{ minWidth: 200, marginRight: 20 }}
+                    style={{ minWidth: 200 }}
                    onInput={(e) => setLoadUrl(e.currentTarget.value)}
                  ></input>
                  <IconButton
--- a/app/components/settings.module.scss
+++ b/app/components/settings.module.scss
@@ -72,3 +72,9 @@
    }
  }
 }
+
+.subtitle-button {
+  button {
+    overflow:visible ;
+  }
+}
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -9,6 +9,7 @@ import CopyIcon from "../icons/copy.svg";
 import ClearIcon from "../icons/clear.svg";
 import LoadingIcon from "../icons/three-dots.svg";
 import EditIcon from "../icons/edit.svg";
+import FireIcon from "../icons/fire.svg";
 import EyeIcon from "../icons/eye.svg";
 import DownloadIcon from "../icons/download.svg";
 import UploadIcon from "../icons/upload.svg";
@@ -18,7 +19,7 @@ import ConfirmIcon from "../icons/confirm.svg";
 import ConnectionIcon from "../icons/connection.svg";
 import CloudSuccessIcon from "../icons/cloud-success.svg";
 import CloudFailIcon from "../icons/cloud-fail.svg";
-
+import { trackSettingsPageGuideToCPaymentClick } from "../utils/auth-settings-events";
 import {
  Input,
  List,
@@ -69,6 +70,7 @@ import {
  UPDATE_URL,
  Stability,
  Iflytek,
+  SAAS_CHAT_URL,
 } from "../constant";
 import { Prompt, SearchService, usePromptStore } from "../store/prompt";
 import { ErrorBoundary } from "./error";
@@ -80,6 +82,7 @@ import { useSyncStore } from "../store/sync";
 import { nanoid } from "nanoid";
 import { useMaskStore } from "../store/mask";
 import { ProviderType } from "../utils/cloud";
+import { TTSConfigList } from "./tts-config";

 function EditPromptModal(props: { id: string; onClose: () => void }) {
  const promptStore = usePromptStore();
@@ -700,6 +703,31 @@ export function Settings() {
    </ListItem>
  );

+  const saasStartComponent = (
+    <ListItem
+      className={styles["subtitle-button"]}
+      title={
+        Locale.Settings.Access.SaasStart.Title +
+        `${Locale.Settings.Access.SaasStart.Label}`
+      }
+      subTitle={Locale.Settings.Access.SaasStart.SubTitle}
+    >
+      <IconButton
+        aria={
+          Locale.Settings.Access.SaasStart.Title +
+          Locale.Settings.Access.SaasStart.ChatNow
+        }
+        icon={<FireIcon />}
+        type={"primary"}
+        text={Locale.Settings.Access.SaasStart.ChatNow}
+        onClick={() => {
+          trackSettingsPageGuideToCPaymentClick();
+          window.location.href = SAAS_CHAT_URL;
+        }}
+      />
+    </ListItem>
+  );
+
  const useCustomConfigComponent = // Conditionally render the following ListItem based on clientConfig.isApp
    !clientConfig?.isApp && ( // only show if isApp is false
      <ListItem
@@ -1479,6 +1507,23 @@ export function Settings() {
              }
            ></input>
          </ListItem>
+
+          <ListItem
+            title={Locale.Mask.Config.Artifacts.Title}
+            subTitle={Locale.Mask.Config.Artifacts.SubTitle}
+          >
+            <input
+              aria-label={Locale.Mask.Config.Artifacts.Title}
+              type="checkbox"
+              checked={config.enableArtifacts}
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.enableArtifacts = e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </ListItem>
        </List>

        <SyncItems />
@@ -1555,6 +1600,7 @@ export function Settings() {
        </List>

        <List id={SlotID.CustomModel}>
+          {saasStartComponent}
          {accessCodeComponent}

          {!accessStore.hideUserApiKey && (
@@ -1661,6 +1707,17 @@ export function Settings() {
          <UserPromptModal onClose={() => setShowPromptModal(false)} />
        )}

+        <List>
+          <TTSConfigList
+            ttsConfig={config.ttsConfig}
+            updateConfig={(updater) => {
+              const ttsConfig = { ...config.ttsConfig };
+              updater(ttsConfig);
+              config.update((config) => (config.ttsConfig = ttsConfig));
+            }}
+          />
+        </List>
+
        <DangerItems />
      </div>
    </ErrorBoundary>
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -7,7 +7,6 @@ import SettingsIcon from "../icons/settings.svg";
 import GithubIcon from "../icons/github.svg";
 import ChatGptIcon from "../icons/chatgpt.svg";
 import AddIcon from "../icons/add.svg";
-import CloseIcon from "../icons/close.svg";
 import DeleteIcon from "../icons/delete.svg";
 import MaskIcon from "../icons/mask.svg";
 import DragIcon from "../icons/drag.svg";
@@ -254,11 +253,6 @@ export function SideBar(props: { className?: string }) {
        {showPluginSelector && (
          <Selector
            items={[
-              {
-                title: "👇 Please select the plugin you need to use",
-                value: "-",
-                disable: true,
-              },
              ...PLUGINS.map((item) => {
                return {
                  title: item.name,
--- a/app/components/tts-config.tsx
+++ b/app/components/tts-config.tsx
@@ -0,0 +1,133 @@
+import { TTSConfig, TTSConfigValidator } from "../store";
+
+import Locale from "../locales";
+import { ListItem, Select } from "./ui-lib";
+import {
+  DEFAULT_TTS_ENGINE,
+  DEFAULT_TTS_ENGINES,
+  DEFAULT_TTS_MODELS,
+  DEFAULT_TTS_VOICES,
+} from "../constant";
+import { InputRange } from "./input-range";
+
+export function TTSConfigList(props: {
+  ttsConfig: TTSConfig;
+  updateConfig: (updater: (config: TTSConfig) => void) => void;
+}) {
+  return (
+    <>
+      <ListItem
+        title={Locale.Settings.TTS.Enable.Title}
+        subTitle={Locale.Settings.TTS.Enable.SubTitle}
+      >
+        <input
+          type="checkbox"
+          checked={props.ttsConfig.enable}
+          onChange={(e) =>
+            props.updateConfig(
+              (config) => (config.enable = e.currentTarget.checked),
+            )
+          }
+        ></input>
+      </ListItem>
+      {/* <ListItem
+        title={Locale.Settings.TTS.Autoplay.Title}
+        subTitle={Locale.Settings.TTS.Autoplay.SubTitle}
+      >
+        <input
+          type="checkbox"
+          checked={props.ttsConfig.autoplay}
+          onChange={(e) =>
+            props.updateConfig(
+              (config) => (config.autoplay = e.currentTarget.checked),
+            )
+          }
+        ></input>
+      </ListItem> */}
+      <ListItem title={Locale.Settings.TTS.Engine}>
+        <Select
+          value={props.ttsConfig.engine}
+          onChange={(e) => {
+            props.updateConfig(
+              (config) =>
+                (config.engine = TTSConfigValidator.engine(
+                  e.currentTarget.value,
+                )),
+            );
+          }}
+        >
+          {DEFAULT_TTS_ENGINES.map((v, i) => (
+            <option value={v} key={i}>
+              {v}
+            </option>
+          ))}
+        </Select>
+      </ListItem>
+      {props.ttsConfig.engine === DEFAULT_TTS_ENGINE && (
+        <>
+          <ListItem title={Locale.Settings.TTS.Model}>
+            <Select
+              value={props.ttsConfig.model}
+              onChange={(e) => {
+                props.updateConfig(
+                  (config) =>
+                    (config.model = TTSConfigValidator.model(
+                      e.currentTarget.value,
+                    )),
+                );
+              }}
+            >
+              {DEFAULT_TTS_MODELS.map((v, i) => (
+                <option value={v} key={i}>
+                  {v}
+                </option>
+              ))}
+            </Select>
+          </ListItem>
+          <ListItem
+            title={Locale.Settings.TTS.Voice.Title}
+            subTitle={Locale.Settings.TTS.Voice.SubTitle}
+          >
+            <Select
+              value={props.ttsConfig.voice}
+              onChange={(e) => {
+                props.updateConfig(
+                  (config) =>
+                    (config.voice = TTSConfigValidator.voice(
+                      e.currentTarget.value,
+                    )),
+                );
+              }}
+            >
+              {DEFAULT_TTS_VOICES.map((v, i) => (
+                <option value={v} key={i}>
+                  {v}
+                </option>
+              ))}
+            </Select>
+          </ListItem>
+          <ListItem
+            title={Locale.Settings.TTS.Speed.Title}
+            subTitle={Locale.Settings.TTS.Speed.SubTitle}
+          >
+            <InputRange
+              aria={Locale.Settings.TTS.Speed.Title}
+              value={props.ttsConfig.speed?.toFixed(1)}
+              min="0.3"
+              max="4.0"
+              step="0.1"
+              onChange={(e) => {
+                props.updateConfig(
+                  (config) =>
+                    (config.speed = TTSConfigValidator.speed(
+                      e.currentTarget.valueAsNumber,
+                    )),
+                );
+              }}
+            ></InputRange>
+          </ListItem>
+        </>
+      )}
+    </>
+  );
+}
--- a/app/components/tts.module.scss
+++ b/app/components/tts.module.scss
@@ -0,0 +1,119 @@
+@import "../styles/animation.scss";
+.plugin-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .plugin-page-body {
+    padding: 20px;
+    overflow-y: auto;
+
+    .plugin-filter {
+      width: 100%;
+      max-width: 100%;
+      margin-bottom: 20px;
+      animation: slide-in ease 0.3s;
+      height: 40px;
+
+      display: flex;
+
+      .search-bar {
+        flex-grow: 1;
+        max-width: 100%;
+        min-width: 0;
+        outline: none;
+      }
+
+      .search-bar:focus {
+        border: 1px solid var(--primary);
+      }
+
+      .plugin-filter-lang {
+        height: 100%;
+        margin-left: 10px;
+      }
+
+      .plugin-create {
+        height: 100%;
+        margin-left: 10px;
+        box-sizing: border-box;
+        min-width: 80px;
+      }
+    }
+
+    .plugin-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 20px;
+      border: var(--border-in-light);
+      animation: slide-in ease 0.3s;
+
+      &:not(:last-child) {
+        border-bottom: 0;
+      }
+
+      &:first-child {
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+      }
+
+      &:last-child {
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+      }
+
+      .plugin-header {
+        display: flex;
+        align-items: center;
+
+        .plugin-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 10px;
+        }
+
+        .plugin-title {
+          .plugin-name {
+            font-size: 14px;
+            font-weight: bold;
+          }
+          .plugin-info {
+            font-size: 12px;
+          }
+          .plugin-runtime-warning {
+            font-size: 12px;
+            color: #f86c6c;
+          }
+        }
+      }
+
+      .plugin-actions {
+        display: flex;
+        flex-wrap: nowrap;
+        transition: all ease 0.3s;
+        justify-content: center;
+        align-items: center;
+      }
+
+      @media screen and (max-width: 600px) {
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 10px;
+        border-radius: 10px;
+        margin-bottom: 20px;
+        box-shadow: var(--card-shadow);
+
+        &:not(:last-child) {
+          border-bottom: var(--border-in-light);
+        }
+
+        .plugin-actions {
+          width: 100%;
+          justify-content: space-between;
+          padding-top: 10px;
+        }
+      }
+    }
+  }
+}
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -62,14 +62,14 @@
    }
  }

-  &.vertical{
+  &.vertical {
    flex-direction: column;
    align-items: start;
-    .list-header{
-      .list-item-title{
+    .list-header {
+      .list-item-title {
        margin-bottom: 5px;
      }
-      .list-item-sub-title{
+      .list-item-sub-title {
        margin-bottom: 2px;
      }
    }
@@ -252,6 +252,12 @@
  position: relative;
  max-width: fit-content;

+  &.left-align-option {
+    option {
+      text-align: left;
+    }
+  }
+
  .select-with-icon-select {
    height: 100%;
    border: var(--border-in-light);
@@ -304,7 +310,7 @@
  justify-content: center;
  z-index: 999;

-  .selector-item-disabled{
+  .selector-item-disabled {
    opacity: 0.6;
  }

@@ -330,3 +336,4 @@
    }
  }
 }
+
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -292,13 +292,19 @@ export function PasswordInput(

 export function Select(
  props: React.DetailedHTMLProps<
-    React.SelectHTMLAttributes<HTMLSelectElement>,
+    React.SelectHTMLAttributes<HTMLSelectElement> & {
+      align?: "left" | "center";
+    },
    HTMLSelectElement
  >,
 ) {
-  const { className, children, ...otherProps } = props;
+  const { className, children, align, ...otherProps } = props;
  return (
-    <div className={`${styles["select-with-icon"]} ${className}`}>
+    <div
+      className={`${styles["select-with-icon"]} ${
+        align === "left" ? styles["left-align-option"] : ""
+      } ${className}`}
+    >
      <select className={styles["select-with-icon-select"]} {...otherProps}>
        {children}
      </select>