@mvriu5/payload-ai 1.1.1 → 1.3.2

package/dist/components/AIInput.js

@@ -1,747 +0,0 @@
-"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 { ActionToast } from "./ActionToast.js";
-import styles from "./AIInput.module.css";
-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 })=>{
-    const options = [];
-    for (const field of fields){
-        if (field.type === "blocks" && field.blocks) {
-            for (const block of field.blocks){
-                options.push({
-                    label: getSerializableLabel(block.labels?.singular, block.slug),
-                    parent,
-                    slug: block.slug,
-                    type: "block"
-                });
-                options.push(...collectBlockOptions({
-                    fields: block.fields || [],
-                    parent: `${parent}/${block.slug}`
-                }));
-            }
-        }
-        if (field.fields) {
-            options.push(...collectBlockOptions({
-                fields: field.fields,
-                parent
-            }));
-        }
-    }
-    return options;
-};
-const getProviderIcon = (provider)=>{
-    const iconProps = {
-        "aria-hidden": true,
-        className: styles.selectProviderIcon
-    };
-    switch(provider){
-        case "claude":
-            return /*#__PURE__*/ _jsx(ClaudeIcon, {
-                ...iconProps
-            });
-        case "google":
-            return /*#__PURE__*/ _jsx(GoogleGeminiIcon, {
-                ...iconProps
-            });
-        case "mistral":
-            return /*#__PURE__*/ _jsx(MistralAiIcon, {
-                ...iconProps
-            });
-        case "openai":
-            return /*#__PURE__*/ _jsx(OpenaiIcon, {
-                ...iconProps
-            });
-        case "openrouter":
-            return /*#__PURE__*/ _jsx(OpenrouterIcon, {
-                ...iconProps
-            });
-        default:
-            return null;
-    }
-};
-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);
-    const [prompt, setPrompt] = useState("");
-    const configuredModels = config.admin?.custom?.payloadAiPlugin?.models;
-    const aiModelConfig = useMemo(()=>getResolvedAIModelConfig(configuredModels), [
-        configuredModels
-    ]);
-    const { selectedModel, setSelectedModel, settingsProvider } = useAISettings({
-        adminUserSlug: config.admin?.user,
-        apiRoute: config.routes.api,
-        defaultModels: aiModelConfig.defaults
-    });
-    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;
-    const enabledCollectionSlugSet = useMemo(()=>enabledCollectionSlugs ? new Set(enabledCollectionSlugs) : null, [
-        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,
-            type: "collection"
-        }));
-    const globals = config.globals?.map((global)=>({
-            label: getSerializableLabel(global.label, global.slug),
-            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,
-                parent: collection.slug
-            })),
-        ...config.globals?.flatMap((global)=>collectBlockOptions({
-                fields: global.fields,
-                parent: global.slug
-            })) || []
-    ];
-    const mentionOptions = [
-        ...collections,
-        ...globals,
-        ...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) || option.label.toLowerCase().includes(normalizedMentionQuery));
-    const documentSuggestionCollection = filteredCollections.length === 1 ? filteredCollections[0]?.slug : null;
-    const { documentSuggestions, resetDocumentSuggestions } = useDocumentMentionSuggestions({
-        apiRoute: config.routes.api,
-        documentSuggestionCollection,
-        mentionQuery,
-        mentionRange
-    });
-    const mentionSuggestions = [
-        ...filteredMentionOptions,
-        ...documentSuggestions
-    ];
-    const getTextBeforeCaret = (element)=>{
-        const selection = window.getSelection();
-        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();
-    };
-    const getTextNodeAtOffset = (element, offset)=>{
-        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
-        let currentOffset = 0;
-        let node = walker.nextNode();
-        while(node){
-            const nextOffset = currentOffset + (node.textContent?.length || 0);
-            if (offset <= nextOffset) {
-                return {
-                    node,
-                    offset: offset - currentOffset
-                };
-            }
-            currentOffset = nextOffset;
-            node = walker.nextNode();
-        }
-        const textNode = document.createTextNode("");
-        element.append(textNode);
-        return {
-            node: textNode,
-            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);
-        const range = document.createRange();
-        const trailingSpace = document.createTextNode(" ");
-        range.setStart(startPosition.node, startPosition.offset);
-        range.setEnd(endPosition.node, endPosition.offset);
-        range.deleteContents();
-        range.insertNode(trailingSpace);
-        range.insertNode(badge);
-        const selection = window.getSelection();
-        const caretRange = document.createRange();
-        caretRange.setStartAfter(trailingSpace);
-        caretRange.collapse(true);
-        selection?.removeAllRanges();
-        selection?.addRange(caretRange);
-    };
-    const updateMentionState = (valueBeforeCaret)=>{
-        const activeMention = getActiveMentionRange(valueBeforeCaret);
-        if (!activeMention) {
-            setMentionQuery("");
-            setMentionRange(null);
-            setMentionPopoverPosition(null);
-            return;
-        }
-        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([]);
-        if (editorRef.current) editorRef.current.textContent = "";
-    };
-    const getProposalViewURL = (proposal)=>{
-        const adminRoute = config.routes.admin || "/admin";
-        if (proposal.action === "updateGlobal" && proposal.slug) {
-            return `${adminRoute}/globals/${proposal.slug}`;
-        }
-        if (proposal.collection && proposal.id) {
-            return `${adminRoute}/collections/${proposal.collection}/${proposal.id}`;
-        }
-        return null;
-    };
-    const insertMention = (suggestion)=>{
-        const editor = editorRef.current;
-        if (!mentionRange || !editor) return;
-        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 badge = document.createElement("span");
-        badge.className = [
-            styles.badge,
-            styles[suggestion.type],
-            styles.inlineBadge
-        ].join(" ");
-        badge.contentEditable = "false";
-        badge.append(createBadgePrefix(suggestion), Object.assign(document.createElement("span"), {
-            className: styles.name,
-            textContent: suggestion.label
-        }));
-        replaceTextRangeWithBadge({
-            badge,
-            editor,
-            end: mentionRange.end,
-            start: mentionRange.start
-        });
-        editor.focus();
-        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;
-            return [
-                ...currentMentions,
-                suggestion
-            ];
-        });
-        setMentionQuery("");
-        setMentionRange(null);
-        setMentionPopoverPosition(null);
-        resetDocumentSuggestions();
-    };
-    const handleSubmit = async ()=>{
-        const trimmedPrompt = prompt.trim();
-        if (!trimmedPrompt) return;
-        setIsLoading(true);
-        setAppliedProposalIndexes([]);
-        setError("");
-        setProposals([]);
-        setResponse("");
-        setTokenUsage(null);
-        try {
-            const res = await fetch(formatAdminURL({
-                apiRoute: config.routes.api,
-                path: "/ai-chat"
-            }), {
-                body: JSON.stringify({
-                    mentions,
-                    model: selectedModel,
-                    prompt: trimmedPrompt
-                }),
-                headers: {
-                    "Content-Type": "application/json"
-                },
-                method: "POST"
-            });
-            if (!res.ok) {
-                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();
-            }
-        } catch (err) {
-            setProposals([]);
-            setResponse("");
-            setTokenUsage(null);
-            setError(err instanceof Error ? err.message : "AI request failed");
-        } finally{
-            setIsLoading(false);
-        }
-    };
-    const handleApplyProposal = async (proposal)=>{
-        setIsApplying(true);
-        setError("");
-        try {
-            const res = await fetch(formatAdminURL({
-                apiRoute: config.routes.api,
-                path: "/ai-apply-action"
-            }), {
-                body: JSON.stringify({
-                    aiResponse: response,
-                    prompt,
-                    proposal,
-                    tokenUsage
-                }),
-                headers: {
-                    "Content-Type": "application/json"
-                },
-                method: "POST"
-            });
-            const result = await res.json();
-            if (!res.ok) {
-                setProposals([]);
-                setResponse("");
-                throw new Error(result.error || "Could not apply proposal");
-            }
-            setAppliedProposalIndexes([]);
-            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");
-        } finally{
-            setIsApplying(false);
-        }
-    };
-    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;