@saltcorn/copilot 0.7.0 → 0.7.2

package/actions/generate-page.js

@@ -28,7 +28,7 @@ class GeneratePage {
     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();
@@ -65,7 +65,7 @@ class GeneratePage {
     };
   }
   static async system_prompt() {
-    return `Use the generate_page to generate a page.`;
+    return `If the user asks to generate a page, a web page or a landing page, use the generate_page to generate a page.`;
   }
   static async follow_on_generate({ name, page_type }) {
     if (page_type === "Marketing page") {
@@ -272,7 +272,7 @@ class GeneratePage {
     }
     if (segment.type === "container") {
       const { customStyle, style, display, overflow } = splitContainerStyle(
-        segment.style
+        segment.style,
       );
       return {
         ...segment,
@@ -310,17 +310,17 @@ class GeneratePage {
             JSON.stringify(
               GeneratePage.walk_response(JSON.parse(contents)),
               null,
-              2
-            )
-          )
-        )
+              2,
+            ),
+          ),
+        ),
       )
     );
   }
   static async execute(
     { name, title, description, min_role, page_type },
     req,
-    contents
+    contents,
   ) {
     console.log("execute", name, contents);
     const roles = await User.get_roles();
@@ -341,12 +341,12 @@ class GeneratePage {
         "Page created. " +
         a(
           { target: "_blank", href: `/page/${name}`, class: "me-1" },
-          "Go to page"
+          "Go to page",
         ) +
         " | " +
         a(
           { target: "_blank", href: `/pageedit/edit/${name}`, class: "ms-1" },
-          "Configure page"
+          "Configure page",
         ),
     };
   }

package/actions/generate-tables.js

