Suhbat oqimi

1. root.fx-conversationşart
2. log.fx-conversation__logşart
3. empty.fx-conversation__emptyixtiyoriy
4. jump.fx-conversation__jumpixtiyoriy
5. foot.fx-conversation__footixtiyoriy

role="log" aria-live="polite" tabindex="0" + aria-label. «Yangi xabar» tugmasi — oddiy tugma, foydalanuvçi yuqorida bölgandagina körinadi. Oqim paytida aria-busy bilan töliq takrorlaş oldi olinadi. Reduced-motion'da pastga sakraş silliq emas.

Naqş: WAI-ARIA APG feed · rol log

npx foxui add conversation

<div class="fx-conversation" id="cv1" data-fx-conversation style="block-size: 34rem">
  <div class="fx-conversation__log" role="log" aria-live="polite" aria-label="Suhbat" tabindex="0">
    <div class="fx-message-divider" data-type="date"><span>Bugun</span></div>
    <div class="fx-message" data-role="user"><div class="fx-message__body">Nofaol mijozlarni arxivga köçir va oktabr hisobotini qayta hisobla.</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><time>09:14</time></div>
      <div class="fx-message__body">
        <details class="fx-reasoning" data-fx-reasoning data-state="done"><summary><svg data-fx-icon="spark" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></svg><span class="fx-reasoning__label">8 soniya öyladi</span><svg data-fx-icon="chev" class="fx-reasoning__chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></summary><div class="fx-reasoning__body"><p>12 ta yozuv 2 yildan beri özgarmagan. Avval arxivlayman, keyin hisoblayman.</p></div></details>
        <p>Tayyor: 12 ta nofaol mijoz arxivga köçirildi, oktabr tuşumi 1 284 500 000 söm<span class="fx-cite"><a class="fx-cite__pill" href="#cv-src" aria-describedby="cv-c1">1</a><span class="fx-cite__card" id="cv-c1" role="tooltip"><span class="fx-cite__site"><span class="fx-cite__fav" aria-hidden="true">M</span>moliya.example.uz</span><span class="fx-cite__title">Oktabr oyi savdo hisoboti</span></span></span>.</p>
        <div class="fx-msgactions" role="toolbar" aria-label="Javob amallari" data-fx-msgactions data-reveal="hover"><button type="button" class="fx-msgactions__btn" data-action="copy" aria-label="Nusxalaş"><svg data-fx-icon="copy" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/></svg><svg data-fx-icon="check" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5 9-10"/></svg></button><button type="button" class="fx-msgactions__btn" data-action="retry" aria-label="Qayta yaratiş"><svg data-fx-icon="retry" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 12a8 8 0 1 1-2.3-5.7M20 4v5h-5"/></svg></button><button type="button" class="fx-msgactions__btn" data-action="like" aria-pressed="false" aria-label="Yoqdi"><svg data-fx-icon="up" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 11v9H4v-9h3zM7 11l4-7c1.5 0 2.5 1 2.5 2.5V9H19a2 2 0 0 1 2 2.3l-1 6A2 2 0 0 1 18 19H7"/></svg></button><button type="button" class="fx-msgactions__btn" data-action="dislike" aria-pressed="false" aria-label="Yoqmadi"><svg data-fx-icon="down" viewBox="0 0 24 24" aria-hidden="true"><g transform="rotate(180 12 12)"><path d="M7 11v9H4v-9h3zM7 11l4-7c1.5 0 2.5 1 2.5 2.5V9H19a2 2 0 0 1 2 2.3l-1 6A2 2 0 0 1 18 19H7"/></g></svg></button><span class="fx-msgactions__status" role="status"></span></div>
      </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-thinking" role="status"><svg data-fx-icon="spark" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></svg><span class="fx-shimmer-text">Öylayapti…</span></span></div>
    </div>
  </div>
  <button type="button" class="fx-conversation__jump" hidden><svg data-fx-icon="arrowdown" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7"/></svg><span>Yangi xabar</span><span data-count></span></button>
  <div class="fx-conversation__foot"><form class="fx-composer" data-fx-composer aria-label="Mister Foxga xabar"><div class="fx-composer__row"><textarea class="fx-composer__input" rows="1" placeholder="Mister Foxga yozing…" aria-label="Xabar"></textarea><button type="button" class="fx-composer__send" aria-label="Ovoz yoziş" data-label-mic="Ovoz yoziş" data-label-send="Yuboriş" data-label-stop="Töxtatiş"><svg data-fx-icon="mic" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg><svg data-fx-icon="send" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg><svg data-fx-icon="stop" viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="7" width="10" height="10" rx="2"/></svg></button></div></form></div>
</div>

Tokenlar: --fx-bg-brand-solid --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-enter --fx-ease-standard --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-semibold --fx-motion-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-motion-shift-sm --fx-radius-circle --fx-shadow-md --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-on-brand --fx-text-primary --fx-text-secondary