Agent 初版设计

2026-04-29 17:15:49 +08:00
parent 2c1afdc97c
commit e5ca9e24aa
13 changed files with 1819 additions and 1255 deletions
@@ -0,0 +1,128 @@
+"use client";
+
+import React from "react";
+import {
+  Box,
+  Chip,
+  Paper,
+  Stack,
+  Typography,
+  alpha,
+  useTheme,
+} from "@mui/material";
+import type { Theme } from "@mui/material/styles";
+import BarChartRounded from "@mui/icons-material/BarChartRounded";
+import LocationOnRounded from "@mui/icons-material/LocationOnRounded";
+import SensorsRounded from "@mui/icons-material/SensorsRounded";
+import BuildCircleRounded from "@mui/icons-material/BuildCircleRounded";
+
+import { ChatInlineChart } from "./ChatInlineChart";
+import type { ChatChartSeries } from "./ChatInlineChart";
+import type { AgentArtifact } from "./GlobalChatbox.types";
+
+const artifactIcon = (kind: AgentArtifact["kind"]) => {
+  if (kind === "chart") return <BarChartRounded sx={{ fontSize: 18 }} />;
+  if (kind === "map") return <LocationOnRounded sx={{ fontSize: 18 }} />;
+  if (kind === "panel") return <SensorsRounded sx={{ fontSize: 18 }} />;
+  return <BuildCircleRounded sx={{ fontSize: 18 }} />;
+};
+
+const artifactColor = (kind: AgentArtifact["kind"], theme: Theme) => {
+  if (kind === "chart") return theme.palette.info.main;
+  if (kind === "map") return theme.palette.success.main;
+  if (kind === "panel") return theme.palette.warning.main;
+  return theme.palette.primary.main;
+};
+
+export const AgentArtifactPanel = ({ artifacts }: { artifacts: AgentArtifact[] }) => {
+  const theme = useTheme();
+  if (!artifacts.length) return null;
+
+  return (
+    <Stack spacing={1.25}>
+      <Stack direction="row" spacing={1} alignItems="center">
+        <Typography variant="caption" fontWeight={800} color="text.primary">
+          结果与动作
+        </Typography>
+        <Chip
+          size="small"
+          label={`${artifacts.length} 项`}
+          sx={{ height: 20, fontSize: "0.68rem" }}
+        />
+      </Stack>
+
+      {artifacts.map((artifact) => {
+        const color = artifactColor(artifact.kind, theme);
+        if (artifact.kind === "chart") {
+          return (
+            <ChatInlineChart
+              key={artifact.id}
+              title={(artifact.params.title as string) ?? artifact.title}
+              chart_type={
+                (artifact.params.chart_type as "line" | "bar" | "pie") ?? "line"
+              }
+              x_data={(artifact.params.x_data as string[]) ?? []}
+              series={(artifact.params.series as ChatChartSeries[]) ?? []}
+              x_axis_name={(artifact.params.x_axis_name as string) ?? undefined}
+              y_axis_name={(artifact.params.y_axis_name as string) ?? undefined}
+            />
+          );
+        }
+
+        return (
+          <Paper
+            key={artifact.id}
+            elevation={0}
+            sx={{
+              p: 1.35,
+              borderRadius: 3,
+              border: `1px solid ${alpha(color, 0.22)}`,
+              bgcolor: alpha(color, 0.055),
+            }}
+          >
+            <Stack direction="row" spacing={1.25} alignItems="center">
+              <Box
+                sx={{
+                  width: 32,
+                  height: 32,
+                  borderRadius: 2,
+                  bgcolor: alpha(color, 0.12),
+                  color,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                {artifactIcon(artifact.kind)}
+              </Box>
+              <Box sx={{ minWidth: 0, flex: 1 }}>
+                <Typography variant="caption" fontWeight={800} color="text.primary">
+                  {artifact.title}
+                </Typography>
+                {artifact.description ? (
+                  <Typography
+                    variant="caption"
+                    color="text.secondary"
+                    sx={{ display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+                  >
+                    {artifact.description}
+                  </Typography>
+                ) : null}
+              </Box>
+              <Chip
+                size="small"
+                label="已执行"
+                sx={{
+                  height: 22,
+                  fontSize: "0.68rem",
+                  bgcolor: alpha(color, 0.12),
+                  color,
+                }}
+              />
+            </Stack>
+          </Paper>
+        );
+      })}
+    </Stack>
+  );
+};