565 lines
20 KiB
TypeScript
565 lines
20 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
import {
|
||
Box,
|
||
Button,
|
||
Checkbox,
|
||
Chip,
|
||
CircularProgress,
|
||
Collapse,
|
||
FormControlLabel,
|
||
Stack,
|
||
TextField,
|
||
Typography,
|
||
alpha,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
import type { Theme } from "@mui/material/styles";
|
||
import CheckCircleRounded from "@mui/icons-material/CheckCircleRounded";
|
||
import EditNoteRounded from "@mui/icons-material/EditNoteRounded";
|
||
import HelpOutlineRounded from "@mui/icons-material/HelpOutlineRounded";
|
||
import RadioButtonUncheckedRounded from "@mui/icons-material/RadioButtonUncheckedRounded";
|
||
|
||
import type { Message } from "./GlobalChatbox.types";
|
||
|
||
const getQuestionStatusLabel = (
|
||
status: NonNullable<Message["questions"]>[number]["status"],
|
||
) => {
|
||
if (status === "answered") return "已回答";
|
||
if (status === "rejected") return "已跳过";
|
||
if (status === "error") return "提交失败";
|
||
if (status === "submitting") return "提交中";
|
||
return "等待回答";
|
||
};
|
||
|
||
const getQuestionStatusColor = (
|
||
status: NonNullable<Message["questions"]>[number]["status"],
|
||
theme: Theme,
|
||
) => {
|
||
if (status === "answered") return theme.palette.success.main;
|
||
if (status === "rejected") return theme.palette.text.secondary;
|
||
if (status === "error") return theme.palette.error.main;
|
||
return "#0288d1";
|
||
};
|
||
|
||
const QuestionRequestCard = ({
|
||
questionRequest,
|
||
onReply,
|
||
onReject,
|
||
}: {
|
||
questionRequest: NonNullable<Message["questions"]>[number];
|
||
onReply: (requestId: string, answers: string[][]) => void;
|
||
onReject: (requestId: string) => void;
|
||
}) => {
|
||
const theme = useTheme();
|
||
const isEditable =
|
||
questionRequest.status === "pending" || questionRequest.status === "error";
|
||
const isSubmitting = questionRequest.status === "submitting";
|
||
const statusColor = getQuestionStatusColor(questionRequest.status, theme);
|
||
const [selected, setSelected] = React.useState<Record<number, string[]>>({});
|
||
const [customSelected, setCustomSelected] = React.useState<Record<number, boolean>>({});
|
||
const [custom, setCustom] = React.useState<Record<number, string>>({});
|
||
|
||
const answers = React.useMemo(
|
||
() =>
|
||
questionRequest.questions.map((question, index) => {
|
||
const selectedAnswers = selected[index] ?? [];
|
||
const isCustomSelected =
|
||
customSelected[index] === true ||
|
||
(question.custom !== false && question.options.length === 0);
|
||
const customAnswer = custom[index]?.trim();
|
||
return isCustomSelected && customAnswer
|
||
? [...selectedAnswers, customAnswer]
|
||
: selectedAnswers;
|
||
}),
|
||
[custom, customSelected, questionRequest.questions, selected],
|
||
);
|
||
|
||
const canSubmit =
|
||
isEditable &&
|
||
questionRequest.questions.length > 0 &&
|
||
questionRequest.questions.every((_, index) => {
|
||
const answer = answers[index] ?? [];
|
||
return answer.some((item) => item.trim().length > 0);
|
||
});
|
||
|
||
const answerSummary = (questionRequest.answers ?? [])
|
||
.map((answer) => answer.join("、"))
|
||
.filter(Boolean)
|
||
.join("；");
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
borderRadius: 3,
|
||
overflow: "hidden",
|
||
border: `1px solid ${alpha("#fff", 0.72)}`,
|
||
bgcolor: alpha("#fff", 0.52),
|
||
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: statusColor,
|
||
},
|
||
}}
|
||
>
|
||
<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: statusColor,
|
||
bgcolor: alpha(statusColor, 0.1),
|
||
border: `1px solid ${alpha(statusColor, 0.16)}`,
|
||
}}
|
||
>
|
||
<HelpOutlineRounded sx={{ fontSize: 21 }} />
|
||
</Box>
|
||
<Box sx={{ minWidth: 0, flex: 1 }}>
|
||
<Typography variant="subtitle2" fontWeight={800} noWrap sx={{ lineHeight: 1.25 }}>
|
||
需要补充信息
|
||
</Typography>
|
||
</Box>
|
||
<Chip
|
||
size="small"
|
||
label={getQuestionStatusLabel(questionRequest.status)}
|
||
sx={{
|
||
height: 24,
|
||
fontSize: "0.7rem",
|
||
fontWeight: 800,
|
||
borderRadius: "12px",
|
||
bgcolor: alpha(statusColor, 0.12),
|
||
color: statusColor,
|
||
"& .MuiChip-label": { px: 1 },
|
||
}}
|
||
/>
|
||
</Stack>
|
||
|
||
<Stack spacing={1.3} sx={{ px: 1.5, py: 1.35, pl: 1.75 }}>
|
||
{questionRequest.questions.map((question, index) => {
|
||
const selectedAnswers = selected[index] ?? [];
|
||
const isCustomEnabled = question.custom !== false;
|
||
const isCustomSelected =
|
||
customSelected[index] === true ||
|
||
(isCustomEnabled && question.options.length === 0);
|
||
const setQuestionAnswers = (nextAnswers: string[]) => {
|
||
setSelected((current) => ({
|
||
...current,
|
||
[index]: nextAnswers,
|
||
}));
|
||
};
|
||
const setQuestionCustomSelected = (checked: boolean) => {
|
||
setCustomSelected((current) => ({
|
||
...current,
|
||
[index]: checked,
|
||
}));
|
||
};
|
||
|
||
return (
|
||
<Box
|
||
key={`${question.header}-${index}`}
|
||
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}>
|
||
{question.header || `问题 ${index + 1}`}
|
||
</Typography>
|
||
<Typography
|
||
variant="body2"
|
||
color="text.primary"
|
||
sx={{ mt: 0.35, lineHeight: 1.55, wordBreak: "break-word" }}
|
||
>
|
||
{question.question}
|
||
</Typography>
|
||
|
||
{question.options.length ? (
|
||
<Stack spacing={0.75} sx={{ mt: 1 }}>
|
||
{question.options.map((option) => {
|
||
const checked = selectedAnswers.includes(option.label);
|
||
if (question.multiple) {
|
||
return (
|
||
<FormControlLabel
|
||
key={option.label}
|
||
disabled={!isEditable || isSubmitting}
|
||
control={
|
||
<Checkbox
|
||
size="small"
|
||
checked={checked}
|
||
onChange={(event) => {
|
||
if (event.target.checked) {
|
||
setQuestionAnswers([...selectedAnswers, option.label]);
|
||
} else {
|
||
setQuestionAnswers(
|
||
selectedAnswers.filter((item) => item !== option.label),
|
||
);
|
||
}
|
||
}}
|
||
/>
|
||
}
|
||
label={
|
||
<Box>
|
||
<Typography variant="body2" fontWeight={750}>
|
||
{option.label}
|
||
</Typography>
|
||
{option.description ? (
|
||
<Typography variant="caption" color="text.secondary">
|
||
{option.description}
|
||
</Typography>
|
||
) : null}
|
||
</Box>
|
||
}
|
||
sx={{ alignItems: "flex-start", m: 0 }}
|
||
/>
|
||
);
|
||
}
|
||
return (
|
||
<Button
|
||
key={option.label}
|
||
size="small"
|
||
variant={checked ? "contained" : "outlined"}
|
||
disabled={!isEditable || isSubmitting}
|
||
onClick={() => {
|
||
setQuestionAnswers([option.label]);
|
||
setQuestionCustomSelected(false);
|
||
}}
|
||
startIcon={
|
||
checked ? (
|
||
<CheckCircleRounded fontSize="small" />
|
||
) : (
|
||
<RadioButtonUncheckedRounded fontSize="small" />
|
||
)
|
||
}
|
||
sx={{
|
||
justifyContent: "flex-start",
|
||
minHeight: 38,
|
||
borderRadius: 2,
|
||
textTransform: "none",
|
||
fontWeight: 800,
|
||
bgcolor: checked ? "#0288d1" : alpha("#fff", 0.45),
|
||
borderColor: checked ? "#0288d1" : alpha("#0288d1", 0.22),
|
||
"&:hover": {
|
||
bgcolor: checked ? "#0277bd" : alpha("#0288d1", 0.08),
|
||
},
|
||
}}
|
||
>
|
||
<Box sx={{ textAlign: "left", minWidth: 0 }}>
|
||
<Typography variant="body2" fontWeight={800}>
|
||
{option.label}
|
||
</Typography>
|
||
{option.description ? (
|
||
<Typography
|
||
variant="caption"
|
||
sx={{ display: "block", opacity: checked ? 0.86 : 0.72 }}
|
||
>
|
||
{option.description}
|
||
</Typography>
|
||
) : null}
|
||
</Box>
|
||
</Button>
|
||
);
|
||
})}
|
||
{isCustomEnabled ? (
|
||
question.multiple ? (
|
||
<FormControlLabel
|
||
disabled={!isEditable || isSubmitting}
|
||
control={
|
||
<Checkbox
|
||
size="small"
|
||
checked={isCustomSelected}
|
||
onChange={(event) =>
|
||
setQuestionCustomSelected(event.target.checked)
|
||
}
|
||
sx={{
|
||
p: 0.5,
|
||
color: alpha("#0288d1", 0.55),
|
||
"&.Mui-checked": { color: "#0288d1" },
|
||
}}
|
||
/>
|
||
}
|
||
label={
|
||
<Stack direction="row" spacing={0.75} alignItems="center">
|
||
<EditNoteRounded sx={{ fontSize: 18, color: "#0288d1" }} />
|
||
<Typography variant="body2" fontWeight={800}>
|
||
自定义回答
|
||
</Typography>
|
||
</Stack>
|
||
}
|
||
sx={{
|
||
alignItems: "center",
|
||
minHeight: 38,
|
||
m: 0,
|
||
px: 0.75,
|
||
py: 0.25,
|
||
borderRadius: 2,
|
||
border: `1px solid ${
|
||
isCustomSelected ? "#0288d1" : alpha("#0288d1", 0.18)
|
||
}`,
|
||
bgcolor: isCustomSelected
|
||
? alpha("#0288d1", 0.1)
|
||
: alpha("#fff", 0.45),
|
||
transition: "background-color 0.18s ease, border-color 0.18s ease",
|
||
"&:hover": {
|
||
bgcolor: isCustomSelected
|
||
? alpha("#0288d1", 0.13)
|
||
: alpha("#0288d1", 0.07),
|
||
},
|
||
"& .MuiFormControlLabel-label": {
|
||
color: isCustomSelected ? "#0277bd" : "text.primary",
|
||
},
|
||
}}
|
||
/>
|
||
) : (
|
||
<Button
|
||
size="small"
|
||
variant={isCustomSelected ? "contained" : "outlined"}
|
||
disabled={!isEditable || isSubmitting}
|
||
onClick={() => {
|
||
setQuestionAnswers([]);
|
||
setQuestionCustomSelected(true);
|
||
}}
|
||
startIcon={
|
||
isCustomSelected ? (
|
||
<CheckCircleRounded fontSize="small" />
|
||
) : (
|
||
<EditNoteRounded fontSize="small" />
|
||
)
|
||
}
|
||
sx={{
|
||
justifyContent: "flex-start",
|
||
minHeight: 38,
|
||
borderRadius: 2,
|
||
textTransform: "none",
|
||
fontWeight: 800,
|
||
bgcolor: isCustomSelected ? "#0288d1" : alpha("#fff", 0.45),
|
||
borderColor: isCustomSelected
|
||
? "#0288d1"
|
||
: alpha("#0288d1", 0.22),
|
||
"&:hover": {
|
||
bgcolor: isCustomSelected
|
||
? "#0277bd"
|
||
: alpha("#0288d1", 0.08),
|
||
},
|
||
}}
|
||
>
|
||
<Box sx={{ textAlign: "left", minWidth: 0 }}>
|
||
<Typography variant="body2" fontWeight={800}>
|
||
自定义回答
|
||
</Typography>
|
||
</Box>
|
||
</Button>
|
||
)
|
||
) : null}
|
||
</Stack>
|
||
) : null}
|
||
|
||
<Collapse in={isCustomEnabled && isCustomSelected} timeout="auto" unmountOnExit>
|
||
<Box
|
||
sx={{
|
||
mt: 0.85,
|
||
px: 1.15,
|
||
py: 0.85,
|
||
borderRadius: 2.5,
|
||
bgcolor: alpha("#fff", 0.62),
|
||
border: `1px solid ${alpha("#fff", 0.82)}`,
|
||
boxShadow: `0 8px 22px ${alpha("#000", 0.045)}, 0 0 0 1px ${alpha("#0288d1", 0.05)} inset`,
|
||
backdropFilter: "blur(18px)",
|
||
}}
|
||
>
|
||
<TextField
|
||
multiline
|
||
minRows={2}
|
||
maxRows={5}
|
||
fullWidth
|
||
variant="standard"
|
||
disabled={!isEditable || isSubmitting}
|
||
value={custom[index] ?? ""}
|
||
onChange={(event) =>
|
||
setCustom((current) => ({
|
||
...current,
|
||
[index]: event.target.value,
|
||
}))
|
||
}
|
||
placeholder="输入自定义回答"
|
||
InputProps={{
|
||
disableUnderline: true,
|
||
sx: {
|
||
alignItems: "flex-start",
|
||
fontSize: "0.88rem",
|
||
lineHeight: 1.55,
|
||
fontWeight: 500,
|
||
color: "text.primary",
|
||
"& textarea::placeholder": {
|
||
color: alpha(theme.palette.text.primary, 0.38),
|
||
opacity: 1,
|
||
},
|
||
},
|
||
}}
|
||
/>
|
||
</Box>
|
||
</Collapse>
|
||
</Box>
|
||
);
|
||
})}
|
||
|
||
{questionRequest.status === "answered" ? (
|
||
<Typography
|
||
variant="caption"
|
||
color="success.main"
|
||
sx={{
|
||
display: "block",
|
||
px: 1.25,
|
||
py: 0.75,
|
||
borderRadius: 2,
|
||
bgcolor: alpha(theme.palette.success.main, 0.07),
|
||
wordBreak: "break-word",
|
||
}}
|
||
>
|
||
已回答{answerSummary ? `：${answerSummary}` : ""}
|
||
</Typography>
|
||
) : null}
|
||
|
||
{questionRequest.status === "rejected" ? (
|
||
<Typography
|
||
variant="caption"
|
||
color="text.secondary"
|
||
sx={{
|
||
display: "block",
|
||
px: 1.25,
|
||
py: 0.75,
|
||
borderRadius: 2,
|
||
bgcolor: alpha("#000", 0.035),
|
||
}}
|
||
>
|
||
已跳过
|
||
</Typography>
|
||
) : null}
|
||
|
||
{questionRequest.error ? (
|
||
<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",
|
||
}}
|
||
>
|
||
{questionRequest.error}
|
||
</Typography>
|
||
) : null}
|
||
</Stack>
|
||
|
||
{isEditable || isSubmitting ? (
|
||
<Stack
|
||
direction="row"
|
||
spacing={1}
|
||
flexWrap="wrap"
|
||
useFlexGap
|
||
sx={{ px: 1.5, pb: 1.35, pl: 1.75 }}
|
||
>
|
||
<Button
|
||
size="small"
|
||
variant="outlined"
|
||
disabled={isSubmitting}
|
||
onClick={() => onReject(questionRequest.requestId)}
|
||
sx={{
|
||
height: 34,
|
||
borderRadius: "17px",
|
||
px: 1.5,
|
||
fontWeight: 800,
|
||
fontSize: "0.78rem",
|
||
textTransform: "none",
|
||
color: "text.secondary",
|
||
borderColor: alpha(theme.palette.text.secondary, 0.22),
|
||
bgcolor: alpha("#fff", 0.45),
|
||
}}
|
||
>
|
||
跳过
|
||
</Button>
|
||
<Button
|
||
size="small"
|
||
variant="contained"
|
||
disableElevation
|
||
disabled={!canSubmit || isSubmitting}
|
||
onClick={() => onReply(questionRequest.requestId, answers)}
|
||
startIcon={
|
||
isSubmitting ? (
|
||
<CircularProgress size={14} color="inherit" />
|
||
) : (
|
||
<CheckCircleRounded fontSize="small" />
|
||
)
|
||
}
|
||
sx={{
|
||
minWidth: 104,
|
||
height: 34,
|
||
borderRadius: "17px",
|
||
bgcolor: "#0288d1",
|
||
fontWeight: 800,
|
||
fontSize: "0.78rem",
|
||
textTransform: "none",
|
||
boxShadow: `0 4px 12px ${alpha("#0288d1", 0.24)}`,
|
||
"&:hover": {
|
||
bgcolor: "#0277bd",
|
||
boxShadow: `0 6px 16px ${alpha("#0288d1", 0.28)}`,
|
||
},
|
||
}}
|
||
>
|
||
提交回答
|
||
</Button>
|
||
</Stack>
|
||
) : null}
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export const QuestionRequestGroup = ({
|
||
questions,
|
||
onReply,
|
||
onReject,
|
||
}: {
|
||
questions: NonNullable<Message["questions"]>;
|
||
onReply: (requestId: string, answers: string[][]) => void;
|
||
onReject: (requestId: string) => void;
|
||
}) => (
|
||
<Stack spacing={1}>
|
||
{questions.map((question) => (
|
||
<QuestionRequestCard
|
||
key={question.requestId}
|
||
questionRequest={question}
|
||
onReply={onReply}
|
||
onReject={onReject}
|
||
/>
|
||
))}
|
||
</Stack>
|
||
);
|
||
|
||
|