langflow icon indicating copy to clipboard operation
langflow copied to clipboard

feat: add Composio components & logos tweak.

Open Uday-sidagana opened this issue 3 months ago • 8 comments

Added new Composio components.

FrontEnd: langflow/src/frontend/src/icons, langflow/src/frontend/src/icons/lazyIconImports.ts — Added icons and updated lazyIconImports. Backend: langflow/src/lfx/src/lfx/components/composio.

Adjusted logos to similar sizes and Display name align.

Summary by CodeRabbit

  • New Features

    • Added icons and wrappers for Apollo, Bitbucket, Canva, Coda, ElevenLabs, Google BigQuery, Heygen, PeopleDataLabs, Snowflake, Exa, Fireflies, Mem0, Perplexity, SerpAPI, Slack (Composio), and more.
    • Introduced corresponding Composio components for these integrations.
  • Improvements

    • Standardized icon rendering with consistent 22x22 inline-grid wrappers and ref forwarding.
    • Updated several icons for clearer visuals and adjusted default sizes.
    • Expanded lazy-loaded icon coverage.
    • Harmonized labels/casing (e.g., Google apps, Discord/YouTube).
  • Refactor

    • Simplified Slack Composio component surface while aligning icon references.

Uday-sidagana avatar Sep 24 '25 00:09 Uday-sidagana

