@mvriu5/payload-ai 1.3.2 → 1.4.0

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 {};

package/dist/components/hooks/usePluginConfig.js

@@ -1,10 +1,15 @@
 import { useMemo } from "react";
-import { getResolvedAIModelConfig } from "../../ai/providerOptions.js";
+import { getLegacyAIProviderProfiles, getResolvedAIModelConfig } from "../../ai/providerOptions.js";
 export const usePluginConfig = (config)=>{
     const pluginConfig = config.admin?.custom?.payloadAiPlugin;
     const aiModelConfig = useMemo(()=>getResolvedAIModelConfig(pluginConfig?.models), [
         pluginConfig?.models
     ]);
+    const providerProfiles = useMemo(()=>pluginConfig?.managedProviders ? pluginConfig.providers || [] : getLegacyAIProviderProfiles(pluginConfig?.models), [
+        pluginConfig?.managedProviders,
+        pluginConfig?.models,
+        pluginConfig?.providers
+    ]);
     const enabledCollectionSlugSet = useMemo(()=>pluginConfig?.collectionSlugs ? new Set(pluginConfig.collectionSlugs) : null, [
         pluginConfig?.collectionSlugs
     ]);
@@ -15,6 +20,8 @@ export const usePluginConfig = (config)=>{
         enabledCollectionSlugSet,
         isCollectionMentionEnabled: (slug)=>!enabledCollectionSlugSet || enabledCollectionSlugSet.has(slug),
         locales: localization?.locales ?? [],
-        media: pluginConfig?.media
+        managedProviders: Boolean(pluginConfig?.managedProviders),
+        media: pluginConfig?.media,
+        providerProfiles
     };
 };

package/dist/components/text-shimmer/TextShimmer.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type TextShimmerProps = {
+    children: string;
+    as?: React.ElementType;
+    className?: string;
+    duration?: number;
+    spread?: number;
+};
+export declare function TextShimmer({ children, as: Component, className, duration, spread }: TextShimmerProps): React.JSX.Element;

package/dist/components/text-shimmer/TextShimmer.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import styles from "./TextShimmer.module.css";
+export function TextShimmer({ children, as: Component = "p", className, duration = 1, spread = 2 }) {
+    const dynamicSpread = useMemo(()=>{
+        return children.length * spread;
+    }, [
+        children,
+        spread
+    ]);
+    return /*#__PURE__*/ _jsx(Component, {
+        className: `${className ?? ""} ${styles.textShimmer}`,
+        style: {
+            position: "relative",
+            display: "inline-block",
+            backgroundImage: `
+      linear-gradient(
+        90deg,
+        transparent calc(50% - ${dynamicSpread}px),
+        var(--shimmer-color, #000),
+        transparent calc(50% + ${dynamicSpread}px)
+      ),
+      linear-gradient(var(--base-color, #a1a1aa), var(--base-color, #a1a1aa))
+    `,
+            backgroundSize: "250% 100%, auto",
+            backgroundRepeat: "no-repeat",
+            backgroundClip: "text",
+            WebkitBackgroundClip: "text",
+            color: "transparent"
+        },
+        children: children
+    });
+}

package/dist/components/text-shimmer/TextShimmer.module.css

@@ -0,0 +1,19 @@
+.textShimmer {
+    animation: textShimmer 2s linear infinite;
+}
+
+@keyframes textShimmer {
+    0% {
+        background-position: 250% 0;
+    }
+    100% {
+        background-position: -250% 0;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --base-color: #71717a;
+        --shimmer-color: #ffffff;
+    }
+}

package/dist/exports/client.d.ts

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

package/dist/exports/client.js

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

package/dist/handlers/chatHandler.d.ts

@@ -1,6 +1,7 @@
 import type { PayloadHandler } from "payload";
 import { type AIActionSignature } from "../ai/proposalSigning.js";
-import { type AIModelConfig } from "../ai/providerOptions.js";
+import { type AIModelConfig, type ResolvedAIProviderConfig } from "../ai/providerOptions.js";
+import { type ResolvedMaxTokenUsageOptions } from "../ai/tokenUsage.js";
 import { type ResolvedCollectionPermissionMap } from "../payload/collectionPermissions.js";
 type LocalizedDataInput = Record<string, Record<string, unknown>>;
 type ProposalWritePayload = {
@@ -36,7 +37,9 @@ type ChatOptions = {
     allowUserApiKeys?: boolean;
     collections?: ResolvedCollectionPermissionMap;
     maxOutputTokens?: number;
+    maxTokenUsage?: ResolvedMaxTokenUsageOptions;
     models?: AIModelConfig;
+    providers?: ResolvedAIProviderConfig[];
 };
 export declare const createChatHandler: (options?: ChatOptions) => PayloadHandler;
 export {};