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

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

@ -101,7 +101,7 @@ export default function ParameterComponent({
refHtml.current = groupedObj.map((item, i) => {
const Icon: any = nodeIconsLucide[item.family];
return (
<span
key={getRandomKeyByssmm() + item.family + i}
@ -116,8 +116,7 @@ export default function ParameterComponent({
}}
>
<Icon
className="h-5 w-5"
className="h-5 w-5"
strokeWidth={1.5}
style={{
color: nodeColors[item.family] ?? nodeColors.unknown,
@ -128,7 +127,7 @@ export default function ParameterComponent({
{nodeNames[item.family] ?? ""}{" "}
<span className="text-xs">
{" "}
{item.type == "" ? '' : ' - '}
{item.type == "" ? "" : " - "}
{item.type.split(", ").length > 2
? item.type.split(", ").map((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]
? "text-ring"
: "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}
@ -71,8 +71,8 @@ export default function ExtraSidebar() {
<span className="flex-1">{item.name}</span>
<svg
className={classNames(
open ? "text-ring rotate-90" : "text-ring",
"ml-3 h-5 w-5 flex-shrink-0 transition-rotate duration-150 ease-in-out group-hover:text-accent-foreground"
open ? "rotate-90 text-ring" : "text-ring",
"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"
aria-hidden="true"

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

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

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

@ -11,7 +11,15 @@ import {
Card,
CardHeader,
} 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";
export const CardComponent = ({
@ -42,24 +50,26 @@ export const CardComponent = ({
</span>
{onDelete && (
<Dialog>
<DialogTrigger asChild>
<DialogTrigger asChild>
<button className="flex self-start">
<Trash2 className="w-4 h-4 text-primary opacity-0 group-hover:opacity-100 transition-all" />
</button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. Are you sure you want to permanently
delete this file from our servers?
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button type="submit" onClick={onDelete}>Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<Trash2 className="h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100" />
</button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. Are you sure you want to
permanently delete this file from our servers?
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button type="submit" onClick={onDelete}>
Confirm
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)}
</CardTitle>
<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);
eventSource.onmessage = (event) => {
console.log(event);
// If the event is parseable, return
if (!event.data) {
return;
@ -96,10 +97,9 @@ export default function BuildTrigger({
[flowId]: {
...old[flowId],
formKeysData: parsedData,
}
},
};
})
});
} else {
// Otherwise, process the data
const isValid = processStreamResult(parsedData);
@ -168,7 +168,7 @@ export default function BuildTrigger({
leaveFrom="translate-y-0"
leaveTo="translate-y-96"
>
<div className="fixed right-4 bottom-20">
<div className="fixed bottom-20 right-4">
<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`}
onClick={() => {
@ -189,7 +189,10 @@ export default function BuildTrigger({
) : isBuilding ? (
<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>
</button>

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

@ -53,7 +53,8 @@ export default function CodeAreaComponent({
className={
editNode
? "input-edit-node input-dialog "
: "input-primary input-dialog " + (disabled ? "input-disable" : "")
: "input-dialog input-primary " +
(disabled ? "input-disable" : "")
}
>
{myValue !== "" ? myValue : "Type something..."}
@ -62,7 +63,7 @@ export default function CodeAreaComponent({
onClick={() => {
openPopUp(
<CodeAreaModal
setNodeClass={setNodeClass}
setNodeClass={setNodeClass}
value={myValue}
nodeClass={nodeClass}
setValue={(t: string) => {
@ -74,7 +75,10 @@ export default function CodeAreaComponent({
}}
>
{!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>
</div>

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

@ -39,8 +39,8 @@ export default function Dropdown({
<Listbox.Button
className={
editNode
? "border-1 relative pr-8 input-edit-node"
: "py-2 pl-3 pr-10 text-left input-primary"
? "border-1 input-edit-node relative pr-8"
: "input-primary py-2 pl-3 pr-10 text-left"
}
>
<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"
target="_blank"
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" />
Star
@ -114,7 +114,7 @@ export default function Header() {
)}
</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>) => {
setNotificationCenter(false);
const { top, left } = (

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

@ -110,7 +110,10 @@ export default function InputFileComponent({
</span>
<button onClick={handleButtonClick}>
{!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 && (
<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={
editNode
? "w-full items-center"
: "w-full flex items-center"
editNode ? "w-full items-center" : "flex w-full items-center"
}
>
<span
@ -52,8 +50,9 @@ export default function TextAreaComponent({
}}
className={
editNode
? "input-edit-node input-dialog "
: "input-primary input-dialog " + (disabled ? "input-disable" : "")
? "input-edit-node input-dialog "
: "input-dialog input-primary " +
(disabled ? "input-disable" : "")
}
>
{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>
</div>
</div>

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

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

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

@ -19,7 +19,7 @@ const Switch = React.forwardRef<
<SwitchPrimitives.Thumb
aria-disabled={props.disabled}
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>

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
const link = document.createElement("a");
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
link.click();

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

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

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

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

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

@ -52,20 +52,27 @@ export default function ChatInput({
lockChat
? " 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",
"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..."}
/>
<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 ? (
<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"
/>
) : (
<LucideSend
className="h-5 w-5 mr-2 rotate-[44deg] "
className="mr-2 h-5 w-5 rotate-[44deg] "
aria-hidden="true"
/>
)}

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

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

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

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