@parhelia/core 0.1.12556 → 0.1.12565

package/dist/editor/page-editor-chrome/useInlineAICompletion.js

@@ -1,17 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useCallback, useState, useMemo, useRef, } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { generatePageContext, getCachedContext, } from "../services/contextService";
+import { WandSparkles } from "lucide-react";
+import { createRoot } from "react-dom/client";
+import { LicenseFeatures, useFeature } from "../../licensing";
+function InlineCompletionHint({ hintText, isMobile, onAccept, positionStyle, }) {
+    return (_jsxs("div", { className: "shadow-[0_4px_14px_rgba(15,23,42,0.14),0_0_0_1px_rgba(15,23,42,0.06)]pointer-events-auto fixed z-95 inline-flex max-w-none cursor-pointer items-center gap-2 rounded-md border border-slate-400 bg-slate-100 px-2.5 py-2 text-xs leading-snug font-medium whitespace-nowrap text-slate-900", style: positionStyle, onClick: isMobile ? onAccept : undefined, role: isMobile ? "button" : undefined, children: [_jsx(WandSparkles, { className: "size-3.5 shrink-0 text-violet-600", strokeWidth: 2, "aria-hidden": true }), _jsx("span", { children: hintText })] }));
+}
 export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatingRef, }) {
     const editContext = useEditContext();
     const fieldsContext = useFieldsEditContext();
+    const canUseAi = useFeature(LicenseFeatures.AI);
     const [currentCompletion, setCurrentCompletion] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
+    const [, setIsLoading] = useState(false);
     const abortControllerRef = useRef(null);
     const loadingAnimationRef = useRef(null);
+    const applyCompletionRef = useRef(null);
+    const hintReactRootRef = useRef(null);
     // Clean up hint element on unmount
     useEffect(() => {
         return () => {
+            hintReactRootRef.current?.unmount();
+            hintReactRootRef.current = null;
             const hintElement = document.getElementById(`${cursorSpanId}-hint`);
             if (hintElement) {
                 hintElement.remove();
@@ -23,7 +35,7 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
     }, [cursorSpanId]);
     const lastCaretPosRef = useRef(null);
     // Simple function to track caret position without inserting spans
-    const positionCursorSpan = () => {
+    const positionCursorSpan = useCallback(() => {
         if (isUpdatingRef.current)
             return;
         isUpdatingRef.current = true;
@@ -97,55 +109,14 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
                 isUpdatingRef.current = false;
             }, 10);
         }
-    };
-    useEffect(() => {
-        // Handle keydown events - especially for cursor movement
-        const keyHandler = (e) => {
-            if (e.key === "ArrowLeft" ||
-                e.key === "ArrowRight" ||
-                e.key === "ArrowUp" ||
-                e.key === "ArrowDown" ||
-                e.key === " " ||
-                e.key === "Tab" ||
-                e.key === "End" ||
-                e.key === "Backspace" ||
-                e.key === "Delete" // Add Delete key handling
-            ) {
-                // Clear the completion when arrow keys are used
-                setCurrentCompletion(null);
-                clearCursorSpan();
-                // Let the browser handle the cursor movement/deletion
-                // Then update our cursor span after a small delay
-                setTimeout(() => {
-                    if (!isUpdatingRef.current) {
-                        positionCursorSpan();
-                    }
-                }, 10);
-                // Special handling for right arrow and delete which seems to have issues
-                if (e.key === "ArrowRight" || e.key === "Delete") {
-                    // Make sure the cursor span doesn't block the movement/deletion
-                    const cursorSpan = pageViewContext.editorIframe?.contentWindow?.document.getElementById(cursorSpanId);
-                    if (cursorSpan) {
-                        // Temporarily make it display none so it doesn't interfere with selection
-                        const originalDisplay = cursorSpan.style.display;
-                        cursorSpan.style.display = "none";
-                        // Restore after the browser has processed the movement/deletion
-                        setTimeout(() => {
-                            if (cursorSpan.parentNode) {
-                                cursorSpan.style.display = originalDisplay;
-                            }
-                        }, 0);
-                    }
-                }
-            }
-        };
-        pageViewContext.editorIframe?.contentWindow?.document.addEventListener("keydown", keyHandler);
-        return () => {
-            pageViewContext.editorIframe?.contentWindow?.document.removeEventListener("keydown", keyHandler);
-        };
-    }, [currentCompletion, pageViewContext.page]);
+    }, [
+        pageViewContext.editorIframe?.contentWindow,
+        fieldsContext?.inlineEditingFieldElement,
+        cursorSpanId,
+        isUpdatingRef,
+    ]);
     // Extracts the text up to the cursor position in the editable element
-    const getContentUpToCursor = (element) => {
+    const getContentUpToCursor = useCallback((element) => {
         const iframeWindow = pageViewContext.editorIframe?.contentWindow;
         const selection = iframeWindow?.getSelection();
         if (!element || !selection || selection.rangeCount === 0)
@@ -168,19 +139,17 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
             contentUpToCursor = tempRange.toString();
         }
         return contentUpToCursor;
-    };
+    }, [pageViewContext.editorIframe?.contentWindow]);
     // Loading animation with three dots changing color
-    const startLoadingAnimation = () => {
+    const startLoadingAnimation = useCallback(() => {
         const doc = pageViewContext.editorIframe?.contentWindow?.document;
         const span = doc?.getElementById(cursorSpanId);
         if (!doc || !span)
             return;
-        // Create dots container
         span.innerHTML = "";
         span.style.display = "inline-flex";
         span.style.gap = "4px";
         span.style.alignItems = "center";
-        // Create three dots
         for (let i = 0; i < 3; i++) {
             const dot = doc.createElement("span");
             dot.textContent = "•";
@@ -189,7 +158,6 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
             dot.style.fontSize = "16px";
             span.appendChild(dot);
         }
-        // Animate dots
         let step = 0;
         const animate = () => {
             const dots = span.querySelectorAll("span");
@@ -203,7 +171,6 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
             });
             step++;
             loadingAnimationRef.current = requestAnimationFrame(() => {
-                // Slow down animation by only updating every 15 frames (~250ms at 60fps)
                 if (step % 15 === 0) {
                     animate();
                 }
@@ -213,34 +180,27 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
             });
         };
         animate();
-    };
-    const stopLoadingAnimation = () => {
+    }, [pageViewContext.editorIframe?.contentWindow?.document, cursorSpanId]);
+    const stopLoadingAnimation = useCallback(() => {
         if (loadingAnimationRef.current) {
             cancelAnimationFrame(loadingAnimationRef.current);
             loadingAnimationRef.current = null;
         }
-    };
-    const getCompletion = async (element, isManualTrigger = false) => {
+    }, []);
+    const getCompletion = useCallback(async (element, isManualTrigger = false) => {
         const contentUpToCursor = getContentUpToCursor(element);
         if (!contentUpToCursor?.trim())
             return null;
-        // Abort any in-flight request
         if (abortControllerRef.current) {
             abortControllerRef.current.abort();
         }
-        // Create a new abort controller for this request
         abortControllerRef.current = new AbortController();
-        const signal = abortControllerRef.current.signal;
-        // Get field attributes
         const fieldId = element.getAttribute("data-fieldid");
-        const fieldName = element.getAttribute("data-fieldname");
         const itemId = element.getAttribute("data-itemid");
         const language = element.getAttribute("data-language");
         const version = element.getAttribute("data-version");
         if (!fieldId || !itemId || !language || !version)
             return null;
-        // Only trigger completion after a space for automatic completions
-        // Manual triggers (Ctrl+Space) can work anywhere
         if (!isManualTrigger) {
             const lastChar = contentUpToCursor.slice(-1);
             if (lastChar !== " " && lastChar !== "\u00A0") {
@@ -249,7 +209,6 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
         }
         if (!editContext)
             return null;
-        // Get page context for better completions
         let pageContext = getCachedContext(editContext);
         if (!pageContext) {
             try {
@@ -257,22 +216,20 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
             }
             catch (error) {
                 console.warn("Failed to generate page context:", error);
-                // Continue without context
             }
         }
         let contextString = "";
         if (pageContext) {
             contextString = `Page Name: ${pageContext.pageTitle} (${pageContext.pageType})\n PageSummary: ${pageContext.abstract}`;
         }
-        // Show loading indicator
         setIsLoading(true);
         startLoadingAnimation();
         try {
             const endpoint = `/parhelia/agent/GetTextCompletion`;
             const response = await fetch(endpoint, {
-                method: 'POST',
+                method: "POST",
                 headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
+                    "Content-Type": "application/x-www-form-urlencoded",
                 },
                 body: new URLSearchParams({
                     textToComplete: contentUpToCursor,
@@ -283,18 +240,22 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
             return data.completion || null;
         }
         catch (error) {
-            // Ignore AbortError as it's expected when cancelling
             if (error instanceof Error && error.name !== "AbortError") {
                 console.error("Error getting completion:", error);
             }
             return null;
         }
         finally {
-            // Hide loading indicator
             setIsLoading(false);
             stopLoadingAnimation();
         }
-    };
+    }, [
+        getContentUpToCursor,
+        editContext,
+        pageViewContext,
+        startLoadingAnimation,
+        stopLoadingAnimation,
+    ]);
     // Debounced AI call: recompute the sentence, call getCompletion, and extract only the "tail" for the ghost text
     const getCompletionDebounced = useDebouncedCallback(async (isManualTrigger = false) => {
         const el = fieldsContext?.inlineEditingFieldElement;
@@ -317,50 +278,17 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
         setCurrentCompletion(suggestion);
         updateCursorSpan(suggestion.substring(sentence.length));
     }, 250);
-    // Manual completion trigger (non-debounced for immediate response)
-    const getCompletionManual = async () => {
-        const el = fieldsContext?.inlineEditingFieldElement;
-        if (!el)
-            return;
-        // 1) Recompute the exact sentence at this moment
-        const full = getContentUpToCursor(el) || "";
-        const sentence = full.split(/[.?!]\s*/).pop() || "";
-        // 2) Ask AI for a completion
-        const rawSuggestion = await getCompletion(el, true);
-        if (!rawSuggestion) {
-            setCurrentCompletion(null);
-            clearCursorSpan();
-            return;
-        }
-        // 3) Strip off the already-typed sentence to leave just the "completion tail"
-        const suggestion = rawSuggestion.startsWith(sentence)
-            ? rawSuggestion
-            : sentence + rawSuggestion;
-        setCurrentCompletion(suggestion);
-        updateCursorSpan(suggestion.substring(sentence.length));
-    };
     // Inserts or clears the ghost text inside the cursor span
-    const updateCursorSpan = (text) => {
+    const updateCursorSpan = useCallback((text) => {
         const doc = pageViewContext.editorIframe?.contentWindow?.document;
         const span = doc?.getElementById(cursorSpanId);
         if (!doc || !span)
             return;
         // Update the completion text
         if (text) {
-            //   // Create a temporary span to measure the text width
-            //   const measureSpan = doc.createElement("span");
-            //   measureSpan.style.visibility = "hidden";
-            //   measureSpan.style.position = "absolute";
-            //   measureSpan.style.whiteSpace = "pre"; // Preserve whitespace
-            //   measureSpan.style.font = window.getComputedStyle(span).font; // Match the font
-            //   measureSpan.textContent = text;
-            //   doc.body.appendChild(measureSpan);
-            //   const textWidth = measureSpan.getBoundingClientRect().width;
-            //   measureSpan.remove();
             span.textContent = text;
             span.style.color = "#888";
             span.style.fontStyle = "italic";
-            //span.innerHTML = "hello";
             // Create or update hint element in the main document
             let hintElement = document.getElementById(`${cursorSpanId}-hint`);
             if (!hintElement) {
@@ -368,70 +296,274 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
                 hintElement.id = `${cursorSpanId}-hint`;
                 document.body.appendChild(hintElement);
             }
-            hintElement.textContent = "Press Tab to accept ⇥";
-            // Apply styles that match Tailwind's utility classes
-            Object.assign(hintElement.style, {
-                position: "fixed",
-                fontSize: "12px",
-                fontWeight: "normal",
-                color: "rgb(75, 85, 99)",
-                backgroundColor: "white",
-                padding: "0.5rem",
-                marginLeft: "0.25rem",
-                marginRight: "0.25rem",
-                borderRadius: "0.25rem",
-                border: "1px solid rgb(229, 231, 235)",
-                fontStyle: "normal",
-                display: "block",
-                lineHeight: "1.4",
-                zIndex: "95",
-                pointerEvents: "none",
-                boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-            });
-            // Position the hint element relative to the iframe and cursor span
+            if (!hintReactRootRef.current) {
+                hintElement.replaceChildren();
+                hintReactRootRef.current = createRoot(hintElement);
+            }
+            const hintLabel = editContext?.isMobile
+                ? "Tap to accept"
+                : "Press Tab to accept ⇥";
+            const isMobile = editContext?.isMobile ?? false;
             const iframeRect = pageViewContext.editorIframe?.getBoundingClientRect();
             const spanRect = span.getBoundingClientRect();
+            let positionStyle = {
+                marginLeft: "0.25rem",
+                marginRight: "0.25rem",
+            };
             if (iframeRect) {
-                // Create a range for the last character to get proper position
-                const textLength = span.textContent?.length || 0;
-                if (textLength > 0 && span.firstChild) {
-                    const range = doc.createRange();
-                    range.setStart(span.firstChild, Math.max(0, textLength - 1));
-                    range.setEnd(span.firstChild, textLength);
-                    const rangeRect = range.getBoundingClientRect();
-                    // Position at the end of the actual text
-                    const absoluteLeft = iframeRect.left + rangeRect.right;
-                    const absoluteTop = iframeRect.top + rangeRect.top;
-                    hintElement.style.left = `${absoluteLeft}px`;
-                    hintElement.style.top = `${absoluteTop}px`;
+                if (isMobile) {
+                    const centerX = (spanRect.left + spanRect.right) / 2;
+                    const gap = 6;
+                    positionStyle = {
+                        ...positionStyle,
+                        left: centerX,
+                        top: spanRect.top - gap,
+                        transform: "translate(-50%, -100%)",
+                    };
                 }
                 else {
-                    // Fallback to the old positioning if there's no text
-                    const absoluteLeft = iframeRect.left + spanRect.right;
-                    const absoluteTop = iframeRect.top + spanRect.top;
-                    hintElement.style.left = `${absoluteLeft}px`;
-                    hintElement.style.top = `${absoluteTop}px`;
+                    const textLength = span.textContent?.length || 0;
+                    let left;
+                    let top;
+                    if (textLength > 0 && span.firstChild) {
+                        const range = doc.createRange();
+                        range.setStart(span.firstChild, Math.max(0, textLength - 1));
+                        range.setEnd(span.firstChild, textLength);
+                        const rangeRect = range.getBoundingClientRect();
+                        left = iframeRect.left + rangeRect.right;
+                        top = iframeRect.top + rangeRect.top;
+                    }
+                    else {
+                        left = iframeRect.left + spanRect.right;
+                        top = iframeRect.top + spanRect.top;
+                    }
+                    positionStyle = {
+                        ...positionStyle,
+                        left,
+                        top,
+                        transform: undefined,
+                    };
                 }
             }
+            hintReactRootRef.current.render(_jsx(InlineCompletionHint, { hintText: hintLabel, isMobile: isMobile, onAccept: () => applyCompletionRef.current?.(), positionStyle: positionStyle }));
         }
         else {
             span.textContent = "";
             // Remove hint element if it exists
             const hintElement = document.getElementById(`${cursorSpanId}-hint`);
             if (hintElement) {
+                hintReactRootRef.current?.unmount();
+                hintReactRootRef.current = null;
                 hintElement.remove();
             }
         }
-    };
-    const clearCursorSpan = () => {
+    }, [pageViewContext.editorIframe, cursorSpanId, editContext?.isMobile]);
+    const clearCursorSpan = useCallback(() => {
         const doc = pageViewContext.editorIframe?.contentWindow?.document;
         if (!doc)
             return;
         // Clear the completion text
         updateCursorSpan("");
-    };
+    }, [pageViewContext.editorIframe?.contentWindow?.document, updateCursorSpan]);
+    // Handle keydown events for cursor movement (arrow keys, etc.)
+    useEffect(() => {
+        const keyHandler = (e) => {
+            if (e.key === "ArrowLeft" ||
+                e.key === "ArrowRight" ||
+                e.key === "ArrowUp" ||
+                e.key === "ArrowDown" ||
+                e.key === " " ||
+                e.key === "Tab" ||
+                e.key === "End" ||
+                e.key === "Backspace" ||
+                e.key === "Delete") {
+                setCurrentCompletion(null);
+                clearCursorSpan();
+                setTimeout(() => {
+                    if (!isUpdatingRef.current) {
+                        positionCursorSpan();
+                    }
+                }, 10);
+                if (e.key === "ArrowRight" || e.key === "Delete") {
+                    const cursorSpan = pageViewContext.editorIframe?.contentWindow?.document.getElementById(cursorSpanId);
+                    if (cursorSpan) {
+                        const originalDisplay = cursorSpan.style.display;
+                        cursorSpan.style.display = "none";
+                        setTimeout(() => {
+                            if (cursorSpan.parentNode) {
+                                cursorSpan.style.display = originalDisplay;
+                            }
+                        }, 0);
+                    }
+                }
+            }
+        };
+        const doc = pageViewContext.editorIframe?.contentWindow?.document;
+        if (!doc)
+            return;
+        doc.addEventListener("keydown", keyHandler);
+        return () => doc.removeEventListener("keydown", keyHandler);
+    }, [
+        clearCursorSpan,
+        cursorSpanId,
+        isUpdatingRef,
+        pageViewContext.editorIframe?.contentWindow?.document,
+        pageViewContext.page,
+        positionCursorSpan,
+    ]);
+    // Function to apply the completion (must be before handleInput)
+    const applyCompletion = useCallback(() => {
+        const iframeWindow = pageViewContext.editorIframe?.contentWindow;
+        const iframeDocument = iframeWindow?.document;
+        if (!iframeWindow ||
+            !iframeDocument ||
+            !fieldsContext?.inlineEditingFieldElement)
+            return;
+        const cursorSpan = iframeDocument.getElementById(cursorSpanId);
+        if (!cursorSpan)
+            return;
+        const completionToApply = cursorSpan.textContent || "";
+        if (!completionToApply)
+            return;
+        const element = fieldsContext.inlineEditingFieldElement;
+        const fieldId = element.getAttribute("data-fieldid");
+        const fieldName = element.getAttribute("data-fieldname");
+        const itemId = element.getAttribute("data-itemid");
+        const language = element.getAttribute("data-language");
+        const versionStr = element.getAttribute("data-version");
+        const isRichText = element.getAttribute("data-is-richtext") === "true";
+        const version = versionStr ? parseInt(versionStr, 10) : undefined;
+        if (!fieldId || !itemId || !language || !version)
+            return;
+        const selection = iframeWindow.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        const tempRange = document.createRange();
+        tempRange.selectNodeContents(element);
+        tempRange.setEnd(range.startContainer, range.startOffset);
+        const textUpToCursor = tempRange.toString();
+        const wordBoundaryRegex = /[\s.,;:!?"'()[\]{}<>/|=+\-*&^%$#@~`](?=[^\s.,;:!?"'()[\]{}<>/|=+\-*&^%$#@~`]*$)/;
+        const match = textUpToCursor.match(wordBoundaryRegex);
+        const lastWordBoundaryIndex = match && match.index !== undefined ? match.index + 1 : 0;
+        const currentPartialWord = textUpToCursor
+            .substring(lastWordBoundaryIndex)
+            .trim();
+        const isOverlapping = currentPartialWord.length > 0 &&
+            completionToApply
+                .toLowerCase()
+                .startsWith(currentPartialWord.toLowerCase());
+        if (isOverlapping) {
+            const wordRange = document.createRange();
+            const startContainer = range.startContainer;
+            const startOffset = range.startOffset - currentPartialWord.length;
+            if (startOffset >= 0 && startContainer.nodeType === Node.TEXT_NODE) {
+                wordRange.setStart(startContainer, startOffset);
+                wordRange.setEnd(range.startContainer, range.startOffset);
+                wordRange.deleteContents();
+            }
+            else {
+                if (textUpToCursor.length > 0 && !textUpToCursor.endsWith(" ")) {
+                    const spaceNode = document.createTextNode(" ");
+                    range.insertNode(spaceNode);
+                    range.setStartAfter(spaceNode);
+                    range.setEndAfter(spaceNode);
+                }
+            }
+        }
+        else {
+            if (textUpToCursor.length > 0 &&
+                !textUpToCursor.endsWith(" ") &&
+                !textUpToCursor.endsWith("\n") &&
+                !/[.!?\-—:;({[\s]$/.test(textUpToCursor)) {
+                const spaceNode = document.createTextNode(" ");
+                range.insertNode(spaceNode);
+                range.setStartAfter(spaceNode);
+                range.setEndAfter(spaceNode);
+            }
+        }
+        const textNode = document.createTextNode(completionToApply);
+        range.insertNode(textNode);
+        range.setStartAfter(textNode);
+        range.setEndAfter(textNode);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        setCurrentCompletion(null);
+        clearCursorSpan();
+        setTimeout(() => {
+            let valueToSave;
+            if (isRichText) {
+                const clone = element.cloneNode(true);
+                const cursorElem = clone.querySelector(`#${cursorSpanId}`);
+                if (cursorElem)
+                    cursorElem.parentNode?.removeChild(cursorElem);
+                const ownerDoc = clone.ownerDocument || document;
+                const walker = ownerDoc.createTreeWalker(clone, NodeFilter.SHOW_TEXT);
+                const toClean = [];
+                while (walker.nextNode()) {
+                    const tn = walker.currentNode;
+                    if (tn.nodeValue && tn.nodeValue.includes("\u200B"))
+                        toClean.push(tn);
+                }
+                toClean.forEach((tn) => (tn.nodeValue = tn.nodeValue?.replaceAll("\u200B", "") || ""));
+                valueToSave = clone.innerHTML;
+            }
+            else {
+                valueToSave = (element.innerText || "").replaceAll("\u200B", "");
+            }
+            editContext?.operations.editField({
+                field: {
+                    fieldId,
+                    fieldName: fieldName ?? undefined,
+                    item: { id: itemId, language, version },
+                },
+                refresh: "none",
+                value: valueToSave,
+            });
+        }, 0);
+    }, [
+        pageViewContext.editorIframe?.contentWindow,
+        fieldsContext?.inlineEditingFieldElement,
+        cursorSpanId,
+        clearCursorSpan,
+        editContext?.operations,
+    ]);
+    applyCompletionRef.current = applyCompletion;
+    // Manual completion trigger (non-debounced)
+    const getCompletionManual = useCallback(async () => {
+        if (!canUseAi)
+            return;
+        const el = fieldsContext?.inlineEditingFieldElement;
+        if (!el)
+            return;
+        const full = getContentUpToCursor(el) || "";
+        const sentence = full.split(/[.?!]\s*/).pop() || "";
+        const rawSuggestion = await getCompletion(el, true);
+        if (!rawSuggestion) {
+            setCurrentCompletion(null);
+            clearCursorSpan();
+            return;
+        }
+        const suggestion = rawSuggestion.startsWith(sentence)
+            ? rawSuggestion
+            : sentence + rawSuggestion;
+        setCurrentCompletion(suggestion);
+        updateCursorSpan(suggestion.substring(sentence.length));
+    }, [
+        fieldsContext?.inlineEditingFieldElement,
+        canUseAi,
+        getContentUpToCursor,
+        getCompletion,
+        clearCursorSpan,
+        updateCursorSpan,
+    ]);
     // On every input: either reuse the existing suggestion or fire a new one
     const handleInput = useCallback((e) => {
+        if (!canUseAi) {
+            setCurrentCompletion(null);
+            clearCursorSpan();
+            return;
+        }
         const el = fieldsContext?.inlineEditingFieldElement;
         if (!el)
             return;
@@ -518,13 +650,20 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
         }
     }, [
         fieldsContext?.inlineEditingFieldElement,
+        getContentUpToCursor,
         currentCompletion,
-        getCompletionDebounced,
+        canUseAi,
+        clearCursorSpan,
         getCompletionManual,
+        pageViewContext.editorIframe?.contentWindow,
+        cursorSpanId,
+        applyCompletion,
+        updateCursorSpan,
+        getCompletionDebounced,
     ]);
     // Wire up the input listener
     useEffect(() => {
-        if (!editContext?.enableCompletions)
+        if (!canUseAi || !editContext?.enableCompletions)
             return;
         const el = fieldsContext?.inlineEditingFieldElement;
         if (!el)
@@ -534,11 +673,12 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
     }, [
         fieldsContext?.inlineEditingFieldElement,
         handleInput,
+        canUseAi,
         editContext?.enableCompletions,
     ]);
     // Add mouse click handler to update cursor span position
     useEffect(() => {
-        if (!editContext?.enableCompletions)
+        if (!canUseAi || !editContext?.enableCompletions)
             return;
         const el = fieldsContext?.inlineEditingFieldElement;
         if (!el)
@@ -557,7 +697,11 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
         return () => el.removeEventListener("mouseup", handleMouseUp);
     }, [
         fieldsContext?.inlineEditingFieldElement,
+        canUseAi,
         editContext?.enableCompletions,
+        isUpdatingRef,
+        positionCursorSpan,
+        clearCursorSpan,
     ]);
     // Clean up abort controller on unmount
     useEffect(() => {
@@ -572,157 +716,13 @@ export function useInlineAiCompletion({ pageViewContext, cursorSpanId, isUpdatin
             }
         };
     }, []);
-    // Function to apply the completion
-    const applyCompletion = () => {
-        // Get the cursor span to read the most up-to-date completion
-        const iframeWindow = pageViewContext.editorIframe?.contentWindow;
-        const iframeDocument = iframeWindow?.document;
-        if (!iframeWindow ||
-            !iframeDocument ||
-            !fieldsContext?.inlineEditingFieldElement)
-            return;
-        const cursorSpan = iframeDocument.getElementById(cursorSpanId);
-        if (!cursorSpan)
-            return;
-        // Get the completion text directly from the cursor span, which should be the most current
-        const completionToApply = cursorSpan.textContent || "";
-        if (!completionToApply)
-            return;
-        const element = fieldsContext?.inlineEditingFieldElement;
-        // Get field attributes for saving
-        const fieldId = element.getAttribute("data-fieldid");
-        const fieldName = element.getAttribute("data-fieldname");
-        const itemId = element.getAttribute("data-itemid");
-        const language = element.getAttribute("data-language");
-        const versionStr = element.getAttribute("data-version");
-        const isRichText = element.getAttribute("data-is-richtext") === "true";
-        const version = versionStr ? parseInt(versionStr, 10) : undefined;
-        if (!fieldId || !itemId || !language || !version)
-            return;
-        // Get the current selection position
-        const selection = iframeWindow.getSelection();
-        if (!selection || selection.rangeCount === 0)
-            return;
-        // Get the text up to the cursor to analyze current word
-        const range = selection.getRangeAt(0);
-        const tempRange = document.createRange();
-        tempRange.selectNodeContents(element);
-        tempRange.setEnd(range.startContainer, range.startOffset);
-        const textUpToCursor = tempRange.toString();
-        // Get the current partial word by finding text from the last word boundary to cursor
-        // Look for last word boundary (space, punctuation, etc.)
-        const wordBoundaryRegex = /[\s.,;:!?"'()[\]{}<>\/\\|=+\-*&^%$#@~`](?=[^\s.,;:!?"'()[\]{}<>\/\\|=+\-*&^%$#@~`]*$)/;
-        const match = textUpToCursor.match(wordBoundaryRegex);
-        const lastWordBoundaryIndex = match && match.index !== undefined ? match.index + 1 : 0;
-        const currentPartialWord = textUpToCursor
-            .substring(lastWordBoundaryIndex)
-            .trim();
-        // Check if completion overlaps with current partial word
-        // (e.g., if user typed "int" and completion is "integer")
-        const isOverlapping = currentPartialWord.length > 0 &&
-            completionToApply
-                .toLowerCase()
-                .startsWith(currentPartialWord.toLowerCase());
-        console.log("Is overlapping:", isOverlapping);
-        // If there's overlap, we need to delete the current partial word
-        if (isOverlapping) {
-            // Create a range to select the current partial word
-            const wordRange = document.createRange();
-            // Position where the current word starts
-            let startContainer = range.startContainer;
-            let startOffset = range.startOffset - currentPartialWord.length;
-            // We need to handle the case where the word spans multiple text nodes
-            // For simplicity, we'll try to handle the common case first
-            if (startOffset >= 0 && startContainer.nodeType === Node.TEXT_NODE) {
-                // Simple case: word is in the same text node as cursor
-                wordRange.setStart(startContainer, startOffset);
-                wordRange.setEnd(range.startContainer, range.startOffset);
-                wordRange.deleteContents(); // Delete the partial word
-            }
-            else {
-                // Complex case: use a simpler approach - just insert, user can delete manually if needed
-                // This is a fallback for complex DOM structures
-                // Add a space if we're in the middle of a sentence
-                if (textUpToCursor.length > 0 && !textUpToCursor.endsWith(" ")) {
-                    const spaceNode = document.createTextNode(" ");
-                    range.insertNode(spaceNode);
-                    range.setStartAfter(spaceNode);
-                    range.setEndAfter(spaceNode);
-                }
-            }
-        }
-        else {
-            // Not overlapping, add a space if we're in the middle of text
-            // and not already at the beginning of text or after a space
-            if (textUpToCursor.length > 0 &&
-                !textUpToCursor.endsWith(" ") &&
-                // Don't add space at the start of a line or after punctuation that shouldn't have a space
-                !textUpToCursor.endsWith("\n") &&
-                !/[.!?\-—:;({[\s]$/.test(textUpToCursor)) {
-                const spaceNode = document.createTextNode(" ");
-                range.insertNode(spaceNode);
-                range.setStartAfter(spaceNode);
-                range.setEndAfter(spaceNode);
-            }
-        }
-        // Now insert the completion text
-        const textNode = document.createTextNode(isOverlapping
-            ? completionToApply // If overlapping, use the full completion
-            : completionToApply);
-        range.insertNode(textNode);
-        // Move the cursor after the inserted text
-        range.setStartAfter(textNode);
-        range.setEndAfter(textNode);
-        selection.removeAllRanges();
-        selection.addRange(range);
-        setCurrentCompletion(null);
-        clearCursorSpan();
-        // Explicitly save the field value since the MutationObserver may miss this change
-        // when isUpdatingRef is true during cursor positioning
-        setTimeout(() => {
-            // Get the final value from the element (excluding cursor span content)
-            let valueToSave;
-            if (isRichText) {
-                const clone = element.cloneNode(true);
-                const cursorElem = clone.querySelector(`#${cursorSpanId}`);
-                if (cursorElem)
-                    cursorElem.parentNode?.removeChild(cursorElem);
-                // Clean up zero-width spaces
-                const ownerDoc = clone.ownerDocument || document;
-                const walker = ownerDoc.createTreeWalker(clone, NodeFilter.SHOW_TEXT);
-                const toClean = [];
-                while (walker.nextNode()) {
-                    const tn = walker.currentNode;
-                    if (tn.nodeValue && tn.nodeValue.includes("\u200B"))
-                        toClean.push(tn);
-                }
-                toClean.forEach((tn) => (tn.nodeValue = tn.nodeValue?.replaceAll("\u200B", "") || ""));
-                valueToSave = clone.innerHTML;
-            }
-            else {
-                valueToSave = (element.innerText || "").replaceAll("\u200B", "");
-            }
-            // Call editField to save the value
-            editContext?.operations.editField({
-                field: {
-                    fieldId,
-                    fieldName: fieldName ?? undefined,
-                    item: {
-                        id: itemId,
-                        language,
-                        version,
-                    },
-                },
-                refresh: "none",
-                value: valueToSave,
-            });
-        }, 0);
-    };
     // Exposed manual trigger (if needed)
     return useMemo(() => () => {
         setCurrentCompletion(null);
         clearCursorSpan();
-        getCompletionManual();
-    }, [getCompletionManual]);
+        if (canUseAi) {
+            getCompletionManual();
+        }
+    }, [canUseAi, clearCursorSpan, getCompletionManual]);
 }
 //# sourceMappingURL=useInlineAICompletion.js.map