[Open Source] #12 - ChatHub: Giải pháp quản lý đa Chatbot với kiến trúc Browser Extension hiện đại

Trong làn sóng AI hiện nay, việc phải chuyển đổi liên tục giữa các tab ChatGPT, Claude, Gemini hay Bing thường gây gián đoạn luồng công việc. ChatHub ra đời như một nền tảng tập hợp (Aggregator) mạnh mẽ, cho phép tương tác song song với nhiều AI trên cùng một giao diện. Về mặt kỹ thuật, đây là một "case study" tuyệt vời để tìm hiểu cách một Browser Extension xử lý các giới hạn bảo mật và quản lý trạng thái phức tạp.

📌 Tổng quan về hệ sinh thái công nghệ

• Mã nguồn: https://github.com/chathub-dev/chathub

Dự án được xây dựng với tư duy ưu tiên hiệu suất và trải nghiệm nhà phát triển (DX) cao:

• Core: React 18 kết hợp với TypeScript (chiếm hơn 97% mã nguồn).
• Build Tool: Sử dụng Vite và plugin @crxjs/vite-plugin. Đây là lựa chọn tối ưu cho Extension hiện nay vì nó hỗ trợ Hot Module Replacement (HMR) cực nhanh ngay trong quá trình phát triển.
• State Management: Dự án chọn Jotai (Atomic State) kết hợp với Immer. Cách tiếp cận này giúp quản lý hàng chục khung chat độc lập một cách linh hoạt mà không gây ra hiện tượng re-render không cần thiết.
• Routing: Sử dụng TanStack Router để đảm bảo tính an toàn về kiểu dữ liệu (Type-safe) cho mọi điều hướng trong ứng dụng.

🏗️ Tư duy kiến trúc: Lớp trừu tượng (Abstraction Layer)

Điểm sáng nhất của ChatHub nằm ở cách tổ chức code tại src/app/bots/. Dự án sử dụng mô hình lập trình hướng đối tượng để đồng bộ hóa giao thức giữa các chatbot khác nhau:

1. AbstractBot Class: Định nghĩa một giao diện chung. Mọi chatbot (ChatGPT, Claude, Grok...) đều phải kế thừa từ lớp này và thực thi các phương thức như sendMessage, stop, reset.
2. Context Isolation: Hệ thống phân tách rõ rệt giữa Background Scripts (xử lý kết nối mạng, quản lý cookie) và Content Scripts (can thiệp vào trang web gốc). Cách thiết kế này giúp ChatHub có thể "lách" qua các rào cản Cross-Origin (CORS) một cách an toàn.

🔄 Phân tích chuyên sâu Luồng hoạt động (System Workflow)

Sơ đồ dưới đây mô tả quá trình xử lý từ lúc người dùng nhập liệu cho đến khi nhận được dòng phản hồi (Stream) từ các AI server:

1. Giai đoạn Tiền xử lý: Web Access Agent & RAG-lite (Bước 2-4)

Thay vì gửi thẳng câu hỏi của người dùng tới AI, ChatHub thực hiện kỹ thuật Prompt Engineering động:

• Search Engine Scraping: Khi bật Web Access, Agent sẽ bí mật thực hiện các truy vấn tìm kiếm (thường qua DuckDuckGo hoặc Bing).
• Context Injection: Hệ thống không chỉ lấy link, nó thực hiện "crawl" nhanh nội dung văn bản thô của các kết quả hàng đầu. Sau đó, nó nhúng dữ liệu này vào prompt theo cấu trúc: "Dựa trên thông tin tìm kiếm sau đây: [Data], hãy trả lời câu hỏi: [User Question]".
• Lợi ích: Điều này giúp vượt qua giới hạn về kiến thức cũ (Knowledge Cutoff) của các mô hình AI mà không cần phải train lại model.

2. Giai đoạn Giao tiếp: Background Script & DNR Rules (Bước 5-6)

Đây là phần "ma thuật" kỹ thuật để biến một Extension thành một trình duyệt "chính chủ" trong mắt các AI Server:

