Kiritiş · compound

Yoziş paneli (composer)

AI çat va messenjer uçun BITTA yoziş paneli: biriktiriş tugmasi, avto-ösuvçi maydon, ixtiyoriy emoji, matn bölmasa mikrofon — matn paydo bölsa yuboriş (ikon animatsiyali almaşadi), oqim ketayotganda «Töxtatiş». Tepada javob/tahrir qatori, @eslatma takliflari menyusi, ovoz yoziş holati (brend nuqta, mono taymer) va bloklangan holat (qulf + sabab). Enter yuboradi, Shift+Enter — yangi qator, Esc — javobni bekor qiladi; yuborilganda fx-send hodisasi çiqadi.

beta0.23.0 dan.fx-composerCSS + JS

Variantlar

Atribut	Qiymatlar	Standart
`data-variant`	`messenger` Töldirilgan quduq, çegara va soyasiz; yuboriş tugmasi — doira.	`ai`
`data-voice`	`off` faqat matn — izoh, agentga xat: mikrofon yöq, doim yuboriş belgisi	`on`

Anatomiya

root.fx-composerşart
ctx.fx-composer__ctxixtiyoriy
ctx-author.fx-composer__ctx-authorixtiyoriy
ctx-text.fx-composer__ctx-textixtiyoriy
ctx-close.fx-composer__ctx-closeixtiyoriy
attachments.fx-composer__attachmentsixtiyoriy
row.fx-composer__rowşart
input.fx-composer__inputşart
btn.fx-composer__btnixtiyoriy
send.fx-composer__sendşart
foot.fx-composer__footixtiyoriy
mention.fx-composer__mentionixtiyoriy
mention-name.fx-composer__mention-nameixtiyoriy
mention-role.fx-composer__mention-roleixtiyoriy
rec.fx-composer__recixtiyoriy
rec-dot.fx-composer__rec-dotixtiyoriy
rec-time.fx-composer__rec-timeixtiyoriy
rec-cancel.fx-composer__rec-cancelixtiyoriy
lock.fx-composer__lockixtiyoriy

Holatlar

filledrecordingstreaminglockedfocus

Klaviatura va kiriş

Tugma	Amal
`Enter`	Yuboradi (fx-send)
`Shift+Enter`	Yangi qator
`Esc`	Javob/tahrirni, @menyuni yoki ovoz yozişni bekor qiladi
`↑ (maydon boʻsh)`	fx-edit-last — oxirgi xabarni tahrirlaş
`@ + ↑ ↓, Enter/Tab`	Eslatma tanlaş

Maydon — oddiy textarea (aria-label şart); @menyu oçilganda textarea vaqtinça role="combobox" + aria-activedescendant böladi. Yuboriş tugmasining aria-label'i holatga qarab özgaradi (Ovoz yoziş / Yuboriş / Töxtatiş). Ovoz yoziş boşlanganda va bekor qilinganda role="status" orqali e'lon qilinadi; taymer — role="timer". Bloklangan sabab role="status".

Kod

AI uçun: qaçon işlatiladi

Işlating

AI agent bilan suhbatda prompt kiritiş.
Messenjer va izohlar oqimida xabar yoziş.

Işlatmang

Bir qatorli qidiruv yoki filtr → search
Oddiy forma maydoni (sarlavha, tavsif) → input
AI çat va messenjer uçun ikkita alohida panel yasamang — data-variant="messenger" yetadi.
Yuboriş tugmasini matn bölmaganda ham “yuboriş” deb qoldirmang — mikrofon bölmasa ham aria-label holatga qarab özgarsin (JS buni qiladi).
Ovoz yozişni qizil bilan körsatmang — brend nuqta pulsatsiyasi va vaqt matni yetadi.
Bloklangan holatda sababni yaşirmang — qulf yonida söz bilan yozing.

npx foxui add composer

