TokenMeter

اینکه یک گفت‌وگو چه اندازه از پنجرهٔ بافتار را گرفته است.

کجا به کارش ببرید: وقتی دارید رابط گفت‌وگویی برای مدلی با محدودیت بافتار می‌سازید. کلاینتی که این را نشان نمی‌دهد اولش خوب کار می‌کند و بعد از کار می‌افتد: هر نوبت کل تاریخچه دوباره فرستاده می‌شود، درخواست فقط بزرگ‌تر می‌شود و سرانجام ارائه‌دهنده آن را به‌خاطر گذشتن از حد رد می‌کند. این کامپوننت آن رشد را پیش از رد شدن نشان می‌دهد.

شروع سریع

استفادهٔ پایه

<r-token-meter limit="65536" used="12800"></r-token-meter>

const meter = document.createElement('r-token-meter');
meter.limit = 65536;
meter.used = 41200; // بافتاری که درخواست بعدی حمل می‌کند
meter.spent = 128431; // توکن‌های محاسبه‌شده در کل گفت‌وگو، اختیاری
composer.append(meter);

نوار تا used / limit پر می‌شود و از سه سطح بالا می‌رود: ok، warn (از ۸۰٪ حد) و over. level روی میزبان بازتاب می‌یابد، پس صفحه هم می‌تواند به همان سطحی واکنش نشان دهد که نوار نشان می‌دهد:

r-token-meter[level='warn'] ~ .composer-hint {
  display: block;
}

used و spent دو عدد متفاوت‌اند

• used: آنچه درخواست بعدی حمل می‌کند؛ یعنی تاریخچه، نه کل گفت‌وگو. حد روی همین عدد اعمال می‌شود و نوار همین را می‌کشد.
• spent: آنچه تا اینجا در سرتاسر گفت‌وگو محاسبه شده است. تنها زیاد می‌شود و به اندازهٔ پنجره مقید نیست.

کوتاه‌کردن رونوشت گفت‌وگو used را پایین می‌آورد و spent را دست‌نخورده می‌گذارد. نشان‌دادن تنها یکی از این دو، فقط به یکی از دو پرسش کاربر پاسخ می‌دهد («پیام بعدی جا می‌شود؟» و «تا حالا چقدر خرج برداشته؟»).

بدون حد

اگر limit تعیین نشده یا صفر باشد، نوار ناپدید می‌شود و تنها شمارها می‌مانند؛ وقتی اندازهٔ پنجره هنوز معلوم نیست به کار می‌آید.

تغییر برچسب

<r-token-meter label="بافتار" limit="65536" used="41200"></r-token-meter>
<!-- با label="" تنها شمارها می‌مانند -->

مرجع API

خصیصه‌ها

خصیصه	ویژگی	نوع	پیش‌فرض	توضیح
limit	limit	number	0	اندازهٔ پنجرهٔ بافتار برحسب توکن. صفر یا نبودنش نوار را پنهان می‌کند.
used	used	number	0	توکن‌هایی که درخواست بعدی حمل می‌کند.
spent	spent	number	0	توکن‌های محاسبه‌شده در گفت‌وگو تا این لحظه.
label	label	string	'Context'	پیشوند متن نمایشی؛ '' تنها شمارها را می‌گذارد.
level	level	'ok' | 'warn' | 'over'	مشتق‌شده	اینکه پنجره چقدر پر است. خود عنصر تعیینش می‌کند: نوشتنش در به‌روزرسانی بعدی بازنویسی می‌شود.
sheet	sheet	string	''	CSS تزریق‌شده به shadow root.

شمارها برای خواندن سریع قالب‌بندی می‌شوند: زیر هزار دقیق (847 آن‌قدر کوتاه است که دقیق خوانده شود) و بالاتر از آن مخفف (41.2k، 128k)؛ رقم سوم 128,431 هیچ تغییری در کاری که خواننده می‌کند نمی‌دهد.

Part‌ها

Part	عنصر
meter	کل عنصر
track	زمینهٔ نوار
fill	بخش پرشده
text	برچسب و شمارها

دسترس‌پذیری

این عنصر همیشه یک title دارد که عددها را می‌گوید، پس رنگ هرگز تنها حامل هشدار نیست: کهربایی شدن نوار سیگنال دوم است، نه یگانه سیگنال. اگر سطح‌ها را از نو استایل دادید، همین را نگه دارید.

استایل

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

r-token-meter {
  --ran-token-meter-fill-background: var(--ran-color-bg-subtle);
}

Part‌ها: fill · meter · text · track

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

بهترین شیوه‌ها

• used را از همان‌جایی به‌روز کنید که درخواست را می‌سازید، نه از یک پاس رندر: عددی که مردم به آن اعتماد می‌کنند همان است که درخواست بعدی واقعاً می‌فرستد.
• واکنش را پیرامون متر بسازید، نه درون آن. در level="over" رابط سودمند یک پیشنهاد است (خلاصه کنید، رشتهٔ تازه‌ای آغاز کنید) و آن کارِ خودِ برنامه است.
• هنگام تعویض پوسته، پرشدن را انیمیشن ندهید: راهنمای طراحی را ببینید.