Chat Panel - Tổng quan và cách hoạt động

Giới thiệu về Chat Panel: kiến trúc giao diện, cách thức vận hành và khả năng điều phối tác vụ trực tiếp.

Mở và điều chỉnh giao diện Chat Panel

Thao tác UI	Mô tả chi tiết	HÌNH ẢNH MINH HỌA
Mở Chat Panel	Nhấp vào biểu tượng RedAI (nút tròn màu đỏ) ở đầu thanh điều hướng bên trái giao diện ứng dụng để mở ngăn kéo Chat Panel.
Điều chỉnh độ rộng (Cột bên)	Rê chuột vào đường phân cách giữa Chat Panel và màn hình làm việc chính, giữ chuột trái và kéo sang trái hoặc sang phải để thay đổi kích thước hiển thị linh hoạt.
Mở rộng / Thu hẹp nhanh	Nhấp vào nút mũi tên đổi chiều ( / ) trên thanh phân cách để co giãn kích thước một chạm.
Chuyển chế độ Toàn màn hình	Nhấp vào biểu tượng Toàn màn hình trên thanh tiêu đề để mở giao diện làm việc 3 cột chuyên sâu.
Thu nhỏ về Cột bên	Nhấp vào biểu tượng Thu nhỏ trên thanh tiêu đề để quay về chế độ drawer cạnh màn hình.

Chi tiết tính năng và Kiến trúc giao diện

1. Hai chế độ hiển thị linh hoạt

Chat Panel hỗ trợ 2 chế độ hiển thị tối ưu cho các ngữ cảnh làm việc khác nhau:

Chế độ hiển thị	Bố cục không gian & Ngữ cảnh sử dụng	HÌNH ẢNH MINH HỌA
Cột bên (Side Drawer)	Bố cục không gian: Chiếm một cột trượt bên phải màn hình làm việc chính, giữ nguyên nội dung trang đang mở. Ngữ cảnh sử dụng tối ưu: Dùng khi cần tra cứu nhanh, thao tác Chọn phần tử giao diện (Element Picker), hoặc đối chiếu dữ liệu giữa màn hình chính và AI.
Toàn màn hình (Fullscreen Desktop Mode)	Bố cục không gian: Chiếm 100% diện tích màn hình, phân tách thành bố cục 3 cột chuyên biệt (Sidebar trái, Khung chat giữa, Todo & App Grid p hải).Ngữ cảnh sử dụng tối ưu: Dùng cho phiên làm việc chuyên sâu, quản lý nhiều luồng hội thoại, điều phối tác vụ đa bước và giám sát các dịch vụ trong Base.

2. Bố cục 3 cột ở Chế độ Toàn màn hình (Fullscreen Desktop Mode)

Khi mở rộng toàn màn hình, không gian làm việc bao gồm 3 phân vùng độc lập:

Phân vùng	Tên thành phần	Chức năng và thành phần hiển thị
Cột trái	`FullscreenChatSidebar`	• Bộ chọn Agent: Menu thả xuống kèm logo tròn RedAI + `RedAI` để chuyển đổi giữa RedAI và các Agent trong Base. • Nút tạo mới & Nhiệm vụ: Biểu tượng Cuộc trò chuyện mới và Nhiệm vụ. • Ô tìm kiếm: Kèm icon kính lúp Tìm kiếm… để lọc cuộc trò chuyện theo từ khóa. • Danh sách hội thoại: Hiển thị danh sách hội thoại phẳng liền mạch theo thứ tự thời gian tương tác kèm icon chat , hỗ trợ nút bút đổi tên trực tiếp và nút thùng rác xóa an toàn. • Thanh chân trang (Footer): Thông tin tài khoản, Avatar, tên Agent đang chọn, đường dẫn Base và nút thu gọn Sidebar .
Cột giữa	`ChatPanelColumn`	• Header: Hiển thị đường dẫn Base hiện tại, tên Agent đang chọn, nút bật/tắt cột Todo và nút thu nhỏ . • Khung trao đổi: Lời chào mừng, 3 thẻ gợi ý prompt mẫu, thẻ phần tử UI đã chọn > 1 Phần tử
Cột phải	`FullscreenTodoSidebar`	• Lưới 14 dịch vụ nhanh (Quick App Shortcuts): 2 hàng x 7 biểu tượng dẫn nhanh đến toàn bộ 14 phân hệ chính trong hệ sinh thái RedAI. • Bảng nhiệm vụ (Todo Dock): Danh sách các bước công việc do Agent tự động tạo lập, cập nhật tiến độ phần trăm và trạng thái thực thi thời gian thực. • Thanh co giãn (Resizer): Kéo dãn độ rộng từ 240px đến 360px hoặc bấm nút ẩn/hiện cột .

