add: integration admin dashboard

app/Http/Controllers/AdminController.php

@@ -57,6 +57,27 @@ public function vectorRetrievalConfig(Request $request): Response
         return Inertia::render('admin/vector-retrieval-config', $configPayload);
     }
 
+    public function vectorDbConfig(Request $request): Response
+    {
+        $configPayload = $this->resolveRagConfig($this->authToken($request), ['vector_db']);
+
+        return Inertia::render('admin/vectordb-config', $configPayload);
+    }
+
+    public function retrievalConfig(Request $request): Response
+    {
+        $configPayload = $this->resolveRagConfig($this->authToken($request), ['retrieval']);
+
+        return Inertia::render('admin/retrieval-config', $configPayload);
+    }
+
+    public function apiKeys(Request $request): Response
+    {
+        return Inertia::render('admin/api-keys', [
+            'generatedApiKey' => $request->session()->get('generatedApiKey'),
+        ]);
+    }
+
     public function settings(): Response
     {
         return Inertia::render('admin/pengaturan');
@@ -70,7 +91,7 @@ public function generateApiKey(Request $request): RedirectResponse
             return back()->withErrors(['apiKey' => $exception->getMessage()]);
         }
 
-        return to_route('admin.dashboard')
+        return to_route('admin.api-keys.index')
             ->with('generatedApiKey', $apiKey)
             ->with('toast', [
                 'message' => 'API key berhasil dibuat.',
@@ -120,7 +141,7 @@ public function updateVectorDbConfig(Request $request): RedirectResponse
                 ->withInput();
         }
 
-        return $this->adminSuccess('Konfigurasi Vector DB berhasil diperbarui.', 'admin.vector-retrieval-config');
+        return $this->adminSuccess('Konfigurasi Vector DB berhasil diperbarui.', 'admin.vectordb-config');
     }
 
     public function updateRetrievalConfig(Request $request): RedirectResponse
@@ -147,7 +168,7 @@ public function updateRetrievalConfig(Request $request): RedirectResponse
                 ->withInput();
         }
 
-        return $this->adminSuccess('Konfigurasi retrieval berhasil diperbarui.', 'admin.vector-retrieval-config');
+        return $this->adminSuccess('Konfigurasi retrieval berhasil diperbarui.', 'admin.retrieval-config');
     }
 
     public function storeUser(Request $request): RedirectResponse

app/Http/Controllers/EmbedController.php

@@ -6,6 +6,7 @@
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Cache;
+use Illuminate\Support\Facades\Cookie as CookieJar;
 use Illuminate\Support\Str;
 use Inertia\Inertia;
 use Inertia\Response;
@@ -19,8 +20,6 @@ class EmbedController extends Controller
 
     private const DIRECT_MESSAGES_SESSION_PREFIX = 'sevima_raghub_embed_direct_messages';
 
-    private const PENDING_INITIAL_CHAT_CACHE_PREFIX = 'sevima_raghub_embed_pending_initial_chat';
-
     /**
      * @var array<int, string>
      */
@@ -61,10 +60,8 @@ public function index(Request $request): Response|RedirectResponse
         $courses = [];
         $currentSession = null;
         $messages = [];
-        $pendingInitialChat = null;
         $selectedCourseId = $config['courseId'];
         $sessionId = $this->stringQuery($request, 'session_id');
-        $pendingId = $this->stringQuery($request, 'pending_id');
 
         try {
             $courses = $this->listCourses(limit: 100, token: $token)['data'];
@@ -85,11 +82,6 @@ public function index(Request $request): Response|RedirectResponse
                 if (is_string($currentSession['course_id'] ?? null)) {
                     $selectedCourseId = $currentSession['course_id'];
                 }
-
-                if ($pendingId !== null) {
-                    $pendingInitialChat = Cache::pull($this->pendingInitialChatKey($pendingId));
-                    $pendingInitialChat = is_array($pendingInitialChat) ? $pendingInitialChat : null;
-                }
             }
         } catch (RagApiException $exception) {
             $backendMessage = $exception->getMessage() ?: null;
@@ -107,7 +99,6 @@ public function index(Request $request): Response|RedirectResponse
             'isAuthorized' => $backendMessage === null,
             'isDirectChatMode' => $this->isDirectChatMode(),
             'messages' => $messages,
-            'pendingInitialChat' => $pendingInitialChat,
             'selectedCourseId' => $selectedCourseId,
             'sessionId' => $sessionId,
         ]);
@@ -121,8 +112,10 @@ public function storeSession(Request $request): RedirectResponse
             'title' => ['required', 'string'],
         ]);
 
+        $token = $this->requireEmbedToken($request);
+
         try {
-            $session = $this->createChatSession($payload, $this->requireEmbedToken($request));
+            $session = $this->createChatSession($payload, $token);
         } catch (RagApiException $exception) {
             return back()
                 ->withErrors(['chat' => $exception->getMessage()])
@@ -135,16 +128,22 @@ public function storeSession(Request $request): RedirectResponse
             return back()->withErrors(['chat' => 'Session ID tidak tersedia dari backend.']);
         }
 
-        $pendingId = (string) Str::uuid();
-        Cache::put($this->pendingInitialChatKey($pendingId), [
-            'content' => $payload['title'],
-            'courseId' => $payload['course_id'],
-        ], now()->addMinutes(5));
+        try {
+            $assistantMessage = $this->sendConfiguredChatMessage(
+                $sessionId, $payload['course_id'], $payload['title'], $token,
+            );
+
+            if ($this->isDirectChatMode()) {
+                $this->appendDirectChatMessages($sessionId, [
+                    $this->localUserMessage($payload['title']),
+                    $assistantMessage,
+                ]);
+            }
+        } catch (RagApiException) {
+            // Session created; initial message failed — user can retry from the session page.
+        }
 
-        return redirect($this->embedRoute($request, [
-            'pending_id' => $pendingId,
-            'session_id' => $sessionId,
-        ]));
+        return redirect($this->embedRoute($request, ['session_id' => $sessionId]));
     }
 
     public function storeMessage(Request $request, string $sessionId): RedirectResponse
@@ -363,7 +362,6 @@ private function emptyPayload(array $config): array
             'currentSession' => null,
             'isDirectChatMode' => false,
             'messages' => [],
-            'pendingInitialChat' => null,
             'selectedCourseId' => $config['courseId'],
             'sessionId' => null,
         ];
@@ -424,7 +422,11 @@ private function resolveEmbedToken(Request $request): ?string
             return null;
         }
 
