[WIP]: 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': patch
+---
+
+adds lightspeed chatbot popup

workspaces/lightspeed/packages/app/package.json

@@ -46,7 +46,9 @@
     "@backstage/ui": "^0.8.2",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
+    "@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

@@ -43,6 +43,7 @@ import { Root } from './components/Root';
 
 import {
   AlertDisplay,
+  IdentityProviders,
   OAuthRequestDialog,
   SignInPage,
 } from '@backstage/core-components';
@@ -52,7 +53,21 @@ 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 identityProviders: IdentityProviders = [
+  'guest',
+  {
+    id: 'github-auth-provider',
+    title: 'GitHub',
+    message: 'Sign in using GitHub',
+    apiRef: githubAuthApiRef,
+  },
+];
 
 const app = createApp({
   apis,
@@ -78,7 +93,9 @@ const app = createApp({
     });
   },
   components: {
-    SignInPage: props => <SignInPage {...props} auto providers={['guest']} />,
+    SignInPage: props => (
+      <SignInPage {...props} auto providers={identityProviders} />
+    ),
   },
 });
 
@@ -117,6 +134,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>
 );
 
@@ -125,7 +143,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,177 @@
+/*
+ * 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,
+} 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;
+}
+
+/**
+ * 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/drawer-state` mount point
+   *
+   * In RHDH dynamic plugins, this would come from:
+   * ```yaml
+   * mountPoints:
+   *   - mountPoint: application/drawer-state
+   *     importName: TestDrawerStateExposer
+   * ```
+   */
+  stateExposers?: StateExposerType[];
+}
+
+export const ApplicationDrawer = ({
+  drawerContents,
+  stateExposers = [],
+}: ApplicationDrawerProps) => {
+  // Collect drawer states from all state exposers
+  const [drawerStates, setDrawerStates] = useState<
+    Record<string, DrawerPartialState>
+  >({});
+
+  // Callback for state exposers to report their state
+  const handleStateChange = useCallback((state: DrawerPartialState) => {
+    setDrawerStates(prev => {
+      // Only update if something actually changed
+      const existing = prev[state.id];
+      if (
+        existing &&
+        existing.isDrawerOpen === state.isDrawerOpen &&
+        existing.drawerWidth === state.drawerWidth &&
+        existing.setDrawerWidth === state.setDrawerWidth
+      ) {
+        return prev;
+      }
+      return { ...prev, [state.id]: state };
+    });
+  }, []);
+
+  // Convert states record to array
+  const statesArray = useMemo(
+    () => Object.values(drawerStates),
+    [drawerStates],
+  );
+
+  // Get active drawer - find the open drawer with highest priority
+  const activeDrawer = useMemo(() => {
+    return statesArray
+      .filter(state => state.isDrawerOpen)
+      .map(state => {
+        const content = drawerContents.find(c => c.id === state.id);
+        if (!content) return null;
+        return { ...state, ...content };
+      })
+      .filter(Boolean)
+      .sort((a, b) => (b?.priority ?? -1) - (a?.priority ?? -1))[0];
+  }, [statesArray, drawerContents]);
+
+  // 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.drawerWidth}px`);
+
+      return () => {
+        document.body.classList.remove(className);
+        document.body.style.removeProperty(cssVar);
+      };
+    }
+    return undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeDrawer?.id, activeDrawer?.drawerWidth]);
+
+  // Wrapper to handle the width change callback type
+  const handleWidthChange = useCallback(
+    (width: number) => {
+      activeDrawer?.setDrawerWidth(width);
+    },
+    [activeDrawer],
+  );
+
+  return (
+    <>
+      {/* Render all state exposers - they return null but report their state */}
+      {stateExposers.map(({ Component }, index) => (
+        <Component
+          key={`${index}-${Component.displayName}`}
+          onStateChange={handleStateChange}
+        />
+      ))}
+
+      {/* Render the active drawer */}
+      {activeDrawer && (
+        <CustomDrawer
+          isDrawerOpen
+          drawerWidth={activeDrawer.drawerWidth}
+          onWidthChange={handleWidthChange}
+        >
+          <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>
+  );
+};