scratch_chat_assisstance_2

Running

App Files Files Community

WebashalarForML commited on Oct 3

Commit

4d9fce0

verified ·

1 Parent(s): 2d33bc7

Update static/frontend.html

Browse files

Files changed (1) hide show

static/frontend.html +195 -111

static/frontend.html CHANGED Viewed

@@ -1,148 +1,232 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Patient Assistant Chat</title>
     <style>
-        /* your existing styles here */
-        :root { --bg:#0f172a; --panel:#111827; --soft:#1f2937; --text:#e5e7eb; --muted:#9ca3af; --accent:#22c55e; }
-        * { box-sizing: border-box; }
-        body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); }
-        .app { max-width: 900px; margin: 0 auto; padding: 20px; }
-        .card { background: var(--panel); border: 1px solid #242b3a; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
-        .header { padding: 16px 20px; border-bottom: 1px solid #242b3a; display: flex; align-items: center; gap: 12px; }
-        .badge { background: #0b3b26; color: #8bf2c0; padding: 6px 10px; border-radius: 999px; font-weight: 600; font-size: 12px; letter-spacing: .3px; }
-        .row { display:flex; gap:12px; align-items:center; flex-wrap: wrap; }
-        label { font-size: 13px; color: var(--muted); }
-        input[type="text"] { background: var(--soft); color: var(--text); border: 1px solid #2b3346; padding: 10px 12px; border-radius: 10px; min-width: 200px; outline: none; }
-        input[type="text"]:focus { border-color: #374462; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
-        button { background: var(--accent); color: #052e19; border: none; padding: 10px 14px; border-radius: 10px; font-weight: 700; cursor: pointer; }
-        button.secondary { background: #334155; color: #dbeafe; }
-        button:disabled { opacity: .6; cursor: not-allowed; }
-        .chat { height: 420px; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: #0b1220; }
-        .msg { max-width: 80%; padding: 10px 12px; border-radius: 12px; border: 1px solid #1f2937; white-space: pre-wrap; word-break: break-word; }
-        .user   { align-self: flex-end; background: #0b3b26; border-color: #14532d; }
-        .assist { align-self: flex-start; background: #111827; border-color: #1f2937; }
-        .composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px; border-top: 1px solid #242b3a; background: #0b1220; }
-        .composer input { width: 100%; }
-        .state { padding: 12px 16px; border-top: 1px dashed #243044; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; color: #cbd5e1; background: #0b1220; }
-        details > summary { cursor: pointer; }
-        .small { font-size: 12px; color: var(--muted); }
     </style>
 </head>
 <body>
-    <div class="app">
-        <div class="card">
-            <div class="header">
-                <span class="badge">Patient Assistant</span>
-            </div>
-            <div id="chat" class="chat"></div>
-            <div class="composer">
-                <input id="message" type="text" placeholder="Type your message…" />
-                <button id="send">Send</button>
             </div>
-            <div class="state">
-                <details>
-                    <summary>Agent State (from backend)</summary>
-                    <pre id="stateView">{}</pre>
-                </details>
-            </div>
         </div>
-        <p class="small" style="margin-top:10px; opacity:.8">
-            This version allows the agent to ask for your Patient ID (PID) during the conversation.
-        </p>
     </div>
     <script>
-        const NODE_CHAT_ENDPOINT = "/chat";
-        const chatEl = document.getElementById("chat");
-        const msgEl = document.getElementById("message");
-        const sendBtn = document.getElementById("send");
-        const stateView = document.getElementById("stateView");
-        let chatHistory = JSON.parse(localStorage.getItem("chatHistory")) || [];
-        let patientState = JSON.parse(localStorage.getItem("patientState")) || {};
-        sendBtn.addEventListener("click", onSend);
-        msgEl.addEventListener("keydown", (e) => {
-            if (e.key === "Enter") onSend();
-        });
-        function saveState() {
-            localStorage.setItem("chatHistory", JSON.stringify(chatHistory));
-            localStorage.setItem("patientState", JSON.stringify(patientState));
         }
-        function renderChat() {
-            chatEl.innerHTML = "";
-            for (const m of chatHistory) {
-                const div = document.createElement("div");
-                div.className = `msg ${m.role === "user" ? "user" : "assist"}`;
-                div.textContent = `${m.role === "user" ? "You" : "Assistant"}: ${m.content}`;
-                chatEl.appendChild(div);
             }
-            chatEl.scrollTop = chatEl.scrollHeight;
         }
-        async function onSend() {
-            const message = (msgEl.value || "").trim();
-            if (!message) return;
-            // Clear the input and disable the button while we wait for the response
-            msgEl.value = "";
-            sendBtn.disabled = true;
-            // Add the user's message to the chat history
-            chatHistory.push({ role: "user", content: message });
-            renderChat();
-            saveState();
             try {
-                // Send the chat history and patient state to the backend
-                const res = await fetch(NODE_CHAT_ENDPOINT, {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ chat_history: chatHistory, patient_state: patientState })
                 });
-                if (!res.ok) throw new Error(`HTTP ${res.status}`);
-                const data = await res.json();
-                const reply = data.assistant_reply || "(no reply)";
-                patientState = data.updated_state || patientState;
-                // Add the assistant's reply to the chat history
-                chatHistory.push({ role: "assistant", content: reply });
-                renderChat();
-                saveState();
-                // Display the raw agent state for debugging
-                stateView.textContent = JSON.stringify(patientState, null, 2);
-            } catch (err) {
-                // Handle any errors and display them in the chat
-                chatHistory.push({ role: "assistant", content: `Error: ${err.message}` });
-                renderChat();
-                saveState();
-            } finally {
-                sendBtn.disabled = false;
             }
         }
-        // Initial greeting
-        if (chatHistory.length === 0) {
-            chatHistory.push({ role: "assistant", content: "Hello! I am your patient assistant. Please tell me your Patient ID to get started." });
-            saveState();
         }
-        renderChat();
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Code Assistant Agent</title>
     <style>
+        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f7f9; }
+        .container { max-width: 800px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
+        h1 { color: #333; text-align: center; margin-bottom: 20px; }
+        #chat-window { height: 400px; overflow-y: scroll; border: 1px solid #ddd; padding: 10px; border-radius: 4px; margin-bottom: 20px; background-color: #e9eff4; }
+        .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 15px; max-width: 85%; }
+        .user { background-color: #dcf8c6; margin-left: auto; text-align: right; }
+        .assistant { background-color: #fff; border: 1px solid #ccc; text-align: left; }
+        #input-container { display: flex; gap: 10px; margin-bottom: 20px; }
+        #user-input { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
+        #send-button { padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
+        #send-button:hover { background-color: #0056b3; }
+        #state-info { padding: 10px; background-color: #eee; border-radius: 4px; font-size: 0.9em; margin-bottom: 20px; }
+        pre { background-color: #272822; color: #f8f8f2; padding: 10px; border-radius: 4px; overflow-x: auto; }
+        .tag-area { margin-top: 5px; padding: 5px; border-top: 1px dashed #ccc; }
+        .tag-chip { display: inline-block; background-color: #007bff; color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.8em; margin-right: 5px; cursor: pointer; }
+        .bookmark-btn { background-color: #28a745; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; margin-left: 10px; }
+        .bookmark-btn:hover { background-color: #1e7e34; }
+        .tagged-replies-list { list-style: none; padding: 0; }
+        .tagged-replies-list li { border-bottom: 1px solid #eee; padding: 10px 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>
+        // 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
+            appendMessage({ role: 'assistant', content: "Hello! I'm your Code Assistant. What programming language are you working in today?" });
+        });
+        // --- Core Chat Logic ---
+        async function sendMessage() {
+            const inputElement = document.getElementById('user-input');
+            const userMessage = inputElement.value.trim();
+            if (!userMessage) return;
+            appendMessage({ role: 'user', content: userMessage });
+            inputElement.value = '';
+            try {
+                const response = await fetch(apiUrl, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        chat_history: [
+                            { role: 'user', content: userMessage } // Only need the latest message for this setup
+                        ],
+                        assistant_state: assistantState
+                    })
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                // Update state and display reply
+                assistantState = data.updated_state;
+                appendMessage({
+                    role: 'assistant',
+                    content: data.assistant_reply,
+                    suggestedTags: data.suggested_tags
+                });
+                updateStateInfo();
+            } catch (error) {
+                console.error('Chat failed:', error);
+                appendMessage({ role: 'assistant', content: `Error: Could not connect to the assistant. (${error.message})` });
+            }
         }
+        // --- Display and State Management ---
+        function appendMessage(msg) {
+            const chatWindow = document.getElementById('chat-window');
+            const msgDiv = document.createElement('div');
+            msgDiv.className = `message ${msg.role}`;
+            let content = msg.content;
+            // Basic Markdown for code blocks in the frontend
+            content = content.replace(/```(\w+)?\n([\s\S]*?)\n```/g, (match, lang, code) => {
+                const language = lang || 'code';
+                return `<pre><code class="language-${language}">${code.trim()}</code></pre>`;
+            });
+            msgDiv.innerHTML = content;
+            // Add Tagging UI for assistant replies
+            if (msg.role === 'assistant') {
+                const tagArea = document.createElement('div');
+                tagArea.className = 'tag-area';
+                tagArea.innerHTML = 'Tags: ';
+                const tagInput = document.createElement('input');
+                tagInput.type = 'text';
+                tagInput.placeholder = 'Add your tags (comma-separated)';
+                tagInput.id = 'tag-input-' + Date.now();
+                tagInput.style.marginRight = '10px';
+                tagInput.value = (msg.suggestedTags || []).join(', '); // Pre-populate with suggested tags
+                const bookmarkBtn = document.createElement('button');
+                bookmarkBtn.className = 'bookmark-btn';
+                bookmarkBtn.textContent = 'Save/Bookmark';
+                bookmarkBtn.onclick = () => saveReply(msg.content, tagInput.value, bookmarkBtn);
+                tagArea.appendChild(tagInput);
+                tagArea.appendChild(bookmarkBtn);
+                msgDiv.appendChild(tagArea);
             }
+            chatWindow.appendChild(msgDiv);
+            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);
+            if (tags.length === 0) {
+                alert("Please enter at least one tag.");
+                return;
+            }
             try {
+                const response = await fetch(tagUrl, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        reply: replyContent,
+                        tags: tags,
+                        assistant_state: assistantState
+                    })
                 });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                assistantState = data.updated_state; // Update state with the new tagged reply
+                alert(data.message);
+                buttonElement.textContent = 'Saved!';
+                buttonElement.disabled = true;
+                updateStateInfo();
+            } catch (error) {
+                console.error('Tagging failed:', error);
+                alert(`Failed to save reply: ${error.message}`);
             }
         }
+        function filterReplies() {
+            const query = document.getElementById('tag-search').value.toLowerCase();
+            const displayList = document.getElementById('tagged-replies-display');
+            displayList.innerHTML = '';
+            const filtered = assistantState.taggedReplies.filter(item => {
+                if (!query) return true;
+                return item.tags.some(tag => tag.toLowerCase().includes(query));
+            });
+            if (filtered.length === 0 && query) {
+                displayList.innerHTML = '<li>No bookmarked replies match your search tag.</li>';
+                return;
+            }
+            filtered.forEach(item => {
+                const li = document.createElement('li');
+                let tagChips = item.tags.map(tag => `<span class="tag-chip">${tag}</span>`).join('');
+                // Show a truncated reply and tags
+                li.innerHTML = `
+                    <p style="font-weight: bold;">${item.reply.substring(0, 150)}...</p>
+                    <p style="font-size: 0.9em;">${tagChips}</p>
+                `;
+                displayList.appendChild(li);
+            });
         }
     </script>
 </body>
+</html>