Merge pull request #13 from vgcman16/codex/polish-ux-with-star-icon-and-tooltips

Improve prompt enhancer UX

app/components/chat/BaseChat.module.scss

@@ -45,3 +45,33 @@
   fill: url(#shine-gradient);
   mix-blend-mode: overlay;
 }
+
+[data-prompt-enhanced='true'] .PromptEffectLine {
+  animation: prompt-line 1s ease-out;
+}
+
+[data-prompt-enhanced='true'] .PromptShine {
+  animation: prompt-shine 1s ease-out;
+}
+
+@keyframes prompt-line {
+  from {
+    stroke-dashoffset: 100;
+    opacity: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes prompt-shine {
+  from {
+    opacity: 0;
+    transform: translateX(-20%);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}

app/components/chat/BaseChat.tsx

@@ -99,9 +99,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       providerList,
       input = '',
       enhancingPrompt,
+      promptEnhanced,
       handleInputChange,
-
-      // promptEnhanced,
       enhancePrompt,
       sendMessage,
       handleStop,
@@ -462,6 +461,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   handleStop={handleStop}
                   handleSendMessage={handleSendMessage}
                   enhancingPrompt={enhancingPrompt}
+                  promptEnhanced={promptEnhanced}
                   enhancePrompt={enhancePrompt}
                   isListening={isListening}
                   startListening={startListening}

app/components/chat/Chat.client.tsx

@@ -567,8 +567,8 @@ export const ChatImpl = memo(
             content: parsedMessages[i] || '',
           };
         })}
-        enhancePrompt={() => {
+        enhancePrompt={async () => {
-          enhancePrompt(
+          await enhancePrompt(
             input,
             (input) => {
               setInput(input);

app/components/chat/ChatBox.tsx

@@ -9,6 +9,7 @@ import FilePreview from './FilePreview';
 import { ScreenshotStateManager } from './ScreenshotStateManager';
 import { SendButton } from './SendButton.client';
 import { IconButton } from '~/components/ui/IconButton';
+import { Tooltip } from '~/components/ui/Tooltip';
 import { toast } from 'react-toastify';
 import { extractTextFromFile } from '~/utils/fileExtract';
 import { SpeechRecognitionButton } from '~/components/chat/SpeechRecognition';
@@ -56,6 +57,7 @@ interface ChatBoxProps {
   handleInputChange?: ((event: React.ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
   handleStop?: (() => void) | undefined;
   enhancingPrompt?: boolean | undefined;
+  promptEnhanced?: boolean | undefined;
   enhancePrompt?: (() => void) | undefined;
   chatMode?: 'discuss' | 'build';
   setChatMode?: (mode: 'discuss' | 'build') => void;
@@ -68,6 +70,7 @@ interface ChatBoxProps {
 export const ChatBox: React.FC<ChatBoxProps> = (props) => {
   return (
     <div
+      data-prompt-enhanced={props.promptEnhanced}
       className={classNames(
         'relative bg-bolt-elements-background-depth-2 backdrop-blur p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt',
 
@@ -274,21 +277,23 @@ export const ChatBox: React.FC<ChatBoxProps> = (props) => {
             <IconButton title="Upload file" className="transition-all" onClick={() => props.handleFileUpload()}>
               <div className="i-ph:paperclip text-xl"></div>
             </IconButton>
-            <IconButton
+            <Tooltip content="Improve your prompt for better results">
-              title="Enhance prompt"
+              <IconButton
-              disabled={props.input.length === 0 || props.enhancingPrompt}
+                title="Enhance prompt"
-              className={classNames('transition-all', props.enhancingPrompt ? 'opacity-100' : '')}
+                disabled={props.input.length === 0 || props.enhancingPrompt}
-              onClick={() => {
+                className={classNames('transition-all', props.enhancingPrompt ? 'opacity-100' : '')}
-                props.enhancePrompt?.();
+                onClick={() => {
-                toast.success('Prompt enhanced!');
+                  props.enhancePrompt?.();
-              }}
+                  toast.success('Prompt enhanced!');
-            >
+                }}
-              {props.enhancingPrompt ? (
+              >
-                <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
+                {props.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>
+                ) : (
-              )}
+                  <div className="i-bolt:stars text-xl"></div>
-            </IconButton>
+                )}
+              </IconButton>
+            </Tooltip>
 
             <SpeechRecognitionButton
               isListening={props.isListening}

app/lib/hooks/usePromptEnhancer.ts

@@ -19,7 +19,7 @@ export function usePromptEnhancer() {
     model: string,
     provider: ProviderInfo,
     apiKeys?: Record<string, string>,
-  ) => {
+  ): Promise<string> => {
     setEnhancingPrompt(true);
     setPromptEnhanced(false);
 
@@ -41,11 +41,12 @@ export function usePromptEnhancer() {
     const reader = response.body?.getReader();
 
     const originalInput = input;
+    let _input = input;
 
     if (reader) {
       const decoder = new TextDecoder();
 
-      let _input = '';
+      _input = '';
       let _error;
 
       try {
@@ -67,6 +68,7 @@ export function usePromptEnhancer() {
       } catch (error) {
         _error = error;
         setInput(originalInput);
+        _input = originalInput;
       } finally {
         if (_error) {
           logger.error(_error);
@@ -80,6 +82,8 @@ export function usePromptEnhancer() {
         });
       }
     }
+
+    return _input;
   };
 
   return { enhancingPrompt, promptEnhanced, enhancePrompt, resetEnhancer };