@mvriu5/payload-ai 0.5.0

package/dist/components/AIActionProposalList.module.css

@@ -0,0 +1,175 @@
+.list {
+    bottom: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-width: min(520px, calc(100vw - 32px));
+    position: fixed;
+    right: 24px;
+    width: 100%;
+    z-index: 1000;
+}
+
+.item {
+    align-items: stretch;
+    background: var(--theme-bg);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 6px;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-height: calc(100vh - 48px);
+    padding: 12px;
+}
+
+.content {
+    flex: 1 1 auto;
+    max-height: calc(100vh - 130px);
+    min-width: 0;
+    overflow: auto;
+    width: 100%;
+}
+
+.errorItem {
+    border-color: var(--theme-error-500);
+}
+
+.label {
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.4;
+}
+
+.description {
+    color: var(--theme-elevation-700);
+    font-size: 12px;
+    line-height: 1.45;
+    margin-top: 8px;
+    white-space: pre-wrap;
+}
+
+.meta {
+    color: var(--theme-elevation-600);
+    font-size: 12px;
+    line-height: 1.4;
+    margin-top: 2px;
+}
+
+.proposalDetails {
+    background: var(--theme-elevation-50);
+    border: 1px solid var(--theme-elevation-100);
+    border-radius: 4px;
+    color: var(--theme-elevation-700);
+    font-size: 11px;
+    line-height: 1.4;
+    margin: 8px 0 0;
+    max-height: min(360px, calc(100vh - 220px));
+    max-width: 100%;
+    overflow: auto;
+    padding: 8px;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.details {
+    margin-top: 8px;
+}
+
+.summary {
+    color: var(--theme-elevation-600);
+    cursor: pointer;
+    font-size: 12px;
+    line-height: 1.4;
+}
+
+.footer {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 8px;
+    justify-content: space-between;
+}
+
+.viewAction {
+    align-items: center;
+    display: flex;
+    min-width: 0;
+}
+
+.actions {
+    align-items: center;
+    align-self: flex-end;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 8px;
+}
+
+.button {
+    background: var(--theme-text);
+    border: 0;
+    border-radius: 4px;
+    color: var(--theme-bg);
+    cursor: pointer;
+    flex: 0 0 auto;
+    font: inherit;
+    min-height: 34px;
+    padding: 0 14px;
+}
+
+.secondaryButton {
+    background: transparent;
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 4px;
+    color: var(--theme-text);
+    cursor: pointer;
+    flex: 0 0 auto;
+    font: inherit;
+    line-height: 34px;
+    min-height: 34px;
+    padding: 0 14px;
+    text-decoration: none;
+}
+
+.button:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+.secondaryButton:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+@media (max-width: 768px) {
+    .list {
+        bottom: 16px;
+        left: 16px;
+        max-width: none;
+        right: 16px;
+        width: auto;
+    }
+
+    .item {
+        max-height: calc(100vh - 32px);
+    }
+
+    .content {
+        max-height: calc(100vh - 160px);
+    }
+
+    .actions {
+        align-self: stretch;
+        flex-direction: column;
+    }
+
+    .footer {
+        align-items: stretch;
+        flex-direction: column;
+    }
+
+    .button,
+    .secondaryButton {
+        width: 100%;
+    }
+}

package/dist/components/AIApiKeyField.d.ts

@@ -0,0 +1,2 @@
+import type { TextFieldClientComponent } from "payload";
+export declare const AIApiKeyField: TextFieldClientComponent;

package/dist/components/AIApiKeyField.js

@@ -0,0 +1,55 @@
+"use client";
+import { useField } from "@payloadcms/ui";
+const getLabel = (label, fallback)=>{
+    if (typeof label === "string") return label;
+    if (label && typeof label === "object") {
+        const firstLabel = Object.values(label)[0];
+        if (typeof firstLabel === "string") return firstLabel;
+    }
+    return fallback;
+};
+const getFieldClassName = ({ className, isReadOnly, showError })=>[
+        "field-type",
+        "password",
+        className,
+        showError ? "error" : null,
+        isReadOnly ? "read-only" : null
+    ].filter(Boolean).join(" ");
+export const AIApiKeyField = ({ field, inputRef, path, readOnly })=>{
+    const { disabled, errorMessage, setValue, showError, value } = useField({
+        path
+    });
+    const fieldID = `field-${path.replace(/\./g, "__")}`;
+    const isReadOnly = readOnly || disabled || field.admin?.disabled;
+    const handleChange = (event)=>{
+        setValue(event.target.value);
+    };
+    return /*#__PURE__*/ React.createElement("div", {
+        className: getFieldClassName({
+            className: field.admin?.className,
+            isReadOnly,
+            showError
+        })
+    }, /*#__PURE__*/ React.createElement("label", {
+        className: "field-label",
+        htmlFor: fieldID
+    }, field?.label?.toString(), field.required ? /*#__PURE__*/ React.createElement("span", {
+        className: "required"
+    }, "*") : null), /*#__PURE__*/ React.createElement("div", {
+        className: "field-type__wrap"
+    }, showError && errorMessage ? /*#__PURE__*/ React.createElement("div", {
+        className: "field-error"
+    }, errorMessage) : null, /*#__PURE__*/ React.createElement("input", {
+        autoComplete: "new-password",
+        disabled: isReadOnly,
+        id: fieldID,
+        name: path,
+        onChange: handleChange,
+        placeholder: field.admin?.placeholder?.toString(),
+        ref: inputRef,
+        type: "password",
+        value: value || ""
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: "field-description"
+    }, field.admin?.description?.toString())));
+};

package/dist/components/AIInput.d.ts

@@ -0,0 +1 @@
+export declare const AIInput: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/AIInput.js

@@ -0,0 +1,386 @@
+"use client";
+import { useConfig } from "@payloadcms/ui";
+import { formatAdminURL } from "payload/shared";
+import { useMemo, useRef, useState } from "react";
+import { getResolvedAIModelConfig } from "../ai/providerOptions.js";
+import { getSerializableLabel, isInternalCollection } from "../payload/shared.js";
+import { AIActionProposalList } from "./AIActionProposalList.js";
+import styles from "./AIInput.module.css";
+import { CollectionMentionPopover } from "./CollectionMentionPopover.js";
+import { useAISettings } from "./hooks/useAISettings.js";
+import { useDocumentMentionSuggestions } from "./hooks/useDocumentMentionSuggestions.js";
+const collectBlockOptions = ({ fields, parent })=>{
+    const options = [];
+    for (const field of fields){
+        if (field.type === "blocks" && field.blocks) {
+            for (const block of field.blocks){
+                options.push({
+                    label: getSerializableLabel(block.labels?.singular, block.slug),
+                    parent,
+                    slug: block.slug,
+                    type: "block"
+                });
+                options.push(...collectBlockOptions({
+                    fields: block.fields || [],
+                    parent: `${parent}/${block.slug}`
+                }));
+            }
+        }
+        if (field.fields) {
+            options.push(...collectBlockOptions({
+                fields: field.fields,
+                parent
+            }));
+        }
+    }
+    return options;
+};
+export const AIInput = ()=>{
+    const { config } = useConfig();
+    const editorRef = useRef(null);
+    const mentionPopoverRef = useRef(null);
+    const [prompt, setPrompt] = useState("");
+    const configuredModels = config.admin?.custom?.payloadAiPlugin?.models;
+    const aiModelConfig = useMemo(()=>getResolvedAIModelConfig(configuredModels), [
+        configuredModels
+    ]);
+    const { selectedModel, setSelectedModel, settingsProvider } = useAISettings({
+        adminUserSlug: config.admin?.user,
+        apiRoute: config.routes.api,
+        defaultModels: aiModelConfig.defaults
+    });
+    const [mentionQuery, setMentionQuery] = useState("");
+    const [mentionRange, setMentionRange] = useState(null);
+    const [mentions, setMentions] = useState([]);
+    const [appliedProposalIndexes, setAppliedProposalIndexes] = useState([]);
+    const [response, setResponse] = useState("");
+    const [error, setError] = useState("");
+    const [proposals, setProposals] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isApplying, setIsApplying] = useState(false);
+    const collections = config.collections.filter((collection)=>!isInternalCollection(collection.slug)).map((collection)=>({
+            label: getSerializableLabel(collection.labels?.singular, collection.slug),
+            slug: collection.slug,
+            type: "collection"
+        }));
+    const globals = config.globals?.map((global)=>({
+            label: getSerializableLabel(global.label, global.slug),
+            slug: global.slug,
+            type: "global"
+        })) || [];
+    const blocks = [
+        ...config.collections.flatMap((collection)=>collectBlockOptions({
+                fields: collection.fields,
+                parent: collection.slug
+            })),
+        ...config.globals?.flatMap((global)=>collectBlockOptions({
+                fields: global.fields,
+                parent: global.slug
+            })) || []
+    ];
+    const mentionOptions = [
+        ...collections,
+        ...globals,
+        ...blocks
+    ];
+    const normalizedMentionQuery = mentionQuery.toLowerCase();
+    const filteredCollections = collections.filter((collection)=>collection.slug.toLowerCase().includes(normalizedMentionQuery) || collection.label.toLowerCase().includes(normalizedMentionQuery));
+    const filteredMentionOptions = mentionOptions.filter((option)=>option.slug.toLowerCase().includes(normalizedMentionQuery));
+    const documentSuggestionCollection = filteredCollections.length === 1 ? filteredCollections[0]?.slug : null;
+    const { documentSuggestions, resetDocumentSuggestions } = useDocumentMentionSuggestions({
+        apiRoute: config.routes.api,
+        documentSuggestionCollection,
+        mentionQuery,
+        mentionRange
+    });
+    const mentionSuggestions = [
+        ...filteredMentionOptions,
+        ...documentSuggestions
+    ];
+    const getCaretOffset = (element)=>{
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) return 0;
+        const range = selection.getRangeAt(0);
+        const clonedRange = range.cloneRange();
+        clonedRange.selectNodeContents(element);
+        clonedRange.setEnd(range.endContainer, range.endOffset);
+        return clonedRange.toString().length;
+    };
+    const moveCaretToEnd = (element)=>{
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.selectNodeContents(element);
+        range.collapse(false);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+    };
+    const getTextNodeAtOffset = (element, offset)=>{
+        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+        let currentOffset = 0;
+        let node = walker.nextNode();
+        while(node){
+            const nextOffset = currentOffset + (node.textContent?.length || 0);
+            if (offset <= nextOffset) {
+                return {
+                    node,
+                    offset: offset - currentOffset
+                };
+            }
+            currentOffset = nextOffset;
+            node = walker.nextNode();
+        }
+        const textNode = document.createTextNode("");
+        element.append(textNode);
+        return {
+            node: textNode,
+            offset: 0
+        };
+    };
+    const replaceTextRangeWithBadge = ({ badge, editor, end, start })=>{
+        const startPosition = getTextNodeAtOffset(editor, start);
+        const endPosition = getTextNodeAtOffset(editor, end);
+        const range = document.createRange();
+        const trailingSpace = document.createTextNode(" ");
+        range.setStart(startPosition.node, startPosition.offset);
+        range.setEnd(endPosition.node, endPosition.offset);
+        range.deleteContents();
+        range.insertNode(trailingSpace);
+        range.insertNode(badge);
+        const selection = window.getSelection();
+        const caretRange = document.createRange();
+        caretRange.setStartAfter(trailingSpace);
+        caretRange.collapse(true);
+        selection?.removeAllRanges();
+        selection?.addRange(caretRange);
+    };
+    const updateMentionState = (value, caretPosition)=>{
+        const valueBeforeCaret = value.slice(0, caretPosition);
+        const match = /(?:^|\s)@([\w-]*)$/.exec(valueBeforeCaret);
+        if (!match || typeof match.index !== "number") {
+            setMentionQuery("");
+            setMentionRange(null);
+            return;
+        }
+        const atIndex = valueBeforeCaret.lastIndexOf("@");
+        setMentionQuery(match[1] || "");
+        setMentionRange({
+            end: caretPosition,
+            start: atIndex
+        });
+    };
+    const clearInput = ()=>{
+        setPrompt("");
+        setMentions([]);
+        if (editorRef.current) editorRef.current.textContent = "";
+    };
+    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 insertMention = (suggestion)=>{
+        const editor = editorRef.current;
+        if (!mentionRange || !editor) return;
+        const beforeMention = prompt.slice(0, mentionRange.start);
+        const afterMention = prompt.slice(mentionRange.end);
+        const badgeType = suggestion.type === "doc" ? "document" : suggestion.type;
+        const badgePrefix = `${badgeType}:`;
+        const badgeText = `${badgePrefix} ${suggestion.label}`;
+        const promptText = suggestion.type === "doc" ? `${badgeText} (${suggestion.collection}/${suggestion.id})` : badgeText;
+        const badge = document.createElement("span");
+        badge.className = [
+            styles.badge,
+            styles[suggestion.type],
+            styles.inlineBadge
+        ].join(" ");
+        badge.contentEditable = "false";
+        badge.append(Object.assign(document.createElement("span"), {
+            className: styles.prefix,
+            textContent: `${badgePrefix} `
+        }), Object.assign(document.createElement("span"), {
+            className: styles.name,
+            textContent: suggestion.label
+        }));
+        replaceTextRangeWithBadge({
+            badge,
+            editor,
+            end: mentionRange.end,
+            start: mentionRange.start
+        });
+        editor.focus();
+        setPrompt(`${beforeMention}${promptText} ${afterMention}`);
+        setMentions((currentMentions)=>{
+            const mentionExists = currentMentions.some((mention)=>mention.type === suggestion.type && mention.slug === suggestion.slug && mention.parent === suggestion.parent && mention.collection === suggestion.collection && mention.id === suggestion.id);
+            if (mentionExists) return currentMentions;
+            return [
+                ...currentMentions,
+                suggestion
+            ];
+        });
+        setMentionQuery("");
+        setMentionRange(null);
+        resetDocumentSuggestions();
+    };
+    const handleSubmit = async ()=>{
+        const trimmedPrompt = prompt.trim();
+        if (!trimmedPrompt) return;
+        setIsLoading(true);
+        setAppliedProposalIndexes([]);
+        try {
+            const res = await fetch(formatAdminURL({
+                apiRoute: config.routes.api,
+                path: "/ai-chat"
+            }), {
+                body: JSON.stringify({
+                    mentions,
+                    model: selectedModel,
+                    prompt: trimmedPrompt
+                }),
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                method: "POST"
+            });
+            const result = await res.json();
+            if (!res.ok) {
+                setProposals([]);
+                setResponse("");
+                throw new Error(result.error || "AI request failed");
+            }
+            setError("");
+            setResponse(result.text || "");
+            setProposals(result.proposals || []);
+        } catch (err) {
+            setProposals([]);
+            setResponse("");
+            setError(err instanceof Error ? err.message : "AI request failed");
+        } finally{
+            setIsLoading(false);
+        }
+    };
+    const handleApplyProposal = async (proposal)=>{
+        setIsApplying(true);
+        setError("");
+        try {
+            const res = await fetch(formatAdminURL({
+                apiRoute: config.routes.api,
+                path: "/ai-apply-action"
+            }), {
+                body: JSON.stringify({
+                    proposal
+                }),
+                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");
+            }
+            setAppliedProposalIndexes([]);
+            setError("");
+            setProposals([]);
+            setResponse("");
+            clearInput();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : "Could not apply proposal");
+        } finally{
+            setIsApplying(false);
+        }
+    };
+    return /*#__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(value, getCaretOffset(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(CollectionMentionPopover, {
+        containerRef: mentionPopoverRef,
+        onSelect: insertMention,
+        suggestions: mentionSuggestions
+    }) : null), /*#__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("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") : null, settingsProvider ? aiModelConfig.providers[settingsProvider].map((model)=>/*#__PURE__*/ React.createElement("option", {
+            key: model.value,
+            value: model.value
+        }, model.label)) : null))), /*#__PURE__*/ React.createElement("button", {
+        className: styles.chatButton,
+        disabled: !prompt.trim() || !settingsProvider || !selectedModel || isLoading,
+        onClick: ()=>void handleSubmit(),
+        type: "button"
+    }, isLoading ? "Sending..." : "Send")), /*#__PURE__*/ React.createElement(AIActionProposalList, {
+        appliedProposalIndexes: appliedProposalIndexes,
+        description: response,
+        error: error,
+        getViewURL: getProposalViewURL,
+        isApplying: isApplying,
+        onDismiss: ()=>{
+            setAppliedProposalIndexes([]);
+            setError("");
+            setProposals([]);
+            setResponse("");
+            clearInput();
+        },
+        onDismissError: ()=>{
+            setError("");
+        },
+        onApply: (proposal, _index)=>void handleApplyProposal(proposal),
+        proposals: proposals
+    }));
+};