Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Agent Chat</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script> | |
| <style> | |
| /* Overall dark theme background */ | |
| body { | |
| background-color: #1a1a2e; | |
| color: #eaeaea; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| h1 { | |
| margin-bottom: 20px; | |
| color: #eaeaea; | |
| } | |
| .btn { | |
| background-color: #007bff; | |
| color: #fff; | |
| padding: 8px 12px; | |
| text-decoration: none; | |
| border-radius: 5px; | |
| margin-left: 10px; | |
| } | |
| .btn:hover { | |
| background-color: #0056b3; | |
| } | |
| /* Chat conversation container */ | |
| .chat-container { | |
| background-color: #16213e; | |
| border-radius: 8px; | |
| padding: 20px; | |
| height: 400px; | |
| overflow-y: auto; | |
| margin-bottom: 20px; | |
| } | |
| /* Logs container */ | |
| .logs-container { | |
| background-color: #0f3460; | |
| border-radius: 8px; | |
| padding: 20px; | |
| height: 150px; | |
| overflow-y: auto; | |
| margin-bottom: 20px; | |
| } | |
| /* Message styling */ | |
| .message { | |
| margin-bottom: 10px; | |
| display: flex; | |
| align-items: flex-start; | |
| } | |
| .message.user { | |
| justify-content: flex-end; | |
| } | |
| .message.agent { | |
| justify-content: flex-start; | |
| } | |
| .bubble { | |
| max-width: 70%; | |
| padding: 10px 15px; | |
| border-radius: 15px; | |
| line-height: 1.4; | |
| word-wrap: break-word; | |
| } | |
| /* User message bubble style */ | |
| .bubble.user { | |
| background-color: #007bff; | |
| color: #fff; | |
| border-bottom-right-radius: 0; | |
| } | |
| /* Agent message bubble style */ | |
| .bubble.agent { | |
| background-color: #2d3a55; | |
| color: #fff; | |
| border-bottom-left-radius: 0; | |
| } | |
| /* Log message bubble style */ | |
| .bubble.log { | |
| background-color: #444; | |
| color: #ccc; | |
| font-size: 0.85rem; | |
| border-radius: 5px; | |
| padding: 5px 10px; | |
| margin: 2px 0; | |
| } | |
| /* Input area styling */ | |
| .input-area { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .input-area textarea { | |
| flex: 1; | |
| padding: 10px; | |
| border-radius: 5px; | |
| border: none; | |
| resize: none; | |
| font-size: 1rem; | |
| } | |
| .input-area button { | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| border: none; | |
| background-color: #007bff; | |
| color: #fff; | |
| cursor: pointer; | |
| } | |
| .input-area button:hover { | |
| background-color: #0056b3; | |
| } | |
| .alert { | |
| padding: 10px; | |
| margin-bottom: 10px; | |
| border-radius: 5px; | |
| text-align: center; | |
| position: absolute; | |
| position-area: top center; | |
| top: 30px; | |
| align-items: center; | |
| } | |
| .alert-error { | |
| background-color: #D84040; | |
| color: #ffffff; | |
| } | |
| .alert-success { | |
| background-color: #D2DE32; | |
| color: #ffffff; | |
| } | |
| .alert-warning { | |
| background-color: #FFC700; | |
| color: #ffffff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container-flash"> | |
| {% with messages = get_flashed_messages(with_categories=true) %} | |
| {% if messages %} | |
| <div id="flash-message" class="alert alert-{{ messages[0][0] }}"> | |
| <strong>{{ messages[0][1] }}</strong> | |
| </div> | |
| {% endif %} | |
| {% endwith %} | |
| </div> | |
| <div class="container"> | |
| <header> | |
| <h1>Agent Chat</h1> | |
| <div> | |
| <!-- Link to upload page --> | |
| <a href="/upload" class="btn">Upload DB</a> | |
| <!-- Link to view the uploaded DB file using the static route --> | |
| <a href="/files/uploaded.db" class="btn">View Uploaded DB</a> | |
| </div> | |
| </header> | |
| <!-- Chat conversation container --> | |
| <div class="chat-container" id="chat"> | |
| <!-- Conversation messages will appear here --> | |
| </div> | |
| <!-- Logs container --> | |
| <div class="logs-container" id="logs"> | |
| <!-- Log messages will appear here --> | |
| </div> | |
| <!-- Input area for sending prompts --> | |
| <div class="input-area"> | |
| <textarea id="prompt" rows="2" placeholder="Type your message here..."></textarea> | |
| <button id="send">Send</button> | |
| </div> | |
| </div> | |
| <script> | |
| const socket = io(); | |
| const chatContainer = document.getElementById("chat"); | |
| const logsContainer = document.getElementById("logs"); | |
| const sendButton = document.getElementById("send"); | |
| const promptTextarea = document.getElementById("prompt"); | |
| const flashMessage = document.getElementById('flash-message'); | |
| //for flash message | |
| if (flashMessage) { | |
| setTimeout(function() { | |
| flashMessage.style.display = 'none'; | |
| }, 2000); // Hide after 2 seconds | |
| } | |
| // Function to add a chat message bubble | |
| function addMessage(sender, text) { | |
| const messageDiv = document.createElement("div"); | |
| messageDiv.classList.add("message", sender); | |
| const bubbleDiv = document.createElement("div"); | |
| bubbleDiv.classList.add("bubble", sender); | |
| bubbleDiv.textContent = text; | |
| messageDiv.appendChild(bubbleDiv); | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| // Function to add a log message bubble | |
| function addLogMessage(text) { | |
| const logDiv = document.createElement("div"); | |
| logDiv.classList.add("bubble", "log"); | |
| logDiv.textContent = text; | |
| logsContainer.appendChild(logDiv); | |
| logsContainer.scrollTop = logsContainer.scrollHeight; | |
| } | |
| // Send user's message when "Send" button is clicked | |
| sendButton.addEventListener("click", () => { | |
| const prompt = promptTextarea.value.trim(); | |
| if (!prompt) return; | |
| addMessage("user", prompt); | |
| promptTextarea.value = ""; | |
| // Send prompt to the server via a POST request | |
| fetch("/generate", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ prompt: prompt }) | |
| }); | |
| }); | |
| // Handle streaming tokens for the agent's reply. | |
| let agentMessageBubble = null; | |
| socket.on("final_stream", (data) => { | |
| if (!agentMessageBubble) { | |
| // Create an agent message bubble if one does not exist. | |
| const messageDiv = document.createElement("div"); | |
| messageDiv.classList.add("message", "agent"); | |
| agentMessageBubble = document.createElement("div"); | |
| agentMessageBubble.classList.add("bubble", "agent"); | |
| messageDiv.appendChild(agentMessageBubble); | |
| chatContainer.appendChild(messageDiv); | |
| } | |
| // Append incoming data to the agent's bubble. | |
| agentMessageBubble.textContent += data.message; | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| }); | |
| // When the final answer is sent, finish the bubble. | |
| socket.on("final", (data) => { | |
| if (!agentMessageBubble) { | |
| addMessage("agent", data.message); | |
| } else { | |
| agentMessageBubble.textContent = data.message; | |
| agentMessageBubble = null; | |
| } | |
| }); | |
| // Append incoming log messages to the logs container. | |
| socket.on("log", (data) => { | |
| addLogMessage(data.message); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |