Skip to content

Fix: Fixed the entire chatbot, redesigned it, and added new features. #3720

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 28, 2025
Merged

Fix: Fixed the entire chatbot, redesigned it, and added new features. #3720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1f367e3
Fix linting issues in header.html
rinkitadhana Feb 27, 2025
05c0f2c
Merge branch 'main' into fix/chat
DonnieBLT Feb 28, 2025
693f8e7
Merge branch 'main' into fix/chat
rinkitadhana Feb 28, 2025
b7db941
Merge branch 'main' into fix/chat
DonnieBLT Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file modified entrypoint.sh
100644 → 100755
View file
Open in desktop
Empty file.
101 changes: 58 additions & 43 deletions website/templates/includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,26 +31,37 @@
.chatbot {
display: none;
position: fixed;
bottom: 7%;
bottom: 3%;
right: 1%;
max-width: 400px;
width: 100%;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
height: 450px;
/* Fixed height */
height: 500px;

@media (max-width: 768px) {
right: 50%;
transform: translateX(50%);
max-width: 95%;
}

}

.chat-icon {
position: fixed;
bottom: 4%;
right: 4%;
bottom: 3%;
right: 2%;
background-color: rgb(209, 16, 16);
transition: opacity 0.2s;
&:hover {
opacity: 0.8;
}
/* Red color */
border-radius: 50%;
width: 50px;
height: 50px;
padding: 10px;
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -68,25 +79,25 @@
}

.chat-log {
max-height: 320px;
max-height: 295px;
/* Adjusted height */
overflow-y: auto;
height: 320px;
height: 295px;
/* Fixed height */
}

.loading {
display: none;
position: fixed;
{% comment %} position: fixed;
bottom: 100px;
right: 10.5%;
right: 10.5%;{% endcomment %}
justify-content: center;
align-items: center;
padding: 10px;
font-size: 2xl;
padding: 10px;
background-color: #ffffffe6;
/* Semi-transparent background */
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

.chat-Zindex {
Expand Down Expand Up @@ -393,36 +404,40 @@
<div id="chatbot" class="chatbot">
<div class="chat-header flex justify-between items-center">
<h3 class="text-xl font-extrabold">Chat with BLT Bot</h3>
<button id="closeChatbot" class="text-white text-2xl">×</button>
<button id="closeChatbot" class="text-white text-2xl">x</button>
</div>
<div class="p-4">
<div class="bg-red-100 p-3 rounded-lg mb-2 text-red-700">
<p class="text-base">We reply immediately</p>
<p class="text-base">We respond instantly!</p>
</div>
<div id="chat-log" class=" relative chat-log bg-gray-100 p-3 rounded-lg">
<div id="loading" class="loading absolute bottom-1 left-1">
<svg class="animate-spin h-5 w-5 text-red-600"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
<span class="ml-2 text-gray-600">Loading...</span>
</div>
</div>
<div id="chat-log" class="chat-log bg-gray-50 p-3 rounded-lg"></div>
<div class="flex" id="chat-message-input-container">
<div class="flex flex-row gap-4 items-center mt-4 w-full"
id="chat-message-input-container">
<input id="chat-message-input"
type="text"
class="flex-grow p-2 border border-gray-300 rounded-l-lg"
class="w-full p-2 border-2 border-gray-300 placeholder:text-base rounded-lg"
placeholder="Enter your message...">
<button id="chat-message-submit"
class="bg-red-600 text-white p-2 rounded-md ml-2">Send</button>
<button id="chat-message-clear"
class="bg-gray-300 text-black p-2 rounded-md ml-2">Clear</button>
<div class="flex flex-row gap-2 items-center shrink-0">
<button id="chat-message-submit"
class="bg-red-600 hover:bg-red-500 text-white p-2 rounded-lg">Send</button>
<button id="chat-message-clear"
class="bg-gray-300 hover:bg-gray-200 text-black p-2 rounded-lg">Clear</button>
</div>
</div>
</div>
</div>
<div id="loading" class="loading">
<svg class="animate-spin h-5 w-5 text-red-600"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
<span class="ml-2 text-gray-600">Loading...</span>
</div>
<div id="chatIcon" class="chat-icon">
<svg class="w-10 h-10 text-white"
aria-hidden="true"
Expand Down Expand Up @@ -551,13 +566,13 @@ <h3 class="text-xl font-extrabold">Chat with BLT Bot</h3>
'/report &lt;description&gt; - Report a bug<br>' +
'/gsoc - Get GSoC info<br>' +
'/stats - View platform stats<br>'
chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: ' + response + '</div>';
chatLog.scrollTop = chatLog.scrollHeight;
chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + escapedAnswer + '</div>';
chatLog.scrollTop = chatLog.scrollHeight;
return true;
case '/report':
if (!args) {
response = 'Please provide a description. Usage: /report &lt;description&gt;';
chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: ' + response + '</div>';
chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + escapedAnswer + '</div>';
chatLog.scrollTop = chatLog.scrollHeight;
return true;
}
Expand All @@ -568,12 +583,12 @@ <h3 class="text-xl font-extrabold">Chat with BLT Bot</h3>
'Explore OWASP’s GSoC participation:<br>' +
'- Current projects: <a href="https://owasp.org/www-community/initiatives/gsoc/gsoc2025ideas">GSoC 2025 Ideas</a><br>' +
'Get involved with open-source at OWASP!';
chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: ' + response + '</div>';
chatLog.scrollTop = chatLog.scrollHeight;
chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + escapedAnswer + '</div>';
chatLog.scrollTop = chatLog.scrollHeight;
return true;
case '/stats':
response = 'Platform stats are not directly available via the bot yet. Please check the website dashboard or ask an admin for detailed statistics.';
chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: ' + response + '</div>';
chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + escapedAnswer + '</div>';
chatLog.scrollTop = chatLog.scrollHeight;
return true;
default:
Expand All @@ -587,7 +602,7 @@ <h3 class="text-xl font-extrabold">Chat with BLT Bot</h3>
if (message === "") return;

const escapedMessage = escapeHtml(message);
chatLog.innerHTML += '<div class="bg-red-100 text-red-800 p-2 rounded-lg mb-2">You: ' + escapedMessage + '</div>';
chatLog.innerHTML += '<div class="bg-green-300 text-black p-2 rounded-lg mb-2"> You - ' + escapedMessage + '</div>';
loading.style.display = 'flex';

// Check for slash command
Expand Down Expand Up @@ -618,7 +633,7 @@ <h3 class="text-xl font-extrabold">Chat with BLT Bot</h3>
})
.then(data => {
const escapedAnswer = escapeHtml(data.answer);
chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: ' + escapedAnswer + '</div>';
chatLog.innerHTML += '<div class="bg-blue-300 text-black p-2 rounded-lg mb-2">Bot - ' + escapedAnswer + '</div>';
chatLog.scrollTop = chatLog.scrollHeight;
loading.style.display = 'none';
})
Expand All @@ -627,7 +642,7 @@ <h3 class="text-xl font-extrabold">Chat with BLT Bot</h3>
if (error.message === 'Rate limit exceeded') {
errorMessage = 'The request limit has been reached. Please try again later.';
}
chatLog.innerHTML += '<div class="bg-gray-100 text-gray-800 p-2 rounded-lg mb-2">Bot: ' + errorMessage + '</div>';
chatLog.innerHTML += '<div class="bg-red-300 text-black p-2 rounded-lg mb-2">Bot - ' + errorMessage + '</div>';
chatLog.scrollTop = chatLog.scrollHeight;
loading.style.display = 'none';
});
Expand Down