From 44bda1500aa40da39817ec682e5611d938a4a589 Mon Sep 17 00:00:00 2001 From: Diego Souza Date: Tue, 26 Nov 2024 17:39:13 -0300 Subject: [PATCH 001/177] Check the render method of SlotClone. #432 --- app/components/chat/Messages.client.tsx | 8 +- app/components/ui/IconButton.tsx | 75 ++++++++------- app/components/ui/Tooltip.tsx | 118 +++++++++++++----------- 3 files changed, 107 insertions(+), 94 deletions(-) diff --git a/app/components/chat/Messages.client.tsx b/app/components/chat/Messages.client.tsx index 4a2ac6a..2765144 100644 --- a/app/components/chat/Messages.client.tsx +++ b/app/components/chat/Messages.client.tsx @@ -69,8 +69,8 @@ export const Messages = React.forwardRef((props: {!isUserMessage && (
- - {messageId && ( + {messageId && ( + - ); - }, + onClick?.(event); + }} + > + {children ? children :
} + + ); + }, + ), ); function getIconSize(size: IconSize) { diff --git a/app/components/ui/Tooltip.tsx b/app/components/ui/Tooltip.tsx index 4e22f54..278fa1e 100644 --- a/app/components/ui/Tooltip.tsx +++ b/app/components/ui/Tooltip.tsx @@ -1,8 +1,9 @@ import * as Tooltip from '@radix-ui/react-tooltip'; +import { forwardRef, type ForwardedRef, type ReactElement } from 'react'; interface TooltipProps { tooltip: React.ReactNode; - children: React.ReactNode; + children: ReactElement; sideOffset?: number; className?: string; arrowClassName?: string; @@ -12,62 +13,67 @@ interface TooltipProps { delay?: number; } -const WithTooltip = ({ - tooltip, - children, - sideOffset = 5, - className = '', - arrowClassName = '', - tooltipStyle = {}, - position = 'top', - maxWidth = 250, - delay = 0, -}: TooltipProps) => { - return ( - - {children} - - -
{tooltip}
- , + ) => { + return ( + + {children} + + - - - - ); -}; + sideOffset={sideOffset} + style={{ + maxWidth, + ...tooltipStyle, + }} + > +
{tooltip}
+ +
+
+
+ ); + }, +); export default WithTooltip; From 8b7e18e62795248f11c2b3cb469f92ca4795a055 Mon Sep 17 00:00:00 2001 From: Ed McConnell Date: Thu, 5 Dec 2024 17:30:45 -0500 Subject: [PATCH 002/177] 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 8c7589a..ed317e4 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( setImageDataList?.(imageDataList.filter((_, i) => i !== index)); }} /> + + {() => ( + + )} +
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 4c1877c..a866676 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(null); @@ -15,6 +16,7 @@ export const Preview = memo(() => { const [url, setUrl] = useState(''); const [iframeUrl, setIframeUrl] = useState(); + 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(() => { )}
+ setIsSelectionMode(!isSelectionMode)} className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''} />
- { setUrl(event.target.value); - }} + }} onKeyDown={(event) => { if (event.key === 'Enter' && validateUrl(url)) { setIframeUrl(url); @@ -114,7 +117,10 @@ export const Preview = memo(() => {
{activePreview ? ( -