File size: 7,093 Bytes
df5861f 4d9fce0 798ece2 ff85bff 5105d96 ff85bff 5105d96 ff85bff b4955e8 ff85bff df5861f 4d9fce0 f389b10 798ece2 f389b10 b4955e8 f389b10 798ece2 ff85bff 798ece2 f389b10 9808fe5 798ece2 f389b10 4d9fce0 b4955e8 4d9fce0 df5861f 4d9fce0 9808fe5 93c646d f389b10 4d9fce0 f389b10 4d9fce0 f389b10 4d9fce0 f389b10 ff85bff 4d9fce0 798ece2 4d9fce0 f389b10 4d9fce0 f389b10 4d9fce0 798ece2 ff85bff 798ece2 b4955e8 798ece2 df5861f ff85bff |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 |
<!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>
|