@saltcorn/copilot 0.4.4 → 0.5.0

package/actions/generate-page.js

@@ -0,0 +1,450 @@
+const { getState } = require("@saltcorn/data/db/state");
+const WorkflowStep = require("@saltcorn/data/models/workflow_step");
+const Trigger = require("@saltcorn/data/models/trigger");
+const Page = require("@saltcorn/data/models/page");
+const Table = require("@saltcorn/data/models/table");
+const User = require("@saltcorn/data/models/user");
+const Field = require("@saltcorn/data/models/field");
+const { apply, removeAllWhiteSpace } = require("@saltcorn/data/utils");
+const { getActionConfigFields } = require("@saltcorn/data/plugin-helper");
+const { a, pre, script, div, code } = require("@saltcorn/markup/tags");
+const {
+  fieldProperties,
+  getPromptFromTemplate,
+  splitContainerStyle,
+  containerHandledStyles,
+  parseHTML,
+} = require("../common");
+const MarkdownIt = require("markdown-it"),
+  md = new MarkdownIt();
+
+class GeneratePage {
+  static title = "Generate Page";
+  static function_name = "generate_page";
+  static description = "Generate Page";
+
+  static async json_schema() {
+    const allPageNames = (await Page.find({})).map((p) => p.page);
+    let namedescription = `The name of the page, this should be a short name which is part of the url. `;
+    if (allPageNames.length) {
+      namedescription += `These are the names of the exising pages: ${allPageNames.join(
+        ", "
+      )}. Do not pick a name that is identical but follow the same naming convention.`;
+    }
+    const roles = await User.get_roles();
+    return {
+      type: "object",
+      required: ["name", "title", "min_role", "page_type"],
+      properties: {
+        name: {
+          description: namedescription,
+          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",
+        },
+        min_role: {
+          description:
+            "The minimum role needed to access the page. For pages accessible only by admin, use 'admin', pages with min_role 'public' is publicly accessible and also available to all users",
+          type: "string",
+          enum: roles.map((r) => r.role),
+        },
+        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"],
+        },
+      },
+    };
+  }
+  static async system_prompt() {
+    return `Use the generate_page to generate a page.`;
+  }
+  static async follow_on_generate({ name, page_type }) {
+    if (page_type === "Marketing page") {
+      return {
+        prompt:
+          "Generate the HTML for the web page using the Bootstrap 5 CSS framework.",
+      };
+    }
+    const prompt = `Now generate the contents of the ${name} page`;
+    const response_schema = {
+      type: "object",
+      properties: {
+        element: {
+          anyOf: [
+            {
+              type: "object",
+              description: "Position items next to each other in grid columns",
+              //required: ["name", "title", "min_role"],
+              properties: {
+                besides: {
+                  type: "array",
+                  items: {
+                    type: "object",
+                    $ref: "#",
+                  },
+                },
+                widths: {
+                  type: "array",
+                  items: {
+                    type: "integer",
+                    description:
+                      "The width of each column 1-12. The sum of all columns must equal 12",
+                  },
+                },
+              },
+            },
+            {
+              type: "object",
+              //required: ["name", "title", "min_role"],
+              description: "Position items vertically, each above the next",
+              properties: {
+                above: {
+                  type: "array",
+                  items: {
+                    type: "object",
+                    $ref: "#",
+                  },
+                },
+              },
+            },
+            {
+              type: "object",
+              required: ["type", "isHTML", "contents"],
+              description: "An element containing HTML",
+              properties: {
+                type: { const: "blank" },
+                isHTML: { const: true },
+                contents: {
+                  type: "string",
+                  description: "The HTML contents of this element",
+                },
+              },
+            },
+            {
+              type: "object",
+              required: ["type", "contents"],
+              description: "An element containing text",
+              properties: {
+                type: { const: "blank" },
+                contents: {
+                  type: "string",
+                  description: "The plain text contents of this element",
+                },
+                style: {
+                  type: "object",
+                  description:
+                    "Some CSS properties that can be applied to the text element",
+                  properties: {
+                    "font-size": {
+                      type: "string",
+                      description:
+                        "CSS size identifier, for example 12px or 2rem",
+                    },
+                    color: {
+                      type: "string",
+                      description:
+                        "CSS color specifier, for example #15d48a or rgb(0, 255, 0)",
+                    },
+                  },
+                },
+                textStyle: {
+                  type: "array",
+                  description: "The style to apply to the text",
+                  items: {
+                    type: "string",
+                    description:
+                      "h1-h6 to put in a header element. fst-italic for italic, text-muted for muted color, fw-bold for bold, text-underline for underline, small for smaller size, font-monospace for monospace font",
+                    enum: [
+                      "h1",
+                      "h2",
+                      "h3",
+                      "h4",
+                      "h5",
+                      "h6",
+                      "fst-italic",
+                      "text-muted",
+                      "fw-bold",
+                      "text-underline",
+                      "small",
+                      "font-monospace",
+                    ],
+                  },
+                },
+              },
+            },
+            {
+              type: "object",
+              required: ["type", "contents"],
+              description: "An container element that can set various styles",
+              properties: {
+                type: { const: "container" },
+                contents: {
+                  type: "object",
+                  $ref: "#",
+                },
+                style: {
+                  type: "string",
+                  description:
+                    "CSS properties to set on the container formatted as the html style attribute, with no CSS selector and separated by semi-colons. Example: color: #00ff00; margin-top: 5px",
+                },
+                customClass: {
+                  type: "string",
+                  description:
+                    "Custom class to set. You can use bootstrap 5 utility classes here as bootstrap 5 is loaded",
+                },
+                htmlElement: {
+                  type: "string",
+                  description: "The HTML element to use for the container",
+                  enum: [
+                    "div",
+                    "span",
+                    "article",
+                    "section",
+                    "header",
+                    "nav",
+                    "main",
+                    "aside",
+                    "footer",
+                  ],
+                },
+              },
+            },
+            {
+              type: "object",
+              description: "An image",
+              properties: {
+                type: { const: "image" },
+                description: {
+                  type: "string",
+                  description: "A description of the contents of the image",
+                },
+                width: {
+                  type: "integer",
+                  description: "The width of the image in px",
+                },
+                height: {
+                  type: "integer",
+                  description: "The height of the image in px",
+                },
+              },
+            },
+          ],
+        },
+      },
+    };
+    return { response_schema, prompt };
+  }
+
+  static walk_response(segment) {
+    let go = GeneratePage.walk_response;
+    if (!segment) return segment;
+    if (typeof segment === "string") return segment;
+    if (segment.element) return go(segment.element);
+    if (Array.isArray(segment)) {
+      return segment.map(go);
+    }
+    if (typeof segment.contents === "string") {
+      return { ...segment, contents: md.render(segment.contents) };
+    }
+    if (segment.type === "image") {
+      return {
+        type: "container",
+        style: {
+          height: `${segment.height}px`,
+          width: `${segment.width}px`,
+          "border-style": "solid",
+          "border-color": "#808080",
+          "border-width": "3px",
+          vAlign: "middle",
+          hAlign: "center",
+        },
+        contents: segment.description,
+      };
+    }
+    if (segment.type === "container") {
+      const { customStyle, style, display, overflow } = splitContainerStyle(
+        segment.style
+      );
+      return {
+        ...segment,
+        customStyle,
+        display,
+        overflow,
+        style,
+        contents: go(segment.contents),
+      };
+    }
+    if (segment.contents) {
+      return { ...segment, contents: go(segment.contents) };
+    }
+    if (segment.above) {
+      return { ...segment, above: go(segment.above) };
+    }
+    if (segment.besides) {
+      return { ...segment, besides: go(segment.besides) };
+    }
+  }
+
+  static render_html(attrs, contents) {
+    if (attrs.page_type === "Marketing page") {
+      return (
+        pre(code(JSON.stringify(attrs, null, 2))) +
+        pre(code(escapeHtml(contents || "")))
+      );
+    }
+
+    return (
+      pre(code(JSON.stringify(attrs, null, 2))) +
+      pre(
+        code(
+          escapeHtml(
+            JSON.stringify(
+              GeneratePage.walk_response(JSON.parse(contents)),
+              null,
+              2
+            )
+          )
+        )
+      )
+    );
+  }
+  static async execute(
+    { name, title, description, min_role, page_type },
+    req,
+    contents
+  ) {
+    console.log("execute", name, contents);
+    const roles = await User.get_roles();
+    const min_role_id = roles.find((r) => r.role === min_role).id;
+    let layout;
+    if (page_type === "Marketing page") {
+      layout = parseHTML(contents);
+    } else layout = GeneratePage.walk_response(JSON.parse(contents));
+    await Page.create({
+      name,
+      title,
+      description,
+      min_role: min_role_id,
+      layout,
+    });
+    return {
+      postExec:
+        "Page created. " +
+        a(
+          { target: "_blank", href: `/page/${name}`, class: "me-1" },
+          "Go to page"
+        ) +
+        " | " +
+        a(
+          { target: "_blank", href: `/pageedit/edit/${name}`, class: "ms-1" },
+          "Configure page"
+        ),
+    };
+  }
+}
+
+function escapeHtml(unsafe) {
+  return unsafe
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+parseHTML(`<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Popcorn Beer - Unleash the Flavor Explosion!</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+
+<header class="bg-warning text-dark py-5">
+    <div class="container text-center">
+        <h1 class="display-4">Popcorn Beer</h1>
+        <p class="lead">Unleash the Flavor Explosion!</p>
+    </div>
+</header>
+
+<section class="py-5">
+    <div class="container">
+        <div class="row align-items-center">
+            <div class="col-md-6">
+                <img src="your-image-url.jpg" alt="Popcorn Beer" class="img-fluid rounded">
+            </div>
+            <div class="col-md-6">
+                <h2>Discover the Unique Taste</h2>
+                <p>Introducing our popcorn-flavored beer, a delightful fusion of classic beer with a twist of popcorn essence. Experience the taste sensation that will keep you coming back for more.</p>
+                <a href="#purchase" class="btn btn-warning btn-lg mt-3">Buy Now</a>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="bg-light py-5">
+    <div class="container">
+        <h2 class="text-center mb-4">Why Choose Popcorn Beer?</h2>
+        <div class="row">
+            <div class="col-lg-4">
+                <div class="card mb-4">
+                    <div class="card-body text-center">
+                        <h5 class="card-title">Unique Flavor</h5>
+                        <p class="card-text">A perfect blend of beer and popcorn that tantalizes your taste buds.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-4">
+                <div class="card mb-4">
+                    <div class="card-body text-center">
+                        <h5 class="card-title">Premium Ingredients</h5>
+                        <p class="card-text">Crafted with the finest ingredients for an unparalleled taste.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-4">
+                <div class="card mb-4">
+                    <div class="card-body text-center">
+                        <h5 class="card-title">Perfect for Any Occasion</h5>
+                        <p class="card-text">Whether it's a movie night or a party, Popcorn Beer is your go-to drink.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="purchase" class="py-5">
+    <div class="container text-center">
+        <h2>Get Your Popcorn Beer Today!</h2>
+        <p class="mb-4">Available for purchase online and in select stores near you.</p>
+        <a href="shop.html" class="btn btn-warning btn-lg">Shop Now</a>
+    </div>
+</section>
+
+<footer class="bg-dark text-white py-4">
+    <div class="container text-center">
+        <p>&copy; 2023 Popcorn Beer. All rights reserved.</p>
+        <ul class="list-inline">
+            <li class="list-inline-item"><a href="#" class="text-white">Privacy Policy</a></li>
+            <li class="list-inline-item"><a href="#" class="text-white">Terms of Service</a></li>
+            <li class="list-inline-item"><a href="#" class="text-white">Contact Us</a></li>
+        </ul>
+    </div>
+</footer>
+
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
+</body>`);
+
+module.exports = GeneratePage;

package/actions/generate-tables.js

@@ -17,7 +17,7 @@ class GenerateTables {
     const types = Object.values(getState().types);
     const fieldTypeCfg = types.map((ty) => {
       const properties = {
-        data_type: { const: ty.name },
+        data_type: { type: "string", enum: [ty.name] },
       };
       const attrs = apply(ty.attributes, {}) || [];
       if (Array.isArray(attrs))
@@ -40,7 +40,7 @@ class GenerateTables {
       description:
         "A foreign key to a different table. This will reference the primary key on another table.",
       properties: {
-        data_type: { const: "ForeignKey" },
+        data_type: { type: "string", enum: ["ForeignKey"] },
         reference_table: {
           type: "string",
           description: "Name of the table being referenced",
@@ -52,7 +52,7 @@ class GenerateTables {
       description:
         "A reference (file path) to a file on disk. This can be used for example to hold images or documents",
       properties: {
-        data_type: { const: "File" },
+        data_type: { type: "string", enum: ["File"] },
       },
     });
     return {

package/actions/generate-view.js

@@ -0,0 +1,299 @@
+const { getState } = require("@saltcorn/data/db/state");
+const WorkflowStep = require("@saltcorn/data/models/workflow_step");
+const Trigger = require("@saltcorn/data/models/trigger");
+const Page = require("@saltcorn/data/models/page");
+const View = require("@saltcorn/data/models/view");
+const Table = require("@saltcorn/data/models/table");
+const User = require("@saltcorn/data/models/user");
+const Field = require("@saltcorn/data/models/field");
+const { apply, removeAllWhiteSpace } = require("@saltcorn/data/utils");
+const { getActionConfigFields } = require("@saltcorn/data/plugin-helper");
+const { a, pre, script, div, code } = require("@saltcorn/markup/tags");
+const {
+  fieldProperties,
+  getPromptFromTemplate,
+  splitContainerStyle,
+  containerHandledStyles,
+  walk_response,
+} = require("../common");
+
+const get_rndid = () => {
+  let characters = "0123456789abcdef";
+  let str = "";
+  for (let i = 0; i < 6; i++) {
+    str += characters[Math.floor(Math.random() * 16)];
+  }
+  return str;
+};
+
+const snakeToPascal = (str) => {
+  const snakeToCamel = (str) =>
+    str.replace(/([-_]\w)/g, (g) => g[1].toUpperCase());
+  let camelCase = snakeToCamel(str);
+  let pascalCase = camelCase[0].toUpperCase() + camelCase.substr(1);
+  return pascalCase;
+};
+
+const col2layoutSegment = (table, col) => {
+  switch (col.coltype) {
+    case "Field":
+      return {
+        type: "field",
+        field_name: col.fieldSpec.fieldname,
+        fieldview: col.fieldSpec.fieldview,
+      };
+    case "Action":
+      return {
+        type: "action",
+        action_name: col.action.action_name,
+        action_style: col.style,
+        action_label: col.label,
+        rndid: get_rndid(),
+      };
+    case "View link":
+      return {
+        type: "view_link",
+        view: col.view,
+        relation: `.${table.name}`,
+        link_style: col.style === "Link" ? "" : col.style,
+        view_label: col.label,
+      };
+
+    default:
+      break;
+  }
+  return {
+    type: col.coltype.toLowerCase(),
+  };
+};
+
+const segment2column = (seg) => {
+  return {
+    ...seg,
+    type: snakeToPascal(seg.type),
+  };
+};
+
+class GenerateView {
+  static title = "Generate View";
+  static function_name = "generate_view";
+  static description = "Generate view";
+
+  static async json_schema() {
+    const tables = await Table.find({});
+    //const viewtypes = getState().
+    const roles = await User.get_roles();
+    return {
+      type: "object",
+      required: ["name", "viewpattern", "table"],
+      properties: {
+        name: {
+          description: `The name of the view, this should be a short name which is part of the url. `,
+          type: "string",
+        },
+        viewpattern: {
+          description: `The type of view to generate. Show for a read-only view of a single table row, 
+List for a tabular grid view of many rows, Edit for forms for editing a single row, Feed to repeatedly show 
+another view (typically a Show view), Filter for selecting a subset of rows based on field values
+to be shown in another view (typically List or Feed views) on the same page.`,
+          type: "string",
+          enum: ["List"], //, "Show", "Edit", "Filter", "Feed"],
+        },
+        table: {
+          description: "Which table is this a view on",
+          type: "string",
+          enum: tables.map((t) => t.name),
+        },
+        min_role: {
+          description:
+            "The minimum role needed to access the view. For vies accessible only by admin, use 'admin', pages with min_role 'public' is publicly accessible and also available to all users",
+          type: "string",
+          enum: roles.map((r) => r.role),
+        },
+      },
+    };
+  }
+  static async system_prompt() {
+    return `Use the generate_view tool to generate a view.`;
+  }
+
+  static async follow_on_generate_list({ name, viewpattern, table }) {
+    const tbl = Table.findOne({ name: table });
+    const triggers = Trigger.find({
+      when_trigger: { or: ["API call", "Never"] },
+    }).filter(
+      (tr) =>
+        tr.description && tr.name && (!tr.table_id || tr.table_id === tbl.id)
+    );
+    const own_show_views = await View.find_table_views_where(
+      tbl.id,
+      ({ state_fields, viewtemplate, viewrow }) =>
+        state_fields.some((sf) => sf.name === "id")
+    );
+    const prompt = `Now generate the structure of the ${name} ${viewpattern} view on the ${table} table`;
+    const response_schema = {
+      type: "object",
+      properties: {
+        columns: {
+          type: "array",
+          items: {
+            anyOf: [
+              {
+                type: "object",
+                description: "Show a field value",
+                //required: ["name", "title", "min_role"],
+                properties: {
+                  coltype: { const: "Field" },
+                  fieldSpec: {
+                    anyOf: tbl.fields.map((f) => ({
+                      type: "object",
+                      properties: {
+                        fieldname: { const: f.name },
+                        fieldview: {
+                          type: "string",
+                          enum: Object.keys(f.type?.fieldviews || {}),
+                        },
+                      },
+                    })),
+                  },
+                },
+              },
+              {
+                type: "object",
+                description: "Action button",
+                //required: ["name", "title", "min_role"],
+                properties: {
+                  coltype: { const: "Action" },
+                  label: { type: "string", description: "The button label" },
+                  style: {
+                    type: "string",
+                    description: "The bootstrap button class",
+                    enum: [
+                      "btn-primary",
+                      "btn-secondary",
+                      "btn-outline-primary",
+                      "btn-outline-secondary",
+                    ],
+                  },
+                  action: {
+                    anyOf: [
+                      {
+                        type: "object",
+                        description: "Delete this row form the database table",
+                        properties: {
+                          action_name: { const: "Delete" },
+                        },
+                      },
+                      ...triggers.map((tr) => ({
+                        type: "object",
+                        description: tr.description,
+                        properties: {
+                          action_name: { const: tr.name },
+                        },
+                      })),
+                    ],
+                  },
+                },
+              },
+              {
+                type: "object",
+                description: "a link to a different view on the same table",
+                properties: {
+                  coltype: { const: "View link" },
+                  label: { type: "string", description: "The view label" },
+                  style: {
+                    type: "string",
+                    description:
+                      "Link for a normal link, or for a button, the bootstrap button class",
+                    enum: [
+                      "Link",
+                      "btn-primary",
+                      "btn-secondary",
+                      "btn-outline-primary",
+                      "btn-outline-secondary",
+                    ],
+                  },
+                  view: {
+                    type: "string",
+                    description: "the view to link to",
+                    enum: own_show_views.map((v) => v.name),
+                  },
+                },
+              },
+            ],
+          },
+        },
+      },
+    };
+    return { response_schema, prompt };
+  }
+
+  static async follow_on_generate(properties) {
+    switch (properties.viewpattern) {
+      case "List":
+      default:
+        return GenerateView.follow_on_generate_list(properties);
+    }
+  }
+
+  static render_html(attrs, contents) {
+    console.log(contents);
+
+    return (
+      pre(code(JSON.stringify(attrs, null, 2))) +
+      (contents ? pre(code(JSON.stringify(JSON.parse(contents), null, 2))) : "")
+    );
+  }
+  static async execute({ name, table, viewpattern, min_role }, req, contents) {
+    console.log("execute", name, contents);
+    const roles = await User.get_roles();
+    const min_role_id = min_role
+      ? roles.find((r) => r.role === min_role).id
+      : 100;
+    const tbl = Table.findOne({ name: table });
+    const viewCfg = {
+      table_id: tbl.id,
+      name,
+      viewtemplate: viewpattern,
+      min_role: min_role_id,
+      configuration: {},
+    };
+    switch (viewpattern) {
+      case "List":
+        const conts = JSON.parse(contents);
+        const cols = conts.columns;
+        const segments = cols.map((c) => col2layoutSegment(tbl, c));
+        viewCfg.configuration.layout = {
+          besides: segments.map((s) => ({ contents: s })),
+        };
+        viewCfg.configuration.columns = segments.map(segment2column);
+
+        break;
+
+      default:
+        break;
+    }
+    console.log(viewCfg);
+
+    await View.create(viewCfg);
+    return {
+      postExec:
+        "View created. " +
+        a(
+          { target: "_blank", href: `/view/${name}`, class: "me-1" },
+          "Go to view"
+        ) +
+        " | " +
+        a(
+          {
+            target: "_blank",
+            href: `/viewedit/config/${name}`,
+            class: "ms-1",
+          },
+          "Configure view"
+        ),
+    };
+  }
+}
+
+module.exports = GenerateView;

package/actions/generate-workflow.js

@@ -16,7 +16,9 @@ const steps = async () => {
   );
 
   const stepTypeAndCfg = Object.keys(actionExplainers).map((actionName) => {
-    const properties = { step_type: { const: actionName } };
+    const properties = { 
+      step_type: { type: "string", enum: [actionName] }
+    };
     const myFields = actionFields.filter(
       (f) => f.showIf?.wf_action_name === actionName
     );
@@ -37,7 +39,9 @@ const steps = async () => {
   });
   for (const [actionName, action] of stateActionList) {
     try {
-      const properties = { step_type: { const: actionName } };
+      const properties = { 
+        step_type: { type: "string", enum: [actionName] }
+      };
       const cfgFields = await getActionConfigFields(action, null, {
         mode: "workflow",
         copilot: true,
@@ -69,7 +73,10 @@ const steps = async () => {
   //TODO workflows
   for (const trigger of triggers) {
     const properties = {
-      step_type: { const: trigger.name },
+      step_type: { 
+        type: "string",
+        enum: [trigger.name],  
+      },
     };
     if (trigger.table_id) {
       const table = Table.findOne({ id: trigger.table_id });

package/chat-copilot.js

@@ -142,7 +142,9 @@ const run = async (table_id, viewname, cfg, state, { res, req }) => {
     i(
       small(
         "Skills you can request: " +
-          actionClasses.map((ac) => ac.title).join(", ")
+          classesWithSkills()
+            .map((ac) => ac.title)
+            .join(", ")
       )
     )
   );
@@ -292,12 +294,20 @@ const actionClasses = [
   require("./actions/generate-workflow"),
   require("./actions/generate-tables"),
   require("./actions/generate-js-action"),
+  require("./actions/generate-page"),
+  require("./actions/generate-view"),
 ];
 
+const classesWithSkills = () => {
+  const state = getState();
+  const skills = state.copilot_skills || [];
+  return [...actionClasses, ...skills];
+};
+
 const getCompletionArguments = async () => {
   const tools = [];
   const sysPrompts = [];
-  for (const actionClass of actionClasses) {
+  for (const actionClass of classesWithSkills()) {
     tools.push({
       type: "function",
       function: {
@@ -326,10 +336,25 @@ const execute = async (table_id, viewname, config, body, { req }) => {
   const run = await WorkflowRun.findOne({ id: +run_id });
 
   const fcall = run.context.funcalls[fcall_id];
-  const actionClass = actionClasses.find(
+  const actionClass = classesWithSkills().find(
     (ac) => ac.function_name === fcall.name
   );
-  const result = await actionClass.execute(JSON.parse(fcall.arguments), req);
+  let result;
+  if (actionClass.follow_on_generate) {
+    const toolCallIndex = run.context.interactions.findIndex(
+      (i) => i.tool_call_id === fcall_id
+    );
+    const follow_on_gen = run.context.interactions.find(
+      (i, ix) => i.role === "assistant" && ix > toolCallIndex
+    );
+    result = await actionClass.execute(
+      JSON.parse(fcall.arguments),
+      req,
+      follow_on_gen.content
+    );
+  } else {
+    result = await actionClass.execute(JSON.parse(fcall.arguments), req);
+  }
   await addToContext(run, { implemented_fcall_ids: [fcall_id] });
   return { json: { success: "ok", fcall_id, ...(result || {}) } };
 };
@@ -387,9 +412,50 @@ const interact = async (table_id, viewname, config, body, { req }) => {
       await addToContext(run, {
         funcalls: { [tool_call.id]: tool_call.function },
       });
-      const markup = await renderToolcall(tool_call, viewname, false, run);
 
-      actions.push(markup);
+      const followOnGen = await getFollowOnGeneration(tool_call);
+      if (followOnGen) {
+        const { response_schema, prompt } = followOnGen;
+        const follow_on_answer = await getState().functions.llm_generate.run(
+          prompt,
+          {
+            debugResult: true,
+            chat: run.context.interactions,
+            response_format: response_schema
+              ? {
+                  type: "json_schema",
+                  json_schema: {
+                    name: "generate_page",
+                    schema: response_schema,
+                  },
+                }
+              : undefined,
+          }
+        );
+
+        console.log("follow on answer", follow_on_answer);
+
+        await addToContext(run, {
+          interactions: [
+            { role: "user", content: prompt },
+            { role: "assistant", content: follow_on_answer },
+          ],
+        });
+
+        const markup = await renderToolcall(
+          tool_call,
+          viewname,
+          false,
+          run,
+          follow_on_answer
+        );
+
+        actions.push(markup);
+      } else {
+        const markup = await renderToolcall(tool_call, viewname, false, run);
+
+        actions.push(markup);
+      }
     }
     return { json: { success: "ok", actions, run_id: run.id } };
   } else
@@ -398,12 +464,32 @@ const interact = async (table_id, viewname, config, body, { req }) => {
     };
 };
 
-const renderToolcall = async (tool_call, viewname, implemented, run) => {
+const getFollowOnGeneration = async (tool_call) => {
+  const fname = tool_call.function.name;
+  const actionClass = classesWithSkills().find(
+    (ac) => ac.function_name === fname
+  );
+  const args = JSON.parse(tool_call.function.arguments);
+
+  if (actionClass.follow_on_generate) {
+    return await actionClass.follow_on_generate(args);
+  } else return null;
+};
+
+const renderToolcall = async (
+  tool_call,
+  viewname,
+  implemented,
+  run,
+  follow_on_answer
+) => {
   const fname = tool_call.function.name;
-  const actionClass = actionClasses.find((ac) => ac.function_name === fname);
+  const actionClass = classesWithSkills().find(
+    (ac) => ac.function_name === fname
+  );
   const args = JSON.parse(tool_call.function.arguments);
 
-  const inner_markup = await actionClass.render_html(args);
+  const inner_markup = await actionClass.render_html(args, follow_on_answer);
   return wrapAction(
     inner_markup,
     viewname,

package/common.js

@@ -8,6 +8,79 @@ const View = require("@saltcorn/data/models/view");
 const Trigger = require("@saltcorn/data/models/trigger");
 const { getState } = require("@saltcorn/data/db/state");
 
+const parseCSS = require("style-to-object").default;
+const MarkdownIt = require("markdown-it"),
+  md = new MarkdownIt();
+const HTMLParser = require("node-html-parser");
+
+const boxHandledStyles = new Set([
+  "margin",
+  "margin-top",
+  "margin-bottom",
+  "margin-right",
+  "margin-left",
+  "padding",
+  "padding-top",
+  "padding-bottom",
+  "padding-right",
+  "padding-left",
+  "border-color",
+  "border-color",
+  "border-width",
+  "border-radius",
+  "height",
+  "min-height",
+  "max-height",
+  "width",
+  "min-width",
+  "max-width",
+]);
+
+const containerHandledStyles = new Set([
+  ...boxHandledStyles,
+  "opacity",
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "line-height",
+  "flex-grow",
+  "flex-shrink",
+  "flex-direction",
+  "flex-wrap",
+  "justify-content",
+  "align-items",
+  "align-content",
+  "display",
+  "overflow",
+]);
+
+const splitContainerStyle = (styleStr) => {
+  const style = parseCSS(styleStr);
+  const customStyles = [];
+  Object.keys(style || {}).forEach((k) => {
+    if (containerHandledStyles.has(k)) {
+      customStyles.push(`${k}: ${style[k]}`);
+      delete style[k];
+    }
+  });
+  const ns = { style, customStyle: customStyles.join("; ") };
+  if (ns.style.display) {
+    ns.display = ns.style.display;
+    delete ns.style.display;
+  }
+  if (ns.style.overflow) {
+    ns.overflow = ns.style.overflow;
+    delete ns.style.overflow;
+  }
+
+  return ns;
+};
+
 const getPromptFromTemplate = async (tmplName, userPrompt, extraCtx = {}) => {
   const tables = await Table.find({});
   const context = {
@@ -99,7 +172,146 @@ const fieldProperties = (field) => {
       if (field.options) props.enum = toArrayOfStrings(field.options);
       break;
   }
+  if (!props.type) {
+    switch (field.input_type) {
+      case "code":
+        props.type = "string";
+        break;
+    }
+  }
   return props;
 };
 
-module.exports = { getCompletion, getPromptFromTemplate, incompleteCfgMsg, fieldProperties };
+function walk_response(segment) {
+  let go = walk_response;
+  if (!segment) return segment;
+  if (typeof segment === "string") return segment;
+  if (segment.element) return go(segment.element);
+  if (Array.isArray(segment)) {
+    return segment.map(go);
+  }
+  if (typeof segment.contents === "string") {
+    return { ...segment, contents: md.render(segment.contents) };
+  }
+  if (segment.type === "image") {
+    return {
+      type: "container",
+      style: {
+        height: `${segment.height}px`,
+        width: `${segment.width}px`,
+        "border-style": "solid",
+        "border-color": "#808080",
+        "border-width": "3px",
+        vAlign: "middle",
+        hAlign: "center",
+      },
+      contents: segment.description,
+    };
+  }
+  if (segment.type === "container") {
+    const { customStyle, style, display, overflow } = splitContainerStyle(
+      segment.style
+    );
+    return {
+      ...segment,
+      customStyle,
+      display,
+      overflow,
+      style,
+      contents: go(segment.contents),
+    };
+  }
+  if (segment.contents) {
+    return { ...segment, contents: go(segment.contents) };
+  }
+  if (segment.above) {
+    return { ...segment, above: go(segment.above) };
+  }
+  if (segment.besides) {
+    return { ...segment, besides: go(segment.besides) };
+  }
+}
+
+function parseHTML(str) {
+  const strHtml = str.includes("```html")
+    ? str.split("```html")[1].split("```")[0]
+    : str;
+  const body = HTMLParser.parse(strHtml).querySelector("body");
+
+  const go = (node) => {
+    if (node.constructor.name === "HTMLElement") {
+      switch (node.rawTagName) {
+        case "body":
+          return { above: node.childNodes.map(go).filter(Boolean) };
+        case "p":
+          return {
+            type: "blank",
+            contents: node.childNodes.map((n) => n.toString()).join(""),
+            customClass: (node.classList.value || []).join(" "),
+          };
+        case "script":
+          return null;
+        case "a":
+          return {
+            type: "link",
+            url: node.getAttribute("href"),
+            text: node.childNodes.map((n) => n.toString()).join(""),
+            link_class: (node.classList.value || []).join(" "),
+            link_src: "URL",
+          };
+        case "img":
+          return {
+            type: "container",
+            style: {
+              "border-color": "#808080",
+              "border-style": "solid",
+              "border-width": "2px",
+            },
+            contents: {
+              type: "blank",
+              contents: "Image: " + node.getAttribute("alt"),
+            },
+          };
+
+        case "h1":
+        case "h2":
+        case "h3":
+        case "h4":
+        case "h5":
+        case "h6":
+          return {
+            type: "blank",
+            contents: node.childNodes.map((n) => n.toString()).join(""),
+            customClass: (node.classList.value || []).join(" "),
+            textStyle: [node.rawTagName],
+          };
+        default:
+          return {
+            type: "container",
+            htmlElement: node.rawTagName,
+            customClass: (node.classList.value || []).join(" "),
+            contents: node.childNodes.map(go).filter(Boolean),
+          };
+      }
+    } else if (node.constructor.name === "TextNode") {
+      if (!node._rawText || !node._rawText.trim()) return null;
+      else return { type: "blank", contents: node._rawText };
+    }
+  };
+  //console.log(body.constructor.name);
+
+  //console.log(JSON.stringify(go(body.childNodes[3]), null, 2));
+  return go(body);
+}
+
+module.exports = {
+  getCompletion,
+  getPromptFromTemplate,
+  incompleteCfgMsg,
+  fieldProperties,
+  boxHandledStyles,
+  containerHandledStyles,
+  splitContainerStyle,
+  walk_response,
+  parseHTML,
+};

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@saltcorn/copilot",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "AI assistant for building Saltcorn applications",
   "main": "index.js",
   "dependencies": {
     "@saltcorn/data": "^0.9.0",
     "underscore": "1.13.6",
     "node-sql-parser": "4.15.0",
-    "markdown-it": "14.1.0"
+    "markdown-it": "14.1.0",
+    "style-to-object": "1.0.8",
+    "node-html-parser": "7.0.1"
   },
   "author": "Tom Nielsen",
   "license": "MIT",