606 lines
20 KiB
TypeScript
606 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Chip,
|
|
CircularProgress,
|
|
Collapse,
|
|
IconButton,
|
|
Stack,
|
|
Typography,
|
|
alpha,
|
|
useTheme,
|
|
} from "@mui/material";
|
|
import type { Theme } from "@mui/material/styles";
|
|
import TerminalRounded from "@mui/icons-material/TerminalRounded";
|
|
import FolderOpenRounded from "@mui/icons-material/FolderOpenRounded";
|
|
import CheckCircleRounded from "@mui/icons-material/CheckCircleRounded";
|
|
import BlockRounded from "@mui/icons-material/BlockRounded";
|
|
import PushPinRounded from "@mui/icons-material/PushPinRounded";
|
|
import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
|
|
import KeyboardArrowUpRounded from "@mui/icons-material/KeyboardArrowUpRounded";
|
|
import VerifiedUserRounded from "@mui/icons-material/VerifiedUserRounded";
|
|
|
|
import type { PermissionReply } from "@/lib/chatStream";
|
|
import type { Message } from "./GlobalChatbox.types";
|
|
|
|
const getPermissionTitle = (permission: NonNullable<Message["permissions"]>[number]) => {
|
|
if (permission.permission === "external_directory") return "访问工作区外目录";
|
|
if (permission.permission === "bash") return "执行终端命令";
|
|
if (permission.permission === "edit") return "修改文件内容";
|
|
return permission.permission || "工具权限请求";
|
|
};
|
|
|
|
const getPermissionPrimaryValue = (
|
|
permission: NonNullable<Message["permissions"]>[number],
|
|
) => {
|
|
if (typeof permission.target === "string" && permission.target.trim()) {
|
|
return permission.target.trim();
|
|
}
|
|
return permission.patterns[0] ?? permission.permission;
|
|
};
|
|
|
|
const PermissionIcon = ({
|
|
permission,
|
|
}: {
|
|
permission: NonNullable<Message["permissions"]>[number];
|
|
}) => {
|
|
if (permission.permission === "bash") {
|
|
return <TerminalRounded sx={{ fontSize: 22 }} />;
|
|
}
|
|
if (permission.permission === "external_directory") {
|
|
return <FolderOpenRounded sx={{ fontSize: 22 }} />;
|
|
}
|
|
return <VerifiedUserRounded sx={{ fontSize: 22 }} />;
|
|
};
|
|
|
|
const getPermissionStatusLabel = (status: NonNullable<Message["permissions"]>[number]["status"]) => {
|
|
if (status === "approved_always") return "已始终允许";
|
|
if (status === "approved_once") return "已允许一次";
|
|
if (status === "rejected") return "已拒绝";
|
|
if (status === "aborted") return "已中断";
|
|
if (status === "error") return "提交失败";
|
|
if (status === "submitting") return "提交中";
|
|
return "等待确认";
|
|
};
|
|
|
|
const pendingPermissionColor = "#f9a825";
|
|
const approvedOncePermissionColor = "#00838f";
|
|
|
|
const getPermissionStatusColor = (
|
|
status: NonNullable<Message["permissions"]>[number]["status"],
|
|
theme: Theme,
|
|
) => {
|
|
if (status === "approved_once") return approvedOncePermissionColor;
|
|
if (status === "approved_always") return theme.palette.success.main;
|
|
if (status === "rejected" || status === "error") return theme.palette.error.main;
|
|
if (status === "aborted") return theme.palette.text.secondary;
|
|
return pendingPermissionColor;
|
|
};
|
|
|
|
const getPermissionStatusTextColor = (
|
|
status: NonNullable<Message["permissions"]>[number]["status"],
|
|
theme: Theme,
|
|
) => {
|
|
if (status === "approved_once") return "#006c78";
|
|
if (status === "approved_always") return theme.palette.success.dark;
|
|
if (status === "rejected" || status === "error") return theme.palette.error.main;
|
|
if (status === "aborted") return theme.palette.text.secondary;
|
|
return "#8a5a00";
|
|
};
|
|
|
|
const PermissionRequestCard = ({
|
|
permission,
|
|
isRunning,
|
|
onReply,
|
|
}: {
|
|
permission: NonNullable<Message["permissions"]>[number];
|
|
isRunning: boolean;
|
|
onReply: (requestId: string, reply: PermissionReply) => void;
|
|
}) => {
|
|
const theme = useTheme();
|
|
const isPending =
|
|
isRunning && (permission.status === "pending" || permission.status === "error");
|
|
const isSubmitting = isRunning && permission.status === "submitting";
|
|
const primaryValue = getPermissionPrimaryValue(permission);
|
|
const accentColor = getPermissionStatusColor(permission.status, theme);
|
|
const statusTextColor = getPermissionStatusTextColor(permission.status, theme);
|
|
const statusLabel = getPermissionStatusLabel(permission.status);
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
borderRadius: 3,
|
|
overflow: "hidden",
|
|
border: `1px solid ${alpha("#fff", 0.72)}`,
|
|
bgcolor: alpha("#fff", 0.5),
|
|
boxShadow: `0 8px 24px ${alpha("#000", 0.05)}`,
|
|
backdropFilter: "blur(20px)",
|
|
position: "relative",
|
|
"&::before": {
|
|
content: '""',
|
|
position: "absolute",
|
|
inset: "10px auto 10px 0",
|
|
width: 3,
|
|
borderRadius: "0 999px 999px 0",
|
|
bgcolor: accentColor,
|
|
},
|
|
}}
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
spacing={1}
|
|
alignItems="center"
|
|
sx={{
|
|
px: 1.5,
|
|
py: 1.25,
|
|
pl: 1.75,
|
|
borderBottom: `1px solid ${alpha("#000", 0.05)}`,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: "50%",
|
|
display: "grid",
|
|
placeItems: "center",
|
|
flex: "0 0 auto",
|
|
color: accentColor,
|
|
bgcolor: alpha(accentColor, 0.1),
|
|
border: `1px solid ${alpha(accentColor, 0.16)}`,
|
|
}}
|
|
>
|
|
<PermissionIcon permission={permission} />
|
|
</Box>
|
|
<Box sx={{ minWidth: 0, flex: 1 }}>
|
|
<Typography variant="subtitle2" fontWeight={800} noWrap sx={{ lineHeight: 1.25 }}>
|
|
{getPermissionTitle(permission)}
|
|
</Typography>
|
|
</Box>
|
|
<Chip
|
|
size="small"
|
|
label={statusLabel}
|
|
sx={{
|
|
height: 24,
|
|
fontSize: "0.7rem",
|
|
fontWeight: 800,
|
|
borderRadius: "12px",
|
|
bgcolor: alpha(accentColor, 0.12),
|
|
color: statusTextColor,
|
|
"& .MuiChip-label": { px: 1 },
|
|
}}
|
|
/>
|
|
</Stack>
|
|
|
|
<Stack spacing={1.15} sx={{ px: 1.5, pt: 1.25, pb: 1.35, pl: 1.75 }}>
|
|
<Box
|
|
sx={{
|
|
px: 1.25,
|
|
py: 1,
|
|
borderRadius: 2.5,
|
|
bgcolor: alpha("#000", 0.025),
|
|
border: `1px solid ${alpha("#000", 0.045)}`,
|
|
}}
|
|
>
|
|
<Typography variant="caption" color="text.secondary" fontWeight={800}>
|
|
请求目标
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
color="text.primary"
|
|
fontFamily={permission.permission === "bash" ? "monospace" : undefined}
|
|
sx={{
|
|
mt: 0.25,
|
|
lineHeight: 1.55,
|
|
wordBreak: "break-word",
|
|
whiteSpace: "pre-wrap",
|
|
}}
|
|
>
|
|
{primaryValue}
|
|
</Typography>
|
|
</Box>
|
|
</Stack>
|
|
|
|
{permission.error ? (
|
|
<Box sx={{ px: 1.5, pb: isPending || isSubmitting ? 1 : 1.35, pl: 1.75 }}>
|
|
<Typography
|
|
variant="caption"
|
|
color="error.main"
|
|
sx={{
|
|
display: "block",
|
|
px: 1.25,
|
|
py: 0.75,
|
|
borderRadius: 2,
|
|
bgcolor: alpha(theme.palette.error.main, 0.06),
|
|
wordBreak: "break-word",
|
|
}}
|
|
>
|
|
{permission.error}
|
|
</Typography>
|
|
</Box>
|
|
) : null}
|
|
|
|
{isPending || isSubmitting ? (
|
|
<Stack
|
|
direction="row"
|
|
spacing={1}
|
|
flexWrap="wrap"
|
|
useFlexGap
|
|
sx={{ px: 1.5, pb: 1.35, pl: 1.75, pt: 0 }}
|
|
>
|
|
<Button
|
|
size="small"
|
|
variant="contained"
|
|
disableElevation
|
|
disabled={isSubmitting}
|
|
onClick={() => onReply(permission.requestId, "once")}
|
|
startIcon={
|
|
isSubmitting ? (
|
|
<CircularProgress size={14} color="inherit" />
|
|
) : (
|
|
<CheckCircleRounded fontSize="small" />
|
|
)
|
|
}
|
|
sx={{
|
|
minWidth: 94,
|
|
height: 34,
|
|
borderRadius: "17px",
|
|
bgcolor: "#00838f",
|
|
fontWeight: 800,
|
|
fontSize: "0.78rem",
|
|
textTransform: "none",
|
|
boxShadow: `0 4px 12px ${alpha("#00838f", 0.24)}`,
|
|
"&:hover": {
|
|
bgcolor: "#006c78",
|
|
boxShadow: `0 6px 16px ${alpha("#00838f", 0.28)}`,
|
|
},
|
|
}}
|
|
>
|
|
允许一次
|
|
</Button>
|
|
<Button
|
|
size="small"
|
|
variant="outlined"
|
|
disabled={isSubmitting}
|
|
onClick={() => onReply(permission.requestId, "always")}
|
|
startIcon={<PushPinRounded fontSize="small" />}
|
|
sx={{
|
|
height: 34,
|
|
borderRadius: "17px",
|
|
px: 1.5,
|
|
fontWeight: 800,
|
|
fontSize: "0.78rem",
|
|
textTransform: "none",
|
|
color: "#00838f",
|
|
borderColor: alpha("#00838f", 0.24),
|
|
bgcolor: alpha("#fff", 0.45),
|
|
"&:hover": {
|
|
borderColor: alpha("#00838f", 0.36),
|
|
bgcolor: alpha("#00838f", 0.08),
|
|
},
|
|
}}
|
|
>
|
|
始终允许
|
|
</Button>
|
|
<Button
|
|
size="small"
|
|
color="error"
|
|
variant="outlined"
|
|
disabled={isSubmitting}
|
|
onClick={() => onReply(permission.requestId, "reject")}
|
|
startIcon={<BlockRounded fontSize="small" />}
|
|
sx={{
|
|
height: 34,
|
|
borderRadius: "17px",
|
|
px: 1.5,
|
|
fontWeight: 800,
|
|
fontSize: "0.78rem",
|
|
textTransform: "none",
|
|
borderColor: alpha(theme.palette.error.main, 0.22),
|
|
bgcolor: alpha("#fff", 0.45),
|
|
"&:hover": {
|
|
borderColor: alpha(theme.palette.error.main, 0.34),
|
|
bgcolor: alpha(theme.palette.error.main, 0.07),
|
|
},
|
|
}}
|
|
>
|
|
拒绝
|
|
</Button>
|
|
</Stack>
|
|
) : null}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export const PermissionRequestGroup = ({
|
|
permissions,
|
|
isRunning,
|
|
onReply,
|
|
}: {
|
|
permissions: NonNullable<Message["permissions"]>;
|
|
isRunning: boolean;
|
|
onReply: (requestId: string, reply: PermissionReply) => void;
|
|
}) => {
|
|
const theme = useTheme();
|
|
const onceCount = permissions.filter((permission) => permission.status === "approved_once").length;
|
|
const alwaysCount = permissions.filter((permission) => permission.status === "approved_always").length;
|
|
const rejectedCount = permissions.filter((permission) => permission.status === "rejected").length;
|
|
const abortedCount = permissions.filter((permission) => permission.status === "aborted").length;
|
|
const pendingCount = permissions.filter(
|
|
(permission) =>
|
|
permission.status === "pending" ||
|
|
permission.status === "submitting" ||
|
|
permission.status === "error",
|
|
).length;
|
|
const hasPendingPermissions = pendingCount > 0;
|
|
const [expanded, setExpanded] = React.useState(false);
|
|
const latestPermissions = permissions.slice(-3);
|
|
const pendingPermissions = permissions.filter(
|
|
(permission) =>
|
|
permission.status === "pending" ||
|
|
permission.status === "submitting" ||
|
|
permission.status === "error",
|
|
);
|
|
const summaryItems = [
|
|
{ label: "共", value: permissions.length, color: theme.palette.text.secondary },
|
|
{ label: "允许一次", value: onceCount, color: getPermissionStatusColor("approved_once", theme), textColor: getPermissionStatusTextColor("approved_once", theme) },
|
|
{ label: "始终允许", value: alwaysCount, color: getPermissionStatusColor("approved_always", theme), textColor: getPermissionStatusTextColor("approved_always", theme) },
|
|
{ label: "拒绝", value: rejectedCount, color: getPermissionStatusColor("rejected", theme), textColor: getPermissionStatusTextColor("rejected", theme) },
|
|
{ label: "中断", value: abortedCount, color: getPermissionStatusColor("aborted", theme), textColor: getPermissionStatusTextColor("aborted", theme) },
|
|
];
|
|
const chipColor =
|
|
pendingCount > 0
|
|
? getPermissionStatusColor("pending", theme)
|
|
: abortedCount > 0
|
|
? getPermissionStatusColor("aborted", theme)
|
|
: rejectedCount > 0
|
|
? getPermissionStatusColor("rejected", theme)
|
|
: getPermissionStatusColor("approved_always", theme);
|
|
const chipTextColor =
|
|
pendingCount > 0
|
|
? getPermissionStatusTextColor("pending", theme)
|
|
: abortedCount > 0
|
|
? getPermissionStatusTextColor("aborted", theme)
|
|
: rejectedCount > 0
|
|
? getPermissionStatusTextColor("rejected", theme)
|
|
: getPermissionStatusTextColor("approved_always", theme);
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
borderRadius: 3,
|
|
overflow: "hidden",
|
|
border: `1px solid ${alpha("#fff", 0.72)}`,
|
|
bgcolor: alpha("#fff", 0.46),
|
|
boxShadow: `0 8px 24px ${alpha("#000", 0.045)}`,
|
|
backdropFilter: "blur(20px)",
|
|
}}
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
spacing={1}
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={() => setExpanded((value) => !value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter" || event.key === " ") {
|
|
event.preventDefault();
|
|
setExpanded((value) => !value);
|
|
}
|
|
}}
|
|
sx={{
|
|
px: 1.5,
|
|
py: 1.15,
|
|
cursor: "pointer",
|
|
transition: "background-color 0.2s ease",
|
|
"&:hover": { bgcolor: alpha("#000", 0.025) },
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: 30,
|
|
height: 30,
|
|
borderRadius: "50%",
|
|
display: "grid",
|
|
placeItems: "center",
|
|
flex: "0 0 auto",
|
|
color: chipColor,
|
|
bgcolor: alpha(chipColor, 0.1),
|
|
border: `1px solid ${alpha(chipColor, 0.15)}`,
|
|
}}
|
|
>
|
|
<VerifiedUserRounded sx={{ fontSize: 18 }} />
|
|
</Box>
|
|
<Box sx={{ minWidth: 0, flex: 1 }}>
|
|
<Typography variant="subtitle2" fontWeight={800} noWrap sx={{ lineHeight: 1.25 }}>
|
|
权限请求
|
|
</Typography>
|
|
<Stack
|
|
direction="row"
|
|
flexWrap="wrap"
|
|
gap={0.6}
|
|
sx={{ mt: 0.55, maxHeight: 48, overflow: "hidden" }}
|
|
>
|
|
{summaryItems.map((item) => (
|
|
<Box
|
|
key={item.label}
|
|
component="span"
|
|
sx={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: 0.45,
|
|
height: 22,
|
|
px: 0.8,
|
|
borderRadius: "11px",
|
|
bgcolor: alpha(item.color, 0.08),
|
|
border: `1px solid ${alpha(item.color, 0.12)}`,
|
|
color: "textColor" in item ? item.textColor : item.color,
|
|
fontSize: "0.7rem",
|
|
fontWeight: 800,
|
|
lineHeight: 1,
|
|
whiteSpace: "nowrap",
|
|
}}
|
|
>
|
|
<Box
|
|
component="span"
|
|
sx={{
|
|
color: "textColor" in item ? item.textColor : item.color,
|
|
fontWeight: 700,
|
|
}}
|
|
>
|
|
{item.label}
|
|
</Box>
|
|
<Box component="span">{item.value} 项</Box>
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
{isRunning && pendingCount > 0 ? (
|
|
<Chip
|
|
size="small"
|
|
label={`待确认 ${pendingCount} 项`}
|
|
sx={{
|
|
height: 24,
|
|
borderRadius: "12px",
|
|
fontSize: "0.7rem",
|
|
fontWeight: 800,
|
|
color: chipTextColor,
|
|
bgcolor: alpha(chipColor, 0.1),
|
|
"& .MuiChip-label": { px: 1 },
|
|
}}
|
|
/>
|
|
) : null}
|
|
<IconButton
|
|
size="small"
|
|
aria-label={expanded ? "收起权限请求" : "展开权限请求"}
|
|
sx={{
|
|
width: 28,
|
|
height: 28,
|
|
color: "text.secondary",
|
|
bgcolor: alpha("#000", 0.035),
|
|
"&:hover": { bgcolor: alpha("#000", 0.07) },
|
|
}}
|
|
>
|
|
{expanded ? (
|
|
<KeyboardArrowUpRounded sx={{ fontSize: 18 }} />
|
|
) : (
|
|
<KeyboardArrowDownRounded sx={{ fontSize: 18 }} />
|
|
)}
|
|
</IconButton>
|
|
</Stack>
|
|
|
|
{!expanded && isRunning && !hasPendingPermissions && latestPermissions.length > 0 ? (
|
|
<Stack spacing={0} sx={{ px: 1.5, pb: 1.25 }}>
|
|
{latestPermissions.map((permission, index) => {
|
|
const primaryValue = getPermissionPrimaryValue(permission);
|
|
const isLast = index === latestPermissions.length - 1;
|
|
const itemColor = getPermissionStatusColor(permission.status, theme);
|
|
const itemTextColor = getPermissionStatusTextColor(permission.status, theme);
|
|
|
|
return (
|
|
<Stack
|
|
key={permission.requestId}
|
|
direction="row"
|
|
spacing={1}
|
|
alignItems="center"
|
|
sx={{
|
|
py: 0.8,
|
|
borderTop: index === 0 ? `1px solid ${alpha(chipColor, 0.1)}` : "none",
|
|
borderBottom: isLast ? "none" : `1px solid ${alpha("#000", 0.045)}`,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: 24,
|
|
height: 24,
|
|
borderRadius: "50%",
|
|
display: "grid",
|
|
placeItems: "center",
|
|
flex: "0 0 auto",
|
|
color: itemColor,
|
|
bgcolor: alpha(itemColor, 0.08),
|
|
}}
|
|
>
|
|
<PermissionIcon permission={permission} />
|
|
</Box>
|
|
<Box sx={{ minWidth: 0, flex: 1 }}>
|
|
<Typography variant="caption" color="text.primary" fontWeight={750} noWrap sx={{ display: "block" }}>
|
|
{getPermissionTitle(permission)}
|
|
</Typography>
|
|
<Typography
|
|
variant="caption"
|
|
color="text.secondary"
|
|
noWrap
|
|
title={primaryValue}
|
|
sx={{
|
|
display: "block",
|
|
fontFamily: permission.permission === "bash" ? "monospace" : undefined,
|
|
}}
|
|
>
|
|
{primaryValue}
|
|
</Typography>
|
|
</Box>
|
|
<Chip
|
|
size="small"
|
|
label={getPermissionStatusLabel(permission.status)}
|
|
sx={{
|
|
height: 22,
|
|
borderRadius: "11px",
|
|
fontSize: "0.68rem",
|
|
fontWeight: 800,
|
|
color: itemTextColor,
|
|
bgcolor: alpha(itemColor, 0.08),
|
|
"& .MuiChip-label": { px: 0.85 },
|
|
}}
|
|
/>
|
|
</Stack>
|
|
);
|
|
})}
|
|
</Stack>
|
|
) : null}
|
|
|
|
<AnimatePresence initial={false}>
|
|
{!expanded && isRunning && hasPendingPermissions ? (
|
|
<motion.div
|
|
key="pending-permissions"
|
|
initial={{ opacity: 0, y: -10, height: 0 }}
|
|
animate={{ opacity: 1, y: 0, height: "auto" }}
|
|
exit={{ opacity: 0, y: -8, height: 0 }}
|
|
transition={{ duration: 0.2, ease: "easeOut" }}
|
|
style={{ overflow: "hidden" }}
|
|
>
|
|
<Stack spacing={1} sx={{ px: 1.25, pb: 1.25 }}>
|
|
{pendingPermissions.map((permission) => (
|
|
<PermissionRequestCard
|
|
key={permission.requestId}
|
|
permission={permission}
|
|
isRunning={isRunning}
|
|
onReply={onReply}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
</motion.div>
|
|
) : null}
|
|
</AnimatePresence>
|
|
|
|
<Collapse in={expanded} timeout="auto" unmountOnExit>
|
|
<Stack spacing={1} sx={{ px: 1.25, pb: 1.25 }}>
|
|
{permissions.map((permission) => (
|
|
<PermissionRequestCard
|
|
key={permission.requestId}
|
|
permission={permission}
|
|
isRunning={isRunning}
|
|
onReply={onReply}
|
|
/>
|
|
))}
|
|
</Stack>
|
|
</Collapse>
|
|
</Box>
|
|
);
|
|
};
|