Questionário
As perguntas que um agente faz antes de se comprometer com um plano, como uma carta no tópico de conversação. Uma pergunta por passo: o prompt através do topo, as respostas como linhas bordadas com uma caixa de seleção ou uma tecla de número, um texto livre opcional Outra linha, e um rodapé com uma pílula por passo ao lado de Anterior e Seguinte. As perguntas deslizam na direção da viagem enquanto a carta anima para a altura do próximo.
Which harness controls should stay in the top bar?
Instalação
O questionário faz parte do BoardUI Pro.
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Seleção múltipla
O modo padrão. Cada linha é uma caixa de seleção: pressione em qualquer lugar para marcar, e quantos quiser. Próximo passa para a próxima pergunta, Anterior volta com as carrapatos intactos, e as pílulas passo saltar diretamente para qualquer pergunta. O botão da última pergunta lê Feito e fogos onComplete com todas as respostas.
{/* 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" } }}/>Selecionar individualmente
Definir selecionar para single na carta ou em uma pergunta. As caixas de seleção se tornam teclas de número, e escolhendo uma linha, com um clique ou seu dígito, se move por si só após advanceDelay assim a escolha é vista aterrissando. Voltando mostra a escolha realçada. A outra linha espera pelo texto em vez disso: Enter envia- o.
{/* 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", /* … */ }]} />Respostas e passos
As respostas são chaveadas pelo ID da pergunta: values detém os valores da opção escolhida na ordem da opção, e other o texto livre enquanto essa linha está selecionada. answers e onAnswersChange, e a questão visível com step e onStepChange, ou sementes com o padrão props e deixe a carta funcionar sozinho. onDismiss mostra o afastamento do canto; rótulos reformula os botões e a outra linha.
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"] } }} />