react-ai-renderer 0.1.20 → 0.1.24

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';
@@ -9,58 +9,6 @@ import { run, compile } from '@mdx-js/mdx';
 import RehypeKatex from 'rehype-katex';
 import RehypeHighlight from 'rehype-highlight';
 
-// SSR 兼容性 polyfill
-// 这个文件确保在服务端渲染时不会因为访问 document 而报错
-// 在模块加载时就设置全局保护
-if (typeof globalThis !== 'undefined' && globalThis.document === undefined) {
-  // 为 SSR 环境创建一个模拟的 document 对象
-  var mockElement_1 = {
-    innerHTML: '',
-    textContent: '',
-    appendChild: function () {
-      return mockElement_1;
-    },
-    removeChild: function () {
-      return mockElement_1;
-    },
-    remove: function () {},
-    id: '',
-    className: '',
-    setAttribute: function () {},
-    getAttribute: function () {
-      return null;
-    },
-    removeAttribute: function () {},
-    querySelector: function () {
-      return null;
-    },
-    querySelectorAll: function () {
-      return [];
-    }
-  };
-  // 创建模拟的 document 对象
-  var mockDocument = {
-    createElement: function () {
-      return mockElement_1;
-    },
-    getElementById: function () {
-      return null;
-    },
-    querySelector: function () {
-      return null;
-    },
-    querySelectorAll: function () {
-      return [];
-    },
-    body: mockElement_1,
-    head: mockElement_1,
-    addEventListener: function () {},
-    removeEventListener: function () {}
-  };
-  // 在 SSR 环境中提供全局的 document
-  globalThis.document = mockDocument;
-}
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -197,6 +145,165 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+if (typeof globalThis !== 'undefined' && typeof globalThis.window === 'undefined') {
+  var mockElement_1 = {
+    innerHTML: '',
+    textContent: '',
+    nodeValue: '',
+    appendChild: function () {
+      return mockElement_1;
+    },
+    removeChild: function () {
+      return mockElement_1;
+    },
+    insertBefore: function () {
+      return mockElement_1;
+    },
+    replaceChild: function () {
+      return mockElement_1;
+    },
+    cloneNode: function () {
+      return mockElement_1;
+    },
+    remove: function () {},
+    id: '',
+    className: '',
+    classList: {
+      add: function () {},
+      remove: function () {},
+      contains: function () {
+        return false;
+      },
+      toggle: function () {
+        return false;
+      }
+    },
+    style: {},
+    setAttribute: function () {},
+    getAttribute: function () {
+      return null;
+    },
+    removeAttribute: function () {},
+    hasAttribute: function () {
+      return false;
+    },
+    querySelector: function () {
+      return null;
+    },
+    querySelectorAll: function () {
+      return [];
+    },
+    getElementsByTagName: function () {
+      return [];
+    },
+    getElementsByClassName: function () {
+      return [];
+    },
+    addEventListener: function () {},
+    removeEventListener: function () {},
+    dispatchEvent: function () {
+      return true;
+    },
+    parentNode: null,
+    parentElement: null,
+    childNodes: [],
+    children: [],
+    firstChild: null,
+    lastChild: null,
+    nextSibling: null,
+    previousSibling: null
+  };
+  var mockDocument = {
+    createElement: function () {
+      return mockElement_1;
+    },
+    createElementNS: function () {
+      return mockElement_1;
+    },
+    createTextNode: function (text) {
+      return __assign(__assign({}, mockElement_1), {
+        nodeValue: text,
+        textContent: text
+      });
+    },
+    createDocumentFragment: function () {
+      return mockElement_1;
+    },
+    getElementById: function () {
+      return null;
+    },
+    querySelector: function () {
+      return null;
+    },
+    querySelectorAll: function () {
+      return [];
+    },
+    getElementsByTagName: function () {
+      return [];
+    },
+    getElementsByClassName: function () {
+      return [];
+    },
+    body: mockElement_1,
+    head: mockElement_1,
+    documentElement: mockElement_1,
+    addEventListener: function () {},
+    removeEventListener: function () {},
+    createEvent: function () {
+      return {};
+    }
+  };
+  var mockWindow = {
+    document: mockDocument,
+    location: {
+      href: '',
+      origin: '',
+      protocol: 'https:',
+      host: '',
+      hostname: '',
+      port: '',
+      pathname: '/',
+      search: '',
+      hash: ''
+    },
+    navigator: {
+      userAgent: '',
+      language: 'en-US',
+      platform: ''
+    },
+    addEventListener: function () {},
+    removeEventListener: function () {},
+    getComputedStyle: function () {
+      return {};
+    },
+    matchMedia: function () {
+      return {
+        matches: false,
+        media: '',
+        addListener: function () {},
+        removeListener: function () {},
+        addEventListener: function () {},
+        removeEventListener: function () {},
+        dispatchEvent: function () {
+          return true;
+        }
+      };
+    },
+    requestAnimationFrame: function (cb) {
+      return setTimeout(cb, 16);
+    },
+    cancelAnimationFrame: function (id) {
+      return clearTimeout(id);
+    },
+    setTimeout: setTimeout,
+    clearTimeout: clearTimeout,
+    setInterval: setInterval,
+    clearInterval: clearInterval
+  };
+  globalThis.window = mockWindow;
+  globalThis.document = mockDocument;
+}
+
 var MDXStreamingParser = /** @class */function () {
   function MDXStreamingParser(components) {
     // 将组件名称存储在Set中，而不是整个组件对象
@@ -209,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;
@@ -372,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);
@@ -424,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;
               }
             }
