break off autoscroll if moved from bottom, tweak for button

public/js/chat.js

@@ -105,11 +105,33 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Keeps the chat box scrolled to the bottom
 
+  // Function to scroll to the bottom
   function scrollToBottom() {
+    // 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);
   observer.observe(chatBox, { childList: true });

sass/_project-sass/_project-Main.scss

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

views/site_files/text_editor.erb

@@ -112,7 +112,7 @@
   <div class="col col-66" style="flex: 66%; padding: 10px">
     <div id="editor"><h3>Loading...</h3></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 id="chat-box" class="chat-box">
         <div class="bot-message message">
@@ -120,7 +120,8 @@
           <p>How can I help you today?</p>
         </div>
       </div>
-        <form id="chat-form">
+        <div id="chat-form">
+          <form>
             <input name="csrf_token" value="<%= csrf_token %>" type="hidden">
             <input type="text" id="chat-input" placeholder="Ask a coding question..." value="give me a hello world html file" autocomplete="off">
             <button type="submit" class="btn-Action">Send</button>
@@ -129,6 +130,7 @@
       </div>
     </div>
   </div>
+</div>
 
 <script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>