526 lines
19 KiB
TypeScript
526 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import React, { useMemo } from "react";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import {
|
|
Avatar,
|
|
Box,
|
|
IconButton,
|
|
Paper,
|
|
Stack,
|
|
Tooltip,
|
|
Typography,
|
|
alpha,
|
|
useTheme,
|
|
} from "@mui/material";
|
|
import ContentCopyRounded from "@mui/icons-material/ContentCopyRounded";
|
|
import { TbArrowsSplit2 } from "react-icons/tb";
|
|
import type { PermissionReply } from "@/lib/chatStream";
|
|
import {
|
|
parseAssistantMessageSections,
|
|
parseContentWithToolCalls,
|
|
type ContentSegment,
|
|
} from "./chatMessageSections";
|
|
import type { Message, SpeechState } from "./GlobalChatbox.types";
|
|
import { stripMarkdown } from "./GlobalChatbox.utils";
|
|
import { AgentProgressTimeline } from "./AgentProgressTimeline";
|
|
import { ChartGenerationSkeleton, ChatInlineChart } from "./ChatInlineChart";
|
|
import { ChatToolCallBlock } from "./ChatToolCallBlock";
|
|
import { MarkdownBlock, normalizeClipboardText } from "./AgentMarkdownBlock";
|
|
import { PermissionRequestGroup } from "./AgentPermissionRequests";
|
|
import { QuestionRequestGroup } from "./AgentQuestionRequests";
|
|
import { TodoPlanCard } from "./AgentTodoPlanCard";
|
|
import VolumeUpRounded from "@mui/icons-material/VolumeUpRounded";
|
|
import PauseRounded from "@mui/icons-material/PauseRounded";
|
|
import PlayArrowRounded from "@mui/icons-material/PlayArrowRounded";
|
|
import StopRounded from "@mui/icons-material/StopRounded";
|
|
|
|
type AgentTurnProps = {
|
|
message: Message;
|
|
isStreaming: boolean;
|
|
messageSpeechState: SpeechState;
|
|
onSpeak: (messageId: string, text: string) => void;
|
|
onPause: () => void;
|
|
onResume: () => void;
|
|
onStopSpeech: () => void;
|
|
isTtsSupported: boolean;
|
|
onCreateBranch: (messageId: string) => void;
|
|
onReplyPermission: (requestId: string, reply: PermissionReply) => void;
|
|
onReplyQuestion: (requestId: string, answers: string[][]) => void;
|
|
onRejectQuestion: (requestId: string) => void;
|
|
};
|
|
|
|
const StreamingStatus = () => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
spacing={0.75}
|
|
alignItems="center"
|
|
sx={{
|
|
px: 1,
|
|
py: 0.35,
|
|
borderRadius: 999,
|
|
bgcolor: alpha(theme.palette.primary.main, 0.07),
|
|
color: "text.secondary",
|
|
}}
|
|
>
|
|
<Stack direction="row" spacing={0.35} alignItems="center">
|
|
{[0, 1, 2].map((index) => (
|
|
<motion.span
|
|
key={index}
|
|
animate={{ opacity: [0.28, 0.86, 0.28] }}
|
|
transition={{
|
|
duration: 0.95,
|
|
repeat: Infinity,
|
|
delay: index * 0.14,
|
|
ease: "easeInOut",
|
|
}}
|
|
style={{
|
|
width: 4,
|
|
height: 4,
|
|
borderRadius: "50%",
|
|
background: theme.palette.primary.main,
|
|
display: "block",
|
|
}}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
<Typography variant="caption" color="text.secondary" fontWeight={700}>
|
|
正在生成
|
|
</Typography>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
const StreamingMarkdownBlock = ({
|
|
text,
|
|
isStreaming,
|
|
segmentKey,
|
|
}: {
|
|
text: string;
|
|
isStreaming: boolean;
|
|
segmentKey: string;
|
|
}) => {
|
|
const [streamTextState, setStreamTextState] = React.useState<{
|
|
displayText: string;
|
|
animatedTailLength: number;
|
|
}>({
|
|
displayText: text,
|
|
animatedTailLength: 0,
|
|
});
|
|
|
|
React.useLayoutEffect(() => {
|
|
setStreamTextState((current) => {
|
|
if (current.displayText === text && current.animatedTailLength === 0) {
|
|
return current;
|
|
}
|
|
|
|
if (!isStreaming) {
|
|
return {
|
|
displayText: text,
|
|
animatedTailLength: 0,
|
|
};
|
|
}
|
|
|
|
if (current.displayText === text) {
|
|
return current;
|
|
}
|
|
|
|
return {
|
|
displayText: text,
|
|
animatedTailLength:
|
|
text.length > current.displayText.length &&
|
|
text.startsWith(current.displayText)
|
|
? Math.min(48, text.length - current.displayText.length)
|
|
: 0,
|
|
};
|
|
});
|
|
}, [isStreaming, text]);
|
|
|
|
return (
|
|
<MarkdownBlock
|
|
streamFadeKey={`${segmentKey}-${streamTextState.displayText.length}`}
|
|
streamFadeLength={streamTextState.animatedTailLength}
|
|
>
|
|
{streamTextState.displayText}
|
|
</MarkdownBlock>
|
|
);
|
|
};
|
|
|
|
export const AgentTurn = React.memo(
|
|
({
|
|
message,
|
|
isStreaming,
|
|
messageSpeechState,
|
|
onSpeak,
|
|
onPause,
|
|
onResume,
|
|
onStopSpeech,
|
|
isTtsSupported,
|
|
onCreateBranch,
|
|
onReplyPermission,
|
|
onReplyQuestion,
|
|
onRejectQuestion,
|
|
}: AgentTurnProps) => {
|
|
const theme = useTheme();
|
|
const isUser = message.role === "user";
|
|
const isErrorMessage = Boolean(message.isError);
|
|
const isStreamingAssistant = !isUser && !isErrorMessage && isStreaming;
|
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
const isProgressComplete = message.progress?.some(
|
|
(item) => item.phase === "complete" && item.status === "completed",
|
|
) ?? false;
|
|
const isProgressRunning = !isErrorMessage && !isProgressComplete && (
|
|
message.progress?.some((item) => item.status === "running") ?? false
|
|
);
|
|
|
|
const parsedAssistantSections = useMemo(
|
|
() =>
|
|
!isUser && !isErrorMessage
|
|
? parseAssistantMessageSections(message.content)
|
|
: null,
|
|
[isErrorMessage, isUser, message.content],
|
|
);
|
|
const answerContent = parsedAssistantSections?.answer ?? message.content;
|
|
const contentSegments: ContentSegment[] = useMemo(
|
|
() =>
|
|
!isUser && !isErrorMessage
|
|
? parseContentWithToolCalls(answerContent).segments
|
|
: [{ type: "text", content: answerContent }],
|
|
[answerContent, isErrorMessage, isUser],
|
|
);
|
|
const hasInlineChart = contentSegments.some(
|
|
(segment) =>
|
|
segment.type === "tool_call" &&
|
|
(segment.toolCall.tool === "chart" ||
|
|
segment.toolCall.tool === "show_chart"),
|
|
);
|
|
const visibleChartArtifacts = useMemo(
|
|
() =>
|
|
hasInlineChart
|
|
? []
|
|
: (message.artifacts?.filter((artifact) => artifact.kind === "chart") ?? []),
|
|
[hasInlineChart, message.artifacts],
|
|
);
|
|
|
|
if (isUser) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 12, scale: 0.98 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
exit={{ opacity: 0, y: 8 }}
|
|
transition={{ type: "spring", stiffness: 350, damping: 25 }}
|
|
style={{ alignSelf: "flex-end", maxWidth: "86%", position: "relative" }}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
>
|
|
<Paper
|
|
elevation={4}
|
|
sx={{
|
|
p: 2,
|
|
borderRadius: 5,
|
|
borderBottomRightRadius: 2,
|
|
color: "#fff",
|
|
background: `linear-gradient(135deg, #0288d1, #00acc1)`,
|
|
boxShadow: `0 8px 24px -8px ${alpha("#00acc1", 0.5)}, inset 0 2px 4px ${alpha("#fff", 0.2)}`,
|
|
backdropFilter: "blur(10px)",
|
|
"--chat-md-text": alpha("#fff", 0.96),
|
|
"--chat-md-heading": "#fff",
|
|
"--chat-md-link": "#e0f7fa",
|
|
"--chat-md-link-hover": "#fff",
|
|
"--chat-md-inline-code-bg": "rgba(255,255,255,0.15)",
|
|
"--chat-md-inline-code-border": alpha("#fff", 0.1),
|
|
"--chat-md-inline-code-text": "#fff",
|
|
"--chat-md-pre-bg": "rgba(0, 0, 0, 0.25)",
|
|
"--chat-md-pre-border": alpha("#fff", 0.1),
|
|
"--chat-md-pre-text": "#F8FAFC",
|
|
"--chat-md-quote-border": alpha("#fff", 0.4),
|
|
"--chat-md-quote-bg": alpha("#fff", 0.05),
|
|
"--chat-md-quote-text": alpha("#fff", 0.8),
|
|
}}
|
|
>
|
|
<MarkdownBlock>{message.content}</MarkdownBlock>
|
|
</Paper>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 14 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: 8 }}
|
|
transition={{ type: "spring", stiffness: 320, damping: 26 }}
|
|
style={{ width: "100%", position: "relative" }}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
>
|
|
<Stack direction="row" spacing={1.5} alignItems="flex-start">
|
|
<Avatar
|
|
sx={{
|
|
width: 34,
|
|
height: 34,
|
|
background: alpha("#ffffff", 0.9),
|
|
boxShadow: `0 4px 12px ${alpha("#00acc1", 0.25)}`,
|
|
border: `1.5px solid ${alpha("#fff", 0.8)}`,
|
|
color: "#00acc1",
|
|
mt: 0.25,
|
|
p: 0.5,
|
|
}}
|
|
>
|
|
<Image
|
|
src="/ai-agent.svg"
|
|
alt="TJWater Agent"
|
|
width={18}
|
|
height={18}
|
|
style={{ objectFit: "contain" }}
|
|
/>
|
|
</Avatar>
|
|
|
|
<Paper
|
|
elevation={0}
|
|
sx={{
|
|
flex: 1,
|
|
minWidth: 0,
|
|
p: 2,
|
|
borderRadius: 5,
|
|
bgcolor: alpha("#ffffff", 0.65),
|
|
border: `1px solid ${alpha("#fff", 0.8)}`,
|
|
boxShadow: `0 10px 30px -10px ${alpha(theme.palette.common.black, 0.08)}`,
|
|
backdropFilter: "blur(20px)",
|
|
position: "relative",
|
|
"--chat-md-text": "text.primary",
|
|
"--chat-md-heading": "text.primary",
|
|
"--chat-md-link": "#00838f",
|
|
"--chat-md-link-hover": "#00acc1",
|
|
"--chat-md-inline-code-bg": alpha("#00acc1", 0.08),
|
|
"--chat-md-inline-code-border": alpha("#00acc1", 0.15),
|
|
"--chat-md-inline-code-text": "#006064",
|
|
"--chat-md-pre-bg": "#1e293b",
|
|
"--chat-md-pre-border": "#475569",
|
|
"--chat-md-pre-text": "#f1f5f9",
|
|
"--chat-md-quote-border": "#00acc1",
|
|
"--chat-md-quote-bg": alpha("#00acc1", 0.04),
|
|
"--chat-md-quote-text": "text.secondary",
|
|
}}
|
|
>
|
|
<Stack spacing={1.5}>
|
|
{message.progress?.length ? (
|
|
<AgentProgressTimeline progress={message.progress} isAborted={isErrorMessage} />
|
|
) : null}
|
|
|
|
{message.permissions?.length ? (
|
|
<PermissionRequestGroup
|
|
permissions={message.permissions}
|
|
isRunning={isProgressRunning}
|
|
onReply={onReplyPermission}
|
|
/>
|
|
) : null}
|
|
|
|
{message.questions?.length ? (
|
|
<QuestionRequestGroup
|
|
questions={message.questions}
|
|
onReply={onReplyQuestion}
|
|
onReject={onRejectQuestion}
|
|
/>
|
|
) : null}
|
|
|
|
{message.todos ? (
|
|
<TodoPlanCard todoUpdate={message.todos} />
|
|
) : null}
|
|
|
|
<Box
|
|
sx={{
|
|
p: 1.5,
|
|
borderRadius: 4,
|
|
bgcolor: alpha("#fff", 0.4),
|
|
border: `1px solid ${alpha("#fff", 0.6)}`,
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<Stack spacing={1.2}>
|
|
<Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
|
|
<Typography variant="caption" color="text.secondary" fontWeight={800} sx={{ letterSpacing: 0.5 }}>
|
|
分析结果
|
|
</Typography>
|
|
{isStreamingAssistant ? <StreamingStatus /> : null}
|
|
</Stack>
|
|
{contentSegments.map((segment, segIdx) => {
|
|
if (segment.type === "text") {
|
|
const text = segment.content.trim();
|
|
if (!text && contentSegments.length > 1) return null;
|
|
return (
|
|
<StreamingMarkdownBlock
|
|
key={segIdx}
|
|
text={text || "..."}
|
|
isStreaming={isStreamingAssistant}
|
|
segmentKey={`${message.id}-${segIdx}`}
|
|
/>
|
|
);
|
|
}
|
|
if (segment.type === "tool_call") {
|
|
if (
|
|
segment.toolCall.tool === "chart" ||
|
|
segment.toolCall.tool === "show_chart"
|
|
) {
|
|
const p = segment.toolCall.params;
|
|
return (
|
|
<ChatInlineChart
|
|
key={segment.toolCall.id}
|
|
title={(p.title as string) ?? undefined}
|
|
chart_type={
|
|
(p.chart_type as "line" | "bar" | "pie") ?? "line"
|
|
}
|
|
x_data={p.x_data ?? p.xData ?? p.labels ?? p.categories}
|
|
series={p.series}
|
|
x_axis_name={(p.x_axis_name as string) ?? undefined}
|
|
y_axis_name={(p.y_axis_name as string) ?? undefined}
|
|
isStreaming={isStreamingAssistant}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<ChatToolCallBlock
|
|
key={segment.toolCall.id}
|
|
toolCall={segment.toolCall}
|
|
/>
|
|
);
|
|
}
|
|
if (segment.type === "tool_call_pending") {
|
|
return (
|
|
<ChartGenerationSkeleton
|
|
key="tool-pending"
|
|
status={<StreamingStatus />}
|
|
/>
|
|
);
|
|
}
|
|
return null;
|
|
})}
|
|
</Stack>
|
|
</Box>
|
|
|
|
{visibleChartArtifacts.map((artifact) => (
|
|
<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}
|
|
isStreaming={isStreamingAssistant}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
|
|
<AnimatePresence>
|
|
{isHovered && !isStreaming && (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9, y: 5 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.9, y: 5 }}
|
|
transition={{ duration: 0.15 }}
|
|
style={{ position: "absolute", top: -14, right: 12, zIndex: 10 }}
|
|
>
|
|
<Paper
|
|
elevation={4}
|
|
sx={{
|
|
display: "flex",
|
|
gap: 0.5,
|
|
p: 0.5,
|
|
borderRadius: "16px",
|
|
bgcolor: alpha("#fff", 0.8),
|
|
backdropFilter: "blur(16px)",
|
|
border: `1px solid ${alpha("#fff", 0.9)}`,
|
|
boxShadow: `0 4px 12px ${alpha("#000", 0.08)}`,
|
|
}}
|
|
>
|
|
<Tooltip title="复制">
|
|
<IconButton
|
|
size="small"
|
|
aria-label="复制"
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(
|
|
normalizeClipboardText(message.content),
|
|
);
|
|
// Could add a toast here
|
|
}}
|
|
sx={{ width: 28, height: 28, color: "text.secondary", "&:hover": { color: "#00acc1", bgcolor: alpha("#00acc1", 0.1) } }}
|
|
>
|
|
<ContentCopyRounded sx={{ fontSize: 16 }} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="拆分为新会话">
|
|
<IconButton
|
|
size="small"
|
|
aria-label="拆分为新会话"
|
|
onClick={() => {
|
|
onCreateBranch(message.id);
|
|
}}
|
|
sx={{ width: 28, height: 28, color: "text.secondary", "&:hover": { color: "#00acc1", bgcolor: alpha("#00acc1", 0.1) } }}
|
|
>
|
|
<TbArrowsSplit2 size={16} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Paper>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
</Paper>
|
|
</Stack>
|
|
|
|
{!isErrorMessage && isTtsSupported ? (
|
|
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mt: 0.5, ml: 6, mb: 1 }}>
|
|
<Stack direction="row" spacing={0.5} sx={{ opacity: isHovered ? 1 : 0.4, transition: "opacity 0.2s" }}>
|
|
{messageSpeechState === "idle" ? (
|
|
<IconButton
|
|
size="small"
|
|
onClick={() => onSpeak(message.id, stripMarkdown(answerContent))}
|
|
aria-label="朗读消息"
|
|
sx={{ color: "text.secondary", opacity: 0.68, p: 0.5 }}
|
|
>
|
|
<VolumeUpRounded sx={{ fontSize: 16 }} />
|
|
</IconButton>
|
|
) : null}
|
|
{messageSpeechState === "playing" ? (
|
|
<>
|
|
<IconButton size="small" onClick={onPause} aria-label="暂停朗读" sx={{ color: "primary.main", p: 0.5 }}>
|
|
<PauseRounded sx={{ fontSize: 16 }} />
|
|
</IconButton>
|
|
<IconButton size="small" onClick={onStopSpeech} aria-label="停止朗读" sx={{ color: "error.main", p: 0.5 }}>
|
|
<StopRounded sx={{ fontSize: 16 }} />
|
|
</IconButton>
|
|
</>
|
|
) : null}
|
|
{messageSpeechState === "paused" ? (
|
|
<>
|
|
<IconButton size="small" onClick={onResume} aria-label="继续朗读" sx={{ color: "primary.main", p: 0.5 }}>
|
|
<PlayArrowRounded sx={{ fontSize: 16 }} />
|
|
</IconButton>
|
|
<IconButton size="small" onClick={onStopSpeech} aria-label="停止朗读" sx={{ color: "error.main", p: 0.5 }}>
|
|
<StopRounded sx={{ fontSize: 16 }} />
|
|
</IconButton>
|
|
</>
|
|
) : null}
|
|
</Stack>
|
|
</Stack>
|
|
) : null}
|
|
</motion.div>
|
|
);
|
|
},
|
|
);
|
|
|
|
AgentTurn.displayName = "AgentTurn";
|