feat: update Composio components #8868

abhishekpatil4 · 2025-07-03T21:06:53Z

Changes

Dynamic component system: Replaced hardcoded components with dynamic tool fetching code
Package updates: Added composio package, updated composio_langchain, removed composio-core
Response post-processing: Added support to process tool execution responses before returning to components code
New/Replaced components: Added Gmail, Slack, Outlook, Reddit etc.

Processed response screenshot for reference:

Summary by CodeRabbit

New Features
- Added integration components for Google Meet, Google Tasks, Linear, Reddit, Slackbot, Supabase, Todoist, YouTube, and Dropbox.
- Introduced new sidebar bundles and icons for Linear, Reddit, Google Tasks, Google Maps, Todoist, Zoom, Google Meet, and Google Sheets.
- Enabled lazy loading and display of new app icons in the interface.
Improvements
- Upgraded Composio SDK dependencies for enhanced API integration.
- Refactored and modernized Composio components for improved action handling, authentication, and UI configuration.
Bug Fixes
- Improved error handling and state management for API connections and tool selection.
Removals
- Simplified or removed legacy code for Gmail, Google Calendar, Outlook, Slack, and GitHub components to prepare for updated implementations.

coderabbitai · 2025-07-03T21:06:59Z

Walkthrough

This update introduces new Composio integrations (Google Meet, Google Tasks, Linear, Reddit, Slackbot, Supabase, Todoist, YouTube, Dropbox), refactors backend components to use the latest Composio SDK, and streamlines existing API components. The frontend is updated with new icons and sidebar bundles for these integrations, expanding UI support.

Changes

File(s)	Change Summary
pyproject.toml	Updated Composio dependencies to use the new `composio` package at version `1.0.0rc9` and removed `composio-core`.
src/backend/base/langflow/base/composio/composio_base.py	Refactored to use new Composio SDK, improved action/schema handling, dynamic UI config, robust authentication, and error handling. Added/updated multiple public methods for action/data management.
src/backend/base/langflow/components/composio/init.py	Added exports for new Composio API components: Google Meet, Google Tasks, Linear, Reddit, Slackbot, Supabase, Todoist, YouTube, Dropbox.
src/backend/base/langflow/components/composio/composio_api.py	Refactored to use new Composio client and LangchainProvider; simplified tool validation, build config logic, and deprecated old SDK usage. Improved error handling.
src/backend/base/langflow/components/composio/dropbox_compnent.py	Added new Dropbox API component class with basic attributes and placeholder method.
src/backend/base/langflow/components/composio/github_composio.py	Stripped to a minimal skeleton; removed all action/input logic, leaving only basic attributes and an empty method.
src/backend/base/langflow/components/composio/gmail_composio.py	Removed all action/input logic; added minimal constructor and response post-processing methods for Gmail actions.
src/backend/base/langflow/components/composio/googlecalendar_composio.py	Reduced to a skeleton; removed all logic except basic attributes and a stub method.
src/backend/base/langflow/components/composio/googlemeet_composio.py	Added new Google Meet API component class with attributes and placeholder method.
src/backend/base/langflow/components/composio/googletasks_composio.py	Added new Google Tasks API component class with attributes.
src/backend/base/langflow/components/composio/linear_composio.py	Added new Linear API component class with attributes and placeholder method.
src/backend/base/langflow/components/composio/outlook_composio.py	Reduced to skeleton; removed all logic except basic attributes and a stub method.
src/backend/base/langflow/components/composio/reddit_composio.py	Added new Reddit API component class with attributes and placeholder method.
src/backend/base/langflow/components/composio/slack_composio.py	Removed all logic except for an empty stub method.
src/backend/base/langflow/components/composio/slackbot_composio.py	Added new Slackbot API component class with attributes and placeholder method.
src/backend/base/langflow/components/composio/supabase_composio.py	Added new Supabase API component class with attributes and placeholder method.
src/backend/base/langflow/components/composio/todoist_composio.py	Added new Todoist API component class with attributes and placeholder method.
src/backend/base/langflow/components/composio/youtube_composio.py	Added new YouTube API component class with attributes and placeholder method.
src/frontend/src/icons/GoogleTasks/googletasks.jsx	Added new SVG React component for Google Tasks icon.
src/frontend/src/icons/GoogleTasks/index.tsx	Added forwardRef wrapper for Google Tasks icon.
src/frontend/src/icons/googlemaps/googlemaps.jsx	Added new SVG React component for Google Maps icon.
src/frontend/src/icons/googlemaps/index.tsx	Added forwardRef wrapper for Google Maps icon.
src/frontend/src/icons/googlemeet/googlemeet.jsx	Added new SVG React component for Google Meet icon.
src/frontend/src/icons/googlemeet/index.tsx	Added forwardRef wrapper for Google Meet icon.
src/frontend/src/icons/googlesheets/googlesheets.jsx	Added new SVG React component for Google Sheets icon.
src/frontend/src/icons/googlesheets/index.tsx	Added forwardRef wrapper for Google Sheets icon.
src/frontend/src/icons/lazyIconImports.ts	Extended lazy icon mapping with new icons: Google Meet, Google Tasks, Google Sheets, Google Maps, Todoist, Zoom, Linear, Reddit.
src/frontend/src/icons/linear/index.tsx	Added forwardRef wrapper for Linear icon.
src/frontend/src/icons/linear/linear.jsx	Added new SVG React component for Linear icon.
src/frontend/src/icons/reddit/index.tsx	Added forwardRef wrapper for Reddit icon.
src/frontend/src/icons/reddit/reddit.jsx	Added new SVG React component for Reddit icon.
src/frontend/src/icons/todoist/index.tsx	Added forwardRef wrapper for Todoist icon.
src/frontend/src/icons/todoist/todoist.jsx	Added new SVG React component for Todoist icon.
src/frontend/src/icons/zoom/index.tsx	Added forwardRef wrapper for Zoom icon.
src/frontend/src/icons/zoom/zoom.jsx	Added new SVG React component for Zoom icon.
src/frontend/src/utils/styleUtils.ts	Added new sidebar bundles and icon mappings for all newly supported tools.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Frontend
    participant Backend
    participant ComposioSDK

    User->>Frontend: Selects a tool (e.g., Google Tasks)
    Frontend->>Backend: Requests available actions and input schema
    Backend->>ComposioSDK: Fetch toolkits/actions metadata
    ComposioSDK-->>Backend: Returns actions and schemas
    Backend-->>Frontend: Returns actions/options and dynamic input fields
    User->>Frontend: Fills input fields and submits action
    Frontend->>Backend: Sends action request with parameters
    Backend->>ComposioSDK: Executes selected action with parameters
    ComposioSDK-->>Backend: Returns action result
    Backend-->>Frontend: Returns processed result
    Frontend-->>User: Displays result

Suggested labels

enhancement, size:XXL, lgtm

Suggested reviewers

edwinjosechittilappilly
mfortman11

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate Unit Tests

Create PR with Unit Tests
Post Copyable Unit Tests in a Comment

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai auto-generate unit tests to generate unit tests for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

abhishekpatil4 · 2025-07-03T21:18:48Z

I'm getting this error when I use Slack, Supabase or GitHub Component specifically when all tools are enabled (works fine when tools are limited) Error while updating the Component: An unexpected error occurred while updating the Component. Please try again.

This likely happens during tool schema to LangFlow input conversion. Is there a way to debug this? Maybe a debug flag or logging option? I don't see any error logs currently.

Thanks!

coderabbitai

Actionable comments posted: 22

🔭 Outside diff range comments (8)

pyproject.toml (1)
35-37: Duplicate pins produce non-deterministic resolution

The file lists the same libraries twice (certifi and filelock). PEP-621 parsers usually keep the last occurrence, but this is easy to miss and will confuse dependabot / uv.
-    "certifi>=2023.11.17,<2025.0.0",
-    "certifi==2024.8.30",
+    # keep only one, pick the stricter spec
+    "certifi==2024.8.30",
…
-    "filelock>=3.18.0",
-    "filelock>=3.18.0"
+    "filelock>=3.18.0"
Also applies to: 127-129
src/frontend/src/icons/googlemaps/googlemaps.jsx (1)

1-20: Conventions breach: no dark-mode colours & no TypeScript wrapper

Same issues as the Zoom icon: the SVG ignores isdark and no index.tsx with forwardRef exists.
Add both pieces so the icon integrates with the existing lazy-loading + ref-forwarding infrastructure.
src/backend/base/langflow/components/composio/todoist_composio.py (1)
10-12: Implement the abstract method with a pass statement.

The set_default_tools method is abstract in the base class but has no implementation. Add a pass statement to prevent runtime errors.
 def set_default_tools(self):
     """Set the default tools for Todoist component."""
+    pass
src/backend/base/langflow/components/composio/supabase_composio.py (1)
10-12: Implement the abstract method with a pass statement.

The set_default_tools method is abstract in the base class but has no implementation. Add a pass statement to prevent runtime errors.
 def set_default_tools(self):
     """Set the default tools for Supabase component."""
+    pass
src/backend/base/langflow/components/composio/reddit_composio.py (1)
10-12: Implement the abstract method with a pass statement.

The set_default_tools method is abstract in the base class but has no implementation. Add a pass statement to prevent runtime errors.
 def set_default_tools(self):
     """Set the default tools for Reddit component."""
+    pass
src/backend/base/langflow/components/composio/youtube_composio.py (1)
10-12: Implement the abstract method with a pass statement.

The set_default_tools method is abstract in the base class but has no implementation. Add a pass statement to prevent runtime errors.
 def set_default_tools(self):
     """Set the default tools for Youtube component."""
+    pass
src/backend/base/langflow/components/composio/slackbot_composio.py (1)
10-12: Implement the abstract method with a pass statement.

The set_default_tools method is abstract in the base class but has no implementation. Add a pass statement to prevent runtime errors.
 def set_default_tools(self):
     """Set the default tools for Slackbot component."""
+    pass
src/backend/base/langflow/components/composio/composio_api.py (1)

126-220: Refactor deeply nested code blocks.

The update_build_config method has 6 levels of nesting, exceeding the recommended limit of 5. Consider extracting helper methods to improve readability.

Would you like me to suggest a refactored version that extracts the connection checking and OAuth flow logic into separate methods?

🧹 Nitpick comments (19)

src/frontend/src/icons/GoogleTasks/index.tsx (1)
4-8: Expose full SVG props to consumers

