fix: complete agent question interactions

src/features/agent/components/agent-message-details.tsx

@@ -574,7 +574,7 @@ function QuestionRequestCard({
             key={`${request.requestId}-${questionIndex}`}
             question={question}
             questionIndex={questionIndex}
-            value={draftAnswers[questionIndex] ?? { selected: [], custom: "" }}
+            value={draftAnswers[questionIndex] ?? { selected: [], customSelected: false, custom: "" }}
             disabled={!actionable || submitting}
             onChange={(nextValue) =>
               setDraftAnswers((current) => current.map((item, index) => (index === questionIndex ? nextValue : item)))
@@ -633,6 +633,7 @@ function QuestionRequestCard({
 
 type QuestionDraftAnswer = {
   selected: string[];
+  customSelected: boolean;
   custom: string;
 };
 
@@ -649,8 +650,11 @@ function QuestionInput({
   disabled: boolean;
   onChange: (value: QuestionDraftAnswer) => void;
 }) {
-  const name = `agent-question-${questionIndex}-${question.question}`;
-  const showCustomInput = question.custom || question.options.length === 0;
+  const inputId = useId();
+  const name = `agent-question-${questionIndex}-${inputId}`;
+  const customEnabled = question.custom !== false;
+  const showCustomChoice = customEnabled && question.options.length > 0;
+  const showCustomInput = customEnabled && value.customSelected;
 
   const toggleOption = (label: string, checked: boolean) => {
     if (question.multiple) {
@@ -662,21 +666,36 @@ function QuestionInput({
     }
     onChange({
       ...value,
-      selected: checked ? [label] : []
+      selected: checked ? [label] : [],
+      customSelected: false
+    });
+  };
+
+  const toggleCustom = (checked: boolean) => {
+    onChange({
+      ...value,
+      selected: question.multiple ? value.selected : [],
+      customSelected: checked
     });
   };
 
   return (
     <div className="space-y-1.5">
       <p className="leading-5 text-slate-700">{question.question}</p>
-      {question.options.length ? (
+      {question.options.length || showCustomChoice ? (
         <div className="space-y-1">
           {question.options.map((option) => {
             const checked = value.selected.includes(option.label);
             return (
               <label
                 key={option.label}
-                className="flex cursor-pointer items-start gap-2 rounded-md border border-slate-200/80 px-2 py-1.5 text-slate-600"
+                className={cn(
+                  "flex cursor-pointer items-start gap-2 rounded-md border px-2 py-1.5 transition-colors",
+                  checked
+                    ? "border-blue-300 bg-blue-50/70 text-blue-700"
+                    : "border-slate-200/80 text-slate-600 hover:border-slate-300 hover:bg-slate-50/70",
+                  disabled && "cursor-default opacity-60"
+                )}
               >
                 <input
                   type={question.multiple ? "checkbox" : "radio"}
@@ -695,12 +714,34 @@ function QuestionInput({
               </label>
             );
           })}
+          {showCustomChoice ? (
+            <label
+              className={cn(
+                "flex cursor-pointer items-center gap-2 rounded-md border px-2 py-2 transition-colors",
+                value.customSelected
+                  ? "border-blue-300 bg-blue-50/70 text-blue-700"
+                  : "border-slate-200/80 text-slate-600 hover:border-slate-300 hover:bg-slate-50/70",
+                disabled && "cursor-default opacity-60"
+              )}
+            >
+              <input
+                type={question.multiple ? "checkbox" : "radio"}
+                name={name}
+                className="h-3.5 w-3.5 accent-blue-600"
+                checked={value.customSelected}
+                disabled={disabled}
+                onChange={(event) => toggleCustom(event.currentTarget.checked)}
+              />
+              <span className="font-semibold text-slate-700">自定义回答</span>
+            </label>
+          ) : null}
         </div>
       ) : null}
       {showCustomInput ? (
         <textarea
           className="min-h-16 w-full resize-none rounded-md border border-slate-200/80 bg-transparent px-2 py-1.5 text-xs leading-5 text-slate-700 outline-hidden transition focus:border-blue-300 focus:ring-2 focus:ring-blue-100 disabled:opacity-60"
-          placeholder="输入回答"
+          aria-label="自定义回答内容"
+          placeholder="输入自定义回答"
           value={value.custom}
           disabled={disabled}
           onChange={(event) => onChange({ ...value, custom: event.currentTarget.value })}
@@ -711,16 +752,25 @@ function QuestionInput({
 }
 
 function createInitialQuestionAnswers(request: AgentQuestionRequest): QuestionDraftAnswer[] {
-  return request.questions.map((question, index) => ({
-    selected: request.answers?.[index] ?? [],
-    custom: ""
-  }));
+  return request.questions.map((question, index) => {
+    const optionLabels = new Set(question.options.map((option) => option.label));
+    const savedAnswers = request.answers?.[index] ?? [];
+    const selected = savedAnswers.filter((answer) => optionLabels.has(answer));
+    const customAnswers = savedAnswers.filter((answer) => !optionLabels.has(answer));
+    const customEnabled = question.custom !== false;
+
+    return {
+      selected,
+      customSelected: customEnabled && (question.options.length === 0 || customAnswers.length > 0),
+      custom: customAnswers.join("；")
+    };
+  });
 }
 
 function normalizeDraftAnswers(draftAnswers: QuestionDraftAnswer[]) {
   return draftAnswers.map((answer) => {
     const custom = answer.custom.trim();
-    return custom ? [...answer.selected, custom] : answer.selected;
+    return answer.customSelected && custom ? [...answer.selected, custom] : answer.selected;
   });
 }