添加工具调用解析和聊天工具操作处理

2026-04-03 11:49:05 +08:00
parent a1c8041b11
commit d610a09c14
11 changed files with 1269 additions and 18 deletions
@@ -0,0 +1,178 @@
+"use client";
+
+import React, { useMemo } from "react";
+import ReactECharts from "echarts-for-react";
+import * as echarts from "echarts";
+import { Box, Paper, Typography, alpha, useTheme } from "@mui/material";
+
+/* ------------------------------------------------------------------ */
+/*  Inline chart rendered inside a chat message bubble.               */
+/*  Accepts structured data produced by the AI tool_call.             */
+/* ------------------------------------------------------------------ */
+
+export interface ChatChartSeries {
+  name: string;
+  data: number[];
+  type?: "line" | "bar";
+}
+
+export interface ChatInlineChartProps {
+  title?: string;
+  chart_type?: "line" | "bar" | "pie";
+  x_data?: string[];
+  series?: ChatChartSeries[];
+  y_axis_name?: string;
+  x_axis_name?: string;
+}
+
+const COLORS = [
+  "#5470c6",
+  "#91cc75",
+  "#fac858",
+  "#ee6666",
+  "#73c0de",
+  "#3ba272",
+  "#fc8452",
+  "#9a60b4",
+  "#ea7ccc",
+];
+
+export const ChatInlineChart: React.FC<ChatInlineChartProps> = ({
+  title,
+  chart_type: chartType = "line",
+  x_data: xData,
+  series = [],
+  y_axis_name: yAxisName,
+  x_axis_name: xAxisName,
+}) => {
+  const theme = useTheme();
+
+  const option = useMemo(() => {
+    if (!series.length) return null;
+
+    /* ---------- Pie chart ---------- */
+    if (chartType === "pie") {
+      const pieData =
+        series[0]?.data.map((value, i) => ({
+          name: xData?.[i] ?? `${i}`,
+          value,
+        })) ?? [];
+
+      return {
+        tooltip: { trigger: "item" },
+        legend: { top: "bottom", textStyle: { fontSize: 11 } },
+        series: [
+          {
+            type: "pie",
+            radius: ["30%", "60%"],
+            data: pieData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+            label: { fontSize: 11 },
+          },
+        ],
+        color: COLORS,
+      };
+    }
+
+    /* ---------- Line / Bar chart ---------- */
+    return {
+      tooltip: { trigger: "axis", confine: true },
+      legend: { top: "top", textStyle: { fontSize: 11 } },
+      grid: {
+        left: "5%",
+        right: "5%",
+        bottom: "12%",
+        top: title ? "18%" : "14%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category" as const,
+        boundaryGap: chartType === "bar",
+        data: xData ?? [],
+        axisLabel: {
+          fontSize: 10,
+          rotate: xData && xData.length > 10 ? 30 : 0,
+        },
+        name: xAxisName,
+      },
+      yAxis: {
+        type: "value" as const,
+        scale: true,
+        axisLabel: { fontSize: 10 },
+        name: yAxisName,
+      },
+      dataZoom:
+        xData && xData.length > 20
+          ? [{ type: "inside", start: 0, end: 100 }]
+          : undefined,
+      series: series.map((s, i) => {
+        const color = COLORS[i % COLORS.length];
+        return {
+          name: s.name,
+          type: (s.type ?? chartType) as string,
+          data: s.data,
+          symbol: chartType === "line" ? "none" : undefined,
+          smooth: chartType === "line",
+          itemStyle: { color },
+          ...(chartType === "line"
+            ? {
+                areaStyle: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: alpha(color, 0.3) },
+                    { offset: 1, color: alpha(color, 0.05) },
+                  ]),
+                  opacity: 0.3,
+                },
+              }
+            : {}),
+        };
+      }),
+      color: COLORS,
+    };
+  }, [chartType, xData, series, title, yAxisName, xAxisName]);
+
+  if (!option) {
+    return (
+      <Typography variant="caption" color="text.secondary" sx={{ mt: 1 }}>
+        图表数据为空
+      </Typography>
+    );
+  }
+
+  return (
+    <Paper
+      elevation={0}
+      sx={{
+        mt: 1.5,
+        mb: 1,
+        borderRadius: 3,
+        border: `1px solid ${alpha(theme.palette.divider, 0.15)}`,
+        bgcolor: alpha("#fff", 0.92),
+        overflow: "hidden",
+      }}
+    >
+      {title && (
+        <Typography
+          variant="subtitle2"
+          sx={{ px: 2, pt: 1.5, fontWeight: 600, color: "text.primary" }}
+        >
+          {title}
+        </Typography>
+      )}
+      <Box sx={{ px: 1, pb: 1 }}>
+        <ReactECharts
+          option={option}
+          style={{ height: 240, width: "100%" }}
+          notMerge
+          lazyUpdate
+        />
+      </Box>
+    </Paper>
+  );
+};