@mvriu5/payload-ai 1.2.0 → 1.3.2

package/dist/components/hooks/useAIChatStream.js

@@ -0,0 +1,217 @@
+import { formatAdminURL } from "payload/shared";
+import { useCallback, useState } from "react";
+const responseOnlyToastCooldownMs = 10000;
+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 (![
+            "text",
+            "proposals",
+            "error",
+            "done",
+            "debug"
+        ].includes(eventName)) {
+            return null;
+        }
+        return {
+            data,
+            event: eventName
+        };
+    } catch  {
+        return null;
+    }
+};
+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 getChatDebugMessage = (debugInfo)=>{
+    if (debugInfo.toolFailures?.length) {
+        return debugInfo.toolFailures[0]?.message || getDebugReasonLabel(debugInfo.reason);
+    }
+    return getDebugReasonLabel(debugInfo.reason);
+};
+export const useAIChatStream = ({ apiRoute, clearInput, mentionsRef, prompt, selectedModel })=>{
+    const [response, setResponse] = useState("");
+    const [tokenUsage, setTokenUsage] = useState(null);
+    const [error, setError] = useState("");
+    const [proposals, setProposals] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const resetChatState = useCallback(()=>{
+        setError("");
+        setProposals([]);
+        setResponse("");
+        setTokenUsage(null);
+    }, []);
+    const dismissChat = useCallback(()=>{
+        resetChatState();
+        clearInput();
+    }, [
+        clearInput,
+        resetChatState
+    ]);
+    const submit = useCallback(async ({ attachments = [] } = {})=>{
+        const trimmedPrompt = prompt.trim();
+        if (!trimmedPrompt) return;
+        setIsLoading(true);
+        resetChatState();
+        try {
+            const res = await fetch(formatAdminURL({
+                apiRoute,
+                path: "/ai-chat"
+            }), {
+                body: JSON.stringify({
+                    ...attachments.length > 0 ? {
+                        attachments
+                    } : {},
+                    mentions: mentionsRef.current,
+                    model: selectedModel,
+                    prompt: trimmedPrompt
+                }),
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                method: "POST"
+            });
+            if (!res.ok) {
+                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 = "";
+            let finalDebugInfo = null;
+            let receivedProposals = [];
+            let receivedText = "";
+            let receivedVisibleText = "";
+            const handleEvent = (event)=>{
+                if (event.event === "text") {
+                    if (!event.data.delta) return;
+                    const nextDelta = event.data.delta.replace(/\*\*/g, "");
+                    receivedText += nextDelta;
+                    receivedVisibleText += nextDelta.replace(/\s+/g, "");
+                    setResponse((current)=>current + nextDelta);
+                    return;
+                }
+                if (event.event === "proposals") {
+                    const incoming = event.data.proposals || [];
+                    const grouped = new Map();
+                    [
+                        ...receivedProposals,
+                        ...incoming
+                    ].forEach((p)=>{
+                        const key = [
+                            p.action,
+                            p.collection ?? "",
+                            p.slug ?? "",
+                            p.id ?? "",
+                            p.label
+                        ].join("|");
+                        if (!grouped.has(key)) {
+                            grouped.set(key, p);
+                        }
+                    });
+                    receivedProposals = Array.from(grouped.values());
+                    setProposals(receivedProposals);
+                    setTokenUsage(event.data.usage ?? null);
+                    return;
+                }
+                if (event.event === "debug") {
+                    finalDebugInfo = event.data;
+                    if ((event.data.proposalCount || 0) === 0 && !receivedVisibleText) {
+                        if (event.data.reason === "tool_validation_failed") {
+                            setResponse(getChatDebugMessage(event.data));
+                            window.setTimeout(()=>setResponse(""), responseOnlyToastCooldownMs);
+                        } else {
+                            setResponse("No action needed");
+                        }
+                    }
+                    return;
+                }
+                if (event.event === "error") {
+                    throw new Error(event.data.error || "AI request failed");
+                }
+            };
+            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) handleEvent(event);
+                }
+            }
+            const finalEvent = buffer.trim() ? parseSSEEvent(buffer.trim()) : null;
+            if (finalEvent) handleEvent(finalEvent);
+            if (receivedProposals.length === 0) {
+                if (finalDebugInfo) {
+                    const debugMessage = getChatDebugMessage(finalDebugInfo);
+                    const isMeaningfulVisibleText = receivedVisibleText.length >= 12;
+                    const trimmedReceivedText = receivedText.trim();
+                    setResponse((current)=>!isMeaningfulVisibleText || trimmedReceivedText.length < 12 ? debugMessage : current.trim() || debugMessage);
+                } else {
+                    setResponse("No action needed");
+                }
+                clearInput();
+            }
+        } catch (err) {
+            setProposals([]);
+            setResponse("");
+            setTokenUsage(null);
+            setError(err instanceof Error ? err.message : "AI request failed");
+        } finally{
+            setIsLoading(false);
+        }
+    }, [
+        apiRoute,
+        clearInput,
+        mentionsRef,
+        prompt,
+        resetChatState,
+        selectedModel
+    ]);
+    return {
+        dismissChat,
+        error,
+        isLoading,
+        proposals,
+        resetChatState,
+        response,
+        setError,
+        setProposals,
+        setResponse,
+        setTokenUsage,
+        submit,
+        tokenUsage
+    };
+};