[!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 multiple new SVG icon components with forwardRef wrappers and standard 22x22 span containers, updates many existing icon wrappers to use the same container, and modifies several SVG assets/sizes and names. Extends lazy icon import mappings with new entries and renames. Introduces many new Composio backend components and updates metadata, including Slack component simplification.

Changes

Cohort / File(s) Summary
New icon components (SVG + wrapper)
src/frontend/src/icons/Apollo/*, .../Bitbucket/*, .../Canva/*, .../Coda/*, .../Elevenlabs/*, .../ExaComposio/*, .../Fireflies/*, .../Googlebigquery/*, .../Heygen/*, .../Mem0Composio/*, .../Peopledatalabs/*, .../PerplexityComposio/*, .../SerpAPIComposio/*, .../slackComposio/*, .../Snowflake/*
Adds new SVG components (default exports) and corresponding forwardRef wrapper components rendering inside a 22x22 inline‑grid span; wrappers forward ref/props to SVG.
Icon wrapper refactor to span (22x22 inline-grid)
src/frontend/src/icons/Dropbox/index.tsx, GoogleTasks/index.tsx, Notion/index.tsx, airtable/index.tsx, asana/index.tsx, attio/index.tsx, calendly/index.tsx, contentful/index.tsx, discord/index.tsx, figma/index.tsx, github/index.tsx, gmail/index.tsx, googlecalendar/index.tsx, googledocs/index.tsx, googlemeet/index.tsx, googlesheets/index.tsx, klaviyo/index.tsx, linear/index.tsx, miro/index.tsx, one_drive/index.tsx, outlook/index.tsx, reddit/index.tsx, supabase/index.tsx, todoist/index.tsx, Youtube/index.tsx
Wrap existing SVG icons in a span container (inline‑grid, 22x22, centered, no shrink); refs/props forwarded unchanged.
SVG asset updates (sizes/paths)
airtable/airtable.jsx, asana/asana.jsx, contentful/contentful.jsx, discord/discord.jsx, figma/figma.jsx, github/github.jsx, googlecalendar/googlecalendar.jsx, googledocs/googledocs.jsx, googlemeet/googlemeet.jsx, googlesheets/googlesheets.jsx, linear/linear.jsx, miro/miro.jsx, one_drive/one_drive.jsx, outlook/outlook.jsx, reddit/reddit.jsx, supabase/SupabaseIcon.jsx, wrike/wrike.jsx
Adjusts intrinsic SVG sizes and/or path/gradient content; some files add explicit width/height; some simplify graphics.
Icon component rename/structure changes
GoogleTasks/googletasks.jsx, linear/linear.jsx
GoogleTasks: default export identifier changes to Icon; SVG structure/viewBox updated. Linear: viewBox, dimensions, and content replaced; prop spread removed; fixed fill color added.
Lazy icon imports expansion/renames
src/frontend/src/icons/lazyIconImports.ts
Adds mappings for new icons and Composio variants; renames keys (Discord→discord, YouTube→youTube); maps to new wrapper components.
Composio: new components
src/lfx/src/lfx/components/composio/*_composio.py (apollo, bitbucket, canva, coda, elevenlabs, exa, firecrawl, fireflies, googlebigquery, heygen, mem0, peopledatalabs, perplexityai, serpapi, snowflake, tavily)
Adds new component classes extending ComposioBaseComponent with display_name, icon, documentation, app_name, and stub set_default_tools methods.
Composio: metadata updates
discord_composio.py, gmail_composio.py, googlecalendar_composio.py, googledocs_composio.py, googlemeet_composio.py, googlesheets_composio.py, googletasks_composio.py, youtube_composio.py
Updates display_name and/or icon string attributes to new values (e.g., Discord icon to "discord", YouTube display_name to "YouTube", icon to "youTube").
Composio: Slack simplification
slack_composio.py, slackbot_composio.py
Slack: changes icon to "SlackComposio", removes action/input-related attributes and methods, adds set_default_tools stub. Slackbot: icon updated to "SlackComposio".
Composio package exports
src/lfx/src/lfx/components/composio/__init__.py
Adds TYPE_CHECKING imports, extends dynamic import mapping, and updates all to include new Composio components.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor UI as UI
  participant Registry as lazyIconImports.ts
  participant Loader as Dynamic Import
  participant Wrapper as <Icon> Wrapper (span 22x22)
  participant SVG as SVG Component

  UI->>Registry: request("Bitbucket")
  Registry->>Loader: import("@/icons/Bitbucket").then({default: BitbucketIcon})
  Loader-->>UI: BitbucketIcon
  UI->>Wrapper: render <span><SVG/></span>
  Wrapper->>SVG: forward ref/props
  note right of Wrapper: Standardized 22x22 inline‑grid container
sequenceDiagram
  autonumber
  participant Client as Import Site
  participant Init as composio/__init__.py
  participant Map as _dynamic_imports
  participant Module as <component>_composio.py
  participant Class as Composio<...>APIComponent

  Client->>Init: from composio import ComposioExaAPIComponent
  Init->>Map: resolve "ComposioExaAPIComponent"
  Map->>Module: dynamic import
  Module-->>Init: export class
  Init-->>Client: ComposioExaAPIComponent
  Client->>Class: instantiate/use (display_name, icon, ...)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Possibly related PRs

  • langflow-ai/langflow#9560 — Adds similar Composio component classes and frontend icon modules plus lazy icon mappings.
  • langflow-ai/langflow#8868 — Expands Composio integration surface with new components and related icon/lazy-load changes.
  • langflow-ai/langflow#8649 — Broad icon component updates affecting sizing and wrappers across SVG assets.

Suggested labels

enhancement, lgtm, size:L

Suggested reviewers

  • edwinjosechittilappilly
  • lucaseduoli

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The title "feat: add Composio components & logos tweak." accurately and concisely captures the main changes in the PR — addition of Composio backend components and multiple frontend icon/logo adjustments — and is specific enough for a reviewer scanning history to understand the primary intent. It avoids noisy details and aligns with the changes described in the diff summary.
Docstring Coverage ✅ Passed Docstring coverage is 94.44% which is sufficient. The required threshold is 80.00%.

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.

coderabbitai[bot] avatar Sep 24 '25 00:09 coderabbitai[bot]

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

autofix-ci[bot] avatar Oct 14 '25 16:10 autofix-ci[bot]

⚠️ Component index needs to be updated

Please run the following command locally and commit the changes:

make build_component_index

Or alternatively:

LFX_DEV=1 uv run python scripts/build_component_index.py

Then commit and push the updated src/lfx/src/lfx/_assets/component_index.json file.

github-actions[bot] avatar Oct 15 '25 14:10 github-actions[bot]

⚠️ Component index needs to be updated

Please run the following command locally and commit the changes:

make build_component_index

Or alternatively:

LFX_DEV=1 uv run python scripts/build_component_index.py

Then commit and push the updated src/lfx/src/lfx/_assets/component_index.json file.

github-actions[bot] avatar Oct 15 '25 18:10 github-actions[bot]

⚠️ Component index needs to be updated

Please run the following command locally and commit the changes:

make build_component_index

Or alternatively:

LFX_DEV=1 uv run python scripts/build_component_index.py

Then commit and push the updated src/lfx/src/lfx/_assets/component_index.json file.

github-actions[bot] avatar Oct 15 '25 18:10 github-actions[bot]

⚠️ Component index needs to be updated

Please run the following command locally and commit the changes:

make build_component_index

Or alternatively:

LFX_DEV=1 uv run python scripts/build_component_index.py

Then commit and push the updated src/lfx/src/lfx/_assets/component_index.json file.

github-actions[bot] avatar Oct 16 '25 05:10 github-actions[bot]

⚠️ Component index needs to be updated

Please run the following command locally and commit the changes:

make build_component_index

Or alternatively:

LFX_DEV=1 uv run python scripts/build_component_index.py

Then commit and push the updated src/lfx/src/lfx/_assets/component_index.json file.

github-actions[bot] avatar Oct 19 '25 13:10 github-actions[bot]

Quality Gate Failed Quality Gate failed

Failed conditions
20.7% Duplication on New Code (required ≤ 3%)
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

sonarqubecloud[bot] avatar Oct 19 '25 13:10 sonarqubecloud[bot]

can we close this PR?

edwinjosechittilappilly avatar Dec 15 '25 22:12 edwinjosechittilappilly