add: page /mahasiswa/uuid

.env.example

@@ -64,3 +64,4 @@ AWS_USE_PATH_STYLE_ENDPOINT=false
 
 VITE_APP_NAME="${APP_NAME}"
 VITE_API_BASE_URL=https://lifedebugger-raghub-sevima-test.hf.space/api/v1
+VITE_CHAT_API_MODE=direct

resources/css/app.css

@@ -144,6 +144,7 @@ :root {
     --register-input-border: var(--app-border-soft);
     --register-button-border: var(--app-border-soft);
     --register-placeholder: var(--welcome-subtitle);
+    --register-danger: var(--app-danger);
     --student-bg: var(--app-bg);
     --student-sidebar-bg: var(--app-sidebar-bg);
     --student-surface: var(--app-surface);
@@ -241,6 +242,7 @@ .dark {
     --register-input-border: var(--app-border);
     --register-button-border: var(--app-border);
     --register-placeholder: var(--welcome-subtitle);
+    --register-danger: var(--app-danger);
     --student-bg: var(--app-bg);
     --student-sidebar-bg: var(--app-sidebar-bg);
     --student-surface: var(--app-surface);
@@ -513,6 +515,10 @@ @layer components {
         color: var(--welcome-accent);
     }
 
+    .login-error {
+        color: var(--register-danger);
+    }
+
     .student-dashboard-shell {
         @apply min-h-svh;
         background-color: var(--student-bg);
@@ -613,6 +619,10 @@ @layer components {
         padding: 12px 20px !important;
     }
 
+    .student-history-menu-item {
+        @apply relative;
+    }
+
     .student-history-menu-button {
         @apply rounded-[8px] text-left shadow-none;
         color: var(--student-muted);
@@ -628,6 +638,24 @@ @layer components {
         color: var(--student-text);
     }
 
+    .student-history-delete {
+        @apply absolute top-1/2 right-2 flex size-6 -translate-y-1/2 items-center justify-center rounded-[6px] opacity-0 transition-opacity;
+        color: var(--student-danger);
+    }
+
+    .student-history-menu-item:hover .student-history-delete,
+    .student-history-menu-button[data-active='true'] + .student-history-delete {
+        @apply opacity-100;
+    }
+
+    .student-history-delete:hover {
+        background-color: color-mix(
+            in oklab,
+            var(--student-danger) 12%,
+            transparent
+        );
+    }
+
     .student-history-menu-icon {
         @apply hidden;
         color: var(--student-text);
@@ -816,7 +844,7 @@ @layer components {
 
     .student-status {
         @apply -mt-5 mb-5 text-center text-xs font-medium;
-        color: var(--student-primary);
+        color: var(--student-danger);
     }
 
     .student-course-row {
@@ -867,4 +895,127 @@ @layer components {
         background-color: var(--student-primary) !important;
         color: var(--student-primary-foreground) !important;
     }
+
+    .student-chat-stage--session {
+        @apply flex-col items-stretch justify-between overflow-hidden px-5 py-0;
+    }
+
+    .student-chat-thread {
+        @apply min-h-0 w-full flex-1 overflow-y-auto py-8;
+    }
+
+    .student-chat-messages {
+        @apply flex min-h-full w-full flex-col gap-5;
+    }
+
+    .student-chat-loading {
+        @apply mt-24 text-center text-sm;
+        color: var(--student-muted);
+    }
+
+    .student-chat-status {
+        @apply mt-0 mb-4;
+    }
+
+    .student-message {
+        @apply flex w-full items-start gap-3;
+    }
+
+    .student-message--assistant {
+        @apply justify-start;
+    }
+
+    .student-message--user {
+        @apply justify-end;
+    }
+
+    .student-message-avatar {
+        @apply flex size-9 shrink-0 items-center justify-center rounded-[10px];
+    }
+
+    .student-message-avatar--assistant {
+        background-color: var(--student-primary);
+        color: var(--student-primary-foreground);
+    }
+
+    .student-message-avatar--user {
+        background-color: var(--student-primary-soft);
+        color: var(--student-primary);
+    }
+
+    .student-message-bubble {
+        @apply max-w-[min(420px,75%)] rounded-[10px] border px-4 py-3 text-xs shadow-none;
+        background-color: var(--student-surface);
+        border-color: var(--student-border-strong);
+        color: var(--student-primary);
+    }
+
+    .student-message--user .student-message-bubble {
+        background-color: var(--student-primary);
+        border-color: var(--student-primary);
+        color: var(--student-primary-foreground);
+    }
+
+    .student-message-content {
+        @apply leading-relaxed whitespace-pre-wrap;
+    }
+
+    .student-message-time {
+        @apply mt-2 block text-[10px];
+        color: color-mix(in oklab, currentColor 72%, transparent);
+    }
+
+    .student-message-sources {
+        @apply mt-3 flex flex-wrap gap-2;
+    }
+
+    .student-message-source {
+        @apply rounded-full border px-2 py-1 text-[10px];
+        border-color: color-mix(
+            in oklab,
+            var(--student-primary) 24%,
+            transparent
+        );
+        color: inherit;
+    }
+
+    .student-message-bubble--typing {
+        @apply text-[11px];
+        color: var(--student-muted);
+    }
+
+    .student-chat-composer {
+        @apply w-full shrink-0 pb-8;
+    }
+
+    .student-composer-card--dock {
+        @apply w-full;
+    }
+
+    .student-composer-card--dock .student-composer-content {
+        @apply min-h-[116px];
+    }
+
+    .student-composer-card--dock .student-question-row textarea {
+        @apply min-h-[38px];
+    }
+
+    .student-chat-updated-at {
+        @apply mt-3 text-center text-[11px];
+        color: var(--student-muted);
+    }
+
+    @media (max-width: 640px) {
+        .student-chat-stage--session {
+            @apply px-3;
+        }
+
+        .student-message-bubble {
+            @apply max-w-[calc(100vw_-_7rem)];
+        }
+
+        .student-chat-composer {
+            @apply pb-4;
+        }
+    }
 }

resources/js/components/auth/register-role-form.tsx

@@ -73,14 +73,16 @@ function RegisterField({
 
 export default function RegisterRoleForm({ role }: RegisterRoleFormProps) {
     const content = roleContent[role];
-    const [backendMessage, setBackendMessage] = useState<string>();
+    const [backendError, setBackendError] = useState<string>();
+    const [backendStatus, setBackendStatus] = useState<string>();
     const [isProcessing, setIsProcessing] = useState(false);
 
     const handleSubmit = async (
         event: FormEvent<HTMLFormElement>,
     ): Promise<void> => {
         event.preventDefault();
-        setBackendMessage(undefined);
+        setBackendError(undefined);
+        setBackendStatus(undefined);
         setIsProcessing(true);
 
         const formData = new FormData(event.currentTarget);
@@ -94,9 +96,9 @@ export default function RegisterRoleForm({ role }: RegisterRoleFormProps) {
                 identity_number: String(formData.get('identity_number') ?? ''),
             });
 
-            setBackendMessage(response.message);
+            setBackendStatus(response.message);
         } catch (error) {
-            setBackendMessage(getAuthErrorMessage(error));
+            setBackendError(getAuthErrorMessage(error));
         } finally {
             setIsProcessing(false);
         }
@@ -166,8 +168,17 @@ export default function RegisterRoleForm({ role }: RegisterRoleFormProps) {
                             </Button>
                         </form>
 
-                        {backendMessage && (
-                            <p className="login-status">{backendMessage}</p>
+                        {backendError && (
+                            <p
+                                className="login-status login-error"
+                                role="alert"
+                            >
+                                {backendError}
+                            </p>
+                        )}
+
+                        {backendStatus && (
+                            <p className="login-status">{backendStatus}</p>
                         )}
                     </CardContent>
                 </Card>

resources/js/components/student/question-composer.tsx

@@ -0,0 +1,113 @@
+import { BookOpen, Send, Sparkles } from 'lucide-react';
+import type { FormEvent } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import type { CourseResponse } from '@/lib/rag';
+import { cn } from '@/lib/utils';
+
+export function QuestionComposer({
+    courses,
+    isCourseLocked = false,
+    isLoadingCourses,
+    isProcessing,
+    onCourseChange,
+    onQuestionChange,
+    onSubmit,
+    question,
+    selectedCourseId,
+    variant = 'empty',
+}: {
+    courses: CourseResponse[];
+    isCourseLocked?: boolean;
+    isLoadingCourses: boolean;
+    isProcessing: boolean;
+    onCourseChange: (courseId: string) => void;
+    onQuestionChange: (question: string) => void;
+    onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+    question: string;
+    selectedCourseId: string;
+    variant?: 'dock' | 'empty';
+}) {
+    return (
+        <Card
+            className={cn(
+                'student-composer-card py-0',
+                variant === 'dock' && 'student-composer-card--dock',
+            )}
+        >
+            <CardContent className="student-composer-content">
+                <form className="student-composer-form" onSubmit={onSubmit}>
+                    <div className="student-course-row">
+                        <BookOpen className="student-course-icon size-5" />
+                        <span className="student-course-label text-sm">
+                            Mata Kuliah:
+                        </span>
+
+                        <Select
+                            disabled={
+                                isCourseLocked ||
+                                isLoadingCourses ||
+                                courses.length === 0
+                            }
+                            onValueChange={onCourseChange}
+                            value={selectedCourseId}
+                        >
+                            <SelectTrigger
+                                className="student-course-select"
+                                size="sm"
+                            >
+                                <SelectValue placeholder="Pilih mata kuliah" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {courses.map((course) => (
+                                    <SelectItem
+                                        key={course.id}
+                                        value={String(course.id)}
+                                    >
+                                        {course.title}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    <div className="student-composer-divider" />
+
+                    <div className="student-question-row">
+                        <Sparkles className="student-question-icon size-5" />
+                        <textarea
+                            aria-label="Pertanyaan"
+                            className="text-base"
+                            onChange={(event) =>
+                                onQuestionChange(event.target.value)
+                            }
+                            placeholder="Tulis pertanyaanmu disini..."
+                            value={question}
+                        />
+                    </div>
+
+                    <Button
+                        className="student-floating-send"
+                        disabled={
+                            isProcessing ||
+                            selectedCourseId.length === 0 ||
+                            question.trim().length === 0
+                        }
+                        size="icon"
+                        type="submit"
+                    >
+                        <Send className="size-5" />
+                    </Button>
+                </form>
+            </CardContent>
+        </Card>
+    );
+}

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

@@ -0,0 +1,368 @@
+import { router } from '@inertiajs/react';
+import {
+    ChevronDown,
+    Clock3,
+    LogOut,
+    MessageSquare,
+    Trash2,
+} from 'lucide-react';
+import type { CSSProperties, ReactNode } from 'react';
+import { useState, useSyncExternalStore } from 'react';
+
+import AppearanceToggle from '@/components/appearance-toggle';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarHeader,
+    SidebarInset,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarProvider,
+    SidebarRail,
+    SidebarTrigger,
+    useSidebar,
+} from '@/components/ui/sidebar';
+import { clearAuthSession, getStoredAuthUser } from '@/lib/auth';
+import type { ChatSessionResponse } from '@/lib/rag';
+import { login, mahasiswa } from '@/routes';
+import { show as showMahasiswaSession } from '@/routes/mahasiswa';
+
+const sidebarStyle = {
+    '--sidebar-width': '212px',
+    '--sidebar-width-icon': '64px',
+} as CSSProperties;
+
+export function getStoredStudentName(): string {
+    return getStoredAuthUser()?.name ?? 'Mahasiswa';
+}
+
+function subscribeToAuthStorage(onStoreChange: () => void): () => void {
+    if (typeof window === 'undefined') {
+        return () => {};
+    }
+
+    window.addEventListener('storage', onStoreChange);
+
+    return () => window.removeEventListener('storage', onStoreChange);
+}
+
+export function useStoredStudentName(): string {
+    return useSyncExternalStore(
+        subscribeToAuthStorage,
+        getStoredStudentName,
+        () => 'Mahasiswa',
+    );
+}
+
+export function isAbortError(error: unknown): boolean {
+    return error instanceof DOMException && error.name === 'AbortError';
+}
+
+export function formatSessionTime(value?: string): string {
+    if (!value) {
+        return '';
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+        return value;
+    }
+
+    return new Intl.DateTimeFormat('en-US', {
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+        month: 'short',
+    }).format(date);
+}
+
+function getInitials(name: string): string {
+    return name
+        .split(' ')
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part[0]?.toUpperCase())
+        .join('');
+}
+
+function handleLogout(): void {
+    clearAuthSession();
+    router.visit(login());
+}
+
+function StudentSidebarLogo() {
+    const { state, toggleSidebar } = useSidebar();
+
+    const handleLogoClick = (): void => {
+        if (state === 'collapsed') {
+            toggleSidebar();
+        }
+    };
+
+    return (
+        <button
+            aria-label="Buka sidebar"
+            className="student-logo-action"
+            onClick={handleLogoClick}
+            type="button"
+        >
+            <span className="student-logo-mark">
+                <MessageSquare className="size-5" />
+            </span>
+        </button>
+    );
+}
+
+function StudentSidebar({
+    activeSessionId,
+    chatSessions,
+    isLoading,
+    onDeleteSession,
+    studentName,
+}: {
+    activeSessionId?: string;
+    chatSessions: ChatSessionResponse[];
+    isLoading: boolean;
+    onDeleteSession?: (sessionId: string) => void;
+    studentName: string;
+}) {
+    const [isHistoryOpen, setIsHistoryOpen] = useState(true);
+    const { state } = useSidebar();
+    const isSidebarCollapsed = state === 'collapsed';
+
+    return (
+        <Sidebar className="student-sidebar" collapsible="icon">
+            <SidebarHeader className="student-sidebar-top">
+                <StudentSidebarLogo />
+                <SidebarTrigger className="student-sidebar-trigger" />
+            </SidebarHeader>
+
+            <SidebarContent className="student-sidebar-content">
+                <SidebarGroup className="student-history-group">
+                    {isSidebarCollapsed ? (
+                        <SidebarGroupContent>
+                            <SidebarMenu className="student-history-list">
+                                <SidebarMenuItem>
+                                    <SidebarMenuButton
+                                        className="student-history-menu-button"
+                                        tooltip="Riwayat Chat"
+                                    >
+                                        <Clock3 className="student-history-menu-icon size-4" />
+                                        <span className="student-history-copy">
+                                            <span className="student-history-title">
+                                                Riwayat Chat
+                                            </span>
+                                        </span>
+                                    </SidebarMenuButton>
+                                </SidebarMenuItem>
+                            </SidebarMenu>
+                        </SidebarGroupContent>
+                    ) : (
+                        <>
+                            <SidebarGroupLabel asChild>
+                                <button
+                                    aria-expanded={isHistoryOpen}
+                                    className="student-history-label"
+                                    onClick={() =>
+                                        setIsHistoryOpen(
+                                            (currentState) => !currentState,
+                                        )
+                                    }
+                                    type="button"
+                                >
+                                    <Clock3 className="size-4" />
+                                    <span>Riwayat Chat</span>
+                                    <ChevronDown className="student-history-chevron" />
+                                </button>
+                            </SidebarGroupLabel>
+
+                            {isHistoryOpen && (
+                                <SidebarGroupContent>
+                                    <SidebarMenu className="student-history-list">
+                                        {isLoading && (
+                                            <SidebarMenuItem>
+                                                <SidebarMenuButton
+                                                    className="student-history-menu-button"
+                                                    disabled
+                                                >
+                                                    <Clock3 className="student-history-menu-icon size-4" />
+                                                    <span className="student-history-copy">
+                                                        <span className="student-history-title">
+                                                            Memuat riwayat
+                                                        </span>
+                                                    </span>
+                                                </SidebarMenuButton>
+                                            </SidebarMenuItem>
+                                        )}
+
+                                        {chatSessions.map((session) => {
+                                            const sessionTime =
+                                                formatSessionTime(
+                                                    session.last_message_at ??
+                                                        session.updated_at ??
+                                                        session.created_at,
+                                                );
+
+                                            return (
+                                                <SidebarMenuItem
+                                                    className="student-history-menu-item"
+                                                    key={session.uuid_id}
+                                                >
+                                                    <SidebarMenuButton
+                                                        className="student-history-menu-button"
+                                                        isActive={
+                                                            session.uuid_id ===
+                                                            activeSessionId
+                                                        }
+                                                        onClick={() =>
+                                                            router.visit(
+                                                                showMahasiswaSession(
+                                                                    session.uuid_id,
+                                                                ),
+                                                            )
+                                                        }
+                                                        tooltip={session.title}
+                                                        type="button"
+                                                    >
+                                                        <Clock3 className="student-history-menu-icon size-4" />
+                                                        <span className="student-history-copy">
+                                                            <span className="student-history-title">
+                                                                {session.title}
+                                                            </span>
+                                                            {sessionTime && (
+                                                                <span className="student-history-meta">
+                                                                    {
+                                                                        sessionTime
+                                                                    }
+                                                                </span>
+                                                            )}
+                                                        </span>
+                                                    </SidebarMenuButton>
+
+                                                    {onDeleteSession && (
+                                                        <button
+                                                            aria-label={`Hapus sesi ${session.title}`}
+                                                            className="student-history-delete"
+                                                            onClick={(
+                                                                event,
+                                                            ) => {
+                                                                event.stopPropagation();
+                                                                onDeleteSession(
+                                                                    session.uuid_id,
+                                                                );
+                                                            }}
+                                                            type="button"
+                                                        >
+                                                            <Trash2 className="size-3" />
+                                                        </button>
+                                                    )}
+                                                </SidebarMenuItem>
+                                            );
+                                        })}
+                                    </SidebarMenu>
+                                </SidebarGroupContent>
+                            )}
+                        </>
+                    )}
+                </SidebarGroup>
+            </SidebarContent>
+
+            <SidebarFooter className="student-sidebar-footer">
+                <SidebarMenu>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton
+                            className="student-user-menu-button"
+                            tooltip={studentName}
+                        >
+                            <Avatar className="student-user-avatar">
+                                <AvatarFallback>
+                                    {getInitials(studentName) || 'AK'}
+                                </AvatarFallback>
+                            </Avatar>
+                            <span className="student-user-copy">
+                                <span className="student-user-name">
+                                    {studentName}
+                                </span>
+                                <span className="student-user-role">
+                                    Mahasiswa
+                                </span>
+                            </span>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+
+                    <SidebarMenuItem>
+                        <SidebarMenuButton
+                            className="student-logout-button"
+                            onClick={handleLogout}
+                            tooltip="Logout"
+                        >
+                            <LogOut className="size-4" />
+                            <span>Logout</span>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+            </SidebarFooter>
+
+            <SidebarRail />
+        </Sidebar>
+    );
+}
+
+export function StudentShell({
+    activeSessionId,
+    chatSessions,
+    children,
+    isLoadingSessions,
+    onDeleteSession,
+    studentName,
+}: {
+    activeSessionId?: string;
+    chatSessions: ChatSessionResponse[];
+    children: ReactNode;
+    isLoadingSessions: boolean;
+    onDeleteSession?: (sessionId: string) => void;
+    studentName: string;
+}) {
+    return (
+        <SidebarProvider
+            className="student-dashboard-shell"
+            defaultOpen
+            style={sidebarStyle}
+        >
+            <StudentSidebar
+                activeSessionId={activeSessionId}
+                chatSessions={chatSessions}
+                isLoading={isLoadingSessions}
+                onDeleteSession={onDeleteSession}
+                studentName={studentName}
+            />
+
+            <SidebarInset className="student-workspace">
+                <header className="student-topbar">
+                    <h1 className="student-brand-title">RAG Hub</h1>
+
+                    <div className="student-topbar-actions">
+                        <AppearanceToggle className="student-theme-toggle" />
+                        <Button
+                            className="student-new-session-button"
+                            onClick={() => router.visit(mahasiswa())}
+                            type="button"
+                        >
+                            + Sesi Baru
+                        </Button>
+                    </div>
+                </header>
+
+                {children}
+            </SidebarInset>
+        </SidebarProvider>
+    );
+}

resources/js/lib/api.ts

@@ -1,8 +1,8 @@
-const DEFAULT_API_BASE_URL =
-    'https://lifedebugger-raghub-sevima-test.hf.space/api/v1';
+const configuredApiBaseUrl = import.meta.env.VITE_API_BASE_URL?.trim();
 
-const configuredApiBaseUrl =
-    import.meta.env.VITE_API_BASE_URL?.trim() || DEFAULT_API_BASE_URL;
+if (!configuredApiBaseUrl) {
+    throw new Error('VITE_API_BASE_URL is not configured.');
+}
 
 export const API_BASE_URL = configuredApiBaseUrl.replace(/\/+$/, '');
 

resources/js/lib/rag.ts

@@ -1,7 +1,18 @@
 import { api, ApiError, getBackendErrorMessage } from '@/lib/api';
 
+export type ChatApiMode = 'direct' | 'rest';
+
+const configuredChatApiMode =
+    import.meta.env.VITE_CHAT_API_MODE?.trim().toLowerCase() || 'rest';
+
+if (!['direct', 'rest'].includes(configuredChatApiMode)) {
+    throw new Error('VITE_CHAT_API_MODE must be either "rest" or "direct".');
+}
+
+export const CHAT_API_MODE = configuredChatApiMode as ChatApiMode;
+
 export type CourseResponse = {
-    id: number;
+    id: number | string;
     title: string;
     description?: string;
 };
@@ -31,6 +42,10 @@ export type ChatSessionListResponse = {
     pagination: unknown;
 };
 
+export type ChatHistoryResponse = {
+    data: ChatMessageResponse[];
+};
+
 export type CreateChatSessionRequest = {
     course_id: string;
     title: string;
@@ -40,15 +55,30 @@ export type ChatRestRequest = {
     content: string;
 };
 
+export type ChatQueryRequest = {
+    course_id: string;
+    prompt: string;
+};
+
+export type DocumentSource = {
+    document_id: string;
+    filename: string;
+    excerpt: string;
+};
+
 export type ChatMessageResponse = {
     uuid_id: string;
     role: string;
     content: string;
-    sources: {
-        document_id: string;
-        filename: string;
-        excerpt: string;
-    }[];
+    sources?: DocumentSource[];
+    created_at: string;
+};
+
+export type ChatQueryResponse = {
+    message_id: string;
+    role?: string;
+    content: string;
+    sources?: DocumentSource[];
     created_at: string;
 };
 
@@ -63,6 +93,110 @@ type AuthenticatedListOptions = ListCoursesOptions & {
     courseId?: string;
 };
 
+type AuthenticatedRequestOptions = {
+    signal?: AbortSignal;
+    token?: string;
+};
+
+type SendConfiguredChatMessagePayload = {
+    content: string;
+    courseId: string;
+    sessionId: string;
+    token?: string;
+};
+
+const DIRECT_CHAT_STORAGE_PREFIX = 'sevima_raghub_direct_messages';
+
+function getDirectChatStorageKey(sessionId: string): string {
+    return `${DIRECT_CHAT_STORAGE_PREFIX}:${sessionId}`;
+}
+
+function getBrowserSessionStorage(): Storage | null {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    return window.sessionStorage;
+}
+
+function createLocalMessageId(prefix: string): string {
+    if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+        return `${prefix}-${crypto.randomUUID()}`;
+    }
+
+    return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+function normalizeDirectChatMessage(
+    response: ChatQueryResponse,
+): ChatMessageResponse {
+    return {
+        content: response.content,
+        created_at: response.created_at,
+        role: response.role ?? 'assistant',
+        sources: response.sources ?? [],
+        uuid_id: response.message_id,
+    };
+}
+
+export function isDirectChatMode(): boolean {
+    return CHAT_API_MODE === 'direct';
+}
+
+export function createLocalUserMessage(content: string): ChatMessageResponse {
+    return {
+        content,
+        created_at: new Date().toISOString(),
+        role: 'user',
+        sources: [],
+        uuid_id: createLocalMessageId('local'),
+    };
+}
+
+export function getStoredDirectChatMessages(
+    sessionId: string,
+): ChatMessageResponse[] {
+    const rawMessages = getBrowserSessionStorage()?.getItem(
+        getDirectChatStorageKey(sessionId),
+    );
+
+    if (!rawMessages) {
+        return [];
+    }
+
+    try {
+        const messages = JSON.parse(rawMessages) as ChatMessageResponse[];
+
+        return Array.isArray(messages) ? messages : [];
+    } catch {
+        return [];
+    }
+}
+
+export function saveDirectChatMessages(
+    sessionId: string,
+    messages: ChatMessageResponse[],
+): void {
+    getBrowserSessionStorage()?.setItem(
+        getDirectChatStorageKey(sessionId),
+        JSON.stringify(messages),
+    );
+}
+
+export function appendDirectChatMessages(
+    sessionId: string,
+    messages: ChatMessageResponse[],
+): void {
+    saveDirectChatMessages(sessionId, [
+        ...getStoredDirectChatMessages(sessionId),
+        ...messages,
+    ]);
+}
+
+export function clearDirectChatMessages(sessionId: string): void {
+    getBrowserSessionStorage()?.removeItem(getDirectChatStorageKey(sessionId));
+}
+
 export const ragApi = {
     listCourses({ page = 1, limit = 100, signal }: ListCoursesOptions = {}) {
         return api.get<CourseListResponse>('/courses', {
@@ -91,6 +225,35 @@ export const ragApi = {
         });
     },
 
+    getChatSession(
+        sessionId: string,
+        { signal, token }: AuthenticatedRequestOptions = {},
+    ) {
+        return api.get<ChatSessionResponse>(`/chats/sessions/${sessionId}`, {
+            signal,
+            token,
+        });
+    },
+
+    deleteChatSession(sessionId: string, token?: string) {
+        return api.delete<Record<string, never>>(
+            `/chats/sessions/${sessionId}`,
+            {
+                token,
+            },
+        );
+    },
+
+    getChatHistory(
+        sessionId: string,
+        { signal, token }: AuthenticatedRequestOptions = {},
+    ) {
+        return api.get<ChatHistoryResponse>(
+            `/chats/sessions/${sessionId}/messages`,
+            { signal, token },
+        );
+    },
+
     sendMessage(sessionId: string, payload: ChatRestRequest, token?: string) {
         return api.post<ChatMessageResponse>(
             `/chats/sessions/${sessionId}/messages`,
@@ -98,6 +261,31 @@ export const ragApi = {
             { token },
         );
     },
+
+    queryAiDirect(payload: ChatQueryRequest, token?: string) {
+        return api.post<ChatQueryResponse>('/ai/query', payload, { token });
+    },
+
+    async sendConfiguredChatMessage({
+        content,
+        courseId,
+        sessionId,
+        token,
+    }: SendConfiguredChatMessagePayload) {
+        if (CHAT_API_MODE === 'direct') {
+            const response = await this.queryAiDirect(
+                {
+                    course_id: courseId,
+                    prompt: content,
+                },
+                token,
+            );
+
+            return normalizeDirectChatMessage(response);
+        }
+
+        return this.sendMessage(sessionId, { content }, token);
+    },
 };
 
 export function getRagErrorMessage(error: unknown): string | undefined {

resources/js/pages/auth/login.tsx

@@ -16,7 +16,7 @@ type LoginProps = {
 };
 
 export default function Login({ canRegister = true, status }: LoginProps) {
-    const [backendMessage, setBackendMessage] = useState<string>();
+    const [backendError, setBackendError] = useState<string>();
     const [isProcessing, setIsProcessing] = useState(false);
     const [remember, setRemember] = useState(true);
 
@@ -24,7 +24,7 @@ export default function Login({ canRegister = true, status }: LoginProps) {
         event: FormEvent<HTMLFormElement>,
     ): Promise<void> => {
         event.preventDefault();
-        setBackendMessage(undefined);
+        setBackendError(undefined);
         setIsProcessing(true);
 
         const formData = new FormData(event.currentTarget);
@@ -41,7 +41,7 @@ export default function Login({ canRegister = true, status }: LoginProps) {
                 response.user.role === 'student' ? mahasiswa() : dashboard(),
             );
         } catch (error) {
-            setBackendMessage(getAuthErrorMessage(error));
+            setBackendError(getAuthErrorMessage(error));
         } finally {
             setIsProcessing(false);
         }
@@ -131,9 +131,16 @@ export default function Login({ canRegister = true, status }: LoginProps) {
                             </Button>
                         </form>
 
-                        {(backendMessage ?? status) && (
-                            <p className="login-status">
-                                {backendMessage ?? status}
+                        {(backendError ?? status) && (
+                            <p
+                                className={
+                                    backendError
+                                        ? 'login-status login-error'
+                                        : 'login-status'
+                                }
+                                role={backendError ? 'alert' : undefined}
+                            >
+                                {backendError ?? status}
                             </p>
                         )}
 

resources/js/pages/mahasiswa-chat.tsx

@@ -0,0 +1,372 @@
+import { Head, router } from '@inertiajs/react';
+import { Bot, UserRound } from 'lucide-react';
+import type { FormEvent } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { QuestionComposer } from '@/components/student/question-composer';
+import {
+    formatSessionTime,
+    isAbortError,
+    StudentShell,
+    useStoredStudentName,
+} from '@/components/student/student-shell';
+import { getStoredAuthToken } from '@/lib/auth';
+import type {
+    ChatHistoryResponse,
+    ChatMessageResponse,
+    ChatSessionResponse,
+    CourseResponse,
+} from '@/lib/rag';
+import {
+    appendDirectChatMessages,
+    clearDirectChatMessages,
+    createLocalUserMessage,
+    getRagErrorMessage,
+    getStoredDirectChatMessages,
+    isDirectChatMode,
+    ragApi,
+} from '@/lib/rag';
+import { mahasiswa } from '@/routes';
+
+type MahasiswaChatProps = {
+    sessionId: string;
+};
+
+function isUserMessage(role: string): boolean {
+    return ['human', 'student', 'user'].includes(role.toLowerCase());
+}
+
+function formatMessageTime(value: string): string {
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+        return value;
+    }
+
+    return new Intl.DateTimeFormat('en-US', {
+        hour: 'numeric',
+        minute: '2-digit',
+    }).format(date);
+}
+
+function ChatMessage({ message }: { message: ChatMessageResponse }) {
+    const isUser = isUserMessage(message.role);
+
+    return (
+        <article
+            className={
+                isUser
+                    ? 'student-message student-message--user'
+                    : 'student-message student-message--assistant'
+            }
+        >
+            {!isUser && (
+                <span className="student-message-avatar student-message-avatar--assistant">
+                    <Bot className="size-4" />
+                </span>
+            )}
+
+            <div className="student-message-bubble">
+                <p className="student-message-content">{message.content}</p>
+                <span className="student-message-time">
+                    {formatMessageTime(message.created_at)}
+                </span>
+
+                {(message.sources?.length ?? 0) > 0 && (
+                    <div className="student-message-sources">
+                        {message.sources?.map((source) => (
+                            <span
+                                className="student-message-source"
+                                key={`${message.uuid_id}-${source.document_id}`}
+                            >
+                                {source.filename}
+                            </span>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            {isUser && (
+                <span className="student-message-avatar student-message-avatar--user">
+                    <UserRound className="size-4" />
+                </span>
+            )}
+        </article>
+    );
+}
+
+export default function MahasiswaChat({ sessionId }: MahasiswaChatProps) {
+    const [backendMessage, setBackendMessage] = useState<string>();
+    const [chatSessions, setChatSessions] = useState<ChatSessionResponse[]>([]);
+    const [courses, setCourses] = useState<CourseResponse[]>([]);
+    const [currentSession, setCurrentSession] = useState<ChatSessionResponse>();
+    const [isLoading, setIsLoading] = useState(true);
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [messages, setMessages] = useState<ChatMessageResponse[]>([]);
+    const [question, setQuestion] = useState('');
+    const [selectedCourseId, setSelectedCourseId] = useState('');
+    const studentName = useStoredStudentName();
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+
+    const composerCourses = useMemo(() => {
+        if (
+            !currentSession ||
+            !selectedCourseId ||
+            courses.some((course) => String(course.id) === selectedCourseId)
+        ) {
+            return courses;
+        }
+
+        return [
+            {
+                id: currentSession.course_id,
+                title: currentSession.course_name ?? currentSession.course_id,
+            },
+            ...courses,
+        ];
+    }, [courses, currentSession, selectedCourseId]);
+
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ block: 'end' });
+    }, [messages, isProcessing]);
+
+    const applyHistoryResponse = useCallback(
+        (response: ChatHistoryResponse): void => {
+            if (isDirectChatMode()) {
+                setMessages([
+                    ...response.data,
+                    ...getStoredDirectChatMessages(sessionId),
+                ]);
+
+                return;
+            }
+
+            setMessages(response.data);
+        },
+        [sessionId],
+    );
+
+    useEffect(() => {
+        const controller = new AbortController();
+
+        async function loadChatData() {
+            setIsLoading(true);
+            setBackendMessage(undefined);
+
+            const token = getStoredAuthToken() ?? undefined;
+            const [
+                coursesResult,
+                sessionsResult,
+                sessionResult,
+                historyResult,
+            ] = await Promise.allSettled([
+                ragApi.listCourses({ signal: controller.signal }),
+                ragApi.listChatSessions({ signal: controller.signal, token }),
+                ragApi.getChatSession(sessionId, {
+                    signal: controller.signal,
+                    token,
+                }),
+                ragApi.getChatHistory(sessionId, {
+                    signal: controller.signal,
+                    token,
+                }),
+            ]);
+
+            if (controller.signal.aborted) {
+                return;
+            }
+
+            if (coursesResult.status === 'fulfilled') {
+                setCourses(coursesResult.value.data);
+            } else if (!isAbortError(coursesResult.reason)) {
+                setBackendMessage(getRagErrorMessage(coursesResult.reason));
+            }
+
+            if (sessionsResult.status === 'fulfilled') {
+                setChatSessions(sessionsResult.value.data);
+            } else if (!isAbortError(sessionsResult.reason)) {
+                setBackendMessage(getRagErrorMessage(sessionsResult.reason));
+            }
+
+            if (sessionResult.status === 'fulfilled') {
+                setCurrentSession(sessionResult.value);
+                setSelectedCourseId(sessionResult.value.course_id);
+            } else if (!isAbortError(sessionResult.reason)) {
+                setBackendMessage(getRagErrorMessage(sessionResult.reason));
+            }
+
+            if (historyResult.status === 'fulfilled') {
+                applyHistoryResponse(historyResult.value);
+            } else if (!isAbortError(historyResult.reason)) {
+                setBackendMessage(getRagErrorMessage(historyResult.reason));
+            }
+
+            setIsLoading(false);
+        }
+
+        void loadChatData();
+
+        return () => {
+            controller.abort();
+        };
+    }, [applyHistoryResponse, sessionId]);
+
+    const handleDeleteSession = async (targetSessionId: string) => {
+        try {
+            const token = getStoredAuthToken() ?? undefined;
+            await ragApi.deleteChatSession(targetSessionId, token);
+            clearDirectChatMessages(targetSessionId);
+
+            setChatSessions((currentSessions) =>
+                currentSessions.filter(
+                    (session) => session.uuid_id !== targetSessionId,
+                ),
+            );
+
+            if (targetSessionId === sessionId) {
+                router.visit(mahasiswa());
+            }
+        } catch (error) {
+            setBackendMessage(getRagErrorMessage(error));
+        }
+    };
+
+    const handleQuestionSubmit = async (
+        event: FormEvent<HTMLFormElement>,
+    ): Promise<void> => {
+        event.preventDefault();
+
+        const trimmedQuestion = question.trim();
+
+        if (!selectedCourseId || !trimmedQuestion) {
+            return;
+        }
+
+        setIsProcessing(true);
+        setBackendMessage(undefined);
+        setQuestion('');
+
+        const userMessage = createLocalUserMessage(trimmedQuestion);
+
+        if (isDirectChatMode()) {
+            setMessages((currentMessages) => [...currentMessages, userMessage]);
+        }
+
+        try {
+            const token = getStoredAuthToken() ?? undefined;
+            const assistantMessage = await ragApi.sendConfiguredChatMessage({
+                content: trimmedQuestion,
+                courseId: selectedCourseId,
+                sessionId,
+                token,
+            });
+
+            if (isDirectChatMode()) {
+                appendDirectChatMessages(sessionId, [
+                    userMessage,
+                    assistantMessage,
+                ]);
+                setMessages((currentMessages) => [
+                    ...currentMessages,
+                    assistantMessage,
+                ]);
+
+                return;
+            }
+
+            const history = await ragApi.getChatHistory(sessionId, { token });
+            applyHistoryResponse(history);
+        } catch (error) {
+            if (isDirectChatMode()) {
+                setMessages((currentMessages) =>
+                    currentMessages.filter(
+                        (message) => message.uuid_id !== userMessage.uuid_id,
+                    ),
+                );
+            }
+
+            setQuestion(trimmedQuestion);
+            setBackendMessage(getRagErrorMessage(error));
+        } finally {
+            setIsProcessing(false);
+        }
+    };
+
+    return (
+        <>
+            <Head title={currentSession?.title ?? 'RAG Hub'} />
+
+            <StudentShell
+                activeSessionId={sessionId}
+                chatSessions={chatSessions}
+                isLoadingSessions={isLoading}
+                onDeleteSession={(targetSessionId) => {
+                    void handleDeleteSession(targetSessionId);
+                }}
+                studentName={studentName}
+            >
+                <div className="student-chat-stage student-chat-stage--session">
+                    <section className="student-chat-thread">
+                        {backendMessage && (
+                            <p className="student-status student-chat-status">
+                                {backendMessage}
+                            </p>
+                        )}
+
+                        {isLoading ? (
+                            <p className="student-chat-loading">
+                                Memuat percakapan...
+                            </p>
+                        ) : (
+                            <div className="student-chat-messages">
+                                {messages.map((message) => (
+                                    <ChatMessage
+                                        key={message.uuid_id}
+                                        message={message}
+                                    />
+                                ))}
+
+                                {isProcessing && (
+                                    <article className="student-message student-message--assistant">
+                                        <span className="student-message-avatar student-message-avatar--assistant">
+                                            <Bot className="size-4" />
+                                        </span>
+                                        <div className="student-message-bubble student-message-bubble--typing">
+                                            Menyiapkan jawaban...
+                                        </div>
+                                    </article>
+                                )}
+
+                                <div ref={messagesEndRef} />
+                            </div>
+                        )}
+                    </section>
+
+                    <div className="student-chat-composer">
+                        <QuestionComposer
+                            courses={composerCourses}
+                            isCourseLocked
+                            isLoadingCourses={isLoading}
+                            isProcessing={isProcessing}
+                            onCourseChange={setSelectedCourseId}
+                            onQuestionChange={setQuestion}
+                            onSubmit={handleQuestionSubmit}
+                            question={question}
+                            selectedCourseId={selectedCourseId}
+                            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,364 +1,24 @@
 import { Head, router } from '@inertiajs/react';
-import {
-    BookOpen,
-    ChevronDown,
-    Clock3,
-    LogOut,
-    MessageSquare,
-    Send,
-    Sparkles,
-} from 'lucide-react';
-import type { CSSProperties, FormEvent } from 'react';
+import { MessageSquare } from 'lucide-react';
+import type { FormEvent } from 'react';
 import { useEffect, useState } from 'react';
 
-import AppearanceToggle from '@/components/appearance-toggle';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from '@/components/ui/select';
+import { QuestionComposer } from '@/components/student/question-composer';
 import {
-    Sidebar,
-    SidebarContent,
-    SidebarFooter,
-    SidebarGroup,
-    SidebarGroupContent,
-    SidebarGroupLabel,
-    SidebarHeader,
-    SidebarInset,
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem,
-    SidebarProvider,
-    SidebarRail,
-    SidebarTrigger,
-    useSidebar,
-} from '@/components/ui/sidebar';
-import {
-    clearAuthSession,
-    getStoredAuthToken,
-    getStoredAuthUser,
-} from '@/lib/auth';
+    isAbortError,
+    StudentShell,
+    useStoredStudentName,
+} from '@/components/student/student-shell';
+import { getStoredAuthToken } from '@/lib/auth';
 import type { ChatSessionResponse, CourseResponse } from '@/lib/rag';
-import { getRagErrorMessage, ragApi } from '@/lib/rag';
-import { login } from '@/routes';
-
-const sidebarStyle = {
-    '--sidebar-width': '212px',
-    '--sidebar-width-icon': '64px',
-} as CSSProperties;
-
-function getStoredStudentName(): string {
-    return getStoredAuthUser()?.name ?? 'Mahasiswa';
-}
-
-function getInitials(name: string): string {
-    return name
-        .split(' ')
-        .filter(Boolean)
-        .slice(0, 2)
-        .map((part) => part[0]?.toUpperCase())
-        .join('');
-}
-
-function handleLogout(): void {
-    clearAuthSession();
-    router.visit(login());
-}
-
-function isAbortError(error: unknown): boolean {
-    return error instanceof DOMException && error.name === 'AbortError';
-}
-
-function formatSessionTime(value?: string): string {
-    if (!value) {
-        return '';
-    }
-
-    const date = new Date(value);
-
-    if (Number.isNaN(date.getTime())) {
-        return value;
-    }
-
-    return new Intl.DateTimeFormat('en-US', {
-        day: 'numeric',
-        hour: 'numeric',
-        minute: '2-digit',
-        month: 'short',
-    }).format(date);
-}
-
-function StudentSidebarLogo() {
-    const { state, toggleSidebar } = useSidebar();
-
-    const handleLogoClick = (): void => {
-        if (state === 'collapsed') {
-            toggleSidebar();
-        }
-    };
-
-    return (
-        <button
-            aria-label="Buka sidebar"
-            className="student-logo-action"
-            onClick={handleLogoClick}
-            type="button"
-        >
-            <span className="student-logo-mark">
-                <MessageSquare className="size-5" />
-            </span>
-        </button>
-    );
-}
-
-function StudentSidebar({
-    chatSessions,
-    isLoading,
-    studentName,
-}: {
-    chatSessions: ChatSessionResponse[];
-    isLoading: boolean;
-    studentName: string;
-}) {
-    const [isHistoryOpen, setIsHistoryOpen] = useState(true);
-    const { state } = useSidebar();
-    const isSidebarCollapsed = state === 'collapsed';
-
-    return (
-        <Sidebar className="student-sidebar" collapsible="icon">
-            <SidebarHeader className="student-sidebar-top">
-                <StudentSidebarLogo />
-                <SidebarTrigger className="student-sidebar-trigger" />
-            </SidebarHeader>
-
-            <SidebarContent className="student-sidebar-content">
-                <SidebarGroup className="student-history-group">
-                    {isSidebarCollapsed ? (
-                        <SidebarGroupContent>
-                            <SidebarMenu className="student-history-list">
-                                <SidebarMenuItem>
-                                    <SidebarMenuButton
-                                        className="student-history-menu-button"
-                                        tooltip="Riwayat Chat"
-                                    >
-                                        <Clock3 className="student-history-menu-icon size-4" />
-                                        <span className="student-history-copy">
-                                            <span className="student-history-title">
-                                                Riwayat Chat
-                                            </span>
-                                        </span>
-                                    </SidebarMenuButton>
-                                </SidebarMenuItem>
-                            </SidebarMenu>
-                        </SidebarGroupContent>
-                    ) : (
-                        <>
-                            <SidebarGroupLabel asChild>
-                                <button
-                                    aria-expanded={isHistoryOpen}
-                                    className="student-history-label"
-                                    onClick={() =>
-                                        setIsHistoryOpen(
-                                            (currentState) => !currentState,
-                                        )
-                                    }
-                                    type="button"
-                                >
-                                    <Clock3 className="size-4" />
-                                    <span>Riwayat Chat</span>
-                                    <ChevronDown className="student-history-chevron" />
-                                </button>
-                            </SidebarGroupLabel>
-
-                            {isHistoryOpen && (
-                                <SidebarGroupContent>
-                                    <SidebarMenu className="student-history-list">
-                                        {isLoading && (
-                                            <SidebarMenuItem>
-                                                <SidebarMenuButton
-                                                    className="student-history-menu-button"
-                                                    disabled
-                                                >
-                                                    <Clock3 className="student-history-menu-icon size-4" />
-                                                    <span className="student-history-copy">
-                                                        <span className="student-history-title">
-                                                            Memuat riwayat
-                                                        </span>
-                                                    </span>
-                                                </SidebarMenuButton>
-                                            </SidebarMenuItem>
-                                        )}
-
-                                        {chatSessions.map((session) => (
-                                            <SidebarMenuItem
-                                                key={session.uuid_id}
-                                            >
-                                                <SidebarMenuButton
-                                                    className="student-history-menu-button"
-                                                    tooltip={session.title}
-                                                >
-                                                    <Clock3 className="student-history-menu-icon size-4" />
-                                                    <span className="student-history-copy">
-                                                        <span className="student-history-title">
-                                                            {session.title}
-                                                        </span>
-                                                        {formatSessionTime(
-                                                            session.last_message_at ??
-                                                                session.updated_at ??
-                                                                session.created_at,
-                                                        ) && (
-                                                            <span className="student-history-meta">
-                                                                {formatSessionTime(
-                                                                    session.last_message_at ??
-                                                                        session.updated_at ??
-                                                                        session.created_at,
-                                                                )}
-                                                            </span>
-                                                        )}
-                                                    </span>
-                                                </SidebarMenuButton>
-                                            </SidebarMenuItem>
-                                        ))}
-                                    </SidebarMenu>
-                                </SidebarGroupContent>
-                            )}
-                        </>
-                    )}
-                </SidebarGroup>
-            </SidebarContent>
-
-            <SidebarFooter className="student-sidebar-footer">
-                <SidebarMenu>
-                    <SidebarMenuItem>
-                        <SidebarMenuButton
-                            className="student-user-menu-button"
-                            tooltip={studentName}
-                        >
-                            <Avatar className="student-user-avatar">
-                                <AvatarFallback>
-                                    {getInitials(studentName) || 'AK'}
-                                </AvatarFallback>
-                            </Avatar>
-                            <span className="student-user-copy">
-                                <span className="student-user-name">
-                                    {studentName}
-                                </span>
-                                <span className="student-user-role">
-                                    Mahasiswa
-                                </span>
-                            </span>
-                        </SidebarMenuButton>
-                    </SidebarMenuItem>
-
-                    <SidebarMenuItem>
-                        <SidebarMenuButton
-                            className="student-logout-button"
-                            onClick={handleLogout}
-                            tooltip="Logout"
-                        >
-                            <LogOut className="size-4" />
-                            <span>Logout</span>
-                        </SidebarMenuButton>
-                    </SidebarMenuItem>
-                </SidebarMenu>
-            </SidebarFooter>
-
-            <SidebarRail />
-        </Sidebar>
-    );
-}
-
-function QuestionComposer({
-    courses,
-    isLoadingCourses,
-    isProcessing,
-    onCourseChange,
-    onQuestionChange,
-    onSubmit,
-    question,
-    selectedCourseId,
-}: {
-    courses: CourseResponse[];
-    isLoadingCourses: boolean;
-    isProcessing: boolean;
-    onCourseChange: (courseId: string) => void;
-    onQuestionChange: (question: string) => void;
-    onSubmit: (event: FormEvent<HTMLFormElement>) => void;
-    question: string;
-    selectedCourseId: string;
-}) {
-    return (
-        <Card className="student-composer-card py-0">
-            <CardContent className="student-composer-content">
-                <form className="student-composer-form" onSubmit={onSubmit}>
-                    <div className="student-course-row">
-                        <BookOpen className="student-course-icon size-5" />
-                        <span className="student-course-label text-sm">
-                            Mata Kuliah:
-                        </span>
-
-                        <Select
-                            disabled={isLoadingCourses || courses.length === 0}
-                            onValueChange={onCourseChange}
-                            value={selectedCourseId}
-                        >
-                            <SelectTrigger
-                                className="student-course-select"
-                                size="sm"
-                            >
-                                <SelectValue placeholder="Pilih mata kuliah" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {courses.map((course) => (
-                                    <SelectItem
-                                        key={course.id}
-                                        value={String(course.id)}
-                                    >
-                                        {course.title}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
-                    </div>
-
-                    <div className="student-composer-divider" />
-
-                    <div className="student-question-row">
-                        <Sparkles className="student-question-icon size-5" />
-                        <textarea
-                            className="text-base"
-                            aria-label="Pertanyaan"
-                            onChange={(event) =>
-                                onQuestionChange(event.target.value)
-                            }
-                            placeholder="Tulis pertanyaanmu disini..."
-                            value={question}
-                        />
-                    </div>
-
-                    <Button
-                        className="student-floating-send"
-                        disabled={
-                            isProcessing ||
-                            selectedCourseId.length === 0 ||
-                            question.trim().length === 0
-                        }
-                        size="icon"
-                        type="submit"
-                    >
-                        <Send className="size-5" />
-                    </Button>
-                </form>
-            </CardContent>
-        </Card>
-    );
-}
+import {
+    appendDirectChatMessages,
+    createLocalUserMessage,
+    getRagErrorMessage,
+    isDirectChatMode,
+    ragApi,
+} from '@/lib/rag';
+import { show as showMahasiswaSession } from '@/routes/mahasiswa';
 
 export default function Mahasiswa() {
     const [backendMessage, setBackendMessage] = useState<string>();
@@ -368,7 +28,7 @@ export default function Mahasiswa() {
     const [isProcessing, setIsProcessing] = useState(false);
     const [question, setQuestion] = useState('');
     const [selectedCourseId, setSelectedCourseId] = useState('');
-    const [studentName] = useState(getStoredStudentName);
+    const studentName = useStoredStudentName();
 
     useEffect(() => {
         const controller = new AbortController();
@@ -439,14 +99,22 @@ export default function Mahasiswa() {
                 token,
             );
 
-            await ragApi.sendMessage(
-                session.uuid_id,
-                { content: trimmedQuestion },
+            const userMessage = createLocalUserMessage(trimmedQuestion);
+            const assistantMessage = await ragApi.sendConfiguredChatMessage({
+                content: trimmedQuestion,
+                courseId: selectedCourseId,
+                sessionId: session.uuid_id,
                 token,
-            );
+            });
+
+            if (isDirectChatMode()) {
+                appendDirectChatMessages(session.uuid_id, [
+                    userMessage,
+                    assistantMessage,
+                ]);
+            }
 
-            setChatSessions((currentSessions) => [session, ...currentSessions]);
-            setQuestion('');
+            router.visit(showMahasiswaSession(session.uuid_id));
         } catch (error) {
             setBackendMessage(getRagErrorMessage(error));
         } finally {
@@ -458,66 +126,42 @@ export default function Mahasiswa() {
         <>
             <Head title="RAG Hub" />
 
-            <SidebarProvider
-                className="student-dashboard-shell"
-                defaultOpen
-                style={sidebarStyle}
+            <StudentShell
+                chatSessions={chatSessions}
+                isLoadingSessions={isLoading}
+                studentName={studentName}
             >
-                <StudentSidebar
-                    chatSessions={chatSessions}
-                    isLoading={isLoading}
-                    studentName={studentName}
-                />
-
-                <SidebarInset className="student-workspace">
-                    <header className="student-topbar">
-                        <h1 className="student-brand-title">RAG Hub</h1>
-
-                        <div className="student-topbar-actions">
-                            <AppearanceToggle className="student-theme-toggle" />
-                            <Button
-                                className="student-new-session-button"
-                                type="button"
-                            >
-                                + Sesi Baru
-                            </Button>
+                <div className="student-chat-stage">
+                    <section className="student-empty-state">
+                        <div className="student-empty-icon">
+                            <MessageSquare className="size-8" />
                         </div>
-                    </header>
-
-                    <div className="student-chat-stage">
-                        <section className="student-empty-state">
-                            <div className="student-empty-icon">
-                                <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>
-                            </div>
-
-                            {backendMessage && (
-                                <p className="student-status">
-                                    {backendMessage}
-                                </p>
-                            )}
+                        <div className="student-greeting">
+                            <h2>Good Morning, {studentName}</h2>
+                            <p>
+                                Pilih mata kuliah, lalu kirim pertanyaan pertama
+                                untuk membuat sesi baru
+                            </p>
+                        </div>
 
-                            <QuestionComposer
-                                courses={courses}
-                                isLoadingCourses={isLoading}
-                                isProcessing={isProcessing}
-                                onCourseChange={setSelectedCourseId}
-                                onQuestionChange={setQuestion}
-                                onSubmit={handleQuestionSubmit}
-                                question={question}
-                                selectedCourseId={selectedCourseId}
-                            />
-                        </section>
-                    </div>
-                </SidebarInset>
-            </SidebarProvider>
+                        {backendMessage && (
+                            <p className="student-status">{backendMessage}</p>
+                        )}
+
+                        <QuestionComposer
+                            courses={courses}
+                            isLoadingCourses={isLoading}
+                            isProcessing={isProcessing}
+                            onCourseChange={setSelectedCourseId}
+                            onQuestionChange={setQuestion}
+                            onSubmit={handleQuestionSubmit}
+                            question={question}
+                            selectedCourseId={selectedCourseId}
+                        />
+                    </section>
+                </div>
+            </StudentShell>
         </>
     );
 }

resources/js/types/vite-env.d.ts

@@ -3,6 +3,7 @@
 interface ImportMetaEnv {
     readonly VITE_APP_NAME?: string;
     readonly VITE_API_BASE_URL?: string;
+    readonly VITE_CHAT_API_MODE?: 'direct' | 'rest';
 }
 
 interface ImportMeta {

routes/web.php

@@ -1,6 +1,7 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
+use Inertia\Inertia;
 use Laravel\Fortify\Features;
 
 Route::inertia('/', 'welcome', [
@@ -15,4 +16,8 @@
 
 Route::inertia('mahasiswa', 'mahasiswa')->name('mahasiswa');
 
+Route::get('mahasiswa/{uuid}', fn (string $uuid) => Inertia::render('mahasiswa-chat', [
+    'sessionId' => $uuid,
+]))->name('mahasiswa.show');
+
 require __DIR__.'/settings.php';