feat(lightspeed): Add Developer Lightspeed Chat Popup/Button

workspaces/global-floating-action-button/.changeset/giant-pears-exercise.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-floating-action-button': patch
+---
+
+updated drawer classname

workspaces/global-floating-action-button/plugins/global-floating-action-button/src/components/FloatingButton.tsx

@@ -31,10 +31,10 @@ const useStyles = makeStyles(theme => ({
     right: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,
     alignItems: 'end',
 
-    // When quickstart drawer is open, adjust margin
-    '.quickstart-drawer-open &': {
+    // When drawer is docked, adjust margin
+    '.docked-drawer-open &': {
       transition: 'margin-right 0.3s ease',
-      marginRight: 'var(--quickstart-drawer-width, 500px) ',
+      marginRight: 'var(--docked-drawer-width, 500px) ',
     },
   },
   'bottom-left': {

workspaces/lightspeed/.changeset/grumpy-jokes-juggle.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-lightspeed': minor
+---
+
+Added chatbot display modes (overlay, docked, fullscreen) with the ability to switch between modes via settings dropdown.

workspaces/lightspeed/packages/app/e2e-tests/utils/testHelper.ts

@@ -26,9 +26,7 @@ export const switchToLocale = async (page: Page, locale: string) => {
 };
 
 export const openLightspeed = async (page: Page) => {
-  const navLink = page.getByRole('link', { name: 'Lightspeed' });
-  await navLink.click();
-
+  await page.goto('/lightspeed');
   await page.locator('.pf-chatbot__messagebox').waitFor({ state: 'visible' });
 };
 

workspaces/lightspeed/packages/app/package.json

@@ -46,7 +46,10 @@
     "@backstage/ui": "^0.8.2",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
+    "@mui/material": "^5.12.2",
+    "@red-hat-developer-hub/backstage-plugin-global-floating-action-button": "^1.6.1",
     "@red-hat-developer-hub/backstage-plugin-lightspeed": "*",
+    "@red-hat-developer-hub/backstage-plugin-theme": "^0.11.0",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router": "^6.3.0",

workspaces/lightspeed/packages/app/src/App.tsx

@@ -52,8 +52,11 @@ import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 import { lightspeedTranslations } from '@red-hat-developer-hub/backstage-plugin-lightspeed/alpha';
-import { LightspeedPage } from '@red-hat-developer-hub/backstage-plugin-lightspeed';
 import { githubAuthApiRef } from '@backstage/core-plugin-api';
+import {
+  LightspeedPage,
+  LightspeedDrawerProvider,
+} from '@red-hat-developer-hub/backstage-plugin-lightspeed';
 
 const githubProvider = {
   id: 'github-auth-provider',
@@ -126,6 +129,7 @@ const routes = (
     <Route path="/settings" element={<UserSettingsPage />} />
     <Route path="/catalog-graph" element={<CatalogGraphPage />} />
     <Route path="/lightspeed" element={<LightspeedPage />} />
+    <Route path="/lightspeed/conversation/:id" element={<LightspeedPage />} />
   </FlatRoutes>
 );
 
@@ -134,7 +138,9 @@ export default app.createRoot(
     <AlertDisplay />
     <OAuthRequestDialog />
     <AppRouter>
-      <Root>{routes}</Root>
+      <LightspeedDrawerProvider>
+        <Root>{routes}</Root>
+      </LightspeedDrawerProvider>
     </AppRouter>
   </>,
 );

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

@@ -0,0 +1,191 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  ComponentType,
+  useState,
+  useCallback,
+  useMemo,
+  useEffect,
+  useRef,
+} from 'react';
+import { CustomDrawer } from './CustomDrawer';
+
+/**
+ * Partial drawer state exposed by drawer plugins
+ *
+ * @public
+ */
+export interface DrawerPartialState {
+  id: string;
+  isDrawerOpen: boolean;
+  drawerWidth: number;
+  setDrawerWidth: (width: number) => void;
+  closeDrawer: () => void;
+}
+
+/**
+ * Props for drawer state exposer components
+ *
+ * @public
+ */
+export interface DrawerStateExposerProps {
+  onStateChange: (state: DrawerPartialState) => void;
+  onUnmount?: (id: string) => void;
+}
+
+/**
+ * Drawer content configuration
+ */
+type DrawerContentType = {
+  id: string;
+  Component: ComponentType<any>;
+  priority?: number;
+};
+
+/**
+ * State exposer component type
+ */
+type StateExposerType = {
+  Component: ComponentType<DrawerStateExposerProps>;
+};
+
+export interface ApplicationDrawerProps {
+  /**
+   * Array of drawer content configurations
+   * Maps drawer IDs to their content components
+   */
+  drawerContents: DrawerContentType[];
+  /**
+   * Array of state exposer components from drawer plugins
+   * These are typically mounted via `application/internal/drawer-state` mount point
+   *
+   * In RHDH dynamic plugins, this would come from:
+   * ```yaml
+   * mountPoints:
+   *   - mountPoint: application/internal/drawer-state
+   *     importName: TestDrawerStateExposer
+   * ```
+   */
+  stateExposers?: StateExposerType[];
+}
+
+export const ApplicationDrawer = ({
+  drawerContents,
+  stateExposers = [],
+}: ApplicationDrawerProps) => {
+  const drawerStatesRef = useRef<Map<string, DrawerPartialState>>(new Map());
+  const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
+
+  const handleStateChange = useCallback(
+    (state: DrawerPartialState) => {
+      const prev = drawerStatesRef.current.get(state.id);
+
+      // If drawer just opened then make it the active drawer
+      if (!prev?.isDrawerOpen && state.isDrawerOpen) {
+        setActiveDrawerId(state.id);
+      }
+      // If drawer just closed and it was the active one, clear active drawer
+      else if (
+        prev?.isDrawerOpen &&
+        !state.isDrawerOpen &&
+        state.id === activeDrawerId
+      ) {
+        setActiveDrawerId(null);
+      }
+
+      drawerStatesRef.current.set(state.id, state);
+    },
+    [activeDrawerId],
+  );
+
+  const drawerStates = Array.from(drawerStatesRef.current.values());
+
+  const allDrawers = useMemo(
+    () =>
+      drawerStates
+        .map(state => {
+          const content = drawerContents.find(c => c.id === state.id);
+          if (!content) return null;
+
+          return {
+            state,
+            Component: content.Component,
+            priority: content.priority,
+          };
+        })
+        .filter(Boolean),
+    [drawerStates, drawerContents],
+  );
+
+  const activeDrawer =
+    allDrawers.find(d => d?.state.id === activeDrawerId) || null;
+
+  // Close all other drawers when one becomes active
+  useEffect(() => {
+    if (activeDrawerId) {
+      drawerStates.forEach(state => {
+        if (state.id !== activeDrawerId && state.isDrawerOpen) {
+          state.closeDrawer();
+        }
+      });
+    }
+  }, [activeDrawerId, drawerStates]);
+
+  // Manage CSS classes and variables for layout adjustments
+  useEffect(() => {
+    if (activeDrawer) {
+      const className = 'docked-drawer-open';
+      const cssVar = '--docked-drawer-width';
+
+      document.body.classList.add(className);
+      document.body.style.setProperty(
+        cssVar,
+        `${activeDrawer.state.drawerWidth}px`,
+      );
+
+      return () => {
+        document.body.classList.remove(className);
+        document.body.style.removeProperty(cssVar);
+      };
+    }
+    return undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeDrawer?.state.id, activeDrawer?.state.drawerWidth]);
+
+  return (
+    <>
+      {/* Render all state exposers - they return null but report their state */}
+      {stateExposers.map(({ Component }, index) => (
+        <Component
+          key={`drawer-${Component.displayName || index}`}
+          onStateChange={handleStateChange}
+        />
+      ))}
+
+      {/* Render the active drawer */}
+      {activeDrawer && (
+        <CustomDrawer
+          isDrawerOpen={activeDrawer.state.isDrawerOpen}
+          drawerWidth={activeDrawer.state.drawerWidth}
+          onWidthChange={activeDrawer.state.setDrawerWidth}
+        >
+          <activeDrawer.Component />
+        </CustomDrawer>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,81 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable no-restricted-imports */
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
+/* eslint-enable no-restricted-imports */
+
+import { ThemeConfig } from '@red-hat-developer-hub/backstage-plugin-theme';
+
+export type CustomDrawerProps = {
+  children: React.ReactNode;
+  minWidth?: number;
+  maxWidth?: number;
+  initialWidth?: number;
+  isDrawerOpen: boolean;
+  drawerWidth?: number;
+  onWidthChange?: (width: number) => void;
+  [key: string]: any;
+};
+
+export const CustomDrawer = (props: CustomDrawerProps) => {
+  const {
+    children,
+    minWidth = 400,
+    maxWidth = 800,
+    initialWidth = 400,
+    isDrawerOpen,
+    drawerWidth,
+    onWidthChange,
+    ...drawerProps
+  } = props;
+
+  // Ensure anchor is always 'right' and not overridden by drawerProps
+  const { anchor: _, ...restDrawerProps } = drawerProps;
+
+  return (
+    <Drawer
+      {...restDrawerProps}
+      anchor="right"
+      sx={{
+        '& .v5-MuiDrawer-paper': {
+          width: drawerWidth || initialWidth,
+          boxSizing: 'border-box',
+          backgroundColor: theme => {
+            const themeConfig = theme as ThemeConfig;
+            return (
+              themeConfig.palette?.rhdh?.general?.sidebarBackgroundColor ||
+              theme.palette.background.paper
+            );
+          },
+          justifyContent: 'space-between',
+        },
+        // Only apply header offset when global header exists
+        'body:has(#global-header) &': {
+          '& .v5-MuiDrawer-paper': {
+            top: '64px !important',
+            height: 'calc(100vh - 64px) !important',
+          },
+        },
+      }}
+      variant="persistent"
+      open={isDrawerOpen}
+    >
+      <Box sx={{ height: '100%', position: 'relative' }}>{children}</Box>
+    </Drawer>
+  );
+};