Component / 064 / NEXOFRAME

HolderBar

Mẫu chuẩn

Thanh đầu cuộc trò chuyện nói ai đang phụ trách (nhân viên AI hay người), ở chế độ nào, và một nút để tiếp quản hoặc giao lại. Khi người giữ, nền chuyển sang tông brand nhẹ.

Composite tầng 2Dựng từ Avatar, Badge, Button2 holderCó trạng thái pending

Playground

Linh đang phụ trách

Soạn nháp, bạn duyệt

Holder ai. Bấm nút để mô phỏng một lần commit.

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

<HolderBar
  holder="ai"
  title="Linh đang phụ trách"
  modeLine="Soạn nháp, bạn duyệt"
  initials="L"
  actionLabel="Tôi tiếp quản"
  pending={false}
  onAction={takeOverOrHandBack}
/>

Tất cả trạng thái

Mọi trạng thái của composite, dựng thật từ @nexobox/ui, theo theme và brand đang chọn ở Playground.

Linh đang phụ trách

Soạn nháp, bạn duyệt

Linh đang phụ trách

Soạn nháp, bạn duyệt

Bạn đang phụ trách cuộc trò chuyện này

Linh chỉ xem, không soạn thay bạn

Bạn đang phụ trách cuộc trò chuyện này

Linh chỉ xem, không soạn thay bạn

Bài toán

Chủ shop phải luôn biết ai đang trả lời khách, và tiếp quản phải là một lần bấm ở ngay đó. Tông nền brand khi người giữ là tín hiệu êm và bền cho câu 'bạn đang chịu trách nhiệm'.

Khi nào sử dụng

Nên dùng

Đầu cuộc trò chuyện trong hộp thư, đầu trang chi tiết công việc, mọi nơi quyền giữ một việc có thể chuyển giữa AI và người.

Khi nào không dùng

Tránh dùng

Không dùng cho	Dùng thay
Trạng thái chung của nhân viên	Badge hoặc StatusDot trong hồ sơ nhân viên
Xác nhận trước khi giao lại có ghi chú	Popover của host mở từ nút này
Cảnh báo xung đột tiếp quản	FormNotice ngay dưới thanh

Dựng từ

Primitive	Vai trong composite
Avatar	Chữ cái đại diện người giữ
Badge	Từ nói loại người giữ (Nhân viên AI, Người)
Button	Nút tiếp quản hoặc giao lại, có loading

Anatomy

#	Phần	Ghi chú
1	Avatar + tiêu đề	Tiêu đề nói ai phụ trách; vùng aria-live polite nên đổi người giữ được đọc
2	Dòng chế độ	Ví dụ "Soạn nháp, bạn duyệt"
3	Badge	Ẩn trên điện thoại hẹp để nhường chỗ
4	Nút hành động	Ghost khi AI giữ (tiếp quản), secondary khi người giữ (giao lại); độ rộng khoá giữa idle và pending
5	Lớp tông brand	Lớp riêng, opacity 0 sang 1 trong duration-standard khi người giữ

Variants

Variant	Hiển thị
`holder="ai"`	Nền trung tính, nút ghost Tôi tiếp quản
`holder="human"`	Tông brand nhẹ, nút secondary Giao lại cho Linh

States

State	Hành vi	Trợ năng
Default	Theo holder	Vùng `section` có `aria-label`; tiêu đề `aria-live="polite"`
Pending	Nút loading, nhãn pending, độ rộng giữ nguyên; thanh chưa đổi holder	Nút `aria-busy` và disabled
Disabled	Nút mờ, không spinner (ví dụ khi mất quyền)	disabled gốc
Chuyển holder	Tông brand fade opacity; host đổi holder sau khi server ghi	—
Reduced motion	Duration 0ms nên đổi tức thì	—

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

Tab tới nút, Enter hoặc Space kích hoạt; sau khi giao lại focus ở lại trên nút.

Người giữ được nói bằng chữ trong tiêu đề, không chỉ bằng tông màu.

Nút cao tối thiểu control-sm và có vùng chạm 44px trên con trỏ thô.

Seam — host sở hữu gì

Composite không đổi holder khi bấm. Host gửi lệnh, giữ pending cho đến khi server ghi, rồi mới đổi holder. Xung đột đồng thời là việc của host.

API & triển khai

Prop	Mặc định	Quy ước
holder	—	"ai" \| "human".
title	—	Ai phụ trách, bằng câu hoàn chỉnh.
modeLine	undefined	Chế độ làm việc.
initials	—	Chữ trong avatar.
holderLabel	undefined	Từ cho badge.
actionLabel	—	Nhãn nút khi rảnh.
pendingLabel	"Đang xử lý…"	Nhãn khi đang chờ server.
onAction / pending / disabled	—	Sự kiện bấm, đang chờ, vô hiệu.

Design tokens

--nf-semantic-brand-soft, --nf-semantic-brand-soft-border, --nf-semantic-surface-raised, --nf-semantic-border-subtle, --nf-component-card-radius, --nf-foundation-motion-duration-standard, --nf-foundation-motion-easing-standard, --nf-foundation-space-*.

Do / Don't

Nên dùng

Đổi holder chỉ sau khi server ghi. Giữ nút ở cùng chỗ để tiếp quản luôn là một lần bấm. Tiêu đề nói rõ ai.

Tránh dùng

Đổi thanh ngay khi bấm. Dùng màu cảnh báo cho trạng thái người giữ. Giấu nút tiếp quản trong menu.