From 6ffcdd8b3c54e2560b327ca1b4f4eb33ba54c0db Mon Sep 17 00:00:00 2001
From: Ed McConnell <ed.mcconnell@sqyer.com>
Date: Fri, 13 Dec 2024 21:22:12 -0500
Subject: [PATCH] merge main into image

---
 app/commit.json                               |  2 +-
 app/components/workbench/Preview.tsx          | 20 +++++----
 .../workbench/ScreenshotSelector.tsx          | 42 +++++++++++++++----
 3 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/app/commit.json b/app/commit.json
index 0c0fdae..50d6492 100644
--- a/app/commit.json
+++ b/app/commit.json
@@ -1 +1 @@
-{ "commit": "4cfabd94ee8ab91a1466cf644dbf9c74ab1324d7" }
+{ "commit": "a936c5a99036e0ea65c976e19b3bdb39f8d7cd40" }
diff --git a/app/components/workbench/Preview.tsx b/app/components/workbench/Preview.tsx
index 0d0c41a..b2d97e3 100644
--- a/app/components/workbench/Preview.tsx
+++ b/app/components/workbench/Preview.tsx
@@ -289,14 +289,20 @@ export const Preview = memo(() => {
         >
           {activePreview ? (
             <>
-            <iframe ref={iframeRef} title="preview" className="border-none w-full h-full bg-white" src={iframeUrl} allowFullScreen />
+              <iframe
+                ref={iframeRef}
+                title="preview"
+                className="border-none w-full h-full bg-white"
+                src={iframeUrl}
+                allowFullScreen
+              />
               <ScreenshotSelector
-              isSelectionMode={isSelectionMode}
-              setIsSelectionMode={setIsSelectionMode}
-              containerRef={iframeRef}
-            />
-          </>
-        ) : (
+                isSelectionMode={isSelectionMode}
+                setIsSelectionMode={setIsSelectionMode}
+                containerRef={iframeRef}
+              />
+            </>
+          ) : (
             <div className="flex w-full h-full justify-center items-center bg-white">No preview available</div>
           )}
 
diff --git a/app/components/workbench/ScreenshotSelector.tsx b/app/components/workbench/ScreenshotSelector.tsx
index a165b8d..2386846 100644
--- a/app/components/workbench/ScreenshotSelector.tsx
+++ b/app/components/workbench/ScreenshotSelector.tsx
@@ -24,6 +24,7 @@ export const ScreenshotSelector = memo(
           videoRef.current.remove();
           videoRef.current = null;
         }
+
         if (mediaStreamRef.current) {
           mediaStreamRef.current.getTracks().forEach((track) => track.stop());
           mediaStreamRef.current = null;
@@ -52,10 +53,12 @@ export const ScreenshotSelector = memo(
               videoRef.current.remove();
               videoRef.current = null;
             }
+
             if (mediaStreamRef.current) {
               mediaStreamRef.current.getTracks().forEach((track) => track.stop());
               mediaStreamRef.current = null;
             }
+
             setIsSelectionMode(false);
             setSelectionStart(null);
             setSelectionEnd(null);
@@ -84,16 +87,23 @@ export const ScreenshotSelector = memo(
           toast.error('Failed to initialize screen capture');
         }
       }
+
       return mediaStreamRef.current;
     };
 
     const handleCopySelection = useCallback(async () => {
-      if (!isSelectionMode || !selectionStart || !selectionEnd || !containerRef.current) return;
+      if (!isSelectionMode || !selectionStart || !selectionEnd || !containerRef.current) {
+        return;
+      }
 
       setIsCapturing(true);
+
       try {
         const stream = await initializeStream();
-        if (!stream || !videoRef.current) return;
+
+        if (!stream || !videoRef.current) {
+          return;
+        }
 
         // Wait for video to be ready
         await new Promise((resolve) => setTimeout(resolve, 300));
@@ -102,6 +112,7 @@ export const ScreenshotSelector = memo(
         const tempCanvas = document.createElement('canvas');
         tempCanvas.width = videoRef.current.videoWidth;
         tempCanvas.height = videoRef.current.videoHeight;
+
         const tempCtx = tempCanvas.getContext('2d');
 
         if (!tempCtx) {
@@ -140,6 +151,7 @@ export const ScreenshotSelector = memo(
         const canvas = document.createElement('canvas');
         canvas.width = Math.round(Math.abs(selectionEnd.x - selectionStart.x));
         canvas.height = Math.round(Math.abs(selectionEnd.y - selectionStart.y));
+
         const ctx = canvas.getContext('2d');
 
         if (!ctx) {
@@ -152,18 +164,23 @@ export const ScreenshotSelector = memo(
         // Convert to blob
         const blob = await new Promise<Blob>((resolve, reject) => {
           canvas.toBlob((blob) => {
-            if (blob) resolve(blob);
-            else reject(new Error('Failed to create blob'));
+            if (blob) {
+              resolve(blob);
+            } else {
+              reject(new Error('Failed to create blob'));
+            }
           }, 'image/png');
         });
 
         // Create a FileReader to convert blob to base64
         const reader = new FileReader();
+
         reader.onload = (e) => {
           const base64Image = e.target?.result as string;
 
           // Find the textarea element
           const textarea = document.querySelector('textarea');
+
           if (textarea) {
             // Get the setters from the BaseChat component
             const setUploadedFiles = (window as any).__BOLT_SET_UPLOADED_FILES__;
@@ -186,6 +203,7 @@ export const ScreenshotSelector = memo(
       } catch (error) {
         console.error('Failed to capture screenshot:', error);
         toast.error('Failed to capture screenshot');
+
         if (mediaStreamRef.current) {
           mediaStreamRef.current.getTracks().forEach((track) => track.stop());
           mediaStreamRef.current = null;
@@ -202,7 +220,11 @@ export const ScreenshotSelector = memo(
       (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        if (!isSelectionMode) return;
+
+        if (!isSelectionMode) {
+          return;
+        }
+
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
@@ -216,7 +238,11 @@ export const ScreenshotSelector = memo(
       (e: React.MouseEvent) => {
         e.preventDefault();
         e.stopPropagation();
-        if (!isSelectionMode || !selectionStart) return;
+
+        if (!isSelectionMode || !selectionStart) {
+          return;
+        }
+
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
@@ -225,7 +251,9 @@ export const ScreenshotSelector = memo(
       [isSelectionMode, selectionStart],
     );
 
-    if (!isSelectionMode) return null;
+    if (!isSelectionMode) {
+      return null;
+    }
 
     return (
       <div