@simmalugnt-se/payload-editor-assistant 0.13.1 → 0.13.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.13.2
+
+- Keep compact result cards in the conversation after accepted draft creations, form changes and
+  saved batch fixes. Cards link to the document and retain changed fields and locale after reload.
+- Chat-only image descriptions follow the language of the editor's question even when Payload is
+  displaying another content locale. Values submitted to CMS fields still follow the content locale.
+
 ## 0.13.1
 
 - The chat composer starts at three lines and grows with typed or pasted text up to eight lines

package/dist/components/BatchPanel.d.ts

@@ -1,4 +1,4 @@
-import type { BatchRequest } from "./assistant-context.tsx";
+import { type BatchRequest } from "./assistant-context.tsx";
 /**
  * Many documents at once, from a work list link: the assistant suggests a change for each, one
  * request after the other, and the editor saves the ones they want. Nothing is written before that.

package/dist/components/BatchPanel.js

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { formatBatchTargets } from "../batch/targets.js";
 import { ENDPOINT_PREFIX } from "../package-name.js";
 import { assistantRequest } from "./assistant-api.js";
+import { useAssistantState } from "./assistant-context.js";
 import { cardAfterApply, cardAfterPropose, changedEdits, initialCards, savePlan, waitingKeys, } from "./batch-run.js";
 import { BATCH_COPY, uiLanguage } from "./copy.js";
 import { ProposalReview } from "./ProposalReview.js";
@@ -14,6 +15,7 @@ import { ProposalReview } from "./ProposalReview.js";
  * request after the other, and the editor saves the ones they want. Nothing is written before that.
  */
 export function BatchPanel({ batch, onClose }) {
+    const { setMessages } = useAssistantState();
     const { config } = useConfig();
     const { i18n } = useTranslation();
     const router = useRouter();
@@ -82,13 +84,14 @@ export function BatchPanel({ batch, onClose }) {
         abortRef.current?.abort();
     };
     const apply = useCallback(async (card, action) => {
-        if (!card.proposal)
+        const proposal = card.proposal;
+        if (!proposal)
             return;
         update(card.key, (current) => ({ ...current, status: "saving" }));
         const answer = await assistantRequest(apiBase, "/batch/apply", {
             action,
-            approvalId: card.proposal.approvalId,
-            nonce: card.proposal.nonce,
+            approvalId: proposal.approvalId,
+            nonce: proposal.nonce,
             batchId: batch.id,
             ...(action === "apply" ? { edits: changedEdits(card) } : {}),
         }).catch(() => ({
@@ -98,7 +101,30 @@ export function BatchPanel({ batch, onClose }) {
             status: 0,
         }));
         update(card.key, (current) => cardAfterApply(current, answer.ok ? answer.data : { ok: false, error: answer.error, message: answer.message }));
-    }, [apiBase, batch.id, update]);
+        if (action === "apply" && answer.ok && answer.data.ok && answer.data.status !== "rejected") {
+            const href = `${config.routes.admin}/collections/${encodeURIComponent(card.target.collection)}/${encodeURIComponent(card.target.id)}${card.target.locale ? `?locale=${encodeURIComponent(card.target.locale)}` : ""}`;
+            setMessages((current) => [
+                ...current,
+                {
+                    id: crypto.randomUUID(),
+                    role: "assistant",
+                    text: `${copy.status[answer.data.status]}: ${card.title}`,
+                    result: {
+                        kind: "saved",
+                        title: card.title.slice(0, 200),
+                        href,
+                        locale: card.target.locale,
+                        fields: [
+                            ...new Set(proposal.lines
+                                .map((line) => line.label)
+                                .filter((label) => Boolean(label))
+                                .map((label) => label.slice(0, 80))),
+                        ].slice(0, 4),
+                    },
+                },
+            ]);
+        }
+    }, [apiBase, batch.id, config.routes.admin, copy, setMessages, update]);
     const save = async () => {
         setPhase("saving");
         for (const step of savePlan(cardsRef.current)) {

package/dist/components/CompletedResultCard.d.ts

@@ -0,0 +1,7 @@
+import type { AssistantMessage } from "./assistant-context.tsx";
+import type { Copy } from "./copy.ts";
+/** A finished action stays visible in the conversation after its approval panel closes. */
+export declare function CompletedResultCard({ result, copy, }: {
+    result: NonNullable<AssistantMessage["result"]>;
+    copy: Copy;
+}): import("react").JSX.Element;

package/dist/components/CompletedResultCard.js

@@ -0,0 +1,10 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/** A finished action stays visible in the conversation after its approval panel closes. */
+export function CompletedResultCard({ result, copy, }) {
+    const status = result.kind === "draft"
+        ? copy.completedDraft
+        : result.kind === "saved"
+            ? copy.completedSavedChange
+            : copy.completedChange;
+    return (_jsxs("div", { className: "ea-result", children: [_jsxs("span", { className: "ea-result__status", children: [status, result.locale ? ` · ${result.locale.toUpperCase()}` : ""] }), result.href ? (_jsx("a", { className: "ea-result__title", href: result.href, children: result.title })) : (_jsx("strong", { className: "ea-result__title", children: result.title })), result.fields?.length ? (_jsx("span", { className: "ea-result__fields", children: result.fields.join(" · ") })) : null] }));
+}

package/dist/components/EditorAssistantAside.js

@@ -11,6 +11,7 @@ import { useAssistantState, } from "./assistant-context.js";
 import { BatchPanel } from "./BatchPanel.js";
 import { releaseTakenBatches } from "./batch-link.js";
 import { ChatImages, useChatImages } from "./ChatImages.js";
+import { CompletedResultCard } from "./CompletedResultCard.js";
 import { COPY, translateAction, uiLanguage } from "./copy.js";
 import { ProposalReview } from "./ProposalReview.js";
 import { isFormProposal, proposalSteps, refineProposal, replaceLatestStep, } from "./proposal-chain.js";
@@ -109,9 +110,38 @@ export function EditorAssistantAside() {
             document.removeEventListener("change", onEdit, true);
         };
     }, [previewing]);
