@mvriu5/payload-ai 1.2.0 → 1.3.2

package/README.md

@@ -54,6 +54,10 @@ import type { PayloadAiPluginOptions } from "@mvriu5/payload-ai";
 const options: PayloadAiPluginOptions = {
   allowUserApiKeys: false,
   collections: {
+    media: {
+      read: true,
+      update: true,
+    },
     posts: {
       read: true,
       create: true,
@@ -62,6 +66,12 @@ const options: PayloadAiPluginOptions = {
     },
     users: true,
   },
+  media: {
+    enabled: true,
+    collectionSlug: "media",
+    acceptedMimeTypes: ["image/*"],
+    maxFileSize: 10 * 1024 * 1024,
+  },
   models: {
     defaults: {
       openai: "gpt-4.1-mini",
@@ -124,6 +134,38 @@ payloadAiPlugin({
 
 `read` controls schema/context access, document search, and mentions. `create`, `update`, and `delete` control AI action proposals and server-side apply permissions.
 
+### `media`
+
+Enables media uploads from the AI assistant. Uploaded files are created through the configured Payload upload collection and then passed to the chat endpoint as media attachments.
+
+```ts
+payloadAiPlugin({
+  collections: {
+    media: {
+      read: true,
+      update: true,
+    },
+    posts: true,
+  },
+  media: {
+    enabled: true,
+    collectionSlug: "media",
+    acceptedMimeTypes: ["image/*"],
+    maxFileSize: 10 * 1024 * 1024,
+  },
+})
+```
+
+`collectionSlug` defaults to `"media"`. The target collection must be configured with Payload `upload` support.
+
+`acceptedMimeTypes` accepts exact MIME types such as `"image/png"` and wildcard groups such as `"image/*"`. If omitted, all file types accepted by the upload collection can be sent to the endpoint.
+
+`maxFileSize` is checked before creating the upload document. The value is in bytes.
+
+If you want the AI to use uploaded files in other documents, enable `read` on the media collection so the chat endpoint can validate and inspect the uploaded media document. If the media collection has editable fields such as `alt`, `caption`, or `credit` and you want the AI to fill them, also enable `update` for that collection.
+
+Upload references in AI proposals are restricted to the uploaded attachments for the current request. This prevents the model from inventing arbitrary media IDs for upload fields.
+
 ### `models`
 
 Overrides the model list shown in the admin UI and the default model per provider.

package/dist/components/Icons.d.ts

@@ -4,11 +4,3 @@ export declare function OpenaiIcon(props: SVGProps<SVGSVGElement>): import("reac
 export declare function ClaudeIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function GoogleGeminiIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function OpenrouterIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
-export declare function FileDiff(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
-export declare function Send(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
-export declare function Apply(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
-export declare function Reject(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
-export declare function Collection(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
-export declare function Document(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
-export declare function Global(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
-export declare function Block(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/components/Icons.js

@@ -257,232 +257,20 @@ export function OpenrouterIcon(props) {
             clipPath: "url(#clip0_205_3)",
             children: [
                 /*#__PURE__*/ _jsx("path", {
-                    d: "M3 248.945C18 248.945 76 236 106 219C136 202 136 202 198 158C276.497 102.293 332 120.945 423 120.945",
+                    d: "M3 248.95C18 248.95 76 236 106 219C136 202 136 202 198 158C276.5 102.29 332 120.95 423 120.95",
                     strokeWidth: "90"
                 }),
                 /*#__PURE__*/ _jsx("path", {
-                    d: "M511 121.5L357.25 210.268L357.25 32.7324L511 121.5Z"
+                    d: "M511 121.5L357.25 210.27L357.25 32.73L511 121.5Z"
                 }),
                 /*#__PURE__*/ _jsx("path", {
-                    d: "M0 249C15 249 73 261.945 103 278.945C133 295.945 133 295.945 195 339.945C273.497 395.652 329 377 420 377",
+                    d: "M0 249C15 249 73 261.95 103 278.95C133 295.95 133 295.95 195 339.95C273.5 395.65 329 377 420 377",
                     strokeWidth: "90"
                 }),
                 /*#__PURE__*/ _jsx("path", {
-                    d: "M508 376.445L354.25 287.678L354.25 465.213L508 376.445Z"
+                    d: "M508 376.45L354.25 287.68L354.25 465.21L508 376.45Z"
                 })
             ]
         })
     });
 }
-export function FileDiff(props) {
-    return /*#__PURE__*/ _jsxs("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: 2,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx("path", {
-                stroke: "none",
-                d: "M0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M14 3v4a1 1 0 0 0 1 1h4"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M12 10l0 4"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M10 12l4 0"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M10 17l4 0"
-            })
-        ]
-    });
-}
-export function Send(props) {
-    return /*#__PURE__*/ _jsxs("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: 2,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx("path", {
-                stroke: "none",
-                d: "M0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M10 14l11 -11"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"
-            })
-        ]
-    });
-}
-export function Apply(props) {
-    return /*#__PURE__*/ _jsxs("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: 2,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx("path", {
-                stroke: "none",
-                d: "M0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M5 12l5 5l10 -10"
-            })
-        ]
-    });
-}
-export function Reject(props) {
-    return /*#__PURE__*/ _jsxs("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: 2,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx("path", {
-                stroke: "none",
-                d: "M0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M18 6l-12 12"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M6 6l12 12"
-            })
-        ]
-    });
-}
-export function Collection(props) {
-    return /*#__PURE__*/ _jsxs("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: 2,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx("path", {
-                stroke: "none",
-                d: "M0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"
-            })
-        ]
-    });
-}
-export function Document(props) {
-    return /*#__PURE__*/ _jsxs("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: 2,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx("path", {
-                stroke: "none",
-                d: "M0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M14 3v4a1 1 0 0 0 1 1h4"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"
-            })
-        ]
-    });
-}
-export function Global(props) {
-    return /*#__PURE__*/ _jsxs("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: 2,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx("path", {
-                stroke: "none",
-                d: "M0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M3.6 9h16.8"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M3.6 15h16.8"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M11.5 3a17 17 0 0 0 0 18"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M12.5 3a17 17 0 0 1 0 18"
-            })
-        ]
-    });
-}
-export function Block(props) {
-    return /*#__PURE__*/ _jsxs("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: 2,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx("path", {
-                stroke: "none",
-                d: "M0 0h24v24H0z",
-                fill: "none"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M14 4a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1l0 -5"
-            }),
-            /*#__PURE__*/ _jsx("path", {
-                d: "M3 14h12a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h3a2 2 0 0 1 2 2v12"
-            })
-        ]
-    });
-}

