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

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

@ -39,8 +39,9 @@ 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"
: "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" : "") (disabled ? " bg-gray-200" : "")
} }
> >
@ -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>

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

@ -8,7 +8,7 @@ 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
@ -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 <Listbox.Button
className= className={
{editNode ? editNode
"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" : ? "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"} : "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"
@ -55,10 +61,11 @@ export default function Dropdown({
> >
<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}
@ -70,10 +77,9 @@ export default function Dropdown({
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}

11
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"
: "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" : "") (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);

25
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={ className={classNames(
classNames( editNode
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 pr-2 items-center 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>
); );
} }

11
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"
: "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" : "") (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>

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

@ -8,7 +8,7 @@ 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);
@ -55,8 +55,9 @@ 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"
: "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" : "") (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
} }
placeholder={editNode ? "Integer number" : "Type a integer number"} placeholder={editNode ? "Integer number" : "Type a integer number"}

16
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,8 +44,9 @@ 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"
: "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" : "") (disabled ? " bg-gray-200" : "")
} }
> >
@ -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>

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

@ -17,14 +17,13 @@ export default function ToggleShadComponent({
<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 };

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

@ -88,34 +88,27 @@ 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"> <span className="pr-2">Code</span>
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 flex-col h-full w-full ">
<div className="flex px-5 z-10"> <div className="flex px-5 z-10">
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<button key={index} <button
key={index}
onClick={() => { onClick={() => {
setActiveTab(index); setActiveTab(index);
}} }}
@ -146,7 +139,6 @@ flow("Hey, have you heard of LangFlow?")`;
{isCopied ? "Copied!" : "Copy code"} {isCopied ? "Copied!" : "Copy code"}
</button> </button>
</div> </div>
</div> </div>
<SyntaxHighlighter <SyntaxHighlighter
className="h-[370px] w-full" className="h-[370px] w-full"
@ -160,6 +152,5 @@ flow("Hey, have you heard of LangFlow?")`;
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
} }

