please could you help me, I was building an interface for my chat bot but it there is an issue, If you look at the image you’ll get it
as you can see there are is an empty icon floating, I want it gone
this is the console image as well
and as for my code blocks,
Here, this is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SGPT Chat Interface</title>
<link rel="stylesheet" href="static2/style2.css">
</head>
<body>
<header class="top-bar">
<!-- Icons for the top left corner -->
<div class="left-icons">
<img src="static2/bot-i.png" alt="Bot Icon" class="top-icon"> <!-- Bot Icon -->
<span class="sgpt-label">Serene</span> <!-- SGPT label next to the bot icon -->
</div>
<!-- Icons for the top right corner -->
<div class="right-icons">
<span class="user-label">USER</span> <!-- USER tag BEFORE the user icon -->
<img src="static2/user-i.png" alt="User Icon" class="top-icon"> <!-- User Icon -->
</div>
</header>
<main class="chat-interface">
<!-- Chat messages section -->
<div class="chat-messages" id="chat-messages">
<!--Big Bot icon-->
<div class="bot-icon-container">
<img src="static2/bot-i.png" class="bot-icon-static" alt="Bot Icon">
</div>
<!-- Initial bot message with icon -->
<div class="message bot-message">
<img src="static2/bot-i.png" class="message-icon" alt="Bot Icon">
<div class="message-content">
<p>Hello Sire! How would you like me to assist with your business today?</p>
<p>Would you like me to calculate your profits?</p>
<p>Or you'd want me to analyse your sales report?</p>
<p>Or we could just have a simple chat..</p>
<p>Anything you want sir...</p>
</div>
</div>
<!-- Chatbot loading message section -->
<div class="chat-message">
<div id="loading-spinner" class="loading-spinner" style="display: none;"></div>
<span id="chatbot-response" style="display: none;">Loading...</span> <!-- Initially hidden -->
</div>
</div>
<!-- Input bar for user -->
<div class="chat-input-container">
<div class="chat-input">
<!-- Attachment button on the left -->
<button id="attach-btn">
<img src="static2/af.png" alt="Attachment Icon" class="icon-btn">
</button>
<!-- Input field in the center -->
<input type="text" id="user-input" placeholder="Message SGPT...">
<!-- Send button on the right -->
<button id="send-btn" aria-label="Send Message">
<img src="static2/paper.png" alt="Send Icon" class="icon-btn">
</button>
</div>
</div>
<!-- Small footer message below the chat input bar -->
<footer class="footer-message">
Welcome sir, thanks for using me, don't worry all chats are reserved...
</footer>
</main>
<script src="static2/script2.js"></script>
</body>
</html>
And Here is my CSS:
/* General styling */
body, html {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
height: 100%;
background-color: #1e1e1e;
color: white;
display: flex;
flex-direction: column;
}
/* Top Bar */
.top-bar {
position: fixed;
top: 0;
width: 100%;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #1e1e1e;
z-index: 1000;
}
.left-icons, .right-icons {
display: flex;
align-items: center;
}
.top-icon {
width: 100px;
height: 60px;
margin: 0 10px;
}
/* SGPT label next to the bot icon */
.sgpt-label, .user-label {
font-size: 20px;
color: #fff;
margin: 0 10px;
font-family: 'Poppins', sans-serif;
}
/* Chat Interface */
.chat-interface {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 50vw;
height: 90vh;
margin: 80px auto 0;
background-color: #222;
border-radius: 25px;
overflow: hidden;
position: relative;
}
.bot-icon-static {
width: 675px;
height: 410px;
margin-bottom: 10px;
}
@media (max-width: 600px) {
.bot-icon-static {
width: 300px;
height: 200px;
}
}
/* Chat messages */
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 20px;
background-color: #1e1e1e;
margin-top: 0;
overflow-y: hidden;
scrollbar-width: thin;
}
/* Message Container */
.message {
display: flex;
margin-bottom: 15px;
max-width: 100%;
}
.message.user-message {
justify-content: flex-end;
}
.message.user-message .message-content {
background-color: #0084ff;
color: #fff;
border-bottom-right-radius: 0;
align-self: flex-end;
}
.message.bot-message {
justify-content: flex-start;
}
.message.bot-message .message-content {
background-color: #e5e5ea;
color: #000;
border-bottom-left-radius: 0;
align-self: flex-start;
}
/* Message Icon */
.message-icon {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
}
.message.user-message .message-icon {
margin-left: 10px;
order: 2;
}
.message-content {
max-width: 70%;
padding: 12px 18px;
border-radius: 15px;
font-size: 16px;
line-height: 1.4;
word-wrap: break-word;
position: relative;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
/* Message Bubble Tails */
.message.user-message .message-content {
background-color: #0084ff;
color: white;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 0px;
margin-right: 15px;
}
.message.bot-message .message-content {
background-color: #e5e5ea;
color: #000;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
border-top-left-radius: 0px;
margin-left: 15px;
}
.message.user-message, .message.bot-message {
background-color: transparent;
}
/* Loading Spinner */
.loading-spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #0084ff;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
display: inline-block; /* Keep it inline with the text */
vertical-align: middle; /* Align it vertically with the text */
margin-left: 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Hide empty bot icon and empty space if the message is blank */
.message.bot-message:empty {
display: none;
}
/* Handle the visibility for the bot icon */
.message.bot-message.loading .message-icon,
.message.bot-message.error .message-icon {
visibility: hidden; /* Hide the icon when in loading or error state */
}
/* When the bot has an actual message (response), show the icon */
.message.bot-message .message-icon {
visibility: visible; /* Keep visible if content is available */
}
/* Scrollbar Styling */
.chat-messages::-webkit-scrollbar {
width: 8px;
}
.chat-messages::-webkit-scrollbar-track {
background: #f1f1f1;
}
.chat-messages::-webkit-scrollbar-thumb {
background: #444;
border-radius: 4px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
background: #333;
}
/* Chat Input Container */
.chat-input-container {
position: relative;
width: 100%;
padding: 0;
}
.chat-input {
display: flex;
padding: 5px 10px;
background-color: #333;
border-radius: 25px;
width: 98%;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
align-items: center;
justify-content: space-between;
}
#user-input {
flex: 1;
padding: 8px 12px;
border-radius: 25px;
border: none;
outline: none;
background-color: #444;
color: white;
font-family: 'Poppins', sans-serif;
}
/* Send button and attachment button adjustments */
#attach-btn, #send-btn {
background-color: transparent;
border: none;
margin: 0;
padding: 5px;
cursor: pointer;
}
.icon-btn {
width: 28px;
height: 28px;
}
#send-btn:hover, #attach-btn:hover {
opacity: 0.8;
}
/* Footer message */
.footer-message {
font-size: 10px;
color: #aaa;
text-align: center;
padding: 4px 0;
background-color: #333;
width: 100%;
position: relative;
border-top: 1px solid #444;
}
.bot-message-container {
display: flex;
align-items: flex-start;
}
.loading-icon {
visibility: visible;
margin: 0;
padding: 0;
}
.bot-icon.loading .loading-icon {
visibility: visible;
}
.bot-icon.loading-done .loading-icon {
visibility: hidden;
}
.chat-messages:hover {
overflow-y: scroll;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.empty-bot-icon {
display: none;
}
Please let me know if someone knows how to solve this problem, I’ve been trying for a few days now and I couldn’t fine any specific tutorials as well!
All I want is the bot’s responses should be in the same line as the loading spinner, you know so that it could display as if the bot was thinking.
I hope you get it! Hit me up on here or insta by @sobi_is_a_writer and I’ll surely respond
Thanks ya all
You need to sign in to view this answers
Leave feedback about this