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-10 16:28:40 +07:00
parent 984cd87bb4
commit 7847b02932
3 changed files with 147 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/dermalounge.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 729 KiB

40
src/ChatBot.js
View File

@@ -1,7 +1,7 @@
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',
@@ -52,7 +52,6 @@ const ChatBot = ({ existingConversation, readOnly, hh }) => {
setMessages(newMessages); setMessages(newMessages);
setInput(''); setInput('');
setTimeout(() => setIsLoading(true), 1000);
try { try {
// Send to backend // Send to backend
@@ -66,7 +65,7 @@ const ChatBot = ({ existingConversation, readOnly, hh }) => {
console.log(data) console.log(data)
// Assuming your backend sends back something like: { answer: "text" } // Assuming your backend sends back something like: { answer: "text" }
// Adjust this according to your actual response shape // Adjust this according to your actual response shape
const botAnswer = data[0].output || data[0].output[0].text || 'Maaf, saya tidak mengerti.'; const botAnswer = data[0].output[0].text || data[0].output || 'Maaf, saya tidak mengerti.';
// Add bot's reply // Add bot's reply
setMessages(prev => [ setMessages(prev => [
@@ -94,19 +93,14 @@ const ChatBot = ({ existingConversation, readOnly, hh }) => {
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="/dermalounge.jpg" alt="Bot Avatar" />
<strong>Kloowear AI Assistant</strong> <strong>DERMALOUNGE</strong>
</div> </div>
<div className={styles.chatBody}> <div className={styles.chatBody}>
{isLoading && ( {isLoading && (
<div className={`${styles.messageRow} ${styles.bot}`}> <div className={`${styles.messageRow} ${styles.bot}`}>
<img
src="https://i.ibb.co/YXxXr72/bot-avatar.png"
alt="Bot"
className={styles.avatar}
/>
<div className={`${styles.message} ${styles.bot}`}> <div className={`${styles.message} ${styles.bot}`}>
<em>Mengetik...</em> <em>Mengetik...</em>
</div> </div>
@@ -117,13 +111,6 @@ const ChatBot = ({ existingConversation, readOnly, hh }) => {
key={index} key={index}
className={`${styles.messageRow} ${styles[msg.sender]}`} className={`${styles.messageRow} ${styles[msg.sender]}`}
> >
{msg.sender === 'bot' && (
<img
src="https://i.ibb.co/YXxXr72/bot-avatar.png"
alt="Bot"
className={styles.avatar}
/>
)}
<div className={`${styles.message} ${styles[msg.sender]}`}> <div className={`${styles.message} ${styles[msg.sender]}`}>
{msg.text} {msg.text}
{msg.quickReplies && ( {msg.quickReplies && (
@@ -141,13 +128,6 @@ const ChatBot = ({ existingConversation, readOnly, hh }) => {
)} )}
<div className={styles.timestamp}>{msg.time}</div> <div className={styles.timestamp}>{msg.time}</div>
</div> </div>
{msg.sender === 'user' && (
<img
src="https://i.ibb.co/4pDNDk1/user-avatar.png"
alt="User"
className={styles.avatar}
/>
)}
</div> </div>
))} ))}
</div> </div>
@@ -167,11 +147,11 @@ const ChatBot = ({ existingConversation, readOnly, hh }) => {
</div> </div>
</div> </div>
); );
}; };
function getTime() { function getTime() {
const now = new Date(); const now = new Date();
return now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); return now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
} }
export default ChatBot; export default ChatBot;

8
src/Dashboard.js
View File

@@ -128,9 +128,9 @@ const Dashboard = () => {
return ( return (
<div className={styles.dashboardContainer}> <div className={styles.dashboardContainer}>
<div className={styles.dashboardHeader}> <div className={styles.dashboardHeader}>
<img src="https://i.ibb.co/YXxXr72/bot-avatar.png" alt="Bot Avatar" /> <img src="/dermalounge.jpg" alt="Bot Avatar" />
<div> <div>
<h1>Kloowear AI Admin Dashboard</h1> <h1>Dermalounge AI Admin Dashboard</h1>
<p>Statistik penggunaan chatbot secara real-time</p> <p>Statistik penggunaan chatbot secara real-time</p>
</div> </div>
</div> </div>
@@ -159,6 +159,10 @@ const Dashboard = () => {
<canvas ref={chartRef}></canvas> <canvas ref={chartRef}></canvas>
</div> </div>
<div className={styles.footer}>
UNTUK MENAMBAHKAN LAYANAN, KUNJUNGI <a href="https://drive.kediritechnopark.com">LINK INI</a>
dengan username: dermalounge, password: 1234
</div>
<div className={styles.footer}> <div className={styles.footer}>
&copy; 2025 Kloowear AI - Admin Panel &copy; 2025 Kloowear AI - Admin Panel
</div> </div>