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

Feat: Remove buttons from sideBar and create flow toolbar (run/share/api)

Browse source
This commit is contained in:
igorrCarvalho 2024-03-06 14:15:59 -03:00
commit c7d0444adf
11 changed files with 179 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -90,3 +90,11 @@ body {
.jv-indent::-webkit-scrollbar-thumb:hover {
background-color: #bbb !important;
}
.custom-hover {
transition: background-color 0.5s ease;
}
.custom-hover:hover {
background-color: rgba(99, 102, 241, 0.1); /* Medium indigo color with 20% opacity */
}

14
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -509,10 +509,10 @@ export default function GenericNode({
) : !validationStatus ? (
<span className="flex">{STATUS_BUILD}</span>
) : (
<div className="max-h-100">
<div className="max-h-100 p-2">
<div>
{lastRunTime && (
<div className="justify-left flex text-muted-foreground">
<div className="justify-left flex text-muted-foreground font-normal">
<div>{RUN_TIMESTAMP_PREFIX}</div>
<div className="ml-1 text-status-blue">
{lastRunTime}
@ -520,19 +520,19 @@ export default function GenericNode({
</div>
)}
</div>
<div className="justify-left flex text-muted-foreground">
<div className="justify-left flex text-muted-foreground font-normal">
<div>Duration:</div>
<div className="ml-1 text-status-blue">
<div className="ml-1 text-status-blue mb-3">
{validationStatus?.data.duration}
</div>
</div>
<hr />
<span className="flex justify-center text-muted-foreground ">
<span className="flex justify-center text-muted-foreground mt-2 mb-2 font-semibold">
Output
</span>
<div className="max-h-96 overflow-auto custom-scroll">
<div className="max-h-96 overflow-auto custom-scroll font-normal">
{validationString.split("\n").map((line, index) => (
<div key={index}>{line}</div>
<div className="font-normal" key={index}>{line}</div>
))}
</div>
</div>

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

@ -1,14 +1,26 @@
import { useEffect, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import useFlowStore from "../../stores/flowStore";
import { ChatType } from "../../types/chat";
import IOView from "../IOview";
import ChatTrigger from "../ViewTriggers/chat";
import { Transition } from "@headlessui/react";
import ForwardedIconComponent from "../genericIconComponent";
import { Separator } from "../ui/separator";
import ShareModal from "../../modals/shareModal";
import { useStoreStore } from "../../stores/storeStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { classNames } from "../../utils/utils";
import ApiModal from "../../modals/ApiModal";
export default function Chat({ flow }: ChatType): JSX.Element {
const [open, setOpen] = useState(false);
const flowState = useFlowStore((state) => state.flowState);
const nodes = useFlowStore((state) => state.nodes);
const hasIO = useFlowStore((state) => state.hasIO);
const hasStore = useStoreStore((state) => state.hasStore);
const validApiKey = useStoreStore((state) => state.validApiKey);
const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
const hasApiKey = useStoreStore((state) => state.hasApiKey);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
@ -29,16 +41,100 @@ export default function Chat({ flow }: ChatType): JSX.Element {
const prevNodesRef = useRef<any[] | undefined>();
const ModalMemo = useMemo(
() => (
<ShareModal
is_component={false}
component={currentFlow!}
disabled={!hasApiKey || !validApiKey || !hasStore}
>
<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",
!hasApiKey || !validApiKey || !hasStore
? "button-disable cursor-default text-muted-foreground"
: ""
)}
>
<ForwardedIconComponent
name="Share3"
className={classNames(
"-m-0.5 -ml-1 h-6 w-6",
!hasApiKey || !validApiKey || !hasStore
? "extra-side-bar-save-disable"
: ""
)}
/>
Share
</button>
</ShareModal>
),
[hasApiKey, validApiKey, currentFlow, hasStore]
);
return (
<>
<div className="flex flex-col">
{/* <BuildTrigger open={open} flow={flow} /> */}
{hasIO && (
<Transition
show={true}
appear={true}
enter="transition ease-out duration-300"
enterFrom="translate-y-96"
enterTo="translate-y-0"
leave="transition ease-in duration-300"
leaveFrom="translate-y-0"
leaveTo="translate-y-96"
>
<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"
}
>
<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}>
<ChatTrigger />
<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">
<ForwardedIconComponent
name="Zap"
className={"message-button-icon h-5 w-5 transition-all"}
/>
Run
</div>
</IOView>
)}
</div>
{hasIO && (
<div>
<Separator orientation="vertical" />
</div>
)}
<div className="flex items-center gap-2">
{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")}>
<ForwardedIconComponent
name="Code2"
className={" h-5 w-5"}
/>
API
</div>
</ApiModal>
)}
</div>
{hasStore && validApiKey && (
<div>
<Separator orientation="vertical" />
</div>
)}
<div className="flex items-center gap-2">
{hasStore && validApiKey && (
<div className="side-bar-button">{ModalMemo}</div>
)}
</div>
</div>
</div>
</Transition>
</>
);
}

51
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -1,4 +1,4 @@
import { useState } from "react";
import { useMemo, useState } from "react";
import {
DropdownMenu,
DropdownMenuContent,
@ -14,10 +14,13 @@ import FlowSettingsModal from "../../../../modals/flowSettingsModal";
import useAlertStore from "../../../../stores/alertStore";
import useFlowStore from "../../../../stores/flowStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { cn } from "../../../../utils/utils";
import { classNames, cn } from "../../../../utils/utils";
import ShadTooltip from "../../../ShadTooltipComponent";
import IconComponent from "../../../genericIconComponent";
import { Button } from "../../../ui/button";
import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
import ExportModal from "../../../../modals/exportModal";
import { useStoreStore } from "../../../../stores/storeStore";
export const MenuBar = ({
removeFunction,
@ -32,9 +35,27 @@ export const MenuBar = ({
const saveLoading = useFlowsManagerStore((state) => state.saveLoading);
const [openSettings, setOpenSettings] = useState(false);
const n = useFlowStore((state) => state.nodes);
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const hasApiKey = useStoreStore((state) => state.hasApiKey);
const validApiKey = useStoreStore((state) => state.validApiKey);
const navigate = useNavigate();
const isBuilding = useFlowStore((state) => state.isBuilding);
const [myOpen, mySetOpen] = useState<boolean>(false)
const ExportMemo = useMemo(
() => (
<ExportModal
myOpen={myOpen}
mySetOpen={mySetOpen}
>
<div className="flex items-center">
<IconComponent name="FileDown" className="header-menu-options" />
Export
</div>
</ExportModal>
),
[]
);
function handleAddFlow() {
try {
@ -100,6 +121,30 @@ export const MenuBar = ({
/>
Settings
</DropdownMenuItem>
<DropdownMenuItem
className="cursor-pointer"
onClick={() => {
uploadFlow({ newProject: false, isComponent: false }).catch(
(error) => {
setErrorData({
title: UPLOAD_ERROR_ALERT,
list: [error],
});
}
);
}}
>
<IconComponent name="FileUp" className="header-menu-options " />
Import
</DropdownMenuItem>
{(!hasApiKey || !validApiKey) && (
<ExportModal>
<div className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer">
<IconComponent name="FileDown" className="header-menu-options" />
Export
</div>
</ExportModal>
)}
<DropdownMenuItem
onClick={() => {

6
src/frontend/src/modals/exportModal/index.tsx
View file

@ -16,7 +16,7 @@ import { downloadFlow, removeApiKeys } from "../../utils/reactflowUtils";
import BaseModal from "../baseModal";
const ExportModal = forwardRef(
(props: { children: ReactNode }, ref): JSX.Element => {
(props: { children: ReactNode, myOpen?: boolean, mySetOpen?: (open: boolean) => void }, ref): JSX.Element => {
const version = useDarkStore((state) => state.version);
const setNoticeData = useAlertStore((state) => state.setNoticeData);
const [checked, setChecked] = useState(true);
@ -29,6 +29,10 @@ const ExportModal = forwardRef(
const [description, setDescription] = useState(currentFlow!.description);
const [open, setOpen] = useState(false);
useEffect(() => {
console.log(open)
}, [open])
return (
<BaseModal size="smaller-h-full" open={open} setOpen={setOpen}>
<BaseModal.Trigger asChild>{props.children}</BaseModal.Trigger>

62
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -235,66 +235,6 @@ export default function ExtraSidebar(): JSX.Element {
return (
<div className="side-bar-arrangement">
<div className="side-bar-buttons-arrangement">
{hasStore && validApiKey && (
<ShadTooltip
content={
!hasApiKey || !validApiKey
? "Please review your API key."
: "Share"
}
side="top"
styleClasses="cursor-default"
>
<div className="side-bar-button">{ModalMemo}</div>
</ShadTooltip>
)}
<div className="side-bar-button">
<ShadTooltip content="Import" side="top">
<button
className="extra-side-bar-buttons"
onClick={() => {
uploadFlow({ newProject: false, isComponent: false }).catch(
(error) => {
setErrorData({
title: UPLOAD_ERROR_ALERT,
list: [error],
});
}
);
}}
>
<IconComponent name="FileUp" className="side-bar-button-size " />
</button>
</ShadTooltip>
</div>
{(!hasApiKey || !validApiKey) && (
<ShadTooltip
content="Export"
side="top"
styleClasses="cursor-default"
>
<div className="side-bar-button">{ExportMemo}</div>
</ShadTooltip>
)}
<ShadTooltip content={"Code"} side="top">
<div className="side-bar-button">
{currentFlow && currentFlow.data && (
<ApiModal flow={currentFlow}>
<button className={"w-full "}>
<div className={classNames("extra-side-bar-buttons")}>
<IconComponent
name="Code2"
className={"side-bar-button-size"}
/>
</div>
</button>
</ApiModal>
)}
</div>
</ShadTooltip>
</div>
<Separator />
<div className="side-bar-search-div-placement">
<Input
onFocusCapture={() => handleBlur()}
@ -318,7 +258,7 @@ export default function ExtraSidebar(): JSX.Element {
/>
</div>
</div>
<Separator />
<div className="side-bar-components-div-arrangement">
{Object.keys(dataFilter)
.sort(sortKeys)

1
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
View file

@ -43,6 +43,7 @@ export const SidebarDraggableComponent = forwardRef(
const deleteComponent = useFlowsManagerStore(
(state) => state.deleteComponent
);
console.log(display_name)
const version = useDarkStore((state) => state.version);
const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
const popoverRef = useRef<HTMLDivElement>(null);

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

@ -114,7 +114,7 @@
@apply pointer-events-none;
}
.extra-side-bar-buttons {
@apply relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out;
@apply relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground transition-all duration-500 ease-in-out;
}
.extra-side-bar-buttons:hover {
@apply hover:bg-muted;

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

@ -50,6 +50,9 @@
--component-icon: #d8598a;
--flow-icon: #2f67d0;
--hover: #F2F4F5;
/* Colors that are shared in dark and light mode */
--blur-shared: #151923de;
@ -69,6 +72,7 @@
--background: 224 35% 7.5%; /* hsl(224 40% 10%) */
--foreground: 213 31% 80%; /* hsl(213 31% 91%) */
--ice: #60A5FA;
--hover: #1A202E;
--muted: 223 27% 11%; /* hsl(223 27% 11%) */
--muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */

2
src/frontend/src/utils/styleUtils.ts
View file

@ -32,6 +32,7 @@ import {
Cpu,
Database,
Delete,
Dot,
Download,
DownloadCloud,
Edit,
@ -475,4 +476,5 @@ export const nodeIconsLucide: iconsType = {
Bot,
Delete,
Command,
Dot,
};

2
src/frontend/tailwind.config.js
View file

@ -88,7 +88,7 @@ module.exports = {
"chat-bot-icon": "var(--chat-bot-icon)",
"chat-user-icon": "var(--chat-user-icon)",
"ice": "var(--ice)",
hover: "var(--hover)",
white: "var(--white)",
border: "hsl(var(--border))",
input: "hsl(var(--input))",