90 lines
2.5 KiB
HTML
90 lines
2.5 KiB
HTML
{% extends 'base.html' %}
|
|
{% load i18n static %}
|
|
|
|
{% block title %}{{ _("HaikalBot") }}{% endblock title %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
|
|
#chatbox {
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
height: 200px;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="row p-2">
|
|
<div class="card shadow-sm rounded shadow">
|
|
<div class="card-header bg-primary text-white">
|
|
<h4 class="mb-0">{% trans 'HaikalBot' %}</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div id="chatbox">
|
|
<p><b>{% trans 'HaikalBot' %}:</b> {% trans 'Hello! How can I assist you today?' %}</p>
|
|
</div>
|
|
<label for="userMessage"></label>
|
|
<input class="form-control form-control-sm"
|
|
type="text" id="userMessage"
|
|
placeholder="{% trans 'Type your message here...' %}" />
|
|
<button class="btn btn-sm btn-success m-2" onclick="sendMessage()">{% trans 'Send' %}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Script to send to api -->
|
|
<script>
|
|
function getCookie(name) {
|
|
let cookieValue = null;
|
|
if (document.cookie && document.cookie !== '') {
|
|
const cookies = document.cookie.split(';');
|
|
for (let cookie of cookies) {
|
|
cookie = cookie.trim();
|
|
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
|
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return cookieValue;
|
|
}
|
|
|
|
const csrfToken = getCookie('csrftoken');
|
|
|
|
|
|
async function sendMessage() {
|
|
const userMessage = document.getElementById("userMessage").value;
|
|
|
|
if (!userMessage.trim()) {
|
|
alert("Please enter a message.");
|
|
return;
|
|
}
|
|
|
|
const response = await fetch("", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"X-CSRFToken": csrfToken,
|
|
},
|
|
body: JSON.stringify({ message: userMessage }),
|
|
});
|
|
|
|
if (response) {
|
|
const data = await response.json();
|
|
const chatbox = document.getElementById("chatbox");
|
|
chatbox.innerHTML += `<p><b>{% trans 'You' %}:</b> ${userMessage}</p>`;
|
|
chatbox.innerHTML += `<p><b>{% trans 'HaikalBot' %}:</b> ${data.response}</p>`;
|
|
document.getElementById("userMessage").value = "";
|
|
chatbox.scrollTop = chatbox.scrollHeight;
|
|
} else {
|
|
alert("An error occurred.");
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
</div>
|
|
{% endblock content %}
|