scratch_chat_assisstance_2

Running

App Files Files Community

WebashalarForML commited on Oct 6

Commit

f389b10

verified ·

1 Parent(s): 93c646d

Update static/frontend.html

Browse files

Files changed (1) hide show

static/frontend.html +72 -71

static/frontend.html CHANGED Viewed

@@ -6,15 +6,10 @@
     <title>Code Assistant Agent</title>
     <style>
     body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background-color: #f0f2f5; color: #333; }
-    .container { max-width: 1000px; margin: auto; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); display: flex; gap: 20px; }
-    .main-content { flex: 2; min-width: 550px; }
-    .state-panel { flex: 1; background-color: #f8f8f8; padding: 15px; border-radius: 8px; border: 1px solid #e0e0e0; max-height: 700px; overflow-y: auto; }
     h1 { color: #1f7cff; text-align: center; margin-bottom: 25px; font-weight: 600; }
-    h2 { border-bottom: 2px solid #ddd; padding-bottom: 5px; margin-top: 30px; font-size: 1.2em; }
     #chat-window {
-        height: 350px;
         overflow-y: scroll;
         border: 1px solid #ddd;
         padding: 15px;
@@ -23,7 +18,11 @@
         background-color: #e9eff4;
     }
-    .message-row { display: flex; margin-bottom: 15px; }
     .message {
         padding: 10px 15px;
         border-radius: 18px;
@@ -33,16 +32,16 @@
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
     }
     .user {
-        background-color: #1f7cff;
         color: white;
-        margin-left: auto;
-        border-bottom-right-radius: 4px;
     }
     .assistant {
         background-color: #ffffff;
         border: 1px solid #c9d6de;
         color: #333;
-        margin-right: auto;
         border-bottom-left-radius: 4px;
         text-align: left;
     }
@@ -52,6 +51,8 @@
     #send-button { padding: 10px 20px; background-color: #1f7cff; color: white; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s; }
     #send-button:hover { background-color: #165bb0; }
     pre {
         background-color: #272822;
         color: #f8f8f2;
@@ -85,55 +86,53 @@
     .bookmark-btn { background-color: #28a745; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; font-size: 0.8em; }
     .bookmark-btn:hover { background-color: #1e7e34; }
-    #tagged-replies-display { list-style: none; padding: 0; }
-    #tagged-replies-display li { border: 1px solid #f0f0f0; background: #fafafa; padding: 15px; border-radius: 6px; margin-bottom: 10px; }
-    #tagged-replies-display li p { margin: 0 0 5px 0; }
-    #state-info pre { background-color: #fff; border: 1px solid #ddd; font-size: 0.8em; }
 </style>
 </head>
 <body>
     <div class="container">
-        <div class="main-content">
-            <h1>Code Assistant Agent 🤖</h1>
-            <div id="chat-window">
-                </div>
-            <div id="input-container">
-                <input type="text" id="user-input" placeholder="Ask about code, concepts, or bugs..." onkeypress="if(event.key === 'Enter') sendMessage()">
-                <button id="send-button" onclick="sendMessage()">Send</button>
             </div>
-            <h2>Bookmarked Replies (<span id="tagged-count">0</span>)</h2>
-            <input type="text" id="tag-search" placeholder="Search by Tag (e.g., Python, Debugging)" oninput="filterReplies()">
-            <ul id="tagged-replies-display" class="tagged-replies-list">
-                </ul>
-        </div>
-        <div class="state-panel">
-            <h2>Current Session State</h2>
-            <p>This is the full JSON object sent/received on every turn, ensuring context propagation.</p>
-            <div id="state-info">
-                <pre id="state-json-display">{}</pre>
-            </div>
         </div>
     </div>
     <script>
-        // CRUCIAL CHANGE: fullChatHistory is now part of the state for full context propagation.
         let assistantState = {
             conversationSummary: "",
             language: "Python",
-            taggedReplies: [],
-            fullChatHistory: [] // New, mandatory field for full context
         };
         const apiUrl = '/chat';
         const tagUrl = '/tag_reply';
         document.addEventListener('DOMContentLoaded', () => {
             updateStateInfo();
-            // Initial greeting
             appendMessage({ role: 'assistant', content: "Hello! I'm your Code Assistant. What programming language are you working in today?" });
         });
@@ -145,41 +144,49 @@
             if (!userMessage) return;
-            // 1. Add user message to local history (frontend side)
             const userMsgObj = { role: 'user', content: userMessage };
-            assistantState.fullChatHistory.push(userMsgObj);
-            appendMessage(userMsgObj);
             inputElement.value = '';
             try {
-                // 2. Send the ENTIRE assistantState (which includes the full history)
                 const response = await fetch(apiUrl, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ assistant_state: assistantState })
                 });
                 if (!response.ok) {
                     throw new Error(`HTTP error! status: ${response.status}`);
                 }
                 const data = await response.json();
-                // 3. Update local state with the new state from the server
                 assistantState = data.updated_state;
-                // 4. Extract and display assistant's reply
-                const assistantReplyObj = {
                     role: 'assistant',
                     content: data.assistant_reply,
                     suggestedTags: data.suggested_tags
-                };
-                // 5. Add assistant reply to local history (for next request)
-                assistantState.fullChatHistory.push({ role: 'assistant', content: data.assistant_reply });
-                appendMessage(assistantReplyObj);
                 updateStateInfo();
             } catch (error) {
@@ -192,10 +199,10 @@
         function appendMessage(msg) {
             const chatWindow = document.getElementById('chat-window');
             const msgDiv = document.createElement('div');
-            const rowDiv = document.createElement('div');
-            rowDiv.className = 'message-row';
             msgDiv.className = `message ${msg.role}`;
             let content = msg.content;
@@ -207,9 +214,12 @@
             });
             msgDiv.innerHTML = content;
-            // Add Tagging UI only for assistant replies
-            if (msg.role === 'assistant' && msg.content) {
                 const tagArea = document.createElement('div');
                 tagArea.className = 'tag-area';
                 tagArea.innerHTML = 'Tags: ';
@@ -230,25 +240,17 @@
                 tagArea.appendChild(bookmarkBtn);
                 msgDiv.appendChild(tagArea);
             }
-            rowDiv.appendChild(msgDiv);
-            chatWindow.appendChild(rowDiv);
             chatWindow.scrollTop = chatWindow.scrollHeight;
         }
         function updateStateInfo() {
             document.getElementById('tagged-count').textContent = assistantState.taggedReplies.length;
-            // Display the full JSON state for context verification
-            const stateDisplay = { ...assistantState };
-            // Truncate history for cleaner display
-            stateDisplay.fullChatHistory = stateDisplay.fullChatHistory.slice(-5); // Show last 5 turns
-            document.getElementById('state-json-display').textContent = JSON.stringify(stateDisplay, null, 2);
             filterReplies(); // Refresh the bookmark list
         }
-        // --- Bookmarking and Tagging Logic (Unchanged) ---
         async function saveReply(replyContent, tagsString, buttonElement) {
             const tags = tagsString.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0);
@@ -259,7 +261,6 @@
             }
             try {
-                // Send the current state along with the new reply to tag
                 const response = await fetch(tagUrl, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
@@ -317,4 +318,4 @@
         }
     </script>
 </body>
-</html>

     <title>Code Assistant Agent</title>
     <style>
     body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background-color: #f0f2f5; color: #333; }
+    .container { max-width: 850px; margin: auto; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); }
     h1 { color: #1f7cff; text-align: center; margin-bottom: 25px; font-weight: 600; }
     #chat-window {
+        height: 400px;
         overflow-y: scroll;
         border: 1px solid #ddd;
         padding: 15px;
         background-color: #e9eff4;
     }
