重构会话标题编辑和删除确认逻辑；重构历史会话时间记录
This commit is contained in:
@@ -85,7 +85,6 @@ export const AgentHistoryPanel = ({
|
||||
const [keyword, setKeyword] = React.useState("");
|
||||
const [editingSessionId, setEditingSessionId] = React.useState<string | null>(null);
|
||||
const [draftTitle, setDraftTitle] = React.useState("");
|
||||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = React.useState(false);
|
||||
const [pendingDeleteSessionId, setPendingDeleteSessionId] = React.useState<string | null>(null);
|
||||
|
||||
const filteredSessions = React.useMemo(() => {
|
||||
@@ -300,7 +299,7 @@ export const AgentHistoryPanel = ({
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack direction="row" spacing={1} alignItems="flex-start">
|
||||
<Stack direction="row" spacing={1} alignItems="center">
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
{editingSessionId === session.id ? (
|
||||
<Stack direction="row" spacing={0.5} alignItems="center" sx={{ minHeight: 46 }}>
|
||||
@@ -386,6 +385,38 @@ export const AgentHistoryPanel = ({
|
||||
<CloseRounded sx={{ fontSize: 16 }} />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
) : pendingDeleteSessionId === session.id ? (
|
||||
<Stack direction="row" spacing={0.75} alignItems="center" sx={{ minHeight: 46 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: "50%",
|
||||
bgcolor: alpha("#ef5350", 0.15),
|
||||
color: "#ef5350",
|
||||
flexShrink: 0
|
||||
}}
|
||||
>
|
||||
<WarningRounded sx={{ fontSize: 13 }} />
|
||||
</Box>
|
||||
<Typography
|
||||
variant="body2"
|
||||
fontWeight={800}
|
||||
color="error.main"
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
确认删除此会话？
|
||||
</Typography>
|
||||
</Stack>
|
||||
) : (
|
||||
<Box sx={{ minHeight: 46, display: "flex", flexDirection: "column", justifyContent: "center" }}>
|
||||
<Typography
|
||||
@@ -409,8 +440,9 @@ export const AgentHistoryPanel = ({
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Stack direction="row" spacing={0.25} sx={{ display: editingSessionId === session.id ? 'none' : 'flex' }}>
|
||||
<Tooltip title="修改会话标题">
|
||||
{!(editingSessionId === session.id || pendingDeleteSessionId === session.id) && (
|
||||
<Stack direction="row" spacing={0.25}>
|
||||
<Tooltip title="修改会话标题">
|
||||
<span>
|
||||
<IconButton
|
||||
size="small"
|
||||
@@ -421,8 +453,8 @@ export const AgentHistoryPanel = ({
|
||||
}}
|
||||
disabled={isHydrating || editingSessionId === session.id}
|
||||
sx={{
|
||||
width: 24,
|
||||
height: 24,
|
||||
width: 28,
|
||||
height: 28,
|
||||
color: "text.secondary",
|
||||
"&:hover": {
|
||||
color: "primary.main",
|
||||
@@ -442,11 +474,11 @@ export const AgentHistoryPanel = ({
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
setPendingDeleteSessionId(session.id);
|
||||
setIsDeleteDialogOpen(true);
|
||||
}}
|
||||
disabled={isHydrating}
|
||||
sx={{
|
||||
width: 24,
|
||||
height: 24,
|
||||
width: 28,
|
||||
height: 28,
|
||||
color: "text.secondary",
|
||||
"&:hover": {
|
||||
color: "error.main",
|
||||
@@ -459,6 +491,48 @@ export const AgentHistoryPanel = ({
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{pendingDeleteSessionId === session.id && (
|
||||
<Stack direction="row" spacing={0.5} alignItems="center">
|
||||
<IconButton
|
||||
size="small"
|
||||
aria-label="确认删除"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onDeleteSession(session.id);
|
||||
setPendingDeleteSessionId(null);
|
||||
}}
|
||||
sx={{
|
||||
width: 28,
|
||||
height: 28,
|
||||
color: "error.main",
|
||||
bgcolor: alpha("#ef5350", 0.1),
|
||||
"&:hover": { bgcolor: alpha("#ef5350", 0.2) },
|
||||
}}
|
||||
>
|
||||
<CheckRounded sx={{ fontSize: 16 }} />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
aria-label="取消删除"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
setPendingDeleteSessionId(null);
|
||||
}}
|
||||
sx={{
|
||||
width: 28,
|
||||
height: 28,
|
||||
color: "text.secondary",
|
||||
bgcolor: alpha("#000", 0.05),
|
||||
"&:hover": { bgcolor: alpha("#000", 0.1) },
|
||||
}}
|
||||
>
|
||||
<CloseRounded sx={{ fontSize: 16 }} />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
@@ -470,97 +544,6 @@ export const AgentHistoryPanel = ({
|
||||
)}
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Dialog
|
||||
open={isDeleteDialogOpen}
|
||||
onClose={() => setIsDeleteDialogOpen(false)}
|
||||
sx={{ zIndex: (theme) => theme.zIndex.modal + 200 }}
|
||||
TransitionProps={{
|
||||
onExited: () => setPendingDeleteSessionId(null)
|
||||
}}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
borderRadius: 4,
|
||||
bgcolor: alpha("#fff", 0.85),
|
||||
backdropFilter: "blur(24px)",
|
||||
boxShadow: `0 16px 40px ${alpha("#000", 0.12)}`,
|
||||
border: `1px solid ${alpha("#fff", 0.6)}`,
|
||||
minWidth: 320,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1.5, pb: 1, pt: 3, px: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: "50%",
|
||||
bgcolor: alpha("#ef5350", 0.12),
|
||||
color: "#ef5350",
|
||||
}}
|
||||
>
|
||||
<WarningRounded sx={{ fontSize: 22 }} />
|
||||
</Box>
|
||||
<Typography component="span" variant="h6" fontWeight={800} color="text.primary">
|
||||
删除确认
|
||||
</Typography>
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ px: 3, pb: 2 }}>
|
||||
<DialogContentText color="text.secondary" sx={{ fontSize: "0.95rem" }}>
|
||||
确定要删除
|
||||
{pendingDeleteSession ? (
|
||||
<Typography component="span" fontWeight={700} color="text.primary">
|
||||
“{pendingDeleteSession.title}”
|
||||
</Typography>
|
||||
) : (
|
||||
"该会话"
|
||||
)}
|
||||
吗？
|
||||
<br />
|
||||
此操作不可撤销，删除后聊天记录将永久丢失。
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ px: 3, pb: 3, pt: 1 }}>
|
||||
<Button
|
||||
onClick={() => setIsDeleteDialogOpen(false)}
|
||||
sx={{
|
||||
color: "text.secondary",
|
||||
fontWeight: 600,
|
||||
borderRadius: 2.5,
|
||||
px: 2.5,
|
||||
"&:hover": { bgcolor: alpha("#000", 0.04) },
|
||||
}}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
if (pendingDeleteSessionId) {
|
||||
onDeleteSession(pendingDeleteSessionId);
|
||||
}
|
||||
setIsDeleteDialogOpen(false);
|
||||
}}
|
||||
sx={{
|
||||
bgcolor: "#ef5350",
|
||||
color: "#fff",
|
||||
fontWeight: 700,
|
||||
borderRadius: 2.5,
|
||||
px: 3,
|
||||
boxShadow: `0 4px 12px ${alpha("#ef5350", 0.3)}`,
|
||||
"&:hover": {
|
||||
bgcolor: "#e53935",
|
||||
boxShadow: `0 6px 16px ${alpha("#ef5350", 0.4)}`,
|
||||
},
|
||||
}}
|
||||
>
|
||||
确认删除
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user