Context Cardsv1.0.0
پیش از پاسخِ نهاییِ یک agent مبتنیِ RAG، این را نشان بده که پاسخ از کجا آمده. هر کارت یک قطعهٔ بازیابی‌شده است، به‌همراهِ منبع (فایل/صفحهٔ وب) و تعدادِ نویسه — شفافیتی که به کاربر اجازه می‌دهد صحتِ منبع را خودش بررسی کند.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/context-cards.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/context-cards.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/context-cards.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/context-cards.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import { ContextCard, ContextCards } from "@/components/ui/context-cards"
<ContextCards total={chunks.length}>
{chunks.map((chunk) => (
<ContextCard key={chunk.id} {...chunk} />
))}
</ContextCards>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
ContextCards فقط تیترِ اختیاریِ «همهٔ قطعه‌ها + عدد» و یک ستونِ ساده است. ContextCard یک کارتِ مستقل است؛ آیکونِ منبع از رویِ sourceType انتخاب می‌شود (pdf/csv/doc از FileText، web از Globe).
دسترس‌پذیری
- کارت‌ها div ساده‌اند، نه لینک؛ اگر قرار است با کلیک به منبعِ اصلی برود، خودتان یک <a> یا دکمه دورش بگذارید.
مرجع API
ContextCards
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| total | number | — | نبودنش یعنی تیترِ «همهٔ قطعه‌ها» نمایش داده نمی‌شود. |
ContextCard
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| title | ReactNode | — | عنوانِ قطعه. |
| snippet | ReactNode | — | متنِ واقعیِ قطعه. |
| charCount | number | — | نبودنش یعنی عددِ نویسه نمایش داده نمی‌شود. |
| sourceLabel | ReactNode | — | نامِ فایل یا آدرسِ منبع. |
| sourceType | "pdf" | "csv" | "doc" | "web" | "doc" | آیکونِ کنارِ منبع را تعیین می‌کند. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
Web Source
sourceType="web" آیکونِ Globe را نشان می‌دهد؛ sourceLabel می‌تواند آدرسِ کامل یا نامِ سایت باشد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Without Char Count
با ندادنِ charCount، آن بخش از هدرِ کارت اصلاً رندر نمی‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| Web Source | قطعه‌ای که از یک صفحهٔ وب بازیابی شده، نه فایلِ داخلی |
| Without Char Count | وقتی تعدادِ نویسه اطلاعِ مفیدی برایِ کاربرِ نهایی نیست |
دستورالعمل استفاده
snippet را به اندازهٔ یک تصمیم نگه دار
گواهیِ زنجیرهٔ سرد باید پیش از افزودنِ یک لبنیاتیِ تازه به فرآیندِ سفارشِ مجدد تایید شود.
انجام بده
یکی دو جمله‌ای که واقعاً به پاسخِ نهایی ربط دارد، به کاربر اجازهٔ راستی‌آزماییِ سریع می‌دهد.
گواهیِ زنجیرهٔ سرد باید پیش از افزودنِ یک لبنیاتیِ تازه به فرآیندِ سفارشِ مجدد تایید شود. این گواهی باید توسطِ واحدِ کنترلِ کیفیت صادر شده باشد و حداکثر سه ماه از تاریخِ صدورش گذشته باشد. علاوه‌بر این، تامین‌کننده باید سابقهٔ حداقل یک‌سالهٔ همکاری بدونِ گزارشِ تخلف داشته باشد و در فهرستِ تامین‌کنندگانِ تاییدشدهٔ سازمان ثبت شده باشد.
انجام نده
چسباندنِ کلِ سند در snippet، هدفِ کارت (نشان‌دادنِ دقیقاً همان تکه‌ای که استفاده شده) را از بین می‌برد.
sourceType را با نوعِ واقعیِ فایل هماهنگ کن
جدولِ سرعتِ سهِ‌ماههٔ چهارم برایِ سه طعمِ اصلی.
انجام بده
آیکونِ درست (pdf/csv/web) به کاربر کمک می‌کند سریع بفهمد منبع از کجا آمده.
جدولِ سرعتِ سهِ‌ماههٔ چهارم برایِ سه طعمِ اصلی.
انجام نده
sourceType نادرست (مثلاً pdf برایِ یک فایلِ csv) کاربر را در بررسیِ منبعِ اصلی گمراه می‌کند.