diff --git a/desktop/src/components/chat/AskUserQuestion.tsx b/desktop/src/components/chat/AskUserQuestion.tsx index b607811a..fa51a18c 100644 --- a/desktop/src/components/chat/AskUserQuestion.tsx +++ b/desktop/src/components/chat/AskUserQuestion.tsx @@ -9,6 +9,7 @@ type QuestionOption = { type Question = { question: string + header?: string options?: QuestionOption[] } @@ -46,6 +47,7 @@ function parseInput(input: unknown): Question[] { export function AskUserQuestion({ toolUseId: _toolUseId, input }: Props) { const { sendMessage } = useChatStore() const questions = parseInput(input) + const [activeTab, setActiveTab] = useState(0) const [selections, setSelections] = useState>({}) const [freeText, setFreeText] = useState('') const [submitted, setSubmitted] = useState(false) @@ -54,35 +56,39 @@ export function AskUserQuestion({ toolUseId: _toolUseId, input }: Props) { const handleSelect = (qIndex: number, label: string) => { if (submitted) return - setSelections((prev) => ({ ...prev, [qIndex]: label })) - // Clear free text when an option is selected + setSelections((prev) => { + // Toggle: deselect if already selected + if (prev[qIndex] === label) { + const next = { ...prev } + delete next[qIndex] + return next + } + return { ...prev, [qIndex]: label } + }) setFreeText('') } const handleSubmit = () => { if (submitted) return - // Build the response text const parts: string[] = [] for (let i = 0; i < questions.length; i++) { const selected = selections[i] - if (selected) { - parts.push(selected) - } + if (selected) parts.push(selected) } - // Free text overrides if provided const response = freeText.trim() || parts.join('; ') || '' if (!response) return setSubmitted(true) - // Send the response as a user message -- the server routes it as a tool_result sendMessage(response) } - const hasSelection = Object.keys(selections).length > 0 || freeText.trim().length > 0 + // All questions must be answered (via selection or free text) to enable submit + const allAnswered = freeText.trim().length > 0 || questions.every((_, i) => selections[i] !== undefined) + const activeQuestion = questions[activeTab] return ( -
- {/* Questions */} -
- {questions.map((q, qIndex) => ( -
-

- {q.question} -

+ {/* Question tabs — horizontal tab bar (only show when multiple questions) */} + {questions.length > 1 && ( +
+ {questions.map((q, i) => { + const isActive = activeTab === i + const isAnswered = selections[i] !== undefined + const tabLabel = q.header || `Q${i + 1}` + return ( + + ) + })} +
+ )} - {/* Option cards */} - {q.options && q.options.length > 0 && ( -
- {q.options.map((opt, optIndex) => { - const isSelected = selections[qIndex] === opt.label - return ( - - ) - })} -
- )} + ? 'text-[var(--color-secondary)]' + : 'text-[var(--color-text-primary)]' + }`}> + {opt.label} + + {opt.description && ( +

+ {opt.description} +

+ )} +
+
+ + ) + })} - ))} + )} - {/* Free text "Other" input */} + {/* Free text input */} {!submitted && (
-
- { - setFreeText(e.target.value) - // Clear radio selections when typing - if (e.target.value.trim()) { - setSelections({}) - } - }} - onKeyDown={(e) => { - if (e.key === 'Enter' && hasSelection) { - handleSubmit() - } - }} - placeholder="Type your answer..." - className="flex-1 px-3 py-2 text-sm bg-[var(--color-surface)] border border-[var(--color-outline-variant)]/40 rounded-[var(--radius-md)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:border-[var(--color-secondary)] focus:ring-1 focus:ring-[var(--color-secondary)]/30" - /> -
+ { + setFreeText(e.target.value) + if (e.target.value.trim()) setSelections({}) + }} + onKeyDown={(e) => { + if (e.key === 'Enter' && allAnswered) handleSubmit() + }} + placeholder="Type your answer..." + className="w-full px-3 py-2 text-sm bg-[var(--color-surface)] border border-[var(--color-outline-variant)]/40 rounded-[var(--radius-md)] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] focus:outline-none focus:border-[var(--color-secondary)] focus:ring-1 focus:ring-[var(--color-secondary)]/30" + />
)} @@ -214,7 +241,7 @@ export function AskUserQuestion({ toolUseId: _toolUseId, input }: Props) {