Skip to content

Conversation

@Uday-sidagana
Copy link
Contributor

@Uday-sidagana Uday-sidagana commented Nov 27, 2025

TL;DR: Updated Github Component's icon to support DarkTheme.

Backend: langflow/src/lfx/src/lfx/components/composio
Frontend: langflow/src/frontend/src/icons and lazyIconImports langflow/src/frontend/src/icons/lazyIconImports.ts

Summary by CodeRabbit

Release Notes

  • New Features
    • Added a new GitHub icon component with SVG rendering and configurable properties
    • Integrated icon into the lazy-loading system
    • Updated Composio GitHub component to reference the new icon

✏️ Tip: You can customize this high-level summary in your review settings.

@github-actions github-actions bot added the community Pull Request from an external contributor label Nov 27, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 27, 2025

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Adds a new GitHub Composio icon component with SVG rendering, ref-forwarding wrapper, lazy-loading registration, and backend component icon reference update. No logic changes; primarily configuration and UI component additions.

Changes

Cohort / File(s) Summary
Frontend GitHub Composio Icon Component
src/frontend/src/icons/GithubComposio/github.jsx, src/frontend/src/icons/GithubComposio/index.tsx
Introduces new SVG-based GitHub icon component with rounded dark background and white paths. Exports GithubIcon as forwardRef wrapper for ref forwarding and prop passthrough.
Icon Lazy-Loading Registration
src/frontend/src/icons/lazyIconImports.ts
Adds GithubComposio entry to lazyIconsMapping for dynamic icon import with resolution to GithubIcon default export.
Backend Component Icon Update
src/lfx/src/lfx/components/composio/github.amrom.workers.devposio.py
Updates ComposioGitHubAPIComponent icon attribute from "Github" to "GithubComposio".

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

  • SVG component structure and paths should be visually verified for correctness
  • Ref-forwarding pattern is consistent with existing conventions
  • Lazy-loading entry follows established pattern

Possibly related PRs

Suggested labels

enhancement, fast-track

Suggested reviewers

  • edwinjosechittilappilly

Pre-merge checks and finishing touches

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 2 warnings)
Check name Status Explanation Resolution
Test Coverage For New Implementations ❌ Error PR introduces new frontend components (SVG icon, wrapper) and backend modifications without any corresponding unit or integration tests. Add test files for new React components and backend changes to verify functionality, prop handling, and icon attribute updates.
Test Quality And Coverage ⚠️ Warning PR adds 4 files with new icon component and backend changes but includes no corresponding test files for any changes. Add comprehensive tests for frontend React icon component (SVG rendering, ref forwarding, isDark prop) and backend github.amrom.workers.devposio.py component attribute update.
Test File Naming And Structure ⚠️ Warning Pull request adds React components and backend configuration without any test files following required patterns (.test.tsx or test_.py), leaving critical functionality untested. Add test files: src/frontend/src/icons/GithubComposio/tests/github.test.tsx for SVG rendering and dark theme switching; src/lfx/src/lfx/components/composio/test_github.amrom.workers.devposio.py for backend configuration verification.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately captures the main change: creating and integrating a new Composio Github icon with dark theme support. The changes clearly show a new GithubComposio icon component and its integration across frontend and backend.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Excessive Mock Usage Warning ✅ Passed The custom check for excessive mock usage is not applicable to this pull request. The PR consists solely of four file modifications: two frontend icon component files, one frontend lazy-loading configuration file, and one backend configuration update. No test files are included in this PR, therefore there are no mocks to evaluate for excessive usage.

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@autofix-ci
Copy link
Contributor

autofix-ci bot commented Nov 27, 2025

Hi! I'm autofix logoautofix.ci, a bot that automatically fixes trivial issues such as code formatting in pull requests.

I would like to apply some automated changes to this pull request, but it looks like I don't have the necessary permissions to do so. To get this pull request into a mergeable state, please do one of the following two things:

  1. Allow edits by maintainers for your pull request, and then re-trigger CI (for example by pushing a new commit).
  2. Manually fix the issues identified for your pull request (see the GitHub Actions output for details on what I would like to change).

