react-ai-renderer 0.1.16 → 0.1.18

package/dist/index.d.ts

@@ -1,5 +1,28 @@
 import React from 'react';
 
+/**
+ * 骨架图配置接口
+ */
+interface SkeletonConfig {
+    /** 自定义骨架图组件 */
+    component?: React.ComponentType<SkeletonProps>;
+    /** 自定义骨架图元素 */
+    element?: React.ReactElement;
+    /** 自定义骨架图生成函数 */
+    generator?: (props: SkeletonProps) => React.ReactElement;
+    /** 是否启用自动生成 */
+    autoGenerate?: boolean;
+}
+/**
+ * 骨架图组件的属性
+ */
+interface SkeletonProps {
+    componentName: string;
+    componentData?: ComponentData$1;
+    props?: Record<string, any>;
+    style?: React.CSSProperties;
+}
+
 interface ComponentData$1 {
     type: "text" | "component";
     value: string;
@@ -22,6 +45,8 @@ interface ComponentHandler extends BaseComponentHandler {
     onRender?: (item: ComponentData$1, scope: any) => void;
     /** 自定义加载组件，可以是 React 组件、React 元素、字符串、布尔值或返回 React 元素的函数 */
     loader?: React.ComponentType<any> | React.ReactElement | string | boolean | ((componentName: string) => React.ReactElement);
+    /** 骨架图配置，用于在加载时显示骨架图。如果未提供且 loader 也未提供，将自动根据组件名称生成骨架图 */
+    skeleton?: SkeletonConfig;
     /** 组件的显示标签，用于在占位组件中显示 */
     label?: string;
 }
@@ -33,6 +58,8 @@ interface EnhancedComponentConfig {
     label?: string;
     /** 自定义加载组件，可以是 React 组件、React 元素、字符串、布尔值或返回 React 元素的函数 */
     loader?: React.ComponentType<any> | React.ReactElement | string | boolean | ((componentName: string) => React.ReactElement);
+    /** 骨架图配置，用于在加载时显示骨架图。如果未提供且 loader 也未提供，将自动根据组件名称生成骨架图 */
+    skeleton?: SkeletonConfig;
     /** 组件渲染完成后的钩子 */
     onRenderFinished?: (item: ComponentData$1, scope: any) => void;
     /** 组件渲染过程中的钩子 */

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 而报错
@@ -764,7 +763,8 @@ var MDXStreamingParser = /** @class */function () {
                 return "\"".concat(inner, "\"");
               });
               // 2. 为对象键名添加引号（如果还没有引号）
-              jsonValue = jsonValue.replace(/([{,]\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:/g, '$1"$2":');
+              // 修复：使用 \p{L} 匹配 Unicode 字母（包括中文），使用 u 标志
+              jsonValue = jsonValue.replace(/([{,]\s*)([\p{L}_$][\p{L}\p{N}_$]*)\s*:/gu, '$1"$2":');
               // 3. 处理属性值中的模板字符串
               jsonValue = jsonValue.replace(/`([^`]*)`/g, function (match, p1) {
                 return JSON.stringify(p1);
@@ -58337,13 +58337,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 标签
         }
       })];
     });
@@ -58603,10 +58603,523 @@ 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,
-    loader = _a.loader;
+    loader = _a.loader,
+    skeleton = _a.skeleton,
+    componentData = _a.componentData;
   // 如果有自定义加载内容，优先使用
   if (loader) {
     // 如果是布尔值 true，使用默认样式
@@ -58658,6 +59171,19 @@ var ComponentPlaceholder = function (_a) {
       }
     }
   }
+  // 如果没有 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({