@simmalugnt-se/payload-editor-assistant 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.10.0
+
+- Picks several images for upload fields with `hasMany`, such as a gallery: it adds after the
+  images already there, removes one when asked, and keeps to the field's `minRows` and `maxRows`,
+  saying so when the editor asks for more than fit. The quoted schema marks such fields with
+  `hasMany` and their limits.
+- A proposal is refused before it reaches the form when an upload or relationship field it changes
+  holds the wrong shape: a list in a field for one, a repeated id, too many or too few, or a field
+  pointing at several collections.
+- The change list names every image in a list ("img-1.png, img-3.png") instead of showing ids, and
+  shows an empty list as empty.
+
+## 0.9.1
+
+- The assistant no longer shows on Payload's sign-in pages (login, logout, forgot and reset
+  password, first user, unauthorized). Right after signing in, the panel opened on the login page
+  before Admin loaded.
+
 ## 0.9.0
 
 - Translation: on a document with localized text that is empty in the open language but filled in

package/README.md

@@ -117,6 +117,11 @@ The suggested change names the image ("Image: empty → office-2024.jpg"), and t
 Preview show it. Images with alt texts are easier to find. Fields with several images (`hasMany`)
 are not picked yet.
 
+Galleries and other upload fields with `hasMany` work the same way: the assistant adds images after
+the ones already there, removes one when asked, and stays within the field's `minRows` and
+`maxRows`, saying so when the editor asks for more than fit. Fields that point at several
+collections are not filled.
+
 ## Rich text
 
 With `@payloadcms/richtext-lexical` installed, the assistant reads Lexical rich text as Markdown,

package/dist/components/EditorAssistantAction.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth, useTranslation } from "@payloadcms/ui";
+import { useAuth, useConfig, useTranslation } from "@payloadcms/ui";
+import { usePathname } from "next/navigation";
+import { isAuthView } from "../view.js";
 import { useAssistantState } from "./assistant-context.js";
 import { COPY, uiLanguage } from "./copy.js";
 /** The one control that opens and closes the assistant panel, in Admin's header. */
