133 lines
4.3 KiB
TypeScript
133 lines
4.3 KiB
TypeScript
"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 { 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 ??
|
|
artifact.params.xData ??
|
|
artifact.params.labels ??
|
|
artifact.params.categories
|
|
}
|
|
series={artifact.params.series}
|
|
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>
|
|
);
|
|
};
|