@simmalugnt-se/payload-editor-assistant 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 0.3.0
+
+- Keep or undo: a proposed form change goes into the form right away, so the fields and Live Preview
+  show it, with the changed fields outlined. **Keep** and **Undo** replace Approve and Reject for
+  form changes; undo asks first if the editor edited the form since. Writing another message keeps
+  the change and builds on it. Keep is still checked and logged on the server. Draft creation is
+  unchanged.
+- Proposals expire after 30 minutes instead of 2.
+- Everything the panel says itself (buttons, labels, the proposal card, errors) follows Admin's
+  language, Swedish or English; the assistant's replies follow the language the editor writes in.
+  Errors read as sentences instead of codes such as `provider_error`.
+- With a single field selected the assistant changes only that field; with a block or row selected,
+  only fields inside it.
+- When the editor asks for a change and the model writes the new value in chat instead of staging
+  it ("a tighter version could be "…""), the assistant asks it once more to stage it. A value the
+  model volunteers while answering a question stays advice.
+- "This" means what the editor selected. The assistant follows the field, block or array row last
+  clicked or focused in the form, or clicked in the preview through
+  `@simmalugnt-se/payload-visual-editing`, shows it above the message box and keeps changes inside
+  it unless asked for more. The server resolves the selection against the fields the assistant may
+  see, so hidden fields never reach the model.
+- The drawer looks like the rest of Admin: Payload's buttons, icons, type and greys instead of its
+  own, the assistant's replies as plain text, and the document shown as "Page · Home" (with the
+  locale only when the project is localized). "Reset" is "New chat" and shows only when there is
+  something to clear. The selection, the proposal and the focused message box use visual editing's
+  highlight blue, so they read as the same selection as the outline in the preview.
+- A selected rich text field reaches the model as its text rather than Lexical JSON.
+- Selection labels leave out Payload's required and locale markers ("Headline", not "Headline*— sv").
+- Fix: approving a proposal failed on SQLite ("The proposal could not be applied"): the approval
+  and audit access rules compared the stored text `actor` with a numeric user id.
+
 ## 0.2.0
 
 Breaking: options that were accepted but did nothing are removed.

package/README.md

@@ -69,13 +69,39 @@ Nothing is reachable unless you list it. Each collection or global gets the capa
 | `content.find` | search and list documents | no |
 | `content.findById` | read one document | no |
 | `form.read` | read the open edit form, including unsaved changes | no |
-| `form.propose` | propose changes to the open form; the editor reviews them before they apply | yes |
+| `form.propose` | put a change in the open form, where the editor keeps or undoes it | yes |
 | `draft.create` | create a new draft document (collections only) | yes |
 
-The assistant never publishes. Approved form changes land in the open form and the editor saves as
-usual; an approved `draft.create` saves a new, unpublished draft. The `users` collection, Payload's own collections and fields that look like
+The assistant never publishes. Form changes land in the open form and the editor saves as usual; an
+approved `draft.create` saves a new, unpublished draft. The `users` collection, Payload's own collections and fields that look like
 secrets (`password`, `token`, `apiKey`, ...) are always off limits.
 
+## Keep or undo
+
+A proposed form change goes straight into the open form, so the fields and Live Preview show it
+before the editor decides. The changed fields are outlined in blue, and the panel offers **Keep**
+and **Undo**. Undo puts the form back as it was; if the editor typed in the form in the meantime,
+the panel asks first, since undo removes that too. Writing another message keeps the change and
+builds on it ("shorter", "now the summary").
+
+Keep is still checked on the server against the form the change was made for, and logged. A
+proposal expires after 30 minutes.
+
+With autosave (`versions.drafts.autosave`) the draft is saved with the change while it is shown;
+undo saves the draft back. A preview that renders from the saved draft (`RefreshRouteOnSave`)
+needs autosave to show the change before it is kept; one that listens to the form
+(`useLivePreview`) shows it either way.
+
+## Selection
+
+The editor can click a field, a block or an array row, in the form or in Live Preview, and then write
+"make this shorter". The selection shows above the message box; the assistant treats it as "this"
+and keeps its changes inside it unless asked for more. Clicking elsewhere in Admin clears it, and
+clicks in the assistant keep it.
+
+Preview clicks need `@simmalugnt-se/payload-visual-editing` (0.2.0 or later), which announces them
+with a `visual-editing:select` event. Without it the selection follows the form only.
+
 ## Options
 
 | Option | |

package/dist/collections/approvals.js

@@ -5,11 +5,12 @@ export function createApprovalCollection(slug = DEFAULT_APPROVAL_SLUG) {
         admin: {
             hidden: true,
         },
+        // `actor` is stored as text; comparing it with a numeric user id matches nothing on SQLite.
         access: {
             create: ({ req }) => Boolean(req.user),
             delete: () => false,
-            read: ({ req }) => (req.user ? { actor: { equals: req.user.id } } : false),
-            update: ({ req }) => (req.user ? { actor: { equals: req.user.id } } : false),
+            read: ({ req }) => (req.user ? { actor: { equals: String(req.user.id) } } : false),
+            update: ({ req }) => (req.user ? { actor: { equals: String(req.user.id) } } : false),
         },
         fields: [
             { name: "actor", type: "text", required: true, index: true },

package/dist/collections/audit.js

@@ -9,7 +9,7 @@ export function createAuditCollection(slug = DEFAULT_AUDIT_SLUG) {
         access: {
             create: ({ req }) => Boolean(req.user),
             delete: () => false,
-            read: ({ req }) => (req.user ? { actor: { equals: req.user.id } } : false),
+            read: ({ req }) => (req.user ? { actor: { equals: String(req.user.id) } } : false),
             update: () => false,
         },
         fields: [

package/dist/components/ChangedFieldsHighlight.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Marks the fields a previewed proposal changed, in visual editing's highlight blue, until the
+ * editor keeps or undoes it. A stylesheet rather than classes: Payload re-renders fields freely,
+ * and ids and `data-field-path` are what stays put. Rows the change sits in get a tinted header,
+ * so a change inside a collapsed block is still visible.
+ */
+export declare function ChangedFieldsHighlight(): import("react").JSX.Element | null;
+export declare function changedFieldsCss(paths: string[]): string;

package/dist/components/ChangedFieldsHighlight.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAssistantState } from "./assistant-context.js";
+const ACCENT = "#2563eb";
+const TINT = "rgba(37, 99, 235, 0.08)";
+/**
+ * Marks the fields a previewed proposal changed, in visual editing's highlight blue, until the
+ * editor keeps or undoes it. A stylesheet rather than classes: Payload re-renders fields freely,
+ * and ids and `data-field-path` are what stays put. Rows the change sits in get a tinted header,
+ * so a change inside a collapsed block is still visible.
+ */
+export function ChangedFieldsHighlight() {
+    const { pendingApproval } = useAssistantState();
+    const paths = pendingApproval?.applied ? (pendingApproval.preview?.changedPaths ?? []) : [];
+    if (paths.length === 0) {
+        return null;
+    }
+    return _jsx("style", { children: changedFieldsCss(paths) });
+}
+export function changedFieldsCss(paths) {
+    const fields = new Set();
+    const rows = new Set();
+    const headers = new Set();
+    for (const path of paths) {
+        fields.add(`#${CSS.escape(`field-${path.replace(/\./g, "__")}`)}`);
+        fields.add(`[data-field-path="${CSS.escape(path)}"]`);
+        const segments = path.split(".");
+        if (/^\d+$/.test(segments.at(-1) ?? "")) {
+            rows.add(`#${CSS.escape(rowId(segments))} > .collapsible`);
+        }
+        for (let end = 2; end < segments.length; end++) {
+            if (/^\d+$/.test(segments[end - 1] ?? "")) {
+                headers.add(`#${CSS.escape(rowId(segments.slice(0, end)))} > .collapsible > .collapsible__toggle-wrap`);
+            }
+        }
+    }
+    const rules = [
+        fields.size > 0 &&
+            `${[...fields].join(",\n")} { outline: 2px solid ${ACCENT}; outline-offset: 2px; background-color: ${TINT}; }`,
+        rows.size > 0 &&
+            `${[...rows].join(",\n")} { outline: 2px solid ${ACCENT}; outline-offset: 2px; }`,
+        headers.size > 0 &&
+            `${[...headers].join(",\n")} { background-color: ${TINT}; box-shadow: inset 3px 0 0 ${ACCENT}; }`,
+    ];
+    return rules.filter(Boolean).join("\n");
+}
+/** Payload's DOM id for a block or array row: ["layout", "2", "items", "0"] → "layout-2-items-row-0". */
+function rowId(segments) {
+    return `${segments.slice(0, -1).join("-")}-row-${segments.at(-1)}`;
+}

package/dist/components/EditorAssistantAside.js

@@ -1,59 +1,28 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useConfig, useLocale, useTranslation } from "@payloadcms/ui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, ChevronIcon, useConfig, useLocale, useTranslation, XIcon } from "@payloadcms/ui";
 import { usePathname, useRouter } from "next/navigation";
-import { useLayoutEffect, useRef, useState, } from "react";
+import { useEffect, useLayoutEffect, useRef, useState, } from "react";
 import { parseAdminView } from "../view.js";
 import { assistantRequest } from "./assistant-api.js";
 import { useAssistantState, } from "./assistant-context.js";
-const STATUS_LABEL = {
-    idle: "",
-    unavailable: "unavailable",
-    unauthorized: "unauthorized",
-    rate_limited: "rate_limited",
-    timeout: "timeout",
-    provider_error: "provider_error",
-    tool_denied: "tool_denied",
-    stale_context: "stale_context",
-    aborted: "aborted",
-    streaming: "Working…",
-};
-/** Messages the panel adds to the chat itself; they follow the editor's chat language. */
-const CHAT_COPY = {
-    en: {
-        requestFailed: "I could not complete that request.",
-        done: "Done.",
-        proposalFailed: "The proposal could not be applied.",
-        rejectedForm: "Rejected. The form was not changed.",
-        rejectedDraft: "Rejected. No draft was created.",
-        applied: "Applied to the unsaved form. Save in Payload when you are ready.",
-        applyFailed: "The form could not be updated. It was left unchanged.",
-        draftCreated: "The draft is created and open.",
-    },
-    sv: {
-        requestFailed: "Jag kunde inte slutföra det.",
-        done: "Klart.",
-        proposalFailed: "Förslaget kunde inte genomföras.",
-        rejectedForm: "Avvisat. Formuläret ändrades inte.",
-        rejectedDraft: "Avvisat. Inget utkast skapades.",
-        applied: "Ändringen är införd i formuläret men inte sparad. Spara i Payload när du är redo.",
-        applyFailed: "Formuläret kunde inte uppdateras och lämnades orört.",
-        draftCreated: "Utkastet är skapat och öppnat.",
-    },
-};
+import { COPY, uiLanguage } from "./copy.js";
+import { KEEP_SELECTION_ATTR } from "./selection-dom.js";
 export function EditorAssistantAside() {
-    const { collapsed, setCollapsed, status, messages, shortcuts, collections, bridge, formAdapter, pendingApproval, resetConversation, setStatus, setMessages, setPendingApproval, stop, setAbortController, } = useAssistantState();
-    const { config } = useConfig();
+    const { collapsed, setCollapsed, status, messages, shortcuts, collections, bridge, formAdapter, pendingApproval, selection, setSelection, resetConversation, setStatus, setMessages, setPendingApproval, stop, setAbortController, } = useAssistantState();
+    const { config, getEntityConfig } = useConfig();
     const router = useRouter();
     const locale = useLocale();
     const { i18n } = useTranslation();
-    const [chatLanguage, setChatLanguage] = useState(i18n.language?.startsWith("sv") ? "sv" : "en");
-    const copy = CHAT_COPY[chatLanguage];
+    const copy = COPY[uiLanguage(i18n.language)];
     const pathname = usePathname();
     const view = parseAdminView(pathname ?? "", config.routes.admin);
     const visibleShortcuts = shortcuts.filter((shortcut) => shortcutMatches(shortcut, view));
     const [draft, setDraft] = useState("");
     const threadRef = useRef(null);
+    /** Whether the editor typed in the form while a preview was in it; undo would discard that. */
+    const editedSinceRef = useRef(false);
+    const [confirmUndo, setConfirmUndo] = useState(false);
     const stickToBottomRef = useRef(true);
     const apiBase = config.routes.api;
     // Scroll when the thread grows. The values are triggers, not reads.
@@ -70,11 +39,120 @@ export function EditorAssistantAside() {
         const remaining = node.scrollHeight - node.scrollTop - node.clientHeight;
         stickToBottomRef.current = remaining < 48;
     };
+    const autosave = autosaves(getEntityConfig, bridge);
+    const previewing = Boolean(pendingApproval?.applied);
+    // Edits by the editor, not by autosave: autosave rewrites form metadata, so comparing the
+    // form's data would see changes nobody made.
+    useEffect(() => {
+        if (!previewing) {
+            return;
+        }
+        const onEdit = (event) => {
+            if (event.target instanceof Element && !event.target.closest(".ea-aside")) {
+                editedSinceRef.current = true;
+            }
+        };
+        document.addEventListener("input", onEdit, true);
+        document.addEventListener("change", onEdit, true);
+        return () => {
+            document.removeEventListener("input", onEdit, true);
+            document.removeEventListener("change", onEdit, true);
+        };
+    }, [previewing]);
+    const say = (text) => {
+        setMessages((current) => [...current, { id: crypto.randomUUID(), role: "assistant", text }]);
+    };
+    /** Puts a form proposal into the form so the form and Live Preview show it before it is kept. */
+    const applyPreview = async (pending) => {
+        if (pending.capability !== "form.propose" ||
+            !pending.preview ||
+            !formAdapter ||
+            !bridge ||
+            !canApplyForm(bridge)) {
+            return pending;
+        }
+        const before = formAdapter.getData();
+        try {
+            await formAdapter.reset(pending.preview.data);
+            formAdapter.setModified(true);
+        }
+        catch {
+            return pending;
+        }
+        editedSinceRef.current = false;
+        return { ...pending, applied: { before, beforeModified: bridge.modified } };
+    };
+    const restore = async (applied) => {
+        if (!formAdapter) {
+            return;
+        }
+        await formAdapter.reset(applied.before);
+        // Autosave has most likely stored the previewed change in the draft already, and it only
+        // saves a modified form: marking it modified makes it store the restored values too, which
+        // is also what refreshes a preview that renders from the saved draft.
+        formAdapter.setModified(autosave || applied.beforeModified);
+    };
+    const decideRequest = (pending, action, formData) => assistantRequest(apiBase, "/decide", {
+        action,
+        approvalId: pending.approvalId,
+        nonce: pending.nonce,
+        collection: bridge?.collectionSlug,
+        global: bridge?.globalSlug,
+        documentId: bridge?.documentId,
+        locale: bridge?.locale ?? "en",
+        formData,
+    });
+    /**
+     * Keeps a previewed change. The server checks the proposal against the form it was made for
+     * and logs it; the form already shows the change, so nothing is applied again.
+     */
+    const keepPreview = async (pending, quiet = false) => {
+        const applied = pending.applied;
+        if (!applied) {
+            return false;
+        }
+        setPendingApproval(null);
+        setConfirmUndo(false);
+        const result = await decideRequest(pending, "approve", applied.before).catch(() => null);
+        if (!result?.ok) {
+            await restore(applied).catch(() => undefined);
+            say(copy.keepFailed);
+            return false;
+        }
+        if (!quiet) {
+            say(autosave ? copy.keptAutosave : copy.kept);
+        }
+        return true;
+    };
+    const undoPreview = async (pending, force = false) => {
+        const applied = pending.applied;
+        if (!applied) {
+            return;
+        }
+        if (editedSinceRef.current && !force) {
+            setConfirmUndo(true);
+            return;
+        }
+        setPendingApproval(null);
+        setConfirmUndo(false);
+        try {
+            await restore(applied);
+            say(copy.undone);
+        }
+        catch {
+            say(copy.applyFailed);
+        }
+        void decideRequest(pending, "reject", undefined).catch(() => undefined);
+    };
     const send = async (text) => {
         const trimmed = text.trim();
         if (!trimmed || status === "streaming") {
             return;
         }
+        // Writing on is taken as keeping what is in the form; the next change builds on it.
+        if (pendingApproval?.applied && !(await keepPreview(pendingApproval, true))) {
+            return;
+        }
         stickToBottomRef.current = true;
         setDraft("");
         const userMessage = { id: crypto.randomUUID(), role: "user", text: trimmed };
@@ -95,6 +173,7 @@ export function EditorAssistantAside() {
                 locale: locale.code,
                 uiLanguage: i18n.language,
                 formData: formAdapter?.getData(),
+                selection: selection?.path,
             }, controller.signal);
             if (controller.signal.aborted) {
                 setStatus("aborted");
@@ -114,11 +193,8 @@ export function EditorAssistantAside() {
                 return;
             }
             setStatus("idle");
-            if (result.data.language === "sv" || result.data.language === "en") {
-                setChatLanguage(result.data.language);
-            }
             if (result.data.pendingApproval) {
-                setPendingApproval(result.data.pendingApproval);
+                setPendingApproval(await applyPreview(result.data.pendingApproval));
             }
             const navigate = result.data.navigate;
             setMessages((current) => [
@@ -145,6 +221,11 @@ export function EditorAssistantAside() {
         if (!pendingApproval || status === "streaming") {
             return;
         }
+        if (pendingApproval.applied) {
+            stickToBottomRef.current = true;
+            await (action === "approve" ? keepPreview(pendingApproval) : undoPreview(pendingApproval));
+            return;
+        }
         stickToBottomRef.current = true;
         if (action === "approve" && pendingApproval.capability === "form.propose") {
             if (!formAdapter || !bridge || !canApplyForm(bridge)) {
@@ -254,41 +335,53 @@ export function EditorAssistantAside() {
         }
     };
     if (collapsed) {
-        return (_jsx("aside", { className: "ea-aside ea-aside--collapsed", "aria-label": "Assistant", children: _jsx("button", { className: "ea-aside__rail", type: "button", onClick: () => setCollapsed(false), children: "Open assistant" }) }));
+        return (_jsx("aside", { className: "ea-aside ea-aside--collapsed", "aria-label": copy.assistant, children: _jsxs("button", { className: "ea-aside__rail", type: "button", onClick: () => setCollapsed(false), children: [_jsx(ChevronIcon, { direction: "left" }), _jsx("span", { children: copy.assistant })] }) }));
     }
-    return (_jsxs("aside", { className: "ea-aside", "aria-label": "Assistant", children: [_jsxs("div", { className: "ea-aside__head", children: [_jsx("h2", { children: "Assistant" }), _jsx("button", { className: "ea-btn ea-btn--ghost", type: "button", onClick: () => resetConversation(), children: "Reset" }), _jsx("button", { className: "ea-btn ea-btn--ghost", type: "button", onClick: () => setCollapsed(true), children: "Collapse" })] }), _jsxs("div", { className: "ea-aside__body", children: [bridge ? (_jsxs("div", { className: "ea-context", children: [_jsx("span", { children: bridge.collectionSlug ?? bridge.globalSlug }), _jsx("span", { children: bridge.title ?? "document" }), _jsx("span", { children: bridge.locale }), _jsx("span", { className: bridge.modified ? "ea-context__warn" : "ea-context__ok", children: bridge.modified ? "unsaved" : "saved" })] })) : null, _jsxs("div", { className: "ea-messages", ref: threadRef, onScroll: onThreadScroll, children: [messages.length === 0 ? (_jsx("div", { className: "ea-msg ea-msg--assistant", children: introText(view, bridge, collections, config) })) : null, messages.map((message) => (_jsxs("div", { className: `ea-msg ea-msg--${message.role}`, children: [message.text, message.candidates?.length ? (_jsx("div", { className: "ea-actions", children: message.candidates.map((candidate) => (_jsx("button", { className: "ea-btn", type: "button", onClick: () => {
+    return (_jsxs("aside", { className: "ea-aside", "aria-label": copy.assistant, [KEEP_SELECTION_ATTR]: "", children: [_jsxs("div", { className: "ea-aside__head", children: [_jsxs("div", { className: "ea-aside__title", children: [_jsx("h2", { children: copy.assistant }), bridge ? _jsx("p", { className: "ea-aside__context", children: contextLine(bridge, config) }) : null] }), (messages.length > 0 || pendingApproval) && !pendingApproval?.applied ? (_jsx(Button, { buttonStyle: "subtle", margin: false, onClick: () => resetConversation(), size: "medium", children: copy.newChat })) : null, _jsx(Button, { "aria-label": copy.collapseLabel, buttonStyle: "icon-label", className: "ea-aside__collapse", icon: _jsx(ChevronIcon, { direction: "right" }), margin: false, onClick: () => setCollapsed(true), tooltip: copy.collapse })] }), _jsxs("div", { className: "ea-aside__body", children: [_jsxs("div", { className: "ea-messages", ref: threadRef, onScroll: onThreadScroll, children: [messages.length === 0 ? (_jsx("div", { className: "ea-msg ea-msg--assistant", children: introText(view, bridge, collections, config, copy) })) : null, messages.map((message) => (_jsxs("div", { className: `ea-msg ea-msg--${message.role}`, children: [message.text, message.candidates?.length ? (_jsx("div", { className: "ea-actions", children: message.candidates.map((candidate) => (_jsx(Button, { buttonStyle: "pill", margin: false, onClick: () => {
                                                 router.push(candidate.href);
-                                            }, children: candidate.label }, candidate.href))) })) : null] }, message.id))), status === "streaming" ? (_jsxs("div", { className: "ea-msg ea-msg--working", children: [_jsx("span", { children: STATUS_LABEL.streaming }), _jsx("button", { className: "ea-btn ea-btn--stop", type: "button", onClick: () => stop(), children: "Stop" })] })) : null] }), pendingApproval ? (_jsxs("div", { className: "ea-approval", children: [_jsx("h3", { children: pendingApproval.title }), _jsx("ul", { className: "ea-approval__diff", children: pendingApproval.summary.split("\n").map((line, index) => line.startsWith("  ") ? (
+                                            }, size: "small", children: candidate.label }, candidate.href))) })) : null] }, message.id))), status === "streaming" ? (_jsxs("div", { className: "ea-msg ea-msg--working", children: [_jsxs("span", { className: "ea-dots", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsx("span", { children: copy.working }), _jsx(Button, { buttonStyle: "subtle", margin: false, onClick: () => stop(), size: "small", children: copy.stop })] })) : null] }), pendingApproval ? (_jsxs("div", { className: "ea-approval", children: [_jsx("h3", { children: pendingApproval.title }), pendingApproval.applied ? (_jsx("p", { className: "ea-approval__hint", children: autosave ? copy.previewHintAutosave : copy.previewHint })) : null, _jsx("ul", { className: "ea-approval__diff", children: pendingApproval.summary.split("\n").map((line, index) => line.startsWith("  ") ? (
                                 // biome-ignore lint/suspicious/noArrayIndexKey: lines are static for one approval
                                 _jsx("li", { className: "ea-approval__sub", children: line.trim() }, index)) : (
                                 // biome-ignore lint/suspicious/noArrayIndexKey: lines are static for one approval
-                                _jsx("li", { children: line }, index))) }), _jsxs("div", { className: "ea-actions", children: [_jsx("button", { className: "ea-btn ea-btn--primary", type: "button", onClick: () => void decide("approve"), children: "Approve" }), _jsx("button", { className: "ea-btn", type: "button", onClick: () => void decide("reject"), children: "Reject" })] })] })) : null, status !== "idle" && status !== "streaming" ? (_jsx("div", { className: `ea-status ea-status--${status}`, children: STATUS_LABEL[status] })) : null, _jsxs("form", { className: "ea-composer", onSubmit: onSubmit, children: [visibleShortcuts.length > 0 ? (_jsx("div", { className: "ea-shortcuts", children: visibleShortcuts.map((shortcut) => (_jsx("button", { className: "ea-btn ea-btn--chip", disabled: status === "streaming", type: "button", onClick: () => {
+                                _jsx("li", { children: line }, index))) }), confirmUndo ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "ea-approval__warn", children: copy.undoLosesEdits }), _jsxs("div", { className: "ea-actions", children: [_jsx(Button, { buttonStyle: "primary", margin: false, onClick: () => void undoPreview(pendingApproval, true), size: "medium", children: copy.undoAnyway }), _jsx(Button, { buttonStyle: "secondary", margin: false, onClick: () => setConfirmUndo(false), size: "medium", children: copy.cancel })] })] })) : (_jsxs("div", { className: "ea-actions", children: [_jsx(Button, { buttonStyle: "primary", margin: false, onClick: () => void decide("approve"), size: "medium", children: pendingApproval.applied ? copy.keep : copy.approve }), _jsx(Button, { buttonStyle: "secondary", margin: false, onClick: () => void decide("reject"), size: "medium", children: pendingApproval.applied ? copy.undo : copy.reject })] }))] })) : null, status !== "idle" && status !== "streaming" ? (_jsx("div", { className: `ea-status ea-status--${status}`, children: statusText(status, copy) })) : null, _jsxs("form", { className: "ea-composer", onSubmit: onSubmit, children: [visibleShortcuts.length > 0 ? (_jsx("div", { className: "ea-shortcuts", children: visibleShortcuts.map((shortcut) => (_jsx(Button, { buttonStyle: "pill", disabled: status === "streaming", margin: false, onClick: () => {
                                         void send(shortcut.prompt);
-                                    }, children: shortcut.label }, shortcut.id))) })) : null, _jsxs("div", { className: "ea-composer__box", children: [_jsx("textarea", { disabled: status === "streaming", placeholder: "Message the assistant", rows: 2, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: onKeyDown }), _jsx("div", { className: "ea-composer__bar", children: _jsx("button", { className: "ea-btn ea-btn--primary", disabled: status === "streaming" || draft.trim() === "", type: "submit", children: "Send" }) })] })] })] })] }));
+                                    }, size: "small", children: shortcut.label }, shortcut.id))) })) : null, selection && bridge ? (_jsxs("div", { className: "ea-selection", children: [_jsxs("span", { className: "ea-selection__label", children: [copy.selected, ": ", _jsx("strong", { children: selection.label })] }), _jsx("button", { "aria-label": copy.clearSelection, className: "ea-selection__clear", type: "button", onClick: () => setSelection(null), children: _jsx(XIcon, {}) })] })) : null, _jsxs("div", { className: "ea-composer__box", children: [_jsx("textarea", { disabled: status === "streaming", placeholder: copy.placeholder, rows: 2, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: onKeyDown }), _jsx("div", { className: "ea-composer__bar", children: _jsx(Button, { buttonStyle: "primary", disabled: status === "streaming" || draft.trim() === "", margin: false, size: "medium", type: "submit", children: copy.send }) })] })] })] })] }));
+}
+/** "Page · Home", with the locale when the project has more than one. */
+function contextLine(bridge, config) {
+    const collection = config.collections?.find((entry) => entry.slug === bridge.collectionSlug);
+    const global = config.globals?.find((entry) => entry.slug === bridge.globalSlug);
+    const kind = textLabel(collection?.labels?.singular) ??
+        textLabel(global?.label) ??
+        bridge.collectionSlug ??
+        bridge.globalSlug;
+    const parts = [kind, bridge.title];
+    if (config.localization) {
+        parts.push(bridge.locale.toUpperCase());
+    }
+    return parts.filter(Boolean).join(" · ");
 }
-function introText(view, bridge, collections, config) {
+function introText(view, bridge, collections, config, copy) {
     switch (view.kind) {
         case "document":
-        case "global": {
-            if (!bridge) {
-                return "I can help you find content, open a page, or start a new draft. What do you need?";
-            }
-            const name = bridge.title ? `"${bridge.title}"` : "this document";
-            return `I can explain the fields on ${name}, suggest edits, or fill in empty fields. What do you need?`;
-        }
+        case "global":
+            return bridge ? copy.intro.document(bridge.title) : copy.intro.general;
         case "list": {
             if (!collections.includes(view.collection)) {
-                return "I can't work with this list, but I can help you find content, open a page, or start a new draft.";
+                return copy.intro.notAllowed;
             }
             const collection = config.collections?.find((entry) => entry.slug === view.collection);
             const plural = textLabel(collection?.labels?.plural) ?? view.collection;
-            const singular = textLabel(collection?.labels?.singular)?.toLowerCase() ?? "document";
-            return `You are in ${plural}. I can find and open a ${singular}, or start a new draft for you. What do you need?`;
+            const singular = textLabel(collection?.labels?.singular)?.toLowerCase() ?? copy.intro.documentFallback;
+            return copy.intro.list(plural, singular);
         }
         default:
-            return "I can help you find content, open a page, or start a new draft. What do you need?";
+            return copy.intro.general;
     }
 }
+function statusText(status, copy) {
+    return status in copy.status ? copy.status[status] : "";
+}
 function textLabel(value) {
     return typeof value === "string" && value.trim() ? value : undefined;
 }
@@ -306,6 +399,19 @@ function shortcutMatches(shortcut, view) {
             : undefined;
     return entity === undefined || shortcut.entities.includes(entity);
 }
+/** Autosave writes the previewed change to the draft, so the hint must not say nothing is saved. */
+function autosaves(getEntityConfig, bridge) {
+    if (!bridge) {
+        return false;
+    }
+    const entity = bridge.collectionSlug
+        ? getEntityConfig({ collectionSlug: bridge.collectionSlug })
+        : bridge.globalSlug
+            ? getEntityConfig({ globalSlug: bridge.globalSlug })
+            : undefined;
+    const drafts = entity?.versions?.drafts;
+    return typeof drafts === "object" && Boolean(drafts.autosave);
+}
 function canApplyForm(bridge) {
     if (bridge.disabled || bridge.locked) {
         return false;

package/dist/components/EditorAssistantDocumentBridge.js

@@ -2,8 +2,11 @@
 import { useDocumentForm, useDocumentInfo, useFormModified, useLocale } from "@payloadcms/ui";
 import { useEffect, useRef } from "react";
 import { useAssistantState } from "./assistant-context.js";
+import { selectionFromElement, selectionFromPath, VISUAL_EDITING_SELECT_EVENT, } from "./selection-dom.js";
+/** Collapsed rows render their labels only once visual editing has opened them. */
+const RELABEL_MS = [150, 500, 1200];
 export function EditorAssistantDocumentBridge() {
-    const { setBridge, setFormAdapter } = useAssistantState();
+    const { setBridge, setFormAdapter, setSelection } = useAssistantState();
     const documentInfo = useDocumentInfo();
     const locale = useLocale();
     const modified = useFormModified();
@@ -22,6 +25,54 @@ export function EditorAssistantDocumentBridge() {
             setFormAdapter(null);
         };
     }, [setFormAdapter]);
+    // "This" in the editor's message is what they last clicked or focused: a field, a block or a row,
+    // in the form or (through visual editing) in the preview. Clicks elsewhere in Admin clear it;
+    // clicks in the assistant itself keep it, so the editor can click, then type.
+    useEffect(() => {
+        let relabel = [];
+        const cancelRelabel = () => {
+            for (const timer of relabel) {
+                clearTimeout(timer);
+            }
+            relabel = [];
+        };
+        const onInteract = (event) => {
+            const target = event.target;
+            if (!(target instanceof Element) || target instanceof HTMLIFrameElement) {
+                return;
+            }
+            if (target.closest(".ea-aside")) {
+                return;
+            }
+            cancelRelabel();
+            setSelection(selectionFromElement(target) ?? null);
+        };
+        const onPreviewSelect = (event) => {
+            const path = event.detail?.path;
+            if (path === null) {
+                // The editor cleared the selection in the preview.
+                cancelRelabel();
+                setSelection(null);
+                return;
+            }
+            if (typeof path !== "string" || !path) {
+                return;
+            }
+            cancelRelabel();
+            setSelection(selectionFromPath(path));
+            relabel = RELABEL_MS.map((ms) => setTimeout(() => setSelection(selectionFromPath(path)), ms));
+        };
+        document.addEventListener("pointerdown", onInteract, true);
+        document.addEventListener("focusin", onInteract);
+        window.addEventListener(VISUAL_EDITING_SELECT_EVENT, onPreviewSelect);
+        return () => {
+            cancelRelabel();
+            document.removeEventListener("pointerdown", onInteract, true);
+            document.removeEventListener("focusin", onInteract);
+            window.removeEventListener(VISUAL_EDITING_SELECT_EVENT, onPreviewSelect);
+            setSelection(null);
+        };
+    }, [setSelection]);
     useEffect(() => {
         const titleValue = documentInfo.data && "title" in documentInfo.data ? documentInfo.data.title : undefined;
         const locked = Boolean(documentInfo.documentIsLocked) ||

package/dist/components/EditorAssistantProvider.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAuth } from "@payloadcms/ui";
 import "../styles/assistant.css";
 import { AssistantStateProvider, useAssistantState } from "./assistant-context.js";
+import { ChangedFieldsHighlight } from "./ChangedFieldsHighlight.js";
 import { EditorAssistantAside } from "./EditorAssistantAside.js";
 export function EditorAssistantProvider({ children, shortcuts = [], collections = [], }) {
     const { user } = useAuth();
@@ -10,5 +11,5 @@ export function EditorAssistantProvider({ children, shortcuts = [], collections
 }
 function EditorAssistantShell({ children }) {
     const { collapsed } = useAssistantState();
-    return (_jsxs("div", { className: collapsed ? "ea-root ea-root--collapsed" : "ea-root", children: [_jsx("div", { className: "ea-main", children: children }), _jsx(EditorAssistantAside, {})] }));
+    return (_jsxs("div", { className: collapsed ? "ea-root ea-root--collapsed" : "ea-root", children: [_jsx("div", { className: "ea-main", children: children }), _jsx(EditorAssistantAside, {}), _jsx(ChangedFieldsHighlight, {})] }));
 }

package/dist/components/assistant-context.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import type { AssistantShortcut } from "../types.ts";
+import type { DomSelection } from "./selection-dom.ts";
 export type AssistantChromeStatus = "idle" | "unavailable" | "unauthorized" | "rate_limited" | "timeout" | "provider_error" | "tool_denied" | "stale_context" | "aborted" | "streaming";
 export type DocumentBridgeSnapshot = {
     collectionSlug?: string;
@@ -24,6 +25,16 @@ export type PendingApproval = {
     approvalId: string;
     nonce: string;
     capability: "form.propose" | "draft.create";
+    /** The form with the change applied; Admin shows it before the editor keeps it. */
+    preview?: {
+        data: Record<string, unknown>;
+        changedPaths: string[];
+    };
+    /** Set once the preview is in the form: what to restore on undo. */
+    applied?: {
+        before: Record<string, unknown>;
+        beforeModified: boolean;
+    };
 };
 export type AssistantMessage = {
     id: string;
@@ -45,11 +56,14 @@ type AssistantContextValue = {
     bridge: DocumentBridgeSnapshot | null;
     formAdapter: FormAdapter | null;
     pendingApproval: PendingApproval | null;
+    /** What the editor last clicked or focused in the open form. */
+    selection: DomSelection | null;
     setOpen: (open: boolean) => void;
     setCollapsed: (collapsed: boolean) => void;
     setBridge: (bridge: DocumentBridgeSnapshot | null) => void;
     setFormAdapter: (adapter: FormAdapter | null) => void;
     setPendingApproval: (pending: PendingApproval | null) => void;
+    setSelection: (selection: DomSelection | null) => void;
     setStatus: (status: AssistantChromeStatus) => void;
     setMessages: (updater: (current: AssistantMessage[]) => AssistantMessage[]) => void;
     resetConversation: () => void;