@saltcorn/copilot 0.2.0 → 0.3.1

package/chat-copilot.js

@@ -0,0 +1,471 @@
+const Field = require("@saltcorn/data/models/field");
+const Table = require("@saltcorn/data/models/table");
+const Form = require("@saltcorn/data/models/form");
+const View = require("@saltcorn/data/models/view");
+const Trigger = require("@saltcorn/data/models/trigger");
+const { findType } = require("@saltcorn/data/models/discovery");
+const { save_menu_items } = require("@saltcorn/data/models/config");
+const db = require("@saltcorn/data/db");
+const WorkflowRun = require("@saltcorn/data/models/workflow_run");
+const { localeDateTime } = require("@saltcorn/markup");
+const {
+  div,
+  script,
+  domReady,
+  pre,
+  code,
+  input,
+  h4,
+  style,
+  h5,
+  button,
+  text_attr,
+  i,
+  p,
+  span,
+  small,
+  form,
+  textarea,
+} = require("@saltcorn/markup/tags");
+const { getState } = require("@saltcorn/data/db/state");
+const {
+  getCompletion,
+  getPromptFromTemplate,
+  incompleteCfgMsg,
+} = require("./common");
+
+const get_state_fields = () => [];
+
+const run = async (table_id, viewname, cfg, state, { res, req }) => {
+  const prevRuns = (
+    await WorkflowRun.find(
+      { trigger_id: null },
+      { orderBy: "started_at", orderDesc: true, limit: 30 }
+    )
+  ).filter((r) => r.context.interactions);
+  const cfgMsg = incompleteCfgMsg();
+  if (cfgMsg) return cfgMsg;
+  let runInteractions = "";
+  if (state.run_id) {
+    const run = prevRuns.find((r) => r.id == state.run_id);
+    const interactMarkups = [];
+    for (const interact of run.context.interactions) {
+      switch (interact.role) {
+        case "user":
+          interactMarkups.push(
+            div(
+              { class: "interaction-segment" },
+              span({ class: "badge bg-secondary" }, "You"),
+              p(interact.content)
+            )
+          );
+          break;
+        case "assistant":
+        case "system":
+          if (interact.tool_calls) {
+            for (const tool_call of interact.tool_calls) {
+              const markup = await renderToolcall(
+                tool_call,
+                viewname,
+                (run.context.implemented_fcall_ids || []).includes(
+                  tool_call.id
+                ),
+                run
+              );
+              interactMarkups.push(
+                div(
+                  { class: "interaction-segment" },
+                  span({ class: "badge bg-secondary" }, "Copilot"),
+                  markup
+                )
+              );
+            }
+          } else
+            interactMarkups.push(
+              div(
+                { class: "interaction-segment" },
+                span({ class: "badge bg-secondary" }, "Copilot"),
+                p(interact.content)
+              )
+            );
+          break;
+        case "tool":
+          //ignore
+          break;
+      }
+    }
+    runInteractions = interactMarkups.join("");
+  }
+  const input_form = form(
+    {
+      onsubmit:
+        "event.preventDefault();spin_send_button();view_post('Saltcorn Copilot', 'interact', $(this).serialize(), processCopilotResponse);return false;",
+      class: "form-namespace copilot mt-2",
+      method: "post",
+    },
+    input({
+      type: "hidden",
+      name: "_csrf",
+      value: req.csrfToken(),
+    }),
+    input({
+      type: "hidden",
+      class: "form-control  ",
+      name: "run_id",
+      value: state.run_id ? +state.run_id : undefined,
+    }),
+    div(
+      { class: "copilot-entry" },
+      textarea({
+        class: "form-control",
+        name: "userinput",
+        "data-fieldname": "userinput",
+        placeholder: "How can I help you?",
+        id: "inputuserinput",
+        rows: "3",
+        autofocus: true,
+      }),
+      span(
+        { class: "submit-button p-2", onclick: "$('form.copilot').submit()" },
+        i({ id: "sendbuttonicon", class: "far fa-paper-plane" })
+      )
+    ),
+
+    i(
+      small(
+        "Skills you can request: " +
+          actionClasses.map((ac) => ac.title).join(", ")
+      )
+    )
+  );
+  return {
+    widths: [3, 9],
+    gx: 3,
+    besides: [
+      {
+        type: "container",
+        contents: div(
+          div(
+            {
+              class: "d-flex justify-content-between align-middle mb-2",
+            },
+            h5("Sessions"),
+
+            button(
+              {
+                type: "button",
+                class: "btn btn-secondary btn-sm",
+                onclick: "unset_state_field('run_id')",
+                title: "New session",
+              },
+              i({ class: "fas fa-redo" })
+            )
+          ),
+          prevRuns.map((run) =>
+            div(
+              {
+                onclick: `set_state_field('run_id',${run.id})`,
+                class: "prevcopilotrun",
+              },
+              localeDateTime(run.started_at),
+
+              p(
+                { class: "prevrun_content" },
+                run.context.interactions[0]?.content
+              )
+            )
+          )
+        ),
+      },
+      {
+        type: "container",
+        contents: div(
+          { class: "card" },
+          div(
+            { class: "card-body" },
+            script({
+              src: `/static_assets/${db.connectObj.version_tag}/mermaid.min.js`,
+            }),
+            script(
+              { type: "module" },
+              `mermaid.initialize({securityLevel: 'loose'${
+                getState().getLightDarkMode(req.user) === "dark"
+                  ? ",theme: 'dark',"
+                  : ""
+              }});`
+            ),
+            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;}
+            div.prevcopilotrun {border-top: 1px solid #e7e7e7;border-right: 1px solid #e7e7e7;padding-top:3px; padding-bottom:3px; padding-right: 1rem;}
+            div.prevcopilotrun:hover {cursor: pointer}
+            .copilot-entry .submit-button:hover { cursor: pointer}
+
+            .copilot-entry .submit-button {
+              position: relative; 
+              top: -1.8rem;
+              left: 0.1rem;              
+            }
+            .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;}`
+            ),
+            script(`function processCopilotResponse(res) {
+        $("#sendbuttonicon").attr("class","far fa-paper-plane");
+        const $runidin= $("input[name=run_id")
+        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"))
+        $("textarea[name=userinput]").val("")
+
+        for(const action of res.actions||[]) {
+            $("#copilotinteractions").append(wrapSegment(action, "Copilot"))
+          
+        }
+
+        if(res.response)
+            $("#copilotinteractions").append(wrapSegment('<p>'+res.response+'</p>', "Copilot"))
+    }
+    function restore_old_button_elem(btn) {
+        const oldText = $(btn).data("old-text");
+        btn.html(oldText);
+        btn.css({ width: "" });
+        btn.removeData("old-text");
+    }
+    function processExecuteResponse(res) {
+        const btn = $("#exec-"+res.fcall_id)
+        restore_old_button_elem($("#exec-"+res.fcall_id))
+        btn.prop('disabled', true);
+        btn.html('<i class="fas fa-check me-1"></i>Applied')
+        btn.removeClass("btn-primary")
+        btn.addClass("btn-secondary")
+        if(res.postExec) {
+          $('#postexec-'+res.fcall_id).html(res.postExec)
+        }
+    }
+    function submitOnEnter(event) {
+        if (event.which === 13) {
+            if (!event.repeat) {
+                const newEvent = new Event("submit", {cancelable: true});
+                event.target.form.dispatchEvent(newEvent);
+            }
+
+            event.preventDefault(); // Prevents the addition of a new line in the text field
+        }        
+    }
+    document.getElementById("inputuserinput").addEventListener("keydown", submitOnEnter);
+    function spin_send_button() {
+      $("#sendbuttonicon").attr("class","fas fa-spinner fa-spin");
+    }
+`)
+          )
+        ),
+      },
+    ],
+  };
+};
+
+const ellipsize = (s, nchars) => {
+  if (!s || !s.length) return "";
+  if (s.length <= (nchars || 20)) return text_attr(s);
+  return text_attr(s.substr(0, (nchars || 20) - 3)) + "...";
+};
+
+const actionClasses = [
+  require("./actions/generate-workflow"),
+  require("./actions/generate-tables"),
+  require("./actions/generate-js-action"),
+];
+
+const getCompletionArguments = async () => {
+  const tools = [];
+  const sysPrompts = [];
+  for (const actionClass of actionClasses) {
+    tools.push({
+      type: "function",
+      function: {
+        name: actionClass.function_name,
+        description: actionClass.description,
+        parameters: await actionClass.json_schema(),
+      },
+    });
+    sysPrompts.push(await actionClass.system_prompt());
+  }
+  const systemPrompt =
+    "You are building application components in a database application builder called Saltcorn.\n\n" +
+    sysPrompts.join("\n\n");
+  return { tools, systemPrompt };
+};
+
+/*
+
+build a workflow that asks the user for their name and age
+
+*/
+
+const execute = async (table_id, viewname, config, body, { req }) => {
+  const { fcall_id, run_id } = body;
+
+  const run = await WorkflowRun.findOne({ id: +run_id });
+
+  const fcall = run.context.funcalls[fcall_id];
+  const actionClass = actionClasses.find(
+    (ac) => ac.function_name === fcall.name
+  );
+  const result = await actionClass.execute(JSON.parse(fcall.arguments), req);
+  await addToContext(run, { implemented_fcall_ids: [fcall_id] });
+  return { json: { success: "ok", fcall_id, ...(result || {}) } };
+};
+
+const interact = async (table_id, viewname, config, body, { req }) => {
+  const { userinput, run_id } = body;
+  let run;
+  if (!run_id || run_id === "undefined")
+    run = await WorkflowRun.create({
+      status: "Running",
+      context: {
+        implemented_fcall_ids: [],
+        interactions: [{ role: "user", content: userinput }],
+        funcalls: {},
+      },
+    });
+  else {
+    run = await WorkflowRun.findOne({ id: +run_id });
+    await addToContext(run, {
+      interactions: [{ role: "user", content: userinput }],
+    });
+  }
+  const complArgs = await getCompletionArguments();
+  complArgs.chat = run.context.interactions;
+  //console.log(complArgs);
+
+  //build a database for a bicycle rental company
+  //add a boolean field called "paid" to the payments table
+
+  const answer = await getState().functions.llm_generate.run(
+    userinput,
+    complArgs
+  );
+  await addToContext(run, {
+    interactions:
+      typeof answer === "object" && answer.tool_calls
+        ? [
+            { role: "assistant", tool_calls: answer.tool_calls },
+            ...answer.tool_calls.map((tc) => ({
+              role: "tool",
+              tool_call_id: tc.id,
+              name: tc.function.name,
+              content: "Action suggested to user.",
+            })),
+          ]
+        : [{ role: "assistant", content: answer }],
+  });
+  console.log("answer", answer);
+
+  if (typeof answer === "object" && answer.tool_calls) {
+    const actions = [];
+    for (const tool_call of answer.tool_calls) {
+      await addToContext(run, {
+        funcalls: { [tool_call.id]: tool_call.function },
+      });
+      const markup = await renderToolcall(tool_call, viewname, false, run);
+
+      actions.push(markup);
+    }
+    return { json: { success: "ok", actions, run_id: run.id } };
+  } else return { json: { success: "ok", response: answer, run_id: run.id } };
+};
+
+const renderToolcall = async (tool_call, viewname, implemented, run) => {
+  const fname = tool_call.function.name;
+  const actionClass = actionClasses.find((ac) => ac.function_name === fname);
+  const args = JSON.parse(tool_call.function.arguments);
+
+  const inner_markup = await actionClass.render_html(args);
+  return wrapAction(
+    inner_markup,
+    viewname,
+    tool_call,
+    actionClass,
+    implemented,
+    run
+  );
+};
+
+const wrapAction = (
+  inner_markup,
+  viewname,
+  tool_call,
+  actionClass,
+  implemented,
+  run
+) =>
+  div(
+    { class: "card mb-3" },
+    div({ class: "card-header" }, h5(actionClass.title)),
+    div(
+      { class: "card-body" },
+      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 })
+    )
+  );
+
+const addToContext = async (run, newCtx) => {
+  if (run.addToContext) return await run.addToContext(newCtx);
+  let changed = true;
+  Object.keys(newCtx).forEach((k) => {
+    if (Array.isArray(run.context[k])) {
+      if (!Array.isArray(newCtx[k]))
+        throw new Error("Must be array to append to array");
+      run.context[k].push(...newCtx[k]);
+      changed = true;
+    } else if (typeof run.context[k] === "object") {
+      if (typeof newCtx[k] !== "object")
+        throw new Error("Must be object to append to object");
+      Object.assign(run.context[k], newCtx[k]);
+      changed = true;
+    } else {
+      run.context[k] = newCtx[k];
+      changed = true;
+    }
+  });
+  if (changed) await run.update({ context: run.context });
+};
+
+module.exports = {
+  name: "Saltcorn Copilot",
+  display_state_form: false,
+  get_state_fields,
+  tableless: true,
+  singleton: true,
+  run,
+  routes: { interact, execute },
+};

package/common.js

@@ -57,4 +57,50 @@ const incompleteCfgMsg = () => {
   }
 };
 
-module.exports = { getCompletion, getPromptFromTemplate, incompleteCfgMsg };
+const toArrayOfStrings = (opts) => {
+  if (typeof opts === "string") return opts.split(",").map((s) => s.trim());
+  if (Array.isArray(opts))
+    return opts.map((o) => (typeof o === "string" ? o : o.value || o.name));
+};
+
+const fieldProperties = (field) => {
+  const props = {};
+  const typeName = field.type?.name || field.type || field.input_type;
+  if (field.isRepeat) {
+    props.type = "array";
+    const properties = {};
+    field.fields.map((f) => {
+      properties[f.name] = {
+        description: f.sublabel || f.label,
+        ...fieldProperties(f),
+      };
+    });
+    props.items = {
+      type: "object",
+      properties,
+    };
+  }
+  switch (typeName) {
+    case "String":
+      props.type = "string";
+      if (field.attributes?.options)
+        props.enum = toArrayOfStrings(field.attributes.options);
+      break;
+    case "Bool":
+      props.type = "boolean";
+      break;
+    case "Integer":
+      props.type = "integer";
+      break;
+    case "Float":
+      props.type = "number";
+      break;
+    case "select":
+      props.type = "string";
+      if (field.options) props.enum = toArrayOfStrings(field.options);
+      break;
+  }
+  return props;
+};
+
+module.exports = { getCompletion, getPromptFromTemplate, incompleteCfgMsg, fieldProperties };

package/index.js

@@ -11,7 +11,9 @@ module.exports = {
   sc_plugin_api_version: 1,
   //configuration_workflow,
   dependencies: ["@saltcorn/large-language-model"],
-  viewtemplates: [require("./action-builder"), require("./database-designer")],
+  viewtemplates: features.workflows
+    ? [require("./chat-copilot")]
+    : [require("./action-builder"), require("./database-designer")],
   functions: features.workflows
     ? { copilot_generate_workflow: require("./workflow-gen") }
     : {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/copilot",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "AI assistant for building Saltcorn applications",
   "main": "index.js",
   "dependencies": {
@@ -15,7 +15,7 @@
   "eslintConfig": {
     "extends": "eslint:recommended",
     "parserOptions": {
-      "ecmaVersion": 2020
+      "ecmaVersion": 2022
     },
     "env": {
       "node": true,

package/prompts/action-builder.txt

@@ -300,8 +300,4 @@ value should be an object with keys that are field variable names. Example:
 return { set_fields: {
     zidentifier: `${name.toUpperCase()}-${id}`
   }
-}
-
-Write the JavaScript code to implement the following functionality:
-
-{{ userPrompt }}
+}