@zov-chatui/chat-parsers

一个强大的 React 组件库，用于解析和渲染 Markdown 图表、文件附件和图片。

功能特性

• ✅ Mermaid 图表渲染 - 支持 27+ 种图表类型
• ✅ 文件附件渲染 - 支持文本、PDF、图片等多种文件类型
• ✅ 图片渲染 - 支持全屏查看、缩放、拖拽等功能
• ✅ 数据图表渲染 - 基于 Recharts 的图表组件
• ✅ 主题支持 - 支持浅色/深色主题
• ✅ 响应式设计 - 完美适配移动端和桌面端

安装

yarn add @zov-chatui/chat-parsers

使用

基础使用

import React from 'react';
import { ThemeProvider } from '@zov-chatui/chat-parsers';
import { MermaidRenderer, FileRenderer, ImageRenderer, ChartRenderer } from '@zov-chatui/chat-parsers';

function App() {
  return (
    <ThemeProvider defaultMode="auto">
      {/* Mermaid 图表 */}
      <MermaidRenderer code={`
        flowchart TD
          A[开始] --> B[处理]
          B --> C[结束]
      `} />
      
      {/* 文件渲染 */}
      <FileRenderer 
        fileName="example.txt"
        fileSize={1024}
        fileType="text/plain"
        content="文件内容..."
      />
      
      {/* 图片渲染 */}
      <ImageRenderer 
        src="https://example.com/image.png"
        alt="示例图片"
      />
      
      {/* 数据图表 */}
      <ChartRenderer 
        data={[
          { name: '一月', value: 400 },
          { name: '二月', value: 300 },
        ]}
        type="line"
      />
    </ThemeProvider>
  );
}

Mermaid 图表

支持的图表类型包括：

• 流程图 (flowchart, graph)
• 时序图 (sequenceDiagram)
• 类图 (classDiagram)
• 状态图 (stateDiagram)
• 甘特图 (gantt)
• 饼图 (pie)
• 思维导图 (mindmap)
• C4 模型图表
• 以及更多...

文件渲染器

支持的文件类型：

• 文本文件 (.txt, .md, .json, .csv)
• PDF 文件
• 图片文件
• Office 文档

图片渲染器

功能：

• 全屏查看
• 缩放和拖拽
• 下载功能
• 响应式设计

API 文档

MermaidRenderer

interface MermaidRendererProps {
  code: string; // Mermaid 图表代码
}

FileRenderer

interface FileRendererProps {
  fileName?: string;
  fileSize?: number;
  fileType?: string;
  content?: string; // 文本内容
  downloadUrl?: string; // 下载链接
}

ImageRenderer

interface ImageRendererProps {
  src: string; // 图片 URL
  alt?: string;
  width?: number;
  height?: number;
}

ChartRenderer

interface ChartRendererProps {
  data?: any[]; // 图表数据
  type?: 'line' | 'area' | 'bar' | 'pie';
  width?: number;
  height?: number;
}

主题定制

import { ThemeProvider, lightTheme, darkTheme } from '@zov-chatui/chat-parsers';

// 使用自定义主题
const customTheme = {
  ...lightTheme,
  colors: {
    ...lightTheme.colors,
    primary: '#your-color',
  },
};

<ThemeProvider defaultMode="light">
  {/* 你的组件 */}
</ThemeProvider>

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！