Thinkingv1.0.1
بلوکِ باز/بستهٔ استدلالِ یک مدل ریزنینگ، شبیه Claude یا o1. تا وقتی مدل کار می‌کند تیترش زمانِ سپری‌شده را می‌شمارد؛ وقتی تمام شد، تیتر می‌شود «فکر کرد برای N ثانیه» و پیش‌فرض بسته می‌ماند، چون معمولاً فقط جواب نهایی مهم است.
این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
نصب
با CLI اختصاصی digdesign کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.
npx digdesign@latest add https://docs.digdesign.ir/r/thinking.jsonpnpm dlx digdesign@latest add https://docs.digdesign.ir/r/thinking.jsonyarn dlx digdesign@latest add https://docs.digdesign.ir/r/thinking.jsonbunx --bun digdesign@latest add https://docs.digdesign.ir/r/thinking.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
استفاده
import {
Thinking,
ThinkingContent,
ThinkingStep,
ThinkingTrigger,
} from "@/components/ui/thinking"
<Thinking state={isStreaming ? "thinking" : "done"}>
<ThinkingTrigger />
<ThinkingContent>
<ThinkingStep>گام اول استدلال…</ThinkingStep>
</ThinkingContent>
</Thinking>این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
ترکیب اجزا
روی Collapsible ساخته شده؛ state روی خودِ Thinking فقط متن و آیکونِ ThinkingTrigger پیش‌فرض را عوض می‌کند («در حال فکر کردن…» با پالسِ آیکون، یا «فکر کرد برای N ثانیه»).
زمان را خودش می‌شمارد از لحظه‌ای که state="thinking" می‌نشیند؛ اگر مدت را از سرور دارید (مثلاً از متادیتای پاسخ)، duration بدهید تا به‌جای شمارشِ خودش همان عدد را نشان دهد.
ThinkingTrigger با children دلخواه هم قابل جایگزینی است؛ متن پیش‌فرض فقط وقتی می‌آید که چیزی پاس ندهید.
دسترس‌پذیری
- تریگر یک دکمهٔ واقعی است با aria-expanded خودکار از Collapsible.
- زمانِ سپری‌شده فقط بصری است؛ برای صفحه‌خوان چیزی جدا اعلام نمی‌شود، پس اگر تغییر عدد هر ثانیه باید شنیده شود، خودتان یک aria-live جدا اضافه کنید.
مرجع API
Thinking
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| state | "thinking" | "done" | "done" | thinking یعنی هنوز کار می‌کند (زمان می‌شمارد و آیکون پالس می‌زند)؛ done یعنی تمام شده. |
| duration | number | — | مدت‌زمان نهایی به ثانیه، وقتی خودتان بیرون اندازه گرفته‌اید؛ ندادنش یعنی خودش از لحظهٔ thinking شدن می‌شمارد. |
| defaultOpen / open / onOpenChange | boolean / boolean / (open: boolean) => void | false | همان API خودِ Collapsible. |
ThinkingStep
| ویژگی | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| icon | ReactNode | — | آیکون کوچک قبل از متنِ گام؛ اختیاری. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک در دست کار است.
نمونه‌ها
Custom Trigger Text
با دادنِ children به ThinkingTrigger متنِ پیش‌فرض کنار می‌رود و همان چیزی که بدهید نشان داده می‌شود.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
Duration از سرور
با دادنِ duration، خودش دیگر زمان نمی‌شمارد و همان عددِ ثابت را نشان می‌دهد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار می‌آید |
|---|---|
| Custom Trigger Text | با دادنِ children به ThinkingTrigger متنِ پیش‌فرض کنار می‌رود و همان چیزی که بدهید نشان داده می‌شود. |
| Duration از سرور | وقتی مدت‌زمانِ واقعی را از متادیتای پاسخِ سرور دارید |
دستورالعمل استفاده
پیش‌فرض بسته بماند
انجام بده
بگذارید defaultOpen پیش‌فرضش (false) بماند؛ کاربر معمولاً فقط جوابِ نهایی را می‌خواهد، نه مسیرِ رسیدن به آن. اگر کنجکاو بود خودش باز می‌کند.
انجام نده
با defaultOpen همیشه‌باز، هر پاسخ یک بلوکِ اضافه زیرِ خودش می‌کشد که اکثرِ کاربرها هرگز نمی‌خوانندش؛ فقط صفحه را شلوغ می‌کند.
فقط برای استدلالِ واقعیِ چندمرحله‌ای
انجام بده
وقتی مدل واقعاً چند مرحله طول کشیده (جستجو، اجرای کد، بازبینی)، این بلوک شفافیتِ واقعی می‌دهد.
انجام نده
برای یک پاسخِ فوری و ساده، نمایشِ مصنوعیِ «در حال فکر کردن» فقط تاخیرِ ساختگی به کاربر تحمیل می‌کند و صادقانه نیست.