📝 docs(flow-runner.mdx): update FlowRunner example to improve readability and add field customization in build_config method

docs/docs/examples/flow-runner.mdx

@@ -6,7 +6,7 @@ hide_table_of_contents: true
 import ZoomableImage from "/src/theme/ZoomableImage.js";
 import Admonition from "@theme/Admonition";
 
-## FlowRunner Example
+# FlowRunner Component
 
 Now let's see how to create a component that runs other flows.
 
@@ -21,7 +21,7 @@ What we will see in this example:
 <CH.Scrollycoding rows={20} className={""}>
 
 ```python
-from langflow.interface.custom.custom_component import CustomComponent
+from langflow import CustomComponent
 
 class MyComponent(CustomComponent):
     display_name = "Custom Component"
@@ -40,7 +40,7 @@ This is the basic structure of a custom component.
 ---
 
 ```python
-from langflow.interface.custom.custom_component import CustomComponent
+from langflow import CustomComponent
 
 # focus
 class FlowRunner(CustomComponent):
@@ -62,16 +62,14 @@ So, let's start by adding the _`display_name`_ and a _`description`_.
 ---
 
 ```python
-from langflow.interface.custom.custom_component import CustomComponent
+from langflow import CustomComponent
 # focus
 from langchain.schema import Document
 
 
 class FlowRunner(CustomComponent):
-
     display_name = "Flow Runner"
-
+    description = "Run other flows using a document as input."
-    description = "Run other flows"
 
     def build_config(self):
         ...
@@ -86,7 +84,7 @@ Now let's import _`Document`_ from the _`langchain.schema`_ module, which will b
 ---
 
 ```python
-from langflow.interface.custom.custom_component import CustomComponent
+from langflow import CustomComponent
 # focus
 from langchain.schema import Document
 
@@ -114,14 +112,12 @@ The parameters we added are:
 ---
 
 ```python
-from langflow.interface.custom.custom_component import CustomComponent
+from langflow import CustomComponent
 from langchain.schema import Document
 
 
 class FlowRunner(CustomComponent):
-
     display_name = "Flow Runner"
-
     description = "Run other flows using a document as input."
 
     def build_config(self):
@@ -142,14 +138,12 @@ We will start by listing the flows in the collection using the _`list_flows`_ me
 ---
 
 ```python
-from langflow.interface.custom.custom_component import CustomComponent
+from langflow import CustomComponent
 from langchain.schema import Document
 
 
 class FlowRunner(CustomComponent):
-
     display_name = "Flow Runner"
-
     description = "Run other flows using a document as input."
 
     def build_config(self):
@@ -175,14 +169,12 @@ We can then get the flow that matches the selected name.
 ---
 
 ```python
-from langflow.interface.custom.custom_component import CustomComponent
+from langflow import CustomComponent
 from langchain.schema import Document
 
 
 class FlowRunner(CustomComponent):
-
     display_name = "Flow Runner"
-
     description = "Run other flows using a document as input."
 
     def build_config(self):
@@ -210,14 +202,12 @@ You can find more information about it in the [features guidelines](../guideline
 ---
 
 ```python
-from langflow.interface.custom.custom_component import CustomComponent
+from langflow import CustomComponent
 from langchain.schema import Document
 
 
 class FlowRunner(CustomComponent):
-
     display_name = "Flow Runner"
-
     description = "Run other flows using a document as input."
 
     def build_config(self):
@@ -248,17 +238,16 @@ then we'll have to process the page_content depending on what is the input of th
   One other approach would be to create another CustomComponent that builds a
   dictionary and then we use that as the input for the FlowRunner.
 </Admonition>
+
 ---
 
 ```python
-from langflow.interface.custom.custom_component import CustomComponent
+from langflow import CustomComponent
 from langchain.schema import Document
 
 
 class FlowRunner(CustomComponent):
-
     display_name = "Flow Runner"
-
     description = "Run other flows using a document as input."
 
     def build_config(self):
@@ -283,6 +272,51 @@ Finally, we can use the _`page_content`_ in the flow and return the result.
 
 ---
 
+```python focus=9:16
+from langflow import CustomComponent
+from langchain.schema import Document
+
+
+class FlowRunner(CustomComponent):
+    display_name = "Flow Runner"
+    description = "Run other flows using a document as input."
+
+    def build_config(self):
+        flows = self.list_flows()
+        flow_names = [f.name for f in flows]
+        return {"flow_name": {"options": flow_names,
+                                "display_name": "Flow Name",
+        },
+               "document": {"display_name": "Document"}
+        }
+
+
+    def build(self, flow_name: str, document: Optional[Document] = None) -> Document:
+        # List the flows
+        flows = self.list_flows()
+        # Get the flow that matches the selected name
+        flow = next(filter(lambda f: f.name == flow_name, flows))
+        # Load the flow
+        tweaks = {}
+        flow = self.load_flow(flow.id, tweaks)
+        # Get the page_content from the document
+        page_content = document.page_content
+        # Use it in the flow
+        result = flow(page_content)
+        return Document(page_content=str(result))
+```
+
+Now we can add the field customization to the _`build_config`_ method.
+
+We are using the _`options`_ parameter to make the _`flow_name`_ field a dropdown menu.
+
+<Admonition type="caution">
+  Make sure the type of the field is _`str`_ and the values of the _`options`_
+  are strings.
+</Admonition>
+
+---
+
 </CH.Scrollycoding>
 
 In Langflow, this is how our script looks like:
@@ -292,7 +326,7 @@ In Langflow, this is how our script looks like:
 <ZoomableImage
   alt="Document Processor code"
   sources={{
-    light: "img/document_processor_code.png",
+    light: "img/flow_runner_code.png",
   }}
   style={{
     maxWidth: "70%",
@@ -309,7 +343,7 @@ And here is our brand new custom component:
 <ZoomableImage
   alt="Document Processor component"
   sources={{
-    light: "img/document_processor.png",
+    light: "img/flow_runner.png",
   }}
   style={{
     width: "50%",