jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

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

Browse source 
#### 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.
This commit is contained in:
Lucas Oliveira 2024-06-05 19:14:32 +02:00 • committed by GitHub
commit 6b41460bf2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
154 changed files with 14303 additions and 14226 deletions
Download patch file Download diff file Expand all files Collapse all files

19
docs/docs/components/custom.mdx
View file

@ -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.
If you want to add the values of the variables to the template you defined, format the `PromptTemplate` inside the `CustomComponent` class.
Use the `Prompt` type by adding **kwargs to the build method. If you want to
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.

18
docs/docs/getting-started/canvas.mdx
View file

@ -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' }}>
<ReactPlayer playing controls url='/videos/langflow_collection.mp4'
/>
<div
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.

14
docs/docs/getting-started/flows-components-collections.mdx
View file

@ -1,7 +1,7 @@
import ThemedImage from '@theme/ThemedImage';
import useBaseUrl from '@docusaurus/useBaseUrl';
import ZoomableImage from '/src/theme/ZoomableImage.js';
import ReactPlayer from 'react-player';
import ThemedImage from "@theme/ThemedImage";
import useBaseUrl from "@docusaurus/useBaseUrl";
import ZoomableImage from "/src/theme/ZoomableImage.js";
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

13
docs/docs/getting-started/install-langflow.mdx
View file

@ -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 │
│ │

27
docs/docs/getting-started/quickstart.mdx
View file

@ -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
@ -51,18 +54,18 @@ This should be interesting...
## Run the basic prompting flow
1. Click the **Run** button.
The **Interaction Panel** opens, where you can chat with your bot.
The **Interaction Panel** opens, where you can chat with your bot.
2. Type a message and press Enter.
And... Ahoy! 🏴‍☠️
The bot responds in a piratical manner!
And... Ahoy! 🏴‍☠️
The bot responds in a piratical manner!
## Modify the prompt for a different result
1. To modify your prompt results, in the **Prompt** template, click the **Template** field.
The **Edit Prompt** window opens.
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.
The response will be markedly different.
## Next steps
@ -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)
* [Blog writer](/starter-projects/blog-writer.mdx)
* [Document QA](/starter-projects/document-qa.mdx)
- [Memory chatbot](/starter-projects/memory-chatbot.mdx)
- [Blog writer](/starter-projects/blog-writer.mdx)
- [Document QA](/starter-projects/document-qa.mdx)

5
docs/docs/index.mdx
View file

@ -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

10
docs/docs/integrations/notion/add-content-to-page.md
View file

@ -16,7 +16,7 @@ The `AddContentToPage` component enables you to:
- Convert markdown text to Notion blocks.
- Append the converted blocks to a specified Notion page.
- Seamlessly integrate Notion content creation into Langflow workflows.
</Admonition>
</Admonition>
## Component Usage
@ -105,12 +105,12 @@ class NotionPageCreator(CustomComponent):
Example of using the `AddContentToPage` component in a Langflow flow using Markdown as input:
<ZoomableImage
alt="NotionDatabaseProperties Flow Example"
sources={{
alt="NotionDatabaseProperties Flow Example"
sources={{
light: "img/notion/AddContentToPage_flow_example.png",
dark: "img/notion/AddContentToPage_flow_example.png",
}}
style={{ width: "100%", margin: "20px 0" }}
style={{ width: "100%", margin: "20px 0" }}
/>
In this example, the `AddContentToPage` component connects to a `MarkdownLoader` component to provide the markdown text input. The converted Notion blocks are appended to the specified Notion page using the provided `block_id` and `notion_secret`.
@ -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.

6
docs/docs/integrations/notion/intro.md
View file

@ -8,12 +8,12 @@ import ZoomableImage from "/src/theme/ZoomableImage.js";
The Notion integration in Langflow enables seamless connectivity with Notion databases, pages, and users, facilitating automation and improving productivity.
<ZoomableImage
alt="Notion Components in Langflow"
sources={{
alt="Notion Components in Langflow"
sources={{
light: "img/notion/notion_bundle.jpg",
dark: "img/notion/notion_bundle.jpg",
}}
style={{ width: "100%", margin: "20px 0" }}
style={{ width: "100%", margin: "20px 0" }}
/>
#### <a target="\_blank" href="json_files/Notion_Components_bundle.json" download>Download Notion Components Bundle</a>

2
docs/docs/integrations/notion/list-database-properties.md
View file

@ -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.

13
docs/docs/integrations/notion/list-pages.md
View file

@ -140,16 +140,17 @@ 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
alt="NotionListPages
Flow Example"
sources={{
alt="NotionListPages
Flow Example"
sources={{
light: "img/notion/NotionListPages_flow_example.png",
dark: "img/notion/NotionListPages_flow_example_dark.png",
}}
style={{ width: "100%", margin: "20px 0" }}
style={{ width: "100%", margin: "20px 0" }}
/>
In this example, the `NotionListPages` component is used to retrieve specific pages from a Notion database based on the provided filters and sorting options. The retrieved data can then be processed further in the subsequent components of the flow.
@ -157,7 +158,7 @@ In this example, the `NotionListPages` component is used to retrieve specific pa
## Best Practices
When using the `NotionListPages
When using the `NotionListPages
` component, consider the following best practices:
- Ensure that you have a valid Notion integration token with the necessary permissions to query the desired database.
@ -171,7 +172,7 @@ We encourage you to explore the capabilities of the `NotionListPages
## Troubleshooting
If you encounter any issues while using the `NotionListPages` component, consider the following:
If you encounter any issues while using the `NotionListPages` component, consider the following:
- Double-check that the `notion_secret` and `database_id` are correct and valid.
- Verify that the `query_payload` JSON string is properly formatted and contains valid filtering and sorting options.

14
docs/docs/integrations/notion/list-users.md
View file

@ -15,7 +15,7 @@ The `NotionUserList` component retrieves users from Notion. It provides a conven
- Retrieve user data from Notion
- Access user information such as ID, type, name, and avatar URL
- Integrate Notion user data seamlessly into your Langflow workflows
</Admonition>
</Admonition>
## Component Usage
@ -94,33 +94,33 @@ 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:
<ZoomableImage
alt="NotionUserList Flow Example"
sources={{
alt="NotionUserList Flow Example"
sources={{
light: "img/notion/NotionUserList_flow_example.png",
dark: "img/notion/NotionUserList_flow_example_dark.png",
}}
style={{ width: "100%", margin: "20px 0" }}
style={{ width: "100%", margin: "20px 0" }}
/>
</Admonition>
## Best Practices
When using the `NotionUserList` component, consider the following best practices:
When using the `NotionUserList` component, consider the following best practices:
- Ensure that you have a valid Notion integration token with the necessary permissions to retrieve user data.
- Handle the retrieved user data securely and in compliance with Notion's API usage guidelines.
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:
If you encounter any issues while using the `NotionUserList` component, consider the following:
- Double-check that your Notion integration token is valid and has the required permissions.
- Verify that you have installed the necessary dependencies (`requests`) for the component to function properly.

12
docs/docs/integrations/notion/page-content-viewer.md
View file

@ -11,7 +11,7 @@ The `NotionPageContent` component retrieves the content of a Notion page as plai
<Admonition type="tip" title="Component Functionality">
The `NotionPageContent` component enables you to:
The `NotionPageContent` component enables you to:
- Retrieve the content of a Notion page as plain text
- Extract text from various block types, including paragraphs, headings, lists, and more
@ -114,18 +114,18 @@ class NotionPageContent(CustomComponent):
Here's an example of how you can use the `NotionPageContent` component in a Langflow flow:
<ZoomableImage
alt="NotionPageContent Flow Example"
sources={{
alt="NotionPageContent Flow Example"
sources={{
light: "img/notion/NotionPageContent_flow_example.png",
dark: "img/notion/NotionPageContent_flow_example_dark.png",
}}
style={{ width: "100%", margin: "20px 0" }}
style={{ width: "100%", margin: "20px 0" }}
/>
</Admonition>
## Best Practices
When using the `NotionPageContent` component, consider the following best practices:
When using the `NotionPageContent` component, consider the following best practices:
- Ensure that you have the necessary permissions to access the Notion page you want to retrieve.
- Keep your Notion integration token secure and avoid sharing it publicly.
@ -135,7 +135,7 @@ The `NotionPageContent` component provides a seamless way to integrate Notion pa
## Troubleshooting
If you encounter any issues while using the `NotionPageContent` component, consider the following:
If you encounter any issues while using the `NotionPageContent` component, consider the following:
- Double-check that you have provided the correct Notion page ID.
- Verify that your Notion integration token is valid and has the necessary permissions.

8
docs/docs/integrations/notion/page-create.md
View file

@ -97,16 +97,17 @@ 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:
<ZoomableImage
alt="NotionPageCreator Flow Example"
sources={{
alt="NotionPageCreator Flow Example"
sources={{
light: "img/notion/NotionPageCreator_flow_example.png",
dark: "img/notion/NotionPageCreator_flow_example_dark.png",
}}
style={{ width: "100%", margin: "20px 0" }}
style={{ width: "100%", margin: "20px 0" }}
/>
</Admonition>
@ -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.

7
docs/docs/integrations/notion/page-update.md
View file

@ -109,12 +109,12 @@ Let's break down the key parts of this component:
Here's an example of how to use the `NotionPageUpdate` component in a Langflow flow using:
<ZoomableImage
alt="NotionPageUpdate Flow Example"
sources={{
alt="NotionPageUpdate Flow Example"
sources={{
light: "img/notion/NotionPageUpdate_flow_example.png",
dark: "img/notion/NotionPageUpdate_flow_example_dark.png",
}}
style={{ width: "100%", margin: "20px 0" }}
style={{ width: "100%", margin: "20px 0" }}
/>
</Admonition>
@ -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:

7
docs/docs/integrations/notion/search.md
View file

@ -146,16 +146,17 @@ 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:
<ZoomableImage
alt="NotionSearch Flow Example"
sources={{
alt="NotionSearch Flow Example"
sources={{
light: "img/notion/NotionSearch_flow_example.png",
dark: "img/notion/NotionSearch_flow_example_dark.png",
}}
style={{ width: "100%", margin: "20px 0" }}
style={{ width: "100%", margin: "20px 0" }}
/>
In this example, the `NotionSearch` component is used to search for pages and databases in Notion based on the provided query and filter criteria. The retrieved data can then be processed further in the subsequent components of the flow.

1
docs/docs/integrations/notion/setup.md
View file

@ -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.

1
docs/docs/migration/possible-installation-issues.mdx
View file

@ -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.

21
docs/docs/starter-projects/basic-prompting.mdx
View file

@ -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
@ -49,18 +52,14 @@ This should be interesting...
## Run the basic prompting flow
1. Click the **Run** button.
The **Interaction Panel** opens, where you can converse with your bot.
The **Interaction Panel** opens, where you can converse with your bot.
2. Type a message and press Enter.
The bot responds in a markedly piratical manner!
The bot responds in a markedly piratical manner!
## Modify the prompt for a different result
1. To modify your prompt results, in the **Prompt** template, click the **Template** field.
The **Edit Prompt** window opens.
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.
The response will be markedly different.

14
docs/docs/starter-projects/blog-writer.mdx
View file

@ -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:
@ -66,9 +70,9 @@ The `reference_1` and `reference_2` values are received from the **URL** fields
## Run the Blog Writer flow
1. Click the **Run** button.
The **Interaction Panel** opens, where you can run your one-shot flow.
The **Interaction Panel** opens, where you can run your one-shot flow.
2. Click the **Lighting Bolt** icon to run your flow.
3. The **OpenAI** component constructs a blog post with the **URL** items as context.
The default **URL** values are for web pages at `promptingguide.ai`, so your blog post will be about prompting LLMs.
The default **URL** values are for web pages at `promptingguide.ai`, so your blog post will be about prompting LLMs.
To write about something different, change the values in the **URL** components, and see what the LLM constructs.

20
docs/docs/starter-projects/document-qa.mdx
View file

@ -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,16 +51,18 @@ 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
1. Click the **Run** button.
The **Interaction Panel** opens, where you can converse with your bot.
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:
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.
```

18
docs/docs/starter-projects/memory-chatbot.mdx
View file

@ -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
@ -50,9 +53,9 @@ The **Chat History** component gives the **OpenAI** component a memory of previo
## Run the memory chatbot flow
1. Click the **Run** button.
The **Interaction Panel** opens, where you can converse with your bot.
The **Interaction Panel** opens, where you can converse with your bot.
2. Type a message and press Enter.
The bot will respond according to the template in the **Prompt** component.
The bot will respond according to the template in the **Prompt** component.
3. Type more questions. In the **Outputs** log, your queries are logged in order. Up to 5 queries are stored by default. Try asking `What is the first subject I asked you about?` to see where the LLM's memory disappears.
## Modify the Session ID field to have multiple conversations
@ -65,11 +68,11 @@ You can demonstrate this by modifying the **Session ID** value to switch between
1. In the **Session ID** field of the **Chat Memory** and **Chat Input** components, change the **Session ID** value from `MySessionID` to `AnotherSessionID`.
2. Click the **Run** button to run your flow.
In the **Interaction Panel**, you will have a new conversation. (You may need to clear the cache with the **Eraser** button).
In the **Interaction Panel**, you will have a new conversation. (You may need to clear the cache with the **Eraser** button).
3. Type a few questions to your bot.
4. In the **Session ID** field of the **Chat Memory** and **Chat Input** components, change the **Session ID** value back to `MySessionID`.
5. Run your flow.
The **Outputs** log of the **Interaction Panel** displays the history from your initial chat with `MySessionID`.
The **Outputs** log of the **Interaction Panel** displays the history from your initial chat with `MySessionID`.
## Store Session ID as a Langflow variable
@ -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**.

39
docs/docs/starter-projects/vector-store-rag.mdx
View file

@ -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:
* Application token (`AstraCS:WSnyFUhRxsrg…​`)
* API endpoint (`https://ASTRA_DB_ID-ASTRA_DB_REGION.apps.astra.datastax.com`)
- [An Astra DB vector database created](https://docs.datastax.com/en/astra-db-serverless/get-started/quickstart.html) with:
- Application token (`AstraCS:WSnyFUhRxsrg…​`)
- 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.
* **OpenAI Embeddings** component generates embeddings from the user input.
* **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.
* **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.
* **Chat Output** component displays the response in 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.
- **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.
- **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.
- **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…​`).
@ -75,12 +79,13 @@ The **query** flow (top of the screen) allows users to chat with the embedded v
## Run the vector store RAG flow
1. Click the **Playground** button.
The **Playground** opens, where you can chat with your data.
The **Playground** opens, where you can chat with your data.
2. Type a message and press Enter. (Try something like "What topics do you know about?")
3. The bot will respond with a summary of the data you've embedded.
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.

468
docs/static/data/AstraDB-RAG-Flows.json vendored
View file

File diff suppressed because it is too large Load diff

882
docs/static/json_files/Notion_Components_bundle.json vendored
View file

File diff suppressed because one or more lines are too long

3
scripts/gcp/GCP_DEPLOYMENT.md
View file

@ -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)
> <br>
> For a more accurate breakdown of costs, please use the [**GCP Pricing Calculator**](https://cloud.google.com/products/calculator) > <br>
| Component | Regular Cost (Hourly) | Regular Cost (Monthly) | Spot/Preemptible Cost (Hourly) | Spot/Preemptible Cost (Monthly) | Notes |
| ------------------ | --------------------- | ---------------------- | ------------------------------ | ------------------------------- | -------------------------------------------------------------------------- |

2
src/backend/base/langflow/__main__.py
View file

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

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

@ -45,9 +45,7 @@
"name": "template",
"display_name": "Template",
"advanced": false,
"input_types": [
"Text"
],
"input_types": ["Text"],
"dynamic": false,
"info": "",
"load_from_db": false,
@ -86,22 +84,14 @@
"is_input": null,
"is_output": null,
"is_composition": null,
"base_classes": [
"object",
"str",
"Text"
],
"base_classes": ["object", "str", "Text"],
"name": "",
"display_name": "Prompt",
"documentation": "",
"custom_fields": {
"template": [
"user_input"
]
"template": ["user_input"]
},
"output_types": [
"Text"
],
"output_types": ["Text"],
"full_path": null,
"field_formatters": {},
"frozen": false,
@ -150,9 +140,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"Text"
],
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"object",
"Text",
"str"
],
"base_classes": ["object", "Text", "str"],
"display_name": "OpenAI",
"documentation": "",
"custom_fields": {
@ -369,9 +345,7 @@
"stream": null,
"system_message": null
},
"output_types": [
"Text"
],
"output_types": ["Text"],
"field_formatters": {},
"frozen": false,
"field_order": [
@ -442,9 +416,7 @@
"name": "input_value",
"display_name": "Message",
"advanced": false,
"input_types": [
"Text"
],
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"return_record": {
"type": "bool",
@ -502,10 +472,7 @@
"fileTypes": [],
"file_path": "",
"password": false,
"options": [
"Machine",
"User"
],
"options": ["Machine", "User"],
"name": "sender",
"display_name": "Sender Type",
"advanced": true,
@ -513,9 +480,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["Text"]
},
"sender_name": {
"type": "str",
@ -535,9 +500,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"_type": "CustomComponent"
},
"description": "Display a chat message in the Playground.",
"icon": "ChatOutput",
"base_classes": [
"Record",
"Text",
"str",
"object"
],
"base_classes": ["Record", "Text", "str", "object"],
"display_name": "Chat Output",
"documentation": "",
"custom_fields": {
@ -580,10 +536,7 @@
"return_record": null,
"record_template": null
},
"output_types": [
"Text",
"Record"
],
"output_types": ["Text", "Record"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -679,10 +632,7 @@
"fileTypes": [],
"file_path": "",
"password": false,
"options": [
"Machine",
"User"
],
"options": ["Machine", "User"],
"name": "sender",
"display_name": "Sender Type",
"advanced": true,
@ -690,9 +640,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["Text"]
},
"sender_name": {
"type": "str",
@ -712,9 +660,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"_type": "CustomComponent"
},
"description": "Get chat inputs from the Playground.",
"icon": "ChatInput",
"base_classes": [
"object",
"Record",
"str",
"Text"
],
"base_classes": ["object", "Record", "str", "Text"],
"display_name": "Chat Input",
"documentation": "",
"custom_fields": {
@ -756,10 +695,7 @@
"session_id": null,
"return_record": null
},
"output_types": [
"Text",
"Record"
],
"output_types": ["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": [
"Text"
],
"inputTypes": ["Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"object",
"Text",
"str"
],
"baseClasses": ["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": [
"Text"
],
"inputTypes": ["Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"object",
"str",
"Text"
],
"baseClasses": ["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": [
"Document",
"BaseOutputParser",
"Record",
"Text"
],
"inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"object",
"Record",
"str",
"Text"
],
"baseClasses": ["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": {

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

@ -45,9 +45,7 @@
"name": "template",
"display_name": "Template",
"advanced": false,
"input_types": [
"Text"
],
"input_types": ["Text"],
"dynamic": false,
"info": "",
"load_from_db": false,
@ -138,24 +136,14 @@
"is_input": null,
"is_output": null,
"is_composition": null,
"base_classes": [
"object",
"Text",
"str"
],
"base_classes": ["object", "Text", "str"],
"name": "",
"display_name": "Prompt",
"documentation": "",
"custom_fields": {
"template": [
"reference_1",
"reference_2",
"instructions"
]
"template": ["reference_1", "reference_2", "instructions"]
},
"output_types": [
"Text"
],
"output_types": ["Text"],
"full_path": null,
"field_formatters": {},
"frozen": false,
@ -222,9 +210,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
],
"input_types": ["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": [
"Record"
],
"base_classes": ["Record"],
"display_name": "URL",
"documentation": "",
"custom_fields": {
"urls": null
},
"output_types": [
"Record"
],
"output_types": ["Record"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -302,9 +284,7 @@
"name": "input_value",
"display_name": "Message",
"advanced": false,
"input_types": [
"Text"
],
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"return_record": {
"type": "bool",
@ -362,10 +340,7 @@
"fileTypes": [],
"file_path": "",
"password": false,
"options": [
"Machine",
"User"
],
"options": ["Machine", "User"],
"name": "sender",
"display_name": "Sender Type",
"advanced": true,
@ -373,9 +348,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["Text"]
},
"sender_name": {
"type": "str",
@ -395,9 +368,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"_type": "CustomComponent"
},
"description": "Display a chat message in the Playground.",
"icon": "ChatOutput",
"base_classes": [
"Text",
"Record",
"object",
"str"
],
"base_classes": ["Text", "Record", "object", "str"],
"display_name": "Chat Output",
"documentation": "",
"custom_fields": {
@ -440,10 +404,7 @@
"return_record": null,
"record_template": null
},
"output_types": [
"Text",
"Record"
],
"output_types": ["Text", "Record"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -483,9 +444,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"Text"
],
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"str",
"Text",
"object"
],
"base_classes": ["str", "Text", "object"],
"display_name": "OpenAI",
"documentation": "",
"custom_fields": {
@ -702,9 +649,7 @@
"stream": null,
"system_message": null
},
"output_types": [
"Text"
],
"output_types": ["Text"],
"field_formatters": {},
"frozen": false,
"field_order": [
@ -777,28 +722,20 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
],
"value": [
"https://www.promptingguide.ai/introduction/basics"
]
"input_types": ["Text"],
"value": ["https://www.promptingguide.ai/introduction/basics"]
},
"_type": "CustomComponent"
},
"description": "Fetch content from one or more URLs.",
"icon": "layout-template",
"base_classes": [
"Record"
],
"base_classes": ["Record"],
"display_name": "URL",
"documentation": "",
"custom_fields": {
"urls": null
},
"output_types": [
"Record"
],
"output_types": ["Record"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -858,10 +795,7 @@
"name": "input_value",
"display_name": "Value",
"advanced": false,
"input_types": [
"Record",
"Text"
],
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"_type": "CustomComponent"
},
"description": "Get text inputs from the Playground.",
"icon": "type",
"base_classes": [
"object",
"Text",
"str"
],
"base_classes": ["object", "Text", "str"],
"display_name": "Instructions",
"documentation": "",
"custom_fields": {
"input_value": null,
"record_template": null
},
"output_types": [
"Text"
],
"output_types": ["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}",
"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}",
"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}",
"sourceHandle": "{œbaseClassesœ:[œRecordœ],œdataTypeœ:œURLœ,œidœ:œURL-HYPkRœ}",
"targetHandle": "{œfieldNameœ:œreference_2œ,œidœ:œPrompt-Rse03œ,œinputTypesœ:[œDocumentœ,œBaseOutputParserœ,œRecordœ,œTextœ],œtypeœ:œstrœ}",
"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": [
"Document",
"BaseOutputParser",
"Record",
"Text"
],
"inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"Record"
],
"baseClasses": ["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": [
"Text"
],
"inputTypes": ["Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"str",
"Text",
"object"
],
"baseClasses": ["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": [
"Document",
"BaseOutputParser",
"Record",
"Text"
],
"inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"Record"
],
"baseClasses": ["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": [
"Document",
"BaseOutputParser",
"Record",
"Text"
],
"inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"object",
"Text",
"str"
],
"baseClasses": ["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": [
"Text"
],
"inputTypes": ["Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"object",
"Text",
"str"
],
"baseClasses": ["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
}
],

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

@ -45,9 +45,7 @@
"name": "template",
"display_name": "Template",
"advanced": false,
"input_types": [
"Text"
],
"input_types": ["Text"],
"dynamic": false,
"info": "",
"load_from_db": false,
@ -112,23 +110,14 @@
"is_input": null,
"is_output": null,
"is_composition": null,
"base_classes": [
"object",
"str",
"Text"
],
"base_classes": ["object", "str", "Text"],
"name": "",
"display_name": "Prompt",
"documentation": "",
"custom_fields": {
"template": [
"Document",
"Question"
]
"template": ["Document", "Question"]
},
"output_types": [
"Text"
],
"output_types": ["Text"],
"full_path": null,
"field_formatters": {},
"frozen": false,
@ -231,18 +220,14 @@
"_type": "CustomComponent"
},
"description": "A generic file loader.",
"base_classes": [
"Record"
],
"base_classes": ["Record"],
"display_name": "Files",
"documentation": "",
"custom_fields": {
"path": null,
"silent_errors": null
},
"output_types": [
"Record"
],
"output_types": ["Record"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -338,10 +323,7 @@
"fileTypes": [],
"file_path": "",
"password": false,
"options": [
"Machine",
"User"
],
"options": ["Machine", "User"],
"name": "sender",
"display_name": "Sender Type",
"advanced": true,
@ -349,9 +331,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["Text"]
},
"sender_name": {
"type": "str",
@ -371,9 +351,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"_type": "CustomComponent"
},
"description": "Get chat inputs from the Playground.",
"icon": "ChatInput",
"base_classes": [
"str",
"Record",
"Text",
"object"
],
"base_classes": ["str", "Record", "Text", "object"],
"display_name": "Chat Input",
"documentation": "",
"custom_fields": {
@ -415,10 +386,7 @@
"session_id": null,
"return_record": null
},
"output_types": [
"Text",
"Record"
],
"output_types": ["Text", "Record"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -477,9 +445,7 @@
"name": "input_value",
"display_name": "Message",
"advanced": false,
"input_types": [
"Text"
],
"input_types": ["Text"],
"dynamic": false,
"info": "",
"load_from_db": false,
@ -515,10 +481,7 @@
"fileTypes": [],
"file_path": "",
"password": false,
"options": [
"Machine",
"User"
],
"options": ["Machine", "User"],
"name": "sender",
"display_name": "Sender Type",
"advanced": true,
@ -526,9 +489,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["Text"]
},
"sender_name": {
"type": "str",
@ -548,9 +509,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"_type": "CustomComponent"
},
"description": "Display a chat message in the Playground.",
"icon": "ChatOutput",
"base_classes": [
"str",
"Record",
"Text",
"object"
],
"base_classes": ["str", "Record", "Text", "object"],
"display_name": "Chat Output",
"documentation": "",
"custom_fields": {
@ -592,10 +544,7 @@
"session_id": null,
"return_record": null
},
"output_types": [
"Text",
"Record"
],
"output_types": ["Text", "Record"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -640,9 +589,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"Text"
],
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"object",
"str",
"Text"
],
"base_classes": ["object", "str", "Text"],
"display_name": "OpenAI",
"documentation": "",
"custom_fields": {
@ -859,9 +794,7 @@
"stream": null,
"system_message": null
},
"output_types": [
"Text"
],
"output_types": ["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": [
"Document",
"BaseOutputParser",
"Record",
"Text"
],
"inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"str",
"Record",
"Text",
"object"
],
"baseClasses": ["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": [
"Document",
"BaseOutputParser",
"Record",
"Text"
],
"inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"Record"
],
"baseClasses": ["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": [
"Text"
],
"inputTypes": ["Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"object",
"str",
"Text"
],
"baseClasses": ["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": [
"Text"
],
"inputTypes": ["Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"object",
"str",
"Text"
],
"baseClasses": ["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": {

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

@ -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": [
"Machine",
"User"
],
"options": ["Machine", "User"],
"name": "sender",
"display_name": "Sender Type",
"advanced": true,
@ -94,9 +91,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["Text"]
},
"sender_name": {
"type": "str",
@ -116,9 +111,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
],
"input_types": ["Text"],
"value": "MySessionID"
},
"_type": "CustomComponent"
},
"description": "Get chat inputs from the Playground.",
"icon": "ChatInput",
"base_classes": [
"Text",
"object",
"Record",
"str"
],
"base_classes": ["Text", "object", "Record", "str"],
"display_name": "Chat Input",
"documentation": "",
"custom_fields": {
@ -161,10 +147,7 @@
"session_id": null,
"return_record": null
},
"output_types": [
"Text",
"Record"
],
"output_types": ["Text", "Record"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -223,9 +206,7 @@
"name": "input_value",
"display_name": "Message",
"advanced": false,
"input_types": [
"Text"
],
"input_types": ["Text"],
"dynamic": false,
"info": "",
"load_from_db": false,
@ -261,10 +242,7 @@
"fileTypes": [],
"file_path": "",
"password": false,
"options": [
"Machine",
"User"
],
"options": ["Machine", "User"],
"name": "sender",
"display_name": "Sender Type",
"advanced": true,
@ -272,9 +250,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["Text"]
},
"sender_name": {
"type": "str",
@ -294,9 +270,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
],
"input_types": ["Text"],
"value": "MySessionID"
},
"_type": "CustomComponent"
},
"description": "Display a chat message in the Playground.",
"icon": "ChatOutput",
"base_classes": [
"Text",
"object",
"Record",
"str"
],
"base_classes": ["Text", "object", "Record", "str"],
"display_name": "Chat Output",
"documentation": "",
"custom_fields": {
@ -339,10 +306,7 @@
"session_id": null,
"return_record": null
},
"output_types": [
"Text",
"Record"
],
"output_types": ["Text", "Record"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -418,10 +382,7 @@
"fileTypes": [],
"file_path": "",
"password": false,
"options": [
"Ascending",
"Descending"
],
"options": ["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": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"sender": {
"type": "str",
@ -466,11 +423,7 @@
"fileTypes": [],
"file_path": "",
"password": false,
"options": [
"Machine",
"User",
"Machine and User"
],
"options": ["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": [
"Text"
]
"input_types": ["Text"]
},
"sender_name": {
"type": "str",
@ -499,9 +450,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["Text"]
},
"session_id": {
"type": "str",
@ -516,9 +465,7 @@
"name": "session_id",
"display_name": "Session ID",
"advanced": false,
"input_types": [
"Text"
],
"input_types": ["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": [
"str",
"Text",
"object"
],
"base_classes": ["str", "Text", "object"],
"display_name": "Chat Memory",
"documentation": "",
"custom_fields": {
@ -544,9 +487,7 @@
"order": null,
"record_template": null
},
"output_types": [
"Text"
],
"output_types": ["Text"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -608,9 +549,7 @@
"name": "template",
"display_name": "Template",
"advanced": false,
"input_types": [
"Text"
],
"input_types": ["Text"],
"dynamic": false,
"info": "",
"load_from_db": false,
@ -675,23 +614,14 @@
"is_input": null,
"is_output": null,
"is_composition": null,
"base_classes": [
"Text",
"str",
"object"
],
"base_classes": ["Text", "str", "object"],
"name": "",
"display_name": "Prompt",
"documentation": "",
"custom_fields": {
"template": [
"context",
"user_message"
]
"template": ["context", "user_message"]
},
"output_types": [
"Text"
],
"output_types": ["Text"],
"full_path": null,
"field_formatters": {},
"frozen": false,
@ -740,9 +670,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"Text"
],
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"str",
"object",
"Text"
],
"base_classes": ["str", "object", "Text"],
"display_name": "OpenAI",
"documentation": "",
"custom_fields": {
@ -959,9 +875,7 @@
"stream": null,
"system_message": null
},
"output_types": [
"Text"
],
"output_types": ["Text"],
"field_formatters": {},
"frozen": false,
"field_order": [
@ -1013,10 +927,7 @@
"name": "input_value",
"display_name": "Value",
"advanced": false,
"input_types": [
"Record",
"Text"
],
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"_type": "CustomComponent"
},
"description": "Display a text output in the Playground.",
"icon": "type",
"base_classes": [
"str",
"object",
"Text"
],
"base_classes": ["str", "object", "Text"],
"display_name": "Inspect Memory",
"documentation": "",
"custom_fields": {
"input_value": null,
"record_template": null
},
"output_types": [
"Text"
],
"output_types": ["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": [
"Document",
"BaseOutputParser",
"Record",
"Text"
]
"inputTypes": ["Document", "BaseOutputParser", "Record", "Text"]
},
"sourceHandle": {
"baseClasses": [
"str",
"Text",
"object"
],
"baseClasses": ["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": [
"Document",
"BaseOutputParser",
"Record",
"Text"
]
"inputTypes": ["Document", "BaseOutputParser", "Record", "Text"]
},
"sourceHandle": {
"baseClasses": [
"Text",
"object",
"Record",
"str"
],
"baseClasses": ["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": [
"Text"
],
"inputTypes": ["Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"Text",
"str",
"object"
],
"baseClasses": ["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": [
"Text"
],
"inputTypes": ["Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"str",
"object",
"Text"
],
"baseClasses": ["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": [
"Record",
"Text"
],
"inputTypes": ["Record", "Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"str",
"Text",
"object"
],
"baseClasses": ["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": {

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

@ -45,9 +45,7 @@
"name": "template",
"display_name": "Template",
"advanced": false,
"input_types": [
"Text"
],
"input_types": ["Text"],
"dynamic": false,
"info": "",
"load_from_db": false,
@ -86,22 +84,14 @@
"is_input": null,
"is_output": null,
"is_composition": null,
"base_classes": [
"object",
"str",
"Text"
],
"base_classes": ["object", "str", "Text"],
"name": "",
"display_name": "Prompt",
"documentation": "",
"custom_fields": {
"template": [
"document"
]
"template": ["document"]
},
"output_types": [
"Text"
],
"output_types": ["Text"],
"full_path": null,
"field_formatters": {},
"frozen": false,
@ -165,9 +155,7 @@
"name": "template",
"display_name": "Template",
"advanced": false,
"input_types": [
"Text"
],
"input_types": ["Text"],
"dynamic": false,
"info": "",
"load_from_db": false,
@ -206,22 +194,14 @@
"is_input": null,
"is_output": null,
"is_composition": null,
"base_classes": [
"object",
"str",
"Text"
],
"base_classes": ["object", "str", "Text"],
"name": "",
"display_name": "Prompt",
"documentation": "",
"custom_fields": {
"template": [
"summary"
]
"template": ["summary"]
},
"output_types": [
"Text"
],
"output_types": ["Text"],
"full_path": null,
"field_formatters": {},
"frozen": false,
@ -280,9 +260,7 @@
"name": "input_value",
"display_name": "Message",
"advanced": false,
"input_types": [
"Text"
],
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"return_record": {
"type": "bool",
@ -340,10 +316,7 @@
"fileTypes": [],
"file_path": "",
"password": false,
"options": [
"Machine",
"User"
],
"options": ["Machine", "User"],
"name": "sender",
"display_name": "Sender Type",
"advanced": true,
@ -351,9 +324,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["Text"]
},
"sender_name": {
"type": "str",
@ -373,9 +344,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"_type": "CustomComponent"
},
"description": "Display a chat message in the Playground.",
"icon": "ChatOutput",
"base_classes": [
"object",
"Record",
"Text",
"str"
],
"base_classes": ["object", "Record", "Text", "str"],
"display_name": "Chat Output",
"documentation": "",
"custom_fields": {
@ -418,10 +380,7 @@
"return_record": null,
"record_template": null
},
"output_types": [
"Text",
"Record"
],
"output_types": ["Text", "Record"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -476,9 +435,7 @@
"name": "input_value",
"display_name": "Message",
"advanced": false,
"input_types": [
"Text"
],
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"return_record": {
"type": "bool",
@ -536,10 +491,7 @@
"fileTypes": [],
"file_path": "",
"password": false,
"options": [
"Machine",
"User"
],
"options": ["Machine", "User"],
"name": "sender",
"display_name": "Sender Type",
"advanced": true,
@ -547,9 +499,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["Text"]
},
"sender_name": {
"type": "str",
@ -569,9 +519,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"_type": "CustomComponent"
},
"description": "Display a chat message in the Playground.",
"icon": "ChatOutput",
"base_classes": [
"object",
"Record",
"Text",
"str"
],
"base_classes": ["object", "Record", "Text", "str"],
"display_name": "Chat Output",
"documentation": "",
"custom_fields": {
@ -614,10 +555,7 @@
"return_record": null,
"record_template": null
},
"output_types": [
"Text",
"Record"
],
"output_types": ["Text", "Record"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -672,10 +610,7 @@
"name": "input_value",
"display_name": "Value",
"advanced": false,
"input_types": [
"Record",
"Text"
],
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"_type": "CustomComponent"
},
"description": "Get text inputs from the Playground.",
"icon": "type",
"base_classes": [
"str",
"Text",
"object"
],
"base_classes": ["str", "Text", "object"],
"display_name": "Text Input",
"documentation": "",
"custom_fields": {
"input_value": null,
"record_template": null
},
"output_types": [
"Text"
],
"output_types": ["Text"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -762,10 +689,7 @@
"name": "input_value",
"display_name": "Value",
"advanced": false,
"input_types": [
"Record",
"Text"
],
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"_type": "CustomComponent"
},
"description": "Display a text output in the Playground.",
"icon": "type",
"base_classes": [
"str",
"Text",
"object"
],
"base_classes": ["str", "Text", "object"],
"display_name": "First Prompt",
"documentation": "",
"custom_fields": {
"input_value": null,
"record_template": null
},
"output_types": [
"Text"
],
"output_types": ["Text"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -873,9 +789,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"Text"
],
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"str",
"Text",
"object"
],
"base_classes": ["str", "Text", "object"],
"display_name": "OpenAI",
"documentation": "",
"custom_fields": {
@ -1092,9 +994,7 @@
"stream": null,
"system_message": null
},
"output_types": [
"Text"
],
"output_types": ["Text"],
"field_formatters": {},
"frozen": false,
"field_order": [
@ -1146,10 +1046,7 @@
"name": "input_value",
"display_name": "Value",
"advanced": false,
"input_types": [
"Record",
"Text"
],
"input_types": ["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": [
"Text"
]
"input_types": ["Text"]
},
"_type": "CustomComponent"
},
"description": "Display a text output in the Playground.",
"icon": "type",
"base_classes": [
"str",
"Text",
"object"
],
"base_classes": ["str", "Text", "object"],
"display_name": "Second Prompt",
"documentation": "",
"custom_fields": {
"input_value": null,
"record_template": null
},
"output_types": [
"Text"
],
"output_types": ["Text"],
"field_formatters": {},
"frozen": false,
"field_order": [],
@ -1257,9 +1146,7 @@
"info": "",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"Text"
]
"input_types": ["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": [
"Text"
],
"input_types": ["Text"],
"value": ""
},
"stream": {
@ -1425,13 +1306,11 @@
"info": "System message to pass to the model.",
"load_from_db": false,
"title_case": false,
"input_types": [
"Text"
]
"input_types": ["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": [
"str",
"Text",
"object"
],
"base_classes": ["str", "Text", "object"],
"display_name": "OpenAI",
"documentation": "",
"custom_fields": {
@ -1476,9 +1351,7 @@
"stream": null,
"system_message": null
},
"output_types": [
"Text"
],
"output_types": ["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": [
"Document",
"BaseOutputParser",
"Record",
"Text"
],
"inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"str",
"Text",
"object"
],
"baseClasses": ["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": [
"Record",
"Text"
],
"inputTypes": ["Record", "Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"object",
"str",
"Text"
],
"baseClasses": ["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": [
"Text"
],
"inputTypes": ["Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"object",
"str",
"Text"
],
"baseClasses": ["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": [
"Document",
"BaseOutputParser",
"Record",
"Text"
],
"inputTypes": ["Document", "BaseOutputParser", "Record", "Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"str",
"Text",
"object"
],
"baseClasses": ["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": [
"Text"
],
"inputTypes": ["Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"str",
"Text",
"object"
],
"baseClasses": ["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": [
"Record",
"Text"
],
"inputTypes": ["Record", "Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"object",
"str",
"Text"
],
"baseClasses": ["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": [
"Text"
],
"inputTypes": ["Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"object",
"str",
"Text"
],
"baseClasses": ["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": [
"Text"
],
"inputTypes": ["Text"],
"type": "str"
},
"sourceHandle": {
"baseClasses": [
"str",
"Text",
"object"
],
"baseClasses": ["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": {

540
src/backend/base/langflow/initial_setup/starter_projects/VectorStore-RAG-Flows.json
View file

File diff suppressed because one or more lines are too long

6
src/frontend/package-lock.json generated
View file

@ -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",

1
src/frontend/package.json
View file

@ -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",

26
src/frontend/playwright.config.ts
View file

@ -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",
use: {
...devices["Desktop Firefox"],
launchOptions: {
firefoxUserPrefs: {
"dom.events.asyncClipboard.readText": true,
"dom.events.testing.asyncClipboard": true,
},
},
},
},
// {
// name: "firefox",
// use: {
// ...devices["Desktop Firefox"],
// launchOptions: {
// firefoxUserPrefs: {
// "dom.events.asyncClipboard.readText": true,
// "dom.events.testing.asyncClipboard": true,
// },
// },
// },
// },
],
webServer: [
{

31
src/frontend/src/App.tsx
View file

@ -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>
);

8
src/frontend/src/alerts/alertDropDown/index.tsx
View file

@ -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 ">

2
src/frontend/src/alerts/error/index.tsx
View file

@ -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">

2
src/frontend/src/alerts/notice/index.tsx
View file

@ -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">

2
src/frontend/src/alerts/success/index.tsx
View file

@ -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">

2
src/frontend/src/components/accordionComponent/composite/folderAccordionComponent/index.tsx
View file

@ -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 {

15
src/frontend/src/components/accordionComponent/index.tsx
View file

@ -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={
sideBar ? "w-full bg-muted px-[0.75rem] py-[0.5rem]" : "ml-3"
}
disabled={disabled}
className={cn(
sideBar ? "w-full bg-muted px-[0.75rem] py-[0.5rem]" : "ml-3",
disabled ? "cursor-not-allowed" : "cursor-pointer",
)}
>
{trigger}
</AccordionTrigger>

22
src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
View file

@ -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>
<Button onClick={handleSaveVariable}>Save Variable</Button>
</BaseModal.Footer>
<BaseModal.Footer
submit={{ label: "Save Variable", dataTestId: "save-variable-btn" }}
/>
</BaseModal>
);
}

4
src/frontend/src/components/cardComponent/components/dragCardComponent/index.tsx
View file

@ -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"}
/>

2
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -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 !== "") {

2
src/frontend/src/components/dictComponent/index.tsx
View file

@ -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",
)}
>
{

4
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -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>

6
src/frontend/src/components/editFlowSettingsComponent/index.tsx
View file

@ -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) => {

31
src/frontend/src/components/fetchErrorComponent/index.tsx
View file

@ -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>
<div className="m-auto">
<Button
disabled={isLoadingHealth}
onClick={() => {
setRetry();
}}
>
{isLoadingHealth ? (
<div>
<IconComponent name={"Loader2"} className={"animate-spin"} />
</div>
) : (
"Retry"
)}
</Button>
</div>
</BaseModal.Footer>
<BaseModal.Footer
submit={{ label: "Retry", loading: isLoadingHealth }}
/>
</BaseModal>
</>
);

6
src/frontend/src/components/genericIconComponent/index.tsx
View file

@ -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;

25
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -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()}

2
src/frontend/src/components/headerComponent/index.tsx
View file

@ -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];

4
src/frontend/src/components/horizontalScrollFadeComponent/index.tsx
View file

@ -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,
);
};

2
src/frontend/src/components/inputComponent/components/popover/index.tsx
View file

@ -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"

2
src/frontend/src/components/inputComponent/components/popoverObject/index.tsx
View file

@ -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"

8
src/frontend/src/components/inputGlobalComponent/index.tsx
View file

@ -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"
/>

6
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -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}
>

1
src/frontend/src/components/shadTooltipComponent/index.tsx
View file

@ -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}

18
src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx
View file

@ -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;

53
src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx
View file

@ -93,24 +93,25 @@ const SideBarFoldersButtonsComponent = ({
return (
<>
<div className="flex shrink-0 items-center justify-between">
<Button variant="primary" onClick={addNewFolder}>
<ForwardedIconComponent
name="Plus"
className="main-page-nav-button"
/>
New Folder
<div className="flex shrink-0 items-center justify-between gap-2">
<div className="flex-1 self-start text-lg font-semibold">Folders</div>
<Button
variant="primary"
size="icon"
className="px-2"
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
name="Upload"
className="main-page-nav-button"
/>
Upload
<ForwardedIconComponent name="Upload" className="w-4" />
</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"}

8
src/frontend/src/components/sidebarComponent/index.tsx
View file

@ -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>

2
src/frontend/src/components/tableAutoCellRender/index.tsx
View file

@ -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}

2
src/frontend/src/components/tagsSelectorComponent/index.tsx
View file

@ -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}

27
src/frontend/src/components/ui/accordion.tsx
View file

@ -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}
>

2
src/frontend/src/components/ui/alert.tsx
View file

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

42
src/frontend/src/components/ui/button.tsx
View file

@ -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";

6
src/frontend/src/components/ui/card.tsx
View file

@ -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",
className
"flex flex-col justify-between rounded-lg border bg-muted text-card-foreground shadow-sm transition-all",
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}
/>

4
src/frontend/src/components/ui/checkbox.tsx
View file

@ -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 && (

4
src/frontend/src/components/ui/custom-accordion.tsx
View file

@ -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}
>

8
src/frontend/src/components/ui/form.tsx
View file

@ -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<

26
src/frontend/src/components/ui/tooltip.tsx
View file

@ -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,
};

1
src/frontend/src/constants/constants.ts
View file

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

24
src/frontend/src/controllers/API/api.tsx
View file

@ -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 lastMethodCalled = localStorage.getItem("lastMethodCalled");
const checkRequest = checkDuplicateRequestAndStoreRequest(config);
const isContained = AUTHORIZED_DUPLICATE_REQUESTS.some((request) =>
config?.url!.includes(request),
);
if (
config?.url === lastUrl &&
!isContained &&
lastMethodCalled === config.method
) {
return Promise.reject("Duplicate request");
if (!checkRequest) {
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}`;

30
src/frontend/src/controllers/API/helpers/check-duplicate-requests.ts Normal file
View file

@ -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;
}

50
src/frontend/src/controllers/API/index.ts
View file

@ -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 };

14
src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
View file

@ -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)}

2
src/frontend/src/customNodes/genericNode/components/tooltipRenderComponent/index.tsx
View file

@ -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

26
src/frontend/src/customNodes/genericNode/index.tsx
View file

@ -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();
}}

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

@ -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);

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

@ -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);

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

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

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

@ -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);

25
src/frontend/src/modals/IOModal/index.tsx
View file

@ -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>
<div className="flex w-full justify-end pt-2">
<Button
variant={"outline"}
className="flex gap-2 px-3"
onClick={() => sendMessage(1)}
>
<BaseModal.Footer
submit={{
label: "Run Flow",
icon: (
<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>
),
}}
/>
) : (
<></>
)}

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

@ -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

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

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

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

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

2
src/frontend/src/modals/apiModal/utils/tabs-array.tsx
View file

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

16
src/frontend/src/modals/apiModal/views/index.tsx
View file

@ -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;

67
src/frontend/src/modals/baseModal/helpers/switch-case-size.ts Normal file
View file

@ -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 };
};

126
src/frontend/src/modals/baseModal/index.tsx
View file

@ -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 }) => {
return <>{children}</>;
const Footer: React.FC<{
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 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;
}
let { minWidth, height } = switchCaseModalSize(size);
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>
)}

2
src/frontend/src/modals/deleteConfirmationModal/index.tsx
View file

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

55
src/frontend/src/modals/editNodeModal/index.tsx
View file

@ -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>
<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.Footer submit={{ label: "Save Changes" }} />
</BaseModal>
);
}

83
src/frontend/src/modals/exportModal/index.tsx
View file

@ -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>
<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.Footer submit={{ label: "Download Flow" }} />
</BaseModal>
);
}
},
);
export default ExportModal;

38
src/frontend/src/modals/flowLogsModal/index.tsx
View file

@ -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.">

31
src/frontend/src/modals/flowSettingsModal/index.tsx
View file

@ -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>
<Button
disabled={nameLists.includes(name) && name !== currentFlow!.name}
onClick={handleClick}
type="submit"
>
Save
</Button>
</BaseModal.Footer>
<BaseModal.Footer
submit={{
label: "Save",
disabled: nameLists.includes(name) && name !== currentFlow!.name,
dataTestId: "save-flow-settings",
loading: isSaving,
}}
/>
</BaseModal>
);
}

6
src/frontend/src/modals/genericModal/index.tsx
View file

@ -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 ? (

52
src/frontend/src/modals/shareModal/index.tsx
View file

@ -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>
<div className="flex w-full justify-between gap-2">
<BaseModal.Footer
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}</>

145
src/frontend/src/modals/storeApiKeyModal/index.tsx
View file

@ -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>
);
}

33
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -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

32
src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
View file

@ -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)}
/>
)}

Some files were not shown because too many files have changed in this diff Show more