SurfSense/_bmad-output/component-inventory-web.md

# Kho Components Web (Component Inventory)

Tài liệu này liệt kê các nhóm components UI chính được sử dụng trong `surfsense_web`.

## 1. UI Primitives (`components/ui`)
Dựa trên **Shadcn UI** và **Radix Primitives**. Các thành phần cơ bản này đảm bảo tính nhất quán về thiết kế và khả năng tiếp cận (accessibility).

- **Core**: `Button`, `Input`, `Select`, `Checkbox`, `Switch`.
- **Feedback**: `Toast` (thông báo), `Alert`, `Progress`, `Skeleton` (loading state).
- **Overlay**: `Dialog` (Modal), `Sheet` (Sidebar Drawer), `Popover`, `Tooltip`.
- **Layout**: `Card`, `Separator`, `ScrollArea`, `Resizable` (chia đôi màn hình).

## 2. Layout Components (`components/layout`)
Các thành phần cấu trúc dùng chung cho các trang.

- **`Sidebar`**: Menu điều hướng chính bên trái (collapsible).
- **`Header`**: Thanh trên cùng chứa User Menu, Theme Toggle, Breadcrumbs.
- **`UserNav`**: Dropdown menu tài khoản người dùng.
- **`ThemeToggle`**: Chuyển đổi Dark/Light mode.

## 3. Assistant UI (`components/assistant-ui`)
Các components chuyên biệt cho trải nghiệm AI Chat.

- **`ChatThread`**: Container chính quản lý danh sách tin nhắn.
- **`Composer`**: Khung nhập liệu thông minh (hỗ trợ slash commands, file attachment).
- **`MessageList`**: Hiển thị tin nhắn cuộn (scrollable).
- **`MessageBubble`**: Hiển thị nội dung tin nhắn (User/AI).
    - Hỗ trợ Markdown rendering.
    - Hỗ trợ hiển thị Code Block với syntax highlighting.
- **`ThreadHistory`**: Sidebar danh sách các cuộc hội thoại cũ.
- **`ToolResult`**: Hiển thị kết quả trả về từ tool (VD: Card thông tin thời tiết).

## 4. Feature Components
Các components đặc thù cho nghiệp vụ SurfSense.

- **`DocumentCard`**: Hiển thị tóm tắt tài liệu trong danh sách tìm kiếm.
- **`ConnectorGrid`**: Lưới các icon ứng dụng để user kết nối (Gmail, Slack...).
- **`SearchFilters`**: Bộ lọc nâng cao cho tìm kiếm (theo ngày, loại file, nguồn).