react-ai-renderer 0.1.15 → 0.1.16

package/dist/index.d.ts

@@ -20,11 +20,28 @@ interface ComponentHandler extends BaseComponentHandler {
     onRenderFinished?: (item: ComponentData$1, scope: any) => void;
     /** @deprecated 使用 onRenderProcess 替代 */
     onRender?: (item: ComponentData$1, scope: any) => void;
-    /** 自定义占位组件，可以是 React 组件、React 元素、字符串或返回 React 元素的函数 */
-    placeholder?: React.ComponentType<any> | React.ReactElement | string | ((componentName: string) => React.ReactElement);
+    /** 自定义加载组件，可以是 React 组件、React 元素、字符串、布尔值或返回 React 元素的函数 */
+    loader?: React.ComponentType<any> | React.ReactElement | string | boolean | ((componentName: string) => React.ReactElement);
     /** 组件的显示标签，用于在占位组件中显示 */
     label?: string;
 }
+/** 增强模式的组件配置 */
+interface EnhancedComponentConfig {
+    /** 组件本身 */
+    value: React.ComponentType<any>;
+    /** 组件的显示标签 */
+    label?: string;
+    /** 自定义加载组件，可以是 React 组件、React 元素、字符串、布尔值或返回 React 元素的函数 */
+    loader?: React.ComponentType<any> | React.ReactElement | string | boolean | ((componentName: string) => React.ReactElement);
+    /** 组件渲染完成后的钩子 */
+    onRenderFinished?: (item: ComponentData$1, scope: any) => void;
+    /** 组件渲染过程中的钩子 */
+    onRenderProcess?: (item: ComponentData$1, scope: any) => void;
+    /** 是否自闭合 */
+    selfClosing?: boolean;
+}
+/** 组件值类型：可以是组件本身，也可以是增强配置对象 */
+type ComponentValue = React.ComponentType<any> | EnhancedComponentConfig;
 interface ParserState {
     position: number;
     stack: ComponentData$1[];
@@ -49,8 +66,8 @@ interface ReactAIRendererProps {
     content?: string;
     /** 作用域对象，用于传递变量和函数给组件 */
     scope?: Record<string, any>;
-    /** 自定义组件映射 */
-    components?: Record<string, React.ComponentType<any>>;
+    /** 自定义组件映射，支持普通模式（组件）和增强模式（配置对象） */
+    components?: Record<string, ComponentValue>;
     /** 子元素，作为 content 的替代方案 */
     children?: string;
     /** 组件处理器数组 */
@@ -121,4 +138,4 @@ declare class MDXStreamingParser {
 
 declare function ReactAIRenderer({ content, scope, components, children, componentHandlers, useGithubStyles, mdxLayoutClassName, mdxLayoutStyle }: ReactAIRendererProps): React.JSX.Element;
 
-export { ComponentData$1 as ComponentData, ComponentHandler, MDXStreamingParser, MdxLayout, MdxLayoutProps, ParseResult, ParserState, ReactAIRendererProps, ReactMarkdownProps, Think, ThinkProps, ToolCall, ToolCallProps, ReactAIRenderer as default };
+export { ComponentData$1 as ComponentData, ComponentHandler, ComponentValue, EnhancedComponentConfig, MDXStreamingParser, MdxLayout, MdxLayoutProps, ParseResult, ParserState, ReactAIRendererProps, ReactMarkdownProps, Think, ThinkProps, ToolCall, ToolCallProps, ReactAIRenderer as default };

package/dist/index.js

@@ -754,7 +754,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
@@ -58445,7 +58444,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 +58455,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 +58479,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) {
@@ -58606,15 +58606,17 @@ function MdxLayout(_a) {
 var ComponentPlaceholder = function (_a) {
   var componentName = _a.componentName,
     style = _a.style,
-    customPlaceholder = _a.customPlaceholder;
-  // 如果有自定义占位内容，优先使用
-  if (customPlaceholder) {
+    loader = _a.loader;
+  // 如果有自定义加载内容，优先使用
+  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,28 +58630,28 @@ 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
         });
@@ -58745,6 +58747,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 +58814,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 +58831,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 +58845,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 +58857,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 +58868,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 +58982,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 +59003,7 @@ function ReactAIRenderer(_a) {
                   children: finalComponent
                 })
               });
-              _b.label = 8;
+              _c.label = 8;
             case 8:
               MDXComponent = /*#__PURE__*/jsxs(React__default.Fragment, {
                 children: [ThinkComponent, ResultComponent]