@fe-free/core 2.0.3 → 2.0.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 2.0.4
+
+### Patch Changes
+
+- feat: md chat
+  - @fe-free/tool@2.0.4
+
 ## 2.0.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "@ant-design/plots": "^2.2.5",
+    "@ant-design/plots": "^2.5.0",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-json": "^6.0.1",
@@ -38,7 +38,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.0.3"
+    "@fe-free/tool": "2.0.4"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/markdown/chat.tsx

@@ -0,0 +1,261 @@
+import { Column, Line, Pie, Scatter } from '@ant-design/plots';
+import React, { useMemo } from 'react';
+
+// 类型定义
+interface ChartData {
+  columns: string[];
+  rows: (string | number)[][];
+}
+
+interface ChartConfig {
+  chart_type: 'line' | 'bar' | 'pie' | 'table' | 'scatter';
+  x_field?: string;
+  y_field?: string;
+  angle_field?: string;
+  color_field?: string;
+  title: string;
+}
+
+// 错误处理组件
+function ChatError(props: { children?: React.ReactNode }) {
+  const { children } = props;
+  return (
+    <div className="markdown-body-chat-block">
+      <div style={{ textAlign: 'center', padding: '20px' }}>{children || '图表发生错误'}</div>
+    </div>
+  );
+}
+
+class ErrorBoundary extends React.Component {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    console.error('Error caught:', error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <ChatError />;
+    }
+    return this.props.children;
+  }
+}
+
+// 图表容器组件
+function ChartContainer(props: { title: string; children: React.ReactNode }) {
+  const { title, children } = props;
+  return (
+    <div className="markdown-body-chat-block">
+      <div className="markdown-body-chat-block-title">{title}</div>
+      {children}
+    </div>
+  );
+}
+
+// 饼图组件
+function PieChart(props: { data: ChartData; chart: ChartConfig }) {
+  const { data, chart } = props;
+  const { columns, rows } = data;
+  const { angle_field, color_field } = chart;
+
+  if (!angle_field || !color_field) {
+    return <ChatError />;
+  }
+
+  const angleIndex = columns.indexOf(angle_field);
+  const colorIndex = columns.indexOf(color_field);
+
+  if (angleIndex === -1 || colorIndex === -1) {
+    return <ChatError />;
+  }
+
+  // 转换数据格式为 Ant Design Charts 需要的格式
+  const chartData = rows.map((row) => ({
+    [color_field]: row[colorIndex],
+    [angle_field]: Number(row[angleIndex]),
+  }));
+
+  const config = {
+    data: chartData,
+    angleField: angle_field,
+    colorField: color_field,
+    label: {
+      text: angle_field,
+      style: {
+        fontWeight: 'bold',
+      },
+    },
+    legend: {
+      color: {
+        title: false,
+        position: 'right',
+        rowPadding: 5,
+      },
+    },
+  };
+
+  return <Pie {...config} />;
+}
+
+// 折线图组件
+function LineChart(props: { data: ChartData; chart: ChartConfig }) {
+  const { data, chart } = props;
+  const { columns, rows } = data;
+  const { x_field, y_field } = chart;
+
+  if (!x_field || !y_field) {
+    return <ChatError />;
+  }
+
+  const xIndex = columns.indexOf(x_field);
+  const yIndex = columns.indexOf(y_field);
+
+  if (xIndex === -1 || yIndex === -1) {
+    return <ChatError />;
+  }
+
+  // 转换数据格式为 Ant Design Charts 需要的格式
+  const chartData = rows.map((row) => ({
+    [x_field]: row[xIndex],
+    [y_field]: Number(row[yIndex]),
+  }));
+
+  const config = {
+    data: chartData,
+    xField: x_field,
+    yField: y_field,
+  };
+
+  return <Line {...config} />;
+}
+
+// 柱状图组件
+function BarChart(props: { data: ChartData; chart: ChartConfig }) {
+  const { data, chart } = props;
+  const { columns, rows } = data;
+  const { x_field, y_field } = chart;
+
+  if (!x_field || !y_field) {
+    return <ChatError />;
+  }
+
+  const xIndex = columns.indexOf(x_field);
+  const yIndex = columns.indexOf(y_field);
+
+  if (xIndex === -1 || yIndex === -1) {
+    return <ChatError />;
+  }
+
+  // 转换数据格式为 Ant Design Charts 需要的格式
+  const chartData = rows.map((row) => ({
+    [x_field]: row[xIndex],
+    [y_field]: Number(row[yIndex]),
+  }));
+
+  const config = {
+    data: chartData,
+    xField: x_field,
+    yField: y_field,
+  };
+
+  return <Column {...config} />;
+}
+
+function ScatterChart(props: { data: ChartData; chart: ChartConfig }) {
+  const { data, chart } = props;
+  const { columns, rows } = data;
+  const { x_field, y_field } = chart;
+
+  if (!x_field || !y_field) {
+    return <ChatError />;
+  }
+
+  const xIndex = columns.indexOf(x_field);
+  const yIndex = columns.indexOf(y_field);
+
+  if (xIndex === -1 || yIndex === -1) {
+    return <ChatError />;
+  }
+
+  const chartData = rows.map((row) => ({
+    [x_field]: row[xIndex],
+    [y_field]: row[yIndex],
+  }));
+
+  const config = {
+    data: chartData,
+    xField: x_field,
+    yField: y_field,
+  };
+
+  return <Scatter {...config} />;
+}
+
+// 主 ChatBlock 组件
+function ChatBlockBase(props: any) {
+  const { children } = props;
+
+  const chatData = useMemo(() => {
+    try {
+      return JSON.parse(children);
+    } catch (error) {
+      console.error('Failed to parse chat data:', error);
+      return null;
+    }
+  }, [children]);
+
+  if (!chatData) {
+    return <ChatError />;
+  }
+
+  const { data, chart } = chatData;
+  const { chart_type, title } = chart;
+
+  switch (chart_type) {
+    case 'pie':
+      return (
+        <ChartContainer title={title}>
+          <PieChart data={data} chart={chart} />
+        </ChartContainer>
+      );
+    case 'line':
+      return (
+        <ChartContainer title={title}>
+          <LineChart data={data} chart={chart} />
+        </ChartContainer>
+      );
+    case 'bar':
+      return (
+        <ChartContainer title={title}>
+          <BarChart data={data} chart={chart} />
+        </ChartContainer>
+      );
+    case 'scatter':
+      return (
+        <ChartContainer title={title}>
+          <ScatterChart data={data} chart={chart} />
+        </ChartContainer>
+      );
+    case 'table':
+      // 表格类型暂不处理
+      return null;
+    default:
+      return <ChatError>不支持的图表类型：{chart_type}</ChatError>;
+  }
+}
+
+function ChatBlock(props: any) {
+  const { children } = props;
+
+  return (
+    <ErrorBoundary>
+      <ChatBlockBase>{children}</ChatBlockBase>
+    </ErrorBoundary>
+  );
+}
+
+export { ChatBlock };

