crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/components/workbench/ScreenshotSelector.tsx

@@ -0,0 +1,293 @@
+import { memo, useCallback, useEffect, useRef, 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 mediaStreamRef = useRef<MediaStream | null>(null);
+    const videoRef = useRef<HTMLVideoElement | null>(null);
+
+    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 {
+          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
+          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;
+    };
+
+    const handleCopySelection = useCallback(async () => {
+      if (!isSelectionMode || !selectionStart || !selectionEnd || !containerRef.current) {
+        return;
+      }
+
+      setIsCapturing(true);
+
+      try {
+        const stream = await initializeStream();
+
+        if (!stream || !videoRef.current) {
+          return;
+        }
+
+        // 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 = videoRef.current.videoWidth;
+        tempCanvas.height = videoRef.current.videoHeight;
+
+        const tempCtx = tempCanvas.getContext('2d');
+
+        if (!tempCtx) {
+          throw new Error('Failed to get temporary canvas context');
+        }
+
+        // Draw the full video frame
+        tempCtx.drawImage(videoRef.current, 0, 0);
+
+        // Calculate scale factor between video and screen
+        const scaleX = videoRef.current.videoWidth / window.innerWidth;
+        const scaleY = videoRef.current.videoHeight / window.innerHeight;
+
+        // Get window scroll position
+        const scrollX = window.scrollX;
+        const scrollY = window.scrollY + 40;
+
+        // Get the container's position in the page
+        const containerRect = containerRef.current.getBoundingClientRect();
+
+        // Offset adjustments for more accurate clipping
+        const leftOffset = -9; // Adjust left position
+        const bottomOffset = -14; // Adjust bottom position
+
+        // 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 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); // Turn off selection mode after capture
+      }
+    }, [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>
+    );
+  },
+);

tools/bolt.diy/app/components/workbench/Search.tsx

