fix: adds priority sorting for sidebar components and makes LanguageModel appear first (#7322)

* Added priority field to components

* Added priority as 0 to LanguageModelComponent

* Adds sorting based on priority

* refactor: remove redundant name attribute from LanguageModelComponent

* Updated custom component to include priority

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

src/backend/base/langflow/components/models/language_model.py

@@ -17,8 +17,8 @@ class LanguageModelComponent(LCModelComponent):
     display_name = "Language Model"
     description = "Runs a language model given a specified provider. "
     icon = "brain-circuit"
-    name = "LanguageModel"
     category = "models"
+    priority = 0  # Set priority to 0 to make it appear first
 
     inputs = [
         DropdownInput(

src/backend/base/langflow/custom/attributes.py

@@ -33,6 +33,12 @@ def getattr_return_bool(value):
     return None
 
 
+def getattr_return_int(value):
+    if isinstance(value, int):
+        return value
+    return None
+
+
 def getattr_return_list_of_str(value):
     if isinstance(value, list):
         return [str(val) for val in value]
@@ -63,6 +69,7 @@ ATTR_FUNC_MAPPING: dict[str, Callable] = {
     "beta": getattr_return_bool,
     "legacy": getattr_return_bool,
     "documentation": getattr_return_str,
+    "priority": getattr_return_int,
     "icon": validate_icon,
     "minimized": getattr_return_bool,
     "frozen": getattr_return_bool,

src/backend/base/langflow/custom/custom_component/custom_component.py

@@ -61,6 +61,9 @@ class CustomComponent(BaseComponent):
     """The description of the component. Defaults to None."""
     icon: str | None = None
     """The icon of the component. It should be an emoji. Defaults to None."""
+    priority: int | None = None
+    """The priority of the component in the category. Lower priority means it will be displayed first. Defaults to None.
+    """
 
     def __init__(self, **data) -> None:
         """Initializes a new instance of the CustomComponent class.

src/backend/base/langflow/template/frontend_node/base.py

@@ -28,6 +28,8 @@ class FrontendNode(BaseModel):
     """Name of the frontend node."""
     display_name: str | None = ""
     """Display name of the frontend node."""
+    priority: int | None = None
+    """Priority of the frontend node."""
     documentation: str = ""
     """Documentation of the frontend node."""
     minimized: bool = False

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarItemsList/index.tsx

@@ -18,6 +18,17 @@ const SidebarItemsList = ({
         .sort((a, b) => {
           const itemA = dataFilter[item.name][a];
           const itemB = dataFilter[item.name][b];
+
+          // Sort by priority if available
+          if (itemA.priority !== undefined || itemB.priority !== undefined) {
+            const priorityA = itemA.priority ?? Number.MAX_SAFE_INTEGER;
+            const priorityB = itemB.priority ?? Number.MAX_SAFE_INTEGER;
+            if (priorityA !== priorityB) {
+              return priorityA - priorityB;
+            }
+          }
+
+          // Otherwise use the existing sorting logic
           return itemA.score && itemB.score
             ? itemA.score - itemB.score
             : sensitiveSort(itemA.display_name, itemB.display_name);