@mvriu5/payload-ai 0.5.10 → 1.2.0

package/dist/components/AIInput.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useConfig } from "@payloadcms/ui";
 import { formatAdminURL } from "payload/shared";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -44,15 +45,25 @@ const getProviderIcon = (provider)=>{
     };
     switch(provider){
         case "claude":
-            return /*#__PURE__*/ React.createElement(ClaudeIcon, iconProps);
+            return /*#__PURE__*/ _jsx(ClaudeIcon, {
+                ...iconProps
+            });
         case "google":
-            return /*#__PURE__*/ React.createElement(GoogleGeminiIcon, iconProps);
+            return /*#__PURE__*/ _jsx(GoogleGeminiIcon, {
+                ...iconProps
+            });
         case "mistral":
-            return /*#__PURE__*/ React.createElement(MistralAiIcon, iconProps);
+            return /*#__PURE__*/ _jsx(MistralAiIcon, {
+                ...iconProps
+            });
         case "openai":
-            return /*#__PURE__*/ React.createElement(OpenaiIcon, iconProps);
+            return /*#__PURE__*/ _jsx(OpenaiIcon, {
+                ...iconProps
+            });
         case "openrouter":
-            return /*#__PURE__*/ React.createElement(OpenrouterIcon, iconProps);
+            return /*#__PURE__*/ _jsx(OpenrouterIcon, {
+                ...iconProps
+            });
         default:
             return null;
     }
@@ -73,7 +84,7 @@ const parseSSEEvent = (chunk)=>{
     if (!eventName) return null;
     try {
         const data = JSON.parse(dataLines.join("\n"));
-        if (eventName !== "text" && eventName !== "proposals" && eventName !== "error" && eventName !== "done") {
+        if (eventName !== "text" && eventName !== "proposals" && eventName !== "error" && eventName !== "done" && eventName !== "debug") {
             return null;
         }
         return {
@@ -85,6 +96,59 @@ const parseSSEEvent = (chunk)=>{
     }
 };
 const sanitizeResponseText = (value)=>value.replace(/\*\*/g, "");
+const getDebugReasonLabel = (reason)=>{
+    switch(reason){
+        case "model_did_not_call_tool":
+            return "Model did not create a proposal tool call.";
+        case "proposal_created":
+            return "Proposal created.";
+        case "tool_validation_failed":
+            return "Tool validation failed before a proposal could be created.";
+        case "write_intent_without_tool_call":
+            return "The selected model did not produce the required proposal tool call for this content change.";
+        default:
+            return "Unknown";
+    }
+};
+const getApplyDebugReasonLabel = (reason)=>{
+    switch(reason){
+        case "unauthorized":
+            return "Request was not authorized.";
+        case "missing_proposal":
+            return "No proposal was submitted to apply.";
+        case "invalid_signature":
+            return "Proposal signature was invalid or expired.";
+        case "invalid_proposal_shape":
+            return "Proposal shape was invalid.";
+        case "sensitive_data_in_data":
+        case "sensitive_data_in_localized_data":
+            return "Proposal contained sensitive data.";
+        case "unknown_global":
+            return "Target global was not found.";
+        case "unknown_or_disallowed_collection":
+            return "Target collection is unknown or not allowed.";
+        case "invalid_collection_write_shape":
+            return "Proposal data does not match the target collection schema.";
+        case "invalid_global_write_shape":
+            return "Proposal data does not match the target global schema.";
+        case "localized_create_without_locales":
+            return "Localized create proposal had no locale entries.";
+        case "missing_auth_password":
+            return "Auth create proposal was missing a password.";
+        case "missing_auth_email":
+            return "Auth create proposal was missing an email.";
+        case "payload_operation_failed":
+            return "Payload rejected the write operation.";
+        default:
+            return "Unknown";
+    }
+};
+const getChatDebugMessage = (debugInfo)=>{
+    if (debugInfo.toolFailures?.length) {
+        return debugInfo.toolFailures[0]?.message || getDebugReasonLabel(debugInfo.reason);
+    }
+    return getDebugReasonLabel(debugInfo.reason);
+};
 const isMentionBoundary = (character)=>{
     return character === undefined || /\s/.test(character);
 };
@@ -111,6 +175,7 @@ const getActiveMentionRange = (valueBeforeCaret)=>{
 };
 const svgNamespace = "http://www.w3.org/2000/svg";
 const auditLogCollectionSlug = "payload-ai-auditlog";
+const responseOnlyToastCooldownMs = 10000;
 const appendSvgPath = (svg, d)=>{
     const path = document.createElementNS(svgNamespace, "path");
     path.setAttribute("d", d);
@@ -182,6 +247,8 @@ const AIInput = ()=>{
     const [appliedProposalIndexes, setAppliedProposalIndexes] = useState([]);
     const [response, setResponse] = useState("");
     const [tokenUsage, setTokenUsage] = useState(null);
+    const [chatDebugInfo, setChatDebugInfo] = useState(null);
+    const [applyDebugInfo, setApplyDebugInfo] = useState(null);
     const [error, setError] = useState("");
     const [proposals, setProposals] = useState([]);
     const [appliedChanges, setAppliedChanges] = useState([]);
@@ -220,7 +287,7 @@ const AIInput = ()=>{
         const timeout = window.setTimeout(()=>{
             setResponse("");
             clearInput();
-        }, 5000);
+        }, responseOnlyToastCooldownMs);
         return ()=>window.clearTimeout(timeout);
     }, [
         error,
@@ -293,6 +360,9 @@ const AIInput = ()=>{
         ...filteredMentionOptions,
         ...documentSuggestions
     ];
+    const shouldShowChatDebugInfo = Boolean(chatDebugInfo) && (Boolean(error) || chatDebugInfo?.reason !== "proposal_created");
+    const shouldShowApplyDebugInfo = Boolean(applyDebugInfo) && Boolean(error);
+    const actionToastDescription = response;
     const getTextBeforeCaret = (element)=>{
         const selection = window.getSelection();
         if (!selection || selection.rangeCount === 0) return "";
@@ -463,6 +533,8 @@ const AIInput = ()=>{
         setProposals([]);
         setResponse("");
         setTokenUsage(null);
+        setChatDebugInfo(null);
+        setApplyDebugInfo(null);
         try {
             const res = await fetch(formatAdminURL({
                 apiRoute: config.routes.api,
@@ -488,7 +560,10 @@ const AIInput = ()=>{
             const reader = res.body.getReader();
             const decoder = new TextDecoder();
             let buffer = "";
+            let finalDebugInfo = null;
             let receivedProposals = [];
+            let receivedText = "";
+            let receivedVisibleText = "";
             while(true){
                 const { done, value } = await reader.read();
                 if (done) break;
@@ -502,7 +577,10 @@ const AIInput = ()=>{
                     if (!event) continue;
                     if (event.event === "text") {
                         if (event.data.delta) {
-                            setResponse((current)=>current + sanitizeResponseText(event.data.delta || ""));
+                            const nextDelta = sanitizeResponseText(event.data.delta || "");
+                            receivedText += nextDelta;
+                            receivedVisibleText += nextDelta.replace(/\s+/g, "");
+                            setResponse((current)=>current + nextDelta);
                         }
                         continue;
                     }
@@ -512,6 +590,22 @@ const AIInput = ()=>{
                         setTokenUsage(event.data.usage || null);
                         continue;
                     }
+                    if (event.event === "debug") {
+                        finalDebugInfo = event.data;
+                        setChatDebugInfo(event.data);
+                        if ((event.data.proposalCount || 0) === 0 && !receivedVisibleText) {
+                            // Show specific tool validation message if present, otherwise a generic no‑action message
+                            if (event.data.reason === "tool_validation_failed") {
+                                const msg = getChatDebugMessage(event.data);
+                                setResponse(msg);
+                                // Auto‑clear after the standard toast timeout
+                                window.setTimeout(()=>setResponse(""), responseOnlyToastCooldownMs);
+                            } else {
+                                setResponse("No action needed");
+                            }
+                        }
+                        continue;
+                    }
                     if (event.event === "error") {
                         throw new Error(event.data.error || "AI request failed");
                     }
@@ -523,16 +617,42 @@ const AIInput = ()=>{
                 setProposals(receivedProposals);
                 setTokenUsage(finalEvent.data.usage || null);
             }
+            if (finalEvent?.event === "debug") {
+                finalDebugInfo = finalEvent.data;
+                setChatDebugInfo(finalEvent.data);
+                if ((finalEvent.data.proposalCount || 0) === 0 && !receivedVisibleText) {
+                    // Same logic as above for the final event
+                    if (finalEvent.data.reason === "tool_validation_failed") {
+                        setResponse(getChatDebugMessage(finalEvent.data));
+                    } else {
+                        setResponse("No action needed");
+                    }
+                }
+            }
             if (finalEvent?.event === "error") {
                 throw new Error(finalEvent.data.error || "AI request failed");
             }
             if (receivedProposals.length === 0) {
+                if (finalDebugInfo) {
+                    const debugMessage = getChatDebugMessage(finalDebugInfo);
+                    const isMeaningfulVisibleText = receivedVisibleText.length >= 12;
+                    const trimmedReceivedText = receivedText.trim();
+                    if (!isMeaningfulVisibleText || trimmedReceivedText.length < 12) {
+                        setResponse(debugMessage);
+                    } else {
+                        setResponse((current)=>current.trim() || debugMessage);
+                    }
+                } else {
+                    // Fallback when no debug info is provided (e.g., tool validation failures without a debug event)
+                    setResponse("No action needed");
+                }
                 clearInput();
             }
         } catch (err) {
             setProposals([]);
             setResponse("");
             setTokenUsage(null);
+            setApplyDebugInfo(null);
             setError(err instanceof Error ? err.message : "AI request failed");
         } finally{
             setIsLoading(false);
@@ -561,6 +681,7 @@ const AIInput = ()=>{
             if (!res.ok) {
                 setProposals([]);
                 setResponse("");
+                setApplyDebugInfo(result.debug || null);
                 throw new Error(result.error || "Could not apply proposal");
             }
             setAppliedProposalIndexes([]);
@@ -568,6 +689,8 @@ const AIInput = ()=>{
             setProposals([]);
             setResponse("");
             setTokenUsage(null);
+            setChatDebugInfo(null);
+            setApplyDebugInfo(null);
             if (result.change) {
                 setAppliedChanges((current)=>[
                         result.change,
@@ -582,109 +705,192 @@ const AIInput = ()=>{
             setIsApplying(false);
         }
     };
-    return /*#__PURE__*/ React.createElement("div", {
-        className: styles.chatLayout
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.chat
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.chatHeader
-    }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("h2", {
-        className: styles.chatTitle
-    }, "AI Assistant"), /*#__PURE__*/ React.createElement("p", {
-        className: styles.chatDescription
-    }, "Ask AI to draft, improve, or analyze content."))), /*#__PURE__*/ React.createElement("div", {
-        className: styles.chatInputRow
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.chatInputSurface
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.chatInput,
-        contentEditable: true,
-        "data-placeholder": "Ask AI...",
-        onInput: (event)=>{
-            const value = event.currentTarget.innerText;
-            setPrompt(value);
-            if (!value.trim()) {
-                setMentions([]);
-            }
-            updateMentionState(getTextBeforeCaret(event.currentTarget));
-        },
-        onKeyDown: (event)=>{
-            if (event.key === "ArrowDown" && mentionRange && mentionSuggestions.length > 0) {
-                const firstOption = mentionPopoverRef.current?.querySelector("button");
-                if (firstOption) {
-                    event.preventDefault();
-                    firstOption.focus();
-                    return;
-                }
-            }
-            if (event.key === "Enter" && !event.shiftKey) {
-                event.preventDefault();
-                void handleSubmit();
-            }
-        },
-        ref: editorRef,
-        role: "textbox",
-        suppressContentEditableWarning: true
-    })), mentionRange && /*#__PURE__*/ React.createElement(MentionPopover, {
-        containerRef: mentionPopoverRef,
-        onSelect: insertMention,
-        style: mentionPopoverPosition ? {
-            left: `${mentionPopoverPosition.left}px`,
-            top: `${mentionPopoverPosition.top}px`
-        } : undefined,
-        suggestions: mentionSuggestions
-    })), /*#__PURE__*/ React.createElement("div", {
-        className: styles.chatActionsRow
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.settings
-    }, /*#__PURE__*/ React.createElement("label", {
-        className: styles.setting
-    }, /*#__PURE__*/ React.createElement("span", {
-        className: styles.settingLabel
-    }, "Model"), /*#__PURE__*/ React.createElement("div", {
-        className: styles.selectWrapper
-    }, getProviderIcon(settingsProvider), /*#__PURE__*/ React.createElement("select", {
-        className: styles.select,
-        disabled: !settingsProvider,
-        onChange: (event)=>setSelectedModel(event.target.value),
-        value: selectedModel
-    }, !settingsProvider && /*#__PURE__*/ React.createElement("option", {
-        value: ""
-    }, "Select provider in account settings"), settingsProvider && aiModelConfig.providers[settingsProvider].map((model)=>/*#__PURE__*/ React.createElement("option", {
-            key: model.value,
-            value: model.value
-        }, model.label)))))), /*#__PURE__*/ React.createElement("button", {
-        className: styles.chatButton,
-        disabled: !prompt.trim() || !settingsProvider || !selectedModel || isLoading,
-        onClick: ()=>void handleSubmit(),
-        type: "button"
-    }, /*#__PURE__*/ React.createElement(Send, {
-        width: 14,
-        height: 14
-    }), isLoading ? "Sending..." : "Send")), /*#__PURE__*/ React.createElement(ActionToast, {
-        apiRoute: config.routes.api,
-        appliedProposalIndexes: appliedProposalIndexes,
-        description: response,
-        error: error,
-        getViewURL: getProposalViewURL,
-        isApplying: isApplying,
-        onDismiss: ()=>{
-            setAppliedProposalIndexes([]);
-            setError("");
-            setProposals([]);
-            setResponse("");
-            setTokenUsage(null);
-            clearInput();
-        },
-        onDismissError: ()=>{
-            setError("");
-        },
-        onApply: (proposal, _index)=>void handleApplyProposal(proposal),
-        proposals: proposals,
-        tokenUsage: tokenUsage
-    })), /*#__PURE__*/ React.createElement(RecentChangesList, {
-        allChangesURL: allChangesURL,
-        changes: appliedChanges
-    }));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: styles.chatLayout,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles.chat,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles.chatHeader,
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ _jsx("h2", {
+                                    className: styles.chatTitle,
+                                    children: "AI Assistant"
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: styles.chatDescription,
+                                    children: "Ask AI to draft, improve, or analyze content."
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: styles.chatInputRow,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: styles.chatInputSurface,
+                                children: /*#__PURE__*/ _jsx("div", {
+                                    className: styles.chatInput,
+                                    contentEditable: true,
+                                    "data-placeholder": "Ask AI...",
+                                    onInput: (event)=>{
+                                        const value = event.currentTarget.innerText;
+                                        setPrompt(value);
+                                        if (!value.trim()) {
+                                            setMentions([]);
+                                        }
+                                        updateMentionState(getTextBeforeCaret(event.currentTarget));
+                                    },
+                                    onKeyDown: (event)=>{
+                                        if (event.key === "ArrowDown" && mentionRange && mentionSuggestions.length > 0) {
+                                            const firstOption = mentionPopoverRef.current?.querySelector("button");
+                                            if (firstOption) {
+                                                event.preventDefault();
+                                                firstOption.focus();
+                                                return;
+                                            }
+                                        }
+                                        if (event.key === "Enter" && !event.shiftKey) {
+                                            event.preventDefault();
+                                            void handleSubmit();
+                                        }
+                                    },
+                                    ref: editorRef,
+                                    role: "textbox",
+                                    suppressContentEditableWarning: true
+                                })
+                            }),
+                            mentionRange && /*#__PURE__*/ _jsx(MentionPopover, {
+                                containerRef: mentionPopoverRef,
+                                onSelect: insertMention,
+                                style: mentionPopoverPosition ? {
+                                    left: `${mentionPopoverPosition.left}px`,
+                                    top: `${mentionPopoverPosition.top}px`
+                                } : undefined,
+                                suggestions: mentionSuggestions
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: styles.chatActionsRow,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: styles.settings,
+                                children: /*#__PURE__*/ _jsxs("label", {
+                                    className: styles.setting,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: styles.settingLabel,
+                                            children: "Model"
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: styles.selectWrapper,
+                                            children: [
+                                                getProviderIcon(settingsProvider),
+                                                /*#__PURE__*/ _jsxs("select", {
+                                                    className: styles.select,
+                                                    disabled: !settingsProvider,
+                                                    onChange: (event)=>setSelectedModel(event.target.value),
+                                                    value: selectedModel,
+                                                    children: [
+                                                        !settingsProvider && /*#__PURE__*/ _jsx("option", {
+                                                            value: "",
+                                                            children: "Select provider in account settings"
+                                                        }),
+                                                        settingsProvider && aiModelConfig.providers[settingsProvider].map((model)=>/*#__PURE__*/ _jsx("option", {
+                                                                value: model.value,
+                                                                children: model.label
+                                                            }, model.value))
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs("button", {
+                                className: styles.chatButton,
+                                disabled: !prompt.trim() || !settingsProvider || !selectedModel || isLoading || Boolean(error) || Boolean(actionToastDescription) || proposals.length > 0,
+                                onClick: ()=>void handleSubmit(),
+                                type: "button",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Send, {
+                                        width: 14,
+                                        height: 14
+                                    }),
+                                    isLoading ? "Sending..." : "Send"
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(ActionToast, {
+                        apiRoute: config.routes.api,
+                        appliedProposalIndexes: appliedProposalIndexes,
+                        description: actionToastDescription,
+                        error: error,
+                        getViewURL: getProposalViewURL,
+                        isApplying: isApplying,
+                        onDismiss: ()=>{
+                            setAppliedProposalIndexes([]);
+                            setError("");
+                            setProposals([]);
+                            setResponse("");
+                            setTokenUsage(null);
+                            setChatDebugInfo(null);
+                            setApplyDebugInfo(null);
+                            clearInput();
+                        },
+                        onDismissError: ()=>{
+                            setError("");
+                        },
+                        onApply: (proposal, _index)=>void handleApplyProposal(proposal),
+                        proposals: proposals,
+                        prompt: prompt,
+                        tokenUsage: tokenUsage
+                    }),
+                    shouldShowApplyDebugInfo && applyDebugInfo && /*#__PURE__*/ _jsxs("div", {
+                        className: styles.debugInfo,
+                        children: [
+                            /*#__PURE__*/ _jsx("strong", {
+                                children: "Apply debug"
+                            }),
+                            /*#__PURE__*/ _jsx("br", {}),
+                            "Reason: ",
+                            getApplyDebugReasonLabel(applyDebugInfo.reason),
+                            /*#__PURE__*/ _jsx("br", {}),
+                            "Phase: ",
+                            applyDebugInfo.phase,
+                            /*#__PURE__*/ _jsx("br", {}),
+                            "Target: ",
+                            applyDebugInfo.collection || applyDebugInfo.slug || "unknown",
+                            applyDebugInfo.id ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx("br", {}),
+                                    "ID: ",
+                                    applyDebugInfo.id
+                                ]
+                            }) : null,
+                            applyDebugInfo.details ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx("br", {}),
+                                    "Details:",
+                                    /*#__PURE__*/ _jsx("pre", {
+                                        className: styles.debugDetails,
+                                        children: JSON.stringify(applyDebugInfo.details, null, 2)
+                                    })
+                                ]
+                            }) : null
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(RecentChangesList, {
+                allChangesURL: allChangesURL,
+                changes: appliedChanges
+            })
+        ]
+    });
 };
 export default AIInput;

package/dist/components/AIInput.module.css

@@ -101,8 +101,10 @@
     background: transparent;
     border: 0;
     color: var(--theme-text);
+    display: block;
     font: inherit;
-    min-height: 84px;
+    height: 84px;
+    overflow-y: auto;
     padding: 0;
     white-space: pre-wrap;
     width: 100%;
@@ -120,7 +122,10 @@
 .chatInputSurface {
     background: var(--theme-input-bg);
     border: 1px solid var(--theme-elevation-150);
+    box-sizing: border-box;
     border-radius: 4px;
+    height: 108px;
+    overflow: hidden;
     padding: 12px;
     width: 100%;
 }
@@ -239,6 +244,11 @@
     white-space: pre-wrap;
 }
 
+.debugDetails {
+    margin: 8px 0 0;
+    white-space: pre-wrap;
+}
+
 .chatResponse {
     background: var(--theme-elevation-50);
     border: 1px solid var(--theme-elevation-100);
@@ -285,5 +295,4 @@
     .chatButton {
         align-self: stretch;
     }
-
 }