feat: integrate helicone as a bundle and as an agent provider#10433
feat: integrate helicone as a bundle and as an agent provider#10433H2Shami wants to merge 4 commits into
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 Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds Helicone bundle: documentation and sidebar entry, frontend SVG icon and lazy import, dropdown search memoization, backend provider registration and model metadata, a new HeliconeComponent with model discovery and LangChain ChatOpenAI build logic, and lazy-loading component exports. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Frontend
participant HeliconeComponent
participant HeliconeAPI
participant LangChain
User->>Frontend: select Helicone bundle
Frontend->>HeliconeComponent: request model options
HeliconeComponent->>HeliconeAPI: fetch_models()
HeliconeAPI-->>HeliconeComponent: registry response (varied shapes)
HeliconeComponent->>HeliconeComponent: normalize models, update_build_config()
HeliconeComponent-->>Frontend: return options + metadata
User->>Frontend: select model & provide params
Frontend->>HeliconeComponent: build_model()
HeliconeComponent->>HeliconeComponent: validate inputs
HeliconeComponent->>LangChain: instantiate ChatOpenAI via Helicone gateway
LangChain-->>HeliconeComponent: LanguageModel instance ready
HeliconeComponent-->>Frontend: model ready for use
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Areas to focus review on:
Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touchesImportant Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional. ❌ Failed checks (1 error, 2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
H2Shami
force-pushed
the
helicone-integration
branch
from
4580e5c to
5e273bb
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
docs/docs/Components/bundles-helicone.mdx (1)
1-36: LGTM! Documentation is well-structured.The documentation follows Docusaurus best practices with proper front matter, clear headings in sentence case, and a well-organized parameters table. The external link to Helicone's documentation is helpful for users.
Consider adding a code example showing how to use the Helicone component in a flow, similar to other bundle documentation pages. This would help users get started more quickly.
src/lfx/src/lfx/base/models/model_input_constants.py (1)
337-337: Consider deriving MODEL_PROVIDERS_LIST dynamically.The hardcoded list
["Anthropic", "Google Generative AI", "Helicone", "OpenAI"]could fall out of sync when providers are added or whenis_activeflags change. Consider deriving it fromACTIVE_MODEL_PROVIDERS_DICT.keys()instead, or documenting why this specific subset is manually maintained.Apply this diff to derive the list dynamically:
-MODEL_PROVIDERS_LIST = ["Anthropic", "Google Generative AI", "Helicone", "OpenAI"] +MODEL_PROVIDERS_LIST = list(ACTIVE_MODEL_PROVIDERS_DICT.keys())If the order matters, you can sort it:
-MODEL_PROVIDERS_LIST = ["Anthropic", "Google Generative AI", "Helicone", "OpenAI"] +MODEL_PROVIDERS_LIST = sorted(ACTIVE_MODEL_PROVIDERS_DICT.keys())src/lfx/src/lfx/components/helicone/helicone.py (2)
184-184: Simplify the conditional attribute access.The expression
build_config.get("model_name") if hasattr(build_config, "get") else build_config["model_name"]is overly defensive. Sincebuild_configis typed asdict, it will always have agetmethod. The fallback to dictionary indexing could still raiseKeyErrorif "model_name" is missing.Simplify to:
-model_cfg = build_config.get("model_name") if hasattr(build_config, "get") else build_config["model_name"] +model_cfg = build_config["model_name"]This will raise a clear
KeyErrorif the key is missing, which is appropriate since "model_name" should always be present in the build config for this component.
262-262: Consider simplifying the API key handling.The expression
SecretStr(self.api_key).get_secret_value()wraps the API key inSecretStrand immediately extracts it. Sinceself.api_keycomes from aSecretStrInputthat validates to a string (see line 26 and the SecretStrInput definition), you can pass it directly.Simplify to:
-"openai_api_key": SecretStr(self.api_key).get_secret_value(), +"openai_api_key": self.api_key,This assumes
ChatOpenAIaccepts a plain string foropenai_api_key, which is standard. IfChatOpenAIspecifically requires aSecretStrobject, the current code should wrap without callingget_secret_value():-"openai_api_key": SecretStr(self.api_key).get_secret_value(), +"openai_api_key": SecretStr(self.api_key),
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/frontend/src/icons/Helicone/helicone.svgis excluded by!**/*.svg
📒 Files selected for processing (11)
docs/docs/Components/bundles-helicone.mdx(1 hunks)docs/sidebars.js(1 hunks)src/frontend/src/components/core/dropdownComponent/index.tsx(2 hunks)src/frontend/src/icons/Helicone/HeliconeIcon.jsx(1 hunks)src/frontend/src/icons/Helicone/index.tsx(1 hunks)src/frontend/src/icons/lazyIconImports.ts(1 hunks)src/frontend/src/utils/styleUtils.ts(1 hunks)src/lfx/src/lfx/base/models/model_input_constants.py(4 hunks)src/lfx/src/lfx/components/__init__.py(3 hunks)src/lfx/src/lfx/components/helicone/__init__.py(1 hunks)src/lfx/src/lfx/components/helicone/helicone.py(1 hunks)
🧰 Additional context used
📓 Path-based instructions (11)
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/Helicone/HeliconeIcon.jsxsrc/frontend/src/icons/lazyIconImports.tssrc/frontend/src/components/core/dropdownComponent/index.tsxsrc/frontend/src/icons/Helicone/index.tsxsrc/frontend/src/utils/styleUtils.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/Helicone/HeliconeIcon.jsxsrc/frontend/src/icons/lazyIconImports.tssrc/frontend/src/icons/Helicone/index.tsx
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/Helicone/HeliconeIcon.jsxsrc/frontend/src/icons/Helicone/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/frontend/src/components/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
All components should be styled using Tailwind CSS utility classes.
Files:
src/frontend/src/components/core/dropdownComponent/index.tsx
src/frontend/src/@(components|hooks)/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
Implement dark mode support in components and hooks where needed.
Files:
src/frontend/src/components/core/dropdownComponent/index.tsx
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/Helicone/index.tsx
src/frontend/src/utils/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
All utility functions should be placed in the utils directory.
Files:
src/frontend/src/utils/styleUtils.ts
docs/sidebars.js
📄 CodeRabbit inference engine (.cursor/rules/docs_development.mdc)
Keep sidebars.js updated to include new/changed docs sections and items using Docusaurus category structure
Files:
docs/sidebars.js
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (.cursor/rules/docs_development.mdc)
docs/**/*.{md,mdx}: All Markdown/MDX pages must start with front matter including at least title and description; include sidebar_position for docs pages when applicable
Code blocks must specify a language and may include a title (```lang title="…")
Use sentence case for headings and keep paragraphs short and scannable
Write in second person, present tense, with a professional but approachable tone
Use inline code with backticks for code terms; use bold for UI elements and italics for emphasis; keep lists in parallel structure
Ensure internal links are functional and navigation works (update cross-references as needed)
Verify all code examples in docs and blog actually run as shown
Use correct terminology capitalization: Langflow, Component, Flow, API, JSON
Reference images with absolute paths under /img/... and provide descriptive alt text
Files:
docs/docs/Components/bundles-helicone.mdx
docs/docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (.cursor/rules/docs_development.mdc)
Use Docusaurus admonitions (:::+tip|warning|danger) instead of custom callouts in docs pages
Files:
docs/docs/Components/bundles-helicone.mdx
🧠 Learnings (6)
📚 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/Helicone/HeliconeIcon.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/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
📚 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/Helicone/index.tsx
📚 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/Helicone/index.tsx
📚 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/Helicone/index.tsx
📚 Learning: 2025-09-30T00:09:51.631Z
Learnt from: CR
PR: langflow-ai/langflow#0
File: .cursor/rules/docs_development.mdc:0-0
Timestamp: 2025-09-30T00:09:51.631Z
Learning: Applies to docs/sidebars.js : Keep sidebars.js updated to include new/changed docs sections and items using Docusaurus category structure
Applied to files:
docs/sidebars.js
🧬 Code graph analysis (4)
src/lfx/src/lfx/base/models/model_input_constants.py (1)
src/lfx/src/lfx/components/helicone/helicone.py (1)
HeliconeComponent(14-270)
src/frontend/src/icons/Helicone/index.tsx (1)
src/frontend/src/icons/Helicone/HeliconeIcon.jsx (1)
SvgHelicone(1-81)
src/lfx/src/lfx/components/helicone/__init__.py (1)
src/lfx/src/lfx/components/helicone/helicone.py (1)
HeliconeComponent(14-270)
src/lfx/src/lfx/components/helicone/helicone.py (3)
src/lfx/src/lfx/base/models/model.py (1)
LCModelComponent(25-375)src/lfx/src/lfx/inputs/inputs.py (4)
DropdownInput(465-490)IntInput(344-376)SecretStrInput(286-341)SliderInput(642-643)src/lfx/src/lfx/custom/custom_component/component.py (2)
get_base_inputs(167-170)log(1480-1497)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (22)
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 13/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 4/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 12/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 11/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 9/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 2/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 7/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 10/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 8/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 3/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 6/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 5/13
- GitHub Check: Run Frontend Tests / Playwright Tests - Shard 1/13
- GitHub Check: Test Docker Images / Test docker images
- GitHub Check: Test Docs Build / Test Docs Build
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 2
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 4
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 3
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 5
- GitHub Check: Run Backend Tests / Integration Tests - Python 3.10
- GitHub Check: Run Backend Tests / Unit Tests - Python 3.10 - Group 1
- GitHub Check: Test Starter Templates
🔇 Additional comments (15)
src/frontend/src/utils/styleUtils.ts (1)
285-285: LGTM! Helicone bundle entry added correctly.The new Helicone entry follows the established pattern and is correctly positioned in alphabetical order.
src/frontend/src/components/core/dropdownComponent/index.tsx (2)
101-106: LGTM! Fuse search properly memoized.The memoization of Fuse initialization is a good performance optimization. The approach of wrapping string options in
{ value }objects to enable Fuse's key-based indexing is correct, and the comments clearly explain the rationale.
144-146: LGTM! Search results correctly mapped.The mapping from
res.item.valueback to raw string values is consistent with the{ value }wrapper structure used in the memoized Fuse setup.docs/sidebars.js (1)
319-319: LGTM! Sidebar entry added correctly.The Helicone documentation entry is properly positioned in alphabetical order and follows the established Docusaurus structure.
Based on learnings
src/frontend/src/icons/lazyIconImports.ts (1)
238-241: LGTM! Helicone icon lazy import added correctly.The lazy import entry follows the established pattern and is correctly positioned in alphabetical order. The mapping to
mod.HeliconeIconaligns with the export fromsrc/frontend/src/icons/Helicone/index.tsx.Based on learnings
src/frontend/src/icons/Helicone/index.tsx (1)
1-10: LGTM! Icon wrapper follows established pattern.The
HeliconeIconforwardRef wrapper correctly follows the codebase convention of usingReact.PropsWithChildren<{}>and properly forwards the ref and props to the underlyingSvgHeliconecomponent.Based on learnings
src/lfx/src/lfx/components/__init__.py (1)
50-50: LGTM! Helicone component properly registered.The helicone component is correctly added to:
- TYPE_CHECKING imports for type hints
_dynamic_importsmapping for lazy loading__all__for public module exportsAll three additions follow the established pattern and are positioned in alphabetical order.
Also applies to: 153-153, 284-284
src/lfx/src/lfx/components/helicone/__init__.py (1)
1-32: LGTM! Clean lazy-loading implementation.The module correctly implements lazy attribute-based importing following the established pattern. The error handling, caching, and
__dir__implementation are all appropriate.src/lfx/src/lfx/base/models/model_input_constants.py (3)
175-183: LGTM! Helicone helper follows the established pattern.The helper function correctly follows the same pattern as other provider helpers (OpenAI, Anthropic, etc.) with appropriate error messaging.
43-46: Change verified as safe—no component breakage detected.All components with
tool_model_enabledhave explicitvalue=overrides in their BoolInput definitions, so the default change in model_input_constants.py (line 46) has no impact on existing workflows:
- Ollama: explicitly
value=True(preserved)- Nvidia, Groq, Google, Anthropic: explicitly
value=False(aligned with new default)Tests already expect
Falsevalues, confirming alignment with this change. Components dynamically read the flag duringupdate_build_config, maintaining full functionality.
309-322: Reconsider whether Helicone should be markedis_active=Trueby default for immediate rollout.The data shows providers are roughly split: 4 with
is_active=True(OpenAI, Anthropic, Google Generative AI, and Helicone) and 5 withis_active=False(Azure, Groq, NVIDIA, Bedrock, SambaNova). While the "most are False" claim is only narrowly supported, the underlying concern is valid. Helicone is an observability component (wrapped in try-except), not a model provider. Settingis_active=Truemeans it will be immediately available to all users. Confirm that Helicone's adoption level and maturity warrant immediate activation, or consider marking itis_active=Falsefor a staged rollout phase.src/lfx/src/lfx/components/helicone/helicone.py (4)
1-44: LGTM! Component definition follows established patterns.The component correctly:
- Inherits from
LCModelComponent- Defines appropriate metadata (display_name, description, icon)
- Configures inputs with refresh capabilities for dynamic model loading
- Uses base inputs from the parent class
The use of
pydantic.v1.SecretStris consistent with LangChain's current pydantic v1 dependency.
46-178: Robust model fetching with excellent fallback handling.The implementation demonstrates strong defensive programming:
- Handles multiple API response shapes gracefully
- Uses depth-limited recursion to avoid infinite loops (MAX_NESTED_DEPTH=3)
- Normalizes model metadata across various field naming conventions
- Provides rich metadata for UI tooltips (context length, modalities, tool support)
- Logs errors without crashing
The synchronous
httpx.getcall is acceptable here since this is triggered by explicit user action (refresh button) rather than in a request path.
180-249: Well-structured config update with defensive error handling.The method correctly:
- Fetches models dynamically
- Builds rich metadata for UI rendering (tooltips, options_metadata)
- Preserves the current value when valid
- Fails gracefully without breaking the UI
The defensive
try/exceptat lines 245-248 ensures stability even when model fetching fails.
251-270: Clean model building with appropriate validation.The method correctly:
- Validates required inputs (API key and model selection)
- Configures the ChatOpenAI model to use Helicone's gateway
- Sets reasonable defaults (temperature 0.7)
- Conditionally includes max_tokens
| const SvgHelicone = (props) => ( | ||
| <svg | ||
| width="1000" | ||
| height="1000" | ||
| viewBox="0 0 1000 1000" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| {...props} | ||
| > | ||
| <path | ||
| d="M512.259 82.0808C503.242 78.136 492.988 78.136 483.971 82.0808L75.8928 260.615L403.33 403.869L498.115 445.337L807.242 310.094L920.337 260.615L512.259 82.0808Z" | ||
| fill="#F8FEFF" | ||
| /> | ||
| <path | ||
| d="M75.8928 260.615V641.369L403.33 403.869L75.8928 260.615Z" | ||
| fill="#F8FEFF" | ||
| /> | ||
| <path | ||
| d="M807.242 310.094L498.115 445.337V486.806V784.623L807.242 310.094Z" | ||
| fill="#F8FEFF" | ||
| /> | ||
| <path | ||
| d="M498.115 784.623V924.107L592.361 884.557L920.337 358.631V260.615L807.242 310.094L498.115 784.623Z" | ||
| fill="#F8FEFF" | ||
| /> | ||
| <path | ||
| d="M498.115 924.107V784.623V486.806L113.591 762.744L498.115 924.107Z" | ||
| fill="#F8FEFF" | ||
| /> | ||
| <path | ||
| d="M75.8928 641.369V723.464C75.8928 737.677 84.4199 750.503 97.5257 756.003L113.591 762.744L498.115 486.806V445.337L403.33 403.869L75.8928 641.369Z" | ||
| fill="#F8FEFF" | ||
| /> | ||
| <path | ||
| d="M592.361 884.557L898.704 756.003C911.81 750.503 920.337 737.677 920.337 723.464V358.631L592.361 884.557Z" | ||
| fill="#F8FEFF" | ||
| /> | ||
| <path | ||
| d="M75.8928 260.615L483.971 82.0808C492.988 78.136 503.242 78.136 512.259 82.0808L920.337 260.615M75.8928 260.615V641.369M75.8928 260.615L403.33 403.869M920.337 260.615L807.242 310.094M920.337 260.615V358.631M498.115 924.107V784.623M498.115 924.107L592.361 884.557M498.115 924.107L113.591 762.744M498.115 445.337L807.242 310.094M498.115 445.337L403.33 403.869M498.115 445.337V486.806M498.115 784.623L807.242 310.094M498.115 784.623V486.806M592.361 884.557L898.704 756.003C911.81 750.503 920.337 737.677 920.337 723.464V358.631M592.361 884.557L920.337 358.631M75.8928 641.369V723.464C75.8928 737.677 84.4199 750.503 97.5257 756.003L113.591 762.744M75.8928 641.369L403.33 403.869M113.591 762.744L498.115 486.806" | ||
| stroke="#F8FEFF" | ||
| stroke-width="30.1587" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| /> | ||
| <path | ||
| d="M505.498 116.609C501.993 115.076 498.007 115.076 494.502 116.609L115.919 282.24L413.778 412.553L500 450.275L781.203 327.249L884.081 282.24L505.498 116.609Z" | ||
| fill="#0CA5E9" | ||
| /> | ||
| <path | ||
| d="M115.919 282.24V628.599L413.778 412.553L115.919 282.24Z" | ||
| fill="#0CA5E9" | ||
| /> | ||
| <path | ||
| d="M781.203 327.249L500 450.275V487.997V758.912L781.203 327.249Z" | ||
| fill="#0CA5E9" | ||
| /> | ||
| <path | ||
| d="M500 758.912V885.796L585.732 849.819L884.081 371.401V282.24L781.203 327.249L500 758.912Z" | ||
| fill="#C2FCF6" | ||
| /> | ||
| <path | ||
| d="M500 885.796V758.912V487.997L150.212 739.01L500 885.796Z" | ||
| fill="#F8FEFF" | ||
| /> | ||
| <path | ||
| d="M115.919 628.599V715.499C115.919 721.024 119.233 726.01 124.328 728.148L150.212 739.01L500 487.997V450.275L413.778 412.553L115.919 628.599Z" | ||
| fill="#F8FEFF" | ||
| /> | ||
| <path | ||
| d="M585.732 849.819L875.672 728.148C880.767 726.01 884.081 721.024 884.081 715.499V371.401L585.732 849.819Z" | ||
| fill="#F8FEFF" | ||
| /> | ||
| <path | ||
| d="M115.919 282.24L494.502 116.609C498.007 115.076 501.993 115.076 505.498 116.609L884.081 282.24M115.919 282.24V628.599M115.919 282.24L413.778 412.553M884.081 282.24L781.203 327.249M884.081 282.24V371.401M500 885.796V758.912M500 885.796L585.732 849.819M500 885.796L150.212 739.01M500 450.275L781.203 327.249M500 450.275L413.778 412.553M500 450.275V487.997M500 758.912L781.203 327.249M500 758.912V487.997M585.732 849.819L875.672 728.148C880.767 726.01 884.081 721.024 884.081 715.499V371.401M585.732 849.819L884.081 371.401M115.919 628.599V715.499C115.919 721.024 119.233 726.01 124.328 728.148L150.212 739.01M115.919 628.599L413.778 412.553M150.212 739.01L500 487.997" | ||
| stroke="#1E1E1E" | ||
| stroke-width="27.4344" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| /> | ||
| </svg> | ||
| ); | ||
| export default SvgHelicone; |
There was a problem hiding this comment.
Missing isDark prop for theme support.
According to the coding guidelines, icon SVG components must use the isDark prop to support both light and dark mode. The current implementation does not incorporate theme-aware styling.
Consider adding the isDark prop and adjusting colors accordingly:
-const SvgHelicone = (props) => (
+const SvgHelicone = ({ isDark, ...props }) => (
<svg
width="1000"
height="1000"
viewBox="0 0 1000 1000"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M512.259 82.0808C503.242 78.136 492.988 78.136 483.971 82.0808L75.8928 260.615L403.33 403.869L498.115 445.337L807.242 310.094L920.337 260.615L512.259 82.0808Z"
- fill="#F8FEFF"
+ fill={isDark ? "#F8FEFF" : "#F8FEFF"}
/>
{/* Apply similar changes to other paths based on design requirements */}
</svg>
);As per coding guidelines
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/frontend/src/icons/Helicone/HeliconeIcon.jsx lines 1-82, the SVG
component lacks the isDark prop required for theme-aware icons; add isDark to
the component props (e.g., const SvgHelicone = ({ isDark = false, ...props }) =>
...) and replace hard-coded color literals with conditional color variables that
switch based on isDark (use the existing light-mode colors when isDark is false
and appropriate dark-mode fills/strokes when true), then apply those color
variables to each fill and stroke attribute and keep spreading ...props on the
svg element.
| const fuse = new Fuse(validOptions, { keys: ["name", "value"] }); | ||
| // Prepare Fuse for string-based search over option values. | ||
| // validOptions is a string[], so we index under a uniform `value` field. | ||
| const fuse = useMemo(() => { | ||
| const items = validOptions.map((v) => ({ value: v })); | ||
| return new Fuse(items, { keys: ["value"], threshold: 0.3 }); | ||
| }, [validOptions]); |
There was a problem hiding this comment.
made this change to give users more detailed information about a model in a tooltip
it'll fallback to displaying the model id for most providers
|
@coderabbitai help |
ChatThere are 3 ways to chat with CodeRabbit:
CodeRabbit commands
Other keywords and placeholders
Status, support, documentation and community
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
H2Shami
changed the title
github-actions
Bot
added
enhancement
edwinjosechittilappilly
requested review from
Copilot and
edwinjosechittilappilly
|
@H2Shami can you resovle the conflicts? |
There was a problem hiding this comment.
Pull request overview
This PR integrates Helicone as both a bundle and an agent provider, enabling Langflow users to access Helicone's AI routing and observability platform with unified access to multiple AI models from different providers.
Key Changes:
- Added a new
HeliconeComponentthat fetches available models from Helicone's public API and provides dynamic model selection with rich metadata - Integrated Helicone into the model providers list alongside Anthropic, Google Generative AI, and OpenAI
- Enhanced the frontend dropdown component to properly handle Fuse.js search with string arrays using
useMemofor better performance
Reviewed changes
Copilot reviewed 11 out of 13 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
src/lfx/src/lfx/components/helicone/helicone.py |
Core Helicone component implementation with model fetching, config updates, and ChatOpenAI integration |
src/lfx/src/lfx/components/helicone/__init__.py |
Dynamic import module for lazy loading of Helicone component |
src/lfx/src/lfx/components/__init__.py |
Registers Helicone module in the components package |
src/lfx/src/lfx/base/models/model_input_constants.py |
Adds Helicone to MODEL_PROVIDERS_DICT and MODEL_PROVIDERS_LIST; changes tool_model_enabled default to False |
src/frontend/src/utils/styleUtils.ts |
Adds Helicone to SIDEBAR_BUNDLES for UI navigation |
src/frontend/src/icons/lazyIconImports.ts |
Registers lazy loading for Helicone icon |
src/frontend/src/icons/Helicone/index.tsx |
React wrapper component for Helicone SVG icon |
src/frontend/src/icons/Helicone/helicone.svg |
SVG source file for Helicone brand icon |
src/frontend/src/icons/Helicone/HeliconeIcon.jsx |
JSX implementation of Helicone icon with SVG paths |
src/frontend/src/components/core/dropdownComponent/index.tsx |
Optimizes Fuse.js initialization with useMemo and proper string array handling |
docs/sidebars.js |
Adds Helicone documentation entry to bundles section |
docs/docs/Components/bundles-helicone.mdx |
Documentation page for Helicone bundle with parameters and usage guide |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| stroke-width="30.1587" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" |
There was a problem hiding this comment.
SVG attributes in JSX should use camelCase. Replace stroke-width with strokeWidth and stroke-linecap with strokeLinecap and stroke-linejoin with strokeLinejoin to follow React conventions.
| stroke-width="30.1587" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| strokeWidth="30.1587" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" |
| stroke-width="27.4344" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" |
There was a problem hiding this comment.
SVG attributes in JSX should use camelCase. Replace stroke-width with strokeWidth and stroke-linecap with strokeLinecap and stroke-linejoin with strokeLinejoin to follow React conventions.
| stroke-width="27.4344" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| strokeWidth="27.4344" | |
| strokeLinecap="round" | |
| strokeLinejoin="round" |
| > | ||
| <path | ||
| d="M512.259 82.0808C503.242 78.136 492.988 78.136 483.971 82.0808L75.8928 260.615L403.33 403.869L498.115 445.337L807.242 310.094L920.337 260.615L512.259 82.0808Z" | ||
| fill={isDark ? "#F8FEFF" : "#F8FEFF"} |
There was a problem hiding this comment.
The ternary operator isDark ? "#F8FEFF" : "#F8FEFF" always returns the same value. Either remove the ternary and use a static fill value, or provide different colors for dark and light modes.
| fill={isDark ? "#F8FEFF" : "#F8FEFF"} | |
| fill="#F8FEFF" |
| "icon": HeliconeComponent.icon, | ||
| "is_active": True, | ||
| } | ||
| except ImportError: |
There was a problem hiding this comment.
'except' clause does nothing but pass and there is no explanatory comment.
| # components can enable this dynamically when needed. | ||
| component_data.advanced = True | ||
| component_data.value = True | ||
| component_data.value = False |
There was a problem hiding this comment.
Has the scope of this been tested? Overall i definitely love this PR and the logic looks great, but im just worried this could cause backwards compat issues with existing users or there's any unintended side effects.
Can you give a thorough justification for the change?
There was a problem hiding this comment.
you are totally correct, this should not have been changed. thanks for catching
reverted this change and refreshed the component index
erichare
left a comment
erichare
left a comment
There was a problem hiding this comment.
Great PR but one comment that needs addressing before approval
|
Please also do resolve the merge conflicts with |
github-actions
Bot
added
enhancement
H2Shami
force-pushed
the
helicone-integration
branch
from
6cc45e8 to
8b10f71
Compare
github-actions
Bot
added
enhancement
github-actions
Bot
added
enhancement
H2Shami
force-pushed
the
helicone-integration
branch
from
47638be to
7571ded
Compare
|
hey @erichare! thanks for the review + positive feedback! I made the changes, can we get this bad boy in? |
github-actions
Bot
added
enhancement
github-actions
Bot
added
enhancement
Summary by CodeRabbit
New Features
Documentation