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

formatting code

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-07 18:59:47 -03:00
commit dad98a47f6
22 changed files with 716 additions and 753 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -39,9 +39,10 @@ export default function CodeAreaComponent({
); );
}} }}
className={ className={
editNode ? "h-7 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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : editNode
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + ? "h-7 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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
(disabled ? " bg-gray-200" : "") : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "")
} }
> >
{myValue !== "" ? myValue : "Text empty"} {myValue !== "" ? myValue : "Text empty"}
@ -59,10 +60,9 @@ export default function CodeAreaComponent({
); );
}} }}
> >
{ {!editNode && (
!editNode && <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" /> )}
}
</button> </button>
</div> </div>
</div> </div>

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

@ -8,12 +8,12 @@ export default function Dropdown({
value, value,
options, options,
onSelect, onSelect,
editNode = false editNode = false,
}: DropDownComponentType) { }: DropDownComponentType) {
let [internalValue, setInternalValue] = useState( let [internalValue, setInternalValue] = useState(
value === "" || !value ? "Choose an option" : value value === "" || !value ? "Choose an option" : value
); );
return ( return (
<> <>
<Listbox <Listbox
@ -25,20 +25,26 @@ export default function Dropdown({
> >
{({ open }) => ( {({ open }) => (
<> <>
<div className={ <div
editNode ? "relative mt-0 w-full" : className={
"relative mt-1 w-full" editNode ? "relative mt-0 w-full" : "relative mt-1 w-full"
}> }
<Listbox.Button >
className= <Listbox.Button
{editNode ? className={
"pr-9 arrow-hide placeholder:text-center 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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : editNode
"relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"} ? "pr-9 arrow-hide placeholder:text-center 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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
}
> >
<span className="block truncate w-full">{internalValue}</span> <span className="block truncate w-full">{internalValue}</span>
<span className={ <span
editNode ? "hidden" : className={
"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"}> editNode
? "hidden"
: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
}
>
<ChevronUpDownIcon <ChevronUpDownIcon
className="h-5 w-5 text-gray-400" className="h-5 w-5 text-gray-400"
aria-hidden="true" aria-hidden="true"
@ -53,12 +59,13 @@ export default function Dropdown({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options <Listbox.Options
className={ className={
editNode ? "arrow-hide" : editNode
"absolute z-50 mt-1 max-h-60 w-full dark:bg-gray-800 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" ? "arrow-hide"
}> : "absolute z-50 mt-1 max-h-60 w-full dark:bg-gray-800 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"
}
>
{options.map((option, id) => ( {options.map((option, id) => (
<Listbox.Option <Listbox.Option
key={id} key={id}
@ -67,13 +74,12 @@ export default function Dropdown({
active && !editNode active && !editNode
? "text-white bg-indigo-600 dark:bg-indigo-500" ? "text-white bg-indigo-600 dark:bg-indigo-500"
: "text-gray-900", : "text-gray-900",
active && editNode active && editNode
? "text-white bg-gray-400 dark:bg-gray-500" ? "text-white bg-gray-400 dark:bg-gray-500"
: "", : "",
editNode ? editNode
"relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800" ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
: "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800", : "relative cursor-default select-none py-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
) )
} }
value={option} value={option}

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

@ -7,7 +7,7 @@ export default function FloatComponent({
onChange, onChange,
disableCopyPaste = false, disableCopyPaste = false,
disabled, disabled,
editNode = false editNode = false,
}: FloatComponentType) { }: FloatComponentType) {
const [myValue, setMyValue] = useState(value ?? ""); const [myValue, setMyValue] = useState(value ?? "");
const { setDisableCopyPaste } = useContext(TabsContext); const { setDisableCopyPaste } = useContext(TabsContext);
@ -34,11 +34,14 @@ export default function FloatComponent({
type="number" type="number"
value={myValue} value={myValue}
className={ className={
editNode ? "arrow-hide placeholder:text-center 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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : editNode
"block w-full form-input dark:bg-gray-900 arrow-hide dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + ? "arrow-hide placeholder:text-center 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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
(disabled ? " bg-gray-200 dark:bg-gray-700" : "") : "block w-full form-input dark:bg-gray-900 arrow-hide dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200 dark:bg-gray-700" : "")
}
placeholder={
editNode ? "Number 0 to 1" : "Type a number from zero to one"
} }
placeholder={editNode ? "Number 0 to 1" : "Type a number from zero to one"}
onChange={(e) => { onChange={(e) => {
setMyValue(e.target.value); setMyValue(e.target.value);
onChange(e.target.value); onChange(e.target.value);

27
src/frontend/src/components/inputComponent/index.tsx
View file

@ -9,7 +9,7 @@ export default function InputComponent({
disableCopyPaste = false, disableCopyPaste = false,
disabled, disabled,
password, password,
editNode = false editNode = false,
}: InputComponentType) { }: InputComponentType) {
const [myValue, setMyValue] = useState(value ?? ""); const [myValue, setMyValue] = useState(value ?? "");
const [pwdVisible, setPwdVisible] = useState(false); const [pwdVisible, setPwdVisible] = useState(false);
@ -41,8 +41,10 @@ export default function InputComponent({
"block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm", "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm",
disabled ? " bg-gray-200 dark:bg-gray-700" : "", disabled ? " bg-gray-200 dark:bg-gray-700" : "",
password && !pwdVisible && myValue !== "" ? "password" : "", password && !pwdVisible && myValue !== "" ? "password" : "",
editNode ? "placeholder:text-center 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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : "focus:border-indigo-500 focus:ring-indigo-500", editNode
password && editNode ? "pr-8" : "pr-3", ? "placeholder:text-center 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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "focus:border-indigo-500 focus:ring-indigo-500",
password && editNode ? "pr-8" : "pr-3"
)} )}
placeholder={password && editNode ? "Key" : "Type something..."} placeholder={password && editNode ? "Key" : "Type something..."}
onChange={(e) => { onChange={(e) => {
@ -50,14 +52,13 @@ export default function InputComponent({
onChange(e.target.value); onChange(e.target.value);
}} }}
/> />
{ {password && (
password && ( <button
<button className={classNames(
className={ editNode
classNames( ? "absolute inset-y-0 right-0 pr-2 items-center text-gray-600"
editNode ? "absolute inset-y-0 right-0 pr-2 items-center text-gray-600" : "absolute inset-y-0 right-0 items-center px-4 text-gray-600", : "absolute inset-y-0 right-0 items-center px-4 text-gray-600"
) )}
}
onClick={() => { onClick={() => {
setPwdVisible(!pwdVisible); setPwdVisible(!pwdVisible);
}} }}
@ -100,9 +101,7 @@ export default function InputComponent({
</svg> </svg>
))} ))}
</button> </button>
) )}
}
</div> </div>
); );
} }

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

@ -10,7 +10,7 @@ export default function InputFileComponent({
suffixes, suffixes,
fileTypes, fileTypes,
onFileChange, onFileChange,
editNode = false editNode = false,
}: FileComponentType) { }: FileComponentType) {
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(value);
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);
@ -72,17 +72,18 @@ export default function InputFileComponent({
<span <span
onClick={handleButtonClick} onClick={handleButtonClick}
className={ className={
editNode ? "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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : editNode
"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 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + ? "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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
(disabled ? " bg-gray-200" : "") : "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 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "")
} }
> >
{myValue !== "" ? myValue : "No file"} {myValue !== "" ? myValue : "No file"}
</span> </span>
<button onClick={handleButtonClick}> <button onClick={handleButtonClick}>
{!editNode && {!editNode && (
<DocumentMagnifyingGlassIcon className="w-8 h-8 hover:text-blue-600" /> <DocumentMagnifyingGlassIcon className="w-8 h-8 hover:text-blue-600" />
} )}
</button> </button>
</div> </div>
</div> </div>

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

@ -8,11 +8,11 @@ export default function IntComponent({
onChange, onChange,
disableCopyPaste = false, disableCopyPaste = false,
disabled, disabled,
editNode = false editNode = false,
}: FloatComponentType) { }: FloatComponentType) {
const [myValue, setMyValue] = useState(value ?? ""); const [myValue, setMyValue] = useState(value ?? "");
const { setDisableCopyPaste } = useContext(TabsContext); const { setDisableCopyPaste } = useContext(TabsContext);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue(""); setMyValue("");
@ -55,9 +55,10 @@ export default function IntComponent({
type="number" type="number"
value={myValue} value={myValue}
className={ className={
editNode ? "arrow-hide placeholder:text-center 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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : editNode
"block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + ? "arrow-hide placeholder:text-center 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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
(disabled ? " bg-gray-200 dark:bg-gray-700" : "") : "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200 dark:bg-gray-700" : "")
} }
placeholder={editNode ? "Integer number" : "Type a integer number"} placeholder={editNode ? "Integer number" : "Type a integer number"}
onChange={(e) => { onChange={(e) => {

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

@ -11,7 +11,7 @@ export default function PromptAreaComponent({
value, value,
onChange, onChange,
disabled, disabled,
editNode = false editNode = false,
}: TextAreaComponentType) { }: TextAreaComponentType) {
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(value);
const { openPopUp } = useContext(PopUpContext); const { openPopUp } = useContext(PopUpContext);
@ -22,9 +22,6 @@ export default function PromptAreaComponent({
} }
}, [disabled, onChange]); }, [disabled, onChange]);
return ( return (
<div <div
className={ className={
disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full" disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
@ -47,9 +44,10 @@ export default function PromptAreaComponent({
); );
}} }}
className={ className={
editNode ? "h-7 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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : editNode
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + ? "h-7 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 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
(disabled ? " bg-gray-200" : "") : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "")
} }
> >
{myValue !== "" ? myValue : "-"} {myValue !== "" ? myValue : "-"}
@ -70,11 +68,9 @@ export default function PromptAreaComponent({
); );
}} }}
> >
{ {!editNode && (
!editNode &&
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" /> <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
} )}
</button> </button>
</div> </div>
</div> </div>

9
src/frontend/src/components/toggleShadComponent/index.tsx
View file

@ -16,15 +16,14 @@ export default function ToggleShadComponent({
return ( return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}> <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<Switch <Switch
style={{ style={{
transform: 'scaleX(0.6) scaleY(0.6)', transform: "scaleX(0.6) scaleY(0.6)",
}} }}
checked={enabled} checked={enabled}
onCheckedChange={(x: boolean) => { onCheckedChange={(x: boolean) => {
setEnabled(x); setEnabled(x);
}} }}
> ></Switch>
</Switch>
</div> </div>
); );
} }

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

@ -1,8 +1,7 @@
import * as React from "react" import * as React from "react";
import { Slot } from "@radix-ui/react-slot" import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority" import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../utils" import { cn } from "../../utils";
const buttonVariants = cva( const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background", "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
@ -30,26 +29,26 @@ const buttonVariants = cva(
size: "default", size: "default",
}, },
} }
) );
export interface ButtonProps export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>, extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> { VariantProps<typeof buttonVariants> {
asChild?: boolean asChild?: boolean;
} }
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => { ({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button" const Comp = asChild ? Slot : "button";
return ( return (
<Comp <Comp
className={cn(buttonVariants({ variant, size, className }))} className={cn(buttonVariants({ variant, size, className }))}
ref={ref} ref={ref}
{...props} {...props}
/> />
) );
} }
) );
Button.displayName = "Button" Button.displayName = "Button";
export { Button, buttonVariants } export { Button, buttonVariants };

17
src/frontend/src/components/ui/checkbox.tsx
View file

@ -1,10 +1,9 @@
"use client" "use client";
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"
import { cn } from "../../utils"
import * as React from "react";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { Check } from "lucide-react";
import { cn } from "../../utils";
const Checkbox = React.forwardRef< const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>, React.ElementRef<typeof CheckboxPrimitive.Root>,
@ -24,7 +23,7 @@ const Checkbox = React.forwardRef<
<Check className="h-4 w-4" /> <Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator> </CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root> </CheckboxPrimitive.Root>
)) ));
Checkbox.displayName = CheckboxPrimitive.Root.displayName Checkbox.displayName = CheckboxPrimitive.Root.displayName;
export { Checkbox } export { Checkbox };

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

@ -1,14 +1,13 @@
"use client" "use client";
import * as React from "react" import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog" import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react" import { X } from "lucide-react";
import { cn } from "../../utils" import { cn } from "../../utils";
const Dialog = DialogPrimitive.Root;
const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger;
const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = ({ const DialogPortal = ({
className, className,
@ -20,8 +19,8 @@ const DialogPortal = ({
{children} {children}
</div> </div>
</DialogPrimitive.Portal> </DialogPrimitive.Portal>
) );
DialogPortal.displayName = DialogPrimitive.Portal.displayName DialogPortal.displayName = DialogPrimitive.Portal.displayName;
const DialogOverlay = React.forwardRef< const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>, React.ElementRef<typeof DialogPrimitive.Overlay>,
@ -35,8 +34,8 @@ const DialogOverlay = React.forwardRef<
)} )}
{...props} {...props}
/> />
)) ));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef< const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>, React.ElementRef<typeof DialogPrimitive.Content>,
@ -59,8 +58,8 @@ const DialogContent = React.forwardRef<
</DialogPrimitive.Close> </DialogPrimitive.Close>
</DialogPrimitive.Content> </DialogPrimitive.Content>
</DialogPortal> </DialogPortal>
)) ));
DialogContent.displayName = DialogPrimitive.Content.displayName DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({ const DialogHeader = ({
className, className,
@ -73,8 +72,8 @@ const DialogHeader = ({
)} )}
{...props} {...props}
/> />
) );
DialogHeader.displayName = "DialogHeader" DialogHeader.displayName = "DialogHeader";
const DialogFooter = ({ const DialogFooter = ({
className, className,
@ -87,8 +86,8 @@ const DialogFooter = ({
)} )}
{...props} {...props}
/> />
) );
DialogFooter.displayName = "DialogFooter" DialogFooter.displayName = "DialogFooter";
const DialogTitle = React.forwardRef< const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>, React.ElementRef<typeof DialogPrimitive.Title>,
@ -102,8 +101,8 @@ const DialogTitle = React.forwardRef<
)} )}
{...props} {...props}
/> />
)) ));
DialogTitle.displayName = DialogPrimitive.Title.displayName DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef< const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>, React.ElementRef<typeof DialogPrimitive.Description>,
@ -114,8 +113,8 @@ const DialogDescription = React.forwardRef<
className={cn("text-sm text-muted-foreground", className)} className={cn("text-sm text-muted-foreground", className)}
{...props} {...props}
/> />
)) ));
DialogDescription.displayName = DialogPrimitive.Description.displayName DialogDescription.displayName = DialogPrimitive.Description.displayName;
export { export {
Dialog, Dialog,
@ -125,4 +124,4 @@ export {
DialogFooter, DialogFooter,
DialogTitle, DialogTitle,
DialogDescription, DialogDescription,
} };

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

@ -1,6 +1,5 @@
import * as React from "react" import * as React from "react";
import { cn } from "../../utils" import { cn } from "../../utils";
export interface InputProps export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {} extends React.InputHTMLAttributes<HTMLInputElement> {}
@ -17,9 +16,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
ref={ref} ref={ref}
{...props} {...props}
/> />
) );
} }
) );
Input.displayName = "Input" Input.displayName = "Input";
export { Input } export { Input };

19
src/frontend/src/components/ui/label.tsx
View file

@ -1,14 +1,13 @@
"use client" "use client";
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "../../utils"
import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../utils";
const labelVariants = cva( const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
) );
const Label = React.forwardRef< const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>, React.ElementRef<typeof LabelPrimitive.Root>,
@ -20,7 +19,7 @@ const Label = React.forwardRef<
className={cn(labelVariants(), className)} className={cn(labelVariants(), className)}
{...props} {...props}
/> />
)) ));
Label.displayName = LabelPrimitive.Root.displayName Label.displayName = LabelPrimitive.Root.displayName;
export { Label } export { Label };

15
src/frontend/src/components/ui/switch.tsx
View file

@ -1,9 +1,8 @@
"use client" "use client";
import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"
import { cn } from "../../utils"
import * as React from "react";
import * as SwitchPrimitives from "@radix-ui/react-switch";
import { cn } from "../../utils";
const Switch = React.forwardRef< const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>, React.ElementRef<typeof SwitchPrimitives.Root>,
@ -23,7 +22,7 @@ const Switch = React.forwardRef<
)} )}
/> />
</SwitchPrimitives.Root> </SwitchPrimitives.Root>
)) ));
Switch.displayName = SwitchPrimitives.Root.displayName Switch.displayName = SwitchPrimitives.Root.displayName;
export { Switch } export { Switch };

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

@ -1,6 +1,5 @@
import * as React from "react" import * as React from "react";
import { cn } from "../../utils" import { cn } from "../../utils";
export interface TextareaProps export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {} extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@ -16,9 +15,9 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
ref={ref} ref={ref}
{...props} {...props}
/> />
) );
} }
) );
Textarea.displayName = "Textarea" Textarea.displayName = "Textarea";
export { Textarea } export { Textarea };

