feat: add new Composio components

[Uday-sidagana]

Add new Composio components and icons

Backend changes:

• Added 15 new Composio components in src/lfx/src/lfx/components/composio/:
  • finage_composio.py
  • fixer_composio.py
  • flexisign_composio.py
  • freshdesk_composio.py
  • googleclassroom_composio.py
  • instagram_composio.py
  • jotform_composio.py
  • listennotes_composio.py
  • missive_composio.py
  • pandadoc_composio.py
• Updated __init__.py to include all new components in TYPE_CHECKING, _dynamic_imports, and all

Frontend changes:

• Added corresponding icons in src/frontend/src/icons/ (added few extra icons):
  • Excel, Finage, Fixer, Flexisign, Freshdesk, Classroom, Slides, Instagram, Jotform, Klipfolio, Listennotes, Missive, Neon, Newsapi, Pandadoc
• Updated lazyIconImports.ts to register all new icons for lazy loading

Summary by CodeRabbit

• New Features

  • Added new icons: Classroom, Excel, Finage, Fixer, Flexisign, Freshdesk, Pandadoc, Instagram, Jotform, Listennotes, Missive, Neon, Newsapi, OpenAI, Slides, and Klipfolio. These are reusable, ref-forwarding components for use across the app.
  • Introduced new Composio integrations visible in the components catalog: Finage, Fixer, Flexisign, Freshdesk, Google Classroom, Instagram, Jotform, Listennotes, Missive, and Pandadoc.

• Performance

  • Enabled lazy loading for the new icons to reduce initial load times and improve perceived performance.

[coderabbitai]

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 new SVG icon components and forwardRef wrappers for multiple services in the frontend, registers them in the lazy icon import map, and introduces corresponding Composio API component classes in Python with updated package exports and lazy-loading support.

Changes

Cohort / File(s)	Summary of Changes
Frontend SVG icon components (.jsx) src/frontend/src/icons/Classroom/classroom.jsx, src/frontend/src/icons/Excel/excel.jsx, src/frontend/src/icons/Finage/finage.jsx, src/frontend/src/icons/Fixer/fixer.jsx, src/frontend/src/icons/Flexisign/flexisign.jsx, src/frontend/src/icons/Freshdesk/freshdesk.jsx, src/frontend/src/icons/Instagram/instagram.jsx, src/frontend/src/icons/Jotform/jotform.jsx, src/frontend/src/icons/Klipfolio/klipfolio.jsx, src/frontend/src/icons/Listennotes/listennotes.jsx (if present), src/frontend/src/icons/Missive/missive.jsx, src/frontend/src/icons/Neon/neon.jsx, src/frontend/src/icons/Newsapi/newsapi.jsx, src/frontend/src/icons/OpenAI copy/openai.jsx, src/frontend/src/icons/Slides/slides.jsx	Added stateless React components rendering SVGs; each exports a default Icon that spreads props to the root <svg>.
Frontend icon forwardRef wrappers (.tsx) src/frontend/src/icons/Classroom/index.tsx, src/frontend/src/icons/Excel/index.tsx, src/frontend/src/icons/Finage/index.tsx, src/frontend/src/icons/Fixer/index.tsx, src/frontend/src/icons/Flexisign/index.tsx, src/frontend/src/icons/Freshdesk/index.tsx, src/frontend/src/icons/Instagram/index.tsx, src/frontend/src/icons/Jotform/index.tsx, src/frontend/src/icons/Klipfolio/index.tsx, src/frontend/src/icons/Listennotes/index.tsx, src/frontend/src/icons/Missive/index.tsx, src/frontend/src/icons/Neon/index.tsx, src/frontend/src/icons/Newsapi/index.tsx, src/frontend/src/icons/OpenAI copy/index.tsx, src/frontend/src/icons/Slides/index.tsx	Added named exports wrapping SVG components via React.forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>, forwarding ref and props.
Frontend lazy icon mapping src/frontend/src/icons/lazyIconImports.ts	Extended lazyIconsMapping with dynamic imports for: Klipfolio, Classroom, Excel, Finage, Fixer, Flexisign, Freshdesk, Pandadoc, Instagram, Jotform, Listennotes, Missive, Neon, Newsapi, OpenAICopy, Slides.
Composio package exports src/lfx/src/lfx/components/composio/__init__.py	Added imports, __all__ entries, and lazy __getattr__ wiring for new components: Finage, Fixer, Flexisign, Freshdesk, Google Classroom, Instagram, Jotform, Listennotes, Missive, Pandadoc.
Composio API component classes src/lfx/src/lfx/components/composio/finage_composio.py, .../fixer_composio.py, .../flexisign_composio.py, .../freshdesk_composio.py, .../googleclassroom_composio.py, .../instagram_composio.py, .../jotform_composio.py, .../listennotes_composio.py, .../missive_composio.py, .../pandadoc_composio.py	Added classes extending ComposioBaseComponent with metadata (display_name, icon, documentation, app_name) and a stub set_default_tools(self) method.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant UI as Consumer Component
  participant Map as lazyIconsMapping
  participant Loader as Dynamic Import
  participant Icon as *Icon (forwardRef)

  UI->>Map: request "Instagram"
  Map->>Loader: import("@/icons/Instagram")
  Loader-->>Map: resolve { InstagramIcon }
  Map-->>UI: return InstagramIcon
  UI->>Icon: render with props/ref
  Note over Icon: Props and ref forwarded to SVG

Loading

sequenceDiagram
  autonumber
  participant Dev as User Code
  participant Pkg as lfx.components.composio
  participant Attr as __getattr__
  participant Mod as Module Loader
  participant Class as *APIComponent

  Dev->>Pkg: from composio import ComposioFreshdeskAPIComponent
  Pkg->>Attr: resolve missing attribute
  Attr->>Mod: import freshdesk_composio
  Mod-->>Attr: ComposioFreshdeskAPIComponent
  Attr-->>Dev: return class reference
  Note right of Class: Extends ComposioBaseComponent

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• feat: add composio components #9560: Similar addition of Composio API components and frontend icon modules with lazy mappings.
• ref: Refactor vectorstore components structure #9486: Related UI updates introducing/aligning icon mappings and bundle entries.
• feat: update Composio components #8868: Adds and registers multiple Composio components and corresponding icon imports.

Suggested labels

enhancement, size:XXL, javascript, lgtm

Suggested reviewers

• edwinjosechittilappilly
• Cristhianzl
• ogabrielluiz

Pre-merge checks and finishing touches

❌ Failed checks (1 error, 2 warnings)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	I inspected the PR contents and found that all additions are new React icon components and new backend Composio component classes, yet the diff introduces no new or modified test files—no .test.ts (or similar) in the frontend and no test_*.py (or equivalent) in the backend. Because the new functionality lacks accompanying tests, the Test Coverage for New Implementations requirement is not met.	Please add appropriate tests covering the new frontend icon components (following the project’s *.test.ts convention) and the new backend Composio component classes (using the test_*.py naming pattern), ensuring the tests exercise the new behavior.
Test Quality And Coverage	⚠️ Warning	I inspected the PR changes and found only new SVG icon components on the frontend and new Composio component classes on the backend, with no accompanying test files added or modified. Searching the repository showed no pytest or Playwright suites referencing these new components, so the new functionality currently lacks any automated coverage validating their behavior. Because the instructions require tests covering main functionality, the absence of such tests means the implementation does not meet the Test Quality and Coverage criteria.	Please add tests that exercise the new Composio components (e.g., verifying metadata and default tool initialization via pytest) and consider adding frontend tests if applicable, ensuring they align with the project’s testing patterns, so this check can pass.
Test File Naming And Structure	⚠️ Warning	Inspection of the repository shows no new or existing tests covering the added Composio backend components or the numerous new frontend icon modules. There are no test_*.py files exercising the Python components, nor any *.test.ts(x) files targeting the React icons, so none of the required naming conventions, structure, or scenario coverage considerations are satisfied. Because the PR introduces functionality without accompanying tests, we cannot confirm adherence to the specified test file naming and structural requirements.	Please add appropriately named pytest files for the backend components (e.g., test_finage_composio.py) and Playwright-based *.test.tsx files for the new icons, ensuring they include clear test names, logical organization with setup/teardown where needed, and coverage of both positive and negative paths or edge cases.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title clearly and concisely indicates the primary backend change of adding new Composio components, using a conventional commit style prefix and specific terminology without generic or vague phrasing.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Excessive Mock Usage Warning	✅ Passed	No test files were modified or added in this pull request, so there is no new or altered usage of mocks to evaluate; consequently, there is no evidence of excessive mocking introduced by these changes.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 15

♻️ Duplicate comments (2)

src/lfx/src/lfx/components/composio/flexisign_composio.py (1)

10-11: Verify that the default tool selection behavior is appropriate.

The empty set_default_tools method means this component will use the base class default behavior, which returns the first 5 tools (limited by default_tools_limit). Please verify that selecting the first 5 tools is the intended behavior for Flexisign, or if specific default tools should be configured by populating self._default_tools.

src/lfx/src/lfx/components/composio/pandadoc_composio.py (1)

10-11: Verify that the default tool selection behavior is appropriate.

The empty set_default_tools method means this component will use the base class default behavior, which returns the first 5 tools (limited by default_tools_limit). Please verify that selecting the first 5 tools is the intended behavior for Pandadoc, or if specific default tools should be configured by populating self._default_tools.

🧹 Nitpick comments (12)

src/frontend/src/icons/OpenAI copy/openai.jsx (1)

1-12: Consider adding isDark prop support for theme switching.

The coding guidelines indicate that SVG components should use the isDark prop to support both light and dark mode. While the current implementation works, adding theme support would improve user experience.

As per coding guidelines

src/frontend/src/icons/Slides/slides.jsx (1)

1-21: Consider adding isDark prop support for theme switching.

Per the coding guidelines, SVG components should support the isDark prop for light and dark mode switching. Adding this would improve consistency with the project's theming requirements.

As per coding guidelines

src/frontend/src/icons/Classroom/classroom.jsx (1)

1-30: Consider adding isDark prop support for theme switching.

Per the coding guidelines, SVG components should support the isDark prop for light and dark mode switching.

As per coding guidelines

src/frontend/src/icons/Neon/neon.jsx (1)

1-78: Consider adding isDark prop support for theme switching.

Per the coding guidelines, SVG components should support the isDark prop for light and dark mode switching. This would enable the icon to adapt to different theme contexts.

As per coding guidelines

src/lfx/src/lfx/components/composio/jotform_composio.py (1)

10-11: Empty override is consistent: Jotform’s set_default_tools stub matches other Composio components; with no entries in self._default_tools, the base class will return the first default_tools_limit tools. Remove the override or populate self._default_tools only if custom defaults are needed.

src/lfx/src/lfx/components/composio/freshdesk_composio.py (1)

1-11: LGTM! Consider optional type annotation consistency.

The component implementation correctly follows the established pattern for Composio API components. The empty set_default_tools method is an intentional placeholder consistent with the base class design.

For improved type safety and consistency, consider adding type annotations to icon and app_name attributes:

 class ComposioFreshdeskAPIComponent(ComposioBaseComponent):
     display_name: str = "Freshdesk"
-    icon = "Freshdesk"
+    icon: str = "Freshdesk"
     documentation: str = "https://docs.composio.dev"
-    app_name = "freshdesk"
+    app_name: str = "freshdesk"

src/lfx/src/lfx/components/composio/finage_composio.py (1)

1-11: LGTM! Consider optional type annotation consistency.

The component implementation correctly follows the established pattern for Composio API components.

For improved type safety and consistency, consider adding type annotations to icon and app_name attributes:

 class ComposioFinageAPIComponent(ComposioBaseComponent):
     display_name: str = "Finage"
-    icon = "Finage"
+    icon: str = "Finage"
     documentation: str = "https://docs.composio.dev"
-    app_name = "finage"
+    app_name: str = "finage"

src/lfx/src/lfx/components/composio/listennotes_composio.py (1)

1-11: LGTM! Consider optional type annotation consistency.

The component implementation correctly follows the established pattern for Composio API components.

For improved type safety, consider adding type annotations:

 class ComposioListennotesAPIComponent(ComposioBaseComponent):
     display_name: str = "Listennotes"
-    icon = "Listennotes"
+    icon: str = "Listennotes"
     documentation: str = "https://docs.composio.dev"
-    app_name = "listennotes"
+    app_name: str = "listennotes"

src/lfx/src/lfx/components/composio/instagram_composio.py (1)

1-11: LGTM! Consider optional type annotation consistency.

The component implementation correctly follows the established pattern for Composio API components.

For improved type safety, consider adding type annotations:

 class ComposioInstagramAPIComponent(ComposioBaseComponent):
     display_name: str = "Instagram"
-    icon = "Instagram"
+    icon: str = "Instagram"
     documentation: str = "https://docs.composio.dev"
-    app_name = "instagram"
+    app_name: str = "instagram"

src/lfx/src/lfx/components/composio/missive_composio.py (1)

1-11: LGTM! Consider optional type annotation consistency.

The component implementation correctly follows the established pattern for Composio API components.

For improved type safety, consider adding type annotations:

 class ComposioMissiveAPIComponent(ComposioBaseComponent):
     display_name: str = "Missive"
-    icon = "Missive"
+    icon: str = "Missive"
     documentation: str = "https://docs.composio.dev"
-    app_name = "missive"
+    app_name: str = "missive"

src/lfx/src/lfx/components/composio/fixer_composio.py (1)

1-11: LGTM! Consider optional type annotation consistency.

The component implementation correctly follows the established pattern for Composio API components.

For improved type safety, consider adding type annotations:

 class ComposioFixerAPIComponent(ComposioBaseComponent):
     display_name: str = "Fixer"
-    icon = "Fixer"
+    icon: str = "Fixer"
     documentation: str = "https://docs.composio.dev"
-    app_name = "fixer"
+    app_name: str = "fixer"

src/lfx/src/lfx/components/composio/__init__.py (1)

98-120: LGTM! Consider alphabetical ordering for maintainability.

All new components are correctly added to the public API surface via __all__.

For improved maintainability, consider keeping __all__ entries in alphabetical order:

 __all__ = [
     "ComposioAPIComponent",
     "ComposioAirtableAPIComponent",
     "ComposioAsanaAPIComponent",
     "ComposioAttioAPIComponent",
     "ComposioCalendlyAPIComponent",
     "ComposioContentfulAPIComponent",
     "ComposioDiscordAPIComponent",
     "ComposioFigmaAPIComponent",
     "ComposioFinageAPIComponent",
     "ComposioFixerAPIComponent",
     "ComposioFlexisignAPIComponent",
     "ComposioFreshdeskAPIComponent",
     "ComposioGitHubAPIComponent",
     "ComposioGmailAPIComponent",
     "ComposioGoogleCalendarAPIComponent",
+    "ComposioGoogleclassroomAPIComponent",
     "ComposioGoogleDocsAPIComponent",
     "ComposioGoogleSheetsAPIComponent",
     "ComposioGoogleTasksAPIComponent",
-    "ComposioGoogleclassroomAPIComponent",
     "ComposioGooglemeetAPIComponent",
     "ComposioInstagramAPIComponent",
     "ComposioJotformAPIComponent",
     "ComposioKlaviyoAPIComponent",
     "ComposioLinearAPIComponent",
     "ComposioListennotesAPIComponent",
     "ComposioMiroAPIComponent",
     "ComposioMissiveAPIComponent",
     "ComposioNotionAPIComponent",
     "ComposioOneDriveAPIComponent",
     "ComposioOutlookAPIComponent",
     "ComposioPandadocAPIComponent",
     "ComposioRedditAPIComponent",
     "ComposioSlackAPIComponent",
     "ComposioSlackbotAPIComponent",
     "ComposioSupabaseAPIComponent",
     "ComposioTodoistAPIComponent",
     "ComposioWrikeAPIComponent",
     "ComposioYoutubeAPIComponent",
 ]

