@alpaca-editor/core 1.0.3832 → 1.0.3835

package/src/editor/page-editor-chrome/useInlineAICompletion.tsx

@@ -0,0 +1,734 @@
+import {
+  useEffect,
+  useCallback,
+  useState,
+  useMemo,
+  useRef,
+  MutableRefObject,
+} from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { PageViewContext } from "../page-viewer/pageViewContext";
+import { useEditContext } from "../client/editContext";
+import { executePrompt } from "../services/aiService";
+
+export function useInlineAiCompletion({
+  pageViewContext,
+  cursorSpanId,
+  isUpdatingRef,
+}: {
+  pageViewContext: PageViewContext;
+  cursorSpanId: string;
+  isUpdatingRef: MutableRefObject<boolean>;
+}) {
+  const editContext = useEditContext();
+  const [currentCompletion, setCurrentCompletion] = useState<string | null>(
+    null,
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const loadingAnimationRef = useRef<number | null>(null);
+
+  // Clean up hint element on unmount
+  useEffect(() => {
+    return () => {
+      const hintElement = document.getElementById(`${cursorSpanId}-hint`);
+      if (hintElement) {
+        hintElement.remove();
+      }
+
+      if (loadingAnimationRef.current) {
+        cancelAnimationFrame(loadingAnimationRef.current);
+      }
+    };
+  }, [cursorSpanId]);
+
+  const lastCaretPosRef = useRef<{
+    node: Node | null;
+    offset: number;
+    textLength?: number;
+  } | null>(null);
+
+  // Simple function to track caret position without inserting spans
+  const positionCursorSpan = () => {
+    if (isUpdatingRef.current) return;
+    isUpdatingRef.current = true;
+
+    try {
+      const iframeWindow =
+        pageViewContext.editorIframeRef.current?.contentWindow;
+      const iframeDocument = iframeWindow?.document;
+      const editableElement = editContext?.inlineEditingFieldElement;
+
+      if (!iframeWindow || !iframeDocument || !editableElement) return;
+
+      // Get current selection
+      const selection = iframeWindow.getSelection();
+      if (!selection || selection.rangeCount === 0) return;
+
+      const range = selection.getRangeAt(0);
+
+      // Only proceed if selection is within our editing element
+      if (!editableElement.contains(range.commonAncestorContainer)) return;
+
+      // Save detailed information about the cursor position
+      const currentNode = range.startContainer;
+      const currentOffset = range.startOffset;
+
+      // Create a temporary range to get text up to cursor
+      const tempRange = document.createRange();
+      tempRange.selectNodeContents(editableElement);
+      tempRange.setEnd(currentNode, currentOffset);
+      const textUpToCursor = tempRange.toString();
+
+      // Check if cursor position has changed
+      const cursorMoved =
+        !lastCaretPosRef.current ||
+        lastCaretPosRef.current.node !== currentNode ||
+        lastCaretPosRef.current.offset !== currentOffset ||
+        textUpToCursor.length !== (lastCaretPosRef.current.textLength || 0);
+
+      if (cursorMoved) {
+        // Reset completion if cursor position changed
+
+        lastCaretPosRef.current = {
+          node: currentNode,
+          offset: currentOffset,
+          textLength: textUpToCursor.length,
+        };
+      }
+
+      // Save a copy of the current range
+      const originalRange = range.cloneRange();
+
+      // Remove any existing cursor spans
+      const existingSpan = iframeDocument.getElementById(cursorSpanId);
+      if (existingSpan) {
+        existingSpan.parentNode?.removeChild(existingSpan);
+      }
+
+      // Create our cursor span
+      const cursorSpan = existingSpan ?? iframeDocument.createElement("span");
+      cursorSpan.id = cursorSpanId;
+
+      cursorSpan.style.fontWeight = "bold";
+      cursorSpan.style.display = "inline";
+      cursorSpan.style.pointerEvents = "none";
+      cursorSpan.contentEditable = "false";
+      cursorSpan.setAttribute("data-cursor-indicator", "true");
+
+      // Get a working range for insertion
+      const workingRange = range.cloneRange();
+      workingRange.collapse(true);
+
+      // Insert the span at cursor position
+      workingRange.insertNode(cursorSpan);
+
+      // Restore original selection
+      selection.removeAllRanges();
+      selection.addRange(originalRange);
+
+      // setTimeout(() => {
+      //   getCompletionDebounced();
+      // }, 100);
+    } catch (error) {
+      console.error("Error updating cursor:", error);
+    } finally {
+      setTimeout(() => {
+        isUpdatingRef.current = false;
+      }, 10);
+    }
+  };
+
+  useEffect(() => {
+    // Handle keydown events - especially for cursor movement
+    const keyHandler = (e: KeyboardEvent) => {
+      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.editorIframeRef.current?.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.editorIframeRef.current?.contentWindow?.document.addEventListener(
+      "keydown",
+      keyHandler,
+    );
+    return () => {
+      pageViewContext.editorIframeRef.current?.contentWindow?.document.removeEventListener(
+        "keydown",
+        keyHandler,
+      );
+    };
+  }, [currentCompletion, pageViewContext.page]);
+
+  // Extracts the text up to the cursor position in the editable element
+  const getContentUpToCursor = (element: HTMLElement) => {
+    const iframeWindow = pageViewContext.editorIframeRef.current?.contentWindow;
+    const selection = iframeWindow?.getSelection();
+    if (!element || !selection || selection.rangeCount === 0) return null;
+    const range = selection.getRangeAt(0);
+    const cursorPosition = range.startOffset;
+    let contentUpToCursor = "";
+    if (element.childNodes.length === 0) {
+      contentUpToCursor = "";
+    } else if (
+      element.childNodes.length === 1 &&
+      element.firstChild?.nodeType === Node.TEXT_NODE
+    ) {
+      const full = element.innerText || "";
+      contentUpToCursor = full.substring(
+        0,
+        Math.min(cursorPosition, full.length),
+      );
+    } else {
+      const tempRange = document.createRange();
+      tempRange.selectNodeContents(element);
+      tempRange.setEnd(range.startContainer, range.startOffset);
+      contentUpToCursor = tempRange.toString();
+    }
+    return contentUpToCursor;
+  };
+
+  // Loading animation with three dots changing color
+  const startLoadingAnimation = () => {
+    const doc =
+      pageViewContext.editorIframeRef.current?.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 = "•";
+      dot.style.transition = "color 0.3s ease";
+      dot.style.color = "#ccc";
+      dot.style.fontSize = "16px";
+      span.appendChild(dot);
+    }
+
+    // Animate dots
+    let step = 0;
+    const animate = () => {
+      const dots = span.querySelectorAll("span");
+      dots.forEach((dot, index) => {
+        if (index === step % 3) {
+          (dot as HTMLElement).style.color = "#666";
+        } else {
+          (dot as HTMLElement).style.color = "#ccc";
+        }
+      });
+      step++;
+      loadingAnimationRef.current = requestAnimationFrame(() => {
+        // Slow down animation by only updating every 15 frames (~250ms at 60fps)
+        if (step % 15 === 0) {
+          animate();
+        } else {
+          loadingAnimationRef.current = requestAnimationFrame(animate);
+        }
+      });
+    };
+
+    animate();
+  };
+
+  const stopLoadingAnimation = () => {
+    if (loadingAnimationRef.current) {
+      cancelAnimationFrame(loadingAnimationRef.current);
+      loadingAnimationRef.current = null;
+    }
+  };
+
+  const getCompletion = async (element: HTMLElement) => {
+    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 to ensure clean separation between
+    // user text and completion suggestion
+    const lastChar = contentUpToCursor.slice(-1);
+    if (lastChar !== " " && lastChar !== "\u00A0") {
+      return null;
+    }
+
+    const messages = [
+      {
+        name: "system",
+        role: "system",
+        content:
+          "You are a sentence completion tool. ONLY provide the completion text (what comes after the user's text), never repeat any part of what the user wrote. Your completion should flow naturally from the user's text.",
+      },
+      {
+        name: "user",
+        role: "user",
+        content: `Complete this sentence. ONLY provide the completion (do not repeat my text): ${contentUpToCursor}`,
+      },
+    ];
+
+    if (!editContext) return null;
+
+    // Show loading indicator
+    setIsLoading(true);
+    startLoadingAnimation();
+
+    try {
+      const result = await executePrompt(
+        messages,
+        editContext,
+        () => ({
+          endpoint: "/alpaca/editor/ai/complete",
+          promptData: {
+            itemid: itemId,
+            language,
+            version,
+            fieldid: fieldId,
+            fieldname: fieldName,
+            content: contentUpToCursor,
+          },
+        }),
+        {},
+        { signal },
+        "gpt-4.1-nano",
+      );
+
+      return result;
+    } catch (error: unknown) {
+      // 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();
+    }
+  };
+
+  // Debounced AI call: recompute the sentence, call getCompletion, and extract only the "tail" for the ghost text
+  const getCompletionDebounced = useDebouncedCallback(async () => {
+    const el = editContext?.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 result = await getCompletion(el);
+    const rawSuggestion = result?.messages?.[0]?.content;
+    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));
+  }, 250);
+
+  // Inserts or clears the ghost text inside the cursor span
+  const updateCursorSpan = (text: string) => {
+    const doc =
+      pageViewContext.editorIframeRef.current?.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) {
+        hintElement = document.createElement("div");
+        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: "9999",
+        pointerEvents: "none",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+      });
+
+      // Position the hint element relative to the iframe and cursor span
+      const iframeRect =
+        pageViewContext.editorIframeRef.current?.getBoundingClientRect();
+      const spanRect = span.getBoundingClientRect();
+
+      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`;
+        } 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`;
+        }
+      }
+    } else {
+      span.textContent = "";
+      // Remove hint element if it exists
+      const hintElement = document.getElementById(`${cursorSpanId}-hint`);
+      if (hintElement) {
+        hintElement.remove();
+      }
+    }
+  };
+
+  const clearCursorSpan = () => {
+    const doc =
+      pageViewContext.editorIframeRef.current?.contentWindow?.document;
+    if (!doc) return;
+
+    // Clear the completion text
+    updateCursorSpan("");
+  };
+
+  // On every input: either reuse the existing suggestion or fire a new one
+  const handleInput = useCallback(
+    (e: KeyboardEvent) => {
+      const el = editContext?.inlineEditingFieldElement;
+      if (!el) return;
+
+      // Clear completion when Escape is pressed
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        setCurrentCompletion(null);
+        clearCursorSpan();
+        return;
+      }
+
+      // Request new completion when Ctrl+Space is pressed
+      if (e.key === " " && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        e.stopPropagation();
+        setCurrentCompletion(null);
+        clearCursorSpan();
+        getCompletionDebounced();
+        return;
+      }
+
+      // Apply completion when Tab is pressed
+      if (e.key === "Tab") {
+        // Check if there's an actual completion in the cursor span
+        const cursorSpan =
+          pageViewContext.editorIframeRef.current?.contentWindow?.document.getElementById(
+            cursorSpanId,
+          );
+        if (
+          cursorSpan &&
+          cursorSpan.textContent &&
+          cursorSpan.textContent.trim() !== ""
+        ) {
+          e.preventDefault();
+          e.stopPropagation();
+          applyCompletion();
+          return;
+        }
+      }
+
+      const full = getContentUpToCursor(el) || "";
+      const sentence = full.split(/[.?!]\s*/).pop() || "";
+
+      // If we already have a suggestion, check if the user is still typing along it
+      // Normalize spaces to handle both regular and non-breaking spaces
+      const normalizedSentence = sentence.replace(/\s/g, " ");
+      const normalizedCompletion = currentCompletion?.replace(/\s/g, " ");
+
+      if (
+        normalizedCompletion &&
+        normalizedCompletion.startsWith(normalizedSentence)
+      ) {
+        // user is still matching the suggestion → update the remaining tail
+        const remaining = normalizedCompletion.slice(normalizedSentence.length);
+
+        updateCursorSpan(remaining);
+        return;
+      }
+      // else: user diverged → drop it
+      setCurrentCompletion(null);
+      clearCursorSpan();
+
+      // No active suggestion → fire new request once they've typed 2+ words
+      const words = sentence.trim().split(/\s+/).filter(Boolean);
+      if (words.length >= 2) {
+        getCompletionDebounced();
+      } else {
+        setCurrentCompletion(null);
+        clearCursorSpan();
+      }
+    },
+    [
+      editContext?.inlineEditingFieldElement,
+      currentCompletion,
+      getCompletionDebounced,
+    ],
+  );
+
+  // Wire up the input listener
+  useEffect(() => {
+    if (!editContext?.enableCompletions) return;
+    const el = editContext?.inlineEditingFieldElement;
+    if (!el) return;
+    el.addEventListener("keydown", handleInput);
+    return () => el.removeEventListener("keydown", handleInput);
+  }, [
+    editContext?.inlineEditingFieldElement,
+    handleInput,
+    editContext?.enableCompletions,
+  ]);
+
+  // Clean up abort controller on unmount
+  useEffect(() => {
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+        abortControllerRef.current = null;
+      }
+
+      if (loadingAnimationRef.current) {
+        cancelAnimationFrame(loadingAnimationRef.current);
+        loadingAnimationRef.current = null;
+      }
+    };
+  }, []);
+
+  // Function to apply the completion
+  const applyCompletion = () => {
+    // Get the cursor span to read the most up-to-date completion
+    const iframeWindow = pageViewContext.editorIframeRef.current?.contentWindow;
+    const iframeDocument = iframeWindow?.document;
+    if (
+      !iframeWindow ||
+      !iframeDocument ||
+      !editContext?.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 = editContext?.inlineEditingFieldElement;
+
+    // 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, // If not overlapping, use as is
+    );
+    range.insertNode(textNode);
+
+    // Move the cursor after the inserted text
+    range.setStartAfter(textNode);
+    range.setEndAfter(textNode);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    setCurrentCompletion(null);
+    clearCursorSpan();
+  };
+
+  // Exposed manual trigger (if needed)
+  return useMemo(
+    () => () => {
+      setCurrentCompletion(null);
+      clearCursorSpan();
+      getCompletionDebounced();
+    },
+    [getCompletionDebounced],
+  );
+}