Update input management

weni-ai · Jan 6, 2025 · fa93122 · fa93122
1 parent 8c8a43a
commit fa93122
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 11 deletions.
diff --git a/frontend/src/components/Chat.tsx b/frontend/src/components/Chat.tsx
@@ -41,6 +41,7 @@ export function Chat({ messages, onSendMessage, isLoading }: ChatProps) {
   const [currentCatalogProducts, setCurrentCatalogProducts] = useState<Product[]>([]);
   const [selectedImage, setSelectedImage] = useState<File | null>(null);
   const [shouldClearImage, setShouldClearImage] = useState(false);
+  const [isSending, setIsSending] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const [playingAudio, setPlayingAudio] = useState<string | null>(null);
   const audioRefs = useRef<{ [key: string]: HTMLAudioElement }>({});
@@ -55,7 +56,9 @@ export function Chat({ messages, onSendMessage, isLoading }: ChatProps) {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (isLoading) return;
+    if (isLoading || isSending) return;
+
+    setIsSending(true);
 
     if (selectedImage) {
       const formData = new FormData();
@@ -84,10 +87,15 @@ export function Chat({ messages, onSendMessage, isLoading }: ChatProps) {
         }
       } catch (error) {
         console.error('Error sending image for analysis:', error);
+      } finally {
+        setIsSending(false);
       }
     } else if (input.trim()) {
       onSendMessage(input);
       setInput('');
+      setIsSending(false);
+    } else {
+      setIsSending(false);
     }
   };
 
@@ -327,6 +335,7 @@ export function Chat({ messages, onSendMessage, isLoading }: ChatProps) {
                   isLoading={isLoading} 
                   onImageSelected={handleImageSelected}
                   shouldClear={shouldClearImage}
+                  isSending={isSending}
                 />
                 <form onSubmit={handleSubmit} className="flex flex-1 gap-3">
                   <input
@@ -335,15 +344,15 @@ export function Chat({ messages, onSendMessage, isLoading }: ChatProps) {
                     onChange={(e) => setInput(e.target.value)}
                     placeholder={selectedImage ? "What would you like to know about this image?" : "Type your message..."}
                     className="flex-1 px-4 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-[#00DED2] bg-gray-50"
-                    disabled={isLoading}
+                    disabled={isLoading || isSending}
                   />
                   <button
                     type="submit"
-                    disabled={isLoading || (!input.trim() && !selectedImage)}
+                    disabled={isLoading || isSending || (!input.trim() && !selectedImage)}
                     className={`px-4 py-2 bg-gradient-to-r from-[#00DED2] to-[#00DED2]/80 text-white rounded-xl transition-all flex items-center gap-2
-                      ${(isLoading || (!input.trim() && !selectedImage)) ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-lg hover:-translate-y-0.5'}`}
+                      ${(isLoading || isSending || (!input.trim() && !selectedImage)) ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-lg hover:-translate-y-0.5'}`}
                   >
-                    <span>{isLoading ? 'Sending...' : 'Send'}</span>
+                    <span>{isLoading || isSending ? 'Sending...' : 'Send'}</span>
                     <Send className="w-4 h-4" />
                   </button>
                 </form>

diff --git a/frontend/src/components/ImageUploader.tsx b/frontend/src/components/ImageUploader.tsx
@@ -5,12 +5,13 @@ const BACKEND_URL = (window as any).configs?.VITE_API_BASE_URL || import.meta.en
 
 interface ImageUploaderProps {
   onImageAnalyzed: (text: string, imageUrl: string) => void;
-  isLoading: boolean;
   onImageSelected: (file: File | null) => void;
-  shouldClear?: boolean;
+  isLoading: boolean;
+  isSending?: boolean;
+  shouldClear: boolean;
 }
 
-export function ImageUploader({ onImageAnalyzed, isLoading, onImageSelected, shouldClear }: ImageUploaderProps) {
+export function ImageUploader({ onImageAnalyzed, onImageSelected, isLoading, isSending = false, shouldClear }: ImageUploaderProps) {
   const [selectedImage, setSelectedImage] = useState<File | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -47,13 +48,14 @@ export function ImageUploader({ onImageAnalyzed, isLoading, onImageSelected, sho
         onChange={handleImageSelect}
         className="hidden"
         ref={fileInputRef}
+        disabled={isLoading || isSending}
       />
       {!selectedImage ? (
         <button
           onClick={() => fileInputRef.current?.click()}
-          disabled={isLoading}
+          disabled={isLoading || isSending}
           className={`p-2 rounded-full transition-all ${
-            isLoading
+            isLoading || isSending
               ? 'bg-gray-200 cursor-not-allowed'
               : 'bg-[#00DED2] hover:bg-[#00DED2]/80'
           }`}
@@ -70,7 +72,12 @@ export function ImageUploader({ onImageAnalyzed, isLoading, onImageSelected, sho
             />
             <button
               onClick={clearSelectedImage}
-              className="absolute -top-2 -right-2 p-1 rounded-full bg-white shadow-md hover:bg-gray-100"
+              disabled={isLoading || isSending}
+              className={`absolute -top-2 -right-2 p-1 rounded-full bg-white shadow-md ${
+                isLoading || isSending
+                  ? 'opacity-50 cursor-not-allowed'
+                  : 'hover:bg-gray-100'
+              }`}
             >
               <X className="w-4 h-4 text-gray-600" />
             </button>