@github-actions github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Nov 27, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7524379 and 5068b0c.

⛔ Files ignored due to path filters (1)
  • src/frontend/src/icons/GithubComposio/github.svg is excluded by !**/*.svg
📒 Files selected for processing (4)
  • src/frontend/src/icons/GithubComposio/github.jsx (1 hunks)
  • src/frontend/src/icons/GithubComposio/index.tsx (1 hunks)
  • src/frontend/src/icons/lazyIconImports.ts (1 hunks)
  • src/lfx/src/lfx/components/composio/github.amrom.workers.devposio.py (1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
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/GithubComposio/github.jsx
  • src/frontend/src/icons/GithubComposio/index.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/GithubComposio/github.jsx
  • src/frontend/src/icons/GithubComposio/index.tsx
src/frontend/src/icons/*/*.{jsx,js}

📄 CodeRabbit inference engine (.cursor/rules/icons.mdc)

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.
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.

Files:

  • src/frontend/src/icons/GithubComposio/github.jsx
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/GithubComposio/index.tsx
  • src/frontend/src/icons/lazyIconImports.ts
src/frontend/src/icons/*/index.tsx

📄 CodeRabbit inference engine (.cursor/rules/icons.mdc)

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>>.

Files:

  • src/frontend/src/icons/GithubComposio/index.tsx
src/frontend/src/icons/lazyIconImports.ts

📄 CodeRabbit inference engine (.cursor/rules/icons.mdc)

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 })).

Files:

  • src/frontend/src/icons/lazyIconImports.ts
🧠 Learnings (13)
📓 Common learnings
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).
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.
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.
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>>`.
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/.
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
📚 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/GithubComposio/github.jsx
  • src/frontend/src/icons/GithubComposio/index.tsx
  • src/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/GithubComposio/github.jsx
  • src/frontend/src/icons/GithubComposio/index.tsx
  • src/frontend/src/icons/lazyIconImports.ts
📚 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/GithubComposio/github.jsx
  • src/frontend/src/icons/GithubComposio/index.tsx
  • src/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/*/*.{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/GithubComposio/github.jsx
  • src/frontend/src/icons/GithubComposio/index.tsx
📚 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/GithubComposio/github.jsx
  • src/frontend/src/icons/GithubComposio/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: 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/GithubComposio/github.jsx
  • src/frontend/src/icons/GithubComposio/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: 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/GithubComposio/github.jsx
  • src/frontend/src/icons/GithubComposio/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/GithubComposio/github.jsx
  • src/lfx/src/lfx/components/composio/github.amrom.workers.devposio.py
📚 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/components/**/*.{tsx,jsx} : Use React Flow for flow graph visualization with Node, Edge, Controls, and Background components

Applied to files:

  • src/frontend/src/icons/GithubComposio/github.jsx
  • src/frontend/src/icons/GithubComposio/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/components/**/*.{tsx,jsx} : Use TypeScript interfaces for defining component props in React components

Applied to files:

  • src/frontend/src/icons/GithubComposio/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/backend/**/*component*.py : In Python component classes, set the `icon` attribute to a string matching the desired icon name (e.g., `icon = "AstraDB"`). The string must match the frontend icon mapping exactly (case-sensitive).

Applied to files:

  • src/lfx/src/lfx/components/composio/github.amrom.workers.devposio.py
📚 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/lazyIconImports.ts
⏰ 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). (16)
  • GitHub Check: Test Docker Images / Test docker images
  • GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 5
  • GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 4
  • GitHub Check: Run Backend Tests / Integration Tests - Python 3.10
  • GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 1
  • GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 2
  • GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 3
  • GitHub Check: Lint Backend / Run Mypy (3.11)
  • GitHub Check: Run Backend Tests / LFX Tests - Python 3.10
  • GitHub Check: Lint Backend / Run Mypy (3.10)
  • GitHub Check: Run Frontend Unit Tests / Frontend Jest Unit Tests
  • GitHub Check: Lint Backend / Run Mypy (3.12)
  • GitHub Check: Lint Backend / Run Mypy (3.13)
  • GitHub Check: Run Frontend Tests / Determine Test Suites and Shard Distribution
  • GitHub Check: Test Starter Templates
  • GitHub Check: Update Component Index
