@mvriu5/payload-ai 0.5.8 → 0.5.10

package/dist/components/AIInput.js

@@ -1,13 +1,14 @@
 "use client";
 import { useConfig } from "@payloadcms/ui";
 import { formatAdminURL } from "payload/shared";
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getResolvedAIModelConfig } from "../ai/providerOptions.js";
 import { getSerializableLabel, isInternalCollection } from "../payload/shared.js";
-import { AIActionProposalList } from "./AIActionProposalList.js";
+import { ActionToast } from "./ActionToast.js";
 import styles from "./AIInput.module.css";
-import { CollectionMentionPopover } from "./CollectionMentionPopover.js";
-import { ClaudeIcon, GoogleGeminiIcon, MistralAiIcon, OpenaiIcon } from "./Icons.js";
+import { MentionPopover } from "./MentionPopover.js";
+import { ClaudeIcon, GoogleGeminiIcon, MistralAiIcon, OpenaiIcon, OpenrouterIcon, Send } from "./Icons.js";
+import { RecentChangesList } from "./AuditLogList.js";
 import { useAISettings } from "./hooks/useAISettings.js";
 import { useDocumentMentionSuggestions } from "./hooks/useDocumentMentionSuggestions.js";
 const collectBlockOptions = ({ fields, parent })=>{
@@ -50,11 +51,117 @@ const getProviderIcon = (provider)=>{
             return /*#__PURE__*/ React.createElement(MistralAiIcon, iconProps);
         case "openai":
             return /*#__PURE__*/ React.createElement(OpenaiIcon, iconProps);
+        case "openrouter":
+            return /*#__PURE__*/ React.createElement(OpenrouterIcon, iconProps);
         default:
             return null;
     }
 };
-export const AIInput = ()=>{
+const parseSSEEvent = (chunk)=>{
+    const lines = chunk.split("\n");
+    let eventName = "";
+    const dataLines = [];
+    for (const line of lines){
+        if (line.startsWith("event:")) {
+            eventName = line.slice(6).trim();
+            continue;
+        }
+        if (line.startsWith("data:")) {
+            dataLines.push(line.slice(5).trim());
+        }
+    }
+    if (!eventName) return null;
+    try {
+        const data = JSON.parse(dataLines.join("\n"));
+        if (eventName !== "text" && eventName !== "proposals" && eventName !== "error" && eventName !== "done") {
+            return null;
+        }
+        return {
+            data,
+            event: eventName
+        };
+    } catch  {
+        return null;
+    }
+};
+const sanitizeResponseText = (value)=>value.replace(/\*\*/g, "");
+const isMentionBoundary = (character)=>{
+    return character === undefined || /\s/.test(character);
+};
+const getActiveMentionRange = (valueBeforeCaret)=>{
+    const caretPosition = valueBeforeCaret.length;
+    for(let index = valueBeforeCaret.length - 1; index >= 0; index -= 1){
+        const character = valueBeforeCaret[index];
+        if (character === "@") {
+            const previousCharacter = valueBeforeCaret[index - 1];
+            const query = valueBeforeCaret.slice(index + 1);
+            if (!isMentionBoundary(previousCharacter)) return null;
+            if (!/^[\w-]*$/.test(query)) return null;
+            return {
+                query,
+                range: {
+                    end: caretPosition,
+                    start: index
+                }
+            };
+        }
+        if (isMentionBoundary(character)) break;
+    }
+    return null;
+};
+const svgNamespace = "http://www.w3.org/2000/svg";
+const auditLogCollectionSlug = "payload-ai-auditlog";
+const appendSvgPath = (svg, d)=>{
+    const path = document.createElementNS(svgNamespace, "path");
+    path.setAttribute("d", d);
+    svg.append(path);
+};
+const createBadgeIcon = (type)=>{
+    if (type === "locale") return null;
+    const svg = document.createElementNS(svgNamespace, "svg");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("class", styles.badgeIcon);
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    if (type === "collection") {
+        appendSvgPath(svg, "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");
+    }
+    if (type === "doc") {
+        appendSvgPath(svg, "M14 3v4a1 1 0 0 0 1 1h4");
+        appendSvgPath(svg, "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2");
+    }
+    if (type === "global") {
+        appendSvgPath(svg, "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0");
+        appendSvgPath(svg, "M3.6 9h16.8");
+        appendSvgPath(svg, "M3.6 15h16.8");
+        appendSvgPath(svg, "M11.5 3a17 17 0 0 0 0 18");
+        appendSvgPath(svg, "M12.5 3a17 17 0 0 1 0 18");
+    }
+    if (type === "block") {
+        appendSvgPath(svg, "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");
+        appendSvgPath(svg, "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");
+    }
+    return svg;
+};
+const createBadgePrefix = (suggestion)=>{
+    const prefix = document.createElement("span");
+    const icon = createBadgeIcon(suggestion.type);
+    prefix.className = styles.prefix;
+    if (icon) {
+        prefix.append(icon);
+    }
+    if (suggestion.type === "doc") {
+        prefix.append(document.createTextNode(`${suggestion.collection || "document"}:`));
+    } else if (suggestion.type === "locale") {
+        prefix.textContent = "locale:";
+    }
+    return prefix;
+};
+const AIInput = ()=>{
     const { config } = useConfig();
     const editorRef = useRef(null);
     const mentionPopoverRef = useRef(null);
@@ -70,11 +177,14 @@ export const AIInput = ()=>{
     });
     const [mentionQuery, setMentionQuery] = useState("");
     const [mentionRange, setMentionRange] = useState(null);
+    const [mentionPopoverPosition, setMentionPopoverPosition] = useState(null);
     const [mentions, setMentions] = useState([]);
     const [appliedProposalIndexes, setAppliedProposalIndexes] = useState([]);
     const [response, setResponse] = useState("");
+    const [tokenUsage, setTokenUsage] = useState(null);
     const [error, setError] = useState("");
     const [proposals, setProposals] = useState([]);
+    const [appliedChanges, setAppliedChanges] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [isApplying, setIsApplying] = useState(false);
     const enabledCollectionSlugs = config.admin?.custom?.payloadAiPlugin?.collectionSlugs;
@@ -82,6 +192,42 @@ export const AIInput = ()=>{
         enabledCollectionSlugs
     ]);
     const isCollectionMentionEnabled = (slug)=>!enabledCollectionSlugSet || enabledCollectionSlugSet.has(slug);
+    const recentChangesEndpoint = useMemo(()=>formatAdminURL({
+            apiRoute: config.routes.api,
+            path: "/ai-audit-log"
+        }), [
+        config.routes.api
+    ]);
+    const allChangesURL = useMemo(()=>`${config.routes.admin || "/admin"}/collections/${auditLogCollectionSlug}`, [
+        config.routes.admin
+    ]);
+    const loadRecentChanges = useCallback(async ()=>{
+        const res = await fetch(recentChangesEndpoint);
+        const result = await res.json().catch(()=>null);
+        if (res.ok && result?.changes) {
+            setAppliedChanges(result.changes.slice(0, 10));
+        }
+    }, [
+        recentChangesEndpoint
+    ]);
+    useEffect(()=>{
+        void loadRecentChanges().catch(()=>undefined);
+    }, [
+        loadRecentChanges
+    ]);
+    useEffect(()=>{
+        if (isLoading || error || proposals.length > 0 || !response) return;
+        const timeout = window.setTimeout(()=>{
+            setResponse("");
+            clearInput();
+        }, 5000);
+        return ()=>window.clearTimeout(timeout);
+    }, [
+        error,
+        isLoading,
+        proposals.length,
+        response
+    ]);
     const collections = config.collections.filter((collection)=>!isInternalCollection(collection.slug)).filter((collection)=>isCollectionMentionEnabled(collection.slug)).map((collection)=>({
             label: getSerializableLabel(collection.labels?.singular, collection.slug),
             slug: collection.slug,
@@ -92,6 +238,31 @@ export const AIInput = ()=>{
             slug: global.slug,
             type: "global"
         })) || [];
+    const localizationConfig = config.localization;
+    const localesConfig = localizationConfig?.locales ?? [];
+    const locales = localesConfig.flatMap((locale)=>{
+        if (typeof locale === "string") {
+            return [
+                {
+                    isDefault: locale === localizationConfig?.defaultLocale,
+                    label: locale,
+                    slug: locale,
+                    type: "locale"
+                }
+            ];
+        }
+        if (!locale || typeof locale !== "object") return [];
+        const slug = typeof locale.code === "string" ? locale.code : typeof locale.label === "string" ? locale.label : null;
+        if (!slug) return [];
+        return [
+            {
+                isDefault: slug === localizationConfig?.defaultLocale,
+                label: getSerializableLabel(locale.label, slug),
+                slug,
+                type: "locale"
+            }
+        ];
+    });
     const blocks = [
         ...config.collections.filter((collection)=>isCollectionMentionEnabled(collection.slug)).flatMap((collection)=>collectBlockOptions({
                 fields: collection.fields,
@@ -105,11 +276,12 @@ export const AIInput = ()=>{
     const mentionOptions = [
         ...collections,
         ...globals,
-        ...blocks
+        ...blocks,
+        ...locales
     ];
     const normalizedMentionQuery = mentionQuery.toLowerCase();
     const filteredCollections = collections.filter((collection)=>collection.slug.toLowerCase().includes(normalizedMentionQuery) || collection.label.toLowerCase().includes(normalizedMentionQuery));
-    const filteredMentionOptions = mentionOptions.filter((option)=>option.slug.toLowerCase().includes(normalizedMentionQuery));
+    const filteredMentionOptions = mentionOptions.filter((option)=>option.slug.toLowerCase().includes(normalizedMentionQuery) || option.label.toLowerCase().includes(normalizedMentionQuery));
     const documentSuggestionCollection = filteredCollections.length === 1 ? filteredCollections[0]?.slug : null;
     const { documentSuggestions, resetDocumentSuggestions } = useDocumentMentionSuggestions({
         apiRoute: config.routes.api,
@@ -121,14 +293,14 @@ export const AIInput = ()=>{
         ...filteredMentionOptions,
         ...documentSuggestions
     ];
-    const getCaretOffset = (element)=>{
+    const getTextBeforeCaret = (element)=>{
         const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0) return 0;
+        if (!selection || selection.rangeCount === 0) return "";
         const range = selection.getRangeAt(0);
         const clonedRange = range.cloneRange();
         clonedRange.selectNodeContents(element);
         clonedRange.setEnd(range.endContainer, range.endOffset);
-        return clonedRange.toString().length;
+        return clonedRange.toString();
     };
     const getTextNodeAtOffset = (element, offset)=>{
         const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
@@ -152,6 +324,28 @@ export const AIInput = ()=>{
             offset: 0
         };
     };
+    const updateMentionPopoverPosition = useCallback((range)=>{
+        const editor = editorRef.current;
+        const popover = mentionPopoverRef.current;
+        if (!editor || !popover || !range) {
+            setMentionPopoverPosition(null);
+            return;
+        }
+        const startPosition = getTextNodeAtOffset(editor, range.start);
+        const anchorRange = document.createRange();
+        anchorRange.setStart(startPosition.node, startPosition.offset);
+        anchorRange.setEnd(startPosition.node, startPosition.offset);
+        const editorRect = editor.getBoundingClientRect();
+        const anchorRect = anchorRange.getBoundingClientRect();
+        const fallbackLeft = Math.max(0, anchorRect.left - editorRect.left + 12);
+        const fallbackTop = Math.max(0, anchorRect.bottom - editorRect.top + 20);
+        const popoverWidth = popover.offsetWidth || 260;
+        const maxLeft = Math.max(0, editor.clientWidth - popoverWidth);
+        setMentionPopoverPosition({
+            left: Math.min(fallbackLeft, maxLeft),
+            top: fallbackTop
+        });
+    }, []);
     const replaceTextRangeWithBadge = ({ badge, editor, end, start })=>{
         const startPosition = getTextNodeAtOffset(editor, start);
         const endPosition = getTextNodeAtOffset(editor, end);
@@ -169,21 +363,41 @@ export const AIInput = ()=>{
         selection?.removeAllRanges();
         selection?.addRange(caretRange);
     };
-    const updateMentionState = (value, caretPosition)=>{
-        const valueBeforeCaret = value.slice(0, caretPosition);
-        const match = /(?:^|\s)@([\w-]*)$/.exec(valueBeforeCaret);
-        if (!match || typeof match.index !== "number") {
+    const updateMentionState = (valueBeforeCaret)=>{
+        const activeMention = getActiveMentionRange(valueBeforeCaret);
+        if (!activeMention) {
             setMentionQuery("");
             setMentionRange(null);
+            setMentionPopoverPosition(null);
             return;
         }
-        const atIndex = valueBeforeCaret.lastIndexOf("@");
-        setMentionQuery(match[1] || "");
-        setMentionRange({
-            end: caretPosition,
-            start: atIndex
-        });
+        setMentionQuery(activeMention.query);
+        setMentionRange(activeMention.range);
     };
+    useEffect(()=>{
+        if (!mentionRange) {
+            setMentionPopoverPosition(null);
+            return;
+        }
+        updateMentionPopoverPosition(mentionRange);
+    }, [
+        mentionRange,
+        mentionSuggestions.length,
+        updateMentionPopoverPosition
+    ]);
+    useEffect(()=>{
+        if (!mentionRange) return;
+        const updatePosition = ()=>updateMentionPopoverPosition(mentionRange);
+        window.addEventListener("resize", updatePosition);
+        window.addEventListener("scroll", updatePosition, true);
+        return ()=>{
+            window.removeEventListener("resize", updatePosition);
+            window.removeEventListener("scroll", updatePosition, true);
+        };
+    }, [
+        mentionRange,
+        updateMentionPopoverPosition
+    ]);
     const clearInput = ()=>{
         setPrompt("");
         setMentions([]);
@@ -202,12 +416,12 @@ export const AIInput = ()=>{
     const insertMention = (suggestion)=>{
         const editor = editorRef.current;
         if (!mentionRange || !editor) return;
-        const beforeMention = prompt.slice(0, mentionRange.start);
-        const afterMention = prompt.slice(mentionRange.end);
+        const currentValue = editor.innerText;
+        const beforeMention = currentValue.slice(0, mentionRange.start);
+        const afterMention = currentValue.slice(mentionRange.end);
         const badgeType = suggestion.type === "doc" ? "document" : suggestion.type;
         const badgePrefix = `${badgeType}:`;
         const badgeText = `${badgePrefix} ${suggestion.label}`;
-        const promptText = suggestion.type === "doc" ? `${badgeText} (${suggestion.collection}/${suggestion.id})` : badgeText;
         const badge = document.createElement("span");
         badge.className = [
             styles.badge,
@@ -215,10 +429,7 @@ export const AIInput = ()=>{
             styles.inlineBadge
         ].join(" ");
         badge.contentEditable = "false";
-        badge.append(Object.assign(document.createElement("span"), {
-            className: styles.prefix,
-            textContent: `${badgePrefix} `
-        }), Object.assign(document.createElement("span"), {
+        badge.append(createBadgePrefix(suggestion), Object.assign(document.createElement("span"), {
             className: styles.name,
             textContent: suggestion.label
         }));
@@ -229,7 +440,7 @@ export const AIInput = ()=>{
             start: mentionRange.start
         });
         editor.focus();
-        setPrompt(`${beforeMention}${promptText} ${afterMention}`);
+        setPrompt(`${beforeMention}${badgeText} ${afterMention}`);
         setMentions((currentMentions)=>{
             const mentionExists = currentMentions.some((mention)=>mention.type === suggestion.type && mention.slug === suggestion.slug && mention.parent === suggestion.parent && mention.collection === suggestion.collection && mention.id === suggestion.id);
             if (mentionExists) return currentMentions;
@@ -240,6 +451,7 @@ export const AIInput = ()=>{
         });
         setMentionQuery("");
         setMentionRange(null);
+        setMentionPopoverPosition(null);
         resetDocumentSuggestions();
     };
     const handleSubmit = async ()=>{
@@ -247,6 +459,10 @@ export const AIInput = ()=>{
         if (!trimmedPrompt) return;
         setIsLoading(true);
         setAppliedProposalIndexes([]);
+        setError("");
+        setProposals([]);
+        setResponse("");
+        setTokenUsage(null);
         try {
             const res = await fetch(formatAdminURL({
                 apiRoute: config.routes.api,
@@ -262,18 +478,61 @@ export const AIInput = ()=>{
                 },
                 method: "POST"
             });
-            const result = await res.json();
             if (!res.ok) {
-                setProposals([]);
-                setResponse("");
-                throw new Error(result.error || "AI request failed");
+                const result = await res.json().catch(()=>null);
+                throw new Error(result?.error || "AI request failed");
+            }
+            if (!res.body) {
+                throw new Error("AI response stream is unavailable");
+            }
+            const reader = res.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = "";
+            let receivedProposals = [];
+            while(true){
+                const { done, value } = await reader.read();
+                if (done) break;
+                buffer += decoder.decode(value, {
+                    stream: true
+                });
+                const chunks = buffer.split("\n\n");
+                buffer = chunks.pop() || "";
+                for (const chunk of chunks){
+                    const event = parseSSEEvent(chunk);
+                    if (!event) continue;
+                    if (event.event === "text") {
+                        if (event.data.delta) {
+                            setResponse((current)=>current + sanitizeResponseText(event.data.delta || ""));
+                        }
+                        continue;
+                    }
+                    if (event.event === "proposals") {
+                        receivedProposals = event.data.proposals || [];
+                        setProposals(receivedProposals);
+                        setTokenUsage(event.data.usage || null);
+                        continue;
+                    }
+                    if (event.event === "error") {
+                        throw new Error(event.data.error || "AI request failed");
+                    }
+                }
+            }
+            const finalEvent = buffer.trim() ? parseSSEEvent(buffer.trim()) : null;
+            if (finalEvent?.event === "proposals") {
+                receivedProposals = finalEvent.data.proposals || [];
+                setProposals(receivedProposals);
+                setTokenUsage(finalEvent.data.usage || null);
+            }
+            if (finalEvent?.event === "error") {
+                throw new Error(finalEvent.data.error || "AI request failed");
+            }
+            if (receivedProposals.length === 0) {
+                clearInput();
             }
-            setError("");
-            setResponse(result.text || "");
-            setProposals(result.proposals || []);
         } catch (err) {
             setProposals([]);
             setResponse("");
+            setTokenUsage(null);
             setError(err instanceof Error ? err.message : "AI request failed");
         } finally{
             setIsLoading(false);
@@ -288,7 +547,10 @@ export const AIInput = ()=>{
                 path: "/ai-apply-action"
             }), {
                 body: JSON.stringify({
-                    proposal
+                    aiResponse: response,
+                    prompt,
+                    proposal,
+                    tokenUsage
                 }),
                 headers: {
                     "Content-Type": "application/json"
@@ -305,6 +567,14 @@ export const AIInput = ()=>{
             setError("");
             setProposals([]);
             setResponse("");
+            setTokenUsage(null);
+            if (result.change) {
+                setAppliedChanges((current)=>[
+                        result.change,
+                        ...current
+                    ].slice(0, 10));
+            }
+            void loadRecentChanges().catch(()=>undefined);
             clearInput();
         } catch (err) {
             setError(err instanceof Error ? err.message : "Could not apply proposal");
@@ -313,6 +583,8 @@ export const AIInput = ()=>{
         }
     };
     return /*#__PURE__*/ React.createElement("div", {
+        className: styles.chatLayout
+    }, /*#__PURE__*/ React.createElement("div", {
         className: styles.chat
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles.chatHeader
@@ -334,7 +606,7 @@ export const AIInput = ()=>{
             if (!value.trim()) {
                 setMentions([]);
             }
-            updateMentionState(value, getCaretOffset(event.currentTarget));
+            updateMentionState(getTextBeforeCaret(event.currentTarget));
         },
         onKeyDown: (event)=>{
             if (event.key === "ArrowDown" && mentionRange && mentionSuggestions.length > 0) {
@@ -353,11 +625,15 @@ export const AIInput = ()=>{
         ref: editorRef,
         role: "textbox",
         suppressContentEditableWarning: true
-    })), mentionRange ? /*#__PURE__*/ React.createElement(CollectionMentionPopover, {
+    })), mentionRange && /*#__PURE__*/ React.createElement(MentionPopover, {
         containerRef: mentionPopoverRef,
         onSelect: insertMention,
+        style: mentionPopoverPosition ? {
+            left: `${mentionPopoverPosition.left}px`,
+            top: `${mentionPopoverPosition.top}px`
+        } : undefined,
         suggestions: mentionSuggestions
-    }) : null), /*#__PURE__*/ React.createElement("div", {
+    })), /*#__PURE__*/ React.createElement("div", {
         className: styles.chatActionsRow
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles.settings
@@ -382,7 +658,11 @@ export const AIInput = ()=>{
         disabled: !prompt.trim() || !settingsProvider || !selectedModel || isLoading,
         onClick: ()=>void handleSubmit(),
         type: "button"
-    }, isLoading ? "Sending..." : "Send")), /*#__PURE__*/ React.createElement(AIActionProposalList, {
+    }, /*#__PURE__*/ React.createElement(Send, {
+        width: 14,
+        height: 14
+    }), isLoading ? "Sending..." : "Send")), /*#__PURE__*/ React.createElement(ActionToast, {
+        apiRoute: config.routes.api,
         appliedProposalIndexes: appliedProposalIndexes,
         description: response,
         error: error,
@@ -393,12 +673,18 @@ export const AIInput = ()=>{
             setError("");
             setProposals([]);
             setResponse("");
+            setTokenUsage(null);
             clearInput();
         },
         onDismissError: ()=>{
             setError("");
         },
         onApply: (proposal, _index)=>void handleApplyProposal(proposal),
-        proposals: proposals
+        proposals: proposals,
+        tokenUsage: tokenUsage
+    })), /*#__PURE__*/ React.createElement(RecentChangesList, {
+        allChangesURL: allChangesURL,
+        changes: appliedChanges
     }));
 };
+export default AIInput;

package/dist/components/AIInput.module.css

@@ -1,8 +1,15 @@
+.chatLayout {
+    align-items: start;
+    display: grid;
+    gap: 16px;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    margin-bottom: 24px;
+    max-width: 1280px;
+}
+
 .chat {
     border: 1px solid var(--theme-elevation-150);
     border-radius: 8px;
-    margin-bottom: 24px;
-    max-width: 920px;
     padding: 20px;
 }
 
@@ -52,7 +59,7 @@
 
 .selectProviderIcon {
     color: var(--theme-text);
-    height: 16px;
+    height: 12px;
     left: 10px;
     pointer-events: none;
     position: absolute;
@@ -67,7 +74,7 @@
     border-radius: 4px;
     color: var(--theme-text);
     font: inherit;
-    min-height: 34px;
+    min-height: 24px;
     min-width: 160px;
     padding: 0 28px 0 34px;
 }
@@ -145,7 +152,16 @@
 }
 
 .prefix {
+    align-items: center;
     color: var(--theme-elevation-500);
+    display: inline-flex;
+    gap: 3px;
+}
+
+.badgeIcon {
+    flex: 0 0 auto;
+    height: 12px;
+    width: 12px;
 }
 
 .name {
@@ -172,15 +188,29 @@
     border-color: color-mix(in srgb, #7a5c9e 28%, var(--theme-elevation-150));
 }
 
+.locale {
+    background: color-mix(in srgb, #2f5da8 12%, var(--theme-bg));
+    border-color: color-mix(in srgb, #2f5da8 28%, var(--theme-elevation-150));
+}
+
 .chatButton {
+    align-items: center;
     background: var(--theme-text);
     border: 0;
     border-radius: 4px;
     color: var(--theme-bg);
     cursor: pointer;
+    display: inline-flex;
     font: inherit;
-    min-height: 40px;
-    padding: 0 18px;
+    gap: 6px;
+    justify-content: center;
+    line-height: 24px;
+    min-height: 24px;
+    padding: 0 14px;
+}
+
+.chatButton svg {
+    flex: 0 0 auto;
 }
 
 .chatButton:disabled {
@@ -220,6 +250,10 @@
 }
 
 @media (max-width: 768px) {
+    .chatLayout {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
     .chatHeader {
         flex-direction: column;
         gap: 12px;
@@ -251,4 +285,5 @@
     .chatButton {
         align-self: stretch;
     }
+
 }

package/dist/components/APIKeyField.d.ts

@@ -0,0 +1,3 @@
+import type { TextFieldClientComponent } from "payload";
+declare const APIKeyField: TextFieldClientComponent;
+export default APIKeyField;

package/dist/components/{AIApiKeyField.js → APIKeyField.js}

@@ -7,15 +7,13 @@ const getFieldClassName = ({ className, isReadOnly, showError })=>[
         showError ? "error" : null,
         isReadOnly ? "read-only" : null
     ].filter(Boolean).join(" ");
-export const AIApiKeyField = ({ field, inputRef, path, readOnly })=>{
+const APIKeyField = ({ field, inputRef, path, readOnly })=>{
     const { disabled, errorMessage, setValue, showError, value } = useField({
         path
     });
     const fieldID = `field-${path.replace(/\./g, "__")}`;
     const isReadOnly = readOnly || disabled || field.admin?.disabled;
-    const handleChange = (event)=>{
-        setValue(event.target.value);
-    };
+    const handleChange = (event)=>setValue(event.target.value);
     return /*#__PURE__*/ React.createElement("div", {
         className: getFieldClassName({
             className: field.admin?.className,
@@ -45,3 +43,4 @@ export const AIApiKeyField = ({ field, inputRef, path, readOnly })=>{
         className: "field-description"
     }, field.admin?.description?.toString())));
 };
+export default APIKeyField;