@saltcorn/agents 0.8.9 → 0.8.10

package/agent-view.js

@@ -713,10 +713,21 @@ const run = async (
       `
     function scrollAgentToBottom() {
       const container = document.getElementById('copilotinteractions');
-      if (container) {
-        if (container.scrollHeight > container.clientHeight) {
-          container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
-        }
+      if (!container) return;
+      // The message list scrolls internally when its height is bounded.
+      if (container.scrollHeight > container.clientHeight + 2) {
+        container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+      }
+      const layout = container.closest('.modern-chat-layout');
+      if (layout) {
+        // Footer-sticky modern chat: the page scrolls while the input bar is
+        // position:sticky, so scrollIntoView() on the bar is a no-op (it
+        // always reports as already "in view"). Scroll the page down by the
+        // amount the chat extends past the viewport bottom, so the newest
+        // content + input bar end up at the bottom of the screen.
+        const overshoot = layout.getBoundingClientRect().bottom - window.innerHeight;
+        if (overshoot > 0) window.scrollBy({ top: overshoot + 8, behavior: 'smooth' });
+      } else {
         const inputForm = document.querySelector('form.agent-view');
         if (inputForm) inputForm.scrollIntoView({ behavior: 'smooth', block: 'end' });
       }
@@ -758,7 +769,7 @@ const run = async (
         const user_input = $("textarea[name=userinput]").val()
         if(user_input && (!${JSON.stringify(dyn_updates)}))
           $("#copilotinteractions").append(wrapSegment('<p>'+user_input+'</p>'+fileBadge, "You", true))
-        $("textarea[name=userinput]").val("")
+        $("textarea[name=userinput]").val("").trigger("update.autogrow")
         $('div.next_response_scratch').html("")
         window['stream scratch ${viewname} ${rndid}'] = []
         $("button.modern-share").show()

package/agents.css

@@ -411,19 +411,65 @@ p.prevrun_content {
    Everything else uses Bootstrap utility classes in the markup; only
    the rules below are custom and cannot be expressed via utilities. */
 .modern-chat-shell.chat-wide .modern-sessions-offcanvas {
-  position: static !important;
+  position: sticky !important;
+  top: 1rem;
+  align-self: flex-start;
+  max-height: calc(100vh - 2rem);
+  overflow-y: auto;
   transform: none !important;
+  transition: none !important;
   visibility: visible !important;
   z-index: auto !important;
   width: 260px;
   max-width: 260px;
   flex: 0 0 260px;
   background: transparent;
-  height: auto;
   box-shadow: none;
 }
 .modern-chat-shell.chat-wide .modern-chat-hamburger { display: none; }
 
+/* Slim, subtle scrollbars for the scrollable chat areas (sessions sidebar
+   and the message list). Firefox uses scrollbar-width/-color; WebKit/Blink
+   use the ::-webkit-scrollbar pseudo-elements. The thumb is mostly
+   transparent and only becomes clearly visible on hover, so the scrollbar
+   doesn't visually clutter the layout. */
+.modern-chat-shell.chat-wide .modern-sessions-offcanvas,
+.modern-chat-layout #copilotinteractions {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+.modern-chat-shell.chat-wide .modern-sessions-offcanvas:hover,
+.modern-chat-layout #copilotinteractions:hover {
+  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+}
+.modern-chat-shell.chat-wide .modern-sessions-offcanvas::-webkit-scrollbar,
+.modern-chat-layout #copilotinteractions::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.modern-chat-shell.chat-wide
+  .modern-sessions-offcanvas::-webkit-scrollbar-track,
+.modern-chat-layout #copilotinteractions::-webkit-scrollbar-track {
+  background: transparent;
+}
+.modern-chat-shell.chat-wide
+  .modern-sessions-offcanvas::-webkit-scrollbar-thumb,
+.modern-chat-layout #copilotinteractions::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 10px;
+  transition: background-color 0.2s ease;
+}
+.modern-chat-shell.chat-wide
+  .modern-sessions-offcanvas:hover::-webkit-scrollbar-thumb,
+.modern-chat-layout #copilotinteractions:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+.modern-chat-shell.chat-wide
+  .modern-sessions-offcanvas::-webkit-scrollbar-thumb:hover,
+.modern-chat-layout #copilotinteractions::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
 /* Bootstrap has no `:empty` utility — collapse the interaction list when
    it has no content so the input form sits directly under the header. */
 .modern-chat-layout #copilotinteractions:empty { display: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/agents",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "description": "AI agents for Saltcorn",
   "main": "index.js",
   "dependencies": {