change: integration docs

README.md

@@ -51,38 +51,21 @@ ### 1. Quick Start
 
 ### 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.
+Widget menggunakan API Key untuk autentikasi. Saat pertama kali dimuat, widget menukar API Key dengan bearer token melalui endpoint `/auth/login/api-key`, lalu menyimpan token tersebut ke cookie browser selama **7 hari**.
 
 ```
 /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.
+Selama cookie masih valid, widget tidak akan login ulang meski halaman di-refresh. Cookie otomatis dihapus setelah 7 hari atau jika browser cookie dibersihkan.
 
 #### 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.
+1. Cek cookie — jika token sudah tersimpan dan belum expired, langsung digunakan.
+2. Cek parameter `?api_key` di URL, tukar dengan token via API, simpan ke cookie.
+3. Jika tidak ada keduanya → widget menampilkan pesan error autentikasi.
 
 ---
 
@@ -94,8 +77,7 @@ #### 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. |
+| `api_key` | `string` | API Key dari Admin Panel. Widget otomatis login dan menyimpan token ke cookie. |
 
 #### 3.2 Behavior
 
@@ -129,7 +111,7 @@ ### 4. Theming & Customization
 | `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). |
+| `danger`             | `#ef4444`   | Warna aksi destruktif (tombol hapus sesi). |
 | `radius`             | `20px`      | Border radius bubble chat dan composer. |
 
 **Contoh URL dengan tema gelap:**
@@ -143,7 +125,7 @@ ### 4. Theming & Customization
   &primary=4f8ef7
   &primary_gradient=1e3a6e
   &border=2a3f6f
-  &logout=ff6b6b
+  &danger=ff6b6b
   &radius=16px
 ```
 
@@ -153,7 +135,7 @@ ### 5. 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)
+#### 5.1 Events yang Dikirim Widget (Outbound)
 
 | Event type                  | Kapan dikirim |
 |-----------------------------|---------------|
@@ -177,22 +159,22 @@ #### 6.1 Events yang Dikirim Widget (Outbound)
 
 ### 6. Session Persistence
 
-Widget menyimpan data sesi di `sessionStorage` browser (bukan `localStorage`), sehingga **otomatis terhapus saat tab ditutup**.
+Widget menyimpan data sesi di **cookie browser** dengan masa berlaku 7 hari. Cookie diset pada domain RAG Hub (domain iframe), sehingga tidak dapat diakses oleh halaman induk.
 
-| Key                          | Isi |
-|------------------------------|-----|
-| `sevima_raghub_embed_token`  | Bearer token aktif. |
-| `sevima_raghub_embed_user`   | Objek user JSON (`id`, `name`, `email`, `role`). |
+| Cookie name                  | Isi | TTL |
+|------------------------------|-----|-----|
+| `sevima_raghub_embed_token`  | Bearer token aktif. | 7 hari |
+| `sevima_raghub_embed_user`   | Objek user JSON (`id`, `name`, `email`, `role`). | 7 hari |
 
-Karena berbasis `sessionStorage` pada iframe, data ini terisolasi dan tidak dapat diakses oleh halaman induk.
+Selama cookie masih valid, widget tidak akan memanggil ulang `/auth/login/api-key` meski halaman di-refresh atau tab ditutup lalu dibuka kembali.
 
-Untuk memaksa sesi baru (logout), reload iframe atau hapus `sessionStorage` dari dalam iframe.
+Untuk memaksa login ulang (reset sesi), reload iframe dengan mengganti `src` — cookie lama akan diabaikan saat API Key baru ditukar.
 
 ---
 
 ### 7. Full Integration Examples
 
-#### 8.1 Embed Sederhana (API Key)
+#### 7.1 Embed Sederhana
 
 ```html
 <!DOCTYPE html>
@@ -225,7 +207,7 @@ #### 8.1 Embed Sederhana (API Key)
 </html>
 ```
 
-#### 8.2 Floating Chat Button
+#### 7.2 Floating Chat Button
 
 ```html
 <style>
@@ -290,7 +272,7 @@ #### 8.2 Floating Chat Button
 </script>
 ```
 
-#### 8.3 Pra-pilih Mata Kuliah & Langsung ke Sesi Tertentu
+#### 7.3 Pra-pilih Mata Kuliah & Langsung ke Sesi Tertentu
 
 ```html
 <iframe
@@ -305,39 +287,15 @@ #### 8.3 Pra-pilih Mata Kuliah & Langsung ke Sesi Tertentu
 ></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>
