react-ai-renderer 0.1.3 → 0.1.5

package/README.md

@@ -16,6 +16,7 @@
 - **代码高亮**：支持多种编程语言的代码高亮显示
 - **数学公式**：使用 KaTeX 渲染数学公式
 - **Mermaid 图表**：支持 Mermaid 流程图、时序图等（可选功能）
+- **GitHub样式**：使用GitHub风格的Markdown渲染样式
 - **自定义组件**：支持用户注册自定义组件和生命周期钩子
 - **兼容性**：兼容现代 React 版本，提供 TypeScript 类型定义
 
@@ -41,6 +42,48 @@ npm install mermaid
 
 如果不安装 mermaid，图表将不会渲染，但不会影响其他功能。
 
+## 🎨 GitHub风格样式
+
+React AI Renderer 现在支持 GitHub 风格的 Markdown 渲染样式，使渲染的 Markdown 内容具有与 GitHub 上相同的外观和感觉。
+
+### 特性
+
+- GitHub风格的排版和间距
+- 代码块的语法高亮
+- 表格样式优化
+- 链接样式
+- 标题样式（包括下划线效果）
+- 引用块样式
+- 列表样式优化
+
+### 使用方法
+
+组件会自动应用GitHub样式，无需额外配置：
+
+```jsx
+import ReactAIRenderer from 'react-ai-renderer';
+
+function MyComponent() {
+  const markdownContent = `
+# 标题
+
+这是一个 **粗体** 文本和 *斜体* 文本。
+
+\`\`\`javascript
+console.log('Hello, World!');
+\`\`\`
+
+| 列1 | 列2 |
+|-----|-----|
+| 数据1 | 数据2 |
+`;
+
+  return <ReactAIRenderer content={markdownContent} />;
+}
+```
+
+查看 [GITHUB_STYLE_USAGE.md](./GITHUB_STYLE_USAGE.md) 获取更多使用详情。
+
 ## 🚀 快速开始
 
 查看 [examples/example.tsx](./examples/example.tsx) 文件了解完整的使用示例。
@@ -70,14 +113,12 @@ function App() {
 import ReactAIRenderer from 'react-ai-renderer';
 
 const content = `
-<Think>
 正在分析用户需求...
 
 根据分析结果，我建议您使用以下方案：
 
 1. 方案A
 2. 方案B
-</Think>
 `;
 
 function App() {
@@ -121,231 +162,52 @@ function App() {
 }
 ```
 
-## 🎨 UI 组件示例
-
-React AI Renderer 支持丰富的 UI 组件渲染，包括表单、表格、卡片等常见组件。
-
-### 表单组件
-
-```mdx
-<form>
-  <Input label="姓名" placeholder="请输入姓名" />
-  <Input label="邮箱" type="email" placeholder="请输入邮箱" />
-  <Select label="性别">
-    <option value="">请选择</option>
-    <option value="male">男</option>
-    <option value="female">女</option>
-  </Select>
-  <Textarea label="个人简介" placeholder="请简单介绍一下自己" />
-  <Checkbox label="同意用户协议" />
-  <Button type="submit">提交</Button>
-  <Button type="button" style="backgroundColor: #6c757d">取消</Button>
-</form>
-```
-
-### 表格组件
-
-```mdx
-<Table>
-  <TableHeader>
-    <TableCell header>产品名称</TableCell>
-    <TableCell header>价格</TableCell>
-    <TableCell header>库存</TableCell>
-    <TableCell header>状态</TableCell>
-  </TableHeader>
-  <TableRow>
-    <TableCell>iPhone 15</TableCell>
-    <TableCell>¥5999</TableCell>
-    <TableCell>50</TableCell>
-    <TableCell>在售</TableCell>
-  </TableRow>
-  <TableRow>
-    <TableCell>MacBook Pro</TableCell>
-    <TableCell>¥12999</TableCell>
-    <TableCell>20</TableCell>
-    <TableCell>在售</TableCell>
-  </TableRow>
-  <TableRow>
-    <TableCell>iPad Air</TableCell>
-    <TableCell>¥4399</TableCell>
-    <TableCell>0</TableCell>
-    <TableCell>缺货</TableCell>
-  </TableRow>
-</Table>
-```
-
-### 卡片组件
-
-```mdx
-<Card>
-  <CardTitle>MacBook Pro</CardTitle>
-  <CardContent>
-    <p>强大的性能，适用于专业工作负载</p>
-    <p><strong>价格:</strong> ¥12999</p>
-    <p><strong>库存:</strong> 20台</p>
-  </CardContent>
-  <CardActions>
-    <Button>加入购物车</Button>
-    <Button>查看详情</Button>
-    <Button style="backgroundColor: #28a745">立即购买</Button>
-  </CardActions>
-</Card>
-```
-
 ## 🛠️ API
 
 ### ReactAIRenderer 组件
 
 主渲染组件，兼容 ReactMarkdown API。
 
-```tsx
-interface ReactAIRendererProps {
-  children: string;
-  components?: Record<string, React.ComponentType<any>>;
-  componentHandlers?: ComponentHandler[];
-  remarkPlugins?: any[];
-  rehypePlugins?: any[];
-  scope?: any;
-  [key: string]: any;
-}
-```
-
-### ComponentHandler 接口
-
-用于注册自定义组件和生命周期钩子。
-
-```tsx
-interface ComponentHandler {
-  component: React.ComponentType<any>;
-  name: string;
-  selfClosing: boolean;
-  onRender?: (item: ComponentData, scope: any) => void;
-}
-```
-
-## 🧩 内置组件
+Props:
+- `content`: Markdown/MDX 内容字符串
+- `scope`: 传递给 MDX 的作用域对象
+- `components`: 自定义组件映射
+- `componentHandlers`: 组件处理器数组
+- `children`: 作为内容的子元素（替代 content）
 
 ### Think 组件
 
