Add chatbot tab to help panel#240
Merged
apinkert merged 2 commits intoRedHatInsights:masterfrom Feb 19, 2026
Merged
Conversation
Summary by CodeRabbit
WalkthroughAdds a Virtual Assistant (VA) tab to HelpPanel: a new VAPanel component loads the remote VAEmbed via Scalprum, TabType and mapper updated, HelpPanel tab UI adjusted, a new i18n message added, and Cypress component tests and mocks extended to cover VA behavior and feature-flag gating. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User as User
participant UI as HelpPanel UI
participant Tabs as Tab Router
participant Scalprum as ScalprumComponent
participant VA as virtualAssistant (remote)
participant Spinner as Spinner
User->>UI: open HelpPanel / click "Virtual Assistant" tab
UI->>Tabs: select TabType.va
Tabs->>Scalprum: mount ScalprumComponent for VAEmbed
Scalprum->>Spinner: show loading fallback
Scalprum->>VA: request module "virtualAssistant#./VAEmbed"
alt module loads successfully
VA-->>Scalprum: return VAEmbed component
Scalprum-->>UI: render VAEmbed inside VAPanel
UI-->>User: display VA panel content
else module fails to load
VA-->>Scalprum: error
Scalprum-->>UI: render VAErrorElement (i18n message + console.error)
UI-->>User: display "virtual assistant not available" message
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Comment |
![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 (1)
src/components/HelpPanel/HelpPanelTabs/VAPanel.tsx (1)
8-10: Prefix unused prop with underscore to suppress lint warnings.The
setNewActionTitleprop is required by theSubTabPropsinterface but intentionally unused here. Prefixing with underscore signals this is intentional.Suggested fix
const VAPanel: React.FC<{ setNewActionTitle: (title: string) => void; -}> = () => { +}> = ({ setNewActionTitle: _setNewActionTitle }) => {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HelpPanel/HelpPanelTabs/VAPanel.tsx` around lines 8 - 10, The VAPanel component declares a required prop setNewActionTitle that is unused and triggers lint warnings; rename/prefix it with an underscore to indicate intentional non-use—e.g., update the prop name in the VAPanel props signature and/or the component parameter to _setNewActionTitle (referencing VAPanel and setNewActionTitle/SubTabProps) so the unused prop is accepted but lint ignores it.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/HelpPanel/HelpPanelTabs/VAPanel.tsx`:
- Line 24: The ErrorComponent prop in VAPanel is currently set to a JSX element
instance ("ErrorComponent: <Fragment />") which should be a component type that
accepts { error, errorInfo }; change it to a component type (e.g., use Fragment
without JSX or implement a small functional component) and ensure it renders
useful feedback (at least show error.message and/or errorInfo) instead of
silently swallowing failures; update the ErrorComponent assignment to reference
that component type so `@scalprum/react-core` can pass error props to it.
---
Nitpick comments:
In `@src/components/HelpPanel/HelpPanelTabs/VAPanel.tsx`:
- Around line 8-10: The VAPanel component declares a required prop
setNewActionTitle that is unused and triggers lint warnings; rename/prefix it
with an underscore to indicate intentional non-use—e.g., update the prop name in
the VAPanel props signature and/or the component parameter to _setNewActionTitle
(referencing VAPanel and setNewActionTitle/SubTabProps) so the unused prop is
accepted but lint ignores it.
There was a problem hiding this comment.
🧹 Nitpick comments (3)
src/components/HelpPanel/HelpPanelTabs/VAPanel.tsx (2)
10-26: Moveconsole.errorinto auseEffectto log only once on mount.The
console.errorcall in the render body will execute on every re-render, potentially spamming the console with duplicate messages if the parent component re-renders.♻️ Suggested fix
+import React, { useEffect } from 'react'; -import React from 'react'; import { Content, Spinner, Stack, StackItem } from '@patternfly/react-core'; ... const VAErrorElement: React.FC = () => { const intl = useIntl(); - // Log error on render - console.error('VA Panel: Virtual Assistant module failed to load'); + useEffect(() => { + console.error('VA Panel: Virtual Assistant module failed to load'); + }, []); return ( ... ); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HelpPanel/HelpPanelTabs/VAPanel.tsx` around lines 10 - 26, The console.error call inside the VAErrorElement render causes logging on every re-render; move it into a React effect so it logs only once on mount: in VAErrorElement (which uses useIntl and messages.virtualAssistantNotAvailable) remove the inline console.error and add a useEffect(() => { console.error('VA Panel: Virtual Assistant module failed to load'); }, []); (import or reference React.useEffect as needed) so the error is emitted once when the component mounts.
28-30: Unused propsetNewActionTitle.The prop is declared in the component's type signature but never used. Either remove it from the type if it's not needed, or implement the intended functionality.
♻️ Option 1: Remove unused prop
-const VAPanel: React.FC<{ - setNewActionTitle: (title: string) => void; -}> = () => { +const VAPanel: React.FC = () => {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HelpPanel/HelpPanelTabs/VAPanel.tsx` around lines 28 - 30, The VAPanel component type declares a prop setNewActionTitle that is never used; either remove this prop from VAPanel's React.FC type signature or implement its intended behavior where new action titles are set (e.g., call setNewActionTitle(...) from the handler that creates or updates an action). Locate the VAPanel declaration and either delete setNewActionTitle from the prop type object or wire the prop into the relevant function/handler inside VAPanel so the prop is consumed.cypress/component/HelpPanel.cy.tsx (1)
515-516: Outdated comment: ErrorComponent is no longer an empty Fragment.The comment states the ErrorComponent falls back to an "empty Fragment," but the actual implementation in
VAPanel.tsxusesVAErrorElementwhich renders a visible error message. Update the comment to reflect the current behavior.📝 Suggested fix
// Click on the Virtual Assistant tab - this will try to load the ScalprumComponent - // but will gracefully fall back to the ErrorComponent (empty Fragment) + // but will gracefully fall back to the VAErrorElement which displays an error message cy.get('[data-ouia-component-id="help-panel-subtab-va"]').click(); - // Since the ScalprumComponent will fail to load but has ErrorComponent: <Fragment /> - // we just verify that the tab switching worked and no crash occurred + // Verify that the tab switching worked and no crash occurred cy.get('[data-ouia-component-id="help-panel-subtab-va"]').should('have.attr', 'aria-selected', 'true');🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@cypress/component/HelpPanel.cy.tsx` around lines 515 - 516, The comment in HelpPanel.cy.tsx incorrectly says the ScalprumComponent's ErrorComponent is an "empty Fragment"; update that comment to reflect the current implementation in VAPanel.tsx where ErrorComponent renders a visible error via VAErrorElement (i.e., state that the ErrorComponent displays a visible error message rather than being an empty Fragment), and keep the rest of the note about verifying tab switching and no crash intact; reference ScalprumComponent, ErrorComponent, VAPanel.tsx, and VAErrorElement when editing the comment.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@src/components/HelpPanel/HelpPanelTabs/VAPanel.tsx`:
- Line 44: The ErrorComponent prop is being passed an element instance instead
of a component type and the Scalprum error details are not being captured;
change the prop value from "ErrorComponent: <VAErrorElement />" to
"ErrorComponent: VAErrorElement" and update the VAErrorElement component to
accept the expected props signature ({ error, errorInfo }) and inside
VAErrorElement capture and log the provided error and errorInfo as well as any
Scalprum-specific error details (e.g., from the errorInfo or Scalprum context)
so the full error payload is preserved and emitted to your logging mechanism.
---
Nitpick comments:
In `@cypress/component/HelpPanel.cy.tsx`:
- Around line 515-516: The comment in HelpPanel.cy.tsx incorrectly says the
ScalprumComponent's ErrorComponent is an "empty Fragment"; update that comment
to reflect the current implementation in VAPanel.tsx where ErrorComponent
renders a visible error via VAErrorElement (i.e., state that the ErrorComponent
displays a visible error message rather than being an empty Fragment), and keep
the rest of the note about verifying tab switching and no crash intact;
reference ScalprumComponent, ErrorComponent, VAPanel.tsx, and VAErrorElement
when editing the comment.
In `@src/components/HelpPanel/HelpPanelTabs/VAPanel.tsx`:
- Around line 10-26: The console.error call inside the VAErrorElement render
causes logging on every re-render; move it into a React effect so it logs only
once on mount: in VAErrorElement (which uses useIntl and
messages.virtualAssistantNotAvailable) remove the inline console.error and add a
useEffect(() => { console.error('VA Panel: Virtual Assistant module failed to
load'); }, []); (import or reference React.useEffect as needed) so the error is
emitted once when the component mounts.
- Around line 28-30: The VAPanel component type declares a prop
setNewActionTitle that is never used; either remove this prop from VAPanel's
React.FC type signature or implement its intended behavior where new action
titles are set (e.g., call setNewActionTitle(...) from the handler that creates
or updates an action). Locate the VAPanel declaration and either delete
setNewActionTitle from the prop type object or wire the prop into the relevant
function/handler inside VAPanel so the prop is consumed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
For RHCLOUD-42925. If you want to mess with this branch, you need to comment out the feature flag,
platform.chrome.help-panel_chatbotinHelpPanelCustomTabs.tsx. This PR adds the virtual assistant tab that consumes the embeddable VA component exposed in astro-virtual-assistant-frontend.Screen.Recording.2026-02-19.at.11.26.26.AM.mov