Merge branch 'main' of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web

2024-10-27 01:13:27 +00:00 · 2024-10-27 01:13:27 +00:00 · 3e02a71e0d
parent f80da8a263 4f49626303
commit 3e02a71e0d
35 changed files with 692 additions and 67 deletions
--- a/.github/workflows/deploy_preview.yml
+++ b/.github/workflows/deploy_preview.yml
@ -3,9 +3,7 @@ name: VercelPreviewDeployment
 on:
  pull_request_target:
    types:
-      - opened
-      - synchronize
-      - reopened
+      - review_requested

 env:
  VERCEL_TEAM: ${{ secrets.VERCEL_TEAM }}
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -0,0 +1,39 @@
+name: Run Tests
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - "!*"
+  pull_request:
+    types:
+      - review_requested
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "yarn"
+
+      - name: Cache node_modules
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node_modules-
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Run Jest tests
+        run: yarn test:ci
--- a/README.md
+++ b/README.md
@ -31,7 +31,7 @@ One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4
 [MacOS-image]: https://img.shields.io/badge/-MacOS-black?logo=apple
 [Linux-image]: https://img.shields.io/badge/-Linux-333?logo=ubuntu

-[<img src="https://vercel.com/button" alt="Deploy on Zeabur" height="30">](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChatGPTNextWeb%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=nextchat&repository-name=NextChat) [<img src="https://zeabur.com/button.svg" alt="Deploy on Zeabur" height="30">](https://zeabur.com/templates/ZBUEFA)  [<img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Open in Gitpod" height="30">](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web)
+[<img src="https://vercel.com/button" alt="Deploy on Zeabur" height="30">](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChatGPTNextWeb%2FChatGPT-Next-Web&env=OPENAI_API_KEY&env=CODE&project-name=nextchat&repository-name=NextChat) [<img src="https://zeabur.com/button.svg" alt="Deploy on Zeabur" height="30">](https://zeabur.com/templates/ZBUEFA)  [<img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Open in Gitpod" height="30">](https://gitpod.io/#https://github.com/Yidadaa/ChatGPT-Next-Web) [<img src="https://img.shields.io/badge/BT_Deploy-Install-20a53a" alt="Open in Gitpod" height="30">](https://www.bt.cn/new/download.html)

 [<img src="https://github.com/user-attachments/assets/903482d4-3e87-4134-9af1-f2588fa90659" height="60" width="288" >](https://monica.im/?utm=nxcrp)

--- a/app/api/[provider]/[...path]/route.ts
+++ b/app/api/[provider]/[...path]/route.ts
@ -10,6 +10,7 @@ import { handle as alibabaHandler } from "../../alibaba";
 import { handle as moonshotHandler } from "../../moonshot";
 import { handle as stabilityHandler } from "../../stability";
 import { handle as iflytekHandler } from "../../iflytek";
+import { handle as xaiHandler } from "../../xai";
 import { handle as proxyHandler } from "../../proxy";

 async function handle(
@ -38,6 +39,8 @@ async function handle(
      return stabilityHandler(req, { params });
    case ApiPath.Iflytek:
      return iflytekHandler(req, { params });
+    case ApiPath.XAI:
+      return xaiHandler(req, { params });
    case ApiPath.OpenAI:
      return openaiHandler(req, { params });
    default:
--- a/app/api/auth.ts
+++ b/app/api/auth.ts
@ -92,6 +92,9 @@ export function auth(req: NextRequest, modelProvider: ModelProvider) {
        systemApiKey =
          serverConfig.iflytekApiKey + ":" + serverConfig.iflytekApiSecret;
        break;
+      case ModelProvider.XAI:
+        systemApiKey = serverConfig.xaiApiKey;
+        break;
      case ModelProvider.GPT:
      default:
        if (req.nextUrl.pathname.includes("azure/deployments")) {
--- a/app/api/xai.ts
+++ b/app/api/xai.ts
@ -0,0 +1,128 @@
+import { getServerSideConfig } from "@/app/config/server";
+import {
+  XAI_BASE_URL,
+  ApiPath,
+  ModelProvider,
+  ServiceProvider,
+} from "@/app/constant";
+import { prettyObject } from "@/app/utils/format";
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/app/api/auth";
+import { isModelAvailableInServer } from "@/app/utils/model";
+
+const serverConfig = getServerSideConfig();
+
+export async function handle(
+  req: NextRequest,
+  { params }: { params: { path: string[] } },
+) {
+  console.log("[XAI Route] params ", params);
+
+  if (req.method === "OPTIONS") {
+    return NextResponse.json({ body: "OK" }, { status: 200 });
+  }
+
+  const authResult = auth(req, ModelProvider.XAI);
+  if (authResult.error) {
+    return NextResponse.json(authResult, {
+      status: 401,
+    });
+  }
+
+  try {
+    const response = await request(req);
+    return response;
+  } catch (e) {
+    console.error("[XAI] ", e);
+    return NextResponse.json(prettyObject(e));
+  }
+}
+
+async function request(req: NextRequest) {
+  const controller = new AbortController();
+
+  // alibaba use base url or just remove the path
+  let path = `${req.nextUrl.pathname}`.replaceAll(ApiPath.XAI, "");
+
+  let baseUrl = serverConfig.xaiUrl || XAI_BASE_URL;
+
+  if (!baseUrl.startsWith("http")) {
+    baseUrl = `https://${baseUrl}`;
+  }
+
+  if (baseUrl.endsWith("/")) {
+    baseUrl = baseUrl.slice(0, -1);
+  }
+
+  console.log("[Proxy] ", path);
+  console.log("[Base Url]", baseUrl);
+
+  const timeoutId = setTimeout(
+    () => {
+      controller.abort();
+    },
+    10 * 60 * 1000,
+  );
+
+  const fetchUrl = `${baseUrl}${path}`;
+  const fetchOptions: RequestInit = {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: req.headers.get("Authorization") ?? "",
+    },
+    method: req.method,
+    body: req.body,
+    redirect: "manual",
+    // @ts-ignore
+    duplex: "half",
+    signal: controller.signal,
+  };
+
+  // #1815 try to refuse some request to some models
+  if (serverConfig.customModels && req.body) {
+    try {
+      const clonedBody = await req.text();
+      fetchOptions.body = clonedBody;
+
+      const jsonBody = JSON.parse(clonedBody) as { model?: string };
+
+      // not undefined and is false
+      if (
+        isModelAvailableInServer(
+          serverConfig.customModels,
+          jsonBody?.model as string,
+          ServiceProvider.XAI as string,
+        )
+      ) {
+        return NextResponse.json(
+          {
+            error: true,
+            message: `you are not allowed to use ${jsonBody?.model} model`,
+          },
+          {
+            status: 403,
+          },
+        );
+      }
+    } catch (e) {
+      console.error(`[XAI] filter`, e);
+    }
+  }
+  try {
+    const res = await fetch(fetchUrl, fetchOptions);
+
+    // to prevent browser prompt for credentials
+    const newHeaders = new Headers(res.headers);
+    newHeaders.delete("www-authenticate");
+    // to disable nginx buffering
+    newHeaders.set("X-Accel-Buffering", "no");
+
+    return new Response(res.body, {
+      status: res.status,
+      statusText: res.statusText,
+      headers: newHeaders,
+    });
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
--- a/app/client/api.ts
+++ b/app/client/api.ts
@ -20,6 +20,7 @@ import { QwenApi } from "./platforms/alibaba";
 import { HunyuanApi } from "./platforms/tencent";
 import { MoonshotApi } from "./platforms/moonshot";
 import { SparkApi } from "./platforms/iflytek";
+import { XAIApi } from "./platforms/xai";

 export const ROLES = ["system", "user", "assistant"] as const;
 export type MessageRole = (typeof ROLES)[number];
@ -152,6 +153,9 @@ export class ClientApi {
      case ModelProvider.Iflytek:
        this.llm = new SparkApi();
        break;
+      case ModelProvider.XAI:
+        this.llm = new XAIApi();
+        break;
      default:
        this.llm = new ChatGPTApi();
    }
@ -239,6 +243,7 @@ export function getHeaders(ignoreHeaders: boolean = false) {
    const isAlibaba = modelConfig.providerName === ServiceProvider.Alibaba;
    const isMoonshot = modelConfig.providerName === ServiceProvider.Moonshot;
    const isIflytek = modelConfig.providerName === ServiceProvider.Iflytek;
+    const isXAI = modelConfig.providerName === ServiceProvider.XAI;
    const isEnabledAccessControl = accessStore.enabledAccessControl();
    const apiKey = isGoogle
      ? accessStore.googleApiKey
@ -252,6 +257,8 @@ export function getHeaders(ignoreHeaders: boolean = false) {
      ? accessStore.alibabaApiKey
      : isMoonshot
      ? accessStore.moonshotApiKey
+      : isXAI
+      ? accessStore.xaiApiKey
      : isIflytek
      ? accessStore.iflytekApiKey && accessStore.iflytekApiSecret
        ? accessStore.iflytekApiKey + ":" + accessStore.iflytekApiSecret
@ -266,6 +273,7 @@ export function getHeaders(ignoreHeaders: boolean = false) {
      isAlibaba,
      isMoonshot,
      isIflytek,
+      isXAI,
      apiKey,
      isEnabledAccessControl,
    };
@ -328,6 +336,8 @@ export function getClientApi(provider: ServiceProvider): ClientApi {
      return new ClientApi(ModelProvider.Moonshot);
    case ServiceProvider.Iflytek:
      return new ClientApi(ModelProvider.Iflytek);
+    case ServiceProvider.XAI:
+      return new ClientApi(ModelProvider.XAI);
    default:
      return new ClientApi(ModelProvider.GPT);
  }
--- a/app/client/platforms/anthropic.ts
+++ b/app/client/platforms/anthropic.ts
@ -13,6 +13,7 @@ import { getMessageTextContent, isVisionModel } from "@/app/utils";
 import { preProcessImageContent, stream } from "@/app/utils/chat";
 import { cloudflareAIGatewayUrl } from "@/app/utils/cloudflare";
 import { RequestPayload } from "./openai";
+import { fetch } from "@/app/utils/stream";

 export type MultiBlockContent = {
  type: "image" | "text";
--- a/app/client/platforms/google.ts
+++ b/app/client/platforms/google.ts
@ -192,7 +192,10 @@ export class GeminiProApi implements LLMApi {
          requestPayload,
          getHeaders(),
          // @ts-ignore
-          [{ functionDeclarations: tools.map((tool) => tool.function) }],
+          tools.length > 0
+            ? // @ts-ignore
+              [{ functionDeclarations: tools.map((tool) => tool.function) }]
+            : [],
          funcs,
          controller,
          // parseSSE
--- a/app/client/platforms/moonshot.ts
+++ b/app/client/platforms/moonshot.ts
@ -24,6 +24,7 @@ import {
 import { getClientConfig } from "@/app/config/client";
 import { getMessageTextContent } from "@/app/utils";
 import { RequestPayload } from "./openai";
+import { fetch } from "@/app/utils/stream";

 export class MoonshotApi implements LLMApi {
  private disableListModels = true;
--- a/app/client/platforms/openai.ts
+++ b/app/client/platforms/openai.ts
@ -42,6 +42,7 @@ import {
  isVisionModel,
  isDalle3 as _isDalle3,
 } from "@/app/utils";
+import { fetch } from "@/app/utils/stream";

 export interface OpenAIListModelResponse {
  object: string;
@ -352,7 +353,7 @@ export class ChatGPTApi implements LLMApi {
        // make a fetch request
        const requestTimeoutId = setTimeout(
          () => controller.abort(),
-          isDalle3 || isO1 ? REQUEST_TIMEOUT_MS * 2 : REQUEST_TIMEOUT_MS, // dalle3 using b64_json is slow.
+          isDalle3 || isO1 ? REQUEST_TIMEOUT_MS * 4 : REQUEST_TIMEOUT_MS, // dalle3 using b64_json is slow.
        );

        const res = await fetch(chatPath, chatPayload);
--- a/app/client/platforms/xai.ts
+++ b/app/client/platforms/xai.ts
@ -0,0 +1,193 @@
+"use client";
+// azure and openai, using same models. so using same LLMApi.
+import { ApiPath, XAI_BASE_URL, XAI, REQUEST_TIMEOUT_MS } from "@/app/constant";
+import {
+  useAccessStore,
+  useAppConfig,
+  useChatStore,
+  ChatMessageTool,
+  usePluginStore,
+} from "@/app/store";
+import { stream } from "@/app/utils/chat";
+import {
+  ChatOptions,
+  getHeaders,
+  LLMApi,
+  LLMModel,
+  SpeechOptions,
+} from "../api";
+import { getClientConfig } from "@/app/config/client";
+import { getMessageTextContent } from "@/app/utils";
+import { RequestPayload } from "./openai";
+import { fetch } from "@/app/utils/stream";
+
+export class XAIApi implements LLMApi {
+  private disableListModels = true;
+
+  path(path: string): string {
+    const accessStore = useAccessStore.getState();
+
+    let baseUrl = "";
+
+    if (accessStore.useCustomConfig) {
+      baseUrl = accessStore.xaiUrl;
+    }
+
+    if (baseUrl.length === 0) {
+      const isApp = !!getClientConfig()?.isApp;
+      const apiPath = ApiPath.XAI;
+      baseUrl = isApp ? XAI_BASE_URL : apiPath;
+    }
+
+    if (baseUrl.endsWith("/")) {
+      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
+    }
+    if (!baseUrl.startsWith("http") && !baseUrl.startsWith(ApiPath.XAI)) {
+      baseUrl = "https://" + baseUrl;
+    }
+
+    console.log("[Proxy Endpoint] ", baseUrl, path);
+
+    return [baseUrl, path].join("/");
+  }
+
+  extractMessage(res: any) {
+    return res.choices?.at(0)?.message?.content ?? "";
+  }
+
+  speech(options: SpeechOptions): Promise<ArrayBuffer> {
+    throw new Error("Method not implemented.");
+  }
+
+  async chat(options: ChatOptions) {
+    const messages: ChatOptions["messages"] = [];
+    for (const v of options.messages) {
+      const content = getMessageTextContent(v);
+      messages.push({ role: v.role, content });
+    }
+
+    const modelConfig = {
+      ...useAppConfig.getState().modelConfig,
+      ...useChatStore.getState().currentSession().mask.modelConfig,
+      ...{
+        model: options.config.model,
+        providerName: options.config.providerName,
+      },
+    };
+
+    const requestPayload: RequestPayload = {
+      messages,
+      stream: options.config.stream,
+      model: modelConfig.model,
+      temperature: modelConfig.temperature,
+      presence_penalty: modelConfig.presence_penalty,
+      frequency_penalty: modelConfig.frequency_penalty,
+      top_p: modelConfig.top_p,
+    };
+
+    console.log("[Request] xai payload: ", requestPayload);
+
+    const shouldStream = !!options.config.stream;
+    const controller = new AbortController();
+    options.onController?.(controller);
+
+    try {
+      const chatPath = this.path(XAI.ChatPath);
+      const chatPayload = {
+        method: "POST",
+        body: JSON.stringify(requestPayload),
+        signal: controller.signal,
+        headers: getHeaders(),
+      };
+
+      // make a fetch request
+      const requestTimeoutId = setTimeout(
+        () => controller.abort(),
+        REQUEST_TIMEOUT_MS,
+      );
+
+      if (shouldStream) {
+        const [tools, funcs] = usePluginStore
+          .getState()
+          .getAsTools(
+            useChatStore.getState().currentSession().mask?.plugin || [],
+          );
+        return stream(
+          chatPath,
+          requestPayload,
+          getHeaders(),
+          tools as any,
+          funcs,
+          controller,
+          // parseSSE
+          (text: string, runTools: ChatMessageTool[]) => {
+            // console.log("parseSSE", text, runTools);
+            const json = JSON.parse(text);
+            const choices = json.choices as Array<{
+              delta: {
+                content: string;
+                tool_calls: ChatMessageTool[];
+              };
+            }>;
+            const tool_calls = choices[0]?.delta?.tool_calls;
+            if (tool_calls?.length > 0) {
+              const index = tool_calls[0]?.index;
+              const id = tool_calls[0]?.id;
+              const args = tool_calls[0]?.function?.arguments;
+              if (id) {
+                runTools.push({
+                  id,
+                  type: tool_calls[0]?.type,
+                  function: {
+                    name: tool_calls[0]?.function?.name as string,
+                    arguments: args,
+                  },
+                });
+              } else {
+                // @ts-ignore
+                runTools[index]["function"]["arguments"] += args;
+              }
+            }
+            return choices[0]?.delta?.content;
+          },
+          // processToolMessage, include tool_calls message and tool call results
+          (
+            requestPayload: RequestPayload,
+            toolCallMessage: any,
+            toolCallResult: any[],
+          ) => {
+            // @ts-ignore
+            requestPayload?.messages?.splice(
+              // @ts-ignore
+              requestPayload?.messages?.length,
+              0,
+              toolCallMessage,
+              ...toolCallResult,
+            );
+          },
+          options,
+        );
+      } else {
+        const res = await fetch(chatPath, chatPayload);
+        clearTimeout(requestTimeoutId);
+
+        const resJson = await res.json();
+        const message = this.extractMessage(resJson);
+        options.onFinish(message);
+      }
+    } catch (e) {
+      console.log("[Request] failed to make a chat request", e);
+      options.onError?.(e as Error);
+    }
+  }
+  async usage() {
+    return {
+      used: 0,
+      total: 0,
+    };
+  }
+
+  async models(): Promise<LLMModel[]> {
+    return [];
+  }
+}
--- 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 {
@ -60,36 +61,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
@ -116,11 +116,14 @@ 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";
+
+const localStorage = safeLocalStorage();
+
 const ttsPlayer = createTTSPlayer();

 const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
@ -1017,7 +1020,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("");
--- 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/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,
@ -600,7 +601,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) {
@ -1209,6 +1210,45 @@ 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 stabilityConfigComponent = accessStore.provider ===
    ServiceProvider.Stability && (
    <>
@ -1372,9 +1412,17 @@ export function Settings() {
            {checkingUpdate ? (
              <LoadingIcon />
            ) : hasNewVersion ? (
+              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>}
@ -1524,6 +1572,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 />
@ -1643,6 +1707,7 @@ export function Settings() {
                  {moonshotConfigComponent}
                  {stabilityConfigComponent}
                  {lflytekConfigComponent}
+                  {XAIConfigComponent}
                </>
              )}
            </>
--- 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
--- a/app/config/server.ts
+++ b/app/config/server.ts
@ -71,6 +71,10 @@ declare global {
      IFLYTEK_API_KEY?: string;
      IFLYTEK_API_SECRET?: string;

+      // xai only
+      XAI_URL?: string;
+      XAI_API_KEY?: string;
+
      // custom template for preprocessing user input
      DEFAULT_INPUT_TEMPLATE?: string;
    }
@ -146,6 +150,7 @@ export const getServerSideConfig = () => {
  const isAlibaba = !!process.env.ALIBABA_API_KEY;
  const isMoonshot = !!process.env.MOONSHOT_API_KEY;
  const isIflytek = !!process.env.IFLYTEK_API_KEY;
+  const isXAI = !!process.env.XAI_API_KEY;
  // const apiKeyEnvVar = process.env.OPENAI_API_KEY ?? "";
  // const apiKeys = apiKeyEnvVar.split(",").map((v) => v.trim());
  // const randomIndex = Math.floor(Math.random() * apiKeys.length);
@ -208,6 +213,10 @@ export const getServerSideConfig = () => {
    iflytekApiKey: process.env.IFLYTEK_API_KEY,
    iflytekApiSecret: process.env.IFLYTEK_API_SECRET,

+    isXAI,
+    xaiUrl: process.env.XAI_URL,
+    xaiApiKey: getApiKey(process.env.XAI_API_KEY),
+
    cloudflareAccountId: process.env.CLOUDFLARE_ACCOUNT_ID,
    cloudflareKVNamespaceId: process.env.CLOUDFLARE_KV_NAMESPACE_ID,
    cloudflareKVApiKey: getApiKey(process.env.CLOUDFLARE_KV_API_KEY),
--- a/app/constant.ts
+++ b/app/constant.ts
@ -28,6 +28,8 @@ export const TENCENT_BASE_URL = "https://hunyuan.tencentcloudapi.com";
 export const MOONSHOT_BASE_URL = "https://api.moonshot.cn";
 export const IFLYTEK_BASE_URL = "https://spark-api-open.xf-yun.com";

+export const XAI_BASE_URL = "https://api.x.ai";
+
 export const CACHE_URL_PREFIX = "/api/cache";
 export const UPLOAD_URL = `${CACHE_URL_PREFIX}/upload`;

@ -59,6 +61,7 @@ export enum ApiPath {
  Iflytek = "/api/iflytek",
  Stability = "/api/stability",
  Artifacts = "/api/artifacts",
+  XAI = "/api/xai",
 }

 export enum SlotID {
@ -111,6 +114,7 @@ export enum ServiceProvider {
  Moonshot = "Moonshot",
  Stability = "Stability",
  Iflytek = "Iflytek",
+  XAI = "XAI",
 }

 // Google API safety settings, see https://ai.google.dev/gemini-api/docs/safety-settings
@ -133,6 +137,7 @@ export enum ModelProvider {
  Hunyuan = "Hunyuan",
  Moonshot = "Moonshot",
  Iflytek = "Iflytek",
+  XAI = "XAI",
 }

 export const Stability = {
@ -215,6 +220,11 @@ export const Iflytek = {
  ChatPath: "v1/chat/completions",
 };

+export const XAI = {
+  ExampleEndpoint: XAI_BASE_URL,
+  ChatPath: "v1/chat/completions",
+};
+
 export const DEFAULT_INPUT_TEMPLATE = `{{input}}`; // input / time / model / lang
 // export const DEFAULT_SYSTEM_TEMPLATE = `
 // You are ChatGPT, a large language model trained by {{ServiceProvider}}.
@ -364,6 +374,8 @@ const iflytekModels = [
  "4.0Ultra",
 ];

+const xAIModes = ["grok-beta"];
+
 let seq = 1000; // 内置的模型序号生成器从1000开始
 export const DEFAULT_MODELS = [
  ...openaiModels.map((name) => ({
@ -476,6 +488,17 @@ export const DEFAULT_MODELS = [
      sorted: 10,
    },
  })),
+  ...xAIModes.map((name) => ({
+    name,
+    available: true,
+    sorted: seq++,
+    provider: {
+      id: "xai",
+      providerName: "XAI",
+      providerType: "xai",
+      sorted: 11,
+    },
+  })),
 ] as const;

 export const CHAT_PAGE_SIZE = 15;
--- a/app/global.d.ts
+++ b/app/global.d.ts
@ -26,6 +26,13 @@ declare interface Window {
      isPermissionGranted(): Promise<boolean>;
      sendNotification(options: string | Options): void;
    };
+    updater: {
+      checkUpdate(): Promise<UpdateResult>;
+      installUpdate(): Promise<void>;
+      onUpdaterEvent(
+        handler: (status: UpdateStatusResult) => void,
+      ): Promise<UnlistenFn>;
+    };
    http: {
      fetch<T>(
        url: string,
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@ -206,6 +206,8 @@ const cn = {
      IsChecking: "正在检查更新...",
      FoundUpdate: (x: string) => `发现新版本：${x}`,
      GoToUpdate: "前往更新",
+      Success: "更新成功！",
+      Failed: "更新失败",
    },
    SendKey: "发送键",
    Theme: "主题",
@ -465,6 +467,17 @@ const cn = {
          SubTitle: "样例：",
        },
      },
+      XAI: {
+        ApiKey: {
+          Title: "接口密钥",
+          SubTitle: "使用自定义XAI API Key",
+          Placeholder: "XAI API Key",
+        },
+        Endpoint: {
+          Title: "接口地址",
+          SubTitle: "样例：",
+        },
+      },
      Stability: {
        ApiKey: {
          Title: "接口密钥",
@ -500,8 +513,8 @@ const cn = {

    Model: "模型 (model)",
    CompressModel: {
-      Title: "压缩模型",
-      SubTitle: "用于压缩历史记录的模型",
+      Title: "对话摘要模型",
+      SubTitle: "用于压缩历史记录、生成对话标题的模型",
    },
    Temperature: {
      Title: "随机性 (temperature)",
@ -670,6 +683,10 @@ const cn = {
        Title: "启用Artifacts",
        SubTitle: "启用之后可以直接渲染HTML页面",
      },
+      CodeFold: {
+        Title: "启用代码折叠",
+        SubTitle: "启用之后可以自动折叠/展开过长的代码块",
+      },
      Share: {
        Title: "分享此面具",
        SubTitle: "生成此面具的直达链接",
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@ -208,6 +208,8 @@ const en: LocaleType = {
      IsChecking: "Checking update...",
      FoundUpdate: (x: string) => `Found new version: ${x}`,
      GoToUpdate: "Update",
+      Success: "Update Successful.",
+      Failed: "Update Failed.",
    },
    SendKey: "Send Key",
    Theme: "Theme",
@ -450,6 +452,17 @@ const en: LocaleType = {
          SubTitle: "Example: ",
        },
      },
+      XAI: {
+        ApiKey: {
+          Title: "XAI API Key",
+          SubTitle: "Use a custom XAI API Key",
+          Placeholder: "XAI API Key",
+        },
+        Endpoint: {
+          Title: "Endpoint Address",
+          SubTitle: "Example: ",
+        },
+      },
      Stability: {
        ApiKey: {
          Title: "Stability API Key",
@ -506,8 +519,8 @@ const en: LocaleType = {

    Model: "Model",
    CompressModel: {
-      Title: "Compression Model",
-      SubTitle: "Model used to compress history",
+      Title: "Summary Model",
+      SubTitle: "Model used to compress history and generate title",
    },
    Temperature: {
      Title: "Temperature",
@ -681,6 +694,11 @@ const en: LocaleType = {
        Title: "Enable Artifacts",
        SubTitle: "Can render HTML page when enable artifacts.",
      },
+      CodeFold: {
+        Title: "Enable CodeFold",
+        SubTitle:
+          "Automatically collapse/expand overly long code blocks when CodeFold is enabled",
+      },
      Share: {
        Title: "Share This Mask",
        SubTitle: "Generate a link to this mask",
--- a/app/store/access.ts
+++ b/app/store/access.ts
@ -13,6 +13,7 @@ import {
  MOONSHOT_BASE_URL,
  STABILITY_BASE_URL,
  IFLYTEK_BASE_URL,
+  XAI_BASE_URL,
 } from "../constant";
 import { getHeaders } from "../client/api";
 import { getClientConfig } from "../config/client";
@ -44,6 +45,8 @@ const DEFAULT_STABILITY_URL = isApp ? STABILITY_BASE_URL : ApiPath.Stability;

 const DEFAULT_IFLYTEK_URL = isApp ? IFLYTEK_BASE_URL : ApiPath.Iflytek;

+const DEFAULT_XAI_URL = isApp ? XAI_BASE_URL : ApiPath.XAI;
+
 const DEFAULT_ACCESS_STATE = {
  accessCode: "",
  useCustomConfig: false,
@ -101,6 +104,10 @@ const DEFAULT_ACCESS_STATE = {
  iflytekApiKey: "",
  iflytekApiSecret: "",

+  // xai
+  xaiUrl: DEFAULT_XAI_URL,
+  xaiApiKey: "",
+
  // server config
  needCode: true,
  hideUserApiKey: false,
@ -169,6 +176,10 @@ export const useAccessStore = createPersistStore(
      return ensure(get(), ["iflytekApiKey"]);
    },

+    isValidXAI() {
+      return ensure(get(), ["xaiApiKey"]);
+    },
+
    isAuthorized() {
      this.fetch();

@ -184,6 +195,7 @@ export const useAccessStore = createPersistStore(
        this.isValidTencent() ||
        this.isValidMoonshot() ||
        this.isValidIflytek() ||
+        this.isValidXAI() ||
        !this.enabledAccessControl() ||
        (this.enabledAccessControl() && ensure(get(), ["accessCode"]))
      );
--- a/app/store/chat.ts
+++ b/app/store/chat.ts
@ -447,22 +447,16 @@ export const useChatStore = createPersistStore(

        if (attachImages && attachImages.length > 0) {
          mContent = [
-            {
-              type: "text",
-              text: userContent,
-            },
+            ...(userContent
+              ? [{ type: "text" as const, text: userContent }]
+              : []),
+            ...attachImages.map((url) => ({
+              type: "image_url" as const,
+              image_url: { url },
+            })),
          ];
-          mContent = mContent.concat(
-            attachImages.map((url) => {
-              return {
-                type: "image_url",
-                image_url: {
-                  url: url,
-                },
-              };
-            }),
-          );
        }
+
        let userMessage: ChatMessage = createMessage({
          role: "user",
          content: mContent,
--- a/app/store/config.ts
+++ b/app/store/config.ts
@ -52,6 +52,8 @@ export const DEFAULT_CONFIG = {

  enableArtifacts: true, // show artifacts config

+  enableCodeFold: true, // code fold config
+
  disablePromptHint: false,

  dontShowMaskSplashScreen: false, // dont show splash screen when create chat
--- a/app/store/mask.ts
+++ b/app/store/mask.ts
@ -19,6 +19,7 @@ export type Mask = {
  builtin: boolean;
  plugin?: string[];
  enableArtifacts?: boolean;
+  enableCodeFold?: boolean;
 };

 export const DEFAULT_MASK_STATE = {
--- a/app/store/update.ts
+++ b/app/store/update.ts
@ -6,6 +6,7 @@ import {
 } from "../constant";
 import { getClientConfig } from "../config/client";
 import { createPersistStore } from "../utils/store";
+import { clientUpdate } from "../utils";
 import ChatGptIcon from "../icons/chatgpt.png";
 import Locale from "../locales";
 import { ClientApi } from "../client/api";
@ -119,6 +120,7 @@ export const useUpdateStore = createPersistStore(
                          icon: `${ChatGptIcon.src}`,
                          sound: "Default",
                        });
+                        clientUpdate();
                      }
                    }
                  });
--- a/app/utils.ts
+++ b/app/utils.ts
@ -399,3 +399,37 @@ export function getOperationId(operation: {
    `${operation.method.toUpperCase()}${operation.path.replaceAll("/", "_")}`
  );
 }
+
+export function clientUpdate() {
+  // this a wild for updating client app
+  return window.__TAURI__?.updater
+    .checkUpdate()
+    .then((updateResult) => {
+      if (updateResult.shouldUpdate) {
+        window.__TAURI__?.updater
+          .installUpdate()
+          .then((result) => {
+            showToast(Locale.Settings.Update.Success);
+          })
+          .catch((e) => {
+            console.error("[Install Update Error]", e);
+            showToast(Locale.Settings.Update.Failed);
+          });
+      }
+    })
+    .catch((e) => {
+      console.error("[Check Update Error]", e);
+      showToast(Locale.Settings.Update.Failed);
+    });
+}
+
+// https://gist.github.com/iwill/a83038623ba4fef6abb9efca87ae9ccb
+export function semverCompare(a: string, b: string) {
+  if (a.startsWith(b + "-")) return -1;
+  if (b.startsWith(a + "-")) return 1;
+  return a.localeCompare(b, undefined, {
+    numeric: true,
+    sensitivity: "case",
+    caseFirst: "upper",
+  });
+}
--- a/app/utils/stream.ts
+++ b/app/utils/stream.ts
@ -100,7 +100,8 @@ export function fetch(url: string, options?: RequestInit): Promise<any> {
      })
      .catch((e) => {
        console.error("stream error", e);
-        throw e;
+        // throw e;
+        return new Response("", { status: 599 });
      });
  }
  return window.fetch(url, options);
--- a/package.json
+++ b/package.json
@ -6,13 +6,13 @@
    "mask": "npx tsx app/masks/build.ts",
    "mask:watch": "npx watch \"yarn mask\" app/masks",
    "dev": "concurrently -r \"yarn run mask:watch\" \"next dev\"",
-    "build": "yarn test:ci && yarn mask && cross-env BUILD_MODE=standalone next build",
+    "build": "yarn mask && cross-env BUILD_MODE=standalone next build",
    "start": "next start",
    "lint": "next lint",
-    "export": "yarn test:ci && yarn mask && cross-env BUILD_MODE=export BUILD_APP=1 next build",
+    "export": "yarn mask && cross-env BUILD_MODE=export BUILD_APP=1 next build",
    "export:dev": "concurrently -r \"yarn mask:watch\"  \"cross-env BUILD_MODE=export BUILD_APP=1 next dev\"",
    "app:dev": "concurrently -r \"yarn mask:watch\" \"yarn tauri dev\"",
-    "app:build": "yarn test:ci && yarn mask && yarn tauri build",
+    "app:build": "yarn mask && yarn tauri build",
    "prompts": "node ./scripts/fetch-prompts.mjs",
    "prepare": "husky install",
    "proxy-dev": "sh ./scripts/init-proxy.sh && proxychains -f ./scripts/proxychains.conf yarn dev",
@ -58,7 +58,7 @@
    "@tauri-apps/cli": "1.5.11",
    "@testing-library/jest-dom": "^6.4.8",
    "@testing-library/react": "^16.0.0",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
    "@types/js-yaml": "4.0.9",
    "@types/lodash-es": "^4.17.12",
    "@types/node": "^20.11.30",
--- a/src-tauri/src/stream.rs
+++ b/src-tauri/src/stream.rs
@ -119,11 +119,22 @@ pub async fn stream_fetch(
      }
    }
    Err(err) => {
-      println!("Error response: {:?}", err.source().expect("REASON").to_string());
+      let error: String = err.source()
+        .map(|e| e.to_string())
+        .unwrap_or_else(|| "Unknown error occurred".to_string());
+      println!("Error response: {:?}", error);
+      tauri::async_runtime::spawn( async move {
+        if let Err(e) = window.emit(event_name, ChunkPayload{ request_id, chunk: error.into() }) {
+          println!("Failed to emit chunk payload: {:?}", e);
+        }
+        if let Err(e) = window.emit(event_name, EndPayload{ request_id, status: 0 }) {
+          println!("Failed to emit end payload: {:?}", e);
+        }
+      });
      StreamResponse {
        request_id,
        status: 599,
-        status_text: err.source().expect("REASON").to_string(),
+        status_text: "Error".to_string(),
        headers: HashMap::new(),
      }
    }
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@ -9,7 +9,7 @@
  },
  "package": {
    "productName": "NextChat",
-    "version": "2.15.4"
+    "version": "2.15.6"
  },
  "tauri": {
    "allowlist": {
@ -99,7 +99,7 @@
      "endpoints": [
        "https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web/releases/latest/download/latest.json"
      ],
-      "dialog": false,
+      "dialog": true,
      "windows": {
        "installMode": "passive"
      },
--- a/yarn.lock
+++ b/yarn.lock
@ -2263,10 +2263,10 @@
  dependencies:
    "@types/istanbul-lib-report" "*"

-"@types/jest@^29.5.12":
-  version "29.5.12"
-  resolved "https://registry.npmmirror.com/@types/jest/-/jest-29.5.12.tgz#7f7dc6eb4cf246d2474ed78744b05d06ce025544"
-  integrity sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==
+"@types/jest@^29.5.13":
+  version "29.5.13"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.13.tgz#8bc571659f401e6a719a7bf0dbcb8b78c71a8adc"
+  integrity sha512-wd+MVEZCHt23V0/L642O5APvspWply/rGY5BcW4SUETo2UzPU3Z26qr8jC2qxpimI2jjx9h7+2cj2FwIr01bXg==
  dependencies:
    expect "^29.0.0"
    pretty-format "^29.0.0"