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