@saltcorn/agents 0.8.8 → 0.8.10

package/agent-view.js

@@ -337,14 +337,25 @@ const run = async (
   let hasInputForm = true;
 
   const initial_q = state.run_id ? undefined : state._q;
+  let run;
   if (state.run_id) {
-    let run = prevRuns ? prevRuns.find((r) => r.id == state.run_id) : null;
+    run = prevRuns ? prevRuns.find((r) => r.id == state.run_id) : null;
     if (!run)
       run = await WorkflowRun.findOne({
         trigger_id: action.id,
-        ...(shared ? {} : { started_by: req.user?.id }),
+        //...(shared ? {} : { started_by: req.user?.id }),
         id: state.run_id,
       });
+
+    if (
+      run &&
+      !shared &&
+      run.started_by != req.user?.id &&
+      run.context.share_token !== (state.share_token || "none")
+    )
+      run = null;
+  }
+  if (run) {
     const interactMarkups = [];
     if (run.context.html_interactions) {
       interactMarkups.push(...run.context.html_interactions);
@@ -508,9 +519,7 @@ const run = async (
       onsubmit: `event.preventDefault();const _fd=new FormData(this);spin_send_button();view_post('${viewname}', 'interact', _fd, ${dyn_updates ? "null" : "processCopilotResponse"});return false;`,
       class: [
         "form-namespace copilot agent-view",
-        footerInputMode
-          ? "mt-auto sticky-bottom bg-body py-1"
-          : "mt-2",
+        footerInputMode ? "mt-auto sticky-bottom bg-body py-1" : "mt-2",
       ],
       method: "post",
     },
@@ -704,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' });
       }
@@ -749,9 +769,10 @@ 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()
         if(res.response) {
             $(".agent-waiting-indicator").remove();
             $("#copilotinteractions").append(res.response);
@@ -1044,6 +1065,20 @@ const run = async (
         if (a) { try { a.pause(); } catch(e){} a.src = ''; }
       }
     };
+
+    window.share_agent_chat = function(btn, viewname) {
+      const runid = $("input[name=run_id").val()
+      view_post(viewname, 'share_chat', {run_id:runid}, async (data)=>{
+        console.log(data)        
+        const clipboardItemData = {
+          ["text/plain"]: window.location.origin+'/view/'+viewname+'?run_id='+runid+(data.share_token ? "&share_token="+data.share_token:"")
+        };
+        const clipboardItem = new ClipboardItem(clipboardItemData);
+        await navigator.clipboard.write([clipboardItem]);        
+        common_done({notify: "Share link copied to clipboard", remove_delay: 1})
+        
+      })      
+    };
     /* Restore toggle state on load */
     (function() {
       try {
@@ -1166,16 +1201,22 @@ const run = async (
                 i({ class: "fas fa-bars" }),
               )
             : "",
-          span(
-            { class: "flex-grow-1 text-truncate fw-semibold" },
-            headerTitle,
+          span({ class: "flex-grow-1 text-truncate fw-semibold" }, headerTitle),
+          button(
+            {
+              type: "button",
+              style: run ? undefined : { display: "none" },
+              class: "btn btn-sm btn-outline-secondary modern-share",
+              onclick: `share_agent_chat(this, '${viewname}')`,
+              title: req.__("Share chat"),
+            },
+            i({ class: "fas fa-share-alt" }),
           ),
           hasTTS
             ? button(
                 {
                   type: "button",
-                  class:
-                    "btn btn-sm btn-outline-secondary modern-tts-toggle",
+                  class: "btn btn-sm btn-outline-secondary modern-tts-toggle",
                   onclick: `toggle_agent_tts(this, '${viewname}')`,
                   title: req.__("Read responses aloud"),
                   "data-tts-state": "off",
@@ -1199,10 +1240,7 @@ const run = async (
         ? div(
             { class: "modern-chat-noncard d-flex flex-column" },
             modern_chat_header,
-            div(
-              { class: "modern-chat-layout d-flex flex-column" },
-              main_inner,
-            ),
+            div({ class: "modern-chat-layout d-flex flex-column" }, main_inner),
           )
         : layout === "No card"
           ? div({ class: "mx-1" }, main_inner)
@@ -1409,6 +1447,19 @@ const cancel = async (table_id, viewname, config, body, { req, res }) => {
   return;
 };
 
+const share_chat = async (table_id, viewname, config, body, { req, res }) => {
+  const { run_id } = body;
+  const run = await WorkflowRun.findOne({ id: +run_id });
+  if (run.context.share_token)
+    return { json: { share_token: run.context.share_token } };
+  else {
+    if (run.started_by != req.user?.id && !config.shared) return;
+    const rndid = Math.floor(Math.random() * 16777215).toString(16);
+    await run.update({ context: { ...run.context, share_token: rndid } });
+    return { json: { share_token: rndid } };
+  }
+};
+
 const debug_info = async (table_id, viewname, config, body, { req, res }) => {
   const { run_id, triggering_row_id } = body;
   const action =
@@ -1726,6 +1777,7 @@ module.exports = {
     execute_user_action,
     cancel,
     tts,
+    share_chat,
   },
   mobile_render_server_side: true,
 };

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