340
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,10 +65,8 @@ 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();
} }
@ -80,71 +77,68 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
} }
} }
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"> <span className="pr-2">Edit Node</span>
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
done.
<div className="flex pt-3"> <div className="flex pt-3">
<VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2">&nbsp;</VariableIcon> <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2">
<span className="text-sm font-semibold text-gray-800">Parameters</span> &nbsp;
</VariableIcon>
<span className="text-sm font-semibold text-gray-800">
Parameters
</span>
</div> </div>
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex w-full h-fit max-h-[415px]"> <div className="flex w-full h-fit max-h-[415px]">
<div
<div
className={classNames( className={classNames(
"w-full rounded-lg bg-white dark:bg-gray-800 shadow", "w-full rounded-lg bg-white dark:bg-gray-800 shadow",
nodeLength > limitScrollFieldsModal nodeLength > limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll" ? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden" : "overflow-hidden"
)} )}
> >
{ {nodeLength > 0 && (
nodeLength > 0 &&
<div className="flex flex-col gap-5 h-fit"> <div className="flex flex-col gap-5 h-fit">
<Table className="table-fixed"> <Table className="table-fixed">
<TableHeader className="border-gray-200 text-gray-500 text-xs font-medium"> <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium">
<TableRow> <TableRow>
<TableHead className="h-7 text-center"> <TableHead className="h-7 text-center">PARAM</TableHead>
PARAM <TableHead className="p-0 h-7 text-center">
VALUE
</TableHead> </TableHead>
<TableHead className="p-0 h-7 text-center">VALUE</TableHead>
<TableHead className="text-center h-7">SHOW</TableHead> <TableHead className="text-center h-7">SHOW</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody className="p-0"> <TableBody className="p-0">
{ Object.keys(data.node.template).filter( {Object.keys(data.node.template)
.filter(
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
data.node.template[t].show && data.node.template[t].show &&
@ -165,154 +159,165 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
: data.node.template[n].display_name} : data.node.template[n].display_name}
</TableCell> </TableCell>
<TableCell className="p-0 text-center text-gray-900 text-xs w-[300px]"> <TableCell className="p-0 text-center text-gray-900 text-xs w-[300px]">
{data.node.template[n].type === "str" &&
{data.node.template[n].type === "str" && !data.node.template[n].options ? ( !data.node.template[n].options ? (
<div className="mx-auto"> <div className="mx-auto">
{data.node.template[n].list ? ( {data.node.template[n].list ? (
<InputListComponent <InputListComponent
disabled={false} disabled={false}
value={ value={
!data.node.template[n].value || !data.node.template[n].value ||
data.node.template[n].value === "" data.node.template[n].value === ""
? [""] ? [""]
: data.node.template[n].value : data.node.template[n].value
} }
onChange={(t: string[]) => { onChange={(t: string[]) => {
data.node.template[n].value = t; data.node.template[n].value = t;
save(); save();
}} }}
/> />
) : data.node.template[n].multiline ? ( ) : data.node.template[n].multiline ? (
<TextAreaComponent <TextAreaComponent
disabled={false} disabled={false}
value={data.node.template[n].value ?? ""} value={data.node.template[n].value ?? ""}
onChange={(t: string) => { onChange={(t: string) => {
data.node.template[n].value = t; data.node.template[n].value = t;
save(); save();
}} }}
/> />
) : ( ) : (
<InputComponent <InputComponent
editNode={true} editNode={true}
disabled={false} disabled={false}
password={data.node.template[n].password ?? false} password={
value={data.node.template[n].value ?? ""} data.node.template[n].password ?? false
onChange={(t) => { }
data.node.template[n].value = t; value={data.node.template[n].value ?? ""}
save(); onChange={(t) => {
}} data.node.template[n].value = t;
/> save();
)} }}
</div> />
) : data.node.template[n].type === "bool" ? ( )}
<div className="ml-auto"> </div>
{" "} ) : data.node.template[n].type === "bool" ? (
<ToggleShadComponent <div className="ml-auto">
enabled={data.node.template[n].value} {" "}
setEnabled={(e) => { <ToggleShadComponent
data.node.template[n].value = e; enabled={data.node.template[n].value}
setEnabled(e); setEnabled={(e) => {
save(); data.node.template[n].value = e;
}} setEnabled(e);
disabled={false} /> save();
</div> }}
) : data.node.template[n].type === "float" ? ( disabled={false}
<div className="mx-auto"> />
<FloatComponent </div>
disabled={false} ) : data.node.template[n].type === "float" ? (
editNode={true} <div className="mx-auto">
value={data.node.template[n].value ?? ""} <FloatComponent
onChange={(t) => { disabled={false}
data.node.template[n].value = t; editNode={true}
save(); value={data.node.template[n].value ?? ""}
}} onChange={(t) => {
/> data.node.template[n].value = t;
</div> save();
) : data.node.template[n].type === "str" && data.node.template[n].options ? ( }}
<div className="mx-auto"> />
<Dropdown </div>
editNode={true} ) : data.node.template[n].type === "str" &&
options={data.node.template[n].options} data.node.template[n].options ? (
onSelect={(newValue) => (data.node.template[n].value = newValue)} <div className="mx-auto">
value={data.node.template[n].value ?? "Choose an option"} <Dropdown
></Dropdown> editNode={true}
</div> options={data.node.template[n].options}
) : data.node.template[n].type === "int" ? ( onSelect={(newValue) =>
<div className="mx-auto"> (data.node.template[n].value = newValue)
<IntComponent }
disabled={false} value={
editNode={true} data.node.template[n].value ??
value={data.node.template[n].value ?? ""} "Choose an option"
onChange={(t) => { }
data.node.template[n].value = t; ></Dropdown>
save(); </div>
}} ) : data.node.template[n].type === "int" ? (
/> <div className="mx-auto">
</div> <IntComponent
) : data.node.template[n].type === "file" ? ( disabled={false}
<div className="mx-auto"> editNode={true}
<InputFileComponent value={data.node.template[n].value ?? ""}
editNode={true} onChange={(t) => {
disabled={false} data.node.template[n].value = t;
value={data.node.template[n].value ?? ""} save();
onChange={(t: string) => { }}
data.node.template[n].value = t; />
}} </div>
fileTypes={data.node.template[n].fileTypes} ) : data.node.template[n].type === "file" ? (
suffixes={data.node.template[n].suffixes} <div className="mx-auto">
onFileChange={(t: string) => { <InputFileComponent
data.node.template[n].content = t; editNode={true}
save(); disabled={false}
}} value={data.node.template[n].value ?? ""}
></InputFileComponent> onChange={(t: string) => {
</div> data.node.template[n].value = t;
) : data.node.template[n].type === "prompt" ? ( }}
<div className="mx-auto"> fileTypes={data.node.template[n].fileTypes}
<PromptAreaComponent suffixes={data.node.template[n].suffixes}
editNode={true} onFileChange={(t: string) => {
disabled={false} data.node.template[n].content = t;
value={data.node.template[n].value ?? ""} save();
onChange={(t: string) => { }}
data.node.template[n].value = t; ></InputFileComponent>
save(); </div>
}} ) : data.node.template[n].type === "prompt" ? (
/> <div className="mx-auto">
</div> <PromptAreaComponent
) : data.node.template[n].type === "code" ? ( editNode={true}
<div className="mx-auto"> disabled={false}
<CodeAreaComponent value={data.node.template[n].value ?? ""}
disabled={false} onChange={(t: string) => {
editNode={true} data.node.template[n].value = t;
value={data.node.template[n].value ?? ""} save();
onChange={(t: string) => { }}
data.node.template[n].value = t; />
save(); </div>
}} ) : data.node.template[n].type === "code" ? (
/> <div className="mx-auto">
</div> <CodeAreaComponent
) disabled={false}
: data.node.template[n].type === "Any" ? "-" : ( editNode={true}
<div className="hidden"></div> 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>
<TableCell className="p-0 text-right"> <TableCell className="p-0 text-right">
<div className="items-center text-center"> <div className="items-center text-center">
<ToggleShadComponent <ToggleShadComponent
enabled={!data.node.template[n].advanced} enabled={!data.node.template[n].advanced}
setEnabled={(e) => changeAdvanced(data.node.template[n])} setEnabled={(e) =>
disabled={false} /> changeAdvanced(data.node.template[n])
}
disabled={false}
/>
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
</Table> </Table>
</div>} </div>
</div> )}
</div> </div>
</div>
<DialogFooter> <DialogFooter>
<Button <Button
@ -320,7 +325,10 @@ save();
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}
type="submit">Save changes</Button> type="submit"
>
Save changes
</Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

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

@ -44,29 +44,23 @@ 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"> <span className="pr-2">Edit Code</span>
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> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex h-full w-full mt-2"> <div className="flex h-full w-full mt-2">
<AceEditor <AceEditor
value={code} value={code}
@ -83,11 +77,8 @@ export default function CodeAreaModal({
}} }}
className="w-full rounded-lg h-[300px] custom-scroll" className="w-full rounded-lg h-[300px] custom-scroll"
/> />
</div> </div>
<DialogFooter> <DialogFooter>
<Button <Button
className="mt-3" className="mt-3"
@ -97,10 +88,7 @@ export default function CodeAreaModal({
if (apiReturn.data) { if (apiReturn.data) {
let importsErrors = apiReturn.data.imports.errors; let importsErrors = apiReturn.data.imports.errors;
let funcErrors = apiReturn.data.function.errors; let funcErrors = apiReturn.data.function.errors;
if ( if (funcErrors.length === 0 && importsErrors.length === 0) {
funcErrors.length === 0 &&
importsErrors.length === 0
) {
setSuccessData({ setSuccessData({
title: "Code is ready to run", title: "Code is ready to run",
}); });
@ -133,11 +121,12 @@ export default function CodeAreaModal({
}) })
); );
}} }}
type="submit"
type="submit">Check & Save</Button> >
Check & Save
</Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
} }

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

