@mvriu5/payload-ai 0.5.9 → 1.1.1

package/dist/components/AIInput.module.css

@@ -1,5 +1,5 @@
 .chatLayout {
-    align-items: stretch;
+    align-items: start;
     display: grid;
     gap: 16px;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -152,7 +152,16 @@
 }
 
 .prefix {
+    align-items: center;
     color: var(--theme-elevation-500);
+    display: inline-flex;
+    gap: 3px;
+}
+
+.badgeIcon {
+    flex: 0 0 auto;
+    height: 12px;
+    width: 12px;
 }
 
 .name {
@@ -179,6 +188,11 @@
     border-color: color-mix(in srgb, #7a5c9e 28%, var(--theme-elevation-150));
 }
 
+.locale {
+    background: color-mix(in srgb, #2f5da8 12%, var(--theme-bg));
+    border-color: color-mix(in srgb, #2f5da8 28%, var(--theme-elevation-150));
+}
+
 .chatButton {
     align-items: center;
     background: var(--theme-text);

package/dist/components/APIKeyField.d.ts

@@ -0,0 +1,3 @@
+import type { TextFieldClientComponent } from "payload";
+declare const APIKeyField: TextFieldClientComponent;
+export default APIKeyField;

package/dist/components/APIKeyField.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from "@payloadcms/ui";
+const getFieldClassName = ({ className, isReadOnly, showError })=>[
+        "field-type",
+        "password",
+        className,
+        showError ? "error" : null,
+        isReadOnly ? "read-only" : null
+    ].filter(Boolean).join(" ");
+const APIKeyField = ({ field, inputRef, path, readOnly })=>{
+    const { disabled, errorMessage, setValue, showError, value } = useField({
+        path
+    });
+    const fieldID = `field-${path.replace(/\./g, "__")}`;
+    const isReadOnly = readOnly || disabled || field.admin?.disabled;
+    const handleChange = (event)=>setValue(event.target.value);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: getFieldClassName({
+            className: field.admin?.className,
+            isReadOnly,
+            showError
+        }),
+        children: [
+            /*#__PURE__*/ _jsxs("label", {
+                className: "field-label",
+                htmlFor: fieldID,
+                children: [
+                    field?.label?.toString(),
+                    field.required ? /*#__PURE__*/ _jsx("span", {
+                        className: "required",
+                        children: "*"
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "field-type__wrap",
+                children: [
+                    showError && errorMessage ? /*#__PURE__*/ _jsx("div", {
+                        className: "field-error",
+                        children: errorMessage
+                    }) : null,
+                    /*#__PURE__*/ _jsx("input", {
+                        autoComplete: "new-password",
+                        disabled: isReadOnly,
+                        id: fieldID,
+                        name: path,
+                        onChange: handleChange,
+                        placeholder: field.admin?.placeholder?.toString(),
+                        ref: inputRef,
+                        type: "password",
+                        value: value || ""
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "field-description",
+                        children: field.admin?.description?.toString()
+                    })
+                ]
+            })
+        ]
+    });
+};
+export default APIKeyField;

package/dist/components/ActionToast.d.ts

@@ -0,0 +1,30 @@
+export type ActionProposal = {
+    _aiSignature?: {
+        expiresAt: string;
+        value: string;
+    };
+    action: "create" | "delete" | "update" | "updateGlobal";
+    collection?: string;
+    id?: string;
+    label: string;
+    slug?: string;
+};
+type ActionToastProps = {
+    apiRoute: string;
+    appliedProposalIndexes: number[];
+    description?: string;
+    error?: string;
+    getViewURL?: (proposal: ActionProposal) => string | null;
+    isApplying: boolean;
+    onDismiss?: () => void;
+    onDismissError?: () => void;
+    onApply: (proposal: ActionProposal, index: number) => void;
+    proposals: ActionProposal[];
+    tokenUsage?: {
+        inputTokens?: number;
+        outputTokens?: number;
+        totalTokens?: number;
+    } | null;
+};
+export declare const ActionToast: ({ apiRoute, appliedProposalIndexes, description, error, getViewURL, isApplying, onDismiss, onDismissError, onApply, proposals, tokenUsage, }: ActionToastProps) => import("react").JSX.Element | null;
+export {};

package/dist/components/ActionToast.js

@@ -0,0 +1,263 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./ActionToast.module.css";
+import { redactSensitiveData } from "../ai/sensitiveData.js";
+import { formatAdminURL } from "payload/shared";
+import { useState } from "react";
+import { DiffDialog } from "./DiffDialog.js";
+import { Apply, FileDiff, Reject } from "./Icons.js";
+const maxDescriptionLength = 220;
+const getDescriptionPreview = (description)=>{
+    if (description.length <= maxDescriptionLength) return description;
+    return `${description.slice(0, maxDescriptionLength).trim()}...`;
+};
+const getSafeProposalDetails = (proposal)=>{
+    const redactedProposal = redactSensitiveData(proposal);
+    if (redactedProposal._aiSignature) {
+        redactedProposal._aiSignature = {
+            expiresAt: redactedProposal._aiSignature.expiresAt,
+            value: "[redacted]"
+        };
+    }
+    return redactedProposal;
+};
+export const ActionToast = ({ apiRoute, appliedProposalIndexes, description, error, getViewURL, isApplying, onDismiss, onDismissError, onApply, proposals, tokenUsage })=>{
+    const [activeDiff, setActiveDiff] = useState(null);
+    const [diffError, setDiffError] = useState("");
+    const [loadingDiffIndex, setLoadingDiffIndex] = useState(null);
+    if (proposals.length === 0 && !error && !description) return null;
+    const descriptionPreview = description ? getDescriptionPreview(description) : "";
+    const isDescriptionTruncated = Boolean(description) && descriptionPreview !== description;
+    const openDiff = async (proposal, index)=>{
+        setDiffError("");
+        setLoadingDiffIndex(index);
+        try {
+            const res = await fetch(formatAdminURL({
+                apiRoute,
+                path: "/ai-proposal-diff"
+            }), {
+                body: JSON.stringify({
+                    proposal
+                }),
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                method: "POST"
+            });
+            const result = await res.json().catch(()=>null);
+            if (!res.ok || !result) {
+                throw new Error(result?.error || "Could not load proposal diff.");
+            }
+            setActiveDiff({
+                change: null,
+                diff: {
+                    after: result.after,
+                    before: result.before
+                },
+                proposal
+            });
+        } catch (err) {
+            setDiffError(err instanceof Error ? err.message : "Could not load proposal diff.");
+        } finally{
+            setLoadingDiffIndex(null);
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: styles.list,
+        children: [
+            error && /*#__PURE__*/ _jsxs("div", {
+                className: `${styles.item} ${styles.errorItem}`,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: styles.label,
+                                children: "AI request failed"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: styles.description,
+                                children: error
+                            })
+                        ]
+                    }),
+                    onDismissError && /*#__PURE__*/ _jsx("button", {
+                        className: styles.button,
+                        onClick: onDismissError,
+                        type: "button",
+                        children: "Dismiss"
+                    })
+                ]
+            }),
+            !error && proposals.length === 0 && description && /*#__PURE__*/ _jsx("div", {
+                className: styles.item,
+                children: /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: styles.label,
+                            children: "AI response"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: styles.description,
+                            children: descriptionPreview
+                        }),
+                        isDescriptionTruncated && /*#__PURE__*/ _jsxs("details", {
+                            className: styles.details,
+                            children: [
+                                /*#__PURE__*/ _jsx("summary", {
+                                    className: styles.summary,
+                                    children: "Full response"
+                                }),
+                                /*#__PURE__*/ _jsx("pre", {
+                                    className: styles.proposalDetails,
+                                    children: description
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            proposals.map((proposal, index)=>{
+                const isApplied = appliedProposalIndexes.includes(index);
+                const viewURL = getViewURL?.(proposal);
+                return /*#__PURE__*/ _jsxs("div", {
+                    className: styles.item,
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: styles.content,
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: styles.label,
+                                    children: proposal.label
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: styles.meta,
+                                    children: [
+                                        proposal.action,
+                                        " in ",
+                                        proposal.collection || proposal.slug,
+                                        proposal.id ? ` #${proposal.id}` : ""
+                                    ]
+                                }),
+                                description && /*#__PURE__*/ _jsx("div", {
+                                    className: styles.description,
+                                    children: descriptionPreview
+                                }),
+                                description && isDescriptionTruncated && /*#__PURE__*/ _jsxs("details", {
+                                    className: styles.details,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("summary", {
+                                            className: styles.summary,
+                                            children: "Full response"
+                                        }),
+                                        /*#__PURE__*/ _jsx("pre", {
+                                            className: styles.proposalDetails,
+                                            children: description
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("details", {
+                                    className: styles.details,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("summary", {
+                                            className: styles.summary,
+                                            children: "Details"
+                                        }),
+                                        /*#__PURE__*/ _jsx("pre", {
+                                            className: styles.proposalDetails,
+                                            children: JSON.stringify(getSafeProposalDetails(proposal), null, 2)
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: styles.footer,
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: styles.viewAction,
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("button", {
+                                            "aria-label": `Review proposal: ${proposal.label}`,
+                                            className: styles.secondaryButton,
+                                            disabled: loadingDiffIndex === index,
+                                            onClick: ()=>void openDiff(proposal, index),
+                                            type: "button",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(FileDiff, {
+                                                    height: 16,
+                                                    width: 16
+                                                }),
+                                                loadingDiffIndex === index ? "Loading" : "Review"
+                                            ]
+                                        }),
+                                        viewURL && /*#__PURE__*/ _jsx("a", {
+                                            className: styles.ghostButton,
+                                            href: viewURL,
+                                            rel: "noreferrer noopener",
+                                            target: "_blank",
+                                            children: "Go to source"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: styles.actions,
+                                    children: [
+                                        onDismiss && /*#__PURE__*/ _jsx("button", {
+                                            "aria-label": "Dismiss proposals",
+                                            className: styles.secondaryButton,
+                                            onClick: onDismiss,
+                                            type: "button",
+                                            children: /*#__PURE__*/ _jsx(Reject, {
+                                                height: 16,
+                                                width: 16
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx("button", {
+                                            "aria-label": `Apply proposal: ${proposal.label}`,
+                                            className: styles.button,
+                                            disabled: isApplying || isApplied,
+                                            onClick: ()=>onApply(proposal, index),
+                                            type: "button",
+                                            children: /*#__PURE__*/ _jsx(Apply, {
+                                                height: 16,
+                                                width: 16
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }, `${proposal.action}-${index}`);
+            }),
+            diffError && /*#__PURE__*/ _jsxs("div", {
+                className: `${styles.item} ${styles.errorItem}`,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: styles.label,
+                                children: "Diff review failed"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: styles.description,
+                                children: diffError
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        className: styles.button,
+                        onClick: ()=>setDiffError(""),
+                        type: "button",
+                        children: "Dismiss"
+                    })
+                ]
+            }),
+            activeDiff && /*#__PURE__*/ _jsx(DiffDialog, {
+                diff: activeDiff.diff,
+                onClose: ()=>setActiveDiff(null),
+                proposal: activeDiff.proposal,
+                tokenUsage: tokenUsage || undefined
+            })
+        ]
+    });
+};

package/dist/components/AuditLogList.d.ts

@@ -0,0 +1,32 @@
+import type { ActionProposal } from "./ActionToast.js";
+import { type ProposalDiff } from "./DiffDialog.js";
+export type AppliedChange = {
+    action?: ActionProposal["action"] | null;
+    additions: number;
+    after?: unknown;
+    before?: unknown;
+    collection?: string | null;
+    createdAt?: string | null;
+    documentID?: string | null;
+    inputTokens?: number | null;
+    outputTokens?: number | null;
+    removals: number;
+    slug?: string | null;
+    targetType?: string | null;
+    totalTokens?: number | null;
+    title: string;
+    userID?: string | null;
+    userLabel?: string | null;
+    url?: string | null;
+};
+type AuditLogListProps = {
+    allChangesURL?: string;
+    changes: AppliedChange[];
+};
+export type ActiveDiff = {
+    change: AppliedChange | null;
+    diff: ProposalDiff;
+    proposal: ActionProposal;
+};
+export declare const RecentChangesList: ({ allChangesURL, changes }: AuditLogListProps) => import("react").JSX.Element;
+export {};

package/dist/components/AuditLogList.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ExternalLinkIcon } from "@payloadcms/ui";
+import { DiffDialog } from "./DiffDialog.js";
+import styles from "./AuditLogList.module.css";
+const getChangeProposal = (change)=>({
+        action: change.action || "update",
+        collection: change.collection || undefined,
+        id: change.documentID || undefined,
+        label: change.title,
+        slug: change.slug || undefined
+    });
+export const RecentChangesList = ({ allChangesURL, changes })=>{
+    const [activeDiff, setActiveDiff] = useState(null);
+    return /*#__PURE__*/ _jsxs("aside", {
+        className: styles.recentChanges,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles.header,
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: styles.title,
+                        children: "Recent changes"
+                    }),
+                    allChangesURL && /*#__PURE__*/ _jsx("a", {
+                        className: styles.headerGhostButton,
+                        href: allChangesURL,
+                        children: "View all"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: styles.list,
+                children: changes.length === 0 ? /*#__PURE__*/ _jsx("div", {
+                    className: styles.empty,
+                    children: "No changes yet."
+                }) : changes.slice(0, 10).map((change, index)=>/*#__PURE__*/ _jsxs("div", {
+                        className: styles.item,
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: styles.titleRow,
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: styles.itemTitle,
+                                        children: change.title
+                                    }),
+                                    change.url && /*#__PURE__*/ _jsx("a", {
+                                        className: styles.ghostButton,
+                                        href: change.url,
+                                        rel: "noreferrer noopener",
+                                        target: "_blank",
+                                        children: /*#__PURE__*/ _jsx(ExternalLinkIcon, {})
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: styles.stats,
+                                children: [
+                                    /*#__PURE__*/ _jsxs("code", {
+                                        className: styles.additions,
+                                        children: [
+                                            "+",
+                                            change.additions
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("code", {
+                                        className: styles.removals,
+                                        children: [
+                                            "-",
+                                            change.removals
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                className: styles.button,
+                                onClick: ()=>{
+                                    if (change.before === undefined || change.after === undefined) {
+                                        return;
+                                    }
+                                    setActiveDiff({
+                                        change,
+                                        diff: {
+                                            after: change.after,
+                                            before: change.before
+                                        },
+                                        proposal: getChangeProposal(change)
+                                    });
+                                },
+                                type: "button",
+                                children: "Review"
+                            })
+                        ]
+                    }, `${change.title}-${index}`))
+            }),
+            activeDiff && activeDiff.change && /*#__PURE__*/ _jsx(DiffDialog, {
+                change: activeDiff.change,
+                diff: activeDiff.diff,
+                onClose: ()=>setActiveDiff(null),
+                proposal: activeDiff.proposal
+            })
+        ]
+    });
+};

package/dist/components/{RecentChangesList.module.css → AuditLogList.module.css}

@@ -8,10 +8,27 @@
 }
 
 .header {
+    align-items: center;
+    display: flex;
     flex: 0 0 auto;
+    gap: 10px;
+    justify-content: space-between;
     margin-bottom: 10px;
 }
 
+.headerGhostButton {
+    color: var(--theme-elevation-500);
+    flex: 0 0 auto;
+    font-size: 12px;
+    line-height: 24px;
+    min-height: 24px;
+    text-decoration: none;
+}
+
+.headerGhostButton:hover {
+    text-decoration: underline;
+}
+
 .title {
     font-size: 14px;
     line-height: 1.3;
@@ -42,7 +59,7 @@
     display: grid;
     gap: 8px;
     grid-template-columns: minmax(0, 1fr) auto auto;
-    padding: 10px;
+    padding: 4px 4px 4px 8px;
 }
 
 .titleRow {

package/dist/components/DiffDialog.d.ts

@@ -1,12 +1,19 @@
-import type { AIActionProposal } from "./AIActionProposalList.js";
+import type { ActionProposal } from "./ActionToast.js";
+import type { AppliedChange } from "./AuditLogList.js";
 export type ProposalDiff = {
     after: unknown;
     before: unknown;
 };
 type DiffDialogProps = {
+    change?: AppliedChange;
     diff: ProposalDiff;
     onClose: () => void;
-    proposal: AIActionProposal;
+    proposal: ActionProposal;
+    tokenUsage?: {
+        inputTokens?: number;
+        outputTokens?: number;
+        totalTokens?: number;
+    };
 };
-export declare const DiffDialog: ({ diff, onClose, proposal }: DiffDialogProps) => import("react").JSX.Element;
+export declare const DiffDialog: ({ change, diff, onClose, proposal, tokenUsage }: DiffDialogProps) => import("react").JSX.Element;
 export {};