-```
-
 ---
 
 ### 8. 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.
+Pastikan parameter `?api_key=` ada di URL `src` iframe dan API Key tersebut masih aktif serta belum direvoke di Admin Panel.
 
-Jika menggunakan `api_key`, pastikan key tersebut masih aktif dan belum direvoke.
+Jika cookie lama ada tapi sudah expired, hapus cookie `sevima_raghub_embed_token` dari browser lalu reload.
 
 #### Mata kuliah tidak muncul di dropdown
 
@@ -349,15 +307,13 @@ #### Widget tidak merespons tombol ✕ di halaman induk
 
 #### Token expired di tengah sesi
 
-Widget tidak melakukan refresh token otomatis. Jika token expired, reload iframe dengan token baru:
+Widget tidak melakukan refresh token otomatis. Jika token expired, cukup reload iframe — widget akan menukar `api_key` yang sama dengan token baru dan menyimpannya ke cookie:
 
 ```javascript
 const iframe = document.getElementById('raghub-iframe');
-iframe.src = `https://your-raghub-domain.com/embed?token=${newToken}`;
+iframe.src = iframe.src; // trigger reload
 ```
 
-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.

resources/js/pages/embed.tsx

@@ -37,7 +37,7 @@ type EmbedConfig = {
     backgroundProfile: string;
     border: string;
     courseId?: string | null;
-    logout: string;
+    danger: string;
     primary: string;
     primaryGradient: string;
     radius: string;
@@ -53,7 +53,7 @@ const COLOR_DEFAULTS = {
     background: '#ffffff',
     backgroundProfile: '#ffffff',
     border: '#739af1',
-    logout: '#ef4444',
+    danger: '#ef4444',
     primary: '#2764eb',
     primaryGradient: '#ccdcff',
     textPrimary: '#0a0a0a',
@@ -94,7 +94,7 @@ function parseEmbedConfig(params: URLSearchParams): EmbedConfig {
         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,
-        logout: parseColor(params.get('logout'), COLOR_DEFAULTS.logout),
+        danger: parseColor(params.get('danger'), COLOR_DEFAULTS.danger),
         primary: parseColor(params.get('primary'), COLOR_DEFAULTS.primary),
         primaryGradient: parseColor(params.get('primary_gradient'), COLOR_DEFAULTS.primaryGradient),
         radius: parseRadius(params.get('radius')),
@@ -106,17 +106,39 @@ function parseEmbedConfig(params: URLSearchParams): EmbedConfig {
     };
 }
 
-function getStoredEmbedToken(): string | null {
-    try {
-        return sessionStorage.getItem(EMBED_TOKEN_KEY);
-    } catch {
-        return null;
+const COOKIE_MAX_AGE = 60 * 60 * 24 * 7; // 7 days
+
+function setEmbedCookie(name: string, value: string): void {
+    const secure = window.location.protocol === 'https:';
+    const parts = [
+        `${name}=${encodeURIComponent(value)}`,
+        'path=/',
+        `max-age=${COOKIE_MAX_AGE}`,
+        'SameSite=None',
+    ];
+
+    if (secure) {
+        parts.push('Secure');
     }
+
+    document.cookie = parts.join('; ');
+}
+
+function getEmbedCookie(name: string): string | null {
+    const match = document.cookie.match(
+        new RegExp(`(?:^|;\\s*)${name}=([^;]*)`),
+    );
+
+    return match ? decodeURIComponent(match[1]) : null;
+}
+
+function getStoredEmbedToken(): string | null {
+    return getEmbedCookie(EMBED_TOKEN_KEY);
 }
 
 function getStoredEmbedUser(): AuthUser | null {
     try {
-        const raw = sessionStorage.getItem(EMBED_USER_KEY);
+        const raw = getEmbedCookie(EMBED_USER_KEY);
         return raw ? (JSON.parse(raw) as AuthUser) : null;
     } catch {
         return null;
@@ -124,13 +146,11 @@ function getStoredEmbedUser(): AuthUser | null {
 }
 
 function storeEmbedSession(token: string, user?: AuthUser): void {
-    try {
-        sessionStorage.setItem(EMBED_TOKEN_KEY, token);
+    setEmbedCookie(EMBED_TOKEN_KEY, token);
 
-        if (user) {
-            sessionStorage.setItem(EMBED_USER_KEY, JSON.stringify(user));
-        }
-    } catch {}
+    if (user) {
+        setEmbedCookie(EMBED_USER_KEY, JSON.stringify(user));
+    }
 }
 
 async function resolveEmbedToken(
@@ -142,14 +162,6 @@ async function resolveEmbedToken(
         return { token: stored, user: getStoredEmbedUser() ?? undefined };
     }
 
-    const tokenParam = params.get('token');
-
-    if (tokenParam) {
-        storeEmbedSession(tokenParam);
-
-        return { token: tokenParam };
-    }
-
     const apiKey = params.get('api_key');
 
     if (apiKey) {
@@ -498,7 +510,7 @@ export default function Embed() {
     const rootStyle = {
         '--embed-bg': config.background,
         '--embed-border': config.border,
-        '--embed-danger': config.logout,
+        '--embed-danger': config.danger,
         '--embed-muted': config.textSecondary,
         '--embed-primary': config.primary,
         '--embed-primary-soft': config.primaryGradient,