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

Add isChild prop to DisclosureComponent

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-03-29 19:14:21 -03:00
commit 5d50c9a4a6
6 changed files with 183 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/frontend/src/constants/constants.ts
View file

@ -107,7 +107,7 @@ export const CODE_DIALOG_SUBTITLE =
* @constant
*/
export const CHAT_FORM_DIALOG_SUBTITLE =
"Adjust or overwrite input values, inspect outputs or interact through the chat console.";
"Set up the input variables defined in prompt templates. Interact with agents and chains.";
/**
* The base text for subtitle of Edit Node Dialog
@ -732,12 +732,13 @@ export const PRIORITY_SIDEBAR_ORDER = [
"saved_components",
"inputs",
"outputs",
"prompts",
"data",
"prompt",
"models",
"helpers",
"vectorstores",
"vectorsearch",
"helpers",
];
export const NATIVE_CATEGORIES = [
"inputs",

11
src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
View file

@ -4,6 +4,7 @@ import { DisclosureComponentType } from "../../../../types/components";
export default function DisclosureComponent({
button: { title, Icon, buttons = [] },
isChild = true,
children,
openDisc,
}: DisclosureComponentType): JSX.Element {
@ -12,8 +13,14 @@ export default function DisclosureComponent({
{({ open }) => (
<>
<div>
<Disclosure.Button className="components-disclosure-arrangement">
<div className="flex gap-4">
<Disclosure.Button
className={
isChild
? "components-disclosure-arrangement-child"
: "components-disclosure-arrangement"
}
>
<div className={"flex gap-4" + (isChild ? " pl-4" : "")}>
{/* BUG ON THIS ICON */}
<Icon strokeWidth={1.5} size={22} className="text-primary" />
<span className="components-disclosure-title">{title}</span>

41
src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx Normal file
View file

@ -0,0 +1,41 @@
import { Disclosure } from "@headlessui/react";
import IconComponent from "../../../../components/genericIconComponent";
import { DisclosureComponentType } from "../../../../types/components";
export default function ParentDisclosureComponent({
button: { title, Icon, buttons = [] },
children,
openDisc,
}: DisclosureComponentType): JSX.Element {
return (
<Disclosure as="div" defaultOpen={openDisc} key={title}>
{({ open }) => (
<>
<div>
<Disclosure.Button className="parent-disclosure-arrangement">
<div className="flex gap-4">
<span className="parent-disclosure-title">{title}</span>
</div>
<div className="components-disclosure-div">
{buttons.map((btn, index) => (
<button key={index} onClick={btn.onClick}>
{btn.Icon}
</button>
))}
<div>
<IconComponent
name="ChevronRight"
className={`${
open || openDisc ? "rotate-90 transform" : ""
} h-4 w-4 text-foreground`}
/>
</div>
</div>
</Disclosure.Button>
</div>
<Disclosure.Panel as="div">{children}</Disclosure.Panel>
</>
)}
</Disclosure>
);
}

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

@ -5,6 +5,7 @@ import ShadTooltip from "../../../../components/ShadTooltipComponent";
import IconComponent from "../../../../components/genericIconComponent";
import { Input } from "../../../../components/ui/input";
import { Separator } from "../../../../components/ui/separator";
import { PRIORITY_SIDEBAR_ORDER } from "../../../../constants/constants";
import ExportModal from "../../../../modals/exportModal";
import ShareModal from "../../../../modals/shareModal";
import useAlertStore from "../../../../stores/alertStore";
@ -24,6 +25,7 @@ import {
sensitiveSort,
} from "../../../../utils/utils";
import DisclosureComponent from "../DisclosureComponent";
import ParentDisclosureComponent from "../ParentDisclosureComponent";
import SidebarDraggableComponent from "./sideBarDraggableComponent";
import { sortKeys } from "./utils";
@ -271,23 +273,17 @@ export default function ExtraSidebar(): JSX.Element {
<div className="side-bar-components-div-arrangement">
{Object.keys(dataFilter)
.sort(sortKeys)
.filter((x) => PRIORITY_SIDEBAR_ORDER.includes(x))
.map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<>
{index === 0 && (
<div className="pt-0.5">
<div className="p-2 px-4 text-sm font-semibold" key={index}>
Native Components
</div>
</div>
)}
<DisclosureComponent
openDisc={
getFilterEdge.length !== 0 || search.length !== 0
? true
: false
}
isChild={false}
key={index + search + JSON.stringify(getFilterEdge)}
button={{
title: nodeNames[SBSectionName] ?? nodeNames.unknown,
@ -342,37 +338,124 @@ export default function ExtraSidebar(): JSX.Element {
))}
</div>
</DisclosureComponent>
{index === Object.keys(dataFilter).length - 1 && (
<>
<a
target={"_blank"}
href="https://langflow.store"
className="components-disclosure-arrangement"
>
<div className="flex gap-4">
{/* BUG ON THIS ICON */}
<SparklesIcon
strokeWidth={1.5}
className="w-[22px] text-primary"
/>
<span className="components-disclosure-title">
Discover More
</span>
</div>
<div className="components-disclosure-div">
<div>
<LinkIcon className="h-4 w-4 text-foreground" />
</div>
</div>
</a>
</>
)}
</>
) : (
<div key={index}></div>
)
)}
)}{" "}
<ParentDisclosureComponent
openDisc={
getFilterEdge.length !== 0 || search.length !== 0 ? true : false
}
key={"Extended"}
button={{
title: "Extended",
Icon: nodeIconsLucide.unknown,
}}
>
{Object.keys(dataFilter)
.sort(sortKeys)
.filter((x) => !PRIORITY_SIDEBAR_ORDER.includes(x))
.map((SBSectionName: keyof APIObjectType, index) =>
Object.keys(dataFilter[SBSectionName]).length > 0 ? (
<>
<DisclosureComponent
openDisc={
getFilterEdge.length !== 0 || search.length !== 0
? true
: false
}
key={index + search + JSON.stringify(getFilterEdge)}
button={{
title: nodeNames[SBSectionName] ?? nodeNames.unknown,
Icon:
nodeIconsLucide[SBSectionName] ??
nodeIconsLucide.unknown,
}}
>
<div className="side-bar-components-gap">
{Object.keys(dataFilter[SBSectionName])
.sort((a, b) =>
sensitiveSort(
dataFilter[SBSectionName][a].display_name,
dataFilter[SBSectionName][b].display_name
)
)
.map((SBItemName: string, index) => (
<ShadTooltip
content={
dataFilter[SBSectionName][SBItemName].display_name
}
side="right"
key={index}
>
<SidebarDraggableComponent
sectionName={SBSectionName as string}
apiClass={dataFilter[SBSectionName][SBItemName]}
key={index}
onDragStart={(event) =>
onDragStart(event, {
//split type to remove type in nodes saved with same name removing it's
type: removeCountFromString(SBItemName),
node: dataFilter[SBSectionName][SBItemName],
})
}
color={nodeColors[SBSectionName]}
itemName={SBItemName}
//convert error to boolean
error={
!!dataFilter[SBSectionName][SBItemName].error
}
display_name={
dataFilter[SBSectionName][SBItemName]
.display_name
}
official={
dataFilter[SBSectionName][SBItemName]
.official === false
? false
: true
}
/>
</ShadTooltip>
))}
</div>
</DisclosureComponent>
{index ===
Object.keys(dataFilter).length -
PRIORITY_SIDEBAR_ORDER.length +
1 && (
<>
<a
target={"_blank"}
href="https://langflow.store"
className="components-disclosure-arrangement"
>
<div className="flex gap-4">
{/* BUG ON THIS ICON */}
<SparklesIcon
strokeWidth={1.5}
className="w-[22px] text-primary"
/>
<span className="components-disclosure-title">
Discover More
</span>
</div>
<div className="components-disclosure-div">
<div>
<LinkIcon className="h-4 w-4 text-foreground" />
</div>
</div>
</a>
</>
)}
</>
) : (
<div key={index}></div>
)
)}
</ParentDisclosureComponent>
</div>
</div>
);

12
src/frontend/src/style/applies.css
View file

@ -117,7 +117,7 @@
@apply relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground transition-all duration-500 ease-in-out;
}
.header-menubar-item {
@apply relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer;
@apply relative flex cursor-default cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
}
.extra-side-bar-buttons:hover {
@apply hover:bg-muted;
@ -183,9 +183,19 @@
.disabled-message-button-icon {
@apply fill-chat-trigger-disabled stroke-chat-trigger-disabled stroke-1;
}
.parent-disclosure-arrangement {
@apply flex w-full select-none items-center justify-between border-y border-y-input bg-background px-3 py-2;
}
.components-disclosure-arrangement {
@apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2;
}
.components-disclosure-arrangement-child {
/* different color than the non child */
@apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2;
}
.parent-disclosure-title {
@apply p-2 px-2 text-sm font-semibold;
}
.components-disclosure-title {
@apply flex items-center text-sm text-primary;
}

1
src/frontend/src/types/components/index.ts
View file

@ -148,6 +148,7 @@ export type FileComponentType = {
export type DisclosureComponentType = {
children: ReactNode;
openDisc: boolean;
isChild?: boolean;
button: {
title: string;
Icon: React.ElementType;