Add isChild prop to DisclosureComponent

src/frontend/src/constants/constants.ts

@@ -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",

src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx

@@ -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">
+            <Disclosure.Button
-              <div className="flex gap-4">
+              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>

src/frontend/src/pages/FlowPage/components/ParentDisclosureComponent/index.tsx

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

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

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

src/frontend/src/style/applies.css

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

src/frontend/src/types/components/index.ts

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