@mvriu5/payload-ai 0.5.8 → 0.5.9

package/dist/components/AIActionProposalList.d.ts

@@ -11,6 +11,7 @@ export type AIActionProposal = {
     slug?: string;
 };
 type AIActionProposalListProps = {
+    apiRoute: string;
     appliedProposalIndexes: number[];
     description?: string;
     error?: string;
@@ -21,5 +22,5 @@ type AIActionProposalListProps = {
     onApply: (proposal: AIActionProposal, index: number) => void;
     proposals: AIActionProposal[];
 };
-export declare const AIActionProposalList: ({ appliedProposalIndexes, description, error, getViewURL, isApplying, onDismiss, onDismissError, onApply, proposals, }: AIActionProposalListProps) => import("react").JSX.Element | null;
+export declare const AIActionProposalList: ({ apiRoute, appliedProposalIndexes, description, error, getViewURL, isApplying, onDismiss, onDismissError, onApply, proposals }: AIActionProposalListProps) => import("react").JSX.Element | null;
 export {};

package/dist/components/AIActionProposalList.js

@@ -1,5 +1,9 @@
 import styles from "./AIActionProposalList.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,46 @@ const getSafeProposalDetails = (proposal)=>{
     }
     return redactedProposal;
 };
-export const AIActionProposalList = ({ appliedProposalIndexes, description, error, getViewURL, isApplying, onDismiss, onDismissError, onApply, proposals })=>{
+export const AIActionProposalList = ({ apiRoute, appliedProposalIndexes, description, error, getViewURL, isApplying, onDismiss, onDismissError, onApply, proposals })=>{
+    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({
+                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", {
@@ -73,22 +113,50 @@ 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")) : null, activeDiff ? /*#__PURE__*/ React.createElement(DiffDialog, {
+        diff: activeDiff.diff,
+        onClose: ()=>setActiveDiff(null),
+        proposal: activeDiff.proposal
+    }) : null);
 };

package/dist/components/AIActionProposalList.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/AIInput.js

@@ -1,13 +1,14 @@
 "use client";
 import { useConfig } from "@payloadcms/ui";
 import { formatAdminURL } from "payload/shared";
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getResolvedAIModelConfig } from "../ai/providerOptions.js";
 import { getSerializableLabel, isInternalCollection } from "../payload/shared.js";
 import { AIActionProposalList } from "./AIActionProposalList.js";
 import styles from "./AIInput.module.css";
 import { CollectionMentionPopover } from "./CollectionMentionPopover.js";
-import { ClaudeIcon, GoogleGeminiIcon, MistralAiIcon, OpenaiIcon } from "./Icons.js";
+import { ClaudeIcon, GoogleGeminiIcon, MistralAiIcon, OpenaiIcon, Send } from "./Icons.js";
+import { RecentChangesList } from "./RecentChangesList.js";
 import { useAISettings } from "./hooks/useAISettings.js";
 import { useDocumentMentionSuggestions } from "./hooks/useDocumentMentionSuggestions.js";
 const collectBlockOptions = ({ fields, parent })=>{
@@ -54,6 +55,34 @@ const getProviderIcon = (provider)=>{
             return null;
     }
 };
