@mvriu5/payload-ai 0.5.9 → 0.5.10

package/dist/components/AIInput.js

@@ -4,11 +4,11 @@ import { formatAdminURL } from "payload/shared";
 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 { ActionToast } from "./ActionToast.js";
 import styles from "./AIInput.module.css";
-import { CollectionMentionPopover } from "./CollectionMentionPopover.js";
-import { ClaudeIcon, GoogleGeminiIcon, MistralAiIcon, OpenaiIcon, Send } from "./Icons.js";
-import { RecentChangesList } from "./RecentChangesList.js";
+import { MentionPopover } from "./MentionPopover.js";
+import { ClaudeIcon, GoogleGeminiIcon, MistralAiIcon, OpenaiIcon, OpenrouterIcon, Send } from "./Icons.js";
+import { RecentChangesList } from "./AuditLogList.js";
 import { useAISettings } from "./hooks/useAISettings.js";
 import { useDocumentMentionSuggestions } from "./hooks/useDocumentMentionSuggestions.js";
 const collectBlockOptions = ({ fields, parent })=>{
@@ -51,6 +51,8 @@ const getProviderIcon = (provider)=>{
             return /*#__PURE__*/ React.createElement(MistralAiIcon, iconProps);
         case "openai":
             return /*#__PURE__*/ React.createElement(OpenaiIcon, iconProps);
+        case "openrouter":
+            return /*#__PURE__*/ React.createElement(OpenrouterIcon, iconProps);
         default:
             return null;
     }
@@ -83,7 +85,83 @@ const parseSSEEvent = (chunk)=>{
     }
 };
 const sanitizeResponseText = (value)=>value.replace(/\*\*/g, "");
