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/fixtures/responses.ts

@@ -39,30 +39,30 @@ export const models = [
 ];
 
 export const defaultConversation = {
-  conversation_id: 'user:development/guest+Av8Fax73D4XPx5Ls',
+  conversation_id: '1348e758-15ed-483a-bca5-b8702bbc79fe',
 };
 
 export const conversations = [
   {
-    conversation_id: 'user:development/guest+Av8Fax73D4XPx5Ls',
+    conversation_id: '1348e758-15ed-483a-bca5-b8702bbc79fe',
     topic_summary: 'Conversation 1',
     last_message_timestamp: createdAt,
   },
   {
-    conversation_id: 'temp-conversation-id',
+    conversation_id: '1348e758-15ed-483a-bca5-b8702bbc79fa',
     topic_summary: 'Temporary conversation',
     last_message_timestamp: createdAt,
   },
 ];
 
 export const moreConversations = [
   {
-    conversation_id: 'user:development/guest+Av8Fax73D4XPx5Ls',
+    conversation_id: '1348e758-15ed-483a-bca5-b8702bbc79fe',
     topic_summary: 'Conversation 1',
     last_message_timestamp: createdAt,
   },
   {
-    conversation_id: 'user:development/guest+Av8Fax73D4XPx5La',
+    conversation_id: '1348e758-15ed-483a-bca5-b8702bbc79fb',
     topic_summary: 'New Conversation',
     last_message_timestamp: createdAt,
   },

workspaces/lightspeed/packages/app/e2e-tests/lightspeed.test.ts

@@ -32,6 +32,18 @@ import {
   assertClipboardContains,
   switchToLocale,
 } from './utils/testHelper';
+import {
+  openChatbot,
+  selectDisplayMode,
+  openChatHistoryDrawer,
+  closeChatHistoryDrawer,
+  expectBackstagePageVisible,
+  expectChatbotControlsVisible,
+  verifyDisplayModeMenuOptions,
+  expectChatInputAreaVisible,
+  expectEmptyChatHistory,
+  expectConversationArea,
+} from './pages/LightspeedPage';
 import {
   uploadFiles,
   uploadAndAssertDuplicate,
@@ -133,6 +145,51 @@ test.describe('Lightspeed tests', () => {
     await openLightspeed(sharedPage);
   });
 
+  test.describe('Chatbot Display Modes', () => {
+    test.beforeEach(async () => {
+      await sharedPage.goto('/');
+    });
+
+    test('should display chatbot in overlay mode with backstage page visible', async () => {
+      await expectBackstagePageVisible(sharedPage);
+      await openChatbot(sharedPage);
+
+      await expectConversationArea(sharedPage, translations, 'Overlay');
+      await expectChatInputAreaVisible(sharedPage, translations);
+      await expectBackstagePageVisible(sharedPage);
+      await expectChatbotControlsVisible(sharedPage, translations);
+
+      await openChatHistoryDrawer(sharedPage, translations);
+      await expectEmptyChatHistory(sharedPage, translations);
+      await closeChatHistoryDrawer(sharedPage, translations);
+
+      await verifyDisplayModeMenuOptions(sharedPage, translations);
+    });
+
+    test('should display chatbot in dock to window mode with backstage page visible', async () => {
+      await openChatbot(sharedPage);
+      await selectDisplayMode(sharedPage, translations, 'Dock to window');
+
+      await expectConversationArea(sharedPage, translations, 'Dock to window');
+      await expectBackstagePageVisible(sharedPage);
+      await expectChatInputAreaVisible(sharedPage, translations);
+      await expectChatbotControlsVisible(sharedPage, translations);
+
+      await openChatHistoryDrawer(sharedPage, translations);
+      await expectEmptyChatHistory(sharedPage, translations);
+      await closeChatHistoryDrawer(sharedPage, translations);
+    });
+
+    test('should display chatbot in fullscreen mode with backstage page hidden', async () => {
+      await openChatbot(sharedPage);
+      await selectDisplayMode(sharedPage, translations, 'Fullscreen');
+
+      await expectConversationArea(sharedPage, translations, 'Fullscreen');
+      await expectEmptyChatHistory(sharedPage, translations);
+      await expectBackstagePageVisible(sharedPage, false);
+    });
+  });
+
   test('Lightspeed is available', async ({ browser }, testInfo) => {
     expect(sharedPage.url()).toContain('/lightspeed');
     if (devMode) {
@@ -413,6 +470,12 @@ test.describe('Lightspeed tests', () => {
 
       test('Verify chat actions menu', async () => {
         await sharedPage.reload();
+        // Ensure the drawer is open after reload
+        const sidePanel = sharedPage.locator('.pf-v6-c-drawer__panel-main');
+        const isVisible = await sidePanel.isVisible();
+        if (!isVisible) {
+          await openChatDrawer(sharedPage, translations);
+        }
         await openChatContextMenu(sharedPage);
         await verifyChatContextMenuOptions(sharedPage, translations);
       });
@@ -476,6 +539,12 @@ test.describe('Lightspeed tests', () => {
 
         test('Verify search results when chats are pinned', async () => {
           await sharedPage.reload();
+          // Ensure the drawer is open after reload
+          const sidePanel = sharedPage.locator('.pf-v6-c-drawer__panel-main');
+          const isVisible = await sidePanel.isVisible();
+          if (!isVisible) {
+            await openChatDrawer(sharedPage, translations);
+          }
           await openChatContextMenu(sharedPage);
           await selectPinAction(sharedPage, translations);
           await searchChats(sharedPage, 'dummy search', translations);

workspaces/lightspeed/packages/app/e2e-tests/pages/LightspeedPage.ts

@@ -0,0 +1,153 @@
+/*
+ * 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 { Page, expect } from '@playwright/test';
+import { LightspeedMessages, evaluateMessage } from '../utils/translations';
+
+export type DisplayMode = 'Overlay' | 'Dock to window' | 'Fullscreen';
+
+// Actions
+export async function openChatbot(page: Page) {
+  await page.getByRole('button', { name: 'lightspeed-close' }).click();
+}
+
+export async function selectDisplayMode(
+  page: Page,
+  t: LightspeedMessages,
+  mode: DisplayMode,
+) {
+  await page.getByRole('button', { name: t['aria.settings.label'] }).click();
+  const modeMap: Record<DisplayMode, string> = {
+    Overlay: t['settings.displayMode.overlay'],
+    'Dock to window': t['settings.displayMode.docked'],
+    Fullscreen: t['settings.displayMode.fullscreen'],
+  };
+  await page.getByRole('menuitem', { name: modeMap[mode] }).click();
+}
+
+export async function openChatHistoryDrawer(page: Page, t: LightspeedMessages) {
+  await page.getByRole('button', { name: t['aria.chatHistoryMenu'] }).click();
+}
+
+export async function closeChatHistoryDrawer(
+  page: Page,
+  t: LightspeedMessages,
+) {
+  await page.getByRole('button', { name: t['aria.closeDrawerPanel'] }).click();
+}
+
+// Assertions
+export async function expectBackstagePageVisible(page: Page, visible = true) {
+  const locator = page.getByText('Red Hat Catalog');
+  const assertion = visible ? expect(locator) : expect(locator).not;
+  await assertion.toBeVisible();
+}
+
+export async function expectChatbotControlsVisible(
+  page: Page,
+  t: LightspeedMessages,
+) {
+  await expect(page.locator('.pf-chatbot__header')).toBeVisible();
+  await expect(
+    page.getByRole('button', { name: t['aria.chatHistoryMenu'] }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole('button', { name: t['aria.settings.label'] }),
+  ).toBeVisible();
+}
+
+export async function verifyDisplayModeMenuOptions(
+  page: Page,
+  t: LightspeedMessages,
+) {
+  await page.getByRole('button', { name: t['aria.settings.label'] }).click();
+  await expect(page.getByLabel('Chatbot', { exact: true }))
+    .toMatchAriaSnapshot(`
+    - menu:
+      - menuitem "${t['settings.displayMode.label']}" [disabled]
+      - menuitem "${t['settings.displayMode.overlay']}"
+      - menuitem "${t['settings.displayMode.docked']}"
+      - menuitem "${t['settings.displayMode.fullscreen']}"
+    - separator
+    - menu:
+      - menuitem "${t['settings.pinned.disable']} ${t['settings.pinned.enabled.description']}"
+    `);
+}
+
+export async function expectChatInputAreaVisible(
+  page: Page,
+  t: LightspeedMessages,
+) {
+  await expect(
+    page.getByRole('textbox', { name: t['chatbox.message.placeholder'] }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole('button', { name: t['footer.accuracy.label'] }),
+  ).toBeVisible();
+}
+
+export async function expectEmptyChatHistory(
+  page: Page,
+  t: LightspeedMessages,
+) {
+  await expect(
+    page.getByRole('heading', { name: t['conversation.category.pinnedChats'] }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole('menuitem', { name: t['chatbox.emptyState.noPinnedChats'] }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole('heading', { name: t['conversation.category.recent'] }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole('menuitem', { name: t['chatbox.emptyState.noRecentChats'] }),
+  ).toBeVisible();
+}
+
+function getWelcomeHeader(t: LightspeedMessages): string {
+  const greeting = evaluateMessage(
+    t['chatbox.welcome.greeting'],
+    t['user.guest'],
+  );
+  return `
+    - region "Scrollable message log":
+      - 'heading "Info alert: ${t['aria.important']}" [level=4]'
+      - text: ${t['disclaimer.withValidation']}
+      - heading "${greeting} ${t['chatbox.welcome.description']}" [level=1]`;
+}
+
+const buttonGroup = `
+      - button
+      - text: ''`;
+
+const buttonCounts: Record<DisplayMode, number> = {
+  Overlay: 1,
+  'Dock to window': 2,
+  Fullscreen: 3,
+};
+
+export async function expectConversationArea(
+  page: Page,
+  t: LightspeedMessages,
+  mode: DisplayMode,
+) {
+  const buttons = buttonGroup.repeat(buttonCounts[mode]);
+  const snapshot = `${getWelcomeHeader(t)}${buttons}
+    `;
+  await expect(page.getByLabel('Scrollable message log')).toMatchAriaSnapshot(
+    snapshot,
+  );
+}

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

@@ -46,7 +46,7 @@ export async function mockShields(page: Page, shields: any[] = []) {
 }
 
 export async function mockChatHistory(page: Page, contents?: any[]) {
-  await page.route(`${modelBaseUrl}/v2/conversations/user*`, async route => {
+  await page.route(`${modelBaseUrl}/v2/conversations/*`, async route => {
     const json = contents ? { chat_history: contents } : [];
     await route.fulfill({ json });
   });

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/e2e-tests/utils/translations.ts

@@ -20,6 +20,8 @@ import { lightspeedMessages } from '../../../../plugins/lightspeed/src/translati
 import lightspeedTranslationDe from '../../../../plugins/lightspeed/src/translations/de.js';
 import lightspeedTranslationFr from '../../../../plugins/lightspeed/src/translations/fr.js';
 import lightspeedTranslationEs from '../../../../plugins/lightspeed/src/translations/es.js';
+import lightspeedTranslationIt from '../../../../plugins/lightspeed/src/translations/it.js';
+import lightspeedTranslationJa from '../../../../plugins/lightspeed/src/translations/ja.js';
 /* eslint-enable @backstage/no-relative-monorepo-imports */
 
 export type LightspeedMessages = typeof lightspeedMessages;
@@ -34,6 +36,10 @@ export function getTranslations(locale: string) {
       return lightspeedTranslationDe.messages;
     case 'es':
       return lightspeedTranslationEs.messages;
+    case 'it':
+      return lightspeedTranslationIt.messages;
+    case 'ja':
+      return lightspeedTranslationJa.messages;
     default:
       return lightspeedMessages;
   }

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",
+    "@mui/material": "^5.12.2",
     "@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.30.2",

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',
@@ -134,7 +137,9 @@ export default app.createRoot(
     <AlertDisplay />
     <OAuthRequestDialog />
     <AppRouter>
-      <Root>{routes}</Root>
+      <LightspeedDrawerProvider>
+        <Root>{routes}</Root>
+      </LightspeedDrawerProvider>
     </AppRouter>
   </>,
 );