fix(chat): update question abort state
This commit is contained in:
@@ -51,6 +51,7 @@ 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 EditNoteRounded from "@mui/icons-material/EditNoteRounded";
|
||||
import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
|
||||
import KeyboardArrowUpRounded from "@mui/icons-material/KeyboardArrowUpRounded";
|
||||
import AssignmentTurnedInRounded from "@mui/icons-material/AssignmentTurnedInRounded";
|
||||
@@ -713,26 +714,30 @@ const QuestionRequestCard = ({
|
||||
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 customAnswer ? [...selectedAnswers, customAnswer] : selectedAnswers;
|
||||
return isCustomSelected && customAnswer
|
||||
? [...selectedAnswers, customAnswer]
|
||||
: selectedAnswers;
|
||||
}),
|
||||
[custom, questionRequest.questions, selected],
|
||||
[custom, customSelected, questionRequest.questions, selected],
|
||||
);
|
||||
|
||||
const canSubmit =
|
||||
isEditable &&
|
||||
questionRequest.questions.length > 0 &&
|
||||
questionRequest.questions.every((question, index) => {
|
||||
questionRequest.questions.every((_, index) => {
|
||||
const answer = answers[index] ?? [];
|
||||
const hasInput = answer.some((item) => item.trim().length > 0);
|
||||
const canAnswer = question.options.length > 0 || question.custom === true;
|
||||
return canAnswer && hasInput;
|
||||
return answer.some((item) => item.trim().length > 0);
|
||||
});
|
||||
|
||||
const answerSummary = (questionRequest.answers ?? [])
|
||||
@@ -809,12 +814,22 @@ const QuestionRequestCard = ({
|
||||
<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
|
||||
@@ -884,7 +899,10 @@ const QuestionRequestCard = ({
|
||||
size="small"
|
||||
variant={checked ? "contained" : "outlined"}
|
||||
disabled={!isEditable || isSubmitting}
|
||||
onClick={() => setQuestionAnswers([option.label])}
|
||||
onClick={() => {
|
||||
setQuestionAnswers([option.label]);
|
||||
setQuestionCustomSelected(false);
|
||||
}}
|
||||
startIcon={
|
||||
checked ? (
|
||||
<CheckCircleRounded fontSize="small" />
|
||||
@@ -921,28 +939,145 @@ const QuestionRequestCard = ({
|
||||
</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}
|
||||
|
||||
{question.custom ? (
|
||||
<TextField
|
||||
multiline
|
||||
minRows={2}
|
||||
maxRows={5}
|
||||
fullWidth
|
||||
size="small"
|
||||
disabled={!isEditable || isSubmitting}
|
||||
value={custom[index] ?? ""}
|
||||
onChange={(event) =>
|
||||
setCustom((current) => ({
|
||||
...current,
|
||||
[index]: event.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="补充说明"
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
) : 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>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user