优化聊天框状态持久化，添加 Markdown 样式支持；调整地图组件的层级，避免和聊天框冲突
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
import React, { useMemo, useRef, useState, useEffect } from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import markdownStyles from "./GlobalChatboxMarkdown.module.css";
|
||||
|
||||
// MUI
|
||||
import {
|
||||
@@ -52,6 +53,27 @@ type PersistedChatState = {
|
||||
conversationId?: string;
|
||||
};
|
||||
|
||||
const getInitialChatState = (): PersistedChatState => {
|
||||
if (typeof window === "undefined") {
|
||||
return { messages: [], conversationId: undefined };
|
||||
}
|
||||
try {
|
||||
const storedRaw = window.localStorage.getItem(CHAT_STORAGE_KEY);
|
||||
if (!storedRaw) return { messages: [], conversationId: undefined };
|
||||
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);
|
||||
return { messages: [], conversationId: undefined };
|
||||
}
|
||||
return { messages: parsed.messages, conversationId: parsed.conversationId };
|
||||
} catch (error) {
|
||||
console.error("[GlobalChatbox] Failed to read persisted chat state:", error);
|
||||
window.localStorage.removeItem(CHAT_STORAGE_KEY);
|
||||
return { messages: [], conversationId: undefined };
|
||||
}
|
||||
};
|
||||
|
||||
// --- Components ---
|
||||
|
||||
const TypingIndicator = () => {
|
||||
@@ -115,14 +137,20 @@ const Blob = ({ color, size, top, left, delay }: { color: string; size: number;
|
||||
);
|
||||
|
||||
export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const initialChatStateRef = useRef<PersistedChatState | null>(null);
|
||||
if (initialChatStateRef.current === null) {
|
||||
initialChatStateRef.current = getInitialChatState();
|
||||
}
|
||||
|
||||
const [messages, setMessages] = useState<Message[]>(initialChatStateRef.current.messages);
|
||||
const [input, setInput] = useState("");
|
||||
const [isStreaming, setIsStreaming] = useState(false);
|
||||
const [conversationId, setConversationId] = useState<string | undefined>(undefined);
|
||||
const [conversationId, setConversationId] = useState<string | undefined>(
|
||||
initialChatStateRef.current.conversationId
|
||||
);
|
||||
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]);
|
||||
@@ -136,36 +164,12 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
|
||||
if (!open) return;
|
||||
const timer = window.setTimeout(() => {
|
||||
inputRef.current?.focus();
|
||||
bottomRef.current?.scrollIntoView({ behavior: "auto" });
|
||||
}, 0);
|
||||
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));
|
||||
@@ -227,7 +231,12 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
if (abortRef.current?.signal.aborted) return;
|
||||
if (abortRef.current?.signal.aborted) {
|
||||
setMessages((prev) =>
|
||||
prev.filter((m) => !(m.id === assistantId && m.role === "assistant" && m.content.trim().length === 0))
|
||||
);
|
||||
return;
|
||||
}
|
||||
setMessages((prev) =>
|
||||
prev.map((m) =>
|
||||
m.id === assistantId
|
||||
@@ -250,8 +259,10 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
|
||||
return (
|
||||
<Drawer
|
||||
anchor="right"
|
||||
variant="persistent"
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
hideBackdrop
|
||||
sx={{ zIndex: (muiTheme) => muiTheme.zIndex.modal + 100 }}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
@@ -262,11 +273,6 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
|
||||
zIndex: (muiTheme) => muiTheme.zIndex.modal + 100,
|
||||
},
|
||||
}}
|
||||
ModalProps={{
|
||||
BackdropProps: {
|
||||
sx: { backdropFilter: "blur(6px)", bgcolor: alpha(theme.palette.background.default, 0.3) },
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
@@ -430,101 +436,76 @@ export const GlobalChatbox: React.FC<Props> = ({ open, onClose }) => {
|
||||
: 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.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)"
|
||||
: 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"
|
||||
: isErrorMessage
|
||||
? `1px solid ${alpha(theme.palette.error.main, 0.25)}`
|
||||
: `1px solid ${alpha(theme.palette.divider, 0.35)}`,
|
||||
},
|
||||
"& pre": {
|
||||
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.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,
|
||||
},
|
||||
"--chat-md-text": isUser
|
||||
? alpha("#fff", 0.96)
|
||||
: isErrorMessage
|
||||
? theme.palette.error.dark
|
||||
: "#1f2937",
|
||||
"--chat-md-heading": isUser
|
||||
? "#fff"
|
||||
: isErrorMessage
|
||||
? theme.palette.error.dark
|
||||
: "#111827",
|
||||
"--chat-md-link": isUser
|
||||
? "#E3F2FD"
|
||||
: isErrorMessage
|
||||
? theme.palette.error.main
|
||||
: "#7C3AED",
|
||||
"--chat-md-link-hover": isUser
|
||||
? "#fff"
|
||||
: isErrorMessage
|
||||
? theme.palette.error.dark
|
||||
: "#6D28D9",
|
||||
"--chat-md-inline-code-bg": isUser
|
||||
? "rgba(255,255,255,0.2)"
|
||||
: isErrorMessage
|
||||
? alpha(theme.palette.error.main, 0.08)
|
||||
: "#EEF2FF",
|
||||
"--chat-md-inline-code-border": isUser
|
||||
? alpha("#fff", 0.16)
|
||||
: isErrorMessage
|
||||
? alpha(theme.palette.error.main, 0.25)
|
||||
: "#CBD5E1",
|
||||
"--chat-md-inline-code-text": isUser
|
||||
? "#fff"
|
||||
: isErrorMessage
|
||||
? theme.palette.error.dark
|
||||
: "#334155",
|
||||
"--chat-md-pre-bg": isUser
|
||||
? "rgba(11, 18, 32, 0.56)"
|
||||
: isErrorMessage
|
||||
? alpha(theme.palette.error.main, 0.08)
|
||||
: "#111827",
|
||||
"--chat-md-pre-border": isUser
|
||||
? alpha("#fff", 0.12)
|
||||
: isErrorMessage
|
||||
? alpha(theme.palette.error.main, 0.3)
|
||||
: "#64748B",
|
||||
"--chat-md-pre-text": isUser
|
||||
? "#F8FAFC"
|
||||
: isErrorMessage
|
||||
? theme.palette.error.dark
|
||||
: "#E5E7EB",
|
||||
"--chat-md-quote-border": isErrorMessage
|
||||
? alpha(theme.palette.error.main, 0.5)
|
||||
: isUser
|
||||
? alpha("#fff", 0.5)
|
||||
: "#7C3AED",
|
||||
"--chat-md-quote-bg": isUser
|
||||
? alpha("#fff", 0.08)
|
||||
: isErrorMessage
|
||||
? alpha(theme.palette.error.main, 0.06)
|
||||
: "#F5F3FF",
|
||||
"--chat-md-quote-text": isUser
|
||||
? alpha("#fff", 0.9)
|
||||
: isErrorMessage
|
||||
? theme.palette.error.dark
|
||||
: "#475569",
|
||||
}}
|
||||
>
|
||||
<ReactMarkdown>{message.content || "..."}</ReactMarkdown>
|
||||
<div className={markdownStyles.markdown}>
|
||||
<ReactMarkdown>{message.content || "..."}</ReactMarkdown>
|
||||
</div>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user