• Declarative Net Request (DNR) - Trái tim của Manifest V3: Các trình duyệt hiện đại cấm trang web thay đổi các Header nhạy cảm như Origin, Referer, hay Cookie. Tuy nhiên, ChatHub sử dụng API chrome.declarativeNetRequest để định nghĩa các quy tắc (Rules) ở mức hệ thống.
• Header Manipulation: Khi một yêu cầu được gửi từ Bot Instance, DNR Rules sẽ "chặn" gói tin đó ngay tại tầng mạng của trình duyệt, tự động sửa User-Agent thành bản mới nhất, thêm Origin: https://chat.openai.com...
• Vượt rào CORS: Bằng cách gửi yêu cầu từ Background Script thay vì UI (Renderer), extension có thể bỏ qua chính sách Same-Origin, cho phép nó giao tiếp với bất kỳ server nào mà không cần server đó cho phép.

3. Giai đoạn Xử lý phản hồi: SSE & Stream Parsing (Bước 7-8)

Các chatbot hiện đại không trả về kết quả một lần (JSON), chúng trả về Server-Sent Events (SSE).

• EventSource Parser: ChatHub sử dụng thư viện eventsource-parser để đọc luồng dữ liệu thô (binary/text stream). Dữ liệu trả về từ OpenAI/Claude thường có định dạng data: {"text": "..."} liên tục.
• Chunk Processing: Mỗi khi một "chunk" (mảnh dữ liệu) mới đến, parseSSEResponse sẽ trích xuất phần nội dung text và cập nhật ngay lập tức vào Jotai Atom.
• Atomic Updates: Vì trạng thái tin nhắn là một Atom, React chỉ re-render duy nhất khung tin nhắn đó thay vì toàn bộ Dashboard, giúp giữ hiệu năng cực kỳ mượt mà dù đang chạy 4-6 bot song song.

4. Giai đoạn Hiển thị: Framer Motion & Typing Effect (Bước 9)

• Typing Effect: Để tạo cảm giác tự nhiên như AI đang "suy nghĩ", ChatHub kết hợp giữa việc nhận dữ liệu stream và các thư viện Animation (như Framer Motion).
• Auto-scroll Logic: Một kỹ thuật nhỏ nhưng quan trọng: Khi tin nhắn dài ra, UI phải tự động cuộn xuống dưới (Sticky Scroll) nhưng phải "thông minh" để không cuộn nếu người dùng đang chủ động kéo lên để đọc tin nhắn cũ.

🛠️ Tại sao kiến trúc này lại vượt trội?

1. Tính đóng gói (Encapsulation): Nhờ lớp AbstractBot, việc thêm một AI mới (ví dụ: DeepSeek hay Llama 3) chỉ tốn khoảng 30-50 dòng code để định nghĩa cách gọi API và parse dữ liệu, không cần động vào logic UI.
2. Khả năng chịu tải (Concurrency): Việc đưa toàn bộ logic mạng vào Background Script giúp UI của Extension luôn đạt mức 60fps, không bị "lag" khi xử lý dữ liệu stream từ nhiều nguồn cùng lúc.
3. Bảo mật: Bằng cách sử dụng Proxy Fetch, extension có thể tận dụng session hiện có của người dùng trên trình duyệt (Cookie sẵn có) mà không yêu cầu người dùng phải nhập API Key nhạy cảm.

⚖️ Đánh giá kỹ thuật

✅ Kết luận

ChatHub không chỉ là một công cụ năng suất, mà còn là một kho tài liệu quý giá cho những ai muốn nghiên cứu sâu về Browser Extension phát triển trên Manifest V3. Cách dự án xử lý các rào cản về Header, Cookie và Stream dữ liệu thực sự rất tinh tế và có tính ứng dụng cao trong các dự án Fullstack hiện đại.

Mã nguồn dự án hiện đang được cộng đồng đánh giá rất cao về tính minh bạch và sự chỉn chu trong cách tổ chức. Nếu bạn đang build một extension liên quan đến AI, ChatHub chắc chắn là dự án bạn nên dành thời gian để nghiên cứu (read-code).

Hy vọng phân tích này giúp bạn có thêm góc nhìn về kiến trúc hệ thống của các công cụ AI hiện nay. Đừng quên Upvote và Follow mình để đón xem những dự án hấp dẫn tiếp theo nhé!