📜 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 eb7359c and de6d2b1.

⛔ Files ignored due to path filters (16)

• src/frontend/src/icons/Classroom/classroom.svg is excluded by !**/*.svg
• src/frontend/src/icons/Excel/excel.svg is excluded by !**/*.svg
• src/frontend/src/icons/Finage/finage.svg is excluded by !**/*.svg
• src/frontend/src/icons/Fixer/fixer.svg is excluded by !**/*.svg
• src/frontend/src/icons/Flexisign/flexisign.svg is excluded by !**/*.svg
• src/frontend/src/icons/Freshdesk/freshdesk.svg is excluded by !**/*.svg
• src/frontend/src/icons/Instagram/instagram.svg is excluded by !**/*.svg
• src/frontend/src/icons/Jotform/jotform.svg is excluded by !**/*.svg
• src/frontend/src/icons/Klipfolio/klipfolio.svg is excluded by !**/*.svg
• src/frontend/src/icons/Listennotes/listennotes.svg is excluded by !**/*.svg
• src/frontend/src/icons/Missive/missive.svg is excluded by !**/*.svg
• src/frontend/src/icons/Neon/neon.svg is excluded by !**/*.svg
• src/frontend/src/icons/Newsapi/newsapi.svg is excluded by !**/*.svg
• src/frontend/src/icons/OpenAI copy/openai.svg is excluded by !**/*.svg
• src/frontend/src/icons/Pandadoc/pandadoc.svg is excluded by !**/*.svg
• src/frontend/src/icons/Slides/slides.svg is excluded by !**/*.svg

📒 Files selected for processing (43)

