This change fixes a bug where the validationStatus state was not being set to null when relevantData was null. This caused the validationStatus to retain its previous value, which could lead to incorrect validation results being displayed.
The import for the postBuild function was removed as it was not being used in the BuildTrigger component. This improves the code's readability and maintainability.
🚀 feat(chatComponent): add useEffect hook to fetch build status and update state
An async function was added to fetch the build status of the flow and update the state of the isBuilt variable. This allows the component to display the correct state of the build trigger button.
👌 refactor(chatComponent): refactor useEffect hook to update isBuilt state when nodes change
The useEffect hook was refactored to update the isBuilt state when the nodes change. This ensures that the build trigger button is disabled when the nodes change, as the flow needs to be rebuilt before it can be triggered again.
🔥 chore(intComponent): remove console.log statement
The console.log statement was removed from the onKeyDown event listener in the IntComponent component. This improves the code's cleanliness and readability.
The BuildStatusTypeAPI was added to the API types to support the new getBuildStatus function. The getBuildStatus function retrieves the build status of a flow by making a GET request to the server. This function is useful for updating the UI with the current status of a flow.
The getWebSocketUrl function was extracted to improve the readability and maintainability of the code. It takes the chatId and isDevelopment flag as parameters and returns the WebSocket URL based on the current environment. The function uses the window.location object to determine the protocol and host, and the chatEndpoint to construct the URL.
🚀 feat(buildTrigger): add waiting for stream to finish and return validation results for each node
The allNodesValid variable has been changed to a validationResults array to store the validation results for each node. A finished variable has been added to improve readability and to wait for the stream to finish. The function now returns an array of validation results for each node.
The commented out code for the /build/{client_id} endpoint has been removed as it is no longer needed. The new implementation uses the /build/init endpoint to initiate the build process and then establishes an SSE connection using EventSource to stream the build process. This allows for a more efficient and responsive build process as the client can receive updates in real-time.
🔥 chore(chat.py, index.tsx): remove commented out code for /build/{client_id} endpoint
🐛 fix(chatComponent): fix issue with progressEvent not being properly destructured
🚀 feat(chatComponent): add minimum loading time to improve user experience
The handleBuild function was refactored to use async/await and constants were extracted to improve readability. The issue with progressEvent not being properly destructured was fixed. A minimum loading time was added to improve user experience by ensuring that the loading spinner is displayed for at least a certain amount of time.
The console.log statements were commented out in the tabsContext.tsx, EditNodeModal/index.tsx, NodeToolbarComponent/index.tsx, and FlowPage/index.tsx files to remove unnecessary logging in the console.
The handleBuild function has been refactored to process data in chunks instead of waiting for the entire response to be received. This improves the performance of the function and allows for real-time updates. The SSE context has been added to update the data in real-time as it is received.
🔨 refactor(chatComponent): refactor handleBuild function to process data in chunks
🎉 feat(SSEContext.tsx): add SSEContext and SSEProvider components to handle server-sent events
The SSEProvider component was added to the App component to provide the SSEContext to the TabsManagerComponent. The SSEContext component was also added to handle server-sent events. The SSEContext component provides a way to update the sseData state and to access the sseData state from any component that uses the useSSE hook.
The console.log statements were commented out in the following files:
- src/frontend/src/components/intComponent/index.tsx
- src/frontend/src/contexts/tabsContext.tsx
- src/frontend/src/modals/EditNodeModal/index.tsx
- src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
- src/frontend/src/pages/FlowPage/index.tsx
The console.log statements were not necessary and were removed to reduce noise in the console.
The validate route was updated to use a regex pattern instead of a string pattern to match all routes that start with "/api/v1/validate/". This change ensures that all routes that match the pattern are correctly routed to the validate endpoint.
✨ feat(chatComponent): add loading animation to build trigger component
The BuildTrigger component is added to the chatComponent to allow users to build a flow. The component is triggered by clicking on a button and sends a POST request to the server to build the flow. A loading animation is added to the component to indicate that the flow is being built. The postBuild function is added to the API controller to handle the POST request.
✨ feat(chatComponent): add BuildTrigger component to check if flow is built before showing ChatTrigger component
The ChatTrigger component now checks if the flow is built before allowing the user to open the chat. If the flow is not built, an error message is displayed instead. The BuildTrigger component is added to check if the flow is built before showing the ChatTrigger component. This improves the user experience by preventing the user from opening the chat before the flow is built.
✨ feat(App.tsx): add getVersion function to retrieve app version from API
The fetch call to retrieve the app version has been replaced with a call to the getVersion function. This function retrieves the app version from the API. This change improves the code's readability and reduces the amount of code needed to retrieve the app version.
🐛 fix(GenericNode/index.tsx): replace fetch call with postValidateNode function call to validate node
✨ feat(GenericNode/index.tsx): add postValidateNode function to validate node via API
The fetch call to validate the node has been replaced with a call to the postValidateNode function. This function validates the node via the API. This change improves the code's readability and reduces the amount of code needed to validate the node.
🐛 fix(codeAreaModal/index.tsx): replace checkCode function call with postValidateCode function call to validate code
✨ feat(codeAreaModal/index.tsx): add postValidateCode function to validate code via API
The checkCode function call to validate the code has been replaced with a call to the postValidateCode function. This function validates the code via the API. This change improves the code's readability and reduces the amount of code needed to validate the code.
✨ feat(API): add getVersion function to retrieve the version of the API
The API routes have been updated to include the /api/v1/ prefix to improve semantics and avoid conflicts with other routes. The getVersion function has been added to retrieve the version of the API.
✨ feat(ApiModal): use getPythonApiCode and getCurlCode functions to generate python and curl code
✨ feat(cardComponent): add RenameLabel component to allow renaming of flow name and description
🐛 fix(cardComponent): fix CardDescription height to prevent overflow
The getPythonApiCode, getCurlCode, and getPythonCode functions were refactored into separate functions to improve code readability and maintainability. The ApiModal component now uses the getPythonApiCode and getCurlCode functions to generate the python and curl code. The CardComponent now has a RenameLabel component that allows renaming of the flow name and description. The CardDescription height was also fixed to prevent overflow.
💄 style(cardComponent): update layout of card footer and remove unused code
The background color of the card component has been updated to a lighter shade of blue. The icons used for editing and deleting a flow have been updated to use the Lucide icon library. The layout of the card footer has been updated to align the content to the right and remove unused code.
✨ feat(menuBar): add support for custom emoji and color for each flow
This commit replaces the heroicons with lucide-react icons to improve the consistency of the icon set used in the application. The code has also been refactored to improve readability. Additionally, support for custom emoji and color for each flow has been added to improve the user experience.
The flowName prop has been changed to a flow object to improve semantics and make the code more readable. The cURL code snippet has been added to the API modal to provide an alternative way to interact with the API.
🔨 refactor(ApiModal): change flowName prop to flow object to improve semantics
The tabs trigger border radius has been changed from rounded-sm to rounded-lg to improve the appearance of the tabs. Try-catch blocks have been added to handle errors when processing flow data to prevent the application from breaking. A new function, saveFlowToDatabase, has been added to save new flows to the database. This function is called when a new flow is created, and the ID counter is incremented after the flow is saved. The new flow is then added to the list of flows, and the tab index is set to the new flow.
🎨 style(ui/tabs.tsx): change tabs trigger border radius from rounded-sm to rounded-lg
🔨 refactor(MainPage): remove handleSaveFlow prop from MenuBar component
🔨 refactor(MainPage): export MenuBar component as named export
The axios library is replaced with the fetch API for the getVersion and getHealth functions to reduce the bundle size and improve performance. The handleSaveFlow prop is removed from the MenuBar component as it is not used. The MenuBar component is now exported as a named export to improve code readability and maintainability.
The fetch URL was incorrect and was calling the API with an absolute path instead of a relative path. This caused the API call to fail. The URL has been changed to a relative path to fix the issue.
The new component MenuBar was created to handle the menu bar in the MainPage. It contains all the logic and UI elements related to the menu bar. The component receives props such as activeTab, setRename, rename, flows, tabIndex, and handleSaveFlow. The handleSaveFlow function was moved from the MainPage component to the MenuBar component. The code related to the menu bar was removed from the MainPage component and replaced by the MenuBar component.
🚀 feat(API/index.ts): add getVersion function to fetch API version
🚀 feat(cardComponent/index.tsx): add CardComponent to display flow data
🚀 feat(types/flow/index.ts): add FlowStyleType to represent flow styles
The getVersion function was added to fetch the version of the API. The CardComponent was added to display flow data. The FlowStyleType was added to represent flow styles.
✨ feat(vite.config.ts): add rewrite function to proxy configuration to add /api/v1 prefix to requests
The /api/v1 prefix was removed from the proxy target URL as it was already being added by the rewrite function. The rewrite function was added to the proxy configuration to add the /api/v1 prefix to requests, which is required by the backend API.
Fixes#458
✨ feat(MainPage): add error handling for adding and updating flows
🔨 refactor(MainPage): extract handleAddFlow and handleSave functions to improve readability
The FlowType now has an optional style property that can be used to style the flow card with an emoji and a color. The CardComponent now supports this feature. The MainPage now has error handling for adding and updating flows. The handleAddFlow and handleSave functions were extracted to improve readability.
The new routes added to the apiRoutes array are "/flows_styles", "/flows_styles/" and "/flows_styles/*". These routes were added to allow the frontend to fetch the styles for the flows.
