Körsatiş · compound
Xabar (AI)
Suhbat xabari: AI agent yoki odam — avatar, ism, vaqt, matn; foydalanuvçi xabari öngda brend tusida. Qöşimça: «yozmoqda» belgisi (.fx-typing) va AI yorliği (.fx-ai-label). Kengaytma: data-group=cont (ketma-ket, avatarsiz), .fx-message__variants (2/3), data-state=editing|error, .fx-message__retry, matn içida kod va jadval.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-role | assistantuser | assistant |
Anatomiya
- root
.fx-messageşart - meta
.fx-message__metaixtiyoriy - name
.fx-message__nameixtiyoriy - body
.fx-message__bodyşart - typing
.fx-typingixtiyoriy - ai-label
.fx-ai-labelixtiyoriy - variants
.fx-message__variantsixtiyoriy - retry
.fx-message__retryixtiyoriy
Klaviatura va kiriş
Suhbat röyxati role="log" (aria-live="polite") içida; «yozmoqda» role="status".
Kod
AI uçun: qaçon işlatiladi
- AI agent yoki odam bilan suhbat, izohlar lentasi.
- Tizim xabari →
toast - AI yaratgan matnni yorliqsiz körsatmang — .fx-ai-label.
npx foxui add message
<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><time>09:14</time></div> <div class="fx-message__body"><p>FoxUI 0.15.0 çiqdi: buyruqlar oynasi va combobox. Sinovlar ötdi.</p></div> </div> <div class="fx-message" data-role="user"> <div class="fx-message__body">Qolganlarni ham bajar.</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></div> <div class="fx-message__body"><span class="fx-typing" role="status" aria-label="Yozmoqda"><i></i><i></i><i></i></span></div> </div> <div class="fx-message" data-group="cont"><div class="fx-message__body">Ikkinçi xabar.<pre><code>npm i foxui</code></pre></div></div>
Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-category-purple-subtle --fx-bg-muted --fx-bg-pressed --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-error --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-control-h-sm --fx-duration-pulse --fx-ease-standard --fx-fg-error --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-badge --fx-radius-circle --fx-radius-control --fx-radius-overlay --fx-radius-surface --fx-radius-tag --fx-size-avatar-md --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-6 --fx-text-brand --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary