Update categories and components

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

@@ -26,6 +26,7 @@ import {
 } from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
 import SidebarDraggableComponent from "./sideBarDraggableComponent";
+import { sortKeys } from "./utils";
 
 export default function ExtraSidebar(): JSX.Element {
   const data = useTypesStore((state) => state.data);
@@ -320,19 +321,7 @@ export default function ExtraSidebar(): JSX.Element {
 
       <div className="side-bar-components-div-arrangement">
         {Object.keys(dataFilter)
-          .sort((a, b) => {
-            if (a.toLowerCase() === "saved_components") {
-              return -1;
-            } else if (b.toLowerCase() === "saved_components") {
-              return 1;
-            } else if (a.toLowerCase() === "custom_components") {
-              return -2;
-            } else if (b.toLowerCase() === "custom_components") {
-              return 2;
-            } else {
-              return a.localeCompare(b);
-            }
-          })
+          .sort(sortKeys)
           .map((SBSectionName: keyof APIObjectType, index) =>
             Object.keys(dataFilter[SBSectionName]).length > 0 ? (
               <DisclosureComponent

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

@@ -0,0 +1,31 @@
+export function sortKeys(a: string, b: string) {
+  // Define the order of specific keys
+  const order = [
+    "saved_components",
+    "inputs",
+    "outputs",
+    "data",
+    "utilities",
+    "models",
+  ];
+  const indexA = order.indexOf(a.toLowerCase());
+  const indexB = order.indexOf(b.toLowerCase());
+
+  // Check if both keys are in the predefined order
+  if (indexA !== -1 && indexB !== -1) {
+    return indexA - indexB;
+  }
+
+  // If only 'a' is in the predefined order, it should come first
+  if (indexA !== -1) {
+    return -1;
+  }
+
+  // If only 'b' is in the predefined order, it should come first
+  if (indexB !== -1) {
+    return 1;
+  }
+
+  // If neither 'a' nor 'b' are in the predefined order, sort them alphabetically
+  return a.localeCompare(b);
+}

src/frontend/src/utils/styleUtils.ts

@@ -8,7 +8,6 @@ import {
   Bot,
   Boxes,
   Braces,
-  Cable,
   Check,
   CheckCircle2,
   ChevronDown,
@@ -46,6 +45,7 @@ import {
   FileUp,
   Fingerprint,
   FlaskConical,
+  FolderOpen,
   FolderPlus,
   FormInput,
   Forward,
@@ -205,6 +205,9 @@ export const gradients = [
 ];
 
 export const nodeColors: { [char: string]: string } = {
+  inputs: "#9AAE42",
+  outputs: "#AA2411",
+  data: "#6344BE",
   prompts: "#4367BF",
   models: "#AA2411",
   model_specs: "#6344BE",
@@ -225,16 +228,19 @@ export const nodeColors: { [char: string]: string } = {
   toolkits: "#DB2C2C",
   wrappers: "#E6277A",
   utilities: "#31A3CC",
+  langchain_utilities: "#31A3CC",
   output_parsers: "#E6A627",
   str: "#31a3cc",
   Text: "#31a3cc",
   retrievers: "#e6b25a",
   unknown: "#9CA3AF",
   custom_components: "#ab11ab",
-  io: "#e6b25a",
 };
 
 export const nodeNames: { [char: string]: string } = {
+  inputs: "Inputs",
+  outputs: "Outputs",
+  data: "Data",
   prompts: "Prompts",
   models: "Language Models",
   model_specs: "Model Specs",
@@ -253,13 +259,16 @@ export const nodeNames: { [char: string]: string } = {
   textsplitters: "Text Splitters",
   retrievers: "Retrievers",
   utilities: "Utilities",
+  langchain_utilities: "Langchain Utilities",
   output_parsers: "Output Parsers",
   custom_components: "Custom",
-  io: "I/O",
   unknown: "Other",
 };
 
 export const nodeIconsLucide: iconsType = {
+  inputs: Download,
+  outputs: Upload,
+  data: FolderOpen,
   AzureChatOpenAi: AzureIcon,
   Ollama: OllamaIcon,
   ChatOllama: OllamaIcon,
@@ -342,6 +351,7 @@ export const nodeIconsLucide: iconsType = {
   textsplitters: Scissors,
   wrappers: Gift,
   utilities: Wand2,
+  langchain_utilities: Wand2,
   WolframAlphaAPIWrapper: SvgWolfram,
   output_parsers: Compass,
   retrievers: FileSearch,
@@ -443,13 +453,11 @@ export const nodeIconsLucide: iconsType = {
   Link,
   ToyBrick,
   RefreshCcw,
-  ListRestart,
   Combine,
   TerminalIcon,
   TerminalSquare,
   TextCursorInput,
   Repeat,
-  io: Cable,
   Sliders,
   ScreenShare,
   Code,