Update templates/index.html

templates/index.html

@@ -5,270 +5,542 @@
   <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>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
-    /* Overall dark theme background */
-    body {
-      background-color: #1a1a2e;
-      color: #eaeaea;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    :root {
+      --primary: #10a37f;
+      --primary-dark: #0d8a6a;
+      --bg-color: #343541;
+      --chat-bg: #444654;
+      --user-bg: #343541;
+      --text-color: #ececf1;
+      --text-secondary: #acacbe;
+      --border-color: #565869;
+      --log-bg: #2a2b32;
+      --error-color: #ef4146;
+      --warning-color: #f0b72f;
+    }
+
+    * {
+      box-sizing: border-box;
       margin: 0;
       padding: 0;
     }
-    .container {
-      max-width: 800px;
-      margin: 0 auto;
-      padding: 20px;
+
+    body {
+      background-color: var(--bg-color);
+      color: var(--text-color);
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      overflow: hidden;
     }
-    header {
+
+    nav {
+      background-color: var(--user-bg);
+      padding: 12px 20px;
+      border-bottom: 1px solid var(--border-color);
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 20px;
     }
-    h1 {
-      margin-bottom: 20px;
-      color: #eaeaea;
+
+    .nav-title {
+      font-size: 1.2rem;
+      font-weight: 600;
+    }
+
+    .nav-actions {
+      display: flex;
+      gap: 10px;
     }
+
     .btn {
-      background-color: #007bff;
-      color: #fff;
+      background-color: var(--primary);
+      color: white;
+      border: none;
+      border-radius: 4px;
       padding: 8px 12px;
-      text-decoration: none;
-      border-radius: 5px;
-      margin-left: 10px;
+      font-size: 0.9rem;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: background-color 0.2s;
     }
+
     .btn:hover {
-      background-color: #0056b3;
+      background-color: var(--primary-dark);
     }
-    /* Chat conversation container */
+
+    .btn-sm {
+      padding: 6px 10px;
+      font-size: 0.8rem;
+    }
+
+    .btn-icon {
+      padding: 8px;
+      border-radius: 4px;
+      background: transparent;
+      color: var(--text-color);
+    }
+
+    .btn-icon:hover {
+      background-color: rgba(255,255,255,0.1);
+    }
+
+    main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
     .chat-container {
-      background-color: #16213e;
-      border-radius: 8px;
-      padding: 20px;
-      height: 400px;
+      flex: 1;
       overflow-y: auto;
-      margin-bottom: 20px;
+      padding: 20px 0;
     }
-    /* Logs container */
-    .logs-container {
-      background-color: #0f3460;
-      border-radius: 8px;
+
+    .message {
       padding: 20px;
-      height: 150px;
-      overflow-y: auto;
-      margin-bottom: 20px;
+      display: flex;
+      max-width: 900px;
+      margin: 0 auto;
+      gap: 20px;
     }
-    /* Message styling */
-    .message {
-      margin-bottom: 10px;
+
+    .message-user {
+      background-color: var(--user-bg);
+    }
+
+    .message-agent {
+      background-color: var(--chat-bg);
+    }
+
+    .avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 4px;
       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;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .avatar-user {
+      background-color: var(--primary);
+    }
+
+    .avatar-agent {
+      background-color: #5436da;
+    }
+
+    .message-content {
+      flex: 1;
+      line-height: 1.5;
+      padding-top: 4px;
+    }
+
+    .logs-container {
+      background-color: var(--log-bg);
+      border-top: 1px solid var(--border-color);
+      padding: 12px 20px;
+      max-height: 120px;
+      overflow-y: auto;
       font-size: 0.85rem;
-      border-radius: 5px;
-      padding: 5px 10px;
-      margin: 2px 0;
+      color: var(--text-secondary);
+      transition: all 0.3s ease;
     }
-    /* Input area styling */
-    .input-area {
+
+    .logs-container.collapsed {
+      max-height: 0;
+      padding: 0;
+      overflow: hidden;
+    }
+
+    .log-entry {
+      margin-bottom: 6px;
       display: flex;
       gap: 10px;
     }
-    .input-area textarea {
+
+    .log-timestamp {
+      color: var(--text-secondary);
+      flex-shrink: 0;
+    }
+
+    .log-message {
       flex: 1;
-      padding: 10px;
-      border-radius: 5px;
-      border: none;
+    }
+
+    .log-error {
+      color: var(--error-color);
+    }
+
+    .log-warning {
+      color: var(--warning-color);
+    }
+
+    .input-container {
+      padding: 20px;
+      border-top: 1px solid var(--border-color);
+      background-color: var(--user-bg);
+      position: relative;
+    }
+
+    .input-wrapper {
+      max-width: 900px;
+      margin: 0 auto;
+      position: relative;
+    }
+
+    .input-actions {
+      position: absolute;
+      right: 12px;
+      bottom: 12px;
+      display: flex;
+      gap: 8px;
+      z-index: 2;
+    }
+
+    textarea {
+      width: 100%;
+      min-height: 60px;
+      max-height: 200px;
+      padding: 12px 50px 12px 16px;
+      border-radius: 8px;
+      border: 1px solid var(--border-color);
+      background-color: var(--chat-bg);
+      color: var(--text-color);
       resize: none;
       font-size: 1rem;
+      line-height: 1.5;
     }
-    .input-area button {
-      padding: 10px 20px;
-      border-radius: 5px;
-      border: none;
-      background-color: #007bff;
-      color: #fff;
-      cursor: pointer;
+
+    textarea:focus {
+      outline: none;
+      border-color: var(--primary);
+      box-shadow: 0 0 0 1px var(--primary);
     }
-    .input-area button:hover {
-      background-color: #0056b3;
+
+    .typing-indicator {
+      display: flex;
+      gap: 4px;
+      padding: 0 20px 10px;
+      color: var(--text-secondary);
+      font-size: 0.9rem;
     }
 
-    .alert {
-      padding: 10px;
-      margin-bottom: 10px;
-      border-radius: 5px;
+    .typing-dots {
+      display: flex;
+      gap: 2px;
+      align-items: flex-end;
+    }
+
+    .typing-dot {
+      width: 6px;
+      height: 6px;
+      background-color: var(--text-secondary);
+      border-radius: 50%;
+      animation: typingAnimation 1.4s infinite ease-in-out;
+    }
+
+    .typing-dot:nth-child(1) {
+      animation-delay: 0s;
+    }
+
+    .typing-dot:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    .typing-dot:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+
+    @keyframes typingAnimation {
+      0%, 60%, 100% { transform: translateY(0); }
+      30% { transform: translateY(-4px); }
+    }
+
+    footer {
+      background-color: var(--user-bg);
+      padding: 12px 20px;
+      border-top: 1px solid var(--border-color);
+      font-size: 0.8rem;
+      color: var(--text-secondary);
       text-align: center;
+    }
+
+    .log-toggle {
       position: absolute;
-      position-area: top center;
-      top: 30px;
-      align-items: center;
+      right: 20px;
+      top: -12px;
+      background: var(--log-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 12px;
+      padding: 2px 8px;
+      font-size: 0.7rem;
+      cursor: pointer;
+      z-index: 1;
     }
 
-    .alert-error {
-      background-color: #D84040;
-      color: #ffffff;
+    .alert {
+      position: fixed;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      padding: 12px 20px;
+      border-radius: 8px;
+      background-color: var(--error-color);
+      color: white;
+      z-index: 1000;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      animation: slideIn 0.3s ease-out;
     }
 
     .alert-success {
-      background-color: #D2DE32;
-      color: #ffffff;
+      background-color: var(--primary);
     }
 
     .alert-warning {
-      background-color: #FFC700;
-      color: #ffffff;
+      background-color: var(--warning-color);
     }
 
-    
+    @keyframes slideIn {
+      from { top: -50px; opacity: 0; }
+      to { top: 20px; opacity: 1; }
+    }
+
+    .markdown-content pre {
+      background-color: rgba(0,0,0,0.2);
+      padding: 12px;
+      border-radius: 6px;
+      overflow-x: auto;
+      margin: 12px 0;
+    }
+
+    .markdown-content code {
+      font-family: 'Courier New', Courier, monospace;
+      font-size: 0.9rem;
+    }
   </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 -->
+  <nav>
+    <div class="nav-title">Agent Chat</div>
+    <div class="nav-actions">
+      <button class="btn">
+        <i class="fas fa-plus"></i> New Chat
+      </button>
+    </div>
+  </nav>
+
+  <main>
     <div class="chat-container" id="chat">
-      <!-- Conversation messages will appear here -->
+      <!-- Messages will be inserted here -->
+    </div>
+
+    <div class="typing-indicator" id="typing-indicator" style="display: none;">
+      <div class="typing-dots">
+        <div class="typing-dot"></div>
+        <div class="typing-dot"></div>
+        <div class="typing-dot"></div>
+      </div>
+      <span>Agent is typing...</span>
     </div>
-    <!-- Logs container -->
-    <div class="logs-container" id="logs">
-      <!-- Log messages will appear here -->
+
+    <div class="input-container">
+      <div class="input-wrapper">
+        <textarea id="prompt" rows="1" placeholder="Message Agent..." autofocus></textarea>
+        <div class="input-actions">
+          <button class="btn-icon" id="upload-btn" title="Upload Database">
+            <i class="fas fa-database"></i>
+          </button>
+          <button class="btn-icon" id="send-btn" title="Send message">
+            <i class="fas fa-paper-plane"></i>
+          </button>
+        </div>
+      </div>
     </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 class="logs-container" id="logs-container">
+      <div class="log-toggle" id="log-toggle">Hide Logs</div>
+      <div id="logs"></div>
     </div>
-  </div>
-  
+  </main>
+
+  <footer>
+    <div>Agent Chat v1.0 · © 2023</div>
+  </footer>
+
+  <div id="flash-message" class="alert" style="display: none;"></div>
+
   <script>
     const socket = io();
     const chatContainer = document.getElementById("chat");
     const logsContainer = document.getElementById("logs");
-    const sendButton = document.getElementById("send");
+    const sendButton = document.getElementById("send-btn");
+    const uploadButton = document.getElementById("upload-btn");
     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
+    const typingIndicator = document.getElementById('typing-indicator');
+    const logToggle = document.getElementById('log-toggle');
+    const logsContainerElement = document.getElementById('logs-container');
+
+    // Auto-resize textarea
+    promptTextarea.addEventListener('input', function() {
+      this.style.height = 'auto';
+      this.style.height = (this.scrollHeight) + 'px';
+    });
+
+    // Handle Enter key (Shift+Enter for new line)
+    promptTextarea.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+      }
+    });
+
+    // Send button click handler
+    sendButton.addEventListener('click', sendMessage);
+
+    // Upload button click handler
+    uploadButton.addEventListener('click', () => {
+      window.location.href = '/upload';
+    });
+
+    // Log toggle handler
+    logToggle.addEventListener('click', () => {
+      logsContainerElement.classList.toggle('collapsed');
+      logToggle.textContent = logsContainerElement.classList.contains('collapsed') ? 'Show Logs' : 'Hide Logs';
+    });
+
+    function sendMessage() {
+      const prompt = promptTextarea.value.trim();
+      if (!prompt) return;
+      
+      addMessage("user", prompt);
+      promptTextarea.value = '';
+      promptTextarea.style.height = 'auto';
+      typingIndicator.style.display = 'flex';
+      
+      fetch("/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ prompt: prompt })
+      });
+    }
+
     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);
+      messageDiv.classList.add("message", `message-${sender}`);
+      
+      const avatarDiv = document.createElement("div");
+      avatarDiv.classList.add("avatar", `avatar-${sender}`);
+      avatarDiv.innerHTML = sender === 'user' ? 
+        '<i class="fas fa-user"></i>' : 
+        '<i class="fas fa-robot"></i>';
+      
+      const contentDiv = document.createElement("div");
+      contentDiv.classList.add("message-content");
+      contentDiv.innerHTML = `<div class="markdown-content">${text}</div>`;
+      
+      messageDiv.appendChild(avatarDiv);
+      messageDiv.appendChild(contentDiv);
       chatContainer.appendChild(messageDiv);
       chatContainer.scrollTop = chatContainer.scrollHeight;
     }
 
-    // Function to add a log message bubble
-    function addLogMessage(text) {
+    function addLogMessage(text, type = 'info') {
+      const now = new Date();
+      const timestamp = now.toLocaleTimeString();
+      
       const logDiv = document.createElement("div");
-      logDiv.classList.add("bubble", "log");
-      logDiv.textContent = text;
+      logDiv.classList.add("log-entry");
+      
+      const timeDiv = document.createElement("div");
+      timeDiv.classList.add("log-timestamp");
+      timeDiv.textContent = timestamp;
+      
+      const messageDiv = document.createElement("div");
+      messageDiv.classList.add("log-message");
+      if (type !== 'info') messageDiv.classList.add(`log-${type}`);
+      messageDiv.textContent = text;
+      
+      logDiv.appendChild(timeDiv);
+      logDiv.appendChild(messageDiv);
       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 })
-      });
-    });
+    function showFlashMessage(message, type = 'error') {
+      flashMessage.textContent = message;
+      flashMessage.className = `alert alert-${type}`;
+      flashMessage.style.display = 'flex';
+      
+      setTimeout(() => {
+        flashMessage.style.display = 'none';
+      }, 3000);
+    }
 
-    // Handle streaming tokens for the agent's reply.
-    let agentMessageBubble = null;
+    // Socket.io handlers
+    let agentMessageDiv = 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);
+      if (!agentMessageDiv) {
+        agentMessageDiv = document.createElement("div");
+        agentMessageDiv.classList.add("message", "message-agent");
+        
+        const avatarDiv = document.createElement("div");
+        avatarDiv.classList.add("avatar", "avatar-agent");
+        avatarDiv.innerHTML = '<i class="fas fa-robot"></i>';
+        
+        const contentDiv = document.createElement("div");
+        contentDiv.classList.add("message-content");
+        contentDiv.id = "agent-message-content";
+        
+        agentMessageDiv.appendChild(avatarDiv);
+        agentMessageDiv.appendChild(contentDiv);
+        chatContainer.appendChild(agentMessageDiv);
       }
-      // Append incoming data to the agent's bubble.
-      agentMessageBubble.textContent += data.message;
+      
+      const contentDiv = document.getElementById("agent-message-content");
+      contentDiv.innerHTML = `<div class="markdown-content">${data.message}</div>`;
       chatContainer.scrollTop = chatContainer.scrollHeight;
     });
 
-    // When the final answer is sent, finish the bubble.
     socket.on("final", (data) => {
-      if (!agentMessageBubble) {
-        addMessage("agent", data.message);
+      typingIndicator.style.display = 'none';
+      
+      if (agentMessageDiv) {
+        const contentDiv = document.getElementById("agent-message-content");
+        contentDiv.innerHTML = `<div class="markdown-content">${data.message}</div>`;
+        agentMessageDiv = null;
       } else {
-        agentMessageBubble.textContent = data.message;
-        agentMessageBubble = null;
+        addMessage("agent", data.message);
       }
     });
 
-    // Append incoming log messages to the logs container.
     socket.on("log", (data) => {
-      addLogMessage(data.message);
+      addLogMessage(data.message, data.type || 'info');
+    });
+
+    socket.on("error", (data) => {
+      showFlashMessage(data.message, 'error');
+      typingIndicator.style.display = 'none';
     });
+
+    // Handle flash messages from server
+    if (flashMessage) {
+      setTimeout(() => {
+        flashMessage.style.display = 'none';
+      }, 3000);
+    }
   </script>
 </body>
 </html>