Skip to content

Commit 3b7e48f

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #1161 from vansh-codes/main
Added new chatbot and go to top button
2 parents 183d721 + b355e65 commit 3b7e48f

File tree

4 files changed

+326
-9
lines changed

4 files changed

+326
-9
lines changed

‎Website/index.html‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<header>
1212
<nav class="navbar">
1313
<div class="logo-container">
14-
<img src="logo.png" alt="RecodeHive Logo" width="50" height="50"> <!-- Added logo to navbar -->
14+
<img src="logo-bg.png" alt="RecodeHive Logo" width="50" height="50"> <!-- Added logo to navbar -->
1515
<span class="brand-name">RecodeHive</span>
1616
</div>
1717
<ul class="nav-links">
@@ -93,6 +93,32 @@ <h1 class="contri-heading">Our Contributors</h1>
9393

9494
</main>
9595

96+
<!-- Chatbot Button -->
97+
<div class="chatbot-button" id="chatbot-button">
98+
<img src="logo-bg.png" height="50px" width="50px">
99+
</div>
100+
101+
<!-- Chatbox -->
102+
<div class="chatbot" id="chatbot">
103+
<div class="chatbot-header">
104+
Recodehive's Chatbot
105+
<span class="close-btn" id="close-chatbot">&times;</span>
106+
</div>
107+
<div class="chatbot-messages" id="chatbot-messages"></div>
108+
<div class="chatbot-questions">
109+
<p>Choose a question:</p>
110+
<ul id="question-list">
111+
<!-- Questions will be populated here -->
112+
</ul>
113+
</div>
114+
<div class="chatbot-input-container">
115+
<input type="text" id="chatbot-input" placeholder="Type your message...">
116+
<button id="chatbot-send">Send</button>
117+
</div>
118+
</div>
119+
120+
<button id="go-to-top">TOP▶️</button> <!-- Go to top button -->
121+
96122
<footer class="footer">
97123
<p>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive" id="footer-link">RecodeHive</a>. All rights reserved.</p>
98124
</footer>

‎Website/js/script.js‎

