Update src/components/DiagnosisPage.jsx

src/components/DiagnosisPage.jsx

@@ -75,22 +75,39 @@ const DiagnosisPage = () => {
     e.preventDefault();
     if (!inputMessage.trim()) return;
 
+    // 1. Buat object pesan user
     const userMsg = {
       id: messages.length + 1,
       text: inputMessage,
       sender: 'user',
       time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
     };
-    setMessages(prev => [...prev, userMsg]);
+    
+    // Update state local dulu (Optimistic UI)
+    const updatedMessages = [...messages, userMsg];
+    setMessages(updatedMessages);
     setInputMessage('');
     setIsLoading(true);
 
+    // 2. Siapkan History Chat (Ambil 4 pesan terakhir untuk konteks)
+    const chatHistory = updatedMessages
+      .filter(m => m.text && m.sender !== 'system') // Filter pesan valid
+      .slice(-4) // Batasi hanya 4 interaksi terakhir agar tidak terlalu panjang
+      .map(m => ({
+        role: m.sender === 'user' ? 'user' : 'assistant', // Map ke format backend
+        content: m.text
+      }));
+
     try {
       const token = localStorage.getItem('token');
       const response = await fetch('/api/chat', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
-        body: JSON.stringify({ message: userMsg.text })
+        // Kirim message + history
+        body: JSON.stringify({ 
+            message: userMsg.text,
+            history: chatHistory 
+        })
       });
 
       if (response.status === 401) {
@@ -102,16 +119,24 @@ const DiagnosisPage = () => {
       const data = await response.json();
       
       const botMsg = {
-        id: messages.length + 2,
+        id: updatedMessages.length + 2,
         text: data.response || "Maaf, saya tidak mengerti.",
         sender: 'bot',
         time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-        urls: data.urls || [] // Mengambil array URL dari backend
+        urls: data.urls || [] 
       };
       setMessages(prev => [...prev, botMsg]);
 
     } catch (error) {
       console.error("Error:", error);
+      const errorMsg = {
+         id: updatedMessages.length + 2,
+         text: "Gagal terhubung ke server. Mohon periksa koneksi Anda.",
+         sender: 'bot',
+         time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+         urls: []
+      }
+      setMessages(prev => [...prev, errorMsg]);
     } finally {
       setIsLoading(false);
     }
@@ -135,7 +160,6 @@ const DiagnosisPage = () => {
                 <div className="message-content">{formatMessage(msg.text)}</div>
                 
                 {/* --- DISPLAY URL REFERENCES (CAPSULE STYLE) --- */}
-                {/* Hanya tampil jika pengirimnya bot DAN ada url */}
                 {msg.sender === 'bot' && msg.urls && msg.urls.length > 0 && (
                     <div className="source-urls-container">
                         <span className="source-label">Referensi:</span>