Qatlamlar · pattern
AI yordamçi (widget)
Saytlar uçun AI yordamçi: öng pastda dumaloq tugma (çat ikonkasi yoki ixtiyoriy personaj) → suhbat oynasi. Admin, kabinet, login va checkout sahifalarida çiqmaydi (data-exclude bilan özgartiriladi); salom va tayyor savollar til böyiça (data-greeting-ru, data-suggestions-ru). Har sayt faqat sozlama beradi — nom, rang, endpoint, til (uz/ru/en), salom matni, tayyor savollar, menejer kanallari. Javob kelmasa — qayta uriniş; endpoint handoff qaytarsa (byudjet tugagan yoki odam kerak) — «menejer bilan boğlaning» kartasi. Personaj: tinç «nafas», bir martalik qöl silkitiş; jonli inline SVG personaj bölsa, unga holat sinfi qöyiladi: salom, oylayapti, gapiryapti, uzatyapti (Lottie şart emas). Telefonda suhbat pastdan çiqadigan varaq (72 % balandlik, yozişda 92 %), uzun javob ~7 qatordan keyin yiğiladi («Davomi»), salom pufakçasi 2 qatordan oşmaydi va 10 s da özi yöqoladi. Personaj berilmasa yuz — ovoz şari (fx-orb); eski çat ikonkasi — data-face="icon". Panel foni va matni saytnikidan olinadi: CSS'da --assistant-surface / --assistant-text yoki data-surface / data-text (masalan var(--c-bg)); bölmasa saytdagi --surface/--bg, söng FoxUI. Mustaqil widget'da panel uslubi (assistant-panel.css) birinçi oçilişda yuklanadi. Panel (19.10 redizayni): yoziş maydoni va yuboriş — bitta karta; javob — pufaksiz toza matn (qalin, röyxat, havola), ostida nusxa; boşida tanişuv (şar, salom, savol namunalari röyxati); kutiş — «Öylayapman» ustida yoruğlik; «Yangi suhbat».
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | idleopen panel oçiq — köriniş aria-expanded'ga qarab (holat xato yoki menejer bölsa ham)sendingerrorhandoff | idle |
data-mascot | idlewavethinkingtalkinghandoff | idle |
data-color | light oç doira — qora konturli personaj uçun (ikkala rejimda oç); boşqa qiymat — kategoriya rangi nomi (coral, pink …) | brand |
Anatomiya
- root
.fx-assistantşart - mascot
.fx-assistant__mascotixtiyoriy - launcher
.fx-assistant__launcherixtiyoriy - badge
.fx-assistant__badgeixtiyoriy - greeting
.fx-assistant__greetixtiyoriy - panel
.fx-assistant__panelixtiyoriy - head
.fx-assistant__headixtiyoriy - log
.fx-assistant__logixtiyoriy - message
.fx-assistant__msgixtiyoriy - chips
.fx-assistant__chipsixtiyoriy - form
.fx-assistant__formixtiyoriy - handoff
.fx-assistant__handoffixtiyoriy - note
.fx-assistant__noteixtiyoriy - more
.fx-assistant__moreixtiyoriy - intro
.fx-assistant__introixtiyoriy - starters
.fx-assistant__startersixtiyoriy - starter
.fx-assistant__starterixtiyoriy - chip
.fx-assistant__chipixtiyoriy - composer
.fx-assistant__boxixtiyoriy - send
.fx-assistant__sendixtiyoriy - thinking
.fx-assistant__thinkingixtiyoriy - actions
.fx-assistant__actsixtiyoriy - reset
.fx-assistant__resetixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter | Yuboradi (Shift+Enter — yangi qator) |
| Esc | Yopadi, fokus tugmaga qaytadi |
Tugma aria-label va aria-expanded; panel role=dialog (modal emas), Esc yopadi va fokus tugmaga qaytadi; javoblar role=log aria-live; matnlar uz/ru/en.
Naqş: WAI-ARIA APG dialog-modal · rol dialog
Kod
AI uçun: qaçon işlatiladi
- Saytga taşrif buyuruvçining savollariga AI javob beradi, kerak bölsa menejerga ötkazadi.
npx foxui add assistant
<div class="fx-assistant" data-fx-assistant data-site="namuna" data-name="Guli" data-color="pink" data-greet-delay="1500" data-suggestions="Narxlar qancha?|Qancha vaqtda bitadi?|Portfolio" data-handoff-telegram="@namuna_uz" data-handoff-phone="+998 71 200 00 00"></div>
Tokenlar: --fx-bg-brand-solid --fx-bg-error-solid --fx-bg-page --fx-bg-static-light --fx-bg-surface --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-color-black --fx-control-h-lg --fx-control-h-md --fx-control-h-sm --fx-duration-pulse --fx-ease-enter --fx-ease-spring --fx-ease-standard --fx-fg-error --fx-fg-success --fx-fg-warning --fx-font-adjust-display --fx-font-family-display --fx-font-size-2xl --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-knob-pill --fx-motion-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-motion-slow --fx-radius-badge --fx-radius-circle --fx-radius-control --fx-radius-overlay --fx-radius-pill --fx-radius-surface --fx-shadow-lg --fx-shadow-md --fx-shadow-sm --fx-size-icon-lg --fx-size-icon-md --fx-size-icon-sm --fx-size-status-dot-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-error --fx-text-on-brand --fx-text-on-category --fx-text-on-error --fx-text-on-static-light --fx-text-primary