لوحة محرّر الرسائل
المحرر ثنائي الصفوف: بطاقة بنصف قطر 24 مع المطالبة في الأعلى وعناصر التحكم في الأسفل، وقائمة الإضافة، ومنتقي الإذن مع وضع تلقائي ويدوي وخطة وتجاوز الكل، ومنتقي النموذج مع شريط مزود قابل للتمرير ونافذة منبثقة للجهد على النموذج المختار، والميكروفون والإرسال، بالإضافة إلى علامة تبويب الحالة مع الفرع ومجلد المشروع ومقياس السياق معلّقة من الحافة العلوية للبطاقة. تبقى حبة المحرر أحادية السطر كما هي؛ هذا هو التخطيط الأطول لأسطح الوكيل.
التثبيت
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
الصلاحيات
يرسم المحدد سطحه فقط عند التمرير أو الضغط أو أثناء فتح القائمة، لذا يبدو في حالة الراحة كتسمية بجانب زر الإضافة. تسرد القائمة الأوضاع الأربعة مع وصف من سطر واحد لكل منها و معرفة المزيد زر الرابط في الرأس (learnMoreHref أو onLearnMore). تلقائي هو الافتراضي؛ اضبط defaultPermission للبدء من مكان آخر، أو تمرير permission و onPermissionChange لامتلاكه. يُشحن المشغّل والقائمة وقائمة الخيارات أيضًا بشكل مستقل بوصفها PermissionMenu و COMPOSER_PERMISSIONS.
{/* Auto is the default; start on another mode */}<ComposerPanel defaultPermission="plan" />
{/* Or own the mode yourself */}const [permission, setPermission] = useState<ComposerPermission>("auto");<ComposerPanel permission={permission} onPermissionChange={setPermission} />
{/* The picker on its own; "Learn more" is a Link Button, a link with href or a button with onLearnMore */}<PermissionMenu value={permission} onChange={setPermission} learnMoreHref="/docs/permissions" />منتقي النموذج
لوحة بعرض 341 بكسل: قضيب قابل للتمرير يضم علامات مزودي الخدمة على اليسار، وتشكيلة المزود المختار كصفوف راديو على اليمين تحت رأس النماذج مع تلميح البحث السريع. MODEL_PROVIDERS يتضمن ثمانية عشر تشكيلة واقعية، وهي الثماني علامات التي يحملها التصميم بالإضافة إلى عشر أخرى من مجموعة أيقونات LobeHub، من OpenAI وAnthropic إلى Google وMistral وxAI وAmazon. يحمل الصف المحدد فقط شريحة الجهد؛ والضغط عليه يفتح نافذة الجهد المنبثقة مع نفس شريط التمرير ذي الست درجات من الأسرع إلى الأذكى الذي يستخدمه محرر الحبة. البحث السريع، أو /، يحوّل الرأسَ إلى حقل يُصفّي كل القوائم دفعةً واحدة، مع وضع علامة على كل تطابق بمزوّده؛ يأخذك الاختيار إلى قائمة ذلك المزوّد. كل قائمة قابلة للتمرير. مرّر providers لكتالوجك الخاص.
{/* Start on a model and effort stop; MODEL_PROVIDERS ships eighteen realistic lineups */}<ComposerPanel defaultModel="anthropic/fable-5.1" defaultEffort={3} />
{/* Or own both */}const [model, setModel] = useState("openai/gpt-5.6-mini");const [effort, setEffort] = useState(1); // 0 Low … 5 Max, see EFFORT_LEVELS<ComposerPanel model={model} onModelChange={setModel} effort={effort} onEffortChange={setEffort} />
{/* Your own catalogue, and the picker on its own */}<ModelPicker providers={[{ id: "acme", name: "Acme", logo: "/logos/acme.svg", models: [{ id: "acme/acme-1", name: "Acme 1" }] }]} value={model} onChange={setModel}/>تبويب الحالة
علامة التبويب عبارة عن شريط رمادي بارتفاع 34 بكسل مقعّر بمقدار 28 بكسل من كل جانب، مستدير من الأعلى فقط، يحمل الفرع ومجلد المشروع وحلقة السياق بحجم 16 بكسل. وهي status slot: render ComposerStatusTab بقيمك الخاصة، أو أضف أي شيء آخر، أو مرّر null للبطاقة الأساسية.
{/* Branch, project folder and context meter */}<ComposerPanel status={<ComposerStatusTab branch="release/2.0" project="boardui" context={82} />}/>
{/* No tab at all */}<ComposerPanel status={null} />الإشارات والأوامر
مرّر triggers ليصبح حقل المطالبة TokenInput: يفتح @ ملفاتك و/ أوامرك في قائمة عند المؤشر، ويصبح الاختيار شريحة ذرية يحذفها Backspace كاملة ويعيدها التراجع. يظل حقل المطالبة يرسل نصًا: يتلقى onSubmit نصًا مثل [@label](type:value)، ويعيده fromText إلى رموز. حقل الرموز مكوّن مجاني قائم بذاته.
import { ComposerPanel } from "@/components/application/composer-panel/composer-panel";import { fromText } from "@/components/base/token-input/token-input";
const triggers = [ { char: "@", type: "file", title: "Files", items: files }, { char: "/", type: "command", title: "Commands", boundary: "start", tone: "accent", items: commands },];
<ComposerPanel triggers={triggers} onSubmit={(text) => { // "Review [@sidebar.tsx](file:components/sidebar.tsx)" const value = fromText(text); // text and { type, value, label } tokens send(value); }}/>ربطه
المحث عبارة عن منطقة نص تنمو سطراً في كل مرة حتى عشرة أسطر. Enter يرسل و Shift+Enter يكسر السطر؛ onSubmit يستقبل النص ويمسح الحقل نفسه تلقائيًا عند استخدامه بدون تحكم. disabled يُعطّل الإرسال أثناء تنفيذ دور، و inputRef يصل إلى الحقل للتركيز.
const [draft, setDraft] = useState("");const inputRef = useRef<HTMLTextAreaElement>(null);
<ComposerPanel value={draft} onValueChange={setDraft} onSubmit={(message) => send(message)} // Enter sends, Shift+Enter breaks the line disabled={waiting} placeholder="Hi, what do you need today?" inputRef={inputRef}/>المرفقات
تحمل نفس البطاقة شريطاً من بلاطات الملفات بحجم 56 بكسل فوق المحث، يرسم كل منها حلقة الرفع أثناء وصول ملفه. للبلاطات والشريط وطابور الرفع التسلسلي صفحتها الخاصة.