<form class="fx-composer" id="ai-composer" data-fx-composer aria-label="Mister Foxga xabar">
  <div class="fx-composer__ctx" data-kind="reply" hidden><svg data-fx-icon="reply" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 14L4 9l5-5M4 9h10a6 6 0 0 1 6 6v3"/></svg><svg data-fx-icon="edit" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16v4zM13.5 6.5l4 4"/></svg><span class="fx-composer__ctx-body"><span class="fx-composer__ctx-author"></span><span class="fx-composer__ctx-text"></span></span><button type="button" class="fx-composer__ctx-close" aria-label="Javob yoki tahrirni bekor qiliş"><svg data-fx-icon="x" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button></div>
  <div class="fx-composer__attachments"><div class="fx-attachment" data-fx-attachment><span class="fx-attachment__thumb" aria-hidden="true">PDF</span><span class="fx-attachment__name">oktabr-hisobot.pdf</span><span class="fx-attachment__meta">1,2 MB</span><button type="button" class="fx-attachment__remove" aria-label="oktabr-hisobot.pdf ni olib taşlaş"><svg data-fx-icon="x" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button></div></div>
  <div class="fx-composer__row">
    <input type="file" multiple hidden>
    <button type="button" class="fx-composer__btn" data-composer-attach aria-label="Fayl biriktiriş"><svg data-fx-icon="clip" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12.5l-8.5 8.5a5 5 0 0 1-7-7l9-9a3.3 3.3 0 0 1 4.7 4.7l-9 9a1.7 1.7 0 0 1-2.4-2.4l8.3-8.3"/></svg></button>
    <textarea class="fx-composer__input" rows="1" placeholder="Mister Foxga yozing…" aria-label="Xabar"></textarea>
    <div class="fx-composer__rec"><span class="fx-composer__rec-dot" aria-hidden="true"></span><span class="fx-composer__rec-time" role="timer" aria-label="Yozuv vaqti">0:00</span><span class="fx-composer__rec-label">Ovoz yozilmoqda…</span><button type="button" class="fx-composer__rec-cancel">Bekor qiliş</button></div>
    <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>
  <ul class="fx-composer__mention" id="ai-m" role="listbox" aria-label="Eslatma takliflari" hidden>
    <li role="option" id="ai-m1" data-value="dilnoza"><span class="fx-composer__mention-name">Dilnoza</span><span class="fx-composer__mention-role">dizayner</span></li>
    <li role="option" id="ai-m2" data-value="doniyor"><span class="fx-composer__mention-name">Doniyor</span><span class="fx-composer__mention-role">dasturçi</span></li>
    <li role="option" id="ai-m3" data-value="mister-fox"><span class="fx-composer__mention-name">Mister Fox</span><span class="fx-composer__mention-role">agent</span></li>
  </ul>
  <div class="fx-composer__foot"><span>Enter — yuboriş · Shift+Enter — yangi qator</span><span class="fx-context-meter" role="meter" aria-label="Kontekst" aria-valuemin="0" aria-valuemax="100" aria-valuenow="48" style="--fx-meter-value: 48%"><span class="fx-context-meter__ring" aria-hidden="true"></span><span class="fx-context-meter__value">48 %</span></span></div>
  <div class="fx-composer__lock" role="status"><svg data-fx-icon="lock" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg><span>Yoziş bloklangan.</span></div>
