fix css issues for lightspeed on RHDH

Author: debsmita1

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 />}