From b40e8be7c84d3557cf566e0dc83057eb34b71c25 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Tue, 14 Apr 2026 07:53:23 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=96=BC=EF=B8=8F=20fix:=20Hide=20Duplicate?=
 =?UTF-8?q?=20Image=20Placeholder=20During=20Image=20Generation=20(#12654)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: Hide duplicate image placeholder during image generation

* test: Update OpenAIImageGen tests for conditional Image rendering
---
 .../Parts/OpenAIImageGen/OpenAIImageGen.tsx      | 16 +++++++++-------
 .../Content/__tests__/OpenAIImageGen.test.tsx    | 12 ++++++------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
index f47c9c56c3..8e1279cf3e 100644
--- a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
@@ -238,13 +238,15 @@ export default function OpenAIImageGen({
                 height={dimensions.height}
               />
             )}
-            <Image
-              altText={filename}
-              imagePath={filepath ?? ''}
-              width={Number(dimensions.width?.split('px')[0])}
-              height={Number(dimensions.height?.split('px')[0])}
-              args={parsedArgs}
-            />
+            {filepath && (
+              <Image
+                altText={filename}
+                imagePath={filepath}
+                width={Number(dimensions.width?.split('px')[0])}
+                height={Number(dimensions.height?.split('px')[0])}
+                args={parsedArgs}
+              />
+            )}
           </div>
         </div>
       )}
diff --git a/client/src/components/Chat/Messages/Content/__tests__/OpenAIImageGen.test.tsx b/client/src/components/Chat/Messages/Content/__tests__/OpenAIImageGen.test.tsx
index 188dff5a09..da143c862b 100644
--- a/client/src/components/Chat/Messages/Content/__tests__/OpenAIImageGen.test.tsx
+++ b/client/src/components/Chat/Messages/Content/__tests__/OpenAIImageGen.test.tsx
@@ -62,13 +62,13 @@ describe('OpenAIImageGen', () => {
     jest.useRealTimers();
   });
 
-  describe('image preloading', () => {
-    it('keeps Image mounted during generation (progress < 1)', () => {
+  describe('image visibility', () => {
+    it('hides Image during generation when no filepath exists', () => {
       render(<OpenAIImageGen {...defaultProps} initialProgress={0.5} />);
-      expect(screen.getByTestId('image-component')).toBeInTheDocument();
+      expect(screen.queryByTestId('image-component')).not.toBeInTheDocument();
     });
 
-    it('shows Image when progress >= 1', () => {
+    it('shows Image when filepath is available', () => {
       render(
         <OpenAIImageGen
           {...defaultProps}
@@ -127,7 +127,7 @@ describe('OpenAIImageGen', () => {
 
     it('handles invalid JSON args gracefully', () => {
       render(<OpenAIImageGen {...defaultProps} args="invalid json" />);
-      expect(screen.getByTestId('image-component')).toBeInTheDocument();
+      expect(screen.getByTestId('progress-text')).toBeInTheDocument();
     });
 
     it('handles object args', () => {
@@ -137,7 +137,7 @@ describe('OpenAIImageGen', () => {
           args={{ prompt: 'a dog', quality: 'low', size: '512x512' }}
         />,
       );
-      expect(screen.getByTestId('image-component')).toBeInTheDocument();
+      expect(screen.getByTestId('progress-text')).toBeInTheDocument();
     });
   });