-用于展示 AI 推理过程的组件。使用 `<Think>` 标签包围需要展示为推理过程的内容。
-
-```tsx
-<Think>
-正在分析用户需求...
-</Think>
-```
-
-Think 组件会自动识别 `<Think>` 标签并将其内容渲染为可折叠的推理过程展示。
-
-### CodeHighlight 组件
-
-支持多种编程语言的代码高亮显示。
-
-### MermaidRenderer 组件
-
-动态加载和渲染 Mermaid 图表。
-
-> 注意：Mermaid 是一个 peer dependency，需要在项目中单独安装。如果未安装 mermaid，图表将显示为代码块并提示安装信息。
-
-## 🏗️ 构建配置
-
-使用 Rollup 进行构建，输出 UMD 和 ESM 两种格式。
-
-### 构建命令
-
-```bash
-npm run build
-```
-
-### 开发模式
+用于展示 AI 思考过程的组件。
 
-```bash
-npm run dev
-```
+Props:
+- `title`: 思考步骤标题
+- `children`: 思考内容
 
-### 运行示例
+### ToolCall 组件
 
-#### 浏览器示例（推荐）
+用于展示工具调用过程的组件。
 
-构建项目和示例：
+Props:
+- `name`: 工具名称
+- `parameters`: 工具参数
+- `result`: 工具调用结果
 
-```bash
-npm run build
-npm run build:examples
-```
+## 📖 示例
 
-然后使用以下命令启动示例：
+运行示例：
 
 ```bash
 npm run example
 ```
 
-这将启动一个本地服务器，并在浏览器中打开示例页面。
+然后在浏览器中访问 http://localhost:3000/examples/example.html
 
-您也可以直接在浏览器中打开 [examples/example.html](./examples/example.html) 文件查看示例效果。
-
-示例页面现在使用本地构建的 React 依赖，不再依赖外部 CDN 链接，确保在任何环境下都能正常运行。
-
-#### Node.js 示例
-
-如果您想快速查看 API 使用方式，可以运行 Node.js 示例：
+## 🧪 测试
 
 ```bash
-npm run example:node
+npm test
 ```
 
-这将展示如何在 Node.js 环境中使用该库，并演示服务端渲染的基本用法。注意：由于 ReactAIRenderer 是一个 React 组件，它需要浏览器环境才能完全渲染，在 Node.js 环境中只能查看 API 使用方式和基本的服务端渲染输出。
-
-## 📁 项目结构
-
-```
-react-ai-renderer/
-├── src/
-│   ├── index.ts                # 入口文件
-│   ├── ReactAIRenderer.tsx     # 主渲染组件
-│   ├── types.ts                # 类型定义
-│   ├── components/             # 内置组件
-│   │   ├── BuiltInComponents.tsx # 内置组件集合
-│   │   ├── CodeHighlight.tsx     # 代码高亮组件
-│   │   ├── ErrorBoundary.tsx     # 错误边界组件
-│   │   ├── ErrorUI.tsx           # 错误展示组件
-│   │   ├── MdxLayout.tsx         # MDX 布局组件
-│   │   ├── MermaidRenderer.tsx   # Mermaid 图表渲染组件
-│   │   ├── Think.tsx             # AI 推理展示组件
-│   │   └── ToolCall.tsx          # 工具调用展示组件
-│   └── utils/                  # 工具函数
-│       ├── contentProcessor.ts   # 内容处理工具
-│       ├── mdxRenderer.ts        # MDX 渲染工具
-│       └── mdxStreamParse.ts     # MDX 流式解析工具
-├── dist/                       # 构建输出目录
-├── examples/                   # 示例文件
-│   ├── components/             # UI 组件示例
-│   │   ├── FormComponents.tsx    # 表单组件
-│   │   ├── TableComponents.tsx   # 表格组件
-│   │   ├── CardComponents.tsx    # 卡片组件
-│   │   └── index.ts              # 组件导出
-│   ├── example.tsx             # React 示例
-│   ├── example.html            # HTML 示例
-│   ├── run-example.js          # Node.js 示例
-│   ├── tsconfig.json           # 示例编译配置
-│   └── dist/                   # 编译后的示例文件
-├── package.json                # 包配置文件
-├── tsconfig.json               # TypeScript 配置
-├── rollup.config.js            # Rollup 构建配置
-└── README.md                   # 项目说明文档
-```
-
-## 🤝 贡献
-
-欢迎提交 Issue 和 Pull Request 来改进这个项目。
-
 ## 📄 许可证
 
-MIT
-
-## 🙏 致谢
-
-- [MDX](https://mdxjs.com/) - Markdown for the component era
-- [Remark](https://remark.js.org/) - Markdown processor powered by plugins
-- [Rehype](https://github.com/rehypejs/rehype) - HTML processor powered by plugins
-- [Mermaid](https://mermaid-js.github.io/) - Generation of diagram and flowchart from text in a similar manner as markdown
+MIT