🔇 Additional comments (3)
src/lfx/src/lfx/components/composio/github.amrom.workers.devposio.py (1)

6-6: Backend icon name now matches frontend mapping

Updating icon to "GithubComposio" aligns this component with the new frontend icon key and lazy-mapping entry; this is consistent with the icon naming rules.

Based on learnings, this keeps backend icon in sync with the frontend mapping.

src/frontend/src/icons/lazyIconImports.ts (1)

203-206: Lazy icon mapping for GithubComposio is correctly wired

The new GithubComposio entry uses the expected dynamic import pattern and points to mod.GithubIcon, matching the export from the icon’s index.tsx and the backend icon string.

As per coding guidelines, the key matches the backend icon name and uses the standard lazy import shape.

src/frontend/src/icons/GithubComposio/index.tsx (1)

1-9: Icon wrapper matches forwardRef + typing conventions

GithubIcon follows the standard icon wrapper pattern: forwardRef<SVGSVGElement, React.PropsWithChildren<{}>> and simple passthrough to the SVG component, so refs and props (including isDark) are forwarded correctly.

Based on learnings, this aligns with the established index.tsx icon wrapper structure.

Comment on lines +1 to +75
const Icon = (props) => (
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="250 250 500 500"
style={{ enableBackground: "new 0 0 1000 1000" }}
xmlSpace="preserve"
{...props}
>
<rect
x="0"
y="0"
width="1000"
height="1000"
rx="100"
ry="100"
fill="#111011"
/>
<g>
<path
fillRule="evenodd"
clipRule="evenodd"
fill="#FFFFFF"
d="M500,322.5c-100.5,0-182,81.5-182,182c0,80.4,52.1,148.6,124.5,172.7c9.1,1.7,12.4-3.9,12.4-8.8
c0-4.3-0.2-18.7-0.2-33.9c-50.6,11-61.3-21.5-61.3-21.5c-8.3-21-20.2-26.6-20.2-26.6c-16.5-11.3,1.2-11.1,1.2-11.1
c18.3,1.3,27.9,18.8,27.9,18.8c16.2,27.8,42.6,19.8,53,15.1c1.6-11.8,6.3-19.8,11.6-24.3c-40.4-4.6-82.9-20.2-82.9-89.9
c0-19.9,7.1-36.1,18.8-48.8c-1.9-4.6-8.1-23.1,1.8-48.2c0,0,15.3-4.9,50.1,18.7c14.5-4,30.1-6.1,45.6-6.1c15.5,0.1,31,2.1,45.6,6.1
c34.7-23.5,50-18.7,50-18.7c9.9,25.1,3.7,43.6,1.8,48.2c11.7,12.7,18.7,29,18.7,48.8c0,69.9-42.6,85.3-83.1,89.8
c6.5,5.6,12.3,16.7,12.3,33.7c0,24.3-0.2,43.9-0.2,49.9c0,4.8,3.3,10.5,12.5,8.7C629.9,653.1,682,584.9,682,504.5
C682,404,600.5,322.5,500,322.5z"
/>
<path
fill="#FFFFFF"
d="M386.9,583.8c-0.4,0.9-1.8,1.2-3.1,0.6c-1.3-0.6-2.1-1.8-1.6-2.7c0.4-0.9,1.8-1.2,3.1-0.6
C386.6,581.6,387.4,582.9,386.9,583.8L386.9,583.8z M384.7,582.1"
/>
<path
fill="#FFFFFF"
d="M394.3,592c-0.9,0.8-2.6,0.4-3.7-0.8c-1.2-1.3-1.4-3-0.5-3.8c0.9-0.8,2.5-0.4,3.7,0.8
C395,589.5,395.2,591.2,394.3,592L394.3,592z M392.6,590.2"
/>
<path
fill="#FFFFFF"
d="M401.5,602.5c-1.1,0.8-2.9,0.1-4.1-1.6c-1.1-1.6-1.1-3.6,0-4.3c1.1-0.8,2.9-0.1,4.1,1.5
C402.6,599.8,402.6,601.7,401.5,602.5L401.5,602.5z M401.5,602.5"
/>
<path
fill="#FFFFFF"
d="M411.3,612.6c-1,1.1-3.1,0.8-4.7-0.7c-1.6-1.5-2-3.5-1-4.6c1-1.1,3.1-0.8,4.7,0.7
C411.9,609.4,412.4,611.5,411.3,612.6L411.3,612.6z M411.3,612.6"
/>
<path
fill="#FFFFFF"
d="M424.9,618.5c-0.4,1.4-2.5,2.1-4.5,1.5c-2.1-0.6-3.4-2.3-3-3.7c0.4-1.4,2.5-2.1,4.6-1.5
C424,615.4,425.3,617.1,424.9,618.5L424.9,618.5z M424.9,618.5"
/>
<path
fill="#FFFFFF"
d="M439.8,619.6c0.1,1.5-1.7,2.7-3.9,2.8c-2.2,0.1-3.9-1.2-4-2.6c0-1.5,1.7-2.7,3.9-2.8
C438,616.9,439.8,618.1,439.8,619.6L439.8,619.6z M439.8,619.6"
/>
<path
fill="#FFFFFF"
d="M453.6,617.2c0.3,1.5-1.2,3-3.4,3.4c-2.1,0.4-4.1-0.5-4.3-2c-0.3-1.5,1.3-3,3.4-3.4
C451.4,614.9,453.4,615.7,453.6,617.2L453.6,617.2z M453.6,617.2"
/>
</g>
</svg>
);

