ConversationalQA

Chat-style interface for AI clarifying questions

Overview

ConversationalQA provides a chat-like interface for AI clarifying questions. Used in the Project Setup Wizard to refine AI-generated plans. Supports text, single choice, and multi-choice questions with an "Update Plan" action.

Key Features

Text, choice, and multi-choice question types
AI robot icon header for visual context
Answers tracked as Record<questionId, answer>
"Update Plan with Answers" button with loading state
Button disabled until all questions answered

Examples

Interactive Demo

Full demo with text, single-choice, and multi-choice questions.

Current answers:

{}

Text Questions Only

Simple text-only questions for free-form input.

A few questions to refine your plan:

1.What specific features are most important to you?

2.Are there any constraints we should be aware of?

Empty State

Empty state when no questions are provided.

Your plan is ready! Review and edit as needed, then continue.

Props Reference

Prop	Type	Default	Description
`questions`	`ClarifyingQuestion[]`	`required`	Array of questions with id, question text, type, and optional options
`answers`	`Record<string, string \| string[]>`	`required`	Current answers keyed by question ID
`onAnswersChange`	`(answers: Record<string, string \| string[]>) => void`	`required`	Callback when answers change
`onUpdatePlan`	`() => void`	`required`	Callback when "Update Plan" button is clicked
`isUpdating`	`boolean`	`false`	Whether the plan is currently being updated (shows loading state)
`className`	`string`	`-`	Additional className for the container

Usage

import { ConversationalQA, type ClarifyingQuestion } from '@/ui/components';

// Define clarifying questions from AI
const questions: ClarifyingQuestion[] = [
  {
    id: 'q1',
    question: 'What is the primary goal?',
    type: 'text',
  },
  {
    id: 'q2',
    question: 'Which platforms?',
    type: 'multiChoice',
    options: [
      { value: 'web', label: 'Web' },
      { value: 'mobile', label: 'Mobile' },
    ],
  },
  {
    id: 'q3',
    question: 'Timeline?',
    type: 'choice',
    options: [
      { value: 'fast', label: '1 month' },
      { value: 'normal', label: '3 months' },
    ],
  },
];

// Track answers
const [answers, setAnswers] = useState<Record<string, string | string[]>>({});
const [isUpdating, setIsUpdating] = useState(false);

<ConversationalQA
  questions={questions}
  answers={answers}
  onAnswersChange={setAnswers}
  onUpdatePlan={handleUpdatePlan}
  isUpdating={isUpdating}
/>

Prop

Type

Default

Description

questions

ClarifyingQuestion[]

required

Array of questions with id, question text, type, and optional options

answers

Record<string, string | string[]>

required

Current answers keyed by question ID

onAnswersChange

(answers: Record<string, string | string[]>) => void

required

Callback when answers change

onUpdatePlan

() => void

required

Callback when "Update Plan" button is clicked

isUpdating

boolean

false

Whether the plan is currently being updated (shows loading state)

className

string

-

Additional className for the container

import { ConversationalQA, type ClarifyingQuestion } from '@/ui/components'; // Define clarifying questions from AI const questions: ClarifyingQuestion[] = [ { id: 'q1', question: 'What is the primary goal?', type: 'text', }, { id: 'q2', question: 'Which platforms?', type: 'multiChoice', options: [ { value: 'web', label: 'Web' }, { value: 'mobile', label: 'Mobile' }, ], }, { id: 'q3', question: 'Timeline?', type: 'choice', options: [ { value: 'fast', label: '1 month' }, { value: 'normal', label: '3 months' }, ], }, ]; // Track answers const [answers, setAnswers] = useState<Record<string, string | string[]>>({}); const [isUpdating, setIsUpdating] = useState(false); <ConversationalQA questions={questions} answers={answers} onAnswersChange={setAnswers} onUpdatePlan={handleUpdatePlan} isUpdating={isUpdating} />