mirror of
https://github.com/SkalaraAI/langchain-chatbot.git
synced 2025-04-09 23:10:16 -04:00
141 lines
5.4 KiB
HTML
141 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Chat Your Data</title>
|
|
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
|
|
<style>
|
|
.chat-body {
|
|
width: 550px;
|
|
margin: 50px auto;
|
|
}
|
|
.card-body {
|
|
background-color: #333;
|
|
color: #fff;
|
|
border-radius: 10px;
|
|
}
|
|
.server-message {
|
|
background-color: #444;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
.client-message {
|
|
background-color: #555;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
.form-inline {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.form-control {
|
|
width: 80%;
|
|
background-color: #333;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
#send {
|
|
background-color: #4C4CFF;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 5px;
|
|
padding: 10px 20px;
|
|
}
|
|
.form-message {
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
<script>
|
|
var endpoint = "ws://localhost:9000/chat";
|
|
var ws = new WebSocket(endpoint);
|
|
// Receive message from server word by word. Display the words as they are received.
|
|
ws.onmessage = function (event) {
|
|
var messages = document.getElementById('messages');
|
|
var data = JSON.parse(event.data);
|
|
if (data.sender === "bot") {
|
|
if (data.type === "start") {
|
|
var header = document.getElementById('header');
|
|
header.innerHTML = "Computing answer...";
|
|
var div = document.createElement('div');
|
|
div.className = 'server-message';
|
|
var p = document.createElement('p');
|
|
p.innerHTML = "<strong>" + "Chatbot: " + "</strong>";
|
|
div.appendChild(p);
|
|
messages.appendChild(div);
|
|
} else if (data.type === "stream") {
|
|
var header = document.getElementById('header');
|
|
header.innerHTML = "Chatbot is typing...";
|
|
var p = messages.lastChild.lastChild;
|
|
if (data.message === "\n") {
|
|
p.innerHTML += "<br>";
|
|
} else {
|
|
p.innerHTML += data.message;
|
|
}
|
|
} else if (data.type === "info") {
|
|
var header = document.getElementById('header');
|
|
header.innerHTML = data.message;
|
|
} else if (data.type === "end") {
|
|
var header = document.getElementById('header');
|
|
header.innerHTML = "Ask a question";
|
|
var button = document.getElementById('send');
|
|
button.innerHTML = "Send";
|
|
button.disabled = false;
|
|
} else if (data.type === "error") {
|
|
var header = document.getElementById('header');
|
|
header.innerHTML = "Ask a question";
|
|
var button = document.getElementById('send');
|
|
button.innerHTML = "Send";
|
|
button.disabled = false;
|
|
var p = messages.lastChild.lastChild;
|
|
p.innerHTML += data.message;
|
|
}
|
|
} else {
|
|
var div = document.createElement('div');
|
|
div.className = 'client-message';
|
|
var p = document.createElement('p');
|
|
p.innerHTML = "<strong>" + "You: " + "</strong>";
|
|
p.innerHTML += data.message;
|
|
div.appendChild(p);
|
|
messages.appendChild(div);
|
|
}
|
|
// Scroll to the bottom of the chat
|
|
messages.scrollTop = messages.scrollHeight;
|
|
};
|
|
// Send message to server
|
|
function sendMessage(event) {
|
|
event.preventDefault();
|
|
var message = document.getElementById('messageText').value;
|
|
if (message === "") {
|
|
return;
|
|
}
|
|
ws.send(message);
|
|
document.getElementById('messageText').value = "";
|
|
|
|
// Turn the button into a loading button
|
|
var button = document.getElementById('send');
|
|
button.innerHTML = "Loading...";
|
|
button.disabled = true;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-black">
|
|
<div class="chat-body card">
|
|
<div class="card-body p-5">
|
|
<h4 class="card-title text-center text-xl font-medium"> Chat Your Data </h4>
|
|
<p class="card-text text-center text-sm" id="header"> Ask a question </p>
|
|
<hr class="border-gray-500 mb-5" style="margin-top: 20px;">
|
|
<div id="messages" class="overflow-auto" style="max-height: 500px;">
|
|
</div>
|
|
<form action="" class="form-inline mt-5" id="chat-form" onsubmit="sendMessage(event)">
|
|
<input type="text" class="form-control" placeholder="Write your question" id="messageText">
|
|
<button id="send" type="submit" class="btn btn-primary">Send</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |