Add docs for field update, icon, and small fixes (#1459)

* Refactor code formatting and improve error handling in utils.py

* Refactor parameterComponent to include refresh button

* Update Langflow description

* Add new_langflow_demo.gif and remove langflow-demo.gif and langflow-screen.png

* Update image source path in README.md

* Add dynamic options and default value support to CustomComponent class

README.md

@@ -21,7 +21,7 @@
 The easiest way to create and customize your flow
 
 <a href="https://github.com/logspace-ai/langflow">
-<img width="100%" src="https://github.com/logspace-ai/langflow/blob/dev/img/new_langflow_demo.gif"></a>
+<img width="100%" src="https://github.com/logspace-ai/langflow/blob/dev/docs/static/img/new_langflow_demo.gif"></a>
 
 # 📦 Installation
 

docs/docs/components/custom.mdx

@@ -82,6 +82,16 @@ The CustomComponent class serves as the foundation for creating custom component
   | _`info: str`_              | Adds a tooltip to the field.                                                                                                                                                                                                                                                |
   | _`file_types: List[str]`_  | This is a requirement if the _`field_type`_ is _file_. Defines which file types will be accepted. For example, _json_, _yaml_ or _yml_.                                                                                                                                     |
   | _`range_spec: langflow.field_typing.RangeSpec`_ | This is a requirement if the _`field_type`_ is _`float`_. Defines the range of values accepted and the step size. If none is defined, the default is _`[-1, 1, 0.1]`_.                                                                                                     |
+
+  <Admonition type="info" label="Tip">
+
+  Keys _`options`_ and _`value`_ can receive a method or function that returns a list of strings or a string, respectively. This is useful when you want to dynamically generate the options or the default value of a field. A refresh button will appear next to the field in the component, allowing the user to update the options or the default value.
+
+  </Admonition>
+
+
+
+
 - The CustomComponent class also provides helpful methods for specific tasks (e.g., to load and use other flows from the Langflow platform):
 
   | Method Name    | Description                                                         |
@@ -96,6 +106,7 @@ The CustomComponent class serves as the foundation for creating custom component
   | -------------- | ----------------------------------------------------------------------------- |
   | _`status`_ | Displays the value it receives in the _`build`_ method. Useful for debugging. |
   | _`field_order`_ | Defines the order the fields will be displayed in the canvas.                  |
+  | _`icon`_ | Defines the emoji (for example, _`:rocket:`_) that will be displayed in the canvas. |
 
   <Admonition type="info" label="Tip">
 

docs/docs/index.mdx

@@ -1,6 +1,6 @@
 # 👋 Welcome to Langflow
 
-Langflow is an easy way to prototype [LangChain](https://github.com/hwchase17/langchain) flows. The drag-and-drop feature allows quick and effortless experimentation, while the built-in chat interface facilitates real-time interaction. It provides options to edit prompt parameters, create chains and agents, track thought processes, and export flows.
+Langflow is an easy way to create flows. The drag-and-drop feature allows quick and effortless experimentation, while the built-in chat interface facilitates real-time interaction. It provides options to edit prompt parameters, create chains and agents, track thought processes, and export flows.
 
 import ThemedImage from "@theme/ThemedImage";
 import useBaseUrl from "@docusaurus/useBaseUrl";
@@ -11,7 +11,7 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
 <ZoomableImage
   alt="Docusaurus themed image"
   sources={{
-    light: "img/new_langflow.gif",
+    light: "img/new_langflow_demo.gif",
   }}
   style={{ width: "100%" }}
 />

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

@@ -372,7 +372,7 @@ def update_field_dict(field_dict):
         field_dict["refresh"] = True
 
     if "value" in field_dict and callable(field_dict["value"]):
-        field_dict["value"] = field_dict["value"](field_dict.get("options", []))
+        field_dict["value"] = field_dict["value"]()
         field_dict["refresh"] = True
 
     # Let's check if "range_spec" is a RangeSpec object

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

@@ -403,13 +403,27 @@ export default function ParameterComponent({
                 data-testid={"textarea-" + data.node.template[name].name}
               />
             ) : (
-              <InputComponent
+              <div className="mt-2 flex w-full items-center">
-                id={"input-" + index}
+                <div className="w-5/6 flex-grow">
-                disabled={disabled}
+                  <InputComponent
-                password={data.node?.template[name].password ?? false}
+                    id={"input-" + index}
-                value={data.node?.template[name].value ?? ""}
+                    disabled={disabled}
-                onChange={handleOnNewValue}
+                    password={data.node?.template[name].password ?? false}
-              />
+                    value={data.node?.template[name].value ?? ""}
+                    onChange={handleOnNewValue}
+                  />
+                </div>
+                {data.node?.template[name].refresh && (
+                  <button
+                    className="extra-side-bar-buttons ml-2 mt-1 w-1/6"
+                    onClick={() => {
+                      handleUpdateValues(name, data);
+                    }}
+                  >
+                    <IconComponent name="RefreshCcw" />
+                  </button>
+                )}
+              </div>
             )}
           </div>
         ) : left === true && type === "bool" ? (