@mvriu5/payload-ai 1.2.0 → 1.3.2

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

@@ -0,0 +1,433 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, PlusIcon, useConfig } from "@payloadcms/ui";
+import { formatAdminURL } from "payload/shared";
+import { useEffect, useRef, useState } from "react";
+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 } 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 AIInput = ()=>{
+    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 { config } = useConfig();
+    const { aiModelConfig, isCollectionMentionEnabled, locales, defaultLocale, media } = 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, setSelectedModel, settingsProvider } = useAISettings({
+        adminUserSlug: config.admin?.user,
+        apiRoute: config.routes.api,
+        defaultModels: aiModelConfig.defaults
+    });
+    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, proposals, resetChatState, response, setError, setProposals, setResponse, submit, tokenUsage } = useAIChatStream({
+        apiRoute: config.routes.api,
+        clearInput,
+        mentionsRef,
+        prompt,
+        selectedModel
+    });
+    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;
+        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 {
+            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);
+        }
+    };
+    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__*/ _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}`))
+                                    ]
+                                })
+                            ]
+                        }),
+                        mentionRange && /*#__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: [
+                                            settingsProvider && getProviderIcon(settingsProvider),
+                                            /*#__PURE__*/ _jsxs("select", {
+                                                className: styles.select,
+                                                style: {
+                                                    paddingLeft: settingsProvider ? "34px" : "12px"
+                                                },
+                                                disabled: !settingsProvider,
+                                                onChange: (event)=>setSelectedModel(event.target.value),
+                                                value: selectedModel,
+                                                children: [
+                                                    !settingsProvider && /*#__PURE__*/ _jsx("option", {
+                                                        value: "",
+                                                        children: "No provider selected"
+                                                    }),
+                                                    settingsProvider && aiModelConfig.providers[settingsProvider].map((model)=>/*#__PURE__*/ _jsx("option", {
+                                                            value: model.value,
+                                                            children: model.label
+                                                        }, model.value))
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: styles.actions,
+                            children: [
+                                mediaEnabled && /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx("input", {
+                                            ref: fileInputRef,
+                                            type: "file",
+                                            accept: acceptedMimeTypes,
+                                            className: styles.fileInput,
+                                            multiple: true,
+                                            onChange: handleSelectFile
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            buttonStyle: "tab",
+                                            "aria-label": "Attach media",
+                                            margin: false,
+                                            disabled: isLoading || isUploadingMedia || proposals.length > 0,
+                                            onClick: ()=>fileInputRef.current?.click(),
+                                            children: /*#__PURE__*/ _jsx(PlusIcon, {})
+                                        })
+                                    ]
+                                }),
+                                /*#__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) && /*#__PURE__*/ _jsx(ActionToast, {
+                    apiRoute: config.routes.api,
+                    description: response,
+                    error: error,
+                    getViewURL: getProposalViewURL,
+                    isApplying: isApplying,
+                    onDismiss: ()=>dismissChat(),
+                    onDismissError: ()=>setError(""),
+                    onApply: (proposal, _index)=>void handleApplyProposal(proposal),
+                    proposals: proposals,
+                    prompt: prompt,
+                    tokenUsage: tokenUsage
+                })
+            ]
+        })
+    });
+};
+export default AIInput;

package/dist/components/{AIInput.module.css → ai-input/AIInput.module.css}

@@ -1,15 +1,20 @@
 .chatLayout {
-    align-items: start;
-    display: grid;
-    gap: 16px;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    margin-bottom: 24px;
-    max-width: 1280px;
+    width: 100%;
+    max-width: none;
+    display: flex;
+    flex-direction: column;
+    height: 332px;
+    overflow: hidden;
 }
 
 .chat {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
     border: 1px solid var(--theme-elevation-150);
     border-radius: 8px;
+    min-height: 0;
+    overflow: hidden;
     padding: 20px;
 }
 
@@ -26,13 +31,6 @@
     margin: 0;
 }
 
-.chatDescription {
-    color: var(--theme-elevation-600);
-    font-size: 13px;
-    line-height: 1.4;
-    margin: 4px 0 0;
-}
-
 .settings {
     align-items: flex-end;
     display: flex;
@@ -87,6 +85,9 @@
 .chatInputRow {
     position: relative;
     width: 100%;
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
 }
 
 .chatActionsRow {
@@ -97,17 +98,31 @@
     margin-top: 12px;
 }
 
+.actions {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+}
+
+.fileInput {
+    display: none;
+}
+
 .chatInput {
     background: transparent;
     border: 0;
     color: var(--theme-text);
-    display: block;
     font: inherit;
-    height: 84px;
+    flex: 1 1 0;
+    height: 100%;
+    min-height: 0;
     overflow-y: auto;
+    overscroll-behavior: contain;
     padding: 0;
     white-space: pre-wrap;
+    word-break: break-word;
     width: 100%;
+    display: block;
 }
 
 .chatInput:focus {
@@ -120,11 +135,16 @@
 }
 
 .chatInputSurface {
+    position: relative;
     background: var(--theme-input-bg);
     border: 1px solid var(--theme-elevation-150);
     box-sizing: border-box;
     border-radius: 4px;
-    height: 108px;
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
     overflow: hidden;
     padding: 12px;
     width: 100%;
@@ -134,6 +154,75 @@
     border-color: var(--theme-success-500);
 }
 
+.attachmentTray {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    gap: 6px;
+    min-height: 22px;
+}
+
+.attachmentPill {
+    align-items: center;
+    background: var(--theme-elevation-100);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 999px;
+    color: var(--theme-text);
+    display: inline-flex;
+    font-size: 11px;
+    gap: 4px;
+    line-height: 1.2;
+    max-width: min(240px, 100%);
+    min-height: 24px;
+    min-width: 0;
+    padding: 2px 5px 3px 8px;
+}
+
+.attachmentName {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.attachmentRemove {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    color: var(--theme-elevation-600);
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    font: inherit;
+    font-size: 10px;
+    height: 14px;
+    justify-content: center;
+    line-height: 1;
+    padding: 0;
+    width: 14px;
+}
+
+.attachmentRemove:hover,
+.attachmentRemove:focus-visible {
+    color: #fff;
+}
+
+.attachmentRemove:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+
+.attachmentRemove:disabled:hover {
+    color: var(--theme-elevation-600);
+}
+
+.attachmentRemove:focus-visible {
+    outline: 1px solid currentColor;
+    outline-offset: 1px;
+}
+
 .inlineBadge {
     margin: 0 2px;
     vertical-align: middle;
@@ -198,31 +287,6 @@
     border-color: color-mix(in srgb, #2f5da8 28%, var(--theme-elevation-150));
 }
 
-.chatButton {
-    align-items: center;
-    background: var(--theme-text);
-    border: 0;
-    border-radius: 4px;
-    color: var(--theme-bg);
-    cursor: pointer;
-    display: inline-flex;
-    font: inherit;
-    gap: 6px;
-    justify-content: center;
-    line-height: 24px;
-    min-height: 24px;
-    padding: 0 14px;
-}
-
-.chatButton svg {
-    flex: 0 0 auto;
-}
-
-.chatButton:disabled {
-    cursor: not-allowed;
-    opacity: 0.45;
-}
-
 .chatError {
     color: var(--theme-error-500);
     font-size: 13px;
@@ -278,6 +342,10 @@
         flex-direction: column;
     }
 
+    .actions {
+        justify-content: flex-end;
+    }
+
     .settings {
         align-items: stretch;
         width: 100%;
@@ -292,7 +360,7 @@
         width: 100%;
     }
 
-    .chatButton {
-        align-self: stretch;
+    .attachmentPill {
+        max-width: 100%;
     }
 }

package/dist/components/ai-input/badge.d.ts

@@ -0,0 +1,14 @@
+import { MentionOption } from "../mention-popover/MentionPopover.js";
+export declare const createBadgePrefix: (suggestion: MentionOption, styles: {
+    [key: string]: string;
+}) => HTMLSpanElement;
+export declare const getTextNodeAtOffset: (element: HTMLElement, offset: number) => {
+    node: Node;
+    offset: number;
+};
+export declare const replaceTextRangeWithBadge: ({ badge, editor, end, start }: {
+    badge: HTMLSpanElement;
+    editor: HTMLElement;
+    end: number;
+    start: number;
+}) => void;