@mvriu5/payload-ai 1.3.2 → 1.5.0

package/dist/components/ai-input/AIInput.module.css

@@ -1,9 +1,57 @@
+.collapsible {
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 8px;
+    margin-bottom: 20px;
+    overflow: hidden;
+    width: 100%;
+}
+
+.collapsibleToggle {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    color: var(--theme-text);
+    cursor: pointer;
+    display: flex;
+    font: inherit;
+    font-weight: 600;
+    justify-content: space-between;
+    min-height: 44px;
+    padding: 0 20px;
+    text-align: left;
+    width: 100%;
+}
+
+.collapsibleToggle:hover {
+    color: var(--theme-elevation-800);
+}
+
+.collapsibleToggle:focus-visible {
+    outline: 2px solid var(--theme-success-500);
+    outline-offset: 2px;
+}
+
+.collapsibleToggle .collapsibleChevron {
+    flex: 0 0 24px;
+    height: 24px;
+    width: 24px;
+}
+
+.collapsibleContent {
+    padding: 0;
+}
+
+.collapsibleContent .chat {
+    border: 0;
+    border-radius: 0;
+    padding-top: 0;
+}
+
 .chatLayout {
     width: 100%;
     max-width: none;
     display: flex;
     flex-direction: column;
-    height: 332px;
     overflow: hidden;
 }
 
@@ -108,9 +156,47 @@
     display: none;
 }
 
