@saltcorn/copilot 0.6.2 → 0.7.0

package/agent-skills/pagegen.js

@@ -0,0 +1,162 @@
+const {
+  div,
+  pre,
+  code,
+  a,
+  text,
+  escape,
+  iframe,
+  text_attr,
+} = require("@saltcorn/markup/tags");
+const Workflow = require("@saltcorn/data/models/workflow");
+const Form = require("@saltcorn/data/models/form");
+const File = require("@saltcorn/data/models/file");
+const Table = require("@saltcorn/data/models/table");
+const View = require("@saltcorn/data/models/view");
+const Page = require("@saltcorn/data/models/page");
+const Trigger = require("@saltcorn/data/models/trigger");
+const FieldRepeat = require("@saltcorn/data/models/fieldrepeat");
+const { getState } = require("@saltcorn/data/db/state");
+const db = require("@saltcorn/data/db");
+const { eval_expression } = require("@saltcorn/data/models/expression");
+const { interpolate } = require("@saltcorn/data/utils");
+const { features } = require("@saltcorn/data/db/state");
+const GeneratePage = require("../actions/generate-page");
+
+//const { fieldProperties } = require("./helpers");
+
+class GeneratePageSkill {
+  static skill_name = "Generate Page";
+
+  get skill_label() {
+    return "Generate Page";
+  }
+
+  constructor(cfg) {
+    Object.assign(this, cfg);
+  }
+
+  async systemPrompt() {
+    return await GeneratePage.system_prompt();
+  }
+
+  static async configFields() {
+    return [
+      {
+        name: "convert_to_saltcorn",
+        label: "Editable format",
+        sublabel: "Convert to Saltcorn editable pages",
+        type: "Bool",
+      },
+    ];
+  }
+  get userActions() {
+    return {
+      async build_copilot_page_gen({ user, name, title, description, html }) {
+        const file = await File.from_contents(
+          `${name}.html`,
+          "text/html",
+          html,
+          user.id,
+          100,
+        );
+
+        await Page.create({
+          name,
+          title,
+          description,
+          min_role: 100,
+          layout: { html_file: file.path_to_serve },
+        });
+        setTimeout(() => getState().refresh_pages(), 200);
+        return {
+          notify: `Page saved: <a target="_blank" href="/page/${name}">${name}</a>`,
+        };
+      },
+    };
+  }
+  provideTools = () => {
+    let properties = {};
+    (this.toolargs || []).forEach((arg) => {
+      properties[arg.name] = {
+        description: arg.description,
+        type: arg.argtype,
+      };
+      if (arg.options && arg.argtype === "string")
+        properties[arg.name].enum = arg.options.split(",").map((s) => s.trim());
+    });
+
+    return {
+      type: "function",
+      process: async ({ name }) => {
+        return "Metadata recieved";
+      },
+      postProcess: async ({ tool_call, generate }) => {
+        const str = await generate(
+          `Now generate the contents of the ${tool_call.input.name} page with HTML`,
+        );
+        const html = str.includes("```html")
+          ? str.split("```html")[1].split("```")[0]
+          : str;
+
+        return {
+          stop: true,
+          add_response: iframe({
+            srcdoc: text_attr(html),
+            width: 500,
+            height: 800,
+          }),
+          add_system_prompt: `If the user asks you to regenerate the page, 
+          you must run the generate_page tool again. After running this tool 
+          you will be prompted to generate the html again. You should repeat 
+          the html from the previous answer except for the changes the user 
+          is requesting.`,
+          add_user_action: {
+            name: "build_copilot_page_gen",
+            type: "button",
+            label: "Save page",
+            input: { html },
+          },
+        };
+      },
+
+      /*renderToolCall({ phrase }, { req }) {
+        return div({ class: "border border-primary p-2 m-2" }, phrase);
+      },*/
+      renderToolResponse: async (response, { req }) => {
+        return null;
+      },
+      function: {
+        name: "generate_page",
+        description: "Generate a page with HTML.",
+        parameters: {
+          type: "object",
+          required: ["name", "title", "min_role", "page_type"],
+          properties: {
+            name: {
+              description: `The name of the page, this should be a short name which is part of the url. `,
+              type: "string",
+            },
+            title: {
+              description: "Page title, this is in the <title> tag.",
+              type: "string",
+            },
+            description: {
+              description:
+                "A longer description that is not visible but appears in the page header and is indexed by search engines",
+              type: "string",
+            },
+            page_type: {
+              description:
+                "The type of page to generate: a Marketing page if for promotional purposes, such as a landing page or a brouchure, with an appealing design. An Application page is simpler and an integrated part of the application",
+              type: "string",
+              enum: ["Marketing page", "Application page"],
+            },
+          },
+        },
+      },
+    };
+  };
+}
+
+module.exports = GeneratePageSkill;

package/common.js

@@ -7,6 +7,7 @@ const Form = require("@saltcorn/data/models/form");
 const View = require("@saltcorn/data/models/view");
 const Trigger = require("@saltcorn/data/models/trigger");
 const { getState } = require("@saltcorn/data/db/state");
+const voidHtmlTags = new Set(require("html-tags/void"));
 
 const parseCSS = require("style-to-object").default;
 const MarkdownIt = require("markdown-it"),
@@ -259,13 +260,6 @@ function parseHTML(str, processAll) {
               .join("")}</style>`,
             text_strings: [node.childNodes.map((n) => n.toString()).join("")],
           };
-        case "input":
-          return {
-            type: "blank",
-            isHTML: true,
-            contents: node.toString(),
-            text_strings: [],
-          };
         case "a":
           return {
             type: "link",
@@ -331,15 +325,23 @@ function parseHTML(str, processAll) {
             : node.childNodes.length === 1
             ? go(node.childNodes[0]) || ""
             : { above: node.childNodes.map(go).filter(Boolean) };
-          return {
-            type: "container",
-            ...(node.rawTagName && node.rawTagName !== "div"
-              ? { htmlElement: node.rawTagName }
-              : {}),
-            ...(node.id ? { customId: node.id } : {}),
-            customClass: (node.classList.value || []).join(" "),
-            contents: containerContents,
-          };
+          if (voidHtmlTags.has(node.rawTagName))
+            return {
+              type: "blank",
+              isHTML: true,
+              contents: node.toString(),
+              text_strings: [],
+            };
+          else
+            return {
+              type: "container",
+              ...(node.rawTagName && node.rawTagName !== "div"
+                ? { htmlElement: node.rawTagName }
+                : {}),
+              ...(node.id ? { customId: node.id } : {}),
+              customClass: (node.classList.value || []).join(" "),
+              contents: containerContents,
+            };
       }
     } else if (node.constructor.name === "TextNode") {
       if (!node._rawText || !node._rawText.trim()) return null;

package/index.js

@@ -12,4 +12,7 @@ module.exports = {
     ? { copilot_generate_workflow: require("./workflow-gen") }
     : {},
   actions: { copilot_generate_page: require("./page-gen-action") },
+  exchange: {
+    agent_skills: [require("./agent-skills/pagegen.js")],
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/copilot",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "AI assistant for building Saltcorn applications",
   "main": "index.js",
   "dependencies": {
@@ -9,7 +9,14 @@
     "node-sql-parser": "4.15.0",
     "markdown-it": "14.1.0",
     "style-to-object": "1.0.8",
-    "node-html-parser": "7.0.1"
+    "node-html-parser": "7.0.1",
+    "html-tags": "3.3.1"
+  },
+  "devDependencies": {
+    "jest": "^29.7.0"
+  },
+  "scripts": {
+    "test": "jest tests --runInBand"
   },
   "author": "Tom Nielsen",
   "license": "MIT",
@@ -21,7 +28,8 @@
     },
     "env": {
       "node": true,
-      "es6": true
+      "es6": true,
+      "jest/globals": true
     },
     "rules": {
       "no-unused-vars": "off",

package/page-gen-action.js

@@ -36,6 +36,14 @@ module.exports = {
           class: "validate-expression",
           type: "String",
         },
+        {
+          name: "existing_page_html",
+          label: "Existing page HTML",
+          sublabel:
+            "Optional. An expression, based on the context, for the existing page HTML to be edited",
+          class: "validate-expression",
+          type: "String",
+        },
         {
           name: "answer_field",
           label: "Answer variable",
@@ -101,6 +109,7 @@ module.exports = {
       prompt_template,
       answer_field,
       image_prompt,
+      existing_page_html,
       chat_history_field,
       convert_to_saltcorn,
       model,
@@ -113,9 +122,20 @@ module.exports = {
         prompt_formula,
         row,
         user,
-        "copilot_generate_page prompt formula"
+        "copilot_generate_page prompt formula",
       );
     else prompt = row[prompt_field];
+    
+    if(existing_page_html) {
+      exist_html = eval_expression(
+        existing_page_html,
+        row,
+        user,
+        "copilot_generate_page existing page html",
+      );
+      prompt = "This is the HTML code for the existing pages you should edit:\n\n```html\n"+exist_html+"\n```\n\n"+prompt
+    }
+    
     const opts = {};
 
     if (model) opts.model = model;
@@ -136,7 +156,7 @@ module.exports = {
         image_prompt,
         row,
         user,
-        "copilot_generate_page image prompt"
+        "copilot_generate_page image prompt",
       );
 
       chat = [];
@@ -159,8 +179,10 @@ module.exports = {
       tools,
       chat,
       systemPrompt,
-    });
-    const initial_info = initial_ans.tool_calls[0].input;
+    });    
+    const initial_info =
+      initial_ans.tool_calls[0].input ||
+      JSON.parse(initial_ans.tool_calls[0].function.arguments);
     const full = await GeneratePage.follow_on_generate(initial_info);
     const prompt_part_2 = convert_to_saltcorn
       ? `Only generate the inner part of the body. 
