jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

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

Browse source 
✨ (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>
This commit is contained in:
Cristhian Zanforlin Lousa 2025-04-09 17:19:19 -03:00 • committed by GitHub
commit 823b9448d3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 19 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/frontend/src/customization/feature-flags.ts
View file

@ -12,3 +12,4 @@ export const ENABLE_FILE_MANAGEMENT = true;
export const ENABLE_PUBLISH = true; export const ENABLE_PUBLISH = true;
export const ENABLE_WIDGET = true; export const ENABLE_WIDGET = true;
export const ENABLE_VOICE_ASSISTANT = true; export const ENABLE_VOICE_ASSISTANT = true;
export const ENABLE_IMAGE_ON_PLAYGROUND = true;

13
src/frontend/src/modals/IOModal/components/chatView/chatInput/components/input-wrapper.tsx
View file

@ -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 { FilePreviewType } from "@/types/components";
import React from "react"; import React from "react";
import { import {
@ -80,16 +83,16 @@ const InputWrapper: React.FC<InputWrapperProps> = ({
))} ))}
</div> </div>
<div className="flex w-full items-end justify-between"> <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 <UploadFileButton
isBuilding={isBuilding} isBuilding={isBuilding}
fileInputRef={fileInputRef} fileInputRef={fileInputRef}
handleFileChange={handleFileChange} handleFileChange={handleFileChange}
handleButtonClick={handleButtonClick} handleButtonClick={handleButtonClick}
/> />
</div> )}
)} </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{ENABLE_VOICE_ASSISTANT && ( {ENABLE_VOICE_ASSISTANT && (
<VoiceButton toggleRecording={() => setShowAudioInput(true)} /> <VoiceButton toggleRecording={() => setShowAudioInput(true)} />

4
src/frontend/src/modals/IOModal/components/chatView/chatInput/hooks/use-drag-and-drop.ts
View file

@ -1,5 +1,8 @@
import { ENABLE_IMAGE_ON_PLAYGROUND } from "@/customization/feature-flags";
const useDragAndDrop = (setIsDragging: (value: boolean) => void) => { const useDragAndDrop = (setIsDragging: (value: boolean) => void) => {
const dragOver = (e) => { const dragOver = (e) => {
if (!ENABLE_IMAGE_ON_PLAYGROUND) return;
e.preventDefault(); e.preventDefault();
if (e.dataTransfer.types.some((type) => type === "Files")) { if (e.dataTransfer.types.some((type) => type === "Files")) {
setIsDragging(true); setIsDragging(true);
@ -7,6 +10,7 @@ const useDragAndDrop = (setIsDragging: (value: boolean) => void) => {
}; };
const dragEnter = (e) => { const dragEnter = (e) => {
if (!ENABLE_IMAGE_ON_PLAYGROUND) return;
if (e.dataTransfer.types.some((type) => type === "Files")) { if (e.dataTransfer.types.some((type) => type === "Files")) {
setIsDragging(true); setIsDragging(true);
} }

6
src/frontend/src/modals/IOModal/components/chatView/components/chat-view.tsx
View file

@ -1,5 +1,6 @@
import LangflowLogo from "@/assets/LangflowLogo.svg?react"; import LangflowLogo from "@/assets/LangflowLogo.svg?react";
import { TextEffectPerChar } from "@/components/ui/textAnimation"; import { TextEffectPerChar } from "@/components/ui/textAnimation";
import { ENABLE_IMAGE_ON_PLAYGROUND } from "@/customization/feature-flags";
import { track } from "@/customization/utils/analytics"; import { track } from "@/customization/utils/analytics";
import { useMessagesStore } from "@/stores/messagesStore"; import { useMessagesStore } from "@/stores/messagesStore";
import { useUtilityStore } from "@/stores/utilityStore"; import { useUtilityStore } from "@/stores/utilityStore";
@ -150,7 +151,12 @@ export default function ChatView({
const { dragOver, dragEnter, dragLeave } = useDragAndDrop(setIsDragging); const { dragOver, dragEnter, dragLeave } = useDragAndDrop(setIsDragging);
const onDrop = (e) => { const onDrop = (e) => {
if (!ENABLE_IMAGE_ON_PLAYGROUND) {
e.stopPropagation();
return;
}
e.preventDefault(); e.preventDefault();
e.stopPropagation();
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
handleFiles(e.dataTransfer.files); handleFiles(e.dataTransfer.files);
e.dataTransfer.clearData(); e.dataTransfer.clearData();