From 939539611f0cad12056f7be78ef6b2128b90b779 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 29 May 2024 11:03:40 -0400
Subject: [PATCH 01/10] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7a7531a..1762f91 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ We also just added experimental support for taking a video/screen recording of a
 
 ## Sponsors
 
-<a href="https://platform.sh/try-it-now/?utm_source=fastapi-signup&utm_medium=banner&utm_campaign=FastAPI-signup-June-2023" target="_blank" title="Build, run and scale your apps on a modern, reliable, and secure PaaS."><img src="https://fastapi.tiangolo.com/img/sponsors/platform-sh.png"></a>
+<a href="https://konghq.com/products/kong-konnect/register?utm_medium=referral&utm_source=github&utm_campaign=platform&utm_content=screenshot-to-code" target="_blank" title="Kong - powering the API world"><img src="https://picoapps.xyz/s2c-sponsors/Kong-GitHub-240x100.png"></a>
 
 
 ## 🚀 Try It Out without no install

From 97cdb093a5fb655b1cbd8db71848ffd8bbb507f2 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 29 May 2024 14:40:46 -0400
Subject: [PATCH 02/10] basic UI for selecting and editing

---
 frontend/src/components/Preview.tsx           | 77 ++++++++++++++++++-
 .../components/select-and-edit/EditPopup.tsx  | 52 +++++++++++++
 2 files changed, 126 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/select-and-edit/EditPopup.tsx

diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index eb9ea6d..5e0c759 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -1,6 +1,7 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import useThrottle from "../hooks/useThrottle";
+import EditPopup from "./select-and-edit/EditPopup";
 
 interface Props {
   code: string;
@@ -13,9 +14,70 @@ function Preview({ code, device }: Props) {
   // Don't update code more often than every 200ms.
   const throttledCode = useThrottle(code, 200);
 
+  const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(
+    null
+  );
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [popupPosition, setPopupPosition] = useState({ x: 0, y: 0 });
+  const [editText, setEditText] = useState("");
+
+  console.log(selectedElement);
+
+  function updateHighlight(targetElement: HTMLElement) {
+    setSelectedElement((prev) => {
+      // Remove style from previous element
+      if (prev) {
+        prev.style.outline = "";
+        prev.style.backgroundColor = "";
+      }
+      // Add style to new element
+      targetElement.style.outline = "2px dashed #1846db";
+      targetElement.style.backgroundColor = "#bfcbf5";
+      return targetElement;
+    });
+  }
+
+  function handleClick(event: MouseEvent) {
+    const { clientX, clientY } = event;
+
+    // Prevent default to avoid issues like label clicks triggering textareas, etc.
+    event.preventDefault();
+
+    const targetElement = event.target as HTMLElement;
+
+    // Return if no target element
+    if (!targetElement) {
+      return;
+    }
+
+    // Highlight the selected element
+    updateHighlight(targetElement);
+
+    // Show popup at click position
+    setPopupVisible(false);
+    setPopupPosition({ x: clientX, y: clientY });
+    setPopupVisible(true);
+  }
+
+  function handleEditSubmit() {
+    if (selectedElement) {
+      selectedElement.innerText = editText;
+    }
+    setPopupVisible(false);
+  }
+
   useEffect(() => {
-    if (iframeRef.current) {
-      iframeRef.current.srcdoc = throttledCode;
+    const iframe = iframeRef.current;
+    if (iframe) {
+      iframe.srcdoc = throttledCode;
+
+      // Related to
+      iframe.addEventListener("load", function () {
+        iframe.contentWindow?.document.body.addEventListener(
+          "click",
+          handleClick
+        );
+      });
     }
   }, [throttledCode]);
 
@@ -34,6 +96,15 @@ function Preview({ code, device }: Props) {
           }
         )}
       ></iframe>
+      <EditPopup
+        {...{
+          popupVisible,
+          popupPosition,
+          editText,
+          setEditText,
+          handleEditSubmit,
+        }}
+      />
     </div>
   );
 }
diff --git a/frontend/src/components/select-and-edit/EditPopup.tsx b/frontend/src/components/select-and-edit/EditPopup.tsx
new file mode 100644
index 0000000..c6560c6
--- /dev/null
+++ b/frontend/src/components/select-and-edit/EditPopup.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect, useRef } from "react";
+import { Textarea } from "../ui/textarea";
+import { Button } from "../ui/button";
+
+interface EditPopupProps {
+  popupVisible: boolean;
+  popupPosition: { x: number; y: number };
+  editText: string;
+  setEditText: (text: string) => void;
+  handleEditSubmit: () => void;
+}
+
+const EditPopup: React.FC<EditPopupProps> = ({
+  popupVisible,
+  popupPosition,
+  editText,
+  setEditText,
+  handleEditSubmit,
+}) => {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  useEffect(() => {
+    if (popupVisible && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [popupVisible]);
+
+  //   useEffect(() => {
+  //     if (!popupVisible) {
+  //       setEditText("");
+  //     }
+  //   }, [popupVisible, setEditText]);
+
+  return (
+    <div
+      className="absolute bg-white p-4 border border-gray-300 rounded shadow-lg"
+      style={{ top: popupPosition.y, left: popupPosition.x }}
+    >
+      <Textarea
+        ref={textareaRef}
+        value={editText}
+        onChange={(e) => setEditText(e.target.value)}
+        placeholder="Edit text"
+      />
+      <Button onClick={handleEditSubmit} className="mt-2">
+        Submit
+      </Button>
+    </div>
+  );
+};
+
+export default EditPopup;

From 608ba5cc6f4d2d87a98ea650b3c0776844df35b1 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 29 May 2024 14:48:01 -0400
Subject: [PATCH 03/10] improve x and y position

---
 frontend/src/components/Preview.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index 5e0c759..eabad4e 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -53,9 +53,20 @@ function Preview({ code, device }: Props) {
     // Highlight the selected element
     updateHighlight(targetElement);
 
-    // Show popup at click position
+    // Show popup at click position, slightly offset to be right under the cursor
     setPopupVisible(false);
-    setPopupPosition({ x: clientX, y: clientY });
+
+    // Calculate offsets
+    const rect = iframeRef.current?.getBoundingClientRect();
+    const offsetX = rect ? rect.left : 0;
+    const offsetY = rect ? rect.top : 0;
+
+    // Adjust for scale
+    const scale = 1; // the scale factor applied to the iframe
+    const scaledX = clientX / scale + offsetX;
+    const scaledY = clientY / scale + offsetY;
+
+    setPopupPosition({ x: scaledX, y: scaledY });
     setPopupVisible(true);
   }
 

From 82132d57aa1ac761d5ea42cdf25575a373e75d73 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 29 May 2024 14:54:50 -0400
Subject: [PATCH 04/10] improve look of popup

---
 .../components/select-and-edit/EditPopup.tsx  | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/select-and-edit/EditPopup.tsx b/frontend/src/components/select-and-edit/EditPopup.tsx
index c6560c6..6026e68 100644
--- a/frontend/src/components/select-and-edit/EditPopup.tsx
+++ b/frontend/src/components/select-and-edit/EditPopup.tsx
@@ -25,26 +25,28 @@ const EditPopup: React.FC<EditPopupProps> = ({
     }
   }, [popupVisible]);
 
-  //   useEffect(() => {
-  //     if (!popupVisible) {
-  //       setEditText("");
-  //     }
-  //   }, [popupVisible, setEditText]);
+  useEffect(() => {
+    if (!popupVisible) {
+      setEditText("");
+    }
+  }, [popupVisible, setEditText]);
+
+  if (!popupVisible) return;
 
   return (
     <div
-      className="absolute bg-white p-4 border border-gray-300 rounded shadow-lg"
+      className="absolute bg-white p-4 border border-gray-300 rounded shadow-lg w-60"
       style={{ top: popupPosition.y, left: popupPosition.x }}
     >
       <Textarea
         ref={textareaRef}
         value={editText}
         onChange={(e) => setEditText(e.target.value)}
-        placeholder="Edit text"
+        placeholder="Tell the AI what to change about this element..."
       />
-      <Button onClick={handleEditSubmit} className="mt-2">
-        Submit
-      </Button>
+      <div className="flex justify-end mt-2">
+        <Button onClick={handleEditSubmit}>Update</Button>
+      </div>
     </div>
   );
 };

From f18724104c2aa5dc3ade02b9723d6c3bcd6d6dd3 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 29 May 2024 15:32:19 -0400
Subject: [PATCH 05/10] add for debugging

---
 backend/routes/generate_code.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/routes/generate_code.py b/backend/routes/generate_code.py
index e7186fc..6780dbe 100644
--- a/backend/routes/generate_code.py
+++ b/backend/routes/generate_code.py
@@ -21,7 +21,7 @@ import json
 from prompts.claude_prompts import VIDEO_PROMPT
 from prompts.types import Stack
 
-# from utils import pprint_prompt
+from utils import pprint_prompt
 from video.utils import extract_tag_content, assemble_claude_prompt_video
 from ws.constants import APP_ERROR_WEB_SOCKET_CODE  # type: ignore
 
@@ -210,7 +210,7 @@ async def stream_code(websocket: WebSocket):
         video_data_url = params["image"]
         prompt_messages = await assemble_claude_prompt_video(video_data_url)
 
