From 8b7e18e62795248f11c2b3cb469f92ca4795a055 Mon Sep 17 00:00:00 2001
From: Ed McConnell <ed.mcconnell@sqyer.com>
Date: Thu, 5 Dec 2024 17:30:45 -0500
Subject: [PATCH 1/7] Initial commit for screen cap feature

---
 app/components/chat/BaseChat.tsx              |  11 +
 .../chat/ScreenshotStateManager.tsx           |  33 +++
 app/components/workbench/Preview.tsx          |  14 +-
 .../workbench/ScreenshotSelector.tsx          | 203 ++++++++++++++++++
 4 files changed, 257 insertions(+), 4 deletions(-)
 create mode 100644 app/components/chat/ScreenshotStateManager.tsx
 create mode 100644 app/components/workbench/ScreenshotSelector.tsx

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 8c7589a68..ed317e464 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -25,6 +25,7 @@ import { ExamplePrompts } from '~/components/chat/ExamplePrompts';
 import FilePreview from './FilePreview';
 import { ModelSelector } from '~/components/chat/ModelSelector';
 import { SpeechRecognitionButton } from '~/components/chat/SpeechRecognition';
+import { ScreenshotStateManager } from './ScreenshotStateManager';
 
 const TEXTAREA_MIN_HEIGHT = 76;
 
@@ -376,6 +377,16 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     setImageDataList?.(imageDataList.filter((_, i) => i !== index));
                   }}
                 />
