improvement(chat): question cards are single_select only

Removes multi_select (and its toggle/check UI). The card is one shape: pick
one option or type into the always-present 'Something else' row. Catch-all
stripping and the transcript pairing/recap behavior are unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: Sg312

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.test.ts

@@ -23,7 +23,7 @@ const QUESTIONS: QuestionItem[] = [
     ],
   },
   {
-    type: 'multi_select',
+    type: 'single_select',
     prompt: 'What time zone should the daily report run in?',
     options: [
       { id: 'est', label: 'EST' },

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/question/question.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { ArrowRight, Button, Check, ChevronLeft, ChevronRight, cn, X } from '@sim/emcn'
+import { ArrowRight, Button, ChevronLeft, ChevronRight, cn, X } from '@sim/emcn'
 import type { QuestionItem } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
 
 /**
@@ -36,6 +36,16 @@ export function parseQuestionAnswerMessage(
   return answers
 }
 
+/**
+ * The free-text input's initial value when (re)visiting a question: restore a
+ * previously typed answer, but not one that matches an option row (that row is
+ * highlighted instead).
+ */
+function freeTextPrefillFor(question: QuestionItem, answer: string | null): string {
+  if (!answer) return ''
+  return question.options.some((o) => o.label === answer) ? '' : answer
+}
+
 const OPTION_ROW_CLASSES =
   'flex items-center gap-2 border-[var(--divider)] px-2 py-2 text-left transition-colors'
 
@@ -69,11 +79,10 @@ interface QuestionDisplayProps {
  * Inline renderer for the `<question>` special tag: a chat-inline div with the
  * user input's chrome, the current question's prompt at the top left, dismiss
  * (and a `‹ N of M ›` stepper for multi-step batches) at the top right, and
- * suggested-action option rows beneath. Both question types append a
- * free-text "Something else" row. `single_select` answers and advances on
- * click; `multi_select` rows toggle and the free-text row's arrow submits the
- * step. Answering the last question sends one combined user message and
- * collapses the div to a question/answer recap.
+ * suggested-action option rows beneath, always followed by a free-text
+ * "Something else" row. Clicking an option (or submitting typed text) answers
+ * and advances; answering the last question sends one combined user message
+ * and collapses the div to a question/answer recap.
  */
 export function QuestionDisplay({
   data,
@@ -83,22 +92,16 @@ export function QuestionDisplay({
   const disabled = !onSelect
   const [phase, setPhase] = useState<QuestionPhase>('active')
   const [step, setStep] = useState(0)
-  const [selectedByStep, setSelectedByStep] = useState<string[][]>(() => data.map(() => []))
-  const [customByStep, setCustomByStep] = useState<string[]>(() => data.map(() => ''))
+  const [answers, setAnswers] = useState<(string | null)[]>(() => data.map(() => null))
   const [freeText, setFreeText] = useState('')
 
   const containerClasses =
     'rounded-2xl border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]'
 
   // Transcript answers win over local state: they survive reloads (local
   // phase does not) and keep live + rehydrated renders identical.
-  const localAnswers =
-    phase === 'answered'
-      ? data.map((question, i) =>
-          answerFor(question, selectedByStep[i] ?? [], customByStep[i] ?? '')
-        )
-      : null
-  const recapAnswers = transcriptAnswers ?? localAnswers
+  const recapAnswers =
+    transcriptAnswers ?? (phase === 'answered' ? answers.map((a) => a ?? '') : null)
   if (data.length > 0 && recapAnswers) {
     return (
       <div className={containerClasses}>
@@ -117,76 +120,30 @@ export function QuestionDisplay({
   const question = data[step]
   const isLast = step === data.length - 1
   const options = question.options
-  const selected = selectedByStep[step] ?? []
-  const isMulti = question.type === 'multi_select'
-
-  const commitCustom = (): string[] => {
-    const next = [...customByStep]
-    next[step] = freeText.trim()
-    setCustomByStep(next)
-    return next
-  }
 
   const goToStep = (next: number) => {
-    commitCustom()
     setStep(next)
-    setFreeText(customByStep[next] ?? '')
+    setFreeText(freeTextPrefillFor(data[next], answers[next]))
   }
 
-  const finishStep = (selections: string[][], customs: string[]) => {
+  const handleAnswer = (answer: string) => {
+    const next = [...answers]
+    next[step] = answer
+    setAnswers(next)
     if (!isLast) {
-      setStep(step + 1)
-      setFreeText(customs[step + 1] ?? '')
+      goToStep(step + 1)
       return
     }
     setPhase('answered')
     onSelect?.(
       formatQuestionAnswerMessage(
         data,
-        data.map((q, i) => answerFor(q, selections[i] ?? [], customs[i] ?? ''))
+        next.map((a) => a ?? '')
       )
     )
   }
 
-  const handleSingleSelect = (label: string) => {
-    const selections = [...selectedByStep]
-    selections[step] = [label]
-    setSelectedByStep(selections)
-    const customs = [...customByStep]
-    customs[step] = ''
-    setCustomByStep(customs)
-    setFreeText('')
-    finishStep(selections, customs)
-  }
-
-  const handleMultiToggle = (label: string) => {
-    const selections = [...selectedByStep]
-    const current = selections[step] ?? []
-    selections[step] = current.includes(label)
-      ? current.filter((l) => l !== label)
-      : [...current, label]
-    setSelectedByStep(selections)
-  }
-
-  const submitFreeTextRow = () => {
-    const customs = commitCustom()
-    if (isMulti) {
-      finishStep(selectedByStep, customs)
-      return
-    }
-    const selections = [...selectedByStep]
-    selections[step] = []
-    setSelectedByStep(selections)
-    finishStep(selections, customs)
-  }
-
-  const stepAnswered = (i: number): boolean =>
-    (selectedByStep[i]?.length ?? 0) > 0 ||
-    (i === step ? freeText.trim().length > 0 : (customByStep[i] ?? '').trim().length > 0)
-
-  // single_select: the arrow submits the typed "Something else" answer.
-  // multi_select: the arrow submits the step (selections and/or typed text).
-  const canSubmitRow = !disabled && (isMulti ? stepAnswered(step) : freeText.trim().length > 0)
+  const canSubmitFreeText = !disabled && freeText.trim().length > 0
 
   return (
     <div className={containerClasses}>
@@ -219,7 +176,7 @@ export function QuestionDisplay({
                 onClick={() => goToStep(step + 1)}
                 // Inert renders (older messages) browse freely; interactive ones
                 // gate forward movement on the current question being answered.
-                disabled={isLast || (!disabled && !stepAnswered(step))}
+                disabled={isLast || (!disabled && answers[step] === null)}
                 className={cn(
                   ICON_BUTTON_CLASSES,
                   'before:absolute before:inset-[-8px] before:content-[""] disabled:opacity-50'
@@ -247,35 +204,24 @@ export function QuestionDisplay({
         </div>
       </div>
       <div className='flex flex-col'>
-        {options.map((option, i) => {
-          const isSelected = selected.includes(option.label)
-          return (
-            <button
-              key={option.id}
-              type='button'
-              disabled={disabled}
-              onClick={() =>
-                isMulti ? handleMultiToggle(option.label) : handleSingleSelect(option.label)
-              }
-              className={cn(
-                OPTION_ROW_CLASSES,
-                disabled ? 'cursor-not-allowed' : 'hover-hover:bg-[var(--surface-5)]',
-                i > 0 && 'border-t',
-                isSelected && 'bg-[var(--surface-5)]'
-              )}
-            >
-              <RowNumber value={i + 1} />
-              <span className='flex-1 truncate text-[var(--text-body)] text-sm'>
-                {option.label}
-              </span>
-              {isMulti && isSelected ? (
-                <Check className='size-[16px] shrink-0 text-[var(--text-body)]' />
-              ) : (
-                <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />
-              )}
-            </button>
-          )
-        })}
+        {options.map((option, i) => (
+          <button
+            key={option.id}
+            type='button'
+            disabled={disabled}
+            onClick={() => handleAnswer(option.label)}
+            className={cn(
+              OPTION_ROW_CLASSES,
+              disabled ? 'cursor-not-allowed' : 'hover-hover:bg-[var(--surface-5)]',
+              i > 0 && 'border-t',
+              answers[step] === option.label && 'bg-[var(--surface-5)]'
+            )}
+          >
+            <RowNumber value={i + 1} />
+            <span className='flex-1 truncate text-[var(--text-body)] text-sm'>{option.label}</span>
+            <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+          </button>
+        ))}
         <div className={cn(OPTION_ROW_CLASSES, options.length > 0 && 'border-t')}>
           <RowNumber value={options.length + 1} />
           <input
@@ -284,9 +230,9 @@ export function QuestionDisplay({
             disabled={disabled}
             onChange={(e) => setFreeText(e.target.value)}
             onKeyDown={(e) => {
-              if (e.key === 'Enter' && canSubmitRow) {
+              if (e.key === 'Enter' && canSubmitFreeText) {
                 e.preventDefault()
-                submitFreeTextRow()
+                handleAnswer(freeText.trim())
               }
             }}
             placeholder='Something else'
@@ -296,14 +242,14 @@ export function QuestionDisplay({
           <button
             type='button'
             aria-label='Submit answer'
-            disabled={!canSubmitRow}
-            onClick={submitFreeTextRow}
+            disabled={!canSubmitFreeText}
+            onClick={() => handleAnswer(freeText.trim())}
             className='disabled:cursor-default'
           >
             <ArrowRight
               className={cn(
                 'size-[16px] shrink-0 transition-colors',
-                canSubmitRow ? 'text-[var(--text-body)]' : 'text-[var(--text-icon)]'
+                canSubmitFreeText ? 'text-[var(--text-body)]' : 'text-[var(--text-icon)]'
               )}
             />
           </button>
@@ -312,16 +258,3 @@ export function QuestionDisplay({
     </div>
   )
 }
-
-/**
- * A step's combined answer: selected option labels in option order, with the
- * typed "Something else" entry appended last. single_select carries at most
- * one selection, so this collapses to the chosen label or the typed text.
- */
-function answerFor(question: QuestionItem, selected: string[], custom: string): string {
-  const ordered = question.options
-    .map((option) => option.label)
-    .filter((label) => selected.includes(label))
-  const parts = custom.trim() ? [...ordered, custom.trim()] : ordered
-  return parts.join(', ')
-}

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.test.ts

@@ -25,13 +25,12 @@ const YES_NO = {
   ],
 }
 
-const MULTI_SELECT = {
-  type: 'multi_select',
-  prompt: 'Which channels should the report go to?',
+const TIMEZONE = {
+  type: 'single_select',
+  prompt: 'What time zone should the daily report run in?',
   options: [
-    { id: 'slack', label: 'Slack' },
-    { id: 'email', label: 'Email' },
-    { id: 'sheet', label: 'Google Sheet' },
+    { id: 'est', label: 'EST' },
+    { id: 'pst', label: 'PST' },
   ],
 }
 
@@ -41,12 +40,8 @@ describe('parseQuestionTagBody', () => {
   })
 
   it('preserves array order for multi-step bodies', () => {
-    const parsed = parseQuestionTagBody(JSON.stringify([SINGLE_SELECT, YES_NO, MULTI_SELECT]))
-    expect(parsed).toEqual([SINGLE_SELECT, YES_NO, MULTI_SELECT])
-  })
-
-  it('accepts multi_select questions', () => {
-    expect(parseQuestionTagBody(JSON.stringify(MULTI_SELECT))).toEqual([MULTI_SELECT])
+    const parsed = parseQuestionTagBody(JSON.stringify([SINGLE_SELECT, YES_NO, TIMEZONE]))
+    expect(parsed).toEqual([SINGLE_SELECT, YES_NO, TIMEZONE])
   })
 
   it('rejects single_select without options', () => {
@@ -61,11 +56,12 @@ describe('parseQuestionTagBody', () => {
     ).toBe(null)
   })
 
-  it('rejects the removed text and confirm types', () => {
+  it('rejects non-single_select types', () => {
     expect(parseQuestionTagBody(JSON.stringify({ type: 'text', prompt: 'What time zone?' }))).toBe(
       null
     )
     expect(parseQuestionTagBody(JSON.stringify({ ...YES_NO, type: 'confirm' }))).toBe(null)
+    expect(parseQuestionTagBody(JSON.stringify({ ...YES_NO, type: 'multi_select' }))).toBe(null)
   })
 
   it('strips agent-supplied catch-all options (the card provides its own)', () => {
@@ -123,9 +119,9 @@ describe('parseSpecialTags with <question>', () => {
   })
 
   it('extracts a multi-step array body as one segment', () => {
-    const content = `<question>${JSON.stringify([SINGLE_SELECT, YES_NO, MULTI_SELECT])}</question>`
+    const content = `<question>${JSON.stringify([SINGLE_SELECT, YES_NO, TIMEZONE])}</question>`
     const { segments } = parseSpecialTags(content, false)
-    expect(segments).toEqual([{ type: 'question', data: [SINGLE_SELECT, YES_NO, MULTI_SELECT] }])
+    expect(segments).toEqual([{ type: 'question', data: [SINGLE_SELECT, YES_NO, TIMEZONE] }])
   })
 
   it('flags an unclosed question tag as pending while streaming', () => {

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx

@@ -95,7 +95,7 @@ export interface FileTagData {
   content: string
 }
 
-export const QUESTION_TYPES = ['single_select', 'multi_select'] as const
+export const QUESTION_TYPES = ['single_select'] as const
 
 export type QuestionType = (typeof QUESTION_TYPES)[number]
 
@@ -105,8 +105,8 @@ export interface QuestionOption {
 }
 
 /**
- * One question in a `<question>` tag. Both types require at least one option;
- * the card always appends its own free-text "Something else" row, so
+ * One question in a `<question>` tag: a single_select with at least one real
+ * option. The card always appends its own free-text "Something else" row, so
  * agent-supplied catch-all options ("Other", "Something else", ...) are
  * stripped during parsing.
  */