-        return $response['token'];
+        $token = $response['token'];
+
+        CookieJar::queue($this->embedCookie($request, self::EMBED_TOKEN_COOKIE, $token));
+
+        return $token;
     }
 
     private function requireEmbedToken(Request $request): string
@@ -599,9 +601,4 @@ private function directMessagesKey(string $sessionId): string
     {
         return self::DIRECT_MESSAGES_SESSION_PREFIX.'.'.$sessionId;
     }
-
-    private function pendingInitialChatKey(string $pendingId): string
-    {
-        return self::PENDING_INITIAL_CHAT_CACHE_PREFIX.'.'.$pendingId;
-    }
 }

resources/css/app.css

@@ -990,6 +990,12 @@ @layer components {
         color: var(--student-primary);
     }
 
+    .student-empty-icon--thinking {
+        @apply animate-pulse;
+        background-color: var(--student-primary);
+        color: var(--student-primary-foreground);
+    }
+
     .student-greeting {
         @apply mb-9 text-center;
     }
@@ -1132,6 +1138,10 @@ @layer components {
         color: var(--student-primary);
     }
 
+    .student-message--assistant .student-message-bubble {
+        color: #000;
+    }
+
     .student-message--user .student-message-bubble {
         background-color: var(--student-primary);
         border-color: var(--student-primary);
@@ -1685,6 +1695,16 @@ @layer components {
         @apply w-full px-5 py-8 sm:px-8 lg:px-10;
     }
 
+    .lecturer-page input:not([type='checkbox']),
+    .lecturer-page textarea,
+    .lecturer-page select {
+        background-color: color-mix(
+            in oklab,
+            var(--lecturer-primary) 8%,
+            var(--lecturer-surface)
+        );
+    }
+
     .lecturer-page-header {
         @apply flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between;
     }

resources/js/components/admin/admin-api-key-card.tsx

@@ -1,4 +1,4 @@
-import { useForm } from '@inertiajs/react';
+import { useForm } from '@inertiajs/react';
 import { Copy, KeyRound } from 'lucide-react';
 import { toast } from 'sonner';
 
@@ -39,10 +39,10 @@ export function AdminApiKeyCard({
     }
 
     return (
-        <Card className="border-[var(--app-border)] bg-[var(--app-surface)]">
+        <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
             <CardHeader>
                 <CardTitle className="flex items-center gap-2">
-                    <KeyRound className="size-5 text-[var(--app-primary)]" />
+                    <KeyRound className="size-5 text-[var(--lecturer-primary)]" />
                     API Key Iframe
                 </CardTitle>
                 <CardDescription>
@@ -66,7 +66,7 @@ export function AdminApiKeyCard({
                 <ConfigError message={readError(apiKeyForm.errors, 'apiKey')} />
 
                 {generatedApiKey ? (
-                    <div className="grid gap-3 rounded-xl border border-[var(--app-border)] bg-[var(--app-background)] p-4">
+                    <div className="grid gap-3 rounded-xl border border-(--lecturer-border) bg-(--lecturer-surface) p-4">
                         <Label>API Key Baru</Label>
                         <div className="flex gap-2">
                             <Input readOnly value={generatedApiKey.api_key} />
@@ -87,3 +87,6 @@ export function AdminApiKeyCard({
         </Card>
     );
 }
+
+
+

resources/js/components/admin/admin-form-parts.tsx

@@ -1,4 +1,4 @@
-import type { InertiaFormProps } from '@inertiajs/react';
+import type { InertiaFormProps } from '@inertiajs/react';
 import type { ReactNode } from 'react';
 
 import { Input } from '@/components/ui/input';
@@ -51,3 +51,6 @@ export function RetrievalNumberField({
         </Field>
     );
 }
+
+
+

resources/js/components/admin/admin-llm-form.tsx

@@ -1,4 +1,4 @@
-import { useForm } from '@inertiajs/react';
+import { useForm } from '@inertiajs/react';
 import { Save } from 'lucide-react';
 import type { FormEvent } from 'react';
 
@@ -37,7 +37,7 @@ export function AdminLlmForm({ llm }: { llm?: LlmConfig | null }) {
     }
 
     return (
-        <Card className="border-[var(--app-border)] bg-[var(--app-surface)]">
+        <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
             <CardHeader>
                 <CardTitle>LLM Config</CardTitle>
                 <CardDescription>
@@ -148,7 +148,7 @@ export function AdminLlmForm({ llm }: { llm?: LlmConfig | null }) {
 
                     <Field label="System Prompt">
                         <textarea
-                            className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring min-h-36 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+                            className="border-input ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring min-h-36 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
                             value={llmForm.data.system_prompt}
                             onChange={(event) =>
                                 llmForm.setData(
@@ -174,3 +174,6 @@ export function AdminLlmForm({ llm }: { llm?: LlmConfig | null }) {
         </Card>
     );
 }
+
+
+

resources/js/components/admin/admin-overview-cards.tsx

@@ -1,4 +1,4 @@
-import { Search, Shield, Users } from 'lucide-react';
+import { Search, Shield, Users } from 'lucide-react';
 import { useMemo } from 'react';
 
 import { Badge } from '@/components/ui/badge';
@@ -31,10 +31,10 @@ export function AdminOverviewCards({
 
     return (
         <section className="grid gap-4 md:grid-cols-3">
-            <Card className="border-[var(--app-border)] bg-[var(--app-surface)]">
+            <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
                 <CardHeader className="gap-3">
                     <div className="flex items-center justify-between gap-3">
-                        <span className="rounded-xl bg-[var(--app-primary-soft)] p-3 text-[var(--app-primary)]">
+                        <span className="rounded-xl bg-[var(--lecturer-primary-soft)] p-3 text-[var(--lecturer-primary)]">
                             <Shield className="size-5" />
                         </span>
                         <Badge variant="outline">LLM</Badge>
@@ -48,10 +48,10 @@ export function AdminOverviewCards({
                 </CardHeader>
             </Card>
 
-            <Card className="border-[var(--app-border)] bg-[var(--app-surface)]">
+            <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
                 <CardHeader className="gap-3">
                     <div className="flex items-center justify-between gap-3">
-                        <span className="rounded-xl bg-[var(--app-primary-soft)] p-3 text-[var(--app-primary)]">
+                        <span className="rounded-xl bg-[var(--lecturer-primary-soft)] p-3 text-[var(--lecturer-primary)]">
                             <Search className="size-5" />
                         </span>
                         <Badge variant="outline">Retrieval</Badge>
@@ -65,10 +65,10 @@ export function AdminOverviewCards({
                 </CardHeader>
             </Card>
 
-            <Card className="border-[var(--app-border)] bg-[var(--app-surface)]">
+            <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
                 <CardHeader className="gap-3">
                     <div className="flex items-center justify-between gap-3">
-                        <span className="rounded-xl bg-[var(--app-primary-soft)] p-3 text-[var(--app-primary)]">
+                        <span className="rounded-xl bg-[var(--lecturer-primary-soft)] p-3 text-[var(--lecturer-primary)]">
                             <Users className="size-5" />
                         </span>
                         <Badge variant="outline">User</Badge>
@@ -84,3 +84,6 @@ export function AdminOverviewCards({
         </section>
     );
 }
+
+
+

resources/js/components/admin/admin-page.tsx

@@ -1,4 +1,4 @@
-import { Head } from '@inertiajs/react';
+import { Head } from '@inertiajs/react';
 import { AlertCircle } from 'lucide-react';
 import type { ReactNode } from 'react';
 
@@ -54,3 +54,6 @@ export function AdminPage({
         </>
     );
 }
+
+
+

resources/js/components/admin/admin-rag-summary.tsx

@@ -1,4 +1,4 @@
-import { Database, FileSliders, Search, Shield } from 'lucide-react';
+import { Database, FileSliders, Search, Shield } from 'lucide-react';
 
 import { Badge } from '@/components/ui/badge';
 import {
@@ -31,7 +31,7 @@ function ConfigRows({
         <dl className="grid gap-3 text-sm">
             {rows.map(([label, value]) => (
                 <div
-                    className="flex items-start justify-between gap-4 rounded-lg border border-[var(--app-border)] px-3 py-2"
+                    className="flex items-start justify-between gap-4 rounded-lg border border-(--lecturer-border) px-3 py-2"
                     key={label}
                 >
                     <dt className="text-muted-foreground">{label}</dt>
@@ -55,10 +55,10 @@ export function AdminRagSummary({
 
     return (
         <section className="grid gap-6 xl:grid-cols-2">
-            <Card className="border-[var(--app-border)] bg-[var(--app-surface)] xl:col-span-2">
+            <Card className="border-(--lecturer-border) bg-(--lecturer-surface) xl:col-span-2">
                 <CardHeader className="gap-3">
                     <div className="flex items-center justify-between gap-3">
-                        <span className="rounded-xl bg-[var(--app-primary-soft)] p-3 text-[var(--app-primary)]">
+                        <span className="rounded-xl bg-[var(--lecturer-primary-soft)] p-3 text-[var(--lecturer-primary)]">
                             <FileSliders className="size-5" />
                         </span>
                         <Badge variant="outline">RAG</Badge>
@@ -72,10 +72,10 @@ export function AdminRagSummary({
                 </CardHeader>
             </Card>
 
-            <Card className="border-[var(--app-border)] bg-[var(--app-surface)]">
+            <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
                 <CardHeader>
                     <CardTitle className="flex items-center gap-2">
-                        <Shield className="size-5 text-[var(--app-primary)]" />
+                        <Shield className="size-5 text-[var(--lecturer-primary)]" />
                         LLM
                     </CardTitle>
                     <CardDescription>Ringkasan model aktif.</CardDescription>
@@ -95,10 +95,10 @@ export function AdminRagSummary({
                 </CardContent>
             </Card>
 
-            <Card className="border-[var(--app-border)] bg-[var(--app-surface)]">
+            <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
                 <CardHeader>
                     <CardTitle className="flex items-center gap-2">
-                        <Database className="size-5 text-[var(--app-primary)]" />
+                        <Database className="size-5 text-[var(--lecturer-primary)]" />
                         VectorDB
                     </CardTitle>
                     <CardDescription>Ringkasan embedding dan chunk.</CardDescription>
@@ -115,10 +115,10 @@ export function AdminRagSummary({
                 </CardContent>
             </Card>
 
-            <Card className="border-[var(--app-border)] bg-[var(--app-surface)] xl:col-span-2">
+            <Card className="border-(--lecturer-border) bg-(--lecturer-surface) xl:col-span-2">
                 <CardHeader>
                     <CardTitle className="flex items-center gap-2">
-                        <Search className="size-5 text-[var(--app-primary)]" />
+                        <Search className="size-5 text-[var(--lecturer-primary)]" />
                         Retrieval
                     </CardTitle>
                     <CardDescription>
@@ -152,3 +152,6 @@ export function AdminRagSummary({
         </section>
     );
 }
+
+
+

resources/js/components/admin/admin-shell.tsx

@@ -1,9 +1,9 @@
-import { router } from '@inertiajs/react';
+import { router } from '@inertiajs/react';
 import {
     BrainCircuit,
     Database,
     FileSliders,
-    LayoutDashboard,
+    KeyRound,
     LogOut,
     MessageSquare,
 } from 'lucide-react';
@@ -38,19 +38,22 @@ import {
 } from '@/components/ui/sidebar';
 import { clearAuthSession, getStoredAuthUser } from '@/lib/auth';
 import {
-    dashboard as adminDashboard,
     llmConfig as adminLlmConfig,
     login as adminLogin,
-    ragConfig as adminRagConfig,
-    vectorRetrievalConfig as adminVectorRetrievalConfig,
+    retrievalConfig as adminRetrievalConfig,
+    vectordbConfig as adminVectorDbConfig,
 } from '@/routes/admin';
+import { index as adminApiKeys } from '@/routes/admin/api-keys';
 
 export type AdminMenu =
+    | 'api-keys'
     | 'dashboard'
     | 'llm-config'
     | 'rag-config'
+    | 'retrieval-config'
     | 'settings'
-    | 'vector-retrieval-config';
+    | 'vector-retrieval-config'
+    | 'vectordb-config';
 
 const adminSidebarStyle = {
     '--sidebar-width': '212px',
@@ -137,61 +140,60 @@ function AdminSidebar({ activeMenu }: { activeMenu: AdminMenu }) {
                                 <SidebarMenuItem>
                                     <SidebarMenuButton
                                         className="lecturer-nav-button"
-                                        isActive={activeMenu === 'dashboard'}
+                                        isActive={activeMenu === 'llm-config'}
                                         onClick={() =>
-                                            router.visit(adminDashboard())
+                                            router.visit(adminLlmConfig())
                                         }
-                                        tooltip="Dashboard Admin"
+                                        tooltip="LLM Config"
                                     >
-                                        <LayoutDashboard className="size-4" />
-                                        <span>Dashboard Admin</span>
+                                        <BrainCircuit className="size-4" />
+                                        <span>LLM Config</span>
                                     </SidebarMenuButton>
                                 </SidebarMenuItem>
 
                                 <SidebarMenuItem>
                                     <SidebarMenuButton
                                         className="lecturer-nav-button"
-                                        isActive={activeMenu === 'rag-config'}
+                                        isActive={
+                                            activeMenu === 'vectordb-config'
+                                        }
                                         onClick={() =>
-                                            router.visit(adminRagConfig())
+                                            router.visit(adminVectorDbConfig())
                                         }
-                                        tooltip="RAG Config"
+                                        tooltip="VectorDB Config"
                                     >
-                                        <FileSliders className="size-4" />
-                                        <span>RAG Config</span>
+                                        <Database className="size-4" />
+                                        <span>VectorDB Config</span>
                                     </SidebarMenuButton>
                                 </SidebarMenuItem>
 
                                 <SidebarMenuItem>
                                     <SidebarMenuButton
                                         className="lecturer-nav-button"
-                                        isActive={activeMenu === 'llm-config'}
+                                        isActive={
+                                            activeMenu === 'retrieval-config'
+                                        }
                                         onClick={() =>
-                                            router.visit(adminLlmConfig())
+                                            router.visit(adminRetrievalConfig())
                                         }
-                                        tooltip="LLM Config"
+                                        tooltip="Retrieval Config"
                                     >
-                                        <BrainCircuit className="size-4" />
-                                        <span>LLM Config</span>
+                                        <FileSliders className="size-4" />
+                                        <span>Retrieval Config</span>
                                     </SidebarMenuButton>
                                 </SidebarMenuItem>
 
                                 <SidebarMenuItem>
                                     <SidebarMenuButton
                                         className="lecturer-nav-button"
-                                        isActive={
-                                            activeMenu ===
-                                            'vector-retrieval-config'
-                                        }
+                                        isActive={activeMenu === 'api-keys'}
                                         onClick={() =>
-                                            router.visit(
-                                                adminVectorRetrievalConfig(),
-                                            )
+                                            router.visit(adminApiKeys())
                                         }
-                                        tooltip="VectorDB & Retrieval"
+                                        tooltip="Generate API Key"
                                     >
-                                        <Database className="size-4" />
-                                        <span>VectorDB & Retrieval</span>
+                                        <KeyRound className="size-4" />
+                                        <span>Generate API Key</span>
                                     </SidebarMenuButton>
                                 </SidebarMenuItem>
                             </SidebarMenu>
@@ -295,3 +297,6 @@ export function AdminShell({
         </SidebarProvider>
     );
 }
+
+
+

resources/js/components/admin/admin-user-management.tsx

@@ -1,4 +1,4 @@
-import { router, useForm } from '@inertiajs/react';
+import { router, useForm } from '@inertiajs/react';
 import type { InertiaFormProps } from '@inertiajs/react';
 import { Search, Trash2, UserPlus } from 'lucide-react';
 import type { FormEvent } from 'react';
@@ -67,10 +67,10 @@ export function AdminUserCreateCard() {
     }
 
     return (
-        <Card className="border-[var(--app-border)] bg-[var(--app-surface)]">
+        <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
             <CardHeader>
                 <CardTitle className="flex items-center gap-2">
-                    <UserPlus className="size-5 text-[var(--app-primary)]" />
+                    <UserPlus className="size-5 text-[var(--lecturer-primary)]" />
                     Tambah User
                 </CardTitle>
                 <CardDescription>
@@ -160,7 +160,7 @@ export function AdminUserManagement({
 
     return (
         <>
-            <Card className="border-[var(--app-border)] bg-[var(--app-surface)]">
+            <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
                 <CardHeader>
                     <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                         <div>
@@ -232,7 +232,7 @@ export function AdminUserManagement({
                     </div>
                 </CardHeader>
                 <CardContent>
-                    <div className="overflow-hidden rounded-xl border border-[var(--app-border)]">
+                    <div className="overflow-hidden rounded-xl border border-(--lecturer-border)">
                         <div className="overflow-x-auto">
                             <table className="w-full min-w-[760px] text-sm">
                                 <thead className="bg-muted/50 text-left text-muted-foreground">
@@ -252,7 +252,7 @@ export function AdminUserManagement({
                                 <tbody>
                                     {users.map((user) => (
                                         <tr
-                                            className="border-t border-[var(--app-border)]"
+                                            className="border-t border-(--lecturer-border)"
                                             key={user.id}
                                         >
                                             <td className="px-4 py-3">
@@ -272,7 +272,7 @@ export function AdminUserManagement({
                                                 <Badge
                                                     className={
                                                         isUserActive(user)
-                                                            ? 'bg-[var(--app-primary-soft)] text-[var(--app-primary)]'
+                                                            ? 'bg-[var(--lecturer-primary-soft)] text-[var(--lecturer-primary)]'
                                                             : ''
                                                     }
                                                     variant={
@@ -480,7 +480,7 @@ function UserFormFields({
             </div>
 
             <div className="grid gap-3 sm:grid-cols-2">
-                <label className="flex items-center gap-3 rounded-lg border border-[var(--app-border)] p-3 text-sm">
+                <label className="flex items-center gap-3 rounded-lg border border-(--lecturer-border) p-3 text-sm">
                     <Checkbox
                         checked={form.data.is_active}
                         onCheckedChange={(value) =>
@@ -489,7 +489,7 @@ function UserFormFields({
                     />
                     User aktif
                 </label>
-                <label className="flex items-center gap-3 rounded-lg border border-[var(--app-border)] p-3 text-sm">
+                <label className="flex items-center gap-3 rounded-lg border border-(--lecturer-border) p-3 text-sm">
                     <Checkbox
                         checked={form.data.is_superuser}
                         onCheckedChange={(value) =>
@@ -509,3 +509,6 @@ function UserFormFields({
         </form>
     );
 }
+
+
+

resources/js/components/admin/admin-vector-retrieval-forms.tsx

@@ -1,4 +1,4 @@
-import { useForm } from '@inertiajs/react';
+import { useForm } from '@inertiajs/react';
 import { Save } from 'lucide-react';
 import type { FormEvent } from 'react';
 
@@ -30,6 +30,248 @@ import type {
     VectorDbForm,
 } from '@/types/admin';
 
+export function AdminVectorDbForm({
+    vectorDb,
+}: {
+    vectorDb?: VectorDbConfig | null;
+}) {
+    const vectorDbConfig = vectorDb ?? {};
+
+    const vectorDbForm = useForm<VectorDbForm>({
+        chunk_overlap: stringValue(vectorDbConfig.chunk_overlap),
+        chunk_size: stringValue(vectorDbConfig.chunk_size),
+        embedding_model: stringValue(vectorDbConfig.embedding_model),
+        persist_path: stringValue(vectorDbConfig.persist_path),
+    });
+
+    function handleVectorDbSubmit(event: FormEvent<HTMLFormElement>): void {
+        event.preventDefault();
+        vectorDbForm.patch(updateVectorDbConfig.url(), {
+            preserveScroll: true,
+        });
+    }
+
+    return (
+        <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
+            <CardHeader>
+                <CardTitle>VectorDB Config</CardTitle>
+                <CardDescription>
+                    Atur model embedding dan konfigurasi chunking dokumen.
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <form className="grid gap-4" onSubmit={handleVectorDbSubmit}>
+                    <ConfigError
+                        message={readError(vectorDbForm.errors, 'vectorDb')}
+                    />
+
+                    <div className="grid gap-3 md:grid-cols-2">
+                        <Field label="Embedding Model">
+                            <Input
+                                value={vectorDbForm.data.embedding_model}
+                                onChange={(event) =>
+                                    vectorDbForm.setData(
+                                        'embedding_model',
+                                        event.target.value,
+                                    )
+                                }
+                            />
+                        </Field>
+                        <Field label="Persist Path">
+                            <Input
+                                value={vectorDbForm.data.persist_path}
+                                onChange={(event) =>
+                                    vectorDbForm.setData(
+                                        'persist_path',
+                                        event.target.value,
+                                    )
+                                }
+                            />
+                        </Field>
+                        <Field label="Chunk Size">
+                            <Input
+                                min="1"
+                                type="number"
+                                value={vectorDbForm.data.chunk_size}
+                                onChange={(event) =>
+                                    vectorDbForm.setData(
+                                        'chunk_size',
+                                        event.target.value,
+                                    )
+                                }
+                            />
+                        </Field>
+                        <Field label="Chunk Overlap">
+                            <Input
+                                min="0"
+                                type="number"
+                                value={vectorDbForm.data.chunk_overlap}
+                                onChange={(event) =>
+                                    vectorDbForm.setData(
+                                        'chunk_overlap',
+                                        event.target.value,
+                                    )
+                                }
+                            />
+                        </Field>
+                    </div>
+
+                    <div className="flex justify-end">
+                        <Button
+                            disabled={vectorDbForm.processing}
+                            type="submit"
+                        >
+                            {vectorDbForm.processing ? (
+                                <Spinner className="size-4" />
+                            ) : (
+                                <Save className="size-4" />
+                            )}
+                            Simpan Vector
+                        </Button>
+                    </div>
+                </form>
+            </CardContent>
+        </Card>
+    );
+}
+
+export function AdminRetrievalForm({
+    retrieval,
+}: {
+    retrieval?: RetrievalConfig | null;
+}) {
+    const retrievalConfig = retrieval ?? {};
+
+    const retrievalForm = useForm<RetrievalForm>({
+        bm25_weight: stringValue(retrievalConfig.bm25_weight),
+        candidate_pool_size: stringValue(retrievalConfig.candidate_pool_size),
+        dense_weight: stringValue(retrievalConfig.dense_weight),
+        enable_reranker: Boolean(retrievalConfig.enable_reranker),
+        history_turns: stringValue(retrievalConfig.history_turns),
+        lexical_weight: stringValue(retrievalConfig.lexical_weight),
+        max_context_chars: stringValue(retrievalConfig.max_context_chars),
+        neighbor_window: stringValue(retrievalConfig.neighbor_window),
+        reranker_model: stringValue(retrievalConfig.reranker_model),
+        similarity_threshold: stringValue(retrievalConfig.similarity_threshold),
+        top_k: stringValue(retrievalConfig.top_k),
+    });
+
+    function handleRetrievalSubmit(event: FormEvent<HTMLFormElement>): void {
+        event.preventDefault();
+        retrievalForm.patch(updateRetrievalConfig.url(), {
+            preserveScroll: true,
+        });
+    }
+
+    return (
+        <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
+            <CardHeader>
+                <CardTitle>Retrieval Config</CardTitle>
+                <CardDescription>
+                    Atur bobot retrieval, reranker, dan konteks jawaban.
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <form className="grid gap-4" onSubmit={handleRetrievalSubmit}>
+                    <ConfigError
+                        message={readError(retrievalForm.errors, 'retrieval')}
+                    />
+
+                    <div className="grid gap-3 md:grid-cols-2">
+                        <RetrievalNumberField
+                            form={retrievalForm}
+                            label="Top K"
+                            name="top_k"
+                        />
+                        <RetrievalNumberField
+                            form={retrievalForm}
+                            label="Max Context Chars"
+                            name="max_context_chars"
+                        />
+                        <RetrievalNumberField
+                            form={retrievalForm}
+                            label="BM25 Weight"
+                            name="bm25_weight"
+                            step="0.01"
+                        />
+                        <RetrievalNumberField
+                            form={retrievalForm}
+                            label="Dense Weight"
+                            name="dense_weight"
+                            step="0.01"
+                        />
+                        <RetrievalNumberField
+                            form={retrievalForm}
+                            label="Lexical Weight"
+                            name="lexical_weight"
+                            step="0.01"
+                        />
+                        <RetrievalNumberField
+                            form={retrievalForm}
+                            label="Similarity Threshold"
+                            name="similarity_threshold"
+                            step="0.01"
+                        />
+                        <RetrievalNumberField
+                            form={retrievalForm}
+                            label="History Turns"
+                            name="history_turns"
+                        />
+                        <RetrievalNumberField
+                            form={retrievalForm}
+                            label="Candidate Pool"
+                            name="candidate_pool_size"
+                        />
+                        <RetrievalNumberField
+                            form={retrievalForm}
+                            label="Neighbor Window"
+                            name="neighbor_window"
+                        />
+                        <Field label="Reranker Model">
+                            <Input
+                                value={retrievalForm.data.reranker_model}
+                                onChange={(event) =>
+                                    retrievalForm.setData(
+                                        'reranker_model',
+                                        event.target.value,
+                                    )
+                                }
+                            />
+                        </Field>
+                    </div>
+
+                    <label className="flex items-center gap-3 text-sm">
+                        <Checkbox
+                            checked={retrievalForm.data.enable_reranker}
+                            onCheckedChange={(value) =>
+                                retrievalForm.setData(
+                                    'enable_reranker',
+                                    value === true,
+                                )
+                            }
+                        />
+                        Enable reranker
+                    </label>
+
+                    <div className="flex justify-end">
+                        <Button
+                            disabled={retrievalForm.processing}
+                            type="submit"
+                        >
+                            {retrievalForm.processing ? (
+                                <Spinner className="size-4" />
+                            ) : (
+                                <Save className="size-4" />
+                            )}
+                            Simpan Retrieval
+                        </Button>
+                    </div>
+                </form>
+            </CardContent>
+        </Card>
+    );
+}
+
 export function AdminVectorRetrievalForms({
     retrieval,
     vectorDb,
@@ -77,7 +319,7 @@ export function AdminVectorRetrievalForms({
 
     return (
         <section className="grid gap-6 xl:grid-cols-2">
-            <Card className="border-[var(--app-border)] bg-[var(--app-surface)]">
+            <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
                 <CardHeader>
                     <CardTitle>VectorDB Config</CardTitle>
                     <CardDescription>
@@ -161,7 +403,7 @@ export function AdminVectorRetrievalForms({
                 </CardContent>
             </Card>
 
-            <Card className="border-[var(--app-border)] bg-[var(--app-surface)]">
+            <Card className="border-(--lecturer-border) bg-(--lecturer-surface)">
                 <CardHeader>
                     <CardTitle>Retrieval Config</CardTitle>
                     <CardDescription>
@@ -275,3 +517,6 @@ export function AdminVectorRetrievalForms({
         </section>
     );
 }
+
+
+

resources/js/components/student/student-shell.tsx

@@ -429,7 +429,7 @@ function StudentSidebar({
                             {isDeletingSession ? (
                                 <LoadingIndicator
                                     label="Menghapus"
-                                    spinnerClassName="size-3.5"
+                                    showSpinner={false}
                                 />
                             ) : (
                                 'Hapus'

resources/js/pages/admin/api-keys.tsx

@@ -0,0 +1,21 @@
+import { AdminApiKeyCard } from '@/components/admin/admin-api-key-card';
+import { AdminPage } from '@/components/admin/admin-page';
+import type { GeneratedApiKey } from '@/types/admin';
+
+type ApiKeysProps = {
+    generatedApiKey?: GeneratedApiKey | null;
+};
+
+export default function AdminApiKeys({ generatedApiKey }: ApiKeysProps) {
+    return (
+        <AdminPage
+            activeMenu="api-keys"
+            description="Generate API key untuk integrasi iframe pihak ketiga."
+            title="Generate API Key"
+        >
+            <div className="max-w-lg">
+                <AdminApiKeyCard generatedApiKey={generatedApiKey} />
+            </div>
+        </AdminPage>
+    );
+}

resources/js/pages/admin/retrieval-config.tsx

@@ -0,0 +1,19 @@
+import { AdminPage } from '@/components/admin/admin-page';
+import { AdminRetrievalForm } from '@/components/admin/admin-vector-retrieval-forms';
+import type { AdminConfigPageProps } from '@/types/admin';
+
+export default function AdminRetrievalConfig({
+    backendMessage,
+    ragConfig,
+}: AdminConfigPageProps) {
+    return (
+        <AdminPage
+            activeMenu="retrieval-config"
+            backendMessage={backendMessage}
+            description="Atur bobot retrieval, reranker, dan konteks jawaban."
+            title="Retrieval Config"
+        >
+            <AdminRetrievalForm retrieval={ragConfig?.retrieval} />
+        </AdminPage>
+    );
+}

resources/js/pages/admin/vectordb-config.tsx

@@ -0,0 +1,19 @@
+import { AdminPage } from '@/components/admin/admin-page';
+import { AdminVectorDbForm } from '@/components/admin/admin-vector-retrieval-forms';
+import type { AdminConfigPageProps } from '@/types/admin';
+
+export default function AdminVectorDbConfig({
+    backendMessage,
+    ragConfig,
+}: AdminConfigPageProps) {
+    return (
+        <AdminPage
+            activeMenu="vectordb-config"
+            backendMessage={backendMessage}
+            description="Atur model embedding dan konfigurasi chunking dokumen."
+            title="VectorDB Config"
+        >
+            <AdminVectorDbForm vectorDb={ragConfig?.vector_db} />
+        </AdminPage>
+    );
+}

resources/js/pages/embed.tsx

@@ -42,11 +42,6 @@ type EmbedConfig = {
     userName: string;
 };
 
-type PendingInitialChat = {
-    content: string;
-    courseId: string;
-};
-
 type EmbedProps = {
     backendMessage?: string | null;
     chatSessions: ChatSessionResponse[];
@@ -56,7 +51,6 @@ type EmbedProps = {
     isAuthorized: boolean;
     isDirectChatMode?: boolean;
     messages: ChatMessageResponse[];
-    pendingInitialChat?: PendingInitialChat | null;
     selectedCourseId?: string | null;
     sessionId?: string | null;
 };
@@ -360,36 +354,24 @@ export default function Embed({
     chatSessions,
     config,
     courses,
-    currentSession,
     isAuthorized,
     isDirectChatMode = false,
     messages: initialMessages,
-    pendingInitialChat,
     selectedCourseId: initialSelectedCourseId,
     sessionId,
 }: EmbedProps) {
-    const pendingInitialChatRef = useRef(pendingInitialChat ?? undefined);
-    const hasStartedPendingInitialChatRef = useRef(false);
     const isWaitingForDirectAssistantRef = useRef(false);
     const knownMessageIdsRef = useRef(
         new Set(initialMessages.map((message) => message.uuid_id)),
     );
-    const [pendingUserMessage] = useState<ChatMessageResponse | undefined>(
-        pendingInitialChat
-            ? createLocalUserMessage(pendingInitialChat.content)
-            : undefined,
-    );
-    const pendingUserMessageRef = useRef(pendingUserMessage);
     const [activeTab, setActiveTab] = useState<'chat' | 'history'>('chat');
     const [animatedAssistantMessageId, setAnimatedAssistantMessageId] =
         useState<string>();
-    const [isProcessing, setIsProcessing] = useState(
-        Boolean(pendingInitialChat),
-    );
+    const [isProcessing, setIsProcessing] = useState(false);
     const [localBackendMessage, setLocalBackendMessage] = useState<string>();
     const [optimisticMessages, setOptimisticMessages] = useState<
         ChatMessageResponse[]
-    >(() => (pendingUserMessage ? [pendingUserMessage] : []));
+    >([]);
     const [question, setQuestion] = useState('');
     const [selectedCourseId, setSelectedCourseId] = useState(
         initialSelectedCourseId ??
@@ -446,7 +428,6 @@ export default function Embed({
                             );
                         }
 
-                        pendingInitialChatRef.current = undefined;
                         setQuestion(content);
                         setLocalBackendMessage(firstError(errors));
                     },
@@ -457,7 +438,6 @@ export default function Embed({
                         setIsProcessing(true);
                     },
                     onSuccess: () => {
-                        pendingInitialChatRef.current = undefined;
                         setOptimisticMessages([]);
                         setQuestion('');
                     },
@@ -495,26 +475,6 @@ export default function Embed({
         return () => window.cancelAnimationFrame(scrollFrame);
     }, [messages, isProcessing]);
 
-    useEffect(() => {
-        const pendingInitialChat = pendingInitialChatRef.current;
-
-        if (!pendingInitialChat || hasStartedPendingInitialChatRef.current) {
-            return;
-        }
-
-        hasStartedPendingInitialChatRef.current = true;
-        const pendingMessage = pendingUserMessageRef.current;
-        const timeoutId = window.setTimeout(() => {
-            sendMessage(
-                pendingInitialChat.content,
-                pendingInitialChat.courseId,
-                pendingMessage,
-            );
-        }, 0);
-
-        return () => window.clearTimeout(timeoutId);
-    }, [sendMessage]);
-
     function handleQuestionSubmit(event: FormEvent<HTMLFormElement>): void {
         event.preventDefault();
 
@@ -715,14 +675,6 @@ export default function Embed({
                                     question={question}
                                     selectedCourseId={selectedCourseId}
                                 />
-                                {currentSession?.last_message_at && (
-                                    <p className="embed-updated-at">
-                                        Terakhir diperbarui{' '}
-                                        {formatMessageTime(
-                                            currentSession.last_message_at,
-                                        )}
-                                    </p>
-                                )}
                             </div>
                         )}
                     </section>

resources/js/pages/mahasiswa-chat.tsx

@@ -6,7 +6,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { QuestionComposer } from '@/components/student/question-composer';
 import type { DeleteSessionResult } from '@/components/student/student-shell';
 import {
-    formatSessionTime,
     StudentShell,
     useStoredStudentName,
 } from '@/components/student/student-shell';
@@ -666,18 +665,6 @@ function ChatMessage({
                     {formatMessageTime(message.created_at)}
                 </span>
 
-                {(message.sources?.length ?? 0) > 0 && (
-                    <div className="student-message-sources">
-                        {message.sources?.map((source, index) => (
-                            <span
-                                className="student-message-source"
-                                key={`${message.uuid_id}-${source.document_id}-${index}`}
-                            >
-                                {source.filename}
-                            </span>
-                        ))}
-                    </div>
-                )}
             </div>
 
             {isUser && (
@@ -1164,14 +1151,6 @@ export default function MahasiswaChat({
                             variant="dock"
                         />
 
-                        {currentSession?.last_message_at && (
-                            <p className="student-chat-updated-at">
-                                Terakhir diperbarui{' '}
-                                {formatSessionTime(
-                                    currentSession.last_message_at,
-                                )}
-                            </p>
-                        )}
                     </div>
                 </div>
             </StudentShell>

resources/js/pages/mahasiswa.tsx

@@ -1,5 +1,5 @@
 import { Head, router } from '@inertiajs/react';
-import { MessageSquare } from 'lucide-react';
+import { Bot, MessageSquare } from 'lucide-react';
 import type { FormEvent } from 'react';
 import { useState } from 'react';
 
@@ -9,6 +9,7 @@ import {
     StudentShell,
     useStoredStudentName,
 } from '@/components/student/student-shell';
+import { LoadingIndicator } from '@/components/ui/loading-indicator';
 import type { ChatSessionResponse, CourseResponse } from '@/lib/rag';
 import { destroy as destroyMahasiswaSession } from '@/routes/mahasiswa';
 import { store as storeMahasiswaSession } from '@/routes/mahasiswa/sessions';
@@ -100,16 +101,39 @@ export default function Mahasiswa({
             >
                 <div className="student-chat-stage">
                     <section className="student-empty-state">
-                        <div className="student-empty-icon">
-                            <MessageSquare className="size-8" />
+                        <div
+                            className={
+                                isProcessing
+                                    ? 'student-empty-icon student-empty-icon--thinking'
+                                    : 'student-empty-icon'
+                            }
+                        >
+                            {isProcessing ? (
+                                <Bot className="size-8" />
+                            ) : (
+                                <MessageSquare className="size-8" />
+                            )}
                         </div>
 
                         <div className="student-greeting">
-                            <h2>Good Morning, {studentName}</h2>
-                            <p>
-                                Pilih mata kuliah, lalu kirim pertanyaan pertama
-                                untuk membuat sesi baru
-                            </p>
+                            <h2>
+                                {isProcessing
+                                    ? 'The Assistant is thinking...'
+                                    : `Good Morning, ${studentName}`}
+                            </h2>
+                            {isProcessing ? (
+                                <p>
+                                    <LoadingIndicator
+                                        label="Bot sedang memikirkan jawaban"
+                                        showSpinner={false}
+                                    />
+                                </p>
+                            ) : (
+                                <p>
+                                    Pilih mata kuliah, lalu kirim pertanyaan
+                                    pertama untuk membuat sesi baru
+                                </p>
+                            )}
                         </div>
 
                         {backendMessage && (

routes/web.php

@@ -43,6 +43,12 @@
 
     Route::get('vector-retrieval-config', [AdminController::class, 'vectorRetrievalConfig'])->name('vector-retrieval-config');
 
+    Route::get('vectordb-config', [AdminController::class, 'vectorDbConfig'])->name('vectordb-config');
+
+    Route::get('retrieval-config', [AdminController::class, 'retrievalConfig'])->name('retrieval-config');
+
+    Route::get('api-keys', [AdminController::class, 'apiKeys'])->name('api-keys.index');
+
     Route::post('api-keys', [AdminController::class, 'generateApiKey'])->name('api-keys.store');
 
     Route::patch('rag/llm', [AdminController::class, 'updateLlmConfig'])->name('rag.llm.update');

tests/Feature/MahasiswaDashboardTest.php

@@ -78,10 +78,20 @@ function studentAuthUserCookie(): string
         && $request->hasHeader('Authorization', 'Bearer token'));
 });
 
-test('mahasiswa chat session can be created through laravel proxy', function () {
-    config(['services.rag.base_url' => 'https://rag.test/api/v1']);
+test('mahasiswa chat session can be created and initial message sent through laravel proxy', function () {
+    config([
+        'services.rag.base_url' => 'https://rag.test/api/v1',
+        'services.rag.chat_mode' => 'rest',
+    ]);
 
     Http::fake([
+        'https://rag.test/api/v1/chats/sessions/session-1/messages' => Http::response([
+            'content' => 'Stack adalah struktur data LIFO.',
+            'created_at' => '2026-05-01T10:01:00Z',
+            'role' => 'assistant',
+            'sources' => [],
+            'uuid_id' => 'message-1',
+        ]),
         'https://rag.test/api/v1/chats/sessions' => Http::response([
             'course_id' => '101',
             'created_at' => '2026-05-01T10:00:00Z',
@@ -101,9 +111,7 @@ function studentAuthUserCookie(): string
             'title' => 'Apa itu stack?',
         ])
         ->assertRedirect(route('mahasiswa.show', ['sessionId' => 'session-1']))
-        ->assertSessionHas('sevima_raghub_pending_initial_chat.session-1', fn (array $pendingChat): bool => $pendingChat['content'] === 'Apa itu stack?'
-            && $pendingChat['courseId'] === '101'
-            && $pendingChat['session']['uuid_id'] === 'session-1')
+        ->assertSessionMissing('sevima_raghub_pending_initial_chat.session-1')
         ->assertSessionHasNoErrors();
 
     Http::assertSent(fn (HttpRequest $request): bool => $request->method() === 'POST'
@@ -111,19 +119,24 @@ function studentAuthUserCookie(): string
         && $request->hasHeader('Authorization', 'Bearer token')
         && $request['course_id'] === '101'
         && $request['title'] === 'Apa itu stack?');
+
+    Http::assertSent(fn (HttpRequest $request): bool => $request->method() === 'POST'
+        && $request->url() === 'https://rag.test/api/v1/chats/sessions/session-1/messages'
+        && $request->hasHeader('Authorization', 'Bearer token')
+        && $request['content'] === 'Apa itu stack?');
 });
 
-test('mahasiswa new chat detail page renders pending chat without fetching empty history', function () {
+test('mahasiswa chat detail page renders session and history from api', function () {
     config([
         'services.rag.base_url' => 'https://rag.test/api/v1',
-        'services.rag.chat_mode' => 'stream',
+        'services.rag.chat_mode' => 'rest',
     ]);
 
     Http::fake([
         'https://rag.test/api/v1/courses*' => Http::response([
             'data' => [
                 [
-                    'id' => '101',
+                    'id' => 101,
                     'title' => 'Struktur Data',
                 ],
             ],
@@ -131,6 +144,33 @@ function studentAuthUserCookie(): string
             'page' => 1,
             'total' => 1,
         ]),
+        'https://rag.test/api/v1/chats/sessions/session-1/messages' => Http::response([
+            'data' => [
+                [
+                    'content' => 'Apa itu stack?',
+                    'created_at' => '2026-05-01T10:00:00Z',
+                    'role' => 'user',
+                    'sources' => [],
+                    'uuid_id' => 'user-message-1',
+                ],
+                [
+                    'content' => 'Stack adalah struktur data LIFO.',
+                    'created_at' => '2026-05-01T10:01:00Z',
+                    'role' => 'assistant',
+                    'sources' => [],
+                    'uuid_id' => 'message-1',
+                ],
+            ],
+        ]),
+        'https://rag.test/api/v1/chats/sessions/session-1' => Http::response([
+            'course_id' => '101',
+            'created_at' => '2026-05-01T10:00:00Z',
+            'message_count' => 2,
+            'title' => 'Apa itu stack?',
+            'updated_at' => '2026-05-01T10:01:00Z',
+            'user_id' => 'student-1',
+            'uuid_id' => 'session-1',
+        ]),
         'https://rag.test/api/v1/chats/sessions*' => Http::response([
             'data' => [],
             'pagination' => [
@@ -144,34 +184,19 @@ function studentAuthUserCookie(): string
 
     $this->withCookie('sevima_raghub_auth_token', 'token')
         ->withCookie('sevima_raghub_auth_user', studentAuthUserCookie())
-        ->withSession([
-            'sevima_raghub_pending_initial_chat.session-1' => [
-                'content' => 'Apa itu stack?',
-                'courseId' => '101',
-                'session' => [
-                    'course_id' => '101',
-                    'created_at' => '2026-05-01T10:00:00Z',
-                    'message_count' => 0,
-                    'title' => 'Apa itu stack?',
-                    'updated_at' => '2026-05-01T10:00:00Z',
-                    'user_id' => 'student-1',
-                    'uuid_id' => 'session-1',
-                ],
-            ],
-        ])
         ->get(route('mahasiswa.show', ['sessionId' => 'session-1']))
         ->assertOk()
         ->assertInertia(fn (Assert $page) => $page
             ->component('mahasiswa-chat')
             ->where('sessionId', 'session-1')
             ->where('currentSession.uuid_id', 'session-1')
-            ->where('messages', [])
-            ->where('pendingInitialChat.content', 'Apa itu stack?')
-            ->where('pendingInitialChat.courseId', '101')
+            ->has('messages', 2)
+            ->where('messages.0.role', 'user')
+            ->where('messages.1.role', 'assistant')
             ->where('selectedCourseId', '101'));
 
-    Http::assertNotSent(fn (HttpRequest $request): bool => $request->url() === 'https://rag.test/api/v1/chats/sessions/session-1'
-        || $request->url() === 'https://rag.test/api/v1/chats/sessions/session-1/messages');
+    Http::assertSent(fn (HttpRequest $request): bool => $request->url() === 'https://rag.test/api/v1/chats/sessions/session-1');
+    Http::assertSent(fn (HttpRequest $request): bool => $request->url() === 'https://rag.test/api/v1/chats/sessions/session-1/messages');
 });
 
 test('mahasiswa chat detail page can be rendered with direct session messages', function () {