@@ -196,7 +218,7 @@ module.exports = {
               },
             }
           : undefined,
-      }
+      },
     );
 
     const use_page_name = page_name ? interpolate(page_name, row, user) : "";
@@ -210,7 +232,7 @@ module.exports = {
           "text/html",
           wrapExample(page_html),
           user.id,
-          100
+          100,
         );
         await Page.create({
           name: use_page_name + "_html",
@@ -225,7 +247,7 @@ module.exports = {
           "text/html",
           page_html,
           user.id,
-          100
+          100,
         );
         layout = { html_file: file.path_to_serve };
       }

package/tests/configs.js

@@ -0,0 +1,34 @@
+module.exports = [
+  {
+    name: "OpenAI completions",
+    model: "gpt-4.1-mini",
+    api_key: process.env.OPENAI_API_KEY,
+    backend: "OpenAI",
+    embed_model: "text-embedding-3-small",
+    image_model: "gpt-image-1",
+    temperature: 0.7,
+    responses_api: false,
+    ai_sdk_provider: "OpenAI",
+  },
+  {
+    name: "OpenAI responses",
+    model: "gpt-4.1-mini",
+    api_key: process.env.OPENAI_API_KEY,
+    backend: "OpenAI",
+    embed_model: "text-embedding-3-small",
+    image_model: "gpt-image-1",
+    temperature: 0.7,
+    responses_api: true,
+    ai_sdk_provider: "OpenAI",
+  },
+  {
+    name: "AI SDK OpenAI",
+    model: "gpt-4.1-mini",
+    api_key: process.env.OPENAI_API_KEY,
+    backend: "AI SDK",
+    embed_model: "text-embedding-3-small",
+    image_model: "gpt-image-1",
+    temperature: 0.7,
+    ai_sdk_provider: "OpenAI",
+  },
+];

package/tests/copilot.test.js

@@ -0,0 +1,76 @@
+const { getState } = require("@saltcorn/data/db/state");
+const View = require("@saltcorn/data/models/view");
+const Table = require("@saltcorn/data/models/table");
+const Plugin = require("@saltcorn/data/models/plugin");
+const Trigger = require("@saltcorn/data/models/trigger");
+const WorkflowStep = require("@saltcorn/data/models/workflow_step");
+const WorkflowRun = require("@saltcorn/data/models/workflow_run");
+
+const { mockReqRes } = require("@saltcorn/data/tests/mocks");
+const { afterAll, beforeAll, describe, it, expect } = require("@jest/globals");
+
+afterAll(require("@saltcorn/data/db").close);
+beforeAll(async () => {
+  await require("@saltcorn/data/db/reset_schema")();
+  await require("@saltcorn/data/db/fixtures")();
+
+  getState().registerPlugin("base", require("@saltcorn/data/base-plugin"));
+});
+
+ /* 
+ 
+ RUN WITH:
+  saltcorn dev:plugin-test -d ~/copilot -o ~/large-language-model/
+ 
+ */
+
+jest.setTimeout(60000);
+
+const configs = require("./configs.js");
+
+for (const nameconfig of configs) {
+  const { name, ...config } = nameconfig;
+  describe("copilot_generate_page action with " + name, () => {
+    beforeAll(async () => {
+      getState().registerPlugin(
+        "@saltcorn/large-language-model",
+        require("@saltcorn/large-language-model"),
+        config,
+      );
+      getState().registerPlugin("@saltcorn/copilot", require(".."));
+    });
+    it("generates page", async () => {
+      const trigger = await Trigger.create({
+        action: "Workflow",
+        when_trigger: "Never",
+        name: "genpagewf",
+      });
+      await WorkflowStep.create({
+        trigger_id: trigger.id,
+        name: "first_step",
+        next_step: "second_step",
+        action_name: "SetContext",
+        initial_step: true,
+        configuration: {
+          ctx_values: `{prompt:"Generate a page for a rural bakery located in a big city"}`,
+        },
+      });
+      await WorkflowStep.create({
+        trigger_id: trigger.id,
+        name: "second_step",
+        next_step: "",
+        action_name: "copilot_generate_page",
+        configuration: {
+          prompt_template: `{{ prompt }}`,
+          answer_field: "pagecode",
+        },
+      });
+      const wfrun = await WorkflowRun.create({
+        trigger_id: trigger.id,
+      });
+      const result = await wfrun.run({ user: { role_id: 1 } });
+      //console.log("result", result, wfrun.context);
+      expect(result.pagecode).toContain("<!DOCTYPE html>");
+    });
+  });
+}