تفكير الوكيل
حالة تفكير الوكيل التي تظهر فوق محرر المحادثة أثناء معالجة الرد. أربعة متغيرات منتقاة - شبكة نقاط تعبرها موجة قطرية، وشبكة نقاط مع رأس يدور حولها، ونجوم متلألئة، ومذنب لانهائي - يقرن كل منها مؤشره بتسمية متلألئة ومؤقت للوقت المنقضي.
التثبيت
يمكنك إضافة مكوّن التحميل هذا باستخدام CLI الخاص بنا أو يدويًا:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add agent-thinkingهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
موجة النقاط
شبكة نقاط 3×3 يعبرها جبهة موجية قطرية - يدخل شريط مضيء من أعلى اليسار، ويتحرك نحو أسفل اليمين مع أثر متلاشٍ، ثم يعود بعد توقف. هذا هو المتغير الافتراضي.
<AgentThinking variant="wave" />دوران النقاط
نفس الشبكة مع رأس مضيء يدور في اتجاه عقارب الساعة، تاركاً ذيل مذنب - يُقرأ كدوران ثابت دون رمز دوّار.
<AgentThinking variant="spin" />النجوم
خمس بريقات رباعية النقاط تتلألأ ظهوراً واختفاءً بتأخير متدرج. تعتمد افتراضياً على النبرة الخفية لتبدو أهدأ من شبكات النقاط.
<AgentThinking variant="stars" />ما لا نهاية
مسار مذنب يدور في شكل رقم ثمانية فوق مسار خافت - حركة مستمرة بلا بداية ولا نهاية، لأعمال الوكيل طويلة الأمد.
<AgentThinking variant="infinity" />التسمية والنبرة والمؤقت
كل متغير يشترك في نفس الخيارات: label يضبط نص الحالة، showTimer يبدّل عرض الثواني المنقضية، shimmer يبدّل التمييز المتحرك، و tone يتجاوز اللون الافتراضي لكل متغيّر. تعود جميع الحركات إلى حالة ثابتة ضمن prefers-reduced-motion.
{/* Status copy and elapsed timer */}<AgentThinking variant="spin" label="Searching the docs" /><AgentThinking variant="wave" showTimer={false} />
{/* Tone defaults per variant (stars is subtle); override with `tone` */}<AgentThinking variant="infinity" tone="accent" />
{/* Static label instead of the traveling shimmer */}<AgentThinking variant="wave" shimmer={false} />