📝 docs(custom.mdx): add description of the 'repr_value' attribute in the CustomComponent class

📝 docs(custom-component.mdx): update example code and description of the 'repr_value' attribute in the DocumentProcessor class

docs/docs/components/custom.mdx

@@ -79,6 +79,12 @@ The CustomComponent class serves as the foundation for creating custom component
   | _`get_flow`_   | Returns a Flow object. Parameters are _`flow_name`_ or _`flow_id`_. |
   | _`load_flow`_  | Loads a flow from a given _`id`_.                                   |
 
+- Useful attributes:
+
+  | Attribute Name | Description                                                                   |
+  | -------------- | ----------------------------------------------------------------------------- |
+  | _`repr_value`_ | Displays the value it receives in the _`build`_ method. Useful for debugging. |
+
   <Admonition type="info" label="Tip">
 
   Check out the [FlowRunner](../examples/flow-runner) example to understand how to call a flow from a custom component.

docs/docs/guidelines/custom-component.mdx

@@ -44,6 +44,8 @@ Here is an example:
                     "value": options[0]}}
 
     def build(self, document: Document, function: str) -> Document:
+        if isinstance(document, list):
+            document = document[0]
         page_content = document.page_content
         if function == "Uppercase":
             page_content = page_content.upper()
@@ -51,6 +53,7 @@ Here is an example:
             page_content = page_content.lower()
         elif function == "Titlecase":
             page_content = page_content.title()
+        self.repr_value = f"Result of {function} function: {page_content}"
         return Document(page_content=page_content)
 ```
 
@@ -252,6 +255,8 @@ class DocumentProcessor(CustomComponent):
         ...
 
     def build(self, document: Document, function: str) -> Document:
+        if isinstance(document, list):
+            document = document[0]
         page_content = document.page_content
         if function == "Uppercase":
             page_content = page_content.upper()
@@ -259,6 +264,7 @@ class DocumentProcessor(CustomComponent):
             page_content = page_content.lower()
         elif function == "Titlecase":
             page_content = page_content.title()
+        self.repr_value = f"Result of {function} function: {page_content}"
         return Document(page_content=page_content)
 ```
 
@@ -266,6 +272,8 @@ class DocumentProcessor(CustomComponent):
 
 Here, the build method takes two input parameters: _`document`_, representing the input document to be processed, and _`function`_, a string representing the selected text transformation to be applied (either "Uppercase," "Lowercase," or "Titlecase"). The method processes the text content of the input Document based on the selected function.
 
+The attribute _`repr_value`_ is used to display the result of the component on the canvas. It is optional and can be used to display any string value.
+
 The return type is _`Document`_.
 
 ---
@@ -297,6 +305,8 @@ class DocumentProcessor(CustomComponent):
                 }
 
     def build(self, document: Document, function: str) -> Document:
+        if isinstance(document, list):
+            document = document[0]
         page_content = document.page_content
         if function == "Uppercase":
             page_content = page_content.upper()
@@ -304,6 +314,7 @@ class DocumentProcessor(CustomComponent):
             page_content = page_content.lower()
         elif function == "Titlecase":
             page_content = page_content.title()
+        self.repr_value = f"Result of {function} function: {page_content}"
         return Document(page_content=page_content)
 ```