Skip to content

feat(lightspeed): fullscreen chat UX updates - history panel, message bar, and header redesign#3057

Open
its-mitesh-kumar wants to merge 11 commits intoredhat-developer:mainfrom
its-mitesh-kumar:feat/lightspeed-fullscreen-chat-ux-updates
Open

feat(lightspeed): fullscreen chat UX updates - history panel, message bar, and header redesign#3057
its-mitesh-kumar wants to merge 11 commits intoredhat-developer:mainfrom
its-mitesh-kumar:feat/lightspeed-fullscreen-chat-ux-updates

Conversation

@its-mitesh-kumar
Copy link
Copy Markdown
Member

@its-mitesh-kumar its-mitesh-kumar commented May 6, 2026

Summary

This PR implements comprehensive UI/UX updates for the Lightspeed chat in fullscreen mode, aligning with the Figma mockups.

Fixed

Changes

Header

  • Replaced hamburger menu with Lightspeed logo in fullscreen mode
  • Updated styling for fullscreen header layout

History Panel

  • Added collapsible history panel with expand/collapse functionality
  • Created CollapsedHistoryStrip component with:
    • Expand panel icon (arrow pointing right)
    • Quick new chat icon (EditSquare in blue)
  • Panel is resizable with defined min/max width constraints
  • Three-dot options menu now only visible on hover
  • Added pointer cursor on conversation item hover

Message Bar

  • Redesigned message bar as a unified gray container
  • Moved model selector inside the message bar (bottom-left)
  • Created AttachPlusMenu component for attachment functionality (bottom-left)
  • Microphone and send buttons positioned at bottom-right
  • Entire message bar area is now clickable to focus input
  • Text cursor shown when hovering over message bar

Scope

All changes only apply to fullscreen display mode. Overlay and docked modes retain their original styling and functionality.

UI after changes

Screen.Recording.2026-05-06.at.9.11.22.PM.mov

Test Plan

  • Open Lightspeed in fullscreen mode
  • Verify history panel can be collapsed and expanded
  • Verify collapsed strip shows expand and new chat icons
  • Verify new chat icon is blue
  • Verify message bar has unified gray styling
  • Verify model selector and attach menu are at bottom-left
  • Verify microphone and send buttons are at bottom-right
  • Verify clicking anywhere on message bar focuses the input
  • Verify three-dot menu only appears on hover
  • Verify overlay and docked modes are unchanged

Figma References

✔️ 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)

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
@its-mitesh-kumar its-mitesh-kumar changed the title feat(lightspeed): Fullscreen Chat UX Updates - History Panel, Message Bar, and Header Redesign feat(lightspeed): fullscreen chat UX updates - history panel, message bar, and header redesign May 6, 2026
@rhdh-gh-app
Copy link
Copy Markdown

rhdh-gh-app Bot commented May 6, 2026

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-lightspeed workspaces/lightspeed/plugins/lightspeed minor v2.6.6

@its-mitesh-kumar
Copy link
Copy Markdown
Member Author

its-mitesh-kumar commented May 6, 2026

@openshift-ci openshift-ci Bot requested review from ShiranHi and debsmita1 May 6, 2026 15:52
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
@codecov
Copy link
Copy Markdown

codecov Bot commented May 6, 2026

Codecov Report

❌ Patch coverage is 80.59701% with 13 lines in your changes missing coverage. Please review.
✅ Project coverage is 60.82%. Comparing base (3eec62c) to head (0b74421).
⚠️ Report is 9 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3057      +/-   ##
==========================================
+ Coverage   60.80%   60.82%   +0.01%     
==========================================
  Files        2067     2069       +2     
  Lines       63895    63967      +72     
  Branches    16660    16688      +28     
==========================================
+ Hits        38852    38907      +55     
- Misses      24481    24497      +16     
- Partials      562      563       +1     
Flag Coverage Δ *Carryforward flag
adoption-insights 83.58% <ø> (ø) Carriedforward from 2e80921
ai-integrations 70.03% <ø> (ø) Carriedforward from 2e80921
app-defaults 69.60% <ø> (ø) Carriedforward from 2e80921
augment 69.36% <ø> (ø) Carriedforward from 2e80921
bulk-import 72.44% <ø> (ø) Carriedforward from 2e80921
cost-management 16.49% <ø> (ø) Carriedforward from 2e80921
dcm 32.85% <ø> (ø) Carriedforward from 2e80921
extensions 61.71% <ø> (ø) Carriedforward from 2e80921
global-floating-action-button 73.75% <ø> (ø) Carriedforward from 2e80921
global-header 61.68% <ø> (ø) Carriedforward from 2e80921
homepage 50.84% <ø> (ø) Carriedforward from 2e80921
konflux 91.01% <ø> (ø) Carriedforward from 2e80921
lightspeed 70.04% <80.59%> (+0.08%) ⬆️
mcp-integrations 81.59% <ø> (ø) Carriedforward from 2e80921
orchestrator 33.15% <ø> (ø) Carriedforward from 2e80921
quickstart 62.64% <ø> (ø) Carriedforward from 2e80921
sandbox 79.56% <ø> (ø) Carriedforward from 2e80921
scorecard 83.61% <ø> (ø) Carriedforward from 2e80921
theme 64.54% <ø> (ø) Carriedforward from 2e80921
translations 8.49% <ø> (ø) Carriedforward from 2e80921
x2a 82.09% <ø> (ø) Carriedforward from 2e80921

*This pull request uses carry forward flags. Click here to find out more.


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3eec62c...0b74421. Read the comment docs.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
Comment thread workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx Outdated
Comment thread workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx Outdated
Comment thread workspaces/lightspeed/plugins/lightspeed/src/components/AttachPlusMenu.tsx Outdated
Comment thread workspaces/lightspeed/plugins/lightspeed/src/components/AttachPlusMenu.tsx Outdated
Comment thread workspaces/lightspeed/plugins/lightspeed/src/components/CollapsedHistoryStrip.tsx Outdated
Comment thread workspaces/lightspeed/plugins/lightspeed/src/translations/ref.ts Outdated
@ShiranHi
Copy link
Copy Markdown

ShiranHi commented May 7, 2026

Thanks @its-mitesh-kumar, great update!
LGTM. One minor fix: align the top and right-hand side paddings of the sidebar across both the collapsed and expanded states to ensure the spacing remains the same:

image01 image02

@HusneShabbir HusneShabbir self-requested a review May 7, 2026 09:22
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
@its-mitesh-kumar
Copy link
Copy Markdown
Member Author

I have removed the styles overriding through custom styles. Attaching updated screen recording

Screen.Recording.2026-05-07.at.7.06.34.PM.mov

@karthikjeeyar @ShiranHi

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented May 7, 2026

Quality Gate Failed Quality Gate failed

Failed conditions
4.1% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

@its-mitesh-kumar
Copy link
Copy Markdown
Member Author

Moving collapse icon little bit top right

Screen.Recording.2026-05-08.at.2.58.03.AM.mov

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants