add: doc for iframe integration

README.md

@@ -9,3 +9,375 @@
 ---
 
 # CAPS04 FE REFACTOR
+
+---
+
+## Embed Widget — Integration Guide
+
+RAG Hub menyediakan widget chat berbasis `<iframe>` yang dapat diintegrasikan ke situs web pihak ketiga manapun. Widget ini mendukung autentikasi berbasis API Key, kustomisasi tampilan penuh melalui query string, serta komunikasi dua arah dengan halaman induk melalui `postMessage`.
+
+---
+
+### Table of Contents
+
+1. [Quick Start](#1-quick-start)
+2. [Authentication](#2-authentication)
+3. [URL Parameters Reference](#3-url-parameters-reference)
+4. [Theming & Customization](#4-theming--customization)
+5. [Chat Mode](#5-chat-mode)
+6. [postMessage Events](#6-postmessage-events)
+7. [Session Persistence](#7-session-persistence)
+8. [Full Integration Examples](#8-full-integration-examples)
+9. [Troubleshooting](#9-troubleshooting)
+
+---
+
+### 1. Quick Start
+
+Tambahkan `<iframe>` berikut ke halaman HTML Anda:
+
+```html
+<iframe
+  src="https://your-raghub-domain.com/embed?api_key=YOUR_API_KEY"
+  width="420"
+  height="680"
+  style="border: none; border-radius: 16px;"
+  allow="clipboard-write"
+></iframe>
+```
+
+Ganti `YOUR_API_KEY` dengan API Key yang digenerate dari halaman **Admin → API Keys**.
+
+---
+
+### 2. Authentication
+
+Widget mendukung dua metode autentikasi. Pilih salah satu sesuai kebutuhan.
+
+#### 2.1 API Key (Direkomendasikan)
+
+Gunakan parameter `api_key`. Widget akan secara otomatis menukar API Key dengan bearer token melalui endpoint `/auth/login/api-key` saat pertama kali dimuat.
+
+```
+/embed?api_key=sk-xxxxxxxxxxxxxxxx
+```
+
+Token hasil login disimpan di `sessionStorage` browser sehingga tidak perlu login ulang selama sesi tab masih aktif.
+
+> **Keamanan:** API Key sebaiknya tidak di-hardcode langsung di HTML publik. Untuk lingkungan produksi, generate token di sisi server lalu teruskan lewat metode **Direct Token** (lihat 2.2).
+
+#### 2.2 Direct Token
+
+Jika server Anda sudah memiliki bearer token yang valid, teruskan langsung melalui parameter `token`:
+
+```
+/embed?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
+```
+
+Token akan langsung disimpan ke `sessionStorage` dan digunakan untuk semua request selanjutnya.
+
+#### Token Resolution Priority
+
+Widget menyelesaikan autentikasi dengan urutan berikut:
+
+1. Cek `sessionStorage` — jika token sudah tersimpan dari sesi sebelumnya, langsung digunakan.
+2. Cek parameter `?token` di URL.
+3. Cek parameter `?api_key` di URL, lalu tukar dengan token via API.
+4. Jika tidak ada ketiganya → widget menampilkan pesan error autentikasi.
+
+---
+
+### 3. URL Parameters Reference
+
+Semua konfigurasi dilakukan melalui query string pada URL `src` iframe.
+
+#### 3.1 Authentication
+
+| Parameter | Tipe     | Keterangan |
+|-----------|----------|------------|
+| `api_key` | `string` | API Key dari Admin Panel. Widget otomatis login dan menyimpan token. |
+| `token`   | `string` | Bearer token langsung. Digunakan jika server sudah generate token sendiri. |
+
+#### 3.2 Behavior
+
+| Parameter    | Tipe     | Default | Keterangan |
+|--------------|----------|---------|------------|
+| `course_id`  | `string` | —       | Pra-pilih mata kuliah tertentu. Widget langsung menggunakan course ini tanpa perlu user memilih. |
+| `session_id` | `string` | —       | Buka riwayat sesi chat tertentu langsung saat widget dimuat. |
+| `user_name`  | `string` | `User`  | Nama yang ditampilkan di greeting ("Good Morning, ..."). Jika tidak diisi, diambil dari data user saat login via `api_key`. |
+
+#### 3.3 Appearance
+
+| Parameter    | Tipe     | Default | Keterangan |
+|--------------|----------|---------|------------|
+| `title`      | `string` | `RAG Hub` | Judul widget (tab browser & empty state). |
+| `subtitle`   | `string` | *(default text)* | Teks deskripsi di bawah judul pada empty state. |
+
+---
+
+### 4. Theming & Customization
+
+Semua warna dikustomisasi via query string. Format nilai warna: hex 3-digit (`#fff`) atau 6-digit (`#ffffff`), dengan atau tanpa `#` di depan.
+
+Format radius: nilai numerik diikuti unit `px` atau `rem` (maks. 2 digit), contoh: `20px`, `1rem`.
+
+| Parameter            | Default     | Keterangan |
+|----------------------|-------------|------------|
+| `primary`            | `#2764eb`   | Warna utama — tombol kirim, avatar asisten, border composer. |
+| `primary_gradient`   | `#ccdcff`   | Warna lembut primary — background avatar user & aksen gradient. |
+| `background`         | `#ffffff`   | Background utama widget. |
+| `background_profile` | `#ffffff`   | Background bubble chat asisten dan composer. |
+| `text_primary`       | `#0a0a0a`   | Warna teks utama. |
+| `text_secondary`     | `#737373`   | Warna teks sekunder / placeholder. |
+| `border`             | `#739af1`   | Warna border composer dan bubble. |
+| `logout`             | `#ef4444`   | Warna aksi destruktif (tombol hapus sesi). |
+| `radius`             | `20px`      | Border radius bubble chat dan composer. |
+
+**Contoh URL dengan tema gelap:**
+
+```
+/embed?api_key=YOUR_KEY
+  &background=1a1a2e
+  &background_profile=16213e
+  &text_primary=e0e0e0
+  &text_secondary=8892b0
+  &primary=4f8ef7
+  &primary_gradient=1e3a6e
+  &border=2a3f6f
+  &logout=ff6b6b
+  &radius=16px
+```
+
+---
+
+### 5. Chat Mode
+
+Chat mode dikonfigurasi di sisi **server** (bukan via URL), melalui environment variable `RAG_CHAT_MODE`.
+
+| Mode       | Keterangan |
+|------------|------------|
+| `standard` | *(default)* Chat berbasis sesi. Riwayat percakapan tersimpan dan bisa diakses kembali via tab Riwayat. |
+| `direct`   | Setiap pesan dikirim langsung ke endpoint `/ai/query` tanpa membuat sesi. Cocok untuk one-shot Q&A tanpa history. |
+
+Atur di file `.env`:
+
+```env
+RAG_CHAT_MODE=direct
+```
+
+---
+
+### 6. postMessage Events
+
+Widget berkomunikasi dengan halaman induk melalui `window.postMessage`. Dengarkan event ini di halaman yang meng-embed iframe untuk mendapat notifikasi dari widget.
+
+#### 6.1 Events yang Dikirim Widget (Outbound)
+
+| Event type                  | Kapan dikirim |
+|-----------------------------|---------------|
+| `sevima-raghub:close`       | User menekan tombol **✕** di sudut kanan atas widget. |
+
+**Contoh listener di halaman induk:**
+
+```javascript
+window.addEventListener('message', (event) => {
+  // Selalu validasi origin di produksi
+  if (event.origin !== 'https://your-raghub-domain.com') return;
+
+  if (event.data?.type === 'sevima-raghub:close') {
+    // Sembunyikan atau hancurkan iframe
+    document.getElementById('raghub-iframe').style.display = 'none';
+  }
+});
+```
+
+---
+
+### 7. Session Persistence
+
+Widget menyimpan data sesi di `sessionStorage` browser (bukan `localStorage`), sehingga **otomatis terhapus saat tab ditutup**.
+
+| Key                          | Isi |
+|------------------------------|-----|
+| `sevima_raghub_embed_token`  | Bearer token aktif. |
+| `sevima_raghub_embed_user`   | Objek user JSON (`id`, `name`, `email`, `role`). |
+
+Karena berbasis `sessionStorage` pada iframe, data ini terisolasi dan tidak dapat diakses oleh halaman induk.
+
+Untuk memaksa sesi baru (logout), reload iframe atau hapus `sessionStorage` dari dalam iframe.
+
+---
+
+### 8. Full Integration Examples
+
+#### 8.1 Embed Sederhana (API Key)
+
+```html
+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8" />
+  <title>My App</title>
+</head>
+<body>
+
+  <iframe
+    id="raghub-widget"
+    src="https://your-raghub-domain.com/embed?api_key=sk-xxxx&user_name=Budi&title=Asisten+Akademik"
+    width="420"
+    height="680"
+    style="border: none; border-radius: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);"
+    allow="clipboard-write"
+  ></iframe>
+
+  <script>
+    window.addEventListener('message', (event) => {
+      if (event.origin !== 'https://your-raghub-domain.com') return;
+      if (event.data?.type === 'sevima-raghub:close') {
+        document.getElementById('raghub-widget').style.display = 'none';
+      }
+    });
+  </script>
+
+</body>
+</html>
+```
+
+#### 8.2 Floating Chat Button
+
+```html
+<style>
+  #raghub-fab {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: #2764eb;
+    border: none;
+    cursor: pointer;
+    color: #fff;
+    font-size: 24px;
+    box-shadow: 0 4px 16px rgba(39,100,235,0.4);
+    z-index: 1000;
+  }
+
+  #raghub-container {
+    display: none;
+    position: fixed;
+    bottom: 96px;
+    right: 24px;
+    width: 420px;
+    height: 680px;
+    z-index: 1000;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 12px 48px rgba(0,0,0,0.2);
+  }
+
+  #raghub-container iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+</style>
+
+<button id="raghub-fab" onclick="toggleWidget()">💬</button>
+
+<div id="raghub-container">
+  <iframe
+    id="raghub-iframe"
+    src="https://your-raghub-domain.com/embed?api_key=sk-xxxx&primary=2764eb&radius=16px"
+    allow="clipboard-write"
+  ></iframe>
+</div>
+
+<script>
+  function toggleWidget() {
+    const container = document.getElementById('raghub-container');
+    container.style.display = container.style.display === 'none' ? 'block' : 'none';
+  }
+
+  window.addEventListener('message', (event) => {
+    if (event.origin !== 'https://your-raghub-domain.com') return;
+    if (event.data?.type === 'sevima-raghub:close') {
+      document.getElementById('raghub-container').style.display = 'none';
+    }
+  });
+</script>
+```
+
+#### 8.3 Pra-pilih Mata Kuliah & Langsung ke Sesi Tertentu
+
+```html
+<iframe
+  src="https://your-raghub-domain.com/embed
+    ?api_key=sk-xxxx
+    &course_id=COURSE_UUID
+    &session_id=SESSION_UUID
+    &user_name=Mahasiswa+A"
+  width="420"
+  height="680"
+  style="border: none; border-radius: 20px;"
+></iframe>
+```
+
+#### 8.4 Token dari Server (Lebih Aman untuk Produksi)
+
+Alur yang direkomendasikan untuk produksi: server Anda meminta token ke RAG Hub API menggunakan API Key, lalu meneruskan token tersebut ke frontend.
+
+```javascript
+// server-side (Node.js / PHP / Python, dll.)
+const response = await fetch('https://your-raghub-domain.com/api/auth/login/api-key', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({ api_key: process.env.RAG_API_KEY }),
+});
+const { token } = await response.json();
+
+// Render ke template HTML
+const iframeSrc = `https://your-raghub-domain.com/embed?token=${token}&user_name=${userName}`;
+```
+
+```html
+<!-- HTML yang dirender server -->
+<iframe src="{{ iframeSrc }}" width="420" height="680" style="border:none;"></iframe>
+```
+
+---
+
+### 9. Troubleshooting
+
+#### Widget menampilkan "Token iframe tidak tersedia"
+
+Pastikan salah satu dari berikut ada di URL:
+- `?api_key=` — API Key valid dari Admin Panel.
+- `?token=` — Bearer token yang belum expired.
+
+Jika menggunakan `api_key`, pastikan key tersebut masih aktif dan belum direvoke.
+
+#### Mata kuliah tidak muncul di dropdown
+
+Pastikan akun yang terkait dengan `api_key` memiliki akses ke setidaknya satu course. Periksa di Admin Panel bahwa course sudah berstatus **active**.
+
+#### Widget tidak merespons tombol ✕ di halaman induk
+
+Pastikan listener `message` event sudah terpasang sebelum iframe dimuat, dan validasi `event.origin` sesuai domain RAG Hub.
+
+#### Token expired di tengah sesi
+
+Widget tidak melakukan refresh token otomatis. Jika token expired, reload iframe dengan token baru:
+
+```javascript
+const iframe = document.getElementById('raghub-iframe');
+iframe.src = `https://your-raghub-domain.com/embed?token=${newToken}`;
+```
+
+Reload iframe akan menghapus `sessionStorage`-nya dan memulai sesi baru.
+
+#### Warna tidak berubah setelah mengubah query string
+
+Pastikan nilai warna dalam format hex yang valid: 3 atau 6 digit, dengan atau tanpa `#`. Karakter selain `0-9` dan `a-f` akan diabaikan dan diganti nilai default.
+
+---

app/Http/Controllers/Controller.php

@@ -0,0 +1,5 @@
+<?php
+
+namespace App\Http\Controllers;
+
+abstract class Controller {}

resources/css/app.css

@@ -1214,7 +1214,7 @@ @layer components {
     }
 
     .embed-shell {
-        @apply relative flex min-h-svh flex-col overflow-hidden px-6 py-5;
+        @apply relative flex h-svh flex-col overflow-hidden px-6 py-5;
         background-color: var(--embed-bg);
         color: var(--embed-text);
     }
@@ -1233,7 +1233,7 @@ @layer components {
     }
 
     .embed-tabs button {
-        @apply h-6 rounded-full px-6 text-xs font-medium transition;
+        @apply h-6 rounded-full px-6 text-sm font-medium transition;
         color: var(--embed-text);
     }
 
@@ -1296,17 +1296,19 @@ @layer components {
     }
 
     .embed-empty-state p {
-        @apply mt-2 text-xs;
+        @apply mt-2 text-sm;
         color: var(--embed-muted);
     }
 
     .embed-status {
-        @apply mt-4 text-center text-xs font-medium;
+        @apply mt-4 text-center text-sm font-medium;
         color: var(--embed-danger);
     }
 
     .embed-thread {
-        @apply min-h-0 flex-1 space-y-5 overflow-y-auto px-0 pt-10;
+        @apply min-h-0 flex-1 space-y-5 overflow-y-auto overscroll-contain px-0 pt-10;
+        margin-right: -1.5rem;
+        padding-right: 1.5rem;
         padding-bottom: 11rem;
     }
 
@@ -1337,7 +1339,7 @@ @layer components {
     }
 
     .embed-message-bubble {
-        @apply max-w-[min(290px,75%)] rounded-[10px] border px-4 py-3 text-xs shadow-none;
+        @apply max-w-[min(290px,75%)] rounded-[10px] border px-4 py-3 text-sm shadow-none;
         background-color: var(--embed-surface);
         border-color: var(--embed-border);
         color: var(--embed-text);
@@ -1358,7 +1360,7 @@ @layer components {
     }
 
     .embed-message-time {
-        @apply mt-2 block text-[10px];
+        @apply mt-2 block text-xs;
         color: color-mix(in oklab, currentColor 68%, transparent);
     }
 
@@ -1389,7 +1391,7 @@ @layer components {
     }
 
     .embed-course-row {
-        @apply flex flex-wrap items-center gap-2 text-[11px] font-bold;
+        @apply flex flex-wrap items-center gap-2 text-sm font-bold;
         color: var(--embed-text);
     }
 
@@ -1399,7 +1401,7 @@ @layer components {
     }
 
     .embed-course-row select {
-        @apply h-6 max-w-[210px] rounded-[5px] border px-2 text-[10px] outline-none;
+        @apply h-6 max-w-[210px] rounded-[5px] border px-2 text-xs outline-none;
         background-color: var(--embed-surface);
         border-color: var(--embed-border);
         color: var(--embed-text);
@@ -1423,7 +1425,7 @@ @layer components {
     }
 
     .embed-question-row textarea {
-        @apply min-h-[72px] flex-1 resize-none bg-transparent text-xs outline-none;
+        @apply min-h-[72px] flex-1 resize-none bg-transparent text-sm outline-none;
         color: var(--embed-text);
     }
 
@@ -1438,12 +1440,14 @@ @layer components {
     }
 
     .embed-updated-at {
-        @apply mt-2 text-center text-[10px];
+        @apply mt-2 text-center text-xs;
         color: var(--embed-muted);
     }
 
     .embed-history {
-        @apply flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto pt-7;
+        @apply flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overscroll-contain pt-7;
+        margin-right: -1.5rem;
+        padding-right: 1.5rem;
     }
 
     .embed-history-item {
@@ -1460,6 +1464,7 @@ @layer components {
         );
     }
 
+
     .embed-history-item strong {
         @apply block text-base font-semibold;
     }
@@ -1484,6 +1489,52 @@ @layer components {
         color: var(--embed-muted);
     }
 
+    .embed-modal-backdrop {
+        @apply absolute inset-0 z-50 flex items-center justify-center p-6;
+        background-color: color-mix(in oklab, var(--embed-text) 30%, transparent);
+    }
+
+    .embed-modal {
+        @apply w-full max-w-xs rounded-2xl p-5 shadow-xl;
+        background-color: var(--embed-surface);
+        color: var(--embed-text);
+    }
+
+    .embed-modal-title {
+        @apply mb-1 text-sm font-semibold;
+    }
+
+    .embed-modal-body {
+        @apply mb-4 text-sm;
+        color: var(--embed-muted);
+    }
+
+    .embed-modal-actions {
+        @apply flex justify-end gap-2;
+    }
+
+    .embed-modal-btn {
+        @apply rounded-full px-4 py-1.5 text-xs font-medium transition;
+    }
+
+    .embed-modal-btn--cancel {
+        background-color: color-mix(in oklab, var(--embed-muted) 15%, transparent);
+        color: var(--embed-text);
+    }
+
+    .embed-modal-btn--cancel:hover {
+        background-color: color-mix(in oklab, var(--embed-muted) 25%, transparent);
+    }
+
+    .embed-modal-btn--danger {
+        background-color: var(--embed-danger);
+        color: #fff;
+    }
+
+    .embed-modal-btn--danger:hover {
+        opacity: 0.88;
+    }
+
     .lecturer-dashboard-shell {
         @apply min-h-svh;
         background-color: var(--lecturer-bg);

resources/js/pages/embed.tsx

@@ -35,16 +35,16 @@ import {
 
 type EmbedConfig = {
     background: string;
+    backgroundProfile: string;
     border: string;
     courseId?: string | null;
-    danger: string;
-    muted: string;
+    logout: string;
     primary: string;
-    primarySoft: string;
+    primaryGradient: string;
     radius: string;
     subtitle: string;
-    surface: string;
-    text: string;
+    textPrimary: string;
+    textSecondary: string;
     title: string;
     userName: string;
 };
@@ -55,16 +55,22 @@ type EmbedPageProps = {
 
 const COLOR_DEFAULTS = {
     background: '#ffffff',
+    backgroundProfile: '#ffffff',
     border: '#739af1',
-    danger: '#ef4444',
-    muted: '#737373',
+    logout: '#ef4444',
     primary: '#2764eb',
-    primarySoft: '#ccdcff',
-    surface: '#ffffff',
-    text: '#0a0a0a',
+    primaryGradient: '#ccdcff',
+    textPrimary: '#0a0a0a',
+    textSecondary: '#737373',
 } as const;
 
 const EMBED_TOKEN_KEY = 'sevima_raghub_embed_token';
+const EMBED_USER_KEY = 'sevima_raghub_embed_user';
+
+type EmbedTokenResult = {
+    token: string;
+    user?: AuthUser;
+};
 
 function parseColor(value: string | null, fallback: string): string {
     if (!value) {
@@ -89,16 +95,16 @@ function parseRadius(value: string | null): string {
 function parseEmbedConfig(params: URLSearchParams): EmbedConfig {
     return {
         background: parseColor(params.get('background'), COLOR_DEFAULTS.background),
+        backgroundProfile: parseColor(params.get('background_profile'), COLOR_DEFAULTS.backgroundProfile),
         border: parseColor(params.get('border'), COLOR_DEFAULTS.border),
         courseId: params.get('course_id') ?? params.get('courseId') ?? undefined,
-        danger: parseColor(params.get('danger'), COLOR_DEFAULTS.danger),
-        muted: parseColor(params.get('muted'), COLOR_DEFAULTS.muted),
+        logout: parseColor(params.get('logout'), COLOR_DEFAULTS.logout),
         primary: parseColor(params.get('primary'), COLOR_DEFAULTS.primary),
-        primarySoft: parseColor(params.get('primary_soft'), COLOR_DEFAULTS.primarySoft),
+        primaryGradient: parseColor(params.get('primary_gradient'), COLOR_DEFAULTS.primaryGradient),
         radius: parseRadius(params.get('radius')),
         subtitle: params.get('subtitle') ?? 'Pilih mata kuliah, lalu kirim pertanyaan pertama untuk membuat sesi baru',
-        surface: parseColor(params.get('surface'), COLOR_DEFAULTS.surface),
-        text: parseColor(params.get('text'), COLOR_DEFAULTS.text),
+        textPrimary: parseColor(params.get('text_primary'), COLOR_DEFAULTS.textPrimary),
+        textSecondary: parseColor(params.get('text_secondary'), COLOR_DEFAULTS.textSecondary),
         title: params.get('title') ?? 'RAG Hub',
         userName: params.get('user_name') ?? 'User',
     };
@@ -112,35 +118,50 @@ function getStoredEmbedToken(): string | null {
     }
 }
 
-function storeEmbedToken(token: string): void {
+function getStoredEmbedUser(): AuthUser | null {
+    try {
+        const raw = sessionStorage.getItem(EMBED_USER_KEY);
+        return raw ? (JSON.parse(raw) as AuthUser) : null;
+    } catch {
+        return null;
+    }
+}
+
+function storeEmbedSession(token: string, user?: AuthUser): void {
     try {
         sessionStorage.setItem(EMBED_TOKEN_KEY, token);
+
+        if (user) {
+            sessionStorage.setItem(EMBED_USER_KEY, JSON.stringify(user));
+        }
     } catch {}
 }
 
-async function resolveEmbedToken(params: URLSearchParams): Promise<string | null> {
+async function resolveEmbedToken(
+    params: URLSearchParams,
+): Promise<EmbedTokenResult | null> {
     const stored = getStoredEmbedToken();
 
     if (stored) {
-        return stored;
+        return { token: stored, user: getStoredEmbedUser() ?? undefined };
     }
 
     const tokenParam = params.get('token');
 
     if (tokenParam) {
-        storeEmbedToken(tokenParam);
+        storeEmbedSession(tokenParam);
 
-        return tokenParam;
+        return { token: tokenParam };
     }
 
     const apiKey = params.get('api_key');
 
     if (apiKey) {
         try {
-            const { token } = await loginWithEmbedApiKey(apiKey);
-            storeEmbedToken(token);
+            const { token, user } = await loginWithEmbedApiKey(apiKey);
+            storeEmbedSession(token, user);
 
-            return token;
+            return { token, user };
         } catch {
             return null;
         }
@@ -347,6 +368,44 @@ function EmbedComposer({
     );
 }
 
+function EmbedConfirmModal({
+    message,
+    onCancel,
+    onConfirm,
+}: {
+    message: string;
+    onCancel: () => void;
+    onConfirm: () => void;
+}) {
+    return (
+        <div className="embed-modal-backdrop" onClick={onCancel} role="dialog">
+            <div
+                className="embed-modal"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <p className="embed-modal-title">Konfirmasi</p>
+                <p className="embed-modal-body">{message}</p>
+                <div className="embed-modal-actions">
+                    <button
+                        className="embed-modal-btn embed-modal-btn--cancel"
+                        onClick={onCancel}
+                        type="button"
+                    >
+                        Batal
+                    </button>
+                    <button
+                        className="embed-modal-btn embed-modal-btn--danger"
+                        onClick={onConfirm}
+                        type="button"
+                    >
+                        Hapus
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
 function EmbedHistory({
     activeSessionId,
     chatSessions,
@@ -426,6 +485,9 @@ export default function Embed({ isDirectChatMode = false }: EmbedPageProps) {
     );
     const [question, setQuestion] = useState('');
     const [isProcessing, setIsProcessing] = useState(false);
+    const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isLoadingHistory, setIsLoadingHistory] = useState(false);
     const [backendMessage, setBackendMessage] = useState<string | undefined>();
     const [activeTab, setActiveTab] = useState<'chat' | 'history'>('chat');
     const [animatedAssistantMessageId, setAnimatedAssistantMessageId] =
@@ -440,13 +502,13 @@ export default function Embed({ isDirectChatMode = false }: EmbedPageProps) {
     const rootStyle = {
         '--embed-bg': config.background,
         '--embed-border': config.border,
-        '--embed-danger': config.danger,
-        '--embed-muted': config.muted,
+        '--embed-danger': config.logout,
+        '--embed-muted': config.textSecondary,
         '--embed-primary': config.primary,
-        '--embed-primary-soft': config.primarySoft,
+        '--embed-primary-soft': config.primaryGradient,
         '--embed-radius': config.radius,
-        '--embed-surface': config.surface,
-        '--embed-text': config.text,
+        '--embed-surface': config.backgroundProfile,
+        '--embed-text': config.textPrimary,
     } as CSSProperties;
 
     useEffect(() => {
@@ -458,22 +520,28 @@ export default function Embed({ isDirectChatMode = false }: EmbedPageProps) {
         setSelectedCourseId(parsedConfig.courseId ?? '');
 
         void (async () => {
-            const resolvedToken = await resolveEmbedToken(params);
+            try {
+                const resolvedToken = await resolveEmbedToken(params);
 
-            if (!resolvedToken) {
-                setBackendMessage('Token iframe tidak tersedia.');
+                if (!resolvedToken) {
+                    setBackendMessage('Token iframe tidak tersedia.');
 
-                return;
-            }
+                    return;
+                }
 
-            setToken(resolvedToken);
-            setIsAuthorized(true);
+                const { token, user } = resolvedToken;
+
+                setToken(token);
+                setIsAuthorized(true);
+
+                if (user?.name && !params.get('user_name')) {
+                    setConfig((prev: EmbedConfig) => ({ ...prev, userName: user.name as string }));
+                }
 
-            try {
                 const [coursesResult, sessionsResult] = await Promise.all([
-                    listCoursesEmbed(resolvedToken),
+                    listCoursesEmbed(token),
                     listChatSessionsEmbed(
-                        resolvedToken,
+                        token,
                         parsedConfig.courseId ?? undefined,
                     ),
                 ]);
@@ -490,7 +558,7 @@ export default function Embed({ isDirectChatMode = false }: EmbedPageProps) {
                     setSessionId(parsedSessionId);
                     const historyResult = await getChatHistoryEmbed(
                         parsedSessionId,
-                        resolvedToken,
+                        token,
                     );
                     setMessages(historyResult.data);
                 }
@@ -498,6 +566,8 @@ export default function Embed({ isDirectChatMode = false }: EmbedPageProps) {
                 setBackendMessage(
                     err instanceof Error ? err.message : 'Gagal memuat data.',
                 );
+            } finally {
+                setIsLoading(false);
             }
         })();
     }, []);
@@ -600,6 +670,7 @@ export default function Embed({ isDirectChatMode = false }: EmbedPageProps) {
         setSessionId(targetSessionId);
         setMessages([]);
         setOptimisticMessages([]);
+        setIsLoadingHistory(true);
 
         try {
             const result = await getChatHistoryEmbed(targetSessionId, token);
@@ -608,21 +679,34 @@ export default function Embed({ isDirectChatMode = false }: EmbedPageProps) {
             setBackendMessage(
                 err instanceof Error ? err.message : 'Gagal memuat riwayat.',
             );
+        } finally {
+            setIsLoadingHistory(false);
         }
     }
 
-    async function handleDeleteSession(targetSessionId: string): Promise<void> {
-        if (!token || !window.confirm('Hapus riwayat chat ini?')) {
+    function handleDeleteSession(targetSessionId: string): void {
+        if (!token) {
+            return;
+        }
+
+        setPendingDeleteId(targetSessionId);
+    }
+
+    async function handleConfirmDelete(): Promise<void> {
+        if (!token || !pendingDeleteId) {
             return;
         }
 
+        const targetId = pendingDeleteId;
+        setPendingDeleteId(null);
+
         try {
-            await deleteChatSessionEmbed(targetSessionId, token);
+            await deleteChatSessionEmbed(targetId, token);
             setChatSessions((prev) =>
-                prev.filter((s) => s.uuid_id !== targetSessionId),
+                prev.filter((s) => s.uuid_id !== targetId),
             );
 
-            if (targetSessionId === sessionId) {
+            if (targetId === sessionId) {
                 handleNewSession();
             }
         } catch (err) {
@@ -641,6 +725,13 @@ export default function Embed({ isDirectChatMode = false }: EmbedPageProps) {
             <Head title={config.title} />
 
             <main className="embed-shell" style={rootStyle}>
+                {pendingDeleteId && (
+                    <EmbedConfirmModal
+                        message="Sesi chat ini akan dihapus permanen."
+                        onCancel={() => setPendingDeleteId(null)}
+                        onConfirm={() => { void handleConfirmDelete(); }}
+                    />
+                )}
                 <header className="embed-toolbar">
                     <div className="embed-tabs" role="tablist">
                         <button
@@ -681,7 +772,13 @@ export default function Embed({ isDirectChatMode = false }: EmbedPageProps) {
                     </div>
                 </header>
 
-                {activeTab === 'history' ? (
+                {isLoading ? (
+                    <section className="embed-chat">
+                        <div className="embed-empty-state">
+                            <Spinner className="size-6" />
+                        </div>
+                    </section>
+                ) : activeTab === 'history' ? (
                     <EmbedHistory
                         activeSessionId={sessionId}
                         chatSessions={chatSessions}
@@ -717,32 +814,40 @@ export default function Embed({ isDirectChatMode = false }: EmbedPageProps) {
                                     </p>
                                 )}
 
-                                {allMessages.map((message) => (
-                                    <EmbedMessage
-                                        key={message.uuid_id}
-                                        message={message}
-                                        shouldAnimateTyping={
-                                            message.uuid_id ===
-                                            animatedAssistantMessageId
-                                        }
-                                    />
-                                ))}
-
-                                {isProcessing && (
-                                    <article className="embed-message embed-message--assistant">
-                                        <span className="embed-message-avatar embed-message-avatar--assistant">
-                                            <Bot className="size-4" />
-                                        </span>
-                                        <div className="embed-message-bubble embed-message-bubble--typing">
-                                            <LoadingIndicator
-                                                label="Thinking"
-                                                showSpinner={false}
+                                {isLoadingHistory ? (
+                                    <div className="embed-empty-state">
+                                        <Spinner className="size-6" />
+                                    </div>
+                                ) : (
+                                    <>
+                                        {allMessages.map((message) => (
+                                            <EmbedMessage
+                                                key={message.uuid_id}
+                                                message={message}
+                                                shouldAnimateTyping={
+                                                    message.uuid_id ===
+                                                    animatedAssistantMessageId
+                                                }
                                             />
-                                        </div>
-                                    </article>
+                                        ))}
+
+                                        {isProcessing && (
+                                            <article className="embed-message embed-message--assistant">
+                                                <span className="embed-message-avatar embed-message-avatar--assistant">
+                                                    <Bot className="size-4" />
+                                                </span>
+                                                <div className="embed-message-bubble embed-message-bubble--typing">
+                                                    <LoadingIndicator
+                                                        label="Thinking"
+                                                        showSpinner={false}
+                                                    />
+                                                </div>
+                                            </article>
+                                        )}
+
+                                        <div ref={messagesEndRef} />
+                                    </>
                                 )}
-
-                                <div ref={messagesEndRef} />
                             </div>
                         ) : (
                             <div className="embed-empty-state">