From 09097e580c3df87b076836d5d20187304bf85690 Mon Sep 17 00:00:00 2001
From: Brian Hackett <bhackett1024@gmail.com>
Date: Fri, 17 Jan 2025 07:19:13 -0800
Subject: [PATCH] UI improvements to chat and bug selection (#5)

---
 app/components/chat/BaseChat.tsx          | 19 ++-----------------
 app/components/chat/SendButton.client.tsx | 18 +++++++++++-------
 app/components/workbench/Preview.tsx      |  7 +++++--
 3 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 99e373415..5f3db5de4 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -377,7 +377,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       <>
                         <SendButton
                           show={input.length > 0 || isStreaming || uploadedFiles.length > 0}
-                          simulation={false}
+                          fixBug={false}
                           isStreaming={isStreaming}
                           onClick={(event) => {
                             if (isStreaming) {
@@ -392,7 +392,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         />
                         <SendButton
                           show={(input.length > 0 || uploadedFiles.length > 0) && chatStarted}
-                          simulation={true}
+                          fixBug={true}
                           isStreaming={isStreaming}
                           onClick={(event) => {
                             if (input.length > 0 || uploadedFiles.length > 0) {
@@ -408,21 +408,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       <IconButton title="Upload file" className="transition-all" onClick={() => handleFileUpload()}>
                         <div className="i-ph:paperclip text-xl"></div>
                       </IconButton>
-                      <IconButton
-                        title="Enhance prompt"
-                        disabled={input.length === 0 || enhancingPrompt}
-                        className={classNames('transition-all', enhancingPrompt ? 'opacity-100' : '')}
-                        onClick={() => {
-                          enhancePrompt?.();
-                          toast.success('Prompt enhanced!');
-                        }}
-                      >
-                        {enhancingPrompt ? (
-                          <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
-                        ) : (
-                          <div className="i-bolt:stars text-xl"></div>
-                        )}
-                      </IconButton>
 
                       <SpeechRecognitionButton
                         isListening={isListening}
diff --git a/app/components/chat/SendButton.client.tsx b/app/components/chat/SendButton.client.tsx
index d619a446b..0115278b3 100644
--- a/app/components/chat/SendButton.client.tsx
+++ b/app/components/chat/SendButton.client.tsx
@@ -2,7 +2,7 @@ import { AnimatePresence, cubicBezier, motion } from 'framer-motion';
 
 interface SendButtonProps {
   show: boolean;
-  simulation: boolean;
+  fixBug: boolean;
   isStreaming?: boolean;
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -11,17 +11,17 @@ interface SendButtonProps {
 
 const customEasingFn = cubicBezier(0.4, 0, 0.2, 1);
 
-export const SendButton = ({ show, simulation, isStreaming, disabled, onClick }: SendButtonProps) => {
-  const className = simulation
+export const SendButton = ({ show, fixBug, isStreaming, disabled, onClick }: SendButtonProps) => {
+  const className = fixBug
     ? "absolute flex justify-center items-center top-[18px] right-[60px] p-1 bg-accent-500 hover:brightness-94 color-white rounded-md w-[34px] h-[34px] transition-theme disabled:opacity-50 disabled:cursor-not-allowed"
     : "absolute flex justify-center items-center top-[18px] right-[22px] p-1 bg-accent-500 hover:brightness-94 color-white rounded-md w-[34px] h-[34px] transition-theme disabled:opacity-50 disabled:cursor-not-allowed";
 
   // Determine tooltip text based on button state
-  const tooltipText = simulation
-    ? "Start Recording"
+  const tooltipText = fixBug
+    ? "Fix Bug"
     : isStreaming
     ? "Stop Generation"
-    : "Send Message";
+    : "Make Improvement";
 
   return (
     <AnimatePresence>
@@ -43,7 +43,11 @@ export const SendButton = ({ show, simulation, isStreaming, disabled, onClick }:
           }}
         >
           <div className="text-lg">
-            {simulation ? <div className="i-ph:record-fill"></div> : !isStreaming ? <div className="i-ph:arrow-right"></div> : <div className="i-ph:stop-circle-bold"></div>}
+            {fixBug
+              ? <div className="i-ph:bug-fill"></div>
+              : !isStreaming
+                ? <div className="i-ph:hand-fill"></div>
+                : <div className="i-ph:stop-circle-bold"></div>}
           </div>
         </motion.button>
       ) : null}
diff --git a/app/components/workbench/Preview.tsx b/app/components/workbench/Preview.tsx
index 753a0640b..d1de04bae 100644
--- a/app/components/workbench/Preview.tsx
+++ b/app/components/workbench/Preview.tsx
@@ -127,6 +127,8 @@ export const Preview = memo(() => {
     if (iframeRef.current) {
       iframeRef.current.src = iframeRef.current.src;
     }
+    setIsSelectionMode(false);
+    setSelectionPoint(null);
   };
 
   const toggleFullscreen = async () => {
@@ -257,8 +259,9 @@ 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:cursor-click"
-          onClick={() => setIsSelectionMode(!isSelectionMode)}
+          icon="i-ph:bug-beetle"
+          title="Point to Bug"
+          onClick={() => { setSelectionPoint(null); setIsSelectionMode(!isSelectionMode); }}
           className={isSelectionMode ? 'bg-bolt-elements-background-depth-3' : ''}
         />
         <div