+                <ClientOnly>
+                  {() => (
+                    <ScreenshotStateManager
+                      setUploadedFiles={setUploadedFiles}
+                      setImageDataList={setImageDataList}
+                      uploadedFiles={uploadedFiles}
+                      imageDataList={imageDataList}
+                    />
+                  )}
+                </ClientOnly>
                 <div
                   className={classNames(
                     'relative shadow-xs border border-bolt-elements-borderColor backdrop-blur rounded-lg',
diff --git a/app/components/chat/ScreenshotStateManager.tsx b/app/components/chat/ScreenshotStateManager.tsx
new file mode 100644
index 000000000..7dfdd7683
--- /dev/null
+++ b/app/components/chat/ScreenshotStateManager.tsx
@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+
+interface ScreenshotStateManagerProps {
+  setUploadedFiles?: (files: File[]) => void;
+  setImageDataList?: (dataList: string[]) => void;
+  uploadedFiles: File[];
+  imageDataList: string[];
+}
+
+export const ScreenshotStateManager = ({
+  setUploadedFiles,
+  setImageDataList,
+  uploadedFiles,
+  imageDataList,
+}: ScreenshotStateManagerProps) => {
+  useEffect(() => {
+    if (setUploadedFiles && setImageDataList) {
+      (window as any).__BOLT_SET_UPLOADED_FILES__ = setUploadedFiles;
+      (window as any).__BOLT_SET_IMAGE_DATA_LIST__ = setImageDataList;
+      (window as any).__BOLT_UPLOADED_FILES__ = uploadedFiles;
+      (window as any).__BOLT_IMAGE_DATA_LIST__ = imageDataList;
+    }
+
+    return () => {
+      delete (window as any).__BOLT_SET_UPLOADED_FILES__;
+      delete (window as any).__BOLT_SET_IMAGE_DATA_LIST__;
+      delete (window as any).__BOLT_UPLOADED_FILES__;
+      delete (window as any).__BOLT_IMAGE_DATA_LIST__;
+    };
+  }, [setUploadedFiles, setImageDataList, uploadedFiles, imageDataList]);
+
+  return null;
+};
diff --git a/app/components/workbench/Preview.tsx b/app/components/workbench/Preview.tsx
index 4c1877c5d..a86667643 100644
--- a/app/components/workbench/Preview.tsx
+++ b/app/components/workbench/Preview.tsx
@@ -3,6 +3,7 @@ import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { IconButton } from '~/components/ui/IconButton';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { PortDropdown } from './PortDropdown';
+import { ScreenshotSelector } from './ScreenshotSelector';
 
 export const Preview = memo(() => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -15,6 +16,7 @@ export const Preview = memo(() => {
 
   const [url, setUrl] = useState('');
   const [iframeUrl, setIframeUrl] = useState<string | undefined>();
+  const [isSelectionMode, setIsSelectionMode] = useState(false);
 
   useEffect(() => {
     if (!activePreview) {
@@ -25,7 +27,7 @@ export const Preview = memo(() => {
     }
 
     const { baseUrl } = activePreview;
-
+    
     setUrl(baseUrl);
     setIframeUrl(baseUrl);
   }, [activePreview, iframeUrl]);
@@ -78,18 +80,19 @@ export const Preview = memo(() => {
       )}
       <div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5">
         <IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
+        <IconButton icon="i-ph:selection" onClick={() => setIsSelectionMode(!isSelectionMode)} className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''} />
         <div
           className="flex items-center gap-1 flex-grow bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-3 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive
         focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive"
         >
-          <input
+          <input title='URL'
             ref={inputRef}
             className="w-full bg-transparent outline-none"
             type="text"
             value={url}
             onChange={(event) => {
               setUrl(event.target.value);
-            }}
+            }}            
             onKeyDown={(event) => {
               if (event.key === 'Enter' && validateUrl(url)) {
                 setIframeUrl(url);
@@ -114,7 +117,10 @@ export const Preview = memo(() => {
       </div>
       <div className="flex-1 border-t border-bolt-elements-borderColor">
         {activePreview ? (
-          <iframe ref={iframeRef} className="border-none w-full h-full bg-white" src={iframeUrl} />
+          <>
+            <iframe ref={iframeRef} title="preview" className="border-none w-full h-full bg-white" src={iframeUrl} />
+            <ScreenshotSelector 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
new file mode 100644
index 000000000..adf05e4ce
--- /dev/null
+++ b/app/components/workbench/ScreenshotSelector.tsx
@@ -0,0 +1,203 @@
+import { memo, useCallback, useState } from 'react';
+import { toast } from 'react-toastify';
+
+interface ScreenshotSelectorProps {
+  isSelectionMode: boolean;
+  setIsSelectionMode: (mode: boolean) => void;
+  containerRef: React.RefObject<HTMLElement>;
+}
+
+export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, containerRef }: ScreenshotSelectorProps) => {
+  const [isCapturing, setIsCapturing] = useState(false);
+  const [selectionStart, setSelectionStart] = useState<{ x: number; y: number } | null>(null);
+  const [selectionEnd, setSelectionEnd] = useState<{ x: number; y: number } | null>(null);
+
+  const handleCopySelection = useCallback(async () => {
+    if (!isSelectionMode || !selectionStart || !selectionEnd || !containerRef.current) return;
+
+    setIsCapturing(true);
+    try {
+      const width = Math.abs(selectionEnd.x - selectionStart.x);
+      const height = Math.abs(selectionEnd.y - selectionStart.y);
+
+      // Create a video element to capture the screen
+      const video = document.createElement('video');
+      video.style.opacity = '0';
+      document.body.appendChild(video);
+
+      try {
+        // Capture the entire screen
+        const stream = await navigator.mediaDevices.getDisplayMedia({
+          audio: false,
+          video: {
+            displaySurface: "window"
+          }
+        } as MediaStreamConstraints);
+
+        // Set up video with the stream
+        video.srcObject = stream;
+        await video.play();
+
+        // Wait for video to be ready
+        await new Promise(resolve => setTimeout(resolve, 300));
+
+        // Create temporary canvas for full screenshot
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = video.videoWidth;
+        tempCanvas.height = video.videoHeight;
+        const tempCtx = tempCanvas.getContext('2d');
+
+        if (!tempCtx) {
+          throw new Error('Failed to get temporary canvas context');
+        }
+
+        // Draw the full video frame
+        tempCtx.drawImage(video, 0, 0);
+
+        // Get the container's position in the page
+        const containerRect = containerRef.current.getBoundingClientRect();
+        
+        // Calculate scale factor between video and screen
+        const scaleX = video.videoWidth / window.innerWidth;
+        const scaleY = video.videoHeight / window.innerHeight;
+
+        // Calculate the scaled coordinates
+        const scaledX = (containerRect.left + Math.min(selectionStart.x, selectionEnd.x)) * scaleX;
+        const scaledY = (containerRect.top + Math.min(selectionStart.y, selectionEnd.y)) * scaleY;
+        const scaledWidth = width * scaleX;
+        const scaledHeight = height * scaleY;
+
+        // Create final canvas for the cropped area
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+
+        if (!ctx) {
+          throw new Error('Failed to get canvas context');
+        }
+
+        // Draw the cropped area
+        ctx.drawImage(
+          tempCanvas,
+          scaledX,
+          scaledY,
+          scaledWidth,
+          scaledHeight,
+          0,
+          0,
+          width,
+          height
+        );
+
+        // 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'));
+          }, '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__;
+            const setImageDataList = (window as any).__BOLT_SET_IMAGE_DATA_LIST__;
+            const uploadedFiles = (window as any).__BOLT_UPLOADED_FILES__ || [];
+            const imageDataList = (window as any).__BOLT_IMAGE_DATA_LIST__ || [];
+
+            if (setUploadedFiles && setImageDataList) {
+              // Update the files and image data
+              const file = new File([blob], 'screenshot.png', { type: 'image/png' });
+              setUploadedFiles([...uploadedFiles, file]);
+              setImageDataList([...imageDataList, base64Image]);
+              toast.success('Screenshot captured and added to chat');
+            } else {
+              toast.error('Could not add screenshot to chat');
+            }
+          }
+        };
+        reader.readAsDataURL(blob);
+
+        // Stop all tracks
+        stream.getTracks().forEach(track => track.stop());
+
+      } finally {
+        // Clean up video element
+        document.body.removeChild(video);
+      }
+    } catch (error) {
+      console.error('Failed to capture screenshot:', error);
+      toast.error('Failed to capture screenshot');
+    } finally {
+      setIsCapturing(false);
+      setSelectionStart(null);
+      setSelectionEnd(null);
+      setIsSelectionMode(false);
+    }
+  }, [isSelectionMode, selectionStart, selectionEnd, containerRef, setIsSelectionMode]);
+
+  const handleSelectionStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!isSelectionMode) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    setSelectionStart({ x, y });
+    setSelectionEnd({ x, y });
+  }, [isSelectionMode]);
+
+  const handleSelectionMove = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!isSelectionMode || !selectionStart) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    setSelectionEnd({ x, y });
+  }, [isSelectionMode, selectionStart]);
+
+  if (!isSelectionMode) return null;
+
+  return (
+    <div
+      className="absolute inset-0 cursor-crosshair"
+      onMouseDown={handleSelectionStart}
+      onMouseMove={handleSelectionMove}
+      onMouseUp={handleCopySelection}
+      onMouseLeave={() => {
+        if (selectionStart) {
+          setSelectionStart(null);
+        }
+      }}
+      style={{
+        backgroundColor: isCapturing ? 'transparent' : 'rgba(0, 0, 0, 0.1)',
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+        pointerEvents: 'all',
+        opacity: isCapturing ? 0 : 1,
+        zIndex: 50,
+        transition: 'opacity 0.1s ease-in-out',
+      }}
+    >
+      {selectionStart && selectionEnd && !isCapturing && (
+        <div
+          className="absolute border-2 border-blue-500 bg-blue-200 bg-opacity-20"
+          style={{
+            left: Math.min(selectionStart.x, selectionEnd.x),
+            top: Math.min(selectionStart.y, selectionEnd.y),
+            width: Math.abs(selectionEnd.x - selectionStart.x),
+            height: Math.abs(selectionEnd.y - selectionStart.y),
+          }}
+        />
+      )}
+    </div>
+  );
+});

From 7fdab0ad6a857ae490dd3e8b33b060a249f547ee Mon Sep 17 00:00:00 2001
From: Ed McConnell <ed.mcconnell@sqyer.com>
Date: Thu, 5 Dec 2024 17:31:47 -0500
Subject: [PATCH 2/7] Second commit for screen cap feature

---
 app/components/workbench/Preview.tsx          |  19 +-
 .../workbench/ScreenshotSelector.tsx          | 357 +++++++++---------
 2 files changed, 191 insertions(+), 185 deletions(-)

diff --git a/app/components/workbench/Preview.tsx b/app/components/workbench/Preview.tsx
index a86667643..46e4e5925 100644
--- a/app/components/workbench/Preview.tsx
+++ b/app/components/workbench/Preview.tsx
@@ -27,7 +27,7 @@ export const Preview = memo(() => {
     }
 
     const { baseUrl } = activePreview;
-    
+
     setUrl(baseUrl);
     setIframeUrl(baseUrl);
   }, [activePreview, iframeUrl]);
@@ -80,19 +80,24 @@ export const Preview = memo(() => {
       )}
       <div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5">
         <IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
-        <IconButton icon="i-ph:selection" onClick={() => setIsSelectionMode(!isSelectionMode)} className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''} />
+        <IconButton
+          icon="i-ph:selection"
+          onClick={() => setIsSelectionMode(!isSelectionMode)}
+          className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''}
+        />
         <div
           className="flex items-center gap-1 flex-grow bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-3 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive
         focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive"
         >
-          <input title='URL'
+          <input
+            title="URL"
             ref={inputRef}
             className="w-full bg-transparent outline-none"
             type="text"
             value={url}
             onChange={(event) => {
               setUrl(event.target.value);
-            }}            
+            }}
             onKeyDown={(event) => {
               if (event.key === 'Enter' && validateUrl(url)) {
                 setIframeUrl(url);
@@ -119,7 +124,11 @@ export const Preview = memo(() => {
         {activePreview ? (
           <>
             <iframe ref={iframeRef} title="preview" className="border-none w-full h-full bg-white" src={iframeUrl} />
-            <ScreenshotSelector isSelectionMode={isSelectionMode} setIsSelectionMode={setIsSelectionMode} containerRef={iframeRef} />
+            <ScreenshotSelector
+              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 adf05e4ce..a06cc5ff8 100644
--- a/app/components/workbench/ScreenshotSelector.tsx
+++ b/app/components/workbench/ScreenshotSelector.tsx
@@ -7,197 +7,194 @@ interface ScreenshotSelectorProps {
   containerRef: React.RefObject<HTMLElement>;
 }
 
-export const ScreenshotSelector = memo(({ isSelectionMode, setIsSelectionMode, containerRef }: ScreenshotSelectorProps) => {
-  const [isCapturing, setIsCapturing] = useState(false);
-  const [selectionStart, setSelectionStart] = useState<{ x: number; y: number } | null>(null);
-  const [selectionEnd, setSelectionEnd] = useState<{ x: number; y: number } | null>(null);
+export const ScreenshotSelector = memo(
+  ({ isSelectionMode, setIsSelectionMode, containerRef }: ScreenshotSelectorProps) => {
+    const [isCapturing, setIsCapturing] = useState(false);
+    const [selectionStart, setSelectionStart] = useState<{ x: number; y: number } | null>(null);
+    const [selectionEnd, setSelectionEnd] = useState<{ x: number; y: number } | null>(null);
 
-  const handleCopySelection = useCallback(async () => {
-    if (!isSelectionMode || !selectionStart || !selectionEnd || !containerRef.current) return;
-
-    setIsCapturing(true);
-    try {
-      const width = Math.abs(selectionEnd.x - selectionStart.x);
-      const height = Math.abs(selectionEnd.y - selectionStart.y);
-
-      // Create a video element to capture the screen
-      const video = document.createElement('video');
-      video.style.opacity = '0';
-      document.body.appendChild(video);
+    const handleCopySelection = useCallback(async () => {
+      if (!isSelectionMode || !selectionStart || !selectionEnd || !containerRef.current) return;
 
+      setIsCapturing(true);
       try {
-        // Capture the entire screen
-        const stream = await navigator.mediaDevices.getDisplayMedia({
-          audio: false,
-          video: {
-            displaySurface: "window"
+        const width = Math.abs(selectionEnd.x - selectionStart.x);
+        const height = Math.abs(selectionEnd.y - selectionStart.y);
+
+        // Create a video element to capture the screen
+        const video = document.createElement('video');
+        video.style.opacity = '0';
+        document.body.appendChild(video);
+
+        try {
+          // Capture the entire screen
+          const stream = await navigator.mediaDevices.getDisplayMedia({
+            audio: false,
+            video: {
+              displaySurface: 'window',
+            },
+          } as MediaStreamConstraints);
+
+          // Set up video with the stream
+          video.srcObject = stream;
+          await video.play();
+
+          // Wait for video to be ready
+          await new Promise((resolve) => setTimeout(resolve, 300));
+
+          // Create temporary canvas for full screenshot
+          const tempCanvas = document.createElement('canvas');
+          tempCanvas.width = video.videoWidth;
+          tempCanvas.height = video.videoHeight;
+          const tempCtx = tempCanvas.getContext('2d');
+
+          if (!tempCtx) {
+            throw new Error('Failed to get temporary canvas context');
           }
-        } as MediaStreamConstraints);
 
-        // Set up video with the stream
-        video.srcObject = stream;
-        await video.play();
+          // Draw the full video frame
+          tempCtx.drawImage(video, 0, 0);
 
-        // Wait for video to be ready
-        await new Promise(resolve => setTimeout(resolve, 300));
+          // Get the container's position in the page
+          const containerRect = containerRef.current.getBoundingClientRect();
 
-        // Create temporary canvas for full screenshot
-        const tempCanvas = document.createElement('canvas');
-        tempCanvas.width = video.videoWidth;
-        tempCanvas.height = video.videoHeight;
-        const tempCtx = tempCanvas.getContext('2d');
+          // Calculate scale factor between video and screen
+          const scaleX = video.videoWidth / window.innerWidth;
+          const scaleY = video.videoHeight / window.innerHeight;
 
-        if (!tempCtx) {
-          throw new Error('Failed to get temporary canvas context');
-        }
+          // Calculate the scaled coordinates
+          const scaledX = (containerRect.left + Math.min(selectionStart.x, selectionEnd.x)) * scaleX;
+          const scaledY = (containerRect.top + Math.min(selectionStart.y, selectionEnd.y)) * scaleY;
+          const scaledWidth = width * scaleX;
+          const scaledHeight = height * scaleY;
 
-        // Draw the full video frame
-        tempCtx.drawImage(video, 0, 0);
-
-        // Get the container's position in the page
-        const containerRect = containerRef.current.getBoundingClientRect();
-        
-        // Calculate scale factor between video and screen
-        const scaleX = video.videoWidth / window.innerWidth;
-        const scaleY = video.videoHeight / window.innerHeight;
-
-        // Calculate the scaled coordinates
-        const scaledX = (containerRect.left + Math.min(selectionStart.x, selectionEnd.x)) * scaleX;
-        const scaledY = (containerRect.top + Math.min(selectionStart.y, selectionEnd.y)) * scaleY;
-        const scaledWidth = width * scaleX;
-        const scaledHeight = height * scaleY;
-
-        // Create final canvas for the cropped area
-        const canvas = document.createElement('canvas');
-        canvas.width = width;
-        canvas.height = height;
-        const ctx = canvas.getContext('2d');
-
-        if (!ctx) {
-          throw new Error('Failed to get canvas context');
-        }
+          // Create final canvas for the cropped area
+          const canvas = document.createElement('canvas');
+          canvas.width = width;
+          canvas.height = height;
+          const ctx = canvas.getContext('2d');
 
-        // Draw the cropped area
-        ctx.drawImage(
-          tempCanvas,
-          scaledX,
-          scaledY,
-          scaledWidth,
-          scaledHeight,
-          0,
-          0,
-          width,
-          height
-        );
-
-        // 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'));
-          }, '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__;
-            const setImageDataList = (window as any).__BOLT_SET_IMAGE_DATA_LIST__;
-            const uploadedFiles = (window as any).__BOLT_UPLOADED_FILES__ || [];
-            const imageDataList = (window as any).__BOLT_IMAGE_DATA_LIST__ || [];
-
-            if (setUploadedFiles && setImageDataList) {
-              // Update the files and image data
-              const file = new File([blob], 'screenshot.png', { type: 'image/png' });
-              setUploadedFiles([...uploadedFiles, file]);
-              setImageDataList([...imageDataList, base64Image]);
-              toast.success('Screenshot captured and added to chat');
-            } else {
-              toast.error('Could not add screenshot to chat');
-            }
+          if (!ctx) {
+            throw new Error('Failed to get canvas context');
           }
-        };
-        reader.readAsDataURL(blob);
-
-        // Stop all tracks
-        stream.getTracks().forEach(track => track.stop());
 
+          // Draw the cropped area
+          ctx.drawImage(tempCanvas, scaledX, scaledY, scaledWidth, scaledHeight, 0, 0, width, height);
+
+          // 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'));
+            }, '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__;
+              const setImageDataList = (window as any).__BOLT_SET_IMAGE_DATA_LIST__;
+              const uploadedFiles = (window as any).__BOLT_UPLOADED_FILES__ || [];
+              const imageDataList = (window as any).__BOLT_IMAGE_DATA_LIST__ || [];
+
+              if (setUploadedFiles && setImageDataList) {
+                // Update the files and image data
+                const file = new File([blob], 'screenshot.png', { type: 'image/png' });
+                setUploadedFiles([...uploadedFiles, file]);
+                setImageDataList([...imageDataList, base64Image]);
+                toast.success('Screenshot captured and added to chat');
+              } else {
+                toast.error('Could not add screenshot to chat');
+              }
+            }
+          };
+          reader.readAsDataURL(blob);
+
+          // Stop all tracks
+          stream.getTracks().forEach((track) => track.stop());
+        } finally {
+          // Clean up video element
+          document.body.removeChild(video);
+        }
+      } catch (error) {
+        console.error('Failed to capture screenshot:', error);
+        toast.error('Failed to capture screenshot');
       } finally {
-        // Clean up video element
-        document.body.removeChild(video);
+        setIsCapturing(false);
+        setSelectionStart(null);
+        setSelectionEnd(null);
+        setIsSelectionMode(false);
       }
-    } catch (error) {
-      console.error('Failed to capture screenshot:', error);
-      toast.error('Failed to capture screenshot');
-    } finally {
-      setIsCapturing(false);
-      setSelectionStart(null);
-      setSelectionEnd(null);
-      setIsSelectionMode(false);
-    }
-  }, [isSelectionMode, selectionStart, selectionEnd, containerRef, setIsSelectionMode]);
-
-  const handleSelectionStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!isSelectionMode) return;
-    const rect = e.currentTarget.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-    setSelectionStart({ x, y });
-    setSelectionEnd({ x, y });
-  }, [isSelectionMode]);
-
-  const handleSelectionMove = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!isSelectionMode || !selectionStart) return;
-    const rect = e.currentTarget.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-    setSelectionEnd({ x, y });
-  }, [isSelectionMode, selectionStart]);
-
-  if (!isSelectionMode) return null;
-
-  return (
-    <div
-      className="absolute inset-0 cursor-crosshair"
-      onMouseDown={handleSelectionStart}
-      onMouseMove={handleSelectionMove}
-      onMouseUp={handleCopySelection}
-      onMouseLeave={() => {
-        if (selectionStart) {
-          setSelectionStart(null);
-        }
-      }}
-      style={{
-        backgroundColor: isCapturing ? 'transparent' : 'rgba(0, 0, 0, 0.1)',
-        userSelect: 'none',
-        WebkitUserSelect: 'none',
-        pointerEvents: 'all',
-        opacity: isCapturing ? 0 : 1,
-        zIndex: 50,
-        transition: 'opacity 0.1s ease-in-out',
-      }}
-    >
-      {selectionStart && selectionEnd && !isCapturing && (
-        <div
-          className="absolute border-2 border-blue-500 bg-blue-200 bg-opacity-20"
-          style={{
-            left: Math.min(selectionStart.x, selectionEnd.x),
-            top: Math.min(selectionStart.y, selectionEnd.y),
-            width: Math.abs(selectionEnd.x - selectionStart.x),
-            height: Math.abs(selectionEnd.y - selectionStart.y),
-          }}
-        />
-      )}
-    </div>
-  );
-});
+    }, [isSelectionMode, selectionStart, selectionEnd, containerRef, setIsSelectionMode]);
+
+    const handleSelectionStart = useCallback(
+      (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!isSelectionMode) return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        setSelectionStart({ x, y });
+        setSelectionEnd({ x, y });
+      },
+      [isSelectionMode],
+    );
+
+    const handleSelectionMove = useCallback(
+      (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!isSelectionMode || !selectionStart) return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        setSelectionEnd({ x, y });
+      },
+      [isSelectionMode, selectionStart],
+    );
+
+    if (!isSelectionMode) return null;
+
+    return (
+      <div
+        className="absolute inset-0 cursor-crosshair"
+        onMouseDown={handleSelectionStart}
+        onMouseMove={handleSelectionMove}
+        onMouseUp={handleCopySelection}
+        onMouseLeave={() => {
+          if (selectionStart) {
+            setSelectionStart(null);
+          }
+        }}
+        style={{
+          backgroundColor: isCapturing ? 'transparent' : 'rgba(0, 0, 0, 0.1)',
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+          pointerEvents: 'all',
+          opacity: isCapturing ? 0 : 1,
+          zIndex: 50,
+          transition: 'opacity 0.1s ease-in-out',
+        }}
+      >
+        {selectionStart && selectionEnd && !isCapturing && (
+          <div
+            className="absolute border-2 border-blue-500 bg-blue-200 bg-opacity-20"
+            style={{
+              left: Math.min(selectionStart.x, selectionEnd.x),
+              top: Math.min(selectionStart.y, selectionEnd.y),
+              width: Math.abs(selectionEnd.x - selectionStart.x),
+              height: Math.abs(selectionEnd.y - selectionStart.y),
+            }}
+          />
+        )}
+      </div>
+    );
+  },
+);

