@mvriu5/payload-ai 0.5.9 → 1.1.1

package/dist/components/AIInput.js

@@ -1,14 +1,15 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useConfig } from "@payloadcms/ui";
 import { formatAdminURL } from "payload/shared";
 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, Send } from "./Icons.js";
-import { RecentChangesList } from "./RecentChangesList.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 })=>{
@@ -44,13 +45,25 @@ const getProviderIcon = (provider)=>{
     };
     switch(provider){
         case "claude":
-            return /*#__PURE__*/ React.createElement(ClaudeIcon, iconProps);
+            return /*#__PURE__*/ _jsx(ClaudeIcon, {
+                ...iconProps
+            });
         case "google":
-            return /*#__PURE__*/ React.createElement(GoogleGeminiIcon, iconProps);
+            return /*#__PURE__*/ _jsx(GoogleGeminiIcon, {
+                ...iconProps
+            });
         case "mistral":
-            return /*#__PURE__*/ React.createElement(MistralAiIcon, iconProps);
+            return /*#__PURE__*/ _jsx(MistralAiIcon, {
+                ...iconProps
+            });
         case "openai":
-            return /*#__PURE__*/ React.createElement(OpenaiIcon, iconProps);
+            return /*#__PURE__*/ _jsx(OpenaiIcon, {
+                ...iconProps
+            });
+        case "openrouter":
+            return /*#__PURE__*/ _jsx(OpenrouterIcon, {
+                ...iconProps
+            });
         default:
             return null;
     }
@@ -83,7 +96,83 @@ const parseSSEEvent = (chunk)=>{
     }
 };
 const sanitizeResponseText = (value)=>value.replace(/\*\*/g, "");
-export const AIInput = ()=>{
+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);
@@ -99,9 +188,11 @@ 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([]);
@@ -114,15 +205,18 @@ export const AIInput = ()=>{
     const isCollectionMentionEnabled = (slug)=>!enabledCollectionSlugSet || enabledCollectionSlugSet.has(slug);
     const recentChangesEndpoint = useMemo(()=>formatAdminURL({
             apiRoute: config.routes.api,
-            path: "/ai-recent-changes"
+            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);
+            setAppliedChanges(result.changes.slice(0, 10));
         }
     }, [
         recentChangesEndpoint
@@ -155,6 +249,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,
@@ -168,11 +287,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,
@@ -184,14 +304,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);
@@ -215,6 +335,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);
@@ -232,21 +374,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([]);
@@ -265,12 +427,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,
@@ -278,10 +440,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
         }));
@@ -292,7 +451,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;
@@ -303,6 +462,7 @@ export const AIInput = ()=>{
         });
         setMentionQuery("");
         setMentionRange(null);
