@saltcorn/copilot 0.6.0 → 0.6.2

package/common.js

@@ -232,25 +232,40 @@ function walk_response(segment) {
   }
 }
 
-function parseHTML(str) {
+function parseHTML(str, processAll) {
   const strHtml = str.includes("```html")
     ? str.split("```html")[1].split("```")[0]
     : str;
-  const body = HTMLParser.parse(strHtml).querySelector("body");
+  const body = processAll
+    ? HTMLParser.parse(strHtml)
+    : HTMLParser.parse(strHtml).querySelector("body");
+  const btnSizeClasses = new Set(["btn-sm", "btn-xs", "btn-lg"]);
 
   const go = (node) => {
+    //console.log("go node", node.toString());
+
     if (node.constructor.name === "HTMLElement") {
       switch (node.rawTagName) {
         case "body":
           return { above: node.childNodes.map(go).filter(Boolean) };
-        case "p":
+        case "script":
+          return null;
+        case "style":
           return {
             type: "blank",
-            contents: node.childNodes.map((n) => n.toString()).join(""),
-            customClass: (node.classList.value || []).join(" "),
+            isHTML: true,
+            contents: `<style>${node.childNodes
+              .map((n) => n.toString())
+              .join("")}</style>`,
+            text_strings: [node.childNodes.map((n) => n.toString()).join("")],
+          };
+        case "input":
+          return {
+            type: "blank",
+            isHTML: true,
+            contents: node.toString(),
+            text_strings: [],
           };
-        case "script":
-          return null;
         case "a":
           return {
             type: "link",
@@ -261,15 +276,40 @@ function parseHTML(str) {
           };
         case "img":
           return {
-            type: "container",
+            alt: node.getAttribute("alt") || "",
+            url: node.getAttribute("src") || "",
+            type: "image",
+            block: false,
             style: {
-              "border-color": "#808080",
-              "border-style": "solid",
-              "border-width": "2px",
+              "object-fit": "none",
             },
-            contents: {
-              type: "blank",
-              contents: "Image: " + node.getAttribute("alt"),
+            srctype: "URL",
+            isFormula: {},
+            customClass: (node.classList.value || []).join(" "),
+          };
+        case "button":
+          return {
+            type: "action",
+            block: false,
+            rndid: Math.floor(Math.random() * 16777215).toString(16),
+            nsteps: 1,
+            confirm: false,
+            minRole: 100,
+            spinner: true,
+            isFormula: {},
+            action_icon: "",
+            action_name: "run_js_code",
+            action_label: node.childNodes.map((n) => n.toString()).join(""),
+            action_style:
+              (node.classList?.value || []).find(
+                (c) => c.startsWith("btn-") && !btnSizeClasses.has(c)
+              ) || "btn-primary",
+            action_size: (node.classList?.value || []).find((c) =>
+              btnSizeClasses.has(c)
+            ),
+            configuration: {
+              run_where: "Server",
+              code: "return {notify: 'Press button'}",
             },
           };
 
@@ -286,11 +326,19 @@ function parseHTML(str) {
             textStyle: [node.rawTagName],
           };
         default:
+          const containerContents = !node.childNodes.length
+            ? ""
+            : node.childNodes.length === 1
+            ? go(node.childNodes[0]) || ""
+            : { above: node.childNodes.map(go).filter(Boolean) };
           return {
             type: "container",
-            htmlElement: node.rawTagName,
+            ...(node.rawTagName && node.rawTagName !== "div"
+              ? { htmlElement: node.rawTagName }
+              : {}),
+            ...(node.id ? { customId: node.id } : {}),
             customClass: (node.classList.value || []).join(" "),
-            contents: node.childNodes.map(go).filter(Boolean),
+            contents: containerContents,
           };
       }
     } else if (node.constructor.name === "TextNode") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/copilot",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "AI assistant for building Saltcorn applications",
   "main": "index.js",
   "dependencies": {

package/page-gen-action.js

@@ -5,6 +5,7 @@ const File = require("@saltcorn/data/models/file");
 const Page = require("@saltcorn/data/models/page");
 
 const GeneratePage = require("./actions/generate-page");
+const { parseHTML } = require("./common");
 
 module.exports = {
   description: "Generate page with AI copilot",
@@ -27,12 +28,26 @@ module.exports = {
           fieldview: "textarea",
           required: true,
         },
+        {
+          name: "image_prompt",
+          label: "Prompt image files",
+          sublabel:
+            "Optional. An expression, based on the context, for file path or array of file paths for prompting",
+          class: "validate-expression",
+          type: "String",
+        },
         {
           name: "answer_field",
           label: "Answer variable",
           sublabel: "Optional. Set the generated HTML to this context variable",
+          class: "validate-identifier",
           type: "String",
-          required: true,
+        },
+        {
+          name: "convert_to_saltcorn",
+          label: "Editable format",
+          sublabel: "Convert to Saltcorn editable pages",
+          type: "Bool",
         },
         //   ...override_fields,
         {
@@ -85,7 +100,9 @@ module.exports = {
       prompt_formula,
       prompt_template,
       answer_field,
+      image_prompt,
       chat_history_field,
+      convert_to_saltcorn,
       model,
     },
   }) => {
@@ -96,7 +113,7 @@ module.exports = {
         prompt_formula,
         row,
         user,
-        "llm_generate prompt formula"
+        "copilot_generate_page prompt formula"
       );
     else prompt = row[prompt_field];
     const opts = {};
@@ -113,14 +130,49 @@ module.exports = {
       },
     });
     const { llm_generate } = getState().functions;
+    let chat;
+    if (image_prompt) {
+      const from_ctx = eval_expression(
+        image_prompt,
+        row,
+        user,
+        "copilot_generate_page image prompt"
+      );
+
+      chat = [];
+      for (const image of Array.isArray(from_ctx) ? from_ctx : [from_ctx]) {
+        const file = await File.findOne({ name: image });
+        const imageurl = await file.get_contents("base64");
 
+        chat.push({
+          role: "user",
+          content: [
+            {
+              type: "image",
+              image: `data:${file.mimetype};base64,${imageurl}`,
+            },
+          ],
+        });
+      }
+    }
     const initial_ans = await llm_generate.run(prompt, {
       tools,
+      chat,
       systemPrompt,
     });
     const initial_info = initial_ans.tool_calls[0].input;
     const full = await GeneratePage.follow_on_generate(initial_info);
+    const prompt_part_2 = convert_to_saltcorn
+      ? `Only generate the inner part of the body. 
+      Do not include the top menu. Generate the HTML that comes below the navbar menu.
+      if you want to change the overall styling of the page, include a <style> element where you can change styles with CSS rules or CSS variables.`
+      : `If you need to include the standard bootstrap CSS and javascript files, they are available as:
+
+      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+
+      and 
 
+      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>`;
     const page_html = await getState().functions.llm_generate.run(
       `${prompt}. 
       
@@ -128,17 +180,13 @@ module.exports = {
       Further page description: ${initial_info.description}. 
 
       Generate the HTML for the web page using the Bootstrap 5 CSS framework. 
-      If you need to include the standard bootstrap CSS and javascript files, they are available as:
-
-      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
-
-      and 
-
-      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+      
+      ${prompt_part_2}
       
       Just generate HTML code, do not wrap in markdown code tags`,
       {
         debugResult: true,
+        chat,
         response_format: full.response_schema
           ? {
               type: "json_schema",
@@ -153,14 +201,35 @@ module.exports = {
 
     const use_page_name = page_name ? interpolate(page_name, row, user) : "";
     if (use_page_name) {
+      let layout;
+      if (convert_to_saltcorn) {
+        layout = parseHTML(page_html, true);
+        //console.log("got layout", JSON.stringify(layout, null, 2));
+        const file = await File.from_contents(
+          `${use_page_name}.html`,
+          "text/html",
+          wrapExample(page_html),
+          user.id,
+          100
+        );
+        await Page.create({
+          name: use_page_name + "_html",
+          title: initial_info.title,
+          description: initial_info.description,
+          min_role: 100,
+          layout: { html_file: file.path_to_serve },
+        });
+      } else {
+        const file = await File.from_contents(
+          `${use_page_name}.html`,
+          "text/html",
+          page_html,
+          user.id,
+          100
+        );
+        layout = { html_file: file.path_to_serve };
+      }
       //save to a file
-      const file = await File.from_contents(
-        `${use_page_name}.html`,
-        "text/html",
-        page_html,
-        user.id,
-        100
-      );
 
       //create page
       await Page.create({
@@ -168,12 +237,81 @@ module.exports = {
         title: initial_info.title,
         description: initial_info.description,
         min_role: 100,
-        layout: { html_file: file.path_to_serve },
+        layout,
       });
-      getState().refresh_pages()
+      setTimeout(() => getState().refresh_pages(), 200);
     }
     const upd = answer_field ? { [answer_field]: page_html } : {};
     if (mode === "workflow") return upd;
     else if (answer_field) await table.updateRow(upd, row[table.pk_name]);
   },
 };
+
+const wrapExample = (inner) => `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Artisan Goat Cheese.</title>
+  <meta name="description" content="Handcrafted, small-batch goat cheese made from ethically sourced milk. Farm-to-table flavors with aged, tangy, and creamy varieties. Available online and at select markets, with subscription options and artisan pairings." />
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+  <style>
+    :root {
+      --brand: #7a7a4a;
+    }
+    body {
+      background-color: #fff;
+    }
+    /* Hero styling */
+    #home {
+      padding-top: 2rem;
+      padding-bottom: 2rem;
+    }
+    .hero {
+      background: linear-gradient(135deg, #f7f4ef 0%, #ffffff 60%);
+      border-bottom: 1px solid #eee;
+    }
+    .hero-img {
+      max-height: 420px;
+      object-fit: cover;
+      width: 100%;
+      border-radius: 0.5rem;
+      border: 1px solid #eee;
+    }
+    /* Card image sizing for consistency */
+    .card-img-top {
+      height: 180px;
+      object-fit: cover;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Navbar -->
+  <nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm" aria-label="Main navigation">
+    <div class="container">
+      <a class="navbar-brand fw-semibold" href="#home">Artisan Goat Cheese</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu" aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navMenu">
+        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+          <li class="nav-item"><a class="nav-link active" aria-current="page" href="#home">Home</a></li>
+          <li class="nav-item"><a class="nav-link" href="#products">Cheeses</a></li>
+          <li class="nav-item"><a class="nav-link" href="#subscription">Subscriptions</a></li>
+          <li class="nav-item"><a class="nav-link" href="#markets">Markets</a></li>
+          <li class="nav-item"><a class="nav-link" href="#pairings">Pairings</a></li>
+          <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
+        </ul>
+      </div>
+    </div>
+     </nav>
+
+    ${inner}
+    
+  <!-- Bootstrap JS -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+</body>
+</html>
+    `;