Agen AI (/dashboard/ai-agents)

Modul Agen AI (Analis Keputusan NEXA) adalah antarmuka percakapan kognitif berbasis data nyata (grounded conversational analytics) yang menghubungkan seluruh inteligensi data NEXA. Modul ini menjadi pusat muara bagi seluruh fitur dan tombol "Tanya AI" yang tersebar di modul-modul lain (seperti Peta Risiko, Early Warning, dan Media Monitoring).

1. Antarmuka Pengguna & Tampilan Awal (Empty State)

Saat operator pertama kali membuka menu ANALITIK → AI Agents, antarmuka menampilkan ruang percakapan dengan kartu starter prompts interaktif.

Karakteristik Tampilan

• Header Modul: "Agen AI — Analis AI percakapan berbasis data nyata NEXA — semua tombol 'Tanya AI' terhubung ke sini."
• Branding Asisten: "Analis Keputusan NEXA — Ajukan pertanyaan lintas modul (risiko, pangan, keamanan, media). Jawaban selalu berbasis data nyata dengan sumber & tingkat keyakinan."
• Starter Prompts Statis: Grid kartu prompt bawaan yang dapat diklik langsung oleh pengguna (click-to-send).

Daftar Starter Prompts Bawaan

1. Bagaimana indeks risiko nasional saat ini?
2. Provinsi mana yang berstatus kritis?
3. Ringkas sinyal Early Warning paling mendesak hari ini.
4. Uraikan pemicu risiko di Papua Tengah.
5. Rekomendasi tindakan untuk stabilitas pangan nasional.

2. Trigger Kontekstual Lintas Modul (Tombol "Tanya AI")

Seluruh modul analitik di platform NEXA dilengkapi tombol aksi cepat "Tanya AI". Ketika tombol ini ditekan, pengguna secara mulus dialihkan ke halaman Agen AI dengan membawa konteks modul asal secara otomatis:

Contoh Payload Trigger Kontekstual

Saat operator menekan tombol "Tanya AI" pada kartu provinsi berstatus kritis di Peta Risiko:

{
  "pertanyaan": "Analisis implikasi situasi ini dan rekomendasikan langkah mitigasi.",
  "session_id": null,
  "context_module": "peta_risiko",
  "context_payload": {
    "provinsi": "Papua Tengah",
    "status": "KRITIS",
    "isu": "Gangguan Kamtibmas",
    "skor_indeks": 88.4
  }
}

3. Panduan Konsumsi Stream SSE di Frontend

Frontend mengonsumsi stream dari backend BFF (/api/chat/stream) menggunakan pustaka @microsoft/fetch-event-source untuk memastikan keandalan koneksi HTTP POST berbasis Server-Sent Events (SSE).

Siklus Event SSE

1. step: Menampilkan status aktivitas agen cerdas pada Thought Stepper / Progress Bar (misalnya: "Mengakses Data Mart PostgreSQL...", "Memvalidasi data berita di Elasticsearch...").
2. chunk: Potongan token kata yang dialirkan langsung ke komponen tampilan teks dengan efek mengetik (typing animation).
3. final_envelope: Objek JSON terstruktur berisi seluruh artefak visual final (lihat rincian di bawah).
4. done: Penanda stream selesai; kembalikan status input form menjadi aktif dan simpan session_id ke state aplikasi.

4. Rendering Kartu Visual (Hybrid Envelope)

Saat menerima event final_envelope, Frontend merender komponen visual berbasis struktur data berikut:

interface FinalEnvelope {
  teks: string;                      // Narasi komprehensif dalam format Markdown/GFM
  chart_data?: {                     // Objek visualisasi data
    chart_type: 'bar' | 'line' | 'pie' | 'radar';
    title: string;
    data: Array<Record<string, any>>;
  };
  evidence?: Array<{                 // Bukti sumber data pendukung
    source_type: 'article' | 'sql' | 'vector';
    title: string;
    url?: string;
    snippet: string;
  }>;
  suggested_prompts?: string[];      // 3 prompt lanjutan interaktif
}

Implementasi Komponen UI

• Markdown Narasi: Diterjemahkan menggunakan ReactMarkdown dengan plugin remarkGfm untuk merender tabel data, tebal, miring, dan kutipan analitik.
• Komponen Grafik: Dirender menggunakan Recharts secara dinamis sesuai properti chart_type.
• Suggested Action Chips: Dirender sebagai tombol chip interaktif di bawah kartu jawaban. Mengklik chip ini akan otomatis mengirimkan pertanyaan berikutnya dalam session_id yang sama.

5. Ragam Payload Permintaan dari Frontend

{
  "pertanyaan": "Bagaimana indeks risiko nasional saat ini?",
  "session_id": null
}

6. Tabel Pemetaan Komponen ke PostgreSQL & Elasticsearch