-    const say = (text) => {
-        setMessages((current) => [...current, { id: crypto.randomUUID(), role: "assistant", text }]);
+    const say = (text, result) => {
+        setMessages((current) => [
+            ...current,
+            {
+                id: crypto.randomUUID(),
+                role: "assistant",
+                text: result ? `${text} ${result.title}` : text,
+                ...(result ? { result } : {}),
+            },
+        ]);
     };
+    const changeResult = (pending) => ({
+        kind: "change",
+        title: (bridge?.title ||
+            bridge?.collectionSlug ||
+            bridge?.globalSlug ||
+            copy.completedChange).slice(0, 200),
+        ...(bridge?.collectionSlug && bridge.documentId
+            ? {
+                href: `${config.routes.admin}/collections/${encodeURIComponent(bridge.collectionSlug)}/${encodeURIComponent(String(bridge.documentId))}`,
+            }
+            : bridge?.globalSlug
+                ? { href: `${config.routes.admin}/globals/${encodeURIComponent(bridge.globalSlug)}` }
+                : {}),
+        locale: bridge?.locale ?? locale.code,
+        fields: [
+            ...new Set((pending.lines ?? [])
+                .map((line) => line.label)
+                .filter((label) => Boolean(label))
+                .map((label) => label.slice(0, 80))),
+        ].slice(0, 4),
+    });
     /**
      * Puts a form proposal into the form so the form and Live Preview show it before it is kept.
      * `basis` is the form the proposal was made for. With a suggestion already in the form, the new
@@ -169,7 +199,7 @@ export function EditorAssistantAside() {
      * Keeps a previewed change. The server checks each step against the form it was made for and
      * logs it, oldest first; the form already shows the change, so nothing is applied again.
      */
-    const keepPreview = async (pending, quiet = false) => {
+    const keepPreview = async (pending) => {
         const applied = pending.applied;
         if (!applied) {
             return false;
@@ -186,9 +216,7 @@ export function EditorAssistantAside() {
                 return false;
             }
         }
-        if (!quiet) {
-            say(autosave ? talk.keptAutosave : talk.kept);
-        }
+        say(autosave ? talk.keptAutosave : talk.kept, changeResult(pending));
         return true;
     };
     const undoPreview = async (pending, force = false) => {
@@ -314,7 +342,7 @@ export function EditorAssistantAside() {
                 // Leaving the form or starting a draft ends the open suggestion: keep it first, as before.
                 const chain = shown ?? open;
                 if (chain?.applied && (next || (navigate && "href" in navigate))) {
-                    if (!(await keepPreview(chain, true))) {
+                    if (!(await keepPreview(chain))) {
                         return;
                     }
                 }
@@ -422,14 +450,7 @@ export function EditorAssistantAside() {
                 try {
                     await formAdapter.reset(result.data.patchedData);
                     formAdapter.setModified(true);
-                    setMessages((current) => [
-                        ...current,
-                        {
-                            id: crypto.randomUUID(),
-                            role: "assistant",
-                            text: talk.applied,
-                        },
-                    ]);
+                    say(talk.applied, changeResult(pendingApproval));
                 }
                 catch {
                     setStatus("stale_context");
@@ -447,15 +468,15 @@ export function EditorAssistantAside() {
             if (result.data.capability === "draft.create" &&
                 result.data.collection &&
                 result.data.documentId) {
-                const href = `${config.routes.admin}/collections/${result.data.collection}/${result.data.documentId}`;
-                setMessages((current) => [
-                    ...current,
-                    {
-                        id: crypto.randomUUID(),
-                        role: "assistant",
-                        text: talk.draftCreated,
-                    },
-                ]);
+                const href = `${config.routes.admin}/collections/${encodeURIComponent(result.data.collection)}/${encodeURIComponent(result.data.documentId)}`;
+                say(talk.draftCreated, {
+                    kind: "draft",
+                    title: (result.data.title ||
+                        pendingApproval.lines?.find((line) => line.path === "title")?.edit?.value ||
+                        result.data.collection).slice(0, 200),
+                    href,
+                    locale: bridge?.locale ?? locale.code,
+                });
                 router.push(href);
             }
         }
@@ -483,7 +504,7 @@ export function EditorAssistantAside() {
                         }, 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: () => setOpen(false), tooltip: copy.collapse })] }), batch ? (_jsx("div", { className: "ea-aside__body", children: _jsx(BatchPanel, { batch: batch, onClose: () => {
                         releaseTakenBatches();
                         setBatch(null);
-                    } }, batch.id) })) : (_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.role === "assistant" ? _jsx(ReplyText, { text: message.text }) : message.text, _jsx(ChatImages, { images: message.images, copy: copy }), message.candidates?.length ? (_jsx("div", { className: "ea-actions", children: message.candidates.map((candidate) => (_jsx(Button, { buttonStyle: "pill", margin: false, onClick: () => {
+                    } }, batch.id) })) : (_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.result ? (_jsx(CompletedResultCard, { result: message.result, copy: copy })) : message.role === "assistant" ? (_jsx(ReplyText, { text: message.text })) : (message.text), _jsx(ChatImages, { images: message.images, copy: copy }), message.candidates?.length ? (_jsx("div", { className: "ea-actions", children: message.candidates.map((candidate) => (_jsx(Button, { buttonStyle: "pill", margin: false, onClick: () => {
                                                 router.push(candidate.href);
                                             }, 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: step ? talk.steps[step] : talk.working })] })) : null] }), pendingApproval ? (_jsxs("div", { className: "ea-approval", children: [_jsx("h3", { children: pendingApproval.title }), pendingApproval.applied ? (_jsxs("p", { className: "ea-approval__hint", children: [autosave ? copy.previewHintAutosave : copy.previewHint, pendingApproval.earlier?.length ? ` ${copy.refinedHint}` : ""] })) : null, pendingApproval.lines?.length ? (_jsx("div", { className: "ea-approval__review", children: _jsx(ProposalReview, { lines: pendingApproval.lines, language: uiLanguage(i18n.language) }) })) : (_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

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

@@ -62,6 +62,14 @@ export type AssistantMessage = {
     id: string;
     role: "user" | "assistant" | "system";
     text: string;
+    /** A compact, persistent receipt for a change the editor accepted. */
+    result?: {
+        kind: "draft" | "change" | "saved";
+        title: string;
+        href?: string;
+        locale?: string;
+        fields?: string[];
+    };
     candidates?: Array<{
         href: string;
         label: string;

package/dist/components/conversation-store.js

@@ -103,6 +103,9 @@ export function parseStored(raw, now) {
                 candidates: Array.isArray(message.candidates)
                     ? message.candidates.filter(isCandidate)
                     : undefined,
+                ...(message.role === "assistant" && isCompletedResult(message.result)
+                    ? { result: message.result }
+                    : {}),
             })))
             : [];
     }
@@ -120,6 +123,24 @@ function isCandidate(value) {
     const candidate = value;
     return typeof candidate?.href === "string" && typeof candidate.label === "string";
 }
+function isCompletedResult(value) {
+    const result = value;
+    return Boolean(result &&
+        (result.kind === "draft" || result.kind === "change" || result.kind === "saved") &&
+        typeof result.title === "string" &&
+        result.title.length > 0 &&
+        result.title.length <= 200 &&
+        (result.href === undefined ||
+            (typeof result.href === "string" &&
+                /^\/[a-zA-Z0-9/_%-]+(?:\?locale=[a-zA-Z-]{2,12})?$/.test(result.href) &&
+                !result.href.startsWith("//"))) &&
+        (result.locale === undefined ||
+            (typeof result.locale === "string" && /^[a-zA-Z-]{2,12}$/.test(result.locale))) &&
+        (result.fields === undefined ||
+            (Array.isArray(result.fields) &&
+                result.fields.length <= 4 &&
+                result.fields.every((field) => typeof field === "string" && field.length <= 80))));
+}
 function isStoredImage(value) {
     if (isChatImage(value))
         return true;

package/dist/components/copy.d.ts

@@ -52,6 +52,9 @@ export declare const COPY: {
         readonly applied: "Applied to the unsaved form. Save in Payload when you are ready.";
         readonly applyFailed: "The form could not be updated. It was left unchanged.";
         readonly draftCreated: "The draft is created and open.";
+        readonly completedDraft: "Draft created";
+        readonly completedChange: "Change kept in the form";
+        readonly completedSavedChange: "Change saved";
         readonly kept: "Kept. Save in Payload when you are ready.";
         readonly keptAutosave: "Kept. The draft is saved; publish when you are ready.";
         readonly undone: "Undone. The form is back as it was.";
@@ -122,6 +125,9 @@ export declare const COPY: {
         readonly applied: "Ändringen är införd i formuläret men inte sparad. Spara i Payload när du är redo.";
         readonly applyFailed: "Formuläret kunde inte uppdateras och lämnades orört.";
         readonly draftCreated: "Utkastet är skapat och öppnat.";
+        readonly completedDraft: "Utkast skapat";
+        readonly completedChange: "Ändring behållen i formuläret";
+        readonly completedSavedChange: "Ändring sparad";
         readonly kept: "Behållet. Spara i Payload när du är redo.";
         readonly keptAutosave: "Behållet. Utkastet är sparat; publicera när du är redo.";
         readonly undone: "Ångrat. Formuläret är som innan.";

package/dist/components/copy.js

@@ -53,6 +53,9 @@ export const COPY = {
         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.",
+        completedDraft: "Draft created",
+        completedChange: "Change kept in the form",
+        completedSavedChange: "Change saved",
         kept: "Kept. Save in Payload when you are ready.",
         keptAutosave: "Kept. The draft is saved; publish when you are ready.",
         undone: "Undone. The form is back as it was.",
@@ -123,6 +126,9 @@ export const COPY = {
         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.",
+        completedDraft: "Utkast skapat",
+        completedChange: "Ändring behållen i formuläret",
+        completedSavedChange: "Ändring sparad",
         kept: "Behållet. Spara i Payload när du är redo.",
         keptAutosave: "Behållet. Utkastet är sparat; publicera när du är redo.",
         undone: "Ångrat. Formuläret är som innan.",

package/dist/domain/decide.d.ts

@@ -19,6 +19,7 @@ export type DecideResult = {
     capability: "draft.create";
     documentId: string;
     collection: string;
+    title?: string;
 } | {
     ok: true;
     rejected: true;

package/dist/domain/decide.js

@@ -5,7 +5,7 @@ import { relationValueError } from "../form/relation-shape.js";
 import { loadRichText } from "../form/rich-text.js";
 import { finalizeCompiled, openRichText } from "../form/shape.js";
 import { DEFAULT_APPROVAL_SLUG } from "../package-name.js";
-import { entityFields } from "../schema/discover.js";
+import { entityFields, findCollectionConfig } from "../schema/discover.js";
 import { hasCapability, resolveAllowlist } from "./allowlist.js";
 import { writeAudit } from "./audit.js";
 import { localApi } from "./local-api.js";
@@ -141,6 +141,7 @@ export async function decideChange(req, options, input) {
             capability: "draft.create",
             documentId: String(created.id),
             collection: record.targetCollection,
+            title: createdTitle(req, record.targetCollection, created),
         };
     }
     await consume(req, record.id, "executed");
@@ -159,6 +160,11 @@ export async function decideChange(req, options, input) {
     });
     return { ok: true, capability: "form.propose", patchedData: finalized.data };
 }
+function createdTitle(req, collection, created) {
+    const field = findCollectionConfig(req, collection)?.admin?.useAsTitle ?? "title";
+    const value = created?.[field];
+    return typeof value === "string" && value.trim() ? value.trim().slice(0, 200) : undefined;
+}
 function identityMismatch(record, input) {
     return ((input.collection ?? "") !== (record.targetCollection ?? "") ||
         (input.global ?? "") !== (record.targetGlobal ?? "") ||

package/dist/runtime/system-prompt.js

@@ -108,7 +108,7 @@ function thisTurnBlock(bridge, turnContext) {
     ];
     if (locale) {
         const content = languageName(locale);
-        lines.push(`Write every field value in ${content}; that is the language version being edited. Do not point out which language the content is in; the panel does that.`);
+        lines.push(`Write every field value submitted to form.propose or draft.create in ${content}; that is the language version being edited. A suggested alt text given only in chat is not a field value: write it in the editor's chat language, even if the Payload locale is different. Do not point out which language the edited content is in; the panel does that.`);
     }
     const selection = turnContext?.selection;
     if (selection) {

package/dist/styles/assistant.css

@@ -128,6 +128,37 @@ html[data-theme="dark"] .ea-aside {
   align-self: flex-start;
 }
 
+.ea-result {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15em;
+  max-width: 100%;
+  padding: calc(var(--base) * 0.45) calc(var(--base) * 0.6);
+  border: 1px solid var(--theme-elevation-150);
+  border-inline-start: 3px solid var(--ea-accent);
+  border-radius: var(--style-radius-m);
+  background: var(--theme-elevation-50);
+  font-size: 13px;
+  white-space: normal;
+}
+
+.ea-result__status,
+.ea-result__fields {
+  color: var(--theme-elevation-500);
+  font-size: 11px;
+}
+
+.ea-result__title {
+  color: var(--theme-text);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+a.ea-result__title {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
 /* A reply's Markdown: paragraphs and lists spaced like the thread, a line break kept inside one. */
 .ea-reply__p,
 .ea-reply__list {

package/package.json

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