+        setMentionPopoverPosition(null);
         resetDocumentSuggestions();
     };
     const handleSubmit = async ()=>{
@@ -313,6 +473,7 @@ export const AIInput = ()=>{
         setError("");
         setProposals([]);
         setResponse("");
+        setTokenUsage(null);
         try {
             const res = await fetch(formatAdminURL({
                 apiRoute: config.routes.api,
@@ -338,6 +499,7 @@ export const AIInput = ()=>{
             const reader = res.body.getReader();
             const decoder = new TextDecoder();
             let buffer = "";
+            let receivedProposals = [];
             while(true){
                 const { done, value } = await reader.read();
                 if (done) break;
@@ -356,7 +518,9 @@ export const AIInput = ()=>{
                         continue;
                     }
                     if (event.event === "proposals") {
-                        setProposals(event.data.proposals || []);
+                        receivedProposals = event.data.proposals || [];
+                        setProposals(receivedProposals);
+                        setTokenUsage(event.data.usage || null);
                         continue;
                     }
                     if (event.event === "error") {
@@ -366,14 +530,20 @@ export const AIInput = ()=>{
             }
             const finalEvent = buffer.trim() ? parseSSEEvent(buffer.trim()) : null;
             if (finalEvent?.event === "proposals") {
-                setProposals(finalEvent.data.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();
+            }
         } catch (err) {
             setProposals([]);
             setResponse("");
+            setTokenUsage(null);
             setError(err instanceof Error ? err.message : "AI request failed");
         } finally{
             setIsLoading(false);
@@ -388,7 +558,10 @@ export const AIInput = ()=>{
                 path: "/ai-apply-action"
             }), {
                 body: JSON.stringify({
-                    proposal
+                    aiResponse: response,
+                    prompt,
+                    proposal,
+                    tokenUsage
                 }),
                 headers: {
                     "Content-Type": "application/json"
@@ -405,11 +578,12 @@ export const AIInput = ()=>{
             setError("");
             setProposals([]);
             setResponse("");
+            setTokenUsage(null);
             if (result.change) {
                 setAppliedChanges((current)=>[
                         result.change,
                         ...current
-                    ].slice(0, 12));
+                    ].slice(0, 10));
             }
             void loadRecentChanges().catch(()=>undefined);
             clearInput();
@@ -419,101 +593,155 @@ export const AIInput = ()=>{
             setIsApplying(false);
         }
     };
-    return /*#__PURE__*/ React.createElement("div", {
-        className: styles.chatLayout
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.chat
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.chatHeader
-    }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("h2", {
-        className: styles.chatTitle
-    }, "AI Assistant"), /*#__PURE__*/ React.createElement("p", {
-        className: styles.chatDescription
-    }, "Ask AI to draft, improve, or analyze content."))), /*#__PURE__*/ React.createElement("div", {
-        className: styles.chatInputRow
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.chatInputSurface
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.chatInput,
-        contentEditable: true,
-        "data-placeholder": "Ask AI...",
-        onInput: (event)=>{
-            const value = event.currentTarget.innerText;
-            setPrompt(value);
-            if (!value.trim()) {
-                setMentions([]);
-            }
-            updateMentionState(value, getCaretOffset(event.currentTarget));
-        },
-        onKeyDown: (event)=>{
-            if (event.key === "ArrowDown" && mentionRange && mentionSuggestions.length > 0) {
-                const firstOption = mentionPopoverRef.current?.querySelector("button");
-                if (firstOption) {
-                    event.preventDefault();
-                    firstOption.focus();
-                    return;
-                }
-            }
-            if (event.key === "Enter" && !event.shiftKey) {
-                event.preventDefault();
-                void handleSubmit();
-            }
-        },
-        ref: editorRef,
-        role: "textbox",
-        suppressContentEditableWarning: true
-    })), mentionRange ? /*#__PURE__*/ React.createElement(CollectionMentionPopover, {
-        containerRef: mentionPopoverRef,
-        onSelect: insertMention,
-        suggestions: mentionSuggestions
-    }) : null), /*#__PURE__*/ React.createElement("div", {
-        className: styles.chatActionsRow
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles.settings
-    }, /*#__PURE__*/ React.createElement("label", {
-        className: styles.setting
-    }, /*#__PURE__*/ React.createElement("span", {
-        className: styles.settingLabel
-    }, "Model"), /*#__PURE__*/ React.createElement("div", {
-        className: styles.selectWrapper
-    }, getProviderIcon(settingsProvider), /*#__PURE__*/ React.createElement("select", {
-        className: styles.select,
-        disabled: !settingsProvider,
-        onChange: (event)=>setSelectedModel(event.target.value),
-        value: selectedModel
-    }, !settingsProvider && /*#__PURE__*/ React.createElement("option", {
-        value: ""
-    }, "Select provider in account settings"), settingsProvider && aiModelConfig.providers[settingsProvider].map((model)=>/*#__PURE__*/ React.createElement("option", {
-            key: model.value,
-            value: model.value
-        }, model.label)))))), /*#__PURE__*/ React.createElement("button", {
-        className: styles.chatButton,
-        disabled: !prompt.trim() || !settingsProvider || !selectedModel || isLoading,
-        onClick: ()=>void handleSubmit(),
-        type: "button"
-    }, /*#__PURE__*/ React.createElement(Send, {
-        width: 14,
-        height: 14
-    }), isLoading ? "Sending..." : "Send")), /*#__PURE__*/ React.createElement(AIActionProposalList, {
-        apiRoute: config.routes.api,
-        appliedProposalIndexes: appliedProposalIndexes,
-        description: response,
-        error: error,
-        getViewURL: getProposalViewURL,
-        isApplying: isApplying,
-        onDismiss: ()=>{
-            setAppliedProposalIndexes([]);
-            setError("");
-            setProposals([]);
-            setResponse("");
-            clearInput();
-        },
-        onDismissError: ()=>{
-            setError("");
-        },
-        onApply: (proposal, _index)=>void handleApplyProposal(proposal),
-        proposals: proposals
-    })), /*#__PURE__*/ React.createElement(RecentChangesList, {
-        changes: appliedChanges
-    }));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: styles.chatLayout,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles.chat,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles.chatHeader,
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ _jsx("h2", {
+                                    className: styles.chatTitle,
+                                    children: "AI Assistant"
+                                }),
+                                /*#__PURE__*/ _jsx("p", {
+                                    className: styles.chatDescription,
+                                    children: "Ask AI to draft, improve, or analyze content."
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: styles.chatInputRow,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: styles.chatInputSurface,
+                                children: /*#__PURE__*/ _jsx("div", {
+                                    className: styles.chatInput,
+                                    contentEditable: true,
+                                    "data-placeholder": "Ask AI...",
+                                    onInput: (event)=>{
+                                        const value = event.currentTarget.innerText;
+                                        setPrompt(value);
+                                        if (!value.trim()) {
+                                            setMentions([]);
+                                        }
+                                        updateMentionState(getTextBeforeCaret(event.currentTarget));
+                                    },
+                                    onKeyDown: (event)=>{
+                                        if (event.key === "ArrowDown" && mentionRange && mentionSuggestions.length > 0) {
+                                            const firstOption = mentionPopoverRef.current?.querySelector("button");
+                                            if (firstOption) {
+                                                event.preventDefault();
+                                                firstOption.focus();
+                                                return;
+                                            }
+                                        }
+                                        if (event.key === "Enter" && !event.shiftKey) {
+                                            event.preventDefault();
+                                            void handleSubmit();
+                                        }
+                                    },
+                                    ref: editorRef,
+                                    role: "textbox",
+                                    suppressContentEditableWarning: true
+                                })
+                            }),
+                            mentionRange && /*#__PURE__*/ _jsx(MentionPopover, {
+                                containerRef: mentionPopoverRef,
+                                onSelect: insertMention,
+                                style: mentionPopoverPosition ? {
+                                    left: `${mentionPopoverPosition.left}px`,
+                                    top: `${mentionPopoverPosition.top}px`
+                                } : undefined,
+                                suggestions: mentionSuggestions
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: styles.chatActionsRow,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: styles.settings,
+                                children: /*#__PURE__*/ _jsxs("label", {
+                                    className: styles.setting,
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: styles.settingLabel,
+                                            children: "Model"
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: styles.selectWrapper,
+                                            children: [
+                                                getProviderIcon(settingsProvider),
+                                                /*#__PURE__*/ _jsxs("select", {
+                                                    className: styles.select,
+                                                    disabled: !settingsProvider,
+                                                    onChange: (event)=>setSelectedModel(event.target.value),
+                                                    value: selectedModel,
+                                                    children: [
+                                                        !settingsProvider && /*#__PURE__*/ _jsx("option", {
+                                                            value: "",
+                                                            children: "Select provider in account settings"
+                                                        }),
+                                                        settingsProvider && aiModelConfig.providers[settingsProvider].map((model)=>/*#__PURE__*/ _jsx("option", {
+                                                                value: model.value,
+                                                                children: model.label
+                                                            }, model.value))
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs("button", {
+                                className: styles.chatButton,
+                                disabled: !prompt.trim() || !settingsProvider || !selectedModel || isLoading,
+                                onClick: ()=>void handleSubmit(),
+                                type: "button",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Send, {
+                                        width: 14,
+                                        height: 14
+                                    }),
+                                    isLoading ? "Sending..." : "Send"
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(ActionToast, {
+                        apiRoute: config.routes.api,
+                        appliedProposalIndexes: appliedProposalIndexes,
+                        description: response,
+                        error: error,
+                        getViewURL: getProposalViewURL,
+                        isApplying: isApplying,
+                        onDismiss: ()=>{
+                            setAppliedProposalIndexes([]);
+                            setError("");
+                            setProposals([]);
+                            setResponse("");
+                            setTokenUsage(null);
+                            clearInput();
+                        },
+                        onDismissError: ()=>{
+                            setError("");
+                        },
+                        onApply: (proposal, _index)=>void handleApplyProposal(proposal),
+                        proposals: proposals,
+                        tokenUsage: tokenUsage
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(RecentChangesList, {
+                allChangesURL: allChangesURL,
+                changes: appliedChanges
+            })
+        ]
+    });
 };
+export default AIInput;