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

Refactor: flow toolbar buttons disable intead of dissapear

Browse source
This commit is contained in:
igorrCarvalho 2024-03-06 18:06:52 -03:00
commit 0f45a09494
4 changed files with 33 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/frontend/src/App.css
View file

@ -97,4 +97,5 @@ body {
.custom-hover:hover {
background-color: rgba(99, 102, 241, 0.1); /* Medium indigo color with 20% opacity */
}
}

8
src/frontend/src/components/IOview/index.tsx
View file

@ -20,7 +20,12 @@ import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
export default function IOView({ children, open, setOpen }): JSX.Element {
export default function IOView({ children, open, setOpen, disable }: {
children: JSX.Element;
open: boolean;
setOpen: (open: boolean) => void;
disable?: boolean;
}): JSX.Element {
const inputs = useFlowStore((state) => state.inputs).filter(
(input) => input.type !== "ChatInput"
);
@ -98,6 +103,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
size={haveChat ? (selectedTab === 0 ? "large-thin" : "large") : "small"}
open={open}
setOpen={setOpen}
disable={disable}
>
<BaseModal.Trigger>{children}</BaseModal.Trigger>
{/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}

42
src/frontend/src/components/chatComponent/index.tsx
View file

@ -51,9 +51,9 @@ export default function FlowToolbar({ flow }: ChatType): JSX.Element {
<button
disabled={!hasApiKey || !validApiKey || !hasStore}
className={classNames(
"relative inline-flex w-full h-full items-center justify-center hover:bg-hover bg-muted hover:bg-background px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-[4px] text-sm font-semibold",
"relative inline-flex w-full h-full items-center justify-center hover:bg-hover bg-muted hover:bg-background px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-[4px] text-sm font-semibold ",
!hasApiKey || !validApiKey || !hasStore
? "button-disable cursor-default text-muted-foreground"
? " button-disable text-muted-foreground "
: ""
)}
>
@ -87,14 +87,14 @@ export default function FlowToolbar({ flow }: ChatType): JSX.Element {
>
<div
className={
"shadow-round-btn-shadow hover:shadow-round-btn-shadow message-button-position flex items-center justify-center rounded-sm bg-muted shadow-md transition-all cursor-pointer gap-7 border"
"shadow-round-btn-shadow hover:shadow-round-btn-shadow message-button-position flex items-center justify-center rounded-sm bg-muted shadow-md transition-all gap-7 border"
}
>
<div className="flex">
<div className="flex gap-1 text-medium-indigo rounded-sm transition-all w-full h-full">
{hasIO && (
<IOView open={open} setOpen={setOpen}>
<div className="relative inline-flex w-full items-center justify-center hover:bg-hover transition-all duration-500 ease-in-out px-5 py-3 text-medium-indigo ease-in-out gap-1 text-sm font-semibold">
{hasIO ? (
<IOView open={open} setOpen={setOpen} disable={!hasIO}>
<div className="relative inline-flex w-full items-center justify-center hover:bg-hover transition-all duration-500 ease-in-out px-5 py-3 text-medium-indigo ease-in-out gap-1 text-sm font-semibold transition-all">
<ForwardedIconComponent
name="Zap"
className={"message-button-icon h-5 w-5 transition-all"}
@ -102,14 +102,20 @@ export default function FlowToolbar({ flow }: ChatType): JSX.Element {
Run
</div>
</IOView>
) : (
<div className={`relative inline-flex w-full items-center justify-center transition-all duration-500 ease-in-out px-5 py-3 text-muted-foreground ease-in-out gap-1 text-sm font-semibold cursor-not-allowed`}>
<ForwardedIconComponent
name="Zap"
className={"message-button-icon h-5 w-5 transition-all fill-muted-foreground stroke-muted-foreground"}
/>
Run
</div>
)}
</div>
{hasIO && (
<div>
<Separator orientation="vertical" />
</div>
)}
<div className="flex items-center gap-2">
<div>
<Separator orientation="vertical" />
</div>
<div className="flex items-center gap-2 cursor-pointer">
{currentFlow && currentFlow.data && (
<ApiModal flow={currentFlow}>
<div className={classNames("relative inline-flex w-full items-center justify-center hover:bg-hover px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-1 text-sm font-semibold")}>
@ -122,15 +128,11 @@ export default function FlowToolbar({ flow }: ChatType): JSX.Element {
</ApiModal>
)}
</div>
{hasStore && validApiKey && (
<div>
<Separator orientation="vertical" />
</div>
)}
<div>
<Separator orientation="vertical" />
</div>
<div className="flex items-center gap-2">
{hasStore && validApiKey && (
<div className="side-bar-button">{ModalMemo}</div>
)}
<div className={`side-bar-button ${!hasApiKey || !validApiKey || !hasStore ? " cursor-not-allowed" : " cursor-pointer"}`}>{ModalMemo}</div>
</div>
</div>
</div>

3
src/frontend/src/style/index.css
View file

@ -51,7 +51,7 @@
--component-icon: #d8598a;
--flow-icon: #2f67d0;
--hover: #F2F4F5;
--disabled-run: #6366f1;
/* Colors that are shared in dark and light mode */
@ -73,6 +73,7 @@
--foreground: 213 31% 80%; /* hsl(213 31% 91%) */
--ice: #60A5FA;
--hover: #1A202E;
--disabled-run: #6366f1;
--muted: 223 27% 11%; /* hsl(223 27% 11%) */
--muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */