From 4de3617b9778e7634fd9bb7264c0d0d514a2dad1 Mon Sep 17 00:00:00 2001
From: Jason Cox <jason@jasonacox.com>
Date: Sat, 20 Jul 2024 15:35:22 -0700
Subject: [PATCH] Fix popup logic

---
 chatbot/templates/index.html | 37 ++++++++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/chatbot/templates/index.html b/chatbot/templates/index.html
index aa4782a..34c9952 100644
--- a/chatbot/templates/index.html
+++ b/chatbot/templates/index.html
@@ -264,9 +264,9 @@
         <div class="popup-box" style="width: 90%;">
             <h2 class="popup-title">System Settings</h2>
             <div class="popup-content">
-                <p class="popup-content-text" id="popup-content-text">The TinyLLM Chatbot can be customized by changing the prompts used to generate responses.</p> 
+                <p class="popup-content-text">The TinyLLM Chatbot can be customized by changing the prompts used to generate responses.</p> 
                 <form id="settingsForm">
-                    <div class="popup-table-container" id="conversation">
+                    <div class="popup-table-container">
                         <table>
                             <thead>
                                 <tr>
@@ -289,6 +289,25 @@ <h2 class="popup-title">System Settings</h2>
             </div>
         </div>
     </div>
+    <div class="popup-overlay" id="debugOverlay">
+        <div class="popup-box" style="width: 90%;">
+            <h2 class="popup-title">Session Conversation Thread</h2>
+            <div class="popup-content">
+                <form id="settingsForm">
+                    <div class="popup-table-container" id="conversation">
+                        JSON session data will be displayed here
+                    </div>
+                    <div class="popup-divider"></div>
+                    <div class="popup-button-container">
+                        <div id="popup-buttons">
+                            <button type="button" class="dialogue-button" onclick="closeDialogue()">Close</button>
+                            <button type="button" class="dialogue-button" onclick="convCopy()">Copy</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
     <script>
         function openDialogue() {
             document.getElementById("dialogueOverlay").style.display = "flex";
@@ -326,6 +345,10 @@ <h2 class="popup-title">System Settings</h2>
     
         function closeDialogue() {
             document.getElementById("dialogueOverlay").style.display = "none";
+            document.getElementById("debugOverlay").style.display = "none";
+            // Set focus back to the text input field
+            var textInput = document.getElementById("messageInput");
+            textInput.focus();
         }
 
         function resetSettings() {
@@ -567,13 +590,7 @@ <h2 class="popup-title">System Settings</h2>
             }
 
             if (data.voice === "conversation") {
-                document.getElementById("dialogueOverlay").style.display = "flex";
-                document.querySelector('.popup-title').textContent = 'Conversation Thread';
-                document.getElementById('popup-content-text').textContent = 'The conversation thread shows the interaction between the user and the chatbot.';
-                document.getElementById('popup-buttons').innerHTML = `
-                    <button type="button" class="dialogue-button" onclick="closeDialogue()">Close</button>
-                    <button type="button" class="dialogue-button" onclick="convCopy()">Copy</button>
-                `;
+                document.getElementById("debugOverlay").style.display = "flex";
                 // First clear the form from any previous settings
                 document.getElementById("conversation").innerHTML = `
                     <pre style='white-space: pre-wrap'>${JSON.stringify(data.update, null, 2)}</pre>
@@ -586,7 +603,7 @@ <h2 class="popup-title">System Settings</h2>
 
         // Function to copy conversation to clipboard
         function convCopy(button) {
-            const conversation = document.querySelector('.popup-table-container');
+            const conversation = document.getElementById('conversation');
             const conversationText = conversation.textContent || conversation.innerText;
 
             if (navigator.clipboard) {