From 06e17ada01c8751dfc9194fee89da1223c0ef87a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sat, 9 Dec 2023 21:58:20 -0300
Subject: [PATCH] Fixed name and description for Custom Component when they are
 empty

---
 .../custom_components/CustomComponent.py        |  2 --
 .../interface/custom/custom_component.py        |  4 ++--
 .../langflow/template/frontend_node/base.py     |  2 +-
 .../template/frontend_node/custom_components.py |  2 +-
 .../components/parameterComponent/index.tsx     |  9 +++++++--
 .../src/CustomNodes/GenericNode/index.tsx       | 17 +++++++++++------
 6 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/backend/langflow/components/custom_components/CustomComponent.py b/src/backend/langflow/components/custom_components/CustomComponent.py
index 35a6036dd..533ccb727 100644
--- a/src/backend/langflow/components/custom_components/CustomComponent.py
+++ b/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):
diff --git a/src/backend/langflow/interface/custom/custom_component.py b/src/backend/langflow/interface/custom/custom_component.py
index 438cc50cf..4ff58fd27 100644
--- a/src/backend/langflow/interface/custom/custom_component.py
+++ b/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"
diff --git a/src/backend/langflow/template/frontend_node/base.py b/src/backend/langflow/template/frontend_node/base.py
index 04467a094..8216e8b77 100644
--- a/src/backend/langflow/template/frontend_node/base.py
+++ b/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,
diff --git a/src/backend/langflow/template/frontend_node/custom_components.py b/src/backend/langflow/template/frontend_node/custom_components.py
index a0a5a9956..aff26e1df 100644
--- a/src/backend/langflow/template/frontend_node/custom_components.py
+++ b/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",
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 160f8c051..d11499aeb 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/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
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 0a926719e..5c4fc741f 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/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>