@mvriu5/payload-ai 1.3.2 → 1.4.0

package/dist/components/action-toast/ActionToast.js

@@ -4,7 +4,28 @@ import { formatAdminURL } from "payload/shared";
 import { useState } from "react";
 import { redactSensitiveData } from "../../ai/sensitiveData.js";
 import { DiffDialog } from "../diff-dialog/DiffDialog.js";
+import { TextShimmer } from "../text-shimmer/TextShimmer.js";
 import styles from "./ActionToast.module.css";
+const ACTION_TOAST_TEXT = {
+    aiRequestFailed: "AI request failed",
+    aiResponse: "AI response",
+    applyProposal: "Apply proposal",
+    details: "Details",
+    diffReviewFailed: "Diff review failed",
+    dismiss: "Dismiss",
+    dismissProposals: "Dismiss proposals",
+    fullResponse: "Full response",
+    goToSource: "Go to source",
+    loading: "Loading",
+    proposalDiffError: "Could not load proposal diff.",
+    redacted: "[redacted]",
+    review: "Review",
+    reviewProposal: "Review proposal",
+    waitingForResponse: "Please wait, until the Response is received"
+};
+const PROPOSAL_DIFF_ENDPOINT = "/ai-proposal-diff";
+const JSON_CONTENT_TYPE = "application/json";
+const POST_METHOD = "POST";
 const maxDescriptionLength = 220;
 const getDescriptionPreview = (description)=>{
     if (description.length <= maxDescriptionLength) return description;
@@ -15,16 +36,16 @@ const getSafeProposalDetails = (proposal)=>{
     if (redactedProposal._aiSignature) {
         redactedProposal._aiSignature = {
             expiresAt: redactedProposal._aiSignature.expiresAt,
-            value: "[redacted]"
+            value: ACTION_TOAST_TEXT.redacted
         };
     }
     return redactedProposal;
 };
-export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplying, onDismiss, onDismissError, onApply, prompt, proposals, tokenUsage })=>{
+export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplying, isLoading, onDismiss, onDismissError, onApply, prompt, proposals, tokenUsage })=>{
     const [activeDiff, setActiveDiff] = useState(null);
     const [diffError, setDiffError] = useState("");
     const [loadingDiffIndex, setLoadingDiffIndex] = useState(null);
-    if (proposals.length === 0 && !error && !description) return null;
+    if (proposals.length === 0 && !error && !description && !isLoading) return null;
     const descriptionPreview = description ? getDescriptionPreview(description) : "";
     const isDescriptionTruncated = Boolean(description) && descriptionPreview !== description;
     const openDiff = async (proposal, index)=>{
@@ -33,20 +54,20 @@ export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplyi
         try {
             const res = await fetch(formatAdminURL({
                 apiRoute,
-                path: "/ai-proposal-diff"
+                path: PROPOSAL_DIFF_ENDPOINT
             }), {
                 body: JSON.stringify({
                     proposal,
                     prompt
                 }),
                 headers: {
-                    "Content-Type": "application/json"
+                    "Content-Type": JSON_CONTENT_TYPE
                 },
-                method: "POST"
+                method: POST_METHOD
             });
             const result = await res.json().catch(()=>null);
             if (!res.ok || !result) {
-                throw new Error(result?.error || "Could not load proposal diff.");
+                throw new Error(result?.error || ACTION_TOAST_TEXT.proposalDiffError);
             }
             setActiveDiff({
                 change: null,
@@ -57,7 +78,7 @@ export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplyi
                 proposal
             });
         } catch (err) {
-            setDiffError(err instanceof Error ? err.message : "Could not load proposal diff.");
+            setDiffError(err instanceof Error ? err.message : ACTION_TOAST_TEXT.proposalDiffError);
         } finally{
             setLoadingDiffIndex(null);
         }
@@ -65,6 +86,21 @@ export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplyi
     return /*#__PURE__*/ _jsxs("div", {
         className: styles.list,
         children: [
+            proposals.length === 0 && isLoading && /*#__PURE__*/ _jsxs("div", {
+                className: styles.item,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles.label,
+                        children: ACTION_TOAST_TEXT.aiResponse
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles.description,
+                        children: /*#__PURE__*/ _jsx(TextShimmer, {
+                            children: ACTION_TOAST_TEXT.waitingForResponse
+                        })
+                    })
+                ]
+            }),
             error && /*#__PURE__*/ _jsxs("div", {
                 className: `${styles.item} ${styles.errorItem}`,
                 children: [
@@ -72,7 +108,7 @@ export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplyi
                         children: [
                             /*#__PURE__*/ _jsx("div", {
                                 className: styles.label,
-                                children: "AI request failed"
+                                children: ACTION_TOAST_TEXT.aiRequestFailed
                             }),
                             /*#__PURE__*/ _jsx("div", {
                                 className: styles.description,
@@ -84,7 +120,7 @@ export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplyi
                         className: styles.button,
                         onClick: onDismissError,
                         type: "button",
-                        children: "Dismiss"
+                        children: ACTION_TOAST_TEXT.dismiss
                     })
                 ]
             }),
@@ -94,7 +130,7 @@ export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplyi
                     children: [
                         /*#__PURE__*/ _jsx("div", {
                             className: styles.label,
-                            children: "AI response"
+                            children: ACTION_TOAST_TEXT.aiResponse
                         }),
                         /*#__PURE__*/ _jsx("div", {
                             className: styles.description,
@@ -105,7 +141,7 @@ export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplyi
                             children: [
                                 /*#__PURE__*/ _jsx("summary", {
                                     className: styles.summary,
-                                    children: "Full response"
+                                    children: ACTION_TOAST_TEXT.fullResponse
                                 }),
                                 /*#__PURE__*/ _jsx("pre", {
                                     className: styles.proposalDetails,
@@ -146,7 +182,7 @@ export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplyi
                                     children: [
                                         /*#__PURE__*/ _jsx("summary", {
                                             className: styles.summary,
-                                            children: "Full response"
+                                            children: ACTION_TOAST_TEXT.fullResponse
                                         }),
                                         /*#__PURE__*/ _jsx("pre", {
                                             className: styles.proposalDetails,
@@ -159,7 +195,7 @@ export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplyi
                                     children: [
                                         /*#__PURE__*/ _jsx("summary", {
                                             className: styles.summary,
-                                            children: "Details"
+                                            children: ACTION_TOAST_TEXT.details
                                         }),
                                         /*#__PURE__*/ _jsx("pre", {
                                             className: styles.proposalDetails,
@@ -176,14 +212,14 @@ export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplyi
                                     className: styles.viewAction,
                                     children: [
                                         /*#__PURE__*/ _jsxs(Button, {
-                                            "aria-label": `Review proposal: ${proposal.label}`,
+                                            "aria-label": `${ACTION_TOAST_TEXT.reviewProposal}: ${proposal.label}`,
                                             margin: false,
                                             buttonStyle: "subtle",
                                             disabled: loadingDiffIndex === index,
                                             onClick: ()=>void openDiff(proposal, index),
                                             children: [
                                                 /*#__PURE__*/ _jsx(SwapIcon, {}),
-                                                loadingDiffIndex === index ? "Loading" : "Review"
+                                                loadingDiffIndex === index ? ACTION_TOAST_TEXT.loading : ACTION_TOAST_TEXT.review
                                             ]
                                         }),
                                         viewURL && /*#__PURE__*/ _jsx(Button, {
@@ -192,7 +228,7 @@ export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplyi
                                             url: viewURL,
                                             newTab: true,
                                             margin: false,
-                                            children: "Go to source"
+                                            children: ACTION_TOAST_TEXT.goToSource
                                         })
                                     ]
                                 }),
@@ -201,13 +237,13 @@ export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplyi
                                     children: [
                                         onDismiss && /*#__PURE__*/ _jsx(Button, {
                                             icon: "x",
-                                            "aria-label": "Dismiss proposals",
+                                            "aria-label": ACTION_TOAST_TEXT.dismissProposals,
                                             buttonStyle: "subtle",
                                             margin: false,
                                             onClick: onDismiss
                                         }),
                                         /*#__PURE__*/ _jsx(Button, {
-                                            "aria-label": `Apply proposal: ${proposal.label}`,
+                                            "aria-label": `${ACTION_TOAST_TEXT.applyProposal}: ${proposal.label}`,
                                             margin: false,
                                             buttonStyle: "primary",
                                             disabled: isApplying,
@@ -228,7 +264,7 @@ export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplyi
                         children: [
                             /*#__PURE__*/ _jsx("div", {
                                 className: styles.label,
-                                children: "Diff review failed"
+                                children: ACTION_TOAST_TEXT.diffReviewFailed
                             }),
                             /*#__PURE__*/ _jsx("div", {
                                 className: styles.description,
@@ -240,7 +276,7 @@ export const ActionToast = ({ apiRoute, description, error, getViewURL, isApplyi
                         className: styles.button,
                         onClick: ()=>setDiffError(""),
                         type: "button",
-                        children: "Dismiss"
+                        children: ACTION_TOAST_TEXT.dismiss
                     })
                 ]
             }),

package/dist/components/ai-input/AIInput.d.ts

@@ -1,2 +1,5 @@
-declare const AIInput: () => import("react").JSX.Element;
+type AIInputProps = {
+    isDashboard?: boolean;
+};
+declare const AIInput: ({ isDashboard }: AIInputProps) => import("react").JSX.Element;
 export default AIInput;

package/dist/components/ai-input/AIInput.js

@@ -1,15 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, PlusIcon, useConfig } from "@payloadcms/ui";
+import { Button, useConfig, useDocumentForm, useDocumentInfo, useLocale } from "@payloadcms/ui";
 import { formatAdminURL } from "payload/shared";
 import { useEffect, useRef, useState } from "react";
+import { mergeData } from "../../payload/shared.js";
 import { ActionToast } from "../action-toast/ActionToast.js";
 import { useAIChatStream } from "../hooks/useAIChatStream.js";
 import { useAISettings } from "../hooks/useAISettings.js";
 import { useAuditLog } from "../hooks/useAuditLog.js";
 import { getTextBeforeCaret, useMentions } from "../hooks/useMentions.js";
 import { usePluginConfig } from "../hooks/usePluginConfig.js";
-import { ClaudeIcon, GoogleGeminiIcon, MistralAiIcon, OpenaiIcon, OpenrouterIcon } from "../Icons.js";
+import { ClaudeIcon, GoogleGeminiIcon, MistralAiIcon, OpenaiIcon, OpenrouterIcon, PaperclipIcon } from "../Icons.js";
 import { MentionPopover } from "../mention-popover/MentionPopover.js";
 import styles from "./AIInput.module.css";
 const getProviderIcon = (provider)=>{
@@ -43,7 +44,32 @@ const getProviderIcon = (provider)=>{
     }
 };
 const getFileSignature = (file)=>`${file.name}:${file.size}:${file.lastModified}:${file.type}`;
-const AIInput = ()=>{
+const getModelSelectionValue = (provider, model)=>JSON.stringify([
+        provider,
+        model
+    ]);
+const fallbackConfig = {
+    admin: {},
+    collections: [],
+    globals: [],
+    routes: {
+        admin: "/admin",
+        api: "/api"
+    }
+};
+const parseModelSelectionValue = (value)=>{
+    try {
+        const selection = JSON.parse(value);
+        if (!Array.isArray(selection) || selection.length !== 2 || selection.some((part)=>typeof part !== "string")) return null;
+        return {
+            model: selection[1],
+            provider: selection[0]
+        };
+    } catch  {
+        return null;
+    }
+};
+const AIInputCore = ({ applyProposalLocally, documentScope, isDashboard })=>{
     const editorRef = useRef(null);
     const fileInputRef = useRef(null);
     const [prompt, setPrompt] = useState("");
@@ -54,19 +80,24 @@ const AIInput = ()=>{
     const selectedFilesRef = useRef([]);
     const mediaAttachmentsRef = useRef([]);
     const uploadedFileSignaturesRef = useRef(new Set());
-    const { config } = useConfig();
-    const { aiModelConfig, isCollectionMentionEnabled, locales, defaultLocale, media } = usePluginConfig(config);
+    const payloadConfigContext = useConfig();
+    const config = payloadConfigContext?.config ?? fallbackConfig;
+    const hasPayloadConfigContext = Boolean(payloadConfigContext?.config);
+    const { isCollectionMentionEnabled, locales, defaultLocale, managedProviders, media, providerProfiles } = usePluginConfig(config);
     const acceptedMimeTypes = media?.acceptedMimeTypes?.join(",");
     const mediaEnabled = Boolean(media?.enabled);
     const { loadRecentChanges, prependChange } = useAuditLog({
         adminRoute: config.routes.admin,
         apiRoute: config.routes.api
     });
-    const { selectedModel, setSelectedModel, settingsProvider } = useAISettings({
+    const { selectedModel, setSelectedProviderModel, settingsProvider } = useAISettings({
         adminUserSlug: config.admin?.user,
         apiRoute: config.routes.api,
-        defaultModels: aiModelConfig.defaults
+        managedProviders,
+        providerProfiles
     });
+    const selectedProviderProfile = providerProfiles.find((profile)=>profile.id === settingsProvider);
+    const selectableProviderProfiles = managedProviders ? providerProfiles : providerProfiles.filter((profile)=>profile.id === settingsProvider);
     const { clearMentions, insertMention, mentionPopoverPosition, mentionRange, mentionSuggestions, mentionsRef, updateMentionState } = useMentions({
         apiRoute: config.routes.api,
         config,
@@ -118,12 +149,14 @@ const AIInput = ()=>{
     const removeMediaAttachment = (attachmentIndex)=>{
         updateMediaAttachments((currentAttachments)=>currentAttachments.filter((_, index)=>index !== attachmentIndex));
     };
-    const { dismissChat, error, isLoading, proposals, resetChatState, response, setError, setProposals, setResponse, submit, tokenUsage } = useAIChatStream({
+    const { dismissChat, error, isLoading, setIsLoading, proposals, resetChatState, response, setError, setProposals, setResponse, submit, tokenUsage } = useAIChatStream({
         apiRoute: config.routes.api,
         clearInput,
+        documentScope,
         mentionsRef,
         prompt,
-        selectedModel
+        selectedModel,
+        selectedProvider: settingsProvider
     });
     const uploadSelectedFiles = async ()=>{
         const filesToUpload = selectedFilesRef.current;
@@ -153,6 +186,7 @@ const AIInput = ()=>{
     };
     const handleSubmit = async ()=>{
         if (isUploadingMedia) return;
+        setIsLoading(true);
         setError("");
         setIsUploadingMedia(true);
         try {
@@ -201,6 +235,12 @@ const AIInput = ()=>{
         setIsApplying(true);
         setError("");
         try {
+            if (applyProposalLocally) {
+                await applyProposalLocally(proposal);
+                resetChatState();
+                clearInput();
+                return;
+            }
             const res = await fetch(formatAdminURL({
                 apiRoute: config.routes.api,
                 path: "/ai-apply-action"
@@ -235,8 +275,33 @@ const AIInput = ()=>{
             setIsApplying(false);
         }
     };
+    if (!hasPayloadConfigContext) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: styles.chatLayout,
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: styles.chat,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles.chatHeader,
+                        children: /*#__PURE__*/ _jsx("h2", {
+                            className: styles.chatTitle,
+                            children: "AI Assistant"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles.chatError,
+                        children: "Payload config context is unavailable. Make sure the app and this plugin resolve the same @payloadcms/ui version."
+                    })
+                ]
+            })
+        });
+    }
     return /*#__PURE__*/ _jsx("div", {
         className: styles.chatLayout,
+        style: {
+            marginBottom: isDashboard ? "0" : "20px",
+            height: isDashboard ? "332px" : "220px"
+        },
         children: /*#__PURE__*/ _jsxs("div", {
             className: styles.chat,
             children: [
@@ -325,10 +390,37 @@ const AIInput = ()=>{
                                                 ]
                                             }, `${attachment.collection}-${attachment.id}`))
                                     ]
+                                }),
+                                mediaEnabled && /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx("input", {
+                                            ref: fileInputRef,
+                                            type: "file",
+                                            accept: acceptedMimeTypes,
+                                            className: styles.fileInput,
+                                            multiple: true,
+                                            onChange: handleSelectFile
+                                        }),
+                                        /*#__PURE__*/ _jsx("button", {
+                                            type: "button",
+                                            className: styles.mediaButton,
+                                            "aria-label": "Attach media",
+                                            title: "Attach media",
+                                            disabled: isLoading || isUploadingMedia || proposals.length > 0,
+                                            onClick: (event)=>{
+                                                event.stopPropagation();
+                                                fileInputRef.current?.click();
+                                            },
+                                            children: /*#__PURE__*/ _jsx(PaperclipIcon, {
+                                                width: 16,
+                                                height: 16
+                                            })
+                                        })
+                                    ]
                                 })
                             ]
                         }),
-                        mentionRange && /*#__PURE__*/ _jsx(MentionPopover, {
+                        mentionRange && isDashboard && /*#__PURE__*/ _jsx(MentionPopover, {
                             onSelect: insertMention,
                             style: mentionPopoverPosition ? {
                                 left: `${mentionPopoverPosition.left}px`,
@@ -353,24 +445,30 @@ const AIInput = ()=>{
                                     /*#__PURE__*/ _jsxs("div", {
                                         className: styles.selectWrapper,
                                         children: [
-                                            settingsProvider && getProviderIcon(settingsProvider),
+                                            selectedProviderProfile && getProviderIcon(selectedProviderProfile.provider),
                                             /*#__PURE__*/ _jsxs("select", {
                                                 className: styles.select,
                                                 style: {
-                                                    paddingLeft: settingsProvider ? "34px" : "12px"
+                                                    paddingLeft: selectedProviderProfile ? "34px" : "12px"
                                                 },
                                                 disabled: !settingsProvider,
-                                                onChange: (event)=>setSelectedModel(event.target.value),
-                                                value: selectedModel,
+                                                onChange: (event)=>{
+                                                    const selection = parseModelSelectionValue(event.target.value);
+                                                    if (selection) setSelectedProviderModel(selection.provider, selection.model);
+                                                },
+                                                value: settingsProvider && selectedModel ? getModelSelectionValue(settingsProvider, selectedModel) : "",
                                                 children: [
                                                     !settingsProvider && /*#__PURE__*/ _jsx("option", {
                                                         value: "",
                                                         children: "No provider selected"
                                                     }),
-                                                    settingsProvider && aiModelConfig.providers[settingsProvider].map((model)=>/*#__PURE__*/ _jsx("option", {
-                                                            value: model.value,
-                                                            children: model.label
-                                                        }, model.value))
+                                                    selectableProviderProfiles.map((profile)=>/*#__PURE__*/ _jsx("optgroup", {
+                                                            label: profile.label,
+                                                            children: profile.models.map((model)=>/*#__PURE__*/ _jsx("option", {
+                                                                    value: getModelSelectionValue(profile.id, model.value),
+                                                                    children: model.label
+                                                                }, `${profile.id}-${model.value}`))
+                                                        }, profile.id))
                                                 ]
                                             })
                                         ]
@@ -378,47 +476,26 @@ const AIInput = ()=>{
                                 ]
                             })
                         }),
-                        /*#__PURE__*/ _jsxs("div", {
+                        /*#__PURE__*/ _jsx("div", {
                             className: styles.actions,
-                            children: [
-                                mediaEnabled && /*#__PURE__*/ _jsxs(_Fragment, {
-                                    children: [
-                                        /*#__PURE__*/ _jsx("input", {
-                                            ref: fileInputRef,
-                                            type: "file",
-                                            accept: acceptedMimeTypes,
-                                            className: styles.fileInput,
-                                            multiple: true,
-                                            onChange: handleSelectFile
-                                        }),
-                                        /*#__PURE__*/ _jsx(Button, {
-                                            buttonStyle: "tab",
-                                            "aria-label": "Attach media",
-                                            margin: false,
-                                            disabled: isLoading || isUploadingMedia || proposals.length > 0,
-                                            onClick: ()=>fileInputRef.current?.click(),
-                                            children: /*#__PURE__*/ _jsx(PlusIcon, {})
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    buttonStyle: "primary",
-                                    "aria-label": "Send",
-                                    margin: false,
-                                    disabled: !prompt.trim() || !settingsProvider || !selectedModel || isLoading || isUploadingMedia || Boolean(error) || Boolean(response) || proposals.length > 0,
-                                    onClick: ()=>void handleSubmit(),
-                                    children: isUploadingMedia || isLoading ? "Sending..." : "Send"
-                                })
-                            ]
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                buttonStyle: "primary",
+                                "aria-label": "Send",
+                                margin: false,
+                                disabled: !prompt.trim() || !settingsProvider || !selectedModel || isLoading || isUploadingMedia || Boolean(error) || Boolean(response) || proposals.length > 0,
+                                onClick: ()=>void handleSubmit(),
+                                children: isUploadingMedia || isLoading ? "Sending..." : "Send"
+                            })
                         })
                     ]
                 }),
-                (proposals.length > 0 || response) && /*#__PURE__*/ _jsx(ActionToast, {
+                (proposals.length > 0 || response || isLoading) && /*#__PURE__*/ _jsx(ActionToast, {
                     apiRoute: config.routes.api,
                     description: response,
                     error: error,
                     getViewURL: getProposalViewURL,
                     isApplying: isApplying,
+                    isLoading: isLoading,
                     onDismiss: ()=>dismissChat(),
                     onDismissError: ()=>setError(""),
                     onApply: (proposal, _index)=>void handleApplyProposal(proposal),
@@ -430,4 +507,42 @@ const AIInput = ()=>{
         })
     });
 };
+const DocumentAIInput = ()=>{
+    const documentInfo = useDocumentInfo();
+    const documentForm = useDocumentForm();
+    const locale = useLocale();
+    const documentScope = documentInfo.collectionSlug ? {
+        collection: documentInfo.collectionSlug,
+        ...documentInfo.id === undefined ? {} : {
+            id: String(documentInfo.id)
+        },
+        type: "collection"
+    } : documentInfo.globalSlug ? {
+        slug: documentInfo.globalSlug,
+        type: "global"
+    } : undefined;
+    const applyProposalLocally = async (proposal)=>{
+        if (proposal.action === "delete") {
+            throw new Error("Delete proposals cannot be applied without saving.");
+        }
+        const proposalData = proposal.localizedData ? proposal.localizedData[proposal.locale || locale.code] : proposal.data;
+        if (!proposalData) {
+            throw new Error(`This proposal has no changes for the active locale "${locale.code}".`);
+        }
+        const currentData = documentForm.getData();
+        await documentForm.reset(mergeData(currentData, proposalData));
+        documentForm.setModified(true);
+    };
+    return /*#__PURE__*/ _jsx(AIInputCore, {
+        applyProposalLocally: applyProposalLocally,
+        documentScope: documentScope,
+        isDashboard: false
+    });
+};
+const AIInput = ({ isDashboard = false })=>{
+    if (isDashboard) return /*#__PURE__*/ _jsx(AIInputCore, {
+        isDashboard: true
+    });
+    return /*#__PURE__*/ _jsx(DocumentAIInput, {});
+};
 export default AIInput;

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

@@ -3,7 +3,6 @@
     max-width: none;
     display: flex;
     flex-direction: column;
-    height: 332px;
     overflow: hidden;
 }
 
@@ -108,9 +107,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 +155,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 +198,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, {})
         ]
     });