refactor: Apply AI diffs server-side instead of client-side

server.js

@@ -402,6 +402,31 @@ function applyDiffs(originalHtml, aiResponseContent) {
   return currentHtml;
 }
 
+
+// --- Endpoint to Apply Diffs Server-Side ---
+app.post("/api/apply-diffs", (req, res) => {
+  const { originalHtml, aiResponseContent } = req.body;
+
+  if (typeof originalHtml !== 'string' || typeof aiResponseContent !== 'string') {
+    return res.status(400).json({ ok: false, message: "Missing or invalid originalHtml or aiResponseContent." });
+  }
+
+  try {
+    console.log("[Apply Diffs] Received request to apply diffs.");
+    const modifiedHtml = applyDiffs(originalHtml, aiResponseContent);
+    console.log("[Apply Diffs] Diffs applied successfully.");
+    res.setHeader('Content-Type', 'text/html; charset=utf-8');
+    res.status(200).send(modifiedHtml);
+  } catch (error: any) {
+    console.error("[Apply Diffs] Error applying diffs:", error);
+    res.status(400).json({ // Use 400 for client-side correctable errors (bad diff format)
+      ok: false,
+      message: error.message || "Failed to apply AI suggestions.",
+    });
+  }
+});
+
+
 // --- AI Interaction Route ---
 app.post("/api/ask-ai", async (req, res) => {
   const { prompt, html, previousPrompt } = req.body;

src/components/App.tsx

@@ -19,7 +19,7 @@ function App() {
   const preview = useRef<HTMLDivElement>(null);
   const editor = useRef<HTMLDivElement>(null);
   const resizer = useRef<HTMLDivElement>(null);
-  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  // Removed editorRef
 
   const [isResizing, setIsResizing] = useState(false);
   const [error, setError] = useState(false);
@@ -148,9 +148,7 @@ function App() {
             setHtml(defaultHTML);
             setError(false);
             removeHtmlStorage();
-            editorRef.current?.revealLine(
-              editorRef.current?.getModel()?.getLineCount() ?? 0
-            );
+            // Removed editorRef scroll logic
           }
         }}
       >
@@ -189,18 +187,17 @@ function App() {
               setHtml(newValue);
               setError(false);
             }}
-            onMount={(editor) => (editorRef.current = editor)}
+            // Removed onMount for editorRef
           />
           <AskAI
             html={html}
-            setHtml={setHtml} // Still needed for full HTML updates
-            editorRef={editorRef} // Pass the editor ref
+            setHtml={setHtml} // Used for both full and diff updates now
+            // Removed editorRef prop
             isAiWorking={isAiWorking}
             setisAiWorking={setisAiWorking}
             onScrollToBottom={() => {
-              editorRef.current?.revealLine(
-                editorRef.current?.getModel()?.getLineCount() ?? 0
-              );
+              // Consider if scrolling is still needed here, maybe based on html length change?
+              // For now, removing the direct editor scroll.
             }}
           />
         </div>

src/components/ask-ai/ask-ai.tsx

@@ -1,9 +1,9 @@
-import { useState } from "react"; // Removed useRef import
+import { useState } from "react";
 import { RiSparkling2Fill } from "react-icons/ri";
 import { GrSend } from "react-icons/gr";
 import classNames from "classnames";
 import { toast } from "react-toastify";
-import { editor } from "monaco-editor"; // Import editor type
+// Removed monaco editor import
 
 import Login from "../login/login";
 import { defaultHTML } from "../../utils/consts";
@@ -11,172 +11,35 @@ import SuccessSound from "./../../assets/success.mp3";
 
 function AskAI({
   html, // Current full HTML content (used for initial request and context)
-  setHtml, // Used only for full updates now
+  setHtml, // Used for updates (both full and diff-based)
   onScrollToBottom, // Used for full updates
   isAiWorking,
   setisAiWorking,
-  editorRef, // Pass the editor instance ref
 }: {
   html: string;
   setHtml: (html: string) => void;
   onScrollToBottom: () => void;
   isAiWorking: boolean;
   setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
-  editorRef: React.RefObject<editor.IStandaloneCodeEditor | null>; // Add editorRef prop
+  // Removed editorRef prop
 }) {
   const [open, setOpen] = useState(false);
   const [prompt, setPrompt] = useState("");
   const [hasAsked, setHasAsked] = useState(false);
   const [previousPrompt, setPreviousPrompt] = useState("");
-  // Removed unused diffBuffer state: const [diffBuffer, setDiffBuffer] = useState("");
   const audio = new Audio(SuccessSound);
   audio.volume = 0.5;
 
-  // --- Diff Constants ---
-  const SEARCH_START = "<<<<<<< SEARCH";
-  const DIVIDER = "=======";
-  const REPLACE_END = ">>>>>>> REPLACE";
-
-  // --- Diff Applying Logic ---
-
-  /**
-   * Applies a single parsed diff block to the Monaco editor.
-   */
-  const applyMonacoDiff = (
-    original: string,
-    updated: string,
-    editorInstance: editor.IStandaloneCodeEditor
-  ) => {
-    const model = editorInstance.getModel();
-    if (!model) {
-      console.error("Monaco model not available for applying diff.");
-      toast.error("Editor model not found, cannot apply change.");
-      return false; // Indicate failure
-    }
-
-    // Monaco's findMatches can be sensitive. Let's try a simple search first.
-    // We need to be careful about potential regex characters in the original block.
-    // Escape basic regex characters for the search string.
-    const escapedOriginal = original.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-
-    // Find the first occurrence. Might need more robust logic for multiple identical blocks.
-    const matches = model.findMatches(
-      escapedOriginal,
-      false, // isRegex
-      false, // matchCase
-      false, // wordSeparators
-      null, // searchScope
-      true, // captureMatches
-      1 // limitResultCount
-    );
-
-    if (matches.length > 0) {
-      const range = matches[0].range;
-      const editOperation = {
-        range: range,
-        text: updated,
-        forceMoveMarkers: true,
-      };
-
-      try {
-        // Use pushEditOperations for better undo/redo integration if needed,
-        // but executeEdits is simpler for direct replacement.
-        editorInstance.executeEdits("ai-diff-apply", [editOperation]);
-        // Scroll to the change
-        editorInstance.revealRangeInCenter(range, editor.ScrollType.Smooth);
-        console.log("[Diff Apply] Applied block:", { original, updated });
-        return true; // Indicate success
-      } catch (editError) {
-        console.error("Error applying edit operation:", editError);
-        toast.error(`Failed to apply change: ${editError}`);
-        return false; // Indicate failure
-      }
-    } else {
-      console.warn("Could not find SEARCH block in editor:", original);
-      // Attempt fuzzy match (simple whitespace normalization) as fallback
-      const normalizedOriginal = original.replace(/\s+/g, ' ').trim();
-      const editorContent = model.getValue();
-      const normalizedContent = editorContent.replace(/\s+/g, ' ').trim();
-      const startIndex = normalizedContent.indexOf(normalizedOriginal);
-
-      if (startIndex !== -1) {
-          console.warn("Applying diff using fuzzy whitespace match.");
-          // This is tricky - need to map normalized index back to original positions
-          // For now, let's just log and skip applying this specific block
-          toast.warn("Could not precisely locate change, skipping one diff block.");
-          // TODO: Implement more robust fuzzy matching if needed
-      } else {
-         toast.error("Could not locate the code block to change. AI might be referencing outdated code.");
-      }
-      return false; // Indicate failure
-    }
-  };
-
-  /**
-   * Processes the accumulated diff buffer, parsing and applying complete blocks.
-   */
-  const processDiffBuffer = (
-    currentBuffer: string,
-    editorInstance: editor.IStandaloneCodeEditor | null
-  ): string => {
-    if (!editorInstance) return currentBuffer; // Don't process if editor isn't ready
-
-    let remainingBuffer = currentBuffer;
-    let appliedSuccess = true;
-
-    // eslint-disable-next-line no-constant-condition
-    while (true) {
-      const searchStartIndex = remainingBuffer.indexOf(SEARCH_START);
-      if (searchStartIndex === -1) break; // No more potential blocks
-
-      const dividerIndex = remainingBuffer.indexOf(DIVIDER, searchStartIndex);
-      if (dividerIndex === -1) break; // Incomplete block
-
-      const replaceEndIndex = remainingBuffer.indexOf(REPLACE_END, dividerIndex);
-      if (replaceEndIndex === -1) break; // Incomplete block
-
-      // Extract the block content
-      const originalBlockContent = remainingBuffer
-        .substring(searchStartIndex + SEARCH_START.length, dividerIndex)
-        .trimEnd(); // Trim potential trailing newline before divider
-      const updatedBlockContent = remainingBuffer
-        .substring(dividerIndex + DIVIDER.length, replaceEndIndex)
-        .trimEnd(); // Trim potential trailing newline before end marker
-
-      // Adjust for newlines potentially trimmed by .trimEnd() if they were intended
-      const original = originalBlockContent.startsWith('\n') ? originalBlockContent.substring(1) : originalBlockContent;
-      const updated = updatedBlockContent.startsWith('\n') ? updatedBlockContent.substring(1) : updatedBlockContent;
-
-
-      console.log("[Diff Parse] Found block:", { original, updated });
-
-      // Apply the diff
-      appliedSuccess = applyMonacoDiff(original, updated, editorInstance) && appliedSuccess;
-
-      // Remove the processed block from the buffer
-      remainingBuffer = remainingBuffer.substring(replaceEndIndex + REPLACE_END.length);
-    }
-
-     if (!appliedSuccess) {
-         // If any block failed, maybe stop processing further blocks in this stream?
-         // Or just let it continue and report errors per block? Let's continue for now.
-         console.warn("One or more diff blocks failed to apply.");
-     }
-
-    return remainingBuffer; // Return the part of the buffer that couldn't be processed yet
-  };
-
-
-  // --- Main AI Call Logic ---
+  // Removed client-side diff parsing/applying logic
   // --- Main AI Call Logic ---
   const callAi = async () => {
     if (isAiWorking || !prompt.trim()) return;
+    const originalHtml = html; // Store the HTML state at the start of the request
     setisAiWorking(true);
-    // Removed setDiffBuffer("") call
 
     let fullContentResponse = ""; // Used for full HTML mode
+    let accumulatedDiffResponse = ""; // Used for diff mode
     let lastRenderTime = 0; // For throttling full HTML updates
-    let currentDiffBuffer = ""; // Local variable for buffer within this call
 
     try {
       const request = await fetch("/api/ask-ai", {
@@ -214,18 +77,41 @@ function AskAI({
           const { done, value } = await reader.read();
           if (done) {
             console.log("[AI Response] Stream finished.");
-            // Process any remaining buffer content in diff mode
-            if (responseType === 'diff' && currentDiffBuffer.trim()) {
-                 console.warn("[AI Response] Processing remaining diff buffer after stream end:", currentDiffBuffer);
-                 const finalRemaining = processDiffBuffer(currentDiffBuffer, editorRef.current);
-                 if (finalRemaining.trim()) {
-                     console.error("[AI Response] Stream ended with incomplete diff block:", finalRemaining);
-                     toast.error("AI response ended with an incomplete change block.");
-                 }
-            }
-             // Final update for full HTML mode
-             if (responseType === 'full') {
-                 const finalDoc = fullContentResponse.match(/<!DOCTYPE html>[\s\S]*<\/html>/)?.[0];
+
+            // --- Post-stream processing ---
+            if (responseType === 'diff') {
+              // Apply diffs server-side
+              try {
+                console.log("[Diff Apply] Sending original HTML and AI diff response to server...");
+                const applyRequest = await fetch("/api/apply-diffs", {
+                  method: "POST",
+                  headers: { "Content-Type": "application/json" },
+                  body: JSON.stringify({
+                    originalHtml: originalHtml, // Send the HTML from the start of the request
+                    aiResponseContent: accumulatedDiffResponse,
+                  }),
+                });
+
+                if (!applyRequest.ok) {
+                  const errorData = await applyRequest.json();
+                  throw new Error(errorData.message || `Server failed to apply diffs (status ${applyRequest.status})`);
+                }
+
+                const patchedHtml = await applyRequest.text();
+                console.log("[Diff Apply] Received patched HTML from server.");
+                setHtml(patchedHtml); // Update editor with the final result
+                toast.success("AI changes applied");
+
+              } catch (applyError: any) {
+                console.error("Error applying diffs server-side:", applyError);
+                toast.error(`Failed to apply AI changes: ${applyError.message}`);
+                // Optionally revert to originalHtml? Or leave the editor as is?
+                // setHtml(originalHtml); // Uncomment to revert on failure
+              }
+
+            } else {
+              // Final update for full HTML mode
+              const finalDoc = fullContentResponse.match(/<!DOCTYPE html>[\s\S]*<\/html>/)?.[0];
                  if (finalDoc) {
                      setHtml(finalDoc); // Ensure final complete HTML is set
                  } else if (fullContentResponse.trim()) {