@mvriu5/payload-ai 0.5.9 → 1.1.1

package/dist/components/DiffDialog.js

@@ -1,19 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { XIcon } from "@payloadcms/ui/icons/X";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { getJSONLineKey } from "../payload/shared.js";
 import styles from "./DiffDialog.module.css";
 const formatDiffValue = (value)=>{
     return JSON.stringify(value, null, 2);
 };
+const formatDateTime = (value)=>{
+    if (!value) return null;
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return value;
+    return new Intl.DateTimeFormat(undefined, {
+        dateStyle: "medium",
+        timeStyle: "short"
+    }).format(date);
+};
 const createLine = ({ changed, path, placeholder = false, text = "" })=>({
         changed,
         path,
         placeholder,
         text
     });
-const getJSONLineKey = (line)=>{
-    const match = /^(\s*)"([^"]+)":/.exec(line);
-    return match ? `${match[1]}${match[2]}` : null;
-};
 const shouldPairChangedLines = (beforeLine, afterLine)=>{
     const beforeKey = getJSONLineKey(beforeLine);
     const afterKey = getJSONLineKey(afterLine);
@@ -39,7 +46,7 @@ const getRowPath = (row)=>{
 const isChangedRow = (row)=>{
     return row.before.changed || row.after.changed;
 };
-const buildDisplayRows = (rows, expandedGroups)=>{
+const buildDisplayRows = (rows, expandedGroups, groupPrefix = "")=>{
     const displayRows = [];
     const contextRows = 2;
     let index = 0;
@@ -70,7 +77,8 @@ const buildDisplayRows = (rows, expandedGroups)=>{
             }
             continue;
         }
-        const isExpanded = expandedGroups.has(groupID);
+        const scopedGroupID = groupPrefix ? `${groupPrefix}:${groupID}` : groupID;
+        const isExpanded = expandedGroups.has(scopedGroupID);
         for(let rowIndex = start; rowIndex < start + contextRows; rowIndex += 1){
             displayRows.push({
                 index: rowIndex,
@@ -213,98 +221,277 @@ const getDiffRows = (before, after)=>{
     }
     return rows;
 };
-export const DiffDialog = ({ diff, onClose, proposal })=>{
+const isLocaleDiffMap = (value)=>{
+    if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+    return Object.values(value).every((entry)=>entry && typeof entry === "object" && !Array.isArray(entry));
+};
+const getDiffSections = (diff)=>{
+    if (isLocaleDiffMap(diff.before) && isLocaleDiffMap(diff.after)) {
+        const beforeByLocale = diff.before;
+        const afterByLocale = diff.after;
+        const localeKeys = Array.from(new Set([
+            ...Object.keys(beforeByLocale),
+            ...Object.keys(afterByLocale)
+        ]));
+        return localeKeys.map((locale)=>({
+                afterValue: formatDiffValue(afterByLocale[locale] ?? {}),
+                beforeValue: formatDiffValue(beforeByLocale[locale] ?? {}),
+                id: locale,
+                label: `Locale: ${locale}`
+            }));
+    }
+    return [
+        {
+            afterValue: formatDiffValue(diff.after),
+            beforeValue: formatDiffValue(diff.before),
+            id: "default"
+        }
+    ];
+};
+const formatTokenUsage = (value)=>{
+    return typeof value === "number" && Number.isFinite(value) && value > 0 ? value.toLocaleString() : null;
+};
+export const DiffDialog = ({ change, diff, onClose, proposal, tokenUsage })=>{
     const [scrollLeft, setScrollLeft] = useState(0);
     const [expandedGroups, setExpandedGroups] = useState(()=>new Set());
-    const beforeValue = formatDiffValue(diff.before);
-    const afterValue = formatDiffValue(diff.after);
-    const diffRows = getDiffRows(beforeValue, afterValue);
-    const displayRows = buildDisplayRows(diffRows, expandedGroups);
-    const longestLineLength = Math.max(...beforeValue.split("\n").map((line)=>line.length), ...afterValue.split("\n").map((line)=>line.length), 80);
-    const diffShellStyle = {
-        "--diff-line-offset": `-${scrollLeft}px`,
-        "--diff-line-width": `${longestLineLength + 8}ch`
-    };
-    return /*#__PURE__*/ React.createElement("div", {
+    const diffSections = getDiffSections(diff);
+    const totalTokens = formatTokenUsage(change?.totalTokens) || formatTokenUsage(tokenUsage?.totalTokens);
+    const inputTokens = formatTokenUsage(change?.inputTokens) || formatTokenUsage(tokenUsage?.inputTokens);
+    const outputTokens = formatTokenUsage(change?.outputTokens) || formatTokenUsage(tokenUsage?.outputTokens);
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return ()=>{
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [
+        onClose
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
         "aria-modal": "true",
         className: styles.dialogOverlay,
-        role: "dialog"
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.dialog
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.dialogHeader
-    }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
-        className: styles.dialogTitle
-    }, proposal.label), /*#__PURE__*/ React.createElement("div", {
-        className: styles.meta
-    }, proposal.action, " in ", proposal.collection || proposal.slug, proposal.id ? ` #${proposal.id}` : "")), /*#__PURE__*/ React.createElement("button", {
-        "aria-label": "Close",
-        className: styles.closeButton,
-        onClick: onClose,
-        type: "button"
-    }, /*#__PURE__*/ React.createElement(XIcon, null))), /*#__PURE__*/ React.createElement("div", {
-        className: styles.diffShell,
-        style: diffShellStyle
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.diffScroll
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.diffHeaderGrid
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.diffPaneHeader
-    }, "Current"), /*#__PURE__*/ React.createElement("div", {
-        className: styles.diffPaneHeader
-    }, "Proposed")), /*#__PURE__*/ React.createElement("div", {
-        className: styles.diffRows
-    }, displayRows.map((displayRow)=>{
-        if (displayRow.type === "collapsed") {
-            return /*#__PURE__*/ React.createElement("button", {
-                className: styles.diffCollapsedRow,
-                key: `collapsed-${displayRow.id}`,
-                onClick: ()=>{
-                    setExpandedGroups((current)=>{
-                        const next = new Set(current);
-                        if (displayRow.expanded) {
-                            next.delete(displayRow.id);
-                        } else {
-                            next.add(displayRow.id);
-                        }
-                        return next;
-                    });
-                },
-                type: "button"
-            }, displayRow.expanded ? "Hide" : "Show", " ", displayRow.count, " unchanged lines", displayRow.path ? /*#__PURE__*/ React.createElement("span", {
-                className: styles.diffCollapsedPath
-            }, displayRow.path) : null);
-        }
-        const row = displayRow.row;
-        return /*#__PURE__*/ React.createElement("div", {
-            className: styles.diffRow,
-            key: `row-${displayRow.index}`
-        }, /*#__PURE__*/ React.createElement("span", {
-            className: [
-                styles.diffLine,
-                row.before.changed ? styles.diffLineRemoved : "",
-                row.before.placeholder ? styles.diffLinePlaceholder : ""
-            ].filter(Boolean).join(" ")
-        }, row.before.changed && row.before.path ? /*#__PURE__*/ React.createElement("span", {
-            className: styles.diffPathBadge
-        }, row.before.path) : null, /*#__PURE__*/ React.createElement("span", {
-            className: styles.diffLineContent
-        }, row.before.text || " ")), /*#__PURE__*/ React.createElement("span", {
-            className: [
-                styles.diffLine,
-                row.after.changed ? styles.diffLineAdded : "",
-                row.after.placeholder ? styles.diffLinePlaceholder : ""
-            ].filter(Boolean).join(" ")
-        }, row.after.changed && row.after.path ? /*#__PURE__*/ React.createElement("span", {
-            className: styles.diffPathBadge
-        }, row.after.path) : null, /*#__PURE__*/ React.createElement("span", {
-            className: styles.diffLineContent
-        }, row.after.text || " ")));
-    }))), /*#__PURE__*/ React.createElement("div", {
-        className: styles.horizontalScroll,
-        onScroll: (event)=>setScrollLeft(event.currentTarget.scrollLeft)
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.horizontalScrollSpacer
-    })))));
+        role: "dialog",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: styles.dialog,
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: styles.dialogHeader,
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: styles.dialogTitle,
+                                    children: proposal.label
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: styles.meta,
+                                    children: [
+                                        proposal.action,
+                                        " in ",
+                                        proposal.collection || proposal.slug,
+                                        proposal.id ? ` #${proposal.id}` : ""
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            "aria-label": "Close",
+                            className: styles.closeButton,
+                            onClick: onClose,
+                            type: "button",
+                            children: /*#__PURE__*/ _jsx(XIcon, {})
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: styles.dialogContent,
+                    children: [
+                        change ? /*#__PURE__*/ _jsx("div", {
+                            className: styles.detailSection,
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: styles.detailGrid,
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: styles.detailLabel,
+                                        children: "User"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: styles.detailValue,
+                                        children: change.userLabel || change.userID || "Unknown"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: styles.detailLabel,
+                                        children: "Date"
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: styles.detailValue,
+                                        children: formatDateTime(change.createdAt) || "Unknown"
+                                    }),
+                                    totalTokens && /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: styles.detailLabel,
+                                                children: "Tokens"
+                                            }),
+                                            /*#__PURE__*/ _jsxs("span", {
+                                                className: styles.detailValue,
+                                                children: [
+                                                    totalTokens,
+                                                    inputTokens && outputTokens ? ` (${inputTokens} in / ${outputTokens} out)` : ""
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }) : totalTokens && /*#__PURE__*/ _jsx("div", {
+                            className: styles.detailSection,
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: styles.detailGrid,
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: styles.detailLabel,
+                                        children: "Tokens"
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        className: styles.detailValue,
+                                        children: [
+                                            totalTokens,
+                                            inputTokens && outputTokens ? ` (${inputTokens} in / ${outputTokens} out)` : ""
+                                        ]
+                                    })
+                                ]
+                            })
+                        }),
+                        diffSections.map((section)=>{
+                            const diffRows = getDiffRows(section.beforeValue, section.afterValue);
+                            const displayRows = buildDisplayRows(diffRows, expandedGroups, section.id);
+                            const longestLineLength = Math.max(...section.beforeValue.split("\n").map((line)=>line.length), ...section.afterValue.split("\n").map((line)=>line.length), 80);
+                            const diffShellStyle = {
+                                "--diff-line-offset": `-${scrollLeft}px`,
+                                "--diff-line-width": `${longestLineLength + 8}ch`
+                            };
+                            return /*#__PURE__*/ _jsxs("div", {
+                                className: styles.diffSection,
+                                children: [
+                                    section.label ? /*#__PURE__*/ _jsx("div", {
+                                        className: styles.diffSectionLabel,
+                                        children: section.label
+                                    }) : null,
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: styles.diffShell,
+                                        style: diffShellStyle,
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: styles.diffScroll,
+                                                children: [
+                                                    /*#__PURE__*/ _jsxs("div", {
+                                                        className: styles.diffHeaderGrid,
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("div", {
+                                                                className: styles.diffPaneHeader,
+                                                                children: "Current"
+                                                            }),
+                                                            /*#__PURE__*/ _jsx("div", {
+                                                                className: styles.diffPaneHeader,
+                                                                children: "Proposed"
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("div", {
+                                                        className: styles.diffRows,
+                                                        children: displayRows.map((displayRow)=>{
+                                                            if (displayRow.type === "collapsed") {
+                                                                return /*#__PURE__*/ _jsxs("button", {
+                                                                    className: styles.diffCollapsedRow,
+                                                                    onClick: ()=>{
+                                                                        setExpandedGroups((current)=>{
+                                                                            const next = new Set(current);
+                                                                            const groupID = `${section.id}:${displayRow.id}`;
+                                                                            if (displayRow.expanded) {
+                                                                                next.delete(groupID);
+                                                                            } else {
+                                                                                next.add(groupID);
+                                                                            }
+                                                                            return next;
+                                                                        });
+                                                                    },
+                                                                    type: "button",
+                                                                    children: [
+                                                                        displayRow.expanded ? "Hide" : "Show",
+                                                                        " ",
+                                                                        displayRow.count,
+                                                                        " unchanged lines",
+                                                                        displayRow.path && /*#__PURE__*/ _jsx("span", {
+                                                                            className: styles.diffCollapsedPath,
+                                                                            children: displayRow.path
+                                                                        })
+                                                                    ]
+                                                                }, `${section.id}-collapsed-${displayRow.id}`);
+                                                            }
+                                                            const row = displayRow.row;
+                                                            return /*#__PURE__*/ _jsxs("div", {
+                                                                className: styles.diffRow,
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsxs("span", {
+                                                                        className: [
+                                                                            styles.diffLine,
+                                                                            row.before.changed && styles.diffLineRemoved,
+                                                                            row.before.placeholder && styles.diffLinePlaceholder
+                                                                        ].filter(Boolean).join(" "),
+                                                                        children: [
+                                                                            row.before.changed && row.before.path && /*#__PURE__*/ _jsx("span", {
+                                                                                className: styles.diffPathBadge,
+                                                                                children: row.before.path
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx("span", {
+                                                                                className: styles.diffLineContent,
+                                                                                children: row.before.text || " "
+                                                                            })
+                                                                        ]
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsxs("span", {
+                                                                        className: [
+                                                                            styles.diffLine,
+                                                                            row.after.changed && styles.diffLineAdded,
+                                                                            row.after.placeholder && styles.diffLinePlaceholder
+                                                                        ].filter(Boolean).join(" "),
+                                                                        children: [
+                                                                            row.after.changed && row.after.path && /*#__PURE__*/ _jsx("span", {
+                                                                                className: styles.diffPathBadge,
+                                                                                children: row.after.path
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx("span", {
+                                                                                className: styles.diffLineContent,
+                                                                                children: row.after.text || " "
+                                                                            })
+                                                                        ]
+                                                                    })
+                                                                ]
+                                                            }, `${section.id}-row-${displayRow.index}`);
+                                                        })
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: styles.horizontalScroll,
+                                                onScroll: (event)=>setScrollLeft(event.currentTarget.scrollLeft),
+                                                children: /*#__PURE__*/ _jsx("div", {
+                                                    className: styles.horizontalScrollSpacer
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, section.id);
+                        })
+                    ]
+                })
+            ]
+        })
+    });
 };

package/dist/components/DiffDialog.module.css

@@ -4,6 +4,7 @@
     display: flex;
     inset: 0;
     justify-content: center;
+    overflow: auto;
     padding: 24px;
     position: fixed;
     z-index: 1100;
@@ -19,10 +20,21 @@
     gap: 16px;
     max-height: min(760px, calc(100vh - 48px));
     max-width: min(1120px, calc(100vw - 48px));
+    min-height: 0;
+    overflow: hidden;
     padding: 16px;
     width: 100%;
 }
 
+.dialogContent {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 16px;
+    min-height: 0;
+    overflow: auto;
+}
+
 .dialogHeader {
     align-items: flex-start;
     display: flex;
@@ -44,6 +56,58 @@
     margin-top: 2px;
 }
 
+.detailSection {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.detailGrid {
+    column-gap: 12px;
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    row-gap: 4px;
+}
+
+.detailLabel {
+    color: var(--theme-elevation-600);
+    font-size: 11px;
+    line-height: 1.2;
+}
+
+.detailValue {
+    color: var(--theme-text);
+    font-size: 12px;
+    line-height: 1.4;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.detailTextBlock {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.detailText {
+    background: var(--theme-elevation-50);
+    border: 1px solid var(--theme-elevation-100);
+    border-radius: 4px;
+    color: var(--theme-text);
+    font-family: inherit;
+    font-size: 12px;
+    line-height: 1.5;
+    margin: 0;
+    max-height: 140px;
+    overflow: auto;
+    padding: 8px 10px;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
 .closeButton {
     align-items: center;
     background: transparent;
@@ -72,12 +136,28 @@
     border: 1px solid var(--theme-elevation-150);
     border-radius: 0;
     display: flex;
+    flex: 1 1 auto;
     flex-direction: column;
     min-height: 0;
     min-width: 0;
     overflow: hidden;
 }
 
+.diffSection {
+    display: flex;
+    flex: 0 0 calc(100% - 1px);
+    flex-direction: column;
+    gap: 6px;
+    min-height: calc(100% - 1px);
+}
+
+.diffSectionLabel {
+    color: var(--theme-elevation-700);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
 .diffHeaderGrid {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -109,7 +189,7 @@
     flex: 1 1 auto;
     font-size: 12px;
     line-height: 1.5;
-    min-height: 260px;
+    min-height: 0;
     overflow-x: hidden;
     overflow-y: auto;
 }
@@ -238,12 +318,16 @@
         flex-direction: column;
     }
 
+    .detailGrid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
     .closeButton {
         align-self: flex-end;
     }
 
     .diffScroll {
-        min-height: 180px;
+        min-height: 0;
     }
 
 }

package/dist/components/Icons.d.ts

@@ -3,7 +3,12 @@ export declare function MistralAiIcon(props: SVGProps<SVGSVGElement>): import("r
 export declare function OpenaiIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function ClaudeIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function GoogleGeminiIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function OpenrouterIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function FileDiff(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function Send(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function Apply(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function Reject(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Collection(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Document(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Global(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Block(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;