react-ai-renderer 0.1.15 → 0.1.17

package/dist/index.js

@@ -8,7 +8,6 @@ import RemarkGfm from 'remark-gfm';
 import { run, compile } from '@mdx-js/mdx';
 import RehypeKatex from 'rehype-katex';
 import RehypeHighlight from 'rehype-highlight';
-import RehypeRaw from 'rehype-raw';
 
 // SSR 兼容性 polyfill
 // 这个文件确保在服务端渲染时不会因为访问 document 而报错
@@ -754,7 +753,6 @@ var MDXStreamingParser = /** @class */function () {
             // 这比手动转换 JavaScript 对象字面量为 JSON 更可靠
             props[propName] = new Function('return ' + rawValue)();
           } catch (e) {
-            console.warn("Failed to parse prop value for ".concat(propName, ":"), value, e);
             // 如果 Function 构造器失败，尝试手动转换并解析为 JSON
             try {
               // 将 JavaScript 对象字面量转换为有效的 JSON
@@ -58338,13 +58336,13 @@ function renderText(textContent, scope, registeredComponents) {
         children: textContent,
         components: registeredComponents,
         remarkPlugins: [RemarkMath, RemarkGfm, RemarkBreaks],
-        rehypePlugins: [RehypeRaw, RehypeKatex, [RehypeHighlight, {
+        rehypePlugins: [RehypeKatex, [RehypeHighlight, {
           detect: false,
           ignoreMissing: true,
           plainText: ['mermaid'] // 将mermaid作为纯文本处理，避免被错误高亮
         }]],
         remarkRehypeOptions: {
-          allowDangerousHtml: true // 允许处理 HTML 标签
+          allowDangerousHtml: false // 允许处理 HTML 标签
         }
       })];
     });
@@ -58445,7 +58443,7 @@ function renderMdx(mdxContent, scope, registeredComponents) {
 // 递归解析组件的函数 - 返回结构化对象
 function parseComponentRecursively(allComponentHandlers, item, scope) {
   return __awaiter(this, void 0, void 0, function () {
-    var componentHandler, props, propsString, childrenContent_1, parsedChildren_1, componentString, isComplete;
+    var isComplete, componentHandler, props, propsString, childrenContent_1, parsedChildren_1, componentString;
     return __generator(this, function (_a) {
       switch (_a.label) {
         case 0:
@@ -58456,6 +58454,7 @@ function parseComponentRecursively(allComponentHandlers, item, scope) {
             }];
           }
           if (!(item.type === 'component')) return [3 /*break*/, 3];
+          isComplete = item.isComplete === true;
           componentHandler = allComponentHandlers.find(function (c) {
             return c.name === item.value;
           });
@@ -58479,7 +58478,7 @@ function parseComponentRecursively(allComponentHandlers, item, scope) {
           _a.label = 2;
         case 2:
           componentString = (componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.selfClosing) ? "<".concat(item.value, " ").concat(propsString, " />") : ["<".concat(item.value, " ").concat(propsString, ">"), childrenContent_1, "</".concat(item.value, ">")].join('\n');
-          isComplete = item.isComplete === true;
+          // 调用组件的渲染钩子
           if (isComplete) {
             // 渲染完成后的钩子
             if (componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.onRenderFinished) {
@@ -58603,18 +58602,533 @@ function MdxLayout(_a) {
   });
 }
 
+function generateSkeletonByComponentName(componentName, props, style) {
+  var _a, _b;
+  var baseStyle = __assign({
+    borderRadius: '8px',
+    backgroundColor: '#f3f4f6'
+  }, style);
+  // 根据组件名称模式匹配生成不同的骨架图
+  var name = componentName.toLowerCase();
+  // 图表类组件
+  if (name.includes('chart') || name.includes('graph') || name.includes('plot')) {
+    return /*#__PURE__*/jsxs("div", {
+      style: __assign(__assign({}, baseStyle), {
+        padding: '24px',
+        minHeight: (props === null || props === void 0 ? void 0 : props.height) ? "".concat(props.height, "px") : '300px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px'
+      }),
+      children: [/*#__PURE__*/jsxs("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '8px'
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          style: {
+            width: '120px',
+            height: '20px',
+            backgroundColor: '#e5e7eb',
+            borderRadius: '4px'
+          }
+        }), /*#__PURE__*/jsx("div", {
+          style: {
+            width: '80px',
+            height: '16px',
+            backgroundColor: '#e5e7eb',
+            borderRadius: '4px'
+          }
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          flex: 1,
+          display: 'flex',
+          alignItems: 'flex-end',
+          gap: '8px',
+          height: '200px'
+        },
+        children: Array.from({
+          length: 8
+        }).map(function (_, i) {
+          return /*#__PURE__*/jsx("div", {
+            style: {
+              flex: 1,
+              height: "".concat(Math.random() * 60 + 40, "%"),
+              backgroundColor: '#d1d5db',
+              borderRadius: '4px 4px 0 0',
+              animation: 'pulse 1.5s ease-in-out infinite',
+              animationDelay: "".concat(i * 0.1, "s")
+            }
+          }, i);
+        })
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          display: 'flex',
+          gap: '12px',
+          marginTop: '8px'
+        },
+        children: Array.from({
+          length: 3
+        }).map(function (_, i) {
+          return /*#__PURE__*/jsxs("div", {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              gap: '6px'
+            },
+            children: [/*#__PURE__*/jsx("div", {
+              style: {
+                width: '12px',
+                height: '12px',
+                backgroundColor: '#d1d5db',
+                borderRadius: '2px'
+              }
+            }), /*#__PURE__*/jsx("div", {
+              style: {
+                width: '60px',
+                height: '12px',
+                backgroundColor: '#e5e7eb',
+                borderRadius: '2px'
+              }
+            })]
+          }, i);
+        })
+      }), /*#__PURE__*/jsx("style", {
+        children: "\n                    @keyframes pulse {\n                        0%, 100% { opacity: 1; }\n                        50% { opacity: 0.5; }\n                    }\n                "
+      })]
+    });
+  }
+  // 表格类组件
+  if (name.includes('table') || name.includes('grid')) {
+    var rowCount_1 = (props === null || props === void 0 ? void 0 : props.rows) || 5;
+    var colCount_1 = (props === null || props === void 0 ? void 0 : props.columns) || 4;
+    return /*#__PURE__*/jsxs("div", {
+      style: __assign(__assign({}, baseStyle), {
+        padding: '16px',
+        overflow: 'hidden'
+      }),
+      children: [/*#__PURE__*/jsxs("div", {
+        style: {
+          marginBottom: '12px'
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          style: {
+            width: '150px',
+            height: '20px',
+            backgroundColor: '#e5e7eb',
+            borderRadius: '4px',
+            marginBottom: '8px'
+          }
+        }), /*#__PURE__*/jsx("div", {
+          style: {
+            width: '200px',
+            height: '16px',
+            backgroundColor: '#e5e7eb',
+            borderRadius: '4px'
+          }
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        style: {
+          border: '1px solid #e5e7eb',
+          borderRadius: '4px',
+          overflow: 'hidden'
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          style: {
+            display: 'grid',
+            gridTemplateColumns: "repeat(".concat(colCount_1, ", 1fr)"),
+            backgroundColor: '#f9fafb',
+            borderBottom: '1px solid #e5e7eb'
+          },
+          children: Array.from({
+            length: colCount_1
+          }).map(function (_, i) {
+            return /*#__PURE__*/jsx("div", {
+              style: {
+                padding: '12px',
+                borderRight: i < colCount_1 - 1 ? '1px solid #e5e7eb' : 'none'
+              },
+              children: /*#__PURE__*/jsx("div", {
+                style: {
+                  width: '80%',
+                  height: '16px',
+                  backgroundColor: '#d1d5db',
+                  borderRadius: '2px'
+                }
+              })
+            }, i);
+          })
+        }), Array.from({
+          length: rowCount_1
+        }).map(function (_, rowIndex) {
+          return /*#__PURE__*/jsx("div", {
+            style: {
+              display: 'grid',
+              gridTemplateColumns: "repeat(".concat(colCount_1, ", 1fr)"),
+              borderBottom: rowIndex < rowCount_1 - 1 ? '1px solid #e5e7eb' : 'none'
+            },
+            children: Array.from({
+              length: colCount_1
+            }).map(function (_, colIndex) {
+              return /*#__PURE__*/jsx("div", {
+                style: {
+                  padding: '12px',
+                  borderRight: colIndex < colCount_1 - 1 ? '1px solid #e5e7eb' : 'none'
+                },
+                children: /*#__PURE__*/jsx("div", {
+                  style: {
+                    width: "".concat(Math.random() * 40 + 60, "%"),
+                    height: '14px',
+                    backgroundColor: '#e5e7eb',
+                    borderRadius: '2px'
+                  }
+                })
+              }, colIndex);
+            })
+          }, rowIndex);
+        })]
+      })]
+    });
+  }
+  // 卡片类组件
+  if (name.includes('card')) {
+    return /*#__PURE__*/jsxs("div", {
+      style: __assign(__assign({}, baseStyle), {
+        padding: '20px',
+        minHeight: '200px'
+      }),
+      children: [/*#__PURE__*/jsx("div", {
+        style: {
+          width: '60%',
+          height: '24px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px',
+          marginBottom: '16px'
+        }
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          width: '100%',
+          height: '16px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px',
+          marginBottom: '8px'
+        }
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          width: '90%',
+          height: '16px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px',
+          marginBottom: '8px'
+        }
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          width: '70%',
+          height: '16px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px',
+          marginBottom: '16px'
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        style: {
+          display: 'flex',
+          gap: '8px',
+          marginTop: '16px'
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          style: {
+            width: '80px',
+            height: '32px',
+            backgroundColor: '#d1d5db',
+            borderRadius: '4px'
+          }
+        }), /*#__PURE__*/jsx("div", {
+          style: {
+            width: '80px',
+            height: '32px',
+            backgroundColor: '#d1d5db',
+            borderRadius: '4px'
+          }
+        })]
+      })]
+    });
+  }
+  // 列表类组件
+  if (name.includes('list') || name.includes('todo')) {
+    var itemCount_1 = ((_a = props === null || props === void 0 ? void 0 : props.items) === null || _a === void 0 ? void 0 : _a.length) || (props === null || props === void 0 ? void 0 : props.count) || 3;
+    return /*#__PURE__*/jsx("div", {
+      style: __assign(__assign({}, baseStyle), {
+        padding: '16px'
+      }),
+      children: Array.from({
+        length: itemCount_1
+      }).map(function (_, i) {
+        return /*#__PURE__*/jsxs("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px',
+            marginBottom: i < itemCount_1 - 1 ? '12px' : '0',
+            paddingBottom: i < itemCount_1 - 1 ? '12px' : '0',
+            borderBottom: i < itemCount_1 - 1 ? '1px solid #e5e7eb' : 'none'
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            style: {
+              width: '20px',
+              height: '20px',
+              backgroundColor: '#d1d5db',
+              borderRadius: '4px',
+              flexShrink: 0
+            }
+          }), /*#__PURE__*/jsxs("div", {
+            style: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/jsx("div", {
+              style: {
+                width: "".concat(Math.random() * 30 + 60, "%"),
+                height: '16px',
+                backgroundColor: '#e5e7eb',
+                borderRadius: '4px',
+                marginBottom: '6px'
+              }
+            }), /*#__PURE__*/jsx("div", {
+              style: {
+                width: "".concat(Math.random() * 40 + 40, "%"),
+                height: '14px',
+                backgroundColor: '#e5e7eb',
+                borderRadius: '4px'
+              }
+            })]
+          })]
+        }, i);
+      })
+    });
+  }
+  // 表单类组件
+  if (name.includes('form') || name.includes('input') || name.includes('select')) {
+    var fieldCount_1 = ((_b = props === null || props === void 0 ? void 0 : props.fields) === null || _b === void 0 ? void 0 : _b.length) || 3;
+    return /*#__PURE__*/jsxs("div", {
+      style: __assign(__assign({}, baseStyle), {
+        padding: '20px'
+      }),
+      children: [Array.from({
+        length: fieldCount_1
+      }).map(function (_, i) {
+        return /*#__PURE__*/jsxs("div", {
+          style: {
+            marginBottom: i < fieldCount_1 - 1 ? '20px' : '0'
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            style: {
+              width: '100px',
+              height: '14px',
+              backgroundColor: '#e5e7eb',
+              borderRadius: '2px',
+              marginBottom: '8px'
+            }
+          }), /*#__PURE__*/jsx("div", {
+            style: {
+              width: '100%',
+              height: '40px',
+              backgroundColor: '#f3f4f6',
+              border: '1px solid #e5e7eb',
+              borderRadius: '4px'
+            }
+          })]
+        }, i);
+      }), /*#__PURE__*/jsxs("div", {
+        style: {
+          display: 'flex',
+          gap: '12px',
+          marginTop: '20px'
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          style: {
+            width: '100px',
+            height: '36px',
+            backgroundColor: '#d1d5db',
+            borderRadius: '4px'
+          }
+        }), /*#__PURE__*/jsx("div", {
+          style: {
+            width: '100px',
+            height: '36px',
+            backgroundColor: '#e5e7eb',
+            borderRadius: '4px'
+          }
+        })]
+      })]
+    });
+  }
+  // 图片/媒体类组件
+  if (name.includes('image') || name.includes('img') || name.includes('video') || name.includes('media')) {
+    return /*#__PURE__*/jsx("div", {
+      style: __assign(__assign({}, baseStyle), {
+        padding: '16px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: (props === null || props === void 0 ? void 0 : props.height) ? "".concat(props.height, "px") : '200px'
+      }),
+      children: /*#__PURE__*/jsx("div", {
+        style: {
+          width: '100%',
+          height: '100%',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '8px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        children: /*#__PURE__*/jsx("div", {
+          style: {
+            width: '48px',
+            height: '48px',
+            backgroundColor: '#d1d5db',
+            borderRadius: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: /*#__PURE__*/jsx("div", {
+            style: {
+              width: '24px',
+              height: '24px',
+              backgroundColor: '#9ca3af',
+              borderRadius: '4px'
+            }
+          })
+        })
+      })
+    });
+  }
+  // 默认骨架图
+  return /*#__PURE__*/jsxs("div", {
+    style: __assign(__assign({}, baseStyle), {
+      padding: '24px',
+      minHeight: '120px',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '12px',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }),
+    children: [/*#__PURE__*/jsxs("div", {
+      style: {
+        width: '100%',
+        maxWidth: '400px'
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        style: {
+          width: '60%',
+          height: '20px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px',
+          marginBottom: '12px'
+        }
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          width: '100%',
+          height: '16px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px',
+          marginBottom: '8px'
+        }
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          width: '90%',
+          height: '16px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px',
+          marginBottom: '8px'
+        }
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          width: '75%',
+          height: '16px',
+          backgroundColor: '#e5e7eb',
+          borderRadius: '4px'
+        }
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      style: {
+        display: 'flex',
+        gap: '8px',
+        marginTop: '12px'
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        style: {
+          width: '60px',
+          height: '32px',
+          backgroundColor: '#d1d5db',
+          borderRadius: '4px'
+        }
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          width: '60px',
+          height: '32px',
+          backgroundColor: '#d1d5db',
+          borderRadius: '4px'
+        }
+      })]
+    })]
+  });
+}
+/**
+ * 创建骨架图组件
+ */
+function createSkeletonComponent(componentName, componentData, skeletonConfig, style) {
+  // 如果提供了自定义骨架图组件
+  if (skeletonConfig === null || skeletonConfig === void 0 ? void 0 : skeletonConfig.component) {
+    var SkeletonComponent = skeletonConfig.component;
+    return /*#__PURE__*/jsx(SkeletonComponent, {
+      componentName: componentName,
+      componentData: componentData,
+      props: componentData === null || componentData === void 0 ? void 0 : componentData.props,
+      style: style
+    });
+  }
+  // 如果提供了自定义骨架图元素
+  if (skeletonConfig === null || skeletonConfig === void 0 ? void 0 : skeletonConfig.element) {
+    return skeletonConfig.element;
+  }
+  // 如果提供了自定义生成函数
+  if (skeletonConfig === null || skeletonConfig === void 0 ? void 0 : skeletonConfig.generator) {
+    return skeletonConfig.generator({
+      componentName: componentName,
+      componentData: componentData,
+      props: componentData === null || componentData === void 0 ? void 0 : componentData.props,
+      style: style
+    });
+  }
+  // 如果启用了自动生成，或者没有提供任何配置
+  if ((skeletonConfig === null || skeletonConfig === void 0 ? void 0 : skeletonConfig.autoGenerate) !== false) {
+    return generateSkeletonByComponentName(componentName, componentData === null || componentData === void 0 ? void 0 : componentData.props, style);
+  }
+  // 默认返回空
+  return /*#__PURE__*/jsx(React__default.Fragment, {});
+}
+
 var ComponentPlaceholder = function (_a) {
   var componentName = _a.componentName,
     style = _a.style,
-    customPlaceholder = _a.customPlaceholder;
-  // 如果有自定义占位内容，优先使用
-  if (customPlaceholder) {
+    loader = _a.loader,
+    skeleton = _a.skeleton,
+    componentData = _a.componentData;
+  // 如果有自定义加载内容，优先使用
+  if (loader) {
+    // 如果是布尔值 true，使用默认样式
+    if (typeof loader === 'boolean') ;
     // 如果是 React 元素，直接返回
-    if (/*#__PURE__*/React__default.isValidElement(customPlaceholder)) {
-      return customPlaceholder;
+    else if (/*#__PURE__*/React__default.isValidElement(loader)) {
+      return loader;
     }
     // 如果是字符串，显示字符串
-    if (typeof customPlaceholder === 'string') {
+    else if (typeof loader === 'string') {
       return /*#__PURE__*/jsx("div", {
         style: __assign({
           border: '1px dashed #d1d5db',
@@ -58628,34 +59142,47 @@ var ComponentPlaceholder = function (_a) {
           justifyContent: 'center',
           minHeight: '60px'
         }, style),
-        children: customPlaceholder
+        children: loader
       });
     }
     // 如果是函数，调用它
-    if (typeof customPlaceholder === 'function') {
+    else if (typeof loader === 'function') {
       try {
         // 检查是否是 React 组件构造函数
-        var proto = customPlaceholder.prototype;
+        var proto = loader.prototype;
         if (proto && (proto instanceof React__default.Component || proto.isReactComponent)) {
           // 是 React 组件类，创建元素
-          var Component = customPlaceholder;
+          var Component = loader;
           return /*#__PURE__*/jsx(Component, {
             componentName: componentName
           });
         } else {
           // 是普通函数，调用它（类型断言为函数）
-          var func = customPlaceholder;
+          var func = loader;
           return func(componentName);
         }
       } catch (e) {
         // 如果出错，尝试作为组件使用
-        var Component = customPlaceholder;
+        var Component = loader;
         return /*#__PURE__*/jsx(Component, {
           componentName: componentName
         });
       }
     }
   }
+  // 如果没有 loader，尝试使用骨架图
+  if (skeleton || !loader) {
+    try {
+      var skeletonElement = createSkeletonComponent(componentName, componentData, skeleton, style);
+      // 如果骨架图生成成功且不是空元素，使用骨架图
+      if (skeletonElement && /*#__PURE__*/React__default.isValidElement(skeletonElement)) {
+        return skeletonElement;
+      }
+    } catch (e) {
+      // 如果骨架图生成失败，继续使用默认占位内容
+      console.warn('Failed to generate skeleton:', e);
+    }
+  }
   // 默认占位内容
   return /*#__PURE__*/jsxs("div", {
     style: __assign({
@@ -58745,6 +59272,51 @@ var FallbackView = /** @class */function (_super) {
   return FallbackView;
 }(React__default.Component);
 
+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];
+    if (isEnhancedComponentConfig(componentValue)) {
+      // 增强模式：从配置对象中提取信息
+      var config = componentValue;
+      return {
+        component: config.value,
+        name: name,
+        selfClosing: config.selfClosing !== undefined ? config.selfClosing : isSelfClosingComponent(config.value),
+        onRenderFinished: config.onRenderFinished,
+        onRenderProcess: config.onRenderProcess,
+        loader: config.loader,
+        label: config.label
+      };
+    } else {
+      // 普通模式：直接使用组件
+      return {
+        component: componentValue,
+        name: name,
+        selfClosing: isSelfClosingComponent(componentValue)
+      };
+    }
+  });
+}
 function ReactAIRenderer(_a) {
   var _this = this;
   var content = _a.content,
@@ -58767,24 +59339,16 @@ function ReactAIRenderer(_a) {
     });
   }
   content = content || children || '';
-  var allComponents = __assign(__assign({}, BuiltInComponents), components);
-  var allComponentHandlers = __spreadArray(__spreadArray([], __read(components ? 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) {
+  // 构建 allComponents：从增强配置中提取实际的组件
+  var normalizedComponents = components ? Object.fromEntries(Object.entries(components).map(function (_a) {
     var _b = __read(_a, 2),
       name = _b[0],
-      component = _b[1];
-    var selfClosing = isSelfClosingComponent(component);
-    return {
-      component: component,
-      name: name,
-      selfClosing: selfClosing
-    };
-  }) : []), false), __read(componentHandlers), false);
+      value = _b[1];
+    return [name, extractComponent(value)];
+  })) : {};
+  var allComponents = __assign(__assign({}, BuiltInComponents), normalizedComponents);
+  // 构建 allComponentHandlers：支持增强模式
+  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];
@@ -58792,6 +59356,8 @@ function ReactAIRenderer(_a) {
   var fallbackErrorRef = useRef({
     hasError: false
   });
+  // 用于缓存已完成的组件，避免重复渲染
+  var completedComponentsCacheRef = useRef(new Map());
   var parser = new MDXStreamingParser(allComponentHandlers);
   var mdxContent = content || '';
   // FallbackView 错误状态变化时的回调
@@ -58804,9 +59370,10 @@ function ReactAIRenderer(_a) {
   useEffect(function () {
     var parseMDX = function () {
       return __awaiter(_this, void 0, void 0, function () {
-        var ThinkComponent, ResultComponent, protectedContent, _a, thinkContent, resultContent, parsedData, parsedComponents, finalComponent, fallbackComponent, _loop_1, i, MDXComponent, parsedDataLength, lastItem;
-        return __generator(this, function (_b) {
-          switch (_b.label) {
+        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;
+        return __generator(this, function (_c) {
+          switch (_c.label) {
             case 0:
               ThinkComponent = null;
               ResultComponent = null;
@@ -58815,8 +59382,8 @@ function ReactAIRenderer(_a) {
               if (!thinkContent) return [3 /*break*/, 2];
               return [4 /*yield*/, renderMdx(thinkContent, scope, allComponents)];
             case 1:
-              ThinkComponent = _b.sent();
-              _b.label = 2;
+              ThinkComponent = _c.sent();
+              _c.label = 2;
             case 2:
               parsedData = [];
               if (!resultContent) return [3 /*break*/, 8];
@@ -58826,46 +59393,110 @@ function ReactAIRenderer(_a) {
                 return parseComponentRecursively(allComponentHandlers, item, scope);
               }))];
             case 3:
-              parsedComponents = _b.sent();
+              parsedComponents = _c.sent();
+              currentComponentCount = parsedData.length;
+              cacheKeys = Array.from(completedComponentsCacheRef.current.keys());
+              try {
+                for (cacheKeys_1 = __values(cacheKeys), cacheKeys_1_1 = cacheKeys_1.next(); !cacheKeys_1_1.done; cacheKeys_1_1 = cacheKeys_1.next()) {
+                  key = cacheKeys_1_1.value;
+                  indexMatch = key.match(/-(\d+)$/);
+                  if (indexMatch) {
+                    index = parseInt(indexMatch[1], 10);
+                    if (index >= currentComponentCount) {
+                      // 如果索引超出当前组件数量，删除缓存
+                      completedComponentsCacheRef.current.delete(key);
+                    }
+                  }
+                }
+              } catch (e_1_1) {
+                e_1 = {
+                  error: e_1_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;
+                }
+              }
               finalComponent = [];
               fallbackComponent = [];
               _loop_1 = function (i) {
-                var item, _result, placeholderForFallback, componentNameMatch, componentName_1, componentHandler, displayName;
-                return __generator(this, function (_c) {
-                  switch (_c.label) {
+                var item, currentParsedItem, _result, placeholderForFallback, componentNameMatch, componentName_1, componentHandler, displayName, cacheKey;
+                return __generator(this, function (_d) {
+                  switch (_d.label) {
                     case 0:
                       item = parsedComponents[i];
+                      currentParsedItem = parsedData[i];
                       _result = void 0;
                       placeholderForFallback = null;
                       if (!(item.type === 'text')) return [3 /*break*/, 2];
                       return [4 /*yield*/, renderText(item.value, scope, allComponents)];
                     case 1:
-                      _result = _c.sent();
-                      return [3 /*break*/, 4];
+                      _result = _d.sent();
+                      finalComponent.push(_result);
+                      return [3 /*break*/, 11];
                     case 2:
-                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
-                    case 3:
-                      _result = _c.sent();
                       componentNameMatch = item.value.match(/<([A-Z][A-Za-z0-9]*)/);
-                      if (componentNameMatch) {
-                        componentName_1 = componentNameMatch[1];
-                        componentHandler = allComponentHandlers.find(function (c) {
-                          return c.name === componentName_1;
-                        });
-                        displayName = componentName_1;
-                        if (componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.label) {
-                          displayName = componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.label;
-                        }
-                        placeholderForFallback = /*#__PURE__*/React__default.createElement(ComponentPlaceholder, {
-                          componentName: displayName,
-                          customPlaceholder: componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.placeholder,
-                          key: "fallback-placeholder-".concat(i)
-                        });
+                      if (!componentNameMatch) return [3 /*break*/, 9];
+                      componentName_1 = componentNameMatch[1];
+                      componentHandler = allComponentHandlers.find(function (c) {
+                        return c.name === componentName_1;
+                      });
+                      displayName = componentName_1;
+                      if (componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.label) {
+                        displayName = componentHandler === null || componentHandler === void 0 ? void 0 : componentHandler.label;
                       }
-                      _c.label = 4;
+                      placeholderForFallback = /*#__PURE__*/React__default.createElement(ComponentPlaceholder, {
+                        componentName: displayName,
+                        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];
+                      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
+                        });
+                      } else {
+                        _result = /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+                          key: cacheKey
+                        }, _result);
+                      }
+                      // 存入缓存
+                      completedComponentsCacheRef.current.set(cacheKey, _result);
+                      _d.label = 5;
+                    case 5:
+                      finalComponent.push(_result);
+                      return [3 /*break*/, 8];
+                    case 6:
+                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
+                    case 7:
+                      // 组件未完成，正常渲染
+                      _result = _d.sent();
+                      finalComponent.push(placeholderForFallback);
+                      _d.label = 8;
+                    case 8:
+                      return [3 /*break*/, 11];
+                    case 9:
+                      return [4 /*yield*/, renderMdx(item.value, scope, allComponents)];
+                    case 10:
+                      // 没有匹配到组件名，正常渲染
+                      _result = _d.sent();
                       finalComponent.push(_result);
-                      // fallbackComponent 应该是 finalComponent 的前 i 个元素 + 当前 item 的 placeholder
+                      _d.label = 11;
+                    case 11:
+                      // fallbackComponent 应该是 finalComponent 的前 i 个元素 + 当前 item 的 loader
                       fallbackComponent.length = 0;
                       fallbackComponent.push.apply(fallbackComponent, __spreadArray([], __read(finalComponent.slice(0, i)), false));
                       if (placeholderForFallback) {
@@ -58876,13 +59507,13 @@ function ReactAIRenderer(_a) {
                 });
               };
               i = 0;
-              _b.label = 4;
+              _c.label = 4;
             case 4:
               if (!(i < parsedComponents.length)) return [3 /*break*/, 7];
               return [5 /*yield**/, _loop_1(i)];
             case 5:
-              _b.sent();
-              _b.label = 6;
+              _c.sent();
+              _c.label = 6;
             case 6:
               i++;
               return [3 /*break*/, 4];
@@ -58897,7 +59528,7 @@ function ReactAIRenderer(_a) {
                   children: finalComponent
                 })
               });
-              _b.label = 8;
+              _c.label = 8;
             case 8:
               MDXComponent = /*#__PURE__*/jsxs(React__default.Fragment, {
                 children: [ThinkComponent, ResultComponent]