Spaces:
Paused
Paused
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Project A - Cloud Agent</title> | |
| <style> | |
| body { font-family: sans-serif; background: #f4f4f9; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } | |
| .chat-container { width: 100%; max-width: 600px; height: 90vh; background: white; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden; } | |
| .header { background: #007bff; color: white; padding: 15px; font-weight: bold; } | |
| .messages { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } | |
| .msg { padding: 10px; border-radius: 8px; max-width: 80%; font-size: 14px; line-height: 1.4; } | |
| .msg.user { background: #007bff; color: white; align-self: flex-end; } | |
| .msg.ai { background: #e9ecef; color: #333; align-self: flex-start; } | |
| .input-area { padding: 15px; border-top: 1px solid #eee; display: flex; gap: 10px; } | |
| input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 6px; outline: none; } | |
| button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 6px; cursor: pointer; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <div class="header">🤖 Project A (Cloud)</div> | |
| <div class="messages" id="messages"><div class="msg ai">Hệ thống đã sẵn sàng.</div></div> | |
| <div class="input-area"> | |
| <input type="text" id="input" placeholder="Nhập câu hỏi..." onkeypress="handleEnter(event)"> | |
| <button onclick="sendMessage()">Gửi</button> | |
| </div> | |
| </div> | |
| <script> | |
| // EMPTY URL = Relative Path (Talk to the same server hosting this file) | |
| const API_URL = ""; | |
| async function sendMessage() { | |
| const input = document.getElementById("input"); | |
| const text = input.value.trim(); | |
| if (!text) return; | |
| addMessage(text, "user"); | |
| input.value = ""; | |
| try { | |
| const response = await fetch(API_URL + "/chat", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ user_id: 1, store_id: 1, message: text }) | |
| }); | |
| const data = await response.json(); | |
| addMessage(data.response, "ai"); | |
| if (data.action === "automation") addMessage("⚡ Workflow Generated (Saved in Cloud DB)", "ai"); | |
| } catch (error) { | |
| addMessage("❌ Error: " + error, "ai"); | |
| } | |
| } | |
| function addMessage(text, sender) { | |
| const div = document.createElement("div"); | |
| div.className = `msg ${sender}`; | |
| div.innerHTML = text.replace(/\n/g, "<br>"); | |
| document.getElementById("messages").appendChild(div); | |
| } | |
| function handleEnter(e) { if (e.key === "Enter") sendMessage(); } | |
| </script> | |
| </body> | |
| </html> | |