fix(lightspeed): overflow and horizontal scrollbar fix (#2559)

* fix(lightspeed): overflow and horizontal scrollbar fix

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>

* removing setTimeOut

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>

---------

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>

Author: rohitratannagar

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

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
+---
+
+fixes lightspeed overlay (remove horizontal scrollbar, and adds vertical scrollbar for newly created chats)

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

@@ -20,7 +20,9 @@ import {
   Ref,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 import {
@@ -128,6 +130,27 @@ const useStyles = makeStyles(theme => ({
     padding: 0,
     margin: 0,
   },
+  // Outer content wrapper (library may override overflow; we rely on inner scroll wrapper).
+  chatbotContent: {
+    minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+  },
+  // Inner scroll container we control: always scrollable so zoomed-in users see full content.
+  chatbotContentScroll: {
+    minHeight: 0,
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    overflowY: 'auto',
+    WebkitOverflowScrolling: 'touch',
+  },
+  // When present, pushes welcome content to bottom (zoom out). Scroll up to see important box (zoom in).
+  chatbotContentSpacer: {
+    flex: 1,
+    minHeight: 0,
+  },
 }));
 
 type LightspeedChatProps = {
@@ -165,6 +188,8 @@ export const LightspeedChat = ({
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
   const [isRenameModalOpen, setIsRenameModalOpen] = useState<boolean>(false);
   const [isSortSelectOpen, setIsSortSelectOpen] = useState<boolean>(false);
+  const contentScrollRef = useRef<HTMLDivElement>(null);
+  const bottomSentinelRef = useRef<HTMLDivElement>(null);
   const { isReady, lastOpenedId, setLastOpenedId, clearLastOpenedId } =
     useLastOpenedConversation(user);
   const {
@@ -342,6 +367,10 @@ export const LightspeedChat = ({
         if (!isFullscreenMode) {
           setIsChatHistoryDrawerOpen(false);
         }
+      } else {
+        // Already on new chat: reset so scroll/layout works (e.g. after opening new chat again from another convo then back).
+        setMessages([]);
+        setNewChatCreated(true);
       }
     })();
   }, [
@@ -572,6 +601,40 @@ export const LightspeedChat = ({
         })
       : [];
 
+  // Scroll to bottom when welcome content appears (sentinel + useLayoutEffect/RAF + ResizeObserver).
+  useLayoutEffect(() => {
+    if (welcomePrompts.length === 0) return undefined;
+    const el = contentScrollRef.current;
+    const sentinel = bottomSentinelRef.current;
+    if (!el) return undefined;
+
+    const scrollToBottom = () => {
+      if (sentinel && typeof sentinel.scrollIntoView === 'function') {
+        sentinel.scrollIntoView({ block: 'end', behavior: 'auto' });
+      } else {
+        el.scrollTop = el.scrollHeight;
+      }
+    };
+
+    const rafId =
+      typeof requestAnimationFrame !== 'undefined'
+        ? requestAnimationFrame(() => scrollToBottom())
+        : null;
+    if (rafId === null) scrollToBottom();
+    const resizeObserver =
+      typeof ResizeObserver !== 'undefined'
+        ? new ResizeObserver(() => scrollToBottom())
+        : undefined;
+    resizeObserver?.observe(el);
+
+    return () => {
+      if (rafId !== null && typeof cancelAnimationFrame !== 'undefined') {
+        cancelAnimationFrame(rafId);
+      }
+      resizeObserver?.disconnect();
+    };
+  }, [welcomePrompts.length]);
+
   const handleFilter = useCallback((value: string) => {
     setFilterValue(value);
   }, []);
@@ -752,7 +815,7 @@ export const LightspeedChat = ({
             style: isFullscreenMode ? undefined : { zIndex: 1300 },
           }}
           reverseButtonOrder
-          displayMode={ChatbotDisplayMode.embedded}
+          displayMode={displayMode}
           onDrawerToggle={onChatHistoryDrawerToggle}
           title=""
           navTitleIcon={null}
@@ -811,19 +874,34 @@ export const LightspeedChat = ({
                 </div>
               )}
 
-              <ChatbotContent>
-                <LightspeedChatBox
-                  userName={userName}
-                  messages={messages}
-                  profileLoading={profileLoading}
-                  announcement={announcement}
-                  ref={scrollToBottomRef}
-                  welcomePrompts={welcomePrompts}
-                  conversationId={conversationId}
-                  isStreaming={isSendButtonDisabled}
-                  topicRestrictionEnabled={topicRestrictionEnabled}
-                  displayMode={displayMode}
-                />
+              <ChatbotContent className={classes.chatbotContent}>
+                <div
+                  ref={contentScrollRef}
+                  className={classes.chatbotContentScroll}
+                >
+                  {welcomePrompts.length > 0 && (
+                    <div className={classes.chatbotContentSpacer} aria-hidden />
+                  )}
+                  <LightspeedChatBox
+                    userName={userName}
+                    messages={messages}
+                    profileLoading={profileLoading}
+                    announcement={announcement}
+                    ref={scrollToBottomRef}
+                    welcomePrompts={welcomePrompts}
+                    conversationId={conversationId}
+                    isStreaming={isSendButtonDisabled}
+                    topicRestrictionEnabled={topicRestrictionEnabled}
+                    displayMode={displayMode}
+                  />
+                  {welcomePrompts.length > 0 && (
+                    <div
+                      ref={bottomSentinelRef}
+                      aria-hidden
+                      style={{ height: 0, flexShrink: 0 }}
+                    />
+                  )}
+                </div>
               </ChatbotContent>
               <ChatbotFooter className={classes.footer}>
                 <FilePreview />

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

@@ -85,6 +85,18 @@ const useStyles = makeStyles(theme => ({
       opacity: 0.65,
     },
   },
+  // Message box fills remaining height and scrolls when there are messages.
+  messageBoxFlex: {
+    flex: 1,
+    minHeight: 0,
+  },
+  // New chat: message box sizes to content so ChatbotContent is the scroll container.
+  // overflow: visible so full height is included in parent's scrollHeight (no clipping).
+  messageBoxAutoHeight: {
+    flex: 'none',
+    height: 'auto',
+    overflow: 'visible',
+  },
 }));
 
 // Extended message type that includes tool calls
@@ -180,15 +192,19 @@ export const LightspeedChatBox = forwardRef(
     const messageBoxClasses = `${classes.container} ${classes.userMessageText}`;
     const isEmbeddedMode = displayMode === ChatbotDisplayMode.embedded;
 
+    const isNewChat = welcomePrompts.length > 0 && messages.length === 0;
     const getMessageBoxClassName = () => {
+      const base = isNewChat
+        ? `${messageBoxClasses} ${classes.messageBoxAutoHeight}`
+        : `${messageBoxClasses} ${classes.messageBoxFlex}`;
       if (!welcomePrompts.length) {
-        return messageBoxClasses;
+        return base;
       }
-      const baseClasses = `${messageBoxClasses} ${classes.prompt}`;
+      const withPrompt = `${base} ${classes.prompt}`;
       if (isEmbeddedMode) {
-        return baseClasses;
+        return withPrompt;
       }
-      return `${baseClasses} ${classes.promptSuggestions}`;
+      return `${withPrompt} ${classes.promptSuggestions}`;
     };
 
     return (

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

@@ -38,6 +38,8 @@ const useStyles = makeStyles(theme => ({
       '0 14px 20px -7px rgba(0, 0, 0, 0.22), 0 32px 50px 6px rgba(0, 0, 0, 0.16), 0 12px 60px 12px rgba(0, 0, 0, 0.14) !important',
     bottom: `calc(${theme?.spacing?.(2) ?? '16px'} + 5em)`,
     right: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,
+    maxWidth: 'min(30rem, calc(100vw - 32px)) !important',
+    overflowX: 'hidden' as const,
   },
 }));
 

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

@@ -127,8 +127,11 @@ export const useConversationMessages = (
     if (currentConversation !== conversationId) {
       setCurrentConversation(conversationId);
       setConversations(prev => {
+        // Always clear TEMP when switching to it so "New chat" again gets empty messages and correct scroll.
+        if (conversationId === TEMP_CONVERSATION_ID) {
+          return { ...prev, [TEMP_CONVERSATION_ID]: [] };
+        }
         if (prev[conversationId]) return prev;
-
         return {
           ...prev,
           [conversationId]: [],