File size: 3,858 Bytes
31fd27e | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PrepMe Chatbot</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">PrepMe Chatbot</h1>
<div class="card">
<div class="card-body" style="max-height: 300px; overflow-y: auto;">
<h5 class="card-title">Job: {{ job.company }} - {{ job.position }}</h5>
<p class="card-text">Job Description: {{ job.job_description }}</p>
<p class="card-text">Resume: {{ initial_context.split('Resume:\n')[1] }}</p>
</div>
</div>
<div class="input-group mt-3">
<input type="text" id="user-input" class="form-control" placeholder="Type your message here...">
<button id="send-btn" class="btn btn-primary">Send</button>
</div>
<div class="chat-container mt-3">
<div id="chat-box" class="border p-3" style="height: 300px; overflow-y: scroll;">
<div>Bot: {{ initial_response }}</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const chatBox = document.getElementById('chat-box');
const userInput = document.getElementById('user-input');
const sendBtn = document.getElementById('send-btn');
console.log('[PrepMe] Chat interface loaded:', { chatBox, userInput, sendBtn });
async function handleSendClick() {
const userMessage = userInput.value.trim();
console.log('[PrepMe] Send button clicked, message:', userMessage);
if (!userMessage) {
console.log('[PrepMe] Empty message, ignoring');
return;
}
// Show the user's message
const uDiv = document.createElement('div');
uDiv.textContent = `You: ${userMessage}`;
chatBox.appendChild(uDiv);
userInput.value = '';
try {
console.log('[PrepMe] Sending fetch request to /api/chat');
const res = await fetch('/api/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: userMessage }),
});
console.log('[PrepMe] Server response status:', res.status);
if (!res.ok) {
const errText = await res.text();
console.error('[PrepMe] Server error:', errText);
throw new Error(`HTTP ${res.status}: ${errText}`);
}
const data = await res.json();
console.log('[PrepMe] Server response data:', data);
const bDiv = document.createElement('div');
bDiv.textContent = `Bot: ${data.response}`;
chatBox.appendChild(bDiv);
chatBox.scrollTop = chatBox.scrollHeight;
} catch (err) {
console.error('[PrepMe] Chat error:', err);
const errDiv = document.createElement('div');
errDiv.textContent = `Error: ${err.message}`;
errDiv.style.color = 'red';
chatBox.appendChild(errDiv);
}
}
sendBtn.addEventListener('click', handleSendClick);
});
</script>
</body>
</html> |