@saltcorn/agents 0.7.4 → 0.7.6

package/action.js

@@ -90,6 +90,8 @@ module.exports = {
     run_id,
     req,
     is_sub_agent,
+    agent_view_config,
+    dyn_updates,
     ...rest
   }) => {
     const userinput = interpolate(configuration.prompt, row, user);
@@ -115,9 +117,9 @@ module.exports = {
       undefined,
       [],
       row,
-      { stream: false },
-      false,
-      is_sub_agent
+      agent_view_config || { stream: false },
+      dyn_updates,
+      is_sub_agent,
     );
   },
 };

package/agent-view.js

@@ -192,13 +192,15 @@ const realTimeCollabScript = (viewname, rndid, layout) => {
         ['${view.getRealTimeEventName(
           "STREAM_CHUNK",
         )}' + \`?page_load_tag=\${_sc_pageloadtag}\`]: async (data) => {
+          $(".agent-waiting-indicator").remove();
           window['stream scratch ${viewname} ${rndid}'].push(data.content)
           const rendered = md.render(window['stream scratch ${viewname} ${rndid}'].join(""));
-          $('form.agent-view div.next_response_scratch').html(
+          $('div.next_response_scratch').html(
             (${JSON.stringify(layout || "")} || "").startsWith("Modern chat")
               ? '<div class="chat-message chat-assistant"><div class="chat-avatar"><i class="fas fa-robot"></i></div><div class="chat-bubble">' + rendered + '</div></div>'
               : rendered
           );
+          scrollAgentToBottom();
         }
       }
     };
@@ -434,7 +436,7 @@ const run = async (
   const rndid = Math.floor(Math.random() * 16777215).toString(16);
   const input_form = form(
     {
-      onsubmit: `event.preventDefault();spin_send_button();view_post('${viewname}', 'interact', new FormData(this), ${dyn_updates ? "null" : "processCopilotResponse"});return false;`,
+      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"],
       method: "post",
     },
@@ -492,8 +494,7 @@ const run = async (
       explainer && small({ class: "explainer" }, i(explainer)),
     ),
     stream &&
-      realTimeCollabScript(viewname, rndid, layout) +
-        div({ class: "next_response_scratch" }),
+      realTimeCollabScript(viewname, rndid, layout),
   );
 
   const isModernSidebar = layout && layout.startsWith("Modern chat");
@@ -612,6 +613,7 @@ const run = async (
       req.__("Sessions"),
     ),
     div({ id: "copilotinteractions" }, runInteractions),
+    stream ? div({ class: "next_response_scratch" }) : "",
     input_form,
     style(
       `div.interaction-segment:not(:first-child) {border-top: 1px solid #e7e7e7; }
@@ -685,6 +687,14 @@ const run = async (
     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;
@@ -881,6 +891,16 @@ const run = async (
     script(domReady(`$( "#inputuserinput" ).autogrow({paddingBottom: 20});`)),
     script(
       `
+    function scrollAgentToBottom() {
+      const container = document.getElementById('copilotinteractions');
+      if (container) {
+        if (container.scrollHeight > container.clientHeight) {
+          container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
+        }
+        const inputForm = document.querySelector('form.agent-view');
+        if (inputForm) inputForm.scrollIntoView({ behavior: 'smooth', block: 'end' });
+      }
+    }
     function close_session_list() {
       $("div.prev-runs-list").hide().parents(".col-3").removeClass("col-3").addClass("was-col-3").parent().children(".col-9").removeClass("col-9").addClass("col-12")
       $("div.open-prev-runs").show()
@@ -916,14 +936,21 @@ const run = async (
         if(user_input && (!${JSON.stringify(dyn_updates)}))
           $("#copilotinteractions").append(wrapSegment('<p>'+user_input+'</p>'+fileBadge, "You", true))
         $("textarea[name=userinput]").val("")
-        $('form.agent-view div.next_response_scratch').html("")
+        $('div.next_response_scratch').html("")
         window['stream scratch ${viewname} ${rndid}'] = []
-        if(res.response)
-            $("#copilotinteractions").append(res.response)
+        if(res.response) {
+            $(".agent-waiting-indicator").remove();
+            $("#copilotinteractions").append(res.response);
+            scrollAgentToBottom();
+        }
     }
     window.processCopilotResponse = processCopilotResponse;
     window.final_agent_response = () => {
       $("#sendbuttonicon").attr("class","far fa-paper-plane");
+      $(".agent-waiting-indicator").remove();
+      $("textarea[name=userinput]").prop("disabled", false).attr("placeholder", ${JSON.stringify(placeholder || "How can I help you?")}).focus();
+      $(".copilot-entry .submit-button").css("pointer-events", "");
+      scrollAgentToBottom();
     }
     window._agentDT = new DataTransfer();
     function setAgentFiles(files) {
@@ -1046,6 +1073,14 @@ const run = async (
     }
     function spin_send_button() {
       $("#sendbuttonicon").attr("class","fas fa-spinner fa-spin");
+      $("textarea[name=userinput]").prop("disabled", true).attr("placeholder", "Waiting for response...");
+      $(".copilot-entry .submit-button").css("pointer-events", "none");
+      const isModernLayout = ${JSON.stringify((layout || "").startsWith("Modern chat"))};
+      const indicator = isModernLayout
+        ? '<div class="agent-waiting-indicator chat-message chat-assistant"><div class="chat-avatar"><i class="fas fa-robot"></i></div><div class="chat-bubble"><div class="typing-dots"><span></span><span></span><span></span></div></div></div>'
+        : '<div class="agent-waiting-indicator"><div class="typing-dots"><span></span><span></span><span></span></div></div>';
+      $('div.next_response_scratch').before(indicator);
+      scrollAgentToBottom();
     };`,
       stream &&
         domReady(

package/common.js

@@ -277,7 +277,9 @@ const process_interaction = async (
     run.context.interactions[run.context.interactions.length - 1];
 
   const answer = await sysState.functions.llm_generate.run(
-    lastInteract?.role === "user" ? "" : "Continue",
+    lastInteract?.role === "user" || lastInteract?.role === "tool"
+      ? ""
+      : "Continue",
     complArgs,
   );
 
@@ -487,6 +489,8 @@ const process_interaction = async (
               chat,
               req,
               run,
+              agent_view_config: agentsViewCfg,
+              dyn_updates,
               async generate(prompt, opts = {}) {
                 generateUsed = true;
                 return await sysState.functions.llm_generate.run(prompt, {
@@ -530,9 +534,7 @@ const process_interaction = async (
             for (const add_resp of postprocres.add_responses || []) {
               raw_responses.push(add_resp);
               const renderedAddResponse =
-                typeof add_resp === "string"
-                  ? md.render(add_resp)
-                  : add_resp;
+                typeof add_resp === "string" ? md.render(add_resp) : add_resp;
               add_response(
                 wrapSegment(
                   wrapCard(
@@ -635,16 +637,22 @@ const process_interaction = async (
   return {
     json: {
       success: "ok",
-      ...(is_sub_agent ? { raw_responses } : {}),
+      ...(is_sub_agent && !stream ? { raw_responses } : {}),
       response: [...prevResponses, ...responses].join(""),
       run_id: run?.id,
     },
   };
 };
 
+const replaceUserContinue = (chat, newPrompt) => {
+  const lastChat = chat[chat.length - 1];
+  console.log("lastChat", lastChat);
+};
+
 module.exports = {
   get_skills,
   get_skill_class,
+  replaceUserContinue,
   incompleteCfgMsg,
   find_tool,
   get_skill_instances,

package/package.json

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

package/skills/GenerateAndRunJsCode.js

@@ -16,6 +16,7 @@ const { button } = require("@saltcorn/markup/tags");
 const { validID } = require("@saltcorn/markup/layout_utils");
 
 const vm = require("vm");
+const { replaceUserContinue } = require("../common");
 
 //const { fieldProperties } = require("./helpers");
 
@@ -100,7 +101,8 @@ class GenerateAndRunJsCodeSkill {
       },
       {
         name: "allow_functions",
-        label: "Allow calls to functions from codepages and modules",
+        label: "Allow system functions",
+        sublabel: "Allow calls to functions from codepages and modules",
         type: "Bool",
       },
       ...(Table.subClass
@@ -131,12 +133,14 @@ class GenerateAndRunJsCodeSkill {
         req,
         generate,
         emit_update,
+        chat,
         ...rest
       }) => {
         //console.log("postprocess args", { tool_call, ...rest });
         emit_update("Generating code");
-        const str = await generate(
-          `You will now be asked to write JavaScript code.          
+        const gen_the_code = async (extra) => {
+          const str = await generate(
+            `You will now be asked to write JavaScript code.          
 ${this.code_description ? "\nSome more information: " + this.code_description : ""}
 ${this.allow_fetch ? "\nYou can use the standard fetch JavaScript function to make HTTP(S) requests." : ""}
 ${this.allow_table ? getTablePrompt(this.read_only) : ""}
@@ -165,24 +169,53 @@ const y = await anotherAsyncFunction(x)
 return { x, y }
 \`\`\`
 
+${extra || ""}
 
 Now generate the JavaScript code required by the user.`,
-        );
-        getState().log(
-          6,
-          "Generated code:\n--BEGIN CODE--\n" + str + "\n--END CODE--\n",
-        );
-        const js_code = str.includes("```javascript")
-          ? str.split("```javascript")[1].split("```")[0]
-          : str;
-        emit_update("Running code");
-        const res = await this.runCode(js_code, { user: req.user });
-        //console.log("code response", res);
-        getState().log(6, "Code answer: " + JSON.stringify(res));        
-        return {
-          stop: typeof res ==="string",
-          add_response: res,
+          );
+          getState().log(
+            6,
+            "Generated code:\n--BEGIN CODE--\n" + str + "\n--END CODE--\n",
+          );
+          const js_code = str.includes("```javascript")
+            ? str.split("```javascript")[1].split("```")[0]
+            : str;
+          return js_code;
         };
+        const js_code = await gen_the_code();
+        emit_update("Running code");
+        try {
+          const res = await this.runCode(js_code, { user: req.user });
+          //console.log("code response", res);
+          getState().log(6, "Code answer: " + JSON.stringify(res));
+          return {
+            stop: typeof res === "string",
+            add_response: res,
+          };
+        } catch (err) {
+          console.error(err);
+          const retry_js_code =
+            await gen_the_code(`You were previously asked to complete this task. This was the code generated:
+\`\`\`javascript
+${js_code}
+\`\`\`
+
+this code produced the following error:
+
+\`\`\`
+${err.message}
+\`\`\`
+
+Correct this error.
+`);
+          const res = await this.runCode(retry_js_code, { user: req.user });
+          //console.log("code response", res);
+          getState().log(6, "Code retry answer: " + JSON.stringify(res));
+          return {
+            stop: typeof res === "string",
+            add_response: res,
+          };
+        }
       },
       function: {
         name: this.tool_name,

package/skills/ModelPicker.js

@@ -34,8 +34,9 @@ class ModelPicker {
         class: ["form-select form-select-sm w-unset", klass],
         name: "modelpicker",
       },
-      this.placeholder && option({ disabled: true }, this.placeholder),
-      option({ value: "" }, this.default_label),
+      this.placeholder &&
+        option({ disabled: true }, this.placeholder || "Select model"),
+      option({ value: "" }, this.default_label || "Standard"),
       alt_config_options.map((o) => option(o)),
     );
   }

package/skills/Subagent.js

@@ -8,6 +8,7 @@ const { getState } = require("@saltcorn/data/db/state");
 const db = require("@saltcorn/data/db");
 const { fieldProperties } = require("./helpers");
 const agent_action = require("../action");
+const { replaceUserContinue } = require("../common");
 
 class SubagentToSkill {
   static skill_name = "Subagent";
@@ -45,7 +46,12 @@ class SubagentToSkill {
         required: true,
         attributes: { options: actions.map((a) => a.name) },
       },
-      // TODO: confirm, show response, show argument
+      {
+        name: "handover_prompt",
+        label: "Handover prompt",
+        sublabel: `Optional. The prompt initialising the subagent. Example: "Continue answering my query using the tool now at you disposal"`,
+        type: "String",
+      },
     ];
   }
 
@@ -65,15 +71,38 @@ class SubagentToSkill {
       /*renderToolCall({ phrase }, { req }) {
         return div({ class: "border border-primary p-2 m-2" }, phrase);
       },*/
-      postProcess: async ({ tool_call, req, generate, emit_update, run }) => {
+      postProcess: async ({
+        tool_call,
+        req,
+        generate,
+        emit_update,
+        run,
+        chat,
+        agent_view_config,
+        dyn_updates,
+      }) => {
+        getState().log(6, "Running subagent", this.agent_name);
         const subres = await agent_action.run({
           row: {},
-          configuration: { ...trigger.configuration, prompt: "continue" },
+          configuration: {
+            ...trigger.configuration,
+            prompt:
+              this.handover_prompt ||
+              "Your instructions and tools have changed. Continue answering my query using the instructions and tools at you disposal, if any",
+          },
           user: req.user,
           run_id: run.id,
           is_sub_agent: true,
+          agent_view_config,
+          dyn_updates,
           req,
         });
+        getState().log(
+          6,
+          "Subagent response",
+          subres?.json?.raw_responses || "No response",
+        );
+
         if (subres.json.raw_responses)
           return { add_responses: subres.json.raw_responses };
         return {

package/tests/action.test.js

@@ -41,7 +41,7 @@ beforeAll(async () => {
   //await getState().setConfig("log_level", 6);
 });
 
-jest.setTimeout(30000);
+jest.setTimeout(40000);
 
 const user = { id: 1, role_id: 1 };
 const action = require("../action");
@@ -128,7 +128,7 @@ for (const nameconfig of require("./configs")) {
       const result = await action.run({
         row: {
           theprompt:
-            "What is the 16th Fibonacci number (when F1=1 and F2=1)? Consult both the math agent and the oracle and see if they agree. You must call both the OracleAgent and the MathsAgent tools simultaneously",
+            "What is the 16th Fibonacci number (when F1=1 and F2=1)? Consult both the math agent and the oracle and see if they agree. Call both the OracleAgent and the MathsAgent tools",
         },
         configuration,
         user,