Add drag-to-resize on chat window left edge

Co-authored-by: Cursor <cursoragent@cursor.com>

assets/chat_resize.js

@@ -0,0 +1,54 @@
+// Drag-to-resize for the chat window's left edge
+document.addEventListener("DOMContentLoaded", function () {
+    var handle = null;
+    var chatWindow = null;
+    var startX = 0;
+    var startWidth = 0;
+
+    function initResize(e) {
+        chatWindow = document.getElementById("chat-window");
+        if (!chatWindow) return;
+        handle = document.getElementById("chat-resize-handle");
+        startX = e.clientX;
+        startWidth = chatWindow.getBoundingClientRect().width;
+        if (handle) handle.classList.add("active");
+        document.addEventListener("mousemove", doResize);
+        document.addEventListener("mouseup", stopResize);
+        e.preventDefault();
+    }
+
+    function doResize(e) {
+        if (!chatWindow) return;
+        // Dragging left increases width (panel anchored to right)
+        var newWidth = startWidth + (startX - e.clientX);
+        var minW = 320;
+        var maxW = window.innerWidth * 0.8;
+        newWidth = Math.max(minW, Math.min(maxW, newWidth));
+        chatWindow.style.width = newWidth + "px";
+        chatWindow.style.maxWidth = "none";
+    }
+
+    function stopResize() {
+        if (handle) handle.classList.remove("active");
+        document.removeEventListener("mousemove", doResize);
+        document.removeEventListener("mouseup", stopResize);
+        chatWindow = null;
+    }
+
+    // Use MutationObserver to attach listener whenever the handle appears
+    var observer = new MutationObserver(function () {
+        var h = document.getElementById("chat-resize-handle");
+        if (h && !h._resizeInit) {
+            h.addEventListener("mousedown", initResize);
+            h._resizeInit = true;
+        }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    // Also try binding immediately in case element already exists
+    var h = document.getElementById("chat-resize-handle");
+    if (h) {
+        h.addEventListener("mousedown", initResize);
+        h._resizeInit = true;
+    }
+});

assets/style.css

@@ -1126,6 +1126,21 @@ details[open].transformer-layers-container .transformer-layers-summary::before {
     animation: slideInRight 0.3s ease-out;
 }
 
+/* Drag handle on left edge of chat window for resizing */
+.chat-resize-handle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 5px;
+    height: 100%;
+    cursor: ew-resize;
+    z-index: 10;
+}
+.chat-resize-handle:hover,
+.chat-resize-handle.active {
+    background-color: rgba(59, 130, 246, 0.5);
+}
+
 @keyframes slideInRight {
     from {
         transform: translateX(100%);

components/chatbot.py

@@ -183,6 +183,7 @@ def create_chat_window():
         Dash HTML component for the chat window
     """
     return html.Div([
+        html.Div(className="chat-resize-handle", id="chat-resize-handle"),
         create_chat_header(),
         create_messages_container(),
         create_input_area()

plans.md

@@ -1,5 +1,11 @@
-Worktree Ideas:
-- host on a website
-- add AI bot to help
-    - AI bot worked examples ("Ask me how to ...")
-- animated "learning mode"?
+- specs on what each attention head does
+- change attention to entire generated sequence
+- output slider to look at each token
+    - put in a more obvious place?
+- experiment results side by side comparison
+- output streaming for chatbot
+- change width of chatbot window
+- shorter, concise responses in system prompt
+- add video links to glossary
+    - three blue one brown
+- add output token generation to attention, tokenization, etc

todo.md

@@ -193,3 +193,10 @@
 - [x] Delete embeddings_cache.json, update rag_docs/README.md with full inventory
 - [x] Update todo.md and conductor docs
 - Total: 30 RAG documents covering transformer concepts, dashboard usage, guided experiments, interpretation, troubleshooting, and research context
+
+## Completed: Resizable Chat Window
+
+- [x] Add drag handle div to left edge of chat window in chatbot.py
+- [x] Add CSS for `.chat-resize-handle` (cursor, hover highlight) in style.css
+- [x] Add `assets/chat_resize.js` for mousedown/mousemove/mouseup drag logic
+- Default size unchanged (25vw, 320px–450px); drag overrides max-width up to 80vw