Lines changed: 103 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,20 @@ document.addEventListener('DOMContentLoaded', function() {
88
throw new Error(`HTTP error! status: ${response.status}`);
99
}
1010
const data = await response.json();
11-
const directories = data.filter(item => item.type === 'dir' && item.name !== 'Website');
11+
const directories = data.filter(item => item.type === 'dir' && item.name !== 'Website' && item.name !== '.github');
1212

1313
directories.forEach(directory => {
1414
const li = document.createElement('li');
1515
li.classList.add('card');
16-
16+
1717
const h3 = document.createElement('h3');
1818
h3.textContent = directory.name;
1919

2020
const a = document.createElement('a');
2121
a.href = directory.html_url;
2222
a.textContent = 'View Repository';
2323
a.classList.add('btn-view-repo');
24-
24+
2525
li.appendChild(h3);
2626
li.appendChild(a);
2727
directoriesList.appendChild(li);
@@ -41,7 +41,7 @@ document.addEventListener('DOMContentLoaded', function() {
4141
document.getElementById('languages').insertBefore(toggleLanguagesButton, languagesList);
4242

4343
languagesList.style.display = 'none';
44-
44+
4545
toggleLanguagesButton.addEventListener('click', function() {
4646
languagesList.style.display = languagesList.style.display === 'none' ? 'block' : 'none';
4747
toggleLanguagesButton.textContent = languagesList.style.display === 'none' ? 'Show Languages Used' : 'Hide Languages Used';
@@ -76,10 +76,14 @@ document.addEventListener('DOMContentLoaded', function() {
7676
for (const [language, bytes] of Object.entries(languagesData)) {
7777
const percentage = ((bytes / totalBytes) * 100).toFixed(2);
7878
const listItem = document.createElement('li');
79-
listItem.innerHTML = `
80-
<span>${language}</span>
81-
<div class="progress-bar" style="width: ${percentage}%;"></div>
82-
`;
79+
listItem.classList.add('card-languages');
80+
const h3 = document.createElement('h3');
81+
h3.textContent = `${language}`;
82+
listItem.appendChild(h3);
83+
// listItem.innerHTML = `
84+
// <h3>${language}</h3>
85+
// <div class="progress-bar" style="width: ${percentage}%;"></div>
86+
// `;
8387
languageList.appendChild(listItem);
8488

8589
if (bytes > mostUsedLanguage.bytes) {
@@ -107,6 +111,97 @@ document.addEventListener('DOMContentLoaded', function() {
107111
});
108112
}
109113

114+
const chatbotButton = document.getElementById('chatbot-button');
115+
const chatbot = document.getElementById('chatbot');
116+
const closeChatbot = document.getElementById('close-chatbot');
117+
const messagesContainer = document.getElementById('chatbot-messages');
118+
const inputField = document.getElementById('chatbot-input');
119+
const sendButton = document.getElementById('chatbot-send');
120+
const questionList = document.getElementById('question-list');
121+
let questionsRendered = false;
122+
123+
const messages = [
124+
{ text: 'Hello! Welcome to Machine Learning Repos', type: 'bot' }
125+
];
126+
127+
// hardcoded questions and answers
128+
const questionsAndAnswers = [
129+
{ question: 'What is Machine Learning?', answer: 'Machine Learning is a field of AI that enables computers to learn from data without being explicitly programmed.' },
130+
{ question: 'Tell me about Machine Learning Repos.', answer: 'Machine Learning Repos is a curated collection of Machine Learning Repositories' },
131+
{ question: 'How do I contribute to the repository?', answer: 'You can contribute by forking the repository, making changes, and submitting a pull request. Learn more <a href="https://github.com/recodehive/machine-learning-repos/blob/main/Website/README.md" target="_blank">here</a>' },
132+
];
133+
134+
135+
function renderMessages() {
136+
messagesContainer.innerHTML = '';
137+
messages.forEach((msg) => {
138+
const messageDiv = document.createElement('div');
139+
messageDiv.className = `message ${msg.type}`;
140+
messageDiv.innerHTML = `<span class="message-text">${msg.text}</span>`;
141+
messagesContainer.appendChild(messageDiv);
142+
});
143+
messagesContainer.scrollTop = messagesContainer.scrollHeight;
144+
}
145+
146+
function addMessage(text, type) {
147+
messages.push({ text, type });
148+
renderMessages();
149+
}
150+
151+
function renderQuestions() {
152+
questionsAndAnswers.forEach((qa, index) => {
153+
const listItem = document.createElement('li');
154+
listItem.textContent = qa.question;
155+
listItem.addEventListener('click', () => {
156+
addMessage(qa.question, 'user');
157+
setTimeout(() => addMessage(qa.answer, 'bot'), 500);
158+
});
159+
questionList.appendChild(listItem);
160+
});
161+
}
162+
163+
chatbotButton.addEventListener('click', () => {
164+
chatbot.classList.add('active');
165+
renderMessages();
166+
if(questionsRendered===false){
167+
questionsRendered=true;
168+
renderQuestions();
169+
}
170+
});
171+
172+
closeChatbot.addEventListener('click', () => {
173+
chatbot.classList.remove('active');
174+
});
175+
176+
sendButton.addEventListener('click', () => {
177+
const userInput = inputField.value.trim();
178+
if (userInput) {
179+
addMessage(userInput, 'user');
180+
inputField.value = '';
181+
setTimeout(() => addMessage('Choose from the list of questions!', 'bot'), 500); // response by bot
182+
}
183+
});
184+
185+
inputField.addEventListener('keypress', (e) => {
186+
if (e.key === 'Enter') {
187+
sendButton.click();
188+
}
189+
});
190+
191+
const goToTopButton = document.getElementById('go-to-top');
192+
193+
window.addEventListener('scroll', () => {
194+
if (window.scrollY > 300) {
195+
goToTopButton.style.display = 'block';
196+
} else {
197+
goToTopButton.style.display = 'none';
198+
}
199+
});
200+
201+
goToTopButton.addEventListener('click', () => {
202+
window.scrollTo({ top: 0, behavior: 'smooth' });
203+
});
204+
110205
fetchDirectories();
111206
toggleLanguagesSection();
112207
fetchRepoStats();

‎Website/logo-bg.png‎

19.5 KB
Loading

0 commit comments

Comments
 (0)