fix css issues for lightspeed on RHDH

Author: debsmita1

workspaces/lightspeed/packages/app/src/components/Root/ApplicationDrawer.tsx

@@ -88,17 +88,11 @@ export const ApplicationDrawer = ({
   stateExposers = [],
 }: ApplicationDrawerProps) => {
   const drawerStatesRef = useRef<Map<string, DrawerPartialState>>(new Map());
-  const [, forceUpdate] = useState({});
   const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
 
   const handleStateChange = useCallback(
     (state: DrawerPartialState) => {
       const prev = drawerStatesRef.current.get(state.id);
-      const hasChanged =
-        !prev ||
-        prev.isDrawerOpen !== state.isDrawerOpen ||
-        prev.drawerWidth !== state.drawerWidth ||
-        prev.setDrawerWidth !== state.setDrawerWidth;
 
       // If drawer just opened then make it the active drawer
       if (!prev?.isDrawerOpen && state.isDrawerOpen) {
@@ -114,10 +108,6 @@ export const ApplicationDrawer = ({
       }
 
       drawerStatesRef.current.set(state.id, state);
-
-      if (hasChanged) {
-        forceUpdate({});
-      }
     },
     [activeDrawerId],
   );

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

@@ -507,10 +507,21 @@ export const LightspeedChat = ({
     (c: ConversationSummary) => c.conversation_id === conversationId,
   );
 
+  const getMaxPrompts = () => {
+    if (displayMode === ChatbotDisplayMode.embedded) {
+      return samplePrompts?.length; // In the Fullscreen mode, show all prompts
+    }
+    if (displayMode === ChatbotDisplayMode.docked) {
+      return 2; // In the docked mode, show 2 prompts
+    }
+    return 1; // In the overlay mode, show 1 prompt
+  };
+  const maxPrompts = getMaxPrompts();
+
   const welcomePrompts =
     (newChatCreated && conversationMessages.length === 0) ||
     (!conversationFound && conversationMessages.length === 0)
-      ? samplePrompts?.map(prompt => {
+      ? samplePrompts?.slice(0, maxPrompts).map(prompt => {
           const p = prompt as { title: string; message: string };
           return {
             title: p.title,

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

@@ -200,6 +200,7 @@ export const LightspeedChatBox = forwardRef(
             })}
             description={t('chatbox.welcome.description')}
             prompts={welcomePrompts}
+            style={{ paddingBottom: '0' }}
           />
         ) : (
           <br />

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

@@ -29,8 +29,12 @@ import { ChatbotDisplayMode, ChatbotModal } from '@patternfly/chatbot';
 import { LightspeedChatContainer } from './LightspeedChatContainer';
 import { LightspeedDrawerContext } from './LightspeedDrawerContext';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
   chatbotModal: {
+    boxShadow:
+      '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)`,
     // When docked drawer is open, adjust modal position
     'body.docked-drawer-open &': {
       transition: 'margin-right 0.3s ease',
@@ -128,6 +132,10 @@ export const LightspeedDrawerProvider = ({ children }: PropsWithChildren) => {
   // Set display mode with route handling for embedded/fullscreen
   const setDisplayMode = useCallback(
     (mode: ChatbotDisplayMode, conversationId?: string) => {
+      if (mode === displayModeState) {
+        return;
+      }
+
       setDisplayModeState(mode);
 
       // Navigate to fullscreen route with conversation ID if available
@@ -145,7 +153,7 @@ export const LightspeedDrawerProvider = ({ children }: PropsWithChildren) => {
         setIsOpen(true);
       }
     },
-    [navigate, isLightspeedRoute, currentConversationIdState],
+    [navigate, isLightspeedRoute, currentConversationIdState, displayModeState],
   );
 
   // Only render ChatbotModal for overlay mode

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

@@ -24,6 +24,22 @@ import { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext'
 import { LightspeedFABIcon } from './LightspeedIcon';
 
 const useStyles = makeStyles(theme => ({
+  fab: {
+    opacity: '1 !important',
+    backgroundColor: `${theme?.palette?.primary?.main ?? '#1976d2'} !important`,
+    color: `${theme?.palette?.primary?.contrastText ?? '#fff'} !important`,
+    boxShadow: `${
+      theme?.shadows?.[6] ??
+      '0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)'
+    } !important`,
+    '&:hover': {
+      backgroundColor: `${theme?.palette?.primary?.dark ?? '#1565c0'} !important`,
+      boxShadow: `${
+        theme?.shadows?.[8] ??
+        '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)'
+      } !important`,
+    },
+  },
   'fab-button': {
     bottom: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,
     right: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,
@@ -70,6 +86,7 @@ export const LightspeedFAB = () => {
           size="small"
           onClick={toggleChatbot}
           aria-label={isChatbotActive ? 'lightspeed-open' : 'lightspeed-close'}
+          className={fabButton.fab}
           sx={{ borderRadius: '100% !important' }}
         >
           {isChatbotActive ? <Close fontSize="small" /> : <LightspeedFABIcon />}

workspaces/quickstart/packages/app/src/components/Root/ApplicationDrawer.tsx

@@ -88,17 +88,11 @@ export const ApplicationDrawer = ({
   stateExposers = [],
 }: ApplicationDrawerProps) => {
   const drawerStatesRef = useRef<Map<string, DrawerPartialState>>(new Map());
-  const [, forceUpdate] = useState({});
   const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
 
   const handleStateChange = useCallback(
     (state: DrawerPartialState) => {
       const prev = drawerStatesRef.current.get(state.id);
-      const hasChanged =
-        !prev ||
-        prev.isDrawerOpen !== state.isDrawerOpen ||
-        prev.drawerWidth !== state.drawerWidth ||
-        prev.setDrawerWidth !== state.setDrawerWidth;
 
       // If drawer just opened then make it the active drawer
       if (!prev?.isDrawerOpen && state.isDrawerOpen) {
@@ -114,10 +108,6 @@ export const ApplicationDrawer = ({
       }
 
       drawerStatesRef.current.set(state.id, state);
-
-      if (hasChanged) {
-        forceUpdate({});
-      }
     },
     [activeDrawerId],
   );