Kiến trúc Boxme Insight

Quick Reference

• What: Kiến trúc tổng thể của module Angular 19 Boxme Insight
• Context: Ứng dụng nhúng trong Omisell / oms.boxme.asia
• Design Pattern: Container/Presenter, Signal-based State, Standalone Component

Tổng quan Kiến trúc

Boxme Insight là ứng dụng "nhúng", nhận token từ LocalStorage/PostMessage của parent app (oms.boxme.asia), rồi truyền Authorization: Omi <token> qua headers sử dụng AuthInterceptor.

sequenceDiagram
    participant User
    participant Angular UI
    participant Signal State
    participant API Interceptor
    participant Backend (insights.omisell.com)

    User->>Angular UI: Nhập câu hỏi (VD: "Doanh thu tháng này")
    Angular UI->>Signal State: set loading = true
    Angular UI->>API Interceptor: POST /api/v1/ai/chat
    API Interceptor->>API Interceptor: Append JWT token
    API Interceptor->>Backend (insights.omisell.com): Request
    Backend-->>API Interceptor: { rows, chart_hint, alerts }
    API Interceptor-->>Angular UI: Data Response
    Angular UI->>Signal State: Update chart & table signals
    Angular UI-->>User: Xây dựng biểu đồ ECharts / Markdown

Các thành phần chính

Mô hình Component Mới trong Angular 19

Toàn bộ component tại /shared và /features đều cấu hình ở chế độ standalone: true, sử dụng @if, @for control flow mới thay vì *ngIf, *ngFor.

1. AI Chat Service: src/app/core/services/api.service.ts Tiếp nhận luồng text và giao tiếp API chat tự do (/api/v1/ai/chat).
2. Chart Renderer: src/app/shared/components/chart-renderer.component.ts Component parse chart_hint từ API thành ECharts config.
3. Data Table: src/app/shared/components/data-table.component.ts Hiển thị dạng bảng (fallback) nếu biểu đồ không phù hợp.

Chế độ DEMO (Demo Mode)

Frontend có khả năng chạy offline hoặc mock staging:

• Interceptor: Khi environment.demoMode = true, route API nào chưa hoàn thiện backend có thể trả về JSON tĩnh. Đảm bảo UI luôn sống kịch bản kể cả khi rớt network.

Hướng dẫn Tích hợp (Embedding)

Xem cách Boxme (Shell) nhúng Insight Module

Shell app (React hoặc Vue Oms) có thể nhúng thư mục dist của Angular 19 qua iframe hoặc Web Components, tuỳ kiến trúc viễn cảnh. JWT Token được bắt qua window.addEventListener('message').