feat: add Composio components & logos tweak.#9960
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughAdds 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
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
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
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. Comment |
github-actions
Bot
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 36
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (6)
src/frontend/src/icons/reddit/reddit.jsx (1)
1-12: Fix ref forwarding: wrap SVG with forwardRef so index.tsx can pass ref without runtime warnings.
index.tsxforwards a ref to this component, butRedditIconSVGisn’t usingforwardRef. This will trigger “Function components cannot be given refs” and the ref won’t attach to the SVG.Proposed update (JS):
import React, { forwardRef } from "react"; const RedditIconSVG = forwardRef((props, ref) => ( <svg ref={ref} viewBox="0 0 16 16" width="20" height="20" {...props}> <path fill="#fe3155" d="M8,0c4.418,0,8,3.582,8,8s-3.582,8-8,8s-8-3.582-8-8S3.582,0,8,0z" /> <path fill="#fff" d="M12.124,6.875c-0.285,0.009-0.558,0.127-0.766,0.324c-0.911-0.62-1.98-0.96-3.08-0.984l0.52-2.496 l1.711,0.36c0.047,0.44,0.442,0.758,0.882,0.711c0.438-0.049,0.756-0.442,0.709-0.882c-0.047-0.44-0.442-0.758-0.88-0.709 c-0.253,0.025-0.48,0.173-0.605,0.391l-1.96-0.391C8.522,3.167,8.387,3.251,8.358,3.387c0,0.002,0,0.002,0,0.004L7.767,6.167 c-1.113,0.016-2.198,0.36-3.12,0.984c-0.469-0.442-1.209-0.42-1.651,0.051c-0.442,0.471-0.42,1.209,0.053,1.651 c0.091,0.085,0.196,0.16,0.313,0.211c-0.007,0.118-0.007,0.235,0,0.353c0,1.791,2.089,3.249,4.664,3.249 c2.576,0,4.664-1.456,4.664-3.249c0.007-0.118,0.007-0.234,0-0.353c0.402-0.2,0.655-0.615,0.645-1.064 C13.311,7.356,12.771,6.853,12.124,6.875z M5.335,8.8c0-0.442,0.358-0.8,0.802-0.8c0.442,0,0.8,0.358,0.8,0.8s-0.358,0.8-0.8,0.8 S5.335,9.242,5.335,8.8z M9.971,11C9.616,11.328,8.988,11.616,8,11.616S6.384,11.328,6.029,11c-0.073-0.067-0.062-0.227,0.031-0.304 c0.078-0.065,0.193-0.065,0.275,0c0.48,0.353,1.07,0.48,1.665,0.48s1.185-0.127,1.665-0.48c0.082-0.065,0.196-0.065,0.275,0 C10.033,10.773,10.044,10.933,9.971,11z M9.842,9.6C9.4,9.6,9.04,9.242,9.04,8.8C9.042,8.358,9.4,8,9.842,8 c0.442,0,0.8,0.358,0.8,0.8S10.284,9.6,9.842,9.6z" /> </svg> )); export default RedditIconSVG;src/frontend/src/icons/googledocs/googledocs.jsx (1)
1-19: Fix: underlying SVG isn’t ref‑forwarding (will trigger “Function components cannot be given refs” warning).
index.tsxforwards a ref to this component, but this file doesn’t useforwardRef. Wrap the SVG withforwardRefso the ref attaches to the<svg>. Also adds basic a11y defaults.Apply:
+import React, { forwardRef } from "react"; -const Icon = (props) => ( - <svg - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 48 48" - width="21px" - height="21px" - > - <path - fill="#2196f3" - d="M37,45H11c-1.657,0-3-1.343-3-3V6c0-1.657,1.343-3,3-3h19l10,10v29C40,43.657,38.657,45,37,45z" - /> - <path fill="#bbdefb" d="M40 13L30 13 30 3z" /> - <path fill="#1565c0" d="M30 13L40 23 40 13z" /> - <path - fill="#e3f2fd" - d="M15 23H33V25H15zM15 27H33V29H15zM15 31H33V33H15zM15 35H25V37H15z" - /> - </svg> -); +const Icon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(function Icon( + props, + ref +) { + return ( + <svg + ref={ref} + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 48 48" + width="21px" + height="21px" + aria-hidden={props["aria-label"] ? undefined : true} + focusable="false" + {...props} + > + <path + fill="#2196f3" + d="M37,45H11c-1.657,0-3-1.343-3-3V6c0-1.657,1.343-3,3-3h19l10,10v29C40,43.657,38.657,45,37,45z" + /> + <path fill="#bbdefb" d="M40 13L30 13 30 3z" /> + <path fill="#1565c0" d="M30 13L40 23 40 13z" /> + <path + fill="#e3f2fd" + d="M15 23H33V25H15zM15 27H33V29H15zM15 31H33V33H15zM15 35H25V37H15z" + /> + </svg> + ); +}); export default Icon;src/frontend/src/icons/asana/asana.jsx (1)
1-11: Forward the ref and spread props to ; current component drops ref/props.Index wrapper forwards a ref and props, but this component is not using forwardRef nor spreading props. This causes React ref warnings and prevents consumers from passing className/style/handlers.
Suggested implementation (keep your existing content as-is):
import React, { forwardRef } from "react"; const Icon = forwardRef(function AsanaIconSVG({ isDark, ...props }, ref) { return ( <svg ref={ref} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100%" height="100%" // Use themeable color. If brand colors are required, adjust accordingly. fill={isDark ? "#fff" : "currentColor"} {...props} > {/* existing <path ... /> unchanged */} </svg> ); }); export default Icon;src/lfx/src/lfx/components/composio/googlemeet_composio.py (1)
11-11: Minor docstring correction: mentions Calendar instead of Meet.Adjust to avoid confusion.
- """Set the default tools for Google Calendar component.""" + """Set the default tools for Google Meet component."""src/frontend/src/icons/contentful/contentful.jsx (1)
1-9: Forward props & forwardRef on Contentful SVGsrc/frontend/src/icons/contentful/index.tsx forwards ref — update src/frontend/src/icons/contentful/contentful.jsx to accept the ref (use React.forwardRef) and spread {...props} onto the so className/style/aria and refs are propagated.
src/lfx/src/lfx/components/composio/youtube_composio.py (1)
10-12: Minor: Docstring casing inconsistency.Docstring says "Youtube" while display_name is "YouTube". Align for consistency.
- """Set the default tools for Youtube component.""" + """Set the default tools for YouTube component."""
🧹 Nitpick comments (43)
src/frontend/src/icons/calendly/index.tsx (1)
4-7: Optional: set displayName for better DevTools visibilityHelps when inspecting forwardRef components.
Add after the component:
CalendlyIcon.displayName = "CalendlyIcon";src/frontend/src/icons/outlook/outlook.jsx (1)
2-8: Default sizing OK; consider dark‑mode support via isDark.Props spread after width/height is correct (caller can override 20x20). However, the component ignores isDark and uses hardcoded fills. To align with icon guidelines, consider honoring an isDark prop (e.g., toggle neutral/white elements or use currentColor where appropriate).
Please confirm whether brand icons in this PR are expected to adapt to dark mode via isDark. If yes, I can propose a concrete update for this SVG.
src/frontend/src/icons/one_drive/index.tsx (1)
8-20: Add isDark support per icons guideline (and type props accordingly).Current wrapper neither types nor forwards
isDark. Recommend aligning with the repo rule to support dark mode.Type and pass
isDark:export const One_DriveIcon = forwardRef< SVGSVGElement, - React.PropsWithChildren<{}> + React.ComponentPropsWithoutRef<"svg"> & { isDark?: boolean } >((props, ref) => { - return ( + const { isDark, ...rest } = props; + return ( <span style={{ display: "inline-grid", width: 22, height: 22, placeItems: "center", flexShrink: 0, }} > - <One_DriveIconSVG ref={ref} {...props} /> + <One_DriveIconSVG ref={ref} isDark={isDark} {...rest} /> </span> ); });Optionally, in
one_drive.jsx, accept{ isDark, ...props }and use it to tweak fills/stops for dark theme.src/frontend/src/icons/klaviyo/index.tsx (1)
8-20: Hoist wrapper style into a module-level constant to avoid per-render allocationsSmall perf/readability win. Use a shared constant instead of recreating the style object each render.
Apply this diff:
- <span - style={{ - display: "inline-grid", - width: 22, - height: 22, - placeItems: "center", - flexShrink: 0, - }} - > + <span style={WRAPPER_STYLE}>Add this near the imports:
const WRAPPER_STYLE: React.CSSProperties = { display: "inline-grid", width: 22, height: 22, placeItems: "center", flexShrink: 0, };Optional: set a displayName for clearer React DevTools:
KlaviyoIcon.displayName = "KlaviyoIcon";src/frontend/src/icons/linear/linear.jsx (1)
1-15: Optional: component/file naming consistency.Consider PascalCase component/file and directory naming (Linear) to match the rest of the icons.
src/frontend/src/icons/wrike/wrike.jsx (2)
2-8: Avoid hard-coded size; let the wrapper control dimensions (22x22).This SVG now forces 24x24 and can fight the new 22x22 wrappers. Make it fluid.
Apply this diff:
- width="24" - height="24" + width="100%" + height="100%"
10-25: Theme support: replace hard-coded gray with currentColor (or isDark).Neutral paths use a fixed #73787F, so they won’t adapt to dark mode. Keep Wrike greens as brand colors; switch only the gray to currentColor (wrapper can style color based on isDark).
Updated snippet (outside the changed lines):
const Icon = (props) => ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="100%" {...props}> <path fill="currentColor" d="M19.8,40.6L14.3,56.8L9.4,40.6H3.9l8.1,24.2h4.4L25.7,48.8l5.3,16h4.4l8.1-24.2h-5.4l-4.9,16.2L25.7,40.6H19.8z" /> <path fill="currentColor" d="M39.7,64.8V47.7h4.8v3.8c1.5-4.4,6.5-3.8,6.5-3.8v4.7c0,0-6.5-0.5-6.5,4.8v7.5H39.7z" /> <path fill="currentColor" d="M53.3,64.8v-10.5l4.8-4.6v15.1H53.3z" /> <path fill="currentColor" d="M62.2,64.8V45.9l4.8-4.8v12.8l5.9-6.2h5.9L71.7,55.4l8.6,9.4h-6.3l-6.8-7.4v7.4H62.2z" /> <path fill="currentColor" d="M91.2,54.4c-0.1-1.9-1.4-3.4-3.6-3.4c-2.2,0-3.6,1.4-3.8,3.4H91.2z M81.8,62.6c-1.8-1.6-2.7-3.8-2.7-6.5c0-2.5,0.8-4.6,2.4-6.3c1.6-1.7,3.8-2.6,6.4-2.6c2.5,0,4.4,0.9,5.9,2.6c1.5,1.7,2.2,3.8,2.2,6.3v1.2h-12.1c0.5,2.3,2.7,3.5,5.7,3.5c1.9,0,3.7-0.5,5.4-1.5v3.8c-1.5,1.1-3.7,1.7-6.4,1.7C85.4,66.8,83.6,64.2,81.8,62.6L81.8,62.6z" /> <path fill="#00A551" d="M63.2,34.9l-10.8,10.8l3.2,3.2l14-14H63.2z" /> <path fill="#A5CD39" d="M53.6,40.6h-6.4l8.4,8.4l3.2-3.2L53.6,40.6z" /> </svg> );src/frontend/src/icons/todoist/index.tsx (1)
8-20: Type props to allow passing isDark (and other SVG props) through the wrapperCurrent typing with PropsWithChildren<{}> prevents consumers from passing isDark at compile time. Recommend typing the wrapper to the inner SVG props to keep pass-through strongly typed. Apply repo-wide later for consistency.
Outside the selected range, adjust the generic:
export const TodoistIcon = forwardRef< SVGSVGElement, React.ComponentProps<typeof TodoistIconSVG> >((props, ref) => { ... });src/frontend/src/icons/miro/miro.jsx (2)
5-6: Let the wrapper control sizing; avoid fixed width/height on the SVG.Since index.tsx now enforces a 22x22 wrapper, keep the SVG fluid to prevent double-enforcement and make future size tweaks easier.
- width="22px" - height="22px" + width="100%" + height="100%"
43-46: Add dark-mode support (use the isDark prop or currentColor).The SVG uses hardcoded black fills/stops. Please wire the isDark prop so the icon renders correctly on dark backgrounds (or switch fills/stops to currentColor and let the wrapper/parent set color).
Example:
const Icon = ({ isDark, ...props }) => { const c = isDark ? "#fff" : "#000"; return ( <svg {...props}> <linearGradient id="1dP_ejbheoOkMyPxlPY0Wb" /* ... */> <stop offset="0" stopColor={c} /> <stop offset="1" stopColor={c} /> </linearGradient> <path fill={c} /* ... */ /> </svg> ); };src/frontend/src/icons/attio/index.tsx (1)
6-18: Optional: de-duplicate wrapper markup via a shared IconWrapper.A small helper reduces repetition across icons.
Apply:
- return ( - <span - style={{ - display: "inline-grid", - width: 22, - height: 22, - placeItems: "center", - flexShrink: 0, - }} - > - <AttioIconSVG ref={ref} {...props} /> - </span> - ); + return ( + <IconWrapper> + <AttioIconSVG ref={ref} {...props} /> + </IconWrapper> + );Add this helper once (example):
// src/frontend/src/icons/_shared/IconWrapper.tsx import React from "react"; export const IconWrapper: React.FC<React.PropsWithChildren<{}>> = ({ children }) => ( <span style={{ display: "inline-grid", width: 22, height: 22, placeItems: "center", flexShrink: 0, }} > {children} </span> ); export default IconWrapper;And import it here:
import IconWrapper from "../_shared/IconWrapper";src/frontend/src/icons/airtable/index.tsx (1)
8-20: Optional: consider shared IconWrapper to avoid repetition.Same suggestion as in AttioIcon to keep wrappers DRY.
- return ( - <span - style={{ - display: "inline-grid", - width: 22, - height: 22, - placeItems: "center", - flexShrink: 0, - }} - > - <AirtableIconSVG ref={ref} {...props} /> - </span> - ); + return ( + <IconWrapper> + <AirtableIconSVG ref={ref} {...props} /> + </IconWrapper> + );src/frontend/src/icons/Snowflake/index.tsx (1)
7-11: Don’t overwrite incoming style; merge with defaults.Preserve caller styles while applying 20x20 default size.
Apply this diff:
-)((props, ref) => { - return ( - <SnowflakeIconSVG ref={ref} {...props} style={{ width: 20, height: 20 }} /> - ); -}); +)((props, ref) => { + const { style, ...rest } = props as any; + return ( + <SnowflakeIconSVG + ref={ref} + {...rest} + style={{ width: 20, height: 20, ...(style || {}) }} + /> + ); +});src/frontend/src/icons/Peopledatalabs/index.tsx (1)
4-15: Forwarded ref won’t reach ; fix underlying component. Also merge styles.
- peopledatalabs.jsx doesn’t forward refs; update it (see its file comment).
- Merge caller styles with 20x20 defaults.
Apply this diff:
-)((props, ref) => { - return ( - <PeopledatalabsIconSVG - ref={ref} - {...props} - style={{ width: 20, height: 20 }} - /> - ); -}); +)((props, ref) => { + const { style, ...rest } = props as any; + return ( + <PeopledatalabsIconSVG + ref={ref} + {...rest} + style={{ width: 20, height: 20, ...(style || {}) }} + /> + ); +});src/frontend/src/icons/GoogleTasks/googletasks.jsx (1)
4-4: Remove non-standard namespace attribute.xmlns:v isn’t needed and may cause linting/tooling issues.
- xmlns:v="https://svgstorm.com"src/frontend/src/icons/googlemeet/googlemeet.jsx (1)
1-7: Propagate props to (and drop px for consistency).Enable className, style, and future isDark usage by spreading props. Optional: use numeric width/height.
- <svg + <svg + {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" - width="21px" - height="21px" + width="21" + height="21" >src/frontend/src/icons/googlesheets/googlesheets.jsx (1)
5-6: Fit SVG to wrapper: prefer 100% sizing instead of fixed pxSince the icon is wrapped in a fixed 22x22 container, let the SVG scale to the wrapper.
- width="21px" - height="21px" + width="100%" + height="100%"src/frontend/src/icons/supabase/SupabaseIcon.jsx (1)
4-5: Fit SVG to wrapper: prefer 100% sizing instead of emWrapped by a fixed 22x22 span; scaling the SVG to 100% avoids font-size coupling and keeps consistent sizing.
- width="1.1em" - height="1.1em" + width="100%" + height="100%"src/frontend/src/icons/Elevenlabs/elevenlabs.jsx (1)
1-11: Pass through props and support dark mode color.Spread props on and use isDark to set fill so the icon adapts to themes.
Apply this diff:
const Icon = (props) => ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="22px" height="22px" + {...props} > - <path d="M5,5v40h40V5H5z M24,34h-4V16h4V34z M30,34h-4V16h4V34z" /> + <path + fill={props?.isDark ? "#fff" : "#000"} + d="M5,5v40h40V5H5z M24,34h-4V16h4V34z M30,34h-4V16h4V34z" + /> </svg> ); export default Icon;src/frontend/src/icons/SerpAPIComposio/index.tsx (1)
5-10: Wrap in the standard 22×22 inline-grid container for consistency.Most icons use a 22×22 span wrapper to standardize sizing/centering.
Apply this diff:
export const SerpSearchIconComposio = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { - return <SvgSerpSearchAPI ref={ref} {...props} />; + return ( + <span + style={{ + display: "inline-grid", + width: 22, + height: 22, + placeItems: "center", + flexShrink: 0, + }} + > + <SvgSerpSearchAPI ref={ref} {...props} /> + </span> + ); });src/frontend/src/icons/github/index.tsx (1)
9-21: Use 22×22 container to match the rest of the set.Most wrappers use width/height: 22 on the container; this one uses 24. Align for visual consistency.
Apply this diff:
return ( <span style={{ display: "inline-grid", - width: 24, - height: 24, + width: 22, + height: 22, placeItems: "center", flexShrink: 0, }} > <GithubIconSVG ref={ref} {...props} style={{ width: 22, height: 22 }} /> </span> );src/frontend/src/icons/Apollo/apollo.jsx (1)
2-8: Forward props to SVG and drop unused namespace attribute.Passing {...props} enables className/style/ARIA. The extra xmlns:v is unnecessary noise.
Apply this diff:
<svg - xmlns="http://www.w3.org/2000/svg" - xmlns:v="https://svgstorm.com" + xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 330" width="18" height="18" + {...props} >src/frontend/src/icons/Googlebigquery/googlebigquery.jsx (1)
1-9: Forward refs to the underlying SVG to avoid ref warnings.This component doesn’t forward refs; wrappers pass ref to it. Convert to forwardRef and attach ref to .
+import { forwardRef } from "react"; -const Icon = (props) => ( +const Icon = forwardRef((props, ref) => ( <svg + ref={ref} height="21" width="21" xmlns="http://www.w3.org/2000/svg" viewBox="-1.633235433328256 7.0326093303156565 131.26574682416876 114.63439066968435" {...props} > @@ -); +)); export default Icon;src/frontend/src/icons/slackComposio/index.tsx (1)
18-19: Ensure inner Slack SVG forwards refs.If ./slack is a plain function component, the ref here won’t attach to the SVG. Consider converting it to forwardRef similarly to other icons.
src/frontend/src/icons/Coda/coda.jsx (1)
2-7: Spread incoming props onto the SVG for consistency.Other icons allow className/style/ARIA to flow through. Spread props here as well.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="19px" height="19px" + {...props} >src/frontend/src/icons/Fireflies/fireflies.jsx (1)
2-8: Expose standard SVG props and (optionally) drop nonstandard namespace.
- Spread props onto to allow styling/ARIA.
- Optional: remove xmlns:v unless it’s required; it’s typically unnecessary in JSX.
<svg xmlns="http://www.w3.org/2000/svg" - xmlns:v="https://svgstorm.com" viewBox="0 0 212 212" width="19" height="19" + {...props} >src/frontend/src/icons/Bitbucket/bitbucket.jsx (1)
2-9: Allow className/style/ARIA by spreading props onto the SVG.Align with other icons by forwarding props to .
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18" id="Bitbucket-Logo--Streamline-Logos" height="18" width="18" + {...props} >src/frontend/src/icons/SerpAPIComposio/SerpSearch.jsx (1)
1-3: Optional: Make the SVG ref‑friendly.The wrapper likely forwards a ref; convert this component to forwardRef and attach ref to to avoid React warnings.
-const SvgSerpSearchAPI = (props) => ( - <svg +const SvgSerpSearchAPI = forwardRef((props, ref) => ( + <svg + ref={ref} version="1.0"Add this import at the top of the file:
import React, { forwardRef } from "react";Also applies to: 11-11, 536-537
src/lfx/src/lfx/components/composio/youtube_composio.py (1)
5-6: Icon key present but inconsistent casinglazyIconsMapping contains "youTube" (src/frontend/src/icons/lazyIconImports.ts:417) and Composio uses icon = "youTube" — mapping resolves; most other YouTube components use "YouTube" and eagerIconImports maps "YouTube" (src/frontend/src/icons/eagerIconImports.ts:234). Normalize casing (prefer "YouTube") or add a "YouTube" alias to lazyIconsMapping to avoid confusion.
src/frontend/src/icons/Mem0Composio/SvgMem.jsx (1)
5-6: Let the wrapper control size; drop hardcoded width/height.Removes potential visual inconsistencies; the 22×22 wrapper already standardizes size.
- width="21" - height="21"src/frontend/src/icons/discord/discord.jsx (1)
2-7: Standardize size to 22px and pass through props.Aligns with the new 22×22 wrappers and keeps the SVG composable (className, style, etc.).
- <svg + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" - width="19px" - height="19px" - > + width="22px" + height="22px" + {...props} + >src/frontend/src/icons/github/github.jsx (1)
2-7: Use 22px to match icon system and forward props.Keeps sizing consistent and enables external styling/ARIA.
- <svg + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" - width="23px" - height="23px" - > + width="22px" + height="22px" + {...props} + >src/frontend/src/icons/slackComposio/slack.jsx (1)
2-7: Forward props to the SVG (theming, className, ARIA).This matches other icons and improves composability.
- <svg + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="22px" height="22px" - > + {...props} + >Additionally, consider supporting an isDark prop for theme-aware variants if needed.
src/lfx/src/lfx/components/composio/canva_composio.py (1)
10-11: Set explicit default tools for the Canva componentAvoid relying on the implicit fallback to the first N actions — make behavior deterministic by setting a curated set of tool slugs in set_default_tools, e.g. self._default_tools.update({"search_images", "create_design", "export_design"}).
Verified: component is exported in src/lfx/src/lfx/components/composio/init.py and icon = "Canva" in src/lfx/src/lfx/components/composio/canva_composio.py matches the frontend entry in src/frontend/src/icons/lazyIconImports.ts.
src/lfx/src/lfx/components/composio/mem0_composio.py (1)
10-11: Set explicit default tools for Mem0 component (avoid implicit fallback).
Populate self._default_tools in set_default_tools so enabled tools are explicit.
Suggested example: def set_default_tools(self): self._default_tools.update({'mem0_tool_slug1', 'mem0_tool_slug2'})
Confirmed: ComposioMem0APIComponent exported in src/lfx/src/lfx/components/composio/init.py (line 35); icon key 'Mem0Composio' present in src/frontend/src/icons/lazyIconImports.ts (lines 259–260).src/lfx/src/lfx/components/composio/firecrawl_composio.py (1)
10-11: Implement or explicitly no-op set_default_tools.Right now this is a docstring-only no-op. Either explicitly
passor populate_default_toolsto make intent clear and avoid relying on the implicit base fallback.Apply:
def set_default_tools(self): - """Set the default tools for Firecrawl component.""" + """Set the default tools for Firecrawl component.""" + passsrc/lfx/src/lfx/components/composio/apollo_composio.py (1)
10-11: Clarify set_default_tools behavior.Same as others in this PR: add an explicit
passor set_default_toolsto document intent.def set_default_tools(self): - """Set the default tools for Apollo component.""" + """Set the default tools for Apollo component.""" + passsrc/lfx/src/lfx/components/composio/fireflies_composio.py (1)
10-11: Clarify set_default_tools behavior.Add
passor set_default_toolsso it’s explicit this component uses the base fallback.def set_default_tools(self): - """Set the default tools for Fireflies component.""" + """Set the default tools for Fireflies component.""" + passsrc/lfx/src/lfx/components/composio/heygen_composio.py (1)
10-11: Clarify set_default_tools behavior.Make the no-op explicit or define
_default_tools.def set_default_tools(self): - """Set the default tools for Heygen component.""" + """Set the default tools for Heygen component.""" + passsrc/frontend/src/icons/Youtube/index.tsx (1)
9-19: A11y: mark decorative wrapper as hidden from assistive tech.Add
aria-hidden="true"to the wrapper span. Everything else looks good and matches the 22×22 wrapper convention.return ( - <span + <span + aria-hidden="true" style={{ display: "inline-grid", width: 22, height: 22, placeItems: "center", flexShrink: 0, }} > <YoutubeIconSVG ref={ref} {...props} /> </span> );src/lfx/src/lfx/components/composio/exa_composio.py (1)
10-11: Clarify set_default_tools behavior.Same recommendation as others: add explicit
passor set_default_tools.def set_default_tools(self): - """Set the default tools for Exa component.""" + """Set the default tools for Exa component.""" + passsrc/frontend/src/icons/Heygen/index.tsx (1)
9-20: A11y: mark decorative wrapper as hidden from assistive tech.Add
aria-hidden="true"to the wrapper span. Pattern otherwise matches the repo’s icon wrappers.return ( - <span + <span + aria-hidden="true" style={{ display: "inline-grid", width: 22, height: 22, placeItems: "center", flexShrink: 0, }} > <HeygenIconSVG ref={ref} {...props} /> </span> );src/lfx/src/lfx/components/composio/elevenlabs_composio.py (1)
10-11: Optional: implement meaningful defaults in set_default_tools().Leaving this override empty falls back to first N tools; if that’s intended, consider removing the override to reduce noise, or set
_default_toolsexplicitly.
| width="23px" | ||
| height="23px" |
There was a problem hiding this comment.
Fix 23x23 inner SVG inside 22x22 wrapper (clipping/overflow risk).
The wrapper is 22x22, but the SVG is 23x23. Make the SVG scale to the container.
- width="23px"
- height="23px"
+ width="100%"
+ height="100%"📝 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.
| width="23px" | |
| height="23px" | |
| width="100%" | |
| height="100%" |
🤖 Prompt for AI Agents
In src/frontend/src/icons/asana/asana.jsx around lines 5-6, the inner SVG is
hard-coded to 23x23 while its wrapper is 22x22 which risks clipping; remove the
fixed pixel width/height on the SVG and make it scale to the container by using
responsive sizing (e.g., set width and height to 100% or remove them entirely)
and ensure a proper viewBox is present so the SVG scales correctly; also keep or
set preserveAspectRatio as needed to maintain correct aspect and center the
graphic.
| return ( | ||
| <span | ||
| style={{ | ||
| display: "inline-grid", | ||
| width: 22, | ||
| height: 22, | ||
| placeItems: "center", | ||
| flexShrink: 0, | ||
| }} | ||
| > | ||
| <AsanaIconSVG ref={ref} {...props} /> | ||
| </span> | ||
| ); |
There was a problem hiding this comment.
🧩 Analysis chain
Wrapper LGTM; verify inner SVG forwards ref and scales to 22x22.
The container pattern is consistent. After updating asana.jsx to forwardRef and use width/height 100%, sizing and ref will be correct.
Run to verify:
🏁 Script executed:
#!/bin/bash
# Confirm forwardRef usage and scalable sizing in asana.jsx
rg -n -C2 'forwardRef' src/frontend/src/icons/asana/asana.jsx
rg -n -C1 'width="100%"|height="100%"' src/frontend/src/icons/asana/asana.jsxLength of output: 0
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "--- rg search for 'asana' under src/frontend ---"
rg -n --hidden -S 'asana' src/frontend || true
echo "--- rg search for 'AsanaIconSVG' ---"
rg -n --hidden -S 'AsanaIconSVG' src/frontend || true
echo "--- find files named *asana* under src/frontend (case-insensitive) ---"
find src/frontend -type f -iname '*asana*' -maxdepth 6 -print || true
echo "--- show common candidate files if they exist ---"
for f in \
src/frontend/src/icons/asana/index.tsx \
src/frontend/src/icons/asana/asana.tsx \
src/frontend/src/icons/asana/asana.jsx \
src/frontend/src/icons/asana/index.jsx; do
if [ -f "$f" ]; then
echo "==== FILE: $f ===="
sed -n '1,240p' "$f" || true
fi
doneLength of output: 8146
Fix asana SVG: forward ref and use responsive sizing
src/frontend/src/icons/asana/asana.jsx exports Icon without forwarding refs and with fixed width/height="23px" — update it to forward the ref to the and use width/height="100%" (or remove the fixed attributes) and spread {...props} on the so the wrapper’s 22×22 container and ref work.
🤖 Prompt for AI Agents
In src/frontend/src/icons/asana/index.tsx around lines 6 to 18, the current
AsanaIconSVG is rendered inside a 22×22 wrapper but the underlying SVG component
(src/frontend/src/icons/asana/asana.jsx) does not forward refs and hardcodes
width/height="23px", preventing the wrapper sizing and ref from working; update
the asana.jsx export to use React.forwardRef to pass ref to the <svg>, remove or
replace fixed width/height with width="100%" and height="100%" (or omit them)
and spread {...props} onto the <svg> so the wrapper’s 22×22 container and ref
are applied correctly.
| export const BitbucketIcon = forwardRef< | ||
| SVGSVGElement, | ||
| React.PropsWithChildren<{}> | ||
| >((props, ref) => { | ||
| return ( | ||
| <span | ||
| style={{ | ||
| display: "inline-grid", | ||
| width: 22, | ||
| height: 22, | ||
| placeItems: "center", | ||
| flexShrink: 0, | ||
| }} | ||
| > | ||
| <BitbucketIconSVG ref={ref} {...props} /> | ||
| </span> | ||
| ); | ||
| }); |
There was a problem hiding this comment.
🧩 Analysis chain
Consistent wrapper + ref forwarding — looks good.
Matches the established 22x22 inline-grid pattern and uses forwardRef correctly.
Please confirm the underlying SVG component forwards refs; otherwise React will warn when passing a ref to a function component.
🏁 Script executed:
#!/bin/bash
# Verify underlying Bitbucket SVG supports refs
rg -n -C2 -e 'forwardRef|ref=' src/frontend/src/icons/Bitbucket/Length of output: 758
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Listing files in the Bitbucket icon directory:"
ls -la src/frontend/src/icons/Bitbucket || true
echo
echo "Show candidate bitbucket file(s):"
sed -n '1,240p' src/frontend/src/icons/Bitbucket/bitbucket* || trueLength of output: 1712
Underlying Bitbucket SVG doesn't forward refs — update bitbucket.jsx
src/frontend/src/icons/Bitbucket/bitbucket.jsx exports a plain function component while index.tsx passes a ref to it (<BitbucketIconSVG ref={ref} … /> at src/frontend/src/icons/Bitbucket/index.tsx:18); this will trigger a React warning. Fix by converting bitbucket.jsx to use React.forwardRef and attach the ref to the , or change the wrapper to forward the ref to the outer instead.
🤖 Prompt for AI Agents
In src/frontend/src/icons/Bitbucket/index.tsx lines 4-21: the wrapper passes a
ref into BitbucketIconSVG but the component exported from
src/frontend/src/icons/Bitbucket/bitbucket.jsx is a plain function and won’t
accept refs; update bitbucket.jsx to use React.forwardRef so the ref can be
attached to the <svg>. Concretely: import React and forwardRef, change the
exported component to forwardRef((props, ref) => { ... }), accept props and ref
params, attach the ref to the root <svg> element (e.g., <svg ref={ref} ...>),
and keep props spread on the svg; ensure the export remains the same name so
index.tsx import still resolves.
| const Icon = (props) => ( | ||
| <svg | ||
| viewBox="0 0 508 508" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="19" | ||
| height="19" | ||
| fill-rule="evenodd" | ||
| clip-rule="evenodd" | ||
| stroke-linejoin="round" | ||
| stroke-miterlimit="2" | ||
| {...props} | ||
| > | ||
| <g transform="matrix(.26718 0 0 .26718 0 0)"> | ||
| <circle cx="950" cy="950" r="950" fill="#7d2ae7" /> | ||
| <circle cx="950" cy="950" r="950" fill="url(#prefix___Radial1)" /> | ||
| <circle cx="950" cy="950" r="950" fill="url(#prefix___Radial2)" /> | ||
| <circle cx="950" cy="950" r="950" fill="url(#prefix___Radial3)" /> | ||
| <circle cx="950" cy="950" r="950" fill="url(#prefix___Radial4)" /> | ||
| </g> | ||
| <path | ||
| d="M446.744 276.845c-.665 0-1.271.43-1.584 1.33-4.011 11.446-9.43 18.254-13.891 18.254-2.563 0-3.6-2.856-3.6-7.336 0-11.21 6.71-34.982 10.095-45.82.392-1.312.646-2.485.646-3.483 0-3.15-1.722-4.696-5.987-4.696-4.598 0-9.547 1.8-14.36 10.233-1.663-7.435-6.691-10.683-13.715-10.683-8.12 0-15.965 5.224-22.421 13.696-6.456 8.471-14.048 11.25-19.76 9.88 4.108-10.057 5.634-17.57 5.634-23.145 0-8.746-4.324-14.028-11.308-14.028-10.624 0-16.747 10.134-16.747 20.797 0 8.237 3.736 16.708 11.954 20.817-6.887 15.573-16.943 29.66-20.758 29.66-4.93 0-6.379-24.123-6.105-41.38.176-9.9.998-10.408.998-13.401 0-1.722-1.115-2.896-5.595-2.896-10.448 0-13.676 8.844-14.165 18.998a50.052 50.052 0 011.8 11.406c-4.363 15.573-13.363 27.39-19.232 27.39-2.72 0-3.463-2.72-3.463-6.28 0-11.21 6.28-25.219 6.28-37.173 0-8.784-3.854-14.34-11.112-14.34-8.55 0-19.858 10.173-30.56 29.229 3.521-14.595 4.97-28.721-5.459-28.721a14.115 14.115 0 00-6.476 1.683 3.689 3.689 0 00-2.113 3.56c.998 15.535-12.521 55.329-25.336 55.329-2.328 0-3.463-2.524-3.463-6.593 0-11.23 6.691-34.943 10.056-45.801.43-1.409.666-2.622.666-3.678 0-2.974-1.84-4.5-6.007-4.5-4.578 0-9.547 1.741-14.34 10.174-1.683-7.435-6.711-10.683-13.735-10.683-11.523 0-24.397 12.19-30.051 28.076-7.572 21.208-22.832 41.692-43.375 41.692-18.645 0-28.486-15.515-28.486-40.03 0-35.392 25.982-64.308 45.253-64.308 9.215 0 13.617 5.869 13.617 14.869 0 10.897-6.085 15.964-6.085 20.112 0 1.272 1.057 2.524 3.15 2.524 8.374 0 18.234-9.841 18.234-23.262 0-13.422-10.897-23.243-30.168-23.243-31.851 0-63.898 32.047-63.898 73.113 0 32.673 16.121 52.374 44 52.374 19.017 0 35.628-14.79 44.588-32.047 1.018 14.302 7.513 21.776 17.413 21.776 8.804 0 15.925-5.243 21.364-14.458 2.094 9.645 7.65 14.36 14.87 14.36 8.275 0 15.201-5.243 21.794-14.986-.097 7.65 1.644 14.85 8.276 14.85 3.13 0 6.867-.725 7.533-3.464 6.984-28.877 24.24-52.453 29.523-52.453 1.565 0 1.995 1.507 1.995 3.287 0 7.846-5.537 23.928-5.537 34.2 0 11.092 4.716 18.43 14.459 18.43 10.8 0 21.775-13.227 29.092-32.556 2.29 18.058 7.24 32.633 14.987 32.633 9.508 0 26.392-20.014 36.625-41.203 4.01.509 10.036.372 15.827-3.717-2.465 6.241-3.912 13.07-3.912 19.897 0 19.663 9.39 25.18 17.47 25.18 8.785 0 15.907-5.243 21.365-14.458 1.8 8.315 6.398 14.34 14.85 14.34 13.225 0 24.71-13.519 24.71-24.612 0-2.934-1.252-4.715-2.72-4.715zm-274.51 18.547c-5.342 0-7.435-5.38-7.435-13.401 0-13.93 9.528-37.193 19.604-37.193 4.402 0 6.065 5.185 6.065 11.524 0 14.145-9.059 39.07-18.235 39.07zm182.948-41.574c-3.189-3.796-4.343-8.961-4.343-13.559 0-5.673 2.074-10.467 4.558-10.467 2.485 0 3.248 2.446 3.248 5.85 0 5.693-2.035 14.008-3.463 18.176zm41.418 41.574c-5.34 0-7.434-6.182-7.434-13.401 0-13.441 9.528-37.193 19.682-37.193 4.402 0 5.967 5.146 5.967 11.524 0 14.145-8.902 39.07-18.215 39.07z" | ||
| fill="#fff" | ||
| fill-rule="nonzero" | ||
| /> | ||
| <defs> | ||
| <radialGradient | ||
| id="prefix___Radial1" | ||
| cx="0" | ||
| cy="0" | ||
| r="1" | ||
| gradientUnits="userSpaceOnUse" | ||
| gradientTransform="scale(1469.491) rotate(-49.416 1.37 .302)" | ||
| > | ||
| <stop offset="0" stop-color="#6420ff" /> | ||
| <stop offset="1" stop-color="#6420ff" stop-opacity="0" /> | ||
| </radialGradient> | ||
| <radialGradient | ||
| id="prefix___Radial2" | ||
| cx="0" | ||
| cy="0" | ||
| r="1" | ||
| gradientUnits="userSpaceOnUse" | ||
| gradientTransform="rotate(54.703 42.717 594.194) scale(1657.122)" | ||
| > | ||
| <stop offset="0" stop-color="#00c4cc" /> | ||
| <stop offset="1" stop-color="#00c4cc" stop-opacity="0" /> | ||
| </radialGradient> | ||
| <radialGradient | ||
| id="prefix___Radial3" | ||
| cx="0" | ||
| cy="0" | ||
| r="1" | ||
| gradientUnits="userSpaceOnUse" | ||
| gradientTransform="matrix(1023 -1030 473.711 470.491 367 1684)" | ||
| > | ||
| <stop offset="0" stop-color="#6420ff" /> | ||
| <stop offset="1" stop-color="#6420ff" stop-opacity="0" /> | ||
| </radialGradient> | ||
| <radialGradient | ||
| id="prefix___Radial4" | ||
| cx="0" | ||
| cy="0" | ||
| r="1" | ||
| gradientUnits="userSpaceOnUse" | ||
| gradientTransform="matrix(595.999 1372 -2298.41 998.431 777 256)" | ||
| > | ||
| <stop offset="0" stop-color="#00c4cc" stop-opacity=".73" /> | ||
| <stop offset="0" stop-color="#00c4cc" /> | ||
| <stop offset="1" stop-color="#00c4cc" stop-opacity="0" /> | ||
| </radialGradient> | ||
| </defs> | ||
| </svg> | ||
| ); | ||
| export default Icon; |
There was a problem hiding this comment.
Fix ref forwarding (wrap with forwardRef) and normalize SVG attribute names.
Passing ref to a plain function component will not work. Wrap the SVG component with forwardRef and attach ref to <svg>. Also, use React’s camelCase SVG attributes to avoid DOM warnings. Consider wiring isDark to the white path fill to satisfy dark-mode support.
Apply:
+import React, { forwardRef } from "react";
-const Icon = (props) => (
- <svg
+const Icon = forwardRef(function CanvaIcon(props, ref) {
+ const { isDark, ...rest } = props;
+ return (
+ <svg
viewBox="0 0 508 508"
xmlns="http://www.w3.org/2000/svg"
- width="19"
- height="19"
- fill-rule="evenodd"
- clip-rule="evenodd"
- stroke-linejoin="round"
- stroke-miterlimit="2"
- {...props}
+ width={19}
+ height={19}
+ fillRule="evenodd"
+ clipRule="evenodd"
+ strokeLinejoin="round"
+ strokeMiterlimit={2}
+ ref={ref}
+ {...rest}
>
@@
- <path
+ <path
d="M446.744 276.845c-.665 0-1.271.43-1.584 1.33-4.011 11.446-9.43 18.254-13.891 18.254-2.563 0-3.6-2.856-3.6-7.336 0-11.21 6.71-34.982 10.095-45.82.392-1.312.646-2.485.646-3.483 0-3.15-1.722-4.696-5.987-4.696-4.598 0-9.547 1.8-14.36 10.233-1.663-7.435-6.691-10.683-13.715-10.683-8.12 0-15.965 5.224-22.421 13.696-6.456 8.471-14.048 11.25-19.76 9.88 4.108-10.057 5.634-17.57 5.634-23.145 0-8.746-4.324-14.028-11.308-14.028-10.624 0-16.747 10.134-16.747 20.797 0 8.237 3.736 16.708 11.954 20.817-6.887 15.573-16.943 29.66-20.758 29.66-4.93 0-6.379-24.123-6.105-41.38.176-9.9.998-10.408.998-13.401 0-1.722-1.115-2.896-5.595-2.896-10.448 0-13.676 8.844-14.165 18.998a50.052 50.052 0 011.8 11.406c-4.363 15.573-13.363 27.39-19.232 27.39-2.72 0-3.463-2.72-3.463-6.28 0-11.21 6.28-25.219 6.28-37.173 0-8.784-3.854-14.34-11.112-14.34-8.55 0-19.858 10.173-30.56 29.229 3.521-14.595 4.97-28.721-5.459-28.721a14.115 14.115 0 00-6.476 1.683 3.689 3.689 0 00-2.113 3.56c.998 15.535-12.521 55.329-25.336 55.329-2.328 0-3.463-2.524-3.463-6.593 0-11.23 6.691-34.943 10.056-45.801.43-1.409.666-2.622.666-3.678 0-2.974-1.84-4.5-6.007-4.5-4.578 0-9.547 1.741-14.34 10.174-1.683-7.435-6.711-10.683-13.735-10.683-11.523 0-24.397 12.19-30.051 28.076-7.572 21.208-22.832 41.692-43.375 41.692-18.645 0-28.486-15.515-28.486-40.03 0-35.392 25.982-64.308 45.253-64.308 9.215 0 13.617 5.869 13.617 14.869 0 10.897-6.085 15.964-6.085 20.112 0 1.272 1.057 2.524 3.15 2.524 8.374 0 18.234-9.841 18.234-23.262 0-13.422-10.897-23.243-30.168-23.243-31.851 0-63.898 32.047-63.898 73.113 0 32.673 16.121 52.374 44 52.374 19.017 0 35.628-14.79 44.588-32.047 1.018 14.302 7.513 21.776 17.413 21.776 8.804 0 15.925-5.243 21.364-14.458 2.094 9.645 7.65 14.36 14.87 14.36 8.275 0 15.201-5.243 21.794-14.986-.097 7.65 1.644 14.85 8.276 14.85 3.13 0 6.867-.725 7.533-3.464 6.984-28.877 24.24-52.453 29.523-52.453 1.565 0 1.995 1.507 1.995 3.287 0 7.846-5.537 23.928-5.537 34.2 0 11.092 4.716 18.43 14.459 18.43 10.8 0 21.775-13.227 29.092-32.556 2.29 18.058 7.24 32.633 14.987 32.633 9.508 0 26.392-20.014 36.625-41.203 4.01.509 10.036.372 15.827-3.717-2.465 6.241-3.912 13.07-3.912 19.897 0 19.663 9.39 25.18 17.47 25.18 8.785 0 15.907-5.243 21.365-14.458 1.8 8.315 6.398 14.34 14.85 14.34 13.225 0 24.71-13.519 24.71-24.612 0-2.934-1.252-4.715-2.72-4.715zm-274.51 18.547c-5.342 0-7.435-5.38-7.435-13.401 0-13.93 9.528-37.193 19.604-37.193 4.402 0 6.065 5.185 6.065 11.524 0 14.145-9.059 39.07-18.235 39.07zm182.948-41.574c-3.189-3.796-4.343-8.961-4.343-13.559 0-5.673 2.074-10.467 4.558-10.467 2.485 0 3.248 2.446 3.248 5.85 0 5.693-2.035 14.008-3.463 18.176zm41.418 41.574c-5.34 0-7.434-6.182-7.434-13.401 0-13.441 9.528-37.193 19.682-37.193 4.402 0 5.967 5.146 5.967 11.524 0 14.145-8.902 39.07-18.215 39.07z"
- fill="#fff"
- fill-rule="nonzero"
+ fill={isDark ? "#fff" : "#fff"}
+ fillRule="nonzero"
/>
@@
- <stop offset="0" stop-color="#6420ff" />
- <stop offset="1" stop-color="#6420ff" stop-opacity="0" />
+ <stop offset="0" stopColor="#6420ff" />
+ <stop offset="1" stopColor="#6420ff" stopOpacity="0" />
@@
- <stop offset="0" stop-color="#00c4cc" />
- <stop offset="1" stop-color="#00c4cc" stop-opacity="0" />
+ <stop offset="0" stopColor="#00c4cc" />
+ <stop offset="1" stopColor="#00c4cc" stopOpacity="0" />
@@
- <stop offset="0" stop-color="#6420ff" />
- <stop offset="1" stop-color="#6420ff" stop-opacity="0" />
+ <stop offset="0" stopColor="#6420ff" />
+ <stop offset="1" stopColor="#6420ff" stopOpacity="0" />
@@
- <stop offset="0" stop-color="#00c4cc" stop-opacity=".73" />
- <stop offset="0" stop-color="#00c4cc" />
- <stop offset="1" stop-color="#00c4cc" stop-opacity="0" />
+ <stop offset="0" stopColor="#00c4cc" stopOpacity=".73" />
+ <stop offset="0" stopColor="#00c4cc" />
+ <stop offset="1" stopColor="#00c4cc" stopOpacity="0" />
- </svg>
-);
+ </svg>
+);
export default Icon;Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/frontend/src/icons/Canva/canva.jsx lines 1-74: the component must be
converted to a forwardRef so refs passed from parents attach to the <svg>;
change SVG attribute names to React camelCase (fill-rule→fillRule,
clip-rule→clipRule, stroke-linejoin→strokeLinejoin,
stroke-miterlimit→strokeMiterlimit, stop-color→stopColor,
stop-opacity→stopOpacity, etc.), accept an isDark prop and use it to
conditionally set the path fill (e.g. fill={isDark ? '<darkColor>' : '#fff'}),
and ensure the ref is attached to the <svg> and props are spread onto it.
| import React, { forwardRef } from "react"; | ||
| import CodaIconSVG from "./coda"; | ||
|
|
||
| export const CodaIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( | ||
| (props, ref) => { | ||
| return ( | ||
| <span | ||
| style={{ | ||
| display: "inline-grid", | ||
| width: 22, | ||
| height: 22, | ||
| placeItems: "center", | ||
| flexShrink: 0, | ||
| }} | ||
| > | ||
| <CodaIconSVG ref={ref} {...props} /> | ||
| </span> | ||
| ); | ||
| }, | ||
| ); |
There was a problem hiding this comment.
🧩 Analysis chain
Potential ref misuse: ensure inner SVG component uses forwardRef
<CodaIconSVG ref={ref} /> requires the inner SVG component to use forwardRef. If it’s a plain function, this will throw at runtime. Update the inner component or place the ref on the wrapper and switch the ref type to HTMLSpanElement.
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "PWD: $(pwd)"
echo "---- ls src/frontend/src/icons/Coda ----"
ls -la src/frontend/src/icons/Coda || true
echo
echo "---- Show coda.* files in Coda directory ----"
for f in src/frontend/src/icons/Coda/coda*; do
echo "===== $f ====="
sed -n '1,240p' "$f" || true
done
echo
echo "---- Search for forwardRef usage in icons ----"
rg -n --hidden --no-ignore-vcs 'forwardRef' src/frontend/src/icons -S || true
echo
echo "---- Search for identifier 'CodaIconSVG' in repo ----"
rg -n --hidden --no-ignore-vcs 'CodaIconSVG' -S || true
echo
echo "---- Search for default export in Coda directory ----"
rg -n --hidden --no-ignore-vcs 'export default' src/frontend/src/icons/Coda -S || trueLength of output: 30457
Fix ref forwarding for Coda icon
index.tsx forwards an SVG ref to CodaIconSVG, but src/frontend/src/icons/Coda/coda.jsx exports a plain function component (no forwardRef) — React will not attach the ref and this is a runtime issue.
- Convert src/frontend/src/icons/Coda/coda.jsx to use React.forwardRef<SVGSVGElement, React.PropsWithChildren<{}>> and forward the ref to the (preferred; matches repo pattern).
- Or move the ref to the wrapper in src/frontend/src/icons/Coda/index.tsx and change the forwarded ref type to HTMLSpanElement.
🤖 Prompt for AI Agents
In src/frontend/src/icons/Coda/index.tsx lines 1-20, the component currently
forwards an SVG ref to CodaIconSVG but the implementation in
src/frontend/src/icons/Coda/coda.jsx is a plain function component so the ref
will not be attached at runtime; fix this by converting
src/frontend/src/icons/Coda/coda.jsx to use React.forwardRef<SVGSVGElement,
React.PropsWithChildren<{}>> and forward the ref to the root <svg> element
(preferred to match repo pattern), ensuring types and exported component reflect
the forwardRef; alternatively, if you prefer to keep coda.jsx unchanged, change
the ref target in index.tsx to the wrapper <span> and update forwardRef
generic/type to HTMLSpanElement and pass ref to the <span> instead of
CodaIconSVG.
| width="1.1em" | ||
| height="1.1em" |
There was a problem hiding this comment.
Forward ref support is required (wrapper passes a ref to this component)
src/frontend/src/icons/supabase/index.tsx forwards a ref here. Convert to forwardRef and set ref on .
Example update (outside the changed lines):
import React, { forwardRef } from "react";
const SvgSupabaseIcon = forwardRef(function SvgSupabaseIcon(props, ref) {
return (
<svg ref={ref} xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 64 64" style={{ fill: "none" }} {...props}>
{/* existing paths unchanged */}
</svg>
);
});
export default SvgSupabaseIcon;🤖 Prompt for AI Agents
In src/frontend/src/icons/supabase/SupabaseIcon.jsx around lines 4-5, the
component must support forwarded refs because the wrapper passes a ref; convert
the component to use React.forwardRef by importing forwardRef, change the
component signature to accept (props, ref) via forwardRef, pass the ref into the
<svg> element (set ref={ref}), and keep existing props spread and SVG content
intact so the wrapper's ref points to the rendered <svg>.
| return ( | ||
| <span | ||
| style={{ | ||
| display: "inline-grid", | ||
| width: 22, | ||
| height: 22, | ||
| placeItems: "center", | ||
| flexShrink: 0, | ||
| }} | ||
| > | ||
| <TodoistIconSVG ref={ref} {...props} /> | ||
| </span> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
🧩 Analysis chain
Verify: lazyIconImports mapping and isDark support
Ensure the icon is registered in lazyIconImports and the underlying ./todoist component handles isDark and forwards refs.
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Check lazy icon import mapping for Todoist =="
rg -n -C2 -g 'src/frontend/src/icons/lazyIconImports.ts' -P '\b(Todoist|todoist)\b'
echo "== Locate and inspect underlying Todoist SVG component =="
# Find the component file
fd -a -t f -g 'src/frontend/src/icons/**/todoist.*'
# Show isDark and forwardRef usage (if present)
FILES=$(fd -t f -g 'src/frontend/src/icons/**/todoist.*')
for f in $FILES; do
echo "---- $f ----"
rg -n -C2 -P '\b(isDark|forwardRef)\b' "$f" || true
doneLength of output: 531
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Search for Todoist occurrences in icons directory =="
rg -n --hidden -S -g 'src/frontend/src/icons/**' 'TodoistIconSVG|TodoistIcon|export.*Todoist|/\btodoist\b|\<todoist\>' || true
echo
echo "== Show src/frontend/src/icons/todoist/index.tsx if present =="
if [ -f src/frontend/src/icons/todoist/index.tsx ]; then
sed -n '1,240p' src/frontend/src/icons/todoist/index.tsx
else
echo "src/frontend/src/icons/todoist/index.tsx not found"
fi
echo
echo "== Search for forwardRef and isDark usage in icons directory =="
rg -n --hidden -S -g 'src/frontend/src/icons/**' '\bforwardRef\b|\bisDark\b|\bisdark\b' || trueLength of output: 31900
🏁 Script executed:
#!/bin/bash
set -euo pipefail
DIR="src/frontend/src/icons/todoist"
echo "== Directory exists =="
if [ -d "$DIR" ]; then
echo "YES: $DIR"
else
echo "MISSING: $DIR"
fi
echo
echo "== List files =="
ls -la "$DIR" || true
echo
echo "== Print any files named todoist.* or Todoist.* in the dir =="
for f in "$DIR"/todoist.* "$DIR"/Todoist.*; do
if [ -f "$f" ]; then
echo "---- $f ----"
sed -n '1,240p' "$f"
fi
done
echo
echo "== Print all files in the dir (first 240 lines each) =="
for f in "$DIR"/*; do
if [ -f "$f" ]; then
echo "---- $f ----"
sed -n '1,240p' "$f"
fi
done
echo
echo "== Search for isDark / isdark / forwardRef usage in this dir =="
rg -n --hidden -S '\bisDark\b|\bisdark\b|\bforwardRef\b' "$DIR" || trueLength of output: 5081
Todoist icon: lazy mapping OK — make component forward refs and support isDark
lazyIconImports registers Todoist and index.tsx already forwards a ref to TodoistIconSVG, but src/frontend/src/icons/todoist/todoist.jsx is a plain functional component that neither forwards refs nor reads props.isDark. Update todoist.jsx to use React.forwardRef, attach the ref to the , and make the path fill conditional on props.isDark (e.g. props.isDark ? '#fff' : '#f44336').
Files: src/frontend/src/icons/todoist/todoist.jsx (update); src/frontend/src/icons/todoist/index.tsx (uses forwardRef); src/frontend/src/icons/lazyIconImports.ts (mapping present).
🤖 Prompt for AI Agents
In src/frontend/src/icons/todoist/index.tsx around lines 8 to 20, the index
forwards a ref to TodoistIconSVG but the actual component file
src/frontend/src/icons/todoist/todoist.jsx doesn't forward refs or handle the
isDark prop; update todoist.jsx to use React.forwardRef, accept (props, ref),
attach the ref to the root <svg> element, and make the path fill conditional on
props.isDark (e.g. props.isDark ? '#fff' : '#f44336') so the forwarded ref works
and dark mode is supported.
| @@ -1,5 +1,11 @@ | |||
| const Icon = (props) => ( | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
🧩 Analysis chain
Verify wrapper and lazy import mapping exist for Wrike.
Ensure an index.tsx wrapper uses forwardRef with a 22x22 container and that lazyIconImports maps the exact backend icon key.
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Checking for Wrike icon wrapper (index.tsx) with forwardRef and 22x22 container..."
fd -a --glob 'index.tsx' src/frontend/src/icons/wrike | while read -r f; do
echo "== $f =="
rg -n -C2 'forwardRef|22' "$f" || true
done
echo
echo "Checking lazy icon imports mapping for 'Wrike' or 'wrike' key..."
fd -a lazyIconImports.ts src/frontend/src/icons | while read -r f; do
echo "== $f =="
rg -n -C2 '"wrike"|\'wrike\'|"Wrike"|\'Wrike\'' "$f" || true
doneLength of output: 525
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "=== index.tsx content (wrike) ==="
index_file=$(fd -a --glob 'index.tsx' src/frontend/src/icons/wrike | head -n1 || true)
if [[ -n "$index_file" ]]; then
echo "== $index_file =="
sed -n '1,200p' "$index_file"
echo
echo "Search for '22' / width / height in index.tsx:"
rg -n -C2 '22|22px|width\s*=\s*["'"'"']?22|height\s*=\s*["'"'"']?22' "$index_file" || true
else
echo "index.tsx not found under src/frontend/src/icons/wrike"
fi
echo
echo "=== imported wrike file (wrike.*) ==="
wrike_file=$(fd -a --glob 'wrike.*' src/frontend/src/icons/wrike | head -n1 || true)
if [[ -n "$wrike_file" ]]; then
echo "== $wrike_file =="
sed -n '1,200p' "$wrike_file"
echo
echo "Search for width/height or 22 in imported wrike file:"
rg -n -C2 'width|height|22|22px' "$wrike_file" || true
else
echo "No wrike.* file found under src/frontend/src/icons/wrike"
fi
echo
echo "=== lazyIconImports.ts files under src/frontend/src/icons ==="
fd -a --glob 'lazyIconImports.ts' src/frontend/src/icons | while read -r f; do
echo "== $f =="
sed -n '1,200p' "$f"
echo
echo "Searching for keys 'wrike' or 'Wrike' in $f:"
rg -n -C2 '\bwrike\b|\bWrike\b' "$f" || true
doneLength of output: 10286
Fix Wrike icon: enforce 22×22 and confirm lazy mapping key
- src/frontend/src/icons/wrike/index.tsx — forwardRef present, but wrapper does not enforce a 22×22 container; set width/height={22} when rendering WrikeIconSVG or wrap it in a 22×22 container.
- src/frontend/src/icons/wrike/wrike.jsx — SVG has width="24" height="24"; change to 22 or remove static size so the wrapper controls dimensions.
- src/frontend/src/icons/lazyIconImports.ts — lazyIconsMapping includes "Wrike" → import("@/icons/wrike"); confirm the backend icon string exactly matches "Wrike" (case-sensitive) and update the key if it differs.
🤖 Prompt for AI Agents
In src/frontend/src/icons/wrike/wrike.jsx (line 1) and
src/frontend/src/icons/wrike/index.tsx (wrap/render lines), the SVG currently
declares width="24" height="24" and the forwardRef wrapper doesn’t guarantee a
22×22 container: remove the hardcoded width/height attributes from the SVG or
change them to 22, and update the wrapper to render the SVG with width={22}
height={22} or wrap it in a div/svg container that enforces 22×22 so sizing is
controlled by the wrapper; also check src/frontend/src/icons/lazyIconImports.ts
(mapping lines) to ensure the lazyIconsMapping key is exactly "Wrike"
(case-sensitive) — if the backend supplies a different casing/name, change the
mapping key to match exactly.
| display_name: str = "Firecrawl" | ||
| icon = "Firecrawl" | ||
| documentation: str = "https://docs.composio.dev" | ||
| app_name = "firecrawl" |
There was a problem hiding this comment.
🧩 Analysis chain
Verify frontend icon mapping for "Firecrawl".
The backend icon = "Firecrawl" must have a matching key in src/frontend/src/icons/lazyIconImports.ts.
Run:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file="src/frontend/src/icons/lazyIconImports.ts"
icons=(
"Firecrawl"
"Apollo"
"Fireflies"
"Heygen"
"SerpSearchComposio"
"ExaComposio"
)
echo "Checking lazy icon mappings in: $file"
for key in "${icons[@]}"; do
if rg -nP --no-heading --color=never $'(^|\\W)(["\\\']?'${key}'["\\\']?\\s*:)' "$file" >/dev/null; then
echo "OK: $key"
else
echo "MISSING: $key"
missing=1
fi
done
exit ${missing:-0}Length of output: 136
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file="src/frontend/src/icons/lazyIconImports.ts"
if [ ! -f "$file" ]; then
echo "MISSING_FILE: $file"
exit 2
fi
python - <<'PY'
import re,sys
file="src/frontend/src/icons/lazyIconImports.ts"
with open(file, 'r', encoding='utf-8') as f:
s=f.read()
icons=["Firecrawl","Apollo","Fireflies","Heygen","SerpSearchComposio","ExaComposio"]
missing=False
print("Checking lazy icon mappings in:",file)
for key in icons:
pattern=re.compile(r"(^|\\W)(['\"]?%s['\"]?\\s*:)" % re.escape(key))
if pattern.search(s):
print("OK:",key)
else:
print("MISSING:",key)
missing=True
sys.exit(1 if missing else 0)
PYLength of output: 192
Add missing frontend icon mappings for Composio icons
Backend sets icon = "Firecrawl" (src/lfx/src/lfx/components/composio/firecrawl_composio.py:5-8). Frontend src/frontend/src/icons/lazyIconImports.ts is missing these exact keys: Firecrawl, Apollo, Fireflies, Heygen, SerpSearchComposio, ExaComposio — keys are case-sensitive and must match the backend strings exactly; add matching entries to lazyIconsMapping so the icons render.
🤖 Prompt for AI Agents
In src/lfx/src/lfx/components/composio/firecrawl_composio.py lines 5-8 the
backend sets icon = "Firecrawl" (case-sensitive); the frontend file
src/frontend/src/icons/lazyIconImports.ts is missing matching keys, causing
icons not to render. Update lazyIconImports.ts to add entries with exact
case-sensitive keys: "Firecrawl", "Apollo", "Fireflies", "Heygen",
"SerpSearchComposio", and "ExaComposio"; import the corresponding icon
components and add them to the lazyIconsMapping object so each backend string
maps to the correct lazy-loaded icon.
| class ComposioGmailAPIComponent(ComposioBaseComponent): | ||
| display_name: str = "Gmail" | ||
| icon = "Google" | ||
| icon = "Gmail" |
There was a problem hiding this comment.
🧩 Analysis chain
Verify frontend icon mapping for “Gmail”
Icon strings must match a key in lazyIconImports.ts. Confirm “Gmail” exists and maps to the intended icon.
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate the lazy mapping file
map_file="$(fd -a lazyIconImports.ts | head -n1)"
echo "Mapping file: $map_file"
# Show mapping context
rg -n -C2 'lazyIconsMapping' "$map_file"
# Verify keys for updated/added icons
rg -n -C1 '"Gmail"|Googlesheets|Elevenlabs|Contentful|Coda|Supabase' "$map_file" || trueLength of output: 1080
Add a matching "Gmail" key to the frontend icon mapping or change the backend icon string
src/lfx/src/lfx/components/composio/gmail_composio.py sets icon = "Gmail", but src/frontend/src/icons/lazyIconImports.ts contains no "Gmail" entry — add an EXACT "Gmail" key to lazyIconsMapping mapping to the correct icon module, or change the backend string to an existing key.
🤖 Prompt for AI Agents
In src/lfx/src/lfx/components/composio/gmail_composio.py around line 6 the
backend sets icon = "Gmail", but the frontend mapping in
src/frontend/src/icons/lazyIconImports.ts has no "Gmail" key; either add an
EXACT "Gmail" entry to lazyIconsMapping pointing to the correct icon module
(matching the other mappings' format) or change the backend string to an
existing key already present in lazyIconsMapping so the names match; make the
change in the frontend mapping file if you want a new icon, or update the
backend file to use a current key if no new icon is required.
github-actions
Bot
added
enhancement
github-actions
Bot
added
enhancement
github-actions
Bot
added
enhancement
| xmlns="http://www.w3.org/2000/svg" | ||
| xmlns:v="https://svgstorm.com" | ||
| viewBox="0 0 330 330" |
There was a problem hiding this comment.
| xmlns="http://www.w3.org/2000/svg" | |
| xmlns:v="https://svgstorm.com" | |
| viewBox="0 0 330 330" | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 330 330" |
There was a problem hiding this comment.
Remove the xmlns:v it's causing a jsx namespace error
| xmlns="http://www.w3.org/2000/svg" | ||
| xmlns:v="https://svgstorm.com" | ||
| viewBox="0 0 212 212" |
There was a problem hiding this comment.
| xmlns="http://www.w3.org/2000/svg" | |
| xmlns:v="https://svgstorm.com" | |
| viewBox="0 0 212 212" | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 212 212" |
remove xmlns:v
| xmlns:v="https://svgstorm.com" | ||
| viewBox="0 0 506 480" |
There was a problem hiding this comment.
| xmlns:v="https://svgstorm.com" | |
| viewBox="0 0 506 480" | |
| viewBox="0 0 506 480" |
remove xmlns:v
github-actions
Bot
added
enhancement
github-actions
Bot
added
enhancement
edwinjosechittilappilly
left a comment
edwinjosechittilappilly
left a comment
There was a problem hiding this comment.
LGTM, Please check why new components are not visible in list in langflow
github-actions
Bot
added
enhancement
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
|
Please run the following command locally and commit the changes: make build_component_indexOr alternatively: LFX_DEV=1 uv run python scripts/build_component_index.pyThen commit and push the updated |
github-actions
Bot
added
enhancement
github-actions
Bot
added
enhancement
* feat: add Composio Components & logos tweak * Display name consistency * update init * fix: format * fix: suggested changes by Mike * feat: add Composio Components & logos tweak * Display name consistency * update init * fix: format * fix: suggested changes by Mike * updates components JSON * fix: format * updates components JSON * Remove unnecessary blank lines in __init__.py Cleaned up formatting by deleting extra blank lines in the _dynamic_imports dictionary for improved readability. * Update component_index.json * Update component_index.json * Update component_index.json * Update component_index.json --------- Co-authored-by: Edwin Jose <edwin.jose@datastax.com>
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
github-actions
Bot
added
enhancement
edwinjosechittilappilly
added
lgtm
|
Please run the following command locally and commit the changes: make build_component_indexOr alternatively: LFX_DEV=1 uv run python scripts/build_component_index.pyThen commit and push the updated |
|
|
can we close this PR? |
3 participants
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
Improvements
Refactor