• src/frontend/src/icons/Classroom/classroom.jsx (1 hunks)
• src/frontend/src/icons/Classroom/index.tsx (1 hunks)
• src/frontend/src/icons/Excel/excel.jsx (1 hunks)
• src/frontend/src/icons/Excel/index.tsx (1 hunks)
• src/frontend/src/icons/Finage/finage.jsx (1 hunks)
• src/frontend/src/icons/Finage/index.tsx (1 hunks)
• src/frontend/src/icons/Fixer/fixer.jsx (1 hunks)
• src/frontend/src/icons/Fixer/index.tsx (1 hunks)
• src/frontend/src/icons/Flexisign/flexisign.jsx (1 hunks)
• src/frontend/src/icons/Flexisign/index.tsx (1 hunks)
• src/frontend/src/icons/Freshdesk/freshdesk.jsx (1 hunks)
• src/frontend/src/icons/Freshdesk/index.tsx (1 hunks)
• src/frontend/src/icons/Instagram/index.tsx (1 hunks)
• src/frontend/src/icons/Instagram/instagram.jsx (1 hunks)
• src/frontend/src/icons/Jotform/index.tsx (1 hunks)
• src/frontend/src/icons/Jotform/jotform.jsx (1 hunks)
• src/frontend/src/icons/Klipfolio/index.tsx (1 hunks)
• src/frontend/src/icons/Klipfolio/klipfolio.jsx (1 hunks)
• src/frontend/src/icons/Listennotes/index.tsx (1 hunks)
• src/frontend/src/icons/Missive/index.tsx (1 hunks)
• src/frontend/src/icons/Missive/missive.jsx (1 hunks)
• src/frontend/src/icons/Neon/index.tsx (1 hunks)
• src/frontend/src/icons/Neon/neon.jsx (1 hunks)
• src/frontend/src/icons/Newsapi/index.tsx (1 hunks)
• src/frontend/src/icons/Newsapi/newsapi.jsx (1 hunks)
• src/frontend/src/icons/OpenAI copy/index.tsx (1 hunks)
• src/frontend/src/icons/OpenAI copy/openai.jsx (1 hunks)
• src/frontend/src/icons/Pandadoc/index.tsx (1 hunks)
• src/frontend/src/icons/Pandadoc/pandadoc.jsx (1 hunks)
• src/frontend/src/icons/Slides/index.tsx (1 hunks)
• src/frontend/src/icons/Slides/slides.jsx (1 hunks)
• src/frontend/src/icons/lazyIconImports.ts (9 hunks)
• src/lfx/src/lfx/components/composio/__init__.py (3 hunks)
• src/lfx/src/lfx/components/composio/finage_composio.py (1 hunks)
• src/lfx/src/lfx/components/composio/fixer_composio.py (1 hunks)
• src/lfx/src/lfx/components/composio/flexisign_composio.py (1 hunks)
• src/lfx/src/lfx/components/composio/freshdesk_composio.py (1 hunks)
• src/lfx/src/lfx/components/composio/googleclassroom_composio.py (1 hunks)
• src/lfx/src/lfx/components/composio/instagram_composio.py (1 hunks)
• src/lfx/src/lfx/components/composio/jotform_composio.py (1 hunks)
• src/lfx/src/lfx/components/composio/listennotes_composio.py (1 hunks)
• src/lfx/src/lfx/components/composio/missive_composio.py (1 hunks)
• src/lfx/src/lfx/components/composio/pandadoc_composio.py (1 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

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/icons/Fixer/fixer.jsx
• src/frontend/src/icons/Excel/excel.jsx
• src/frontend/src/icons/Jotform/jotform.jsx
• src/frontend/src/icons/Slides/index.tsx
• src/frontend/src/icons/Jotform/index.tsx
• src/frontend/src/icons/Instagram/index.tsx
• src/frontend/src/icons/Listennotes/index.tsx
• src/frontend/src/icons/Instagram/instagram.jsx
• src/frontend/src/icons/Flexisign/index.tsx
• src/frontend/src/icons/OpenAI copy/index.tsx
• src/frontend/src/icons/Klipfolio/index.tsx
• src/frontend/src/icons/Finage/index.tsx
• src/frontend/src/icons/Klipfolio/klipfolio.jsx
• src/frontend/src/icons/Fixer/index.tsx
• src/frontend/src/icons/Neon/neon.jsx
• src/frontend/src/icons/Pandadoc/pandadoc.jsx
• src/frontend/src/icons/Newsapi/index.tsx
• src/frontend/src/icons/OpenAI copy/openai.jsx
• src/frontend/src/icons/Freshdesk/freshdesk.jsx
• src/frontend/src/icons/Flexisign/flexisign.jsx
• src/frontend/src/icons/Newsapi/newsapi.jsx
• src/frontend/src/icons/Missive/missive.jsx
• src/frontend/src/icons/Finage/finage.jsx
• src/frontend/src/icons/Excel/index.tsx
• src/frontend/src/icons/Missive/index.tsx
• src/frontend/src/icons/Freshdesk/index.tsx
• src/frontend/src/icons/Slides/slides.jsx
• src/frontend/src/icons/Classroom/index.tsx
• src/frontend/src/icons/Classroom/classroom.jsx
• src/frontend/src/icons/Neon/index.tsx
• src/frontend/src/icons/Pandadoc/index.tsx
• src/frontend/src/icons/lazyIconImports.ts

src/frontend/src/icons/**/*.{ts,tsx,js,jsx}

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

Use Lucide React for icons in the frontend.

Files:

• src/frontend/src/icons/Fixer/fixer.jsx
• src/frontend/src/icons/Excel/excel.jsx
• src/frontend/src/icons/Jotform/jotform.jsx
• src/frontend/src/icons/Slides/index.tsx
• src/frontend/src/icons/Jotform/index.tsx
• src/frontend/src/icons/Instagram/index.tsx
• src/frontend/src/icons/Listennotes/index.tsx
• src/frontend/src/icons/Instagram/instagram.jsx
• src/frontend/src/icons/Flexisign/index.tsx
• src/frontend/src/icons/OpenAI copy/index.tsx
• src/frontend/src/icons/Klipfolio/index.tsx
• src/frontend/src/icons/Finage/index.tsx
• src/frontend/src/icons/Klipfolio/klipfolio.jsx
• src/frontend/src/icons/Fixer/index.tsx
• src/frontend/src/icons/Neon/neon.jsx
• src/frontend/src/icons/Pandadoc/pandadoc.jsx
• src/frontend/src/icons/Newsapi/index.tsx
• src/frontend/src/icons/OpenAI copy/openai.jsx
• src/frontend/src/icons/Freshdesk/freshdesk.jsx
• src/frontend/src/icons/Flexisign/flexisign.jsx
• src/frontend/src/icons/Newsapi/newsapi.jsx
• src/frontend/src/icons/Missive/missive.jsx
• src/frontend/src/icons/Finage/finage.jsx
• src/frontend/src/icons/Excel/index.tsx
• src/frontend/src/icons/Missive/index.tsx
• src/frontend/src/icons/Freshdesk/index.tsx
• src/frontend/src/icons/Slides/slides.jsx
• src/frontend/src/icons/Classroom/index.tsx
• src/frontend/src/icons/Classroom/classroom.jsx
• src/frontend/src/icons/Neon/index.tsx
• src/frontend/src/icons/Pandadoc/index.tsx
• src/frontend/src/icons/lazyIconImports.ts

src/frontend/src/icons/*/*.@(js|jsx|ts|tsx)

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

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.

Files:

• src/frontend/src/icons/Fixer/fixer.jsx
• src/frontend/src/icons/Excel/excel.jsx
• src/frontend/src/icons/Jotform/jotform.jsx
• src/frontend/src/icons/Slides/index.tsx
• src/frontend/src/icons/Jotform/index.tsx
• src/frontend/src/icons/Instagram/index.tsx
• src/frontend/src/icons/Listennotes/index.tsx
• src/frontend/src/icons/Instagram/instagram.jsx
• src/frontend/src/icons/Flexisign/index.tsx
• src/frontend/src/icons/OpenAI copy/index.tsx
• src/frontend/src/icons/Klipfolio/index.tsx
• src/frontend/src/icons/Finage/index.tsx
• src/frontend/src/icons/Klipfolio/klipfolio.jsx
• src/frontend/src/icons/Fixer/index.tsx
• src/frontend/src/icons/Neon/neon.jsx
• src/frontend/src/icons/Pandadoc/pandadoc.jsx
• src/frontend/src/icons/Newsapi/index.tsx
• src/frontend/src/icons/OpenAI copy/openai.jsx
• src/frontend/src/icons/Freshdesk/freshdesk.jsx
• src/frontend/src/icons/Flexisign/flexisign.jsx
• src/frontend/src/icons/Newsapi/newsapi.jsx
• src/frontend/src/icons/Missive/missive.jsx
• src/frontend/src/icons/Finage/finage.jsx
• src/frontend/src/icons/Excel/index.tsx
• src/frontend/src/icons/Missive/index.tsx
• src/frontend/src/icons/Freshdesk/index.tsx
• src/frontend/src/icons/Slides/slides.jsx
• src/frontend/src/icons/Classroom/index.tsx
• src/frontend/src/icons/Classroom/classroom.jsx
• src/frontend/src/icons/Neon/index.tsx
• src/frontend/src/icons/Pandadoc/index.tsx

src/frontend/src/icons/*/index.tsx

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

Create an index.tsx in your icon directory that exports your icon using forwardRef and passes the isDark prop.

Files:

• src/frontend/src/icons/Slides/index.tsx
• src/frontend/src/icons/Jotform/index.tsx
• src/frontend/src/icons/Instagram/index.tsx
• src/frontend/src/icons/Listennotes/index.tsx
• src/frontend/src/icons/Flexisign/index.tsx
• src/frontend/src/icons/OpenAI copy/index.tsx
• src/frontend/src/icons/Klipfolio/index.tsx
• src/frontend/src/icons/Finage/index.tsx
• src/frontend/src/icons/Fixer/index.tsx
• src/frontend/src/icons/Newsapi/index.tsx
• src/frontend/src/icons/Excel/index.tsx
• src/frontend/src/icons/Missive/index.tsx
• src/frontend/src/icons/Freshdesk/index.tsx
• src/frontend/src/icons/Classroom/index.tsx
• src/frontend/src/icons/Neon/index.tsx
• src/frontend/src/icons/Pandadoc/index.tsx

src/frontend/src/icons/lazyIconImports.ts

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

Add your icon to the lazyIconsMapping object in src/frontend/src/icons/lazyIconImports.ts with a key that matches the backend icon string exactly.

Files:

• src/frontend/src/icons/lazyIconImports.ts

🧠 Learnings (6)

📓 Common learnings

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/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/lazyIconImports.ts : Add your icon to the `lazyIconsMapping` object in `src/frontend/src/icons/lazyIconImports.ts` with a key that matches the backend icon string exactly.

📚 Learning: 2025-07-28T15:56:47.865Z

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.

Applied to files:

• src/frontend/src/icons/Fixer/fixer.jsx
• src/frontend/src/icons/Excel/excel.jsx
• src/frontend/src/icons/Jotform/jotform.jsx
• src/frontend/src/icons/Instagram/instagram.jsx
• src/frontend/src/icons/Klipfolio/klipfolio.jsx
• src/frontend/src/icons/Neon/neon.jsx
• src/frontend/src/icons/Pandadoc/pandadoc.jsx
• src/frontend/src/icons/OpenAI copy/openai.jsx
• src/frontend/src/icons/Freshdesk/freshdesk.jsx
• src/frontend/src/icons/Flexisign/flexisign.jsx
• src/frontend/src/icons/Newsapi/newsapi.jsx
• src/frontend/src/icons/Missive/missive.jsx
• src/frontend/src/icons/Finage/finage.jsx
• src/frontend/src/icons/Slides/slides.jsx
• src/frontend/src/icons/Neon/index.tsx

📚 Learning: 2025-06-16T11:14:04.200Z

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

Applied to files:

• src/frontend/src/icons/Fixer/fixer.jsx
• src/frontend/src/icons/Slides/index.tsx
• src/frontend/src/icons/Jotform/index.tsx
• src/frontend/src/icons/Instagram/index.tsx
• src/frontend/src/icons/Listennotes/index.tsx
• src/frontend/src/icons/Flexisign/index.tsx
• src/frontend/src/icons/OpenAI copy/index.tsx
• src/frontend/src/icons/Klipfolio/index.tsx
• src/frontend/src/icons/Finage/index.tsx
• src/frontend/src/icons/Klipfolio/klipfolio.jsx
• src/frontend/src/icons/Fixer/index.tsx
• src/frontend/src/icons/Pandadoc/pandadoc.jsx
• src/frontend/src/icons/Newsapi/index.tsx
• src/frontend/src/icons/Excel/index.tsx
• src/frontend/src/icons/Missive/index.tsx
• src/frontend/src/icons/Freshdesk/index.tsx
• src/frontend/src/icons/Classroom/index.tsx
• src/frontend/src/icons/Neon/index.tsx
• src/frontend/src/icons/Pandadoc/index.tsx

📚 Learning: 2025-06-23T12:46:52.420Z

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.

Applied to files:

• src/frontend/src/icons/Slides/index.tsx
• src/frontend/src/icons/Jotform/index.tsx
• src/frontend/src/icons/Instagram/index.tsx
• src/frontend/src/icons/Listennotes/index.tsx
• src/frontend/src/icons/Flexisign/index.tsx
• src/frontend/src/icons/OpenAI copy/index.tsx
• src/frontend/src/icons/Klipfolio/index.tsx
• src/frontend/src/icons/Finage/index.tsx
• src/frontend/src/icons/Klipfolio/klipfolio.jsx
• src/frontend/src/icons/Fixer/index.tsx
• src/frontend/src/icons/Newsapi/index.tsx
• src/frontend/src/icons/Excel/index.tsx
• src/frontend/src/icons/Missive/index.tsx
• src/frontend/src/icons/Freshdesk/index.tsx
• src/frontend/src/icons/Classroom/index.tsx
• src/frontend/src/icons/Neon/index.tsx
• src/frontend/src/icons/Pandadoc/index.tsx

📚 Learning: 2025-07-28T15:56:47.865Z

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.

Applied to files:

• src/frontend/src/icons/Slides/index.tsx
• src/frontend/src/icons/Jotform/index.tsx
• src/frontend/src/icons/Instagram/index.tsx
• src/frontend/src/icons/Listennotes/index.tsx
• src/frontend/src/icons/Flexisign/index.tsx
• src/frontend/src/icons/OpenAI copy/index.tsx
• src/frontend/src/icons/Klipfolio/index.tsx
• src/frontend/src/icons/Finage/index.tsx
• src/frontend/src/icons/Klipfolio/klipfolio.jsx
• src/frontend/src/icons/Fixer/index.tsx
• src/frontend/src/icons/Neon/neon.jsx
• src/frontend/src/icons/Newsapi/index.tsx
• src/frontend/src/icons/Excel/index.tsx
• src/frontend/src/icons/Missive/index.tsx
• src/frontend/src/icons/Freshdesk/index.tsx
• src/frontend/src/icons/Classroom/index.tsx
• src/frontend/src/icons/Neon/index.tsx
• src/frontend/src/icons/Pandadoc/index.tsx

📚 Learning: 2025-07-28T15:56:47.865Z

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/lazyIconImports.ts : Add your icon to the `lazyIconsMapping` object in `src/frontend/src/icons/lazyIconImports.ts` with a key that matches the backend icon string exactly.

Applied to files:

• src/frontend/src/icons/lazyIconImports.ts

🧬 Code graph analysis (8)

src/lfx/src/lfx/components/composio/googleclassroom_composio.py (2)

src/lfx/src/lfx/base/composio/composio_base.py (1)

• ComposioBaseComponent (32-2157)

src/lfx/src/lfx/components/composio/finage_composio.py (1)

• set_default_tools (10-11)

src/lfx/src/lfx/components/composio/__init__.py (10)

src/lfx/src/lfx/components/composio/finage_composio.py (1)

• ComposioFinageAPIComponent (4-11)

src/lfx/src/lfx/components/composio/fixer_composio.py (1)

• ComposioFixerAPIComponent (4-11)

src/lfx/src/lfx/components/composio/flexisign_composio.py (1)

• ComposioFlexisignAPIComponent (4-11)

src/lfx/src/lfx/components/composio/freshdesk_composio.py (1)

• ComposioFreshdeskAPIComponent (4-11)

src/lfx/src/lfx/components/composio/googleclassroom_composio.py (1)

• ComposioGoogleclassroomAPIComponent (4-11)

src/lfx/src/lfx/components/composio/instagram_composio.py (1)

• ComposioInstagramAPIComponent (4-11)

src/lfx/src/lfx/components/composio/jotform_composio.py (1)

• ComposioJotformAPIComponent (4-11)

src/lfx/src/lfx/components/composio/listennotes_composio.py (1)

• ComposioListennotesAPIComponent (4-11)

src/lfx/src/lfx/components/composio/missive_composio.py (1)

• ComposioMissiveAPIComponent (4-11)

src/lfx/src/lfx/components/composio/pandadoc_composio.py (1)

• ComposioPandadocAPIComponent (4-11)

src/lfx/src/lfx/components/composio/fixer_composio.py (1)

src/lfx/src/lfx/components/composio/finage_composio.py (1)

• set_default_tools (10-11)

src/lfx/src/lfx/components/composio/listennotes_composio.py (1)

src/lfx/src/lfx/components/composio/finage_composio.py (1)

• set_default_tools (10-11)

src/lfx/src/lfx/components/composio/missive_composio.py (1)

src/lfx/src/lfx/components/composio/finage_composio.py (1)

• set_default_tools (10-11)

src/lfx/src/lfx/components/composio/pandadoc_composio.py (1)

src/lfx/src/lfx/base/composio/composio_base.py (1)

• ComposioBaseComponent (32-2157)

src/lfx/src/lfx/components/composio/freshdesk_composio.py (1)

src/lfx/src/lfx/base/composio/composio_base.py (1)

• ComposioBaseComponent (32-2157)

src/frontend/src/icons/Slides/slides.jsx (6)

src/frontend/src/icons/Classroom/classroom.jsx (1)

• Icon (1-29)

src/frontend/src/icons/Excel/excel.jsx (1)

• Icon (1-34)

src/frontend/src/icons/Finage/finage.jsx (1)

• Icon (1-27)

src/frontend/src/icons/Fixer/fixer.jsx (1)

• Icon (1-44)

src/frontend/src/icons/Freshdesk/freshdesk.jsx (1)

• Icon (1-12)

src/frontend/src/icons/OpenAI copy/openai.jsx (1)

• Icon (1-11)

⏰ 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). (4)

