feat: Model Provider Input Patches for Design#11218
Conversation
- Add new IBM logo icon (IBM.jsx, ibm.svg) for generic IBM provider branding - Reorganize icon directory structure: move IBMWatsonx to IBM parent folder with watsonx subfolder - Export both WatsonxAiIcon and IBMIcon from consolidated IBM index - Update icon mapping in use-get-model-providers to support both 'IBM WatsonX' and 'IBM watsonx.ai' provider names - Standardize quote style from double to single quotes across use-get-model-providers.
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe changes consolidate IBM-related icons into a single module, add IBM provider mappings, and remove unused lazy icon imports. WatsonxAiIcon and a new IBMIcon are now exported from a unified IBM module; the IBMWatsonx module is cleared; and icon imports are updated accordingly. A minor layout adjustment adds full height to ModelProvidersContent. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 5❌ Failed checks (1 error, 2 warnings, 2 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
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. Comment |
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
github-actions
bot
added
enhancement
Codecov Report❌ Patch coverage is ❌ Your patch status has failed because the patch coverage (29.62%) is below the target coverage (40.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #11218 +/- ##
==========================================
- Coverage 34.25% 34.24% -0.02%
==========================================
Files 1409 1409
Lines 66892 66929 +37
Branches 9860 9877 +17
==========================================
+ Hits 22912 22917 +5
- Misses 42787 42811 +24
- Partials 1193 1201 +8
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
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
🤖 Fix all issues with AI Agents
In @src/frontend/src/icons/IBM/ibm/IBM.jsx:
- Around line 1-162: The component SvgIBM is a JSX file that needs to be
converted to TypeScript and add dark mode support: rename IBM.jsx to IBM.tsx,
change the component signature to accept a typed props interface including an
optional boolean isDark (e.g., interface Props { isDark?: boolean } ) and
replace all path fill="currentColor" (and any other fill values relying on
currentColor) with fill={props.isDark ? "#ffffff" : "#0A0A0A"} (or use the typed
prop name you add) so the SVG renders white in dark mode and dark in light mode;
ensure the component export remains default SvgIBM and update any usages/imports
if necessary.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
src/frontend/src/icons/IBM/ibm/ibm.svgis excluded by!**/*.svgsrc/frontend/src/icons/IBM/watsonx/watsonx-ai.svgis excluded by!**/*.svg
📒 Files selected for processing (8)
src/frontend/src/controllers/API/queries/models/use-get-model-providers.tssrc/frontend/src/icons/IBM/ibm/IBM.jsxsrc/frontend/src/icons/IBM/index.tsxsrc/frontend/src/icons/IBM/watsonx/WatsonxAI.jsxsrc/frontend/src/icons/IBMWatsonx/index.tsxsrc/frontend/src/icons/eagerIconImports.tssrc/frontend/src/icons/lazyIconImports.tssrc/frontend/src/modals/modelProviderModal/components/ModelProvidersContent.tsx
💤 Files with no reviewable changes (1)
- src/frontend/src/icons/IBMWatsonx/index.tsx
🧰 Additional context used
📓 Path-based instructions (5)
src/frontend/src/**/*.{tsx,jsx,css,scss}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
Use Tailwind CSS for styling
Files:
src/frontend/src/icons/IBM/ibm/IBM.jsxsrc/frontend/src/icons/IBM/index.tsxsrc/frontend/src/modals/modelProviderModal/components/ModelProvidersContent.tsx
src/frontend/src/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{tsx,jsx}: Implement dark mode support using the useDarkMode hook and dark store
Use Lucide React for icon components in the application
Files:
src/frontend/src/icons/IBM/ibm/IBM.jsxsrc/frontend/src/icons/IBM/index.tsxsrc/frontend/src/modals/modelProviderModal/components/ModelProvidersContent.tsx
src/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{ts,tsx}: Use React 18 with TypeScript for frontend development
Use Zustand for state management
Files:
src/frontend/src/icons/IBM/index.tsxsrc/frontend/src/controllers/API/queries/models/use-get-model-providers.tssrc/frontend/src/modals/modelProviderModal/components/ModelProvidersContent.tsxsrc/frontend/src/icons/eagerIconImports.tssrc/frontend/src/icons/lazyIconImports.ts
src/frontend/src/icons/*/index.tsx
📄 CodeRabbit inference engine (.cursor/rules/icons.mdc)
Create an
index.tsxfor each icon that exports the icon usingforwardRefand properly types it asReact.ForwardRefExoticComponent<React.PropsWithChildren<{}> & React.RefAttributes<SVGSVGElement>>.
Files:
src/frontend/src/icons/IBM/index.tsx
src/frontend/src/icons/lazyIconImports.ts
📄 CodeRabbit inference engine (.cursor/rules/icons.mdc)
Add icon entries to the
lazyIconsMappingobject insrc/frontend/src/icons/lazyIconImports.ts. The key must match the backend icon name exactly (case-sensitive) and use dynamic imports:IconName: () => import("@/icons/IconName").then((mod) => ({ default: mod.IconNameIcon })).
Files:
src/frontend/src/icons/lazyIconImports.ts
🧠 Learnings (12)
📚 Learning: 2025-11-24T19:46:57.920Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-11-24T19:46:57.920Z
Learning: Applies to src/frontend/src/icons/*/*.{jsx,js} : Create icon components in `src/frontend/src/icons/IconName/` directories. Add an SVG as a React component (e.g., `IconName.jsx`) that exports a functional component.
Applied to files:
src/frontend/src/icons/IBM/ibm/IBM.jsxsrc/frontend/src/icons/IBM/index.tsxsrc/frontend/src/icons/eagerIconImports.tssrc/frontend/src/icons/lazyIconImports.ts
📚 Learning: 2025-11-24T19:46:57.920Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-11-24T19:46:57.920Z
Learning: Applies to src/frontend/src/icons/*/index.tsx : Create an `index.tsx` for each icon that exports the icon using `forwardRef` and properly types it as `React.ForwardRefExoticComponent<React.PropsWithChildren<{}> & React.RefAttributes<SVGSVGElement>>`.
Applied to files:
src/frontend/src/icons/IBM/ibm/IBM.jsxsrc/frontend/src/icons/IBM/index.tsxsrc/frontend/src/icons/eagerIconImports.ts
📚 Learning: 2025-06-16T11:14:04.200Z
Learnt from: dolfim-ibm
Repo: langflow-ai/langflow 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/.
Applied to files:
src/frontend/src/icons/IBM/ibm/IBM.jsxsrc/frontend/src/icons/IBM/index.tsx
📚 Learning: 2025-11-24T19:46:45.790Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.790Z
Learning: Applies to src/frontend/src/**/*.{tsx,jsx} : Use Lucide React for icon components in the application
Applied to files:
src/frontend/src/icons/IBM/ibm/IBM.jsxsrc/frontend/src/icons/IBM/index.tsxsrc/frontend/src/icons/eagerIconImports.ts
📚 Learning: 2025-11-24T19:46:57.920Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-11-24T19:46:57.920Z
Learning: Applies to src/frontend/src/icons/*/*.{jsx,js} : In SVG components, use the `isDark` prop to switch between light and dark color schemes (e.g., `fill={props.isDark ? "#ffffff" : "#0A0A0A"}`). The `isDark` prop should be passed from the icon wrapper component.
Applied to files:
src/frontend/src/icons/IBM/ibm/IBM.jsxsrc/frontend/src/icons/IBM/index.tsxsrc/frontend/src/icons/eagerIconImports.ts
📚 Learning: 2025-06-23T12:46:52.420Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Custom SVG icon components in React should always support both light and dark mode by accepting an 'isdark' prop and adjusting colors accordingly.
Applied to files:
src/frontend/src/icons/IBM/ibm/IBM.jsxsrc/frontend/src/icons/IBM/index.tsx
📚 Learning: 2025-06-23T12:46:52.420Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: When implementing a new component icon in Langflow, ensure the icon name is clear, recognizable, and used consistently across both backend (Python 'icon' attribute) and frontend (React/TypeScript mapping).
Applied to files:
src/frontend/src/icons/IBM/ibm/IBM.jsxsrc/frontend/src/icons/IBM/index.tsxsrc/frontend/src/icons/eagerIconImports.ts
📚 Learning: 2025-06-23T12:46:52.420Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 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.
Applied to files:
src/frontend/src/icons/IBM/index.tsx
📚 Learning: 2025-11-24T19:46:57.920Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-11-24T19:46:57.920Z
Learning: Applies to src/frontend/src/icons/lazyIconImports.ts : Add icon entries to the `lazyIconsMapping` object in `src/frontend/src/icons/lazyIconImports.ts`. The key must match the backend icon name exactly (case-sensitive) and use dynamic imports: `IconName: () => import("@/icons/IconName").then((mod) => ({ default: mod.IconNameIcon }))`.
Applied to files:
src/frontend/src/icons/IBM/index.tsxsrc/frontend/src/icons/eagerIconImports.tssrc/frontend/src/icons/lazyIconImports.ts
📚 Learning: 2025-06-23T12:46:42.048Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 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.
Applied to files:
src/frontend/src/icons/IBM/index.tsx
📚 Learning: 2025-11-24T19:46:57.920Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-11-24T19:46:57.920Z
Learning: Use clear, recognizable icon names (e.g., `"AstraDB"`, `"Postgres"`, `"OpenAI"`). Always use the same icon name for the same service across backend and frontend.
Applied to files:
src/frontend/src/controllers/API/queries/models/use-get-model-providers.tssrc/frontend/src/icons/eagerIconImports.tssrc/frontend/src/icons/lazyIconImports.ts
📚 Learning: 2025-07-11T22:12:46.255Z
Learnt from: namastex888
Repo: langflow-ai/langflow PR: 9018
File: src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx:244-244
Timestamp: 2025-07-11T22:12:46.255Z
Learning: In src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx, the inconsistent showLineNumbers setting between Step 1 (false) and Step 2 (true) in the API modal is intentional to prevent breaking the modal height. Step 1 uses showLineNumbers={false} to save vertical space while Step 2 uses showLineNumbers={true} for better readability of longer code.
Applied to files:
src/frontend/src/modals/modelProviderModal/components/ModelProvidersContent.tsx
🧬 Code graph analysis (2)
src/frontend/src/icons/IBM/index.tsx (2)
src/frontend/src/icons/IBM/watsonx/WatsonxAI.jsx (1)
SvgWatsonxAI(1-28)src/frontend/src/icons/IBM/ibm/IBM.jsx (1)
SvgIBM(1-161)
src/frontend/src/icons/eagerIconImports.ts (1)
src/frontend/src/icons/IBM/index.tsx (1)
IBMIcon(12-16)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Validate PR
- GitHub Check: Test Docker Images / Test docker images
- GitHub Check: Run Frontend Unit Tests / Frontend Jest Unit Tests
- GitHub Check: Run Frontend Tests / Determine Test Suites and Shard Distribution
- GitHub Check: Test Starter Templates
🔇 Additional comments (6)
src/frontend/src/modals/modelProviderModal/components/ModelProvidersContent.tsx (1)
251-251: LGTM!The addition of
h-fullensures the container div takes full height, which aligns with the parent flex layout. This is a straightforward layout improvement.src/frontend/src/controllers/API/queries/models/use-get-model-providers.ts (1)
89-90: LGTM!The IBM provider mappings correctly route both "IBM WatsonX" and "IBM watsonx.ai" provider name variants to the "IBM" icon. This follows the established pattern and supports the newly centralized IBM icon module.
src/frontend/src/icons/eagerIconImports.ts (2)
55-55: LGTM!The import consolidation correctly brings both
IBMIconandWatsonxAiIconfrom the centralized IBM module, replacing the previous separate import path. This follows the reorganization to centralize IBM-related icon exports.
175-175: LGTM!The addition of
IBM: IBMIconto the eager icons mapping properly exposes the new IBM icon, enabling it to be referenced by the "IBM" key in provider icon lookups.src/frontend/src/icons/IBM/index.tsx (1)
1-16: LGTM!This centralized IBM icon module correctly follows the established icon pattern:
- Uses
forwardRefto properly forward refs to the underlying SVG elements- Types props as
React.PropsWithChildren<{}>per the codebase convention- Exports both
WatsonxAiIconandIBMIconfrom a single module- Properly spreads props and forwards refs to the underlying SVG components
Based on learnings, the implementation aligns with the established pattern across hundreds of icon files in the codebase.
src/frontend/src/icons/lazyIconImports.ts (1)
281-288: LGTM! Frontend icon mapping is correctly implemented.The lazy import entries follow the correct pattern and properly consolidate IBM-related icons into a single module. Both entries use the appropriate dynamic import structure with correctly matching keys and exports.
Verification confirmed:
- Frontend keys
"IBM"and"WatsonxAI"match the backend icon names (case-sensitive)- The
@/icons/IBMmodule correctly exports bothIBMIconandWatsonxAiIconwith proper React 18 forwardRef patterns- Dynamic import structure matches coding guidelines exactly
github-actions
bot
added
enhancement
- Update all WatsonX model metadata to use generic "IBM" icon instead of "WatsonxAI" - Standardize quote style from double to single quotes in ModelProvidersPage imports
github-actions
bot
added
enhancement
…elSelection - Change all double quotes to single quotes in ModelSelection component and tests - Update "LLM Models" label to "Language Models" for consistency - Standardize arrow function formatting across component
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
| // This provides a reliable fallback when backend filtering fails | ||
| if (enabledModelsData?.enabled_models) { | ||
| const providerModels = enabledModelsData.enabled_models[provider]; | ||
| if (providerModels && providerModels[option.name] === false) { |
There was a problem hiding this comment.
NIT:
if (providerModels && !providerModels[option.name]) {
}
Slight concise and clearer
There was a problem hiding this comment.
hey so quick heads up on that change, they're not the same.
=== false is a strict check. It only catches models that are explicitly turned off in the config. If a model just isn't listed at all, it comes back as undefined, which passes the check and the model shows up.
With !providerModels[option.name], you're doing a falsy check so undefined, null, empty string, all that stuff gets caught too. Basically any model that's not explicitly enabled would get filtered out.
so im gonna keep === false if the behavior's working right now... otherwise we might accidentally hide models that just aren't in the config yet.
|
|
||
| // Filter out disabled provider placeholders to get actual available models | ||
| const availableOptions = options.filter( | ||
| (opt: any) => !opt?.metadata?.is_disabled_provider, |
There was a problem hiding this comment.
could we try to define the type and not use any for reusability in the future?
There was a problem hiding this comment.
great suggestion, i can do.
| // Check if current model is still available | ||
| const isCurrentModelValid = | ||
| currentModelName && | ||
| availableOptions.some((opt: any) => opt.name === currentModelName); |
github-actions
bot
added
enhancement
…otes and add ModelOptionType - Convert double quotes to single quotes throughout use-refresh-model-inputs.ts and api/index.ts - Add ModelOptionType interface with name, id, icon, provider, and metadata properties - Update validateModelValue to use typed ModelOptionType instead of any for option filtering
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
3 participants
This pull request improves IBM WatsonX provider support and model provider icon handling, as well as enhances the Model Providers UI with better documentation linking and layout tweaks. The most important changes are summarized below:
IBM WatsonX Provider & Icon Improvements:
IBMicon instead of the previousWatsonxAIicon, ensuring consistency across the UI. [1] [2] [3]IBMSVG icon and updated icon import/export logic to support bothIBMandWatsonxAIicons from a single directory, consolidating icon management. [1] [2] [3] [4] [5] [6] [7]Model Provider Metadata & Documentation:
api_docs_urlfield to model provider metadata in both backend and frontend types, and populated this field for major providers (OpenAI, Anthropic, Google Generative AI, Ollama, IBM WatsonX). [1] [2] [3] [4]api_docs_urlfield.UI and Usability Improvements:
Other Icon Loading Adjustments:
IBMdirectory, and removed duplicate or outdated imports. [1] [2]These changes collectively improve the user experience, maintainability, and extensibility of model provider handling and UI presentation.