OrgTJWater/TJWaterFrontend_Refine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化聊天框状态持久化，增强错误处理逻辑；优化信息可读性

Browse Source
This commit is contained in:
Huarch
2026-03-24 16:44:19 +08:00
parent 825acbf29c
commit 03a77f7368
1 changed files with 151 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/chat/GlobalChatbox.tsx
+151 -21
View File
@@ -25,6 +25,7 @@ import SendRounded from "@mui/icons-material/SendRounded";
import StopRounded from "@mui/icons-material/StopRounded";
import AutoAwesome from "@mui/icons-material/AutoAwesome"; // Sparkle icon for AI
import PersonRounded from "@mui/icons-material/PersonRounded";
import ErrorOutlineRounded from "@mui/icons-material/ErrorOutlineRounded";
// Logic
import { streamCopilotChat } from "@/lib/chatStream";
@@ -34,6 +35,7 @@ type Message = {
id: string;
role: "user" | "assistant";
content: string;
isError?: boolean;
};
type Props = {
@@ -43,6 +45,12 @@ type Props = {
// Utils
const createId = () => `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
const CHAT_STORAGE_KEY = "tjwater_copilot_chat_state_v1";
type PersistedChatState = {
messages: Message[];
conversationId?: string;
};
// --- Components ---
@@ -114,6 +122,7 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
const abortRef = useRef<AbortController | null>(null);
const bottomRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement | null>(null);
const hasHydratedRef = useRef(false);
const theme = useTheme();
const canSend = useMemo(() => input.trim().length > 0 && !isStreaming, [input, isStreaming]);
@@ -131,6 +140,40 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
return () => window.clearTimeout(timer);
}, [open]);
useEffect(() => {
try {
const storedRaw = window.localStorage.getItem(CHAT_STORAGE_KEY);
if (!storedRaw) {
hasHydratedRef.current = true;
return;
}
const parsed = JSON.parse(storedRaw) as PersistedChatState;
if (!Array.isArray(parsed.messages)) {
console.error("[GlobalChatbox] Invalid persisted messages format.");
window.localStorage.removeItem(CHAT_STORAGE_KEY);
hasHydratedRef.current = true;
return;
}
setMessages(parsed.messages);
setConversationId(parsed.conversationId);
} catch (error) {
console.error("[GlobalChatbox] Failed to read persisted chat state:", error);
window.localStorage.removeItem(CHAT_STORAGE_KEY);
} finally {
hasHydratedRef.current = true;
}
}, []);
useEffect(() => {
if (!hasHydratedRef.current) return;
const state: PersistedChatState = { messages, conversationId };
try {
window.localStorage.setItem(CHAT_STORAGE_KEY, JSON.stringify(state));
} catch (error) {
console.error("[GlobalChatbox] Failed to persist chat state:", error);
}
}, [messages, conversationId]);
const handleSend = async () => {
const prompt = input.trim();
if (!prompt || isStreaming) return;
@@ -159,7 +202,9 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
if (!conversationId && event.conversationId) setConversationId(event.conversationId);
setMessages((prev) =>
prev.map((m) =>
m.id === assistantId ? { ...m, content: m.content + event.content } : m
m.id === assistantId
? { ...m, content: m.content + event.content, isError: false }
: m
)
);
} else if (event.type === "done") {
@@ -169,7 +214,11 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
setMessages((prev) =>
prev.map((m) =>
m.id === assistantId
? { ...m, content: m.content || `错误：${event.message}` }
? {
...m,
content: m.content || `⚠️ **错误：** ${event.message}`,
isError: true,
}
: m
)
);
@@ -180,7 +229,11 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
} catch (error) {
if (abortRef.current?.signal.aborted) return;
setMessages((prev) =>
prev.map((m) => (m.id === assistantId ? { ...m, content: `错误：${String(error)}` } : m))
prev.map((m) =>
m.id === assistantId
? { ...m, content: `⚠️ **错误：** ${String(error)}`, isError: true }
: m
)
);
setIsStreaming(false);
} finally {
@@ -330,6 +383,7 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
{messages.map((message) => {
const isUser = message.role === "user";
const isErrorMessage = Boolean(message.isError);
return (
<motion.div
key={message.id}
@@ -347,54 +401,130 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
}}
>
{!isUser && (
<Avatar sx={{ width: 28, height: 28, bgcolor: alpha(theme.palette.secondary.main, 0.1), mb: 0.5 }}>
<AutoAwesome sx={{ fontSize: 16, color: "secondary.main" }} />
<Avatar sx={{ width: 28, height: 28, bgcolor: isErrorMessage ? alpha(theme.palette.error.main, 0.12) : alpha(theme.palette.secondary.main, 0.1), mb: 0.5 }}>
{isErrorMessage ? (
<ErrorOutlineRounded sx={{ fontSize: 16, color: "error.main" }} />
) : (
<AutoAwesome sx={{ fontSize: 16, color: "secondary.main" }} />
)}
</Avatar>
)}
<Paper
elevation={isUser ? 8 : 2}
elevation={isUser ? 8 : isErrorMessage ? 1 : 2}
sx={{
p: 2.5,
borderRadius: 4,
borderBottomRightRadius: isUser ? 4 : 24,
borderBottomLeftRadius: !isUser ? 4 : 24,
bgcolor: isUser ? "primary.main" : "#fff",
color: isUser ? "#fff" : "text.primary",
background: isUser ? `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})` : undefined,
bgcolor: isUser ? "primary.main" : isErrorMessage ? alpha(theme.palette.error.light, 0.18) : "#fff",
color: isUser ? "#fff" : isErrorMessage ? "error.dark" : "text.primary",
background: isUser
? `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`
: isErrorMessage
? `linear-gradient(135deg, ${alpha(theme.palette.error.light, 0.28)}, ${alpha(theme.palette.error.main, 0.12)})`
: undefined,
border: isErrorMessage ? `1px solid ${alpha(theme.palette.error.main, 0.35)}` : "none",
boxShadow: isUser
? `0 8px 24px -4px ${alpha(theme.palette.primary.main, 0.5)}`
: isErrorMessage
? `0 4px 16px -4px ${alpha(theme.palette.error.main, 0.2)}`
: `0 4px 16px -4px ${alpha("#000", 0.05)}`,
// Markdown Styles
"& p": { m: 0, lineHeight: 1.6 },
"& p": {
m: 0,
lineHeight: 1.75,
whiteSpace: "pre-wrap",
color: isUser ? alpha("#fff", 0.96) : isErrorMessage ? theme.palette.error.dark : theme.palette.text.primary,
},
"& h1, & h2, & h3, & h4, & h5, & h6": {
mt: 0.6,
mb: 0.6,
lineHeight: 1.35,
fontWeight: 700,
color: isUser ? "#fff" : isErrorMessage ? theme.palette.error.dark : theme.palette.text.primary,
},
"& h1": { fontSize: "1.2rem" },
"& h2": { fontSize: "1.12rem" },
"& h3": { fontSize: "1.04rem" },
"& a": {
color: isUser ? "#E3F2FD" : isErrorMessage ? theme.palette.error.main : theme.palette.primary.dark,
textDecoration: "underline",
wordBreak: "break-all",
textUnderlineOffset: "2px",
"&:hover": {
color: isUser ? "#fff" : isErrorMessage ? theme.palette.error.dark : theme.palette.primary.main,
},
},
"& code": {
fontFamily: "monospace",
bgcolor: isUser ? "rgba(255,255,255,0.2)" : alpha(theme.palette.grey[100], 0.8),
bgcolor: isUser
? "rgba(255,255,255,0.2)"
: isErrorMessage
? alpha(theme.palette.error.main, 0.08)
: alpha(theme.palette.grey[100], 0.95),
color: isUser ? "#fff" : isErrorMessage ? theme.palette.error.dark : alpha(theme.palette.text.primary, 0.95),
px: 0.8,
py: 0.2,
borderRadius: 1,
fontSize: "0.85em",
border: isUser ? "none" : `1px solid ${alpha(theme.palette.divider, 0.1)}`,
border: isUser
? "none"
: isErrorMessage
? `1px solid ${alpha(theme.palette.error.main, 0.25)}`
: `1px solid ${alpha(theme.palette.divider, 0.35)}`,
},
"& pre": {
bgcolor: isUser ? "rgba(0,0,0,0.25)" : "#222",
color: "#f8f8f2",
bgcolor: isUser
? "rgba(11, 18, 32, 0.56)"
: isErrorMessage
? alpha(theme.palette.error.main, 0.08)
: "#0F172A",
color: isUser
? "#F8FAFC"
: isErrorMessage
? theme.palette.error.dark
: "#E2E8F0",
p: 2,
borderRadius: 3,
overflowX: "auto",
my: 1.5,
fontSize: "0.85em",
border: "1px solid rgba(255,255,255,0.1)",
fontSize: "0.88em",
border: isErrorMessage
? `1px solid ${alpha(theme.palette.error.main, 0.3)}`
: `1px solid ${isUser ? alpha("#fff", 0.12) : alpha("#94A3B8", 0.35)}`,
},
"& pre code": {
bgcolor: "transparent",
border: "none",
px: 0,
py: 0,
color: "inherit",
},
"& ul, & ol": { pl: 2.5, my: 1 },
"& li": {
my: 0.35,
lineHeight: 1.65,
},
"& blockquote": {
m: 0,
my: 1,
pl: 1.5,
borderLeft: `3px solid ${isErrorMessage ? alpha(theme.palette.error.main, 0.5) : alpha(theme.palette.divider, 0.5)}`,
color: isUser ? alpha("#fff", 0.9) : isErrorMessage ? theme.palette.error.dark : "text.secondary",
bgcolor: isUser
? alpha("#fff", 0.08)
: isErrorMessage
? alpha(theme.palette.error.main, 0.06)
: alpha(theme.palette.grey[100], 0.7),
borderRadius: 1,
py: 0.5,
pr: 1,
},
}}
>
{isUser ? (
<Typography variant="body2" fontSize="0.95rem" sx={{ whiteSpace: "pre-wrap" }}>{message.content}</Typography>
) : (
<ReactMarkdown>{message.content || "..."}</ReactMarkdown>
)}
<ReactMarkdown>{message.content || "..."}</ReactMarkdown>
</Paper>
</motion.div>
);