129
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -48,7 +48,7 @@ export default function ApiModal({ flowName }) {
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
closePopUp(); closePopUp();
} }
} }
@ -88,78 +88,69 @@ flow("Hey, have you heard of LangFlow?")`;
}, },
]; ];
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger> <DialogTrigger></DialogTrigger>
</DialogTrigger> <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[600px]">
<DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[600px]"> <DialogHeader>
<DialogHeader> <DialogTitle className="flex items-center">
<DialogTitle className="flex items-center"> <span className="pr-2">Code</span>
<span className="pr-2">
Code
</span>
<CodeBracketSquareIcon <CodeBracketSquareIcon
className="h-6 w-6 text-gray-800 pl-1 dark:text-white" className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription>
Export your flow to use it with this code. Export your flow to use it with this code.
</DialogDescription>
</DialogDescription> </DialogHeader>
</DialogHeader>
<div className="flex flex-col h-full w-full ">
<div className="flex px-5 z-10">
{tabs.map((tab, index) => (
<button key={index}
onClick={() => {
setActiveTab(index);
}}
className={
"p-2 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " +
(activeTab === index
? " bg-white dark:bg-gray-800"
: "bg-gray-100 dark:bg-gray-900")
}
>
{tab.name}
<img src={tab.image} className="w-6" />
</button>
))}
</div>
<div className="overflow-hidden px-4 py-2 sm:p-4 sm:pb-0 sm:pt-2 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
<div className="items-center mb-2">
<div className="float-right">
<button
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
onClick={copyToClipboard}
>
{isCopied ? (
<IconCheck size={18} />
) : (
<IconClipboard size={18} />
)}
{isCopied ? "Copied!" : "Copy code"}
</button>
</div>
</div>
<SyntaxHighlighter
className="h-[370px] w-full"
language={tabs[activeTab].mode}
style={oneDark}
customStyle={{ margin: 0 }}
>
{tabs[activeTab].code}
</SyntaxHighlighter>
</div>
</div>
</DialogContent>
</Dialog>
<div className="flex flex-col h-full w-full ">
<div className="flex px-5 z-10">
{tabs.map((tab, index) => (
<button
key={index}
onClick={() => {
setActiveTab(index);
}}
className={
"p-2 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " +
(activeTab === index
? " bg-white dark:bg-gray-800"
: "bg-gray-100 dark:bg-gray-900")
}
>
{tab.name}
<img src={tab.image} className="w-6" />
</button>
))}
</div>
<div className="overflow-hidden px-4 py-2 sm:p-4 sm:pb-0 sm:pt-2 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
<div className="items-center mb-2">
<div className="float-right">
<button
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
onClick={copyToClipboard}
>
{isCopied ? (
<IconCheck size={18} />
) : (
<IconClipboard size={18} />
)}
{isCopied ? "Copied!" : "Copy code"}
</button>
</div>
</div>
<SyntaxHighlighter
className="h-[370px] w-full"
language={tabs[activeTab].mode}
style={oneDark}
customStyle={{ margin: 0 }}
>
{tabs[activeTab].code}
</SyntaxHighlighter>
</div>
</div>
</DialogContent>
</Dialog>
); );
} }

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

@ -43,7 +43,6 @@ import {
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
export default function EditNodeModal({ data }: { data: NodeDataType }) { export default function EditNodeModal({ data }: { data: NodeDataType }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const [nodeLength, setNodeLength] = useState( const [nodeLength, setNodeLength] = useState(
@ -66,263 +65,272 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
const { types } = useContext(typesContext); const { types } = useContext(typesContext);
const ref = useRef(); const ref = useRef();
const { save } = useContext(TabsContext); const { save } = useContext(TabsContext);
const [enabled, setEnabled] = useState( const [enabled, setEnabled] = useState(false);
false if (nodeLength == 0) {
);
if(nodeLength == 0){
closePopUp(); closePopUp();
} }
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
closePopUp(); closePopUp();
} }
} }
function changeAdvanced(node): void{ function changeAdvanced(node): void {
Object.keys(data.node.template).filter((n, i) => { Object.keys(data.node.template).filter((n, i) => {
if (n === node.name) { if (n === node.name) {
data.node.template[n].advanced = !data.node.template[n].advanced; data.node.template[n].advanced = !data.node.template[n].advanced;
} }
return true; return true;
}); });
setNodeValue(!nodeValue) setNodeValue(!nodeValue);
} }
console.log(data.node.template); console.log(data.node.template);
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger> <DialogTrigger></DialogTrigger>
</DialogTrigger> <DialogContent className="lg:max-w-[700px]">
<DialogContent className="lg:max-w-[700px]"> <DialogHeader>
<DialogHeader> <DialogTitle className="flex items-center">
<DialogTitle className="flex items-center"> <span className="pr-2">Edit Node</span>
<span className="pr-2">
Edit Node
</span>
<PencilSquareIcon <PencilSquareIcon
className="h-6 w-6 text-gray-800 pl-1 dark:text-white" className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription>
Make configurations changes to your nodes. Click save when you're done. Make configurations changes to your nodes. Click save when you're
<div className="flex pt-3"> done.
<VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2">&nbsp;</VariableIcon> <div className="flex pt-3">
<span className="text-sm font-semibold text-gray-800">Parameters</span> <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2">
&nbsp;
</VariableIcon>
<span className="text-sm font-semibold text-gray-800">
Parameters
</span>
</div>
</DialogDescription>
</DialogHeader>
<div className="flex w-full h-fit max-h-[415px]">
<div
className={classNames(
"w-full rounded-lg bg-white dark:bg-gray-800 shadow",
nodeLength > limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden"
)}
>
{nodeLength > 0 && (
<div className="flex flex-col gap-5 h-fit">
<Table className="table-fixed">
<TableHeader className="border-gray-200 text-gray-500 text-xs font-medium">
<TableRow>
<TableHead className="h-7 text-center">PARAM</TableHead>
<TableHead className="p-0 h-7 text-center">
VALUE
</TableHead>
<TableHead className="text-center h-7">SHOW</TableHead>
</TableRow>
</TableHeader>
<TableBody className="p-0">
{Object.keys(data.node.template)
.filter(
(t) =>
t.charAt(0) !== "_" &&
data.node.template[t].show &&
(data.node.template[t].type === "str" ||
data.node.template[t].type === "bool" ||
data.node.template[t].type === "float" ||
data.node.template[t].type === "code" ||
data.node.template[t].type === "prompt" ||
data.node.template[t].type === "file" ||
data.node.template[t].type === "Any" ||
data.node.template[t].type === "int")
)
.map((n, i) => (
<TableRow key={i} className="h-8">
<TableCell className="p-0 text-center text-gray-900 text-xs">
{data.node.template[n].name
? data.node.template[n].name
: data.node.template[n].display_name}
</TableCell>
<TableCell className="p-0 text-center text-gray-900 text-xs w-[300px]">
{data.node.template[n].type === "str" &&
!data.node.template[n].options ? (
<div className="mx-auto">
{data.node.template[n].list ? (
<InputListComponent
disabled={false}
value={
!data.node.template[n].value ||
data.node.template[n].value === ""
? [""]
: data.node.template[n].value
}
onChange={(t: string[]) => {
data.node.template[n].value = t;
save();
}}
/>
) : data.node.template[n].multiline ? (
<TextAreaComponent
disabled={false}
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
data.node.template[n].value = t;
save();
}}
/>
) : (
<InputComponent
editNode={true}
disabled={false}
password={
data.node.template[n].password ?? false
}
value={data.node.template[n].value ?? ""}
onChange={(t) => {
data.node.template[n].value = t;
save();
}}
/>
)}
</div>
) : data.node.template[n].type === "bool" ? (
<div className="ml-auto">
{" "}
<ToggleShadComponent
enabled={data.node.template[n].value}
setEnabled={(e) => {
data.node.template[n].value = e;
setEnabled(e);
save();
}}
disabled={false}
/>
</div>
) : data.node.template[n].type === "float" ? (
<div className="mx-auto">
<FloatComponent
disabled={false}
editNode={true}
value={data.node.template[n].value ?? ""}
onChange={(t) => {
data.node.template[n].value = t;
save();
}}
/>
</div>
) : data.node.template[n].type === "str" &&
data.node.template[n].options ? (
<div className="mx-auto">
<Dropdown
editNode={true}
options={data.node.template[n].options}
onSelect={(newValue) =>
(data.node.template[n].value = newValue)
}
value={
data.node.template[n].value ??
"Choose an option"
}
></Dropdown>
</div>
) : data.node.template[n].type === "int" ? (
<div className="mx-auto">
<IntComponent
disabled={false}
editNode={true}
value={data.node.template[n].value ?? ""}
onChange={(t) => {
data.node.template[n].value = t;
save();
}}
/>
</div>
) : data.node.template[n].type === "file" ? (
<div className="mx-auto">
<InputFileComponent
editNode={true}
disabled={false}
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
data.node.template[n].value = t;
}}
fileTypes={data.node.template[n].fileTypes}
suffixes={data.node.template[n].suffixes}
onFileChange={(t: string) => {
data.node.template[n].content = t;
save();
}}
></InputFileComponent>
</div>
) : data.node.template[n].type === "prompt" ? (
<div className="mx-auto">
<PromptAreaComponent
editNode={true}
disabled={false}
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
data.node.template[n].value = t;
save();
}}
/>
</div>
) : data.node.template[n].type === "code" ? (
<div className="mx-auto">
<CodeAreaComponent
disabled={false}
editNode={true}
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
data.node.template[n].value = t;
save();
}}
/>
</div>
) : data.node.template[n].type === "Any" ? (
"-"
) : (
<div className="hidden"></div>
)}
</TableCell>
<TableCell className="p-0 text-right">
<div className="items-center text-center">
<ToggleShadComponent
enabled={!data.node.template[n].advanced}
setEnabled={(e) =>
changeAdvanced(data.node.template[n])
}
disabled={false}
/>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
)}
</div> </div>
</div>
</DialogDescription> <DialogFooter>
</DialogHeader> <Button
className="mt-3"
<div className="flex w-full h-fit max-h-[415px]"> onClick={() => {
setModalOpen(false);
<div }}
className={classNames( type="submit"
"w-full rounded-lg bg-white dark:bg-gray-800 shadow", >
nodeLength > limitScrollFieldsModal Save changes
? "overflow-scroll overflow-x-hidden custom-scroll" </Button>
: "overflow-hidden" </DialogFooter>
)} </DialogContent>
> </Dialog>
{
nodeLength > 0 &&
<div className="flex flex-col gap-5 h-fit">
<Table className="table-fixed">
<TableHeader className="border-gray-200 text-gray-500 text-xs font-medium">
<TableRow>
<TableHead className="h-7 text-center">
PARAM
</TableHead>
<TableHead className="p-0 h-7 text-center">VALUE</TableHead>
<TableHead className="text-center h-7">SHOW</TableHead>
</TableRow>
</TableHeader>
<TableBody className="p-0">
{ Object.keys(data.node.template).filter(
(t) =>
t.charAt(0) !== "_" &&
data.node.template[t].show &&
(data.node.template[t].type === "str" ||
data.node.template[t].type === "bool" ||
data.node.template[t].type === "float" ||
data.node.template[t].type === "code" ||
data.node.template[t].type === "prompt" ||
data.node.template[t].type === "file" ||
data.node.template[t].type === "Any" ||
data.node.template[t].type === "int")
)
.map((n, i) => (
<TableRow key={i} className="h-8">
<TableCell className="p-0 text-center text-gray-900 text-xs">
{data.node.template[n].name
? data.node.template[n].name
: data.node.template[n].display_name}
</TableCell>
<TableCell className="p-0 text-center text-gray-900 text-xs w-[300px]">
{data.node.template[n].type === "str" && !data.node.template[n].options ? (
<div className="mx-auto">
{data.node.template[n].list ? (
<InputListComponent
disabled={false}
value={
!data.node.template[n].value ||
data.node.template[n].value === ""
? [""]
: data.node.template[n].value
}
onChange={(t: string[]) => {
data.node.template[n].value = t;
save();
}}
/>
) : data.node.template[n].multiline ? (
<TextAreaComponent
disabled={false}
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
data.node.template[n].value = t;
save();
}}
/>
) : (
<InputComponent
editNode={true}
disabled={false}
password={data.node.template[n].password ?? false}
value={data.node.template[n].value ?? ""}
onChange={(t) => {
data.node.template[n].value = t;
save();
}}
/>
)}
</div>
) : data.node.template[n].type === "bool" ? (
<div className="ml-auto">
{" "}
<ToggleShadComponent
enabled={data.node.template[n].value}
setEnabled={(e) => {
data.node.template[n].value = e;
setEnabled(e);
save();
}}
disabled={false} />
</div>
) : data.node.template[n].type === "float" ? (
<div className="mx-auto">
<FloatComponent
disabled={false}
editNode={true}
value={data.node.template[n].value ?? ""}
onChange={(t) => {
data.node.template[n].value = t;
save();
}}
/>
</div>
) : data.node.template[n].type === "str" && data.node.template[n].options ? (
<div className="mx-auto">
<Dropdown
editNode={true}
options={data.node.template[n].options}
onSelect={(newValue) => (data.node.template[n].value = newValue)}
value={data.node.template[n].value ?? "Choose an option"}
></Dropdown>
</div>
) : data.node.template[n].type === "int" ? (
<div className="mx-auto">
<IntComponent
disabled={false}
editNode={true}
value={data.node.template[n].value ?? ""}
onChange={(t) => {
data.node.template[n].value = t;
save();
}}
/>
</div>
) : data.node.template[n].type === "file" ? (
<div className="mx-auto">
<InputFileComponent
editNode={true}
disabled={false}
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
data.node.template[n].value = t;
}}
fileTypes={data.node.template[n].fileTypes}
suffixes={data.node.template[n].suffixes}
onFileChange={(t: string) => {
data.node.template[n].content = t;
save();
}}
></InputFileComponent>
</div>
) : data.node.template[n].type === "prompt" ? (
<div className="mx-auto">
<PromptAreaComponent
editNode={true}
disabled={false}
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
data.node.template[n].value = t;
save();
}}
/>
</div>
) : data.node.template[n].type === "code" ? (
<div className="mx-auto">
<CodeAreaComponent
disabled={false}
editNode={true}
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
data.node.template[n].value = t;
save();
}}
/>
</div>
)
: data.node.template[n].type === "Any" ? "-" : (
<div className="hidden"></div>
) }
</TableCell>
<TableCell className="p-0 text-right">
<div className="items-center text-center">
<ToggleShadComponent
enabled={!data.node.template[n].advanced}
setEnabled={(e) => changeAdvanced(data.node.template[n])}
disabled={false} />
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>}
</div>
</div>
<DialogFooter>
<Button
className="mt-3"
onClick={() => {
setModalOpen(false);
}}
type="submit">Save changes</Button>
</DialogFooter>
</DialogContent>
</Dialog>
); );
} }

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

@ -44,100 +44,89 @@ export default function CodeAreaModal({
} }
} }
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger> <DialogTrigger></DialogTrigger>
</DialogTrigger> <DialogContent className="lg:max-w-[700px] h-[500px]">
<DialogContent className="lg:max-w-[700px] h-[500px]"> <DialogHeader>
<DialogHeader> <DialogTitle className="flex items-center">
<DialogTitle className="flex items-center"> <span className="pr-2">Edit Code</span>
<span className="pr-2">
Edit Code
</span>
<CommandLineIcon <CommandLineIcon
className="h-6 w-6 text-gray-800 pl-1 dark:text-white" className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription>
Make configurations changes to your nodes. Click save when you're done. Make configurations changes to your nodes. Click save when you're
done.
</DialogDescription>
</DialogHeader>
</DialogDescription> <div className="flex h-full w-full mt-2">
</DialogHeader> <AceEditor
value={code}
mode="python"
highlightActiveLine={true}
showPrintMargin={false}
fontSize={14}
showGutter
enableLiveAutocompletion
theme={dark ? "twilight" : "github"}
name="CodeEditor"
onChange={(value) => {
setCode(value);
}}
className="w-full rounded-lg h-[300px] custom-scroll"
/>
</div>
<DialogFooter>
<div className="flex h-full w-full mt-2"> <Button
<AceEditor className="mt-3"
value={code} onClick={() => {
mode="python" checkCode(code)
highlightActiveLine={true} .then((apiReturn) => {
showPrintMargin={false} if (apiReturn.data) {
fontSize={14} let importsErrors = apiReturn.data.imports.errors;
showGutter let funcErrors = apiReturn.data.function.errors;
enableLiveAutocompletion if (funcErrors.length === 0 && importsErrors.length === 0) {
theme={dark ? "twilight" : "github"} setSuccessData({
name="CodeEditor" title: "Code is ready to run",
onChange={(value) => { });
setCode(value); setModalOpen(false);
}} setValue(code);
className="w-full rounded-lg h-[300px] custom-scroll" } else {
/> if (funcErrors.length !== 0) {
setErrorData({
</div> title: "There is an error in your function",
list: funcErrors,
});
}
<DialogFooter> if (importsErrors.length !== 0) {
<Button setErrorData({
className="mt-3" title: "There is an error in your imports",
onClick={() => { list: importsErrors,
checkCode(code) });
.then((apiReturn) => { }
if (apiReturn.data) { }
let importsErrors = apiReturn.data.imports.errors; } else {
let funcErrors = apiReturn.data.function.errors; setErrorData({
if ( title: "Something went wrong, please try again",
funcErrors.length === 0 && });
importsErrors.length === 0 }
) { })
setSuccessData({ .catch((_) =>
title: "Code is ready to run",
});
setModalOpen(false);
setValue(code);
} else {
if (funcErrors.length !== 0) {
setErrorData({ setErrorData({
title: "There is an error in your function", title:
list: funcErrors, "There is something wrong with this code, please review it",
}); })
} );
if (importsErrors.length !== 0) { }}
setErrorData({ type="submit"
title: "There is an error in your imports", >
list: importsErrors, Check & Save
}); </Button>
} </DialogFooter>
} </DialogContent>
} else { </Dialog>
setErrorData({
title: "Something went wrong, please try again",
});
}
})
.catch((_) =>
setErrorData({
title:
"There is something wrong with this code, please review it",
})
);
}}
type="submit">Check & Save</Button>
</DialogFooter>
</DialogContent>
</Dialog>
); );
} }

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

@ -41,98 +41,88 @@ export default function ExportModal() {
const [checked, setChecked] = useState(true); const [checked, setChecked] = useState(true);
const [name, setName] = useState(flows[tabIndex].name); const [name, setName] = useState(flows[tabIndex].name);
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}>
<Dialog open={true} onOpenChange={setModalOpen} > <DialogTrigger asChild></DialogTrigger>
<DialogTrigger asChild> <DialogContent className="lg:max-w-[600px] h-[450px]">
<DialogHeader>
</DialogTrigger> <DialogTitle className="flex items-center">
<DialogContent className="lg:max-w-[600px] h-[450px]"> <span className="pr-2">Export</span>
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">
Export
</span>
<ArrowDownTrayIcon <ArrowDownTrayIcon
className="h-6 w-6 text-gray-800 pl-1 dark:text-white" className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription>
Make configurations changes to your nodes. Click save when you're done. Make configurations changes to your nodes. Click save when you're
done.
</DialogDescription>
</DialogHeader>
</DialogDescription> <Label>
</DialogHeader>
<Label>
<span className="font-medium">Name</span> <span className="font-medium">Name</span>
<Input <Input
className="mt-2" className="mt-2"
onChange={(event) => { onChange={(event) => {
if (event.target.value != "") { if (event.target.value != "") {
let newFlow = flows[tabIndex]; let newFlow = flows[tabIndex];
newFlow.name = event.target.value; newFlow.name = event.target.value;
setName(event.target.value); setName(event.target.value);
updateFlow(newFlow); updateFlow(newFlow);
} else { } else {
setName(event.target.value); setName(event.target.value);
} }
}} }}
type="text" type="text"
name="name" name="name"
value={name ?? null} value={name ?? null}
placeholder="File name" placeholder="File name"
id="name" id="name"
/> />
</Label> </Label>
<Label> <Label>
<span className="font-medium">Description (optional)</span> <span className="font-medium">Description (optional)</span>
<Textarea <Textarea
name="description"
name="description" id="description"
id="description" onChange={(event) => {
onChange={(event) => { let newFlow = flows[tabIndex];
let newFlow = flows[tabIndex]; newFlow.description = event.target.value;
newFlow.description = event.target.value; updateFlow(newFlow);
updateFlow(newFlow); }}
}} value={flows[tabIndex].description ?? null}
value={flows[tabIndex].description ?? null} placeholder="Flow description"
placeholder="Flow description" className="max-h-[100px] mt-2"
className="max-h-[100px] mt-2" rows={3}
rows={3} /> />
</Label>
</Label> <div className="flex items-center space-x-2">
<div className="flex items-center space-x-2"> <Checkbox
<Checkbox id="terms" id="terms"
onCheckedChange={(event: boolean) => { onCheckedChange={(event: boolean) => {
setChecked(event); setChecked(event);
}} }}
/>
/> <label
<label htmlFor="terms"
htmlFor="terms" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" >
> Save with my API keys
Save with my API keys </label>
</label> </div>
</div>
<DialogFooter>
<Button
onClick={() => {
if (checked) downloadFlow(flows[tabIndex]);
else downloadFlow(removeApiKeys(flows[tabIndex]));
}}
type="submit">Download Flow</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<DialogFooter>
<Button
onClick={() => {
if (checked) downloadFlow(flows[tabIndex]);
else downloadFlow(removeApiKeys(flows[tabIndex]));
}}
type="submit"
>
Download Flow
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
); );
} }

159
src/frontend/src/modals/genericModal/index.tsx
View file

@ -42,102 +42,91 @@ export default function PromptAreaModal({
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
closePopUp(); closePopUp();
} }
} }
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger> <DialogTrigger></DialogTrigger>
</DialogTrigger> <DialogContent className="lg:max-w-[700px]">
<DialogContent className="lg:max-w-[700px]"> <DialogHeader>
<DialogHeader> <DialogTitle className="flex items-center">
<DialogTitle className="flex items-center"> <span className="pr-2">{myModalTitle}</span>
<span className="pr-2">
{myModalTitle}
</span>
<DocumentTextIcon <DocumentTextIcon
className="h-6 w-6 text-gray-800 pl-1 dark:text-white" className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription>
Make configurations changes to your nodes. Click save when you're done. Make configurations changes to your nodes. Click save when you're
done.
</DialogDescription>
</DialogHeader>
</DialogDescription> <div className="flex h-full w-full mt-2">
</DialogHeader> <Textarea
ref={ref}
className="form-input h-[300px] w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
value={myValue}
onChange={(e) => {
setMyValue(e.target.value);
setValue(e.target.value);
}}
placeholder="Type message here."
/>
</div>
<DialogFooter>
<div className="flex h-full w-full mt-2"> <Button
<Textarea className="mt-3"
ref={ref} onClick={() => {
className="form-input h-[300px] w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white" switch (myModalType) {
value={myValue} case 1:
onChange={(e) => { setModalOpen(false);
setMyValue(e.target.value); break;
setValue(e.target.value); case 2:
}} checkPrompt(myValue)
placeholder="Type message here." /> .then((apiReturn) => {
if (apiReturn.data) {
</div> let inputVariables = apiReturn.data.input_variables;
if (inputVariables.length === 0) {
setErrorData({
title:
<DialogFooter> "The template you are attempting to use does not contain any variables for data entry.",
<Button });
className="mt-3" } else {
onClick={() => { setSuccessData({
switch (myModalType) { title: "Prompt is ready",
case 1: });
setModalOpen(false); setModalOpen(false);
break; setValue(myValue);
case 2: }
checkPrompt(myValue) } else {
.then((apiReturn) => { setErrorData({
if (apiReturn.data) { title: "Something went wrong, please try again",
let inputVariables = });
apiReturn.data.input_variables; }
if (inputVariables.length === 0) { })
setErrorData({ .catch((error) => {
title: return setErrorData({
"The template you are attempting to use does not contain any variables for data entry.", title:
"There is something wrong with this prompt, please review it",
list: [error.response.data.detail],
});
}); });
} else { break;
setSuccessData({
title: "Prompt is ready",
});
setModalOpen(false);
setValue(myValue);
}
} else {
setErrorData({
title:
"Something went wrong, please try again",
});
}
})
.catch((error) => {
return setErrorData({
title:
"There is something wrong with this prompt, please review it",
list: [error.response.data.detail],
});
});
break;
default:
break;
}
}}
type="submit">{myButtonText}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
default:
break;
}
}}
type="submit"
>
{myButtonText}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
); );
} }

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

@ -18,23 +18,22 @@ import EditNodeModal from "../../../../modals/EditNodeModal";
import TooltipReact from "../../../../components/ReactTooltipComponent"; import TooltipReact from "../../../../components/ReactTooltipComponent";
const NodeToolbarComponent = (props) => { const NodeToolbarComponent = (props) => {
const [nodeLength, setNodeLength] = useState( const [nodeLength, setNodeLength] = useState(
Object.keys(props.data.node.template).filter( Object.keys(props.data.node.template).filter(
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
props.data.node.template[t].show && props.data.node.template[t].show &&
(props.data.node.template[t].type === "str" || (props.data.node.template[t].type === "str" ||
props.data.node.template[t].type === "bool" || props.data.node.template[t].type === "bool" ||
props.data.node.template[t].type === "float" || props.data.node.template[t].type === "float" ||
props.data.node.template[t].type === "code" || props.data.node.template[t].type === "code" ||
props.data.node.template[t].type === "prompt" || props.data.node.template[t].type === "prompt" ||
props.data.node.template[t].type === "file" || props.data.node.template[t].type === "file" ||
props.data.node.template[t].type === "Any" || props.data.node.template[t].type === "Any" ||
props.data.node.template[t].type === "int") props.data.node.template[t].type === "int")
).length ).length
); );
const { setLastCopiedSelection, paste } = useContext(TabsContext); const { setLastCopiedSelection, paste } = useContext(TabsContext);
const reactFlowInstance = useReactFlow(); const reactFlowInstance = useReactFlow();
return ( return (
@ -109,12 +108,11 @@ const NodeToolbarComponent = (props) => {
position="top" position="top"
> >
<button <button
className={ className={classNames(
classNames( nodeLength > 0
nodeLength > 0 ? ? "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
"hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10" : : "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
"hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md" )}
)}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
console.log(reactFlowInstance.getNode(props.data.id)); console.log(reactFlowInstance.getNode(props.data.id));
@ -136,23 +134,24 @@ const NodeToolbarComponent = (props) => {
</button> </button>
</TooltipReact> </TooltipReact>
{nodeLength > 0 && <TooltipReact {nodeLength > 0 && (
delayShow={1000} <TooltipReact
selector="Edit" delayShow={1000}
htmlContent="Edit" selector="Edit"
position="top" htmlContent="Edit"
> position="top"
<button >
className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md" <button
onClick={(event) => { className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
event.preventDefault(); onClick={(event) => {
props.openPopUp(<EditNodeModal data={props.data} />); event.preventDefault();
}} props.openPopUp(<EditNodeModal data={props.data} />);
> }}
<PencilSquareIcon className="w-5 h-5 dark:text-gray-300"></PencilSquareIcon> >
</button> <PencilSquareIcon className="w-5 h-5 dark:text-gray-300"></PencilSquareIcon>
</TooltipReact>} </button>
</TooltipReact>
)}
{/* {/*
<Menu as="div" className="relative inline-block text-left z-100"> <Menu as="div" className="relative inline-block text-left z-100">

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

@ -47,11 +47,11 @@ import { WolframIcon } from "./icons/Wolfram";
import { WordIcon } from "./icons/Word"; import { WordIcon } from "./icons/Word";
import { SerperIcon } from "./icons/Serper"; import { SerperIcon } from "./icons/Serper";
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from "uuid";
import { clsx, type ClassValue } from "clsx" import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge" import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs));
} }
export function classNames(...classes: Array<string>) { export function classNames(...classes: Array<string>) {
@ -637,5 +637,4 @@ export function updateIds(newFlow, getNodeId) {
e.target + e.target +
e.targetHandle; e.targetHandle;
}); });
} }