محمّل Composer

حالة التحميل التي تلف محرر المحادثة أثناء عمل العميل - شريط ضوء قزحي يتنقل على حافة الحبة بسرعة ثابتة، تقوده خط انكسار حاد مع توهج ناعم ينزف للداخل خلفه. تشغيله وإيقافه يُلاشي التأثير بالكامل، بحيث يبدو المحرر كأنه يضيء بدلاً من أن يُشغَّل.

التثبيت

يمكنك إضافة تأثير التحميل هذا باستخدام CLI الخاص بنا أو يدويًا:

الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.

CLI

يدوي

تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.

npx boardui@latest add composer-loader

هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.

في محادثة

المشهد الواقعي: تصل رسالة المستخدم، ويضيء المحرر بينما الـ AgentThinking يفكر فوقه وتتحول عناصر تحكم المؤلف إلى زجاج سائل، ثم تصل الردود ويتلاشى كل شيء. قُد كل ذلك بـ waiting - التلاشي للظهور والتلاشي للاختفاء مدمجان.

57%

const [waiting, setWaiting] = useState(false);
async function send(message: string) {  setWaiting(true);           // light fades in, AgentThinking appears  await complete(message);  setWaiting(false);          // reply landed — everything fades out}
{waiting && <AgentThinking variant="infinity" />}<ComposerLoader active={waiting}>  <Composer className="bg-transparent shadow-none" /></ComposerLoader>

المحرر نفسه

الحبة في هذه المعاينات هي محرّر الرسائل، شُحن حقل إدخال قالب AI Chat بوصفه Pro كتلة: قوائم المرفقات والنماذج العاملة، وعناصر التحكم في الميكروفون والإرسال، وشريط الحالة، ومعالجة الزجاج السائل التي يستخدمها العرض التوضيحي. يلفّ Composer Loader أي محرر نصوص لديك؛ اقرنه بهذا للحصول على المظهر الدقيق أعلاه.

اطّلع على مكوّن Composer

الضبط الدقيق

الإضاءة الافتراضية هي النمط المنزلي المضبوط. colors ينشر أربع نقاط توقف عبر الحبة، arc يضبط مقدار احتلال الشريط للحافة، bloom و bloomStrength تحديد مدى نزيف الضوء إلى الداخل، و speed هي الثواني لكل دورة. يتحرك الشريط بسرعة ثابتة ويلتف حول الأغطية الطرفية؛ تتوقف الحركة تحت prefers-reduced-motion.

{/* Everything ships tuned; override per surface as needed */}<ComposerLoader  colors={["#5eead4", "#46baec", "#e633a4", "#00faa7"]}  speed={4.5}        // seconds per lap  arc={120}          // how much of the rim the band occupies  intensity={0.7}  bloom={16}         // how far the light bleeds inward, px  bloomStrength={0.3}  reverse={false}  radius={26}        // omit for a full pill>  ...</ComposerLoader>