• GitHub Check: Run Frontend Tests / merge-reports
• GitHub Check: Run Frontend Unit Tests / Frontend Jest Unit Tests
• GitHub Check: Test Starter Templates
• GitHub Check: Update Starter Projects

🔇 Additional comments (18)

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

1-9: LGTM!

The forwardRef wrapper follows the established pattern correctly, uses the proper type signature React.PropsWithChildren<{}>, and correctly forwards both ref and props to the underlying SVG component.

Based on learnings

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

1-9: LGTM!

The forwardRef wrapper correctly implements the established pattern with proper type signature and ref/props forwarding.

Based on learnings

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

1-9: LGTM!

The forwardRef wrapper is correctly implemented following the established pattern.

Based on learnings

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

1-8: LGTM!

The forwardRef wrapper correctly implements the established pattern with proper type signature and ref/props forwarding.

Based on learnings

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

1-9: LGTM! ForwardRef pattern correctly implemented.

The forwardRef wrapper follows the established Langflow pattern with React.PropsWithChildren<{}> and properly forwards refs and props to the underlying SVG component.

Based on learnings

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

1-9: LGTM! ForwardRef pattern correctly implemented.

The forwardRef wrapper follows the established Langflow pattern and properly forwards refs and props to the underlying SVG component.

Based on learnings

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

1-8: LGTM! ForwardRef pattern correctly implemented.

The forwardRef wrapper follows the established Langflow pattern and properly forwards refs and props to the underlying SVG component.

Based on learnings

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

1-9: LGTM! ForwardRef pattern correctly implemented.

The forwardRef wrapper follows the established Langflow pattern and properly forwards refs and props to the underlying SVG component.

Based on learnings

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

1-9: LGTM! ForwardRef pattern correctly implemented.

The forwardRef wrapper follows the established Langflow pattern and properly forwards refs and props to the underlying SVG component.

Based on learnings

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

1-9: LGTM!

The forwardRef wrapper implementation follows the established codebase pattern correctly, using React.PropsWithChildren<{}> as the prop type and properly forwarding the ref and props to the underlying SVG component.

Based on learnings

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

1-9: LGTM!

The forwardRef wrapper implementation follows the established codebase pattern correctly, using React.PropsWithChildren<{}> as the prop type and properly forwarding the ref and props to the underlying SVG component.

Based on learnings

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

1-9: LGTM!

The forwardRef wrapper implementation follows the established codebase pattern correctly, using React.PropsWithChildren<{}> as the prop type and properly forwarding the ref and props to the underlying SVG component.

Based on learnings

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

1-8: LGTM!

The forwardRef wrapper implementation follows the established codebase pattern correctly, using React.PropsWithChildren<{}> as the prop type and properly forwarding the ref and props to the underlying SVG component.

Based on learnings

src/lfx/src/lfx/components/composio/__init__.py (2)

16-38: LGTM! TYPE_CHECKING imports correctly added.

All new Composio component imports are properly added within the TYPE_CHECKING block for lazy loading support.

---

76-85: LGTM! Dynamic import mappings correctly configured.

The lazy loading mappings for all new components are properly configured, enabling on-demand imports of the new Composio API components.

src/lfx/src/lfx/components/composio/googleclassroom_composio.py (1)

1-11: Run the following to compare naming across all Composio components:

#!/bin/bash
rg -n 'app_name\s*=' --type=py src/lfx/src/lfx/components/composio

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

32-33: LGTM! New icon mappings follow the established pattern.

All 15 new icon mappings (Klipfolio, Classroom, Excel, Finage, Fixer, Flexisign, Freshdesk, Pandadoc, Instagram, Jotform, Listennotes, Missive, Neon, Newsapi, Slides) correctly implement the lazy-loading pattern with consistent naming conventions and structure.

Also applies to: 101-102, 126-127, 134-135, 136-137, 138-139, 142-143, 174-175, 226-227, 234-235, 244-247, 259-260, 267-267, 268-269, 348-349

---

32-33: Verify lazyIconsMapping keys for Composio API components

Mapping keys must exactly match their backend icon attributes:

• Classroom
• Jotform
• Missive
• Listennotes
• Pandadoc
• Instagram
• Freshdesk
• Flexisign
• Fixer
• Finage
• Wrike
• Supabase
• Reddit
• Slackbot key should be “Slack” (backend uses icon = "Slack")

⛔ Skipped due to learnings

Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: The frontend icon mapping key (in 'lazyIconsMapping') must match the backend 'icon' attribute string exactly, including case sensitivity, to ensure correct icon rendering.

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/lazyIconImports.ts : Add your icon to the `lazyIconsMapping` object in `src/frontend/src/icons/lazyIconImports.ts` with a key that matches the backend icon string exactly.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Add props spread to the SVG element.

The SVG element is missing the {...props} spread, which prevents passing any props (className, style, onClick, etc.) to the icon. All other icon SVG components in the codebase include this spread.

