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>
This commit is contained in:
Cristhian Zanforlin Lousa
GitHub
parent
c1097d2dde
commit
099a057d4f
157 changed files with 3894 additions and 1969 deletions
1
.github/workflows/typescript_test.yml
vendored
1
.github/workflows/typescript_test.yml
vendored
|
|
@ -119,6 +119,7 @@ jobs:
|
|||
max_attempts: 2
|
||||
command: |
|
||||
cd src/frontend
|
||||
npx playwright test ${{ inputs.tests_folder }} --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --list
|
||||
npx playwright test ${{ inputs.tests_folder }} --trace on --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers 2
|
||||
|
||||
- name: Upload blob report to GitHub Actions Artifacts
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ from langflow.template import Output
|
|||
class GetEnvVar(Component):
|
||||
display_name = "Get env var"
|
||||
description = "Get env var"
|
||||
icon = "custom_components"
|
||||
icon = "code"
|
||||
|
||||
inputs = [
|
||||
StrInput(
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ class APIRequestComponent(Component):
|
|||
),
|
||||
MessageTextInput(
|
||||
name="curl",
|
||||
display_name="Curl",
|
||||
display_name="cURL",
|
||||
info="Paste a curl command to populate the fields. "
|
||||
"This will fill in the dictionary fields for headers and body.",
|
||||
advanced=False,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ from langflow.schema import Data
|
|||
|
||||
class FileComponent(Component):
|
||||
display_name = "File"
|
||||
description = "A generic file loader."
|
||||
description = "Load a file to be used in your project."
|
||||
icon = "file-text"
|
||||
name = "File"
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ class CustomComponent(Component):
|
|||
display_name = "Custom Component"
|
||||
description = "Use as a template to create your own component."
|
||||
documentation: str = "http://docs.langflow.org/components/custom"
|
||||
icon = "custom_components"
|
||||
icon = "code"
|
||||
name = "CustomComponent"
|
||||
|
||||
inputs = [
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ from langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER
|
|||
class ChatInput(ChatComponent):
|
||||
display_name = "Chat Input"
|
||||
description = "Get chat inputs from the Playground."
|
||||
icon = "ChatInput"
|
||||
icon = "MessagesSquare"
|
||||
name = "ChatInput"
|
||||
|
||||
inputs = [
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ from langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI,
|
|||
class ChatOutput(ChatComponent):
|
||||
display_name = "Chat Output"
|
||||
description = "Display a chat message in the Playground."
|
||||
icon = "ChatOutput"
|
||||
icon = "MessagesSquare"
|
||||
name = "ChatOutput"
|
||||
|
||||
inputs = [
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@
|
|||
"files"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatInput",
|
||||
"icon": "MessagesSquare",
|
||||
"lf_version": "1.0.16",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"ChatInput\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"files": {
|
||||
"_input_type": "FileInput",
|
||||
|
|
@ -379,7 +379,7 @@
|
|||
"data_template"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatOutput",
|
||||
"icon": "MessagesSquare",
|
||||
"lf_version": "1.0.16",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
|
|
@ -415,7 +415,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"ChatOutput\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"data_template": {
|
||||
"_input_type": "MessageTextInput",
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
"files"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatInput",
|
||||
"icon": "MessagesSquare",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
"outputs": [
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"ChatInput\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"files": {
|
||||
"advanced": true,
|
||||
|
|
@ -444,7 +444,7 @@
|
|||
"data_template"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatOutput",
|
||||
"icon": "MessagesSquare",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
"outputs": [
|
||||
|
|
@ -479,7 +479,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"ChatOutput\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"data_template": {
|
||||
"advanced": true,
|
||||
|
|
|
|||
|
|
@ -666,7 +666,7 @@
|
|||
"data_template"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatOutput",
|
||||
"icon": "MessagesSquare",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
"outputs": [
|
||||
|
|
@ -701,7 +701,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"ChatOutput\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"data_template": {
|
||||
"advanced": true,
|
||||
|
|
|
|||
|
|
@ -1201,7 +1201,7 @@
|
|||
"data_template"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatOutput",
|
||||
"icon": "MessagesSquare",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
"outputs": [
|
||||
|
|
@ -1236,7 +1236,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"ChatOutput\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"data_template": {
|
||||
"advanced": true,
|
||||
|
|
@ -2487,7 +2487,7 @@
|
|||
"files"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatInput",
|
||||
"icon": "MessagesSquare",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
"outputs": [
|
||||
|
|
@ -2522,7 +2522,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"ChatInput\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"files": {
|
||||
"advanced": true,
|
||||
|
|
|
|||
|
|
@ -305,7 +305,7 @@
|
|||
"files"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatInput",
|
||||
"icon": "MessagesSquare",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
"outputs": [
|
||||
|
|
@ -340,7 +340,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"ChatInput\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"files": {
|
||||
"advanced": true,
|
||||
|
|
@ -522,7 +522,7 @@
|
|||
"data_template"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatOutput",
|
||||
"icon": "MessagesSquare",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
"outputs": [
|
||||
|
|
@ -557,7 +557,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"ChatOutput\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"data_template": {
|
||||
"advanced": true,
|
||||
|
|
@ -1215,7 +1215,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from pathlib import Path\n\nfrom langflow.base.data.utils import TEXT_FILE_TYPES, parse_text_file_to_data\nfrom langflow.custom import Component\nfrom langflow.io import BoolInput, FileInput, Output\nfrom langflow.schema import Data\n\n\nclass FileComponent(Component):\n display_name = \"File\"\n description = \"A generic file loader.\"\n icon = \"file-text\"\n name = \"File\"\n\n inputs = [\n FileInput(\n name=\"path\",\n display_name=\"Path\",\n file_types=TEXT_FILE_TYPES,\n info=f\"Supported file types: {', '.join(TEXT_FILE_TYPES)}\",\n ),\n BoolInput(\n name=\"silent_errors\",\n display_name=\"Silent Errors\",\n advanced=True,\n info=\"If true, errors will not raise an exception.\",\n ),\n ]\n\n outputs = [\n Output(display_name=\"Data\", name=\"data\", method=\"load_file\"),\n ]\n\n def load_file(self) -> Data:\n if not self.path:\n msg = \"Please, upload a file to use this component.\"\n raise ValueError(msg)\n resolved_path = self.resolve_path(self.path)\n silent_errors = self.silent_errors\n\n extension = Path(resolved_path).suffix[1:].lower()\n\n if extension == \"doc\":\n msg = \"doc files are not supported. Please save as .docx\"\n raise ValueError(msg)\n if extension not in TEXT_FILE_TYPES:\n msg = f\"Unsupported file type: {extension}\"\n raise ValueError(msg)\n\n data = parse_text_file_to_data(resolved_path, silent_errors=silent_errors)\n self.status = data or \"No data\"\n return data or Data()\n"
|
||||
"value": "from pathlib import Path\n\nfrom langflow.base.data.utils import TEXT_FILE_TYPES, parse_text_file_to_data\nfrom langflow.custom import Component\nfrom langflow.io import BoolInput, FileInput, Output\nfrom langflow.schema import Data\n\n\nclass FileComponent(Component):\n display_name = \"File\"\n description = \"Load a file to be used in your project.\"\n icon = \"file-text\"\n name = \"File\"\n\n inputs = [\n FileInput(\n name=\"path\",\n display_name=\"Path\",\n file_types=TEXT_FILE_TYPES,\n info=f\"Supported file types: {', '.join(TEXT_FILE_TYPES)}\",\n ),\n BoolInput(\n name=\"silent_errors\",\n display_name=\"Silent Errors\",\n advanced=True,\n info=\"If true, errors will not raise an exception.\",\n ),\n ]\n\n outputs = [\n Output(display_name=\"Data\", name=\"data\", method=\"load_file\"),\n ]\n\n def load_file(self) -> Data:\n if not self.path:\n msg = \"Please, upload a file to use this component.\"\n raise ValueError(msg)\n resolved_path = self.resolve_path(self.path)\n silent_errors = self.silent_errors\n\n extension = Path(resolved_path).suffix[1:].lower()\n\n if extension == \"doc\":\n msg = \"doc files are not supported. Please save as .docx\"\n raise ValueError(msg)\n if extension not in TEXT_FILE_TYPES:\n msg = f\"Unsupported file type: {extension}\"\n raise ValueError(msg)\n\n data = parse_text_file_to_data(resolved_path, silent_errors=silent_errors)\n self.status = data or \"No data\"\n return data or Data()\n"
|
||||
},
|
||||
"path": {
|
||||
"advanced": false,
|
||||
|
|
|
|||
|
|
@ -905,7 +905,7 @@
|
|||
"data_template"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatOutput",
|
||||
"icon": "MessagesSquare",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
"outputs": [
|
||||
|
|
@ -940,7 +940,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"ChatOutput\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"data_template": {
|
||||
"advanced": true,
|
||||
|
|
@ -2215,7 +2215,7 @@
|
|||
"files"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatInput",
|
||||
"icon": "MessagesSquare",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
"outputs": [
|
||||
|
|
@ -2250,7 +2250,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"ChatInput\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"files": {
|
||||
"advanced": true,
|
||||
|
|
|
|||
|
|
@ -279,7 +279,7 @@
|
|||
"files"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatInput",
|
||||
"icon": "MessagesSquare",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
"outputs": [
|
||||
|
|
@ -314,7 +314,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"ChatInput\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"files": {
|
||||
"advanced": true,
|
||||
|
|
@ -829,7 +829,7 @@
|
|||
"data_template"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatOutput",
|
||||
"icon": "MessagesSquare",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
"outputs": [
|
||||
|
|
@ -864,7 +864,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"ChatOutput\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"data_template": {
|
||||
"advanced": true,
|
||||
|
|
|
|||
|
|
@ -914,7 +914,7 @@
|
|||
"data_template"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatOutput",
|
||||
"icon": "MessagesSquare",
|
||||
"lf_version": "1.0.15",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
|
|
@ -950,7 +950,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"ChatOutput\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"data_template": {
|
||||
"advanced": true,
|
||||
|
|
|
|||
|
|
@ -397,7 +397,7 @@
|
|||
"files"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatInput",
|
||||
"icon": "MessagesSquare",
|
||||
"lf_version": "1.0.15",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
|
|
@ -433,7 +433,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"ChatInput\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"files": {
|
||||
"_input_type": "FileInput",
|
||||
|
|
@ -619,7 +619,7 @@
|
|||
"data_template"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatOutput",
|
||||
"icon": "MessagesSquare",
|
||||
"lf_version": "1.0.15",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
|
|
@ -655,7 +655,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"ChatOutput\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"data_template": {
|
||||
"_input_type": "MessageTextInput",
|
||||
|
|
|
|||
|
|
@ -290,7 +290,7 @@
|
|||
"files"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatInput",
|
||||
"icon": "MessagesSquare",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
"outputs": [
|
||||
|
|
@ -325,7 +325,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"ChatInput\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.data.utils import IMG_FILE_TYPES, TEXT_FILE_TYPES\nfrom langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, FileInput, MessageTextInput, MultilineInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_USER, MESSAGE_SENDER_USER\n\n\nclass ChatInput(ChatComponent):\n display_name = \"Chat Input\"\n description = \"Get chat inputs from the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatInput\"\n\n inputs = [\n MultilineInput(\n name=\"input_value\",\n display_name=\"Text\",\n value=\"\",\n info=\"Message to be passed as input.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_USER,\n info=\"Type of sender.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_USER,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n FileInput(\n name=\"files\",\n display_name=\"Files\",\n file_types=TEXT_FILE_TYPES + IMG_FILE_TYPES,\n info=\"Files to be sent with the message.\",\n advanced=True,\n is_list=True,\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n files=self.files,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"files": {
|
||||
"advanced": true,
|
||||
|
|
@ -1301,7 +1301,7 @@
|
|||
"data_template"
|
||||
],
|
||||
"frozen": false,
|
||||
"icon": "ChatOutput",
|
||||
"icon": "MessagesSquare",
|
||||
"metadata": {},
|
||||
"output_types": [],
|
||||
"outputs": [
|
||||
|
|
@ -1336,7 +1336,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"ChatOutput\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
"value": "from langflow.base.io.chat import ChatComponent\nfrom langflow.inputs import BoolInput\nfrom langflow.io import DropdownInput, MessageTextInput, Output\nfrom langflow.schema.message import Message\nfrom langflow.utils.constants import MESSAGE_SENDER_AI, MESSAGE_SENDER_NAME_AI, MESSAGE_SENDER_USER\n\n\nclass ChatOutput(ChatComponent):\n display_name = \"Chat Output\"\n description = \"Display a chat message in the Playground.\"\n icon = \"MessagesSquare\"\n name = \"ChatOutput\"\n\n inputs = [\n MessageTextInput(\n name=\"input_value\",\n display_name=\"Text\",\n info=\"Message to be passed as output.\",\n ),\n BoolInput(\n name=\"should_store_message\",\n display_name=\"Store Messages\",\n info=\"Store the message in the history.\",\n value=True,\n advanced=True,\n ),\n DropdownInput(\n name=\"sender\",\n display_name=\"Sender Type\",\n options=[MESSAGE_SENDER_AI, MESSAGE_SENDER_USER],\n value=MESSAGE_SENDER_AI,\n advanced=True,\n info=\"Type of sender.\",\n ),\n MessageTextInput(\n name=\"sender_name\",\n display_name=\"Sender Name\",\n info=\"Name of the sender.\",\n value=MESSAGE_SENDER_NAME_AI,\n advanced=True,\n ),\n MessageTextInput(\n name=\"session_id\",\n display_name=\"Session ID\",\n info=\"The session ID of the chat. If empty, the current session ID parameter will be used.\",\n advanced=True,\n ),\n MessageTextInput(\n name=\"data_template\",\n display_name=\"Data Template\",\n value=\"{text}\",\n advanced=True,\n info=\"Template to convert Data to Text. If left empty, it will be dynamically set to the Data's text key.\",\n ),\n ]\n outputs = [\n Output(display_name=\"Message\", name=\"message\", method=\"message_response\"),\n ]\n\n def message_response(self) -> Message:\n message = Message(\n text=self.input_value,\n sender=self.sender,\n sender_name=self.sender_name,\n session_id=self.session_id,\n )\n if self.session_id and isinstance(message, Message) and self.should_store_message:\n stored_message = self.store_message(\n message,\n )\n self.message.value = stored_message\n message = stored_message\n\n self.status = message\n return message\n"
|
||||
},
|
||||
"data_template": {
|
||||
"advanced": true,
|
||||
|
|
@ -1673,7 +1673,7 @@
|
|||
"show": true,
|
||||
"title_case": false,
|
||||
"type": "code",
|
||||
"value": "from pathlib import Path\n\nfrom langflow.base.data.utils import TEXT_FILE_TYPES, parse_text_file_to_data\nfrom langflow.custom import Component\nfrom langflow.io import BoolInput, FileInput, Output\nfrom langflow.schema import Data\n\n\nclass FileComponent(Component):\n display_name = \"File\"\n description = \"A generic file loader.\"\n icon = \"file-text\"\n name = \"File\"\n\n inputs = [\n FileInput(\n name=\"path\",\n display_name=\"Path\",\n file_types=TEXT_FILE_TYPES,\n info=f\"Supported file types: {', '.join(TEXT_FILE_TYPES)}\",\n ),\n BoolInput(\n name=\"silent_errors\",\n display_name=\"Silent Errors\",\n advanced=True,\n info=\"If true, errors will not raise an exception.\",\n ),\n ]\n\n outputs = [\n Output(display_name=\"Data\", name=\"data\", method=\"load_file\"),\n ]\n\n def load_file(self) -> Data:\n if not self.path:\n msg = \"Please, upload a file to use this component.\"\n raise ValueError(msg)\n resolved_path = self.resolve_path(self.path)\n silent_errors = self.silent_errors\n\n extension = Path(resolved_path).suffix[1:].lower()\n\n if extension == \"doc\":\n msg = \"doc files are not supported. Please save as .docx\"\n raise ValueError(msg)\n if extension not in TEXT_FILE_TYPES:\n msg = f\"Unsupported file type: {extension}\"\n raise ValueError(msg)\n\n data = parse_text_file_to_data(resolved_path, silent_errors=silent_errors)\n self.status = data or \"No data\"\n return data or Data()\n"
|
||||
"value": "from pathlib import Path\n\nfrom langflow.base.data.utils import TEXT_FILE_TYPES, parse_text_file_to_data\nfrom langflow.custom import Component\nfrom langflow.io import BoolInput, FileInput, Output\nfrom langflow.schema import Data\n\n\nclass FileComponent(Component):\n display_name = \"File\"\n description = \"Load a file to be used in your project.\"\n icon = \"file-text\"\n name = \"File\"\n\n inputs = [\n FileInput(\n name=\"path\",\n display_name=\"Path\",\n file_types=TEXT_FILE_TYPES,\n info=f\"Supported file types: {', '.join(TEXT_FILE_TYPES)}\",\n ),\n BoolInput(\n name=\"silent_errors\",\n display_name=\"Silent Errors\",\n advanced=True,\n info=\"If true, errors will not raise an exception.\",\n ),\n ]\n\n outputs = [\n Output(display_name=\"Data\", name=\"data\", method=\"load_file\"),\n ]\n\n def load_file(self) -> Data:\n if not self.path:\n msg = \"Please, upload a file to use this component.\"\n raise ValueError(msg)\n resolved_path = self.resolve_path(self.path)\n silent_errors = self.silent_errors\n\n extension = Path(resolved_path).suffix[1:].lower()\n\n if extension == \"doc\":\n msg = \"doc files are not supported. Please save as .docx\"\n raise ValueError(msg)\n if extension not in TEXT_FILE_TYPES:\n msg = f\"Unsupported file type: {extension}\"\n raise ValueError(msg)\n\n data = parse_text_file_to_data(resolved_path, silent_errors=silent_errors)\n self.status = data or \"No data\"\n return data or Data()\n"
|
||||
},
|
||||
"path": {
|
||||
"advanced": false,
|
||||
|
|
|
|||
|
|
@ -5,6 +5,14 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script
|
||||
src="/node_modules/ace-builds/src-min-noconflict/ace.js"
|
||||
type="module"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -133,20 +134,50 @@ body {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
--selected: #2196f3;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--selected: #0369a1;
|
||||
}
|
||||
|
||||
/* selected */
|
||||
:root {
|
||||
--selected-light: var(--selected, #2196f3);
|
||||
--selected-dark: var(--selected, #0369a1);
|
||||
}
|
||||
|
||||
.react-flow__edge.selected .react-flow__edge-path {
|
||||
stroke: var(--selected) !important;
|
||||
stroke-width: 1.5px !important;
|
||||
stroke: var(--selected-light) !important;
|
||||
stroke-width: 2px !important;
|
||||
}
|
||||
|
||||
:root.dark .react-flow__edge.selected .react-flow__edge-path {
|
||||
stroke: var(--selected-dark) !important;
|
||||
stroke-width: 2px !important;
|
||||
}
|
||||
|
||||
.react-flow__edge .react-flow__edge-path {
|
||||
stroke: var(--connection) !important;
|
||||
transition: color;
|
||||
stroke: var(--connection) !important;
|
||||
transition-duration: 150ms;
|
||||
stroke-width: 2px !important;
|
||||
}
|
||||
|
||||
.react-flow__edge.running .react-flow__edge-path {
|
||||
stroke: var(--status-blue) !important;
|
||||
stroke: hsl(var(--foreground)) !important;
|
||||
stroke-width: 2px !important;
|
||||
}
|
||||
|
||||
.react-flow__edge.not-running .react-flow__edge-path {
|
||||
stroke: hsl(var(--foreground)) !important;
|
||||
stroke-width: 1px !important;
|
||||
}
|
||||
|
||||
.react-flow__edge.runned .react-flow__edge-path {
|
||||
stroke: hsl(var(--foreground)) !important;
|
||||
stroke-width: 2px !important;
|
||||
}
|
||||
|
||||
.ag-react-container {
|
||||
|
|
@ -162,3 +193,4 @@ body {
|
|||
z-index: 1000 !important;
|
||||
border-radius: 20% !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default function HandleTooltipComponent({
|
|||
const tooltips = tooltipTitle.split("\n");
|
||||
const plural = tooltips.length > 1 ? "s" : "";
|
||||
return (
|
||||
<div className="py-1.5 font-medium text-muted-foreground">
|
||||
<div className="font-medium">
|
||||
{isSameNode ? (
|
||||
"Can't connect to the same node"
|
||||
) : (
|
||||
|
|
@ -26,21 +26,26 @@ export default function HandleTooltipComponent({
|
|||
{isConnecting ? (
|
||||
isCompatible ? (
|
||||
<span>
|
||||
<span className="font-semibold text-foreground">Connect</span>{" "}
|
||||
to
|
||||
<span className="font-semibold">Connect</span> to
|
||||
</span>
|
||||
) : (
|
||||
<span>Incompatible with</span>
|
||||
)
|
||||
) : (
|
||||
<span className="text-foreground">
|
||||
{isInput ? `Input${plural}` : `Output${plural}`}:{" "}
|
||||
<span className="text-xs">
|
||||
{isInput
|
||||
? `Input${plural} type${plural}`
|
||||
: `Output${plural} type${plural}`}
|
||||
:{" "}
|
||||
</span>
|
||||
)}
|
||||
{tooltips.map((word, index) => (
|
||||
<div
|
||||
className="rounded-sm px-1.5 text-background"
|
||||
style={{ backgroundColor: colors[index] }}
|
||||
className="rounded-sm px-1.5 text-xs font-medium"
|
||||
style={{
|
||||
backgroundColor: `${colors[index]}40`, // Add 40 (25%) opacity to background
|
||||
color: colors[index], // Keep text the same color but solid
|
||||
}}
|
||||
data-testid={`${isInput ? "input" : "output"}-tooltip-${convertTestName(word)}`}
|
||||
>
|
||||
{word}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,6 @@ export default function NodeDescription({
|
|||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"generic-node-desc",
|
||||
!inputDescription ? "overflow-auto" : "",
|
||||
hasScroll ? "nowheel" : "",
|
||||
charLimit ? "px-2" : "",
|
||||
|
|
@ -115,7 +114,7 @@ export default function NodeDescription({
|
|||
{charLimit && (
|
||||
<div
|
||||
className={cn(
|
||||
"text-left text-xs",
|
||||
"text-left text-[13px]",
|
||||
(nodeDescription?.length ?? 0) >= charLimit
|
||||
? "text-error"
|
||||
: "text-primary",
|
||||
|
|
@ -128,9 +127,10 @@ export default function NodeDescription({
|
|||
</>
|
||||
) : (
|
||||
<div
|
||||
data-testid="generic-node-desc"
|
||||
ref={overflowRef}
|
||||
className={cn(
|
||||
"nodoubleclick generic-node-desc-text h-full cursor-text word-break-break-word dark:text-note-placeholder",
|
||||
"nodoubleclick generic-node-desc-text h-full cursor-text text-[13px] word-break-break-word dark:text-note-placeholder",
|
||||
description === "" || !description ? "font-light italic" : "",
|
||||
)}
|
||||
onDoubleClick={(e) => {
|
||||
|
|
@ -144,7 +144,7 @@ export default function NodeDescription({
|
|||
<Markdown
|
||||
linkTarget="_blank"
|
||||
className={cn(
|
||||
"markdown prose flex h-full w-full flex-col text-primary word-break-break-word note-node-markdown dark:prose-invert",
|
||||
"markdown prose flex h-full w-full flex-col text-[13px] leading-5 text-muted-foreground word-break-break-word dark:prose-invert",
|
||||
mdClassName,
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,15 @@ import {
|
|||
CustomParameterLabel,
|
||||
getCustomParameterTitle,
|
||||
} from "@/customization/components/custom-parameter";
|
||||
import { cn } from "@/utils/utils";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { default as IconComponent } from "../../../../components/genericIconComponent";
|
||||
import ShadTooltip from "../../../../components/shadTooltipComponent";
|
||||
import { LANGFLOW_SUPPORTED_TYPES } from "../../../../constants/constants";
|
||||
import {
|
||||
FLEX_VIEW_TYPES,
|
||||
ICON_STROKE_WIDTH,
|
||||
LANGFLOW_SUPPORTED_TYPES,
|
||||
} from "../../../../constants/constants";
|
||||
import useFlowStore from "../../../../stores/flowStore";
|
||||
import { useTypesStore } from "../../../../stores/typesStore";
|
||||
import { NodeInputFieldComponentType } from "../../../../types/components";
|
||||
|
|
@ -31,6 +36,7 @@ export default function NodeInputField({
|
|||
info = "",
|
||||
proxy,
|
||||
showNode,
|
||||
colorName,
|
||||
}: NodeInputFieldComponentType): JSX.Element {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const nodes = useFlowStore((state) => state.nodes);
|
||||
|
|
@ -68,6 +74,8 @@ export default function NodeInputField({
|
|||
!LANGFLOW_SUPPORTED_TYPES.has(type ?? "") ||
|
||||
(optionalHandle && optionalHandle.length > 0);
|
||||
|
||||
const isFlexView = FLEX_VIEW_TYPES.includes(type ?? "");
|
||||
|
||||
const Handle = (
|
||||
<HandleRenderComponent
|
||||
left={true}
|
||||
|
|
@ -83,6 +91,7 @@ export default function NodeInputField({
|
|||
showNode={showNode}
|
||||
testIdComplement={`${data?.type?.toLowerCase()}-${showNode ? "shownode" : "noshownode"}`}
|
||||
nodeId={data.id}
|
||||
colorName={colorName}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
@ -104,7 +113,12 @@ export default function NodeInputField({
|
|||
}
|
||||
>
|
||||
{displayHandle && Handle}
|
||||
<div className="flex w-full flex-col gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
"flex w-full flex-col gap-2",
|
||||
isFlexView ? "flex-row" : "flex-col",
|
||||
)}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between text-sm">
|
||||
<div className="flex w-full items-center truncate">
|
||||
{proxy ? (
|
||||
|
|
@ -119,24 +133,23 @@ export default function NodeInputField({
|
|||
<div className="flex gap-2">
|
||||
<span>
|
||||
{
|
||||
<span>
|
||||
<span className="text-sm font-medium">
|
||||
{getCustomParameterTitle({ title, nodeId: data.id })}
|
||||
</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<span className={(required ? "ml-2 " : "") + "text-status-red"}>
|
||||
{required ? "*" : ""}
|
||||
</span>
|
||||
<div className="">
|
||||
<span className={"text-status-red"}>{required ? "*" : ""}</span>
|
||||
<div>
|
||||
{info !== "" && (
|
||||
<ShadTooltip content={<NodeInputInfo info={info} />}>
|
||||
{/* put div to avoid bug that does not display tooltip */}
|
||||
<div className="cursor-help">
|
||||
<IconComponent
|
||||
name="Info"
|
||||
className="relative bottom-px ml-1.5 h-3 w-4"
|
||||
strokeWidth={ICON_STROKE_WIDTH}
|
||||
className="relative bottom-px ml-1 h-3 w-3 text-placeholder"
|
||||
/>
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,25 @@
|
|||
import InputComponent from "@/components/inputComponent";
|
||||
import ShadTooltip from "@/components/shadTooltipComponent";
|
||||
import { BuildStatus } from "@/constants/enums";
|
||||
import useFlowsManagerStore from "@/stores/flowsManagerStore";
|
||||
import useFlowStore from "@/stores/flowStore";
|
||||
import { VertexBuildTypeAPI } from "@/types/api";
|
||||
import { cn } from "@/utils/utils";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function NodeName({
|
||||
display_name,
|
||||
selected,
|
||||
nodeId,
|
||||
showNode,
|
||||
validationStatus,
|
||||
isOutdated,
|
||||
}: {
|
||||
display_name?: string;
|
||||
selected: boolean;
|
||||
nodeId: string;
|
||||
showNode: boolean;
|
||||
validationStatus: VertexBuildTypeAPI | null;
|
||||
isOutdated: boolean;
|
||||
}) {
|
||||
const [inputName, setInputName] = useState(false);
|
||||
const [nodeName, setNodeName] = useState(display_name);
|
||||
|
|
@ -28,7 +36,7 @@ export default function NodeName({
|
|||
}, [display_name]);
|
||||
|
||||
return inputName ? (
|
||||
<div className="w-full">
|
||||
<div className="m-[1px] w-full">
|
||||
<InputComponent
|
||||
onBlur={() => {
|
||||
setInputName(false);
|
||||
|
|
@ -58,20 +66,28 @@ export default function NodeName({
|
|||
</div>
|
||||
) : (
|
||||
<div className="group flex w-full items-center gap-1">
|
||||
<ShadTooltip content={display_name}>
|
||||
<div
|
||||
onDoubleClick={(event) => {
|
||||
setInputName(true);
|
||||
takeSnapshot();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}}
|
||||
data-testid={"title-" + display_name}
|
||||
className="nodoubleclick w-full cursor-text truncate text-primary"
|
||||
>
|
||||
{display_name}
|
||||
<div
|
||||
onDoubleClick={(event) => {
|
||||
setInputName(true);
|
||||
takeSnapshot();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}}
|
||||
data-testid={"title-" + display_name}
|
||||
className="nodoubleclick w-full cursor-text truncate font-medium text-primary"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={cn(
|
||||
"max-w-44 truncate text-[14px]",
|
||||
validationStatus?.data?.duration && "max-w-36",
|
||||
isOutdated && "max-w-40",
|
||||
)}
|
||||
>
|
||||
{display_name}
|
||||
</span>
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { ICON_STROKE_WIDTH } from "@/constants/constants";
|
||||
import { cloneDeep } from "lodash";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useUpdateNodeInternals } from "reactflow";
|
||||
|
|
@ -34,6 +35,8 @@ export default function NodeOutputField({
|
|||
type,
|
||||
outputName,
|
||||
outputProxy,
|
||||
lastOutput,
|
||||
colorName,
|
||||
}: NodeOutputFieldComponentType): JSX.Element {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const nodes = useFlowStore((state) => state.nodes);
|
||||
|
|
@ -116,15 +119,19 @@ export default function NodeOutputField({
|
|||
setFilterEdge={setFilterEdge}
|
||||
showNode={showNode}
|
||||
testIdComplement={`${data?.type?.toLowerCase()}-${showNode ? "shownode" : "noshownode"}`}
|
||||
colorName={colorName}
|
||||
/>
|
||||
);
|
||||
|
||||
return !showNode ? (
|
||||
Handle
|
||||
<></>
|
||||
) : (
|
||||
<div
|
||||
ref={ref}
|
||||
className="relative mt-1 flex w-full flex-wrap items-center justify-between bg-primary-foreground px-5 py-2"
|
||||
className={cn(
|
||||
"relative mt-1 flex h-11 w-full flex-wrap items-center justify-between bg-muted px-5 py-2",
|
||||
lastOutput ? "last-output-border" : "",
|
||||
)}
|
||||
>
|
||||
<>
|
||||
<div className="flex w-full items-center justify-end truncate text-sm">
|
||||
|
|
@ -135,14 +142,28 @@ export default function NodeOutputField({
|
|||
onClick={() => handleUpdateOutputHide()}
|
||||
data-testid={`input-inspection-${title.toLowerCase()}`}
|
||||
>
|
||||
<IconComponent
|
||||
className={cn(
|
||||
"h-4 w-4",
|
||||
disabledOutput ? "text-muted-foreground" : "",
|
||||
)}
|
||||
strokeWidth={1.5}
|
||||
name={data.node?.outputs![index].hidden ? "EyeOff" : "Eye"}
|
||||
/>
|
||||
<ShadTooltip
|
||||
content={
|
||||
disabledOutput
|
||||
? null
|
||||
: data.node?.outputs![index].hidden
|
||||
? "Show output"
|
||||
: "Hide output"
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<IconComponent
|
||||
className={cn(
|
||||
"icon-size",
|
||||
disabledOutput
|
||||
? "text-placeholder-foreground opacity-60"
|
||||
: "text-placeholder-foreground hover:text-foreground",
|
||||
)}
|
||||
strokeWidth={ICON_STROKE_WIDTH}
|
||||
name={data.node?.outputs![index].hidden ? "EyeOff" : "Eye"}
|
||||
/>
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
|
@ -172,7 +193,7 @@ export default function NodeOutputField({
|
|||
displayOutputPreview
|
||||
? unknownOutput
|
||||
? "Output can't be displayed"
|
||||
: "Inspect Output"
|
||||
: "Inspect output"
|
||||
: "Please build the component first"
|
||||
}
|
||||
>
|
||||
|
|
@ -183,28 +204,23 @@ export default function NodeOutputField({
|
|||
outputName={internalOutputName}
|
||||
>
|
||||
<Button
|
||||
unstyled
|
||||
disabled={!displayOutputPreview || unknownOutput}
|
||||
data-testid={`output-inspection-${title.toLowerCase()}`}
|
||||
unstyled
|
||||
>
|
||||
{errorOutput ? (
|
||||
{
|
||||
<IconComponent
|
||||
className={classNames(
|
||||
"h-5 w-5 rounded-md text-status-red",
|
||||
)}
|
||||
name={"X"}
|
||||
/>
|
||||
) : (
|
||||
<IconComponent
|
||||
className={classNames(
|
||||
"h-5 w-5 rounded-md",
|
||||
className={cn(
|
||||
"icon-size",
|
||||
displayOutputPreview && !unknownOutput
|
||||
? "hover:text-medium-indigo"
|
||||
: "cursor-not-allowed text-muted-foreground",
|
||||
? "text-placeholder-foreground hover:text-foreground"
|
||||
: "cursor-not-allowed text-placeholder-foreground opacity-60",
|
||||
errorOutput ? "text-destructive" : "",
|
||||
)}
|
||||
name={"ScanEye"}
|
||||
strokeWidth={ICON_STROKE_WIDTH}
|
||||
/>
|
||||
)}
|
||||
}
|
||||
</Button>
|
||||
</OutputModal>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,12 @@ import useValidationStatusString from "@/CustomNodes/hooks/use-validation-status
|
|||
import ShadTooltip from "@/components/shadTooltipComponent";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
ICON_STROKE_WIDTH,
|
||||
RUN_TIMESTAMP_PREFIX,
|
||||
STATUS_BUILD,
|
||||
STATUS_BUILDING,
|
||||
STATUS_INACTIVE,
|
||||
TOOLTIP_OUTDATED_NODE,
|
||||
} from "@/constants/constants";
|
||||
import { BuildStatus } from "@/constants/enums";
|
||||
import { track } from "@/customization/utils/analytics";
|
||||
|
|
@ -18,10 +20,12 @@ import { useShortcutsStore } from "@/stores/shortcuts";
|
|||
import { VertexBuildTypeAPI } from "@/types/api";
|
||||
import { NodeDataType } from "@/types/flow";
|
||||
import { findLastNode } from "@/utils/reactflowUtils";
|
||||
import { classNames } from "@/utils/utils";
|
||||
import { useEffect, useState } from "react";
|
||||
import { classNames, cn } from "@/utils/utils";
|
||||
import { Check } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useHotkeys } from "react-hotkeys-hook";
|
||||
import IconComponent from "../../../../components/genericIconComponent";
|
||||
import { normalizeTimeString } from "./utils/format-run-time";
|
||||
|
||||
export default function NodeStatus({
|
||||
nodeId,
|
||||
|
|
@ -31,6 +35,12 @@ export default function NodeStatus({
|
|||
frozen,
|
||||
showNode,
|
||||
data,
|
||||
buildStatus,
|
||||
isOutdated,
|
||||
isUserEdited,
|
||||
handleUpdateCode,
|
||||
loadingUpdate,
|
||||
getValidationStatus,
|
||||
}: {
|
||||
nodeId: string;
|
||||
display_name: string;
|
||||
|
|
@ -39,6 +49,12 @@ export default function NodeStatus({
|
|||
frozen?: boolean;
|
||||
showNode: boolean;
|
||||
data: NodeDataType;
|
||||
buildStatus: BuildStatus;
|
||||
isOutdated: boolean;
|
||||
isUserEdited: boolean;
|
||||
handleUpdateCode: () => void;
|
||||
loadingUpdate: boolean;
|
||||
getValidationStatus: (data) => VertexBuildTypeAPI | null;
|
||||
}) {
|
||||
const nodeId_ = data.node?.flow?.data
|
||||
? (findLastNode(data.node?.flow.data!)?.id ?? nodeId)
|
||||
|
|
@ -46,38 +62,21 @@ export default function NodeStatus({
|
|||
const [validationString, setValidationString] = useState<string>("");
|
||||
const [validationStatus, setValidationStatus] =
|
||||
useState<VertexBuildTypeAPI | null>(null);
|
||||
const buildStatus = useFlowStore((state) => {
|
||||
if (data.node?.flow && data.node.flow.data?.nodes) {
|
||||
const flow = data.node.flow;
|
||||
const nodes = flow.data?.nodes; // check all the build status of the nodes in the flow
|
||||
const buildStatus_: BuildStatus[] = [];
|
||||
//@ts-ignore
|
||||
for (const node of nodes) {
|
||||
buildStatus_.push(state.flowBuildStatus[node.id]?.status);
|
||||
}
|
||||
if (buildStatus_.every((status) => status === BuildStatus.BUILT)) {
|
||||
return BuildStatus.BUILT;
|
||||
}
|
||||
if (buildStatus_.some((status) => status === BuildStatus.BUILDING)) {
|
||||
return BuildStatus.BUILDING;
|
||||
}
|
||||
if (buildStatus_.some((status) => status === BuildStatus.ERROR)) {
|
||||
return BuildStatus.ERROR;
|
||||
} else {
|
||||
return BuildStatus.TO_BUILD;
|
||||
}
|
||||
}
|
||||
return state.flowBuildStatus[nodeId]?.status;
|
||||
});
|
||||
|
||||
const conditionSuccess =
|
||||
buildStatus === BuildStatus.BUILT ||
|
||||
(!(!buildStatus || buildStatus === BuildStatus.TO_BUILD) &&
|
||||
validationStatus &&
|
||||
validationStatus.valid);
|
||||
|
||||
const lastRunTime = useFlowStore(
|
||||
(state) => state.flowBuildStatus[nodeId_]?.timestamp,
|
||||
);
|
||||
const iconStatus = useIconStatus(buildStatus, validationStatus);
|
||||
const iconStatus = useIconStatus(buildStatus);
|
||||
const buildFlow = useFlowStore((state) => state.buildFlow);
|
||||
const isBuilding = useFlowStore((state) => state.isBuilding);
|
||||
const setNode = useFlowStore((state) => state.setNode);
|
||||
const version = useDarkStore((state) => state.version);
|
||||
const isDark = useDarkStore((state) => state.dark);
|
||||
|
||||
function handlePlayWShortcut() {
|
||||
if (buildStatus === BuildStatus.BUILDING || isBuilding || !selected) return;
|
||||
|
|
@ -89,16 +88,21 @@ export default function NodeStatus({
|
|||
const flowPool = useFlowStore((state) => state.flowPool);
|
||||
useHotkeys(play, handlePlayWShortcut, { preventDefault: true });
|
||||
useValidationStatusString(validationStatus, setValidationString);
|
||||
useUpdateValidationStatus(nodeId_, flowPool, setValidationStatus);
|
||||
useUpdateValidationStatus(
|
||||
nodeId_,
|
||||
flowPool,
|
||||
setValidationStatus,
|
||||
getValidationStatus,
|
||||
);
|
||||
|
||||
const getBaseBorderClass = (selected) => {
|
||||
let className = selected
|
||||
? "border ring ring-[0.5px] ring-selected border-selected hover:shadow-node"
|
||||
: "border hover:shadow-node";
|
||||
let className =
|
||||
selected && !isBuilding
|
||||
? " border-[1px] ring-[0.75px] ring-foreground border-foreground hover:shadow-node"
|
||||
: "border-[1px] ring-[0.5px] hover:shadow-node ring-border";
|
||||
let frozenClass = selected ? "border-ring-frozen" : "border-frozen";
|
||||
return frozen ? frozenClass : className;
|
||||
};
|
||||
|
||||
const getNodeBorderClassName = (
|
||||
selected: boolean,
|
||||
showNode: boolean,
|
||||
|
|
@ -108,7 +112,7 @@ export default function NodeStatus({
|
|||
const specificClassFromBuildStatus = getSpecificClassFromBuildStatus(
|
||||
buildStatus,
|
||||
validationStatus,
|
||||
isDark,
|
||||
isBuilding,
|
||||
);
|
||||
|
||||
const baseBorderClass = getBaseBorderClass(selected);
|
||||
|
|
@ -143,9 +147,62 @@ export default function NodeStatus({
|
|||
}
|
||||
}, [buildStatus, isBuilding]);
|
||||
|
||||
const divRef = useRef<HTMLDivElement>(null);
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const runClass = "justify-left flex font-normal text-muted-foreground";
|
||||
const stopBuilding = useFlowStore((state) => state.stopBuilding);
|
||||
|
||||
const handleClickRun = () => {
|
||||
if (BuildStatus.BUILDING === buildStatus && isHovered) {
|
||||
stopBuilding();
|
||||
return;
|
||||
}
|
||||
if (buildStatus === BuildStatus.BUILDING || isBuilding) return;
|
||||
setValidationStatus(null);
|
||||
buildFlow({ stopNodeId: nodeId });
|
||||
track("Flow Build - Clicked", { stopNodeId: nodeId });
|
||||
};
|
||||
|
||||
const iconName =
|
||||
BuildStatus.BUILDING === buildStatus
|
||||
? isHovered
|
||||
? "X"
|
||||
: "Loader2"
|
||||
: "Play";
|
||||
|
||||
// Keep the existing icon classes
|
||||
const iconClasses = cn(
|
||||
"play-button-icon",
|
||||
isHovered ? "text-foreground" : "text-placeholder-foreground",
|
||||
BuildStatus.BUILDING === buildStatus && !isHovered && "animate-spin",
|
||||
);
|
||||
|
||||
const getTooltipContent = () => {
|
||||
if (BuildStatus.BUILDING === buildStatus && isHovered) {
|
||||
return "Stop build";
|
||||
}
|
||||
return "Run component";
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-shrink-0 items-center gap-2">
|
||||
<div className="flex flex-shrink-0 items-center gap-1">
|
||||
{isOutdated && !isUserEdited && (
|
||||
<ShadTooltip content={TOOLTIP_OUTDATED_NODE}>
|
||||
<Button
|
||||
onClick={handleUpdateCode}
|
||||
unstyled
|
||||
className={"hit-area-icon button-run-bg group p-1"}
|
||||
loading={loadingUpdate}
|
||||
>
|
||||
<IconComponent
|
||||
name="AlertTriangle"
|
||||
className="icon-size text-placeholder-foreground group-hover:text-foreground"
|
||||
/>
|
||||
</Button>
|
||||
</ShadTooltip>
|
||||
)}
|
||||
<ShadTooltip
|
||||
content={
|
||||
buildStatus === BuildStatus.BUILDING ? (
|
||||
|
|
@ -163,13 +220,13 @@ export default function NodeStatus({
|
|||
</div>
|
||||
)}
|
||||
{lastRunTime && (
|
||||
<div className="justify-left flex font-normal text-muted-foreground">
|
||||
<div className={runClass}>
|
||||
<div>{RUN_TIMESTAMP_PREFIX}</div>
|
||||
<div className="ml-1 text-status-blue">{lastRunTime}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="justify-left flex font-normal text-muted-foreground">
|
||||
<div className={runClass}>
|
||||
<div>Duration:</div>
|
||||
<div className="ml-1 text-status-blue">
|
||||
{validationStatus?.data.duration}
|
||||
|
|
@ -180,29 +237,41 @@ export default function NodeStatus({
|
|||
}
|
||||
side="bottom"
|
||||
>
|
||||
<div className="cursor-help">{iconStatus}</div>
|
||||
<div className="cursor-help">
|
||||
{conditionSuccess && validationStatus?.data?.duration ? (
|
||||
<div className="mr-1 flex gap-1 rounded-sm bg-emerald-50 px-1 font-jetbrains text-[11px] font-bold text-emerald-500">
|
||||
<Check className="h-4 w-4 items-center self-center" />
|
||||
<span>
|
||||
{normalizeTimeString(validationStatus?.data?.duration)}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
iconStatus
|
||||
)}
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
{showNode && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (buildStatus === BuildStatus.BUILDING || isBuilding) return;
|
||||
setValidationStatus(null);
|
||||
buildFlow({ stopNodeId: nodeId });
|
||||
track("Flow Build - Clicked", { stopNodeId: nodeId });
|
||||
}}
|
||||
unstyled
|
||||
className="group p-1"
|
||||
|
||||
<ShadTooltip content={getTooltipContent()}>
|
||||
<div
|
||||
ref={divRef}
|
||||
className="button-run-bg hit-area-icon"
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
onClick={handleClickRun}
|
||||
>
|
||||
<div data-testid={`button_run_` + display_name.toLowerCase()}>
|
||||
<IconComponent
|
||||
name="Play"
|
||||
className={
|
||||
"h-5 w-5 fill-current stroke-2 text-muted-foreground transition-all group-hover:text-medium-indigo group-hover/node:opacity-100"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
{showNode && (
|
||||
<Button unstyled className="group">
|
||||
<div data-testid={`button_run_` + display_name.toLowerCase()}>
|
||||
<IconComponent
|
||||
name={iconName}
|
||||
className={iconClasses}
|
||||
strokeWidth={ICON_STROKE_WIDTH}
|
||||
/>
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
export function normalizeTimeString(input) {
|
||||
if (!input) return null;
|
||||
// Remove any whitespace and convert to lowercase
|
||||
const cleanInput = input?.toLowerCase()?.replace(/\s+/g, "");
|
||||
|
||||
// Different patterns to match
|
||||
const patterns = {
|
||||
// 1.15 seconds or 1.15seconds
|
||||
seconds: /^(\d*\.?\d+)seconds?$/,
|
||||
// 14ms or 14 ms
|
||||
milliseconds: /^(\d+)ms$/,
|
||||
// 1minute, 1.21 seconds or similar variations
|
||||
minuteSeconds: /^(\d+)minutes?,(\d*\.?\d+)seconds?$/,
|
||||
};
|
||||
|
||||
// Check for seconds
|
||||
if (patterns.seconds.test(cleanInput)) {
|
||||
const [, seconds] = cleanInput.match(patterns.seconds);
|
||||
return `${parseFloat(seconds)}s`;
|
||||
}
|
||||
|
||||
// Check for milliseconds
|
||||
if (patterns.milliseconds.test(cleanInput)) {
|
||||
const [, ms] = cleanInput.match(patterns.milliseconds);
|
||||
return `${ms}ms`;
|
||||
}
|
||||
|
||||
// Check for minute and seconds combination
|
||||
if (patterns.minuteSeconds.test(cleanInput)) {
|
||||
const [, minutes, seconds] = cleanInput.match(patterns.minuteSeconds);
|
||||
return `${parseFloat(minutes)}.${Math.round((parseFloat(seconds) * 100) / 60)}m`;
|
||||
}
|
||||
|
||||
// Return null or throw error if no pattern matches
|
||||
return null;
|
||||
}
|
||||
|
|
@ -24,7 +24,9 @@ export default function OutputComponent({
|
|||
};
|
||||
|
||||
return displayProxy(
|
||||
<span className={cn(frozen ? "text-ice" : "")}>{name}</span>,
|
||||
<span className={cn("text-[13px] font-medium", frozen ? "text-ice" : "")}>
|
||||
{name}
|
||||
</span>,
|
||||
);
|
||||
|
||||
// ! DEACTIVATED UNTIL BETTER IMPLEMENTATION
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { useDarkStore } from "@/stores/darkStore";
|
||||
import useFlowStore from "@/stores/flowStore";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Handle, Position } from "reactflow";
|
||||
import { log } from "console";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Handle, Position, useViewport } from "reactflow";
|
||||
import ShadTooltip from "../../../../components/shadTooltipComponent";
|
||||
import {
|
||||
isValidConnection,
|
||||
|
|
@ -24,6 +25,7 @@ export default function HandleRenderComponent({
|
|||
showNode,
|
||||
testIdComplement,
|
||||
nodeId,
|
||||
colorName,
|
||||
}: {
|
||||
left: boolean;
|
||||
nodes: any;
|
||||
|
|
@ -38,7 +40,13 @@ export default function HandleRenderComponent({
|
|||
showNode: any;
|
||||
testIdComplement?: string;
|
||||
nodeId: string;
|
||||
colorName?: string[];
|
||||
}) {
|
||||
const handleColorName = colorName?.[0];
|
||||
|
||||
const innerColorName = `inner-${handleColorName}`;
|
||||
const innerForegroundColorName = `${innerColorName}-foreground`;
|
||||
|
||||
const setHandleDragging = useFlowStore((state) => state.setHandleDragging);
|
||||
const setFilterType = useFlowStore((state) => state.setFilterType);
|
||||
const handleDragging = useFlowStore((state) => state.handleDragging);
|
||||
|
|
@ -133,6 +141,7 @@ export default function HandleRenderComponent({
|
|||
() => filterOpenHandle || draggingOpenHandle,
|
||||
[filterOpenHandle, draggingOpenHandle],
|
||||
);
|
||||
|
||||
const filterPresent = useMemo(
|
||||
() => handleDragging || filterType,
|
||||
[handleDragging, filterType],
|
||||
|
|
@ -160,18 +169,20 @@ export default function HandleRenderComponent({
|
|||
[left, myId, nodeId, tooltipTitle, colors],
|
||||
);
|
||||
|
||||
const isNullHandle = filterPresent && !(openHandle || ownHandle);
|
||||
|
||||
const handleColor = useMemo(
|
||||
() =>
|
||||
filterPresent && !(openHandle || ownHandle)
|
||||
isNullHandle
|
||||
? dark
|
||||
? "conic-gradient(#374151 0deg 360deg)"
|
||||
: "conic-gradient(#cbd5e1 0deg 360deg)"
|
||||
? "conic-gradient(hsl(var(--inner-gray)) 0deg 360deg)"
|
||||
: "conic-gradient(hsl(var(--inner-gray-foreground)) 0deg 360deg)"
|
||||
: "conic-gradient(" +
|
||||
colors
|
||||
.concat(colors[0])
|
||||
colorName!
|
||||
.concat(colorName![0])
|
||||
.map(
|
||||
(color, index) =>
|
||||
color +
|
||||
`hsl(var(--inner-${color}))` +
|
||||
" " +
|
||||
((360 / colors.length) * index - 360 / (colors.length * 4)) +
|
||||
"deg " +
|
||||
|
|
@ -183,99 +194,198 @@ export default function HandleRenderComponent({
|
|||
[filterPresent, openHandle, ownHandle, dark, colors],
|
||||
);
|
||||
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const [openTooltip, setOpenTooltip] = useState(false);
|
||||
return (
|
||||
<div>
|
||||
<ShadTooltip
|
||||
open={openTooltip}
|
||||
setOpen={setOpenTooltip}
|
||||
styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
|
||||
delayDuration={1000}
|
||||
content={
|
||||
<HandleTooltipComponent
|
||||
isInput={left}
|
||||
colors={colors}
|
||||
tooltipTitle={tooltipTitle}
|
||||
isConnecting={!!filterPresent && !ownHandle}
|
||||
isCompatible={openHandle}
|
||||
isSameNode={sameNode && !ownHandle}
|
||||
/>
|
||||
}
|
||||
side={left ? "left" : "right"}
|
||||
>
|
||||
<Handle
|
||||
data-testid={`handle-${testIdComplement}-${title.toLowerCase()}-${
|
||||
!showNode ? (left ? "target" : "source") : left ? "left" : "right"
|
||||
}`}
|
||||
type={left ? "target" : "source"}
|
||||
position={left ? Position.Left : Position.Right}
|
||||
key={myId}
|
||||
id={myId}
|
||||
isValidConnection={(connection) =>
|
||||
isValidConnection(connection, nodes, edges)
|
||||
|
||||
useEffect(() => {
|
||||
if ((isHovered || openHandle) && !isNullHandle) {
|
||||
const styleSheet = document.createElement("style");
|
||||
styleSheet.id = `pulse-${nodeId}`;
|
||||
styleSheet.textContent = `
|
||||
@keyframes pulseNeon {
|
||||
0% {
|
||||
box-shadow: 0 0 0 2px hsl(var(--border)),
|
||||
0 0 2px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 4px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 6px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 8px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 10px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 15px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 20px hsl(var(--inner-${colorName![0]}));
|
||||
}
|
||||
className={classNames(
|
||||
`group/handle z-20 h-6 w-6 rounded-full border-none bg-transparent transition-all`,
|
||||
)}
|
||||
onClick={() => {
|
||||
setFilterEdge(groupByFamily(myData, tooltipTitle!, left, nodes!));
|
||||
setFilterType(currentFilter);
|
||||
if (filterOpenHandle && filterType) {
|
||||
onConnect(getConnection(filterType));
|
||||
setFilterType(undefined);
|
||||
setFilterEdge([]);
|
||||
}
|
||||
}}
|
||||
onMouseUp={() => {
|
||||
setOpenTooltip(false);
|
||||
}}
|
||||
onContextMenu={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
onMouseDown={(event) => {
|
||||
if (event.button === 0) {
|
||||
setHandleDragging(currentFilter);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"pointer-events-none absolute left-1/2 top-[50%] z-30 flex h-0 w-0 -translate-x-1/2 translate-y-[-50%] items-center justify-center rounded-full bg-background transition-all group-hover/handle:bg-transparent",
|
||||
filterPresent
|
||||
? openHandle || ownHandle
|
||||
? cn(
|
||||
"h-4 w-4",
|
||||
ownHandle ? "bg-transparent" : "bg-background",
|
||||
)
|
||||
: ""
|
||||
: "group-hover/node:h-4 group-hover/node:w-4",
|
||||
)}
|
||||
></div>
|
||||
<div
|
||||
className="pointer-events-none absolute left-1/2 top-[50%] z-10 flex h-3 w-3 -translate-x-1/2 translate-y-[-50%] items-center justify-center rounded-full opacity-50 transition-all"
|
||||
style={{
|
||||
background: handleColor,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
data-testid={`gradient-handle-${testIdComplement}-${title.toLowerCase()}-${
|
||||
50% {
|
||||
box-shadow: 0 0 0 2px hsl(var(--border)),
|
||||
0 0 4px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 8px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 12px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 16px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 20px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 25px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 30px hsl(var(--inner-${colorName![0]}));
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 2px hsl(var(--border)),
|
||||
0 0 2px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 4px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 6px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 8px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 10px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 15px hsl(var(--inner-${colorName![0]})),
|
||||
0 0 20px hsl(var(--inner-${colorName![0]}));
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(styleSheet);
|
||||
}
|
||||
|
||||
// Cleanup function should always be returned
|
||||
return () => {
|
||||
const existingStyle = document.getElementById(`pulse-${nodeId}`);
|
||||
if (existingStyle) {
|
||||
existingStyle.remove();
|
||||
}
|
||||
};
|
||||
}, [isHovered, openHandle, isNullHandle, colors, nodeId]);
|
||||
|
||||
const getNeonShadow = (color: string, isHovered: boolean) => {
|
||||
if (isNullHandle) return "none";
|
||||
if (!isHovered && !openHandle) return `0 0 0 3px hsl(var(--${color}))`;
|
||||
return [
|
||||
"0 0 0 1px hsl(var(--border))",
|
||||
`0 0 2px ${color}`,
|
||||
`0 0 4px ${color}`,
|
||||
`0 0 6px ${color}`,
|
||||
`0 0 8px ${color}`,
|
||||
`0 0 10px ${color}`,
|
||||
`0 0 15px ${color}`,
|
||||
`0 0 20px ${color}`,
|
||||
].join(", ");
|
||||
};
|
||||
|
||||
const handleRef = useRef<HTMLDivElement>(null);
|
||||
const invisibleDivRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const { zoom } = useViewport();
|
||||
|
||||
const getTranslateX = () => {
|
||||
if (left) {
|
||||
if (zoom > 4) return "-translate-x-2/3";
|
||||
if (zoom > 1.5) return "-translate-x-24";
|
||||
return "-translate-x-12";
|
||||
}
|
||||
if (zoom > 4) return "translate-x-2/3";
|
||||
if (zoom > 1.5) return "translate-x-24";
|
||||
return "translate-x-12";
|
||||
};
|
||||
|
||||
return (
|
||||
<ShadTooltip
|
||||
open={openTooltip}
|
||||
setOpen={setOpenTooltip}
|
||||
styleClasses={cn(
|
||||
"tooltip-fixed-width custom-scroll nowheel bottom-2 ",
|
||||
getTranslateX(),
|
||||
)}
|
||||
delayDuration={1000}
|
||||
content={
|
||||
<HandleTooltipComponent
|
||||
isInput={left}
|
||||
colors={colors}
|
||||
tooltipTitle={tooltipTitle}
|
||||
isConnecting={!!filterPresent && !ownHandle}
|
||||
isCompatible={openHandle}
|
||||
isSameNode={sameNode && !ownHandle}
|
||||
/>
|
||||
}
|
||||
side={left ? "left" : "right"}
|
||||
>
|
||||
<div>
|
||||
<div className="relative">
|
||||
<Handle
|
||||
ref={handleRef}
|
||||
data-testid={`handle-${testIdComplement}-${title.toLowerCase()}-${
|
||||
!showNode ? (left ? "target" : "source") : left ? "left" : "right"
|
||||
}`}
|
||||
type={left ? "target" : "source"}
|
||||
position={left ? Position.Left : Position.Right}
|
||||
key={myId}
|
||||
id={myId}
|
||||
isValidConnection={(connection) =>
|
||||
isValidConnection(connection, nodes, edges)
|
||||
}
|
||||
className={classNames(
|
||||
`pointer-events-none absolute left-1/2 top-[50%] z-10 flex -translate-x-1/2 translate-y-[-50%] items-center justify-center rounded-full transition-all`,
|
||||
filterPresent
|
||||
? openHandle || ownHandle
|
||||
? cn("h-5 w-5")
|
||||
: cn("h-1.5 w-1.5")
|
||||
: cn("h-1.5 w-1.5 group-hover/node:h-5 group-hover/node:w-5"),
|
||||
`group/handle z-50 h-12 w-12 border-none bg-transparent transition-all`,
|
||||
)}
|
||||
onClick={() => {
|
||||
setFilterEdge(groupByFamily(myData, tooltipTitle!, left, nodes!));
|
||||
setFilterType(currentFilter);
|
||||
if (filterOpenHandle && filterType) {
|
||||
onConnect(getConnection(filterType));
|
||||
setFilterType(undefined);
|
||||
setFilterEdge([]);
|
||||
}
|
||||
}}
|
||||
onMouseUp={() => {
|
||||
setOpenTooltip(false);
|
||||
}}
|
||||
onContextMenu={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
onMouseDown={(event) => {
|
||||
if (event.button === 0) {
|
||||
setHandleDragging(currentFilter);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
top: "50%",
|
||||
position: "absolute",
|
||||
zIndex: 30,
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
}}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
/>
|
||||
<div
|
||||
data-testid={`div-handle-${testIdComplement}-${title.toLowerCase()}-${
|
||||
!showNode ? (left ? "target" : "source") : left ? "left" : "right"
|
||||
}`}
|
||||
ref={invisibleDivRef}
|
||||
className={cn(
|
||||
"noflow nowheel nopan noselect absolute left-3.5 -translate-y-1/2 translate-x-1/3 cursor-crosshair rounded-full",
|
||||
left && "-left-5 -translate-x-1/2",
|
||||
)}
|
||||
style={{
|
||||
background: handleColor,
|
||||
background: isNullHandle ? "hsl(var(--border))" : handleColor,
|
||||
width: "10px",
|
||||
height: "10px",
|
||||
transition: "all 0.2s",
|
||||
boxShadow: getNeonShadow(
|
||||
innerForegroundColorName,
|
||||
isHovered || openHandle,
|
||||
),
|
||||
animation:
|
||||
(isHovered || openHandle) && !isNullHandle
|
||||
? "pulseNeon 0.7s ease-in-out infinite"
|
||||
: "none",
|
||||
border: isNullHandle ? "2px solid hsl(var(--muted))" : "none",
|
||||
}}
|
||||
onClick={(e) => {
|
||||
handleRef.current?.dispatchEvent(
|
||||
new MouseEvent("mousedown", { bubbles: true }),
|
||||
);
|
||||
}}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
onContextMenu={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
/>
|
||||
</Handle>
|
||||
</ShadTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
import { useTypesStore } from "@/stores/typesStore";
|
||||
import { nodeColors, nodeIconsLucide } from "@/utils/styleUtils";
|
||||
import emojiRegex from "emoji-regex";
|
||||
|
||||
import { ICON_STROKE_WIDTH } from "@/constants/constants";
|
||||
import { checkLucideIcons } from "@/CustomNodes/helpers/check-lucide-icons";
|
||||
import { cn } from "@/utils/utils";
|
||||
import IconComponent from "../../../../components/genericIconComponent";
|
||||
|
||||
export function NodeIcon({
|
||||
|
|
@ -19,16 +23,40 @@ export function NodeIcon({
|
|||
const isEmoji = emojiRegex().test(icon ?? "");
|
||||
const iconColor = nodeColors[types[dataType]];
|
||||
const iconName = icon || (isGroup ? "group_components" : name);
|
||||
const iconClassName = `generic-node-icon ${
|
||||
!showNode ? " absolute inset-x-6 h-12 w-12 " : ""
|
||||
}`;
|
||||
return icon && isEmoji ? (
|
||||
<span className="text-lg">{icon}</span>
|
||||
) : (
|
||||
<IconComponent
|
||||
name={iconName}
|
||||
className={iconClassName}
|
||||
iconColor={iconColor}
|
||||
/>
|
||||
|
||||
const isLucideIcon = checkLucideIcons(iconName);
|
||||
|
||||
const iconClassName = cn(
|
||||
"generic-node-icon",
|
||||
!showNode ? " show-node-icon " : "",
|
||||
isLucideIcon ? "lucide-icon" : "integration-icon",
|
||||
);
|
||||
|
||||
const renderIcon = () => {
|
||||
if (icon && isEmoji) {
|
||||
return <span className="text-lg">{icon}</span>;
|
||||
}
|
||||
|
||||
if (isLucideIcon) {
|
||||
return (
|
||||
<div className="bg-lucide-icon text-foreground">
|
||||
<IconComponent
|
||||
strokeWidth={ICON_STROKE_WIDTH}
|
||||
name={iconName}
|
||||
className={iconClassName}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<IconComponent
|
||||
name={iconName}
|
||||
className={iconClassName}
|
||||
iconColor={iconColor}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return <>{renderIcon()}</>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
import { BuildStatus } from "@/constants/enums";
|
||||
import useFlowStore from "@/stores/flowStore";
|
||||
import { NodeDataType } from "@/types/flow";
|
||||
|
||||
export const useBuildStatus = (data: NodeDataType, nodeId: string) => {
|
||||
return useFlowStore((state) => {
|
||||
// Early return if no flow data
|
||||
if (!data.node?.flow?.data?.nodes) {
|
||||
return state.flowBuildStatus[nodeId]?.status;
|
||||
}
|
||||
|
||||
const nodes = data.node.flow.data.nodes;
|
||||
const buildStatuses = nodes
|
||||
.map((node) => state.flowBuildStatus[node.id]?.status)
|
||||
.filter(Boolean);
|
||||
|
||||
// If no build statuses found, return the single node status
|
||||
if (buildStatuses.length === 0) {
|
||||
return state.flowBuildStatus[nodeId]?.status;
|
||||
}
|
||||
|
||||
// Check statuses in order of priority
|
||||
if (buildStatuses.every((status) => status === BuildStatus.BUILT)) {
|
||||
return BuildStatus.BUILT;
|
||||
}
|
||||
if (buildStatuses.some((status) => status === BuildStatus.BUILDING)) {
|
||||
return BuildStatus.BUILDING;
|
||||
}
|
||||
if (buildStatuses.some((status) => status === BuildStatus.ERROR)) {
|
||||
return BuildStatus.ERROR;
|
||||
}
|
||||
|
||||
return BuildStatus.TO_BUILD;
|
||||
});
|
||||
};
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import { BorderBeam } from "@/components/ui/border-beams";
|
||||
import { BuildStatus } from "@/constants/enums";
|
||||
import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useHotkeys } from "react-hotkeys-hook";
|
||||
|
|
@ -7,20 +9,25 @@ import IconComponent, {
|
|||
} from "../../components/genericIconComponent";
|
||||
import ShadTooltip from "../../components/shadTooltipComponent";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import { TOOLTIP_OUTDATED_NODE } from "../../constants/constants";
|
||||
import {
|
||||
TOOLTIP_HIDDEN_OUTPUTS,
|
||||
TOOLTIP_OPEN_HIDDEN_OUTPUTS,
|
||||
TOOLTIP_OUTDATED_NODE,
|
||||
} from "../../constants/constants";
|
||||
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
|
||||
import useAlertStore from "../../stores/alertStore";
|
||||
import useFlowStore from "../../stores/flowStore";
|
||||
import useFlowsManagerStore from "../../stores/flowsManagerStore";
|
||||
import { useShortcutsStore } from "../../stores/shortcuts";
|
||||
import { useTypesStore } from "../../stores/typesStore";
|
||||
import { OutputFieldType } from "../../types/api";
|
||||
import { OutputFieldType, VertexBuildTypeAPI } from "../../types/api";
|
||||
import { NodeDataType } from "../../types/flow";
|
||||
import { scapedJSONStringfy } from "../../utils/reactflowUtils";
|
||||
import { nodeIconsLucide } from "../../utils/styleUtils";
|
||||
import { classNames, cn } from "../../utils/utils";
|
||||
import { getNodeInputColors } from "../helpers/get-node-input-colors";
|
||||
import { getNodeInputColorsName } from "../helpers/get-node-input-colors-name";
|
||||
import { getNodeOutputColors } from "../helpers/get-node-output-colors";
|
||||
import { getNodeOutputColorsName } from "../helpers/get-node-output-colors-name";
|
||||
import useCheckCodeValidity from "../hooks/use-check-code-validity";
|
||||
import useUpdateNodeCode from "../hooks/use-update-node-code";
|
||||
import getFieldTitle from "../utils/get-field-title";
|
||||
|
|
@ -31,6 +38,7 @@ import NodeName from "./components/NodeName";
|
|||
import NodeOutputField from "./components/NodeOutputfield";
|
||||
import NodeStatus from "./components/NodeStatus";
|
||||
import { NodeIcon } from "./components/nodeIcon";
|
||||
import { useBuildStatus } from "./hooks/use-get-build-status";
|
||||
|
||||
export default function GenericNode({
|
||||
data,
|
||||
|
|
@ -62,8 +70,6 @@ export default function GenericNode({
|
|||
updateNodeInternals,
|
||||
);
|
||||
|
||||
const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
|
||||
|
||||
if (!data.node!.template) {
|
||||
setErrorData({
|
||||
title: `Error in component ${data.node!.display_name}`,
|
||||
|
|
@ -137,10 +143,15 @@ export default function GenericNode({
|
|||
|
||||
const shortcuts = useShortcutsStore((state) => state.shortcuts);
|
||||
|
||||
const renderOutputParameter = (output: OutputFieldType, idx: number) => {
|
||||
const renderOutputParameter = (
|
||||
output: OutputFieldType,
|
||||
idx: number,
|
||||
lastOutput: boolean,
|
||||
) => {
|
||||
return (
|
||||
<NodeOutputField
|
||||
index={idx}
|
||||
lastOutput={lastOutput}
|
||||
selected={selected}
|
||||
key={
|
||||
scapedJSONStringfy({
|
||||
|
|
@ -164,6 +175,7 @@ export default function GenericNode({
|
|||
type={output.types.join("|")}
|
||||
showNode={showNode}
|
||||
outputName={output.name}
|
||||
colorName={getNodeOutputColorsName(output, data, types)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -250,30 +262,57 @@ export default function GenericNode({
|
|||
optionalHandle={data.node?.template[templateField].input_types}
|
||||
proxy={data.node?.template[templateField].proxy}
|
||||
showNode={showNode}
|
||||
colorName={getNodeInputColorsName(
|
||||
data.node?.template[templateField].input_types,
|
||||
data.node?.template[templateField].type,
|
||||
types,
|
||||
)}
|
||||
/>
|
||||
),
|
||||
);
|
||||
|
||||
const buildStatus = useBuildStatus(data, data.id);
|
||||
const hasOutputs = data.node?.outputs && data.node?.outputs.length > 0;
|
||||
const [validationStatus, setValidationStatus] =
|
||||
useState<VertexBuildTypeAPI | null>(null);
|
||||
const getValidationStatus = (data) => {
|
||||
setValidationStatus(data);
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{memoizedNodeToolbarComponent}
|
||||
<div
|
||||
className={cn(
|
||||
borderColor,
|
||||
showNode ? "w-96 rounded-lg" : "w-26 h-26 rounded-full",
|
||||
showNode ? "w-80 rounded-xl" : "w-26 h-26 rounded-full",
|
||||
"generic-node-div group/node",
|
||||
!hasOutputs && "pb-4",
|
||||
)}
|
||||
>
|
||||
{data.node?.beta && showNode && (
|
||||
<div className="beta-badge-wrapper">
|
||||
<div className="beta-badge-content">BETA</div>
|
||||
</div>
|
||||
{BuildStatus.BUILDING === buildStatus && (
|
||||
<BorderBeam
|
||||
colorFrom="hsl(var(--foreground))"
|
||||
colorTo="hsl(var(--muted-foreground))"
|
||||
className="z-10"
|
||||
borderWidth={1.75}
|
||||
size={300}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
{data.node?.beta && showNode && (
|
||||
<div className="h-8 rounded-t-[12px] bg-accent-pink px-4 pt-2 text-[11px] font-medium text-accent-pink-foreground">
|
||||
BETA
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 truncate text-wrap border-b p-4 leading-5">
|
||||
<div
|
||||
data-testid={"div-generic-node"}
|
||||
className={
|
||||
"generic-node-div-title " +
|
||||
"generic-node-div-title justify-between" +
|
||||
(!showNode
|
||||
? " relative h-24 w-24 rounded-full"
|
||||
: " justify-between rounded-t-lg")
|
||||
|
|
@ -298,22 +337,10 @@ export default function GenericNode({
|
|||
display_name={data.node?.display_name}
|
||||
nodeId={data.id}
|
||||
selected={selected}
|
||||
showNode={showNode}
|
||||
validationStatus={validationStatus}
|
||||
isOutdated={isOutdated}
|
||||
/>
|
||||
{isOutdated && !isUserEdited && (
|
||||
<ShadTooltip content={TOOLTIP_OUTDATED_NODE}>
|
||||
<Button
|
||||
onClick={handleUpdateCode}
|
||||
unstyled
|
||||
className={"group p-1"}
|
||||
loading={loadingUpdate}
|
||||
>
|
||||
<IconComponent
|
||||
name="AlertTriangle"
|
||||
className="h-5 w-5 fill-status-yellow text-muted"
|
||||
/>
|
||||
</Button>
|
||||
</ShadTooltip>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -328,6 +355,7 @@ export default function GenericNode({
|
|||
data.node!.outputs?.findIndex(
|
||||
(out) => out.name === shownOutputs[0].name,
|
||||
) ?? 0,
|
||||
false,
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
|
@ -341,19 +369,28 @@ export default function GenericNode({
|
|||
nodeId={data.id}
|
||||
selected={selected}
|
||||
setBorderColor={setBorderColor}
|
||||
buildStatus={buildStatus}
|
||||
isOutdated={isOutdated}
|
||||
isUserEdited={isUserEdited}
|
||||
handleUpdateCode={handleUpdateCode}
|
||||
loadingUpdate={loadingUpdate}
|
||||
getValidationStatus={getValidationStatus}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showNode && (
|
||||
<div className="relative pb-8 pt-5">
|
||||
{/* increase height!! */}
|
||||
<div>
|
||||
<NodeDescription
|
||||
description={data.node?.description}
|
||||
nodeId={data.id}
|
||||
selected={selected}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showNode && (
|
||||
<div className="relative">
|
||||
{/* increase height!! */}
|
||||
|
||||
<>
|
||||
{renderInputParameter}
|
||||
<div
|
||||
|
|
@ -372,6 +409,7 @@ export default function GenericNode({
|
|||
data.node!.outputs?.findIndex(
|
||||
(out) => out.name === output.name,
|
||||
) ?? idx,
|
||||
idx === shownOutputs.length - 1,
|
||||
),
|
||||
)}
|
||||
<div
|
||||
|
|
@ -379,41 +417,47 @@ export default function GenericNode({
|
|||
>
|
||||
<div className="block">
|
||||
{data.node!.outputs &&
|
||||
data.node!.outputs.map((output, idx) =>
|
||||
renderOutputParameter(
|
||||
data.node!.outputs.map((output, idx) => {
|
||||
return renderOutputParameter(
|
||||
output,
|
||||
data.node!.outputs?.findIndex(
|
||||
(out) => out.name === output.name,
|
||||
) ?? idx,
|
||||
),
|
||||
)}
|
||||
idx === (data.node!.outputs?.length ?? 0) - 1,
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{hiddenOutputs && hiddenOutputs.length > 0 && (
|
||||
<div
|
||||
className={cn(
|
||||
"absolute left-0 right-0 flex justify-center",
|
||||
(shownOutputs && shownOutputs.length > 0) ||
|
||||
showHiddenOutputs
|
||||
? "bottom-5"
|
||||
: "bottom-1.5",
|
||||
)}
|
||||
<ShadTooltip
|
||||
content={
|
||||
showHiddenOutputs
|
||||
? TOOLTIP_HIDDEN_OUTPUTS
|
||||
: TOOLTIP_OPEN_HIDDEN_OUTPUTS
|
||||
}
|
||||
>
|
||||
<Button
|
||||
unstyled
|
||||
className="left-0 right-0 rounded-full border bg-background"
|
||||
onClick={() => setShowHiddenOutputs(!showHiddenOutputs)}
|
||||
<div
|
||||
className={cn(
|
||||
"absolute left-0 right-0 flex justify-center",
|
||||
(shownOutputs && shownOutputs.length > 0) ||
|
||||
showHiddenOutputs
|
||||
? "bottom-[-0.8rem]"
|
||||
: "bottom-[-0.8rem]",
|
||||
)}
|
||||
>
|
||||
<ForwardedIconComponent
|
||||
name={"ChevronDown"}
|
||||
strokeWidth={1.5}
|
||||
className={cn(
|
||||
"h-5 w-5 pt-px text-muted-foreground group-hover:text-medium-indigo group-hover/node:opacity-100",
|
||||
showHiddenOutputs ? "rotate-180 transform" : "",
|
||||
)}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
unstyled
|
||||
className="group flex h-6 w-6 items-center justify-center rounded-full border bg-background hover:border-foreground hover:text-foreground"
|
||||
onClick={() => setShowHiddenOutputs(!showHiddenOutputs)}
|
||||
>
|
||||
<ForwardedIconComponent
|
||||
name={showHiddenOutputs ? "EyeOff" : "Eye"}
|
||||
strokeWidth={1.5}
|
||||
className="h-4 w-4 text-placeholder-foreground group-hover:text-foreground"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ export default function NoteToolbarComponent({
|
|||
<div>
|
||||
<div
|
||||
data-testid="color_picker"
|
||||
className="relative inline-flex items-center rounded-l-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
|
||||
className="relative inline-flex items-center rounded-l-md bg-background px-2 py-2 text-foreground shadow-md transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -149,7 +149,7 @@ export default function NoteToolbarComponent({
|
|||
<div
|
||||
data-testid="more-options-modal"
|
||||
className={classNames(
|
||||
"relative -ml-px inline-flex h-8 w-[2rem] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
|
||||
"relative -ml-px inline-flex h-8 w-[2rem] items-center rounded-r-md bg-background text-foreground shadow-md transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
|
||||
)}
|
||||
>
|
||||
<IconComponent
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ function NoteNode({
|
|||
style={{
|
||||
width: size.width,
|
||||
height: size.height,
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<NodeDescription
|
||||
|
|
|
|||
11
src/frontend/src/CustomNodes/helpers/check-lucide-icons.ts
Normal file
11
src/frontend/src/CustomNodes/helpers/check-lucide-icons.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { categoryIcons } from "@/utils/styleUtils";
|
||||
import * as lucideIcons from "lucide-react";
|
||||
import dynamicIconImports from "lucide-react/dynamicIconImports";
|
||||
|
||||
export const checkLucideIcons = (iconName: string): boolean => {
|
||||
return (
|
||||
lucideIcons[iconName] ||
|
||||
dynamicIconImports[iconName] ||
|
||||
categoryIcons[iconName]
|
||||
);
|
||||
};
|
||||
|
|
@ -4,16 +4,12 @@ import { VertexBuildTypeAPI } from "../../types/api";
|
|||
export const getSpecificClassFromBuildStatus = (
|
||||
buildStatus: BuildStatus | undefined,
|
||||
validationStatus: VertexBuildTypeAPI | null,
|
||||
isDark: boolean,
|
||||
) => {
|
||||
isBuilding: boolean,
|
||||
): string => {
|
||||
let isInvalid = validationStatus && !validationStatus.valid;
|
||||
if (
|
||||
(buildStatus === BuildStatus.BUILT && isInvalid) ||
|
||||
buildStatus === BuildStatus.ERROR
|
||||
) {
|
||||
return isDark ? "built-invalid-status-dark" : "built-invalid-status";
|
||||
} else if (buildStatus === BuildStatus.BUILDING) {
|
||||
return "building-status";
|
||||
|
||||
if ((isInvalid || buildStatus === BuildStatus.ERROR) && !isBuilding) {
|
||||
return "border-destructive border-[1px] ring-[0.75px] ring-destructive";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
import { nodeColorsName } from "../../utils/styleUtils";
|
||||
|
||||
export function getNodeInputColorsName(
|
||||
input_types: string[] | undefined,
|
||||
type: string | undefined,
|
||||
types: { [char: string]: string },
|
||||
) {
|
||||
// Helper function to get the color based on type
|
||||
const getColorByType = (type) =>
|
||||
nodeColorsName[type] ?? nodeColorsName.unknown;
|
||||
|
||||
// If input_types is not null and has elements, map colors based on input_types
|
||||
if (input_types && input_types.length > 0) {
|
||||
// Map through input_types and get colors from nodeColorsName
|
||||
const colorsFromInputs = input_types
|
||||
.map((input) => nodeColorsName[input])
|
||||
.filter((color) => color);
|
||||
if (colorsFromInputs.length > 0) {
|
||||
return colorsFromInputs;
|
||||
}
|
||||
|
||||
// If no valid colors found in the previous step, map colors based on types[nodeColorsName[input]]
|
||||
const colorsFromInputTypes = input_types
|
||||
.map((input) => getColorByType(types[input]))
|
||||
.filter((color) => color);
|
||||
if (colorsFromInputTypes.length > 0) {
|
||||
return colorsFromInputTypes;
|
||||
}
|
||||
}
|
||||
|
||||
// If input_types is null or empty, use the fallback logic
|
||||
const fallbackColors = [getColorByType(type)];
|
||||
if (fallbackColors.length > 0) {
|
||||
return fallbackColors;
|
||||
}
|
||||
|
||||
// Default to unknown color
|
||||
return [nodeColorsName.unknown];
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import { OutputFieldType } from "../../types/api";
|
||||
import { NodeDataType } from "../../types/flow";
|
||||
import { nodeColorsName } from "../../utils/styleUtils";
|
||||
|
||||
export function getNodeOutputColorsName(
|
||||
output: OutputFieldType,
|
||||
data: NodeDataType,
|
||||
types: { [char: string]: string },
|
||||
): string[] {
|
||||
// Helper function to get the color based on type
|
||||
const getColorByType = (type) =>
|
||||
nodeColorsName[type] ?? nodeColorsName.unknown;
|
||||
|
||||
// Try to get the color based on the selected node
|
||||
let color: string =
|
||||
nodeColorsName[output.selected as keyof typeof nodeColorsName];
|
||||
if (color) return [color];
|
||||
|
||||
// Try to get the colors based on the output types
|
||||
let colors: string[] = output.types
|
||||
.map((type) => nodeColorsName[type])
|
||||
.filter((color) => color);
|
||||
if (colors.length > 0) return colors;
|
||||
|
||||
// Try to get the color based on the type of the selected node
|
||||
color = nodeColorsName[types[output.selected as keyof typeof types]];
|
||||
if (color) return [color];
|
||||
|
||||
// Try to get the colors based on the types of output
|
||||
colors = output.types
|
||||
.map((type) => getColorByType(types[type]))
|
||||
.filter((color) => color);
|
||||
if (colors.length > 0) return colors;
|
||||
|
||||
// Try to get the color based on the type in data
|
||||
color = nodeColorsName[types[data.type]];
|
||||
if (color) return [color];
|
||||
|
||||
// Default to unknown color
|
||||
return [nodeColorsName.unknown];
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ export function getNodeOutputColors(
|
|||
const getColorByType = (type) => nodeColors[type] ?? nodeColors.unknown;
|
||||
|
||||
// Try to get the color based on the selected node
|
||||
let color: string = nodeColors[output.selected];
|
||||
let color: string = nodeColors[output.selected as keyof typeof nodeColors];
|
||||
if (color) return [color];
|
||||
|
||||
// Try to get the colors based on the output types
|
||||
|
|
@ -21,7 +21,7 @@ export function getNodeOutputColors(
|
|||
if (colors.length > 0) return colors;
|
||||
|
||||
// Try to get the color based on the type of the selected node
|
||||
color = nodeColors[types[output.selected]];
|
||||
color = nodeColors[types[output.selected as keyof typeof types]];
|
||||
if (color) return [color];
|
||||
|
||||
// Try to get the colors based on the types of output
|
||||
|
|
|
|||
|
|
@ -5,51 +5,45 @@ import Xmark from "../../components/ui/xmark";
|
|||
import { BuildStatus } from "../../constants/enums";
|
||||
import { VertexBuildTypeAPI } from "../../types/api";
|
||||
|
||||
const useIconStatus = (
|
||||
buildStatus: BuildStatus | undefined,
|
||||
validationStatus: VertexBuildTypeAPI | null,
|
||||
) => {
|
||||
const conditionSuccess =
|
||||
buildStatus === BuildStatus.BUILT ||
|
||||
(!(!buildStatus || buildStatus === BuildStatus.TO_BUILD) &&
|
||||
validationStatus &&
|
||||
validationStatus.valid);
|
||||
const useIconStatus = (buildStatus: BuildStatus | undefined) => {
|
||||
const conditionError = buildStatus === BuildStatus.ERROR;
|
||||
const conditionInactive = buildStatus === BuildStatus.INACTIVE;
|
||||
|
||||
const renderIconStatus = () => {
|
||||
if (buildStatus === BuildStatus.BUILDING) {
|
||||
return (
|
||||
<Loading
|
||||
data-testid="loading_icon"
|
||||
className="mr-1 text-medium-indigo"
|
||||
size={20}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
{conditionSuccess ? (
|
||||
<Checkmark
|
||||
className="h-6 w-6 stroke-2 text-status-green transition-all"
|
||||
isVisible={true}
|
||||
/>
|
||||
) : conditionError ? (
|
||||
<Xmark
|
||||
isVisible={true}
|
||||
className="h-6 w-6 fill-current stroke-2 text-status-red"
|
||||
/>
|
||||
) : conditionInactive ? (
|
||||
<ForwardedIconComponent
|
||||
name="CircleOff"
|
||||
className="h-5 w-5 text-muted-foreground"
|
||||
/>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</>
|
||||
// <Loading
|
||||
// data-testid="loading_icon"
|
||||
// className="mr-1 text-medium-indigo"
|
||||
// size={20}
|
||||
// />
|
||||
<></>
|
||||
);
|
||||
}
|
||||
|
||||
const iconConditions = [
|
||||
{
|
||||
condition: conditionError,
|
||||
icon: (
|
||||
<Xmark
|
||||
isVisible={true}
|
||||
className="h-4 w-4 fill-current stroke-2 text-destructive"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
condition: conditionInactive,
|
||||
icon: (
|
||||
<ForwardedIconComponent
|
||||
name="CircleOff"
|
||||
className="h-4 w-4 text-muted-foreground"
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const activeIcon = iconConditions.find(({ condition }) => condition)?.icon;
|
||||
return activeIcon || null;
|
||||
};
|
||||
|
||||
return renderIconStatus();
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { VertexBuildTypeAPI } from "@/types/api";
|
||||
import { useEffect } from "react";
|
||||
import { FlowPoolType } from "../../types/zustand/flow";
|
||||
|
||||
|
|
@ -5,6 +6,7 @@ const useUpdateValidationStatus = (
|
|||
dataId: string,
|
||||
flowPool: FlowPoolType,
|
||||
setValidationStatus: (value: any) => void,
|
||||
getValidationStatus: (data) => VertexBuildTypeAPI | null,
|
||||
) => {
|
||||
useEffect(() => {
|
||||
const relevantData =
|
||||
|
|
@ -17,6 +19,7 @@ const useUpdateValidationStatus = (
|
|||
} else {
|
||||
setValidationStatus(null);
|
||||
}
|
||||
getValidationStatus(relevantData);
|
||||
}, [flowPool[dataId], dataId, setValidationStatus]);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ export const CustomControlButton = ({
|
|||
className="!h-8 !w-8 rounded !p-0"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
title={testId?.replace(/_/g, " ")}
|
||||
>
|
||||
<ShadTooltip content={tooltipText}>
|
||||
<div className={cn("rounded p-2.5", backgroundClasses)}>
|
||||
|
|
|
|||
|
|
@ -108,6 +108,7 @@ export default function CodeTabsComponent({
|
|||
size="icon"
|
||||
className="text-muted-foreground"
|
||||
onClick={copyToClipboard}
|
||||
data-testid="btn-copy-code"
|
||||
>
|
||||
{isCopied ? (
|
||||
<IconComponent name="Check" className="h-4 w-4" />
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import Fuse from "fuse.js";
|
|||
import { cloneDeep } from "lodash";
|
||||
import { ChangeEvent, useEffect, useRef, useState } from "react";
|
||||
import { DropDownComponent } from "../../types/components";
|
||||
import { cn } from "../../utils/utils";
|
||||
import { cn, formatPlaceholderName } from "../../utils/utils";
|
||||
import { default as ForwardedIconComponent } from "../genericIconComponent";
|
||||
import ShadTooltip from "../shadTooltipComponent";
|
||||
import { Button } from "../ui/button";
|
||||
|
|
@ -31,7 +31,12 @@ export default function Dropdown({
|
|||
editNode = false,
|
||||
id = "",
|
||||
children,
|
||||
name,
|
||||
}: DropDownComponent): JSX.Element {
|
||||
const placeholderName = name
|
||||
? formatPlaceholderName(name)
|
||||
: "Choose an option...";
|
||||
|
||||
const [open, setOpen] = useState(children ? true : false);
|
||||
|
||||
const refButton = useRef<HTMLButtonElement>(null);
|
||||
|
|
@ -91,11 +96,16 @@ export default function Dropdown({
|
|||
value !== "" &&
|
||||
filteredOptions.find((option) => option === value)
|
||||
? filteredOptions.find((option) => option === value)
|
||||
: "Choose an option..."}
|
||||
: placeholderName}
|
||||
</span>
|
||||
<ForwardedIconComponent
|
||||
name="ChevronsUpDown"
|
||||
className="ml-2 h-4 w-4 shrink-0 opacity-50"
|
||||
className={cn(
|
||||
"ml-2 h-4 w-4 shrink-0 text-foreground",
|
||||
disabled
|
||||
? "hover:text-placeholder-foreground"
|
||||
: "hover:text-foreground",
|
||||
)}
|
||||
/>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
|
|
|
|||
|
|
@ -85,6 +85,9 @@ export default function FlowToolbar(): JSX.Element {
|
|||
: "",
|
||||
)}
|
||||
data-testid="shared-button-flow"
|
||||
onClick={() => {
|
||||
setOpenShareModal(true);
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<ForwardedIconComponent
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ export const ForwardedIconComponent = memo(
|
|||
strokeWidth,
|
||||
id = "",
|
||||
skipFallback = false,
|
||||
dataTestId = "",
|
||||
}: IconComponentProps,
|
||||
ref,
|
||||
) => {
|
||||
|
|
@ -62,7 +63,9 @@ export const ForwardedIconComponent = memo(
|
|||
className={className}
|
||||
style={style}
|
||||
ref={ref}
|
||||
data-testid={id ? `${id}-${name}` : `icon-${name}`}
|
||||
data-testid={
|
||||
dataTestId ? dataTestId : id ? `${id}-${name}` : `icon-${name}`
|
||||
}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
export const getIconName = (
|
||||
disabled: boolean,
|
||||
selectedOption: string,
|
||||
optionsIcon: string,
|
||||
nodeStyle: boolean,
|
||||
) => {
|
||||
if (disabled) return "lock";
|
||||
if (selectedOption && nodeStyle) return "GlobeOkIcon";
|
||||
return optionsIcon;
|
||||
};
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import { cn } from "@/utils/utils";
|
||||
|
||||
export const getInputClassName = ({
|
||||
disabled,
|
||||
password,
|
||||
setSelectedOption,
|
||||
selectedOption,
|
||||
pwdVisible,
|
||||
value,
|
||||
editNode,
|
||||
setSelectedOptions,
|
||||
isSelected,
|
||||
areOptionsSelected,
|
||||
className,
|
||||
}) => {
|
||||
const classes = {
|
||||
base: className || "",
|
||||
password:
|
||||
password &&
|
||||
(!setSelectedOption || selectedOption === "") &&
|
||||
!pwdVisible &&
|
||||
value !== ""
|
||||
? "text-clip password"
|
||||
: "",
|
||||
editNode: editNode ? "input-edit-node" : "",
|
||||
paddingRight: (() => {
|
||||
if (password && (setSelectedOption || setSelectedOptions))
|
||||
return "pr-[70px]";
|
||||
if (
|
||||
(!password && (setSelectedOption || setSelectedOptions)) ||
|
||||
(password && !(setSelectedOption || setSelectedOptions))
|
||||
)
|
||||
return "pr-8";
|
||||
return "";
|
||||
})(),
|
||||
selected:
|
||||
isSelected || areOptionsSelected
|
||||
? "font-jetbrains text-sm font-medium text-foreground"
|
||||
: "",
|
||||
};
|
||||
|
||||
return cn(
|
||||
classes.base,
|
||||
classes.password,
|
||||
classes.editNode,
|
||||
classes.paddingRight,
|
||||
classes.selected,
|
||||
);
|
||||
};
|
||||
|
|
@ -1,20 +1,22 @@
|
|||
import { PopoverAnchor } from "@radix-ui/react-popover";
|
||||
import useAlertStore from "../../../../stores/alertStore";
|
||||
import { classNames, cn } from "../../../../utils/utils";
|
||||
import ForwardedIconComponent from "../../../genericIconComponent";
|
||||
import ForwardedIconComponent from "@/components/genericIconComponent";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Command,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "../../../ui/command";
|
||||
import { Input } from "../../../ui/input";
|
||||
} from "@/components/ui/command";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverContentWithoutPortal,
|
||||
} from "../../../ui/popover";
|
||||
} from "@/components/ui/popover";
|
||||
import { cn } from "@/utils/utils";
|
||||
import { PopoverAnchor } from "@radix-ui/react-popover";
|
||||
import { X } from "lucide-react";
|
||||
import React, { useState } from "react";
|
||||
|
||||
const CustomInputPopover = ({
|
||||
id,
|
||||
refInput,
|
||||
|
|
@ -24,11 +26,9 @@ const CustomInputPopover = ({
|
|||
selectedOptions,
|
||||
setSelectedOptions,
|
||||
value,
|
||||
autoFocus,
|
||||
disabled,
|
||||
setShowOptions,
|
||||
required,
|
||||
className,
|
||||
password,
|
||||
pwdVisible,
|
||||
editNode,
|
||||
|
|
@ -37,88 +37,122 @@ const CustomInputPopover = ({
|
|||
blurOnEnter,
|
||||
options,
|
||||
optionsPlaceholder,
|
||||
optionButton,
|
||||
optionsButton,
|
||||
handleKeyDown,
|
||||
showOptions,
|
||||
nodeStyle,
|
||||
optionButton,
|
||||
autoFocus,
|
||||
className,
|
||||
}) => {
|
||||
const setErrorData = useAlertStore.getState().setErrorData;
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
|
||||
const PopoverContentInput = editNode
|
||||
? PopoverContent
|
||||
: PopoverContentWithoutPortal;
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
if (password) {
|
||||
if (
|
||||
e.target.value.split("").every((char) => char === "•") &&
|
||||
e.target.value !== ""
|
||||
) {
|
||||
setErrorData({
|
||||
title: `Invalid characters: ${e.target.value}`,
|
||||
list: [
|
||||
"It seems you are trying to paste a password. Make sure the value is visible before copying from another field.",
|
||||
],
|
||||
});
|
||||
}
|
||||
const handleRemoveOption = (optionToRemove, e) => {
|
||||
e.stopPropagation(); // Prevent the popover from opening when removing badges
|
||||
if (setSelectedOptions) {
|
||||
setSelectedOptions(
|
||||
selectedOptions.filter((option) => option !== optionToRemove),
|
||||
);
|
||||
} else if (setSelectedOption) {
|
||||
setSelectedOption("");
|
||||
}
|
||||
onChange && onChange(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Popover modal open={showOptions} onOpenChange={setShowOptions}>
|
||||
<PopoverAnchor>
|
||||
<Input
|
||||
id={id}
|
||||
ref={refInput}
|
||||
type="text"
|
||||
onBlur={onInputLostFocus}
|
||||
value={
|
||||
(selectedOption !== "" || !onChange) && setSelectedOption
|
||||
? selectedOption
|
||||
: (selectedOptions?.length !== 0 || !onChange) &&
|
||||
setSelectedOptions
|
||||
? selectedOptions?.join(", ")
|
||||
: value
|
||||
}
|
||||
autoFocus={autoFocus}
|
||||
disabled={disabled}
|
||||
onClick={() => {
|
||||
(((selectedOption !== "" || !onChange) && setSelectedOption) ||
|
||||
((selectedOptions?.length !== 0 || !onChange) &&
|
||||
setSelectedOptions)) &&
|
||||
setShowOptions(true);
|
||||
}}
|
||||
required={required}
|
||||
className={classNames(
|
||||
password &&
|
||||
(!setSelectedOption || selectedOption === "") &&
|
||||
!pwdVisible &&
|
||||
value !== ""
|
||||
? "text-clip password"
|
||||
: "",
|
||||
editNode ? "input-edit-node" : "",
|
||||
password && (setSelectedOption || setSelectedOptions)
|
||||
? "pr-[62.9px]"
|
||||
: "",
|
||||
(!password && (setSelectedOption || setSelectedOptions)) ||
|
||||
(password && !(setSelectedOption || setSelectedOptions))
|
||||
? "pr-8"
|
||||
: "",
|
||||
className!,
|
||||
<div
|
||||
data-testid={`anchor-${id}`}
|
||||
className={cn(
|
||||
"primary-input border-1 flex h-full min-h-[2.375rem] flex-wrap items-center px-3",
|
||||
editNode && "min-h-7 p-0",
|
||||
editNode && disabled && "min-h-5 border-muted p-0",
|
||||
disabled && "bg-muted text-muted",
|
||||
isFocused &&
|
||||
"border-foreground ring-1 ring-foreground hover:border-foreground",
|
||||
)}
|
||||
placeholder={password && editNode ? "Key" : placeholder}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={(e) => {
|
||||
handleKeyDown(e);
|
||||
if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
|
||||
onClick={() => {
|
||||
if (!nodeStyle && !disabled) {
|
||||
setShowOptions(true);
|
||||
}
|
||||
}}
|
||||
data-testid={editNode ? id + "-edit" : id}
|
||||
/>
|
||||
>
|
||||
{selectedOptions?.length > 0 ? (
|
||||
selectedOptions.map((option) => (
|
||||
<Badge
|
||||
key={option}
|
||||
variant="secondary"
|
||||
className="m-[1px] flex items-center gap-1 truncate px-1"
|
||||
>
|
||||
<div className="truncate">{option}</div>
|
||||
<X
|
||||
className="h-3 w-3 cursor-pointer bg-transparent hover:text-destructive"
|
||||
onClick={(e) => handleRemoveOption(option, e)}
|
||||
/>
|
||||
</Badge>
|
||||
))
|
||||
) : selectedOption?.length > 0 ? (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={cn(
|
||||
"flex items-center gap-1 truncate bg-muted",
|
||||
nodeStyle &&
|
||||
"rounded-[3px] bg-emerald-100 px-1 font-jetbrains text-emerald-700 hover:bg-emerald-200",
|
||||
)}
|
||||
>
|
||||
<div className="max-w-36 truncate">{selectedOption}</div>
|
||||
<X
|
||||
className="h-3 w-3 cursor-pointer bg-transparent hover:text-destructive"
|
||||
onClick={(e) => handleRemoveOption(selectedOption, e)}
|
||||
data-testid={"remove-icon-badge"}
|
||||
/>
|
||||
</Badge>
|
||||
) : null}
|
||||
|
||||
{!selectedOption && (
|
||||
<input
|
||||
onFocus={() => setIsFocused(true)}
|
||||
autoFocus={autoFocus}
|
||||
id={id}
|
||||
ref={refInput}
|
||||
type={!pwdVisible && password ? "password" : "text"}
|
||||
onBlur={() => {
|
||||
onInputLostFocus?.();
|
||||
setIsFocused(false);
|
||||
}}
|
||||
value={value || ""}
|
||||
disabled={disabled}
|
||||
required={required}
|
||||
className={cn(
|
||||
"popover-input truncate pr-4",
|
||||
editNode && "px-3",
|
||||
editNode && disabled && "h-fit w-fit",
|
||||
disabled &&
|
||||
"disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground",
|
||||
password && "max-w-64 text-clip pr-14",
|
||||
)}
|
||||
placeholder={
|
||||
selectedOptions?.length > 0 || selectedOption ? "" : placeholder
|
||||
}
|
||||
onChange={(e) => onChange?.(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
handleKeyDown?.(e);
|
||||
if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
|
||||
}}
|
||||
data-testid={editNode ? id + "-edit" : id}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</PopoverAnchor>
|
||||
<PopoverContentInput
|
||||
className="noflow nowheel nopan nodelete nodrag p-0"
|
||||
style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
|
||||
side="bottom"
|
||||
align="center"
|
||||
align="start"
|
||||
>
|
||||
<Command
|
||||
filter={(value, search) => {
|
||||
|
|
@ -132,30 +166,32 @@ const CustomInputPopover = ({
|
|||
>
|
||||
<CommandInput placeholder={optionsPlaceholder} />
|
||||
<CommandList>
|
||||
<CommandGroup defaultChecked={false}>
|
||||
<CommandGroup>
|
||||
{options.map((option, id) => (
|
||||
<CommandItem
|
||||
className="group"
|
||||
key={option + id}
|
||||
value={option}
|
||||
onSelect={(currentValue) => {
|
||||
setSelectedOption &&
|
||||
if (setSelectedOption) {
|
||||
setSelectedOption(
|
||||
currentValue === selectedOption ? "" : currentValue,
|
||||
);
|
||||
setSelectedOptions &&
|
||||
}
|
||||
if (setSelectedOptions) {
|
||||
setSelectedOptions(
|
||||
selectedOptions?.includes(currentValue)
|
||||
? selectedOptions.filter(
|
||||
(item) => item !== currentValue,
|
||||
)
|
||||
: [...selectedOptions, currentValue],
|
||||
: [...(selectedOptions || []), currentValue],
|
||||
);
|
||||
}
|
||||
!setSelectedOptions && setShowOptions(false);
|
||||
}}
|
||||
className="group"
|
||||
>
|
||||
<div className="group flex w-full items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center justify-between">
|
||||
<div
|
||||
className={cn(
|
||||
"relative mr-2 h-4 w-4",
|
||||
|
|
@ -180,14 +216,13 @@ const CustomInputPopover = ({
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{option}
|
||||
<span className="max-w-52 truncate pr-2">{option}</span>
|
||||
</div>
|
||||
{optionButton && optionButton(option)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
{optionsButton && optionsButton}
|
||||
{optionsButton}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { ICON_STROKE_WIDTH } from "@/constants/constants";
|
||||
import * as Form from "@radix-ui/react-form";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { InputComponentType } from "../../types/components";
|
||||
|
|
@ -5,6 +6,7 @@ import { handleKeyDown } from "../../utils/reactflowUtils";
|
|||
import { classNames, cn } from "../../utils/utils";
|
||||
import ForwardedIconComponent from "../genericIconComponent";
|
||||
import { Input } from "../ui/input";
|
||||
import { getIconName } from "./components/helpers/get-icon-name";
|
||||
import CustomInputPopover from "./components/popover";
|
||||
import CustomInputPopoverObject from "./components/popoverObject";
|
||||
|
||||
|
|
@ -35,6 +37,7 @@ export default function InputComponent({
|
|||
isObjectOption = false,
|
||||
name,
|
||||
onChangeFolderName,
|
||||
nodeStyle,
|
||||
}: InputComponentType): JSX.Element {
|
||||
const [pwdVisible, setPwdVisible] = useState(false);
|
||||
const refInput = useRef<HTMLInputElement>(null);
|
||||
|
|
@ -145,6 +148,7 @@ export default function InputComponent({
|
|||
options={options}
|
||||
optionsPlaceholder={optionsPlaceholder}
|
||||
className={className}
|
||||
nodeStyle={nodeStyle}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
|
@ -159,20 +163,30 @@ export default function InputComponent({
|
|||
>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
if (disabled) return;
|
||||
setShowOptions(!showOptions);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className={cn(
|
||||
onChange && setSelectedOption && selectedOption !== ""
|
||||
? "text-medium-indigo"
|
||||
: "text-muted-foreground",
|
||||
"hover:text-accent-foreground",
|
||||
? "text-accent-emerald-foreground"
|
||||
: "text-placeholder-foreground",
|
||||
!disabled && "hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
<ForwardedIconComponent
|
||||
name={optionsIcon}
|
||||
className={"h-4 w-4"}
|
||||
name={getIconName(
|
||||
disabled!,
|
||||
selectedOption!,
|
||||
optionsIcon,
|
||||
nodeStyle!,
|
||||
)}
|
||||
className={cn(
|
||||
disabled ? "cursor-grab text-placeholder" : "cursor-pointer",
|
||||
"icon-size",
|
||||
)}
|
||||
strokeWidth={ICON_STROKE_WIDTH}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
|
|
@ -184,7 +198,7 @@ export default function InputComponent({
|
|||
type="button"
|
||||
tabIndex={-1}
|
||||
className={classNames(
|
||||
"mb-px",
|
||||
"mb-px mr-3 p-0",
|
||||
editNode
|
||||
? "input-component-true-button"
|
||||
: "input-component-false-button",
|
||||
|
|
@ -195,48 +209,15 @@ export default function InputComponent({
|
|||
}}
|
||||
>
|
||||
{pwdVisible ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className={classNames(
|
||||
editNode
|
||||
? "input-component-true-svg"
|
||||
: "input-component-false-svg",
|
||||
)}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
|
||||
/>
|
||||
</svg>
|
||||
<ForwardedIconComponent
|
||||
name="Eye"
|
||||
className="relative top-[1px] h-5 w-5 text-placeholder-foreground hover:text-foreground"
|
||||
/>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className={classNames(
|
||||
editNode
|
||||
? "input-component-true-svg"
|
||||
: "input-component-false-svg",
|
||||
)}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
<ForwardedIconComponent
|
||||
name="EyeOff"
|
||||
className="relative top-[1px] h-5 w-5 text-placeholder-foreground hover:text-foreground"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,48 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import CodeAreaModal from "../../../../modals/codeAreaModal";
|
||||
import { GRADIENT_CLASS } from "@/constants/constants";
|
||||
import CodeAreaModal from "@/modals/codeAreaModal";
|
||||
import { cn } from "../../../../utils/utils";
|
||||
|
||||
import IconComponent from "../../../genericIconComponent";
|
||||
import { Button } from "../../../ui/button";
|
||||
import { getPlaceholder } from "../../helpers/get-placeholder-disabled";
|
||||
import { InputProps } from "../../types";
|
||||
|
||||
const codeContentClasses = {
|
||||
base: "overflow-hidden text-clip whitespace-nowrap",
|
||||
editNode: "input-edit-node input-dialog",
|
||||
normal: "primary-input text-muted-foreground",
|
||||
disabled: "disabled-state",
|
||||
};
|
||||
|
||||
const externalLinkIconClasses = {
|
||||
gradient: ({
|
||||
disabled,
|
||||
editNode,
|
||||
}: {
|
||||
disabled: boolean;
|
||||
editNode: boolean;
|
||||
}) =>
|
||||
disabled
|
||||
? ""
|
||||
: editNode
|
||||
? "gradient-fade-input-edit-node"
|
||||
: "gradient-fade-input",
|
||||
background: ({
|
||||
disabled,
|
||||
editNode,
|
||||
}: {
|
||||
disabled: boolean;
|
||||
editNode: boolean;
|
||||
}) =>
|
||||
disabled
|
||||
? ""
|
||||
: editNode
|
||||
? "background-fade-input-edit-node"
|
||||
: "background-fade-input",
|
||||
icon: "icons-parameters-comp absolute right-3 h-4 w-4 shrink-0",
|
||||
editNodeTop: "top-[6px]",
|
||||
normalTop: "top-2.5",
|
||||
};
|
||||
|
||||
export default function CodeAreaComponent({
|
||||
value,
|
||||
handleOnNewValue,
|
||||
|
|
@ -14,52 +52,57 @@ export default function CodeAreaComponent({
|
|||
handleNodeClass,
|
||||
id = "",
|
||||
}: InputProps<string>) {
|
||||
const [componentValue, setComponentValue] = useState(
|
||||
typeof value == "string" ? value : JSON.stringify(value),
|
||||
);
|
||||
useEffect(() => {
|
||||
if (disabled && componentValue !== "") {
|
||||
setComponentValue("");
|
||||
handleOnNewValue({ value: "" }, { skipSnapshot: true });
|
||||
}
|
||||
}, [disabled]);
|
||||
|
||||
useEffect(() => {
|
||||
setComponentValue(typeof value == "string" ? value : JSON.stringify(value));
|
||||
}, [value]);
|
||||
|
||||
const handleValueChange = (newValue) => {
|
||||
handleOnNewValue({ value: newValue });
|
||||
};
|
||||
|
||||
const renderInputText = () => (
|
||||
const renderCodeText = () => (
|
||||
<span
|
||||
id={id}
|
||||
data-testid={id}
|
||||
className={cn(
|
||||
editNode
|
||||
? "input-edit-node input-dialog"
|
||||
: "primary-input text-muted-foreground",
|
||||
disabled && !editNode && "input-disable input-ring",
|
||||
codeContentClasses.base,
|
||||
editNode ? codeContentClasses.editNode : codeContentClasses.normal,
|
||||
disabled && !editNode && codeContentClasses.disabled,
|
||||
)}
|
||||
>
|
||||
{value !== "" ? value : "Type something..."}
|
||||
{value !== "" ? value : getPlaceholder(disabled, "Type something...")}
|
||||
</span>
|
||||
);
|
||||
|
||||
const renderExternalLinkIcon = () => {
|
||||
if (editNode) return null;
|
||||
|
||||
return (
|
||||
<IconComponent
|
||||
name="ExternalLink"
|
||||
const renderExternalLinkIcon = () => (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
"icons-parameters-comp shrink-0",
|
||||
disabled ? "text-ring" : "hover:text-accent-foreground",
|
||||
externalLinkIconClasses.gradient({ disabled, editNode }),
|
||||
editNode
|
||||
? externalLinkIconClasses.editNodeTop
|
||||
: externalLinkIconClasses.normalTop,
|
||||
)}
|
||||
style={{
|
||||
pointerEvents: "none",
|
||||
background: disabled ? "" : GRADIENT_CLASS,
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
externalLinkIconClasses.background({ disabled, editNode }),
|
||||
editNode
|
||||
? externalLinkIconClasses.editNodeTop
|
||||
: externalLinkIconClasses.normalTop,
|
||||
disabled && "bg-border",
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<IconComponent
|
||||
name={disabled ? "lock" : "Scan"}
|
||||
className={cn(
|
||||
externalLinkIconClasses.icon,
|
||||
editNode
|
||||
? externalLinkIconClasses.editNodeTop
|
||||
: externalLinkIconClasses.normalTop,
|
||||
disabled ? "text-placeholder-foreground" : "text-foreground",
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={cn("w-full", disabled && "pointer-events-none")}>
|
||||
|
|
@ -68,12 +111,14 @@ export default function CodeAreaComponent({
|
|||
value={value}
|
||||
nodeClass={nodeClass}
|
||||
setNodeClass={handleNodeClass!}
|
||||
setValue={handleValueChange}
|
||||
setValue={(newValue) => handleOnNewValue({ value: newValue })}
|
||||
>
|
||||
<div className="flex w-full items-center gap-3">
|
||||
{renderInputText()}
|
||||
{renderExternalLinkIcon()}
|
||||
</div>
|
||||
<Button unstyled className="w-full">
|
||||
<div className="relative w-full">
|
||||
{renderCodeText()}
|
||||
{renderExternalLinkIcon()}
|
||||
</div>
|
||||
</Button>
|
||||
</CodeAreaModal>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { useEffect } from "react";
|
||||
|
||||
import { ICON_STROKE_WIDTH } from "@/constants/constants";
|
||||
import DictAreaModal from "../../../../modals/dictAreaModal";
|
||||
import { classNames, cn } from "../../../../utils/utils";
|
||||
import { classNames, cn, toTitleCase } from "../../../../utils/utils";
|
||||
import ForwardedIconComponent from "../../../genericIconComponent";
|
||||
import { Button } from "../../../ui/button";
|
||||
import { InputProps } from "../../types";
|
||||
|
|
@ -12,12 +13,14 @@ export default function DictComponent({
|
|||
disabled,
|
||||
editNode = false,
|
||||
id = "",
|
||||
}: InputProps<object | object[] | string>): JSX.Element {
|
||||
name = "",
|
||||
}: InputProps<object | object[] | string, { name: string }>): JSX.Element {
|
||||
useEffect(() => {
|
||||
if (disabled) {
|
||||
handleOnNewValue({ value: {} }, { skipSnapshot: true });
|
||||
}
|
||||
}, [disabled]);
|
||||
const placeholderName = `Edit ${toTitleCase(name)}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -39,13 +42,17 @@ export default function DictComponent({
|
|||
variant="primary"
|
||||
size="sm"
|
||||
className={cn(
|
||||
"w-full font-normal",
|
||||
"hover:bg-mute w-full font-medium text-primary",
|
||||
editNode ? "h-fit px-3 py-0.5" : "",
|
||||
)}
|
||||
data-testid="dict-input"
|
||||
>
|
||||
<ForwardedIconComponent name="BookMarked" className="h-4 w-4" />
|
||||
Edit Dictionary
|
||||
<ForwardedIconComponent
|
||||
strokeWidth={ICON_STROKE_WIDTH}
|
||||
name="Code"
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
{placeholderName}
|
||||
</Button>
|
||||
</DictAreaModal>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ export default function DropdownComponent({
|
|||
disabled,
|
||||
combobox,
|
||||
options,
|
||||
name,
|
||||
}: InputProps<string, DropDownComponentType>) {
|
||||
const onChange = (value: any, dbValue?: boolean, skipSnapshot?: boolean) => {
|
||||
handleOnNewValue({ value, load_from_db: dbValue }, { skipSnapshot });
|
||||
|
|
@ -22,6 +23,7 @@ export default function DropdownComponent({
|
|||
combobox={combobox}
|
||||
value={value || ""}
|
||||
id={`dropdown_${id}`}
|
||||
name={name}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,52 @@
|
|||
import { useEffect } from "react";
|
||||
import { cn } from "@/utils/utils";
|
||||
import {
|
||||
NumberDecrementStepper,
|
||||
NumberIncrementStepper,
|
||||
NumberInput,
|
||||
NumberInputField,
|
||||
NumberInputStepper,
|
||||
} from "@chakra-ui/number-input";
|
||||
import { MinusIcon, PlusIcon } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { handleKeyDown } from "../../../../utils/reactflowUtils";
|
||||
import { Input } from "../../../ui/input";
|
||||
import { FloatComponentType, InputProps } from "../../types";
|
||||
|
||||
export default function FloatComponent({
|
||||
value,
|
||||
disabled,
|
||||
rangeSpec,
|
||||
editNode = false,
|
||||
handleOnNewValue,
|
||||
}: InputProps<string, FloatComponentType>): JSX.Element {
|
||||
rangeSpec,
|
||||
disabled,
|
||||
editNode = false,
|
||||
id = "",
|
||||
}: InputProps<number, FloatComponentType>): JSX.Element {
|
||||
const step = rangeSpec?.step ?? 0.1;
|
||||
const min = rangeSpec?.min ?? -2;
|
||||
const max = rangeSpec?.max ?? 2;
|
||||
|
||||
// Clear component state
|
||||
useEffect(() => {
|
||||
if (disabled && value !== "") {
|
||||
handleOnNewValue({ value: "" }, { skipSnapshot: true });
|
||||
if (disabled && value !== 0) {
|
||||
handleOnNewValue({ value: 0 }, { skipSnapshot: true });
|
||||
}
|
||||
}, [disabled]);
|
||||
}, [disabled, handleOnNewValue]);
|
||||
|
||||
const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const [cursor, setCursor] = useState<number | null>(null);
|
||||
const ref = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
ref.current?.setSelectionRange(cursor, cursor);
|
||||
}, [ref, cursor, value]);
|
||||
|
||||
const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setCursor(e.target.selectionStart);
|
||||
handleOnNewValue({ value: Number(e.target.value) });
|
||||
};
|
||||
|
||||
const handleNumberChange = (newValue) => {
|
||||
handleOnNewValue({ value: Number(newValue) });
|
||||
};
|
||||
|
||||
const handleInputChange = (event) => {
|
||||
const inputValue = Number(event.target.value);
|
||||
if (inputValue < min) {
|
||||
event.target.value = min.toString();
|
||||
|
|
@ -29,27 +55,51 @@ export default function FloatComponent({
|
|||
}
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
handleOnNewValue({ value: Number(event.target.value) });
|
||||
const getInputClassName = () => {
|
||||
return cn(
|
||||
editNode ? "input-edit-node" : "",
|
||||
"nopan nodelete nodrag noflow primary-input",
|
||||
);
|
||||
};
|
||||
|
||||
const iconClassName =
|
||||
"text-placeholder-foreground h-3 w-3 group-increment-hover:text-primary group-decrement-hover:text-primary transition-colors";
|
||||
const stepperClassName = "w-5 rounded-r-sm border-l-[1px]";
|
||||
const incrementStepperClassName =
|
||||
"border-b-[1px] hover:rounded-tr-[5px] hover:bg-muted group-increment";
|
||||
const decrementStepperClassName =
|
||||
"hover:rounded-br-[5px] hover:bg-muted group-decrement";
|
||||
const inputRef = useRef(null);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<Input
|
||||
id="float-input"
|
||||
data-testid="float-input"
|
||||
type="number"
|
||||
<NumberInput
|
||||
id={id}
|
||||
step={step}
|
||||
min={min}
|
||||
max={max}
|
||||
onChange={handleNumberChange}
|
||||
value={value ?? ""}
|
||||
disabled={disabled}
|
||||
className={editNode ? "input-edit-node" : ""}
|
||||
placeholder="Enter a value"
|
||||
onInput={handleInput}
|
||||
onChange={handleChange}
|
||||
onKeyDown={(e) => handleKeyDown(e, value, "")}
|
||||
/>
|
||||
>
|
||||
<NumberInputField
|
||||
className={getInputClassName()}
|
||||
onChange={handleChangeInput}
|
||||
onKeyDown={(event) => handleKeyDown(event, value, "")}
|
||||
onInput={handleInputChange}
|
||||
disabled={disabled}
|
||||
placeholder={editNode ? "Float number" : "Type a float number"}
|
||||
data-testid={id}
|
||||
ref={inputRef}
|
||||
/>
|
||||
<NumberInputStepper className={stepperClassName}>
|
||||
<NumberIncrementStepper className={incrementStepperClassName}>
|
||||
<PlusIcon className={iconClassName} />
|
||||
</NumberIncrementStepper>
|
||||
<NumberDecrementStepper className={decrementStepperClassName}>
|
||||
<MinusIcon className={iconClassName} />
|
||||
</NumberDecrementStepper>
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
import { usePostUploadFile } from "@/controllers/API/queries/files/use-post-upload-file";
|
||||
import { createFileUpload } from "@/helpers/create-file-upload";
|
||||
import useFileSizeValidator from "@/shared/hooks/use-file-size-validator";
|
||||
import { useUtilityStore } from "@/stores/utilityStore";
|
||||
import { cn } from "@/utils/utils";
|
||||
import { useEffect } from "react";
|
||||
import {
|
||||
CONSOLE_ERROR_MSG,
|
||||
INVALID_FILE_ALERT,
|
||||
INVALID_FILE_SIZE_ALERT,
|
||||
} from "../../../../constants/alerts_constants";
|
||||
import useAlertStore from "../../../../stores/alertStore";
|
||||
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
|
||||
|
|
@ -89,36 +88,55 @@ export default function InputFileComponent({
|
|||
);
|
||||
};
|
||||
|
||||
const isDisabled = disabled || isPending;
|
||||
|
||||
return (
|
||||
<div className={disabled ? "input-component-div" : "w-full"}>
|
||||
<div className="input-file-component gap-3">
|
||||
<span
|
||||
data-testid={id}
|
||||
onClick={handleButtonClick}
|
||||
className={
|
||||
editNode
|
||||
? "input-edit-node input-dialog text-muted-foreground"
|
||||
: disabled
|
||||
? "input-disable input-dialog primary-input"
|
||||
: "input-dialog primary-input text-muted-foreground"
|
||||
}
|
||||
>
|
||||
{value !== "" ? value : "No file"}
|
||||
</span>
|
||||
{!editNode && (
|
||||
<Button
|
||||
unstyled
|
||||
className="inline-flex items-center justify-center"
|
||||
onClick={handleButtonClick}
|
||||
loading={isPending}
|
||||
disabled={disabled}
|
||||
>
|
||||
<IconComponent
|
||||
name="FileSearch2"
|
||||
className="icons-parameters-comp shrink-0"
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
<div className="w-full">
|
||||
<div className="flex flex-col gap-2.5">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="relative flex w-full">
|
||||
<div className="w-full">
|
||||
<input
|
||||
type="text"
|
||||
className={cn(
|
||||
"primary-input h-9 w-full cursor-pointer rounded-r-none text-sm focus:border-border focus:outline-none focus:ring-0",
|
||||
!value && "text-placeholder-foreground",
|
||||
editNode && "h-6",
|
||||
)}
|
||||
value={value || "Upload a file..."}
|
||||
readOnly
|
||||
disabled={isDisabled}
|
||||
onClick={handleButtonClick}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
className={cn(
|
||||
"h-9 w-9 rounded-l-none",
|
||||
value &&
|
||||
"bg-accent-emerald-foreground ring-accent-emerald-foreground hover:bg-accent-emerald-foreground",
|
||||
isDisabled &&
|
||||
"relative top-[1px] h-9 ring-1 ring-border ring-offset-0 hover:ring-border",
|
||||
editNode && "h-6",
|
||||
)}
|
||||
onClick={handleButtonClick}
|
||||
disabled={isDisabled}
|
||||
size="icon"
|
||||
data-testid="button_upload_file"
|
||||
>
|
||||
<IconComponent
|
||||
name={value ? "CircleCheckBig" : "Upload"}
|
||||
className={cn(
|
||||
value && "text-background",
|
||||
isDisabled && "text-muted-foreground",
|
||||
"h-4 w-4",
|
||||
)}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import GlobalVariableModal from "../../../GlobalVariableModal/GlobalVariableModa
|
|||
import ForwardedIconComponent from "../../../genericIconComponent";
|
||||
import InputComponent from "../../../inputComponent";
|
||||
import { CommandItem } from "../../../ui/command";
|
||||
import { getPlaceholder } from "../../helpers/get-placeholder-disabled";
|
||||
import { InputGlobalComponentType, InputProps } from "../../types";
|
||||
|
||||
export default function InputGlobalComponent({
|
||||
|
|
@ -68,6 +69,8 @@ export default function InputGlobalComponent({
|
|||
}
|
||||
return (
|
||||
<InputComponent
|
||||
nodeStyle
|
||||
placeholder={getPlaceholder(disabled, "Type something...")}
|
||||
id={id}
|
||||
editNode={editNode}
|
||||
disabled={disabled}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { useEffect } from "react";
|
||||
|
||||
import { ICON_STROKE_WIDTH } from "@/constants/constants";
|
||||
import _ from "lodash";
|
||||
import { classNames, cn } from "../../../../utils/utils";
|
||||
import IconComponent from "../../../genericIconComponent";
|
||||
|
|
@ -49,11 +50,7 @@ export default function InputListComponent({
|
|||
};
|
||||
|
||||
const getButtonClassName = () =>
|
||||
classNames(
|
||||
disabled
|
||||
? "cursor-not-allowed text-muted-foreground"
|
||||
: "text-primary hover:text-accent-foreground",
|
||||
);
|
||||
classNames(disabled ? "text-hard-zinc" : "text-placeholder-foreground");
|
||||
|
||||
const getTestId = (type, index) =>
|
||||
`input-list-${type}-btn${editNode ? "-edit" : ""}_${componentName}-${index}`;
|
||||
|
|
@ -66,28 +63,50 @@ export default function InputListComponent({
|
|||
)}
|
||||
>
|
||||
{value.map((singleValue, index) => (
|
||||
<div key={index} className="flex w-full gap-3">
|
||||
<div key={index} className="flex w-full items-center gap-3">
|
||||
<Input
|
||||
disabled={disabled}
|
||||
type="text"
|
||||
value={singleValue}
|
||||
className={editNode ? "input-edit-node" : ""}
|
||||
className={cn(
|
||||
editNode ? "input-edit-node" : "",
|
||||
disabled ? "disabled-state" : "",
|
||||
)}
|
||||
placeholder="Type something..."
|
||||
onChange={(event) => handleInputChange(index, event.target.value)}
|
||||
data-testid={`${id}_${index}`}
|
||||
/>
|
||||
<Button
|
||||
unstyled
|
||||
className={getButtonClassName()}
|
||||
<div
|
||||
onClick={index === 0 ? addNewInput : (e) => removeInput(index, e)}
|
||||
data-testid={getTestId(index === 0 ? "plus" : "minus", index)}
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
"hit-area-icon group flex items-center justify-center text-center",
|
||||
disabled
|
||||
? "pointer-events-none bg-background hover:bg-background"
|
||||
: "",
|
||||
index === 0
|
||||
? "bg-background hover:bg-muted"
|
||||
: "hover:bg-smooth-red",
|
||||
)}
|
||||
>
|
||||
<IconComponent
|
||||
name={index === 0 ? "Plus" : "X"}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
</Button>
|
||||
<Button
|
||||
unstyled
|
||||
className={cn("hit-area-icon", getButtonClassName())}
|
||||
data-testid={getTestId(index === 0 ? "plus" : "minus", index)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<IconComponent
|
||||
name={index === 0 ? "Plus" : "Trash2"}
|
||||
className={cn(
|
||||
"icon-size justify-self-center text-muted-foreground",
|
||||
!disabled && "hover:cursor-pointer hover:text-foreground",
|
||||
index === 0
|
||||
? "group-hover:text-foreground"
|
||||
: "group-hover:text-destructive",
|
||||
)}
|
||||
strokeWidth={ICON_STROKE_WIDTH}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { ICON_STROKE_WIDTH } from "@/constants/constants";
|
||||
import { cn } from "@/utils/utils";
|
||||
import {
|
||||
NumberDecrementStepper,
|
||||
|
|
@ -6,6 +7,7 @@ import {
|
|||
NumberInputField,
|
||||
NumberInputStepper,
|
||||
} from "@chakra-ui/number-input";
|
||||
import { MinusIcon, PlusIcon } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { handleKeyDown } from "../../../../utils/reactflowUtils";
|
||||
import { InputProps, IntComponentType } from "../../types";
|
||||
|
|
@ -53,7 +55,7 @@ export default function IntComponent({
|
|||
const getInputClassName = () => {
|
||||
return cn(
|
||||
editNode ? "input-edit-node" : "",
|
||||
"nopan nodelete nodrag noflow primary-input",
|
||||
"nopan nodelete nodrag noflow primary-input ",
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -68,6 +70,13 @@ export default function IntComponent({
|
|||
}
|
||||
};
|
||||
|
||||
const iconClassName =
|
||||
"text-placeholder-foreground h-3 w-3 group-increment-hover:text-primary group-decrement-hover:text-primary transition-colors";
|
||||
const stepperClassName = " w-5 rounded-r-sm border-l-[1px]";
|
||||
const incrementStepperClassName =
|
||||
" border-b-[1px] hover:rounded-tr-[5px] hover:bg-muted group-increment";
|
||||
const decrementStepperClassName =
|
||||
" hover:rounded-br-[5px] hover:bg-muted group-decrement";
|
||||
const inputRef = useRef(null);
|
||||
|
||||
return (
|
||||
|
|
@ -90,9 +99,19 @@ export default function IntComponent({
|
|||
data-testid={id}
|
||||
ref={inputRef}
|
||||
/>
|
||||
<NumberInputStepper paddingRight={10}>
|
||||
<NumberIncrementStepper fontSize={8} marginTop={6} />
|
||||
<NumberDecrementStepper fontSize={8} marginBottom={6} />
|
||||
<NumberInputStepper className={stepperClassName}>
|
||||
<NumberIncrementStepper className={incrementStepperClassName}>
|
||||
<PlusIcon
|
||||
className={iconClassName}
|
||||
strokeWidth={ICON_STROKE_WIDTH}
|
||||
/>
|
||||
</NumberIncrementStepper>
|
||||
<NumberDecrementStepper className={decrementStepperClassName}>
|
||||
<MinusIcon
|
||||
className={iconClassName}
|
||||
strokeWidth={ICON_STROKE_WIDTH}
|
||||
/>
|
||||
</NumberDecrementStepper>
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
import { useEffect, useState } from "react";
|
||||
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ICON_STROKE_WIDTH } from "@/constants/constants";
|
||||
import {
|
||||
convertObjToArray,
|
||||
convertValuesToNumbers,
|
||||
hasDuplicateKeys,
|
||||
} from "@/utils/reactflowUtils";
|
||||
import { cn } from "@/utils/utils";
|
||||
import { cloneDeep } from "lodash";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import IconComponent from "../../../genericIconComponent";
|
||||
import { Input } from "../../../ui/input";
|
||||
import { InputProps, KeyPairListComponentType } from "../../types";
|
||||
|
||||
export default function KeypairListComponent({
|
||||
const KeypairListComponent = ({
|
||||
value,
|
||||
handleOnNewValue,
|
||||
disabled,
|
||||
editNode = false,
|
||||
isList = true,
|
||||
id,
|
||||
}: InputProps<
|
||||
object[] | object | string,
|
||||
KeyPairListComponentType
|
||||
>): JSX.Element {
|
||||
}) => {
|
||||
const getTestId = (prefix, index) =>
|
||||
`${editNode ? "editNode" : ""}${prefix}${index}`;
|
||||
|
||||
useEffect(() => {
|
||||
if (disabled && value.length > 0 && value[0] !== "") {
|
||||
handleOnNewValue({ value: [{ "": "" }] }, { skipSnapshot: true });
|
||||
|
|
@ -80,65 +80,84 @@ export default function KeypairListComponent({
|
|||
return `${isEditNode ? "input-edit-node" : ""} ${isDuplicateKey ? "input-invalid" : ""}`.trim();
|
||||
};
|
||||
|
||||
const getTestId = (prefix, index) =>
|
||||
`${editNode ? "editNode" : ""}${prefix}${index}`;
|
||||
const renderActionButton = (index) => {
|
||||
const isFirstItem = index === 0;
|
||||
const action = isFirstItem
|
||||
? addNewKeyValuePair
|
||||
: () => removeKeyValuePair(index);
|
||||
const iconName = isFirstItem ? "Plus" : "Trash2";
|
||||
|
||||
return (
|
||||
<button
|
||||
disabled={disabled}
|
||||
onClick={action}
|
||||
id={
|
||||
isFirstItem
|
||||
? getTestId("plusbtn", index)
|
||||
: getTestId("minusbtn", index)
|
||||
}
|
||||
data-testid={id}
|
||||
className={cn(
|
||||
"hit-area-icon group flex items-center justify-center",
|
||||
disabled
|
||||
? "pointer-events-none bg-background hover:bg-background"
|
||||
: "",
|
||||
isFirstItem ? "bg-background hover:bg-muted" : "hover:bg-smooth-red",
|
||||
)}
|
||||
>
|
||||
<IconComponent
|
||||
name={iconName}
|
||||
className={cn(
|
||||
"icon-size justify-self-center text-muted-foreground",
|
||||
!disabled && "hover:cursor-pointer hover:text-foreground",
|
||||
isFirstItem
|
||||
? "group-hover:text-foreground"
|
||||
: "group-hover:text-destructive",
|
||||
)}
|
||||
strokeWidth={ICON_STROKE_WIDTH}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
const renderKeyValuePair = (obj, index) =>
|
||||
Object.keys(obj).map((key, idx) => (
|
||||
<div key={idx} className="flex w-full items-center gap-2">
|
||||
<Input
|
||||
data-testid={getTestId("keypair", index)}
|
||||
id={getTestId("keypair", index)}
|
||||
type="text"
|
||||
value={key.trim()}
|
||||
className={getInputClassName(editNode, duplicateKey)}
|
||||
placeholder="Type key..."
|
||||
onChange={(event) => handleChangeKey(event, index)}
|
||||
/>
|
||||
<Input
|
||||
data-testid={getTestId("keypair", index + 100)}
|
||||
id={getTestId("keypair", index + 100)}
|
||||
type="text"
|
||||
disabled={disabled}
|
||||
value={obj[key]}
|
||||
className={editNode ? "input-edit-node" : ""}
|
||||
placeholder="Type a value..."
|
||||
onChange={(event) => handleChangeValue(event, index)}
|
||||
/>
|
||||
<div className="hit-area-icon">
|
||||
{isList && renderActionButton(index)}
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex h-full flex-col gap-3 ${values?.length > 1 && editNode ? "mx-2 my-1" : ""}`}
|
||||
>
|
||||
{values?.map((obj, index) =>
|
||||
Object.keys(obj).map((key, idx) => (
|
||||
<div key={idx} className="flex w-full gap-2">
|
||||
<Input
|
||||
data-testid={getTestId("keypair", index)}
|
||||
id={getTestId("keypair", index)}
|
||||
type="text"
|
||||
value={key.trim()}
|
||||
className={getInputClassName(editNode, duplicateKey)}
|
||||
placeholder="Type key..."
|
||||
onChange={(event) => handleChangeKey(event, index)}
|
||||
/>
|
||||
|
||||
<Input
|
||||
data-testid={getTestId("keypair", index + 100)}
|
||||
id={getTestId("keypair", index + 100)}
|
||||
type="text"
|
||||
disabled={disabled}
|
||||
value={obj[key]}
|
||||
className={editNode ? "input-edit-node" : ""}
|
||||
placeholder="Type a value..."
|
||||
onChange={(event) => handleChangeValue(event, index)}
|
||||
/>
|
||||
|
||||
{isList &&
|
||||
(index === values.length - 1 ? (
|
||||
<button
|
||||
disabled={disabled}
|
||||
onClick={addNewKeyValuePair}
|
||||
id={getTestId("plusbtn", index)}
|
||||
data-testid={id}
|
||||
>
|
||||
<IconComponent
|
||||
name="Plus"
|
||||
className="h-4 w-4 hover:text-accent-foreground"
|
||||
/>
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => removeKeyValuePair(index)}
|
||||
data-testid={getTestId("minusbtn", index)}
|
||||
id={getTestId("minusbtn", index)}
|
||||
>
|
||||
<IconComponent
|
||||
name="X"
|
||||
className="h-4 w-4 hover:text-status-red"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)),
|
||||
className={cn(
|
||||
"flex h-full flex-col gap-3",
|
||||
values?.length > 1 && editNode && "mx-2 my-1",
|
||||
)}
|
||||
>
|
||||
{values?.map((obj, index) => renderKeyValuePair(obj, index))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default KeypairListComponent;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,48 @@
|
|||
import { GRADIENT_CLASS } from "@/constants/constants";
|
||||
import PromptModal from "@/modals/promptModal";
|
||||
import { useEffect } from "react";
|
||||
import { cn } from "../../../../utils/utils";
|
||||
import IconComponent from "../../../genericIconComponent";
|
||||
import { Button } from "../../../ui/button";
|
||||
import { getPlaceholder } from "../../helpers/get-placeholder-disabled";
|
||||
import { InputProps, PromptAreaComponentType } from "../../types";
|
||||
|
||||
const promptContentClasses = {
|
||||
base: "overflow-hidden text-clip whitespace-nowrap bg-background",
|
||||
editNode: "input-edit-node input-dialog",
|
||||
normal: "primary-input text-muted-foreground",
|
||||
disabled: "disabled-state",
|
||||
};
|
||||
|
||||
const externalLinkIconClasses = {
|
||||
gradient: ({
|
||||
disabled,
|
||||
editNode,
|
||||
}: {
|
||||
disabled: boolean;
|
||||
editNode: boolean;
|
||||
}) =>
|
||||
disabled
|
||||
? ""
|
||||
: editNode
|
||||
? "gradient-fade-input-edit-node "
|
||||
: "gradient-fade-input ",
|
||||
background: ({
|
||||
disabled,
|
||||
editNode,
|
||||
}: {
|
||||
disabled: boolean;
|
||||
editNode: boolean;
|
||||
}) =>
|
||||
disabled
|
||||
? ""
|
||||
: editNode
|
||||
? "background-fade-input-edit-node "
|
||||
: "background-fade-input",
|
||||
icon: "icons-parameters-comp absolute right-3 h-4 w-4 shrink-0",
|
||||
editNodeTop: "top-[0.375rem]",
|
||||
normalTop: "top-2.5",
|
||||
};
|
||||
|
||||
export default function PromptAreaComponent({
|
||||
field_name,
|
||||
nodeClass,
|
||||
|
|
@ -16,41 +54,59 @@ export default function PromptAreaComponent({
|
|||
id = "",
|
||||
readonly = false,
|
||||
}: InputProps<string, PromptAreaComponentType>): JSX.Element {
|
||||
useEffect(() => {
|
||||
if (disabled && value !== "") {
|
||||
handleOnNewValue({ value: "" }, { skipSnapshot: true });
|
||||
}
|
||||
}, [disabled]);
|
||||
|
||||
const renderPromptText = () => (
|
||||
<span
|
||||
id={id}
|
||||
data-testid={id}
|
||||
className={cn(
|
||||
editNode
|
||||
? "input-edit-node input-dialog"
|
||||
: "primary-input text-muted-foreground",
|
||||
disabled && !editNode && "input-disable text-ring",
|
||||
promptContentClasses.base,
|
||||
editNode ? promptContentClasses.editNode : promptContentClasses.normal,
|
||||
disabled && !editNode && promptContentClasses.disabled,
|
||||
)}
|
||||
>
|
||||
{value !== "" ? value : "Type your prompt here..."}
|
||||
{value !== ""
|
||||
? value
|
||||
: getPlaceholder(disabled, "Type your prompt here...")}
|
||||
</span>
|
||||
);
|
||||
|
||||
const renderExternalLinkIcon = () => {
|
||||
if (editNode) return null;
|
||||
|
||||
return (
|
||||
<IconComponent
|
||||
id={id}
|
||||
name="ExternalLink"
|
||||
const renderExternalLinkIcon = () => (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
"icons-parameters-comp shrink-0",
|
||||
disabled ? "text-ring" : "hover:text-accent-foreground",
|
||||
externalLinkIconClasses.gradient({ disabled, editNode }),
|
||||
editNode
|
||||
? externalLinkIconClasses.editNodeTop
|
||||
: externalLinkIconClasses.normalTop,
|
||||
)}
|
||||
style={{
|
||||
pointerEvents: "none",
|
||||
background: disabled ? "" : GRADIENT_CLASS,
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
externalLinkIconClasses.background({ disabled, editNode }),
|
||||
editNode
|
||||
? externalLinkIconClasses.editNodeTop
|
||||
: externalLinkIconClasses.normalTop,
|
||||
disabled && "bg-border",
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<IconComponent
|
||||
name={disabled ? "lock" : "Scan"}
|
||||
className={cn(
|
||||
externalLinkIconClasses.icon,
|
||||
editNode
|
||||
? externalLinkIconClasses.editNodeTop
|
||||
: externalLinkIconClasses.normalTop,
|
||||
disabled ? "text-placeholder-foreground" : "text-foreground",
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={cn("w-full", disabled && "pointer-events-none")}>
|
||||
|
|
@ -59,12 +115,16 @@ export default function PromptAreaComponent({
|
|||
field_name={field_name}
|
||||
readonly={readonly}
|
||||
value={value}
|
||||
setValue={() => handleOnNewValue({ value: "" })}
|
||||
setValue={(newValue) => handleOnNewValue({ value: newValue })}
|
||||
nodeClass={nodeClass}
|
||||
setNodeClass={handleNodeClass}
|
||||
>
|
||||
<Button unstyled className="w-full">
|
||||
<div className="flex w-full items-center gap-3">
|
||||
<Button
|
||||
unstyled
|
||||
className="w-full"
|
||||
data-testid="button_open_prompt_modal"
|
||||
>
|
||||
<div className="relative w-full">
|
||||
{renderPromptText()}
|
||||
{renderExternalLinkIcon()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import { RefreshButton } from "@/components/ui/refreshButton";
|
||||
import { FLEX_VIEW_TYPES } from "@/constants/constants";
|
||||
import { usePostTemplateValue } from "@/controllers/API/queries/nodes/use-post-template-value";
|
||||
import { mutateTemplate } from "@/CustomNodes/helpers/mutate-template";
|
||||
import useAlertStore from "@/stores/alertStore";
|
||||
import { APIClassType, InputFieldType } from "@/types/api";
|
||||
import { cn } from "@/utils/utils";
|
||||
import { InputProps } from "../../types";
|
||||
|
||||
export function RefreshParameterComponent({
|
||||
|
|
@ -39,9 +41,17 @@ export function RefreshParameterComponent({
|
|||
postTemplateValue,
|
||||
setErrorData,
|
||||
);
|
||||
|
||||
const isFlexView = FLEX_VIEW_TYPES.includes(templateData.type ?? "");
|
||||
|
||||
return (
|
||||
(children || templateData.refresh_button) && (
|
||||
<div className="flex w-full items-center justify-between gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
"flex w-full items-center justify-center gap-3",
|
||||
isFlexView ? "justify-end" : "justify-center",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
{templateData.refresh_button && (
|
||||
<div className="shrink-0 flex-col">
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export function StrRenderComponent({
|
|||
return templateData.multiline ? (
|
||||
<TextAreaComponent
|
||||
{...baseInputProps}
|
||||
password={templateData.password}
|
||||
// password={templateData.password}
|
||||
updateVisibility={() => {
|
||||
if (templateData.password !== undefined) {
|
||||
handleOnNewValue(
|
||||
|
|
@ -41,6 +41,7 @@ export function StrRenderComponent({
|
|||
{...baseInputProps}
|
||||
options={templateData.options}
|
||||
combobox={templateData.combobox}
|
||||
name={templateData?.name!}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,133 +1,169 @@
|
|||
import { GRADIENT_CLASS } from "@/constants/constants";
|
||||
import ComponentTextModal from "@/modals/textAreaModal";
|
||||
import { classNames } from "@/utils/utils";
|
||||
import { useEffect } from "react";
|
||||
import { useRef, useState } from "react";
|
||||
import { cn } from "../../../../utils/utils";
|
||||
import IconComponent from "../../../genericIconComponent";
|
||||
import { Button } from "../../../ui/button";
|
||||
import { Textarea } from "../../../ui/textarea";
|
||||
import { Input } from "../../../ui/input";
|
||||
import { getPlaceholder } from "../../helpers/get-placeholder-disabled";
|
||||
import { InputProps, TextAreaComponentType } from "../../types";
|
||||
|
||||
const inputClasses = {
|
||||
base: ({ isFocused, password }: { isFocused: boolean; password: boolean }) =>
|
||||
`w-full ${isFocused ? "" : "pr-3"} ${password ? "pr-16" : ""}`,
|
||||
editNode: "input-edit-node",
|
||||
normal: ({ isFocused }: { isFocused: boolean }) =>
|
||||
`primary-input ${isFocused ? "text-primary" : "text-muted-foreground"}`,
|
||||
disabled: "disabled-state",
|
||||
password: "password",
|
||||
};
|
||||
|
||||
const externalLinkIconClasses = {
|
||||
gradient: ({
|
||||
disabled,
|
||||
editNode,
|
||||
password,
|
||||
}: {
|
||||
disabled: boolean;
|
||||
editNode: boolean;
|
||||
password: boolean;
|
||||
}) =>
|
||||
disabled || password
|
||||
? ""
|
||||
: editNode
|
||||
? "gradient-fade-input-edit-node"
|
||||
: "gradient-fade-input",
|
||||
background: ({
|
||||
disabled,
|
||||
editNode,
|
||||
}: {
|
||||
disabled: boolean;
|
||||
editNode: boolean;
|
||||
}) =>
|
||||
disabled
|
||||
? ""
|
||||
: editNode
|
||||
? "background-fade-input-edit-node"
|
||||
: "background-fade-input",
|
||||
icon: "icons-parameters-comp absolute right-3 h-4 w-4 shrink-0",
|
||||
editNodeTop: "top-[-1.4rem] h-5",
|
||||
normalTop: "top-[-2.1rem] h-7",
|
||||
iconTop: "top-[-1.7rem]",
|
||||
};
|
||||
|
||||
export default function TextAreaComponent({
|
||||
value,
|
||||
disabled,
|
||||
handleOnNewValue,
|
||||
editNode = false,
|
||||
id = "",
|
||||
password,
|
||||
updateVisibility,
|
||||
password,
|
||||
}: InputProps<string, TextAreaComponentType>): JSX.Element {
|
||||
// Clear text area
|
||||
useEffect(() => {
|
||||
if (disabled && value !== "") {
|
||||
handleOnNewValue({ value: "" }, { skipSnapshot: true });
|
||||
}
|
||||
}, [disabled]);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
|
||||
const renderTextarea = () => (
|
||||
<Textarea
|
||||
id={id}
|
||||
data-testid={id}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
className={classNames(
|
||||
"w-full resize-none",
|
||||
password !== undefined && password && value !== ""
|
||||
? "text-clip password"
|
||||
: "",
|
||||
editNode ? "input-edit-node" : "",
|
||||
password !== undefined ? "pr-8" : "",
|
||||
)}
|
||||
rows={1}
|
||||
placeholder="Type something..."
|
||||
onChange={(event) => handleOnNewValue({ value: event.target.value })}
|
||||
/>
|
||||
);
|
||||
const [passwordVisible, setPasswordVisible] = useState(false);
|
||||
|
||||
const renderExternalLinkButton = () => (
|
||||
<ComponentTextModal
|
||||
changeVisibility={updateVisibility}
|
||||
value={value}
|
||||
setValue={(value) => handleOnNewValue({ value: value })}
|
||||
disabled={disabled}
|
||||
password={password}
|
||||
>
|
||||
<div className={classNames("flex items-center")}>
|
||||
<Button unstyled disabled={disabled}>
|
||||
<IconComponent
|
||||
strokeWidth={1.5}
|
||||
id={id}
|
||||
name="ExternalLink"
|
||||
className={classNames(
|
||||
"icons-parameters-comp shrink-0",
|
||||
disabled
|
||||
? "cursor-not-allowed text-ring"
|
||||
: "hover:text-accent-foreground",
|
||||
)}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</ComponentTextModal>
|
||||
);
|
||||
|
||||
const renderPasswordToggle = () => {
|
||||
if (password === undefined) return null;
|
||||
|
||||
return (
|
||||
<Button
|
||||
unstyled
|
||||
tabIndex={-1}
|
||||
className={classNames(
|
||||
"side-bar-button-size absolute right-3 top-1/2 mb-px -translate-y-1/2 text-muted-foreground hover:text-current",
|
||||
)}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
if (updateVisibility) updateVisibility();
|
||||
}}
|
||||
>
|
||||
{password ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
|
||||
/>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</Button>
|
||||
const getInputClassName = () => {
|
||||
return cn(
|
||||
inputClasses.base({ isFocused, password: password! }),
|
||||
editNode ? inputClasses.editNode : inputClasses.normal({ isFocused }),
|
||||
disabled && inputClasses.disabled,
|
||||
password && !passwordVisible && "text-clip",
|
||||
);
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
handleOnNewValue({ value: e.target.value });
|
||||
};
|
||||
|
||||
const renderIcon = () => (
|
||||
<div className={cn(isFocused && "opacity-0")}>
|
||||
{!disabled && (
|
||||
<div
|
||||
className={cn(
|
||||
externalLinkIconClasses.gradient({
|
||||
disabled,
|
||||
editNode,
|
||||
password: password!,
|
||||
}),
|
||||
editNode
|
||||
? externalLinkIconClasses.editNodeTop
|
||||
: externalLinkIconClasses.normalTop,
|
||||
)}
|
||||
style={{
|
||||
pointerEvents: "none",
|
||||
background: isFocused
|
||||
? undefined
|
||||
: disabled
|
||||
? "bg-background"
|
||||
: GRADIENT_CLASS,
|
||||
}}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
|
||||
<IconComponent
|
||||
dataTestId={`button_open_text_area_modal_${id}${editNode ? "_advanced" : ""}`}
|
||||
name={disabled ? "lock" : "Scan"}
|
||||
className={cn(
|
||||
"cursor-pointer bg-background",
|
||||
externalLinkIconClasses.icon,
|
||||
editNode
|
||||
? externalLinkIconClasses.editNodeTop
|
||||
: externalLinkIconClasses.iconTop,
|
||||
disabled
|
||||
? "bg-muted text-placeholder-foreground"
|
||||
: "bg-background text-foreground",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={classNames("flex w-full items-center gap-3")}>
|
||||
<div className="relative w-full" data-testid={`div-${id}`}>
|
||||
{renderTextarea()}
|
||||
{renderPasswordToggle()}
|
||||
</div>
|
||||
{renderExternalLinkButton()}
|
||||
<div className={cn("w-full", disabled && "pointer-events-none")}>
|
||||
<Input
|
||||
onFocus={() => setIsFocused(true)}
|
||||
onBlur={() => setIsFocused(false)}
|
||||
id={id}
|
||||
data-testid={id}
|
||||
value={disabled ? "" : value}
|
||||
onChange={handleInputChange}
|
||||
disabled={disabled}
|
||||
className={getInputClassName()}
|
||||
placeholder={getPlaceholder(disabled, "Type something...")}
|
||||
aria-label={disabled ? value : undefined}
|
||||
ref={inputRef}
|
||||
type={password ? (passwordVisible ? "text" : "password") : "text"}
|
||||
/>
|
||||
|
||||
<ComponentTextModal
|
||||
changeVisibility={updateVisibility}
|
||||
value={value}
|
||||
setValue={(newValue) => handleOnNewValue({ value: newValue })}
|
||||
disabled={disabled}
|
||||
>
|
||||
<div className="relative w-full">{renderIcon()}</div>
|
||||
</ComponentTextModal>
|
||||
{password && !isFocused && (
|
||||
<div
|
||||
onClick={() => {
|
||||
setPasswordVisible(!passwordVisible);
|
||||
}}
|
||||
>
|
||||
<IconComponent
|
||||
name={passwordVisible ? "eye" : "eye-off"}
|
||||
className={cn(
|
||||
externalLinkIconClasses.icon,
|
||||
editNode ? "top-[5px]" : "top-[13px]",
|
||||
disabled
|
||||
? "text-placeholder"
|
||||
: "text-placeholder-foreground hover:text-foreground",
|
||||
"right-10",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
import { RECEIVING_INPUT_VALUE } from "@/constants/constants";
|
||||
|
||||
export const getPlaceholder = (disabled: boolean, returnMessage: string) => {
|
||||
if (disabled) return RECEIVING_INPUT_VALUE;
|
||||
return returnMessage;
|
||||
};
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { cn } from "@/utils/utils";
|
||||
|
||||
export const getTextAreaContentClasses = ({
|
||||
editNode,
|
||||
disabled,
|
||||
password,
|
||||
value,
|
||||
textAreaContentClasses,
|
||||
}) => {
|
||||
return cn(
|
||||
textAreaContentClasses.base,
|
||||
editNode ? textAreaContentClasses.editNode : textAreaContentClasses.normal,
|
||||
disabled && textAreaContentClasses.disabled,
|
||||
password !== undefined &&
|
||||
password &&
|
||||
value !== "" &&
|
||||
textAreaContentClasses.password,
|
||||
);
|
||||
};
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import { handleOnNewValueType } from "@/CustomNodes/hooks/use-handle-new-value";
|
||||
import { TEXT_FIELD_TYPES } from "@/constants/constants";
|
||||
import { APIClassType, InputFieldType } from "@/types/api";
|
||||
import { Slider } from "@radix-ui/react-slider";
|
||||
import { useMemo } from "react";
|
||||
import SliderComponent from "../sliderComponent";
|
||||
import TableNodeComponent from "./components/TableNodeComponent";
|
||||
|
|
@ -97,7 +96,13 @@ export function ParameterRenderComponent({
|
|||
}
|
||||
switch (templateData.type) {
|
||||
case "NestedDict":
|
||||
return <DictComponent {...baseInputProps} id={`dict_${id}`} />;
|
||||
return (
|
||||
<DictComponent
|
||||
name={name ?? ""}
|
||||
{...baseInputProps}
|
||||
id={`dict_${id}`}
|
||||
/>
|
||||
);
|
||||
case "dict":
|
||||
return (
|
||||
<KeypairListComponent
|
||||
|
|
@ -107,7 +112,13 @@ export function ParameterRenderComponent({
|
|||
/>
|
||||
);
|
||||
case "bool":
|
||||
return <ToggleShadComponent {...baseInputProps} id={`toggle_${id}`} />;
|
||||
return (
|
||||
<ToggleShadComponent
|
||||
size="medium"
|
||||
{...baseInputProps}
|
||||
id={`toggle_${id}`}
|
||||
/>
|
||||
);
|
||||
case "link":
|
||||
return (
|
||||
<LinkComponent
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@ export type InputListComponentType = {
|
|||
export type DropDownComponentType = {
|
||||
combobox?: boolean;
|
||||
options: string[];
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type TextAreaComponentType = {
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ export default function PdfViewer({ pdf }: { pdf: string }): JSX.Element {
|
|||
"absolute z-50 pb-5 " + (showControl && numPages > 0 ? "" : " hidden")
|
||||
}
|
||||
>
|
||||
<div className="flex w-min items-center justify-center gap-0.5 rounded-xl bg-secondary px-2 align-middle">
|
||||
<div className="flex w-min items-center justify-center gap-0.5 rounded-xl bg-muted px-2 align-middle">
|
||||
<button
|
||||
type="button"
|
||||
disabled={pageNumber <= 1}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export default function RenderIcons({
|
|||
<span
|
||||
className={cn(
|
||||
"flex items-center gap-0.5",
|
||||
tableRender ? "justify-start" : "justify-center text-xs",
|
||||
tableRender ? "justify-start" : "justify-center text-[12px]",
|
||||
)}
|
||||
>
|
||||
{shortcutList.map((key, index) => (
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ const SanitizedHTMLWrapper = forwardRef<
|
|||
dangerouslySetInnerHTML={{ __html: sanitizedHTML }}
|
||||
suppressContentEditableWarning={suppressWarning}
|
||||
{...props}
|
||||
className="m-1"
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import React from "react";
|
||||
import { ShadToolTipType } from "../../types/components";
|
||||
import { cn } from "../../utils/utils";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
|
||||
|
||||
export default function ShadTooltip({
|
||||
const ShadTooltip: React.FC<ShadToolTipType> = ({
|
||||
content,
|
||||
side,
|
||||
asChild = true,
|
||||
|
|
@ -12,8 +13,12 @@ export default function ShadTooltip({
|
|||
open,
|
||||
align,
|
||||
setOpen,
|
||||
}: ShadToolTipType): JSX.Element {
|
||||
return content ? (
|
||||
}) => {
|
||||
if (!content) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
defaultOpen={!children}
|
||||
open={open}
|
||||
|
|
@ -23,7 +28,7 @@ export default function ShadTooltip({
|
|||
<TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
|
||||
<TooltipContent
|
||||
className={cn(
|
||||
"max-w-96 bg-tooltip text-tooltip-foreground",
|
||||
"max-w-96 bg-tooltip text-[12px] text-tooltip-foreground",
|
||||
styleClasses,
|
||||
)}
|
||||
side={side}
|
||||
|
|
@ -34,7 +39,7 @@ export default function ShadTooltip({
|
|||
{content}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<>{children}</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default ShadTooltip;
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@ const BACKGROUND_COLORS = ["#4f46e5", "#7c3aed", "#a21caf", "#c026d3"];
|
|||
const TEXT_COLORS = ["#fff", "#fff", "#fff", "#fff"];
|
||||
const PERCENTAGES = [0.125, 0.375, 0.625, 0.875];
|
||||
|
||||
const DARK_COLOR_BACKGROUND = "#09090b";
|
||||
const DARK_COLOR_BACKGROUND = "#27272a";
|
||||
const DARK_COLOR_TEXT = "#52525b";
|
||||
const LIGHT_COLOR_BACKGROUND = "#e4e4e7";
|
||||
const LIGHT_COLOR_TEXT = "#000";
|
||||
const LIGHT_COLOR_TEXT = "#52525b";
|
||||
|
||||
const DEFAULT_SLIDER_BUTTONS_OPTIONS = [
|
||||
{ id: 0, label: "Precise" },
|
||||
|
|
@ -171,7 +171,7 @@ export default function SliderComponent({
|
|||
data-testid={`slider_track${editNode ? "_advanced" : ""}`}
|
||||
className={clsx(
|
||||
"relative h-1 w-full grow rounded-full",
|
||||
isDark ? "bg-zinc-800" : "bg-zinc-200",
|
||||
isDark ? "bg-muted" : "bg-border",
|
||||
)}
|
||||
>
|
||||
<SliderPrimitive.Range className="absolute h-full rounded-full bg-gradient-to-r from-indigo-600 to-pink-500" />
|
||||
|
|
@ -179,7 +179,7 @@ export default function SliderComponent({
|
|||
<SliderPrimitive.Thumb
|
||||
data-testid={`slider_thumb${editNode ? "_advanced" : ""}`}
|
||||
className={clsx(
|
||||
"block h-6 w-6 rounded-full border-2 border-muted bg-pink-500 shadow-lg",
|
||||
"block h-6 w-6 rounded-full border-2 border-background bg-pink-500 shadow-lg",
|
||||
)}
|
||||
/>
|
||||
</SliderPrimitive.Root>
|
||||
|
|
@ -190,10 +190,7 @@ export default function SliderComponent({
|
|||
value={valueAsNumber.toFixed(2)}
|
||||
onChange={(e) => handleChange([parseFloat(e.target.value)])}
|
||||
className={clsx(
|
||||
"ml-2 h-10 w-16 rounded-md border px-2 py-1 text-sm arrow-hide",
|
||||
isDark
|
||||
? "border-zinc-700 bg-zinc-800 text-white"
|
||||
: "border-zinc-300 bg-white text-black",
|
||||
"primary-input ml-2 h-10 w-16 rounded-md border px-2 py-1 text-sm arrow-hide",
|
||||
)}
|
||||
min={min}
|
||||
max={max}
|
||||
|
|
@ -205,12 +202,7 @@ export default function SliderComponent({
|
|||
|
||||
{sliderButtons && (
|
||||
<div className="my-3">
|
||||
<div
|
||||
className={clsx(
|
||||
"flex rounded-md",
|
||||
isDark ? "bg-zinc-950" : "bg-zinc-200",
|
||||
)}
|
||||
>
|
||||
<div className={clsx("flex rounded-md bg-background")}>
|
||||
{sliderButtonsOptions?.map((option) => (
|
||||
<button
|
||||
key={option.id}
|
||||
|
|
@ -231,19 +223,23 @@ export default function SliderComponent({
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-2 grid grid-cols-2 gap-x-2 text-sm text-gray-500">
|
||||
<div className="text mt-2 grid grid-cols-2 gap-x-2 text-sm">
|
||||
<div className="flex items-center">
|
||||
<IconComponent
|
||||
className="mr-1 h-4 w-4"
|
||||
className="mr-1 h-4 w-4 text-placeholder-foreground"
|
||||
name={minLabelIcon}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span data-testid="min_label">{minLabel}</span>
|
||||
<span data-testid="min_label" className="text-muted-foreground">
|
||||
{minLabel}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-end">
|
||||
<span data-testid="max_label">{maxLabel}</span>
|
||||
<span data-testid="max_label" className="text-muted-foreground">
|
||||
{maxLabel}
|
||||
</span>
|
||||
<IconComponent
|
||||
className="ml-1 h-4 w-4"
|
||||
className="ml-1 h-4 w-4 text-placeholder-foreground"
|
||||
name={maxLabelIcon}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@ export default function TableAdvancedToggleCellRender({
|
|||
handleOnNewValue={handleOnNewValue}
|
||||
editNode={true}
|
||||
showToogle
|
||||
size="small"
|
||||
id={"show" + parameterId}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
49
src/frontend/src/components/ui/border-beams.tsx
Normal file
49
src/frontend/src/components/ui/border-beams.tsx
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import { cn } from "@/utils/utils";
|
||||
|
||||
interface BorderBeamProps {
|
||||
className?: string;
|
||||
size?: number;
|
||||
duration?: number;
|
||||
borderWidth?: number;
|
||||
anchor?: number;
|
||||
colorFrom?: string;
|
||||
colorTo?: string;
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
export const BorderBeam = ({
|
||||
className,
|
||||
size = 200,
|
||||
duration = 15,
|
||||
anchor = 90,
|
||||
borderWidth = 1.5,
|
||||
colorFrom = "#ffaa40",
|
||||
colorTo = "#9c40ff",
|
||||
delay = 0,
|
||||
}: BorderBeamProps) => {
|
||||
return (
|
||||
<div
|
||||
style={
|
||||
{
|
||||
"--size": size,
|
||||
"--duration": duration,
|
||||
"--anchor": anchor,
|
||||
"--border-width": borderWidth,
|
||||
"--color-from": colorFrom,
|
||||
"--color-to": colorTo,
|
||||
"--delay": `-${delay}s`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className={cn(
|
||||
"pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",
|
||||
|
||||
// mask styles
|
||||
"![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
|
||||
|
||||
// pseudo styles
|
||||
"after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -5,7 +5,7 @@ import { cn } from "../../utils/utils";
|
|||
import ForwardedIconComponent from "../genericIconComponent";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"noflow nowheel nopan nodelete nodrag inline-flex items-center gap-2 justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
|
||||
"noflow nowheel nopan nodelete nodrag inline-flex items-center gap-2 justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-100 disabled:disabled-state disabled:pointer-events-none ring-offset-background",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
|
@ -15,7 +15,7 @@ const buttonVariants = cva(
|
|||
outline:
|
||||
"border border-input hover:bg-input hover:text-accent-foreground",
|
||||
primary:
|
||||
"border bg-background text-secondary-foreground hover:bg-secondary-foreground/5 dark:hover:bg-background/10 hover:shadow-sm",
|
||||
"border bg-background text-secondary-foreground hover:bg-muted dark:hover:bg-muted hover:shadow-sm",
|
||||
secondary:
|
||||
"border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
|
|
@ -30,6 +30,7 @@ const buttonVariants = cva(
|
|||
xs: "py-0.5 px-3 rounded-md",
|
||||
lg: "h-11 px-8 rounded-md",
|
||||
icon: "py-1 px-1 rounded-md",
|
||||
"node-toolbar": "py-[6px] px-[6px] rounded-md",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { ICON_STROKE_WIDTH } from "@/constants/constants";
|
||||
import IconComponent from "../../components/genericIconComponent";
|
||||
import { cn } from "../../utils/utils";
|
||||
import { Button } from "./button";
|
||||
|
|
@ -28,15 +29,19 @@ function RefreshButton({
|
|||
className,
|
||||
disabled ? "cursor-not-allowed" : "",
|
||||
!editNode ? "py-2.5 px-3" : "px-2 py-1",
|
||||
"hit-area-icon group text-muted-foreground p-1",
|
||||
);
|
||||
|
||||
// icon class name should take into account the disabled state and the loading state
|
||||
const disabledIconTextClass = disabled ? "text-muted-foreground" : "";
|
||||
const iconClassName = cn("h-4 w-4 animate-wiggle", disabledIconTextClass);
|
||||
const iconClassName = cn(
|
||||
"icon-size animate-wiggle group-hover:text-foreground text-muted-foreground",
|
||||
disabledIconTextClass,
|
||||
);
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="primary"
|
||||
variant="ghost"
|
||||
disabled={disabled}
|
||||
className={classNames}
|
||||
onClick={handleClick}
|
||||
|
|
@ -49,6 +54,7 @@ function RefreshButton({
|
|||
name={"RefreshCcw"}
|
||||
className={iconClassName}
|
||||
id={id + "-icon"}
|
||||
strokeWidth={ICON_STROKE_WIDTH}
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const Switch = React.forwardRef<
|
|||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
|
||||
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0",
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
|
|||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
|
||||
"z-45 content-center self-center overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
|
@ -36,7 +36,7 @@ const TooltipContentWithoutPortal = React.forwardRef<
|
|||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-45 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
|
||||
"z-45 content-center self-center overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -654,6 +654,8 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
|
|||
"slider",
|
||||
]);
|
||||
|
||||
export const FLEX_VIEW_TYPES = ["bool"];
|
||||
|
||||
export const priorityFields = new Set(["code", "template"]);
|
||||
|
||||
export const INPUT_TYPES = new Set([
|
||||
|
|
@ -684,6 +686,9 @@ export const TOOLTIP_OUTDATED_NODE =
|
|||
|
||||
export const CHAT_SECOND_INITIAL_TEXT = "to inspect previous messages.";
|
||||
|
||||
export const TOOLTIP_OPEN_HIDDEN_OUTPUTS = "Show hidden outputs";
|
||||
export const TOOLTIP_HIDDEN_OUTPUTS = "Hide outputs";
|
||||
|
||||
export const ZERO_NOTIFICATIONS = "No new notifications";
|
||||
|
||||
export const SUCCESS_BUILD = "Built sucessfully ✨";
|
||||
|
|
@ -948,3 +953,10 @@ export const STORE_PAGINATION_PAGE = 1;
|
|||
|
||||
export const PAGINATION_ROWS_COUNT = [10, 20, 50, 100];
|
||||
export const STORE_PAGINATION_ROWS_COUNT = [12, 24, 48, 96];
|
||||
|
||||
export const GRADIENT_CLASS =
|
||||
"linear-gradient(to right, hsl(var(--background) / 0.3), hsl(var(--background)))";
|
||||
|
||||
export const RECEIVING_INPUT_VALUE = "Receiving input";
|
||||
|
||||
export const ICON_STROKE_WIDTH = 1.25;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,14 @@ export function getCustomParameterTitle({
|
|||
title: string;
|
||||
nodeId: string;
|
||||
}) {
|
||||
return title;
|
||||
return (
|
||||
<span
|
||||
data-testid={`title-${title.toLocaleLowerCase()}`}
|
||||
className="text-[13px]"
|
||||
>
|
||||
{title}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function CustomParameterLabel({
|
||||
|
|
|
|||
|
|
@ -98,7 +98,6 @@ const useSaveFlow = () => {
|
|||
);
|
||||
} else {
|
||||
setSaveLoading(false);
|
||||
reject(new Error("Can't save empty flow"));
|
||||
}
|
||||
} else {
|
||||
setErrorData({
|
||||
|
|
|
|||
|
|
@ -4,12 +4,16 @@ const SvgAnthropicBox = (props) => (
|
|||
width="1em"
|
||||
height="1em"
|
||||
viewBox="-126.9 247.9 207.161 212.728"
|
||||
color="#fff"
|
||||
{...props}
|
||||
>
|
||||
<defs>
|
||||
<style>{".anthropic_box_svg__st0{fill:#1f1f1e}"}</style>
|
||||
</defs>
|
||||
<path
|
||||
style={{
|
||||
fill: props.color,
|
||||
}}
|
||||
d="M19.9 260.5h21.9v52.6h14v-52.6h21.9v-12.6H19.9v12.6Zm-24.6 33L-34 247.9h-15.8V313h13.5v-45.6L-7 313.1H8.8V248H-4.7v45.5Zm-96.2-45.6-26 65.1h14.5l5.3-13.7h27.2l5.3 13.7h14.5l-26-65.1h-14.8Zm-1.5 39.4 8.9-22.9 8.9 22.9h-17.8ZM38.246 437.628c-2.4 6.3-7.3 10-13.9 10-11 0-17.7-7.8-17.7-20.6 0-12.9 6.7-20.8 17.7-20.8 6.6 0 11.4 3.6 13.9 10h14.8c-3.6-14-14.5-23-28.7-23-18.8 0-32.1 14-32.1 33.8 0 19.6 13.3 33.6 32.1 33.6 14.2 0 25.1-9.1 28.8-23h-14.9Zm-88.9-43.3 26 65.1h14.2l-26-65.1h-14.2Zm-29.5 0h-31.8v65.1h14v-23.6h17.9c14.8 0 23.8-7.8 23.8-20.8 0-12.9-9.1-20.7-23.9-20.7Zm-.6 29h-17.2v-16.4h17.2c6.9 0 10.5 2.8 10.5 8.2 0 5.4-3.6 8.2-10.5 8.2ZM-81.239 347.704h-30.7v-26h-14v65.1h14v-26.6h30.7v26.6h14v-65.1h-14v26Zm129.6-27.1c-18.8 0-32.1 14-32.1 33.8 0 19.6 13.3 33.6 32.1 33.6 18.7 0 31.9-14 31.9-33.6 0-19.8-13.2-33.8-31.9-33.8Zm0 54.4c-11 0-17.7-7.8-17.7-20.6 0-12.9 6.7-20.8 17.7-20.8 10.9 0 17.5 7.8 17.5 20.8 0 12.7-6.6 20.6-17.5 20.6Zm-42.8-33.4c0-12.3-9-19.8-23.8-19.8h-31.8v65.1h14v-25.5h15.5l14 25.5h15.4l-15.5-27.4c7.7-3.1 12.2-9.3 12.2-17.9Zm-41.7-7.3h17.2c6.9 0 10.5 2.5 10.5 7.3 0 4.7-3.6 7.3-10.5 7.3h-17.2v-14.6Z"
|
||||
className="anthropic_box_svg__st0"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { useDarkStore } from "@/stores/darkStore";
|
||||
import React, { forwardRef } from "react";
|
||||
import SvgAnthropicBox from "./AnthropicBox";
|
||||
|
||||
|
|
@ -5,5 +6,9 @@ export const AnthropicIcon = forwardRef<
|
|||
SVGSVGElement,
|
||||
React.PropsWithChildren<{}>
|
||||
>((props, ref) => {
|
||||
return <SvgAnthropicBox ref={ref} {...props} />;
|
||||
const isDark = useDarkStore((state) => state.dark);
|
||||
|
||||
return (
|
||||
<SvgAnthropicBox ref={ref} {...props} color={isDark ? "#fff" : "#000"} />
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
const AstraSVG = (props) => (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
{...props}
|
||||
width="167"
|
||||
height="68"
|
||||
viewBox="0 0 167 68"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<rect width="100%" height="100%" rx="4" fill="backgroundColor" />
|
||||
<path
|
||||
d="M6.89209 5.76894L5 10.8265H6.56835L8 6.4524L9.43165 10.8265H11L9.10791 5.76894C8.71942 4.76175 7.29496 4.72578 6.89209 5.76894Z"
|
||||
fill="currentColor"
|
||||
d="M60.2338 0.25H0.000244141V67.75H60.2338L75.365 56.0752V11.9248L60.2338 0.25ZM11.6732 11.9248H63.692V56.0874H11.6732V11.9248Z"
|
||||
fill={props.isDark ? "#ffffff" : "#0A0A0A"}
|
||||
/>
|
||||
<path
|
||||
d="M162.038 12.415V1H106.964L92.0097 12.415V28.088L106.964 39.503H154.962V55.585H94.9883V67H151.546L166.5 55.585V39.503L151.546 28.088H103.547V12.415H162.038Z"
|
||||
fill={props.isDark ? "#ffffff" : "#0A0A0A"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="16" height="16" rx="4" fill="white"/>
|
||||
<path d="M6.89209 5.76894L5 10.8265H6.56835L8 6.4524L9.43165 10.8265H11L9.10791 5.76894C8.71942 4.76175 7.29496 4.72578 6.89209 5.76894Z" fill="black"/>
|
||||
<svg width="167" height="68" viewBox="0 0 167 68" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M60.2338 0.25H0.000244141V67.75H60.2338L75.365 56.0752V11.9248L60.2338 0.25ZM11.6732 11.9248H63.692V56.0874H11.6732V11.9248Z" fill="#0A0A0A"/>
|
||||
<path d="M162.038 12.415V1H106.964L92.0097 12.415V28.088L106.964 39.503H154.962V55.585H94.9883V67H151.546L166.5 55.585V39.503L151.546 28.088H103.547V12.415H162.038Z" fill="#0A0A0A"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 311 B After Width: | Height: | Size: 444 B |
|
|
@ -1,3 +1,4 @@
|
|||
import { useDarkStore } from "@/stores/darkStore";
|
||||
import React, { forwardRef } from "react";
|
||||
import AstraSVG from "./AstraDB";
|
||||
|
||||
|
|
@ -5,5 +6,6 @@ export const AstraDBIcon = forwardRef<
|
|||
SVGSVGElement,
|
||||
React.PropsWithChildren<{}>
|
||||
>((props, ref) => {
|
||||
return <AstraSVG ref={ref} {...props} />;
|
||||
const isDark = useDarkStore((state) => state.dark);
|
||||
return <AstraSVG ref={ref} isDark={isDark} {...props} />;
|
||||
});
|
||||
|
|
|
|||
4
src/frontend/src/icons/AstraDB/old-astra-icon.svg
Normal file
4
src/frontend/src/icons/AstraDB/old-astra-icon.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="16" height="16" rx="4" fill="white"/>
|
||||
<path d="M6.89209 5.76894L5 10.8265H6.56835L8 6.4524L9.43165 10.8265H11L9.10791 5.76894C8.71942 4.76175 7.29496 4.72578 6.89209 5.76894Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 307 B |
|
|
@ -11,11 +11,11 @@ const HCDSVG = (props) => (
|
|||
{/* <rect width="96" height="96" rx="6" fill="white"/> */}
|
||||
<path
|
||||
d="M38.0469 33H12V62.1892H38.0469L44.5902 57.1406V38.0485L38.0469 33ZM17.0478 38.0485H39.5424V57.1459H17.0478V38.0485Z"
|
||||
fill="black"
|
||||
fill={props.isDark ? "#ffffff" : "#0A0A0A"}
|
||||
/>
|
||||
<path
|
||||
d="M82.0705 38.2605V33.3243H58.2546L51.788 38.2605V45.038L58.2546 49.9742H79.0107V56.9286H53.076V61.8648H77.5334L84 56.9286V49.9742L77.5334 45.038H56.7772V38.2605H82.0705Z"
|
||||
fill="black"
|
||||
fill={props.isDark ? "#ffffff" : "#0A0A0A"}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import { useDarkStore } from "@/stores/darkStore";
|
||||
import React, { forwardRef } from "react";
|
||||
import HCDSVG from "./HCD";
|
||||
|
||||
export const HCDIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
|
||||
(props, ref) => {
|
||||
return <HCDSVG ref={ref} {...props} />;
|
||||
const isDark = useDarkStore((state) => state.dark);
|
||||
|
||||
return <HCDSVG ref={ref} isDark={isDark} {...props} />;
|
||||
},
|
||||
);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 8.4 KiB |
|
|
@ -1,3 +1,4 @@
|
|||
import { useDarkStore } from "@/stores/darkStore";
|
||||
import React, { forwardRef } from "react";
|
||||
import SvgOllama from "./Ollama";
|
||||
|
||||
|
|
@ -5,5 +6,7 @@ export const OllamaIcon = forwardRef<
|
|||
SVGSVGElement,
|
||||
React.PropsWithChildren<{}>
|
||||
>((props, ref) => {
|
||||
return <SvgOllama ref={ref} {...props} />;
|
||||
const isDark = useDarkStore((state) => state.dark);
|
||||
|
||||
return <SvgOllama ref={ref} {...props} color={isDark ? "#fff" : "#000"} />;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,121 +8,121 @@ const SvgPineconeLogo = (props) => (
|
|||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="#000"
|
||||
fill={props.color}
|
||||
d="M13.855 34.296c1.077 0 1.95-.85 1.95-1.9 0-1.05-.873-1.901-1.95-1.901-1.076 0-1.95.85-1.95 1.9 0 1.05.874 1.901 1.95 1.901Z"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeWidth={2.118}
|
||||
d="m18.414 7.197.837-4.537"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2.118}
|
||||
d="m22.266 5.585-2.92-3.474-3.971 2.262"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeWidth={2.118}
|
||||
d="m14.92 26.553.814-4.536"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2.118}
|
||||
d="m18.773 24.93-2.943-3.463-3.96 2.274"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeWidth={2.118}
|
||||
d="m16.608 17.2.813-4.537"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2.118}
|
||||
d="m20.459 15.58-2.931-3.452-3.96 2.262"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeWidth={2.01}
|
||||
d="m8.329 26.155-3.577 2.426"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2.01}
|
||||
d="M8.544 30.087 4.32 28.873l.31-4.28"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeWidth={2.01}
|
||||
d="m21.321 28.43 2.489 3.498"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2.01}
|
||||
d="m19.718 32.045 4.39.291 1.245-4.092"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeWidth={2.058}
|
||||
d="m25.4 21.33 4.378.77"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2.058}
|
||||
d="m26.907 25.072 3.398-2.88-2.142-3.836"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeWidth={2.058}
|
||||
d="m24.12 12.861 3.9-2.098"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2.058}
|
||||
d="m24.336 8.84 4.15 1.679-.777 4.303"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeWidth={2.058}
|
||||
d="m6.916 18.157-4.39-.747"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2.058}
|
||||
d="M4.177 21.165 2 17.328l3.362-2.892"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeWidth={2.058}
|
||||
d="M11.08 10.613 8.149 7.348"
|
||||
/>
|
||||
<path
|
||||
stroke="#000"
|
||||
stroke={props.color}
|
||||
strokeLinecap="square"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2.058}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { useDarkStore } from "@/stores/darkStore";
|
||||
import React, { forwardRef } from "react";
|
||||
import SvgPineconeLogo from "./PineconeLogo";
|
||||
|
||||
|
|
@ -5,5 +6,9 @@ export const PineconeIcon = forwardRef<
|
|||
SVGSVGElement,
|
||||
React.PropsWithChildren<{}>
|
||||
>((props, ref) => {
|
||||
return <SvgPineconeLogo ref={ref} {...props} />;
|
||||
const isDark = useDarkStore((state) => state.dark);
|
||||
|
||||
return (
|
||||
<SvgPineconeLogo ref={ref} {...props} color={isDark ? "#fff" : "#000"} />
|
||||
);
|
||||
});
|
||||
|
|
|
|||
27
src/frontend/src/icons/globe-ok/globe-ok.jsx
Normal file
27
src/frontend/src/icons/globe-ok/globe-ok.jsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
const SvgGlobeOkIcon = (props) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="none"
|
||||
viewBox="0 0 16 16"
|
||||
{...props}
|
||||
>
|
||||
<g
|
||||
stroke="#059669"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
clipPath="url(#clip0_4380_58979)"
|
||||
>
|
||||
<path d="M14.666 8a6.667 6.667 0 11-6.667-6.667"></path>
|
||||
<path strokeWidth="1.25" d="M14.833 1.5l-3.666 3.667L9.5 3.5"></path>
|
||||
<path d="M8 1.333a9.667 9.667 0 000 13.333A9.667 9.667 0 0010.665 8M14.666 8H1.333"></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4380_58979">
|
||||
<path fill="#fff" d="M0 0H16V16H0z"></path>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
export default SvgGlobeOkIcon;
|
||||
9
src/frontend/src/icons/globe-ok/index.tsx
Normal file
9
src/frontend/src/icons/globe-ok/index.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import React, { forwardRef } from "react";
|
||||
import SvgGlobeOkIcon from "./globe-ok";
|
||||
|
||||
export const GlobeOkIcon = forwardRef<
|
||||
SVGSVGElement,
|
||||
React.PropsWithChildren<{}>
|
||||
>((props, ref) => {
|
||||
return <SvgGlobeOkIcon ref={ref} {...props} />;
|
||||
});
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import useFlowStore from "@/stores/flowStore";
|
||||
import { ConnectionLineComponentProps } from "reactflow";
|
||||
|
||||
const ConnectionLineComponent = ({
|
||||
|
|
@ -5,24 +6,30 @@ const ConnectionLineComponent = ({
|
|||
fromY,
|
||||
toX,
|
||||
toY,
|
||||
connectionLineStyle = {}, // provide a default value for connectionLineStyle
|
||||
connectionLineStyle = {},
|
||||
}: ConnectionLineComponentProps): JSX.Element => {
|
||||
const handleDragging = useFlowStore((state) => state.handleDragging);
|
||||
const color = handleDragging?.color;
|
||||
|
||||
return (
|
||||
<g>
|
||||
<path
|
||||
fill="none"
|
||||
// ! Replace hash # colors here
|
||||
strokeWidth={1.5}
|
||||
className="animated stroke-connection"
|
||||
strokeWidth={2}
|
||||
className={`animated`}
|
||||
style={{
|
||||
stroke: handleDragging ? handleDragging.color : "",
|
||||
...connectionLineStyle,
|
||||
}}
|
||||
d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
|
||||
style={connectionLineStyle}
|
||||
/>
|
||||
<circle
|
||||
cx={toX}
|
||||
cy={toY}
|
||||
fill="#fff"
|
||||
r={3}
|
||||
stroke="#222"
|
||||
r={5}
|
||||
stroke={color}
|
||||
className=""
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { useGetBuildsQuery } from "@/controllers/API/queries/_builds";
|
|||
import { track } from "@/customization/utils/analytics";
|
||||
import useAutoSaveFlow from "@/hooks/flows/use-autosave-flow";
|
||||
import useUploadFlow from "@/hooks/flows/use-upload-flow";
|
||||
import { nodeColors, nodeColorsName } from "@/utils/styleUtils";
|
||||
import { getNodeRenderType, isSupportedNodeTypes } from "@/utils/utils";
|
||||
import _, { cloneDeep } from "lodash";
|
||||
import {
|
||||
|
|
@ -397,6 +398,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
|
|||
|
||||
const onNodeDragStart: NodeDragHandler = useCallback(() => {
|
||||
// 👇 make dragging a node undoable
|
||||
|
||||
takeSnapshot();
|
||||
// 👉 you can place your event handlers here
|
||||
}, [takeSnapshot]);
|
||||
|
|
@ -409,6 +411,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
|
|||
|
||||
const onSelectionDragStart: SelectionDragHandler = useCallback(() => {
|
||||
// 👇 make dragging a selection undoable
|
||||
|
||||
takeSnapshot();
|
||||
}, [takeSnapshot]);
|
||||
|
||||
|
|
@ -581,10 +584,21 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
|
|||
[isAddingNote],
|
||||
);
|
||||
|
||||
const handleEdgeClick = (event, edge) => {
|
||||
const color =
|
||||
nodeColorsName[edge?.data?.targetHandle?.inputTypes[0]] ||
|
||||
"hsl(var(--foreground))";
|
||||
|
||||
console.log(edge?.data?.targetHandle);
|
||||
|
||||
const innerColor = `hsl(var(--inner-${color}-muted-foreground))`;
|
||||
document.documentElement.style.setProperty("--selected", innerColor);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full w-full" ref={reactFlowWrapper}>
|
||||
{showCanvas ? (
|
||||
<div id="react-flow-id" className="h-full w-full">
|
||||
<div id="react-flow-id" className="h-full w-full bg-canvas">
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
|
|
@ -601,7 +615,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
|
|||
onSelectionDragStart={onSelectionDragStart}
|
||||
onSelectionEnd={onSelectionEnd}
|
||||
onSelectionStart={onSelectionStart}
|
||||
connectionRadius={25}
|
||||
connectionRadius={30}
|
||||
edgeTypes={edgeTypes}
|
||||
connectionLineComponent={ConnectionLineComponent}
|
||||
onDragOver={onDragOver}
|
||||
|
|
@ -619,6 +633,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
|
|||
proOptions={{ hideAttribution: true }}
|
||||
onPaneClick={onPaneClick}
|
||||
onPaneMouseMove={onPaneMouseMove}
|
||||
onEdgeClick={handleEdgeClick}
|
||||
>
|
||||
<Background className="" />
|
||||
{!view && (
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import { countHandlesFn } from "@/CustomNodes/helpers/count-handles";
|
||||
import useHandleOnNewValue from "@/CustomNodes/hooks/use-handle-new-value";
|
||||
import useHandleNodeClass from "@/CustomNodes/hooks/use-handle-node-class";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { usePostRetrieveVertexOrder } from "@/controllers/API/queries/vertex";
|
||||
import useAddFlow from "@/hooks/flows/use-add-flow";
|
||||
import CodeAreaModal from "@/modals/codeAreaModal";
|
||||
import { APIClassType } from "@/types/api";
|
||||
import _, { cloneDeep } from "lodash";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useUpdateNodeInternals } from "reactflow";
|
||||
import IconComponent from "../../../../components/genericIconComponent";
|
||||
import ShadTooltip from "../../../../components/shadTooltipComponent";
|
||||
|
|
@ -213,7 +214,11 @@ export default function NodeToolbarComponent({
|
|||
showconfirmShare,
|
||||
]);
|
||||
|
||||
const [selectedValue, setSelectedValue] = useState(null);
|
||||
|
||||
const handleSelectChange = (event) => {
|
||||
setSelectedValue(event);
|
||||
|
||||
switch (event) {
|
||||
case "save":
|
||||
saveComponent();
|
||||
|
|
@ -282,6 +287,8 @@ export default function NodeToolbarComponent({
|
|||
);
|
||||
break;
|
||||
}
|
||||
|
||||
setSelectedValue(null);
|
||||
};
|
||||
|
||||
const isSaved = flows?.some((flow) =>
|
||||
|
|
@ -308,10 +315,16 @@ export default function NodeToolbarComponent({
|
|||
|
||||
const hasCode = Object.keys(data.node!.template).includes("code");
|
||||
|
||||
const selectTriggerRef = useRef(null);
|
||||
|
||||
const handleButtonClick = () => {
|
||||
(selectTriggerRef.current! as HTMLElement)?.click();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-26 noflow nowheel nopan nodelete nodrag h-10">
|
||||
<span className="isolate inline-flex rounded-md shadow-sm">
|
||||
<div className="noflow nowheel nopan nodelete nodrag">
|
||||
<div className="flex items-center gap-1 rounded-lg bg-background p-1 shadow-sm">
|
||||
{hasCode && (
|
||||
<ShadTooltip
|
||||
content={
|
||||
|
|
@ -323,17 +336,22 @@ export default function NodeToolbarComponent({
|
|||
}
|
||||
side="top"
|
||||
>
|
||||
<button
|
||||
className="relative inline-flex items-center rounded-l-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
|
||||
<Button
|
||||
className="node-toolbar-buttons"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setOpenModal(!openModal);
|
||||
}}
|
||||
data-testid="code-button-modal"
|
||||
size="node-toolbar"
|
||||
>
|
||||
<IconComponent name="Code" className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<span className="text-[13px] font-medium">Code</span>
|
||||
</Button>
|
||||
</ShadTooltip>
|
||||
)}
|
||||
|
||||
{nodeLength > 0 && (
|
||||
<ShadTooltip
|
||||
content={
|
||||
|
|
@ -346,20 +364,20 @@ export default function NodeToolbarComponent({
|
|||
}
|
||||
side="top"
|
||||
>
|
||||
<button
|
||||
className={`${
|
||||
isGroup ? "rounded-l-md" : ""
|
||||
} relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10`}
|
||||
<Button
|
||||
className="node-toolbar-buttons"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setShowModalAdvanced(true);
|
||||
}}
|
||||
data-testid="advanced-button-modal"
|
||||
data-testid="edit-button-modal"
|
||||
size="node-toolbar"
|
||||
>
|
||||
<IconComponent name="Settings2" className="h-4 w-4" />
|
||||
</button>
|
||||
<IconComponent name="SlidersHorizontal" className="h-4 w-4" />
|
||||
<span className="text-[13px] font-medium">Controls</span>
|
||||
</Button>
|
||||
</ShadTooltip>
|
||||
)}
|
||||
|
||||
<ShadTooltip
|
||||
content={
|
||||
<ShortcutDisplay
|
||||
|
|
@ -370,10 +388,9 @@ export default function NodeToolbarComponent({
|
|||
}
|
||||
side="top"
|
||||
>
|
||||
<button
|
||||
className={classNames(
|
||||
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
|
||||
)}
|
||||
<Button
|
||||
className={cn("node-toolbar-buttons", frozen && "text-blue-500")}
|
||||
variant="ghost"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
takeSnapshot();
|
||||
|
|
@ -382,279 +399,296 @@ export default function NodeToolbarComponent({
|
|||
stopNodeId: data.id,
|
||||
});
|
||||
}}
|
||||
size="node-toolbar"
|
||||
>
|
||||
<IconComponent
|
||||
name="FreezeAll"
|
||||
className={cn(
|
||||
"h-4 w-4 transition-all",
|
||||
// TODO UPDATE THIS COLOR TO BE A VARIABLE
|
||||
frozen ? "animate-wiggle text-ice" : "",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
<span className="text-[13px] font-medium">Freeze Path</span>
|
||||
</Button>
|
||||
</ShadTooltip>
|
||||
|
||||
<Select onValueChange={handleSelectChange} value="">
|
||||
<ShadTooltip content="All" side="top">
|
||||
<SelectTrigger>
|
||||
<div>
|
||||
<div
|
||||
data-testid="more-options-modal"
|
||||
className={classNames(
|
||||
"relative -ml-px inline-flex h-8 w-[2rem] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
|
||||
)}
|
||||
>
|
||||
<IconComponent
|
||||
name="MoreHorizontal"
|
||||
className="relative left-2 h-4 w-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
</ShadTooltip>
|
||||
<SelectContent className="min-w-[14rem]">
|
||||
{hasCode && (
|
||||
<SelectItem value={"code"}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Code")?.shortcut!
|
||||
}
|
||||
value={"Code"}
|
||||
icon={"Code"}
|
||||
dataTestId="code-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
)}
|
||||
{nodeLength > 0 && (
|
||||
<SelectItem value={nodeLength === 0 ? "disabled" : "advanced"}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Advanced Settings")
|
||||
?.shortcut!
|
||||
}
|
||||
value={"Advanced"}
|
||||
icon={"Settings2"}
|
||||
dataTestId="edit-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
)}
|
||||
<SelectItem value={"save"}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Save Component")
|
||||
?.shortcut!
|
||||
}
|
||||
value={"Save"}
|
||||
icon={"SaveAll"}
|
||||
dataTestId="save-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
<SelectItem value={"duplicate"}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Duplicate")?.shortcut!
|
||||
}
|
||||
value={"Duplicate"}
|
||||
icon={"Copy"}
|
||||
dataTestId="copy-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
<SelectItem value={"copy"}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Copy")?.shortcut!
|
||||
}
|
||||
value={"Copy"}
|
||||
icon={"Clipboard"}
|
||||
dataTestId="copy-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
{isOutdated && (
|
||||
<SelectItem value={"update"}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Update")?.shortcut!
|
||||
}
|
||||
value={"Restore"}
|
||||
icon={"RefreshCcwDot"}
|
||||
dataTestId="update-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
)}
|
||||
{hasStore && (
|
||||
<SelectItem
|
||||
value={"Share"}
|
||||
disabled={!hasApiKey || !validApiKey}
|
||||
>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Component Share")
|
||||
?.shortcut!
|
||||
}
|
||||
value={"Share"}
|
||||
icon={"Share3"}
|
||||
dataTestId="share-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
)}
|
||||
|
||||
<SelectItem
|
||||
value={"documentation"}
|
||||
disabled={data.node?.documentation === ""}
|
||||
>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Docs")?.shortcut!
|
||||
}
|
||||
value={"Docs"}
|
||||
icon={"FileText"}
|
||||
dataTestId="docs-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
{isMinimal && (
|
||||
<SelectItem value={"show"}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Minimize")
|
||||
?.shortcut!
|
||||
}
|
||||
value={showNode ? "Minimize" : "Expand"}
|
||||
icon={showNode ? "Minimize2" : "Maximize2"}
|
||||
dataTestId="minimize-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
)}
|
||||
{isGroup && (
|
||||
<SelectItem value="ungroup">
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Group")?.shortcut!
|
||||
}
|
||||
value={"Ungroup"}
|
||||
icon={"Ungroup"}
|
||||
dataTestId="group-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
)}
|
||||
<SelectItem value="freeze">
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Freeze")?.shortcut!
|
||||
}
|
||||
value={"Freeze"}
|
||||
icon={"Snowflake"}
|
||||
dataTestId="freeze-button"
|
||||
style={`${frozen ? " text-ice" : ""} transition-all`}
|
||||
/>
|
||||
</SelectItem>
|
||||
<SelectItem value="freezeAll">
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Freeze Path")
|
||||
?.shortcut!
|
||||
}
|
||||
value={"Freeze Path"}
|
||||
icon={"FreezeAll"}
|
||||
dataTestId="freeze-path-button"
|
||||
style={`${frozen ? " text-ice" : ""} transition-all`}
|
||||
/>
|
||||
</SelectItem>
|
||||
<SelectItem value="Download">
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Download")?.shortcut!
|
||||
}
|
||||
value={"Download"}
|
||||
icon={"Download"}
|
||||
dataTestId="download-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
<SelectItem value={"delete"} className="focus:bg-red-400/[.20]">
|
||||
<div className="font-red flex text-status-red">
|
||||
<IconComponent
|
||||
name="Trash2"
|
||||
className="relative top-0.5 mr-2 h-4 w-4"
|
||||
/>{" "}
|
||||
<span className="">Delete</span>{" "}
|
||||
<span
|
||||
className={`absolute right-2 top-2 flex items-center justify-center rounded-sm px-1 py-[0.2]`}
|
||||
>
|
||||
<IconComponent
|
||||
name="Delete"
|
||||
className="h-4 w-4 stroke-2 text-red-400"
|
||||
></IconComponent>
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<ConfirmationModal
|
||||
open={showOverrideModal}
|
||||
title={`Replace`}
|
||||
cancelText="Create New"
|
||||
confirmationText="Replace"
|
||||
size={"x-small"}
|
||||
icon={"SaveAll"}
|
||||
index={6}
|
||||
onConfirm={() => {
|
||||
addFlow({
|
||||
flow: flowComponent,
|
||||
override: true,
|
||||
});
|
||||
setSuccessData({ title: `${data.id} successfully overridden!` });
|
||||
setShowOverrideModal(false);
|
||||
}}
|
||||
onClose={() => setShowOverrideModal(false)}
|
||||
onCancel={() => {
|
||||
addFlow({
|
||||
flow: flowComponent,
|
||||
override: true,
|
||||
});
|
||||
setSuccessData({ title: "New component successfully saved!" });
|
||||
setShowOverrideModal(false);
|
||||
}}
|
||||
<ShadTooltip
|
||||
content={
|
||||
<ShortcutDisplay
|
||||
{...shortcuts.find(
|
||||
({ name }) => name.toLowerCase() === "copy",
|
||||
)!}
|
||||
/>
|
||||
}
|
||||
side="top"
|
||||
>
|
||||
<ConfirmationModal.Content>
|
||||
<span>
|
||||
It seems {data.node?.display_name} already exists. Do you want
|
||||
to replace it with the current or create a new one?
|
||||
</span>
|
||||
</ConfirmationModal.Content>
|
||||
</ConfirmationModal>
|
||||
{showModalAdvanced && (
|
||||
<EditNodeModal
|
||||
data={data}
|
||||
open={showModalAdvanced}
|
||||
setOpen={setShowModalAdvanced}
|
||||
/>
|
||||
)}
|
||||
{showconfirmShare && (
|
||||
<ShareModal
|
||||
open={showconfirmShare}
|
||||
setOpen={setShowconfirmShare}
|
||||
is_component={true}
|
||||
component={flowComponent!}
|
||||
/>
|
||||
)}
|
||||
{hasCode && (
|
||||
<div className="hidden">
|
||||
{openModal && (
|
||||
<CodeAreaModal
|
||||
setValue={handleOnNewValue}
|
||||
open={openModal}
|
||||
setOpen={setOpenModal}
|
||||
dynamic={true}
|
||||
setNodeClass={handleNodeClass}
|
||||
nodeClass={data.node}
|
||||
value={data.node?.template[name].value ?? ""}
|
||||
<Button
|
||||
className="node-toolbar-buttons h-[2.125rem]"
|
||||
variant="ghost"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
handleSelectChange("copy");
|
||||
}}
|
||||
size="node-toolbar"
|
||||
>
|
||||
<IconComponent name="Copy" className="h-4 w-4" />
|
||||
</Button>
|
||||
</ShadTooltip>
|
||||
<ShadTooltip content="All" side="top">
|
||||
<Button
|
||||
className="node-toolbar-buttons h-[2.125rem]"
|
||||
variant="ghost"
|
||||
onClick={handleButtonClick}
|
||||
size="node-toolbar"
|
||||
data-testid="more-options-modal"
|
||||
>
|
||||
<IconComponent name="MoreHorizontal" className="h-4 w-4" />
|
||||
</Button>
|
||||
</ShadTooltip>
|
||||
</div>
|
||||
|
||||
<Select onValueChange={handleSelectChange} value={selectedValue!}>
|
||||
<ShadTooltip content="All" side="bottom">
|
||||
<SelectTrigger ref={selectTriggerRef}>
|
||||
<></>
|
||||
</SelectTrigger>
|
||||
</ShadTooltip>
|
||||
<SelectContent className="relative -left-10 min-w-[14rem]">
|
||||
{hasCode && (
|
||||
<SelectItem value={"code"}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Code")?.shortcut!
|
||||
}
|
||||
value={"Code"}
|
||||
icon={"Code"}
|
||||
dataTestId="code-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
)}
|
||||
{nodeLength > 0 && (
|
||||
<SelectItem value={nodeLength === 0 ? "disabled" : "advanced"}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Advanced Settings")
|
||||
?.shortcut!
|
||||
}
|
||||
value={"Controls"}
|
||||
icon={"SlidersHorizontal"}
|
||||
dataTestId="advanced-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
)}
|
||||
<SelectItem value={"save"}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Save Component")
|
||||
?.shortcut!
|
||||
}
|
||||
value={"Save"}
|
||||
icon={"SaveAll"}
|
||||
dataTestId="save-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
<SelectItem value={"duplicate"}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Duplicate")?.shortcut!
|
||||
}
|
||||
value={"Duplicate"}
|
||||
icon={"Copy"}
|
||||
dataTestId="copy-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
<SelectItem value={"copy"}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Copy")?.shortcut!
|
||||
}
|
||||
value={"Copy"}
|
||||
icon={"Clipboard"}
|
||||
dataTestId="copy-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
{isOutdated && (
|
||||
<SelectItem value={"update"}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Update")?.shortcut!
|
||||
}
|
||||
value={"Restore"}
|
||||
icon={"RefreshCcwDot"}
|
||||
dataTestId="update-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
)}
|
||||
{hasStore && (
|
||||
<SelectItem value={"Share"} disabled={!hasApiKey || !validApiKey}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Component Share")
|
||||
?.shortcut!
|
||||
}
|
||||
value={"Share"}
|
||||
icon={"Share3"}
|
||||
dataTestId="share-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
)}
|
||||
|
||||
<SelectItem
|
||||
value={"documentation"}
|
||||
disabled={data.node?.documentation === ""}
|
||||
>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Docs")?.shortcut!
|
||||
}
|
||||
value={"Docs"}
|
||||
icon={"FileText"}
|
||||
dataTestId="docs-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
{isMinimal && (
|
||||
<SelectItem value={"show"}>
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Minimize")?.shortcut!
|
||||
}
|
||||
value={showNode ? "Minimize" : "Expand"}
|
||||
icon={showNode ? "Minimize2" : "Maximize2"}
|
||||
dataTestId="minimize-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
)}
|
||||
{isGroup && (
|
||||
<SelectItem value="ungroup">
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Group")?.shortcut!
|
||||
}
|
||||
value={"Ungroup"}
|
||||
icon={"Ungroup"}
|
||||
dataTestId="group-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
)}
|
||||
<SelectItem value="freeze">
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Freeze")?.shortcut!
|
||||
}
|
||||
value={"Freeze"}
|
||||
icon={"Snowflake"}
|
||||
dataTestId="freeze-button"
|
||||
style={`${frozen ? " text-ice" : ""} transition-all`}
|
||||
/>
|
||||
</SelectItem>
|
||||
<SelectItem value="freezeAll">
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Freeze Path")?.shortcut!
|
||||
}
|
||||
value={"Freeze Path"}
|
||||
icon={"FreezeAll"}
|
||||
dataTestId="freeze-path-button"
|
||||
style={`${frozen ? " text-ice" : ""} transition-all`}
|
||||
/>
|
||||
</SelectItem>
|
||||
<SelectItem value="Download">
|
||||
<ToolbarSelectItem
|
||||
shortcut={
|
||||
shortcuts.find((obj) => obj.name === "Download")?.shortcut!
|
||||
}
|
||||
value={"Download"}
|
||||
icon={"Download"}
|
||||
dataTestId="download-button-modal"
|
||||
/>
|
||||
</SelectItem>
|
||||
<SelectItem value={"delete"} className="focus:bg-red-400/[.20]">
|
||||
<div className="font-red flex text-status-red">
|
||||
<IconComponent
|
||||
name="Trash2"
|
||||
className="relative top-0.5 mr-2 h-4 w-4"
|
||||
/>{" "}
|
||||
<span className="">Delete</span>{" "}
|
||||
<span
|
||||
className={`absolute right-2 top-2 flex items-center justify-center rounded-sm px-1 py-[0.2]`}
|
||||
>
|
||||
<></>
|
||||
</CodeAreaModal>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
<IconComponent
|
||||
name="Delete"
|
||||
className="h-4 w-4 stroke-2 text-red-400"
|
||||
></IconComponent>
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<ConfirmationModal
|
||||
open={showOverrideModal}
|
||||
title={`Replace`}
|
||||
cancelText="Create New"
|
||||
confirmationText="Replace"
|
||||
size={"x-small"}
|
||||
icon={"SaveAll"}
|
||||
index={6}
|
||||
onConfirm={() => {
|
||||
addFlow({
|
||||
flow: flowComponent,
|
||||
override: true,
|
||||
});
|
||||
setSuccessData({ title: `${data.id} successfully overridden!` });
|
||||
setShowOverrideModal(false);
|
||||
}}
|
||||
onClose={() => setShowOverrideModal(false)}
|
||||
onCancel={() => {
|
||||
addFlow({
|
||||
flow: flowComponent,
|
||||
override: true,
|
||||
});
|
||||
setSuccessData({ title: "New component successfully saved!" });
|
||||
setShowOverrideModal(false);
|
||||
}}
|
||||
>
|
||||
<ConfirmationModal.Content>
|
||||
<span>
|
||||
It seems {data.node?.display_name} already exists. Do you want to
|
||||
replace it with the current or create a new one?
|
||||
</span>
|
||||
</ConfirmationModal.Content>
|
||||
</ConfirmationModal>
|
||||
{showModalAdvanced && (
|
||||
<EditNodeModal
|
||||
data={data}
|
||||
open={showModalAdvanced}
|
||||
setOpen={setShowModalAdvanced}
|
||||
/>
|
||||
)}
|
||||
{showconfirmShare && (
|
||||
<ShareModal
|
||||
open={showconfirmShare}
|
||||
setOpen={setShowconfirmShare}
|
||||
is_component={true}
|
||||
component={flowComponent!}
|
||||
/>
|
||||
)}
|
||||
{hasCode && (
|
||||
<div className="hidden">
|
||||
{openModal && (
|
||||
<CodeAreaModal
|
||||
setValue={handleOnNewValue}
|
||||
open={openModal}
|
||||
setOpen={setOpenModal}
|
||||
dynamic={true}
|
||||
setNodeClass={handleNodeClass}
|
||||
nodeClass={data.node}
|
||||
value={data.node?.template[name].value ?? ""}
|
||||
>
|
||||
<></>
|
||||
</CodeAreaModal>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ export default function ShortcutDisplay({
|
|||
}): JSX.Element {
|
||||
const fixedShortcut = shortcut?.split("+");
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<div className="flex content-center items-center justify-center self-center text-[12px]">
|
||||
<span> {name} </span>
|
||||
<span
|
||||
className={`ml-3 flex items-center rounded-sm bg-muted px-1.5 py-[0.1em] text-lg text-muted-foreground`}
|
||||
className={`ml-3 flex items-center rounded-sm bg-primary-hover px-1.5 py-[0.1em] text-muted`}
|
||||
>
|
||||
<RenderIcons filteredShortcut={fixedShortcut} />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -556,7 +556,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
|
|||
get().updateBuildStatus(ids, BuildStatus.ERROR);
|
||||
throw new Error("Invalid components");
|
||||
}
|
||||
get().updateEdgesRunningByNodes(nodes, true);
|
||||
// get().updateEdgesRunningByNodes(nodes, true);
|
||||
}
|
||||
function handleBuildUpdate(
|
||||
vertexBuildData: VertexBuildTypeAPI,
|
||||
|
|
@ -702,6 +702,15 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
|
|||
.map((element) => element.reference)
|
||||
.filter(Boolean) as string[];
|
||||
get().updateBuildStatus(idList, BuildStatus.BUILDING);
|
||||
|
||||
const edges = get().edges;
|
||||
const newEdges = edges.map((edge) => {
|
||||
if (idList.includes(edge.data.targetHandle.id)) {
|
||||
edge.className = "runned";
|
||||
}
|
||||
return edge;
|
||||
});
|
||||
set({ edges: newEdges });
|
||||
},
|
||||
onValidateNodes: validateSubgraph,
|
||||
nodes: get().nodes || undefined,
|
||||
|
|
@ -722,14 +731,30 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
|
|||
updateEdgesRunningByNodes: (ids: string[], running: boolean) => {
|
||||
const edges = get().edges;
|
||||
const newEdges = edges.map((edge) => {
|
||||
if (ids.includes(edge.source) && ids.includes(edge.target)) {
|
||||
if (ids.includes(edge.data.sourceHandle.id)) {
|
||||
edge.animated = running;
|
||||
edge.className = running ? "running" : "";
|
||||
} else {
|
||||
edge.animated = false;
|
||||
edge.className = "not-running";
|
||||
}
|
||||
return edge;
|
||||
});
|
||||
set({ edges: newEdges });
|
||||
},
|
||||
clearEdgesRunningByNodes: async (): Promise<void> => {
|
||||
return new Promise<void>((resolve) => {
|
||||
const edges = get().edges;
|
||||
const newEdges = edges.map((edge) => {
|
||||
edge.animated = false;
|
||||
edge.className = "";
|
||||
return edge;
|
||||
});
|
||||
set({ edges: newEdges });
|
||||
resolve();
|
||||
});
|
||||
},
|
||||
|
||||
updateVerticesBuild: (
|
||||
vertices: {
|
||||
verticesIds: string[];
|
||||
|
|
@ -821,6 +846,10 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
|
|||
setFilterType: (filterType) => {
|
||||
set({ filterType });
|
||||
},
|
||||
currentBuildingNodeId: undefined,
|
||||
setCurrentBuildingNodeId: (nodeIds) => {
|
||||
set({ currentBuildingNodeId: nodeIds });
|
||||
},
|
||||
}));
|
||||
|
||||
export default useFlowStore;
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue