@mvriu5/payload-ai 0.5.8 → 0.5.10

package/dist/components/DiffDialog.js

@@ -0,0 +1,396 @@
+import { XIcon } from "@payloadcms/ui/icons/X";
+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 shouldPairChangedLines = (beforeLine, afterLine)=>{
+    const beforeKey = getJSONLineKey(beforeLine);
+    const afterKey = getJSONLineKey(afterLine);
+    return Boolean(beforeKey && afterKey && beforeKey === afterKey);
+};
+const getJSONLinePaths = (lines)=>{
+    const stack = [];
+    return lines.map((line)=>{
+        const indentation = line.match(/^\s*/)?.[0].length || 0;
+        const level = Math.floor(indentation / 2);
+        const keyMatch = /^\s*"([^"]+)":/.exec(line);
+        stack.length = level;
+        if (keyMatch?.[1]) {
+            stack[level] = keyMatch[1];
+            return stack.slice(0, level + 1).join(".");
+        }
+        return stack.slice(0, level).join(".");
+    });
+};
+const getRowPath = (row)=>{
+    return row.after.path || row.before.path;
+};
+const isChangedRow = (row)=>{
+    return row.before.changed || row.after.changed;
+};
+const buildDisplayRows = (rows, expandedGroups, groupPrefix = "")=>{
+    const displayRows = [];
+    const contextRows = 2;
+    let index = 0;
+    while(index < rows.length){
+        if (isChangedRow(rows[index])) {
+            displayRows.push({
+                index,
+                row: rows[index],
+                type: "row"
+            });
+            index += 1;
+            continue;
+        }
+        const start = index;
+        while(index < rows.length && !isChangedRow(rows[index])){
+            index += 1;
+        }
+        const end = index;
+        const count = end - start;
+        const groupID = `${start}-${end}`;
+        if (count <= contextRows * 2 + 2) {
+            for(let rowIndex = start; rowIndex < end; rowIndex += 1){
+                displayRows.push({
+                    index: rowIndex,
+                    row: rows[rowIndex],
+                    type: "row"
+                });
+            }
+            continue;
+        }
+        const scopedGroupID = groupPrefix ? `${groupPrefix}:${groupID}` : groupID;
+        const isExpanded = expandedGroups.has(scopedGroupID);
+        for(let rowIndex = start; rowIndex < start + contextRows; rowIndex += 1){
+            displayRows.push({
+                index: rowIndex,
+                row: rows[rowIndex],
+                type: "row"
+            });
+        }
+        displayRows.push({
+            count: count - contextRows * 2,
+            expanded: isExpanded,
+            id: groupID,
+            path: getRowPath(rows[start + contextRows]),
+            type: "collapsed"
+        });
+        if (isExpanded) {
+            for(let rowIndex = start + contextRows; rowIndex < end - contextRows; rowIndex += 1){
+                displayRows.push({
+                    index: rowIndex,
+                    row: rows[rowIndex],
+                    type: "row"
+                });
+            }
+        }
+        for(let rowIndex = end - contextRows; rowIndex < end; rowIndex += 1){
+            displayRows.push({
+                index: rowIndex,
+                row: rows[rowIndex],
+                type: "row"
+            });
+        }
+    }
+    return displayRows;
+};
+const getDiffRows = (before, after)=>{
+    const beforeLines = before.split("\n");
+    const afterLines = after.split("\n");
+    const beforeLinePaths = getJSONLinePaths(beforeLines);
+    const afterLinePaths = getJSONLinePaths(afterLines);
+    const dp = Array.from({
+        length: beforeLines.length + 1
+    }, ()=>Array(afterLines.length + 1).fill(0));
+    for(let i = beforeLines.length - 1; i >= 0; i -= 1){
+        for(let j = afterLines.length - 1; j >= 0; j -= 1){
+            dp[i][j] = beforeLines[i] === afterLines[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+        }
+    }
+    const rows = [];
+    let beforeIndex = 0;
+    let afterIndex = 0;
+    while(beforeIndex < beforeLines.length && afterIndex < afterLines.length){
+        if (beforeLines[beforeIndex] === afterLines[afterIndex]) {
+            rows.push({
+                after: createLine({
+                    changed: false,
+                    path: afterLinePaths[afterIndex],
+                    text: afterLines[afterIndex]
+                }),
+                before: createLine({
+                    changed: false,
+                    path: beforeLinePaths[beforeIndex],
+                    text: beforeLines[beforeIndex]
+                })
+            });
+            beforeIndex += 1;
+            afterIndex += 1;
+            continue;
+        }
+        if (shouldPairChangedLines(beforeLines[beforeIndex], afterLines[afterIndex])) {
+            rows.push({
+                after: createLine({
+                    changed: true,
+                    path: afterLinePaths[afterIndex],
+                    text: afterLines[afterIndex]
+                }),
+                before: createLine({
+                    changed: true,
+                    path: beforeLinePaths[beforeIndex],
+                    text: beforeLines[beforeIndex]
+                })
+            });
+            beforeIndex += 1;
+            afterIndex += 1;
+            continue;
+        }
+        if (dp[beforeIndex + 1][afterIndex] >= dp[beforeIndex][afterIndex + 1]) {
+            rows.push({
+                after: createLine({
+                    changed: false,
+                    placeholder: true
+                }),
+                before: createLine({
+                    changed: true,
+                    path: beforeLinePaths[beforeIndex],
+                    text: beforeLines[beforeIndex]
+                })
+            });
+            beforeIndex += 1;
+        } else {
+            rows.push({
+                after: createLine({
+                    changed: true,
+                    path: afterLinePaths[afterIndex],
+                    text: afterLines[afterIndex]
+                }),
+                before: createLine({
+                    changed: false,
+                    placeholder: true
+                })
+            });
+            afterIndex += 1;
+        }
+    }
+    while(beforeIndex < beforeLines.length){
+        rows.push({
+            after: createLine({
+                changed: false,
+                placeholder: true
+            }),
+            before: createLine({
+                changed: true,
+                path: beforeLinePaths[beforeIndex],
+                text: beforeLines[beforeIndex]
+            })
+        });
+        beforeIndex += 1;
+    }
+    while(afterIndex < afterLines.length){
+        rows.push({
+            after: createLine({
+                changed: true,
+                path: afterLinePaths[afterIndex],
+                text: afterLines[afterIndex]
+            }),
+            before: createLine({
+                changed: false,
+                placeholder: true
+            })
+        });
+        afterIndex += 1;
+    }
+    return rows;
+};
+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 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__*/ React.createElement("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.dialogContent
+    }, change ? /*#__PURE__*/ React.createElement("div", {
+        className: styles.detailSection
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.detailGrid
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailLabel
+    }, "User"), /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailValue
+    }, change.userLabel || change.userID || "Unknown"), /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailLabel
+    }, "Date"), /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailValue
+    }, formatDateTime(change.createdAt) || "Unknown"), totalTokens && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailLabel
+    }, "Tokens"), /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailValue
+    }, totalTokens, inputTokens && outputTokens ? ` (${inputTokens} in / ${outputTokens} out)` : "")))) : totalTokens && /*#__PURE__*/ React.createElement("div", {
+        className: styles.detailSection
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles.detailGrid
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailLabel
+    }, "Tokens"), /*#__PURE__*/ React.createElement("span", {
+        className: styles.detailValue
+    }, 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__*/ React.createElement("div", {
+            className: styles.diffSection,
+            key: section.id
+        }, section.label ? /*#__PURE__*/ React.createElement("div", {
+            className: styles.diffSectionLabel
+        }, section.label) : 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: `${section.id}-collapsed-${displayRow.id}`,
+                    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"
+                }, displayRow.expanded ? "Hide" : "Show", " ", displayRow.count, " unchanged lines", displayRow.path && /*#__PURE__*/ React.createElement("span", {
+                    className: styles.diffCollapsedPath
+                }, displayRow.path));
+            }
+            const row = displayRow.row;
+            return /*#__PURE__*/ React.createElement("div", {
+                className: styles.diffRow,
+                key: `${section.id}-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), /*#__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), /*#__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
+        }))));
+    }))));
+};