kediritechnopark/mayagen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
everythingonblack
2025-06-07 16:01:40 +07:00
parent 6ae77c9ab7
commit 357f84c84d
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/ChatBot.js
View File

@@ -1,15 +1,15 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import styles from './ChatBot.module.css'; import styles from './ChatBot.module.css';
const ChatBot = ({existingConversation, readOnly, hh}) => { const ChatBot = ({ existingConversation, readOnly, hh }) => {
const [messages, setMessages] = useState([ const [messages, setMessages] = useState([
{ {
sender: 'bot', sender: 'bot',
text: 'Halo 👋 Saya Klinik AI! Ada yang bisa saya bantu?', text: 'Halo 👋 Saya Klinik AI! Ada yang bisa saya bantu?',
time: getTime(), time: getTime(),
quickReplies: [ quickReplies: [
'Gigi saya sakit', 'Bagaimana menghilangkan komedo',
'Saya mengalami pusing', 'Apakah bisa menghilangkan bopeng?',
'Perutku mual dan kembung', 'Perutku mual dan kembung',
], ],
}, },
@@ -17,12 +17,12 @@ const ChatBot = ({existingConversation, readOnly, hh}) => {
const [input, setInput] = useState(''); const [input, setInput] = useState('');
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
useEffect(()=>{ useEffect(() => {
if (existingConversation && existingConversation.length > 0) { if (existingConversation && existingConversation.length > 0) {
setMessages(existingConversation); setMessages(existingConversation);
} }
}, [existingConversation]) }, [existingConversation])
useEffect(() => { useEffect(() => {
if (!localStorage.getItem('session')) { if (!localStorage.getItem('session')) {
function generateUUID() { function generateUUID() {
@@ -36,7 +36,7 @@ useEffect(()=>{
const sessionId = generateUUID(); const sessionId = generateUUID();
const dateNow = new Date().toISOString(); const dateNow = new Date().toISOString();
localStorage.setItem('session', JSON.stringify({ sessionId: sessionId, lastSeen: dateNow})) localStorage.setItem('session', JSON.stringify({ sessionId: sessionId, lastSeen: dateNow }))
} }
}, []); }, []);
@@ -52,7 +52,7 @@ useEffect(()=>{
setMessages(newMessages); setMessages(newMessages);
setInput(''); setInput('');
setTimeout(() => setIsLoading(true), 1000); setTimeout(() => setIsLoading(true), 1000);
try { try {
// Send to backend // Send to backend
@@ -91,7 +91,7 @@ setTimeout(() => setIsLoading(true), 1000);
}; };
return ( return (
<div className={styles.chatContainer} style={{height: hh || '100vh'}}> <div className={styles.chatContainer} style={{ height: hh || '100vh' }}>
<div className={styles.chatHeader}> <div className={styles.chatHeader}>
<img src="https://i.ibb.co/YXxXr72/bot-avatar.png" alt="Bot Avatar" /> <img src="https://i.ibb.co/YXxXr72/bot-avatar.png" alt="Bot Avatar" />
<strong>Kloowear AI Assistant</strong> <strong>Kloowear AI Assistant</strong>
@@ -111,7 +111,7 @@ setTimeout(() => setIsLoading(true), 1000);
</div> </div>
</div> </div>
)} )}
{messages.map((msg, index) => ( {messages.slice().reverse().map((msg, index) => (
<div <div
key={index} key={index}
className={`${styles.messageRow} ${styles[msg.sender]}`} className={`${styles.messageRow} ${styles[msg.sender]}`}
@@ -151,7 +151,7 @@ setTimeout(() => setIsLoading(true), 1000);
))} ))}
</div> </div>
<div className={styles.chatInput} style={{visibility: readOnly? 'hidden': 'visible', marginTop: readOnly? '-59px' : '0px'}}> <div className={styles.chatInput} style={{ visibility: readOnly ? 'hidden' : 'visible', marginTop: readOnly ? '-59px' : '0px' }}>
<input <input
type="text" type="text"
placeholder="Ketik pesan..." placeholder="Ketik pesan..."