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={
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" :
"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" +
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"
: "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" : "")
}
>
@ -59,10 +60,9 @@ export default function CodeAreaComponent({
);
}}
>
{
!editNode &&
{!editNode && (
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
}
)}
</button>
</div>
</div>

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

@ -8,7 +8,7 @@ export default function Dropdown({
value,
options,
onSelect,
editNode = false
editNode = false,
}: DropDownComponentType) {
let [internalValue, setInternalValue] = useState(
value === "" || !value ? "Choose an option" : value
@ -25,20 +25,26 @@ export default function Dropdown({
>
{({ open }) => (
<>
<div className={
editNode ? "relative mt-0 w-full" :
"relative mt-1 w-full"
}>
<div
className={
editNode ? "relative mt-0 w-full" : "relative mt-1 w-full"
}
>
<Listbox.Button
className=
{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" :
"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"}
className={
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"
: "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={
editNode ? "hidden" :
"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"}>
<span
className={
editNode
? "hidden"
: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
}
>
<ChevronUpDownIcon
className="h-5 w-5 text-gray-400"
aria-hidden="true"
@ -55,10 +61,11 @@ export default function Dropdown({
>
<Listbox.Options
className={
editNode ? "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"
}>
editNode
? "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) => (
<Listbox.Option
key={id}
@ -70,10 +77,9 @@ export default function Dropdown({
active && editNode
? "text-white bg-gray-400 dark:bg-gray-500"
: "",
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-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800",
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-2 pl-3 pr-9 dark:text-gray-300 dark:bg-gray-800"
)
}
value={option}

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

@ -7,7 +7,7 @@ export default function FloatComponent({
onChange,
disableCopyPaste = false,
disabled,
editNode = false
editNode = false,
}: FloatComponentType) {
const [myValue, setMyValue] = useState(value ?? "");
const { setDisableCopyPaste } = useContext(TabsContext);
@ -34,11 +34,14 @@ export default function FloatComponent({
type="number"
value={myValue}
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" :
"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" +
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"
: "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) => {
setMyValue(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,
disabled,
password,
editNode = false
editNode = false,
}: InputComponentType) {
const [myValue, setMyValue] = useState(value ?? "");
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",
disabled ? " bg-gray-200 dark:bg-gray-700" : "",
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",
password && editNode ? "pr-8" : "pr-3",
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",
password && editNode ? "pr-8" : "pr-3"
)}
placeholder={password && editNode ? "Key" : "Type something..."}
onChange={(e) => {
@ -50,14 +52,13 @@ export default function InputComponent({
onChange(e.target.value);
}}
/>
{
password && (
{password && (
<button
className={
classNames(
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",
)
}
className={classNames(
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"
)}
onClick={() => {
setPwdVisible(!pwdVisible);
}}
@ -100,9 +101,7 @@ export default function InputComponent({
</svg>
))}
</button>
)
}
)}
</div>
);
}

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

@ -10,7 +10,7 @@ export default function InputFileComponent({
suffixes,
fileTypes,
onFileChange,
editNode = false
editNode = false,
}: FileComponentType) {
const [myValue, setMyValue] = useState(value);
const { setErrorData } = useContext(alertContext);
@ -72,17 +72,18 @@ export default function InputFileComponent({
<span
onClick={handleButtonClick}
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" :
"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" +
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"
: "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"}
</span>
<button onClick={handleButtonClick}>
{!editNode &&
{!editNode && (
<DocumentMagnifyingGlassIcon className="w-8 h-8 hover:text-blue-600" />
}
)}
</button>
</div>
</div>

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

@ -8,7 +8,7 @@ export default function IntComponent({
onChange,
disableCopyPaste = false,
disabled,
editNode = false
editNode = false,
}: FloatComponentType) {
const [myValue, setMyValue] = useState(value ?? "");
const { setDisableCopyPaste } = useContext(TabsContext);
@ -55,8 +55,9 @@ export default function IntComponent({
type="number"
value={myValue}
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" :
"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" +
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"
: "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"}

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

@ -11,7 +11,7 @@ export default function PromptAreaComponent({
value,
onChange,
disabled,
editNode = false
editNode = false,
}: TextAreaComponentType) {
const [myValue, setMyValue] = useState(value);
const { openPopUp } = useContext(PopUpContext);
@ -22,9 +22,6 @@ export default function PromptAreaComponent({
}
}, [disabled, onChange]);
return (
<div
className={
disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
@ -47,8 +44,9 @@ export default function PromptAreaComponent({
);
}}
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" :
"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" +
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"
: "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" : "")
}
>
@ -70,11 +68,9 @@ export default function PromptAreaComponent({
);
}}
>
{
!editNode &&
{!editNode && (
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
}
)}
</button>
</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" : ""}>
<Switch
style={{
transform: 'scaleX(0.6) scaleY(0.6)',
transform: "scaleX(0.6) scaleY(0.6)",
}}
checked={enabled}
onCheckedChange={(x: boolean) => {
setEnabled(x);
}}
>
</Switch>
></Switch>
</div>
);
}

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

@ -1,8 +1,7 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "../../utils"
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../utils";
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",
@ -30,26 +29,26 @@ const buttonVariants = cva(
size: "default",
},
}
)
);
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
asChild?: boolean;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
const Comp = asChild ? Slot : "button";
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...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"
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"
import { cn } from "../../utils"
"use client";
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<
React.ElementRef<typeof CheckboxPrimitive.Root>,
@ -24,7 +23,7 @@ const Checkbox = React.forwardRef<
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</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 DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"
import { cn } from "../../utils"
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import { cn } from "../../utils";
const Dialog = DialogPrimitive.Root;
const Dialog = DialogPrimitive.Root
const DialogTrigger = DialogPrimitive.Trigger
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = ({
className,
@ -20,8 +19,8 @@ const DialogPortal = ({
{children}
</div>
</DialogPrimitive.Portal>
)
DialogPortal.displayName = DialogPrimitive.Portal.displayName
);
DialogPortal.displayName = DialogPrimitive.Portal.displayName;
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
@ -35,8 +34,8 @@ const DialogOverlay = React.forwardRef<
)}
{...props}
/>
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
@ -59,8 +58,8 @@ const DialogContent = React.forwardRef<
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName
));
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({
className,
@ -73,8 +72,8 @@ const DialogHeader = ({
)}
{...props}
/>
)
DialogHeader.displayName = "DialogHeader"
);
DialogHeader.displayName = "DialogHeader";
const DialogFooter = ({
className,
@ -87,8 +86,8 @@ const DialogFooter = ({
)}
{...props}
/>
)
DialogFooter.displayName = "DialogFooter"
);
DialogFooter.displayName = "DialogFooter";
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
@ -102,8 +101,8 @@ const DialogTitle = React.forwardRef<
)}
{...props}
/>
))
DialogTitle.displayName = DialogPrimitive.Title.displayName
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
@ -114,8 +113,8 @@ const DialogDescription = React.forwardRef<
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
DialogDescription.displayName = DialogPrimitive.Description.displayName
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;
export {
Dialog,
@ -125,4 +124,4 @@ export {
DialogFooter,
DialogTitle,
DialogDescription,
}
};

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

