feat: Add dynamic theming support to WatsonxAI icon#8935
Merged
Conversation
… prop value 📝 (index.tsx): Import useDarkStore hook and pass isdark prop to SvgWatsonxAI component
♻️ (index.tsx): Remove unnecessary console.log statement
Contributor
WalkthroughThe changes introduce dark mode support for the WatsonxAI icon component. The icon now dynamically adjusts its fill color based on the application's dark mode state, which is retrieved using a global store hook and passed as a prop to the SVG component. Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant WatsonxAiIcon
participant useDarkStore
participant SvgWatsonxAI
App ->> WatsonxAiIcon: Render
WatsonxAiIcon ->> useDarkStore: Get dark mode state
useDarkStore -->> WatsonxAiIcon: Return dark (boolean)
WatsonxAiIcon ->> SvgWatsonxAI: Render with isdark prop
SvgWatsonxAI ->> SvgWatsonxAI: Set fill color based on isdark
Suggested labels
✨ 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
|
dosubot
Bot
added
the
size:S
mfortman11
approved these changes
Jul 8, 2025
Contributor
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
github-actions
Bot
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx(1 hunks)src/frontend/src/icons/IBMWatsonx/index.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
`src/frontend/**/*.{ts,tsx}`: Use React 18 with TypeScript for all UI components and frontend logic.
src/frontend/**/*.{ts,tsx}: Use React 18 with TypeScript for all UI components and frontend logic.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
List of files the instruction was applied to:
src/frontend/src/icons/IBMWatsonx/index.tsx
`src/frontend/**/*.{ts,tsx,js,jsx,css,scss}`: Use Tailwind CSS for styling all frontend components.
src/frontend/**/*.{ts,tsx,js,jsx,css,scss}: Use Tailwind CSS for styling all frontend components.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
List of files the instruction was applied to:
src/frontend/src/icons/IBMWatsonx/index.tsxsrc/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx
`src/frontend/src/icons/**/*.{ts,tsx,js,jsx}`: Use Lucide React for icons in frontend components.
src/frontend/src/icons/**/*.{ts,tsx,js,jsx}: Use Lucide React for icons in frontend components.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
List of files the instruction was applied to:
src/frontend/src/icons/IBMWatsonx/index.tsxsrc/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx
`src/frontend/src/icons/*/*`: Create a new directory for your icon in `src/front...
src/frontend/src/icons/*/*: Create a new directory for your icon insrc/frontend/src/icons/YourIconName/and add your SVG as a React component (e.g.,YourIconName.jsx) that uses theisdarkprop to support both light and dark mode.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/icons.mdc)
List of files the instruction was applied to:
src/frontend/src/icons/IBMWatsonx/index.tsxsrc/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx
`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.
src/frontend/src/icons/*/index.tsx: Create anindex.tsxin your icon directory that exports your icon usingforwardRefand passes theisdarkprop.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/icons.mdc)
List of files the instruction was applied to:
src/frontend/src/icons/IBMWatsonx/index.tsx
`src/frontend/src/icons/*/*.jsx`: Always support both light and dark mode for custom icons by using the `isdark` prop in your SVG component.
src/frontend/src/icons/*/*.jsx: Always support both light and dark mode for custom icons by using theisdarkprop in your SVG component.
📄 Source: CodeRabbit Inference Engine (.cursor/rules/icons.mdc)
List of files the instruction was applied to:
src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/*.jsx : Always support both light and dark mode for custom icons by using the `isdark` prop in your SVG component.
Learnt from: CR
PR: langflow-ai/langflow#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.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Verify the icon appears correctly in the UI in both light and dark mode.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/* : 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`) that uses 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-06-30T14:40:29.510Z
Learning: All changes must be tested in both light and dark mode before committing.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: All changes must be tested in both light and dark mode to ensure consistent appearance and functionality.
Learnt from: CR
PR: langflow-ai/langflow#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).
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
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: Use a utility like 'stringToBool' to reliably interpret the 'isdark' prop when toggling SVG colors for light/dark mode support.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Dark mode support should be implemented using a dedicated Zustand store (e.g., useDarkStore), and toggled via a custom hook (e.g., useDarkMode) that exposes isDark and toggle.
src/frontend/src/icons/IBMWatsonx/index.tsx (13)
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/*.jsx : Always support both light and dark mode for custom icons by using the `isdark` prop in your SVG component.
Learnt from: CR
PR: langflow-ai/langflow#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.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/{components,hooks}/**/*.{ts,tsx} : Implement dark mode support in components and hooks where needed.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
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-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/* : 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`) that uses 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-06-23T12:46:42.048Z
Learning: Dark mode support should be implemented using a dedicated Zustand store (e.g., useDarkStore), and toggled via a custom hook (e.g., useDarkMode) that exposes isDark and toggle.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : Use Lucide React for icons in frontend components.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Verify the icon appears correctly in the UI in both light and dark mode.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: All changes must be tested in both light and dark mode before committing.
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: dolfim-ibm
PR: langflow-ai/langflow#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-06-23T12:46:52.420Z
Learning: Use a utility like 'stringToBool' to reliably interpret the 'isdark' prop when toggling SVG colors for light/dark mode support.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-30T14:40:29.510Z
Learning: Applies to src/frontend/src/components/**/*FlowGraph.tsx : Use React Flow for flow graph visualization components.
src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx (6)
Learnt from: CR
PR: langflow-ai/langflow#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.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/*.jsx : Always support both light and dark mode for custom icons by using the `isdark` prop in your SVG component.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-30T14:40:50.846Z
Learning: Applies to src/frontend/src/icons/*/* : 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`) that uses the `isdark` prop to support both light and dark mode.
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Use a utility like 'stringToBool' to reliably interpret the 'isdark' prop when toggling SVG colors for light/dark mode support.
Learnt from: dolfim-ibm
PR: langflow-ai/langflow#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-06-30T14:40:50.846Z
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.
🧬 Code Graph Analysis (2)
src/frontend/src/icons/IBMWatsonx/index.tsx (2)
src/frontend/src/stores/darkStore.ts (1)
useDarkStore(7-53)src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx (1)
SvgWatsonxAI(3-30)
src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx (1)
src/frontend/src/utils/utils.ts (1)
stringToBool(794-794)
🪛 Biome (1.9.4)
src/frontend/src/icons/IBMWatsonx/index.tsx
[error] 7-7: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
⏰ 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). (2)
- GitHub Check: Filter Paths
- GitHub Check: autofix
🔇 Additional comments (4)
src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx (2)
1-1: Import statement looks good.The import follows the established pattern for using utility functions in icon components.
5-7: Dark mode implementation follows best practices.The conditional fill color logic correctly implements dark mode support:
- Uses
stringToBoolutility as recommended in the coding guidelines- Proper color contrast: white (
#ffffff) for dark mode, dark (#0A0A0A) for light mode- Additional SVG attributes enhance the icon's rendering consistency
The PR summary mentions console.log statements for debugging, but they're not visible in the provided code. Please verify if these debug statements were removed or if they exist elsewhere.
src/frontend/src/icons/IBMWatsonx/index.tsx (2)
1-1: Dark mode store integration follows established pattern.The import correctly uses the
useDarkStorehook as recommended in the coding guidelines.
9-10: Dark mode state handling is implemented correctly.The implementation properly:
- Retrieves dark mode state from the store
- Converts boolean to string for the
isdarkprop- Passes the prop to the SVG component
This follows the established pattern and integrates well with the SVG component's conditional styling.
Comment on lines
5
to
7
| export const WatsonxAiIcon = forwardRef< | ||
| SVGSVGElement, | ||
| React.PropsWithChildren<{}> |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix the type definition to be more specific.
The static analysis warning about using {} as a type is valid. This should be more explicit.
Apply this diff to improve type safety:
-export const WatsonxAiIcon = forwardRef<
- SVGSVGElement,
- React.PropsWithChildren<{}>
->((props, ref) => {
+export const WatsonxAiIcon = forwardRef<
+ SVGSVGElement,
+ React.SVGProps<SVGSVGElement>
+>((props, ref) => {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export const WatsonxAiIcon = forwardRef< | |
| SVGSVGElement, | |
| React.PropsWithChildren<{}> | |
| export const WatsonxAiIcon = forwardRef< | |
| SVGSVGElement, | |
| React.SVGProps<SVGSVGElement> | |
| >((props, ref) => { | |
| // …rest of the implementation | |
| }); |
🧰 Tools
🪛 Biome (1.9.4)
[error] 7-7: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
🤖 Prompt for AI Agents
In src/frontend/src/icons/IBMWatsonx/index.tsx around lines 5 to 7, the type
definition uses an empty object type `{}`, which is too generic and causes
static analysis warnings. Replace `{}` with a more specific type that accurately
reflects the expected props for the component, such as
`React.SVGProps<SVGSVGElement>`, to improve type safety and clarity.
smatiolids
pushed a commit
to smatiolids/langflow-dev
that referenced
this pull request
Jul 10, 2025
* ✨ (WatsonxAI.jsx): Add support for dynamic fill color based on isdark prop value 📝 (index.tsx): Import useDarkStore hook and pass isdark prop to SvgWatsonxAI component * ✨ (WatsonxAI.jsx): Remove unnecessary console.log statement ♻️ (index.tsx): Remove unnecessary console.log statement
This was referenced Jul 11, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces support for dynamic theming in the
WatsonxAIicon component, allowing it to adapt its color based on the application's dark mode state. The changes involve integrating a dark mode store and modifying theWatsonxAIcomponent to use a conditional fill color.Dynamic theming updates:
useDarkStoreto retrieve the application's dark mode state and pass it as a prop to theWatsonxAIcomponent. Theisdarkvalue determines whether the icon should use a light or dark fill color. (src/frontend/src/icons/IBMWatsonx/index.tsx, src/frontend/src/icons/IBMWatsonx/index.tsxR1-R11)WatsonxAIcomponent to dynamically set thefillattribute of the SVG based on theisdarkprop using thestringToBoolutility function. (src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx, src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsxR1-R14)Code enhancements:
stringToBoolfunction to convert theisdarkstring value into a boolean for conditional rendering. (src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx, src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsxR1-R14)console.logstatements to log theisdarkprop and state for debugging purposes. (src/frontend/src/icons/IBMWatsonx/WatsonxAI.jsx, [1];src/frontend/src/icons/IBMWatsonx/index.tsx, [2]Summary by CodeRabbit