279 lines
8.9 KiB
TypeScript
279 lines
8.9 KiB
TypeScript
"use client";
|
||
|
||
import Image from "next/image";
|
||
import React from "react";
|
||
import { AnimatePresence, motion } from "framer-motion";
|
||
import { Box, Paper, Stack, Typography, alpha, useTheme, Grid } from "@mui/material";
|
||
import WaterDropRounded from "@mui/icons-material/WaterDropRounded";
|
||
import SensorsRounded from "@mui/icons-material/SensorsRounded";
|
||
import TroubleshootRounded from "@mui/icons-material/TroubleshootRounded";
|
||
import MapRounded from "@mui/icons-material/MapRounded";
|
||
|
||
import { AgentTurn } from "./AgentTurn";
|
||
import { TypingIndicator } from "./GlobalChatbox.parts";
|
||
import type {
|
||
BranchGroup,
|
||
BranchTransition,
|
||
Message,
|
||
SpeechState,
|
||
} from "./GlobalChatbox.types";
|
||
|
||
type AgentWorkspaceProps = {
|
||
messages: Message[];
|
||
branchGroups: BranchGroup[];
|
||
branchTransition: BranchTransition | null;
|
||
isStreaming: boolean;
|
||
bottomRef: React.RefObject<HTMLDivElement | null>;
|
||
speakingMessageId: string | null;
|
||
speechState: SpeechState;
|
||
onSpeak: (messageId: string, text: string) => void;
|
||
onPauseSpeech: () => void;
|
||
onResumeSpeech: () => void;
|
||
onStopSpeech: () => void;
|
||
isTtsSupported: boolean;
|
||
onRegenerate: () => void;
|
||
onEditResubmit: (messageId: string, newContent: string) => void;
|
||
onCycleBranch: (rootMessageId: string, direction: -1 | 1) => void;
|
||
};
|
||
|
||
const EmptyState = () => {
|
||
const theme = useTheme();
|
||
const capabilities = [
|
||
{ icon: <WaterDropRounded sx={{ fontSize: 20, color: "#00acc1" }} />, label: "水力瓶颈识别" },
|
||
{ icon: <SensorsRounded sx={{ fontSize: 20, color: "#0288d1" }} />, label: "异常状态预警" },
|
||
{ icon: <TroubleshootRounded sx={{ fontSize: 20, color: "#43a047" }} />, label: "调度与改造建议" },
|
||
{ icon: <MapRounded sx={{ fontSize: 20, color: "#8e24aa" }} />, label: "GIS 地图联动" },
|
||
];
|
||
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ type: "spring", stiffness: 200, damping: 20 }}
|
||
style={{ margin: "auto", width: "100%", maxWidth: 440, padding: 16 }}
|
||
>
|
||
<Paper
|
||
elevation={0}
|
||
sx={{
|
||
p: 4,
|
||
borderRadius: 4,
|
||
bgcolor: alpha("#ffffff", 0.4),
|
||
border: `1px solid ${alpha("#fff", 0.8)}`,
|
||
boxShadow: `0 16px 40px ${alpha("#000", 0.05)}`,
|
||
textAlign: "center",
|
||
backdropFilter: "blur(24px)",
|
||
position: "relative",
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
<Box sx={{
|
||
position: "absolute",
|
||
top: -100,
|
||
right: -100,
|
||
width: 200,
|
||
height: 200,
|
||
background: "radial-gradient(circle, rgba(0, 172, 193, 0.15) 0%, rgba(255,255,255,0) 70%)",
|
||
}} />
|
||
<motion.div
|
||
animate={{
|
||
y: [-6, 4, -6],
|
||
scale: [1, 1.04, 1],
|
||
rotate: [-3, 3, -3],
|
||
}}
|
||
transition={{ duration: 4.8, repeat: Infinity, ease: "easeInOut" }}
|
||
style={{
|
||
display: "inline-flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
width: 88,
|
||
height: 88,
|
||
marginBottom: 12,
|
||
borderRadius: "50%",
|
||
background: "radial-gradient(circle, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.45) 58%, rgba(255,255,255,0) 100%)",
|
||
boxShadow: "0 10px 28px rgba(0, 131, 143, 0.12)",
|
||
}}
|
||
>
|
||
<Image
|
||
src="/ai-agent.svg"
|
||
alt="TJWater Agent"
|
||
width={54}
|
||
height={54}
|
||
style={{
|
||
objectFit: "contain",
|
||
filter: "drop-shadow(0 4px 12px rgba(0, 131, 143, 0.2))",
|
||
}}
|
||
/>
|
||
</motion.div>
|
||
<Typography variant="h6" color="text.primary" fontWeight={800} gutterBottom>
|
||
我已就绪，请描述任务
|
||
</Typography>
|
||
<Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.6, mb: 3 }}>
|
||
你可以使用自然语言下达指令，我会自主规划决策执行、并在地图上呈现分析结果。
|
||
</Typography>
|
||
|
||
<Grid container spacing={1.5}>
|
||
{capabilities.map((item) => (
|
||
<Grid item xs={6} key={item.label}>
|
||
<motion.div whileHover={{ y: -2, scale: 1.02 }} transition={{ duration: 0.2 }}>
|
||
<Stack
|
||
direction="row"
|
||
spacing={1}
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
sx={{
|
||
px: 1.5,
|
||
py: 1.5,
|
||
borderRadius: 3,
|
||
bgcolor: alpha("#fff", 0.5),
|
||
border: `1px solid ${alpha("#fff", 0.6)}`,
|
||
boxShadow: `0 4px 12px ${alpha("#000", 0.03)}`,
|
||
color: "text.primary",
|
||
transition: "all 0.2s",
|
||
"&:hover": {
|
||
bgcolor: alpha("#fff", 0.8),
|
||
borderColor: alpha("#00acc1", 0.4),
|
||
boxShadow: `0 6px 16px ${alpha("#00acc1", 0.15)}`,
|
||
}
|
||
}}
|
||
>
|
||
{item.icon}
|
||
<Typography variant="caption" fontWeight={700}>
|
||
{item.label}
|
||
</Typography>
|
||
</Stack>
|
||
</motion.div>
|
||
</Grid>
|
||
))}
|
||
</Grid>
|
||
</Paper>
|
||
</motion.div>
|
||
);
|
||
};
|
||
|
||
export const AgentWorkspace = ({
|
||
messages,
|
||
branchGroups,
|
||
branchTransition,
|
||
isStreaming,
|
||
bottomRef,
|
||
speakingMessageId,
|
||
speechState,
|
||
onSpeak,
|
||
onPauseSpeech,
|
||
onResumeSpeech,
|
||
onStopSpeech,
|
||
isTtsSupported,
|
||
onRegenerate,
|
||
onEditResubmit,
|
||
onCycleBranch,
|
||
}: AgentWorkspaceProps) => {
|
||
const theme = useTheme();
|
||
const latestAssistant = [...messages]
|
||
.reverse()
|
||
.find((message) => message.role === "assistant");
|
||
const showTypingIndicator =
|
||
isStreaming &&
|
||
(!latestAssistant ||
|
||
(latestAssistant.content.trim().length === 0 &&
|
||
!(latestAssistant.artifacts?.length)));
|
||
const stableMessages = branchTransition
|
||
? messages.slice(0, branchTransition.parentCount)
|
||
: messages;
|
||
const transitionMessages = branchTransition
|
||
? messages.slice(branchTransition.parentCount)
|
||
: [];
|
||
|
||
const renderTurn = (message: Message) => {
|
||
const rootMessageId = message.branchRootId ?? message.id;
|
||
const branchGroup = branchGroups.find(
|
||
(group) => group.rootMessageId === rootMessageId,
|
||
);
|
||
|
||
return (
|
||
<AgentTurn
|
||
key={rootMessageId}
|
||
message={message}
|
||
branchState={
|
||
branchGroup && branchGroup.branches.length > 1
|
||
? {
|
||
activeIndex: branchGroup.activeIndex,
|
||
total: branchGroup.branches.length,
|
||
}
|
||
: undefined
|
||
}
|
||
messageSpeechState={speakingMessageId === message.id ? speechState : "idle"}
|
||
onSpeak={onSpeak}
|
||
onPause={onPauseSpeech}
|
||
onResume={onResumeSpeech}
|
||
onStopSpeech={onStopSpeech}
|
||
isTtsSupported={isTtsSupported}
|
||
onRegenerate={onRegenerate}
|
||
onEditResubmit={onEditResubmit}
|
||
onCycleBranch={onCycleBranch}
|
||
/>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
flex: 1,
|
||
overflowY: "auto",
|
||
px: 2.5,
|
||
py: 2,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
zIndex: 5,
|
||
}}
|
||
>
|
||
<AnimatePresence initial={false}>
|
||
{messages.length === 0 ? <EmptyState /> : null}
|
||
</AnimatePresence>
|
||
|
||
{messages.length > 0 ? (
|
||
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||
{stableMessages.map(renderTurn)}
|
||
|
||
{branchTransition ? (
|
||
<AnimatePresence initial={false} mode="wait">
|
||
<motion.div
|
||
key={`${branchTransition.rootMessageId}:${branchTransition.activeBranchId}:${branchTransition.nonce}`}
|
||
initial={{ opacity: 0, y: 8 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -8 }}
|
||
transition={{ duration: 0.18, ease: "easeOut" }}
|
||
style={{ display: "flex", flexDirection: "column", gap: 16 }}
|
||
>
|
||
{transitionMessages.map(renderTurn)}
|
||
</motion.div>
|
||
</AnimatePresence>
|
||
) : null}
|
||
</Box>
|
||
) : null}
|
||
|
||
{showTypingIndicator ? (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10, scale: 0.94 }}
|
||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||
transition={{ type: "spring", stiffness: 300 }}
|
||
style={{ alignSelf: "flex-start", display: "flex", gap: 12, marginTop: 4, marginLeft: 44 }}
|
||
>
|
||
<Paper
|
||
elevation={0}
|
||
sx={{
|
||
p: 1.3,
|
||
borderRadius: 4,
|
||
bgcolor: alpha("#fff", 0.82),
|
||
boxShadow: `0 4px 12px ${alpha(theme.palette.common.black, 0.05)}`,
|
||
}}
|
||
>
|
||
<TypingIndicator />
|
||
</Paper>
|
||
</motion.div>
|
||
) : null}
|
||
|
||
<div ref={bottomRef} style={{ height: 1 }} />
|
||
</Box>
|
||
);
|
||
};
|