Chat-RAG Component

cube-chat-rag — Component Demo

Sidepanel chat-RAG reusable untuk aplikasi gov2/gov3. Component bersifat agnostik terhadap backend — di demo ini di-wire ke endpoint dummy yang return mock response (tidak hit LLM beneran).

Config aktif di demo ini

`endpoint`	`/components/gov2chat/dummy`
`greeting`	Halo! Saya asisten demo…
`placeholder`	Tanya tentang component ini…
`persist-key`	`demo:gov2chat` — refresh tetep aman
`suggested-queries`	3 pre-filled buttons
`context`	`{source: "demo-page"}`

Backend contract

Endpoint POST yang component panggil:

POST /components/gov2chat/dummy
Content-Type: application/json

{
  "query": "string",
  "context": { ... }
}

Response:

{
  "answer": "markdown string",
  "chunks": [{ file, heading_path,
               content_preview, score, ... }],
  "metadata": { model, duration_ms, ... }
}

Integrasi ke aplikasi consumer (real LLM)

Implement endpoint server-side yang return contract di atas. Bisa proxy ke n8n, langsung call API Claude/OpenAI, atau orchestrate retrieval + LLM sendiri.

Di controller consumer, set props via Twig vars:

$doc->body("chatRagEndpoint",   "/your/proxy/path");
$doc->body("chatRagGreeting",   "Selamat datang...");
$doc->body("chatRagPersistKey", json_encode("app:slug"));
$doc->body("chatRagSuggestedQueries", json_encode([...]));
$doc->body("chatRagContext",    json_encode([
  "instansi_slug" => $slug
]));

Untuk trigger button di view consumer:

<button onclick="window.cubeChat.open()">Buka Chat</button>

// Atau dengan query pre-filled:
window.cubeChat.open('query', {kriteria_id: 'PUSAT_1.a.2'})

Untuk API key (mis. Anthropic, OpenAI): jangan expose ke client. Pasang same-origin proxy server-side, baca key dari config XML / env. Pattern: core/config/credentials.{stage}.xml atau environment variable (lihat memory phpvb_config_framework_only).
Contoh consumer real: Lebah #4929 (SAKIP) + #4956 (n8n workflow di gurita.gov3.id).

Files terkait

apps/components/vue/cube-chat-rag.vue — SFC source
apps/components/gov2chat.php — demo controller (file ini)
apps/components/view/gov2chat.html — demo view
core/template/cube/cubeLayout.html — slot #sidePanel-chat + props binding via Twig vars
core/template/cube/cubeHead.html — load marked.js + DOMPurify CDN