@@ -472,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 {
@@ -515,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);
@@ -594,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) {
@@ -39451,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;
@@ -39526,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"
@@ -39536,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",
@@ -39556,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$/, "")
@@ -39682,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) {
@@ -39747,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);
@@ -43136,8 +43316,6 @@ function decodeNamedCharacterReference(value) {
   // reference to decode was not a semicolon (`&semi;`), we can assume that the
   // matching was not complete.
   if (
-    // @ts-expect-error: TypeScript is wrong that `textContent` on elements can
-    // yield `null`.
     character.charCodeAt(character.length - 1) === 59 /* `;` */ &&
     value !== 'semi'
   ) {
@@ -43146,8 +43324,6 @@ function decodeNamedCharacterReference(value) {
 
   // If the decoded string is equal to the input, the character reference was
   // not valid.
-  // @ts-expect-error: TypeScript is wrong that `textContent` on elements can
-  // yield `null`.
   return character === characterReference ? false : character
 }
 
@@ -54876,9 +55052,8 @@ function toResult(value) {
 }
 
 /**
- * @typedef {import('unist').Node} UnistNode
- * @typedef {import('unist').Parent} UnistParent
- * @typedef {import('unist-util-visit-parents').VisitorResult} VisitorResult
+ * @import {Node as UnistNode, Parent as UnistParent} from 'unist'
+ * @import {VisitorResult} from 'unist-util-visit-parents'
  */
 
 
@@ -58478,11 +58653,18 @@ function parseComponentRecursively(allComponentHandlers, item, scope) {
           }))];
         case 1:
           parsedChildren_1 = _a.sent();
-          item.children.map(function (item, index) {
-            if (item.type === 'text') {
-              childrenContent_1 += escapeContentForStream(parsedChildren_1[index].value); // encodeURIComponent(parsedChildren[index]);
+          item.children.forEach(function (childItem, index) {
+            var parsedChild = parsedChildren_1[index];
+            if (!parsedChild) {
+              return;
+            }
+            if (!parsedChild.value) {
+              return;
+            }
+            if (childItem.type === 'text') {
+              childrenContent_1 += escapeContentForStream(parsedChild.value);
             } else {
-              childrenContent_1 += parsedChildren_1[index].value;
+              childrenContent_1 += parsedChild.value;
             }
           });
           _a.label = 2;
@@ -59281,46 +59463,110 @@ 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) {
-  return Object.entries(components).filter(function (_a) {
-    var _b = __read(_a, 1),
-      name = _b[0];
-    return !componentHandlers.some(function (handler) {
-      return handler.name === name;
-    });
-  }).map(function (_a) {
-    var _b = __read(_a, 2),
-      name = _b[0],
-      componentValue = _b[1];
+  var e_1, _a;
+  var handlers = [];
+  var _loop_1 = function (name_1, componentValue) {
+    if (!componentValue) return "continue";
+    if (componentHandlers.some(function (handler) {
+      return handler.name === name_1;
+    })) return "continue";
     if (isEnhancedComponentConfig(componentValue)) {
       var config = componentValue;
-      return {
+      if (!config.value) {
+        return "continue";
+      }
+      handlers.push({
         component: config.value,
-        name: name,
+        name: name_1,
         selfClosing: config.selfClosing !== undefined ? config.selfClosing : isSelfClosingComponent(config.value),
         onRenderStart: config.onRenderStart,
         onRenderProcess: config.onRenderProcess,
         onRenderFinished: config.onRenderFinished,
         loader: config.loader,
         label: config.label
-      };
+      });
     } else {
-      // 普通模式：直接使用组件
-      return {
+      handlers.push({
         component: componentValue,
-        name: name,
+        name: name_1,
         selfClosing: isSelfClosingComponent(componentValue)
-      };
+      });
     }
+  };
+  try {
+    for (var _b = __values(Object.entries(components)), _c = _b.next(); !_c.done; _c = _b.next()) {
+      var _d = __read(_c.value, 2),
+        name_1 = _d[0],
+        componentValue = _d[1];
+      _loop_1(name_1, componentValue);
+    }
+  } catch (e_1_1) {
+    e_1 = {
+      error: e_1_1
+    };
+  } finally {
+    try {
+      if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+    } finally {
+      if (e_1) throw e_1.error;
+    }
+  }
+  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) {
@@ -59335,38 +59581,52 @@ function ReactAIRenderer(_a) {
     componentHandlers = _d === void 0 ? [] : _d,
     useGithubStyles = _a.useGithubStyles,
     mdxLayoutClassName = _a.mdxLayoutClassName,
-    mdxLayoutStyle = _a.mdxLayoutStyle;
-  // 检查是否在浏览器环境中
+    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';
-  // 在服务端直接返回空内容，避免使用 hooks
-  if (!isBrowser) {
-    return /*#__PURE__*/jsx(React__default.Fragment, {
-      children: null
-    });
-  }
   content = content || children || '';
-  // 构建 allComponents：从增强配置中提取实际的组件
-  var normalizedComponents = components ? Object.fromEntries(Object.entries(components).map(function (_a) {
+  var normalizedComponents = components ? Object.fromEntries(Object.entries(components).filter(function (_a) {
+    var _b = __read(_a, 2);
+      _b[0];
+      var value = _b[1];
+    return value != null;
+  }).map(function (_a) {
     var _b = __read(_a, 2),
       name = _b[0],
       value = _b[1];
     return [name, extractComponent(value)];
   })) : {};
-  var allComponents = __assign(__assign({}, BuiltInComponents), normalizedComponents);
-  // 构建 allComponentHandlers：支持增强模式
+  // 根据 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 _e = __read(useState(null), 2),
-    component = _e[0],
-    setComponent = _e[1];
-  // 用于跟踪 FallbackView 的错误状态
-  var fallbackErrorRef = useRef({
-    hasError: false
-  });
-  // 用于缓存已完成的组件，避免重复渲染
-  var completedComponentsCacheRef = useRef(new Map());
-  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,
@@ -59374,17 +59634,33 @@ 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_1, i, MDXComponent, parsedDataLength, lastItem;
-        var e_1, _b;
+        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:
@@ -59393,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);
@@ -59409,25 +59684,24 @@ function ReactAIRenderer(_a) {
                   if (indexMatch) {
                     index = parseInt(indexMatch[1], 10);
                     if (index >= currentComponentCount) {
-                      // 如果索引超出当前组件数量，删除缓存
                       completedComponentsCacheRef.current.delete(key);
                     }
                   }
                 }
-              } catch (e_1_1) {
-                e_1 = {
-                  error: e_1_1
+              } catch (e_2_1) {
+                e_2 = {
+                  error: e_2_1
                 };
               } finally {
                 try {
                   if (cacheKeys_1_1 && !cacheKeys_1_1.done && (_b = cacheKeys_1.return)) _b.call(cacheKeys_1);
                 } finally {
-                  if (e_1) throw e_1.error;
+                  if (e_2) throw e_2.error;
                 }
               }
               finalComponent = [];
               fallbackComponent = [];
-              _loop_1 = 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) {
@@ -59441,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;
@@ -59461,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
@@ -59479,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) {
@@ -59516,7 +59787,7 @@ function ReactAIRenderer(_a) {
               _c.label = 4;
             case 4:
               if (!(i < parsedComponents.length)) return [3 /*break*/, 7];
-              return [5 /*yield**/, _loop_1(i)];
+              return [5 /*yield**/, _loop_3(i)];
             case 5:
               _c.sent();
               _c.label = 6;
@@ -59539,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') {
@@ -59559,7 +59830,13 @@ function ReactAIRenderer(_a) {
       });
     };
     parseMDX();
-  }, [content]);
+    return function () {
+      cancelled = true;
+    };
+  }, [content, theme, codeTheme]);
+  if (!isBrowser) {
+    return null;
+  }
   return /*#__PURE__*/jsx(ErrorBoundary, {
     content: content,
     children: /*#__PURE__*/jsx(React__default.Fragment, {