| <!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> |
|
|
