Harakat · molecule
AI checkpoint
AI suhbati yoki agent lentasidagi «şu nuqtaga qaytiş» belgisi (4.204, Vercel AI Elements «Checkpoint»; Cursor va Claude Code'dagi rewind). Ajratuvçi çiziq ustida tabletka: bayroq, nom va vaqt, qisqa meta («3 fayl, 12 qator») va «Şu nuqtaga qaytiş» tugmasi. Bosilganda bekor qilinadigan «fx-checkpoint-restore» hodisasi {id, after} çiqadi — ilova fayl va ma'lumotlarni şu holatga qaytaradi; töxtatilmasa belgidan keyingi yozuvlar [data-reverted] (xira, kulrang, inert — bosilmaydi) böladi, belgi data-state="restored" va tugma «Qaytarişni bekor qiliş»ga aylanadi (fx-checkpoint-undo). Lentada bir vaqtda bitta belgi qaytarilgan böladi. Natija jonli hududda aytiladi. data-variant: line (standart) yoki compact (çiziqsiz tabletka).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | linecompact çiziqsiz | line |
Anatomiya
- root (role=group)
.fx-checkpointşart - pill
.fx-checkpoint__pillşart - icon
.fx-checkpoint__iconixtiyoriy - label (vaqt bilan)
.fx-checkpoint__labelşart - meta
.fx-checkpoint__metaixtiyoriy - restore (tugma)
.fx-checkpoint__restoreşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space | Şu nuqtaga qaytadi / qaytarişni bekor qiladi |
| Tab | Bekor qilingan yozuvlar ötkazib yuboriladi (inert) |
Belgi role="group" aria-label («Checkpoint, 14:32»), vaqt <time datetime>. Tugma aria-pressed bilan (qaytarilgan holat) va matni holatga qarab özgaradi. Bekor qilingan yozuvlar inert — Tab ularga tuşmaydi, ekran öquvçi ham ötkazib yuboradi; natija aria-live orqali aytiladi («keyingi 3 ta yozuv bekor qilindi»). Holat rang bilan birga çiziq turi, ikon (↶/↷) va söz bilan.
Naqş: WAI-ARIA APG button · rol group
Kod
AI uçun: qaçon işlatiladi
- AI agent fayl yoki ma'lumotni özgartiradigan suhbatlarda (kod yordamçisi, hujjat tahriri).
- Uzun AI sessiyasida tajriba qilib, keyin oldingi holatga qaytiş kerak bölganda.
- Sana yoki bölim ajratuvçisi →
divider - Bitta amalni bekor qiliş →
toast - Versiyalar tarixi →
timeline - Har xabarga checkpoint qöymang — faqat fayl, ma'lumot yoki holat özgargan nuqtalarda.
- Qaytarişni jimgina qilmang — keyingi yozuvlar körinib tursin (xira) va «bekor qiliş» imkoni bölsin.
- Qaytarib bölmaydigan taşqi amallarni (yuborilgan email, tölov) checkpoint bilan «qaytdi» deb körsatmang — buni oçiq yozing.
npx foxui add checkpoint
<div class="fx-conversation__log" role="log" aria-label="Agent suhbati" style="display: grid; gap: var(--fx-space-3)"> <div class="fx-message" data-role="user"><div class="fx-message__body">Narx bölimiga yillik tarif qöş.</div></div> <div class="fx-message"><span class="fx-avatar" data-color="purple" role="img" aria-label="Mister Fox">MF</span><div class="fx-message__meta"><span class="fx-message__name">Mister Fox</span><span class="fx-ai-label">AI</span></div><div class="fx-message__body"><p>Qöşdim: <code>pricing.html</code> va <code>pricing.css</code> yangilandi, oylik/yillik almaştirgiç işlaydi.</p></div></div> <div class="fx-checkpoint" data-fx-checkpoint data-id="cp-1" role="group" aria-label="Checkpoint, 14:32"><span class="fx-checkpoint__pill"><span class="fx-checkpoint__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg></span><span class="fx-checkpoint__label">Checkpoint · <time datetime="2026-10-18T14:32:00+05:00">14:32</time></span><span class="fx-checkpoint__meta">2 fayl, 48 qator</span><button class="fx-checkpoint__restore" type="button" data-checkpoint="restore">Şu nuqtaga qaytiş</button></span></div> <div class="fx-message" data-role="user"><div class="fx-message__body">Endi hamma narxlarni dollarga ötkaz.</div></div> <div class="fx-message"><span class="fx-avatar" data-color="purple" role="img" aria-label="Mister Fox">MF</span><div class="fx-message__meta"><span class="fx-message__name">Mister Fox</span><span class="fx-ai-label">AI</span></div><div class="fx-message__body"><p>Bajarildi: 6 ta narx dollarga ötkazildi, söm olib taşlandi.</p></div></div> <div class="fx-checkpoint" data-fx-checkpoint data-id="cp-2" role="group" aria-label="Checkpoint, 14:37"><span class="fx-checkpoint__pill"><span class="fx-checkpoint__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg></span><span class="fx-checkpoint__label">Checkpoint · <time datetime="2026-10-18T14:37:00+05:00">14:37</time></span><span class="fx-checkpoint__meta">1 fayl, 6 qator</span><button class="fx-checkpoint__restore" type="button" data-checkpoint="restore">Şu nuqtaga qaytiş</button></span></div> <div class="fx-message" data-role="user"><div class="fx-message__body">Yöq, sömda qolsin edi…</div></div> </div>
Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-standard --fx-font-size-xs --fx-font-weight-medium --fx-motion-base --fx-motion-fast --fx-motion-press --fx-radius-pill --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-6 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary