✨ update ui to show what changed

server.js

@@ -498,6 +498,8 @@ ${REPLACE_END}
 
     if (chunk) {
       let newHtml = html;
+      // array of arrays to hold updated lines (start and end line numbers)
+      const updatedLines = [];
 
       // Find all search/replace blocks in the chunk
       let position = 0;
@@ -536,9 +538,30 @@ ${REPLACE_END}
         if (searchBlock.trim() === "") {
           // Inserting at the beginning
           newHtml = `${replaceBlock}\n${newHtml}`;
+
+          // Track first line as updated
+          updatedLines.push([1, replaceBlock.split("\n").length]);
         } else {
-          // Replacing existing code
-          newHtml = newHtml.replace(searchBlock, replaceBlock);
+          // Find the position of the search block in the HTML
+          const blockPosition = newHtml.indexOf(searchBlock);
+          if (blockPosition !== -1) {
+            // Count lines before the search block
+            const beforeText = newHtml.substring(0, blockPosition);
+            const startLineNumber = beforeText.split("\n").length;
+
+            // Count lines in search and replace blocks
+            const searchLines = searchBlock.split("\n").length;
+            const replaceLines = replaceBlock.split("\n").length;
+
+            // Calculate end line (start + length of replaced content)
+            const endLineNumber = startLineNumber + replaceLines - 1;
+
+            // Track the line numbers that were updated
+            updatedLines.push([startLineNumber, endLineNumber]);
+
+            // Perform the replacement
+            newHtml = newHtml.replace(searchBlock, replaceBlock);
+          }
         }
 
         // Move position to after this block to find the next one
@@ -548,6 +571,7 @@ ${REPLACE_END}
       return res.status(200).send({
         ok: true,
         html: newHtml,
+        updatedLines,
       });
     } else {
       return res.status(400).send({

src/assets/index.css

@@ -136,3 +136,7 @@
 .monaco-editor .line-numbers {
   @apply !text-neutral-500;
 }
+
+.matched-line {
+  @apply bg-sky-500/30;
+}

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

@@ -31,7 +31,7 @@ function AskAI({
   isAiWorking: boolean;
   onNewPrompt: (prompt: string) => void;
   setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
-  onSuccess: (h: string, p: string) => void;
+  onSuccess: (h: string, p: string, n?: number[][]) => void;
 }) {
   const refThink = useRef<HTMLDivElement | null>(null);
 
@@ -100,7 +100,7 @@ function AskAI({
           setPreviousPrompt(prompt);
           setPrompt("");
           setisAiWorking(false);
-          onSuccess(res.html, prompt);
+          onSuccess(res.html, prompt, res.updatedLines);
           audio.play();
         }
       } else {

src/components/settings/settings.tsx

@@ -105,7 +105,7 @@ function Settings({
                         label: string;
                         isNew?: boolean;
                       }) => (
-                        <SelectItem value={value} className="">
+                        <SelectItem key={value} value={value} className="">
                           {label}
                           {isNew && (
                             <span className="text-xs bg-gradient-to-br from-sky-400 to-sky-600 text-white rounded-full px-1.5 py-0.5">

src/views/App.tsx

@@ -34,6 +34,8 @@ export default function App() {
   const resizer = useRef<HTMLDivElement>(null);
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const monacoRef = useRef<any>(null);
 
   const [html, setHtml] = useState((htmlStorage as string) ?? defaultHTML);
   const [isAiWorking, setisAiWorking] = useState(false);
@@ -222,14 +224,21 @@ export default function App() {
                   const newValue = value ?? "";
                   setHtml(newValue);
                 }}
-                onMount={(editor) => (editorRef.current = editor)}
+                onMount={(editor, monaco) => {
+                  editorRef.current = editor;
+                  monacoRef.current = monaco;
+                }}
               />
               <AskAI
                 html={html}
                 setHtml={(newHtml: string) => {
                   setHtml(newHtml);
                 }}
-                onSuccess={(finalHtml: string, p: string) => {
+                onSuccess={(
+                  finalHtml: string,
+                  p: string,
+                  updatedLines?: number[][]
+                ) => {
                   const currentHistory = [...htmlHistory];
                   currentHistory.unshift({
                     html: finalHtml,
@@ -241,6 +250,24 @@ export default function App() {
                   if (window.innerWidth <= 1024) {
                     setCurrentTab("preview");
                   }
+                  if (updatedLines && updatedLines?.length > 0) {
+                    const decorations = updatedLines.map((line) => ({
+                      range: new monacoRef.current.Range(
+                        line[0],
+                        1,
+                        line[1],
+                        1
+                      ),
+                      options: {
+                        inlineClassName: "matched-line",
+                      },
+                    }));
+                    setTimeout(() => {
+                      editorRef?.current
+                        ?.getModel()
+                        ?.deltaDecorations([], decorations);
+                    }, 100);
+                  }
                 }}
                 isAiWorking={isAiWorking}
                 setisAiWorking={setisAiWorking}