react-ai-renderer 0.1.21 → 0.1.25

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) {
@@ -805,33 +816,37 @@ var MDXStreamingParser = /** @class */function () {
           // 处理 JSON 值（对象或数组）
           var startChar = input[j];
           var startBracket = j;
-          // 使用局部变量跟踪属性值内部的括号嵌套
           var localBracketCount = 0;
           var localSquareBracketCount = 0;
           var inValueQuote = false;
           var valueQuoteChar = '';
+          var inBacktick = false;
+          var closingStack = [];
           if (startChar === '{') {
             localBracketCount = 1;
+            closingStack.push('}');
           } else {
             localSquareBracketCount = 1;
+            closingStack.push(']');
           }
           j++;
-          // 同时跟踪花括号和方括号的嵌套
           while (j < input.length && (localBracketCount > 0 || localSquareBracketCount > 0)) {
-            if (input[j] === '"' || input[j] === "'") {
-              // 在字符串内，跳过整个字符串
+            if (input[j] === '`' && !inValueQuote) {
+              inBacktick = !inBacktick;
+              j++;
+            } else if (inBacktick) {
+              j++;
+            } else if (input[j] === '"' || input[j] === "'") {
               if (!inValueQuote) {
                 inValueQuote = true;
                 valueQuoteChar = input[j];
               } else if (input[j] === valueQuoteChar) {
-                // 检查是否是转义的引号
                 var escapeCount = 0;
                 var k = j - 1;
                 while (k >= 0 && input[k] === '\\') {
                   escapeCount++;
                   k--;
                 }
-                // 如果是偶数个反斜杠，说明引号没有被转义
                 if (escapeCount % 2 === 0) {
                   inValueQuote = false;
                 }
@@ -839,15 +854,23 @@ var MDXStreamingParser = /** @class */function () {
               j++;
             } else if (input[j] === '{' && !inValueQuote) {
               localBracketCount++;
+              closingStack.push('}');
               j++;
             } else if (input[j] === '}' && !inValueQuote) {
               localBracketCount--;
+              if (closingStack.length > 0 && closingStack[closingStack.length - 1] === '}') {
+                closingStack.pop();
+              }
               j++;
             } else if (input[j] === '[' && !inValueQuote) {
               localSquareBracketCount++;
+              closingStack.push(']');
               j++;
             } else if (input[j] === ']' && !inValueQuote) {
               localSquareBracketCount--;
+              if (closingStack.length > 0 && closingStack[closingStack.length - 1] === ']') {
+                closingStack.pop();
+              }
               j++;
             } else {
               j++;
@@ -855,31 +878,46 @@ var MDXStreamingParser = /** @class */function () {
           }
           var rawValue = input.slice(startBracket, j);
           value = input.slice(startBracket + 1, j - 1);
+          // 流式修复：输入未结束但括号未闭合，尝试关闭不完整的表达式
+          if (j >= input.length && closingStack.length > 0) {
+            var healed = rawValue;
+            if (inBacktick) healed += '`';
+            if (inValueQuote) healed += valueQuoteChar;
+            healed += closingStack.reverse().join('');
+            // 剥离外层 JSX 表达式括号 {{ → {，用 (...) 包裹强制表达式上下文
+            var inner = healed.slice(1, -1);
+            try {
+              props[propName] = new Function('return (' + inner + ')')();
+            } catch (_a) {
+              try {
+                var jv = inner.replace(/`([^`]*)`/g, function (_, p1) {
+                  return JSON.stringify(p1);
+                }).replace(/'([^'\\]*(\\.[^'\\]*)*)'/g, function (m) {
+                  var s = m.slice(1, -1).replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+                  return "\"".concat(s, "\"");
+                }).replace(/([{,]\s*)([\p{L}_$][\p{L}\p{N}_$]*)\s*:/gu, '$1"$2":');
+                props[propName] = JSON.parse(jv);
+              } catch (_b) {
+                // 修复失败，不设置 prop，组件以骨架态渲染
+              }
+            }
+            i = j;
+            continue;
+          }
           try {
-            // 直接使用 Function 构造器来评估 JavaScript 表达式
-            // 这比手动转换 JavaScript 对象字面量为 JSON 更可靠
             props[propName] = new Function('return ' + rawValue)();
           } catch (e) {
-            // 如果 Function 构造器失败，尝试手动转换并解析为 JSON
             try {
-              // 将 JavaScript 对象字面量转换为有效的 JSON
-              // 1. 将单引号字符串转换为双引号字符串
               var jsonValue = value.replace(/'([^'\\]*(\\.[^'\\]*)*)'/g, function (match) {
-                // 将单引号内容转换为双引号，并转义内部的双引号和反斜杠
                 var inner = match.slice(1, -1).replace(/\\/g, '\\\\').replace(/"/g, '\\"');
                 return "\"".concat(inner, "\"");
               });
-              // 2. 为对象键名添加引号（如果还没有引号）
-              // 修复：使用 \p{L} 匹配 Unicode 字母（包括中文），使用 u 标志
               jsonValue = jsonValue.replace(/([{,]\s*)([\p{L}_$][\p{L}\p{N}_$]*)\s*:/gu, '$1"$2":');
-              // 3. 处理属性值中的模板字符串
               jsonValue = jsonValue.replace(/`([^`]*)`/g, function (match, p1) {
                 return JSON.stringify(p1);
               });
-              // 4. 尝试解析为 JSON
               props[propName] = JSON.parse(jsonValue);
             } catch (jsonError) {
-              // 如果都失败了，保持原值
               props[propName] = value;
             }
           }
@@ -39558,18 +39596,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 +39717,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 +39732,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 +39752,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 +39878,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 +39947,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 +59490,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 = [];
@@ -59420,7 +59514,8 @@ function convertComponentsToHandlers(components, componentHandlers) {
         onRenderProcess: config.onRenderProcess,
         onRenderFinished: config.onRenderFinished,
         loader: config.loader,
-        label: config.label
+        label: config.label,
+        streamable: config.streamable
       });
     } else {
       handlers.push({
@@ -59450,6 +59545,59 @@ 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) {
+    if (item.type !== 'component' || item.isComplete === true) return false;
+    var handler = handlers.find(function (h) {
+      return h.name === item.value;
+    });
+    if (handler === null || handler === void 0 ? void 0 : handler.streamable) return false;
+    return Boolean(handler === null || handler === void 0 ? void 0 : handler.loader);
+  });
+}
 function ReactAIRenderer(_a) {
   var _this = this;
   var content = _a.content,
@@ -59462,14 +59610,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 +59636,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 +59664,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 +59698,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 +59713,6 @@ function ReactAIRenderer(_a) {
                   if (indexMatch) {
                     index = parseInt(indexMatch[1], 10);
                     if (index >= currentComponentCount) {
-                      // 如果索引超出当前组件数量，删除缓存
                       completedComponentsCacheRef.current.delete(key);
                     }
                   }
@@ -59549,8 +59730,8 @@ function ReactAIRenderer(_a) {
               }
               finalComponent = [];
               fallbackComponent = [];
-              _loop_2 = function (i) {
-                var item, currentParsedItem, _result, placeholderForFallback, componentNameMatch, componentName_1, componentHandler, displayName, cacheKey;
+              _loop_3 = function (i) {
+                var item, currentParsedItem, _result, placeholderForFallback, componentNameMatch, componentName_1, componentHandler, displayName, cacheKey, cacheKey;
                 return __generator(this, function (_d) {
                   switch (_d.label) {
                     case 0:
@@ -59563,10 +59744,10 @@ function ReactAIRenderer(_a) {
                     case 1:
                       _result = _d.sent();
                       finalComponent.push(_result);
-                      return [3 /*break*/, 11];
+                      return [3 /*break*/, 14];
                     case 2:
                       componentNameMatch = item.value.match(/<([A-Z][A-Za-z0-9]*)/);
-                      if (!componentNameMatch) return [3 /*break*/, 9];
+                      if (!componentNameMatch) return [3 /*break*/, 12];
                       componentName_1 = componentNameMatch[1];
                       componentHandler = allComponentHandlers.find(function (c) {
                         return c.name === componentName_1;
@@ -59580,18 +59761,22 @@ function ReactAIRenderer(_a) {
                         loader: componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.loader,
                         key: "fallback-loader-".concat(componentName_1)
                       });
-                      if (!(currentParsedItem.isComplete === true || !(componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.loader))) return [3 /*break*/, 6];
+                      if (!(currentParsedItem.isComplete === true || !(componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.loader))) return [3 /*break*/, 7];
                       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];
+                      return [3 /*break*/, 6];
                     case 3:
-                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
+                      if (!(componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.streamable)) return [3 /*break*/, 4];
+                      _result = /*#__PURE__*/React__default.createElement(componentHandler.component, __assign(__assign({}, currentParsedItem.props), {
+                        key: cacheKey
+                      }));
+                      completedComponentsCacheRef.current.set(cacheKey, _result);
+                      return [3 /*break*/, 6];
                     case 4:
-                      // 缓存不存在，调用 renderMdx 并存入缓存
+                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
+                    case 5:
                       _result = _d.sent();
-                      // 为组件设置 key，确保 React 能正确识别
                       if (/*#__PURE__*/React__default.isValidElement(_result)) {
                         _result = /*#__PURE__*/React__default.cloneElement(_result, {
                           key: cacheKey
@@ -59601,30 +59786,38 @@ function ReactAIRenderer(_a) {
                           key: cacheKey
                         }, _result);
                       }
-                      // 存入缓存
                       completedComponentsCacheRef.current.set(cacheKey, _result);
-                      _d.label = 5;
-                    case 5:
-                      finalComponent.push(_result);
-                      return [3 /*break*/, 8];
+                      _d.label = 6;
                     case 6:
-                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
+                      finalComponent.push(_result);
+                      return [3 /*break*/, 11];
                     case 7:
-                      // 组件未完成，正常渲染
-                      _result = _d.sent();
-                      finalComponent.push(placeholderForFallback);
-                      _d.label = 8;
+                      if (!(componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.streamable)) return [3 /*break*/, 8];
+                      cacheKey = "mdx-component-".concat(componentName_1, "-").concat(i);
+                      _result = /*#__PURE__*/React__default.createElement(componentHandler.component, __assign(__assign({}, currentParsedItem.props), {
+                        key: cacheKey
+                      }));
+                      finalComponent.push(_result);
+                      return [3 /*break*/, 11];
                     case 8:
+                      if (!placeholderForFallback) return [3 /*break*/, 9];
+                      finalComponent.push(placeholderForFallback);
                       return [3 /*break*/, 11];
                     case 9:
                       return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
                     case 10:
-                      // 没有匹配到组件名，正常渲染
                       _result = _d.sent();
                       finalComponent.push(_result);
                       _d.label = 11;
                     case 11:
-                      // fallbackComponent 应该是 finalComponent 的前 i 个元素 + 当前 item 的 loader
+                      return [3 /*break*/, 14];
+                    case 12:
+                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
+                    case 13:
+                      _result = _d.sent();
+                      finalComponent.push(_result);
+                      _d.label = 14;
+                    case 14:
                       fallbackComponent.length = 0;
                       fallbackComponent.push.apply(fallbackComponent, __spreadArray([], __read(finalComponent.slice(0, i)), false));
                       if (placeholderForFallback) {
@@ -59638,7 +59831,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 +59854,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 +59874,10 @@ function ReactAIRenderer(_a) {
       });
     };
     parseMDX();
-  }, [content]);
+    return function () {
+      cancelled = true;
+    };
+  }, [content, theme, codeTheme]);
   if (!isBrowser) {
     return null;
   }