البحث على الويب

المقابل البحثي لقائمة المهام: حيث تسجّل تلك القائمة العمل الذي أنجزه العميل، تسجّل هذه أين ذهب. كل خطوة هي استعلام نفّذه أو صفحة فتحها، وخطوة وجدت شيئاً تتفرع مرة أخرى إلى مصادرها، معروضة كعلامات مواقع متداخلة بحيث تُقرأ سلسلة Reddit كواحدة دون أن يحلل أحد نطاقاً.

في محادثة دردشة

يبدأ إرسال الرسالة المسار، وتتدفق المصادر تحت دور المستخدم، وينتظر الجواب على onComplete. يشترك مع قائمة المهام في الكشف والحافة المقصوصة والدليل المنحني، بحيث يمكن وضع الاثنين في خيط واحد دون أن يبدوا كمنتجَين مختلفَين.

أرسل الرسالة لبدء البحث.

التثبيت

البحث على الويب جزء من BoardUI Pro.

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

وصول Pro

البحث على الويب هو مكوّن Pro مكوّن.

ترخيص BoardUI Pro الخاص بك يفتح هذا مكوّن وجميع ملفاته المصدرية. فعّل ترخيصك مرة واحدة، ثم ثبّته مباشرة في مشروعك باستخدام CLI.

01

فعّل ترخيصك

استخدم المفتاح من بريد الشراء الإلكتروني الخاص بـ Lemon Squeezy. تحتاج إلى القيام بذلك مرة واحدة فقط لكل جهاز.

npx boardui@latest login YOUR_LICENSE_KEY
02

تثبيت المكوّن

تنسخ CLI المصدر وتحلّ جميع تبعيات BoardUI وnpm نيابةً عنك.

npx boardui@latest add web-search

هذا مكوّن مضمّن في BoardUI Pro

احصل على BoardUI Pro الآن وثبّته فوراً.

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

المصادر

أضف خطوة sources ويتفرع مرة أخرى إلى صف مصادر يحمل العلامات كمكدس متداخل. جدول من خمسة روابط هو أثقل ما يمكن أن يظهر في الخيط ولا أحد يقرأه أثناء التشغيل؛ ما يريد القارئ رؤيته بنظرة سريعة هو أين بحث الوكيل، وهو ما تجيب عليه العلامات المعروفة فوراً. كل منها يحمل عنوانه ونطاقه عند التمرير، ويرتفع فوق جيرانه، ويصبح رابطاً عند تمرير href. بعد ستة، يتقلص الباقي إلى عدد.

{ label: "Component library pricing", meta: "5 results", sources: [ { title: "Tailwind UI vs building your own", domain: "www.reddit.com", brand: "reddit", href: "…" }, { title: "We shipped our design system in 6 weeks", domain: "www.linkedin.com", brand: "linkedin" }, { title: "shadcn/ui — the registry model", domain: "github.com", brand: "github" }, ],}

علامات الموقع

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

// Any of the 24 marks the design system already draws.{ label: "Searched Reddit for", query: "component library", brand: "reddit" }{ label: "Searched X for", query: "design tokens", brand: "x" }{ label: "Checked the repo", brand: "github" } // Anything else takes a plain icon instead.{ label: "Ran 3 searches", icon: RiSearchLine }

الإيقاع

البحث الذي يضرب الذاكرة المؤقتة وذاك الذي يزحف عبر خمس صفحات لا يستغرقان نفس الوقت، وسجل يسير بإيقاع ثابت يُقرأ كقائمة تُطبع لا كعمل يجري. أعطِ خطوة dwell ويبقى الأثر هناك لفترة أطول، يتلألأ طوال الوقت، قبل أن يصل التالي. تنقسم خطوة ذات مصادر إلى اثنتين: الخطوة، ثم صف مصادرها بعد لحظة.

أثناء تشغيل البحث، يجلس مؤشر تفكير الوكيل في نهاية المسار ويتحرك للأسفل مع وصول كل خطوة، بحيث ينتهي السجل دائمًا بما يُعمَل عليه لا بآخر شيء اكتمل. يختفي عند اكتمال التشغيل. مرِّر working لإعادة تسميته، أو false لإسقاطه.

const steps = [ { label: "Ran 3 searches", icon: RiSearchLine, heading: true, dwell: 2200 }, { label: "Searching for what teams pay for", meta: "5 results", dwell: 2400, sources }, { label: "Searched X for", query: "design system pricing", brand: "x", dwell: 1900 },];

تشغيله من أحداث حقيقية

لا تزال فترات الانتظار بديلاً مؤقتاً للكمون الحقيقي. بمجرد توفر بث مباشر، مرّر revealed وتقدّمه مع حل كل استعلام؛ يتوقف المؤقت الداخلي وتبقى كل الرسوم المتحركة كما هي. يحسب الصفوف، لذا فإن خطوة تحمل مصادر تُعدّ اثنتين منها.

// One unit per row, so a step that found sources is two: the step,// then its Sources row a beat later. Advance it as each query resolves// and the internal timer stays out of the way.<WebSearch steps={steps} revealed={rowsSeen} />