🐛 fix(langflow): fix version import error in version endpoint
The version endpoint is added to the API to allow clients to retrieve the version of the Langflow package. The version is obtained using the `metadata.version` function from the `importlib` module. In case the package metadata is not available, an empty string is returned. The version endpoint was previously returning an error due to an import error. The error is fixed by importing the `__version__` variable from the `langflow` module.
✨ feat(App.tsx): add getVersion function to retrieve app version from API
The fetch call to retrieve the app version has been replaced with a call to the getVersion function. This function retrieves the app version from the API. This change improves the code's readability and reduces the amount of code needed to retrieve the app version.
🐛 fix(GenericNode/index.tsx): replace fetch call with postValidateNode function call to validate node
✨ feat(GenericNode/index.tsx): add postValidateNode function to validate node via API
The fetch call to validate the node has been replaced with a call to the postValidateNode function. This function validates the node via the API. This change improves the code's readability and reduces the amount of code needed to validate the node.
🐛 fix(codeAreaModal/index.tsx): replace checkCode function call with postValidateCode function call to validate code
✨ feat(codeAreaModal/index.tsx): add postValidateCode function to validate code via API
The checkCode function call to validate the code has been replaced with a call to the postValidateCode function. This function validates the code via the API. This change improves the code's readability and reduces the amount of code needed to validate the code.
✨ feat(API): add getVersion function to retrieve the version of the API
The API routes have been updated to include the /api/v1/ prefix to improve semantics and avoid conflicts with other routes. The getVersion function has been added to retrieve the version of the API.
The `load_dotenv` function from the `dotenv` package is now used to load environment variables from a `.env` file. This allows for a more flexible configuration of the application as environment variables can be loaded from a file instead of being hardcoded in the code. The `.env` file path can be specified via the `env_file` parameter.
✨ feat(ApiModal): use getPythonApiCode and getCurlCode functions to generate python and curl code
✨ feat(cardComponent): add RenameLabel component to allow renaming of flow name and description
🐛 fix(cardComponent): fix CardDescription height to prevent overflow
The getPythonApiCode, getCurlCode, and getPythonCode functions were refactored into separate functions to improve code readability and maintainability. The ApiModal component now uses the getPythonApiCode and getCurlCode functions to generate the python and curl code. The CardComponent now has a RenameLabel component that allows renaming of the flow name and description. The CardDescription height was also fixed to prevent overflow.
💄 style(cardComponent): update layout of card footer and remove unused code
The background color of the card component has been updated to a lighter shade of blue. The icons used for editing and deleting a flow have been updated to use the Lucide icon library. The layout of the card footer has been updated to align the content to the right and remove unused code.
✨ feat(menuBar): add support for custom emoji and color for each flow
This commit replaces the heroicons with lucide-react icons to improve the consistency of the icon set used in the application. The code has also been refactored to improve readability. Additionally, support for custom emoji and color for each flow has been added to improve the user experience.
The flowName prop has been changed to a flow object to improve semantics and make the code more readable. The cURL code snippet has been added to the API modal to provide an alternative way to interact with the API.
🔨 refactor(ApiModal): change flowName prop to flow object to improve semantics
The tabs trigger border radius has been changed from rounded-sm to rounded-lg to improve the appearance of the tabs. Try-catch blocks have been added to handle errors when processing flow data to prevent the application from breaking. A new function, saveFlowToDatabase, has been added to save new flows to the database. This function is called when a new flow is created, and the ID counter is incremented after the flow is saved. The new flow is then added to the list of flows, and the tab index is set to the new flow.
🎨 style(ui/tabs.tsx): change tabs trigger border radius from rounded-sm to rounded-lg
The graph_data variable was previously assigned to flow_obj.flow, which is incorrect as the flow_obj object does not have a flow attribute. Instead, the correct attribute to use is flow_obj.data.
🔨 refactor(MainPage): remove handleSaveFlow prop from MenuBar component
🔨 refactor(MainPage): export MenuBar component as named export
The axios library is replaced with the fetch API for the getVersion and getHealth functions to reduce the bundle size and improve performance. The handleSaveFlow prop is removed from the MenuBar component as it is not used. The MenuBar component is now exported as a named export to improve code readability and maintainability.
The fetch URL was incorrect and was calling the API with an absolute path instead of a relative path. This caused the API call to fail. The URL has been changed to a relative path to fix the issue.
🐛 fix(base.py): improve error message when invalid payload is received
The logger is added to the Graph class to improve debugging capabilities. The error message when an invalid payload is received is improved to include the keys that were found in the payload. This makes it easier to identify the issue and fix it.
The `display_name` field is added to the `FrontendNode` class to allow for a more user-friendly name to be displayed in the UI. If `display_name` is not set, the `name` field will be used instead.
The new component MenuBar was created to handle the menu bar in the MainPage. It contains all the logic and UI elements related to the menu bar. The component receives props such as activeTab, setRename, rename, flows, tabIndex, and handleSaveFlow. The handleSaveFlow function was moved from the MainPage component to the MenuBar component. The code related to the menu bar was removed from the MainPage component and replaced by the MenuBar component.
🚀 feat(API/index.ts): add getVersion function to fetch API version
🚀 feat(cardComponent/index.tsx): add CardComponent to display flow data
🚀 feat(types/flow/index.ts): add FlowStyleType to represent flow styles
The getVersion function was added to fetch the version of the API. The CardComponent was added to display flow data. The FlowStyleType was added to represent flow styles.
✨ feat(vite.config.ts): add rewrite function to proxy configuration to add /api/v1 prefix to requests
The /api/v1 prefix was removed from the proxy target URL as it was already being added by the rewrite function. The rewrite function was added to the proxy configuration to add the /api/v1 prefix to requests, which is required by the backend API.
Fixes#458
The new configuration allows for debugging the frontend in Chrome by launching the application on http://localhost:3000/* and setting the webRoot to the frontend directory. This will enable developers to debug the frontend code more efficiently. The existing configuration for debugging the backend has been renamed to "Debug Backend" for better clarity. The "justMyCode" property has been set to true to exclude external libraries from debugging.
✨ feat(MainPage): add error handling for adding and updating flows
🔨 refactor(MainPage): extract handleAddFlow and handleSave functions to improve readability
The FlowType now has an optional style property that can be used to style the flow card with an emoji and a color. The CardComponent now supports this feature. The MainPage now has error handling for adding and updating flows. The handleAddFlow and handleSave functions were extracted to improve readability.
The new routes added to the apiRoutes array are "/flows_styles", "/flows_styles/" and "/flows_styles/*". These routes were added to allow the frontend to fetch the styles for the flows.
The CardComponent is a new component that displays information about a flow. It includes a header with the flow name and a delete button, a description, and a footer with badges and an edit button. The component is designed to be reusable and can display different types of flows.
✨ feat(tabsContext.tsx): add support for reading and writing flows to the database
The code has been refactored to improve readability and maintainability. The `addFlow` function has been refactored to extract data from the flow and create a new flow with a default name if no flow is provided. The `processFlowEdges`, `processFlowNodes`, `updateNodeBaseClasses`, `updateNodeEdges`, `updateNodeDescription`, `updateNodeTemplate`, `updateStateWithTabsData`, and `updateStateWithDbData` functions have been added to improve code organization. Support for reading and writing flows to the database has been added to improve data persistence and allow for multiple users to access the same flows.
🔥 refactor(TabsProvider): remove unnecessary whitespace
The commit removes an unnecessary whitespace in the TabsProvider function.
🐛 fix(API): add missing import statement for axios
✨ feat(API): add functions to interact with the backend API for CRUD operations on flows
The missing import statement for axios has been added to the file. The new functions added to the API file allow the frontend to interact with the backend API for CRUD operations on flows. The functions added are `saveFlowToDatabase`, `updateFlowInDatabase`, `readFlowsFromDatabase`, `deleteFlowFromDatabase`, and `getFlowFromDatabase`. These functions allow the frontend to create, read, update, and delete flows from the backend API.
🎨 style(MainPage): refactor card component into a separate file
The card component has been refactored into a separate file to improve code organization and readability. The `CardComponent` is now imported into the `MainPage` file and used to render the flow cards. The `handleSave` function has been updated to call the `updateFlowInDatabase` function with the current flow as an argument.
The create_db_and_tables function is now called on app startup using the FastAPI on_event decorator. This ensures that the database and tables are created before the app starts listening for requests.
Description
This pull request implements the NodeToolbar feature and migrates the
dialog UI to shadCN. The NodeToolbar introduces three actions:
duplicate, delete, and edit. The edit action allows users to modify the
advanced configuration of the tools. Additionally, this pull request
migrates the dialog UI to shadCN, specifically updating the prompt
dialog, code dialog, export dialog, python functions dialog and
tooltips. These enhancements improve the user experience and provide a
more efficient and modern interface.
Changes Made
Added NodeToolbar component to the application.
Implemented duplicate functionality, allowing users to create copies of
the selected nodes.
Implemented delete functionality, enabling users to remove selected
nodes.
Implemented edit functionality, providing users with the ability to
modify the advanced configuration of the tools.
Migrated the prompt dialog UI to shadCN, improving its appearance and
functionality.
Migrated the code dialog UI to shadCN, enhancing its usability and
aesthetics.
Migrated the export dialog UI to shadCN, resulting in a more streamlined
and intuitive interface.
Migrated the python functions dialog UI to shadCN, ensuring consistency
with the rest of the application's design.
Migrated the headlessUI tooltip to shadCN.
FYI: Need to improve the dialog subtitles texts.
