Commit graph

48 commits

Author SHA1 Message Date
Cristhian Zanforlin Lousa
2a95b52e06
perf: Optimize component with memoization and selective store subscriptions (#5296)
*  (NodeOutputfield/index.tsx): Introduce memoization for IconComponent, Button components, and OutputComponent for performance optimization
🔧 (NodeOutputfield/index.tsx): Change the import of 'useEffect' to 'useCallback' for better performance and to prevent unnecessary re-renders
🔧 (NodeOutputfield/index.tsx): Refactor the 'NodeOutputField' component to use useMemo for selective store subscriptions and computed values to improve performance and avoid unnecessary recalculations
🔧 (NodeOutputfield/index.tsx): Refactor the 'handleUpdateOutputHide' function to use useCallback for better performance and to prevent unnecessary re-renders
🔧 (NodeOutputfield/index.tsx): Refactor the 'useEffect' hook to include dependencies and prevent unnecessary re-renders
🔧 (NodeOutputfield/index.tsx): Refactor the 'Handle' component to use useMemo for memoization and performance optimization

 (NodeOutputfield/index.tsx): Refactor NodeOutputField component to improve readability and maintainability by extracting button and tooltip components into separate reusable components, and optimizing the structure of the output field rendering.

📝 (RenderInputParameters/index.tsx): Move sortToolModeFields import to the top of the file for better organization and readability.

 (GenericNode/index.tsx): Introduce memoization to optimize rendering performance by memoizing components and values
🔧 (GenericNode/index.tsx): Add useCallback to handleUpdateCode and handleUpdateCodeWShortcut functions for better performance and prevent unnecessary re-renders

📝 (GenericNode/index.tsx): Refactor code to use useEffect and useCallback hooks for better performance and readability
📝 (GenericNode/index.tsx): Refactor code to improve component structure and readability by extracting repeated logic into separate functions using useCallback
📝 (GenericNode/index.tsx): Refactor code to optimize rendering logic and improve maintainability by using memoization with React.memo

 (sort-tool-mode-field.ts): introduce a new helper function sortToolModeFields to sort fields based on tool mode status and field order array

* 📝 (NodeOutputfield/index.tsx): add missing newline before ShadTooltip component for better code readability

 (handleRenderComponent/index.tsx): Add memoization to HandleContent component for performance optimization
♻️ (handleRenderComponent/index.tsx): Refactor HandleContent component to use useCallback and useMemo hooks for better code readability and maintainability

🔧 (handleRenderComponent/index.tsx): Refactor code to improve readability and maintainability by updating function signatures, using hooks more efficiently, and organizing code structure.

 (file.ts): refactor handleMouseDown function to use useCallback hook for better performance and memoization
♻️ (file.ts): refactor handleClick function to use useCallback hook for better performance and memoization

♻️ (handleRenderComponent/index.tsx): Refactor handleRenderComponent to improve code readability and maintainability by extracting callback functions into separate useCallback hooks and using memoization for validation function.

* improve memo in several components

*  (handleRenderComponent/index.tsx): add data-testid attribute to handle element for improved testing and accessibility

*  (toolbar-button.tsx): add data-testid prop to ToolbarButton component for better testing capabilities
📝 (index.tsx): add data-testid attribute to various ToolbarButton components for better testability

*  (NodeOutputfield/index.tsx): Add onClick event handler to the InspectButton component to trigger a function when the button is clicked.

*  (freeze.spec.ts): add test case for clicking on "Close" button in the modal to ensure proper functionality

* 📝 (nodeToolbarComponent/index.tsx): remove unnecessary dataTestId attribute from freeze-path-button to clean up code and improve readability

* 🐛 (GenericNode/index.tsx): Fix potential error when outputs is null or undefined by adding optional chaining
🐛 (auto-save-off.spec.ts): Update selector for "Saved" text to target the last occurrence
🐛 (auto-save-off.spec.ts): Update selector for "Unsaved changes will be permanently lost." text to handle dynamic rendering
🐛 (auto-save-off.spec.ts): Update selector for "NVIDIA" text to ensure it is not visible
🐛 (auto-save-off.spec.ts): Update drag and drop logic for NVIDIA model to ensure correct behavior
🐛 (auto-save-off.spec.ts): Update hover logic and add component button handling for NVIDIA model to ensure correct behavior

*  (parameterRenderComponent/index.tsx): Refactor ParameterRenderComponent to improve performance by memoizing components and props, and using useCallback and useMemo for better optimization.

📝 (ui/disclosure.tsx): Update imports and add new React hooks for better code organization and performance
📝 (ui/disclosure.tsx): Refactor DisclosureProvider component to use useCallback and useMemo for better performance
📝 (ui/disclosure.tsx): Refactor DisclosureTrigger component to use useCallback and useMemo for better performance
📝 (ui/disclosure.tsx): Refactor DisclosureContent component to use useCallback and useMemo for better performance
📝 (ui/disclosure.tsx): Refactor Disclosure component to use memo for better performance
📝 (ui/disclosure.tsx): Refactor DisclosureTrigger component to use memo for better performance
📝 (ui/disclosure.tsx): Refactor DisclosureContent component to use memo for better performance
📝 (ui/disclosure.tsx): Refactor DisclosureProvider component to use memo for better performance
📝 (nodeToolbarComponent/index.tsx): Refactor NodeToolbarComponent to use useCallback and useMemo for better performance

*  (use-handle-new-value.tsx): Memoize postTemplateValue and updateNodeState functions to prevent unnecessary re-renders and improve performance
📝 (use-handle-new-value.tsx): Memoize handleOnNewValue function to optimize performance by preventing unnecessary re-renders and improve code readability

---------

Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
2024-12-17 14:05:13 +00:00
Cristhian Zanforlin Lousa
ab68e13493
test: Add utility functions to streamline test setup and improve maintainability (#5168)
* change tests to use utils libs

* 🔧 (frontend): add data-testid attribute to buttons in baseModal and secretKeyModal components
🔧 (frontend): add data-testid attribute to buttons in various test files for improved testing
🔧 (frontend): refactor awaitBootstrapTest function to remove skipNewFlow option and improve modal handling

*  (userSettings.spec.ts): add a 1-second timeout before checking for the "Please save" text to ensure it is rendered on the page before interacting with it

*  (userSettings.spec.ts): add comment to clarify waiting for API key creation to complete before proceeding to the next form element

*  (freeze-path.spec.ts): refactor adjustScreenView function to accept a parameter for the number of zoom outs to perform, improving flexibility and reusability in test scenarios.
🔧 (freeze-path.spec.ts): replace adjustScreenView function with initialGPTsetup function for setting up initial GPT configuration in the test scenario.
2024-12-09 20:30:56 +00:00
Cristhian Zanforlin Lousa
5407cad728
feature: Update HandleTooltipComponent text from "Select" to "Click" for better clarity (#5004) 2024-12-04 09:46:58 +00:00
Lucas Oliveira
79e3d3f50d
fix: removed beta from current date (#4901)
* Removed beta from current date

* [autofix.ci] apply automated fixes

* refactor: improve error message handling in CloudflareWorkersAIEmbeddings

* Fix filter sidebar test

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
2024-11-28 09:02:15 -08:00
Cristhian Zanforlin Lousa
989cefd0ac
tests: organize playwright tests by feature suites and optimize CI runtime (#4687)
* starting realocating components FE

* tagging tests

* 📝 (.github/workflows/typescript_test.yml): remove unnecessary comment before the Playwright test execution step to improve readability and maintainability

* 📝 (.github/changes-filter.yaml): Update paths in changes-filter.yaml to categorize different sections of the project for testing purposes
🔧 (.github/workflows/typescript_test.yml): Refactor workflow to use paths-filter action for determining test suites based on changes in different project sections

*  (changes-filter.yaml): reorganize and update paths for test categories, starter projects, components, workspace, api, and database
 (components): add new components for GradientWrapper, pageLayout, and paginatorComponent
🔧 (MainPage): update import path for PageLayout component
🔧 (SettingsPage): update import path for PageLayout component
🔧 (StorePage): update import path for PageLayout component

*  (frontend): Update import paths for components to use common directory instead of core directory for better organization and consistency
🔧 (frontend): Remove duplicate import of PaginatorComponent in various files and import it from the common directory to reduce redundancy and improve maintainability

* 🔧 (changes-filter.yaml): remove unnecessary release section from changes-filter.yaml
🔧 (typescript_test.yml): refactor workflow to support input suites and release flag for test runs

* 📝 (changes-filter.yaml): remove unnecessary entries from components section and add missing entries to workspace section for better organization and filtering of changes
🔧 (changes-filter.yaml): update changes-filter.yaml to include missing utils files in the frontend/src/utils directory
🔧 (typescript_test.yml): remove redundant code block that sets SUITES variable to default values as it is no longer needed due to changes in the changes-filter.yaml file

*  (actionsMainPage-shard-1.spec.ts): Update test tags to remove unnecessary tags for better organization and clarity
📝 (store-shard-2.spec.ts): Update test tags to remove unnecessary tags for better organization and clarity
📝 (generalBugs-shard-4.spec.ts): Update test tags to remove unnecessary tags for better organization and clarity
📝 (generalBugs-shard-9.spec.ts): Update test tags to remove unnecessary tags for better organization and clarity
📝 (deleteComponents.spec.ts): Update test tags to remove unnecessary tags for better organization and clarity
📝 (deleteFlows.spec.ts): Update test tags to remove unnecessary tags for better organization and clarity

 (dragAndDrop.spec.ts): Refactor drag and drop test to improve readability and maintainability
 (flowPage.spec.ts): Refactor save test in Flow Page to improve readability and maintainability
 (store-shard-0.spec.ts): Refactor Store test to improve readability and maintainability
 (store-shard-1.spec.ts): Refactor Store test to improve readability and maintainability

 (store-shard-3.spec.ts): Remove unnecessary tags from test descriptions to improve clarity and consistency
 (userSettings.spec.ts): Remove unnecessary tags from test descriptions to improve clarity and consistency
 (general-bugs-shard-3909.spec.ts): Remove unnecessary tags from test descriptions to improve clarity and consistency

📝 (frontend): Update test tags in regression tests to remove unnecessary tags for better organization and clarity
📝 (frontend): Update test file paths in tsconfig.json to match the new file structure for consistency and maintainability

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes

* Update paths-filter action to v3 and adjust filter configuration file

* Add logging to matrix setup in TypeScript test workflow

* Refactor decisionFlow.spec.ts to improve test setup and execution flow

* Refactor import paths for genericIconComponent and shadTooltipComponent in PlaygroundButton component

* feat: add release input to CI workflows for enhanced deployment control

* Fix: Correct 'release' input type in CI workflow configuration

* [autofix.ci] apply automated fixes

* Refactor Blog Writer test: streamline setup and interaction steps

* Refactor test cases to improve modal handling and streamline API key input logic

* Add test grep pattern to GitHub Actions workflow for targeted test execution

- Introduced `test_grep` output in the `determine-test-suite` job to generate a grep pattern based on changed files or input suites.
- Updated Playwright test execution to use the generated grep pattern, allowing for more targeted test runs.
- Enhanced the `Set Matrix` step to include tag processing for test filtering.

* Enhance tag filtering in test workflow with regex lookaheads

* Fix syntax for default suite input in GitHub Actions workflow

* Update GitHub Actions to handle empty suite input for release builds

* Escape regex lookaheads and quotes for GitHub Actions in test workflow

* Update regex pattern and quote escaping in TypeScript test workflow

* Use single quotes for echo command in GitHub Actions script

* Refactor tag handling in GitHub Actions to use OR logic for grep patterns

* 🔧 (FlowPage/index.tsx): Remove unnecessary empty line to improve code readability and consistency

* 📝 (FlowPage/index.tsx): add missing line break for better code readability

* Refactor import path and reorder CSS classes for consistency in UpdateAllComponents component

* [autofix.ci] apply automated fixes

* Update import path for PaginatorComponent in AdminPage index.tsx

*  (logs.spec.ts): introduce a new variable 'modalCount' to keep track of the number of modals opened in the test suite

* 📝 (filterSidebar.spec.ts): remove unnecessary test steps related to filter removal and sidebar interactions to simplify and improve test focus on main functionality

*  (logs.spec.ts): add tests to ensure proper interaction with logs feature in the frontend application

*  (similarity.spec.ts): add a test tag for release and components to categorize the test case
💡 (similarity.spec.ts): add a comment to explain the purpose of the test case and the condition for skipping the test

*  (decisionFlow.spec.ts): add missing newline before async function declaration to improve code readability

*  (textInputOutput.spec.ts): skip the test for TextInputOutputComponent to exclude it from the test suite temporarily

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2024-11-25 20:55:03 +00:00
anovazzi1
efca9f9aeb
refactor: Improve componentHoverAdd.spec test (#4608) 2024-11-22 00:14:45 -03:00
anovazzi1
20f26a9ccf
fix: Improve waiting logic in tweksTest.spec.ts (#4674)
Improve the waiting logic in the tweksTest.spec.ts file to ensure that the necessary elements are loaded before interacting with them. This includes using the waitForSelector function with appropriate timeouts for the modal and popover elements.
2024-11-22 02:03:51 +00:00
Cristhian Zanforlin Lousa
226453a606
refactor: Replace InputComponent with Select dropdown (#4719)
* 🔧 (nodeToolbarComponent/index.tsx): improve positioning logic for node toolbar based on scale and tool mode to enhance user experience

*  (GlobalVariableModal.tsx): Refactor type selection in GlobalVariableModal to use a dropdown select component for better user experience and consistency.

* Revert "🔧 (nodeToolbarComponent/index.tsx): improve positioning logic for node toolbar based on scale and tool mode to enhance user experience"

This reverts commit 322ba353a6984fcf870cba8c82c26689381842da.

*  (GlobalVariableModal.tsx): Add data-testid attribute to SelectTrigger for testing purposes
🔧 (globalVariables.spec.ts, userSettings.spec.ts): Update test scripts to interact with the SelectTrigger using data-testid attribute for consistency and improved testing accuracy

* 📝 (userSettings.spec.ts): remove commented out code for focusElementsOnBoard function to improve code readability and maintainability
2024-11-21 16:45:01 -08:00
anovazzi1
6737368073
fix: Improve wait time in saveComponents.spec.ts (#4673)
Improve the wait time in the saveComponents.spec.ts file to ensure that the necessary elements are loaded before interacting with them. This helps prevent potential errors and improves the reliability of the test.
2024-11-21 16:40:39 -08:00
anovazzi1
8ebe1086d2
refactor: improve freeze-path.spec.ts and freeze.spec.ts files (#4618)
* refactor: Improve time and use waitForSelector in freeze-path.spec.ts

* refactor: Improve time and use waitForSelector in freeze-path.spec.ts

* fromat code

* Refactor freeze.spec.ts: Remove unnecessary code
2024-11-21 16:46:44 -03:00
anovazzi1
ebe4f3470c
refactor: Improve time and use waitForSelector in globalVariables.spec.ts (#4619) 2024-11-19 14:04:08 -08:00
Lucas Oliveira
c9e0d5e4ba
fix: updated node toolbar to be more stable on zoom, fix success and error component tooltips, unselect nodes on flow opening (#4610)
* Unselect nodes and edges on enter

* Start with viewport fit

* Fix run component tooltip to match error and success

* Update scrollbar design

* Added node toolbar without portal to match the width of the node

* Updated color of scrollbar

* Updated NoteNode to have same behavior as GenericNode

* Updated logic for tests to pass

* Fix fitview to only occur when nodes are present

* Update z index of resize handle

* Sticky notes test fix

* [autofix.ci] apply automated fixes

* freeze test fixed

---------

Co-authored-by: Mike Fortman <michael.fortman@datastax.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
2024-11-19 13:54:49 -08:00
anovazzi1
e6cd335b1c
refactor: time and use waitForSelector in filterSidebar.spec.ts (#4609)
* refactor: Improve time and use waitForSelector in filterSidebar.spec.ts

* refactor: Improve time and use waitForSelector in filterSidebar.spec.ts
2024-11-18 17:08:26 -08:00
anovazzi1
4965971901
refactor: Improve performance in logs.spec.ts and format code (#4671)
* improve performance in logs

* format code
2024-11-18 17:08:04 -08:00
anovazzi1
cd2517f7e2
refactor: improve tests for group and keyBoardComponentSearch tests (#4621)
* refactor: Remove unnecessary wait in group.spec.ts

* refactor: Improve keyboard component search tests

Improve the keyboard component search tests by using waitForSelector instead of waitForTimeout for better reliability and stability.
2024-11-18 14:09:24 -08:00
anovazzi1
a0cd179258
refactor: Improve time and use waitForSelector in folder tests (#4614)
* refactor: Improve time and use waitForSelector in folder tests

* add comment for documentation

* Refactor componentHoverAdd test to use opacity check instead of exact value
2024-11-18 13:03:06 -08:00
anovazzi1
0461baf10a
refactor: Improve time and use waitForSelector instead of timeouts in main page tests (#4601)
* improve test time

* exchange timout for wait for selector

* fix: improve wait time for modals in search components test

* update timer limit
2024-11-14 19:38:41 +00:00
anovazzi1
076bc314ed
refactor: Remove unnecessary wait timeouts in chat components tests (#4605)
* refactor: Remove unnecessary wait timeouts in chatInputOutputUser-shard-0.spec.ts

* update timer limit
2024-11-14 19:20:47 +00:00
anovazzi1
349a1fe284
refactor: Improve time and use waitForSelector in auto-login tests (#4603)
* improve usage of waitForSelector

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2024-11-14 08:56:33 -08:00
Cristhian Zanforlin Lousa
4e2ee25da8
test: Enhance test stability (#4566)
* 🐛 (genericIconComponent/index.tsx): fix optional chaining for split and map functions to prevent errors
🐛 (actionsMainPage-shard-1.spec.ts): remove redundant zoom_out click
🐛 (auto-login-off.spec.ts): reduce wait time from 2000ms to 1000ms
🐛 (freeze-path.spec.ts): change click target from "openai" to "OpenAI" for consistency
🐛 (freeze.spec.ts): change click target from "Split Text" to "Split Text" for consistency
🐛 (Dynamic Agent.spec.ts): skip test execution
🐛 (Hierarchical Agent.spec.ts): skip test execution
🐛 (Sequential Task Agent.spec.ts): skip test execution
🐛 (Simple Agent.spec.ts): skip test execution
🐛 (decisionFlow.spec.ts): change search input from "conditional router" to "if else"
🐛 (similarity.spec.ts): change search input from "openai" to "openai embedding"
🐛 (fileUploadComponent.spec.ts): enable test for file upload functionality

📝 (deleteComponents.spec.ts): Remove commented out code and enable test for deleting a component
📝 (deleteFlows.spec.ts): Enable test for deleting a flow
📝 (starter-projects.spec.ts): Enable test for interacting with starter projects
📝 (store-shard-3.spec.ts): Enable tests for ordering visualization and filtering by type
📝 (generalBugs-shard-13.spec.ts): Enable test for sharing a component on the store

* ⬆️ (typescript_test.yml): update matrix configuration to run tests on multiple shards for better parallelization
🔧 (typescript_test.yml): enable playwright test execution with shard index and total for parallel test execution

* 🐛 (genericIconComponent/index.tsx): fix optional chaining for split and map functions to prevent errors
🐛 (actionsMainPage-shard-1.spec.ts): remove redundant zoom_out click
🐛 (auto-login-off.spec.ts): reduce wait time from 2000ms to 1000ms
🐛 (freeze-path.spec.ts): change click target from "openai" to "OpenAI" for consistency
🐛 (freeze.spec.ts): change click target from "Split Text" to "Split Text" for consistency
🐛 (Dynamic Agent.spec.ts): skip test execution
🐛 (Hierarchical Agent.spec.ts): skip test execution
🐛 (Sequential Task Agent.spec.ts): skip test execution
🐛 (Simple Agent.spec.ts): skip test execution
🐛 (decisionFlow.spec.ts): change search input from "conditional router" to "if else"
🐛 (similarity.spec.ts): change search input from "openai" to "openai embedding"
🐛 (fileUploadComponent.spec.ts): enable test for file upload functionality

📝 (deleteComponents.spec.ts): Remove commented out code and enable test for deleting a component
📝 (deleteFlows.spec.ts): Enable test for deleting a flow
📝 (starter-projects.spec.ts): Enable test for interacting with starter projects
📝 (store-shard-3.spec.ts): Enable tests for ordering visualization and filtering by type
📝 (generalBugs-shard-13.spec.ts): Enable test for sharing a component on the store

* ⬆️ (typescript_test.yml): update matrix configuration to run tests on multiple shards for better parallelization
🔧 (typescript_test.yml): enable playwright test execution with shard index and total for parallel test execution

* 🐛 (Travel Planning Agent.spec.ts): Fix issue with setting API keys for OpenAI models and Search API
🐛 (Travel Planning Agent.spec.ts): Fix issue with clicking the wrong button for running chat output
🐛 (Travel Planning Agent.spec.ts): Fix issue with checking rate limit and skipping test logic
🐛 (Travel Planning Agent.spec.ts): Fix issue with checking output text for lowercase city names
🐛 (Vector Store.spec.ts): Fix issue with clicking the wrong button for creating a new flow
🐛 (Vector Store.spec.ts): Fix issue with filling the wrong input field for collection name in Vector Store RAG test

* 🔧 (generalBugs-shard-4.spec.ts): skip test case temporarily due to functionality not working with uplift designs

* Update test to use 'message history' instead of 'chat memory' in sidebar search input

* Update test selectors and expected values in dropdownComponent.spec.ts

* 📝 (Simple Agent.spec.ts): Remove unnecessary test.skip and commented out code
📝 (dropdownComponent.spec.ts): Update dropdown selection to match new text
📝 (starter-projects.spec.ts): Remove unused template IDs
📝 (store-shard-1.spec.ts): Update test.skip to test.skip for consistency
📝 (generalBugs-shard-10.spec.ts): Refactor test cases for promptText and newPromptText
📝 (generalBugs-shard-6.spec.ts): Add delay before interacting with elements to ensure stability

* Refactor tests to use `ControlOrMeta` for cross-platform keyboard shortcuts

*  (Simple Agent.spec.ts): update timeout value for waitForSelector to improve test reliability and prevent false negatives

* Handle undefined stars in GithubStarComponent to prevent errors

* Add waitForSelector to ensure sidebar search input is visible before interaction in chatInputOutput test

*  (Simple Agent.spec.ts): update timeout value to 5 minutes for "built successfully" message to allow for longer build times
 (Simple Agent.spec.ts): add additional test cases to check for the presence of "apple" in chat messages and ensure the total length of chat messages is greater than 100 characters

* 🐛 (Simple Agent.spec.ts): reduce timeout for "built successfully" text to improve test efficiency

*  (auto-login-off.spec.ts): add delay before checking visibility of elements to ensure proper rendering and improve test reliability

* Fix indentation in TypeScript test workflow file

* Update test IDs and expected values in dropdownComponent.spec.ts

* 📝 (playground.spec.ts): remove redundant code related to zooming out and dragging elements in the playground test
📝 (deleteComponents.spec.ts): update selectors for clicking buttons and elements in the deleteComponents test
📝 (deleteFlows.spec.ts): update selectors for clicking buttons and elements in the deleteFlows test
📝 (starter-projects.spec.ts): update selectors for starter projects in the extended features test to match changes in the application's UI.

*  (playground.spec.ts): remove skip from the test case to enable it to run during testing.

* Refactor timeout in playground test for better stability

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>
2024-11-13 18:11:51 +00:00
Cristhian Zanforlin Lousa
654d4815dc
refactor: standardize toolbar select item widths and improve alignment (#4539)
* 📝 (select-custom.tsx): Update styling in SelectItem component to improve consistency and readability
📝 (nodeToolbarComponent/index.tsx): Refactor SelectItem components to include consistent width styling for better alignment and visual appeal

*  (nodeToolbarComponent/index.tsx): Center align select items by adding 'm-auto' class to improve visual presentation.

*  (GenericNode/index.tsx): Add functionality to toggle show more options in GenericNode component
🔧 (nodeToolbarComponent/index.tsx): Pass setOpenShowMoreOptions function to toggle show more options in NodeToolbarComponent
📝 (components/index.ts): Update nodeToolbarPropsType to include setOpenShowMoreOptions function for better type checking

*  (nodeToolbarComponent/index.tsx): Update styles and dimensions for better UI consistency and alignment in the Node Toolbar Component.

* 🔧 (nodeToolbarComponent/index.tsx): Remove unnecessary 'm-auto' class from SelectItem components to improve code readability and reduce redundancy.

* 📝 (select-custom.tsx): Update styling in SelectItem component to improve consistency and readability
📝 (nodeToolbarComponent/index.tsx): Refactor SelectItem components to include consistent width styling for better alignment and visual appeal

*  (nodeToolbarComponent/index.tsx): Center align select items by adding 'm-auto' class to improve visual presentation.

*  (GenericNode/index.tsx): Add functionality to toggle show more options in GenericNode component
🔧 (nodeToolbarComponent/index.tsx): Pass setOpenShowMoreOptions function to toggle show more options in NodeToolbarComponent
📝 (components/index.ts): Update nodeToolbarPropsType to include setOpenShowMoreOptions function for better type checking

*  (nodeToolbarComponent/index.tsx): Update styles and dimensions for better UI consistency and alignment in the Node Toolbar Component.

* 🔧 (nodeToolbarComponent/index.tsx): Remove unnecessary 'm-auto' class from SelectItem components to improve code readability and reduce redundancy.

*  (actionsMainPage-shard-1.spec.ts): Update test descriptions to use "Document Q&A" instead of "Document QA" for consistency
📝 (Basic Prompting.spec.ts, Blog Writer.spec.ts, Document QA.spec.ts, Dynamic Agent.spec.ts, Hierarchical Agent.spec.ts, Memory Chatbot.spec.ts, Sequential Task Agent.spec.ts, Simple Agent.spec.ts, Travel Planning Agent.spec.ts, Vector Store.spec.ts): Remove 'skip' from test descriptions to enable running the tests.

* 🔧 (typescript_test.yml): Update shardIndex and shardTotal values to run tests on a single shard for simplicity
📝 (typescript_test.yml): Comment out unused test commands to improve readability and reduce confusion
 (starter-projects.spec.ts): Remove skip from test case to ensure it is executed as intended
2024-11-13 09:03:48 -03:00
Cristhian Zanforlin Lousa
8d89bf4ff4
refactor: reorganize memory components and enhance model inputs with improved documentation (#4529)
* new components improvements

*  (create_data.py): introduce a new 'legacy' attribute to mark the component as legacy code

* [autofix.ci] apply automated fixes

* chaing langchain hub name

* 📝 (run_flow.py): remove beta flag from RunFlowComponent to indicate it is no longer in beta
📝 (extract_key.py): remove beta flag from ExtractDataKeyComponent to indicate it is no longer in beta

* Updated generic icon component to load icons if already not lazy imported

* [autofix.ci] apply automated fixes

* merge fix

* 📝 (store_message.py): add 'advanced' parameter to the 'Session ID' field to indicate it is an advanced setting

* [autofix.ci] apply automated fixes

* new components sweep

* [autofix.ci] apply automated fixes

* fix tests

* [autofix.ci] apply automated fixes

*  (filterSidebar.spec.ts): Update test descriptions to reflect the correct component names for better clarity and maintainability
♻️ (freeze.spec.ts): Refactor test to use the correct component name for consistency and readability
♻️ (stop-building.spec.ts): Refactor test to use the correct component name for consistency and readability
♻️ (generalBugs-shard-9.spec.ts): Refactor test to use the correct component name for consistency and readability
♻️ (filterEdge-shard-1.spec.ts): Refactor test to use the correct component name for consistency and readability

* style: Improve YahooFinanceToolComponent description and code readability

Enhance clarity in the component's purpose and refine inline formatting to boost maintainability.

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
2024-11-12 20:19:24 -08:00
Cristhian Zanforlin Lousa
29e484465c
feat: Refactor langflow Components - Consolidate Imports, Remove Unused Components, and Update Astra Assistant Icons (#4460)
* fix lint

* fix lint

* [autofix.ci] apply automated fixes

* 📝 (message_to_data.py): refactor convert_message_to_data method to simplify code and improve readability
🔧 (conftest.py): update imports to organize them alphabetically for better code maintenance
🔧 (test_starter_projects.py): organize imports alphabetically for better code maintenance
🔧 (test_astra_component.py): organize imports alphabetically for better code maintenance
🔧 (test_parse_json_data.py): remove unnecessary whitespace for cleaner code
🔧 (test_chat_input.py): remove unnecessary whitespace for cleaner code
🔧 (test_text_input.py): remove unnecessary whitespace for cleaner code
🔧 (test_output_parser.py): remove unnecessary whitespace for cleaner code
🔧 (test_chat_output.py): remove unnecessary whitespace for cleaner code
🔧 (test_text_output.py): remove unnecessary whitespace for cleaner code
🔧 (test_prompt.py): remove unnecessary whitespace for cleaner code
🔧 (test_basic_prompting.py): remove unnecessary whitespace for cleaner code
🔧 (test_misc.py): remove unnecessary whitespace for cleaner code
🔧 (utils.py): remove unnecessary whitespace for cleaner code
🔧 (test_server_init.py): remove unnecessary whitespace for cleaner code
🔧 (test_endpoints.py): remove unnecessary whitespace for cleaner code
🔧 (test_component_toolkit.py): remove unnecessary whitespace for cleaner code
🔧 (test_agent_component.py): remove unnecessary whitespace for cleaner code
🔧 (test_agent_events.py): remove unnecessary whitespace for cleaner code
🔧 (test_tool_calling_agent.py): remove unnecessary whitespace for cleaner code
🔧 (test_structured_output_component.py): remove unnecessary whitespace for cleaner code
🔧 (test_chatollama_component.py): remove unnecessary whitespace for cleaner code

📝 (test_huggingface.py): Remove unnecessary import statement
📝 (test_create_data_component.py): Remove unnecessary import statement
📝 (test_update_data_component.py): Remove unnecessary import statement
📝 (test_componet_set_functionality.py): Remove unnecessary import statement
📝 (test_component.py): Remove unnecessary import statement
📝 (test_event_manager.py): Remove unnecessary import statement
📝 (test_edge_base.py): Remove unnecessary import statement
📝 (test_state_model.py): Remove unnecessary import statement
📝 (test_base.py): Remove unnecessary import statement
📝 (test_callback_graph.py): Remove unnecessary import statement
📝 (test_cycles.py): Remove unnecessary import statement
📝 (test_graph_state_model.py): Remove unnecessary import statement
📝 (test_runnable_vertices_manager.py): Remove unnecessary import statement
📝 (test_utils.py): Remove unnecessary import statement
📝 (test_graph.py): Remove unnecessary import statement
📝 (test_base_model_from_schema.py): Reorder import statements
📝 (test_memory_chatbot.py): Remove unnecessary import statement
📝 (test_vector_store_rag.py): Remove unnecessary import statement
📝 (test_inputs.py): Reorder import statements
📝 (test_io_schema.py): Remove unnecessary import statement
📝 (test_table_schema.py): Remove unnecessary import statement
📝 (test_schema_message.py): Remove unnecessary import statement
📝 (test_service.py): Reorder import statements
📝 (test_api_key.py): Remove unnecessary import statement
📝 (test_chat_endpoint.py): Remove unnecessary import statement
📝 (test_cli.py): Remove unnecessary import statement

📝 (test_custom_component.py): Add missing import statement in test_custom_component.py
📝 (test_custom_component_with_client.py): Add missing import statement in test_custom_component_with_client.py
📝 (test_data_class.py): Add missing import statement in test_data_class.py
📝 (test_data_components.py): Add missing import statement in test_data_components.py
📝 (test_database.py): Add missing import statement in test_database.py
📝 (test_endpoints.py): Add missing import statement in test_endpoints.py
📝 (test_files.py): Add missing import statement in test_files.py
📝 (test_frontend_nodes.py): Add missing import statement in test_frontend_nodes.py
📝 (test_initial_setup.py): Add missing import statement in test_initial_setup.py
📝 (test_kubernetes_secrets.py): Add missing import statement in test_kubernetes_secrets.py
📝 (test_logger.py): Add missing import statement in test_logger.py
📝 (test_login.py): Add missing import statement in test_login.py
📝 (test_messages.py): Add missing import statement in test_messages.py
📝 (test_messages_endpoints.py): Add missing import statement in test_messages_endpoints.py
📝 (test_schema.py): Add missing import statement in test_schema.py
📝 (test_telemetry.py): Add missing import statement in test_telemetry.py
📝 (test_template.py): Add missing import statement in test_template.py
📝 (test_user.py): Add missing import statement in test_user.py
📝 (test_validate_code.py): Add missing import statement in test_validate_code.py
📝 (test_connection_string_parser.py): Add missing import statement in test_connection_string_parser.py
📝 (test_format_directory_path.py): Add missing import statement in test_format_directory_path.py
📝 (test_rewrite_file_path.py): Add missing import statement in test_rewrite_file_path.py
📝 (test_truncate_long_strings.py): Add missing import statement in test_truncate_long_strings.py
📝 (test_truncate_long_strings_on_objects.py): Add missing import statement in test_truncate_long_strings_on_objects.py

* [autofix.ci] apply automated fixes

* formatting

* Update import paths for MemoryComponent and HuggingFaceEndpointsComponent

* fix tests

*  (decisionFlow.spec.ts): update test selectors to match changes in the application's UI for better test accuracy and reliability

* [autofix.ci] apply automated fixes

* ♻️ (test_output_parser.py): refactor import statements to improve code readability and maintainability

* fix tests

*  (Simple Agent.spec.ts): enable test for "Simple Agent" by removing the skip flag to ensure it runs properly

* [autofix.ci] apply automated fixes

* Remove optional type from 'num_news' field in YahooFinanceSchema

* Refactor JSON formatting for improved readability and maintainability across starter projects.

* adding icon to flows

* [autofix.ci] apply automated fixes

*  (similarity.spec.ts): update test selectors for filtering and connection nodes to match changes in the frontend implementation

* [autofix.ci] apply automated fixes

* removing init uncessary

* ⬆️ (pyproject.toml): upgrade crewai dependency to version 0.76.9 to include the latest features and bug fixes

*  (Simple Agent.spec.ts): update test assertion to check if the count of "print(" is greater than or equal to 1 for better test coverage.

* [autofix.ci] apply automated fixes

* proposed changes

* [autofix.ci] apply automated fixes

* add zep icon

* [autofix.ci] apply automated fixes

* 🔧 (model.py): remove unused import and method 'cast_vector_store' from LCVectorStoreComponent
🔧 (openai_tools.py): remove beta flag from OpenAIToolsAgentComponent
🔧 (tool_calling.py): remove beta flag from ToolCallingAgentComponent
🔧 (Vector Store RAG.json): remove 'cast_vector_store' method from starter projects
🔧 (styleUtils.ts): add missing icon 'WolframAlphaAPI' to nodeIconsLucide in styleUtils module

* add langwatch and mem0 icon

* change mem0 name to mem0ai

*  (filterSidebar.spec.ts): update test to use first() method to select the first element with the specified test ID
♻️ (filterSidebar.spec.ts): remove unnecessary code related to checking the checkbox state in the test
🔧 (generalBugs-shard-2.spec.ts): update test to select the correct element with the test ID "dataWebhook" instead of "dataWebhook Input"

* ♻️ (test_vector_store_rag.py): remove redundant code setting "vector_store" value in both ingestion_graph and rag_graph functions to improve code readability and maintainability

* [autofix.ci] apply automated fixes

* updating json test

* [autofix.ci] apply automated fixes

* ⬆️ (pyproject.toml): downgrade crewai dependency version from 0.76.9 to 0.74.2 to resolve compatibility issues

* 🐛 (generalBugs-shard-5.spec.ts): fix typo in test case for component name
🐛 (generalBugs-shard-9.spec.ts): update endX calculation to move 600 pixels to the right instead of 300
🐛 (generalBugs-shard-9.spec.ts): fix typo in test case for component name and update test steps to click "fit_view" button twice

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
2024-11-11 19:30:05 +00:00
Lucas Oliveira
a09652ca5f
fix: refactor loading of main page, use new Sidebar in main page, fix small UI bugs (#4451)
* Tighten space between main page sidebar buttons

* Fixed skeleton size

* Added playground button back

* Updated no components and flows state

* Update default icon to Workflow

* Fixed size of list cards

* Removed browse store

* Removed playground button

* Removed black background from empty folder state

* Update empty state color

* Fix color of empty state

* fix text not selectable

* updated border color

* added shadow only on hover

* Remove JSON from Download JSON

* Fixed colors and weight of tabs on home page

* Fixed padding on list and grid components

* Update icons that take long to load

* Fixed icon and bg color for home tiles

* Removed unused code

* removed placeholder data for skeleton to not appear on first load

* Make onSuccess refetch the queries so that the loading waits for it

* Removed unused divs on foldersidebarnav

* Refactor sidebar buttons to use new shadcn sidebar

* Created skeletons for folder, grid and list

* Added new sidebar size

* Use new sidebar button on header and implemented animation

* Changed icon to getIcon

* Added sidebar provider and fixed loading states of the main page

* Removed folder buttons on emptyPage

* Fixed foldername to appear immediatly, and fixed loading states for the folders

* Removed unused state from folders store

* Removed unused states from folders store type

* Added new icon

* fixed modals component to not show a trash icon

* Changed icons to load immediatly

* Added empty folder condition to not display header info

* Added conditions to show loading state until everything loads

* Created empty folder state

* Changed empty page to correct colors

* Added skeletons while flows of the folder are loading

* Removed shadow from text

* Fixed font chivo taking long time to load

* Fix adding new folder not redirecting

* [autofix.ci] apply automated fixes

* Fixed colors and paddings on list and grid components

* Re added tooltips to upload and create folders

* fix input for name editing

* Fix tests

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2024-11-08 17:33:52 +00:00
Lucas Oliveira
6761df6110
fix: update nav bar UI, changed user menu to use shadcn dropdown, fix responsivity issues (#4454)
* Updated saved color

* Removed selection from header /

* hide text from 1200px

* Updated github star style

* Fixed hover state on account menu

* Fix misalignment of store

* Changed user menu to use dropdown menu from shadcn

* Fixed notification dot

* Change mobile responsivity

* Fixed flow settings name

* Implement opening the sidebar when hitting /

* Fixed code opening when hitting space on sidebar

* Fixed errors with tests
2024-11-08 17:20:36 +00:00
Edwin Jose
0f6098aa28
feat: add tool mode to components, Added current date tool to agent (#4439)
* Fix incorrect parameter names in _build_source method across multiple JSON files

*  (freeze.spec.ts, playground.spec.ts, stop-building.spec.ts, linkComponent.spec.ts, sliderComponent.spec.ts, tableInputComponent.spec.ts, stop-button-playground.spec.ts, generalBugs-shard-7.spec.ts): enable tests that were previously skipped to ensure proper functionality and coverage. Remove outdated comments and update test descriptions for clarity.

* Refactor agent event processing to support message streaming and improve content handling

* Refactor ChatOutput to enhance message handling and streamline property assignment

* Fix session ID assignment in send_message method for better message handling

* Add OnTokenFunctionType protocol for enhanced token handling

* Add BorderTrail component for animated border effects

* Add ContentBlockDisplay component for enhanced content visualization and loading state

* Refactor TextShimmer to use motion.create for improved component animation

* Add ContentBlockDisplay to render chat content blocks in newChatMessage component

* Refactor `ChatOutput` class to use `MessageInput` instead of `MessageTextInput` for `input_value` across starter projects.

* Update edge class name from 'runned' to 'ran' in flow components and store

* Add 'on_build_start' and 'on_build_end' events to EventManager

* Add build status updates for 'build_start' and 'build_end' events in buildUtils.ts

* Integrate event management for output function in ComponentToolkit to track build start and end events

* Refactor event handling in ComponentToolkit to improve build event tracking

* Refactor messagesStore to update existing message if it already exists

* update properties to have state attribute

* format

* Refactor chatMessage component to display loading state for partial chat messages

* Refactor reactflowUtils to handle broken edges with missing display names

* fix agent text output

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes (attempt 2/3)

* fix agent component initialization

* Enhance error message formatting to include detailed exception information

* Refactor agent component for improved performance and stability

* Refactor `LCAgentComponent` to streamline agent execution logic and remove redundant methods

* Add type casting for send_message function in agent.py

* Change return type of function to 'Message' in log schema

* Add `embedding_service` and `client` fields to JSON configurations and refactor ChatOutput class

- Introduced `embedding_service` field in `Vector Store RAG.json` and `Travel Planning Agents.json` to support Astra Vectorize and embedding model selection.
- Added `client` field to `OpenAIEmbeddingsComponent` in JSON configurations for enhanced client configuration.
- Refactored `ChatOutput` class across multiple JSON files to include a new `_build_source` method for constructing `Source` objects, improving code modularity and readability.
- Updated import paths for `OpenAIEmbeddings` to reflect changes in the module structure.

* Update attribute handling in Component class to merge inputs with existing attributes

* Update ChatInput and ChatOutput initialization to include session_id

* Refactor test_load_flow_from_json_object to be asynchronous

* Add asynchronous tests for agent event handling in test_agent_events.py

* Add event handling functions for agent tool and chain events

- Implement functions to handle various agent events such as `on_chain_start`, `on_chain_end`, `on_tool_start`, `on_tool_end`, and `on_tool_error`.
- Introduce helper functions to build content blocks for agent messages.
- Create mappings for chain and tool event handlers.
- Refactor `process_agent_events` to utilize the new event handling functions.
- Remove the old `process_agent_events` implementation from `agent.py` and import the new one from `events.py`.

* feat: update content structure and validation logic

Enhance content block to accept a list of contents instead of a single item, and implement validation to ensure proper format. Refactor tool-related content types for improved clarity and functionality.

* Handle ValidationError in error message generation and update import paths

* feat: enhance error event creation to include structured error content

* move validators and remove utils.py

* feat: add event handler tests for agent tool and chain events

* refactor: streamline tool content structure

Combine multiple tool-related types into a single, more flexible interface. This simplifies the content handling by allowing optional properties for output, error, and timestamp, enhancing overall code maintainability. Adjust the ContentBlock interface to accommodate an array of contents for improved flexibility.

* feat: refactor error handling in ChatMessage component to support dynamic content blocks

* feat: enhance ContentBlockDisplay to support Markdown rendering and dynamic content handling

* Refactor agent event handling to simplify content block management

* Enhance `ContentBlockDisplay` with separators and improved content rendering logic

* add inline block to prevent text overflow in reason

* Refactor code to enhance Markdown rendering and dynamic content handling in ChatMessage component

* [autofix.ci] apply automated fixes

* Add timestamp field to BaseContent class and remove from ToolContent class

* Update timestamp validation to include fractional seconds in BaseContent class

* Add duration calculation for agent and tool events in events.py

* Refactor ContentBlock to use Pydantic's Discriminator and Tag for content types

* Add field validators for content_blocks and properties in Message class

* Add field serializer for source in Properties class

* Add type hint for serialize_properties method in MessageTable class

* create duration component and refactor contents

* [autofix.ci] apply automated fixes

* Refactor duration calculation to use perf_counter for improved accuracy and update ContentBlockDict to use dict for contents

* Update properties field validator to use 'before' mode for improved validation

* Refactor MessageTable to use ContentBlock instead of ContentBlockDict and enhance validation and serialization for properties and content_blocks

* Refactor AgentComponent to streamline agent initialization by using the set method directly

* Refactor event handling functions to use synchronous definitions and improve performance with asyncio.to_thread

* Refactor PythonREPLToolComponent to raise ToolException on error instead of returning error message

* Refactor CalculatorToolComponent to enhance error handling by raising ToolException and improving expression evaluation feedback

* Fix TextShimmer width in ContentBlockDisplay for improved layout consistency

* Enhance ContentBlockDisplay to support external links and math rendering in Markdown

* Enhance error handling in Calculator and Python REPL tools by introducing `ToolException` and improving expression evaluation logic.

* Refactor agent message properties to remove unnecessary icons and update content block titles for clarity

* feat: enhance agent and tool content messaging

Add headers to agent and tool content messages for better clarity and user experience.

* Handle nested schema structure in ContentBlock initialization

* fix: update agent input text content return type and enhance error message formatting

* Add placeholder and default value for model selection in AstraVectorStoreComponent

* Refactor event handling functions to remove `send_message_method` parameter and streamline message processing logic.

* Add model configuration to ToolContent for alias population

* Refactor agent event tests to improve message handling and content block initialization

* test: Update test durations for performance metrics

Adjust the recorded execution times for various test cases to ensure accurate performance tracking and facilitate optimization efforts.

* Refactor test_load_flow_from_json_object to improve project loading logic

* Make `HeaderDict` fields optional and update `header` field in `BaseContent`

* Enhance `Message` and `ChatOutput` with additional attributes for testing

* Update test duration metrics in .test_durations file

* Refactor `ContentDisplay` component to support multiple content types and improve rendering logic

* feat: Enhance duration display with human-readable format

Integrate the pretty-ms library to convert duration display metrics into a more user-friendly format, improving the overall user experience. Update dependencies to ensure compatibility with the latest version and optimize for newer Node.js versions.

* feat: Add optional duration and header properties to BaseContent interface

* fix: Change duration type from float to int in BaseContent class

* Remove default value for 'start_time' in duration calculations

* Enhance `ContentBlockDisplay` with dynamic header and expand/collapse animation

- Added `state` prop to `ContentBlockDisplay` to dynamically set header icon and title based on content state.
- Implemented `renderContent` function to encapsulate content rendering logic with animation.
- Integrated `ForwardedIconComponent` for displaying header icons.
- Updated `newChatMessage.tsx` to pass `state` prop to `ContentBlockDisplay`.

* Add animation to header title using AnimatePresence and motion components

* Add support for processing zip files with multithreading in FileComponent

- Enhanced FileComponent to handle individual and zipped text files.
- Introduced multithreading option for parallel processing of files within zip archives.
- Updated supported file types to include zip files.
- Improved error handling and logging for file processing.

* Expand `Message` conversion to support `AsyncIterator` and `Iterator` types.

* Remove unused function _find_or_create_tool_content from events.py

* Add header information to tool content and streamline message sending in event processing

* Add send_message_method parameter to event handlers for message dispatching

- Updated event handler functions to include a new parameter, `send_message_method`, allowing for message dispatching within the handlers.
- Modified the logic in each handler to utilize the `send_message_method` for sending messages.
- Adjusted the main event processing logic to pass the `send_message_method` to the appropriate handlers.

* Refactor ContentBlockDisplay component to improve rendering performance and user experience

* Refactor `ContentBlockDisplay.tsx` to improve readability and update header title logic

* [autofix.ci] apply automated fixes

* Add 'start_time' to event data and update test functions to include send_message mock

* Refactor ContentBlockDisplay component to include total duration and improve user experience

* Refactor ContentBlockDisplay component to handle isLoading state for total duration calculation

* Refactor animatedNumbers component and add AnimatedNumberBasic component

- Refactor the animatedNumbers component to improve readability and update the header title logic.
- Add a new component called AnimatedNumberBasic that displays an animated number with a specific value.

* Refactor agent message creation to improve event processing efficiency

* Refactor session ID assignment in run_graph_internal for improved clarity

* [autofix.ci] apply automated fixes

* fix: update agent message properties handling for improved compatibility

* fix: enhance message property validation to support dictionary input

* Add session_id to agent message initialization in tests

- Updated test cases in `test_agent_events.py` to include `session_id` in the `Message` initialization.
- Adjusted calls to `process_agent_events` to pass the `agent_message` with `session_id`.

* feat: Enhance event handling with duration tracking

Add start_time parameter to event handling functions to ensure consistent duration calculations across different stages of agent processing. This improves accuracy in measuring event durations and enhances overall event management.

* Add optional humanized value to AnimatedNumber component and update DurationDisplay usage

* Refactor `ContentDisplay` and add separator to `ContentBlockDisplay` component

* Add header to text content in agent message events

* Add separator between each content block in ContentBlockDisplay component

* Refactor layout in ContentDisplay component for improved styling and positioning

* Refactor event handlers to return updated start_time and agent_message

- Modified event handler functions to return a tuple of `agent_message` and `start_time`.
- Updated `_calculate_duration` to handle `start_time` as an integer.
- Ensured `start_time` is reset using `perf_counter()` after each event handling.
- Adjusted tool and chain event handler calls to accommodate the new return type.

* Add start_time and duration checks to agent event handlers in tests

- Updated test cases for `handle_on_chain_start`, `handle_on_chain_end`, `handle_on_tool_start`, `handle_on_tool_end`, `handle_on_tool_error`, and `handle_on_chain_stream` to include `start_time` as a return value.
- Added assertions to verify that `start_time` is a float and `duration` is an integer where applicable.

* [autofix.ci] apply automated fixes

* update colors and spacing of time

* [autofix.ci] apply automated fixes

* Refactor DurationDisplay component to display duration in seconds

* Rename case from "message" to "add_message" in buildUtils.ts switch statement

* Add event registration for message removal in EventManager

* Add category handling for message events in Component class

* Add custom exception handling for agent message processing

* Handle exceptions in agent event processing with message deletion and event notification

* Add new LLM options and refactor AgentComponent for dynamic provider handling

- Introduced new language model options: Anthropic, Groq, and NVIDIA.
- Refactored `AgentComponent` to utilize `MODEL_PROVIDERS_DICT` for dynamic provider handling.
- Simplified input management by removing hardcoded provider inputs and using a dictionary-based approach.
- Enhanced `update_build_config` to support flexible provider configurations and custom options.

* Refactor buildUtils.ts and add message removal handling

* Update Source model to allow None values for id, display_name, and source fields

* Refactor event handler functions to return tuple of Message and float

* Refactor `ChatOutput` class to use `MessageInput` instead of `MessageTextInput` for `input_value` across starter projects.

* Add test for updating component outputs with dynamic code input

* feat: add ToolModeMixin to manage tool mode state

* feat: add parameterName to mutateTemplate for enhanced template mutation

* feat: add tool mode functionality to node toolbar

Implement a toggle for tool mode, allowing users to easily switch functionalities within the node toolbar. This enhancement improves user interaction by providing a dedicated mode for tool-related tasks.

* feat: integrate ToolModeMixin into MessageTextInput for enhanced functionality

* Update parameterId to "tool_mode" in nodeToolbarComponent

* feat: implement tool mode output handling in run_and_validate_update_outputs

* feat: add conditional rendering for tool mode button based on template fields

* fix: enhance null checks for tool mode button visibility and output validation

* feat: add isToolMode property to NodeInputFieldComponentType for enhanced functionality

* feat: add isToolMode prop to NodeInputField for conditional styling

* feat: implement sorting logic for tool mode fields in GenericNode component

* feat: add isToolMode prop to NodeOutputField for conditional styling

* feat: pass isToolMode prop to NodeOutputField for conditional styling

* feat: update disabled logic in NodeInputField to include isToolMode

* Add default placeholder to getPlaceholder function and constants file

* feat: Enable dynamic placeholders in input components

Add support for customizable placeholder text across various input components to enhance usability and improve user experience.

* feat: Add optional placeholder prop to InputProps type

* feat: Add placeholder prop to InputGlobalComponent and CustomParameterComponent

* feat: Set dynamic placeholder for NodeInputField based on tool mode

* feat: Update NodeOutputField styling for tool mode and pass isToolMode prop

* feat: Add isToolMode prop to OutputComponent for dynamic styling

* feat: Add TOOL_OUTPUT_DISPLAY_NAME constant for toolset display

* feat: Update tool output display name to use TOOL_OUTPUT_DISPLAY_NAME constant

* feat: Conditionally render Freeze Path button based on tool mode

* Add support for asynchronous output methods and tool mode validation in component tools

* feat: Validate required inputs for tool mode before executing output methods

* Refactor: Rename method to indicate private access in custom_component

- Changed `get_function_entrypoint_return_type` to `_get_function_entrypoint_return_type` in `custom_component.py` to reflect its intended private usage.
- Updated references to the renamed method in `utils.py` and `directory_reader.py` to maintain consistency.

* feat: Implement tool output mapping based on tool mode presence in inputs

* Refactor tests to use private method _get_function_entrypoint_return_type

* feat: Enable tool mode for input_value in LCAgentComponent

* Add test for updating component outputs with dynamic code input

* feat: add tool mode functionality to node toolbar

Implement a toggle for tool mode, allowing users to easily switch functionalities within the node toolbar. This enhancement improves user interaction by providing a dedicated mode for tool-related tasks.

* feat: add conditional rendering for tool mode button based on template fields

* feat: add isToolMode prop to NodeInputField for conditional styling

* feat: Set dynamic placeholder for NodeInputField based on tool mode

* feat: Add TOOL_OUTPUT_DISPLAY_NAME constant for toolset display

* feat: Conditionally render Freeze Path button based on tool mode

* Add tool mode support to LCAgentComponent

- Introduced new input fields: `agent_name`, `agent_description`, and `add_tools_to_description` to support tool mode.
- Implemented methods `get_tool_name`, `get_tool_description`, `_build_tools_description`, and `to_toolkit` for handling tool-related functionalities.
- Enhanced `MessageTextInput` with additional information for better user guidance.
- Updated agent message sender name to use `agent_name` if available.

* Fix return statement placement in event handling logic

* Add tool mode enhancements and error handling in component_tool

- Introduce optional parameters `tool_name`, `tool_description`, and `callbacks` to `get_tools` method.
- Implement error handling for tool creation with `handle_tool_error` and `callbacks`.
- Ensure single tool validation when `tool_name` or `tool_description` is provided.
- Add support for `BaseModel` result serialization using `model_dump`.

* Refactor agent response method and update output configuration

* Remove unused 'input_value' field from tool_calling.py configuration

* Refactor source property assignment to use _build_source method

* Enhance callable input check and add callbacks to toolkit conversion

* Add unit tests for message update functionality in backend

- Implement tests for updating single and multiple messages.
- Add tests for handling nonexistent messages during updates.
- Include tests for updating messages with timestamps, content blocks, and nested properties.
- Ensure proper serialization and storage of message properties.

* Add field serializer for 'output' using jsonable_encoder in content_types.py

* Add tool mode fields and refactor message response in starter projects

- Introduced new fields `add_tools_to_description`, `agent_description`, and `agent_name` for tool mode configuration in JSON starter projects.
- Refactored `message_response` method to utilize `_build_source` for constructing message source properties.
- Updated method references from `get_response` to `message_response` for consistency.
- Adjusted input field descriptions and added missing metadata attributes.

* Implement no-op send_message function and patching decorator for component tools

* Refactor output handling in component tool to support Message and Data types

* Simplify exception handling by removing redundant exception re-raise

* Enhance tool assignment logic to preserve existing name and description if not provided

* feat: Enhance agent name and description handling

Refactor the agent component to dynamically include tool names in the default agent name and description. This improves clarity for users by providing more context about the agent's capabilities and ensures consistent representation of tools in the interface.

* refactor: Update agent description and name info to include default values and dynamic tool integration

* Add custom encoders for serialization and refactor schema modules

- Introduce `CUSTOM_ENCODERS` in `encoders.py` to handle serialization of `Callable` and `datetime` objects.
- Refactor `BaseContent` to use `model_serializer` for model serialization with custom encoders.
- Remove redundant `encode_callable` function and `CUSTOM_ENCODERS` definition from `artifact.py`.
- Update imports and clean up unused imports in schema modules.

* Remove 'agent_name' field and update 'get_tool_name' method in agent.py

* Enhance `serialize_model` method with `wrap` mode and improved error handling

* Add 'tool_mode' attribute to frontend node class

* Add unit tests for ContentBlock initialization and content handling

* Add unit tests for content types serialization and creation

* Refactor tool mode initialization logic in NodeToolbarComponent

* Add tool mode functionality to node toolbar and flow store

* Add updateNodeInternals call for tool_mode case in nodeToolbarComponent

* Add condition to hide handle in tool mode in NodeInputField component

* Add shortcut for activating Tool Mode and integrate into node toolbar

* Add tool_mode parameter to MessageTextInput and update attributes mapping

* Remove 'agent_name' field from Agent Flow configuration file

* Update agent message to use display_name instead of agent_name

* new components with tool mode

* updated the tests and also updated api request to accept the  data from tool calling agent

* added current date as tool

* [autofix.ci] apply automated fixes

* Add validation for required tools in agent execution and component setup

* Make 'tools' field required in AgentComponent configuration

* test: add unit tests for run_and_validate_update_outputs functionality

Implement comprehensive tests for the `run_and_validate_update_outputs` method across various scenarios, including enabling/disabling tool mode, handling invalid output structures, and supporting custom update logic. Validate that outputs are correctly updated and ensure appropriate error handling for invalid cases.

* remove tool_mode from Chrome

* Update agent.py

adding current date tool to agent

* test: update component toolkit tests to use CalculatorToolComponent

* Enhance input schema creation logic for tool mode components

* Include input expression in error responses for calculator tool

* Enhance `visit_Attribute` to check for required inputs in `tree_visitor.py`

* fix: add checks for graph attribute before accessing session and flow IDs in Component methods

* fix: set default value to None for id field in PlaygroundEvent model

* fix: remove unused add_toolkit_output flag from FeatureFlags model

* Refactor JSON configurations to remove unnecessary required inputs across starter projects

* Add tool mode validation and improve error handling

- Updated import statement for ContentBlock to fix import path.
- Modified `send_message_noop` to require a `Message` parameter and added type ignore for method assignment.
- Enhanced error message in tool mode validation to handle `None` input names.
- Changed return type of `send_error_message` to `Message` for consistency.
- Provided default value for `get_tool_name` to handle missing display names.

* Add pytest fixture to test_component_message_sending test

* fix linkComponent test

* Skip flaky test in stop-building.spec.ts

* new components with tool mode

* updated the tests and also updated api request to accept the  data from tool calling agent

* added current date as tool

* [autofix.ci] apply automated fixes

* remove tool_mode from Chrome

* Update agent.py

adding current date tool to agent

* Ensure tools is a list before appending CurrentDateComponent in AgentComponent

* Add pytest fixture 'client' to component test functions

* Use 'client' fixture in test_component_streaming_message

* Skip flaky test in stop-building.spec and add tool_mode to MessageTextInput

* [autofix.ci] apply automated fixes

* Update agent.py

updates to solve the error in Date component as tool.

* Add `updateComponentCode` function to enhance code update flexibility

- Introduced `updateComponentCode` function to handle import and input updates more flexibly using regex patterns.
- Updated unit test to utilize the new function for modifying component code, including adding `LinkInput` configuration.

* Add tool mode to components and introduce current date tool option

- Added `tool_mode` attribute to `MessageTextInput` in `CalculatorToolComponent` and `URLComponent` to enable tool mode functionality.
- Introduced `add_current_date_tool` option in `AgentComponent` to allow agents to include a tool that returns the current date.
- Updated `AgentComponent` to handle the addition of the current date tool as a `StructuredTool`.

* update test code generation

* remove meta key to ctrl

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: phact <estevezsebastian@gmail.com>
2024-11-08 09:53:32 -03:00
Gabriel Luiz Freitas Almeida
1e4594ad43
feat: Implement tool mode functionality and dynamic placeholders across input components (#4402)
* Update content_blocks initialization and add flow_id parameter to ErrorMessage

* feat: include vertex ID in class instantiation

Pass the vertex ID to the custom component during instantiation to facilitate event tracking or management capabilities.

* fix: update message streaming logic to handle None messages and refactor _stream_message parameters

* feat: include flow_id in ChatOutput initialization

Add flow_id to the ChatOutput class to improve the tracking of conversational flows, enhancing the context management within the chat system.

* fix: update chat message source display to use 'source' instead of 'display_name'

* feat: add flow_id to message initialization in ChatOutput class

* fix: handle JSON parsing with type checks for message properties

Refine JSON loading to ensure proper type handling for message properties and content blocks, enhancing stability and preventing potential errors with non-string inputs.

* refactor: update logging structure and message handling

Improve the output logs to support logging multiple entries and ensure robust message streaming with type checking. Adjust error handling parameters for consistency.

* feat: restrict event types in registration and sending

Enhance event management by explicitly defining allowed event types, improving code clarity and reducing potential errors. This ensures only valid event types are registered and sent, leading to more robust event handling.

* Update `logs` attribute to store lists of `Log` objects in `Vertex` class

* feat: introduce TypedDicts for ContentBlock and Properties, update default values in Message model

* fix: restrict event types in send_event method to improve data validation

* Set default values for 'id', 'display_name', and 'source' fields in Source schema

* [autofix.ci] apply automated fixes

* fix: update query to use equality check for error messages

* make lint

* update simple agent test

* test: enhance EventManager tests for event_id validation

* feat: add background, chat icon, and text color properties to component toolkit

* fix: update LogComponent name to display_name for consistency

* remove playground from new cards on main page

* refactor: Update Properties handling in MessageTable and remove unused PropertiesDict

* fix: Set default value for category in MessageBase model

* fix: Update properties default factory in MessageTable model to use model_dump

* Add _build_source method to ChatOutput and update test inputs to use Message objects

* Fix incorrect parameter names in _build_source method across multiple JSON files

*  (freeze.spec.ts, playground.spec.ts, stop-building.spec.ts, linkComponent.spec.ts, sliderComponent.spec.ts, tableInputComponent.spec.ts, stop-button-playground.spec.ts, generalBugs-shard-7.spec.ts): enable tests that were previously skipped to ensure proper functionality and coverage. Remove outdated comments and update test descriptions for clarity.

* Refactor agent event processing to support message streaming and improve content handling

* Refactor ChatOutput to enhance message handling and streamline property assignment

* Fix session ID assignment in send_message method for better message handling

* Add OnTokenFunctionType protocol for enhanced token handling

* Add BorderTrail component for animated border effects

* Add ContentBlockDisplay component for enhanced content visualization and loading state

* Refactor TextShimmer to use motion.create for improved component animation

* Add ContentBlockDisplay to render chat content blocks in newChatMessage component

* Refactor `ChatOutput` class to use `MessageInput` instead of `MessageTextInput` for `input_value` across starter projects.

* Update edge class name from 'runned' to 'ran' in flow components and store

* Add 'on_build_start' and 'on_build_end' events to EventManager

* Add build status updates for 'build_start' and 'build_end' events in buildUtils.ts

* Integrate event management for output function in ComponentToolkit to track build start and end events

* Refactor event handling in ComponentToolkit to improve build event tracking

* Refactor messagesStore to update existing message if it already exists

* update properties to have state attribute

* format

* Refactor chatMessage component to display loading state for partial chat messages

* Refactor reactflowUtils to handle broken edges with missing display names

* fix agent text output

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes (attempt 2/3)

* fix agent component initialization

* Enhance error message formatting to include detailed exception information

* Refactor agent component for improved performance and stability

* Refactor `LCAgentComponent` to streamline agent execution logic and remove redundant methods

* Add type casting for send_message function in agent.py

* Change return type of function to 'Message' in log schema

* Add `embedding_service` and `client` fields to JSON configurations and refactor ChatOutput class

- Introduced `embedding_service` field in `Vector Store RAG.json` and `Travel Planning Agents.json` to support Astra Vectorize and embedding model selection.
- Added `client` field to `OpenAIEmbeddingsComponent` in JSON configurations for enhanced client configuration.
- Refactored `ChatOutput` class across multiple JSON files to include a new `_build_source` method for constructing `Source` objects, improving code modularity and readability.
- Updated import paths for `OpenAIEmbeddings` to reflect changes in the module structure.

* Update attribute handling in Component class to merge inputs with existing attributes

* Update ChatInput and ChatOutput initialization to include session_id

* Refactor test_load_flow_from_json_object to be asynchronous

* Add asynchronous tests for agent event handling in test_agent_events.py

* Add event handling functions for agent tool and chain events

- Implement functions to handle various agent events such as `on_chain_start`, `on_chain_end`, `on_tool_start`, `on_tool_end`, and `on_tool_error`.
- Introduce helper functions to build content blocks for agent messages.
- Create mappings for chain and tool event handlers.
- Refactor `process_agent_events` to utilize the new event handling functions.
- Remove the old `process_agent_events` implementation from `agent.py` and import the new one from `events.py`.

* feat: update content structure and validation logic

Enhance content block to accept a list of contents instead of a single item, and implement validation to ensure proper format. Refactor tool-related content types for improved clarity and functionality.

* Handle ValidationError in error message generation and update import paths

* feat: enhance error event creation to include structured error content

* move validators and remove utils.py

* feat: add event handler tests for agent tool and chain events

* refactor: streamline tool content structure

Combine multiple tool-related types into a single, more flexible interface. This simplifies the content handling by allowing optional properties for output, error, and timestamp, enhancing overall code maintainability. Adjust the ContentBlock interface to accommodate an array of contents for improved flexibility.

* feat: refactor error handling in ChatMessage component to support dynamic content blocks

* feat: enhance ContentBlockDisplay to support Markdown rendering and dynamic content handling

* Refactor agent event handling to simplify content block management

* Enhance `ContentBlockDisplay` with separators and improved content rendering logic

* add inline block to prevent text overflow in reason

* Refactor code to enhance Markdown rendering and dynamic content handling in ChatMessage component

* [autofix.ci] apply automated fixes

* Add timestamp field to BaseContent class and remove from ToolContent class

* Update timestamp validation to include fractional seconds in BaseContent class

* Add duration calculation for agent and tool events in events.py

* Refactor ContentBlock to use Pydantic's Discriminator and Tag for content types

* Add field validators for content_blocks and properties in Message class

* Add field serializer for source in Properties class

* Add type hint for serialize_properties method in MessageTable class

* create duration component and refactor contents

* [autofix.ci] apply automated fixes

* Refactor duration calculation to use perf_counter for improved accuracy and update ContentBlockDict to use dict for contents

* Update properties field validator to use 'before' mode for improved validation

* Refactor MessageTable to use ContentBlock instead of ContentBlockDict and enhance validation and serialization for properties and content_blocks

* Refactor AgentComponent to streamline agent initialization by using the set method directly

* Refactor event handling functions to use synchronous definitions and improve performance with asyncio.to_thread

* Refactor PythonREPLToolComponent to raise ToolException on error instead of returning error message

* Refactor CalculatorToolComponent to enhance error handling by raising ToolException and improving expression evaluation feedback

* Fix TextShimmer width in ContentBlockDisplay for improved layout consistency

* Enhance ContentBlockDisplay to support external links and math rendering in Markdown

* Enhance error handling in Calculator and Python REPL tools by introducing `ToolException` and improving expression evaluation logic.

* Refactor agent message properties to remove unnecessary icons and update content block titles for clarity

* feat: enhance agent and tool content messaging

Add headers to agent and tool content messages for better clarity and user experience.

* Handle nested schema structure in ContentBlock initialization

* fix: update agent input text content return type and enhance error message formatting

* Add placeholder and default value for model selection in AstraVectorStoreComponent

* Refactor event handling functions to remove `send_message_method` parameter and streamline message processing logic.

* Add model configuration to ToolContent for alias population

* Refactor agent event tests to improve message handling and content block initialization

* test: Update test durations for performance metrics

Adjust the recorded execution times for various test cases to ensure accurate performance tracking and facilitate optimization efforts.

* Refactor test_load_flow_from_json_object to improve project loading logic

* Make `HeaderDict` fields optional and update `header` field in `BaseContent`

* Enhance `Message` and `ChatOutput` with additional attributes for testing

* Update test duration metrics in .test_durations file

* Refactor `ContentDisplay` component to support multiple content types and improve rendering logic

* feat: Enhance duration display with human-readable format

Integrate the pretty-ms library to convert duration display metrics into a more user-friendly format, improving the overall user experience. Update dependencies to ensure compatibility with the latest version and optimize for newer Node.js versions.

* feat: Add optional duration and header properties to BaseContent interface

* fix: Change duration type from float to int in BaseContent class

* Remove default value for 'start_time' in duration calculations

* Enhance `ContentBlockDisplay` with dynamic header and expand/collapse animation

- Added `state` prop to `ContentBlockDisplay` to dynamically set header icon and title based on content state.
- Implemented `renderContent` function to encapsulate content rendering logic with animation.
- Integrated `ForwardedIconComponent` for displaying header icons.
- Updated `newChatMessage.tsx` to pass `state` prop to `ContentBlockDisplay`.

* Add animation to header title using AnimatePresence and motion components

* Add support for processing zip files with multithreading in FileComponent

- Enhanced FileComponent to handle individual and zipped text files.
- Introduced multithreading option for parallel processing of files within zip archives.
- Updated supported file types to include zip files.
- Improved error handling and logging for file processing.

* Expand `Message` conversion to support `AsyncIterator` and `Iterator` types.

* Remove unused function _find_or_create_tool_content from events.py

* Add header information to tool content and streamline message sending in event processing

* Add send_message_method parameter to event handlers for message dispatching

- Updated event handler functions to include a new parameter, `send_message_method`, allowing for message dispatching within the handlers.
- Modified the logic in each handler to utilize the `send_message_method` for sending messages.
- Adjusted the main event processing logic to pass the `send_message_method` to the appropriate handlers.

* Refactor ContentBlockDisplay component to improve rendering performance and user experience

* Refactor `ContentBlockDisplay.tsx` to improve readability and update header title logic

* [autofix.ci] apply automated fixes

* Add 'start_time' to event data and update test functions to include send_message mock

* Refactor ContentBlockDisplay component to include total duration and improve user experience

* Refactor ContentBlockDisplay component to handle isLoading state for total duration calculation

* Refactor animatedNumbers component and add AnimatedNumberBasic component

- Refactor the animatedNumbers component to improve readability and update the header title logic.
- Add a new component called AnimatedNumberBasic that displays an animated number with a specific value.

* Refactor agent message creation to improve event processing efficiency

* Refactor session ID assignment in run_graph_internal for improved clarity

* [autofix.ci] apply automated fixes

* fix: update agent message properties handling for improved compatibility

* fix: enhance message property validation to support dictionary input

* Add session_id to agent message initialization in tests

- Updated test cases in `test_agent_events.py` to include `session_id` in the `Message` initialization.
- Adjusted calls to `process_agent_events` to pass the `agent_message` with `session_id`.

* feat: Enhance event handling with duration tracking

Add start_time parameter to event handling functions to ensure consistent duration calculations across different stages of agent processing. This improves accuracy in measuring event durations and enhances overall event management.

* Add optional humanized value to AnimatedNumber component and update DurationDisplay usage

* Refactor `ContentDisplay` and add separator to `ContentBlockDisplay` component

* Add header to text content in agent message events

* Add separator between each content block in ContentBlockDisplay component

* Refactor layout in ContentDisplay component for improved styling and positioning

* Refactor event handlers to return updated start_time and agent_message

- Modified event handler functions to return a tuple of `agent_message` and `start_time`.
- Updated `_calculate_duration` to handle `start_time` as an integer.
- Ensured `start_time` is reset using `perf_counter()` after each event handling.
- Adjusted tool and chain event handler calls to accommodate the new return type.

* Add start_time and duration checks to agent event handlers in tests

- Updated test cases for `handle_on_chain_start`, `handle_on_chain_end`, `handle_on_tool_start`, `handle_on_tool_end`, `handle_on_tool_error`, and `handle_on_chain_stream` to include `start_time` as a return value.
- Added assertions to verify that `start_time` is a float and `duration` is an integer where applicable.

* [autofix.ci] apply automated fixes

* update colors and spacing of time

* [autofix.ci] apply automated fixes

* Refactor DurationDisplay component to display duration in seconds

* Rename case from "message" to "add_message" in buildUtils.ts switch statement

* Add event registration for message removal in EventManager

* Add category handling for message events in Component class

* Add custom exception handling for agent message processing

* Handle exceptions in agent event processing with message deletion and event notification

* Add new LLM options and refactor AgentComponent for dynamic provider handling

- Introduced new language model options: Anthropic, Groq, and NVIDIA.
- Refactored `AgentComponent` to utilize `MODEL_PROVIDERS_DICT` for dynamic provider handling.
- Simplified input management by removing hardcoded provider inputs and using a dictionary-based approach.
- Enhanced `update_build_config` to support flexible provider configurations and custom options.

* Refactor buildUtils.ts and add message removal handling

* Update Source model to allow None values for id, display_name, and source fields

* Refactor event handler functions to return tuple of Message and float

* Refactor `ChatOutput` class to use `MessageInput` instead of `MessageTextInput` for `input_value` across starter projects.

* Add test for updating component outputs with dynamic code input

* feat: add ToolModeMixin to manage tool mode state

* feat: add parameterName to mutateTemplate for enhanced template mutation

* feat: add tool mode functionality to node toolbar

Implement a toggle for tool mode, allowing users to easily switch functionalities within the node toolbar. This enhancement improves user interaction by providing a dedicated mode for tool-related tasks.

* feat: integrate ToolModeMixin into MessageTextInput for enhanced functionality

* Update parameterId to "tool_mode" in nodeToolbarComponent

* feat: implement tool mode output handling in run_and_validate_update_outputs

* feat: add conditional rendering for tool mode button based on template fields

* fix: enhance null checks for tool mode button visibility and output validation

* feat: add isToolMode property to NodeInputFieldComponentType for enhanced functionality

* feat: add isToolMode prop to NodeInputField for conditional styling

* feat: implement sorting logic for tool mode fields in GenericNode component

* feat: add isToolMode prop to NodeOutputField for conditional styling

* feat: pass isToolMode prop to NodeOutputField for conditional styling

* feat: update disabled logic in NodeInputField to include isToolMode

* Add default placeholder to getPlaceholder function and constants file

* feat: Enable dynamic placeholders in input components

Add support for customizable placeholder text across various input components to enhance usability and improve user experience.

* feat: Add optional placeholder prop to InputProps type

* feat: Add placeholder prop to InputGlobalComponent and CustomParameterComponent

* feat: Set dynamic placeholder for NodeInputField based on tool mode

* feat: Update NodeOutputField styling for tool mode and pass isToolMode prop

* feat: Add isToolMode prop to OutputComponent for dynamic styling

* feat: Add TOOL_OUTPUT_DISPLAY_NAME constant for toolset display

* feat: Update tool output display name to use TOOL_OUTPUT_DISPLAY_NAME constant

* feat: Conditionally render Freeze Path button based on tool mode

* Add support for asynchronous output methods and tool mode validation in component tools

* feat: Validate required inputs for tool mode before executing output methods

* Refactor: Rename method to indicate private access in custom_component

- Changed `get_function_entrypoint_return_type` to `_get_function_entrypoint_return_type` in `custom_component.py` to reflect its intended private usage.
- Updated references to the renamed method in `utils.py` and `directory_reader.py` to maintain consistency.

* feat: Implement tool output mapping based on tool mode presence in inputs

* Refactor tests to use private method _get_function_entrypoint_return_type

* feat: Enable tool mode for input_value in LCAgentComponent

* Add test for updating component outputs with dynamic code input

* feat: add tool mode functionality to node toolbar

Implement a toggle for tool mode, allowing users to easily switch functionalities within the node toolbar. This enhancement improves user interaction by providing a dedicated mode for tool-related tasks.

* feat: add conditional rendering for tool mode button based on template fields

* feat: add isToolMode prop to NodeInputField for conditional styling

* feat: Set dynamic placeholder for NodeInputField based on tool mode

* feat: Add TOOL_OUTPUT_DISPLAY_NAME constant for toolset display

* feat: Conditionally render Freeze Path button based on tool mode

* Add tool mode support to LCAgentComponent

- Introduced new input fields: `agent_name`, `agent_description`, and `add_tools_to_description` to support tool mode.
- Implemented methods `get_tool_name`, `get_tool_description`, `_build_tools_description`, and `to_toolkit` for handling tool-related functionalities.
- Enhanced `MessageTextInput` with additional information for better user guidance.
- Updated agent message sender name to use `agent_name` if available.

* Fix return statement placement in event handling logic

* Add tool mode enhancements and error handling in component_tool

- Introduce optional parameters `tool_name`, `tool_description`, and `callbacks` to `get_tools` method.
- Implement error handling for tool creation with `handle_tool_error` and `callbacks`.
- Ensure single tool validation when `tool_name` or `tool_description` is provided.
- Add support for `BaseModel` result serialization using `model_dump`.

* Refactor agent response method and update output configuration

* Remove unused 'input_value' field from tool_calling.py configuration

* Refactor source property assignment to use _build_source method

* Enhance callable input check and add callbacks to toolkit conversion

* Add unit tests for message update functionality in backend

- Implement tests for updating single and multiple messages.
- Add tests for handling nonexistent messages during updates.
- Include tests for updating messages with timestamps, content blocks, and nested properties.
- Ensure proper serialization and storage of message properties.

* Add field serializer for 'output' using jsonable_encoder in content_types.py

* Add tool mode fields and refactor message response in starter projects

- Introduced new fields `add_tools_to_description`, `agent_description`, and `agent_name` for tool mode configuration in JSON starter projects.
- Refactored `message_response` method to utilize `_build_source` for constructing message source properties.
- Updated method references from `get_response` to `message_response` for consistency.
- Adjusted input field descriptions and added missing metadata attributes.

* Implement no-op send_message function and patching decorator for component tools

* Refactor output handling in component tool to support Message and Data types

* Simplify exception handling by removing redundant exception re-raise

* Enhance tool assignment logic to preserve existing name and description if not provided

* feat: Enhance agent name and description handling

Refactor the agent component to dynamically include tool names in the default agent name and description. This improves clarity for users by providing more context about the agent's capabilities and ensures consistent representation of tools in the interface.

* refactor: Update agent description and name info to include default values and dynamic tool integration

* Add custom encoders for serialization and refactor schema modules

- Introduce `CUSTOM_ENCODERS` in `encoders.py` to handle serialization of `Callable` and `datetime` objects.
- Refactor `BaseContent` to use `model_serializer` for model serialization with custom encoders.
- Remove redundant `encode_callable` function and `CUSTOM_ENCODERS` definition from `artifact.py`.
- Update imports and clean up unused imports in schema modules.

* Remove 'agent_name' field and update 'get_tool_name' method in agent.py

* Enhance `serialize_model` method with `wrap` mode and improved error handling

* Add 'tool_mode' attribute to frontend node class

* Add unit tests for ContentBlock initialization and content handling

* Add unit tests for content types serialization and creation

* Refactor tool mode initialization logic in NodeToolbarComponent

* Add tool mode functionality to node toolbar and flow store

* Add updateNodeInternals call for tool_mode case in nodeToolbarComponent

* Add condition to hide handle in tool mode in NodeInputField component

* Add shortcut for activating Tool Mode and integrate into node toolbar

* Add tool_mode parameter to MessageTextInput and update attributes mapping

* Remove 'agent_name' field from Agent Flow configuration file

* Update agent message to use display_name instead of agent_name

* Add validation for required tools in agent execution and component setup

* Make 'tools' field required in AgentComponent configuration

* test: add unit tests for run_and_validate_update_outputs functionality

Implement comprehensive tests for the `run_and_validate_update_outputs` method across various scenarios, including enabling/disabling tool mode, handling invalid output structures, and supporting custom update logic. Validate that outputs are correctly updated and ensure appropriate error handling for invalid cases.

* test: update component toolkit tests to use CalculatorToolComponent

* Enhance input schema creation logic for tool mode components

* Include input expression in error responses for calculator tool

* Enhance `visit_Attribute` to check for required inputs in `tree_visitor.py`

* fix: add checks for graph attribute before accessing session and flow IDs in Component methods

* fix: set default value to None for id field in PlaygroundEvent model

* fix: remove unused add_toolkit_output flag from FeatureFlags model

* Refactor JSON configurations to remove unnecessary required inputs across starter projects

* Add tool mode validation and improve error handling

- Updated import statement for ContentBlock to fix import path.
- Modified `send_message_noop` to require a `Message` parameter and added type ignore for method assignment.
- Enhanced error message in tool mode validation to handle `None` input names.
- Changed return type of `send_error_message` to `Message` for consistency.
- Provided default value for `get_tool_name` to handle missing display names.

* Add pytest fixture to test_component_message_sending test

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
2024-11-08 02:31:04 +00:00
Gabriel Luiz Freitas Almeida
a1cddbc335
feat: add ContentBlock streaming visualization (#4370)
* Refactor cardComponent and storeCardComponent to comment out playground buttons

* Refactor message model to replace 'meta_data' with 'properties' and update related schema and components

* Add new schema for content types with Pydantic models

* Add ContentBlock schema with support for multiple content types

* Refactor: Import ContentBlock from langflow.schema.content_block instead of defining locally

* Add SendMessageFunctionType protocol to log schema for message handling

* Refactor chat message model to replace 'meta_data' with 'properties' and update related components

* Add ContentBlock import and enhance send_message method in component.py

- Import ContentBlock from langflow.schema.content_block.
- Replace 'meta_data' with 'properties' in message construction.
- Update send_message method to handle optional Message and text parameters.

* Add async on_chain_start method to callback for logging chain start events

* Refactor add_messagetables function to replace 'meta_data' with 'properties' in message processing

* Fix typo in 'traceback' property name in ErrorDetails interface

* Add condition to check chat history length before rendering chat lock

* Refactor error content structure and enhance message event handling

* Add `update_messages` function to handle message updates in memory module

* Add check for 'id' attribute in stored_message for message validation

* Add new content types and TypeAlias for schema in content_types.py

* Add custom serialization for UUID and BaseModel types in data schema

* Refactor `ContentType` to use `ContentTypes` union and update `content` field in `ContentBlock` model

* Update model to use specific types for properties and content_blocks fields

* Change return type of 'serialize_params' method to string

* Add sender fields and properties handling to PlaygroundEvent and create_message function

* Refactor chat message component to use 'properties' instead of 'meta_data' for chat attributes

* Refactor message handling to improve error categorization and session management

* Enhance ContentBlock initialization to update model fields with defaults

* Add new content types and update ContentBlock interface in chat types

- Introduced BaseContent interface and various content types: ErrorContent, TextContent, MediaContent, JSONContent, CodeContent, ToolStartContent, ToolEndContent, and ToolErrorContent.
- Created a union type ContentType for all content types.
- Updated ContentBlock interface to include new content structure and additional fields.

* Refactor error handling in chat messages to use `ErrorContent` type

* Add ErrorMessage class for handling error-specific messages in schema

* Add type annotations for cache and logs in custom_component.py

* Refactor error handling in custom component to use `send_error` method

* Add customizable properties for chat components

- Introduced new properties: `background_color`, `chat_icon`, and `text_color` to chat components across various starter projects.
- These properties allow for customization of the chat message appearance, including icon and text styling.
- Updated the `ChatInput` and `ChatOutput` components to handle these new properties and include them in the message response.

* Add 'category' field to MessageEvent and update create_message function

* Remove unused message handling methods from ChatComponent

* Refactor message event handling in chat module

* Add 'category' field to Message creation and pass 'id_' in _send_message_event

* Add 'category' field with Literal type to Message schema and default handling in chat IO

* Refactor message event handling in chat module

* Refactor buttonSendWrapper component to add data-testid attribute

* Refactor ChatComponent to replace 'store_message' with 'send_message' method

* refactor: streamline message handling in Component

Update message processing to utilize new methods for improved clarity and efficiency. Enhance event data management to ensure accuracy and consistency in message updates.

* feat: Update input handling and output storage for chat components

Enhance chat input and output components to improve message handling, including updates to storage and display properties. This facilitates better user experience and message management in various agent projects.

* Ensure 'id' field is set in message data dictionary if not present

* refactor: Simplify property retrieval from source component in ChatComponent

* refactor: Replace property retrieval logic with a dedicated method in ChatOutput

* Refactor `TokenEvent` class and add `timestamp` field with default factory

* refactor: Simplify message processing by removing unused parameters in async handling

* Refactor message text update logic in messagesStore

* Refactor border styling in ChatInput component

* refactor: Consolidate properties handling in PlaygroundEvent and create_message function

* refactor: Update timestamp formatting to include timezone information across multiple models

* refactor: Add StreamingError exception for better error handling in streaming components

* refactor: Add source_display_name attribute to Properties model for enhanced data representation

* refactor: Enhance ChatComponent to return source display name and update properties handling in ChatOutput

* refactor: Improve error handling in Component class and enhance create_error function with timestamp support

* feat: enhance ChatOutput component for improved message handling

Update the message_response method to include source display name and improve message storage functionality across various project templates. This enhances clarity and ensures consistent behavior of chat components.

* feat: add delete_message function to remove messages by ID from the monitor service

* Add error handling for message streaming and implement message deletion on failure

* feat: Enhance message streaming and event handling

Improve the streaming process to send message events only for non-streaming messages and ensure the initial message is sent correctly when processing chunks, enhancing the overall message handling flow.

* improve UI

* Refactor buttonSendWrapper component to add data-testid attribute and update tests

* fix edited tag

* add tooltip to add button

* fix bug after merge

* update examples

* updateinput without chat

* fix some frontend tests

* fix test

* update test

* Update fileUploadComponent.spec.ts to fix test and update input without chat

* refactor event creation functions and enhance ErrorEvent structure

* refactor ErrorMessage to use Source for sender and component details

* refactor Properties to use Source model for source details and add validation

* refactor ChatMessage component for improved readability and structure

* refactor ChatMessageType to use PropertiesType for improved structure and clarity

* Add Source ID to message properties and update exception handling

- Updated `message_response` method to include `source_id` in the `Properties` object for better traceability.
- Modified `StreamingError` to use `Source` object instead of `component_name` for more detailed error context.
- Adjusted `get_properties_from_source_component` to return `source_id` along with other properties.

* Add 'Source' property to error handling in custom_component module

- Introduced 'Source' property to enhance error message details.
- Updated error handling to include 'source' instead of 'display_name'.
- Modified exception raising to use 'source' for better traceability.

* Enhance event ID generation with event type prefix in `send_event` method

* Refactor ChatOutput class to use Properties and Source schemas for message properties

* update style in tailwind and add fallback for nullable values

* fix playground test

* Update message handling in Component class to send modified message copy on first chunk

* Add flow_id and session_id to ErrorEvent creation function

* Update content_blocks initialization and add flow_id parameter to ErrorMessage

* feat: include vertex ID in class instantiation

Pass the vertex ID to the custom component during instantiation to facilitate event tracking or management capabilities.

* fix: update message streaming logic to handle None messages and refactor _stream_message parameters

* feat: include flow_id in ChatOutput initialization

Add flow_id to the ChatOutput class to improve the tracking of conversational flows, enhancing the context management within the chat system.

* fix: update chat message source display to use 'source' instead of 'display_name'

* feat: add flow_id to message initialization in ChatOutput class

* fix: handle JSON parsing with type checks for message properties

Refine JSON loading to ensure proper type handling for message properties and content blocks, enhancing stability and preventing potential errors with non-string inputs.

* refactor: update logging structure and message handling

Improve the output logs to support logging multiple entries and ensure robust message streaming with type checking. Adjust error handling parameters for consistency.

* feat: restrict event types in registration and sending

Enhance event management by explicitly defining allowed event types, improving code clarity and reducing potential errors. This ensures only valid event types are registered and sent, leading to more robust event handling.

* Update `logs` attribute to store lists of `Log` objects in `Vertex` class

* feat: introduce TypedDicts for ContentBlock and Properties, update default values in Message model

* fix: restrict event types in send_event method to improve data validation

* Set default values for 'id', 'display_name', and 'source' fields in Source schema

* [autofix.ci] apply automated fixes

* fix: update query to use equality check for error messages

* make lint

* update simple agent test

* test: enhance EventManager tests for event_id validation

* feat: add background, chat icon, and text color properties to component toolkit

* fix: update LogComponent name to display_name for consistency

* remove playground from new cards on main page

* refactor: Update Properties handling in MessageTable and remove unused PropertiesDict

* fix: Set default value for category in MessageBase model

* fix: Update properties default factory in MessageTable model to use model_dump

* Add _build_source method to ChatOutput and update test inputs to use Message objects

* Fix incorrect parameter names in _build_source method across multiple JSON files

*  (freeze.spec.ts, playground.spec.ts, stop-building.spec.ts, linkComponent.spec.ts, sliderComponent.spec.ts, tableInputComponent.spec.ts, stop-button-playground.spec.ts, generalBugs-shard-7.spec.ts): enable tests that were previously skipped to ensure proper functionality and coverage. Remove outdated comments and update test descriptions for clarity.

* Refactor agent event processing to support message streaming and improve content handling

* Refactor ChatOutput to enhance message handling and streamline property assignment

* Fix session ID assignment in send_message method for better message handling

* Add OnTokenFunctionType protocol for enhanced token handling

* Add BorderTrail component for animated border effects

* Add ContentBlockDisplay component for enhanced content visualization and loading state

* Refactor TextShimmer to use motion.create for improved component animation

* Add ContentBlockDisplay to render chat content blocks in newChatMessage component

* Refactor `ChatOutput` class to use `MessageInput` instead of `MessageTextInput` for `input_value` across starter projects.

* Update edge class name from 'runned' to 'ran' in flow components and store

* Add 'on_build_start' and 'on_build_end' events to EventManager

* Add build status updates for 'build_start' and 'build_end' events in buildUtils.ts

* Integrate event management for output function in ComponentToolkit to track build start and end events

* Refactor event handling in ComponentToolkit to improve build event tracking

* Refactor messagesStore to update existing message if it already exists

* update properties to have state attribute

* format

* Refactor chatMessage component to display loading state for partial chat messages

* Refactor reactflowUtils to handle broken edges with missing display names

* fix agent text output

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes (attempt 2/3)

* fix agent component initialization

* Enhance error message formatting to include detailed exception information

* Refactor agent component for improved performance and stability

* Refactor `LCAgentComponent` to streamline agent execution logic and remove redundant methods

* Add type casting for send_message function in agent.py

* Change return type of function to 'Message' in log schema

* Add `embedding_service` and `client` fields to JSON configurations and refactor ChatOutput class

- Introduced `embedding_service` field in `Vector Store RAG.json` and `Travel Planning Agents.json` to support Astra Vectorize and embedding model selection.
- Added `client` field to `OpenAIEmbeddingsComponent` in JSON configurations for enhanced client configuration.
- Refactored `ChatOutput` class across multiple JSON files to include a new `_build_source` method for constructing `Source` objects, improving code modularity and readability.
- Updated import paths for `OpenAIEmbeddings` to reflect changes in the module structure.

* Update attribute handling in Component class to merge inputs with existing attributes

* Update ChatInput and ChatOutput initialization to include session_id

* Refactor test_load_flow_from_json_object to be asynchronous

* Add asynchronous tests for agent event handling in test_agent_events.py

* Add event handling functions for agent tool and chain events

- Implement functions to handle various agent events such as `on_chain_start`, `on_chain_end`, `on_tool_start`, `on_tool_end`, and `on_tool_error`.
- Introduce helper functions to build content blocks for agent messages.
- Create mappings for chain and tool event handlers.
- Refactor `process_agent_events` to utilize the new event handling functions.
- Remove the old `process_agent_events` implementation from `agent.py` and import the new one from `events.py`.

* feat: update content structure and validation logic

Enhance content block to accept a list of contents instead of a single item, and implement validation to ensure proper format. Refactor tool-related content types for improved clarity and functionality.

* Handle ValidationError in error message generation and update import paths

* feat: enhance error event creation to include structured error content

* move validators and remove utils.py

* feat: add event handler tests for agent tool and chain events

* refactor: streamline tool content structure

Combine multiple tool-related types into a single, more flexible interface. This simplifies the content handling by allowing optional properties for output, error, and timestamp, enhancing overall code maintainability. Adjust the ContentBlock interface to accommodate an array of contents for improved flexibility.

* feat: refactor error handling in ChatMessage component to support dynamic content blocks

* feat: enhance ContentBlockDisplay to support Markdown rendering and dynamic content handling

* Refactor agent event handling to simplify content block management

* Enhance `ContentBlockDisplay` with separators and improved content rendering logic

* add inline block to prevent text overflow in reason

* Refactor code to enhance Markdown rendering and dynamic content handling in ChatMessage component

* [autofix.ci] apply automated fixes

* Add timestamp field to BaseContent class and remove from ToolContent class

* Update timestamp validation to include fractional seconds in BaseContent class

* Add duration calculation for agent and tool events in events.py

* Refactor ContentBlock to use Pydantic's Discriminator and Tag for content types

* Add field validators for content_blocks and properties in Message class

* Add field serializer for source in Properties class

* Add type hint for serialize_properties method in MessageTable class

* create duration component and refactor contents

* [autofix.ci] apply automated fixes

* Refactor duration calculation to use perf_counter for improved accuracy and update ContentBlockDict to use dict for contents

* Update properties field validator to use 'before' mode for improved validation

* Refactor MessageTable to use ContentBlock instead of ContentBlockDict and enhance validation and serialization for properties and content_blocks

* Refactor AgentComponent to streamline agent initialization by using the set method directly

* Refactor event handling functions to use synchronous definitions and improve performance with asyncio.to_thread

* Refactor PythonREPLToolComponent to raise ToolException on error instead of returning error message

* Refactor CalculatorToolComponent to enhance error handling by raising ToolException and improving expression evaluation feedback

* Fix TextShimmer width in ContentBlockDisplay for improved layout consistency

* Enhance ContentBlockDisplay to support external links and math rendering in Markdown

* Enhance error handling in Calculator and Python REPL tools by introducing `ToolException` and improving expression evaluation logic.

* Refactor agent message properties to remove unnecessary icons and update content block titles for clarity

* feat: enhance agent and tool content messaging

Add headers to agent and tool content messages for better clarity and user experience.

* Handle nested schema structure in ContentBlock initialization

* fix: update agent input text content return type and enhance error message formatting

* Add placeholder and default value for model selection in AstraVectorStoreComponent

* Refactor event handling functions to remove `send_message_method` parameter and streamline message processing logic.

* Add model configuration to ToolContent for alias population

* Refactor agent event tests to improve message handling and content block initialization

* test: Update test durations for performance metrics

Adjust the recorded execution times for various test cases to ensure accurate performance tracking and facilitate optimization efforts.

* Refactor test_load_flow_from_json_object to improve project loading logic

* Make `HeaderDict` fields optional and update `header` field in `BaseContent`

* Enhance `Message` and `ChatOutput` with additional attributes for testing

* Update test duration metrics in .test_durations file

* Refactor `ContentDisplay` component to support multiple content types and improve rendering logic

* feat: Enhance duration display with human-readable format

Integrate the pretty-ms library to convert duration display metrics into a more user-friendly format, improving the overall user experience. Update dependencies to ensure compatibility with the latest version and optimize for newer Node.js versions.

* feat: Add optional duration and header properties to BaseContent interface

* fix: Change duration type from float to int in BaseContent class

* Remove default value for 'start_time' in duration calculations

* Enhance `ContentBlockDisplay` with dynamic header and expand/collapse animation

- Added `state` prop to `ContentBlockDisplay` to dynamically set header icon and title based on content state.
- Implemented `renderContent` function to encapsulate content rendering logic with animation.
- Integrated `ForwardedIconComponent` for displaying header icons.
- Updated `newChatMessage.tsx` to pass `state` prop to `ContentBlockDisplay`.

* Add animation to header title using AnimatePresence and motion components

* Add support for processing zip files with multithreading in FileComponent

- Enhanced FileComponent to handle individual and zipped text files.
- Introduced multithreading option for parallel processing of files within zip archives.
- Updated supported file types to include zip files.
- Improved error handling and logging for file processing.

* Expand `Message` conversion to support `AsyncIterator` and `Iterator` types.

* Remove unused function _find_or_create_tool_content from events.py

* Add header information to tool content and streamline message sending in event processing

* Add send_message_method parameter to event handlers for message dispatching

- Updated event handler functions to include a new parameter, `send_message_method`, allowing for message dispatching within the handlers.
- Modified the logic in each handler to utilize the `send_message_method` for sending messages.
- Adjusted the main event processing logic to pass the `send_message_method` to the appropriate handlers.

* Refactor ContentBlockDisplay component to improve rendering performance and user experience

* Refactor `ContentBlockDisplay.tsx` to improve readability and update header title logic

* [autofix.ci] apply automated fixes

* Add 'start_time' to event data and update test functions to include send_message mock

* Refactor ContentBlockDisplay component to include total duration and improve user experience

* Refactor ContentBlockDisplay component to handle isLoading state for total duration calculation

* Refactor animatedNumbers component and add AnimatedNumberBasic component

- Refactor the animatedNumbers component to improve readability and update the header title logic.
- Add a new component called AnimatedNumberBasic that displays an animated number with a specific value.

* Refactor agent message creation to improve event processing efficiency

* Refactor session ID assignment in run_graph_internal for improved clarity

* [autofix.ci] apply automated fixes

* fix: update agent message properties handling for improved compatibility

* fix: enhance message property validation to support dictionary input

* Add session_id to agent message initialization in tests

- Updated test cases in `test_agent_events.py` to include `session_id` in the `Message` initialization.
- Adjusted calls to `process_agent_events` to pass the `agent_message` with `session_id`.

* feat: Enhance event handling with duration tracking

Add start_time parameter to event handling functions to ensure consistent duration calculations across different stages of agent processing. This improves accuracy in measuring event durations and enhances overall event management.

* Add optional humanized value to AnimatedNumber component and update DurationDisplay usage

* Refactor `ContentDisplay` and add separator to `ContentBlockDisplay` component

* Add header to text content in agent message events

* Add separator between each content block in ContentBlockDisplay component

* Refactor layout in ContentDisplay component for improved styling and positioning

* Refactor event handlers to return updated start_time and agent_message

- Modified event handler functions to return a tuple of `agent_message` and `start_time`.
- Updated `_calculate_duration` to handle `start_time` as an integer.
- Ensured `start_time` is reset using `perf_counter()` after each event handling.
- Adjusted tool and chain event handler calls to accommodate the new return type.

* Add start_time and duration checks to agent event handlers in tests

- Updated test cases for `handle_on_chain_start`, `handle_on_chain_end`, `handle_on_tool_start`, `handle_on_tool_end`, `handle_on_tool_error`, and `handle_on_chain_stream` to include `start_time` as a return value.
- Added assertions to verify that `start_time` is a float and `duration` is an integer where applicable.

* [autofix.ci] apply automated fixes

* update colors and spacing of time

* [autofix.ci] apply automated fixes

* Refactor DurationDisplay component to display duration in seconds

* Rename case from "message" to "add_message" in buildUtils.ts switch statement

* Add event registration for message removal in EventManager

* Add category handling for message events in Component class

* Add custom exception handling for agent message processing

* Handle exceptions in agent event processing with message deletion and event notification

* Add new LLM options and refactor AgentComponent for dynamic provider handling

- Introduced new language model options: Anthropic, Groq, and NVIDIA.
- Refactored `AgentComponent` to utilize `MODEL_PROVIDERS_DICT` for dynamic provider handling.
- Simplified input management by removing hardcoded provider inputs and using a dictionary-based approach.
- Enhanced `update_build_config` to support flexible provider configurations and custom options.

* Refactor buildUtils.ts and add message removal handling

* Update Source model to allow None values for id, display_name, and source fields

* Refactor event handler functions to return tuple of Message and float

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
2024-11-06 23:35:35 +00:00
Cristhian Zanforlin Lousa
9394fe1ca6
feat: Enhance UI Consistency and Refactor Color Naming Conventions for Improved UX (#4424)
* 📝 (tailwind.config.mjs): refactor color classes from "inner-" to "accent-" for better clarity and consistency in naming conventions

* 🔧 (GenericNode/index.tsx): Remove unused imports and constants to clean up the code and improve maintainability
♻️ (GenericNode/index.tsx): Refactor GenericNode component by removing unnecessary code related to BuildStatus and BorderBeam to simplify the component and improve readability

* 🔧 (handleRenderComponent/index.tsx): rename innerColorName and innerForegroundColorName variables to accentColorName and accentForegroundColorName for better clarity and consistency
🔧 (handleRenderComponent/index.tsx): update CSS variables to use accent prefix instead of inner for better naming convention and readability
🔧 (handleRenderComponent/index.tsx): pass accentColorName and accentForegroundColorName props to HandleTooltipComponent for improved customization and styling

* 📝 (HandleTooltipComponent/index.tsx): Refactor HandleTooltipComponent to use Badge component for tooltip styling and add support for custom accent colors and foreground colors based on left alignment. Update styles and data-testid attributes accordingly.

* 📝 (NodeStatus/index.tsx): update border and text color classes for better visual consistency and clarity

* 🐛 (get-class-from-build-status.ts): fix incorrect condition to return class based on build status, now correctly returns class for BUILDING status

*  (nodeToolbarComponent/index.tsx): Add zoom functionality to NodeToolbarComponent using ReactFlow's store selector to dynamically adjust scale based on zoom level.

* 📝 (applies.css): add a new CSS class .toolbar-wrapper to style the toolbar with flex layout, spacing, border, background color, padding, and shadow for better visual appearance

* 📝 (index.css): Update accent color variables to improve consistency and readability in the stylesheet.

* [autofix.ci] apply automated fixes

* Update src/frontend/src/style/applies.css

Co-authored-by: Mike Fortman <michael.fortman@datastax.com>

* Update src/frontend/src/CustomNodes/GenericNode/components/HandleTooltipComponent/index.tsx

Co-authored-by: Mike Fortman <michael.fortman@datastax.com>

*  (NodeStatus/index.tsx): Improve border styling for selected and unselected nodes for better visual consistency
🔧 (applies.css): Remove unnecessary border width specification in various CSS classes to simplify styling and improve maintainability

* 🔧 (PageComponent/index.tsx): Update innerColor variable to accentColor for better clarity and consistency in styling
🔧 (sidebarFilterComponent/index.tsx): Update backgroundColor style to use accent color instead of inner color for better visual consistency
🔧 (nodeToolbarComponent/index.tsx): Add relative positioning to the buttons in the NodeToolbarComponent for better alignment on the page

*  (nodeToolbarComponent/index.tsx): Add styleClasses property to ShadTooltip component to apply custom styling for positioning
♻️ (applies.css): Refactor CSS classes to use shorthand notation for height and width properties, and update class names for better readability and maintainability

* 🔧 (nodeToolbarComponent/index.tsx): update button height class to improve consistency and readability

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Mike Fortman <michael.fortman@datastax.com>
2024-11-06 19:42:48 +00:00
Lucas Oliveira
de7b23ea93
fix: improve notes functionality, update theme colors definition and resolve ui and ux small bugs (#4414)
* Fixed background blur overlay color on dialogs

* Try to fix f5 error

* Fix text color of notes

* Fix bg color of nodenode to first one available if not existent

* Removed unused imports

* Added new node colors

* Updated color of placeholder note node

* Fixed notes to appear as soon as when the add button is clicked

* Added transparent option to notes

* Fixed editor design

* Fix design of notes editor

* Update text color on the note node description

* Added canvas dot variable

* Added size and gap definition to background dots

* Updated emerald colors and badge

* used correct badges on tableAutoCellRender

* Used correct colors on the component global variable badge

* Fix color on light mode

* Fixed emerald color on the status of component

* Applied static pink to active icons on navs

* Make sidebar narrower

* Updated size of /

* Fixed Beta and Legacy badges

* Fixed position of chevron

* Fixed node name input

* Updated clear search button

* Updated color for grid dots

* Updated sidebar filter color

* Added chat input check

* Fixed sorting of flow sidebar component

* Fix canvas color

* Updated sticky notes test

* Fixed tests

* Fixed test
2024-11-06 14:54:43 +00:00
Lucas Oliveira
91b650fd03
fix: sidebar animations, colors and minor design fixes (#4379) 2024-11-05 16:15:04 +00:00
anovazzi1
0d4ecd4601
feature: add new playground events (#4280)
* Refactor sessionSelector component to improve session management and interaction

* Refactor IOModal component to remove unused code and improve session management

* fix typing error

* fix run chat input on component level

* prevent toogle visibility on session menu

* fix bug on rename session while in table view mode

* chore: Update setSelectedView prop type in sessionSelector component

* add first test version not working yet

* fix bug for renaming and deleting session

* refactor: Update sessionSelector component to handle session changes

* improve test

* fix rename session multiple session bugs

* change visible session from array to string

* chore: Update editMessageField component to include margin-right for text span

* [autofix.ci] apply automated fixes

* Update down_revision in Alembic migration script

* Refactor IOModal component to simplify session visibility handling

* Add new schema for playground events with various event types

- Introduce `PlaygroundEvent` base class and specific event types: `MessageEvent`, `ErrorEvent`, `WarningEvent`, `InfoEvent`, and `TokenEvent`.
- Implement `ContentBlock` class for flexible content handling.
- Add factory functions to create different event types.
- Utilize Pydantic for data validation and serialization.

* Add PlaygroundEvent to LoggableType in log schema

* Add timestamp validation utility to schema utils and refactor Message class to use it

* Add custom serialization for datetime and Decimal in data schema

* Add session_id handling to graph and chat API

- Introduce `_session_id` attribute in the graph base class.
- Implement getter and setter for `session_id` property.
- Update chat API to set `session_id` from inputs if available.

* Add error handling for event creation in EventManager

- Integrate `create_event_by_type` to generate playground events.
- Add try-except block to handle `TypeError` during event creation and log the error using `loguru`.
- Raise any other exceptions encountered during event creation.

* Enhance session ID handling in vertex base logic

* Add message handling and streaming capabilities to custom component

- Introduced `send_message` method to handle message sending with optional formatting and content blocks.
- Implemented `_store_message`, `_send_message_event`, and `_should_stream_message` for message storage and event management.
- Added `_update_stored_message` and `_stream_message` to support message streaming and updating.
- Included `_handle_async_iterator` and `_process_chunk` for processing message chunks from iterators.

* Add new schema types and properties for chat and messages components

* Add customizable chat message styles and icons in IOModal component

* Add support for handling Playground events in chat view

- Introduced `PlaygroundEvent` type to manage different event types such as message, error, warning, info, and token.
- Implemented `handlePlaygroundEvent` function to process and update chat history based on event type.
- Enhanced file parsing logic to handle empty strings and parsing errors.
- Added default values for `background_color` and `text_color` in chat messages.

* revert changes made to bypass ruff-check

* revert changes made to bypass ruff-check

* Refactor file parsing logic in ChatView component

* fix ui problem

* Refactor feature flags and chat view components

- Enable new IO modal in feature flags
- Update imports and remove unused code in newChatMessage component
- Add error icon and error message in ChatMessage component
- Update lockChat icon position in newChatView component
- Import OctagonAlert icon in styleUtils

* Refactor IOModal newModal component styles

* Refactor styles in EditMessageField and ChatMessage components

* Refactor styles in EditMessageField component

* Refactor styles in ChatMessage component to fix UI problem

* Refactor styles in UploadFileButton component and add image attachment tooltip

* Refactor styles in ChatCodeTabComponent to update language text color

* fix padding in other field views

* Refactor styles in ChatComponent and add tooltip to the playground

* Refactor styles in constants.ts to remove unused input and output types

* Refactor session selector styles

* Refactor chatView component styles

* update colors to use variables

* Refactor code tab component and update code styling

* Refactor buttonSendWrapper component styles

* update colors to use variables

* update colors to use variables

* Refactor chatComponent and chatInput styles

* update colors to use variables

* chore: add new attributes to model definition

* chore: generate database migration

* chore: add MetaData and ContentBlock models and update Message schema

* chore: add error handling to build_results and adjust message event handling

* chore: deserialize meta_data and content_blocks fields in add_messagetables

* raw

* Refactor message and chat types to include category, meta_data, and content_blocks

* raw

* Refactor error handling in component.py and newChatMessage.tsx

* add source to bot messages

* raw

* Refactor chatMessage component to include meta_data icon and source

* improve icon, background color, text color handling in chat message

* add edit flag correctly

* use svg icon logo instead of chain emoji

* add text effect

* update error colors

* fix error aligment

* add text shimmer effect

* improve is running style

* Add support for importing SVG files in Vite environment

* Add chatLogoIcon component with Chain logo

* Refactor chat message component to use chatLogoIcon component

* Refactor chatView component to use chatLogoIcon component

* remove from empty chat

* update text sizes and style

* remove icon in message logs

* fix stop button color

* update background color and sender name size

* prevent list index out of range error

* Fix onBlur event in EditMessageField component

* improve edit message field

* improve edit background behaviour

* Update chat input styling for better user experience

* Refactor ChatCodeTabComponent to remove redundant "Copy" text in button

* Refactor code to use CSS variables for background color in code blocks

* Refactor ChatCodeTabComponent to update code block styling

* Refactor code to update code block styling and improve chat input styling

* prevent Flow Running after error rendering

* Refactor code to add IOModalOpen state and setter function

* Refactor code to add IOModalOpen state and setter function

* Refactor code to remove console.log statement

* update icon and padding

* Refactor code to retrieve connected model name in ChatComponent

* run formatter

* fix stop button glitch

* update max width

* Refactor GithubStarButton component to handle null value for stars

* Refactor tailwind.config.mjs to add utility classes for fading text truncation

* improve faded truncate function

* Refactor ChatView component to handle null value for chat history category

* [autofix.ci] apply automated fixes

* Refactor DialogContent component to improve close button styling

* Refactor IOModal component to improve sidebar behavior and styling

* Refactor ChatView component to remove unused code and improve performance

* Refactor session selector component to add tooltip for options

* [autofix.ci] apply automated fixes

* update several icon sizes and hover states

* [autofix.ci] apply automated fixes

* Refactor IOModal component to improve sidebar behavior and styling

* Refactor IOModal component to handle sidebar behavior on window resize

* [autofix.ci] apply automated fixes

* fix error related to content blocks being null

* [autofix.ci] apply automated fixes

* add component id as sender to the message

* add component id as source to the message

* Add fitViewNode function to FlowStoreType

* enable closing chat on error message

* Add ClickableLinks component for rendering clickable URLs in chat messages

* add error message transition

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes (attempt 2/3)

* use IsPlayground flag

* Remove console.log statement in setIOModalOpen function

* update max-w

* prevent breaking the buttons on small screen

* [autofix.ci] apply automated fixes

* remove underline when component is not clicable

* Refactor IOModal component to remove unnecessary props and update usage

- Remove the "isPlayground" prop from the IOModal component in cardComponent and storeCardComponent
- Update the usage of the IOModal component in chatComponent and newModal to use the "canvasOpen" prop instead of "isPlayground"

* fix html missing closing tag error

* [autofix.ci] apply automated fixes

* Refactor PlaygroundPage component to improve flow initialization and data fetching

* [autofix.ci] apply automated fixes

* Refactor cardComponent and storeCardComponent to comment out playground buttons

* Refactor message model to replace 'meta_data' with 'properties' and update related schema and components

* Add new schema for content types with Pydantic models

* Add ContentBlock schema with support for multiple content types

* Refactor: Import ContentBlock from langflow.schema.content_block instead of defining locally

* Add SendMessageFunctionType protocol to log schema for message handling

* Refactor chat message model to replace 'meta_data' with 'properties' and update related components

* Add ContentBlock import and enhance send_message method in component.py

- Import ContentBlock from langflow.schema.content_block.
- Replace 'meta_data' with 'properties' in message construction.
- Update send_message method to handle optional Message and text parameters.

* Add async on_chain_start method to callback for logging chain start events

* Refactor add_messagetables function to replace 'meta_data' with 'properties' in message processing

* Fix typo in 'traceback' property name in ErrorDetails interface

* Add condition to check chat history length before rendering chat lock

* Refactor error content structure and enhance message event handling

* Add `update_messages` function to handle message updates in memory module

* Add check for 'id' attribute in stored_message for message validation

* Add new content types and TypeAlias for schema in content_types.py

* Add custom serialization for UUID and BaseModel types in data schema

* Refactor `ContentType` to use `ContentTypes` union and update `content` field in `ContentBlock` model

* Update model to use specific types for properties and content_blocks fields

* Change return type of 'serialize_params' method to string

* Add sender fields and properties handling to PlaygroundEvent and create_message function

* Refactor chat message component to use 'properties' instead of 'meta_data' for chat attributes

* Refactor message handling to improve error categorization and session management

* Enhance ContentBlock initialization to update model fields with defaults

* Add new content types and update ContentBlock interface in chat types

- Introduced BaseContent interface and various content types: ErrorContent, TextContent, MediaContent, JSONContent, CodeContent, ToolStartContent, ToolEndContent, and ToolErrorContent.
- Created a union type ContentType for all content types.
- Updated ContentBlock interface to include new content structure and additional fields.

* Refactor error handling in chat messages to use `ErrorContent` type

* Add ErrorMessage class for handling error-specific messages in schema

* Add type annotations for cache and logs in custom_component.py

* Refactor error handling in custom component to use `send_error` method

* Add customizable properties for chat components

- Introduced new properties: `background_color`, `chat_icon`, and `text_color` to chat components across various starter projects.
- These properties allow for customization of the chat message appearance, including icon and text styling.
- Updated the `ChatInput` and `ChatOutput` components to handle these new properties and include them in the message response.

* Add 'category' field to MessageEvent and update create_message function

* Remove unused message handling methods from ChatComponent

* Refactor message event handling in chat module

* Add 'category' field to Message creation and pass 'id_' in _send_message_event

* Add 'category' field with Literal type to Message schema and default handling in chat IO

* Refactor message event handling in chat module

* Refactor buttonSendWrapper component to add data-testid attribute

* Refactor ChatComponent to replace 'store_message' with 'send_message' method

* refactor: streamline message handling in Component

Update message processing to utilize new methods for improved clarity and efficiency. Enhance event data management to ensure accuracy and consistency in message updates.

* feat: Update input handling and output storage for chat components

Enhance chat input and output components to improve message handling, including updates to storage and display properties. This facilitates better user experience and message management in various agent projects.

* Ensure 'id' field is set in message data dictionary if not present

* refactor: Simplify property retrieval from source component in ChatComponent

* refactor: Replace property retrieval logic with a dedicated method in ChatOutput

* Refactor `TokenEvent` class and add `timestamp` field with default factory

* refactor: Simplify message processing by removing unused parameters in async handling

* Refactor message text update logic in messagesStore

* Refactor border styling in ChatInput component

* refactor: Consolidate properties handling in PlaygroundEvent and create_message function

* refactor: Update timestamp formatting to include timezone information across multiple models

* refactor: Add StreamingError exception for better error handling in streaming components

* refactor: Add source_display_name attribute to Properties model for enhanced data representation

* refactor: Enhance ChatComponent to return source display name and update properties handling in ChatOutput

* refactor: Improve error handling in Component class and enhance create_error function with timestamp support

* feat: enhance ChatOutput component for improved message handling

Update the message_response method to include source display name and improve message storage functionality across various project templates. This enhances clarity and ensures consistent behavior of chat components.

* feat: add delete_message function to remove messages by ID from the monitor service

* Add error handling for message streaming and implement message deletion on failure

* feat: Enhance message streaming and event handling

Improve the streaming process to send message events only for non-streaming messages and ensure the initial message is sent correctly when processing chunks, enhancing the overall message handling flow.

* improve UI

* Refactor buttonSendWrapper component to add data-testid attribute and update tests

* fix edited tag

* add tooltip to add button

* fix bug after merge

* update examples

* updateinput without chat

* fix some frontend tests

* fix test

* update test

* Update fileUploadComponent.spec.ts to fix test and update input without chat

* refactor event creation functions and enhance ErrorEvent structure

* refactor ErrorMessage to use Source for sender and component details

* refactor Properties to use Source model for source details and add validation

* refactor ChatMessage component for improved readability and structure

* refactor ChatMessageType to use PropertiesType for improved structure and clarity

* Add Source ID to message properties and update exception handling

- Updated `message_response` method to include `source_id` in the `Properties` object for better traceability.
- Modified `StreamingError` to use `Source` object instead of `component_name` for more detailed error context.
- Adjusted `get_properties_from_source_component` to return `source_id` along with other properties.

* Add 'Source' property to error handling in custom_component module

- Introduced 'Source' property to enhance error message details.
- Updated error handling to include 'source' instead of 'display_name'.
- Modified exception raising to use 'source' for better traceability.

* Enhance event ID generation with event type prefix in `send_event` method

* Refactor ChatOutput class to use Properties and Source schemas for message properties

* update style in tailwind and add fallback for nullable values

* fix playground test

* Update message handling in Component class to send modified message copy on first chunk

* Add flow_id and session_id to ErrorEvent creation function

* Update content_blocks initialization and add flow_id parameter to ErrorMessage

* feat: include vertex ID in class instantiation

Pass the vertex ID to the custom component during instantiation to facilitate event tracking or management capabilities.

* fix: update message streaming logic to handle None messages and refactor _stream_message parameters

* feat: include flow_id in ChatOutput initialization

Add flow_id to the ChatOutput class to improve the tracking of conversational flows, enhancing the context management within the chat system.

* fix: update chat message source display to use 'source' instead of 'display_name'

* feat: add flow_id to message initialization in ChatOutput class

* fix: handle JSON parsing with type checks for message properties

Refine JSON loading to ensure proper type handling for message properties and content blocks, enhancing stability and preventing potential errors with non-string inputs.

* refactor: update logging structure and message handling

Improve the output logs to support logging multiple entries and ensure robust message streaming with type checking. Adjust error handling parameters for consistency.

* feat: restrict event types in registration and sending

Enhance event management by explicitly defining allowed event types, improving code clarity and reducing potential errors. This ensures only valid event types are registered and sent, leading to more robust event handling.

* Update `logs` attribute to store lists of `Log` objects in `Vertex` class

* feat: introduce TypedDicts for ContentBlock and Properties, update default values in Message model

* fix: restrict event types in send_event method to improve data validation

* Set default values for 'id', 'display_name', and 'source' fields in Source schema

* [autofix.ci] apply automated fixes

* fix: update query to use equality check for error messages

* make lint

* update simple agent test

* test: enhance EventManager tests for event_id validation

* feat: add background, chat icon, and text color properties to component toolkit

* fix: update LogComponent name to display_name for consistency

* remove playground from new cards on main page

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: italojohnny <italojohnnydosanjos@gmail.com>
2024-11-04 23:58:16 +00:00
Cristhian Zanforlin Lousa
5a4d4c8bc4
fix: stop taking zoom into account in tooltip render (#4377)
* 🔧 (handleRenderComponent/index.tsx): Remove unused getTranslateX function and simplify tooltip positioning logic to improve code readability and maintainability.

* ⬆️ (auto-login-off.spec.ts): update tests to include explicit wait times for elements to be visible
⬆️ (userSettings.spec.ts): update tests to include explicit wait times for elements to be visible

*  (userSettings.spec.ts): update test to interact with global variables by clicking on checkbox and deleting an item to ensure proper functionality

*  (store-shard-2.spec.ts): Refactor test to use a reusable function for clicking elements and waiting for visibility to improve code readability and maintainability
🔧 (deleteFlows.spec.ts): Refactor test to use separate functions for waiting for and interacting with elements to improve code readability and maintainability

* 🐛 (store-shard-2.spec.ts): fix incorrect text comparison for filtering by tag in tests to match the actual text displayed on the page

*  (store-shard-2.spec.ts): mark the test as skipped to prevent it from running due to missing STORE_API_KEY environment variable

*  (deleteFlows.spec.ts): skip the test case "should delete a flow" to prevent it from running due to missing STORE_API_KEY environment variable

*  (store-shard-3.spec.ts): skip tests that require STORE_API_KEY environment variable to run, as it is not available in the test environment
2024-11-04 23:31:01 +00:00
Deon Sanchez
85cffda753
LFEN-215 HomePage Uplift (#4242)
* refactor: Remove CustomHeader component from AppWrapperPage

* refactor: Remove unused code and fix formatting in MainPage component

- Remove commented out code and unused imports
- Fix indentation and formatting issues in the component

* colors update and component building

* refactor: Update grid and list components in MainPage

- Update grid component in MainPage to use custom navigation hook
- Add folderId parameter to editFlowLink in grid component
- Update list component in MainPage to use custom navigation hook
- Add folderId parameter to editFlowLink in list component

Refactor the grid and list components in MainPage to use the custom navigation hook instead of the react-router-dom's useNavigate hook. This allows for better control and customization of navigation within the components. Additionally, the editFlowLink now includes the folderId parameter when navigating to the flow edit page.

Closes #<issue_number>

* refactor: Update grid and list components in MainPage

Refactor the grid and list components in the MainPage to improve performance and enhance user experience. This includes updating the styling, optimizing code, and fixing formatting issues.

* Refactor header component to dynamically display folder name

* Refactor CSS styles and button component

- Update CSS styles in applies.css to adjust the position of the header notifications dot.
- Refactor the button component in button.tsx to fix a typo in the class names.

Closes #4259

* Refactor folder store and sidebar components

* Refactor header component to dynamically toggle folder sidebar visibility

* Refactor CSS styles and button component

* Refactor CSS styles and button component

* Refactor CSS styles to adjust the width of the text container

* Refactor dropdown and grid components to handle playground click

* Refactor folder sidebar and list components

* Refactor CSS styles and components for HeaderMenu, GridComponent, and ListComponent

* Refactor CSS styles and components for HeaderMenu, GridComponent, ListComponent, dropdown, and button

* Refactor CSS styles to adjust the width of the text container in ListComponent

* refactor: Update folder name display in EmptyPage component

* refactor: Update folder name display in FlowMenu component

* refactor: Update folder name display in AccountMenu and EmptyPage components

* refactor: Update folder name display in AccountMenu, EmptyPage, and FlowMenu components

* refactor: Update folder name display in AppHeader, DashboardWrapperPage, and HomePage components

* refactor: Update folder name display in MainPage components

- Update folder name display in AppHeader, DashboardWrapperPage, and HomePage components
- Update folder name display in AccountMenu, EmptyPage, and FlowMenu components
- Update folder name display in AccountMenu and EmptyPage components
- Update folder name display in FlowMenu component
- Update folder name display in EmptyPage component

Update the folder name display in various components of the MainPage. This ensures that the folder names are correctly displayed in the UI. The affected components include AppHeader, DashboardWrapperPage, HomePage, AccountMenu, EmptyPage, and FlowMenu. This refactor improves the consistency and user experience of the application.

* refactor: Update folder name display in EmptyPage and HomePage components

* refactor: Update folder name display in AppHeader, DashboardWrapperPage, and HomePage components

* refactor: Update folder name display in MainPage components

* file organization

* Refactor folder name display in MainPage, ListComponent, and HomePage components

* Refactor folder name display in MainPage components

* test fixes

* test fixes part 2
2024-11-01 17:23:10 -03:00
Lucas Oliveira
794848d5e9
feat: redesign sidebar with new components and features (#4307)
* Added required ShadCN Components

* Added required colors

* Added required icons

* Changed backend to not return beta tag

* Added sidebar categories api call

* Added required use-mobile hook

* Refactored icons to allow sizing

* Added type for sidebar category

* Allowed no name on shortcut display

* Added flow sidebar component that uses ShadCN sidebar

* Added SidebarDraggableComponent with the new style

* Replaced sidebar with current one on FlowPage

* Added sidebar fixed footer with options to go to store and add custom component

* Updated sidebar categories

* Updated background color for sidebar

* Changed size of Components title

* Added color to PageComponent

* Added required icons

* added CustomComponent category and removed custom component from helpers

* create hook useAddComponent

* Use hook to add components both in PageComponent and flowSidebarComponent

* Implement search

* Implement searching and filtering by clicking on edge

* Added check to see if store is present

* Updated colors to match new color schema

* Changed styling of filter component

* Added Beta and Legacy badges

* Implement Show Beta Components and Show Legacy Components

* Fixed styling for sidebar config when collapsed

* Refactored search to filter for tags

* Refactor useeffect

* Updated config button styling

* Implemented keyboard navigation

* Fixed filtering

* Updated color of canvas

* Implemented disclosure on sidebar settings and fetched bundles

* Added temp sidebar bundles

* Fixed badge styling

* Added bundles to categories response in frontend

* Added legacy to components

* Added link to store instead of langflow.store

* Added required data-testids

* Fixed tests to use new data-testids and new sidebar disposition

* Fix github star bug

* Fixed tests that used the custom component

* Changed test to test beta and legacy checkers

* added a test for keyboard navigation on sidebar

* Added a test to check component add by hover the plus button

* [autofix.ci] apply automated fixes

* updated sidebar switch change

* Removed changes on Backend and used only Frontend constants for categories

* merge fix

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes (attempt 2/3)

* 📝 (custom_component): Add CustomComponent class with input and output definitions
📝 (custom_component): Create CustomComponent class with display name, description, and documentation link
📝 (custom_component): Define input and output properties for CustomComponent class
📝 (custom_component): Implement build_output method in CustomComponent class
📝 (Ollama): Remove unnecessary whitespace in SvgOllama component

* formatting

* ♻️ (custom_component/__init__.py): refactor import statement to match the correct case of the file name for better consistency and readability

* 🔧 (FlowPage/index.tsx): remove FlowToolbar component when view prop is false to improve UI consistency

* 📝 (integration-side-bar.spec.ts): Comment out unnecessary code blocks related to API requests and modals to improve test readability and focus on the main test scenarios.

* [autofix.ci] apply automated fixes

*  (flowSidebarComponent/index.tsx): add data-testid attribute to Sidebar component for testing purposes
🔧 (integration-side-bar.spec.ts): update test to use new data-testid attribute 'shad-sidebar' for Sidebar component to match changes in the codebase

*  (stop-building.spec.ts): refactor test case to use a more descriptive test element for clicking on the sidebar custom component button

* format

* 🐛 (AstraDB): Fix variable naming inconsistency for isDark to isdark in AstraDB component
🐛 (HCD): Fix variable naming inconsistency for isDark to isdark in HCD component
🐛 (index.tsx): Fix variable naming inconsistency for isDark to isdark in index.tsx files
📝 (flowSidebarComponent): Refactor search functionality to normalize search terms and improve metadata search
📝 (filterEdge-shard-1.spec.ts): Update test to check visibility of specific model specs in the sidebar

* [autofix.ci] apply automated fixes

*  (decisionFlow.spec.ts): add a delay of 500ms to ensure proper timing in the test case execution

*  (decisionFlow.spec.ts): Update the X positions of elements in the flow to improve the visual representation and alignment of the elements.

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
2024-10-31 22:51:36 +00:00
Cristhian Zanforlin Lousa
099a057d4f
feat: Update Components and Nodes UI enhancements (#4236)
*  (frontend): introduce lastOutput property to NodeOutputFieldComponentType to indicate if it is the last output field

* ♻️ (applies.css): refactor styles for generic-node-div-title and generic-node-icon classes to improve consistency and readability

* 🔧 (use-icons-status.tsx): Update icon sizes and classes for better UI consistency and readability

* 🔧 (NodeStatus/index.tsx): Update CSS classes for border and icon sizes to improve styling and consistency

*  (NodeOutputField/index.tsx): Add support for displaying last output field in a different style by adding a conditional class based on the lastOutput prop
🔧 (NodeOutputField/index.tsx): Update classNames to improve styling and readability of the NodeOutputField component

*  (NodeName/index.tsx): update NodeName component to use a font-medium class for better text styling

* 🔧 (NodeDescription/index.tsx): Remove unused CSS class "generic-node-desc" to clean up code
♻️ (NodeDescription/index.tsx): Refactor Markdown component class names for better readability and maintainability

* 🔧 (GenericNode/index.tsx): Refactor renderOutputParameter function to accept an additional parameter 'lastOutput' to handle styling based on the last output field
🔧 (GenericNode/index.tsx): Update styling classes for the node container to adjust width and border radius based on showNode state
🔧 (GenericNode/index.tsx): Add grid layout and padding to the node container for better alignment and spacing
🔧 (GenericNode/index.tsx): Adjust layout and styling for the NodeDescription component within the node container
🔧 (GenericNode/index.tsx): Modify the logic to pass 'lastOutput' flag to renderOutputParameter function based on the index of the output field
🔧 (GenericNode/index.tsx): Update renderOutputParameter function to handle the last output field differently in the mapping loop

* 🔧 (frontend/package-lock.json): remove tinycolor2 package from package-lock.json as it is no longer used in the project

*  (getenvvar.py): update icon property value to "code" for better representation in the UI

* 📝 (CustomComponent.py): update icon attribute value from "custom_components" to "code" for better representation

*  (ChatInput.py): update icon property value to "messages-square" for better representation of the component

*  (ChatOutput.py): update icon property value to "messages-square" for better representation in the Playground

* updating basic examples icon name

* 🔧 (NodeOutputfield/index.tsx): refactor NodeOutputField component to correctly display errorOutput icon and apply appropriate styling based on conditions

* ♻️ (NodeStatus/index.tsx): remove unnecessary 'selected' parameter from useIconStatus function to simplify the code and improve readability

* 🐛 (get-class-from-build-status.ts): fix logic to correctly determine class based on build status and validation status
💡 (get-class-from-build-status.ts): remove unnecessary condition for 'selected' variable in determining class from build status

* 🔧 (use-icons-status.tsx): remove unused 'selected' parameter from useIconStatus hook to clean up code and improve readability
🔧 (use-icons-status.tsx): update className in Xmark component to use 'text-destructive' instead of 'text-status-red' for better semantic naming

* 📝 (GenericNode/index.tsx): Add tooltips for showing and hiding hidden outputs in GenericNode component for better user experience
📝 (constants.ts): Add constants for tooltips to show and hide hidden outputs in GenericNode component for better user experience

* change messageIcons

* add inter font to project

*  (frontend/index.html): add JetBrains Mono font from Google Fonts for better code readability and aesthetics

* 📝 (tailwind.config.mjs): remove unused font family configuration to clean up the code
 (tailwind.config.mjs): add new custom color variables for emerald theme
♻️ (tailwind.config.mjs): refactor font family configuration to include 'JetBrains Mono' font for better code readability

* 📝 (inputComponent/index.tsx): import getIconName function to resolve icon names dynamically
📝 (inputComponent/index.tsx): add nodeStyle prop to InputComponent for conditional rendering
📝 (inputComponent/index.tsx): update classNames and styles for better UI/UX and accessibility

*  (get-icon-name.ts): add a new helper function getIconName to determine the icon name based on the input parameters

*  (get-input-class-name.ts): Add a new helper function getInputClassName to dynamically generate class names based on input properties for better styling and customization.

* 📝 (index.tsx): Add useEffect hook to dynamically adjust input width based on selected option length
📝 (index.tsx): Refactor className logic to use a helper function for better readability and maintainability

*  (inputGlobalComponent/index.tsx): add nodeStyle prop to InputComponent to apply specific styling to the component

*  (promptComponent/index.tsx): Add support for dark mode in prompt component rendering
📝 (promptComponent/index.tsx): Refactor prompt component to improve readability and maintainability by extracting classes and functions for prompt content and external link icon rendering

*  (textAreaComponent/index.tsx): Introduce support for dark mode by using the useDarkStore hook and adding conditional styling based on the dark mode state. Add constants for text area content classes, external link icon classes, and password toggle classes for better organization and reusability. Update render functions to use the new constants and improve readability. Add support for displaying different icons based on the password visibility state.

*  (get-gradient-class.ts): introduce new helper function getBackgroundStyle to dynamically set background style based on disabled and isDark parameters

*  (get-textarea-content-class.ts): introduce a new helper function getTextAreaContentClasses to dynamically generate CSS classes based on input parameters

*  (constants.ts): add gradient classes for styling purposes
📝 (constants.ts): add constant for receiving input value to improve code readability

* 🐛 (NodeInputField/index.tsx): Fix styling issue in NodeInputField component to correctly display the tooltip and custom parameter title. Adjust spacing and font size for better readability.

*  (frontend): introduce a new GlobeOkIcon component to display an icon of a globe with a checkmark for use in the frontend of the application

*  (styleUtils.ts): introduce new GlobeOkIcon and Scan icons to the list of node icons for Lucide icons set.

* 📝 (frontend): remove unused imports and functions to clean up the code and improve maintainability
♻️ (frontend): refactor InputComponentType interface to include new property nodeStyle for better component customization

* 📝 (index.css): add new color variables for emerald icon, smooth, and hard shades to enhance design consistency

* 📝 (applies.css): remove unnecessary whitespace to improve code readability

*  (globe-ok.jsx): Add new SVG icon component for a globe with a checkmark
♻️ (index.tsx): Refactor NodeToolbarComponent styles to remove unnecessary ring styling and improve readability and maintainability

* 📝 (textAreaComponent/index.tsx): update CSS class 'normal' to use 'text-border' instead of 'text-muted-foreground' for better styling consistency
📝 (index.css): remove unnecessary empty line in CSS file

* 📝 (inputComponent): Update class name for disabled state to improve readability and maintain consistency
📝 (popover/index): Import constant RECEIVING_INPUT_VALUE for placeholder text
📝 (inputComponent/index): Update cursor style for disabled state to improve user experience
📝 (inputGlobalComponent): Import getPlaceholder function for setting placeholder text based on disabled state
📝 (promptComponent): Import getPlaceholder function for setting placeholder text based on disabled state
📝 (textAreaComponent): Import getPlaceholder function for setting placeholder text based on disabled state
📝 (get-placeholder-disabled): Create helper function to handle placeholder text based on disabled state
🔧 (applies.css): Add style for disabled text input to use smooth zinc color
🔧 (index.css): Add custom CSS variable for smooth zinc color
🔧 (tailwind.config.mjs): Add custom Tailwind CSS color for smooth zinc to theme configuration

*  (tailwind.config.mjs): add new color variable "hard-zinc" to the Tailwind CSS configuration for consistency and future use.

*  (dropdownComponent/index.tsx): Add support for dynamic placeholder name based on the 'name' prop value to improve user experience.

* 🔧 (inputComponent/index.tsx): update icon size classes from h-5 w-5 to h-4 w-4 for better UI consistency

* 📝 (get-input-class-name.ts): update disabled input class to use a custom style for better visual representation

*  (utils.ts): introduce a new function formatPlaceholderName to format a given name into a user-friendly placeholder string with proper grammar.

*  (frontend): introduce a new 'name' property to the DropDownComponent type to allow passing a name attribute to the component.

* 🐛 (popover/index.tsx): fix input component not being read-only when disabled to improve user experience

*  (types.ts): add 'name' property to DropDownComponentType to provide a unique identifier for the component.

*  (dropdownComponent/index.tsx): add support for passing a name prop to the DropdownComponent to improve component flexibility

* ♻️ (promptComponent/index.tsx): refactor CSS classes for promptComponent to improve readability and maintainability

*  (strRenderComponent): add support for optional 'name' property in StrRenderComponent to improve flexibility and avoid potential errors

* 🔧 (textAreaComponent/index.tsx): Update CSS classes for better styling and readability in TextAreaComponent

* ♻️ (get-textarea-content-class.ts): refactor logic to simplify the condition for applying disabled class

* 🐛 (button.tsx): fix disabled state opacity value to 100% to ensure button is fully disabled visually

* 📝 (constants.ts): update gradient colors in constants to improve visual consistency and accessibility

* 📝 (applies.css): add a new custom style for disabled input fields to improve user experience and accessibility
♻️ (applies.css): refactor existing styles for disabled text input fields to use new utility classes for consistency and maintainability

* 📝 (index.css): add new CSS variable --hard-zinc to define a color shade for better styling consistency

*  (tailwind.config.mjs): introduce new color variable "smooth-red" to the tailwind configuration for use in styling.

* 🐛 (index.tsx): Fix inputWidth calculation to improve accuracy and consistency in popover component styling

*  (parameterRenderComponent/index.tsx): improve code readability by adding name prop to DictComponent and size prop to ToggleShadComponent

*  (dictComponent/index.tsx): Add support for dynamic placeholder name based on input name prop to improve user experience.

* 🔧 (index.tsx): Update classNames for button and input elements to improve styling and readability
🔧 (index.tsx): Change button icons to be more descriptive and improve button styling for better user experience

* 📝 (index.css): add missing semicolons to the CSS custom properties declarations for consistency and to prevent potential issues with the styles.

* 📝 (applies.css): add pointer-events-none class to disabled-state to prevent user interaction with disabled elements

*  (NodeInputField/index.tsx): Add support for FLEX_VIEW_TYPES to determine flex layout type dynamically
🔧 (NodeInputField/index.tsx): Update classNames in NodeInputField component to handle flex layout based on FLEX_VIEW_TYPES
🔧 (refreshParameterComponent/index.tsx): Remove unnecessary 'w-full' class from parent div in RefreshParameterComponent
🔧 (tableAdvancedToggleCellRender/index.tsx): Remove 'size="small"' prop from TableAdvancedToggleCellRender component
♻️ (switch.tsx): Refactor Switch component to adjust the size and position of the thumb element
📝 (constants.ts): Add FLEX_VIEW_TYPES constant to define types that support flex layout in NodeInputField

* 🔧 (dictComponent/index.tsx): remove unnecessary console.log statement from DictComponent to clean up code and improve readability

* 🔧 (get-input-class-name.ts): Remove unnecessary disabled class from getInputClassName function
🔧 (index.tsx): Replace readOnly prop with disabled prop in CustomInputPopover component
🔧 (index.tsx): Replace readOnly prop with disabled prop in Input component
🔧 (applies.css): Update disabled styles in primary-input class to improve accessibility and consistency

*  (File.py): Update description in FileComponent to provide clearer information on its purpose
 (Document QA.json, Vector Store RAG.json): Update description in FileComponent to provide clearer information on its purpose

* 🔧 (tailwind.config.mjs): update tailwind configuration to use a more descriptive class name for accent-emerald-foreground color
♻️ (tailwind.config.mjs): refactor the font-family definition in the tailwind configuration for better readability and maintainability

*  (styleUtils.ts): introduce new CircleCheckBig icon to the nodeIconsLucide iconsType for use in the frontend application.

*  (inputComponent/index.tsx): update CSS class name for better readability and consistency

*  (index.tsx): refactor InputFileComponent to improve UI and user experience by updating the file upload input field and button styling and behavior.

* 🔧 (use-icons-status.tsx): change class order for Checkmark component to improve styling consistency

* 📝 (globe-ok.jsx): fix indentation and formatting issues in SvgGlobeOkIcon component to improve code readability and maintainability

* 📝 (index.css): remove duplicate color variables and fix typo in variable name to improve consistency and readability in the CSS file

* 📝 (frontend): update CSS classes to use 'text-placeholder' instead of specific color names for better consistency and maintainability

* 🐛 (popover/index.tsx): fix calculation of inputWidth to prevent unnecessary padding on popover input field

* 🔧 (index.tsx): Remove unused import of RECEIVING_INPUT_VALUE constant from constants file
🔧 (index.tsx): Remove unused import of RECEIVING_INPUT_VALUE constant from constants file

*  (keypairListComponent/index.tsx): Refactor component to improve readability and maintainability by splitting logic into smaller functions and improving code structure.

*  (intComponent/index.tsx): Add increment and decrement icons to the NumberInputStepper for better user experience and visual feedback.

*  (tailwind.config.mjs): add new variants for text color to support increment and decrement hover effects
♻️ (tailwind.config.mjs): refactor code to add custom variants for group increment and decrement hover effects

* ♻️ (index.css): remove duplicate and unused CSS variables to clean up the code and improve maintainability

*  (NodeOutputfield/index.tsx): Update CSS classes for text color and hover effect to improve styling consistency
 (NodeStatus/index.tsx): Update CSS class for text color to improve styling consistency
 (GenericNode/index.tsx): Update CSS classes for text color, hover effect, and group styling to improve styling consistency
 (popover/index.tsx): Update CSS classes for background color and width calculation to improve styling consistency
 (applies.css): Update CSS classes for placeholder text color, border color, and disabled styles to improve styling consistency

*  (HandleTooltipComponent): Update text and background styles for better readability and consistency
♻️ (NodeName): Adjust margin for better spacing
♻️ (NodeOutputfield): Change darkTooltip prop to contrastTooltip for clarity
♻️ (NodeStatus): Rename isDark prop to isBuilding for better semantics
♻️ (handleRenderComponent): Add contrastTooltip prop for consistency
♻️ (GenericNode): Change darkTooltip prop to contrastTooltip for clarity
♻️ (get-class-from-build-status): Rename isDark parameter to isBuilding for better semantics
♻️ (inputComponent): Add console log for debugging purposes
♻️ (shadTooltipComponent): Rename darkTooltip prop to contrastTooltip for clarity
♻️ (nodeToolbarComponent): Change darkTooltip prop to contrastTooltip for consistency
♻️ (components/index): Import handleOnNewValueType function for future use

* 🐛 (index.tsx): Fix calculation of inputWidth to handle cases where selectedOption length is greater than 25 characters
📝 (index.tsx): Update className to fix styling issue with background color in CustomInputPopover

* 🐛 (App.css): fix styling issue where the stroke width of selected edges was not consistent with the design
📝 (App.css): update stroke width of all edges to 2px for better visibility and consistency in the application

* 📝 (App.css): Add custom CSS variables for selected colors to improve readability and maintainability
📝 (App.css): Update CSS styles to use custom selected colors based on the theme
📝 (sanitizedHTMLWrapper/index.tsx): Add margin class to the component for better spacing
📝 (PageComponent/index.tsx): Add functionality to change selected color based on edge click event
📝 (styleUtils.ts): Add new colors for Agent and Tool nodes to the nodeColors object

* fix icons

* editing sliderComponent

*  (floatComponent/index.tsx): Refactor FloatComponent to improve code readability and maintainability. Add support for handling cursor position in input field, updating value on input change, and using Chakra UI components for number input and stepper functionality.

*  (frontend): Increase gap between items in RefreshParameterComponent for better spacing
♻️ (frontend): Refactor RefreshButton component to use 'ghost' variant instead of 'primary' for better visual consistency

* [autofix.ci] apply automated fixes

* merge fix

*  (inputBadge/index.tsx): Add new InputBadge component to handle framework selection with a popover
📝 (inputComponent/components/popover/index.tsx): Refactor Popover component to improve readability and maintainability
🔄 (parameterRenderComponent/index.tsx): Import InputBadge component to use in parameter render component

* 🐛 (popover/index.tsx): fix incorrect calculation for setting input width based on selected option length

* [autofix.ci] apply automated fixes

*  (actionsMainPage-shard-1.spec.ts): add delays between actions to ensure proper execution and avoid race conditions
📝 (filterEdge-shard-0.spec.ts): update text labels for better clarity and consistency in tooltips

* 📝 (inputComponent): Update input component class name to improve styling consistency
📝 (promptComponent): Remove unused imports and update styling classes for external link icon
📝 (textAreaComponent): Refactor text area component to improve code readability and maintainability
🔧 (get-gradient-class): Remove unused file and function for getting background style

📝 (constants.ts): update gradient classes to use HSL values for background color instead of RGBA for better color management
📝 (applies.css): add new CSS classes for background and gradient fade input styles
📝 (index.ts): add optional 'open' and 'setOpen' props to textModalPropsType for better control over modal visibility

*  (frontend): Introduce new constants for codeAreaComponent and promptComponent to improve code readability and maintainability
🔧 (frontend): Update import paths for constants and modals in codeAreaComponent to use absolute paths
🔧 (frontend): Update import paths for utils in codeAreaComponent to use relative paths
🔧 (frontend): Update import paths for ui components in codeAreaComponent to use relative paths
🔧 (frontend): Update import paths for helpers in codeAreaComponent to use relative paths
🔧 (frontend): Update import paths for types in codeAreaComponent to use relative paths
🔧 (frontend): Update import paths for genericIconComponent in codeAreaComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for Button component in inputFileComponent to use relative paths
🔧 (frontend): Update import paths for

 (index.tsx): Introduce support for password visibility toggle in TextAreaComponent to allow users to show/hide password while typing
📝 (applies.css): Add styles for password visibility toggle functionality in TextAreaComponent

* 🐛 (frontend): Fix default min and max values for FloatComponent to be -2 and 2 respectively
🐛 (frontend): Fix test cases in floatComponent.spec.ts to use correct test ids and fill values

* ♻️ (styleUtils.ts): refactor code to use shorthand object property syntax for consistency and improved readability

* [autofix.ci] apply automated fixes

*  (inputFileComponent/index.tsx): add data-testid attribute to the upload file button for testing purposes

* 🐛 (globalVariables.spec.ts): fix clicking behavior on global variable popover anchor to ensure correct functionality in tests

*  (Document QA.spec.ts): improve test readability by updating element selector from "icon-FileSearch2" to "button_upload_file"

*  (fileUploadComponent.spec.ts): improve test readability by updating the element selector to be more descriptive and meaningful

* 📝 (frontend): Rename KeyValuePairComponent to KeypairListComponent for better clarity and consistency
📝 (frontend): Add data-testid attribute to Button component for testing purposes
📝 (frontend): Remove unused id prop from KeypairListComponent
📝 (frontend): Remove redundant assignment of sliderButtons and sliderInput variables in SliderComponent
📝 (frontend): Update test selectors in various test files for consistency and accuracy

*  (keypairListComponent/index.tsx): Add new functionality to handle key-value pairs, including converting objects to arrays, checking for duplicate keys, and updating values
📝 (promptComponent/index.tsx): Remove unnecessary data-testid attribute from IconComponent in PromptAreaComponent
📝 (textAreaComponent/index.tsx): Add a Button component around the renderIcon function to improve accessibility and user experience
📝 (parameterRenderComponent/index.tsx): Add unique id prop to KeypairListComponent component for better identification and tracking
📝 (promptModalComponent.spec.ts): Update test cases to use the new Button component to open the text area modal for editing prompts

*  (frontend): Improve button id and data-testid attributes for better testability and readability
📝 (frontend): Update CSS classes for consistency and background color in prompt and text area components
🔧 (frontend): Refactor test selectors in promptModalComponent.spec.ts for better specificity and clarity

* 🐛 (keyPairListComponent.spec.ts): fix condition to check if elementCount is equal to 1 instead of 0 to correctly handle the presence of an element

* 📝 (NodeDescription/index.tsx): add data-testid attribute to improve testability
📝 (textAreaModalComponent.spec.ts): update test to use button_open_text_area_modal_textarea_str_text data-testid
📝 (sticky-notes.spec.ts): update selector to match correct element for double click action
📝 (general-bugs-shard-3836.spec.ts): update file path and button data-testid for file upload action

* 📝 (general-bugs-shard-3836.spec.ts): update file path for image in test to fix file not found issue

* 📝 (inputComponent/index.tsx): replace inline SVG icons with ForwardedIconComponent for better maintainability and reusability

* 📝 (inputComponent/index.tsx): refactor code to replace inline SVG icons with ForwardedIconComponent for better maintainability and reusability

* 📝 (popover/index.tsx): Remove unused nodeStyle prop from CustomInputPopover component
📝 (popover/index.tsx): Update classNames for primary-input element in CustomInputPopover component
📝 (popover/index.tsx): Update input type based on pwdVisible and password props in CustomInputPopover component
📝 (popover/index.tsx): Update className for input element in CustomInputPopover component
📝 (inputComponent/index.tsx): Remove unused nodeStyle prop from CustomInputPopover component in InputComponent

* 🔧 (inputBadge/index.tsx): Remove unused import statements and components to clean up the codebase and improve maintainability.

* 📝 (get-icon-name.ts): Add nodeStyle parameter to getIconName function for additional logic
📝 (get-input-class-name.ts): Remove nodeStyle parameter from getInputClassName function as it is no longer used
📝 (index.tsx): Add nodeStyle parameter to InputComponent for customization
📝 (index.tsx): Pass nodeStyle parameter to CustomInputPopover component for styling
📝 (index.tsx): Pass nodeStyle parameter to InputComponent for customization
📝 (index.tsx): Pass nodeStyle parameter to getIconName function in ForwardedIconComponent
📝 (index.tsx): Remove placeholder prop from InputGlobalComponent and add nodeStyle prop for consistency and styling purposes

* 🔧 (NodeOutputfield/index.tsx): update styling class for rounded border to use specific pixel value for consistency

* 🔧 (textAreaComponent/index.tsx): Refactor externalLinkIconClasses to use functions for editNodeTop and normalTop based on value presence
🔧 (textAreaComponent/index.tsx): Refactor usage of externalLinkIconClasses.editNodeTop and externalLinkIconClasses.normalTop to use functions with value parameter

* 🔧 (textAreaComponent/index.tsx): Refactor styles for TextAreaComponent to improve readability and maintainability
📝 (textAreaComponent/index.tsx): Remove unnecessary console.log statement from TextAreaComponent

* 📝 (index.tsx): Remove unused variables and clean up code for better readability and maintainability
📝 (applies.css): Add a new CSS class for popover input styling to improve consistency and reusability

* 🐛 (popover/index.tsx): fix popover onClick event to only show options when nodeStyle is not present and input is not disabled

* 🔧 (inputComponent/index.tsx): adjust icon size and position for better alignment and visibility

* 📝 (popover/index.tsx): add missing props optionButton, autoFocus, and className to improve component flexibility and customization

* 🐛 (chatInputOutputUser-shard-0.spec.ts): Fix filling API key only if the input field is visible
🐛 (freeze-path.spec.ts): Fix filling API key only if the input field is visible
🐛 (logs.spec.ts): Fix filling API key only if the input field is visible
🐛 (Basic Prompting.spec.ts): Fix filling API key only if the input field is visible
🐛 (Blog Writer.spec.ts): Fix filling API key only if the input field is visible
🐛 (Document QA.spec.ts): Fix filling API key only if the input field is visible
🐛 (Dynamic Agent.spec.ts): Fix filling API key only if the input field is visible
🐛 (Memory Chatbot.spec.ts): Fix filling API key only if the input field is visible
🐛 (Simple Agent.spec.ts): Fix filling API key only if the input field is visible
🐛 (Travel Planning Agent.spec.ts): Fix filling API key only if the input field is visible
🐛 (Vector Store.spec.ts): Fix filling API key only if the input field is visible
🐛 (decisionFlow.spec.ts): Fix filling API key only if the input field is visible

📝 (textInputOutput.spec.ts, generalBugs-shard-9.spec.ts, limit-file-size-upload.spec.ts, chatInputOutputUser-shard-1.spec.ts, chatInputOutputUser-shard-2.spec.ts, general-bugs-shard-3836.spec.ts, generalBugs-shard-1.spec.ts, generalBugs-shard-3.spec.ts): Refactor code to check visibility of apiKey input before filling it with OPENAI_API_KEY from environment variables. This change ensures that the apiKey input is only filled if it is visible on the page.

*  (NodeName/index.tsx): Increase max width of NodeName component for better layout
♻️ (GenericNode/index.tsx): Refactor class names and styles for better readability and maintainability
🔧 (PageComponent/index.tsx): Add background color to the canvas element for improved visual distinction
🔧 (tailwind.config.mjs): Update canvas color variable to use HSL format for consistency

* [autofix.ci] apply automated fixes

*  (NodeName/index.tsx): Remove unnecessary CSS classes to simplify styling
♻️ (genericIconComponent/index.tsx): Refactor data-testid logic to improve readability and maintainability
📝 (popover/index.tsx): Add missing import statement for ForwardedIconComponent
♻️ (inputComponent/index.tsx): Rearrange classNames for better readability and maintainability
📝 (textAreaComponent/index.tsx): Add data-testid attribute for button element
♻️ (components/index.ts): Add dataTestId property to IconComponentProps type
📝 (globalVariables.spec.ts): Replace click action with isVisible check for better test reliability
📝 (similarity.spec.ts): Refactor input filling logic to improve readability and maintainability

* [autofix.ci] apply automated fixes

*  (playground.spec.ts): Add 500ms delay after certain actions to improve test stability and reliability
🐛 (Dynamic Agent.spec.ts): Fix selector to click on the first element with the heading "Dynamic Agent" for correct interaction
🐛 (Travel Planning Agent.spec.ts): Fix selector to click on the first element with the heading "Travel Planning Agents" for correct interaction

* 🔧 (NodeOutputfield/index.tsx): Update styling classes for NodeOutputField component to improve visual consistency and readability.

*  (NodeName/index.tsx): Add support for displaying a beta badge next to the node name if the node is in beta and showNode is true
 (GenericNode/index.tsx): Update to show beta badge based on data.node.beta and showNode values
📝 (applies.css): Add styling for the beta badge component
📝 (index.css): Define custom CSS variables for accent pink color and foreground color
📝 (tailwind.config.mjs): Add custom Tailwind CSS variables for accent pink color and foreground color

* 📝 (frontend): Update CSS classes to use 'bg-muted' instead of 'bg-secondary' for better consistency and readability.

* [autofix.ci] apply automated fixes

* 🐛 (GenericNode/index.tsx): fix positioning class for the button to correctly align it at the bottom of the node

*  (dropdownComponent/index.tsx): update dropdownComponent to change text color on hover for better user experience
📝 (types/components/index.ts): add name property to DropDownComponent type for better component customization

* [autofix.ci] apply automated fixes

*  (typescript_test.yml): add Playwright test command to run tests with specified shard index and total shards, and list tests before running them

*  (index.tsx): add data-testid attribute to anchor element for testing purposes
🔧 (userSettings.spec.ts): update test to use correct data-testid attribute value for anchor element

* 📝 (frontend): update placeholder text color to improve visibility and consistency across components

* [autofix.ci] apply automated fixes

*  (frontend): Update CSS classes to improve consistency and readability in inputComponent, parameterRenderComponent, keypairListComponent, and refreshButton components. Add new CSS classes for icon size and hit area to enhance styling and user interaction.

*  (frontend): introduce ICON_STROKE_WIDTH constant to standardize stroke width for icons across components

* 🔧 (NodeInputField/index.tsx): Use constant ICON_STROKE_WIDTH for strokeWidth in IconComponent
🔧 (NodeOutputField/index.tsx): Use constant ICON_STROKE_WIDTH for strokeWidth in IconComponent
🔧 (inputComponent/index.tsx): Use constant ICON_STROKE_WIDTH for strokeWidth in ForwardedIconComponent
🔧 (intComponent/index.tsx): Use constant ICON_STROKE_WIDTH for strokeWidth in PlusIcon and MinusIcon

* 📝 (NodeName): Increase gap between items in flex container for better spacing
📝 (NodeStatus): Add support for buildStatus prop to display build status of a node
📝 (nodeIcon): Add constant for ICON_STROKE_WIDTH to improve consistency
📝 (use-get-build-status): Create custom hook to get build status for a node
📝 (GenericNode): Implement useBuildStatus hook to fetch build status for a node
📝 (get-class-from-build-status): Refactor class calculation based on build status and validation status
📝 (border-beams): Add BorderBeam component for visual effect
📝 (applies.css): Update styles for primary-input and building-status classes
📝 (buildUtils): Remove console.log statements
📝 (tailwind.config.mjs): Add animation for border-beam effect

* [autofix.ci] apply automated fixes

*  (NodeDescription/index.tsx): update text size and styling for better readability and consistency
 (NodeName/index.tsx): update text size for better visual hierarchy
 (OutputComponent/index.tsx): update text size for better visual hierarchy
 (shadTooltipComponent/index.tsx): update tooltip styling for better contrast and visibility
 (nodeToolbarComponent/index.tsx): add border to node toolbar for improved visual separation
 (shortcutDisplay/index.tsx): update background color and text color for better contrast and visibility

* 💡 (textAreaComponent/index.tsx): Add console log for value in TextAreaComponent for debugging purposes
♻️ (applies.css): Rearrange CSS classes in primary-input to improve readability and maintain consistency

* [autofix.ci] apply automated fixes

*  (NodeInputField): Update styling to reduce gap between flex items for better layout
 (NodeInputField): Add support for contrastTooltip and adjust layout for NodeInputInfo component
 (NodeName): Import cn utility function for conditional classnames and adjust styling based on beta flag
 (GenericNode): Update styling to include padding bottom for generic-node-div class
 (GenericNode): Adjust class order for better readability and consistency
🔧 (popover): Add state to track input focus and update border color on focus
🔧 (popover): Update onBlur event to reset focus state
🔧 (TextAreaComponent): Remove console.log statement
🔧 (TextAreaComponent): Add cursor-pointer class for better UX
🔧 (applies.css): Update focus border color for popover-input class

* 📝 (api_request.py): Update display name from "Curl" to "cURL" for consistency and clarity
♻️ (dictComponent/index.tsx): Refactor code to use constant ICON_STROKE_WIDTH instead of hardcoded value
♻️ (button.tsx): Refactor button variants to use "muted" color instead of "secondary" for better visual consistency

* 🔧 (textAreaComponent/index.tsx): Reorder CSS classes to maintain consistency and improve readability

* [autofix.ci] apply automated fixes

*  (GenericNode/index.tsx): add conditional styling for padding bottom based on the presence of outputs in the node

* 📝 (NodeStatus): Remove unused import and hook from NodeStatus component
♻️ (get-class-from-build-status): Remove console.log statement for currentNodeId and validationStatus.id
 (AstraDB): Increase size of AstraDB icon and update fill color based on dark mode
🔧 (index.tsx): Add dark mode support to AstraDBIcon component
♻️ (flowStore): Add method clearEdgesRunningByNodes to reset edges animation state
♻️ (flowStore): Add currentBuildingNodeId property and setCurrentBuildingNodeId method to track currently building nodes
♻️ (flowStore): Refactor updateEdgesRunningByNodes method to use edge data source handle id for comparison
🔧 (buildUtils): Add isStringArray utility function to check if value is an array of strings
♻️ (buildUtils): Update buildFlowVertices function to use new setCurrentBuildingNodeId and clearEdgesRunningByNodes methods
🔧 (utils): Add isStringArray utility function to check if value is an array of strings

*  (frontend): add new AstraDB icon to the project

*  (handleRenderComponent/index.tsx): add neon pulse effect on handle hover to improve user interaction and visual feedback
🔧 (flow/index.ts): change clearEdgesRunningByNodes function to return a Promise to handle asynchronous operations correctly

* [autofix.ci] apply automated fixes

* 📝 (NodeName/index.tsx): Refactor NodeName component to improve code readability and structure
📝 (NodeStatus/index.tsx): Add support for displaying an alert icon for outdated nodes and handle updating code functionality
📝 (handleRenderComponent/index.tsx): Refactor handleRenderComponent to optimize shadow generation logic
📝 (GenericNode/index.tsx): Remove redundant code for displaying outdated node alert icon and move it to NodeStatus component for better separation of concerns

*  (frontend): Update styles in various components to improve alignment and readability
📝 (frontend): Add Button component to NodeToolbarComponent for better structure and consistency
📝 (frontend): Update TooltipContent and TooltipContentWithoutPortal components for better alignment
📝 (frontend): Update ShortcutDisplay component for better styling and alignment
📝 (frontend): Add CSS classes for node-toolbar-buttons and more-option-button-toolbar for styling purposes

* 📝 (HandleTooltipComponent/index.tsx): Improve tooltip styling and add support for different tooltip colors based on index
📝 (handleRenderComponent/index.tsx): Refactor handle color logic to use dark mode colors and fix tooltip display issues

* 📝 (App.css): Add whitespace for readability
♻️ (handleRenderComponent/index.tsx): Increase handle size from 10x10 to 12x12 for better user interaction
♻️ (handleRenderComponent/index.tsx): Increase handle size from 10x10 to 14x14 for better user interaction
📝 (ConnectionLineComponent/index.tsx): Import useFlowStore from flowStore for handleDragging functionality
📝 (ConnectionLineComponent/index.tsx): Update strokeWidth to 2 for better visibility
📝 (ConnectionLineComponent/index.tsx): Update circle radius to 5 and stroke color to match handleDragging color
📝 (PageComponent/index.tsx): Increase connectionRadius from 25 to 30 for better user experience

* ♻️ (handleRenderComponent/index.tsx): refactor animation logic to remove unnecessary condition for isNullHandle

* 📝 (frontend): Update CSS classes in promptComponent and textAreaComponent for better styling
🔧 (frontend): Refactor stop-building.spec.ts to use more specific selectors for better test reliability
 (frontend): Add click action to "fit view" button in fileUploadComponent.spec.ts for improved test coverage
 (frontend): Update click actions in tableInputComponent.spec.ts to target specific elements for accurate testing

* 🐛 (generalBugs-shard-5.spec.ts): Fix mouse move coordinates to correct position for output preview
🐛 (generalBugs-shard-5.spec.ts): Fix background color check values for gradient handles to match expected values

* ♻️ (handleRenderComponent/index.tsx): remove unnecessary border property to improve code readability and maintainability

* 📝 (handleRenderComponent/index.tsx): refactor handleRenderComponent to improve code readability and maintainability
🐛 (handleRenderComponent/index.tsx): fix issue with missing cleanup function in useEffect to remove dynamically added stylesheets

*  (handleRenderComponent/index.tsx): Improve handle rendering component by adding an invisible overlay with a larger clickable area for better user interaction
♻️ (classes.css): Refactor handle positioning in CSS to adjust the left and right positions for better alignment and spacing

*  (NodeOutputField): Increase border radius of output field for better visual appearance
♻️ (handleRenderComponent): Refactor handle rendering component to improve readability and maintainability
♻️ (classes.css): Refactor handle positioning styles to simplify and standardize the code

*  (handleRenderComponent/index.tsx): Add useRef to handleRef and invisibleDivRef to improve performance and manage DOM elements efficiently
🔧 (handleRenderComponent/index.tsx): Update event handling logic to forward events to handleRef element for better user interaction
🔧 (classes.css): Adjust positioning of handle elements to align with changes in handleRenderComponent/index.tsx

* 📝 (handleRenderComponent/index.tsx): update styleClasses in ShadTooltip component to include additional classes for improved styling and positioning

* improve handle ux

* 🔧 (NoteToolbarComponent/index.tsx): Remove unnecessary ring styling from color picker and more options modal to improve UI consistency.

* 📝 (handleRenderComponent/index.tsx): Update styles for invisibleDivRef to improve positioning and dimensions for better user experience
📝 (classes.css): Update handle positioning classes to use rem units for better consistency and scalability across different screen sizes

* 📝 (handleRenderComponent/index.tsx): Adjust size and position of a div element for better visual appearance
📝 (classes.css): Update the position of handle elements in the react-flow component for improved alignment

* ♻️ (handleRenderComponent/index.tsx): remove unnecessary bg-black class from handleRenderComponent styles to improve code cleanliness

* 📝 (index.tsx): update min-height value in popover component to use rem units for consistency and better readability

* 📝 (applies.css): update placeholder text color in primary-input class to improve readability and consistency

* 📝 (index.tsx): remove unnecessary placeholder styling class to improve code cleanliness and readability

*  (NodeStatus/index.tsx): Add Check icon from lucide-react library to display success status conditionally based on build and validation status
♻️ (get-class-from-build-status.ts): Remove unnecessary code related to currentNodeId and currentNodeBuilding
♻️ (use-icons-status.tsx): Simplify useIconStatus hook to only handle buildStatus condition checks and remove validationStatus logic
🔧 (applies.css): Update rounded-sm class to rounded-[6px] for consistency in styling across the application

*  (NodeStatus/index.tsx): Add margin to the element to improve spacing and alignment
🐛 (shadTooltipComponent/index.tsx): Fix class names for tooltip background and text colors to ensure proper styling and readability

* 📝 (NodeOutputField/index.tsx): Refactor NodeOutputField component to improve code readability and structure
📝 (NodeStatus/index.tsx): Update NodeStatus component to correctly handle duration data
📝 (HCD.jsx): Update fill color in HCD SVG component based on dark mode setting
📝 (index.tsx): Add dark mode support to HCDIcon component using useDarkStore hook

*  (NodeStatus/index.tsx): Add support for dynamic icon name and classes based on build status to improve UI feedback
🔧 (GenericNode/index.tsx): Update BorderBeam component properties for better visual representation
🔧 (custom-parameter.tsx): Update getCustomParameterTitle function to return title wrapped in a span element for styling consistency
🔧 (nodeToolbarComponent/index.tsx): Refactor node toolbar buttons styling for better readability and maintainability
🔧 (applies.css): Update node-toolbar-buttons class styling for consistent button appearance across the application

*  (NodeStatus): Add utility function normalizeTimeString to format run-time values for better readability and consistency.

* 🐛 (NodeStatus/index.tsx): Fix issue where the stop build functionality was not triggered when hovering over the build icon
📝 (NodeStatus/index.tsx): Update tooltip content dynamically based on build status and hover state to provide better user guidance
📝 (format-run-time.ts): Add null check to input parameter in normalizeTimeString function to prevent errors when input is undefined

* 📝 (handleRenderComponent/index.tsx): Update box-shadow size in keyframes to improve visual effect
📝 (handleRenderComponent/index.tsx): Adjust box-shadow size in getNeonShadow function for better styling
📝 (handleRenderComponent/index.tsx): Modify background, width, height, and border styles for better UI consistency
📝 (nodeToolbarComponent/index.tsx): Refactor imports and add useRef hook for selectTrigger
📝 (nodeToolbarComponent/index.tsx): Update handleButtonClick function to use selectTriggerRef
📝 (nodeToolbarComponent/index.tsx): Adjust styles and functionality of buttons in the toolbar component
📝 (applies.css): Update styles for node-toolbar-buttons class to improve layout and appearance

* new toolbar

*  (App.css): Update styles for different edge statuses in the React Flow component to improve visual representation and user experience.

 (NodeName/index.tsx, NodeStatus/index.tsx, index.tsx): Refactor NodeName and NodeStatus components to handle validation status and outdated status for GenericNode component. Add support for displaying beta badge based on node properties.

📝 (use-update-validation-status.tsx): Update useUpdateValidationStatus hook to accept a function to get validation status and call it with relevant data.

📝 (flowStore.ts): Update flowStore to update edge properties based on the running status of nodes to improve visualization in the flow diagram.

*  (NodeInputField): Add support for passing colorName prop to NodeInputField component
 (NodeOutputField): Add support for passing colorName prop to NodeOutputField component
 (HandleRenderComponent): Add support for passing colorName prop to HandleRenderComponent component
📝 (GenericNode): Import and use getNodeInputColorsName and getNodeOutputColorsName functions
📝 (getNodeInputColorsName): Create function to determine color based on input types and types

 (get-node-output-colors-name.ts): Add function to determine node output colors based on type and data
🔧 (index.tsx): Import nodeColorsName from styleUtils to use in handleEdgeClick function
🔧 (index.css): Add inner color variables for different color shades to be used in styling
📝 (components/index.ts): Add colorName property to NodeOutputFieldComponentType and NodeInputFieldComponentType for color customization

 (styleUtils.ts): Add new nodeColorsName object to provide more descriptive names for node colors
📝 (tailwind.config.mjs): Add new inner color classes with corresponding foreground and muted colors for better styling options

* 🔧 (handleRenderComponent/index.tsx): remove redundant styles and event listeners for a more streamlined and cleaner codebase

* 📝 (NodeStatus/index.tsx): Update border and ring styles for better visual representation
📝 (GenericNode/index.tsx): Adjust BorderBeam size and borderWidth for improved design
📝 (get-class-from-build-status.ts): Update border styles based on build status and isBuilding flag
📝 (popover/index.tsx): Add ring styles for better focus indication
📝 (refreshParameterComponent/index.tsx): Add conditional class based on templateData type
📝 (applies.css): Update border and ring styles for primary-input and textarea-primary classes
📝 (tailwind.config.mjs): Add new borderWidth values for better customization options

*  (nodeToolbarComponent/index.tsx): add data-testid attribute to the more options modal button for testing purposes

* 📝 (nodeToolbarComponent/index.tsx): update data-testid attribute value from "advanced-button-modal" to "edit-button-modal" for consistency and clarity in testing purposes

* 📝 (frontend): Update styling in NodeOutputField component to use a smaller border radius
📝 (frontend): Add data-testid attribute and convert title to lowercase in getCustomParameterTitle function
📝 (frontend): Add data-testid attribute to div in handleRenderComponent for testing purposes
📝 (frontend): Add data-testid attribute to button in NodeToolbarComponent for testing purposes
📝 (frontend): Update value and icon in SelectItem component in NodeToolbarComponent
📝 (frontend): Update data-testid attribute in tests for better clarity and consistency

*  (nodeToolbarComponent): update dataTestId from "edit-button-modal" to "advanced-button-modal" for consistency and clarity
🐛 (chatInputOutputUser-shard-0.spec.ts, dropdownComponent.spec.ts, floatComponent.spec.ts, inputComponent.spec.ts, inputListComponent.spec.ts, intComponent.spec.ts, keyPairListComponent.spec.ts, nestedComponent.spec.ts, promptModalComponent.spec.ts, toggleComponent.spec.ts): update dataTestId from "edit-button-modal" to "advanced-button-modal" for consistency and clarity
🐛 (limit-file-size-upload.spec.ts, general-bugs-shard-3836.spec.ts): update dataTestId from "edit-button-modal" to "advanced-button-modal" for consistency and clarity

*  (nodeToolbarComponent/index.tsx): Add functionality to reset selected value after a timeout to improve user experience
📝 (components/index.ts): Add closeToolbar function to nodeToolbarPropsType to allow closing the toolbar when needed

* 🐛 (nodeToolbarComponent/index.tsx): Fix issue with selectedValue possibly being undefined by adding a non-null assertion operator (!) to ensure it is not null or undefined

* 🔧 (nodeToolbarComponent/index.tsx): remove unnecessary setTimeout function for setting selected value to null, improving code readability and performance

*  (floatComponent.spec.ts, inputComponent.spec.ts, keyPairListComponent.spec.ts): update button test IDs to match new button labels for improved test clarity

* 📝 (deleteComponents.spec.ts): Comment out test code related to API key validation and setup to prevent test failures
📝 (store-shard-1.spec.ts): Comment out test code related to API key validation and setup to prevent test failures

📝 (store-shard-3.spec.ts): Comment out redundant test code to improve readability and maintainability of the test file.

*  (index.tsx): add data-testid attribute to remove icon badge for testing purposes
📝 (index.tsx): update styling class for password input to limit width to 64 characters

* fix tests

* 📝 (NodeOutputField): Update class name for last output border to improve styling consistency
📝 (ShadTooltip): Remove unused contrastTooltip prop and related styles
📝 (applies.css): Add new class .last-output-border for styling last output border
📝 (components/index.ts): Remove unused position and zoom properties from ShadToolTipType

* adjust title on buttons

* 📝 (frontend): Remove redundant code duplication in multiple test files by extracting common logic into a reusable function.

🔧 (Vector Store.spec.ts): Fix typo in file name "Vector Store.spec.ts" to "VectorStore.spec.ts" for consistency

📝 (Vector Store.spec.ts): Comment out unnecessary test.skip blocks and unused code to improve code readability and maintainability.

 (file.ts): Add environment variable support for API keys and Astra DB tokens and endpoints
🔧 (file.ts): Update file upload process and improve test automation flow for better reliability and maintainability

📝 (similarity.spec.ts): Remove redundant code for removing icon badge before clicking on it
📝 (textInputOutput.spec.ts): Remove redundant code for removing icon badge before clicking on it
📝 (generalBugs-shard-9.spec.ts): Remove redundant code for removing icon badge before clicking on it
📝 (limit-file-size-upload.spec.ts): Remove redundant code for removing icon badge before clicking on it
📝 (chatInputOutputUser-shard-1.spec.ts): Remove redundant code for removing icon badge before clicking on it
📝 (chatInputOutputUser-shard-2.spec.ts): Remove redundant code for removing icon badge before clicking on it
📝 (general-bugs-shard-3836.spec.ts): Remove redundant code for removing icon badge before clicking on it
📝 (generalBugs-shard-1.spec.ts): Remove redundant code for removing icon badge before clicking on it
📝 (generalBugs-shard-3.spec.ts): Remove redundant code for removing icon badge before clicking on it

*  (Travel Planning Agent.spec.ts): Uncommented and re-enabled the test code for Travel Planning Agent to ensure proper functionality and testing coverage.

* 📝 (codeTabsComponent/index.tsx): add data-testid attribute to copy button for testing purposes
📝 (Dynamic Agent.spec.ts): comment out unnecessary test code to improve readability and maintainability
📝 (Simple Agent.spec.ts): update assertion for pythonWords count from 3 to 2 for accuracy; adjust selectors and add wait for visibility to improve test reliability; add data-testid attribute to copy button for testing purposes

📝 (generalBugs-shard-3.spec.ts): update test script to improve readability and maintainability
🐛 (generalBugs-shard-3.spec.ts): fix commented out code and enable hover action for visibleElementHandle
 (generalBugs-shard-3.spec.ts): add new test step to click on .react-flow__pane element
 (generalBugs-shard-3.spec.ts): add new test step to wait for and click on btn-copy-code element
 (generalBugs-shard-3.spec.ts): add new test step to read clipboard content and perform assertions on it

*  (Dynamic Agent.spec.ts): Add logic to handle rate limit indicators during test execution to prevent test failures due to rate limiting issues
 (Travel Planning Agent.spec.ts): Add logic to handle rate limit indicators during test execution to prevent test failures due to rate limiting issues

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2024-10-31 14:33:45 +00:00
Mike Fortman
20b3a6b46e
feat: Flow's canvas actions design uplift (#4260)
* init

* move panels and make custom

* post review changes

* [autofix.ci] apply automated fixes

* pr comment fix

* design review fixes

* [autofix.ci] apply automated fixes

* action toolbar positioning feedback

* [autofix.ci] apply automated fixes

* remove extra imports

* test selector updates

* missed a couple

* one more

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2024-10-31 00:51:33 +00:00
Cristhian Zanforlin Lousa
a88fd9bbb0
feat: add new .env variable "LANGFLOW_FEATURE_MVP_COMPONENTS" to show/hide integration sidebar components (#4270)
*  (authContext.tsx): Add functionality to fetch global variables on authentication
🔧 (api.tsx): Replace universal-cookie import with react-cookie for consistency
🔧 (authStore.ts): Replace universal-cookie import with react-cookie for consistency
🔧 (use-get-global-variables.ts): Add check to only fetch global variables if user is authenticated
 (use-get-mutation-global-variables.ts): Add mutation function to fetch and update global variables
🔧 (authStore.ts): Replace universal-cookie import with react-cookie for consistency

* 📝 (endpoints.py): add feature_flags field to ConfigResponse schema
📝 (endpoints.py): modify get_config function to include feature_flags in the response
📝 (feature_flags.py): add mvp_components field to FeatureFlags settings
📝 (schemas.py): add feature_flags field to ConfigResponse schema

*  (use-get-config.ts): Add feature_flags field to ConfigResponse interface to support feature flags in the application
🔧 (utilityStore.ts): Add featureFlags field and setFeatureFlags function to utilityStore to manage feature flags in the application
💡 (extraSidebarComponent/index.tsx): Use featureFlags from utilityStore to conditionally render components based on feature flags in ExtraSidebar component

* ♻️ (frontend/package-lock.json): remove extraneous flag from is-unicode-supported package to clean up unnecessary information

*  (integration-side-bar.spec.ts): Add integration tests to ensure correct visibility of integrations in the sidebar based on the value of mvp_components.

*  (integration-side-bar.spec.ts): update integration-side-bar tests to use feature_flags object for mvp_components flag for better readability and maintainability.

*  (integration-side-bar.spec.ts): add a 4-second delay before making the API call to improve test reliability

* [autofix.ci] apply automated fixes

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

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

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

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

* formata

* [autofix.ci] apply automated fixes

*  (extraSidebarComponent/index.tsx): update featureFlags property access to use optional chaining for better error handling
📝 (stop-building.spec.ts): add ua-parser-js import to get user agent information and update control key based on user's operating system for better user experience. Also, refactor code to improve readability and add comments for better understanding.

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
2024-10-28 19:36:52 +00:00
Deon Sanchez
d48ec86121
feat: app Header Update (#4189)
* feat: add new customization components

- Added CustomOrgSelector component
- Added CustomProfileIcon component
- Added CustomProductSelector component
- Added CustomHeaderMenuItemsTitle component
- Added CustomFeedbackDialog component

This commit adds new customization components to the codebase.

* [autofix.ci] apply automated fixes

* refactor: update AppHeader component styling

* refactor: update AppHeader component styling

* refactor: update HeaderMenu component styling

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2024-10-21 19:34:07 +00:00
Mike Fortman
e8e226c0dc
feat: Folders Design Uplift (#4122)
* move folders to a full page aside

* new dropdown + styles

* [autofix.ci] apply automated fixes

* design updates

* [autofix.ci] apply automated fixes

* increase empty state width

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
2024-10-18 17:17:49 +00:00
anovazzi1
908c141d97
feature: get messages from messages table for the playground (#3874)
* refactor: Update MessageBase text attribute based on isinstance check.

* feat: Add update_message function to update a message in the database.

* refactor(chat): Update imports and remove unnecessary config method in ChatComponent.

* refactor: Add stream_message method to ChatComponent.

* refactor: Update method call in ChatOutput component.

* feat: Add callback function to custom component and update build_results signature.

* feat: Add callback parameter to instantiate_class function.

* feat(graph): Add callback functions for sync and async operations.

* feat: Add callback function support to vertex build process.

* feat: Add handling for added message in InterfaceVertex class.

* feat: Add callback support to Graph methods.

* feat(chat): Add callback function to build_vertices function.

* refactor: Simplify update_message function and use session_scope for session management.

* fix: Call set_callback method if available on custom component.

* refactor(chat): Update chat message chunk handling and ID conversion.

* feat: Add null check before setting cache in build_vertex_stream function.

* refactor: Fix send_event_wrapper function and add callback parameter to _build_vertex function.

* refactor: Simplify conditional statement and import order in ChatOutput.

* [autofix.ci] apply automated fixes

* refactor: move log method to Component class.

* refactor: Simplify CallbackFunction definition.

* feat: Initialize _current_output attribute in Component class.

* feat: store current output name in custom component during processing.

* feat: Add current output and component ID to log data.

* fix: Add condition to check current output before invoking callback.

* refactor: Update callback to log_callback in graph methods.

* feat: Add test for callback graph execution with log messages.

* update projects

* fix(chat.py): fix condition to check if message text is a string before updating message text in the database

* refactor(ChatOutput.py): update ChatOutput class to correctly store and assign the message value to ensure consistency and avoid potential bugs

* refactor(chat.py): update return type of store_message method to return a single Message object instead of a list of Messages
refactor(chat.py): update logic to correctly handle updating and returning a single stored message object instead of a list of messages

* update starter projects

* refactor(component.py): update type hint for name parameter in log method to be more explicit

* feat: Add EventManager class for managing events and event registration

* refactor: Update log_callback to event_manager in custom component classes

* refactor(component.py): rename _log_callback to _event_manager and update method call to on_log for better clarity and consistency

* refactor(chat.py): rename _log_callback method to _event_manager.on_token for clarity and consistency in method naming

* refactor: Rename log_callback to event_manager for clarity and consistency

* refactor: Update Vertex class to use EventManager instead of log_callback for better clarity and consistency

* refactor: update build_flow to use EventManager

* refactor: Update EventManager class to use Protocol for event callbacks

* if event_type is not passed, it uses the default send_event

* Add method to register event functions in EventManager

- Introduced `register_event_function` method to allow passing custom event functions.
- Updated `noop` method to accept `event_type` parameter.
- Adjusted `__getattr__` to return `EventCallback` type.

* update test_callback_graph

* Add unit tests for EventManager in test_event_manager.py

- Added tests for event registration, including default event type, empty string names, and specific event types.
- Added tests for custom event functions and unregistered event access.
- Added tests for event sending, including JSON formatting, empty data, and large payloads.
- Added tests for handling JSON serialization errors and the noop function.

* feat: Add callback function support to vertex build process.

* feat: Add callback support to Graph methods.

* feat(chat): Add callback function to build_vertices function.

* [autofix.ci] apply automated fixes

* refactor: Update callback to log_callback in graph methods.

* fetching data from messages and builds at the same time, need to remove duplicates

* refactor: Sort chat history by timestamp in ChatView component

* fix: update serialization and improve error handling (#3516)

* feat(utils): add support for V1BaseModel in serialize_field

Add support for V1BaseModel instances in the serialize_field function by
checking for a "to_json" method. If the method is not present, return the
attribute values as a dictionary.

* refactor: Update field serializer function and error handling in build_flow function

* remove use memo to prevent bugs

* feat: add updateMessagePartial method to MessagesStoreType

* feat: update message partially in MessagesStoreType

This commit adds the `updateMessagePartial` method to the `MessagesStoreType` in `messagesStore.ts`. This method allows updating a specific message by merging the changes with the existing message object.

* feat: add log callback for start message in ChatComponent

* feat: update log_callback name

* feat: add log_callback for message in ChatComponent that are not streaming

* refactor: remove console.log statement in buildFlowVertices function

* refactor: store message in ChatInput after updating flow_id

This commit refactors the `ChatInput` component by moving the logic to store the message after updating the `flow_id` property. This ensures that the message is properly stored in the correct flow. The previous implementation had the logic to store the message before updating the `flow_id`, which could lead to incorrect storage of messages. This change improves the reliability and accuracy of message storage in the `ChatInput` component.

* refactor: move message storage logic in ChatInput after updating flow_id

* refactor: update ChatComponent to use stored_message.id instead of self.graph.flow_id

Update the `ChatComponent` class in `chat.py` to use the `stored_message.id` property instead of `self.graph.flow_id` when logging a message. This ensures that the correct message ID is used for logging purposes. The previous implementation used the flow ID, which could lead to incorrect logging. This change improves the accuracy of message logging in the `ChatComponent`.

* refactor: remove unused code and console.log statements

* raw: temp serializer fix

* streaming working but the message comes in one shot

* refactor: optimize message update in useMessagesStore

Improve the efficiency of updating messages in the `useMessagesStore` function of `messagesStore.ts`. Instead of iterating through the entire message list, this refactor searches for the message to update by iterating backwards from the end. This approach allows for faster message retrieval and update. The code has been modified to use a for loop and break out of the loop once the message is found. This change enhances the performance of the message update process.

* Refactor `serialize_flow_id` method to correctly handle UUID serialization in `message.py`

* Refactor `send_event` method to use `jsonable_encoder` for data serialization

* refactor: optimize message update in useMessagesStore

* streaming working with timeout

* refactor: update buildUtils.ts to use data instead of data.data in addMessage function

* version with reactState for chatHistory

* refactor: update on_message method in ChatComponent

* refactor: update on_message method in ChatComponent

* refactor: Remove unused dependency in package-lock.json

* Refactor chatView component and add hiddenSession prop

* Refactor chatView component and update hiddenSessions prop

* Refactor chatView component to use visibleSessions prop instead of hiddenSessions

* Refactor IOModal component to remove redundant code

* Refactor chatView component to include focusChat prop

* Refactor chatView component to include focusChat prop and trigger focus on chat when new session is set

* Refactor IOModal component to update visible sessions when new session is added

* feat: Add session parameter to buildFlowVertices function

* feat: Add someFlowTemplateFields function

Add the someFlowTemplateFields function to the reactflowUtils module. This function checks if any of the nodes in the provided array have template fields that pass a given validation function.

* feat: Add session parameter to buildFlowVertices function

* feat: Add session parameter to buildFlowVertices function

* update Session logic on ioModal

* Refactor ChatView component: Remove unused eraser button

The eraser button in the ChatView component was removed as it was not being used and served no purpose. This change improves code cleanliness and removes unnecessary code.

* Refactor Vertex class: Inject session_id if provided in inputs

* Refactor build_flow function: Set default session if inputs are empty

* Refactor InputValueRequest schema: Add session parameter

* Refactor IOModal component: Update session logic

* Refactor buildFlowVertices function: Update input handling

* Refactor MessagesStoreType in zustand/messages/index.ts: Remove unused columns property and setColumns method

* Refactor MessagesStoreType: Remove unused columns property and setColumns method

* Refactor SessionView component: Update columns extraction logic

* Refactor ChatView component: Remove unused variables

* Refactor useGetMessagesQuery: Remove unused setColumns method

* Refactor RenderIcons component: Set default value for filteredShortcut prop to prevent bug

* create edit message component for chat view

* Refactor useUpdateMessage: Add refetch option to trigger query refetch

* Refactor IOModal component: Remove unused variables and update useGetMessagesQuery

* Refactor ChatView component: Add session ID to message object

* update chat message to handle message edit

* update types

* fix: Update API call to send entire message object

* Refactor EditMessageField component: Add timeout to onBlur event

* Refactor EditMessageField component: Update layout of edit message field

* create migration

* add fields to data table

* feat: Add "edit" flag to message_dict in update_message API endpoint

* Refactor EditMessageField component: Improve onBlur event handling and add button click flag

* Refactor code to include "edit" flag in message types

* feat: Add EditMessageButton component for editing chat messages

* Refactor ChatMessage component: Add EditMessageButton and improve layout

* fix: Add refetch query for current flow messages not all flows

* Refactor ChatMessage component: Add ShadTooltip for EditMessageButton

* add info into edit message field

* fix: migrate

* fix running chat input directly from the flow

* [autofix.ci] apply automated fixes

* fix edit flag

* Refactor IOModal component to generate a unique session ID based on the current date and time

* [autofix.ci] apply automated fixes

* Refactor IOModal component to improve session management and interaction

* [autofix.ci] apply automated fixes

* Refactor sessionSelector component to improve session management and interaction

* chore: Refactor sessionSelector component to improve session management and interaction

* [autofix.ci] apply automated fixes

* create mutation to handle session rename

* refactor: Rename useUpdateSession to useUpdateSessionName for clarity

* [autofix.ci] apply automated fixes

* Refactor sessionSelector component for improved session management and interaction

* Refactor sessionSelector component to update visible session on session name change

* [autofix.ci] apply automated fixes

* add message related events back

* chore: Add console logs for debugging in buildFlowVertices function

* Refactor IOModal component to update tab trigger label from "Memories" to "Chat"

* improve edit name feature

* Refactor IOModal component button label to "New Chat"

* Refactor sessionSelector component to improve session management and interaction

* Refactor IOModal component to remove unused code and improve session management

* fix typing error

* fix run chat input on component level

* prevent toogle visibility on session menu

* fix bug on rename session while in table view mode

* chore: Update setSelectedView prop type in sessionSelector component

* add first test version not working yet

* fix bug for renaming and deleting session

* refactor: Update sessionSelector component to handle session changes

* improve test

* fix rename session multiple session bugs

* change visible session from array to string

* chore: Update editMessageField component to include margin-right for text span

* [autofix.ci] apply automated fixes

* Update down_revision in Alembic migration script

* Refactor IOModal component to simplify session visibility handling

* Fix comparison operator for filtering error messages in memory.py

* Refactor ChatInput to conditionally store and update messages

* Refactor JSON formatting for improved readability in starter projects

* Add type casting for message_text and import cast from typing module

* Refactor input handling to use direct dictionary access for 'session' and 'input_value' keys

* Allow `update_message` to accept `str` type for `message_id` parameter

* ⬆️ (pyproject.toml): upgrade duckduckgo-search dependency to version 6.3.1 for bug fixes or new features
🔧 (duckduckgo.spec.ts): refactor test to handle multiple possible outcomes when waiting for selectors and improve readability

* Refactor test file: generalBugs-shard-0.spec.ts

* Refactor test file: freeze.spec.ts

* Refactor test files: update element selectors and actions

* Refactor test file: chatInputOutput.spec.ts

* [autofix.ci] apply automated fixes

* Refactor chatMessage component to handle different types of children content on code modal

* [autofix.ci] apply automated fixes

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: italojohnny <italojohnnydosanjos@gmail.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
2024-10-15 19:09:12 +00:00
Lucas Oliveira
0964190579
refactor: starter projects templates and components (#4121)
* Update starter flows

* Update button with new menu variants

* Updated AstraDB icon

* Made header be optional on baseModal and added classname to content

* Removed old newFlowModal

* added a Nav component to show the sidebar categories

* Created new templates modal

* Updated components and modals to use new Templates modal

* Added used icons

* added template card

* changed templates modal to use modular components

* Add template content

* Add get started content

* added other size for templates

* Added size in base modal

* Changed menu ring-0 to be important

* Added all of the images of get started

* Fix hover effect on spirals

* Implement clicking get started templates

* Fix shiny design

* update package lock

* update examples

* updated card design

* Added grid of examples to templates

* Implemented card click

* Changed hover effect

* Added arrows

* delete unused

* implemented fuse search

* Added create blank project

* Made tags be read

* Added tags to basic prompting

* Added types

* Added tags to the tabs

* remove important from tailwind config

* updated setup and model to include icon

* added random-gradient npm package

* updated colors to remove white

* added icons

* inserted metadata of icons and etc into starter flows

* Removed integrations and added blank project creation

* Added gradient to cards

* Reset query when changing tab, reset scroll when typing

* added mix blend overlay to text

* Added id and gradient to templatecard type

* made icons for components still work

* added important on stroke

* formatting

* Fixed infinite render

* added test id to create blank project

* added data test id for templates title

*  (navComponent/index.tsx): add data-testid attribute with converted test name for side navigation options to improve testability and accessibility

*  (starter-projects.spec.ts): add test to ensure user can interact with starter projects in the frontend application

*  (TemplateCardComponent/index.tsx): add data-testid attribute with converted test name for better testability and accessibility

*  (TemplateCategoryComponent/index.tsx): import convertTestName function to convert test names for data-testid attributes in TemplateCategoryComponent

* fixed currentTab not changing results

* Fixed various tests

*  (similarity.spec.ts): improve user experience by adding functionality to fit view and scroll using mouse wheel in the test suite

* Fix other tests relying on multiple

* fix two edges test

* Fix hover on test 3 of generalBugs

---------

Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
2024-10-14 14:05:45 +00:00
Cristhian Zanforlin Lousa
376e4cfdd3
refactor: add pagination on folders (#4020)
* ⬆️ (uv.lock): Update authlib version from 1.3.2 to 1.3.1
⬆️ (uv.lock): Update httpx version from 0.27.2 to 0.27.0
⬆️ (uv.lock): Add new package grpcio-health-checking version 1.62.3

⬆️ (uv.lock): upgrade weaviate-client package from version 3.26.7 to 4.8.1 and add new dependencies grpcio, grpcio-health-checking, grpcio-tools, httpx, and pydantic. Update package source and distribution URLs accordingly.

*  (flows.py): Add pagination support for retrieving a list of flows to improve performance and user experience
📝 (flows.py): Update documentation to reflect changes made for pagination and additional query parameters
📝 (folders.py): Add a new endpoint to retrieve a folder with paginated flows for better organization and readability

*  (model.py): add PaginatedFlowResponse class to handle paginated flow responses in API calls

*  (test_database.py): add support for fetching all flows by adding "get_all" parameter to the request
🐛 (test_database.py): fix endpoint for fetching read-only starter projects to use correct URL path

* packages changes

* packages changes

* 📝 (paginatorComponent/index.tsx): refactor PaginatorComponent to use constants for default values and improve code readability
🐛 (paginatorComponent/index.tsx): fix issue with setting maxPageIndex when pages prop is provided to PaginatorComponent

* 🐛 (storeCardComponent): fix height of store card component to prevent overflow and improve layout aesthetics

*  (constants.ts): introduce new constants for search tabs, pagination settings, and store pagination settings to enhance user experience and improve functionality

*  (use-post-login-user.ts): add queryClient to UseRequestProcessor to enable refetching queries on mutation settled state
📝 (use-post-login-user.ts): update useLoginUser function to include onSettled callback in options to refetch queries after mutation settles

*  (use-get-basic-examples.ts): introduce a new query function to fetch basic examples of flows from the API and update the state with the fetched data.

*  (use-get-refresh-flows.ts): introduce new functionality to fetch and process flows with query parameters for components_only, get_all, folder_id, remove_example_flows, page, and size. This allows for more flexible and specific retrieval of flow data.

*  (use-get-folder.ts): Add support for pagination and filtering options in the useGetFolderQuery function to enhance flexibility and customization for fetching folder data.

* 🔧 (use-get-folders.ts): Remove unused code related to refreshFlows and setStarterProjectId to improve code readability and maintainability
 (use-get-folders.ts): Update useGetFoldersQuery to setFolders with the fetched data instead of filtering out starter projects to simplify the logic and improve performance

*  (use-upload-flow.ts): update refreshFlows function call to include an object with get_all property set to true to fetch all flows when refreshing

* 🔧 (codeAreaModal/index.tsx): remove unused import postCustomComponent to clean up code and improve readability

* 📝 (AdminPage/index.tsx): Update initial page size and index values to use constants for better maintainability
📝 (AdminPage/index.tsx): Update resetFilter function to set page size and index using constants for consistency
📝 (AdminPage/index.tsx): Update logic to handle loading state and empty user list based on isIdle state for better user experience
📝 (AdminPage/index.tsx): Update PaginatorComponent props to use constant for rows count and simplify paginate function assignment

*  (AppInitPage/index.tsx): introduce new queries to fetch basic examples and folders data for improved functionality and user experience

*  (FlowPage/index.tsx): update refreshFlows function call to include a parameter to get all flows at once for better performance.

*  (frontend): introduce flowsPagination and setFlowsPagination functions to manage pagination for flows in the UtilityStoreType

*  (frontend): introduce new 'folders' and 'setFolders' properties to FoldersStoreType to manage folder data efficiently

*  (types.ts): introduce Pagination type to define structure for pagination data in frontend application

*  (frontend): introduce PaginatedFlowsType to represent paginated flow data structure in the application.

*  (frontend): add optional 'pages' property to PaginatorComponentType to allow customization of the number of pages displayed in the paginator

*  (utilityStore.ts): introduce flowsPagination object with default values for page and size to manage pagination in the utility store

*  (foldersStore.tsx): introduce new state 'folders' and setter function 'setFolders' to manage folder data in the store

*  (ViewPage/index.tsx): update refreshFlows function call to include a parameter to get all flows at once, improving efficiency and reducing unnecessary calls to the backend.

* 📝 (StorePage/index.tsx): update constants import to include new pagination constants for better organization
♻️ (StorePage/index.tsx): refactor pagination logic to use new pagination constants for clarity and consistency throughout the file

*  (componentsComponent/index.tsx): Add support for pagination feature in ComponentsComponent to improve user experience and performance.

*  (myCollectionComponent/index.tsx): introduce pagination and search functionality to improve user experience and data handling in the MyCollectionComponent component

*  (Playground/index.tsx): Update refreshFlows function call to include a parameter to get all flows at once for better performance.

*  (entities/index.tsx): introduce PaginatedFolderType to represent a folder with pagination information for better organization and handling of paginated data.

*  (headerTabsSearchComponent/index.tsx): add support for changing tabs and searching functionality in headerTabsSearchComponent
📝 (headerTabsSearchComponent/index.tsx): update tabsOptions to use constant SEARCH_TABS for consistency and reusability

* 📝 (folders.py): Remove redundant import and unused code related to FolderWithPaginatedFlows class
🔧 (folders.py): Update query conditions to use explicit boolean values instead of implicit truthiness for better clarity and readability

* 📝 (folders.py): reorganize imports to improve readability and maintain consistency

* 📝 (flows.py): import FlowSummary model to support new functionality in the API
📝 (flows.py): add header_flows parameter to read_flows function to return a simplified list of flows if set to true

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

*  (model.py): introduce new FlowSummary class to represent a summary of flow data for better organization and readability

*  (pagination_model.py): introduce a new model 'FolderWithPaginatedFlows' to represent a folder with paginated flows for better organization and readability.

* 📝 (cardComponent/index.tsx): add missing semicolon to improve code consistency
♻️ (cardComponent/index.tsx): refactor logic to use data parameter directly instead of fetching flow by id to simplify code and improve readability

*  (use-get-refresh-flows.ts): introduce new query parameter 'header_flows' to support fetching header flows in API requests.

*  (use-get-folders.ts): add functionality to refresh flows when fetching folders to ensure data consistency and up-to-date information.

*  (use-upload-flow.ts): add support for fetching header flows along with all flows when refreshing flows in useUploadFlow hook

*  (use-redirect-flow-card-click.tsx): introduce a new custom hook 'useFlowCardClick' to handle flow card click events in the newFlowModal component. This hook utilizes react-router-dom for navigation, custom analytics tracking, and various utility functions to manage flow data and update the UI.

*  (NewFlowCardComponent/index.tsx): refactor onClick event handler into a separate function handleClick for better readability and maintainability

* 📝 (undrawCards/index.tsx): Remove unused imports and variables to clean up the code
♻️ (undrawCards/index.tsx): Refactor onClick event handler to use a separate function for handling flow card click events

*  (flowsManager/index.ts): introduce new state and setter for flowToCanvas to manage the flow displayed on canvas

*  (flowsManagerStore.ts): introduce new feature to set and update the flow to be displayed on the canvas asynchronously

*  (ViewPage/index.tsx): add support for fetching header flows along with all flows when refreshing data to improve data retrieval efficiency

*  (collectionCard/index.tsx): introduce useFlowsManagerStore to manage flows in the application
📝 (collectionCard/index.tsx): update handleClick function to set flow to canvas before navigating to editFlowLink

*  (Playground/index.tsx): add support for fetching header flows along with all flows when refreshing data in the Playground page.

* 🐛 (FlowPage/index.tsx): Fix setCurrentFlow logic to correctly set the current flow based on flowToCanvas value. Add flowToCanvas dependency to useEffect to ensure proper rendering.

*  (use-get-flow.ts): introduce a new file to handle API queries for fetching flow data in the frontend application. This file defines a custom hook 'useGetFlow' that makes a GET request to the API endpoint to retrieve flow data based on the provided flow ID.

* 📝 (flows.py): update import statement to use FlowHeader instead of FlowSummary for better clarity
📝 (flows.py): update response_model in read_flows endpoint to use FlowHeader for consistency and clarity

*  (model.py): rename FlowSummary class to FlowHeader for better clarity and consistency in naming conventions
📝 (model.py): add is_component field to FlowHeader class to indicate if the flow is a component or not

*  (use-get-folder.ts): introduce processFlows function to process flows data
📝 (use-get-folder.ts): add cloneDeep function to safely clone data before processing

* 🔧 (use-get-refresh-flows.ts): refactor useGetRefreshFlows function to simplify processing of dbDataFlows and update state accordingly

*  (FlowPage/index.tsx): Add useGetFlow hook to fetch flow data and update current flow on canvas. Add getFlowToAddToCanvas function to handle fetching and setting flow data on canvas.

*  (nodeToolbarComponent/index.tsx): improve user experience by automatically closing the override modal after successful flow override

*  (use-post-login-user.ts): add queryClient.refetchQueries for "useGetTags" after successful login to update tags data in the frontend.

*  (use-get-flow.ts): add processFlows function to process flow data before returning it to improve code readability and maintainability

* 🐛 (use-get-refresh-flows.ts): fix asynchronous flow to correctly handle data retrieval and processing before setting state and returning flows

*  (use-get-tags.ts): add functionality to set tags in utility store after fetching them from the API

* 📝 (shareModal/index.tsx): Update import statement for useUtilityStore to improve code organization and readability
🔧 (shareModal/index.tsx): Replace useGetTagsQuery with useUtilityStore to manage tags state and remove unnecessary API call for tags data
🔧 (shareModal/index.tsx): Replace references to data with tags variable to ensure consistency and avoid potential bugs
🔧 (shareModal/index.tsx): Update TagsSelector component to use tags variable instead of data for better data management

*  (AppInitPage/index.tsx): introduce useGetTagsQuery to fetch tags data from the store API for AppInitPage.

*  (StorePage/index.tsx): refactor to use useUtilityStore for tags state management instead of useGetTagsQuery for better separation of concerns and code organization. Update TagsSelector component to use tags from useUtilityStore hook.

*  (frontend): introduce Tag type to UtilityStoreType and add tags and setTags functions to manage tags in the store.

*  (types.ts): introduce new Tag type to represent a tag with id and name properties

*  (utilityStore.ts): introduce new 'tags' array and 'setTags' function to manage tags in the utility store

* 📝 (App.css): add a blank line for better readability and consistency in the CSS file

*  (test_database.py): add pagination support for reading flows and folders to improve data retrieval efficiency and user experience

*  (tabsComponent/index.tsx): refactor changeLocation function to use useCallback hook for better performance and stability
 (tabsComponent/index.tsx): update onClick event handler to directly call changeLocation function for cleaner code and improved readability

*  (headerTabsSearchComponent/index.tsx): refactor handleChangeTab, handleSearch, handleInputChange, and handleKeyDown functions to use useCallback for better performance and memoization
📝 (headerTabsSearchComponent/index.tsx): update tabActive prop to use the activeTab prop passed from parent component for consistency and clarity

*  (myCollectionComponent/index.tsx): refactor filter state initialization to dynamically set based on current location pathname
♻️ (myCollectionComponent/index.tsx): refactor onSearch and onChangeTab functions to use useCallback for better performance and memoization

*  (create-query-param-string.ts): introduce a new utility function to build query parameter strings for URLs in the frontend controllers.

*  (use-get-folder.ts): introduce buildQueryStringUrl function to create query parameter strings for API requests
📝 (use-get-folder.ts): add comments to explain the purpose of the code and improve code readability
🔧 (use-get-folder.ts): update useGetFolderQuery function to include additional configuration options for the query, such as refetchOnWindowFocus: false

*  (use-delete-folders.ts): add functionality to update local store after deleting a folder to keep it in sync with the server data

* 📝 (use-post-add-flow.ts): import useFolderStore to access myCollectionId state for refetching queries with the correct folder_id
🐛 (use-post-add-flow.ts): fix queryClient.refetchQueries to include the correct queryKey with folder_id or myCollectionId if response.folder_id is null

*  (use-get-refresh-flows.ts): refactor addQueryParams function to use buildQueryStringUrl utility function for better code readability and maintainability

* ♻️ (flows.py): remove unnecessary commented out code and add pagination functionality to the router for better code organization and readability

* 🔧 (NodeDescription/index.tsx): remove console.log statement for better code cleanliness and readability

*  (index.tsx): Add DialogClose component from @radix-ui/react-dialog to handle cancel action in ConfirmationModal. Refactor handleCancel function to improve code readability and maintainability.

* ♻️ (use-redirect-flow-card-click.tsx): remove unused setFlowToCanvas function to clean up code and improve maintainability

* 📝 (use-patch-update-flow.ts): update onSettled callback to refetch useGetFolders query with the updated folder_id after patching a flow

* 🔧 (use-delete-folders.ts): update onSettled function to correctly refetch queries with the specific folder id when deleting folders

*  (use-get-folder.ts): update useGetFolderQuery to include additional query parameters for pagination and filtering options

* 🔧 (use-post-upload-to-folder.ts): update onSettled callback to refetch useGetFolders query with the correct queryKey and folder_id parameter

*  (use-add-flow.ts): add functionality to refresh flows after adding a new flow to ensure the UI is up to date with the latest data.

*  (AppInitPage/index.tsx): enable fetching basic examples and tags only when isFetched is true to improve performance and reduce unnecessary API calls

*  (myCollectionComponent/index.tsx): refactor onPaginate function to handlePageChange callback for better code organization and readability. Update key prop in ComponentsComponent to include filter and search variables for proper re-rendering.

*  (use-get-folder.ts): add placeholderData option to useGetFolderQuery to provide initial data while fetching folder information

* [autofix.ci] apply automated fixes

* 🐛 (use-post-upload-to-folder.ts): fix queryKey values to correctly refetch queries after uploading a file to a folder

* ⬆️ (folders.spec.ts): increase timeout for waiting in test to improve reliability and prevent flakiness

*  (folders.spec.ts): update selectors to target specific elements by using the first() method to improve test reliability

*  (auto-save-off.spec.ts): update test to match changes in UI for auto-save feature and improve test coverage for hover functionality.

* 📝 (model.py): update model fields to set default values for folder_id, is_component, endpoint_name, and description to None for consistency and clarity

* ♻️ (index.tsx): refactor isUpdatingFolder logic to include isFetchingFolder variable for better accuracy and readability

* 🐛 (index.tsx): fix variable name typo in isLoadingFolder assignment to correctly reference isFetchingFolder

* 🐛 (use-patch-update-flow.ts): fix issue with missing closing parenthesis in queryClient.refetchQueries() method
📝 (use-patch-update-flow.ts): update queryKey in queryClient.refetchQueries() to ["useGetFolder"] to correctly refetch the folder data after updating a flow

*  (use-save-flow.ts): add support for fetching flow data before saving if not already present to ensure data consistency and accuracy

*  (folders.spec.ts): update selectors to target specific elements correctly for testing purposes

*  (use-on-file-drop.tsx): add support for checking flow names in a specific collection to prevent duplicates
♻️ (use-add-flow.ts): refactor to use the same logic for checking flow names in a specific collection to prevent duplicates

*  (index.tsx): Add useIsMutating hook to check if a folder is being deleted to update UI accordingly
♻️ (index.tsx): Refactor logic to determine if a folder is being updated to include check for folder deletion
🔧 (index.tsx): Refactor Select component to use a separate function for handling value change
🔧 (index.tsx): Refactor Button components to disable based on separate variables for first and last page
🔧 (index.ts): Remove unused import and refactor code to use useRef hook for storing the latest folder id in useGetFolderQuery

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2024-10-11 21:49:20 +00:00
Mendon Kissling
34f18185c5
docs: add notes to flows (#3861)
* add-note

* notes

* vector-store-rag-notes

* vector-store-rag-notes

* comma

* comma

* revert

* add-notes

* another-way

* revert

* revert

* fix

* descriptions

* lightbulb

* deployed-size

* size

* size

* resizing-is-true

* targethandle

* double

* set-components

* pin

* notes

* fix

* dont-change-code

* cleanup

* update example

* fix postion on example

* fix-descriptions

* swap-link

* newline-and-lightbulb

* another-docs-link

* play-button

* remove-double

* update NODE_FORMAT_ATTRIBUTES to prevent description updates on examples

* Update AstraDB documentation link

* update documentation on code

*  (chatInputOutputUser-shard-0.spec.ts): update the test to click on the last element with the text "Playground" to ensure correct element is clicked

* 🐛 (Basic Prompting.spec.ts): fix clicking on "Playground" element by selecting the last occurrence to ensure correct element is clicked

*  (Blog Writer.spec.ts): update test to click on the last element with text "Playground" to ensure correct element is clicked on the page

*  (Dynamic Agent.spec.ts): update test to click on the last element with text "Playground" to ensure correct element is clicked on the page

* 🐛 (decisionFlow.spec.ts): fix clicking on "Playground" button by selecting the last element with the text "Playground" to ensure correct element is clicked

* 🐛 (generalBugs-shard-3.spec.ts): fix clicking on "Playground" button by selecting the last occurrence to prevent ambiguity

* 🐛 (generalBugs-shard-0.spec.ts): fix clicking on "Playground" button by selecting the last element with the text "Playground" to ensure correct element is clicked

* 🐛 (general-bugs-shard-3836.spec.ts): fix clicking on "Playground" button by selecting the last element with the text "Playground" to ensure correct element is clicked

*  (chatInputOutputUser-shard-2.spec.ts): update test to click on the last element with text "Playground" to ensure correct interaction with chat input/output feature

*  (stop-button-playground.spec.ts): update test to click on the last occurrence of the text "Playground" to ensure correct element is clicked

* 🐛 (limit-file-size-upload.spec.ts): fix selector to click on the last element with text "Playground" instead of the first one

*  (fileUploadComponent.spec.ts): update test to click on the last element with text "Playground" to ensure correct element is clicked on the page

*  (chatInputOutput.spec.ts): update test to click on the last occurrence of the "Playground" text to ensure correct element is clicked

* 🐛 (generalBugs-shard-9.spec.ts): fix clicking on "Playground" element by selecting the last occurrence to prevent flakiness in tests

* 🐛 (Document QA.spec.ts): fix clicking on "Playground" element by selecting the last occurrence to ensure correct element is clicked

*  (similarity.spec.ts): update click method to target the last occurrence of "Playground" text to ensure correct element is clicked

* 🐛 (Simple Agent.spec.ts): fix clicking on "Playground" button by selecting the last element with the text to avoid ambiguity

*  (textInputOutput.spec.ts): update test script to target the last occurrence of the "Playground" text element to ensure correct interaction with the UI.

*  (Travel Planning Agent.spec.ts): Update the selector for the "Playground" text to ensure the correct element is clicked on the page.

* 🐛 (Vector Store.spec.ts): fix clicking on "Playground" element by selecting the last one to avoid ambiguity

*  (generalBugs-shard-9.spec.ts): add click action on the last element with test id "title-Prompt" to improve test coverage and interaction with the page

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
2024-10-01 16:26:18 +00:00
Cristhian Zanforlin Lousa
ad97ee9830
fix: image not been sent on ChatInputComponent during runtime of building a flow (#3862)
* refactor: Refactor file path rewriting logic

This commit refactors the logic for rewriting file paths in the `rewrite_file_path` function. The function now splits the file path by "/" and checks if it has at least two parts. If it does, it creates a consistent file path by concatenating the last two parts. If not, it returns the original file path. This change improves the consistency of file paths in the codebase.

Refactor the file path rewriting logic in the `rewrite_file_path` function.

* refactor: Refactor file path rewriting logic and treat file paths in InterfaceVertex

* Refactor file path rewriting logic and treat file paths in InterfaceVertex

* Refactor file path rewriting logic and treat file paths in InterfaceVertex

* Refactor file path rewriting logic and treat file paths in InterfaceVertex

*  (general-bugs-shard-3836.spec.ts): update test description to be more specific about the tool used for sending images on chat
📝 (general-bugs-shard-3836.spec.ts): remove unused import of readFileSync from fs module

*  (test_rewrite_file_path.py): add unit tests for the rewrite_file_path function to ensure correct behavior with various file path scenarios

* ♻️ (utils.py): refactor file_path function to handle both forward and backward slashes and extract file path after drive letter if present

* style: fix single quotes, commas, and spaces

---------

Co-authored-by: italojohnny <italojohnnydosanjos@gmail.com>
2024-09-23 12:19:09 -03:00
Lucas Oliveira
2f1f1808b9
refactor: handle rendering and filtering functionality (#3512) 2024-09-13 17:27:30 -03:00
Christophe Bornet
7273a6e78a
feat: Add CassandraGraphVectorStoreComponent and HtmlLinkExtractorComponent (#3757)
* Add CassandraGraphVectorStoreComponent and HtmlLinkExtractorComponent

* Move uuid import to global imports

* fix test with new text spliter

* update poetry lock

* ci: add continue-on-error to py_autofix.yml

---------

Co-authored-by: Ítalo Johnny <italojohnnydosanjos@gmail.com>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>
2024-09-11 14:56:25 -03:00
Cristhian Zanforlin Lousa
6061951cba
tests: new tests folders organization (#3716)
* new tests folders organizations

* 📝 (nightly_build.yml): update tests_folder path from "tests/scheduled" to "tests/core" to reflect the correct location of the tests folder

* renaming test folder

* changing e2e to integrations folder

* 📝 (frontend/tsconfig.json): update test file paths to reflect changes in folder structure for better organization and clarity

* change assets folder

* 📝 (frontend): update file paths to remove redundant 'core' directory in test assets

* 📝 (Document QA.spec.ts, Vector Store.spec.ts, fileUploadComponent.spec.ts): Update file paths to correctly reference test assets in integration and unit tests.

* github suggestions
2024-09-09 14:45:30 -03:00