Merge branch 'ChatGPTNextWeb:main' into main

2025-11-17 06:23:44 +08:00 · 2024-11-06 15:51:09 +08:00
parent 013d873da8 6ded4e96e7
commit 1d368a0cfa
57 changed files with 1492 additions and 207 deletions
--- a/app/components/auth.tsx
+++ b/app/components/auth.tsx
@@ -11,6 +11,7 @@ import Logo from "../icons/logo.svg";
 import { useMobileScreen } from "@/app/utils";
 import BotIcon from "../icons/bot.svg";
 import { getClientConfig } from "../config/client";
+import { PasswordInput } from "./ui-lib";
 import LeftIcon from "@/app/icons/left.svg";
 import { safeLocalStorage } from "@/app/utils";
 import {
@@ -59,36 +60,43 @@ export function AuthPage() {
      <div className={styles["auth-title"]}>{Locale.Auth.Title}</div>
      <div className={styles["auth-tips"]}>{Locale.Auth.Tips}</div>

-      <input
-        className={styles["auth-input"]}
-        type="password"
-        placeholder={Locale.Auth.Input}
+      <PasswordInput
+        style={{ marginTop: "3vh", marginBottom: "3vh" }}
+        aria={Locale.Settings.ShowPassword}
+        aria-label={Locale.Auth.Input}
        value={accessStore.accessCode}
+        type="text"
+        placeholder={Locale.Auth.Input}
        onChange={(e) => {
          accessStore.update(
            (access) => (access.accessCode = e.currentTarget.value),
          );
        }}
      />
+
      {!accessStore.hideUserApiKey ? (
        <>
          <div className={styles["auth-tips"]}>{Locale.Auth.SubTips}</div>
-          <input
-            className={styles["auth-input"]}
-            type="password"
-            placeholder={Locale.Settings.Access.OpenAI.ApiKey.Placeholder}
+          <PasswordInput
+            style={{ marginTop: "3vh", marginBottom: "3vh" }}
+            aria={Locale.Settings.ShowPassword}
+            aria-label={Locale.Settings.Access.OpenAI.ApiKey.Placeholder}
            value={accessStore.openaiApiKey}
+            type="text"
+            placeholder={Locale.Settings.Access.OpenAI.ApiKey.Placeholder}
            onChange={(e) => {
              accessStore.update(
                (access) => (access.openaiApiKey = e.currentTarget.value),
              );
            }}
          />
-          <input
-            className={styles["auth-input-second"]}
-            type="password"
-            placeholder={Locale.Settings.Access.Google.ApiKey.Placeholder}
+          <PasswordInput
+            style={{ marginTop: "3vh", marginBottom: "3vh" }}
+            aria={Locale.Settings.ShowPassword}
+            aria-label={Locale.Settings.Access.Google.ApiKey.Placeholder}
            value={accessStore.googleApiKey}
+            type="text"
+            placeholder={Locale.Settings.Access.Google.ApiKey.Placeholder}
            onChange={(e) => {
              accessStore.update(
                (access) => (access.googleApiKey = e.currentTarget.value),
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -115,11 +115,15 @@ import { getClientConfig } from "../config/client";
 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";

+import { isEmpty } from "lodash-es";
+import { getModelProvider } from "../utils/model";
+
+const localStorage = safeLocalStorage();
+
 const ttsPlayer = createTTSPlayer();

 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
@@ -145,7 +149,8 @@ export function SessionConfigModel(props: { onClose: () => void }) {
            text={Locale.Chat.Config.Reset}
            onClick={async () => {
              if (await showConfirm(Locale.Memory.ResetConfirm)) {
-                chatStore.updateCurrentSession(
+                chatStore.updateTargetSession(
+                  session,
                  (session) => (session.memoryPrompt = ""),
                );
              }
@@ -170,7 +175,10 @@ export function SessionConfigModel(props: { onClose: () => void }) {
          updateMask={(updater) => {
            const mask = { ...session.mask };
            updater(mask);
-            chatStore.updateCurrentSession((session) => (session.mask = mask));
+            chatStore.updateTargetSession(
+              session,
+              (session) => (session.mask = mask),
+            );
          }}
          shouldSyncFromGlobal
          extraListItems={
@@ -342,12 +350,14 @@ export function PromptHints(props: {

 function ClearContextDivider() {
  const chatStore = useChatStore();
+  const session = chatStore.currentSession();

  return (
    <div
      className={styles["clear-context"]}
      onClick={() =>
-        chatStore.updateCurrentSession(
+        chatStore.updateTargetSession(
+          session,
          (session) => (session.clearContextIndex = undefined),
        )
      }
@@ -457,6 +467,7 @@ export function ChatActions(props: {
  const navigate = useNavigate();
  const chatStore = useChatStore();
  const pluginStore = usePluginStore();
+  const session = chatStore.currentSession();

  // switch themes
  const theme = config.theme;
@@ -473,10 +484,9 @@ export function ChatActions(props: {
  const stopAll = () => ChatControllerPool.stopAll();

  // switch model
-  const currentModel = chatStore.currentSession().mask.modelConfig.model;
+  const currentModel = session.mask.modelConfig.model;
  const currentProviderName =
-    chatStore.currentSession().mask.modelConfig?.providerName ||
-    ServiceProvider.OpenAI;
+    session.mask.modelConfig?.providerName || ServiceProvider.OpenAI;
  const allModels = useAllModels();
  const models = useMemo(() => {
    const filteredModels = allModels.filter((m) => m.available);
@@ -510,12 +520,9 @@ export function ChatActions(props: {
  const dalle3Sizes: DalleSize[] = ["1024x1024", "1792x1024", "1024x1792"];
  const dalle3Qualitys: DalleQuality[] = ["standard", "hd"];
  const dalle3Styles: DalleStyle[] = ["vivid", "natural"];
-  const currentSize =
-    chatStore.currentSession().mask.modelConfig?.size ?? "1024x1024";
-  const currentQuality =
-    chatStore.currentSession().mask.modelConfig?.quality ?? "standard";
-  const currentStyle =
-    chatStore.currentSession().mask.modelConfig?.style ?? "vivid";
+  const currentSize = session.mask.modelConfig?.size ?? "1024x1024";
+  const currentQuality = session.mask.modelConfig?.quality ?? "standard";
+  const currentStyle = session.mask.modelConfig?.style ?? "vivid";

  const isMobileScreen = useMobileScreen();

@@ -533,7 +540,7 @@ export function ChatActions(props: {
    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) => {
+      chatStore.updateTargetSession(session, (session) => {
        session.mask.modelConfig.model = nextModel.name;
        session.mask.modelConfig.providerName = nextModel?.provider
          ?.providerName as ServiceProvider;
@@ -544,7 +551,7 @@ export function ChatActions(props: {
          : nextModel.name,
      );
    }
-  }, [chatStore, currentModel, models]);
+  }, [chatStore, currentModel, models, session]);

  return (
    <div className={styles["chat-input-actions"]}>
@@ -611,7 +618,7 @@ export function ChatActions(props: {
        text={Locale.Chat.InputActions.Clear}
        icon={<BreakIcon />}
        onClick={() => {
-          chatStore.updateCurrentSession((session) => {
+          chatStore.updateTargetSession(session, (session) => {
            if (session.clearContextIndex === session.messages.length) {
              session.clearContextIndex = undefined;
            } else {
@@ -642,8 +649,8 @@ export function ChatActions(props: {
          onClose={() => setShowModelSelector(false)}
          onSelection={(s) => {
            if (s.length === 0) return;
-            const [model, providerName] = s[0].split("@");
-            chatStore.updateCurrentSession((session) => {
+            const [model, providerName] = getModelProvider(s[0]);
+            chatStore.updateTargetSession(session, (session) => {
              session.mask.modelConfig.model = model as ModelType;
              session.mask.modelConfig.providerName =
                providerName as ServiceProvider;
@@ -681,7 +688,7 @@ export function ChatActions(props: {
          onSelection={(s) => {
            if (s.length === 0) return;
            const size = s[0];
-            chatStore.updateCurrentSession((session) => {
+            chatStore.updateTargetSession(session, (session) => {
              session.mask.modelConfig.size = size;
            });
            showToast(size);
@@ -708,7 +715,7 @@ export function ChatActions(props: {
          onSelection={(q) => {
            if (q.length === 0) return;
            const quality = q[0];
-            chatStore.updateCurrentSession((session) => {
+            chatStore.updateTargetSession(session, (session) => {
              session.mask.modelConfig.quality = quality;
            });
            showToast(quality);
@@ -735,7 +742,7 @@ export function ChatActions(props: {
          onSelection={(s) => {
            if (s.length === 0) return;
            const style = s[0];
-            chatStore.updateCurrentSession((session) => {
+            chatStore.updateTargetSession(session, (session) => {
              session.mask.modelConfig.style = style;
            });
            showToast(style);
@@ -766,7 +773,7 @@ export function ChatActions(props: {
          }))}
          onClose={() => setShowPluginSelector(false)}
          onSelection={(s) => {
-            chatStore.updateCurrentSession((session) => {
+            chatStore.updateTargetSession(session, (session) => {
              session.mask.plugin = s as string[];
            });
          }}
@@ -809,7 +816,8 @@ export function EditMessageModal(props: { onClose: () => void }) {
            icon={<ConfirmIcon />}
            key="ok"
            onClick={() => {
-              chatStore.updateCurrentSession(
+              chatStore.updateTargetSession(
+                session,
                (session) => (session.messages = messages),
              );
              props.onClose();
@@ -826,7 +834,8 @@ export function EditMessageModal(props: { onClose: () => void }) {
              type="text"
              value={session.topic}
              onInput={(e) =>
-                chatStore.updateCurrentSession(
+                chatStore.updateTargetSession(
+                  session,
                  (session) => (session.topic = e.currentTarget.value),
                )
              }
@@ -987,7 +996,8 @@ function _Chat() {
    prev: () => chatStore.nextSession(-1),
    next: () => chatStore.nextSession(1),
    clear: () =>
-      chatStore.updateCurrentSession(
+      chatStore.updateTargetSession(
+        session,
        (session) => (session.clearContextIndex = session.messages.length),
      ),
    fork: () => chatStore.forkSession(),
@@ -1015,7 +1025,7 @@ function _Chat() {
  };

  const doSubmit = (userInput: string) => {
-    if (userInput.trim() === "") return;
+    if (userInput.trim() === "" && isEmpty(attachImages)) return;
    const matchCommand = chatCommands.match(userInput);
    if (matchCommand.matched) {
      setUserInput("");
@@ -1058,7 +1068,7 @@ function _Chat() {
  };

  useEffect(() => {
-    chatStore.updateCurrentSession((session) => {
+    chatStore.updateTargetSession(session, (session) => {
      const stopTiming = Date.now() - REQUEST_TIMEOUT_MS;
      session.messages.forEach((m) => {
        // check if should stop all stale messages
@@ -1084,7 +1094,7 @@ function _Chat() {
      }
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [session]);

  // check if should send message
  const onInputKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -1115,7 +1125,8 @@ function _Chat() {
  };

  const deleteMessage = (msgId?: string) => {
-    chatStore.updateCurrentSession(
+    chatStore.updateTargetSession(
+      session,
      (session) =>
        (session.messages = session.messages.filter((m) => m.id !== msgId)),
    );
@@ -1182,7 +1193,7 @@ function _Chat() {
  };

  const onPinMessage = (message: ChatMessage) => {
-    chatStore.updateCurrentSession((session) =>
+    chatStore.updateTargetSession(session, (session) =>
      session.mask.context.push(message),
    );

@@ -1604,7 +1615,7 @@ function _Chat() {
              title={Locale.Chat.Actions.RefreshTitle}
              onClick={() => {
                showToast(Locale.Chat.Actions.RefreshToast);
-                chatStore.summarizeSession(true);
+                chatStore.summarizeSession(true, session);
              }}
            />
          </div>
@@ -1708,14 +1719,17 @@ function _Chat() {
                                });
                              }
                            }
-                            chatStore.updateCurrentSession((session) => {
-                              const m = session.mask.context
-                                .concat(session.messages)
-                                .find((m) => m.id === message.id);
-                              if (m) {
-                                m.content = newContent;
-                              }
-                            });
+                            chatStore.updateTargetSession(
+                              session,
+                              (session) => {
+                                const m = session.mask.context
+                                  .concat(session.messages)
+                                  .find((m) => m.id === message.id);
+                                if (m) {
+                                  m.content = newContent;
+                                }
+                              },
+                            );
                          }}
                        ></IconButton>
                      </div>
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@@ -140,6 +140,9 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
+  &-narrow {
+    justify-content: center;
+  }
 }

 .sidebar-logo {
--- a/app/components/markdown.tsx
+++ b/app/components/markdown.tsx
@@ -169,6 +169,12 @@ export function PreCode(props: { children: any }) {
 }

 function CustomCode(props: { children: any; className?: string }) {
+  const chatStore = useChatStore();
+  const session = chatStore.currentSession();
+  const config = useAppConfig();
+  const enableCodeFold =
+    session.mask?.enableCodeFold !== false && config.enableCodeFold;
+
  const ref = useRef<HTMLPreElement>(null);
  const [collapsed, setCollapsed] = useState(true);
  const [showToggle, setShowToggle] = useState(false);
@@ -184,25 +190,30 @@ function CustomCode(props: { children: any; className?: string }) {
  const toggleCollapsed = () => {
    setCollapsed((collapsed) => !collapsed);
  };
+  const renderShowMoreButton = () => {
+    if (showToggle && enableCodeFold && collapsed) {
+      return (
+        <div className={`show-hide-button ${collapsed ? "collapsed" : "expanded"}`}>
+          <button onClick={toggleCollapsed}>{Locale.NewChat.More}</button>
+        </div>
+      );
+    }
+    return null;
+  };
  return (
    <>
      <code
        className={props?.className}
        ref={ref}
        style={{
-          maxHeight: collapsed ? "400px" : "none",
+          maxHeight: enableCodeFold && collapsed ? "400px" : "none",
          overflowY: "hidden",
        }}
      >
        {props.children}
      </code>
-      {showToggle && collapsed && (
-        <div
-          className={`show-hide-button ${collapsed ? "collapsed" : "expanded"}`}
-        >
-          <button onClick={toggleCollapsed}>{Locale.NewChat.More}</button>
-        </div>
-      )}
+
+      {renderShowMoreButton()}
    </>
  );
 }
--- a/app/components/mask.tsx
+++ b/app/components/mask.tsx
@@ -183,6 +183,23 @@ export function MaskConfig(props: {
            ></input>
          </ListItem>
        )}
+        {globalConfig.enableCodeFold && (
+          <ListItem
+            title={Locale.Mask.Config.CodeFold.Title}
+            subTitle={Locale.Mask.Config.CodeFold.SubTitle}
+          >
+            <input
+              aria-label={Locale.Mask.Config.CodeFold.Title}
+              type="checkbox"
+              checked={props.mask.enableCodeFold !== false}
+              onChange={(e) => {
+                props.updateMask((mask) => {
+                  mask.enableCodeFold = e.currentTarget.checked;
+                });
+              }}
+            ></input>
+          </ListItem>
+        )}

        {!props.shouldSyncFromGlobal ? (
          <ListItem
--- a/app/components/model-config.tsx
+++ b/app/components/model-config.tsx
@@ -7,6 +7,7 @@ import { ListItem, Select } from "./ui-lib";
 import { useAllModels } from "../utils/hooks";
 import { groupBy } from "lodash-es";
 import styles from "./model-config.module.scss";
+import { getModelProvider } from "../utils/model";

 export function ModelConfigList(props: {
  modelConfig: ModelConfig;
@@ -28,7 +29,9 @@ export function ModelConfigList(props: {
          value={value}
          align="left"
          onChange={(e) => {
-            const [model, providerName] = e.currentTarget.value.split("@");
+            const [model, providerName] = getModelProvider(
+              e.currentTarget.value,
+            );
            props.updateConfig((config) => {
              config.model = ModalConfigValidator.model(model);
              config.providerName = providerName as ServiceProvider;
@@ -247,7 +250,9 @@ export function ModelConfigList(props: {
          aria-label={Locale.Settings.CompressModel.Title}
          value={compressModelValue}
          onChange={(e) => {
-            const [model, providerName] = e.currentTarget.value.split("@");
+            const [model, providerName] = getModelProvider(
+              e.currentTarget.value,
+            );
            props.updateConfig((config) => {
              config.compressModel = ModalConfigValidator.model(model);
              config.compressProviderName = providerName as ServiceProvider;
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -49,7 +49,7 @@ import Locale, {
  changeLang,
  getLang,
 } from "../locales";
-import { copyToClipboard } from "../utils";
+import { copyToClipboard, clientUpdate, semverCompare } from "../utils";
 import Link from "next/link";
 import {
  Anthropic,
@@ -59,6 +59,7 @@ import {
  ByteDance,
  Alibaba,
  Moonshot,
+  XAI,
  Google,
  GoogleSafetySettingsThreshold,
  OPENAI_BASE_URL,
@@ -71,6 +72,7 @@ import {
  Stability,
  Iflytek,
  SAAS_CHAT_URL,
+  ChatGLM,
 } from "../constant";
 import { Prompt, SearchService, usePromptStore } from "../store/prompt";
 import { ErrorBoundary } from "./error";
@@ -585,7 +587,7 @@ export function Settings() {
  const [checkingUpdate, setCheckingUpdate] = useState(false);
  const currentVersion = updateStore.formatVersion(updateStore.version);
  const remoteId = updateStore.formatVersion(updateStore.remoteVersion);
-  const hasNewVersion = currentVersion !== remoteId;
+  const hasNewVersion = semverCompare(currentVersion, remoteId) === -1;
  const updateUrl = getClientConfig()?.isApp ? RELEASE_URL : UPDATE_URL;

  function checkUpdate(force = false) {
@@ -1194,6 +1196,86 @@ export function Settings() {
    </>
  );

+  const XAIConfigComponent = accessStore.provider === ServiceProvider.XAI && (
+    <>
+      <ListItem
+        title={Locale.Settings.Access.XAI.Endpoint.Title}
+        subTitle={
+          Locale.Settings.Access.XAI.Endpoint.SubTitle + XAI.ExampleEndpoint
+        }
+      >
+        <input
+          aria-label={Locale.Settings.Access.XAI.Endpoint.Title}
+          type="text"
+          value={accessStore.xaiUrl}
+          placeholder={XAI.ExampleEndpoint}
+          onChange={(e) =>
+            accessStore.update(
+              (access) => (access.xaiUrl = e.currentTarget.value),
+            )
+          }
+        ></input>
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.Access.XAI.ApiKey.Title}
+        subTitle={Locale.Settings.Access.XAI.ApiKey.SubTitle}
+      >
+        <PasswordInput
+          aria-label={Locale.Settings.Access.XAI.ApiKey.Title}
+          value={accessStore.xaiApiKey}
+          type="text"
+          placeholder={Locale.Settings.Access.XAI.ApiKey.Placeholder}
+          onChange={(e) => {
+            accessStore.update(
+              (access) => (access.xaiApiKey = e.currentTarget.value),
+            );
+          }}
+        />
+      </ListItem>
+    </>
+  );
+
+  const chatglmConfigComponent = accessStore.provider ===
+    ServiceProvider.ChatGLM && (
+    <>
+      <ListItem
+        title={Locale.Settings.Access.ChatGLM.Endpoint.Title}
+        subTitle={
+          Locale.Settings.Access.ChatGLM.Endpoint.SubTitle +
+          ChatGLM.ExampleEndpoint
+        }
+      >
+        <input
+          aria-label={Locale.Settings.Access.ChatGLM.Endpoint.Title}
+          type="text"
+          value={accessStore.chatglmUrl}
+          placeholder={ChatGLM.ExampleEndpoint}
+          onChange={(e) =>
+            accessStore.update(
+              (access) => (access.chatglmUrl = e.currentTarget.value),
+            )
+          }
+        ></input>
+      </ListItem>
+      <ListItem
+        title={Locale.Settings.Access.ChatGLM.ApiKey.Title}
+        subTitle={Locale.Settings.Access.ChatGLM.ApiKey.SubTitle}
+      >
+        <PasswordInput
+          aria-label={Locale.Settings.Access.ChatGLM.ApiKey.Title}
+          value={accessStore.chatglmApiKey}
+          type="text"
+          placeholder={Locale.Settings.Access.ChatGLM.ApiKey.Placeholder}
+          onChange={(e) => {
+            accessStore.update(
+              (access) => (access.chatglmApiKey = e.currentTarget.value),
+            );
+          }}
+        />
+      </ListItem>
+    </>
+  );
+
  const stabilityConfigComponent = accessStore.provider ===
    ServiceProvider.Stability && (
    <>
@@ -1357,9 +1439,17 @@ export function Settings() {
            {checkingUpdate ? (
              <LoadingIcon />
            ) : hasNewVersion ? (
-              <Link href={updateUrl} target="_blank" className="link">
-                {Locale.Settings.Update.GoToUpdate}
-              </Link>
+              clientConfig?.isApp ? (
+                <IconButton
+                  icon={<ResetIcon></ResetIcon>}
+                  text={Locale.Settings.Update.GoToUpdate}
+                  onClick={() => clientUpdate()}
+                />
+              ) : (
+                <Link href={updateUrl} target="_blank" className="link">
+                  {Locale.Settings.Update.GoToUpdate}
+                </Link>
+              )
            ) : (
              <IconButton
                icon={<ResetIcon></ResetIcon>}
@@ -1509,6 +1599,22 @@ export function Settings() {
              }
            ></input>
          </ListItem>
+          <ListItem
+            title={Locale.Mask.Config.CodeFold.Title}
+            subTitle={Locale.Mask.Config.CodeFold.SubTitle}
+          >
+            <input
+              aria-label={Locale.Mask.Config.CodeFold.Title}
+              type="checkbox"
+              checked={config.enableCodeFold}
+              data-testid="enable-code-fold-checkbox"
+              onChange={(e) =>
+                updateConfig(
+                  (config) => (config.enableCodeFold = e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </ListItem>
        </List>

        <SyncItems />
@@ -1628,6 +1734,8 @@ export function Settings() {
                  {moonshotConfigComponent}
                  {stabilityConfigComponent}
                  {lflytekConfigComponent}
+                  {XAIConfigComponent}
+                  {chatglmConfigComponent}
                </>
              )}
            </>
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -165,11 +165,17 @@ export function SideBarHeader(props: {
  subTitle?: string | React.ReactNode;
  logo?: React.ReactNode;
  children?: React.ReactNode;
+  shouldNarrow?: boolean;
 }) {
-  const { title, subTitle, logo, children } = props;
+  const { title, subTitle, logo, children, shouldNarrow } = props;
  return (
    <Fragment>
-      <div className={styles["sidebar-header"]} data-tauri-drag-region>
+      <div
+        className={`${styles["sidebar-header"]} ${
+          shouldNarrow ? styles["sidebar-header-narrow"] : ""
+        }`}
+        data-tauri-drag-region
+      >
        <div className={styles["sidebar-title-container"]}>
          <div className={styles["sidebar-title"]} data-tauri-drag-region>
            {title}
@@ -227,6 +233,7 @@ export function SideBar(props: { className?: string }) {
        title="NextChat"
        subTitle="Build your own AI assistant."
        logo={<ChatGptIcon />}
+        shouldNarrow={shouldNarrow}
      >
        <div className={styles["sidebar-header-bar"]}>
          <IconButton