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

Merge/mp (#490)

Browse source
This commit is contained in:
anovazzi1 2023-06-14 21:59:15 -03:00 • committed by GitHub
commit 23a7e556e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 108 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -47,8 +47,6 @@ export default function GenericNode({
}
}, []);
useEffect(() => {}, [closePopUp]);
const validateNode = useCallback(
debounce(async () => {
try {
@ -87,6 +85,8 @@ export default function GenericNode({
return;
}
useEffect(() => {}, [closePopUp, data.node.template]);
return (
<>
<NodeToolbar>

17
src/frontend/src/components/ShadTooltipComponent/index.tsx
View file

@ -10,15 +10,14 @@ const ShadTooltip = (props) => {
<TooltipProvider>
<Tooltip delayDuration={props.delayDuration}>
<TooltipTrigger asChild>{props.children}</TooltipTrigger>
{props.open && (
<TooltipContent
side={props.side}
avoidCollisions={false}
sticky="always"
>
{props.content}
</TooltipContent>
)}
<TooltipContent
side={props.side}
avoidCollisions={false}
sticky="always"
>
{props.content}
</TooltipContent>
</Tooltip>
</TooltipProvider>
);

11
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -20,13 +20,18 @@ export default function CodeAreaComponent({
onChange("");
}
}, [disabled, onChange]);
useEffect(() => {
setMyValue(value);
}, [value]);
return (
<div
className={
disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
}
>
<div className="w-full flex items-center gap-3">
<div className="w-full flex items-center">
<span
onClick={() => {
openPopUp(
@ -41,7 +46,7 @@ export default function CodeAreaComponent({
}}
className={
editNode
? "truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
? "truncate cursor-pointer placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 border-1 shadow-sm sm:text-sm" +
INPUT_STYLE
: "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
INPUT_STYLE +
@ -64,7 +69,7 @@ export default function CodeAreaComponent({
}}
>
{!editNode && (
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" />
)}
</button>
</div>

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

@ -31,7 +31,7 @@ export default function Dropdown({
<Listbox.Button
className={
editNode
? "relative pr-9 arrow-hide placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm border-gray-300 border-1" +
? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm border-gray-300 border-1" +
INPUT_STYLE
: "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
INPUT_STYLE
@ -40,9 +40,7 @@ export default function Dropdown({
<span className="block truncate w-full">{internalValue}</span>
<span
className={
editNode
? "hidden"
: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
}
>
<ChevronUpDownIcon
@ -62,7 +60,7 @@ export default function Dropdown({
<Listbox.Options
className={
editNode
? "arrow-hide absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
? "absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
: "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm "
}
>

5
src/frontend/src/components/floatComponent/index.tsx
View file

@ -23,6 +23,11 @@ export default function FloatComponent({
onChange("");
}
}, [disabled, onChange]);
useEffect(() => {
setMyValue(value);
}, [value]);
return (
<div
className={

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

@ -47,23 +47,13 @@ export const MenuBar = ({ flows, tabId }) => {
<Link to="/">
<ChevronLeft className="w-4" />
</Link>
<Button variant="primary" size="sm">
{/* <RenameLabel
value={current_flow.name}
setValue={(value) => {
if (value !== "") {
let newFlow = _.cloneDeep(current_flow);
newFlow.name = value;
updateFlow(newFlow);
}
}}
rename={rename}
setRename={setRename}
/> */}
<div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 gap-0.5">
<DropdownMenu>
<DropdownMenuTrigger className="gap-2 flex items-center">
{current_flow.name}
<ChevronDown className="w-4 h-4" />
<DropdownMenuTrigger>
<Button className="gap-2 flex items-center" variant="primary">
{current_flow.name}
<ChevronDown className="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-44">
<DropdownMenuLabel>Edit</DropdownMenuLabel>
@ -119,7 +109,7 @@ export const MenuBar = ({ flows, tabId }) => {
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</Button>
</div>
</div>
);
};

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

@ -78,7 +78,7 @@ export default function InputFileComponent({
onClick={handleButtonClick}
className={
editNode
? "truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
? "truncate placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm border-1" +
INPUT_STYLE
: "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
INPUT_STYLE +

5
src/frontend/src/components/intComponent/index.tsx
View file

@ -21,6 +21,11 @@ export default function IntComponent({
onChange("");
}
}, [disabled, onChange]);
useEffect(() => {
setMyValue(value);
}, [value]);
return (
<div
className={

7
src/frontend/src/components/promptComponent/index.tsx
View file

@ -1,8 +1,6 @@
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
import { useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import CodeAreaModal from "../../modals/codeAreaModal";
import TextAreaModal from "../../modals/textAreaModal";
import { TextAreaComponentType } from "../../types/components";
import GenericModal from "../../modals/genericModal";
import { TypeModal } from "../../utils";
@ -22,6 +20,11 @@ export default function PromptAreaComponent({
onChange("");
}
}, [disabled, onChange]);
useEffect(() => {
setMyValue(value);
}, [value]);
return (
<div
className={

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

@ -14,9 +14,8 @@ const buttonVariants = cva(
outline:
"border border-input hover:bg-accent hover:text-accent-foreground",
primary:
"bg-background text-secondary-foreground hover:bg-background/80",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
"border bg-background text-secondary-foreground hover:bg-background/80 hover:shadow-sm",
secondary: "bg-muted text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "underline-offset-4 hover:underline text-primary",
},

8
src/frontend/src/contexts/tabsContext.tsx
View file

@ -44,7 +44,7 @@ const TabsContextInitialValue: TabsContextType = {
lastCopiedSelection: null,
setLastCopiedSelection: (selection: any) => {},
getNodeId: (nodeType:string) => "",
getNodeId: (nodeType: string) => "",
paste: (
selection: { nodes: any; edges: any },
position: { x: number; y: number; paneX?: number; paneY?: number }
@ -281,8 +281,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
});
}
function getNodeId(nodeType:string) {
return nodeType+"-"+incrementNodeId();
function getNodeId(nodeType: string) {
return nodeType + "-" + incrementNodeId();
}
/**
@ -376,7 +376,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
? { x: position.paneX + position.x, y: position.paneY + position.y }
: reactFlowInstance.project({ x: position.x, y: position.y });
selectionInstance.nodes.forEach((n:NodeType) => {
selectionInstance.nodes.forEach((n: NodeType) => {
// Generate a unique node ID
let newId = getNodeId(n.data.type);
idsMap[n.id] = newId;

65
src/frontend/src/index.css
View file

@ -33,8 +33,8 @@
--ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
--radius: 0.5rem;
}
--radius: 0.5rem;
}
.dark {
--background: 224 71% 4%; /* hsl(224 71% 4%) */
@ -66,9 +66,9 @@
--ring: 216 34% 17%; /* hsl(216 34% 17%) */
--radius: 0.5rem;
}
--radius: 0.5rem;
}
}
:root {
--background: 0 0% 100%; /* hsl(0 0% 100%) */
@ -94,25 +94,44 @@
}
.dark {
-background: 224 71% 4%; /* hsl(224 71% 4%) */
-foreground: 213 31% 91%; /* hsl(213 31% 91%) */
-muted: 223 47% 11%; /* hsl(223 47% 11%) */
-muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
-popover: 224 71% 4%; /* hsl(224 71% 4%) */
-popover-foreground: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-card: 224 71% 4%; /* hsl(224 71% 4%) */
-card-foreground: 213 31% 91%; /* hsl(213 31% 91%) */
-border: 216 34% 17%; /* hsl(216 34% 17%) */
-input: 216 34% 17%; /* hsl(216 34% 17%) */
-primary: 210 40% 98%; /* hsl(210 40% 98%) */
-primary-foreground: 222.2 47.4% 1.2%; /* hsl(222 47% 1%) */
-secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
-secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-accent: 216 34% 17%; /* hsl(216 34% 17%) */
-accent-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-destructive: 0 63% 31%; /* hsl(0 63% 31%) */
-destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
-ring: 216 34% 17%; /* hsl(216 34% 17%) */
-background: 224 71% 4%;
/* hsl(224 71% 4%) */
-foreground: 213 31% 91%;
/* hsl(213 31% 91%) */
-muted: 223 47% 11%;
/* hsl(223 47% 11%) */
-muted-foreground: 215.4 16.3% 56.9%;
/* hsl(215 16% 56%) */
-popover: 224 71% 4%;
/* hsl(224 71% 4%) */
-popover-foreground: 215 20.2% 65.1%;
/* hsl(215 20% 65%) */
-card: 224 71% 4%;
/* hsl(224 71% 4%) */
-card-foreground: 213 31% 91%;
/* hsl(213 31% 91%) */
-border: 216 34% 17%;
/* hsl(216 34% 17%) */
-input: 216 34% 17%;
/* hsl(216 34% 17%) */
-primary: 210 40% 98%;
/* hsl(210 40% 98%) */
-primary-foreground: 222.2 47.4% 1.2%;
/* hsl(222 47% 1%) */
-secondary: 222.2 47.4% 11.2%;
/* hsl(222 47% 11%) */
-secondary-foreground: 210 40% 98%;
/* hsl(210 40% 98%) */
-accent: 216 34% 17%;
/* hsl(216 34% 17%) */
-accent-foreground: 210 40% 98%;
/* hsl(210 40% 98%) */
-destructive: 0 63% 31%;
/* hsl(0 63% 31%) */
-destructive-foreground: 210 40% 98%;
/* hsl(210 40% 98%) */
-ring: 216 34% 17%;
/* hsl(216 34% 17%) */
-radius: 0.5rem;
}

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

@ -33,6 +33,7 @@ import {
DialogTrigger,
} from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
import { Edit } from "lucide-react";
import { Badge } from "../../components/ui/badge";
export default function EditNodeModal({ data }: { data: NodeDataType }) {
@ -55,7 +56,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
const { closePopUp } = useContext(PopUpContext);
const { types } = useContext(typesContext);
const ref = useRef();
const { save } = useContext(TabsContext);
const [enabled, setEnabled] = useState(null);
if (nodeLength == 0) {
closePopUp();
@ -160,7 +160,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
}
onChange={(t: string[]) => {
data.node.template[n].value = t;
save();
}}
/>
) : data.node.template[n].multiline ? (
@ -170,7 +169,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
data.node.template[n].value = t;
save();
}}
/>
) : (
@ -183,7 +181,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
value={data.node.template[n].value ?? ""}
onChange={(t) => {
data.node.template[n].value = t;
save();
}}
/>
)}
@ -196,7 +193,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
setEnabled={(e) => {
data.node.template[n].value = e;
setEnabled(e);
save();
}}
size="small"
disabled={false}
@ -210,7 +206,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
value={data.node.template[n].value ?? ""}
onChange={(t) => {
data.node.template[n].value = t;
save();
}}
/>
</div>
@ -238,7 +233,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
value={data.node.template[n].value ?? ""}
onChange={(t) => {
data.node.template[n].value = t;
save();
}}
/>
</div>
@ -255,7 +249,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
suffixes={data.node.template[n].suffixes}
onFileChange={(t: string) => {
data.node.template[n].content = t;
save();
}}
></InputFileComponent>
</div>
@ -267,7 +260,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
data.node.template[n].value = t;
save();
}}
/>
</div>
@ -279,7 +271,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
data.node.template[n].value = t;
save();
}}
/>
</div>

10
src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
View file

@ -21,7 +21,6 @@ export default function ModalField({
type,
index,
}) {
const { save } = useContext(TabsContext);
const [enabled, setEnabled] = useState(
data.node.template[name]?.value ?? false
);
@ -71,7 +70,6 @@ export default function ModalField({
}
onChange={(t: string[]) => {
data.node.template[name].value = t;
save();
}}
/>
) : data.node.template[name].multiline ? (
@ -80,7 +78,6 @@ export default function ModalField({
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
save();
}}
/>
) : (
@ -90,7 +87,6 @@ export default function ModalField({
value={data.node.template[name].value ?? ""}
onChange={(t) => {
data.node.template[name].value = t;
save();
}}
/>
)}
@ -104,7 +100,6 @@ export default function ModalField({
setEnabled={(t) => {
data.node.template[name].value = t;
setEnabled(t);
save();
}}
/>
</div>
@ -115,7 +110,6 @@ export default function ModalField({
value={data.node.template[name].value ?? ""}
onChange={(t) => {
data.node.template[name].value = t;
save();
}}
/>
</div>
@ -134,7 +128,6 @@ export default function ModalField({
value={data.node.template[name].value ?? ""}
onChange={(t) => {
data.node.template[name].value = t;
save();
}}
/>
</div>
@ -150,7 +143,6 @@ export default function ModalField({
suffixes={data.node.template[name].suffixes}
onFileChange={(t: string) => {
data.node.template[name].content = t;
save();
}}
></InputFileComponent>
</div>
@ -161,7 +153,6 @@ export default function ModalField({
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
save();
}}
/>
</div>
@ -172,7 +163,6 @@ export default function ModalField({
value={data.node.template[name].value ?? ""}
onChange={(t: string) => {
data.node.template[name].value = t;
save();
}}
/>
</div>

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

@ -16,6 +16,7 @@ import {
import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox";
import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
import { Download } from "lucide-react";
import EditFlowSettings from "../../components/EditFlowSettingsComponent";
export default function ExportModal() {
@ -45,7 +46,7 @@ export default function ExportModal() {
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Export</span>
<ArrowDownTrayIcon
<Download
className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true"
/>

7
src/frontend/src/modals/importModal/index.tsx
View file

@ -79,14 +79,13 @@ export default function ImportModal() {
<div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
<button
type="button"
className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:ring-offset-1"
className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
onClick={() => {
setShowExamples(false);
}}
>
<span className="sr-only">Close</span>
<ArrowLeftIcon
className="h-6 w-6 text-gray-800 ml-1 dark:text-white"
className="h-5 w-5 text-gray-800 ml-1 dark:text-white"
aria-hidden="true"
/>
</button>
@ -98,7 +97,7 @@ export default function ImportModal() {
{showExamples ? "Select an example" : "Import"}
</span>
<ArrowUpTrayIcon
className="h-6 w-6 text-gray-800 ml-1 dark:text-white"
className="h-5 w-5 text-gray-800 ml-1 dark:text-white"
aria-hidden="true"
/>
</DialogTitle>

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

@ -21,6 +21,7 @@ import { alertContext } from "../../../../contexts/alertContext";
import { updateFlowInDatabase } from "../../../../controllers/API";
import { INPUT_STYLE } from "../../../../constants";
import { Input } from "../../../../components/ui/input";
import { Separator } from "../../../../components/ui/separator";
export default function ExtraSidebar() {
const { data } = useContext(typesContext);
@ -71,14 +72,14 @@ export default function ExtraSidebar() {
}
return (
<div className="flex flex-col overflow-hidden scrollbar-hide h-full border-r">
<div className="flex flex-col overflow-hidden scrollbar-hide h-full border-r w-[200px]">
<div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
<ShadTooltip delayDuration={1000} content="Import" side="top">
<button
className="hover:dark:hover:bg-[#242f47] text-gray-700 w-full justify-center shadow-sm transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 relative inline-flex items-center rounded-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
onClick={() => {
// openPopUp(<ImportModal />);
uploadFlow()
uploadFlow();
}}
>
<FileUp className="w-5 h-5 dark:text-gray-300"></FileUp>
@ -122,9 +123,9 @@ export default function ExtraSidebar() {
</button>
</ShadTooltip>
</div>
{/* <Separator /> */}
<div className="relative mt-2 flex items-center mb-2 mx-2">
<Input
<Separator />
<div className="relative mt-2 flex items-center mb-2 mx-auto">
<input
type="text"
name="search"
id="search"

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

@ -6,6 +6,7 @@ import {
SVGProps,
} from "react";
import { NodeDataType } from "../flow/index";
import { typesContextType } from "../typesContext";
export type InputComponentType = {
value: string;
disabled?: boolean;
@ -39,6 +40,7 @@ export type ParameterComponentType = {
required?: boolean;
name?: string;
tooltipTitle: string;
dataContext?: typesContextType;
};
export type InputListComponentType = {
value: string[];

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

@ -17,7 +17,7 @@ export type TabsContextType = {
//disable CopyPaste
disableCopyPaste: boolean;
setDisableCopyPaste: (value: boolean) => void;
getNodeId: (nodeType:string) => string;
getNodeId: (nodeType: string) => string;
paste: (
selection: { nodes: any; edges: any },
position: { x: number; y: number; paneX?: number; paneY?: number }

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

@ -644,7 +644,7 @@ export function checkUpperWords(str: string) {
export function updateIds(newFlow, getNodeId) {
let idsMap = {};
newFlow.nodes.forEach((n:NodeType) => {
newFlow.nodes.forEach((n: NodeType) => {
// Generate a unique node ID
let newId = getNodeId(n.data.type);
idsMap[n.id] = newId;