@mvriu5/payload-ai 1.1.1 → 1.3.2

package/dist/components/hooks/useMentions.js

@@ -0,0 +1,276 @@
+"use client";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { getSerializableLabel, isInternalCollection } from "../../payload/shared.js";
+import { createBadgePrefix, getTextNodeAtOffset, replaceTextRangeWithBadge } from "../ai-input/badge.js";
+import { useDocumentMentionSuggestions } from "../hooks/useDocumentMentionSuggestions.js";
+const isMentionBoundary = (character)=>{
+    return character === undefined || /\s/.test(character);
+};
+const collectBlockOptions = ({ fields, parent })=>{
+    const options = [];
+    for (const field of fields){
+        if (!field.fields) continue;
+        options.push(...collectBlockOptions({
+            fields: field.fields,
+            parent
+        }));
+    }
+    return options;
+};
+const getActiveMentionRange = (valueBeforeCaret)=>{
+    const caretPosition = valueBeforeCaret.length;
+    for(let index = valueBeforeCaret.length - 1; index >= 0; index -= 1){
+        const character = valueBeforeCaret[index];
+        if (character === "@") {
+            const previousCharacter = valueBeforeCaret[index - 1];
+            const query = valueBeforeCaret.slice(index + 1);
+            if (!isMentionBoundary(previousCharacter)) return null;
+            if (!/^[\w-]*$/.test(query)) return null;
+            return {
+                query,
+                range: {
+                    end: caretPosition,
+                    start: index
+                }
+            };
+        }
+        if (isMentionBoundary(character)) break;
+    }
+    return null;
+};
+export const getTextBeforeCaret = (element)=>{
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return "";
+    const range = selection.getRangeAt(0);
+    const clonedRange = range.cloneRange();
+    clonedRange.selectNodeContents(element);
+    clonedRange.setEnd(range.endContainer, range.endOffset);
+    return clonedRange.toString();
+};
+export const useMentions = ({ apiRoute, config, defaultLocale, editorRef, isCollectionMentionEnabled, locales, setPrompt, styles })=>{
+    const mentionsRef = useRef([]);
+    const [mentionQuery, setMentionQuery] = useState("");
+    const [mentionRange, setMentionRange] = useState(null);
+    const [mentionPopoverPosition, setMentionPopoverPosition] = useState(null);
+    const collections = useMemo(()=>config.collections.flatMap((collection)=>{
+            if (isInternalCollection(collection.slug) || !isCollectionMentionEnabled(collection.slug)) return [];
+            return [
+                {
+                    label: getSerializableLabel(collection.labels?.singular, collection.slug),
+                    slug: collection.slug,
+                    type: "collection"
+                }
+            ];
+        }), [
+        config.collections,
+        isCollectionMentionEnabled
+    ]);
+    const globals = useMemo(()=>config.globals?.map((global)=>({
+                label: getSerializableLabel(global.label, global.slug),
+                slug: global.slug,
+                type: "global"
+            })) || [], [
+        config.globals
+    ]);
+    const blocks = useMemo(()=>[
+            ...config.collections.flatMap((collection)=>{
+                if (!isCollectionMentionEnabled(collection.slug)) return [];
+                return collectBlockOptions({
+                    fields: collection.fields,
+                    parent: collection.slug
+                });
+            }),
+            ...config.globals?.flatMap((global)=>collectBlockOptions({
+                    fields: global.fields,
+                    parent: global.slug
+                })) || []
+        ], [
+        config.collections,
+        config.globals,
+        isCollectionMentionEnabled
+    ]);
+    const localeOptions = useMemo(()=>locales.flatMap((locale)=>{
+            if (typeof locale === "string") {
+                return [
+                    {
+                        isDefault: locale === defaultLocale,
+                        label: locale,
+                        slug: locale,
+                        type: "locale"
+                    }
+                ];
+            }
+            if (!locale || typeof locale !== "object") return [];
+            const slug = typeof locale.code === "string" ? locale.code : null;
+            if (!slug) return [];
+            return [
+                {
+                    isDefault: slug === defaultLocale,
+                    label: getSerializableLabel(locale.label, slug),
+                    slug,
+                    type: "locale"
+                }
+            ];
+        }), [
+        defaultLocale,
+        locales
+    ]);
+    const mentionOptions = useMemo(()=>[
+            ...collections,
+            ...globals,
+            ...blocks,
+            ...localeOptions
+        ], [
+        blocks,
+        collections,
+        globals,
+        localeOptions
+    ]);
+    const normalizedMentionQuery = mentionQuery.toLowerCase();
+    const filteredCollections = useMemo(()=>collections.filter((collection)=>collection.slug.toLowerCase().includes(normalizedMentionQuery) || collection.label.toLowerCase().includes(normalizedMentionQuery)), [
+        collections,
+        normalizedMentionQuery
+    ]);
+    const filteredMentionOptions = useMemo(()=>mentionOptions.filter((option)=>option.slug.toLowerCase().includes(normalizedMentionQuery) || option.label.toLowerCase().includes(normalizedMentionQuery)), [
+        mentionOptions,
+        normalizedMentionQuery
+    ]);
+    const documentSuggestionCollection = filteredCollections.length === 1 ? filteredCollections[0]?.slug : null;
+    const { documentSuggestions, resetDocumentSuggestions } = useDocumentMentionSuggestions({
+        apiRoute,
+        documentSuggestionCollection,
+        mentionQuery,
+        mentionRange
+    });
+    const mentionSuggestions = useMemo(()=>[
+            ...filteredMentionOptions,
+            ...documentSuggestions
+        ], [
+        documentSuggestions,
+        filteredMentionOptions
+    ]);
+    const updateMentionPopoverPosition = useCallback((range)=>{
+        const editor = editorRef.current;
+        if (!editor || !range) {
+            setMentionPopoverPosition(null);
+            return;
+        }
+        const startPosition = getTextNodeAtOffset(editor, range.start);
+        const anchorRange = document.createRange();
+        anchorRange.setStart(startPosition.node, startPosition.offset);
+        anchorRange.collapse(true);
+        const marker = document.createElement("span");
+        marker.textContent = "\u200b";
+        anchorRange.insertNode(marker);
+        const rect = anchorRange.getBoundingClientRect();
+        marker.remove();
+        if (rect.left === 0 && rect.top === 0) {
+            setMentionPopoverPosition(null);
+            return;
+        }
+        setMentionPopoverPosition({
+            left: rect.left,
+            top: rect.bottom + 4
+        });
+    }, [
+        editorRef
+    ]);
+    const resetMentionState = useCallback(()=>{
+        setMentionQuery("");
+        setMentionRange(null);
+        setMentionPopoverPosition(null);
+    }, []);
+    const updateMentionState = useCallback((valueBeforeCaret)=>{
+        const activeMention = getActiveMentionRange(valueBeforeCaret);
+        if (!activeMention) {
+            resetMentionState();
+            return;
+        }
+        setMentionQuery(activeMention.query);
+        setMentionRange(activeMention.range);
+        updateMentionPopoverPosition(activeMention.range);
+    }, [
+        resetMentionState,
+        updateMentionPopoverPosition
+    ]);
+    useEffect(()=>{
+        if (!mentionRange) return;
+        const updatePosition = ()=>{
+            updateMentionPopoverPosition(mentionRange);
+        };
+        window.addEventListener("resize", updatePosition);
+        window.addEventListener("scroll", updatePosition, true);
+        return ()=>{
+            window.removeEventListener("resize", updatePosition);
+            window.removeEventListener("scroll", updatePosition, true);
+        };
+    }, [
+        mentionRange,
+        updateMentionPopoverPosition
+    ]);
+    const insertMention = useCallback((suggestion)=>{
+        const editor = editorRef.current;
+        if (!mentionRange || !editor) return;
+        const currentValue = editor.textContent || "";
+        const beforeMention = currentValue.slice(0, mentionRange.start);
+        const afterMention = currentValue.slice(mentionRange.end);
+        const badgeType = suggestion.type === "doc" ? "document" : suggestion.type;
+        const badgePrefix = `${badgeType}:`;
+        const badgeText = `${badgePrefix} ${suggestion.label}`;
+        const badge = document.createElement("span");
+        badge.className = [
+            styles.badge,
+            styles[suggestion.type],
+            styles.inlineBadge
+        ].join(" ");
+        badge.contentEditable = "false";
+        badge.append(createBadgePrefix(suggestion, styles), Object.assign(document.createElement("span"), {
+            className: styles.name,
+            textContent: suggestion.label
+        }));
+        const nextPrompt = `${beforeMention}${badgeText} ${afterMention}`;
+        replaceTextRangeWithBadge({
+            badge,
+            editor,
+            end: mentionRange.end,
+            start: mentionRange.start
+        });
+        editor.focus();
+        setPrompt(nextPrompt);
+        const mentionExists = mentionsRef.current.some((mention)=>mention.type === suggestion.type && mention.slug === suggestion.slug && mention.parent === suggestion.parent && mention.collection === suggestion.collection && mention.id === suggestion.id);
+        if (!mentionExists) {
+            mentionsRef.current = [
+                ...mentionsRef.current,
+                suggestion
+            ];
+        }
+        resetMentionState();
+        resetDocumentSuggestions();
+    }, [
+        editorRef,
+        mentionRange,
+        resetDocumentSuggestions,
+        resetMentionState,
+        setPrompt,
+        styles
+    ]);
+    const clearMentions = useCallback(()=>{
+        mentionsRef.current = [];
+        resetMentionState();
+        resetDocumentSuggestions();
+    }, [
+        resetDocumentSuggestions,
+        resetMentionState
+    ]);
+    return {
+        clearMentions,
+        getTextBeforeCaret,
+        insertMention,
+        mentionPopoverPosition,
+        mentionQuery,
+        mentionRange,
+        mentionSuggestions,
+        mentionsRef,
+        updateMentionState
+    };
+};

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

@@ -0,0 +1,52 @@
+type MediaConfig = {
+    acceptedMimeTypes?: string[];
+    collectionSlug: string;
+    enabled: boolean;
+    maxFileSize?: number;
+};
+type LocaleConfig = string | {
+    code?: string;
+    label?: unknown;
+};
+type LocalizationConfig = false | {
+    defaultLocale?: string;
+    locales?: LocaleConfig[];
+};
+export declare const usePluginConfig: (config: {
+    admin?: {
+        custom?: unknown;
+    };
+    localization?: LocalizationConfig;
+}) => {
+    aiModelConfig: {
+        defaults: Record<"claude" | "google" | "mistral" | "openai" | "openrouter", string>;
+        providers: {
+            claude: {
+                label: string;
+                value: string;
+            }[];
+            google: {
+                label: string;
+                value: string;
+            }[];
+            mistral: {
+                label: string;
+                value: string;
+            }[];
+            openai: {
+                label: string;
+                value: string;
+            }[];
+            openrouter: {
+                label: string;
+                value: string;
+            }[];
+        };
+    };
+    defaultLocale: string | undefined;
+    enabledCollectionSlugSet: Set<string> | null;
+    isCollectionMentionEnabled: (slug: string) => boolean;
+    locales: LocaleConfig[];
+    media: MediaConfig | undefined;
+};
+export {};

