Yugen UI

Reasoning

Reasoning gói phần suy nghĩ của model vào một khối thu gọn: “Đang suy luận…” kèm đồng hồ khi đang chạy, “Đã suy luận trong 12s” khi xong.

Dựng trên Collapsible (aria-expanded, chuyển động chiều cao tắt khi giảm chuyển động). autoOpen mở khi bắt đầu và thu lại khi xong — trừ khi người dùng đã tự bấm. Thời gian đo trong effect (không đọc Date.now() lúc render) nên an toàn SSR; hoặc truyền duration. Nội dung chuỗi được render bằng StreamingMarkdown cỡ nhỏ, aria-busy khi đang chạy.
Yugen Labs · thử nghiệmComponent này nằm ngoài SemVer: API có thể đổi ở một bản minor, và thay đổi sẽ được ghi trong Có gì mới. Chính sách phiên bản

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { Reasoning } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

So sánh 3 phương án lưu token: CSS biến, JSON, TS. Chọn CSS biến vì đổi theme không cần build lại.

Đã xong, có thời lượng

Thu gọn mặc định; truyền duration khi server đã đo sẵn.

Cách dùng

Nên
  • Đặt Reasoning ngay trên câu trả lời, thu gọn khi đã xong.
  • Hiện thời gian suy luận để người dùng hiểu vì sao phải chờ.
  • Cho phép mở lại để kiểm chứng lập luận.
Không nên
  • Không mở sẵn khối suy luận dài khi đã có câu trả lời.
  • Không dùng Reasoning cho các bước gọi công cụ — dùng Trace.
  • Không đọc nội dung suy luận qua live region.

Props

Prop · KiểuMặc địnhMô tả
streamingbooleanMặc định: falseĐang suy luận: nhãn động, đồng hồ, aria-busy.
durationnumber (ms)Mặc định: —Thời lượng; bỏ trống thì tự đo.
open / defaultOpen / onOpenChangebooleanMặc định: —Điều khiển trạng thái mở.
autoOpenbooleanMặc định: trueTự mở khi bắt đầu, tự thu khi xong.
labelReactNodeMặc định: —Thay nhãn mặc định.
childrenstring | ReactNodeMặc định: —Chuỗi → StreamingMarkdown size small.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.reasoning

Khoá · KiểuMặc định (tiếng Anh)messagesVi
thinkingstringMặc định (tiếng Anh)"Thinking…"messagesVi"Đang suy luận…"
thoughtstring

Đã xong, không rõ thời lượng.

Mặc định (tiếng Anh)"Thought"messagesVi"Đã suy luận"
thoughtFor(duration: string) => string

Đã xong; duration đã định dạng sẵn (vd. "12s").

Mặc định (tiếng Anh)(duration) => `Thought for ${duration}`messagesVi(duration) => `Đã suy luận trong ${duration}`