export default Icon;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Use isDark prop to drive SVG colors for dark‑mode support

The SVG currently hardcodes fill colors and ignores props.isDark, so the icon does not actually react to theme changes as required by the icon/dark‑mode guidelines. Please wire the fills to isDark so the logo adapts between light and dark schemes. For example:

-const Icon = (props) => (
+const Icon = (props) => (
   <svg
@@
-    <rect
+    <rect
       x="0"
       y="0"
       width="1000"
       height="1000"
       rx="100"
       ry="100"
-      fill="#111011"
+      fill={props.isDark ? "#ffffff" : "#111011"}
     />
@@
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        fill="#FFFFFF"
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
-      <path
-        fill="#FFFFFF"
+      <path
+        fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
-      <path
-        fill="#FFFFFF"
+      <path
+        fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
-      <path
-        fill="#FFFFFF"
+      <path
+        fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
-      <path
-        fill="#FFFFFF"
+      <path
+        fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}
@@
-      <path
-        fill="#FFFFFF"
+      <path
+        fill={props.isDark ? "#0A0A0A" : "#FFFFFF"}

(Adjust exact colors as needed to match your design, but please base them on props.isDark.)

Based on learnings, SVG icon components should consume an isDark prop to switch between light and dark color schemes.

🤖 Prompt for AI Agents
In src/frontend/src/icons/GithubComposio/github.jsx lines 1-75, the SVG fills
are hardcoded and ignore props.isDark; update the component to derive fill
colors from props.isDark (e.g., const bg = props.isDark ? darkBgColor :
lightBgColor; const fg = props.isDark ? darkFgColor : lightFgColor) and replace
the hardcoded fill="#111011" on the rect and fill="#FFFFFF" on the paths with
these variables (use sensible defaults when isDark is undefined), ensuring you
continue to spread {...props} and do not remove existing attributes like viewBox
or style.

Copy link
Collaborator

@edwinjosechittilappilly edwinjosechittilappilly left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@github-actions github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Dec 8, 2025
@edwinjosechittilappilly edwinjosechittilappilly added this pull request to the merge queue Dec 8, 2025
Merged via the queue into langflow-ai:main with commit 101cbd0 Dec 8, 2025
26 of 28 checks passed
@edwinjosechittilappilly edwinjosechittilappilly deleted the Nov28UpdateGithubComponent branch December 8, 2025 18:06
Wallgau pushed a commit that referenced this pull request Dec 16, 2025
feat: updated Composio Github component

Co-authored-by: Edwin Jose <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

community Pull Request from an external contributor enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants