feat: add new Composio components#9363
Closed
Uday-sidagana wants to merge 4 commits into
Closed
Conversation
Contributor
|
Hi! I'm 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:
|
autofix.ci
Uday-sidagana
changed the title
Contributor
|
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 WalkthroughSwitches composio package from lazy dynamic imports to eager explicit exports and adds new Composio API component classes for multiple services. Introduces corresponding frontend SVG icons and forwardRef wrappers, and updates the lazy icon import mapping to include these new icons and adjust existing entries. Changes
Sequence Diagram(s)sequenceDiagram
participant Importer
participant ComposioInit as composio.__init__
participant Submodules
Note over Importer,ComposioInit: Previous (lazy) behavior
Importer->>ComposioInit: access attribute (e.g., ComposioFigmaAPIComponent)
ComposioInit->>Submodules: dynamic import on demand
Submodules-->>ComposioInit: return class
ComposioInit-->>Importer: provide attribute
Note over Importer,ComposioInit: New (eager) behavior
Importer->>ComposioInit: import module
ComposioInit->>Submodules: import all exposed components at import time
Submodules-->>ComposioInit: loaded
Importer->>ComposioInit: access attribute
ComposioInit-->>Importer: provide already-imported attribute
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
github-actions
Bot
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 24
🔭 Outside diff range comments (2)
src/frontend/src/icons/asana/asana.jsx (1)
1-5: Missing dark mode support and props forwarding.The icon component doesn't support the required
isDarkprop for theme adaptation and doesn't forward props to the SVG element.Apply this diff to add dark mode support and props forwarding:
-const Icon = (props) => ( - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M 25 6.4140625 C 22.482 6.4140625 20.441406 8.4556563 20.441406 10.972656 C 20.441406 13.489656 22.483 15.529297 25 15.529297 C 27.517 15.529297 29.558594 13.489656 29.558594 10.972656 C 29.558594 8.4556563 27.517 6.4150625 25 6.4140625 z M 19.078125 16.669922 C 16.561125 16.669922 14.521484 18.710516 14.521484 21.228516 C 14.521484 23.745516 16.561125 25.785156 19.078125 25.785156 C 21.595125 25.785156 23.636719 23.745516 23.636719 21.228516 C 23.636719 18.710516 21.596125 16.669922 19.078125 16.669922 z M 30.921875 16.669922 C 28.404875 16.669922 26.363281 18.711516 26.363281 21.228516 C 26.363281 23.745516 28.404875 25.785156 30.921875 25.785156 C 33.438875 25.785156 35.478516 23.745516 35.478516 21.228516 C 35.477516 18.710516 33.438875 16.669922 30.921875 16.669922 z M 5.5039062 31.607422 C 3.0159062 31.607422 1 33.624281 1 36.113281 C 1 38.602281 3.0169062 40.621094 5.5039062 40.621094 C 6.5979063 40.621094 7.7908594 40.196063 8.3808594 39.414062 C 8.4208594 39.864063 8.7793438 40.4375 9.4023438 40.4375 L 9.7675781 40.4375 C 9.9085781 40.4375 10.025391 40.320687 10.025391 40.179688 L 10.025391 32.162109 L 10.023438 32.162109 C 10.016438 32.027109 9.9045781 31.919922 9.7675781 31.919922 L 8.6367188 31.919922 C 8.4997187 31.919922 8.3888594 32.027109 8.3808594 32.162109 L 8.3808594 32.814453 C 7.6888594 31.961453 6.5979063 31.607422 5.5039062 31.607422 z M 15.074219 31.607422 C 13.529219 31.607422 11.875 32.374422 11.875 34.232422 C 11.875 35.446422 12.792375 36.197547 13.859375 36.560547 C 14.926375 36.923547 16.623047 37.064656 16.623047 37.972656 C 16.623047 38.652656 15.845797 39.044922 15.091797 39.044922 C 14.300797 39.044922 13.476656 38.790578 12.722656 38.267578 C 12.652656 38.219578 12.493141 38.161172 12.369141 38.326172 L 11.748047 39.214844 C 11.748047 39.214844 11.613687 39.391031 11.804688 39.582031 C 12.719688 40.254031 13.81175 40.619141 15.09375 40.619141 C 16.78475 40.619141 18.314453 39.607703 18.314453 37.970703 C 18.314453 36.123703 16.672016 35.636469 15.166016 35.230469 C 14.302016 35.010469 13.564453 34.805203 13.564453 34.158203 C 13.564453 33.618203 14.132219 33.183594 15.074219 33.183594 C 16.016219 33.183594 16.634547 33.621469 16.810547 33.730469 C 16.986547 33.838469 17.109687 33.753344 17.179688 33.652344 L 17.804688 32.759766 C 17.804687 32.759766 17.941797 32.563578 17.716797 32.392578 C 17.062797 31.930578 16.052219 31.607422 15.074219 31.607422 z M 23.90625 31.607422 C 21.41925 31.607422 19.404297 33.624281 19.404297 36.113281 C 19.404297 38.602281 21.41925 40.621094 23.90625 40.621094 C 25.00025 40.621094 26.193203 40.196063 26.783203 39.414062 C 26.823203 39.864063 27.183641 40.4375 27.806641 40.4375 L 28.171875 40.4375 C 28.312875 40.4375 28.427734 40.320687 28.427734 40.179688 L 28.427734 32.162109 C 28.420734 32.027109 28.308875 31.919922 28.171875 31.919922 L 27.041016 31.919922 C 26.904016 31.919922 26.793156 32.027109 26.785156 32.162109 L 26.783203 32.162109 L 26.783203 32.814453 C 26.091203 31.961453 25.00025 31.607422 23.90625 31.607422 z M 44.478516 31.607422 C 41.991516 31.607422 39.974609 33.624281 39.974609 36.113281 C 39.974609 38.602281 41.991516 40.621094 44.478516 40.621094 C 45.572516 40.621094 46.765469 40.196063 47.355469 39.414062 C 47.394469 39.864063 47.755906 40.4375 48.378906 40.4375 L 48.742188 40.4375 C 48.883187 40.4375 49 40.320687 49 40.179688 L 49 32.162109 L 48.998047 32.162109 C 48.991047 32.027109 48.879188 31.919922 48.742188 31.919922 L 47.611328 31.919922 C 47.474328 31.919922 47.363469 32.027109 47.355469 32.162109 L 47.355469 32.814453 C 46.663469 31.961453 45.572516 31.607422 44.478516 31.607422 z M 34.720703 31.626953 C 33.598703 31.626953 32.678516 32.274031 32.353516 32.832031 C 32.283516 32.396031 32.052938 31.9375 31.335938 31.9375 L 30.970703 31.9375 C 30.829703 31.9375 30.712891 32.054313 30.712891 32.195312 L 30.712891 39.433594 L 30.712891 39.435547 L 30.712891 40.212891 L 30.714844 40.212891 C 30.721844 40.347891 30.833703 40.455078 30.970703 40.455078 L 32.099609 40.455078 C 32.116609 40.455078 32.133391 40.454172 32.150391 40.451172 C 32.157391 40.450172 32.165828 40.447313 32.173828 40.445312 C 32.181828 40.442312 32.189266 40.4405 32.197266 40.4375 C 32.207266 40.4335 32.216562 40.426875 32.226562 40.421875 C 32.231563 40.418875 32.235234 40.417062 32.240234 40.414062 C 32.251234 40.407063 32.263438 40.397672 32.273438 40.388672 C 32.275438 40.386672 32.276344 40.385766 32.277344 40.384766 C 32.288344 40.373766 32.298594 40.361609 32.308594 40.349609 C 32.336594 40.310609 32.354422 40.264844 32.357422 40.214844 L 32.357422 35.478516 C 32.357422 34.222516 33.374859 33.203125 34.630859 33.203125 C 35.885859 33.203125 36.902344 34.222516 36.902344 35.478516 L 36.904297 39.4375 C 36.904528 39.440602 36.904297 39.443932 36.904297 39.447266 L 36.904297 40.214844 L 36.90625 40.214844 C 36.91325 40.349844 37.025109 40.457031 37.162109 40.457031 L 38.292969 40.457031 C 38.309969 40.457031 38.32675 40.456125 38.34375 40.453125 C 38.35075 40.452125 38.357281 40.449266 38.363281 40.447266 C 38.372281 40.444266 38.381625 40.4415 38.390625 40.4375 C 38.399625 40.4335 38.409969 40.428828 38.417969 40.423828 C 38.422969 40.420828 38.428594 40.418062 38.433594 40.414062 C 38.443594 40.407063 38.453891 40.400578 38.462891 40.392578 C 38.464891 40.390578 38.46675 40.388719 38.46875 40.386719 C 38.47975 40.376719 38.489047 40.365516 38.498047 40.353516 C 38.498047 40.353516 38.5 40.351562 38.5 40.351562 C 38.528 40.312562 38.545828 40.266797 38.548828 40.216797 L 38.548828 40.214844 L 38.546875 39.691406 L 38.546875 35.542969 C 38.546875 33.204969 37.071703 31.626953 34.720703 31.626953 z M 5.5078125 33.183594 C 7.0898125 33.183594 8.3710938 34.495281 8.3710938 36.113281 C 8.3710938 37.731281 7.0888125 39.044922 5.5078125 39.044922 C 3.9258125 39.044922 2.6445313 37.731281 2.6445312 36.113281 C 2.6445312 34.495281 3.9258125 33.183594 5.5078125 33.183594 z M 23.910156 33.183594 C 25.492156 33.183594 26.775391 34.495281 26.775391 36.113281 C 26.775391 37.731281 25.491156 39.044922 23.910156 39.044922 C 22.328156 39.044922 21.046875 37.731281 21.046875 36.113281 C 21.046875 34.495281 22.328156 33.183594 23.910156 33.183594 z M 44.482422 33.183594 C 46.064422 33.183594 47.347656 34.495281 47.347656 36.113281 C 47.347656 37.731281 46.064422 39.044922 44.482422 39.044922 C 42.900422 39.044922 41.619141 37.731281 41.619141 36.113281 C 41.619141 34.495281 42.900422 33.183594 44.482422 33.183594 z"/></svg> -); +const Icon = ({ isDark, ...props }) => ( + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 50 50" + width="24px" + height="24px" + {...props} + > + <path + d="M 25 6.4140625 C 22.482 6.4140625 20.441406 8.4556563 20.441406 10.972656 C 20.441406 13.489656 22.483 15.529297 25 15.529297 C 27.517 15.529297 29.558594 13.489656 29.558594 10.972656 C 29.558594 8.4556563 27.517 6.4150625 25 6.4140625 z M 19.078125 16.669922 C 16.561125 16.669922 14.521484 18.710516 14.521484 21.228516 C 14.521484 23.745516 16.561125 25.785156 19.078125 25.785156 C 21.595125 25.785156 23.636719 23.745516 23.636719 21.228516 C 23.636719 18.710516 21.596125 16.669922 19.078125 16.669922 z M 30.921875 16.669922 C 28.404875 16.669922 26.363281 18.711516 26.363281 21.228516 C 26.363281 23.745516 28.404875 25.785156 30.921875 25.785156 C 33.438875 25.785156 35.478516 23.745516 35.478516 21.228516 C 35.477516 18.710516 33.438875 16.669922 30.921875 16.669922 z M 5.5039062 31.607422 C 3.0159062 31.607422 1 33.624281 1 36.113281 C 1 38.602281 3.0169062 40.621094 5.5039062 40.621094 C 6.5979063 40.621094 7.7908594 40.196063 8.3808594 39.414062 C 8.4208594 39.864063 8.7793438 40.4375 9.4023438 40.4375 L 9.7675781 40.4375 C 9.9085781 40.4375 10.025391 40.320687 10.025391 40.179688 L 10.025391 32.162109 L 10.023438 32.162109 C 10.016438 32.027109 9.9045781 31.919922 9.7675781 31.919922 L 8.6367188 31.919922 C 8.4997187 31.919922 8.3888594 32.027109 8.3808594 32.162109 L 8.3808594 32.814453 C 7.6888594 31.961453 6.5979063 31.607422 5.5039062 31.607422 z M 15.074219 31.607422 C 13.529219 31.607422 11.875 32.374422 11.875 34.232422 C 11.875 35.446422 12.792375 36.197547 13.859375 36.560547 C 14.926375 36.923547 16.623047 37.064656 16.623047 37.972656 C 16.623047 38.652656 15.845797 39.044922 15.091797 39.044922 C 14.300797 39.044922 13.476656 38.790578 12.722656 38.267578 C 12.652656 38.219578 12.493141 38.161172 12.369141 38.326172 L 11.748047 39.214844 C 11.748047 39.214844 11.613687 39.391031 11.804688 39.582031 C 12.719688 40.254031 13.81175 40.619141 15.09375 40.619141 C 16.78475 40.619141 18.314453 39.607703 18.314453 37.970703 C 18.314453 36.123703 16.672016 35.636469 15.166016 35.230469 C 14.302016 35.010469 13.564453 34.805203 13.564453 34.158203 C 13.564453 33.618203 14.132219 33.183594 15.074219 33.183594 C 16.016219 33.183594 16.634547 33.621469 16.810547 33.730469 C 16.986547 33.838469 17.109687 33.753344 17.179688 33.652344 L 17.804688 32.759766 C 17.804687 32.759766 17.941797 32.563578 17.716797 32.392578 C 17.062797 31.930578 16.052219 31.607422 15.074219 31.607422 z M 23.90625 31.607422 C 21.41925 31.607422 19.404297 33.624281 19.404297 36.113281 C 19.404297 38.602281 21.41925 40.621094 23.90625 40.621094 C 25.00025 40.621094 26.193203 40.196063 26.783203 39.414062 C 26.823203 39.864063 27.183641 40.4375 27.806641 40.4375 L 28.171875 40.4375 C 28.312875 40.4375 28.427734 40.320687 28.427734 40.179688 L 28.427734 32.162109 C 28.420734 32.027109 28.308875 31.919922 28.171875 31.919922 L 27.041016 31.919922 C 26.904016 31.919922 26.793156 32.027109 26.785156 32.162109 L 26.783203 32.162109 L 26.783203 32.814453 C 26.091203 31.961453 25.00025 31.607422 23.90625 31.607422 z M 44.478516 31.607422 C 41.991516 31.607422 39.974609 33.624281 39.974609 36.113281 C 39.974609 38.602281 41.991516 40.621094 44.478516 40.621094 C 45.572516 40.621094 46.765469 40.196063 47.355469 39.414062 C 47.394469 39.864063 47.755906 40.4375 48.378906 40.4375 L 48.742188 40.4375 C 48.883187 40.4375 49 40.320687 49 40.179688 L 49 32.162109 L 48.998047 32.162109 C 48.991047 32.027109 48.879188 31.919922 48.742188 31.919922 L 47.611328 31.919922 C 47.474328 31.919922 47.363469 32.027109 47.355469 32.162109 L 47.355469 32.814453 C 46.663469 31.961453 45.572516 31.607422 44.478516 31.607422 z M 34.720703 31.626953 C 33.598703 31.626953 32.678516 32.274031 32.353516 32.832031 C 32.283516 32.396031 32.052938 31.9375 31.335938 31.9375 L 30.970703 31.9375 C 30.829703 31.9375 30.712891 32.054313 30.712891 32.195312 L 30.712891 39.433594 L 30.712891 39.435547 L 30.712891 40.212891 L 30.714844 40.212891 C 30.721844 40.347891 30.833703 40.455078 30.970703 40.455078 L 32.099609 40.455078 C 32.116609 40.455078 32.133391 40.454172 32.150391 40.451172 C 32.157391 40.450172 32.165828 40.447313 32.173828 40.445312 C 32.181828 40.442312 32.189266 40.4405 32.197266 40.4375 C 32.207266 40.4335 32.216562 40.426875 32.226562 40.421875 C 32.231563 40.418875 32.235234 40.417062 32.240234 40.414062 C 32.251234 40.407063 32.263438 40.397672 32.273438 40.388672 C 32.275438 40.386672 32.276344 40.385766 32.277344 40.384766 C 32.288344 40.373766 32.298594 40.361609 32.308594 40.349609 C 32.336594 40.310609 32.354422 40.264844 32.357422 40.214844 L 32.357422 35.478516 C 32.357422 34.222516 33.374859 33.203125 34.630859 33.203125 C 35.885859 33.203125 36.902344 34.222516 36.902344 35.478516 L 36.904297 39.4375 C 36.904528 39.440602 36.904297 39.443932 36.904297 39.447266 L 36.904297 40.214844 L 36.90625 40.214844 C 36.91325 40.349844 37.025109 40.457031 37.162109 40.457031 L 38.292969 40.457031 C 38.309969 40.457031 38.32675 40.456125 38.34375 40.453125 C 38.35075 40.452125 38.357281 40.449266 38.363281 40.447266 C 38.372281 40.444266 38.381625 40.4415 38.390625 40.4375 C 38.399625 40.4335 38.409969 40.428828 38.417969 40.423828 C 38.422969 40.420828 38.428594 40.418062 38.433594 40.414062 C 38.443594 40.407063 38.453891 40.400578 38.462891 40.392578 C 38.464891 40.390578 38.46675 40.388719 38.46875 40.386719 C 38.47975 40.376719 38.489047 40.365516 38.498047 40.353516 C 38.498047 40.353516 38.5 40.351562 38.5 40.351562 C 38.528 40.312562 38.545828 40.266797 38.548828 40.216797 L 38.548828 40.214844 L 38.546875 39.691406 L 38.546875 35.542969 C 38.546875 33.204969 37.071703 31.626953 34.720703 31.626953 z M 5.5078125 33.183594 C 7.0898125 33.183594 8.3710938 34.495281 8.3710938 36.113281 C 8.3710938 37.731281 7.0888125 39.044922 5.5078125 39.044922 C 3.9258125 39.044922 2.6445313 37.731281 2.6445312 36.113281 C 2.6445312 34.495281 3.9258125 33.183594 5.5078125 33.183594 z M 23.910156 33.183594 C 25.492156 33.183594 26.775391 34.495281 26.775391 36.113281 C 26.775391 37.731281 25.491156 39.044922 23.910156 39.044922 C 22.328156 39.044922 21.046875 37.731281 21.046875 36.113281 C 21.046875 34.495281 22.328156 33.183594 23.910156 33.183594 z M 44.482422 33.183594 C 46.064422 33.183594 47.347656 34.495281 47.347656 36.113281 C 47.347656 37.731281 46.064422 39.044922 44.482422 39.044922 C 42.900422 39.044922 41.619141 37.731281 41.619141 36.113281 C 41.619141 34.495281 42.900422 33.183594 44.482422 33.183594 z" + fill={isDark ? "#ffffff" : "#000000"} + /> + </svg> +);src/frontend/src/icons/figma/figma.jsx (1)
1-5: Missing dark mode support and props forwarding.The icon component doesn't support the required
isDarkprop for theme adaptation and doesn't forward props to the SVG element. The SVG structure also needs proper formatting.Apply this diff to add dark mode support, props forwarding, and proper formatting:
-const Icon = (props) => ( - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px"><path fill="#e64a19" d="M26,17h-8c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h8V17z"/><path fill="#7c4dff" d="M25,31h-7c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7V31z"/><path fill="#66bb6a" d="M18,45L18,45c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7v7C25,41.866,21.866,45,18,45z"/><path fill="#ff7043" d="M32,17h-7V3h7c3.866,0,7,3.134,7,7v0C39,13.866,35.866,17,32,17z"/><circle cx="32" cy="24" r="7" fill="#29b6f6"/></svg> -); +const Icon = ({ isDark, ...props }) => ( + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 48 48" + width="24px" + height="24px" + {...props} + > + <path + fill={isDark ? "#FF9688" : "#e64a19"} + d="M26,17h-8c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h8V17z" + /> + <path + fill={isDark ? "#C9B3FF" : "#7c4dff"} + d="M25,31h-7c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7V31z" + /> + <path + fill={isDark ? "#A5D6A7" : "#66bb6a"} + d="M18,45L18,45c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7v7C25,41.866,21.866,45,18,45z" + /> + <path + fill={isDark ? "#FFAB91" : "#ff7043"} + d="M32,17h-7V3h7c3.866,0,7,3.134,7,7v0C39,13.866,35.866,17,32,17z" + /> + <circle + cx="32" + cy="24" + r="7" + fill={isDark ? "#64B5F6" : "#29b6f6"} + /> + </svg> +);
🧹 Nitpick comments (7)
src/frontend/src/icons/twitter/index.tsx (2)
4-9: Optional: set displayName for better devtools/debuggingHelps with readable component names in React DevTools and error stacks.
Apply this diff:
export const TwitterIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return <TwitterIconSVG ref={ref} {...props} />; }); + +TwitterIcon.displayName = "TwitterIcon";
4-9: Confirm prop typing ifisDarkis expected to be passed downGuidelines require the SVG component to support an
isDarkprop. WithReact.PropsWithChildren<{}>, consumers cannot passisDarkwithout a TypeScript error, even though you spread all props at runtime.If the team wants callers to pass
isDark, consider one of these options (applied consistently across icon wrappers):
- Preferable (auto-infer props from the SVG component):
- Change to
React.ComponentProps<typeof TwitterIconSVG>for accurate prop typing.- Minimal change (declare only
isDark):
- Extend the props with
{ isDark?: boolean }.Option A (inferred props):
-export const TwitterIcon = forwardRef< - SVGSVGElement, - React.PropsWithChildren<{}> ->((props, ref) => { +export const TwitterIcon = forwardRef<SVGSVGElement, React.ComponentProps<typeof TwitterIconSVG>>((props, ref) => { return <TwitterIconSVG ref={ref} {...props} />; });Option B (explicit
isDark):-export const TwitterIcon = forwardRef< - SVGSVGElement, - React.PropsWithChildren<{}> ->((props, ref) => { +export const TwitterIcon = forwardRef< + SVGSVGElement, + React.PropsWithChildren<{ isDark?: boolean }> +>((props, ref) => { return <TwitterIconSVG ref={ref} {...props} />; });Note: Retrieved learnings indicate this repo often uses
PropsWithChildren<{}>for wrappers. If you choose to keep that pattern, please verify no callers need to passisDarkdirectly to this wrapper, or adjust the pattern in a follow-up sweep.src/backend/base/langflow/components/composio/wrike_composio.py (1)
6-8: Verify icon mapping consistency with frontendBackend
icon = "Wrike"must match the frontend lazy icon mapping key exactly (case-sensitive). EnsurelazyIconImports.tscontains the "Wrike" entry pointing to the new icon.I can scan the repo for icon mapping usages and open a quick PR if there’s a mismatch.
src/backend/base/langflow/components/composio/attio_composio.py (1)
10-11: Fix Ruff lint failures: trailing whitespace and missing newlineThe file has trailing whitespace and lacks a terminal newline (W291, W292). Clean it up.
Apply this diff:
def set_default_tools(self): - """Set the default tools for Attio component.""" + """Set the default tools for Attio component.""" + # TODO: define Attio default tools + self._default_tools = set() + + def execute_action(self) -> list[dict]: + """Execute action and return response as Message.""" + # TODO: implement the execution flow + raise NotImplementedError("execute_action is not implemented for ComposioAttioAPIComponent.")Also run: make format_backend && make lint
src/backend/base/langflow/components/composio/calendly_composio.py (1)
1-11: Run formatters/linters before commitRuff flagged W291/W292 here. Please run:
- make format_backend
- make lint
This will catch and fix style issues across all new components in one pass.
src/frontend/src/icons/lazyIconImports.ts (2)
166-167: Fix trailing whitespace on line 166.There's trailing whitespace after
GooglesheetsIcon,that should be removed.Apply this diff to remove the trailing whitespace:
import("@/icons/googlesheets").then((mod) => ({ - default: mod.GooglesheetsIcon, + default: mod.GooglesheetsIcon, })),
396-396: Add newline at end of file.The file should end with a newline character for better compatibility with version control systems.
Apply this diff to add the missing newline:
ZepMemory: () => import("@/icons/ZepMemory").then((mod) => ({ default: mod.ZepMemoryIcon })), }; +
Comment on lines
+1
to
+24
| from .composio_api import ComposioAPIComponent | ||
| from .github_composio import ComposioGitHubAPIComponent | ||
| from .gmail_composio import ComposioGmailAPIComponent | ||
| from .googlecalendar_composio import ComposioGoogleCalendarAPIComponent | ||
| from .googlemeet_composio import ComposioGooglemeetAPIComponent | ||
| from .googletasks_composio import ComposioGoogleTasksAPIComponent | ||
| from .linear_composio import ComposioLinearAPIComponent | ||
| from .outlook_composio import ComposioOutlookAPIComponent | ||
| from .reddit_composio import ComposioRedditAPIComponent | ||
| from .slack_composio import ComposioSlackAPIComponent | ||
| from .slackbot_composio import ComposioSlackbotAPIComponent | ||
| from .supabase_composio import ComposioSupabaseAPIComponent | ||
| from .todoist_composio import ComposioTodoistAPIComponent | ||
| from .youtube_composio import ComposioYoutubeAPIComponent | ||
| from .airtable_composio import ComposioAirtableAPIComponent | ||
| from .asana_composio import ComposioAsanaAPIComponent | ||
| from .attio_composio import ComposioAttioAPIComponent | ||
| from .calendly_composio import ComposioCalendlyAPIComponent | ||
| from .contentful_composio import ComposioContentfulAPIComponent | ||
| from .discord_composio import ComposioDiscordAPIComponent | ||
| from .figma_composio import ComposioFigmaAPIComponent | ||
| from .miro_composio import ComposioMiroAPIComponent | ||
| from .twitter_composio import ComposioTwitterAPIComponent | ||
| from .wrike_composio import ComposioWrikeAPIComponent |
Contributor
There was a problem hiding this comment.
Sort imports alphabetically.
The imports should be sorted alphabetically to maintain consistency and readability, as indicated by static analysis and the coding guidelines.
Apply this diff to sort the imports:
from .composio_api import ComposioAPIComponent
-from .github_composio import ComposioGitHubAPIComponent
+from .airtable_composio import ComposioAirtableAPIComponent
+from .asana_composio import ComposioAsanaAPIComponent
+from .attio_composio import ComposioAttioAPIComponent
+from .calendly_composio import ComposioCalendlyAPIComponent
+from .contentful_composio import ComposioContentfulAPIComponent
+from .discord_composio import ComposioDiscordAPIComponent
+from .figma_composio import ComposioFigmaAPIComponent
+from .github_composio import ComposioGitHubAPIComponent
from .gmail_composio import ComposioGmailAPIComponent
from .googlecalendar_composio import ComposioGoogleCalendarAPIComponent
from .googlemeet_composio import ComposioGooglemeetAPIComponent
from .googletasks_composio import ComposioGoogleTasksAPIComponent
from .linear_composio import ComposioLinearAPIComponent
+from .miro_composio import ComposioMiroAPIComponent
from .outlook_composio import ComposioOutlookAPIComponent
from .reddit_composio import ComposioRedditAPIComponent
from .slack_composio import ComposioSlackAPIComponent
from .slackbot_composio import ComposioSlackbotAPIComponent
from .supabase_composio import ComposioSupabaseAPIComponent
from .todoist_composio import ComposioTodoistAPIComponent
+from .twitter_composio import ComposioTwitterAPIComponent
+from .wrike_composio import ComposioWrikeAPIComponent
from .youtube_composio import ComposioYoutubeAPIComponent
-from .airtable_composio import ComposioAirtableAPIComponent
-from .asana_composio import ComposioAsanaAPIComponent
-from .attio_composio import ComposioAttioAPIComponent
-from .calendly_composio import ComposioCalendlyAPIComponent
-from .contentful_composio import ComposioContentfulAPIComponent
-from .discord_composio import ComposioDiscordAPIComponent
-from .figma_composio import ComposioFigmaAPIComponent
-from .miro_composio import ComposioMiroAPIComponent
-from .twitter_composio import ComposioTwitterAPIComponent
-from .wrike_composio import ComposioWrikeAPIComponent📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| from .composio_api import ComposioAPIComponent | |
| from .github_composio import ComposioGitHubAPIComponent | |
| from .gmail_composio import ComposioGmailAPIComponent | |
| from .googlecalendar_composio import ComposioGoogleCalendarAPIComponent | |
| from .googlemeet_composio import ComposioGooglemeetAPIComponent | |
| from .googletasks_composio import ComposioGoogleTasksAPIComponent | |
| from .linear_composio import ComposioLinearAPIComponent | |
| from .outlook_composio import ComposioOutlookAPIComponent | |
| from .reddit_composio import ComposioRedditAPIComponent | |
| from .slack_composio import ComposioSlackAPIComponent | |
| from .slackbot_composio import ComposioSlackbotAPIComponent | |
| from .supabase_composio import ComposioSupabaseAPIComponent | |
| from .todoist_composio import ComposioTodoistAPIComponent | |
| from .youtube_composio import ComposioYoutubeAPIComponent | |
| from .airtable_composio import ComposioAirtableAPIComponent | |
| from .asana_composio import ComposioAsanaAPIComponent | |
| from .attio_composio import ComposioAttioAPIComponent | |
| from .calendly_composio import ComposioCalendlyAPIComponent | |
| from .contentful_composio import ComposioContentfulAPIComponent | |
| from .discord_composio import ComposioDiscordAPIComponent | |
| from .figma_composio import ComposioFigmaAPIComponent | |
| from .miro_composio import ComposioMiroAPIComponent | |
| from .twitter_composio import ComposioTwitterAPIComponent | |
| from .wrike_composio import ComposioWrikeAPIComponent | |
| from .composio_api import ComposioAPIComponent | |
| from .airtable_composio import ComposioAirtableAPIComponent | |
| from .asana_composio import ComposioAsanaAPIComponent | |
| from .attio_composio import ComposioAttioAPIComponent | |
| from .calendly_composio import ComposioCalendlyAPIComponent | |
| from .contentful_composio import ComposioContentfulAPIComponent | |
| from .discord_composio import ComposioDiscordAPIComponent | |
| from .figma_composio import ComposioFigmaAPIComponent | |
| from .github_composio import ComposioGitHubAPIComponent | |
| from .gmail_composio import ComposioGmailAPIComponent | |
| from .googlecalendar_composio import ComposioGoogleCalendarAPIComponent | |
| from .googlemeet_composio import ComposioGooglemeetAPIComponent | |
| from .googletasks_composio import ComposioGoogleTasksAPIComponent | |
| from .linear_composio import ComposioLinearAPIComponent | |
| from .miro_composio import ComposioMiroAPIComponent | |
| from .outlook_composio import ComposioOutlookAPIComponent | |
| from .reddit_composio import ComposioRedditAPIComponent | |
| from .slack_composio import ComposioSlackAPIComponent | |
| from .slackbot_composio import ComposioSlackbotAPIComponent | |
| from .supabase_composio import ComposioSupabaseAPIComponent | |
| from .todoist_composio import ComposioTodoistAPIComponent | |
| from .twitter_composio import ComposioTwitterAPIComponent | |
| from .wrike_composio import ComposioWrikeAPIComponent | |
| from .youtube_composio import ComposioYoutubeAPIComponent |
🧰 Tools
🪛 GitHub Check: Ruff Style Check (3.13)
[failure] 1-24: Ruff (I001)
src/backend/base/langflow/components/composio/init.py:1:1: I001 Import block is un-sorted or un-formatted
🤖 Prompt for AI Agents
In src/backend/base/langflow/components/composio/__init__.py around lines 1 to
24, the module imports are not alphabetized; reorder the import statements
alphabetically by the module filename (e.g., airtable before asana, attio,
calendly, contentful, discord, etc.) while preserving each import exactly (no
renames) and keeping them as individual from .module import Component lines in
the same block and line range.
Comment on lines
+27
to
+52
| __all__ = [ | ||
| "ComposioAPIComponent", | ||
| "ComposioGitHubAPIComponent", | ||
| "ComposioGmailAPIComponent", | ||
| "ComposioGoogleCalendarAPIComponent", | ||
| "ComposioGoogleTasksAPIComponent", | ||
| "ComposioGooglemeetAPIComponent", | ||
| "ComposioLinearAPIComponent", | ||
| "ComposioOutlookAPIComponent", | ||
| "ComposioRedditAPIComponent", | ||
| "ComposioSlackAPIComponent", | ||
| ] | ||
|
|
||
|
|
||
| def __getattr__(attr_name: str) -> Any: | ||
| """Lazily import composio components on attribute access.""" | ||
| if attr_name not in _dynamic_imports: | ||
| msg = f"module '{__name__}' has no attribute '{attr_name}'" | ||
| raise AttributeError(msg) | ||
| try: | ||
| result = import_mod(attr_name, _dynamic_imports[attr_name], __spec__.parent) | ||
| except (ModuleNotFoundError, ImportError, AttributeError) as e: | ||
| msg = f"Could not import '{attr_name}' from '{__name__}': {e}" | ||
| raise AttributeError(msg) from e | ||
| globals()[attr_name] = result | ||
| return result | ||
|
|
||
|
|
||
| def __dir__() -> list[str]: | ||
| return list(__all__) | ||
| "ComposioSlackbotAPIComponent", | ||
| "ComposioSupabaseAPIComponent", | ||
| "ComposioTodoistAPIComponent", | ||
| "ComposioYoutubeAPIComponent", | ||
| "ComposioAirtableAPIComponent", | ||
| "ComposioAsanaAPIComponent", | ||
| "ComposioAttioAPIComponent", | ||
| "ComposioCalendlyAPIComponent", | ||
| "ComposioContentfulAPIComponent", | ||
| "ComposioDiscordAPIComponent", | ||
| "ComposioFigmaAPIComponent", | ||
| "ComposioMiroAPIComponent", | ||
| "ComposioTwitterAPIComponent", | ||
| "ComposioWrikeAPIComponent", | ||
| ] No newline at end of file |
Contributor
There was a problem hiding this comment.
Sort __all__ list alphabetically and add missing newline.
The __all__ list should be sorted alphabetically to maintain consistency. Additionally, there's a missing newline at the end of the file.
Apply this diff to sort the __all__ list and add the missing newline:
__all__ = [
+ "ComposioAirtableAPIComponent",
"ComposioAPIComponent",
+ "ComposioAsanaAPIComponent",
+ "ComposioAttioAPIComponent",
+ "ComposioCalendlyAPIComponent",
+ "ComposioContentfulAPIComponent",
+ "ComposioDiscordAPIComponent",
+ "ComposioFigmaAPIComponent",
"ComposioGitHubAPIComponent",
"ComposioGmailAPIComponent",
"ComposioGoogleCalendarAPIComponent",
- "ComposioGoogleTasksAPIComponent",
"ComposioGooglemeetAPIComponent",
+ "ComposioGoogleTasksAPIComponent",
"ComposioLinearAPIComponent",
+ "ComposioMiroAPIComponent",
"ComposioOutlookAPIComponent",
"ComposioRedditAPIComponent",
"ComposioSlackAPIComponent",
"ComposioSlackbotAPIComponent",
"ComposioSupabaseAPIComponent",
"ComposioTodoistAPIComponent",
- "ComposioYoutubeAPIComponent",
- "ComposioAirtableAPIComponent",
- "ComposioAsanaAPIComponent",
- "ComposioAttioAPIComponent",
- "ComposioCalendlyAPIComponent",
- "ComposioContentfulAPIComponent",
- "ComposioDiscordAPIComponent",
- "ComposioFigmaAPIComponent",
- "ComposioMiroAPIComponent",
"ComposioTwitterAPIComponent",
"ComposioWrikeAPIComponent",
+ "ComposioYoutubeAPIComponent",
]
+📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| __all__ = [ | |
| "ComposioAPIComponent", | |
| "ComposioGitHubAPIComponent", | |
| "ComposioGmailAPIComponent", | |
| "ComposioGoogleCalendarAPIComponent", | |
| "ComposioGoogleTasksAPIComponent", | |
| "ComposioGooglemeetAPIComponent", | |
| "ComposioLinearAPIComponent", | |
| "ComposioOutlookAPIComponent", | |
| "ComposioRedditAPIComponent", | |
| "ComposioSlackAPIComponent", | |
| ] | |
| def __getattr__(attr_name: str) -> Any: | |
| """Lazily import composio components on attribute access.""" | |
| if attr_name not in _dynamic_imports: | |
| msg = f"module '{__name__}' has no attribute '{attr_name}'" | |
| raise AttributeError(msg) | |
| try: | |
| result = import_mod(attr_name, _dynamic_imports[attr_name], __spec__.parent) | |
| except (ModuleNotFoundError, ImportError, AttributeError) as e: | |
| msg = f"Could not import '{attr_name}' from '{__name__}': {e}" | |
| raise AttributeError(msg) from e | |
| globals()[attr_name] = result | |
| return result | |
| def __dir__() -> list[str]: | |
| return list(__all__) | |
| "ComposioSlackbotAPIComponent", | |
| "ComposioSupabaseAPIComponent", | |
| "ComposioTodoistAPIComponent", | |
| "ComposioYoutubeAPIComponent", | |
| "ComposioAirtableAPIComponent", | |
| "ComposioAsanaAPIComponent", | |
| "ComposioAttioAPIComponent", | |
| "ComposioCalendlyAPIComponent", | |
| "ComposioContentfulAPIComponent", | |
| "ComposioDiscordAPIComponent", | |
| "ComposioFigmaAPIComponent", | |
| "ComposioMiroAPIComponent", | |
| "ComposioTwitterAPIComponent", | |
| "ComposioWrikeAPIComponent", | |
| ] | |
| __all__ = [ | |
| "ComposioAirtableAPIComponent", | |
| "ComposioAPIComponent", | |
| "ComposioAsanaAPIComponent", | |
| "ComposioAttioAPIComponent", | |
| "ComposioCalendlyAPIComponent", | |
| "ComposioContentfulAPIComponent", | |
| "ComposioDiscordAPIComponent", | |
| "ComposioFigmaAPIComponent", | |
| "ComposioGitHubAPIComponent", | |
| "ComposioGmailAPIComponent", | |
| "ComposioGoogleCalendarAPIComponent", | |
| "ComposioGooglemeetAPIComponent", | |
| "ComposioGoogleTasksAPIComponent", | |
| "ComposioLinearAPIComponent", | |
| "ComposioMiroAPIComponent", | |
| "ComposioOutlookAPIComponent", | |
| "ComposioRedditAPIComponent", | |
| "ComposioSlackAPIComponent", | |
| "ComposioSlackbotAPIComponent", | |
| "ComposioSupabaseAPIComponent", | |
| "ComposioTodoistAPIComponent", | |
| "ComposioTwitterAPIComponent", | |
| "ComposioWrikeAPIComponent", | |
| "ComposioYoutubeAPIComponent", | |
| ] | |
🧰 Tools
🪛 GitHub Check: Ruff Style Check (3.13)
[failure] 52-52: Ruff (W292)
src/backend/base/langflow/components/composio/init.py:52:2: W292 No newline at end of file
[failure] 27-52: Ruff (RUF022)
src/backend/base/langflow/components/composio/init.py:27:11: RUF022 __all__ is not sorted
🤖 Prompt for AI Agents
In src/backend/base/langflow/components/composio/__init__.py around lines 27 to
52, the __all__ list is unsorted and the file lacks a trailing newline; sort all
entries in the __all__ list alphabetically (by component name string) and ensure
the file ends with a single newline character.
Comment on lines
+10
to
+11
| def set_default_tools(self): | ||
| """Set the default tools for Airtable component.""" No newline at end of file |
Contributor
There was a problem hiding this comment.
Fix formatting issues and implement the required method.
The method has trailing whitespace and missing newline at end of file. More importantly, it's only a placeholder with a docstring - the set_default_tools method must be properly implemented as it's required by the abstract base class.
Apply this diff to fix the formatting issues:
def set_default_tools(self):
- """Set the default tools for Airtable component."""
+ """Set the default tools for Airtable component."""
+ # TODO: Implement default tools for Airtable
+ pass
+The set_default_tools method needs implementation to populate _default_tools with appropriate tool names for Airtable integration. Would you like me to help implement this method based on the Composio Airtable documentation?
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| def set_default_tools(self): | |
| """Set the default tools for Airtable component.""" | |
| def set_default_tools(self): | |
| """Set the default tools for Airtable component.""" | |
| # TODO: Implement default tools for Airtable | |
| pass | |
🧰 Tools
🪛 GitHub Check: Ruff Style Check (3.13)
[failure] 11-11: Ruff (W292)
src/backend/base/langflow/components/composio/airtable_composio.py:11:61: W292 No newline at end of file
[failure] 11-11: Ruff (W291)
src/backend/base/langflow/components/composio/airtable_composio.py:11:60: W291 Trailing whitespace
🤖 Prompt for AI Agents
In src/backend/base/langflow/components/composio/airtable_composio.py around
lines 10 to 11, remove the trailing whitespace and add a newline at EOF, and
implement the placeholder set_default_tools method so it assigns the component's
_default_tools list to the Airtable integration tool names (for example:
create_record, read_record, update_record, delete_record, list_records,
search_records) required by the abstract base class; ensure the method sets
self._default_tools to that list and returns or finishes cleanly.
Comment on lines
+10
to
+11
| def set_default_tools(self): | ||
| """Set the default tools for Asana component.""" |
Contributor
There was a problem hiding this comment.
Make the placeholder explicit in set_default_tools
Avoid silent no-op behavior by being explicit until defaults are wired.
Apply this diff:
- def set_default_tools(self):
- """Set the default tools for Asana component."""
+ def set_default_tools(self):
+ """Set the default tools for Asana component."""
+ # TODO: Populate self._default_tools and self._actions_data for Asana.
+ raise NotImplementedError("Implement default tools and _actions_data for Asana.")📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| def set_default_tools(self): | |
| """Set the default tools for Asana component.""" | |
| def set_default_tools(self): | |
| """Set the default tools for Asana component.""" | |
| # TODO: Populate self._default_tools and self._actions_data for Asana. | |
| raise NotImplementedError("Implement default tools and _actions_data for Asana.") |
🤖 Prompt for AI Agents
In src/backend/base/langflow/components/composio/asana_composio.py around lines
10-11, the set_default_tools method is currently an implicit no-op; make the
placeholder explicit so callers don't silently assume defaults are set. Replace
the empty docstring-only implementation with an explicit placeholder: either
raise NotImplementedError("set_default_tools not implemented - defaults not
wired yet") or assign a clear placeholder (e.g., self.tools = [] and log a
warning) so the behavior is deterministic and obvious until real defaults are
wired.
Comment on lines
+4
to
+11
| class ComposioAttioAPIComponent(ComposioBaseComponent): | ||
| display_name: str = "Attio" | ||
| icon = "Attio" | ||
| documentation: str = "https://docs.composio.dev" | ||
| app_name = "attio" | ||
|
|
||
| def set_default_tools(self): | ||
| """Set the default tools for Attio component.""" No newline at end of file |
Contributor
There was a problem hiding this comment.
Missing required execute_action implementation (abstract in base)
Beyond the lint, this class also lacks execute_action, which is required by the base class.
The diff above includes a minimal execute_action stub to unblock instantiation until real logic is added.
🧰 Tools
🪛 GitHub Check: Ruff Style Check (3.13)
[failure] 11-11: Ruff (W292)
src/backend/base/langflow/components/composio/attio_composio.py:11:58: W292 No newline at end of file
[failure] 11-11: Ruff (W291)
src/backend/base/langflow/components/composio/attio_composio.py:11:57: W291 Trailing whitespace
🤖 Prompt for AI Agents
In src/backend/base/langflow/components/composio/attio_composio.py around lines
4 to 11, the class ComposioAttioAPIComponent is missing the required
execute_action implementation from the abstract base; add a concrete
execute_action method with the same signature as the base (e.g., def
execute_action(self, action_name: str, params: dict) -> Any) including a short
docstring and a minimal body that logs or raises NotImplementedError with a
clear message so the class can be instantiated until real logic is implemented.
Comment on lines
+1
to
+13
| const Icon = (props) => ( | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="Contentful--Streamline-Svg-Logos" height="24" width="24"> | ||
| <desc> | ||
| Contentful Streamline Icon: https://streamlinehq.com | ||
| </desc> | ||
| <path fill="#fae501" d="M8.71365 16.6266c-1.248425 -1.175 -1.9828 -2.790625 -1.9828 -4.626575s0.734375 -3.451575 1.909375 -4.626575c1.028125 -1.028125 1.028125 -2.64375 0 -3.671875 -1.028125 -1.028125 -2.64375 -1.028125 -3.671875 0 -2.056275 2.1297 -3.37814 5.0672 -3.37814 8.29845 0 3.23125 1.321865 6.16875 3.451565 8.29845 1.028125 1.028125 2.64375 1.028125 3.671875 0 0.9547 -1.028125 0.9547 -2.64375 0 -3.671875Z" stroke-width="0.25"></path> | ||
| <path fill="#4fb5e1" d="M8.713475 7.37345c1.175 -1.24845 2.790625 -1.982825 4.626575 -1.982825S16.791625 6.125 17.966625 7.3c1.028125 1.028125 2.64375 1.028125 3.671875 0 1.028125 -1.028125 1.028125 -2.64375 0 -3.671875C19.508825 1.5718775 16.5713 0.25 13.34005 0.25c-3.23125 0 -6.16875 1.3218775 -8.29845 3.451575 -1.028125 1.028125 -1.028125 2.64375 0 3.671875 1.028125 0.954675 2.64375 0.954675 3.671875 0Z" stroke-width="0.25"></path> | ||
| <path fill="#f05751" d="M17.966625 16.62655c-1.175 1.248425 -2.790625 1.9828 -4.626575 1.9828s-3.451575 -0.734375 -4.626575 -1.909375c-1.028125 -1.028125 -2.64375 -1.028125 -3.671875 0 -1.028125 1.028125 -1.028125 2.64375 0 3.671875 2.1297 2.05625 5.0672 3.378125 8.29845 3.378125 3.23125 0 6.168775 -1.321875 8.29845 -3.45155 1.028125 -1.028125 1.028125 -2.64375 0 -3.671875 -1.028125 -0.9547 -2.64375 -0.9547 -3.671875 0Z" stroke-width="0.25"></path> | ||
| <path fill="#0681b6" d="M6.8777 8.107725c1.419525 0 2.5703 -1.15075 2.5703 -2.5703s-1.150775 -2.570325 -2.5703 -2.570325c-1.41955 0 -2.570325 1.150775 -2.570325 2.570325 0 1.41955 1.150775 2.5703 2.570325 2.5703Z" stroke-width="0.25"></path> | ||
| <path fill="#cd4739" d="M6.8777 21.03285c1.419525 0 2.5703 -1.150775 2.5703 -2.570325 0 -1.41955 -1.150775 -2.570325 -2.5703 -2.570325 -1.41955 0 -2.570325 1.150775 -2.570325 2.570325 0 1.41955 1.150775 2.570325 2.570325 2.570325Z" stroke-width="0.25"></path> | ||
| </svg> | ||
| ); | ||
| export default Icon; |
Contributor
There was a problem hiding this comment.
Missing isDark prop support and inconsistent stroke attribute syntax.
The icon component has two issues:
- It doesn't support the
isDarkprop for light/dark mode, which is required by the coding guidelines - The SVG uses invalid HTML attribute syntax (
stroke-widthinstead ofstrokeWidth)
Apply this diff to fix the component:
-const Icon = (props) => (
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="Contentful--Streamline-Svg-Logos" height="24" width="24">
+const Icon = ({ isDark, ...props }) => (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ id="Contentful--Streamline-Svg-Logos"
+ height="24"
+ width="24"
+ {...props}
+ >
<desc>
Contentful Streamline Icon: https://streamlinehq.com
</desc>
- <path fill="#fae501" d="M8.71365 16.6266c-1.248425 -1.175 -1.9828 -2.790625 -1.9828 -4.626575s0.734375 -3.451575 1.909375 -4.626575c1.028125 -1.028125 1.028125 -2.64375 0 -3.671875 -1.028125 -1.028125 -2.64375 -1.028125 -3.671875 0 -2.056275 2.1297 -3.37814 5.0672 -3.37814 8.29845 0 3.23125 1.321865 6.16875 3.451565 8.29845 1.028125 1.028125 2.64375 1.028125 3.671875 0 0.9547 -1.028125 0.9547 -2.64375 0 -3.671875Z" stroke-width="0.25"></path>
- <path fill="#4fb5e1" d="M8.713475 7.37345c1.175 -1.24845 2.790625 -1.982825 4.626575 -1.982825S16.791625 6.125 17.966625 7.3c1.028125 1.028125 2.64375 1.028125 3.671875 0 1.028125 -1.028125 1.028125 -2.64375 0 -3.671875C19.508825 1.5718775 16.5713 0.25 13.34005 0.25c-3.23125 0 -6.16875 1.3218775 -8.29845 3.451575 -1.028125 1.028125 -1.028125 2.64375 0 3.671875 1.028125 0.954675 2.64375 0.954675 3.671875 0Z" stroke-width="0.25"></path>
- <path fill="#f05751" d="M17.966625 16.62655c-1.175 1.248425 -2.790625 1.9828 -4.626575 1.9828s-3.451575 -0.734375 -4.626575 -1.909375c-1.028125 -1.028125 -2.64375 -1.028125 -3.671875 0 -1.028125 1.028125 -1.028125 2.64375 0 3.671875 2.1297 2.05625 5.0672 3.378125 8.29845 3.378125 3.23125 0 6.168775 -1.321875 8.29845 -3.45155 1.028125 -1.028125 1.028125 -2.64375 0 -3.671875 -1.028125 -0.9547 -2.64375 -0.9547 -3.671875 0Z" stroke-width="0.25"></path>
- <path fill="#0681b6" d="M6.8777 8.107725c1.419525 0 2.5703 -1.15075 2.5703 -2.5703s-1.150775 -2.570325 -2.5703 -2.570325c-1.41955 0 -2.570325 1.150775 -2.570325 2.570325 0 1.41955 1.150775 2.5703 2.570325 2.5703Z" stroke-width="0.25"></path>
- <path fill="#cd4739" d="M6.8777 21.03285c1.419525 0 2.5703 -1.150775 2.5703 -2.570325 0 -1.41955 -1.150775 -2.570325 -2.5703 -2.570325 -1.41955 0 -2.570325 1.150775 -2.570325 2.570325 0 1.41955 1.150775 2.570325 2.570325 2.570325Z" stroke-width="0.25"></path>
+ <path fill="#fae501" d="M8.71365 16.6266c-1.248425 -1.175 -1.9828 -2.790625 -1.9828 -4.626575s0.734375 -3.451575 1.909375 -4.626575c1.028125 -1.028125 1.028125 -2.64375 0 -3.671875 -1.028125 -1.028125 -2.64375 -1.028125 -3.671875 0 -2.056275 2.1297 -3.37814 5.0672 -3.37814 8.29845 0 3.23125 1.321865 6.16875 3.451565 8.29845 1.028125 1.028125 2.64375 1.028125 3.671875 0 0.9547 -1.028125 0.9547 -2.64375 0 -3.671875Z" strokeWidth="0.25"></path>
+ <path fill="#4fb5e1" d="M8.713475 7.37345c1.175 -1.24845 2.790625 -1.982825 4.626575 -1.982825S16.791625 6.125 17.966625 7.3c1.028125 1.028125 2.64375 1.028125 3.671875 0 1.028125 -1.028125 1.028125 -2.64375 0 -3.671875C19.508825 1.5718775 16.5713 0.25 13.34005 0.25c-3.23125 0 -6.16875 1.3218775 -8.29845 3.451575 -1.028125 1.028125 -1.028125 2.64375 0 3.671875 1.028125 0.954675 2.64375 0.954675 3.671875 0Z" strokeWidth="0.25"></path>
+ <path fill="#f05751" d="M17.966625 16.62655c-1.175 1.248425 -2.790625 1.9828 -4.626575 1.9828s-3.451575 -0.734375 -4.626575 -1.909375c-1.028125 -1.028125 -2.64375 -1.028125 -3.671875 0 -1.028125 1.028125 -1.028125 2.64375 0 3.671875 2.1297 2.05625 5.0672 3.378125 8.29845 3.378125 3.23125 0 6.168775 -1.321875 8.29845 -3.45155 1.028125 -1.028125 1.028125 -2.64375 0 -3.671875 -1.028125 -0.9547 -2.64375 -0.9547 -3.671875 0Z" strokeWidth="0.25"></path>
+ <path fill="#0681b6" d="M6.8777 8.107725c1.419525 0 2.5703 -1.15075 2.5703 -2.5703s-1.150775 -2.570325 -2.5703 -2.570325c-1.41955 0 -2.570325 1.150775 -2.570325 2.570325 0 1.41955 1.150775 2.5703 2.570325 2.5703Z" strokeWidth="0.25"></path>
+ <path fill="#cd4739" d="M6.8777 21.03285c1.419525 0 2.5703 -1.150775 2.5703 -2.570325 0 -1.41955 -1.150775 -2.570325 -2.5703 -2.570325 -1.41955 0 -2.570325 1.150775 -2.570325 2.570325 0 1.41955 1.150775 2.570325 2.570325 2.570325Z" strokeWidth="0.25"></path>
</svg>
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const Icon = (props) => ( | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="Contentful--Streamline-Svg-Logos" height="24" width="24"> | |
| <desc> | |
| Contentful Streamline Icon: https://streamlinehq.com | |
| </desc> | |
| <path fill="#fae501" d="M8.71365 16.6266c-1.248425 -1.175 -1.9828 -2.790625 -1.9828 -4.626575s0.734375 -3.451575 1.909375 -4.626575c1.028125 -1.028125 1.028125 -2.64375 0 -3.671875 -1.028125 -1.028125 -2.64375 -1.028125 -3.671875 0 -2.056275 2.1297 -3.37814 5.0672 -3.37814 8.29845 0 3.23125 1.321865 6.16875 3.451565 8.29845 1.028125 1.028125 2.64375 1.028125 3.671875 0 0.9547 -1.028125 0.9547 -2.64375 0 -3.671875Z" stroke-width="0.25"></path> | |
| <path fill="#4fb5e1" d="M8.713475 7.37345c1.175 -1.24845 2.790625 -1.982825 4.626575 -1.982825S16.791625 6.125 17.966625 7.3c1.028125 1.028125 2.64375 1.028125 3.671875 0 1.028125 -1.028125 1.028125 -2.64375 0 -3.671875C19.508825 1.5718775 16.5713 0.25 13.34005 0.25c-3.23125 0 -6.16875 1.3218775 -8.29845 3.451575 -1.028125 1.028125 -1.028125 2.64375 0 3.671875 1.028125 0.954675 2.64375 0.954675 3.671875 0Z" stroke-width="0.25"></path> | |
| <path fill="#f05751" d="M17.966625 16.62655c-1.175 1.248425 -2.790625 1.9828 -4.626575 1.9828s-3.451575 -0.734375 -4.626575 -1.909375c-1.028125 -1.028125 -2.64375 -1.028125 -3.671875 0 -1.028125 1.028125 -1.028125 2.64375 0 3.671875 2.1297 2.05625 5.0672 3.378125 8.29845 3.378125 3.23125 0 6.168775 -1.321875 8.29845 -3.45155 1.028125 -1.028125 1.028125 -2.64375 0 -3.671875 -1.028125 -0.9547 -2.64375 -0.9547 -3.671875 0Z" stroke-width="0.25"></path> | |
| <path fill="#0681b6" d="M6.8777 8.107725c1.419525 0 2.5703 -1.15075 2.5703 -2.5703s-1.150775 -2.570325 -2.5703 -2.570325c-1.41955 0 -2.570325 1.150775 -2.570325 2.570325 0 1.41955 1.150775 2.5703 2.570325 2.5703Z" stroke-width="0.25"></path> | |
| <path fill="#cd4739" d="M6.8777 21.03285c1.419525 0 2.5703 -1.150775 2.5703 -2.570325 0 -1.41955 -1.150775 -2.570325 -2.5703 -2.570325 -1.41955 0 -2.570325 1.150775 -2.570325 2.570325 0 1.41955 1.150775 2.570325 2.570325 2.570325Z" stroke-width="0.25"></path> | |
| </svg> | |
| ); | |
| export default Icon; | |
| const Icon = ({ isDark, ...props }) => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| fill="none" | |
| viewBox="0 0 24 24" | |
| id="Contentful--Streamline-Svg-Logos" | |
| height="24" | |
| width="24" | |
| {...props} | |
| > | |
| <desc> | |
| Contentful Streamline Icon: https://streamlinehq.com | |
| </desc> | |
| <path | |
| fill="#fae501" | |
| d="M8.71365 16.6266c-1.248425 -1.175 -1.9828 -2.790625 -1.9828 -4.626575s0.734375 -3.451575 1.909375 -4.626575c1.028125 -1.028125 1.028125 -2.64375 0 -3.671875 -1.028125 -1.028125 -2.64375 -1.028125 -3.671875 0 -2.056275 2.1297 -3.37814 5.0672 -3.37814 8.29845 0 3.23125 1.321865 6.16875 3.451565 8.29845 1.028125 1.028125 2.64375 1.028125 3.671875 0 0.9547 -1.028125 0.9547 -2.64375 0 -3.671875Z" | |
| strokeWidth="0.25" | |
| ></path> | |
| <path | |
| fill="#4fb5e1" | |
| d="M8.713475 7.37345c1.175 -1.24845 2.790625 -1.982825 4.626575 -1.982825S16.791625 6.125 17.966625 7.3c1.028125 1.028125 2.64375 1.028125 3.671875 0 1.028125 -1.028125 1.028125 -2.64375 0 -3.671875C19.508825 1.5718775 16.5713 0.25 13.34005 0.25c-3.23125 0 -6.16875 1.3218775 -8.29845 3.451575 -1.028125 1.028125 -1.028125 2.64375 0 3.671875 1.028125 0.954675 2.64375 0.954675 3.671875 0Z" | |
| strokeWidth="0.25" | |
| ></path> | |
| <path | |
| fill="#f05751" | |
| d="M17.966625 16.62655c-1.175 1.248425 -2.790625 1.9828 -4.626575 1.9828s-3.451575 -0.734375 -4.626575 -1.909375c-1.028125 -1.028125 -2.64375 -1.028125 -3.671875 0 -1.028125 1.028125 -1.028125 2.64375 0 3.671875 2.1297 2.05625 5.0672 3.378125 8.29845 3.378125 3.23125 0 6.168775 -1.321875 8.29845 -3.45155 1.028125 -1.028125 1.028125 -2.64375 0 -3.671875 -1.028125 -0.9547 -2.64375 -0.9547 -3.671875 0Z" | |
| strokeWidth="0.25" | |
| ></path> | |
| <path | |
| fill="#0681b6" | |
| d="M6.8777 8.107725c1.419525 0 2.5703 -1.15075 2.5703 -2.5703s-1.150775 -2.570325 -2.5703 -2.570325c-1.41955 0 -2.570325 1.150775 -2.570325 2.570325 0 1.41955 1.150775 2.5703 2.570325 2.5703Z" | |
| strokeWidth="0.25" | |
| ></path> | |
| <path | |
| fill="#cd4739" | |
| d="M6.8777 21.03285c1.419525 0 2.5703 -1.150775 2.5703 -2.570325 0 -1.41955 -1.150775 -2.570325 -2.5703 -2.570325 -1.41955 0 -2.570325 1.150775 -2.570325 2.570325 0 1.41955 1.150775 2.570325 2.570325 2.570325Z" | |
| strokeWidth="0.25" | |
| ></path> | |
| </svg> | |
| ); | |
| export default Icon; |
🤖 Prompt for AI Agents
In src/frontend/src/icons/contentful/contentful.jsx lines 1-13, the component
lacks the required isDark prop handling and uses invalid SVG attribute names;
update the Icon to accept an { isDark = false, ...props } signature, spread
remaining props onto the <svg> so parent props (className, aria-*, etc.) pass
through, conditionally choose appropriate colors or CSS class when isDark is
true (e.g., invert or swap fills) and ensure all SVG attributes use React JSX
names (replace stroke-width with strokeWidth, any other hyphenated attrs) so the
component supports dark mode and valid JSX attributes.
Comment on lines
+1
to
+4
| const Icon = (props) => ( | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px"><radialGradient id="La9SoowKGoEUHOnYdJMSEa" cx="24" cy="10.009" r="32.252" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8c9eff"/><stop offset=".368" stop-color="#889af8"/><stop offset=".889" stop-color="#7e8fe6"/><stop offset="1" stop-color="#7b8ce1"/></radialGradient><path fill="url(#La9SoowKGoEUHOnYdJMSEa)" d="M40.107,12.15c-0.065-0.102-0.139-0.182-0.236-0.255c-0.769-0.578-4.671-3.339-9.665-3.875 c-0.01-0.001-0.048-0.003-0.057-0.003c-0.098,0-0.183,0.057-0.224,0.14l-0.269,0.538c0,0-0.001,0-0.001,0 c-0.017,0.033-0.026,0.071-0.026,0.111c0,0.109,0.07,0.202,0.168,0.236c0.006,0.002,0.048,0.011,0.063,0.014 c4.267,1.028,6.863,2.89,9.149,4.945c-4.047-2.066-8.044-4.001-15.009-4.001s-10.961,1.936-15.009,4.001 c2.286-2.055,4.882-3.917,9.149-4.945c0.015-0.004,0.057-0.012,0.063-0.014c0.098-0.034,0.168-0.127,0.168-0.236 c0-0.04-0.009-0.078-0.026-0.111c0,0-0.001,0-0.001,0l-0.269-0.538c-0.041-0.083-0.125-0.14-0.224-0.14 c-0.009,0-0.048,0.002-0.057,0.003c-4.994,0.536-8.896,3.297-9.665,3.875c-0.097,0.073-0.17,0.153-0.236,0.255 c-0.708,1.107-5.049,8.388-5.892,21.632c-0.009,0.142,0.04,0.289,0.135,0.395c4.592,5.144,11.182,5.752,12.588,5.823 c0.167,0.008,0.327-0.065,0.427-0.199l1.282-1.709c0.1-0.134,0.046-0.322-0.111-0.379c-2.705-0.986-5.717-2.7-8.332-5.706 C11.231,34.457,16.12,37,24,37s12.769-2.543,16.009-4.993c-2.616,3.006-5.627,4.719-8.332,5.706 c-0.157,0.057-0.211,0.245-0.111,0.379l1.282,1.709c0.101,0.134,0.26,0.208,0.427,0.199c1.407-0.072,7.996-0.679,12.588-5.823 c0.095-0.106,0.144-0.253,0.135-0.395C45.156,20.538,40.815,13.257,40.107,12.15z"/><ellipse cx="30.5" cy="26" opacity=".05" rx="4.5" ry="5"/><ellipse cx="30.5" cy="26" opacity=".05" rx="4" ry="4.5"/><ellipse cx="30.5" cy="26" fill="#fff" rx="3.5" ry="4"/><ellipse cx="17.5" cy="26" opacity=".05" rx="4.5" ry="5"/><ellipse cx="17.5" cy="26" opacity=".05" rx="4" ry="4.5"/><ellipse cx="17.5" cy="26" fill="#fff" rx="3.5" ry="4"/></svg> | ||
| ); | ||
| export default Icon; |
Contributor
There was a problem hiding this comment.
Missing isDark prop support and props forwarding.
The icon component violates the established pattern for icon components in this codebase by not supporting the isDark prop for light/dark mode and not forwarding props to the SVG element.
Apply this diff to fix the component:
-const Icon = (props) => (
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px"><radialGradient id="La9SoowKGoEUHOnYdJMSEa" cx="24" cy="10.009" r="32.252" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8c9eff"/><stop offset=".368" stop-color="#889af8"/><stop offset=".889" stop-color="#7e8fe6"/><stop offset="1" stop-color="#7b8ce1"/></radialGradient><path fill="url(#La9SoowKGoEUHOnYdJMSEa)" d="M40.107,12.15c-0.065-0.102-0.139-0.182-0.236-0.255c-0.769-0.578-4.671-3.339-9.665-3.875 c-0.01-0.001-0.048-0.003-0.057-0.003c-0.098,0-0.183,0.057-0.224,0.14l-0.269,0.538c0,0-0.001,0-0.001,0 c-0.017,0.033-0.026,0.071-0.026,0.111c0,0.109,0.07,0.202,0.168,0.236c0.006,0.002,0.048,0.011,0.063,0.014 c4.267,1.028,6.863,2.89,9.149,4.945c-4.047-2.066-8.044-4.001-15.009-4.001s-10.961,1.936-15.009,4.001 c2.286-2.055,4.882-3.917,9.149-4.945c0.015-0.004,0.057-0.012,0.063-0.014c0.098-0.034,0.168-0.127,0.168-0.236 c0-0.04-0.009-0.078-0.026-0.111c0,0-0.001,0-0.001,0l-0.269-0.538c-0.041-0.083-0.125-0.14-0.224-0.14 c-0.009,0-0.048,0.002-0.057,0.003c-4.994,0.536-8.896,3.297-9.665,3.875c-0.097,0.073-0.17,0.153-0.236,0.255 c-0.708,1.107-5.049,8.388-5.892,21.632c-0.009,0.142,0.04,0.289,0.135,0.395c4.592,5.144,11.182,5.752,12.588,5.823 c0.167,0.008,0.327-0.065,0.427-0.199l1.282-1.709c0.1-0.134,0.046-0.322-0.111-0.379c-2.705-0.986-5.717-2.7-8.332-5.706 C11.231,34.457,16.12,37,24,37s12.769-2.543,16.009-4.993c-2.616,3.006-5.627,4.719-8.332,5.706 c-0.157,0.057-0.211,0.245-0.111,0.379l1.282,1.709c0.101,0.134,0.26,0.208,0.427,0.199c1.407-0.072,7.996-0.679,12.588-5.823 c0.095-0.106,0.144-0.253,0.135-0.395C45.156,20.538,40.815,13.257,40.107,12.15z"/><ellipse cx="30.5" cy="26" opacity=".05" rx="4.5" ry="5"/><ellipse cx="30.5" cy="26" opacity=".05" rx="4" ry="4.5"/><ellipse cx="30.5" cy="26" fill="#fff" rx="3.5" ry="4"/><ellipse cx="17.5" cy="26" opacity=".05" rx="4.5" ry="5"/><ellipse cx="17.5" cy="26" opacity=".05" rx="4" ry="4.5"/><ellipse cx="17.5" cy="26" fill="#fff" rx="3.5" ry="4"/></svg>
+const Icon = ({ isDark, ...props }) => (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 48 48"
+ width="24px"
+ height="24px"
+ {...props}
+ >
+ <radialGradient id="La9SoowKGoEUHOnYdJMSEa" cx="24" cy="10.009" r="32.252" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stopColor="#8c9eff"/>
+ <stop offset=".368" stopColor="#889af8"/>
+ <stop offset=".889" stopColor="#7e8fe6"/>
+ <stop offset="1" stopColor="#7b8ce1"/>
+ </radialGradient>
+ <path fill="url(#La9SoowKGoEUHOnYdJMSEa)" d="M40.107,12.15c-0.065-0.102-0.139-0.182-0.236-0.255c-0.769-0.578-4.671-3.339-9.665-3.875 c-0.01-0.001-0.048-0.003-0.057-0.003c-0.098,0-0.183,0.057-0.224,0.14l-0.269,0.538c0,0-0.001,0-0.001,0 c-0.017,0.033-0.026,0.071-0.026,0.111c0,0.109,0.07,0.202,0.168,0.236c0.006,0.002,0.048,0.011,0.063,0.014 c4.267,1.028,6.863,2.89,9.149,4.945c-4.047-2.066-8.044-4.001-15.009-4.001s-10.961,1.936-15.009,4.001 c2.286-2.055,4.882-3.917,9.149-4.945c0.015-0.004,0.057-0.012,0.063-0.014c0.098-0.034,0.168-0.127,0.168-0.236 c0-0.04-0.009-0.078-0.026-0.111c0,0-0.001,0-0.001,0l-0.269-0.538c-0.041-0.083-0.125-0.14-0.224-0.14 c-0.009,0-0.048,0.002-0.057,0.003c-4.994,0.536-8.896,3.297-9.665,3.875c-0.097,0.073-0.17,0.153-0.236,0.255 c-0.708,1.107-5.049,8.388-5.892,21.632c-0.009,0.142,0.04,0.289,0.135,0.395c4.592,5.144,11.182,5.752,12.588,5.823 c0.167,0.008,0.327-0.065,0.427-0.199l1.282-1.709c0.1-0.134,0.046-0.322-0.111-0.379c-2.705-0.986-5.717-2.7-8.332-5.706 C11.231,34.457,16.12,37,24,37s12.769-2.543,16.009-4.993c-2.616,3.006-5.627,4.719-8.332,5.706 c-0.157,0.057-0.211,0.245-0.111,0.379l1.282,1.709c0.101,0.134,0.26,0.208,0.427,0.199c1.407-0.072,7.996-0.679,12.588-5.823 c0.095-0.106,0.144-0.253,0.135-0.395C45.156,20.538,40.815,13.257,40.107,12.15z"/>
+ <ellipse cx="30.5" cy="26" opacity=".05" rx="4.5" ry="5"/>
+ <ellipse cx="30.5" cy="26" opacity=".05" rx="4" ry="4.5"/>
+ <ellipse cx="30.5" cy="26" fill="#fff" rx="3.5" ry="4"/>
+ <ellipse cx="17.5" cy="26" opacity=".05" rx="4.5" ry="5"/>
+ <ellipse cx="17.5" cy="26" opacity=".05" rx="4" ry="4.5"/>
+ <ellipse cx="17.5" cy="26" fill="#fff" rx="3.5" ry="4"/>
+ </svg>
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const Icon = (props) => ( | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px"><radialGradient id="La9SoowKGoEUHOnYdJMSEa" cx="24" cy="10.009" r="32.252" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8c9eff"/><stop offset=".368" stop-color="#889af8"/><stop offset=".889" stop-color="#7e8fe6"/><stop offset="1" stop-color="#7b8ce1"/></radialGradient><path fill="url(#La9SoowKGoEUHOnYdJMSEa)" d="M40.107,12.15c-0.065-0.102-0.139-0.182-0.236-0.255c-0.769-0.578-4.671-3.339-9.665-3.875 c-0.01-0.001-0.048-0.003-0.057-0.003c-0.098,0-0.183,0.057-0.224,0.14l-0.269,0.538c0,0-0.001,0-0.001,0 c-0.017,0.033-0.026,0.071-0.026,0.111c0,0.109,0.07,0.202,0.168,0.236c0.006,0.002,0.048,0.011,0.063,0.014 c4.267,1.028,6.863,2.89,9.149,4.945c-4.047-2.066-8.044-4.001-15.009-4.001s-10.961,1.936-15.009,4.001 c2.286-2.055,4.882-3.917,9.149-4.945c0.015-0.004,0.057-0.012,0.063-0.014c0.098-0.034,0.168-0.127,0.168-0.236 c0-0.04-0.009-0.078-0.026-0.111c0,0-0.001,0-0.001,0l-0.269-0.538c-0.041-0.083-0.125-0.14-0.224-0.14 c-0.009,0-0.048,0.002-0.057,0.003c-4.994,0.536-8.896,3.297-9.665,3.875c-0.097,0.073-0.17,0.153-0.236,0.255 c-0.708,1.107-5.049,8.388-5.892,21.632c-0.009,0.142,0.04,0.289,0.135,0.395c4.592,5.144,11.182,5.752,12.588,5.823 c0.167,0.008,0.327-0.065,0.427-0.199l1.282-1.709c0.1-0.134,0.046-0.322-0.111-0.379c-2.705-0.986-5.717-2.7-8.332-5.706 C11.231,34.457,16.12,37,24,37s12.769-2.543,16.009-4.993c-2.616,3.006-5.627,4.719-8.332,5.706 c-0.157,0.057-0.211,0.245-0.111,0.379l1.282,1.709c0.101,0.134,0.26,0.208,0.427,0.199c1.407-0.072,7.996-0.679,12.588-5.823 c0.095-0.106,0.144-0.253,0.135-0.395C45.156,20.538,40.815,13.257,40.107,12.15z"/><ellipse cx="30.5" cy="26" opacity=".05" rx="4.5" ry="5"/><ellipse cx="30.5" cy="26" opacity=".05" rx="4" ry="4.5"/><ellipse cx="30.5" cy="26" fill="#fff" rx="3.5" ry="4"/><ellipse cx="17.5" cy="26" opacity=".05" rx="4.5" ry="5"/><ellipse cx="17.5" cy="26" opacity=".05" rx="4" ry="4.5"/><ellipse cx="17.5" cy="26" fill="#fff" rx="3.5" ry="4"/></svg> | |
| ); | |
| export default Icon; | |
| const Icon = ({ isDark, ...props }) => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 48 48" | |
| width="24px" | |
| height="24px" | |
| {...props} | |
| > | |
| <radialGradient id="La9SoowKGoEUHOnYdJMSEa" cx="24" cy="10.009" r="32.252" gradientUnits="userSpaceOnUse"> | |
| <stop offset="0" stopColor="#8c9eff"/> | |
| <stop offset=".368" stopColor="#889af8"/> | |
| <stop offset=".889" stopColor="#7e8fe6"/> | |
| <stop offset="1" stopColor="#7b8ce1"/> | |
| </radialGradient> | |
| <path | |
| fill="url(#La9SoowKGoEUHOnYdJMSEa)" | |
| d="M40.107,12.15c-0.065-0.102-0.139-0.182-0.236-0.255c-0.769-0.578-4.671-3.339-9.665-3.875 c-0.01-0.001-0.048-0.003-0.057-0.003c-0.098,0-0.183,0.057-0.224,0.14l-0.269,0.538c0,0-0.001,0-0.001,0 c-0.017,0.033-0.026,0.071-0.026,0.111c0,0.109,0.07,0.202,0.168,0.236c0.006,0.002,0.048,0.011,0.063,0.014 c4.267,1.028,6.863,2.89,9.149,4.945c-4.047-2.066-8.044-4.001-15.009-4.001s-10.961,1.936-15.009,4.001 c2.286-2.055,4.882-3.917,9.149-4.945c0.015-0.004,0.057-0.012,0.063-0.014c0.098-0.034,0.168-0.127,0.168-0.236 c0-0.04-0.009-0.078-0.026-0.111c0,0-0.001,0-0.001,0l-0.269-0.538c-0.041-0.083-0.125-0.14-0.224-0.14 c-0.009,0-0.048,0.002-0.057,0.003c-4.994,0.536-8.896,3.297-9.665,3.875c-0.097,0.073-0.17,0.153-0.236,0.255 c-0.708,1.107-5.049,8.388-5.892,21.632c-0.009,0.142,0.04,0.289,0.135,0.395c4.592,5.144,11.182,5.752,12.588,5.823 c0.167,0.008,0.327-0.065,0.427-0.199l1.282-1.709c0.1-0.134,0.046-0.322-0.111-0.379c-2.705-0.986-5.717-2.7-8.332-5.706 C11.231,34.457,16.12,37,24,37s12.769-2.543,16.009-4.993c-2.616,3.006-5.627,4.719-8.332,5.706 c-0.157,0.057-0.211,0.245-0.111,0.379l1.282,1.709c0.101,0.134,0.26,0.208,0.427,0.199c1.407-0.072,7.996-0.679,12.588-5.823 c0.095-0.106,0.144-0.253,0.135-0.395C45.156,20.538,40.815,13.257,40.107,12.15z" | |
| /> | |
| <ellipse cx="30.5" cy="26" opacity=".05" rx="4.5" ry="5"/> | |
| <ellipse cx="30.5" cy="26" opacity=".05" rx="4" ry="4.5"/> | |
| <ellipse cx="30.5" cy="26" fill="#fff" rx="3.5" ry="4"/> | |
| <ellipse cx="17.5" cy="26" opacity=".05" rx="4.5" ry="5"/> | |
| <ellipse cx="17.5" cy="26" opacity=".05" rx="4" ry="4.5"/> | |
| <ellipse cx="17.5" cy="26" fill="#fff" rx="3.5" ry="4"/> | |
| </svg> | |
| ); | |
| export default Icon; |
🤖 Prompt for AI Agents
In src/frontend/src/icons/discord/discord.jsx around lines 1 to 4, the component
must accept an isDark prop (default false) and forward remaining props to the
<svg>; update the component to destructure ({ isDark = false, ...props }), pass
{...props} onto the svg, set the svg color/style based on isDark (e.g., color:
isDark ? '#fff' : '#000') and replace the hardcoded solid fill attributes (like
fill="#fff") with fill="currentColor" so the icon respects the isDark value and
any forwarded props.
Comment on lines
+1
to
+4
| const Icon = (props) => ( | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24px" height="24px" fill-rule="evenodd" clip-rule="evenodd" baseProfile="basic"><linearGradient id="1dP_ejbheoOkMyPxlPY0Wa" x1="32" x2="32" y1="57" y2="7" gradientUnits="userSpaceOnUse" fill="#000000"><stop offset="0" stop-color="#000000" fill="#000000"/><stop offset="1" stop-color="#000000" fill="#000000"/></linearGradient><path fill="none" stroke="url(#1dP_ejbheoOkMyPxlPY0Wa)" stroke-miterlimit="10" stroke-width="2" d="M18.4,8h27.2C51.344,8,56,12.656,56,18.4 v27.2C56,51.344,51.344,56,45.6,56H18.4C12.656,56,8,51.344,8,45.6V18.4C8,12.656,12.656,8,18.4,8z"/><linearGradient id="1dP_ejbheoOkMyPxlPY0Wb" x1="33" x2="33" y1="50" y2="14" gradientUnits="userSpaceOnUse" fill="#000000"><stop offset="0" stop-color="#120c00" fill="#000000"/><stop offset="1" stop-color="#000000" fill="#000000"/></linearGradient><path fill="#080808" fill-rule="evenodd" d="M41.341,14h-5.268l4.39,7.714L30.805,14h-5.268 l4.829,9.429L20.268,14H15l5.268,12L15,50h5.268l10.098-25.714L25.537,50h5.268l9.659-27.429L36.073,50h5.268L51,20L41.341,14z" clip-rule="evenodd"/></svg> | ||
| ); | ||
| export default Icon; |
Contributor
There was a problem hiding this comment.
Missing isDark prop support and invalid gradient/path attributes.
The icon component has multiple issues:
- It doesn't support the
isDarkprop for light/dark mode - The SVG uses invalid HTML attribute syntax (
stroke-width,stop-color,fill-rule,clip-rule) - Props are not forwarded to the SVG element
Apply this diff to fix the component:
-const Icon = (props) => (
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24px" height="24px" fill-rule="evenodd" clip-rule="evenodd" baseProfile="basic"><linearGradient id="1dP_ejbheoOkMyPxlPY0Wa" x1="32" x2="32" y1="57" y2="7" gradientUnits="userSpaceOnUse" fill="#000000"><stop offset="0" stop-color="#000000" fill="#000000"/><stop offset="1" stop-color="#000000" fill="#000000"/></linearGradient><path fill="none" stroke="url(#1dP_ejbheoOkMyPxlPY0Wa)" stroke-miterlimit="10" stroke-width="2" d="M18.4,8h27.2C51.344,8,56,12.656,56,18.4 v27.2C56,51.344,51.344,56,45.6,56H18.4C12.656,56,8,51.344,8,45.6V18.4C8,12.656,12.656,8,18.4,8z"/><linearGradient id="1dP_ejbheoOkMyPxlPY0Wb" x1="33" x2="33" y1="50" y2="14" gradientUnits="userSpaceOnUse" fill="#000000"><stop offset="0" stop-color="#120c00" fill="#000000"/><stop offset="1" stop-color="#000000" fill="#000000"/></linearGradient><path fill="#080808" fill-rule="evenodd" d="M41.341,14h-5.268l4.39,7.714L30.805,14h-5.268 l4.829,9.429L20.268,14H15l5.268,12L15,50h5.268l10.098-25.714L25.537,50h5.268l9.659-27.429L36.073,50h5.268L51,20L41.341,14z" clip-rule="evenodd"/></svg>
+const Icon = ({ isDark, ...props }) => (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 64 64"
+ width="24px"
+ height="24px"
+ fillRule="evenodd"
+ clipRule="evenodd"
+ baseProfile="basic"
+ {...props}
+ >
+ <linearGradient id="1dP_ejbheoOkMyPxlPY0Wa" x1="32" x2="32" y1="57" y2="7" gradientUnits="userSpaceOnUse" fill="#000000">
+ <stop offset="0" stopColor="#000000" fill="#000000"/>
+ <stop offset="1" stopColor="#000000" fill="#000000"/>
+ </linearGradient>
+ <path fill="none" stroke="url(#1dP_ejbheoOkMyPxlPY0Wa)" strokeMiterlimit="10" strokeWidth="2" d="M18.4,8h27.2C51.344,8,56,12.656,56,18.4 v27.2C56,51.344,51.344,56,45.6,56H18.4C12.656,56,8,51.344,8,45.6V18.4C8,12.656,12.656,8,18.4,8z"/>
+ <linearGradient id="1dP_ejbheoOkMyPxlPY0Wb" x1="33" x2="33" y1="50" y2="14" gradientUnits="userSpaceOnUse" fill="#000000">
+ <stop offset="0" stopColor="#120c00" fill="#000000"/>
+ <stop offset="1" stopColor="#000000" fill="#000000"/>
+ </linearGradient>
+ <path fill="#080808" fillRule="evenodd" d="M41.341,14h-5.268l4.39,7.714L30.805,14h-5.268 l4.829,9.429L20.268,14H15l5.268,12L15,50h5.268l10.098-25.714L25.537,50h5.268l9.659-27.429L36.073,50h5.268L51,20L41.341,14z" clipRule="evenodd"/>
+ </svg>
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const Icon = (props) => ( | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24px" height="24px" fill-rule="evenodd" clip-rule="evenodd" baseProfile="basic"><linearGradient id="1dP_ejbheoOkMyPxlPY0Wa" x1="32" x2="32" y1="57" y2="7" gradientUnits="userSpaceOnUse" fill="#000000"><stop offset="0" stop-color="#000000" fill="#000000"/><stop offset="1" stop-color="#000000" fill="#000000"/></linearGradient><path fill="none" stroke="url(#1dP_ejbheoOkMyPxlPY0Wa)" stroke-miterlimit="10" stroke-width="2" d="M18.4,8h27.2C51.344,8,56,12.656,56,18.4 v27.2C56,51.344,51.344,56,45.6,56H18.4C12.656,56,8,51.344,8,45.6V18.4C8,12.656,12.656,8,18.4,8z"/><linearGradient id="1dP_ejbheoOkMyPxlPY0Wb" x1="33" x2="33" y1="50" y2="14" gradientUnits="userSpaceOnUse" fill="#000000"><stop offset="0" stop-color="#120c00" fill="#000000"/><stop offset="1" stop-color="#000000" fill="#000000"/></linearGradient><path fill="#080808" fill-rule="evenodd" d="M41.341,14h-5.268l4.39,7.714L30.805,14h-5.268 l4.829,9.429L20.268,14H15l5.268,12L15,50h5.268l10.098-25.714L25.537,50h5.268l9.659-27.429L36.073,50h5.268L51,20L41.341,14z" clip-rule="evenodd"/></svg> | |
| ); | |
| export default Icon; | |
| const Icon = ({ isDark, ...props }) => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 64 64" | |
| width="24px" | |
| height="24px" | |
| fillRule="evenodd" | |
| clipRule="evenodd" | |
| baseProfile="basic" | |
| {...props} | |
| > | |
| <linearGradient id="1dP_ejbheoOkMyPxlPY0Wa" x1="32" x2="32" y1="57" y2="7" gradientUnits="userSpaceOnUse" fill="#000000"> | |
| <stop offset="0" stopColor="#000000" fill="#000000" /> | |
| <stop offset="1" stopColor="#000000" fill="#000000" /> | |
| </linearGradient> | |
| <path | |
| fill="none" | |
| stroke="url(#1dP_ejbheoOkMyPxlPY0Wa)" | |
| strokeMiterlimit="10" | |
| strokeWidth="2" | |
| d="M18.4,8h27.2C51.344,8,56,12.656,56,18.4 v27.2C56,51.344,51.344,56,45.6,56H18.4C12.656,56,8,51.344,8,45.6V18.4C8,12.656,12.656,8,18.4,8z" | |
| /> | |
| <linearGradient id="1dP_ejbheoOkMyPxlPY0Wb" x1="33" x2="33" y1="50" y2="14" gradientUnits="userSpaceOnUse" fill="#000000"> | |
| <stop offset="0" stopColor="#120c00" fill="#000000" /> | |
| <stop offset="1" stopColor="#000000" fill="#000000" /> | |
| </linearGradient> | |
| <path | |
| fill="#080808" | |
| fillRule="evenodd" | |
| d="M41.341,14h-5.268l4.39,7.714L30.805,14h-5.268 l4.829,9.429L20.268,14H15l5.268,12L15,50h5.268l10.098-25.714L25.537,50h5.268l9.659-27.429L36.073,50h5.268L51,20L41.341,14z" | |
| clipRule="evenodd" | |
| /> | |
| </svg> | |
| ); | |
| export default Icon; |
🤖 Prompt for AI Agents
In src/frontend/src/icons/miro/miro.jsx around lines 1-4, the component must be
updated to accept and use an isDark prop, forward any extra props to the <svg>,
and replace invalid SVG attributes with their React camelCase equivalents;
change prop signature to const Icon = ({ isDark = false, ...props }) => ( ... ),
spread {...props} onto the svg, replace attributes stroke-width, stop-color,
fill-rule, clip-rule with strokeWidth, stopColor, fillRule, clipRule, and make
fills/gradient ids conditional on isDark (or choose colors based on isDark) so
the icon renders correctly in light/dark mode while keeping unique gradient ids
to avoid collisions.
Comment on lines
+1
to
+4
| const Icon = (props) => ( | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z"/></svg> | ||
| ); | ||
| export default Icon; |
Contributor
There was a problem hiding this comment.
Missing isDark prop support required by coding guidelines.
The coding guidelines specify that SVG icon components must use the isDark prop to support both light and dark mode. This component should accept and utilize the isDark prop for theme-aware rendering.
Apply this diff to add isDark prop support:
-const Icon = (props) => (
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z"/></svg>
+const Icon = ({ isDark, ...props }) => (
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px" {...props}>
+ <path
+ d="M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z"
+ fill={isDark ? "#ffffff" : "#000000"}
+ />
+ </svg>🤖 Prompt for AI Agents
In src/frontend/src/icons/twitter/twitter.jsx around lines 1-4, the Icon
component currently ignores theme; update the component to accept an isDark prop
(default false) and use it to set the SVG color for theme-aware rendering.
Modify the function signature to destructure isDark and ...props, apply a
conditional fill color on the svg or path based on isDark (e.g., a light color
when isDark is true, dark color otherwise), and forward remaining props
(width/height/className) to the svg element so consumers can still override
sizing and attributes.
💡 Verification agent
🧩 Analysis chain
Verify that all other icon SVG components implement isDark prop support.
Based on the coding guidelines requirement and the reference to the asana.jsx component, ensure that all the new icon SVG components (Airtable, Asana, Attio, Calendly, Contentful, Discord, Figma, Miro, Wrike) properly implement the isDark prop for theme-aware rendering.
🏁 Script executed:
#!/bin/bash
# Description: Check if all icon SVG components in this PR implement isDark prop support
# Expected: All icon components should destructure isDark from props and use it for theming
echo "Checking icon SVG components for isDark prop usage:"
echo "=================================================="
# Find all new icon directories and check their SVG files
for icon_dir in src/frontend/src/icons/{airtable,asana,attio,calendly,contentful,discord,figma,miro,twitter,wrike}; do
if [ -d "$icon_dir" ]; then
echo "Checking $icon_dir:"
# Look for .jsx files in the icon directory
find "$icon_dir" -name "*.jsx" -exec sh -c '
file="$1"
echo " File: $file"
if grep -q "isDark" "$file"; then
echo " ✓ isDark prop found"
grep -n "isDark" "$file" || true
else
echo " ✗ isDark prop NOT found"
fi
echo ""
' _ {} \;
fi
doneLength of output: 7375
Implement isDark prop support across all new SVG icons
None of the newly added icon components currently accept or use the isDark prop for theme-aware rendering. Per our guidelines, each SVG must destructure isDark from props and apply conditional fill/stroke colors. Please update the following files:
• src/frontend/src/icons/airtable/airtable.jsx
• src/frontend/src/icons/asana/asana.jsx
• src/frontend/src/icons/attio/attio.jsx
• src/frontend/src/icons/calendly/calendly.jsx
• src/frontend/src/icons/contentful/contentful.jsx
• src/frontend/src/icons/discord/discord.jsx
• src/frontend/src/icons/figma/figma.jsx
• src/frontend/src/icons/miro/miro.jsx
• src/frontend/src/icons/twitter/twitter.jsx
• src/frontend/src/icons/wrike/wrike.jsx
Example pattern to follow (from Asana icon reference):
- const Icon = (props) => (
+ const Icon = ({ isDark, ...props }) => (
<svg
+ fill={isDark ? "#FFF" : "#000"}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 50 50"
width="24px"
height="24px"
{...props}
>
…
</svg>
);Ensure you forward isDark through your index.tsx export as well.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/frontend/src/icons/twitter/twitter.jsx around lines 1 to 4, the Icon
component does not accept or use the isDark prop for theme-aware rendering;
update the component to destructure isDark from props (e.g. const Icon = ({
isDark, ...props }) => ...) and apply conditional colors to the SVG elements
(set fill and/or stroke to the dark or light color based on isDark, passing
remaining props through to the <svg>), and ensure the icon export in the icons
index (index.tsx) forwards isDark when re-exporting these icons so theme prop
flows through.
Comment on lines
+1
to
+37
| const Icon = (props) => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 100 100" | ||
| {...props} | ||
| > | ||
| <path | ||
| fill="#73787F" | ||
| 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="#73787F" | ||
| 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="#73787F" | ||
| d="M53.3,64.8v-10.5l4.8-4.6v15.1H53.3z" | ||
| /> | ||
| <path | ||
| fill="#73787F" | ||
| 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="#73787F" | ||
| 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> | ||
| ); | ||
| export default Icon; |
Contributor
There was a problem hiding this comment.
Good props forwarding but missing dark mode support.
The component properly forwards props to the SVG element, but it lacks the required isDark prop for theme adaptation.
Apply this diff to add dark mode support:
-const Icon = (props) => (
+const Icon = ({ isDark, ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
{...props}
>
<path
- fill="#73787F"
+ fill={isDark ? "#ffffff" : "#73787F"}
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="#73787F"
+ fill={isDark ? "#ffffff" : "#73787F"}
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="#73787F"
+ fill={isDark ? "#ffffff" : "#73787F"}
d="M53.3,64.8v-10.5l4.8-4.6v15.1H53.3z"
/>
<path
- fill="#73787F"
+ fill={isDark ? "#ffffff" : "#73787F"}
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="#73787F"
+ fill={isDark ? "#ffffff" : "#73787F"}
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"
+ fill={isDark ? "#5EFF6A" : "#00A551"}
d="M63.2,34.9l-10.8,10.8l3.2,3.2l14-14H63.2z"
/>
<path
- fill="#A5CD39"
+ fill={isDark ? "#C8FF5A" : "#A5CD39"}
d="M53.6,40.6h-6.4l8.4,8.4l3.2-3.2L53.6,40.6z"
/>
</svg>
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const Icon = (props) => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 100 100" | |
| {...props} | |
| > | |
| <path | |
| fill="#73787F" | |
| 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="#73787F" | |
| 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="#73787F" | |
| d="M53.3,64.8v-10.5l4.8-4.6v15.1H53.3z" | |
| /> | |
| <path | |
| fill="#73787F" | |
| 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="#73787F" | |
| 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> | |
| ); | |
| export default Icon; | |
| const Icon = ({ isDark, ...props }) => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 100 100" | |
| {...props} | |
| > | |
| <path | |
| fill={isDark ? "#ffffff" : "#73787F"} | |
| 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={isDark ? "#ffffff" : "#73787F"} | |
| 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={isDark ? "#ffffff" : "#73787F"} | |
| d="M53.3,64.8v-10.5l4.8-4.6v15.1H53.3z" | |
| /> | |
| <path | |
| fill={isDark ? "#ffffff" : "#73787F"} | |
| 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={isDark ? "#ffffff" : "#73787F"} | |
| 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={isDark ? "#5EFF6A" : "#00A551"} | |
| d="M63.2,34.9l-10.8,10.8l3.2,3.2l14-14H63.2z" | |
| /> | |
| <path | |
| fill={isDark ? "#C8FF5A" : "#A5CD39"} | |
| d="M53.6,40.6h-6.4l8.4,8.4l3.2-3.2L53.6,40.6z" | |
| /> | |
| </svg> | |
| ); | |
| export default Icon; |
github-actions
Bot
added
enhancement
Contributor
There was a problem hiding this comment.
Actionable comments posted: 26
🔭 Outside diff range comments (3)
src/frontend/src/icons/twitter/twitter.jsx (1)
1-5: Missing isDark prop support violates coding guidelines.The icon component doesn't accept or use the
isDarkprop to support both light and dark modes, which is a requirement according to the coding guidelines for icon components in this codebase.Apply this diff to add dark mode support:
-const Icon = (props) => ( - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z"/></svg> +const Icon = ({ isDark, ...props }) => ( + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px" {...props}> + <path + fill={isDark ? "#ffffff" : "#000000"} + d="M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z" + /> + </svg>src/frontend/src/icons/airtable/airtable.jsx (1)
1-5: Missing isDark prop support and props spreading violates coding guidelines.The icon component has two issues:
- It doesn't accept or use the
isDarkprop to support both light and dark modes- It doesn't spread props to the SVG element, limiting its flexibility
Apply this diff to add dark mode support and proper props handling:
-const Icon = (props) => ( - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="24px" height="24px" baseProfile="basic"><path d="M56.511,91.93c-5.485,0-9.947-4.464-9.947-9.95V63.611L19.405,76.658 c-1.352,0.652-2.811,0.985-4.327,0.985C9.521,77.644,5,73.18,5,67.693V40.541c0-2.656,1.089-5.162,3.068-7.062 c0.529-0.522,1.158-1.008,1.837-1.417c0.801-2.901,2.893-5.324,5.781-6.521l29.086-12.034c2.289-0.949,4.713-1.432,7.2-1.432 c2.483,0,4.906,0.481,7.201,1.431l29.081,12.034C91.043,26.693,89,32,93.95,31.759C96.974,33.475,99,36.726,99,40.42v28.93 c0,4.107-2.468,7.737-6.286,9.25L60.126,91.249C58.998,91.696,57.771,91.93,56.511,91.93z" opacity=".35"/><path fill="#f2f2f2" d="M54.511,89.93c-5.485,0-9.947-4.464-9.947-9.95V61.611L17.405,74.658 c-1.352,0.652-2.811,0.985-4.327,0.985C7.521,75.644,3,71.18,3,65.693V38.541c0-2.656,1.089-5.162,3.068-7.062 c0.529-0.522,1.158-1.008,1.837-1.417c0.801-2.901,2.893-5.324,5.781-6.521l29.086-12.034c2.289-0.949,4.713-1.432,7.2-1.432 c2.483,0,4.906,0.481,7.201,1.431l29.081,12.034c2.788,1.154,4.835,3.451,5.695,6.22C94.974,31.475,97,34.726,97,38.42v28.93 c0,4.107-2.468,7.737-6.286,9.25L58.126,89.249C56.998,89.696,55.771,89.93,54.511,89.93z"/><path fill="#40396e" d="M87.343,33.479c0.035-0.232,0.055-0.47,0.057-0.71c0.015-2.026-1.186-3.835-3.057-4.609 l-29.08-12.034c-1.686-0.697-3.466-1.051-5.29-1.051c-1.826,0-3.607,0.354-5.289,1.052L15.601,28.159 c-1.871,0.775-3.07,2.585-3.055,4.61c0.002,0.288,0.029,0.572,0.079,0.85c-0.714,0.072-1.396,0.292-2.003,0.646 c-0.412,0.232-0.787,0.517-1.062,0.794C8.554,36.012,8,37.249,8,38.541v27.152c0,2.729,2.278,4.95,5.078,4.95 c0.759,0,1.488-0.167,2.162-0.492l34.323-16.489v26.317c0,2.729,2.219,4.95,4.947,4.95c0.625,0,1.239-0.117,1.806-0.342 L88.873,71.95C90.772,71.198,92,69.393,92,67.35V38.42C92,35.788,89.937,33.629,87.343,33.479z"/><path fill="#fcb400" d="M53.967,46.123c-2.566,1.018-5.423,1.018-7.989,0l-29.202-11.58 c-1.627-0.645-1.644-2.942-0.027-3.612L45.83,18.898l0,0c2.653-1.098,5.633-1.098,8.286,0l29.08,12.034 c1.618,0.669,1.6,2.966-0.026,3.611L53.967,46.123z"/><path fill="#18bfff" d="M86.334,36.609l-32.54,12.63c-0.743,0.295-1.23,1.012-1.23,1.811V79.98 c0,1.376,1.387,2.318,2.667,1.811L87.77,69.16c0.743-0.294,1.23-1.012,1.23-1.811V38.42C89,37.044,87.613,36.102,86.334,36.609z"/><path fill="#ba2048" d="M44.803,48.978L13.89,36.729c-0.591-0.234-1.286-0.156-1.772,0.137 c-0.181,0.1-0.347,0.224-0.494,0.37l10.942,11.199l12.092,9.061l10.308-4.952v0C46.497,51.803,46.374,49.602,44.803,48.978z"/><path fill="#f82b60" d="M11.624,37.236C11.624,37.236,11.623,37.236,11.624,37.236C11.266,37.574,11,38.022,11,38.541v27.152 c0,1.436,1.65,2.377,2.942,1.754l20.715-9.952L11.624,37.236z"/></svg> +const Icon = ({ isDark, ...props }) => ( + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 100 100" + width="24px" + height="24px" + baseProfile="basic" + {...props} + > + <path d="M56.511,91.93c-5.485,0-9.947-4.464-9.947-9.95V63.611L19.405,76.658 c-1.352,0.652-2.811,0.985-4.327,0.985C9.521,77.644,5,73.18,5,67.693V40.541c0-2.656,1.089-5.162,3.068-7.062 c0.529-0.522,1.158-1.008,1.837-1.417c0.801-2.901,2.893-5.324,5.781-6.521l29.086-12.034c2.289-0.949,4.713-1.432,7.2-1.432 c2.483,0,4.906,0.481,7.201,1.431l29.081,12.034C91.043,26.693,89,32,93.95,31.759C96.974,33.475,99,36.726,99,40.42v28.93 c0,4.107-2.468,7.737-6.286,9.25L60.126,91.249C58.998,91.696,57.771,91.93,56.511,91.93z" opacity={isDark ? ".2" : ".35"}/> + <path fill={isDark ? "#333333" : "#f2f2f2"} d="M54.511,89.93c-5.485,0-9.947-4.464-9.947-9.95V61.611L17.405,74.658 c-1.352,0.652-2.811,0.985-4.327,0.985C7.521,75.644,3,71.18,3,65.693V38.541c0-2.656,1.089-5.162,3.068-7.062 c0.529-0.522,1.158-1.008,1.837-1.417c0.801-2.901,2.893-5.324,5.781-6.521l29.086-12.034c2.289-0.949,4.713-1.432,7.2-1.432 c2.483,0,4.906,0.481,7.201,1.431l29.081,12.034c2.788,1.154,4.835,3.451,5.695,6.22C94.974,31.475,97,34.726,97,38.42v28.93 c0,4.107-2.468,7.737-6.286,9.25L58.126,89.249C56.998,89.696,55.771,89.93,54.511,89.93z"/> + <path fill={isDark ? "#5a5a5a" : "#40396e"} d="M87.343,33.479c0.035-0.232,0.055-0.47,0.057-0.71c0.015-2.026-1.186-3.835-3.057-4.609 l-29.08-12.034c-1.686-0.697-3.466-1.051-5.29-1.051c-1.826,0-3.607,0.354-5.289,1.052L15.601,28.159 c-1.871,0.775-3.07,2.585-3.055,4.61c0.002,0.288,0.029,0.572,0.079,0.85c-0.714,0.072-1.396,0.292-2.003,0.646 c-0.412,0.232-0.787,0.517-1.062,0.794C8.554,36.012,8,37.249,8,38.541v27.152c0,2.729,2.278,4.95,5.078,4.95 c0.759,0,1.488-0.167,2.162-0.492l34.323-16.489v26.317c0,2.729,2.219,4.95,4.947,4.95c0.625,0,1.239-0.117,1.806-0.342 L88.873,71.95C90.772,71.198,92,69.393,92,67.35V38.42C92,35.788,89.937,33.629,87.343,33.479z"/> + <path fill="#fcb400" d="M53.967,46.123c-2.566,1.018-5.423,1.018-7.989,0l-29.202-11.58 c-1.627-0.645-1.644-2.942-0.027-3.612L45.83,18.898l0,0c2.653-1.098,5.633-1.098,8.286,0l29.08,12.034 c1.618,0.669,1.6,2.966-0.026,3.611L53.967,46.123z"/> + <path fill="#18bfff" d="M86.334,36.609l-32.54,12.63c-0.743,0.295-1.23,1.012-1.23,1.811V79.98 c0,1.376,1.387,2.318,2.667,1.811L87.77,69.16c0.743-0.294,1.23-1.012,1.23-1.811V38.42C89,37.044,87.613,36.102,86.334,36.609z"/> + <path fill="#ba2048" d="M44.803,48.978L13.89,36.729c-0.591-0.234-1.286-0.156-1.772,0.137 c-0.181,0.1-0.347,0.224-0.494,0.37l10.942,11.199l12.092,9.061l10.308-4.952v0C46.497,51.803,46.374,49.602,44.803,48.978z"/> + <path fill="#f82b60" d="M11.624,37.236C11.624,37.236,11.623,37.236,11.624,37.236C11.266,37.574,11,38.022,11,38.541v27.152 c0,1.436,1.65,2.377,2.942,1.754l20.715-9.952L11.624,37.236z"/> + </svg>src/frontend/src/icons/lazyIconImports.ts (1)
8-396: Ensure all new icon imports have matching component files
Our audit found that the following imports don’t correspond to any directory undersrc/frontend/src/icons:
google_analytics(should exportGoogle_AnalyticsIcon)googlemeet(should exportGooglemeetIcon)GoogleTasks(should exportGoogleTasksIcon)googlesheets(should exportGooglesheetsIcon)googlemaps(should exportGooglemapsIcon)todoist(should exportTodoistIcon)RedditIcon)Please add each folder with an
index.tsxexporting the expected component, or adjust the import paths/casing (e.g.google_drivevsGoogleDrive) to match the actual directory names.
🧹 Nitpick comments (4)
src/frontend/src/icons/discord/discord.jsx (1)
1-4: Missing index.tsx file for proper forwardRef wrapper.According to the coding guidelines and retrieved learnings, you need to create an
index.tsxfile that exports the icon usingforwardRefand passes theisDarkprop.Do you want me to generate the missing
src/frontend/src/icons/discord/index.tsxfile that follows the established pattern?src/frontend/src/icons/asana/index.tsx (1)
4-9: Set a displayName for easier debugging and clearer SSR warnings.Add a displayName to the component.
Apply this diff:
export const AsanaIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return <AsanaIconSVG ref={ref} {...props} />; }); +AsanaIcon.displayName = "AsanaIcon";src/frontend/src/icons/airtable/index.tsx (1)
4-9: Add displayName for better devtools ergonomics.Apply this diff:
export const AirtableIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return <AirtableIconSVG ref={ref} {...props} />; }); +AirtableIcon.displayName = "AirtableIcon";src/frontend/src/icons/contentful/index.tsx (1)
4-9: Add displayName for consistency and easier debugging.Apply this diff:
export const ContentfulIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return <ContentfulIconSVG ref={ref} {...props} />; }); +ContentfulIcon.displayName = "ContentfulIcon";
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (10)
src/frontend/src/icons/airtable/airtable.svgis excluded by!**/*.svgsrc/frontend/src/icons/asana/asana.svgis excluded by!**/*.svgsrc/frontend/src/icons/attio/attio.svgis excluded by!**/*.svgsrc/frontend/src/icons/calendly/calendly.svgis excluded by!**/*.svgsrc/frontend/src/icons/contentful/contentful.svgis excluded by!**/*.svgsrc/frontend/src/icons/discord/discord.svgis excluded by!**/*.svgsrc/frontend/src/icons/figma/figma.svgis excluded by!**/*.svgsrc/frontend/src/icons/miro/miro.svgis excluded by!**/*.svgsrc/frontend/src/icons/twitter/twitter.svgis excluded by!**/*.svgsrc/frontend/src/icons/wrike/wrike.svgis excluded by!**/*.svg
📒 Files selected for processing (32)
src/backend/base/langflow/components/composio/__init__.py(1 hunks)src/backend/base/langflow/components/composio/airtable_composio.py(1 hunks)src/backend/base/langflow/components/composio/asana_composio.py(1 hunks)src/backend/base/langflow/components/composio/attio_composio.py(1 hunks)src/backend/base/langflow/components/composio/calendly_composio.py(1 hunks)src/backend/base/langflow/components/composio/contentful_composio.py(1 hunks)src/backend/base/langflow/components/composio/discord_composio.py(1 hunks)src/backend/base/langflow/components/composio/figma_composio.py(1 hunks)src/backend/base/langflow/components/composio/miro_composio.py(1 hunks)src/backend/base/langflow/components/composio/twitter_composio.py(1 hunks)src/backend/base/langflow/components/composio/wrike_composio.py(1 hunks)src/frontend/src/icons/airtable/airtable.jsx(1 hunks)src/frontend/src/icons/airtable/index.tsx(1 hunks)src/frontend/src/icons/asana/asana.jsx(1 hunks)src/frontend/src/icons/asana/index.tsx(1 hunks)src/frontend/src/icons/attio/attio.jsx(1 hunks)src/frontend/src/icons/attio/index.tsx(1 hunks)src/frontend/src/icons/calendly/calendly.jsx(1 hunks)src/frontend/src/icons/calendly/index.tsx(1 hunks)src/frontend/src/icons/contentful/contentful.jsx(1 hunks)src/frontend/src/icons/contentful/index.tsx(1 hunks)src/frontend/src/icons/discord/discord.jsx(1 hunks)src/frontend/src/icons/discord/index.tsx(1 hunks)src/frontend/src/icons/figma/figma.jsx(1 hunks)src/frontend/src/icons/figma/index.tsx(1 hunks)src/frontend/src/icons/lazyIconImports.ts(14 hunks)src/frontend/src/icons/miro/index.tsx(1 hunks)src/frontend/src/icons/miro/miro.jsx(1 hunks)src/frontend/src/icons/twitter/index.tsx(1 hunks)src/frontend/src/icons/twitter/twitter.jsx(1 hunks)src/frontend/src/icons/wrike/index.tsx(1 hunks)src/frontend/src/icons/wrike/wrike.jsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
src/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{ts,tsx,js,jsx}: All frontend TypeScript and JavaScript code should be located under src/frontend/src/ and organized into components, pages, icons, stores, types, utils, hooks, services, and assets directories as per the specified directory layout.
Use React 18 with TypeScript for all UI components in the frontend.
Format all TypeScript and JavaScript code using the make format_frontend command.
Lint all TypeScript and JavaScript code using the make lint command.
Files:
src/frontend/src/icons/miro/miro.jsxsrc/frontend/src/icons/figma/index.tsxsrc/frontend/src/icons/contentful/contentful.jsxsrc/frontend/src/icons/twitter/twitter.jsxsrc/frontend/src/icons/twitter/index.tsxsrc/frontend/src/icons/airtable/index.tsxsrc/frontend/src/icons/attio/index.tsxsrc/frontend/src/icons/calendly/index.tsxsrc/frontend/src/icons/discord/index.tsxsrc/frontend/src/icons/wrike/index.tsxsrc/frontend/src/icons/airtable/airtable.jsxsrc/frontend/src/icons/wrike/wrike.jsxsrc/frontend/src/icons/miro/index.tsxsrc/frontend/src/icons/attio/attio.jsxsrc/frontend/src/icons/figma/figma.jsxsrc/frontend/src/icons/contentful/index.tsxsrc/frontend/src/icons/asana/index.tsxsrc/frontend/src/icons/discord/discord.jsxsrc/frontend/src/icons/calendly/calendly.jsxsrc/frontend/src/icons/asana/asana.jsxsrc/frontend/src/icons/lazyIconImports.ts
src/frontend/src/icons/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/frontend_development.mdc)
Use Lucide React for icons in the frontend.
Files:
src/frontend/src/icons/miro/miro.jsxsrc/frontend/src/icons/figma/index.tsxsrc/frontend/src/icons/contentful/contentful.jsxsrc/frontend/src/icons/twitter/twitter.jsxsrc/frontend/src/icons/twitter/index.tsxsrc/frontend/src/icons/airtable/index.tsxsrc/frontend/src/icons/attio/index.tsxsrc/frontend/src/icons/calendly/index.tsxsrc/frontend/src/icons/discord/index.tsxsrc/frontend/src/icons/wrike/index.tsxsrc/frontend/src/icons/airtable/airtable.jsxsrc/frontend/src/icons/wrike/wrike.jsxsrc/frontend/src/icons/miro/index.tsxsrc/frontend/src/icons/attio/attio.jsxsrc/frontend/src/icons/figma/figma.jsxsrc/frontend/src/icons/contentful/index.tsxsrc/frontend/src/icons/asana/index.tsxsrc/frontend/src/icons/discord/discord.jsxsrc/frontend/src/icons/calendly/calendly.jsxsrc/frontend/src/icons/asana/asana.jsxsrc/frontend/src/icons/lazyIconImports.ts
src/frontend/src/icons/*/*.@(js|jsx|ts|tsx)
📄 CodeRabbit Inference Engine (.cursor/rules/icons.mdc)
Create a new directory for your icon in
src/frontend/src/icons/YourIconName/and add your SVG as a React component (e.g.,YourIconName.jsx). The SVG component must use theisDarkprop to support both light and dark mode.
Files:
src/frontend/src/icons/miro/miro.jsxsrc/frontend/src/icons/figma/index.tsxsrc/frontend/src/icons/contentful/contentful.jsxsrc/frontend/src/icons/twitter/twitter.jsxsrc/frontend/src/icons/twitter/index.tsxsrc/frontend/src/icons/airtable/index.tsxsrc/frontend/src/icons/attio/index.tsxsrc/frontend/src/icons/calendly/index.tsxsrc/frontend/src/icons/discord/index.tsxsrc/frontend/src/icons/wrike/index.tsxsrc/frontend/src/icons/airtable/airtable.jsxsrc/frontend/src/icons/wrike/wrike.jsxsrc/frontend/src/icons/miro/index.tsxsrc/frontend/src/icons/attio/attio.jsxsrc/frontend/src/icons/figma/figma.jsxsrc/frontend/src/icons/contentful/index.tsxsrc/frontend/src/icons/asana/index.tsxsrc/frontend/src/icons/discord/discord.jsxsrc/frontend/src/icons/calendly/calendly.jsxsrc/frontend/src/icons/asana/asana.jsx
src/backend/base/langflow/components/**/*.py
📄 CodeRabbit Inference Engine (.cursor/rules/backend_development.mdc)
src/backend/base/langflow/components/**/*.py: Add new backend components to the appropriate subdirectory under src/backend/base/langflow/components/
Implement async component methods using async def and await for asynchronous operations
Use asyncio.create_task for background work in async components and ensure proper cleanup on cancellation
Use asyncio.Queue for non-blocking queue operations in async components and handle timeouts appropriately
Files:
src/backend/base/langflow/components/composio/wrike_composio.pysrc/backend/base/langflow/components/composio/asana_composio.pysrc/backend/base/langflow/components/composio/miro_composio.pysrc/backend/base/langflow/components/composio/airtable_composio.pysrc/backend/base/langflow/components/composio/discord_composio.pysrc/backend/base/langflow/components/composio/twitter_composio.pysrc/backend/base/langflow/components/composio/contentful_composio.pysrc/backend/base/langflow/components/composio/figma_composio.pysrc/backend/base/langflow/components/composio/attio_composio.pysrc/backend/base/langflow/components/composio/calendly_composio.pysrc/backend/base/langflow/components/composio/__init__.py
{src/backend/**/*.py,tests/**/*.py,Makefile}
📄 CodeRabbit Inference Engine (.cursor/rules/backend_development.mdc)
{src/backend/**/*.py,tests/**/*.py,Makefile}: Run make format_backend to format Python code before linting or committing changes
Run make lint to perform linting checks on backend Python code
Files:
src/backend/base/langflow/components/composio/wrike_composio.pysrc/backend/base/langflow/components/composio/asana_composio.pysrc/backend/base/langflow/components/composio/miro_composio.pysrc/backend/base/langflow/components/composio/airtable_composio.pysrc/backend/base/langflow/components/composio/discord_composio.pysrc/backend/base/langflow/components/composio/twitter_composio.pysrc/backend/base/langflow/components/composio/contentful_composio.pysrc/backend/base/langflow/components/composio/figma_composio.pysrc/backend/base/langflow/components/composio/attio_composio.pysrc/backend/base/langflow/components/composio/calendly_composio.pysrc/backend/base/langflow/components/composio/__init__.py
src/backend/**/components/**/*.py
📄 CodeRabbit Inference Engine (.cursor/rules/icons.mdc)
In your Python component class, set the
iconattribute to a string matching the frontend icon mapping exactly (case-sensitive).
Files:
src/backend/base/langflow/components/composio/wrike_composio.pysrc/backend/base/langflow/components/composio/asana_composio.pysrc/backend/base/langflow/components/composio/miro_composio.pysrc/backend/base/langflow/components/composio/airtable_composio.pysrc/backend/base/langflow/components/composio/discord_composio.pysrc/backend/base/langflow/components/composio/twitter_composio.pysrc/backend/base/langflow/components/composio/contentful_composio.pysrc/backend/base/langflow/components/composio/figma_composio.pysrc/backend/base/langflow/components/composio/attio_composio.pysrc/backend/base/langflow/components/composio/calendly_composio.pysrc/backend/base/langflow/components/composio/__init__.py
src/frontend/src/icons/*/index.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/icons.mdc)
Create an
index.tsxin your icon directory that exports your icon usingforwardRefand passes theisDarkprop.
Files:
src/frontend/src/icons/figma/index.tsxsrc/frontend/src/icons/twitter/index.tsxsrc/frontend/src/icons/airtable/index.tsxsrc/frontend/src/icons/attio/index.tsxsrc/frontend/src/icons/calendly/index.tsxsrc/frontend/src/icons/discord/index.tsxsrc/frontend/src/icons/wrike/index.tsxsrc/frontend/src/icons/miro/index.tsxsrc/frontend/src/icons/contentful/index.tsxsrc/frontend/src/icons/asana/index.tsx
src/frontend/src/icons/lazyIconImports.ts
📄 CodeRabbit Inference Engine (.cursor/rules/icons.mdc)
Add your icon to the
lazyIconsMappingobject insrc/frontend/src/icons/lazyIconImports.tswith a key that matches the backend icon string exactly.
Files:
src/frontend/src/icons/lazyIconImports.ts
src/backend/base/langflow/components/**/__init__.py
📄 CodeRabbit Inference Engine (.cursor/rules/backend_development.mdc)
Update init.py with alphabetical imports when adding new components
Files:
src/backend/base/langflow/components/composio/__init__.py
🧠 Learnings (10)
📓 Common learnings
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
📚 Learning: 2025-07-28T15:56:47.865Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/*/*.@(js|jsx|ts|tsx) : Create a new directory for your icon in `src/frontend/src/icons/YourIconName/` and add your SVG as a React component (e.g., `YourIconName.jsx`). The SVG component must use the `isDark` prop to support both light and dark mode.
Applied to files:
src/frontend/src/icons/miro/miro.jsxsrc/frontend/src/icons/figma/index.tsxsrc/frontend/src/icons/contentful/contentful.jsxsrc/frontend/src/icons/twitter/twitter.jsxsrc/frontend/src/icons/twitter/index.tsxsrc/frontend/src/icons/airtable/index.tsxsrc/frontend/src/icons/attio/index.tsxsrc/frontend/src/icons/discord/index.tsxsrc/frontend/src/icons/wrike/index.tsxsrc/frontend/src/icons/airtable/airtable.jsxsrc/frontend/src/icons/wrike/wrike.jsxsrc/frontend/src/icons/miro/index.tsxsrc/frontend/src/icons/attio/attio.jsxsrc/frontend/src/icons/figma/figma.jsxsrc/frontend/src/icons/contentful/index.tsxsrc/frontend/src/icons/asana/index.tsxsrc/frontend/src/icons/discord/discord.jsxsrc/frontend/src/icons/calendly/calendly.jsxsrc/frontend/src/icons/asana/asana.jsx
📚 Learning: 2025-07-28T15:56:47.865Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/*/index.tsx : Create an `index.tsx` in your icon directory that exports your icon using `forwardRef` and passes the `isDark` prop.
Applied to files:
src/frontend/src/icons/miro/miro.jsxsrc/frontend/src/icons/figma/index.tsxsrc/frontend/src/icons/contentful/contentful.jsxsrc/frontend/src/icons/twitter/twitter.jsxsrc/frontend/src/icons/twitter/index.tsxsrc/frontend/src/icons/airtable/index.tsxsrc/frontend/src/icons/attio/index.tsxsrc/frontend/src/icons/calendly/index.tsxsrc/frontend/src/icons/discord/index.tsxsrc/frontend/src/icons/wrike/index.tsxsrc/frontend/src/icons/airtable/airtable.jsxsrc/frontend/src/icons/wrike/wrike.jsxsrc/frontend/src/icons/miro/index.tsxsrc/frontend/src/icons/attio/attio.jsxsrc/frontend/src/icons/figma/figma.jsxsrc/frontend/src/icons/contentful/index.tsxsrc/frontend/src/icons/asana/index.tsxsrc/frontend/src/icons/discord/discord.jsxsrc/frontend/src/icons/calendly/calendly.jsxsrc/frontend/src/icons/asana/asana.jsx
📚 Learning: 2025-06-23T12:46:52.420Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Export custom icon components in React using React.forwardRef to ensure proper ref forwarding and compatibility with parent components.
Applied to files:
src/frontend/src/icons/miro/miro.jsxsrc/frontend/src/icons/figma/index.tsxsrc/frontend/src/icons/twitter/twitter.jsxsrc/frontend/src/icons/twitter/index.tsxsrc/frontend/src/icons/airtable/index.tsxsrc/frontend/src/icons/attio/index.tsxsrc/frontend/src/icons/calendly/index.tsxsrc/frontend/src/icons/discord/index.tsxsrc/frontend/src/icons/wrike/index.tsxsrc/frontend/src/icons/airtable/airtable.jsxsrc/frontend/src/icons/wrike/wrike.jsxsrc/frontend/src/icons/miro/index.tsxsrc/frontend/src/icons/attio/attio.jsxsrc/frontend/src/icons/figma/figma.jsxsrc/frontend/src/icons/contentful/index.tsxsrc/frontend/src/icons/asana/index.tsxsrc/frontend/src/icons/discord/discord.jsxsrc/frontend/src/icons/calendly/calendly.jsxsrc/frontend/src/icons/asana/asana.jsx
📚 Learning: 2025-07-18T18:27:12.609Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-07-18T18:27:12.609Z
Learning: Applies to src/frontend/src/icons/**/*.{ts,tsx,js,jsx} : Use Lucide React for icons in the frontend.
Applied to files:
src/frontend/src/icons/miro/miro.jsxsrc/frontend/src/icons/figma/index.tsxsrc/frontend/src/icons/twitter/twitter.jsxsrc/frontend/src/icons/twitter/index.tsxsrc/frontend/src/icons/attio/index.tsxsrc/frontend/src/icons/calendly/index.tsxsrc/frontend/src/icons/discord/index.tsxsrc/frontend/src/icons/wrike/index.tsxsrc/frontend/src/icons/airtable/airtable.jsxsrc/frontend/src/icons/wrike/wrike.jsxsrc/frontend/src/icons/miro/index.tsxsrc/frontend/src/icons/figma/figma.jsxsrc/frontend/src/icons/contentful/index.tsxsrc/frontend/src/icons/asana/index.tsxsrc/frontend/src/icons/discord/discord.jsxsrc/frontend/src/icons/calendly/calendly.jsxsrc/frontend/src/icons/asana/asana.jsxsrc/frontend/src/icons/lazyIconImports.ts
📚 Learning: 2025-06-16T11:14:04.200Z
Learnt from: dolfim-ibm
PR: langflow-ai/langflow#8394
File: src/frontend/src/icons/Docling/index.tsx:4-6
Timestamp: 2025-06-16T11:14:04.200Z
Learning: The Langflow codebase consistently uses `React.PropsWithChildren<{}>` as the prop type for all icon components using forwardRef, rather than `React.SVGProps<SVGSVGElement>`. This is an established pattern across hundreds of icon files in src/frontend/src/icons/.
Applied to files:
src/frontend/src/icons/miro/miro.jsxsrc/frontend/src/icons/figma/index.tsxsrc/frontend/src/icons/contentful/contentful.jsxsrc/frontend/src/icons/twitter/twitter.jsxsrc/frontend/src/icons/twitter/index.tsxsrc/frontend/src/icons/airtable/index.tsxsrc/frontend/src/icons/attio/index.tsxsrc/frontend/src/icons/calendly/index.tsxsrc/frontend/src/icons/discord/index.tsxsrc/frontend/src/icons/wrike/index.tsxsrc/frontend/src/icons/airtable/airtable.jsxsrc/frontend/src/icons/wrike/wrike.jsxsrc/frontend/src/icons/miro/index.tsxsrc/frontend/src/icons/attio/attio.jsxsrc/frontend/src/icons/figma/figma.jsxsrc/frontend/src/icons/contentful/index.tsxsrc/frontend/src/icons/asana/index.tsxsrc/frontend/src/icons/discord/discord.jsxsrc/frontend/src/icons/calendly/calendly.jsxsrc/frontend/src/icons/asana/asana.jsx
📚 Learning: 2025-06-23T12:46:52.420Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: Custom SVG icon components in React should always support both light and dark mode by accepting an 'isdark' prop and adjusting colors accordingly.
Applied to files:
src/frontend/src/icons/miro/miro.jsxsrc/frontend/src/icons/airtable/airtable.jsxsrc/frontend/src/icons/wrike/wrike.jsxsrc/frontend/src/icons/attio/attio.jsxsrc/frontend/src/icons/figma/figma.jsxsrc/frontend/src/icons/discord/discord.jsxsrc/frontend/src/icons/calendly/calendly.jsxsrc/frontend/src/icons/asana/asana.jsx
📚 Learning: 2025-06-23T12:46:52.420Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-06-23T12:46:52.420Z
Learning: When implementing a new component icon in Langflow, ensure the icon name is clear, recognizable, and used consistently across both backend (Python 'icon' attribute) and frontend (React/TypeScript mapping).
Applied to files:
src/frontend/src/icons/twitter/twitter.jsxsrc/frontend/src/icons/wrike/wrike.jsxsrc/frontend/src/icons/figma/figma.jsx
📚 Learning: 2025-07-18T18:25:54.486Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/backend_development.mdc:0-0
Timestamp: 2025-07-18T18:25:54.486Z
Learning: Applies to src/backend/base/langflow/components/**/__init__.py : Update __init__.py with alphabetical imports when adding new components
Applied to files:
src/backend/base/langflow/components/composio/airtable_composio.pysrc/backend/base/langflow/components/composio/contentful_composio.pysrc/backend/base/langflow/components/composio/attio_composio.pysrc/backend/base/langflow/components/composio/__init__.py
📚 Learning: 2025-07-28T15:56:47.865Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/icons.mdc:0-0
Timestamp: 2025-07-28T15:56:47.865Z
Learning: Applies to src/frontend/src/icons/lazyIconImports.ts : Add your icon to the `lazyIconsMapping` object in `src/frontend/src/icons/lazyIconImports.ts` with a key that matches the backend icon string exactly.
Applied to files:
src/frontend/src/icons/lazyIconImports.ts
🧬 Code Graph Analysis (20)
src/frontend/src/icons/miro/miro.jsx (7)
src/frontend/src/icons/asana/asana.jsx (1)
Icon(1-3)src/frontend/src/icons/attio/attio.jsx (1)
Icon(1-11)src/frontend/src/icons/calendly/calendly.jsx (1)
Icon(1-28)src/frontend/src/icons/contentful/contentful.jsx (1)
Icon(1-12)src/frontend/src/icons/discord/discord.jsx (1)
Icon(1-3)src/frontend/src/icons/figma/figma.jsx (1)
Icon(1-3)src/frontend/src/icons/twitter/twitter.jsx (1)
Icon(1-3)
src/backend/base/langflow/components/composio/wrike_composio.py (10)
src/backend/base/langflow/base/composio/composio_base.py (1)
ComposioBaseComponent(25-312)src/backend/base/langflow/components/composio/airtable_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/twitter_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/asana_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/attio_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/contentful_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/calendly_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/discord_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/figma_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/miro_composio.py (1)
set_default_tools(10-11)
src/frontend/src/icons/contentful/contentful.jsx (7)
src/frontend/src/icons/airtable/airtable.jsx (1)
Icon(1-3)src/frontend/src/icons/asana/asana.jsx (1)
Icon(1-3)src/frontend/src/icons/attio/attio.jsx (1)
Icon(1-11)src/frontend/src/icons/calendly/calendly.jsx (1)
Icon(1-28)src/frontend/src/icons/discord/discord.jsx (1)
Icon(1-3)src/frontend/src/icons/figma/figma.jsx (1)
Icon(1-3)src/frontend/src/icons/miro/miro.jsx (1)
Icon(1-3)
src/frontend/src/icons/twitter/twitter.jsx (1)
src/frontend/src/icons/asana/asana.jsx (1)
Icon(1-3)
src/backend/base/langflow/components/composio/miro_composio.py (10)
src/backend/base/langflow/base/composio/composio_base.py (1)
ComposioBaseComponent(25-312)src/backend/base/langflow/components/composio/airtable_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/twitter_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/asana_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/attio_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/contentful_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/calendly_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/discord_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/figma_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/wrike_composio.py (1)
set_default_tools(10-11)
src/backend/base/langflow/components/composio/airtable_composio.py (4)
src/backend/base/langflow/base/composio/composio_base.py (1)
ComposioBaseComponent(25-312)src/backend/base/langflow/components/composio/asana_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/figma_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/miro_composio.py (1)
set_default_tools(10-11)
src/backend/base/langflow/components/composio/discord_composio.py (10)
src/backend/base/langflow/base/composio/composio_base.py (1)
ComposioBaseComponent(25-312)src/backend/base/langflow/components/composio/airtable_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/twitter_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/asana_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/attio_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/contentful_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/calendly_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/figma_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/miro_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/wrike_composio.py (1)
set_default_tools(10-11)
src/backend/base/langflow/components/composio/twitter_composio.py (10)
src/backend/base/langflow/base/composio/composio_base.py (1)
ComposioBaseComponent(25-312)src/backend/base/langflow/components/composio/airtable_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/asana_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/attio_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/contentful_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/calendly_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/discord_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/figma_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/miro_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/wrike_composio.py (1)
set_default_tools(10-11)
src/backend/base/langflow/components/composio/contentful_composio.py (10)
src/backend/base/langflow/base/composio/composio_base.py (1)
ComposioBaseComponent(25-312)src/backend/base/langflow/components/composio/airtable_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/twitter_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/asana_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/attio_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/calendly_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/discord_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/figma_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/miro_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/wrike_composio.py (1)
set_default_tools(10-11)
src/frontend/src/icons/airtable/airtable.jsx (4)
src/frontend/src/icons/calendly/calendly.jsx (1)
Icon(1-28)src/frontend/src/icons/figma/figma.jsx (1)
Icon(1-3)src/frontend/src/icons/miro/miro.jsx (1)
Icon(1-3)src/frontend/src/icons/wrike/wrike.jsx (1)
Icon(1-36)
src/frontend/src/icons/wrike/wrike.jsx (2)
src/frontend/src/icons/attio/attio.jsx (1)
Icon(1-11)src/frontend/src/icons/calendly/calendly.jsx (1)
Icon(1-28)
src/backend/base/langflow/components/composio/figma_composio.py (10)
src/backend/base/langflow/base/composio/composio_base.py (1)
ComposioBaseComponent(25-312)src/backend/base/langflow/components/composio/airtable_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/twitter_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/asana_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/attio_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/contentful_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/calendly_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/discord_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/miro_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/wrike_composio.py (1)
set_default_tools(10-11)
src/backend/base/langflow/components/composio/attio_composio.py (1)
src/backend/base/langflow/base/composio/composio_base.py (1)
ComposioBaseComponent(25-312)
src/frontend/src/icons/attio/attio.jsx (3)
src/frontend/src/icons/airtable/airtable.jsx (1)
Icon(1-3)src/frontend/src/icons/discord/discord.jsx (1)
Icon(1-3)src/frontend/src/icons/twitter/twitter.jsx (1)
Icon(1-3)
src/frontend/src/icons/figma/figma.jsx (4)
src/frontend/src/icons/attio/attio.jsx (1)
Icon(1-11)src/frontend/src/icons/calendly/calendly.jsx (1)
Icon(1-28)src/frontend/src/icons/contentful/contentful.jsx (1)
Icon(1-12)src/frontend/src/icons/twitter/twitter.jsx (1)
Icon(1-3)
src/backend/base/langflow/components/composio/calendly_composio.py (10)
src/backend/base/langflow/base/composio/composio_base.py (1)
ComposioBaseComponent(25-312)src/backend/base/langflow/components/composio/airtable_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/twitter_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/asana_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/attio_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/contentful_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/discord_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/figma_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/miro_composio.py (1)
set_default_tools(10-11)src/backend/base/langflow/components/composio/wrike_composio.py (1)
set_default_tools(10-11)
src/frontend/src/icons/discord/discord.jsx (3)
src/frontend/src/icons/attio/attio.jsx (1)
Icon(1-11)src/frontend/src/icons/miro/miro.jsx (1)
Icon(1-3)src/frontend/src/icons/twitter/twitter.jsx (1)
Icon(1-3)
src/frontend/src/icons/calendly/calendly.jsx (3)
src/frontend/src/icons/airtable/airtable.jsx (1)
Icon(1-3)src/frontend/src/icons/figma/figma.jsx (1)
Icon(1-3)src/frontend/src/icons/twitter/twitter.jsx (1)
Icon(1-3)
src/frontend/src/icons/asana/asana.jsx (2)
src/frontend/src/icons/attio/attio.jsx (1)
Icon(1-11)src/frontend/src/icons/twitter/twitter.jsx (1)
Icon(1-3)
src/backend/base/langflow/components/composio/__init__.py (14)
src/backend/base/langflow/components/composio/composio_api.py (1)
ComposioAPIComponent(25-288)src/backend/base/langflow/components/composio/github_composio.py (1)
ComposioGitHubAPIComponent(15-649)src/backend/base/langflow/components/composio/gmail_composio.py (1)
ComposioGmailAPIComponent(16-406)src/backend/base/langflow/components/composio/googlecalendar_composio.py (1)
ComposioGoogleCalendarAPIComponent(14-787)src/backend/base/langflow/components/composio/airtable_composio.py (1)
ComposioAirtableAPIComponent(4-11)src/backend/base/langflow/components/composio/asana_composio.py (1)
ComposioAsanaAPIComponent(4-11)src/backend/base/langflow/components/composio/attio_composio.py (1)
ComposioAttioAPIComponent(4-11)src/backend/base/langflow/components/composio/calendly_composio.py (1)
ComposioCalendlyAPIComponent(4-11)src/backend/base/langflow/components/composio/contentful_composio.py (1)
ComposioContentfulAPIComponent(4-11)src/backend/base/langflow/components/composio/discord_composio.py (1)
ComposioDiscordAPIComponent(4-11)src/backend/base/langflow/components/composio/figma_composio.py (1)
ComposioFigmaAPIComponent(4-11)src/backend/base/langflow/components/composio/miro_composio.py (1)
ComposioMiroAPIComponent(4-11)src/backend/base/langflow/components/composio/twitter_composio.py (1)
ComposioTwitterAPIComponent(4-11)src/backend/base/langflow/components/composio/wrike_composio.py (1)
ComposioWrikeAPIComponent(4-11)
🪛 GitHub Check: Ruff Style Check (3.13)
src/backend/base/langflow/components/composio/airtable_composio.py
[failure] 11-11: Ruff (W292)
src/backend/base/langflow/components/composio/airtable_composio.py:11:61: W292 No newline at end of file
[failure] 11-11: Ruff (W291)
src/backend/base/langflow/components/composio/airtable_composio.py:11:60: W291 Trailing whitespace
src/backend/base/langflow/components/composio/contentful_composio.py
[failure] 11-11: Ruff (W291)
src/backend/base/langflow/components/composio/contentful_composio.py:11:62: W291 Trailing whitespace
src/backend/base/langflow/components/composio/attio_composio.py
[failure] 11-11: Ruff (W292)
src/backend/base/langflow/components/composio/attio_composio.py:11:58: W292 No newline at end of file
[failure] 11-11: Ruff (W291)
src/backend/base/langflow/components/composio/attio_composio.py:11:57: W291 Trailing whitespace
src/backend/base/langflow/components/composio/calendly_composio.py
[failure] 11-11: Ruff (W292)
src/backend/base/langflow/components/composio/calendly_composio.py:11:61: W292 No newline at end of file
[failure] 11-11: Ruff (W291)
src/backend/base/langflow/components/composio/calendly_composio.py:11:60: W291 Trailing whitespace
src/backend/base/langflow/components/composio/__init__.py
[failure] 52-52: Ruff (W292)
src/backend/base/langflow/components/composio/init.py:52:2: W292 No newline at end of file
[failure] 27-52: Ruff (RUF022)
src/backend/base/langflow/components/composio/init.py:27:11: RUF022 __all__ is not sorted
[failure] 1-24: Ruff (I001)
src/backend/base/langflow/components/composio/init.py:1:1: I001 Import block is un-sorted or un-formatted
🔇 Additional comments (20)
src/frontend/src/icons/miro/index.tsx (1)
1-9: LGTM! Proper forwardRef implementation with consistent pattern.The MiroIcon wrapper correctly uses forwardRef with
React.PropsWithChildren<{}>as the prop type, which aligns with the established pattern in the Langflow codebase. The component properly forwards refs and spreads props to the underlying SVG component.src/frontend/src/icons/calendly/calendly.jsx (1)
1-30: LGTM! Good implementation with proper props handling.The Calendly icon component correctly spreads props to the SVG element and follows the established pattern for multi-colored icons in the codebase. The component structure is clean with proper viewBox dimensions and well-organized path elements.
src/frontend/src/icons/wrike/wrike.jsx (1)
1-38: LGTM! Well-structured icon with proper props handling.The Wrike icon component correctly spreads props to the SVG element and follows the established pattern for multi-colored icons. The component uses appropriate colors and maintains good structure with separate path elements for different parts of the logo.
src/backend/base/langflow/components/composio/asana_composio.py (1)
4-8: LGTM! Component metadata is properly configured.The class attributes are correctly set with appropriate display name, icon reference, documentation URL, and app name following the established pattern.
src/backend/base/langflow/components/composio/attio_composio.py (1)
4-8: LGTM! Component metadata follows the established pattern.The class attributes are correctly configured with appropriate display name, icon reference, documentation URL, and app name consistent with other Composio components.
src/backend/base/langflow/components/composio/contentful_composio.py (1)
4-8: LGTM! Component metadata is correctly configured.The class attributes follow the established pattern with proper display name, icon reference, documentation URL, and app name for the Contentful component.
src/backend/base/langflow/components/composio/discord_composio.py (1)
4-8: LGTM! Component metadata follows the established pattern.The class attributes are properly configured with the correct display name, icon reference, documentation URL, and app name for the Discord component.
src/backend/base/langflow/components/composio/wrike_composio.py (1)
1-11: Component structure follows established pattern.The component structure is consistent with other Composio components in the codebase. The class properly inherits from ComposioBaseComponent and includes all required attributes.
src/backend/base/langflow/components/composio/airtable_composio.py (1)
1-11: Component structure follows established pattern.The component correctly inherits from ComposioBaseComponent and includes all required attributes with appropriate values for Airtable integration.
src/backend/base/langflow/components/composio/calendly_composio.py (1)
1-11: Component structure follows established pattern.The component correctly implements the standard Composio component pattern with proper inheritance and required attributes.
src/frontend/src/icons/calendly/index.tsx (1)
1-9: Perfect implementation following established patterns.The forwardRef wrapper correctly follows the established pattern in the codebase, using
React.PropsWithChildren<{}>as the prop type and properly forwarding the ref and all props to the underlying SVG component.src/frontend/src/icons/wrike/index.tsx (1)
1-9: Perfect implementation following established patterns.The forwardRef wrapper correctly follows the established pattern in the codebase, using
React.PropsWithChildren<{}>as the prop type and properly forwarding the ref and all props to the underlying SVG component.src/backend/base/langflow/components/composio/miro_composio.py (1)
5-8: Frontend Miro icon mapping confirmed
Thesrc/frontend/src/icons/miro/directory andindex.tsxfile exist, andlazyIconImports.tsincludes aMiroentry loadingmod.MiroIcon. No further action required.src/frontend/src/icons/figma/index.tsx (1)
4-9: Add displayName to FigmaIconVerified that the lazy loader maps
Figmatomod.FigmaIconcorrectly. Please add adisplayNamefor better DevTools traces:export const FigmaIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return <FigmaIconSVG ref={ref} {...props} />; }); + + FigmaIcon.displayName = "FigmaIcon";src/frontend/src/icons/asana/index.tsx (1)
4-9: ForwardRef wrapper pattern looks correct and consistent.Matches established icon wrapper pattern in this repo and forwards the ref down to the SVG component.
src/frontend/src/icons/airtable/index.tsx (1)
4-9: ForwardRef wrapper pattern looks correct and consistent.Ref forwarding and prop pass-through is aligned with existing icon wrappers.
src/frontend/src/icons/contentful/index.tsx (1)
4-9: ForwardRef wrapper is correct and consistent.Matches the established approach for custom brand icons across the codebase.
src/backend/base/langflow/components/composio/twitter_composio.py (1)
6-6: Icon key matches frontend lazyIconImports mappingThe backend
icon = "TwitterX"aligns exactly with theTwitterXkey insrc/frontend/src/icons/lazyIconImports.ts. No changes are needed.src/backend/base/langflow/components/composio/figma_composio.py (1)
6-6: Icon key mapping verified for “Figma”The
lazyIconsMappinginsrc/frontend/src/icons/lazyIconImports.tsalready includes a case-sensitive key “Figma”:137- import("@/icons/Firecrawl").then((mod) => ({ default: mod.FirecrawlIcon })), 138: Figma: () => 139: import("@/icons/figma").then((mod) => ({ default: mod.FigmaIcon })), 140- FreezeAll: () =>And the corresponding icon files exist under
src/frontend/src/icons/figma/figma.jsxandfigma.svg. No changes needed.src/frontend/src/icons/lazyIconImports.ts (1)
58-61: GoogleDrive icon is in active use in the frontendWe confirmed the
GoogleDriveentry isn’t orphaned—it’s referenced in multiple frontend locations:
- eagerIconImports.ts (import and mapping)
- lazyIconImports.ts (dynamic import entry)
- icons/GoogleDrive/ (component definition in index.tsx and SVG in GoogleDrive.jsx)
- modals/fileManagerModal/components/importButtonComponent/index.tsx (JSX prop: icon="GoogleDrive")
No backend components consume this icon module. No changes required.
Comment on lines
+1
to
+24
| from .composio_api import ComposioAPIComponent | ||
| from .github_composio import ComposioGitHubAPIComponent | ||
| from .gmail_composio import ComposioGmailAPIComponent | ||
| from .googlecalendar_composio import ComposioGoogleCalendarAPIComponent | ||
| from .googlemeet_composio import ComposioGooglemeetAPIComponent | ||
| from .googletasks_composio import ComposioGoogleTasksAPIComponent | ||
| from .linear_composio import ComposioLinearAPIComponent | ||
| from .outlook_composio import ComposioOutlookAPIComponent | ||
| from .reddit_composio import ComposioRedditAPIComponent | ||
| from .slack_composio import ComposioSlackAPIComponent | ||
| from .slackbot_composio import ComposioSlackbotAPIComponent | ||
| from .supabase_composio import ComposioSupabaseAPIComponent | ||
| from .todoist_composio import ComposioTodoistAPIComponent | ||
| from .youtube_composio import ComposioYoutubeAPIComponent | ||
| from .airtable_composio import ComposioAirtableAPIComponent | ||
| from .asana_composio import ComposioAsanaAPIComponent | ||
| from .attio_composio import ComposioAttioAPIComponent | ||
| from .calendly_composio import ComposioCalendlyAPIComponent | ||
| from .contentful_composio import ComposioContentfulAPIComponent | ||
| from .discord_composio import ComposioDiscordAPIComponent | ||
| from .figma_composio import ComposioFigmaAPIComponent | ||
| from .miro_composio import ComposioMiroAPIComponent | ||
| from .twitter_composio import ComposioTwitterAPIComponent | ||
| from .wrike_composio import ComposioWrikeAPIComponent |
Contributor
There was a problem hiding this comment.
Sort imports alphabetically and add missing newline at EOF
The imports are not sorted alphabetically, and there's a missing newline at the end of the file.
Apply this diff to fix the import sorting:
-from .composio_api import ComposioAPIComponent
-from .github_composio import ComposioGitHubAPIComponent
-from .gmail_composio import ComposioGmailAPIComponent
-from .googlecalendar_composio import ComposioGoogleCalendarAPIComponent
-from .googlemeet_composio import ComposioGooglemeetAPIComponent
-from .googletasks_composio import ComposioGoogleTasksAPIComponent
-from .linear_composio import ComposioLinearAPIComponent
-from .outlook_composio import ComposioOutlookAPIComponent
-from .reddit_composio import ComposioRedditAPIComponent
-from .slack_composio import ComposioSlackAPIComponent
-from .slackbot_composio import ComposioSlackbotAPIComponent
-from .supabase_composio import ComposioSupabaseAPIComponent
-from .todoist_composio import ComposioTodoistAPIComponent
-from .youtube_composio import ComposioYoutubeAPIComponent
-from .airtable_composio import ComposioAirtableAPIComponent
-from .asana_composio import ComposioAsanaAPIComponent
-from .attio_composio import ComposioAttioAPIComponent
-from .calendly_composio import ComposioCalendlyAPIComponent
-from .contentful_composio import ComposioContentfulAPIComponent
-from .discord_composio import ComposioDiscordAPIComponent
-from .figma_composio import ComposioFigmaAPIComponent
-from .miro_composio import ComposioMiroAPIComponent
-from .twitter_composio import ComposioTwitterAPIComponent
-from .wrike_composio import ComposioWrikeAPIComponent
+from .airtable_composio import ComposioAirtableAPIComponent
+from .asana_composio import ComposioAsanaAPIComponent
+from .attio_composio import ComposioAttioAPIComponent
+from .calendly_composio import ComposioCalendlyAPIComponent
+from .composio_api import ComposioAPIComponent
+from .contentful_composio import ComposioContentfulAPIComponent
+from .discord_composio import ComposioDiscordAPIComponent
+from .figma_composio import ComposioFigmaAPIComponent
+from .github_composio import ComposioGitHubAPIComponent
+from .gmail_composio import ComposioGmailAPIComponent
+from .googlecalendar_composio import ComposioGoogleCalendarAPIComponent
+from .googlemeet_composio import ComposioGooglemeetAPIComponent
+from .googletasks_composio import ComposioGoogleTasksAPIComponent
+from .linear_composio import ComposioLinearAPIComponent
+from .miro_composio import ComposioMiroAPIComponent
+from .outlook_composio import ComposioOutlookAPIComponent
+from .reddit_composio import ComposioRedditAPIComponent
+from .slack_composio import ComposioSlackAPIComponent
+from .slackbot_composio import ComposioSlackbotAPIComponent
+from .supabase_composio import ComposioSupabaseAPIComponent
+from .todoist_composio import ComposioTodoistAPIComponent
+from .twitter_composio import ComposioTwitterAPIComponent
+from .wrike_composio import ComposioWrikeAPIComponent
+from .youtube_composio import ComposioYoutubeAPIComponent📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| from .composio_api import ComposioAPIComponent | |
| from .github_composio import ComposioGitHubAPIComponent | |
| from .gmail_composio import ComposioGmailAPIComponent | |
| from .googlecalendar_composio import ComposioGoogleCalendarAPIComponent | |
| from .googlemeet_composio import ComposioGooglemeetAPIComponent | |
| from .googletasks_composio import ComposioGoogleTasksAPIComponent | |
| from .linear_composio import ComposioLinearAPIComponent | |
| from .outlook_composio import ComposioOutlookAPIComponent | |
| from .reddit_composio import ComposioRedditAPIComponent | |
| from .slack_composio import ComposioSlackAPIComponent | |
| from .slackbot_composio import ComposioSlackbotAPIComponent | |
| from .supabase_composio import ComposioSupabaseAPIComponent | |
| from .todoist_composio import ComposioTodoistAPIComponent | |
| from .youtube_composio import ComposioYoutubeAPIComponent | |
| from .airtable_composio import ComposioAirtableAPIComponent | |
| from .asana_composio import ComposioAsanaAPIComponent | |
| from .attio_composio import ComposioAttioAPIComponent | |
| from .calendly_composio import ComposioCalendlyAPIComponent | |
| from .contentful_composio import ComposioContentfulAPIComponent | |
| from .discord_composio import ComposioDiscordAPIComponent | |
| from .figma_composio import ComposioFigmaAPIComponent | |
| from .miro_composio import ComposioMiroAPIComponent | |
| from .twitter_composio import ComposioTwitterAPIComponent | |
| from .wrike_composio import ComposioWrikeAPIComponent | |
| from .airtable_composio import ComposioAirtableAPIComponent | |
| from .asana_composio import ComposioAsanaAPIComponent | |
| from .attio_composio import ComposioAttioAPIComponent | |
| from .calendly_composio import ComposioCalendlyAPIComponent | |
| from .composio_api import ComposioAPIComponent | |
| from .contentful_composio import ComposioContentfulAPIComponent | |
| from .discord_composio import ComposioDiscordAPIComponent | |
| from .figma_composio import ComposioFigmaAPIComponent | |
| from .github_composio import ComposioGitHubAPIComponent | |
| from .gmail_composio import ComposioGmailAPIComponent | |
| from .googlecalendar_composio import ComposioGoogleCalendarAPIComponent | |
| from .googlemeet_composio import ComposioGooglemeetAPIComponent | |
| from .googletasks_composio import ComposioGoogleTasksAPIComponent | |
| from .linear_composio import ComposioLinearAPIComponent | |
| from .miro_composio import ComposioMiroAPIComponent | |
| from .outlook_composio import ComposioOutlookAPIComponent | |
| from .reddit_composio import ComposioRedditAPIComponent | |
| from .slack_composio import ComposioSlackAPIComponent | |
| from .slackbot_composio import ComposioSlackbotAPIComponent | |
| from .supabase_composio import ComposioSupabaseAPIComponent | |
| from .todoist_composio import ComposioTodoistAPIComponent | |
| from .twitter_composio import ComposioTwitterAPIComponent | |
| from .wrike_composio import ComposioWrikeAPIComponent | |
| from .youtube_composio import ComposioYoutubeAPIComponent | |
🧰 Tools
🪛 GitHub Check: Ruff Style Check (3.13)
[failure] 1-24: Ruff (I001)
src/backend/base/langflow/components/composio/init.py:1:1: I001 Import block is un-sorted or un-formatted
🤖 Prompt for AI Agents
In src/backend/base/langflow/components/composio/__init__.py around lines 1-24,
the import statements are not sorted alphabetically and the file is missing a
trailing newline; reorder the from .<module> imports into ascending alphabetical
order by module name (e.g., airtable before asana, attio, calendly, etc.) and
ensure a single newline character is present at the end of the file.
Comment on lines
+27
to
+52
| __all__ = [ | ||
| "ComposioAPIComponent", | ||
| "ComposioGitHubAPIComponent", | ||
| "ComposioGmailAPIComponent", | ||
| "ComposioGoogleCalendarAPIComponent", | ||
| "ComposioGoogleTasksAPIComponent", | ||
| "ComposioGooglemeetAPIComponent", | ||
| "ComposioLinearAPIComponent", | ||
| "ComposioOutlookAPIComponent", | ||
| "ComposioRedditAPIComponent", | ||
| "ComposioSlackAPIComponent", | ||
| ] | ||
|
|
||
|
|
||
| def __getattr__(attr_name: str) -> Any: | ||
| """Lazily import composio components on attribute access.""" | ||
| if attr_name not in _dynamic_imports: | ||
| msg = f"module '{__name__}' has no attribute '{attr_name}'" | ||
| raise AttributeError(msg) | ||
| try: | ||
| result = import_mod(attr_name, _dynamic_imports[attr_name], __spec__.parent) | ||
| except (ModuleNotFoundError, ImportError, AttributeError) as e: | ||
| msg = f"Could not import '{attr_name}' from '{__name__}': {e}" | ||
| raise AttributeError(msg) from e | ||
| globals()[attr_name] = result | ||
| return result | ||
|
|
||
|
|
||
| def __dir__() -> list[str]: | ||
| return list(__all__) | ||
| "ComposioSlackbotAPIComponent", | ||
| "ComposioSupabaseAPIComponent", | ||
| "ComposioTodoistAPIComponent", | ||
| "ComposioYoutubeAPIComponent", | ||
| "ComposioAirtableAPIComponent", | ||
| "ComposioAsanaAPIComponent", | ||
| "ComposioAttioAPIComponent", | ||
| "ComposioCalendlyAPIComponent", | ||
| "ComposioContentfulAPIComponent", | ||
| "ComposioDiscordAPIComponent", | ||
| "ComposioFigmaAPIComponent", | ||
| "ComposioMiroAPIComponent", | ||
| "ComposioTwitterAPIComponent", | ||
| "ComposioWrikeAPIComponent", | ||
| ] No newline at end of file |
Contributor
There was a problem hiding this comment.
Sort all list alphabetically and add newline at EOF
The __all__ list is not sorted alphabetically as required by coding guidelines.
Apply this diff to fix the sorting and add the missing newline:
__all__ = [
+ "ComposioAirtableAPIComponent",
"ComposioAPIComponent",
+ "ComposioAsanaAPIComponent",
+ "ComposioAttioAPIComponent",
+ "ComposioCalendlyAPIComponent",
+ "ComposioContentfulAPIComponent",
+ "ComposioDiscordAPIComponent",
+ "ComposioFigmaAPIComponent",
"ComposioGitHubAPIComponent",
"ComposioGmailAPIComponent",
"ComposioGoogleCalendarAPIComponent",
- "ComposioGoogleTasksAPIComponent",
"ComposioGooglemeetAPIComponent",
+ "ComposioGoogleTasksAPIComponent",
"ComposioLinearAPIComponent",
+ "ComposioMiroAPIComponent",
"ComposioOutlookAPIComponent",
"ComposioRedditAPIComponent",
"ComposioSlackAPIComponent",
"ComposioSlackbotAPIComponent",
"ComposioSupabaseAPIComponent",
"ComposioTodoistAPIComponent",
+ "ComposioTwitterAPIComponent",
+ "ComposioWrikeAPIComponent",
"ComposioYoutubeAPIComponent",
- "ComposioAirtableAPIComponent",
- "ComposioAsanaAPIComponent",
- "ComposioAttioAPIComponent",
- "ComposioCalendlyAPIComponent",
- "ComposioContentfulAPIComponent",
- "ComposioDiscordAPIComponent",
- "ComposioFigmaAPIComponent",
- "ComposioMiroAPIComponent",
- "ComposioTwitterAPIComponent",
- "ComposioWrikeAPIComponent",
]
+🧰 Tools
🪛 GitHub Check: Ruff Style Check (3.13)
[failure] 52-52: Ruff (W292)
src/backend/base/langflow/components/composio/init.py:52:2: W292 No newline at end of file
[failure] 27-52: Ruff (RUF022)
src/backend/base/langflow/components/composio/init.py:27:11: RUF022 __all__ is not sorted
🤖 Prompt for AI Agents
In src/backend/base/langflow/components/composio/__init__.py around lines 27 to
52, the __all__ list is not alphabetically sorted and the file is missing a
trailing newline; reorder the entries in __all__ into strict ASCII/alphabetical
order (A→Z) while preserving the existing double-quoted names and commas, then
ensure the file ends with a single newline character (add a newline at EOF).
Comment on lines
+10
to
+11
| def set_default_tools(self): | ||
| """Set the default tools for Airtable component.""" No newline at end of file |
Contributor
There was a problem hiding this comment.
Fix formatting issues and implement the abstract method.
The method needs proper implementation and has formatting issues flagged by the linter.
Apply this diff to fix the formatting issues:
- def set_default_tools(self):
- """Set the default tools for Airtable component."""
+ def set_default_tools(self):
+ """Set the default tools for Airtable component."""
+ passWould you like me to help implement this method with actual Airtable tools based on the Composio documentation?
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| def set_default_tools(self): | |
| """Set the default tools for Airtable component.""" | |
| def set_default_tools(self): | |
| """Set the default tools for Airtable component.""" | |
| pass |
🧰 Tools
🪛 GitHub Check: Ruff Style Check (3.13)
[failure] 11-11: Ruff (W292)
src/backend/base/langflow/components/composio/airtable_composio.py:11:61: W292 No newline at end of file
[failure] 11-11: Ruff (W291)
src/backend/base/langflow/components/composio/airtable_composio.py:11:60: W291 Trailing whitespace
Comment on lines
+10
to
+11
| def set_default_tools(self): | ||
| """Set the default tools for Asana component.""" |
Contributor
There was a problem hiding this comment.
Abstract method requires implementation.
The set_default_tools method is abstract in the base class ComposioBaseComponent and only contains a docstring placeholder. This method needs to be implemented to define the default tools for the Asana component.
Based on the base class requirements from src/backend/base/langflow/base/composio/composio_base.py (lines 24-311), this method should populate self._default_tools with the appropriate Asana actions. Here's a basic implementation pattern:
def set_default_tools(self):
"""Set the default tools for Asana component."""
+ # Define default Asana actions/tools that should be available
+ self._default_tools = {
+ "asana_create_task",
+ "asana_get_task",
+ "asana_update_task",
+ "asana_list_tasks"
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| def set_default_tools(self): | |
| """Set the default tools for Asana component.""" | |
| def set_default_tools(self): | |
| """Set the default tools for Asana component.""" | |
| + # Define default Asana actions/tools that should be available | |
| + self._default_tools = { | |
| + "asana_create_task", | |
| + "asana_get_task", | |
| + "asana_update_task", | |
| + "asana_list_tasks" | |
| + } |
🤖 Prompt for AI Agents
In src/backend/base/langflow/components/composio/asana_composio.py around lines
10-11, implement the abstract set_default_tools method (currently just a
docstring) so it populates self._default_tools with the Asana component's
default tools/actions; follow the structure required by ComposioBaseComponent in
src/backend/base/langflow/base/composio/composio_base.py (use the same
keys/objects the base expects: id/name/description/handler or tool class
instances), create entries for common Asana actions (e.g., create_task,
update_task, get_project, list_tasks) and assign the resulting list/dict to
self._default_tools, ensuring any necessary imports or references to existing
tool classes are added at the top of the file.
Comment on lines
+10
to
+11
| def set_default_tools(self): | ||
| """Set the default tools for Attio component.""" No newline at end of file |
Contributor
There was a problem hiding this comment.
Fix formatting issues and implement abstract method.
The method has trailing whitespace and lacks a newline at the end of the file. Additionally, the abstract set_default_tools method from the base class needs implementation.
Apply this diff to fix formatting issues and add a basic implementation:
def set_default_tools(self):
- """Set the default tools for Attio component."""
+ """Set the default tools for Attio component."""
+ # Define default Attio actions/tools that should be available
+ self._default_tools = {
+ "attio_create_record",
+ "attio_get_record",
+ "attio_update_record",
+ "attio_list_records"
+ }
+📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| def set_default_tools(self): | |
| """Set the default tools for Attio component.""" | |
| def set_default_tools(self): | |
| """Set the default tools for Attio component.""" | |
| # Define default Attio actions/tools that should be available | |
| self._default_tools = { | |
| "attio_create_record", | |
| "attio_get_record", | |
| "attio_update_record", | |
| "attio_list_records" | |
| } |
🧰 Tools
🪛 GitHub Check: Ruff Style Check (3.13)
[failure] 11-11: Ruff (W292)
src/backend/base/langflow/components/composio/attio_composio.py:11:58: W292 No newline at end of file
[failure] 11-11: Ruff (W291)
src/backend/base/langflow/components/composio/attio_composio.py:11:57: W291 Trailing whitespace
🤖 Prompt for AI Agents
In src/backend/base/langflow/components/composio/attio_composio.py around lines
10-11, remove the trailing whitespace from the docstring line and add a newline
at EOF, and implement the abstract set_default_tools method from the base class
by providing a basic implementation (e.g., assign a default tools list to self
or return the default tools expected by the base class) so the class is no
longer abstract; ensure the method has a proper body and the file ends with a
single newline.
Comment on lines
+4
to
+9
| export const DiscordIcon = forwardRef< | ||
| SVGSVGElement, | ||
| React.PropsWithChildren<{}> | ||
| >((props, ref) => { | ||
| return <DiscordIconSVG ref={ref} {...props} />; | ||
| }); No newline at end of file |
Contributor
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
LGTM. Add displayName for better DevTools visibility.
Pattern matches existing icons (forwardRef + prop passthrough, which forwards isDark). Consider setting displayName for clearer component names in React DevTools.
Apply this after the component:
export const DiscordIcon = forwardRef<
SVGSVGElement,
React.PropsWithChildren<{}>
>((props, ref) => {
return <DiscordIconSVG ref={ref} {...props} />;
});
+
+DiscordIcon.displayName = "DiscordIcon";Also verify lazy loader mapping references this named export:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n '^\s*Discord\s*:' src/frontend/src/icons/lazyIconImports.ts -A 2Length of output: 197
Add displayName to DiscordIcon for better DevTools visibility
Verified that in src/frontend/src/icons/lazyIconImports.ts, the mapping references mod.DiscordIcon, so no updates are needed there.
• File: src/frontend/src/icons/discord/index.tsx
Apply:
export const DiscordIcon = forwardRef<
SVGSVGElement,
React.PropsWithChildren<{}>
>((props, ref) => {
return <DiscordIconSVG ref={ref} {...props} />;
});
+
+DiscordIcon.displayName = "DiscordIcon";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export const DiscordIcon = forwardRef< | |
| SVGSVGElement, | |
| React.PropsWithChildren<{}> | |
| >((props, ref) => { | |
| return <DiscordIconSVG ref={ref} {...props} />; | |
| }); | |
| export const DiscordIcon = forwardRef< | |
| SVGSVGElement, | |
| React.PropsWithChildren<{}> | |
| >((props, ref) => { | |
| return <DiscordIconSVG ref={ref} {...props} />; | |
| }); | |
| DiscordIcon.displayName = "DiscordIcon"; |
🤖 Prompt for AI Agents
In src/frontend/src/icons/discord/index.tsx around lines 4 to 9, the DiscordIcon
component created with forwardRef lacks a displayName which makes it harder to
identify in React DevTools; after the forwardRef declaration add a displayName
assignment (e.g. DiscordIcon.displayName = "DiscordIcon") so the component shows
up with a readable name in DevTools. Ensure the assignment comes after the const
declaration and before the export is finalized.
Comment on lines
+1
to
+3
| const Icon = (props) => ( | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px"><path fill="#e64a19" d="M26,17h-8c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h8V17z"/><path fill="#7c4dff" d="M25,31h-7c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7V31z"/><path fill="#66bb6a" d="M18,45L18,45c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7v7C25,41.866,21.866,45,18,45z"/><path fill="#ff7043" d="M32,17h-7V3h7c3.866,0,7,3.134,7,7v0C39,13.866,35.866,17,32,17z"/><circle cx="32" cy="24" r="7" fill="#29b6f6"/></svg> | ||
| ); |
Contributor
There was a problem hiding this comment.
Missing isDark prop support and props spreading.
Two issues need to be addressed:
- The component doesn't support light and dark mode theming as required by the coding guidelines.
- The component doesn't spread props to the SVG element, limiting customization options.
Apply this diff to add dark mode support and props spreading:
-const Icon = (props) => (
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px"><path fill="#e64a19" d="M26,17h-8c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h8V17z"/><path fill="#7c4dff" d="M25,31h-7c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7V31z"/><path fill="#66bb6a" d="M18,45L18,45c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7v7C25,41.866,21.866,45,18,45z"/><path fill="#ff7043" d="M32,17h-7V3h7c3.866,0,7,3.134,7,7v0C39,13.866,35.866,17,32,17z"/><circle cx="32" cy="24" r="7" fill="#29b6f6"/></svg>
+const Icon = ({ isDark, ...props }) => (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 48 48"
+ width="24px"
+ height="24px"
+ {...props}
+ >
+ <path fill={isDark ? "#ff8a50" : "#e64a19"} d="M26,17h-8c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h8V17z"/>
+ <path fill={isDark ? "#9c7fff" : "#7c4dff"} d="M25,31h-7c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7V31z"/>
+ <path fill={isDark ? "#80e27e" : "#66bb6a"} d="M18,45L18,45c-3.866,0-7-3.134-7-7v0c0-3.866,3.134-7,7-7h7v7C25,41.866,21.866,45,18,45z"/>
+ <path fill={isDark ? "#ff9575" : "#ff7043"} d="M32,17h-7V3h7c3.866,0,7,3.134,7,7v0C39,13.866,35.866,17,32,17z"/>
+ <circle cx="32" cy="24" r="7" fill={isDark ? "#4fc3f7" : "#29b6f6"}/>
+ </svg>
);🤖 Prompt for AI Agents
In src/frontend/src/icons/figma/figma.jsx around lines 1-3, the component
currently hardcodes SVG fill colors and doesn't forward incoming props; update
the Icon to accept an isDark boolean prop (default false) and switch the fill
colors to the dark-theme palette when isDark is true, and also spread remaining
props onto the root <svg> element (e.g., {...props}) so callers can set
className, aria attributes, width/height overrides, etc.; ensure prop is
documented/defaulted and only the color values change based on isDark while
keeping the same SVG structure.
Comment on lines
361
to
364
| TwitterX: () => | ||
| import("@/icons/Twitter X").then((mod) => ({ | ||
| default: mod.TwitterXIcon, | ||
| import("@/icons/twitter").then((mod) => ({ | ||
| default: mod.TwitterIcon, | ||
| })), |
Contributor
There was a problem hiding this comment.
Icon key-import mismatch for TwitterX
The icon key TwitterX in the mapping doesn't match the TwitterX icon string used in the backend component (twitter_composio.py uses icon = "TwitterX"). This could cause icon loading issues.
The backend component uses TwitterX but the import has been changed to load TwitterIcon. This needs to be aligned:
TwitterX: () =>
- import("@/icons/twitter").then((mod) => ({
- default: mod.TwitterIcon,
- })),
+ import("@/icons/twitter").then((mod) => ({
+ default: mod.TwitterXIcon,
+ })),Alternatively, update the backend component to use Twitter instead of TwitterX for consistency.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| TwitterX: () => | |
| import("@/icons/Twitter X").then((mod) => ({ | |
| default: mod.TwitterXIcon, | |
| import("@/icons/twitter").then((mod) => ({ | |
| default: mod.TwitterIcon, | |
| })), | |
| TwitterX: () => | |
| import("@/icons/twitter").then((mod) => ({ | |
| default: mod.TwitterXIcon, | |
| })), |
Comment on lines
+1
to
+3
| const Icon = (props) => ( | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24px" height="24px" fill-rule="evenodd" clip-rule="evenodd" baseProfile="basic"><linearGradient id="1dP_ejbheoOkMyPxlPY0Wa" x1="32" x2="32" y1="57" y2="7" gradientUnits="userSpaceOnUse" fill="#000000"><stop offset="0" stop-color="#000000" fill="#000000"/><stop offset="1" stop-color="#000000" fill="#000000"/></linearGradient><path fill="none" stroke="url(#1dP_ejbheoOkMyPxlPY0Wa)" stroke-miterlimit="10" stroke-width="2" d="M18.4,8h27.2C51.344,8,56,12.656,56,18.4 v27.2C56,51.344,51.344,56,45.6,56H18.4C12.656,56,8,51.344,8,45.6V18.4C8,12.656,12.656,8,18.4,8z"/><linearGradient id="1dP_ejbheoOkMyPxlPY0Wb" x1="33" x2="33" y1="50" y2="14" gradientUnits="userSpaceOnUse" fill="#000000"><stop offset="0" stop-color="#120c00" fill="#000000"/><stop offset="1" stop-color="#000000" fill="#000000"/></linearGradient><path fill="#080808" fill-rule="evenodd" d="M41.341,14h-5.268l4.39,7.714L30.805,14h-5.268 l4.829,9.429L20.268,14H15l5.268,12L15,50h5.268l10.098-25.714L25.537,50h5.268l9.659-27.429L36.073,50h5.268L51,20L41.341,14z" clip-rule="evenodd"/></svg> | ||
| ); |
Contributor
There was a problem hiding this comment.
Missing isDark prop support and incorrect JSX attributes.
Two issues need to be addressed:
- The component doesn't support light and dark mode theming as required by the coding guidelines.
- The SVG uses hyphenated attributes (
fill-rule,clip-rule) which are not JSX-compatible and should be camelCase (fillRule,clipRule).
Apply this diff to fix both issues:
-const Icon = (props) => (
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24px" height="24px" fill-rule="evenodd" clip-rule="evenodd" baseProfile="basic"><linearGradient id="1dP_ejbheoOkMyPxlPY0Wa" x1="32" x2="32" y1="57" y2="7" gradientUnits="userSpaceOnUse" fill="#000000"><stop offset="0" stop-color="#000000" fill="#000000"/><stop offset="1" stop-color="#000000" fill="#000000"/></linearGradient><path fill="none" stroke="url(#1dP_ejbheoOkMyPxlPY0Wa)" stroke-miterlimit="10" stroke-width="2" d="M18.4,8h27.2C51.344,8,56,12.656,56,18.4 v27.2C56,51.344,51.344,56,45.6,56H18.4C12.656,56,8,51.344,8,45.6V18.4C8,12.656,12.656,8,18.4,8z"/><linearGradient id="1dP_ejbheoOkMyPxlPY0Wb" x1="33" x2="33" y1="50" y2="14" gradientUnits="userSpaceOnUse" fill="#000000"><stop offset="0" stop-color="#120c00" fill="#000000"/><stop offset="1" stop-color="#000000" fill="#000000"/></linearGradient><path fill="#080808" fill-rule="evenodd" d="M41.341,14h-5.268l4.39,7.714L30.805,14h-5.268 l4.829,9.429L20.268,14H15l5.268,12L15,50h5.268l10.098-25.714L25.537,50h5.268l9.659-27.429L36.073,50h5.268L51,20L41.341,14z" clip-rule="evenodd"/></svg>
+const Icon = ({ isDark, ...props }) => (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 64 64"
+ width="24px"
+ height="24px"
+ fillRule="evenodd"
+ clipRule="evenodd"
+ {...props}
+ >
+ <linearGradient id="1dP_ejbheoOkMyPxlPY0Wa" x1="32" x2="32" y1="57" y2="7" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stopColor={isDark ? "#FFFFFF" : "#000000"} />
+ <stop offset="1" stopColor={isDark ? "#FFFFFF" : "#000000"} />
+ </linearGradient>
+ <path
+ fill="none"
+ stroke="url(#1dP_ejbheoOkMyPxlPY0Wa)"
+ strokeMiterlimit="10"
+ strokeWidth="2"
+ d="M18.4,8h27.2C51.344,8,56,12.656,56,18.4 v27.2C56,51.344,51.344,56,45.6,56H18.4C12.656,56,8,51.344,8,45.6V18.4C8,12.656,12.656,8,18.4,8z"
+ />
+ <linearGradient id="1dP_ejbheoOkMyPxlPY0Wb" x1="33" x2="33" y1="50" y2="14" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stopColor={isDark ? "#333333" : "#120c00"} />
+ <stop offset="1" stopColor={isDark ? "#FFFFFF" : "#000000"} />
+ </linearGradient>
+ <path
+ fill={isDark ? "#CCCCCC" : "#080808"}
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M41.341,14h-5.268l4.39,7.714L30.805,14h-5.268 l4.829,9.429L20.268,14H15l5.268,12L15,50h5.268l10.098-25.714L25.537,50h5.268l9.659-27.429L36.073,50h5.268L51,20L41.341,14z"
+ />
+ </svg>
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const Icon = (props) => ( | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24px" height="24px" fill-rule="evenodd" clip-rule="evenodd" baseProfile="basic"><linearGradient id="1dP_ejbheoOkMyPxlPY0Wa" x1="32" x2="32" y1="57" y2="7" gradientUnits="userSpaceOnUse" fill="#000000"><stop offset="0" stop-color="#000000" fill="#000000"/><stop offset="1" stop-color="#000000" fill="#000000"/></linearGradient><path fill="none" stroke="url(#1dP_ejbheoOkMyPxlPY0Wa)" stroke-miterlimit="10" stroke-width="2" d="M18.4,8h27.2C51.344,8,56,12.656,56,18.4 v27.2C56,51.344,51.344,56,45.6,56H18.4C12.656,56,8,51.344,8,45.6V18.4C8,12.656,12.656,8,18.4,8z"/><linearGradient id="1dP_ejbheoOkMyPxlPY0Wb" x1="33" x2="33" y1="50" y2="14" gradientUnits="userSpaceOnUse" fill="#000000"><stop offset="0" stop-color="#120c00" fill="#000000"/><stop offset="1" stop-color="#000000" fill="#000000"/></linearGradient><path fill="#080808" fill-rule="evenodd" d="M41.341,14h-5.268l4.39,7.714L30.805,14h-5.268 l4.829,9.429L20.268,14H15l5.268,12L15,50h5.268l10.098-25.714L25.537,50h5.268l9.659-27.429L36.073,50h5.268L51,20L41.341,14z" clip-rule="evenodd"/></svg> | |
| ); | |
| const Icon = ({ isDark, ...props }) => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 64 64" | |
| width="24px" | |
| height="24px" | |
| fillRule="evenodd" | |
| clipRule="evenodd" | |
| {...props} | |
| > | |
| <linearGradient id="1dP_ejbheoOkMyPxlPY0Wa" x1="32" x2="32" y1="57" y2="7" gradientUnits="userSpaceOnUse"> | |
| <stop offset="0" stopColor={isDark ? "#FFFFFF" : "#000000"} /> | |
| <stop offset="1" stopColor={isDark ? "#FFFFFF" : "#000000"} /> | |
| </linearGradient> | |
| <path | |
| fill="none" | |
| stroke="url(#1dP_ejbheoOkMyPxlPY0Wa)" | |
| strokeMiterlimit="10" | |
| strokeWidth="2" | |
| d="M18.4,8h27.2C51.344,8,56,12.656,56,18.4 v27.2C56,51.344,51.344,56,45.6,56H18.4C12.656,56,8,51.344,8,45.6V18.4C8,12.656,12.656,8,18.4,8z" | |
| /> | |
| <linearGradient id="1dP_ejbheoOkMyPxlPY0Wb" x1="33" x2="33" y1="50" y2="14" gradientUnits="userSpaceOnUse"> | |
| <stop offset="0" stopColor={isDark ? "#333333" : "#120c00"} /> | |
| <stop offset="1" stopColor={isDark ? "#FFFFFF" : "#000000"} /> | |
| </linearGradient> | |
| <path | |
| fill={isDark ? "#CCCCCC" : "#080808"} | |
| fillRule="evenodd" | |
| clipRule="evenodd" | |
| d="M41.341,14h-5.268l4.39,7.714L30.805,14h-5.268 l4.829,9.429L20.268,14H15l5.268,12L15,50h5.268l10.098-25.714L25.537,50h5.268l9.659-27.429L36.073,50h5.268L51,20L41.341,14z" | |
| /> | |
| </svg> | |
| ); |
🤖 Prompt for AI Agents
In src/frontend/src/icons/miro/miro.jsx around lines 1-3, the Icon component
must accept an isDark prop and use JSX-compliant attribute names; update the
component signature to accept props (e.g., ({ isDark = false, ...rest })),
change SVG attributes from hyphenated to camelCase (fill-rule -> fillRule,
clip-rule -> clipRule, stop-color -> stopColor, stroke-miterlimit ->
strokeMiterlimit, stroke-width -> strokeWidth, baseProfile -> baseProfile is
fine) and set fill/stroke/gradient colors conditionally based on isDark (use
darker fills for light mode and lighter/white fills for dark mode), then spread
...rest onto the svg so consumers can pass size/className.
Comment on lines
+4
to
+9
| export const TwitterIcon = forwardRef< | ||
| SVGSVGElement, | ||
| React.PropsWithChildren<{}> | ||
| >((props, ref) => { | ||
| return <TwitterIconSVG ref={ref} {...props} />; | ||
| }); No newline at end of file |
Contributor
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
LGTM. Consider setting displayName.
Matches repo conventions (forwardRef, PropsWithChildren). Add a displayName for improved DevTools readability.
export const TwitterIcon = forwardRef<
SVGSVGElement,
React.PropsWithChildren<{}>
>((props, ref) => {
return <TwitterIconSVG ref={ref} {...props} />;
});
+
+TwitterIcon.displayName = "TwitterIcon";Verify lazy import mapping entry exists and references TwitterIcon:
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n '^\s*Twitter\s*:' src/frontend/src/icons/lazyIconImports.ts -A 2Length of output: 92
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Search for any lazy import mapping entry referencing "twitter" in any case
rg -in 'twitter\s*:' src/frontend/src/icons/lazyIconImports.ts -A 2Length of output: 89
Ensure TwitterIcon has a displayName and a lazy‐import mapping
To match other icons, add both a displayName and a mapping entry in lazyIconImports.ts.
• src/frontend/src/icons/twitter/index.tsx
export const TwitterIcon = forwardRef<
SVGSVGElement,
React.PropsWithChildren<{}>
>((props, ref) => {
return <TwitterIconSVG ref={ref} {...props} />;
});
+
+ // for React DevTools
+ TwitterIcon.displayName = "TwitterIcon";• src/frontend/src/icons/lazyIconImports.ts
export const lazyIconImports = {
…,
+ // lazy load TwitterIcon
+ Twitter: () =>
+ import("./twitter").then((m) => ({ default: m.TwitterIcon })),
…,
};This ensures DevTools readability and that the icon can be looked up via the existing lazy‐loader.
🤖 Prompt for AI Agents
In src/frontend/src/icons/twitter/index.tsx lines 4-9, the forwarded component
lacks a displayName and the icon isn’t registered for the lazy loader; add a
displayName assignment (TwitterIcon.displayName = 'TwitterIcon') immediately
after the component definition, and then add an entry to
src/frontend/src/icons/lazyIconImports.ts that maps the same key ('TwitterIcon')
to a dynamic import that resolves the exported TwitterIcon from ./twitter so the
icon is discoverable by the existing lazy loader and shows a readable name in
DevTools.
|
Uday-sidagana
changed the title
github-actions
Bot
added
enhancement
Collaborator
|
Is these components covered in another PR? @Uday-sidagana if so please close if not required. |
Contributor
Author
|
@edwinjosechittilappilly Yes, this merge needs to be closed |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR adds new Composio Components:
airtable,asana,attio,calendly,contentful,discord,figma,miro,wrikeBackend changes:
/src/backend/base/langflow/components/composioFrontend changes:
Icon Directory:
/src/frontend/src/icons/Updated:
/src/frontend/src/icons/lazyIconImports.tsSummary by CodeRabbit