limit images to 5

Significant-Gravitas · Dec 19, 2024 · 8a0e666 · 8a0e666
1 parent ee1a918
commit 8a0e666
Showing 1 changed file with 36 additions and 26 deletions.
diff --git a/autogpt_platform/frontend/src/components/agptui/PublishAgentSelectInfo.tsx b/autogpt_platform/frontend/src/components/agptui/PublishAgentSelectInfo.tsx
@@ -61,11 +61,10 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
   );
   const [slug, setSlug] = React.useState(initialData?.slug || "");
   const thumbnailsContainerRef = React.useRef<HTMLDivElement | null>(null);
-
   React.useEffect(() => {
     if (initialData) {
       setAgentId(initialData.agent_id);
-      setImages(initialData.additionalImages || []);
+      setImagesWithValidation(initialData.additionalImages || []);
       setSelectedImage(initialData.thumbnailSrc || null);
       setTitle(initialData.title);
       setSubheader(initialData.subheader);
@@ -76,10 +75,18 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
     }
   }, [initialData]);
 
+  const setImagesWithValidation = (newImages: string[]) => {
+    // Remove duplicates
+    const uniqueImages = Array.from(new Set(newImages));
+    // Keep only first 5 images
+    const limitedImages = uniqueImages.slice(0, 5);
+    setImages(limitedImages);
+  };
+
   const handleRemoveImage = (indexToRemove: number) => {
     const newImages = [...images];
     newImages.splice(indexToRemove, 1);
-    setImages(newImages);
+    setImagesWithValidation(newImages);
     if (newImages[indexToRemove] === selectedImage) {
       setSelectedImage(newImages[0] || null);
     }
@@ -89,7 +96,10 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
       console.log("images", newImages);
     }
   };
+
   const handleAddImage = async () => {
+    if (images.length >= 5) return;
+
     const input = document.createElement("input");
     input.type = "file";
     input.accept = "image/*";
@@ -117,11 +127,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
         "$1",
       );
 
-      setImages((prev) => {
-        const newImages = [...prev, imageUrl];
-        console.log("Added image. Images now:", newImages);
-        return newImages;
-      });
+      setImagesWithValidation([...images, imageUrl]);
       if (!selectedImage) {
         setSelectedImage(imageUrl);
       }
@@ -133,7 +139,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
   const [isGenerating, setIsGenerating] = React.useState(false);
 
   const handleGenerateImage = async () => {
-    if (isGenerating) return;
+    if (isGenerating || images.length >= 5) return;
 
     setIsGenerating(true);
     try {
@@ -143,7 +149,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
       }
       const { image_url } = await api.generateStoreSubmissionImage(agentId);
       console.log("image_url", image_url);
-      setImages(prev => [...prev, image_url]);
+      setImagesWithValidation([...images, image_url]);
     } catch (error) {
       console.error("Failed to generate image:", error);
     } finally {
@@ -307,19 +313,21 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
                     </button>
                   </div>
                 ))}
-                <Button
-                  onClick={handleAddImage}
-                  variant="ghost"
-                  className="flex h-[70px] w-[100px] flex-col items-center justify-center rounded-md bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600"
-                >
-                  <IconPlus
-                    size="lg"
-                    className="text-neutral-600 dark:text-neutral-300"
-                  />
-                  <span className="mt-1 font-['Geist'] text-xs font-normal text-neutral-600 dark:text-neutral-300">
-                    Add image
-                  </span>
-                </Button>
+                {images.length < 5 && (
+                  <Button
+                    onClick={handleAddImage}
+                    variant="ghost"
+                    className="flex h-[70px] w-[100px] flex-col items-center justify-center rounded-md bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-700 dark:hover:bg-neutral-600"
+                  >
+                    <IconPlus
+                      size="lg"
+                      className="text-neutral-600 dark:text-neutral-300"
+                    />
+                    <span className="mt-1 font-['Geist'] text-xs font-normal text-neutral-600 dark:text-neutral-300">
+                      Add image
+                    </span>
+                  </Button>
+                )}
               </>
             )}
           </div>
@@ -336,11 +344,13 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
             <Button
               variant="default"
               size="sm"
-              className="bg-neutral-800 text-white hover:bg-neutral-900 dark:bg-neutral-600 dark:hover:bg-neutral-500"
+              className={`bg-neutral-800 text-white hover:bg-neutral-900 dark:bg-neutral-600 dark:hover:bg-neutral-500 ${
+                images.length >= 5 ? 'opacity-50 cursor-not-allowed' : ''
+              }`}
               onClick={handleGenerateImage}
-              disabled={isGenerating}
+              disabled={isGenerating || images.length >= 5}
             >
-              {isGenerating ? 'Generating...' : 'Generate'}
+              {isGenerating ? 'Generating...' : images.length >= 5 ? 'Max images reached' : 'Generate'}
             </Button>
           </div>
         </div>