استبيان
الأسئلة التي يطرحها العميل قبل الالتزام بخطة، كبطاقة في سلسلة المحادثة. سؤال واحد لكل خطوة: المحث في الأعلى، والإجابات كصفوف محاطة بحدود مع مربع اختيار أو مفتاح رقمي، وصف اختياري للنص الحر "أخرى"، وتذييل مع حبة لكل خطوة بجانب السابق والتالي. تنزلق الأسئلة في اتجاه التنقل بينما تتحرك البطاقة إلى ارتفاع السؤال التالي.
Which harness controls should stay in the top bar?
التثبيت
الاستبيان جزء من BoardUI Pro.
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل 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 حتى يُرى الاختيار عند الوصول. العودة تُظهر الخيار المحدد مميزاً. يظل صف "أخرى" في انتظار النص بدلاً من ذلك: يرسله Enter.
{/* 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", /* … */ }]} />الإجابات والخطوات
الإجابات مفهرسة بمعرّف السؤال: values يحتفظ بقيم الخيارات المحددة بترتيب الخيارات، و other النص الحر أثناء تحديد ذلك الصف. امتلكها مع answers و onAnswersChange، والسؤال المرئي باستخدام step و onStepChange، أو ابذر أيًا منهما باستخدام افتراضي الخصائص ودع البطاقة تعمل بنفسها. onDismiss يعرض زر الإغلاق في الزاوية؛ تسميات يعيد صياغة الأزرار وصف الخيارات الأخرى.
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"] } }} />