@@ -0,0 +1,257 @@
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import type { TextSearchOptions, TextSearchOnProgressCallback, WebContainer } from '@webcontainer/api';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { webcontainer } from '~/lib/webcontainer';
+import { WORK_DIR } from '~/utils/constants';
+import { debounce } from '~/utils/debounce';
+
+interface DisplayMatch {
+  path: string;
+  lineNumber: number;
+  previewText: string;
+  matchCharStart: number;
+  matchCharEnd: number;
+}
+
+async function performTextSearch(
+  instance: WebContainer,
+  query: string,
+  options: Omit<TextSearchOptions, 'folders'>,
+  onProgress: (results: DisplayMatch[]) => void,
+): Promise<void> {
+  if (!instance || typeof instance.internal?.textSearch !== 'function') {
+    console.error('WebContainer instance not available or internal searchText method is missing/not a function.');
+
+    return;
+  }
+
+  const searchOptions: TextSearchOptions = {
+    ...options,
+    folders: [WORK_DIR],
+  };
+
+  const progressCallback: TextSearchOnProgressCallback = (filePath: any, apiMatches: any[]) => {
+    const displayMatches: DisplayMatch[] = [];
+
+    apiMatches.forEach((apiMatch: { preview: { text: string; matches: string | any[] }; ranges: any[] }) => {
+      const previewLines = apiMatch.preview.text.split('\n');
+
+      apiMatch.ranges.forEach((range: { startLineNumber: number; startColumn: any; endColumn: any }) => {
+        let previewLineText = '(Preview line not found)';
+        let lineIndexInPreview = -1;
+
+        if (apiMatch.preview.matches.length > 0) {
+          const previewStartLine = apiMatch.preview.matches[0].startLineNumber;
+          lineIndexInPreview = range.startLineNumber - previewStartLine;
+        }
+
+        if (lineIndexInPreview >= 0 && lineIndexInPreview < previewLines.length) {
+          previewLineText = previewLines[lineIndexInPreview];
+        } else {
+          previewLineText = previewLines[0] ?? '(Preview unavailable)';
+        }
+
+        displayMatches.push({
+          path: filePath,
+          lineNumber: range.startLineNumber,
+          previewText: previewLineText,
+          matchCharStart: range.startColumn,
+          matchCharEnd: range.endColumn,
+        });
+      });
+    });
+
+    if (displayMatches.length > 0) {
+      onProgress(displayMatches);
+    }
+  };
+
+  try {
+    await instance.internal.textSearch(query, searchOptions, progressCallback);
+  } catch (error) {
+    console.error('Error during internal text search:', error);
+  }
+}
+
+function groupResultsByFile(results: DisplayMatch[]): Record<string, DisplayMatch[]> {
+  return results.reduce(
+    (acc, result) => {
+      if (!acc[result.path]) {
+        acc[result.path] = [];
+      }
+
+      acc[result.path].push(result);
+
+      return acc;
+    },
+    {} as Record<string, DisplayMatch[]>,
+  );
+}
+
+export function Search() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<DisplayMatch[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [expandedFiles, setExpandedFiles] = useState<Record<string, boolean>>({});
+  const [hasSearched, setHasSearched] = useState(false);
+
+  const groupedResults = useMemo(() => groupResultsByFile(searchResults), [searchResults]);
+
+  useEffect(() => {
+    if (searchResults.length > 0) {
+      const allExpanded: Record<string, boolean> = {};
+      Object.keys(groupedResults).forEach((file) => {
+        allExpanded[file] = true;
+      });
+      setExpandedFiles(allExpanded);
+    }
+  }, [groupedResults, searchResults]);
+
+  const handleSearch = useCallback(async (query: string) => {
+    if (!query.trim()) {
+      setSearchResults([]);
+      setIsSearching(false);
+      setExpandedFiles({});
+      setHasSearched(false);
+
+      return;
+    }
+
+    setIsSearching(true);
+    setSearchResults([]);
+    setExpandedFiles({});
+    setHasSearched(true);
+
+    const minLoaderTime = 300; // ms
+    const start = Date.now();
+
+    try {
+      const instance = await webcontainer;
+      const options: Omit<TextSearchOptions, 'folders'> = {
+        homeDir: WORK_DIR, // Adjust this path as needed
+        includes: ['**/*.*'],
+        excludes: ['**/node_modules/**', '**/package-lock.json', '**/.git/**', '**/dist/**', '**/*.lock'],
+        gitignore: true,
+        requireGit: false,
+        globalIgnoreFiles: true,
+        ignoreSymlinks: false,
+        resultLimit: 500,
+        isRegex: false,
+        caseSensitive: false,
+        isWordMatch: false,
+      };
+
+      const progressHandler = (batchResults: DisplayMatch[]) => {
+        setSearchResults((prevResults) => [...prevResults, ...batchResults]);
+      };
+
+      await performTextSearch(instance, query, options, progressHandler);
+    } catch (error) {
+      console.error('Failed to initiate search:', error);
+    } finally {
+      const elapsed = Date.now() - start;
+
+      if (elapsed < minLoaderTime) {
+        setTimeout(() => setIsSearching(false), minLoaderTime - elapsed);
+      } else {
+        setIsSearching(false);
+      }
+    }
+  }, []);
+
+  const debouncedSearch = useCallback(debounce(handleSearch, 300), [handleSearch]);
+
+  useEffect(() => {
+    debouncedSearch(searchQuery);
+  }, [searchQuery, debouncedSearch]);
+
+  const handleResultClick = (filePath: string, line?: number) => {
+    workbenchStore.setSelectedFile(filePath);
+
+    /*
+     * Adjust line number to be 0-based if it's defined
+     * The search results use 1-based line numbers, but CodeMirrorEditor expects 0-based
+     */
+    const adjustedLine = typeof line === 'number' ? Math.max(0, line - 1) : undefined;
+
+    workbenchStore.setCurrentDocumentScrollPosition({ line: adjustedLine, column: 0 });
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-bolt-elements-background-depth-2">
+      {/* Search Bar */}
+      <div className="flex items-center py-3 px-3">
+        <div className="relative flex-1">
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search"
+            className="w-full px-2 py-1 rounded-md bg-bolt-elements-background-depth-3 text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary focus:outline-none transition-all"
+          />
+        </div>
+      </div>
+
+      {/* Results */}
+      <div className="flex-1 overflow-auto py-2">
+        {isSearching && (
+          <div className="flex items-center justify-center h-32 text-bolt-elements-textTertiary">
+            <div className="i-ph:circle-notch animate-spin mr-2" /> Searching...
+          </div>
+        )}
+        {!isSearching && hasSearched && searchResults.length === 0 && searchQuery.trim() !== '' && (
+          <div className="flex items-center justify-center h-32 text-gray-500">No results found.</div>
+        )}
+        {!isSearching &&
+          Object.keys(groupedResults).map((file) => (
+            <div key={file} className="mb-2">
+              <button
+                className="flex gap-2 items-center w-full text-left py-1 px-2 text-bolt-elements-textSecondary bg-transparent hover:bg-bolt-elements-background-depth-3 group"
+                onClick={() => setExpandedFiles((prev) => ({ ...prev, [file]: !prev[file] }))}
+              >
+                <span
+                  className=" i-ph:caret-down-thin w-3 h-3 text-bolt-elements-textSecondary transition-transform"
+                  style={{ transform: expandedFiles[file] ? 'rotate(180deg)' : undefined }}
+                />
+                <span className="font-normal text-sm">{file.split('/').pop()}</span>
+                <span className="h-5.5 w-5.5 flex items-center justify-center text-xs ml-auto bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent rounded-full">
+                  {groupedResults[file].length}
+                </span>
+              </button>
+              {expandedFiles[file] && (
+                <div className="">
+                  {groupedResults[file].map((match, idx) => {
+                    const contextChars = 7;
+                    const isStart = match.matchCharStart <= contextChars;
+                    const previewStart = isStart ? 0 : match.matchCharStart - contextChars;
+                    const previewText = match.previewText.slice(previewStart);
+                    const matchStart = isStart ? match.matchCharStart : contextChars;
+                    const matchEnd = isStart
+                      ? match.matchCharEnd
+                      : contextChars + (match.matchCharEnd - match.matchCharStart);
+
+                    return (
+                      <div
+                        key={idx}
+                        className="hover:bg-bolt-elements-background-depth-3 cursor-pointer transition-colors pl-6 py-1"
+                        onClick={() => handleResultClick(match.path, match.lineNumber)}
+                      >
+                        <pre className="font-mono text-xs text-bolt-elements-textTertiary truncate">
+                          {!isStart && <span>...</span>}
+                          {previewText.slice(0, matchStart)}
+                          <span className="bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent rounded px-1">
+                            {previewText.slice(matchStart, matchEnd)}
+                          </span>
+                          {previewText.slice(matchEnd)}
+                        </pre>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+}