Skip to content

Conversation

@debsmita1
Copy link
Member

@debsmita1 debsmita1 commented Dec 23, 2025

Hey, I just made a Pull Request!

Resolves:
Part of https://issues.redhat.com/browse/RHIDP-9381

Solution description:

  • This PR introduces chatbot display modes for the Lightspeed plugin:
    - Overlay - Chatbot appears as a floating overlay
    - Docked - Chatbot docks to the side of the window
    - Fullscreen - Chatbot expands to full screen with a dedicated route, appending the active conversation ID to the URL (if one exists)
  • Adds drawer state management utilities that enable seamless integration with ApplicationDrawer in RHDH
    - QuickstartDrawerStateExposer - Component to expose partial drawer state, which can be consumed by the ApplicationDrawer in RHDH (feat: add new drawer mount points rhdh#3947)
    - Separated Drawer content from the Drawer container for better reusability
  • Lightspeed will now be accessed via a floating action button
  • Updated the QuickStarts plugin to follow the same
  • TODO: persist the input text message & attached files when switching modes

GIF:
On rhdh-plugins

Screen.Recording.2026-01-09.at.11.56.25.PM.mov

With active conversation switching to Full-screen mode

Screen.Recording.2026-01-09.at.11.58.05.PM.mov

on RHDH with Quickstarts drawer

Screen.Recording.2026-01-10.at.12.05.32.AM.mov

✔️ Checklist

  • A changeset describing the change and affected packages. (more info)
  • Added or Updated documentation
  • Tests for new functionality and regression tests for bug fixes
  • Screenshots attached (for UI changes)

@rhdh-gh-app
Copy link

rhdh-gh-app bot commented Dec 23, 2025

Important

This PR includes changes that affect public-facing API. Please ensure you are adding/updating documentation for new features or behavior.

Changed Packages

Package Name Package Path Changeset Bump Current Version
@red-hat-developer-hub/backstage-plugin-global-floating-action-button workspaces/global-floating-action-button/plugins/global-floating-action-button patch v1.7.0
app workspaces/lightspeed/packages/app none v0.0.0
@red-hat-developer-hub/backstage-plugin-lightspeed workspaces/lightspeed/plugins/lightspeed minor v1.1.1
@red-hat-developer-hub/backstage-plugin-quickstart workspaces/quickstart/plugins/quickstart patch v1.8.0

@debsmita1 debsmita1 force-pushed the add-display-modes branch 14 times, most recently from 5165e8f to b9a69af Compare December 30, 2025 07:56
@debsmita1 debsmita1 changed the title [WIP]: feat(lightspeed): Add Developer Lightspeed Chat Popup/Button feat(lightspeed): Add Developer Lightspeed Chat Popup/Button Dec 30, 2025
Copy link
Contributor

@HusneShabbir HusneShabbir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@debsmita1 Thanks for the PR — the functionality works as expected. I have a few observations:

  1. The placeholder text and the alert message below is not in sync with the Figma design.

  2. In the chat history sidebar, the New Chat and Close buttons are swapped (for overlay & dock to window modes). The current behavior seems ideal, but it differs from what’s shown in Figma.

  3. In both overlay and dock-to-window display modes, pinned chats are listed as collapsible in the Figma design, which appears to be missing in this PR.

  4. Tests are failing because the Lightspeed plugin is not present in the navigation sidebar. This might require minor tweaks in the existing tests. /cc @jrichter1

Please take a look and let me know your thoughts.

@HusneShabbir
Copy link
Contributor

HusneShabbir commented Jan 6, 2026

@debsmita1 can you please merge PR debsmita1#3?
With those changes in place, I’m expecting the tests to pass.
Screenshot 2026-01-06 at 2 27 29 PM

@debsmita1
Copy link
Member Author

@HusneShabbir

@debsmita1 Thanks for the PR — the functionality works as expected. I have a few observations:

  1. The placeholder text and the alert message below is not in sync with the Figma design

Could you share a screenshot ?

  1. In the chat history sidebar, the New Chat and Close buttons are swapped (for overlay & dock to window modes). The current behavior seems ideal, but it differs from what’s shown in Figma.

As discussed in the UX call, this is a design inconsistency. We should keep the position of the “New Chat” and “Close” buttons the same in every mode

  1. In both overlay and dock-to-window display modes, pinned chats are listed as collapsible in the Figma design, which appears to be missing in this PR.

same as above

  1. Tests are failing because the Lightspeed plugin is not present in the navigation sidebar. This might require minor tweaks in the existing tests. /cc @jrichter1

Thank you for fixing the e2e tests

Please take a look and let me know your thoughts.

@debsmita1 debsmita1 requested a review from HusneShabbir January 8, 2026 18:57
@aprilma419
Copy link

aprilma419 commented Jan 9, 2026

@debsmita1 LGTM! Just one question regarding dark mode: it looks like both the light and dark versions of the overlay popup don’t have a shadow, which makes it a bit less visually distinct especially in the dark view. I’ve added a PatternFly example as the second screenshot for reference.

Screenshot 2026-01-09 at 16 21 13 Screenshot 2026-01-09 at 16 18 48

Copy link
Contributor

@HusneShabbir HusneShabbir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When switching Lightspeed view from Fullscreen → Dock to Window, it switches to Overlay display mode, which is not the expected behavior.
Attached a video for reference.

Screen.Recording.2026-01-09.at.2.18.39.PM.mov

@debsmita1 debsmita1 force-pushed the add-display-modes branch 4 times, most recently from f46ddd2 to fe3c69f Compare January 9, 2026 18:39
@debsmita1
Copy link
Member Author

@debsmita1 LGTM! Just one question regarding dark mode: it looks like both the light and dark versions of the overlay popup don’t have a shadow, which makes it a bit less visually distinct especially in the dark view. I’ve added a PatternFly example as the second screenshot for reference.

Screenshot 2026-01-09 at 16 21 13 Screenshot 2026-01-09 at 16 18 48

Fixed it and updated the screen recordings above. PTAL !

@debsmita1
Copy link
Member Author

When switching Lightspeed view from Fullscreen → Dock to Window, it switches to Overlay display mode, which is not the expected behavior. Attached a video for reference.

Screen.Recording.2026-01-09.at.2.18.39.PM.mov

Fixed it and updated the screen recordings

@sonarqubecloud
Copy link

sonarqubecloud bot commented Jan 9, 2026

Copy link
Contributor

@HusneShabbir HusneShabbir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested locally on the dev page and in RHDH
Everything works as expected. Great work!

HusneShabbir

This comment was marked as outdated.

@aprilma419
Copy link

lgtm, thx!

Copy link
Contributor

@HusneShabbir HusneShabbir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noticed an inconsistency in behavior when using the Escape (ESC) key while accessing chatbot options.

In overlay mode, pressing ESC currently closes the entire Lightspeed window. The expected behavior is that ESC should only close the chatbot options dialog. If the user presses ESC again, it should then close the Lightspeed window. This would align the behavior in overlay mode with other modes, ensuring consistency across the application.

I’ve attached a video reference for better understanding.

Screen.Recording.2026-01-10.at.10.44.48.PM.mov

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants