From 823b9448d3b009faefaf983ba2179902e0016e77 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 9 Apr 2025 17:19:19 -0300
Subject: [PATCH] Fix: Add ENABLE_IMAGE_ON_PLAYGROUND feature flag to control
 image upload functionality in playground environment (#7490)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ (frontend): introduce ENABLE_IMAGE_ON_PLAYGROUND feature flag to control image functionality on playground
📝 (frontend): update feature-flags.ts to include ENABLE_IMAGE_ON_PLAYGROUND flag
🔧 (frontend): update input-wrapper.tsx, use-drag-and-drop.ts, and chat-view.tsx to conditionally enable image functionality based on ENABLE_IMAGE_ON_PLAYGROUND flag

Co-authored-by: Mike Fortman <michael.fortman@datastax.com>
---
 src/frontend/src/customization/feature-flags.ts     |  1 +
 .../chatView/chatInput/components/input-wrapper.tsx | 13 ++++++++-----
 .../chatView/chatInput/hooks/use-drag-and-drop.ts   |  4 ++++
 .../components/chatView/components/chat-view.tsx    |  6 ++++++
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/customization/feature-flags.ts b/src/frontend/src/customization/feature-flags.ts
index 83b2e63bb..8da0a0bfe 100644
--- a/src/frontend/src/customization/feature-flags.ts
+++ b/src/frontend/src/customization/feature-flags.ts
@@ -12,3 +12,4 @@ export const ENABLE_FILE_MANAGEMENT = true;
 export const ENABLE_PUBLISH = true;
 export const ENABLE_WIDGET = true;
 export const ENABLE_VOICE_ASSISTANT = true;
+export const ENABLE_IMAGE_ON_PLAYGROUND = true;
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/input-wrapper.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/input-wrapper.tsx
index 32fa031a3..4f2d517da 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/input-wrapper.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/input-wrapper.tsx
@@ -1,4 +1,7 @@
-import { ENABLE_VOICE_ASSISTANT } from "@/customization/feature-flags";
+import {
+  ENABLE_IMAGE_ON_PLAYGROUND,
+  ENABLE_VOICE_ASSISTANT,
+} from "@/customization/feature-flags";
 import { FilePreviewType } from "@/types/components";
 import React from "react";
 import {
@@ -80,16 +83,16 @@ const InputWrapper: React.FC<InputWrapperProps> = ({
           ))}
         </div>
         <div className="flex w-full items-end justify-between">
-          {!playgroundPage && (
-            <div className={isBuilding ? "cursor-not-allowed" : ""}>
+          <div className={isBuilding ? "cursor-not-allowed" : ""}>
+            {!playgroundPage && ENABLE_IMAGE_ON_PLAYGROUND && (
               <UploadFileButton
                 isBuilding={isBuilding}
                 fileInputRef={fileInputRef}
                 handleFileChange={handleFileChange}
                 handleButtonClick={handleButtonClick}
               />
-            </div>
-          )}
+            )}
+          </div>
           <div className="flex items-center gap-2">
             {ENABLE_VOICE_ASSISTANT && (
               <VoiceButton toggleRecording={() => setShowAudioInput(true)} />
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.ts b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.ts
index e6a2af27a..b8c137ef1 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.ts
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.ts
@@ -1,5 +1,8 @@
+import { ENABLE_IMAGE_ON_PLAYGROUND } from "@/customization/feature-flags";
+
 const useDragAndDrop = (setIsDragging: (value: boolean) => void) => {
   const dragOver = (e) => {
+    if (!ENABLE_IMAGE_ON_PLAYGROUND) return;
     e.preventDefault();
     if (e.dataTransfer.types.some((type) => type === "Files")) {
       setIsDragging(true);
@@ -7,6 +10,7 @@ const useDragAndDrop = (setIsDragging: (value: boolean) => void) => {
   };
 
   const dragEnter = (e) => {
+    if (!ENABLE_IMAGE_ON_PLAYGROUND) return;
     if (e.dataTransfer.types.some((type) => type === "Files")) {
       setIsDragging(true);
     }
diff --git a/src/frontend/src/modals/IOModal/components/chatView/components/chat-view.tsx b/src/frontend/src/modals/IOModal/components/chatView/components/chat-view.tsx
index 08f715271..5a22b6b62 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/components/chat-view.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/components/chat-view.tsx
@@ -1,5 +1,6 @@
 import LangflowLogo from "@/assets/LangflowLogo.svg?react";
 import { TextEffectPerChar } from "@/components/ui/textAnimation";
+import { ENABLE_IMAGE_ON_PLAYGROUND } from "@/customization/feature-flags";
 import { track } from "@/customization/utils/analytics";
 import { useMessagesStore } from "@/stores/messagesStore";
 import { useUtilityStore } from "@/stores/utilityStore";
@@ -150,7 +151,12 @@ export default function ChatView({
   const { dragOver, dragEnter, dragLeave } = useDragAndDrop(setIsDragging);
 
   const onDrop = (e) => {
+    if (!ENABLE_IMAGE_ON_PLAYGROUND) {
+      e.stopPropagation();
+      return;
+    }
     e.preventDefault();
+    e.stopPropagation();
     if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
       handleFiles(e.dataTransfer.files);
       e.dataTransfer.clearData();