chat: adjust column size of chat, add top control button

public/js/chat.js

@@ -161,4 +161,52 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
+
+
+  // Resize chat box
+  const handle = document.querySelector('.resize-handle');
+  const leftCol = document.querySelector('.left-col');
+  const rightCol = document.querySelector('.right-col');
+  const editorRow = document.querySelector('.row.editor');
+  let isResizing = false;
+
+  handle.addEventListener('mousedown', function(e) {
+    e.preventDefault();
+    isResizing = true;
+    let startX = e.pageX;
+
+    function handleMouseMove(e) {
+      if (!isResizing) return;
+      const editorRowWidth = editorRow.offsetWidth; // Get the total width of the editor row
+      let moveX = e.pageX - startX;
+      let leftColWidth = leftCol.offsetWidth + moveX;
+
+      // Convert to percentage
+      let leftColPercentage = (leftColWidth / editorRowWidth) * 100;
+      let rightColPercentage = 100 - leftColPercentage;
+
+      // Check and enforce the minimum and maximum widths
+      if (rightColPercentage < 20) { // Minimum 20% for right column
+        rightColPercentage = 20;
+        leftColPercentage = 80;
+      } else if (rightColPercentage > 80) { // Maximum 80% for right column
+        rightColPercentage = 80;
+        leftColPercentage = 20;
+      }
+
+      // Apply the new widths
+      leftCol.style.width = `${leftColPercentage}%`;
+      rightCol.style.width = `${rightColPercentage}%`;
+      startX = e.pageX;
+    }
+
+    function handleMouseUp() {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+      isResizing = false;
+    }
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  });
 });

sass/_project-sass/_project-Main.scss

@@ -671,9 +671,6 @@
     border: 0;
   }
 }
-.right-col {
-  background: #FAF6F1;
-}
 .content.misc-page .col-33 h3 {
   font-size: 1.5em;
 }
@@ -2284,16 +2281,10 @@ pre, code {
 
 
 
-
-
-
-
-
 .chat-container {
   display: flex;
   flex-direction: column;
   height: calc(100vh - 60px); /* Adjust the height as needed */
-  background-color: #121212;
   color: #e0e0e0;
   border-left: 1px solid #373737;
   font-family: Arial, sans-serif;
@@ -2402,6 +2393,24 @@ pre, code {
 
 
 
+
+.resize-handle {
+  position: absolute;
+  left: -5px; /* Adjust based on handle width to center it on the border */
+  top: 50%;
+  transform: translateY(-50%);
+  width: 10px; /* Handle width */
+  height: 40px; /* Handle height */
+  background-color: #666; /* Handle color */
+  cursor: ew-resize;
+  z-index: 10;
+}
+
+
+
+
+
+
 .welcoming-cat {
   width: 200px;
   float: right;

views/site_files/text_editor.erb

@@ -90,7 +90,7 @@
       <a id="saveButton" class="btn-Action" href="#" onclick="saveTextFile(false); return false" style="opacity: 0.5"><span class="hide-on-mobile"><i class="fa fa-save"></i></span>Save</a>
       <span class="hide-on-mobile">
         <a class="btn-Action" href="<%= current_site.uri %>/<%= @filename == 'index.html' ? '' : @filename %>" target="_blank"><i class="fa fa-globe"></i> View</a>
-        <a href="#" id="shareButton" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<%== erb :'_share', layout: false, locals: {site: current_site, page_uri: "#{current_site.uri}/#{@filename}"} %>'><i class="fa fa-share-alt"></i> Share</a>
+        <a href="#" id="shareButton" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<%== erb :'_share', layout: false, locals: {site: current_site, page_uri: "#{current_site.uri}/#{@filename}"} %>'><i class="fa fa-share-alt"></i> Share</a> <a href="#" class="btn-Action" data-container="body" data-toggle="popover" data-placement="bottom"><i class="fa fa-comments"></i> Penelope</a>
       </span>
     <!-- <a id="saveAndExitButton" class="btn-Action" href="#" onclick="saveTextFile(true); return false" style="opacity: 0.5"><i class="fa fa-save"></i>&nbsp;&nbsp;Save and Exit</a> -->
       <div id="editorUpdates" class="tooltip fade bottom in hidden" style="top: 90px;right: 12.5em;">
@@ -109,10 +109,11 @@
 <script src="/js/chat.js"></script>
 
 <div class="row editor">
-  <div class="col col-66">
+  <div class="col left-col" style="width: 66%;">
     <div id="editor"><h3>Loading...</h3></div>
   </div>
-  <div class="col col-33 chat-col">
+  <div class="col right-col" style="width: 33%;">
+    <div class="resize-handle"></div>
     <div class="chat-container">
       <div id="chat-box" class="chat-box">
         <div class="bot-message message">