+.mediaButton {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    bottom: 8px;
+    color: var(--theme-elevation-600);
+    cursor: pointer;
+    display: inline-flex;
+    height: 28px;
+    justify-content: center;
+    padding: 0;
+    position: absolute;
+    right: 8px;
+    width: 28px;
+    z-index: 1;
+}
+
+.mediaButton:hover,
+.mediaButton:focus-visible {
+    color: var(--theme-text);
+}
+
+.mediaButton:focus-visible {
+    outline: 1px solid currentColor;
+    outline-offset: 1px;
+}
+
+.mediaButton:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+.mediaButton svg {
+    height: 16px;
+    width: 16px;
+}
+
 .chatInput {
     background: transparent;
     border: 0;
+    box-sizing: border-box;
     color: var(--theme-text);
     font: inherit;
     flex: 1 1 0;
@@ -118,7 +204,7 @@
     min-height: 0;
     overflow-y: auto;
     overscroll-behavior: contain;
-    padding: 0;
+    padding: 0 32px 32px 0;
     white-space: pre-wrap;
     word-break: break-word;
     width: 100%;
@@ -161,6 +247,7 @@
     flex-wrap: wrap;
     gap: 6px;
     min-height: 22px;
+    padding-right: 32px;
 }
 
 .attachmentPill {

package/dist/components/audit-log-list/AuditLogList.js

@@ -12,8 +12,15 @@ const getChangeProposal = (change)=>({
         label: change.title,
         slug: change.slug || undefined
     });
+const fallbackConfig = {
+    routes: {
+        admin: "/admin",
+        api: "/api"
+    }
+};
 const AuditLogList = ()=>{
-    const { config } = useConfig();
+    const payloadConfigContext = useConfig();
+    const config = payloadConfigContext?.config ?? fallbackConfig;
     const { loadRecentChanges, allChangesURL, appliedChanges: changes } = useAuditLog({
         adminRoute: config.routes.admin,
         apiRoute: config.routes.api
@@ -43,7 +50,7 @@ const AuditLogList = ()=>{
                     allChangesURL && /*#__PURE__*/ _jsx(Button, {
                         url: allChangesURL,
                         el: "anchor",
-                        "aria-labelabel": "View all",
+                        "aria-label": "View all",
                         margin: false,
                         buttonStyle: "tab",
                         size: "small",

package/dist/components/dashboard/Dashboard.js

@@ -7,7 +7,9 @@ const Dashboard = ()=>{
     return /*#__PURE__*/ _jsxs("div", {
         className: styles.dashboard,
         children: [
-            /*#__PURE__*/ _jsx(AIInput, {}),
+            /*#__PURE__*/ _jsx(AIInput, {
+                isDashboard: true
+            }),
             /*#__PURE__*/ _jsx(AuditLogList, {})
         ]
     });

package/dist/components/generate-field/GenerateField.d.ts

@@ -0,0 +1,11 @@
+type GenerateFieldProps = {
+    field?: {
+        hasMany?: boolean;
+    };
+    generationFieldKey: string;
+    generationFieldType: "json" | "richText" | "text" | "textarea";
+    path: string;
+    readOnly?: boolean;
+};
+declare const GenerateField: ({ field, generationFieldKey, generationFieldType, path, readOnly }: GenerateFieldProps) => import("react").JSX.Element | null;
+export default GenerateField;

package/dist/components/generate-field/GenerateField.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConfig, useDocumentForm, useDocumentInfo, useField, useLocale } from "@payloadcms/ui";
+import { formatAdminURL } from "payload/shared";
+import { useState } from "react";
+import { createGeneratedRichTextValue } from "./richText.js";
+import styles from "./GenerateField.module.css";
+const pendingRequests = new Map();
+const requestGeneratedValue = ({ apiRoute, body, cacheKey })=>{
+    const pending = pendingRequests.get(cacheKey);
+    if (pending) return pending;
+    const request = fetch(formatAdminURL({
+        apiRoute,
+        path: "/ai-generate-field"
+    }), {
+        body: JSON.stringify(body),
+        headers: {
+            "Content-Type": "application/json"
+        },
+        method: "POST"
+    }).then(async (response)=>{
+        const result = await response.json().catch(()=>null);
+        if (!response.ok || result?.value === undefined) throw new Error(result?.error || "Could not generate field content.");
+        return result;
+    }).finally(()=>pendingRequests.delete(cacheKey));
+    pendingRequests.set(cacheKey, request);
+    return request;
+};
+const GenerateField = ({ field, generationFieldKey, generationFieldType, path, readOnly })=>{
+    const configContext = useConfig();
+    const documentForm = useDocumentForm();
+    const documentInfo = useDocumentInfo();
+    const locale = useLocale();
+    const { disabled, setValue } = useField({
+        path
+    });
+    const [error, setError] = useState("");
+    const [isGenerating, setIsGenerating] = useState(false);
+    const scope = documentInfo.collectionSlug ? {
+        slug: documentInfo.collectionSlug,
+        type: "collection"
+    } : documentInfo.globalSlug ? {
+        slug: documentInfo.globalSlug,
+        type: "global"
+    } : null;
+    const generate = async ()=>{
+        const apiRoute = configContext?.config?.routes?.api;
+        if (!apiRoute || !scope || isGenerating) return;
+        setError("");
+        setIsGenerating(true);
+        try {
+            const context = documentForm.getData();
+            const cacheKey = JSON.stringify([
+                scope.type,
+                scope.slug,
+                generationFieldKey,
+                locale.code,
+                context
+            ]);
+            const result = await requestGeneratedValue({
+                apiRoute,
+                body: {
+                    context,
+                    fieldKey: generationFieldKey,
+                    locale: locale.code,
+                    scope
+                },
+                cacheKey
+            });
+            if (generationFieldType === "richText") {
+                const value = createGeneratedRichTextValue(result.value);
+                documentForm.dispatchFields({
+                    initialValue: value,
+                    path,
+                    type: "UPDATE",
+                    value
+                });
+            } else {
+                setValue(field?.hasMany ? [
+                    result.value
+                ] : result.value);
+            }
+            documentForm.setModified(true);
+        } catch (err) {
+            setError(err instanceof Error ? err.message : "Could not generate field content.");
+        } finally{
+            setIsGenerating(false);
+        }
+    };
+    if (!scope) return null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: styles.generateField,
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                className: styles.generateButton,
+                disabled: Boolean(readOnly || disabled || isGenerating),
+                onClick: ()=>void generate(),
+                type: "button",
+                children: isGenerating ? "Generating..." : "Generate"
+            }),
+            error && /*#__PURE__*/ _jsx("span", {
+                className: styles.generateError,
+                role: "alert",
+                children: error
+            })
+        ]
+    });
+};
+export default GenerateField;

package/dist/components/generate-field/GenerateField.module.css

@@ -0,0 +1,39 @@
+.generateField {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    margin-top: 6px;
+}
+
+.generateButton {
+    background: transparent;
+    border: 0;
+    color: var(--theme-elevation-600);
+    cursor: pointer;
+    font: inherit;
+    font-size: 12px;
+    line-height: 1.2;
+    padding: 2px 0;
+}
+
+.generateButton:hover,
+.generateButton:focus-visible {
+    color: var(--theme-text);
+}
+
+.generateButton:focus-visible {
+    outline: 1px solid currentColor;
+    outline-offset: 2px;
+}
+
+.generateButton:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+.generateError {
+    color: var(--theme-error-500);
+    font-size: 11px;
+    line-height: 1.2;
+}

package/dist/components/generate-field/richText.d.ts

@@ -0,0 +1,29 @@
+type LexicalTextNode = {
+    detail: number;
+    format: number;
+    mode: "normal";
+    style: string;
+    text: string;
+    type: "text";
+    version: 1;
+};
+type LexicalParagraphNode = {
+    children: LexicalTextNode[];
+    direction: "ltr";
+    format: "";
+    indent: number;
+    type: "paragraph";
+    version: 1;
+};
+export type GeneratedRichTextValue = {
+    root: {
+        children: LexicalParagraphNode[];
+        direction: "ltr";
+        format: "";
+        indent: number;
+        type: "root";
+        version: 1;
+    };
+};
+export declare const createGeneratedRichTextValue: (value: string) => GeneratedRichTextValue;
+export {};

package/dist/components/generate-field/richText.js

@@ -0,0 +1,30 @@
+export const createGeneratedRichTextValue = (value)=>{
+    const paragraphs = value.split(/\n\s*\n/).map((paragraph)=>paragraph.replace(/\s*\n\s*/g, " ").trim()).filter(Boolean);
+    return {
+        root: {
+            children: paragraphs.map((text)=>({
+                    children: [
+                        {
+                            detail: 0,
+                            format: 0,
+                            mode: "normal",
+                            style: "",
+                            text,
+                            type: "text",
+                            version: 1
+                        }
+                    ],
+                    direction: "ltr",
+                    format: "",
+                    indent: 0,
+                    type: "paragraph",
+                    version: 1
+                })),
+            direction: "ltr",
+            format: "",
+            indent: 0,
+            type: "root",
+            version: 1
+        }
+    };
+};

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

@@ -15,16 +15,27 @@ export type MediaAttachment = {
     type: "media";
     url?: string;
 };
-export declare const useAIChatStream: ({ apiRoute, clearInput, mentionsRef, prompt, selectedModel, }: {
+export type DocumentScope = {
+    collection: string;
+    id?: string;
+    type: "collection";
+} | {
+    slug: string;
+    type: "global";
+};
+export declare const useAIChatStream: ({ apiRoute, clearInput, documentScope, mentionsRef, prompt, selectedModel, selectedProvider, }: {
     apiRoute: string;
     clearInput: () => void;
+    documentScope?: DocumentScope;
     mentionsRef: RefObject<Mention[]>;
     prompt: string;
     selectedModel: string;
+    selectedProvider: string | null;
 }) => {
     dismissChat: () => void;
     error: string;
     isLoading: boolean;
+    setIsLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     proposals: ActionProposal[];
     resetChatState: () => void;
     response: string;

package/dist/components/hooks/useAIChatStream.js

@@ -54,7 +54,7 @@ const getChatDebugMessage = (debugInfo)=>{
     }
     return getDebugReasonLabel(debugInfo.reason);
 };
-export const useAIChatStream = ({ apiRoute, clearInput, mentionsRef, prompt, selectedModel })=>{
+export const useAIChatStream = ({ apiRoute, clearInput, documentScope, mentionsRef, prompt, selectedModel, selectedProvider })=>{
     const [response, setResponse] = useState("");
     const [tokenUsage, setTokenUsage] = useState(null);
     const [error, setError] = useState("");
@@ -76,7 +76,6 @@ export const useAIChatStream = ({ apiRoute, clearInput, mentionsRef, prompt, sel
     const submit = useCallback(async ({ attachments = [] } = {})=>{
         const trimmedPrompt = prompt.trim();
         if (!trimmedPrompt) return;
-        setIsLoading(true);
         resetChatState();
         try {
             const res = await fetch(formatAdminURL({
@@ -87,15 +86,22 @@ export const useAIChatStream = ({ apiRoute, clearInput, mentionsRef, prompt, sel
                     ...attachments.length > 0 ? {
                         attachments
                     } : {},
+                    ...documentScope ? {
+                        documentScope
+                    } : {},
                     mentions: mentionsRef.current,
                     model: selectedModel,
-                    prompt: trimmedPrompt
+                    prompt: trimmedPrompt,
+                    ...selectedProvider ? {
+                        provider: selectedProvider
+                    } : {}
                 }),
                 headers: {
                     "Content-Type": "application/json"
                 },
                 method: "POST"
             });
+            setIsLoading(false);
             if (!res.ok) {
                 const result = await res.json().catch(()=>null);
                 throw new Error(result?.error || "AI request failed");
@@ -195,15 +201,18 @@ export const useAIChatStream = ({ apiRoute, clearInput, mentionsRef, prompt, sel
     }, [
         apiRoute,
         clearInput,
+        documentScope,
         mentionsRef,
         prompt,
         resetChatState,
-        selectedModel
+        selectedModel,
+        selectedProvider
     ]);
     return {
         dismissChat,
         error,
         isLoading,
+        setIsLoading,
         proposals,
         resetChatState,
         response,

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

@@ -1,12 +1,14 @@
-import { type AIProvider } from "../../ai/providerOptions.js";
+import type { AIProviderProfile } from "../../ai/providerOptions.js";
 interface UseAISettingsOptions {
     adminUserSlug?: string;
     apiRoute: string;
-    defaultModels: Record<AIProvider, string>;
+    managedProviders: boolean;
+    providerProfiles: AIProviderProfile[];
 }
-export declare const useAISettings: ({ adminUserSlug, apiRoute, defaultModels }: UseAISettingsOptions) => {
+export declare const useAISettings: ({ adminUserSlug, apiRoute, managedProviders, providerProfiles }: UseAISettingsOptions) => {
     selectedModel: string;
     setSelectedModel: (model: string) => void;
-    settingsProvider: "claude" | "google" | "mistral" | "openai" | "openrouter" | null;
+    setSelectedProviderModel: (provider: string, model: string) => void;
+    settingsProvider: string | null;
 };
 export {};

package/dist/components/hooks/useAISettings.js

@@ -1,8 +1,8 @@
 "use client";
 import { formatAdminURL } from "payload/shared";
 import { useEffect, useState } from "react";
-import { isAIProvider } from "../../ai/providerOptions.js";
 import { isAbortError } from "../../payload/shared.js";
+const managedSelectionKey = "payload-ai:selected-managed-model";
 const getStoredModelKey = (provider)=>`payload-ai:selected-model:${provider}`;
 const getStoredModel = (provider)=>{
     if (typeof window === "undefined") return null;
@@ -12,6 +12,19 @@ const storeModel = (provider, model)=>{
     if (typeof window === "undefined") return;
     window.localStorage.setItem(getStoredModelKey(provider), model);
 };
+const getStoredManagedSelection = ()=>{
+    if (typeof window === "undefined") return null;
+    try {
+        const value = JSON.parse(window.localStorage.getItem(managedSelectionKey) || "null");
+        return value && typeof value.provider === "string" && typeof value.model === "string" ? value : null;
+    } catch  {
+        return null;
+    }
+};
+const storeManagedSelection = (selection)=>{
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(managedSelectionKey, JSON.stringify(selection));
+};
 const fetchCurrentUserProvider = async ({ adminUserSlug, apiRoute, signal })=>{
     const res = await fetch(formatAdminURL({
         apiRoute,
@@ -21,20 +34,44 @@ const fetchCurrentUserProvider = async ({ adminUserSlug, apiRoute, signal })=>{
     });
     if (!res.ok) return null;
     const result = await res.json();
-    const provider = result.user?.aiProvider;
-    return provider && isAIProvider(provider) ? provider : null;
+    return result.user?.aiProvider || null;
 };
-export const useAISettings = ({ adminUserSlug, apiRoute, defaultModels })=>{
-    const [fetchedProvider, setFetchedProvider] = useState(null);
-    const [selectedModel, setSelectedModel] = useState("");
-    const setStoredSelectedModel = (model)=>{
-        setSelectedModel(model);
-        if (fetchedProvider && model) {
-            storeModel(fetchedProvider, model);
+const hasModel = (profile, model)=>profile.models.some((option)=>option.value === model);
+export const useAISettings = ({ adminUserSlug, apiRoute, managedProviders, providerProfiles })=>{
+    const [settingsProvider, setSettingsProvider] = useState(null);
+    const [selectedModel, setSelectedModelState] = useState("");
+    const setSelectedProviderModel = (provider, model)=>{
+        const profile = providerProfiles.find((candidate)=>candidate.id === provider);
+        if (!profile || !hasModel(profile, model)) return;
+        setSettingsProvider(provider);
+        setSelectedModelState(model);
+        if (managedProviders) {
+            storeManagedSelection({
+                model,
+                provider
+            });
+        } else {
+            storeModel(provider, model);
         }
     };
+    const setSelectedModel = (model)=>{
+        if (settingsProvider) setSelectedProviderModel(settingsProvider, model);
+    };
     useEffect(()=>{
-        if (!adminUserSlug) return;
+        if (managedProviders) {
+            const storedSelection = getStoredManagedSelection();
+            const storedProfile = storedSelection ? providerProfiles.find((profile)=>profile.id === storedSelection.provider && hasModel(profile, storedSelection.model)) : null;
+            const profile = storedProfile || providerProfiles[0];
+            const model = storedProfile && storedSelection ? storedSelection.model : profile?.defaultModel;
+            setSettingsProvider(profile?.id || null);
+            setSelectedModelState(model || "");
+            return;
+        }
+        if (!adminUserSlug) {
+            setSettingsProvider(null);
+            setSelectedModelState("");
+            return;
+        }
         const abortController = new AbortController();
         const loadCurrentUserProvider = async ()=>{
             try {
@@ -43,17 +80,19 @@ export const useAISettings = ({ adminUserSlug, apiRoute, defaultModels })=>{
                     apiRoute,
                     signal: abortController.signal
                 });
-                if (!provider) {
-                    setFetchedProvider(null);
-                    setSelectedModel("");
+                const profile = providerProfiles.find((candidate)=>candidate.id === provider);
+                if (!profile) {
+                    setSettingsProvider(null);
+                    setSelectedModelState("");
                     return;
                 }
-                setFetchedProvider(provider);
-                setSelectedModel(getStoredModel(provider) || defaultModels[provider]);
+                const storedModel = getStoredModel(profile.id);
+                setSettingsProvider(profile.id);
+                setSelectedModelState(storedModel && hasModel(profile, storedModel) ? storedModel : profile.defaultModel);
             } catch (err) {
                 if (isAbortError(err)) return;
-                setFetchedProvider(null);
-                setSelectedModel("");
+                setSettingsProvider(null);
+                setSelectedModelState("");
             }
         };
         void loadCurrentUserProvider();
@@ -61,12 +100,13 @@ export const useAISettings = ({ adminUserSlug, apiRoute, defaultModels })=>{
     }, [
         adminUserSlug,
         apiRoute,
-        defaultModels
+        managedProviders,
+        providerProfiles
     ]);
-    const settingsProvider = adminUserSlug ? fetchedProvider : null;
     return {
-        selectedModel: adminUserSlug ? selectedModel : "",
-        setSelectedModel: setStoredSelectedModel,
+        selectedModel,
+        setSelectedModel,
+        setSelectedProviderModel,
         settingsProvider
     };
 };

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

@@ -1,3 +1,4 @@
+import { type AIProviderProfile } from "../../ai/providerOptions.js";
 type MediaConfig = {
     acceptedMimeTypes?: string[];
     collectionSlug: string;
@@ -21,32 +22,19 @@ export declare const usePluginConfig: (config: {
     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;
-            }[];
+            claude: import("../../ai/providerOptions.js").AIProviderModelOption[];
+            google: import("../../ai/providerOptions.js").AIProviderModelOption[];
+            mistral: import("../../ai/providerOptions.js").AIProviderModelOption[];
+            openai: import("../../ai/providerOptions.js").AIProviderModelOption[];
+            openrouter: import("../../ai/providerOptions.js").AIProviderModelOption[];
         };
     };
     defaultLocale: string | undefined;
     enabledCollectionSlugSet: Set<string> | null;
     isCollectionMentionEnabled: (slug: string) => boolean;
     locales: LocaleConfig[];
+    managedProviders: boolean;
     media: MediaConfig | undefined;
+    providerProfiles: AIProviderProfile[];
 };
 export {};