143 lines
4.2 KiB
TypeScript
143 lines
4.2 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { toast } from "sonner"
|
|
|
|
import {
|
|
Questionnaire,
|
|
QuestionnaireActions,
|
|
QuestionnaireChoice,
|
|
QuestionnaireChoices,
|
|
QuestionnaireDescription,
|
|
QuestionnaireError,
|
|
QuestionnaireInput,
|
|
QuestionnaireItem,
|
|
QuestionnaireNext,
|
|
QuestionnairePrevious,
|
|
QuestionnaireProgress,
|
|
QuestionnaireSkip,
|
|
QuestionnaireSubmit,
|
|
QuestionnaireTitle,
|
|
} from "@/styles/base-nova/ui/questionnaire"
|
|
|
|
const questionnaireItems = [
|
|
{
|
|
choices: [
|
|
{
|
|
description: "Show what the agent ran and what came back.",
|
|
label: "Tool call timeline",
|
|
value: "tool-calls",
|
|
},
|
|
{
|
|
description: "Ask before sensitive or destructive actions.",
|
|
label: "Approval checkpoints",
|
|
value: "approvals",
|
|
},
|
|
{
|
|
description: "Make delegated work and results easier to follow.",
|
|
label: "Sub-agent handoffs",
|
|
value: "handoffs",
|
|
},
|
|
],
|
|
description: "Choose a direction or describe another task.",
|
|
input: {
|
|
label: "Another agent feature",
|
|
placeholder: "Describe another feature…",
|
|
},
|
|
name: "direction",
|
|
required: true,
|
|
title: "What should the agent build next?",
|
|
},
|
|
{
|
|
choices: [
|
|
{ label: "Progress", value: "progress" },
|
|
{ label: "Decisions", value: "decisions" },
|
|
{ label: "Risks", value: "risks" },
|
|
{ label: "Next step", value: "next-step" },
|
|
],
|
|
description: "Select all that apply, or skip this question.",
|
|
multiple: true,
|
|
name: "signals",
|
|
required: false,
|
|
title: "What should every progress update include?",
|
|
},
|
|
{
|
|
choices: [
|
|
{ label: "Start now", value: "now" },
|
|
{ label: "Next development cycle", value: "next-cycle" },
|
|
{ label: "Add it to the backlog", value: "backlog" },
|
|
],
|
|
description: "Choose when the agent should begin the work.",
|
|
name: "timing",
|
|
required: true,
|
|
title: "When should work begin?",
|
|
},
|
|
] as const
|
|
|
|
export function QuestionnaireDemo() {
|
|
function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
|
event.preventDefault()
|
|
|
|
const formData = new FormData(event.currentTarget)
|
|
const answers = {
|
|
direction: formData.get("direction"),
|
|
signals: formData.getAll("signals"),
|
|
timing: formData.get("timing"),
|
|
}
|
|
|
|
toast("Agent plan saved", {
|
|
description: `Direction: ${answers.direction ?? "None"} · Progress signals: ${answers.signals.join(", ") || "None"} · Timing: ${answers.timing ?? "None"}`,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<Questionnaire
|
|
className="mx-auto max-w-md"
|
|
defaultItem="direction"
|
|
items={questionnaireItems}
|
|
shortcuts="letters"
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<QuestionnaireProgress />
|
|
{questionnaireItems.map((question) => (
|
|
<QuestionnaireItem
|
|
key={question.name}
|
|
multiple={"multiple" in question && question.multiple}
|
|
name={question.name}
|
|
required={question.required}
|
|
>
|
|
<QuestionnaireTitle>{question.title}</QuestionnaireTitle>
|
|
<QuestionnaireDescription>
|
|
{question.description}
|
|
</QuestionnaireDescription>
|
|
<QuestionnaireChoices>
|
|
{question.choices.map((choice) => (
|
|
<QuestionnaireChoice key={choice.value} value={choice.value}>
|
|
<span className="font-medium">{choice.label}</span>
|
|
{"description" in choice ? (
|
|
<span className="text-muted-foreground">
|
|
{choice.description}
|
|
</span>
|
|
) : null}
|
|
</QuestionnaireChoice>
|
|
))}
|
|
{"input" in question ? (
|
|
<QuestionnaireInput
|
|
aria-label={question.input.label}
|
|
placeholder={question.input.placeholder}
|
|
/>
|
|
) : null}
|
|
</QuestionnaireChoices>
|
|
<QuestionnaireError />
|
|
</QuestionnaireItem>
|
|
))}
|
|
<QuestionnaireActions>
|
|
<QuestionnairePrevious />
|
|
<QuestionnaireSkip />
|
|
<QuestionnaireNext>Next</QuestionnaireNext>
|
|
<QuestionnaireSubmit>Save plan</QuestionnaireSubmit>
|
|
</QuestionnaireActions>
|
|
</Questionnaire>
|
|
)
|
|
}
|