質問フォーム
エージェントは、チャットスレッドのカードとして、計画にコミットする前に尋ねます。 1ステップあたりの1つの質問:上のプロンプト、チェックボックスまたは番号キーで境界線として答え、オプションのフリーテキストその他の行、および前の次のステップごとのカプセルを持つフッター。 質問は、次の1つの高さにカードを提示しながら旅行の方向にスライドします。
Which harness controls should stay in the top bar?
インストール
質問フォームはBoardUI Proに含まれています。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
複数選択
デフォルトモードです。各行はチェックボックスカードです。どこからでもチェックボックスをオンにして、好きなだけチェックします。 次へ 次の質問に移動します。 前へ 目盛りがそのままに戻って、ステップのカプセルはあらゆる質問にまっすぐジャンプします。 最後の質問のボタンは読みます 完了 火事・火事 onComplete あらゆる回答で。
{/* The default: every row is a checkbox and Next moves on */}<Questionnaire select="multiple" questions={[ { id: "controls", question: "Which harness controls should stay in the top bar?", options: [ { value: "upsell", label: "Show up sell toggle", description: "Forces the upsell card up." }, { value: "wallpaper", label: "Wallpaper picker", description: "The chat wallpaper choices." }, ], other: true, // adds the free-text row; typing ticks it stepLabel: "Top bar", // pill label, "Step 1" otherwise }, ]} onComplete={(answers) => { // answers.controls → { values: ["upsell", "wallpaper"], other: "Model picker" } }}/>シングルセレクト
セットセット 選択する とりあえず single カードまたは質問に。チェックボックスは番号キーになり、クリックまたはその数字で列を選ぶと、その後自身で移動します。 advanceDelay なので、選択はランディングが見られます。 戻ってくると、ピックが強調表示されます。 他の行はテキストを待つ代わりに: 送信してください。
{/* Single select numbers the rows; a pick moves on after 180ms */}<Questionnaire select="single" advanceDelay={180} questions={[ { id: "permission", question: "How should the permission pill behave while an agent is running?", options: [ { value: "lock", label: "Lock it", description: "Changes wait until the run finishes." }, { value: "queue", label: "Queue the change", description: "Applies from the next turn." }, { value: "apply", label: "Apply immediately", description: "Interrupts the current tool call." }, ], other: { placeholder: "Describe the behaviour" }, }, ]} onComplete={(answers) => { // answers.permission → { values: ["queue"] } or { values: [], other: "..." } }}/>
{/* Mix modes per question: the card-level select is only the default */}<Questionnaire questions={[{ id: "a", select: "multiple", /* … */ }, { id: "b", select: "single", /* … */ }]} />回答と手順
回答は質問のidによってキー化されます: values オプションの順番でピックされたオプション値を保持し、 other その行が選択されている間、無料のテキスト。それらを所有する answers そして、 onAnswersChange、および目に見える質問との step そして、 onStepChange, またはいずれかのシード デフォルト カード自体をプロップし、カードが実行できるようにします。 onDismiss コーナーのdismissを示して下さい; ラベル ボタンと他の行をリワードします。
const [step, setStep] = useState(0);const [answers, setAnswers] = useState<QuestionnaireAnswers>({});
<Questionnaire questions={questions} step={step} onStepChange={setStep} answers={answers} onAnswersChange={setAnswers} onComplete={(final) => submitPlan(final)} onDismiss={() => setOpen(false)} labels={{ previous: "Back", next: "Continue", complete: "Send answers" }}/>
{/* Or start somewhere and let the card own it */}<Questionnaire questions={questions} defaultStep={1} defaultAnswers={{ controls: { values: ["upsell"] } }} />