@ -1,6 +1,5 @@
import * as React from "react"
import { cn } from "../../utils"
import * as React from "react";
import { cn } from "../../utils";
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
@ -17,9 +16,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
ref={ref}
{...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"
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"
"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";
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)
);
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
@ -20,7 +19,7 @@ const Label = React.forwardRef<
className={cn(labelVariants(), className)}
{...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"
import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"
import { cn } from "../../utils"
"use client";
import * as React from "react";
import * as SwitchPrimitives from "@radix-ui/react-switch";
import { cn } from "../../utils";
const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
@ -23,7 +22,7 @@ const Switch = React.forwardRef<
)}
/>
</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 { cn } from "../../utils"
import * as React from "react";
import { cn } from "../../utils";
export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@ -16,9 +15,9 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
ref={ref}
{...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 (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger>
</DialogTrigger>
<DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[600px]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">
Code
</span>
<span className="pr-2">Code</span>
<CodeBracketSquareIcon
className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true"
/>
</DialogTitle>
<DialogDescription>
Export your flow to use it with this code.
</DialogDescription>
</DialogHeader>
<div className="flex flex-col h-full w-full ">
<div className="flex px-5 z-10">
{tabs.map((tab, index) => (
<button key={index}
<button
key={index}
onClick={() => {
setActiveTab(index);
}}
@ -146,7 +139,6 @@ flow("Hey, have you heard of LangFlow?")`;
{isCopied ? "Copied!" : "Copy code"}
</button>
</div>
</div>
<SyntaxHighlighter
className="h-[370px] w-full"
@ -160,6 +152,5 @@ flow("Hey, have you heard of LangFlow?")`;
</div>
</DialogContent>
</Dialog>
);
}

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

@ -43,7 +43,6 @@ import {
} from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
export default function EditNodeModal({ data }: { data: NodeDataType }) {
const [open, setOpen] = useState(true);
const [nodeLength, setNodeLength] = useState(
@ -66,9 +65,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
const { types } = useContext(typesContext);
const ref = useRef();
const { save } = useContext(TabsContext);
const [enabled, setEnabled] = useState(
false
);
const [enabled, setEnabled] = useState(false);
if (nodeLength == 0) {
closePopUp();
}
@ -87,41 +84,38 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
}
return true;
});
setNodeValue(!nodeValue)
setNodeValue(!nodeValue);
}
console.log(data.node.template);
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger>
</DialogTrigger>
<DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[700px]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">
Edit Node
</span>
<span className="pr-2">Edit Node</span>
<PencilSquareIcon
className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true"
/>
</DialogTitle>
<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">
<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>
<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",
@ -130,21 +124,21 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
: "overflow-hidden"
)}
>
{
nodeLength > 0 &&
{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 className="h-7 text-center">PARAM</TableHead>
<TableHead className="p-0 h-7 text-center">
VALUE
</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(
{Object.keys(data.node.template)
.filter(
(t) =>
t.charAt(0) !== "_" &&
data.node.template[t].show &&
@ -165,8 +159,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
: 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 ? (
{data.node.template[n].type === "str" &&
!data.node.template[n].options ? (
<div className="mx-auto">
{data.node.template[n].list ? (
<InputListComponent
@ -195,7 +189,9 @@ save();
<InputComponent
editNode={true}
disabled={false}
password={data.node.template[n].password ?? false}
password={
data.node.template[n].password ?? false
}
value={data.node.template[n].value ?? ""}
onChange={(t) => {
data.node.template[n].value = t;
@ -214,7 +210,8 @@ data.node.template[n].value = e;
setEnabled(e);
save();
}}
disabled={false} />
disabled={false}
/>
</div>
) : data.node.template[n].type === "float" ? (
<div className="mx-auto">
@ -228,13 +225,19 @@ save();
}}
/>
</div>
) : data.node.template[n].type === "str" && data.node.template[n].options ? (
) : 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"}
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" ? (
@ -290,27 +293,29 @@ save();
}}
/>
</div>
)
: data.node.template[n].type === "Any" ? "-" : (
) : 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} />
setEnabled={(e) =>
changeAdvanced(data.node.template[n])
}
disabled={false}
/>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>}
</div>
)}
</div>
</div>
@ -320,7 +325,10 @@ save();
onClick={() => {
setModalOpen(false);
}}
type="submit">Save changes</Button>
type="submit"
>
Save changes
</Button>
</DialogFooter>
</DialogContent>
</Dialog>

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

