Refactor code to update message content and labels in FlaskApp and dashboard templates

app/app.py

@@ -1,6 +1,6 @@
 from flask import Flask, render_template, request, redirect, url_for, flash, session, jsonify
-# from .agent import GroqAgent  # Assuming LLM agents are defined in GroqAgent class
-from agent import GroqAgent 
+from .agent import GroqAgent  
+# from agent import GroqAgent 
 
 class FlaskApp:
     def __init__(self, agents):

app/templates/admin_dashboard.html

@@ -8,47 +8,39 @@
 
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script>
+        let agent_order = ["0", "1", "2"];  // Default agent order
+
+        // Function to fetch pending LLM messages
         function fetchPendingMessages() {
-            // Fetch pending messages from the server
             $.getJSON('/get_pending_messages', function(data) {
-                console.log("Fetched pending messages:", data);  // Log the fetched data for debugging
-
+                let pendingMessageList = '';
                 if (data.length === 0) {
-                    console.log("No pending messages to display.");
-                    $('#pending-message-list').html("<li>No pending messages</li>");  // Handle empty state
-                    return;
+                    pendingMessageList = "<li>No pending messages</li>";
+                } else {
+                    data.forEach(function(message, index) {
+                        pendingMessageList += `
+                            <li class="pending-message">
+                                <p>${message.content} (Author: ${message.author})</p>
+                                <div class="button-container">
+                                    <form action="/admin_dashboard" method="POST" style="display: inline;">
+                                        <input type="hidden" name="message_id" value="${index}">
+                                        <button type="submit" name="action" value="approve" class="button approve">Approve</button>
+                                    </form>
+                                    <form action="/admin_dashboard" method="POST" style="display: inline;">
+                                        <input type="hidden" name="message_id" value="${index}">
+                                        <button type="submit" name="action" value="delete" class="button delete">Delete</button>
+                                    </form>
+                                </div>
+                            </li>`;
+                    });
                 }
-
-                let pendingMessageList = '';  // Clear out old list
-                data.forEach(function(message, index) {
-                    // Dynamically build the list of pending messages
-                    pendingMessageList += `
-                        <li class="pending-message">
-                            <p>${message.content} (Author: ${message.author})</p>
-                            <div class="button-container">
-                                <form action="/admin_dashboard" method="POST" style="display: inline;">
-                                    <input type="hidden" name="message_id" value="${index}">
-                                    <button type="submit" name="action" value="approve" class="button approve">Approve</button>
-                                </form>
-                                <form action="/admin_dashboard" method="POST" style="display: inline;">
-                                    <input type="hidden" name="message_id" value="${index}">
-                                    <button type="submit" name="action" value="delete" class="button delete">Delete</button>
-                                </form>
-                            </div>
-                        </li>`;
-                });
-                
-                // Insert the generated list into the DOM
                 $('#pending-message-list').html(pendingMessageList);
-            })
-            .fail(function() {
-                console.error("Error fetching pending messages from server.");
-                $('#pending-message-list').html("<li>Error fetching pending messages.</li>");
             });
         }
-
-        // Function to fetch message history and apply dynamic agent labels
-        function fetchMessageHistory() {
+        
+        // Function to fetch both message history and pending LLM messages
+        function fetchMessageHistoryAndPendingMessages() {
+            // Fetch message history
             $.getJSON('/get_message_history', function(data) {
                 let messageHistory = '';
                 data.forEach(function(message) {
@@ -70,9 +62,11 @@
 
                 $('#message-history').html(messageHistory);
             });
+
+            // Fetch pending LLM messages for approval
+            fetchPendingMessages(); // Fetch pending messages as part of message history update
         }
 
-        // Function to fetch agent order immediately
         // Function to fetch agent order immediately
         function fetchAgentOrder() {
             $.getJSON('/get_agent_order', function(agentData) {
@@ -81,15 +75,22 @@
             });
         }
 
+        // Add event listener for refresh button
+        $(document).ready(function() {
+            $('#refresh-pending-messages-btn').on('click', function() {
+                fetchPendingMessages();  // Trigger fetching pending messages on button click
+            });
+        });
+
         // Poll the server every 1 second to update the message history and pending messages
         // Fetch the agent order and then the message history every 2 seconds
         setInterval(function() {
             fetchAgentOrder();      // Fetch the dynamic agent order
-            fetchMessageHistory();  // Fetch and display the message history with correct agent labels
-            fetchPendingMessages(); // Fetch and display the pending messages for approval
+            fetchMessageHistoryAndPendingMessages();  // Fetch both message history and pending messages
         }, 1000);
     </script>
 </head>
+
 <body>
     <div class="container admin-dashboard-container">
         <h2>Send a Message to the User</h2>
@@ -103,25 +104,13 @@
 
         <h2>Message History</h2>
         <ul class="message-history" id="message-history">
-            {% for message in messages %}
-                <li><strong>
-                    {% if message.author == 'Admin' %}
-                        {{ message.author }} - Agent {{ agent_order[0] }}:
-                    {% elif message.author == 'llm2' %}
-                        {{ message.author }} - Agent {{ agent_order[1] }}:
-                    {% elif message.author == 'llm3' %}
-                        {{ message.author }} - Agent{{ agent_order[2] }}:
-                    {% elif message.author == 'User' %}
-                        {{ message.author }}
-                    {% else %}
-                        {{ message.author }}:
-                    {% endif %}
-                    </strong> {{ message.content }}
-                </li>
-            {% endfor %}
+            <!-- Message history will be displayed here -->
         </ul>
 
         <h2>Pending LLM Messages for Approval</h2>
+        <form method="POST" action="/admin_dashboard">
+            <button type="submit" class="button">Refresh LLM Messages</button>
+        </form>
         <ul class="pending-message-list">
             {% for message in pending_messages %}
                 <li class="pending-message">

app/templates/dashboard.html

@@ -8,7 +8,7 @@
 
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script>
-        let agent_order = ["Admin", "llm2", "llm3"];  // Default agent order
+        let agent_order = ["0", "1", "2"];  // Default agent order
 
         // Function to fetch and update the message history and agent order
         function fetchMessageHistory() {
@@ -52,12 +52,16 @@
 
             // Submit the message via AJAX
             $.post('/dashboard', { message: message }, function() {
+                console.log('User message submitted');
+                
                 // After submitting, immediately fetch the latest agent order
                 fetchAgentOrder();
 
                 // Also fetch the latest message history immediately
                 fetchMessageHistory();
-
+                
+                // This will notify the admin side to refresh pending messages
+                fetchPendingMessages();  
                 // After submitting, you can trigger an immediate refresh of pending messages
                 // by notifying the admin dashboard to refresh its pending messages section.
                 // Notify admin side (no need to fetch pending messages on the user side)
@@ -88,22 +92,7 @@
 
         <h1>Berichtgeschiedenis</h1>
         <ul id="message-list">
-            {% for message in messages %}
-                <li><strong>
-                    {% if message.author == 'Admin' %}
-                        Agent {{ agent_order[0] }}:
-                    {% elif message.author == 'llm2' %}
-                        Agent {{ agent_order[1] }}:
-                    {% elif message.author == 'llm3' %}
-                        Agent{{ agent_order[2] }}:
-                    {% elif message.author == 'User' %}
-                        Jij:
-                    {% else %}
-                        {{ message.author }}:
-                    {% endif %}
-                    </strong> {{ message.content }}
-                </li>
-            {% endfor %}
+            <!-- Message history will be dynamically updated here -->
         </ul>
     </div>
 </body>