feat: update Composio base and add new components.#9501
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughReplaces Composio template patching with a schema-driven authentication flow, adds dynamic auth-mode UI and per-mode fields, improves JSON parameter handling, and syncs UI/state across flows. Introduces 15 new Composio components and corresponding frontend icons with lazy-loading mappings and ref-forwarding wrappers. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Component as Composio*APIComponent
participant Base as ComposioBase
participant Toolkit as Composio Toolkit API
participant UI as UI Controls
User->>Component: Select app / open component
Component->>Base: initialize/update_build_config()
Base->>Toolkit: fetch toolkit schema (_get_toolkit_schema)
Toolkit-->>Base: schema (auth modes, actions)
Base->>UI: render actions + auth_mode control (_render_auth_mode_dropdown)
alt Multiple auth modes
User->>UI: Choose auth_mode
else Single auth mode
UI->>UI: Show pill for mode
end
UI->>Base: auth_mode changed
Base->>UI: render mode-specific fields (_render_custom_auth_fields)
opt OAuth2 creation path
User->>Base: create_auth_config()
Base->>Toolkit: create OAuth2 config
Toolkit-->>Base: auth_config / redirect
Base->>UI: show initiation fields or trigger connection
end
User->>Base: execute_action(payload)
Base->>Base: parse JSON parent fields
Base->>Toolkit: call action with connection
Toolkit-->>Base: result
Base-->>User: result
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 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}
There was a problem hiding this comment.
Actionable comments posted: 22
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (6)
src/frontend/src/icons/asana/asana.jsx (1)
1-12: MissingisDarkprop support.Based on the coding guidelines and project patterns, icon SVG components should support both light and dark modes by accepting and using an
isDarkprop. The current implementation doesn't use thepropsparameter and lacks dark mode support.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 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" /> + <path + fill={isDark ? "#ffffff" : "#000000"} + 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> );src/frontend/src/icons/figma/figma.jsx (1)
1-28: MissingisDarkprop support and props forwarding.The component doesn't use the
propsparameter and lacks dark mode support required by the coding guidelines. However, since this icon uses specific brand colors, theisDarkprop might not need to affect the colors, but it should still be supported for consistency.Apply this diff to add props forwarding and
isDarkprop support:-const Icon = (props) => ( +const Icon = ({ isDark, ...props }) => ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px" + {...props} >src/frontend/src/icons/miro/miro.jsx (1)
1-51: MissingisDarkprop support and props forwarding.The component doesn't use the
propsparameter and lacks dark mode support required by the coding guidelines. The current implementation uses hardcoded colors in gradients and fills.Apply this diff to add props forwarding and
isDarkprop support:-const Icon = (props) => ( +const Icon = ({ isDark, ...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" + {...props} > <linearGradient id="1dP_ejbheoOkMyPxlPY0Wa" x1="32" x2="32" y1="57" y2="7" gradientUnits="userSpaceOnUse" - fill="#000000" + fill={isDark ? "#ffffff" : "#000000"} > - <stop offset="0" stop-color="#000000" fill="#000000" /> - <stop offset="1" stop-color="#000000" fill="#000000" /> + <stop offset="0" stop-color={isDark ? "#ffffff" : "#000000"} fill={isDark ? "#ffffff" : "#000000"} /> + <stop offset="1" stop-color={isDark ? "#ffffff" : "#000000"} fill={isDark ? "#ffffff" : "#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" + fill={isDark ? "#ffffff" : "#000000"} > - <stop offset="0" stop-color="#120c00" fill="#000000" /> - <stop offset="1" stop-color="#000000" fill="#000000" /> + <stop offset="0" stop-color={isDark ? "#333333" : "#120c00"} fill={isDark ? "#ffffff" : "#000000"} /> + <stop offset="1" stop-color={isDark ? "#ffffff" : "#000000"} fill={isDark ? "#ffffff" : "#000000"} /> </linearGradient> <path - fill="#080808" + fill={isDark ? "#ffffff" : "#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> );src/frontend/src/icons/contentful/contentful.jsx (1)
1-39: MissingisDarkprop support and props forwarding.The component doesn't use the
propsparameter and lacks dark mode support required by the coding guidelines. While the icon uses brand colors, it should still support theisDarkprop for consistency with other icon components.Apply this diff to add props forwarding and
isDarkprop support:-const Icon = (props) => ( +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} >Note: Since this is a brand logo with specific colors, the
isDarkprop might not need to affect the fill colors, but including the prop maintains consistency with the established pattern.src/backend/base/langflow/base/composio/composio_base.py (1)
794-805: Auth config selection bug: last assignment overrides preferred OAUTH2 config.After scanning for an OAUTH2 auth_config, the code unconditionally sets auth_config_id = auth_configs.items[0].id, discarding the earlier OAUTH2 selection.
Apply this diff:
- if len(auth_configs.items) == 0: - auth_config_id = self.create_new_auth_config(app_name) - else: - auth_config_id = None - for auth_config in auth_configs.items: - if auth_config.auth_scheme == "OAUTH2": - auth_config_id = auth_config.id - - auth_config_id = auth_configs.items[0].id + if len(auth_configs.items) == 0: + auth_config_id = self.create_new_auth_config(app_name) + else: + # Prefer an existing OAUTH2 auth config if available; otherwise use the first one + oauth2 = next((ac for ac in auth_configs.items if getattr(ac, "auth_scheme", None) == "OAUTH2"), None) + auth_config_id = getattr(oauth2, "id", None) or auth_configs.items[0].idsrc/frontend/src/icons/salesforce/salesforce.jsx (1)
1-27: Support dark mode and prop pass-through for the Salesforce SVG.The icon should:
- Accept an isDark prop and adjust colors accordingly.
- Spread incoming props onto the root to enable sizing, className, etc.
Apply this diff:
-const Icon = (props) => ( - <svg - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 48 48" - width="24px" - height="24px" - > +const Icon = ({ isDark = false, ...props }) => { + // Adjust primary brand fill for dark backgrounds; keep white details as-is + const primary = isDark ? "#4FC3F7" : "#039be5"; + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 48 48" + width="24px" + height="24px" + {...props} + > <path - fill="#039be5" + fill={primary} d="M36.5,12c-1.326,0-2.59,0.256-3.758,0.705C31.321,10.48,28.836,9,26,9c-2.107,0-4.018,0.821-5.447,2.152C18.815,9.221,16.303,8,13.5,8C8.253,8,4,12.253,4,17.5c0,0.792,0.108,1.558,0.29,2.293C2.291,21.349,1,23.771,1,26.5C1,31.194,4.806,35,9.5,35c0.413,0,0.816-0.039,1.214-0.096C12.027,37.903,15.017,40,18.5,40c3.162,0,5.916-1.731,7.38-4.293C26.556,35.893,27.265,36,28,36c2.62,0,4.938-1.265,6.398-3.211C35.077,32.927,35.78,33,36.5,33C42.299,33,47,28.299,47,22.5C47,16.701,42.299,12,36.5,12z" /> @@ </svg> -); + ); +}; export default Icon;
🧹 Nitpick comments (42)
src/frontend/src/icons/contentful/index.tsx (1)
1-1: Nit: prefer a type-only React importYou’re only using React for types; consider
import type React from "react"andimport { forwardRef } from "react"to avoid bringing the runtime default import.-import React, { forwardRef } from "react"; +import { forwardRef } from "react"; +import type React from "react";src/frontend/src/icons/calendly/calendly.jsx (1)
1-25: Consider optional isDark handling (brand-safe)Calendly uses brand colors that generally work in both themes. If you want to strictly satisfy the “use isDark” guideline without altering brand color, at least accept/destructure it now for future overrides.
-const Icon = (props) => ( +const Icon = ({ isDark = false, ...props }) => ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" {...props}>If desired, we can also gate only neutral elements by theme and keep brand fills unchanged.
src/frontend/src/icons/calendly/index.tsx (1)
1-1: Nit: use a type-only React importSame micro-optimization as other wrappers.
-import React, { forwardRef } from "react"; +import { forwardRef } from "react"; +import type React from "react";src/frontend/src/icons/airtable/airtable.jsx (1)
5-7: Optional: avoid hardcoding 24px to improve flexibilityLet consumers set size via props or CSS. Removing fixed width/height (as above) aligns with other icons and lazy loaders.
src/backend/base/langflow/components/composio/salesforce_composio.py (1)
4-12: Icon mapping verified; optionalset_default_toolsimplementation suggestedThe frontend lazy-icon import for
"Salesforce"is correctly defined in
•src/frontend/src/icons/lazyIconImports.ts(lines 37–41)
•src/frontend/src/icons/salesforce/index.tsxexportingSalesforceIconfrom the SVG wrapperNo further action is required to make the icon render.
Optional improvement:
• Implementset_default_toolsinComposioSalesforceAPIComponent(src/backend/base/langflow/components/composio/salesforce_composio.py) to expose a curated set of high-signal Salesforce tools for the agent.src/backend/base/langflow/base/composio/composio_base.py (2)
1609-1647: Tool Mode hides auth controls; keep auth_link visible per spec.When Tool Mode is enabled you hide all action fields—good—but you also hide auth_link and blank its display name. The guidelines say “keep auth flow available.” Recommend keeping auth_link shown in Tool Mode.
Apply this diff:
- build_config.setdefault("auth_link", {}) - build_config["auth_link"]["show"] = False - build_config["auth_link"]["display_name"] = "" + build_config.setdefault("auth_link", {}) + build_config["auth_link"]["show"] = True + build_config["auth_link"].pop("display_name", None)
686-706: Top-level JSON parents rendered as MultilineInput: good; consider using CodeInput when available.Rendering object/array parents as a single JSON input is correct. If the UI supports CodeInput with JSON syntax highlighting, consider using it for better UX; you already import CodeInput above.
Example tweak:
- processed_inputs.append( - MultilineInput( + processed_inputs.append( + CodeInput( name=top_name, display_name=top_schema.get("title") or top_name.replace("_", " ").title(), info=( top_schema.get("description") or "Provide JSON for this parameter (object or array)." ), required=top_name in required_fields_set, ) )src/frontend/src/icons/discord/index.tsx (1)
4-9: Optional: set component displayName to aid DevTools/debugging.This helps React DevTools show a friendly name for forwardRef wrappers.
Apply:
export const DiscordIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return <DiscordIconSVG ref={ref} {...props} />; }); + +DiscordIcon.displayName = "DiscordIcon";src/frontend/src/icons/attio/index.tsx (1)
4-8: Optional: add displayName for better DevTools labeling.export const AttioIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( (props, ref) => { return <AttioIconSVG ref={ref} {...props} />; }, ); + +AttioIcon.displayName = "AttioIcon";src/frontend/src/icons/googledocs/index.tsx (1)
4-9: Optional: add displayName for DevTools clarity.export const GoogledocsIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return <GoogledocsIconSVG ref={ref} {...props} />; }); + +GoogledocsIcon.displayName = "GoogledocsIcon";src/frontend/src/icons/figma/index.tsx (1)
1-8: Optional: add displayName for easier debugging.export const FigmaIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( (props, ref) => { return <FigmaIconSVG ref={ref} {...props} />; }, ); + +FigmaIcon.displayName = "FigmaIcon";src/frontend/src/icons/one_drive/index.tsx (3)
4-9: If aligning to “OneDrive”, here’s a minimal export rename (adjust lazy mapping accordingly).Only do this if the repo’s canonical naming is “OneDrive”; otherwise keep as-is to match backend keys.
-export const One_DriveIcon = forwardRef< +export const OneDriveIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { - return <One_DriveIconSVG ref={ref} {...props} />; + return <One_DriveIconSVG ref={ref} {...props} />; }); + +// Optional: add displayName +OneDriveIcon.displayName = "OneDriveIcon";
4-9: If keeping “One_Drive”, add displayName for clarity.export const One_DriveIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return <One_DriveIconSVG ref={ref} {...props} />; }); + +One_DriveIcon.displayName = "One_DriveIcon";
4-9: Unify OneDrive icon naming and mappingIt looks like there are two separate OneDrive icon implementations and an inconsistent lazy-loader entry:
src/frontend/src/icons/OneDrive/OneDrive.jsx(existing JSX/SVG version)src/frontend/src/icons/one_drive/index.tsxexportingOne_DriveIcon- In
src/frontend/src/icons/lazyIconImports.ts, only theOne_Drivekey is registered for lazy loadingTo avoid confusion and ensure there’s a single canonical OneDrive icon, please consider:
- Consolidating to one directory name (e.g.
icons/OneDriveoricons/oneDrive)- Renaming the component export to
OneDriveIcon(no underscore)- Updating the lazy mapping key from
One_DrivetoOneDrive- Removing or merging the duplicate implementation so only one import path remains
This refactor isn’t strictly required for functionality, but standardizing on a single PascalCase, underscore-free name will keep the icons collection clear and prevent accidental duplication or loading issues.
src/frontend/src/icons/microsoftTeams/index.tsx (2)
4-7: Expose dark-mode prop on the public surface.Coding guideline for icons requires an
isDarkprop. The wrapper currently types props asPropsWithChildren<{}>, which rejectsisDark. Optionally widen the type to accept it.-export const Microsoft_TeamsIcon = forwardRef< - SVGSVGElement, - React.PropsWithChildren<{}> ->((props, ref) => { +export const Microsoft_TeamsIcon = forwardRef< + SVGSVGElement, + React.PropsWithChildren<{ isDark?: boolean }> +>((props, ref) => { return <Icon ref={ref} {...props} />; });
4-9: Align icon export name with PascalCase (remove underscore)Verified that the only occurrences of
Microsoft_TeamsIconare in
src/frontend/src/icons/microsoftTeams/index.tsx(export)src/frontend/src/icons/lazyIconImports.ts(import)You can safely rename the export and update its import:
--- a/src/frontend/src/icons/microsoftTeams/index.tsx +++ b/src/frontend/src/icons/microsoftTeams/index.tsx @@ -1,5 +1,5 @@ -export const Microsoft_TeamsIcon = forwardRef< +export const MicrosoftTeamsIcon = forwardRef< SVGSVGElement, React.PropsWithChildren<{}> >((props, ref) => { return <Icon ref={ref} {...props} />; });--- a/src/frontend/src/icons/lazyIconImports.ts +++ b/src/frontend/src/icons/lazyIconImports.ts @@ -1,3 +1,3 @@ -import { Microsoft_TeamsIcon } from "./microsoftTeams"; +import { MicrosoftTeamsIcon } from "./microsoftTeams"; // Export the lazy loading mapping for icons export const iconMap = { // … MicrosoftTeams: MicrosoftTeamsIcon, // … };After renaming, you can double-check that no references remain with:
rg -nP 'Microsoft_TeamsIcon'src/frontend/src/icons/klaviyo/index.tsx (2)
4-9: Ref forwarding likely won’t reach the unless ./klaviyo.jsx forwards refs.If
./klaviyo.jsxis a simple function component (common pattern in this repo), the forwarded ref won’t attach to the DOM. Please ensure the presentational component usesforwardRefand appliesrefto the<svg>.I can generate a patch similar to the Microsoft Teams icon to forward the ref and support
isDarkif you want this applied across all new brand icons.
4-7: AllowisDarkon the public API.To comply with the icon guidelines, expose
isDark?: booleanon the wrapper.-export const KlaviyoIcon = forwardRef< - SVGSVGElement, - React.PropsWithChildren<{}> ->((props, ref) => { +export const KlaviyoIcon = forwardRef< + SVGSVGElement, + React.PropsWithChildren<{ isDark?: boolean }> +>((props, ref) => { return <KlaviyoIconSVG ref={ref} {...props} />; });src/frontend/src/icons/airtable/index.tsx (2)
4-9: Ref forwarding likely ineffective withoutforwardRefin ./airtable.jsx.If the inner
AirtableIconSVGdoesn’t forward the ref to<svg>, consumers won’t get a DOM ref. Mirror the Microsoft Teams fix there.I can generate a repo-wide patch to wrap all new SVGs with
forwardRefand attach the ref to<svg>.
4-7: AddisDarksupport at the type level.Expose
isDark?: booleanto meet icon guidelines and avoid TS friction in call sites.-export const AirtableIcon = forwardRef< - SVGSVGElement, - React.PropsWithChildren<{}> ->((props, ref) => { +export const AirtableIcon = forwardRef< + SVGSVGElement, + React.PropsWithChildren<{ isDark?: boolean }> +>((props, ref) => { return <AirtableIconSVG ref={ref} {...props} />; });src/frontend/src/icons/microsoftTeams/microsoft_teams.jsx (1)
29-39: JSX attribute caveat (FYI):stop-colorvsstopColor.You used
stop-color, which is acceptable in.jsxand matches patterns in neighboring icons. If you later convert this file to.tsx, change tostopColorto satisfy TSX’s attribute typing.src/frontend/src/icons/salesforce/index.tsx (2)
4-9: Ref forwarding depends on ./salesforce.jsx forwarding the ref.If the presentational SVG doesn’t use
forwardRef, the public ref won’t attach to<svg>. Please align the inner component.Happy to generate a batch patch for all new icons.
4-7: Type surface: addisDarkto match icon guidance.-export const SalesforceIcon = forwardRef< - SVGSVGElement, - React.PropsWithChildren<{}> ->((props, ref) => { +export const SalesforceIcon = forwardRef< + SVGSVGElement, + React.PropsWithChildren<{ isDark?: boolean }> +>((props, ref) => { return <SalesforceIconSVG ref={ref} {...props} />; });src/backend/base/langflow/components/composio/notion_composio.py (1)
10-11: Consider curating default tools or adjusting default_tools_limit.If left empty, enabled_tools will fall back to the first N tools (default 5). If that’s intended, ignore. Otherwise, you can either set a class-level default_tools_limit or populate self._default_tools here to surface a curated subset by default.
Example minimal change (no tool names guessed):
class ComposioNotionAPIComponent(ComposioBaseComponent): display_name: str = "Notion" icon = "Notion" documentation: str = "https://docs.composio.dev" app_name = "notion" + default_tools_limit: int = 8src/backend/base/langflow/components/composio/miro_composio.py (1)
10-11: Optional: define sensible defaults for enabled tools.Same note as other components—either set self._default_tools here or adjust default_tools_limit to avoid surfacing an overly large toolset by default.
class ComposioMiroAPIComponent(ComposioBaseComponent): display_name: str = "Miro" icon = "Miro" documentation: str = "https://docs.composio.dev" app_name = "miro" + default_tools_limit: int = 8src/backend/base/langflow/components/composio/calendly_composio.py (1)
10-11: Optional: seed default tools.To improve OOTB UX, consider setting a curated self._default_tools, or bump default_tools_limit if Calendly exposes many actions.
class ComposioCalendlyAPIComponent(ComposioBaseComponent): display_name: str = "Calendly" icon = "Calendly" documentation: str = "https://docs.composio.dev" app_name = "calendly" + default_tools_limit: int = 8src/backend/base/langflow/components/composio/onedrive_composio.py (1)
10-11: Optional: set defaults to limit surfaced tools.Same suggestion as others—either set self._default_tools or raise default_tools_limit.
class ComposioOneDriveAPIComponent(ComposioBaseComponent): display_name: str = "OneDrive" icon = "OneDrive" documentation: str = "https://docs.composio.dev" app_name = "onedrive" + default_tools_limit: int = 8src/backend/base/langflow/components/composio/wrike_composio.py (1)
10-11: Optional: default tool curation.Consider setting a curated set via self._default_tools or raising default_tools_limit if Wrike exposes many actions.
class ComposioWrikeAPIComponent(ComposioBaseComponent): display_name: str = "Wrike" icon = "Wrike" documentation: str = "https://docs.composio.dev" app_name = "wrike" + default_tools_limit: int = 8src/backend/base/langflow/components/composio/googlesheets_composio.py (1)
10-11: Curate default tools to avoid overwhelming agents.Right now set_default_tools() is a no-op. If you intend to surface a small, high-signal subset, set self._default_tools to a curated set of action tags; otherwise the base will expose the first N tools (default 5). Non-blocking, but recommended for UX consistency across apps.
Apply this diff as a template and replace placeholders with real action tags:
- def set_default_tools(self): - """Set the default tools for Google Sheets component.""" + def set_default_tools(self): + """Set the default tools for Google Sheets component. + + Keep this list small to avoid overwhelming the agent. + """ + # TODO: Replace with actual action tag names defined by Composio for Google Sheets. + # Example (illustrative only): + # self._default_tools = {"get_values", "append_values", "update_values"} + return Nonesrc/backend/base/langflow/components/composio/klaviyo_composio.py (1)
10-11: Consider defining a minimal default toolset.Mirrors the Sheets comment: if Klaviyo exposes many actions, setting a small self._default_tools will improve initial agent usability.
- def set_default_tools(self): - """Set the default tools for Klaviyo component.""" + def set_default_tools(self): + """Set the default tools for Klaviyo component.""" + # TODO: replace with real action tags (e.g., "create_list", "add_profile_to_list", ...). + # self._default_tools = {"<tag1>", "<tag2>"} + return Nonesrc/backend/base/langflow/components/composio/airtable_composio.py (1)
10-11: Optional: preselect default tools to cap surface area.If Airtable exposes many actions, set self._default_tools to a small curated set to avoid noise.
- def set_default_tools(self): - """Set the default tools for Airtable component.""" + def set_default_tools(self): + """Set the default tools for Airtable component.""" + # self._default_tools = {"<tag1>", "<tag2>"} # TODO: replace with real tags + return Nonesrc/backend/base/langflow/components/composio/attio_composio.py (1)
10-11: Same note on default tools: consider a curated set.Setting self._default_tools will produce a predictable initial toolset.
- def set_default_tools(self): - """Set the default tools for Attio component.""" + def set_default_tools(self): + """Set the default tools for Attio component.""" + # self._default_tools = {"<tag1>", "<tag2>"} # TODO: replace with real tags + return Nonesrc/backend/base/langflow/components/composio/figma_composio.py (2)
10-11: Add an explicit pass to the stub method to satisfy stricter linters.Some linters warn on functions that only contain a docstring. Adding pass keeps intent clear.
def set_default_tools(self): """Set the default tools for Figma component.""" + pass
5-8: Annotate class attributes for consistency and clarity.display_name is typed; icon, documentation, and app_name aren’t. Aligning all improves static analysis.
class ComposioFigmaAPIComponent(ComposioBaseComponent): display_name: str = "Figma" - icon = "Figma" - documentation: str = "https://docs.composio.dev" - app_name = "figma" + icon: str = "Figma" + documentation: str = "https://docs.composio.dev" + app_name: str = "figma"src/backend/base/langflow/components/composio/discord_composio.py (2)
10-11: Add an explicit pass to the stub method.Keeps linters quiet and intention explicit.
def set_default_tools(self): """Set the default tools for Discord component.""" + pass
5-8: Add type annotations to class attributes for consistency.Aligns with display_name typing and improves static checks.
class ComposioDiscordAPIComponent(ComposioBaseComponent): display_name: str = "Discord" - icon = "Discord" - documentation: str = "https://docs.composio.dev" - app_name = "discord" + icon: str = "Discord" + documentation: str = "https://docs.composio.dev" + app_name: str = "discord"src/backend/base/langflow/components/composio/contentful_composio.py (2)
10-11: Add pass to the stub method to avoid empty-function warnings.def set_default_tools(self): """Set the default tools for Contentful component.""" + pass
5-8: Type-hint icon, documentation, app_name for consistency.class ComposioContentfulAPIComponent(ComposioBaseComponent): display_name: str = "Contentful" - icon = "Contentful" - documentation: str = "https://docs.composio.dev" - app_name = "contentful" + icon: str = "Contentful" + documentation: str = "https://docs.composio.dev" + app_name: str = "contentful"src/backend/base/langflow/components/composio/googledocs_composio.py (2)
10-11: Add pass to the stub method.def set_default_tools(self): """Set the default tools for Google Docs component.""" + pass
5-8: Add missing type hints for icon/documentation/app_name.class ComposioGoogleDocsAPIComponent(ComposioBaseComponent): display_name: str = "Google Docs" - icon = "Googledocs" - documentation: str = "https://docs.composio.dev" - app_name = "googledocs" + icon: str = "Googledocs" + documentation: str = "https://docs.composio.dev" + app_name: str = "googledocs"src/backend/base/langflow/components/composio/asana_composio.py (2)
10-11: Add an explicit pass in the stub.def set_default_tools(self): """Set the default tools for Asana component.""" + pass
5-8: Type-hint icon, documentation, and app_name for parity with display_name.class ComposioAsanaAPIComponent(ComposioBaseComponent): display_name: str = "Asana" - icon = "Asana" - documentation: str = "https://docs.composio.dev" - app_name = "asana" + icon: str = "Asana" + documentation: str = "https://docs.composio.dev" + app_name: str = "asana"
| # Handle reserved attribute name conflicts (e.g., 'status') by prefixing with app name | ||
| # This prevents clashes with component attributes like self.status | ||
| if clean_field in {"status"}: | ||
| clean_field = f"{self.app_name}_{clean_field}" | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Renaming 'status' breaks execution; add reverse-mapping for schema lookup and API arguments.
You sanitize status to f"{self.app_name}_status" during schema processing, but only reverse-map user_id in execute_action. This will send the wrong parameter name to Composio (e.g., salesforce_status instead of status) and also prevents correct schema-based behaviors (JSON parsing, defaults) because prop_schema lookup uses the sanitized name.
Apply both fixes:
- When looking up prop_schema, fallback to original names for renamed fields.
- When building arguments, reverse-map f"{self.app_name}_status" back to "status" (similar to user_id).
Apply this diff:
@@
- # Determine schema for this field
- prop_schema = schema_properties.get(field, {})
+ # Determine schema for this field; fall back to original names when parameters were renamed
+ orig_field = field
+ if field.endswith("_user_id") and field.startswith(self.app_name):
+ orig_field = "user_id"
+ elif field == f"{self.app_name}_status":
+ orig_field = "status"
+ prop_schema = schema_properties.get(orig_field, {})
@@
- final_field_name = field
- if field.endswith("_user_id") and field.startswith(self.app_name):
- final_field_name = "user_id"
+ final_field_name = field
+ if field.endswith("_user_id") and field.startswith(self.app_name):
+ final_field_name = "user_id"
+ elif field == f"{self.app_name}_status":
+ final_field_name = "status"Also applies to: 552-558, 1921-1933, 1944-1949
🤖 Prompt for AI Agents
In src/backend/base/langflow/base/composio/composio_base.py around lines 391-395
(and also apply the same change at 552-558, 1921-1933, 1944-1949): you currently
rename reserved field "status" to f"{self.app_name}_status" during schema
processing but don't account for that renamed key when later looking up
prop_schema or when building the API call args; update the prop_schema lookup to
fall back to the original unprefixed name if the sanitized name is not found,
and when constructing the arguments reverse-map any f"{self.app_name}_status"
(and other similarly-prefixed reserved fields) back to their original names
(e.g., "status") before sending to Composio, mirroring the existing user_id
reverse-mapping logic so schema-driven behavior and API parameter names remain
correct.
| if auth_config is None and hasattr(connection, "__dict__"): | ||
| auth_config = getattr(connection.__dict__, "auth_config", None) | ||
| scheme = getattr(auth_config, "auth_scheme", None) if auth_config else None | ||
| is_managed = getattr(auth_config, "is_composio_managed", None) if auth_config else None | ||
| return scheme, is_managed | ||
| except Exception as e: | ||
| logger.debug(f"Could not retrieve auth info for connection {connection_id}: {e}") | ||
| return None, None |
There was a problem hiding this comment.
Incorrect getattr on dict when reading connection.dict.
connection.dict is a dict; getattr(connection.dict, "auth_config", None) always returns None. Use dict.get.
Apply this diff:
- auth_config = getattr(connection, "auth_config", None)
- if auth_config is None and hasattr(connection, "__dict__"):
- auth_config = getattr(connection.__dict__, "auth_config", None)
+ auth_config = getattr(connection, "auth_config", None)
+ if auth_config is None and hasattr(connection, "__dict__"):
+ auth_config = connection.__dict__.get("auth_config")📝 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.
| if auth_config is None and hasattr(connection, "__dict__"): | |
| auth_config = getattr(connection.__dict__, "auth_config", None) | |
| scheme = getattr(auth_config, "auth_scheme", None) if auth_config else None | |
| is_managed = getattr(auth_config, "is_composio_managed", None) if auth_config else None | |
| return scheme, is_managed | |
| except Exception as e: | |
| logger.debug(f"Could not retrieve auth info for connection {connection_id}: {e}") | |
| return None, None | |
| auth_config = getattr(connection, "auth_config", None) | |
| if auth_config is None and hasattr(connection, "__dict__"): | |
| auth_config = connection.__dict__.get("auth_config") | |
| scheme = getattr(auth_config, "auth_scheme", None) if auth_config else None | |
| is_managed = getattr(auth_config, "is_composio_managed", None) if auth_config else None | |
| return scheme, is_managed |
🤖 Prompt for AI Agents
In src/backend/base/langflow/base/composio/composio_base.py around lines 869 to
876, the code incorrectly uses getattr on connection.__dict__ (a dict) to access
"auth_config", which always returns None; change that call to use dict.get
(e.g., connection.__dict__.get("auth_config", None)) so auth_config is correctly
retrieved, leaving the subsequent scheme/is_managed extraction and exception
handling unchanged.
| if "auth_mode_display" in build_config: | ||
| build_config["auth_mode_display"]["show"] = False | ||
| auth_mode_cfg["helper_text"] = "Choose how to authenticate with the toolkit." |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Stale key 'auth_mode_display'—should be 'auth_mode_pill'.
_render_auth_mode_dropdown hides auth_mode_display, but the pill field created above is named auth_mode_pill. This leaves the pill visible when multiple modes exist.
Apply this diff:
- if "auth_mode_display" in build_config:
- build_config["auth_mode_display"]["show"] = False
+ if "auth_mode_pill" in build_config:
+ build_config["auth_mode_pill"]["show"] = False📝 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.
| if "auth_mode_display" in build_config: | |
| build_config["auth_mode_display"]["show"] = False | |
| auth_mode_cfg["helper_text"] = "Choose how to authenticate with the toolkit." | |
| if "auth_mode_pill" in build_config: | |
| build_config["auth_mode_pill"]["show"] = False | |
| auth_mode_cfg["helper_text"] = "Choose how to authenticate with the toolkit." |
🤖 Prompt for AI Agents
In src/backend/base/langflow/base/composio/composio_base.py around lines 1002 to
1004, the code hides "auth_mode_display" but the UI uses "auth_mode_pill", so
the pill remains visible when multiple modes exist; update the key from
"auth_mode_display" to "auth_mode_pill" when setting the "show" flag to False
(i.e., set build_config["auth_mode_pill"]["show"] = False) and leave the
subsequent auth_mode_cfg["helper_text"] assignment unchanged.
| mode = field_value if isinstance(field_value, str) else (build_config.get("auth_mode", {}).get("value")) | ||
| if not mode and isinstance(build_config.get("auth_mode"), dict): | ||
| mode = build_config["auth_mode"].get("value") | ||
| # Always show auth_link for any mode | ||
| build_config.setdefault("auth_link", {}) | ||
| build_config["auth_link"]["show"] = False | ||
| # Reset connection state when switching modes | ||
| build_config["auth_link"].pop("connection_id", None) | ||
| build_config["auth_link"].pop("auth_config_id", None) | ||
| build_config["auth_link"]["value"] = "connect" | ||
| build_config["auth_link"]["auth_tooltip"] = "Connect" | ||
| # If an ACTIVE connection already exists, don't render any auth fields |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Comment says 'Always show auth_link' but code hides it.
The code sets build_config["auth_link"]["show"] = False while the comment states the opposite. This likely hides the Connect/Disconnect control when the user selects an auth mode.
Apply this diff:
- # Always show auth_link for any mode
+ # Always show auth_link for any mode
build_config.setdefault("auth_link", {})
- build_config["auth_link"]["show"] = False
+ build_config["auth_link"]["show"] = True📝 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.
| mode = field_value if isinstance(field_value, str) else (build_config.get("auth_mode", {}).get("value")) | |
| if not mode and isinstance(build_config.get("auth_mode"), dict): | |
| mode = build_config["auth_mode"].get("value") | |
| # Always show auth_link for any mode | |
| build_config.setdefault("auth_link", {}) | |
| build_config["auth_link"]["show"] = False | |
| # Reset connection state when switching modes | |
| build_config["auth_link"].pop("connection_id", None) | |
| build_config["auth_link"].pop("auth_config_id", None) | |
| build_config["auth_link"]["value"] = "connect" | |
| build_config["auth_link"]["auth_tooltip"] = "Connect" | |
| # If an ACTIVE connection already exists, don't render any auth fields | |
| mode = field_value if isinstance(field_value, str) else (build_config.get("auth_mode", {}).get("value")) | |
| if not mode and isinstance(build_config.get("auth_mode"), dict): | |
| mode = build_config["auth_mode"].get("value") | |
| # Always show auth_link for any mode | |
| build_config.setdefault("auth_link", {}) | |
| build_config["auth_link"]["show"] = True | |
| # Reset connection state when switching modes | |
| build_config["auth_link"].pop("connection_id", None) | |
| build_config["auth_link"].pop("auth_config_id", None) | |
| build_config["auth_link"]["value"] = "connect" | |
| build_config["auth_link"]["auth_tooltip"] = "Connect" | |
| # If an ACTIVE connection already exists, don't render any auth fields |
🤖 Prompt for AI Agents
In src/backend/base/langflow/base/composio/composio_base.py around lines 1218 to
1229, the comment says "Always show auth_link" but the code sets
build_config["auth_link"]["show"] = False; change this to set
build_config["auth_link"]["show"] = True so the Connect/Disconnect control is
visible when an auth mode is selected, leaving the rest of the auth_link
initialization (clearing connection/auth ids, setting value and tooltip) intact.
| from .googledocs_composio import ComposioGoogleDocsAPIComponent | ||
| from .googlesheets_composio import ComposioGoogleSheetsAPIComponent | ||
| from .klaviyo_composio import ComposioKlaviyoAPIComponent | ||
| from .notion_composio import ComposioNotionAPIComponent | ||
| from .onedrive_composio import ComposioOneDriveAPIComponent | ||
| from .salesforce_composio import ComposioSalesforceAPIComponent | ||
| 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 .wrike_composio import ComposioWrikeAPIComponent |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Alphabetize new TYPE_CHECKING imports to comply with backend conventions
Per the guidelines, imports in components init.py should be alphabetical. Sorting this block improves readability and prevents noisy diffs later.
Apply this diff to sort the newly added imports:
-from .googledocs_composio import ComposioGoogleDocsAPIComponent
-from .googlesheets_composio import ComposioGoogleSheetsAPIComponent
-from .klaviyo_composio import ComposioKlaviyoAPIComponent
-from .notion_composio import ComposioNotionAPIComponent
-from .onedrive_composio import ComposioOneDriveAPIComponent
-from .salesforce_composio import ComposioSalesforceAPIComponent
-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 .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 .contentful_composio import ComposioContentfulAPIComponent
+from .discord_composio import ComposioDiscordAPIComponent
+from .figma_composio import ComposioFigmaAPIComponent
+from .googledocs_composio import ComposioGoogleDocsAPIComponent
+from .googlesheets_composio import ComposioGoogleSheetsAPIComponent
+from .klaviyo_composio import ComposioKlaviyoAPIComponent
+from .miro_composio import ComposioMiroAPIComponent
+from .notion_composio import ComposioNotionAPIComponent
+from .onedrive_composio import ComposioOneDriveAPIComponent
+from .salesforce_composio import ComposioSalesforceAPIComponent
+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.
| from .googledocs_composio import ComposioGoogleDocsAPIComponent | |
| from .googlesheets_composio import ComposioGoogleSheetsAPIComponent | |
| from .klaviyo_composio import ComposioKlaviyoAPIComponent | |
| from .notion_composio import ComposioNotionAPIComponent | |
| from .onedrive_composio import ComposioOneDriveAPIComponent | |
| from .salesforce_composio import ComposioSalesforceAPIComponent | |
| 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 .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 .contentful_composio import ComposioContentfulAPIComponent | |
| from .discord_composio import ComposioDiscordAPIComponent | |
| from .figma_composio import ComposioFigmaAPIComponent | |
| from .googledocs_composio import ComposioGoogleDocsAPIComponent | |
| from .googlesheets_composio import ComposioGoogleSheetsAPIComponent | |
| from .klaviyo_composio import ComposioKlaviyoAPIComponent | |
| from .miro_composio import ComposioMiroAPIComponent | |
| from .notion_composio import ComposioNotionAPIComponent | |
| from .onedrive_composio import ComposioOneDriveAPIComponent | |
| from .salesforce_composio import ComposioSalesforceAPIComponent | |
| from .wrike_composio import ComposioWrikeAPIComponent |
🤖 Prompt for AI Agents
In src/backend/base/langflow/components/composio/__init__.py around lines 22 to
36 the newly added TYPE_CHECKING import lines are not alphabetized; reorder
these import statements into alphabetical order (by module name or the imported
symbol) so the block reads in sorted order (e.g., Airtable, Asana, Attio,
Calendly, Contentful, Discord, Figma, Miro, OneDrive, Salesforce, Sheets, Docs,
Klaviyo, Wrike), preserving existing formatting and placement within the
TYPE_CHECKING block.
| import { GoogledocsIcon } from "./googledocs"; | ||
| import { Microsoft_TeamsIcon } from "./microsoftTeams"; |
There was a problem hiding this comment.
Remove unused eager imports to keep bundle lean and pass lint.
Top-level imports defeat code-splitting and will likely fail no-unused-vars. These icons are loaded lazily below, so the eager imports are unnecessary.
Apply this diff:
-import { GoogledocsIcon } from "./googledocs";
-import { Microsoft_TeamsIcon } from "./microsoftTeams";📝 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.
| import { GoogledocsIcon } from "./googledocs"; | |
| import { Microsoft_TeamsIcon } from "./microsoftTeams"; | |
| // (remove the two eager imports at the top of this file) |
🤖 Prompt for AI Agents
In src/frontend/src/icons/lazyIconImports.ts around lines 1-2, the two top-level
eager imports (GoogledocsIcon and Microsoft_TeamsIcon) are unused and defeat
code-splitting; remove those import lines so the file relies only on the
existing lazy/dynamic imports below (or convert them to type-only imports if
types are required), then run lint to confirm no-unused-vars is resolved and
bundle remains lean.
| export const Microsoft_TeamsIcon = forwardRef< | ||
| SVGSVGElement, | ||
| React.PropsWithChildren<{}> | ||
| >((props, ref) => { | ||
| return <Icon ref={ref} {...props} />; | ||
| }); |
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
Ref forwarding is a no-op because the inner Icon doesn’t forward the ref to the .
The wrapper forwards ref to Icon, but microsoft_teams.jsx is a plain function component that doesn’t forward refs; React will not attach the ref to the DOM node. Consumers expecting a DOM ref will get a warning or null.
Follow-up: convert microsoft_teams.jsx to forwardRef and pass the ref to the root <svg>. I’ve proposed a concrete diff in the microsoft_teams.jsx file review.
Run this quick check to see if any callers rely on the ref (adjust patterns as needed):
🏁 Script executed:
#!/bin/bash
# Find any ref usage on Microsoft Teams icon (JSX syntax)
rg -nP --type=tsx --type=ts --type=jsx -C2 '<Microsoft_TeamsIcon\b[^>]*\bref='Length of output: 108
I’ll re-run the search without relying on rg’s built-in types and instead use file globs to catch all relevant extensions.
🏁 Script executed:
#!/bin/bash
# Search for any usage of Microsoft_TeamsIcon with a ref prop across TS/JS files
rg -nP -C2 '<Microsoft_TeamsIcon\b[^>]*\bref=' -g '*.ts' -g '*.tsx' -g '*.js' -g '*.jsx'Length of output: 90
Convert inner Icon component to use forwardRef for proper ref forwarding
The wrapper’s ref forwarding is currently a no-op because Icon doesn’t forward its ref to the <svg>. While our search found no existing usages of ref on Microsoft_TeamsIcon across TS/JS files, we should update the inner icon component to maintain consistency and enable future consumers to attach refs.
• File needing update:
src/frontend/src/icons/microsoftTeams/microsoft_teams.jsx
• Suggested change (example diff):
-import React from "react";
-export default function MicrosoftTeams(props) {
- return (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width={24}
- height={24}
- viewBox="0 0 24 24"
- fill="currentColor"
- {...props}
- >
- {/* SVG paths */}
- </svg>
- );
-}
+import React, { forwardRef } from "react";
+
+const MicrosoftTeams = forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+ (props, ref) => (
+ <svg
+ ref={ref}
+ xmlns="http://www.w3.org/2000/svg"
+ width={24}
+ height={24}
+ viewBox="0 0 24 24"
+ fill="currentColor"
+ {...props}
+ >
+ {/* SVG paths */}
+ </svg>
+ )
+);
+
+export default MicrosoftTeams;With this ref forwarding in place, the wrapper component’s ref will correctly attach to the <svg> DOM node.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/frontend/src/icons/microsoftTeams/index.tsx (around lines 4-9) and
src/frontend/src/icons/microsoftTeams/microsoft_teams.jsx, the wrapper forwards
a ref but the inner Icon component does not, making ref forwarding ineffective;
modify the inner Icon component to use React.forwardRef, accept (props, ref) and
attach that ref to the root <svg> element (or the DOM node returned) while
preserving existing props and type annotations, then export the
forwardRef-wrapped component so the index.tsx wrapper’s ref correctly points to
the SVG DOM node.
| const Icon = (props) => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 48 48" | ||
| width="24px" | ||
| height="24px" | ||
| > | ||
| <path | ||
| fill="#5059c9" | ||
| d="M44,22v8c0,3.314-2.686,6-6,6s-6-2.686-6-6V20h10C43.105,20,44,20.895,44,22z M38,16 c2.209,0,4-1.791,4-4c0-2.209-1.791-4-4-4s-4,1.791-4,4C34,14.209,35.791,16,38,16z" | ||
| /> | ||
| <path | ||
| fill="#7b83eb" | ||
| d="M35,22v11c0,5.743-4.841,10.356-10.666,9.978C19.019,42.634,15,37.983,15,32.657V20h18 C34.105,20,35,20.895,35,22z M25,17c3.314,0,6-2.686,6-6s-2.686-6-6-6s-6,2.686-6,6S21.686,17,25,17z" | ||
| /> | ||
| <circle cx="25" cy="11" r="6" fill="#7b83eb" /> | ||
| <path | ||
| d="M26,33.319V20H15v12.657c0,1.534,0.343,3.008,0.944,4.343h6.374C24.352,37,26,35.352,26,33.319z" | ||
| opacity=".05" | ||
| /> | ||
| <path | ||
| d="M15,20v12.657c0,1.16,0.201,2.284,0.554,3.343h6.658c1.724,0,3.121-1.397,3.121-3.121V20H15z" | ||
| opacity=".07" | ||
| /> | ||
| <path | ||
| d="M24.667,20H15v12.657c0,0.802,0.101,1.584,0.274,2.343h6.832c1.414,0,2.56-1.146,2.56-2.56V20z" | ||
| opacity=".09" | ||
| /> | ||
| <linearGradient | ||
| id="DqqEodsTc8fO7iIkpib~Na" | ||
| x1="4.648" | ||
| x2="23.403" | ||
| y1="14.648" | ||
| y2="33.403" | ||
| gradientUnits="userSpaceOnUse" | ||
| > | ||
| <stop offset="0" stop-color="#5961c3" /> | ||
| <stop offset="1" stop-color="#3a41ac" /> | ||
| </linearGradient> | ||
| <path | ||
| fill="url(#DqqEodsTc8fO7iIkpib~Na)" | ||
| d="M22,34H6c-1.105,0-2-0.895-2-2V16c0-1.105,0.895-2,2-2h16c1.105,0,2,0.895,2,2v16 C24,33.105,23.105,34,22,34z" | ||
| /> | ||
| <path | ||
| fill="#fff" | ||
| d="M18.068,18.999H9.932v1.72h3.047v8.28h2.042v-8.28h3.047V18.999z" | ||
| /> | ||
| </svg> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Implement dark-mode support, prop-forwarding, and actual ref forwarding to .
- Currently ignores
propsand doesn’t supportisDark. - Doesn’t spread props onto
<svg>(can’t customize size/className/ARIA). - Not using
forwardRef, making the wrapper’s ref forwarding ineffective.
Refactor as below to:
- accept
isDark?: boolean, - forward
refto<svg>, - spread remaining props,
- use
isDarkto choose fills for non-gradient shapes.
-const Icon = (props) => (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 48 48"
- width="24px"
- height="24px"
- >
+import React, { forwardRef } from "react";
+
+const Icon = forwardRef(function Icon({ isDark = false, ...rest }, ref) {
+ const primary = isDark ? "#8f96f0" : "#5059c9";
+ const secondary = isDark ? "#a1a8ff" : "#7b83eb";
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 48 48"
+ width={rest.width ?? "24px"}
+ height={rest.height ?? "24px"}
+ ref={ref}
+ {...rest}
+ >
- <path
- fill="#5059c9"
+ <path
+ fill={primary}
d="M44,22v8c0,3.314-2.686,6-6,6s-6-2.686-6-6V20h10C43.105,20,44,20.895,44,22z M38,16 c2.209,0,4-1.791,4-4c0-2.209-1.791-4-4-4s-4,1.791-4,4C34,14.209,35.791,16,38,16z"
/>
- <path
- fill="#7b83eb"
+ <path
+ fill={secondary}
d="M35,22v11c0,5.743-4.841,10.356-10.666,9.978C19.019,42.634,15,37.983,15,32.657V20h18 C34.105,20,35,20.895,35,22z M25,17c3.314,0,6-2.686,6-6s-2.686-6-6-6s-6,2.686-6,6S21.686,17,25,17z"
/>
- <circle cx="25" cy="11" r="6" fill="#7b83eb" />
+ <circle cx="25" cy="11" r="6" fill={secondary} />
<path
d="M26,33.319V20H15v12.657c0,1.534,0.343,3.008,0.944,4.343h6.374C24.352,37,26,35.352,26,33.319z"
opacity=".05"
/>
<path
d="M15,20v12.657c0,1.16,0.201,2.284,0.554,3.343h6.658c1.724,0,3.121-1.397,3.121-3.121V20H15z"
opacity=".07"
/>
<path
d="M24.667,20H15v12.657c0,0.802,0.101,1.584,0.274,2.343h6.832c1.414,0,2.56-1.146,2.56-2.56V20z"
opacity=".09"
/>
<linearGradient
id="DqqEodsTc8fO7iIkpib~Na"
x1="4.648"
x2="23.403"
y1="14.648"
y2="33.403"
gradientUnits="userSpaceOnUse"
>
- <stop offset="0" stop-color="#5961c3" />
- <stop offset="1" stop-color="#3a41ac" />
+ <stop offset="0" stop-color="#5961c3" />
+ <stop offset="1" stop-color="#3a41ac" />
</linearGradient>
<path
fill="url(#DqqEodsTc8fO7iIkpib~Na)"
d="M22,34H6c-1.105,0-2-0.895-2-2V16c0-1.105,0.895-2,2-2h16c1.105,0,2,0.895,2,2v16 C24,33.105,23.105,34,22,34z"
/>
<path
fill="#fff"
d="M18.068,18.999H9.932v1.72h3.047v8.28h2.042v-8.28h3.047V18.999z"
/>
- </svg>
-);
-export default Icon;
+ </svg>
+ );
+});
+export default Icon;Note: We preserved gradient stops as static. If you want gradient hues to adapt to dark mode as well, we can map them to variables and switch them similarly.
| const Icon = (props) => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 48 48" | ||
| width="24px" | ||
| height="24px" | ||
| > | ||
| <linearGradient | ||
| id="NqAl5bicO~9wmXV3Tvu1Ra" | ||
| x1="24.5" | ||
| x2="24.5" | ||
| y1="7.032" | ||
| y2="22.852" | ||
| gradientUnits="userSpaceOnUse" | ||
| > | ||
| <stop offset="0" stop-color="#0571bf" /> | ||
| <stop offset="1" stop-color="#0268ba" /> | ||
| </linearGradient> | ||
| <path | ||
| fill="url(#NqAl5bicO~9wmXV3Tvu1Ra)" | ||
| d="M24.5,7C16.492,7,10,13.492,10,21.5S16.492,36,24.5,36S39,29.508,39,21.5S32.508,7,24.5,7 L24.5,7z" | ||
| /> | ||
| <linearGradient | ||
| id="NqAl5bicO~9wmXV3Tvu1Rb" | ||
| x1="14.228" | ||
| x2="14.228" | ||
| y1="14.219" | ||
| y2="32.761" | ||
| gradientUnits="userSpaceOnUse" | ||
| > | ||
| <stop offset="0" stop-color="#1684da" /> | ||
| <stop offset="1" stop-color="#107cd4" /> | ||
| </linearGradient> | ||
| <path | ||
| fill="url(#NqAl5bicO~9wmXV3Tvu1Rb)" | ||
| d="M16.155,14.972c-1.32-0.505-2.753-0.781-4.25-0.781C5.33,14.191,0,19.521,0,26.096 c0,2.476,0.757,4.774,2.05,6.678c0.061-0.026,16.445-6.889,26.406-10.888C22.952,18.568,17.903,15.641,16.155,14.972z" | ||
| /> | ||
| <linearGradient | ||
| id="NqAl5bicO~9wmXV3Tvu1Rc" | ||
| x1="38.228" | ||
| x2="38.228" | ||
| y1="18.746" | ||
| y2="34.097" | ||
| gradientUnits="userSpaceOnUse" | ||
| > | ||
| <stop offset="0" stop-color="#138cdd" /> | ||
| <stop offset="1" stop-color="#0c7dd4" /> | ||
| </linearGradient> | ||
| <path | ||
| fill="url(#NqAl5bicO~9wmXV3Tvu1Rc)" | ||
| d="M48,28.373c0-5.317-4.31-9.627-9.627-9.627c-0.997,0-1.958,0.152-2.863,0.433 c-0.996,0.31-3.652,1.342-7.054,2.708c8.377,5.05,17.79,10.996,18.252,11.288C47.525,31.76,48,30.123,48,28.373z" | ||
| /> | ||
| <linearGradient | ||
| id="NqAl5bicO~9wmXV3Tvu1Rd" | ||
| x1="17.13" | ||
| x2="31.145" | ||
| y1="24.083" | ||
| y2="41.333" | ||
| gradientUnits="userSpaceOnUse" | ||
| > | ||
| <stop offset="0" stop-color="#27a7ea" /> | ||
| <stop offset="1" stop-color="#1c94e3" /> | ||
| </linearGradient> | ||
| <path | ||
| fill="url(#NqAl5bicO~9wmXV3Tvu1Rd)" | ||
| d="M46.709,33.175c-0.463-0.292-9.875-6.238-18.252-11.288 C18.495,25.885,2.111,32.748,2.05,32.774C2.467,33.388,5.627,38,11.904,38c5.03,0,16.176,0,26.354,0 C43.669,38,46.148,34.146,46.709,33.175z" | ||
| /> | ||
| </svg> | ||
| ); | ||
| export default Icon; |
There was a problem hiding this comment.
Missing dark mode support.
According to the coding guidelines and retrieved learnings, custom SVG icon components must support both light and dark modes by accepting an isDark prop. This component uses multiple gradient definitions with fixed colors without theme-aware styling.
Apply this diff to add dark mode support by adjusting the gradient colors:
-const Icon = (props) => (
+const Icon = ({ isDark, ...props }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
width="24px"
height="24px"
+ {...props}
>
<linearGradient
id="NqAl5bicO~9wmXV3Tvu1Ra"
x1="24.5"
x2="24.5"
y1="7.032"
y2="22.852"
gradientUnits="userSpaceOnUse"
>
- <stop offset="0" stop-color="#0571bf" />
- <stop offset="1" stop-color="#0268ba" />
+ <stop offset="0" stop-color={isDark ? "#42a5f5" : "#0571bf"} />
+ <stop offset="1" stop-color={isDark ? "#1976d2" : "#0268ba"} />
</linearGradient>
<path
fill="url(#NqAl5bicO~9wmXV3Tvu1Ra)"
d="M24.5,7C16.492,7,10,13.492,10,21.5S16.492,36,24.5,36S39,29.508,39,21.5S32.508,7,24.5,7 L24.5,7z"
/>
<linearGradient
id="NqAl5bicO~9wmXV3Tvu1Rb"
x1="14.228"
x2="14.228"
y1="14.219"
y2="32.761"
gradientUnits="userSpaceOnUse"
>
- <stop offset="0" stop-color="#1684da" />
- <stop offset="1" stop-color="#107cd4" />
+ <stop offset="0" stop-color={isDark ? "#64b5f6" : "#1684da"} />
+ <stop offset="1" stop-color={isDark ? "#2196f3" : "#107cd4"} />
</linearGradient>
<path
fill="url(#NqAl5bicO~9wmXV3Tvu1Rb)"
d="M16.155,14.972c-1.32-0.505-2.753-0.781-4.25-0.781C5.33,14.191,0,19.521,0,26.096 c0,2.476,0.757,4.774,2.05,6.678c0.061-0.026,16.445-6.889,26.406-10.888C22.952,18.568,17.903,15.641,16.155,14.972z"
/>
<linearGradient
id="NqAl5bicO~9wmXV3Tvu1Rc"
x1="38.228"
x2="38.228"
y1="18.746"
y2="34.097"
gradientUnits="userSpaceOnUse"
>
- <stop offset="0" stop-color="#138cdd" />
- <stop offset="1" stop-color="#0c7dd4" />
+ <stop offset="0" stop-color={isDark ? "#90caf9" : "#138cdd"} />
+ <stop offset="1" stop-color={isDark ? "#42a5f5" : "#0c7dd4"} />
</linearGradient>
<path
fill="url(#NqAl5bicO~9wmXV3Tvu1Rc)"
d="M48,28.373c0-5.317-4.31-9.627-9.627-9.627c-0.997,0-1.958,0.152-2.863,0.433 c-0.996,0.31-3.652,1.342-7.054,2.708c8.377,5.05,17.79,10.996,18.252,11.288C47.525,31.76,48,30.123,48,28.373z"
/>
<linearGradient
id="NqAl5bicO~9wmXV3Tvu1Rd"
x1="17.13"
x2="31.145"
y1="24.083"
y2="41.333"
gradientUnits="userSpaceOnUse"
>
- <stop offset="0" stop-color="#27a7ea" />
- <stop offset="1" stop-color="#1c94e3" />
+ <stop offset="0" stop-color={isDark ? "#81d4fa" : "#27a7ea"} />
+ <stop offset="1" stop-color={isDark ? "#4fc3f7" : "#1c94e3"} />
</linearGradient>
<path
fill="url(#NqAl5bicO~9wmXV3Tvu1Rd)"
d="M46.709,33.175c-0.463-0.292-9.875-6.238-18.252-11.288 C18.495,25.885,2.111,32.748,2.05,32.774C2.467,33.388,5.627,38,11.904,38c5.03,0,16.176,0,26.354,0 C43.669,38,46.148,34.146,46.709,33.175z"
/>
</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.
| const Icon = (props) => ( | |
| <svg | |
| xmlns="http://www.w3.org/2000/svg" | |
| viewBox="0 0 48 48" | |
| width="24px" | |
| height="24px" | |
| > | |
| <linearGradient | |
| id="NqAl5bicO~9wmXV3Tvu1Ra" | |
| x1="24.5" | |
| x2="24.5" | |
| y1="7.032" | |
| y2="22.852" | |
| gradientUnits="userSpaceOnUse" | |
| > | |
| <stop offset="0" stop-color="#0571bf" /> | |
| <stop offset="1" stop-color="#0268ba" /> | |
| </linearGradient> | |
| <path | |
| fill="url(#NqAl5bicO~9wmXV3Tvu1Ra)" | |
| d="M24.5,7C16.492,7,10,13.492,10,21.5S16.492,36,24.5,36S39,29.508,39,21.5S32.508,7,24.5,7 L24.5,7z" | |
| /> | |
| <linearGradient | |
| id="NqAl5bicO~9wmXV3Tvu1Rb" | |
| x1="14.228" | |
| x2="14.228" | |
| y1="14.219" | |
| y2="32.761" | |
| gradientUnits="userSpaceOnUse" | |
| > | |
| <stop offset="0" stop-color="#1684da" /> | |
| <stop offset="1" stop-color="#107cd4" /> | |
| </linearGradient> | |
| <path | |
| fill="url(#NqAl5bicO~9wmXV3Tvu1Rb)" | |
| d="M16.155,14.972c-1.32-0.505-2.753-0.781-4.25-0.781C5.33,14.191,0,19.521,0,26.096 c0,2.476,0.757,4.774,2.05,6.678c0.061-0.026,16.445-6.889,26.406-10.888C22.952,18.568,17.903,15.641,16.155,14.972z" | |
| /> | |
| <linearGradient | |
| id="NqAl5bicO~9wmXV3Tvu1Rc" | |
| x1="38.228" | |
| x2="38.228" | |
| y1="18.746" | |
| y2="34.097" | |
| gradientUnits="userSpaceOnUse" | |
| > | |
| <stop offset="0" stop-color="#138cdd" /> | |
| <stop offset="1" stop-color="#0c7dd4" /> | |
| </linearGradient> | |
| <path | |
| fill="url(#NqAl5bicO~9wmXV3Tvu1Rc)" | |
| d="M48,28.373c0-5.317-4.31-9.627-9.627-9.627c-0.997,0-1.958,0.152-2.863,0.433 c-0.996,0.31-3.652,1.342-7.054,2.708c8.377,5.05,17.79,10.996,18.252,11.288C47.525,31.76,48,30.123,48,28.373z" | |
| /> | |
| <linearGradient | |
| id="NqAl5bicO~9wmXV3Tvu1Rd" | |
| x1="17.13" | |
| x2="31.145" | |
| y1="24.083" | |
| y2="41.333" | |
| gradientUnits="userSpaceOnUse" | |
| > | |
| <stop offset="0" stop-color="#27a7ea" /> | |
| <stop offset="1" stop-color="#1c94e3" /> | |
| </linearGradient> | |
| <path | |
| fill="url(#NqAl5bicO~9wmXV3Tvu1Rd)" | |
| d="M46.709,33.175c-0.463-0.292-9.875-6.238-18.252-11.288 C18.495,25.885,2.111,32.748,2.05,32.774C2.467,33.388,5.627,38,11.904,38c5.03,0,16.176,0,26.354,0 C43.669,38,46.148,34.146,46.709,33.175z" | |
| /> | |
| </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} | |
| > | |
| <linearGradient | |
| id="NqAl5bicO~9wmXV3Tvu1Ra" | |
| x1="24.5" | |
| x2="24.5" | |
| y1="7.032" | |
| y2="22.852" | |
| gradientUnits="userSpaceOnUse" | |
| > | |
| <stop offset="0" stop-color={isDark ? "#42a5f5" : "#0571bf"} /> | |
| <stop offset="1" stop-color={isDark ? "#1976d2" : "#0268ba"} /> | |
| </linearGradient> | |
| <path | |
| fill="url(#NqAl5bicO~9wmXV3Tvu1Ra)" | |
| d="M24.5,7C16.492,7,10,13.492,10,21.5S16.492,36,24.5,36S39,29.508,39,21.5S32.508,7,24.5,7 L24.5,7z" | |
| /> | |
| <linearGradient | |
| id="NqAl5bicO~9wmXV3Tvu1Rb" | |
| x1="14.228" | |
| x2="14.228" | |
| y1="14.219" | |
| y2="32.761" | |
| gradientUnits="userSpaceOnUse" | |
| > | |
| <stop offset="0" stop-color={isDark ? "#64b5f6" : "#1684da"} /> | |
| <stop offset="1" stop-color={isDark ? "#2196f3" : "#107cd4"} /> | |
| </linearGradient> | |
| <path | |
| fill="url(#NqAl5bicO~9wmXV3Tvu1Rb)" | |
| d="M16.155,14.972c-1.32-0.505-2.753-0.781-4.25-0.781C5.33,14.191,0,19.521,0,26.096 c0,2.476,0.757,4.774,2.05,6.678c0.061-0.026,16.445-6.889,26.406-10.888C22.952,18.568,17.903,15.641,16.155,14.972z" | |
| /> | |
| <linearGradient | |
| id="NqAl5bicO~9wmXV3Tvu1Rc" | |
| x1="38.228" | |
| x2="38.228" | |
| y1="18.746" | |
| y2="34.097" | |
| gradientUnits="userSpaceOnUse" | |
| > | |
| <stop offset="0" stop-color={isDark ? "#90caf9" : "#138cdd"} /> | |
| <stop offset="1" stop-color={isDark ? "#42a5f5" : "#0c7dd4"} /> | |
| </linearGradient> | |
| <path | |
| fill="url(#NqAl5bicO~9wmXV3Tvu1Rc)" | |
| d="M48,28.373c0-5.317-4.31-9.627-9.627-9.627c-0.997,0-1.958,0.152-2.863,0.433 c-0.996,0.31-3.652,1.342-7.054,2.708c8.377,5.05,17.79,10.996,18.252,11.288C47.525,31.76,48,30.123,48,28.373z" | |
| /> | |
| <linearGradient | |
| id="NqAl5bicO~9wmXV3Tvu1Rd" | |
| x1="17.13" | |
| x2="31.145" | |
| y1="24.083" | |
| y2="41.333" | |
| gradientUnits="userSpaceOnUse" | |
| > | |
| <stop offset="0" stop-color={isDark ? "#81d4fa" : "#27a7ea"} /> | |
| <stop offset="1" stop-color={isDark ? "#4fc3f7" : "#1c94e3"} /> | |
| </linearGradient> | |
| <path | |
| fill="url(#NqAl5bicO~9wmXV3Tvu1Rd)" | |
| d="M46.709,33.175c-0.463-0.292-9.875-6.238-18.252-11.288 C18.495,25.885,2.111,32.748,2.05,32.774C2.467,33.388,5.627,38,11.904,38c5.03,0,16.176,0,26.354,0 C43.669,38,46.148,34.146,46.709,33.175z" | |
| /> | |
| </svg> | |
| ); | |
| export default Icon; |
| 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; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add dark-mode support via isDark and forward neutral fills
Guidelines require the SVG component to support light/dark via an isDark prop. Only the neutral gray segments need toggling; keep brand greens intact.
-const Icon = (props) => (
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" {...props}>
- <path
- fill="#73787F"
+const Icon = ({ isDark = false, ...props }) => {
+ const neutral = isDark ? "#E5E7EB" : "#73787F";
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" {...props}>
+ <path
+ fill={neutral}
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"
+ />
+ <path
+ fill={neutral}
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"
+ />
+ <path fill={neutral} d="M53.3,64.8v-10.5l4.8-4.6v15.1H53.3z" />
+ <path
+ fill={neutral}
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"
- />
+ /* Keep this one brand-neutral too */
+ fill={neutral}
+ />
<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>
-);
+ </svg>
+ );
+};Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/frontend/src/icons/wrike/wrike.jsx lines 1-24, the SVG doesn't accept an
isDark prop or toggle its neutral gray fills; update the component to accept an
isDark prop (default false), compute a neutralColor = isDark ?
<dark-neutral-color> : <light-neutral-color>, replace all fills that are
currently "#73787F" with neutralColor, keep the green fills (#00A551, #A5CD39)
unchanged, and ensure you forward the remaining props to the <svg> (excluding
isDark) so the icon behaves normally in both light and dark modes.
|
@Uday-sidagana can you fix the conflicts? |
github-actions
Bot
added
enhancement
github-actions
Bot
added
enhancement
github-actions
Bot
added
enhancement
|
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
github-actions
Bot
added
enhancement
|
@edwinjosechittilappilly fixing format |
github-actions
Bot
added
enhancement
github-actions
Bot
added
enhancement
|
|
@Uday-sidagana @abhishekpatil4 can we close this PR if this is redundant? |
|
Closing this redundant. |
2 participants
/src/backend/base/langflow/base/composio/composio_base.py:Updated Composio component to accept different Auth modes (
API-KEY,BEARER,BASIC) and custom OAuth2 creds for components with no Composio default Auth App.Added new components:
Airtable,Asana,Attio,Calendly,Contentful,Discord,Figma,Google Docs,Google Sheets,Klaviyo,Miro,Notion,OneDrive,Salesforce,Wrikefrontend:
/src/frontend/src/iconsand/src/frontend/src/icons/lazyIconImports.tsbackend:
/src/backend/base/langflow/components/composioSummary by CodeRabbit
New Features
Bug Fixes