@@ -13,7 +13,7 @@ class GenerateTables {
   static function_name = "generate_tables";
   static description = "Generate database tables";
 
-  static async json_schema() {
+  static json_schema() {
     const types = Object.values(getState().types);
     const fieldTypeCfg = types.map((ty) => {
       const properties = {
@@ -175,9 +175,14 @@ class GenerateTables {
 
   static process_tables(tables) {
     return tables.map((table) => {
+      const sanitizedFields = Array.isArray(table.fields)
+        ? table.fields.filter(
+            (f) => (f?.name || "").toLowerCase() !== "id"
+          )
+        : [];
       return new Table({
         name: table.table_name,
-        fields: table.fields.map((f) => {
+        fields: sanitizedFields.map((f) => {
           const { data_type, reference_table, ...attributes } =
             f.type_and_configuration;
           let type = data_type;

package/agent-skills/database-design.js

@@ -0,0 +1,185 @@
+const GenerateTables = require("../actions/generate-tables");
+
+const normalizeTablesPayload = (rawPayload) => {
+  if (!rawPayload) return { tables: [] };
+  let payload = rawPayload;
+  if (typeof payload === "string") {
+    try {
+      payload = JSON.parse(payload);
+    } catch (e) {
+      console.error("Failed to parse generate_tables payload", e);
+      return { tables: [] };
+    }
+  }
+  if (typeof payload !== "object") return { tables: [] };
+  const normalized = { ...payload };
+  normalized.tables = Array.isArray(normalized.tables)
+    ? normalized.tables.filter(Boolean).map((table) => ({
+        ...table,
+        fields: Array.isArray(table?.fields)
+          ? table.fields.filter(Boolean).map((field) => ({
+              ...field,
+              type_and_configuration: field?.type_and_configuration || {},
+            }))
+          : [],
+      }))
+    : [];
+  return normalized;
+};
+
+const summarizeTables = (tables) =>
+  tables.map((table, idx) => {
+    const fields = (table.fields || []).slice(0, 5);
+    const fieldSummary = fields
+      .map((field) => {
+        const fname = field?.name || "(missing name)";
+        const ftype = field?.type_and_configuration?.data_type || "Unknown";
+        return `${fname}:${ftype}`;
+      })
+      .join(", ");
+    const ellipsis = table.fields.length > fields.length ? "..." : "";
+    return `${idx + 1}. ${table.table_name || "(missing name)"} – ${
+      table.fields.length
+    } field(s)${fieldSummary ? ` (${fieldSummary}${ellipsis})` : ""}`;
+  });
+
+const collectTableWarnings = (tables) => {
+  const warnings = [];
+  const seenTables = new Set();
+  tables.forEach((table, tableIdx) => {
+    const tableLabel = table.table_name || `Table #${tableIdx + 1}`;
+    if (!table.table_name)
+      warnings.push(`${tableLabel} is missing a table_name.`);
+    else if (seenTables.has(table.table_name))
+      warnings.push(`Duplicate table name "${table.table_name}".`);
+    else seenTables.add(table.table_name);
+
+    if (!Array.isArray(table.fields) || table.fields.length === 0)
+      warnings.push(`${tableLabel} does not define any fields.`);
+
+    const fieldNames = new Set();
+    (table.fields || []).forEach((field, fieldIdx) => {
+      const fieldLabel = field?.name || `Field #${fieldIdx + 1}`;
+      if (!field?.name)
+        warnings.push(`${tableLabel} has a field without a name.`);
+      else if (fieldNames.has(field.name))
+        warnings.push(`${tableLabel} repeats the field name "${field.name}".`);
+      else fieldNames.add(field.name);
+
+      if (!field?.type_and_configuration?.data_type)
+        warnings.push(
+          `${tableLabel}.${fieldLabel} must include type_and_configuration.data_type.`
+        );
+
+      if ((field?.name || "").toLowerCase() === "id")
+        warnings.push(
+          `${tableLabel}.${fieldLabel} should be omitted because every table already has an auto-increment id.`
+        );
+    });
+  });
+  return warnings;
+};
+
+const payloadFromToolCall = (tool_call) => {
+  if (!tool_call) return { tables: [] };
+  if (tool_call.input) return normalizeTablesPayload(tool_call.input);
+  if (tool_call.function?.arguments)
+    return normalizeTablesPayload(tool_call.function.arguments);
+  return { tables: [] };
+};
+
+class GenerateTablesSkill {
+  static skill_name = "Database design";
+
+  get skill_label() {
+    return "Database Design";
+  }
+
+  constructor(cfg) {
+    console.log("GenerateTablesSkill.constructor called", { cfg });
+    Object.assign(this, cfg);
+  }
+
+  async systemPrompt() {
+    console.log("GenerateTablesSkill.systemPrompt called");
+    return await GenerateTables.system_prompt();
+  }
+
+  get userActions() {
+    console.log("GenerateTablesSkill.userActions getter accessed");
+    return {
+      async apply_copilot_tables({ user, tables }) {
+        console.log("GenerateTablesSkill.userActions.apply_copilot_tables called", {
+          user_id: user?.id,
+          table_count: tables?.length,
+        });
+        if (!tables?.length) return { notify: "Nothing to create." };
+        await GenerateTables.execute({ tables }, { user });
+        return {
+          notify: `Created tables: ${tables.map((t) => t.table_name).join(", ")}`,
+        };
+      },
+    };
+  }
+
+  provideTools = () => {
+    console.log("GenerateTablesSkill.provideTools called");
+    const parameters = GenerateTables.json_schema();
+    return {
+      type: "function",
+      process: async (input) => {
+        const payload = normalizeTablesPayload(input);
+        const tables = payload.tables || [];
+        console.log("GenerateTablesSkill.provideTools.process called", {
+          table_count: tables.length,
+        });
+        if (!tables.length) return "No tables were provided for generate_tables.";
+        const summaryLines = summarizeTables(tables).map((line) => `- ${line}`);
+        const warnings = collectTableWarnings(tables);
+        const warningLines = warnings.length
+          ? ["Warnings:", ...warnings.map((w) => `- ${w}`)]
+          : [];
+        return [
+          `Received ${tables.length} table definition${tables.length === 1 ? "" : "s"}:`,
+          ...summaryLines,
+          ...warningLines,
+        ].join("\n");
+      },
+      postProcess: async ({ tool_call }) => {
+        console.log("GenerateTablesSkill.provideTools.postProcess called", {
+          has_input: !!tool_call?.input,
+        });
+        const payload = payloadFromToolCall(tool_call);
+        const tables = payload.tables || [];
+        let preview = "";
+        try {
+          preview = GenerateTables.render_html({ tables });
+        } catch (e) {
+          preview = `<pre>${JSON.stringify(payload, null, 2)}</pre>`;
+        }
+        return {
+          stop: true,
+          add_response: preview,
+          add_user_action:
+            tables.length > 0
+              ? {
+                  name: "apply_copilot_tables",
+                  type: "button",
+                  label: `Create tables (${tables
+                    .map((t) => t.table_name)
+                    .join(", ")})`,
+                  input: { tables },
+                }
+              : undefined,
+        };
+      },
+      function: {
+        name: GenerateTables.function_name,
+        description: GenerateTables.description,
+        parameters,
+      },
+    };
+  };
+}
+
+module.exports = GenerateTablesSkill;

package/agent-skills/pagegen.js

@@ -33,6 +33,7 @@ class GeneratePageSkill {
   }
 
   constructor(cfg) {
+    console.log("GeneratePageSkill.constructor called", { cfg });
     Object.assign(this, cfg);
   }
 
@@ -88,12 +89,43 @@ class GeneratePageSkill {
 
     return {
       type: "function",
-      process: async ({ name }) => {
-        return "Metadata recieved";
+      process: async ({ name, existing_page_name }) => {
+        if (existing_page_name) {
+          const page = Page.findOne({ name: existing_page_name });
+
+          if (!page)
+            return `Existing page ${existing_page_name} not found. Unable to provide HTML for this page`;
+          if (!page.layout.html_file)
+            return `Existing page ${existing_page_name} is not HTML-based. Unable to provide HTML for this page`;
+          const file = await File.findOne(page.layout.html_file);
+          const html = await file.get_contents("utf8");
+          return (
+            `The HTML code for the ${existing_page_name} page is:` +
+            "\n```html\n" +
+            html +
+            "\n```\n"
+          );
+        } else return "Metadata recieved";
       },
       postProcess: async ({ tool_call, generate }) => {
         const str = await generate(
-          `Now generate the contents of the ${tool_call.input.name} page with HTML`,
+          `Now generate the contents of the ${tool_call.input.name} HTML page. If I asked you to embed a view, 
+ use the <embed-view> self-closing tag to do so, setting the view name in the viewname attribute. For example, 
+ to embed the view LeadForm inside a div, write: <div><embed-view viewname="LeadForm"></div>
+ 
+ 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="/static_assets/js/jquery-3.6.0.min.js"></script>
+  <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>
+
+ If you are embedding views with <embed-view>, you should also embed the following script sources at the end of the <body> tag to make sure the content inside those views works:
+
+ <script src="/static_assets/js/saltcorn-common.js"></script>
+ <script src="/static_assets/js/saltcorn.js">
+`,
         );
         const html = str.includes("```html")
           ? str.split("```html")[1].split("```")[0]
@@ -114,7 +146,7 @@ class GeneratePageSkill {
           add_user_action: {
             name: "build_copilot_page_gen",
             type: "button",
-            label: "Save page",
+            label: "Save page "+tool_call.input.name,
             input: { html },
           },
         };
@@ -124,6 +156,16 @@ class GeneratePageSkill {
         return div({ class: "border border-primary p-2 m-2" }, phrase);
       },*/
       renderToolResponse: async (response, { req }) => {
+        if (
+          typeof response === "string" &&
+          response.includes("Unable to provide HTML for this page")
+        )
+          return response;
+           if (
+          typeof response === "string" &&
+          response.includes("The HTML code for the ")
+        )
+          return `Existing page retrieved...`;
         return null;
       },
       function: {
@@ -133,8 +175,12 @@ class GeneratePageSkill {
           type: "object",
           required: ["name", "title", "min_role", "page_type"],
           properties: {
+            existing_page_name: {
+              description: `If the user asks to modify or change a page, or create a new page based on an existing page, set this to retrieve the contents of the existing page.`,
+              type: "string",
+            },
             name: {
-              description: `The name of the page, this should be a short name which is part of the url. `,
+              description: `The name of the new page to generate, this should be a short name which is part of the url. If an existing page name if given, set this to the same name to modify the existing page, and a different name to create a new page based on the existing page`,
               type: "string",
             },
             title: {

package/builder-gen.js

@@ -0,0 +1,28 @@
+const { getState } = require("@saltcorn/data/db/state");
+const WorkflowStep = require("@saltcorn/data/models/workflow_step");
+const Trigger = require("@saltcorn/data/models/trigger");
+const Table = require("@saltcorn/data/models/table");
+const { getActionConfigFields } = require("@saltcorn/data/plugin-helper");
+
+module.exports = {
+  run: async (prompt, mode, table) => {
+    await new Promise((resolve) => {
+      setTimeout(resolve, 5000);
+    });
+    return {
+      type: "blank",
+      isHTML: true,
+      contents: `<h4>Placeholder copilot response</h4>
+      <blockquote class="blockquote"><p>${prompt}</p></blockquote>
+      <pre>mode=${mode} table=${table}</pre>`,
+      text_strings: [],
+    };
+  },
+  isAsync: true,
+  description: "Generate a builder layout",
+  arguments: [
+    { name: "prompt", type: "String" },
+    { name: "mode", type: "String" },
+    { name: "table", type: "String" },
+  ],
+};

package/chat-copilot.js

@@ -36,9 +36,81 @@ const {
 const MarkdownIt = require("markdown-it"),
   md = new MarkdownIt();
 
+const AGENT_VIEWTEMPLATE_NAME = "Agent Chat";
+const COPILOT_AGENT_TRIGGER_NAME = "Saltcorn Copilot";
+
+const getAgentViewtemplate = () => {
+  const state = getState();
+  return state?.viewtemplates?.[AGENT_VIEWTEMPLATE_NAME];
+};
+
+const agentActionRegistered = () => {
+  const state = getState();
+  return !!(state?.actions && (state.actions.Agent || state.actions["Agent"]));
+};
+
+let copilotAgentTriggerCreateFailed = false;
+let copilotAgentTriggerCreateLogged = false;
+
+const ensureCopilotAgentTrigger = async () => {
+  if (!agentActionRegistered()) return null;
+  let trigger = await Trigger.findOne({
+    name: COPILOT_AGENT_TRIGGER_NAME,
+    action: "Agent",
+  });
+  if (trigger) return trigger;
+
+  if (copilotAgentTriggerCreateFailed) return null;
+  try {
+    return await Trigger.create({
+      action: "Agent",
+      when_trigger: "Never",
+      name: COPILOT_AGENT_TRIGGER_NAME,
+      configuration: {
+        prompt: "",
+        sys_prompt:
+          "You are Saltcorn Copilot. Help users build Saltcorn applications by proposing database schema, pages, views, workflows and actions.",
+        skills: [
+          { skill_type: "Database design" },
+          { skill_type: "Generate Page" },
+        ],
+      },
+    });
+  } catch (e) {
+    copilotAgentTriggerCreateFailed = true;
+    const state = getState();
+    const msg =
+      e && e.message
+        ? e.message
+        : "Unknown error while auto-creating Copilot Agent trigger";
+    if (!copilotAgentTriggerCreateLogged) {
+      copilotAgentTriggerCreateLogged = true;
+      if (state?.log) state.log(2, `Copilot: ${msg}`);
+      else console.error("Copilot:", msg);
+    }
+    return null;
+  }
+};
+
+const getAgentChatCfg = async () => {
+  const trigger = await ensureCopilotAgentTrigger();
+  if (!trigger) return null;
+  return {
+    action_id: trigger.id,
+    show_prev_runs: true,
+    prev_runs_closed: false,
+    placeholder: "How can I help you?",
+    explainer: "",
+    image_upload: false,
+    stream: true,
+    audio_recorder: false,
+    layout: "Vertical",
+  };
+};
+
 const get_state_fields = () => [];
 
-const run = async (table_id, viewname, cfg, state, { res, req }) => {
+const runLegacy = async (table_id, viewname, cfg, state, { res, req }) => {
   const prevRuns = (
     await WorkflowRun.find(
       { trigger_id: null /*started_by: req.user?.id*/ }, //todo uncomment
@@ -49,6 +121,7 @@ const run = async (table_id, viewname, cfg, state, { res, req }) => {
       r.context.interactions &&
       (r.context.copilot === "_system" || !r.context.copilot)
   );
+  console.log({prevRuns})
   const cfgMsg = incompleteCfgMsg();
   if (cfgMsg) return cfgMsg;
   let runInteractions = "";
@@ -284,6 +357,23 @@ const run = async (table_id, viewname, cfg, state, { res, req }) => {
   };
 };
 
+const run = async (table_id, viewname, cfg, state, extra) => {
+  const agentVt = getAgentViewtemplate();
+  if (!agentVt) return await runLegacy(table_id, viewname, cfg, state, extra);
+
+  const agentCfg = await getAgentChatCfg();
+  if (!agentCfg) return await runLegacy(table_id, viewname, cfg, state, extra);
+
+  const agentView = new View({
+    name: viewname,
+    viewtemplate: AGENT_VIEWTEMPLATE_NAME,
+    configuration: agentCfg,
+    min_role: 100,
+  });
+  console.log({agentView})
+  return await agentView.run(state, extra);
+};
+
 const ellipsize = (s, nchars) => {
   if (!s || !s.length) return "";
   if (s.length <= (nchars || 20)) return text_attr(s);
@@ -330,7 +420,7 @@ build a workflow that asks the user for their name and age
 
 */
 
-const execute = async (table_id, viewname, config, body, { req }) => {
+const executeLegacy = async (table_id, viewname, config, body, { req }) => {
   const { fcall_id, run_id } = body;
 
   const run = await WorkflowRun.findOne({ id: +run_id });
@@ -360,7 +450,7 @@ const execute = async (table_id, viewname, config, body, { req }) => {
   return { json: { success: "ok", fcall_id, ...(result || {}) } };
 };
 
-const interact = async (table_id, viewname, config, body, { req }) => {
+const interactLegacy = async (table_id, viewname, config, body, { req }) => {
   const { userinput, run_id } = body;
   let run;
   if (!run_id || run_id === "undefined")
@@ -487,6 +577,81 @@ const interact = async (table_id, viewname, config, body, { req }) => {
     };
 };
 
+const runAgentRoute = async (routeName, table_id, viewname, body, extra) => {
+  const agentVt = getAgentViewtemplate();
+  if (!agentVt?.routes?.[routeName]) return null;
+  const agentCfg = await getAgentChatCfg();
+  if (!agentCfg) return null;
+  return await agentVt.routes[routeName](table_id, viewname, agentCfg, body, extra);
+};
+
+const interact = async (table_id, viewname, config, body, extra) => {
+  const agentResp = await runAgentRoute(
+    "interact",
+    table_id,
+    viewname,
+    body,
+    extra,
+  );
+  if (agentResp) return agentResp;
+  return await interactLegacy(table_id, viewname, config, body, extra);
+};
+
+// Legacy route used only by the legacy UI. The Agent Chat UI uses `execute_user_action`.
+const execute = async (table_id, viewname, config, body, extra) => {
+  return await executeLegacy(table_id, viewname, config, body, extra);
+};
+
+const delprevrun = async (table_id, viewname, config, body, extra) => {
+  const agentResp = await runAgentRoute(
+    "delprevrun",
+    table_id,
+    viewname,
+    body,
+    extra,
+  );
+  if (agentResp) return agentResp;
+  return { json: { error: "delprevrun is only available in Agent Chat mode" } };
+};
+
+const debug_info = async (table_id, viewname, config, body, extra) => {
+  const agentResp = await runAgentRoute(
+    "debug_info",
+    table_id,
+    viewname,
+    body,
+    extra,
+  );
+  if (agentResp) return agentResp;
+  return { json: { error: "debug_info is only available in Agent Chat mode" } };
+};
+
+const skillroute = async (table_id, viewname, config, body, extra) => {
+  const agentResp = await runAgentRoute(
+    "skillroute",
+    table_id,
+    viewname,
+    body,
+    extra,
+  );
+  if (agentResp) return agentResp;
+  return { json: { error: "skillroute is only available in Agent Chat mode" } };
+};
+
+const execute_user_action = async (table_id, viewname, config, body, extra) => {
+  const agentResp = await runAgentRoute(
+    "execute_user_action",
+    table_id,
+    viewname,
+    body,
+    extra,
+  );
+  if (agentResp) return agentResp;
+  return {
+    json: { error: "execute_user_action is only available in Agent Chat mode" },
+  };
+};
+
 const getFollowOnGeneration = async (tool_call) => {
   const fname = tool_call.function?.name || tool_call.toolName;
   const actionClass = classesWithSkills().find(
@@ -595,5 +760,12 @@ module.exports = {
   tableless: true,
   singleton: true,
   run,
-  routes: { interact, execute },
+  routes: {
+    interact,
+    execute,
+    delprevrun,
+    debug_info,
+    skillroute,
+    execute_user_action,
+  },
 };

package/copilot-as-agent.js

@@ -0,0 +1,75 @@
+const Field = require("@saltcorn/data/models/field");
+const Table = require("@saltcorn/data/models/table");
+const Form = require("@saltcorn/data/models/form");
+const View = require("@saltcorn/data/models/view");
+const Trigger = require("@saltcorn/data/models/trigger");
+const { findType } = require("@saltcorn/data/models/discovery");
+const { save_menu_items } = require("@saltcorn/data/models/config");
+const db = require("@saltcorn/data/db");
+const WorkflowRun = require("@saltcorn/data/models/workflow_run");
+const { localeDateTime } = require("@saltcorn/markup");
+const {
+  div,
+  script,
+  domReady,
+  pre,
+  code,
+  input,
+  h4,
+  style,
+  h5,
+  button,
+  text_attr,
+  i,
+  p,
+  span,
+  small,
+  form,
+  textarea,
+} = require("@saltcorn/markup/tags");
+const { getState } = require("@saltcorn/data/db/state");
+
+const get_state_fields = () => [];
+
+const sys_prompt = ``;
+
+const get_agent_view = () => {
+  const agent_action = new Trigger({
+    action: "Agent",
+    when_trigger: "Never",
+    configuration: {
+      sys_prompt,
+      skills: [
+        { skill_type: "Generate Page" },
+        { skill_type: "Database design" },
+      ],
+    },
+  });
+  return new View({
+    viewtemplate: "Agent Chat",
+    name: "Saltcorn Agent copilot",
+    min_role: 1,
+    configuration: {
+      agent_action,
+    },
+  });
+};
+const run = async (table_id, viewname, cfg, state, reqres) => {
+  return await get_agent_view().run(state, reqres);
+};
+
+const interact = async (table_id, viewname, config, body, reqres) => {
+  console.log("copilot interact with body", body);
+  const view = get_agent_view();
+  return await view.runRoute("interact", body, reqres.res, reqres);
+};
+
+module.exports = {
+  name: "Saltcorn Agent copilot",
+  display_state_form: false,
+  get_state_fields,
+  tableless: true,
+  singleton: true,
+  run,
+  routes: { interact },
+};

package/index.js

@@ -4,15 +4,25 @@ const { features } = require("@saltcorn/data/db/state");
 
 module.exports = {
   sc_plugin_api_version: 1,
-  dependencies: ["@saltcorn/large-language-model"],
+  dependencies: ["@saltcorn/large-language-model", "@saltcorn/agents"],
   viewtemplates: features.workflows
-    ? [require("./chat-copilot"), require("./user-copilot")]
+    ? [
+        require("./chat-copilot"),
+        require("./user-copilot"),
+        require("./copilot-as-agent"),
+      ]
     : [require("./action-builder"), require("./database-designer")],
   functions: features.workflows
-    ? { copilot_generate_workflow: require("./workflow-gen") }
+    ? {
+        copilot_generate_layout: require("./builder-gen.js"),
+        copilot_generate_workflow: require("./workflow-gen"),
+      }
     : {},
   actions: { copilot_generate_page: require("./page-gen-action") },
   exchange: {
-    agent_skills: [require("./agent-skills/pagegen.js")],
+    agent_skills: [
+      require("./agent-skills/pagegen.js"),
+      require("./agent-skills/database-design.js"),
+    ],
   },
 };

package/package.json

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

package/page-gen-action.js

@@ -7,9 +7,129 @@ 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 }) => {
+    console.log({
+      table,
+      mode,
+    }, "OOOOOOOOOO");
     if (mode === "workflow") {
       return [
         {
@@ -36,6 +156,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",
@@ -66,9 +210,13 @@ module.exports = {
         },
       ];
     } else if (table) {
+      console.log(JSON.stringify(table, null, 2), "TABLE");
       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 +241,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 +281,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 +295,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 +303,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 +416,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 +472,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]);