Scribd
Upload
26 views6 pages

File

The document is the code for a chatbot web application. It includes the HTML, CSS, and JavaScript code to build the user interface and functionality. The UI contains a sidebar for navigation, a question input field, and a chat log area to display question and response messages. The JavaScript code handles submitting the question, making an API request to process the question, and displaying the response.

Uploaded by

NGUYỄN THẾ VIỆT QUANG
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
26 views6 pages

File

The document is the code for a chatbot web application. It includes the HTML, CSS, and JavaScript code to build the user interface and functionality. The UI contains a sidebar for navigation, a question input field, and a chat log area to display question and response messages. The JavaScript code handles submitting the question, making an API request to process the question, and displaying the response.

Uploaded by

NGUYỄN THẾ VIỆT QUANG
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatAI</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;500;600;700&display=swap">
<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: "Poppins", sans-serif;
}

.main {
width: 100%;
background-color: #fff;
}

.side-navbar {
position: fixed;
height: 100vh;
width: 260px;
background: #460044;
overflow: hidden;
transition: 0.5s ease;
}

.side-navbar ul {
top: 0;
left: 0;
width: 100%;
}

.side-navbar ul li {
width: 100%;
}

.side-navbar ul li:hover {
background: #8b0084;
}

.side-navbar ul li:first-child {
margin-bottom: 1rem;
background: none;
}

.side-navbar ul li a {
display: block;
width: 100%;
display: flex;
color: #fff;
}

.side-navbar ul li a .icon {
min-width: 60px;
display: block;
font-size: 25px;
line-height: 60px;
height: 60px;
text-align: center;
}

.side-navbar ul li a .text {
display: block;
padding: 0 10px;
line-height: 60px;
height: 60px;
white-space: nowrap;
}

.content {
position: absolute;
width: calc(100% - 260px);
left: 260px;
min-height: 100vh;
transition: 0.5s ease;
}

.top-navbar {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 20px;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.profile img {
width: 44px;
height: 44px;
object-fit: contain;
object-position: center;
border-radius: 50%;
cursor: pointer;
}

#menu-icon {
font-size: 34px;
cursor: pointer;
}

.content.active {
width: calc(100% - 60px);
left: 60px;
}

.side-navbar.active {
width: 60px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}

.form-control {
width: 100%;
max-width: 400px;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 6px;
background-color: #f8f8f8;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
margin-bottom: 10px;
outline: none;
}

.form-control::placeholder {
color: #a9a9a9;
opacity: 0.8;
font-size: 18px; /* Adjust the font size as desired */
}

.form-control:focus {
background-color: #fff;
}

.btn {
padding: 10px 20px;
font-size: 16px;
background-color: #460044;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
}

.btn:hover {
background-color: #8b0084;
}

.chat-container {
width: 100%;
max-width: 600px;
margin-top: 20px;
padding: 20px;
background-color: #f8f8f8;
border-radius: 6px;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.chat-message {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}

.chat-message .question {
font-weight: bold;
margin-bottom: 5px;
}

.chat-message .response {
color: #555;
}

@media (max-width: 768px) {


.main {
flex-direction: column;
}

.content {
margin-left: 0;
}

.side-navbar {
width: 60px;
left: -60px;
}

.content.active {
margin-left: 60px;
}

.side-navbar.active {
left: 0;
}

.center {
text-align: center;
}

.center .side-navbar,
.center .top-navbar {
text-align: left;
}
}
</style>
</head>
<body>
<div class="main">
<div class="side-navbar">
<ul>
<li>
<a href="form.html">
<span class="icon"><i class='bx bxs-dashboard'></i></span>
<span class="text"><h2>ChatAI</h2></span>
</a>
</li>
<li>
<a href="index.html">
<span class="icon"><i class='bx
bxs-home-circle'></i></span>
<span class="text">Dashboard</span>
</a>
</li>
<li>
<a href="results.html">
<span class="icon"><i class='bx bxs-message-rounded-
detail'></i></span>
<span class="text">App</span>
</a>
</li>
</ul>
</div>
<div class="content">
<div class="top-navbar">
<div class="bx bx-menu" id="menu-icon"></div>
</div>
<div class="container">
<form id="chat-form" onsubmit="submitQuestion(event)"
action="/chat" method="post">
<input class="form-control mt-4" type="text" id="question-
input" placeholder="Enter your question" required>
<button class="btn btn-primary mt-4" type="submit">Ask</button>
</form>
<div id="chat-container" class="chat-container"></div>
</div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => {
const chatContainer = document.getElementById('chat-container');
const questionInput = document.getElementById('question-input');

function displayChatMessage(question, response) {


const chatMessage = document.createElement('div');
chatMessage.classList.add('chat-message');
chatMessage.innerHTML = `
<p class="question">${question}</p>
<p class="response">${response}</p>
`;
chatContainer.appendChild(chatMessage);
chatContainer.scrollTop = chatContainer.scrollHeight; // Scroll to
bottom
}

async function processQuestion(question) {


try {
const response = await axios.post('/chat', { question });
return response.data.response;
} catch (error) {
console.error(error);
throw error;
}
}

async function submitQuestion(event) {


event.preventDefault();
const question = questionInput.value.trim();
if (question) {
displayChatMessage(question, '');

try {
const response = await processQuestion(question);
displayChatMessage('', response);
} catch (error) {
displayChatMessage('', 'Sorry, I am no to answer your
question at the moment.');
}

questionInput.value = '';
}

return false;
}

const chatForm = document.getElementById('chat-form');


chatForm.addEventListener('submit', submitQuestion);
});
</script>
</body>
</html>

You might also like