| | <!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: '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; |
| | border-radius: 8px; |
| | margin-bottom: 20px; |
| | background-color: #e9eff4; |
| | } |
| | |
| | .message-row { display: flex; margin-bottom: 15px; } |
| | .message { |
| | padding: 10px 15px; |
| | border-radius: 18px; |
| | max-width: 75%; |
| | position: relative; |
| | word-wrap: break-word; |
| | 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; |
| | } |
| | |
| | #input-container { display: flex; gap: 10px; margin-bottom: 20px; } |
| | #user-input { flex-grow: 1; padding: 12px; border: 1px solid #ccc; border-radius: 6px; } |
| | #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; |
| | padding: 10px; |
| | border-radius: 4px; |
| | overflow-x: auto; |
| | margin-top: 10px; |
| | font-family: 'Consolas', 'Monaco', monospace; |
| | font-size: 0.9em; |
| | } |
| | |
| | #controls { display: flex; gap: 15px; align-items: center; } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="container"> |
| | <h1>Code Assistant Agent 🤖</h1> |
| |
|
| | <div id="state-info"> |
| | <div id="controls"> |
| | Language: |
| | <select id="current-language" onchange="updateLanguage()"> |
| | <option value="Python">Python</option> |
| | <option value="JavaScript">JavaScript</option> |
| | <option value="Java">Java</option> |
| | <option value="C++">C++</option> |
| | <option value="C#">C#</option> |
| | <option value="Go">Go</option> |
| | <option value="Ruby">Ruby</option> |
| | <option value="PHP">PHP</option> |
| | <option value="TypeScript">TypeScript</option> |
| | <option value="Swift">Swift</option> |
| | </select> |
| | |
| | Mode: |
| | <select id="current-mode" onchange="updateMode()"> |
| | <option value="teacher">Teacher</option> |
| | <option value="student">Student</option> |
| | </select> |
| | </div> |
| | </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> |
| | </div> |
| |
|
| | <script> |
| | let chatHistory = []; |
| | let assistantState = { |
| | conversationSummary: "", |
| | language: "Python", |
| | mode: "teacher" |
| | }; |
| | const apiUrl = '/chat'; |
| | |
| | document.addEventListener('DOMContentLoaded', () => { |
| | appendMessage({ role: 'assistant', content: "Hello! I'm your Code Assistant. What programming language are you working in today?" }); |
| | }); |
| | |
| | async function sendMessage() { |
| | const inputElement = document.getElementById('user-input'); |
| | const userMessage = inputElement.value.trim(); |
| | if (!userMessage) return; |
| | |
| | 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({ |
| | chat_history: chatHistory, |
| | assistant_state: assistantState |
| | }) |
| | }); |
| | |
| | if (!response.ok) { |
| | chatHistory.pop(); |
| | throw new Error(`HTTP error! status: ${response.status}`); |
| | } |
| | |
| | const data = await response.json(); |
| | assistantState = data.updated_state; |
| | |
| | const assistantMsgObj = { role: 'assistant', content: data.assistant_reply }; |
| | chatHistory.push(assistantMsgObj); |
| | appendMessage(assistantMsgObj); |
| | |
| | } catch (error) { |
| | console.error('Chat failed:', error); |
| | appendMessage({ role: 'assistant', content: `Error: Could not connect to the assistant. (${error.message})` }); |
| | } |
| | } |
| | |
| | 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; |
| | 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; |
| | messageRow.appendChild(msgDiv); |
| | chatWindow.appendChild(messageRow); |
| | chatWindow.scrollTop = chatWindow.scrollHeight; |
| | } |
| | |
| | function updateLanguage() { |
| | assistantState.language = document.getElementById('current-language').value; |
| | } |
| | |
| | function updateMode() { |
| | assistantState.mode = document.getElementById('current-mode').value; |
| | } |
| | </script> |
| | </body> |
| | </html> |
| |
|
