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

Fix formatting and remove unused code

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-03-06 14:54:39 -03:00
commit 0044622d3a
16 changed files with 162 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/src/components/AccordionComponent/index.tsx
View file

@ -50,9 +50,7 @@ export default function AccordionComponent({
{trigger} {trigger}
</AccordionTrigger> </AccordionTrigger>
<AccordionContent> <AccordionContent>
<div className="AccordionContent flex flex-col"> <div className="AccordionContent flex flex-col">{children}</div>
{children}
</div>
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>

4
src/frontend/src/components/CrashErrorComponent/index.tsx
View file

@ -26,7 +26,7 @@ export default function CrashErrorComponent({
<CardContent className="grid"> <CardContent className="grid">
<div> <div>
<p> <p>
Please report errors with detailed tracebacks on the{" "} Please report errors with detailed tracebacks on the{" "}
<a <a
href="https://github.com/logspace-ai/langflow/issues" href="https://github.com/logspace-ai/langflow/issues"
target="_blank" target="_blank"
@ -37,7 +37,7 @@ export default function CrashErrorComponent({
</a>{" "} </a>{" "}
page. page.
<br></br> <br></br>
Thank you! Thank you!
</p> </p>
</div> </div>
</CardContent> </CardContent>

77
src/frontend/src/components/NewFlowCardComponent/index.tsx
View file

@ -1,54 +1,33 @@
import { useEffect, useState } from "react";
import { getComponent, postLikeComponent } from "../../controllers/API";
import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { useStoreStore } from "../../stores/storeStore";
import { storeComponent } from "../../types/store";
import cloneFLowWithParent from "../../utils/storeUtils";
import { cn } from "../../utils/utils";
import ShadTooltip from "../ShadTooltipComponent";
import IconComponent from "../genericIconComponent";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "../ui/card";
import { FlowType } from "../../types/flow";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { cn } from "../../utils/utils";
import IconComponent from "../genericIconComponent";
import { Card, CardContent } from "../ui/card";
export default function NewFlowCardComponent({ export default function NewFlowCardComponent({}: {}) {
}: { const addFlow = useFlowsManagerStore((state) => state.addFlow);
}) { const navigate = useNavigate();
const addFlow = useFlowsManagerStore((state) => state.addFlow);
const navigate = useNavigate();
return ( return (
<Card <Card
className={cn(
className={cn( "group relative flex h-48 w-2/6 flex-col justify-between overflow-hidden transition-all hover:shadow-md"
"group relative h-48 w-2/6 flex flex-col justify-between overflow-hidden transition-all hover:shadow-md", )}
)} >
<CardContent className="flex h-full w-full items-center justify-center align-middle">
<button
onClick={() => {
addFlow(true).then((id) => {
navigate("/flow/" + id);
});
}}
> >
<CardContent className="w-full h-full flex align-middle items-center justify-center"> <IconComponent
<button onClick={() => { className={cn("h-12 w-12 text-muted-foreground")}
addFlow(true).then((id) => { name="PlusCircle"
navigate("/flow/" + id); />
}); </button>
}}> </CardContent>
<IconComponent </Card>
className={cn( );
"h-12 w-12 text-muted-foreground",
)}
name="PlusCircle"
/>
</button>
</CardContent>
</Card>
);
} }

4
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -126,7 +126,7 @@ export default function CodeTabsComponent({
<Tabs <Tabs
value={activeTab} value={activeTab}
className={ className={
"api-modal-tabs m-0 inset-0 " + "api-modal-tabs inset-0 m-0 " +
(isMessage ? "dark " : "") + (isMessage ? "dark " : "") +
(dark && isMessage ? "bg-background" : "") (dark && isMessage ? "bg-background" : "")
} }
@ -195,7 +195,7 @@ export default function CodeTabsComponent({
<SyntaxHighlighter <SyntaxHighlighter
language={tab.language} language={tab.language}
style={oneDark} style={oneDark}
className="mt-0 h-full overflow-auto custom-scroll rounded-sm text-left" className="mt-0 h-full overflow-auto rounded-sm text-left custom-scroll"
> >
{tab.code} {tab.code}
</SyntaxHighlighter> </SyntaxHighlighter>

156
src/frontend/src/components/exampleComponent/index.tsx
View file

@ -1,96 +1,88 @@
import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom";
import { getComponent, postLikeComponent } from "../../controllers/API";
import DeleteConfirmationModal from "../../modals/DeleteConfirmationModal";
import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { useStoreStore } from "../../stores/storeStore"; import { FlowType } from "../../types/flow";
import { storeComponent } from "../../types/store"; import { updateIds } from "../../utils/reactflowUtils";
import cloneFLowWithParent from "../../utils/storeUtils";
import { cn } from "../../utils/utils"; import { cn } from "../../utils/utils";
import ShadTooltip from "../ShadTooltipComponent"; import ShadTooltip from "../ShadTooltipComponent";
import IconComponent from "../genericIconComponent"; import IconComponent from "../genericIconComponent";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { import {
Card, Card,
CardDescription, CardDescription,
CardFooter, CardFooter,
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "../ui/card"; } from "../ui/card";
import { FlowType } from "../../types/flow";
import { updateIds } from "../../utils/reactflowUtils";
import { useNavigate } from "react-router-dom";
export default function CollectionCardComponent({ export default function CollectionCardComponent({
flow, flow,
}: { }: {
flow: FlowType; flow: FlowType;
authorized?: boolean; authorized?: boolean;
}) { }) {
const addFlow = useFlowsManagerStore((state) => state.addFlow); const addFlow = useFlowsManagerStore((state) => state.addFlow);
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<Card <Card
className={cn( className={cn(
"group relative h-48 w-2/6 flex flex-col justify-between overflow-hidden transition-all hover:shadow-md", "group relative flex h-48 w-2/6 flex-col justify-between overflow-hidden transition-all hover:shadow-md"
)} )}
> >
<div> <div>
<CardHeader> <CardHeader>
<div> <div>
<CardTitle className="flex w-full items-center justify-between gap-3 text-xl"> <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
{flow.icon && ( {flow.icon && (
<div className="flex-shrink-0 h-7 w-7"> <div className="h-7 w-7 flex-shrink-0">{flow.icon}</div>
{flow.icon} )}
</div> {!flow.icon && (
<IconComponent
className={cn("h-7 w-7 flex-shrink-0 text-flow-icon")}
name="Group"
/>
)}
<ShadTooltip content={flow.name}>
<div className="w-full truncate">{flow.name}</div>
</ShadTooltip>
</CardTitle>
</div>
<CardDescription className="pb-2 pt-2">
<ShadTooltip
side="bottom"
styleClasses="z-50"
content={flow.description}
>
<div className="truncate-doubleline">{flow.description}</div>
</ShadTooltip>
</CardDescription>
</CardHeader>
</div>
)} <CardFooter>
{!flow.icon && <IconComponent <div className="flex w-full items-center justify-between gap-2">
className={cn( <div className="flex w-full flex-wrap justify-end gap-2">
"flex-shrink-0 h-7 w-7 text-flow-icon", <Button
)} onClick={() => {
name="Group" updateIds(flow.data!);
/>} addFlow(true, flow).then((id) => {
<ShadTooltip content={flow.name}> navigate("/flow/" + id);
<div className="w-full truncate">{flow.name}</div> });
</ShadTooltip> }}
</CardTitle> tabIndex={-1}
</div> variant="outline"
<CardDescription className="pb-2 pt-2"> size="sm"
<ShadTooltip side="bottom" styleClasses="z-50" content={flow.description}> className="whitespace-nowrap "
<div className="truncate-doubleline">{flow.description}</div> >
</ShadTooltip> <IconComponent
</CardDescription> name="ExternalLink"
</CardHeader> className="main-page-nav-button select-none"
</div> />
Select Flow
<CardFooter> </Button>
<div className="flex w-full items-center justify-between gap-2"> </div>
<div className="flex w-full justify-end flex-wrap gap-2"> </div>
<Button </CardFooter>
onClick={() => { </Card>
updateIds(flow.data!) );
addFlow(true, flow).then((id) => {
navigate("/flow/" + id);
});
}}
tabIndex={-1}
variant="outline"
size="sm"
className="whitespace-nowrap "
>
<IconComponent
name="ExternalLink"
className="main-page-nav-button select-none"
/>
Select Flow
</Button>
</div>
</div>
</CardFooter>
</Card>
);
} }

10
src/frontend/src/components/newChatView/chatMessage/index.tsx
View file

@ -134,7 +134,7 @@ export default function ChatMessage({
)} )}
</div> </div>
{!chat.isSend ? ( {!chat.isSend ? (
<div className="form-modal-chat-text-position flex-grow min-w-96"> <div className="form-modal-chat-text-position min-w-96 flex-grow">
<div className="form-modal-chat-text"> <div className="form-modal-chat-text">
{hidden && chat.thought && chat.thought !== "" && ( {hidden && chat.thought && chat.thought !== "" && (
<div <div
@ -155,9 +155,9 @@ export default function ChatMessage({
/> />
)} )}
{chat.thought && chat.thought !== "" && !hidden && <br></br>} {chat.thought && chat.thought !== "" && !hidden && <br></br>}
<div className="w-full flex flex-col"> <div className="flex w-full flex-col">
<div className="w-full flex flex-col dark:text-white"> <div className="flex w-full flex-col dark:text-white">
<div className="w-full flex flex-col"> <div className="flex w-full flex-col">
{useMemo( {useMemo(
() => () =>
chatMessage === "" && lockChat ? ( chatMessage === "" && lockChat ? (
@ -169,7 +169,7 @@ export default function ChatMessage({
<Markdown <Markdown
remarkPlugins={[remarkGfm, remarkMath]} remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]} rehypePlugins={[rehypeMathjax]}
className="markdown flex flex-col prose text-primary word-break-break-word className="markdown prose flex flex-col text-primary word-break-break-word
dark:prose-invert" dark:prose-invert"
components={{ components={{
pre({ node, ...props }) { pre({ node, ...props }) {

2
src/frontend/src/components/ui/dialog.tsx
View file

@ -43,7 +43,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content <DialogPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
"flex flex-col fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full", "fixed left-[50%] top-[50%] z-50 flex w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
className className
)} )}
{...props} {...props}

1
src/frontend/src/constants/alerts_constants.tsx
View file

@ -58,4 +58,3 @@ export const FLOW_BUILD_SUCCESS_ALERT = `Flow built successfully`;
export const SAVE_SUCCESS_ALERT = "Changes saved successfully!"; export const SAVE_SUCCESS_ALERT = "Changes saved successfully!";
// Generic Node // Generic Node

3
src/frontend/src/modals/DeleteConfirmationModal/index.tsx
View file

@ -35,8 +35,7 @@ export default function DeleteConfirmationModal({
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<span> <span>
Confirm deletion of {description ?? "component"}? Confirm deletion of {description ?? "component"}?<br></br>
<br></br>
Note: This action is irreversible. Note: This action is irreversible.
</span> </span>
<DialogFooter> <DialogFooter>

15
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -165,8 +165,19 @@ const EditNodeModal = forwardRef(
) )
) ?? false; ) ?? false;
return ( return (
<TableRow key={index} className={"h-10 " + ((templateParam==="code" && myData.node?.template[templateParam].type==="code") || (templateParam.includes("code") && myData.node?.template[templateParam].proxy) ? " hidden " : "") <TableRow
}> key={index}
className={
"h-10 " +
((templateParam === "code" &&
myData.node?.template[templateParam].type ===
"code") ||
(templateParam.includes("code") &&
myData.node?.template[templateParam].proxy)
? " hidden "
: "")
}
>
<TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3"> <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
<ShadTooltip <ShadTooltip
content={ content={

2
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -24,9 +24,9 @@ import { postCustomComponent, postValidateCode } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import { useDarkStore } from "../../stores/darkStore"; import { useDarkStore } from "../../stores/darkStore";
import useFlowStore from "../../stores/flowStore"; import useFlowStore from "../../stores/flowStore";
import { CodeErrorDataTypeAPI } from "../../types/api";
import { codeAreaModalPropsType } from "../../types/components"; import { codeAreaModalPropsType } from "../../types/components";
import BaseModal from "../baseModal"; import BaseModal from "../baseModal";
import { CodeErrorDataTypeAPI } from "../../types/api";
export default function CodeAreaModal({ export default function CodeAreaModal({
value, value,

9
src/frontend/src/modals/shareModal/index.tsx
View file

@ -179,7 +179,7 @@ export default function ShareModal({
</span> </span>
<br></br> <br></br>
<span className=" text-xs text-destructive "> <span className=" text-xs text-destructive ">
Note: This action is irreversible. Note: This action is irreversible.
</span> </span>
</ConfirmationModal.Content> </ConfirmationModal.Content>
</ConfirmationModal> </ConfirmationModal>
@ -204,7 +204,9 @@ export default function ShareModal({
{children ? children : <></>} {children ? children : <></>}
</BaseModal.Trigger> </BaseModal.Trigger>
<BaseModal.Header <BaseModal.Header
description={`Publish ${is_component ? "your component" : "workflow"} to the Langflow Store.`} description={`Publish ${
is_component ? "your component" : "workflow"
} to the Langflow Store.`}
> >
<span className="pr-2">Share</span> <span className="pr-2">Share</span>
<IconComponent <IconComponent
@ -239,7 +241,8 @@ export default function ShareModal({
</label> </label>
</div> </div>
<span className=" text-xs text-destructive "> <span className=" text-xs text-destructive ">
<b>Attention:</b> API keys in specified fields are automatically removed upon sharing. <b>Attention:</b> API keys in specified fields are automatically
removed upon sharing.
</span> </span>
</BaseModal.Content> </BaseModal.Content>

1
src/frontend/src/pages/MainPage/components/components/index.tsx
View file

@ -14,7 +14,6 @@ import {
import useAlertStore from "../../../../stores/alertStore"; import useAlertStore from "../../../../stores/alertStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore"; import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { FlowType } from "../../../../types/flow"; import { FlowType } from "../../../../types/flow";
import { STARTER_FOLDER_NAME } from "../../../../constants/constants";
export default function ComponentsComponent({ export default function ComponentsComponent({
is_component = true, is_component = true,

26
src/frontend/src/pages/MainPage/index.tsx
View file

@ -2,6 +2,8 @@ import { Group, ToyBrick } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom"; import { Outlet, useLocation, useNavigate } from "react-router-dom";
import DropdownButton from "../../components/DropdownButtonComponent"; import DropdownButton from "../../components/DropdownButtonComponent";
import NewFlowCardComponent from "../../components/NewFlowCardComponent";
import ExampleCardComponent from "../../components/exampleComponent";
import IconComponent from "../../components/genericIconComponent"; import IconComponent from "../../components/genericIconComponent";
import PageLayout from "../../components/pageLayout"; import PageLayout from "../../components/pageLayout";
import SidebarNav from "../../components/sidebarComponent"; import SidebarNav from "../../components/sidebarComponent";
@ -11,12 +13,10 @@ import {
MY_COLLECTION_DESC, MY_COLLECTION_DESC,
USER_PROJECTS_HEADER, USER_PROJECTS_HEADER,
} from "../../constants/constants"; } from "../../constants/constants";
import BaseModal from "../../modals/baseModal";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { downloadFlows } from "../../utils/reactflowUtils"; import { downloadFlows } from "../../utils/reactflowUtils";
import BaseModal from "../../modals/baseModal";
import ExampleCardComponent from "../../components/exampleComponent";
import NewFlowCardComponent from "../../components/NewFlowCardComponent";
export default function HomePage(): JSX.Element { export default function HomePage(): JSX.Element {
const addFlow = useFlowsManagerStore((state) => state.addFlow); const addFlow = useFlowsManagerStore((state) => state.addFlow);
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow); const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
@ -41,8 +41,9 @@ export default function HomePage(): JSX.Element {
}) })
.then((id) => { .then((id) => {
setSuccessData({ setSuccessData({
title: `${is_component ? "Component" : "Flow" title: `${
} uploaded successfully`, is_component ? "Component" : "Flow"
} uploaded successfully`,
}); });
if (!is_component) navigate("/flow/" + id); if (!is_component) navigate("/flow/" + id);
}) })
@ -117,24 +118,25 @@ export default function HomePage(): JSX.Element {
</div> </div>
</div> </div>
<BaseModal open={openModal} setOpen={setOpenModal}> <BaseModal open={openModal} setOpen={setOpenModal}>
<BaseModal.Header description={"Select a template or start from scratch"}> <BaseModal.Header
description={"Select a template or start from scratch"}
>
<span className="pr-2" data-testid="modal-title"> <span className="pr-2" data-testid="modal-title">
Create a New Flow Create a New Flow
</span> </span>
<IconComponent <IconComponent
name="Group" name="Group"
className="h-6 w-6 text-primary stroke-2 " className="h-6 w-6 stroke-2 text-primary "
aria-hidden="true" aria-hidden="true"
/> />
</BaseModal.Header> </BaseModal.Header>
<BaseModal.Content> <BaseModal.Content>
<div className="flex flex-wrap w-full h-full p-4 gap-3 overflow-auto custom-scroll"> <div className="flex h-full w-full flex-wrap gap-3 overflow-auto p-4 custom-scroll">
{examples.map((example, idx) => { {examples.map((example, idx) => {
return( return <ExampleCardComponent key={idx} flow={example} />;
<ExampleCardComponent key={idx} flow={example} />)
})} })}
<NewFlowCardComponent/> <NewFlowCardComponent />
</div> </div>
</BaseModal.Content> </BaseModal.Content>
</BaseModal> </BaseModal>
</PageLayout> </PageLayout>

16
src/frontend/src/stores/flowsManagerStore.ts
View file

@ -2,6 +2,7 @@ import { AxiosError } from "axios";
import { cloneDeep } from "lodash"; import { cloneDeep } from "lodash";
import { Edge, Node, Viewport, XYPosition } from "reactflow"; import { Edge, Node, Viewport, XYPosition } from "reactflow";
import { create } from "zustand"; import { create } from "zustand";
import { STARTER_FOLDER_NAME } from "../constants/constants";
import { import {
deleteFlowFromDatabase, deleteFlowFromDatabase,
readFlowsFromDatabase, readFlowsFromDatabase,
@ -25,7 +26,6 @@ import useAlertStore from "./alertStore";
import { useDarkStore } from "./darkStore"; import { useDarkStore } from "./darkStore";
import useFlowStore from "./flowStore"; import useFlowStore from "./flowStore";
import { useTypesStore } from "./typesStore"; import { useTypesStore } from "./typesStore";
import { STARTER_FOLDER_NAME } from "../constants/constants";
let saveTimeoutId: NodeJS.Timeout | null = null; let saveTimeoutId: NodeJS.Timeout | null = null;
@ -38,7 +38,7 @@ const past = {};
const future = {}; const future = {};
const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
examples:[], examples: [],
setExamples: (examples: FlowType[]) => { setExamples: (examples: FlowType[]) => {
set({ examples }); set({ examples });
}, },
@ -67,8 +67,16 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
.then((dbData) => { .then((dbData) => {
if (dbData) { if (dbData) {
const { data, flows } = processFlows(dbData, false); const { data, flows } = processFlows(dbData, false);
get().setExamples(flows.filter(f=>(f.folder===STARTER_FOLDER_NAME && !f.user_id))); get().setExamples(
get().setFlows(flows.filter(f=>!(f.folder===STARTER_FOLDER_NAME && !f.user_id))); flows.filter(
(f) => f.folder === STARTER_FOLDER_NAME && !f.user_id
)
);
get().setFlows(
flows.filter(
(f) => !(f.folder === STARTER_FOLDER_NAME && !f.user_id)
)
);
useTypesStore.setState((state) => ({ useTypesStore.setState((state) => ({
data: { ...state.data, ["saved_components"]: data }, data: { ...state.data, ["saved_components"]: data },
})); }));

4
src/frontend/src/types/flow/index.ts
View file

@ -15,8 +15,8 @@ export type FlowType = {
parent?: string; parent?: string;
folder?: string; folder?: string;
user_id?: string; user_id?: string;
icon?:string; icon?: string;
icon_bg_color?:string; icon_bg_color?: string;
}; };
export type NodeType = { export type NodeType = {