package/dist/components/{ActionToast.d.ts → action-toast/ActionToast.d.ts}

@@ -11,7 +11,6 @@ export type ActionProposal = {
 };
 type ActionToastProps = {
     apiRoute: string;
-    appliedProposalIndexes: number[];
     description?: string;
     error?: string;
     getViewURL?: (proposal: ActionProposal) => string | null;
@@ -27,5 +26,5 @@ type ActionToastProps = {
         totalTokens?: number;
     } | null;
 };
-export declare const ActionToast: ({ apiRoute, appliedProposalIndexes, description, error, getViewURL, isApplying, onDismiss, onDismissError, onApply, prompt, proposals, tokenUsage, }: ActionToastProps) => import("react").JSX.Element | null;
+export declare const ActionToast: ({ apiRoute, description, error, getViewURL, isApplying, onDismiss, onDismissError, onApply, prompt, proposals, tokenUsage, }: ActionToastProps) => import("react").JSX.Element | null;
 export {};

package/dist/components/{ActionToast.js → action-toast/ActionToast.js}

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from "./ActionToast.module.css";
-import { redactSensitiveData } from "../ai/sensitiveData.js";
+import { Button, CheckIcon, SwapIcon } from "@payloadcms/ui";
 import { formatAdminURL } from "payload/shared";
 import { useState } from "react";
-import { DiffDialog } from "./DiffDialog.js";
-import { Apply, FileDiff, Reject } from "./Icons.js";
+import { redactSensitiveData } from "../../ai/sensitiveData.js";
+import { DiffDialog } from "../diff-dialog/DiffDialog.js";
+import styles from "./ActionToast.module.css";
 const maxDescriptionLength = 220;
 const getDescriptionPreview = (description)=>{
     if (description.length <= maxDescriptionLength) return description;
@@ -20,7 +20,7 @@ const getSafeProposalDetails = (proposal)=>{
     }
     return redactedProposal;
 };
-export const ActionToast = ({ apiRoute, appliedProposalIndexes, description, error, getViewURL, isApplying, onDismiss, onDismissError, onApply, prompt, proposals, tokenUsage })=>{
+export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplying, onDismiss, onDismissError, onApply, prompt, proposals, tokenUsage })=>{
     const [activeDiff, setActiveDiff] = useState(null);
     const [diffError, setDiffError] = useState("");
     const [loadingDiffIndex, setLoadingDiffIndex] = useState(null);
@@ -117,7 +117,6 @@ export const ActionToast = ({ apiRoute, appliedProposalIndexes, description, err
                 })
             }),
             proposals.map((proposal, index)=>{
-                const isApplied = appliedProposalIndexes.includes(index);
                 const viewURL = getViewURL?.(proposal);
                 return /*#__PURE__*/ _jsxs("div", {
                     className: styles.item,
@@ -176,25 +175,23 @@ export const ActionToast = ({ apiRoute, appliedProposalIndexes, description, err
                                 /*#__PURE__*/ _jsxs("div", {
                                     className: styles.viewAction,
                                     children: [
-                                        /*#__PURE__*/ _jsxs("button", {
+                                        /*#__PURE__*/ _jsxs(Button, {
                                             "aria-label": `Review proposal: ${proposal.label}`,
-                                            className: styles.secondaryButton,
+                                            margin: false,
+                                            buttonStyle: "subtle",
                                             disabled: loadingDiffIndex === index,
                                             onClick: ()=>void openDiff(proposal, index),
-                                            type: "button",
                                             children: [
-                                                /*#__PURE__*/ _jsx(FileDiff, {
-                                                    height: 16,
-                                                    width: 16
-                                                }),
+                                                /*#__PURE__*/ _jsx(SwapIcon, {}),
                                                 loadingDiffIndex === index ? "Loading" : "Review"
                                             ]
                                         }),
-                                        viewURL && /*#__PURE__*/ _jsx("a", {
-                                            className: styles.ghostButton,
-                                            href: viewURL,
-                                            rel: "noreferrer noopener",
-                                            target: "_blank",
+                                        viewURL && /*#__PURE__*/ _jsx(Button, {
+                                            el: "anchor",
+                                            buttonStyle: "tab",
+                                            url: viewURL,
+                                            newTab: true,
+                                            margin: false,
                                             children: "Go to source"
                                         })
                                     ]
@@ -202,26 +199,20 @@ export const ActionToast = ({ apiRoute, appliedProposalIndexes, description, err
                                 /*#__PURE__*/ _jsxs("div", {
                                     className: styles.actions,
                                     children: [
-                                        onDismiss && /*#__PURE__*/ _jsx("button", {
+                                        onDismiss && /*#__PURE__*/ _jsx(Button, {
+                                            icon: "x",
                                             "aria-label": "Dismiss proposals",
-                                            className: styles.secondaryButton,
-                                            onClick: onDismiss,
-                                            type: "button",
-                                            children: /*#__PURE__*/ _jsx(Reject, {
-                                                height: 16,
-                                                width: 16
-                                            })
+                                            buttonStyle: "subtle",
+                                            margin: false,
+                                            onClick: onDismiss
                                         }),
-                                        /*#__PURE__*/ _jsx("button", {
+                                        /*#__PURE__*/ _jsx(Button, {
                                             "aria-label": `Apply proposal: ${proposal.label}`,
-                                            className: styles.button,
-                                            disabled: isApplying || isApplied,
+                                            margin: false,
+                                            buttonStyle: "primary",
+                                            disabled: isApplying,
                                             onClick: ()=>onApply(proposal, index),
-                                            type: "button",
-                                            children: /*#__PURE__*/ _jsx(Apply, {
-                                                height: 16,
-                                                width: 16
-                                            })
+                                            children: /*#__PURE__*/ _jsx(CheckIcon, {})
                                         })
                                     ]
                                 })

package/dist/components/{ActionToast.module.css → action-toast/ActionToast.module.css}

@@ -106,79 +106,6 @@
     gap: 8px;
 }
 
-.button {
-    align-items: center;
-    background: var(--theme-text);
-    border: 0;
-    border-radius: 4px;
-    color: var(--theme-bg);
-    cursor: pointer;
-    display: inline-flex;
-    flex: 0 0 auto;
-    font: inherit;
-    gap: 6px;
-    justify-content: center;
-    line-height: 24px;
-    min-height: 24px;
-    padding: 0 14px;
-}
-
-.secondaryButton {
-    align-items: center;
-    background: transparent;
-    border: 1px solid var(--theme-elevation-150);
-    border-radius: 4px;
-    color: var(--theme-text);
-    cursor: pointer;
-    display: inline-flex;
-    flex: 0 0 auto;
-    font: inherit;
-    gap: 6px;
-    justify-content: center;
-    line-height: 24px;
-    min-height: 24px;
-    padding: 0 14px;
-    text-decoration: none;
-}
-
-.secondaryButton svg {
-    color: var(--theme-elevation-500);
-    flex: 0 0 auto;
-}
-
-.button svg {
-    flex: 0 0 auto;
-}
-
-.ghostButton {
-    background: transparent;
-    border: 0;
-    border-radius: 4px;
-    color: var(--theme-elevation-600);
-    cursor: pointer;
-    flex: 0 0 auto;
-    font: inherit;
-    line-height: 24px;
-    min-height: 24px;
-    padding: 0 10px;
-    text-decoration: none;
-}
-
-.ghostButton:hover {
-    text-decoration: underline;
-}
-
-.button:disabled {
-    cursor: not-allowed;
-    opacity: 0.45;
-}
-
-.secondaryButton:disabled,
-.ghostButton:disabled {
-    cursor: not-allowed;
-    opacity: 0.45;
-}
-
 @media (max-width: 768px) {
     .list {
         bottom: 16px;
@@ -210,10 +137,4 @@
         align-items: stretch;
         flex-direction: column;
     }
-
-    .button,
-    .secondaryButton,
-    .ghostButton {
-        width: 100%;
-    }
 }