@fe-free/ai 4.1.11 → 4.1.13

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @fe-free/ai
 
+## 4.1.13
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/core@4.1.13
+  - @fe-free/icons@4.1.13
+  - @fe-free/tool@4.1.13
+
+## 4.1.12
+
+### Patch Changes
+
+- feat: ai
+  - @fe-free/core@4.1.12
+  - @fe-free/icons@4.1.12
+  - @fe-free/tool@4.1.12
+
 ## 4.1.11
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/ai",
-  "version": "4.1.11",
+  "version": "4.1.13",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -10,15 +10,18 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@ant-design/plots": "^2.5.0",
+    "@ant-design/x-markdown": "^2.1.3",
+    "@ant-design/x-sdk": "^2.1.3",
+    "@ant-design/x": "^2.1.3",
     "ahooks": "^3.7.8",
     "classnames": "^2.5.1",
     "lodash-es": "^4.17.21",
     "uuid": "^13.0.0",
     "zustand": "^4.5.7",
-    "@fe-free/core": "4.1.11"
+    "@fe-free/core": "4.1.13"
   },
   "peerDependencies": {
-    "@ant-design/x-sdk": "^2.1.3",
     "antd": "^5.27.1",
     "dayjs": "~1.11.10",
     "i18next": "^25.7.2",
@@ -26,8 +29,8 @@
     "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
     "react-i18next": "^16.4.0",
-    "@fe-free/icons": "4.1.11",
-    "@fe-free/tool": "4.1.11"
+    "@fe-free/icons": "4.1.13",
+    "@fe-free/tool": "4.1.13"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/ai.stories.tsx

@@ -11,7 +11,6 @@ import {
 } from '@fe-free/ai';
 import { sleep } from '@fe-free/tool';
 import type { Meta } from '@storybook/react-vite';
-import { useDebounce, useUpdateEffect } from 'ahooks';
 import { Button, Divider } from 'antd';
 import { set } from 'lodash-es';
 import { useCallback, useEffect, useMemo } from 'react';
@@ -54,8 +53,6 @@ function Component() {
   const updateMessage = useChatStore((state) => state.updateMessage);
   const { chatStatus } = useChatStoreComputed();
 
-  const debounceCacheMessages = useDebounce(messages, { wait: 500 });
-
   // init from cache
   useEffect(() => {
     const cacheMessages = localStorage.getItem('chatMessages');
@@ -63,48 +60,47 @@ function Component() {
       setMessages(JSON.parse(cacheMessages));
     }
   }, []);
-  // cache
-  useUpdateEffect(() => {
-    localStorage.setItem('chatMessages', JSON.stringify(debounceCacheMessages));
-  }, [debounceCacheMessages]);
 
   const loading =
     chatStatus === EnumChatMessageStatus.PENDING || chatStatus === EnumChatMessageStatus.STREAMING;
 
-  const handleSubmit = useCallback((v) => {
-    console.log('onSubmit', v);
-
-    const message: ChatMessage<AIData> = {
-      uuid: generateUUID(),
-      status: EnumChatMessageStatus.PENDING,
-      user: {
-        ...v,
-      },
-    };
-
-    addMessage(message);
-
-    // fake
-    fakeFetchStream(v, {
-      onUpdate: ({ event, data }) => {
-        if (event === 'message') {
-          message.status = EnumChatMessageStatus.STREAMING;
-
-          const preText = message.ai?.data?.text || '';
-          set(message, 'ai.data.text', preText + data);
-
-          // 假设有 session_id
-          set(message, 'ai.session_id', '123');
-
-          updateMessage(message);
-        }
-        if (event === 'done') {
-          message.status = EnumChatMessageStatus.DONE;
-          updateMessage(message);
-        }
-      },
-    });
-  }, []);
+  const handleSubmit = useCallback(
+    (v) => {
+      console.log('onSubmit', v);
+
+      const message: ChatMessage<AIData> = {
+        uuid: generateUUID(),
+        status: EnumChatMessageStatus.PENDING,
+        user: {
+          ...v,
+        },
+      };
+
+      addMessage(message);
+
+      // fake
+      fakeFetchStream(v, {
+        onUpdate: ({ event, data }) => {
+          if (event === 'message') {
+            message.status = EnumChatMessageStatus.STREAMING;
+
+            const preText = message.ai?.data?.text || '';
+            set(message, 'ai.data.text', preText + data);
+
+            // 假设有 session_id
+            set(message, 'ai.session_id', '123');
+
+            updateMessage(message);
+          }
+          if (event === 'done') {
+            message.status = EnumChatMessageStatus.DONE;
+            updateMessage(message);
+          }
+        },
+      });
+    },
+    [addMessage, updateMessage],
+  );
 
   return (
     <div>

package/src/chat/index.tsx

@@ -1,11 +1,15 @@
 import { PageLayout } from '@fe-free/core';
 
 function Chat({
+  start,
+  startClassName,
   end,
   endClassName,
   children,
   childrenClassName,
 }: {
+  start?: React.ReactNode;
+  startClassName?: string;
   end?: React.ReactNode;
   endClassName?: string;
   children?: React.ReactNode;
@@ -14,6 +18,8 @@ function Chat({
   return (
     <PageLayout
       direction="vertical"
+      start={start}
+      startClassName={startClassName}
       end={end}
       endClassName={endClassName}
       childrenClassName={childrenClassName}

package/src/helper.tsx

@@ -30,7 +30,7 @@ function RecordLoading({
           style={{
             height: '4px',
             width: '2px',
-            animation: `sender-rectangle-${color} infinite 1s ease-in-out ${getAnimationDelay(index)}s`,
+            animation: `fea-sender-rectangle-${color} infinite 1s ease-in-out ${getAnimationDelay(index)}s`,
           }}
         />
       ))}

package/src/index.ts

@@ -4,8 +4,10 @@ export { FileView, FileViewList } from './files';
 export { generateUUID } from './helper';
 export { MSender } from './m_sender';
 export type { MSenderProps, MSenderRef } from './m_sender';
-export { MessageActions, Messages } from './messages';
-export type { MessagesProps } from './messages';
+export { CustomMarkdown, Markdown } from './markdown';
+export type { CustomMarkdownProps, MarkdownProps } from './markdown';
+export { MessageActions, MessageThink, Messages } from './messages';
+export type { MessageThinkProps, MessagesProps } from './messages';
 export { Sender } from './sender';
 export type { SenderProps, SenderRef } from './sender';
 export { createChatStore } from './store';

package/src/m_sender/index.tsx

@@ -55,6 +55,9 @@ function MSender(originProps: MSenderProps) {
         className={classNames(
           'fea-m-sender relative flex items-end rounded-xl border border-01 bg-white p-2.5',
         )}
+        style={{
+          boxShadow: '0px 2px 12px 0px #00000014',
+        }}
       >
         <div className="flex flex-1">
           <Text {...props} refText={refText} />

package/src/markdown/chart.tsx

@@ -0,0 +1,318 @@
+import { Column, Line, Pie, Scatter } from '@ant-design/plots';
+import React, { useMemo } from 'react';
+
+// 类型定义
+interface ChartData {
+  columns: string[];
+  rows: (string | number)[][];
+}
+
+interface ChartConfigBase {
+  chart_type: 'bar' | 'pie' | 'table' | 'scatter';
+  x_field?: string;
+  y_field?: string;
+  angle_field?: string;
+  color_field?: string;
+  title: string;
+}
+
+interface LineChartConfig {
+  chart_type: 'line';
+  x_field?: string;
+  y_field: string | string[];
+  angle_field?: string;
+  color_field?: string;
+  title: string;
+}
+
+// @ts-ignore
+interface ChartConfig extends ChartConfigBase, ChartConfigLine {}
+
+// 错误处理组件
+function ChartError(props: { children?: React.ReactNode }) {
+  const { children } = props;
+  return (
+    <div className="fea-markdown-body-block-chart">
+      <div style={{ textAlign: 'center', padding: '20px' }}>{children || '图表发生错误'}</div>
+    </div>
+  );
+}
+
+class ErrorBoundary extends React.Component {
+  state = { hasError: false };
+
+  static getDerivedStateFromError(error) {
+    console.error('ErrorBoundary:', error);
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    console.error('Error caught:', error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <ChartError />;
+    }
+    return this.props.children;
+  }
+}
+
+// 图表容器组件
+function ChartContainer(props: { title: string; children: React.ReactNode }) {
+  const { title, children } = props;
+  return (
+    <div className="fea-markdown-body-block-chart">
+      <div className="fea-markdown-body-block-chart-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 <ChartError />;
+  }
+
+  const angleIndex = columns.indexOf(angle_field);
+  const colorIndex = columns.indexOf(color_field);
+
+  if (angleIndex === -1 || colorIndex === -1) {
+    return <ChartError />;
+  }
+
+  // 转换数据格式为 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: LineChartConfig }) {
+  const { data, chart } = props;
+  const { columns, rows } = data;
+  const { x_field, y_field } = chart;
+
+  if (!x_field || !y_field) {
+    return <ChartError />;
+  }
+
+  const xIndex = columns.indexOf(x_field);
+  if (xIndex === -1) {
+    return <ChartError />;
+  }
+
+  // 处理 y_field 为数组的情况
+  if (Array.isArray(y_field)) {
+    // 验证所有 y_field 是否存在于 columns 中
+    const yIndices = y_field.map((field) => columns.indexOf(field));
+    if (yIndices.some((index) => index === -1)) {
+      return <ChartError />;
+    }
+
+    // 转换数据格式为 Ant Design Charts 需要的格式（长数据格式）
+    const chartData: any[] = [];
+    rows.forEach((row) => {
+      y_field.forEach((field, index) => {
+        const value = row[yIndices[index]];
+        if (value !== null && value !== undefined) {
+          chartData.push({
+            [x_field]: row[xIndex],
+            type: field,
+            value: Number(value),
+          });
+        }
+      });
+    });
+
+    const config = {
+      data: chartData,
+      xField: x_field,
+      yField: 'value',
+      seriesField: 'type',
+    };
+
+    console.log('config', config);
+
+    return <Line {...config} />;
+  } else {
+    // 处理单个 y_field 的情况（保持向后兼容）
+    const yIndex = columns.indexOf(y_field);
+    if (yIndex === -1) {
+      return <ChartError />;
+    }
+
+    // 转换数据格式为 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 <ChartError />;
+  }
+
+  const xIndex = columns.indexOf(x_field);
+  const yIndex = columns.indexOf(y_field);
+
+  if (xIndex === -1 || yIndex === -1) {
+    return <ChartError />;
+  }
+
+  // 转换数据格式为 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 <ChartError />;
+  }
+
+  const xIndex = columns.indexOf(x_field);
+  const yIndex = columns.indexOf(y_field);
+
+  if (xIndex === -1 || yIndex === -1) {
+    return <ChartError />;
+  }
+
+  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} />;
+}
+
+// 主 ChartBlock 组件
+function ChartBlockBase(props: any) {
+  const { children } = props;
+
+  const chartData = useMemo(() => {
+    try {
+      return JSON.parse(children);
+    } catch (error) {
+      console.error('Failed to parse chart data:', error);
+      return null;
+    }
+  }, [children]);
+
+  if (!chartData) {
+    return <ChartError />;
+  }
+
+  const { data, chart } = chartData;
+  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 <ChartError>不支持的图表类型：{chart_type}</ChartError>;
+  }
+}
+
+function ChartBlock(props: any) {
+  const { children } = props;
+
+  // 大模型会返回一些奇怪字符，需要去掉
+  // 不间断空格
+  // eslint-disable-next-line no-irregular-whitespace
+  const content = children?.replace(/ /g, '');
+
+  return (
+    <ErrorBoundary>
+      <ChartBlockBase>{content}</ChartBlockBase>
+    </ErrorBoundary>
+  );
+}
+
+export { ChartBlock };

package/src/markdown/code.tsx

@@ -0,0 +1,29 @@
+import { CodeHighlighter, Mermaid } from '@ant-design/x';
+import type { ComponentProps } from '@ant-design/x-markdown';
+import { memo } from 'react';
+import { ChartBlock } from './chart';
+import { HMChartBlock } from './hm_chart';
+
+const CodeComponent = memo((props: ComponentProps) => {
+  const { className, children } = props;
+
+  const lang = className?.match(/language-(\w+)/)?.[1] || '';
+
+  if (typeof children !== 'string') return null;
+
+  if (lang === 'mermaid') {
+    return <Mermaid>{children}</Mermaid>;
+  }
+
+  if (lang === 'chart') {
+    return <ChartBlock>{children}</ChartBlock>;
+  }
+
+  if (lang === 'hmchart') {
+    return <HMChartBlock>{children}</HMChartBlock>;
+  }
+
+  return <CodeHighlighter lang={lang}>{children}</CodeHighlighter>;
+});
+
+export { CodeComponent };