ok

src/ChatBot.js

@@ -5,12 +5,12 @@
     const [messages, setMessages] = useState([
       {
         sender: 'bot',
-        text: 'Halo 👋 Saya Klinik AI! Ada yang bisa saya bantu?',
+        text: 'Hai Dermalovers! 👋 Saya siap membantu anda tampil lebih percaya diri. Ada pertanyaan seputar perawatan kulit atau kecantikan hari ini?',
         time: getTime(),
         quickReplies: [
-          'Bagaimana menghilangkan komedo',
-          'Apakah bisa menghilangkan bopeng?',
-          'Perutku mual dan kembung',
+          'List harga layanan Dermalounge',
+          'Beri saya info jadwal dokter',
+          'Apa saja layanan disini',
         ],
       },
     ]);
@@ -53,9 +53,10 @@
       setMessages(newMessages);
       setInput('');
 
+      setIsLoading(true);
       try {
         // Send to backend
-        const response = await fetch('https://bot.kediritechnopark.com/webhook/master-agent/ask/dev', {
+        const response = await fetch('https://bot.kediritechnopark.com/webhook/master-agent/ask', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ pertanyaan: message, sessionId: JSON.parse(localStorage.getItem('session')).sessionId, lastSeen: new Date().toISOString() }),
@@ -75,19 +76,11 @@
 
         setIsLoading(false);
       } catch (error) {
-        setMessages(prev => [
-          ...prev,
-          {
-            sender: 'bot',
-            text: 'Maaf, terjadi kesalahan pada server. Silakan coba lagi nanti.',
-            time: getTime(),
-          },
-        ]);
+        sendMessage('gimana')
         console.error('Fetch error:', error);
       } finally {
         setIsLoading(false);
       }
-        setIsLoading(false);
     };
 
     return (
@@ -112,7 +105,20 @@
               className={`${styles.messageRow} ${styles[msg.sender]}`}
             >
               <div className={`${styles.message} ${styles[msg.sender]}`}>
-                {msg.text}
+                {msg.sender !== 'bot' 
+  ? msg.text 
+  : (() => {
+    try {let cleanText = msg.text.replace(/`/g, '');  // Remove backticks
+cleanText = cleanText.substring(4);  // Remove first 4 characters
+let parsedObj = JSON.parse(cleanText);
+
+return parsedObj.jawaban;
+} catch (e) {
+  console.error("JSON parsing error:", e);  // Log error parsing if it occurs
+  return msg.text;  // Return an empty string if there is an error
+}
+
+    })()}
                 {msg.quickReplies && (
                   <div className={styles.quickReplies}>
                     {msg.quickReplies.map((reply, i) => (
@@ -145,6 +151,64 @@
             Kirim
           </button>
         </div>
+        <div style={{width: '96.6%'}}>
+                    <div style={{
+            backgroundColor: '#f0f0f0',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            overflowX: 'auto',
+            padding: '8px',
+            scrollbarWidth: 'none'
+          }}>
+            <div
+              style={{
+                flexShrink: 0,
+                background: '#fff',
+                border: '1px solid #ccc',
+                padding: '8px 12px',
+                borderRadius: '20px',
+                fontSize: '13px',
+                cursor: 'pointer',
+                margin: '3px'
+              }}
+              onClick={() => sendMessage('Dapatkah bopeng dihilangkan?')}
+            >
+              Dapatkah bopeng dihilangkan?
+            </div>
+            <div
+              style={{
+                flexShrink: 0,
+                background: '#fff',
+                border: '1px solid #ccc',
+                padding: '8px 12px',
+                borderRadius: '20px',
+                fontSize: '13px',
+                cursor: 'pointer',
+                margin: '3px'
+              }}
+              onClick={() => sendMessage('Bisa booking treatment untuk besok?')}
+            >
+              Bisa booking treatment untuk besok?
+            </div>
+            <div
+              style={{
+                flexShrink: 0,
+                background: '#fff',
+                border: '1px solid #ccc',
+                padding: '8px 12px',
+                borderRadius: '20px',
+                fontSize: '13px',
+                cursor: 'pointer',
+                margin: '3px'
+              }}
+              onClick={() => sendMessage('Bisa booking treatment untuk besok?')}
+            >
+              Ada treatment untuk jerawat?
+            </div>
+          </div>
+
+            </div>
       </div>
     );
   };