@saltcorn/copilot 0.7.1 → 0.7.3

package/page-gen-action.js

@@ -7,6 +7,122 @@ const Page = require("@saltcorn/data/models/page");
 const GeneratePage = require("./actions/generate-page");
 const { parseHTML } = require("./common");
 
+const numericIdRE = /^\d+$/;
+
+const arrayify = (value) => {
+  if (value === null || typeof value === "undefined") return [];
+  return Array.isArray(value) ? value : [value];
+};
+
+const normalizeName = (value) =>
+  typeof value === "string" ? value.trim() : value || "";
+
+const findFileSafe = async (identifier) => {
+  if (identifier === null || typeof identifier === "undefined") return null;
+  if (
+    typeof identifier === "object" &&
+    identifier.mimetype &&
+    typeof identifier.get_contents === "function"
+  )
+    return identifier;
+  const attempts = [];
+  if (typeof identifier === "object" && identifier.id)
+    attempts.push({ id: identifier.id });
+  if (typeof identifier === "object" && identifier.path_to_serve)
+    attempts.push(identifier.path_to_serve);
+  if (typeof identifier === "number") attempts.push({ id: identifier });
+  if (typeof identifier === "string") {
+    const trimmed = identifier.trim();
+    if (trimmed) {
+      attempts.push(trimmed);
+      if (numericIdRE.test(trimmed)) attempts.push({ id: +trimmed });
+      attempts.push({ name: trimmed });
+      attempts.push({ filename: trimmed });
+      attempts.push({ path_to_serve: trimmed });
+    }
+  }
+  for (const attempt of attempts) {
+    try {
+      const file = await File.findOne(attempt);
+      if (file) return file;
+    } catch (e) {
+      // ignore lookup errors
+    }
+  }
+  return null;
+};
+
+const valueToDataUrl = async (value) => {
+  if (value === null || typeof value === "undefined") return null;
+  if (typeof value === "string" && value.trim().startsWith("data:"))
+    return value.trim();
+  const file = await findFileSafe(value);
+  if (!file) return null;
+  const base64 = await file.get_contents("base64");
+  return `data:${file.mimetype};base64,${base64}`;
+};
+
+const gatherImageDataFromValue = async (value) => {
+  const urls = [];
+  for (const entry of arrayify(value)) {
+    const url = await valueToDataUrl(entry);
+    if (url) urls.push(url);
+  }
+  return urls;
+};
+
+const gatherImagesFromExpression = async (expression, row, user, label) => {
+  if (!expression) return [];
+  const resolved = eval_expression(expression, row, user, label);
+  return await gatherImageDataFromValue(resolved);
+};
+
+const buildImageMessages = (dataUrls, label) =>
+  (dataUrls || []).map((image) => ({
+    role: "user",
+    content: [
+      ...(label ? [{ type: "text", text: label }] : []),
+      { type: "image", image },
+    ],
+  }));
+
+const loadExistingPageAssets = async (pageName) => {
+  if (!pageName) return { page: null, html: null };
+  const page = await Page.findOne({ name: pageName });
+  if (!page) return { page: null, html: null };
+  let html = null;
+  if (page.layout?.html_file) {
+    const file = await findFileSafe(page.layout.html_file);
+    if (file) html = await file.get_contents("utf8");
+  }
+  return { page, html };
+};
+
+const refreshPagesSoon = () =>
+  setTimeout(() => getState().refresh_pages(), 200);
+
+const upsertHtmlPreviewPage = async (name, html, title, description, user) => {
+  const file = await File.from_contents(
+    `${name}.html`,
+    "text/html",
+    html,
+    user.id,
+    100,
+  );
+  const layout = { html_file: file.path_to_serve };
+  const existing = await Page.findOne({ name });
+  if (existing) await existing.update({ title, description, layout });
+  else
+    await Page.create({
+      name,
+      title,
+      description,
+      min_role: 100,
+      layout,
+    });
+  refreshPagesSoon();
+};
+
 module.exports = {
   description: "Generate page with AI copilot",
   configFields: ({ table, mode }) => {
@@ -36,6 +152,30 @@ module.exports = {
           class: "validate-expression",
           type: "String",
         },
+        {
+          name: "design_image_expression",
+          label: "Design image expression",
+          sublabel:
+            "Optional expression returning a file, file id, data URL, or array with reference design images to guide generation",
+          class: "validate-expression",
+          type: "String",
+        },
+        {
+          name: "feedback_image_expression",
+          label: "Feedback image expression",
+          sublabel:
+            "Optional expression returning a file, file id, data URL, or array with annotated feedback screenshots",
+          class: "validate-expression",
+          type: "String",
+        },
+        {
+          name: "existing_page_name",
+          label: "Existing page name",
+          sublabel:
+            "Optional expression evaluating to the name of the page to use as a baseline. If provided, its HTML will be included automatically",
+          class: "validate-expression",
+          type: "String",
+        },
         {
           name: "existing_page_html",
           label: "Existing page HTML",
@@ -69,6 +209,9 @@ module.exports = {
       const textFields = table.fields
         .filter((f) => f.type?.sql_name === "text")
         .map((f) => f.name);
+      const fileFields = table.fields
+        .filter((f) => ["File", "Image"].includes(f.type?.name))
+        .map((f) => f.name);
 
       return [
         {
@@ -93,6 +236,30 @@ module.exports = {
           required: true,
           attributes: { options: textFields },
         },
+        {
+          name: "existing_page_field",
+          label: "Existing page name field",
+          sublabel:
+            "Optional text field storing the name of the page to update",
+          type: "String",
+          attributes: { options: textFields },
+        },
+        {
+          name: "design_image_field",
+          label: "Design image field",
+          sublabel:
+            "Optional file/image field containing a reference design supplied by the user",
+          type: "String",
+          attributes: { options: fileFields },
+        },
+        {
+          name: "feedback_image_field",
+          label: "Feedback image field",
+          sublabel:
+            "Optional file/image field with annotated feedback screenshots to consider during updates",
+          type: "String",
+          attributes: { options: fileFields },
+        },
         //  ...override_fields,
       ];
     }
@@ -109,6 +276,12 @@ module.exports = {
       prompt_template,
       answer_field,
       image_prompt,
+      design_image_expression,
+      feedback_image_expression,
+      design_image_field,
+      feedback_image_field,
+      existing_page_field,
+      existing_page_name,
       existing_page_html,
       chat_history_field,
       convert_to_saltcorn,
@@ -117,7 +290,7 @@ module.exports = {
   }) => {
     let prompt;
     if (mode === "workflow") prompt = interpolate(prompt_template, row, user);
-    else if (prompt_field === "Formula" || mode === "workflow")
+    else if (prompt_field === "Formula")
       prompt = eval_expression(
         prompt_formula,
         row,
@@ -125,61 +298,104 @@ module.exports = {
         "copilot_generate_page prompt formula",
       );
     else prompt = row[prompt_field];
-    
-    if(existing_page_html) {
-      exist_html = eval_expression(
+
+    const resolvedExistingName = normalizeName(
+      mode === "workflow"
+        ? existing_page_name
+          ? eval_expression(
+              existing_page_name,
+              row,
+              user,
+              "copilot_generate_page existing page name",
+            )
+          : null
+        : existing_page_field
+          ? row?.[existing_page_field]
+          : null,
+    );
+    const existingAssets = resolvedExistingName
+      ? await loadExistingPageAssets(resolvedExistingName)
+      : { page: null, html: null };
+
+    let manualExistingHtml;
+    if (existing_page_html) {
+      manualExistingHtml = eval_expression(
         existing_page_html,
         row,
         user,
         "copilot_generate_page existing page html",
       );
-      prompt = "This is the HTML code for the existing pages you should edit:\n\n```html\n"+exist_html+"\n```\n\n"+prompt
     }
-    
-    const opts = {};
+    const existingHtmlForPrompt = manualExistingHtml || existingAssets.html;
+    if (existingHtmlForPrompt) {
+      const label = resolvedExistingName ? ` ${resolvedExistingName}` : "";
+      prompt = `This is the HTML code for the existing page${label} you should edit:\n\n\`\`\`html\n${existingHtmlForPrompt}\n\`\`\`\n\n${prompt}`;
+    }
 
-    if (model) opts.model = model;
-    const tools = [];
-    const systemPrompt = await GeneratePage.system_prompt();
-    tools.push({
-      type: "function",
-      function: {
-        name: GeneratePage.function_name,
-        description: GeneratePage.description,
-        parameters: await GeneratePage.json_schema(),
-      },
-    });
-    const { llm_generate } = getState().functions;
-    let chat;
-    if (image_prompt) {
-      const from_ctx = eval_expression(
+    const chatMessages = [];
+    if (mode === "workflow") {
+      const referenceImages = await gatherImagesFromExpression(
         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}`,
-            },
-          ],
-        });
-      }
+      chatMessages.push(
+        ...buildImageMessages(referenceImages, "Reference image"),
+      );
+      const designImages = await gatherImagesFromExpression(
+        design_image_expression,
+        row,
+        user,
+        "copilot_generate_page design image",
+      );
+      chatMessages.push(
+        ...buildImageMessages(designImages, "Design reference"),
+      );
+      const feedbackImages = await gatherImagesFromExpression(
+        feedback_image_expression,
+        row,
+        user,
+        "copilot_generate_page feedback image",
+      );
+      chatMessages.push(
+        ...buildImageMessages(feedbackImages, "Feedback reference"),
+      );
+    } else if (row) {
+      chatMessages.push(
+        ...buildImageMessages(
+          await gatherImageDataFromValue(row[design_image_field]),
+          "Design reference",
+        ),
+      );
+      chatMessages.push(
+        ...buildImageMessages(
+          await gatherImageDataFromValue(row[feedback_image_field]),
+          "Feedback reference",
+        ),
+      );
     }
-    const initial_ans = await llm_generate.run(prompt, {
+    const chat = chatMessages.length ? chatMessages : undefined;
+
+    const systemPrompt = await GeneratePage.system_prompt();
+    const tools = [
+      {
+        type: "function",
+        function: {
+          name: GeneratePage.function_name,
+          description: GeneratePage.description,
+          parameters: await GeneratePage.json_schema(),
+        },
+      },
+    ];
+    const { llm_generate } = getState().functions;
+    const llmOptions = {
       tools,
       chat,
       systemPrompt,
-    });    
+      ...(model ? { model } : {}),
+    };
+    const initial_ans = await llm_generate.run(prompt, llmOptions);
     const initial_info =
       initial_ans.tool_calls[0].input ||
       JSON.parse(initial_ans.tool_calls[0].function.arguments);
@@ -195,55 +411,55 @@ module.exports = {
       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}. 
-      
-      The page title is: ${initial_info.title}. 
-      Further page description: ${initial_info.description}. 
-
-      Generate the HTML for the web page using the Bootstrap 5 CSS framework. 
-      
-      ${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",
-              json_schema: {
-                name: "generate_page",
-                schema: full.response_schema,
-              },
-            }
-          : undefined,
-      },
+    const generationPrompt = `${prompt}
+
+The page title is: ${initial_info.title}.
+Further page description: ${initial_info.description}.
+
+Generate the HTML for the web page using the Bootstrap 5 CSS framework.
+
+${prompt_part_2}
+
+Just generate HTML code, do not wrap in markdown code tags`;
+    const page_html = await llm_generate.run(generationPrompt, {
+      debugResult: true,
+      chat,
+      ...(model ? { model } : {}),
+      response_format: full.response_schema
+        ? {
+            type: "json_schema",
+            json_schema: {
+              name: "generate_page",
+              schema: full.response_schema,
+            },
+          }
+        : undefined,
+    });
+
+    const requestedName = page_name ? interpolate(page_name, row, user) : "";
+    const targetPageName = normalizeName(
+      requestedName || resolvedExistingName || "",
     );
+    const updatingExisting =
+      targetPageName &&
+      resolvedExistingName &&
+      targetPageName === resolvedExistingName &&
+      existingAssets.page;
 
-    const use_page_name = page_name ? interpolate(page_name, row, user) : "";
-    if (use_page_name) {
+    if (targetPageName) {
       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",
+        await upsertHtmlPreviewPage(
+          `${targetPageName}_html`,
           wrapExample(page_html),
-          user.id,
-          100,
+          initial_info.title,
+          initial_info.description,
+          user,
         );
-        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`,
+          `${targetPageName}.html`,
           "text/html",
           page_html,
           user.id,
@@ -251,18 +467,26 @@ module.exports = {
         );
         layout = { html_file: file.path_to_serve };
       }
-      //save to a file
 
-      //create page
-      await Page.create({
-        name: use_page_name,
+      const pagePayload = {
         title: initial_info.title,
         description: initial_info.description,
-        min_role: 100,
         layout,
-      });
-      setTimeout(() => getState().refresh_pages(), 200);
+      };
+
+      if (updatingExisting) {
+        await existingAssets.page.update(pagePayload);
+        refreshPagesSoon();
+      } else {
+        await Page.create({
+          name: targetPageName,
+          min_role: 100,
+          ...pagePayload,
+        });
+        refreshPagesSoon();
+      }
     }
+
     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]);