Merge branch 'ChatGPTNextWeb:main' into main

README.md

@@ -7,7 +7,7 @@
 
 
 
-<h1 align="center">NextChat</h1>
+<h1 align="center">NextChat (ChatGPT Next Web)</h1>
 
 English / [简体中文](./README_CN.md)
 
@@ -22,6 +22,7 @@ English / [简体中文](./README_CN.md)
 [![MacOS][MacOS-image]][download-url]
 [![Linux][Linux-image]][download-url]
 
+[NextChatAI](https://nextchat.dev/chat?utm_source=readme) / [Web App Demo](https://app.nextchat.dev) / [Desktop App](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) 
 [NextChatAI](https://nextchat.club?utm_source=readme) / [Web App Demo](https://app.nextchat.dev) / [Desktop App](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [Discord](https://discord.gg/YCkeafCafC) / [Enterprise Edition](#enterprise-edition) / [Twitter](https://twitter.com/NextChatDev)
 
 

app/client/api.ts

@@ -40,11 +40,6 @@ export interface MultimodalContent {
   };
 }
 
-export interface MultimodalContentForAlibaba {
-  text?: string;
-  image?: string;
-}
-
 export interface RequestMessage {
   role: MessageRole;
   content: string | MultimodalContent[];

app/client/platforms/alibaba.ts

@@ -7,10 +7,7 @@ import {
   ChatMessageTool,
   usePluginStore,
 } from "@/app/store";
-import {
-  preProcessImageContentForAlibabaDashScope,
-  streamWithThink,
-} from "@/app/utils/chat";
+import { streamWithThink } from "@/app/utils/chat";
 import {
   ChatOptions,
   getHeaders,
@@ -18,14 +15,12 @@ import {
   LLMModel,
   SpeechOptions,
   MultimodalContent,
-  MultimodalContentForAlibaba,
 } from "../api";
 import { getClientConfig } from "@/app/config/client";
 import {
   getMessageTextContent,
   getMessageTextContentWithoutThinking,
   getTimeoutMSByModel,
-  isVisionModel,
 } from "@/app/utils";
 import { fetch } from "@/app/utils/stream";
 
@@ -94,6 +89,14 @@ export class QwenApi implements LLMApi {
   }
 
   async chat(options: ChatOptions) {
+    const messages = options.messages.map((v) => ({
+      role: v.role,
+      content:
+        v.role === "assistant"
+          ? getMessageTextContentWithoutThinking(v)
+          : getMessageTextContent(v),
+    }));
+
     const modelConfig = {
       ...useAppConfig.getState().modelConfig,
       ...useChatStore.getState().currentSession().mask.modelConfig,
@@ -102,21 +105,6 @@ export class QwenApi implements LLMApi {
       },
     };
 
-    const visionModel = isVisionModel(options.config.model);
-
-    const messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      const content = (
-        visionModel
-          ? await preProcessImageContentForAlibabaDashScope(v.content)
-          : v.role === "assistant"
-          ? getMessageTextContentWithoutThinking(v)
-          : getMessageTextContent(v)
-      ) as any;
-
-      messages.push({ role: v.role, content });
-    }
-
     const shouldStream = !!options.config.stream;
     const requestPayload: RequestPayload = {
       model: modelConfig.model,
@@ -141,7 +129,7 @@ export class QwenApi implements LLMApi {
         "X-DashScope-SSE": shouldStream ? "enable" : "disable",
       };
 
-      const chatPath = this.path(Alibaba.ChatPath(modelConfig.model));
+      const chatPath = this.path(Alibaba.ChatPath);
       const chatPayload = {
         method: "POST",
         body: JSON.stringify(requestPayload),
@@ -174,7 +162,7 @@ export class QwenApi implements LLMApi {
             const json = JSON.parse(text);
             const choices = json.output.choices as Array<{
               message: {
-                content: string | null | MultimodalContentForAlibaba[];
+                content: string | null;
                 tool_calls: ChatMessageTool[];
                 reasoning_content: string | null;
               };
@@ -224,9 +212,7 @@ export class QwenApi implements LLMApi {
             } else if (content && content.length > 0) {
               return {
                 isThinking: false,
-                content: Array.isArray(content)
-                  ? content.map((item) => item.text).join(",")
-                  : content,
+                content: content,
               };
             }
 

app/client/platforms/deepseek.ts

@@ -75,25 +75,6 @@ export class DeepSeekApi implements LLMApi {
       }
     }
 
-    // 检测并修复消息顺序，确保除system外的第一个消息是user
-    const filteredMessages: ChatOptions["messages"] = [];
-    let hasFoundFirstUser = false;
-
-    for (const msg of messages) {
-      if (msg.role === "system") {
-        // Keep all system messages
-        filteredMessages.push(msg);
-      } else if (msg.role === "user") {
-        // User message directly added
-        filteredMessages.push(msg);
-        hasFoundFirstUser = true;
-      } else if (hasFoundFirstUser) {
-        // After finding the first user message, all subsequent non-system messages are retained.
-        filteredMessages.push(msg);
-      }
-      // If hasFoundFirstUser is false and it is not a system message, it will be skipped.
-    }
-
     const modelConfig = {
       ...useAppConfig.getState().modelConfig,
       ...useChatStore.getState().currentSession().mask.modelConfig,
@@ -104,7 +85,7 @@ export class DeepSeekApi implements LLMApi {
     };
 
     const requestPayload: RequestPayload = {
-      messages: filteredMessages,
+      messages,
       stream: options.config.stream,
       model: modelConfig.model,
       temperature: modelConfig.temperature,

app/components/chat.tsx

@@ -18,6 +18,7 @@ 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";
 import MaskIcon from "../icons/mask.svg";
@@ -78,6 +79,8 @@ import {
 
 import { uploadImage as uploadImageRemote } from "@/app/utils/chat";
 
+import dynamic from "next/dynamic";
+
 import { ChatControllerPool } from "../client/controller";
 import { DalleQuality, DalleStyle, ModelSize } from "../typing";
 import { Prompt, usePromptStore } from "../store/prompt";
@@ -122,15 +125,14 @@ import { getModelProvider } from "../utils/model";
 import { RealtimeChat } from "@/app/components/realtime-chat";
 import clsx from "clsx";
 import { getAvailableClientsCount, isMcpEnabled } from "../mcp/actions";
-import { Markdown } from "./markdown";
 
 const localStorage = safeLocalStorage();
 
 const ttsPlayer = createTTSPlayer();
 
-// const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
-//   loading: () => <LoadingIcon />,
-// });
+const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
+  loading: () => <LoadingIcon />,
+});
 
 const MCPAction = () => {
   const navigate = useNavigate();
@@ -1982,8 +1984,6 @@ function _Chat() {
                               fontFamily={fontFamily}
                               parentRef={scrollRef}
                               defaultShow={i >= messages.length - 6}
-                              immediatelyRender={i >= messages.length - 3}
-                              streaming={message.streaming}
                             />
                             {getMessageImages(message).length == 1 && (
                               <img

app/components/emoji.tsx

@@ -66,11 +66,11 @@ export function Avatar(props: { model?: ModelType; avatar?: string }) {
       LlmIcon = BotIconGemma;
     } else if (modelName.startsWith("claude")) {
       LlmIcon = BotIconClaude;
-    } else if (modelName.includes("llama")) {
+    } else if (modelName.toLowerCase().includes("llama")) {
       LlmIcon = BotIconMeta;
-    } else if (modelName.startsWith("mixtral") || modelName.startsWith("codestral")) {
+    } else if (modelName.startsWith("mixtral")) {
       LlmIcon = BotIconMistral;
-    } else if (modelName.includes("deepseek")) {
+    } else if (modelName.toLowerCase().includes("deepseek")) {
       LlmIcon = BotIconDeepseek;
     } else if (modelName.startsWith("moonshot")) {
       LlmIcon = BotIconMoonshot;
@@ -85,7 +85,7 @@ export function Avatar(props: { model?: ModelType; avatar?: string }) {
     } else if (modelName.startsWith("doubao") || modelName.startsWith("ep-")) {
       LlmIcon = BotIconDoubao;
     } else if (
-      modelName.includes("glm") ||
+      modelName.toLowerCase().includes("glm") ||
       modelName.startsWith("cogview-") ||
       modelName.startsWith("cogvideox-")
     ) {

app/components/markdown.tsx

@@ -267,136 +267,6 @@ function tryWrapHtmlCode(text: string) {
     );
 }
 
-// Split content into paragraphs while preserving code blocks
-function splitContentIntoParagraphs(content: string) {
-  // Check for unclosed code blocks
-  const codeBlockStartCount = (content.match(/```/g) || []).length;
-  let processedContent = content;
-
-  // Add closing tag if there's an odd number of code block markers
-  if (codeBlockStartCount % 2 !== 0) {
-    processedContent = content + "\n```";
-  }
-
-  // Extract code blocks
-  const codeBlockRegex = /```[\s\S]*?```/g;
-  const codeBlocks: string[] = [];
-  let codeBlockCounter = 0;
-
-  // Replace code blocks with placeholders
-  const contentWithPlaceholders = processedContent.replace(
-    codeBlockRegex,
-    (match) => {
-      codeBlocks.push(match);
-      const placeholder = `__CODE_BLOCK_${codeBlockCounter++}__`;
-      return placeholder;
-    },
-  );
-
-  // Split by double newlines
-  const paragraphs = contentWithPlaceholders
-    .split(/\n\n+/)
-    .filter((p) => p.trim());
-
-  // Restore code blocks
-  return paragraphs.map((p) => {
-    if (p.match(/__CODE_BLOCK_\d+__/)) {
-      return p.replace(/__CODE_BLOCK_\d+__/g, (match) => {
-        const index = parseInt(match.match(/\d+/)?.[0] || "0");
-        return codeBlocks[index] || match;
-      });
-    }
-    return p;
-  });
-}
-
-// Lazy-loaded paragraph component
-function MarkdownParagraph({
-  content,
-  onLoad,
-}: {
-  content: string;
-  onLoad?: () => void;
-}) {
-  const [isLoaded, setIsLoaded] = useState(false);
-  const placeholderRef = useRef<HTMLDivElement>(null);
-  const [isVisible, setIsVisible] = useState(false);
-
-  useEffect(() => {
-    let observer: IntersectionObserver;
-    if (placeholderRef.current) {
-      observer = new IntersectionObserver(
-        (entries) => {
-          if (entries[0].isIntersecting) {
-            setIsVisible(true);
-          }
-        },
-        { threshold: 0.1, rootMargin: "200px 0px" },
-      );
-      observer.observe(placeholderRef.current);
-    }
-    return () => observer?.disconnect();
-  }, []);
-
-  useEffect(() => {
-    if (isVisible && !isLoaded) {
-      setIsLoaded(true);
-      onLoad?.();
-    }
-  }, [isVisible, isLoaded, onLoad]);
-
-  // Generate preview content
-  const previewContent = useMemo(() => {
-    if (content.startsWith("```")) {
-      return "```" + (content.split("\n")[0] || "").slice(3) + "...```";
-    }
-    return content.length > 60 ? content.slice(0, 60) + "..." : content;
-  }, [content]);
-
-  return (
-    <div className="markdown-paragraph" ref={placeholderRef}>
-      {!isLoaded ? (
-        <div className="markdown-paragraph-placeholder">{previewContent}</div>
-      ) : (
-        <_MarkDownContent content={content} />
-      )}
-    </div>
-  );
-}
-
-// Memoized paragraph component to prevent unnecessary re-renders
-const MemoizedMarkdownParagraph = React.memo(
-  ({ content }: { content: string }) => {
-    return <_MarkDownContent content={content} />;
-  },
-  (prevProps, nextProps) => prevProps.content === nextProps.content,
-);
-
-MemoizedMarkdownParagraph.displayName = "MemoizedMarkdownParagraph";
-
-// Specialized component for streaming content
-function StreamingMarkdownContent({ content }: { content: string }) {
-  const paragraphs = useMemo(
-    () => splitContentIntoParagraphs(content),
-    [content],
-  );
-  const lastParagraphRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <div className="markdown-streaming-content">
-      {paragraphs.map((paragraph, index) => (
-        <div
-          key={`p-${index}-${paragraph.substring(0, 20)}`}
-          className="markdown-paragraph markdown-streaming-paragraph"
-          ref={index === paragraphs.length - 1 ? lastParagraphRef : null}
-        >
-          <MemoizedMarkdownParagraph content={paragraph} />
-        </div>
-      ))}
-    </div>
-  );
-}
-
 function _MarkDownContent(props: { content: string }) {
   const escapedContent = useMemo(() => {
     return tryWrapHtmlCode(escapeBrackets(props.content));
@@ -456,27 +326,9 @@ export function Markdown(
     fontFamily?: string;
     parentRef?: RefObject<HTMLDivElement>;
     defaultShow?: boolean;
-    immediatelyRender?: boolean;
-    streaming?: boolean; // Whether this is a streaming response
   } & React.DOMAttributes<HTMLDivElement>,
 ) {
   const mdRef = useRef<HTMLDivElement>(null);
-  const paragraphs = useMemo(
-    () => splitContentIntoParagraphs(props.content),
-    [props.content],
-  );
-  const [loadedCount, setLoadedCount] = useState(0);
-
-  // Determine rendering strategy based on props
-  const shouldAsyncRender =
-    !props.immediatelyRender && !props.streaming && paragraphs.length > 1;
-
-  useEffect(() => {
-    // Immediately render all paragraphs if specified
-    if (props.immediatelyRender) {
-      setLoadedCount(paragraphs.length);
-    }
-  }, [props.immediatelyRender, paragraphs.length]);
 
   return (
     <div
@@ -492,24 +344,6 @@ export function Markdown(
     >
       {props.loading ? (
         <LoadingIcon />
-      ) : props.streaming ? (
-        // Use specialized component for streaming content
-        <StreamingMarkdownContent content={props.content} />
-      ) : shouldAsyncRender ? (
-        <div className="markdown-content">
-          {paragraphs.map((paragraph, index) => (
-            <MarkdownParagraph
-              key={index}
-              content={paragraph}
-              onLoad={() => setLoadedCount((prev) => prev + 1)}
-            />
-          ))}
-          {loadedCount < paragraphs.length && loadedCount > 0 && (
-            <div className="markdown-paragraph-loading">
-              <LoadingIcon />
-            </div>
-          )}
-        </div>
       ) : (
         <MarkdownContent content={props.content} />
       )}

app/constant.ts

@@ -221,12 +221,7 @@ export const ByteDance = {
 
 export const Alibaba = {
   ExampleEndpoint: ALIBABA_BASE_URL,
-  ChatPath: (modelName: string) => {
-    if (modelName.includes("vl") || modelName.includes("omni")) {
-      return "v1/services/aigc/multimodal-generation/generation";
-    }
-    return `v1/services/aigc/text-generation/generation`;
-  },
+  ChatPath: "v1/services/aigc/text-generation/generation",
 };
 
 export const Tencent = {
@@ -540,8 +535,6 @@ const anthropicModels = [
   "claude-3-5-sonnet-20240620",
   "claude-3-5-sonnet-20241022",
   "claude-3-5-sonnet-latest",
-  "claude-3-7-sonnet-20250219",
-  "claude-3-7-sonnet-latest",
 ];
 
 const baiduModels = [
@@ -575,9 +568,6 @@ const alibabaModes = [
   "qwen-max-0403",
   "qwen-max-0107",
   "qwen-max-longcontext",
-  "qwen-omni-turbo",
-  "qwen-vl-plus",
-  "qwen-vl-max",
 ];
 
 const tencentModels = [

app/styles/markdown.scss

@@ -99,7 +99,6 @@
   font-size: 14px;
   line-height: 1.5;
   word-wrap: break-word;
-  margin-bottom: 0;
 }
 
 .light {
@@ -359,14 +358,8 @@
 .markdown-body kbd {
   display: inline-block;
   padding: 3px 5px;
-  font:
-    11px ui-monospace,
-    SFMono-Regular,
-    SF Mono,
-    Menlo,
-    Consolas,
-    Liberation Mono,
-    monospace;
+  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+    Liberation Mono, monospace;
   line-height: 10px;
   color: var(--color-fg-default);
   vertical-align: middle;
@@ -455,28 +448,16 @@
 .markdown-body tt,
 .markdown-body code,
 .markdown-body samp {
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    SF Mono,
-    Menlo,
-    Consolas,
-    Liberation Mono,
-    monospace;
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+    Liberation Mono, monospace;
   font-size: 12px;
 }
 
 .markdown-body pre {
   margin-top: 0;
   margin-bottom: 0;
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    SF Mono,
-    Menlo,
-    Consolas,
-    Liberation Mono,
-    monospace;
+  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+    Liberation Mono, monospace;
   font-size: 12px;
   word-wrap: normal;
 }
@@ -1149,87 +1130,3 @@
 #dmermaid {
   display: none;
 }
-
-.markdown-content {
-  width: 100%;
-}
-
-.markdown-paragraph {
-  transition: opacity 0.3s ease;
-  margin-bottom: 0.5em;
-
-  &.markdown-paragraph-visible {
-    opacity: 1;
-  }
-
-  &.markdown-paragraph-hidden {
-    opacity: 0.7;
-  }
-}
-
-.markdown-paragraph-placeholder {
-  padding: 8px;
-  color: var(--color-fg-subtle);
-  background-color: var(--color-canvas-subtle);
-  border-radius: 6px;
-  border-left: 3px solid var(--color-border-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family: var(--font-family-sans);
-  font-size: 14px;
-  min-height: 1.2em;
-}
-
-.markdown-paragraph-loading {
-  height: 20px;
-  background-color: var(--color-canvas-subtle);
-  border-radius: 6px;
-  margin-bottom: 8px;
-  position: relative;
-  overflow: hidden;
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 30%;
-    height: 100%;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      rgba(255, 255, 255, 0.1),
-      transparent
-    );
-    animation: shimmer 1.5s infinite;
-  }
-}
-
-@keyframes shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(200%);
-  }
-}
-
-.markdown-streaming-content {
-  width: 100%;
-}
-
-.markdown-streaming-paragraph {
-  opacity: 1;
-  animation: fadeIn 0.3s ease-in-out;
-  margin-bottom: 0.5em;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0.5;
-  }
-  to {
-    opacity: 1;
-  }
-}

app/utils/chat.ts

@@ -3,7 +3,7 @@ import {
   UPLOAD_URL,
   REQUEST_TIMEOUT_MS,
 } from "@/app/constant";
-import { MultimodalContent, RequestMessage } from "@/app/client/api";
+import { RequestMessage } from "@/app/client/api";
 import Locale from "@/app/locales";
 import {
   EventStreamContentType,
@@ -70,9 +70,8 @@ export function compressImage(file: Blob, maxSize: number): Promise<string> {
   });
 }
 
-export async function preProcessImageContentBase(
+export async function preProcessImageContent(
   content: RequestMessage["content"],
-  transformImageUrl: (url: string) => Promise<{ [key: string]: any }>,
 ) {
   if (typeof content === "string") {
     return content;
@@ -82,7 +81,7 @@ export async function preProcessImageContentBase(
     if (part?.type == "image_url" && part?.image_url?.url) {
       try {
         const url = await cacheImageToBase64Image(part?.image_url?.url);
-        result.push(await transformImageUrl(url));
+        result.push({ type: part.type, image_url: { url } });
       } catch (error) {
         console.error("Error processing image URL:", error);
       }
@@ -93,23 +92,6 @@ export async function preProcessImageContentBase(
   return result;
 }
 
-export async function preProcessImageContent(
-  content: RequestMessage["content"],
-) {
-  return preProcessImageContentBase(content, async (url) => ({
-    type: "image_url",
-    image_url: { url },
-  })) as Promise<MultimodalContent[] | string>;
-}
-
-export async function preProcessImageContentForAlibabaDashScope(
-  content: RequestMessage["content"],
-) {
-  return preProcessImageContentBase(content, async (url) => ({
-    image: url,
-  }));
-}
-
 const imageCaches: Record<string, string> = {};
 export function cacheImageToBase64Image(imageUrl: string) {
   if (imageUrl.includes(CACHE_URL_PREFIX)) {

jest.config.ts

@@ -15,8 +15,6 @@ const config: Config = {
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/$1",
   },
-  extensionsToTreatAsEsm: [".ts", ".tsx"],
-  injectGlobals: true,
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

jest.setup.ts

@@ -1,22 +1,24 @@
 // Learn more: https://github.com/testing-library/jest-dom
 import "@testing-library/jest-dom";
-import { jest } from "@jest/globals";
 
 global.fetch = jest.fn(() =>
   Promise.resolve({
     ok: true,
     status: 200,
-    json: () => Promise.resolve([]),
+    json: () => Promise.resolve({}),
     headers: new Headers(),
     redirected: false,
     statusText: "OK",
     type: "basic",
     url: "",
+    clone: function () {
+      return this;
+    },
     body: null,
     bodyUsed: false,
     arrayBuffer: () => Promise.resolve(new ArrayBuffer(0)),
     blob: () => Promise.resolve(new Blob()),
     formData: () => Promise.resolve(new FormData()),
     text: () => Promise.resolve(""),
-  } as Response),
+  }),
 );

package.json

@@ -17,8 +17,8 @@
     "prompts": "node ./scripts/fetch-prompts.mjs",
     "prepare": "husky install",
     "proxy-dev": "sh ./scripts/init-proxy.sh && proxychains -f ./scripts/proxychains.conf yarn dev",
-    "test": "node --no-warnings --experimental-vm-modules $(yarn bin jest) --watch",
-    "test:ci": "node --no-warnings --experimental-vm-modules $(yarn bin jest) --ci"
+    "test": "jest --watch",
+    "test:ci": "jest --ci"
   },
   "dependencies": {
     "@fortaine/fetch-event-source": "^3.0.6",

test/vision-model-checker.test.ts

@@ -1,4 +1,3 @@
-import { jest } from "@jest/globals";
 import { isVisionModel } from "../app/utils";
 
 describe("isVisionModel", () => {
@@ -51,7 +50,7 @@ describe("isVisionModel", () => {
 
   test("should identify models from VISION_MODELS env var", () => {
     process.env.VISION_MODELS = "custom-vision-model,another-vision-model";
-
+    
     expect(isVisionModel("custom-vision-model")).toBe(true);
     expect(isVisionModel("another-vision-model")).toBe(true);
     expect(isVisionModel("unrelated-model")).toBe(false);
@@ -65,4 +64,4 @@ describe("isVisionModel", () => {
     expect(isVisionModel("unrelated-model")).toBe(false);
     expect(isVisionModel("gpt-4-vision")).toBe(true);
   });
-});
+});