+    /* NEW STRUCTURE FOR CHAT BUBBLES */
+    .message-row {
+        display: flex;
+        margin-bottom: 15px;
+    }
     .message {
         padding: 10px 15px;
         border-radius: 18px;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
     }
     .user {
+        background-color: #1f7cff; /* Bright blue for user */
         color: white;
+        margin-left: auto; /* Pushes to the right */
+        border-bottom-right-radius: 4px; /* Sharper corner on user's side */
     }
     .assistant {
         background-color: #ffffff;
         border: 1px solid #c9d6de;
         color: #333;
+        margin-right: auto; /* Keeps it on the left */
         border-bottom-left-radius: 4px;
         text-align: left;
     }
     #send-button { padding: 10px 20px; background-color: #1f7cff; color: white; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s; }
     #send-button:hover { background-color: #165bb0; }
+    #state-info { padding: 15px; background-color: #e6f0ff; border-left: 5px solid #1f7cff; border-radius: 4px; font-size: 0.9em; margin-bottom: 25px; display: flex; justify-content: space-between; align-items: center; }
     pre {
         background-color: #272822;
         color: #f8f8f2;
     .bookmark-btn { background-color: #28a745; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; font-size: 0.8em; }
     .bookmark-btn:hover { background-color: #1e7e34; }
+    /* Bookmarked Replies Styling */
+    h2 { border-bottom: 2px solid #ddd; padding-bottom: 5px; margin-top: 30px; }
+    #tag-search { padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%; margin-bottom: 15px; }
+    .tagged-replies-list { list-style: none; padding: 0; }
+    .tagged-replies-list li { border: 1px solid #f0f0f0; background: #fafafa; padding: 15px; border-radius: 6px; margin-bottom: 10px; }
+    .tagged-replies-list li p { margin: 0 0 5px 0; }
 </style>
 </head>
 <body>
     <div class="container">
+        <h1>Code Assistant Agent 🤖</h1>
+        <div id="state-info">
+            Current Language: <span id="current-language">Python</span>
+            | Total Bookmarked Replies: <span id="tagged-count">0</span>
+        </div>
+        <div id="chat-window">
             </div>
+        <div id="input-container">
+            <input type="text" id="user-input" placeholder="Ask about code, concepts, or bugs..." onkeypress="if(event.key === 'Enter') sendMessage()">
+            <button id="send-button" onclick="sendMessage()">Send</button>
         </div>
+        <h2>Bookmarked Replies</h2>
+        <input type="text" id="tag-search" placeholder="Search by Tag (e.g., Python, Debugging)" oninput="filterReplies()">
+        <ul id="tagged-replies-display" class="tagged-replies-list">
+            </ul>
     </div>
     <script>
+        // Store the full conversation history (Crucial for context)
+        let chatHistory = [];
+        // Initial state structure matching the backend
         let assistantState = {
             conversationSummary: "",
             language: "Python",
+            taggedReplies: []
         };
         const apiUrl = '/chat';
         const tagUrl = '/tag_reply';
         document.addEventListener('DOMContentLoaded', () => {
             updateStateInfo();
+            // Initial greeting (display only, not pushed to chatHistory)
             appendMessage({ role: 'assistant', content: "Hello! I'm your Code Assistant. What programming language are you working in today?" });
         });
             if (!userMessage) return;
+            // 1. Capture and add the user message to history
             const userMsgObj = { role: 'user', content: userMessage };
+            chatHistory.push(userMsgObj);
+            appendMessage(userMsgObj);
             inputElement.value = '';
             try {
                 const response = await fetch(apiUrl, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        // CRUCIAL FIX: Send the complete chatHistory array
+                        chat_history: chatHistory,
+                        assistant_state: assistantState
+                    })
                 });
                 if (!response.ok) {
+                    // Remove the user message from history if the request failed
+                    chatHistory.pop();
                     throw new Error(`HTTP error! status: ${response.status}`);
                 }
                 const data = await response.json();
+                // 2. Update state
                 assistantState = data.updated_state;
+                // 3. Capture and add the assistant reply to history
+                const assistantMsgObj = {
+                    role: 'assistant',
+                    content: data.assistant_reply
+                };
+                chatHistory.push(assistantMsgObj); // <-- Add assistant's reply to history
+                // 4. Display the reply
+                appendMessage({
                     role: 'assistant',
                     content: data.assistant_reply,
                     suggestedTags: data.suggested_tags
+                });
                 updateStateInfo();
             } catch (error) {
         function appendMessage(msg) {
             const chatWindow = document.getElementById('chat-window');
+            const messageRow = document.createElement('div');
+            messageRow.className = 'message-row';
             const msgDiv = document.createElement('div');
             msgDiv.className = `message ${msg.role}`;
             let content = msg.content;
             });
             msgDiv.innerHTML = content;
+            messageRow.appendChild(msgDiv);
+            chatWindow.appendChild(messageRow);
+            // Add Tagging UI for assistant replies
+            if (msg.role === 'assistant') {
                 const tagArea = document.createElement('div');
                 tagArea.className = 'tag-area';
                 tagArea.innerHTML = 'Tags: ';
                 tagArea.appendChild(bookmarkBtn);
                 msgDiv.appendChild(tagArea);
             }
             chatWindow.scrollTop = chatWindow.scrollHeight;
         }
         function updateStateInfo() {
+            document.getElementById('current-language').textContent = assistantState.language;
             document.getElementById('tagged-count').textContent = assistantState.taggedReplies.length;
             filterReplies(); // Refresh the bookmark list
         }
+        // --- Bookmarking and Tagging Logic ---
         async function saveReply(replyContent, tagsString, buttonElement) {
             const tags = tagsString.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0);
             }
             try {
                 const response = await fetch(tagUrl, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
         }
     </script>
 </body>
+</html>