@saltcorn/agents 0.8.7 → 0.8.9

package/agent-view.js

@@ -50,6 +50,7 @@ const {
   get_skill_instances,
   saveInteractions,
   extractText,
+  stripMarkdownImages,
 } = require("./common");
 const MarkdownIt = require("markdown-it"),
   md = new MarkdownIt({ html: true, breaks: true, linkify: true });
@@ -103,8 +104,13 @@ const configuration_workflow = (req) =>
               {
                 name: "prev_runs_closed",
                 label: "Initially closed",
+                sublabel:
+                  "Only available for Standard / No card layouts. Modern chat uses a hamburger drawer.",
                 type: "Bool",
-                showIf: { show_prev_runs: true },
+                showIf: {
+                  show_prev_runs: true,
+                  layout: ["Standard", "No card"],
+                },
               },
               {
                 name: "stream",
@@ -155,6 +161,20 @@ const configuration_workflow = (req) =>
                   ],
                 },
               },
+              {
+                name: "input_mode",
+                label: "Input position",
+                sublabel:
+                  "Where the message input appears within the chat panel.",
+                type: "String",
+                attributes: {
+                  options: ["Inline", "Footer (sticky)"],
+                },
+                default: "Inline",
+                showIf: {
+                  layout: ["Modern chat", "Modern chat - no card"],
+                },
+              },
               {
                 name: "image_upload",
                 label: "Upload images",
@@ -281,6 +301,7 @@ const run = async (
     audio_recorder,
     layout,
     shared,
+    input_mode,
   },
   state,
   { res, req },
@@ -316,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);
@@ -416,9 +448,9 @@ const run = async (
               interactMarkups.push(
                 wrapSegment(
                   typeof interact.content === "string"
-                    ? md.render(interact.content)
+                    ? md.render(stripMarkdownImages(interact.content))
                     : typeof interact.content?.content === "string"
-                      ? md.render(interact.content.content)
+                      ? md.render(stripMarkdownImages(interact.content.content))
                       : interact.content,
                   action.name,
                   false,
@@ -462,7 +494,8 @@ const run = async (
     runInteractions = interactMarkups.join("");
   }
   const skill_form_widgets = [];
-  for (const skill of get_skill_instances(action.configuration)) {
+  const _skill_instances = get_skill_instances(action.configuration);
+  for (const skill of _skill_instances) {
     if (skill.formWidget)
       skill_form_widgets.push(
         await skill.formWidget({
@@ -472,15 +505,22 @@ const run = async (
         }),
       );
   }
+  const hasTTS = _skill_instances.some(
+    (s) => s.constructor && s.constructor.skill_name === "Text to speech",
+  );
 
   const debugMode = is_debug_mode(action.configuration, req.user);
   const dyn_updates = getState().getConfig("enable_dynamic_updates", true);
 
   const rndid = Math.floor(Math.random() * 16777215).toString(16);
+  const footerInputMode = input_mode === "Footer (sticky)";
   const input_form = form(
     {
       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 mt-2 agent-view"],
+      class: [
+        "form-namespace copilot agent-view",
+        footerInputMode ? "mt-auto sticky-bottom bg-body py-1" : "mt-2",
+      ],
       method: "post",
     },
     input({
@@ -557,17 +597,13 @@ const run = async (
               { class: "modern-sessions-header" },
               div(
                 { class: "d-flex align-items-center" },
-                i({
-                  class: "fas fa-caret-down me-2 session-open-sessions",
-                  onclick: "close_session_list()",
-                }),
                 i({ class: "fas fa-comments me-2 text-primary" }),
                 span({ class: "fw-semibold" }, req.__("Sessions")),
               ),
               button(
                 {
                   type: "button",
-                  class: "btn btn-primary btn-sm rounded-pill px-3",
+                  class: "btn btn-primary btn-sm px-3",
                   onclick: "unset_state_field('run_id', this)",
                   title: "New chat",
                 },
@@ -653,6 +689,10 @@ const run = async (
     : "";
 
   const main_inner = div(
+    {
+      class: "d-flex flex-column flex-grow-1",
+      style: "min-height:0",
+    },
     div(
       {
         class: "open-prev-runs",
@@ -721,6 +761,7 @@ const run = async (
         $("textarea[name=userinput]").val("")
         $('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);
@@ -908,21 +949,328 @@ const run = async (
           `$('form.agent-view input[name=page_load_tag]').val(window._sc_pageloadtag)`,
         ),
       initial_q && domReady("$('form.copilot').submit()"),
+      domReady(`
+  (function() {
+    var VIEWNAME = ${JSON.stringify(viewname)};
+
+    /* Container-responsive: ResizeObserver toggles .chat-wide based on
+       the shell's own width (independent of viewport / theme sidebars).
+       Also sets a precise min-height in footer mode so the input form
+       reaches the visible viewport bottom regardless of any navbar above. */
+    function applyShellFooterHeight(shell) {
+      if (!shell.classList.contains('input-footer')) return;
+      var rect = shell.getBoundingClientRect();
+      var vh = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+      var h = Math.max(280, Math.floor(vh - rect.top - 8));
+      shell.style.minHeight = h + 'px';
+    }
+    document.querySelectorAll('.modern-chat-shell').forEach(function(shell) {
+      if (shell._scChatResizeBound) return;
+      shell._scChatResizeBound = true;
+      var apply = function(w) { shell.classList.toggle('chat-wide', w >= 720); };
+      apply(shell.getBoundingClientRect().width);
+      applyShellFooterHeight(shell);
+      if ('ResizeObserver' in window) {
+        var ro = new ResizeObserver(function(entries) {
+          apply(entries[0].contentRect.width);
+          applyShellFooterHeight(shell);
+        });
+        ro.observe(shell);
+      } else {
+        window.addEventListener('resize', function() {
+          apply(shell.getBoundingClientRect().width);
+          applyShellFooterHeight(shell);
+        });
+      }
+      window.addEventListener('resize', function() { applyShellFooterHeight(shell); });
+      if (window.visualViewport) {
+        window.visualViewport.addEventListener('resize', function() {
+          applyShellFooterHeight(shell);
+        });
+      }
+    });
+
+    /* Clean Bootstrap-leftover backdrop/styles after pjax view re-render */
+    function cleanupOffcanvasState() {
+      document.querySelectorAll('.offcanvas-backdrop').forEach(function(el) { el.remove(); });
+      document.body.style.removeProperty('overflow');
+      document.body.style.removeProperty('padding-right');
+      document.body.classList.remove('modal-open');
+    }
+    if (!window._scAgentOffcanvasCleanupBound) {
+      $(document).on('pjaxlinks_loaded', cleanupOffcanvasState);
+      window._scAgentOffcanvasCleanupBound = true;
+    }
+    /* Hide offcanvas when user picks a session from inside the drawer */
+    if (!window._scAgentOffcanvasClickBound) {
+      document.addEventListener('click', function(e) {
+        var trigger = e.target.closest(
+          '.modern-sessions-offcanvas .prevcopilotrun, ' +
+          '.modern-sessions-offcanvas .modern-sessions-header button.btn-primary'
+        );
+        if (!trigger) return;
+        var ofc = trigger.closest('.offcanvas');
+        if (!ofc || !window.bootstrap) return;
+        var inst = bootstrap.Offcanvas.getInstance(ofc);
+        if (inst) inst.hide();
+      });
+      window._scAgentOffcanvasClickBound = true;
+    }
+
+    /* === TTS === */
+    function getSharedAudio() {
+      if (!window._ttsSharedAudio) {
+        var a = new Audio();
+        a.preload = 'auto';
+        a.className = 'agent-tts-audio d-none';
+        document.body.appendChild(a);
+        window._ttsSharedAudio = a;
+      }
+      return window._ttsSharedAudio;
+    }
+    function primeTtsUnlock() {
+      if (window._ttsUnlocked) return;
+      try {
+        var a = getSharedAudio();
+        a.src = 'data:audio/mpeg;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA//tQxAADB8AhSmxhIIEVCSiJrDCQBTcu3UrAIwUdkRgQbFAZC1CQEwTJ9mjRvBA4UOLD8nKVOWfh+UlK3z/177OXrfOdKl7pyn3Xf//FJ';
+        var p = a.play();
+        if (p && p.catch) p.catch(function() {});
+        a.pause();
+        a.currentTime = 0;
+        window._ttsUnlocked = true;
+      } catch(e) {}
+    }
+    window.toggle_agent_tts = function(btn, viewname) {
+      var key = 'agent-tts-' + (viewname || VIEWNAME);
+      var newOn = btn.getAttribute('data-tts-state') !== 'on';
+      btn.setAttribute('data-tts-state', newOn ? 'on' : 'off');
+      btn.classList.toggle('bg-primary-subtle', newOn);
+      btn.classList.toggle('text-primary', newOn);
+      try { localStorage.setItem(key, newOn ? '1' : '0'); } catch(e){}
+      if (newOn) {
+        primeTtsUnlock();
+      } else {
+        var a = window._ttsSharedAudio;
+        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 {
+        var btn = document.querySelector('.modern-tts-toggle');
+        if (!btn) return;
+        if (localStorage.getItem('agent-tts-' + VIEWNAME) === '1') {
+          btn.setAttribute('data-tts-state', 'on');
+          btn.classList.add('bg-primary-subtle');
+          btn.classList.add('text-primary');
+        }
+      } catch(e) {}
+    })();
+
+    function ttsForBubble(bubble) {
+      if (!bubble || bubble.dataset.ttsDispatched) return;
+      var btn = document.querySelector('.modern-tts-toggle[data-tts-state="on"]');
+      if (!btn) return;
+      // Skip bubbles that are just tool-rendered output (image card etc.) —
+      // they have a Bootstrap card inside and no meaningful narrative text.
+      if (bubble.querySelector('.card.bg-secondary-subtle')) return;
+      bubble.dataset.ttsDispatched = '1';
+      var text = (bubble.innerText || bubble.textContent || '').trim();
+      if (!text || text.length < 2) return;
+      var fd = new FormData();
+      fd.append('text', text);
+      var csrf = ($('input[name=_csrf]').first().val()) || '';
+      fd.append('_csrf', csrf);
+      fetch('/view/' + VIEWNAME + '/tts', {
+        method: 'POST',
+        body: fd,
+        credentials: 'same-origin',
+      }).then(function(res) {
+        if (!res.ok) { res.text().then(function(t){ console.warn('tts http ' + res.status + ': ' + t); }); return null; }
+        var ct = res.headers.get('content-type') || '';
+        if (ct.indexOf('audio') !== 0) { res.text().then(function(t){ console.warn('tts non-audio:', t); }); return null; }
+        return res.blob();
+      }).then(function(blob) {
+        if (!blob) return;
+        var url = URL.createObjectURL(blob);
+        var a = getSharedAudio();
+        a.src = url;
+        var p = a.play();
+        if (p && p.catch) p.catch(function(err) { console.warn('tts play blocked:', err); });
+        var clean = function() { URL.revokeObjectURL(url); a.removeEventListener('ended', clean); };
+        a.addEventListener('ended', clean);
+      }).catch(function(err) { console.warn('tts fetch err:', err); });
+    }
+
+    var interactionsRoot = document.getElementById('copilotinteractions');
+    if (interactionsRoot && !interactionsRoot._scTtsObserver) {
+      var mo = new MutationObserver(function(muts) {
+        muts.forEach(function(m) {
+          m.addedNodes && m.addedNodes.forEach(function(n) {
+            if (!n || n.nodeType !== 1) return;
+            if (n.matches && n.matches('.chat-message.chat-assistant .chat-bubble')) {
+              ttsForBubble(n);
+            }
+            if (n.matches && n.matches('.chat-message.chat-assistant')) {
+              var b = n.querySelector('.chat-bubble');
+              if (b) ttsForBubble(b);
+            }
+            if (n.querySelectorAll) {
+              n.querySelectorAll('.chat-message.chat-assistant .chat-bubble').forEach(ttsForBubble);
+            }
+          });
+        });
+      });
+      mo.observe(interactionsRoot, { childList: true, subtree: true });
+      interactionsRoot._scTtsObserver = mo;
+    }
+
+    /* PWA-standalone image download via Web Share API */
+    function isPwaStandalone() {
+      return (window.navigator.standalone === true) ||
+             (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches);
+    }
+    if (!window._scAgentImageShareBound) {
+      document.addEventListener('click', function(e) {
+        var link = e.target.closest('.agent-image-download');
+        if (!link) return;
+        if (!isPwaStandalone()) return;
+        if (!navigator.share || typeof navigator.canShare !== 'function') return;
+        e.preventDefault();
+        e.stopPropagation();
+        var url = link.getAttribute('href');
+        var dlname = link.getAttribute('download') || ('image-' + Date.now() + '.png');
+        fetch(url).then(function(r) { return r.blob(); }).then(function(blob) {
+          var file = new File([blob], dlname, { type: blob.type });
+          if (!navigator.canShare({ files: [file] })) { window.open(url, '_blank'); return; }
+          return navigator.share({ files: [file], title: dlname });
+        }).catch(function(err) { console.warn('share err', err); });
+      }, true);
+      window._scAgentImageShareBound = true;
+    }
+  })();
+`),
     ),
   );
   const isModern = layout && layout.startsWith("Modern chat");
+  const viewObj = View.findOne({ name: viewname });
+  const headerTitle = viewObj?.description?.trim() || action.name || "";
+  const modern_chat_header =
+    isModern && (show_prev_runs || hasTTS)
+      ? div(
+          {
+            class:
+              "modern-chat-header d-flex align-items-center gap-2 px-3 py-2 border-bottom flex-shrink-0",
+          },
+          show_prev_runs
+            ? button(
+                {
+                  type: "button",
+                  class:
+                    "btn btn-sm btn-outline-secondary modern-chat-hamburger",
+                  "data-bs-toggle": "offcanvas",
+                  "data-bs-target": "#agent-sessions-" + rndid,
+                  "aria-controls": "agent-sessions-" + rndid,
+                  title: req.__("Sessions"),
+                },
+                i({ class: "fas fa-bars" }),
+              )
+            : "",
+          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",
+                  onclick: `toggle_agent_tts(this, '${viewname}')`,
+                  title: req.__("Read responses aloud"),
+                  "data-tts-state": "off",
+                },
+                i({ class: "fas fa-volume-up" }),
+              )
+            : "",
+        )
+      : "";
   const main_chat =
     layout === "Modern chat"
       ? div(
-          { class: "card" },
-          div({ class: "card-body modern-chat-layout" }, main_inner),
+          { class: "card modern-chat-card d-flex flex-column" },
+          modern_chat_header,
+          div(
+            { class: "card-body modern-chat-layout p-0 d-flex flex-column" },
+            main_inner,
+          ),
         )
       : layout === "Modern chat - no card"
-        ? div({ class: "modern-chat-layout" }, main_inner)
+        ? div(
+            { class: "modern-chat-noncard d-flex flex-column" },
+            modern_chat_header,
+            div({ class: "modern-chat-layout d-flex flex-column" }, main_inner),
+          )
         : layout === "No card"
           ? div({ class: "mx-1" }, main_inner)
           : div({ class: "card" }, div({ class: "card-body" }, main_inner));
 
+  if (isModern) {
+    const shellExtraClass =
+      input_mode === "Footer (sticky)" ? " input-footer" : "";
+    const mainColumnAttrs = {
+      class: "modern-chat-main flex-grow-1 d-flex flex-column",
+      style: "min-width:0",
+    };
+    return show_prev_runs
+      ? div(
+          { class: "modern-chat-shell d-flex gap-4" + shellExtraClass },
+          div(
+            {
+              class:
+                "offcanvas offcanvas-start modern-sessions-offcanvas border-end pe-3" +
+                (prev_runs_closed ? " sessions-initially-closed" : ""),
+              id: "agent-sessions-" + rndid,
+              tabindex: "-1",
+              "aria-labelledby": "agent-sessions-label-" + rndid,
+            },
+            div(
+              { class: "offcanvas-body p-2" },
+              div({ class: "prev-runs-list" }, prev_runs_side_bar),
+            ),
+          ),
+          div(mainColumnAttrs, main_chat),
+        )
+      : div(
+          {
+            class:
+              "modern-chat-shell modern-chat-shell-no-sidebar d-flex" +
+              shellExtraClass,
+          },
+          div(mainColumnAttrs, main_chat),
+        );
+  }
+
   return show_prev_runs
     ? div(
         { class: "row gx-3" },
@@ -1088,6 +1436,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 =
@@ -1335,6 +1696,60 @@ const execute_user_action = async (
   };
 };
 
+// Text-to-speech route. Streams audio directly to the browser via
+// llm_text_to_speech with stream:true so playback can start as soon as the
+// first chunk arrives. The TextToSpeech skill must be configured on the
+// referenced agent action.
+const tts = async (table_id, viewname, config, body, { req, res }) => {
+  const { text } = body;
+  if (!text || !text.trim()) return { json: { error: "no text" } };
+  const stream_fn = getState().functions.llm_text_to_speech;
+  if (!stream_fn)
+    return {
+      json: {
+        error:
+          "llm_text_to_speech not registered — update @saltcorn/large-language-model to >= 1.1.0",
+      },
+    };
+  const action =
+    config.agent_action || (await Trigger.findOne({ id: config.action_id }));
+  const skills = get_skill_instances(action.configuration);
+  const tts_skill = skills.find(
+    (s) => s.constructor && s.constructor.skill_name === "Text to speech",
+  );
+  if (!tts_skill) return { json: { error: "tts skill not configured" } };
+  const ttsOpts = {
+    voice: tts_skill.voice,
+    speed: tts_skill.speed,
+    response_format: tts_skill.format,
+    instructions: tts_skill.instructions,
+    stream: true,
+  };
+  try {
+    const result = await stream_fn.run(text, ttsOpts);
+    const ext = result?.output_format || tts_skill.format || "mp3";
+    const mime = ext === "mp3" ? "audio/mpeg" : `audio/${ext}`;
+    res.setHeader("Content-Type", mime);
+    res.setHeader("Cache-Control", "no-store");
+    res.setHeader("X-Accel-Buffering", "no");
+    const reader = result.stream.getReader();
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      if (!res.write(Buffer.from(value))) {
+        await new Promise((r) => res.once("drain", r));
+      }
+    }
+    res.end();
+  } catch (e) {
+    getState().log(2, "tts stream pump error: " + (e?.message || e));
+    try {
+      res.end();
+    } catch (_) {}
+  }
+  return;
+};
+
 module.exports = {
   name: "Agent Chat",
   configuration_workflow,
@@ -1350,6 +1765,8 @@ module.exports = {
     skillroute,
     execute_user_action,
     cancel,
+    tts,
+    share_chat,
   },
   mobile_render_server_side: true,
 };

package/agents.css

@@ -190,7 +190,7 @@ p.prevrun_content {
 }
 .modern-chat-layout .chat-bubble {
   padding: 0.6rem 1rem;
-  border-radius: 1rem;
+  border-radius: 0.5rem;
   line-height: 1.5;
   word-wrap: break-word;
   overflow-wrap: break-word;
@@ -198,7 +198,7 @@ p.prevrun_content {
 .modern-chat-layout .chat-user .chat-bubble {
   background: #0d6efd;
   color: #fff;
-  border-bottom-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.15rem;
 }
 .modern-chat-layout .chat-assistant .chat-bubble {
   background: var(
@@ -206,7 +206,7 @@ p.prevrun_content {
     var(--bs-secondary-bg-subtle, #f0f2f5)
   );
   color: var(--tblr-body-color, var(--bs-body-color, #212529));
-  border-bottom-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.15rem;
 }
 /* Markdown content inside bubbles */
 .modern-chat-layout .chat-bubble h1,
@@ -305,7 +305,7 @@ p.prevrun_content {
   margin-top: 0.5rem;
 }
 .modern-chat-layout .copilot-entry textarea {
-  border-radius: 1.5rem;
+  border-radius: 0.5rem;
   padding: 0.6rem 1rem;
   resize: none;
 }
@@ -325,23 +325,24 @@ p.prevrun_content {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.6rem 0.75rem;
-  margin-bottom: 0.75rem;
+  padding: 0.5rem 0.6rem;
+  margin-bottom: 0.5rem;
   background: var(
     --tblr-secondary-bg-subtle,
     var(--bs-secondary-bg-subtle, #f8f9fa)
   );
-  border-radius: 0.75rem;
+  border-radius: 0.3rem;
   border-bottom: 1px solid
     var(--tblr-border-color, var(--bs-border-color, #dee2e6));
   position: sticky;
   top: 0;
   z-index: 1;
 }
+.modern-sessions-header .btn { border-radius: 0.3rem; }
 .modern-sessions .modern-session-item {
-  border-radius: 0.75rem;
-  padding: 0.65rem 0.75rem;
-  margin-bottom: 0.4rem;
+  border-radius: 0.3rem;
+  padding: 0.55rem 0.65rem;
+  margin-bottom: 0.35rem;
   border: 1px solid var(--tblr-border-color, var(--bs-border-color, #dee2e6));
   cursor: pointer;
   transition: all 0.15s ease;
@@ -398,4 +399,83 @@ p.prevrun_content {
 .copy-to-clipboard-elem.copy-success::before {
   content: "✓";
   color: green;
-}
+}
+
+/* === Modern-chat container-responsive shell ===
+   Bootstrap offcanvas is viewport-driven; we want a container-driven
+   version so themes with their own sidebars don't break the chat
+   layout. A ResizeObserver toggles .chat-wide on .modern-chat-shell at
+   >= 720px container width and the rules below override Bootstrap's
+   offcanvas hiding so it renders inline as a column.
+
+   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;
+  transform: 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; }
+
+/* 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; }
+
+/* Footer mode: the shell's min-height is set dynamically by JS to fill
+   the visible viewport from its top edge down to the bottom (so a navbar
+   above doesn't push the footer off-screen and an embed without navbar
+   doesn't leave a giant gap). The fallback calc() is used until JS runs.
+   Bootstrap has no min-h-0 utility and no descendant-targeted flex-grow,
+   so the four rules below are required to propagate the shell's height
+   down through the card and card-body to the chat-layout. */
+.modern-chat-shell.input-footer { min-height: calc(100dvh - 4rem); }
+.modern-chat-shell.input-footer .modern-chat-card,
+.modern-chat-shell.input-footer .modern-chat-noncard {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.modern-chat-shell.input-footer .modern-chat-card .card-body {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.modern-chat-shell.input-footer #copilotinteractions:empty { display: block; }
+
+/* Narrow-mode bleed: when the chat container is mobile-narrow, eat the
+   parent's gutter padding so the chat uses (nearly) the full screen
+   width — Bootstrap has no automatic mobile-only negative-margin utility. */
+.modern-chat-shell:not(.chat-wide) {
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
+}
+
+/* Generated-image hover-reveal download/share overlay (Bootstrap has no
+   hover-fade utility). */
+.agent-generated-image { position: relative; display: inline-block; }
+.agent-image-download {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  opacity: 0;
+  transition: opacity 0.15s ease-in-out;
+  z-index: 5;
+}
+.agent-image-download:hover { color: #fff; background: rgba(0, 0, 0, 0.75); }
+.agent-generated-image:hover .agent-image-download,
+.agent-image-download:focus { opacity: 1; }
+@media (hover: none) { .agent-image-download { opacity: 1; } }

package/common.js

@@ -33,6 +33,7 @@ const get_skills = () => {
     require("./skills/Table"),
     require("./skills/PreloadData"),
     require("./skills/GenerateImage"),
+    require("./skills/TextToSpeech"),
     require("./skills/ModelContextProtocol"),
     require("./skills/PromptPicker"),
     require("./skills/ModelPicker"),
@@ -244,6 +245,14 @@ function extractText(html) {
   return html.replace(/<[^>]*>/g, '');
 }
 
+// Strip markdown image syntax ![alt](url) from assistant text so that the LLM
+// can't leak a broken/duplicate image reference next to a tool-rendered image
+// bubble. Plain links are preserved.
+function stripMarkdownImages(s) {
+  if (typeof s !== "string") return s;
+  return s.replace(/!\[[^\]]*\]\([^)]*\)/g, "").trim();
+}
+
 const process_interaction = async (
   run,
   config,
@@ -359,7 +368,7 @@ const process_interaction = async (
       add_response(
         req?.disable_markdown_render
           ? answer
-          : wrapSegment(md.render(answer.content), agent_label, false, layout),
+          : wrapSegment(md.render(stripMarkdownImages(answer.content)), agent_label, false, layout),
       );
   }
 
@@ -372,7 +381,7 @@ const process_interaction = async (
       add_response(
         req?.disable_markdown_render
           ? answer
-          : wrapSegment(md.render(answer.content), agent_label, false, layout),
+          : wrapSegment(md.render(stripMarkdownImages(answer.content)), agent_label, false, layout),
       );
     //const actions = [];
     let hasResult = false;
@@ -708,7 +717,7 @@ const process_interaction = async (
     add_response(
       req?.disable_markdown_render
         ? answer
-        : wrapSegment(md.render(answer), agent_label, false, layout),
+        : wrapSegment(md.render(stripMarkdownImages(answer)), agent_label, false, layout),
     );
   if (dyn_updates && !is_sub_agent)
     getState().emitDynamicUpdate(
@@ -752,5 +761,6 @@ module.exports = {
   is_debug_mode,
   get_initial_interactions,
   nubBy,
-  extractText
+  extractText,
+  stripMarkdownImages,
 };

package/package.json

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

package/skills/TextToSpeech.js

@@ -0,0 +1,93 @@
+const { getState } = require("@saltcorn/data/db/state");
+const File = require("@saltcorn/data/models/file");
+
+class TextToSpeech {
+  static skill_name = "Text to speech";
+
+  get skill_label() {
+    return "Text to speech";
+  }
+
+  constructor(cfg) {
+    Object.assign(this, cfg);
+  }
+
+  static async configFields() {
+    return [
+      {
+        name: "voice",
+        label: "Voice",
+        type: "String",
+        required: true,
+        attributes: {
+          options: [
+            "alloy",
+            "ash",
+            "ballad",
+            "coral",
+            "echo",
+            "fable",
+            "nova",
+            "onyx",
+            "sage",
+            "shimmer",
+            "verse",
+          ],
+        },
+        default: "nova",
+      },
+      {
+        name: "speed",
+        label: "Speed",
+        type: "Float",
+        attributes: { min: 0.25, max: 4, decimal_places: 2 },
+        default: 1.0,
+      },
+      {
+        name: "format",
+        label: "Audio format",
+        type: "String",
+        attributes: { options: ["mp3", "opus", "aac", "flac", "wav"] },
+        default: "mp3",
+      },
+      {
+        name: "instructions",
+        label: "Voice instructions",
+        type: "String",
+        fieldview: "textarea",
+        sublabel:
+          "Optional. Only used with gpt-4o-mini-tts. E.g. 'Speak slowly and friendly.'",
+      },
+    ];
+  }
+
+  // Server-side synthesis helper, called from agent-view.js tts route
+  // (not exposed as an LLM tool — the agent UI generates audio for the
+  // verbatim final assistant text after each response).
+  async synthesize(text, req) {
+    const fn = getState().functions.llm_text_to_speech;
+    if (!fn)
+      throw new Error(
+        "LLM plugin does not provide llm_text_to_speech (please update @saltcorn/large-language-model to >= 1.1.0)",
+      );
+    if (!text || !text.trim()) throw new Error("No text to speak.");
+    const result = await fn.run(text, {
+      voice: this.voice,
+      speed: this.speed,
+      response_format: this.format,
+      instructions: this.instructions,
+    });
+    const ext = result?.output_format || this.format || "mp3";
+    const mime = ext === "mp3" ? "audio/mpeg" : `audio/${ext}`;
+    const file = await File.from_contents(
+      `tts.${ext}`,
+      mime,
+      result.buffer,
+      req?.user?.id,
+      100,
+    );
+    return { filename: file.path_to_serve };
+  }
+}
+
+module.exports = TextToSpeech;