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

feat: Add PlaygroundButton component to flow toolbar (#4712)

Browse source 
* ✨ (playground-button.tsx): Add a new PlaygroundButton component to the flowToolbarComponent to handle the display of the Playground button based on the presence of Chat Input or Chat Output components.
📝 (index.tsx): Import and use the PlaygroundButton component in the FlowToolbar component to replace the previous implementation of the Playground button display.
🔧 (applies.css): Add styling for the playground-btn-flow-toolbar class to ensure consistent styling for the Playground button in the toolbar.

* 📝 (playground-button.tsx): update import path for IOModal to point to the newModal file instead of the old one
This commit is contained in:
Cristhian Zanforlin Lousa 2024-11-22 12:30:38 -03:00 • committed by GitHub
commit 5ed32cb573
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 61 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/frontend/src/components/flowToolbarComponent/components/playground-button.tsx Normal file
View file

@ -0,0 +1,50 @@
import ForwardedIconComponent from "@/components/genericIconComponent";
import ShadTooltip from "@/components/shadTooltipComponent";
import IOModal from "@/modals/IOModal/newModal";
const PlaygroundButton = ({ hasIO, open, setOpen, canvasOpen }) => {
const PlayIcon = () => (
<ForwardedIconComponent name="Play" className="h-4 w-4 transition-all" />
);
const ButtonLabel = () => <span className="hidden md:block">Playground</span>;
const ActiveButton = () => (
<div
data-testid="playground-btn-flow-io"
className="playground-btn-flow-toolbar hover:bg-accent"
>
<PlayIcon />
<ButtonLabel />
</div>
);
const DisabledButton = () => (
<div
className="playground-btn-flow-toolbar cursor-not-allowed text-muted-foreground duration-150"
data-testid="playground-btn-flow"
>
<PlayIcon />
<ButtonLabel />
</div>
);
return hasIO ? (
<IOModal
open={open}
setOpen={setOpen}
disable={!hasIO}
canvasOpen={canvasOpen}
>
<ActiveButton />
</IOModal>
) : (
<ShadTooltip content="Add a Chat Input or Chat Output to use the playground">
<div>
<DisabledButton />
</div>
</ShadTooltip>
);
};
export default PlaygroundButton;

39
src/frontend/src/components/flowToolbarComponent/index.tsx
View file

@ -15,6 +15,7 @@ import { useShortcutsStore } from "../../stores/shortcuts";
import { useStoreStore } from "../../stores/storeStore";
import { classNames, isThereModal } from "../../utils/utils";
import ForwardedIconComponent from "../genericIconComponent";
import PlaygroundButton from "./components/playground-button";
export default function FlowToolbar(): JSX.Element {
const preventDefault = true;
@ -125,38 +126,12 @@ export default function FlowToolbar(): JSX.Element {
>
<div className="flex gap-1.5">
<div className="flex h-full w-full gap-1.5 rounded-sm transition-all">
{hasIO ? (
<IOModal
open={open}
setOpen={setOpen}
disable={!hasIO}
canvasOpen
>
<div
data-testid="playground-btn-flow-io"
className="relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold transition-all duration-500 ease-in-out hover:bg-accent"
>
<ForwardedIconComponent
name="Play"
className={"h-4 w-4 transition-all"}
/>
<span className="hidden md:block">Playground</span>
</div>
</IOModal>
) : (
<ShadTooltip content="Add a Chat Input or Chat Output to use the playground">
<div
className={`relative inline-flex h-8 w-full cursor-not-allowed items-center justify-center gap-1 px-5 py-3 text-sm font-semibold text-muted-foreground transition-all duration-150 ease-in-out`}
data-testid="playground-btn-flow"
>
<ForwardedIconComponent
name="BotMessageSquareIcon"
className={"h-5 w-5 transition-all"}
/>
<span className="hidden md:block">Playground</span>
</div>
</ShadTooltip>
)}
<PlaygroundButton
hasIO={hasIO}
open={open}
setOpen={setOpen}
canvasOpen
/>
</div>
{ENABLE_API && (
<>

4
src/frontend/src/style/applies.css
View file

@ -1268,6 +1268,10 @@
.toolbar-wrapper {
@apply flex h-10 items-center gap-1 rounded-xl border border-border bg-background p-1 shadow-sm;
}
.playground-btn-flow-toolbar {
@apply relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold transition-all duration-500 ease-in-out;
}
}
/* Gradient background */