@ -41,26 +41,20 @@ 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>
</DialogTrigger>
<DialogContent className="lg:max-w-[600px] h-[450px]"> <DialogContent className="lg:max-w-[600px] h-[450px]">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2"> <span className="pr-2">Export</span>
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> </DialogDescription>
</DialogHeader> </DialogHeader>
@ -85,11 +79,10 @@ export default function ExportModal() {
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) => {
@ -100,15 +93,15 @@ export default function ExportModal() {
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 id="terms" <Checkbox
id="terms"
onCheckedChange={(event: boolean) => { onCheckedChange={(event: boolean) => {
setChecked(event); setChecked(event);
}} }}
/> />
<label <label
htmlFor="terms" htmlFor="terms"
@ -124,15 +117,12 @@ export default function ExportModal() {
if (checked) downloadFlow(flows[tabIndex]); if (checked) downloadFlow(flows[tabIndex]);
else downloadFlow(removeApiKeys(flows[tabIndex])); else downloadFlow(removeApiKeys(flows[tabIndex]));
}} }}
type="submit"
type="submit">Download Flow</Button> >
Download Flow
</Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
} }

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

@ -47,30 +47,23 @@ export default function PromptAreaModal({
} }
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"> <span className="pr-2">{myModalTitle}</span>
{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> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex h-full w-full mt-2"> <div className="flex h-full w-full mt-2">
<Textarea <Textarea
ref={ref} ref={ref}
@ -80,12 +73,10 @@ export default function PromptAreaModal({
setMyValue(e.target.value); setMyValue(e.target.value);
setValue(e.target.value); setValue(e.target.value);
}} }}
placeholder="Type message here." /> placeholder="Type message here."
/>
</div> </div>
<DialogFooter> <DialogFooter>
<Button <Button
className="mt-3" className="mt-3"
@ -98,8 +89,7 @@ export default function PromptAreaModal({
checkPrompt(myValue) checkPrompt(myValue)
.then((apiReturn) => { .then((apiReturn) => {
if (apiReturn.data) { if (apiReturn.data) {
let inputVariables = let inputVariables = apiReturn.data.input_variables;
apiReturn.data.input_variables;
if (inputVariables.length === 0) { if (inputVariables.length === 0) {
setErrorData({ setErrorData({
title: title:
@ -114,8 +104,7 @@ export default function PromptAreaModal({
} }
} else { } else {
setErrorData({ setErrorData({
title: title: "Something went wrong, please try again",
"Something went wrong, please try again",
}); });
} }
}) })
@ -132,12 +121,12 @@ export default function PromptAreaModal({
break; break;
} }
}} }}
type="submit">{myButtonText}</Button> type="submit"
>
{myButtonText}
</Button>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
} }

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

@ -18,7 +18,6 @@ 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) =>
@ -109,11 +108,10 @@ 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();
@ -136,7 +134,8 @@ const NodeToolbarComponent = (props) => {
</button> </button>
</TooltipReact> </TooltipReact>
{nodeLength > 0 && <TooltipReact {nodeLength > 0 && (
<TooltipReact
delayShow={1000} delayShow={1000}
selector="Edit" selector="Edit"
htmlContent="Edit" htmlContent="Edit"
@ -151,8 +150,8 @@ const NodeToolbarComponent = (props) => {
> >
<PencilSquareIcon className="w-5 h-5 dark:text-gray-300"></PencilSquareIcon> <PencilSquareIcon className="w-5 h-5 dark:text-gray-300"></PencilSquareIcon>
</button> </button>
</TooltipReact>} </TooltipReact>
)}
{/* {/*
<Menu as="div" className="relative inline-block text-left z-100"> <Menu as="div" className="relative inline-block text-left z-100">

7
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;
}); });
} }