Spaces:

WebashalarForML
/

SQL_agent

Sleeping

File size: 7,501 Bytes

<!DOCTYPE html>
<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>