@mvriu5/payload-ai 0.5.8 → 0.5.10

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/{AIActionProposalList.js → ActionToast.js}

@@ -1,5 +1,9 @@
-import styles from "./AIActionProposalList.module.css";
+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;
@@ -15,10 +19,47 @@ const getSafeProposalDetails = (proposal)=>{
     }
     return redactedProposal;
 };
-export const AIActionProposalList = ({ appliedProposalIndexes, description, error, getViewURL, isApplying, onDismiss, onDismissError, onApply, proposals })=>{
+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__*/ React.createElement("div", {
         className: styles.list
     }, error && /*#__PURE__*/ React.createElement("div", {
@@ -37,13 +78,13 @@ export const AIActionProposalList = ({ appliedProposalIndexes, description, erro
         className: styles.label
     }, "AI response"), /*#__PURE__*/ React.createElement("div", {
         className: styles.description
-    }, descriptionPreview), isDescriptionTruncated ? /*#__PURE__*/ React.createElement("details", {
+    }, descriptionPreview), isDescriptionTruncated && /*#__PURE__*/ React.createElement("details", {
         className: styles.details
     }, /*#__PURE__*/ React.createElement("summary", {
         className: styles.summary
     }, "Full response"), /*#__PURE__*/ React.createElement("pre", {
         className: styles.proposalDetails
-    }, description)) : null)), proposals.map((proposal, index)=>{
+    }, description)))), proposals.map((proposal, index)=>{
         const isApplied = appliedProposalIndexes.includes(index);
         const viewURL = getViewURL?.(proposal);
         return /*#__PURE__*/ React.createElement("div", {
@@ -73,22 +114,51 @@ export const AIActionProposalList = ({ appliedProposalIndexes, description, erro
             className: styles.footer
         }, /*#__PURE__*/ React.createElement("div", {
             className: styles.viewAction
-        }, viewURL && /*#__PURE__*/ React.createElement("a", {
+        }, /*#__PURE__*/ React.createElement("button", {
             className: styles.secondaryButton,
+            disabled: loadingDiffIndex === index,
+            onClick: ()=>void openDiff(proposal, index),
+            type: "button"
+        }, /*#__PURE__*/ React.createElement(FileDiff, {
+            height: 16,
+            width: 16
+        }), loadingDiffIndex === index ? "Loading" : "Review"), viewURL && /*#__PURE__*/ React.createElement("a", {
+            className: styles.ghostButton,
             href: viewURL,
             rel: "noreferrer noopener",
             target: "_blank"
-        }, "View")), /*#__PURE__*/ React.createElement("div", {
+        }, "Go to source")), /*#__PURE__*/ React.createElement("div", {
             className: styles.actions
         }, onDismiss && /*#__PURE__*/ React.createElement("button", {
             className: styles.secondaryButton,
             onClick: onDismiss,
             type: "button"
-        }, "Dismiss"), /*#__PURE__*/ React.createElement("button", {
+        }, /*#__PURE__*/ React.createElement(Reject, {
+            height: 16,
+            width: 16
+        })), /*#__PURE__*/ React.createElement("button", {
             className: styles.button,
             disabled: isApplying || isApplied,
             onClick: ()=>onApply(proposal, index),
             type: "button"
-        }, isApplied ? "Applied" : "Apply"))));
+        }, /*#__PURE__*/ React.createElement(Apply, {
+            height: 16,
+            width: 16
+        })))));
+    }), diffError && /*#__PURE__*/ React.createElement("div", {
+        className: `${styles.item} ${styles.errorItem}`
+    }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
+        className: styles.label
+    }, "Diff review failed"), /*#__PURE__*/ React.createElement("div", {
+        className: styles.description
+    }, diffError)), /*#__PURE__*/ React.createElement("button", {
+        className: styles.button,
+        onClick: ()=>setDiffError(""),
+        type: "button"
+    }, "Dismiss")), activeDiff && /*#__PURE__*/ React.createElement(DiffDialog, {
+        diff: activeDiff.diff,
+        onClose: ()=>setActiveDiff(null),
+        proposal: activeDiff.proposal,
+        tokenUsage: tokenUsage || undefined
     }));
 };

package/dist/components/{AIActionProposalList.module.css → ActionToast.module.css}

@@ -94,6 +94,7 @@
 .viewAction {
     align-items: center;
     display: flex;
+    gap: 8px;
     min-width: 0;
 }
 
@@ -106,37 +107,74 @@
 }
 
 .button {
+    align-items: center;
     background: var(--theme-text);
     border: 0;
     border-radius: 4px;
     color: var(--theme-bg);
     cursor: pointer;
+    display: inline-flex;
     flex: 0 0 auto;
     font: inherit;
-    min-height: 34px;
+    gap: 6px;
+    justify-content: center;
+    line-height: 24px;
+    min-height: 24px;
     padding: 0 14px;
 }
 
 .secondaryButton {
+    align-items: center;
     background: transparent;
     border: 1px solid var(--theme-elevation-150);
     border-radius: 4px;
     color: var(--theme-text);
     cursor: pointer;
+    display: inline-flex;
     flex: 0 0 auto;
     font: inherit;
-    line-height: 34px;
-    min-height: 34px;
+    gap: 6px;
+    justify-content: center;
+    line-height: 24px;
+    min-height: 24px;
     padding: 0 14px;
     text-decoration: none;
 }
 
+.secondaryButton svg {
+    color: var(--theme-elevation-500);
+    flex: 0 0 auto;
+}
+
+.button svg {
+    flex: 0 0 auto;
+}
+
+.ghostButton {
+    background: transparent;
+    border: 0;
+    border-radius: 4px;
+    color: var(--theme-elevation-600);
+    cursor: pointer;
+    flex: 0 0 auto;
+    font: inherit;
+    line-height: 24px;
+    min-height: 24px;
+    padding: 0 10px;
+    text-decoration: none;
+}
+
+.ghostButton:hover {
+    text-decoration: underline;
+}
+
 .button:disabled {
     cursor: not-allowed;
     opacity: 0.45;
 }
 
-.secondaryButton:disabled {
+.secondaryButton:disabled,
+.ghostButton:disabled {
     cursor: not-allowed;
     opacity: 0.45;
 }
@@ -163,13 +201,19 @@
         flex-direction: column;
     }
 
+    .viewAction {
+        align-self: stretch;
+        flex-direction: column;
+    }
+
     .footer {
         align-items: stretch;
         flex-direction: column;
     }
 
     .button,
-    .secondaryButton {
+    .secondaryButton,
+    .ghostButton {
         width: 100%;
     }
 }

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,67 @@
+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__*/ React.createElement("aside", {
+        className: styles.recentChanges
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.header
+    }, /*#__PURE__*/ React.createElement("h3", {
+        className: styles.title
+    }, "Recent changes"), allChangesURL && /*#__PURE__*/ React.createElement("a", {
+        className: styles.headerGhostButton,
+        href: allChangesURL
+    }, "View all")), /*#__PURE__*/ React.createElement("div", {
+        className: styles.list
+    }, changes.length === 0 ? /*#__PURE__*/ React.createElement("div", {
+        className: styles.empty
+    }, "No changes yet.") : changes.map((change, index)=>/*#__PURE__*/ React.createElement("div", {
+            className: styles.item,
+            key: `${change.title}-${index}`
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: styles.titleRow
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: styles.itemTitle
+        }, change.title), change.url && /*#__PURE__*/ React.createElement("a", {
+            className: styles.ghostButton,
+            href: change.url,
+            rel: "noreferrer noopener",
+            target: "_blank"
+        }, /*#__PURE__*/ React.createElement(ExternalLinkIcon, null))), /*#__PURE__*/ React.createElement("div", {
+            className: styles.stats
+        }, /*#__PURE__*/ React.createElement("code", {
+            className: styles.additions
+        }, "+", change.additions), /*#__PURE__*/ React.createElement("code", {
+            className: styles.removals
+        }, "-", change.removals)), /*#__PURE__*/ React.createElement("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"
+        }, "Review")))), activeDiff && activeDiff.change && /*#__PURE__*/ React.createElement(DiffDialog, {
+        change: activeDiff.change,
+        diff: activeDiff.diff,
+        onClose: ()=>setActiveDiff(null),
+        proposal: activeDiff.proposal
+    }));
+};

package/dist/components/AuditLogList.module.css

@@ -0,0 +1,152 @@
+.recentChanges {
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    padding: 16px;
+}
+
+.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;
+    margin: 0;
+}
+
+.list {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 8px;
+    max-height: 260px;
+    min-height: 0;
+    overflow: auto;
+    padding-right: 2px;
+}
+
+.empty {
+    color: var(--theme-elevation-500);
+    font-size: 12px;
+    line-height: 1.4;
+}
+
+.item {
+    align-items: center;
+    border: 1px solid var(--theme-elevation-100);
+    border-radius: 4px;
+    display: grid;
+    gap: 8px;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    padding: 4px 4px 4px 8px;
+}
+
+.titleRow {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    min-width: 0;
+}
+
+.itemTitle {
+    color: var(--theme-text);
+    flex: 0 1 auto;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.4;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.stats {
+    display: flex;
+    gap: 6px;
+    justify-content: flex-end;
+}
+
+.additions,
+.removals {
+    border-radius: 3px;
+    font-size: 11px;
+    line-height: 18px;
+    padding: 0 5px;
+}
+
+.additions {
+    background: rgba(39, 132, 90, 0.16);
+    color: #27845a;
+}
+
+.removals {
+    background: rgba(160, 26, 26, 0.16);
+    color: #a01a1a;
+}
+
+.button {
+    align-items: center;
+    background: var(--theme-elevation-0);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 4px;
+    color: var(--theme-text);
+    cursor: pointer;
+    display: inline-flex;
+    font-size: 12px;
+    gap: 6px;
+    justify-content: center;
+    line-height: 24px;
+    min-height: 24px;
+    padding: 0 10px;
+    text-align: center;
+    text-decoration: none;
+}
+
+.button:disabled {
+    color: var(--theme-elevation-400);
+    cursor: not-allowed;
+}
+
+.button svg {
+    color: var(--theme-elevation-500);
+    flex: 0 0 auto;
+}
+
+.ghostButton {
+    color: var(--theme-elevation-500);
+    flex: 0 0 auto;
+    font-size: 12px;
+    line-height: 18px;
+    text-decoration: none;
+}
+
+.ghostButton:hover {
+    text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+    .list {
+        max-height: 220px;
+    }
+}

package/dist/components/DiffDialog.d.ts

@@ -0,0 +1,19 @@
+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: ActionProposal;
+    tokenUsage?: {
+        inputTokens?: number;
+        outputTokens?: number;
+        totalTokens?: number;
+    };
+};
+export declare const DiffDialog: ({ change, diff, onClose, proposal, tokenUsage }: DiffDialogProps) => import("react").JSX.Element;
+export {};