</form>
<form class="fx-composer" id="msn-composer" data-variant="messenger" data-fx-composer aria-label="Dilnozaga xabar">
  <div class="fx-composer__ctx" data-kind="reply"><svg data-fx-icon="reply" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 14L4 9l5-5M4 9h10a6 6 0 0 1 6 6v3"/></svg><svg data-fx-icon="edit" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16v4zM13.5 6.5l4 4"/></svg><span class="fx-composer__ctx-body"><span class="fx-composer__ctx-author">Dilnoza</span><span class="fx-composer__ctx-text">Maketni ertaga ertalab yuboraman, kelişdikmi?</span></span><button type="button" class="fx-composer__ctx-close" aria-label="Javob yoki tahrirni bekor qiliş"><svg data-fx-icon="x" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button></div>
  <div class="fx-composer__row">
    <button type="button" class="fx-composer__btn" data-composer-attach aria-label="Fayl biriktiriş"><svg data-fx-icon="clip" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12.5l-8.5 8.5a5 5 0 0 1-7-7l9-9a3.3 3.3 0 0 1 4.7 4.7l-9 9a1.7 1.7 0 0 1-2.4-2.4l8.3-8.3"/></svg></button>
    <textarea class="fx-composer__input" rows="1" placeholder="Xabar" aria-label="Xabar"></textarea>
    <button type="button" class="fx-composer__btn" data-composer-emoji aria-label="Emoji"><svg data-fx-icon="smile" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M8.5 14a4.5 4.5 0 0 0 7 0M9 9.5v.01M15 9.5v.01"/></svg></button>
    <div class="fx-composer__rec"><span class="fx-composer__rec-dot" aria-hidden="true"></span><span class="fx-composer__rec-time" role="timer" aria-label="Yozuv vaqti">0:00</span><span class="fx-composer__rec-label">Ovoz yozilmoqda…</span><button type="button" class="fx-composer__rec-cancel">Bekor qiliş</button></div>
    <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>
  <ul class="fx-composer__mention" id="msn-m" role="listbox" aria-label="Eslatma takliflari" hidden>
    <li role="option" id="msn-m1" data-value="dilnoza"><span class="fx-composer__mention-name">Dilnoza</span><span class="fx-composer__mention-role">dizayner</span></li>
    <li role="option" id="msn-m2" data-value="doniyor"><span class="fx-composer__mention-name">Doniyor</span><span class="fx-composer__mention-role">dasturçi</span></li>
    <li role="option" id="msn-m3" data-value="mister-fox"><span class="fx-composer__mention-name">Mister Fox</span><span class="fx-composer__mention-role">agent</span></li>
  </ul>
</form>
<form class="fx-composer" data-variant="messenger" data-locked aria-label="Yoziş bloklangan">
  <div class="fx-composer__lock" role="status"><svg data-fx-icon="lock" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg><span>Bu kanalda faqat administratorlar yozadi.</span></div>
</form>

Tokenlar: --fx-bg-brand-solid --fx-bg-brand-solid-hover --fx-bg-brand-subtle --fx-bg-field --fx-bg-muted --fx-bg-pressed --fx-bg-subtle --fx-bg-surface --fx-border-color-field --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-duration-pulse --fx-ease-enter --fx-ease-spring --fx-ease-standard --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-motion-shift-sm --fx-radius-circle --fx-radius-control --fx-radius-overlay --fx-radius-surface --fx-shadow-lg --fx-shadow-sm --fx-size-icon-lg --fx-size-icon-md --fx-size-icon-sm --fx-size-min-target --fx-size-status-dot --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-text-brand --fx-text-disabled --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary

Şu toifadan

KalendarOy töri: kun tanlaş, oraliq (2 oy yonma-yon), oy va yil körinişi.Captcha ramkasi«Men robot emasman» (4.110, #27): uçinçi tomon captcha'si (Cloudflare Turnstile, reCAPTCHA, hCaptcha yoki öz serveringiz) uçun FoxUI ramkasi — forma içida begona körinmaydi, holatlar hamma provayderda bir xil: böş → «Tekşirilmoqda…» (halqa) → ✓ «Tasdiqlandi» / !CheckoutTölov / checkout formasi (naqş): raqamlangan bölimlar — aloqa (telefon +998), yetkazib beriş usuli va manzil, tölov usuli (bank kartasi — raqam va muddat niqobi bilan, naqd, bölib tölaş); öngda yopişqoq buyurtma xulosasi — mahsulotlar, promo-kod, jami va «… söm tölaş».Rang tanlagiçErkin rang tanlaş: töyinganlik/yorqinlik maydoni (siçqonça va klaviatura), ton çiziği, HEX va RGB maydonlari, tayyor ranglar qatori va pipetka (brauzer qöllasa).ComboboxYozib qidiriladigan tanlov: köp variant (şahar, mijoz, mahsulot).Promo-kodPromo-kod yoki kupon: kod kiritiladi → «Qöllaş» → tekşiruv (tugmada yuklaniş) → qöllangan chip (✓ kod, çegirma summasi, × olib taşlaş) yoki xato matni.

Yoziş paneli (composer)

Variantlar

Anatomiya

Holatlar

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik