@saltcorn/agents 0.5.8 → 0.6.1

package/agent-view.js

@@ -30,6 +30,7 @@ const {
   textarea,
   label,
   a,
+  br,
 } = require("@saltcorn/markup/tags");
 const { getState } = require("@saltcorn/data/db/state");
 const {
@@ -107,6 +108,15 @@ const configuration_workflow = (req) =>
                 sublabel:
                   "Appears below the input box. Use for additional instructions.",
               },
+              {
+                name: "layout",
+                label: "Layout",
+                type: "String",
+                required: true,
+                attributes: {
+                  options: ["Standard", "No card"],
+                },
+              },
               {
                 name: "image_upload",
                 label: "Upload images",
@@ -219,17 +229,21 @@ const run = async (
     image_upload,
     stream,
     audio_recorder,
+    layout,
   },
   state,
   { res, req },
 ) => {
   const action = await Trigger.findOne({ id: action_id });
-  const prevRuns = (
-    await WorkflowRun.find(
-      { trigger_id: action.id, started_by: req.user?.id },
-      { orderBy: "started_at", orderDesc: true, limit: 30 },
-    )
-  ).filter((r) => r.context.interactions);
+  if (!action) throw new Error(`Action not found: ${action_id}`);
+  const prevRuns = show_prev_runs
+    ? (
+        await WorkflowRun.find(
+          { trigger_id: action.id, started_by: req.user?.id },
+          { orderBy: "started_at", orderDesc: true, limit: 30 },
+        )
+      ).filter((r) => r.context.interactions)
+    : null;
 
   const cfgMsg = incompleteCfgMsg();
   if (cfgMsg) return cfgMsg;
@@ -244,137 +258,146 @@ const run = async (
   }
   const initial_q = state.run_id ? undefined : state._q;
   if (state.run_id) {
-    const run = prevRuns.find((r) => r.id == state.run_id);
+    const run = prevRuns
+      ? prevRuns.find((r) => r.id == state.run_id)
+      : await WorkflowRun.findOne({
+          trigger_id: action.id,
+          started_by: req.user?.id,
+          id: state.run_id,
+        });
     const interactMarkups = [];
-    for (const interact of run.context.interactions) {
-      switch (interact.role) {
-        case "user":
-          if (interact.content?.[0]?.type === "image_url") {
-            const image_url = interact.content[0].image_url.url;
-            if (image_url.startsWith("data"))
+    if (run.context.html_interactions) {
+      interactMarkups.push(...run.context.html_interactions);
+    } else
+      for (const interact of run.context.interactions) {
+        switch (interact.role) {
+          case "user":
+            if (interact.content?.[0]?.type === "image_url") {
+              const image_url = interact.content[0].image_url.url;
+              if (image_url.startsWith("data"))
+                interactMarkups.push(
+                  div(
+                    { class: "interaction-segment" },
+                    span({ class: "badge bg-secondary" }, "You"),
+                    "File",
+                  ),
+                );
+              else
+                interactMarkups.push(
+                  div(
+                    { class: "interaction-segment" },
+                    span({ class: "badge bg-secondary" }, "You"),
+                    a({ href: image_url, target: "_blank" }, "File"),
+                  ),
+                );
+            } else
               interactMarkups.push(
                 div(
                   { class: "interaction-segment" },
                   span({ class: "badge bg-secondary" }, "You"),
-                  "File",
+                  md.render(interact.content),
                 ),
               );
-            else
-              interactMarkups.push(
-                div(
-                  { class: "interaction-segment" },
-                  span({ class: "badge bg-secondary" }, "You"),
-                  a({ href: image_url, target: "_blank" }, "File"),
-                ),
+            break;
+          case "assistant":
+          case "system":
+            for (const tool_call of interact.tool_calls || []) {
+              const toolSkill = find_tool(
+                tool_call.function?.name,
+                action.configuration,
               );
-          } else
-            interactMarkups.push(
-              div(
-                { class: "interaction-segment" },
-                span({ class: "badge bg-secondary" }, "You"),
-                md.render(interact.content),
-              ),
-            );
-          break;
-        case "assistant":
-        case "system":
-          for (const tool_call of interact.tool_calls || []) {
-            const toolSkill = find_tool(
-              tool_call.function?.name,
-              action.configuration,
-            );
-            if (toolSkill) {
-              const row = JSON.parse(tool_call.function.arguments);
-              if (toolSkill.tool.renderToolCall) {
-                const rendered = await toolSkill.tool.renderToolCall(row, {
-                  req,
-                });
-                if (rendered)
-                  interactMarkups.push(
-                    wrapSegment(
-                      wrapCard(
-                        toolSkill.skill.skill_label ||
-                          toolSkill.skill.constructor.skill_name,
-                        rendered,
+              if (toolSkill) {
+                const row = JSON.parse(tool_call.function.arguments);
+                if (toolSkill.tool.renderToolCall) {
+                  const rendered = await toolSkill.tool.renderToolCall(row, {
+                    req,
+                  });
+                  if (rendered)
+                    interactMarkups.push(
+                      wrapSegment(
+                        wrapCard(
+                          toolSkill.skill.skill_label ||
+                            toolSkill.skill.constructor.skill_name,
+                          rendered,
+                        ),
+                        action.name,
                       ),
-                      action.name,
-                    ),
-                  );
+                    );
+                }
               }
             }
-          }
-          for (const image_call of interact.content?.image_calls || []) {
-            const toolSkill = find_image_tool(action.configuration);
-            if (toolSkill) {
-              if (toolSkill.tool.renderToolResponse) {
-                const rendered = await toolSkill.tool.renderToolResponse(
-                  image_call,
-                  {
-                    req,
-                  },
-                );
+            for (const image_call of interact.content?.image_calls || []) {
+              const toolSkill = find_image_tool(action.configuration);
+              if (toolSkill) {
+                if (toolSkill.tool.renderToolResponse) {
+                  const rendered = await toolSkill.tool.renderToolResponse(
+                    image_call,
+                    {
+                      req,
+                    },
+                  );
 
-                if (rendered)
-                  interactMarkups.push(
-                    wrapSegment(
-                      wrapCard(
-                        toolSkill.skill.skill_label ||
-                          toolSkill.skill.constructor.skill_name,
-                        rendered,
+                  if (rendered)
+                    interactMarkups.push(
+                      wrapSegment(
+                        wrapCard(
+                          toolSkill.skill.skill_label ||
+                            toolSkill.skill.constructor.skill_name,
+                          rendered,
+                        ),
+                        action.name,
                       ),
-                      action.name,
-                    ),
-                  );
+                    );
+                }
               }
             }
-          }
-          if (
-            typeof interact.content === "string" ||
-            typeof interact.content?.content === "string"
-          )
-            interactMarkups.push(
-              div(
-                { class: "interaction-segment" },
-                span({ class: "badge bg-secondary" }, action.name),
-                typeof interact.content === "string"
-                  ? md.render(interact.content)
-                  : typeof interact.content?.content === "string"
-                    ? md.render(interact.content.content)
-                    : interact.content,
-              ),
-            );
-          break;
-        case "tool":
-          if (interact.content !== "Action run") {
-            let markupContent;
-            const toolSkill = find_tool(interact.name, action.configuration);
-            try {
-              if (toolSkill?.tool?.renderToolResponse)
-                markupContent = await toolSkill?.tool?.renderToolResponse?.(
-                  JSON.parse(interact.content),
-                  {
-                    req,
-                  },
-                );
-            } catch {
-              markupContent = pre(interact.content);
-            }
-            if (markupContent)
+            if (
+              typeof interact.content === "string" ||
+              typeof interact.content?.content === "string"
+            )
               interactMarkups.push(
-                wrapSegment(
-                  wrapCard(
-                    toolSkill?.skill?.skill_label ||
-                      toolSkill?.skill?.constructor.skill_name ||
-                      interact.name,
-                    markupContent,
-                  ),
-                  action.name,
+                div(
+                  { class: "interaction-segment" },
+                  span({ class: "badge bg-secondary" }, action.name),
+                  typeof interact.content === "string"
+                    ? md.render(interact.content)
+                    : typeof interact.content?.content === "string"
+                      ? md.render(interact.content.content)
+                      : interact.content,
                 ),
               );
-          }
-          break;
+            break;
+          case "tool":
+            if (interact.content !== "Action run") {
+              let markupContent;
+              const toolSkill = find_tool(interact.name, action.configuration);
+              try {
+                if (toolSkill?.tool?.renderToolResponse)
+                  markupContent = await toolSkill?.tool?.renderToolResponse?.(
+                    JSON.parse(interact.content),
+                    {
+                      req,
+                    },
+                  );
+              } catch {
+                markupContent = pre(interact.content);
+              }
+              if (markupContent)
+                interactMarkups.push(
+                  wrapSegment(
+                    wrapCard(
+                      toolSkill?.skill?.skill_label ||
+                        toolSkill?.skill?.constructor.skill_name ||
+                        interact.name,
+                      markupContent,
+                    ),
+                    action.name,
+                  ),
+                );
+            }
+            break;
+        }
       }
-    }
     runInteractions = interactMarkups.join("");
   }
   const skill_form_widgets = [];
@@ -390,10 +413,12 @@ const run = async (
   }
 
   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 input_form = form(
     {
-      onsubmit: `event.preventDefault();spin_send_button();view_post('${viewname}', 'interact', new FormData(this), processCopilotResponse);return false;`,
+      onsubmit: `event.preventDefault();spin_send_button();view_post('${viewname}', 'interact', new FormData(this), ${dyn_updates ? "null" : "processCopilotResponse"});return false;`,
       class: ["form-namespace copilot mt-2 agent-view"],
       method: "post",
     },
@@ -455,68 +480,73 @@ const run = async (
         div({ class: "next_response_scratch" }),
   );
 
-  const prev_runs_side_bar = div(
-    div(
-      {
-        class: "d-flex justify-content-between align-middle mb-2",
-      },
-      div(
-        { class: "d-flex" },
-        i({
-          class: "fas fa-caret-down me-1 session-open-sessions",
-          onclick: "close_session_list()",
-        }),
-        h5(req.__("Sessions")),
-      ),
-      button(
-        {
-          type: "button",
-          class: "btn btn-secondary btn-sm py-0",
-          style: "font-size: 0.9em;height:1.5em",
-          onclick: "unset_state_field('run_id')",
-          title: "New session",
-        },
-        i({ class: "fas fa-redo fa-sm" }),
-      ),
-    ),
-    prevRuns.map((run) =>
-      div(
-        {
-          onclick: `set_state_field('run_id',${run.id})`,
-          class: "prevcopilotrun border p-2",
-        },
+  const prev_runs_side_bar = show_prev_runs
+    ? div(
         div(
-          { class: "d-flex justify-content-between" },
-          localeDateTime(run.started_at),
-          i({
-            class: "far fa-trash-alt",
-            onclick: `delprevrun(event, ${run.id})`,
-          }),
+          {
+            class: "d-flex justify-content-between align-middle mb-2",
+          },
+          div(
+            { class: "d-flex" },
+            i({
+              class: "fas fa-caret-down me-1 session-open-sessions",
+              onclick: "close_session_list()",
+            }),
+            h5(req.__("Sessions")),
+          ),
+          button(
+            {
+              type: "button",
+              class: "btn btn-secondary btn-sm py-0",
+              style: "font-size: 0.9em;height:1.5em",
+              onclick: "unset_state_field('run_id')",
+              title: "New session",
+            },
+            i({ class: "fas fa-redo fa-sm" }),
+          ),
         ),
+        prevRuns.map((run) =>
+          div(
+            {
+              onclick: `set_state_field('run_id',${run.id})`,
+              class: "prevcopilotrun border p-2",
+            },
+            div(
+              { class: "d-flex justify-content-between" },
+              localeDateTime(run.started_at),
+              i({
+                class: "far fa-trash-alt",
+                onclick: `delprevrun(event, ${run.id})`,
+              }),
+            ),
 
-        p({ class: "prevrun_content" }, run.context.interactions[0]?.content),
-      ),
-    ),
-  );
-  const main_chat = div(
-    { class: "card" },
+            p(
+              { class: "prevrun_content" },
+              run.context.interactions
+                .find((i) => typeof i?.content === "string")
+                ?.content?.substring?.(0, 80),
+            ),
+          ),
+        ),
+      )
+    : "";
+
+  const main_inner = div(
     div(
-      { class: "card-body" },
-      div(
-        {
-          class: "open-prev-runs",
-          style: prev_runs_closed ? {} : { display: "none" },
-          onclick: "open_session_list()",
-        },
-        i({
-          class: "fas fa-caret-right me-1",
-        }),
-        req.__("Sessions"),
-      ),
-      div({ id: "copilotinteractions" }, runInteractions),
-      input_form,
-      style(
-        `div.interaction-segment:not(:first-child) {border-top: 1px solid #e7e7e7; }
+      {
+        class: "open-prev-runs",
+        style: prev_runs_closed ? {} : { display: "none" },
+        onclick: "open_session_list()",
+      },
+      i({
+        class: "fas fa-caret-right me-1",
+      }),
+      req.__("Sessions"),
+    ),
+    div({ id: "copilotinteractions" }, runInteractions),
+    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;}            
@@ -573,9 +603,10 @@ const run = async (
     margin-bottom: 0px;
     display: block;
     text-overflow: ellipsis;}`,
-      ),
-      script(
-        `
+    ),
+    script(domReady(`$( "#inputuserinput" ).autogrow({paddingBottom: 20});`)),
+    script(
+      `
     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()
@@ -587,8 +618,10 @@ const run = async (
     function get_run_id(elem) {
         return $("input[name=run_id").val()
     }
-    function processCopilotResponse(res) {
+    function processCopilotResponse(res) {        
+        console.log("processCopilotResponse", res)
         const hadFile = $("input#attach_agent_image").val();
+        let fileBadge = hadFile ? '<span class="badge text-bg-info"><i class="fas fa-image me-1"></i>'+$("input#attach_agent_image")[0].files?.item?.(0)?.name||"File"+'</span>': ""
         $("span.filename-label").text("");
         $("input#attach_agent_image").val(null);
         $("#sendbuttonicon").attr("class","far fa-paper-plane");
@@ -596,15 +629,14 @@ const run = async (
         if(res.run_id && (!$runidin.val() || $runidin.val()=="undefined"))
           $runidin.val(res.run_id);
         const wrapSegment = (html, who) => '<div class="interaction-segment"><span class="badge bg-secondary">'+who+'</span>'+html+'</div>'
-        $("#copilotinteractions").append(wrapSegment('<p>'+$("textarea[name=userinput]").val()+'</p>', "You"))
-        if(hadFile)
-          $("#copilotinteractions").append(wrapSegment('File', "You"))
+        $("#copilotinteractions").append(wrapSegment('<p>'+$("textarea[name=userinput]").val()+'</p>'+fileBadge, "You"))
         $("textarea[name=userinput]").val("")
         $('form.agent-view div.next_response_scratch').html("")
         window['stream scratch ${viewname} ${rndid}'] = []
         if(res.response)
             $("#copilotinteractions").append(res.response)
     }
+    window.processCopilotResponse = processCopilotResponse;
     function agent_file_attach(e) {
         $(".attach_agent_image_wrap span.filename-label").text(e.target.files[0].name)
     }
@@ -648,7 +680,7 @@ const run = async (
         }
     }
     function submitOnEnter(event) {
-        if (event.which === 13) {
+        if (event.which === 13 && !event.shiftKey) {
             if (!event.repeat) {
                 const newEvent = new Event("submit", {cancelable: true});
                 event.target.form.dispatchEvent(newEvent);
@@ -661,14 +693,17 @@ const run = async (
     function spin_send_button() {
       $("#sendbuttonicon").attr("class","fas fa-spinner fa-spin");
     };`,
-        stream &&
-          domReady(
-            `$('form.agent-view input[name=page_load_tag]').val(window._sc_pageloadtag)`,
-          ),
-        initial_q && domReady("$('form.copilot').submit()"),
-      ),
+      stream &&
+        domReady(
+          `$('form.agent-view input[name=page_load_tag]').val(window._sc_pageloadtag)`,
+        ),
+      initial_q && domReady("$('form.copilot').submit()"),
     ),
   );
+  const main_chat =
+    layout === "No card"
+      ? div({ class: "mx-1" }, main_inner)
+      : div({ class: "card" }, div({ class: "card-body" }, main_inner));
 
   return show_prev_runs
     ? div(
@@ -705,17 +740,16 @@ const interact = async (table_id, viewname, config, body, { req, res }) => {
       trigger_id: config.action_id,
       context: {
         implemented_fcall_ids: [],
-        interactions: [...ini_interacts, { role: "user", content: userinput }],
+        interactions: [...ini_interacts],
+        html_interactions: [],
         funcalls: {},
         triggering_row_id,
       },
     });
   } else {
     run = await WorkflowRun.findOne({ id: +run_id });
-    await addToContext(run, {
-      interactions: [{ role: "user", content: userinput }],
-    });
   }
+  let fileBadges = "";
   if (config.image_upload && req.files?.file) {
     const file = await File.from_req_files(
       req.files.file,
@@ -723,6 +757,11 @@ const interact = async (table_id, viewname, config, body, { req, res }) => {
       100,
       // file_field?.attributes?.folder
     );
+    fileBadges = span(
+      { class: "badge text-bg-info" },
+      i({ class: "fas fa-image me-1" }),
+      file.filename,
+    );
     const baseUrl = getState().getConfig("base_url").replace(/\/$/, "");
     let imageurl;
     if (
@@ -735,24 +774,22 @@ const interact = async (table_id, viewname, config, body, { req, res }) => {
       const b64 = await file.get_contents("base64");
       imageurl = `data:${file.mimetype};base64,${b64}`;
     }
+    await getState().functions.llm_add_message.run("image", imageurl, {
+      chat: run.context.interactions || [],
+    });
     await addToContext(run, {
-      interactions: [
-        {
-          role: "user",
-          content: [
-            {
-              type: "image_url",
-              image_url: {
-                url: imageurl,
-              },
-            },
-          ],
-        },
-      ],
+      interactions: run.context.interactions || [],
     });
   }
-
-  return await process_interaction(
+  await addToContext(run, {
+    interactions: [
+      ...(run.context.interactions || []),
+      { role: "user", content: userinput },
+    ],
+    html_interactions: [wrapSegment(p(userinput) + fileBadges, "You")],
+  });
+  const dyn_updates = getState().getConfig("enable_dynamic_updates", true);
+  const process_promise = process_interaction(
     run,
     action.configuration,
     req,
@@ -760,7 +797,21 @@ const interact = async (table_id, viewname, config, body, { req, res }) => {
     [],
     triggering_row,
     config,
+    dyn_updates,
   );
+  if (dyn_updates) {
+    process_promise.catch((e) => {
+      console.error(e);
+      getState().emitDynamicUpdate(
+        db.getTenantSchema(),
+        {
+          error: e?.message || e,
+        },
+        [req.user.id],
+      );
+    });
+    return;
+  } else return await process_promise;
 };
 
 const delprevrun = async (table_id, viewname, config, body, { req, res }) => {
@@ -845,36 +896,42 @@ const skillroute = async (table_id, viewname, config, body, { req, res }) => {
     },
   };
 };
-const wrapAction = (
-  inner_markup,
+
+const execute_user_action = async (
+  table_id,
   viewname,
-  tool_call,
-  actionClass,
-  implemented,
-  run,
-) =>
-  wrapCard(
-    actionClass.title,
-    inner_markup + implemented
-      ? button(
-          {
-            type: "button",
-            class: "btn btn-secondary d-block mt-3 float-end",
-            disabled: true,
-          },
-          i({ class: "fas fa-check me-1" }),
-          "Applied",
-        )
-      : button(
-          {
-            type: "button",
-            id: "exec-" + tool_call.id,
-            class: "btn btn-primary d-block mt-3 float-end",
-            onclick: `press_store_button(this, true);view_post('${viewname}', 'execute', {fcall_id: '${tool_call.id}', run_id: ${run.id}}, processExecuteResponse)`,
-          },
-          "Apply",
-        ) + div({ id: "postexec-" + tool_call.id }),
+  config,
+  body,
+  { req, res },
+) => {
+  const { run_id, rndid, uaname } = body;
+
+  const action = await Trigger.findOne({ id: config.action_id });
+  const run = await WorkflowRun.findOne({ id: +run_id });
+  //console.log("run uas",run.context.user_actions );
+
+  if (!run) return;
+  const instances = get_skill_instances(action.configuration);
+  const instance = instances.find((i) => i.userActions?.[uaname]);
+  //console.log({ instance });
+
+  if (!instance) return;
+  const uadata = (run.context.user_actions || []).find(
+    (ua) => ua.rndid === rndid,
   );
+  if (!uadata) return;
+  const result = await instance.userActions[uaname]({
+    user: req.user,
+    ...uadata.tool_call.input,
+    ...uadata.input,
+  });
+  return {
+    json: {
+      success: "ok",
+      ...result,
+    },
+  };
+};
 
 module.exports = {
   name: "Agent Chat",
@@ -884,5 +941,5 @@ module.exports = {
   //tableless: true,
   table_optional: true,
   run,
-  routes: { interact, delprevrun, debug_info, skillroute },
+  routes: { interact, delprevrun, debug_info, skillroute, execute_user_action },
 };