@saltcorn/agents 0.8.9 → 0.8.11

package/agent-view.js

@@ -708,15 +708,60 @@ const run = async (
     stream ? div({ class: "next_response_scratch" }) : "",
     hasInputForm && input_form,
     style(agents_css),
-    script(domReady(`$( "#inputuserinput" ).autogrow({paddingBottom: 20});`)),
+    script(
+      domReady(`
+      $("#inputuserinput" ).autogrow({paddingBottom: 20});
+      ensure_script_loaded("/static_assets/"+_sc_version_tag+"/mermaid.min.js", ()=>{
+        mermaid.initialize({ startOnLoad: false });
+        activate_mermaid()
+        })`),
+    ),
     script(
       `
+    function activate_mermaid() {
+      const mermaids = document.querySelectorAll('code.language-mermaid:not([data-processed])')
+      if(mermaids.length) {
+        
+        const el0 =document.querySelector('code.language-mermaid:not([data-processed])')
+        const parent = el0.closest("div.copy-to-clipboard-elem")        
+        if(!parent) return;
+        parent.setAttribute("data-copy-text", parent.innerText)
+        
+        let processed = false
+        parent.querySelectorAll('code.language-mermaid:not([data-processed])').forEach(async (el) => {
+          try {
+            // parse() throws if the syntax is invalid
+            await mermaid.parse(el.textContent);
+
+            // Valid — safe to render
+            // mermaid.run() works on a live NodeList, so target this element directly
+            mermaid.run({ nodes: [el] });
+            processed = true
+          } catch (e) {
+            // Invalid — leave the <code> block completely untouched
+            console.warn('Mermaid syntax error (diagram left as-is):', e.message);
+          }
+        })
+        if(processed) activate_mermaid()
+      }
+    }
     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 +803,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()
@@ -767,6 +812,7 @@ const run = async (
             $("#copilotinteractions").append(res.response);
             scrollAgentToBottom();
         }
+        activate_mermaid()
     }
     window.processCopilotResponse = processCopilotResponse;
     window.final_agent_response = () => {
@@ -937,7 +983,7 @@ const run = async (
   e.preventDefault();
 
   try {
-    await navigator.clipboard.writeText(target.innerText);
+    await navigator.clipboard.writeText(target.getAttribute("data-copy-text") || target.innerText);
     target.classList.add('copy-success');
     setTimeout(() => target.classList.remove('copy-success'), 1000);
   } catch (err) {
@@ -1475,6 +1521,7 @@ const debug_info = async (table_id, viewname, config, body, { req, res }) => {
     sysPrompt = complArgs.systemPrompt;
   }
   const apiJson = JSON.stringify(run.context.api_interactions, null, 2);
+  const msgJson = JSON.stringify(run.context.interactions, null, 2);
   const debug_html = div(
     { class: "accordion", id: "debugAccordion" },
     div(
@@ -1506,6 +1553,50 @@ const debug_info = async (table_id, viewname, config, body, { req, res }) => {
         ),
       ),
     ),
+    div(
+      { class: "accordion-item" },
+      h2(
+        { class: "accordion-header", id: "debugHeadMessages" },
+        button(
+          {
+            class: "accordion-button",
+            type: "button",
+            "data-bs-toggle": "collapse",
+            "data-bs-target": "#debugCollapseMessages",
+            "aria-expanded": "true",
+            "aria-controls": "debugCollapseMessages",
+          },
+          "Messages",
+        ),
+      ),
+      div(
+        {
+          id: "debugCollapseMessages",
+          class: "accordion-collapse collapse show",
+          "aria-labelledby": "debugHeadMessages",
+          "data-bs-parent": "#debugAccordion",
+        },
+        div(
+          { class: "accordion-body" },
+          button(
+            {
+              class: "btn btn-sm btn-outline-secondary mb-2",
+              onclick: `
+                var t=document.getElementById('debugMessagesPre').textContent;
+                navigator.clipboard.writeText(t).then(function(){
+                  var b=event.target;b.textContent='Copied!';
+                  setTimeout(function(){b.textContent='Copy to clipboard'},1500)
+                })`,
+            },
+            "Copy to clipboard",
+          ),
+          pre(
+            { id: "debugMessagesPre", style: "white-space:pre-wrap" },
+            text(escapeHtml(msgJson)),
+          ),
+        ),
+      ),
+    ),
     div(
       { class: "accordion-item" },
       h2(
@@ -1516,7 +1607,7 @@ const debug_info = async (table_id, viewname, config, body, { req, res }) => {
             type: "button",
             "data-bs-toggle": "collapse",
             "data-bs-target": "#debugCollapseAPI",
-            "aria-expanded": "true",
+            "aria-expanded": "false",
             "aria-controls": "debugCollapseAPI",
           },
           "API interactions",

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.11",
   "description": "AI agents for Saltcorn",
   "main": "index.js",
   "dependencies": {