Apply this diff to fix:

 const Icon = (props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 48 48"
     width="20px"
     height="20px"
+    {...props}
   >

📝 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

	const Icon = (props) => (
	<svg
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 48 48"
	width="20px"
	height="20px"
	>
	const Icon = (props) => (
	<svg
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 48 48"
	width="20px"
	height="20px"
	{...props}
	>

🤖 Prompt for AI Agents

In src/frontend/src/icons/Classroom/classroom.jsx around lines 1 to 7, the SVG
element is missing the props spread which prevents passing className, style,
onClick, and other props to the icon; update the SVG opening tag to include
{...props} so incoming props are forwarded (e.g. <svg xmlns="..." viewBox="..."
width="20px" height="20px" {...props}>), ensuring existing attributes remain and
no prop names are duplicated.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Missing isDark prop support for theme compatibility.

The SVG icon component must accept and use the isDark prop to support both light and dark mode, but this implementation has multiple hardcoded fill colors and doesn't handle theme switching.

As per coding guidelines

Consider destructuring isDark from props and conditionally adjusting colors. Given the Excel icon's multi-color design, you may want to create theme-appropriate color palettes:

-const Icon = (props) => (
+const Icon = ({ isDark, ...props }) => {
+  const colors = isDark 
+    ? { primary: '#10793f', secondary: '#0d471f', accent: '#0a5c30', highlight: '#129652' }
+    : { primary: '#169154', secondary: '#18482a', accent: '#0c8045', highlight: '#17472a' };
+  
+  return (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
     <path
-      fill="#169154"
+      fill={colors.primary}
       d="M29,6H15.744C14.781,6,14,6.781,14,7.744v7.259h15V6z"
     />
+    {/* Apply similar changes to other path elements */}
   </svg>
- );
+ );
+};

Note: Adjust the color mappings based on your theme requirements.

📝 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

	const Icon = (props) => (
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
	<path
	fill="#169154"
	d="M29,6H15.744C14.781,6,14,6.781,14,7.744v7.259h15V6z"
	/>
	<path
	fill="#18482a"
	d="M14,33.054v7.202C14,41.219,14.781,42,15.743,42H29v-8.946H14z"
	/>
	<path fill="#0c8045" d="M14 15.003H29V24.005000000000003H14z" />
	<path fill="#17472a" d="M14 24.005H29V33.055H14z" />
	<g>
	<path
	fill="#29c27f"
	d="M42.256,6H29v9.003h15V7.744C44,6.781,43.219,6,42.256,6z"
	/>
	<path
	fill="#27663f"
	d="M29,33.054V42h13.257C43.219,42,44,41.219,44,40.257v-7.202H29z"
	/>
	<path fill="#19ac65" d="M29 15.003H44V24.005000000000003H29z" />
	<path fill="#129652" d="M29 24.005H44V33.055H29z" />
	</g>
	<path
	fill="#0c7238"
	d="M22.319,34H5.681C4.753,34,4,33.247,4,32.319V15.681C4,14.753,4.753,14,5.681,14h16.638 C23.247,14,24,14.753,24,15.681v16.638C24,33.247,23.247,34,22.319,34z"
	/>
	<path
	fill="#fff"
	d="M9.807 19L12.193 19 14.129 22.754 16.175 19 18.404 19 15.333 24 18.474 29 16.123 29 14.013 25.07 11.912 29 9.526 29 12.719 23.982z"
	/>
	</svg>
	);
	export default Icon;
	const Icon = ({ isDark, ...props }) => {
	const colors = isDark
	? { primary: '#10793f', secondary: '#0d471f', accent: '#0a5c30', highlight: '#129652' }
	: { primary: '#169154', secondary: '#18482a', accent: '#0c8045', highlight: '#17472a' };
	return (
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>
	<path
	fill={colors.primary}
	d="M29,6H15.744C14.781,6,14,6.781,14,7.744v7.259h15V6z"
	/>
	{/* Apply similar changes to other path elements */}
	<path
	fill="#18482a"
	d="M14,33.054v7.202C14,41.219,14.781,42,15.743,42H29v-8.946H14z"
	/>
	<path
	fill="#0c8045"
	d="M14 15.003H29V24.005000000000003H14z"
	/>
	<path
	fill="#17472a"
	d="M14 24.005H29V33.055H14z"
	/>
	<g>
	<path
	fill="#29c27f"
	d="M42.256,6H29v9.003h15V7.744C44,6.781,43.219,6,42.256,6z"
	/>
	<path
	fill="#27663f"
	d="M29,33.054V42h13.257C43.219,42,44,41.219,44,40.257v-7.202H29z"
	/>
	<path
	fill="#19ac65"
	d="M29 15.003H44V24.005000000000003H29z"
	/>
	<path
	fill="#129652"
	d="M29 24.005H44V33.055H29z"
	/>
	</g>
	<path
	fill="#0c7238"
	d="M22.319,34H5.681C4.753,34,4,33.247,4,32.319V15.681C4,14.753,4.753,14,5.681,14h16.638 C23.247,14,24,14.753,24,15.681v16.638C24,33.247,23.247,34,22.319,34z"
	/>
	<path
	fill="#fff"
	d="M9.807 19L12.193 19 14.129 22.754 16.175 19 18.404 19 15.333 24 18.474 29 16.123 29 14.013 25.07 11.912 29 9.526 29 12.719 23.982z"
	/>
	</svg>
	);
	};
	export default Icon;

🤖 Prompt for AI Agents

In src/frontend/src/icons/Excel/excel.jsx around lines 1 to 35, the component
uses hardcoded fill colors and doesn't accept an isDark prop; update the
component to destructure isDark (default false) from props, define two color
palettes (light and dark) mapping each of the current fill values to
theme-appropriate colors, replace the hardcoded fill attributes with those
palette variables, and keep spreading remaining props onto the svg so consumers
can still pass className/style; ensure palettes cover every filled path and fall
back to the original color if a mapping is missing.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Respect the isDark prop for theme-aware fills.

The component only spreads props and leaves fixed fills, so it can’t switch palettes in dark mode. Please update it to destructure { isDark, ...rest }, choose fills based on isDark, and pass rest to <svg>, matching our icon guideline.
As per coding guidelines

🤖 Prompt for AI Agents

In src/frontend/src/icons/Finage/finage.jsx lines 1-28, the SVG uses hard-coded
fill colors and spreads all props, so it ignores theme; destructure the props as
({ isDark, ...rest }), compute fill colors (e.g., const fill = isDark ?
'<darkColor>' : '#444CE7' and any secondary fills similarly), replace the
literal fill attributes on each <path> with those computed fill variables, and
pass rest to the <svg> element instead of spreading props; preserve existing
viewBox and other SVG attributes and keep the component export as-is.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Ensure Fixer icon honors the isDark theme prop.

The SVG never consumes isDark, so its palette is frozen and breaks dark‑mode support mandated for icons. Please destructure isDark and drive your fills/strokes from it (e.g., via a palette map or CSS vars) so both themes render correctly. Sample start:

-const Icon = (props) => (
+const Icon = ({ isDark = false, ...props }) => (
...
-      fill="#0152CC"
+      fill={isDark ? "#0E1B3A" : "#0152CC"}

Apply the same pattern to the remaining paths.

Based on learnings

📝 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

	const Icon = (props) => (
	<svg
	version="1.1"
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 152 152"
	{...props}
	>
	<path
	d="M0 0 C50.16 0 100.32 0 152 0 C152 50.16 152 100.32 152 152 C101.84 152 51.68 152 0 152 C0 101.84 0 51.68 0 0 Z "
	fill="#0152CC"
	transform="translate(0,0)"
	/>
	<path
	d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.908125 21.32 5.81625 22 8.8125 C22.20882812 9.72491455 22.41765625 10.6373291 22.6328125 11.57739258 C22.87644531 12.66250122 22.87644531 12.66250122 23.125 13.76953125 C23.29257813 14.50792236 23.46015625 15.24631348 23.6328125 16.00708008 C24 18 24 18 24 21 C14.76 21 5.52 21 -4 21 C-3.16746869 13.50721821 -1.90487575 7.20539959 0 0 Z "
	fill="#F5F8FD"
	transform="translate(86,65)"
	/>
	<path
	d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.7225 21.32 5.445 22 8.25 C22.31324219 9.52665527 22.31324219 9.52665527 22.6328125 10.82910156 C22.79523438 11.5094043 22.95765625 12.18970703 23.125 12.890625 C23.29257813 13.58188477 23.46015625 14.27314453 23.6328125 14.98535156 C24 17 24 17 24 21 C14.76 21 5.52 21 -4 21 C-3.09260756 13.74086045 -1.69882911 7.09076497 0 0 Z "
	fill="#F5F8FD"
	transform="translate(50,65)"
	/>
	<path
	d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.908125 21.32 5.81625 22 8.8125 C22.20882812 9.72491455 22.41765625 10.6373291 22.6328125 11.57739258 C22.87644531 12.66250122 22.87644531 12.66250122 23.125 13.76953125 C23.29257813 14.50792236 23.46015625 15.24631348 23.6328125 16.00708008 C24 18 24 18 24 21 C14.76 21 5.52 21 -4 21 C-2 8 -2 8 0 0 Z "
	fill="#F9FBFD"
	transform="translate(68,38)"
	/>
	<path
	d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.743125 21.32 5.48625 22 8.3125 C22.20882812 9.17270752 22.41765625 10.03291504 22.6328125 10.91918945 C22.87644531 11.94338989 22.87644531 11.94338989 23.125 12.98828125 C23.29257813 13.68477783 23.46015625 14.38127441 23.6328125 15.09887695 C24 17 24 17 24 20 C14.76 20 5.52 20 -4 20 C-2 7 -2 7 0 0 Z "
	fill="#FCFDFE"
	transform="translate(101,92)"
	/>
	<path
	d="M0 0 C6.6 0 13.2 0 20 0 C21.7778683 6.80227871 23.12251559 12.98012474 24 20 C14.76 20 5.52 20 -4 20 C-2.68 13.4 -1.36 6.8 0 0 Z "
	fill="#FCFDFE"
	transform="translate(35,92)"
	/>
	<path
	d="M0 0 C6.6 0 13.2 0 20 0 C21.32 6.6 22.64 13.2 24 20 C14.76 20 5.52 20 -4 20 C-2.68 13.4 -1.36 6.8 0 0 Z "
	fill="#FDFDFE"
	transform="translate(68,92)"
	/>
	</svg>
	);
	const Icon = ({ isDark = false, ...props }) => (
	<svg
	version="1.1"
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 152 152"
	{...props}
	>
	<path
	d="M0 0 C50.16 0 100.32 0 152 0 C152 50.16 152 100.32 152 152 C101.84 152 51.68 152 0 152 C0 101.84 0 51.68 0 0 Z "
	fill={isDark ? "#0E1B3A" : "#0152CC"}
	transform="translate(0,0)"
	/>
	<path
	d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.908125 21.32 5.81625 22 8.8125 C22.20882812 9.72491455 22.41765625 10.6373291 22.6328125 11.57739258 C22.87644531 12.66250122 22.87644531 12.66250122 23.125 13.76953125 C23.29257813 14.50792236 23.46015625 15.24631348 23.6328125 16.00708008 C24 18 24 18 24 21 C14.76 21 5.52 21 -4 21 C-3.16746869 13.50721821 -1.90487575 7.20539959 0 0 Z "
	fill="#F5F8FD"
	transform="translate(86,65)"
	/>
	<path
	d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.7225 21.32 5.445 22 8.25 C22.31324219 9.52665527 22.31324219 9.52665527 22.6328125 10.82910156 C22.79523438 11.5094043 22.95765625 12.18970703 23.125 12.890625 C23.29257813 13.58188477 23.46015625 14.27314453 23.6328125 14.98535156 C24 17 24 17 24 21 C14.76 21 5.52 21 -4 21 C-3.09260756 13.74086045 -1.69882911 7.09076497 0 0 Z "
	fill="#F5F8FD"
	transform="translate(50,65)"
	/>
	<path
	d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.908125 21.32 5.81625 22 8.8125 C22.20882812 9.72491455 22.41765625 10.6373291 22.6328125 11.57739258 C22.87644531 12.66250122 22.87644531 12.66250122 23.125 13.76953125 C23.29257813 14.50792236 23.46015625 15.24631348 23.6328125 16.00708008 C24 18 24 18 24 21 C14.76 21 5.52 21 -4 21 C-2 8 -2 8 0 0 Z "
	fill="#F9FBFD"
	transform="translate(68,38)"
	/>
	<path
	d="M0 0 C6.6 0 13.2 0 20 0 C20.66 2.743125 21.32 5.48625 22 8.3125 C22.20882812 9.17270752 22.41765625 10.03291504 22.6328125 10.91918945 C22.87644531 11.94338989 22.87644531 11.94338989 23.125 12.98828125 C23.29257813 13.68477783 23.46015625 14.38127441 23.6328125 15.09887695 C24 17 24 17 24 20 C14.76 20 5.52 20 -4 20 C-2 7 -2 7 0 0 Z "
	fill="#FCFDFE"
	transform="translate(101,92)"
	/>
	<path
	d="M0 0 C6.6 0 13.2 0 20 0 C21.7778683 6.80227871 23.12251559 12.98012474 24 20 C14.76 20 5.52 20 -4 20 C-2.68 13.4 -1.36 6.8 0 0 Z "
	fill="#FCFDFE"
	transform="translate(35,92)"
	/>
	<path
	d="M0 0 C6.6 0 13.2 0 20 0 C21.32 6.6 22.64 13.2 24 20 C14.76 20 5.52 20 -4 20 C-2.68 13.4 -1.36 6.8 0 0 Z "
	fill="#FDFDFE"
	transform="translate(68,92)"
	/>
	</svg>
	);

🤖 Prompt for AI Agents

In src/frontend/src/icons/Fixer/fixer.jsx lines 1-44, the component never reads
the isDark prop so the SVG uses hardcoded fills and won't respond to theme;
destructure isDark from props (e.g., const Icon = ({isDark, ...props}) => ...)
and create a small palette map or CSS-variable lookup (light/dark) to resolve
each color used in the paths, then replace the hardcoded fill attributes with
the corresponding palette values (ensuring sensible defaults if isDark is
undefined) and apply the same pattern to all paths so the icon renders correctly
in both themes.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Implement isDark prop for dark mode support.

The SVG component does not use the isDark prop, which is required by the coding guidelines to support both light and dark mode. Currently, the component uses hardcoded fill colors that won't adapt to the theme.

As per coding guidelines

Apply this pattern to support theme switching:

-const Icon = (props) => (
+const Icon = ({ isDark, ...props }) => (
   <svg
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 820 297"
     {...props}
   >
     <path
       d="M0 0 C0.71816895..."
-      fill="#376AE2"
+      fill={isDark ? "#5086EF" : "#376AE2"}
       transform="translate(582.6875,-0.5625)"
     />
+    {/* Update other path fill colors based on isDark prop */}

Note: You'll need to define appropriate color values for dark mode for all path elements with fill colors.

🤖 Prompt for AI Agents

In src/frontend/src/icons/Flexisign/flexisign.jsx lines 1-160, the Icon
component ignores the isDark prop and uses hardcoded fill colors; update the
component signature to accept an isDark boolean (with a sensible default), and
replace each hardcoded fill attribute with a conditional expression that selects
the light-mode color or the corresponding dark-mode color (e.g. fill={isDark ?
'<darkColor>' : '<lightColor>'}); ensure all path fill attributes are updated
consistently and preserve existing transforms/paths.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Wire isDark through the Missive SVG colours.

This component never reads isDark, so all fills stay fixed and dark mode loses contrast. Please accept isDark explicitly and branch your palette accordingly (e.g. compute const fills = isDark ? DARK_PALETTE : LIGHT_PALETTE; and reference those values when rendering each path).

Based on learnings

🤖 Prompt for AI Agents

In src/frontend/src/icons/Missive/missive.jsx around lines 1-98, the Icon
component never reads an isDark prop so all SVG path fills are fixed dark;
accept isDark in the component signature, compute a fills object (e.g. const
fills = isDark ? DARK_PALETTE : LIGHT_PALETTE) mapping each semantic part to the
correct hex, and replace the hard-coded fill attributes on each <path> with
references to fills.<partName>; ensure props spread still applied and keep
existing transforms/structure.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Implement isDark-aware fills.

This icon never reads isDark, so it always renders the light palette. Update it to accept { isDark, ...rest }, compute fills based on isDark, and spread rest onto <svg> to satisfy our icon contract.
As per coding guidelines

🤖 Prompt for AI Agents

In src/frontend/src/icons/Newsapi/newsapi.jsx around lines 1 to 27, the
component currently ignores the isDark prop and always uses hardcoded light
fills and spreads props incorrectly; update the component signature to accept ({
isDark, ...rest }), compute fill colors (e.g., primaryFill = isDark ?
'<dark-primary>' : '<light-primary>' and secondaryFill = isDark ?
'<dark-secondary>' : '<light-secondary>'), replace the hardcoded fill values on
the <path> elements with those computed variables, and spread ...rest onto the
<svg> element so the icon contract is satisfied.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Rename folder to drop the space.

Placing this module under icons/OpenAI copy/ violates the YourIconName directory contract and breaks alias imports (@/icons/OpenAICopy). Please rename the folder (and update imports/lazy map) to OpenAICopy/ before merging.

Based on learnings

🤖 Prompt for AI Agents

In src/frontend/src/icons/OpenAI copy/index.tsx lines 1-9: the folder name
contains a space ("OpenAI copy") which violates the YourIconName directory
contract and breaks alias imports; rename the directory to "OpenAICopy" (no
space), move this index.tsx and the openai SVG into that directory, then update
all imports and any lazy map/alias entries (e.g. "@/icons/OpenAICopy" or icon
registry) to point to the new path, and run a project-wide search to replace any
remaining references to "OpenAI copy".

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Fix the directory name.

The directory name "OpenAI copy" contains a space and the suffix "copy", which can cause issues with:

• Module imports and path resolution
• Build tools and file system operations
• Suggests this may be a duplicate or temporary file

Rename the directory to follow the established naming convention (e.g., OpenAI or OpenAICopy without spaces).

🤖 Prompt for AI Agents

In src/frontend/src/icons/OpenAI copy/openai.jsx lines 1-12, the directory name
"OpenAI copy" contains a space and "copy" which can break imports and build
tooling; rename the folder to a valid identifier (e.g., OpenAI or OpenAICopy)
and update all import paths that reference src/frontend/src/icons/OpenAI
copy/openai.jsx accordingly (search/replace imports, update any barrel exports
and tests), commit the moved file so history is preserved and verify the app
builds and imports the icon from the new path.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Missing isDark prop support for theme compatibility.

The SVG icon component must accept and use the isDark prop to support both light and dark mode, but this implementation has hardcoded fill colors in the CSS styles (#47B972, #FFFFFF) and doesn't handle theme switching.

As per coding guidelines

Consider destructuring isDark from props and conditionally adjusting the styles:

-const Icon = (props) => (
+const Icon = ({ isDark, ...props }) => (
   <svg
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     x="0px"
     y="0px"
     width="20"
     height="20"
     viewBox="0 0 80 80"
     style={{ enableBackground: "new 0 0 80 80" }}
     xmlSpace="preserve"
     preserveAspectRatio="xMidYMid meet"
     {...props}
   >
-    <style type="text/css">{`
-  .st0{fill:#47B972;}
-	.st1{fill:#FFFFFF;}
- `}</style>
+    <style type="text/css">{`
+  .st0{fill:#47B972;}
+	.st1{fill:${isDark ? '#000000' : '#FFFFFF'};}
+ `}</style>

Note: You may need to adjust the color logic based on your theme requirements.

🤖 Prompt for AI Agents

In src/frontend/src/icons/Pandadoc/pandadoc.jsx around lines 1-37, the SVG uses
hardcoded CSS fill colors and does not support the isDark prop; update the
component to destructure isDark from props (with a sensible default) and apply
conditional colors instead of the embedded .st0/.st1 CSS (e.g., choose a
dark/light fill for the rect and paths based on isDark), remove or replace the
<style> block and set fill attributes or inline style objects on the rect/path
elements so theme toggling works, and ensure other props are still spread onto
the svg.

[edwinjosechittilappilly]

LGTM But fixes required in Composio Base, merging but need follow up bug with for auth

[sonarqubecloud]

Quality Gate passed

Issues
14 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud