fix(lightspeed): overflow and horizontal scrollbar fix

[rohitratannagar]

Hey, I just made a Pull Request!

fixes

https://redhat.atlassian.net/browse/RHDHBUGS-2703

DESCRIPTION

• Adds a vertical scrollbar for the newly created chats, so that there is no overflow
• Removes unnecessary horizontal scrollbar

UI before changes

### UI after changes

Screen.Recording.2026-03-16.at.5.54.39.PM.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]

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@red-hat-developer-hub/backstage-plugin-lightspeed	workspaces/lightspeed/plugins/lightspeed	patch	v1.4.0

[rhdh-qodo-merge]

Review Summary by Qodo

Fix Lightspeed chat overflow and scrollbar issues

🐞 Bug fix

Walkthroughs

Description

• Fixes horizontal scrollbar overflow in Lightspeed chat overlay
• Adds vertical scrollbar for newly created chats with welcome prompts
• Implements proper scroll container hierarchy to handle zoom levels
• Resets chat state when creating new conversation from existing one

Diagram

flowchart LR
  A["Chat Content Layout"] -->|"Add scroll wrapper"| B["Scrollable Container"]
  B -->|"Flex layout control"| C["Message Box Sizing"]
  D["New Chat Detection"] -->|"Reset state"| E["Empty Messages"]
  E -->|"Scroll to bottom"| F["Welcome Prompts Visible"]
  G["Modal Styling"] -->|"Constrain width"| H["Hide Horizontal Scroll"]

Loading

File Changes

1. workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx 🐞 Bug fix +60/-14

Implement scroll container and welcome prompt positioning

• Added contentScrollRef to control scroll behavior of chat content
• Introduced three new CSS classes for scroll container hierarchy: chatbotContent,
 chatbotContentScroll, and chatbotContentSpacer
• Added useEffect hook to scroll welcome prompts to bottom when new chat opens
• Wrapped LightspeedChatBox in scrollable div with spacer for proper layout
• Fixed display mode to use actual displayMode instead of hardcoded ChatbotDisplayMode.embedded
• Added state reset logic when creating new chat from existing conversation

workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx

---

2. workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedChatBox.tsx 🐞 Bug fix +20/-4

Add conditional message box sizing for chat states

• Added messageBoxFlex class for scrollable message box with flex layout
• Added messageBoxAutoHeight class for new chat mode with auto height and visible overflow
• Updated getMessageBoxClassName() to conditionally apply flex or auto-height classes based on
 chat state
• Introduced isNewChat variable to detect when showing welcome prompts

workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedChatBox.tsx

---

3. workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedDrawerProvider.tsx 🐞 Bug fix +2/-0

Constrain modal width and hide horizontal scrollbar

• Added maxWidth constraint to modal to prevent overflow on smaller screens
• Added overflowX: 'hidden' to hide horizontal scrollbar

workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedDrawerProvider.tsx

---

View more (2)

4. workspaces/lightspeed/plugins/lightspeed/src/hooks/useConversationMessages.ts 🐞 Bug fix +4/-1

Clear temporary conversation on new chat switch

• Added logic to clear TEMP_CONVERSATION_ID when switching to new chat
• Ensures "New chat" starts with empty messages and correct scroll position

workspaces/lightspeed/plugins/lightspeed/src/hooks/useConversationMessages.ts

---

5. workspaces/lightspeed/.changeset/seven-phones-drop.md 📝 Documentation +5/-0

Add changeset for lightspeed overlay fixes

• Added changeset entry documenting patch version bump
• Describes fixes for overlay horizontal scrollbar and vertical scrollbar for new chats

workspaces/lightspeed/.changeset/seven-phones-drop.md

---

[rhdh-qodo-merge]

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📎 Requirement gaps (0)

1. Welcome scroll reset no-op 🐞 Bug ✓ Correctness

Description

The welcome scroll-to-bottom effect only depends on welcomePrompts.length, so when onNewChat runs in
the “already on new chat” path the effect does not re-run and scroll/layout is not actually reset.
This can leave the welcome view scrolled away from the input area even though the code explicitly
tries to reset that state.

Code

workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx[R602-611]

+  // When opening a new chat (welcome content), scroll to bottom so content is next to send box.
+  useEffect(() => {
+    if (welcomePrompts.length === 0) return undefined;
+    const el = contentScrollRef.current;
+    if (!el) return undefined;
+    const timer = setTimeout(() => {
+      el.scrollTop = el.scrollHeight;
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [welcomePrompts.length]);

Evidence

The PR adds an explicit onNewChat branch for the case where the current conversation is already
TEMP/new-chat and comments that it is intended to reset scroll/layout, but the only code that
performs the scroll reset is a useEffect keyed solely on welcomePrompts.length. In the
already-new-chat scenario, welcomePrompts is already non-empty with a stable length (based on
samplePrompts/maxPrompts), so the effect will not re-run and no scroll reset will occur. This
scenario is realistically reachable because model selection is wired to call onNewChat() even if
you’re already on the new-chat screen.

workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx[355-372]
workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx[587-611]
workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx[771-776]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
The welcome-content scroll-to-bottom effect in `LightSpeedChat` only runs when `welcomePrompts.length` changes. When `onNewChat()` is invoked while already on the TEMP/new-chat screen (a scenario the code explicitly handles and is reachable via model selection), `welcomePrompts.length` typically stays the same, so the effect does not re-run and the intended scroll/layout reset doesn’t happen.

### Issue Context
- `onNewChat()` has an `else` branch for `conversationId === TEMP_CONVERSATION_ID` with a comment stating it should reset scroll/layout.
- The scroll logic is implemented in a `useEffect` that depends only on `welcomePrompts.length`.

### Fix Focus Areas
- workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx[355-372]
- workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx[587-611]
- workspaces/lightspeed/plugins/lightspeed/src/components/LightSpeedChat.tsx[771-776]

### Suggested implementation direction
- Option A (simplest): in the `onNewChat` TEMP `else` branch, after state updates, schedule the same scroll-to-bottom behavior using `contentScrollRef.current` (e.g., `requestAnimationFrame` or `setTimeout`).
- Option B: expand the effect dependencies to include a value that changes on each reset (e.g., `newChatCreated`, `conversationId`, or a dedicated `newChatResetCounter` state incremented in the TEMP `else` branch).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more

[ciiay]

Thanks for the fix Rohit 👏
Left one small comment, plus another suggestion we can explore for improvement 🤝

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[ciiay]

Thanks for the fix 👏

/lgtm

pr_2559.mp4