Reasoning

زنجیرهٔ استدلالی تاشو.

کجا به کارش ببرید: وقتی مدل استدلالش را جدا از پاسخ نشان می‌دهد و می‌خواهید خواننده روند آن را ببیند، اما پس از پایان روی صفحه نماند.

استدلال تنها بخشی از یک پاسخ است که خواننده می‌خواهد هنگام رخ دادن ببیندش و تقریباً هرگز نمی‌خواهد نگهش دارد. برای همین این عنصر تا وقتی streaming برقرار است باز می‌ماند و با برداشته‌شدنش بسته می‌شود.

تا وقتی خواننده دست به آن نزند. به‌محض اینکه خودش آن را باز یا بسته کند، این رفتار خودکار برای همیشه متوقف می‌شود. همین قاعدهٔ مالکیت در پیمایش هم با createBottomFollower برقرار است و به همان دلیل: رابطی که مدام چیزی را دوباره تصمیم می‌گیرد که خواننده پیش‌تر تصمیمش را گرفته، از رابطی که هرگز تصمیم نمی‌گیرد بدتر است. تعیین open از سمت کد هم به‌معنای در دست گرفتن کنترل است، چون کد از طرف فراخواننده‌ای عمل می‌کند که نظری دارد.

شروع سریع

<r-reasoning label="Thinking"></r-reasoning>

const reasoning = document.createElement('r-reasoning');

reasoning.streaming = true; // باز می‌شود
reasoning.content += delta; // جلوی چشم رشد می‌کند
reasoning.duration = 4200; // «4.2s» کنار برچسب
reasoning.streaming = false; // بسته می‌شود، مگر خواننده دخالت کرده باشد

conversation.append(reasoning);

ranuts/stream از پیش reasoning-delta را از text-delta جدا نگه می‌دارد، پس یک view می‌تواند مستقیم از روی یک snapshot این را تغذیه کند:

reasoning.content = snapshot.blocks
  .filter((block) => block.type === 'reasoning')
  .map((block) => block.text)
  .join('');
reasoning.streaming = !snapshot.done;

نکته‌هایی که دانستنشان می‌ارزد

• مدت‌های زیر یک ثانیه اصلاً نمایش داده نمی‌شوند. برای خواننده مهم است که سریع بوده، نه اینکه ۳۴۰ میلی‌ثانیه بوده.
• برچسب هنگام جریان می‌تپد، تا فکر کردن طولانی و خاموش، گیر کردن خوانده نشود. زیر prefers-reduced-motion انیمیشن خاموش می‌شود بی‌آنکه اطلاعاتی از دست برود.
• اسلات پیش‌فرض جای متن رندرشده را می‌گیرد، برای فراخواننده‌ای که به‌جای متن ساده <r-markdown> در بدنه می‌خواهد.

مرجع API

خصیصه‌ها

خصیصه	نوع	پیش‌فرض	توضیح
content	string	''	متن استدلال. تخصیص پیاپی همان مسیر جریان‌سازی است.
streaming	boolean	false	اینکه استدلال هنوز در حال رسیدن است یا نه.
open	boolean	false	اینکه بدنه باز است یا نه.
label	string	'Reasoning'	متن سطر خلاصه.
duration	number | null	null	میلی‌ثانیه‌های صرف‌شده برای فکر کردن. زیر یک ثانیه پنهان است.
sheet	string	''	CSS تزریق‌شده به shadow DOM عنصر.

duration‌ای که عدد متناهی و نامنفی نباشد، هنگام خواندن null برمی‌گردد.

اسلات‌ها

اسلات	توضیح
(پیش‌فرض)	متن رندرشده را با محتوای بدنهٔ خودتان جایگزین می‌کند.

Part‌ها

reasoning، summary، marker، label، meta، body، text.

دسترس‌پذیری

سطر خلاصه یک <button type="button"> واقعی با aria-expanded است، پس بدون سیم‌کشی اضافه با صفحه‌کلید در دسترس و قابل استفاده است.

استایل

<r-reasoning> ۴ ویژگی سفارشی CSS از آنِ خود و افزون بر آن توکن‌های معنایی‌ای که از پوسته می‌خواند در اختیار می‌گذارد. آن را هرجا که ارث می‌رسد تعیین کنید: :root، یک نگه‌دارنده، یا خود عنصر.

r-reasoning {
  --ran-reasoning-color: var(--ran-color-text-secondary);
}

Part‌ها: body · row · text

فهرست کامل در توکن‌های استایل است و اینکه کدام توکن را برگزینید در سیستم طراحی آمده.

همچنین ببینید

• Conversation: این را به‌عنوان سطر استدلالِ یک رونوشت گفت‌وگو سوار کنید
• ranuts/stream: جایی که reasoning-delta از آن می‌آید