-    # pprint_prompt(prompt_messages)  # type: ignore
+    pprint_prompt(prompt_messages)  # type: ignore
 
     if SHOULD_MOCK_AI_RESPONSE:
         completion = await mock_completion(

From b0e7ae35afda29698bf215ac3925eebc5c9597a4 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 29 May 2024 16:36:20 -0400
Subject: [PATCH 06/10] clean up more of the code

---
 frontend/src/components/Preview.tsx           | 55 ++++++++++++++-----
 .../components/select-and-edit/EditPopup.tsx  | 11 ++--
 2 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index eabad4e..c643e69 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -6,29 +6,38 @@ import EditPopup from "./select-and-edit/EditPopup";
 interface Props {
   code: string;
   device: "mobile" | "desktop";
+  doUpdate: (
+    selectedUpdateInstruction?: string,
+    selectedElement?: HTMLElement
+  ) => void;
+  inSelectAndEditMode: boolean;
 }
 
-function Preview({ code, device }: Props) {
+function Preview({ code, device, doUpdate, inSelectAndEditMode }: Props) {
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
   // Don't update code more often than every 200ms.
   const throttledCode = useThrottle(code, 200);
 
-  const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(
-    null
-  );
+  const inSelectAndEditModeRef = useRef(inSelectAndEditMode); // Create a ref for the state
+
+  const [selectedElement, setSelectedElement] = useState<
+    HTMLElement | undefined
+  >(undefined);
   const [popupVisible, setPopupVisible] = useState(false);
   const [popupPosition, setPopupPosition] = useState({ x: 0, y: 0 });
-  const [editText, setEditText] = useState("");
 
-  console.log(selectedElement);
+  function removeHighlight(element: HTMLElement) {
+    element.style.outline = "";
+    element.style.backgroundColor = "";
+    return element;
+  }
 
   function updateHighlight(targetElement: HTMLElement) {
     setSelectedElement((prev) => {
       // Remove style from previous element
       if (prev) {
-        prev.style.outline = "";
-        prev.style.backgroundColor = "";
+        removeHighlight(prev);
       }
       // Add style to new element
       targetElement.style.outline = "2px dashed #1846db";
@@ -38,6 +47,11 @@ function Preview({ code, device }: Props) {
   }
 
   function handleClick(event: MouseEvent) {
+    // Return if not in select and edit mode
+    if (!inSelectAndEditModeRef.current) {
+      return;
+    }
+
     const { clientX, clientY } = event;
 
     // Prevent default to avoid issues like label clicks triggering textareas, etc.
@@ -70,13 +84,28 @@ function Preview({ code, device }: Props) {
     setPopupVisible(true);
   }
 
-  function handleEditSubmit() {
-    if (selectedElement) {
-      selectedElement.innerText = editText;
-    }
+  function handleEditSubmit(editText: string) {
+    doUpdate(
+      editText,
+      selectedElement ? removeHighlight(selectedElement) : selectedElement
+    );
+    setSelectedElement(undefined);
     setPopupVisible(false);
   }
 
+  useEffect(() => {
+    if (!inSelectAndEditMode) {
+      if (selectedElement) removeHighlight(selectedElement);
+      setSelectedElement(undefined);
+      setPopupVisible(false);
+    }
+  }, [inSelectAndEditMode, selectedElement]);
+
+  // Update the ref whenever the state changes
+  useEffect(() => {
+    inSelectAndEditModeRef.current = inSelectAndEditMode;
+  }, [inSelectAndEditMode]);
+
   useEffect(() => {
     const iframe = iframeRef.current;
     if (iframe) {
@@ -111,8 +140,6 @@ function Preview({ code, device }: Props) {
         {...{
           popupVisible,
           popupPosition,
-          editText,
-          setEditText,
           handleEditSubmit,
         }}
       />
diff --git a/frontend/src/components/select-and-edit/EditPopup.tsx b/frontend/src/components/select-and-edit/EditPopup.tsx
index 6026e68..a833f00 100644
--- a/frontend/src/components/select-and-edit/EditPopup.tsx
+++ b/frontend/src/components/select-and-edit/EditPopup.tsx
@@ -1,22 +1,19 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Textarea } from "../ui/textarea";
 import { Button } from "../ui/button";
 
 interface EditPopupProps {
   popupVisible: boolean;
   popupPosition: { x: number; y: number };
-  editText: string;
-  setEditText: (text: string) => void;
-  handleEditSubmit: () => void;
+  handleEditSubmit: (editText: string) => void;
 }
 
 const EditPopup: React.FC<EditPopupProps> = ({
   popupVisible,
   popupPosition,
-  editText,
-  setEditText,
   handleEditSubmit,
 }) => {
+  const [editText, setEditText] = useState("");
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   useEffect(() => {
@@ -45,7 +42,7 @@ const EditPopup: React.FC<EditPopupProps> = ({
         placeholder="Tell the AI what to change about this element..."
       />
       <div className="flex justify-end mt-2">
-        <Button onClick={handleEditSubmit}>Update</Button>
+        <Button onClick={() => handleEditSubmit(editText)}>Update</Button>
       </div>
     </div>
   );

From 270931294364df49008e2bb5aaafc0e433cf322c Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 29 May 2024 16:53:36 -0400
Subject: [PATCH 07/10] move more of the code into EditPopup

---
 frontend/src/components/Preview.tsx           | 101 ++---------------
 .../components/select-and-edit/EditPopup.tsx  | 103 +++++++++++++++++-
 2 files changed, 105 insertions(+), 99 deletions(-)

diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index c643e69..2a25ac1 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -19,103 +19,19 @@ function Preview({ code, device, doUpdate, inSelectAndEditMode }: Props) {
   // Don't update code more often than every 200ms.
   const throttledCode = useThrottle(code, 200);
 
-  const inSelectAndEditModeRef = useRef(inSelectAndEditMode); // Create a ref for the state
-
-  const [selectedElement, setSelectedElement] = useState<
-    HTMLElement | undefined
-  >(undefined);
-  const [popupVisible, setPopupVisible] = useState(false);
-  const [popupPosition, setPopupPosition] = useState({ x: 0, y: 0 });
-
-  function removeHighlight(element: HTMLElement) {
-    element.style.outline = "";
-    element.style.backgroundColor = "";
-    return element;
-  }
-
-  function updateHighlight(targetElement: HTMLElement) {
-    setSelectedElement((prev) => {
-      // Remove style from previous element
-      if (prev) {
-        removeHighlight(prev);
-      }
-      // Add style to new element
-      targetElement.style.outline = "2px dashed #1846db";
-      targetElement.style.backgroundColor = "#bfcbf5";
-      return targetElement;
-    });
-  }
-
-  function handleClick(event: MouseEvent) {
-    // Return if not in select and edit mode
-    if (!inSelectAndEditModeRef.current) {
-      return;
-    }
-
-    const { clientX, clientY } = event;
-
-    // Prevent default to avoid issues like label clicks triggering textareas, etc.
-    event.preventDefault();
-
-    const targetElement = event.target as HTMLElement;
-
-    // Return if no target element
-    if (!targetElement) {
-      return;
-    }
-
-    // Highlight the selected element
-    updateHighlight(targetElement);
-
-    // Show popup at click position, slightly offset to be right under the cursor
-    setPopupVisible(false);
-
-    // Calculate offsets
-    const rect = iframeRef.current?.getBoundingClientRect();
-    const offsetX = rect ? rect.left : 0;
-    const offsetY = rect ? rect.top : 0;
-
-    // Adjust for scale
-    const scale = 1; // the scale factor applied to the iframe
-    const scaledX = clientX / scale + offsetX;
-    const scaledY = clientY / scale + offsetY;
-
-    setPopupPosition({ x: scaledX, y: scaledY });
-    setPopupVisible(true);
-  }
-
-  function handleEditSubmit(editText: string) {
-    doUpdate(
-      editText,
-      selectedElement ? removeHighlight(selectedElement) : selectedElement
-    );
-    setSelectedElement(undefined);
-    setPopupVisible(false);
-  }
-
-  useEffect(() => {
-    if (!inSelectAndEditMode) {
-      if (selectedElement) removeHighlight(selectedElement);
-      setSelectedElement(undefined);
-      setPopupVisible(false);
-    }
-  }, [inSelectAndEditMode, selectedElement]);
-
-  // Update the ref whenever the state changes
-  useEffect(() => {
-    inSelectAndEditModeRef.current = inSelectAndEditMode;
-  }, [inSelectAndEditMode]);
+  // Select and edit functionality
+  const [clickEvent, setClickEvent] = useState<MouseEvent | null>(null);
 
   useEffect(() => {
     const iframe = iframeRef.current;
     if (iframe) {
       iframe.srcdoc = throttledCode;
 
-      // Related to
+      // Set up click handler for select and edit funtionality
       iframe.addEventListener("load", function () {
         iframe.contentWindow?.document.body.addEventListener(
           "click",
-          handleClick
+          setClickEvent
         );
       });
     }
@@ -137,11 +53,10 @@ function Preview({ code, device, doUpdate, inSelectAndEditMode }: Props) {
         )}
       ></iframe>
       <EditPopup
-        {...{
-          popupVisible,
-          popupPosition,
-          handleEditSubmit,
-        }}
+        event={clickEvent}
+        iframeRef={iframeRef}
+        inSelectAndEditMode={inSelectAndEditMode}
+        doUpdate={doUpdate}
       />
     </div>
   );
diff --git a/frontend/src/components/select-and-edit/EditPopup.tsx b/frontend/src/components/select-and-edit/EditPopup.tsx
index a833f00..de05ae7 100644
--- a/frontend/src/components/select-and-edit/EditPopup.tsx
+++ b/frontend/src/components/select-and-edit/EditPopup.tsx
@@ -2,20 +2,60 @@ import React, { useEffect, useRef, useState } from "react";
 import { Textarea } from "../ui/textarea";
 import { Button } from "../ui/button";
 
+function removeHighlight(element: HTMLElement) {
+  element.style.outline = "";
+  element.style.backgroundColor = "";
+  return element;
+}
+
 interface EditPopupProps {
-  popupVisible: boolean;
-  popupPosition: { x: number; y: number };
-  handleEditSubmit: (editText: string) => void;
+  event: MouseEvent | null;
+  inSelectAndEditMode: boolean;
+  doUpdate: (
+    selectedUpdateInstruction?: string,
+    selectedElement?: HTMLElement
+  ) => void;
+  iframeRef: React.RefObject<HTMLIFrameElement>;
 }
 
 const EditPopup: React.FC<EditPopupProps> = ({
-  popupVisible,
-  popupPosition,
-  handleEditSubmit,
+  event,
+  inSelectAndEditMode,
+  doUpdate,
+  iframeRef,
 }) => {
   const [editText, setEditText] = useState("");
+  const [selectedElement, setSelectedElement] = useState<
+    HTMLElement | undefined
+  >(undefined);
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [popupPosition, setPopupPosition] = useState({ x: 0, y: 0 });
+
+  const inSelectAndEditModeRef = useRef(inSelectAndEditMode); // Create a ref for the state
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
+  function updateHighlight(targetElement: HTMLElement) {
+    setSelectedElement((prev) => {
+      // Remove style from previous element
+      if (prev) {
+        removeHighlight(prev);
+      }
+      // Add style to new element
+      targetElement.style.outline = "2px dashed #1846db";
+      targetElement.style.backgroundColor = "#bfcbf5";
+      return targetElement;
+    });
+  }
+
+  function handleEditSubmit(editText: string) {
+    doUpdate(
+      editText,
+      selectedElement ? removeHighlight(selectedElement) : selectedElement
+    );
+    setSelectedElement(undefined);
+    setPopupVisible(false);
+  }
+
   useEffect(() => {
     if (popupVisible && textareaRef.current) {
       textareaRef.current.focus();
@@ -28,6 +68,57 @@ const EditPopup: React.FC<EditPopupProps> = ({
     }
   }, [popupVisible, setEditText]);
 
+  useEffect(() => {
+    if (!inSelectAndEditMode) {
+      if (selectedElement) removeHighlight(selectedElement);
+      setSelectedElement(undefined);
+      setPopupVisible(false);
+    }
+  }, [inSelectAndEditMode, selectedElement]);
+
+  useEffect(() => {
+    // Return if not in select and edit mode
+    if (!inSelectAndEditModeRef.current || !event) {
+      return;
+    }
+
+    const { clientX, clientY } = event;
+
+    // Prevent default to avoid issues like label clicks triggering textareas, etc.
+    event.preventDefault();
+
+    const targetElement = event.target as HTMLElement;
+
+    // Return if no target element
+    if (!targetElement) {
+      return;
+    }
+
+    // Highlight the selected element
+    updateHighlight(targetElement);
+
+    // Show popup at click position, slightly offset to be right under the cursor
+    setPopupVisible(false);
+
+    // Calculate offsets
+    const rect = iframeRef.current?.getBoundingClientRect();
+    const offsetX = rect ? rect.left : 0;
+    const offsetY = rect ? rect.top : 0;
+
+    // Adjust for scale
+    const scale = 1; // the scale factor applied to the iframe
+    const scaledX = clientX / scale + offsetX;
+    const scaledY = clientY / scale + offsetY;
+
+    setPopupPosition({ x: scaledX, y: scaledY });
+    setPopupVisible(true);
+  }, [event]);
+
+  // Update the ref whenever the state changes
+  useEffect(() => {
+    inSelectAndEditModeRef.current = inSelectAndEditMode;
+  }, [inSelectAndEditMode]);
+
   if (!popupVisible) return;
 
   return (

From 43ae003c83fe6b87ae6fe1ce51a8938f12911466 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 29 May 2024 17:28:09 -0400
Subject: [PATCH 08/10] clean up code even further

---
 .../components/select-and-edit/EditPopup.tsx  | 109 ++++++++----------
 .../src/components/select-and-edit/utils.ts   |  24 ++++
 2 files changed, 72 insertions(+), 61 deletions(-)
 create mode 100644 frontend/src/components/select-and-edit/utils.ts

diff --git a/frontend/src/components/select-and-edit/EditPopup.tsx b/frontend/src/components/select-and-edit/EditPopup.tsx
index de05ae7..b9738ec 100644
--- a/frontend/src/components/select-and-edit/EditPopup.tsx
+++ b/frontend/src/components/select-and-edit/EditPopup.tsx
@@ -1,12 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Textarea } from "../ui/textarea";
 import { Button } from "../ui/button";
-
-function removeHighlight(element: HTMLElement) {
-  element.style.outline = "";
-  element.style.backgroundColor = "";
-  return element;
-}
+import { addHighlight, getAdjustedCoordinates, removeHighlight } from "./utils";
 
 interface EditPopupProps {
   event: MouseEvent | null;
@@ -24,50 +19,43 @@ const EditPopup: React.FC<EditPopupProps> = ({
   doUpdate,
   iframeRef,
 }) => {
-  const [editText, setEditText] = useState("");
+  // Edit state
   const [selectedElement, setSelectedElement] = useState<
     HTMLElement | undefined
   >(undefined);
+  const [updateText, setUpdateText] = useState("");
+
+  // Popup state
   const [popupVisible, setPopupVisible] = useState(false);
   const [popupPosition, setPopupPosition] = useState({ x: 0, y: 0 });
 
-  const inSelectAndEditModeRef = useRef(inSelectAndEditMode); // Create a ref for the state
+  // Create a wrapper ref to store inSelectAndEditMode so the value is not stale
+  // in a event listener
+  const inSelectAndEditModeRef = useRef(inSelectAndEditMode);
+
+  // Textarea ref for focusing
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
-  function updateHighlight(targetElement: HTMLElement) {
-    setSelectedElement((prev) => {
-      // Remove style from previous element
-      if (prev) {
-        removeHighlight(prev);
-      }
-      // Add style to new element
-      targetElement.style.outline = "2px dashed #1846db";
-      targetElement.style.backgroundColor = "#bfcbf5";
-      return targetElement;
-    });
-  }
-
-  function handleEditSubmit(editText: string) {
+  function onUpdate(updateText: string) {
+    // Perform the update
     doUpdate(
-      editText,
+      updateText,
       selectedElement ? removeHighlight(selectedElement) : selectedElement
     );
+
+    // Unselect the element
     setSelectedElement(undefined);
+
+    // Hide the popup
     setPopupVisible(false);
   }
 
+  // Update the ref whenever the state changes
   useEffect(() => {
-    if (popupVisible && textareaRef.current) {
-      textareaRef.current.focus();
-    }
-  }, [popupVisible]);
-
-  useEffect(() => {
-    if (!popupVisible) {
-      setEditText("");
-    }
-  }, [popupVisible, setEditText]);
+    inSelectAndEditModeRef.current = inSelectAndEditMode;
+  }, [inSelectAndEditMode]);
 
+  // Remove highlight and reset state when not in select and edit mode
   useEffect(() => {
     if (!inSelectAndEditMode) {
       if (selectedElement) removeHighlight(selectedElement);
@@ -76,48 +64,47 @@ const EditPopup: React.FC<EditPopupProps> = ({
     }
   }, [inSelectAndEditMode, selectedElement]);
 
+  // Handle the click event
   useEffect(() => {
     // Return if not in select and edit mode
     if (!inSelectAndEditModeRef.current || !event) {
       return;
     }
 
-    const { clientX, clientY } = event;
-
     // Prevent default to avoid issues like label clicks triggering textareas, etc.
     event.preventDefault();
 
     const targetElement = event.target as HTMLElement;
 
     // Return if no target element
-    if (!targetElement) {
-      return;
-    }
+    if (!targetElement) return;
 
-    // Highlight the selected element
-    updateHighlight(targetElement);
+    // Highlight and set the selected element
+    setSelectedElement((prev) => {
+      // Remove style from previous element
+      if (prev) {
+        removeHighlight(prev);
+      }
+      return addHighlight(targetElement);
+    });
 
-    // Show popup at click position, slightly offset to be right under the cursor
-    setPopupVisible(false);
+    // Calculate adjusted coordinates
+    const adjustedCoordinates = getAdjustedCoordinates(
+      event.clientX,
+      event.clientY,
+      iframeRef.current?.getBoundingClientRect()
+    );
 
-    // Calculate offsets
-    const rect = iframeRef.current?.getBoundingClientRect();
-    const offsetX = rect ? rect.left : 0;
-    const offsetY = rect ? rect.top : 0;
-
-    // Adjust for scale
-    const scale = 1; // the scale factor applied to the iframe
-    const scaledX = clientX / scale + offsetX;
-    const scaledY = clientY / scale + offsetY;
-
-    setPopupPosition({ x: scaledX, y: scaledY });
+    // Show the popup at the click position
     setPopupVisible(true);
-  }, [event]);
+    setPopupPosition({ x: adjustedCoordinates.x, y: adjustedCoordinates.y });
 
-  // Update the ref whenever the state changes
-  useEffect(() => {
-    inSelectAndEditModeRef.current = inSelectAndEditMode;
-  }, [inSelectAndEditMode]);
+    // Reset the update text
+    setUpdateText("");
+
+    // Focus the textarea
+    textareaRef.current?.focus();
+  }, [event, iframeRef]);
 
   if (!popupVisible) return;
 
@@ -128,12 +115,12 @@ const EditPopup: React.FC<EditPopupProps> = ({
     >
       <Textarea
         ref={textareaRef}
-        value={editText}
-        onChange={(e) => setEditText(e.target.value)}
+        value={updateText}
+        onChange={(e) => setUpdateText(e.target.value)}
         placeholder="Tell the AI what to change about this element..."
       />
       <div className="flex justify-end mt-2">
-        <Button onClick={() => handleEditSubmit(editText)}>Update</Button>
+        <Button onClick={() => onUpdate(updateText)}>Update</Button>
       </div>
     </div>
   );
diff --git a/frontend/src/components/select-and-edit/utils.ts b/frontend/src/components/select-and-edit/utils.ts
new file mode 100644
index 0000000..f3180fd
--- /dev/null
+++ b/frontend/src/components/select-and-edit/utils.ts
@@ -0,0 +1,24 @@
+export function removeHighlight(element: HTMLElement) {
+  element.style.outline = "";
+  element.style.backgroundColor = "";
+  return element;
+}
+
+export function addHighlight(element: HTMLElement) {
+  element.style.outline = "2px dashed #1846db";
+  element.style.backgroundColor = "#bfcbf5";
+  return element;
+}
+
+export function getAdjustedCoordinates(
+  x: number,
+  y: number,
+  rect: DOMRect | undefined
+) {
+  const offsetX = rect ? rect.left : 0;
+  const offsetY = rect ? rect.top : 0;
+
+  // Adjust for scale
+  const scale = 1; // the scale factor applied to the iframe
+  return { x: x / scale + offsetX, y: y / scale + offsetY };
+}

From 9d1fbc9b231197cd3c97f264d4f130062973433e Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Thu, 30 May 2024 09:38:15 -0400
Subject: [PATCH 09/10] add zustand and create a dummy app store that isn't
 used yet

---
 frontend/package.json           |  3 ++-
 frontend/src/App.tsx            |  5 ++++-
 frontend/src/store/app-store.ts | 10 ++++++++++
 frontend/yarn.lock              | 12 ++++++++++++
 4 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/store/app-store.ts

diff --git a/frontend/package.json b/frontend/package.json
index 92bebfc..4652dc7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -46,7 +46,8 @@
     "tailwindcss-animate": "^1.0.7",
     "thememirror": "^2.0.1",
     "vite-plugin-checker": "^0.6.2",
-    "webm-duration-fix": "^1.0.4"
+    "webm-duration-fix": "^1.0.4",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ce68c53..1cb02e1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -378,7 +378,10 @@ function App() {
         />
       )}
       <div className="lg:fixed lg:inset-y-0 lg:z-40 lg:flex lg:w-96 lg:flex-col">
-        <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6 dark:bg-zinc-950 dark:text-white">
+        <div
+          className="flex grow flex-col gap-y-2 overflow-y-auto border-r 
+          border-gray-200 bg-white px-6 dark:bg-zinc-950 dark:text-white"
+        >
           <div className="flex items-center justify-between mt-10 mb-2">
             <h1 className="text-2xl ">Screenshot to Code</h1>
             <SettingsDialog settings={settings} setSettings={setSettings} />
diff --git a/frontend/src/store/app-store.ts b/frontend/src/store/app-store.ts
new file mode 100644
index 0000000..7298c72
--- /dev/null
+++ b/frontend/src/store/app-store.ts
@@ -0,0 +1,10 @@
+import { create } from "zustand";
+
+// Store for app-wide state
+interface AppStore {
+  inputMode: "image" | "video";
+}
+
+export const useStore = create<AppStore>(() => ({
+  inputMode: "image",
+}));
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 7285b73..e1254e8 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -5642,6 +5642,11 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
@@ -5937,3 +5942,10 @@ zod@3.22.4:
   version "3.22.4"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
   integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==
+
+zustand@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.2.tgz#fddbe7cac1e71d45413b3682cdb47b48034c3848"
+  integrity sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==
+  dependencies:
+    use-sync-external-store "1.2.0"

From 9cfcf928d0a6c858f06ba845ed4639896f473b34 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Thu, 30 May 2024 09:51:44 -0400
Subject: [PATCH 10/10] isolate functionality

use zustand to share state rather than prop drilling

isolate more functionality away into a separate component
---
 frontend/src/App.tsx                          | 48 +++++++++++++++----
 frontend/src/components/Preview.tsx           | 11 ++---
 .../components/select-and-edit/EditPopup.tsx  |  5 +-
 .../SelectAndEditModeToggleButton.tsx         | 18 +++++++
 frontend/src/store/app-store.ts               |  7 ++-
 5 files changed, 68 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/components/select-and-edit/SelectAndEditModeToggleButton.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1cb02e1..77785db 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -40,6 +40,7 @@ import ModelSettingsSection from "./components/ModelSettingsSection";
 import { extractHtml } from "./components/preview/extractHtml";
 import useBrowserTabIndicator from "./hooks/useBrowserTabIndicator";
 import TipLink from "./components/core/TipLink";
+import SelectAndEditModeToggleButton from "./components/select-and-edit/SelectAndEditModeToggleButton";
 
 const IS_OPENAI_DOWN = false;
 
@@ -93,6 +94,10 @@ function App() {
     selectedCodeGenerationModel !== CodeGenerationModel.GPT_4O_2024_05_13 &&
     appState === AppState.INITIAL;
 
+  const showSelectAndEditFeature =
+    selectedCodeGenerationModel === CodeGenerationModel.GPT_4O_2024_05_13 &&
+    settings.generatedCodeConfig === Stack.HTML_TAILWIND;
+
   // Indicate coding state using the browser tab's favicon and title
   useBrowserTabIndicator(appState === AppState.CODING);
 
@@ -236,7 +241,9 @@ function App() {
                 parentIndex: parentVersion,
                 code,
                 inputs: {
-                  prompt: updateInstruction,
+                  prompt: params.history
+                    ? params.history[params.history.length - 1]
+                    : updateInstruction,
                 },
               },
             ];
@@ -278,7 +285,10 @@ function App() {
   }
 
   // Subsequent updates
-  async function doUpdate() {
+  async function doUpdate(
+    updateInstruction: string,
+    selectedElement?: HTMLElement
+  ) {
     if (currentVersion === null) {
       toast.error(
         "No current version set. Contact support or open a Github issue."
@@ -296,7 +306,17 @@ function App() {
       return;
     }
 
-    const updatedHistory = [...historyTree, updateInstruction];
+    let modifiedUpdateInstruction = updateInstruction;
+
+    // Send in a reference to the selected element if it exists
+    if (selectedElement) {
+      modifiedUpdateInstruction =
+        updateInstruction +
+        " referring to this element specifically: " +
+        selectedElement.outerHTML;
+    }
+
+    const updatedHistory = [...historyTree, modifiedUpdateInstruction];
 
     if (shouldIncludeResultImage) {
       const resultImage = await takeScreenshot();
@@ -378,10 +398,7 @@ function App() {
         />
       )}
       <div className="lg:fixed lg:inset-y-0 lg:z-40 lg:flex lg:w-96 lg:flex-col">
-        <div
-          className="flex grow flex-col gap-y-2 overflow-y-auto border-r 
-          border-gray-200 bg-white px-6 dark:bg-zinc-950 dark:text-white"
-        >
+        <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6 dark:bg-zinc-950 dark:text-white">
           <div className="flex items-center justify-between mt-10 mb-2">
             <h1 className="text-2xl ">Screenshot to Code</h1>
             <SettingsDialog settings={settings} setSettings={setSettings} />
@@ -484,7 +501,7 @@ function App() {
                       />
                     </div>
                     <Button
-                      onClick={doUpdate}
+                      onClick={() => doUpdate(updateInstruction)}
                       className="dark:text-white dark:bg-gray-700 update-btn"
                     >
                       Update
@@ -497,6 +514,9 @@ function App() {
                     >
                       🔄 Regenerate
                     </Button>
+                    {showSelectAndEditFeature && (
+                      <SelectAndEditModeToggleButton />
+                    )}
                   </div>
                   <div className="flex justify-end items-center mt-2">
                     <TipLink />
@@ -625,10 +645,18 @@ function App() {
                 </div>
               </div>
               <TabsContent value="desktop">
-                <Preview code={previewCode} device="desktop" />
+                <Preview
+                  code={previewCode}
+                  device="desktop"
+                  doUpdate={doUpdate}
+                />
               </TabsContent>
               <TabsContent value="mobile">
-                <Preview code={previewCode} device="mobile" />
+                <Preview
+                  code={previewCode}
+                  device="mobile"
+                  doUpdate={doUpdate}
+                />
               </TabsContent>
               <TabsContent value="code">
                 <CodeTab
diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index 2a25ac1..8dc2f22 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -2,18 +2,17 @@ import { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import useThrottle from "../hooks/useThrottle";
 import EditPopup from "./select-and-edit/EditPopup";
+import { useAppStore } from "../store/app-store";
 
 interface Props {
   code: string;
   device: "mobile" | "desktop";
-  doUpdate: (
-    selectedUpdateInstruction?: string,
-    selectedElement?: HTMLElement
-  ) => void;
-  inSelectAndEditMode: boolean;
+  doUpdate: (updateInstruction: string, selectedElement?: HTMLElement) => void;
 }
 
-function Preview({ code, device, doUpdate, inSelectAndEditMode }: Props) {
+function Preview({ code, device, doUpdate }: Props) {
+  const { inSelectAndEditMode } = useAppStore();
+
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
   // Don't update code more often than every 200ms.
diff --git a/frontend/src/components/select-and-edit/EditPopup.tsx b/frontend/src/components/select-and-edit/EditPopup.tsx
index b9738ec..5bc9d42 100644
--- a/frontend/src/components/select-and-edit/EditPopup.tsx
+++ b/frontend/src/components/select-and-edit/EditPopup.tsx
@@ -6,10 +6,7 @@ import { addHighlight, getAdjustedCoordinates, removeHighlight } from "./utils";
 interface EditPopupProps {
   event: MouseEvent | null;
   inSelectAndEditMode: boolean;
-  doUpdate: (
-    selectedUpdateInstruction?: string,
-    selectedElement?: HTMLElement
-  ) => void;
+  doUpdate: (updateInstruction: string, selectedElement?: HTMLElement) => void;
   iframeRef: React.RefObject<HTMLIFrameElement>;
 }
 
diff --git a/frontend/src/components/select-and-edit/SelectAndEditModeToggleButton.tsx b/frontend/src/components/select-and-edit/SelectAndEditModeToggleButton.tsx
new file mode 100644
index 0000000..f076c9b
--- /dev/null
+++ b/frontend/src/components/select-and-edit/SelectAndEditModeToggleButton.tsx
@@ -0,0 +1,18 @@
+import { useAppStore } from "../../store/app-store";
+import { Button } from "../ui/button";
+
+function SelectAndEditModeToggleButton() {
+  const { inSelectAndEditMode, toggleInSelectAndEditMode } = useAppStore();
+
+  return (
+    <Button
+      onClick={toggleInSelectAndEditMode}
+      className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700 regenerate-btn"
+      variant={inSelectAndEditMode ? "destructive" : "default"}
+    >
+      {inSelectAndEditMode ? "Exit selection mode" : "🖱️ Select and Edit"}
+    </Button>
+  );
+}
+
+export default SelectAndEditModeToggleButton;
diff --git a/frontend/src/store/app-store.ts b/frontend/src/store/app-store.ts
index 7298c72..26b7994 100644
--- a/frontend/src/store/app-store.ts
+++ b/frontend/src/store/app-store.ts
@@ -2,9 +2,14 @@ import { create } from "zustand";
 
 // Store for app-wide state
 interface AppStore {
+  inSelectAndEditMode: boolean;
   inputMode: "image" | "video";
+  toggleInSelectAndEditMode: () => void;
 }
 
-export const useStore = create<AppStore>(() => ({
+export const useAppStore = create<AppStore>((set) => ({
   inputMode: "image",
+  inSelectAndEditMode: false,
+  toggleInSelectAndEditMode: () =>
+    set((state) => ({ inSelectAndEditMode: !state.inSelectAndEditMode })),
 }));