import { Head, Link, router, useHttp } from '@inertiajs/react'; import { ArrowLeft, Bot, Send, Trash2, User } from 'lucide-react'; import { useEffect, useRef, useState } from 'react'; import { DeleteConfirmModal } from '@/components/delete-confirm-modal'; import { Button } from '@/components/ui/button'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem } from '@/types'; type Message = { id: number; role: 'user' | 'assistant'; content: string; created_at: string; }; type Course = { id: number; title: string; slug: string; description: string | null }; type Props = { course: Course; messages: Message[]; lessonTitles: string[] }; export default function CourseChat({ course, messages: initialMessages, lessonTitles }: Props) { const [messages, setMessages] = useState(initialMessages); const [input, setInput] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const bottomRef = useRef(null); const inputRef = useRef(null); const http = useHttp(); useEffect(() => { bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages, loading]); function send() { const content = input.trim(); if (!content || loading) return; const optimistic: Message = { id: Date.now(), role: 'user', content, created_at: new Date().toISOString(), }; setMessages((prev) => [...prev, optimistic]); setInput(''); setLoading(true); setError(null); http.post( `/courses/${course.slug}/chat`, { message: content }, { onSuccess: (response: Message) => { setMessages((prev) => [...prev, response]); setLoading(false); inputRef.current?.focus(); }, onError: (err: Record | { message?: string }) => { setLoading(false); setError('message' in err ? (err.message ?? 'Terjadi kesalahan.') : 'Terjadi kesalahan.'); setMessages((prev) => prev.filter((m) => m.id !== optimistic.id)); }, }, ); } const [showClearConfirm, setShowClearConfirm] = useState(false); function clearChat() { router.delete(`/courses/${course.slug}/chat`, { onSuccess: () => setMessages([]), }); } function handleKeyDown(e: React.KeyboardEvent) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Kelas', href: '/courses' }, { title: course.title, href: `/courses/${course.slug}` }, { title: 'AI Assistant', href: '#' }, ]; return ( <>
{/* Header */}

AI Assistant

{course.title}

{messages.length > 0 && ( )}
{/* Messages */}
{messages.length === 0 && (

Halo! Saya AI Assistant

Tanyakan apa saja tentang materi {course.title}. Saya siap membantu!

{lessonTitles.length > 0 && (
{lessonTitles.slice(0, 4).map((title, i) => ( ))}
)}
)}
{messages.map((msg) => (
{msg.role === 'assistant' ? ( ) : ( )}
{msg.content}
))} {loading && (
)} {error && (

{error}

)}
{/* Input */}