From 0e86bf7709d5be73979d5e1b5ec6028a2a1c14a9 Mon Sep 17 00:00:00 2001
From: Ed McConnell <ed.mcconnell@sqyer.com>
Date: Fri, 6 Dec 2024 22:27:15 -0500
Subject: [PATCH 3/7] More selection tool changes

---
 .../workbench/ScreenshotSelector.tsx          | 241 +++++++++++-------
 1 file changed, 153 insertions(+), 88 deletions(-)

diff --git a/app/components/workbench/ScreenshotSelector.tsx b/app/components/workbench/ScreenshotSelector.tsx
index a06cc5ff8..ac9fbee17 100644
--- a/app/components/workbench/ScreenshotSelector.tsx
+++ b/app/components/workbench/ScreenshotSelector.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 
 interface ScreenshotSelectorProps {
@@ -12,124 +12,189 @@ export const ScreenshotSelector = memo(
     const [isCapturing, setIsCapturing] = useState(false);
     const [selectionStart, setSelectionStart] = useState<{ x: number; y: number } | null>(null);
     const [selectionEnd, setSelectionEnd] = useState<{ x: number; y: number } | null>(null);
+    const mediaStreamRef = useRef<MediaStream | null>(null);
+    const videoRef = useRef<HTMLVideoElement | null>(null);
 
-    const handleCopySelection = useCallback(async () => {
-      if (!isSelectionMode || !selectionStart || !selectionEnd || !containerRef.current) return;
-
-      setIsCapturing(true);
-      try {
-        const width = Math.abs(selectionEnd.x - selectionStart.x);
-        const height = Math.abs(selectionEnd.y - selectionStart.y);
-
-        // Create a video element to capture the screen
-        const video = document.createElement('video');
-        video.style.opacity = '0';
-        document.body.appendChild(video);
+    useEffect(() => {
+      // Cleanup function to stop all tracks when component unmounts
+      return () => {
+        if (videoRef.current) {
+          videoRef.current.pause();
+          videoRef.current.srcObject = null;
+          videoRef.current.remove();
+          videoRef.current = null;
+        }
+        if (mediaStreamRef.current) {
+          mediaStreamRef.current.getTracks().forEach((track) => track.stop());
+          mediaStreamRef.current = null;
+        }
+      };
+    }, []);
 
+    const initializeStream = async () => {
+      if (!mediaStreamRef.current) {
         try {
-          // Capture the entire screen
           const stream = await navigator.mediaDevices.getDisplayMedia({
             audio: false,
             video: {
               displaySurface: 'window',
+              preferCurrentTab: true,
+              surfaceSwitching: 'include',
+              systemAudio: 'exclude',
             },
           } as MediaStreamConstraints);
 
+          // Add handler for when sharing stops
+          stream.addEventListener('inactive', () => {
+            if (videoRef.current) {
+              videoRef.current.pause();
+              videoRef.current.srcObject = null;
+              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);
+            setIsCapturing(false);
+          });
+
+          mediaStreamRef.current = stream;
+
+          // Initialize video element if needed
+          if (!videoRef.current) {
+            const video = document.createElement('video');
+            video.style.opacity = '0';
+            video.style.position = 'fixed';
+            video.style.pointerEvents = 'none';
+            video.style.zIndex = '-1';
+            document.body.appendChild(video);
+            videoRef.current = video;
+          }
+
           // Set up video with the stream
-          video.srcObject = stream;
-          await video.play();
+          videoRef.current.srcObject = stream;
+          await videoRef.current.play();
+        } catch (error) {
+          console.error('Failed to initialize stream:', error);
+          setIsSelectionMode(false);
+          toast.error('Failed to initialize screen capture');
+        }
+      }
+      return mediaStreamRef.current;
+    };
 
-          // Wait for video to be ready
-          await new Promise((resolve) => setTimeout(resolve, 300));
+    const handleCopySelection = useCallback(async () => {
+      if (!isSelectionMode || !selectionStart || !selectionEnd || !containerRef.current) return;
 
-          // Create temporary canvas for full screenshot
-          const tempCanvas = document.createElement('canvas');
-          tempCanvas.width = video.videoWidth;
-          tempCanvas.height = video.videoHeight;
-          const tempCtx = tempCanvas.getContext('2d');
+      setIsCapturing(true);
+      try {
+        const stream = await initializeStream();
+        if (!stream || !videoRef.current) return;
 
-          if (!tempCtx) {
-            throw new Error('Failed to get temporary canvas context');
-          }
+        // Wait for video to be ready
+        await new Promise((resolve) => setTimeout(resolve, 300));
 
-          // Draw the full video frame
-          tempCtx.drawImage(video, 0, 0);
+        // Create temporary canvas for full screenshot
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = videoRef.current.videoWidth;
+        tempCanvas.height = videoRef.current.videoHeight;
+        const tempCtx = tempCanvas.getContext('2d');
 
-          // Get the container's position in the page
-          const containerRect = containerRef.current.getBoundingClientRect();
+        if (!tempCtx) {
+          throw new Error('Failed to get temporary canvas context');
+        }
 
-          // Calculate scale factor between video and screen
-          const scaleX = video.videoWidth / window.innerWidth;
-          const scaleY = video.videoHeight / window.innerHeight;
+        // Draw the full video frame
+        tempCtx.drawImage(videoRef.current, 0, 0);
 
-          // Calculate the scaled coordinates
-          const scaledX = (containerRect.left + Math.min(selectionStart.x, selectionEnd.x)) * scaleX;
-          const scaledY = (containerRect.top + Math.min(selectionStart.y, selectionEnd.y)) * scaleY;
-          const scaledWidth = width * scaleX;
-          const scaledHeight = height * scaleY;
+        // Calculate scale factor between video and screen
+        const scaleX = videoRef.current.videoWidth / window.innerWidth;
+        const scaleY = videoRef.current.videoHeight / window.innerHeight;
 
-          // Create final canvas for the cropped area
-          const canvas = document.createElement('canvas');
-          canvas.width = width;
-          canvas.height = height;
-          const ctx = canvas.getContext('2d');
+        // Get window scroll position
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY;
 
-          if (!ctx) {
-            throw new Error('Failed to get canvas context');
-          }
+        // Get the container's position in the page
+        const containerRect = containerRef.current.getBoundingClientRect();
 
-          // Draw the cropped area
-          ctx.drawImage(tempCanvas, scaledX, scaledY, scaledWidth, scaledHeight, 0, 0, width, height);
+        // Offset adjustments for more accurate clipping
+        const leftOffset = -9; // Adjust left position
+        const bottomOffset = -14; // Adjust bottom position
 
-          // 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'));
-            }, 'image/png');
-          });
+        // Calculate the scaled coordinates with scroll offset and adjustments
+        const scaledX = Math.round(
+          (containerRect.left + Math.min(selectionStart.x, selectionEnd.x) + scrollX + leftOffset) * scaleX,
+        );
+        const scaledY = Math.round(
+          (containerRect.top + Math.min(selectionStart.y, selectionEnd.y) + scrollY + bottomOffset) * scaleY,
+        );
+        const scaledWidth = Math.round(Math.abs(selectionEnd.x - selectionStart.x) * scaleX);
+        const scaledHeight = Math.round(Math.abs(selectionEnd.y - selectionStart.y) * scaleY);
 
-          // 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__;
-              const setImageDataList = (window as any).__BOLT_SET_IMAGE_DATA_LIST__;
-              const uploadedFiles = (window as any).__BOLT_UPLOADED_FILES__ || [];
-              const imageDataList = (window as any).__BOLT_IMAGE_DATA_LIST__ || [];
-
-              if (setUploadedFiles && setImageDataList) {
-                // Update the files and image data
-                const file = new File([blob], 'screenshot.png', { type: 'image/png' });
-                setUploadedFiles([...uploadedFiles, file]);
-                setImageDataList([...imageDataList, base64Image]);
-                toast.success('Screenshot captured and added to chat');
-              } else {
-                toast.error('Could not add screenshot to chat');
-              }
-            }
-          };
-          reader.readAsDataURL(blob);
-
-          // Stop all tracks
-          stream.getTracks().forEach((track) => track.stop());
-        } finally {
-          // Clean up video element
-          document.body.removeChild(video);
+        // Create final canvas for the cropped area
+        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) {
+          throw new Error('Failed to get canvas context');
         }
+
+        // Draw the cropped area
+        ctx.drawImage(tempCanvas, scaledX, scaledY, scaledWidth, scaledHeight, 0, 0, canvas.width, canvas.height);
+
+        // 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'));
+          }, '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__;
+            const setImageDataList = (window as any).__BOLT_SET_IMAGE_DATA_LIST__;
+            const uploadedFiles = (window as any).__BOLT_UPLOADED_FILES__ || [];
+            const imageDataList = (window as any).__BOLT_IMAGE_DATA_LIST__ || [];
+
+            if (setUploadedFiles && setImageDataList) {
+              // Update the files and image data
+              const file = new File([blob], 'screenshot.png', { type: 'image/png' });
+              setUploadedFiles([...uploadedFiles, file]);
+              setImageDataList([...imageDataList, base64Image]);
+              toast.success('Screenshot captured and added to chat');
+            } else {
+              toast.error('Could not add screenshot to chat');
+            }
+          }
+        };
+        reader.readAsDataURL(blob);
       } 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;
