Fixed name and description for Custom Component when they are empty

src/backend/langflow/components/custom_components/CustomComponent.py

@@ -3,8 +3,6 @@ from langflow.field_typing import Data
 
 
 class Component(CustomComponent):
-    display_name: str = "Custom Component"
-    description: str = "Create any custom component you want!"
     documentation: str = "http://docs.langflow.org/components/custom"
 
     def build_config(self):

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

@@ -19,8 +19,8 @@ from langflow.utils import validate
 
 
 class CustomComponent(Component):
-    display_name: Optional[str] = "Custom Component"
-    description: Optional[str] = "Custom Component"
+    display_name: Optional[str] = None
+    description: Optional[str] = None
     code: Optional[str] = None
     field_config: dict = {}
     code_class_base_inheritance: ClassVar[str] = "CustomComponent"

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

@@ -75,7 +75,7 @@ class FrontendNode(BaseModel):
                 "template": self.template.to_dict(self.format_field),
                 "description": self.description,
                 "base_classes": self.base_classes,
-                "display_name": self.display_name or self.name,
+                "display_name": self.display_name,
                 "custom_fields": self.custom_fields,
                 "output_types": self.output_types,
                 "documentation": self.documentation,

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

@@ -46,7 +46,7 @@ class Component(CustomComponent):
 
 class CustomComponentFrontendNode(FrontendNode):
     name: str = "CustomComponent"
-    display_name: str = "Custom Component"
+    display_name: str = None
     beta: bool = True
     template: Template = Template(
         type_name="CustomComponent",

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -156,11 +156,16 @@ export default function ParameterComponent({
   };
 
   const handleNodeClass = (newNodeClass: APIClassType, code?: string): void => {
+    if (!data.node) return;
     if (data.node!.template[name].value !== newNodeClass.template[name].value) {
       takeSnapshot();
     }
-    data.node = newNodeClass;
-    data.node.template[name].value = code;
+    data.node! = {
+      ...newNodeClass,
+      description: newNodeClass.description ?? data.node!.description,
+      display_name: newNodeClass.display_name ?? data.node!.display_name,
+    };
+    data.node!.template[name].value = code;
     updateNodeInternals(data.id);
     // Set state to pending
     //@ts-ignore

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -107,6 +107,8 @@ export default function GenericNode({
 
   const showNode = data.showNode ?? true;
 
+  const nameEditable = data.node?.flow || data.type === "CustomComponent";
+
   return (
     <>
       <NodeToolbar>
@@ -164,7 +166,7 @@ export default function GenericNode({
               />
               {showNode && (
                 <div className="generic-node-tooltip-div">
-                  {data.node?.flow && inputName ? (
+                  {nameEditable && inputName ? (
                     <div>
                       <InputComponent
                         onBlur={() => {
@@ -194,7 +196,7 @@ export default function GenericNode({
                         <div className="generic-node-tooltip-div pr-2 text-primary">
                           {data.node?.display_name}
                         </div>
-                        {data.node?.flow && (
+                        {nameEditable && (
                           <IconComponent
                             name="Pencil"
                             className="h-4 w-4 text-ring"
@@ -362,14 +364,14 @@ export default function GenericNode({
             className={
               showNode
                 ? "overflow-hidden " +
-                  (data.node?.description === "" && !data.node?.flow
+                  (data.node?.description === "" && !nameEditable
                     ? "pb-5"
                     : "py-5")
                 : ""
             }
           >
             <div className="generic-node-desc">
-              {showNode && data.node?.flow && inputDescription ? (
+              {showNode && nameEditable && inputDescription ? (
                 <Textarea
                   autoFocus
                   onBlur={() => {
@@ -401,7 +403,9 @@ export default function GenericNode({
                 <div
                   className={cn(
                     "generic-node-desc-text truncate-multiline word-break-break-word",
-                    data.node?.description === "" && data.node?.flow
+                    (data.node?.description === "" ||
+                      !data.node?.description) &&
+                      nameEditable
                       ? "font-light italic"
                       : ""
                   )}
@@ -410,7 +414,8 @@ export default function GenericNode({
                     takeSnapshot();
                   }}
                 >
-                  {data.node?.description === "" && data.node?.flow
+                  {(data.node?.description === "" || !data.node?.description) &&
+                  nameEditable
                     ? "Double Click to Edit Description"
                     : data.node?.description}
                 </div>