@mvriu5/payload-ai 1.2.0 → 1.4.0

package/dist/components/ai-input/AIInput.js

@@ -0,0 +1,548 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, useConfig, useDocumentForm, useDocumentInfo, useLocale } from "@payloadcms/ui";
+import { formatAdminURL } from "payload/shared";
+import { useEffect, useRef, useState } from "react";
+import { mergeData } from "../../payload/shared.js";
+import { ActionToast } from "../action-toast/ActionToast.js";
+import { useAIChatStream } from "../hooks/useAIChatStream.js";
+import { useAISettings } from "../hooks/useAISettings.js";
+import { useAuditLog } from "../hooks/useAuditLog.js";
+import { getTextBeforeCaret, useMentions } from "../hooks/useMentions.js";
+import { usePluginConfig } from "../hooks/usePluginConfig.js";
+import { ClaudeIcon, GoogleGeminiIcon, MistralAiIcon, OpenaiIcon, OpenrouterIcon, PaperclipIcon } from "../Icons.js";
+import { MentionPopover } from "../mention-popover/MentionPopover.js";
+import styles from "./AIInput.module.css";
+const getProviderIcon = (provider)=>{
+    const iconProps = {
+        "aria-hidden": true,
+        className: styles.selectProviderIcon
+    };
+    switch(provider){
+        case "claude":
+            return /*#__PURE__*/ _jsx(ClaudeIcon, {
+                ...iconProps
+            });
+        case "google":
+            return /*#__PURE__*/ _jsx(GoogleGeminiIcon, {
+                ...iconProps
+            });
+        case "mistral":
+            return /*#__PURE__*/ _jsx(MistralAiIcon, {
+                ...iconProps
+            });
+        case "openai":
+            return /*#__PURE__*/ _jsx(OpenaiIcon, {
+                ...iconProps
+            });
+        case "openrouter":
+            return /*#__PURE__*/ _jsx(OpenrouterIcon, {
+                ...iconProps
+            });
+        default:
+            return null;
+    }
+};
+const getFileSignature = (file)=>`${file.name}:${file.size}:${file.lastModified}:${file.type}`;
+const getModelSelectionValue = (provider, model)=>JSON.stringify([
+        provider,
+        model
+    ]);
+const fallbackConfig = {
+    admin: {},
+    collections: [],
+    globals: [],
+    routes: {
+        admin: "/admin",
+        api: "/api"
+    }
+};
+const parseModelSelectionValue = (value)=>{
+    try {
+        const selection = JSON.parse(value);
+        if (!Array.isArray(selection) || selection.length !== 2 || selection.some((part)=>typeof part !== "string")) return null;
+        return {
+            model: selection[1],
+            provider: selection[0]
+        };
+    } catch  {
+        return null;
+    }
+};
+const AIInputCore = ({ applyProposalLocally, documentScope, isDashboard })=>{
+    const editorRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const [prompt, setPrompt] = useState("");
+    const [isApplying, setIsApplying] = useState(false);
+    const [isUploadingMedia, setIsUploadingMedia] = useState(false);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [mediaAttachments, setMediaAttachments] = useState([]);
+    const selectedFilesRef = useRef([]);
+    const mediaAttachmentsRef = useRef([]);
+    const uploadedFileSignaturesRef = useRef(new Set());
+    const payloadConfigContext = useConfig();
+    const config = payloadConfigContext?.config ?? fallbackConfig;
+    const hasPayloadConfigContext = Boolean(payloadConfigContext?.config);
+    const { isCollectionMentionEnabled, locales, defaultLocale, managedProviders, media, providerProfiles } = usePluginConfig(config);
+    const acceptedMimeTypes = media?.acceptedMimeTypes?.join(",");
+    const mediaEnabled = Boolean(media?.enabled);
+    const { loadRecentChanges, prependChange } = useAuditLog({
+        adminRoute: config.routes.admin,
+        apiRoute: config.routes.api
+    });
+    const { selectedModel, setSelectedProviderModel, settingsProvider } = useAISettings({
+        adminUserSlug: config.admin?.user,
+        apiRoute: config.routes.api,
+        managedProviders,
+        providerProfiles
+    });
+    const selectedProviderProfile = providerProfiles.find((profile)=>profile.id === settingsProvider);
+    const selectableProviderProfiles = managedProviders ? providerProfiles : providerProfiles.filter((profile)=>profile.id === settingsProvider);
+    const { clearMentions, insertMention, mentionPopoverPosition, mentionRange, mentionSuggestions, mentionsRef, updateMentionState } = useMentions({
+        apiRoute: config.routes.api,
+        config,
+        defaultLocale,
+        editorRef,
+        isCollectionMentionEnabled,
+        locales,
+        setPrompt,
+        styles
+    });
+    const updateSelectedFiles = (updater)=>{
+        const nextFiles = typeof updater === "function" ? updater(selectedFilesRef.current) : updater;
+        selectedFilesRef.current = nextFiles;
+        setSelectedFiles(nextFiles);
+    };
+    const updateMediaAttachments = (updater)=>{
+        const nextAttachments = typeof updater === "function" ? updater(mediaAttachmentsRef.current) : updater;
+        mediaAttachmentsRef.current = nextAttachments;
+        setMediaAttachments(nextAttachments);
+    };
+    const clearInput = ()=>{
+        setPrompt("");
+        updateSelectedFiles([]);
+        updateMediaAttachments([]);
+        uploadedFileSignaturesRef.current = new Set();
+        clearMentions();
+        if (editorRef.current) editorRef.current.textContent = "";
+    };
+    const handleSelectFile = (event)=>{
+        const files = Array.from(event.target.files || []);
+        updateSelectedFiles((currentFiles)=>{
+            const selectedFileSignatures = new Set(currentFiles.map(getFileSignature));
+            const nextFiles = [
+                ...currentFiles
+            ];
+            for (const file of files){
+                const fileSignature = getFileSignature(file);
+                if (selectedFileSignatures.has(fileSignature)) continue;
+                selectedFileSignatures.add(fileSignature);
+                nextFiles.push(file);
+            }
+            return nextFiles;
+        });
+        event.target.value = "";
+    };
+    const removeSelectedFile = (fileIndex)=>{
+        updateSelectedFiles((currentFiles)=>currentFiles.filter((_, index)=>index !== fileIndex));
+    };
+    const removeMediaAttachment = (attachmentIndex)=>{
+        updateMediaAttachments((currentAttachments)=>currentAttachments.filter((_, index)=>index !== attachmentIndex));
+    };
+    const { dismissChat, error, isLoading, setIsLoading, proposals, resetChatState, response, setError, setProposals, setResponse, submit, tokenUsage } = useAIChatStream({
+        apiRoute: config.routes.api,
+        clearInput,
+        documentScope,
+        mentionsRef,
+        prompt,
+        selectedModel,
+        selectedProvider: settingsProvider
+    });
+    const uploadSelectedFiles = async ()=>{
+        const filesToUpload = selectedFilesRef.current;
+        if (filesToUpload.length === 0) return [];
+        const uploadedAttachments = [];
+        for (const file of filesToUpload){
+            const fileSignature = getFileSignature(file);
+            if (uploadedFileSignaturesRef.current.has(fileSignature)) continue;
+            uploadedFileSignaturesRef.current.add(fileSignature);
+            const formData = new FormData();
+            formData.append("file", file);
+            const res = await fetch(formatAdminURL({
+                apiRoute: config.routes.api,
+                path: "/ai-upload-media"
+            }), {
+                body: formData,
+                method: "POST"
+            });
+            const result = await res.json().catch(()=>null);
+            if (!res.ok || !result?.attachment) {
+                uploadedFileSignaturesRef.current.delete(fileSignature);
+                throw new Error(result?.error || `Could not upload ${file.name}`);
+            }
+            uploadedAttachments.push(result.attachment);
+        }
+        return uploadedAttachments;
+    };
+    const handleSubmit = async ()=>{
+        if (isUploadingMedia) return;
+        setIsLoading(true);
+        setError("");
+        setIsUploadingMedia(true);
+        try {
+            const uploadedAttachments = await uploadSelectedFiles();
+            const nextAttachments = [
+                ...mediaAttachmentsRef.current,
+                ...uploadedAttachments
+            ];
+            if (uploadedAttachments.length > 0) {
+                updateMediaAttachments(nextAttachments);
+                updateSelectedFiles([]);
+            }
+            await submit({
+                attachments: nextAttachments
+            });
+        } catch (err) {
+            setError(err instanceof Error ? err.message : "Media upload failed");
+        } finally{
+            setIsUploadingMedia(false);
+        }
+    };
+    useEffect(()=>{
+        if (isLoading || error || proposals.length > 0 || !response) return;
+        const timeout = window.setTimeout(()=>{
+            setResponse("");
+            clearInput();
+        }, 10000);
+        return ()=>window.clearTimeout(timeout);
+    }, [
+        error,
+        isLoading,
+        proposals.length,
+        response
+    ]);
+    const getProposalViewURL = (proposal)=>{
+        const adminRoute = config.routes.admin || "/admin";
+        if (proposal.action === "updateGlobal" && proposal.slug) {
+            return `${adminRoute}/globals/${proposal.slug}`;
+        }
+        if (proposal.collection && proposal.id) {
+            return `${adminRoute}/collections/${proposal.collection}/${proposal.id}`;
+        }
+        return null;
+    };
+    const handleApplyProposal = async (proposal)=>{
+        setIsApplying(true);
+        setError("");
+        try {
+            if (applyProposalLocally) {
+                await applyProposalLocally(proposal);
+                resetChatState();
+                clearInput();
+                return;
+            }
+            const res = await fetch(formatAdminURL({
+                apiRoute: config.routes.api,
+                path: "/ai-apply-action"
+            }), {
+                body: JSON.stringify({
+                    aiResponse: response,
+                    prompt,
+                    proposal,
+                    tokenUsage
+                }),
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                method: "POST"
+            });
+            const result = await res.json();
+            if (!res.ok) {
+                setProposals([]);
+                setResponse("");
+                throw new Error(result.error || "Could not apply proposal");
+            }
+            resetChatState();
+            if (result.change) {
+                prependChange(result.change);
+                window.dispatchEvent(new CustomEvent("payload-ai:audit-log-updated"));
+            }
+            void loadRecentChanges().catch(()=>undefined);
+            clearInput();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : "Could not apply proposal");
+        } finally{
+            setIsApplying(false);
+        }
+    };
+    if (!hasPayloadConfigContext) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: styles.chatLayout,
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: styles.chat,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles.chatHeader,
+                        children: /*#__PURE__*/ _jsx("h2", {
+                            className: styles.chatTitle,
+                            children: "AI Assistant"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles.chatError,
+                        children: "Payload config context is unavailable. Make sure the app and this plugin resolve the same @payloadcms/ui version."
+                    })
+                ]
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        className: styles.chatLayout,
+        style: {
+            marginBottom: isDashboard ? "0" : "20px",
+            height: isDashboard ? "332px" : "220px"
+        },
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: styles.chat,
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: styles.chatHeader,
+                    children: /*#__PURE__*/ _jsx("h2", {
+                        className: styles.chatTitle,
+                        children: "AI Assistant"
+                    })
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: styles.chatInputRow,
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: styles.chatInputSurface,
+                            onClick: ()=>editorRef.current?.focus(),
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    id: "ai-input",
+                                    className: styles.chatInput,
+                                    ref: editorRef,
+                                    role: "textbox",
+                                    "aria-label": "AIInput",
+                                    "data-placeholder": "Ask AI...",
+                                    tabIndex: 0,
+                                    contentEditable: proposals.length === 0 && !isLoading && Boolean(settingsProvider),
+                                    onInput: (event)=>{
+                                        const value = event.target.innerText;
+                                        setPrompt(value);
+                                        if (!value.trim()) clearMentions();
+                                        updateMentionState(getTextBeforeCaret(event.target));
+                                    },
+                                    onKeyDown: (event)=>{
+                                        if (event.key === "ArrowDown" && mentionRange && mentionSuggestions.length > 0) {
+                                            const firstOption = editorRef.current?.querySelector("button");
+                                            if (firstOption) {
+                                                event.preventDefault();
+                                                firstOption.focus();
+                                                return;
+                                            }
+                                        }
+                                        if (event.key === "Enter" && !event.shiftKey) {
+                                            event.preventDefault();
+                                            void handleSubmit();
+                                        }
+                                    }
+                                }),
+                                (selectedFiles.length > 0 || mediaAttachments.length > 0) && /*#__PURE__*/ _jsxs("div", {
+                                    className: styles.attachmentTray,
+                                    "aria-label": "Attached media",
+                                    children: [
+                                        selectedFiles.map((file, index)=>/*#__PURE__*/ _jsxs("span", {
+                                                className: styles.attachmentPill,
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: styles.attachmentName,
+                                                        title: file.name,
+                                                        children: file.name
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("button", {
+                                                        type: "button",
+                                                        className: styles.attachmentRemove,
+                                                        disabled: isUploadingMedia,
+                                                        onClick: ()=>removeSelectedFile(index),
+                                                        "aria-label": `Remove ${file.name}`,
+                                                        children: "X"
+                                                    })
+                                                ]
+                                            }, `${file.name}-${file.size}-${file.lastModified}-${index}`)),
+                                        mediaAttachments.map((attachment, index)=>/*#__PURE__*/ _jsxs("span", {
+                                                className: styles.attachmentPill,
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: styles.attachmentName,
+                                                        title: attachment.filename,
+                                                        children: attachment.filename
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("button", {
+                                                        type: "button",
+                                                        className: styles.attachmentRemove,
+                                                        disabled: isUploadingMedia,
+                                                        onClick: ()=>removeMediaAttachment(index),
+                                                        "aria-label": `Remove ${attachment.filename}`,
+                                                        children: "X"
+                                                    })
+                                                ]
+                                            }, `${attachment.collection}-${attachment.id}`))
+                                    ]
+                                }),
+                                mediaEnabled && /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx("input", {
+                                            ref: fileInputRef,
+                                            type: "file",
+                                            accept: acceptedMimeTypes,
+                                            className: styles.fileInput,
+                                            multiple: true,
+                                            onChange: handleSelectFile
+                                        }),
+                                        /*#__PURE__*/ _jsx("button", {
+                                            type: "button",
+                                            className: styles.mediaButton,
+                                            "aria-label": "Attach media",
+                                            title: "Attach media",
+                                            disabled: isLoading || isUploadingMedia || proposals.length > 0,
+                                            onClick: (event)=>{
+                                                event.stopPropagation();
+                                                fileInputRef.current?.click();
+                                            },
+                                            children: /*#__PURE__*/ _jsx(PaperclipIcon, {
+                                                width: 16,
+                                                height: 16
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        mentionRange && isDashboard && /*#__PURE__*/ _jsx(MentionPopover, {
+                            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: [
+                                            selectedProviderProfile && getProviderIcon(selectedProviderProfile.provider),
+                                            /*#__PURE__*/ _jsxs("select", {
+                                                className: styles.select,
+                                                style: {
+                                                    paddingLeft: selectedProviderProfile ? "34px" : "12px"
+                                                },
+                                                disabled: !settingsProvider,
+                                                onChange: (event)=>{
+                                                    const selection = parseModelSelectionValue(event.target.value);
+                                                    if (selection) setSelectedProviderModel(selection.provider, selection.model);
+                                                },
+                                                value: settingsProvider && selectedModel ? getModelSelectionValue(settingsProvider, selectedModel) : "",
+                                                children: [
+                                                    !settingsProvider && /*#__PURE__*/ _jsx("option", {
+                                                        value: "",
+                                                        children: "No provider selected"
+                                                    }),
+                                                    selectableProviderProfiles.map((profile)=>/*#__PURE__*/ _jsx("optgroup", {
+                                                            label: profile.label,
+                                                            children: profile.models.map((model)=>/*#__PURE__*/ _jsx("option", {
+                                                                    value: getModelSelectionValue(profile.id, model.value),
+                                                                    children: model.label
+                                                                }, `${profile.id}-${model.value}`))
+                                                        }, profile.id))
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: styles.actions,
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                buttonStyle: "primary",
+                                "aria-label": "Send",
+                                margin: false,
+                                disabled: !prompt.trim() || !settingsProvider || !selectedModel || isLoading || isUploadingMedia || Boolean(error) || Boolean(response) || proposals.length > 0,
+                                onClick: ()=>void handleSubmit(),
+                                children: isUploadingMedia || isLoading ? "Sending..." : "Send"
+                            })
+                        })
+                    ]
+                }),
+                (proposals.length > 0 || response || isLoading) && /*#__PURE__*/ _jsx(ActionToast, {
+                    apiRoute: config.routes.api,
+                    description: response,
+                    error: error,
+                    getViewURL: getProposalViewURL,
+                    isApplying: isApplying,
+                    isLoading: isLoading,
+                    onDismiss: ()=>dismissChat(),
+                    onDismissError: ()=>setError(""),
+                    onApply: (proposal, _index)=>void handleApplyProposal(proposal),
+                    proposals: proposals,
+                    prompt: prompt,
+                    tokenUsage: tokenUsage
+                })
+            ]
+        })
+    });
+};
+const DocumentAIInput = ()=>{
+    const documentInfo = useDocumentInfo();
+    const documentForm = useDocumentForm();
+    const locale = useLocale();
+    const documentScope = documentInfo.collectionSlug ? {
+        collection: documentInfo.collectionSlug,
+        ...documentInfo.id === undefined ? {} : {
+            id: String(documentInfo.id)
+        },
+        type: "collection"
+    } : documentInfo.globalSlug ? {
+        slug: documentInfo.globalSlug,
+        type: "global"
+    } : undefined;
+    const applyProposalLocally = async (proposal)=>{
+        if (proposal.action === "delete") {
+            throw new Error("Delete proposals cannot be applied without saving.");
+        }
+        const proposalData = proposal.localizedData ? proposal.localizedData[proposal.locale || locale.code] : proposal.data;
+        if (!proposalData) {
+            throw new Error(`This proposal has no changes for the active locale "${locale.code}".`);
+        }
+        const currentData = documentForm.getData();
+        await documentForm.reset(mergeData(currentData, proposalData));
+        documentForm.setModified(true);
+    };
+    return /*#__PURE__*/ _jsx(AIInputCore, {
+        applyProposalLocally: applyProposalLocally,
+        documentScope: documentScope,
+        isDashboard: false
+    });
+};
+const AIInput = ({ isDashboard = false })=>{
+    if (isDashboard) return /*#__PURE__*/ _jsx(AIInputCore, {
+        isDashboard: true
+    });
+    return /*#__PURE__*/ _jsx(DocumentAIInput, {});
+};
+export default AIInput;