@saltcorn/agents 0.8.3 → 0.8.5

package/agent-view.js

@@ -49,11 +49,13 @@ const {
   get_initial_interactions,
   get_skill_instances,
   saveInteractions,
+  extractText,
 } = require("./common");
 const MarkdownIt = require("markdown-it"),
   md = new MarkdownIt({ html: true, breaks: true, linkify: true });
 const { isWeb, escapeHtml } = require("@saltcorn/data/utils");
 const path = require("path");
+const fs = require("fs");
 
 const configuration_workflow = (req) =>
   new Workflow({
@@ -259,6 +261,11 @@ const realTimeCollabScript = (viewname, rndid, layout) => {
   );
 };
 
+const agents_css = fs.readFileSync(
+  path.resolve(__dirname, "agents.css"),
+  "utf8",
+);
+
 const run = async (
   table_id,
   viewname,
@@ -300,12 +307,13 @@ const run = async (
           },
           { orderBy: "started_at", orderDesc: true, limit: 30 },
         )
-      ).filter((r) => r.context.interactions)
+      ).filter((r) => r.context.interactions || r.context.html_interactions)
     : null;
 
   const cfgMsg = incompleteCfgMsg();
   if (cfgMsg) return cfgMsg;
   let runInteractions = "";
+  let hasInputForm = true;
 
   const initial_q = state.run_id ? undefined : state._q;
   if (state.run_id) {
@@ -319,6 +327,9 @@ const run = async (
     const interactMarkups = [];
     if (run.context.html_interactions) {
       interactMarkups.push(...run.context.html_interactions);
+      // no input if interactions deleted
+      if (!run.context.interactions && run.context.html_interactions.length)
+        hasInputForm = false;
     } else
       for (const interact of run.context.interactions) {
         //legacy
@@ -590,11 +601,11 @@ const run = async (
             ),
         prevRuns.map((run) => {
           const isActive = state.run_id && +state.run_id === run.id;
-          const preview = escapeHtml(
-            run.context.interactions
-              .find((ix) => typeof ix?.content === "string")
-              ?.content?.substring?.(0, 80),
-          );
+          const previewHtml =
+            (run.context.interactions || []).find(
+              (ix) => typeof ix?.content === "string",
+            )?.content || extractText(run.context.html_interactions[0] || "");
+          const preview = escapeHtml(previewHtml?.substring?.(0, 80));
           return isModernSidebar
             ? div(
                 {
@@ -655,301 +666,8 @@ const run = async (
     ),
     div({ id: "copilotinteractions" }, runInteractions),
     stream ? div({ class: "next_response_scratch" }) : "",
-    input_form,
-    style(
-      `div.interaction-segment:not(:first-child) {border-top: 1px solid #e7e7e7; }
-              div.interaction-segment {padding-top: 5px;padding-bottom: 5px;}
-              div.interaction-segment p {margin-bottom: 0px;}
-              div.interaction-segment div.card {margin-top: 0.5rem;}
-              div.interaction-segment.to-right {
-              display: flex;             
-    flex-direction: row-reverse;
-}
-    div.interaction-segment.to-right div.badgewrap {
-              display: flex;             
-    flex-direction: row-reverse;
-}
-            div.prevcopilotrun:hover {cursor: pointer; background-color: var(--tblr-secondary-bg-subtle, var(--bs-secondary-bg-subtle, gray));}
-            div.prevcopilotrun i.fa-trash-alt {display: none;}
-            div.prevcopilotrun:hover i.fa-trash-alt {display: block;}
-            .copilot-entry .submit-button:hover { cursor: pointer}
-            .copilot-entry span.attach_agent_image_wrap i:hover { cursor: pointer}
-
-            .copilot-entry .submit-button {
-              position: relative; 
-              top: -1.8rem;
-              left: 0.1rem;              
-            }
-            .copilot-entry #audioinputicon {
-              position: relative; 
-              top: -1.8rem;
-              right: 0.7rem;
-              cursor: pointer;
-              float: right;
-            }
-            .copilot-entry .debugicon {
-              position: relative; 
-              top: -1.8rem;
-              left: 0.1rem;
-              cursor: pointer;
-            }
-            .copilot-entry .cancelbtn {
-              position: relative; 
-              top: -1.8rem;
-              left: 0.1rem;
-              cursor: pointer;
-            }
-            .copilot-entry .skill-form-widget {
-              position: relative; 
-              top: -2rem;
-              left: 0.4rem;
-              display: inline;
-            }
-              .session-open-sessions, .open-prev-runs {
-              cursor: pointer;
-              }
-              .copilot-entry span.attach_agent_image_wrap {
-              position: relative;
-              top: -1.8rem;
-              left: 0.2rem;
-            }
-              .copilot-entry.dragover {
-              outline: 2px dashed var(--tblr-primary, #0054a6);
-              outline-offset: -2px;
-              background: var(--tblr-primary-bg-subtle, rgba(0, 84, 166, 0.05));
-              border-radius: 0.25rem;
-            }
-              .copilot-entry .explainer {
-              position: relative; 
-              top: -1.2rem;    
-              display: block;                        
-            }
-              .col-0 {
-              width: 0%
-              }
-            .copilot-entry {margin-bottom: -1.25rem; margin-top: 1rem;}
-            p.prevrun_content {
-               white-space: nowrap;
-    overflow: hidden;
-    margin-bottom: 0px;
-    display: block;
-    text-overflow: ellipsis;}
-            /* Typing / Waiting Indicator */
-            .agent-waiting-indicator { display:flex; align-items:center; padding:0.75rem 1rem; }
-            .typing-dots { display:flex; gap:4px; align-items:center; }
-            .typing-dots span { width:8px; height:8px; border-radius:50%; background:#6c757d; animation:typingBounce 1.4s infinite ease-in-out both; }
-            .typing-dots span:nth-child(1) { animation-delay:-0.32s; }
-            .typing-dots span:nth-child(2) { animation-delay:-0.16s; }
-            .typing-dots span:nth-child(3) { animation-delay:0s; }
-            @keyframes typingBounce { 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }
-            /* Modern Chat Layout */
-            .modern-chat-layout {
-              display: flex;
-              flex-direction: column;
-              height: 100%;
-            }
-            .modern-chat-layout #copilotinteractions {
-              max-height: 70vh;
-              overflow-y: auto;
-              padding: 1rem;
-              display: flex;
-              flex-direction: column;
-              gap: 0.75rem;
-            }
-            .modern-chat-layout .chat-message {
-              display: flex;
-              gap: 0.5rem;
-              max-width: 85%;
-              align-items: flex-start;
-            }
-            .modern-chat-layout .chat-message.chat-user {
-              align-self: flex-end;
-              flex-direction: row-reverse;
-            }
-            .modern-chat-layout .chat-message.chat-assistant {
-              align-self: flex-start;
-            }
-            .modern-chat-layout .chat-avatar {
-              width: 2rem;
-              height: 2rem;
-              border-radius: 50%;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              flex-shrink: 0;
-              font-size: 0.85rem;
-              background: var(--tblr-secondary-bg-subtle, var(--bs-secondary-bg-subtle, #e9ecef));
-              color: var(--tblr-secondary-color, var(--bs-secondary-color, #6c757d));
-            }
-            .modern-chat-layout .chat-user .chat-avatar {
-              background: #0d6efd;
-              color: #fff;
-            }
-            .modern-chat-layout .chat-bubble {
-              padding: 0.6rem 1rem;
-              border-radius: 1rem;
-              line-height: 1.5;
-              word-wrap: break-word;
-              overflow-wrap: break-word;
-            }
-            .modern-chat-layout .chat-user .chat-bubble {
-              background: #0d6efd;
-              color: #fff;
-              border-bottom-right-radius: 0.25rem;
-            }
-            .modern-chat-layout .chat-assistant .chat-bubble {
-              background: var(--tblr-secondary-bg-subtle, var(--bs-secondary-bg-subtle, #f0f2f5));
-              color: var(--tblr-body-color, var(--bs-body-color, #212529));
-              border-bottom-left-radius: 0.25rem;
-            }
-            /* Markdown content inside bubbles */
-            .modern-chat-layout .chat-bubble h1,
-            .modern-chat-layout .chat-bubble h2,
-            .modern-chat-layout .chat-bubble h3,
-            .modern-chat-layout .chat-bubble h4 {
-              margin-top: 0.5rem;
-              margin-bottom: 0.25rem;
-            }
-            .modern-chat-layout .chat-bubble h1 { font-size: 1.3rem; }
-            .modern-chat-layout .chat-bubble h2 { font-size: 1.15rem; }
-            .modern-chat-layout .chat-bubble h3 { font-size: 1.05rem; }
-            .modern-chat-layout .chat-bubble h4 { font-size: 1rem; }
-            .modern-chat-layout .chat-bubble p {
-              margin-bottom: 0.4rem;
-            }
-            .modern-chat-layout .chat-bubble p:last-child {
-              margin-bottom: 0;
-            }
-            .modern-chat-layout .chat-bubble ul,
-            .modern-chat-layout .chat-bubble ol {
-              padding-left: 1.5rem;
-              margin-bottom: 0.4rem;
-            }
-            .modern-chat-layout .chat-bubble table {
-              width: 100%;
-              border-collapse: collapse;
-              margin: 0.5rem 0;
-              font-size: 0.9em;
-            }
-            .modern-chat-layout .chat-bubble table th,
-            .modern-chat-layout .chat-bubble table td {
-              border: 1px solid rgba(0,0,0,0.15);
-              padding: 0.3rem 0.5rem;
-            }
-            .modern-chat-layout .chat-bubble table th {
-              background: rgba(0,0,0,0.05);
-              font-weight: 600;
-            }
-            .modern-chat-layout .chat-bubble pre {
-              background: rgba(0,0,0,0.06);
-              padding: 0.5rem;
-              border-radius: 0.5rem;
-              overflow-x: auto;
-              margin: 0.4rem 0;
-            }
-            .modern-chat-layout .chat-bubble code {
-              font-size: 0.88em;
-            }
-            .modern-chat-layout .chat-bubble p > code {
-              background: rgba(0,0,0,0.06);
-              padding: 0.1rem 0.3rem;
-              border-radius: 0.25rem;
-            }
-            .modern-chat-layout .chat-user .chat-bubble pre {
-              background: rgba(255,255,255,0.15);
-            }
-            .modern-chat-layout .chat-user .chat-bubble p > code {
-              background: rgba(255,255,255,0.15);
-            }
-            .modern-chat-layout .chat-user .chat-bubble table th,
-            .modern-chat-layout .chat-user .chat-bubble table td {
-              border-color: rgba(255,255,255,0.25);
-            }
-            .modern-chat-layout .chat-user .chat-bubble table th {
-              background: rgba(255,255,255,0.1);
-            }
-            /* Skill attribution badge */
-            .modern-chat-layout .chat-bubble .badge.bg-info {
-              display: inline-block;
-              margin-bottom: 6px;
-              font-size: 0.7rem;
-              font-weight: 600;
-              letter-spacing: 0.3px;
-              text-transform: uppercase;
-              opacity: 0.85;
-            }
-            .modern-chat-layout .chat-bubble .card.bg-secondary-subtle {
-              border: none;
-              background-color: rgba(0,0,0,0.03) !important;
-              margin-bottom: 0.5rem;
-            }
-            /* Input area for modern chat */
-            .modern-chat-layout .copilot-entry {
-              border-top: 1px solid var(--tblr-border-color, var(--bs-border-color, #dee2e6));
-              padding-top: 0.75rem;
-              margin-top: 0.5rem;
-            }
-            .modern-chat-layout .copilot-entry textarea {
-              border-radius: 1.5rem;
-              padding: 0.6rem 1rem;
-              resize: none;
-            }
-            /* Streaming scratch in modern chat */
-            .modern-chat-layout .next_response_scratch {
-              padding: 0 1rem;
-            }
-            .modern-chat-layout .next_response_scratch:not(:empty) {
-              margin-bottom: 0.5rem;
-            }
-            /* Interaction segment (tool cards) inside modern chat */
-            .modern-chat-layout .interaction-segment {
-              border-top: none;
-            }
-            /* Modern Sessions Sidebar */
-            .modern-sessions-header {
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              padding: 0.6rem 0.75rem;
-              margin-bottom: 0.75rem;
-              background: var(--tblr-secondary-bg-subtle, var(--bs-secondary-bg-subtle, #f8f9fa));
-              border-radius: 0.75rem;
-              border-bottom: 1px solid var(--tblr-border-color, var(--bs-border-color, #dee2e6));
-              position: sticky;
-              top: 0;
-              z-index: 1;
-            }
-            .modern-sessions .modern-session-item {
-              border-radius: 0.75rem;
-              padding: 0.65rem 0.75rem;
-              margin-bottom: 0.4rem;
-              border: 1px solid var(--tblr-border-color, var(--bs-border-color, #dee2e6));
-              cursor: pointer;
-              transition: all 0.15s ease;
-            }
-            .modern-sessions .modern-session-item:hover {
-              box-shadow: 0 2px 8px rgba(0,0,0,0.07);
-              background-color: var(--tblr-secondary-bg-subtle, var(--bs-secondary-bg-subtle, #f8f9fa));
-            }
-            .modern-sessions .modern-session-item.active-session {
-              border-left: 3px solid #0d6efd;
-              background-color: rgba(13, 110, 253, 0.05);
-            }
-            .modern-sessions .modern-session-item i.fa-trash-alt {
-              display: none;
-              font-size: 0.8em;
-            }
-            .modern-sessions .modern-session-item:hover i.fa-trash-alt {
-              display: inline;
-            }
-            .modern-sessions .modern-session-item .prevrun_content {
-              font-size: 0.85em;
-              color: var(--tblr-secondary-color, var(--bs-secondary-color, #6c757d));
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-            }`,
-    ),
+    hasInputForm && input_form,
+    style(agents_css),
     script(domReady(`$( "#inputuserinput" ).autogrow({paddingBottom: 20});`)),
     script(
       `
@@ -1154,7 +872,37 @@ const run = async (
         : '<div class="agent-waiting-indicator"><div class="typing-dots"><span></span><span></span><span></span></div></div>';
       $('div.next_response_scratch').before(indicator);
       scrollAgentToBottom();
-    };`,
+    };
+    document.addEventListener('click', async (e) => {
+  const target = e.target.closest('.copy-to-clipboard-elem');
+  if (!target) return;
+
+  // Check if the click was in the top-right corner where the icon is
+  const rect = target.getBoundingClientRect();
+  const clickX = e.clientX - rect.left;
+  const clickY = e.clientY - rect.top;
+  
+  // Icon is at top: 4px, right: 4px, ~16px size — give a generous hit area
+  const iconHitArea = 24;
+  const isIconClick = 
+    clickX >= rect.width - iconHitArea && 
+    clickX <= rect.width &&
+    clickY >= 0 && 
+    clickY <= iconHitArea;
+
+  if (!isIconClick) return;
+
+  e.stopPropagation();
+  e.preventDefault();
+
+  try {
+    await navigator.clipboard.writeText(target.innerText);
+    target.classList.add('copy-success');
+    setTimeout(() => target.classList.remove('copy-success'), 1000);
+  } catch (err) {
+    console.error('Failed to copy:', err);
+  }
+});`,
       stream &&
         domReady(
           `$('form.agent-view input[name=page_load_tag]').val(window._sc_pageloadtag)`,

package/agents.css

@@ -0,0 +1,401 @@
+div.interaction-segment:not(:first-child) {
+  border-top: 1px solid #e7e7e7;
+}
+div.interaction-segment {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+div.interaction-segment p {
+  margin-bottom: 0px;
+}
+div.interaction-segment div.card {
+  margin-top: 0.5rem;
+}
+div.interaction-segment.to-right {
+  display: flex;
+  flex-direction: row-reverse;
+}
+div.interaction-segment.to-right div.badgewrap {
+  display: flex;
+  flex-direction: row-reverse;
+}
+div.prevcopilotrun:hover {
+  cursor: pointer;
+  background-color: var(
+    --tblr-secondary-bg-subtle,
+    var(--bs-secondary-bg-subtle, gray)
+  );
+}
+div.prevcopilotrun i.fa-trash-alt {
+  display: none;
+}
+div.prevcopilotrun:hover i.fa-trash-alt {
+  display: block;
+}
+.copilot-entry .submit-button:hover {
+  cursor: pointer;
+}
+.copilot-entry span.attach_agent_image_wrap i:hover {
+  cursor: pointer;
+}
+
+.copilot-entry .submit-button {
+  position: relative;
+  top: -1.8rem;
+  left: 0.1rem;
+}
+.copilot-entry #audioinputicon {
+  position: relative;
+  top: -1.8rem;
+  right: 0.7rem;
+  cursor: pointer;
+  float: right;
+}
+.copilot-entry .debugicon {
+  position: relative;
+  top: -1.8rem;
+  left: 0.1rem;
+  cursor: pointer;
+}
+.copilot-entry .cancelbtn {
+  position: relative;
+  top: -1.8rem;
+  left: 0.1rem;
+  cursor: pointer;
+}
+.copilot-entry .skill-form-widget {
+  position: relative;
+  top: -2rem;
+  left: 0.4rem;
+  display: inline;
+}
+.session-open-sessions,
+.open-prev-runs {
+  cursor: pointer;
+}
+.copilot-entry span.attach_agent_image_wrap {
+  position: relative;
+  top: -1.8rem;
+  left: 0.2rem;
+}
+.copilot-entry.dragover {
+  outline: 2px dashed var(--tblr-primary, #0054a6);
+  outline-offset: -2px;
+  background: var(--tblr-primary-bg-subtle, rgba(0, 84, 166, 0.05));
+  border-radius: 0.25rem;
+}
+.copilot-entry .explainer {
+  position: relative;
+  top: -1.2rem;
+  display: block;
+}
+.col-0 {
+  width: 0%;
+}
+.copilot-entry {
+  margin-bottom: -1.25rem;
+  margin-top: 1rem;
+}
+p.prevrun_content {
+  white-space: nowrap;
+  overflow: hidden;
+  margin-bottom: 0px;
+  display: block;
+  text-overflow: ellipsis;
+}
+/* Typing / Waiting Indicator */
+.agent-waiting-indicator {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+}
+.typing-dots {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+.typing-dots span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #6c757d;
+  animation: typingBounce 1.4s infinite ease-in-out both;
+}
+.typing-dots span:nth-child(1) {
+  animation-delay: -0.32s;
+}
+.typing-dots span:nth-child(2) {
+  animation-delay: -0.16s;
+}
+.typing-dots span:nth-child(3) {
+  animation-delay: 0s;
+}
+@keyframes typingBounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.6);
+    opacity: 0.4;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+/* Modern Chat Layout */
+.modern-chat-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.modern-chat-layout #copilotinteractions {
+  /*max-height: 70vh;*/
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.modern-chat-layout .chat-message {
+  display: flex;
+  gap: 0.5rem;
+  max-width: 85%;
+  align-items: flex-start;
+}
+.modern-chat-layout .chat-message.chat-user {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+.modern-chat-layout .chat-message.chat-assistant {
+  align-self: flex-start;
+}
+.modern-chat-layout .chat-avatar {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 0.85rem;
+  background: var(
+    --tblr-secondary-bg-subtle,
+    var(--bs-secondary-bg-subtle, #e9ecef)
+  );
+  color: var(--tblr-secondary-color, var(--bs-secondary-color, #6c757d));
+}
+.modern-chat-layout .chat-user .chat-avatar {
+  background: #0d6efd;
+  color: #fff;
+}
+.modern-chat-layout .chat-bubble {
+  padding: 0.6rem 1rem;
+  border-radius: 1rem;
+  line-height: 1.5;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+.modern-chat-layout .chat-user .chat-bubble {
+  background: #0d6efd;
+  color: #fff;
+  border-bottom-right-radius: 0.25rem;
+}
+.modern-chat-layout .chat-assistant .chat-bubble {
+  background: var(
+    --tblr-secondary-bg-subtle,
+    var(--bs-secondary-bg-subtle, #f0f2f5)
+  );
+  color: var(--tblr-body-color, var(--bs-body-color, #212529));
+  border-bottom-left-radius: 0.25rem;
+}
+/* Markdown content inside bubbles */
+.modern-chat-layout .chat-bubble h1,
+.modern-chat-layout .chat-bubble h2,
+.modern-chat-layout .chat-bubble h3,
+.modern-chat-layout .chat-bubble h4 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+.modern-chat-layout .chat-bubble h1 {
+  font-size: 1.3rem;
+}
+.modern-chat-layout .chat-bubble h2 {
+  font-size: 1.15rem;
+}
+.modern-chat-layout .chat-bubble h3 {
+  font-size: 1.05rem;
+}
+.modern-chat-layout .chat-bubble h4 {
+  font-size: 1rem;
+}
+.modern-chat-layout .chat-bubble p {
+  margin-bottom: 0.4rem;
+}
+.modern-chat-layout .chat-bubble p:last-child {
+  margin-bottom: 0;
+}
+.modern-chat-layout .chat-bubble ul,
+.modern-chat-layout .chat-bubble ol {
+  padding-left: 1.5rem;
+  margin-bottom: 0.4rem;
+}
+.modern-chat-layout .chat-bubble table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.5rem 0;
+  font-size: 0.9em;
+}
+.modern-chat-layout .chat-bubble table th,
+.modern-chat-layout .chat-bubble table td {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  padding: 0.3rem 0.5rem;
+}
+.modern-chat-layout .chat-bubble table th {
+  background: rgba(0, 0, 0, 0.05);
+  font-weight: 600;
+}
+.modern-chat-layout .chat-bubble pre {
+  background: rgba(0, 0, 0, 0.06);
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin: 0.4rem 0;
+}
+.modern-chat-layout .chat-bubble code {
+  font-size: 0.88em;
+}
+.modern-chat-layout .chat-bubble p > code {
+  background: rgba(0, 0, 0, 0.06);
+  padding: 0.1rem 0.3rem;
+  border-radius: 0.25rem;
+}
+.modern-chat-layout .chat-user .chat-bubble pre {
+  background: rgba(255, 255, 255, 0.15);
+}
+.modern-chat-layout .chat-user .chat-bubble p > code {
+  background: rgba(255, 255, 255, 0.15);
+}
+.modern-chat-layout .chat-user .chat-bubble table th,
+.modern-chat-layout .chat-user .chat-bubble table td {
+  border-color: rgba(255, 255, 255, 0.25);
+}
+.modern-chat-layout .chat-user .chat-bubble table th {
+  background: rgba(255, 255, 255, 0.1);
+}
+/* Skill attribution badge */
+.modern-chat-layout .chat-bubble .badge.bg-info {
+  display: inline-block;
+  margin-bottom: 6px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  opacity: 0.85;
+}
+.modern-chat-layout .chat-bubble .card.bg-secondary-subtle {
+  border: none;
+  background-color: rgba(0, 0, 0, 0.03) !important;
+  margin-bottom: 0.5rem;
+}
+/* Input area for modern chat */
+.modern-chat-layout .copilot-entry {
+  border-top: 1px solid
+    var(--tblr-border-color, var(--bs-border-color, #dee2e6));
+  padding-top: 0.75rem;
+  margin-top: 0.5rem;
+}
+.modern-chat-layout .copilot-entry textarea {
+  border-radius: 1.5rem;
+  padding: 0.6rem 1rem;
+  resize: none;
+}
+/* Streaming scratch in modern chat */
+.modern-chat-layout .next_response_scratch {
+  padding: 0 1rem;
+}
+.modern-chat-layout .next_response_scratch:not(:empty) {
+  margin-bottom: 0.5rem;
+}
+/* Interaction segment (tool cards) inside modern chat */
+.modern-chat-layout .interaction-segment {
+  border-top: none;
+}
+/* Modern Sessions Sidebar */
+.modern-sessions-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6rem 0.75rem;
+  margin-bottom: 0.75rem;
+  background: var(
+    --tblr-secondary-bg-subtle,
+    var(--bs-secondary-bg-subtle, #f8f9fa)
+  );
+  border-radius: 0.75rem;
+  border-bottom: 1px solid
+    var(--tblr-border-color, var(--bs-border-color, #dee2e6));
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.modern-sessions .modern-session-item {
+  border-radius: 0.75rem;
+  padding: 0.65rem 0.75rem;
+  margin-bottom: 0.4rem;
+  border: 1px solid var(--tblr-border-color, var(--bs-border-color, #dee2e6));
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.modern-sessions .modern-session-item:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
+  background-color: var(
+    --tblr-secondary-bg-subtle,
+    var(--bs-secondary-bg-subtle, #f8f9fa)
+  );
+}
+.modern-sessions .modern-session-item.active-session {
+  border-left: 3px solid #0d6efd;
+  background-color: rgba(13, 110, 253, 0.05);
+}
+.modern-sessions .modern-session-item i.fa-trash-alt {
+  display: none;
+  font-size: 0.8em;
+}
+.modern-sessions .modern-session-item:hover i.fa-trash-alt {
+  display: inline;
+}
+.modern-sessions .modern-session-item .prevrun_content {
+  font-size: 0.85em;
+  color: var(--tblr-secondary-color, var(--bs-secondary-color, #6c757d));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.copy-to-clipboard-elem {
+  position: relative;
+}
+
+.copy-to-clipboard-elem::before {
+  content: "📋";
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease-in-out;
+  z-index: 10;
+  user-select: none;
+}
+
+.copy-to-clipboard-elem:hover::before {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.copy-to-clipboard-elem.copy-success::before {
+  content: "✓";
+  color: green;
+}

package/common.js

@@ -43,6 +43,7 @@ const get_skills = () => {
     require("./skills/Subagent"),
     require("./skills/ExternalSkill"),
     require("./skills/PlanApproval"),
+    require("./skills/LongTermMemory"),
     //require("./skills/AdaptiveFeedback"),
     ...exchange_skills,
   ];
@@ -57,8 +58,10 @@ const get_skill_instances = (config) => {
   const instances = [];
   for (const skillCfg of config.skills) {
     const klass = get_skill_class(skillCfg.skill_type);
-    const skill = new klass(skillCfg);
-    instances.push(skill);
+    if (klass) {
+      const skill = new klass(skillCfg);
+      instances.push(skill);
+    }
   }
   return instances;
 };
@@ -220,7 +223,7 @@ const wrapSegment = (html, who, to_right, layout, user) =>
     : layout && layout.startsWith("Modern chat")
       ? `<div class="chat-message ${to_right ? "chat-user" : "chat-assistant"}">` +
         `<div class="chat-avatar"${user ? ` title="${user.email} at ${new Date().toString()}"` : ""}><i class="fas ${to_right ? "fa-user" : "fa-robot"}"></i></div>` +
-        `<div class="chat-bubble">${html}</div>` +
+        `<div class="chat-bubble${" copy-to-clipboard-elem"}">${html}</div>` +
         `</div>`
       : `<div class="interaction-segment ${to_right ? "to-right" : ""}"><div><div class="badgewrap"><span class="badge bg-secondary">` +
         who +
@@ -237,6 +240,10 @@ const wrapCard = (title, ...inners) =>
 
 const is_debug_mode = (config, user) => user?.role_id === 1;
 
+function extractText(html) {
+  return html.replace(/<[^>]*>/g, '');
+}
+
 const process_interaction = async (
   run,
   config,
@@ -414,6 +421,7 @@ const process_interaction = async (
           myHasResult = true;
           let result = await tool.tool.process(tool_call.input, {
             req,
+            run,
           });
           const tool_response = result.add_response || result;
           toolResults[tool_call.tool_call_id] = result;
@@ -744,4 +752,5 @@ module.exports = {
   is_debug_mode,
   get_initial_interactions,
   nubBy,
+  extractText
 };

package/package.json

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

package/skills/Fetch.js

@@ -15,9 +15,69 @@ const { features } = require("@saltcorn/data/db/state");
 const { button } = require("@saltcorn/markup/tags");
 const { validID } = require("@saltcorn/markup/layout_utils");
 
-const vm = require("vm");
+class CookieJar {
+  constructor(source) {
+    this.cookies = new Map();
 
-//const { fieldProperties } = require("./helpers");
+    if (source instanceof CookieJar) {
+      // Copy from another CookieJar instance
+      for (const [name, value] of source.cookies) {
+        this.cookies.set(name, value);
+      }
+    } else if (source && typeof source === "object") {
+      // Hydrate from a plain object (e.g. output of toObject())
+      for (const [name, value] of Object.entries(source)) {
+        this.cookies.set(name, String(value));
+      }
+    }
+    // If source is undefined/null, start empty
+  }
+
+  // Parse Set-Cookie headers from a response and store them
+  storeFromResponse(response) {
+    const setCookieHeaders = response.headers.getSetCookie
+      ? response.headers.getSetCookie()
+      : [response.headers.get("set-cookie")].filter(Boolean);
+
+    for (const header of setCookieHeaders) {
+      this._parseAndStore(header);
+    }
+  }
+
+  // Parse a single "name=value; Path=/; HttpOnly; ..." string
+  _parseAndStore(header) {
+    const [nameValue] = header.split(";");
+    const eqIdx = nameValue.indexOf("=");
+    if (eqIdx > 0) {
+      const name = nameValue.slice(0, eqIdx).trim();
+      const value = nameValue.slice(eqIdx + 1).trim();
+      this.cookies.set(name, value);
+    }
+  }
+
+  // Build a Cookie header string suitable for outgoing requests
+  toHeader() {
+    return Array.from(this.cookies.entries())
+      .map(([name, value]) => `${name}=${value}`)
+      .join("; ");
+  }
+
+  // Apply cookies to a headers object (mutates and returns it)
+  applyTo(headers = {}) {
+    if (this.cookies.size > 0) {
+      headers["Cookie"] = this.toHeader();
+    }
+    return headers;
+  }
+
+  get size() {
+    return this.cookies.size;
+  }
+
+  toObject() {
+    return Object.fromEntries(this.cookies);
+  }
+}
 
 class FetchSkill {
   static skill_name = "Fetch";
@@ -31,7 +91,7 @@ class FetchSkill {
   }
 
   static async configFields() {
-    return [];
+    return [{ name: "cookiejar", label: "Cookie Jar", type: "Bool" }];
   }
   systemPrompt() {
     return "If you need to retrieve the contents of a web page, use the fetch_web_page to make a GET request to a specified URL.";
@@ -40,8 +100,29 @@ class FetchSkill {
   provideTools = () => {
     return {
       type: "function",
-      process: async (row) => {
-        const resp = await fetch(row.url);
+      process: async (row, { run }) => {
+        const opts = { headers: {} };
+        const jar = new CookieJar(run.context.cookiejar || {});
+        if (this.cookiejar) {
+          opts.headers = jar.applyTo();
+          opts.credentials = "same-origin";
+          opts.redirect = "manual";
+        }
+
+        if (row.method) opts.method = row.method;
+        if (row.content_type) opts.headers["Content-Type"] = row.content_type;
+        if (row.body) opts.body = row.body;
+
+        let resp = await fetch(row.url, opts);
+        if (resp.status == 302 && (!row.method || row.method === "GET")) {
+          if (this.cookiejar) jar.storeFromResponse(resp);
+          resp = await fetch(resp.headers.get("location"), opts);
+        }
+
+        if (this.cookiejar) {
+          jar.storeFromResponse(resp);
+          run.context.cookiejar = jar.toObject();
+        }
         return await resp.text();
       },
       function: {
@@ -55,6 +136,20 @@ class FetchSkill {
               description: "The URL to fetch with HTTP",
               type: "string",
             },
+            method: {
+              description: "The HTTP method",
+              type: "string",
+              enum: ["GET", "POST", "PUT", "DELETE"],
+            },
+            body: {
+              description: "The request body as a string (POST and PUT only)",
+              type: "string",
+            },
+            content_type: {
+              description:
+                "The request body content type, e.g. application/x-www-form-urlencoded or application/json (POST and PUT only)",
+              type: "string",
+            },
           },
         },
       },

package/skills/LongTermMemory.js

@@ -0,0 +1,229 @@
+const { div, pre } = require("@saltcorn/markup/tags");
+const Workflow = require("@saltcorn/data/models/workflow");
+const Form = require("@saltcorn/data/models/form");
+const Table = require("@saltcorn/data/models/table");
+const Field = require("@saltcorn/data/models/field");
+const View = require("@saltcorn/data/models/view");
+const { getState } = require("@saltcorn/data/db/state");
+const db = require("@saltcorn/data/db");
+const { interpolate } = require("@saltcorn/data/utils");
+const { nubBy } = require("../common");
+
+class LongTermMemory {
+  static skill_name = "Memory";
+
+  get skill_label() {
+    return `Memory`;
+  }
+
+  constructor(cfg) {
+    Object.assign(this, cfg);
+  }
+
+  systemPrompt() {
+    return `You have access to a memory bank you can read from or write to. You should search the memory bank with the search_memory tool with any search terms that might be relevant to the user's query or the result of a tool call. When you learn something noteworthy (from the user or from the result of a tool call) store it in memory with the store_in_memory tool. Mark it as personal if it is only true or relevant for the specific user. Don't tell the user when you are storing to and retrieving from memory. ${
+      this.add_sys_prompt
+        ? ` Additional instructions for the memory tools: ${this.add_sys_prompt}`
+        : ""
+    }`;
+  }
+
+  static async configFields() {
+    return [
+      {
+        name: "add_sys_prompt",
+        label: "Additional prompt",
+        type: "String",
+        fieldview: "textarea",
+      },
+    ];
+  }
+
+  async get_table() {
+    const table0 = Table.findOne("AgentLongTermMemory");
+    if (table0) return table0;
+    const tables = await Table.find({ name: "AgentLongTermMemory" });
+    if (tables.length) return tables[0];
+
+    //does not exist, create it
+    const table = await Table.create("AgentLongTermMemory", {});
+    await getState().refresh_tables(true);
+    await Field.create({
+      table,
+      name: "run_id",
+      label: "Run ID",
+      type: "Integer",
+    });
+    const uid_field = await Field.create({
+      table,
+      name: "user_id",
+      label: "User ID",
+      type: "Key to users",
+      attributes: {
+        on_delete: "Set null",
+        include_fts: false,
+        summary_field: "email",
+      },
+    });
+    await Field.create({
+      table,
+      name: "written_at",
+      label: "Written at",
+      type: "Date",
+    });
+    await Field.create({
+      table,
+      name: "agent_trigger_id",
+      label: "Agent trigger ID",
+      type: "Integer",
+    });
+    await Field.create({
+      table,
+      name: "memory_type",
+      label: "Memory type",
+      type: "String",
+    });
+    await Field.create({
+      table,
+      name: "personal",
+      label: "Personal",
+      type: "Bool",
+    });
+    await Field.create({
+      table,
+      name: "topic",
+      label: "Topic",
+      type: "String",
+    });
+    await Field.create({
+      table,
+      name: "contents",
+      label: "Contents",
+      type: "String",
+    });
+    await table.update({ ownership_field_id: uid_field.id });
+    await getState().refresh_tables();
+    return Table.findOne("AgentLongTermMemory");
+  }
+
+  provideTools() {
+    return [
+      {
+        type: "function",
+        function: {
+          name: "store_in_memory",
+          description: `Store a fact or observation in long-term memory`,
+          parameters: {
+            type: "object",
+            required: ["contents"],
+            properties: {
+              contents: {
+                type: "string",
+                description: "The contents of the fact or observations",
+              },
+              personal: {
+                type: "boolean",
+                description:
+                  "Is this a fact or observation specifically about the person interacting with you now, which may not be true or relevant for another person",
+              },
+            },
+          },
+        },
+        process: async (arg, { req, run }) => {
+          const table = await this.get_table();
+          await table.insertRow({
+            run_id: run.id,
+            user_id: req.user?.id,
+            written_at: new Date(),
+            agent_trigger_id: run.trigger_id,
+            memory_type: "Episodic",
+            contents: arg.contents,
+            personal: arg.personal,
+          });
+          return "Recorded";
+        },
+      },
+      {
+        type: "function",
+        process: async (arg, { req }) => {
+          const table = await this.get_table();
+
+          const scState = getState();
+          const language = scState.pg_ts_config;
+          const use_websearch = scState.getConfig(
+            "search_use_websearch",
+            false,
+          );
+          let rows = [];
+          const user_id = req.user?.id;
+          const phrases =
+            typeof arg.phrases === "string" ? [arg.phrases] : arg.phrases;
+
+          if (use_websearch)
+            rows = await table.getRows({
+              _fts: {
+                fields: table.fields,
+                searchTerm: phrases.join(" OR "),
+                language,
+                use_websearch,
+                table: table.name,
+                schema: db.isSQLite ? undefined : db.getTenantSchema(),
+              },
+              ...(user_id
+                ? { or: [{ personal: false }, { personal: true, user_id }] }
+                : [{ personal: false }]),
+            });
+          else
+            for (const phrase of phrases) {
+              const my_rows = await table.getRows({
+                _fts: {
+                  fields: table.fields,
+                  searchTerm: phrase,
+                  language,
+                  use_websearch,
+                  table: table.name,
+                  schema: db.isSQLite ? undefined : db.getTenantSchema(),
+                },
+                ...(user_id
+                  ? { or: [{ personal: false }, { personal: true, user_id }] }
+                  : [{ personal: false }]),
+              });
+              rows.push(...my_rows);
+            }
+          const pk = table.pk_name;
+          rows = nubBy((r) => r[pk], rows);
+          //TODO sort most recent, only N memories
+          if (rows.length)
+            return (
+              "These memories were retrieved:\n\n" +
+              rows.map((r) => r.contents).join("\n")
+            );
+          else
+            return "There are no memories related to: " + phrases.join(" or ");
+        },
+        function: {
+          name: "search_memory",
+          description: `Search the memory bank by a search phrase`,
+          parameters: {
+            type: "object",
+            required: ["phrases"],
+            description:
+              "Search the memory bank by any of a number of phrases. This will return any memories that matches one or the other of the phrases",
+            properties: {
+              phrases: {
+                type: "array",
+                description:
+                  "A phrase to search the memory bank with. The search phrase is the synatx used by web search engines: use double quotes for exact match, unquoted text for words in any order, dash (minus sign) to exclude a word. Do not use SQL or any other formal query language.",
+                items: {
+                  type: "string",
+                },
+              },
+            },
+          },
+        },
+      },
+    ];
+  }
+}
+
+module.exports = LongTermMemory;