@saltcorn/copilot 0.4.5 → 0.5.1

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-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/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 = {
@@ -109,9 +182,136 @@ const fieldProperties = (field) => {
   return props;
 };
 
+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.5",
+  "version": "0.5.1",
   "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",

package/user-copilot.js

@@ -466,39 +466,42 @@ const run = async (table_id, viewname, config, state, { res, req }) => {
 const getCompletionArguments = async (config) => {
   let tools = [];
   const sysPrompts = [];
-  let properties = {};
 
-  const tableNames = (config?.tables || []).map((t) => t.table_name);
-  properties.table_name = {
-    type: "string",
-    enum: tableNames,
-    description: `Which table is this query from. Every query has to select rows from one table, even if it is based on joins from different tables`,
-  };
-  properties.sql_id_query = {
-    type: "string",
-    description: `An SQL query for this table's primary keys. This must select only the primary keys (even if the user wants a count), for example SELECT ${
-      tableNames[0][0]
-    }."${Table.findOne(tableNames[0]).pk_name}" from "${tableNames[0]}" ${
-      tableNames[0][0]
-    } JOIN ... where... Use this to join other tables in the database.`,
-  };
-  properties.is_count = {
-    type: "boolean",
-    description: `Is the only desired output a count? Make this true if the user wants a count of rows`,
-  };
+  if (config.tables.length) {
+    let properties = {};
+
+    const tableNames = (config?.tables || []).map((t) => t.table_name);
+    properties.table_name = {
+      type: "string",
+      enum: tableNames,
+      description: `Which table is this query from. Every query has to select rows from one table, even if it is based on joins from different tables`,
+    };
+    properties.sql_id_query = {
+      type: "string",
+      description: `An SQL query for this table's primary keys. This must select only the primary keys (even if the user wants a count), for example SELECT ${
+        tableNames[0][0]
+      }."${Table.findOne(tableNames[0]).pk_name}" from "${tableNames[0]}" ${
+        tableNames[0][0]
+      } JOIN ... where... Use this to join other tables in the database.`,
+    };
+    properties.is_count = {
+      type: "boolean",
+      description: `Is the only desired output a count? Make this true if the user wants a count of rows`,
+    };
 
-  tools.push({
-    type: "function",
-    function: {
-      name: "TableQuery",
-      description: `Query a table and show the results to the user in a grid format`,
-      parameters: {
-        type: "object",
-        required: ["table_name", "sql_id_query", "is_count"],
-        properties,
+    tools.push({
+      type: "function",
+      function: {
+        name: "TableQuery",
+        description: `Query a table and show the results to the user in a grid format`,
+        parameters: {
+          type: "object",
+          required: ["table_name", "sql_id_query", "is_count"],
+          properties,
+        },
       },
-    },
-  });
+    });
+  }
 
   for (const action of config?.actions || []) {
     let properties = {};
@@ -536,18 +539,19 @@ const getCompletionArguments = async (config) => {
   const systemPrompt =
     "You are helping users retrieve information and perform actions on a relational database" +
     config.sys_prompt +
-    `
-    If you are generating SQL, Your database the following tables in PostgreSQL: 
+    (config.tables.length
+      ? `
+    If you are generating SQL, Your database has the following tables in PostgreSQL: 
 
 ` +
-    tables
-      .map(
-        (t) => `CREATE TABLE "${t.name}" (${
-          t.description
-            ? `
+        tables
+          .map(
+            (t) => `CREATE TABLE "${t.name}" (${
+              t.description
+                ? `
   /* ${t.description} */`
-            : ""
-        }
+                : ""
+            }
 ${t.fields
   .map(
     (f) =>
@@ -559,15 +563,16 @@ ${t.fields
   )
   .join(",\n")}
 )`
-      )
-      .join(";\n\n") +
-    `
+          )
+          .join(";\n\n") +
+        `
       
 Use the TableQuery tool if the user asks to see, find or count or otherwise access rows from a table that matches what the user is looking for, or if
 the user is asking for a summary or inference from such rows. The TableQuery query is parametrised by a SQL SELECT query which 
 selects primary key values from the specified table. You can join other tables or use complex logic in the WHERE clause, but you must 
 always return porimary key values from the specified table.
-`;
+`
+      : "");
   //console.log("sysprompt", systemPrompt);
 
   if (tools.length === 0) tools = undefined;
@@ -600,7 +605,7 @@ const interact = async (table_id, viewname, config, body, { req, res }) => {
       interactions: [{ role: "user", content: userinput }],
     });
   }
-  return await process_interaction(run, userinput, config, req);
+  return await process_interaction(run, config, req);
 };
 
 const renderQueryInteraction = async (table, result, config, req) => {
@@ -653,20 +658,13 @@ const renderQueryInteraction = async (table, result, config, req) => {
   );
 };
 
-const process_interaction = async (
-  run,
-  input,
-  config,
-  req,
-  prevResponses = []
-) => {
+const process_interaction = async (run, config, req, prevResponses = []) => {
   const complArgs = await getCompletionArguments(config);
   complArgs.chat = run.context.interactions;
   //complArgs.debugResult = true;
-  //console.log(complArgs);
-  console.log("complArgs", JSON.stringify(complArgs, null, 2));
+  //console.log("complArgs", JSON.stringify(complArgs, null, 2));
 
-  const answer = await getState().functions.llm_generate.run(input, complArgs);
+  const answer = await getState().functions.llm_generate.run("", complArgs);
   console.log("answer", answer);
   await addToContext(run, {
     interactions:
@@ -820,7 +818,7 @@ const process_interaction = async (
       }
     }
     if (hasResult)
-      return await process_interaction(run, "", config, req, [
+      return await process_interaction(run, config, req, [
         ...prevResponses,
         ...responses,
       ]);