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);
+  });
 });