-export const AIInput = ()=>{
+const isMentionBoundary = (character)=>{
+    return character === undefined || /\s/.test(character);
+};
+const getActiveMentionRange = (valueBeforeCaret)=>{
+    const caretPosition = valueBeforeCaret.length;
+    for(let index = valueBeforeCaret.length - 1; index >= 0; index -= 1){
+        const character = valueBeforeCaret[index];
+        if (character === "@") {
+            const previousCharacter = valueBeforeCaret[index - 1];
+            const query = valueBeforeCaret.slice(index + 1);
+            if (!isMentionBoundary(previousCharacter)) return null;
+            if (!/^[\w-]*$/.test(query)) return null;
+            return {
+                query,
+                range: {
+                    end: caretPosition,
+                    start: index
+                }
+            };
+        }
+        if (isMentionBoundary(character)) break;
+    }
+    return null;
+};
+const svgNamespace = "http://www.w3.org/2000/svg";
+const auditLogCollectionSlug = "payload-ai-auditlog";
+const appendSvgPath = (svg, d)=>{
+    const path = document.createElementNS(svgNamespace, "path");
+    path.setAttribute("d", d);
+    svg.append(path);
+};
+const createBadgeIcon = (type)=>{
+    if (type === "locale") return null;
+    const svg = document.createElementNS(svgNamespace, "svg");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("class", styles.badgeIcon);
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    if (type === "collection") {
+        appendSvgPath(svg, "M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2");
+    }
+    if (type === "doc") {
+        appendSvgPath(svg, "M14 3v4a1 1 0 0 0 1 1h4");
+        appendSvgPath(svg, "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2");
+    }
+    if (type === "global") {
+        appendSvgPath(svg, "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0");
+        appendSvgPath(svg, "M3.6 9h16.8");
+        appendSvgPath(svg, "M3.6 15h16.8");
+        appendSvgPath(svg, "M11.5 3a17 17 0 0 0 0 18");
+        appendSvgPath(svg, "M12.5 3a17 17 0 0 1 0 18");
+    }
+    if (type === "block") {
+        appendSvgPath(svg, "M14 4a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1l0 -5");
+        appendSvgPath(svg, "M3 14h12a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h3a2 2 0 0 1 2 2v12");
+    }
+    return svg;
+};
+const createBadgePrefix = (suggestion)=>{
+    const prefix = document.createElement("span");
+    const icon = createBadgeIcon(suggestion.type);
+    prefix.className = styles.prefix;
+    if (icon) {
+        prefix.append(icon);
+    }
+    if (suggestion.type === "doc") {
+        prefix.append(document.createTextNode(`${suggestion.collection || "document"}:`));
+    } else if (suggestion.type === "locale") {
+        prefix.textContent = "locale:";
+    }
+    return prefix;
+};
+const AIInput = ()=>{
     const { config } = useConfig();
     const editorRef = useRef(null);
     const mentionPopoverRef = useRef(null);
@@ -99,9 +177,11 @@ export const AIInput = ()=>{
     });
     const [mentionQuery, setMentionQuery] = useState("");
     const [mentionRange, setMentionRange] = useState(null);
+    const [mentionPopoverPosition, setMentionPopoverPosition] = useState(null);
     const [mentions, setMentions] = useState([]);
     const [appliedProposalIndexes, setAppliedProposalIndexes] = useState([]);
     const [response, setResponse] = useState("");
+    const [tokenUsage, setTokenUsage] = useState(null);
     const [error, setError] = useState("");
     const [proposals, setProposals] = useState([]);
     const [appliedChanges, setAppliedChanges] = useState([]);
@@ -114,15 +194,18 @@ export const AIInput = ()=>{
     const isCollectionMentionEnabled = (slug)=>!enabledCollectionSlugSet || enabledCollectionSlugSet.has(slug);
     const recentChangesEndpoint = useMemo(()=>formatAdminURL({
             apiRoute: config.routes.api,
-            path: "/ai-recent-changes"
+            path: "/ai-audit-log"
         }), [
         config.routes.api
     ]);
+    const allChangesURL = useMemo(()=>`${config.routes.admin || "/admin"}/collections/${auditLogCollectionSlug}`, [
+        config.routes.admin
+    ]);
     const loadRecentChanges = useCallback(async ()=>{
         const res = await fetch(recentChangesEndpoint);
         const result = await res.json().catch(()=>null);
         if (res.ok && result?.changes) {
-            setAppliedChanges(result.changes);
+            setAppliedChanges(result.changes.slice(0, 10));
         }
     }, [
         recentChangesEndpoint
@@ -155,6 +238,31 @@ export const AIInput = ()=>{
             slug: global.slug,
             type: "global"
         })) || [];
+    const localizationConfig = config.localization;
+    const localesConfig = localizationConfig?.locales ?? [];
+    const locales = localesConfig.flatMap((locale)=>{
+        if (typeof locale === "string") {
+            return [
+                {
+                    isDefault: locale === localizationConfig?.defaultLocale,
+                    label: locale,
+                    slug: locale,
+                    type: "locale"
+                }
+            ];
+        }
+        if (!locale || typeof locale !== "object") return [];
+        const slug = typeof locale.code === "string" ? locale.code : typeof locale.label === "string" ? locale.label : null;
+        if (!slug) return [];
+        return [
+            {
+                isDefault: slug === localizationConfig?.defaultLocale,
+                label: getSerializableLabel(locale.label, slug),
+                slug,
+                type: "locale"
+            }
+        ];
+    });
     const blocks = [
         ...config.collections.filter((collection)=>isCollectionMentionEnabled(collection.slug)).flatMap((collection)=>collectBlockOptions({
                 fields: collection.fields,
@@ -168,11 +276,12 @@ export const AIInput = ()=>{
     const mentionOptions = [
         ...collections,
         ...globals,
-        ...blocks
+        ...blocks,
+        ...locales
     ];
     const normalizedMentionQuery = mentionQuery.toLowerCase();
     const filteredCollections = collections.filter((collection)=>collection.slug.toLowerCase().includes(normalizedMentionQuery) || collection.label.toLowerCase().includes(normalizedMentionQuery));
-    const filteredMentionOptions = mentionOptions.filter((option)=>option.slug.toLowerCase().includes(normalizedMentionQuery));
+    const filteredMentionOptions = mentionOptions.filter((option)=>option.slug.toLowerCase().includes(normalizedMentionQuery) || option.label.toLowerCase().includes(normalizedMentionQuery));
     const documentSuggestionCollection = filteredCollections.length === 1 ? filteredCollections[0]?.slug : null;
     const { documentSuggestions, resetDocumentSuggestions } = useDocumentMentionSuggestions({
         apiRoute: config.routes.api,
@@ -184,14 +293,14 @@ export const AIInput = ()=>{
         ...filteredMentionOptions,
         ...documentSuggestions
     ];
-    const getCaretOffset = (element)=>{
+    const getTextBeforeCaret = (element)=>{
         const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0) return 0;
+        if (!selection || selection.rangeCount === 0) return "";
         const range = selection.getRangeAt(0);
         const clonedRange = range.cloneRange();
         clonedRange.selectNodeContents(element);
         clonedRange.setEnd(range.endContainer, range.endOffset);
-        return clonedRange.toString().length;
+        return clonedRange.toString();
     };
     const getTextNodeAtOffset = (element, offset)=>{
         const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
@@ -215,6 +324,28 @@ export const AIInput = ()=>{
             offset: 0
         };
     };
+    const updateMentionPopoverPosition = useCallback((range)=>{
+        const editor = editorRef.current;
+        const popover = mentionPopoverRef.current;
+        if (!editor || !popover || !range) {
+            setMentionPopoverPosition(null);
+            return;
+        }
+        const startPosition = getTextNodeAtOffset(editor, range.start);
+        const anchorRange = document.createRange();
+        anchorRange.setStart(startPosition.node, startPosition.offset);
+        anchorRange.setEnd(startPosition.node, startPosition.offset);
+        const editorRect = editor.getBoundingClientRect();
+        const anchorRect = anchorRange.getBoundingClientRect();
+        const fallbackLeft = Math.max(0, anchorRect.left - editorRect.left + 12);
+        const fallbackTop = Math.max(0, anchorRect.bottom - editorRect.top + 20);
+        const popoverWidth = popover.offsetWidth || 260;
+        const maxLeft = Math.max(0, editor.clientWidth - popoverWidth);
+        setMentionPopoverPosition({
+            left: Math.min(fallbackLeft, maxLeft),
+            top: fallbackTop
+        });
+    }, []);
     const replaceTextRangeWithBadge = ({ badge, editor, end, start })=>{
         const startPosition = getTextNodeAtOffset(editor, start);
         const endPosition = getTextNodeAtOffset(editor, end);
@@ -232,21 +363,41 @@ export const AIInput = ()=>{
         selection?.removeAllRanges();
         selection?.addRange(caretRange);
     };
-    const updateMentionState = (value, caretPosition)=>{
-        const valueBeforeCaret = value.slice(0, caretPosition);
-        const match = /(?:^|\s)@([\w-]*)$/.exec(valueBeforeCaret);
-        if (!match || typeof match.index !== "number") {
+    const updateMentionState = (valueBeforeCaret)=>{
+        const activeMention = getActiveMentionRange(valueBeforeCaret);
+        if (!activeMention) {
             setMentionQuery("");
             setMentionRange(null);
+            setMentionPopoverPosition(null);
             return;
         }
-        const atIndex = valueBeforeCaret.lastIndexOf("@");
-        setMentionQuery(match[1] || "");
-        setMentionRange({
-            end: caretPosition,
-            start: atIndex
-        });
+        setMentionQuery(activeMention.query);
+        setMentionRange(activeMention.range);
     };
+    useEffect(()=>{
+        if (!mentionRange) {
+            setMentionPopoverPosition(null);
+            return;
+        }
+        updateMentionPopoverPosition(mentionRange);
+    }, [
+        mentionRange,
+        mentionSuggestions.length,
+        updateMentionPopoverPosition
+    ]);
+    useEffect(()=>{
+        if (!mentionRange) return;
+        const updatePosition = ()=>updateMentionPopoverPosition(mentionRange);
+        window.addEventListener("resize", updatePosition);
+        window.addEventListener("scroll", updatePosition, true);
+        return ()=>{
+            window.removeEventListener("resize", updatePosition);
+            window.removeEventListener("scroll", updatePosition, true);
+        };
+    }, [
+        mentionRange,
+        updateMentionPopoverPosition
+    ]);
     const clearInput = ()=>{
         setPrompt("");
         setMentions([]);
@@ -265,12 +416,12 @@ export const AIInput = ()=>{
     const insertMention = (suggestion)=>{
         const editor = editorRef.current;
         if (!mentionRange || !editor) return;
-        const beforeMention = prompt.slice(0, mentionRange.start);
-        const afterMention = prompt.slice(mentionRange.end);
+        const currentValue = editor.innerText;
+        const beforeMention = currentValue.slice(0, mentionRange.start);
+        const afterMention = currentValue.slice(mentionRange.end);
         const badgeType = suggestion.type === "doc" ? "document" : suggestion.type;
         const badgePrefix = `${badgeType}:`;
         const badgeText = `${badgePrefix} ${suggestion.label}`;
-        const promptText = suggestion.type === "doc" ? `${badgeText} (${suggestion.collection}/${suggestion.id})` : badgeText;
         const badge = document.createElement("span");
         badge.className = [
             styles.badge,
@@ -278,10 +429,7 @@ export const AIInput = ()=>{
             styles.inlineBadge
         ].join(" ");
         badge.contentEditable = "false";
-        badge.append(Object.assign(document.createElement("span"), {
-            className: styles.prefix,
-            textContent: `${badgePrefix} `
-        }), Object.assign(document.createElement("span"), {
+        badge.append(createBadgePrefix(suggestion), Object.assign(document.createElement("span"), {
             className: styles.name,
             textContent: suggestion.label
         }));
@@ -292,7 +440,7 @@ export const AIInput = ()=>{
             start: mentionRange.start
         });
         editor.focus();
-        setPrompt(`${beforeMention}${promptText} ${afterMention}`);
+        setPrompt(`${beforeMention}${badgeText} ${afterMention}`);
         setMentions((currentMentions)=>{
             const mentionExists = currentMentions.some((mention)=>mention.type === suggestion.type && mention.slug === suggestion.slug && mention.parent === suggestion.parent && mention.collection === suggestion.collection && mention.id === suggestion.id);
             if (mentionExists) return currentMentions;
@@ -303,6 +451,7 @@ export const AIInput = ()=>{
         });
         setMentionQuery("");
         setMentionRange(null);
+        setMentionPopoverPosition(null);
         resetDocumentSuggestions();
     };
     const handleSubmit = async ()=>{
@@ -313,6 +462,7 @@ export const AIInput = ()=>{
         setError("");
         setProposals([]);
         setResponse("");
+        setTokenUsage(null);
         try {
             const res = await fetch(formatAdminURL({
                 apiRoute: config.routes.api,
@@ -338,6 +488,7 @@ export const AIInput = ()=>{
             const reader = res.body.getReader();
             const decoder = new TextDecoder();
             let buffer = "";
+            let receivedProposals = [];
             while(true){
                 const { done, value } = await reader.read();
                 if (done) break;
@@ -356,7 +507,9 @@ export const AIInput = ()=>{
                         continue;
                     }
                     if (event.event === "proposals") {
-                        setProposals(event.data.proposals || []);
+                        receivedProposals = event.data.proposals || [];
+                        setProposals(receivedProposals);
+                        setTokenUsage(event.data.usage || null);
                         continue;
                     }
                     if (event.event === "error") {
@@ -366,14 +519,20 @@ export const AIInput = ()=>{
             }
             const finalEvent = buffer.trim() ? parseSSEEvent(buffer.trim()) : null;
             if (finalEvent?.event === "proposals") {
-                setProposals(finalEvent.data.proposals || []);
+                receivedProposals = finalEvent.data.proposals || [];
+                setProposals(receivedProposals);
+                setTokenUsage(finalEvent.data.usage || null);
             }
             if (finalEvent?.event === "error") {
                 throw new Error(finalEvent.data.error || "AI request failed");
             }
+            if (receivedProposals.length === 0) {
+                clearInput();
+            }
         } catch (err) {
             setProposals([]);
             setResponse("");
+            setTokenUsage(null);
             setError(err instanceof Error ? err.message : "AI request failed");
         } finally{
             setIsLoading(false);
@@ -388,7 +547,10 @@ export const AIInput = ()=>{
                 path: "/ai-apply-action"
             }), {
                 body: JSON.stringify({
-                    proposal
+                    aiResponse: response,
+                    prompt,
+                    proposal,
+                    tokenUsage
                 }),
                 headers: {
                     "Content-Type": "application/json"
@@ -405,11 +567,12 @@ export const AIInput = ()=>{
             setError("");
             setProposals([]);
             setResponse("");
+            setTokenUsage(null);
             if (result.change) {
                 setAppliedChanges((current)=>[
                         result.change,
                         ...current
-                    ].slice(0, 12));
+                    ].slice(0, 10));
             }
             void loadRecentChanges().catch(()=>undefined);
             clearInput();
@@ -443,7 +606,7 @@ export const AIInput = ()=>{
             if (!value.trim()) {
                 setMentions([]);
             }
-            updateMentionState(value, getCaretOffset(event.currentTarget));
+            updateMentionState(getTextBeforeCaret(event.currentTarget));
         },
         onKeyDown: (event)=>{
             if (event.key === "ArrowDown" && mentionRange && mentionSuggestions.length > 0) {
@@ -462,11 +625,15 @@ export const AIInput = ()=>{
         ref: editorRef,
         role: "textbox",
         suppressContentEditableWarning: true
-    })), mentionRange ? /*#__PURE__*/ React.createElement(CollectionMentionPopover, {
+    })), mentionRange && /*#__PURE__*/ React.createElement(MentionPopover, {
         containerRef: mentionPopoverRef,
         onSelect: insertMention,
+        style: mentionPopoverPosition ? {
+            left: `${mentionPopoverPosition.left}px`,
+            top: `${mentionPopoverPosition.top}px`
+        } : undefined,
         suggestions: mentionSuggestions
-    }) : null), /*#__PURE__*/ React.createElement("div", {
+    })), /*#__PURE__*/ React.createElement("div", {
         className: styles.chatActionsRow
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles.settings
@@ -494,7 +661,7 @@ export const AIInput = ()=>{
     }, /*#__PURE__*/ React.createElement(Send, {
         width: 14,
         height: 14
-    }), isLoading ? "Sending..." : "Send")), /*#__PURE__*/ React.createElement(AIActionProposalList, {
+    }), isLoading ? "Sending..." : "Send")), /*#__PURE__*/ React.createElement(ActionToast, {
         apiRoute: config.routes.api,
         appliedProposalIndexes: appliedProposalIndexes,
         description: response,
@@ -506,14 +673,18 @@ export const AIInput = ()=>{
             setError("");
             setProposals([]);
             setResponse("");
+            setTokenUsage(null);
             clearInput();
         },
         onDismissError: ()=>{
             setError("");
         },
         onApply: (proposal, _index)=>void handleApplyProposal(proposal),
-        proposals: proposals
+        proposals: proposals,
+        tokenUsage: tokenUsage
     })), /*#__PURE__*/ React.createElement(RecentChangesList, {
+        allChangesURL: allChangesURL,
         changes: appliedChanges
     }));
 };
+export default AIInput;

package/dist/components/AIInput.module.css

@@ -1,5 +1,5 @@
 .chatLayout {
-    align-items: stretch;
+    align-items: start;
     display: grid;
     gap: 16px;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -152,7 +152,16 @@
 }
 
 .prefix {
+    align-items: center;
     color: var(--theme-elevation-500);
+    display: inline-flex;
+    gap: 3px;
+}
+
+.badgeIcon {
+    flex: 0 0 auto;
+    height: 12px;
+    width: 12px;
 }
 
 .name {
@@ -179,6 +188,11 @@
     border-color: color-mix(in srgb, #7a5c9e 28%, var(--theme-elevation-150));
 }
 
+.locale {
+    background: color-mix(in srgb, #2f5da8 12%, var(--theme-bg));
+    border-color: color-mix(in srgb, #2f5da8 28%, var(--theme-elevation-150));
+}
+
 .chatButton {
     align-items: center;
     background: var(--theme-text);

package/dist/components/APIKeyField.d.ts

@@ -0,0 +1,3 @@
+import type { TextFieldClientComponent } from "payload";
+declare const APIKeyField: TextFieldClientComponent;
+export default APIKeyField;

package/dist/components/{AIApiKeyField.js → APIKeyField.js}

@@ -7,15 +7,13 @@ const getFieldClassName = ({ className, isReadOnly, showError })=>[
         showError ? "error" : null,
         isReadOnly ? "read-only" : null
     ].filter(Boolean).join(" ");
-export const AIApiKeyField = ({ field, inputRef, path, readOnly })=>{
+const APIKeyField = ({ field, inputRef, path, readOnly })=>{
     const { disabled, errorMessage, setValue, showError, value } = useField({
         path
     });
     const fieldID = `field-${path.replace(/\./g, "__")}`;
     const isReadOnly = readOnly || disabled || field.admin?.disabled;
-    const handleChange = (event)=>{
-        setValue(event.target.value);
-    };
+    const handleChange = (event)=>setValue(event.target.value);
     return /*#__PURE__*/ React.createElement("div", {
         className: getFieldClassName({
             className: field.admin?.className,
@@ -45,3 +43,4 @@ export const AIApiKeyField = ({ field, inputRef, path, readOnly })=>{
         className: "field-description"
     }, field.admin?.description?.toString())));
 };
+export default APIKeyField;

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,4 +1,4 @@
-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";
@@ -19,7 +19,7 @@ const getSafeProposalDetails = (proposal)=>{
     }
     return redactedProposal;
 };
-export const AIActionProposalList = ({ apiRoute, 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);
@@ -47,6 +47,7 @@ export const AIActionProposalList = ({ apiRoute, appliedProposalIndexes, descrip
                 throw new Error(result?.error || "Could not load proposal diff.");
             }
             setActiveDiff({
+                change: null,
                 diff: {
                     after: result.after,
                     before: result.before
@@ -77,13 +78,13 @@ export const AIActionProposalList = ({ apiRoute, appliedProposalIndexes, descrip
         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", {
@@ -144,7 +145,7 @@ export const AIActionProposalList = ({ apiRoute, appliedProposalIndexes, descrip
             height: 16,
             width: 16
         })))));
-    }), diffError ? /*#__PURE__*/ React.createElement("div", {
+    }), diffError && /*#__PURE__*/ React.createElement("div", {
         className: `${styles.item} ${styles.errorItem}`
     }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
         className: styles.label
@@ -154,9 +155,10 @@ export const AIActionProposalList = ({ apiRoute, appliedProposalIndexes, descrip
         className: styles.button,
         onClick: ()=>setDiffError(""),
         type: "button"
-    }, "Dismiss")) : null, activeDiff ? /*#__PURE__*/ React.createElement(DiffDialog, {
+    }, "Dismiss")), activeDiff && /*#__PURE__*/ React.createElement(DiffDialog, {
         diff: activeDiff.diff,
         onClose: ()=>setActiveDiff(null),
-        proposal: activeDiff.proposal
-    }) : null);
+        proposal: activeDiff.proposal,
+        tokenUsage: tokenUsage || undefined
+    }));
 };

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 {};