@ -44,29 +44,23 @@ export default function CodeAreaModal({
}
}
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger>
</DialogTrigger>
<DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[700px] h-[500px]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">
Edit Code
</span>
<span className="pr-2">Edit Code</span>
<CommandLineIcon
className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true"
/>
</DialogTitle>
<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>
<div className="flex h-full w-full mt-2">
<AceEditor
value={code}
@ -83,11 +77,8 @@ export default function CodeAreaModal({
}}
className="w-full rounded-lg h-[300px] custom-scroll"
/>
</div>
<DialogFooter>
<Button
className="mt-3"
@ -97,10 +88,7 @@ export default function CodeAreaModal({
if (apiReturn.data) {
let importsErrors = apiReturn.data.imports.errors;
let funcErrors = apiReturn.data.function.errors;
if (
funcErrors.length === 0 &&
importsErrors.length === 0
) {
if (funcErrors.length === 0 && importsErrors.length === 0) {
setSuccessData({
title: "Code is ready to run",
});
@ -133,11 +121,12 @@ export default function CodeAreaModal({
})
);
}}
type="submit">Check & Save</Button>
type="submit"
>
Check & Save
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

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

@ -41,26 +41,20 @@ export default function ExportModal() {
const [checked, setChecked] = useState(true);
const [name, setName] = useState(flows[tabIndex].name);
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger asChild>
</DialogTrigger>
<DialogTrigger asChild></DialogTrigger>
<DialogContent className="lg:max-w-[600px] h-[450px]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">
Export
</span>
<span className="pr-2">Export</span>
<ArrowDownTrayIcon
className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true"
/>
</DialogTitle>
<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>
@ -89,7 +83,6 @@ export default function ExportModal() {
<Label>
<span className="font-medium">Description (optional)</span>
<Textarea
name="description"
id="description"
onChange={(event) => {
@ -100,15 +93,15 @@ export default function ExportModal() {
value={flows[tabIndex].description ?? null}
placeholder="Flow description"
className="max-h-[100px] mt-2"
rows={3} />
rows={3}
/>
</Label>
<div className="flex items-center space-x-2">
<Checkbox id="terms"
<Checkbox
id="terms"
onCheckedChange={(event: boolean) => {
setChecked(event);
}}
/>
<label
htmlFor="terms"
@ -124,15 +117,12 @@ export default function ExportModal() {
if (checked) downloadFlow(flows[tabIndex]);
else downloadFlow(removeApiKeys(flows[tabIndex]));
}}
type="submit">Download Flow</Button>
type="submit"
>
Download Flow
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

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

@ -47,30 +47,23 @@ export default function PromptAreaModal({
}
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger>
</DialogTrigger>
<DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[700px]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">
{myModalTitle}
</span>
<span className="pr-2">{myModalTitle}</span>
<DocumentTextIcon
className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true"
/>
</DialogTitle>
<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>
<div className="flex h-full w-full mt-2">
<Textarea
ref={ref}
@ -80,12 +73,10 @@ export default function PromptAreaModal({
setMyValue(e.target.value);
setValue(e.target.value);
}}
placeholder="Type message here." />
placeholder="Type message here."
/>
</div>
<DialogFooter>
<Button
className="mt-3"
@ -98,8 +89,7 @@ export default function PromptAreaModal({
checkPrompt(myValue)
.then((apiReturn) => {
if (apiReturn.data) {
let inputVariables =
apiReturn.data.input_variables;
let inputVariables = apiReturn.data.input_variables;
if (inputVariables.length === 0) {
setErrorData({
title:
@ -114,8 +104,7 @@ export default function PromptAreaModal({
}
} else {
setErrorData({
title:
"Something went wrong, please try again",
title: "Something went wrong, please try again",
});
}
})
@ -132,12 +121,12 @@ export default function PromptAreaModal({
break;
}
}}
type="submit">{myButtonText}</Button>
type="submit"
>
{myButtonText}
</Button>
</DialogFooter>
</DialogContent>
</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";
const NodeToolbarComponent = (props) => {
const [nodeLength, setNodeLength] = useState(
Object.keys(props.data.node.template).filter(
(t) =>
@ -109,11 +108,10 @@ const NodeToolbarComponent = (props) => {
position="top"
>
<button
className={
classNames(
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 rounded-r-md"
className={classNames(
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 rounded-r-md"
)}
onClick={(event) => {
event.preventDefault();
@ -136,7 +134,8 @@ const NodeToolbarComponent = (props) => {
</button>
</TooltipReact>
{nodeLength > 0 && <TooltipReact
{nodeLength > 0 && (
<TooltipReact
delayShow={1000}
selector="Edit"
htmlContent="Edit"
@ -151,8 +150,8 @@ const NodeToolbarComponent = (props) => {
>
<PencilSquareIcon className="w-5 h-5 dark:text-gray-300"></PencilSquareIcon>
</button>
</TooltipReact>}
</TooltipReact>
)}
{/*
<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 { SerperIcon } from "./icons/Serper";
import { v4 as uuidv4 } from "uuid";
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
return twMerge(clsx(inputs));
}
export function classNames(...classes: Array<string>) {
@ -637,5 +637,4 @@ export function updateIds(newFlow, getNodeId) {
e.target +
e.targetHandle;
});
}