+        }
       } finally {
         setIsCapturing(false);
         setSelectionStart(null);
         setSelectionEnd(null);
-        setIsSelectionMode(false);
+        setIsSelectionMode(false); // Turn off selection mode after capture
       }
     }, [isSelectionMode, selectionStart, selectionEnd, containerRef, setIsSelectionMode]);
 

From 301675e30c19e04355f3b1635e40c1cc963ab7f5 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 13 Dec 2024 19:26:12 +0000
Subject: [PATCH 4/7] chore: update commit hash to
 1e04ab38b07e82852626b164890f4a6df1f98cef

---
 app/commit.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/commit.json b/app/commit.json
index 2a5e31eee..d805f8214 100644
--- a/app/commit.json
+++ b/app/commit.json
@@ -1 +1 @@
-{ "commit": "d1fa70fc97dc7839ea8cd005feb03266f201cf4f" }
+{ "commit": "1e04ab38b07e82852626b164890f4a6df1f98cef" }

From bbda3a1db4ceb583e7ca815fd1ee3c05f73f80a4 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Sat, 14 Dec 2024 02:09:03 +0000
Subject: [PATCH 5/7] chore: update commit hash to
 9666b2ab67d25345542722ab9d870b36ad06252e

---
 app/commit.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/commit.json b/app/commit.json