package/dist/components/hooks/useAISettings.js

@@ -12,59 +12,60 @@ const storeModel = (provider, model)=>{
     if (typeof window === "undefined") return;
     window.localStorage.setItem(getStoredModelKey(provider), model);
 };
+const fetchCurrentUserProvider = async ({ adminUserSlug, apiRoute, signal })=>{
+    const res = await fetch(formatAdminURL({
+        apiRoute,
+        path: `/${adminUserSlug}/me`
+    }), {
+        signal
+    });
+    if (!res.ok) return null;
+    const result = await res.json();
+    const provider = result.user?.aiProvider;
+    return provider && isAIProvider(provider) ? provider : null;
+};
 export const useAISettings = ({ adminUserSlug, apiRoute, defaultModels })=>{
-    const [settingsProvider, setSettingsProvider] = useState(null);
+    const [fetchedProvider, setFetchedProvider] = useState(null);
     const [selectedModel, setSelectedModel] = useState("");
     const setStoredSelectedModel = (model)=>{
         setSelectedModel(model);
-        if (settingsProvider && model) {
-            storeModel(settingsProvider, model);
+        if (fetchedProvider && model) {
+            storeModel(fetchedProvider, model);
         }
     };
     useEffect(()=>{
-        if (!adminUserSlug) {
-            setSettingsProvider(null);
-            setSelectedModel("");
-            return;
-        }
+        if (!adminUserSlug) return;
         const abortController = new AbortController();
-        const fetchCurrentUser = async ()=>{
+        const loadCurrentUserProvider = async ()=>{
             try {
-                const res = await fetch(formatAdminURL({
+                const provider = await fetchCurrentUserProvider({
+                    adminUserSlug,
                     apiRoute,
-                    path: `/${adminUserSlug}/me`
-                }), {
                     signal: abortController.signal
                 });
-                if (!res.ok) {
-                    setSettingsProvider(null);
-                    setSelectedModel("");
-                    return;
-                }
-                const result = await res.json();
-                const provider = result.user?.aiProvider;
-                if (!provider || !isAIProvider(provider)) {
-                    setSettingsProvider(null);
+                if (!provider) {
+                    setFetchedProvider(null);
                     setSelectedModel("");
                     return;
                 }
-                setSettingsProvider(provider);
+                setFetchedProvider(provider);
                 setSelectedModel(getStoredModel(provider) || defaultModels[provider]);
             } catch (err) {
                 if (isAbortError(err)) return;
-                setSettingsProvider(null);
+                setFetchedProvider(null);
                 setSelectedModel("");
             }
         };
-        void fetchCurrentUser();
+        void loadCurrentUserProvider();
         return ()=>abortController.abort();
     }, [
         adminUserSlug,
         apiRoute,
         defaultModels
     ]);
+    const settingsProvider = adminUserSlug ? fetchedProvider : null;
     return {
-        selectedModel,
+        selectedModel: adminUserSlug ? selectedModel : "",
         setSelectedModel: setStoredSelectedModel,
         settingsProvider
     };

package/dist/components/hooks/useAuditLog.d.ts

@@ -0,0 +1,11 @@
+import type { AppliedChange } from "../audit-log-list/AuditLogList.js";
+export declare const useAuditLog: ({ adminRoute, apiRoute }: {
+    adminRoute?: string;
+    apiRoute: string;
+}) => {
+    allChangesURL: string;
+    appliedChanges: AppliedChange[];
+    loadRecentChanges: () => Promise<void>;
+    prependChange: (change: AppliedChange) => void;
+    setAppliedChanges: import("react").Dispatch<import("react").SetStateAction<AppliedChange[]>>;
+};

package/dist/components/hooks/useAuditLog.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { formatAdminURL } from "payload/shared";
+export const useAuditLog = ({ adminRoute, apiRoute })=>{
+    const [appliedChanges, setAppliedChanges] = useState([]);
+    const recentChangesEndpoint = useMemo(()=>formatAdminURL({
+            apiRoute,
+            path: "/ai-audit-log"
+        }), [
+        apiRoute
+    ]);
+    const allChangesURL = useMemo(()=>`${adminRoute || "/admin"}/collections/$payload-ai-auditlog`, [
+        adminRoute
+    ]);
+    const loadRecentChanges = useCallback(async ()=>{
+        const res = await fetch(recentChangesEndpoint);
+        const result = await res.json().catch(()=>null);
+        if (res.ok && result?.changes) {
+            setAppliedChanges(result.changes.slice(0, 8));
+        }
+    }, [
+        recentChangesEndpoint
+    ]);
+    useEffect(()=>{
+        void loadRecentChanges().catch(()=>undefined);
+    }, [
+        loadRecentChanges
+    ]);
+    const prependChange = useCallback((change)=>{
+        setAppliedChanges((current)=>[
+                change,
+                ...current
+            ].slice(0, 8));
+    }, []);
+    return {
+        allChangesURL,
+        appliedChanges,
+        loadRecentChanges,
+        prependChange,
+        setAppliedChanges
+    };
+};

package/dist/components/hooks/useDocumentMentionSuggestions.d.ts

@@ -1,4 +1,4 @@
-import type { MentionOption } from "../MentionPopover.js";
+import type { MentionOption } from "../mention-popover/MentionPopover.js";
 type MentionRange = {
     end: number;
     start: number;

package/dist/components/hooks/useDocumentMentionSuggestions.js

@@ -2,52 +2,56 @@
 import { formatAdminURL } from "payload/shared";
 import { useEffect, useState } from "react";
 import { isAbortError } from "../../payload/shared.js";
+const fetchDocumentMentionSuggestions = async ({ apiRoute, collectionSlug, query, signal })=>{
+    const res = await fetch(formatAdminURL({
+        apiRoute,
+        path: "/ai-mention-suggestion"
+    }), {
+        body: JSON.stringify({
+            collectionSlug,
+            query
+        }),
+        headers: {
+            "Content-Type": "application/json"
+        },
+        method: "POST",
+        signal
+    });
+    if (!res.ok) return [];
+    const result = await res.json();
+    return result.suggestions || [];
+};
 export const useDocumentMentionSuggestions = ({ apiRoute, documentSuggestionCollection, mentionQuery, mentionRange })=>{
     const [documentSuggestions, setDocumentSuggestions] = useState([]);
+    const trimmedQuery = mentionQuery.trim();
+    const shouldLoadSuggestions = Boolean(mentionRange && (trimmedQuery || documentSuggestionCollection));
     useEffect(()=>{
-        const trimmedQuery = mentionQuery.trim();
-        if (!mentionRange || !trimmedQuery && !documentSuggestionCollection) {
-            setDocumentSuggestions([]);
-            return;
-        }
+        if (!shouldLoadSuggestions) return;
         const abortController = new AbortController();
-        const fetchDocumentSuggestions = async ()=>{
+        const loadDocumentSuggestions = async ()=>{
             try {
-                const res = await fetch(formatAdminURL({
+                const suggestions = await fetchDocumentMentionSuggestions({
                     apiRoute,
-                    path: "/ai-mention-suggestion"
-                }), {
-                    body: JSON.stringify({
-                        collectionSlug: documentSuggestionCollection,
-                        query: documentSuggestionCollection ? "" : trimmedQuery
-                    }),
-                    headers: {
-                        "Content-Type": "application/json"
-                    },
-                    method: "POST",
+                    collectionSlug: documentSuggestionCollection,
+                    query: documentSuggestionCollection ? "" : trimmedQuery,
                     signal: abortController.signal
                 });
-                if (!res.ok) {
-                    setDocumentSuggestions([]);
-                    return;
-                }
-                const result = await res.json();
-                setDocumentSuggestions(result.suggestions || []);
+                setDocumentSuggestions(suggestions);
             } catch (err) {
                 if (isAbortError(err)) return;
                 setDocumentSuggestions([]);
             }
         };
-        void fetchDocumentSuggestions();
+        void loadDocumentSuggestions();
         return ()=>abortController.abort();
     }, [
         apiRoute,
         documentSuggestionCollection,
-        mentionQuery,
-        mentionRange
+        shouldLoadSuggestions,
+        trimmedQuery
     ]);
     return {
-        documentSuggestions,
+        documentSuggestions: shouldLoadSuggestions ? documentSuggestions : [],
         resetDocumentSuggestions: ()=>setDocumentSuggestions([])
     };
 };

package/dist/components/hooks/useMentions.d.ts

@@ -0,0 +1,58 @@
+import { type RefObject } from "react";
+import type { MentionOption } from "../mention-popover/MentionPopover.js";
+export type Mention = {
+    collection?: string;
+    id?: string;
+    isDefault?: boolean;
+    label: string;
+    parent?: string;
+    slug: string;
+    type: "collection" | "doc" | "global" | "locale";
+};
+type MentionRange = {
+    end: number;
+    start: number;
+};
+type LocaleConfig = string | {
+    code?: string;
+    label?: unknown;
+};
+type UseMentionPopoverArgs = {
+    apiRoute: string;
+    config: {
+        collections: Array<{
+            fields: unknown[];
+            labels?: {
+                singular?: unknown;
+            };
+            slug: string;
+        }>;
+        globals?: Array<{
+            fields: unknown[];
+            label?: unknown;
+            slug: string;
+        }>;
+    };
+    defaultLocale?: string;
+    editorRef: RefObject<HTMLDivElement | null>;
+    isCollectionMentionEnabled: (slug: string) => boolean;
+    locales: LocaleConfig[];
+    setPrompt: (value: string) => void;
+    styles: Record<string, string>;
+};
+export declare const getTextBeforeCaret: (element: HTMLElement) => string;
+export declare const useMentions: ({ apiRoute, config, defaultLocale, editorRef, isCollectionMentionEnabled, locales, setPrompt, styles }: UseMentionPopoverArgs) => {
+    clearMentions: () => void;
+    getTextBeforeCaret: (element: HTMLElement) => string;
+    insertMention: (suggestion: MentionOption) => void;
+    mentionPopoverPosition: {
+        left: number;
+        top: number;
+    } | null;
+    mentionQuery: string;
+    mentionRange: MentionRange | null;
+    mentionSuggestions: MentionOption[];
+    mentionsRef: RefObject<Mention[]>;
+    updateMentionState: (valueBeforeCaret: string) => void;
+};
+export {};