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

formatted code

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-05 16:36:28 -03:00
commit 87061316b3
24 changed files with 313 additions and 267 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -116,8 +116,7 @@ export default function ParameterComponent({
}} }}
> >
<Icon <Icon
className="h-5 w-5" className="h-5 w-5"
strokeWidth={1.5} strokeWidth={1.5}
style={{ style={{
color: nodeColors[item.family] ?? nodeColors.unknown, color: nodeColors[item.family] ?? nodeColors.unknown,
@ -128,7 +127,7 @@ export default function ParameterComponent({
{nodeNames[item.family] ?? ""}{" "} {nodeNames[item.family] ?? ""}{" "}
<span className="text-xs"> <span className="text-xs">
{" "} {" "}
{item.type == "" ? '' : ' - '} {item.type == "" ? "" : " - "}
{item.type.split(", ").length > 2 {item.type.split(", ").length > 2
? item.type.split(", ").map((el, i) => ( ? item.type.split(", ").map((el, i) => (
<React.Fragment key={el + i}> <React.Fragment key={el + i}>

6
src/frontend/src/components/ExtraSidebarComponent/index.tsx
View file

@ -42,7 +42,7 @@ export default function ExtraSidebar() {
item.href.split("/")[2] === current[4] item.href.split("/")[2] === current[4]
? "text-ring" ? "text-ring"
: "text-ring group-hover:text-accent-foreground", : "text-ring group-hover:text-accent-foreground",
"mr-3 flex-shrink-0 h-6 w-6" "mr-3 h-6 w-6 flex-shrink-0"
)} )}
/> />
{item.name} {item.name}
@ -71,8 +71,8 @@ export default function ExtraSidebar() {
<span className="flex-1">{item.name}</span> <span className="flex-1">{item.name}</span>
<svg <svg
className={classNames( className={classNames(
open ? "text-ring rotate-90" : "text-ring", open ? "rotate-90 text-ring" : "text-ring",
"ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-accent-foreground" "transition-rotate ml-3 h-5 w-5 flex-shrink-0 duration-150 ease-in-out group-hover:text-accent-foreground"
)} )}
viewBox="0 0 20 20" viewBox="0 0 20 20"
aria-hidden="true" aria-hidden="true"

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

@ -11,7 +11,7 @@ const ShadTooltip = ({
side, side,
content, content,
children, children,
style style,
}: ShadTooltipProps) => { }: ShadTooltipProps) => {
return ( return (
<TooltipProvider> <TooltipProvider>
@ -19,8 +19,11 @@ const ShadTooltip = ({
<TooltipTrigger asChild>{children}</TooltipTrigger> <TooltipTrigger asChild>{children}</TooltipTrigger>
<TooltipContent <TooltipContent
className={style} className={style}
side={side} avoidCollisions={false} sticky="always"> side={side}
avoidCollisions={false}
sticky="always"
>
{content} {content}
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>

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

@ -11,7 +11,15 @@ import {
Card, Card,
CardHeader, CardHeader,
} from "../ui/card"; } from "../ui/card";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog"; import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../ui/dialog";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
export const CardComponent = ({ export const CardComponent = ({
@ -42,24 +50,26 @@ export const CardComponent = ({
</span> </span>
{onDelete && ( {onDelete && (
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<button className="flex self-start"> <button className="flex self-start">
<Trash2 className="w-4 h-4 text-primary opacity-0 group-hover:opacity-100 transition-all" /> <Trash2 className="h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100" />
</button> </button>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Are you sure absolutely sure?</DialogTitle> <DialogTitle>Are you sure absolutely sure?</DialogTitle>
<DialogDescription> <DialogDescription>
This action cannot be undone. Are you sure you want to permanently This action cannot be undone. Are you sure you want to
delete this file from our servers? permanently delete this file from our servers?
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<DialogFooter> <DialogFooter>
<Button type="submit" onClick={onDelete}>Confirm</Button> <Button type="submit" onClick={onDelete}>
</DialogFooter> Confirm
</DialogContent> </Button>
</Dialog> </DialogFooter>
</DialogContent>
</Dialog>
)} )}
</CardTitle> </CardTitle>
<CardDescription className="pb-2 pt-2"> <CardDescription className="pb-2 pt-2">

13
src/frontend/src/components/chatComponent/buildTrigger/index.tsx
View file

@ -76,6 +76,7 @@ export default function BuildTrigger({
const eventSource = new EventSource(apiUrl); const eventSource = new EventSource(apiUrl);
eventSource.onmessage = (event) => { eventSource.onmessage = (event) => {
console.log(event);
// If the event is parseable, return // If the event is parseable, return
if (!event.data) { if (!event.data) {
return; return;
@ -96,10 +97,9 @@ export default function BuildTrigger({
[flowId]: { [flowId]: {
...old[flowId], ...old[flowId],
formKeysData: parsedData, formKeysData: parsedData,
},
}
}; };
}) });
} else { } else {
// Otherwise, process the data // Otherwise, process the data
const isValid = processStreamResult(parsedData); const isValid = processStreamResult(parsedData);
@ -168,7 +168,7 @@ export default function BuildTrigger({
leaveFrom="translate-y-0" leaveFrom="translate-y-0"
leaveTo="translate-y-96" leaveTo="translate-y-96"
> >
<div className="fixed right-4 bottom-20"> <div className="fixed bottom-20 right-4">
<div <div
className={`${eventClick} align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md`} className={`${eventClick} align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md`}
onClick={() => { onClick={() => {
@ -189,7 +189,10 @@ export default function BuildTrigger({
) : isBuilding ? ( ) : isBuilding ? (
<Loading strokeWidth={1.5} className="stroke-build-trigger" /> <Loading strokeWidth={1.5} className="stroke-build-trigger" />
) : ( ) : (
<Zap strokeWidth={1.5} className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" /> <Zap
strokeWidth={1.5}
className="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1"
/>
)} )}
</div> </div>
</button> </button>

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

@ -53,7 +53,8 @@ export default function CodeAreaComponent({
className={ className={
editNode editNode
? "input-edit-node input-dialog " ? "input-edit-node input-dialog "
: "input-primary input-dialog " + (disabled ? "input-disable" : "") : "input-dialog input-primary " +
(disabled ? "input-disable" : "")
} }
> >
{myValue !== "" ? myValue : "Type something..."} {myValue !== "" ? myValue : "Type something..."}
@ -62,7 +63,7 @@ export default function CodeAreaComponent({
onClick={() => { onClick={() => {
openPopUp( openPopUp(
<CodeAreaModal <CodeAreaModal
setNodeClass={setNodeClass} setNodeClass={setNodeClass}
value={myValue} value={myValue}
nodeClass={nodeClass} nodeClass={nodeClass}
setValue={(t: string) => { setValue={(t: string) => {
@ -74,7 +75,10 @@ export default function CodeAreaComponent({
}} }}
> >
{!editNode && ( {!editNode && (
<ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground ml-3" /> <ExternalLink
strokeWidth={1.5}
className="ml-3 h-6 w-6 hover:text-accent-foreground"
/>
)} )}
</button> </button>
</div> </div>

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

@ -39,8 +39,8 @@ export default function Dropdown({
<Listbox.Button <Listbox.Button
className={ className={
editNode editNode
? "border-1 relative pr-8 input-edit-node" ? "border-1 input-edit-node relative pr-8"
: "py-2 pl-3 pr-10 text-left input-primary" : "input-primary py-2 pl-3 pr-10 text-left"
} }
> >
<span className="block w-full truncate bg-background"> <span className="block w-full truncate bg-background">

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

@ -75,7 +75,7 @@ export default function Header() {
href="https://github.com/logspace-ai/langflow" href="https://github.com/logspace-ai/langflow"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="inline-flex shadow-sm items-center justify-center text-sm font-medium 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 text-muted-foreground border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md" className="inline-flex h-9 items-center justify-center rounded-md border border-input px-3 pr-0 text-sm font-medium text-muted-foreground shadow-sm ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
> >
<FaGithub className="mr-2 h-5 w-5" /> <FaGithub className="mr-2 h-5 w-5" />
Star Star
@ -114,7 +114,7 @@ export default function Header() {
)} )}
</button> </button>
<button <button
className="text-muted-foreground hover:text-accent-foreground relative" className="relative text-muted-foreground hover:text-accent-foreground"
onClick={(event: React.MouseEvent<HTMLElement>) => { onClick={(event: React.MouseEvent<HTMLElement>) => {
setNotificationCenter(false); setNotificationCenter(false);
const { top, left } = ( const { top, left } = (

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

@ -110,7 +110,10 @@ export default function InputFileComponent({
</span> </span>
<button onClick={handleButtonClick}> <button onClick={handleButtonClick}>
{!editNode && !loading && ( {!editNode && !loading && (
<FileSearch2 strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground" /> <FileSearch2
strokeWidth={1.5}
className="h-6 w-6 hover:text-accent-foreground"
/>
)} )}
{!editNode && loading && ( {!editNode && loading && (
<span className="loading loading-spinner loading-sm pointer-events-none h-8 pl-3"></span> <span className="loading loading-spinner loading-sm pointer-events-none h-8 pl-3"></span>

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

@ -30,9 +30,7 @@ export default function TextAreaComponent({
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}> <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<div <div
className={ className={
editNode editNode ? "w-full items-center" : "flex w-full items-center"
? "w-full items-center"
: "w-full flex items-center"
} }
> >
<span <span
@ -52,8 +50,9 @@ export default function TextAreaComponent({
}} }}
className={ className={
editNode editNode
? "input-edit-node input-dialog " ? "input-edit-node input-dialog "
: "input-primary input-dialog " + (disabled ? "input-disable" : "") : "input-dialog input-primary " +
(disabled ? "input-disable" : "")
} }
> >
{myValue !== "" ? myValue : "Type something..."} {myValue !== "" ? myValue : "Type something..."}
@ -74,7 +73,12 @@ export default function TextAreaComponent({
); );
}} }}
> >
{!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground ml-3" />} {!editNode && (
<ExternalLink
strokeWidth={1.5}
className="ml-3 h-6 w-6 hover:text-accent-foreground"
/>
)}
</button> </button>
</div> </div>
</div> </div>

10
src/frontend/src/components/ui/badge.tsx
View file

@ -9,8 +9,7 @@ const badgeVariants = cva(
variant: { variant: {
default: default:
"bg-primary hover:bg-primary/80 border-transparent text-primary-foreground", "bg-primary hover:bg-primary/80 border-transparent text-primary-foreground",
gray: gray: "bg-border hover:bg-border/80 text-secondary-foreground",
"bg-border hover:bg-border/80 text-secondary-foreground",
secondary: secondary:
"bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground", "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
destructive: destructive:
@ -21,7 +20,7 @@ const badgeVariants = cva(
sm: "h-4 text-xs", sm: "h-4 text-xs",
md: "h-5 text-sm", md: "h-5 text-sm",
lg: "h-6 text-base", lg: "h-6 text-base",
} },
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: "default",
@ -35,7 +34,10 @@ export interface BadgeProps
function Badge({ className, variant, size, ...props }: BadgeProps) { function Badge({ className, variant, size, ...props }: BadgeProps) {
return ( return (
<div className={cn(badgeVariants({ variant, size }), className)} {...props} /> <div
className={cn(badgeVariants({ variant, size }), className)}
{...props}
/>
); );
} }

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

@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content <DialogPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
"fixed gap-3 z-50 grid w-full rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0", "fixed z-50 grid w-full gap-3 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
className className
)} )}
{...props} {...props}

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

@ -19,7 +19,7 @@ const Switch = React.forwardRef<
<SwitchPrimitives.Thumb <SwitchPrimitives.Thumb
aria-disabled={props.disabled} aria-disabled={props.disabled}
className={cn( className={cn(
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 aria-disabled:bg-muted/70 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0" "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform aria-disabled:bg-muted/70 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
)} )}
/> />
</SwitchPrimitives.Root> </SwitchPrimitives.Root>

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

@ -285,7 +285,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
// create a link element and set its properties // create a link element and set its properties
const link = document.createElement("a"); const link = document.createElement("a");
link.href = jsonString; link.href = jsonString;
link.download = `${flowName && flowName != "" ? flowName : flows.find((f) => f.id === tabId).name}.json`; link.download = `${
flowName && flowName != ""
? flowName
: flows.find((f) => f.id === tabId).name
}.json`;
// simulate a click on the link element to trigger the download // simulate a click on the link element to trigger the download
link.click(); link.click();

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

@ -104,11 +104,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
useEffect(() => { useEffect(() => {
if (closeEdit !== "") { if (closeEdit !== "") {
tweak.current = getTweak; tweak.current = getTweak;
if(tweak.current.length > 0){ if (tweak.current.length > 0) {
setActiveTab("3"); setActiveTab("3");
openAccordions(); openAccordions();
} } else {
else{
startTweaks(); startTweaks();
} }
} else { } else {
@ -250,25 +249,25 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
function openAccordions() { function openAccordions() {
let accordionsToOpen = []; let accordionsToOpen = [];
tweak.current.forEach((el) => { tweak.current.forEach((el) => {
Object.keys(el).forEach((key) => { Object.keys(el).forEach((key) => {
if (Object.keys(el[key]).length > 0) { if (Object.keys(el[key]).length > 0) {
accordionsToOpen.push(key); accordionsToOpen.push(key);
setOpenAccordion(accordionsToOpen); setOpenAccordion(accordionsToOpen);
} }
});
}); });
});
} }
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger> <DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[80vw] h-[80vh]"> <DialogContent className="h-[80vh] lg:max-w-[80vw]">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Code</span> <span className="pr-2">Code</span>
<Code2 <Code2
className="h-6 w-6 text-gray-800 pl-1 dark:text-white" className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
@ -277,7 +276,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<Tabs <Tabs
value={activeTab} value={activeTab}
className="w-full h-full overflow-hidden text-center bg-muted rounded-md border" className="h-full w-full overflow-hidden rounded-md border bg-muted text-center"
onValueChange={(value) => { onValueChange={(value) => {
setActiveTab(value); setActiveTab(value);
if (value === "3") { if (value === "3") {
@ -296,7 +295,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{Number(activeTab) < 3 && ( {Number(activeTab) < 3 && (
<div className="float-right"> <div className="float-right">
<button <button
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300" className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
onClick={copyToClipboard} onClick={copyToClipboard}
> >
{isCopied ? <Check size={18} /> : <Clipboard size={15} />} {isCopied ? <Check size={18} /> : <Clipboard size={15} />}
@ -309,12 +308,12 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<TabsContent <TabsContent
value={index.toString()} value={index.toString()}
className="overflow-hidden w-full h-full px-4 pb-4 -mt-1" className="-mt-1 h-full w-full overflow-hidden px-4 pb-4"
key={index} // Remember to add a unique key prop key={index} // Remember to add a unique key prop
> >
{index < 3 ? ( {index < 3 ? (
<SyntaxHighlighter <SyntaxHighlighter
className="w-full overflow-auto h-[60vh]" className="h-[60vh] w-full overflow-auto"
language={tab.mode} language={tab.mode}
style={oneDark} style={oneDark}
> >
@ -322,10 +321,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</SyntaxHighlighter> </SyntaxHighlighter>
) : index === 3 ? ( ) : index === 3 ? (
<> <>
<div className="flex w-full h-full mt-2"> <div className="mt-2 flex h-full w-full">
<div <div
className={classNames( className={classNames(
"w-full rounded-lg bg-muted h-[60vh]", "h-[60vh] w-full rounded-lg bg-muted",
1 == 1 1 == 1
? "overflow-scroll overflow-x-hidden custom-scroll" ? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden" : "overflow-hidden"
@ -338,14 +337,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
trigger={t["data"]["id"]} trigger={t["data"]["id"]}
open={openAccordion} open={openAccordion}
> >
<div className="flex flex-col gap-5 h-fit"> <div className="flex h-fit flex-col gap-5">
<Table className="table-fixed bg-muted outline-1"> <Table className="table-fixed bg-muted outline-1">
<TableHeader className="border-input text-xs font-medium text-ring h-10"> <TableHeader className="h-10 border-input text-xs font-medium text-ring">
<TableRow className="dark:border-b-muted"> <TableRow className="dark:border-b-muted">
<TableHead className="h-7 text-center"> <TableHead className="h-7 text-center">
PARAM PARAM
</TableHead> </TableHead>
<TableHead className="p-0 h-7 text-center"> <TableHead className="h-7 p-0 text-center">
VALUE VALUE
</TableHead> </TableHead>
</TableRow> </TableRow>
@ -379,11 +378,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
key={i} key={i}
className="h-10 dark:border-b-muted" className="h-10 dark:border-b-muted"
> >
<TableCell className="p-0 text-center text-gray-900 text-sm"> <TableCell className="p-0 text-center text-sm text-gray-900">
{n} {n}
</TableCell> </TableCell>
<TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300"> <TableCell className="p-0 text-center text-xs text-gray-900 dark:text-gray-300">
<div className="w-[250px] m-auto"> <div className="m-auto w-[250px]">
{t.data.node.template[n] {t.data.node.template[n]
.type === "str" && .type === "str" &&
!t.data.node.template[n] !t.data.node.template[n]

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

@ -107,8 +107,8 @@ export default function CodeAreaModal({
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Edit Code</span> <span className="pr-2">Edit Code</span>
<TerminalSquare <TerminalSquare
strokeWidth={1.5} strokeWidth={1.5}
className="h-6 w-6 text-primary pl-1 " className="h-6 w-6 pl-1 text-primary "
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>

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

@ -47,8 +47,8 @@ export default function ExportModal() {
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Export</span> <span className="pr-2">Export</span>
<Download <Download
strokeWidth={1.5} strokeWidth={1.5}
className="h-6 w-6 text-foreground pl-1" className="h-6 w-6 pl-1 text-foreground"
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>

15
src/frontend/src/modals/formModal/chatInput/index.tsx
View file

@ -52,20 +52,27 @@ export default function ChatInput({
lockChat lockChat
? " bg-input text-black dark:bg-gray-700 dark:text-gray-300" ? " bg-input text-black dark:bg-gray-700 dark:text-gray-300"
: " bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300", : " bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
"p-4 form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-16 sm:text-sm" "form-input block w-full rounded-md border-gray-300 p-4 pr-16 custom-scroll dark:border-gray-600 sm:text-sm"
)} )}
placeholder={"Send a message..."} placeholder={"Send a message..."}
/> />
<div className="absolute bottom-2 right-4"> <div className="absolute bottom-2 right-4">
<button className={classNames("p-2 px-1 transition-all duration-300 rounded-md",chatValue == "" ? "text-primary" : " bg-indigo-600 text-background")} disabled={lockChat} onClick={() => sendMessage()}> <button
className={classNames(
"rounded-md p-2 px-1 transition-all duration-300",
chatValue == "" ? "text-primary" : " bg-indigo-600 text-background"
)}
disabled={lockChat}
onClick={() => sendMessage()}
>
{lockChat ? ( {lockChat ? (
<Lock <Lock
className="h-5 w-5 ml-1 mr-1 animate-pulse" className="ml-1 mr-1 h-5 w-5 animate-pulse"
aria-hidden="true" aria-hidden="true"
/> />
) : ( ) : (
<LucideSend <LucideSend
className="h-5 w-5 mr-2 rotate-[44deg] " className="mr-2 h-5 w-5 rotate-[44deg] "
aria-hidden="true" aria-hidden="true"
/> />
)} )}

236
src/frontend/src/modals/formModal/chatMessage/index.tsx
View file

@ -29,138 +29,136 @@ export default function ChatMessage({
}, [chat.message]); }, [chat.message]);
const [hidden, setHidden] = useState(true); const [hidden, setHidden] = useState(true);
return ( return (
<div
className={classNames(
"flex w-full px-2 py-2 pl-4 pr-9",
chat.isSend ? " bg-border" : " "
)}
>
<div <div
className={classNames( className={classNames(
"w-full py-2 px-2 pl-4 pr-9 flex", "mx-3 my-3 flex h-8 w-8 items-center justify-center overflow-hidden rounded-full"
chat.isSend
? " bg-border"
: " "
)} )}
> >
<div {!chat.isSend && (
className={classNames( <div className="relative h-8 w-8">
"rounded-full overflow-hidden w-8 h-8 flex items-center my-3 mx-3 justify-center" <img
)} className={
> "absolute scale-150 transition-opacity duration-500 " +
{!chat.isSend && ( (lockChat ? "opacity-100" : "opacity-0")
<div className="relative w-8 h-8"> }
<img src={lastMessage ? AiIcon : AiIconStill}
className={ />
"absolute transition-opacity duration-500 scale-150 " + <img
(lockChat ? "opacity-100" : "opacity-0") className={
} "absolute scale-150 transition-opacity duration-500 " +
src={lastMessage ? AiIcon : AiIconStill} (lockChat ? "opacity-0" : "opacity-100")
/> }
<img src={AiIconStill}
className={ />
"absolute transition-opacity duration-500 scale-150 " + </div>
(lockChat ? "opacity-0" : "opacity-100") )}
} {chat.isSend && (
src={AiIconStill} <User2 className="h-6 w-6 text-gray-800 dark:text-gray-200" />
/> )}
</div> </div>
)} {!chat.isSend ? (
{chat.isSend && ( <div className="flex w-full items-center text-start">
<User2 className="w-6 h-6 text-gray-800 dark:text-gray-200" /> <div className="relative inline-block w-full text-start text-sm font-normal text-primary">
)} {hidden && chat.thought && chat.thought !== "" && (
</div> <div
{!chat.isSend ? ( onClick={() => setHidden((prev) => !prev)}
<div className="w-full text-start flex items-center"> className="absolute -left-2 -top-1 cursor-pointer"
<div className="w-full relative text-start inline-block text-primary text-sm font-normal"> >
{hidden && chat.thought && chat.thought !== "" && ( <MessageSquare className="h-5 w-5 animate-bounce dark:text-white" />
<div </div>
onClick={() => setHidden((prev) => !prev)} )}
className="absolute -top-1 -left-2 cursor-pointer" {chat.thought && chat.thought !== "" && !hidden && (
> <div
<MessageSquare className="w-5 h-5 animate-bounce dark:text-white" /> onClick={() => setHidden((prev) => !prev)}
</div> className=" ml-3 inline-block h-full w-[95%] cursor-pointer overflow-scroll rounded-md border
)} border-gray-300 bg-muted px-2 pb-3 pt-3 text-start text-primary scrollbar-hide dark:border-gray-500 dark:bg-gray-800"
{chat.thought && chat.thought !== "" && !hidden && ( dangerouslySetInnerHTML={{
<div __html: convert.toHtml(chat.thought),
onClick={() => setHidden((prev) => !prev)} }}
className=" text-start inline-block rounded-md text-primary h-full border border-gray-300 dark:border-gray-500 ></div>
bg-muted dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll" )}
dangerouslySetInnerHTML={{ {chat.thought && chat.thought !== "" && !hidden && <br></br>}
__html: convert.toHtml(chat.thought), <div className="w-full pb-3 pt-3">
}} <div className="w-full dark:text-white">
></div> <div className="w-full">
)} <ReactMarkdown
{chat.thought && chat.thought !== "" && !hidden && <br></br>} remarkPlugins={[remarkGfm, remarkMath]}
<div className="w-full pb-3 pt-3"> rehypePlugins={[rehypeMathjax]}
<div className="dark:text-white w-full"> className="markdown prose max-w-full text-primary dark:prose-invert"
<div className="w-full"> components={{
<ReactMarkdown code({ node, inline, className, children, ...props }) {
remarkPlugins={[remarkGfm, remarkMath]} if (children.length) {
rehypePlugins={[rehypeMathjax]} if (children[0] == "▍") {
className="markdown prose dark:prose-invert text-primary max-w-full" return (
components={{ <span className="mt-1 animate-pulse cursor-default">
code({ node, inline, className, children, ...props }) { ▍
if (children.length) { </span>
if (children[0] == "▍") {
return (
<span className="animate-pulse cursor-default mt-1">
▍
</span>
);
}
children[0] = (children[0] as string).replace(
"`▍`",
"▍"
); );
} }
const match = /language-(\w+)/.exec(className || ""); children[0] = (children[0] as string).replace(
"`▍`",
return !inline ? ( "▍"
<CodeBlock
key={Math.random()}
language={(match && match[1]) || ""}
value={String(children).replace(/\n$/, "")}
{...props}
/>
) : (
<code className={className} {...props}>
{children}
</code>
); );
}, }
}}
> const match = /language-(\w+)/.exec(className || "");
{message}
</ReactMarkdown> return !inline ? (
</div> <CodeBlock
{chat.files && ( key={Math.random()}
<div className="my-2 w-full"> language={(match && match[1]) || ""}
{chat.files.map((file, index) => { value={String(children).replace(/\n$/, "")}
return ( {...props}
<div key={index} className="my-2 w-full"> />
<FileCard ) : (
fileName={"Generated File"} <code className={className} {...props}>
fileType={file.data_type} {children}
content={file.data} </code>
/>
</div>
); );
})} },
</div> }}
)} >
{message}
</ReactMarkdown>
</div> </div>
{chat.files && (
<div className="my-2 w-full">
{chat.files.map((file, index) => {
return (
<div key={index} className="my-2 w-full">
<FileCard
fileName={"Generated File"}
fileType={file.data_type}
content={file.data}
/>
</div>
);
})}
</div>
)}
</div> </div>
</div> </div>
</div> </div>
) : ( </div>
<div className="w-full flex items-center"> ) : (
<div className="text-start inline-block"> <div className="flex w-full items-center">
<span <div className="inline-block text-start">
className="text-primary" <span
dangerouslySetInnerHTML={{ className="text-primary"
__html: message.replace(/\n/g, "<br>"), dangerouslySetInnerHTML={{
}} __html: message.replace(/\n/g, "<br>"),
></span> }}
</div> ></span>
</div> </div>
)} </div>
</div> )}
</div>
); );
} }

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

@ -160,7 +160,10 @@ export default function ImportModal() {
bgColor="bg-medium-emerald " bgColor="bg-medium-emerald "
description={example.description ?? "Prebuilt Examples"} description={example.description ?? "Prebuilt Examples"}
icon={ icon={
<DocumentDuplicateIcon strokeWidth={1.5} className="h-6 w-6 flex-shrink-0" /> <DocumentDuplicateIcon
strokeWidth={1.5}
className="h-6 w-6 flex-shrink-0"
/>
} }
onClick={() => { onClick={() => {
addFlow(example, false); addFlow(example, false);

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

@ -92,7 +92,7 @@ export default function TextAreaModal({
<div className="w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6"> <div className="w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6">
<textarea <textarea
ref={ref} ref={ref}
className="form-input h-full w-full form-primary" className="form-primary form-input h-full w-full"
value={myValue} value={myValue}
onChange={(e) => { onChange={(e) => {
setMyValue(e.target.value); setMyValue(e.target.value);

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

@ -135,7 +135,7 @@ export default function ExtraSidebar() {
</div> </div>
</div> </div>
<div className="w-full overflow-auto scrollbar-hide pb-10"> <div className="w-full overflow-auto pb-10 scrollbar-hide">
{Object.keys(dataFilter) {Object.keys(dataFilter)
.sort() .sort()
.map((d: keyof APIObjectType, i) => .map((d: keyof APIObjectType, i) =>

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

@ -39,6 +39,10 @@ export type TabsContextType = {
export type TabsState = { export type TabsState = {
[key: string]: { [key: string]: {
isPending: boolean; isPending: boolean;
formKeysData: {input_keys?: Object, memory_keys?: Array<string>, handle_keys?: Array<string>}; formKeysData: {
input_keys?: Object;
memory_keys?: Array<string>;
handle_keys?: Array<string>;
};
}; };
}; };

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

@ -792,34 +792,34 @@ export function groupByFamily(data, baseClasses, left, type) {
let parentOutput: string; let parentOutput: string;
let arrOfParent: string[] = []; let arrOfParent: string[] = [];
let arrOfType: { family: string; type: string; component: string }[] = []; let arrOfType: { family: string; type: string; component: string }[] = [];
let arrOfLength: { length: number; type: string; }[] = []; let arrOfLength: { length: number; type: string }[] = [];
let lastType = ""; let lastType = "";
Object.keys(data).map((d) => { Object.keys(data).map((d) => {
Object.keys(data[d]).map((n) => { Object.keys(data[d]).map((n) => {
try { try {
if ( if (
data[d][n].base_classes.some((r) => data[d][n].base_classes.some((r) =>
baseClasses.split("\n").includes(r) baseClasses.split("\n").includes(r)
) )
) { ) {
arrOfParent.push(d); arrOfParent.push(d);
} }
if (n === type) { if (n === type) {
parentOutput = d; parentOutput = d;
} }
if (d !== lastType) { if (d !== lastType) {
arrOfLength.push({ arrOfLength.push({
length: Object.keys(data[d]).length, length: Object.keys(data[d]).length,
type: d type: d,
}); });
lastType = d; lastType = d;
} }
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
}); });
}); });
Object.keys(data).map((d) => { Object.keys(data).map((d) => {
@ -831,7 +831,7 @@ export function groupByFamily(data, baseClasses, left, type) {
arrOfType.push({ arrOfType.push({
family: d, family: d,
type: data, type: data,
component: n component: n,
}); });
} }
}); });
@ -842,7 +842,7 @@ export function groupByFamily(data, baseClasses, left, type) {
}); });
}); });
if(left == false){ if (left == false) {
let groupedBy = arrOfType.filter((object, index, self) => { let groupedBy = arrOfType.filter((object, index, self) => {
const foundIndex = self.findIndex( const foundIndex = self.findIndex(
(o) => o.family === object.family && o.type === object.type (o) => o.family === object.family && o.type === object.type
@ -851,12 +851,18 @@ export function groupByFamily(data, baseClasses, left, type) {
}); });
return groupedBy.reduce((result, item) => { return groupedBy.reduce((result, item) => {
const existingGroup = result.find((group) => group.family === item.family); const existingGroup = result.find(
(group) => group.family === item.family
);
if (existingGroup) { if (existingGroup) {
existingGroup.type += `, ${item.type}`; existingGroup.type += `, ${item.type}`;
} else { } else {
result.push({ family: item.family, type: item.type, component: item.component }); result.push({
family: item.family,
type: item.type,
component: item.component,
});
} }
if (left == false) { if (left == false) {
@ -866,37 +872,34 @@ export function groupByFamily(data, baseClasses, left, type) {
return result; return result;
}, []); }, []);
} } else {
else{
const groupedArray = []; const groupedArray = [];
const groupedData = {}; const groupedData = {};
arrOfType.forEach((item) => { arrOfType.forEach((item) => {
const { family, type, component } = item; const { family, type, component } = item;
const key = `${family}-${type}`; const key = `${family}-${type}`;
if (!groupedData[key]) { if (!groupedData[key]) {
groupedData[key] = { family, type, component: [component] }; groupedData[key] = { family, type, component: [component] };
} else { } else {
groupedData[key].component.push(component); groupedData[key].component.push(component);
} }
}); });
for (const key in groupedData) { for (const key in groupedData) {
groupedArray.push(groupedData[key]); groupedArray.push(groupedData[key]);
} }
groupedArray.forEach((object, index, self) => { groupedArray.forEach((object, index, self) => {
const findObj = arrOfLength.find(x => x.type == object.family); const findObj = arrOfLength.find((x) => x.type == object.family);
if(object.component.length == findObj.length){ if (object.component.length == findObj.length) {
self[index]['type'] = ""; self[index]["type"] = "";
} else {
self[index]["type"] = object.component.join(", ");
} }
else{ });
self[index]['type'] = object.component.join(', '); return groupedArray;
}
})
return groupedArray
} }
} }