Fix and Enhance Modal, Button, and Layout Functionality (#2064)

#### Description

This pull request introduces several fixes and enhancements related to
modals, buttons, and layout elements within the application. The changes
improve the user experience by addressing bugs, enhancing functionality,
and refining UI components.

#### Summary of Changes

- **Modals:**
  - Added Submit buttons to every modal, except confirmation modals.
  - Fixed submitting issues on `storeApiKeyModal`.
  - Added a close button when the submit button is present.
  - Fixed padding on `deleteConfirmationModal`.

- **Node and Component Enhancements:**
  - Removed the pencil icon from the node name.
- Made node description editable by clicking once and changed the cursor
type.
  - Changed empty component behavior to open the New Project modal.
  - Fixed the node toolbar to allow moving the nodes.
  - Fixed Endpoint Name labeling.
  - Passed duplicate flow function to the main page.
  - Made folders visually more pleasing.
  - Fixed the tooltip that no longer needs removal of the portal.

- **UI and Layout Adjustments:**
  - Fixed bottom padding on settings pages.
  - Fixed scrolling not working in the global variables dropdown.
  - Disabled accordion when it is empty.
  - Removed shadow from card elements.
  - Added a description column to the advanced tab.
  - Implemented unselect on escape.
- Fixed classes and layout for sidebar buttons, ensuring they don't look
strange and behave consistently.
- Fixed button classes to allow loading indicators and ensure proper
sizing and functionality.
  - Modularized loading on buttons.

- **General Fixes and Improvements:**
  - Changed message of the terminal to "Run Langflow".
- Fixed save functionality to use user-provided API keys instead of
default ones.
- Ensured button components can handle multiple children and look
correct.
  - Added icons to various UI elements.
  - Fixed ID scrolling issue when clicking from Store.
  - Removed extra space caused by an unnecessary div element.
- Returned the loader to default settings and ensured buttons work with
`asChild`.

#### Additional Changes
- Merged the remote-tracking branch `origin/dev` into `fix/minor_bugs`
on multiple occasions to keep the branch up-to-date with the latest
developments.

#### Notes

- Please review the changes related to button classes carefully, as they
impact multiple components.
- Further UI enhancements are planned for the next iteration.

docs/docs/components/custom.mdx

@@ -3,7 +3,8 @@ import Admonition from "@theme/Admonition";
 # Custom Components
 
 <Admonition type="info" label="Tip">
-  Read the [Custom Component Guidelines](../administration/custom-component) for detailed information on custom components.
+  Read the [Custom Component Guidelines](../administration/custom-component) for
+  detailed information on custom components.
 </Admonition>
 
 Custom components let you extend Langflow by creating reusable and configurable components from a Python script.
@@ -32,7 +33,7 @@ This class is the foundation for creating custom components. It allows users to
 The following types are supported in the build method:
 
 | Supported Types                                                   |
-| --------------------------------------------------------- |
+| ----------------------------------------------------------------- |
 | _`str`_, _`int`_, _`float`_, _`bool`_, _`list`_, _`dict`_         |
 | _`langflow.field_typing.NestedDict`_                              |
 | _`langflow.field_typing.Prompt`_                                  |
@@ -50,12 +51,14 @@ The following types are supported in the build method:
 The difference between _`dict`_ and _`langflow.field_typing.NestedDict`_ is that one adds a simple key-value pair field, while the other opens a more robust dictionary editor.
 
 <Admonition type="info">
-  Use the `Prompt` type by adding **kwargs to the build method.
+  Use the `Prompt` type by adding **kwargs to the build method. If you want to
-  If you want to add the values of the variables to the template you defined, format the `PromptTemplate` inside the `CustomComponent` class.
+  add the values of the variables to the template you defined, format the
+  `PromptTemplate` inside the `CustomComponent` class.
 </Admonition>
 
 <Admonition type="info">
-  Use base Python types without a handle by default. To add handles, use the `input_types` key in the `build_config` method.
+  Use base Python types without a handle by default. To add handles, use the
+  `input_types` key in the `build_config` method.
 </Admonition>
 
 **build_config:** Defines the configuration fields of the component. This method returns a dictionary where each key represents a field name and each value defines the field's behavior.
@@ -63,7 +66,7 @@ The difference between _`dict`_ and _`langflow.field_typing.NestedDict`_ is that
 Supported keys for configuring fields:
 
 | Key                 | Description                                               |
-| --------------------- | --------------------------------------------------- |
+| ------------------- | --------------------------------------------------------- |
 | `is_list`           | Boolean indicating if the field can hold multiple values. |
 | `options`           | Dropdown menu options.                                    |
 | `multiline`         | Boolean indicating if a field allows multiline input.     |
@@ -81,7 +84,8 @@ Supported keys for configuring fields:
 | `field_type`        | Automatically set based on the build method's type hint.  |
 
 <Admonition type="info" label="Tip">
-  Use the `update_build_config` method to dynamically update configurations based on field values.
+  Use the `update_build_config` method to dynamically update configurations
+  based on field values.
 </Admonition>
 
 ## Additional methods and attributes
@@ -99,4 +103,3 @@ The `CustomComponent` class also provides helpful methods for specific tasks (e.
 - `status`: Shows values from the `build` method, useful for debugging.
 - `field_order`: Controls the display order of fields.
 - `icon`: Sets the canvas display icon.
-

docs/docs/getting-started/canvas.mdx

@@ -56,7 +56,8 @@ Components are the building blocks of flows. They consist of inputs, outputs, an
 <div style={{ marginBottom: "20px" }}>
   During the flow creation process, you will notice handles (colored circles)
   attached to one or both sides of a component. These handles represent the
-  availability to connect to other components. Hover over a handle to see connection details.
+  availability to connect to other components. Hover over a handle to see
+  connection details.
 </div>
 
 <div style={{ marginBottom: "20px" }}>
@@ -85,6 +86,7 @@ Build the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playgr
 
 Once the validation is complete, the status of each validated component should turn green (![Status icon](/logos/greencheck.svg)).
 To debug, hover over the component status to see the outputs.
+
 </div>
 
 ---
@@ -196,6 +198,7 @@ curl -X POST \
 ```
 
 Result:
+
 ```
 {"session_id":"f2eefd80-bb91-4190-9279-0d6ffafeaac4:53856a772b8e1cfcb3dd2e71576b5215399e95bae318d3c02101c81b7c252da3","outputs":[{"inputs":{"input_value":"is anybody there?"},"outputs":[{"results":{"result":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?"},"artifacts":{"message":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?","sender":"Machine","sender_name":"AI"},"messages":[{"message":"Arrr, me hearties! Aye, this be Captain [Your Name] speakin'. What be ye needin', matey?","sender":"Machine","sender_name":"AI","component_id":"ChatOutput-njtka"}],"component_display_name":"Chat Output","component_id":"ChatOutput-njtka"}]}]}%
 ```
@@ -231,9 +234,10 @@ A collection is a snapshot of flows available in a database.
 
 Collections can be downloaded to local storage and uploaded for future use.
 
-<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
+<div
-<ReactPlayer playing controls url='/videos/langflow_collection.mp4'
+  style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
-  />
+>
+  <ReactPlayer playing controls url="/videos/langflow_collection.mp4" />
 </div>
 
 ## Project
@@ -276,9 +280,3 @@ To see options for your project, in the upper left corner of the canvas, select
 **Export** - Download your current project to your local machine as a `.json` file.
 
 **Undo** or **Redo** - Undo or redo your last action.
-
-
-
-
-
-

docs/docs/getting-started/flows-components-collections.mdx

@@ -1,7 +1,7 @@
-import ThemedImage from '@theme/ThemedImage';
+import ThemedImage from "@theme/ThemedImage";
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import useBaseUrl from "@docusaurus/useBaseUrl";
-import ZoomableImage from '/src/theme/ZoomableImage.js';
+import ZoomableImage from "/src/theme/ZoomableImage.js";
-import ReactPlayer from 'react-player';
+import ReactPlayer from "react-player";
 
 # 🖥️ Flows, components, collections, and projects
 
@@ -17,10 +17,4 @@ A [project](#project) can be a component or a flow. Projects are saved as part o
 
 For example, the **OpenAI LLM** is a **component** of the **Basic prompting** flow, and the **flow** is stored in a **collection**.
 
-
-
 ## Component
-
-
-
-

docs/docs/getting-started/install-langflow.mdx

@@ -6,33 +6,40 @@ import Admonition from "@theme/Admonition";
 # 📦 Install Langflow
 
 <Admonition type="info">
-  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true), to create your own Langflow workspace in minutes.
+  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space
+  using this
+  link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true),
+  to create your own Langflow workspace in minutes.
 </Admonition>
 
 Langflow requires [Python >=3.10](https://www.python.org/downloads/release/python-3100/) and [pip](https://pypi.org/project/pip/) or [pipx](https://pipx.pypa.io/stable/installation/) to be installed on your system.
 
 Install Langflow with pip:
+
 ```bash
 python -m pip install langflow -U
 ```
 
 Install Langflow with pipx:
+
 ```bash
 pipx install langflow --python python3.10 --fetch-missing-python
 ```
-Pipx can fetch the missing Python version for you with `--fetch-missing-python`, but you can also install the Python version manually.
 
+Pipx can fetch the missing Python version for you with `--fetch-missing-python`, but you can also install the Python version manually.
 
 ## Install Langflow pre-release
 
 To install a pre-release version of Langflow:
 
 pip:
+
 ```bash
 python -m pip install langflow --pre --force-reinstall
 ```
 
 pipx:
+
 ```bash
 pipx install langflow --python python3.10 --fetch-missing-python --pip-args="--pre --force-reinstall"
 ```
@@ -52,11 +59,13 @@ python -m langflow --help
 ## ⛓️ Run Langflow
 
 1. To run Langflow, enter the following command.
+
 ```bash
 python -m langflow run
 ```
 
 2. Confirm that a local Langflow instance starts by visiting `http://127.0.0.1:7860` in a Chromium-based browser.
+
 ```bash
 │ Welcome to ⛓ Langflow                             │
 │                                                   │

docs/docs/getting-started/quickstart.mdx

@@ -10,12 +10,15 @@ This guide demonstrates how to build a basic prompt flow and modify that prompt
 
 ## Prerequisites
 
-* [Langflow installed and running](./install-langflow.mdx)
+- [Langflow installed and running](./install-langflow.mdx)
 
-* [OpenAI API key](https://platform.openai.com)
+- [OpenAI API key](https://platform.openai.com)
 
 <Admonition type="info">
-  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes.
+  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space
+  using this
+  link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
+  to create your own Langflow workspace in minutes.
 </Admonition>
 
 ## Hello World - Basic Prompting
@@ -72,8 +75,6 @@ By adding Langflow components to your flow, you can create all sorts of interest
 
 Here are a couple of examples:
 
-* [Memory chatbot](/starter-projects/memory-chatbot.mdx)
+- [Memory chatbot](/starter-projects/memory-chatbot.mdx)
-* [Blog writer](/starter-projects/blog-writer.mdx)
+- [Blog writer](/starter-projects/blog-writer.mdx)
-* [Document QA](/starter-projects/document-qa.mdx)
+- [Document QA](/starter-projects/document-qa.mdx)
-
-

docs/docs/index.mdx

@@ -29,7 +29,10 @@ Its intuitive interface allows for easy manipulation of AI building blocks, enab
 - [Langflow Canvas](/getting-started/canvas) - Learn more about the Langflow canvas.
 
 <Admonition type="info">
-  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes.
+  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space
+  using this
+  link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
+  to create your own Langflow workspace in minutes.
 </Admonition>
 
 ## Learn more about Langflow 1.0

docs/docs/integrations/notion/add-content-to-page.md

@@ -131,8 +131,8 @@ The `AddContentToPage` component is a powerful tool for integrating Notion conte
 ## Troubleshooting
 
 If you encounter any issues while using the `AddContentToPage` component, consider the following:
+
 - Verify the Notion integration token’s validity and permissions.
 - Check the Notion API documentation for updates.
 - Ensure markdown text is properly formatted.
 - Double-check the `block_id` for correctness.
-

docs/docs/integrations/notion/list-database-properties.md

@@ -80,6 +80,7 @@ class NotionDatabaseProperties(CustomComponent):
 ```
 
 ## Example Usage
+
 <Admonition type="info" title="Example Usage">
 Here's an example of how you can use the `NotionDatabaseProperties` component in a Langflow flow:
 
@@ -110,6 +111,7 @@ Feel free to explore the capabilities of the `NotionDatabaseProperties` componen
 ## Troubleshooting
 
 If you encounter any issues while using the `NotionDatabaseProperties` component, consider the following:
+
 - Verify that the Notion integration token is valid and has the required permissions.
 - Check the database ID to ensure it matches the intended Notion database.
 - Inspect the response from the Notion API for any error messages or status codes that may indicate the cause of the issue.

docs/docs/integrations/notion/list-pages.md

@@ -140,6 +140,7 @@ class NotionListPages(CustomComponent):
 <Admonition type="info" title="Example Usage">
 
 ## Example Usage
+
 Here's an example of how you can use the `NotionListPages` component in a Langflow flow and passing to the Prompt component:
 
 <ZoomableImage

docs/docs/integrations/notion/list-users.md

@@ -94,6 +94,7 @@ class NotionUserList(CustomComponent):
 ```
 
 ## Example Usage
+
 <Admonition type="info" title="Example Usage">
 Here's an example of how you can use the `NotionUserList` component in a Langflow flow and passing the outputs to the Prompt component:
 
@@ -117,7 +118,6 @@ Here's an example of how you can use the `NotionUserList` component in a Langflo
 
 The `NotionUserList` component provides a seamless way to integrate Notion user data into your Langflow workflows. By leveraging this component, you can easily retrieve and utilize user information from Notion, enhancing the capabilities of your Langflow applications. Feel free to explore and experiment with the `NotionUserList` component to unlock new possibilities in your Langflow projects!
 
-
 ## Troubleshooting
 
 If you encounter any issues while using the `NotionUserList` component, consider the following:

docs/docs/integrations/notion/page-create.md

@@ -97,6 +97,7 @@ class NotionPageCreator(CustomComponent):
 ```
 
 ## Example Usage
+
 <Admonition type="info" title="Example Usage">
 Here's an example of how to use the `NotionPageCreator` component in a Langflow flow:
 
@@ -124,6 +125,7 @@ The `NotionPageCreator` component simplifies the process of creating pages in a
 ## Troubleshooting
 
 If you encounter any issues while using the `NotionPageCreator` component, consider the following:
+
 - Double-check that the `database_id` and `notion_secret` inputs are correct and valid.
 - Verify that the `properties` input is properly formatted as a JSON string and matches the structure of your Notion database.
 - Check the Notion API documentation for any updates or changes that may affect the component's functionality.

docs/docs/integrations/notion/page-update.md

@@ -128,7 +128,6 @@ When using the `NotionPageUpdate` component, consider the following best practic
 
 By leveraging the `NotionPageUpdate` component in Langflow, you can easily integrate updating Notion page properties into your language model workflows and build powerful applications that extend Langflow's capabilities.
 
-
 ## Troubleshooting
 
 If you encounter any issues while using the `NotionPageUpdate` component, consider the following:

docs/docs/integrations/notion/search.md

@@ -146,6 +146,7 @@ class NotionSearch(CustomComponent):
 ```
 
 ## Example Usage
+
 <Admonition type="info" title="Example Usage">
 Here's an example of how you can use the `NotionSearch` component in a Langflow flow:
 

docs/docs/integrations/notion/setup.md

@@ -76,4 +76,3 @@ Refer to the individual component documentation for more details on how to use e
 - [Notion Integration Capabilities](https://developers.notion.com/reference/capabilities)
 
 If you encounter any issues or have questions, please reach out to our support team or consult the Langflow community forums.
-

docs/docs/migration/possible-installation-issues.mdx

@@ -45,4 +45,3 @@ There are two possible reasons for this error:
 This error can occur during Langflow upgrades when the new version can't override `langflow-pre.db` in `.cache/langflow/`. Clearing the cache removes this file but will also erase your settings.
 
 If you wish to retain your files, back them up before clearing the folder.
-

docs/docs/starter-projects/basic-prompting.mdx

@@ -14,12 +14,15 @@ This article demonstrates how to use Langflow's prompt tools to issue basic prom
 
 ## Prerequisites
 
-* [Langflow installed and running](../getting-started/install-langflow.mdx)
+- [Langflow installed and running](../getting-started/install-langflow.mdx)
 
-* [OpenAI API key created](https://platform.openai.com)
+- [OpenAI API key created](https://platform.openai.com)
 
 <Admonition type="info">
-  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes.
+  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space
+  using this
+  link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
+  to create your own Langflow workspace in minutes.
 </Admonition>
 
 ## Create the basic prompting project
@@ -60,7 +63,3 @@ The **Edit Prompt** window opens.
 2. Change `Answer the user as if you were a pirate` to a different character, perhaps `Answer the user as if you were Harold Abelson.`
 3. Run the basic prompting flow again.
    The response will be markedly different.
-
-
-
-

docs/docs/starter-projects/blog-writer.mdx

@@ -10,12 +10,15 @@ Build a blog writer with OpenAI that uses URLs for reference content.
 
 ## Prerequisites
 
-* [Langflow installed and running](../getting-started/install-langflow.mdx)
+- [Langflow installed and running](../getting-started/install-langflow.mdx)
 
-* [OpenAI API key created](https://platform.openai.com)
+- [OpenAI API key created](https://platform.openai.com)
 
 <Admonition type="info">
-  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes.
+  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space
+  using this
+  link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
+  to create your own Langflow workspace in minutes.
 </Admonition>
 
 ## Create the Blog Writer project
@@ -36,6 +39,7 @@ Build a blog writer with OpenAI that uses URLs for reference content.
 This flow creates a one-shot prompt flow with **Prompt**, **OpenAI**, and **Chat Output** components, and augments the flow with reference content and instructions from the **URL** and **Instructions** components.
 
 The **Prompt** component's default **Template** field looks like this:
+
 ```bash
 Reference 1:
 

docs/docs/starter-projects/document-qa.mdx

@@ -10,12 +10,15 @@ Build a question-and-answer chatbot with a document loaded from local memory.
 
 ## Prerequisites
 
-* [Langflow installed and running](../getting-started/install-langflow.mdx)
+- [Langflow installed and running](../getting-started/install-langflow.mdx)
 
-* [OpenAI API key created](https://platform.openai.com)
+- [OpenAI API key created](https://platform.openai.com)
 
 <Admonition type="info">
-  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes.
+  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space
+  using this
+  link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
+  to create your own Langflow workspace in minutes.
 </Admonition>
 
 ## Create the Document QA project
@@ -39,6 +42,7 @@ The **Prompt** component is instructed to answer questions based on the contents
 Including a file with the prompt gives the **OpenAI** component context it may not otherwise have access to.
 
 4. To create an environment variable for the **OpenAI** component, in the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
+
    1. In the **Variable Name** field, enter `openai_api_key`.
    2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
    3. Click **Save Variable**.
@@ -47,7 +51,8 @@ Including a file with the prompt gives the **OpenAI** component context it may n
    1. Select a local file, and then click **Open**.
    2. The file name appears in the field.
       <Admonition type="tip">
-        The file must be of an extension type listed [here](https://github.com/langflow-ai/langflow/blob/dev/src/backend/base/langflow/base/data/utils.py#L13).
+        The file must be of an extension type listed
+        [here](https://github.com/langflow-ai/langflow/blob/dev/src/backend/base/langflow/base/data/utils.py#L13).
       </Admonition>
 
 ## Run the Document QA flow
@@ -57,6 +62,7 @@ The **Interaction Panel** opens, where you can converse with your bot.
 2. Type a message and press Enter.
    For this example, we loaded an error log `.txt` file and asked, "What went wrong?"
    The bot responded:
+
 ```
 The issue occurred during the execution of migrations in the application. Specifically, an error was raised by the Alembic library, indicating that new upgrade operations were detected that had not been accounted for in the existing migration scripts. The operation in question involved modifying the nullable property of a column (apikey, created_at) in the database, with details about the existing type (DATETIME()), existing server default, and other properties.
 ```

docs/docs/starter-projects/memory-chatbot.mdx

@@ -10,12 +10,15 @@ This flow extends the [basic prompting flow](./basic-prompting.mdx) to include c
 
 ## Prerequisites
 
-* [Langflow installed and running](../getting-started/install-langflow.mdx)
+- [Langflow installed and running](../getting-started/install-langflow.mdx)
 
-* [OpenAI API key created](https://platform.openai.com)
+- [OpenAI API key created](https://platform.openai.com)
 
 <Admonition type="info">
-  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes.
+  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space
+  using this
+  link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
+  to create your own Langflow workspace in minutes.
 </Admonition>
 
 ## Create the memory chatbot project
@@ -79,4 +82,3 @@ To store **Session ID** as a Langflow variable, in the **Session ID** field, cli
 2. In the **Value** field, enter a value like `1B5EBD79-6E9C-4533-B2C8-7E4FF29E983B`.
 3. Click **Save Variable**.
 4. Apply this variable to **Chat Input**.
-

docs/docs/starter-projects/vector-store-rag.mdx

@@ -17,16 +17,19 @@ We've chosen [Astra DB](https://astra.datastax.com/signup?utm_source=langflow-pr
 ## Prerequisites
 
 <Admonition type="info">
-  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space using this link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) to create your own Langflow workspace in minutes.
+  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space
+  using this
+  link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
+  to create your own Langflow workspace in minutes.
 </Admonition>
 
-* [Langflow installed and running](../getting-started/install-langflow.mdx)
+- [Langflow installed and running](../getting-started/install-langflow.mdx)
 
-* [OpenAI API key](https://platform.openai.com)
+- [OpenAI API key](https://platform.openai.com)
 
-* [An Astra DB vector database created](https://docs.datastax.com/en/astra-db-serverless/get-started/quickstart.html) with:
+- [An Astra DB vector database created](https://docs.datastax.com/en/astra-db-serverless/get-started/quickstart.html) with:
-    * Application token (`AstraCS:WSnyFUhRxsrg…​`)
+  - Application token (`AstraCS:WSnyFUhRxsrg…​`)
-    * API endpoint (`https://ASTRA_DB_ID-ASTRA_DB_REGION.apps.astra.datastax.com`)
+  - API endpoint (`https://ASTRA_DB_ID-ASTRA_DB_REGION.apps.astra.datastax.com`)
 
 ## Create the vector store RAG project
 
@@ -51,20 +54,21 @@ This forms a "brain" for the query flow.
 
 The **query** flow (top of the screen) allows users to chat with the embedded vector store data. It's a little more complex:
 
-* **Chat Input** component defines where to put the user input coming from the Playground.
+- **Chat Input** component defines where to put the user input coming from the Playground.
-* **OpenAI Embeddings** component generates embeddings from the user input.
+- **OpenAI Embeddings** component generates embeddings from the user input.
-* **Astra DB Search** component retrieves the most relevant Records from the Astra DB database.
+- **Astra DB Search** component retrieves the most relevant Records from the Astra DB database.
-* **Text Output** component turns the Records into Text by concatenating them and also displays it in the Playground.
+- **Text Output** component turns the Records into Text by concatenating them and also displays it in the Playground.
-* **Prompt** component takes in the user input and the retrieved Records as text and builds a prompt for the OpenAI model.
+- **Prompt** component takes in the user input and the retrieved Records as text and builds a prompt for the OpenAI model.
-* **OpenAI** component generates a response to the prompt.
+- **OpenAI** component generates a response to the prompt.
-* **Chat Output** component displays the response in the Playground.
+- **Chat Output** component displays the response in the Playground.
 
 4. To create an environment variable for the **OpenAI** component, in the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
+
    1. In the **Variable Name** field, enter `openai_api_key`.
    2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
    3. Click **Save Variable**.
 
-4. To create environment variables for the **Astra DB** and **Astra DB Search** components:
+5. To create environment variables for the **Astra DB** and **Astra DB Search** components:
    1. In the **Token** field, click the **Globe** button, and then click **Add New Variable**.
    2. In the **Variable Name** field, enter `astra_token`.
    3. In the **Value** field, paste your Astra application token (`AstraCS:WSnyFUhRxsrg…​`).
@@ -81,6 +85,7 @@ The **Playground** opens, where you can chat with your data.
 
 For example, we embedded a PDF of an engine maintenance manual and asked, "How do I change the oil?"
 The bot responds:
+
 ```
 To change the oil in the engine, follow these steps:
 
@@ -102,7 +107,3 @@ You should use a 3/8 inch wrench to remove the oil drain cap.
 ```
 
 This is the size the engine manual lists as well. This confirms our flow works, because the query returns the unique knowledge we embedded from the Astra vector store.
-
-
-
-

scripts/gcp/GCP_DEPLOYMENT.md

@@ -20,8 +20,7 @@ When running as a [spot (preemptible) instance](https://cloud.google.com/compute
 
 ## Pricing (approximate)
 
-> For a more accurate breakdown of costs, please use the [**GCP Pricing Calculator**](https://cloud.google.com/products/calculator)
+> For a more accurate breakdown of costs, please use the [**GCP Pricing Calculator**](https://cloud.google.com/products/calculator) > <br>
-> <br>
 
 | Component          | Regular Cost (Hourly) | Regular Cost (Monthly) | Spot/Preemptible Cost (Hourly) | Spot/Preemptible Cost (Monthly) | Notes                                                                      |
 | ------------------ | --------------------- | ---------------------- | ------------------------------ | ------------------------------- | -------------------------------------------------------------------------- |

src/backend/base/langflow/__main__.py

@@ -121,7 +121,7 @@ def run(
     ),
 ):
     """
-    Run the Langflow.
+    Run Langflow.
     """
 
     configure(log_level=log_level, log_file=log_file)

src/backend/base/langflow/initial_setup/starter_projects/Basic Prompting (Hello, world!).json

@@ -45,9 +45,7 @@
                 "name": "template",
                 "display_name": "Template",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -86,22 +84,14 @@
             "is_input": null,
             "is_output": null,
             "is_composition": null,
-                        "base_classes": [
+            "base_classes": ["object", "str", "Text"],
-                            "object",
-                            "str",
-                            "Text"
-                        ],
             "name": "",
             "display_name": "Prompt",
             "documentation": "",
             "custom_fields": {
-                            "template": [
+              "template": ["user_input"]
-                                "user_input"
-                            ]
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "full_path": null,
             "field_formatters": {},
             "frozen": false,
@@ -150,9 +140,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "code": {
                 "type": "code",
@@ -161,7 +149,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                                "value": "from typing import Optional\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import NestedDict, Text\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    field_order = [\n        \"max_tokens\",\n        \"model_kwargs\",\n        \"model_name\",\n        \"openai_api_base\",\n        \"openai_api_key\",\n        \"temperature\",\n        \"input_value\",\n        \"system_message\",\n        \"stream\",\n    ]\n\n    def build_config(self):\n        return {\n            \"input_value\": {\"display_name\": \"Input\"},\n            \"max_tokens\": {\n                \"display_name\": \"Max Tokens\",\n                \"advanced\": True,\n                \"info\": \"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n            },\n            \"model_kwargs\": {\n                \"display_name\": \"Model Kwargs\",\n                \"advanced\": True,\n            },\n            \"model_name\": {\n                \"display_name\": \"Model Name\",\n                \"advanced\": False,\n                \"options\": MODEL_NAMES,\n            },\n            \"openai_api_base\": {\n                \"display_name\": \"OpenAI API Base\",\n                \"advanced\": True,\n                \"info\": (\n                    \"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\\n\\n\"\n                    \"You can change this to use other APIs like JinaChat, LocalAI and Prem.\"\n                ),\n            },\n            \"openai_api_key\": {\n                \"display_name\": \"OpenAI API Key\",\n                \"info\": \"The OpenAI API Key to use for the OpenAI model.\",\n                \"advanced\": False,\n                \"password\": True,\n            },\n            \"temperature\": {\n                \"display_name\": \"Temperature\",\n                \"advanced\": False,\n                \"value\": 0.1,\n            },\n            \"stream\": {\n                \"display_name\": \"Stream\",\n                \"info\": STREAM_INFO_TEXT,\n                \"advanced\": True,\n            },\n            \"system_message\": {\n                \"display_name\": \"System Message\",\n                \"info\": \"System message to pass to the model.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Text,\n        openai_api_key: str,\n        temperature: float,\n        model_name: str = \"gpt-4o\",\n        max_tokens: Optional[int] = 256,\n        model_kwargs: NestedDict = {},\n        openai_api_base: Optional[str] = None,\n        stream: bool = False,\n        system_message: Optional[str] = None,\n    ) -> Text:\n        if not openai_api_base:\n            openai_api_base = \"https://api.openai.com/v1\"\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature,\n        )\n\n        return self.get_chat_result(output, stream, input_value, system_message)\n",
+                "value": "from typing import Optional\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import NestedDict, Text\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    field_order = [\n        \"max_tokens\",\n        \"model_kwargs\",\n        \"model_name\",\n        \"openai_api_base\",\n        \"openai_api_key\",\n        \"temperature\",\n        \"input_value\",\n        \"system_message\",\n        \"stream\",\n    ]\n\n    def build_config(self):\n        return {\n            \"input_value\": {\"display_name\": \"Input\"},\n            \"max_tokens\": {\n                \"display_name\": \"Max Tokens\",\n                \"advanced\": True,\n                \"info\": \"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n            },\n            \"model_kwargs\": {\n                \"display_name\": \"Model Kwargs\",\n                \"advanced\": True,\n            },\n            \"model_name\": {\n                \"display_name\": \"Model Name\",\n                \"advanced\": False,\n                \"options\": MODEL_NAMES,\n            },\n            \"openai_api_base\": {\n                \"display_name\": \"OpenAI API Base\",\n                \"advanced\": True,\n                \"info\": (\n                    \"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\\n\\n\"\n                    \"You can change this to use other APIs like JinaChat, LocalAI and Prem.\"\n                ),\n            },\n            \"openai_api_key\": {\n                \"display_name\": \"OpenAI API Key\",\n                \"info\": \"The OpenAI API Key to use for the OpenAI model.\",\n                \"advanced\": False,\n                \"password\": True,\n            },\n            \"temperature\": {\n                \"display_name\": \"Temperature\",\n                \"advanced\": False,\n                \"value\": 0.1,\n            },\n            \"stream\": {\n                \"display_name\": \"Stream\",\n                \"info\": STREAM_INFO_TEXT,\n                \"advanced\": True,\n            },\n            \"system_message\": {\n                \"display_name\": \"System Message\",\n                \"info\": \"System message to pass to the model.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Text,\n        openai_api_key: str,\n        temperature: float = 0.1,\n        model_name: str = \"gpt-4o\",\n        max_tokens: Optional[int] = 256,\n        model_kwargs: NestedDict = {},\n        openai_api_base: Optional[str] = None,\n        stream: bool = False,\n        system_message: Optional[str] = None,\n    ) -> Text:\n        if not openai_api_base:\n            openai_api_base = \"https://api.openai.com/v1\"\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature,\n        )\n\n        return self.get_chat_result(output, stream, input_value, system_message)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -235,9 +223,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "openai_api_base": {
                 "type": "str",
@@ -256,9 +242,7 @@
                 "info": "The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\n\nYou can change this to use other APIs like JinaChat, LocalAI and Prem.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "openai_api_key": {
                 "type": "str",
@@ -277,9 +261,7 @@
                 "info": "The OpenAI API Key to use for the OpenAI model.",
                 "load_from_db": true,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "value": "OPENAI_API_KEY"
               },
               "stream": {
@@ -318,13 +300,11 @@
                 "info": "System message to pass to the model.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "temperature": {
                 "type": "float",
-                                "required": true,
+                "required": false,
                 "placeholder": "",
                 "list": false,
                 "show": true,
@@ -351,11 +331,7 @@
             },
             "description": "Generates text using OpenAI LLMs.",
             "icon": "OpenAI",
-                        "base_classes": [
+            "base_classes": ["object", "Text", "str"],
-                            "object",
-                            "Text",
-                            "str"
-                        ],
             "display_name": "OpenAI",
             "documentation": "",
             "custom_fields": {
@@ -369,9 +345,7 @@
               "stream": null,
               "system_message": null
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [
@@ -442,9 +416,7 @@
                 "name": "input_value",
                 "display_name": "Message",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -468,9 +440,7 @@
                 "info": "In case of Message being a Record, this template will be used to convert it to text.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "return_record": {
                 "type": "bool",
@@ -502,10 +472,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                                "options": [
+                "options": ["Machine", "User"],
-                                    "Machine",
-                                    "User"
-                                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -513,9 +480,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "sender_name": {
                 "type": "str",
@@ -535,9 +500,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "session_id": {
                 "type": "str",
@@ -556,20 +519,13 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
-                        "base_classes": [
+            "base_classes": ["Record", "Text", "str", "object"],
-                            "Record",
-                            "Text",
-                            "str",
-                            "object"
-                        ],
             "display_name": "Chat Output",
             "documentation": "",
             "custom_fields": {
@@ -580,10 +536,7 @@
               "return_record": null,
               "record_template": null
             },
-                        "output_types": [
+            "output_types": ["Text", "Record"],
-                            "Text",
-                            "Record"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -679,10 +632,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                                "options": [
+                "options": ["Machine", "User"],
-                                    "Machine",
-                                    "User"
-                                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -690,9 +640,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "sender_name": {
                 "type": "str",
@@ -712,9 +660,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "session_id": {
                 "type": "str",
@@ -733,20 +679,13 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
-                        "base_classes": [
+            "base_classes": ["object", "Record", "str", "Text"],
-                            "object",
-                            "Record",
-                            "str",
-                            "Text"
-                        ],
             "display_name": "Chat Input",
             "documentation": "",
             "custom_fields": {
@@ -756,10 +695,7 @@
               "session_id": null,
               "return_record": null
             },
-                        "output_types": [
+            "output_types": ["Text", "Record"],
-                            "Text",
-                            "Record"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -780,24 +716,18 @@
     "edges": [
       {
         "source": "OpenAIModel-k39HS",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153Text\u0153,\u0153str\u0153],\u0153dataType\u0153:\u0153OpenAIModel\u0153,\u0153id\u0153:\u0153OpenAIModel-k39HS\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œobjectœ,œTextœ,œstrœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-k39HSœ}",
         "target": "ChatOutput-njtka",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153ChatOutput-njtka\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-njtkaœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "ChatOutput-njtka",
-                        "inputTypes": [
+            "inputTypes": ["Text"],
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["object", "Text", "str"],
-                            "object",
-                            "Text",
-                            "str"
-                        ],
             "dataType": "OpenAIModel",
             "id": "OpenAIModel-k39HS"
           }
@@ -806,28 +736,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-OpenAIModel-k39HS{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153Text\u0153,\u0153str\u0153],\u0153dataType\u0153:\u0153OpenAIModel\u0153,\u0153id\u0153:\u0153OpenAIModel-k39HS\u0153}-ChatOutput-njtka{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153ChatOutput-njtka\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-OpenAIModel-k39HS{œbaseClassesœ:[œobjectœ,œTextœ,œstrœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-k39HSœ}-ChatOutput-njtka{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-njtkaœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "Prompt-uxBqP",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-uxBqP\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-uxBqPœ}",
         "target": "OpenAIModel-k39HS",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153OpenAIModel-k39HS\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-k39HSœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "OpenAIModel-k39HS",
-                        "inputTypes": [
+            "inputTypes": ["Text"],
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["object", "str", "Text"],
-                            "object",
-                            "str",
-                            "Text"
-                        ],
             "dataType": "Prompt",
             "id": "Prompt-uxBqP"
           }
@@ -836,32 +760,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-Prompt-uxBqP{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-uxBqP\u0153}-OpenAIModel-k39HS{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153OpenAIModel-k39HS\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-Prompt-uxBqP{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-uxBqPœ}-OpenAIModel-k39HS{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-k39HSœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "ChatInput-P3fgL",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153Record\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153ChatInput\u0153,\u0153id\u0153:\u0153ChatInput-P3fgL\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œobjectœ,œRecordœ,œstrœ,œTextœ],œdataTypeœ:œChatInputœ,œidœ:œChatInput-P3fgLœ}",
         "target": "Prompt-uxBqP",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153user_input\u0153,\u0153id\u0153:\u0153Prompt-uxBqP\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œuser_inputœ,œidœ:œPrompt-uxBqPœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "user_input",
             "id": "Prompt-uxBqP",
-                        "inputTypes": [
+            "inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
-                            "Document",
-                            "BaseOutputParser",
-                            "Record",
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["object", "Record", "str", "Text"],
-                            "object",
-                            "Record",
-                            "str",
-                            "Text"
-                        ],
             "dataType": "ChatInput",
             "id": "ChatInput-P3fgL"
           }
@@ -870,7 +784,7 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-ChatInput-P3fgL{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153Record\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153ChatInput\u0153,\u0153id\u0153:\u0153ChatInput-P3fgL\u0153}-Prompt-uxBqP{\u0153fieldName\u0153:\u0153user_input\u0153,\u0153id\u0153:\u0153Prompt-uxBqP\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-ChatInput-P3fgL{œbaseClassesœ:[œobjectœ,œRecordœ,œstrœ,œTextœ],œdataTypeœ:œChatInputœ,œidœ:œChatInput-P3fgLœ}-Prompt-uxBqP{œfieldNameœ:œuser_inputœ,œidœ:œPrompt-uxBqPœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}"
       }
     ],
     "viewport": {

src/backend/base/langflow/initial_setup/starter_projects/Langflow Blog Writter.json

@@ -45,9 +45,7 @@
                 "name": "template",
                 "display_name": "Template",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -138,24 +136,14 @@
             "is_input": null,
             "is_output": null,
             "is_composition": null,
-                        "base_classes": [
+            "base_classes": ["object", "Text", "str"],
-                            "object",
-                            "Text",
-                            "str"
-                        ],
             "name": "",
             "display_name": "Prompt",
             "documentation": "",
             "custom_fields": {
-                            "template": [
+              "template": ["reference_1", "reference_2", "instructions"]
-                                "reference_1",
-                                "reference_2",
-                                "instructions"
-                            ]
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "full_path": null,
             "field_formatters": {},
             "frozen": false,
@@ -222,9 +210,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "value": [
                   "https://www.promptingguide.ai/techniques/prompt_chaining"
                 ]
@@ -233,17 +219,13 @@
             },
             "description": "Fetch content from one or more URLs.",
             "icon": "layout-template",
-                        "base_classes": [
+            "base_classes": ["Record"],
-                            "Record"
-                        ],
             "display_name": "URL",
             "documentation": "",
             "custom_fields": {
               "urls": null
             },
-                        "output_types": [
+            "output_types": ["Record"],
-                            "Record"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -302,9 +284,7 @@
                 "name": "input_value",
                 "display_name": "Message",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -328,9 +308,7 @@
                 "info": "In case of Message being a Record, this template will be used to convert it to text.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "return_record": {
                 "type": "bool",
@@ -362,10 +340,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                                "options": [
+                "options": ["Machine", "User"],
-                                    "Machine",
-                                    "User"
-                                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -373,9 +348,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "sender_name": {
                 "type": "str",
@@ -395,9 +368,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "session_id": {
                 "type": "str",
@@ -416,20 +387,13 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
-                        "base_classes": [
+            "base_classes": ["Text", "Record", "object", "str"],
-                            "Text",
-                            "Record",
-                            "object",
-                            "str"
-                        ],
             "display_name": "Chat Output",
             "documentation": "",
             "custom_fields": {
@@ -440,10 +404,7 @@
               "return_record": null,
               "record_template": null
             },
-                        "output_types": [
+            "output_types": ["Text", "Record"],
-                            "Text",
-                            "Record"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -483,9 +444,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "code": {
                 "type": "code",
@@ -494,7 +453,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                                "value": "from typing import Optional\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import NestedDict, Text\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    field_order = [\n        \"max_tokens\",\n        \"model_kwargs\",\n        \"model_name\",\n        \"openai_api_base\",\n        \"openai_api_key\",\n        \"temperature\",\n        \"input_value\",\n        \"system_message\",\n        \"stream\",\n    ]\n\n    def build_config(self):\n        return {\n            \"input_value\": {\"display_name\": \"Input\"},\n            \"max_tokens\": {\n                \"display_name\": \"Max Tokens\",\n                \"advanced\": True,\n                \"info\": \"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n            },\n            \"model_kwargs\": {\n                \"display_name\": \"Model Kwargs\",\n                \"advanced\": True,\n            },\n            \"model_name\": {\n                \"display_name\": \"Model Name\",\n                \"advanced\": False,\n                \"options\": MODEL_NAMES,\n            },\n            \"openai_api_base\": {\n                \"display_name\": \"OpenAI API Base\",\n                \"advanced\": True,\n                \"info\": (\n                    \"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\\n\\n\"\n                    \"You can change this to use other APIs like JinaChat, LocalAI and Prem.\"\n                ),\n            },\n            \"openai_api_key\": {\n                \"display_name\": \"OpenAI API Key\",\n                \"info\": \"The OpenAI API Key to use for the OpenAI model.\",\n                \"advanced\": False,\n                \"password\": True,\n            },\n            \"temperature\": {\n                \"display_name\": \"Temperature\",\n                \"advanced\": False,\n                \"value\": 0.1,\n            },\n            \"stream\": {\n                \"display_name\": \"Stream\",\n                \"info\": STREAM_INFO_TEXT,\n                \"advanced\": True,\n            },\n            \"system_message\": {\n                \"display_name\": \"System Message\",\n                \"info\": \"System message to pass to the model.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Text,\n        openai_api_key: str,\n        temperature: float,\n        model_name: str = \"gpt-4o\",\n        max_tokens: Optional[int] = 256,\n        model_kwargs: NestedDict = {},\n        openai_api_base: Optional[str] = None,\n        stream: bool = False,\n        system_message: Optional[str] = None,\n    ) -> Text:\n        if not openai_api_base:\n            openai_api_base = \"https://api.openai.com/v1\"\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature,\n        )\n\n        return self.get_chat_result(output, stream, input_value, system_message)\n",
+                "value": "from typing import Optional\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import NestedDict, Text\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    field_order = [\n        \"max_tokens\",\n        \"model_kwargs\",\n        \"model_name\",\n        \"openai_api_base\",\n        \"openai_api_key\",\n        \"temperature\",\n        \"input_value\",\n        \"system_message\",\n        \"stream\",\n    ]\n\n    def build_config(self):\n        return {\n            \"input_value\": {\"display_name\": \"Input\"},\n            \"max_tokens\": {\n                \"display_name\": \"Max Tokens\",\n                \"advanced\": True,\n                \"info\": \"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n            },\n            \"model_kwargs\": {\n                \"display_name\": \"Model Kwargs\",\n                \"advanced\": True,\n            },\n            \"model_name\": {\n                \"display_name\": \"Model Name\",\n                \"advanced\": False,\n                \"options\": MODEL_NAMES,\n            },\n            \"openai_api_base\": {\n                \"display_name\": \"OpenAI API Base\",\n                \"advanced\": True,\n                \"info\": (\n                    \"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\\n\\n\"\n                    \"You can change this to use other APIs like JinaChat, LocalAI and Prem.\"\n                ),\n            },\n            \"openai_api_key\": {\n                \"display_name\": \"OpenAI API Key\",\n                \"info\": \"The OpenAI API Key to use for the OpenAI model.\",\n                \"advanced\": False,\n                \"password\": True,\n            },\n            \"temperature\": {\n                \"display_name\": \"Temperature\",\n                \"advanced\": False,\n                \"value\": 0.1,\n            },\n            \"stream\": {\n                \"display_name\": \"Stream\",\n                \"info\": STREAM_INFO_TEXT,\n                \"advanced\": True,\n            },\n            \"system_message\": {\n                \"display_name\": \"System Message\",\n                \"info\": \"System message to pass to the model.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Text,\n        openai_api_key: str,\n        temperature: float = 0.1,\n        model_name: str = \"gpt-4o\",\n        max_tokens: Optional[int] = 256,\n        model_kwargs: NestedDict = {},\n        openai_api_base: Optional[str] = None,\n        stream: bool = False,\n        system_message: Optional[str] = None,\n    ) -> Text:\n        if not openai_api_base:\n            openai_api_base = \"https://api.openai.com/v1\"\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature,\n        )\n\n        return self.get_chat_result(output, stream, input_value, system_message)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -568,9 +527,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "openai_api_base": {
                 "type": "str",
@@ -589,9 +546,7 @@
                 "info": "The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\n\nYou can change this to use other APIs like JinaChat, LocalAI and Prem.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "openai_api_key": {
                 "type": "str",
@@ -610,9 +565,7 @@
                 "info": "The OpenAI API Key to use for the OpenAI model.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "value": "OPENAI_API_KEY"
               },
               "stream": {
@@ -651,13 +604,11 @@
                 "info": "System message to pass to the model.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "temperature": {
                 "type": "float",
-                                "required": true,
+                "required": false,
                 "placeholder": "",
                 "list": false,
                 "show": true,
@@ -684,11 +635,7 @@
             },
             "description": "Generates text using OpenAI LLMs.",
             "icon": "OpenAI",
-                        "base_classes": [
+            "base_classes": ["str", "Text", "object"],
-                            "str",
-                            "Text",
-                            "object"
-                        ],
             "display_name": "OpenAI",
             "documentation": "",
             "custom_fields": {
@@ -702,9 +649,7 @@
               "stream": null,
               "system_message": null
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [
@@ -777,28 +722,20 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
+                "value": ["https://www.promptingguide.ai/introduction/basics"]
-                                ],
-                                "value": [
-                                    "https://www.promptingguide.ai/introduction/basics"
-                                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Fetch content from one or more URLs.",
             "icon": "layout-template",
-                        "base_classes": [
+            "base_classes": ["Record"],
-                            "Record"
-                        ],
             "display_name": "URL",
             "documentation": "",
             "custom_fields": {
               "urls": null
             },
-                        "output_types": [
+            "output_types": ["Record"],
-                            "Record"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -858,10 +795,7 @@
                 "name": "input_value",
                 "display_name": "Value",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Record", "Text"],
-                                    "Record",
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "Text or Record to be passed as input.",
                 "load_from_db": false,
@@ -885,28 +819,20 @@
                 "info": "Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Get text inputs from the Playground.",
             "icon": "type",
-                        "base_classes": [
+            "base_classes": ["object", "Text", "str"],
-                            "object",
-                            "Text",
-                            "str"
-                        ],
             "display_name": "Instructions",
             "documentation": "",
             "custom_fields": {
               "input_value": null,
               "record_template": null
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -928,25 +854,18 @@
       {
         "source": "URL-HYPkR",
         "target": "Prompt-Rse03",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153Record\u0153],\u0153dataType\u0153:\u0153URL\u0153,\u0153id\u0153:\u0153URL-HYPkR\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œRecordœ],œdataTypeœ:œURLœ,œidœ:œURL-HYPkRœ}",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153reference_2\u0153,\u0153id\u0153:\u0153Prompt-Rse03\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œreference_2œ,œidœ:œPrompt-Rse03œ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
-                "id": "reactflow__edge-URL-HYPkR{\u0153baseClasses\u0153:[\u0153Record\u0153],\u0153dataType\u0153:\u0153URL\u0153,\u0153id\u0153:\u0153URL-HYPkR\u0153}-Prompt-Rse03{\u0153fieldName\u0153:\u0153reference_2\u0153,\u0153id\u0153:\u0153Prompt-Rse03\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "id": "reactflow__edge-URL-HYPkR{œbaseClassesœ:[œRecordœ],œdataTypeœ:œURLœ,œidœ:œURL-HYPkRœ}-Prompt-Rse03{œfieldNameœ:œreference_2œ,œidœ:œPrompt-Rse03œ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "reference_2",
             "id": "Prompt-Rse03",
-                        "inputTypes": [
+            "inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
-                            "Document",
-                            "BaseOutputParser",
-                            "Record",
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["Record"],
-                            "Record"
-                        ],
             "dataType": "URL",
             "id": "URL-HYPkR"
           }
@@ -959,24 +878,18 @@
       },
       {
         "source": "OpenAIModel-gi29P",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153OpenAIModel\u0153,\u0153id\u0153:\u0153OpenAIModel-gi29P\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œstrœ,œTextœ,œobjectœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-gi29Pœ}",
         "target": "ChatOutput-JPlxl",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153ChatOutput-JPlxl\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-JPlxlœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "ChatOutput-JPlxl",
-                        "inputTypes": [
+            "inputTypes": ["Text"],
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["str", "Text", "object"],
-                            "str",
-                            "Text",
-                            "object"
-                        ],
             "dataType": "OpenAIModel",
             "id": "OpenAIModel-gi29P"
           }
@@ -985,29 +898,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-OpenAIModel-gi29P{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153OpenAIModel\u0153,\u0153id\u0153:\u0153OpenAIModel-gi29P\u0153}-ChatOutput-JPlxl{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153ChatOutput-JPlxl\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-OpenAIModel-gi29P{œbaseClassesœ:[œstrœ,œTextœ,œobjectœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-gi29Pœ}-ChatOutput-JPlxl{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-JPlxlœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "URL-2cX90",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153Record\u0153],\u0153dataType\u0153:\u0153URL\u0153,\u0153id\u0153:\u0153URL-2cX90\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œRecordœ],œdataTypeœ:œURLœ,œidœ:œURL-2cX90œ}",
         "target": "Prompt-Rse03",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153reference_1\u0153,\u0153id\u0153:\u0153Prompt-Rse03\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œreference_1œ,œidœ:œPrompt-Rse03œ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "reference_1",
             "id": "Prompt-Rse03",
-                        "inputTypes": [
+            "inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
-                            "Document",
-                            "BaseOutputParser",
-                            "Record",
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["Record"],
-                            "Record"
-                        ],
             "dataType": "URL",
             "id": "URL-2cX90"
           }
@@ -1016,31 +922,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-URL-2cX90{\u0153baseClasses\u0153:[\u0153Record\u0153],\u0153dataType\u0153:\u0153URL\u0153,\u0153id\u0153:\u0153URL-2cX90\u0153}-Prompt-Rse03{\u0153fieldName\u0153:\u0153reference_1\u0153,\u0153id\u0153:\u0153Prompt-Rse03\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-URL-2cX90{œbaseClassesœ:[œRecordœ],œdataTypeœ:œURLœ,œidœ:œURL-2cX90œ}-Prompt-Rse03{œfieldNameœ:œreference_1œ,œidœ:œPrompt-Rse03œ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "TextInput-og8Or",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153Text\u0153,\u0153str\u0153],\u0153dataType\u0153:\u0153TextInput\u0153,\u0153id\u0153:\u0153TextInput-og8Or\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œobjectœ,œTextœ,œstrœ],œdataTypeœ:œTextInputœ,œidœ:œTextInput-og8Orœ}",
         "target": "Prompt-Rse03",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153instructions\u0153,\u0153id\u0153:\u0153Prompt-Rse03\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinstructionsœ,œidœ:œPrompt-Rse03œ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "instructions",
             "id": "Prompt-Rse03",
-                        "inputTypes": [
+            "inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
-                            "Document",
-                            "BaseOutputParser",
-                            "Record",
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["object", "Text", "str"],
-                            "object",
-                            "Text",
-                            "str"
-                        ],
             "dataType": "TextInput",
             "id": "TextInput-og8Or"
           }
@@ -1049,28 +946,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-TextInput-og8Or{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153Text\u0153,\u0153str\u0153],\u0153dataType\u0153:\u0153TextInput\u0153,\u0153id\u0153:\u0153TextInput-og8Or\u0153}-Prompt-Rse03{\u0153fieldName\u0153:\u0153instructions\u0153,\u0153id\u0153:\u0153Prompt-Rse03\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-TextInput-og8Or{œbaseClassesœ:[œobjectœ,œTextœ,œstrœ],œdataTypeœ:œTextInputœ,œidœ:œTextInput-og8Orœ}-Prompt-Rse03{œfieldNameœ:œinstructionsœ,œidœ:œPrompt-Rse03œ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "Prompt-Rse03",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153Text\u0153,\u0153str\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-Rse03\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œobjectœ,œTextœ,œstrœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-Rse03œ}",
         "target": "OpenAIModel-gi29P",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153OpenAIModel-gi29P\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-gi29Pœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "OpenAIModel-gi29P",
-                        "inputTypes": [
+            "inputTypes": ["Text"],
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["object", "Text", "str"],
-                            "object",
-                            "Text",
-                            "str"
-                        ],
             "dataType": "Prompt",
             "id": "Prompt-Rse03"
           }
@@ -1079,7 +970,7 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-Prompt-Rse03{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153Text\u0153,\u0153str\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-Rse03\u0153}-OpenAIModel-gi29P{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153OpenAIModel-gi29P\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "id": "reactflow__edge-Prompt-Rse03{œbaseClassesœ:[œobjectœ,œTextœ,œstrœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-Rse03œ}-OpenAIModel-gi29P{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-gi29Pœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}",
         "selected": false
       }
     ],

src/backend/base/langflow/initial_setup/starter_projects/Langflow Document QA.json

@@ -45,9 +45,7 @@
                 "name": "template",
                 "display_name": "Template",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -112,23 +110,14 @@
             "is_input": null,
             "is_output": null,
             "is_composition": null,
-                        "base_classes": [
+            "base_classes": ["object", "str", "Text"],
-                            "object",
-                            "str",
-                            "Text"
-                        ],
             "name": "",
             "display_name": "Prompt",
             "documentation": "",
             "custom_fields": {
-                            "template": [
+              "template": ["Document", "Question"]
-                                "Document",
-                                "Question"
-                            ]
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "full_path": null,
             "field_formatters": {},
             "frozen": false,
@@ -231,18 +220,14 @@
               "_type": "CustomComponent"
             },
             "description": "A generic file loader.",
-                        "base_classes": [
+            "base_classes": ["Record"],
-                            "Record"
-                        ],
             "display_name": "Files",
             "documentation": "",
             "custom_fields": {
               "path": null,
               "silent_errors": null
             },
-                        "output_types": [
+            "output_types": ["Record"],
-                            "Record"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -338,10 +323,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                                "options": [
+                "options": ["Machine", "User"],
-                                    "Machine",
-                                    "User"
-                                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -349,9 +331,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "sender_name": {
                 "type": "str",
@@ -371,9 +351,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "session_id": {
                 "type": "str",
@@ -392,20 +370,13 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
-                        "base_classes": [
+            "base_classes": ["str", "Record", "Text", "object"],
-                            "str",
-                            "Record",
-                            "Text",
-                            "object"
-                        ],
             "display_name": "Chat Input",
             "documentation": "",
             "custom_fields": {
@@ -415,10 +386,7 @@
               "session_id": null,
               "return_record": null
             },
-                        "output_types": [
+            "output_types": ["Text", "Record"],
-                            "Text",
-                            "Record"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -477,9 +445,7 @@
                 "name": "input_value",
                 "display_name": "Message",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -515,10 +481,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                                "options": [
+                "options": ["Machine", "User"],
-                                    "Machine",
-                                    "User"
-                                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -526,9 +489,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "sender_name": {
                 "type": "str",
@@ -548,9 +509,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "session_id": {
                 "type": "str",
@@ -569,20 +528,13 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
-                        "base_classes": [
+            "base_classes": ["str", "Record", "Text", "object"],
-                            "str",
-                            "Record",
-                            "Text",
-                            "object"
-                        ],
             "display_name": "Chat Output",
             "documentation": "",
             "custom_fields": {
@@ -592,10 +544,7 @@
               "session_id": null,
               "return_record": null
             },
-                        "output_types": [
+            "output_types": ["Text", "Record"],
-                            "Text",
-                            "Record"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -640,9 +589,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "code": {
                 "type": "code",
@@ -651,7 +598,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                                "value": "from typing import Optional\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import NestedDict, Text\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    field_order = [\n        \"max_tokens\",\n        \"model_kwargs\",\n        \"model_name\",\n        \"openai_api_base\",\n        \"openai_api_key\",\n        \"temperature\",\n        \"input_value\",\n        \"system_message\",\n        \"stream\",\n    ]\n\n    def build_config(self):\n        return {\n            \"input_value\": {\"display_name\": \"Input\"},\n            \"max_tokens\": {\n                \"display_name\": \"Max Tokens\",\n                \"advanced\": True,\n                \"info\": \"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n            },\n            \"model_kwargs\": {\n                \"display_name\": \"Model Kwargs\",\n                \"advanced\": True,\n            },\n            \"model_name\": {\n                \"display_name\": \"Model Name\",\n                \"advanced\": False,\n                \"options\": MODEL_NAMES,\n            },\n            \"openai_api_base\": {\n                \"display_name\": \"OpenAI API Base\",\n                \"advanced\": True,\n                \"info\": (\n                    \"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\\n\\n\"\n                    \"You can change this to use other APIs like JinaChat, LocalAI and Prem.\"\n                ),\n            },\n            \"openai_api_key\": {\n                \"display_name\": \"OpenAI API Key\",\n                \"info\": \"The OpenAI API Key to use for the OpenAI model.\",\n                \"advanced\": False,\n                \"password\": True,\n            },\n            \"temperature\": {\n                \"display_name\": \"Temperature\",\n                \"advanced\": False,\n                \"value\": 0.1,\n            },\n            \"stream\": {\n                \"display_name\": \"Stream\",\n                \"info\": STREAM_INFO_TEXT,\n                \"advanced\": True,\n            },\n            \"system_message\": {\n                \"display_name\": \"System Message\",\n                \"info\": \"System message to pass to the model.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Text,\n        openai_api_key: str,\n        temperature: float,\n        model_name: str = \"gpt-4o\",\n        max_tokens: Optional[int] = 256,\n        model_kwargs: NestedDict = {},\n        openai_api_base: Optional[str] = None,\n        stream: bool = False,\n        system_message: Optional[str] = None,\n    ) -> Text:\n        if not openai_api_base:\n            openai_api_base = \"https://api.openai.com/v1\"\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature,\n        )\n\n        return self.get_chat_result(output, stream, input_value, system_message)\n",
+                "value": "from typing import Optional\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import NestedDict, Text\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    field_order = [\n        \"max_tokens\",\n        \"model_kwargs\",\n        \"model_name\",\n        \"openai_api_base\",\n        \"openai_api_key\",\n        \"temperature\",\n        \"input_value\",\n        \"system_message\",\n        \"stream\",\n    ]\n\n    def build_config(self):\n        return {\n            \"input_value\": {\"display_name\": \"Input\"},\n            \"max_tokens\": {\n                \"display_name\": \"Max Tokens\",\n                \"advanced\": True,\n                \"info\": \"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n            },\n            \"model_kwargs\": {\n                \"display_name\": \"Model Kwargs\",\n                \"advanced\": True,\n            },\n            \"model_name\": {\n                \"display_name\": \"Model Name\",\n                \"advanced\": False,\n                \"options\": MODEL_NAMES,\n            },\n            \"openai_api_base\": {\n                \"display_name\": \"OpenAI API Base\",\n                \"advanced\": True,\n                \"info\": (\n                    \"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\\n\\n\"\n                    \"You can change this to use other APIs like JinaChat, LocalAI and Prem.\"\n                ),\n            },\n            \"openai_api_key\": {\n                \"display_name\": \"OpenAI API Key\",\n                \"info\": \"The OpenAI API Key to use for the OpenAI model.\",\n                \"advanced\": False,\n                \"password\": True,\n            },\n            \"temperature\": {\n                \"display_name\": \"Temperature\",\n                \"advanced\": False,\n                \"value\": 0.1,\n            },\n            \"stream\": {\n                \"display_name\": \"Stream\",\n                \"info\": STREAM_INFO_TEXT,\n                \"advanced\": True,\n            },\n            \"system_message\": {\n                \"display_name\": \"System Message\",\n                \"info\": \"System message to pass to the model.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Text,\n        openai_api_key: str,\n        temperature: float = 0.1,\n        model_name: str = \"gpt-4o\",\n        max_tokens: Optional[int] = 256,\n        model_kwargs: NestedDict = {},\n        openai_api_base: Optional[str] = None,\n        stream: bool = False,\n        system_message: Optional[str] = None,\n    ) -> Text:\n        if not openai_api_base:\n            openai_api_base = \"https://api.openai.com/v1\"\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature,\n        )\n\n        return self.get_chat_result(output, stream, input_value, system_message)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -725,9 +672,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "openai_api_base": {
                 "type": "str",
@@ -746,9 +691,7 @@
                 "info": "The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\n\nYou can change this to use other APIs like JinaChat, LocalAI and Prem.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "openai_api_key": {
                 "type": "str",
@@ -767,9 +710,7 @@
                 "info": "The OpenAI API Key to use for the OpenAI model.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "value": "OPENAI_API_KEY"
               },
               "stream": {
@@ -808,13 +749,11 @@
                 "info": "System message to pass to the model.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "temperature": {
                 "type": "float",
-                                "required": true,
+                "required": false,
                 "placeholder": "",
                 "list": false,
                 "show": true,
@@ -841,11 +780,7 @@
             },
             "description": "Generates text using OpenAI LLMs.",
             "icon": "OpenAI",
-                        "base_classes": [
+            "base_classes": ["object", "str", "Text"],
-                            "object",
-                            "str",
-                            "Text"
-                        ],
             "display_name": "OpenAI",
             "documentation": "",
             "custom_fields": {
@@ -859,9 +794,7 @@
               "stream": null,
               "system_message": null
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [
@@ -892,28 +825,18 @@
     "edges": [
       {
         "source": "ChatInput-MsSJ9",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Record\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153ChatInput\u0153,\u0153id\u0153:\u0153ChatInput-MsSJ9\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œstrœ,œRecordœ,œTextœ,œobjectœ],œdataTypeœ:œChatInputœ,œidœ:œChatInput-MsSJ9œ}",
         "target": "Prompt-tHwPf",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153Question\u0153,\u0153id\u0153:\u0153Prompt-tHwPf\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œQuestionœ,œidœ:œPrompt-tHwPfœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "Question",
             "id": "Prompt-tHwPf",
-                        "inputTypes": [
+            "inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
-                            "Document",
-                            "BaseOutputParser",
-                            "Record",
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["str", "Record", "Text", "object"],
-                            "str",
-                            "Record",
-                            "Text",
-                            "object"
-                        ],
             "dataType": "ChatInput",
             "id": "ChatInput-MsSJ9"
           }
@@ -922,29 +845,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-ChatInput-MsSJ9{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Record\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153ChatInput\u0153,\u0153id\u0153:\u0153ChatInput-MsSJ9\u0153}-Prompt-tHwPf{\u0153fieldName\u0153:\u0153Question\u0153,\u0153id\u0153:\u0153Prompt-tHwPf\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-ChatInput-MsSJ9{œbaseClassesœ:[œstrœ,œRecordœ,œTextœ,œobjectœ],œdataTypeœ:œChatInputœ,œidœ:œChatInput-MsSJ9œ}-Prompt-tHwPf{œfieldNameœ:œQuestionœ,œidœ:œPrompt-tHwPfœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "File-6TEsD",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153Record\u0153],\u0153dataType\u0153:\u0153File\u0153,\u0153id\u0153:\u0153File-6TEsD\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œRecordœ],œdataTypeœ:œFileœ,œidœ:œFile-6TEsDœ}",
         "target": "Prompt-tHwPf",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153Document\u0153,\u0153id\u0153:\u0153Prompt-tHwPf\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œDocumentœ,œidœ:œPrompt-tHwPfœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "Document",
             "id": "Prompt-tHwPf",
-                        "inputTypes": [
+            "inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
-                            "Document",
-                            "BaseOutputParser",
-                            "Record",
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["Record"],
-                            "Record"
-                        ],
             "dataType": "File",
             "id": "File-6TEsD"
           }
@@ -953,28 +869,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-File-6TEsD{\u0153baseClasses\u0153:[\u0153Record\u0153],\u0153dataType\u0153:\u0153File\u0153,\u0153id\u0153:\u0153File-6TEsD\u0153}-Prompt-tHwPf{\u0153fieldName\u0153:\u0153Document\u0153,\u0153id\u0153:\u0153Prompt-tHwPf\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-File-6TEsD{œbaseClassesœ:[œRecordœ],œdataTypeœ:œFileœ,œidœ:œFile-6TEsDœ}-Prompt-tHwPf{œfieldNameœ:œDocumentœ,œidœ:œPrompt-tHwPfœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "Prompt-tHwPf",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-tHwPf\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-tHwPfœ}",
         "target": "OpenAIModel-Bt067",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153OpenAIModel-Bt067\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-Bt067œ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "OpenAIModel-Bt067",
-                        "inputTypes": [
+            "inputTypes": ["Text"],
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["object", "str", "Text"],
-                            "object",
-                            "str",
-                            "Text"
-                        ],
             "dataType": "Prompt",
             "id": "Prompt-tHwPf"
           }
@@ -983,28 +893,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-Prompt-tHwPf{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-tHwPf\u0153}-OpenAIModel-Bt067{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153OpenAIModel-Bt067\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-Prompt-tHwPf{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-tHwPfœ}-OpenAIModel-Bt067{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-Bt067œ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "OpenAIModel-Bt067",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153OpenAIModel\u0153,\u0153id\u0153:\u0153OpenAIModel-Bt067\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-Bt067œ}",
         "target": "ChatOutput-F5Awj",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153ChatOutput-F5Awj\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-F5Awjœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "ChatOutput-F5Awj",
-                        "inputTypes": [
+            "inputTypes": ["Text"],
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["object", "str", "Text"],
-                            "object",
-                            "str",
-                            "Text"
-                        ],
             "dataType": "OpenAIModel",
             "id": "OpenAIModel-Bt067"
           }
@@ -1013,7 +917,7 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-OpenAIModel-Bt067{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153OpenAIModel\u0153,\u0153id\u0153:\u0153OpenAIModel-Bt067\u0153}-ChatOutput-F5Awj{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153ChatOutput-F5Awj\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-OpenAIModel-Bt067{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-Bt067œ}-ChatOutput-F5Awj{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-F5Awjœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}"
       }
     ],
     "viewport": {

src/backend/base/langflow/initial_setup/starter_projects/Langflow Memory Conversation.json

@@ -1,6 +1,6 @@
 {
   "id": "08d5cccf-d098-4367-b14b-1078429c9ed9",
-    "icon": "\ud83e\udd16",
+  "icon": "🤖",
   "icon_bg_color": "#FFD700",
   "data": {
     "nodes": [
@@ -83,10 +83,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                                "options": [
+                "options": ["Machine", "User"],
-                                    "Machine",
-                                    "User"
-                                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -94,9 +91,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "sender_name": {
                 "type": "str",
@@ -116,9 +111,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "session_id": {
                 "type": "str",
@@ -137,21 +130,14 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "value": "MySessionID"
               },
               "_type": "CustomComponent"
             },
             "description": "Get chat inputs from the Playground.",
             "icon": "ChatInput",
-                        "base_classes": [
+            "base_classes": ["Text", "object", "Record", "str"],
-                            "Text",
-                            "object",
-                            "Record",
-                            "str"
-                        ],
             "display_name": "Chat Input",
             "documentation": "",
             "custom_fields": {
@@ -161,10 +147,7 @@
               "session_id": null,
               "return_record": null
             },
-                        "output_types": [
+            "output_types": ["Text", "Record"],
-                            "Text",
-                            "Record"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -223,9 +206,7 @@
                 "name": "input_value",
                 "display_name": "Message",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -261,10 +242,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                                "options": [
+                "options": ["Machine", "User"],
-                                    "Machine",
-                                    "User"
-                                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -272,9 +250,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "sender_name": {
                 "type": "str",
@@ -294,9 +270,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "session_id": {
                 "type": "str",
@@ -315,21 +289,14 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "value": "MySessionID"
               },
               "_type": "CustomComponent"
             },
             "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
-                        "base_classes": [
+            "base_classes": ["Text", "object", "Record", "str"],
-                            "Text",
-                            "object",
-                            "Record",
-                            "str"
-                        ],
             "display_name": "Chat Output",
             "documentation": "",
             "custom_fields": {
@@ -339,10 +306,7 @@
               "session_id": null,
               "return_record": null
             },
-                        "output_types": [
+            "output_types": ["Text", "Record"],
-                            "Text",
-                            "Record"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -418,10 +382,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                                "options": [
+                "options": ["Ascending", "Descending"],
-                                    "Ascending",
-                                    "Descending"
-                                ],
                 "name": "order",
                 "display_name": "Order",
                 "advanced": true,
@@ -429,9 +390,7 @@
                 "info": "Order of the messages.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "record_template": {
                 "type": "str",
@@ -451,9 +410,7 @@
                 "info": "Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "sender": {
                 "type": "str",
@@ -466,11 +423,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                                "options": [
+                "options": ["Machine", "User", "Machine and User"],
-                                    "Machine",
-                                    "User",
-                                    "Machine and User"
-                                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": false,
@@ -478,9 +431,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "sender_name": {
                 "type": "str",
@@ -499,9 +450,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "session_id": {
                 "type": "str",
@@ -516,9 +465,7 @@
                 "name": "session_id",
                 "display_name": "Session ID",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "Session ID of the chat history.",
                 "load_from_db": false,
@@ -529,11 +476,7 @@
             },
             "description": "Retrieves stored chat messages given a specific Session ID.",
             "icon": "history",
-                        "base_classes": [
+            "base_classes": ["str", "Text", "object"],
-                            "str",
-                            "Text",
-                            "object"
-                        ],
             "display_name": "Chat Memory",
             "documentation": "",
             "custom_fields": {
@@ -544,9 +487,7 @@
               "order": null,
               "record_template": null
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -608,9 +549,7 @@
                 "name": "template",
                 "display_name": "Template",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -675,23 +614,14 @@
             "is_input": null,
             "is_output": null,
             "is_composition": null,
-                        "base_classes": [
+            "base_classes": ["Text", "str", "object"],
-                            "Text",
-                            "str",
-                            "object"
-                        ],
             "name": "",
             "display_name": "Prompt",
             "documentation": "",
             "custom_fields": {
-                            "template": [
+              "template": ["context", "user_message"]
-                                "context",
-                                "user_message"
-                            ]
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "full_path": null,
             "field_formatters": {},
             "frozen": false,
@@ -740,9 +670,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "code": {
                 "type": "code",
@@ -751,7 +679,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                                "value": "from typing import Optional\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import NestedDict, Text\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    field_order = [\n        \"max_tokens\",\n        \"model_kwargs\",\n        \"model_name\",\n        \"openai_api_base\",\n        \"openai_api_key\",\n        \"temperature\",\n        \"input_value\",\n        \"system_message\",\n        \"stream\",\n    ]\n\n    def build_config(self):\n        return {\n            \"input_value\": {\"display_name\": \"Input\"},\n            \"max_tokens\": {\n                \"display_name\": \"Max Tokens\",\n                \"advanced\": True,\n                \"info\": \"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n            },\n            \"model_kwargs\": {\n                \"display_name\": \"Model Kwargs\",\n                \"advanced\": True,\n            },\n            \"model_name\": {\n                \"display_name\": \"Model Name\",\n                \"advanced\": False,\n                \"options\": MODEL_NAMES,\n            },\n            \"openai_api_base\": {\n                \"display_name\": \"OpenAI API Base\",\n                \"advanced\": True,\n                \"info\": (\n                    \"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\\n\\n\"\n                    \"You can change this to use other APIs like JinaChat, LocalAI and Prem.\"\n                ),\n            },\n            \"openai_api_key\": {\n                \"display_name\": \"OpenAI API Key\",\n                \"info\": \"The OpenAI API Key to use for the OpenAI model.\",\n                \"advanced\": False,\n                \"password\": True,\n            },\n            \"temperature\": {\n                \"display_name\": \"Temperature\",\n                \"advanced\": False,\n                \"value\": 0.1,\n            },\n            \"stream\": {\n                \"display_name\": \"Stream\",\n                \"info\": STREAM_INFO_TEXT,\n                \"advanced\": True,\n            },\n            \"system_message\": {\n                \"display_name\": \"System Message\",\n                \"info\": \"System message to pass to the model.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Text,\n        openai_api_key: str,\n        temperature: float,\n        model_name: str = \"gpt-4o\",\n        max_tokens: Optional[int] = 256,\n        model_kwargs: NestedDict = {},\n        openai_api_base: Optional[str] = None,\n        stream: bool = False,\n        system_message: Optional[str] = None,\n    ) -> Text:\n        if not openai_api_base:\n            openai_api_base = \"https://api.openai.com/v1\"\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature,\n        )\n\n        return self.get_chat_result(output, stream, input_value, system_message)\n",
+                "value": "from typing import Optional\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import NestedDict, Text\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    field_order = [\n        \"max_tokens\",\n        \"model_kwargs\",\n        \"model_name\",\n        \"openai_api_base\",\n        \"openai_api_key\",\n        \"temperature\",\n        \"input_value\",\n        \"system_message\",\n        \"stream\",\n    ]\n\n    def build_config(self):\n        return {\n            \"input_value\": {\"display_name\": \"Input\"},\n            \"max_tokens\": {\n                \"display_name\": \"Max Tokens\",\n                \"advanced\": True,\n                \"info\": \"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n            },\n            \"model_kwargs\": {\n                \"display_name\": \"Model Kwargs\",\n                \"advanced\": True,\n            },\n            \"model_name\": {\n                \"display_name\": \"Model Name\",\n                \"advanced\": False,\n                \"options\": MODEL_NAMES,\n            },\n            \"openai_api_base\": {\n                \"display_name\": \"OpenAI API Base\",\n                \"advanced\": True,\n                \"info\": (\n                    \"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\\n\\n\"\n                    \"You can change this to use other APIs like JinaChat, LocalAI and Prem.\"\n                ),\n            },\n            \"openai_api_key\": {\n                \"display_name\": \"OpenAI API Key\",\n                \"info\": \"The OpenAI API Key to use for the OpenAI model.\",\n                \"advanced\": False,\n                \"password\": True,\n            },\n            \"temperature\": {\n                \"display_name\": \"Temperature\",\n                \"advanced\": False,\n                \"value\": 0.1,\n            },\n            \"stream\": {\n                \"display_name\": \"Stream\",\n                \"info\": STREAM_INFO_TEXT,\n                \"advanced\": True,\n            },\n            \"system_message\": {\n                \"display_name\": \"System Message\",\n                \"info\": \"System message to pass to the model.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Text,\n        openai_api_key: str,\n        temperature: float = 0.1,\n        model_name: str = \"gpt-4o\",\n        max_tokens: Optional[int] = 256,\n        model_kwargs: NestedDict = {},\n        openai_api_base: Optional[str] = None,\n        stream: bool = False,\n        system_message: Optional[str] = None,\n    ) -> Text:\n        if not openai_api_base:\n            openai_api_base = \"https://api.openai.com/v1\"\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature,\n        )\n\n        return self.get_chat_result(output, stream, input_value, system_message)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -825,9 +753,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "openai_api_base": {
                 "type": "str",
@@ -846,9 +772,7 @@
                 "info": "The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\n\nYou can change this to use other APIs like JinaChat, LocalAI and Prem.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "openai_api_key": {
                 "type": "str",
@@ -867,9 +791,7 @@
                 "info": "The OpenAI API Key to use for the OpenAI model.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "value": "OPENAI_API_KEY"
               },
               "stream": {
@@ -908,13 +830,11 @@
                 "info": "System message to pass to the model.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "temperature": {
                 "type": "float",
-                                "required": true,
+                "required": false,
                 "placeholder": "",
                 "list": false,
                 "show": true,
@@ -941,11 +861,7 @@
             },
             "description": "Generates text using OpenAI LLMs.",
             "icon": "OpenAI",
-                        "base_classes": [
+            "base_classes": ["str", "object", "Text"],
-                            "str",
-                            "object",
-                            "Text"
-                        ],
             "display_name": "OpenAI",
             "documentation": "",
             "custom_fields": {
@@ -959,9 +875,7 @@
               "stream": null,
               "system_message": null
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [
@@ -1013,10 +927,7 @@
                 "name": "input_value",
                 "display_name": "Value",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Record", "Text"],
-                                    "Record",
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "Text or Record to be passed as output.",
                 "load_from_db": false,
@@ -1058,28 +969,20 @@
                 "info": "Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Display a text output in the Playground.",
             "icon": "type",
-                        "base_classes": [
+            "base_classes": ["str", "object", "Text"],
-                            "str",
-                            "object",
-                            "Text"
-                        ],
             "display_name": "Inspect Memory",
             "documentation": "",
             "custom_fields": {
               "input_value": null,
               "record_template": null
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -1100,27 +1003,18 @@
     "edges": [
       {
         "source": "MemoryComponent-cdA1J",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153MemoryComponent\u0153,\u0153id\u0153:\u0153MemoryComponent-cdA1J\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œstrœ,œTextœ,œobjectœ],œdataTypeœ:œMemoryComponentœ,œidœ:œMemoryComponent-cdA1Jœ}",
         "target": "Prompt-ODkUx",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153context\u0153,\u0153id\u0153:\u0153Prompt-ODkUx\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œcontextœ,œidœ:œPrompt-ODkUxœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "context",
             "type": "str",
             "id": "Prompt-ODkUx",
-                        "inputTypes": [
+            "inputTypes": ["Document", "BaseOutputParser", "Record", "Text"]
-                            "Document",
-                            "BaseOutputParser",
-                            "Record",
-                            "Text"
-                        ]
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["str", "Text", "object"],
-                            "str",
-                            "Text",
-                            "object"
-                        ],
             "dataType": "MemoryComponent",
             "id": "MemoryComponent-cdA1J"
           }
@@ -1129,33 +1023,23 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-MemoryComponent-cdA1J{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153MemoryComponent\u0153,\u0153id\u0153:\u0153MemoryComponent-cdA1J\u0153}-Prompt-ODkUx{\u0153fieldName\u0153:\u0153context\u0153,\u0153id\u0153:\u0153Prompt-ODkUx\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "id": "reactflow__edge-MemoryComponent-cdA1J{œbaseClassesœ:[œstrœ,œTextœ,œobjectœ],œdataTypeœ:œMemoryComponentœ,œidœ:œMemoryComponent-cdA1Jœ}-Prompt-ODkUx{œfieldNameœ:œcontextœ,œidœ:œPrompt-ODkUxœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "selected": false
       },
       {
         "source": "ChatInput-t7F8v",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153Text\u0153,\u0153object\u0153,\u0153Record\u0153,\u0153str\u0153],\u0153dataType\u0153:\u0153ChatInput\u0153,\u0153id\u0153:\u0153ChatInput-t7F8v\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œTextœ,œobjectœ,œRecordœ,œstrœ],œdataTypeœ:œChatInputœ,œidœ:œChatInput-t7F8vœ}",
         "target": "Prompt-ODkUx",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153user_message\u0153,\u0153id\u0153:\u0153Prompt-ODkUx\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œuser_messageœ,œidœ:œPrompt-ODkUxœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "user_message",
             "type": "str",
             "id": "Prompt-ODkUx",
-                        "inputTypes": [
+            "inputTypes": ["Document", "BaseOutputParser", "Record", "Text"]
-                            "Document",
-                            "BaseOutputParser",
-                            "Record",
-                            "Text"
-                        ]
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["Text", "object", "Record", "str"],
-                            "Text",
-                            "object",
-                            "Record",
-                            "str"
-                        ],
             "dataType": "ChatInput",
             "id": "ChatInput-t7F8v"
           }
@@ -1164,29 +1048,23 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-ChatInput-t7F8v{\u0153baseClasses\u0153:[\u0153Text\u0153,\u0153object\u0153,\u0153Record\u0153,\u0153str\u0153],\u0153dataType\u0153:\u0153ChatInput\u0153,\u0153id\u0153:\u0153ChatInput-t7F8v\u0153}-Prompt-ODkUx{\u0153fieldName\u0153:\u0153user_message\u0153,\u0153id\u0153:\u0153Prompt-ODkUx\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "id": "reactflow__edge-ChatInput-t7F8v{œbaseClassesœ:[œTextœ,œobjectœ,œRecordœ,œstrœ],œdataTypeœ:œChatInputœ,œidœ:œChatInput-t7F8vœ}-Prompt-ODkUx{œfieldNameœ:œuser_messageœ,œidœ:œPrompt-ODkUxœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "selected": false
       },
       {
         "source": "Prompt-ODkUx",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153Text\u0153,\u0153str\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-ODkUx\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œTextœ,œstrœ,œobjectœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-ODkUxœ}",
         "target": "OpenAIModel-9RykF",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153OpenAIModel-9RykF\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-9RykFœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "OpenAIModel-9RykF",
-                        "inputTypes": [
+            "inputTypes": ["Text"],
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["Text", "str", "object"],
-                            "Text",
-                            "str",
-                            "object"
-                        ],
             "dataType": "Prompt",
             "id": "Prompt-ODkUx"
           }
@@ -1195,28 +1073,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-Prompt-ODkUx{\u0153baseClasses\u0153:[\u0153Text\u0153,\u0153str\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-ODkUx\u0153}-OpenAIModel-9RykF{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153OpenAIModel-9RykF\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-Prompt-ODkUx{œbaseClassesœ:[œTextœ,œstrœ,œobjectœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-ODkUxœ}-OpenAIModel-9RykF{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-9RykFœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "OpenAIModel-9RykF",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153object\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153OpenAIModel\u0153,\u0153id\u0153:\u0153OpenAIModel-9RykF\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œstrœ,œobjectœ,œTextœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-9RykFœ}",
         "target": "ChatOutput-P1jEe",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153ChatOutput-P1jEe\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-P1jEeœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "ChatOutput-P1jEe",
-                        "inputTypes": [
+            "inputTypes": ["Text"],
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["str", "object", "Text"],
-                            "str",
-                            "object",
-                            "Text"
-                        ],
             "dataType": "OpenAIModel",
             "id": "OpenAIModel-9RykF"
           }
@@ -1225,29 +1097,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-OpenAIModel-9RykF{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153object\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153OpenAIModel\u0153,\u0153id\u0153:\u0153OpenAIModel-9RykF\u0153}-ChatOutput-P1jEe{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153ChatOutput-P1jEe\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-OpenAIModel-9RykF{œbaseClassesœ:[œstrœ,œobjectœ,œTextœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-9RykFœ}-ChatOutput-P1jEe{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-P1jEeœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "MemoryComponent-cdA1J",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153MemoryComponent\u0153,\u0153id\u0153:\u0153MemoryComponent-cdA1J\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œstrœ,œTextœ,œobjectœ],œdataTypeœ:œMemoryComponentœ,œidœ:œMemoryComponent-cdA1Jœ}",
         "target": "TextOutput-vrs6T",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153TextOutput-vrs6T\u0153,\u0153inputTypes\u0153:[\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œTextOutput-vrs6Tœ,œinputTypesœ:[œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "TextOutput-vrs6T",
-                        "inputTypes": [
+            "inputTypes": ["Record", "Text"],
-                            "Record",
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["str", "Text", "object"],
-                            "str",
-                            "Text",
-                            "object"
-                        ],
             "dataType": "MemoryComponent",
             "id": "MemoryComponent-cdA1J"
           }
@@ -1256,7 +1121,7 @@
           "stroke": "#555"
         },
         "className": "stroke-foreground stroke-connection",
-                "id": "reactflow__edge-MemoryComponent-cdA1J{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153MemoryComponent\u0153,\u0153id\u0153:\u0153MemoryComponent-cdA1J\u0153}-TextOutput-vrs6T{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153TextOutput-vrs6T\u0153,\u0153inputTypes\u0153:[\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-MemoryComponent-cdA1J{œbaseClassesœ:[œstrœ,œTextœ,œobjectœ],œdataTypeœ:œMemoryComponentœ,œidœ:œMemoryComponent-cdA1Jœ}-TextOutput-vrs6T{œfieldNameœ:œinput_valueœ,œidœ:œTextOutput-vrs6Tœ,œinputTypesœ:[œRecordœ,œTextœ],œtypeœ:œstrœ}"
       }
     ],
     "viewport": {

src/backend/base/langflow/initial_setup/starter_projects/Langflow Prompt Chaining.json

@@ -45,9 +45,7 @@
                 "name": "template",
                 "display_name": "Template",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -86,22 +84,14 @@
             "is_input": null,
             "is_output": null,
             "is_composition": null,
-                        "base_classes": [
+            "base_classes": ["object", "str", "Text"],
-                            "object",
-                            "str",
-                            "Text"
-                        ],
             "name": "",
             "display_name": "Prompt",
             "documentation": "",
             "custom_fields": {
-                            "template": [
+              "template": ["document"]
-                                "document"
-                            ]
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "full_path": null,
             "field_formatters": {},
             "frozen": false,
@@ -165,9 +155,7 @@
                 "name": "template",
                 "display_name": "Template",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -206,22 +194,14 @@
             "is_input": null,
             "is_output": null,
             "is_composition": null,
-                        "base_classes": [
+            "base_classes": ["object", "str", "Text"],
-                            "object",
-                            "str",
-                            "Text"
-                        ],
             "name": "",
             "display_name": "Prompt",
             "documentation": "",
             "custom_fields": {
-                            "template": [
+              "template": ["summary"]
-                                "summary"
-                            ]
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "full_path": null,
             "field_formatters": {},
             "frozen": false,
@@ -280,9 +260,7 @@
                 "name": "input_value",
                 "display_name": "Message",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -306,9 +284,7 @@
                 "info": "In case of Message being a Record, this template will be used to convert it to text.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "return_record": {
                 "type": "bool",
@@ -340,10 +316,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                                "options": [
+                "options": ["Machine", "User"],
-                                    "Machine",
-                                    "User"
-                                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -351,9 +324,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "sender_name": {
                 "type": "str",
@@ -373,9 +344,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "session_id": {
                 "type": "str",
@@ -394,20 +363,13 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
-                        "base_classes": [
+            "base_classes": ["object", "Record", "Text", "str"],
-                            "object",
-                            "Record",
-                            "Text",
-                            "str"
-                        ],
             "display_name": "Chat Output",
             "documentation": "",
             "custom_fields": {
@@ -418,10 +380,7 @@
               "return_record": null,
               "record_template": null
             },
-                        "output_types": [
+            "output_types": ["Text", "Record"],
-                            "Text",
-                            "Record"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -476,9 +435,7 @@
                 "name": "input_value",
                 "display_name": "Message",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "",
                 "load_from_db": false,
@@ -502,9 +459,7 @@
                 "info": "In case of Message being a Record, this template will be used to convert it to text.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "return_record": {
                 "type": "bool",
@@ -536,10 +491,7 @@
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
-                                "options": [
+                "options": ["Machine", "User"],
-                                    "Machine",
-                                    "User"
-                                ],
                 "name": "sender",
                 "display_name": "Sender Type",
                 "advanced": true,
@@ -547,9 +499,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "sender_name": {
                 "type": "str",
@@ -569,9 +519,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "session_id": {
                 "type": "str",
@@ -590,20 +538,13 @@
                 "info": "If provided, the message will be stored in the memory.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Display a chat message in the Playground.",
             "icon": "ChatOutput",
-                        "base_classes": [
+            "base_classes": ["object", "Record", "Text", "str"],
-                            "object",
-                            "Record",
-                            "Text",
-                            "str"
-                        ],
             "display_name": "Chat Output",
             "documentation": "",
             "custom_fields": {
@@ -614,10 +555,7 @@
               "return_record": null,
               "record_template": null
             },
-                        "output_types": [
+            "output_types": ["Text", "Record"],
-                            "Text",
-                            "Record"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -672,10 +610,7 @@
                 "name": "input_value",
                 "display_name": "Value",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Record", "Text"],
-                                    "Record",
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "Text or Record to be passed as input.",
                 "load_from_db": false,
@@ -699,28 +634,20 @@
                 "info": "Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Get text inputs from the Playground.",
             "icon": "type",
-                        "base_classes": [
+            "base_classes": ["str", "Text", "object"],
-                            "str",
-                            "Text",
-                            "object"
-                        ],
             "display_name": "Text Input",
             "documentation": "",
             "custom_fields": {
               "input_value": null,
               "record_template": null
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -762,10 +689,7 @@
                 "name": "input_value",
                 "display_name": "Value",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Record", "Text"],
-                                    "Record",
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "Text or Record to be passed as output.",
                 "load_from_db": false,
@@ -807,28 +731,20 @@
                 "info": "Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Display a text output in the Playground.",
             "icon": "type",
-                        "base_classes": [
+            "base_classes": ["str", "Text", "object"],
-                            "str",
-                            "Text",
-                            "object"
-                        ],
             "display_name": "First Prompt",
             "documentation": "",
             "custom_fields": {
               "input_value": null,
               "record_template": null
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -873,9 +789,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "code": {
                 "type": "code",
@@ -884,7 +798,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                                "value": "from typing import Optional\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import NestedDict, Text\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    field_order = [\n        \"max_tokens\",\n        \"model_kwargs\",\n        \"model_name\",\n        \"openai_api_base\",\n        \"openai_api_key\",\n        \"temperature\",\n        \"input_value\",\n        \"system_message\",\n        \"stream\",\n    ]\n\n    def build_config(self):\n        return {\n            \"input_value\": {\"display_name\": \"Input\"},\n            \"max_tokens\": {\n                \"display_name\": \"Max Tokens\",\n                \"advanced\": True,\n                \"info\": \"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n            },\n            \"model_kwargs\": {\n                \"display_name\": \"Model Kwargs\",\n                \"advanced\": True,\n            },\n            \"model_name\": {\n                \"display_name\": \"Model Name\",\n                \"advanced\": False,\n                \"options\": MODEL_NAMES,\n            },\n            \"openai_api_base\": {\n                \"display_name\": \"OpenAI API Base\",\n                \"advanced\": True,\n                \"info\": (\n                    \"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\\n\\n\"\n                    \"You can change this to use other APIs like JinaChat, LocalAI and Prem.\"\n                ),\n            },\n            \"openai_api_key\": {\n                \"display_name\": \"OpenAI API Key\",\n                \"info\": \"The OpenAI API Key to use for the OpenAI model.\",\n                \"advanced\": False,\n                \"password\": True,\n            },\n            \"temperature\": {\n                \"display_name\": \"Temperature\",\n                \"advanced\": False,\n                \"value\": 0.1,\n            },\n            \"stream\": {\n                \"display_name\": \"Stream\",\n                \"info\": STREAM_INFO_TEXT,\n                \"advanced\": True,\n            },\n            \"system_message\": {\n                \"display_name\": \"System Message\",\n                \"info\": \"System message to pass to the model.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Text,\n        openai_api_key: str,\n        temperature: float,\n        model_name: str = \"gpt-4o\",\n        max_tokens: Optional[int] = 256,\n        model_kwargs: NestedDict = {},\n        openai_api_base: Optional[str] = None,\n        stream: bool = False,\n        system_message: Optional[str] = None,\n    ) -> Text:\n        if not openai_api_base:\n            openai_api_base = \"https://api.openai.com/v1\"\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature,\n        )\n\n        return self.get_chat_result(output, stream, input_value, system_message)\n",
+                "value": "from typing import Optional\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import NestedDict, Text\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    field_order = [\n        \"max_tokens\",\n        \"model_kwargs\",\n        \"model_name\",\n        \"openai_api_base\",\n        \"openai_api_key\",\n        \"temperature\",\n        \"input_value\",\n        \"system_message\",\n        \"stream\",\n    ]\n\n    def build_config(self):\n        return {\n            \"input_value\": {\"display_name\": \"Input\"},\n            \"max_tokens\": {\n                \"display_name\": \"Max Tokens\",\n                \"advanced\": True,\n                \"info\": \"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n            },\n            \"model_kwargs\": {\n                \"display_name\": \"Model Kwargs\",\n                \"advanced\": True,\n            },\n            \"model_name\": {\n                \"display_name\": \"Model Name\",\n                \"advanced\": False,\n                \"options\": MODEL_NAMES,\n            },\n            \"openai_api_base\": {\n                \"display_name\": \"OpenAI API Base\",\n                \"advanced\": True,\n                \"info\": (\n                    \"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\\n\\n\"\n                    \"You can change this to use other APIs like JinaChat, LocalAI and Prem.\"\n                ),\n            },\n            \"openai_api_key\": {\n                \"display_name\": \"OpenAI API Key\",\n                \"info\": \"The OpenAI API Key to use for the OpenAI model.\",\n                \"advanced\": False,\n                \"password\": True,\n            },\n            \"temperature\": {\n                \"display_name\": \"Temperature\",\n                \"advanced\": False,\n                \"value\": 0.1,\n            },\n            \"stream\": {\n                \"display_name\": \"Stream\",\n                \"info\": STREAM_INFO_TEXT,\n                \"advanced\": True,\n            },\n            \"system_message\": {\n                \"display_name\": \"System Message\",\n                \"info\": \"System message to pass to the model.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Text,\n        openai_api_key: str,\n        temperature: float = 0.1,\n        model_name: str = \"gpt-4o\",\n        max_tokens: Optional[int] = 256,\n        model_kwargs: NestedDict = {},\n        openai_api_base: Optional[str] = None,\n        stream: bool = False,\n        system_message: Optional[str] = None,\n    ) -> Text:\n        if not openai_api_base:\n            openai_api_base = \"https://api.openai.com/v1\"\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature,\n        )\n\n        return self.get_chat_result(output, stream, input_value, system_message)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -958,9 +872,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "openai_api_base": {
                 "type": "str",
@@ -979,9 +891,7 @@
                 "info": "The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\n\nYou can change this to use other APIs like JinaChat, LocalAI and Prem.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "openai_api_key": {
                 "type": "str",
@@ -1000,9 +910,7 @@
                 "info": "The OpenAI API Key to use for the OpenAI model.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "value": "OPENAI_API_KEY"
               },
               "stream": {
@@ -1041,13 +949,11 @@
                 "info": "System message to pass to the model.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "temperature": {
                 "type": "float",
-                                "required": true,
+                "required": false,
                 "placeholder": "",
                 "list": false,
                 "show": true,
@@ -1074,11 +980,7 @@
             },
             "description": "Generates text using OpenAI LLMs.",
             "icon": "OpenAI",
-                        "base_classes": [
+            "base_classes": ["str", "Text", "object"],
-                            "str",
-                            "Text",
-                            "object"
-                        ],
             "display_name": "OpenAI",
             "documentation": "",
             "custom_fields": {
@@ -1092,9 +994,7 @@
               "stream": null,
               "system_message": null
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [
@@ -1146,10 +1046,7 @@
                 "name": "input_value",
                 "display_name": "Value",
                 "advanced": false,
-                                "input_types": [
+                "input_types": ["Record", "Text"],
-                                    "Record",
-                                    "Text"
-                                ],
                 "dynamic": false,
                 "info": "Text or Record to be passed as output.",
                 "load_from_db": false,
@@ -1191,28 +1088,20 @@
                 "info": "Template to convert Record to Text. If left empty, it will be dynamically set to the Record's text key.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "_type": "CustomComponent"
             },
             "description": "Display a text output in the Playground.",
             "icon": "type",
-                        "base_classes": [
+            "base_classes": ["str", "Text", "object"],
-                            "str",
-                            "Text",
-                            "object"
-                        ],
             "display_name": "Second Prompt",
             "documentation": "",
             "custom_fields": {
               "input_value": null,
               "record_template": null
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [],
@@ -1257,9 +1146,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "code": {
                 "type": "code",
@@ -1268,7 +1155,7 @@
                 "list": false,
                 "show": true,
                 "multiline": true,
-                                "value": "from typing import Optional\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import NestedDict, Text\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    field_order = [\n        \"max_tokens\",\n        \"model_kwargs\",\n        \"model_name\",\n        \"openai_api_base\",\n        \"openai_api_key\",\n        \"temperature\",\n        \"input_value\",\n        \"system_message\",\n        \"stream\",\n    ]\n\n    def build_config(self):\n        return {\n            \"input_value\": {\"display_name\": \"Input\"},\n            \"max_tokens\": {\n                \"display_name\": \"Max Tokens\",\n                \"advanced\": True,\n                \"info\": \"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n            },\n            \"model_kwargs\": {\n                \"display_name\": \"Model Kwargs\",\n                \"advanced\": True,\n            },\n            \"model_name\": {\n                \"display_name\": \"Model Name\",\n                \"advanced\": False,\n                \"options\": MODEL_NAMES,\n            },\n            \"openai_api_base\": {\n                \"display_name\": \"OpenAI API Base\",\n                \"advanced\": True,\n                \"info\": (\n                    \"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\\n\\n\"\n                    \"You can change this to use other APIs like JinaChat, LocalAI and Prem.\"\n                ),\n            },\n            \"openai_api_key\": {\n                \"display_name\": \"OpenAI API Key\",\n                \"info\": \"The OpenAI API Key to use for the OpenAI model.\",\n                \"advanced\": False,\n                \"password\": True,\n            },\n            \"temperature\": {\n                \"display_name\": \"Temperature\",\n                \"advanced\": False,\n                \"value\": 0.1,\n            },\n            \"stream\": {\n                \"display_name\": \"Stream\",\n                \"info\": STREAM_INFO_TEXT,\n                \"advanced\": True,\n            },\n            \"system_message\": {\n                \"display_name\": \"System Message\",\n                \"info\": \"System message to pass to the model.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Text,\n        openai_api_key: str,\n        temperature: float,\n        model_name: str = \"gpt-4o\",\n        max_tokens: Optional[int] = 256,\n        model_kwargs: NestedDict = {},\n        openai_api_base: Optional[str] = None,\n        stream: bool = False,\n        system_message: Optional[str] = None,\n    ) -> Text:\n        if not openai_api_base:\n            openai_api_base = \"https://api.openai.com/v1\"\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature,\n        )\n\n        return self.get_chat_result(output, stream, input_value, system_message)\n",
+                "value": "from typing import Optional\n\nfrom langchain_openai import ChatOpenAI\nfrom pydantic.v1 import SecretStr\n\nfrom langflow.base.constants import STREAM_INFO_TEXT\nfrom langflow.base.models.model import LCModelComponent\nfrom langflow.base.models.openai_constants import MODEL_NAMES\nfrom langflow.field_typing import NestedDict, Text\n\n\nclass OpenAIModelComponent(LCModelComponent):\n    display_name = \"OpenAI\"\n    description = \"Generates text using OpenAI LLMs.\"\n    icon = \"OpenAI\"\n\n    field_order = [\n        \"max_tokens\",\n        \"model_kwargs\",\n        \"model_name\",\n        \"openai_api_base\",\n        \"openai_api_key\",\n        \"temperature\",\n        \"input_value\",\n        \"system_message\",\n        \"stream\",\n    ]\n\n    def build_config(self):\n        return {\n            \"input_value\": {\"display_name\": \"Input\"},\n            \"max_tokens\": {\n                \"display_name\": \"Max Tokens\",\n                \"advanced\": True,\n                \"info\": \"The maximum number of tokens to generate. Set to 0 for unlimited tokens.\",\n            },\n            \"model_kwargs\": {\n                \"display_name\": \"Model Kwargs\",\n                \"advanced\": True,\n            },\n            \"model_name\": {\n                \"display_name\": \"Model Name\",\n                \"advanced\": False,\n                \"options\": MODEL_NAMES,\n            },\n            \"openai_api_base\": {\n                \"display_name\": \"OpenAI API Base\",\n                \"advanced\": True,\n                \"info\": (\n                    \"The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\\n\\n\"\n                    \"You can change this to use other APIs like JinaChat, LocalAI and Prem.\"\n                ),\n            },\n            \"openai_api_key\": {\n                \"display_name\": \"OpenAI API Key\",\n                \"info\": \"The OpenAI API Key to use for the OpenAI model.\",\n                \"advanced\": False,\n                \"password\": True,\n            },\n            \"temperature\": {\n                \"display_name\": \"Temperature\",\n                \"advanced\": False,\n                \"value\": 0.1,\n            },\n            \"stream\": {\n                \"display_name\": \"Stream\",\n                \"info\": STREAM_INFO_TEXT,\n                \"advanced\": True,\n            },\n            \"system_message\": {\n                \"display_name\": \"System Message\",\n                \"info\": \"System message to pass to the model.\",\n                \"advanced\": True,\n            },\n        }\n\n    def build(\n        self,\n        input_value: Text,\n        openai_api_key: str,\n        temperature: float = 0.1,\n        model_name: str = \"gpt-4o\",\n        max_tokens: Optional[int] = 256,\n        model_kwargs: NestedDict = {},\n        openai_api_base: Optional[str] = None,\n        stream: bool = False,\n        system_message: Optional[str] = None,\n    ) -> Text:\n        if not openai_api_base:\n            openai_api_base = \"https://api.openai.com/v1\"\n        if openai_api_key:\n            api_key = SecretStr(openai_api_key)\n        else:\n            api_key = None\n\n        output = ChatOpenAI(\n            max_tokens=max_tokens or None,\n            model_kwargs=model_kwargs,\n            model=model_name,\n            base_url=openai_api_base,\n            api_key=api_key,\n            temperature=temperature,\n        )\n\n        return self.get_chat_result(output, stream, input_value, system_message)\n",
                 "fileTypes": [],
                 "file_path": "",
                 "password": false,
@@ -1342,9 +1229,7 @@
                 "info": "",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "openai_api_base": {
                 "type": "str",
@@ -1363,9 +1248,7 @@
                 "info": "The base URL of the OpenAI API. Defaults to https://api.openai.com/v1.\n\nYou can change this to use other APIs like JinaChat, LocalAI and Prem.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "openai_api_key": {
                 "type": "str",
@@ -1384,9 +1267,7 @@
                 "info": "The OpenAI API Key to use for the OpenAI model.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"],
-                                    "Text"
-                                ],
                 "value": ""
               },
               "stream": {
@@ -1425,13 +1306,11 @@
                 "info": "System message to pass to the model.",
                 "load_from_db": false,
                 "title_case": false,
-                                "input_types": [
+                "input_types": ["Text"]
-                                    "Text"
-                                ]
               },
               "temperature": {
                 "type": "float",
-                                "required": true,
+                "required": false,
                 "placeholder": "",
                 "list": false,
                 "show": true,
@@ -1458,11 +1337,7 @@
             },
             "description": "Generates text using OpenAI LLMs.",
             "icon": "OpenAI",
-                        "base_classes": [
+            "base_classes": ["str", "Text", "object"],
-                            "str",
-                            "Text",
-                            "object"
-                        ],
             "display_name": "OpenAI",
             "documentation": "",
             "custom_fields": {
@@ -1476,9 +1351,7 @@
               "stream": null,
               "system_message": null
             },
-                        "output_types": [
+            "output_types": ["Text"],
-                            "Text"
-                        ],
             "field_formatters": {},
             "frozen": false,
             "field_order": [
@@ -1509,27 +1382,18 @@
     "edges": [
       {
         "source": "TextInput-sptaH",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153TextInput\u0153,\u0153id\u0153:\u0153TextInput-sptaH\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œstrœ,œTextœ,œobjectœ],œdataTypeœ:œTextInputœ,œidœ:œTextInput-sptaHœ}",
         "target": "Prompt-amqBu",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153document\u0153,\u0153id\u0153:\u0153Prompt-amqBu\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œdocumentœ,œidœ:œPrompt-amqBuœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "document",
             "id": "Prompt-amqBu",
-                        "inputTypes": [
+            "inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
-                            "Document",
-                            "BaseOutputParser",
-                            "Record",
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["str", "Text", "object"],
-                            "str",
-                            "Text",
-                            "object"
-                        ],
             "dataType": "TextInput",
             "id": "TextInput-sptaH"
           }
@@ -1538,29 +1402,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-TextInput-sptaH{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153TextInput\u0153,\u0153id\u0153:\u0153TextInput-sptaH\u0153}-Prompt-amqBu{\u0153fieldName\u0153:\u0153document\u0153,\u0153id\u0153:\u0153Prompt-amqBu\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-TextInput-sptaH{œbaseClassesœ:[œstrœ,œTextœ,œobjectœ],œdataTypeœ:œTextInputœ,œidœ:œTextInput-sptaHœ}-Prompt-amqBu{œfieldNameœ:œdocumentœ,œidœ:œPrompt-amqBuœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "Prompt-amqBu",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-amqBu\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-amqBuœ}",
         "target": "TextOutput-2MS4a",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153TextOutput-2MS4a\u0153,\u0153inputTypes\u0153:[\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œTextOutput-2MS4aœ,œinputTypesœ:[œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "TextOutput-2MS4a",
-                        "inputTypes": [
+            "inputTypes": ["Record", "Text"],
-                            "Record",
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["object", "str", "Text"],
-                            "object",
-                            "str",
-                            "Text"
-                        ],
             "dataType": "Prompt",
             "id": "Prompt-amqBu"
           }
@@ -1569,28 +1426,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-Prompt-amqBu{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-amqBu\u0153}-TextOutput-2MS4a{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153TextOutput-2MS4a\u0153,\u0153inputTypes\u0153:[\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-Prompt-amqBu{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-amqBuœ}-TextOutput-2MS4a{œfieldNameœ:œinput_valueœ,œidœ:œTextOutput-2MS4aœ,œinputTypesœ:[œRecordœ,œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "Prompt-amqBu",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-amqBu\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-amqBuœ}",
         "target": "OpenAIModel-uYXZJ",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153OpenAIModel-uYXZJ\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-uYXZJœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "OpenAIModel-uYXZJ",
-                        "inputTypes": [
+            "inputTypes": ["Text"],
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["object", "str", "Text"],
-                            "object",
-                            "str",
-                            "Text"
-                        ],
             "dataType": "Prompt",
             "id": "Prompt-amqBu"
           }
@@ -1599,31 +1450,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-Prompt-amqBu{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-amqBu\u0153}-OpenAIModel-uYXZJ{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153OpenAIModel-uYXZJ\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-Prompt-amqBu{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-amqBuœ}-OpenAIModel-uYXZJ{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-uYXZJœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "OpenAIModel-uYXZJ",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153OpenAIModel\u0153,\u0153id\u0153:\u0153OpenAIModel-uYXZJ\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œstrœ,œTextœ,œobjectœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-uYXZJœ}",
         "target": "Prompt-gTNiz",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153summary\u0153,\u0153id\u0153:\u0153Prompt-gTNiz\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œsummaryœ,œidœ:œPrompt-gTNizœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "summary",
             "id": "Prompt-gTNiz",
-                        "inputTypes": [
+            "inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
-                            "Document",
-                            "BaseOutputParser",
-                            "Record",
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["str", "Text", "object"],
-                            "str",
-                            "Text",
-                            "object"
-                        ],
             "dataType": "OpenAIModel",
             "id": "OpenAIModel-uYXZJ"
           }
@@ -1632,28 +1474,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-OpenAIModel-uYXZJ{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153OpenAIModel\u0153,\u0153id\u0153:\u0153OpenAIModel-uYXZJ\u0153}-Prompt-gTNiz{\u0153fieldName\u0153:\u0153summary\u0153,\u0153id\u0153:\u0153Prompt-gTNiz\u0153,\u0153inputTypes\u0153:[\u0153Document\u0153,\u0153BaseOutputParser\u0153,\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-OpenAIModel-uYXZJ{œbaseClassesœ:[œstrœ,œTextœ,œobjectœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-uYXZJœ}-Prompt-gTNiz{œfieldNameœ:œsummaryœ,œidœ:œPrompt-gTNizœ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "OpenAIModel-uYXZJ",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153OpenAIModel\u0153,\u0153id\u0153:\u0153OpenAIModel-uYXZJ\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œstrœ,œTextœ,œobjectœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-uYXZJœ}",
         "target": "ChatOutput-EJkG3",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153ChatOutput-EJkG3\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-EJkG3œ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "ChatOutput-EJkG3",
-                        "inputTypes": [
+            "inputTypes": ["Text"],
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["str", "Text", "object"],
-                            "str",
-                            "Text",
-                            "object"
-                        ],
             "dataType": "OpenAIModel",
             "id": "OpenAIModel-uYXZJ"
           }
@@ -1662,29 +1498,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-OpenAIModel-uYXZJ{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153OpenAIModel\u0153,\u0153id\u0153:\u0153OpenAIModel-uYXZJ\u0153}-ChatOutput-EJkG3{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153ChatOutput-EJkG3\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-OpenAIModel-uYXZJ{œbaseClassesœ:[œstrœ,œTextœ,œobjectœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-uYXZJœ}-ChatOutput-EJkG3{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-EJkG3œ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "Prompt-gTNiz",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-gTNiz\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-gTNizœ}",
         "target": "TextOutput-MUDOR",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153TextOutput-MUDOR\u0153,\u0153inputTypes\u0153:[\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œTextOutput-MUDORœ,œinputTypesœ:[œRecordœ,œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "TextOutput-MUDOR",
-                        "inputTypes": [
+            "inputTypes": ["Record", "Text"],
-                            "Record",
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["object", "str", "Text"],
-                            "object",
-                            "str",
-                            "Text"
-                        ],
             "dataType": "Prompt",
             "id": "Prompt-gTNiz"
           }
@@ -1693,28 +1522,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-Prompt-gTNiz{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-gTNiz\u0153}-TextOutput-MUDOR{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153TextOutput-MUDOR\u0153,\u0153inputTypes\u0153:[\u0153Record\u0153,\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-Prompt-gTNiz{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-gTNizœ}-TextOutput-MUDOR{œfieldNameœ:œinput_valueœ,œidœ:œTextOutput-MUDORœ,œinputTypesœ:[œRecordœ,œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "Prompt-gTNiz",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-gTNiz\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-gTNizœ}",
         "target": "OpenAIModel-XawYB",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153OpenAIModel-XawYB\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-XawYBœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "OpenAIModel-XawYB",
-                        "inputTypes": [
+            "inputTypes": ["Text"],
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["object", "str", "Text"],
-                            "object",
-                            "str",
-                            "Text"
-                        ],
             "dataType": "Prompt",
             "id": "Prompt-gTNiz"
           }
@@ -1723,28 +1546,22 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-Prompt-gTNiz{\u0153baseClasses\u0153:[\u0153object\u0153,\u0153str\u0153,\u0153Text\u0153],\u0153dataType\u0153:\u0153Prompt\u0153,\u0153id\u0153:\u0153Prompt-gTNiz\u0153}-OpenAIModel-XawYB{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153OpenAIModel-XawYB\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-Prompt-gTNiz{œbaseClassesœ:[œobjectœ,œstrœ,œTextœ],œdataTypeœ:œPromptœ,œidœ:œPrompt-gTNizœ}-OpenAIModel-XawYB{œfieldNameœ:œinput_valueœ,œidœ:œOpenAIModel-XawYBœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}"
       },
       {
         "source": "OpenAIModel-XawYB",
-                "sourceHandle": "{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153OpenAIModel\u0153,\u0153id\u0153:\u0153OpenAIModel-XawYB\u0153}",
+        "sourceHandle": "{œbaseClassesœ:[œstrœ,œTextœ,œobjectœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-XawYBœ}",
         "target": "ChatOutput-DNmvg",
-                "targetHandle": "{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153ChatOutput-DNmvg\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}",
+        "targetHandle": "{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-DNmvgœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}",
         "data": {
           "targetHandle": {
             "fieldName": "input_value",
             "id": "ChatOutput-DNmvg",
-                        "inputTypes": [
+            "inputTypes": ["Text"],
-                            "Text"
-                        ],
             "type": "str"
           },
           "sourceHandle": {
-                        "baseClasses": [
+            "baseClasses": ["str", "Text", "object"],
-                            "str",
-                            "Text",
-                            "object"
-                        ],
             "dataType": "OpenAIModel",
             "id": "OpenAIModel-XawYB"
           }
@@ -1753,7 +1570,7 @@
           "stroke": "#555"
         },
         "className": "stroke-gray-900 stroke-connection",
-                "id": "reactflow__edge-OpenAIModel-XawYB{\u0153baseClasses\u0153:[\u0153str\u0153,\u0153Text\u0153,\u0153object\u0153],\u0153dataType\u0153:\u0153OpenAIModel\u0153,\u0153id\u0153:\u0153OpenAIModel-XawYB\u0153}-ChatOutput-DNmvg{\u0153fieldName\u0153:\u0153input_value\u0153,\u0153id\u0153:\u0153ChatOutput-DNmvg\u0153,\u0153inputTypes\u0153:[\u0153Text\u0153],\u0153type\u0153:\u0153str\u0153}"
+        "id": "reactflow__edge-OpenAIModel-XawYB{œbaseClassesœ:[œstrœ,œTextœ,œobjectœ],œdataTypeœ:œOpenAIModelœ,œidœ:œOpenAIModel-XawYBœ}-ChatOutput-DNmvg{œfieldNameœ:œinput_valueœ,œidœ:œChatOutput-DNmvgœ,œinputTypesœ:[œTextœ],œtypeœ:œstrœ}"
       }
     ],
     "viewport": {

src/frontend/package-lock.json

@@ -40,6 +40,7 @@
         "class-variance-authority": "^0.6.1",
         "clsx": "^1.2.1",
         "cmdk": "^1.0.0",
+        "debounce-promise": "^3.1.2",
         "dompurify": "^3.0.5",
         "dotenv": "^16.4.5",
         "esbuild": "^0.17.19",
@@ -5670,6 +5671,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/debounce-promise": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/debounce-promise/-/debounce-promise-3.1.2.tgz",
+      "integrity": "sha512-rZHcgBkbYavBeD9ej6sP56XfG53d51CD4dnaw989YX/nZ/ZJfgRx/9ePKmTNiUiyQvh4mtrMoS3OAWW+yoYtpg=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

src/frontend/package.json

@@ -35,6 +35,7 @@
     "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
     "cmdk": "^1.0.0",
+    "debounce-promise": "^3.1.2",
     "dompurify": "^3.0.5",
     "dotenv": "^16.4.5",
     "esbuild": "^0.17.19",

src/frontend/playwright.config.ts

@@ -15,7 +15,7 @@ dotenv.config({ path: path.resolve(__dirname, "../../.env") });
 export default defineConfig({
   testDir: "./tests",
   /* Run tests in files in parallel */
-  fullyParallel: true,
+  fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
@@ -52,18 +52,18 @@ export default defineConfig({
       },
     },
 
-    {
+    // {
-      name: "firefox",
+    //   name: "firefox",
-      use: {
+    //   use: {
-        ...devices["Desktop Firefox"],
+    //     ...devices["Desktop Firefox"],
-        launchOptions: {
+    //     launchOptions: {
-          firefoxUserPrefs: {
+    //       firefoxUserPrefs: {
-            "dom.events.asyncClipboard.readText": true,
+    //         "dom.events.asyncClipboard.readText": true,
-            "dom.events.testing.asyncClipboard": true,
+    //         "dom.events.testing.asyncClipboard": true,
-          },
+    //       },
-        },
+    //     },
-      },
+    //   },
-    },
+    // },
   ],
   webServer: [
     {

src/frontend/src/App.tsx

@@ -30,10 +30,10 @@ export default function App() {
   useTrackLastVisitedPath();
 
   const removeFromTempNotificationList = useAlertStore(
-    (state) => state.removeFromTempNotificationList
+    (state) => state.removeFromTempNotificationList,
   );
   const tempNotificationList = useAlertStore(
-    (state) => state.tempNotificationList
+    (state) => state.tempNotificationList,
   );
   const [fetchError, setFetchError] = useState(false);
   const isLoading = useFlowsManagerStore((state) => state.isLoading);
@@ -51,7 +51,7 @@ export default function App() {
   const refreshVersion = useDarkStore((state) => state.refreshVersion);
   const refreshStars = useDarkStore((state) => state.refreshStars);
   const setGlobalVariables = useGlobalVariablesStore(
-    (state) => state.setGlobalVariables
+    (state) => state.setGlobalVariables,
   );
   const checkHasStore = useStoreStore((state) => state.checkHasStore);
   const navigate = useNavigate();
@@ -222,8 +222,7 @@ export default function App() {
                   id={alert.id}
                   removeAlert={removeAlert}
                 />
-              ) : (
+              ) : alert.type === "notice" ? (
-                alert.type === "notice" && (
                 <NoticeAlert
                   key={alert.id}
                   title={alert.title}
@@ -231,25 +230,19 @@ export default function App() {
                   id={alert.id}
                   removeAlert={removeAlert}
                 />
+              ) : (
+                alert.type === "success" && (
+                  <SuccessAlert
+                    key={alert.id}
+                    title={alert.title}
+                    id={alert.id}
+                    removeAlert={removeAlert}
+                  />
                 )
               )}
             </div>
           ))}
         </div>
-        <div className="z-40 flex flex-col-reverse">
-          {tempNotificationList.map((alert) => (
-            <div key={alert.id}>
-              {alert.type === "success" && (
-                <SuccessAlert
-                  key={alert.id}
-                  title={alert.title}
-                  id={alert.id}
-                  removeAlert={removeAlert}
-                />
-              )}
-            </div>
-          ))}
-        </div>
       </div>
     </div>
   );

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -16,13 +16,13 @@ export default function AlertDropdown({
 }: AlertDropdownType): JSX.Element {
   const notificationList = useAlertStore((state) => state.notificationList);
   const clearNotificationList = useAlertStore(
-    (state) => state.clearNotificationList
+    (state) => state.clearNotificationList,
   );
   const removeFromNotificationList = useAlertStore(
-    (state) => state.removeFromNotificationList
+    (state) => state.removeFromNotificationList,
   );
   const setNotificationCenter = useAlertStore(
-    (state) => state.setNotificationCenter
+    (state) => state.setNotificationCenter,
   );
 
   const [open, setOpen] = useState(false);
@@ -36,7 +36,7 @@ export default function AlertDropdown({
       }}
     >
       <PopoverTrigger>{children}</PopoverTrigger>
-      <PopoverContent className="nocopy nopan nodelete nodrag noundo flex h-[500px] w-[500px] flex-col">
+      <PopoverContent className="nocopy nowheel nopan nodelete nodrag noundo flex h-[500px] w-[500px] flex-col">
         <div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground">
           Notifications
           <div className="flex gap-3 pr-3 ">

src/frontend/src/alerts/error/index.tsx

@@ -40,7 +40,7 @@ export default function ErrorAlert({
             removeAlert(id);
           }, 500);
         }}
-        className="error-build-message nocopy nopan nodelete nodrag noundo"
+        className="error-build-message nocopy nowheel nopan nodelete nodrag noundo"
       >
         <div className="flex">
           <div className="flex-shrink-0">

src/frontend/src/alerts/notice/index.tsx

@@ -36,7 +36,7 @@ export default function NoticeAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="nocopy nopan nodelete nodrag noundo mt-6 w-96 rounded-md bg-info-background p-4 shadow-xl"
+        className="nocopy nowheel nopan nodelete nodrag noundo mt-6 w-96 rounded-md bg-info-background p-4 shadow-xl"
       >
         <div className="flex">
           <div className="flex-shrink-0">

src/frontend/src/alerts/success/index.tsx

@@ -34,7 +34,7 @@ export default function SuccessAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="success-alert nocopy nopan nodelete nodrag noundo"
+        className="success-alert nocopy nowheel nopan nodelete nodrag noundo"
       >
         <div className="flex">
           <div className="flex-shrink-0">

src/frontend/src/components/accordionComponent/composite/folderAccordionComponent/index.tsx

@@ -15,7 +15,7 @@ export default function FolderAccordionComponent({
   options,
 }: AccordionComponentType): JSX.Element {
   const [value, setValue] = useState(
-    open.length === 0 ? "" : getOpenAccordion()
+    open.length === 0 ? "" : getOpenAccordion(),
   );
 
   function getOpenAccordion(): string {

src/frontend/src/components/accordionComponent/index.tsx

@@ -6,10 +6,13 @@ import {
   AccordionTrigger,
 } from "../../components/ui/accordion";
 import { AccordionComponentType } from "../../types/components";
+import { cn } from "../../utils/utils";
+import ShadTooltip from "../shadTooltipComponent";
 
 export default function AccordionComponent({
   trigger,
   children,
+  disabled,
   open = [],
   keyValue,
   sideBar,
@@ -29,8 +32,10 @@ export default function AccordionComponent({
   }
 
   function handleClick(): void {
+    if (!disabled) {
       value === "" ? setValue(keyValue!) : setValue("");
     }
+  }
 
   return (
     <>
@@ -38,16 +43,18 @@ export default function AccordionComponent({
         type="single"
         className="w-full"
         value={value}
-        onValueChange={setValue}
+        onValueChange={!disabled ? setValue : () => {}}
       >
         <AccordionItem value={keyValue!} className="border-b">
           <AccordionTrigger
             onClick={() => {
               handleClick();
             }}
-            className={
+            disabled={disabled}
-              sideBar ? "w-full bg-muted px-[0.75rem] py-[0.5rem]" : "ml-3"
+            className={cn(
-            }
+              sideBar ? "w-full bg-muted px-[0.75rem] py-[0.5rem]" : "ml-3",
+              disabled ? "cursor-not-allowed" : "cursor-pointer",
+            )}
           >
             {trigger}
           </AccordionTrigger>

src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx

@@ -7,7 +7,6 @@ import { useTypesStore } from "../../stores/typesStore";
 import { ResponseErrorDetailAPI } from "../../types/api";
 import ForwardedIconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
-import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
 import { Textarea } from "../ui/textarea";
@@ -24,19 +23,19 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const componentFields = useTypesStore((state) => state.ComponentFields);
   const unavaliableFields = new Set(
-    Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields)),
+    Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields))
   );
 
   const availableFields = () => {
     const fields = Array.from(componentFields).filter(
-      (field) => !unavaliableFields.has(field),
+      (field) => !unavaliableFields.has(field)
     );
 
     return sortByName(fields);
   };
 
   const addGlobalVariable = useGlobalVariablesStore(
-    (state) => state.addGlobalVariable,
+    (state) => state.addGlobalVariable
   );
 
   function handleSaveVariable() {
@@ -65,12 +64,17 @@ export default function AddNewVariableButton({ children }): JSX.Element {
         let responseError = error as ResponseErrorDetailAPI;
         setErrorData({
           title: "Error creating variable",
-          list: [responseError.response.data.detail ?? "Unknown error"],
+          list: [responseError?.response?.data?.detail ?? "Unknown error"],
         });
       });
   }
   return (
-    <BaseModal open={open} setOpen={setOpen} size="x-small">
+    <BaseModal
+      open={open}
+      setOpen={setOpen}
+      size="x-small"
+      onSubmit={handleSaveVariable}
+    >
       <BaseModal.Header
         description={
           "This variable will be encrypted and will be available for you to use in any of your projects."
@@ -137,9 +141,9 @@ export default function AddNewVariableButton({ children }): JSX.Element {
           ></InputComponent>
         </div>
       </BaseModal.Content>
-      <BaseModal.Footer>
+      <BaseModal.Footer
-        <Button onClick={handleSaveVariable}>Save Variable</Button>
+        submit={{ label: "Save Variable", dataTestId: "save-variable-btn" }}
-      </BaseModal.Footer>
+      />
     </BaseModal>
   );
 }

src/frontend/src/components/cardComponent/components/dragCardComponent/index.tsx

@@ -10,7 +10,7 @@ export default function DragCardComponent({ data }: { data: storeComponent }) {
         draggable
         //TODO check color schema
         className={cn(
-          "group relative flex flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]"
+          "group relative flex flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]",
         )}
       >
         <div>
@@ -22,7 +22,7 @@ export default function DragCardComponent({ data }: { data: storeComponent }) {
                     "visible flex-shrink-0",
                     data.is_component
                       ? "mx-0.5 h-6 w-6 text-component-icon"
-                      : "h-7 w-7 flex-shrink-0 text-flow-icon"
+                      : "h-7 w-7 flex-shrink-0 text-flow-icon",
                   )}
                   name={data.is_component ? "ToyBrick" : "Group"}
                 />

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -18,7 +18,7 @@ export default function CodeAreaComponent({
   setOpen,
 }: CodeAreaComponentType) {
   const [myValue, setMyValue] = useState(
-    typeof value == "string" ? value : JSON.stringify(value)
+    typeof value == "string" ? value : JSON.stringify(value),
   );
   useEffect(() => {
     if (disabled && myValue !== "") {

src/frontend/src/components/dictComponent/index.tsx

@@ -29,7 +29,7 @@ export default function DictComponent({
     <div
       className={classNames(
         value.length > 1 && editNode ? "my-1" : "",
-        "flex flex-col gap-3"
+        "flex flex-col gap-3",
       )}
     >
       {

src/frontend/src/components/dropdownComponent/index.tsx

@@ -59,7 +59,7 @@ export default function Dropdown({
                       ? "dropdown-component-outline"
                       : "dropdown-component-false-outline",
                     "w-full justify-between font-normal",
-                    editNode ? "input-edit-node" : "py-2"
+                    editNode ? "input-edit-node" : "py-2",
                   )}
                 >
                   <span data-testid={`value-dropdown-` + id}>
@@ -107,7 +107,7 @@ export default function Dropdown({
                           name="Check"
                           className={cn(
                             "ml-auto h-4 w-4 text-primary",
-                            value === option ? "opacity-100" : "opacity-0"
+                            value === option ? "opacity-100" : "opacity-0",
                           )}
                         />
                       </CommandItem>

src/frontend/src/components/editFlowSettingsComponent/index.tsx

@@ -99,7 +99,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           <span
             className={cn(
               "font-normal text-muted-foreground word-break-break-word",
-              description === "" ? "font-light italic" : ""
+              description === "" ? "font-light italic" : "",
             )}
           >
             {description === "" ? "No description" : description}
@@ -109,7 +109,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
       {setEndpointName && (
         <Label>
           <div className="edit-flow-arrangement mt-3">
-            <span className="font-medium">Endpoint name:</span>
+            <span className="font-medium">Endpoint Name</span>
             {!isEndpointNameValid && (
               <span className="edit-flow-span">
                 Invalid endpoint name. Use only letters, numbers, hyphens, and
@@ -123,7 +123,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
             type="text"
             name="endpoint_name"
             value={endpointName ?? ""}
-            placeholder="An alternative name for the run endpoint"
+            placeholder="An alternative name to run the endpoint"
             maxLength={maxLength}
             id="endpoint_name"
             onDoubleClickCapture={(event) => {

src/frontend/src/components/fetchErrorComponent/index.tsx

@@ -1,7 +1,6 @@
 import BaseModal from "../../modals/baseModal";
 import { fetchErrorComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
-import { Button } from "../ui/button";
 
 export default function FetchErrorComponent({
   message,
@@ -12,7 +11,14 @@ export default function FetchErrorComponent({
 }: fetchErrorComponentType) {
   return (
     <>
-      <BaseModal size="small-h-full" open={openModal} type="modal">
+      <BaseModal
+        size="small-h-full"
+        open={openModal}
+        type="modal"
+        onSubmit={() => {
+          setRetry();
+        }}
+      >
         <BaseModal.Content>
           <div role="status" className="m-auto flex flex-col items-center">
             <IconComponent
@@ -27,24 +33,9 @@ export default function FetchErrorComponent({
           </div>
         </BaseModal.Content>
 
-        <BaseModal.Footer>
+        <BaseModal.Footer
-          <div className="m-auto">
+          submit={{ label: "Retry", loading: isLoadingHealth }}
-            <Button
+        />
-              disabled={isLoadingHealth}
-              onClick={() => {
-                setRetry();
-              }}
-            >
-              {isLoadingHealth ? (
-                <div>
-                  <IconComponent name={"Loader2"} className={"animate-spin"} />
-                </div>
-              ) : (
-                "Retry"
-              )}
-            </Button>
-          </div>
-        </BaseModal.Footer>
       </BaseModal>
     </>
   );

src/frontend/src/components/genericIconComponent/index.tsx

@@ -18,7 +18,7 @@ export const ForwardedIconComponent = memo(
         strokeWidth,
         id = "",
       }: IconComponentProps,
-      ref
+      ref,
     ) => {
       const [showFallback, setShowFallback] = useState(false);
 
@@ -65,8 +65,8 @@ export const ForwardedIconComponent = memo(
           />
         </Suspense>
       );
-    }
+    },
-  )
+  ),
 );
 
 export default ForwardedIconComponent;

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -35,21 +35,11 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const navigate = useNavigate();
   const isBuilding = useFlowStore((state) => state.isBuilding);
 
-  function handleAddFlow(duplicate?: boolean) {
+  function handleAddFlow() {
     try {
-      if (duplicate) {
-        if (!currentFlow) {
-          throw new Error("No flow to duplicate");
-        }
-        addFlow(true, currentFlow).then((id) => {
-          setSuccessData({ title: "Flow duplicated successfully" });
-          navigate("/flow/" + id);
-        });
-      } else {
       addFlow(true).then((id) => {
         navigate("/flow/" + id);
       });
-      }
     } catch (err) {
       setErrorData(err as { title: string; list?: Array<string> });
     }
@@ -89,15 +79,6 @@ export const MenuBar = ({}: {}): JSX.Element => {
               <IconComponent name="Plus" className="header-menu-options" />
               New
             </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() => {
-                handleAddFlow(true);
-              }}
-              className="cursor-pointer"
-            >
-              <IconComponent name="Copy" className="header-menu-options" />
-              Duplicate
-            </DropdownMenuItem>
 
             <DropdownMenuItem
               onClick={() => {
@@ -132,7 +113,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
                       title: UPLOAD_ERROR_ALERT,
                       list: [error],
                     });
-                  }
+                  },
                 );
               }}
             >
@@ -214,7 +195,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
               name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
               className={cn(
                 "h-4 w-4",
-                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle"
+                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",
               )}
             />
             {printByBuildStatus()}

src/frontend/src/components/headerComponent/index.tsx

@@ -56,7 +56,7 @@ export default function Header(): JSX.Element {
     const lastFlowVisitedIndex = routeHistory
       .reverse()
       .findIndex(
-        (path) => path.includes("/flow/") && path !== location.pathname
+        (path) => path.includes("/flow/") && path !== location.pathname,
       );
 
     const lastFlowVisited = routeHistory[lastFlowVisitedIndex];

src/frontend/src/components/horizontalScrollFadeComponent/index.tsx

@@ -32,11 +32,11 @@ export default function HorizontalScrollFadeComponent({
 
       fadeContainerRef.current.classList.toggle(
         "fade-left",
-        isScrollable && !atStart
+        isScrollable && !atStart,
       );
       fadeContainerRef.current.classList.toggle(
         "fade-right",
-        isScrollable && !atEnd
+        isScrollable && !atEnd,
       );
     };
 

src/frontend/src/components/inputComponent/components/popover/index.tsx

@@ -108,7 +108,7 @@ const CustomInputPopover = ({
         />
       </PopoverAnchor>
       <PopoverContentWithoutPortal
-        className="nocopy nopan nodelete nodrag noundo p-0"
+        className="nocopy nowheel nopan nodelete nodrag noundo p-0"
         style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
         side="bottom"
         align="center"

src/frontend/src/components/inputComponent/components/popoverObject/index.tsx

@@ -80,7 +80,7 @@ const CustomInputPopoverObject = ({
         />
       </PopoverAnchor>
       <PopoverContentWithoutPortal
-        className="nocopy nopan nodelete nodrag noundo p-0"
+        className="nocopy nowheel nopan nodelete nodrag noundo p-0"
         style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
         side="bottom"
         align="center"

src/frontend/src/components/inputGlobalComponent/index.tsx

@@ -19,15 +19,15 @@ export default function InputGlobalComponent({
   editNode = false,
 }: InputGlobalComponentType): JSX.Element {
   const globalVariablesEntries = useGlobalVariablesStore(
-    (state) => state.globalVariablesEntries
+    (state) => state.globalVariablesEntries,
   );
 
   const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
   const unavaliableFields = useGlobalVariablesStore(
-    (state) => state.unavaliableFields
+    (state) => state.unavaliableFields,
   );
   const removeGlobalVariable = useGlobalVariablesStore(
-    (state) => state.removeGlobalVariable
+    (state) => state.removeGlobalVariable,
   );
   const setErrorData = useAlertStore((state) => state.setErrorData);
 
@@ -130,7 +130,7 @@ export default function InputGlobalComponent({
             <ForwardedIconComponent
               name="Trash2"
               className={cn(
-                "h-4 w-4 text-primary opacity-0 hover:text-status-red group-hover:opacity-100"
+                "h-4 w-4 text-primary opacity-0 hover:text-status-red group-hover:opacity-100",
               )}
               aria-hidden="true"
             />

src/frontend/src/components/inputListComponent/index.tsx

@@ -55,10 +55,11 @@ export default function InputListComponent({
             />
             {idx === value.length - 1 ? (
               <button
-                onClick={() => {
+                onClick={(e) => {
                   let newInputList = _.cloneDeep(value);
                   newInputList.push("");
                   onChange(newInputList);
+                  e.preventDefault();
                 }}
                 data-testid={
                   `input-list-plus-btn${
@@ -79,10 +80,11 @@ export default function InputListComponent({
                     editNode ? "-edit" : ""
                   }_${componentName}-` + idx
                 }
-                onClick={() => {
+                onClick={(e) => {
                   let newInputList = _.cloneDeep(value);
                   newInputList.splice(idx, 1);
                   onChange(newInputList);
+                  e.preventDefault();
                 }}
                 disabled={disabled || playgroundDisabled}
               >

src/frontend/src/components/shadTooltipComponent/index.tsx

@@ -13,7 +13,6 @@ export default function ShadTooltip({
   return (
     <Tooltip delayDuration={delayDuration}>
       <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
-
       <TooltipContent
         className={cn(styleClasses, "max-w-96")}
         side={side}

src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx

@@ -1,6 +1,7 @@
 import { Link } from "react-router-dom";
 import { cn } from "../../../../utils/utils";
 import { buttonVariants } from "../../../ui/button";
+import ForwardedIconComponent from "../../../genericIconComponent";
 
 type SideBarButtonsComponentProps = {
   items: {
@@ -11,9 +12,12 @@ type SideBarButtonsComponentProps = {
   pathname: string;
   handleOpenNewFolderModal?: () => void;
 };
-const SideBarButtonsComponent = ({ items }: SideBarButtonsComponentProps) => {
+const SideBarButtonsComponent = ({
+  items,
+  pathname,
+}: SideBarButtonsComponentProps) => {
   return (
-    <>
+    <div className="flex gap-2 overflow-auto lg:h-[70vh] lg:flex-col">
       {items.map((item) => (
         <Link to={item.href!}>
           <div
@@ -21,14 +25,20 @@ const SideBarButtonsComponent = ({ items }: SideBarButtonsComponentProps) => {
             data-testid={`sidebar-nav-${item.title}`}
             className={cn(
               buttonVariants({ variant: "ghost" }),
-              "!w-[200px] cursor-pointer justify-start gap-2 border border-transparent hover:border-border hover:bg-transparent"
+              pathname === item.href
+                ? "border border-border bg-muted hover:bg-muted"
+                : "border border-transparent hover:border-border hover:bg-transparent",
+              "flex w-full shrink-0 justify-start gap-4",
             )}
           >
+            {item.icon}
+            <span className="block max-w-full truncate opacity-100">
               {item.title}
+            </span>
           </div>
         </Link>
       ))}
-    </>
+    </div>
   );
 };
 export default SideBarButtonsComponent;

src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -93,24 +93,25 @@ const SideBarFoldersButtonsComponent = ({
 
   return (
     <>
-      <div className="flex shrink-0 items-center justify-between">
+      <div className="flex shrink-0 items-center justify-between gap-2">
-        <Button variant="primary" onClick={addNewFolder}>
+        <div className="flex-1 self-start text-lg font-semibold">Folders</div>
-          <ForwardedIconComponent
+        <Button
-            name="Plus"
+          variant="primary"
-            className="main-page-nav-button"
+          size="icon"
-          />
+          className="px-2"
-          New Folder
+          onClick={addNewFolder}
+          data-testid="add-folder-button"
+        >
+          <ForwardedIconComponent name="FolderPlus" className="w-4" />
         </Button>
         <Button
           variant="primary"
-          className="px-7"
+          size="icon"
+          className="px-2"
           onClick={handleUploadFlowsToFolder}
+          data-testid="upload-folder-button"
         >
-          <ForwardedIconComponent
+          <ForwardedIconComponent name="Upload" className="w-4" />
-            name="Upload"
-            className="main-page-nav-button"
-          />
-          Upload
         </Button>
       </div>
 
@@ -176,11 +177,11 @@ const SideBarFoldersButtonsComponent = ({
                     event.stopPropagation();
                     event.preventDefault();
                   }}
-                  className="flex w-full items-center gap-2"
+                  className="flex w-full items-center gap-4"
                 >
                   <IconComponent
                     name={"folder"}
-                    className="mr-2 w-4 flex-shrink-0 justify-start stroke-[1.5] opacity-100"
+                    className="w-4 flex-shrink-0 justify-start stroke-[1.5] opacity-100"
                   />
                   {editFolderName?.edit ? (
                     <div>
@@ -259,14 +260,14 @@ const SideBarFoldersButtonsComponent = ({
                         }}
                         value={foldersNames[item.name]}
                         id={`input-folder-${item.name}`}
+                        data-testid={`input-folder`}
                       />
                     </div>
                   ) : (
-                    <span className="block max-w-full truncate opacity-100">
+                    <span className="block w-full truncate opacity-100">
                       {item.name}
                     </span>
                   )}
-                  <div className="flex-1" />
                   {index > 0 && (
                     <Button
                       className="hidden p-0 hover:bg-white group-hover:block hover:dark:bg-[#0c101a00]"
@@ -283,21 +284,6 @@ const SideBarFoldersButtonsComponent = ({
                       />
                     </Button>
                   )}
-                  {/* {index > 0 && (
-                    <Button
-                      className="hidden p-0 hover:bg-white group-hover:block hover:dark:bg-[#0c101a00]"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                      }}
-                      variant={"ghost"}
-                    >
-                      <IconComponent
-                        name={"pencil"}
-                        className="  w-4 stroke-[1.5] text-white  "
-                      />
-                    </Button>
-                  )} */}
                   <Button
                     className="hidden p-0 hover:bg-white group-hover:block hover:dark:bg-[#0c101a00]"
                     onClick={(e) => {
@@ -305,7 +291,8 @@ const SideBarFoldersButtonsComponent = ({
                       e.stopPropagation();
                       e.preventDefault();
                     }}
-                    variant={"ghost"}
+                    size="none"
+                    variant="none"
                   >
                     <IconComponent
                       name={"Download"}

src/frontend/src/components/sidebarComponent/index.tsx

@@ -41,9 +41,12 @@ export default function SidebarNav({
   return (
     <nav className={cn(className)} {...props}>
       <HorizontalScrollFadeComponent>
+        {items.length > 0 ? (
           <SideBarButtonsComponent items={items} pathname={pathname} />
-
+        ) : (
-        {!loadingFolders && folders?.length > 0 && isFolderPath && (
+          !loadingFolders &&
+          folders?.length > 0 &&
+          isFolderPath && (
             <SideBarFoldersButtonsComponent
               folders={folders}
               pathname={pathname}
@@ -51,6 +54,7 @@ export default function SidebarNav({
               handleEditFolder={handleEditFolder}
               handleDeleteFolder={handleDeleteFolder}
             />
+          )
         )}
       </HorizontalScrollFadeComponent>
     </nav>

src/frontend/src/components/tableAutoCellRender/index.tsx

@@ -34,7 +34,7 @@ export default function TableAutoCellRender({
               variant="outline"
               size="sq"
               className={cn(
-                "min-w-min bg-success-background text-success-foreground hover:bg-success-background"
+                "min-w-min bg-success-background text-success-foreground hover:bg-success-background",
               )}
             >
               {value}

src/frontend/src/components/tagsSelectorComponent/index.tsx

@@ -48,7 +48,7 @@ export function TagsSelector({
               className={cn(
                 selectedTags.some((category) => category === tag.name)
                   ? "min-w-min bg-beta-foreground text-background hover:bg-beta-foreground"
-                  : ""
+                  : "",
               )}
             >
               {tag.name}

src/frontend/src/components/ui/accordion.tsx

@@ -4,6 +4,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import * as React from "react";
 import { cn } from "../../utils/utils";
+import ShadTooltip from "../shadTooltipComponent";
 
 const Accordion = AccordionPrimitive.Root;
 
@@ -22,17 +23,33 @@ AccordionItem.displayName = "AccordionItem";
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, disabled, ...props }, ref) => (
   <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger asChild ref={ref} {...props}>
+    <AccordionPrimitive.Trigger
+      disabled={disabled}
+      asChild
+      ref={ref}
+      {...props}
+    >
       <div
         className={cn(
           "flex flex-1 cursor-pointer items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
-          className
+          className,
         )}
       >
         {children}
-        <ChevronDownIcon className="h-4 w-4 font-bold text-primary transition-transform duration-200" />
+        <ShadTooltip
+          styleClasses="z-50"
+          content={disabled ? "Empty" : ""}
+          side="top"
+        >
+          <ChevronDownIcon
+            className={cn(
+              "h-4 w-4 font-bold transition-transform duration-200",
+              disabled ? "text-muted-foreground" : "text-primary",
+            )}
+          />
+        </ShadTooltip>
       </div>
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
@@ -47,7 +64,7 @@ const AccordionContent = React.forwardRef<
     ref={ref}
     className={cn(
       "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-      className
+      className,
     )}
     {...props}
   >

src/frontend/src/components/ui/alert.tsx

@@ -15,7 +15,7 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
 
 const Alert = React.forwardRef<

src/frontend/src/components/ui/button.tsx

@@ -2,9 +2,10 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "../../utils/utils";
+import ForwardedIconComponent from "../genericIconComponent";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none  ring-offset-background",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none  ring-offset-background",
   {
     variants: {
       variant: {
@@ -19,6 +20,7 @@ const buttonVariants = cva(
           "border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "underline-offset-4 hover:underline text-primary",
+        none: "",
       },
       size: {
         default: "h-10 py-2 px-4",
@@ -26,19 +28,21 @@ const buttonVariants = cva(
         xs: "py-0.5 px-3 rounded-md",
         lg: "h-11 px-8 rounded-md",
         icon: "py-1 px-1 rounded-md",
+        none: "",
       },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  loading?: boolean;
 }
 
 function toTitleCase(text: string) {
@@ -49,21 +53,49 @@ function toTitleCase(text: string) {
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
+  (
+    {
+      className,
+      variant,
+      size,
+      loading,
+      disabled,
+      asChild = false,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
     const Comp = asChild ? Slot : "button";
     let newChildren = children;
     if (typeof children === "string") {
       newChildren = toTitleCase(children);
     }
     return (
+      <>
         <Comp
           className={cn(buttonVariants({ variant, size, className }))}
+          disabled={loading || disabled}
           ref={ref}
-        children={newChildren}
           {...props}
+        >
+          {loading ? (
+            <span className="relative">
+              <span className="invisible">{newChildren}</span>
+              <span className="absolute inset-0 flex items-center justify-center">
+                <ForwardedIconComponent
+                  name={"Loader2"}
+                  className={"animate-spin"}
                 />
+              </span>
+            </span>
+          ) : (
+            newChildren
+          )}
+        </Comp>
+      </>
     );
-  }
+  },
 );
 Button.displayName = "Button";
 

src/frontend/src/components/ui/card.tsx

@@ -8,8 +8,8 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "flex flex-col justify-between rounded-lg border bg-muted text-card-foreground shadow-sm transition-all hover:shadow-lg",
+      "flex flex-col justify-between rounded-lg border bg-muted text-card-foreground shadow-sm transition-all",
-      className
+      className,
     )}
     {...props}
   />
@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-base font-semibold leading-tight tracking-tight",
-      className
+      className,
     )}
     {...props}
   />

src/frontend/src/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
     ref={ref}
     className={cn(
       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
+      className,
     )}
     {...props}
   >
@@ -37,7 +37,7 @@ const CheckBoxDiv = ({
     className={cn(
       className,
       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      checked ? "bg-primary text-primary-foreground" : ""
+      checked ? "bg-primary text-primary-foreground" : "",
     )}
   >
     {checked && (

src/frontend/src/components/ui/custom-accordion.tsx

@@ -24,7 +24,7 @@ const AccordionTrigger = React.forwardRef<
       <div
         className={cn(
           " flex flex-1 cursor-pointer items-center justify-between border-[1px] py-2 text-sm font-medium data-[state=closed]:rounded-md data-[state=open]:rounded-t-md data-[state=open]:border-b-0 data-[state=open]:bg-muted [&[data-state=open]>svg]:rotate-180",
-          className
+          className,
         )}
       >
         {children}
@@ -43,7 +43,7 @@ const AccordionContent = React.forwardRef<
     ref={ref}
     className={cn(
       "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden border-[1px] text-sm data-[state=open]:rounded-b-md data-[state=open]:border-t-0 data-[state=open]:bg-muted",
-      className
+      className,
     )}
     {...props}
   >

src/frontend/src/components/ui/form.tsx

@@ -16,18 +16,18 @@ const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
   name: TName;
 };
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
+  {} as FormFieldContextValue,
 );
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -66,7 +66,7 @@ type FormItemContextValue = {
 };
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
+  {} as FormItemContextValue,
 );
 
 const FormItem = React.forwardRef<

src/frontend/src/components/ui/tooltip.tsx

@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-        className
+        className,
       )}
       {...props}
     />
@@ -28,4 +28,26 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+const TooltipContentWithoutPortal = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContentWithoutPortal.displayName = TooltipPrimitive.Content.displayName;
+
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipContentWithoutPortal,
+  TooltipProvider,
+  TooltipTrigger,
+};

src/frontend/src/constants/constants.ts

@@ -590,6 +590,7 @@ export const CONTROL_PATCH_USER_STATE = {
   password: "",
   cnfPassword: "",
   gradient: "",
+  apikey: "",
 };
 
 export const CONTROL_LOGIN_STATE = {

src/frontend/src/controllers/API/api.tsx

@@ -2,11 +2,11 @@ import axios, { AxiosError, AxiosInstance } from "axios";
 import { useContext, useEffect } from "react";
 import { Cookies } from "react-cookie";
 import { renewAccessToken } from ".";
-import { AUTHORIZED_DUPLICATE_REQUESTS } from "../../constants/constants";
 import { BuildStatus } from "../../constants/enums";
 import { AuthContext } from "../../contexts/authContext";
 import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
+import { checkDuplicateRequestAndStoreRequest } from "./helpers/check-duplicate-requests";
 
 // Create a new Axios instance
 const api: AxiosInstance = axios.create({
@@ -81,28 +81,12 @@ function ApiInterceptor() {
     // Request interceptor to add access token to every request
     const requestInterceptor = api.interceptors.request.use(
       (config) => {
-        const lastUrl = localStorage.getItem("lastUrlCalled");
+        const checkRequest = checkDuplicateRequestAndStoreRequest(config);
-        const lastMethodCalled = localStorage.getItem("lastMethodCalled");
 
-        const isContained = AUTHORIZED_DUPLICATE_REQUESTS.some((request) =>
+        if (!checkRequest) {
-          config?.url!.includes(request),
+          return Promise.reject("Duplicate request.");
-        );
-
-        if (
-          config?.url === lastUrl &&
-          !isContained &&
-          lastMethodCalled === config.method
-        ) {
-          return Promise.reject("Duplicate request");
         }
 
-        localStorage.setItem("lastUrlCalled", config.url ?? "");
-        localStorage.setItem("lastMethodCalled", config.method ?? "");
-        localStorage.setItem(
-          "lastRequestData",
-          JSON.stringify(config.data) ?? "",
-        );
-
         const accessToken = cookies.get("access_token_lf");
         if (accessToken && !isAuthorizedURL(config?.url)) {
           config.headers["Authorization"] = `Bearer ${accessToken}`;

src/frontend/src/controllers/API/helpers/check-duplicate-requests.ts

@@ -0,0 +1,30 @@
+import { AUTHORIZED_DUPLICATE_REQUESTS } from "../../../constants/constants";
+
+export function checkDuplicateRequestAndStoreRequest(config) {
+  const lastUrl = localStorage.getItem("lastUrlCalled");
+  const lastMethodCalled = localStorage.getItem("lastMethodCalled");
+  const lastRequestTime = localStorage.getItem("lastRequestTime");
+
+  const currentTime = Date.now();
+
+  const isContained = AUTHORIZED_DUPLICATE_REQUESTS.some((request) =>
+    config?.url!.includes(request),
+  );
+
+  if (
+    config?.url === lastUrl &&
+    !isContained &&
+    lastMethodCalled === config.method &&
+    lastMethodCalled === "get" && // Assuming you want to check only for GET requests
+    lastRequestTime &&
+    currentTime - parseInt(lastRequestTime, 10) < 800
+  ) {
+    return false;
+  }
+
+  localStorage.setItem("lastUrlCalled", config.url ?? "");
+  localStorage.setItem("lastMethodCalled", config.method ?? "");
+  localStorage.setItem("lastRequestTime", currentTime.toString());
+
+  return true;
+}

src/frontend/src/controllers/API/index.ts

@@ -61,7 +61,7 @@ export async function sendAll(data: sendAllProps) {
 }
 
 export async function postValidateCode(
-  code: string
+  code: string,
 ): Promise<AxiosResponse<errorsTypeAPI>> {
   return await api.post(`${BASE_URL_API}validate/code`, { code });
 }
@@ -76,7 +76,7 @@ export async function postValidateCode(
 export async function postValidatePrompt(
   name: string,
   template: string,
-  frontend_node: APIClassType
+  frontend_node: APIClassType,
 ): Promise<AxiosResponse<PromptTypeAPI>> {
   return api.post(`${BASE_URL_API}validate/prompt`, {
     name,
@@ -149,7 +149,7 @@ export async function saveFlowToDatabase(newFlow: {
  * @throws Will throw an error if the update fails.
  */
 export async function updateFlowInDatabase(
-  updatedFlow: FlowType
+  updatedFlow: FlowType,
 ): Promise<FlowType> {
   try {
     const response = await api.patch(`${BASE_URL_API}flows/${updatedFlow.id}`, {
@@ -327,7 +327,7 @@ export async function getHealth() {
  *
  */
 export async function getBuildStatus(
-  flowId: string
+  flowId: string,
 ): Promise<AxiosResponse<BuildStatusTypeAPI>> {
   return await api.get(`${BASE_URL_API}build/${flowId}/status`);
 }
@@ -340,7 +340,7 @@ export async function getBuildStatus(
  *
  */
 export async function postBuildInit(
-  flow: FlowType
+  flow: FlowType,
 ): Promise<AxiosResponse<InitTypeAPI>> {
   return await api.post(`${BASE_URL_API}build/init/${flow.id}`, flow);
 }
@@ -356,7 +356,7 @@ export async function postBuildInit(
  */
 export async function uploadFile(
   file: File,
-  id: string
+  id: string,
 ): Promise<AxiosResponse<UploadFileTypeAPI>> {
   const formData = new FormData();
   formData.append("file", file);
@@ -365,7 +365,7 @@ export async function uploadFile(
 
 export async function postCustomComponent(
   code: string,
-  apiClass: APIClassType
+  apiClass: APIClassType,
 ): Promise<AxiosResponse<APIClassType>> {
   // let template = apiClass.template;
   return await api.post(`${BASE_URL_API}custom_component`, {
@@ -378,7 +378,7 @@ export async function postCustomComponentUpdate(
   code: string,
   template: APITemplateType,
   field: string,
-  field_value: any
+  field_value: any,
 ): Promise<AxiosResponse<APIClassType>> {
   return await api.post(`${BASE_URL_API}custom_component/update`, {
     code,
@@ -400,7 +400,7 @@ export async function onLogin(user: LoginType) {
         headers: {
           "Content-Type": "application/x-www-form-urlencoded",
         },
-      }
+      },
     );
 
     if (response.status === 200) {
@@ -462,11 +462,11 @@ export async function addUser(user: UserInputType): Promise<Array<Users>> {
 
 export async function getUsersPage(
   skip: number,
-  limit: number
+  limit: number,
 ): Promise<Array<Users>> {
   try {
     const res = await api.get(
-      `${BASE_URL_API}users/?skip=${skip}&limit=${limit}`
+      `${BASE_URL_API}users/?skip=${skip}&limit=${limit}`,
     );
     if (res.status === 200) {
       return res.data;
@@ -503,7 +503,7 @@ export async function resetPassword(user_id: string, user: resetPasswordType) {
   try {
     const res = await api.patch(
       `${BASE_URL_API}users/${user_id}/reset-password`,
-      user
+      user,
     );
     if (res.status === 200) {
       return res.data;
@@ -577,7 +577,7 @@ export async function saveFlowStore(
     last_tested_version?: string;
   },
   tags: string[],
-  publicFlow = false
+  publicFlow = false,
 ): Promise<FlowType> {
   try {
     const response = await api.post(`${BASE_URL_API}store/components/`, {
@@ -706,7 +706,7 @@ export async function postStoreComponents(component: Component) {
 export async function getComponent(component_id: string) {
   try {
     const res = await api.get(
-      `${BASE_URL_API}store/components/${component_id}`
+      `${BASE_URL_API}store/components/${component_id}`,
     );
     if (res.status === 200) {
       return res.data;
@@ -721,7 +721,7 @@ export async function searchComponent(
   page?: number | null,
   limit?: number | null,
   status?: string | null,
-  tags?: string[]
+  tags?: string[],
 ): Promise<StoreComponentResponse | undefined> {
   try {
     let url = `${BASE_URL_API}store/components/`;
@@ -833,7 +833,7 @@ export async function updateFlowStore(
   },
   tags: string[],
   publicFlow = false,
-  id: string
+  id: string,
 ): Promise<FlowType> {
   try {
     const response = await api.patch(`${BASE_URL_API}store/components/${id}`, {
@@ -917,7 +917,7 @@ export async function deleteGlobalVariable(id: string) {
 export async function updateGlobalVariable(
   name: string,
   value: string,
-  id: string
+  id: string,
 ) {
   try {
     const response = api.patch(`${BASE_URL_API}variables/${id}`, {
@@ -936,7 +936,7 @@ export async function getVerticesOrder(
   startNodeId?: string | null,
   stopNodeId?: string | null,
   nodes?: Node[],
-  Edges?: Edge[]
+  Edges?: Edge[],
 ): Promise<AxiosResponse<VerticesOrderTypeAPI>> {
   // nodeId is optional and is a query parameter
   // if nodeId is not provided, the API will return all vertices
@@ -956,19 +956,19 @@ export async function getVerticesOrder(
   return await api.post(
     `${BASE_URL_API}build/${flowId}/vertices`,
     data,
-    config
+    config,
   );
 }
 
 export async function postBuildVertex(
   flowId: string,
   vertexId: string,
-  input_value: string
+  input_value: string,
 ): Promise<AxiosResponse<VertexBuildTypeAPI>> {
   // input_value is optional and is a query parameter
   return await api.post(
     `${BASE_URL_API}build/${flowId}/vertices/${vertexId}`,
-    input_value ? { inputs: { input_value: input_value } } : undefined
+    input_value ? { inputs: { input_value: input_value } } : undefined,
   );
 }
 
@@ -992,7 +992,7 @@ export async function getFlowPool({
 }
 
 export async function deleteFlowPool(
-  flowId: string
+  flowId: string,
 ): Promise<AxiosResponse<any>> {
   const config = {};
   config["params"] = { flow_id: flowId };
@@ -1000,7 +1000,7 @@ export async function deleteFlowPool(
 }
 
 export async function multipleDeleteFlowsComponents(
-  flowIds: string[]
+  flowIds: string[],
 ): Promise<AxiosResponse<any>> {
   return await api.post(`${BASE_URL_API}flows/multiple_delete/`, {
     flow_ids: flowIds,
@@ -1010,7 +1010,7 @@ export async function multipleDeleteFlowsComponents(
 export async function getTransactionTable(
   id: string,
   mode: "intersection" | "union",
-  params = {}
+  params = {},
 ): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
   const config = {};
   config["params"] = { flow_id: id };
@@ -1025,7 +1025,7 @@ export async function getTransactionTable(
 export async function getMessagesTable(
   id: string,
   mode: "intersection" | "union",
-  params = {}
+  params = {},
 ): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
   const config = {};
   config["params"] = { flow_id: id };

src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx

@@ -89,7 +89,7 @@ export default function ParameterComponent({
     debouncedHandleUpdateValues,
     setNode,
     renderTooltips,
-    setIsLoading
+    setIsLoading,
   );
 
   const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@@ -98,7 +98,7 @@ export default function ParameterComponent({
     takeSnapshot,
     setNode,
     updateNodeInternals,
-    renderTooltips
+    renderTooltips,
   );
 
   const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@@ -107,7 +107,7 @@ export default function ParameterComponent({
   let disabled =
     edges.some(
       (edge) =>
-        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
+        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
     ) ?? false;
 
   const handleRefreshButtonPress = async (name, data) => {
@@ -120,12 +120,12 @@ export default function ParameterComponent({
     handleUpdateValues,
     setNode,
     renderTooltips,
-    setIsLoading
+    setIsLoading,
   );
 
   const handleOnNewValue = async (
     newValue: string | string[] | boolean | Object[],
-    skipSnapshot: boolean | undefined = false
+    skipSnapshot: boolean | undefined = false,
   ): Promise<void> => {
     handleOnNewValueHook(newValue, skipSnapshot);
   };
@@ -207,7 +207,7 @@ export default function ParameterComponent({
               className={classNames(
                 left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
                 "h-3 w-3 rounded-full border-2 bg-background",
-                !showNode ? "mt-0" : ""
+                !showNode ? "mt-0" : "",
               )}
               style={{
                 borderColor: color ?? nodeColors.unknown,
@@ -296,7 +296,7 @@ export default function ParameterComponent({
                   }
                   className={classNames(
                     left ? "-ml-0.5" : "-mr-0.5",
-                    "h-3 w-3 rounded-full border-2 bg-background"
+                    "h-3 w-3 rounded-full border-2 bg-background",
                   )}
                   style={{ borderColor: color ?? nodeColors.unknown }}
                   onClick={() => setFilterEdge(groupedEdge.current)}

src/frontend/src/customNodes/genericNode/components/tooltipRenderComponent/index.tsx

@@ -24,7 +24,7 @@ const TooltipRenderComponent = ({ item, index, left }) => {
       <span
         key={index}
         className={classNames(
-          index > 0 ? "mt-2 flex items-center" : "mt-3 flex items-center"
+          index > 0 ? "mt-2 flex items-center" : "mt-3 flex items-center",
         )}
       >
         <div

src/frontend/src/customNodes/genericNode/index.tsx

@@ -77,10 +77,10 @@ export default function GenericNode({
     // first check if data.type in NATIVE_CATEGORIES
     // if not return
     if (!data.node?.template?.code?.value) return;
-    const thisNodeTemplate = templates[data.type].template;
+    const thisNodeTemplate = templates[data.type]?.template;
     // if the template does not have a code key
     // return
-    if (!thisNodeTemplate.code) return;
+    if (!thisNodeTemplate?.code) return;
     const currentCode = thisNodeTemplate.code?.value;
     const thisNodesCode = data.node!.template?.code?.value;
     const componentsToIgnore = ["Custom Component"];
@@ -416,6 +416,7 @@ export default function GenericNode({
                 "generic-node-title-arrangement rounded-full" +
                 (!showNode && " justify-center ")
               }
+              data-testid="generic-node-title-arrangement"
             >
               {iconNodeRender()}
               {showNode && (
@@ -452,7 +453,7 @@ export default function GenericNode({
                     <div className="group flex items-start gap-1.5">
                       <ShadTooltip content={data.node?.display_name}>
                         <div
-                          onDoubleClick={(event) => {
+                          onClick={(event) => {
                             if (nameEditable) {
                               setInputName(true);
                             }
@@ -466,21 +467,6 @@ export default function GenericNode({
                           {data.node?.display_name}
                         </div>
                       </ShadTooltip>
-                      {nameEditable && (
-                        <div
-                          onClick={(event) => {
-                            setInputName(true);
-                            takeSnapshot();
-                            event.stopPropagation();
-                            event.preventDefault();
-                          }}
-                        >
-                          <IconComponent
-                            name="PencilLine"
-                            className="hidden h-3 w-3 text-status-blue group-hover:block"
-                          />
-                        </div>
-                      )}
                     </div>
                   )}
                 </div>
@@ -718,14 +704,14 @@ export default function GenericNode({
               ) : (
                 <div
                   className={cn(
-                    "generic-node-desc-text truncate-multiline word-break-break-word",
+                    "generic-node-desc-text cursor-text truncate-multiline word-break-break-word",
                     (data.node?.description === "" ||
                       !data.node?.description) &&
                       nameEditable
                       ? "font-light italic"
                       : ""
                   )}
-                  onDoubleClick={(e) => {
+                  onClick={(e) => {
                     setInputDescription(true);
                     takeSnapshot();
                   }}

src/frontend/src/customNodes/hooks/use-fetch-data-on-mount.tsx

@@ -40,7 +40,7 @@ const useFetchDataOnMount = (
 
           setErrorData({
             title: "Error while updating the Component",
-            list: [responseError.response.data.detail ?? "Unknown error"],
+            list: [responseError?.response?.data?.detail ?? "Unknown error"],
           });
         }
         setIsLoading(false);

src/frontend/src/customNodes/hooks/use-handle-new-value.tsx

@@ -44,7 +44,9 @@ const useHandleOnNewValue = (
         let responseError = error as ResponseErrorTypeAPI;
         setErrorData({
           title: "Error while updating the Component",
-          list: [responseError.response.data.detail.error ?? "Unknown error"],
+          list: [
+            responseError?.response?.data?.detail.error ?? "Unknown error",
+          ],
         });
       }
       setIsLoading(false);

src/frontend/src/customNodes/hooks/use-handle-node-class.tsx

@@ -6,7 +6,7 @@ const useHandleNodeClass = (
   takeSnapshot,
   setNode,
   updateNodeInternals,
-  renderTooltips
+  renderTooltips,
 ) => {
   const handleNodeClass = (newNodeClass, code) => {
     if (!data.node) return;

src/frontend/src/customNodes/hooks/use-handle-refresh-buttons.tsx

@@ -26,7 +26,7 @@ const useHandleRefreshButtonPress = (setIsLoading, setNode, renderTooltips) => {
 
       setErrorData({
         title: "Error while updating the Component",
-        list: [responseError.response.data.detail ?? "Unknown error"],
+        list: [responseError?.response?.data?.detail ?? "Unknown error"],
       });
     }
     setIsLoading(false);

src/frontend/src/modals/IOModal/index.tsx

@@ -3,7 +3,6 @@ import AccordionComponent from "../../components/accordionComponent";
 import IconComponent from "../../components/genericIconComponent";
 import ShadTooltip from "../../components/shadTooltipComponent";
 import { Badge } from "../../components/ui/badge";
-import { Button } from "../../components/ui/button";
 import {
   Tabs,
   TabsContent,
@@ -92,6 +91,7 @@ export default function IOModal({
       await buildFlow({
         input_value: chatValue,
         startNodeId: chatInput?.id,
+        silent: true,
       }).catch((err) => {
         console.error(err);
         setLockChat(false);
@@ -121,6 +121,7 @@ export default function IOModal({
       open={open}
       setOpen={setOpen}
       disable={disable}
+      onSubmit={() => sendMessage(1)}
     >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
@@ -253,6 +254,10 @@ export default function IOModal({
                             key={index}
                           >
                             <AccordionComponent
+                              disabled={
+                                node.data.node!.template["input_value"]
+                                  ?.value === ""
+                              }
                               trigger={
                                 <div className="file-component-badge-div">
                                   <ShadTooltip
@@ -371,13 +376,10 @@ export default function IOModal({
         </div>
       </BaseModal.Content>
       {!haveChat ? (
-        <BaseModal.Footer>
+        <BaseModal.Footer
-          <div className="flex w-full justify-end  pt-2">
+          submit={{
-            <Button
+            label: "Run Flow",
-              variant={"outline"}
+            icon: (
-              className="flex gap-2 px-3"
-              onClick={() => sendMessage(1)}
-            >
               <IconComponent
                 name={isBuilding ? "Loader2" : "Zap"}
                 className={cn(
@@ -387,10 +389,9 @@ export default function IOModal({
                     : "fill-current text-medium-indigo",
                 )}
               />
-              Run Flow
+            ),
-            </Button>
+          }}
-          </div>
+        />
-        </BaseModal.Footer>
       ) : (
         <></>
       )}

src/frontend/src/modals/apiModal/utils/get-curl-code.tsx

@@ -8,7 +8,7 @@ export function getCurlRunCode(
   flowId: string,
   isAuth: boolean,
   tweaksBuildedObject,
-  endpointName?: string
+  endpointName?: string,
 ): string {
   const tweaksObject = tweaksBuildedObject[0];
   // show the endpoint name in the curl command if it exists

src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx

@@ -8,7 +8,7 @@
 export default function getPythonApiCode(
   flowId: string,
   isAuth: boolean,
-  tweaksBuildedObject
+  tweaksBuildedObject,
 ): string {
   const tweaksObject = tweaksBuildedObject[0];
   return `import requests

src/frontend/src/modals/apiModal/utils/get-python-code.tsx

@@ -6,7 +6,7 @@
  */
 export default function getPythonCode(
   flowName: string,
-  tweaksBuildedObject
+  tweaksBuildedObject,
 ): string {
   const tweaksObject = tweaksBuildedObject[0];
 

src/frontend/src/modals/apiModal/utils/tabs-array.tsx

@@ -1,7 +1,7 @@
 export function createTabsArray(
   codes,
   includeWebhookCurl = false,
-  includeTweaks = false
+  includeTweaks = false,
 ) {
   const tabs = [
     {

src/frontend/src/modals/apiModal/views/index.tsx

@@ -35,7 +35,7 @@ const ApiModal = forwardRef(
       flow: FlowType;
       children: ReactNode;
     },
-    ref
+    ref,
   ) => {
     const tweak = useTweaksStore((state) => state.tweak);
     const addTweaks = useTweaksStore((state) => state.setTweak);
@@ -51,12 +51,12 @@ const ApiModal = forwardRef(
       flow?.id,
       autoLogin,
       tweak,
-      flow?.endpoint_name
+      flow?.endpoint_name,
     );
     const curl_webhook_code = getCurlWebhookCode(
       flow?.id,
       autoLogin,
-      flow?.endpoint_name
+      flow?.endpoint_name,
     );
     const pythonCode = getPythonCode(flow?.name, tweak);
     const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
@@ -72,7 +72,7 @@ const ApiModal = forwardRef(
       pythonCode,
     ];
     const [tabs, setTabs] = useState(
-      createTabsArray(codesArray, includeWebhook)
+      createTabsArray(codesArray, includeWebhook),
     );
 
     const canShowTweaks =
@@ -121,7 +121,7 @@ const ApiModal = forwardRef(
               buildTweakObject(
                 nodeId,
                 element.data.node.template[templateField].value,
-                element.data.node.template[templateField]
+                element.data.node.template[templateField],
               );
             }
           });
@@ -138,7 +138,7 @@ const ApiModal = forwardRef(
     async function buildTweakObject(
       tw: string,
       changes: string | string[] | boolean | number | Object[] | Object,
-      template: TemplateVariableType
+      template: TemplateVariableType,
     ) {
       changes = getChangesType(changes, template);
 
@@ -180,7 +180,7 @@ const ApiModal = forwardRef(
         flow?.id,
         autoLogin,
         cloneTweak,
-        flow?.endpoint_name
+        flow?.endpoint_name,
       );
       const pythonCode = getPythonCode(flow?.name, cloneTweak);
       const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
@@ -224,7 +224,7 @@ const ApiModal = forwardRef(
         </BaseModal.Content>
       </BaseModal>
     );
-  }
+  },
 );
 
 export default ApiModal;

src/frontend/src/modals/baseModal/helpers/switch-case-size.ts

@@ -0,0 +1,67 @@
+export const switchCaseModalSize = (size: string) => {
+  let minWidth: string;
+  let height: string;
+  switch (size) {
+    case "x-small":
+      minWidth = "min-w-[20vw]";
+      height = "h-full";
+      break;
+    case "smaller":
+      minWidth = "min-w-[40vw]";
+      height = "h-[11rem]";
+      break;
+    case "smaller-h-full":
+      minWidth = "min-w-[40vw]";
+      height = "h-full";
+      break;
+    case "small":
+      minWidth = "min-w-[40vw]";
+      height = "h-[40vh]";
+      break;
+    case "small-h-full":
+      minWidth = "min-w-[40vw]";
+      height = "h-full";
+      break;
+    case "medium":
+      minWidth = "min-w-[60vw]";
+      height = "h-[60vh]";
+      break;
+    case "medium-h-full":
+      minWidth = "min-w-[60vw]";
+      height = "h-full";
+
+      break;
+    case "large":
+      minWidth = "min-w-[85vw]";
+      height = "h-[80vh]";
+      break;
+    case "three-cards":
+      minWidth = "min-w-[1066px]";
+      height = "h-fit";
+      break;
+    case "large-thin":
+      minWidth = "min-w-[65vw]";
+      height = "h-[80vh]";
+      break;
+
+    case "md-thin":
+      minWidth = "min-w-[85vw]";
+      height = "h-[70vh]";
+      break;
+
+    case "sm-thin":
+      minWidth = "min-w-[65vw]";
+      height = "h-[70vh]";
+      break;
+
+    case "large-h-full":
+      minWidth = "min-w-[80vw]";
+      height = "h-full";
+      break;
+    default:
+      minWidth = "min-w-[80vw]";
+      height = "h-[80vh]";
+      break;
+  }
+  return { minWidth, height };
+};

src/frontend/src/modals/baseModal/index.tsx

@@ -15,8 +15,11 @@ import {
   DialogContent as ModalContent,
 } from "../../components/ui/dialog-with-no-close";
 
+import { DialogClose } from "@radix-ui/react-dialog";
+import { Button } from "../../components/ui/button";
 import { modalHeaderType } from "../../types/components";
 import { cn } from "../../utils/utils";
+import { switchCaseModalSize } from "./helpers/switch-case-size";
 
 type ContentProps = { children: ReactNode };
 type HeaderProps = { children: ReactNode; description: string };
@@ -61,8 +64,38 @@ const Header: React.FC<{ children: ReactNode; description: string | null }> = ({
   );
 };
 
-const Footer: React.FC<{ children: ReactNode }> = ({ children }) => {
+const Footer: React.FC<{
-  return <>{children}</>;
+  children?: ReactNode;
+  submit?: {
+    label: string;
+    icon?: ReactNode;
+    loading?: boolean;
+    disabled?: boolean;
+    dataTestId?: string;
+  };
+}> = ({ children, submit }) => {
+  return submit ? (
+    <div className="flex w-full items-center justify-between">
+      {children ?? <div />}
+      <div className="flex items-center gap-3">
+        <DialogClose asChild>
+          <Button variant="outline" type="button">
+            Cancel
+          </Button>
+        </DialogClose>
+        <Button
+          data-testid={submit.dataTestId}
+          type="submit"
+          loading={submit.loading}
+        >
+          {submit.icon && submit.icon}
+          {submit.label}
+        </Button>
+      </div>
+    </div>
+  ) : (
+    <>{children && children}</>
+  );
 };
 interface BaseModalProps {
   children: [
@@ -91,6 +124,7 @@ interface BaseModalProps {
   disable?: boolean;
   onChangeOpenModal?: (open?: boolean) => void;
   type?: "modal" | "dialog";
+  onSubmit?: () => void;
 }
 function BaseModal({
   open,
@@ -99,6 +133,7 @@ function BaseModal({
   size = "large",
   onChangeOpenModal,
   type = "dialog",
+  onSubmit,
 }: BaseModalProps) {
   const headerChild = React.Children.toArray(children).find(
     (child) => (child as React.ReactElement).type === Header,
@@ -113,71 +148,7 @@ function BaseModal({
     (child) => (child as React.ReactElement).type === Footer,
   );
 
-  let minWidth: string;
+  let { minWidth, height } = switchCaseModalSize(size);
-  let height: string;
-
-  switch (size) {
-    case "x-small":
-      minWidth = "min-w-[20vw]";
-      height = "h-full";
-      break;
-    case "smaller":
-      minWidth = "min-w-[40vw]";
-      height = "h-[11rem]";
-      break;
-    case "smaller-h-full":
-      minWidth = "min-w-[40vw]";
-      height = "h-full";
-      break;
-    case "small":
-      minWidth = "min-w-[40vw]";
-      height = "h-[40vh]";
-      break;
-    case "small-h-full":
-      minWidth = "min-w-[40vw]";
-      height = "h-full";
-      break;
-    case "medium":
-      minWidth = "min-w-[60vw]";
-      height = "h-[60vh]";
-      break;
-    case "medium-h-full":
-      minWidth = "min-w-[60vw]";
-      height = "h-full";
-
-      break;
-    case "large":
-      minWidth = "min-w-[85vw]";
-      height = "h-[80vh]";
-      break;
-    case "three-cards":
-      minWidth = "min-w-[1066px]";
-      height = "h-fit";
-      break;
-    case "large-thin":
-      minWidth = "min-w-[65vw]";
-      height = "h-[80vh]";
-      break;
-
-    case "md-thin":
-      minWidth = "min-w-[85vw]";
-      height = "h-[70vh]";
-      break;
-
-    case "sm-thin":
-      minWidth = "min-w-[65vw]";
-      height = "h-[70vh]";
-      break;
-
-    case "large-h-full":
-      minWidth = "min-w-[80vw]";
-      height = "h-full";
-      break;
-    default:
-      minWidth = "min-w-[80vw]";
-      height = "h-[80vh]";
-      break;
-  }
 
   useEffect(() => {
     if (onChangeOpenModal) {
@@ -212,6 +183,14 @@ function BaseModal({
             <div className="truncate-doubleline word-break-break-word">
               {headerChild}
             </div>
+            {onSubmit ? (
+              <form
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  onSubmit();
+                }}
+                className="flex flex-col gap-6"
+              >
                 <div
                   className={`flex flex-col ${height} w-full transition-all duration-300`}
                 >
@@ -220,6 +199,19 @@ function BaseModal({
                 {ContentFooter && (
                   <div className="flex flex-row-reverse">{ContentFooter}</div>
                 )}
+              </form>
+            ) : (
+              <>
+                <div
+                  className={`flex flex-col ${height} w-full transition-all duration-300`}
+                >
+                  {ContentChild}
+                </div>
+                {ContentFooter && (
+                  <div className="flex flex-row-reverse">{ContentFooter}</div>
+                )}
+              </>
+            )}
           </DialogContent>
         </Dialog>
       )}

src/frontend/src/modals/deleteConfirmationModal/index.tsx

@@ -59,7 +59,7 @@ export default function DeleteConfirmationModal({
           <DialogClose asChild>
             <Button
               onClick={(e) => e.stopPropagation()}
-              className="mr-3"
+              className="mr-1"
               variant="outline"
             >
               Cancel

src/frontend/src/modals/editNodeModal/index.tsx

@@ -15,7 +15,6 @@ import ShadTooltip from "../../components/shadTooltipComponent";
 import TextAreaComponent from "../../components/textAreaComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
 import { Badge } from "../../components/ui/badge";
-import { Button } from "../../components/ui/button";
 import {
   Table,
   TableBody,
@@ -102,6 +101,16 @@ const EditNodeModal = forwardRef(
         onChangeOpenModal={(open) => {
           setMyData(data);
         }}
+        onSubmit={() => {
+          setNode(data.id, (old) => ({
+            ...old,
+            data: {
+              ...old.data,
+              node: myData.node,
+            },
+          }));
+          setOpen(false);
+        }}
       >
         <BaseModal.Trigger>
           <></>
@@ -134,6 +143,7 @@ const EditNodeModal = forwardRef(
                     <TableHeader className="edit-node-modal-table-header">
                       <TableRow className="">
                         <TableHead className="h-7 text-center">PARAM</TableHead>
+                        <TableHead className="h-7 text-center">DESC</TableHead>
                         <TableHead className="h-7 p-0 text-center">
                           VALUE
                         </TableHead>
@@ -188,11 +198,17 @@ const EditNodeModal = forwardRef(
                             >
                               <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
                                 <ShadTooltip
+                                  styleClasses="z-50"
                                   content={
                                     myData.node?.template[templateParam].proxy
                                       ? myData.node?.template[templateParam]
                                           .proxy?.id
-                                      : null
+                                      : myData.node?.template[templateParam]
+                                          .display_name
+                                      ? myData.node!.template[templateParam]
+                                          .display_name
+                                      : myData.node?.template[templateParam]
+                                          .name
                                   }
                                 >
                                   <span>
@@ -205,6 +221,20 @@ const EditNodeModal = forwardRef(
                                   </span>
                                 </ShadTooltip>
                               </TableCell>
+                              <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
+                                <ShadTooltip
+                                  styleClasses="z-50"
+                                  content={
+                                    data.node?.template[templateParam]?.info ??
+                                    null
+                                  }
+                                >
+                                  <span>
+                                    {data.node?.template[templateParam]?.info ??
+                                      ""}
+                                  </span>
+                                </ShadTooltip>
+                              </TableCell>
                               <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
                                 <Case
                                   condition={
@@ -610,26 +640,7 @@ const EditNodeModal = forwardRef(
           </div>
         </BaseModal.Content>
 
-        <BaseModal.Footer>
+        <BaseModal.Footer submit={{ label: "Save Changes" }} />
-          <Button
-            data-test-id="saveChangesBtn"
-            id={"saveChangesBtn"}
-            className="mt-3"
-            onClick={() => {
-              setNode(data.id, (old) => ({
-                ...old,
-                data: {
-                  ...old.data,
-                  node: myData.node,
-                },
-              }));
-              setOpen(false);
-            }}
-            type="submit"
-          >
-            Save Changes
-          </Button>
-        </BaseModal.Footer>
       </BaseModal>
     );
   }

src/frontend/src/modals/exportModal/index.tsx

@@ -1,7 +1,6 @@
 import { ReactNode, forwardRef, useEffect, useState } from "react";
 import EditFlowSettings from "../../components/editFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
-import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { API_WARNING_NOTICE_ALERT } from "../../constants/alerts_constants";
 import {
@@ -19,7 +18,7 @@ const ExportModal = forwardRef(
   (props: { children: ReactNode }, ref): JSX.Element => {
     const version = useDarkStore((state) => state.version);
     const setNoticeData = useAlertStore((state) => state.setNoticeData);
-    const [checked, setChecked] = useState(true);
+    const [checked, setChecked] = useState(false);
     const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
     useEffect(() => {
       setName(currentFlow!.name);
@@ -30,7 +29,43 @@ const ExportModal = forwardRef(
     const [open, setOpen] = useState(false);
 
     return (
-      <BaseModal size="smaller-h-full" open={open} setOpen={setOpen}>
+      <BaseModal
+        size="smaller-h-full"
+        open={open}
+        setOpen={setOpen}
+        onSubmit={() => {
+          if (checked) {
+            downloadFlow(
+              {
+                id: currentFlow!.id,
+                data: currentFlow!.data!,
+                description,
+                name,
+                last_tested_version: version,
+                is_component: false,
+              },
+              name!,
+              description,
+            );
+            setNoticeData({
+              title: API_WARNING_NOTICE_ALERT,
+            });
+          } else
+            downloadFlow(
+              removeApiKeys({
+                id: currentFlow!.id,
+                data: currentFlow!.data!,
+                description,
+                name,
+                last_tested_version: version,
+                is_component: false,
+              }),
+              name!,
+              description,
+            );
+          setOpen(false);
+        }}
+      >
         <BaseModal.Trigger asChild>{props.children}</BaseModal.Trigger>
         <BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
           <span className="pr-2">Export</span>
@@ -64,47 +99,9 @@ const ExportModal = forwardRef(
           </span>
         </BaseModal.Content>
 
-        <BaseModal.Footer>
+        <BaseModal.Footer submit={{ label: "Download Flow" }} />
-          <Button
-            onClick={() => {
-              if (checked) {
-                downloadFlow(
-                  {
-                    id: currentFlow!.id,
-                    data: currentFlow!.data!,
-                    description,
-                    name,
-                    last_tested_version: version,
-                    is_component: false,
-                  },
-                  name!,
-                  description
-                );
-                setNoticeData({
-                  title: API_WARNING_NOTICE_ALERT,
-                });
-              } else
-                downloadFlow(
-                  removeApiKeys({
-                    id: currentFlow!.id,
-                    data: currentFlow!.data!,
-                    description,
-                    name,
-                    last_tested_version: version,
-                    is_component: false,
-                  }),
-                  name!,
-                  description
-                );
-              setOpen(false);
-            }}
-            type="submit"
-          >
-            Download Flow
-          </Button>
-        </BaseModal.Footer>
       </BaseModal>
     );
-  }
+  },
 );
 export default ExportModal;

src/frontend/src/modals/flowLogsModal/index.tsx

@@ -16,41 +16,15 @@ export default function FlowLogsModal({
   open,
   setOpen,
 }: FlowSettingsPropsType): JSX.Element {
-  const saveFlow = useFlowsManagerStore((state) => state.saveFlow);
   const nodes = useFlowStore((state) => state.nodes);
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
-  const flows = useFlowsManagerStore((state) => state.flows);
   const setNoticeData = useAlertStore((state) => state.setNoticeData);
 
-  useEffect(() => {
-    setName(currentFlow!.name);
-    setDescription(currentFlow!.description);
-  }, [currentFlow!.name, currentFlow!.description, open]);
-
-  const [name, setName] = useState(currentFlow!.name);
-  const [description, setDescription] = useState(currentFlow!.description);
   const [columns, setColumns] = useState<Array<ColDef | ColGroupDef>>([]);
   const [rows, setRows] = useState<any>([]);
   const [activeTab, setActiveTab] = useState("Executions");
   const noticed = useRef(false);
 
-  function handleClick(): void {
-    currentFlow!.name = name;
-    currentFlow!.description = description;
-    saveFlow(currentFlow!)
-      ?.then(() => {
-        setOpen(false);
-      })
-      .catch((err) => {
-        useAlertStore.getState().setErrorData({
-          title: "Error while saving changes",
-          list: [(err as AxiosError).response?.data.detail ?? ""],
-        });
-        console.error(err);
-      });
-  }
-
   useEffect(() => {
     if (activeTab === "Executions") {
       getTransactionTable(currentFlowId, "union").then((data) => {
@@ -72,7 +46,7 @@ export default function FlowLogsModal({
         .some((template) => template["stream"] && template["stream"].value);
       console.log(
         haStream,
-        nodes.map((nodes) => (nodes.data as NodeDataType).node!.template)
+        nodes.map((nodes) => (nodes.data as NodeDataType).node!.template),
       );
       if (haStream) {
         setNoticeData({
@@ -86,16 +60,6 @@ export default function FlowLogsModal({
     }
   }, [open, activeTab]);
 
-  const [nameLists, setNameList] = useState<string[]>([]);
-
-  useEffect(() => {
-    const tempNameList: string[] = [];
-    flows.forEach((flow: FlowType) => {
-      if ((flow.is_component ?? false) === false) tempNameList.push(flow.name);
-    });
-    setNameList(tempNameList.filter((name) => name !== currentFlow!.name));
-  }, [flows]);
-
   return (
     <BaseModal open={open} setOpen={setOpen} size="large">
       <BaseModal.Header description="Inspect component executions and monitor sent messages in the playground.">

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import EditFlowSettings from "../../components/editFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
-import { Button } from "../../components/ui/button";
 import { SETTINGS_DIALOG_SUBTITLE } from "../../constants/constants";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
@@ -24,19 +23,21 @@ export default function FlowSettingsModal({
   const [name, setName] = useState(currentFlow!.name);
   const [description, setDescription] = useState(currentFlow!.description);
   const [endpoint_name, setEndpointName] = useState(currentFlow!.endpoint_name);
-
+  const [isSaving, setIsSaving] = useState(false);
   function handleClick(): void {
+    setIsSaving(true);
     currentFlow!.name = name;
     currentFlow!.description = description;
     currentFlow!.endpoint_name = endpoint_name;
     saveFlow(currentFlow!)
       ?.then(() => {
         setOpen(false);
+        setIsSaving(false);
       })
       .catch((err) => {
         useAlertStore.getState().setErrorData({
           title: "Error while saving changes",
-          list: [(err as AxiosError).response?.data.detail ?? ""],
+          list: [err?.response?.data.detail ?? ""],
         });
         console.error(err);
       });
@@ -53,7 +54,12 @@ export default function FlowSettingsModal({
   }, [flows]);
 
   return (
-    <BaseModal open={open} setOpen={setOpen} size="smaller-h-full">
+    <BaseModal
+      open={open}
+      setOpen={setOpen}
+      size="smaller-h-full"
+      onSubmit={handleClick}
+    >
       <BaseModal.Header description={SETTINGS_DIALOG_SUBTITLE}>
         <span className="pr-2">Settings</span>
         <IconComponent name="Settings2" className="mr-2 h-4 w-4 " />
@@ -70,15 +76,14 @@ export default function FlowSettingsModal({
         />
       </BaseModal.Content>
 
-      <BaseModal.Footer>
+      <BaseModal.Footer
-        <Button
+        submit={{
-          disabled={nameLists.includes(name) && name !== currentFlow!.name}
+          label: "Save",
-          onClick={handleClick}
+          disabled: nameLists.includes(name) && name !== currentFlow!.name,
-          type="submit"
+          dataTestId: "save-flow-settings",
-        >
+          loading: isSaving,
-          Save
+        }}
-        </Button>
+      />
-      </BaseModal.Footer>
     </BaseModal>
   );
 }

src/frontend/src/modals/genericModal/index.tsx

@@ -83,7 +83,7 @@ export default function GenericModal({
     }
 
     const filteredWordsHighlight = matches.filter(
-      (word) => !invalid_chars.includes(word)
+      (word) => !invalid_chars.includes(word),
     );
 
     setWordsHighlight(filteredWordsHighlight);
@@ -134,7 +134,7 @@ export default function GenericModal({
         // to the first key of the custom_fields object
         if (field_name === "") {
           field_name = Array.isArray(
-            apiReturn.data?.frontend_node?.custom_fields?.[""]
+            apiReturn.data?.frontend_node?.custom_fields?.[""],
           )
             ? apiReturn.data?.frontend_node?.custom_fields?.[""][0] ?? ""
             : apiReturn.data?.frontend_node?.custom_fields?.[""] ?? "";
@@ -209,7 +209,7 @@ export default function GenericModal({
           <div
             className={classNames(
               !isEdit ? "rounded-lg border" : "",
-              "flex h-full w-full"
+              "flex h-full w-full",
             )}
           >
             {type === TypeModal.PROMPT && isEdit && !readonly ? (

src/frontend/src/modals/shareModal/index.tsx

@@ -1,4 +1,3 @@
-import { Loader2 } from "lucide-react";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 import EditFlowSettings from "../../components/editFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
@@ -202,6 +201,18 @@ export default function ShareModal({
         size="smaller-h-full"
         open={(!disabled && open) ?? internalOpen}
         setOpen={setOpen ?? internalSetOpen}
+        onSubmit={() => {
+          const isNameAvailable = !unavaliableNames.some(
+            (element) => element.name === name,
+          );
+
+          if (isNameAvailable) {
+            handleShareComponent();
+            (setOpen || internalSetOpen)(false);
+          } else {
+            setOpenConfirmationModal(true);
+          }
+        }}
       >
         <BaseModal.Trigger asChild>
           {children ? children : <></>}
@@ -250,8 +261,13 @@ export default function ShareModal({
           </span>
         </BaseModal.Content>
 
-        <BaseModal.Footer>
+        <BaseModal.Footer
-          <div className="flex w-full justify-between gap-2">
+          submit={{
+            label: `Share ${is_component ? " Component" : " Flow"}`,
+            loading: loadingNames,
+          }}
+        >
+          <>
             {!is_component && (
               <ExportModal>
                 <Button
@@ -281,37 +297,7 @@ export default function ShareModal({
                 Export
               </Button>
             )}
-            <Button
-              disabled={loadingNames}
-              type="button"
-              className={is_component ? "w-40" : "w-28"}
-              onClick={() => {
-                const isNameAvailable = !unavaliableNames.some(
-                  (element) => element.name === name,
-                );
-
-                if (isNameAvailable) {
-                  handleShareComponent();
-                  (setOpen || internalSetOpen)(false);
-                } else {
-                  setOpenConfirmationModal(true);
-                }
-              }}
-            >
-              {loadingNames ? (
-                <>
-                  <div className="center">
-                    <Loader2 className="m-auto h-4 w-4 animate-spin"></Loader2>
-                  </div>
           </>
-              ) : (
-                <>
-                  Share{" "}
-                  {!loadingNames && (!is_component ? "Flow" : "Component")}
-                </>
-              )}
-            </Button>
-          </div>
         </BaseModal.Footer>
       </BaseModal>
       <>{modalConfirmation}</>

src/frontend/src/modals/storeApiKeyModal/index.tsx

@@ -1,145 +0,0 @@
-import * as Form from "@radix-ui/react-form";
-import { useContext, useState } from "react";
-import IconComponent from "../../components/genericIconComponent";
-import { Button } from "../../components/ui/button";
-import { Input } from "../../components/ui/input";
-import {
-  API_ERROR_ALERT,
-  API_SUCCESS_ALERT,
-} from "../../constants/alerts_constants";
-import {
-  CREATE_API_KEY,
-  INSERT_API_KEY,
-  INVALID_API_KEY,
-  NO_API_KEY,
-} from "../../constants/constants";
-import { AuthContext } from "../../contexts/authContext";
-import { addApiKeyStore } from "../../controllers/API";
-import useAlertStore from "../../stores/alertStore";
-import { useStoreStore } from "../../stores/storeStore";
-import { StoreApiKeyType } from "../../types/components";
-import BaseModal from "../baseModal";
-
-export default function StoreApiKeyModal({
-  children,
-  disabled = false,
-}: StoreApiKeyType) {
-  if (disabled) return <>{children}</>;
-  const [open, setOpen] = useState(false);
-  const setSuccessData = useAlertStore((state) => state.setSuccessData);
-  const setErrorData = useAlertStore((state) => state.setErrorData);
-  const { storeApiKey } = useContext(AuthContext);
-  const [apiKeyValue, setApiKeyValue] = useState("");
-
-  const validApiKey = useStoreStore((state) => state.validApiKey);
-  const hasApiKey = useStoreStore((state) => state.hasApiKey);
-  const setHasApiKey = useStoreStore((state) => state.updateHasApiKey);
-  const setValidApiKey = useStoreStore((state) => state.updateValidApiKey);
-  const setLoadingApiKey = useStoreStore((state) => state.updateLoadingApiKey);
-
-  const handleSaveKey = () => {
-    if (apiKeyValue) {
-      addApiKeyStore(apiKeyValue).then(
-        () => {
-          setSuccessData({
-            title: API_SUCCESS_ALERT,
-          });
-          storeApiKey(apiKeyValue);
-          setOpen(false);
-          setHasApiKey(true);
-          setValidApiKey(true);
-          setLoadingApiKey(false);
-        },
-        (error) => {
-          setErrorData({
-            title: API_ERROR_ALERT,
-            list: [error["response"]["data"]["detail"]],
-          });
-          setHasApiKey(false);
-          setValidApiKey(false);
-          setLoadingApiKey(false);
-        }
-      );
-    }
-  };
-
-  return (
-    <BaseModal size="small-h-full" open={open && !disabled} setOpen={setOpen}>
-      <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
-      <BaseModal.Header
-        description={
-          (hasApiKey && !validApiKey
-            ? INVALID_API_KEY
-            : !hasApiKey
-            ? NO_API_KEY
-            : "") + INSERT_API_KEY
-        }
-      >
-        <span className="pr-2">API Key</span>
-        <IconComponent
-          name="Key"
-          className="h-6 w-6 pl-1 text-foreground"
-          aria-hidden="true"
-        />
-      </BaseModal.Header>
-      <BaseModal.Content>
-        <Form.Root
-          onSubmit={(event) => {
-            event.preventDefault();
-            handleSaveKey();
-          }}
-        >
-          <div className="grid gap-5">
-            <Form.Field name="apikey">
-              <div className="flex items-center justify-between gap-2">
-                <Form.Control asChild>
-                  <Input
-                    //fake api key
-                    value={apiKeyValue}
-                    type="password"
-                    onChange={({ target: { value } }) => {
-                      setApiKeyValue(value);
-                    }}
-                    placeholder="Insert your API Key"
-                  />
-                </Form.Control>
-              </div>
-            </Form.Field>
-          </div>
-          <div className="flex items-end justify-between">
-            <span className="pr-1 text-xs text-muted-foreground">
-              {CREATE_API_KEY}{" "}
-              <a
-                className="text-high-indigo underline"
-                href="https://langflow.store/"
-                target="_blank"
-              >
-                langflow.store
-              </a>
-            </span>
-            <div className="">
-              <Button
-                className="mr-3"
-                variant="outline"
-                onClick={() => {
-                  setOpen(false);
-                }}
-              >
-                Cancel
-              </Button>
-
-              <Form.Submit asChild>
-                <Button
-                  data-testid="api-key-save-button-store"
-                  className="mt-8"
-                >
-                  Save
-                </Button>
-              </Form.Submit>
-            </div>
-          </div>
-        </Form.Root>
-      </BaseModal.Content>
-    </BaseModal>
-  );
-}

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -58,7 +58,7 @@ export default function NodeToolbarComponent({
         data.node.template[templateField].type === "Any" ||
         data.node.template[templateField].type === "int" ||
         data.node.template[templateField].type === "dict" ||
-        data.node.template[templateField].type === "NestedDict"),
+        data.node.template[templateField].type === "NestedDict")
   ).length;
   const templates = useTypesStore((state) => state.templates);
   const hasStore = useStoreStore((state) => state.hasStore);
@@ -85,7 +85,7 @@ export default function NodeToolbarComponent({
   const [showconfirmShare, setShowconfirmShare] = useState(false);
   const [showOverrideModal, setShowOverrideModal] = useState(false);
   const [flowComponent, setFlowComponent] = useState<FlowType>(
-    createFlowComponent(cloneDeep(data), version),
+    createFlowComponent(cloneDeep(data), version)
   );
 
   const openInNewTab = (url) => {
@@ -100,7 +100,7 @@ export default function NodeToolbarComponent({
   const updateNodeInternals = useUpdateNodeInternals();
 
   const setLastCopiedSelection = useFlowStore(
-    (state) => state.setLastCopiedSelection,
+    (state) => state.setLastCopiedSelection
   );
 
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
@@ -141,6 +141,9 @@ export default function NodeToolbarComponent({
         break;
       case "disabled":
         break;
+      case "unselect":
+        unselectAll();
+        break;
       case "ungroup":
         takeSnapshot();
         expandGroupNode(
@@ -150,7 +153,7 @@ export default function NodeToolbarComponent({
           nodes,
           edges,
           setNodes,
-          setEdges,
+          setEdges
         );
         break;
       case "override":
@@ -174,16 +177,16 @@ export default function NodeToolbarComponent({
             y: 10,
             paneX: nodes.find((node) => node.id === data.id)?.position.x,
             paneY: nodes.find((node) => node.id === data.id)?.position.y,
-          },
+          }
         );
         break;
       case "update":
         takeSnapshot();
         // to update we must get the code from the templates in useTypesStore
-        const thisNodeTemplate = templates[data.type].template;
+        const thisNodeTemplate = templates[data.type]?.template;
         // if the template does not have a code key
         // return
-        if (!thisNodeTemplate.code) return;
+        if (!thisNodeTemplate?.code) return;
 
         const currentCode = thisNodeTemplate.code.value;
         if (data.node) {
@@ -212,13 +215,13 @@ export default function NodeToolbarComponent({
   };
 
   const isSaved = flows.some((flow) =>
-    Object.values(flow).includes(data.node?.display_name!),
+    Object.values(flow).includes(data.node?.display_name!)
   );
 
   const setNode = useFlowStore((state) => state.setNode);
 
   const handleOnNewValue = (
-    newValue: string | string[] | boolean | Object[],
+    newValue: string | string[] | boolean | Object[]
   ): void => {
     if (data.node!.template[name].value !== newValue) {
       takeSnapshot();
@@ -276,6 +279,10 @@ export default function NodeToolbarComponent({
         event.preventDefault();
         handleSelectChange("update");
       }
+      if (selected && event.key.toUpperCase() === "ESCAPE") {
+        event.preventDefault();
+        handleSelectChange("unselect");
+      }
       if (
         selected &&
         isGroup &&
@@ -380,7 +387,7 @@ export default function NodeToolbarComponent({
 
   return (
     <>
-      <div className="w-26 h-10">
+      <div className="w-26 nocopy nowheel nopan nodelete nodrag noundo h-10">
         <span className="isolate inline-flex rounded-md shadow-sm">
           {hasCode && (
             <ShadTooltip content="Code" side="top">
@@ -401,7 +408,7 @@ export default function NodeToolbarComponent({
               data-testid="save-button-modal"
               className={classNames(
                 "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
-                hasCode ? " " : " rounded-l-md ",
+                hasCode ? " " : " rounded-l-md "
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -419,7 +426,7 @@ export default function NodeToolbarComponent({
             <button
               data-testid="duplicate-button-modal"
               className={classNames(
-                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
+                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -467,7 +474,7 @@ export default function NodeToolbarComponent({
                   <div
                     data-testid="more-options-modal"
                     className={classNames(
-                      "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground  shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
+                      "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground  shadow-md ring-1 ring-inset  ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
                     )}
                   >
                     <IconComponent

src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx

@@ -66,6 +66,7 @@ export default function ComponentsComponent({
   const myCollectionId = useFolderStore((state) => state.myCollectionId);
   const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
   const setFolderUrl = useFolderStore((state) => state.setFolderUrl);
+  const addFlow = useFlowsManagerStore((state) => state.addFlow);
 
   useEffect(() => {
     setFolderUrl(folderId ?? "");
@@ -115,7 +116,7 @@ export default function ComponentsComponent({
     });
   };
 
-  const handleSelectOptionsChange = () => {
+  const handleSelectOptionsChange = (action: string) => {
     const hasSelected = selectedFlowsComponentsCards?.length > 0;
     if (!hasSelected) {
       setErrorData({
@@ -124,7 +125,31 @@ export default function ComponentsComponent({
       });
       return;
     }
+    if (action === "delete") {
       setOpenDelete(true);
+    } else if (action === "duplicate") {
+      handleDuplicate();
+    }
+  };
+
+  const handleDuplicate = () => {
+    Promise.all(
+      selectedFlowsComponentsCards.map((selectedFlow) =>
+        addFlow(
+          true,
+          allFlows.find((flow) => flow.id === selectedFlow),
+        ),
+      ),
+    ).then(() => {
+      resetFilter();
+      getFoldersApi(true);
+      if (!folderId || folderId === myCollectionId) {
+        getFolderById(folderId ? folderId : myCollectionId);
+      }
+      setSelectedFlowsComponentsCards([]);
+
+      setSuccessData({ title: "Flows duplicated successfully" });
+    });
   };
 
   const handleDeleteMultiple = () => {
@@ -198,9 +223,10 @@ export default function ComponentsComponent({
     <>
       {allFlows?.length > 0 && (
         <HeaderComponent
-          handleDelete={handleSelectOptionsChange}
+          handleDelete={() => handleSelectOptionsChange("delete")}
           handleSelectAll={handleSelectAll}
-          disableDelete={!(selectedFlowsComponentsCards?.length > 0)}
+          handleDuplicate={() => handleSelectOptionsChange("duplicate")}
+          disableFunctions={!(selectedFlowsComponentsCards?.length > 0)}
         />
       )}
 

src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx

@@ -1,5 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import NewFlowModal from "../../../../modals/newFlowModal";
+import { useState } from "react";
 
 type EmptyComponentProps = {};
 
@@ -7,34 +9,31 @@ const EmptyComponent = ({}: EmptyComponentProps) => {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const navigate = useNavigate();
 
+  const [openModal, setOpenModal] = useState(false);
+
   return (
     <>
       <div className="mt-6 flex w-full items-center justify-center text-center">
         <div className="flex-max-width h-full flex-col">
-          <div className="flex w-full flex-col gap-4">
-            <div className="grid w-full gap-4 text-muted-foreground">
-              Flows and components can be created using Langflow.
-            </div>
           <div className="align-center flex w-full justify-center gap-1 ">
-              <span className="text-muted-foreground">New?</span>
+            <span className="text-muted-foreground">
+              This folder is empty. New?
+            </span>
             <span className="transition-colors hover:text-muted-foreground">
+              <NewFlowModal open={openModal} setOpen={setOpenModal} />
               <button
                 onClick={() => {
-                    addFlow(true).then((id) => {
+                  setOpenModal(true);
-                      navigate("/flow/" + id);
-                    });
                 }}
                 className="underline"
               >
                 Start Here
               </button>
-                .
             </span>
             <span className="animate-pulse">🚀</span>
           </div>
         </div>
       </div>
-      </div>
     </>
   );
 };

src/frontend/src/pages/MainPage/components/headerComponent/index.tsx

@@ -16,13 +16,15 @@ import ShadTooltip from "../../../../components/shadTooltipComponent";
 type HeaderComponentProps = {
   handleSelectAll: (select) => void;
   handleDelete: () => void;
-  disableDelete: boolean;
+  handleDuplicate: () => void;
+  disableFunctions: boolean;
 };
 
 const HeaderComponent = ({
   handleSelectAll,
   handleDelete,
-  disableDelete,
+  handleDuplicate,
+  disableFunctions,
 }: HeaderComponentProps) => {
   const [shouldSelectAll, setShouldSelectAll] = useState(true);
 
@@ -55,23 +57,41 @@ const HeaderComponent = ({
             </div>
           </a>
         </div>
-        <div className="col-span-2 grid-cols-1 justify-self-end">
+        <div className="col-span-2 flex grid-cols-1 gap-2 justify-self-end">
           <div>
             <ShadTooltip
               content={
-                disableDelete ? (
+                disableFunctions ? (
+                  <span>Select items to duplicate</span>
+                ) : (
+                  <span>Duplicate selected items</span>
+                )
+              }
+            >
+              <button onClick={handleDuplicate} disabled={disableFunctions}>
+                <IconComponent
+                  name="Copy"
+                  className={cn("h-5 w-5 text-primary transition-all")}
+                />
+              </button>
+            </ShadTooltip>
+          </div>
+          <div>
+            <ShadTooltip
+              content={
+                disableFunctions ? (
                   <span>Select items to delete</span>
                 ) : (
                   <span>Delete selected items</span>
                 )
               }
             >
-              <button onClick={handleDelete} disabled={disableDelete}>
+              <button onClick={handleDelete} disabled={disableFunctions}>
                 <IconComponent
                   name="Trash2"
                   className={cn(
                     "h-5 w-5 text-primary transition-all",
-                    disableDelete ? "" : "hover:text-destructive",
+                    disableFunctions ? "" : "hover:text-destructive",
                   )}
                 />
               </button>