Spaces:

Ikyy
/

chat

Running

App Files Files Community

Ikyy commited on Aug 1, 2024

Commit

c550f7d

verified ·

1 Parent(s): 972a96f

Upload 3 files

Browse files

Files changed (3) hide show

index.html +31 -23
script.js +95 -30
styles.css +35 -3

index.html CHANGED Viewed

@@ -1,26 +1,34 @@
-<!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Chatbot</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <div class="chat-container">
-        <div class="chat-box" id="chatBox">
-            <div class="messages" id="messages"></div>
-            <div class="typing-indicator" id="typingIndicator" style="display: none;">
-                <div class="dot"></div>
-                <div class="dot"></div>
-                <div class="dot"></div>
             </div>
         </div>
-        <div class="input-area">
-            <input type="text" id="userInput" placeholder="Type a message...">
-            <button onclick="sendMessage()">Send</button>
-        </div>
-    </div>
-    <script src="script.js"></script>
-</body>
-</html>

+<!doctype html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Chatbot</title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body>
+        <div class="chat-container">
+            <div class="chat-box" id="chatBox">
+                <div class="messages" id="messages"></div>
+                <div
+                    class="typing-indicator"
+                    id="typingIndicator"
+                    style="display: none"
+                >
+                    <div class="dot"></div>
+                    <div class="dot"></div>
+                    <div class="dot"></div>
+                </div>
+            </div>
+            <div class="input-area">
+                <textarea
+                    id="userInput"
+                    placeholder="Type your message here..."
+                    rows="1"
+                ></textarea>
+                <button onclick="sendMessage()">Send</button>
             </div>
         </div>
+        <script src="script.js"></script>
+    </body>
+</html>

script.js CHANGED Viewed

@@ -1,39 +1,104 @@
-function sendMessage() {
-    const userInput = document.getElementById('userInput');
-    const messages = document.getElementById('messages');
-    const typingIndicator = document.getElementById('typingIndicator');
-    if (userInput.value.trim() === '') {
         return; // Don't send empty messages
     }
     // Create user message element
-    const userMessage = document.createElement('div');
-    userMessage.className = 'message user-message';
     userMessage.textContent = userInput.value;
     messages.appendChild(userMessage);
     // Scroll to bottom of messages
     messages.scrollTop = messages.scrollHeight;
     // Clear user input field
-    userInput.value = '';
     // Show typing indicator
-    typingIndicator.style.display = 'flex';
-    // Simulate bot response with typing animation
-    setTimeout(() => {
-        // Hide typing indicator
-        typingIndicator.style.display = 'none';
-        // Create bot message element
-        const botMessage = document.createElement('div');
-        botMessage.className = 'message bot-message';
-        botMessage.textContent = 'ikan sepat ikan tongkol, ikyy selalu menonjol:v';
-        messages.appendChild(botMessage);
-        // Scroll to bottom of messages
-        messages.scrollTop = messages.scrollHeight;
-    }, 1500); // Adjust delay for typing indicator
-}