package/dist/components/hooks/usePluginConfig.js

@@ -0,0 +1,20 @@
+import { useMemo } from "react";
+import { getResolvedAIModelConfig } from "../../ai/providerOptions.js";
+export const usePluginConfig = (config)=>{
+    const pluginConfig = config.admin?.custom?.payloadAiPlugin;
+    const aiModelConfig = useMemo(()=>getResolvedAIModelConfig(pluginConfig?.models), [
+        pluginConfig?.models
+    ]);
+    const enabledCollectionSlugSet = useMemo(()=>pluginConfig?.collectionSlugs ? new Set(pluginConfig.collectionSlugs) : null, [
+        pluginConfig?.collectionSlugs
+    ]);
+    const localization = config.localization && typeof config.localization === "object" ? config.localization : null;
+    return {
+        aiModelConfig,
+        defaultLocale: localization?.defaultLocale,
+        enabledCollectionSlugSet,
+        isCollectionMentionEnabled: (slug)=>!enabledCollectionSlugSet || enabledCollectionSlugSet.has(slug),
+        locales: localization?.locales ?? [],
+        media: pluginConfig?.media
+    };
+};

package/dist/components/{MentionPopover.d.ts → mention-popover/MentionPopover.d.ts}

@@ -1,5 +1,4 @@
 import type { CSSProperties } from "react";
