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

Fix formatting issues and update dependencies

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-03-30 17:43:12 -03:00
commit e9cb84a933
24 changed files with 111 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -402,7 +402,9 @@ export default function ParameterComponent({
{title}
</span>
)}
<span className={(info === "" ? "" : "ml-1 ") + " text-status-red pl-1"}>
<span
className={(info === "" ? "" : "ml-1 ") + " pl-1 text-status-red"}
>
{required ? "*" : ""}
</span>
<div className="">

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

@ -345,29 +345,40 @@ export default function GenericNode({
return (
<NodeToolbar>
<NodeToolbarComponent
data={data}
deleteNode={(id) => {
takeSnapshot();
deleteNode(id);
}}
setShowNode={(show) => {
setNode(data.id, (old) => ({
...old,
data: { ...old.data, showNode: show },
}));
}}
setShowState={setShowNode}
numberOfHandles={handles}
showNode={showNode}
openAdvancedModal={false}
onCloseAdvancedModal={() => {}}
updateNodeCode={updateNodeCode}
isOutdated={isOutdated}
selected={selected}
/>
data={data}
deleteNode={(id) => {
takeSnapshot();
deleteNode(id);
}}
setShowNode={(show) => {
setNode(data.id, (old) => ({
...old,
data: { ...old.data, showNode: show },
}));
}}
setShowState={setShowNode}
numberOfHandles={handles}
showNode={showNode}
openAdvancedModal={false}
onCloseAdvancedModal={() => {}}
updateNodeCode={updateNodeCode}
isOutdated={isOutdated}
selected={selected}
/>
</NodeToolbar>
)
}, [data, deleteNode, takeSnapshot, setNode, setShowNode, handles, showNode, updateNodeCode, isOutdated, selected]);
);
}, [
data,
deleteNode,
takeSnapshot,
setNode,
setShowNode,
handles,
showNode,
updateNodeCode,
isOutdated,
selected,
]);
return (
<>

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

@ -1,13 +1,12 @@
import { Transition } from "@headlessui/react";
import { useEffect, useMemo, useRef, useState } from "react";
import ApiModal from "../../modals/ApiModal";
import IOModal from "../../modals/IOModal";
import ShareModal from "../../modals/shareModal";
import useFlowStore from "../../stores/flowStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { useStoreStore } from "../../stores/storeStore";
import { ChatType } from "../../types/chat";
import { classNames } from "../../utils/utils";
import IOModal from "../../modals/IOModal";
import ForwardedIconComponent from "../genericIconComponent";
import { Separator } from "../ui/separator";

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

@ -52,9 +52,9 @@ export default function Dropdown({
editNode ? "input-edit-node" : "py-2"
)}
>
{(value &&
{value &&
value !== "" &&
options.find((option) => option === value))
options.find((option) => option === value)
? options.find((option) => option === value)
: "Choose an option..."}
<ForwardedIconComponent

13
src/frontend/src/components/ui/button.tsx
View file

@ -43,17 +43,17 @@ export interface ButtonProps
function toTitleCase(text: string) {
return text
.split(' ')
.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join(' ');
.split(" ")
.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join(" ");
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false,children, ...props }, ref) => {
({ className, variant, size, asChild = false, children, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
let newChildren = children;
if (typeof(children)==="string"){
newChildren = toTitleCase(children)
if (typeof children === "string") {
newChildren = toTitleCase(children);
}
return (
<Comp
@ -61,7 +61,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
ref={ref}
children={newChildren}
{...props}
/>
);
}

2
src/frontend/src/constants/enums.ts
View file

@ -18,4 +18,4 @@ export enum BuildStatus {
export enum InputOutput {
INPUT = "input",
OUTPUT = "output",
}
}

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

@ -8,8 +8,8 @@ import "./style/index.css";
// @ts-ignore
import "./style/applies.css";
// @ts-ignore
import "./style/classes.css";
import { StrictMode } from "react";
import "./style/classes.css";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement

2
src/frontend/src/modals/IOModal/components/IOFieldView/components/FileInput/index.tsx
View file

@ -1,11 +1,11 @@
import { Button } from "../../../../../../components/ui/button";
import { useEffect, useState } from "react";
import IconComponent from "../../../../../../components/genericIconComponent";
import { BASE_URL_API } from "../../../../../../constants/constants";
import { uploadFile } from "../../../../../../controllers/API";
import useFlowsManagerStore from "../../../../../../stores/flowsManagerStore";
import { IOFileInputProps } from "../../../../../../types/components";
import IconComponent from "../../../../../../components/genericIconComponent";
export default function IOFileInput({ field, updateValue }: IOFileInputProps) {
//component to handle file upload from chatIO

2
src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
View file

@ -1,9 +1,9 @@
import { cloneDeep } from "lodash";
import { Textarea } from "../../../../components/ui/textarea";
import { InputOutput } from "../../../../constants/enums";
import useFlowStore from "../../../../stores/flowStore";
import { IOFieldViewProps } from "../../../../types/components";
import IOFileInput from "./components/FileInput";
import { Textarea } from "../../../../components/ui/textarea";
export default function IOFieldView({
type,

4
src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
View file

@ -25,7 +25,6 @@ export default function ChatInput({
}
}, [lockChat, inputRef]);
useEffect(() => {
if (inputRef.current) {
inputRef.current.style.height = "inherit"; // Reset the height
@ -42,7 +41,8 @@ export default function ChatInput({
event.key === "Enter" &&
!lockChat &&
!saveLoading &&
!event.shiftKey && !event.nativeEvent.isComposing
!event.shiftKey &&
!event.nativeEvent.isComposing
) {
sendMessage(repeat);
}

2
src/frontend/src/modals/IOModal/components/chatView/index.tsx
View file

@ -15,10 +15,10 @@ import {
ChatOutputType,
FlowPoolObjectType,
} from "../../../../types/chat";
import { chatViewProps } from "../../../../types/components";
import { classNames } from "../../../../utils/utils";
import ChatInput from "./chatInput";
import ChatMessage from "./chatMessage";
import { chatViewProps } from "../../../../types/components";
export default function ChatView({
sendMessage,

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

@ -1,9 +1,7 @@
import { useEffect, useState } from "react";
import AccordionComponent from "../../components/AccordionComponent";
import IOFieldView from "./components/IOFieldView";
import ShadTooltip from "../../components/ShadTooltipComponent";
import IconComponent from "../../components/genericIconComponent";
import ChatView from "./components/chatView";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import {
@ -20,11 +18,13 @@ import {
import { InputOutput } from "../../constants/enums";
import useFlowStore from "../../stores/flowStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { IOModalPropsType } from "../../types/components";
import { NodeType } from "../../types/flow";
import { updateVerticesOrder } from "../../utils/buildUtils";
import { cn } from "../../utils/utils";
import BaseModal from "../baseModal";
import { IOModalPropsType } from "../../types/components";
import IOFieldView from "./components/IOFieldView";
import ChatView from "./components/chatView";
export default function IOModal({
children,

7
src/frontend/src/modals/NewFlowModal/components/NewFlowCardComponent/index.tsx
View file

@ -1,6 +1,11 @@
import { useNavigate } from "react-router-dom";
import {
Card,
CardContent,
CardDescription,
CardTitle,
} from "../../../../components/ui/card";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { Card, CardContent, CardDescription, CardTitle } from "../../../../components/ui/card";
export default function NewFlowCardComponent() {
const addFlow = useFlowsManagerStore((state) => state.addFlow);

14
src/frontend/src/modals/NewFlowModal/components/undrawCards/index.tsx
View file

@ -10,13 +10,19 @@ import { ReactComponent as ChatWithHistory } from "../../../../assets/undraw_mob
import { ReactComponent as Assistant } from "../../../../assets/undraw_team_collaboration_re_ow29.svg";
//@ts-ignore
import { ReactComponent as APIRequest } from "../../../../assets/undraw_real_time_analytics_re_yliv.svg";
import {
Card,
CardContent,
CardDescription,
CardTitle,
} from "../../../../components/ui/card";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { FlowType } from "../../../../types/flow";
import { updateIds } from "../../../../utils/reactflowUtils";
import { Card, CardContent, CardDescription, CardTitle } from "../../../../components/ui/card";
import { UndrawCardComponentProps } from "../../../../types/components";
import { updateIds } from "../../../../utils/reactflowUtils";
export default function UndrawCardComponent({ flow }: UndrawCardComponentProps): JSX.Element {
export default function UndrawCardComponent({
flow,
}: UndrawCardComponentProps): JSX.Element {
const addFlow = useFlowsManagerStore((state) => state.addFlow);
const navigate = useNavigate();

11
src/frontend/src/modals/NewFlowModal/index.tsx
View file

@ -1,10 +1,13 @@
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { newFlowModalPropsType } from "../../types/components";
import BaseModal from "../baseModal";
import NewFlowCardComponent from "./components/NewFlowCardComponent";
import UndrawCardComponent from "./components/undrawCards";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import BaseModal from "../baseModal";
import { newFlowModalPropsType } from "../../types/components";
export default function NewFlowModal({ open, setOpen }: newFlowModalPropsType): JSX.Element {
export default function NewFlowModal({
open,
setOpen,
}: newFlowModalPropsType): JSX.Element {
const examples = useFlowsManagerStore((state) => state.examples);
return (

16
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -12,7 +12,6 @@ import ReactFlow, {
updateEdge,
} from "reactflow";
import GenericNode from "../../../../CustomNodes/GenericNode";
import FlowToolbar from "../../../../components/chatComponent";
import {
INVALID_SELECTION_ERROR_ALERT,
UPLOAD_ALERT_LIST,
@ -58,8 +57,9 @@ export default function Page({
const templates = useTypesStore((state) => state.templates);
const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
const reactFlowWrapper = useRef<HTMLDivElement>(null);
const [showCanvas, setSHowCanvas] = useState(Object.keys(templates).length > 0 &&
Object.keys(types).length > 0)
const [showCanvas, setSHowCanvas] = useState(
Object.keys(templates).length > 0 && Object.keys(types).length > 0
);
const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
const setReactFlowInstance = useFlowStore(
@ -273,8 +273,10 @@ export default function Page({
}, []);
useEffect(() => {
setSHowCanvas(Object.keys(templates).length > 0 && Object.keys(types).length > 0)
}, [templates, types])
setSHowCanvas(
Object.keys(templates).length > 0 && Object.keys(types).length > 0
);
}, [templates, types]);
const onConnectMod = useCallback(
(params: Connection) => {
@ -437,7 +439,6 @@ export default function Page({
}
return (
<div className="h-full w-full" ref={reactFlowWrapper}>
{showCanvas ? (
<div id="react-flow-id" className="h-full w-full">
@ -491,8 +492,7 @@ export default function Page({
</div>
) : (
<></>
)}
)}
</div>
);
}

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

@ -1,7 +1,6 @@
import { cloneDeep } from "lodash";
import { LinkIcon, SparklesIcon } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import AccordionComponent from "../../../../components/AccordionComponent";
import ShadTooltip from "../../../../components/ShadTooltipComponent";
import IconComponent from "../../../../components/genericIconComponent";
import { Input } from "../../../../components/ui/input";

34
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -631,22 +631,24 @@ export default function NodeToolbarComponent({
)}
{hasCode && (
<div className="hidden">
{openModal&& <CodeAreaComponent
open={openModal}
setOpen={setOpenModal}
readonly={
data.node?.flow && data.node.template[name].dynamic
? true
: false
}
dynamic={data.node?.template[name].dynamic ?? false}
setNodeClass={handleNodeClass}
nodeClass={data.node}
disabled={false}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
id={"code-input-node-toolbar-" + name}
/>}
{openModal && (
<CodeAreaComponent
open={openModal}
setOpen={setOpenModal}
readonly={
data.node?.flow && data.node.template[name].dynamic
? true
: false
}
dynamic={data.node?.template[name].dynamic ?? false}
setNodeClass={handleNodeClass}
nodeClass={data.node}
disabled={false}
value={data.node?.template[name].value ?? ""}
onChange={handleOnNewValue}
id={"code-input-node-toolbar-" + name}
/>
)}
</div>
)}
</span>

7
src/frontend/src/pages/FlowPage/index.tsx
View file

@ -1,11 +1,11 @@
import { useEffect } from "react";
import { useParams } from "react-router-dom";
import FlowToolbar from "../../components/chatComponent";
import Header from "../../components/headerComponent";
import { useDarkStore } from "../../stores/darkStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import Page from "./components/PageComponent";
import ExtraSidebar from "./components/extraSidebarComponent";
import FlowToolbar from "../../components/chatComponent";
export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
const setCurrentFlowId = useFlowsManagerStore(
@ -23,7 +23,7 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
<>
<Header />
<div className="flow-page-positioning">
{currentFlow &&
{currentFlow && (
<div className="flex h-full overflow-hidden">
{!view && <ExtraSidebar />}
<main className="flex flex-1">
@ -32,10 +32,9 @@ export default function FlowPage({ view }: { view?: boolean }): JSX.Element {
<Page flow={currentFlow} />
</div>
{!view && <FlowToolbar />}
</main>
</div>
}
)}
<a
target={"_blank"}
href="https://logspace.ai/"

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

@ -2,22 +2,19 @@ import { Group, ToyBrick } from "lucide-react";
import { useEffect, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import DropdownButton from "../../components/DropdownButtonComponent";
import NewFlowCardComponent from "../../modals/NewFlowModal/components/NewFlowCardComponent";
import IconComponent from "../../components/genericIconComponent";
import PageLayout from "../../components/pageLayout";
import SidebarNav from "../../components/sidebarComponent";
import { Button } from "../../components/ui/button";
import UndrawCardComponent from "../../modals/NewFlowModal/components/undrawCards";
import { CONSOLE_ERROR_MSG } from "../../constants/alerts_constants";
import {
MY_COLLECTION_DESC,
USER_PROJECTS_HEADER,
} from "../../constants/constants";
import BaseModal from "../../modals/baseModal";
import NewFlowModal from "../../modals/NewFlowModal";
import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { downloadFlows } from "../../utils/reactflowUtils";
import NewFlowModal from "../../modals/NewFlowModal";
export default function HomePage(): JSX.Element {
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const setCurrentFlowId = useFlowsManagerStore(

2
src/frontend/src/stores/flowStore.ts
View file

@ -72,7 +72,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
},
getNodePosition: (nodeId: string) => {
const node = get().nodes.find((node) => node.id === nodeId);
return node?.position||{x:0,y:0};
return node?.position || { x: 0, y: 0 };
},
updateFlowPool: (
nodeId: string,

2
src/frontend/src/types/components/index.ts
View file

@ -1,5 +1,5 @@
import { ReactElement, ReactNode, SetStateAction } from "react";
import { ReactFlowJsonObject, XYPosition } from "reactflow";
import { ReactFlowJsonObject } from "reactflow";
import { InputOutput } from "../../constants/enums";
import { APIClassType, APITemplateType, TemplateVariableType } from "../api";
import { ChatMessageType } from "../chat";

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

@ -1170,7 +1170,7 @@ export function downloadNode(NodeFLow: FlowType) {
type: "application/json",
});
element.href = URL.createObjectURL(file);
element.download = `${NodeFLow?.name??"node"}.json`;
element.download = `${NodeFLow?.name ?? "node"}.json`;
element.click();
}

1
src/frontend/vite.config.ts
View file

@ -1,7 +1,6 @@
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import svgr from "vite-plugin-svgr";
import MillionCompiler from "@million/lint";
const apiRoutes = ["^/api/v1/", "/health"];
// Use environment variable to determine the target.