@mvriu5/payload-ai 0.5.8 → 0.5.9

package/dist/components/DiffDialog.js

@@ -0,0 +1,310 @@
+import { XIcon } from "@payloadcms/ui/icons/X";
+import { useState } from "react";
+import styles from "./DiffDialog.module.css";
+const formatDiffValue = (value)=>{
+    return JSON.stringify(value, null, 2);
+};
+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);
+    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)=>{
+    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 isExpanded = expandedGroups.has(groupID);
+        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;
+};
+export const DiffDialog = ({ diff, onClose, proposal })=>{
+    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", {
+        "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
+    })))));
+};

package/dist/components/DiffDialog.module.css

@@ -0,0 +1,249 @@
+.dialogOverlay {
+    align-items: center;
+    background: rgba(0, 0, 0, 0.42);
+    display: flex;
+    inset: 0;
+    justify-content: center;
+    padding: 24px;
+    position: fixed;
+    z-index: 1100;
+}
+
+.dialog {
+    background: var(--theme-bg);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 6px;
+    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.26);
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-height: min(760px, calc(100vh - 48px));
+    max-width: min(1120px, calc(100vw - 48px));
+    padding: 16px;
+    width: 100%;
+}
+
+.dialogHeader {
+    align-items: flex-start;
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+}
+
+.dialogTitle {
+    color: var(--theme-text);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.4;
+}
+
+.meta {
+    color: var(--theme-elevation-600);
+    font-size: 12px;
+    line-height: 1.4;
+    margin-top: 2px;
+}
+
+.closeButton {
+    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;
+    height: 24px;
+    justify-content: center;
+    line-height: 24px;
+    min-height: 24px;
+    padding: 0;
+    text-decoration: none;
+    width: 24px;
+}
+
+.closeButton svg {
+    height: 12px;
+    width: 12px;
+}
+
+.diffShell {
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.diffHeaderGrid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    min-width: 100%;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+.diffPaneHeader {
+    background: var(--theme-elevation-50);
+    border-bottom: 1px solid var(--theme-elevation-150);
+    color: var(--theme-elevation-700);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.4;
+    min-width: 0;
+    overflow: hidden;
+    padding: 8px 10px;
+}
+
+.diffPaneHeader + .diffPaneHeader {
+    border-left: 1px solid var(--theme-elevation-150);
+}
+
+.diffScroll {
+    background: var(--theme-elevation-50);
+    color: var(--theme-text);
+    flex: 1 1 auto;
+    font-size: 12px;
+    line-height: 1.5;
+    min-height: 260px;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.diffRows {
+    display: grid;
+    font-family: monospace;
+    min-width: 100%;
+    padding: 0;
+}
+
+.diffRow {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    min-width: 100%;
+}
+
+.diffLine {
+    display: block;
+    min-height: 18px;
+    min-width: 0;
+    overflow: hidden;
+    padding: 0;
+    text-overflow: clip;
+    white-space: pre;
+}
+
+.diffPathBadge {
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 3px;
+    color: var(--theme-elevation-700);
+    display: block;
+    font-family: monospace;
+    font-size: 11px;
+    line-height: 18px;
+    margin: 2px 6px 1px;
+    max-width: calc(100% - 12px);
+    overflow: hidden;
+    padding: 0 6px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.diffLineContent {
+    display: inline-block;
+    min-width: var(--diff-line-width);
+    transform: translateX(var(--diff-line-offset));
+}
+
+.diffLine + .diffLine {
+    box-shadow: inset 1px 0 0 var(--theme-elevation-150);
+}
+
+.diffLineAdded {
+    background: rgba(39, 132, 90, 0.28);
+    border-left: 3px solid rgba(39, 132, 90, 0.92);
+}
+
+.diffLineRemoved {
+    background: rgba(160, 26, 26, 0.28);
+    border-left: 3px solid rgba(136, 18, 18, 0.96);
+}
+
+.diffLinePlaceholder {
+    background: var(--theme-elevation-50);
+}
+
+.diffCollapsedRow {
+    align-items: center;
+    background: var(--theme-elevation-100);
+    border: 0;
+    border-bottom: 1px solid var(--theme-elevation-150);
+    border-top: 1px solid var(--theme-elevation-150);
+    color: var(--theme-elevation-600);
+    cursor: pointer;
+    display: flex;
+    font: inherit;
+    font-family: monospace;
+    font-size: 12px;
+    gap: 8px;
+    grid-column: 1 / -1;
+    justify-content: center;
+    line-height: 24px;
+    min-height: 24px;
+    padding: 0 10px;
+}
+
+.diffCollapsedRow:hover {
+    background: var(--theme-elevation-150);
+}
+
+.diffCollapsedPath {
+    color: var(--theme-elevation-500);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.horizontalScroll {
+    flex: 0 0 auto;
+    height: 16px;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.horizontalScrollSpacer {
+    height: 1px;
+    min-width: 100%;
+    width: calc(50% + var(--diff-line-width));
+}
+
+@media (max-width: 768px) {
+    .dialogOverlay {
+        padding: 12px;
+    }
+
+    .dialog {
+        max-height: calc(100vh - 24px);
+        max-width: calc(100vw - 24px);
+    }
+
+    .dialogHeader {
+        align-items: stretch;
+        flex-direction: column;
+    }
+
+    .closeButton {
+        align-self: flex-end;
+    }
+
+    .diffScroll {
+        min-height: 180px;
+    }
+
+}

package/dist/components/Icons.d.ts

@@ -3,3 +3,7 @@ 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 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;

package/dist/components/Icons.js

@@ -177,3 +177,90 @@ export function GoogleGeminiIcon(props) {
         d: "M348.374 72.76c-2.846-18.788-17.592-33.533-36.38-36.38c18.788-2.847 33.534-17.593 36.38-36.38c2.847 18.787 17.593 33.533 36.38 36.38c-18.787 2.847-33.533 17.592-36.38 36.38"
     }));
 }
+export function FileDiff(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M14 3v4a1 1 0 0 0 1 1h4"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M12 10l0 4"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M10 12l4 0"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M10 17l4 0"
+    }));
+}
+export function Send(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: "icon icon-tabler icons-tabler-outline icon-tabler-send",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M10 14l11 -11"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"
+    }));
+}
+export function Apply(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: "icon icon-tabler icons-tabler-outline icon-tabler-check",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M5 12l5 5l10 -10"
+    }));
+}
+export function Reject(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: "icon icon-tabler icons-tabler-outline icon-tabler-x",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M18 6l-12 12"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M6 6l12 12"
+    }));
+}

package/dist/components/RecentChangesList.d.ts

@@ -0,0 +1,18 @@
+import type { AIActionProposal } from "./AIActionProposalList.js";
+export type AppliedChange = {
+    action?: AIActionProposal["action"] | null;
+    additions: number;
+    after?: unknown;
+    before?: unknown;
+    collection?: string | null;
+    documentID?: string | null;
+    removals: number;
+    slug?: string | null;
+    title: string;
+    url?: string | null;
+};
+type RecentChangesListProps = {
+    changes: AppliedChange[];
+};
+export declare const RecentChangesList: ({ changes }: RecentChangesListProps) => import("react").JSX.Element;
+export {};