-import type { RefObject } from "react";
 export type MentionOption = {
     collection?: string;
     id?: string;
@@ -7,13 +6,12 @@ export type MentionOption = {
     label: string;
     parent?: string;
     slug: string;
-    type: "block" | "collection" | "doc" | "global" | "locale";
+    type: "collection" | "doc" | "global" | "locale";
 };
 type MentionPopoverProps = {
-    containerRef?: RefObject<HTMLDivElement | null>;
     suggestions: MentionOption[];
     onSelect: (suggestion: MentionOption) => void;
     style?: CSSProperties;
 };
-export declare const MentionPopover: ({ containerRef, onSelect, style, suggestions }: MentionPopoverProps) => import("react").JSX.Element | null;
+export declare const MentionPopover: ({ onSelect, style, suggestions }: MentionPopoverProps) => import("react").JSX.Element | null;
 export {};

package/dist/components/{MentionPopover.js → mention-popover/MentionPopover.js}

@@ -13,10 +13,6 @@ const suggestionGroups = [
         label: "Globals",
         type: "global"
     },
-    {
-        label: "Blocks",
-        type: "block"
-    },
     {
         label: "Locales",
         type: "locale"
@@ -25,18 +21,16 @@ const suggestionGroups = [
 const getSuggestionTitle = (suggestion)=>{
     if (suggestion.type === "collection") return `@${suggestion.slug}`;
     if (suggestion.type === "global") return `@${suggestion.slug}`;
-    if (suggestion.type === "block") return `@${suggestion.slug}`;
     if (suggestion.type === "locale") return `@${suggestion.slug}`;
     return suggestion.label;
 };
 const getSuggestionLabel = (suggestion)=>{
     if (suggestion.type === "collection") return suggestion.label;
     if (suggestion.type === "global") return "global";
-    if (suggestion.type === "block") return `${suggestion.parent} block`;
     if (suggestion.type === "locale") return suggestion.isDefault ? "default locale" : "locale";
     return `${suggestion.collection} item`;
 };
-export const MentionPopover = ({ containerRef, onSelect, style, suggestions })=>{
+export const MentionPopover = ({ onSelect, style, suggestions })=>{
     if (suggestions.length === 0) return null;
     const onKeyDown = (event, suggestion)=>{
         if (event.key === "Enter" || event.key === " ") {
@@ -60,7 +54,6 @@ export const MentionPopover = ({ containerRef, onSelect, style, suggestions })=>
     };
     return /*#__PURE__*/ _jsx("div", {
         className: styles.popover,
-        ref: containerRef,
         style: style,
         children: suggestionGroups.map((group)=>{
             const groupSuggestions = suggestions.filter((s)=>s.type === group.type);

package/dist/components/{MentionPopover.module.css → mention-popover/MentionPopover.module.css}

@@ -8,7 +8,7 @@
     min-width: 260px;
     overflow: auto;
     padding: 6px;
-    position: absolute;
+    position: fixed;
     z-index: 10;
 }
 

package/dist/exports/client.d.ts

@@ -1,4 +1,4 @@
-import AIInput from "../components/AIInput.js";
+import Dashboard from "../components/dashboard/Dashboard.js";
 import APIKeyField from "../components/APIKeyField.js";
-export { AIInput };
+export { Dashboard };
 export { APIKeyField as AIApiKeyField };

package/dist/exports/client.js

@@ -1,4 +1,4 @@
-import AIInput from "../components/AIInput.js";
+import Dashboard from "../components/dashboard/Dashboard.js";
 import APIKeyField from "../components/APIKeyField.js";
-export { AIInput };
+export { Dashboard };
 export { APIKeyField as AIApiKeyField };