refactor: clean up chat and markdown components, improve markdown rendering with lazy loading and streaming support

.env.template

@@ -81,9 +81,3 @@ SILICONFLOW_API_KEY=
 
 ### siliconflow Api url (optional)
 SILICONFLOW_URL=
-
-### openrouter Api key (optional)
-OPENROUTER_API_KEY=
-
-### openrouter Api url (optional)
-OPENROUTER_URL=

README.md

@@ -22,7 +22,7 @@ English / [简体中文](./README_CN.md)
 [![MacOS][MacOS-image]][download-url]
 [![Linux][Linux-image]][download-url]
 
-[NextChatAI](https://nextchat.club?utm_source=readme) / [iOS APP](https://apps.apple.com/us/app/nextchat-ai/id6743085599) / [Web App Demo](https://app.nextchat.dev) / [Desktop App](https://github.com/Yidadaa/ChatGPT-Next-Web/releases) / [Enterprise Edition](#enterprise-edition) 
+[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)
 
 
 [saas-url]: https://nextchat.club?utm_source=readme
@@ -40,12 +40,11 @@ English / [简体中文](./README_CN.md)
 
 </div>
 
-## 🥳 Cheer for NextChat iOS Version Online!
+## 🥳 Cheer for DeepSeek, China's AI star!
-> [👉 Click Here to Install Now](https://apps.apple.com/us/app/nextchat-ai/id6743085599)
+ > Purpose-Built UI for DeepSeek Reasoner Model
  
-> [❤️ Source Code Coming Soon](https://github.com/ChatGPTNextWeb/NextChat-iOS)
+<img src="https://github.com/user-attachments/assets/f3952210-3af1-4dc0-9b81-40eaa4847d9a"/>
 
-![Github iOS Image](https://github.com/user-attachments/assets/e0aa334f-4c13-4dc9-8310-e3b09fa4b9f3)
 
 
 ## 🫣 NextChat Support MCP  ! 
@@ -311,9 +310,6 @@ To control custom models, use `+` to add a custom model, use `-` to hide a model
 
 User `-all` to disable all default models, `+all` to enable all default models.
 
-Models from OpenRouter (except `openrouter/auto`) need to be configured manually, use `+provider/model@OpenRouter`.
-> Example: `+qwen/qwen3-32b:free@OpenRouter` will show `qwen/qwen3-32b:free(OpenRouter)` in model list.
-
 For Azure: use `modelName@Azure=deploymentName` to customize model name and deployment name.
 > Example: `+gpt-3.5-turbo@Azure=gpt35` will show option `gpt35(Azure)` in model list.
 > If you only can use Azure model, `-all,+gpt-3.5-turbo@Azure=gpt35` will `gpt35(Azure)` the only option in model list.
@@ -364,14 +360,6 @@ SiliconFlow API Key.
 
 SiliconFlow API URL.
 
-### `OPENROUTER_API_KEY` (optional)
-
-OpenRouter API Key.
-
-### `OPENROUTER_URL` (optional)
-
-OpenRouter API URL.
-
 ## Requirements
 
 NodeJS >= 18, Docker >= 20

README_CN.md

@@ -232,9 +232,6 @@ DeepSeek Api Url.
 
 用来控制模型列表，使用 `+` 增加一个模型，使用 `-` 来隐藏一个模型，使用 `模型名=展示名` 来自定义模型的展示名，用英文逗号隔开。
 
-OpenRouter 提供的模型（除 `openrouter/auto` 外）需要手动配置，使用 `+provider/model@OpenRouter`。
-> 示例：`+qwen/qwen3-32b:free@OpenRouter` 这个配置会在模型列表显示一个 `qwen/qwen3-32b:free(OpenRouter)` 的选项。
-
 在Azure的模式下，支持使用`modelName@Azure=deploymentName`的方式配置模型名称和部署名称(deploy-name)
 > 示例：`+gpt-3.5-turbo@Azure=gpt35`这个配置会在模型列表显示一个`gpt35(Azure)`的选项。
 > 如果你只能使用Azure模式，那么设置 `-all,+gpt-3.5-turbo@Azure=gpt35` 则可以让对话的默认使用 `gpt35(Azure)`
@@ -278,14 +275,6 @@ SiliconFlow API Key.
 
 SiliconFlow API URL.
 
-### `OPENROUTER_API_KEY` (optional)
-
-OpenRouter API Key.
-
-### `OPENROUTER_URL` (optional)
-
-OpenRouter API URL.
-
 ## 开发
 
 点击下方按钮，开始二次开发：

app/api/[provider]/[...path]/route.ts

@@ -15,7 +15,6 @@ import { handle as siliconflowHandler } from "../../siliconflow";
 import { handle as xaiHandler } from "../../xai";
 import { handle as chatglmHandler } from "../../glm";
 import { handle as proxyHandler } from "../../proxy";
-import { handle as openrouterHandler } from "../../openrouter";
 
 async function handle(
   req: NextRequest,
@@ -51,8 +50,6 @@ async function handle(
       return chatglmHandler(req, { params });
     case ApiPath.SiliconFlow:
       return siliconflowHandler(req, { params });
-    case ApiPath.OpenRouter:
-      return openrouterHandler(req, { params });
     case ApiPath.OpenAI:
       return openaiHandler(req, { params });
     default:

app/api/auth.ts

@@ -104,9 +104,6 @@ export function auth(req: NextRequest, modelProvider: ModelProvider) {
       case ModelProvider.SiliconFlow:
         systemApiKey = serverConfig.siliconFlowApiKey;
         break;
-      case ModelProvider.OpenRouter:
-        systemApiKey = serverConfig.openrouterApiKey;
-        break;
       case ModelProvider.GPT:
       default:
         if (req.nextUrl.pathname.includes("azure/deployments")) {

app/api/openrouter.ts

@@ -1,128 +0,0 @@
-import { getServerSideConfig } from "@/app/config/server";
-import {
-  OPENROUTER_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 { isModelNotavailableInServer } from "@/app/utils/model";
-
-const serverConfig = getServerSideConfig();
-
-export async function handle(
-  req: NextRequest,
-  { params }: { params: { path: string[] } },
-) {
-  console.log("[OpenRouter Route] params ", params);
-
-  if (req.method === "OPTIONS") {
-    return NextResponse.json({ body: "OK" }, { status: 200 });
-  }
-
-  const authResult = auth(req, ModelProvider.OpenRouter);
-  if (authResult.error) {
-    return NextResponse.json(authResult, {
-      status: 401,
-    });
-  }
-
-  try {
-    const response = await request(req);
-    return response;
-  } catch (e) {
-    console.error("[OpenRouter] ", 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.OpenRouter, "");
-
-  let baseUrl = serverConfig.openrouterUrl || OPENROUTER_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 (
-        isModelNotavailableInServer(
-          serverConfig.customModels,
-          jsonBody?.model as string,
-          ServiceProvider.OpenRouter as string,
-        )
-      ) {
-        return NextResponse.json(
-          {
-            error: true,
-            message: `you are not allowed to use ${jsonBody?.model} model`,
-          },
-          {
-            status: 403,
-          },
-        );
-      }
-    } catch (e) {
-      console.error(`[OpenRouter] 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);
-  }
-}

app/client/api.ts

@@ -24,7 +24,6 @@ import { DeepSeekApi } from "./platforms/deepseek";
 import { XAIApi } from "./platforms/xai";
 import { ChatGLMApi } from "./platforms/glm";
 import { SiliconflowApi } from "./platforms/siliconflow";
-import { OpenRouterApi } from "./platforms/openrouter";
 
 export const ROLES = ["system", "user", "assistant"] as const;
 export type MessageRole = (typeof ROLES)[number];
@@ -174,9 +173,6 @@ export class ClientApi {
       case ModelProvider.SiliconFlow:
         this.llm = new SiliconflowApi();
         break;
-      case ModelProvider.OpenRouter:
-        this.llm = new OpenRouterApi();
-        break;
       default:
         this.llm = new ChatGPTApi();
     }
@@ -269,8 +265,6 @@ export function getHeaders(ignoreHeaders: boolean = false) {
     const isChatGLM = modelConfig.providerName === ServiceProvider.ChatGLM;
     const isSiliconFlow =
       modelConfig.providerName === ServiceProvider.SiliconFlow;
-    const isOpenRouter =
-      modelConfig.providerName === ServiceProvider.OpenRouter;
     const isEnabledAccessControl = accessStore.enabledAccessControl();
     const apiKey = isGoogle
       ? accessStore.googleApiKey
@@ -292,8 +286,6 @@ export function getHeaders(ignoreHeaders: boolean = false) {
       ? accessStore.chatglmApiKey
       : isSiliconFlow
       ? accessStore.siliconflowApiKey
-      : isOpenRouter
-      ? accessStore.openrouterApiKey
       : isIflytek
       ? accessStore.iflytekApiKey && accessStore.iflytekApiSecret
         ? accessStore.iflytekApiKey + ":" + accessStore.iflytekApiSecret
@@ -312,7 +304,6 @@ export function getHeaders(ignoreHeaders: boolean = false) {
       isXAI,
       isChatGLM,
       isSiliconFlow,
-      isOpenRouter,
       apiKey,
       isEnabledAccessControl,
     };
@@ -341,7 +332,6 @@ export function getHeaders(ignoreHeaders: boolean = false) {
     isXAI,
     isChatGLM,
     isSiliconFlow,
-    isOpenRouter,
     apiKey,
     isEnabledAccessControl,
   } = getConfig();
@@ -392,8 +382,6 @@ export function getClientApi(provider: ServiceProvider): ClientApi {
       return new ClientApi(ModelProvider.ChatGLM);
     case ServiceProvider.SiliconFlow:
       return new ClientApi(ModelProvider.SiliconFlow);
-    case ServiceProvider.OpenRouter:
-      return new ClientApi(ModelProvider.OpenRouter);
     default:
       return new ClientApi(ModelProvider.GPT);
   }

app/client/platforms/openai.ts

@@ -198,8 +198,7 @@ export class ChatGPTApi implements LLMApi {
     const isDalle3 = _isDalle3(options.config.model);
     const isO1OrO3 =
       options.config.model.startsWith("o1") ||
-      options.config.model.startsWith("o3") ||
+      options.config.model.startsWith("o3");
-      options.config.model.startsWith("o4-mini");
     if (isDalle3) {
       const prompt = getMessageTextContent(
         options.messages.slice(-1)?.pop() as any,
@@ -244,7 +243,7 @@ export class ChatGPTApi implements LLMApi {
       }
 
       // add max_tokens to vision model
-      if (visionModel && !isO1OrO3) {
+      if (visionModel) {
         requestPayload["max_tokens"] = Math.max(modelConfig.max_tokens, 4000);
       }
     }

app/client/platforms/openrouter.ts

@@ -1,287 +0,0 @@
-"use client";
-// azure and openai, using same models. so using same LLMApi.
-import {
-  ApiPath,
-  OPENROUTER_BASE_URL,
-  OpenRouter,
-  DEFAULT_MODELS,
-} from "@/app/constant";
-import {
-  useAccessStore,
-  useAppConfig,
-  useChatStore,
-  ChatMessageTool,
-  usePluginStore,
-} from "@/app/store";
-import { preProcessImageContent, streamWithThink } from "@/app/utils/chat";
-import {
-  ChatOptions,
-  getHeaders,
-  LLMApi,
-  LLMModel,
-  SpeechOptions,
-} from "../api";
-import { getClientConfig } from "@/app/config/client";
-import {
-  getMessageTextContent,
-  getMessageTextContentWithoutThinking,
-  isVisionModel,
-  getTimeoutMSByModel,
-} from "@/app/utils";
-import { RequestPayload } from "./openai";
-
-import { fetch } from "@/app/utils/stream";
-export interface OpenRouterListModelResponse {
-  object: string;
-  data: Array<{
-    id: string;
-    object: string;
-    root: string;
-  }>;
-}
-
-export class OpenRouterApi implements LLMApi {
-  private disableListModels = false;
-
-  path(path: string): string {
-    const accessStore = useAccessStore.getState();
-
-    let baseUrl = "";
-
-    if (accessStore.useCustomConfig) {
-      baseUrl = accessStore.openrouterUrl;
-    }
-
-    if (baseUrl.length === 0) {
-      const isApp = !!getClientConfig()?.isApp;
-      const apiPath = ApiPath.OpenRouter;
-      baseUrl = isApp ? OPENROUTER_BASE_URL : apiPath;
-    }
-
-    if (baseUrl.endsWith("/")) {
-      baseUrl = baseUrl.slice(0, baseUrl.length - 1);
-    }
-    if (
-      !baseUrl.startsWith("http") &&
-      !baseUrl.startsWith(ApiPath.OpenRouter)
-    ) {
-      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 visionModel = isVisionModel(options.config.model);
-    const messages: ChatOptions["messages"] = [];
-    for (const v of options.messages) {
-      if (v.role === "assistant") {
-        const content = getMessageTextContentWithoutThinking(v);
-        messages.push({ role: v.role, content });
-      } else {
-        const content = visionModel
-          ? await preProcessImageContent(v.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,
-      // max_tokens: Math.max(modelConfig.max_tokens, 1024),
-      // Please do not ask me why not send max_tokens, no reason, this param is just shit, I dont want to explain anymore.
-    };
-
-    console.log("[Request] openai payload: ", requestPayload);
-
-    const shouldStream = !!options.config.stream;
-    const controller = new AbortController();
-    options.onController?.(controller);
-
-    try {
-      const chatPath = this.path(OpenRouter.ChatPath);
-      const chatPayload = {
-        method: "POST",
-        body: JSON.stringify(requestPayload),
-        signal: controller.signal,
-        headers: getHeaders(),
-      };
-
-      // console.log(chatPayload);
-
-      // Use extended timeout for thinking models as they typically require more processing time
-      const requestTimeoutId = setTimeout(
-        () => controller.abort(),
-        getTimeoutMSByModel(options.config.model),
-      );
-
-      if (shouldStream) {
-        const [tools, funcs] = usePluginStore
-          .getState()
-          .getAsTools(
-            useChatStore.getState().currentSession().mask?.plugin || [],
-          );
-        return streamWithThink(
-          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 | null;
-                tool_calls: ChatMessageTool[];
-                reasoning: string | null;
-              };
-            }>;
-            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;
-              }
-            }
-            const reasoning = choices[0]?.delta?.reasoning;
-            const content = choices[0]?.delta?.content;
-
-            // Skip if both content and reasoning_content are empty or null
-            if (
-              (!reasoning || reasoning.length === 0) &&
-              (!content || content.length === 0)
-            ) {
-              return {
-                isThinking: false,
-                content: "",
-              };
-            }
-
-            if (reasoning && reasoning.length > 0) {
-              return {
-                isThinking: true,
-                content: reasoning,
-              };
-            } else if (content && content.length > 0) {
-              return {
-                isThinking: false,
-                content: content,
-              };
-            }
-
-            return {
-              isThinking: false,
-              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, res);
-      }
-    } 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[]> {
-    if (this.disableListModels) {
-      return DEFAULT_MODELS.slice();
-    }
-
-    const res = await fetch(this.path(OpenRouter.ListModelPath), {
-      method: "GET",
-      headers: {
-        ...getHeaders(),
-      },
-    });
-
-    const resJson = (await res.json()) as OpenRouterListModelResponse;
-    const chatModels = resJson.data;
-    console.log("[Models]", chatModels);
-
-    if (!chatModels) {
-      return [];
-    }
-
-    let seq = 1000; //同 Constant.ts 中的排序保持一致
-    return chatModels.map((m) => ({
-      name: m.id,
-      available: true,
-      sorted: seq++,
-      provider: {
-        id: "openrouter",
-        providerName: "OpenRouter",
-        providerType: "openrouter",
-        sorted: 15,
-      },
-    }));
-  }
-}

app/components/chat.tsx

@@ -18,7 +18,6 @@ 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";
@@ -79,8 +78,6 @@ 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";
@@ -125,14 +122,15 @@ 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, {
+// const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
-  loading: () => <LoadingIcon />,
+//   loading: () => <LoadingIcon />,
-});
+// });
 
 const MCPAction = () => {
   const navigate = useNavigate();
@@ -1984,6 +1982,8 @@ 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

@@ -57,32 +57,18 @@ export function Avatar(props: { model?: ModelType; avatar?: string }) {
       modelName.startsWith("dall-e") ||
       modelName.startsWith("dalle") ||
       modelName.startsWith("o1") ||
-      modelName.startsWith("o3") ||
+      modelName.startsWith("o3")
-      modelName.startsWith("openai/")
     ) {
       LlmIcon = BotIconOpenAI;
-    } else if (
+    } else if (modelName.startsWith("gemini")) {
-      modelName.startsWith("gemini") ||
-      modelName.startsWith("google/gemini")
-    ) {
       LlmIcon = BotIconGemini;
-    } else if (
+    } else if (modelName.startsWith("gemma")) {
-      modelName.startsWith("gemma") ||
-      modelName.startsWith("google/gemma")
-    ) {
       LlmIcon = BotIconGemma;
-    } else if (
+    } else if (modelName.startsWith("claude")) {
-      modelName.startsWith("claude") ||
-      modelName.startsWith("anthropic/claude")
-    ) {
       LlmIcon = BotIconClaude;
     } else if (modelName.includes("llama")) {
       LlmIcon = BotIconMeta;
-    } else if (
+    } else if (modelName.startsWith("mixtral") || modelName.startsWith("codestral")) {
-      modelName.startsWith("mixtral") ||
-      modelName.startsWith("codestral") ||
-      modelName.startsWith("mistralai/")
-    ) {
       LlmIcon = BotIconMistral;
     } else if (modelName.includes("deepseek")) {
       LlmIcon = BotIconDeepseek;
@@ -92,10 +78,7 @@ export function Avatar(props: { model?: ModelType; avatar?: string }) {
       LlmIcon = BotIconQwen;
     } else if (modelName.startsWith("ernie")) {
       LlmIcon = BotIconWenxin;
-    } else if (
+    } else if (modelName.startsWith("grok")) {
-      modelName.startsWith("grok") ||
-      modelName.startsWith("x-ai/grok")
-    ) {
       LlmIcon = BotIconGrok;
     } else if (modelName.startsWith("hunyuan")) {
       LlmIcon = BotIconHunyuan;

app/components/markdown.tsx

@@ -267,6 +267,136 @@ 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));
@@ -326,9 +456,27 @@ 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
@@ -344,6 +492,24 @@ 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/components/settings.tsx

@@ -75,7 +75,6 @@ import {
   ChatGLM,
   DeepSeek,
   SiliconFlow,
-  OpenRouter,
 } from "../constant";
 import { Prompt, SearchService, usePromptStore } from "../store/prompt";
 import { ErrorBoundary } from "./error";
@@ -1360,46 +1359,6 @@ export function Settings() {
       </ListItem>
     </>
   );
-  const openrouterConfigComponent = accessStore.provider ===
-    ServiceProvider.OpenRouter && (
-    <>
-      <ListItem
-        title={Locale.Settings.Access.OpenRouter.Endpoint.Title}
-        subTitle={
-          Locale.Settings.Access.OpenRouter.Endpoint.SubTitle +
-          OpenRouter.ExampleEndpoint
-        }
-      >
-        <input
-          aria-label={Locale.Settings.Access.OpenRouter.Endpoint.Title}
-          type="text"
-          value={accessStore.openrouterUrl}
-          placeholder={OpenRouter.ExampleEndpoint}
-          onChange={(e) =>
-            accessStore.update(
-              (access) => (access.openrouterUrl = e.currentTarget.value),
-            )
-          }
-        ></input>
-      </ListItem>
-      <ListItem
-        title={Locale.Settings.Access.OpenRouter.ApiKey.Title}
-        subTitle={Locale.Settings.Access.OpenRouter.ApiKey.SubTitle}
-      >
-        <PasswordInput
-          aria-label={Locale.Settings.Access.OpenRouter.ApiKey.Title}
-          value={accessStore.openrouterApiKey}
-          type="text"
-          placeholder={Locale.Settings.Access.OpenRouter.ApiKey.Placeholder}
-          onChange={(e) => {
-            accessStore.update(
-              (access) => (access.openrouterApiKey = e.currentTarget.value),
-            );
-          }}
-        />
-      </ListItem>
-    </>
-  );
 
   const stabilityConfigComponent = accessStore.provider ===
     ServiceProvider.Stability && (
@@ -1863,7 +1822,6 @@ export function Settings() {
                   {XAIConfigComponent}
                   {chatglmConfigComponent}
                   {siliconflowConfigComponent}
-                  {openrouterConfigComponent}
                 </>
               )}
             </>

app/config/server.ts

@@ -88,10 +88,6 @@ declare global {
       SILICONFLOW_URL?: string;
       SILICONFLOW_API_KEY?: string;
 
-      // openrouter only
-      OPENROUTER_URL?: string;
-      OPENROUTER_API_KEY?: string;
-
       // custom template for preprocessing user input
       DEFAULT_INPUT_TEMPLATE?: string;
 
@@ -167,7 +163,6 @@ export const getServerSideConfig = () => {
   const isXAI = !!process.env.XAI_API_KEY;
   const isChatGLM = !!process.env.CHATGLM_API_KEY;
   const isSiliconFlow = !!process.env.SILICONFLOW_API_KEY;
-  const isOpenRouter = !!process.env.OPENROUTER_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);
@@ -251,10 +246,6 @@ export const getServerSideConfig = () => {
     siliconFlowUrl: process.env.SILICONFLOW_URL,
     siliconFlowApiKey: getApiKey(process.env.SILICONFLOW_API_KEY),
 
-    isOpenRouter,
-    openrouterUrl: process.env.OPENROUTER_URL,
-    openrouterApiKey: getApiKey(process.env.OPENROUTER_API_KEY),
-
     gtmId: process.env.GTM_ID,
     gaId: process.env.GA_ID || DEFAULT_GA_ID,
 

app/constant.ts

@@ -36,8 +36,6 @@ export const CHATGLM_BASE_URL = "https://open.bigmodel.cn";
 
 export const SILICONFLOW_BASE_URL = "https://api.siliconflow.cn";
 
-export const OPENROUTER_BASE_URL = "https://openrouter.ai/api";
-
 export const CACHE_URL_PREFIX = "/api/cache";
 export const UPLOAD_URL = `${CACHE_URL_PREFIX}/upload`;
 
@@ -74,7 +72,6 @@ export enum ApiPath {
   ChatGLM = "/api/chatglm",
   DeepSeek = "/api/deepseek",
   SiliconFlow = "/api/siliconflow",
-  OpenRouter = "/api/openrouter",
 }
 
 export enum SlotID {
@@ -133,7 +130,6 @@ export enum ServiceProvider {
   ChatGLM = "ChatGLM",
   DeepSeek = "DeepSeek",
   SiliconFlow = "SiliconFlow",
-  OpenRouter = "OpenRouter",
 }
 
 // Google API safety settings, see https://ai.google.dev/gemini-api/docs/safety-settings
@@ -160,7 +156,6 @@ export enum ModelProvider {
   ChatGLM = "ChatGLM",
   DeepSeek = "DeepSeek",
   SiliconFlow = "SiliconFlow",
-  OpenRouter = "OpenRouter",
 }
 
 export const Stability = {
@@ -271,12 +266,6 @@ export const SiliconFlow = {
   ListModelPath: "v1/models?&sub_type=chat",
 };
 
-export const OpenRouter = {
-  ExampleEndpoint: OPENROUTER_BASE_URL,
-  ChatPath: "v1/chat/completions",
-  ListModelPath: "v1/models",
-};
-
 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}}.
@@ -428,14 +417,6 @@ export const KnowledgeCutOffDate: Record<string, string> = {
   "gpt-4-turbo": "2023-12",
   "gpt-4-turbo-2024-04-09": "2023-12",
   "gpt-4-turbo-preview": "2023-12",
-  "gpt-4.1": "2024-06",
-  "gpt-4.1-2025-04-14": "2024-06",
-  "gpt-4.1-mini": "2024-06",
-  "gpt-4.1-mini-2025-04-14": "2024-06",
-  "gpt-4.1-nano": "2024-06",
-  "gpt-4.1-nano-2025-04-14": "2024-06",
-  "gpt-4.5-preview": "2023-10",
-  "gpt-4.5-preview-2025-02-27": "2023-10",
   "gpt-4o": "2023-10",
   "gpt-4o-2024-05-13": "2023-10",
   "gpt-4o-2024-08-06": "2023-10",
@@ -477,7 +458,6 @@ export const DEFAULT_TTS_VOICES = [
 export const VISION_MODEL_REGEXES = [
   /vision/,
   /gpt-4o/,
-  /gpt-4\.1/,
   /claude-3/,
   /gemini-1\.5/,
   /gemini-exp/,
@@ -489,8 +469,6 @@ export const VISION_MODEL_REGEXES = [
   /^dall-e-3$/, // Matches exactly "dall-e-3"
   /glm-4v/,
   /vl/i,
-  /o3/,
-  /o4-mini/,
 ];
 
 export const EXCLUDE_VISION_MODEL_REGEXES = [/claude-3-5-haiku-20241022/];
@@ -507,14 +485,6 @@ const openaiModels = [
   "gpt-4-32k-0613",
   "gpt-4-turbo",
   "gpt-4-turbo-preview",
-  "gpt-4.1",
-  "gpt-4.1-2025-04-14",
-  "gpt-4.1-mini",
-  "gpt-4.1-mini-2025-04-14",
-  "gpt-4.1-nano",
-  "gpt-4.1-nano-2025-04-14",
-  "gpt-4.5-preview",
-  "gpt-4.5-preview-2025-02-27",
   "gpt-4o",
   "gpt-4o-2024-05-13",
   "gpt-4o-2024-08-06",
@@ -529,8 +499,6 @@ const openaiModels = [
   "o1-mini",
   "o1-preview",
   "o3-mini",
-  "o3",
-  "o4-mini",
 ];
 
 const googleModels = [
@@ -682,12 +650,6 @@ const siliconflowModels = [
   "Pro/deepseek-ai/DeepSeek-V3",
 ];
 
-// Use this to generate a full model list -> https://gist.github.com/hyc1230/d4b271d161ffcda485f1fa1a27e08096
-const openrouterModels = [
-  // Requires user to customize models
-  "openrouter/auto",
-];
-
 let seq = 1000; // 内置的模型序号生成器从1000开始
 export const DEFAULT_MODELS = [
   ...openaiModels.map((name) => ({
@@ -844,17 +806,6 @@ export const DEFAULT_MODELS = [
       sorted: 14,
     },
   })),
-  ...openrouterModels.map((name) => ({
-    name,
-    available: true,
-    sorted: seq++,
-    provider: {
-      id: "openrouter",
-      providerName: "OpenRouter",
-      providerType: "openrouter",
-      sorted: 15,
-    },
-  })),
 ] as const;
 
 export const CHAT_PAGE_SIZE = 15;

app/locales/cn.ts

@@ -507,17 +507,6 @@ const cn = {
           SubTitle: "样例：",
         },
       },
-      OpenRouter: {
-        ApiKey: {
-          Title: "接口密钥",
-          SubTitle: "使用自定义 OpenRouter API Key",
-          Placeholder: "OpenRouter API Key",
-        },
-        Endpoint: {
-          Title: "接口地址",
-          SubTitle: "样例：",
-        },
-      },
       Stability: {
         ApiKey: {
           Title: "接口密钥",

app/locales/da.ts

@@ -467,17 +467,6 @@ const da: PartialLocaleType = {
           SubTitle: "F.eks.: ",
         },
       },
-      OpenRouter: {
-        ApiKey: {
-          Title: "OpenRouter-nøgle",
-          SubTitle: "Din egen OpenRouter-nøgle",
-          Placeholder: "OpenRouter API Key",
-        },
-        Endpoint: {
-          Title: "Adresse",
-          SubTitle: "F.eks.: ",
-        },
-      },
       Stability: {
         ApiKey: {
           Title: "Stability-nøgle",

app/locales/en.ts

@@ -491,17 +491,6 @@ const en: LocaleType = {
           SubTitle: "Example: ",
         },
       },
-      OpenRouter: {
-        ApiKey: {
-          Title: "OpenRouter API Key",
-          SubTitle: "Use a custom OpenRouter API Key",
-          Placeholder: "OpenRouter API Key",
-        },
-        Endpoint: {
-          Title: "Endpoint Address",
-          SubTitle: "Example: ",
-        },
-      },
       Stability: {
         ApiKey: {
           Title: "Stability API Key",

app/store/access.ts

@@ -17,7 +17,6 @@ import {
   XAI_BASE_URL,
   CHATGLM_BASE_URL,
   SILICONFLOW_BASE_URL,
-  OPENROUTER_BASE_URL,
 } from "../constant";
 import { getHeaders } from "../client/api";
 import { getClientConfig } from "../config/client";
@@ -60,8 +59,6 @@ const DEFAULT_SILICONFLOW_URL = isApp
   ? SILICONFLOW_BASE_URL
   : ApiPath.SiliconFlow;
 
-const DEFAULT_OPENROUTER_URL = isApp ? OPENROUTER_BASE_URL : ApiPath.OpenRouter;
-
 const DEFAULT_ACCESS_STATE = {
   accessCode: "",
   useCustomConfig: false,
@@ -135,10 +132,6 @@ const DEFAULT_ACCESS_STATE = {
   siliconflowUrl: DEFAULT_SILICONFLOW_URL,
   siliconflowApiKey: "",
 
-  // openrouter
-  openrouterUrl: DEFAULT_OPENROUTER_URL,
-  openrouterApiKey: "",
-
   // server config
   needCode: true,
   hideUserApiKey: false,
@@ -226,10 +219,6 @@ export const useAccessStore = createPersistStore(
       return ensure(get(), ["siliconflowApiKey"]);
     },
 
-    isValidOpenRouter() {
-      return ensure(get(), ["openrouterApiKey"]);
-    },
-
     isAuthorized() {
       this.fetch();
 
@@ -249,7 +238,6 @@ export const useAccessStore = createPersistStore(
         this.isValidXAI() ||
         this.isValidChatGLM() ||
         this.isValidSiliconFlow() ||
-        this.isValidOpenRouter() ||
         !this.enabledAccessControl() ||
         (this.enabledAccessControl() && ensure(get(), ["accessCode"]))
       );

app/styles/markdown.scss

@@ -99,6 +99,7 @@
   font-size: 14px;
   line-height: 1.5;
   word-wrap: break-word;
+  margin-bottom: 0;
 }
 
 .light {
@@ -358,8 +359,14 @@
 .markdown-body kbd {
   display: inline-block;
   padding: 3px 5px;
-  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+  font:
-    Liberation Mono, monospace;
+    11px ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Menlo,
+    Consolas,
+    Liberation Mono,
+    monospace;
   line-height: 10px;
   color: var(--color-fg-default);
   vertical-align: middle;
@@ -448,16 +455,28 @@
 .markdown-body tt,
 .markdown-body code,
 .markdown-body samp {
-  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+  font-family:
-    Liberation Mono, monospace;
+    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,
+  font-family:
-    Liberation Mono, monospace;
+    ui-monospace,
+    SFMono-Regular,
+    SF Mono,
+    Menlo,
+    Consolas,
+    Liberation Mono,
+    monospace;
   font-size: 12px;
   word-wrap: normal;
 }
@@ -1130,3 +1149,87 @@
 #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;
+  }
+}