重构 Agent 聊天，支持分支管理与消息克隆

src/components/chat/AgentHeader.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import React from "react";
 import { motion } from "framer-motion";
 import {
@@ -15,7 +16,6 @@ import {
   alpha,
   useTheme,
 } from "@mui/material";
-import AutoAwesome from "@mui/icons-material/AutoAwesome";
 import AddCommentRounded from "@mui/icons-material/AddCommentRounded";
 import CloseRounded from "@mui/icons-material/CloseRounded";
 
@@ -48,10 +48,14 @@ export const AgentHeader = ({
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
+        backdropFilter: "blur(20px)",
+        borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
+        background: `linear-gradient(to bottom, ${alpha("#fff", 0.4)}, ${alpha("#fff", 0.1)})`,
+        boxShadow: `0 1px 0 ${alpha("#fff", 0.6)} inset`,
       }}
     >
       <Stack direction="row" alignItems="center" spacing={2}>
-        <motion.div whileHover={{ rotate: 10, scale: 1.08 }} whileTap={{ scale: 0.95 }}>
+        <motion.div whileHover={{ rotate: 10, scale: 1.05 }} whileTap={{ scale: 0.95 }}>
           <IconButton
             onClick={onMenuOpen}
             aria-label="打开 Agent 菜单"
@@ -63,24 +67,39 @@ export const AgentHeader = ({
             <Box sx={{ position: "relative" }}>
               <Avatar
                 sx={{
-                  background: `linear-gradient(135deg, ${theme.palette.primary.light}, ${theme.palette.primary.main})`,
-                  boxShadow: `0 8px 20px ${alpha(theme.palette.primary.main, 0.4)}`,
-                  width: 48,
-                  height: 48,
+                  background: alpha("#ffffff", 0.9),
+                  boxShadow: `0 8px 24px ${alpha("#00acc1", 0.4)}`,
+                  width: 44,
+                  height: 44,
+                  border: `2px solid ${alpha("#fff", 0.8)}`,
+                  p: 0.75,
                 }}
               >
-                <AutoAwesome fontSize="medium" sx={{ color: "#fff" }} />
+                <Image
+                  src="/ai-agent.svg"
+                  alt="TJWater Agent"
+                  width={30}
+                  height={30}
+                  style={{ width: "100%", height: "100%", objectFit: "contain" }}
+                />
               </Avatar>
               <Box
                 sx={{
                   position: "absolute",
-                  bottom: 2,
-                  right: 2,
-                  width: 12,
-                  height: 12,
-                  bgcolor: isStreaming ? "warning.main" : "success.main",
+                  bottom: -2,
+                  right: -2,
+                  width: 14,
+                  height: 14,
+                  bgcolor: isStreaming ? "#ff9800" : "#00e676",
                   borderRadius: "50%",
-                  border: "2px solid #fff",
+                  border: "2.5px solid #fff",
+                  boxShadow: `0 0 10px ${isStreaming ? "#ff9800" : "#00e676"}`,
+                  animation: isStreaming ? "pulse 1.5s infinite" : "none",
+                  "@keyframes pulse": {
+                    "0%": { boxShadow: `0 0 0 0 ${alpha("#ff9800", 0.7)}` },
+                    "70%": { boxShadow: `0 0 0 6px ${alpha("#ff9800", 0)}` },
+                    "100%": { boxShadow: `0 0 0 0 ${alpha("#ff9800", 0)}` },
+                  }
                 }}
               />
             </Box>
@@ -89,18 +108,18 @@ export const AgentHeader = ({
         <Box>
           <Typography
             variant="h6"
-            fontWeight={900}
+            fontWeight={800}
             sx={{
-              background: `linear-gradient(90deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,
+              background: `linear-gradient(90deg, #01579b, #00838f)`,
               backgroundClip: "text",
               color: "transparent",
-              letterSpacing: -0.5,
+              letterSpacing: -0.3,
             }}
           >
             TJWater Agent
           </Typography>
-          <Typography variant="caption" color="text.secondary" fontWeight={600}>
-            {isStreaming ? "正在分析管网任务" : "管网分析工作台"}
+          <Typography variant="caption" color="text.secondary" fontWeight={500}>
+            {isStreaming ? "正在思考分析任务..." : "基于大模型的水力分析引擎"}
           </Typography>
         </Box>
       </Stack>