Component / 054 / NEXOFRAME

Composer

Mẫu chuẩn

Ô soạn trong một shell compact: cao dần theo chữ tới trần token, preset theo bề mặt, slot host cho context và footer icons. Host giữ value / onSubmit / lockedReason. Nháp AI nằm ngoài Composer.

Composite tầng 2Shell + auto-growPresets: default · omnichat · crew · nexi · widgetFocus ring trên shell

Playground

Chọn preset. Omnichat hiện icon footer giả (host slot). Nexi/widget = shell compact + send icon. Ctrl/⌘+Enter để gửi · Enter xuống dòng.

FB · Đơn 1042

Chưa gửi tin nào.

import { Composer } from "@nexobox/ui";

<Composer
  preset="omnichat"
  value={value}
  onValueChange={setValue}
  onSubmit={(next) => send(next)}
  label="Câu trả lời"
  submitLabel="Gửi cho khách"
  placeholder="…"
  context={<ContextChips />}
  footerActions={<ActionIcons />}
/>

Bài toán

Người vận hành gõ trả lời trên nhiều bề mặt. Ô soạn phải gọn khi nghỉ, lớn theo chữ tới trần token, có slot icon Omnichat và báo khi bị khoá. Textarea + Button riêng không đủ.

Khi nào sử dụng

Nên dùng

Gửi một tin trong hội thoại. Khi người dùng có thể bị chặn gửi vì một lý do cần giải thích.

Khi nào không dùng

Tránh dùng

Không dùng cho	Dùng thay
Trường văn bản dài trong biểu mẫu	Textarea trong Field
Nháp AI / streaming	MessageBubble / NexiIsland phía trên Composer
Upload file thật	Host; Composer chỉ nhận slot `attachments`

Dựng từ

Primitive tầng 1	Vai trong composite
Label	Nhãn của ô (`sr-only` mặc định).
textarea nội bộ	Autosize trong shell; tắt resize tay.
Button	Gửi chữ (footer) hoặc icon ArrowUp (trailing).

Anatomy

#	Phần	Ghi chú
1	Lý do khoá	Caption ngoài shell khi có `lockedReason`.
2	Shell	Border control, surface raised, field shadow; focus ring một lần.
3	Context / Attachments	Slot host, tùy chọn.
4	Input row	`leading` · textarea · `trailing` · send icon (preset nexi/widget).
5	Footer	`footerActions` + send chữ khi placement footer.

Presets

Preset	Send	Enter
`default` / `omnichat` / `crew`	Footer chữ	Ctrl/⌘+Enter gửi
`nexi` / `widget`	Trailing icon	Enter gửi

States

Trạng thái	Biểu hiện
Compact	Một dòng ≈ field-height
Grown	Cao theo nội dung
Overflowing	Đạt max-height → cuộn trong ô
Footer	Hàng footer hiện (omnichat luôn)
Focused shell	Ring trên shell, không double
Rỗng / Có chữ	Send disabled / enabled
Đang gửi	`submitting`: loading + readOnly
Bị khoá	`lockedReason` / `disabled`

Bàn phím & trợ năng

default / omnichat / crew: Enter xuống dòng; Ctrl/⌘+Enter gửi.

nexi / widget: Enter gửi; Shift+Enter xuống dòng.

Tab: leading → textarea → trailing/footer → send.

submitLabel là aria-label khi send là icon.

Seam — host sở hữu gì

Composite không gửi tin, không xoá ô, không upload, không giữ nháp AI.

Host sở hữu	Cấp qua
Giá trị đang gõ	`value` / `onValueChange`
Gọi dịch vụ, submitting, clear	`onSubmit`
Icon Omnichat / context / attachments	`footerActions`, `context`, `attachments`
Lý do khoá	`lockedReason`

API & triển khai

Prop	Mặc định	Quy ước
value	—	Bắt buộc.
onValueChange	—	Bắt buộc.
onSubmit	—	Bắt buộc.
label	—	Bắt buộc.
labelHidden	true	—
submitLabel	—	Chữ Button hoặc aria-label icon.
placeholder	undefined	—
submitting	false	—
lockedReason	undefined	Có thì khoá.
disabled	false	Khoá không cần lý do.
preset	"default"	default \| omnichat \| crew \| nexi \| widget
submitOnEnter	theo preset	Override Enter.
sendPlacement	theo preset	footer \| trailing
maxHeight	var(--nf-component-composer-max-height)	CSS length.
context	undefined	Zone context.
attachments	undefined	Zone attachments (slot only).
leading	undefined	—
trailing	undefined	—
footerActions	undefined	Host icon bar.
actions	undefined	Deprecated — alias footerActions.

Design tokens

--nf-component-composer-max-height (DS-019), --nf-component-field-height, --nf-component-field-shadow, --nf-component-focus-*, --nf-component-transition-*, --nf-semantic-surface-raised, --nf-semantic-border-control. Không token shell mới trong phase này.

Do / Don't

Nên dùng

Host xoá ô sau gửi thành công. Nháp AI ngoài Composer. Omnichat icons qua footerActions. Một focus ring trên shell.

Tránh dùng

Khoá không nói lý do. Hardcode task CRM trong kit. Upload trong Composer. Đổ nháp AI vào ô soạn. Ring kép.