+const parseSSEEvent = (chunk)=>{
+    const lines = chunk.split("\n");
+    let eventName = "";
+    const dataLines = [];
+    for (const line of lines){
+        if (line.startsWith("event:")) {
+            eventName = line.slice(6).trim();
+            continue;
+        }
+        if (line.startsWith("data:")) {
+            dataLines.push(line.slice(5).trim());
+        }
+    }
+    if (!eventName) return null;
+    try {
+        const data = JSON.parse(dataLines.join("\n"));
+        if (eventName !== "text" && eventName !== "proposals" && eventName !== "error" && eventName !== "done") {
+            return null;
+        }
+        return {
+            data,
+            event: eventName
+        };
+    } catch  {
+        return null;
+    }
+};
+const sanitizeResponseText = (value)=>value.replace(/\*\*/g, "");
 export const AIInput = ()=>{
     const { config } = useConfig();
     const editorRef = useRef(null);
@@ -75,6 +104,7 @@ export const AIInput = ()=>{
     const [response, setResponse] = useState("");
     const [error, setError] = useState("");
     const [proposals, setProposals] = useState([]);
+    const [appliedChanges, setAppliedChanges] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [isApplying, setIsApplying] = useState(false);
     const enabledCollectionSlugs = config.admin?.custom?.payloadAiPlugin?.collectionSlugs;
@@ -82,6 +112,39 @@ export const AIInput = ()=>{
         enabledCollectionSlugs
     ]);
     const isCollectionMentionEnabled = (slug)=>!enabledCollectionSlugSet || enabledCollectionSlugSet.has(slug);
+    const recentChangesEndpoint = useMemo(()=>formatAdminURL({
+            apiRoute: config.routes.api,
+            path: "/ai-recent-changes"
+        }), [
+        config.routes.api
+    ]);
+    const loadRecentChanges = useCallback(async ()=>{
+        const res = await fetch(recentChangesEndpoint);
+        const result = await res.json().catch(()=>null);
+        if (res.ok && result?.changes) {
+            setAppliedChanges(result.changes);
+        }
+    }, [
+        recentChangesEndpoint
+    ]);
+    useEffect(()=>{
+        void loadRecentChanges().catch(()=>undefined);
+    }, [
+        loadRecentChanges
+    ]);
+    useEffect(()=>{
+        if (isLoading || error || proposals.length > 0 || !response) return;
+        const timeout = window.setTimeout(()=>{
+            setResponse("");
+            clearInput();
+        }, 5000);
+        return ()=>window.clearTimeout(timeout);
+    }, [
+        error,
+        isLoading,
+        proposals.length,
+        response
+    ]);
     const collections = config.collections.filter((collection)=>!isInternalCollection(collection.slug)).filter((collection)=>isCollectionMentionEnabled(collection.slug)).map((collection)=>({
             label: getSerializableLabel(collection.labels?.singular, collection.slug),
             slug: collection.slug,
@@ -247,6 +310,9 @@ export const AIInput = ()=>{
         if (!trimmedPrompt) return;
         setIsLoading(true);
         setAppliedProposalIndexes([]);
+        setError("");
+        setProposals([]);
+        setResponse("");
         try {
             const res = await fetch(formatAdminURL({
                 apiRoute: config.routes.api,
@@ -262,15 +328,49 @@ export const AIInput = ()=>{
                 },
                 method: "POST"
             });
-            const result = await res.json();
             if (!res.ok) {
-                setProposals([]);
-                setResponse("");
-                throw new Error(result.error || "AI request failed");
+                const result = await res.json().catch(()=>null);
+                throw new Error(result?.error || "AI request failed");
+            }
+            if (!res.body) {
+                throw new Error("AI response stream is unavailable");
+            }
+            const reader = res.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = "";
+            while(true){
+                const { done, value } = await reader.read();
+                if (done) break;
+                buffer += decoder.decode(value, {
+                    stream: true
+                });
+                const chunks = buffer.split("\n\n");
+                buffer = chunks.pop() || "";
+                for (const chunk of chunks){
+                    const event = parseSSEEvent(chunk);
+                    if (!event) continue;
+                    if (event.event === "text") {
+                        if (event.data.delta) {
+                            setResponse((current)=>current + sanitizeResponseText(event.data.delta || ""));
+                        }
+                        continue;
+                    }
+                    if (event.event === "proposals") {
+                        setProposals(event.data.proposals || []);
+                        continue;
+                    }
+                    if (event.event === "error") {
+                        throw new Error(event.data.error || "AI request failed");
+                    }
+                }
+            }
+            const finalEvent = buffer.trim() ? parseSSEEvent(buffer.trim()) : null;
+            if (finalEvent?.event === "proposals") {
+                setProposals(finalEvent.data.proposals || []);
+            }
+            if (finalEvent?.event === "error") {
+                throw new Error(finalEvent.data.error || "AI request failed");
             }
-            setError("");
-            setResponse(result.text || "");
-            setProposals(result.proposals || []);
         } catch (err) {
             setProposals([]);
             setResponse("");
@@ -305,6 +405,13 @@ export const AIInput = ()=>{
             setError("");
             setProposals([]);
             setResponse("");
+            if (result.change) {
+                setAppliedChanges((current)=>[
+                        result.change,
+                        ...current
+                    ].slice(0, 12));
+            }
+            void loadRecentChanges().catch(()=>undefined);
             clearInput();
         } catch (err) {
             setError(err instanceof Error ? err.message : "Could not apply proposal");
@@ -313,6 +420,8 @@ export const AIInput = ()=>{
         }
     };
     return /*#__PURE__*/ React.createElement("div", {
+        className: styles.chatLayout
+    }, /*#__PURE__*/ React.createElement("div", {
         className: styles.chat
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles.chatHeader
@@ -382,7 +491,11 @@ export const AIInput = ()=>{
         disabled: !prompt.trim() || !settingsProvider || !selectedModel || isLoading,
         onClick: ()=>void handleSubmit(),
         type: "button"
-    }, isLoading ? "Sending..." : "Send")), /*#__PURE__*/ React.createElement(AIActionProposalList, {
+    }, /*#__PURE__*/ React.createElement(Send, {
+        width: 14,
+        height: 14
+    }), isLoading ? "Sending..." : "Send")), /*#__PURE__*/ React.createElement(AIActionProposalList, {
+        apiRoute: config.routes.api,
         appliedProposalIndexes: appliedProposalIndexes,
         description: response,
         error: error,
@@ -400,5 +513,7 @@ export const AIInput = ()=>{
         },
         onApply: (proposal, _index)=>void handleApplyProposal(proposal),
         proposals: proposals
+    })), /*#__PURE__*/ React.createElement(RecentChangesList, {
+        changes: appliedChanges
     }));
 };

package/dist/components/AIInput.module.css

@@ -1,8 +1,15 @@
+.chatLayout {
+    align-items: stretch;
+    display: grid;
+    gap: 16px;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    margin-bottom: 24px;
+    max-width: 1280px;
+}
+
 .chat {
     border: 1px solid var(--theme-elevation-150);
     border-radius: 8px;
-    margin-bottom: 24px;
-    max-width: 920px;
     padding: 20px;
 }
 
@@ -52,7 +59,7 @@
 
 .selectProviderIcon {
     color: var(--theme-text);
-    height: 16px;
+    height: 12px;
     left: 10px;
     pointer-events: none;
     position: absolute;
@@ -67,7 +74,7 @@
     border-radius: 4px;
     color: var(--theme-text);
     font: inherit;
-    min-height: 34px;
+    min-height: 24px;
     min-width: 160px;
     padding: 0 28px 0 34px;
 }
@@ -173,14 +180,23 @@
 }
 
 .chatButton {
+    align-items: center;
     background: var(--theme-text);
     border: 0;
     border-radius: 4px;
     color: var(--theme-bg);
     cursor: pointer;
+    display: inline-flex;
     font: inherit;
-    min-height: 40px;
-    padding: 0 18px;
+    gap: 6px;
+    justify-content: center;
+    line-height: 24px;
+    min-height: 24px;
+    padding: 0 14px;
+}
+
+.chatButton svg {
+    flex: 0 0 auto;
 }
 
 .chatButton:disabled {
@@ -220,6 +236,10 @@
 }
 
 @media (max-width: 768px) {
+    .chatLayout {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
     .chatHeader {
         flex-direction: column;
         gap: 12px;
@@ -251,4 +271,5 @@
     .chatButton {
         align-self: stretch;
     }
+
 }

package/dist/components/DiffDialog.d.ts

@@ -0,0 +1,12 @@
+import type { AIActionProposal } from "./AIActionProposalList.js";
+export type ProposalDiff = {
+    after: unknown;
+    before: unknown;
+};
+type DiffDialogProps = {
+    diff: ProposalDiff;
+    onClose: () => void;
+    proposal: AIActionProposal;
+};
+export declare const DiffDialog: ({ diff, onClose, proposal }: DiffDialogProps) => import("react").JSX.Element;
+export {};