85 lines
2.6 KiB
HTML
85 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title></title>
|
|
</head>
|
|
<body>
|
|
<!-- Add this where you want AI responses to appear -->
|
|
<div id="aiResponseContainer" class="container my-4"></div>
|
|
|
|
<!-- Sticky Input Area -->
|
|
<style>
|
|
#aiStickyInputArea {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 12px;
|
|
background: #f8f9fa;
|
|
border-top: 1px solid #ccc;
|
|
display: flex;
|
|
z-index: 9999;
|
|
box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
#aiUserInput {
|
|
flex: 1;
|
|
border: 1px solid #ced4da;
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
border-radius: 4px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
#aiSendBtn {
|
|
background-color: #0d6efd;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<div id="aiStickyInputArea">
|
|
<input type="text" id="aiUserInput" placeholder="Ask something..." />
|
|
<button id="aiSendBtn">Send</button>
|
|
</div>
|
|
|
|
<script>
|
|
const input = document.getElementById('aiUserInput');
|
|
const sendBtn = document.getElementById('aiSendBtn');
|
|
const responseContainer = document.getElementById('aiResponseContainer');
|
|
|
|
sendBtn.onclick = async () => {
|
|
const msg = input.value.trim();
|
|
if (!msg) return;
|
|
input.value = '';
|
|
|
|
// Optional: Show loading state
|
|
const loadingDiv = document.createElement('div');
|
|
loadingDiv.innerHTML = `<div class="text-muted">⏳ Thinking...</div>`;
|
|
responseContainer.appendChild(loadingDiv);
|
|
responseContainer.scrollIntoView({ behavior: 'smooth', block: 'end' });
|
|
|
|
try {
|
|
const res = await fetch('https://your-backend.com/api/chat', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ message: msg })
|
|
});
|
|
|
|
const data = await res.json(); // expecting { response: "<div class='card'>...</div>" }
|
|
|
|
// Replace loading div with the actual HTML response
|
|
loadingDiv.outerHTML = data.response || "<div class='text-danger'>❌ Error: No response from AI.</div>";
|
|
|
|
} catch (err) {
|
|
loadingDiv.outerHTML = "<div class='text-danger'>❌ Failed to contact server.</div>";
|
|
}
|
|
};
|
|
</script>
|
|
|
|
</body>
|
|
</html> |