index beebd2bb2..ff64112c7 100644
--- a/app/commit.json
+++ b/app/commit.json
@@ -1 +1 @@
-{ "commit": "55094392cf4c5bc607aff796680ad50236a4cf20" }
+{ "commit": "9666b2ab67d25345542722ab9d870b36ad06252e" }

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 6/7] 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 0c0fdae82..50d6492cd 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 0d0c41ad6..b2d97e314 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 a165b8d86..238684684 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

From 4db916928c29c9dab94d2ee6fff49bdf711adcec Mon Sep 17 00:00:00 2001
From: Ed McConnell <ed.mcconnell@sqyer.com>
Date: Sat, 14 Dec 2024 09:56:51 -0500
Subject: [PATCH 7/7] merge main

---
 app/commit.json                  | 2 +-
 app/components/chat/BaseChat.tsx | 6 ++++--
 app/lib/stores/workbench.ts      | 1 -
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/commit.json b/app/commit.json
index 2b7141c11..1b5212fdc 100644
--- a/app/commit.json
+++ b/app/commit.json
@@ -1 +1 @@
-{ "commit": "6ffcdd8b3c54e2560b327ca1b4f4eb33ba54c0db" }
+{ "commit": "7a31db904d19e75a68d6a6db8f72fe7949a6f19b" }
diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index db4e43579..09f3c1681 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -436,15 +436,17 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         }
 
                         event.preventDefault();
-                        
+
                         if (isStreaming) {
                           handleStop?.();
                           return;
                         }
+
                         // ignore if using input method engine
                         if (event.nativeEvent.isComposing) {
-                          return
+                          return;
                         }
+
                         handleSendMessage?.(event);
                       }
                     }}
diff --git a/app/lib/stores/workbench.ts b/app/lib/stores/workbench.ts
index bbd537d40..0d46057db 100644
--- a/app/lib/stores/workbench.ts
+++ b/app/lib/stores/workbench.ts
@@ -297,7 +297,6 @@ export class WorkbenchStore {
 
     const action = artifact.runner.actions.get()[data.actionId];
 
-
     if (!action || action.executed) {
       return;
     }