Phân vùng

Tên thành phần

Chức năng và thành phần hiển thị

Cột trái

FullscreenChatSidebar

• Bộ chọn Agent: Menu thả xuống kèm logo tròn RedAI + RedAI

để chuyển đổi giữa RedAI và các Agent trong Base.
• Nút tạo mới & Nhiệm vụ: Biểu tượng

Cuộc trò chuyện mới và

Nhiệm vụ.
• Ô tìm kiếm: Kèm icon kính lúp

Tìm kiếm… để lọc cuộc trò chuyện theo từ khóa.
• Danh sách hội thoại: Hiển thị danh sách hội thoại phẳng liền mạch theo thứ tự thời gian tương tác kèm icon chat

, hỗ trợ nút bút

đổi tên trực tiếp và nút thùng rác

xóa an toàn.
• Thanh chân trang (Footer): Thông tin tài khoản, Avatar, tên Agent đang chọn, đường dẫn Base và nút thu gọn Sidebar

Cột giữa

ChatPanelColumn

• Header: Hiển thị đường dẫn Base hiện tại, tên Agent đang chọn, nút bật/tắt cột Todo

và nút thu nhỏ

.
• Khung trao đổi: Lời chào mừng, 3 thẻ gợi ý prompt mẫu, thẻ phần tử UI đã chọn > 1 Phần tử

Cột phải

FullscreenTodoSidebar

• Lưới 14 dịch vụ nhanh (Quick App Shortcuts): 2 hàng x 7 biểu tượng dẫn nhanh đến toàn bộ 14 phân hệ chính trong hệ sinh thái RedAI.
• Bảng nhiệm vụ (Todo Dock): Danh sách các bước công việc do Agent tự động tạo lập, cập nhật tiến độ phần trăm và trạng thái thực thi thời gian thực.
• Thanh co giãn (Resizer): Kéo dãn độ rộng từ 240px đến 360px hoặc bấm nút ẩn/hiện cột

3. Lưới 14 dịch vụ liên kết nhanh (Quick App Shortcuts)

Nằm ở phần trên của cột bên phải trong chế độ Toàn màn hình, bố trí thành 2 hàng x 7 biểu tượng (tổng cộng 14 phân hệ cốt lõi), giúp người dùng chuyển đổi nhanh giữa các khu vực chức năng mà không cần thoát khỏi Chat Panel:

STT	Ứng dụng / Phân hệ	Vai trò và chức năng liên kết
1	Trang chủ	Trở về trang Dashboard tổng quan của Workspace/Base.
2	App Builder	Trình thiết kế ứng dụng nội bộ no-code / low-code để vận hành thời gian thực.
3	AI Agent	Tạo và quản lý hệ thống AI Agent thông minh, tự động hóa quy trình nghiệp vụ.
4	Workflow	Xây dựng và điều phối quy trình vận hành đa Agent (Agentic Workflow).
5	Tích hợp	Kết nối và đồng bộ với hơn 1000+ ứng dụng bên ngoài (Google, Telegram, CRM…).
6	AI Drive	Kho dữ liệu trung tâm lưu trữ, phân tích và chia sẻ tệp tin, media giữa các Agent.
7	Database	Hệ thống cơ sở dữ liệu low-code tạo và quản lý bảng, tự động hóa dữ liệu cho AI Agent.
8	Calendar	Lịch làm việc thông minh cho AI Agent: tự động lập kế hoạch, báo cáo và chạy workflow.
9	OmniAI Chat	Trung tâm hội thoại hợp nhất quản lý chat từ nhiều kênh (Zalo, Facebook, Email…).
10	AI Studio	Kết nối provider AI Studio hệ thống và lưu API key theo workspace/base.
11	RedHub	Chợ chia sẻ tài nguyên AI: Agent, Workflow, Knowledge, Tool, MCP…
12	Community Hub	Không gian đọc và đăng bài viết chia sẻ tri thức trong cộng đồng RedAI.
13	Tools & MCP (Công cụ)	Quản lý Built-in Tools, tích hợp Tools và hệ thống MCP trong nền tảng.
14	Skill	Thư viện kỹ năng và prompt chuyên sâu để tạo, tái sử dụng và quản lý nghiệp vụ AI.

4. Thanh tiêu đề và Các nút điều khiển (ChatHeader)

Tên nút / Vị trí	Chức năng thao tác
Bộ chọn Agent (Trái)	Nhấp vào tên Agent (kèm logo tròn đỏ) để mở dropdown đổi sang Agent khác trong Base (mặc định là RedAI - Agent Orchestrator).
Nhiệm vụ (Phải)	Nhấp vào nút (Nhiệm vụ) để mở ngăn kéo danh sách các công việc nền của Base. Có chấm đỏ báo hiệu khi có tác vụ đang chạy.
Danh sách cuộc trò chuyện (Phải)	Nhấp vào nút (Danh sách cuộc trò chuyện) để mở ngăn kéo lịch sử hội thoại (ở chế độ Cột bên; ở Toàn màn hình tích hợp sẵn tại cột trái).
Cuộc trò chuyện mới (Phải)	Nhấp vào nút (Cuộc trò chuyện mới) để bắt đầu phiên hội thoại mới, làm mới hoàn toàn ngữ cảnh trao đổi.
Bật/Tắt cột Todo (Phải)	Nhấp vào nút để ẩn hoặc hiện cột bên phải (Todo & Lưới 14 ứng dụng) trong chế độ Toàn màn hình.
Toàn màn hình / Thu nhỏ ( / ) (Phải)	Nhấp vào nút (Toàn màn hình) hoặc (Thu nhỏ) để chuyển đổi linh hoạt giữa chế độ Cột bên và Toàn màn hình.
Đóng (Góc trên cùng bên phải)	Nhấp vào nút (Đóng) để đóng hoàn toàn Chat Panel.

Tên nút / Vị trí

Chức năng thao tác

Bộ chọn Agent

(Trái)

Nhấp vào tên Agent (kèm logo tròn đỏ) để mở dropdown đổi sang Agent khác trong Base (mặc định là RedAI - Agent Orchestrator).

Nhiệm vụ

(Phải)

Nhấp vào nút

(Nhiệm vụ) để mở ngăn kéo danh sách các công việc nền của Base. Có chấm đỏ báo hiệu khi có tác vụ đang chạy.

Danh sách cuộc trò chuyện

(Phải)

Nhấp vào nút

(Danh sách cuộc trò chuyện) để mở ngăn kéo lịch sử hội thoại (ở chế độ Cột bên; ở Toàn màn hình tích hợp sẵn tại cột trái).

Cuộc trò chuyện mới

(Phải)

Nhấp vào nút

(Cuộc trò chuyện mới) để bắt đầu phiên hội thoại mới, làm mới hoàn toàn ngữ cảnh trao đổi.

Bật/Tắt cột Todo

(Phải)

Nhấp vào nút

để ẩn hoặc hiện cột bên phải (Todo & Lưới 14 ứng dụng) trong chế độ Toàn màn hình.

Toàn màn hình / Thu nhỏ (

) (Phải)

Nhấp vào nút

(Toàn màn hình) hoặc

(Thu nhỏ) để chuyển đổi linh hoạt giữa chế độ Cột bên và Toàn màn hình.

Đóng

(Góc trên cùng bên phải)

Nhấp vào nút

(Đóng) để đóng hoàn toàn Chat Panel.

5. Hộp soạn thảo thông minh (ChatInputBox)

Nằm ở chân khung chat với viền sáng nhận diện khi kích hoạt, bao gồm các công cụ:

