I’m developing a web application where I display chat responses from a backend service. Each response includes a “Context” button that should show additional details when clicked. However, when I click the context button, it only displays part of the context text, not the full content sent from the backend.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
}
.sidebar-bg {
background-color: #141B2A;
}
.main-bg {
background-color: #111827;
}
input[type="text"],
.input-group-text {
background-color: #374151 !important;
border: none !important;
box-shadow: none !important;
}
input[type="text"] {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
font-family: 600 !important;
}
.input-group-text {
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.input-group {
border: 1px solid #9ca3af !important;
border-radius: 15px;
}
input::placeholder {
color: #9ca3af !important;
opacity: 1;
font-family: 600 !important;
}
.fa-solid {
color: #606977;
}
#main-bg {
height: 100%;
padding-top: 20%;
}
#chat-response-box {
height: 400px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 10px;
}
.cursor-pointer {
cursor: pointer;
}
.avatar {
height: 40px;
}
.bg-bot {
background-color: #141b2a;
border: 1px solid #9ca3af;
}
.bg-human {
background-color: #374151;
border: 1px solid #9ca3af;
}
.text-grey {
color: #9ca3af;
}
.snippet {
position: relative;
background: #111827;
padding: 32px 5%;
margin: 24px 0;
}
.stage {
position: relative;
}
.dot-flashing {
position: relative;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #9ca3af;
color: #9ca3af;
animation: dot-flashing 1s infinite linear alternate;
animation-delay: 0.5s;
}
.dot-flashing::before,
.dot-flashing::after {
content: "";
display: inline-block;
position: absolute;
top: 0;
}
.dot-flashing::before {
left: -15px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #9ca3af;
color: #9ca3af;
animation: dot-flashing 1s infinite alternate;
animation-delay: 0s;
}
.dot-flashing::after {
left: 15px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #9ca3af;
color: #9ca3af;
animation: dot-flashing 1s infinite alternate;
animation-delay: 1s;
}
@keyframes dot-flashing {
0% {
background-color: #9ca3af;
}
50%,
100% {
background-color: rgba(156, 163, 175, 0.2);
}
}
@media (max-width:1110px) {
.makehide {
display: none;
}
.takefullwidth {
width: 100%;
}
#chat-response-box::-webkit-scrollbar {
width: 12px;
}
#chat-response-box::-webkit-scrollbar-thumb {
background-color: #4a4a4a;
}
#chat-response-box::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
}
</style>
</head>
<body>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 sidebar-bg vh-100 text-white makehide">
<div class="sidebar p-3">
<p class="h2"> HealthCare AI</p>
</div>
</div>
<div class="col-sm-10 main-bg vh-100 text-white takefullwidth" style="min-height: 100vh; height: 100vh !important; overflow-y: auto;" id="corpus">
<div class="main-content">
<div class="container pt-3">
<div class="row">
<div class="col-sm-12 text-center">
<div class="card border-0 p-3 bg-transparent">
<div id="main-bg">
<div class="text-center">
<h5 class="text-grey">Ask Your Queries here</h5>
</div>
</div>
<div id="chat-response-box" class="d-none chatbox"></div>
</div>
<div id="chat-input-box" class="pt-3">
<div class="input-group mb-3 shadow">
<input type="text" class="form-control text-white p-3" name="user-input" id="user-input" aria-describedby="send-btn" placeholder="Ask query">
<span class="input-group-text cursor-pointer" id="send-btn"><i class="fa-solid fa-paper-plane"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div id="chat-modal" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Context</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" style="max-height: 400px; overflow-y: auto;">
<p id="chat-modal-content"></p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://kit.fontawesome.com/1da99de032.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
var chatResponseBox = document.getElementById('chat-response-box');
var mainBg = document.getElementById('main-bg');
var userInput = document.getElementById('user-input');
$(document).ready(function () {
$("#send-btn").click(async function (event) {
event.preventDefault();
const formData = new FormData();
const userInput = document.getElementById('user-input').value;
if (userInput == null || userInput == "") {
Swal.fire({
icon: 'error',
title: 'Oops!!!',
text: "Please enter some text!",
allowOutsideClick: false,
allowEscapeKey: false,
confirmButtonColor: "#000"
});
} else {
chatResponseBox.classList.remove('d-none');
mainBg.style.display = "none";
formData.append('prompt', userInput);
var html = `
<div class="row mb-5">
<div class="col-sm-3"></div>
<div class="col-sm-9 text-end">
<div class="row">
<div class="col-sm-11 bg-human shadow rounded-3">
<h6 class="p-3 text-white mb-0">`+ userInput + `</h6>
</div>
<div class="col-sm-1">
<img src="../static/assets/images/me-avatar.png" alt="Avatar" class="avatar">
</div>
</div>
</div>
</div>
<div id="loader">
<div class="row">
<div class="col-sm-9">
<div class="snippet" data-title="dot-flashing">
<div class="stage">
<div class="dot-flashing"></div>
</div>
</div>
</div>
</div>
</div>
`;
chatResponseBox.innerHTML += html;
document.getElementById('user-input').value = '';
let response = await fetch('/chat_response_frdqa', {
method: "POST",
body: formData
});
processChatResponse(response);
}
});
});
async function processChatResponse(response) {
switch (response.status) {
case 400:
Swal.fire({
icon: 'error',
title: 'Oops!!!',
text: "Sorry, Couldn't be able to generate your response now. Please try after some time.",
confirmButtonColor: "#040b14"
});
break;
case 200:
var json = await response.json();
var chatResult = json.answer.replace("n", "<br>");
var html = `
<div class="row mb-5">
<div class="col-sm-9 text-start">
<div class="row">
<div class="col-sm-1">
<img src="../static/assets/images/bot-avatar.png" alt="Avatar" class="avatar">
</div>
<div class="col-sm-11 bg-maroon shadow rounded-3">
<h6 class="p-3 text-white mb-4">` + chatResult + `</h6>
<!-- Add Context Button here -->
<button class="btn btn-primary context-btn" data-context="` + json.context + `">Context</button>
</div>
</div>
</div>
<div class="col-sm-3"></div>
</div>
`;
var loader = document.getElementById('loader');
loader.remove();
chatResponseBox.innerHTML += html;
chatResponseBox.scrollTop = chatResponseBox.scrollHeight;
// Add event listeners for context buttons
document.querySelectorAll('.context-btn').forEach(button => {
button.addEventListener('click', function() {
var contextText = this.getAttribute('data-context');
document.getElementById('chat-modal-content').innerText = contextText;
var chatModal = new bootstrap.Modal(document.getElementById('chat-modal'));
chatModal.show();
});
});
break;
default:
Swal.fire({
icon: 'error',
title: 'Oops!!!',
text: "There is a " + response.status + " error. Please contact admin for support.",
confirmButtonColor: "#040b14"
});
}
}
userInput.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("send-btn").click();
}
});
var extractFilename = (path) => {
const pathArray = path.split("/");
const lastIndex = pathArray.length - 1;
return pathArray[lastIndex];
};
</script>
</body>
</html>
i tried changing height.but its not the problem, it has scroll bar. the context is loo large.