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

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,14 +40,13 @@ English / [简体中文](./README_CN.md)
 
 </div>
 
-## 🥳 Cheer for NextChat iOS Version Online!
-> [👉 Click Here to Install Now](https://apps.apple.com/us/app/nextchat-ai/id6743085599)
-
-> [❤️ Source Code Coming Soon](https://github.com/ChatGPTNextWeb/NextChat-iOS)
-
-![Github iOS Image](https://github.com/user-attachments/assets/e0aa334f-4c13-4dc9-8310-e3b09fa4b9f3)
-
+## 🥳 Cheer for DeepSeek, China's AI star!
+ > Purpose-Built UI for DeepSeek Reasoner Model
  
+<img src="https://github.com/user-attachments/assets/f3952210-3af1-4dc0-9b81-40eaa4847d9a"/>
+
+
+
 ## 🫣 NextChat Support MCP  ! 
 > Before build, please set env ENABLE_MCP=true
 

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("o4-mini");
+      options.config.model.startsWith("o3");
     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/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, {
-  loading: () => <LoadingIcon />,
-});
+// const Markdown = dynamic(async () => (await import("./markdown")).Markdown, {
+//   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/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/mcp-market.tsx

@@ -23,12 +23,10 @@ import {
 } from "../mcp/actions";
 import {
   ListToolsResponse,
-  ToolSchema,
   McpConfigData,
   PresetServer,
   ServerConfig,
   ServerStatusResponse,
-  isServerStdioConfig,
 } from "../mcp/types";
 import clsx from "clsx";
 import PlayIcon from "../icons/play.svg";
@@ -48,7 +46,7 @@ export function McpMarketPage() {
   const [searchText, setSearchText] = useState("");
   const [userConfig, setUserConfig] = useState<Record<string, any>>({});
   const [editingServerId, setEditingServerId] = useState<string | undefined>();
-  const [tools, setTools] = useState<ListToolsResponse | null>(null);
+  const [tools, setTools] = useState<ListToolsResponse["tools"] | null>(null);
   const [viewingServerId, setViewingServerId] = useState<string | undefined>();
   const [isLoading, setIsLoading] = useState(false);
   const [config, setConfig] = useState<McpConfigData>();
@@ -138,7 +136,7 @@ export function McpMarketPage() {
   useEffect(() => {
     if (!editingServerId || !config) return;
     const currentConfig = config.mcpServers[editingServerId];
-    if (isServerStdioConfig(currentConfig)) {
+    if (currentConfig) {
       // 从当前配置中提取用户配置
       const preset = presetServers.find((s) => s.id === editingServerId);
       if (preset?.configSchema) {
@@ -734,14 +732,16 @@ export function McpMarketPage() {
                 {isLoading ? (
                   <div>Loading...</div>
                 ) : tools?.tools ? (
-                  tools.tools.map((tool: ToolSchema, index: number) => (
-                    <div key={index} className={styles["tool-item"]}>
-                      <div className={styles["tool-name"]}>{tool.name}</div>
-                      <div className={styles["tool-description"]}>
-                        {tool.description}
+                  tools.tools.map(
+                    (tool: ListToolsResponse["tools"], index: number) => (
+                      <div key={index} className={styles["tool-item"]}>
+                        <div className={styles["tool-name"]}>{tool.name}</div>
+                        <div className={styles["tool-description"]}>
+                          {tool.description}
+                        </div>
                       </div>
-                    </div>
-                  ))
+                    ),
+                  )
                 ) : (
                   <div>No tools available</div>
                 )}

app/config/build.ts

@@ -40,17 +40,6 @@ export const getBuildConfig = () => {
     buildMode,
     isApp,
     template: process.env.DEFAULT_INPUT_TEMPLATE ?? DEFAULT_INPUT_TEMPLATE,
-
-    needCode: !!process.env.CODE,
-    hideUserApiKey: !!process.env.HIDE_USER_API_KEY,
-    baseUrl: process.env.BASE_URL,
-    openaiUrl: process.env.OPENAI_BASE_URL ?? process.env.BASE_URL,
-    disableGPT4: !!process.env.DISABLE_GPT4,
-    useCustomConfig: !!process.env.USE_CUSTOM_CONFIG,
-    hideBalanceQuery: !process.env.ENABLE_BALANCE_QUERY,
-    disableFastLink: !!process.env.DISABLE_FAST_LINK,
-    defaultModel: process.env.DEFAULT_MODEL ?? "",
-    enableMcp: process.env.ENABLE_MCP === "true",
   };
 };
 

app/constant.ts

@@ -417,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",
@@ -466,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/,
@@ -478,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/];
@@ -496,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",
@@ -518,8 +499,6 @@ const openaiModels = [
   "o1-mini",
   "o1-preview",
   "o3-mini",
-  "o3",
-  "o4-mini",
 ];
 
 const googleModels = [

app/mcp/actions.ts

@@ -1,6 +1,4 @@
-if (!EXPORT_MODE) {
-  ("use server");
-}
+"use server";
 import {
   createClient,
   executeRequest,
@@ -16,17 +14,12 @@ import {
   ServerConfig,
   ServerStatusResponse,
 } from "./types";
+import fs from "fs/promises";
+import path from "path";
+import { getServerSideConfig } from "../config/server";
 
 const logger = new MCPClientLogger("MCP Actions");
-
-const getConfigPath = async () => {
-  if (EXPORT_MODE) {
-    return "/mcp/config.json";
-  } else {
-    const path = await import("path");
-    return path.join(process.cwd(), "app/mcp/mcp_config.json");
-  }
-};
+const CONFIG_PATH = path.join(process.cwd(), "app/mcp/mcp_config.json");
 
 const clientsMap = new Map<string, McpClientData>();
 
@@ -346,14 +339,7 @@ export async function executeMcpAction(
   request: McpRequestMessage,
 ) {
   try {
-    let client = clientsMap.get(clientId);
-    if (!client) {
-      client = [...clientsMap.values()].find(
-        (c) =>
-          c.tools?.tools &&
-          c.tools.tools.find((t) => t.name == request.params?.name),
-      );
-    }
+    const client = clientsMap.get(clientId);
     if (!client?.client) {
       throw new Error(`Client ${clientId} not found`);
     }
@@ -368,28 +354,8 @@ export async function executeMcpAction(
 // 获取 MCP 配置文件
 export async function getMcpConfigFromFile(): Promise<McpConfigData> {
   try {
-    if (EXPORT_MODE) {
-      const res = await fetch(await getConfigPath());
-      const config: McpConfigData = await res.json();
-      const storage = localStorage;
-      const storedConfig_str = storage.getItem("McpConfig");
-      if (storedConfig_str) {
-        const storedConfig: McpConfigData = JSON.parse(storedConfig_str);
-        const merged = { ...config.mcpServers };
-        if (storedConfig.mcpServers) {
-          for (const id in storedConfig.mcpServers) {
-            merged[id] = { ...merged[id], ...storedConfig.mcpServers[id] };
-          }
-        }
-
-        config.mcpServers = merged;
-      }
-      return config;
-    } else {
-      const fs = await import("fs/promises");
-      const configStr = await fs.readFile(await getConfigPath(), "utf-8");
-      return JSON.parse(configStr);
-    }
+    const configStr = await fs.readFile(CONFIG_PATH, "utf-8");
+    return JSON.parse(configStr);
   } catch (error) {
     logger.error(`Failed to load MCP config, using default config: ${error}`);
     return DEFAULT_MCP_CONFIG;
@@ -400,25 +366,8 @@ export async function getMcpConfigFromFile(): Promise<McpConfigData> {
 async function updateMcpConfig(config: McpConfigData): Promise<void> {
   try {
     // 确保目录存在
-    if (EXPORT_MODE) {
-      try {
-        const storage = localStorage;
-        storage.setItem("McpConfig", JSON.stringify(config));
-      } catch (storageError) {
-        logger.warn(
-          `Failed to save MCP config to localStorage: ${storageError}`,
-        );
-        // Continue execution without storage
-      }
-    } else {
-      const fs = await import("fs/promises");
-      const path = await import("path");
-      await fs.mkdir(path.dirname(await getConfigPath()), { recursive: true });
-      await fs.writeFile(
-        await getConfigPath(),
-        JSON.stringify(config, null, 2),
-      );
-    }
+    await fs.mkdir(path.dirname(CONFIG_PATH), { recursive: true });
+    await fs.writeFile(CONFIG_PATH, JSON.stringify(config, null, 2));
   } catch (error) {
     throw error;
   }
@@ -427,19 +376,8 @@ async function updateMcpConfig(config: McpConfigData): Promise<void> {
 // 检查 MCP 是否启用
 export async function isMcpEnabled() {
   try {
-    const config = await getMcpConfigFromFile();
-    if (typeof config.enableMcp === "boolean") {
-      return config.enableMcp;
-    }
-    if (EXPORT_MODE) {
-      const { getClientConfig } = await import("../config/client");
-      const clientConfig = getClientConfig();
-      return clientConfig?.enableMcp === true;
-    } else {
-      const { getServerSideConfig } = await import("../config/server");
-      const serverConfig = getServerSideConfig();
-      return serverConfig.enableMcp;
-    }
+    const serverConfig = getServerSideConfig();
+    return serverConfig.enableMcp;
   } catch (error) {
     logger.error(`Failed to check MCP status: ${error}`);
     return false;

app/mcp/client.ts

@@ -1,11 +1,7 @@
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
 import { MCPClientLogger } from "./logger";
-import {
-  ListToolsResponse,
-  McpRequestMessage,
-  ServerConfig,
-  isServerSseConfig,
-} from "./types";
+import { ListToolsResponse, McpRequestMessage, ServerConfig } from "./types";
 import { z } from "zod";
 
 const logger = new MCPClientLogger();
@@ -16,34 +12,18 @@ export async function createClient(
 ): Promise<Client> {
   logger.info(`Creating client for ${id}...`);
 
-  let transport;
-
-  if (isServerSseConfig(config)) {
-    const { SSEClientTransport } = await import(
-      "@modelcontextprotocol/sdk/client/sse.js"
-    );
-    transport = new SSEClientTransport(new URL(config.url));
-  } else {
-    if (EXPORT_MODE) {
-      throw new Error("Cannot use stdio transport in export mode");
-    } else {
-      const { StdioClientTransport } = await import(
-        "@modelcontextprotocol/sdk/client/stdio.js"
-      );
-      transport = new StdioClientTransport({
-        command: config.command,
-        args: config.args,
-        env: {
-          ...Object.fromEntries(
-            Object.entries(process.env)
-              .filter(([_, v]) => v !== undefined)
-              .map(([k, v]) => [k, v as string]),
-          ),
-          ...(config.env || {}),
-        },
-      });
-    }
-  }
+  const transport = new StdioClientTransport({
+    command: config.command,
+    args: config.args,
+    env: {
+      ...Object.fromEntries(
+        Object.entries(process.env)
+          .filter(([_, v]) => v !== undefined)
+          .map(([k, v]) => [k, v as string]),
+      ),
+      ...(config.env || {}),
+    },
+  });
 
   const client = new Client(
     {

app/mcp/types.ts

@@ -8,7 +8,6 @@ export interface McpRequestMessage {
   id?: string | number;
   method: "tools/call" | string;
   params?: {
-    name?: string;
     [key: string]: unknown;
   };
 }
@@ -66,14 +65,12 @@ export const McpNotificationsSchema: z.ZodType<McpNotifications> = z.object({
 // Next Chat
 ////////////
 export interface ListToolsResponse {
-  tools: ToolSchema[];
-}
-
-export interface ToolSchema {
-  name?: string;
-  description?: string;
-  inputSchema?: object;
-  [key: string]: any;
+  tools: {
+    name?: string;
+    description?: string;
+    inputSchema?: object;
+    [key: string]: any;
+  };
 }
 
 export type McpClientData =
@@ -113,31 +110,14 @@ export interface ServerStatusResponse {
 }
 
 // MCP 服务器配置相关类型
-
-export const isServerSseConfig = (c?: ServerConfig): c is ServerSseConfig =>
-  c !== null && typeof c === "object" && c.type === "sse";
-export const isServerStdioConfig = (c?: ServerConfig): c is ServerStdioConfig =>
-  c !== null && typeof c === "object" && (!c.type || c.type === "stdio");
-
-export type ServerConfig = ServerStdioConfig | ServerSseConfig;
-
-export interface ServerStdioConfig {
-  type?: "stdio";
+export interface ServerConfig {
   command: string;
   args: string[];
   env?: Record<string, string>;
   status?: "active" | "paused" | "error";
 }
 
-export interface ServerSseConfig {
-  type: "sse";
-  url: string;
-  headers?: Record<string, string>;
-  status?: "active" | "paused" | "error";
-}
-
 export interface McpConfigData {
-  enableMcp?: boolean;
   // MCP Server 的配置
   mcpServers: Record<string, ServerConfig>;
 }

app/store/access.ts

@@ -243,12 +243,7 @@ export const useAccessStore = createPersistStore(
       );
     },
     fetch() {
-      const clientConfig = getClientConfig();
-      if (!(fetchState > 0) && clientConfig?.buildMode === "export") {
-        set(clientConfig);
-        fetchState = 2;
-      }
-      if (fetchState > 0 || clientConfig?.buildMode === "export") return;
+      if (fetchState > 0 || getClientConfig()?.buildMode === "export") return;
       fetchState = 1;
       fetch("/api/config", {
         method: "post",

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,
-    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;
@@ -448,16 +455,28 @@
 .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;
 }
@@ -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;
+  }
+}

app/typing.ts

@@ -1,7 +1,3 @@
-declare global {
-  const EXPORT_MODE: boolean;
-}
-
 export type Updater<T> = (updater: (value: T) => void) => void;
 
 export const ROLES = ["system", "user", "assistant"] as const;

next.config.mjs

@@ -6,15 +6,9 @@ console.log("[Next] build mode", mode);
 const disableChunk = !!process.env.DISABLE_CHUNK || mode === "export";
 console.log("[Next] build with chunk: ", !disableChunk);
 
-const EXPORT_MODE = mode === "export";
-
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   webpack(config) {
-    config.plugins.push(new webpack.DefinePlugin({
-      EXPORT_MODE: EXPORT_MODE
-    }));
     config.module.rules.push({
       test: /\.svg$/,
       use: ["@svgr/webpack"],