Nút bấm / Vùng	Vị trí	Thao tác và chức năng
Menu công cụ	Góc trái thanh dưới	Nhấp biểu tượng menu để mở menu 3 tùy chọn: • Nút Chọn phần tử trên trang • Nút Gửi ngữ cảnh trang (công tắc bật/tắt) • Nút Thư viện Prompt
Quyền thực thi	Kế bên Menu công cụ	Dropdown quyền thực thi: nút `Toàn quyền ∨` (Agent tự động chạy tool) hoặc nút `Hỏi trước ∨` (Agent phải hiển thị thẻ xin phê duyệt từng hành động).
Đính kèm tài liệu	Thanh công cụ dưới	Nhấp nút (Đính kèm) để chọn nguồn: • Nút Upload từ máy • Nút Google Drive • Nút Chọn từ AI Drive
Nhắc đến tài nguyên (`@`)	Thanh công cụ dưới	Nhấp icon @ hoặc gõ trực tiếp ký tự `@` trong ô văn bản để liên kết Tools, Skills, Files, Media có sẵn.
Gọi Prompt mẫu (`/`)	Ô nhập văn bản	Gõ ký tự phím tắt `/` trong ô soạn thảo để hiển thị danh sách câu lệnh mẫu từ Thư viện Prompt.
Nhập liệu giọng nói	Thanh công cụ dưới	Nhấp nút (Micro) để nói; icon chuyển sang nút đỏ dấu tích và văn bản tự động điền vào khung chat.
Tối ưu hóa Prompt	Thanh công cụ dưới	Xuất hiện nút (Tối ưu Prompt) khi ô nhập có chữ; nhấp để AI tự động tinh chỉnh câu lệnh rõ ràng hơn.
Nút Gửi / Dừng	Góc phải thanh dưới	Nút tròn đỏ để gửi tin (phím tắt `Enter`). Khi AI đang sinh phản hồi, nút chuyển thành nút tròn đỏ để ngắt phản hồi tức thì.

Hướng dẫn thao tác thực tế

Thực hành luồng trao đổi cơ bản với Agent RedAI

Bước	Chi tiết thực hiện	Hình ảnh minh họa
Bước 1: Khởi tạo phiên chat	Bấm nút tròn RedAI ở thanh menu trái để mở Chat Panel. Nhấp nút (Cuộc trò chuyện mới) để mở một phiên hội thoại sạch.
Bước 2: Chọn Agent và chế độ quyền	Xác nhận tiêu đề đang chọn RedAI (kèm logo tròn đỏ). Chọn chế độ quyền `Toàn quyền` để Agent chủ động thực thi tác vụ nhanh.
Bước 3: Nhập nội dung câu lệnh	Nhập yêu cầu vào ô soạn thảo (hoặc chọn 1 trong 3 thẻ gợi ý có sẵn trên màn hình chào mừng: `🧭 Hướng dẫn tổng quan...`, `✨ Lập lộ trình công việc...`, `📄 Phân tích bài toán...`). Nhấn `Shift + Enter` nếu cần xuống dòng.
Bước 4: Tinh chỉnh prompt (Tùy chọn)	Nhấp nút (Tối ưu Prompt) nếu muốn AI mở rộng câu lệnh của bạn chuẩn xác và đủ ngữ cảnh hơn.
Bước 5: Gửi tin nhắn và theo dõi	Bấm nút tròn đỏ hoặc nhấn `Enter`. Theo dõi phản hồi được hiển thị theo thời gian thực (streaming text).

Bảng kiểm tra kết quả giao diện

Kiểm tra	Thao tác thực hiện	Trạng thái hiển thị đạt chuẩn
Mở Chat Panel	Bấm nút tròn RedAI ở menu trái	Chat Panel trượt ra mượt mà từ cạnh phải màn hình; giữ nguyên trang làm việc hiện tại.
Co giãn kích thước	Kéo vạch ngăn cách hoặc bấm nút mũi tên ( / )	Khung chat mở rộng hoặc thu hẹp theo ý muốn; nội dung tự co giãn responsive.
Chuyển Toàn màn hình	Bấm nút trên header	Giao diện mở rộng 100% với 3 cột rõ ràng: Sidebar danh sách chat bên trái, Khung chat ở giữa, Todo & Lưới 14 dịch vụ bên phải.
Đổi chế độ quyền	Nhấp vào dropdown `Toàn quyền ∨`	Danh sách mở ra cho phép chọn giữa `Toàn quyền` (thực thi tự động) và `Hỏi trước` (hiển thị popup xin xác nhận).
Dừng phản hồi AI	Bấm nút tròn đỏ khi AI đang trả lời	Quá trình sinh văn bản ngắt ngay lập tức; các nội dung đã trả lời vẫn được lưu nguyên vẹn trong phiên chat.