Commit graph

29 commits

Author SHA1 Message Date
Deon Sanchez
c902fb9e11
feat: Generic Callback Dialog Input for Custom Component (#6236)
* force dialog

* Reimplement backend dialog

* Update astradb.py

* Clean up dropdown options

* Remove unused import

* [autofix.ci] apply automated fixes

* Update astradb.py

* Ruff fixes

* Update Vector Store RAG.json

* [autofix.ci] apply automated fixes

* fix: Conditionally render custom option dialog in dropdown

*  (NodeDialogComponent/index.tsx): Add support for passing 'name' prop to NodeDialog component to improve customization and flexibility
📝 (NodeDialogComponent/index.tsx): Update comments and remove unused import to improve code readability and maintainability
🔧 (dropdownComponent/index.tsx): Pass 'name' prop to Dropdown component to enhance customization and flexibility

*  Refactor NodeDialog component to improve state management and payload handling

* Update astradb.py

* [autofix.ci] apply automated fixes

*  Enhance NodeDialog and Dropdown components with improved payload handling and type safety

* Add DB creation functionality

* First version of create

* Update astradb.py

* Fix ruff errors

* Update Vector Store RAG.json

* [autofix.ci] apply automated fixes

* Update astradb.py

* [autofix.ci] apply automated fixes

* Update astradb.py

* [autofix.ci] apply automated fixes

* Update astradb.py

* Update astradb.py

* Update astradb.py

* Update Vector Store RAG.json

* [autofix.ci] apply automated fixes

* Update astradb.py

* [autofix.ci] apply automated fixes

* feat: Enhance dropdown and node dialog with loading states and improved UX

* refactor: Improve error handling in NodeDialog component

* refactor: Update default excluded keys in dropdown metadata filter

* [autofix.ci] apply automated fixes

* refactor: Update Vector Store RAG starter project JSON with formatting and connection ID corrections

* Hide fields that aren't relevant yet

* [autofix.ci] apply automated fixes

* Update Vector Store RAG.json

* [autofix.ci] apply automated fixes

* Update astradb.py

* feat: Improve dropdown component with loading states and enhanced UX

* Update astradb.py

* [autofix.ci] apply automated fixes

* Update astradb.py

* Simon feedback

* [autofix.ci] apply automated fixes

* feat: Enhance dropdown and UI components with status indicators and loading states

* refactor: Update dropdown metadata filtering to exclude 'icon' key

* fix: Conditionally render dropdown icon when available

* fix: Improve dropdown icon rendering with null checks

* chore: Remove debug console log in dropdown component

* Add support for icons in the dropdowns

* Update astradb.py

* Update Vector Store RAG.json

* [autofix.ci] apply automated fixes

* feat: Enhance dropdown status display and color handling

* feat: Add auto-close functionality to node dialog and expand status color handling

* feat: Add real-time template refresh for node dialog fields

* refactor: Improve node dialog component state management and naming

* Async for create collection

* [autofix.ci] apply automated fixes

* Dynamic provider list generation

* Update astradb.py

* [autofix.ci] apply automated fixes

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

* Update astradb.py

* [autofix.ci] apply automated fixes

---------

Co-authored-by: Eric Hare <ericrhare@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
2025-02-15 02:10:12 +00:00
Cristhian Zanforlin Lousa
8531e1b58d
feat: Update node name and description UX editing (#5920)
*  (NodeName/index.tsx): add cursor-grab class to improve user experience when dragging the node
 (NodeName/index.tsx): add nodrag class to prevent text selection when dragging the node
 (NodeStatus/index.tsx): add nodrag class to prevent text selection when dragging the node
 (GenericNode/index.tsx): add nopan, nodelete, nodrag, noflow classes to improve node dragging behavior

* 📝 (NodeDescription/index.tsx): Update cursor style to 'auto' for better user experience
📝 (NodeName/index.tsx): Update cursor style to 'auto' for better user experience
📝 (NodeOutputfield/index.tsx): Add cursor style 'pointer' to improve interactivity

*  (NodeDescription/index.tsx): Add support for editing node description when selected and editNameDescription is true
 (NodeName/index.tsx): Add support for editing node name when selected and editNameDescription is true
🔧 (GenericNode/index.tsx): Introduce useAlternate hook to handle toggling editNameDescription state
📝 (use-alternate.tsx): Add custom hook useAlternate to handle toggling boolean state
🔧 (style/index.css): Add new CSS variable --zinc-foreground for styling purposes
🔧 (tailwind.config.mjs): Add new tailwind color variable "zinc-foreground" for styling purposes

* 📝 (NodeDescription/index.tsx): Remove unnecessary setInputDescription call and update useEffect dependencies for better performance
📝 (NodeDescription/index.tsx): Update className for Textarea component to improve styling and readability
📝 (NodeDescription/index.tsx): Update className for generic-node-desc-text to improve styling and cursor behavior
📝 (NodeName/index.tsx): Remove unnecessary setInputName call and update useEffect dependencies for better performance
📝 (NodeName/index.tsx): Update className for span element to improve cursor behavior and styling
📝 (GenericNode/index.tsx): Add useRef for node element and implement useChangeOnUnfocus hook for better handling of focus events
📝 (GenericNode/index.tsx): Update className for pencil icon based on editNameDescription state for better visual feedback
📝 (GenericNode/index.tsx): Add editNameDescription to dependencies of useCallback to prevent unnecessary re-renders
📝 (GenericNode/index.tsx): Add editNameDescription to dependencies of useEffect to handle changes in editNameDescription state
📝 (use-change-on-unfocus.tsx): Implement custom hook useChangeOnUnfocus for handling focus events and state changes

* Refactor NodeDescription to remove old logic and variables

* Refactor NodeName component to remove unnecessary logic and variables

* [autofix.ci] apply automated fixes

*  (NodeDescription/index.tsx): Add functionality to edit node description and handle events like blur, key down, and double click for sticky notes
📝 (NoteNode/index.tsx): Introduce useAlternate hook to toggle edit mode for node description in NoteNode component

* ♻️ (NoteNode/index.tsx): refactor useAlternate hook usage to simplify code and improve readability

* 🔧 (GenericNode/index.tsx): refactor className to conditionally apply translate-x styles based on showNode state for improved UI responsiveness

* 📝 (NodeDescription/index.tsx): Refactor handleBlurFn and handleKeyDownFn to improve code readability and maintainability
📝 (NodeName/index.tsx): Refactor handleBlur and handleKeyDown functions for better code organization and readability
📝 (GenericNode/index.tsx): Update toggleEditNameDescription prop to setEditNameDescription for consistency and clarity
📝 (use-change-on-unfocus.tsx): Remove unnecessary handleEscape function and handleBlur event listener for better code simplicity and performance

* 📝 (NodeDescription/index.tsx): Update CSS class name to use 'focus-border-primary' instead of 'focus-border-black' for consistency and clarity
📝 (GenericNode/index.tsx): Add data-testid attribute to save and edit name description buttons for testing purposes
📝 (edit-name-description-node.spec.ts): Add test to verify user can edit name and description of a node in the UI

*  (GenericNode/index.tsx): Add functionality to show and hide toolbar with animation based on node selection status
📝 (get-class-toolbar-transform.ts): Create helper function to determine transform classes for toolbar animation based on showToolbar and showNode status

*  (NodeDescription/index.tsx): add setHasChangedNodeDescription prop to update parent component when node description changes
 (NodeName/index.tsx): add setHasChangedNodeDescription prop to update parent component when node name changes
 (GenericNode/index.tsx): add hasChangedNodeDescription state and setHasChangedNodeDescription function to track changes in node description and update parent component
📝 (edit-name-description-node.spec.ts): add wait for sidebar custom component button and timeout to improve test reliability

*  (group.spec.ts): Update click event on "title-Group" element to improve user interaction
🐛 (group.spec.ts): Fix click event on "save-name-description-button" element to properly save changes
🐛 (general-bugs-save-changes-on-node.spec.ts): Increase timeout for selectors to prevent test failures due to slow loading
🐛 (general-bugs-save-changes-on-node.spec.ts): Fix random value generation to ensure consistent length
🐛 (general-bugs-save-changes-on-node.spec.ts): Fix click event on "add-component-button-text-output" element to add component correctly
🐛 (general-bugs-save-changes-on-node.spec.ts): Fix timeout for selector to prevent test failures due to slow loading
🐛 (general-bugs-save-changes-on-node.spec.ts): Fix verifyTextareaValue function to properly verify textarea values

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2025-02-05 14:02:57 +00:00
Cristhian Zanforlin Lousa
b2691eebce
feat: enhance slider component with labels and improved input handling (#5065)
* 📝 (openai.py): Update temperature slider range from 0-1 to 0-2 with step 0.01 for more precise control
📝 (sliderComponent/index.tsx): Update step value for slider component from 0.1 to 0.01 for smoother and more accurate adjustments
📝 (sliderComponent/index.tsx): Update MAX_LABEL from "Wild" to "Creative" for better semantic representation
📝 (sliderComponent/index.tsx): Add cursor-grabbing style when slider thumb is being grabbed to improve user experience

* 📝 (sliderComponent/index.tsx): improve styling and structure of the SliderComponent by refactoring the display value element to use a div container with appropriate classes and styles.

* 📝 (App.css): Add styles to hide spin buttons in input[type=number] elements for better UX
🔧 (sliderComponent/index.tsx): Add input element to allow users to directly edit the slider value for improved user experience

*  (slider-labels.tsx): Add SliderLabels component to display min and max labels with icons in SliderComponent for better user experience
📝 (index.tsx): Remove sliderInput prop and refactor SliderComponent to improve code readability and maintainability
🔧 (applies.css): Add styling for input-slider-text class to improve consistency in SliderComponent styling

* 📝 (applies.css): update hover:ring value to use variable hover:ring-slider-input-border for consistency and maintainability
📝 (index.css): add variable --slider-input-border to define the color value for slider input border
🔧 (tailwind.config.mjs): add slider-input-border custom property to map to the defined color value in the CSS variables

*  (build-color-by-name.ts): add function to dynamically build color based on input values to customize UI
 (get-min-max-value.ts): add function to get minimum or maximum value based on input constraints
🔧 (index.tsx): update import path for getMinOrMaxValue function
🔧 (index.tsx): add buildColorByName function to dynamically set thumb color based on percentage
🔧 (index.tsx): add logic to dynamically set background color gradient based on thumb color and percentage
🔧 (index.tsx): add logic to dynamically set thumb background color based on percentage and color calculation
2024-12-06 13:02:59 +00:00
Lucas Oliveira
e5f73c5080
fix: update design of update component (#4761)
* Added warning color

* Implemented more colors

* Implemented warning button variant

* Added warning section to node

* Removed warning button and added warning outline to outdated components

* Added negative margin top to node for it to not move when updatable

* Fixed border to be consistent

* removed unused code

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2024-11-21 16:40:25 -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
Lucas Oliveira
3391a266a4
fix: update notes border color, update node and notes code block background (#4617)
* Fixed code block color on notes and node

* Changed color of list bullets

* Changed selected border color for note node

* [autofix.ci] apply automated fixes

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
2024-11-14 19:00:13 +00:00
Mike Fortman
824f39ef36
fix: Fix header z-index issues (#4549)
fix header z index issues
2024-11-12 23:05:54 +00:00
Lucas Oliveira
859b72d634
fix: add colors to the templates and main page cards (#4497)
* Add swatch colors

* Implement new colors on templates modal

* Implement new colors on main page

* Removed hover icon color change on templates

---------

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
2024-11-11 16:48:29 +00:00
Lucas Oliveira
f32360fea8
fix: changed component colors name to not override existing colors, fixed responsiveness issues on main, playground and nav (#4482)
* Changed description color

* Updated edge colors

* updated color of output inspection

* Updated handle position to work with every case

* Open sidebar on filter

* Fixed empty folder on top of the sidebar

* Fix app header responsitivity

* Changed mobile playground showing

* Changed color name to datatype

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2024-11-08 21:10:18 +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
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
Mike Fortman
f6616f5d31
feat: changes the ui and ux of the api dialog to improve usability (#4338)
* init

* dialog uplift

* color updates

* remove weird active state

* [autofix.ci] apply automated fixes

* match code highlighter themes through out

* add tweaks tooltip

* icon resize

* [autofix.ci] apply automated fixes

* dark vs light style + merge fix

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
2024-11-05 16:31:15 +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
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
3279b8a1e8
fix: add collapsible function to templates and fix design bugs (#4305)
* Updated colors

* Fixed design for small screens

* Change border radius

* Changed size of text on templates description

* Fix shine effect on small screens

* Fixed icons on starter templates

* Updated mono font to JetBrains

* Updated icon hit area for X

* Added gradient wrapper and x-gradient

* Changed colors and font weights for nav component

* Added zoom on hover of gradient

* Fixed input size

* Fixed all templates to show everything

* Hide scrollbar

* Change text size of card

* Removed title of the categories

* Removed unused currentTab from templatecategory

* Updated position of search icon

* Updated style of inputs

* Updated search clear button

* Fixed bug on small screens

* Added no results query

* Fixed background on get started cards

* Added focus ring on nav component

* Added tab index to search and sidebar buttons

* Added keyboard navigation to templates

* Updated templatesModal to use ShadCN Sidebar

* Implemented collapsible sidebar

* Fix collapsible to work on mobile but be overlaying content

* Added noise to styleUtils

* Updated padding and sizes for mobile

* Updated text size

* Updated font family to inter

* Made get started components fetch title and description from the flow

* Updated description on get started component

* Updated naming of sidebar

* Updated description of start from scratch

* Updated color of selected sidebar item

* Changed text color for sidebar not active items

* changed description sizes

* changed to line clamp

* Reduced gap between icon and category text

* Fixed no results state

* Fixed X icon only appearing on hover

* Fix auto focus issue

* fixed hover color of primary button

* Fixed gradients to use stops if it exists and stop using random gradient

* removed random gradient

* Fixed design of cards in templates

* Updated nav to go through tests

* Fixed focus on input

* [autofix.ci] apply automated fixes

* New color

* fix testes

* Fixed starter projects test

*  (starter-projects.spec.ts): add Page import to test function parameters for better code readability and maintainability
📝 (starter-projects.spec.ts): refactor test to include a function for waiting for template visibility, improving code readability and reducing duplication

---------

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2024-10-31 16:39:58 -03: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
e910148907
feat: theme color updates (#4256)
theme color updates
2024-10-23 13:04:48 -05:00
anovazzi1
4bb4f02e5b
feature: add new playground ui (#4193)
* create newmodal.tsx

* Add new icons to styleUtils.ts

* Refactor import path for IOModal in chatComponent/index.tsx

* Refactor import path for IOModal in chatComponent/index.tsx

* Refactor session selector UI in IOFieldView component

* Refactor NodeToolbarComponent to add a minimum width to SelectContent

* Refactor IOModal to use newChatView component for ChatView

* improve html structure to ensure aligment of texts

* Refactor IOModal to improve sidebar behavior and alignment

* add new input

* Add Image icon to nodeIconsLucide in styleUtils.ts

* Refactor uploadFileButton to use Image icon instead of PaperclipIcon

* Refactor chat input layout for improved alignment and behavior

* Refactor buttonSendWrapper component to show a "Stop" button with loading indicator

* add a new TextAreaWrapper component

* add icons and update colors

* Add CornerDownLeft icon to nodeIconsLucide in styleUtils.ts

* Refactor buttonSendWrapper component to use default button state

* create newFilePreview

* Refactor file preview component and update button styling

* Refactor file preview component and update button styling

* fix overflow bug

* Refactor ChatView component to include a lockChat feature and display a flow running message

* [autofix.ci] apply automated fixes

* Refactor ChatView component to fix padding issue

* [autofix.ci] apply automated fixes

* Refactor dependencies in uv.lock to use a more specific version specifier for astra-assistants package

* Refactor ChatView component to import newChatMessage instead of chatMessage

* Refactor IOModal newModal component to conditionally display the session name

* Refactor TextAreaWrapper component to update placeholder text and fix padding issue

* Refactor TextAreaWrapper component to update placeholder text and fix padding issue

* Refactor ChatView component to update lockChat UI and display flow running message

* Refactor ChatView component to update lockChat UI and display flow running message

* Refactor ChatMessage component to update sender name UI and fix message width issue

* Refactor EditMessageButton component to update button UI and add tooltips

* Refactor EditMessageButton component to update button UI and add tooltips

* Refactor EditMessageField component to update UI and add functionality

* update edit message field

* fix group reference

* Refactor CodeTabsComponent to update UI, add functionality, and improve code structure

* Refactor CodeTabsComponent to update UI and improve code structure

* Refactor CodeTabsComponent to simplify and improve UI

* [autofix.ci] apply automated fixes

* Refactor ChatView component to fix UI layout issue

* fix overflow code boundaries problems

* Refactor CSS to update background color variables

* Refactor ChatCodeTabComponent to update UI and improve code structure

* fix broken rebase changes

* [autofix.ci] apply automated fixes

* Refactor EditMessageButton component to remove delete functionality

* Refactor SessionSelector component to update UI and improve code structure

* Refactor SessionSelector component to update UI and improve code structure

* [autofix.ci] apply automated fixes

* refactor session selector to use old code and keep updates on newSessionSelector

* create new button send wrapper

* restore old button send wrapper and update imports

* restore upload file button and create new UploadFileButton

* [autofix.ci] apply automated fixes

* Add feature flag for new IO modal

* Refactor IOModal imports to support feature flag

* update package-lock.json

* [autofix.ci] apply automated fixes

* remove console.log

* Refactor session selector event handlers

* Refactor file deletion in ChatInput component

* [autofix.ci] apply automated fixes

* Refactor file handling in ChatInput component

* [autofix.ci] apply automated fixes

* add user icon to messages

* feat: Add "Run Flow" button to ChatInput component

This commit adds a new button labeled "Run Flow" to the ChatInput component. When clicked, it triggers the sendMessage function with a repeat value of 1. Additionally, if there is no input in the chat, a message is displayed prompting the user to add a Chat Input component to their flow.

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2024-10-22 18:07:27 +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
Yuqi Tang
e58b27062c
feat: improve notes design (#3938)
* fix notes style

* fix notes style

* adding ghost node

* [autofix.ci] apply automated fixes

* change cursor position

* update notes related test

* [autofix.ci] apply automated fixes

* adjust shadow block width

* move cursor to middle:

* [autofix.ci] apply automated fixes

* fix padding

---------

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-02 05:45:19 -07:00
Lucas Oliveira
2f1f1808b9
refactor: handle rendering and filtering functionality (#3512) 2024-09-13 17:27:30 -03:00
anovazzi1
4ee25359a5
feature: add flow notes (#3460)
* feat: Add NoteDraggableComponent to extraSidebarComponent

This commit adds the NoteDraggableComponent to the extraSidebarComponent in the FlowPage. The NoteDraggableComponent allows users to drag and drop sticky note icons onto the page. When a note is dragged, its data is set as "note" in the dataTransfer object. The note has a default text value of null and a noteColor of "yellow". This component enhances the user experience by providing a convenient way to add notes to the page.

* feat: Add NoteNode component for displaying and editing notes

This commit adds the NoteNode component, which is responsible for displaying and editing notes in the FlowPage. The NoteNode component includes functionality for resizing, selecting, and editing the note text. It enhances the user experience by providing a convenient way to add and manage notes on the page.

* feat: Add NoteNode and NoteDraggableComponent for managing notes in FlowPage

This commit adds the NoteNode component, responsible for displaying and editing notes in the FlowPage. It also introduces the NoteDraggableComponent, allowing users to drag and drop sticky note icons onto the page. These components enhance the user experience by providing a convenient way to add and manage notes on the page.

* feat: Add DRAG_EVENTS_CUSTOM_TYPESS constant for custom drag event types

This commit adds the DRAG_EVENTS_CUSTOM_TYPESS constant to the constants file. It defines custom drag event types for the generic node and note node components. This constant enhances the code by providing a centralized place to manage and reference the custom drag event types.

* feat: Add support functions for custom drag event types

* feat: Add support for custom drag event types in PageComponent

This commit adds support for custom drag event types in the PageComponent of the FlowPage. It imports the necessary functions from the utils file and uses them to check if the dragged data has supported node types. This enhancement improves the drag and drop functionality by allowing only supported node types to be dropped on the page.

* feat: Add NoteDataType for managing note data in FlowPage

* refactor: create new types for noteNode

* feat: Update NoteNode component to use new NoteDataType

The NoteNode component in the NoteNode/index.tsx file has been updated to use the new NoteDataType for managing note data in the FlowPage. This change ensures consistency and improves the codebase.

* node with title and description

* feat: Add "note" alias for StickyNote in nodeIconsLucide

This commit adds the "note" alias for the StickyNote icon in the nodeIconsLucide object in the styleUtils.ts file. This alias allows for more intuitive usage of the StickyNote icon by providing an alternative name. It improves code readability and maintainability.

* refactor: Update NodeDescription component to use emptyPlaceholder prop

The NodeDescription component in the GenericNode/components/NodeDescription/index.tsx file has been updated to use the emptyPlaceholder prop. This change allows for more flexibility in customizing the placeholder text when the description is empty. It improves code reusability and enhances the user experience.

* refactor: Remove unused Textarea import in NoteNode component

* add initial resize to note component

* [autofix.ci] apply automated fixes

* refactor: add code validation functionality on tanstack mutation (#3469)

* Added Validate endpoint

* Added API Code Validate type

* Added post validate code hook

* Used mutation instead of API call to validate code

* Removed validate code api call

* refactor: Update NodeName component to use full width in GenericNode

The NodeName component in the GenericNode module has been updated to use the full width of the parent container. This change ensures that the input field or tooltip for the node name occupies the entire available space, improving the visual consistency and user experience.

* refactor: Update NodeDescription component to use full height in GenericNode

The NodeDescription component in the GenericNode module has been updated to use the full height of the parent container. This change ensures that the description text area occupies the entire available space, improving the visual consistency and user experience.

* refactor: Update NodeDescription component to use full height in GenericNode

* refactor: Update NodeDescription component to use full height in GenericNode

* increase size control on note node

* refactor: Update NoteNode component to use constants for min and max dimensions

The NoteNode component in the CustomNodes module has been updated to use the constants for the minimum and maximum dimensions. This change improves code readability and maintainability by centralizing the values in the constants file. The component now uses the NOTE_NODE_MIN_WIDTH, NOTE_NODE_MIN_HEIGHT, NOTE_NODE_MAX_HEIGHT, and NOTE_NODE_MAX_WIDTH constants for setting the dimensions of the NodeResizer and the inline styles. This ensures consistency across the application and makes it easier to adjust the dimensions in the future.

* fix overflow issue

* refactor: update NoteDraggableComponent

The NoteDraggableComponent in the extraSidebarComponent module has been updated to remove unused code and improve functionality. The code for adding a note has been removed as it is no longer needed. Additionally, the component has been updated to use a new design and layout for better user experience. This refactor improves the overall code cleanliness and removes unnecessary clutter.

* refactor: Update NoteNode component to use constants for min and max dimensions

* update component to accept multiple colors

* update note colors

* update min width

* refactor: Update NodeDescription component to accept additional styling options

The NodeDescription component in the GenericNode module has been updated to accept additional styling options. The component now includes the inputClassName, mdClassName, and style props, allowing for more customization of the input and markdown elements. This refactor improves the flexibility and extensibility of the component, making it easier to adapt to different design requirements.

* fix bug on description size

* [autofix.ci] apply automated fixes

* feat: skip note nodes when building vertices"

add check to skip nodes of type NoteNode when building vertices in the graph
this prevents unnecessary processing of note nodes which are not part of the actual graph logic

* 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

* fix: no module named 'psycopg2' (#3526)

* fix: add dependecy to Dockerfile

* fix: revert quick fix

* fix: update poetry.lock

* feat: add compression support to frontend and backend (#3484)

* Added compression lib to frontend

* Added compression handling to backend

* Added compression to body requests on frontend

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

* refactor: add code validation functionality on tanstack mutation (#3469)

* Added Validate endpoint

* Added API Code Validate type

* Added post validate code hook

* Used mutation instead of API call to validate code

* Removed validate code api call

* refactor: Update NodeName component to use full width in GenericNode

The NodeName component in the GenericNode module has been updated to use the full width of the parent container. This change ensures that the input field or tooltip for the node name occupies the entire available space, improving the visual consistency and user experience.

* fix imports

* refactor: remove unused import in styleUtils.ts

* refactor: update checkOldNodesOutput to include only generic nodes

The checkOldNodesOutput function in reactflowUtils.ts has been updated to include only generic nodes when checking for nodes without outputs. This change ensures that only nodes of type "genericNode" are considered, improving the accuracy of the check and preventing false positives.

* refactor: improve checkOldNodesOutput to include only generic nodes

* [autofix.ci] apply automated fixes

* 📝 (frontend): Add data-testid attribute to elements for testing purposes in NodeDescription, NoteToolbarComponent, NoteNode, and Textarea components
 (frontend): Create end-to-end test for interacting with sticky notes including creating, editing, duplicating, and deleting notes

*  (stop-building.spec.ts): Add a 1-second delay after clicking the stop building button to improve user experience
 (sticky-notes.spec.ts): Add a new end-to-end test for interacting with sticky notes on the main page to ensure functionality and user interaction with sticky notes.

* refactor: update NodeName and GenericNode components to improve UI and code readability

* [autofix.ci] apply automated fixes

* chore: Update NodeDescription component to use dark mode placeholder color

* chore: Update sidebar note component icon to use StickyNote instead of SquarePen

* refactor(main.py): remove unused imports and middleware related to GZip to simplify code and improve readability
feat(main.py): add middleware for configuring logger to improve logging functionality and centralize logging configuration

* add center postion in the flow

* chore: Update NoteNode icon to use SquarePen instead of StickyNote

* [autofix.ci] apply automated fixes

* chore: Update API base URL

* [autofix.ci] apply automated fixes

* chore:  add feature flag for MVPs

* code format

*  (NoteNode/index.tsx): Wrap IconComponent in a div with data-testid "note_icon" for better accessibility and testing
 (PageComponent/index.tsx): Add data-testid "add_note" to ControlButton for easier testing and identification
🔧 (sticky-notes.spec.ts): Update test selectors to use new data-testid "note_icon" and "add_note" for improved test reliability

* chore: Update types-markdown to version 3.7.0.20240822

* feat: Add lazy loading for images in sticky-notes.spec.ts

* [autofix.ci] apply automated fixes

* update poetry lock

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes

* Refactor feature flag import for ENABLE_MVPS across components and tests

* Add skip marker to unimplemented test in test_graph_state_model.py

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: Ítalo Johnny <italojohnnydosanjos@gmail.com>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
2024-09-02 11:53:47 +00:00
anovazzi1
df16cfdb93
fix: update border class for selected node status (#3556)
Update the border class for the selected node status in the NodeStatus component to "border-2 border-node-selected hover:shadow-node". This change improves the visual representation of the selected node status.
2024-08-26 22:10:00 +00:00
Sebastián Estévez
0d5228d681
Astra Assistants Support (#2041)
* ruff

* revert config.yaml

* add build_config

* ruff

* add build_config
2024-07-22 10:26:30 -07:00
anovazzi1
e71a63432d added beta foreground soft color 2024-06-24 04:38:39 -07:00
Lucas Oliveira
f33c73a3ad Fixed Prettier tailwind formatting 2024-06-17 14:37:23 -03:00
Lucas Oliveira
07bf5e1573 Upgraded NPM packages versions, fixed SVG loadings and removed DaisyUI 2024-06-17 10:46:27 -03:00
Renamed from src/frontend/tailwind.config.js (Browse further)