@@ -8,7 +10,9 @@ export function EditorAssistantAction() {
     const { user } = useAuth();
     const { i18n } = useTranslation();
     const { open, setOpen } = useAssistantState();
-    if (!user) {
+    const { config } = useConfig();
+    const pathname = usePathname();
+    if (!user || isAuthView(pathname ?? "", config.routes.admin, config.admin.routes)) {
         return null;
     }
     return (_jsxs("button", { "aria-expanded": open, className: open ? "ea-trigger ea-trigger--open" : "ea-trigger", onClick: (event) => {

package/dist/components/EditorAssistantProvider.js

@@ -1,14 +1,19 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAuth } from "@payloadcms/ui";
+import { useAuth, useConfig } from "@payloadcms/ui";
+import { usePathname } from "next/navigation";
 import "../styles/assistant.css";
+import { isAuthView } from "../view.js";
 import { AssistantStateProvider, useAssistantState } from "./assistant-context.js";
 import { ChangedFieldsHighlight } from "./ChangedFieldsHighlight.js";
 import { EditorAssistantAside } from "./EditorAssistantAside.js";
 import { useNavRoom } from "./nav-room.js";
 export function EditorAssistantProvider({ children, shortcuts = [], collections = [], }) {
     const { user } = useAuth();
-    return (_jsx(AssistantStateProvider, { shortcuts: shortcuts, collections: collections, userId: user?.id, children: user ? _jsx(EditorAssistantShell, { children: children }) : children }));
+    const { config } = useConfig();
+    const pathname = usePathname();
+    const signingIn = isAuthView(pathname ?? "", config.routes.admin, config.admin.routes);
+    return (_jsx(AssistantStateProvider, { shortcuts: shortcuts, collections: collections, userId: user?.id, children: user && !signingIn ? _jsx(EditorAssistantShell, { children: children }) : children }));
 }
 function EditorAssistantShell({ children }) {
     const { open } = useAssistantState();

package/dist/domain/propose.js

@@ -4,6 +4,7 @@ import { humanDiff, richTextLines } from "../form/diff.js";
 import { hashFormRevision } from "../form/hash.js";
 import { isFormOperation, normalizeOperations } from "../form/operations.js";
 import { getAtPath, parseFieldPath } from "../form/path.js";
+import { relationValueError } from "../form/relation-shape.js";
 import { loadRichText, toBlocks } from "../form/rich-text.js";
 import { finalizeCompiled, openRichText } from "../form/shape.js";
 import { DEFAULT_APPROVAL_SLUG } from "../package-name.js";
@@ -55,6 +56,10 @@ export async function proposeChange(req, options, input) {
     if (!finalized.ok) {
         return { ok: false, error: "tool_denied", message: finalized.error };
     }
+    const relationError = relationValueError(fields, finalized.data, changedPaths(typedOperations));
+    if (relationError) {
+        return { ok: false, error: "tool_denied", message: relationError };
+    }
     if (options.validateProposal) {
         const extra = await options.validateProposal({
             operations: typedOperations,
@@ -72,11 +77,9 @@ export async function proposeChange(req, options, input) {
     const canonicalHash = await hashFormRevision(typedOperations);
     const nonce = crypto.randomUUID();
     const expiresAt = new Date(Date.now() + TTL_MS).toISOString();
-    // Ids set by this change, before and after, get names in the change list.
+    // Ids set by this change, before and after, get names in the change list; a gallery has several.
     const setIds = new Set(typedOperations.flatMap((operation) => operation.op === "set"
-        ? [operation.value, getAtPath(current, parseFieldPath(operation.path))]
-            .filter((value) => typeof value === "string" || typeof value === "number")
-            .map(String)
+        ? [operation.value, getAtPath(current, parseFieldPath(operation.path))].flatMap(idsIn)
         : []));
     const labels = setIds.size
         ? await labelRelations(req, fields, [finalized.data, current], setIds)
@@ -200,3 +203,13 @@ function storedBlocks(fields, path, current) {
     const blocks = toBlocks(getAtPath(current, parseFieldPath(path)), field?.editor);
     return Array.isArray(blocks) ? blocks : [];
 }
+/** The ids a set value holds: one, or a list as a `hasMany` field takes (ids or documents). */
+function idsIn(value) {
+    if (typeof value === "string" || typeof value === "number") {
+        return [String(value)];
+    }
+    if (Array.isArray(value)) {
+        return value.flatMap((entry) => entry && typeof entry === "object" && "id" in entry ? idsIn(entry.id) : idsIn(entry));
+    }
+    return [];
+}

package/dist/form/diff.js

@@ -43,9 +43,21 @@ const FIELD_PREVIEW = 300;
  */
 export function humanDiff(current, operations, language = "en", labels) {
     const copy = COPY[language];
+    const nameOf = (value) => {
+        const id = typeof value === "string" || typeof value === "number"
+            ? String(value)
+            : value && typeof value === "object" && "id" in value
+                ? String(value.id)
+                : undefined;
+        return id !== undefined ? labels?.get(id) : undefined;
+    };
+    // A chosen image reads as its name; a list of them (a gallery) as their names in order.
     const named = (value) => {
-        const id = typeof value === "string" || typeof value === "number" ? String(value) : undefined;
-        return id !== undefined && labels?.has(id) ? labels.get(id) : value;
+        if (Array.isArray(value) && value.length > 0) {
+            const names = value.map(nameOf);
+            return names.every((name) => name !== undefined) ? names.join(", ") : value;
+        }
+        return nameOf(value) ?? value;
     };
     return operations.map((operation) => {
         switch (operation.op) {
@@ -154,6 +166,7 @@ function isEmpty(value) {
     return (value === undefined ||
         value === null ||
         value === "" ||
+        (Array.isArray(value) && value.length === 0) ||
         (isLexical(value) && !lexicalPlaintext(value)));
 }
 function preview(value, copy, max = HEADER_PREVIEW) {

package/dist/form/relation-shape.d.ts

@@ -0,0 +1,9 @@
+import { type FieldNode } from "../schema/fields.ts";
+/**
+ * Checks the upload and relationship fields a proposal changes (`paths`, as `changedPaths` gives
+ * them): one id for a single field; for a `hasMany` field a list of ids without repeats, within its
+ * `minRows` and `maxRows` (an empty list is allowed). Fields pointing at several collections are
+ * refused. Untouched fields are not checked, so a value the editor saved cannot block a proposal.
+ * Whether the ids exist and are readable is `verifyDocumentRelations`' job.
+ */
+export declare function relationValueError(fields: FieldNode[], data: Record<string, unknown>, paths: string[]): string | null;

package/dist/form/relation-shape.js

@@ -0,0 +1,74 @@
+import { fieldAtPath } from "../schema/fields.js";
+import { getAtPath, parseFieldPath } from "./path.js";
+const ID = /^[\w-]+$/;
+/**
+ * Checks the upload and relationship fields a proposal changes (`paths`, as `changedPaths` gives
+ * them): one id for a single field; for a `hasMany` field a list of ids without repeats, within its
+ * `minRows` and `maxRows` (an empty list is allowed). Fields pointing at several collections are
+ * refused. Untouched fields are not checked, so a value the editor saved cannot block a proposal.
+ * Whether the ids exist and are readable is `verifyDocumentRelations`' job.
+ */
+export function relationValueError(fields, data, paths) {
+    const checked = new Set();
+    for (const changed of paths) {
+        const segments = changed.split(".");
+        // A change inside a list of ids (`images.2`) is checked on the whole field.
+        while (segments.length > 1 && /^\d+$/.test(segments.at(-1) ?? "")) {
+            segments.pop();
+        }
+        const path = segments.join(".");
+        if (checked.has(path)) {
+            continue;
+        }
+        checked.add(path);
+        const field = fieldAtPath(fields, path, data);
+        if (!field || (field.type !== "upload" && field.type !== "relationship")) {
+            continue;
+        }
+        const error = fieldError(field, path, getAtPath(data, parseFieldPath(path)));
+        if (error) {
+            return error;
+        }
+    }
+    return null;
+}
+function fieldError(field, path, value) {
+    const noun = field.type === "upload" ? "image" : "document";
+    if ((field.relationTo?.length ?? 0) > 1) {
+        return `"${path}" points at several collections; the assistant cannot choose for it yet.`;
+    }
+    if (value === null || value === undefined) {
+        return null;
+    }
+    if (!field.hasMany) {
+        return Array.isArray(value) ? `"${path}" takes one ${noun}: set it to a single id.` : null;
+    }
+    const ids = Array.isArray(value) ? value.map(idOf) : undefined;
+    if (!ids || ids.some((id) => id === undefined)) {
+        return `"${path}" takes a list of ${noun} ids, in the order they show.`;
+    }
+    if (new Set(ids).size !== ids.length) {
+        return `"${path}" has the same ${noun} more than once.`;
+    }
+    if (field.maxRows !== undefined && ids.length > field.maxRows) {
+        return `"${path}" takes at most ${field.maxRows} ${noun}s; the proposal has ${ids.length}.`;
+    }
+    if (field.minRows !== undefined && ids.length > 0 && ids.length < field.minRows) {
+        return `"${path}" takes at least ${field.minRows} ${noun}s; the proposal has ${ids.length}.`;
+    }
+    return null;
+}
+/** An id, or a document as Admin may hold a chosen one. */
+function idOf(entry) {
+    if (typeof entry === "number") {
+        return String(entry);
+    }
+    if (typeof entry === "string") {
+        return ID.test(entry) ? entry : undefined;
+    }
+    if (entry && typeof entry === "object") {
+        const record = entry;
+        return idOf(record.id ?? record.value);
+    }
+    return undefined;
+}

package/dist/runtime/context.d.ts

@@ -10,6 +10,10 @@ type CompactField = {
     type: string;
     required?: boolean;
     relationTo?: string[];
+    /** Upload and relationship fields that take several, and how many. */
+    hasMany?: true;
+    minRows?: number;
+    maxRows?: number;
 };
 export type TurnContext = {
     allowlist: Array<{

package/dist/runtime/context.js

@@ -99,11 +99,19 @@ export function compactEntity(entity) {
     };
 }
 function compactField(field) {
+    const relation = field.type === "upload" || field.type === "relationship";
     return {
         name: field.name,
         type: field.type,
         required: field.required || undefined,
-        relationTo: field.type === "upload" || field.type === "relationship" ? field.relationTo : undefined,
+        relationTo: relation ? field.relationTo : undefined,
+        ...(relation && field.hasMany
+            ? {
+                hasMany: true,
+                ...(field.minRows !== undefined ? { minRows: field.minRows } : {}),
+                ...(field.maxRows !== undefined ? { maxRows: field.maxRows } : {}),
+            }
+            : {}),
     };
 }
 function translationFor(req, bridge, fields, form, otherLanguages) {

package/dist/runtime/system-prompt.js

@@ -36,7 +36,7 @@ function openDocumentLine(bridge, turnContext) {
     }
     return `${viewLine(turnContext)}No document is open. You can search, navigate, or create a draft. Form edits need an open document.`;
 }
-/** Where the assistant may search images and look at them, it picks one for an upload field. */
+/** Where the assistant may search images and look at them, it picks them for upload fields. */
 function pickingLine(turnContext) {
     const libraries = turnContext?.allowlist.filter((entity) => entity.kind === "collection" &&
         entity.capabilities.includes("content.find") &&
@@ -45,7 +45,7 @@ function pickingLine(turnContext) {
         return "";
     }
     const names = libraries.map((entity) => entity.slug).join(", ");
-    return `To pick an image for an upload field (a share image, a block image), search ${names} with content.find using words from the request or the page, then look at the likely candidates with media.view and their ids before proposing one. If the search finds nothing useful, list recent images (content.find without a query) and look at those. Propose only an image you have looked at, by its id. If none fits, say so and propose nothing. A share image (delningsbild, social image) is usually the upload field among the page's meta or SEO fields; prefer a landscape image at least 1200px wide for it.`;
+    return `To pick an image for an upload field (a share image, a block image), search ${names} with content.find using words from the request or the page, then look at the likely candidates with media.view and their ids before proposing one. If the search finds nothing useful, list recent images (content.find without a query) and look at those. Propose only an image you have looked at, by its id. If none fits, say so and propose nothing. A share image (delningsbild, social image) is usually the upload field among the page's meta or SEO fields; prefer a landscape image at least 1200px wide for it. An upload field marked hasMany (a gallery) takes several: set the whole field to the list of ids in the order they show. To add images, keep the images already there and add the new ones after them; to remove one, set the list without it; replace them all only when asked. Stay within its maxRows and minRows: if the editor asks for more than fit, say how many it takes and propose no more than that. Look at every image you add.`;
 }
 /** Without seeing the image, a model writes alt texts from the filename; say when it can look. */
 function imageLine(bridge, turnContext) {

package/dist/schema/fields.d.ts

@@ -7,6 +7,9 @@ export type FieldNode = {
     localized?: boolean;
     relationTo?: string[];
     hasMany?: boolean;
+    /** How many a `hasMany` field takes. */
+    minRows?: number;
+    maxRows?: number;
     options?: string[];
     label?: string;
     description?: string;

package/dist/schema/fields.js

@@ -55,6 +55,8 @@ function walkField(field, parentPath, allowlist, denyFields) {
         required: field.required,
         localized: field.localized,
         hasMany: field.hasMany,
+        ...(field.hasMany && typeof field.minRows === "number" ? { minRows: field.minRows } : {}),
+        ...(field.hasMany && typeof field.maxRows === "number" ? { maxRows: field.maxRows } : {}),
         relationTo: normalizeRelationTo(field.relationTo),
         options: optionValues(field.options),
         label: asLabel(field.label) ?? field.name,

package/dist/view.d.ts

@@ -15,6 +15,12 @@ export type AdminView = {
 };
 export type AdminViewKind = AdminView["kind"];
 export declare function parseAdminView(pathname: string, adminRoute?: string): AdminView;
+/**
+ * Whether the path is one of Payload's sign-in pages (login, logout, forgot, reset, first user,
+ * unauthorized). The assistant does not show there, even in the moment after signing in when the
+ * user is known but the login page is still open.
+ */
+export declare function isAuthView(pathname: string, adminRoute: string, routes?: Partial<Record<string, string>>): boolean;
 /** Keep only views that point at something the host allowlisted. */
 export declare function sanitizeAdminView(value: unknown, allowed: {
     collections: Record<string, unknown>;

package/dist/view.js

@@ -24,6 +24,33 @@ export function parseAdminView(pathname, adminRoute = "/admin") {
     }
     return { kind: "other" };
 }
+/** Payload's own sign-in routes (`admin.routes`), with Payload's defaults. */
+const AUTH_ROUTES = {
+    login: "/login",
+    logout: "/logout",
+    inactivity: "/logout-inactivity",
+    forgot: "/forgot",
+    reset: "/reset",
+    createFirstUser: "/create-first-user",
+    unauthorized: "/unauthorized",
+};
+/**
+ * Whether the path is one of Payload's sign-in pages (login, logout, forgot, reset, first user,
+ * unauthorized). The assistant does not show there, even in the moment after signing in when the
+ * user is known but the login page is still open.
+ */
+export function isAuthView(pathname, adminRoute, routes = {}) {
+    const base = trimSlashes(adminRoute);
+    const path = trimSlashes(pathname.split(/[?#]/)[0] ?? "");
+    const rest = base ? stripPrefix(path, base) : path;
+    if (!rest) {
+        return false;
+    }
+    return Object.entries(AUTH_ROUTES).some(([key, fallback]) => {
+        const route = trimSlashes(routes[key] ?? fallback);
+        return Boolean(route) && (rest === route || rest.startsWith(`${route}/`));
+    });
+}
 /** Keep only views that point at something the host allowlisted. */
 export function sanitizeAdminView(value, allowed) {
     if (!value || typeof value !== "object") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simmalugnt-se/payload-editor-assistant",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Context-aware editor assistant plugin for Payload Admin",
   "keywords": [
     "payload",