backend integration

Signed-off-by: Yi Cai <yicai@redhat.com>

Author: ciiay

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

@@ -335,24 +335,39 @@ const useStyles = makeStyles(theme => ({
   settingsFlat: {
     height: '100%',
     width: '100%',
+    backgroundColor:
+      'var(--pf-v6-c-table--BackgroundColor, var(--pf-t--global--background--color--primary--default))',
     '&.pf-chatbot__settings-form-container': {
-      background: 'transparent',
+      background:
+        'var(--pf-v6-c-table--BackgroundColor, var(--pf-t--global--background--color--primary--default))',
       padding: 0,
       margin: 0,
+      minHeight: '100%',
+      display: 'flex',
+      flexDirection: 'column',
       width: '100%',
       maxWidth: 'none',
     },
     '& .pf-chatbot__settings-form': {
       margin: 0,
       padding: 0,
+      background:
+        'var(--pf-v6-c-table--BackgroundColor, var(--pf-t--global--background--color--primary--default))',
+      minHeight: '100%',
+      display: 'flex',
+      flexDirection: 'column',
       width: '100%',
       maxWidth: 'none',
     },
     '& .pf-chatbot__settings-form-row': {
-      background: 'transparent',
+      background:
+        'var(--pf-v6-c-table--BackgroundColor, var(--pf-t--global--background--color--primary--default))',
       border: 0,
       margin: 0,
       padding: 0,
+      minHeight: '100%',
+      display: 'flex',
+      flexDirection: 'column',
       width: '100%',
       maxWidth: 'none',
     },
@@ -378,6 +393,8 @@ const useStyles = makeStyles(theme => ({
     flex: 1,
     minWidth: 0,
     borderLeft: `1px solid ${theme.palette.divider}`,
+    backgroundColor:
+      'var(--pf-v6-c-table--BackgroundColor, var(--pf-t--global--background--color--primary--default))',
     display: 'flex',
     flexDirection: 'column',
     minHeight: 0,
@@ -436,7 +453,6 @@ export const LightspeedChat = ({
   const [isRenameModalOpen, setIsRenameModalOpen] = useState<boolean>(false);
   const [isSortSelectOpen, setIsSortSelectOpen] = useState<boolean>(false);
   const [isMcpSettingsOpen, setIsMcpSettingsOpen] = useState<boolean>(false);
-  const [chatHeaderBgColor, setChatHeaderBgColor] = useState<string>();
   const contentScrollRef = useRef<HTMLDivElement>(null);
   const bottomSentinelRef = useRef<HTMLDivElement>(null);
   const { isReady, lastOpenedId, setLastOpenedId, clearLastOpenedId } =
@@ -486,16 +502,6 @@ export const LightspeedChat = ({
     }
   }, [isMobile, isFullscreenMode]);
 
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const headerElement = document.querySelector('.pf-chatbot__header');
-    if (!headerElement) return;
-    const computedBg = window.getComputedStyle(headerElement).backgroundColor;
-    if (computedBg) {
-      setChatHeaderBgColor(computedBg);
-    }
-  }, [displayMode, isMcpSettingsOpen]);
-
   const {
     isPinningChatsEnabled,
     pinnedChats,
@@ -1113,10 +1119,7 @@ export const LightspeedChat = ({
       <div className={classes.mcpFullscreenLayout}>
         <div className={classes.mcpChatPane}>{chatMainContent}</div>
         <div className={classes.mcpSettingsPane}>
-          <McpServersSettings
-            onClose={() => setIsMcpSettingsOpen(false)}
-            backgroundColor={chatHeaderBgColor}
-          />
+          <McpServersSettings onClose={() => setIsMcpSettingsOpen(false)} />
         </div>
       </div>
     );
@@ -1129,10 +1132,7 @@ export const LightspeedChat = ({
             id: 'mcp-servers-settings',
             label: '',
             field: (
-              <McpServersSettings
-                onClose={() => setIsMcpSettingsOpen(false)}
-                backgroundColor={chatHeaderBgColor}
-              />
+              <McpServersSettings onClose={() => setIsMcpSettingsOpen(false)} />
             ),
           },
         ]}