Feature: Folders, Logs, Records Output and more (#1938)

* Add Folder model and related classes

* Add Folder model and related classes

* Add default folder creation for new users

* Add folders_router to APIRouter in router.py

* Add FolderReadWithFlows

* Added Logs button on MenuBar and Logs modal with tabs

* Refactor monitor.py to include response_model for /transactions endpoint

* chore: Add getTransactionTable function to API controller

* starting folder project

* add packages

* ✨ (index.tsx): add ConfirmationModal component to allow users to delete selected flows with a confirmation prompt

* ⬆️ (frontend/package.json): upgrade react-hook-form dependency to version 7.51.4 to ensure compatibility with other packages and improve functionality

* update tableType and getTransactionTable

* Feat: Create Record Output component file

* chore: Remove unnecessary comma in AddNewVariableButton component

* refactor: Update FormControl and FormField imports in cardComponent

* refactor: Update FormControl and FormField imports in cardComponent

* feat: Add CustomInputPopover component for inputComponent

* refactor: Update headerComponent to use anchor tag instead of Button component for select all functionality

* refactor: Update SidebarNav component to handle both link and button items

* chore: Add FolderIcon and FolderPlusIcon to nodeIconsLucide

* refactor: Create Form component and related UI components for form handling

* feat: Add FolderForms component for creating new folders

* refactor: Add objectOptions and isObjectOption to InputComponentType

* add resolvers

* feat: Add flow_id parameter to get_transactions API endpoint

* Refactor vertex logging to use shared log_transaction function

* 🔄 (utils.py): refactor build_clean_params function to be shared between edge and vertex modules for code reusability and maintainability
📝 (utils.py): add build_clean_params function to vertex module to avoid circular import and improve code organization

* ♻️ (utils.py): move import of Vertex class to be under TYPE_CHECKING block to improve code readability and maintainability

* Feat: Add Record Output into backend

* Added Table Output and a mock

* Added data that comes from the Backend

* Fixed types

* mock transaction table

* Refactor log_transaction function to include flow_id parameter

* 📝 (endpoints.py): import `col` from `sqlmodel` to fix reference error in the code
✨ (endpoints.py): add new endpoint `delete_multiple_flows` to delete multiple flows by their IDs
📝 (endpoints.py): add documentation for the `delete_multiple_flows` endpoint
📝 (folderAccordionComponent/index.tsx): create a new component `FolderAccordionComponent` to display a folder accordion with options
📝 (cardComponent/index.tsx): add conditional rendering for `CardFooter` component to display a form field only if `control` prop is provided
📝 (sidebarComponent/index.tsx): add a new array `folderArray` to store folder data for rendering in the sidebar
✨ (sidebarComponent/index.tsx): add new functionality to handle changing folders in the sidebar

✨ (custom-accordion.tsx): add a custom accordion component to the UI library for better user experience and organization of content
✨ (index.tsx): create a new component called ComponentsComponent to display and manage components or flows in the main page of the application

✨ (emptyComponent/index.tsx): add a new component called EmptyComponent to display a message when there are no flows or components created. It includes a button to create a new flow.
✨ (myCollectionComponent/components/headerTabsSearchComponent/index.tsx): add a new component called HeaderTabsSearchComponent to display tabs for switching between "Flows" and "Components" and a search input.
✨ (myCollectionComponent/components/inputSearchComponent/index.tsx): add a new component called InputSearchComponent to display an input field for searching flows or components.
✨ (myCollectionComponent/components/tabsComponent/index.tsx): add a new component called TabsSearchComponent to display tabs for switching between "Flows" and "Components".
♻️ (myCollectionComponent/index.tsx): refactor MyCollectionComponent to include the new HeaderTabsSearchComponent and wrap ComponentsComponent in a div.
✨ (hooks/on-file-drop.tsx): add a new hook called useFileDrop to handle file drop events and upload flows or components.

✨ (MainPage/index.tsx): remove unused imports and sidebarNavItems for "Flows" and "Components" to simplify code and improve maintainability
📝 (MainPage/index.tsx): add handleChangeFolder function to navigate to the selected folder when clicking on a sidebar item
✨ (MainPage/utils/sort-flows.ts): add utility function to sort flows based on updated_at and date_created properties
📝 (routes.tsx): update routes for "flows" and "components" to include sub-routes
♻️ (flowsManagerStore.ts): refactor flowsManagerStore to remove unused code, add allFlows state and setAllFlows action, add setSearchFlowsComponents action

✨ (index.ts): add new properties and methods to FlowsManagerStoreType interface to support search functionality for flows components

* 📝 (endpoints.py): reformat delete_multiple_flows function definition for better readability and adherence to PEP 8 style guide

* feat: Add TableAutoCellRender component for automatic cell rendering in tables

* 📝 (index.tsx): Add useEffect import to sidebarComponent/index.tsx to fix missing dependency warning
✨ (index.tsx): Add getFolders import to sidebarComponent/index.tsx to fetch folders data
♻️ (index.tsx): Refactor SidebarNav component in sidebarComponent/index.tsx to use useEffect hook for fetching folders data
📝 (index.tsx): Add FolderType entity definition to entities/index.tsx
✨ (index.tsx): Create MainPage component in pages/mainPage/index.tsx to display user projects
📝 (index.tsx): Add imports and types to MainPage component in pages/mainPage/index.tsx
✨ (index.tsx): Add useEffect hook to MainPage component in pages/mainPage/index.tsx to set current flow id to null
✨ (index.tsx): Add navigate function to MainPage component in pages/mainPage/index.tsx to navigate to flow page
✨ (index.tsx): Add openModal and openFolderModal states to MainPage component in pages/mainPage/index.tsx to control modals
✨ (index.tsx): Add dropdownOptions array to MainPage component in pages/mainPage/index.tsx for dropdown button options
✨ (index.tsx): Add sidebarNavItems array to MainPage component in pages/mainPage/index.tsx for sidebar navigation items
♻️ (index.tsx): Refactor MainPage component in pages/mainPage/index.tsx to use PageLayout component and render sidebar and outlet
✨ (index.tsx): Add NewFlowModal and FoldersModal components to MainPage component in pages/mainPage/index.tsx
📝 (index.tsx): Add getFolders import to services/index.tsx to fetch folders data
✨ (index.tsx): Add addFolder, updateFolder, deleteFolder, and getFolderById functions to services/index.tsx for CRUD operations on folders
♻️ (index.tsx): Refactor routes.tsx to import MainPage component from pages/mainPage/index.tsx

* Fixed data gathering, now getting from flowpool

* feat: Update get_transactions API endpoint to return TransactionModelResponse objects

* refactor(schema.py): remove redundant __str__ method and improve Record class string representation by returning a JSON string of the data attributes
fix record table

* 🐛 (langflow/__main__.py): fix create_default_folder_if_it_doesnt_exist function call by passing user.id instead of user object
✨ (endpoints.py): add delete_multiple_flows endpoint to delete multiple flows by their IDs
📝 (flows.py): add download_file endpoint to download all flows as a file
🔧 (folders.py): add read_starter_folders endpoint to read starter folders
🔧 (login.py): fix create_default_folder_if_it_doesnt_exist function call by passing user.id instead of user object
🔧 (users.py): fix create_default_folder_if_it_doesnt_exist function call by passing user.id instead of user object
✨ (setup.py): add folder_id field to Flow model and update create_new_project function to include folder_id parameter

📝 (utils.py): import necessary modules and update function signature to use UUID instead of User object
♻️ (utils.py): refactor create_default_folder_if_it_doesnt_exist function to use user_id instead of User object and update SQL query to use UUID
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (index.tsx): refactor useEffect to use useFolderStore instead of getFolders function
📝 (index.tsx): import useFolderStore from foldersStore
♻️ (

✨ (services/index.tsx): update API endpoints for getting, adding, and updating folders to match backend routes
🚀 (flowsManagerStore.ts): add support for fetching starter projects and filtering them out from the list of flows
♻️ (foldersStore.tsx): refactor folder store to use Zustand for state management
📝 (types/zustand/folders/index.ts): add types for the folder store in Zustand

* 📝 (App.tsx): Add import statement for useFolderStore from foldersStore to use the getFoldersApi and loadingFolders variables
📝 (App.tsx): Add useEffect hook to call getFoldersApi on component mount
📝 (ComponentsComponent/index.tsx): Add import statement for FlowType from types/flow
📝 (ComponentsComponent/index.tsx): Add import statement for useFolderStore from foldersStore to use the myCollectionFlows variable
📝 (ComponentsComponent/index.tsx): Add const flowsFromFolder to get the flows from the selected folder in useFolderStore
📝 (ComponentsComponent/index.tsx): Add useEffect hook to set the allFlows state to the flowsFromFolder on component mount
📝 (ComponentsComponent/index.tsx): Add useEffect hook to set the allFlows state to the myCollectionFlows.flows on myCollectionFlows change
📝 (ComponentsComponent/index.tsx): Add useEffect hook to filter the flows based on the searchFlowsComponents state
📝 (ComponentsComponent/index.tsx): Add useEffect hook to call getFolderById and setAllFlows on folderId change
📝 (ComponentsComponent/index.tsx): Add isLoadingFolders variable to isLoading in the conditional rendering of the loading page panel
📝 (ComponentsComponent/index.tsx): Add useEffect hook to call getFoldersApi on component mount
📝 (entities/index.tsx): Add import statement for FlowType from types/flow
📝 (sort-flows.ts): Add optional chaining to flows and f in the filter function
📝 (foldersStore.tsx): Add getMyCollectionFolder function to get the My Collection folder and set the myCollectionFlows state
📝 (foldersStore.tsx): Add setMyCollectionFlow function to set the myCollectionFlows state
📝 (foldersStore.tsx): Add myCollectionFlows state to store the My Collection folder and its flows
📝 (foldersStore.tsx): Call getMyCollectionFolder in the getFolders function to get the My Collection folder on folders load
📝 (foldersStore.tsx): Call getMyCollectionFolder in the setFolders function to get the My Collection folder on folders update
📝 (foldersStore.tsx): Call getMyCollectionFolder in the setLoading function to get the My Collection folder on loading change
📝 (foldersStore.tsx): Call getMyCollectionFolder in the setLoadingById function to get the My Collection folder on loadingById change
📝 (foldersStore.tsx): Add myCollectionFlows state to store the My Collection folder and its flows
📝 (foldersStore.tsx): Call getMyCollectionFolder in the getFolders function to get the My Collection folder on folders load
📝 (foldersStore.tsx): Call getMyCollectionFolder in the setFolders function to get the My Collection folder on folders update
📝 (foldersStore.tsx): Call getMyCollectionFolder in the setLoading function to get the My Collection folder on loading change
📝 (foldersStore.tsx): Call getMyCollectionFolder in the setLoadingById function to get the My Collection folder on loadingById change
📝 (foldersStore.tsx): Add myCollectionFlows state to store the My Collection folder and its flows
📝 (foldersStore.tsx): Call getMyCollectionFolder in the getFolders function to get the My Collection folder on folders load
📝 (foldersStore.tsx): Call getMyCollectionFolder in the setFolders function to get the My Collection folder on folders update
📝 (foldersStore.tsx): Call getMyCollectionFolder in the setLoading function to get the My Collection folder on loading change
📝 (foldersStore.tsx): Call getMyCollectionFolder in the setLoadingById function to get the My Collection folder on loadingById change
📝 (foldersStore.tsx): Add myCollectionFlows state to store the My Collection folder and its flows
📝 (foldersStore.tsx): Call getMyCollectionFolder in the getFolders function to get the My Collection folder on folders load
📝 (foldersStore.tsx): Call getMyCollectionFolder in the setFolders function to get the My Collection folder on folders update
📝 (foldersStore.tsx): Call getMyCollectionFolder in the setLoading function to get the My Collection folder on loading change
📝 (foldersStore.tsx): Call getMyCollectionFolder in the setLoadingById function to get the My Collection folder on loadingById change
📝 (foldersStore.tsx): Add myCollectionFlows state to store the My Collection folder and its flows
📝 (foldersStore.tsx): Call getMyCollectionFolder in the getFolders function to get the My

* 🐛 (flows.py): set default folder for flows without a folder_id to "My Collection" folder if it exists
✨ (componentsComponent/index.tsx): add isLoadingFolder state to track loading status of folder data
📝 (componentsComponent/index.tsx): remove console.log statement
♻️ (componentsComponent/index.tsx): refactor useEffect to setAllFlows only when folderId changes
♻️ (componentsComponent/index.tsx): refactor useEffect to log allFlows when it changes
♻️ (foldersStore.tsx): refactor getMyCollectionFolder to set myCollectionId state
♻️ (foldersStore.tsx): refactor setMyCollectionId to set myCollectionId state

* Feat: create date and string logs components

* ✨ (App.tsx): add autoLogin as a dependency to useEffect to trigger the effect when autoLogin changes
✨ (sideBarButtons/index.tsx): create a new component SideBarButtonsComponent to handle rendering of sidebar buttons
✨ (sideBarFolderButtons/index.tsx): create a new component SideBarFoldersButtonsComponent to handle rendering of sidebar folder buttons
♻️ (index.tsx): refactor SidebarNav component to use SideBarButtonsComponent and SideBarFoldersButtonsComponent for rendering buttons

✨ (index.tsx): add support for editing existing folders by passing folderToEdit prop to FolderForms component
📝 (index.tsx): add form validation using zod schema and zodResolver
♻️ (index.tsx): refactor form handling to use react-hook-form useForm hook and zodResolver for validation
✨ (submit-folder.tsx): create custom hook useFolderSubmit to handle form submission and API calls for adding and updating folders
📝 (entities/index.ts): add zod schema for folder form validation
♻️ (component/index.tsx): refactor imports and remove unused imports
♻️ (component/index.tsx): refactor FolderForms component to use destructuring for props and remove unused imports
♻️ (component/index.tsx): refactor useEffect to handle folderToEdit prop and set form values accordingly
♻️ (component/index.tsx): refactor FormField components to use FormItem and FormMessage components for better form structure and error handling
♻️ (component/index.tsx): refactor FormField components to use name prop instead of deprecated defaultValue prop
♻️ (component/index.tsx): refactor FormField components to use name prop instead of deprecated defaultValue prop
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component
🔧 (component/index.tsx): add missing import for FormMessage component

✨ (componentsComponent/index.tsx): remove unused isLoadingFolder variable
♻️ (componentsComponent/index.tsx): refactor useEffect to handle folderId and myCollectionId logic separately for better readability
♻️ (componentsComponent/index.tsx): refactor useEffect to setAllFlows with a delay of 500ms for smoother rendering
📝 (componentsComponent/index.tsx): remove console.log statement
✨ (modalsComponent/index.tsx): add ModalsComponent to handle different modals in ComponentsComponent
✨ (inputSearchComponent/index.tsx): add allFlows dependency to disable search input when there are no flows
✨ (delete-folder.tsx): add useDeleteFolder hook to handle folder deletion logic
✨ (dropdown-options.tsx): add useDropdownOptions hook to handle dropdown options for import from JSON

📝 (index.tsx): refactor MainPage's index.tsx to improve code readability and maintainability
✨ (index.tsx): introduce ModalsComponent to handle modals in MainPage
♻️ (foldersStore.tsx): refactor getFoldersApi function in foldersStore to allow refetching of folders
♻️ (foldersStore.tsx): refactor setFolderToEdit function in foldersStore to improve semantics
♻️ (index.ts): refactor FoldersStoreType in types/zustand/folders/index.ts to improve semantics
♻️ (tailwind.config.js): refactor tailwind.config.js to add display variant for group-hover

* 🐛 (flows.py): import `col` from `sqlmodel` to fix reference error
🐛 (flows.py): change route method from DELETE to POST for deleting multiple flows
🐛 (flows.py): fix reference error in `delete_multiple_flows` function
📝 (schemas.py): add `FlowListIds` schema to handle flow ids for multiple delete
✨ (index.tsx): remove trailing commas in useState calls
♻️ (index.tsx): remove unnecessary ternary operator in className
♻️ (index.tsx): remove unnecessary arrow function in onDelete prop
♻️ (index.tsx): remove unnecessary props in DeleteConfirmationModal component
♻️ (index.tsx): remove unnecessary props in Button component
♻️ (index.tsx): remove unnecessary props in Icon component
♻️ (index.tsx): remove unnecessary props in Spinner component
♻️ (index.tsx): remove unnecessary props in IconButton component
♻️ (index.tsx): remove unnecessary props in Tooltip component
♻️ (index.tsx): remove unnecessary props in Text component
♻️ (index.tsx): remove unnecessary props in Flex component
♻️ (index.tsx): remove unnecessary props in Box component
♻️ (index.tsx): remove unnecessary props in Avatar component
♻️ (index.tsx): remove unnecessary props in Badge component
♻️ (index.tsx): remove unnecessary props in Image component
♻️ (index.tsx): remove unnecessary props in Heading component
♻️ (index.tsx): remove unnecessary props in Divider component
♻️ (index.tsx): remove unnecessary props in Spacer component
♻️ (index.tsx): remove unnecessary props in Stack component
♻️ (index.tsx): remove unnecessary props in Collapse component
♻️ (index.tsx): remove unnecessary props in Modal component
♻️ (index.tsx): remove unnecessary props in Portal component
♻️ (index.tsx): remove unnecessary props in Transition component
♻️ (index.tsx): remove unnecessary props in useFlowsManagerStore hook
♻️ (index.tsx): remove unnecessary props in useDisclosure hook
♻️ (index.tsx): remove unnecessary props in useToast hook
♻️ (index.tsx): remove unnecessary props in useColorModeValue hook
♻️ (index.tsx): remove unnecessary props in useBreakpointValue hook
♻️ (index.tsx): remove unnecessary props in useMediaQuery hook
♻️ (index.tsx): remove unnecessary props in useBoolean hook
♻️ (index.tsx): remove unnecessary props in useOutsideClick hook
♻️ (index.tsx): remove unnecessary props in useClipboard hook
♻️ (index.tsx): remove unnecessary props in useMergeRefs hook
♻️ (index.tsx): remove unnecessary props in useSafeLayoutEffect hook
♻️ (index.tsx): remove unnecessary props in useUpdateEffect hook
♻️ (index.tsx): remove unnecessary props in usePrevious hook
♻️ (index.tsx): remove unnecessary props in useTimeout hook
♻️ (index.tsx): remove unnecessary props in useDebounce hook
♻️ (index.tsx): remove unnecessary props in useThrottle hook
♻️ (index.tsx): remove unnecessary props in useWindowSize hook
♻️ (index.tsx): remove unnecessary props in useHover hook
♻️ (index.tsx): remove unnecessary props in useFocusWithin hook
♻️ (index.tsx): remove unnecessary props in useIntersect hook
♻️ (index.tsx): remove unnecessary props in useInViewport hook
♻️ (index.tsx): remove unnecessary props in useMeasure hook
♻️ (index.tsx): remove unnecessary props in useMotionValue hook
♻️ (index.tsx): remove unnecessary props in useTransform hook
♻️ (index.tsx): remove unnecessary props in useSpring hook
♻️ (index.tsx): remove unnecessary props in useDragControls hook
♻️ (index.tsx): remove unnecessary props in usePanGesture hook
♻️ (index.tsx): remove unnecessary props in useScrollControls hook
♻️ (index.tsx): remove unnecessary props in useViewportScroll hook
♻️ (index.tsx): remove unnecessary props in useAnimation hook
♻️ (index.tsx): remove unnecessary props in useCycle hook
♻️ (index.tsx): remove unnecessary props in useLottie hook
♻️ (index.tsx): remove unnecessary props in useMotionConfig hook
♻️ (index.tsx): remove unnecessary props in usePresence hook
♻

✨ (componentsComponent/index.tsx): import multipleDeleteFlowsComponents from API controller to enable multiple deletion of flows and components
✨ (componentsComponent/index.tsx): add handleDelete function to handle individual deletion of flows and components
✨ (componentsComponent/index.tsx): add handleDeleteMultiple function to handle multiple deletion of flows and components
✨ (componentsComponent/index.tsx): add description prop to DeleteConfirmationModal to specify the type of item being deleted
📝 (modalsComponent/index.tsx): add description prop to DeleteConfirmationModal to specify the type of item being deleted

* feat: Add JSON string representation to Record attributes
feat: fix table view for Record

* feat(frontend): add ArrayReader, NumberReader, ObjectRender components
feat(frontend): add DateReader component to format date strings
fix(frontend): fix component naming conventions for consistency
feat(frontend): update TableAutoCellRender to use new components for rendering
feat(frontend): update FlowLogsModal to use pagination and adjust modal size based on content

* refactor(utils): update timestamp regex to handle optional milliseconds

* refactor(api): update /monitor/messages endpoint to return MessageModel objects

* refactor(api): update /monitor/messages endpoint to return List[MessageModel]

* feat(modals): enable fake column editing in FlowLogsModal

* update recordsOutput to expect object instead of string

* refactor: update RecordsOutput to expect object instead of string

* refactor: update RecordsOutputComponent to use extracted columns from rows and get multiple records

* ✨ (flows.py): set default folder for newly created flows to "My Collection" if no folder is specified
♻️ (sideBarButtons/index.tsx): remove unused import and refactor code to simplify rendering of sidebar buttons
♻️ (sideBarFolderButtons/index.tsx): refactor code to simplify rendering of sidebar folder buttons and improve readability
♻️ (index.ts): refactor saveFlowToDatabase function to handle null folder_id values correctly
♻️ (NewFlowCardComponent/index.tsx): refactor code to set folder URL when creating a new flow
♻️ (undrawCards/index.tsx): refactor code to set folder URL when creating a new flow and remove unused import

📝 (newFlowModal/index.tsx): remove commented out code for IconComponent to improve code readability
📝 (newFlowModal/index.tsx): remove commented out code for examples.map to improve code readability
📝 (newFlowModal/index.tsx): change key values for UndrawCardComponent to improve uniqueness
📝 (FlowPage/index.tsx): remove unused import for useDarkStore to improve code cleanliness
📝 (FlowPage/index.tsx): remove extra whitespace to improve code readability
📝 (ComponentsComponent/index.tsx): add setFolderUrl function to set the folderUrl state in the folder store
📝 (ComponentsComponent/index.tsx): remove unnecessary whitespace to improve code readability
📝 (tabsComponent/index.tsx): add folderUrl state to navigate function to maintain folder state when changing tabs
📝 (routes.tsx): add nested route for /flow/:id/ to render FlowPage component
📝 (flowsManagerStore.ts): add folder_id property to newFlow object to store the current folder URL
📝 (foldersStore.tsx): remove unnecessary comma to fix syntax error
📝 (foldersStore.tsx): add folderUrl state and setFolderUrl function to store the current folder URL

🐛 (reactflowUtils.ts): remove unused parameter 'edges' in isValidConnection function
♻️ (reactflowUtils.ts): refactor scapeJSONParse and scapeJSONStringfy functions to remove unnecessary exclamation marks
🐛 (reactflowUtils.ts): fix bug in updateIds function where selectionIds could be undefined
🐛 (reactflowUtils.ts): fix bug in updateIds function where edge.sourceHandle could be undefined
🐛 (reactflowUtils.ts): fix bug in updateIds function where edge.targetHandle could be undefined
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in validateNode function where scapeJSONParse was called twice
🐛 (reactflowUtils.ts): fix bug in

📝 (file): update line 785 to fix a typo or improve code readability

✨ (reactflowUtils.ts): remove unnecessary comma at the end of the line
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
📝 (reactflowUtils.ts): add missing JSDoc comments to functions
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability and remove unnecessary code
♻️ (reactflowUtils.ts): refactor code to improve readability

* refactor: Update FlowLogsModal to fetch and display messages table based on active tab

* update package lock

* 🐛 (folders.py): import missing dependencies and update code to handle folder components and flows
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders.py): fix typo in update statement
🐛 (folders

✨ (componentsComponent/index.tsx): add support for selecting and deselecting multiple flows/components
🔧 (componentsComponent/index.tsx): update import statement for react-hook-form to include useWatch
♻️ (componentsComponent/index.tsx): refactor handleSelectAll function to only select flows from folder
♻️ (componentsComponent/index.tsx): refactor handleSelectOptionsChange function to check selectedFlowsComponentsCards length
♻️ (componentsComponent/index.tsx): refactor handleDeleteMultiple function to use selectedFlowsComponentsCards
✨ (componentsComponent/index.tsx): update selectedFlowsComponentsCards state when form values change
♻️ (componentsComponent/index.tsx): refactor getDescriptionModal to use useMemo
🐛 (inputSearchComponent/index.tsx): disable input search when loading, no flows, or no searchFlowsComponents
♻️ (flowsManagerStore.ts): add selectedFlowsComponentsCards state and setSelectedFlowsComponentsCards function
📝 (zustand/flowsManager/index.ts): update FlowsManagerStoreType to include selectedFlowsComponentsCards state and setSelectedFlowsComponentsCards function
📝 (deleteComponentFlows.spec.ts): update confirmation message for deleting a component

* 🐛 (index.tsx): filter out flows without a folder_id to prevent errors when mapping over flows
🐛 (index.ts): add folder_id property to FlowType to properly handle flows with a folder_id

* 📝 (sidebarComponent): remove console.log statement for items variable
♻️ (sidebarComponent): refactor sideBarButtons component to fix button width and improve styling
♻️ (sidebarComponent): refactor sideBarFolderButtons component to fix folder name truncation and improve styling
♻️ (sidebarComponent): refactor sidebarNav component to fix className prop
♻️ (mainPage): refactor HomePage component to remove unnecessary parentheses and fix indentation

* 📝 (on-file-drop.tsx): import `useLocation` from `react-router-dom` to use location state in the component
♻️ (on-file-drop.tsx): refactor `useFlowsManagerStore` to `useFolderStore` to use the correct store for getting folder data
✨ (on-file-drop.tsx): add `location` and `folderId` variables to get the folder id from the location state
✨ (on-file-drop.tsx): call `getFolderById` function instead of `setAllFlows` to update the folder data after successful upload

* Implemented Dict modal on Cell Editor for objects

* ✨ (sideBarFolderButtons/index.tsx): add support for file drop functionality in the sidebar folder buttons component
📝 (use-on-file-drop.tsx): create a custom hook for handling file drop functionality in the sidebar component
📝 (componentsComponent/index.tsx): update import statement for the useFileDrop hook in the components component
📝 (use-delete-folder.tsx): create a custom hook for handling folder deletion in the MainPage component
📝 (use-dropdown-options.tsx): create a custom hook for generating dropdown options in the MainPage component

✨ (use-on-file-drop.tsx): add a new hook for handling file drop functionality in the MainPage component
✨ (index.tsx): update import paths for hooks in the MainPage component
♻️ (flowsManagerStore.ts): refactor the addFlow function to include a new parameter 'fromDragAndDrop' to differentiate between adding a flow from drag and drop or other methods
♻️ (foldersStore.tsx): refactor the folder store to include a new state 'folderDragging' to store the folder being dragged
♻️ (index.ts): refactor the types in the flowsManager and folders store to include the new 'fromDragAndDrop' parameter

* 📝 (App.tsx): Remove unnecessary line breaks and trailing commas for better code readability
♻️ (App.tsx): Refactor code to remove unused variables and dependencies
✨ (App.tsx): Add support for fetching folders on login and error handling
♻️ (popoverObject/index.tsx): Refactor code to remove unnecessary ternary operators and improve code readability
♻️ (foldersModal/component/index.tsx): Refactor code to improve code readability and consistency
♻️ (foldersModal/index.tsx): Refactor code to improve code readability and consistency

✨ (actionsMainPage.spec.ts): add end-to-end tests for selecting and deleting all items, and searching flows and components
✨ (folders.spec.ts): add end-to-end tests for CRUD operations on folders and adding a folder by drag and drop

* Refactor: Change the no data table screen to a better version

* refactor: Update ObjectRender component to display truncated object and provide option to see more

* style(objectRender): add hover effect to object render component for better user experience
style(tailwind.config.js): add slow-wiggle animation to tailwind config for smoother animation effect

* 📝 (inputComponent/index.tsx): remove unnecessary whitespace in className prop to improve code readability
📝 (inputComponent/index.tsx): update id prop value to include object id for better identification
📝 (inputComponent/index.tsx): update id prop value to include object id for better identification
📝 (inputComponent/index.tsx): remove unnecessary whitespace in className prop to improve code readability
📝 (inputComponent/index.tsx): remove unnecessary whitespace in className prop to improve code readability
📝 (inputComponent/index.tsx): remove unnecessary whitespace in className prop to improve code readability
📝 (inputComponent/index.tsx): remove unnecessary whitespace in className prop to improve code readability
📝 (inputComponent/index.tsx): remove unnecessary whitespace in className prop to improve code readability
📝 (inputComponent/index.tsx): remove unnecessary whitespace in className prop to improve code readability
📝 (inputComponent/index.tsx): remove unnecessary whitespace in className prop to improve code readability
📝 (inputComponent/index.tsx): remove unnecessary whitespace in className prop to improve code readability
📝 (inputComponent/index.tsx): remove unnecessary whitespace in className prop to improve code readability
📝 (sidebarComponent/components/sideBarButtons/index.tsx): remove unused item.icon prop
📝 (sidebarComponent/index.tsx): add isFolderPath variable to check if current path is a folder path
📝 (sidebarComponent/index.tsx): add isFolderPath variable to check if current path is a folder path
📝 (foldersModal/component/index.tsx): update id prop value for flow input component
📝 (foldersModal/component/index.tsx): update id prop value for component input component
📝 (end-to-end/actionsMainPage.spec.ts): update getByText assertions to include { exact: true } option for more accurate matching

✨ (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
✨ (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove unnecessary characters in input text
📝 (chatInputOutput.spec.ts): update test case to improve readability and remove

✅ (nestedComponent.spec.ts): remove unnecessary code related to showpinecone_env checkbox
✅ (store.spec.ts): use environment variable STORE_API_KEY instead of hardcoding the API key

* 📝 (inputComponent/index.tsx): update id prop value to include "popover-anchor-" prefix for better identification and accessibility
✨ (sidebarComponent/components/sideBarButtons/index.tsx): add react-router-dom Link component to wrap each sidebar button item for navigation functionality
♻️ (sidebarComponent/index.tsx): refactor isFolderPath logic to use array of path values and check if any of them is included in the current pathname for better readability and maintainability

* Refactor: use shadcn alert when there is no data

* Remove unnecessary quotes

* Refactor: add border to no data alert

* Fix: record output not using table as it should

* 📝 (cardComponent/index.tsx): remove redundant "selected" from description prop in DeleteConfirmationModal component
📝 (componentsComponent/index.tsx): remove redundant "selected" from getDescriptionModal function

* ✨ (logs.spec.ts): add end-to-end test for viewing and interacting with logs in the frontend
📝 (logs.spec.ts): add documentation comments to improve code readability and maintainability

* 📝 (folders.py): add support for downloading all flows from a folder as a file
📝 (folders.py): add support for uploading flows from a file to a folder
✨ (index.tsx): add handleDownloadFolderFn utility function to handle downloading flows from a folder
✨ (index.tsx): add handleUploadFlowsToFolder function to handle uploading flows to a folder
📝 (services/index.ts): add downloadFlowsFromFolders function to make API call for downloading flows from a folder
📝 (services/index.ts): add uploadFlowsFromFolders function to make API call for uploading flows to a folder
📝 (handle-download-folder.ts): create handleDownloadFolderFn utility function to handle downloading flows from a folder

✨ (foldersStore.tsx): add support for uploading flows from folders
📝 (foldersStore.tsx): update types to include uploadFolder function in FoldersStoreType

* 📝 (folders.py): remove unnecessary whitespace to improve code readability
📝 (folders.py): remove unnecessary whitespace to improve code readability

* style: update CSS in App.css to improve scrollbar appearance
feat: add TableComponent to CsvOutputComponent for better table rendering
refactor: remove unused code and improve readability in CsvOutputComponent
refactor: simplify logic in TableAutoCellRender component
feat: add autoHeight property to columns in extractColumnsFromRows utility function

* 🐛 (folders.py): fix issue where components and flows were not being assigned to the new folder
🐛 (folders.py): fix issue where components and flows were not being assigned to the new folder
🐛 (sideBarFolderButtons/index.tsx): fix issue where folder buttons were not taking up full width
🐛 (use-on-file-drop.tsx): fix issue where folder dragging was not being reset on drag leave
🐛 (use-on-file-drop.tsx): fix issue where folder dragging was not being reset on drag leave
🐛 (use-on-file-drop.tsx): fix issue where folder dragging was not being reset on drag leave
🐛 (entities/index.tsx): fix issue where AddFolderType was missing flows and components properties
🐛 (services/index.ts): fix issue where addFolder function was not correctly sending flows and components data

* 📝 (model.py): remove unnecessary whitespace
📝 (index.tsx): remove unused 'pathname' prop
📝 (index.tsx): add 'handleAddFolder' prop to SideBarFoldersButtonsComponent
📝 (index.tsx): remove unused 'handleAddFolder' prop from SideBarButtonsComponent
📝 (index.tsx): remove unused import of DropdownButton in sideBarFolderButtons
📝 (index.tsx): add DropdownButton component to SideBarFoldersButtonsComponent
📝 (index.tsx): add 'handleAddFolder' prop to SideBarFoldersButtonsComponent
📝 (use-on-file-drop.tsx): remove console.log statements
📝 (index.tsx): remove console.log statements
📝 (index.tsx): remove unused import of FolderPlusIcon in mainPage
📝 (index.tsx): remove unused sidebarNavItems array in mainPage

* Refactor: make select all look more like a button

* feat: Add first step of drag and drop functionality to CollectionCardComponent

* 📝 (langflow-pre.db): add new langflow-pre.db file to the backend/base/langflow directory
✨ (index.tsx): improve modal header description by dynamically displaying "Edit a folder" or "Add a new folder" based on the presence of folderToEdit prop

* remove api key

* remove api key

* remove api key

* Refactor: Update downloadFlowsFromFolders function to include folder name in response

* add type to folder function

* Refactor: Update chatComponent and sideBarFolderButtons components

This commit refactors the chatComponent and sideBarFolderButtons components.

In chatComponent:
- Moved the declaration of the 'currentFlow' variable to ensure it is defined before being used.
- Removed the unused 'hasIO' and 'hasStore' variables.
- Reordered the imports for better organization.

In sideBarFolderButtons:
- Added imports for 'useStoreStore' and 'ShadTooltip' components.
- Removed the unused 'hasStore', 'validApiKey', and 'hasApiKey' variables.
- Removed the unused 'handleEditFolder' function.
- Added a new button with an icon for sharing as a bundle, with a tooltip indicating the need to review the API key before sharing.

These changes improve the code structure and remove unused code, enhancing the overall maintainability and user experience of the application.

* copy folder modal structure to start bundle modal

* new lock

* refactor: Move no data alert rendering logic to a separate function

* refactor: Move no data alert rendering logic to a separate function

* add truncate to json objects

* Refactor: store flow_id in ChatComponent's records in ChatComponent

* 📝 (folders.py): add missing import for FolderBase model
🐛 (folders.py): fix issue where flows were not being fetched for a folder
🐛 (folders.py): fix issue where flows were not being deleted when a folder is deleted
🐛 (folders.py): fix issue where folder description was not being returned when downloading flows
✨ (folders.py): add support for uploading flows from a file
🐛 (schemas.py): fix issue where folder description was not included in FlowListReadWithFolderName schema
♻️ (sideBarButtons/index.tsx): refactor handleOpenNewFolderModal prop to be optional

✨ (sideBarFolderButtons/index.tsx): make handleChangeFolder, handleEditFolder, handleDeleteFolder, handleAddFolder optional to improve component reusability
♻️ (sideBarFolderButtons/index.tsx): refactor useFileDrop hook to use async/await syntax and separate file upload logic into a separate function
✨ (sideBarFolderButtons/index.tsx): add support for uploading flows from folders using the uploadFlowsFromFolders API
♻️ (sideBarFolderButtons/index.tsx): refactor handleFileDrop function to handle multiple files and use FormData to send file data to the server
♻️ (sideBarFolderButtons/index.tsx): refactor dragOver, dragEnter, dragLeave, and onDrop functions to remove unnecessary folderId parameter and set folderDragging state to a boolean value instead of an empty string

📝 (sidebarComponent/index.tsx): make handleOpenNewFolderModal, handleChangeFolder, handleEditFolder, handleDeleteFolder optional to allow flexibility in using the component
📝 (foldersModal/component/index.tsx): add allFlows variable to get all flows from the store and use it to filter components and flows on the folder being edited
📝 (foldersModal/hooks/submit-folder.tsx): import useNavigate from react-router-dom and use it to navigate to the folder page after creating or updating a folder
📝 (pages/MainPage/entities/index.tsx): add StarterProjectsType to define the type of starter projects
📝 (pages/MainPage/pages/mainPage/index.tsx): import useAlertStore from stores/alertStore and use it to set error data when trying to download an empty folder

📝 (services/index.ts): add StarterProjectsType import to support the new entity in the code
📝 (services/index.ts): add return type to updateFolder function to improve code clarity
📝 (services/index.ts): add return type to getFolderById function to improve code clarity
📝 (services/index.ts): add return type to getStarterProjects function to improve code clarity
📝 (services/index.ts): add folder_description property to the return type of downloadFlowsFromFolders function to provide additional information about the folder
📝 (services/index.ts): remove folderId parameter from uploadFlowsFromFolders function as it is not needed
📝 (utils/handle-download-folder.ts): add folder_name and folder_description properties to the data object to provide additional information about the folder being downloaded
📝 (SettingsPage/index.tsx): remove commented out code for unused settings options
📝 (stores/flowsManagerStore.ts): add missing comma in setCurrentFlowId function
📝 (stores/flowsManagerStore.ts): add return type to saveFlow function to improve code clarity
📝 (stores/flowsManagerStore.ts): add return type to updateFlow function to improve code clarity
📝 (stores/flowsManagerStore.ts): add return type to addFlow function to improve code clarity
📝 (stores/flowsManagerStore.ts): add return type to deleteFlow function to improve code clarity
📝 (stores/flowsManagerStore.ts): add return type to addFlowComponent function to improve code clarity
📝 (stores/flowsManagerStore.ts): add return type to takeSnapshot function to improve code clarity
📝 (stores/flowsManagerStore.ts): add return type to undo function to improve code clarity
📝 (stores/flowsManagerStore.ts): add return type to redo function to improve code clarity

♻️ (foldersStore.tsx): change folderDragging variable type from string to boolean to improve semantics and consistency
♻️ (foldersStore.tsx): remove unused folderId parameter from uploadFolder function
♻️ (foldersStore.tsx): remove unused setAllFlows function call
♻️ (folders/index.ts): change folderDragging variable type from string to boolean to match the updated type in foldersStore.tsx

* 🐛 (folders.py): fix indentation and remove unnecessary whitespace
✨ (folders.py): add logic to handle duplicate folder names by appending a number to the folder name
📝 (folders.py): update comments and documentation

* 🐛 (submit-folder.tsx): remove unnecessary comma after closing curly brace in error handling function
🐛 (index.tsx): remove unnecessary comma after closing parenthesis in state selectors
♻️ (index.tsx): refactor code to simplify logic for getting folder by ID and handling default case

* refactor: Update add_row_to_table function to use list comprehension for values

* Refactor: Update placeholder text capitalization in headerComponent and inputSearchComponent
In headerComponent:
- Changed "Select all" to "Select All" for better consistency and readability.
In inputSearchComponent:
- Changed "Search flows" to "Search Flows" and "Search components" to "Search Components" for better consistency and readability.

These changes improve the user experience and maintain consistency in the application.

* Modularized scroll fade and added it to folders

* refactor(componentsComponent): remove unnecessary switch statement in handleSelectOptionsChange function
feat(headerComponent): replace Select component with a Button component for delete action
feat(headerComponent): add disableDelete prop to Button component to handle delete button state based on selected items

* Made selector not disappear after hover if selected

* fixed selector

* 🐛 (folders.py): fix updating folder components and flows logic
✨ (folders.py): add support for moving excluded flows to "My Collection" folder

* ♻️ (folders.py): remove unnecessary whitespace
🐛 (folders.py): fix indentation issue in update_folder function

* refactor(headerComponent): replace Select component with Button component for delete action

* refactor: Handle float conversion errors in validate_id method

* Fix adding primary key

* Refactor: remove trash from card and make checkbox always visible

* Refactor: add padding on card title to avoid bugs

* chore: Add h-full class to sideBarFolderButtons component

* 📝 (api.tsx): add import statement for useUtilityStore from utilityStore to use the utility store in the API interceptor
📝 (api.tsx): add lastUrlCalled and setLastUrlCalled variables to store and retrieve the last URL called in the API interceptor
📝 (api.tsx): add logic to check for duplicate requests in the API interceptor based on the last URL called
📝 (api.tsx): add localStorage to store the last URL called in the API interceptor
📝 (api.tsx): add logic to add access token to every request in the API interceptor
♻️ (index.tsx): refactor selectedFolder?.flows to remove unnecessary parentheses in ComponentsComponent
♻️ (index.tsx): refactor state.searchFlowsComponents.toLowerCase() to remove unnecessary parentheses in ComponentsComponent
♻️ (index.tsx): refactor state.selectedFlowsComponentsCards to remove unnecessary parentheses in ComponentsComponent
♻️ (index.tsx): refactor (f.is_component ?? false) === is_component to remove unnecessary parentheses in ComponentsComponent
📝 (utilityStore.ts): add lastUrlCalled and setLastUrlCalled variables to utility store to store and retrieve the last URL called

* 📝 (api.tsx): remove unused import of useUtilityStore from utilityStore
♻️ (api.tsx): remove unused variables lastUrlCalled and setLastUrlCalled from useUtilityStore
📝 (utilityStore.ts): remove unused variable lastUrlCalled and setLastUrlCalled from utilityStore

* refactor: Add flow_id parameter to log_message function

* fix undefined bug

* refactor: Update add_row_to_table function to use list comprehension for values

* refactor: Add flow_id field to FlowCreate and FlowRead models

* refactor: Update FlowCreate and FlowRead models to use folder_id instead of flow_id

* Refactor: make drag n drop works in the entire screen

* ⬆️ (frontend/package.json): upgrade "@playwright/test" dependency from version 1.43.1 to 1.44.0
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of XPath locator with text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "Actions" and "Delete" text locators with "icon-Trash2" locator for better specificity
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "Delete" text locator with "Delete" button locator for better specificity
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "Select All" text locator with "Select All" button locator for better specificity
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "Unselect All" text locator with "Unselect All" button locator for better specificity
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "Actions" text locator with "icon-Trash2" locator for better specificity
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "Delete" text locator with "Delete" button locator for better specificity
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "Select All" text locator with "Select All" button locator for better specificity
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end-to-end/actionsMainPage.spec.ts): replace the usage of "New Project" XPath locator with "New Project" text locator for better readability and maintainability
✨ (frontend/tests/end

✨ (floatComponent.spec.ts): update selector for clicking "New Project" button to improve test reliability
✨ (flowPage.spec.ts): update selector for clicking "New Project" button to improve test reliability
✨ (flowSettings.spec.ts): update selector for clicking "New Project" button to improve test reliability
✨ (folders.spec.ts): update selector for clicking "New Project" button to improve test reliability
✨ (folders.spec.ts): update selector for clicking "New Folder" button to improve test reliability
✨ (folders.spec.ts): update selector for clicking "Edit Folder" button to improve test reliability
✨ (folders.spec.ts): update selector for dispatching drop event to improve test reliability
✨ (globalVariables.spec.ts): update selector for clicking "New Project" button to improve test reliability
✨ (group.spec.ts): update selector for clicking "New Project" button to improve test reliability
✨ (inputComponent.spec.ts): update selector for clicking "New Project" button to improve test reliability
✨ (inputListComponent.spec.ts): update selector for clicking "New Project" button to improve test reliability
✨ (intComponent.spec.ts): update selector for clicking "New Project" button to improve test reliability
✨ (keyPairListComponent.spec.ts): update selector for clicking "New Project" button to improve test reliability
✨ (langflowShortcuts.spec.ts): update selector for clicking "New Project" button to improve test reliability
✨ (nestedComponent.spec.ts): update selector for clicking "New Project" button to improve test reliability
✨ (promptModalComponent.spec.ts): update selector for clicking "New Project" button to improve test reliability
✨ (python_api_generation.spec.ts): update selector for clicking "New Project" button to improve test reliability

✨ (saveComponents.spec.ts): update selector for clicking "New Project" button to improve test reliability and maintainability
✨ (store.spec.ts): update selector for clicking "New Project" button to improve test reliability and maintainability
✨ (textAreaModalComponent.spec.ts): update selector for clicking "New Project" button to improve test reliability and maintainability
✨ (textInputOutput.spec.ts): update selector for clicking "New Project" button to improve test reliability and maintainability
✨ (toggleComponent.spec.ts): update selector for clicking "New Project" button to improve test reliability and maintainability
✨ (tweaks_test.spec.ts): update selector for clicking "New Project" button to improve test reliability and maintainability
📝 (test-results/.last-run.json): add .last-run.json file to track test run status

* Refactor: make drag n drop only happen in the folder div

* refactor: Fix incorrect variable assignment in memory.py

* refactor: Update data retrieval in InterfaceVertex to use record data instead of model_dump

* refactor: Update DateReader component to use 12-hour time format

* refactor: Update activeTab state variable in FlowLogsModal component

* refactor: Update FlowCreate and FlowRead models to use folder_id instead of flow_id

* refactor: Update hover animation in ObjectRender component

* refactor: Update icon in FlowLogsModal component

* add table preview on IO

* refactor: Add truncate class to StringReader component

* refactor: Add TableAutoCellRender support for displaying badges

* refactor: Add filter option to extractColumnsFromRows function

* update card width

* style(IOFieldView): update className condition to dynamically set height based on 'left' prop value

* fix(IOFieldView): update height class value from "h-36" to "h-56" for better UI consistency
fix(FlowLogsModal): update BaseModal.Header description based on activeTab value for dynamic content display

* Update BaseModal.Header description in FlowLogsModal component

* refactor: Update dict_values_to_string function to use deepcopy for dictionary copy

* 📝 (sideBarFolderButtons): Remove unused variables and improve code readability
📝 (api): Remove unnecessary error handling and improve code readability
📝 (componentsComponent): Remove unused variables and improve code readability
📝 (foldersStore): Remove unnecessary error handling and improve code readability

* 📝 (App.tsx): remove unnecessary call to getFoldersApi() before setting loading state to false
♻️ (App.tsx): refactor code to navigate to "/all" instead of "/flows" when window location pathname is "/"

* refactor: Update FlowCreate and FlowRead models to use folder_id instead of flow_id

* refactor: Update FlowCreate and FlowRead models to use folder_id instead of flow_id

* refactor: Update MyCollectionComponent to use "type" prop instead of "is_component"

* refactor: Update error handling in API interceptor

* refactor: Update StoreGuard component to navigate to "/all" instead of "/flows" when there is no store

* chore(constants.ts): add DEFAULT_FOLDER constant for improved code readability
refactor(index.tsx): update title and description logic to use constants for consistency
feat(foldersStore.tsx): utilize DEFAULT_FOLDER constant for folder name comparison to improve maintainability and readability

* lint

* reduce navbar size

* chore: Update className in mainPage/index.tsx to use relative width for folder button

* refactor: Remove unnecessary call to getFoldersApi() and refactor code in App.tsx

* refactor: Update default column width in TableComponent

* Refactor: Change folders actions buttons to another location

* ✨ (cardComponent/index.tsx): refactor useState calls to remove unnecessary commas and improve code readability
📝 (cardComponent/index.tsx): remove unnecessary semicolon and fix indentation
♻️ (cardComponent/index.tsx): remove unnecessary semicolon and fix indentation
✨ (cardComponent/index.tsx): refactor onClick handler to remove unnecessary ternary operator
♻️ (cardComponent/index.tsx): remove unnecessary semicolon and fix indentation
✨ (cardComponent/index.tsx): refactor onClick handler to remove unnecessary ternary operator
♻️ (cardComponent/index.tsx): remove unnecessary semicolon and fix indentation
✨ (cardComponent/index.tsx): refactor onClick handler to remove unnecessary ternary operator
♻️ (cardComponent/index.tsx): remove unnecessary semicolon and fix indentation
✨ (cardComponent/index.tsx): refactor onClick handler to remove unnecessary ternary operator
♻️ (cardComponent/index.tsx): remove unnecessary semicolon and fix indentation
✨ (cardComponent/index.tsx): refactor onClick handler to remove unnecessary ternary operator
♻️ (cardComponent/index.tsx): remove unnecessary semicolon and fix indentation
✨ (cardComponent/index.tsx): refactor onClick handler to remove unnecessary ternary operator
♻️ (cardComponent/index.tsx): remove unnecessary semicolon and fix indentation
✨ (cardComponent/index.tsx): refactor onClick handler to remove unnecessary ternary operator
♻️ (cardComponent/index.tsx): remove unnecessary semicolon and fix indentation
✨ (cardComponent/index.tsx): refactor onClick handler to remove unnecessary ternary operator
♻️ (cardComponent/index.tsx): remove unnecessary semicolon and fix indentation
✨ (cardComponent/index.tsx): refactor onClick handler to remove unnecessary ternary operator
♻️ (cardComponent/index.tsx): remove unnecessary semicolon and fix indentation
✨ (cardComponent/index.tsx): refactor onClick handler to remove unnecessary ternary operator
♻️ (cardComponent/index.tsx): remove unnecessary semicolon and fix indentation
✨ (cardComponent/index.tsx): refactor onClick handler to remove unnecessary ternary operator
♻️ (cardComponent/index.tsx): remove unnecessary semicolon and fix indentation
✨ (cardComponent/index.tsx): refactor onClick handler to remove unnecessary ternary operator
✨ (use-on-file-drop.tsx): refactor handleFileDrop function to use uploadFormData function for better code organization and readability

* get error from folder

* refactor: Handle error when updating folder in submit-folder.tsx

* refactor: Update submit-folder.tsx to handle folder submission and error handling consistently

* Refactor: Rename folders buttons and add search input icon

* Fixed padding on select

* Fix: Store tags displaying as a column

* fixed checkbox color on card

* Implemented draggable small folder

* Refactor: Add padding to search input

* fixed flow not dropping

* Fixed flow and component dropping bugs

* Refactor: Update ComponentsComponent to improve code readability and remove unnecessary code

* Fixed deleting issue when it doesnt update on creating new folder

* refactor: Update activeTab name in FlowLogsModal component

* Removed onDelete of card component

* update logs modal postion

* Refactor: Make folders buttons the same size

* Refactor: Position download folder button in a better parent

* Refactor: Update folder_id when moving a flow to a different folder

* Refactor: Update folder_id when moving a flow to a different folder

* Refactor: Update folder_id when moving a flow to a different folder

* chore: Remove unnecessary comma in API interceptor code

* Refactor: Remove unused code and improve folder button behavior

* Refactor: Improve code readability and remove unnecessary code in ComponentsComponent

* Refactor: Update folder_id when moving a flow to a different folder

* feat(sidebarComponent): add support for downloading folders with flows
fix(constants): change DEFAULT_FOLDER constant value to "My Projects" for clarity
refactor(emptyComponent): update text color and alignment for better readability
style(headerTabsSearchComponent): remove download button from header tabs search component
style(inputSearchComponent): adjust width of input search component for better UI consistency

* merge on dev

* fixing migration

* removing db

* 📝 (use-on-file-drop.tsx): add import statement for useFlowsManagerStore to use the refreshFlows function
✨ (use-on-file-drop.tsx): call refreshFlows function after uploading flows to update the flows list
📝 (foldersStore.tsx): remove unnecessary comma and fix indentation
✨ (foldersStore.tsx): call refreshFlows function after uploading flows to update the flows list

* feat(modals): update folder modal title and icon

* fix(cardsWrapComponent): add useEffect hook to handle visibility change when tab becomes visible to reset hover state and improve user experience

* 🐛 (popover/index.tsx): fix indentation and remove unnecessary ternary operator
🐛 (popover/index.tsx): fix className prop to prevent it from being undefined
🐛 (inputComponent/index.tsx): prevent event propagation and default behavior when clicking on the button inside InputComponent

* ✨ (index.tsx): add useEffect import to fix missing dependency warning and improve code readability
♻️ (index.tsx): remove unused useEffect function implementation to clean up code

* ✨ (foldersStore.tsx): add call to refreshFlows() method in useFlowsManagerStore to update flows after loading folders

* fix(langflow): add missing index 'ix_flow_folder_id' on 'flow' table to improve database performance

* fix: add missing index 'ix_flow_folder_id' on 'flow' table

* refactor(foldersModal): improve folder icon naming for better clarity and consistency

* feat: add kill command to stop backend server

* 📝 (App.tsx): remove unnecessary trailing commas in the useAlertStore and useGlobalVariablesStore hooks
📝 (mainPage/index.tsx): remove unused import and useEffect hook that fetches folders
♻️ (temp): delete unused temp folder

* ✨ (submit-folder.tsx): update navigate path to use "all" instead of "flows" to improve consistency and clarity
✨ (mainPage/index.tsx): add call to getFoldersApi on page load to ensure folders are up to date
🐛 (chatInputOutput.spec.ts): fix selector for input-openai_api_key to use popover-anchor-input-openai_api_key
🐛 (chatInputOutput.spec.ts): fix selector for input-sender_name to use popover-anchor-input-sender_name
♻️ (chatInputOutput.spec.ts): refactor code to improve readability and remove unnecessary code
♻️ (folders.spec.ts): refactor code to improve readability and remove unnecessary code

✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements to match changes in the frontend code
✨ (inputComponent.spec.ts): update selectors for input elements

🐛 (tweaks_test.spec.ts): fix selectors for input fields to match updated HTML structure

* 🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary comma at the end of the function
🐛 (api.tsx): remove unnecessary

* refactor(modals): remove commented out code in FolderForms component

* 📝 (cardComponent/index.tsx): add aria-label to checkbox component for accessibility improvement
✨ (deleteComponentFlows.spec.ts): update delete flow and delete component tests to use checkbox component instead of hovering over card and clicking trash icon for better test stability and reliability
✨ (group.spec.ts): update group node test to use popover anchor input for editing group title instead of directly editing the title for better test stability and reliability
✨ (logs.spec.ts): update logs test to click on "New Project" button by text instead of using locator for better test stability and reliability

* ✅ (folders.spec.ts): remove unnecessary code that was clicking on elements and pressing the Escape key
♻️ (folders.spec.ts): refactor code to improve readability and remove unused variables
✨ (folders.spec.ts): add test to verify the ability to change the flow folder

* fix(folders.py): handle case where no flows are found by setting flows to an empty list instead of raising a 404 error

* ♻️ (folders.py): rename the function `update_folder` to `move_to_folder` to improve clarity and consistency with the endpoint URL

* 📝 (folders.py): remove unused move_to_folder endpoint
🔧 (use-on-file-drop.tsx): update import statements for API controllers and services
♻️ (use-on-file-drop.tsx): refactor uploadFromDragCard function to use updateFlowInDatabase function instead of moveFlowToFolder function
♻️ (index.ts): refactor updateFlowInDatabase function to handle null folder_id values correctly
♻️ (index.tsx): refactor HomePage component to remove unnecessary setTimeout function and reduce delay for getFoldersApi function call

* refactor(pyproject.toml): update version to 1.0.0a35

* refactor: remove duplicate logout response in login.py

* Bump langflow-base version to 0.0.46 and annotated-types version to 0.7.0

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Co-authored-by: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
Co-authored-by: igorrCarvalho <igorsilvabhz6@gmail.com>
Co-authored-by: ogabrielluiz <gabriel@langflow.org>

Makefile

@@ -141,7 +141,7 @@ backend:
 	@echo 'Setting up the environment'
 	@make setup_env
 	make install_backend
-	@-kill -9 `lsof -t -i:7860`
+	@-kill -9 $(lsof -t -i:7860)
 ifdef login
 	@echo "Running backend autologin is $(login)";
 	LANGFLOW_AUTO_LOGIN=$(login) poetry run uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload --env-file .env --loop asyncio

docs/docs/contributing/contribute-component.md

@@ -16,7 +16,7 @@ You have a new document loader called **MyCustomDocumentLoader** and it would lo
 6. Add the dependency to [/documentloaders/\_\_init\_\_.py](https://github.com/langflow-ai/langflow/blob/dev/src/backend/base/langflow/components/documentloaders/__init__.py) as `from .MyCustomDocumentLoader import MyCustomDocumentLoader`.
 7. Add any new dependencies to the outer [pyproject.toml](https://github.com/langflow-ai/langflow/blob/dev/pyproject.toml#L27) file.
 8. Submit documentation for your component. For this example, you'd submit documentation to the [loaders page](https://github.com/langflow-ai/langflow/blob/dev/docs/docs/components/loaders.mdx).
-8. Submit your changes as a pull request. The Langflow team will have a look, suggest changes, and add your component to Langflow.
+9. Submit your changes as a pull request. The Langflow team will have a look, suggest changes, and add your component to Langflow.
 
 ## User Sharing
 
@@ -27,21 +27,19 @@ If so, you can share your component on the Langflow store.
 1. [Register at the Langflow store](https://www.langflow.store/login/).
 2. Undergo pre-validation before receiving an API key.
 3. To deploy your amazing component directly to the Langflow store, without it being merged into the main source code, navigate to your flow, and then click **Share**.
-The share window appears:
+   The share window appears:
 
 <ZoomableImage
-  alt="Docusaurus themed image"
-  sources={{
+alt="Docusaurus themed image"
+sources={{
     light: "img/add-component-to-store.png",
     dark: "img/add-component-to-store.png",
   }}
-  style={{ width: "50%", margin: "20px auto" }}
+style={{ width: "50%", margin: "20px auto" }}
 />
 
 5. Choose whether you want to flow to be public or private.
-You can also **Export** your flow as a JSON file from this window.
-When you're ready to share the flow, click **Share Flow**.
-You should see a **Flow shared successfully** popup.
+   You can also **Export** your flow as a JSON file from this window.
+   When you're ready to share the flow, click **Share Flow**.
+   You should see a **Flow shared successfully** popup.
 6. To confirm, navigate to the **Langflow Store** and filter results by **Created By Me**. You should see your new flow on the **Langflow Store**.
-
-

poetry.lock

@@ -156,30 +156,31 @@ vine = ">=5.0.0,<6.0.0"
 
 [[package]]
 name = "annotated-types"
-version = "0.6.0"
+version = "0.7.0"
 description = "Reusable constraint types to use with typing.Annotated"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "annotated_types-0.6.0-py3-none-any.whl", hash = "sha256:0641064de18ba7a25dee8f96403ebc39113d0cb953a01429249d5c7564666a43"},
-    {file = "annotated_types-0.6.0.tar.gz", hash = "sha256:563339e807e53ffd9c267e99fc6d9ea23eb8443c08f112651963e24e22f84a5d"},
+    {file = "annotated_types-0.7.0-py3-none-any.whl", hash = "sha256:1f02e8b43a8fbbc3f3e0d4f0f4bfc8131bcb4eebe8849b8e5c773f3a1c582a53"},
+    {file = "annotated_types-0.7.0.tar.gz", hash = "sha256:aff07c09a53a08bc8cfccb9c85b05f1aa9a2a6f23728d790723543408344ce89"},
 ]
 
 [[package]]
 name = "anthropic"
-version = "0.26.0"
+version = "0.26.1"
 description = "The official Python library for the anthropic API"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "anthropic-0.26.0-py3-none-any.whl", hash = "sha256:38fc415561d71dcf263b89da0cc6ecec498379b56256fc4242e9128bc707b283"},
-    {file = "anthropic-0.26.0.tar.gz", hash = "sha256:6aaffeb05d515cf9788eef57150a5f827f3786883628ccac71dbe5671ab6f44e"},
+    {file = "anthropic-0.26.1-py3-none-any.whl", hash = "sha256:2812b9b250b551ed8a1f0a7e6ae3f005654098994f45ebca5b5808bd154c9628"},
+    {file = "anthropic-0.26.1.tar.gz", hash = "sha256:26680ff781a6f678a30a1dccd0743631e602b23a47719439ffdef5335fa167d8"},
 ]
 
 [package.dependencies]
 anyio = ">=3.5.0,<5"
 distro = ">=1.7.0,<2"
 httpx = ">=0.23.0,<1"
+jiter = ">=0.1.0,<1"
 pydantic = ">=1.9.0,<3"
 sniffio = "*"
 tokenizers = ">=0.13.0"
@@ -469,17 +470,17 @@ files = [
 
 [[package]]
 name = "boto3"
-version = "1.34.108"
+version = "1.34.110"
 description = "The AWS SDK for Python"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "boto3-1.34.108-py3-none-any.whl", hash = "sha256:3601267d76cac17f1d4595c3d8d968dc15be074b79bfa3985187a02b328a0a5f"},
-    {file = "boto3-1.34.108.tar.gz", hash = "sha256:677723295151d29ff9b363598a20c1997c4e2af7e50669d9e428b757fe586a10"},
+    {file = "boto3-1.34.110-py3-none-any.whl", hash = "sha256:2fc871b4a5090716c7a71af52c462e539529227f4d4888fd04896d5028f9cedc"},
+    {file = "boto3-1.34.110.tar.gz", hash = "sha256:83ffe2273da7bdfdb480d85b0705f04e95bd110e9741f23328b7c76c03e6d53c"},
 ]
 
 [package.dependencies]
-botocore = ">=1.34.108,<1.35.0"
+botocore = ">=1.34.110,<1.35.0"
 jmespath = ">=0.7.1,<2.0.0"
 s3transfer = ">=0.10.0,<0.11.0"
 
@@ -488,13 +489,13 @@ crt = ["botocore[crt] (>=1.21.0,<2.0a0)"]
 
 [[package]]
 name = "botocore"
-version = "1.34.108"
+version = "1.34.110"
 description = "Low-level, data-driven core of boto 3."
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "botocore-1.34.108-py3-none-any.whl", hash = "sha256:b1b9d00804267669c5fcc36489269f7e9c43580c30f0885fbf669cf73cec720b"},
-    {file = "botocore-1.34.108.tar.gz", hash = "sha256:384c9408c447631475dc41fdc9bf2e0f30c29c420d96bfe8b468bdc2bace3e13"},
+    {file = "botocore-1.34.110-py3-none-any.whl", hash = "sha256:1edf3a825ec0a5edf238b2d42ad23305de11d5a71bb27d6f9a58b7e8862df1b6"},
+    {file = "botocore-1.34.110.tar.gz", hash = "sha256:b2c98c40ecf0b1facb9e61ceb7dfa28e61ae2456490554a16c8dbf99f20d6a18"},
 ]
 
 [package.dependencies]
@@ -1847,17 +1848,20 @@ vectorstore-mmr = ["numpy (>=1)", "simsimd (>=3)"]
 
 [[package]]
 name = "emoji"
-version = "2.11.1"
+version = "2.12.1"
 description = "Emoji for Python"
 optional = false
-python-versions = "!=3.0.*,!=3.1.*,!=3.2.*,!=3.3.*,>=2.7"
+python-versions = ">=3.7"
 files = [
-    {file = "emoji-2.11.1-py2.py3-none-any.whl", hash = "sha256:b7ba25299bbf520cc8727848ae66b986da32aee27dc2887eaea2bff07226ce49"},
-    {file = "emoji-2.11.1.tar.gz", hash = "sha256:062ff0b3154b6219143f8b9f4b3e5c64c35bc2b146e6e2349ab5f29e218ce1ee"},
+    {file = "emoji-2.12.1-py3-none-any.whl", hash = "sha256:a00d62173bdadc2510967a381810101624a2f0986145b8da0cffa42e29430235"},
+    {file = "emoji-2.12.1.tar.gz", hash = "sha256:4aa0488817691aa58d83764b6c209f8a27c0b3ab3f89d1b8dceca1a62e4973eb"},
 ]
 
+[package.dependencies]
+typing-extensions = ">=4.7.0"
+
 [package.extras]
-dev = ["coverage", "coveralls", "pytest"]
+dev = ["coverage", "pytest (>=7.4.4)"]
 
 [[package]]
 name = "exceptiongroup"
@@ -2581,13 +2585,13 @@ httplib2 = ">=0.19.0"
 
 [[package]]
 name = "google-cloud-aiplatform"
-version = "1.51.0"
+version = "1.52.0"
 description = "Vertex AI API client library"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "google-cloud-aiplatform-1.51.0.tar.gz", hash = "sha256:901993b4d14392452699c14cf23d72c01c5488ee36a7e00b23195e64d7d2f5ec"},
-    {file = "google_cloud_aiplatform-1.51.0-py2.py3-none-any.whl", hash = "sha256:f2d3ff231454fe397f02fce1358680dea76ed7c74fc42e6c7e1aa1acb1648df3"},
+    {file = "google-cloud-aiplatform-1.52.0.tar.gz", hash = "sha256:932a56e3050b4bc9a2c0630e6af3c0bd52f0bcf72b5dc01c059874231099edd3"},
+    {file = "google_cloud_aiplatform-1.52.0-py2.py3-none-any.whl", hash = "sha256:8c62f5d0ec39e008737ebba4875105ed7563dd0958f591f95dc7816e4b30f92a"},
 ]
 
 [package.dependencies]
@@ -2610,7 +2614,7 @@ datasets = ["pyarrow (>=10.0.1)", "pyarrow (>=14.0.0)", "pyarrow (>=3.0.0,<8.0de
 endpoint = ["requests (>=2.28.1)"]
 full = ["cloudpickle (<3.0)", "docker (>=5.0.3)", "explainable-ai-sdk (>=1.0.0)", "fastapi (>=0.71.0,<=0.109.1)", "google-cloud-bigquery", "google-cloud-bigquery-storage", "google-cloud-logging (<4.0)", "google-vizier (>=0.1.6)", "httpx (>=0.23.0,<0.25.0)", "immutabledict", "lit-nlp (==0.4.0)", "mlflow (>=1.27.0,<=2.1.1)", "nest-asyncio (>=1.0.0,<1.6.0)", "numpy (>=1.15.0)", "pandas (>=1.0.0)", "pandas (>=1.0.0,<2.2.0)", "pyarrow (>=10.0.1)", "pyarrow (>=14.0.0)", "pyarrow (>=3.0.0,<8.0dev)", "pyarrow (>=6.0.1)", "pydantic (<2)", "pyyaml (>=5.3.1,<7)", "ray[default] (>=2.4,<2.5.dev0 || >2.9.0,!=2.9.1,!=2.9.2,<=2.9.3)", "ray[default] (>=2.5,<=2.9.3)", "requests (>=2.28.1)", "starlette (>=0.17.1)", "tensorflow (>=2.3.0,<3.0.0dev)", "tensorflow (>=2.3.0,<3.0.0dev)", "urllib3 (>=1.21.1,<1.27)", "uvicorn[standard] (>=0.16.0)"]
 langchain = ["langchain (>=0.1.16,<0.2)", "langchain-core (<0.2)", "langchain-google-vertexai (<2)"]
-langchain-testing = ["absl-py", "cloudpickle (>=2.2.1,<3.0)", "langchain (>=0.1.16,<0.2)", "langchain-core (<0.2)", "langchain-google-vertexai (<2)", "pydantic (>=2.6.3,<3)", "pytest-xdist"]
+langchain-testing = ["absl-py", "cloudpickle (>=2.2.1,<4.0)", "langchain (>=0.1.16,<0.2)", "langchain-core (<0.2)", "langchain-google-vertexai (<2)", "pydantic (>=2.6.3,<3)", "pytest-xdist"]
 lit = ["explainable-ai-sdk (>=1.0.0)", "lit-nlp (==0.4.0)", "pandas (>=1.0.0)", "tensorflow (>=2.3.0,<3.0.0dev)"]
 metadata = ["numpy (>=1.15.0)", "pandas (>=1.0.0)"]
 pipelines = ["pyyaml (>=5.3.1,<7)"]
@@ -2620,7 +2624,7 @@ private-endpoints = ["requests (>=2.28.1)", "urllib3 (>=1.21.1,<1.27)"]
 rapid-evaluation = ["nest-asyncio (>=1.0.0,<1.6.0)", "pandas (>=1.0.0,<2.2.0)"]
 ray = ["google-cloud-bigquery", "google-cloud-bigquery-storage", "immutabledict", "pandas (>=1.0.0,<2.2.0)", "pyarrow (>=6.0.1)", "pydantic (<2)", "ray[default] (>=2.4,<2.5.dev0 || >2.9.0,!=2.9.1,!=2.9.2,<=2.9.3)", "ray[default] (>=2.5,<=2.9.3)"]
 ray-testing = ["google-cloud-bigquery", "google-cloud-bigquery-storage", "immutabledict", "pandas (>=1.0.0,<2.2.0)", "pyarrow (>=6.0.1)", "pydantic (<2)", "pytest-xdist", "ray[default] (>=2.4,<2.5.dev0 || >2.9.0,!=2.9.1,!=2.9.2,<=2.9.3)", "ray[default] (>=2.5,<=2.9.3)", "ray[train] (>=2.4,<2.5.dev0 || >2.9.0,!=2.9.1,!=2.9.2,<=2.9.3)", "scikit-learn", "tensorflow", "torch (>=2.0.0,<2.1.0)", "xgboost", "xgboost-ray"]
-reasoningengine = ["cloudpickle (>=2.2.1,<3.0)", "pydantic (>=2.6.3,<3)"]
+reasoningengine = ["cloudpickle (>=2.2.1,<4.0)", "pydantic (>=2.6.3,<3)"]
 tensorboard = ["tensorflow (>=2.3.0,<3.0.0dev)"]
 testing = ["bigframes", "cloudpickle (<3.0)", "docker (>=5.0.3)", "explainable-ai-sdk (>=1.0.0)", "fastapi (>=0.71.0,<=0.109.1)", "google-api-core (>=2.11,<3.0.0)", "google-cloud-bigquery", "google-cloud-bigquery-storage", "google-cloud-logging (<4.0)", "google-vizier (>=0.1.6)", "grpcio-testing", "httpx (>=0.23.0,<0.25.0)", "immutabledict", "ipython", "kfp (>=2.6.0,<3.0.0)", "lit-nlp (==0.4.0)", "mlflow (>=1.27.0,<=2.1.1)", "nest-asyncio (>=1.0.0,<1.6.0)", "numpy (>=1.15.0)", "pandas (>=1.0.0)", "pandas (>=1.0.0,<2.2.0)", "pyarrow (>=10.0.1)", "pyarrow (>=14.0.0)", "pyarrow (>=3.0.0,<8.0dev)", "pyarrow (>=6.0.1)", "pydantic (<2)", "pyfakefs", "pytest-asyncio", "pytest-xdist", "pyyaml (>=5.3.1,<7)", "ray[default] (>=2.4,<2.5.dev0 || >2.9.0,!=2.9.1,!=2.9.2,<=2.9.3)", "ray[default] (>=2.5,<=2.9.3)", "requests (>=2.28.1)", "requests-toolbelt (<1.0.0)", "scikit-learn", "starlette (>=0.17.1)", "tensorboard-plugin-profile (>=2.4.0,<3.0.0dev)", "tensorflow (==2.13.0)", "tensorflow (==2.16.1)", "tensorflow (>=2.3.0,<3.0.0dev)", "tensorflow (>=2.3.0,<3.0.0dev)", "tensorflow (>=2.4.0,<3.0.0dev)", "torch (>=2.0.0,<2.1.0)", "torch (>=2.2.0)", "urllib3 (>=1.21.1,<1.27)", "uvicorn[standard] (>=0.16.0)", "werkzeug (>=2.0.0,<2.1.0dev)", "xgboost"]
 vizier = ["google-vizier (>=0.1.6)"]
@@ -2628,13 +2632,13 @@ xai = ["tensorflow (>=2.3.0,<3.0.0dev)"]
 
 [[package]]
 name = "google-cloud-bigquery"
-version = "3.23.0"
+version = "3.23.1"
 description = "Google BigQuery API client library"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "google-cloud-bigquery-3.23.0.tar.gz", hash = "sha256:7ecdb207727d513b1bce1f213dbb926ed2e1d4f0122778de00f0e56d19d47a01"},
-    {file = "google_cloud_bigquery-3.23.0-py2.py3-none-any.whl", hash = "sha256:dc0a4a47ab541a34aa1dc1f48539d88c091adc0637da7744d7fab6f3bc8886d5"},
+    {file = "google-cloud-bigquery-3.23.1.tar.gz", hash = "sha256:4b4597f9291b42102c9667d3b4528f801d4c8f24ef2b12dd1ecb881273330955"},
+    {file = "google_cloud_bigquery-3.23.1-py2.py3-none-any.whl", hash = "sha256:9fb72884fdbec9c4643cea6b7f21e1ecf3eb61d5305f87493d271dc801647a9e"},
 ]
 
 [package.dependencies]
@@ -3001,61 +3005,61 @@ protobuf = ">=3.19.5,<3.20.0 || >3.20.0,<3.20.1 || >3.20.1,<4.21.1 || >4.21.1,<4
 
 [[package]]
 name = "grpcio"
-version = "1.63.0"
+version = "1.64.0"
 description = "HTTP/2-based RPC framework"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "grpcio-1.63.0-cp310-cp310-linux_armv7l.whl", hash = "sha256:2e93aca840c29d4ab5db93f94ed0a0ca899e241f2e8aec6334ab3575dc46125c"},
-    {file = "grpcio-1.63.0-cp310-cp310-macosx_12_0_universal2.whl", hash = "sha256:91b73d3f1340fefa1e1716c8c1ec9930c676d6b10a3513ab6c26004cb02d8b3f"},
-    {file = "grpcio-1.63.0-cp310-cp310-manylinux_2_17_aarch64.whl", hash = "sha256:b3afbd9d6827fa6f475a4f91db55e441113f6d3eb9b7ebb8fb806e5bb6d6bd0d"},
-    {file = "grpcio-1.63.0-cp310-cp310-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:8f3f6883ce54a7a5f47db43289a0a4c776487912de1a0e2cc83fdaec9685cc9f"},
-    {file = "grpcio-1.63.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:cf8dae9cc0412cb86c8de5a8f3be395c5119a370f3ce2e69c8b7d46bb9872c8d"},
-    {file = "grpcio-1.63.0-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:08e1559fd3b3b4468486b26b0af64a3904a8dbc78d8d936af9c1cf9636eb3e8b"},
-    {file = "grpcio-1.63.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:5c039ef01516039fa39da8a8a43a95b64e288f79f42a17e6c2904a02a319b357"},
-    {file = "grpcio-1.63.0-cp310-cp310-win32.whl", hash = "sha256:ad2ac8903b2eae071055a927ef74121ed52d69468e91d9bcbd028bd0e554be6d"},
-    {file = "grpcio-1.63.0-cp310-cp310-win_amd64.whl", hash = "sha256:b2e44f59316716532a993ca2966636df6fbe7be4ab6f099de6815570ebe4383a"},
-    {file = "grpcio-1.63.0-cp311-cp311-linux_armv7l.whl", hash = "sha256:f28f8b2db7b86c77916829d64ab21ff49a9d8289ea1564a2b2a3a8ed9ffcccd3"},
-    {file = "grpcio-1.63.0-cp311-cp311-macosx_10_9_universal2.whl", hash = "sha256:65bf975639a1f93bee63ca60d2e4951f1b543f498d581869922910a476ead2f5"},
-    {file = "grpcio-1.63.0-cp311-cp311-manylinux_2_17_aarch64.whl", hash = "sha256:b5194775fec7dc3dbd6a935102bb156cd2c35efe1685b0a46c67b927c74f0cfb"},
-    {file = "grpcio-1.63.0-cp311-cp311-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:e4cbb2100ee46d024c45920d16e888ee5d3cf47c66e316210bc236d5bebc42b3"},
-    {file = "grpcio-1.63.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:1ff737cf29b5b801619f10e59b581869e32f400159e8b12d7a97e7e3bdeee6a2"},
-    {file = "grpcio-1.63.0-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:cd1e68776262dd44dedd7381b1a0ad09d9930ffb405f737d64f505eb7f77d6c7"},
-    {file = "grpcio-1.63.0-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:93f45f27f516548e23e4ec3fbab21b060416007dbe768a111fc4611464cc773f"},
-    {file = "grpcio-1.63.0-cp311-cp311-win32.whl", hash = "sha256:878b1d88d0137df60e6b09b74cdb73db123f9579232c8456f53e9abc4f62eb3c"},
-    {file = "grpcio-1.63.0-cp311-cp311-win_amd64.whl", hash = "sha256:756fed02dacd24e8f488f295a913f250b56b98fb793f41d5b2de6c44fb762434"},
-    {file = "grpcio-1.63.0-cp312-cp312-linux_armv7l.whl", hash = "sha256:93a46794cc96c3a674cdfb59ef9ce84d46185fe9421baf2268ccb556f8f81f57"},
-    {file = "grpcio-1.63.0-cp312-cp312-macosx_10_9_universal2.whl", hash = "sha256:a7b19dfc74d0be7032ca1eda0ed545e582ee46cd65c162f9e9fc6b26ef827dc6"},
-    {file = "grpcio-1.63.0-cp312-cp312-manylinux_2_17_aarch64.whl", hash = "sha256:8064d986d3a64ba21e498b9a376cbc5d6ab2e8ab0e288d39f266f0fca169b90d"},
-    {file = "grpcio-1.63.0-cp312-cp312-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:219bb1848cd2c90348c79ed0a6b0ea51866bc7e72fa6e205e459fedab5770172"},
-    {file = "grpcio-1.63.0-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a2d60cd1d58817bc5985fae6168d8b5655c4981d448d0f5b6194bbcc038090d2"},
-    {file = "grpcio-1.63.0-cp312-cp312-musllinux_1_1_i686.whl", hash = "sha256:9e350cb096e5c67832e9b6e018cf8a0d2a53b2a958f6251615173165269a91b0"},
-    {file = "grpcio-1.63.0-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:56cdf96ff82e3cc90dbe8bac260352993f23e8e256e063c327b6cf9c88daf7a9"},
-    {file = "grpcio-1.63.0-cp312-cp312-win32.whl", hash = "sha256:3a6d1f9ea965e750db7b4ee6f9fdef5fdf135abe8a249e75d84b0a3e0c668a1b"},
-    {file = "grpcio-1.63.0-cp312-cp312-win_amd64.whl", hash = "sha256:d2497769895bb03efe3187fb1888fc20e98a5f18b3d14b606167dacda5789434"},
-    {file = "grpcio-1.63.0-cp38-cp38-linux_armv7l.whl", hash = "sha256:fdf348ae69c6ff484402cfdb14e18c1b0054ac2420079d575c53a60b9b2853ae"},
-    {file = "grpcio-1.63.0-cp38-cp38-macosx_10_9_universal2.whl", hash = "sha256:a3abfe0b0f6798dedd2e9e92e881d9acd0fdb62ae27dcbbfa7654a57e24060c0"},
-    {file = "grpcio-1.63.0-cp38-cp38-manylinux_2_17_aarch64.whl", hash = "sha256:6ef0ad92873672a2a3767cb827b64741c363ebaa27e7f21659e4e31f4d750280"},
-    {file = "grpcio-1.63.0-cp38-cp38-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:b416252ac5588d9dfb8a30a191451adbf534e9ce5f56bb02cd193f12d8845b7f"},
-    {file = "grpcio-1.63.0-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:e3b77eaefc74d7eb861d3ffbdf91b50a1bb1639514ebe764c47773b833fa2d91"},
-    {file = "grpcio-1.63.0-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:b005292369d9c1f80bf70c1db1c17c6c342da7576f1c689e8eee4fb0c256af85"},
-    {file = "grpcio-1.63.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:cdcda1156dcc41e042d1e899ba1f5c2e9f3cd7625b3d6ebfa619806a4c1aadda"},
-    {file = "grpcio-1.63.0-cp38-cp38-win32.whl", hash = "sha256:01799e8649f9e94ba7db1aeb3452188048b0019dc37696b0f5ce212c87c560c3"},
-    {file = "grpcio-1.63.0-cp38-cp38-win_amd64.whl", hash = "sha256:6a1a3642d76f887aa4009d92f71eb37809abceb3b7b5a1eec9c554a246f20e3a"},
-    {file = "grpcio-1.63.0-cp39-cp39-linux_armv7l.whl", hash = "sha256:75f701ff645858a2b16bc8c9fc68af215a8bb2d5a9b647448129de6e85d52bce"},
-    {file = "grpcio-1.63.0-cp39-cp39-macosx_10_9_universal2.whl", hash = "sha256:cacdef0348a08e475a721967f48206a2254a1b26ee7637638d9e081761a5ba86"},
-    {file = "grpcio-1.63.0-cp39-cp39-manylinux_2_17_aarch64.whl", hash = "sha256:0697563d1d84d6985e40ec5ec596ff41b52abb3fd91ec240e8cb44a63b895094"},
-    {file = "grpcio-1.63.0-cp39-cp39-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:6426e1fb92d006e47476d42b8f240c1d916a6d4423c5258ccc5b105e43438f61"},
-    {file = "grpcio-1.63.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:e48cee31bc5f5a31fb2f3b573764bd563aaa5472342860edcc7039525b53e46a"},
-    {file = "grpcio-1.63.0-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:50344663068041b34a992c19c600236e7abb42d6ec32567916b87b4c8b8833b3"},
-    {file = "grpcio-1.63.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:259e11932230d70ef24a21b9fb5bb947eb4703f57865a404054400ee92f42f5d"},
-    {file = "grpcio-1.63.0-cp39-cp39-win32.whl", hash = "sha256:a44624aad77bf8ca198c55af811fd28f2b3eaf0a50ec5b57b06c034416ef2d0a"},
-    {file = "grpcio-1.63.0-cp39-cp39-win_amd64.whl", hash = "sha256:166e5c460e5d7d4656ff9e63b13e1f6029b122104c1633d5f37eaea348d7356d"},
-    {file = "grpcio-1.63.0.tar.gz", hash = "sha256:f3023e14805c61bc439fb40ca545ac3d5740ce66120a678a3c6c2c55b70343d1"},
+    {file = "grpcio-1.64.0-cp310-cp310-linux_armv7l.whl", hash = "sha256:3b09c3d9de95461214a11d82cc0e6a46a6f4e1f91834b50782f932895215e5db"},
+    {file = "grpcio-1.64.0-cp310-cp310-macosx_12_0_universal2.whl", hash = "sha256:7e013428ab472892830287dd082b7d129f4d8afef49227a28223a77337555eaa"},
+    {file = "grpcio-1.64.0-cp310-cp310-manylinux_2_17_aarch64.whl", hash = "sha256:02cc9cc3f816d30f7993d0d408043b4a7d6a02346d251694d8ab1f78cc723e7e"},
+    {file = "grpcio-1.64.0-cp310-cp310-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:1f5de082d936e0208ce8db9095821361dfa97af8767a6607ae71425ac8ace15c"},
+    {file = "grpcio-1.64.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:d7b7bf346391dffa182fba42506adf3a84f4a718a05e445b37824136047686a1"},
+    {file = "grpcio-1.64.0-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:b2cbdfba18408389a1371f8c2af1659119e1831e5ed24c240cae9e27b4abc38d"},
+    {file = "grpcio-1.64.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:aca4f15427d2df592e0c8f3d38847e25135e4092d7f70f02452c0e90d6a02d6d"},
+    {file = "grpcio-1.64.0-cp310-cp310-win32.whl", hash = "sha256:7c1f5b2298244472bcda49b599be04579f26425af0fd80d3f2eb5fd8bc84d106"},
+    {file = "grpcio-1.64.0-cp310-cp310-win_amd64.whl", hash = "sha256:73f84f9e5985a532e47880b3924867de16fa1aa513fff9b26106220c253c70c5"},
+    {file = "grpcio-1.64.0-cp311-cp311-linux_armv7l.whl", hash = "sha256:2a18090371d138a57714ee9bffd6c9c9cb2e02ce42c681aac093ae1e7189ed21"},
+    {file = "grpcio-1.64.0-cp311-cp311-macosx_10_9_universal2.whl", hash = "sha256:59c68df3a934a586c3473d15956d23a618b8f05b5e7a3a904d40300e9c69cbf0"},
+    {file = "grpcio-1.64.0-cp311-cp311-manylinux_2_17_aarch64.whl", hash = "sha256:b52e1ec7185512103dd47d41cf34ea78e7a7361ba460187ddd2416b480e0938c"},
+    {file = "grpcio-1.64.0-cp311-cp311-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:8d598b5d5e2c9115d7fb7e2cb5508d14286af506a75950762aa1372d60e41851"},
+    {file = "grpcio-1.64.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:01615bbcae6875eee8091e6b9414072f4e4b00d8b7e141f89635bdae7cf784e5"},
+    {file = "grpcio-1.64.0-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:0b2dfe6dcace264807d9123d483d4c43274e3f8c39f90ff51de538245d7a4145"},
+    {file = "grpcio-1.64.0-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:7f17572dc9acd5e6dfd3014d10c0b533e9f79cd9517fc10b0225746f4c24b58e"},
+    {file = "grpcio-1.64.0-cp311-cp311-win32.whl", hash = "sha256:6ec5ed15b4ffe56e2c6bc76af45e6b591c9be0224b3fb090adfb205c9012367d"},
+    {file = "grpcio-1.64.0-cp311-cp311-win_amd64.whl", hash = "sha256:597191370951b477b7a1441e1aaa5cacebeb46a3b0bd240ec3bb2f28298c7553"},
+    {file = "grpcio-1.64.0-cp312-cp312-linux_armv7l.whl", hash = "sha256:1ce4cd5a61d4532651079e7aae0fedf9a80e613eed895d5b9743e66b52d15812"},
+    {file = "grpcio-1.64.0-cp312-cp312-macosx_10_9_universal2.whl", hash = "sha256:650a8150a9b288f40d5b7c1d5400cc11724eae50bd1f501a66e1ea949173649b"},
+    {file = "grpcio-1.64.0-cp312-cp312-manylinux_2_17_aarch64.whl", hash = "sha256:8de0399b983f8676a7ccfdd45e5b2caec74a7e3cc576c6b1eecf3b3680deda5e"},
+    {file = "grpcio-1.64.0-cp312-cp312-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:46b8b43ba6a2a8f3103f103f97996cad507bcfd72359af6516363c48793d5a7b"},
+    {file = "grpcio-1.64.0-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a54362f03d4dcfae63be455d0a7d4c1403673498b92c6bfe22157d935b57c7a9"},
+    {file = "grpcio-1.64.0-cp312-cp312-musllinux_1_1_i686.whl", hash = "sha256:1f8ea18b928e539046bb5f9c124d717fbf00cc4b2d960ae0b8468562846f5aa1"},
+    {file = "grpcio-1.64.0-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:c56c91bd2923ddb6e7ed28ebb66d15633b03e0df22206f22dfcdde08047e0a48"},
+    {file = "grpcio-1.64.0-cp312-cp312-win32.whl", hash = "sha256:874c741c8a66f0834f653a69e7e64b4e67fcd4a8d40296919b93bab2ccc780ba"},
+    {file = "grpcio-1.64.0-cp312-cp312-win_amd64.whl", hash = "sha256:0da1d921f8e4bcee307aeef6c7095eb26e617c471f8cb1c454fd389c5c296d1e"},
+    {file = "grpcio-1.64.0-cp38-cp38-linux_armv7l.whl", hash = "sha256:c46fb6bfca17bfc49f011eb53416e61472fa96caa0979b4329176bdd38cbbf2a"},
+    {file = "grpcio-1.64.0-cp38-cp38-macosx_10_9_universal2.whl", hash = "sha256:3d2004e85cf5213995d09408501f82c8534700d2babeb81dfdba2a3bff0bb396"},
+    {file = "grpcio-1.64.0-cp38-cp38-manylinux_2_17_aarch64.whl", hash = "sha256:6d5541eb460d73a07418524fb64dcfe0adfbcd32e2dac0f8f90ce5b9dd6c046c"},
+    {file = "grpcio-1.64.0-cp38-cp38-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:1f279ad72dd7d64412e10f2443f9f34872a938c67387863c4cd2fb837f53e7d2"},
+    {file = "grpcio-1.64.0-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:85fda90b81da25993aa47fae66cae747b921f8f6777550895fb62375b776a231"},
+    {file = "grpcio-1.64.0-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:a053584079b793a54bece4a7d1d1b5c0645bdbee729215cd433703dc2532f72b"},
+    {file = "grpcio-1.64.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:579dd9fb11bc73f0de061cab5f8b2def21480fd99eb3743ed041ad6a1913ee2f"},
+    {file = "grpcio-1.64.0-cp38-cp38-win32.whl", hash = "sha256:23b6887bb21d77649d022fa1859e05853fdc2e60682fd86c3db652a555a282e0"},
+    {file = "grpcio-1.64.0-cp38-cp38-win_amd64.whl", hash = "sha256:753cb58683ba0c545306f4e17dabf468d29cb6f6b11832e1e432160bb3f8403c"},
+    {file = "grpcio-1.64.0-cp39-cp39-linux_armv7l.whl", hash = "sha256:2186d76a7e383e1466e0ea2b0febc343ffeae13928c63c6ec6826533c2d69590"},
+    {file = "grpcio-1.64.0-cp39-cp39-macosx_10_9_universal2.whl", hash = "sha256:0f30596cdcbed3c98024fb4f1d91745146385b3f9fd10c9f2270cbfe2ed7ed91"},
+    {file = "grpcio-1.64.0-cp39-cp39-manylinux_2_17_aarch64.whl", hash = "sha256:d9171f025a196f5bcfec7e8e7ffb7c3535f7d60aecd3503f9e250296c7cfc150"},
+    {file = "grpcio-1.64.0-cp39-cp39-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:cf4c8daed18ae2be2f1fc7d613a76ee2a2e28fdf2412d5c128be23144d28283d"},
+    {file = "grpcio-1.64.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:3550493ac1d23198d46dc9c9b24b411cef613798dc31160c7138568ec26bc9b4"},
+    {file = "grpcio-1.64.0-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:3161a8f8bb38077a6470508c1a7301cd54301c53b8a34bb83e3c9764874ecabd"},
+    {file = "grpcio-1.64.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:2e8fabe2cc57a369638ab1ad8e6043721014fdf9a13baa7c0e35995d3a4a7618"},
+    {file = "grpcio-1.64.0-cp39-cp39-win32.whl", hash = "sha256:31890b24d47b62cc27da49a462efe3d02f3c120edb0e6c46dcc0025506acf004"},
+    {file = "grpcio-1.64.0-cp39-cp39-win_amd64.whl", hash = "sha256:5a56797dea8c02e7d3a85dfea879f286175cf4d14fbd9ab3ef2477277b927baa"},
+    {file = "grpcio-1.64.0.tar.gz", hash = "sha256:257baf07f53a571c215eebe9679c3058a313fd1d1f7c4eede5a8660108c52d9c"},
 ]
 
 [package.extras]
-protobuf = ["grpcio-tools (>=1.63.0)"]
+protobuf = ["grpcio-tools (>=1.64.0)"]
 
 [[package]]
 name = "grpcio-health-checking"
@@ -3716,6 +3720,76 @@ MarkupSafe = ">=2.0"
 [package.extras]
 i18n = ["Babel (>=2.7)"]
 
+[[package]]
+name = "jiter"
+version = "0.1.0"
+description = ""
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "jiter-0.1.0-cp310-cp310-macosx_10_12_x86_64.whl", hash = "sha256:3aa466e89664cb94e69571df326f0c28e25e2e728f90fa4c3c235bbd35b40609"},
+    {file = "jiter-0.1.0-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:46eed20f7d9642787eed4143f7b25e16cf9915bb45656980cc9b966bb1e00f59"},
+    {file = "jiter-0.1.0-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:51fcd4bdb23de3a26c2b64f7bd87e9e43c82f1171145ba13434a654d7c8e9aa9"},
+    {file = "jiter-0.1.0-cp310-cp310-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:657ca4cf8d99e2e899a5ef778daed5f42eff6de6f23403a6225b6d6bafb55f38"},
+    {file = "jiter-0.1.0-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:5da72cf6582049d2b802e48dd647a096103994a21a7a762fe813b727565ac0ef"},
+    {file = "jiter-0.1.0-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:148ae1c97be312f1e969d76fbf507818d53e2867e90cf3c7f78941a199d5b84c"},
+    {file = "jiter-0.1.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:f12ce8243d1adb4657cfd9f23ec73fbd206bd5387bea0ebb5514c41fd268a1c1"},
+    {file = "jiter-0.1.0-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:067cc20889627a0afcaf6b465e942990b9f32d1ad88b0a083ece74becc3831b0"},
+    {file = "jiter-0.1.0-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:ce5866bb5ff7dc14d036fede7e7ddb86b3b67064dc66dde15de4771e2697e539"},
+    {file = "jiter-0.1.0-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:f446f1f5e8466fc4dfe775f9c5d8b6c3f0b8b07dc24d4ce76d8de3468d7447a8"},
+    {file = "jiter-0.1.0-cp310-none-win32.whl", hash = "sha256:47c1e12bd0789bd4f76cc4973a04d512832568a2a4925cd0b52d0ed413aa5e8d"},
+    {file = "jiter-0.1.0-cp310-none-win_amd64.whl", hash = "sha256:0316fa82ee4dab455bac2ec05362f3ac19d77e3139225683289c366ce35605b9"},
+    {file = "jiter-0.1.0-cp311-cp311-macosx_10_12_x86_64.whl", hash = "sha256:f47eb274aae20ee3b565886ab315c3f16f9831c0e4fd6722dc100a2dbc0923f9"},
+    {file = "jiter-0.1.0-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:80d1bf437ea70f43c0976f96cd83fa4618aceb526ba3eaccf9f736d0c3185f5c"},
+    {file = "jiter-0.1.0-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:215ca1178d30e7a652849b9ca145a4666e1ed0941aef0c61bbaf88a0cd084b66"},
+    {file = "jiter-0.1.0-cp311-cp311-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:08d7401e20fc660871a02ec05dda9dd93c95052a3c1588385230bca59d9d525b"},
+    {file = "jiter-0.1.0-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:8cd365396e9c50b1c458bad0b21452f4c33fea222413aea78826bca98097f487"},
+    {file = "jiter-0.1.0-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:050252cde3ae0b0a1eca028a30d953ce2d90e0150c1eef0e5ad75ce163d32484"},
+    {file = "jiter-0.1.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:bfcf0996949a9435a2ebba2455934ad72d9faa1de2069c65aeaeaa8c6219820d"},
+    {file = "jiter-0.1.0-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:cfce158151a3a7d0b8f8af549540e1d8328a9dce4ee61c2fb10b12f269d68b6d"},
+    {file = "jiter-0.1.0-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:c22d684e663cc99f887c3133a7714c5ecba73524438bc3c93e6bb868c55a9097"},
+    {file = "jiter-0.1.0-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:fe94ab7e548e492dfd35118de7de613078b7e4ddc276976e8fa2f0f37029cad5"},
+    {file = "jiter-0.1.0-cp311-none-win32.whl", hash = "sha256:1c41463f82b67d2efa8f269f7cd150c6c16c5902a0508277f5b1c1569e93dc1d"},
+    {file = "jiter-0.1.0-cp311-none-win_amd64.whl", hash = "sha256:40d361aa7e728a186495b7b00a47f83f7153714a8b49d9d38dfc45f7b6630f99"},
+    {file = "jiter-0.1.0-cp312-cp312-macosx_10_12_x86_64.whl", hash = "sha256:2a1e6335a4ce98dc64d0871ba3316f06d32728beefe336a621f9877b71a237be"},
+    {file = "jiter-0.1.0-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:832e1a91fea7819507b1d1215e1a82e02da423ea298231af842b35c41d8411db"},
+    {file = "jiter-0.1.0-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:c7f620a558d5952218fe924c7257ce3592835a23e651a140957ba66128675c0d"},
+    {file = "jiter-0.1.0-cp312-cp312-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:2149878ed5c8d1909546d6bb259aaa3ca6b6f81487b03504ea618264f79f4e3b"},
+    {file = "jiter-0.1.0-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:88ba8abb7025fa4e806a1fa03a2be23cb8584ec737bdf62554873ba2698e44d3"},
+    {file = "jiter-0.1.0-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:c2b29b49fe73c7da72f29d922ce85ee5a74772678ecbc2542e99bc4935c68965"},
+    {file = "jiter-0.1.0-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b53bd047ee136f38c0b56779423bae99cab1b9a65b586f1c19e94a6f65013599"},
+    {file = "jiter-0.1.0-cp312-cp312-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:92bd461af7766d7f091216942951b603d546f16c1818b9072f5ec7c89bb8a7d2"},
+    {file = "jiter-0.1.0-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:17a45f16e7253c23c81969086707229591645b192935cb2db226e01bd3abd148"},
+    {file = "jiter-0.1.0-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:e6be9c021ca191c186275d5a9c70b7767cde0852454a8827c9edde995518c856"},
+    {file = "jiter-0.1.0-cp312-none-win32.whl", hash = "sha256:c6445c37eca8d79bedf3bd74683ad668137b05880c7af95f0b96222d62be2db9"},
+    {file = "jiter-0.1.0-cp312-none-win_amd64.whl", hash = "sha256:5cf60df741bc80439cb2d9b2923c7b712c6c82ac6848387f95d77c5723e01d0a"},
+    {file = "jiter-0.1.0-cp38-cp38-macosx_10_12_x86_64.whl", hash = "sha256:977d8b322f5f661f16903d2ff8e981e210ba0e057d2d70a1f7b59b8d478e6d45"},
+    {file = "jiter-0.1.0-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:ceea8e8ac9af7b0f098660f3837bc3ec975716103788f36d228c543b1319c475"},
+    {file = "jiter-0.1.0-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:e3de99e3983c0697c449f45ec740096ac559656485aea48066c982530066dd8d"},
+    {file = "jiter-0.1.0-cp38-cp38-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:fb02700ad165a81b0993ad3c550f3b590f0952ff3ce10826fc62aeb064b47b6a"},
+    {file = "jiter-0.1.0-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:fb78293d40e38ee5c4370c547af06fb63c7e810f3895ecb76ddcc5fa413e9ccf"},
+    {file = "jiter-0.1.0-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:194fcbd242b35bda13196b501b116e50fa553c414e1cb0350dc1bc910bceb00d"},
+    {file = "jiter-0.1.0-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:0c0f55e5cd7b2f649d934b1397bc104200043cdf35addf4892ed66e472e6fe05"},
+    {file = "jiter-0.1.0-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:f6a5c6ae1587f60eb995724e34e7257291c919d163906edd030ced77af9f420b"},
+    {file = "jiter-0.1.0-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:f9f521361cf3633b314edb2313e7abc4fce59dfa1d918561263474fb5c7e17b8"},
+    {file = "jiter-0.1.0-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:c1c0e8b99b4e9fed57b7dbd5be63aa0fc36d45551dedc3c3697aa2694c9a0be3"},
+    {file = "jiter-0.1.0-cp38-none-win32.whl", hash = "sha256:631d92b82f228774e9f0b79927016fafed369521b8bf059fa8c0353ba4cd76b2"},
+    {file = "jiter-0.1.0-cp38-none-win_amd64.whl", hash = "sha256:c1e798a92daf8c6511907c3861c0cf500f23241c160d1c09cb0e9ba668fde667"},
+    {file = "jiter-0.1.0-cp39-cp39-macosx_10_12_x86_64.whl", hash = "sha256:e04740a9ea37118fe6788754eb2ef043ad83809dd677bf3c5f331cc41f8ef70d"},
+    {file = "jiter-0.1.0-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:2d7272eefa5b390c6e450760959e224033b925b0ab76e3279dfdad7f5ec65db0"},
+    {file = "jiter-0.1.0-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:eae1f35e062a71deaad689fb2f51b202c1d55ac941733bdcd7587577e17b8a16"},
+    {file = "jiter-0.1.0-cp39-cp39-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:230fc4dd9c2c3f4b6608fda3f34891cabee2537eef7c7fd0cd68792def14bcc6"},
+    {file = "jiter-0.1.0-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:7f867893fb7b458c5cb302b33fbe769bb8c8e60594057f29e005fc8ad21b2a58"},
+    {file = "jiter-0.1.0-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:b80b4b64aa5dd63e79bf5addc903855a9a5b7b2493a826cc2cbf9cc9ecfcd23a"},
+    {file = "jiter-0.1.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:8ab154d2f877e66757202a71669142c1ba9e9b5c5d1cf81510924950d74f62a3"},
+    {file = "jiter-0.1.0-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:2b43b3fa25b828a2fc4ed7c42f788c261df17d82fb5ced129140ef8be2577ee2"},
+    {file = "jiter-0.1.0-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:eb3e9a062ddba709db2afde1ef2c72244dfbae09a27b4aa3701267e489ef7a30"},
+    {file = "jiter-0.1.0-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:c98bddd0dd5cfe638f1a7e4341edfae0a1c97aed879207e594b221f8c5058aa6"},
+    {file = "jiter-0.1.0-cp39-none-win32.whl", hash = "sha256:9c6d24f8f1764b1c0917bc35131982bea5517cc7b12226f19c4c01215e1be208"},
+    {file = "jiter-0.1.0-cp39-none-win_amd64.whl", hash = "sha256:28f3d4f3e88313ef20e51e3330c22c6ce636ca2eb167b185c298a2ea1ab67b8c"},
+    {file = "jiter-0.1.0.tar.gz", hash = "sha256:d77da07222a42d2ae907dbd03bca708079e4268bb7e155006c2c6960281f7f1a"},
+]
+
 [[package]]
 name = "jmespath"
 version = "1.0.1"
@@ -4233,7 +4307,7 @@ types-requests = ">=2.31.0.2,<3.0.0.0"
 
 [[package]]
 name = "langflow-base"
-version = "0.0.45"
+version = "0.0.46"
 description = "A Python package with a built-in web application"
 optional = false
 python-versions = ">=3.10,<3.13"
@@ -4288,13 +4362,13 @@ url = "src/backend/base"
 
 [[package]]
 name = "langfuse"
-version = "2.32.0"
+version = "2.33.0"
 description = "A client library for accessing langfuse"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langfuse-2.32.0-py3-none-any.whl", hash = "sha256:ecdd06fae46637d635249dfaf8f0564ac8e8769519712b11e777d2905309e5d7"},
-    {file = "langfuse-2.32.0.tar.gz", hash = "sha256:07dcbb8fa9f754928d6af377dbea530d591680e3f50340d687018d8bcb83ba34"},
+    {file = "langfuse-2.33.0-py3-none-any.whl", hash = "sha256:362e3078c5a891df0b7ba3c9ce82f046d1f0274eab3d55337e443fff526f18ad"},
+    {file = "langfuse-2.33.0.tar.gz", hash = "sha256:3ca2ef8539a8f28cb80135f4b46b80d5585ce183f8e2035f318be296d09d7d88"},
 ]
 
 [package.dependencies]
@@ -4312,13 +4386,13 @@ openai = ["openai (>=0.27.8)"]
 
 [[package]]
 name = "langsmith"
-version = "0.1.59"
+version = "0.1.60"
 description = "Client library to connect to the LangSmith LLM Tracing and Evaluation Platform."
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langsmith-0.1.59-py3-none-any.whl", hash = "sha256:445e3bc1d3baa1e5340cd979907a19483b9763a2ed37b863a01113d406f69345"},
-    {file = "langsmith-0.1.59.tar.gz", hash = "sha256:e748a89f4dd6aa441349143e49e546c03b5dfb43376a25bfef6a5ca792fe1437"},
+    {file = "langsmith-0.1.60-py3-none-any.whl", hash = "sha256:3c3520ea473de0a984237b3e9d638fdf23ef3acc5aec89a42e693225e72d6120"},
+    {file = "langsmith-0.1.60.tar.gz", hash = "sha256:6a145b5454437f9e0f81525f23c4dcdbb8c07b1c91553b8f697456c418d6a599"},
 ]
 
 [package.dependencies]
@@ -4345,13 +4419,13 @@ regex = ["regex"]
 
 [[package]]
 name = "litellm"
-version = "1.37.16"
+version = "1.37.19"
 description = "Library to easily interface with LLM API providers"
 optional = false
 python-versions = "!=2.7.*,!=3.0.*,!=3.1.*,!=3.2.*,!=3.3.*,!=3.4.*,!=3.5.*,!=3.6.*,!=3.7.*,>=3.8"
 files = [
-    {file = "litellm-1.37.16-py3-none-any.whl", hash = "sha256:b3250832ff8578d906ee9230ebaf13b787f139de705d4d397f87a0ce3ee57392"},
-    {file = "litellm-1.37.16.tar.gz", hash = "sha256:c90c826a16d154c755f73a828b84b11cef9fc0891ff322023ea247b3c7fcdc1f"},
+    {file = "litellm-1.37.19-py3-none-any.whl", hash = "sha256:5a45b99d6c16a91ba66db6c69d1f406098dbca566be1c2256df5c21c3eb4e4e9"},
+    {file = "litellm-1.37.19.tar.gz", hash = "sha256:9ec9260edaf16476dcff6d91a405364fb994200afa725ed46e7be7c3e54d4515"},
 ]
 
 [package.dependencies]
@@ -4494,13 +4568,13 @@ query-tools = ["guidance (>=0.0.64,<0.0.65)", "jsonpath-ng (>=1.6.0,<2.0.0)", "l
 
 [[package]]
 name = "llama-index-embeddings-openai"
-version = "0.1.9"
+version = "0.1.10"
 description = "llama-index embeddings openai integration"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "llama_index_embeddings_openai-0.1.9-py3-none-any.whl", hash = "sha256:fbd16d6197b91f4dbdc6d0707e573cc224ac2b0a48d5b370c6232dd8a2282473"},
-    {file = "llama_index_embeddings_openai-0.1.9.tar.gz", hash = "sha256:0fd292b2f9a0ad4534a790d6374726bc885853188087eb018167dcf239643924"},
+    {file = "llama_index_embeddings_openai-0.1.10-py3-none-any.whl", hash = "sha256:c3cfa83b537ded34d035fc172a945dd444c87fb58a89b02dfbf785b675f9f681"},
+    {file = "llama_index_embeddings_openai-0.1.10.tar.gz", hash = "sha256:1bc1fc9b46773a12870c5d3097d3735d7ca33805f12462a8e35ae8a6e5ce1cf6"},
 ]
 
 [package.dependencies]
@@ -4562,13 +4636,13 @@ query-tools = ["guidance (>=0.0.64,<0.0.65)", "jsonpath-ng (>=1.6.0,<2.0.0)", "l
 
 [[package]]
 name = "llama-index-llms-openai"
-version = "0.1.19"
+version = "0.1.20"
 description = "llama-index llms openai integration"
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "llama_index_llms_openai-0.1.19-py3-none-any.whl", hash = "sha256:2bd98ff3abbb4aa0daed1fbe01d8b69f8270ab86c53f8da51fc9f148a672264c"},
-    {file = "llama_index_llms_openai-0.1.19.tar.gz", hash = "sha256:f61b64a997892e424fb3cd547090d279c5b210ef15b614fc39de854d3ccaa7e7"},
+    {file = "llama_index_llms_openai-0.1.20-py3-none-any.whl", hash = "sha256:f27401acdf9f65bf4d866a100615dcbd81987b890ae5fa9c513d544ba6d711e7"},
+    {file = "llama_index_llms_openai-0.1.20.tar.gz", hash = "sha256:0282e4e252893487afd72383b46da5b28ddcd3fb73bace1caefce8a36e9cf492"},
 ]
 
 [package.dependencies]
@@ -5751,13 +5825,13 @@ files = [
 
 [[package]]
 name = "nvidia-nvjitlink-cu12"
-version = "12.4.127"
+version = "12.5.40"
 description = "Nvidia JIT LTO Library"
 optional = true
 python-versions = ">=3"
 files = [
-    {file = "nvidia_nvjitlink_cu12-12.4.127-py3-none-manylinux2014_x86_64.whl", hash = "sha256:06b3b9b25bf3f8af351d664978ca26a16d2c5127dbd53c0497e28d1fb9611d57"},
-    {file = "nvidia_nvjitlink_cu12-12.4.127-py3-none-win_amd64.whl", hash = "sha256:fd9020c501d27d135f983c6d3e244b197a7ccad769e34df53a42e276b0e25fa1"},
+    {file = "nvidia_nvjitlink_cu12-12.5.40-py3-none-manylinux2014_x86_64.whl", hash = "sha256:d9714f27c1d0f0895cd8915c07a87a1d0029a0aa36acaf9156952ec2a8a12189"},
+    {file = "nvidia_nvjitlink_cu12-12.5.40-py3-none-win_amd64.whl", hash = "sha256:c3401dc8543b52d3a8158007a0c1ab4e9c768fcbd24153a48c86972102197ddd"},
 ]
 
 [[package]]
@@ -8032,13 +8106,13 @@ files = [
 
 [[package]]
 name = "requests"
-version = "2.31.0"
+version = "2.32.2"
 description = "Python HTTP for Humans."
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "requests-2.31.0-py3-none-any.whl", hash = "sha256:58cd2187c01e70e6e26505bca751777aa9f2ee0b7f4300988b709f44e013003f"},
-    {file = "requests-2.31.0.tar.gz", hash = "sha256:942c5a758f98d790eaed1a29cb6eefc7ffb0d1cf7af05c3d2791656dbd6ad1e1"},
+    {file = "requests-2.32.2-py3-none-any.whl", hash = "sha256:fc06670dd0ed212426dfeb94fc1b983d917c4f9847c863f313c9dfaaffb7c23c"},
+    {file = "requests-2.32.2.tar.gz", hash = "sha256:dd951ff5ecf3e3b3aa26b40703ba77495dab41da839ae72ef3c8e5d8e2433289"},
 ]
 
 [package.dependencies]
@@ -8301,45 +8375,48 @@ torch = ["safetensors[numpy]", "torch (>=1.10)"]
 
 [[package]]
 name = "scikit-learn"
-version = "1.4.2"
+version = "1.5.0"
 description = "A set of python modules for machine learning and data mining"
 optional = true
 python-versions = ">=3.9"
 files = [
-    {file = "scikit-learn-1.4.2.tar.gz", hash = "sha256:daa1c471d95bad080c6e44b4946c9390a4842adc3082572c20e4f8884e39e959"},
-    {file = "scikit_learn-1.4.2-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:8539a41b3d6d1af82eb629f9c57f37428ff1481c1e34dddb3b9d7af8ede67ac5"},
-    {file = "scikit_learn-1.4.2-cp310-cp310-macosx_12_0_arm64.whl", hash = "sha256:68b8404841f944a4a1459b07198fa2edd41a82f189b44f3e1d55c104dbc2e40c"},
-    {file = "scikit_learn-1.4.2-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:81bf5d8bbe87643103334032dd82f7419bc8c8d02a763643a6b9a5c7288c5054"},
-    {file = "scikit_learn-1.4.2-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:36f0ea5d0f693cb247a073d21a4123bdf4172e470e6d163c12b74cbb1536cf38"},
-    {file = "scikit_learn-1.4.2-cp310-cp310-win_amd64.whl", hash = "sha256:87440e2e188c87db80ea4023440923dccbd56fbc2d557b18ced00fef79da0727"},
-    {file = "scikit_learn-1.4.2-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:45dee87ac5309bb82e3ea633955030df9bbcb8d2cdb30383c6cd483691c546cc"},
-    {file = "scikit_learn-1.4.2-cp311-cp311-macosx_12_0_arm64.whl", hash = "sha256:1d0b25d9c651fd050555aadd57431b53d4cf664e749069da77f3d52c5ad14b3b"},
-    {file = "scikit_learn-1.4.2-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:b0203c368058ab92efc6168a1507d388d41469c873e96ec220ca8e74079bf62e"},
-    {file = "scikit_learn-1.4.2-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:44c62f2b124848a28fd695db5bc4da019287abf390bfce602ddc8aa1ec186aae"},
-    {file = "scikit_learn-1.4.2-cp311-cp311-win_amd64.whl", hash = "sha256:5cd7b524115499b18b63f0c96f4224eb885564937a0b3477531b2b63ce331904"},
-    {file = "scikit_learn-1.4.2-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:90378e1747949f90c8f385898fff35d73193dfcaec3dd75d6b542f90c4e89755"},
-    {file = "scikit_learn-1.4.2-cp312-cp312-macosx_12_0_arm64.whl", hash = "sha256:ff4effe5a1d4e8fed260a83a163f7dbf4f6087b54528d8880bab1d1377bd78be"},
-    {file = "scikit_learn-1.4.2-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:671e2f0c3f2c15409dae4f282a3a619601fa824d2c820e5b608d9d775f91780c"},
-    {file = "scikit_learn-1.4.2-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:d36d0bc983336bbc1be22f9b686b50c964f593c8a9a913a792442af9bf4f5e68"},
-    {file = "scikit_learn-1.4.2-cp312-cp312-win_amd64.whl", hash = "sha256:d762070980c17ba3e9a4a1e043ba0518ce4c55152032f1af0ca6f39b376b5928"},
-    {file = "scikit_learn-1.4.2-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:d9993d5e78a8148b1d0fdf5b15ed92452af5581734129998c26f481c46586d68"},
-    {file = "scikit_learn-1.4.2-cp39-cp39-macosx_12_0_arm64.whl", hash = "sha256:426d258fddac674fdf33f3cb2d54d26f49406e2599dbf9a32b4d1696091d4256"},
-    {file = "scikit_learn-1.4.2-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:5460a1a5b043ae5ae4596b3126a4ec33ccba1b51e7ca2c5d36dac2169f62ab1d"},
-    {file = "scikit_learn-1.4.2-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:49d64ef6cb8c093d883e5a36c4766548d974898d378e395ba41a806d0e824db8"},
-    {file = "scikit_learn-1.4.2-cp39-cp39-win_amd64.whl", hash = "sha256:c97a50b05c194be9146d61fe87dbf8eac62b203d9e87a3ccc6ae9aed2dfaf361"},
+    {file = "scikit_learn-1.5.0-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:12e40ac48555e6b551f0a0a5743cc94cc5a765c9513fe708e01f0aa001da2801"},
+    {file = "scikit_learn-1.5.0-cp310-cp310-macosx_12_0_arm64.whl", hash = "sha256:f405c4dae288f5f6553b10c4ac9ea7754d5180ec11e296464adb5d6ac68b6ef5"},
+    {file = "scikit_learn-1.5.0-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:df8ccabbf583315f13160a4bb06037bde99ea7d8211a69787a6b7c5d4ebb6fc3"},
+    {file = "scikit_learn-1.5.0-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:2c75ea812cd83b1385bbfa94ae971f0d80adb338a9523f6bbcb5e0b0381151d4"},
+    {file = "scikit_learn-1.5.0-cp310-cp310-win_amd64.whl", hash = "sha256:a90c5da84829a0b9b4bf00daf62754b2be741e66b5946911f5bdfaa869fcedd6"},
+    {file = "scikit_learn-1.5.0-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:2a65af2d8a6cce4e163a7951a4cfbfa7fceb2d5c013a4b593686c7f16445cf9d"},
+    {file = "scikit_learn-1.5.0-cp311-cp311-macosx_12_0_arm64.whl", hash = "sha256:4c0c56c3005f2ec1db3787aeaabefa96256580678cec783986836fc64f8ff622"},
+    {file = "scikit_learn-1.5.0-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:1f77547165c00625551e5c250cefa3f03f2fc92c5e18668abd90bfc4be2e0bff"},
+    {file = "scikit_learn-1.5.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:118a8d229a41158c9f90093e46b3737120a165181a1b58c03461447aa4657415"},
+    {file = "scikit_learn-1.5.0-cp311-cp311-win_amd64.whl", hash = "sha256:a03b09f9f7f09ffe8c5efffe2e9de1196c696d811be6798ad5eddf323c6f4d40"},
+    {file = "scikit_learn-1.5.0-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:460806030c666addee1f074788b3978329a5bfdc9b7d63e7aad3f6d45c67a210"},
+    {file = "scikit_learn-1.5.0-cp312-cp312-macosx_12_0_arm64.whl", hash = "sha256:1b94d6440603752b27842eda97f6395f570941857456c606eb1d638efdb38184"},
+    {file = "scikit_learn-1.5.0-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:d82c2e573f0f2f2f0be897e7a31fcf4e73869247738ab8c3ce7245549af58ab8"},
+    {file = "scikit_learn-1.5.0-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:a3a10e1d9e834e84d05e468ec501a356226338778769317ee0b84043c0d8fb06"},
+    {file = "scikit_learn-1.5.0-cp312-cp312-win_amd64.whl", hash = "sha256:855fc5fa8ed9e4f08291203af3d3e5fbdc4737bd617a371559aaa2088166046e"},
+    {file = "scikit_learn-1.5.0-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:40fb7d4a9a2db07e6e0cae4dc7bdbb8fada17043bac24104d8165e10e4cff1a2"},
+    {file = "scikit_learn-1.5.0-cp39-cp39-macosx_12_0_arm64.whl", hash = "sha256:47132440050b1c5beb95f8ba0b2402bbd9057ce96ec0ba86f2f445dd4f34df67"},
+    {file = "scikit_learn-1.5.0-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:174beb56e3e881c90424e21f576fa69c4ffcf5174632a79ab4461c4c960315ac"},
+    {file = "scikit_learn-1.5.0-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:261fe334ca48f09ed64b8fae13f9b46cc43ac5f580c4a605cbb0a517456c8f71"},
+    {file = "scikit_learn-1.5.0-cp39-cp39-win_amd64.whl", hash = "sha256:057b991ac64b3e75c9c04b5f9395eaf19a6179244c089afdebaad98264bff37c"},
+    {file = "scikit_learn-1.5.0.tar.gz", hash = "sha256:789e3db01c750ed6d496fa2db7d50637857b451e57bcae863bff707c1247bef7"},
 ]
 
 [package.dependencies]
 joblib = ">=1.2.0"
 numpy = ">=1.19.5"
 scipy = ">=1.6.0"
-threadpoolctl = ">=2.0.0"
+threadpoolctl = ">=3.1.0"
 
 [package.extras]
-benchmark = ["matplotlib (>=3.3.4)", "memory-profiler (>=0.57.0)", "pandas (>=1.1.5)"]
-docs = ["Pillow (>=7.1.2)", "matplotlib (>=3.3.4)", "memory-profiler (>=0.57.0)", "numpydoc (>=1.2.0)", "pandas (>=1.1.5)", "plotly (>=5.14.0)", "pooch (>=1.6.0)", "scikit-image (>=0.17.2)", "seaborn (>=0.9.0)", "sphinx (>=6.0.0)", "sphinx-copybutton (>=0.5.2)", "sphinx-gallery (>=0.15.0)", "sphinx-prompt (>=1.3.0)", "sphinxext-opengraph (>=0.4.2)"]
+benchmark = ["matplotlib (>=3.3.4)", "memory_profiler (>=0.57.0)", "pandas (>=1.1.5)"]
+build = ["cython (>=3.0.10)", "meson-python (>=0.15.0)", "numpy (>=1.19.5)", "scipy (>=1.6.0)"]
+docs = ["Pillow (>=7.1.2)", "matplotlib (>=3.3.4)", "memory_profiler (>=0.57.0)", "numpydoc (>=1.2.0)", "pandas (>=1.1.5)", "plotly (>=5.14.0)", "polars (>=0.20.23)", "pooch (>=1.6.0)", "scikit-image (>=0.17.2)", "seaborn (>=0.9.0)", "sphinx (>=6.0.0)", "sphinx-copybutton (>=0.5.2)", "sphinx-gallery (>=0.15.0)", "sphinx-prompt (>=1.3.0)", "sphinxext-opengraph (>=0.4.2)"]
 examples = ["matplotlib (>=3.3.4)", "pandas (>=1.1.5)", "plotly (>=5.14.0)", "pooch (>=1.6.0)", "scikit-image (>=0.17.2)", "seaborn (>=0.9.0)"]
-tests = ["black (>=23.3.0)", "matplotlib (>=3.3.4)", "mypy (>=1.3)", "numpydoc (>=1.2.0)", "pandas (>=1.1.5)", "polars (>=0.19.12)", "pooch (>=1.6.0)", "pyamg (>=4.0.0)", "pyarrow (>=12.0.0)", "pytest (>=7.1.2)", "pytest-cov (>=2.9.0)", "ruff (>=0.0.272)", "scikit-image (>=0.17.2)"]
+install = ["joblib (>=1.2.0)", "numpy (>=1.19.5)", "scipy (>=1.6.0)", "threadpoolctl (>=3.1.0)"]
+maintenance = ["conda-lock (==2.5.6)"]
+tests = ["black (>=24.3.0)", "matplotlib (>=3.3.4)", "mypy (>=1.9)", "numpydoc (>=1.2.0)", "pandas (>=1.1.5)", "polars (>=0.20.23)", "pooch (>=1.6.0)", "pyamg (>=4.0.0)", "pyarrow (>=12.0.0)", "pytest (>=7.1.2)", "pytest-cov (>=2.9.0)", "ruff (>=0.2.1)", "scikit-image (>=0.17.2)"]
 
 [[package]]
 name = "scipy"
@@ -8409,19 +8486,18 @@ dev = ["pre-commit", "pytest", "ruff (>=0.3.0)"]
 
 [[package]]
 name = "setuptools"
-version = "69.5.1"
+version = "70.0.0"
 description = "Easily download, build, install, upgrade, and uninstall Python packages"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "setuptools-69.5.1-py3-none-any.whl", hash = "sha256:c636ac361bc47580504644275c9ad802c50415c7522212252c033bd15f301f32"},
-    {file = "setuptools-69.5.1.tar.gz", hash = "sha256:6c1fccdac05a97e598fb0ae3bbed5904ccb317337a51139dcd51453611bbb987"},
+    {file = "setuptools-70.0.0-py3-none-any.whl", hash = "sha256:54faa7f2e8d2d11bcd2c07bed282eef1046b5c080d1c32add737d7b5817b1ad4"},
+    {file = "setuptools-70.0.0.tar.gz", hash = "sha256:f211a66637b8fa059bb28183da127d4e86396c991a942b028c6650d4319c3fd0"},
 ]
 
 [package.extras]
-docs = ["furo", "jaraco.packaging (>=9.3)", "jaraco.tidelift (>=1.4)", "pygments-github-lexers (==0.0.5)", "rst.linker (>=1.9)", "sphinx (>=3.5)", "sphinx-favicon", "sphinx-inline-tabs", "sphinx-lint", "sphinx-notfound-page (>=1,<2)", "sphinx-reredirects", "sphinxcontrib-towncrier"]
-testing = ["build[virtualenv]", "filelock (>=3.4.0)", "importlib-metadata", "ini2toml[lite] (>=0.9)", "jaraco.develop (>=7.21)", "jaraco.envs (>=2.2)", "jaraco.path (>=3.2.0)", "mypy (==1.9)", "packaging (>=23.2)", "pip (>=19.1)", "pytest (>=6,!=8.1.1)", "pytest-checkdocs (>=2.4)", "pytest-cov", "pytest-enabler (>=2.2)", "pytest-home (>=0.5)", "pytest-mypy", "pytest-perf", "pytest-ruff (>=0.2.1)", "pytest-timeout", "pytest-xdist (>=3)", "tomli", "tomli-w (>=1.0.0)", "virtualenv (>=13.0.0)", "wheel"]
-testing-integration = ["build[virtualenv] (>=1.0.3)", "filelock (>=3.4.0)", "jaraco.envs (>=2.2)", "jaraco.path (>=3.2.0)", "packaging (>=23.2)", "pytest", "pytest-enabler", "pytest-xdist", "tomli", "virtualenv (>=13.0.0)", "wheel"]
+docs = ["furo", "jaraco.packaging (>=9.3)", "jaraco.tidelift (>=1.4)", "pygments-github-lexers (==0.0.5)", "pyproject-hooks (!=1.1)", "rst.linker (>=1.9)", "sphinx (>=3.5)", "sphinx-favicon", "sphinx-inline-tabs", "sphinx-lint", "sphinx-notfound-page (>=1,<2)", "sphinx-reredirects", "sphinxcontrib-towncrier"]
+testing = ["build[virtualenv] (>=1.0.3)", "filelock (>=3.4.0)", "importlib-metadata", "ini2toml[lite] (>=0.14)", "jaraco.develop (>=7.21)", "jaraco.envs (>=2.2)", "jaraco.path (>=3.2.0)", "mypy (==1.9)", "packaging (>=23.2)", "pip (>=19.1)", "pyproject-hooks (!=1.1)", "pytest (>=6,!=8.1.1)", "pytest-checkdocs (>=2.4)", "pytest-cov", "pytest-enabler (>=2.2)", "pytest-home (>=0.5)", "pytest-mypy", "pytest-perf", "pytest-ruff (>=0.2.1)", "pytest-subprocess", "pytest-timeout", "pytest-xdist (>=3)", "tomli", "tomli-w (>=1.0.0)", "virtualenv (>=13.0.0)", "wheel"]
 
 [[package]]
 name = "shapely"
@@ -9296,13 +9372,13 @@ files = [
 
 [[package]]
 name = "types-pillow"
-version = "10.2.0.20240511"
+version = "10.2.0.20240520"
 description = "Typing stubs for Pillow"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "types-Pillow-10.2.0.20240511.tar.gz", hash = "sha256:b2fcc27b8e15ae3741941e43b4f39eba6fce6bcb152af90bbb07b387d2585783"},
-    {file = "types_Pillow-10.2.0.20240511-py3-none-any.whl", hash = "sha256:ef87a19ea0a02a89c784cbc1b99dfff6c00dd0d5796a8ac868cf7ec69c5f88ff"},
+    {file = "types-Pillow-10.2.0.20240520.tar.gz", hash = "sha256:130b979195465fa1e1676d8e81c9c7c30319e8e95b12fae945e8f0d525213107"},
+    {file = "types_Pillow-10.2.0.20240520-py3-none-any.whl", hash = "sha256:33c36494b380e2a269bb742181bea5d9b00820367822dbd3760f07210a1da23d"},
 ]
 
 [[package]]
@@ -9395,13 +9471,13 @@ types-pyOpenSSL = "*"
 
 [[package]]
 name = "types-requests"
-version = "2.31.0.20240406"
+version = "2.32.0.20240521"
 description = "Typing stubs for requests"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "types-requests-2.31.0.20240406.tar.gz", hash = "sha256:4428df33c5503945c74b3f42e82b181e86ec7b724620419a2966e2de604ce1a1"},
-    {file = "types_requests-2.31.0.20240406-py3-none-any.whl", hash = "sha256:6216cdac377c6b9a040ac1c0404f7284bd13199c0e1bb235f4324627e8898cf5"},
+    {file = "types-requests-2.32.0.20240521.tar.gz", hash = "sha256:c5c4a0ae95aad51f1bf6dae9eed04a78f7f2575d4b171da37b622e08b93eb5d3"},
+    {file = "types_requests-2.32.0.20240521-py3-none-any.whl", hash = "sha256:ab728ba43ffb073db31f21202ecb97db8753ded4a9dc49cb480d8a5350c5c421"},
 ]
 
 [package.dependencies]
@@ -9799,13 +9875,13 @@ files = [
 
 [[package]]
 name = "weaviate-client"
-version = "4.6.2"
+version = "4.6.3"
 description = "A python native Weaviate client"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "weaviate_client-4.6.2-py3-none-any.whl", hash = "sha256:dfe1981230100a202f94510447b0136357d77d5663fb4fc37a0894412eb2a207"},
-    {file = "weaviate_client-4.6.2.tar.gz", hash = "sha256:6f66319bb2d76501c8c3262c08470873c716578048241373f627095aa3fb6cc1"},
+    {file = "weaviate_client-4.6.3-py3-none-any.whl", hash = "sha256:b2921f9aea84a4eccb1c75d55dd2857a87241e5536540fb96ffdf4737ed4fe8a"},
+    {file = "weaviate_client-4.6.3.tar.gz", hash = "sha256:a6e638f746f91c310fe6680cffa77949718f17d8b40b966f7037028cacfd94e0"},
 ]
 
 [package.dependencies]

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow"
-version = "1.0.0a34"
+version = "1.0.0a35"
 description = "A Python package with a built-in web application"
 authors = ["Langflow <contact@langflow.org>"]
 maintainers = [

scripts/aws/lib/construct/db.ts

@@ -1,27 +1,30 @@
-import { Construct } from 'constructs';
-import * as ec2 from 'aws-cdk-lib/aws-ec2'
+import { Construct } from "constructs";
+import * as ec2 from "aws-cdk-lib/aws-ec2";
 import * as rds from "aws-cdk-lib/aws-rds";
-import * as cdk from 'aws-cdk-lib';
+import * as cdk from "aws-cdk-lib";
 
 interface RdsProps {
-  vpc: ec2.Vpc
-  dbSG:ec2.SecurityGroup
+  vpc: ec2.Vpc;
+  dbSG: ec2.SecurityGroup;
 }
 
-export class Rds extends Construct{
-  readonly rdsCluster: rds.DatabaseCluster
+export class Rds extends Construct {
+  readonly rdsCluster: rds.DatabaseCluster;
 
-  constructor(scope: Construct, id:string, props: RdsProps){
+  constructor(scope: Construct, id: string, props: RdsProps) {
     super(scope, id);
 
-    const {vpc, dbSG} = props
-    const instanceType = ec2.InstanceType.of(ec2.InstanceClass.BURSTABLE4_GRAVITON, ec2.InstanceSize.MEDIUM)
+    const { vpc, dbSG } = props;
+    const instanceType = ec2.InstanceType.of(
+      ec2.InstanceClass.BURSTABLE4_GRAVITON,
+      ec2.InstanceSize.MEDIUM
+    );
 
     // RDSのパスワードを自動生成してSecrets Managerに格納
-    const rdsCredentials = rds.Credentials.fromGeneratedSecret('db_user',{
-      secretName: 'langflow-DbSecret',
-    })
-    
+    const rdsCredentials = rds.Credentials.fromGeneratedSecret("db_user", {
+      secretName: "langflow-DbSecret",
+    });
+
     // DB クラスターのパラメータグループ作成
     const clusterParameterGroup = new rds.ParameterGroup(
       scope,
@@ -36,7 +39,7 @@ export class Rds extends Construct{
         description: "for-langflow",
       }
     );
-    clusterParameterGroup.bindToCluster({})
+    clusterParameterGroup.bindToCluster({});
 
     // DB インスタンスのパラメタグループ作成
     const instanceParameterGroup = new rds.ParameterGroup(
@@ -44,12 +47,15 @@ export class Rds extends Construct{
       "InstanceParameterGroup",
       {
         engine: rds.DatabaseClusterEngine.auroraMysql({
-          version: rds.AuroraMysqlEngineVersion.of("8.0.mysql_aurora.3.05.2", '8.0'),
+          version: rds.AuroraMysqlEngineVersion.of(
+            "8.0.mysql_aurora.3.05.2",
+            "8.0"
+          ),
         }),
         description: "for-langflow",
       }
     );
-    instanceParameterGroup.bindToInstance({})
+    instanceParameterGroup.bindToInstance({});
 
     this.rdsCluster = new rds.DatabaseCluster(scope, "LangflowDbCluster", {
       engine: rds.DatabaseClusterEngine.auroraMysql({

src/backend/base/langflow/__main__.py

@@ -17,8 +17,10 @@ from rich import print as rprint
 from rich.console import Console
 from rich.panel import Panel
 from rich.table import Table
+from sqlmodel import select
 
 from langflow.main import setup_app
+from langflow.services.database.models.folder.utils import create_default_folder_if_it_doesnt_exist
 from langflow.services.database.utils import session_getter
 from langflow.services.deps import get_db_service
 from langflow.services.utils import initialize_services
@@ -432,11 +434,16 @@ def superuser(
             # Verify that the superuser was created
             from langflow.services.database.models.user.model import User
 
-            user: User = session.query(User).filter(User.username == username).first()
+            user: User = session.exec(select(User).where(User.username == username)).first()
             if user is None or not user.is_superuser:
                 typer.echo("Superuser creation failed.")
                 return
-
+            # Now create the first folder for the user
+            result = create_default_folder_if_it_doesnt_exist(session, user.id)
+            if result:
+                typer.echo("Default folder created successfully.")
+            else:
+                raise RuntimeError("Could not create default folder.")
             typer.echo("Superuser created successfully.")
 
         else:

src/backend/base/langflow/alembic/versions/012fb73ac359_add_folder_table.py

@@ -0,0 +1,78 @@
+"""Add Folder table
+
+Revision ID: 012fb73ac359
+Revises: c153816fd85f
+Create Date: 2024-05-07 12:52:16.954691
+
+"""
+
+from typing import Sequence, Union
+
+import sqlalchemy as sa
+import sqlmodel
+from alembic import op
+from sqlalchemy.engine.reflection import Inspector
+
+# revision identifiers, used by Alembic.
+revision: str = "012fb73ac359"
+down_revision: Union[str, None] = "c153816fd85f"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    conn = op.get_bind()
+    inspector = Inspector.from_engine(conn)  # type: ignore
+    table_names = inspector.get_table_names()
+    # ### commands auto generated by Alembic - please adjust! ###
+    if "folder" not in table_names:
+        op.create_table(
+            "folder",
+            sa.Column("name", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+            sa.Column("description", sqlmodel.sql.sqltypes.AutoString(), nullable=True),
+            sa.Column("id", sqlmodel.sql.sqltypes.GUID(), nullable=False),
+            sa.Column("parent_id", sqlmodel.sql.sqltypes.GUID(), nullable=True),
+            sa.Column("user_id", sqlmodel.sql.sqltypes.GUID(), nullable=True),
+            sa.ForeignKeyConstraint(
+                ["parent_id"],
+                ["folder.id"],
+            ),
+            sa.ForeignKeyConstraint(
+                ["user_id"],
+                ["user.id"],
+            ),
+            sa.PrimaryKeyConstraint("id"),
+        )
+    indexes = inspector.get_indexes("folder")
+    if "ix_folder_name" not in [index["name"] for index in indexes]:
+        with op.batch_alter_table("folder", schema=None) as batch_op:
+            batch_op.create_index(batch_op.f("ix_folder_name"), ["name"], unique=False)
+
+    if "folder_id" not in inspector.get_columns("flow"):
+        with op.batch_alter_table("flow", schema=None) as batch_op:
+            batch_op.add_column(sa.Column("folder_id", sqlmodel.sql.sqltypes.GUID(), nullable=True))
+            batch_op.create_foreign_key("flow_folder_id_fkey", "folder", ["folder_id"], ["id"])
+            batch_op.drop_column("folder")
+
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    conn = op.get_bind()
+    inspector = Inspector.from_engine(conn)  # type: ignore
+    table_names = inspector.get_table_names()
+    # ### commands auto generated by Alembic - please adjust! ###
+    if "folder_id" in inspector.get_columns("flow"):
+        with op.batch_alter_table("flow", schema=None) as batch_op:
+            batch_op.add_column(sa.Column("folder", sa.VARCHAR(), nullable=True))
+            batch_op.drop_constraint("flow_folder_id_fkey", type_="foreignkey")
+            batch_op.drop_column("folder_id")
+
+    indexes = inspector.get_indexes("folder")
+    if "ix_folder_name" in [index["name"] for index in indexes]:
+        with op.batch_alter_table("folder", schema=None) as batch_op:
+            batch_op.drop_index(batch_op.f("ix_folder_name"))
+
+    if "folder" in table_names:
+        op.drop_table("folder")
+    # ### end Alembic commands ###

src/backend/base/langflow/alembic/versions/29fe8f1f806b_add_missing_index.py

@@ -0,0 +1,43 @@
+"""Add missing index
+
+Revision ID: 29fe8f1f806b
+Revises: 012fb73ac359
+Create Date: 2024-05-21 09:23:48.772367
+
+"""
+
+from typing import Sequence, Union
+
+from alembic import op
+from sqlalchemy.engine.reflection import Inspector
+
+revision: str = "29fe8f1f806b"
+down_revision: Union[str, None] = "012fb73ac359"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    conn = op.get_bind()
+    inspector = Inspector.from_engine(conn)  # type: ignore
+    # ### commands auto generated by Alembic - please adjust! ###
+    indexes = inspector.get_indexes("flow")
+    with op.batch_alter_table("flow", schema=None) as batch_op:
+        indexes_names = [index["name"] for index in indexes]
+        if "ix_flow_folder_id" not in indexes_names:
+            batch_op.create_index(batch_op.f("ix_flow_folder_id"), ["folder_id"], unique=False)
+
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    conn = op.get_bind()
+    inspector = Inspector.from_engine(conn)  # type: ignore
+    # ### commands auto generated by Alembic - please adjust! ###
+    indexes = inspector.get_indexes("flow")
+    with op.batch_alter_table("flow", schema=None) as batch_op:
+        indexes_names = [index["name"] for index in indexes]
+        if "ix_flow_folder_id" in indexes_names:
+            batch_op.drop_index(batch_op.f("ix_flow_folder_id"))
+
+    # ### end Alembic commands ###

src/backend/base/langflow/api/router.py

@@ -13,6 +13,7 @@ from langflow.api.v1 import (
     users_router,
     validate_router,
     variables_router,
+    folders_router,
 )
 
 router = APIRouter(
@@ -29,3 +30,4 @@ router.include_router(login_router)
 router.include_router(variables_router)
 router.include_router(files_router)
 router.include_router(monitor_router)
+router.include_router(folders_router)

src/backend/base/langflow/api/v1/__init__.py

@@ -9,6 +9,7 @@ from langflow.api.v1.store import router as store_router
 from langflow.api.v1.users import router as users_router
 from langflow.api.v1.validate import router as validate_router
 from langflow.api.v1.variable import router as variables_router
+from langflow.api.v1.folders import router as folders_router
 
 __all__ = [
     "chat_router",
@@ -22,4 +23,5 @@ __all__ = [
     "variables_router",
     "monitor_router",
     "files_router",
+    "folders_router",
 ]

src/backend/base/langflow/api/v1/chat.py

@@ -29,7 +29,7 @@ from langflow.services.deps import get_chat_service, get_session, get_session_se
 from langflow.services.monitor.utils import log_vertex_build
 
 if TYPE_CHECKING:
-    from langflow.graph.vertex.types import ChatVertex
+    from langflow.graph.vertex.types import InterfaceVertex
     from langflow.services.session.service import SessionService
 
 router = APIRouter(tags=["Chat"])
@@ -288,7 +288,7 @@ async def build_vertex_stream(
                     if not graph:
                         raise ValueError(f"No graph found for {flow_id}.")
 
-                vertex: "ChatVertex" = graph.get_vertex(vertex_id)
+                vertex: "InterfaceVertex" = graph.get_vertex(vertex_id)
                 if not hasattr(vertex, "stream"):
                     raise ValueError(f"Vertex {vertex_id} does not support streaming")
                 if isinstance(vertex._built_result, str) and vertex._built_result:

src/backend/base/langflow/api/v1/endpoints.py

@@ -4,7 +4,7 @@ from typing import Annotated, List, Optional, Union
 import sqlalchemy as sa
 from fastapi import APIRouter, Body, Depends, HTTPException, UploadFile, status
 from loguru import logger
-from sqlmodel import Session, select
+from sqlmodel import Session, col, select
 
 from langflow.api.utils import update_frontend_node_with_template_values
 from langflow.api.v1.schemas import (

src/backend/base/langflow/api/v1/flows.py

@@ -2,17 +2,19 @@ from datetime import datetime, timezone
 from typing import List
 from uuid import UUID
 
+from langflow.services.database.models.folder.constants import DEFAULT_FOLDER_NAME
 import orjson
 from fastapi import APIRouter, Depends, File, HTTPException, UploadFile
 from fastapi.encoders import jsonable_encoder
 from loguru import logger
-from sqlmodel import Session, select
+from sqlmodel import Session, col, select
 
 from langflow.api.utils import remove_api_keys, validate_is_component
-from langflow.api.v1.schemas import FlowListCreate, FlowListRead
+from langflow.api.v1.schemas import FlowListCreate, FlowListIds, FlowListRead
 from langflow.initial_setup.setup import STARTER_FOLDER_NAME
 from langflow.services.auth.utils import get_current_active_user
 from langflow.services.database.models.flow import Flow, FlowCreate, FlowRead, FlowUpdate
+from langflow.services.database.models.folder.model import Folder
 from langflow.services.database.models.user.model import User
 from langflow.services.deps import get_session, get_settings_service
 from langflow.services.settings.service import SettingsService
@@ -35,6 +37,11 @@ def create_flow(
     db_flow = Flow.model_validate(flow, from_attributes=True)
     db_flow.updated_at = datetime.now(timezone.utc)
 
+    if db_flow.folder_id is None:
+        default_folder = session.exec(select(Folder).where(Folder.name == DEFAULT_FOLDER_NAME)).first()
+        if default_folder:
+            db_flow.folder_id = default_folder.id
+
     session.add(db_flow)
     session.commit()
     session.refresh(db_flow)
@@ -67,7 +74,7 @@ def read_flows(
             example_flows = session.exec(
                 select(Flow).where(
                     Flow.user_id == None,  # noqa
-                    Flow.folder == STARTER_FOLDER_NAME,
+                    Flow.folder.has(Folder.name == STARTER_FOLDER_NAME),
                 )
             ).all()
             for example_flow in example_flows:
@@ -129,6 +136,10 @@ def update_flow(
         if value is not None:
             setattr(db_flow, key, value)
     db_flow.updated_at = datetime.now(timezone.utc)
+    if db_flow.folder_id is None:
+        default_folder = session.exec(select(Folder).where(Folder.name == DEFAULT_FOLDER_NAME)).first()
+        if default_folder:
+            db_flow.folder_id = default_folder.id
     session.add(db_flow)
     session.commit()
     session.refresh(db_flow)
@@ -208,3 +219,31 @@ async def download_file(
     """Download all flows as a file."""
     flows = read_flows(current_user=current_user, session=session, settings_service=settings_service)
     return FlowListRead(flows=flows)
+
+
+@router.post("/multiple_delete/")
+async def delete_multiple_flows(
+    flow_ids: FlowListIds, user: User = Depends(get_current_active_user), db: Session = Depends(get_session)
+):
+    """
+    Delete multiple flows by their IDs.
+
+    Args:
+        flow_ids (List[str]): The list of flow IDs to delete.
+        user (User, optional): The user making the request. Defaults to the current active user.
+
+    Returns:
+        dict: A dictionary containing the number of flows deleted.
+
+    """
+    try:
+        deleted_flows = db.exec(
+            select(Flow).where(col(Flow.id).in_(flow_ids.flow_ids)).where(Flow.user_id == user.id)
+        ).all()
+        for flow in deleted_flows:
+            db.delete(flow)
+        db.commit()
+        return {"deleted": len(deleted_flows)}
+    except Exception as exc:
+        logger.exception(exc)
+        raise HTTPException(status_code=500, detail=str(exc)) from exc

src/backend/base/langflow/api/v1/folders.py

@@ -0,0 +1,243 @@
+from typing import List
+from uuid import UUID
+
+from fastapi import APIRouter, Depends, File, HTTPException, Response, UploadFile, status
+from langflow.api.v1.flows import create_flows
+from langflow.api.v1.schemas import FlowListCreate, FlowListReadWithFolderName
+from langflow.initial_setup.setup import STARTER_FOLDER_NAME
+from langflow.services.database.models.flow.model import Flow, FlowCreate, FlowRead
+from langflow.services.database.models.folder.constants import DEFAULT_FOLDER_NAME
+import orjson
+from sqlalchemy import update
+from sqlmodel import Session, select
+
+from langflow.services.auth.utils import get_current_active_user
+from langflow.services.database.models.folder.model import (
+    Folder,
+    FolderCreate,
+    FolderRead,
+    FolderReadWithFlows,
+    FolderUpdate,
+)
+from langflow.services.database.models.user.model import User
+from langflow.services.deps import get_session
+
+router = APIRouter(prefix="/folders", tags=["Folders"])
+
+
+@router.post("/", response_model=FolderRead, status_code=201)
+def create_folder(
+    *,
+    session: Session = Depends(get_session),
+    folder: FolderCreate,
+    current_user: User = Depends(get_current_active_user),
+):
+    try:
+        new_folder = Folder.model_validate(folder, from_attributes=True)
+        new_folder.user_id = current_user.id
+        session.add(new_folder)
+        session.commit()
+        session.refresh(new_folder)
+
+        if folder.components_list.__len__() > 0:
+            update_statement_components = (
+                update(Flow).where(Flow.id.in_(folder.components_list)).values(folder_id=new_folder.id)
+            )
+            session.exec(update_statement_components)
+            session.commit()
+
+        if folder.flows_list.__len__() > 0:
+            update_statement_flows = update(Flow).where(Flow.id.in_(folder.flows_list)).values(folder_id=new_folder.id)
+            session.exec(update_statement_flows)
+            session.commit()
+
+        return new_folder
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/", response_model=List[FolderRead], status_code=200)
+def read_folders(
+    *,
+    session: Session = Depends(get_session),
+    current_user: User = Depends(get_current_active_user),
+):
+    try:
+        folders = session.exec(select(Folder).where(Folder.user_id == current_user.id)).all()
+        return folders
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/starter-projects", response_model=FolderReadWithFlows, status_code=200)
+def read_starter_folders(*, session: Session = Depends(get_session)):
+    try:
+        folders = session.exec(select(Folder).where(Folder.name == STARTER_FOLDER_NAME)).first()
+        return folders
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/{folder_id}", response_model=FolderReadWithFlows, status_code=200)
+def read_folder(
+    *,
+    session: Session = Depends(get_session),
+    folder_id: UUID,
+    current_user: User = Depends(get_current_active_user),
+):
+    try:
+        folder = session.exec(select(Folder).where(Folder.id == folder_id, Folder.user_id == current_user.id)).first()
+        if not folder:
+            raise HTTPException(status_code=404, detail="Folder not found")
+        folder.flows = session.exec(select(Flow).where(Flow.folder_id == folder_id)).all()
+        return folder
+    except Exception as e:
+        if "No result found" in str(e):
+            raise HTTPException(status_code=404, detail="Folder not found")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.patch("/{folder_id}", response_model=FolderRead, status_code=200)
+def update_folder(
+    *,
+    session: Session = Depends(get_session),
+    folder_id: UUID,
+    folder: FolderUpdate,  # Assuming FolderUpdate is a Pydantic model defining updatable fields
+    current_user: User = Depends(get_current_active_user),
+):
+    try:
+        existing_folder = session.exec(
+            select(Folder).where(Folder.id == folder_id, Folder.user_id == current_user.id)
+        ).first()
+        if not existing_folder:
+            raise HTTPException(status_code=404, detail="Folder not found")
+        folder_data = folder.model_dump(exclude_unset=True)
+        for key, value in folder_data.items():
+            if key != "components" and key != "flows":
+                setattr(existing_folder, key, value)
+        session.add(existing_folder)
+        session.commit()
+        session.refresh(existing_folder)
+
+        concat_folder_components = folder.components + folder.flows
+
+        flows_ids = session.exec(select(Flow.id).where(Flow.folder_id == existing_folder.id)).all()
+
+        excluded_flows = list(set(flows_ids) - set(concat_folder_components))
+
+        my_collection_folder = session.exec(select(Folder).where(Folder.name == DEFAULT_FOLDER_NAME)).first()
+        if my_collection_folder:
+            update_statement_my_collection = (
+                update(Flow).where(Flow.id.in_(excluded_flows)).values(folder_id=my_collection_folder.id)
+            )
+            session.exec(update_statement_my_collection)
+            session.commit()
+
+        if concat_folder_components.__len__() > 0:
+            update_statement_components = (
+                update(Flow).where(Flow.id.in_(concat_folder_components)).values(folder_id=existing_folder.id)
+            )
+            session.exec(update_statement_components)
+            session.commit()
+
+        return existing_folder
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.delete("/{folder_id}", status_code=204)
+def delete_folder(
+    *,
+    session: Session = Depends(get_session),
+    folder_id: UUID,
+    current_user: User = Depends(get_current_active_user),
+):
+    try:
+        folder = session.exec(select(Folder).where(Folder.id == folder_id, Folder.user_id == current_user.id)).first()
+        if not folder:
+            raise HTTPException(status_code=404, detail="Folder not found")
+        session.delete(folder)
+        session.commit()
+        flows = session.exec(select(Flow).where(Flow.folder_id == folder_id, Folder.user_id == current_user.id)).all()
+        for flow in flows:
+            session.delete(flow)
+        session.commit()
+        return Response(status_code=status.HTTP_204_NO_CONTENT)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/download/{folder_id}", response_model=FlowListReadWithFolderName, status_code=200)
+async def download_file(
+    *,
+    session: Session = Depends(get_session),
+    folder_id: UUID,
+    current_user: User = Depends(get_current_active_user),
+):
+    """Download all flows from folder."""
+    try:
+        flows = session.exec(
+            select(Flow).distinct().join(Folder).where(Flow.folder_id == folder_id, Folder.user_id == current_user.id)
+        ).all()
+        folder_name = (
+            session.exec(select(Folder).where(Folder.id == folder_id, Folder.user_id == current_user.id)).first().name
+        )
+        folder_description = (
+            session.exec(select(Folder).where(Folder.id == folder_id, Folder.user_id == current_user.id))
+            .first()
+            .description
+        )
+        if not flows:
+            flows = []
+        return FlowListReadWithFolderName(flows=flows, folder_name=folder_name, folder_description=folder_description)
+    except Exception as e:
+        if "No result found" in str(e):
+            raise HTTPException(status_code=404, detail="Folder not found")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.post("/upload/", response_model=List[FlowRead], status_code=201)
+async def upload_file(
+    *,
+    session: Session = Depends(get_session),
+    file: UploadFile = File(...),
+    current_user: User = Depends(get_current_active_user),
+):
+    """Upload flows from a file."""
+    contents = await file.read()
+    data = orjson.loads(contents)
+
+    if data.__len__() == 0:
+        raise HTTPException(status_code=400, detail="No flows found in the file")
+
+    folder_results = session.exec(
+        select(Folder).where(Folder.name.like(f"{data['folder_name']}%"), Folder.user_id == current_user.id)
+    )
+    existing_folder_names = [folder.name for folder in folder_results]
+
+    if existing_folder_names.__len__() > 0:
+        data["folder_name"] = f"{data['folder_name']} ({existing_folder_names.__len__() + 1})"
+
+    folder = FolderCreate(name=data["folder_name"], description=data["folder_description"])
+
+    new_folder = Folder.model_validate(folder, from_attributes=True)
+    new_folder.id = None
+    new_folder.user_id = current_user.id
+    session.add(new_folder)
+    session.commit()
+    session.refresh(new_folder)
+
+    del data["folder_name"]
+    del data["folder_description"]
+
+    if "flows" in data:
+        flow_list = FlowListCreate(flows=[FlowCreate(**flow) for flow in data["flows"]])
+    else:
+        raise HTTPException(status_code=400, detail="No flows found in the data")
+    # Now we set the user_id for all flows
+    for flow in flow_list.flows:
+        flow.user_id = current_user.id
+        flow.folder_id = new_folder.id
+
+    return create_flows(session=session, flow_list=flow_list, current_user=current_user)

src/backend/base/langflow/api/v1/login.py

@@ -1,5 +1,7 @@
 from fastapi import APIRouter, Depends, HTTPException, Request, Response, status
 from fastapi.security import OAuth2PasswordRequestForm
+from sqlmodel import Session
+
 from langflow.api.v1.schemas import Token
 from langflow.services.auth.utils import (
     authenticate_user,
@@ -7,14 +9,10 @@ from langflow.services.auth.utils import (
     create_user_longterm_token,
     create_user_tokens,
 )
-from langflow.services.deps import (
-    get_session,
-    get_settings_service,
-    get_variable_service,
-)
+from langflow.services.database.models.folder.utils import create_default_folder_if_it_doesnt_exist
+from langflow.services.deps import get_session, get_settings_service, get_variable_service
 from langflow.services.settings.manager import SettingsService
 from langflow.services.variable.service import VariableService
-from sqlmodel import Session
 
 router = APIRouter(tags=["Login"])
 
@@ -58,6 +56,8 @@ async def login_to_get_access_token(
             expires=auth_settings.ACCESS_TOKEN_EXPIRE_SECONDS,
         )
         variable_service.initialize_user_variables(user.id, db)
+        # Create default folder for user if it doesn't exist
+        create_default_folder_if_it_doesnt_exist(db, user.id)
         return tokens
     else:
         raise HTTPException(
@@ -86,6 +86,7 @@ async def auto_login(
             expires=None,  # Set to None to make it a session cookie
         )
         variable_service.initialize_user_variables(user_id, db)
+        create_default_folder_if_it_doesnt_exist(db, user_id)
         return tokens
 
     raise HTTPException(
@@ -139,4 +140,3 @@ async def logout(response: Response):
     response.delete_cookie("refresh_token_lf")
     response.delete_cookie("access_token_lf")
     return {"message": "Logout successful"}
-    return {"message": "Logout successful"}

src/backend/base/langflow/api/v1/monitor.py

@@ -1,10 +1,13 @@
-from typing import Optional
+from typing import List, Optional
 
 from fastapi import APIRouter, Depends, HTTPException, Query
 
-
 from langflow.services.deps import get_monitor_service
-from langflow.services.monitor.schema import VertexBuildMapModel
+from langflow.services.monitor.schema import (
+    MessageModelResponse,
+    TransactionModelResponse,
+    VertexBuildMapModel,
+)
 from langflow.services.monitor.service import MonitorService
 
 router = APIRouter(prefix="/monitor", tags=["Monitor"])
@@ -40,8 +43,9 @@ async def delete_vertex_builds(
         raise HTTPException(status_code=500, detail=str(e))
 
 
-@router.get("/messages")
+@router.get("/messages", response_model=List[MessageModelResponse])
 async def get_messages(
+    flow_id: Optional[str] = Query(None),
     session_id: Optional[str] = Query(None),
     sender: Optional[str] = Query(None),
     sender_name: Optional[str] = Query(None),
@@ -49,25 +53,32 @@ async def get_messages(
     monitor_service: MonitorService = Depends(get_monitor_service),
 ):
     try:
-        return monitor_service.get_messages(
+        df = monitor_service.get_messages(
+            flow_id=flow_id,
             sender=sender,
             sender_name=sender_name,
             session_id=session_id,
             order_by=order_by,
         )
+        dicts = df.to_dict(orient="records")
+        return [MessageModelResponse(**d) for d in dicts]
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
 
 
-@router.get("/transactions")
+@router.get("/transactions", response_model=List[TransactionModelResponse])
 async def get_transactions(
     source: Optional[str] = Query(None),
     target: Optional[str] = Query(None),
     status: Optional[str] = Query(None),
     order_by: Optional[str] = Query("timestamp"),
+    flow_id: Optional[str] = Query(None),
     monitor_service: MonitorService = Depends(get_monitor_service),
 ):
     try:
-        return monitor_service.get_transactions(source=source, target=target, status=status, order_by=order_by)
+        dicts = monitor_service.get_transactions(
+            source=source, target=target, status=status, order_by=order_by, flow_id=flow_id
+        )
+        return [TransactionModelResponse(**d) for d in dicts]
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))

src/backend/base/langflow/api/v1/schemas.py

@@ -139,10 +139,20 @@ class FlowListCreate(BaseModel):
     flows: List[FlowCreate]
 
 
+class FlowListIds(BaseModel):
+    flow_ids: List[str]
+
+
 class FlowListRead(BaseModel):
     flows: List[FlowRead]
 
 
+class FlowListReadWithFolderName(BaseModel):
+    flows: List[FlowRead]
+    folder_name: str
+    folder_description: str
+
+
 class InitResponse(BaseModel):
     flowId: str
 

src/backend/base/langflow/api/v1/users.py

@@ -13,6 +13,7 @@ from langflow.services.auth.utils import (
     get_password_hash,
     verify_password,
 )
+from langflow.services.database.models.folder.utils import create_default_folder_if_it_doesnt_exist
 from langflow.services.database.models.user import User, UserCreate, UserRead, UserUpdate
 from langflow.services.database.models.user.crud import get_user_by_id, update_user
 from langflow.services.deps import get_session, get_settings_service
@@ -36,6 +37,9 @@ def add_user(
         session.add(new_user)
         session.commit()
         session.refresh(new_user)
+        folder = create_default_folder_if_it_doesnt_exist(session, new_user.id)
+        if not folder:
+            raise HTTPException(status_code=500, detail="Error creating default folder")
     except IntegrityError as e:
         session.rollback()
         raise HTTPException(status_code=400, detail="This username is unavailable.") from e

src/backend/base/langflow/base/io/chat.py

@@ -54,6 +54,7 @@ class ChatComponent(CustomComponent):
             session_id=session_id,
             sender=sender,
             sender_name=sender_name,
+            flow_id=self.graph.flow_id,
         )
 
         self.status = records

src/backend/base/langflow/base/prompts/utils.py

@@ -1,3 +1,6 @@
+from copy import deepcopy
+
+
 from langchain_core.documents import Document
 
 from langflow.schema import Record
@@ -27,19 +30,20 @@ def dict_values_to_string(d: dict) -> dict:
         dict: The dictionary with values converted to strings.
     """
     # Do something similar to the above
-    for key, value in d.items():
+    d_copy = deepcopy(d)
+    for key, value in d_copy.items():
         # it could be a list of records or documents or strings
         if isinstance(value, list):
             for i, item in enumerate(value):
                 if isinstance(item, Record):
-                    d[key][i] = record_to_string(item)
+                    d_copy[key][i] = record_to_string(item)
                 elif isinstance(item, Document):
-                    d[key][i] = document_to_string(item)
+                    d_copy[key][i] = document_to_string(item)
         elif isinstance(value, Record):
-            d[key] = record_to_string(value)
+            d_copy[key] = record_to_string(value)
         elif isinstance(value, Document):
-            d[key] = document_to_string(value)
-    return d
+            d_copy[key] = document_to_string(value)
+    return d_copy
 
 
 def document_to_string(document: Document) -> str:

src/backend/base/langflow/components/outputs/RecordsOutput.py

@@ -0,0 +1,10 @@
+from langflow.base.io.text import TextComponent
+from langflow.schema import Record
+
+
+class RecordsOutput(TextComponent):
+    display_name = "Records Output"
+    description = "Display Records as a Table"
+
+    def build(self, input_value: Record) -> Record:
+        return input_value

src/backend/base/langflow/graph/edge/base.py

@@ -3,9 +3,8 @@ from typing import TYPE_CHECKING, Any, List, Optional
 from loguru import logger
 from pydantic import BaseModel, Field
 
-from langflow.graph.edge.utils import build_clean_params
+from langflow.graph.vertex.utils import log_transaction
 from langflow.schema.schema import INPUT_FIELD_NAME
-from langflow.services.deps import get_monitor_service
 from langflow.services.monitor.utils import log_message
 
 if TYPE_CHECKING:
@@ -157,26 +156,9 @@ class ContractEdge(Edge):
                 message=target.params.get(INPUT_FIELD_NAME, {}),
                 session_id=target.params.get("session_id", ""),
                 artifacts=target.artifacts,
+                flow_id=target.graph.flow_id,
             )
         return self.result
 
     def __repr__(self) -> str:
         return f"{self.source_id} -[{self.target_param}]-> {self.target_id}"
-
-
-def log_transaction(edge: ContractEdge, source: "Vertex", target: "Vertex", status, error=None):
-    try:
-        monitor_service = get_monitor_service()
-        clean_params = build_clean_params(target)
-        data = {
-            "source": source.vertex_type,
-            "target": target.vertex_type,
-            "target_args": clean_params,
-            "timestamp": monitor_service.get_timestamp(),
-            "status": status,
-            "error": error,
-        }
-        monitor_service.add_row(table_name="transactions", data=data)
-    except Exception as e:
-        logger.error(f"Error logging transaction: {e}")
-        logger.error(f"Error logging transaction: {e}")

src/backend/base/langflow/graph/edge/utils.py

@@ -1,19 +0,0 @@
-from typing import TYPE_CHECKING
-
-if TYPE_CHECKING:
-    from langflow.graph.vertex.base import Vertex
-
-
-def build_clean_params(target: "Vertex") -> dict:
-    """
-    Cleans the parameters of the target vertex.
-    """
-    # Removes all keys that the values aren't python types like str, int, bool, etc.
-    params = {
-        key: value for key, value in target.params.items() if isinstance(value, (str, int, bool, float, list, dict))
-    }
-    # if it is a list we need to check if the contents are python types
-    for key, value in params.items():
-        if isinstance(value, list):
-            params[key] = [item for item in value if isinstance(item, (str, int, bool, float, list, dict))]
-    return params

src/backend/base/langflow/graph/graph/base.py

@@ -14,7 +14,7 @@ from langflow.graph.graph.state_manager import GraphStateManager
 from langflow.graph.graph.utils import process_flow
 from langflow.graph.schema import InterfaceComponentTypes, RunOutputs
 from langflow.graph.vertex.base import Vertex
-from langflow.graph.vertex.types import ChatVertex, FileToolVertex, LLMVertex, StateVertex, ToolkitVertex
+from langflow.graph.vertex.types import FileToolVertex, InterfaceVertex, LLMVertex, StateVertex, ToolkitVertex
 from langflow.interface.tools.constants import FILE_TOOLS
 from langflow.schema import Record
 from langflow.schema.schema import INPUT_FIELD_NAME, InputType
@@ -994,8 +994,8 @@ class Graph:
         """Returns the node class based on the node type."""
         # First we check for the node_base_type
         node_name = node_id.split("-")[0]
-        if node_name in ["ChatOutput", "ChatInput"]:
-            return ChatVertex
+        if node_name in InterfaceComponentTypes:
+            return InterfaceVertex
         elif node_name in ["SharedState", "Notify", "Listen"]:
             return StateVertex
         elif node_base_type in lazy_load_vertex_dict.VERTEX_TYPE_MAP:

src/backend/base/langflow/graph/graph/constants.py

@@ -1,3 +1,4 @@
+from langflow.graph.schema import CHAT_COMPONENTS
 from langflow.graph.vertex import types
 from langflow.interface.agents.base import agent_creator
 from langflow.interface.custom.base import custom_component_creator
@@ -13,8 +14,6 @@ from langflow.interface.tools.base import tool_creator
 from langflow.interface.wrappers.base import wrapper_creator
 from langflow.utils.lazy_load import LazyLoadDictBase
 
-CHAT_COMPONENTS = ["ChatInput", "ChatOutput", "TextInput", "SessionID"]
-
 
 class VertexTypesDict(LazyLoadDictBase):
     def __init__(self):
@@ -47,7 +46,7 @@ class VertexTypesDict(LazyLoadDictBase):
             **{t: types.TextSplitterVertex for t in textsplitter_creator.to_list()},
             **{t: types.CustomComponentVertex for t in custom_component_creator.to_list()},
             **{t: types.RetrieverVertex for t in retriever_creator.to_list()},
-            **{t: types.ChatVertex for t in CHAT_COMPONENTS},
+            **{t: types.InterfaceVertex for t in CHAT_COMPONENTS},
         }
 
     def get_custom_component_vertex_type(self):

src/backend/base/langflow/graph/schema.py

@@ -30,6 +30,7 @@ class InterfaceComponentTypes(str, Enum, metaclass=ContainsEnumMeta):
     ChatOutput = "ChatOutput"
     TextInput = "TextInput"
     TextOutput = "TextOutput"
+    RecordsOutput = "RecordsOutput"
 
     def __contains__(cls, item):
         try:
@@ -40,6 +41,8 @@ class InterfaceComponentTypes(str, Enum, metaclass=ContainsEnumMeta):
             return True
 
 
+CHAT_COMPONENTS = [InterfaceComponentTypes.ChatInput, InterfaceComponentTypes.ChatOutput]
+RECORDS_COMPONENTS = [InterfaceComponentTypes.RecordsOutput]
 INPUT_COMPONENTS = [
     InterfaceComponentTypes.ChatInput,
     InterfaceComponentTypes.TextInput,

src/backend/base/langflow/graph/vertex/base.py

@@ -10,7 +10,7 @@ from loguru import logger
 
 from langflow.graph.schema import INPUT_COMPONENTS, OUTPUT_COMPONENTS, InterfaceComponentTypes, ResultData
 from langflow.graph.utils import UnbuiltObject, UnbuiltResult
-from langflow.graph.vertex.utils import generate_result
+from langflow.graph.vertex.utils import generate_result, log_transaction
 from langflow.interface.initialize import loading
 from langflow.interface.listing import lazy_load_dict
 from langflow.schema.schema import INPUT_FIELD_NAME
@@ -440,7 +440,11 @@ class Vertex:
         # to the frontend
         self.set_artifacts()
         artifacts = self.artifacts
-        messages = self.extract_messages_from_artifacts(artifacts)
+        if isinstance(artifacts, dict):
+            messages = self.extract_messages_from_artifacts(artifacts)
+        else:
+            messages = []
+
         result_dict = ResultData(
             results=result_dict,
             artifacts=artifacts,
@@ -508,7 +512,7 @@ class Vertex:
             if not self._is_vertex(value):
                 self.params[key][sub_key] = value
             else:
-                result = await value.get_result()
+                result = await value.get_result(self)
                 self.params[key][sub_key] = result
 
     def _is_vertex(self, value):
@@ -523,9 +527,7 @@ class Vertex:
         """
         return all(self._is_vertex(vertex) for vertex in value)
 
-    async def get_result(
-        self,
-    ) -> Any:
+    async def get_result(self, requester: "Vertex") -> Any:
         """
         Retrieves the result of the vertex.
 
@@ -535,9 +537,9 @@ class Vertex:
             The result of the vertex.
         """
         async with self._lock:
-            return await self._get_result()
+            return await self._get_result(requester)
 
-    async def _get_result(self) -> Any:
+    async def _get_result(self, requester: "Vertex") -> Any:
         """
         Retrieves the result of the built component.
 
@@ -547,15 +549,19 @@ class Vertex:
             The built result if use_result is True, else the built object.
         """
         if not self._built:
+            log_transaction(source=self, target=requester, flow_id=self.graph.flow_id, status="error")
             raise ValueError(f"Component {self.display_name} has not been built yet")
-        return self._built_result if self.use_result else self._built_object
+
+        result = self._built_result if self.use_result else self._built_object
+        log_transaction(source=self, target=requester, flow_id=self.graph.flow_id, status="success")
+        return result
 
     async def _build_vertex_and_update_params(self, key, vertex: "Vertex"):
         """
         Builds a given vertex and updates the params dictionary accordingly.
         """
 
-        result = await vertex.get_result()
+        result = await vertex.get_result(self)
         self._handle_func(key, result)
         if isinstance(result, list):
             self._extend_params_list_with_result(key, result)
@@ -571,7 +577,7 @@ class Vertex:
         """
         self.params[key] = []
         for vertex in vertices:
-            result = await vertex.get_result()
+            result = await vertex.get_result(self)
             # Weird check to see if the params[key] is a list
             # because sometimes it is a Record and breaks the code
             if not isinstance(self.params[key], list):

src/backend/base/langflow/graph/vertex/types.py

@@ -6,14 +6,14 @@ import yaml
 from langchain_core.messages import AIMessage
 from loguru import logger
 
-from langflow.graph.schema import InterfaceComponentTypes
+from langflow.graph.schema import CHAT_COMPONENTS, RECORDS_COMPONENTS, InterfaceComponentTypes
 from langflow.graph.utils import UnbuiltObject, flatten_list, serialize_field
 from langflow.graph.vertex.base import Vertex
 from langflow.interface.utils import extract_input_variables_from_prompt
 from langflow.schema import Record
 from langflow.schema.schema import INPUT_FIELD_NAME
 from langflow.services.monitor.utils import log_vertex_build
-from langflow.utils.schemas import ChatOutputResponse
+from langflow.utils.schemas import ChatOutputResponse, RecordOutputResponse
 from langflow.utils.util import unescape_string
 
 
@@ -309,7 +309,7 @@ class CustomComponentVertex(Vertex):
             return self.artifacts["repr"] or super()._built_object_repr()
 
 
-class ChatVertex(Vertex):
+class InterfaceVertex(Vertex):
     def __init__(self, data: Dict, graph):
         super().__init__(data, graph=graph, base_type="custom_components", is_task=True)
         self.steps = [self._build, self._run]
@@ -325,56 +325,131 @@ class ChatVertex(Vertex):
                 return f"Task {self.task_id} is not running"
         if self.artifacts:
             # dump as a yaml string
-            artifacts = {k.title().replace("_", " "): v for k, v in self.artifacts.items() if v is not None}
+            if isinstance(self.artifacts, dict):
+                _artifacts = [self.artifacts]
+            elif hasattr(self.artifacts, "records"):
+                _artifacts = self.artifacts.records
+            else:
+                _artifacts = self.artifacts
+            artifacts = []
+            for artifact in _artifacts:
+                # artifacts = {k.title().replace("_", " "): v for k, v in self.artifacts.items() if v is not None}
+                artifact = {k.title().replace("_", " "): v for k, v in artifact.items() if v is not None}
+                artifacts.append(artifact)
             yaml_str = yaml.dump(artifacts, default_flow_style=False, allow_unicode=True)
             return yaml_str
         return super()._built_object_repr()
 
+    def _process_chat_component(self):
+        """
+        Process the chat component and return the message.
+
+        This method processes the chat component by extracting the necessary parameters
+        such as sender, sender_name, and message from the `params` dictionary. It then
+        performs additional operations based on the type of the `_built_object` attribute.
+        If `_built_object` is an instance of `AIMessage`, it creates a `ChatOutputResponse`
+        object using the `from_message` method. If `_built_object` is not an instance of
+        `UnbuiltObject`, it checks the type of `_built_object` and performs specific
+        operations accordingly. If `_built_object` is a dictionary, it converts it into a
+        code block. If `_built_object` is an instance of `Record`, it assigns the `text`
+        attribute to the `message` variable. If `message` is an instance of `AsyncIterator`
+        or `Iterator`, it builds a stream URL and sets `message` to an empty string. If
+        `_built_object` is not a string, it converts it to a string. If `message` is a
+        generator or iterator, it assigns it to the `message` variable. Finally, it creates
+        a `ChatOutputResponse` object using the extracted parameters and assigns it to the
+        `artifacts` attribute. If `artifacts` is not None, it calls the `model_dump` method
+        on it and assigns the result to the `artifacts` attribute. It then returns the
+        `message` variable.
+
+        Returns:
+            str: The processed message.
+        """
+        artifacts = None
+        sender = self.params.get("sender", None)
+        sender_name = self.params.get("sender_name", None)
+        message = self.params.get(INPUT_FIELD_NAME, None)
+        if isinstance(message, str):
+            message = unescape_string(message)
+        stream_url = None
+        if isinstance(self._built_object, AIMessage):
+            artifacts = ChatOutputResponse.from_message(
+                self._built_object,
+                sender=sender,
+                sender_name=sender_name,
+            )
+        elif not isinstance(self._built_object, UnbuiltObject):
+            if isinstance(self._built_object, dict):
+                # Turn the dict into a pleasing to
+                # read JSON inside a code block
+                message = dict_to_codeblock(self._built_object)
+            elif isinstance(self._built_object, Record):
+                message = self._built_object.text
+            elif isinstance(message, (AsyncIterator, Iterator)):
+                stream_url = self.build_stream_url()
+                message = ""
+            elif not isinstance(self._built_object, str):
+                message = str(self._built_object)
+            # if the message is a generator or iterator
+            # it means that it is a stream of messages
+            else:
+                message = self._built_object
+
+            artifacts = ChatOutputResponse(
+                message=message,
+                sender=sender,
+                sender_name=sender_name,
+                stream_url=stream_url,
+            )
+
+            self.will_stream = stream_url is not None
+        if artifacts:
+            self.artifacts = artifacts.model_dump(exclude_none=True)
+
+        return message
+
+    def _process_record_component(self):
+        """
+        Process the record component of the vertex.
+
+        If the built object is an instance of `Record`, it calls the `model_dump` method
+        and assigns the result to the `artifacts` attribute.
+
+        If the built object is a list, it iterates over each element and checks if it is
+        an instance of `Record`. If it is, it calls the `model_dump` method and appends
+        the result to the `artifacts` list. If it is not, it raises a `ValueError` if the
+        `ignore_errors` parameter is set to `False`, or logs an error message if it is set
+        to `True`.
+
+        Returns:
+            The built object.
+
+        Raises:
+            ValueError: If an element in the list is not an instance of `Record` and
+                `ignore_errors` is set to `False`.
+        """
+        if isinstance(self._built_object, Record):
+            artifacts = [self._built_object.data]
+        elif isinstance(self._built_object, list):
+            artifacts = []
+            ignore_errors = self.params.get("ignore_errors", False)
+            for record in self._built_object:
+                if isinstance(record, Record):
+                    artifacts.append(record.data)
+                elif ignore_errors:
+                    logger.error(f"Record expected, but got {record} of type {type(record)}")
+                else:
+                    raise ValueError(f"Record expected, but got {record} of type {type(record)}")
+        self.artifacts = RecordOutputResponse(records=artifacts)
+        return self._built_object
+
     async def _run(self, *args, **kwargs):
         if self.is_interface_component:
-            if self.vertex_type in ["ChatOutput", "ChatInput"]:
-                artifacts = None
-                sender = self.params.get("sender", None)
-                sender_name = self.params.get("sender_name", None)
-                message = self.params.get(INPUT_FIELD_NAME, None)
-                if isinstance(message, str):
-                    message = unescape_string(message)
-                stream_url = None
-                if isinstance(self._built_object, AIMessage):
-                    artifacts = ChatOutputResponse.from_message(
-                        self._built_object,
-                        sender=sender,
-                        sender_name=sender_name,
-                    )
-                elif not isinstance(self._built_object, UnbuiltObject):
-                    if isinstance(self._built_object, dict):
-                        # Turn the dict into a pleasing to
-                        # read JSON inside a code block
-                        message = dict_to_codeblock(self._built_object)
-                    elif isinstance(self._built_object, Record):
-                        message = self._built_object.text
-                    elif isinstance(message, (AsyncIterator, Iterator)):
-                        stream_url = self.build_stream_url()
-                        message = ""
-                    elif not isinstance(self._built_object, str):
-                        message = str(self._built_object)
-                    # if the message is a generator or iterator
-                    # it means that it is a stream of messages
-                    else:
-                        message = self._built_object
-
-                    artifacts = ChatOutputResponse(
-                        message=message,
-                        sender=sender,
-                        sender_name=sender_name,
-                        stream_url=stream_url,
-                    )
-
-                    self.will_stream = stream_url is not None
-                if artifacts:
-                    self.artifacts = artifacts.model_dump(exclude_none=True)
+            if self.vertex_type in CHAT_COMPONENTS:
+                message = self._process_chat_component()
+            elif self.vertex_type in RECORDS_COMPONENTS:
+                message = self._process_record_component()
             if isinstance(self._built_object, (AsyncIterator, Iterator)):
-                if self.params["return_record"]:
+                if self.params.get("return_record", False):
                     self._built_object = Record(text=message, data=self.artifacts)
                 else:
                     self._built_object = message

src/backend/base/langflow/graph/vertex/utils.py

@@ -1,11 +1,15 @@
-from typing import Any, Optional, Union
+from typing import Any, Optional, Union, TYPE_CHECKING
 
 from langchain_core.messages import BaseMessage
 from langchain_core.runnables import Runnable
 from loguru import logger
 
+from langflow.services.deps import get_monitor_service
 from langflow.utils.constants import PYTHON_BASIC_TYPES
 
+if TYPE_CHECKING:
+    from langflow.graph.vertex.base import Vertex
+
 
 def is_basic_type(obj):
     return type(obj) in PYTHON_BASIC_TYPES
@@ -63,3 +67,49 @@ async def generate_result(built_object: Any, inputs: dict, has_external_output:
     else:
         result = built_object
     return result
+
+
+def build_clean_params(target: "Vertex") -> dict:
+    """
+    Cleans the parameters of the target vertex.
+    """
+    # Removes all keys that the values aren't python types like str, int, bool, etc.
+    params = {
+        key: value for key, value in target.params.items() if isinstance(value, (str, int, bool, float, list, dict))
+    }
+    # if it is a list we need to check if the contents are python types
+    for key, value in params.items():
+        if isinstance(value, list):
+            params[key] = [item for item in value if isinstance(item, (str, int, bool, float, list, dict))]
+    return params
+
+
+def log_transaction(source: "Vertex", target: "Vertex", flow_id, status, error=None):
+    """
+    Logs a transaction between two vertices.
+
+    Args:
+        source (Vertex): The source vertex of the transaction.
+        target (Vertex): The target vertex of the transaction.
+        status: The status of the transaction.
+        error (Optional): Any error associated with the transaction.
+
+    Raises:
+        Exception: If there is an error while logging the transaction.
+
+    """
+    try:
+        monitor_service = get_monitor_service()
+        clean_params = build_clean_params(target)
+        data = {
+            "source": source.vertex_type,
+            "target": target.vertex_type,
+            "target_args": clean_params,
+            "timestamp": monitor_service.get_timestamp(),
+            "status": status,
+            "error": error,
+            "flow_id": flow_id,
+        }
+        monitor_service.add_row(table_name="transactions", data=data)
+    except Exception as e:
+        logger.error(f"Error logging transaction: {e}")

src/backend/base/langflow/initial_setup/setup.py

@@ -11,10 +11,11 @@ from sqlmodel import select
 from langflow.base.constants import FIELD_FORMAT_ATTRIBUTES, NODE_FORMAT_ATTRIBUTES
 from langflow.interface.types import get_all_components
 from langflow.services.database.models.flow.model import Flow, FlowCreate
+from langflow.services.database.models.folder.model import Folder, FolderCreate
 from langflow.services.deps import get_settings_service, session_scope
 
 STARTER_FOLDER_NAME = "Starter Projects"
-
+STARTER_FOLDER_DESCRIPTION = "Starter projects to help you get started in Langflow."
 
 # In the folder ./starter_projects we have a few JSON files that represent
 # starter projects. We want to load these into the database so that users
@@ -158,6 +159,7 @@ def create_new_project(
     project_data,
     project_icon,
     project_icon_bg_color,
+    new_folder_id
 ):
     logger.debug(f"Creating starter project {project_name}")
     new_project = FlowCreate(
@@ -168,33 +170,41 @@ def create_new_project(
         data=project_data,
         is_component=project_is_component,
         updated_at=updated_at_datetime,
-        folder=STARTER_FOLDER_NAME,
+        folder_id=new_folder_id,
     )
     db_flow = Flow.model_validate(new_project, from_attributes=True)
     session.add(db_flow)
 
 
-def get_all_flows_similar_to_project(session, project_name):
-    flows = session.exec(
-        select(Flow).where(
-            Flow.name == project_name,
-            Flow.folder == STARTER_FOLDER_NAME,
-        )
-    ).all()
+def get_all_flows_similar_to_project(session, folder_id):
+    flows = session.exec(select(Folder).where(Folder.id == folder_id)).first().flows
     return flows
 
 
-def delete_start_projects(session):
-    flows = session.exec(
-        select(Flow).where(
-            Flow.folder == STARTER_FOLDER_NAME,
-        )
-    ).all()
+def delete_start_projects(session, folder_id):
+    flows = session.exec(select(Folder).where(Folder.id == folder_id)).first().flows
     for flow in flows:
         session.delete(flow)
     session.commit()
 
 
+def folder_exists(session, folder_name):
+    folder = session.exec(select(Folder).where(Folder.name == folder_name)).first()
+    return folder is not None
+
+
+def create_starter_folder(session):
+    if not folder_exists(session, STARTER_FOLDER_NAME):
+        new_folder = FolderCreate(name=STARTER_FOLDER_NAME, description=STARTER_FOLDER_DESCRIPTION)
+        db_folder = Folder.model_validate(new_folder, from_attributes=True)
+        session.add(db_folder)
+        session.commit()
+        session.refresh(db_folder)
+        return db_folder
+    else:
+        return session.exec(select(Folder).where(Folder.name == STARTER_FOLDER_NAME)).first()
+
+
 def create_or_update_starter_projects():
     components_paths = get_settings_service().settings.COMPONENTS_PATH
     try:
@@ -203,8 +213,9 @@ def create_or_update_starter_projects():
         logger.exception(f"Error loading components: {e}")
         raise e
     with session_scope() as session:
+        new_folder = create_starter_folder(session)
         starter_projects = load_starter_projects()
-        delete_start_projects(session)
+        delete_start_projects(session, new_folder.id)
         for project_path, project in starter_projects:
             (
                 project_name,
@@ -224,7 +235,7 @@ def create_or_update_starter_projects():
 
                 update_project_file(project_path, project, updated_project_data)
             if project_name and project_data:
-                for existing_project in get_all_flows_similar_to_project(session, project_name):
+                for existing_project in get_all_flows_similar_to_project(session, new_folder.id):
                     session.delete(existing_project)
 
                 create_new_project(
@@ -236,4 +247,5 @@ def create_or_update_starter_projects():
                     project_data,
                     project_icon,
                     project_icon_bg_color,
+                    new_folder.id
                 )

src/backend/base/langflow/memory.py

@@ -1,5 +1,5 @@
 import warnings
-from typing import Optional, Union
+from typing import List, Optional, Union
 
 from loguru import logger
 
@@ -60,7 +60,7 @@ def get_messages(
     return records
 
 
-def add_messages(records: Union[list[Record], Record]):
+def add_messages(records: Union[list[Record], Record], flow_id: Optional[str] = None):
     """
     Add a message to the monitor service.
     """
@@ -76,7 +76,8 @@ def add_messages(records: Union[list[Record], Record]):
 
         messages: list[MessageModel] = []
         for record in records:
-            messages.append(MessageModel.from_record(record))
+            record.timestamp = monitor_service.get_timestamp()
+            messages.append(MessageModel.from_record(record, flow_id=flow_id))
 
         for message in messages:
             try:
@@ -107,7 +108,24 @@ def store_message(
     session_id: Optional[str] = None,
     sender: Optional[str] = None,
     sender_name: Optional[str] = None,
-) -> list[Record]:
+    flow_id: Optional[str] = None,
+) -> List[Record]:
+    """
+    Stores a message in the memory.
+
+    Args:
+        message (Union[str, Record]): The message to be stored. It can be either a string or a Record object.
+        session_id (Optional[str]): The session ID associated with the message.
+        sender (Optional[str]): The sender ID associated with the message.
+        sender_name (Optional[str]): The name of the sender associated with the message.
+        flow_id (Optional[str]): The flow ID associated with the message. When running from the CustomComponent you can access this using `self.graph.flow_id`.
+
+    Returns:
+        List[Record]: A list of records containing the stored message.
+
+    Raises:
+        ValueError: If any of the required parameters (session_id, sender, sender_name) is not provided.
+    """
     if not message:
         warnings.warn("No message provided.")
         return []
@@ -134,4 +152,4 @@ def store_message(
             },
         )
 
-    return add_messages([record])
+    return add_messages([record], flow_id=flow_id)

src/backend/base/langflow/schema/schema.py

@@ -1,4 +1,5 @@
 import copy
+import json
 from typing import Literal, Optional, cast
 
 from langchain_core.documents import Document
@@ -162,23 +163,15 @@ class Record(BaseModel):
         # Create a new Record object with a deep copy of the data dictionary
         return Record(data=copy.deepcopy(self.data, memo), text_key=self.text_key, default_value=self.default_value)
 
-    def __str__(self) -> str:
-        """
-        Returns a string representation of the Record, including text and data.
-        """
-        # Assuming a method to dump model data as JSON string exists.
-        # If it doesn't, you might need to implement it or use json.dumps() directly.
-        # build the string considering all keys in the data dictionary
-        prefix = "Record("
-        suffix = ")"
-        text = f"text_key={self.text_key}, "
-        text += ", ".join([f"{k}={v}" for k, v in self.data.items()])
-        return prefix + text + suffix
-
     # check which attributes the Record has by checking the keys in the data dictionary
     def __dir__(self):
         return super().__dir__() + list(self.data.keys())
 
+    def __str__(self) -> str:
+        # return a JSON string representation of the Record atributes
+
+        return json.dumps(self.data)
+
 
 INPUT_FIELD_NAME = "input_value"
 

src/backend/base/langflow/services/database/models/__init__.py

@@ -1,6 +1,7 @@
 from .api_key import ApiKey
 from .flow import Flow
+from .folder import Folder
 from .user import User
 from .variable import Variable
 
-__all__ = ["Flow", "User", "ApiKey", "Variable"]
+__all__ = ["Flow", "User", "ApiKey", "Variable", "Folder"]

src/backend/base/langflow/services/database/models/flow/model.py

@@ -13,6 +13,7 @@ from sqlmodel import JSON, Column, Field, Relationship, SQLModel
 from langflow.schema.schema import Record
 
 if TYPE_CHECKING:
+    from langflow.services.database.models.folder import Folder
     from langflow.services.database.models.user import User
 
 
@@ -24,7 +25,7 @@ class FlowBase(SQLModel):
     data: Optional[Dict] = Field(default=None, nullable=True)
     is_component: Optional[bool] = Field(default=False, nullable=True)
     updated_at: Optional[datetime] = Field(default_factory=lambda: datetime.now(timezone.utc), nullable=True)
-    folder: Optional[str] = Field(default=None, nullable=True)
+    folder_id: Optional[UUID] = Field(default=None, nullable=True)
 
     @field_validator("icon_bg_color")
     def validate_icon_bg_color(cls, v):
@@ -112,6 +113,8 @@ class Flow(FlowBase, table=True):
     data: Optional[Dict] = Field(default=None, sa_column=Column(JSON))
     user_id: Optional[UUID] = Field(index=True, foreign_key="user.id", nullable=True)
     user: "User" = Relationship(back_populates="flows")
+    folder_id: Optional[UUID] = Field(default=None, foreign_key="folder.id", nullable=True, index=True)
+    folder: Optional["Folder"] = Relationship(back_populates="flows")
 
     def to_record(self):
         serialized = self.model_dump()
@@ -128,14 +131,17 @@ class Flow(FlowBase, table=True):
 
 class FlowCreate(FlowBase):
     user_id: Optional[UUID] = None
+    folder_id: Optional[UUID] = None
 
 
 class FlowRead(FlowBase):
     id: UUID
     user_id: Optional[UUID] = Field()
+    folder_id: Optional[UUID] = Field()
 
 
 class FlowUpdate(SQLModel):
     name: Optional[str] = None
     description: Optional[str] = None
     data: Optional[Dict] = None
+    folder_id: Optional[UUID] = None

src/backend/base/langflow/services/database/models/folder/__init__.py

@@ -0,0 +1,3 @@
+from .model import Folder, FolderCreate, FolderRead, FolderUpdate
+
+__all__ = ["Folder", "FolderCreate", "FolderRead", "FolderUpdate"]

src/backend/base/langflow/services/database/models/folder/constants.py

@@ -0,0 +1,2 @@
+DEFAULT_FOLDER_DESCRIPTION = "Manage your personal projects. Download and upload entire collections."
+DEFAULT_FOLDER_NAME = "My Projects"

src/backend/base/langflow/services/database/models/folder/model.py

@@ -0,0 +1,55 @@
+from typing import TYPE_CHECKING, List, Optional
+from uuid import UUID, uuid4
+
+from sqlmodel import Field, Relationship, SQLModel
+
+from langflow.services.database.models.flow.model import FlowRead
+
+if TYPE_CHECKING:
+    from langflow.services.database.models.flow.model import Flow
+    from langflow.services.database.models.user.model import User
+
+
+class FolderBase(SQLModel):
+    name: str = Field(index=True)
+    description: Optional[str] = Field(default=None)
+
+
+class Folder(FolderBase, table=True):
+    id: Optional[UUID] = Field(default_factory=uuid4, primary_key=True)
+    parent_id: Optional[UUID] = Field(default=None, foreign_key="folder.id")
+
+    parent: Optional["Folder"] = Relationship(
+        back_populates="children",
+        sa_relationship_kwargs=dict(remote_side="Folder.id"),
+    )
+    children: List["Folder"] = Relationship(back_populates="parent")
+    user_id: Optional[UUID] = Field(default=None, foreign_key="user.id")
+    user: "User" = Relationship(back_populates="folders")
+    flows: List["Flow"] = Relationship(
+        back_populates="folder", sa_relationship_kwargs={"cascade": "all, delete, delete-orphan"}
+    )
+
+
+class FolderCreate(FolderBase):
+    components_list: Optional[List[UUID]] = None
+    flows_list: Optional[List[UUID]] = None
+
+
+class FolderRead(FolderBase):
+    id: UUID
+    parent_id: Optional[UUID] = Field()
+
+
+class FolderReadWithFlows(FolderBase):
+    id: UUID
+    parent_id: Optional[UUID] = Field()
+    flows: List["FlowRead"] = Field(default=[])
+
+
+class FolderUpdate(SQLModel):
+    name: Optional[str] = None
+    description: Optional[str] = None
+    parent_id: Optional[UUID] = None
+    components: Optional[List[UUID]] = None
+    flows: Optional[List[UUID]] = None

src/backend/base/langflow/services/database/models/folder/utils.py

@@ -0,0 +1,26 @@
+from typing import TYPE_CHECKING
+from uuid import UUID
+
+from langflow.services.database.models.flow.model import Flow
+from sqlmodel import Session, select, update
+
+from .constants import DEFAULT_FOLDER_DESCRIPTION, DEFAULT_FOLDER_NAME
+from .model import Folder
+
+if TYPE_CHECKING:
+    from langflow.services.database.models.user.model import User
+
+
+def create_default_folder_if_it_doesnt_exist(session: Session, user_id: UUID):
+    if not session.exec(select(Folder).where(Folder.user_id == user_id)).first():
+        folder = Folder(name=DEFAULT_FOLDER_NAME, user_id=user_id, description=DEFAULT_FOLDER_DESCRIPTION)
+        session.add(folder)
+        session.commit()
+        session.refresh(folder)
+        session.exec(
+            update(Flow)
+            .where((Flow.folder_id == None) & (Flow.user_id == user_id))
+            .values(folder_id=folder.id)
+        )
+        session.commit()
+    return None

src/backend/base/langflow/services/database/models/user/model.py

@@ -8,6 +8,7 @@ if TYPE_CHECKING:
     from langflow.services.database.models.api_key import ApiKey
     from langflow.services.database.models.variable import Variable
     from langflow.services.database.models.flow import Flow
+    from langflow.services.database.models.folder import Folder
 
 
 class User(SQLModel, table=True):
@@ -30,6 +31,10 @@ class User(SQLModel, table=True):
         back_populates="user",
         sa_relationship_kwargs={"cascade": "delete"},
     )
+    folders: list["Folder"] = Relationship(
+        back_populates="user",
+        sa_relationship_kwargs={"cascade": "delete"},
+    )
 
 
 class UserCreate(SQLModel):

src/backend/base/langflow/services/monitor/schema.py

@@ -2,15 +2,16 @@ import json
 from datetime import datetime
 from typing import TYPE_CHECKING, Any, Optional
 
-from pydantic import BaseModel, Field, field_serializer, validator
+from pydantic import BaseModel, Field, field_serializer, field_validator
 
 if TYPE_CHECKING:
     from langflow.schema import Record
 
 
 class TransactionModel(BaseModel):
-    id: Optional[int] = Field(default=None, alias="id")
+    index: Optional[int] = Field(default=None)
     timestamp: Optional[datetime] = Field(default_factory=datetime.now, alias="timestamp")
+    flow_id: str
     source: str
     target: str
     target_args: dict
@@ -22,15 +23,53 @@ class TransactionModel(BaseModel):
         populate_by_name = True
 
     # validate target_args in case it is a JSON
-    @validator("target_args", pre=True)
+    @field_validator("target_args", mode="before")
     def validate_target_args(cls, v):
         if isinstance(v, str):
             return json.loads(v)
         return v
 
+    @field_serializer("target_args")
+    def serialize_target_args(v):
+        if isinstance(v, dict):
+            return json.dumps(v)
+        return v
+
+
+class TransactionModelResponse(BaseModel):
+    index: Optional[int] = Field(default=None)
+    timestamp: Optional[datetime] = Field(default_factory=datetime.now, alias="timestamp")
+    flow_id: str
+    source: str
+    target: str
+    target_args: dict
+    status: str
+    error: Optional[str] = None
+
+    class Config:
+        from_attributes = True
+        populate_by_name = True
+
+    # validate target_args in case it is a JSON
+    @field_validator("target_args", mode="before")
+    def validate_target_args(cls, v):
+        if isinstance(v, str):
+            return json.loads(v)
+        return v
+
+    @field_validator("index", mode="before")
+    def validate_id(cls, v):
+        if isinstance(v, float):
+            try:
+                return int(v)
+            except ValueError:
+                return None
+        return v
+
 
 class MessageModel(BaseModel):
-    id: Optional[int] = Field(default=None, alias="id")
+    index: Optional[int] = Field(default=None)
+    flow_id: Optional[str] = Field(default=None, alias="flow_id")
     timestamp: datetime = Field(default_factory=datetime.now)
     sender: str
     sender_name: str
@@ -42,14 +81,14 @@ class MessageModel(BaseModel):
         from_attributes = True
         populate_by_name = True
 
-    @validator("artifacts", pre=True)
+    @field_validator("artifacts", mode="before")
     def validate_target_args(cls, v):
         if isinstance(v, str):
             return json.loads(v)
         return v
 
     @classmethod
-    def from_record(cls, record: "Record"):
+    def from_record(cls, record: "Record", flow_id: Optional[str] = None):
         # first check if the record has all the required fields
         if not record.data or ("sender" not in record.data and "sender_name" not in record.data):
             raise ValueError("The record does not have the required fields 'sender' and 'sender_name' in the data.")
@@ -59,9 +98,30 @@ class MessageModel(BaseModel):
             message=record.text,
             session_id=record.session_id,
             artifacts=record.artifacts or {},
+            timestamp=record.timestamp,
+            flow_id=flow_id,
         )
 
 
+class MessageModelResponse(MessageModel):
+    index: Optional[int] = Field(default=None)
+
+    @field_validator("artifacts", mode="before")
+    def serialize_artifacts(v):
+        if isinstance(v, str):
+            return json.loads(v)
+        return v
+
+    @field_validator("index", mode="before")
+    def validate_id(cls, v):
+        if isinstance(v, float):
+            try:
+                return int(v)
+            except ValueError:
+                return None
+        return v
+
+
 class VertexBuildModel(BaseModel):
     index: Optional[int] = Field(default=None, alias="index", exclude=True)
     id: Optional[str] = Field(default=None, alias="id")
@@ -86,9 +146,11 @@ class VertexBuildModel(BaseModel):
                 elif isinstance(value, list) and all(isinstance(i, BaseModel) for i in value):
                     v[key] = [i.model_dump() for i in value]
             return json.dumps(v)
+        elif isinstance(v, BaseModel):
+            return v.model_dump_json()
         return v
 
-    @validator("params", pre=True)
+    @field_validator("params", mode="before")
     def validate_params(cls, v):
         if isinstance(v, str):
             try:
@@ -103,16 +165,18 @@ class VertexBuildModel(BaseModel):
             return json.dumps([i.model_dump() for i in v])
         return v
 
-    @validator("data", pre=True)
+    @field_validator("data", mode="before")
     def validate_data(cls, v):
         if isinstance(v, str):
             return json.loads(v)
         return v
 
-    @validator("artifacts", pre=True)
+    @field_validator("artifacts", mode="before")
     def validate_artifacts(cls, v):
         if isinstance(v, str):
             return json.loads(v)
+        elif isinstance(v, BaseModel):
+            return v.model_dump()
         return v
 
 

src/backend/base/langflow/services/monitor/service.py

@@ -69,7 +69,7 @@ class MonitorService(Service):
         valid: Optional[bool] = None,
         order_by: Optional[str] = "timestamp",
     ):
-        query = "SELECT id, flow_id, valid, params, data, artifacts, timestamp FROM vertex_builds"
+        query = "SELECT index,flow_id, valid, params, data, artifacts, timestamp FROM vertex_builds"
         conditions = []
         if flow_id:
             conditions.append(f"flow_id = '{flow_id}'")
@@ -109,6 +109,7 @@ class MonitorService(Service):
 
     def get_messages(
         self,
+        flow_id: Optional[str] = None,
         sender: Optional[str] = None,
         sender_name: Optional[str] = None,
         session_id: Optional[str] = None,
@@ -116,7 +117,7 @@ class MonitorService(Service):
         order: Optional[str] = "DESC",
         limit: Optional[int] = None,
     ):
-        query = "SELECT sender_name, sender, session_id, message, artifacts, timestamp FROM messages"
+        query = "SELECT index, flow_id, sender_name, sender, session_id, message, artifacts, timestamp FROM messages"
         conditions = []
         if sender:
             conditions.append(f"sender = '{sender}'")
@@ -124,6 +125,8 @@ class MonitorService(Service):
             conditions.append(f"sender_name = '{sender_name}'")
         if session_id:
             conditions.append(f"session_id = '{session_id}'")
+        if flow_id:
+            conditions.append(f"flow_id = '{flow_id}'")
 
         if conditions:
             query += " WHERE " + " AND ".join(conditions)
@@ -146,8 +149,9 @@ class MonitorService(Service):
         target: Optional[str] = None,
         status: Optional[str] = None,
         order_by: Optional[str] = "timestamp",
+        flow_id: Optional[str] = None,
     ):
-        query = "SELECT source, target, target_args, status, error, timestamp FROM transactions"
+        query = "SELECT index,flow_id, source, target, target_args, status, error, timestamp FROM transactions"
         conditions = []
         if source:
             conditions.append(f"source = '{source}'")
@@ -155,6 +159,8 @@ class MonitorService(Service):
             conditions.append(f"target = '{target}'")
         if status:
             conditions.append(f"status = '{status}'")
+        if flow_id:
+            conditions.append(f"flow_id = '{flow_id}'")
 
         if conditions:
             query += " WHERE " + " AND ".join(conditions)

src/backend/base/langflow/services/monitor/utils.py

@@ -61,7 +61,7 @@ def drop_and_create_table_if_schema_mismatch(db_path: str, table_name: str, mode
         if current_schema != desired_schema:
             # If they don't match, drop the existing table and create a new one
             conn.execute(f"DROP TABLE IF EXISTS {table_name}")
-            if "id" in desired_schema.keys():
+            if INDEX_KEY in desired_schema.keys():
                 # Create a sequence for the id column
                 try:
                     conn.execute(f"CREATE SEQUENCE seq_{table_name} START 1;")
@@ -91,7 +91,7 @@ def add_row_to_table(
     columns = ", ".join(keys)
 
     values_placeholders = ", ".join(["?" for _ in keys])
-    values = list(validated_dict.values())
+    values = [validated_dict[key] for key in keys]
 
     # Create the insert statement
     insert_sql = f"INSERT INTO {table_name} ({columns}) VALUES ({values_placeholders})"
@@ -104,7 +104,7 @@ def add_row_to_table(
         column_error_message = ""
         for key, value in validated_dict.items():
             logger.error(f"{key}: {type(value)}")
-            if value in str(e):
+            if str(value) in str(e):
                 column_error_message = f"Column: {key} Value: {value} Error: {e}"
 
         if column_error_message:
@@ -119,6 +119,7 @@ async def log_message(
     message: str,
     session_id: str,
     artifacts: Optional[dict] = None,
+    flow_id: Optional[str] = None,
 ):
     try:
         from langflow.graph.vertex.base import Vertex
@@ -134,6 +135,7 @@ async def log_message(
             "artifacts": artifacts or {},
             "session_id": session_id,
             "timestamp": monitor_service.get_timestamp(),
+            "flow_id": flow_id,
         }
         monitor_service.add_row(table_name="messages", data=row)
     except Exception as e:

src/backend/base/langflow/utils/schemas.py

@@ -45,6 +45,12 @@ class ChatOutputResponse(BaseModel):
         return self
 
 
+class RecordOutputResponse(BaseModel):
+    """Record output response schema."""
+
+    records: List[Optional[Dict]]
+
+
 class ContainsEnumMeta(enum.EnumMeta):
     def __contains__(cls, item):
         try:

src/backend/base/poetry.lock

@@ -131,13 +131,13 @@ tz = ["backports.zoneinfo"]
 
 [[package]]
 name = "annotated-types"
-version = "0.6.0"
+version = "0.7.0"
 description = "Reusable constraint types to use with typing.Annotated"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "annotated_types-0.6.0-py3-none-any.whl", hash = "sha256:0641064de18ba7a25dee8f96403ebc39113d0cb953a01429249d5c7564666a43"},
-    {file = "annotated_types-0.6.0.tar.gz", hash = "sha256:563339e807e53ffd9c267e99fc6d9ea23eb8443c08f112651963e24e22f84a5d"},
+    {file = "annotated_types-0.7.0-py3-none-any.whl", hash = "sha256:1f02e8b43a8fbbc3f3e0d4f0f4bfc8131bcb4eebe8849b8e5c773f3a1c582a53"},
+    {file = "annotated_types-0.7.0.tar.gz", hash = "sha256:aff07c09a53a08bc8cfccb9c85b05f1aa9a2a6f23728d790723543408344ce89"},
 ]
 
 [[package]]
@@ -632,17 +632,20 @@ gmpy2 = ["gmpy2"]
 
 [[package]]
 name = "emoji"
-version = "2.11.1"
+version = "2.12.1"
 description = "Emoji for Python"
 optional = false
-python-versions = "!=3.0.*,!=3.1.*,!=3.2.*,!=3.3.*,>=2.7"
+python-versions = ">=3.7"
 files = [
-    {file = "emoji-2.11.1-py2.py3-none-any.whl", hash = "sha256:b7ba25299bbf520cc8727848ae66b986da32aee27dc2887eaea2bff07226ce49"},
-    {file = "emoji-2.11.1.tar.gz", hash = "sha256:062ff0b3154b6219143f8b9f4b3e5c64c35bc2b146e6e2349ab5f29e218ce1ee"},
+    {file = "emoji-2.12.1-py3-none-any.whl", hash = "sha256:a00d62173bdadc2510967a381810101624a2f0986145b8da0cffa42e29430235"},
+    {file = "emoji-2.12.1.tar.gz", hash = "sha256:4aa0488817691aa58d83764b6c209f8a27c0b3ab3f89d1b8dceca1a62e4973eb"},
 ]
 
+[package.dependencies]
+typing-extensions = ">=4.7.0"
+
 [package.extras]
-dev = ["coverage", "coveralls", "pytest"]
+dev = ["coverage", "pytest (>=7.4.4)"]
 
 [[package]]
 name = "exceptiongroup"
@@ -1169,13 +1172,13 @@ types-requests = ">=2.31.0.2,<3.0.0.0"
 
 [[package]]
 name = "langsmith"
-version = "0.1.59"
+version = "0.1.60"
 description = "Client library to connect to the LangSmith LLM Tracing and Evaluation Platform."
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langsmith-0.1.59-py3-none-any.whl", hash = "sha256:445e3bc1d3baa1e5340cd979907a19483b9763a2ed37b863a01113d406f69345"},
-    {file = "langsmith-0.1.59.tar.gz", hash = "sha256:e748a89f4dd6aa441349143e49e546c03b5dfb43376a25bfef6a5ca792fe1437"},
+    {file = "langsmith-0.1.60-py3-none-any.whl", hash = "sha256:3c3520ea473de0a984237b3e9d638fdf23ef3acc5aec89a42e693225e72d6120"},
+    {file = "langsmith-0.1.60.tar.gz", hash = "sha256:6a145b5454437f9e0f81525f23c4dcdbb8c07b1c91553b8f697456c418d6a599"},
 ]
 
 [package.dependencies]
@@ -2329,13 +2332,13 @@ files = [
 
 [[package]]
 name = "requests"
-version = "2.31.0"
+version = "2.32.2"
 description = "Python HTTP for Humans."
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "requests-2.31.0-py3-none-any.whl", hash = "sha256:58cd2187c01e70e6e26505bca751777aa9f2ee0b7f4300988b709f44e013003f"},
-    {file = "requests-2.31.0.tar.gz", hash = "sha256:942c5a758f98d790eaed1a29cb6eefc7ffb0d1cf7af05c3d2791656dbd6ad1e1"},
+    {file = "requests-2.32.2-py3-none-any.whl", hash = "sha256:fc06670dd0ed212426dfeb94fc1b983d917c4f9847c863f313c9dfaaffb7c23c"},
+    {file = "requests-2.32.2.tar.gz", hash = "sha256:dd951ff5ecf3e3b3aa26b40703ba77495dab41da839ae72ef3c8e5d8e2433289"},
 ]
 
 [package.dependencies]
@@ -2583,13 +2586,13 @@ typing-extensions = ">=3.7.4.3"
 
 [[package]]
 name = "types-requests"
-version = "2.31.0.20240406"
+version = "2.32.0.20240521"
 description = "Typing stubs for requests"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "types-requests-2.31.0.20240406.tar.gz", hash = "sha256:4428df33c5503945c74b3f42e82b181e86ec7b724620419a2966e2de604ce1a1"},
-    {file = "types_requests-2.31.0.20240406-py3-none-any.whl", hash = "sha256:6216cdac377c6b9a040ac1c0404f7284bd13199c0e1bb235f4324627e8898cf5"},
+    {file = "types-requests-2.32.0.20240521.tar.gz", hash = "sha256:c5c4a0ae95aad51f1bf6dae9eed04a78f7f2575d4b171da37b622e08b93eb5d3"},
+    {file = "types_requests-2.32.0.20240521-py3-none-any.whl", hash = "sha256:ab728ba43ffb073db31f21202ecb97db8753ded4a9dc49cb480d8a5350c5c421"},
 ]
 
 [package.dependencies]

src/backend/base/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow-base"
-version = "0.0.45"
+version = "0.0.46"
 description = "A Python package with a built-in web application"
 authors = ["Langflow <contact@langflow.org>"]
 maintainers = [

src/frontend/package.json

@@ -4,6 +4,7 @@
     "private": true,
     "dependencies": {
         "@headlessui/react": "^1.7.17",
+        "@hookform/resolvers": "^3.3.4",
         "@million/lint": "^0.0.73",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-checkbox": "^1.0.4",
@@ -50,6 +51,7 @@
         "react-cookie": "^4.1.1",
         "react-dom": "^18.2.21",
         "react-error-boundary": "^4.0.11",
+        "react-hook-form": "^7.51.4",
         "react-icons": "^5.0.1",
         "react-laag": "^2.0.5",
         "react-markdown": "^8.0.7",
@@ -68,6 +70,7 @@
         "uuid": "^9.0.0",
         "vite-plugin-svgr": "^3.2.0",
         "web-vitals": "^2.1.4",
+        "zod": "^3.23.7",
         "zustand": "^4.4.7"
     },
     "scripts": {
@@ -101,7 +104,7 @@
     },
     "proxy": "http://127.0.0.1:7860",
     "devDependencies": {
-        "@playwright/test": "^1.43.1",
+        "@playwright/test": "^1.44.0",
         "@swc/cli": "^0.1.62",
         "@swc/core": "^1.3.80",
         "@tailwindcss/typography": "^0.5.9",

src/frontend/src/App.css

@@ -11,6 +11,13 @@ body {
   text-align: center;
 }
 
+.label {
+  user-select: none;
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none;
+}
+
 .react-flow__node {
   width: auto;
   height: auto;
@@ -76,6 +83,25 @@ body {
   height: 8px !important;
   border-radius: 10px;
 }
+*::-webkit-scrollbar {
+  width: 8px !important;
+  height: 8px !important;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1 !important;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #ccc !important;
+  border-radius: 999px !important;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #bbb !important;
+}
 
 .jv-indent::-webkit-scrollbar-track {
   background-color: #f1f1f1 !important;
@@ -111,3 +137,30 @@ body {
 .json-view-flow .json-view {
   background-color: #bbb !important;
 }
+
+.ag-body-horizontal-scroll-viewport,
+.ag-body-vertical-scroll-viewport {
+  cursor: auto;
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar,
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track,
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb,
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 999px;
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover,
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
+  background-color: #bbb;
+}

src/frontend/src/App.tsx

@@ -19,6 +19,7 @@ import Router from "./routes";
 import useAlertStore from "./stores/alertStore";
 import { useDarkStore } from "./stores/darkStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
+import { useFolderStore } from "./stores/foldersStore";
 import { useGlobalVariablesStore } from "./stores/globalVariables";
 import { useStoreStore } from "./stores/storeStore";
 import { useTypesStore } from "./stores/typesStore";
@@ -47,13 +48,13 @@ export default function App() {
   const setGlobalVariables = useGlobalVariablesStore(
     (state) => state.setGlobalVariables
   );
-  const setUnavailableFields = useGlobalVariablesStore(
-    (state) => state.setUnavaliableFields
-  );
   const checkHasStore = useStoreStore((state) => state.checkHasStore);
   const navigate = useNavigate();
   const dark = useDarkStore((state) => state.dark);
 
+  const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+  const loadingFolders = useFolderStore((state) => state.loading);
+
   const [isLoadingHealth, setIsLoadingHealth] = useState(false);
 
   useEffect(() => {
@@ -76,7 +77,7 @@ export default function App() {
           setUserData(user);
           setAutoLogin(true);
           setLoading(false);
-          await Promise.all([refreshStars(), refreshVersion(), fetchData()]);
+          fetchAllData();
         }
       })
       .catch(async (error) => {
@@ -84,7 +85,7 @@ export default function App() {
           setAutoLogin(false);
           if (isAuthenticated && !isLoginPage) {
             getUser();
-            await Promise.all([refreshStars(), refreshVersion(), fetchData()]);
+            fetchAllData();
           } else {
             setLoading(false);
             useFlowsManagerStore.setState({ isLoading: false });
@@ -92,14 +93,21 @@ export default function App() {
         }
       });
 
-    /* 
-      Abort the request as it isn't needed anymore, the component being 
+    /*
+      Abort the request as it isn't needed anymore, the component being
       unmounted. It helps avoid, among other things, the well-known "can't
       perform a React state update on an unmounted component" warning.
     */
     return () => abortController.abort();
   }, []);
 
+  const fetchAllData = async () => {
+    setTimeout(async () => {
+      await Promise.all([refreshStars(), refreshVersion(), fetchData()]);
+      getFoldersApi();
+    }, 1000);
+  };
+
   const fetchData = async () => {
     return new Promise<void>(async (resolve, reject) => {
       if (isAuthenticated) {
@@ -157,7 +165,7 @@ export default function App() {
     setFetchError(false);
     //This condition is necessary to avoid infinite loop on starter page when the application is not healthy
     if (isLoading === true && window.location.pathname === "/") {
-      navigate("/flows");
+      navigate("/all");
       window.location.reload();
     }
   };
@@ -184,7 +192,7 @@ export default function App() {
             ></FetchErrorComponent>
           }
 
-          {isLoading ? (
+          {isLoading || loadingFolders ? (
             <div className="loading-page-panel">
               <LoadingComponent remSize={50} />
             </div>

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

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import IconComponent from "../../../../components/genericIconComponent";
+import { AccordionComponentType } from "../../../../types/components";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../../ui/custom-accordion";
+
+export default function FolderAccordionComponent({
+  trigger,
+  open = [],
+  keyValue,
+  options,
+}: AccordionComponentType): JSX.Element {
+  const [value, setValue] = useState(
+    open.length === 0 ? "" : getOpenAccordion(),
+  );
+
+  function getOpenAccordion(): string {
+    let value = "";
+    open.forEach((el) => {
+      if (el == trigger) {
+        value = trigger;
+      }
+    });
+
+    return value;
+  }
+
+  function handleClick(): void {
+    value === "" ? setValue(keyValue!) : setValue("");
+  }
+
+  return (
+    <>
+      <Accordion
+        type="single"
+        className="w-full"
+        value={value}
+        onValueChange={setValue}
+      >
+        <AccordionItem value={keyValue!} className="">
+          <AccordionTrigger
+            onClick={() => {
+              handleClick();
+            }}
+            className="px-2"
+          >
+            {trigger}
+          </AccordionTrigger>
+          <AccordionContent>
+            {options!.map((option, index) => (
+              <div
+                key={index}
+                className="flex cursor-pointer px-2 py-1 hover:bg-muted-foreground/10"
+              >
+                <IconComponent
+                  name={option.icon}
+                  className="relative top-[1.5px] mr-2 h-4 w-4"
+                  aria-hidden="true"
+                />
+                <span className="truncate">{option.title}</span>
+              </div>
+            ))}
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </>
+  );
+}

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

@@ -130,8 +130,8 @@ export default function AddNewVariableButton({ children }): JSX.Element {
           <InputComponent
             setSelectedOptions={(value) => setFields(value)}
             selectedOptions={fields}
-            password={false}
             options={availableFields()}
+            password={false}
             placeholder="Choose a field for the variable..."
             id={"apply-to-fields"}
           ></InputComponent>

src/frontend/src/components/arrayReaderComponent/index.tsx

@@ -0,0 +1,12 @@
+export default function ArrayReader({ array }: { array: any[] }): JSX.Element {
+  //TODO check array type
+  return (
+    <div>
+      <ul>
+        {array.map((item, index) => (
+          <li key={index}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,39 @@
+import { storeComponent } from "../../../../types/store";
+import { cn } from "../../../../utils/utils";
+import ForwardedIconComponent from "../../../genericIconComponent";
+import ShadTooltip from "../../../shadTooltipComponent";
+import { Card, CardHeader, CardTitle } from "../../../ui/card";
+
+export default function DragCardComponent({ data }: { data: storeComponent }) {
+  return (
+    <>
+      <Card
+        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]",
+        )}
+      >
+        <div>
+          <CardHeader>
+            <div>
+              <CardTitle className="flex w-full items-start justify-between gap-3 text-xl">
+                <ForwardedIconComponent
+                  className={cn(
+                    "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",
+                  )}
+                  name={data.is_component ? "ToyBrick" : "Group"}
+                />
+
+                <div className="w-full truncate pr-3">{data.name}</div>
+              </CardTitle>
+            </div>
+          </CardHeader>
+        </div>
+      </Card>
+    </>
+  );
+}

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

@@ -1,4 +1,6 @@
 import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { Control } from "react-hook-form";
 import { getComponent, postLikeComponent } from "../../controllers/API";
 import IOModal from "../../modals/IOModal";
 import DeleteConfirmationModal from "../../modals/deleteConfirmationModal";
@@ -22,7 +24,10 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
+import { Checkbox } from "../ui/checkbox";
+import { FormControl, FormField } from "../ui/form";
 import Loading from "../ui/loading";
+import DragCardComponent from "./components/dragCardComponent";
 
 export default function CollectionCardComponent({
   data,
@@ -32,6 +37,8 @@ export default function CollectionCardComponent({
   onClick,
   onDelete,
   playground,
+  control,
+  is_component,
 }: {
   data: storeComponent;
   authorized?: boolean;
@@ -40,6 +47,8 @@ export default function CollectionCardComponent({
   button?: JSX.Element;
   playground?: boolean;
   onDelete?: () => void;
+  control?: Control<any, any>;
+  is_component?: boolean;
 }) {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
@@ -69,6 +78,10 @@ export default function CollectionCardComponent({
   );
   const [loadingPlayground, setLoadingPlayground] = useState(false);
 
+  const selectedFlowsComponentsCards = useFlowsManagerStore(
+    (state) => state.selectedFlowsComponentsCards
+  );
+
   const name = data.is_component ? "Component" : "Flow";
 
   async function getFlowData() {
@@ -82,7 +95,6 @@ export default function CollectionCardComponent({
       return false;
     }
     const { inputs, outputs } = getInputsAndOutputs(flow?.data?.nodes ?? []);
-    console.log(inputs, outputs);
     return inputs.length > 0 || outputs.length > 0;
   }
 
@@ -177,36 +189,59 @@ export default function CollectionCardComponent({
     }
   }
 
+  const isSelectedCard =
+    selectedFlowsComponentsCards?.includes(data?.id) ?? false;
+
+  function onDragStart(event: React.DragEvent<any>) {
+    let image: JSX.Element = <DragCardComponent data={data} />; // <== whatever you want here
+
+    var ghost = document.createElement("div");
+    ghost.style.transform = "translate(-10000px, -10000px)";
+    ghost.style.position = "absolute";
+    document.body.appendChild(ghost);
+    event.dataTransfer.setDragImage(ghost, 0, 0);
+    const root = createRoot(ghost);
+    root.render(image);
+    const flow = getFlowById(data.id);
+    if (flow) {
+      event.dataTransfer.setData("flow", JSON.stringify(data));
+    }
+  }
+
   return (
     <>
       <Card
+        onDragStart={onDragStart}
+        draggable
         data-testid={`card-${convertTestName(data.name)}`}
         //TODO check color schema
         className={cn(
           "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]",
           disabled ? "pointer-events-none opacity-50" : "",
-          onClick ? "cursor-pointer" : ""
+          onClick ? "cursor-pointer" : "",
+          isSelectedCard ? "border border-selected" : ""
         )}
         onClick={onClick}
       >
         <div>
           <CardHeader>
             <div>
-              <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
+              <CardTitle className="flex w-full items-start justify-between gap-3 text-xl">
                 <IconComponent
                   className={cn(
-                    "flex-shrink-0",
+                    "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"
                   )}
                   name={data.is_component ? "ToyBrick" : "Group"}
                 />
+
                 <ShadTooltip content={data.name}>
-                  <div className="w-full truncate">{data.name}</div>
+                  <div className="w-full truncate pr-3">{data.name}</div>
                 </ShadTooltip>
                 {data?.metadata !== undefined && (
-                  <div className="flex gap-3">
+                  <div className="flex items-center gap-3">
                     {data.private && (
                       <ShadTooltip content="Private">
                         <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
@@ -249,19 +284,29 @@ export default function CollectionCardComponent({
                   </div>
                 )}
 
-                {onDelete && data?.metadata === undefined && (
-                  <button
-                    className="z-50"
+                {control && (
+                  <div
+                    className="flex"
                     onClick={(e) => {
                       e.stopPropagation();
-                      setOpenDelete(true);
                     }}
                   >
-                    <IconComponent
-                      name="Trash2"
-                      className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
+                    <FormField
+                      control={control}
+                      name={`${data.id}`}
+                      defaultValue={false}
+                      render={({ field }) => (
+                        <FormControl>
+                          <Checkbox
+                            aria-label="checkbox-component"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            className="h-5 w-5 border border-ring data-[state=checked]:border-selected data-[state=checked]:bg-selected"
+                          />
+                        </FormControl>
+                      )}
                     />
-                  </button>
+                  </div>
                 )}
               </CardTitle>
             </div>
@@ -368,11 +413,7 @@ export default function CollectionCardComponent({
                         authorized ? "Delete" : "Please review your API key."
                       }
                     >
-                      <DeleteConfirmationModal
-                        onConfirm={() => {
-                          onDelete();
-                        }}
-                      >
+                      <DeleteConfirmationModal onConfirm={onDelete}>
                         <Button
                           variant="ghost"
                           size="icon"
@@ -540,6 +581,7 @@ export default function CollectionCardComponent({
           onConfirm={() => {
             if (onDelete) onDelete();
           }}
+          description={` ${is_component ? "component" : "flow"}`}
         >
           <></>
         </DeleteConfirmationModal>

src/frontend/src/components/cardsWrapComponent/index.tsx

@@ -1,5 +1,6 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
+import { cn } from "../../utils/utils";
 
 export default function CardsWrapComponent({
   onFileDrop,
@@ -11,6 +12,23 @@ export default function CardsWrapComponent({
   dragMessage?: string;
 }) {
   const [isDragging, setIsDragging] = useState(false);
+  useEffect(() => {
+    // Function to handle visibility change
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        // Reset hover state or perform any necessary actions when the tab becomes visible again
+        setIsDragging(false);
+      }
+    };
+
+    // Add event listener for visibility change
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    // Cleanup event listener on component unmount
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, []);
 
   const dragOver = (e) => {
     e.preventDefault();
@@ -43,12 +61,12 @@ export default function CardsWrapComponent({
       onDragEnter={dragEnter}
       onDragLeave={dragLeave}
       onDrop={onDrop}
-      className={
-        "h-full w-full " +
-        (isDragging
-          ? "mb-24 flex flex-col items-center justify-center gap-4 text-2xl font-light"
-          : "")
-      }
+      className={cn(
+        "h-full w-full",
+        isDragging
+          ? "mb-36 flex flex-col items-center justify-center gap-4 text-2xl font-light"
+          : ""
+      )}
     >
       {isDragging ? (
         <>

src/frontend/src/components/chatComponent/index.tsx

@@ -15,8 +15,8 @@ export default function FlowToolbar(): JSX.Element {
   const hasIO = useFlowStore((state) => state.hasIO);
   const hasStore = useStoreStore((state) => state.hasStore);
   const validApiKey = useStoreStore((state) => state.validApiKey);
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {

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

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

src/frontend/src/components/csvOutputComponent/index.tsx

@@ -1,7 +1,6 @@
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-balham.css"; // Optional Theme applied to the grid
-import { AgGridReact } from "ag-grid-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   CSVError,
   CSVNoDataError,
@@ -11,6 +10,7 @@ import { useDarkStore } from "../../stores/darkStore";
 import { FlowPoolObjectType } from "../../types/chat";
 import { NodeType } from "../../types/flow";
 import ForwardedIconComponent from "../genericIconComponent";
+import TableComponent from "../tableComponent";
 import Loading from "../ui/loading";
 import { convertCSVToData } from "./helpers/convert-data-function";
 
@@ -54,8 +54,6 @@ function CsvOutputComponent({
   const [colDefs, setColDefs] = useState([]);
 
   const [status, setStatus] = useState("loading");
-  var currentRowHeight: number;
-  var minRowHeight = 25;
   const defaultColDef = useMemo(() => {
     return {
       width: 200,
@@ -82,48 +80,6 @@ function CsvOutputComponent({
     }
   }, [separator]);
 
-  const getRowHeight = useCallback(() => {
-    return currentRowHeight;
-  }, []);
-
-  const onGridReady = useCallback((params: any) => {
-    minRowHeight = params.api.getSizesForCurrentTheme().rowHeight;
-    currentRowHeight = minRowHeight;
-  }, []);
-
-  const updateRowHeight = (params: { api: any }) => {
-    const bodyViewport = document.querySelector(".ag-body-viewport");
-    if (!bodyViewport) {
-      return;
-    }
-    var gridHeight = bodyViewport.clientHeight;
-    var renderedRowCount = params.api.getDisplayedRowCount();
-
-    if (renderedRowCount * minRowHeight >= gridHeight) {
-      if (currentRowHeight !== minRowHeight) {
-        currentRowHeight = minRowHeight;
-        params.api.resetRowHeights();
-      }
-    } else {
-      currentRowHeight = Math.floor(gridHeight / renderedRowCount);
-      params.api.resetRowHeights();
-    }
-  };
-
-  const onFirstDataRendered = useCallback(
-    (params: any) => {
-      updateRowHeight(params);
-    },
-    [updateRowHeight]
-  );
-
-  const onGridSizeChanged = useCallback(
-    (params: any) => {
-      updateRowHeight(params);
-    },
-    [updateRowHeight]
-  );
-
   return (
     <div className=" h-full rounded-md border bg-muted">
       {status === "nodata" && (
@@ -158,14 +114,10 @@ function CsvOutputComponent({
           className={`${dark ? "ag-theme-balham-dark" : "ag-theme-balham"}`}
           style={{ height: "100%", width: "100%" }}
         >
-          <AgGridReact
+          <TableComponent
             rowData={rowData}
             columnDefs={colDefs}
             defaultColDef={defaultColDef}
-            getRowHeight={getRowHeight}
-            onGridReady={onGridReady}
-            onFirstDataRendered={onFirstDataRendered}
-            onGridSizeChanged={onGridSizeChanged}
             scrollbarWidth={8}
             overlayNoRowsTemplate="No data available"
           />

src/frontend/src/components/dateReaderComponent/index.tsx

@@ -0,0 +1,21 @@
+export default function DateReader({
+  date: dateString,
+}: {
+  date: string;
+}): JSX.Element {
+  const date = new Date(dateString);
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are 0-indexed in JavaScript
+  const day = String(date.getDate()).padStart(2, "0");
+
+  const hours = date.getHours();
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+
+  const ampm = hours >= 12 ? "PM" : "AM";
+  const hours12 = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours; // Convert to 12-hour format
+
+  const formattedDate = `${year}-${month}-${day} ${hours12}:${minutes} ${ampm}`;
+
+  return <span>{formattedDate}</span>;
+}

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

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

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

@@ -7,7 +7,7 @@ import Loading from "../ui/loading";
 
 import { useEffect, useState } from "react";
 
-const ForwardedIconComponent = memo(
+export const ForwardedIconComponent = memo(
   forwardRef(
     (
       {
@@ -18,7 +18,7 @@ const ForwardedIconComponent = memo(
         strokeWidth,
         id = "",
       }: IconComponentProps,
-      ref
+      ref,
     ) => {
       const [showFallback, setShowFallback] = useState(false);
 
@@ -65,8 +65,8 @@ const ForwardedIconComponent = memo(
           />
         </Suspense>
       );
-    }
-  )
+    },
+  ),
 );
 
 export default ForwardedIconComponent;

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

@@ -12,6 +12,7 @@ import { Node } from "reactflow";
 import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
 import { SAVED_HOVER } from "../../../../constants/constants";
 import ExportModal from "../../../../modals/exportModal";
+import FlowLogsModal from "../../../../modals/flowLogsModal";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
@@ -34,6 +35,7 @@ export const MenuBar = ({
   const redo = useFlowsManagerStore((state) => state.redo);
   const saveLoading = useFlowsManagerStore((state) => state.saveLoading);
   const [openSettings, setOpenSettings] = useState(false);
+  const [openLogs, setOpenLogs] = useState(false);
   const nodes = useFlowStore((state) => state.nodes);
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const navigate = useNavigate();
@@ -123,6 +125,18 @@ export const MenuBar = ({
               />
               Settings
             </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                setOpenLogs(true);
+              }}
+              className="cursor-pointer"
+            >
+              <IconComponent
+                name="ScrollText"
+                className="header-menu-options "
+              />
+              Logs
+            </DropdownMenuItem>
             <DropdownMenuItem
               className="cursor-pointer"
               onClick={() => {
@@ -132,7 +146,7 @@ export const MenuBar = ({
                       title: UPLOAD_ERROR_ALERT,
                       list: [error],
                     });
-                  }
+                  },
                 );
               }}
             >
@@ -194,6 +208,7 @@ export const MenuBar = ({
           open={openSettings}
           setOpen={setOpenSettings}
         ></FlowSettingsModal>
+        <FlowLogsModal open={openLogs} setOpen={setOpenLogs}></FlowLogsModal>
       </div>
       {(currentFlow.updated_at || saveLoading) && (
         <ShadTooltip
@@ -213,7 +228,7 @@ export const MenuBar = ({
               name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
               className={cn(
                 "h-4 w-4",
-                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle"
+                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",
               )}
             />
             {printByBuildStatus()}

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

@@ -59,7 +59,7 @@ export default function Header(): JSX.Element {
           <Button
             className="gap-2"
             variant={
-              location.pathname === "/flows" ||
+              location.pathname === "/all" ||
               location.pathname === "/components"
                 ? "primary"
                 : "secondary"
@@ -73,18 +73,7 @@ export default function Header(): JSX.Element {
             <div className="hidden flex-1 md:block">{USER_PROJECTS_HEADER}</div>
           </Button>
         </Link>
-        {/* <Link to="/community">
-          <Button
-            className="gap-2"
-            variant={
-              location.pathname === "/community" ? "primary" : "secondary"
-            }
-            size="sm"
-          >
-            <IconComponent name="Users2" className="h-4 w-4" />
-            <div className="flex-1">Community Examples</div>
-          </Button>
-        </Link> */}
+
         {hasStore && (
           <Link to="/store">
             <Button

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

@@ -0,0 +1,61 @@
+import { useEffect, useRef, useState } from "react";
+
+export default function HorizontalScrollFadeComponent({
+  children,
+  isFolder = true,
+}) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const fadeContainerRef = useRef<HTMLDivElement>(null);
+  const [divWidth, setDivWidth] = useState<number>(0);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (scrollContainerRef.current) {
+        setDivWidth(scrollContainerRef.current.clientWidth);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize(); // call the function at start to get the initial width
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!scrollContainerRef.current || !fadeContainerRef.current) return;
+
+      const { scrollLeft, scrollWidth, clientWidth } =
+        scrollContainerRef.current;
+      const atStart = scrollLeft === 0;
+      const atEnd = scrollLeft === scrollWidth - clientWidth;
+      const isScrollable = scrollWidth > clientWidth;
+
+      fadeContainerRef.current.classList.toggle(
+        "fade-left",
+        isScrollable && !atStart,
+      );
+      fadeContainerRef.current.classList.toggle(
+        "fade-right",
+        isScrollable && !atEnd,
+      );
+    };
+
+    const scrollContainer = scrollContainerRef.current;
+    if (scrollContainer) {
+      scrollContainer.addEventListener("scroll", handleScroll);
+      // Delay the initial scroll event dispatch to ensure correct calculation
+      scrollContainer.dispatchEvent(new Event("scroll"));
+      return () => scrollContainer.removeEventListener("scroll", handleScroll);
+    }
+  }, [divWidth, children]); // Depend on divWidth
+
+  return isFolder ? (
+    <div className="hidden w-full flex-col gap-2 lg:flex">{children}</div>
+  ) : (
+    <div ref={fadeContainerRef} className="fade-container flex">
+      <div ref={scrollContainerRef} className="scroll-container flex gap-2">
+        {children}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,192 @@
+import { PopoverAnchor } from "@radix-ui/react-popover";
+import useAlertStore from "../../../../stores/alertStore";
+import { classNames, cn } from "../../../../utils/utils";
+import ForwardedIconComponent from "../../../genericIconComponent";
+import {
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../../../ui/command";
+import { Input } from "../../../ui/input";
+import { Popover, PopoverContentWithoutPortal } from "../../../ui/popover";
+const CustomInputPopover = ({
+  id,
+  refInput,
+  onInputLostFocus,
+  selectedOption,
+  setSelectedOption,
+  selectedOptions,
+  setSelectedOptions,
+  value,
+  autoFocus,
+  disabled,
+  setShowOptions,
+  required,
+  className,
+  password,
+  pwdVisible,
+  editNode,
+  placeholder,
+  onChange,
+  blurOnEnter,
+  options,
+  optionsPlaceholder,
+  optionButton,
+  optionsButton,
+  handleKeyDown,
+  showOptions,
+}) => {
+  const setErrorData = useAlertStore.getState().setErrorData;
+
+  const handleInputChange = (e) => {
+    if (password) {
+      if (
+        e.target.value.split("").every((char) => char === "•") &&
+        e.target.value !== ""
+      ) {
+        setErrorData({
+          title: `Invalid characters: ${e.target.value}`,
+          list: [
+            "It seems you are trying to paste a password. Make sure the value is visible before copying from another field.",
+          ],
+        });
+      }
+    }
+    onChange && onChange(e.target.value);
+  };
+  return (
+    <Popover modal open={showOptions} onOpenChange={setShowOptions}>
+      <PopoverAnchor>
+        <Input
+          id={id}
+          ref={refInput}
+          type="text"
+          onBlur={onInputLostFocus}
+          value={
+            (selectedOption !== "" || !onChange) && setSelectedOption
+              ? selectedOption
+              : (selectedOptions?.length !== 0 || !onChange) &&
+                setSelectedOptions
+              ? selectedOptions?.join(", ")
+              : value
+          }
+          autoFocus={autoFocus}
+          disabled={disabled}
+          onClick={() => {
+            (((selectedOption !== "" || !onChange) && setSelectedOption) ||
+              ((selectedOptions?.length !== 0 || !onChange) &&
+                setSelectedOptions)) &&
+              setShowOptions(true);
+          }}
+          required={required}
+          className={classNames(
+            password &&
+              (!setSelectedOption || selectedOption === "") &&
+              !pwdVisible &&
+              value !== ""
+              ? " text-clip password "
+              : "",
+            editNode ? " input-edit-node " : "",
+            password && (setSelectedOption || setSelectedOptions)
+              ? "pr-[62.9px]"
+              : "",
+            (!password && (setSelectedOption || setSelectedOptions)) ||
+              (password && !(setSelectedOption || setSelectedOptions))
+              ? "pr-8"
+              : "",
+            className!
+          )}
+          placeholder={password && editNode ? "Key" : placeholder}
+          onChange={handleInputChange}
+          onKeyDown={(e) => {
+            handleKeyDown(e);
+            if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
+          }}
+          data-testid={editNode ? id + "-edit" : id}
+        />
+      </PopoverAnchor>
+      <PopoverContentWithoutPortal
+        className="nocopy nopan nodelete nodrag noundo p-0"
+        style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
+        side="bottom"
+        align="center"
+      >
+        <Command
+          filter={(value, search) => {
+            if (
+              value.toLowerCase().includes(search.toLowerCase()) ||
+              value.includes("doNotFilter-")
+            )
+              return 1;
+            return 0;
+          }}
+        >
+          <CommandInput placeholder={optionsPlaceholder} />
+          <CommandList>
+            <CommandGroup defaultChecked={false}>
+              {options.map((option, id) => (
+                <CommandItem
+                  className="group"
+                  key={option + id}
+                  value={option}
+                  onSelect={(currentValue) => {
+                    setSelectedOption &&
+                      setSelectedOption(
+                        currentValue === selectedOption ? "" : currentValue
+                      );
+                    setSelectedOptions &&
+                      setSelectedOptions(
+                        selectedOptions?.includes(currentValue)
+                          ? selectedOptions.filter(
+                              (item) => item !== currentValue
+                            )
+                          : [...selectedOptions, currentValue]
+                      );
+                    !setSelectedOptions && setShowOptions(false);
+                  }}
+                >
+                  <div className="group flex w-full items-center justify-between">
+                    <div className="flex items-center">
+                      <div
+                        className={cn(
+                          "relative mr-2 h-4 w-4",
+                          selectedOption === option ||
+                            selectedOptions?.includes(option)
+                            ? "opacity-100"
+                            : "opacity-0"
+                        )}
+                      >
+                        <div className="absolute opacity-100 transition-all group-hover:opacity-0">
+                          <ForwardedIconComponent
+                            name="Check"
+                            className="mr-2 h-4 w-4 text-primary"
+                            aria-hidden="true"
+                          />
+                        </div>
+                        <div className="absolute opacity-0 transition-all group-hover:opacity-100">
+                          <ForwardedIconComponent
+                            name="X"
+                            className="mr-2 h-4 w-4 text-status-red"
+                            aria-hidden="true"
+                          />
+                        </div>
+                      </div>
+
+                      {option}
+                    </div>
+                    {optionButton && optionButton(option)}
+                  </div>
+                </CommandItem>
+              ))}
+              {optionsButton && optionsButton}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContentWithoutPortal>
+    </Popover>
+  );
+};
+
+export default CustomInputPopover;

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

@@ -0,0 +1,167 @@
+import { PopoverAnchor } from "@radix-ui/react-popover";
+import { classNames, cn } from "../../../../utils/utils";
+import ForwardedIconComponent from "../../../genericIconComponent";
+import {
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../../../ui/command";
+import { Input } from "../../../ui/input";
+import { Popover, PopoverContentWithoutPortal } from "../../../ui/popover";
+const CustomInputPopoverObject = ({
+  id,
+  refInput,
+  onInputLostFocus,
+  selectedOption,
+  setSelectedOption,
+  selectedOptions,
+  setSelectedOptions,
+  value,
+  autoFocus,
+  disabled,
+  setShowOptions,
+  required,
+  className,
+  placeholder,
+  onChange,
+  blurOnEnter,
+  options,
+  optionsPlaceholder,
+  optionButton,
+  optionsButton,
+  handleKeyDown,
+  showOptions,
+}) => {
+  const handleInputChange = (e) => {
+    onChange && onChange(e.target.value);
+  };
+
+  return (
+    <Popover modal open={showOptions} onOpenChange={setShowOptions}>
+      <PopoverAnchor>
+        <Input
+          id={id}
+          ref={refInput}
+          type="text"
+          onBlur={onInputLostFocus}
+          value={
+            (selectedOption !== "" || !onChange) && setSelectedOption
+              ? options.find((option) => option.id === selectedOption)?.name ||
+                ""
+              : (selectedOptions?.length !== 0 || !onChange) &&
+                setSelectedOptions
+              ? selectedOptions
+                  .map(
+                    (optionId) =>
+                      options.find((option) => option.id === optionId)?.name
+                  )
+                  .join(", ")
+              : value
+          }
+          autoFocus={autoFocus}
+          disabled={disabled}
+          onClick={() => {
+            (((selectedOption !== "" || !onChange) && setSelectedOption) ||
+              ((selectedOptions?.length !== 0 || !onChange) &&
+                setSelectedOptions)) &&
+              setShowOptions(true);
+          }}
+          required={required}
+          className={classNames(className!)}
+          placeholder={placeholder}
+          onChange={handleInputChange}
+          onKeyDown={(e) => {
+            handleKeyDown(e);
+            if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
+          }}
+          data-testid={id}
+        />
+      </PopoverAnchor>
+      <PopoverContentWithoutPortal
+        className="nocopy nopan nodelete nodrag noundo p-0"
+        style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
+        side="bottom"
+        align="center"
+      >
+        <Command
+          filter={(value, search) => {
+            if (
+              value.toLowerCase().includes(search.toLowerCase()) ||
+              value.includes("doNotFilter-")
+            )
+              return 1;
+            return 0;
+          }}
+        >
+          <CommandInput placeholder={optionsPlaceholder} />
+          <CommandList>
+            <CommandGroup defaultChecked={false}>
+              {options.map((option, index) => (
+                <CommandItem
+                  className="group"
+                  key={option.id}
+                  value={option.id}
+                  onSelect={(currentValue) => {
+                    setSelectedOption &&
+                      setSelectedOption(
+                        currentValue === selectedOption ? "" : currentValue
+                      );
+                    setSelectedOptions &&
+                      setSelectedOptions(
+                        selectedOptions?.includes(currentValue)
+                          ? selectedOptions.filter(
+                              (item) => item !== currentValue
+                            )
+                          : [...selectedOptions, currentValue]
+                      );
+                    !setSelectedOptions && setShowOptions(false);
+                  }}
+                >
+                  <div className="group flex w-full items-center justify-between">
+                    <div className="flex items-center">
+                      <div
+                        className={cn(
+                          "relative mr-2 h-4 w-4",
+                          selectedOption === option.id ||
+                            selectedOptions?.includes(option.id)
+                            ? "opacity-100"
+                            : "opacity-0"
+                        )}
+                      >
+                        <div className="absolute opacity-100 transition-all group-hover:opacity-0">
+                          <ForwardedIconComponent
+                            name="Check"
+                            className="mr-2 h-4 w-4 text-primary"
+                            aria-hidden="true"
+                          />
+                        </div>
+                        <div className="absolute opacity-0 transition-all group-hover:opacity-100">
+                          <ForwardedIconComponent
+                            name="X"
+                            className="mr-2 h-4 w-4 text-status-red"
+                            aria-hidden="true"
+                          />
+                        </div>
+                      </div>
+                      <span data-testid={`option-${index}`}>
+                        {option.name}{" "}
+                      </span>
+
+                      {/* Display the name property of the option */}
+                    </div>
+                    {optionButton && optionButton(option)}
+                  </div>
+                </CommandItem>
+              ))}
+              {optionsButton && optionsButton}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContentWithoutPortal>
+    </Popover>
+  );
+};
+
+export default CustomInputPopoverObject;

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

@@ -1,20 +1,12 @@
 import * as Form from "@radix-ui/react-form";
-import { PopoverAnchor } from "@radix-ui/react-popover";
 import { useEffect, useRef, useState } from "react";
-import useAlertStore from "../../stores/alertStore";
 import { InputComponentType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames, cn } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
-import {
-  Command,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "../ui/command";
 import { Input } from "../ui/input";
-import { Popover, PopoverContentWithoutPortal } from "../ui/popover";
+import CustomInputPopover from "./components/popover";
+import CustomInputPopoverObject from "./components/popoverObject";
 
 export default function InputComponent({
   autoFocus = false,
@@ -39,13 +31,13 @@ export default function InputComponent({
   optionsPlaceholder = "Search options...",
   optionsButton,
   optionButton,
+  objectOptions,
+  isObjectOption = false,
 }: InputComponentType): JSX.Element {
-  const setErrorData = useAlertStore.getState().setErrorData;
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
   const [showOptions, setShowOptions] = useState<boolean>(false);
 
-  // Clear component state
   useEffect(() => {
     if (disabled && value && onChange && value !== "") {
       onChange("", true);
@@ -93,182 +85,61 @@ export default function InputComponent({
         </Form.Control>
       ) : (
         <>
-          <Popover modal open={showOptions} onOpenChange={setShowOptions}>
-            <PopoverAnchor>
-              <Input
-                id={id}
-                ref={refInput}
-                type="text"
-                onBlur={onInputLostFocus}
-                value={
-                  (selectedOption !== "" || !onChange) && setSelectedOption
-                    ? selectedOption
-                    : (selectedOptions?.length !== 0 || !onChange) &&
-                      setSelectedOptions
-                    ? selectedOptions?.join(", ")
-                    : value
-                }
-                autoFocus={autoFocus}
-                disabled={disabled}
-                onClick={() => {
-                  (((selectedOption !== "" || !onChange) &&
-                    setSelectedOption) ||
-                    ((selectedOptions?.length !== 0 || !onChange) &&
-                      setSelectedOptions)) &&
-                    setShowOptions(true);
-                }}
-                required={required}
-                className={classNames(
-                  password &&
-                    (!setSelectedOption || selectedOption === "") &&
-                    !pwdVisible &&
-                    value !== ""
-                    ? " text-clip password "
-                    : "",
-                  editNode ? " input-edit-node " : "",
-                  password && (setSelectedOption || setSelectedOptions)
-                    ? "pr-[62.9px]"
-                    : "",
-                  (!password && (setSelectedOption || setSelectedOptions)) ||
-                    (password && !(setSelectedOption || setSelectedOptions))
-                    ? "pr-8"
-                    : "",
-
-                  className!
-                )}
-                placeholder={password && editNode ? "Key" : placeholder}
-                onChange={(e) => {
-                  // if the user copies a password from another input
-                  // it might come as ••••••••••• it causes errors
-                  // in ascii encoding, so we need to handle it
-                  if (password) {
-                    // check if all chars are •
-                    if (
-                      e.target.value.split("").every((char) => char === "•") &&
-                      e.target.value !== ""
-                    ) {
-                      setErrorData({
-                        title: `Invalid characters: ${e.target.value}`,
-                        list: [
-                          "It seems you are trying to paste a password. Make sure the value is visible before copying from another field.",
-                        ],
-                      });
-                    }
-                  }
-                  onChange && onChange(e.target.value);
-                }}
-                onKeyDown={(e) => {
-                  handleKeyDown(e, value, "");
-                  if (blurOnEnter && e.key === "Enter")
-                    refInput.current?.blur();
-                }}
-                data-testid={editNode ? id + "-edit" : id}
-              />
-            </PopoverAnchor>
-            <PopoverContentWithoutPortal
-              className="nocopy nopan nodelete nodrag noundo p-0"
-              style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
-              side="bottom"
-              avoidCollisions={false}
-              align="center"
-            >
-              <Command
-                filter={(value, search) => {
-                  if (
-                    value.toLowerCase().includes(search.toLowerCase()) ||
-                    value.includes("doNotFilter-")
-                  )
-                    return 1; // ensures items arent filtered
-                  return 0;
-                }}
-              >
-                <CommandInput placeholder={optionsPlaceholder} />
-                <CommandList>
-                  <CommandGroup defaultChecked={false}>
-                    {options.map((option, id) => (
-                      <CommandItem
-                        className="group"
-                        key={option + id}
-                        value={option}
-                        onSelect={(currentValue) => {
-                          setSelectedOption &&
-                            setSelectedOption(
-                              currentValue === selectedOption
-                                ? ""
-                                : currentValue
-                            );
-                          setSelectedOptions &&
-                            setSelectedOptions(
-                              selectedOptions?.includes(currentValue)
-                                ? selectedOptions.filter(
-                                    (item) => item !== currentValue
-                                  )
-                                : [...selectedOptions, currentValue]
-                            );
-                          !setSelectedOptions && setShowOptions(false);
-                        }}
-                      >
-                        <div className="group flex w-full items-center justify-between">
-                          <div className="flex items-center">
-                            <div
-                              className={cn(
-                                "relative mr-2 h-4 w-4",
-                                selectedOption === option ||
-                                  selectedOptions?.includes(option)
-                                  ? "opacity-100"
-                                  : "opacity-0"
-                              )}
-                            >
-                              <div className="absolute opacity-100 transition-all group-hover:opacity-0">
-                                <ForwardedIconComponent
-                                  name="Check"
-                                  className="mr-2 h-4 w-4 text-primary"
-                                  aria-hidden="true"
-                                />
-                              </div>
-                              <div className="absolute opacity-0 transition-all group-hover:opacity-100">
-                                <ForwardedIconComponent
-                                  name="X"
-                                  className="mr-2 h-4 w-4 text-status-red"
-                                  aria-hidden="true"
-                                />
-                              </div>
-                            </div>
-
-                            {option}
-                          </div>
-                          {optionButton && optionButton(option)}
-                        </div>
-                      </CommandItem>
-                    ))}
-                    {optionsButton && optionsButton}
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContentWithoutPortal>
-          </Popover>
-          <div
-            data-testid={"popover-anchor-" + id}
-            className={cn(
-              "pointer-events-auto absolute inset-y-0 h-full w-full cursor-pointer",
-              ((selectedOption !== "" || !onChange) && setSelectedOption) ||
-                ((selectedOptions?.length !== 0 || !onChange) &&
-                  setSelectedOptions)
-                ? ""
-                : "hidden"
-            )}
-            onClick={
-              ((selectedOption !== "" || !onChange) && setSelectedOption) ||
-              ((selectedOptions?.length !== 0 || !onChange) &&
-                setSelectedOptions)
-                ? (e) => {
-                    setShowOptions((old) => !old);
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }
-                : () => {}
-            }
-          ></div>
+          {isObjectOption ? (
+            // Content to render when isObjectOption is true
+            <CustomInputPopoverObject
+              refInput={refInput}
+              handleKeyDown={handleKeyDown}
+              optionButton={optionButton}
+              optionsButton={optionsButton}
+              showOptions={showOptions}
+              onChange={onChange}
+              id={`object-${id}`}
+              onInputLostFocus={onInputLostFocus}
+              selectedOption={selectedOption}
+              setSelectedOption={setSelectedOption}
+              selectedOptions={selectedOptions}
+              setSelectedOptions={setSelectedOptions}
+              options={objectOptions}
+              value={value}
+              autoFocus={autoFocus}
+              disabled={disabled}
+              setShowOptions={setShowOptions}
+              required={required}
+              placeholder={placeholder}
+              blurOnEnter={blurOnEnter}
+              optionsPlaceholder={optionsPlaceholder}
+              className={className}
+            />
+          ) : (
+            <CustomInputPopover
+              refInput={refInput}
+              handleKeyDown={handleKeyDown}
+              optionButton={optionButton}
+              optionsButton={optionsButton}
+              showOptions={showOptions}
+              onChange={onChange}
+              id={`popover-anchor-${id}`}
+              onInputLostFocus={onInputLostFocus}
+              selectedOption={selectedOption}
+              setSelectedOption={setSelectedOption}
+              selectedOptions={selectedOptions}
+              setSelectedOptions={setSelectedOptions}
+              value={value}
+              autoFocus={autoFocus}
+              disabled={disabled}
+              setShowOptions={setShowOptions}
+              required={required}
+              password={password}
+              pwdVisible={pwdVisible}
+              editNode={editNode}
+              placeholder={placeholder}
+              blurOnEnter={blurOnEnter}
+              options={options}
+              optionsPlaceholder={optionsPlaceholder}
+              className={className}
+            />
+          )}
         </>
       )}
 
@@ -280,8 +151,10 @@ export default function InputComponent({
           )}
         >
           <button
-            onClick={() => {
+            onClick={(e) => {
               setShowOptions(!showOptions);
+              e.preventDefault();
+              e.stopPropagation();
             }}
             className={cn(
               selectedOption !== ""

src/frontend/src/components/inputFileComponent/index.tsx

@@ -106,8 +106,8 @@ export default function InputFileComponent({
             editNode
               ? "input-edit-node input-dialog text-muted-foreground"
               : disabled
-              ? "input-disable input-dialog primary-input"
-              : "input-dialog primary-input text-muted-foreground"
+                ? "input-disable input-dialog primary-input"
+                : "input-dialog primary-input text-muted-foreground"
           }
         >
           {myValue !== "" ? myValue : "No file"}

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

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

src/frontend/src/components/numberReader/index.tsx

@@ -0,0 +1,7 @@
+export default function NumberReader({
+  number,
+}: {
+  number: number;
+}): JSX.Element {
+  return <span>{number}</span>;
+}

src/frontend/src/components/objectRender/index.tsx

@@ -0,0 +1,13 @@
+import DictAreaModal from "../../modals/dictAreaModal";
+
+export default function ObjectRender({ object }: { object: any }): JSX.Element {
+  //TODO check object type
+
+  return (
+    <DictAreaModal value={object}>
+      <div className="flex h-full w-full items-center align-middle transition-all hover:scale-105">
+        <div className="truncate">{JSON.stringify(object)}</div>
+      </div>
+    </DictAreaModal>
+  );
+}

src/frontend/src/components/recordsOutputComponent/index.tsx

@@ -0,0 +1,34 @@
+import { ColDef, ColGroupDef } from "ag-grid-community";
+import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
+import "ag-grid-community/styles/ag-theme-balham.css"; // Optional Theme applied to the grid
+import { FlowPoolObjectType } from "../../types/chat";
+import TableComponent from "../tableComponent";
+import { extractColumnsFromRows } from "../../utils/utils";
+
+function RecordsOutputComponent({
+  flowPool,
+  pagination,
+}: {
+  flowPool: FlowPoolObjectType;
+  pagination: boolean;
+}) {
+  const rows = flowPool?.data?.artifacts?.records ?? [];
+  const columns = extractColumnsFromRows(rows, "union");
+  const columnDefs = columns.map((col, idx) => ({
+    ...col,
+    resizable: idx !== columns.length - 1,
+    flex: idx !== columns.length - 1 ? 1 : 2,
+  })) as (ColDef<any> | ColGroupDef<any>)[];
+
+  return (
+    <TableComponent
+      overlayNoRowsTemplate="No data available"
+      suppressRowClickSelection={true}
+      pagination={pagination}
+      columnDefs={columnDefs}
+      rowData={rows}
+    />
+  );
+}
+
+export default RecordsOutputComponent;

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

@@ -0,0 +1,38 @@
+import { Link } from "react-router-dom";
+import { cn } from "../../../../utils/utils";
+import { buttonVariants } from "../../../ui/button";
+
+type SideBarButtonsComponentProps = {
+  items: {
+    href?: string;
+    title: string;
+    icon: React.ReactNode;
+  }[];
+  pathname: string;
+  handleOpenNewFolderModal?: () => void;
+};
+const SideBarButtonsComponent = ({
+  items,
+  handleOpenNewFolderModal,
+}: SideBarButtonsComponentProps) => {
+  return (
+    <>
+      {items.map((item) => (
+        <Link to={item.href!}>
+          <div
+            key={item.title}
+            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",
+            )}
+            onClick={handleOpenNewFolderModal}
+          >
+            {item.title}
+          </div>
+        </Link>
+      ))}
+    </>
+  );
+};
+export default SideBarButtonsComponent;

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

@@ -0,0 +1,170 @@
+import { useLocation } from "react-router-dom";
+import { FolderType } from "../../../../pages/MainPage/entities";
+import { useFolderStore } from "../../../../stores/foldersStore";
+import { cn } from "../../../../utils/utils";
+import DropdownButton from "../../../dropdownButtonComponent";
+import IconComponent, {
+  ForwardedIconComponent,
+} from "../../../genericIconComponent";
+import { Button, buttonVariants } from "../../../ui/button";
+import useFileDrop from "../../hooks/use-on-file-drop";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { handleDownloadFolderFn } from "../../../../pages/MainPage/utils/handle-download-folder";
+import useAlertStore from "../../../../stores/alertStore";
+
+type SideBarFoldersButtonsComponentProps = {
+  folders: FolderType[];
+  pathname: string;
+  handleChangeFolder?: (id: string) => void;
+  handleEditFolder?: (item: FolderType) => void;
+  handleDeleteFolder?: (item: FolderType) => void;
+  handleAddFolder?: () => void;
+};
+const SideBarFoldersButtonsComponent = ({
+  folders,
+  pathname,
+  handleAddFolder,
+  handleChangeFolder,
+  handleEditFolder,
+  handleDeleteFolder,
+}: SideBarFoldersButtonsComponentProps) => {
+  const uploadFolder = useFolderStore((state) => state.uploadFolder);
+  const currentFolder = pathname.split("/");
+  const urlWithoutPath = pathname.split("/").length < 4;
+  const myCollectionId = useFolderStore((state) => state.myCollectionId);
+  const allFlows = useFlowsManagerStore((state) => state.allFlows);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+
+  const checkPathName = (itemId: string) => {
+    if (urlWithoutPath && itemId === myCollectionId) {
+      return true;
+    }
+    return currentFolder.includes(itemId);
+  };
+  const location = useLocation();
+  const folderId = location?.state?.folderId ?? myCollectionId;
+  const getFolderById = useFolderStore((state) => state.getFolderById);
+
+  const handleFolderChange = (folderId: string) => {
+    getFolderById(folderId);
+  };
+
+  const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop(
+    folderId,
+    handleFolderChange,
+  );
+
+  const handleUploadFlowsToFolder = () => {
+    uploadFolder(folderId);
+  };
+
+  const handleDownloadFolder = (id: string) => {
+    handleDownloadFolderFn(id);
+  };
+
+  return (
+    <>
+      <div className="flex shrink-0 items-center justify-between">
+        <DropdownButton
+          firstButtonName="New Folder"
+          onFirstBtnClick={handleAddFolder!}
+          options={[]}
+          plusButton={true}
+          dropdownOptions={false}
+        />
+        <Button
+          variant="primary"
+          onClick={handleUploadFlowsToFolder}
+          className="px-7"
+        >
+          <ForwardedIconComponent
+            name="Upload"
+            className="main-page-nav-button"
+          />
+          Upload
+        </Button>
+      </div>
+
+      <div className="flex gap-2 overflow-auto lg:h-[70vh] lg:flex-col">
+        <>
+          {folders.map((item, index) => (
+            <div
+              onDragOver={dragOver}
+              onDragEnter={dragEnter}
+              onDragLeave={dragLeave}
+              onDrop={(e) => onDrop(e, item.id!)}
+              key={item.id}
+              data-testid={`sidebar-nav-${item.name}`}
+              className={cn(
+                buttonVariants({ variant: "ghost" }),
+                checkPathName(item.id!)
+                  ? "border border-border bg-muted hover:bg-muted"
+                  : "border hover:bg-transparent lg:border-transparent lg:hover:border-border",
+                "group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full",
+              )}
+              onClick={() => handleChangeFolder!(item.id!)}
+            >
+              <div className="flex w-full items-center gap-2">
+                <IconComponent
+                  name={"folder"}
+                  className="mr-2 w-4 flex-shrink-0 justify-start stroke-[1.5] opacity-100"
+                />
+                <span className="block max-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]"
+                    onClick={(e) => {
+                      handleDeleteFolder!(item);
+                      e.stopPropagation();
+                      e.preventDefault();
+                    }}
+                    variant={"ghost"}
+                  >
+                    <IconComponent
+                      name={"trash"}
+                      className=" w-4 stroke-[1.5]"
+                    />
+                  </Button>
+                )}
+                {index > 0 && (
+                  <Button
+                    className="hidden p-0 hover:bg-white group-hover:block hover:dark:bg-[#0c101a00]"
+                    onClick={(e) => {
+                      handleEditFolder!(item);
+                      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) => {
+                    handleDownloadFolder(item.id!);
+                    e.stopPropagation();
+                    e.preventDefault();
+                  }}
+                  variant={"ghost"}
+                >
+                  <IconComponent
+                    name={"Download"}
+                    className="  w-4 stroke-[1.5] text-white  "
+                  />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </>
+      </div>
+    </>
+  );
+};
+export default SideBarFoldersButtonsComponent;

src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx

@@ -0,0 +1,134 @@
+import {
+  UPLOAD_ALERT_LIST,
+  WRONG_FILE_ERROR_ALERT,
+} from "../../../constants/alerts_constants";
+import { updateFlowInDatabase } from "../../../controllers/API";
+import { uploadFlowsFromFolders } from "../../../pages/MainPage/services";
+import useAlertStore from "../../../stores/alertStore";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
+import { useFolderStore } from "../../../stores/foldersStore";
+import { FlowType } from "../../../types/flow";
+
+const useFileDrop = (folderId, folderChangeCallback) => {
+  const setFolderDragging = useFolderStore((state) => state.setFolderDragging);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+  const refreshFlows = useFlowsManagerStore((state) => state.refreshFlows);
+  const flows = useFlowsManagerStore((state) => state.flows);
+
+  const triggerFolderChange = (folderId) => {
+    if (folderChangeCallback) {
+      folderChangeCallback(folderId);
+    }
+  };
+  const handleFileDrop = async (e) => {
+    if (e.dataTransfer.types.some((type) => type === "Files")) {
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        const firstFile = e.dataTransfer.files[0];
+        if (firstFile.type === "application/json") {
+          uploadFormData(firstFile);
+        } else {
+          setErrorData({
+            title: WRONG_FILE_ERROR_ALERT,
+            list: [UPLOAD_ALERT_LIST],
+          });
+        }
+      }
+    }
+  };
+
+  const dragOver = (
+    e:
+      | React.DragEvent<HTMLDivElement>
+      | React.DragEvent<HTMLButtonElement>
+      | React.DragEvent<HTMLAnchorElement>
+  ) => {
+    e.preventDefault();
+
+    if (e.dataTransfer.types.some((types) => types === "Files")) {
+      setFolderDragging(true);
+    }
+  };
+
+  const dragEnter = (
+    e:
+      | React.DragEvent<HTMLDivElement>
+      | React.DragEvent<HTMLButtonElement>
+      | React.DragEvent<HTMLAnchorElement>
+  ) => {
+    if (e.dataTransfer.types.some((types) => types === "Files")) {
+      setFolderDragging(true);
+    }
+    e.preventDefault();
+  };
+
+  const dragLeave = (
+    e:
+      | React.DragEvent<HTMLDivElement>
+      | React.DragEvent<HTMLButtonElement>
+      | React.DragEvent<HTMLAnchorElement>
+  ) => {
+    e.preventDefault();
+    if (e.target === e.currentTarget) {
+      setFolderDragging(false);
+    }
+  };
+
+  const onDrop = (
+    e:
+      | React.DragEvent<HTMLDivElement>
+      | React.DragEvent<HTMLButtonElement>
+      | React.DragEvent<HTMLAnchorElement>,
+    folderId: string
+  ) => {
+    if (e?.dataTransfer?.getData("flow")) {
+      const data = JSON.parse(e?.dataTransfer?.getData("flow"));
+
+      if (data) {
+        uploadFromDragCard(data.id, folderId);
+        return;
+      }
+    }
+
+    e.preventDefault();
+    handleFileDrop(e);
+    setFolderDragging(false);
+  };
+
+  const uploadFromDragCard = (flowId, folderId) => {
+    const selectedFlow = flows.find((flow) => flow.id === flowId);
+
+    if (!selectedFlow) {
+      throw new Error("Flow not found");
+    }
+
+    const updatedFlow: FlowType = {
+      ...selectedFlow,
+      folder_id: folderId,
+    };
+    updateFlowInDatabase(updatedFlow).then(() => {
+      getFoldersApi(true);
+      triggerFolderChange(folderId);
+    });
+  };
+
+  const uploadFormData = (data) => {
+    const formData = new FormData();
+    formData.append("file", data);
+
+    uploadFlowsFromFolders(formData).then(() => {
+      getFoldersApi(true);
+      triggerFolderChange(folderId);
+      refreshFlows();
+    });
+  };
+
+  return {
+    dragOver,
+    dragEnter,
+    dragLeave,
+    onDrop,
+  };
+};
+
+export default useFileDrop;

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

@@ -1,48 +1,61 @@
-import { Link, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import { FolderType } from "../../pages/MainPage/entities";
+import { useFolderStore } from "../../stores/foldersStore";
 import { cn } from "../../utils/utils";
-import { buttonVariants } from "../ui/button";
+import HorizontalScrollFadeComponent from "../horizontalScrollFadeComponent";
+import SideBarButtonsComponent from "./components/sideBarButtons";
+import SideBarFoldersButtonsComponent from "./components/sideBarFolderButtons";
 
-interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
+type SidebarNavProps = {
   items: {
-    href: string;
+    href?: string;
     title: string;
     icon: React.ReactNode;
   }[];
-}
+  handleOpenNewFolderModal?: () => void;
+  handleChangeFolder?: (id: string) => void;
+  handleEditFolder?: (item: FolderType) => void;
+  handleDeleteFolder?: (item: FolderType) => void;
+  className?: string;
+};
 
 export default function SidebarNav({
   className,
   items,
+  handleOpenNewFolderModal,
+  handleChangeFolder,
+  handleEditFolder,
+  handleDeleteFolder,
   ...props
 }: SidebarNavProps) {
   const location = useLocation();
   const pathname = location.pathname;
+  const loadingFolders = useFolderStore((state) => state.loading);
+  const folders = useFolderStore((state) => state.folders);
+
+  const pathValues = ["folder", "components", "flows", "all"];
+  const isFolderPath = pathValues.some((value) => pathname.includes(value));
 
   return (
-    <nav
-      className={cn(
-        "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
-        className
-      )}
-      {...props}
-    >
-      {items.map((item) => (
-        <Link
-          data-testid={`sidebar-nav-${item.title}`}
-          key={item.href}
-          to={item.href}
-          className={cn(
-            buttonVariants({ variant: "ghost" }),
-            pathname === item.href
-              ? "border border-border bg-muted hover:bg-muted"
-              : "border border-transparent hover:border-border hover:bg-transparent",
-            "justify-start gap-2"
-          )}
-        >
-          {item.icon}
-          {item.title}
-        </Link>
-      ))}
+    <nav className={cn(className)} {...props}>
+      <HorizontalScrollFadeComponent>
+        <SideBarButtonsComponent
+          items={items}
+          pathname={pathname}
+          handleOpenNewFolderModal={handleOpenNewFolderModal}
+        />
+
+        {!loadingFolders && folders?.length > 0 && isFolderPath && (
+          <SideBarFoldersButtonsComponent
+            folders={folders}
+            pathname={pathname}
+            handleChangeFolder={handleChangeFolder}
+            handleEditFolder={handleEditFolder}
+            handleDeleteFolder={handleDeleteFolder}
+            handleAddFolder={handleOpenNewFolderModal}
+          />
+        )}
+      </HorizontalScrollFadeComponent>
     </nav>
   );
 }

src/frontend/src/components/storeGuard/index.tsx

@@ -5,7 +5,7 @@ export const StoreGuard = ({ children }) => {
   const hasStore = useStoreStore((state) => state.hasStore);
 
   if (!hasStore) {
-    return <Navigate to="/flows" replace />;
+    return <Navigate to="/all" replace />;
   }
 
   return children;

src/frontend/src/components/stringReaderComponent/index.tsx

@@ -0,0 +1,7 @@
+export default function StringReader({
+  string,
+}: {
+  string: string;
+}): JSX.Element {
+  return <span className="truncate">{string}</span>;
+}

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

@@ -0,0 +1,60 @@
+import { CustomCellRendererProps } from "ag-grid-react";
+import { cn, isTimeStampString } from "../../utils/utils";
+import ArrayReader from "../arrayReaderComponent";
+import DateReader from "../dateReaderComponent";
+import NumberReader from "../numberReader";
+import ObjectRender from "../objectRender";
+import StringReader from "../stringReaderComponent";
+import { Label } from "../ui/label";
+import { Badge } from "../ui/badge";
+
+export default function TableAutoCellRender({
+  value,
+}: CustomCellRendererProps) {
+  function getCellType() {
+    switch (typeof value) {
+      case "object":
+        if (value === null) {
+          return String(value);
+        } else if (Array.isArray(value)) {
+          return <ArrayReader array={value} />;
+        } else if (value.definitions) {
+          // use a custom render defined by the sender
+        } else {
+          return <ObjectRender object={value} />;
+        }
+        break;
+      case "string":
+        if (isTimeStampString(value)) {
+          return <DateReader date={value} />;
+        }
+        //TODO: REFACTOR FOR ANY LABEL NOT HARDCODED
+        else if (value === "success") {
+          return (
+            <Badge
+              variant="outline"
+              size="sq"
+              className={cn(
+                "min-w-min bg-success-background text-success-foreground hover:bg-success-background",
+              )}
+            >
+              {value}
+            </Badge>
+          );
+        } else {
+          return <StringReader string={value} />;
+        }
+        break;
+      case "number":
+        return <NumberReader number={value} />;
+      default:
+        return String(value);
+    }
+  }
+
+  return (
+    <div className="group flex h-full w-full items-center align-middle">
+      {getCellType()}
+    </div>
+  );
+}

src/frontend/src/components/tableComponent/index.tsx

@@ -1,27 +1,119 @@
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
-import { AgGridReact } from "ag-grid-react";
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
+import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { ElementRef, forwardRef, useCallback } from "react";
+import {
+  DEFAULT_TABLE_ALERT_MSG,
+  DEFAULT_TABLE_ALERT_TITLE,
+} from "../../constants/constants";
 import { useDarkStore } from "../../stores/darkStore";
 import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
 import { cn } from "../../utils/utils";
+import ForwardedIconComponent from "../genericIconComponent";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
+
+interface TableComponentProps extends AgGridReactProps {
+  columnDefs: NonNullable<AgGridReactProps["columnDefs"]>;
+  rowData: NonNullable<AgGridReactProps["rowData"]>;
+  alertTitle?: string;
+  alertDescription?: string;
+}
 
 const TableComponent = forwardRef<
   ElementRef<typeof AgGridReact>,
-  ComponentPropsWithoutRef<typeof AgGridReact>
->(({ ...props }, ref) => {
-  const dark = useDarkStore((state) => state.dark);
+  TableComponentProps
+>(
+  (
+    {
+      alertTitle = DEFAULT_TABLE_ALERT_TITLE,
+      alertDescription = DEFAULT_TABLE_ALERT_MSG,
+      ...props
+    },
+    ref
+  ) => {
+    const dark = useDarkStore((state) => state.dark);
+    var currentRowHeight: number;
+    var minRowHeight = 25;
 
-  return (
-    <div
-      className={cn(
-        dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
-        "ag-theme-shadcn flex h-full flex-col"
-      )} // applying the grid theme
-    >
-      <AgGridReact ref={ref} {...props} />
-    </div>
-  );
-});
+    const getRowHeight = useCallback(() => {
+      return currentRowHeight;
+    }, []);
+
+    const onGridReady = useCallback((params: any) => {
+      minRowHeight = params.api.getSizesForCurrentTheme().rowHeight;
+      currentRowHeight = minRowHeight;
+    }, []);
+
+    const updateRowHeight = (params: { api: any }) => {
+      const bodyViewport = document.querySelector(".ag-body-viewport");
+      if (!bodyViewport) {
+        return;
+      }
+      var gridHeight = bodyViewport.clientHeight;
+      var renderedRowCount = params.api.getDisplayedRowCount();
+
+      if (renderedRowCount * minRowHeight >= gridHeight) {
+        if (currentRowHeight !== minRowHeight) {
+          currentRowHeight = minRowHeight;
+          params.api.resetRowHeights();
+        }
+      } else {
+        currentRowHeight = Math.floor(gridHeight / renderedRowCount);
+        params.api.resetRowHeights();
+      }
+    };
+
+    const onFirstDataRendered = useCallback(
+      (params: any) => {
+        updateRowHeight(params);
+      },
+      [updateRowHeight]
+    );
+
+    const onGridSizeChanged = useCallback(
+      (params: any) => {
+        updateRowHeight(params);
+      },
+      [updateRowHeight]
+    );
+
+    if (props.rowData.length === 0) {
+      return (
+        <div className="flex h-full w-full items-center justify-center rounded-md border">
+          <Alert variant={"default"} className="w-fit">
+            <ForwardedIconComponent
+              name="AlertCircle"
+              className="h-5 w-5 text-primary"
+            />
+            <AlertTitle>{alertTitle}</AlertTitle>
+            <AlertDescription>{alertDescription}</AlertDescription>
+          </Alert>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className={cn(
+          dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
+          "ag-theme-shadcn flex h-full flex-col"
+        )} // applying the grid theme
+      >
+        <AgGridReact
+          {...props}
+          className={cn(props.className, "custom-scroll")}
+          getRowHeight={getRowHeight}
+          onGridReady={onGridReady}
+          onFirstDataRendered={onFirstDataRendered}
+          onGridSizeChanged={onGridSizeChanged}
+          defaultColDef={{
+            minWidth: 100,
+          }}
+          ref={ref}
+        />
+      </div>
+    );
+  }
+);
 
 export default TableComponent;

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

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from "react";
 import { cn } from "../../utils/utils";
+import HorizontalScrollFadeComponent from "../horizontalScrollFadeComponent";
 import { Badge } from "../ui/badge";
 
 export function TagsSelector({
@@ -24,87 +24,37 @@ export function TagsSelector({
     setSelectedTags(newArray);
   };
 
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const fadeContainerRef = useRef<HTMLDivElement>(null);
-  const [divWidth, setDivWidth] = useState<number>(0);
-
-  useEffect(() => {
-    const handleResize = () => {
-      if (scrollContainerRef.current) {
-        setDivWidth(scrollContainerRef.current.clientWidth);
-      }
-    };
-
-    window.addEventListener("resize", handleResize);
-    handleResize(); // call the function at start to get the initial width
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (!scrollContainerRef.current || !fadeContainerRef.current) return;
-
-      const { scrollLeft, scrollWidth, clientWidth } =
-        scrollContainerRef.current;
-      const atStart = scrollLeft === 0;
-      const atEnd = scrollLeft === scrollWidth - clientWidth;
-      const isScrollable = scrollWidth > clientWidth;
-
-      fadeContainerRef.current.classList.toggle(
-        "fade-left",
-        isScrollable && !atStart
-      );
-      fadeContainerRef.current.classList.toggle(
-        "fade-right",
-        isScrollable && !atEnd
-      );
-    };
-
-    const scrollContainer = scrollContainerRef.current;
-    if (scrollContainer) {
-      scrollContainer.addEventListener("scroll", handleScroll);
-      // Delay the initial scroll event dispatch to ensure correct calculation
-      scrollContainer.dispatchEvent(new Event("scroll"));
-      return () => scrollContainer.removeEventListener("scroll", handleScroll);
-    }
-  }, [divWidth, loadingTags]); // Depend on divWidth
-
   return (
-    <div ref={fadeContainerRef} className="fade-container">
-      <div
-        ref={scrollContainerRef}
-        className="scroll-container flex min-w-min gap-2"
-      >
-        {!loadingTags &&
-          tags.map((tag, idx) => (
-            <button
-              disabled={disabled}
-              className={
-                disabled
-                  ? "cursor-not-allowed"
-                  : " overflow-hidden whitespace-nowrap"
-              }
-              onClick={() => {
-                updateTags(tag.name);
-              }}
+    <HorizontalScrollFadeComponent isFolder={false}>
+      {!loadingTags &&
+        tags.map((tag, idx) => (
+          <button
+            disabled={disabled}
+            className={
+              disabled
+                ? "cursor-not-allowed"
+                : " overflow-hidden whitespace-nowrap"
+            }
+            onClick={() => {
+              updateTags(tag.name);
+            }}
+            key={idx}
+            data-testid={`tag-selector-${tag.name}`}
+          >
+            <Badge
               key={idx}
-              data-testid={`tag-selector-${tag.name}`}
+              variant="outline"
+              size="sq"
+              className={cn(
+                selectedTags.some((category) => category === tag.name)
+                  ? "min-w-min bg-beta-foreground text-background hover:bg-beta-foreground"
+                  : "",
+              )}
             >
-              <Badge
-                key={idx}
-                variant="outline"
-                size="sq"
-                className={cn(
-                  selectedTags.some((category) => category === tag.name)
-                    ? "min-w-min bg-beta-foreground text-background hover:bg-beta-foreground"
-                    : ""
-                )}
-              >
-                {tag.name}
-              </Badge>
-            </button>
-          ))}
-      </div>
-    </div>
+              {tag.name}
+            </Badge>
+          </button>
+        ))}
+    </HorizontalScrollFadeComponent>
   );
 }

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

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

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

@@ -13,14 +13,14 @@ 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}
   >
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <IconComponent name="Check" className="h-4 w-4" />
+      <IconComponent name="Check" className="h-4 w-4 stroke-2" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
@@ -37,7 +37,7 @@ const CheckBoxDiv = ({
     className={cn(
       className,
       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      checked ? "bg-primary text-primary-foreground" : ""
+      checked ? "bg-primary text-primary-foreground" : "",
     )}
   >
     {checked && (

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

@@ -0,0 +1,55 @@
+"use client";
+
+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";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger asChild ref={ref} {...props}>
+      <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,
+        )}
+      >
+        {children}
+        <ChevronDownIcon className="h-4 w-4 font-bold text-primary transition-transform duration-200" />
+      </div>
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    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,
+    )}
+    {...props}
+  >
+    <div className="pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -0,0 +1,176 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
+import { cn } from "../../utils/utils";
+import { Label } from "./label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+};

src/frontend/src/constants/constants.ts

@@ -95,6 +95,12 @@ export const EXPORT_DIALOG_SUBTITLE = "Export flow as JSON file.";
  */
 export const SETTINGS_DIALOG_SUBTITLE = "Edit details about your project.";
 
+/**
+ * The base text for subtitle of Flow Logs (Menubar)
+ * @constant
+ */
+export const LOGS_DIALOG_SUBTITLE = "Check out information about your flow.";
+
 /**
  * The base text for subtitle of Code Dialog (Toolbar)
  * @constant
@@ -125,7 +131,6 @@ export const CODE_PROMPT_DIALOG_SUBTITLE =
 
 export const CODE_DICT_DIALOG_SUBTITLE =
   "Edit your dictionary. This dialog allows you to create your own customized dictionary. You can add as many key-value pairs as you want. While in edit mode, you can enter ({}) or ([]), and this will result in adding a new object or array.";
-
 /**
  * The base text for subtitle of Prompt Dialog
  * @constant
@@ -533,6 +538,8 @@ export const NOUNS: string[] = [
  */
 export const USER_PROJECTS_HEADER = "My Collection";
 
+export const DEFAULT_FOLDER = "My Projects";
+
 /**
  * Header text for admin page
  * @constant
@@ -727,6 +734,8 @@ export const OUTPUT_TYPES = new Set([
   "JsonOutput",
   "KeyPairOutput",
   "StringListOutput",
+  "RecordsOutput",
+  "TableOutput",
 ]);
 
 export const CHAT_FIRST_INITIAL_TEXT =
@@ -746,8 +755,8 @@ export const EDIT_TEXT_MODAL_TITLE = "Edit Text";
 export const EDIT_TEXT_PLACEHOLDER = "Type message here.";
 export const INPUT_HANDLER_HOVER = "Avaliable input components:";
 export const OUTPUT_HANDLER_HOVER = "Avaliable output components:";
-export const TEXT_INPUT_MODAL_TITLE = "Text Inputs";
-export const OUTPUTS_MODAL_TITLE = "Text Outputs";
+export const TEXT_INPUT_MODAL_TITLE = "Inputs";
+export const OUTPUTS_MODAL_TITLE = "Outputs";
 export const LANGFLOW_CHAT_TITLE = "Langflow Chat";
 export const CHAT_INPUT_PLACEHOLDER =
   "No chat input variables found. Click to run your flow.";
@@ -792,3 +801,7 @@ export const NATIVE_CATEGORIES = [
 ];
 
 export const SAVE_DEBOUNCE_TIME = 300;
+
+export const DEFAULT_TABLE_ALERT_MSG = `Oops! It seems there's no data to display right now. Please check back later.`;
+
+export const DEFAULT_TABLE_ALERT_TITLE = "No Data Available";

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

@@ -22,7 +22,10 @@ function ApiInterceptor() {
     const interceptor = api.interceptors.response.use(
       (response) => response,
       async (error: AxiosError) => {
-        if (error.response?.status === 403 || error.response?.status === 401) {
+        if (
+          error?.response?.status === 403 ||
+          error?.response?.status === 401
+        ) {
           if (!autoLogin) {
             if (error?.config?.url?.includes("github")) {
               return Promise.reject(error);
@@ -44,7 +47,7 @@ function ApiInterceptor() {
         }
         await clearBuildVerticesState(error);
         return Promise.reject(error);
-      }
+      },
     );
 
     const isAuthorizedURL = (url) => {
@@ -61,10 +64,10 @@ function ApiInterceptor() {
         const parsedURL = new URL(url);
 
         const isDomainAllowed = authorizedDomains.some(
-          (domain) => parsedURL.origin === new URL(domain).origin
+          (domain) => parsedURL.origin === new URL(domain).origin,
         );
         const isEndpointAllowed = authorizedEndpoints.some((endpoint) =>
-          parsedURL.pathname.includes(endpoint)
+          parsedURL.pathname.includes(endpoint),
         );
 
         return isDomainAllowed || isEndpointAllowed;
@@ -77,6 +80,18 @@ function ApiInterceptor() {
     // Request interceptor to add access token to every request
     const requestInterceptor = api.interceptors.request.use(
       (config) => {
+        const lastUrl = localStorage.getItem("lastUrlCalled");
+
+        if (
+          config?.url === lastUrl &&
+          config?.url !== "/health" &&
+          config?.method === "get"
+        ) {
+          return Promise.reject("Duplicate request");
+        }
+
+        localStorage.setItem("lastUrlCalled", config.url ?? "");
+
         const accessToken = cookies.get("access_token_lf");
         if (accessToken && !isAuthorizedURL(config?.url)) {
           config.headers["Authorization"] = `Bearer ${accessToken}`;
@@ -86,7 +101,7 @@ function ApiInterceptor() {
       },
       (error) => {
         return Promise.reject(error);
-      }
+      },
     );
 
     return () => {
@@ -118,7 +133,7 @@ function ApiInterceptor() {
       if (error?.config?.headers) {
         delete error.config.headers["Authorization"];
         error.config.headers["Authorization"] = `Bearer ${cookies.get(
-          "access_token_lf"
+          "access_token_lf",
         )}`;
         const response = await axios.request(error.config);
         return response;

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

@@ -1,3 +1,4 @@
+import { ColDef, ColGroupDef } from "ag-grid-community";
 import { AxiosRequestConfig, AxiosResponse } from "axios";
 import { Edge, Node, ReactFlowJsonObject } from "reactflow";
 import { BASE_URL_API } from "../../constants/constants";
@@ -18,6 +19,7 @@ import { UserInputType } from "../../types/components";
 import { FlowStyleType, FlowType } from "../../types/flow";
 import { StoreComponentResponse } from "../../types/store";
 import { FlowPoolType } from "../../types/zustand/flow";
+import { extractColumnsFromRows } from "../../utils/utils";
 import {
   APIClassType,
   BuildStatusTypeAPI,
@@ -119,6 +121,7 @@ export async function saveFlowToDatabase(newFlow: {
   description: string;
   style?: FlowStyleType;
   is_component?: boolean;
+  folder_id?: string;
 }): Promise<FlowType> {
   try {
     const response = await api.post(`${BASE_URL_API}flows/`, {
@@ -126,6 +129,7 @@ export async function saveFlowToDatabase(newFlow: {
       data: newFlow.data,
       description: newFlow.description,
       is_component: newFlow.is_component,
+      folder_id: newFlow.folder_id === "" ? null : newFlow.folder_id,
     });
 
     if (response.status !== 201) {
@@ -152,6 +156,7 @@ export async function updateFlowInDatabase(
       name: updatedFlow.name,
       data: updatedFlow.data,
       description: updatedFlow.description,
+      folder_id: updatedFlow.folder_id === "" ? null : updatedFlow.folder_id,
     });
 
     if (response?.status !== 200) {
@@ -992,3 +997,41 @@ export async function deleteFlowPool(
   config["params"] = { flow_id: flowId };
   return await api.delete(`${BASE_URL_API}monitor/builds`, config);
 }
+
+export async function multipleDeleteFlowsComponents(
+  flowIds: string[]
+): Promise<AxiosResponse<any>> {
+  return await api.post(`${BASE_URL_API}flows/multiple_delete/`, {
+    flow_ids: flowIds,
+  });
+}
+
+export async function getTransactionTable(
+  id: string,
+  mode: "intersection" | "union",
+  params = {}
+): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
+  const config = {};
+  config["params"] = { flow_id: id };
+  if (params) {
+    config["params"] = { ...config["params"], ...params };
+  }
+  const rows = await api.get(`${BASE_URL_API}monitor/transactions`, config);
+  const columns = extractColumnsFromRows(rows.data, mode);
+  return { rows: rows.data, columns };
+}
+
+export async function getMessagesTable(
+  id: string,
+  mode: "intersection" | "union",
+  params = {}
+): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
+  const config = {};
+  config["params"] = { flow_id: id };
+  if (params) {
+    config["params"] = { ...config["params"], ...params };
+  }
+  const rows = await api.get(`${BASE_URL_API}monitor/messages`, config);
+  const columns = extractColumnsFromRows(rows.data, mode);
+  return { rows: rows.data, columns };
+}

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

@@ -54,14 +54,14 @@ export default function GenericNode({
   const [nodeName, setNodeName] = useState(data.node!.display_name);
   const [inputDescription, setInputDescription] = useState(false);
   const [nodeDescription, setNodeDescription] = useState(
-    data.node?.description!
+    data.node?.description!,
   );
   const [isOutdated, setIsOutdated] = useState(false);
   const buildStatus = useFlowStore(
-    (state) => state.flowBuildStatus[data.id]?.status
+    (state) => state.flowBuildStatus[data.id]?.status,
   );
   const lastRunTime = useFlowStore(
-    (state) => state.flowBuildStatus[data.id]?.timestamp
+    (state) => state.flowBuildStatus[data.id]?.timestamp,
   );
   const [validationStatus, setValidationStatus] =
     useState<validationStatusType | null>(null);
@@ -118,7 +118,7 @@ export default function GenericNode({
 
       updateNodeInternals(data.id);
     },
-    [data.id, data.node, setNode, setIsOutdated]
+    [data.id, data.node, setNode, setIsOutdated],
   );
 
   if (!data.node!.template) {
@@ -258,7 +258,7 @@ export default function GenericNode({
   const isDark = useDarkStore((state) => state.dark);
   const renderIconStatus = (
     buildStatus: BuildStatus | undefined,
-    validationStatus: validationStatusType | null
+    validationStatus: validationStatusType | null,
   ) => {
     if (buildStatus === BuildStatus.BUILDING) {
       return <Loading className="text-medium-indigo" />;
@@ -299,7 +299,7 @@ export default function GenericNode({
   };
   const getSpecificClassFromBuildStatus = (
     buildStatus: BuildStatus | undefined,
-    validationStatus: validationStatusType | null
+    validationStatus: validationStatusType | null,
   ) => {
     let isInvalid = validationStatus && !validationStatus.valid;
 
@@ -323,11 +323,11 @@ export default function GenericNode({
     selected: boolean,
     showNode: boolean,
     buildStatus: BuildStatus | undefined,
-    validationStatus: validationStatusType | null
+    validationStatus: validationStatusType | null,
   ) => {
     const specificClassFromBuildStatus = getSpecificClassFromBuildStatus(
       buildStatus,
-      validationStatus
+      validationStatus,
     );
 
     const baseBorderClass = getBaseBorderClass(selected);
@@ -336,7 +336,7 @@ export default function GenericNode({
       baseBorderClass,
       nodeSizeClass,
       "generic-node-div",
-      specificClassFromBuildStatus
+      specificClassFromBuildStatus,
     );
   };
 
@@ -392,7 +392,7 @@ export default function GenericNode({
           selected,
           showNode,
           buildStatus,
-          validationStatus
+          validationStatus,
         )}
       >
         {data.node?.beta && showNode && (
@@ -537,7 +537,7 @@ export default function GenericNode({
                             }
                             title={getFieldTitle(
                               data.node?.template!,
-                              templateField
+                              templateField,
                             )}
                             info={data.node?.template[templateField].info}
                             name={templateField}
@@ -565,7 +565,7 @@ export default function GenericNode({
                             proxy={data.node?.template[templateField].proxy}
                             showNode={showNode}
                           />
-                        )
+                        ),
                     )}
                   <ParameterComponent
                     key={scapedJSONStringfy({
@@ -722,7 +722,7 @@ export default function GenericNode({
                       !data.node?.description) &&
                       nameEditable
                       ? "font-light italic"
-                      : ""
+                      : "",
                   )}
                   onDoubleClick={(e) => {
                     setInputDescription(true);
@@ -784,13 +784,13 @@ export default function GenericNode({
                         }
                         title={getFieldTitle(
                           data.node?.template!,
-                          templateField
+                          templateField,
                         )}
                         info={data.node?.template[templateField].info}
                         name={templateField}
                         tooltipTitle={
                           data.node?.template[templateField].input_types?.join(
-                            "\n"
+                            "\n",
                           ) ?? data.node?.template[templateField].type
                         }
                         required={data.node!.template[templateField].required}
@@ -817,7 +817,7 @@ export default function GenericNode({
               <div
                 className={classNames(
                   Object.keys(data.node!.template).length < 1 ? "hidden" : "",
-                  "flex-max-width justify-center"
+                  "flex-max-width justify-center",
                 )}
               >
                 {" "}

src/frontend/src/modals/BundleModal/component/index.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useState } from "react";
+import InputComponent from "../../../components/inputComponent";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "../../../components/ui/form";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { Textarea } from "../../../components/ui/textarea";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
+
+type FolderFormsProps = {
+  control: any;
+  setValue: any;
+  folderToEdit: any;
+};
+
+export const FolderForms = ({
+  control,
+  setValue,
+  folderToEdit,
+}: FolderFormsProps): JSX.Element => {
+  const flows = useFlowsManagerStore((state) => state.flows);
+  const [selectedComponents, setSelectedComponents] = useState<string[]>([]);
+  const [selectedFlows, setSelectedFlows] = useState<string[]>([]);
+
+  const componentsList = flows
+    .filter((flow) => flow.is_component && flow.folder_id !== null)
+    .map((flow) => ({ id: flow.id, name: flow.name }));
+
+  const flowsList = flows
+    .filter((flow) => !flow.is_component && flow.folder_id !== null)
+    .map((flow) => ({ id: flow.id, name: flow.name }));
+
+  useEffect(() => {
+    setValue("components", selectedComponents);
+    setValue("flows", selectedFlows);
+  }, [selectedComponents, selectedFlows]);
+
+  useEffect(() => {
+    if (folderToEdit) {
+      setValue("name", folderToEdit.name);
+      setValue("description", folderToEdit.description);
+      console.log(folderToEdit);
+
+      // setSelectedComponents(folderToEdit.components);
+      // setSelectedFlows(folderToEdit.flows);
+      return;
+    }
+    setValue("name", "");
+    setValue("description", "");
+    setSelectedComponents([]);
+    setSelectedFlows([]);
+  }, [folderToEdit]);
+
+  return (
+    <>
+      <div className="flex h-full w-full flex-col gap-4 align-middle">
+        <Label>Folder Name</Label>
+
+        <FormField
+          control={control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Input
+                  value={field.value}
+                  onChange={field.onChange}
+                  placeholder="Insert a name for the folder..."
+                ></Input>
+              </FormControl>
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Label>Description (optional) </Label>
+
+        <FormField
+          control={control}
+          name="description"
+          render={({ field }) => (
+            <FormControl>
+              <Textarea
+                value={field.value}
+                onChange={field.onChange}
+                placeholder="Insert a description for the folder..."
+              ></Textarea>
+            </FormControl>
+          )}
+        />
+
+        <Label>Add Flows</Label>
+
+        <FormField
+          control={control}
+          name="flows"
+          render={() => (
+            <FormControl>
+              <InputComponent
+                isObjectOption
+                password={false}
+                objectOptions={flowsList}
+                placeholder="Choose a flow to add..."
+                id="input-flow"
+                setSelectedOptions={(value: any) => setSelectedFlows(value)}
+                selectedOptions={selectedFlows}
+              ></InputComponent>
+            </FormControl>
+          )}
+        />
+
+        <Label>Add Components</Label>
+        <FormField
+          control={control}
+          name="components"
+          render={() => (
+            <FormControl>
+              <InputComponent
+                isObjectOption
+                password={false}
+                objectOptions={componentsList}
+                placeholder="Choose a component to add..."
+                id="input-component"
+                setSelectedOptions={(value) => setSelectedComponents(value)}
+                selectedOptions={selectedComponents}
+              ></InputComponent>
+            </FormControl>
+          )}
+        />
+      </div>
+    </>
+  );
+};
+
+export default FolderForms;

src/frontend/src/modals/BundleModal/entities/index.ts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const FolderFormsSchema = z.object({
+  name: z.string().min(1, {
+    message: "Name must be at least 1 characters.",
+  }),
+  description: z.string().optional(),
+  components: z.array(z.string()),
+  flows: z.array(z.string()),
+});

src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx

@@ -0,0 +1,53 @@
+import { addFolder, updateFolder } from "../../../pages/MainPage/services";
+import useAlertStore from "../../../stores/alertStore";
+import { useFolderStore } from "../../../stores/foldersStore";
+
+const useFolderSubmit = (setOpen, folderToEdit) => {
+  const setSuccessData = useAlertStore((state) => state.setSuccessData);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+
+  const onSubmit = (data) => {
+    if (folderToEdit) {
+      updateFolder(data, folderToEdit?.id!).then(
+        () => {
+          setSuccessData({
+            title: "Folder updated successfully.",
+          });
+          getFoldersApi(true);
+          setOpen(false);
+        },
+        (reason) => {
+          if (reason) {
+            setErrorData({
+              title: `Error updating folder.`,
+            });
+            console.error(reason);
+          } else {
+            getFoldersApi(true);
+            setOpen(false);
+          }
+        },
+      );
+    } else {
+      addFolder(data).then(
+        () => {
+          setSuccessData({
+            title: "Folder created successfully.",
+          });
+          getFoldersApi(true);
+          setOpen(false);
+        },
+        () => {
+          setErrorData({
+            title: `Error creating folder.`,
+          });
+        },
+      );
+    }
+  };
+
+  return { onSubmit, open, setOpen };
+};
+
+export default useFolderSubmit;

src/frontend/src/modals/BundleModal/index.tsx

@@ -0,0 +1,79 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import ForwardedIconComponent from "../../components/genericIconComponent";
+import { Button } from "../../components/ui/button";
+import { Form } from "../../components/ui/form";
+import { useFolderStore } from "../../stores/foldersStore";
+import BaseModal from "../baseModal";
+import FolderForms from "./component";
+import { FolderFormsSchema } from "./entities";
+import useFolderSubmit from "./hooks/submit-folder";
+
+type FoldersModalProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+};
+
+export default function FoldersModal({
+  open,
+  setOpen,
+}: FoldersModalProps): JSX.Element {
+  const form = useForm<z.infer<typeof FolderFormsSchema>>({
+    resolver: zodResolver(FolderFormsSchema),
+    defaultValues: {
+      name: "",
+      description: "",
+      components: [],
+      flows: [],
+    },
+    mode: "all",
+  });
+
+  const folderToEdit = useFolderStore((state) => state.folderToEdit);
+  const { onSubmit: onSubmitFolder } = useFolderSubmit(setOpen, folderToEdit);
+
+  const onSubmit = (data) => {
+    onSubmitFolder(data);
+  };
+
+  return (
+    <>
+      <BaseModal size="x-small" open={open} setOpen={setOpen}>
+        <BaseModal.Header
+          description={`${folderToEdit ? "Edit a folder" : "Add a new folder"}`}
+        >
+          <span className="pr-2" data-testid="modal-title">
+            {folderToEdit ? "Edit" : "New"} Folder
+          </span>
+          <ForwardedIconComponent
+            name="Plus"
+            className="h-6 w-6 pl-1 text-primary "
+            aria-hidden="true"
+          />
+        </BaseModal.Header>
+        <BaseModal.Content>
+          <div>
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)}>
+                <FolderForms
+                  folderToEdit={folderToEdit}
+                  control={form.control}
+                  setValue={form.setValue}
+                />
+
+                <Button
+                  className="float-right mt-6"
+                  type="submit"
+                  disabled={!form.formState.isValid}
+                >
+                  {folderToEdit ? "Edit" : "Save"} Folder
+                </Button>
+              </form>
+            </Form>
+          </div>
+        </BaseModal.Content>
+      </BaseModal>
+    </>
+  );
+}

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

@@ -4,6 +4,7 @@ import ImageViewer from "../../../../components/ImageViewer";
 import CsvOutputComponent from "../../../../components/csvOutputComponent";
 import InputListComponent from "../../../../components/inputListComponent";
 import PdfViewer from "../../../../components/pdfViewer";
+import RecordsOutputComponent from "../../../../components/recordsOutputComponent";
 import {
   Select,
   SelectContent,
@@ -47,6 +48,7 @@ export default function IOFieldView({
       }
     }
   };
+
   const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
 
   function handleOutputType() {
@@ -204,7 +206,7 @@ export default function IOFieldView({
                             <SelectItem key={separator} value={separator}>
                               {separator}
                             </SelectItem>
-                          )
+                          ),
                         )}
                       </SelectGroup>
                     </SelectContent>
@@ -280,6 +282,15 @@ export default function IOFieldView({
                 />
               </>
             );
+          case "RecordsOutput":
+            return (
+              <div className={left ? "h-56" : "h-full"}>
+                <RecordsOutputComponent
+                  flowPool={flowPoolNode}
+                  pagination={!left}
+                />
+              </div>
+            );
 
           default:
             return (

src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx

@@ -114,19 +114,19 @@ export default function ChatMessage({
       <div
         className={classNames(
           "form-modal-chat-position",
-          chat.isSend ? "" : " "
+          chat.isSend ? "" : " ",
         )}
       >
         <div
           className={classNames(
-            "mr-3 mt-1 flex w-24 flex-col items-center gap-1 overflow-hidden px-3 pb-3"
+            "mr-3 mt-1 flex w-24 flex-col items-center gap-1 overflow-hidden px-3 pb-3",
           )}
         >
           <div className="flex flex-col items-center gap-1">
             <div
               className={cn(
                 "relative flex h-8 w-8 items-center justify-center overflow-hidden rounded-md p-5 text-2xl",
-                !chat.isSend ? "bg-chat-bot-icon" : "bg-chat-user-icon"
+                !chat.isSend ? "bg-chat-bot-icon" : "bg-chat-user-icon",
               )}
             >
               <img
@@ -210,12 +210,12 @@ dark:prose-invert"
 
                                   children[0] = (children[0] as string).replace(
                                     "`▍`",
-                                    "▍"
+                                    "▍",
                                   );
                                 }
 
                                 const match = /language-(\w+)/.exec(
-                                  className || ""
+                                  className || "",
                                 );
 
                                 return !inline ? (
@@ -230,7 +230,7 @@ dark:prose-invert"
                                         language: (match && match[1]) || "",
                                         code: String(children).replace(
                                           /\n$/,
-                                          ""
+                                          "",
                                         ),
                                       },
                                     ]}
@@ -248,7 +248,7 @@ dark:prose-invert"
                             {chatMessage}
                           </Markdown>
                         ),
-                      [chat.message, chatMessage]
+                      [chat.message, chatMessage],
                     )}
                   </div>
                   {chat.files && (
@@ -306,7 +306,7 @@ dark:prose-invert"
                             parts.push(
                               <span className="chat-message-highlight">
                                 {chat.message[match[1]]}
-                              </span>
+                              </span>,
                             );
                           }
 

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

@@ -25,15 +25,21 @@ type TriggerProps = {
   children: ReactNode;
   asChild?: boolean;
   disable?: boolean;
+  className?: string;
 };
 
 const Content: React.FC<ContentProps> = ({ children }) => {
   return <div className="flex h-full w-full flex-col">{children}</div>;
 };
-const Trigger: React.FC<TriggerProps> = ({ children, asChild, disable }) => {
+const Trigger: React.FC<TriggerProps> = ({
+  children,
+  asChild,
+  disable,
+  className,
+}) => {
   return (
     <DialogTrigger
-      className={asChild ? "" : "w-full"}
+      className={asChild ? "" : cn("w-full", className)}
       hidden={children ? false : true}
       disabled={disable}
       asChild={asChild}
@@ -113,7 +119,7 @@ function BaseModal({
   switch (size) {
     case "x-small":
       minWidth = "min-w-[20vw]";
-      height = " ";
+      height = "h-full";
       break;
     case "smaller":
       minWidth = "min-w-[40vw]";
@@ -129,6 +135,7 @@ function BaseModal({
       break;
     case "small-h-full":
       minWidth = "min-w-[40vw]";
+      height = "h-full";
       break;
     case "medium":
       minWidth = "min-w-[60vw]";
@@ -136,6 +143,8 @@ function BaseModal({
       break;
     case "medium-h-full":
       minWidth = "min-w-[60vw]";
+      height = "h-full";
+
       break;
     case "large":
       minWidth = "min-w-[85vw]";
@@ -162,6 +171,7 @@ function BaseModal({
 
     case "large-h-full":
       minWidth = "min-w-[80vw]";
+      height = "h-full";
       break;
     default:
       minWidth = "min-w-[80vw]";
@@ -186,7 +196,7 @@ function BaseModal({
               {headerChild}
             </div>
             <div
-              className={`flex flex-col ${height!} w-full transition-all duration-300`}
+              className={`flex flex-col ${height} w-full transition-all duration-300`}
             >
               {ContentChild}
             </div>
@@ -203,7 +213,7 @@ function BaseModal({
               {headerChild}
             </div>
             <div
-              className={`flex flex-col ${height!} w-full transition-all duration-300`}
+              className={`flex flex-col ${height} w-full transition-all duration-300`}
             >
               {ContentChild}
             </div>

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

@@ -17,6 +17,7 @@ export default function DeleteConfirmationModal({
   asChild,
   open,
   setOpen,
+  note = "",
 }: {
   children: JSX.Element;
   onConfirm: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -24,6 +25,7 @@ export default function DeleteConfirmationModal({
   asChild?: boolean;
   open?: boolean;
   setOpen?: (open: boolean) => void;
+  note?: string;
 }) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -43,7 +45,14 @@ export default function DeleteConfirmationModal({
           </DialogTitle>
         </DialogHeader>
         <span>
-          Confirm deletion of {description ?? "component"}?<br></br>
+          Are you sure you want to delete the selected{" "}
+          {description ?? "component"}?<br></br>
+          {note && (
+            <>
+              {note}
+              <br></br>
+            </>
+          )}
           Note: This action is irreversible.
         </span>
         <DialogFooter>

src/frontend/src/modals/dictAreaModal/index.tsx

@@ -18,6 +18,10 @@ export default function DictAreaModal({
   children,
   onChange,
   value,
+}: {
+  children: JSX.Element;
+  onChange?: (value: Object) => void;
+  value: Object;
 }): JSX.Element {
   const [open, setOpen] = useState(false);
   const isDark = useDarkStore((state) => state.dark);
@@ -29,9 +33,13 @@ export default function DictAreaModal({
 
   return (
     <BaseModal size="medium-h-full" open={open} setOpen={setOpen}>
-      <BaseModal.Trigger>{children}</BaseModal.Trigger>
-      <BaseModal.Header description={CODE_DICT_DIALOG_SUBTITLE}>
-        <span className="pr-2">Edit Dictionary</span>
+      <BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
+      <BaseModal.Header
+        description={onChange ? CODE_DICT_DIALOG_SUBTITLE : null}
+      >
+        <span className="pr-2">
+          {onChange ? "Edit Dictionary" : "View Dictionary"}
+        </span>
         <IconComponent
           name="BookMarked"
           className="h-6 w-6 pl-1 text-primary "
@@ -44,7 +52,7 @@ export default function DictAreaModal({
             theme="vscode"
             dark={isDark}
             className={!isDark ? "json-view-white" : "json-view-dark"}
-            editable
+            editable={!!onChange}
             enableClipboard
             onEdit={(edit) => {
               ref.current = edit["src"];
@@ -54,19 +62,21 @@ export default function DictAreaModal({
             }}
             src={ref.current}
           />
-          <div className="flex h-fit w-full justify-end">
-            <Button
-              data-testid="save-dict-button"
-              className="mt-3"
-              type="submit"
-              onClick={() => {
-                onChange(ref.current);
-                setOpen(false);
-              }}
-            >
-              Save
-            </Button>
-          </div>
+          {onChange && (
+            <div className="flex h-fit w-full justify-end">
+              <Button
+                data-testid="save-dict-button"
+                className="mt-3"
+                type="submit"
+                onClick={() => {
+                  onChange(ref.current);
+                  setOpen(false);
+                }}
+              >
+                Save
+              </Button>
+            </div>
+          )}
         </div>
       </BaseModal.Content>
     </BaseModal>

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

@@ -0,0 +1,104 @@
+import { useEffect, useState } from "react";
+import IconComponent from "../../components/genericIconComponent";
+import { Tabs, TabsList, TabsTrigger } from "../../components/ui/tabs";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { FlowSettingsPropsType } from "../../types/components";
+import { FlowType } from "../../types/flow";
+import BaseModal from "../baseModal";
+import TableComponent from "../../components/tableComponent";
+import { getMessagesTable, getTransactionTable } from "../../controllers/API";
+import {
+  ColDef,
+  ColGroupDef,
+  SizeColumnsToFitGridStrategy,
+} from "ag-grid-community";
+
+export default function FlowLogsModal({
+  open,
+  setOpen,
+}: FlowSettingsPropsType): JSX.Element {
+  const saveFlow = useFlowsManagerStore((state) => state.saveFlow);
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+  const flows = useFlowsManagerStore((state) => state.flows);
+  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");
+
+  function handleClick(): void {
+    currentFlow!.name = name;
+    currentFlow!.description = description;
+    saveFlow(currentFlow!);
+    setOpen(false);
+  }
+
+  useEffect(() => {
+    if (activeTab === "Executions") {
+      getTransactionTable(currentFlowId, "union").then((data) => {
+        const { columns, rows } = data;
+        setColumns(columns.map((col) => ({ ...col, editable: true })));
+        setRows(rows);
+      });
+    } else if (activeTab === "Messages") {
+      getMessagesTable(currentFlowId, "union").then((data) => {
+        const { columns, rows } = data;
+        setColumns(columns.map((col) => ({ ...col, editable: true })));
+        setRows(rows);
+      });
+    }
+  }, [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.">
+        <div className="flex w-full justify-between">
+          <div className="flex h-fit w-32 items-center">
+            <span className="pr-2">Logs</span>
+            <IconComponent name="ScrollText" className="mr-2 h-4 w-4 " />
+          </div>
+          <div className="flex h-fit w-32 items-center"></div>
+        </div>
+      </BaseModal.Header>
+      <BaseModal.Content>
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className={
+            "text-center; inset-0 m-0 mb-2 flex flex-col self-center overflow-hidden rounded-md border bg-muted pb-1"
+          }
+        >
+          <TabsList>
+            <TabsTrigger value={"Executions"}>Executions</TabsTrigger>
+            <TabsTrigger value={"Messages"}>Messages</TabsTrigger>
+          </TabsList>
+        </Tabs>
+        <TableComponent
+          readOnlyEdit
+          className="h-max-full h-full w-full"
+          pagination={rows.length === 0 ? false : true}
+          columnDefs={columns}
+          autoSizeStrategy={{ type: "fitGridWidth" }}
+          rowData={rows}
+          headerHeight={rows.length === 0 ? 0 : undefined}
+        ></TableComponent>
+      </BaseModal.Content>
+    </BaseModal>
+  );
+}