+// Menyimpan riwayat percakapan per pengguna
+let conversationHistory = {};
+// Identitas pengguna
+const userId = generateUniqueId(); // Fungsi untuk menghasilkan ID unik
+// Fungsi untuk menghasilkan ID unik
+function generateUniqueId() {
+    return "user_" + Math.random().toString(36).substr(2, 9);
+}
+async function sendMessage() {
+    const userInput = document.getElementById("userInput");
+    const messages = document.getElementById("messages");
+    const typingIndicator = document.getElementById("typingIndicator");
+    if (userInput.value.trim() === "") {
         return; // Don't send empty messages
     }
     // Create user message element
+    const userMessage = document.createElement("div");
+    userMessage.className = "message user-message";
     userMessage.textContent = userInput.value;
     messages.appendChild(userMessage);
+    // Update conversation history
+    if (!conversationHistory[userId]) {
+        conversationHistory[userId] = [];
+    }
+    conversationHistory[userId].push({
+        role: "user",
+        content: userInput.value
+    });
     // Scroll to bottom of messages
     messages.scrollTop = messages.scrollHeight;
     // Clear user input field
+    userInput.value = "";
     // Show typing indicator
+    typingIndicator.style.display = "flex";
+    // Create bot message element
+    const botResponse = await generate(userMessage.textContent);
+    const botMessage = document.createElement("div");
+    botMessage.className = "message bot-message";
+    let ee = 0;
+    botMessage.textContent = botResponse;
+    // Update conversation history
+    conversationHistory[userId].push({
+        role: "assistant",
+        content: botResponse
+    });
+    // Hide typing indicator
+    typingIndicator.style.display = "none";
+    messages.appendChild(botMessage);
+    // Scroll to bottom of messages
+    messages.scrollTop = messages.scrollHeight;
+}
+async function generate(q) {
+    // Mengambil riwayat percakapan untuk pengguna tertentu
+    const userConversation = conversationHistory[userId] || [];
+    const xwp = await (
+        await fetch(
+            "https://chatgpt4online.org/wp-json/mwai/v1/start_session",
+            { method: "post" }
+        )
+    ).json();
+    const bot = await fetch(
+        "https://chatgpt4online.org/wp-json/mwai-ui/v1/chats/submit",
+        {
+            method: "post",
+            headers: {
+                "Content-Type": "application/json",
+                "X-WP-Nonce": xwp.restNonce,
+                Accept: "text/event-stream"
+            },
+            body: JSON.stringify({
+                botId: "default",
+                messages: [
+                    {
+                        role: "system",
+                        content:
+                            'kamu adalah ikyy, cowo dingin, to the point, pake bahasa gaul, agak toxic, dan nyindir dikit. anggap aja yang buat kamu ikyyofc. respon huruf kecil semua dan gak pake tanda baca. jangan nanya atau nawarin bantuan ke pengguna, cukup jawab aja, termasuk kalo dipanggil namanya atau disapa. jangan pake kata sapaan seperti "bro", "sis", atau yang serupa.'
+                    },
+                    ...userConversation
+                ],
+                newMessage: q,
+                stream: false
+            })
+        }
+    );
+    let tes = await bot.json();
+    // Mengembalikan respons dari bot
+    return tes.reply;
+}

styles.css CHANGED Viewed

@@ -96,7 +96,9 @@ button {
     color: white;
     cursor: pointer;
     font-size: 16px;
-    transition: background-color 0.3s ease, transform 0.2s ease;
 }
 button:hover {
@@ -129,7 +131,8 @@ button:hover {
 }
 @keyframes typing {
-    0%, 100% {
         opacity: 0.2;
     }
     50% {
@@ -157,4 +160,33 @@ button:hover {
         opacity: 1;
         transform: translateY(0);
     }
-}

     color: white;
     cursor: pointer;
     font-size: 16px;
+    transition:
+        background-color 0.3s ease,
+        transform 0.2s ease;
 }
 button:hover {
 }
 @keyframes typing {
+    0%,
+    100% {
         opacity: 0.2;
     }
     50% {
         opacity: 1;
         transform: translateY(0);
     }
+}
+.message.bot-message {
+    white-space: pre-wrap; /* Preserve newlines and spaces */
+}
+/* ... Kode CSS lainnya ... */
+textarea {
+    flex: 1;
+    padding: 12px;
+    border: 1px solid #333;
+    border-radius: 20px;
+    margin-right: 12px;
+    background-color: #333;
+    color: #f5f5f5;
+    outline: none;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+    transition: border-color 0.3s ease;
+    resize: none; /* Disable resizing */
+    overflow-y: auto; /* Add scrollbar if content overflows */
+}
+textarea::placeholder {
+    color: #888;
+}
+textarea:focus {
+    border-color: #f5f5f5;
+}