react-ai-renderer 0.1.21 → 0.1.24

package/dist/index.d.ts

@@ -110,6 +110,12 @@ interface ReactAIRendererProps {
     mdxLayoutClassName?: string;
     /** MdxLayout 的自定义样式 */
     mdxLayoutStyle?: React.CSSProperties;
+    /** 为 true 时未完成组件优先走 loader，避免 remount 后跳过骨架 */
+    streaming?: boolean;
+    /** 整体主题：dark（默认）/ light / 自定义字符串 */
+    theme?: "dark" | "light" | string;
+    /** 代码语法主题：github / atom / 或 react-syntax-highlighter prism 样式名（如 dracula、one-dark 等） */
+    codeTheme?: "github" | "atom" | string;
     /** 其他传递给组件的属性 */
     [key: string]: any;
 }
@@ -159,7 +165,7 @@ declare class MDXStreamingParser {
     private messages;
     constructor(components: any[]);
     isComponentRegistered(name: string): boolean;
-    parse(messageId: string, input: string): ComponentData[];
+    parse(_messageId: string, input: string): ComponentData[];
     private findComponentClose;
     private parseComponentTag;
     private parsePropsCommon;
@@ -167,6 +173,6 @@ declare class MDXStreamingParser {
     reset(): void;
 }
 
-declare function ReactAIRenderer({ content, scope, components, children, componentHandlers, useGithubStyles, mdxLayoutClassName, mdxLayoutStyle }: ReactAIRendererProps): React.JSX.Element | null;
+declare function ReactAIRenderer({ content, scope, components, children, componentHandlers, useGithubStyles, mdxLayoutClassName, mdxLayoutStyle, theme, codeTheme, }: ReactAIRendererProps): React.JSX.Element | null;
 
 export { ComponentData$1 as ComponentData, ComponentHandler, ComponentValue, EnhancedComponentConfig, MDXStreamingParser, MdxLayout, MdxLayoutProps, ParseResult, ParserState, ReactAIRendererProps, ReactMarkdownProps, Think, ThinkProps, ToolCall, ToolCallProps, ReactAIRenderer as default };

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import React__default, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
 import * as runtime from 'react/jsx-runtime';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import RemarkMath from 'remark-math';
@@ -316,22 +316,18 @@ var MDXStreamingParser = /** @class */function () {
   MDXStreamingParser.prototype.isComponentRegistered = function (name) {
     return this.registeredComponents.has(name);
   };
-  MDXStreamingParser.prototype.parse = function (messageId, input) {
+  MDXStreamingParser.prototype.parse = function (_messageId, input) {
     var e_1, _a, e_2, _b, e_3, _c;
-    // 获取或创建该消息的解析状态
-    var state = this.messages.get(messageId);
-    if (!state) {
-      state = {
-        position: 0,
-        stack: [],
-        buffer: '',
-        pendingClosingTag: undefined,
-        pendingOpeningTag: undefined
-      };
-      this.messages.set(messageId, state);
-    }
+    // 每次对完整 content 从零解析，保证流式增量与组件 remount 后全量重解析结果一致
+    var state = {
+      position: 0,
+      stack: [],
+      buffer: '',
+      pendingClosingTag: undefined,
+      pendingOpeningTag: undefined
+    };
     var result = [];
-    var i = state.position;
+    var i = 0;
     // 如果有暂存的不完整闭合标签，先尝试与当前输入合并处理
     if (state.pendingClosingTag) {
       var combinedInput = state.pendingClosingTag + input;
@@ -479,13 +475,11 @@ var MDXStreamingParser = /** @class */function () {
               // 如果部分标签是栈顶组件名的前缀，说明可能是不完整的闭合标签
               if (topComponentName.startsWith(partialTag) || partialTag.length === 0) {
                 state.pendingClosingTag = input.slice(i);
-                this.messages.set(messageId, state);
                 break;
               }
             }
             // 否则，可能是其他不完整的标签，暂存起来
             state.pendingClosingTag = input.slice(i);
-            this.messages.set(messageId, state);
             break;
           }
           var tagName = input.slice(i + 2, closeTagEnd);
@@ -531,7 +525,6 @@ var MDXStreamingParser = /** @class */function () {
               // 暂存起来，不添加到文本内容
               if (topComponentName.startsWith(tagName) && tagName.length < topComponentName.length) {
                 state.pendingClosingTag = input.slice(i, closeTagEnd + 1);
-                this.messages.set(messageId, state);
                 break;
               }
             }
@@ -579,12 +572,10 @@ var MDXStreamingParser = /** @class */function () {
                 // 找到了部分标签，暂存起来
                 var partialTagEnd = i + tagEndMatch[0].length - 1;
                 state.pendingOpeningTag = input.slice(i, partialTagEnd);
-                this.messages.set(messageId, state);
                 break;
               } else {
                 // 标签完全不完整，暂存整个片段
                 state.pendingOpeningTag = input.slice(i);
-                this.messages.set(messageId, state);
                 break;
               }
             } else {
@@ -622,18 +613,12 @@ var MDXStreamingParser = /** @class */function () {
             props = _k.props,
             endIndex = _k.endIndex,
             selfClosing = _k.selfClosing;
-          // 检测组件是否完整：
-          // 1. 自闭合组件一定是完整的
-          // 2. 非自闭合组件：如果有 props 且不在 stack 中（已闭合），则是完整的
-          // 对于流式渲染，如果 props 为空且不是自闭合，说明组件可能还在解析中
-          var hasProps = props && Object.keys(props).length > 0;
-          var isComplete = selfClosing || hasProps;
           var component = {
             type: "component",
             value: componentName,
             props: props || {},
             selfClosing: selfClosing,
-            isComplete: isComplete // 自闭合一定完整，非自闭合取决于是否有 props
+            isComplete: selfClosing
           };
           if (!selfClosing) {
             state.stack.push(component);
@@ -701,9 +686,35 @@ var MDXStreamingParser = /** @class */function () {
     state.stack.forEach(function (component) {
       component.isComplete = false;
     });
-    state.position = i;
-    // 保存状态
-    this.messages.set(messageId, state);
+    // 流式未闭合的根组件可能只在 stack 中，补进 result 供 loader 渲染
+    if (state.stack.length > 0) {
+      var root_1 = state.stack[0];
+      var already = result.some(function (item) {
+        return item.type === 'component' && item.value === root_1.value;
+      });
+      if (!already) {
+        result.push(root_1);
+      }
+    }
+    // 流式未闭合的开始标签（尚未入 stack）也产出占位组件，供 loader 渲染
+    if (state.pendingOpeningTag) {
+      var tagMatch = state.pendingOpeningTag.match(/^<([A-Z][A-Za-z0-9]*)/);
+      if (tagMatch && this.isComponentRegistered(tagMatch[1])) {
+        var name_1 = tagMatch[1];
+        var already = result.some(function (item) {
+          return item.type === 'component' && item.value === name_1;
+        });
+        if (!already) {
+          result.push({
+            type: 'component',
+            value: name_1,
+            props: {},
+            selfClosing: false,
+            isComplete: false
+          });
+        }
+      }
+    }
     return result;
   };
   MDXStreamingParser.prototype.findComponentClose = function (input, startIndex) {
@@ -39558,18 +39569,64 @@ function requireZTouch () {
 	var _zTouch = _interopRequireDefault(requireZTouch()); 
 } (prism$1));
 
-var themes = {
+var CODE_THEME_MAP = {
+  github: "ghcolors",
+  atom: "atom-dark",
+  "atom-dark": "atom-dark",
+  "atom-light": "atom-light",
+  dracula: "dracula",
+  "one-dark": "one-dark",
+  "one-light": "one-light",
+  nord: "nord",
+  "material-dark": "material-dark",
+  "material-light": "material-light",
+  "solarized-light": "solarizedlight",
+  "solarized-dark": "solarized-dark-atom",
+  okaidia: "okaidia",
+  tomorrow: "tomorrow",
+  coy: "coy",
+  "vsc-dark-plus": "vsc-dark-plus",
+  vs: "vs",
+  ghcolors: "ghcolors",
+  prism: "prism",
+  twilight: "twilight",
+  "duotone-dark": "duotone-dark",
+  "duotone-light": "duotone-light",
+  "night-owl": "night-owl",
+  darcula: "darcula",
+  "gruvbox-dark": "gruvbox-dark",
+  "gruvbox-light": "gruvbox-light"
+};
+// 预置的默认主题
+var DEFAULT_THEMES = {
   dark: prism$1.vscDarkPlus,
   light: prism$1.vs
 };
+/**
+ * 根据 codeTheme 名称加载对应的 prism 样式
+ */
+function loadCodeStyle(codeTheme) {
+  // 先查映射表
+  var moduleName = CODE_THEME_MAP[codeTheme] || codeTheme;
+  try {
+    // 使用 require 动态加载 prism 样式模块
+    var styles = require("react-syntax-highlighter/dist/cjs/styles/prism/".concat(moduleName));
+    return styles.default || styles;
+  } catch (_a) {
+    // 加载失败时回退到默认暗色主题
+    return prism$1.vscDarkPlus;
+  }
+}
 var CodeHighlight = function (_a) {
   var textContent = _a.textContent,
     _b = _a.language,
     language = _b === void 0 ? "txt" : _b,
-    darkMode = _a.darkMode;
-  var _c = __read(useState(false), 2),
-    showCopy = _c[0],
-    setShowCopy = _c[1];
+    _c = _a.theme,
+    theme = _c === void 0 ? "dark" : _c,
+    codeTheme = _a.codeTheme;
+  var _d = __read(useState(false), 2),
+    showCopy = _d[0],
+    setShowCopy = _d[1];
   var copyToClipboard = function (text) {
     return __awaiter(void 0, void 0, void 0, function () {
       var textarea;
@@ -39633,6 +39690,11 @@ var CodeHighlight = function (_a) {
       }, Date.now())
     });
   }
+  // 根据 codeTheme / theme 计算最终的代码高亮样式
+  var syntaxStyle = useMemo(function () {
+    if (codeTheme) return loadCodeStyle(codeTheme);
+    return DEFAULT_THEMES[theme] || DEFAULT_THEMES.dark;
+  }, [codeTheme, theme]);
   return /*#__PURE__*/jsxs("div", {
     style: {
       position: "relative"
@@ -39643,7 +39705,7 @@ var CodeHighlight = function (_a) {
         right: "10px",
         top: "5px",
         zIndex: 1,
-        background: darkMode ? "#555" : "#333",
+        background: theme === "light" ? "#e8e8e8" : "#555",
         color: "#fff",
         border: "none",
         padding: "4px 8px",
@@ -39663,7 +39725,7 @@ var CodeHighlight = function (_a) {
       },
       children: showCopy ? "点击复制" : "复制"
     }), /*#__PURE__*/jsx(SyntaxHighlighter, {
-      style: themes.dark,
+      style: syntaxStyle,
       language: language,
       PreTag: "div",
       children: String(textContent).replace(/\n$/, "")
@@ -39789,44 +39851,48 @@ var AudioComponent = function (_a) {
     }), "\u4F60\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301 audio \u6807\u7B7E"]
   });
 };
-// 代码组件
-var CodeComponent = function (props) {
-  var children = props.children,
-    className = props.className;
-    props.node;
-    var rest = __rest(props, ["children", "className", "node"]);
-  var match = /language-(\w+)/.exec(className || "");
-  String(children).replace(/\n$/, '');
-  var extractText = function (children) {
-    return React__default.Children.toArray(children).reduce(function (acc, child) {
-      if (typeof child === 'string') {
-        return acc + child;
-      } else if (/*#__PURE__*/React__default.isValidElement(child) && child.props && child.props.children) {
-        return acc + extractText(child.props.children);
+// 代码组件（支持 theme 和 codeTheme 透传）
+var createCodeComponent = function (theme, codeTheme) {
+  var CodeComponent = function (props) {
+    var children = props.children,
+      className = props.className;
+      props.node;
+      var rest = __rest(props, ["children", "className", "node"]);
+    var match = /language-(\w+)/.exec(className || "");
+    var extractText = function (children) {
+      return React__default.Children.toArray(children).reduce(function (acc, child) {
+        if (typeof child === 'string') {
+          return acc + child;
+        } else if (/*#__PURE__*/React__default.isValidElement(child) && child.props && child.props.children) {
+          return acc + extractText(child.props.children);
+        }
+        return acc;
+      }, '');
+    };
+    var content = extractText(children);
+    // 增强语言检测逻辑，检查内容中是否包含mermaid特征
+    var language = match ? match[1] : "txt";
+    // 如果内容包含mermaid特征且语言未正确识别，则强制设置为mermaid
+    if (!match || match[1] !== "mermaid") {
+      var trimmedContent = content.trim();
+      if (trimmedContent.startsWith('graph') || trimmedContent.startsWith('flowchart') || trimmedContent.startsWith('sequenceDiagram') || trimmedContent.startsWith('gantt') || trimmedContent.startsWith('classDiagram') || trimmedContent.startsWith('stateDiagram') || trimmedContent.startsWith('pie') || trimmedContent.startsWith('erDiagram') || trimmedContent.startsWith('journey') || trimmedContent.startsWith('requirementDiagram') || trimmedContent.startsWith('gitGraph')) {
+        language = "mermaid";
       }
-      return acc;
-    }, '');
+    }
+    return language !== "txt" ? /*#__PURE__*/jsx(CodeHighlight, {
+      ...rest,
+      language: language,
+      textContent: content,
+      theme: theme,
+      codeTheme: codeTheme,
+      children: content
+    }) : /*#__PURE__*/jsx("code", {
+      className: className,
+      ...props,
+      children: content
+    });
   };
-  var content = extractText(children);
-  // 增强语言检测逻辑，检查内容中是否包含mermaid特征
-  var language = match ? match[1] : "txt";
-  // 如果内容包含mermaid特征且语言未正确识别，则强制设置为mermaid
-  if (!match || match[1] !== "mermaid") {
-    var trimmedContent = content.trim();
-    if (trimmedContent.startsWith('graph') || trimmedContent.startsWith('flowchart') || trimmedContent.startsWith('sequenceDiagram') || trimmedContent.startsWith('gantt') || trimmedContent.startsWith('classDiagram') || trimmedContent.startsWith('stateDiagram') || trimmedContent.startsWith('pie') || trimmedContent.startsWith('erDiagram') || trimmedContent.startsWith('journey') || trimmedContent.startsWith('requirementDiagram') || trimmedContent.startsWith('gitGraph')) {
-      language = "mermaid";
-    }
-  }
-  return language !== "txt" ? /*#__PURE__*/jsx(CodeHighlight, {
-    ...rest,
-    language: language,
-    textContent: content,
-    children: content
-  }) : /*#__PURE__*/jsx("code", {
-    className: className,
-    ...props,
-    children: content
-  });
+  return CodeComponent;
 };
 // 段落组件
 var PComponent = function (pProps) {
@@ -39854,16 +39920,23 @@ var PreComponent = function (props) {
     ...props
   });
 };
-var BuiltInComponents = {
-  _THINK: Think,
-  // _TOOL_CALL: ToolCall,
-  pre: PreComponent,
-  code: CodeComponent,
-  p: PComponent,
-  a: AComponent,
-  video: VideoComponent,
-  audio: AudioComponent
-};
+/**
+ * 创建带主题配置的内置组件集合
+ * @param theme 整体主题 (dark / light / 自定义)
+ * @param codeTheme 代码语法主题 (github / atom / 自定义)
+ */
+function createBuiltInComponents(theme, codeTheme) {
+  var themedCode = createCodeComponent(theme, codeTheme);
+  return {
+    _THINK: Think,
+    pre: PreComponent,
+    code: themedCode,
+    p: PComponent,
+    a: AComponent,
+    video: VideoComponent,
+    audio: AudioComponent
+  };
+}
 
 var ErrorBoundary = /** @class */function (_super) {
   __extends(ErrorBoundary, _super);
@@ -59390,15 +59463,9 @@ var FallbackView = /** @class */function (_super) {
 function isEnhancedComponentConfig(value) {
   return typeof value === 'object' && value !== null && 'value' in value && typeof value.value !== 'undefined';
 }
-/**
- * 从组件值中提取实际的组件
- */
 function extractComponent(value) {
   return isEnhancedComponentConfig(value) ? value.value : value;
 }
-/**
- * 将 components 转换为 ComponentHandler 数组
- */
 function convertComponentsToHandlers(components, componentHandlers) {
   var e_1, _a;
   var handlers = [];
@@ -59450,6 +59517,58 @@ function convertComponentsToHandlers(components, componentHandlers) {
   }
   return handlers;
 }
+function buildLoaderShellFromParsed(parsedData, allComponentHandlers, layoutProps) {
+  if (!parsedData.length) return null;
+  var nodes = [];
+  var _loop_2 = function (i) {
+    var item = parsedData[i];
+    if (item.type === 'text') {
+      var t = String(item.value || '').trim();
+      if (t) {
+        nodes.push(/*#__PURE__*/React__default.createElement('div', {
+          key: "sync-txt-".concat(i),
+          style: {
+            whiteSpace: 'pre-wrap'
+          }
+        }, t));
+      }
+      return "continue";
+    }
+    if (item.type !== 'component' || item.isComplete === true) return "continue";
+    var handler = allComponentHandlers.find(function (c) {
+      return c.name === item.value;
+    });
+    if (!(handler === null || handler === void 0 ? void 0 : handler.loader)) return "continue";
+    var displayName = handler.label || item.value;
+    nodes.push(/*#__PURE__*/React__default.createElement(ComponentPlaceholder, {
+      key: "sync-loader-".concat(item.value, "-").concat(i),
+      componentName: displayName,
+      loader: handler.loader
+    }));
+  };
+  for (var i = 0; i < parsedData.length; i++) {
+    _loop_2(i);
+  }
+  if (!nodes.length) return null;
+  return /*#__PURE__*/React__default.createElement(MdxLayout, __assign(__assign({}, layoutProps), {
+    children: React__default.createElement.apply(React__default, __spreadArray([React__default.Fragment, null], __read(nodes), false))
+  }));
+}
+function parsedStructureSignature(parsedData) {
+  return parsedData.map(function (p) {
+    if (p.type === 'text') return "t:".concat(String(p.value || '').length);
+    return "c:".concat(p.value, ":").concat(p.isComplete === true ? '1' : '0');
+  }).join('|');
+}
+function hasPendingLoaderComponents(parsedData, handlers) {
+  return parsedData.some(function (item) {
+    var _a;
+    if (item.type !== 'component' || item.isComplete === true) return false;
+    return Boolean((_a = handlers.find(function (h) {
+      return h.name === item.value;
+    })) === null || _a === void 0 ? void 0 : _a.loader);
+  });
+}
 function ReactAIRenderer(_a) {
   var _this = this;
   var content = _a.content,
@@ -59462,14 +59581,19 @@ function ReactAIRenderer(_a) {
     componentHandlers = _d === void 0 ? [] : _d,
     useGithubStyles = _a.useGithubStyles,
     mdxLayoutClassName = _a.mdxLayoutClassName,
-    mdxLayoutStyle = _a.mdxLayoutStyle;
-  var _e = __read(useState(null), 2),
-    component = _e[0],
-    setComponent = _e[1];
+    mdxLayoutStyle = _a.mdxLayoutStyle,
+    _e = _a.theme,
+    theme = _e === void 0 ? "dark" : _e,
+    codeTheme = _a.codeTheme;
+  var _f = __read(useState(null), 2),
+    component = _f[0],
+    setComponent = _f[1];
   var fallbackErrorRef = useRef({
     hasError: false
   });
   var completedComponentsCacheRef = useRef(new Map());
+  var parserRef = useRef(null);
+  var lastLoaderSigRef = useRef('');
   var isBrowser = typeof window !== 'undefined';
   content = content || children || '';
   var normalizedComponents = components ? Object.fromEntries(Object.entries(components).filter(function (_a) {
@@ -59483,11 +59607,26 @@ function ReactAIRenderer(_a) {
       value = _b[1];
     return [name, extractComponent(value)];
   })) : {};
-  var allComponents = __assign(__assign({}, BuiltInComponents), normalizedComponents);
+  // 根据 theme / codeTheme 创建带主题配置的内置组件
+  var themedBuiltInComponents = useMemo(function () {
+    return createBuiltInComponents(theme, codeTheme);
+  }, [theme, codeTheme]);
+  var allComponents = __assign(__assign({}, themedBuiltInComponents), normalizedComponents);
   var allComponentHandlers = __spreadArray(__spreadArray([], __read(components ? convertComponentsToHandlers(components, componentHandlers) : []), false), __read(componentHandlers), false);
-  var parser = new MDXStreamingParser(allComponentHandlers);
+  if (!parserRef.current) {
+    parserRef.current = new MDXStreamingParser(allComponentHandlers);
+  }
+  var parser = parserRef.current;
   var mdxContent = content || '';
-  // FallbackView 错误状态变化时的回调
+  var handlersRef = useRef(allComponentHandlers);
+  handlersRef.current = allComponentHandlers;
+  var layoutProps = useMemo(function () {
+    return {
+      useGithubStyles: useGithubStyles,
+      className: mdxLayoutClassName,
+      style: mdxLayoutStyle
+    };
+  }, [useGithubStyles, mdxLayoutClassName, mdxLayoutStyle]);
   var handleFallbackErrorChange = function (hasError, error) {
     fallbackErrorRef.current = {
       hasError: hasError,
@@ -59496,17 +59635,32 @@ function ReactAIRenderer(_a) {
   };
   useEffect(function () {
     if (!isBrowser) return;
+    var cancelled = false;
     var parseMDX = function () {
       return __awaiter(_this, void 0, void 0, function () {
-        var ThinkComponent, ResultComponent, protectedContent, _a, thinkContent, resultContent, parsedData, parsedComponents, currentComponentCount, cacheKeys, cacheKeys_1, cacheKeys_1_1, key, indexMatch, index, finalComponent, fallbackComponent, _loop_2, i, MDXComponent, parsedDataLength, lastItem;
+        var protectedContent, _a, thinkContent, resultContent, parsedData_1, loaderSig, shell, ThinkComponent, ResultComponent, parsedData, parsedComponents, currentComponentCount, cacheKeys, cacheKeys_1, cacheKeys_1_1, key, indexMatch, index, finalComponent, fallbackComponent, _loop_3, i, MDXComponent, parsedDataLength, lastItem;
         var e_2, _b;
         return __generator(this, function (_c) {
           switch (_c.label) {
             case 0:
-              ThinkComponent = null;
-              ResultComponent = null;
               protectedContent = protectSpecialSyntax(mdxContent);
               _a = remarkThinkUpdate(protectedContent), thinkContent = _a.thinkContent, resultContent = _a.resultContent;
+              if (resultContent) {
+                resultContent = fixMDXContent(resultContent);
+                parsedData_1 = parser.parse('magic', resultContent);
+                loaderSig = parsedStructureSignature(parsedData_1);
+                if (hasPendingLoaderComponents(parsedData_1, handlersRef.current)) {
+                  if (loaderSig !== lastLoaderSigRef.current) {
+                    lastLoaderSigRef.current = loaderSig;
+                    shell = buildLoaderShellFromParsed(parsedData_1, handlersRef.current, layoutProps);
+                    if (shell && !cancelled) setComponent(shell);
+                  }
+                  return [2 /*return*/];
+                }
+                lastLoaderSigRef.current = '';
+              }
+              ThinkComponent = null;
+              ResultComponent = null;
               if (!thinkContent) return [3 /*break*/, 2];
               return [4 /*yield*/, renderMdx(thinkContent, scope, allComponents)];
             case 1:
@@ -59515,7 +59669,6 @@ function ReactAIRenderer(_a) {
             case 2:
               parsedData = [];
               if (!resultContent) return [3 /*break*/, 8];
-              resultContent = fixMDXContent(resultContent);
               parsedData = parser.parse('magic', resultContent);
               return [4 /*yield*/, Promise.all(parsedData.map(function (item) {
                 return parseComponentRecursively(allComponentHandlers, item, scope);
@@ -59531,7 +59684,6 @@ function ReactAIRenderer(_a) {
                   if (indexMatch) {
                     index = parseInt(indexMatch[1], 10);
                     if (index >= currentComponentCount) {
-                      // 如果索引超出当前组件数量，删除缓存
                       completedComponentsCacheRef.current.delete(key);
                     }
                   }
@@ -59549,7 +59701,7 @@ function ReactAIRenderer(_a) {
               }
               finalComponent = [];
               fallbackComponent = [];
-              _loop_2 = function (i) {
+              _loop_3 = function (i) {
                 var item, currentParsedItem, _result, placeholderForFallback, componentNameMatch, componentName_1, componentHandler, displayName, cacheKey;
                 return __generator(this, function (_d) {
                   switch (_d.label) {
@@ -59563,10 +59715,10 @@ function ReactAIRenderer(_a) {
                     case 1:
                       _result = _d.sent();
                       finalComponent.push(_result);
-                      return [3 /*break*/, 11];
+                      return [3 /*break*/, 12];
                     case 2:
                       componentNameMatch = item.value.match(/<([A-Z][A-Za-z0-9]*)/);
-                      if (!componentNameMatch) return [3 /*break*/, 9];
+                      if (!componentNameMatch) return [3 /*break*/, 10];
                       componentName_1 = componentNameMatch[1];
                       componentHandler = allComponentHandlers.find(function (c) {
                         return c.name === componentName_1;
@@ -59583,15 +59735,12 @@ function ReactAIRenderer(_a) {
                       if (!(currentParsedItem.isComplete === true || !(componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.loader))) return [3 /*break*/, 6];
                       cacheKey = "mdx-component-".concat(componentName_1, "-").concat(i);
                       if (!completedComponentsCacheRef.current.has(cacheKey)) return [3 /*break*/, 3];
-                      // 使用缓存的组件
                       _result = completedComponentsCacheRef.current.get(cacheKey);
                       return [3 /*break*/, 5];
                     case 3:
                       return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
                     case 4:
-                      // 缓存不存在，调用 renderMdx 并存入缓存
                       _result = _d.sent();
-                      // 为组件设置 key，确保 React 能正确识别
                       if (/*#__PURE__*/React__default.isValidElement(_result)) {
                         _result = /*#__PURE__*/React__default.cloneElement(_result, {
                           key: cacheKey
@@ -59601,30 +59750,30 @@ function ReactAIRenderer(_a) {
                           key: cacheKey
                         }, _result);
                       }
-                      // 存入缓存
                       completedComponentsCacheRef.current.set(cacheKey, _result);
                       _d.label = 5;
                     case 5:
                       finalComponent.push(_result);
-                      return [3 /*break*/, 8];
+                      return [3 /*break*/, 9];
                     case 6:
-                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
-                    case 7:
-                      // 组件未完成，正常渲染
-                      _result = _d.sent();
+                      if (!placeholderForFallback) return [3 /*break*/, 7];
                       finalComponent.push(placeholderForFallback);
-                      _d.label = 8;
+                      return [3 /*break*/, 9];
+                    case 7:
+                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
                     case 8:
-                      return [3 /*break*/, 11];
+                      _result = _d.sent();
+                      finalComponent.push(_result);
+                      _d.label = 9;
                     case 9:
-                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
+                      return [3 /*break*/, 12];
                     case 10:
-                      // 没有匹配到组件名，正常渲染
+                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
+                    case 11:
                       _result = _d.sent();
                       finalComponent.push(_result);
-                      _d.label = 11;
-                    case 11:
-                      // fallbackComponent 应该是 finalComponent 的前 i 个元素 + 当前 item 的 loader
+                      _d.label = 12;
+                    case 12:
                       fallbackComponent.length = 0;
                       fallbackComponent.push.apply(fallbackComponent, __spreadArray([], __read(finalComponent.slice(0, i)), false));
                       if (placeholderForFallback) {
@@ -59638,7 +59787,7 @@ function ReactAIRenderer(_a) {
               _c.label = 4;
             case 4:
               if (!(i < parsedComponents.length)) return [3 /*break*/, 7];
-              return [5 /*yield**/, _loop_2(i)];
+              return [5 /*yield**/, _loop_3(i)];
             case 5:
               _c.sent();
               _c.label = 6;
@@ -59661,13 +59810,13 @@ function ReactAIRenderer(_a) {
               MDXComponent = /*#__PURE__*/jsxs(React__default.Fragment, {
                 children: [ThinkComponent, ResultComponent]
               });
+              if (cancelled) return [2 /*return*/];
               if (!fallbackErrorRef.current.hasError) {
                 setComponent(MDXComponent);
               } else {
                 parsedDataLength = parsedData.length;
                 if (parsedDataLength > 0) {
                   lastItem = parsedData[parsedDataLength - 1];
-                  // 如果最后一个组件是完整的，强制更新
                   if (lastItem.isComplete === true) {
                     setComponent(MDXComponent);
                   } else if (lastItem.type === 'text') {
@@ -59681,7 +59830,10 @@ function ReactAIRenderer(_a) {
       });
     };
     parseMDX();
-  }, [content]);
+    return function () {
+      cancelled = true;
+    };
+  }, [content, theme, codeTheme]);
   if (!isBrowser) {
     return null;
   }