React.PropsWithChildren<{}> blocks common attributes such as className, style, width, etc. Typing the props as React.SVGProps<SVGSVGElement> (which already includes children) keeps the pattern consistent while remaining type-safe.
-export const GoogleTasksIcon = forwardRef<
-  SVGSVGElement,
-  React.PropsWithChildren<{}>
->((props, ref) => {
+export const GoogleTasksIcon = forwardRef<
+  SVGSVGElement,
+  React.SVGProps<SVGSVGElement>
+>((props, ref) => {
src/frontend/src/icons/googlesheets/googlesheets.jsx (1)
1-19: Spread incoming props & honour the isdark theme toggle

props is never used – consumers cannot set className, onClick, etc.

Guidelines require an isdark prop so colours adapt to dark mode.
-const Icon = (props) => (
-    <svg
+const Icon = ({ isdark, ...props }) => (
+    <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 48 48"
       width="23px"
       height="23px"
+      {...props}
     >
       <path
-        fill="#43a047"
+        fill={isdark ? "#66bb6a" : "#43a047"}
(Repeat the colour guard for the other hard-coded fills as needed.)
src/frontend/src/icons/todoist/todoist.jsx (1)
1-3: Allow customisation & dark-mode for Todoist icon

Same concerns as with the Google Sheets icon – props are ignored and the graphic is not theme-aware.
-const Icon = (props) => (
-    <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="23px" height="23px" baseProfile="basic">
+const Icon = ({ isdark, ...props }) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="23px" height="23px" baseProfile="basic" {...props}>
…
-<path fill="#f44336"
+<path fill={isdark ? "#ef5350" : "#f44336"}
src/frontend/src/icons/googlemeet/index.tsx (1)
4-8: Use SVGProps for better type coverage (same as Google Tasks)
-export const GooglemeetIcon = forwardRef<
-  SVGSVGElement,
-  React.PropsWithChildren<{}>
->((props, ref) => {
+export const GooglemeetIcon = forwardRef<
+  SVGSVGElement,
+  React.SVGProps<SVGSVGElement>
+>((props, ref) => {
Keeps icon typings uniform and unblocks consumers from passing standard SVG attributes.
src/frontend/src/icons/googlesheets/index.tsx (1)
4-9: Optional typing refinement

React.PropsWithChildren<{}> is accepted across the codebase, but tools like Biome flag {}.
If you ever touch this again, consider
React.PropsWithChildren<{ isdark?: boolean }>
to silence the linter and document the dark-mode prop.
src/frontend/src/icons/todoist/index.tsx (1)
4-9: (Nit) Silence Biome lint by typing the prop shape

Optional but avoids lint error:
-React.PropsWithChildren<{}>
+React.PropsWithChildren<{ isdark?: boolean }>
src/backend/base/langflow/components/composio/dropbox_compnent.py (1)
10-12: Implement or remove placeholder method.

The set_default_tools method is empty. Either implement it with default tools or remove it if not needed yet.
-    def set_default_tools(self):
-        """Set the default tools for Dropbox component."""
+    def set_default_tools(self):
+        """Set the default tools for Dropbox component."""
+        pass  # TODO: Implement default tools configuration
src/backend/base/langflow/components/composio/linear_composio.py (1)
10-12: Implement or remove placeholder method.

The set_default_tools method is empty. Either implement it with default tools or add a pass statement for clarity.
     def set_default_tools(self):
         """Set the default tools for Linear component."""
+        pass  # TODO: Implement default tools configuration
src/backend/base/langflow/components/composio/todoist_composio.py (1)
4-8: Add class docstring for better documentation.

The class is missing a docstring that describes its purpose and functionality.
 class ComposioTodoistAPIComponent(ComposioBaseComponent):
+    """Composio API component for Todoist integration."""
     display_name: str = "Todoist"
src/backend/base/langflow/components/composio/supabase_composio.py (1)
4-8: Add class docstring for better documentation.

The class is missing a docstring that describes its purpose and functionality.
 class ComposioSupabaseAPIComponent(ComposioBaseComponent):
+    """Composio API component for Supabase integration."""
     display_name: str = "Supabase"
src/backend/base/langflow/components/composio/reddit_composio.py (1)
4-8: Add class docstring for better documentation.

The class is missing a docstring that describes its purpose and functionality.
 class ComposioRedditAPIComponent(ComposioBaseComponent):
+    """Composio API component for Reddit integration."""
     display_name: str = "Reddit"
src/backend/base/langflow/components/composio/youtube_composio.py (1)
4-8: Add class docstring for better documentation.

The class is missing a docstring that describes its purpose and functionality.
 class ComposioYoutubeAPIComponent(ComposioBaseComponent):
+    """Composio API component for YouTube integration."""
     display_name: str = "Youtube"
src/backend/base/langflow/components/composio/slackbot_composio.py (2)
4-8: Add class docstring for better documentation.

The class is missing a docstring that describes its purpose and functionality.
 class ComposioSlackbotAPIComponent(ComposioBaseComponent):
+    """Composio API component for Slackbot integration."""
     display_name: str = "Slackbot"
6-6: Consider icon consistency with component name.

The icon is set to "Slack" while the component name is "Slackbot". For consistency with other components, consider using "Slackbot" if a specific icon exists.
-    icon = "Slack"
+    icon = "Slackbot"
src/backend/base/langflow/base/composio/composio_base.py (5)
128-130: Remove excessive blank lines.
-
-
-
+
473-473: Fix inline comment formatting.
-                    field_schema_copy["description"] = f"User ID for {self.app_name.title()}: " + field_schema["description"] #noqa: E501
+                    field_schema_copy["description"] = f"User ID for {self.app_name.title()}: " + field_schema["description"]  # noqa: E501
-                            if inp.name == "user_id" and getattr(self, "entity_id", None) == getattr(inp, "value", None): #noqa: E501
+                            if inp.name == "user_id" and getattr(self, "entity_id", None) == getattr(inp, "value", None):  # noqa: E501
Also applies to: 565-565

376-378: Remove excessive blank lines.
-
-
+
681-681: Fix inline comment formatting throughout the method.

Multiple inline comments need proper spacing:
-                if field_name_in_config not in ["api_key", "tool_mode", "action", "auth_link", "entity_id"] and isinstance(build_config[field_name_in_config], dict) and "show" in build_config[field_name_in_config]:  # noqa: E501
+                if field_name_in_config not in ["api_key", "tool_mode", "action", "auth_link", "entity_id"] and isinstance(build_config[field_name_in_config], dict) and "show" in build_config[field_name_in_config]:  # noqa: E501

-                    connections = toolset.connected_accounts.list(user_ids=[self.entity_id], toolkit_slugs=[toolkit_slug]) #noqa: E501
+                    connections = toolset.connected_accounts.list(user_ids=[self.entity_id], toolkit_slugs=[toolkit_slug])  # noqa: E501

# ... and similar fixes for lines 774, 809, 813
Also applies to: 755-755, 774-774, 809-809, 813-813

885-887: Remove commented debug code.
     def configure_tools(self, composio: Composio) -> list[Tool]:
         tools = composio.tools.get(user_id=self.entity_id, toolkits=[self.app_name.lower()], limit=999)
-        # tools = composio.tools.get(user_id=self.entity_id, toolkits=[self.app_name.lower()])
-        # logger.info(f"Tools: {tools}")

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 78d64eb and 0564001.

⛔ Files ignored due to path filters (9)

src/frontend/src/icons/GoogleTasks/googletasks.svg is excluded by !**/*.svg
src/frontend/src/icons/googlemaps/googlemaps.svg is excluded by !**/*.svg
src/frontend/src/icons/googlemeet/googlemeet.svg is excluded by !**/*.svg
src/frontend/src/icons/googlesheets/googlesheets.svg is excluded by !**/*.svg
src/frontend/src/icons/linear/linear.svg is excluded by !**/*.svg
src/frontend/src/icons/reddit/reddit.svg is excluded by !**/*.svg
src/frontend/src/icons/todoist/todoist.svg is excluded by !**/*.svg
src/frontend/src/icons/zoom/zoom.svg is excluded by !**/*.svg
uv.lock is excluded by !**/*.lock

📒 Files selected for processing (36)

pyproject.toml (1 hunks)
src/backend/base/langflow/base/composio/composio_base.py (5 hunks)
src/backend/base/langflow/components/composio/__init__.py (1 hunks)
src/backend/base/langflow/components/composio/composio_api.py (6 hunks)
src/backend/base/langflow/components/composio/dropbox_compnent.py (1 hunks)
src/backend/base/langflow/components/composio/github_composio.py (1 hunks)
src/backend/base/langflow/components/composio/gmail_composio.py (1 hunks)
src/backend/base/langflow/components/composio/googlecalendar_composio.py (1 hunks)
src/backend/base/langflow/components/composio/googlemeet_composio.py (1 hunks)
src/backend/base/langflow/components/composio/googletasks_composio.py (1 hunks)
src/backend/base/langflow/components/composio/linear_composio.py (1 hunks)
src/backend/base/langflow/components/composio/outlook_composio.py (1 hunks)
src/backend/base/langflow/components/composio/reddit_composio.py (1 hunks)
src/backend/base/langflow/components/composio/slack_composio.py (1 hunks)
src/backend/base/langflow/components/composio/slackbot_composio.py (1 hunks)
src/backend/base/langflow/components/composio/supabase_composio.py (1 hunks)
src/backend/base/langflow/components/composio/todoist_composio.py (1 hunks)
src/backend/base/langflow/components/composio/youtube_composio.py (1 hunks)
src/frontend/src/icons/GoogleTasks/googletasks.jsx (1 hunks)
src/frontend/src/icons/GoogleTasks/index.tsx (1 hunks)
src/frontend/src/icons/googlemaps/googlemaps.jsx (1 hunks)
src/frontend/src/icons/googlemaps/index.tsx (1 hunks)
src/frontend/src/icons/googlemeet/googlemeet.jsx (1 hunks)
src/frontend/src/icons/googlemeet/index.tsx (1 hunks)
src/frontend/src/icons/googlesheets/googlesheets.jsx (1 hunks)
src/frontend/src/icons/googlesheets/index.tsx (1 hunks)
src/frontend/src/icons/lazyIconImports.ts (4 hunks)
src/frontend/src/icons/linear/index.tsx (1 hunks)
src/frontend/src/icons/linear/linear.jsx (1 hunks)
src/frontend/src/icons/reddit/index.tsx (1 hunks)
src/frontend/src/icons/reddit/reddit.jsx (1 hunks)
src/frontend/src/icons/todoist/index.tsx (1 hunks)
src/frontend/src/icons/todoist/todoist.jsx (1 hunks)
src/frontend/src/icons/zoom/index.tsx (1 hunks)
src/frontend/src/icons/zoom/zoom.jsx (1 hunks)
src/frontend/src/utils/styleUtils.ts (6 hunks)

🧰 Additional context used

📓 Path-based instructions (12)

`{uv.lock,pyproject.toml}`: Use uv (>=0.4) as the Python package manager for dependency management

{uv.lock,pyproject.toml}: Use uv (>=0.4) as the Python package manager for dependency management

📄 Source: CodeRabbit Inference Engine (.cursor/rules/backend_development.mdc)