Conversation
…put component in parameter render component for better flexibility and customization. Remove InputFileComponent from parameter render component and replace it with CustomInputFileComponent.
SonicDMG
temporarily deployed
to
cz/custom-inputFile - langflow-manual-install PR #9233
Render
Destroyed
WalkthroughThe changes replace the use of a standard file input component with a new custom wrapper component for file inputs in the parameter rendering logic. A new Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Suggested labels
Suggested reviewers
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
SonicDMG
temporarily deployed
to
cz/custom-inputFile - langflow-manual-install PR #9233
Render
Destroyed
github-actions
bot
added
enhancement
|
github-actions
bot
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
src/frontend/src/components/core/parameterRenderComponent/index.tsx (1)
172-180: Remove the redundantinputfile_prefix to avoid duplicated IDsBecause
CustomInputFileComponentalready prefixes the ID, this call producesinputfile_inputfile_xyz.
Pass the base ID instead:- <CustomInputFileComponent - {...baseInputProps} - fileTypes={templateData.fileTypes} - file_path={templateData.file_path} - isList={templateData.list ?? false} - tempFile={templateData.temp_file ?? true} - id={`inputfile_${id}`} - /> + <CustomInputFileComponent + {...baseInputProps} + fileTypes={templateData.fileTypes} + file_path={templateData.file_path} + isList={templateData.list ?? false} + tempFile={templateData.temp_file ?? true} + id={id} + />This guarantees a single, predictable DOM ID.
🧹 Nitpick comments (1)
src/frontend/src/customization/components/custom-input-file.tsx (1)
7-17: Prefer passing the entire props object and avoid manual de-structuring to keep the wrapper future-proofBy eagerly destructuring every single prop, the wrapper becomes brittle: if
InputPropslater gains a new optional field, this component will silently drop it.
A safer pattern is to acceptprops(or...rest) wholesale and forward everything, overriding only what you need (id).-export default function CustomInputFileComponent({ - value, - file_path, - handleOnNewValue, - disabled, - fileTypes, - isList, - tempFile = true, - editNode = false, - id, -}: InputProps<string, FileComponentType>): JSX.Element { - return ( - <InputFileComponent - value={value} - file_path={file_path} - handleOnNewValue={handleOnNewValue} - disabled={disabled} - fileTypes={fileTypes} - isList={isList} - tempFile={tempFile} - editNode={editNode} - id={`inputfile_${id}`} - /> - ); -} +export default function CustomInputFileComponent( + props: InputProps<string, FileComponentType>, +): JSX.Element { + const { id, ...rest } = props; + return <InputFileComponent {...rest} id={`inputfile_${id}`} />; +}This cuts duplication and keeps the wrapper aligned with any future prop additions.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/frontend/src/components/core/parameterRenderComponent/index.tsx(2 hunks)src/frontend/src/customization/components/custom-input-file.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
src/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{ts,tsx,js,jsx}: All frontend TypeScript and JavaScript code should be located under src/frontend/src/ and organized into components, pages, icons, stores, types, utils, hooks, services, and assets directories as per the specified directory layout.
Use React 18 with TypeScript for all UI components in the frontend.
Format all TypeScript and JavaScript code using the make format_frontend command.
Lint all TypeScript and JavaScript code using the make lint command.
Files:
src/frontend/src/components/core/parameterRenderComponent/index.tsxsrc/frontend/src/customization/components/custom-input-file.tsx
src/frontend/src/components/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
All components should be styled using Tailwind CSS utility classes.
Files:
src/frontend/src/components/core/parameterRenderComponent/index.tsx
src/frontend/src/@(components|hooks)/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
Implement dark mode support in components and hooks where needed.
Files:
src/frontend/src/components/core/parameterRenderComponent/index.tsx
🧠 Learnings (3)
📓 Common learnings
Learnt from: ogabrielluiz
PR: langflow-ai/langflow#0
File: :0-0
Timestamp: 2025-06-26T19:43:18.260Z
Learning: In langflow custom components, the `module_name` parameter is now propagated through template building functions to add module metadata and code hashes to frontend nodes for better component tracking and debugging.
src/frontend/src/components/core/parameterRenderComponent/index.tsx (11)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/**/*.{ts,tsx,js,jsx} : Use React 18 with TypeScript for all UI components in the frontend.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-07-21T14:16:14.125Z
Learning: Applies to src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx} : Validate input/output behavior and test component initialization and configuration in frontend test files.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/@(components|hooks)/**/*.{ts,tsx,js,jsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/components//@(FlowGraph|nodes)//*.{ts,tsx,js,jsx} : Use React Flow for flow graph visualization components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-07-21T14:16:14.125Z
Learning: Applies to src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx} : Mock external dependencies appropriately in frontend test files to isolate unit tests from external services.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Custom React Flow node types should be implemented as memoized components, using Handle components for connection points and supporting optional icons and labels.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/hooks/**/*.{ts,tsx,js,jsx} : All custom React hooks should be placed in the hooks directory.
Learnt from: dolfim-ibm
PR: #8394
File: src/frontend/src/icons/Docling/index.tsx:4-6
Timestamp: 2025-06-16T11:14:04.200Z
Learning: The Langflow codebase consistently uses React.PropsWithChildren<{}> as the prop type for all icon components using forwardRef, rather than React.SVGProps<SVGSVGElement>. This is an established pattern across hundreds of icon files in src/frontend/src/icons/.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : Use Lucide React for icons in the frontend.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/components/**/*.{ts,tsx,js,jsx} : All components should be styled using Tailwind CSS utility classes.
src/frontend/src/customization/components/custom-input-file.tsx (10)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/**/*.{ts,tsx,js,jsx} : Use React 18 with TypeScript for all UI components in the frontend.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/testing.mdc:0-0
Timestamp: 2025-07-21T14:16:14.125Z
Learning: Applies to src/frontend/**/*.@(test|spec).{ts,tsx,js,jsx} : Validate input/output behavior and test component initialization and configuration in frontend test files.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/*/index.tsx : Create an index.tsx in your icon directory that exports your icon using forwardRef and passes the isDark prop.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/@(components|hooks)/**/*.{ts,tsx,js,jsx} : Implement dark mode support in components and hooks where needed.
Learnt from: dolfim-ibm
PR: #8394
File: src/frontend/src/icons/Docling/index.tsx:4-6
Timestamp: 2025-06-16T11:14:04.200Z
Learning: The Langflow codebase consistently uses React.PropsWithChildren<{}> as the prop type for all icon components using forwardRef, rather than React.SVGProps<SVGSVGElement>. This is an established pattern across hundreds of icon files in src/frontend/src/icons/.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons//.@(js|jsx|ts|tsx) : Create a new directory for your icon in src/frontend/src/icons/YourIconName/ and add your SVG as a React component (e.g., YourIconName.jsx). The SVG component must use the isDark prop to support both light and dark mode.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/components//@(FlowGraph|nodes)//*.{ts,tsx,js,jsx} : Use React Flow for flow graph visualization components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/hooks/**/*.{ts,tsx,js,jsx} : All custom React hooks should be placed in the hooks directory.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/components/**/*.{ts,tsx,js,jsx} : All components should be styled using Tailwind CSS utility classes.
🔇 Additional comments (1)
src/frontend/src/components/core/parameterRenderComponent/index.tsx (1)
8-8: Import path looks goodSwitching to the new wrapper keeps concerns separated – nice.
| return ( | ||
| <InputFileComponent | ||
| value={value} | ||
| file_path={file_path} | ||
| handleOnNewValue={handleOnNewValue} | ||
| disabled={disabled} | ||
| fileTypes={fileTypes} | ||
| isList={isList} | ||
| tempFile={tempFile} | ||
| editNode={editNode} | ||
| id={`inputfile_${id}`} | ||
| /> |
There was a problem hiding this comment.
Double inputfile_ prefix will be produced
ParameterRenderComponent already prefixes the id with inputfile_ before passing it down.
Adding another inputfile_ here results in IDs such as inputfile_inputfile_myfield, breaking CSS selectors and automated tests.
Fix one side (wrapper or caller) to apply the prefix exactly once.
I recommend keeping the prefix logic in this wrapper (as above) and changing the call-site to pass the raw id. See the accompanying diff in parameterRenderComponent.
🤖 Prompt for AI Agents
In src/frontend/src/customization/components/custom-input-file.tsx around lines
18 to 29, the id prop is being prefixed with "inputfile_" although the caller
ParameterRenderComponent already adds this prefix, causing duplicate prefixes
like "inputfile_inputfile_". To fix this, remove the "inputfile_" prefix from
the id in the caller so that this wrapper receives the raw id and applies the
prefix exactly once, ensuring consistent and correct id values.
Cristhianzl
added
lgtm
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
Codecov Report✅ All modified and coverable lines are covered by tests. ❌ Your project status has failed because the head coverage (52.72%) is below the target coverage (60.00%). You can increase the head coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #9233 +/- ##
=======================================
Coverage 52.72% 52.72%
=======================================
Files 634 634
Lines 43605 43605
Branches 125 125
=======================================
Hits 22991 22991
Misses 20564 20564
Partials 50 50
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
* ✨ (frontend): introduce CustomInputFileComponent to customize file input component in parameter render component for better flexibility and customization. Remove InputFileComponent from parameter render component and replace it with CustomInputFileComponent. * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
|
With this feature, after version 1.6.0, when we enable the file option in the chat input area, the CustomInputFileComponent will kick in, right? That way, while sending the chat input’s ID with a tweak, we upload the file to Langflow and pass its ID here — in the background, the Docling system will process the file? Did I get that right? If so, how will we run the Docling process in the background? |
4 participants
This pull request refactors the
ParameterRenderComponentin the frontend codebase to introduce a customized file input component and streamline imports. The most significant changes include replacing theInputFileComponentwith a newCustomInputFileComponent, adding the implementation for the custom component, and cleaning up unused imports.Refactoring and Customization:
InputFileComponentwithCustomInputFileComponentin theParameterRenderComponentto allow for customized behavior in handling file inputs. (src/frontend/src/components/core/parameterRenderComponent/index.tsx, src/frontend/src/components/core/parameterRenderComponent/index.tsxL174-R173)CustomInputFileComponentimplementation that wraps the originalInputFileComponentand adds anidprefix for better identification. (src/frontend/src/customization/components/custom-input-file.tsx, src/frontend/src/customization/components/custom-input-file.tsxR1-R31)Code Cleanup:
InputFileComponentfromindex.tsxto avoid redundancy. (src/frontend/src/components/core/parameterRenderComponent/index.tsx, src/frontend/src/components/core/parameterRenderComponent/index.tsxL14)index.tsxby adding theCustomInputFileComponentimport and removing unnecessary dependencies. (src/frontend/src/components/core/parameterRenderComponent/index.tsx, src/frontend/src/components/core/parameterRenderComponent/index.tsxR25)Minor Adjustments:
connectcase handler by aligning the callback function for readability. (src/frontend/src/components/core/parameterRenderComponent/index.tsx, src/frontend/src/components/core/parameterRenderComponent/index.tsxL247-R246)Summary by CodeRabbit