Fix: Add ENABLE_IMAGE_ON_PLAYGROUND feature flag to control image upload functionality in playground environment (#7490)

✨ (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

@@ -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;

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)} />

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);
     }

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();