zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-24 17:22:35 +02:00
Code Issues Projects Releases Packages Wiki Activity

break off autoscroll if moved from bottom, tweak for button

Browse source
This commit is contained in:
Kyle Drake 2024-03-26 15:59:09 -05:00
parent a975c9c2be
commit 4e05121dfc
3 changed files with 39 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
public/js/chat.js
View file

@ -105,11 +105,33 @@ document.addEventListener('DOMContentLoaded', () => {
// Keeps the chat box scrolled to the bottom // Keeps the chat box scrolled to the bottom
// Function to scroll to the bottom
function scrollToBottom() { function scrollToBottom() {
chatBox.scrollTop = chatBox.scrollHeight; // Check if auto-scrolling is enabled
if (shouldAutoScroll) {
chatBox.scrollTop = chatBox.scrollHeight;
}
} }
window.onload = scrollToBottom; // Flag to keep track of whether auto-scrolling should be performed
let shouldAutoScroll = true;
window.onload = function() {
scrollToBottom();
// Detect manual scrolling by the user
chatBox.addEventListener('scroll', () => {
// Calculate the distance from the bottom
const distanceFromBottom = chatBox.scrollHeight - chatBox.scrollTop - chatBox.clientHeight;
// If the distance from the bottom is small (or zero), the user is at the bottom
if (distanceFromBottom < 1) {
shouldAutoScroll = true;
} else {
// If the user has scrolled up, disable auto-scrolling
shouldAutoScroll = false;
}
});
};
const observer = new MutationObserver(scrollToBottom); const observer = new MutationObserver(scrollToBottom);
observer.observe(chatBox, { childList: true }); observer.observe(chatBox, { childList: true });

8
sass/_project-sass/_project-Main.scss
View file

@ -2286,6 +2286,8 @@ pre, code {
height: 95%; /* This will make it fill its parent container */ height: 95%; /* This will make it fill its parent container */
background-color: #121212; background-color: #121212;
color: #e0e0e0; color: #e0e0e0;
border-left: 1px solid #373737;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
@ -2373,7 +2375,6 @@ pre, code {
} }
} }
.chat-container { .chat-container {
form { form {
display: flex; display: flex;
@ -2389,6 +2390,11 @@ pre, code {
border: 1px solid #777; border: 1px solid #777;
color: #fff; color: #fff;
} }
button {
margin-top: 9px;
height: 30px;
}
} }
.welcoming-cat { .welcoming-cat {

14
views/site_files/text_editor.erb
View file

@ -112,7 +112,7 @@
<div class="col col-66" style="flex: 66%; padding: 10px"> <div class="col col-66" style="flex: 66%; padding: 10px">
<div id="editor"><h3>Loading...</h3></div> <div id="editor"><h3>Loading...</h3></div>
</div> </div>
<div class="col col-33" style="flex: 33%; padding: 10px"> <div class="col col-33 chat-col" style="flex: 33%">
<div class="chat-container"> <div class="chat-container">
<div id="chat-box" class="chat-box"> <div id="chat-box" class="chat-box">
<div class="bot-message message"> <div class="bot-message message">
@ -120,11 +120,13 @@
<p>How can I help you today?</p> <p>How can I help you today?</p>
</div> </div>
</div> </div>
<form id="chat-form"> <div id="chat-form">
<input name="csrf_token" value="<%= csrf_token %>" type="hidden"> <form>
<input type="text" id="chat-input" placeholder="Ask a coding question..." value="give me a hello world html file" autocomplete="off"> <input name="csrf_token" value="<%= csrf_token %>" type="hidden">
<button type="submit" class="btn-Action">Send</button> <input type="text" id="chat-input" placeholder="Ask a coding question..." value="give me a hello world html file" autocomplete="off">
</form> <button type="submit" class="btn-Action">Send</button>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>