package/src/markdown/code.tsx

@@ -1,10 +1,16 @@
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { ChatBlock } from './chat';
 
 function CodeBlock(props: any) {
   const { children, className, ...rest } = props;
   const match = /language-(\w+)/.exec(props.className || '');
 
+  // 如果是 chat 类型的代码块，使用 ChatBlock 组件
+  if (match && match[1] === 'chat') {
+    return <ChatBlock>{children}</ChatBlock>;
+  }
+
   return (
     <div className="markdown-body-code-block">
       {match ? (

package/src/markdown/markdown.stories.tsx

@@ -138,3 +138,160 @@ export const DeepSeekPending: Story = {
     `,
   },
 };
+
+export const Chat: Story = {
+  args: {
+    children: `这是一个使用 @ant-design/plots 的 chat 示例
+
+## 折线图示例
+
+\`\`\`chat
+{
+  "data": {
+    "columns": ["time", "amount"],
+    "rows": [
+      ["2025-06-03", 18.23],
+      ["2025-06-10", 112.2],
+      ["2025-06-23", 10],
+      ["2025-07-01", 85.5],
+      ["2025-07-15", 156.8]
+    ]
+  },
+  "chart": {
+    "chart_type": "line",
+    "x_field": "time",
+    "y_field": "amount",
+    "title": "张三金额变化趋势图"
+  }
+}
+\`\`\`
+
+## 柱状图示例
+
+\`\`\`chat
+{
+  "data": {
+    "columns": ["time", "amount"],
+    "rows": [
+      ["2025-06-03", 18.23],
+      ["2025-06-10", 112.2],
+      ["2025-06-23", 10],
+      ["2025-07-01", 85.5],
+      ["2025-07-15", 156.8]
+    ]
+  },
+  "chart": {
+    "chart_type": "bar",
+    "x_field": "time",
+    "y_field": "amount",
+    "title": "张三金额变化趋势图"
+  }
+}
+\`\`\`
+
+## 饼图示例
+
+\`\`\`chat
+{
+  "data": {
+    "columns": ["category", "sales"],
+    "rows": [
+      ["电子产品", 45],
+      ["服装", 30],
+      ["食品", 15],
+      ["家居", 10]
+    ]
+  },
+  "chart": {
+    "chart_type": "pie",
+    "angle_field": "sales",
+    "color_field": "category",
+    "title": "销售品类分布"
+  }
+}
+\`\`\`
+
+## 散点图示例
+
+\`\`\`chat
+{
+  "data": {
+    "columns": ["width", "height"],
+    "rows": [
+      [100, 200],
+      [300, 400],
+      [500, 600]
+    ]
+  },
+  "chart": {
+    "chart_type": "scatter",
+    "x_field": "width",
+    "y_field": "height",
+    "title": "散点图示例"
+  }
+}
+\`\`\`
+
+## 错误处理示例
+
+### JSON 解析错误
+
+\`\`\`chat
+{
+  "data": {
+    "columns": ["time", "amount"],
+    "rows": [
+      ["2025-06-03", 18.23],
+      ["2025-06-10", 112.2]
+    ]
+  },
+  "chart": {
+    "chart_type": "line",
+    "x_field": "time",
+    "y_field": "amount",
+    "title": "张三金额变化趋势图"
+  }
+\`\`\`
+
+### 字段不存在错误
+
+\`\`\`chat
+{
+  "data": {
+    "columns": ["time", "amount"],
+    "rows": [
+      ["2025-06-03", 18.23],
+      ["2025-06-10", 112.2]
+    ]
+  },
+  "chart": {
+    "chart_type": "line",
+    "x_field": "nonexistent_field",
+    "y_field": "amount",
+    "title": "张三金额变化趋势图"
+  }
+}
+\`\`\`
+
+### 不支持的图表类型
+
+\`\`\`chat
+{
+  "data": {
+    "columns": ["time", "amount"],
+    "rows": [
+      ["2025-06-03", 18.23],
+      ["2025-06-10", 112.2]
+    ]
+  },
+  "chart": {
+    "chart_type": "some_chart_type",
+    "x_field": "time",
+    "y_field": "amount",
+    "title": "张三金额变化趋势图"
+  }
+}
+\`\`\`
+`,
+  },
+};

package/src/markdown/style.scss

@@ -8,4 +8,15 @@
       margin: 0 !important;
     }
   }
+
+  .markdown-body-chat-block {
+    background: white;
+    border-radius: 6px;
+
+    .markdown-body-chat-block-title {
+      font-size: 16px;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+  }
 }