fix(lightspeeed): Enable only supported file types while uploading attachments (#913)

* fix(lightspeeed): Enable only supported file types while uploading attachments

* fix unit tests

* add xml to supported file types

* add xml to supported file types

* update playwright tests

* update chatbot placeholder text

* fix e2e tests

* move alerts to the top of the page

* add onAttachRejected handler to surface invalid file type errors

Author: karthikjeeyar

workspaces/lightspeed/.changeset/orange-spiders-speak.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
+---
+
+enable only supported file types in file picker

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

@@ -30,8 +30,8 @@ import { openLightspeed, sendMessage } from './utils/testHelper';
 import {
   uploadFile,
   uploadAndAssertDuplicate,
-  validateFailedUpload,
   supportedFileTypes,
+  validateFailedUpload,
 } from './utils/fileUpload';
 import {
   assertChatDialogInitialState,
@@ -142,6 +142,12 @@ test.describe('File Attachment Validation', () => {
         await uploadAndAssertDuplicate(page, path, name);
       } else {
         await validateFailedUpload(page);
+        // Unsupported files will not be available to preview.
+        const filePreview = page
+          .locator('span', { hasText: name.split('.')[0] })
+          .first();
+
+        await expect(filePreview).not.toBeVisible();
       }
     });
   }

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

@@ -15,7 +15,7 @@
  */
 import { Page, Locator, FileChooser, expect } from '@playwright/test';
 
-export const supportedFileTypes = ['.txt', '.yaml', '.json'];
+export const supportedFileTypes = ['.txt', '.yaml', '.json', '.xml'];
 
 export async function triggerFileChooser(
   page: Page,
@@ -76,14 +76,14 @@ export async function validateSuccessfulUpload(page: Page, fileName: string) {
   await page.getByRole('button', { name: 'Save' }).click();
   await page
     .getByRole('contentinfo')
-    .getByRole('button', { name: 'Close' })
+    .locator('role=button[name="Close"]')
     .click();
 }
 
 export async function validateFailedUpload(page: Page) {
   const alertHeader = page.getByText('File upload failed');
   const alertText = page.getByText(
-    'Unsupported file type. Supported types are: .txt, .yaml, .json.',
+    'Unsupported file type. Supported types are: .txt, .yaml, .json and .xml.',
   );
 
   await expect(alertHeader).toBeVisible();

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

@@ -24,7 +24,9 @@ export const openLightspeed = async (page: Page) => {
 };
 
 export const sendMessage = async (message: string, page: Page) => {
-  const inputLocator = page.getByRole('textbox', { name: 'Send a message...' });
+  const inputLocator = page.getByRole('textbox', {
+    name: 'Send a message and optionally upload a JSON, YAML, TXT, or XML file...',
+  });
   await inputLocator.fill(message);
   const sendButton = page.getByRole('button', { name: 'Send' });
   await sendButton.click();

workspaces/lightspeed/plugins/lightspeed/package.json

@@ -44,7 +44,7 @@
     "@material-ui/core": "^4.9.13",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@mui/icons-material": "^6.1.8",
-    "@patternfly/chatbot": "6.3.0-prerelease.20",
+    "@patternfly/chatbot": "6.3.0-prerelease.23",
     "@patternfly/react-core": "6.3.0-prerelease.17",
     "@red-hat-developer-hub/backstage-plugin-lightspeed-common": "workspace:^",
     "@tanstack/react-query": "^5.59.15",

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

@@ -27,6 +27,7 @@ interface FileAttachmentContextType {
   handleFileUpload: (files: File[]) => void;
   setFileContents: React.Dispatch<React.SetStateAction<FileContent[]>>;
   setUploadError: React.Dispatch<React.SetStateAction<UploadError>>;
+  setShowAlert: React.Dispatch<React.SetStateAction<boolean>>;
   currentFileContent?: FileContent;
   setCurrentFileContent: React.Dispatch<
     React.SetStateAction<FileContent | undefined>
@@ -85,7 +86,7 @@ const FileAttachmentContextProvider: React.FC<{
       setShowAlert(true);
       setUploadError({
         message:
-          'Unsupported file type. Supported types are: .txt, .yaml, .json.',
+          'Unsupported file type. Supported types are: .txt, .yaml, .json and .xml.',
       });
       return;
     }
@@ -138,6 +139,7 @@ const FileAttachmentContextProvider: React.FC<{
         handleFileUpload,
         isLoadingFile,
         showAlert,
+        setShowAlert,
         uploadError,
         setUploadError,
         currentFileContent,

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

@@ -16,19 +16,16 @@
 import React from 'react';
 
 import { Divider } from '@material-ui/core';
-import { ChatbotAlert, FileDetailsLabel } from '@patternfly/chatbot';
+import { FileDetailsLabel } from '@patternfly/chatbot';
 
 import { useFileAttachmentContext } from './AttachmentContext';
 
 const FilePreview = () => {
   const {
-    showAlert,
     fileContents,
     isLoadingFile,
-    uploadError,
     modalState,
     setFileContents,
-    setUploadError,
     setCurrentFileContent,
   } = useFileAttachmentContext();
 
@@ -71,17 +68,6 @@ const FilePreview = () => {
           ))}
         </div>
       )}
-      {showAlert && uploadError.message && (
-        <ChatbotAlert
-          component="h4"
-          title="File upload failed"
-          variant={uploadError.type ?? 'danger'}
-          isInline
-          onClose={() => setUploadError({ message: null })}
-        >
-          {uploadError.message}
-        </ChatbotAlert>
-      )}
     </>
   );
 };

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

@@ -15,12 +15,14 @@
  */
 
 import React from 'react';
+import { FileRejection } from 'react-dropzone/.';
 
 import { ErrorPanel } from '@backstage/core-components';
 
 import { Box, makeStyles } from '@material-ui/core';
 import {
   Chatbot,
+  ChatbotAlert,
   ChatbotContent,
   ChatbotDisplayMode,
   ChatbotFooter,
@@ -71,6 +73,9 @@ const useStyles = makeStyles(theme => ({
   header: {
     padding: `${theme.spacing(3)}px !important`,
   },
+  errorContainer: {
+    padding: theme.spacing(3),
+  },
   headerMenu: {
     // align hamburger icon with title
     '& .pf-v6-c-button': {
@@ -129,8 +134,15 @@ export const LightspeedChat = ({
   const { isReady, lastOpenedId, setLastOpenedId, clearLastOpenedId } =
     useLastOpenedConversation(user);
 
-  const { fileContents, setFileContents, handleFileUpload } =
-    useFileAttachmentContext();
+  const {
+    uploadError,
+    showAlert,
+    fileContents,
+    setShowAlert,
+    setFileContents,
+    handleFileUpload,
+    setUploadError,
+  } = useFileAttachmentContext();
 
   // Sync conversationId with lastOpenedId whenever lastOpenedId changes
   React.useEffect(() => {
@@ -346,6 +358,18 @@ export const LightspeedChat = ({
     handleFileUpload(data);
   };
 
+  const onAttachRejected = (data: FileRejection[]) => {
+    data.forEach(attachment => {
+      if (!!attachment.errors.find(e => e.code === 'file-invalid-type')) {
+        setShowAlert(true);
+        setUploadError({
+          message:
+            'Unsupported file type. Supported types are: .txt, .yaml, .json and .xml.',
+        });
+      }
+    });
+  };
+
   if (error) {
     return (
       <Box padding={1}>
@@ -401,6 +425,19 @@ export const LightspeedChat = ({
           handleTextInputChange={handleFilter}
           drawerContent={
             <>
+              {showAlert && uploadError.message && (
+                <div className={classes.errorContainer}>
+                  <ChatbotAlert
+                    component="h4"
+                    title="File upload failed"
+                    variant={uploadError.type ?? 'danger'}
+                    isInline
+                    onClose={() => setUploadError({ message: null })}
+                  >
+                    {uploadError.message}
+                  </ChatbotAlert>
+                </div>
+              )}
               <ChatbotContent>
                 <LightspeedChatBox
                   userName={userName}
@@ -419,6 +456,19 @@ export const LightspeedChat = ({
                   hasAttachButton
                   handleAttach={handleAttach}
                   hasMicrophoneButton
+                  buttonProps={{
+                    attach: {
+                      inputTestId: 'attachment-input',
+                    },
+                  }}
+                  allowedFileTypes={{
+                    'text/plain': ['.txt'],
+                    'application/json': ['.json'],
+                    'application/yaml': ['.yaml', '.yml'],
+                    'application/xml': ['.xml'],
+                  }}
+                  onAttachRejected={onAttachRejected}
+                  placeholder="Send a message and optionally upload a JSON, YAML, TXT, or XML file..."
                 />
                 <ChatbotFootnote {...getFootnoteProps(classes.footerPopover)} />
               </ChatbotFooter>

workspaces/lightspeed/plugins/lightspeed/src/components/__tests__/LightspeedChat.test.tsx

@@ -25,7 +25,9 @@ import { mockApis, TestApiProvider } from '@backstage/test-utils';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
+import { useConversations } from '../../hooks';
 import FileAttachmentContextProvider from '../AttachmentContext';
 import { LightspeedChat } from '../LightSpeedChat';
 
@@ -80,6 +82,7 @@ jest.mock('@patternfly/chatbot', () => {
   };
 });
 
+const mockUseConversations = useConversations as jest.Mock;
 const mockUsePermission = usePermission as jest.MockedFunction<
   typeof usePermission
 >;
@@ -111,6 +114,13 @@ const setupLightspeedChat = () => (
 describe('LightspeedChat', () => {
   beforeEach(() => {
     mockUsePermission.mockReturnValue({ loading: true, allowed: true });
+    mockUseConversations.mockReturnValue({
+      data: [],
+      isRefetching: false,
+      isLoading: false,
+    });
+
+    localStorage.clear();
   });
   const localStorageKey = 'lastOpenedConversation';
   const mockUser = 'user:test';
@@ -124,19 +134,17 @@ describe('LightspeedChat', () => {
   });
 
   it('should not reset localstorage if the conversations are available', async () => {
-    jest.mock('../../hooks/useConversations', () => ({
-      useConversations: jest.fn().mockReturnValue({
-        data: [
-          {
-            conversation_id: 'test-conversation-id',
-            topic_summary: 'Greetings',
-            last_message_timestamp: 1749023603.806369,
-          },
-        ],
-        isRefetching: false,
-        isLoading: false,
-      }),
-    }));
+    mockUseConversations.mockReturnValue({
+      data: [
+        {
+          conversation_id: 'test-conversation-id',
+          topic_summary: 'Greetings',
+          last_message_timestamp: 1749023603.806369,
+        },
+      ],
+      isRefetching: false,
+      isLoading: false,
+    });
 
     const storedData = JSON.stringify({ [mockUser]: 'test-conversation-id' });
     localStorage.setItem(localStorageKey, storedData);
@@ -146,14 +154,17 @@ describe('LightspeedChat', () => {
     await waitFor(() => {
       expect(screen.getByText('Developer Hub Lightspeed')).toBeInTheDocument();
 
-      expect(screen.queryByText('New chat')).not.toBeInTheDocument();
-      expect(JSON.parse(localStorage.getItem(localStorageKey)!)).toEqual({});
+      expect(screen.queryByText('New chat')).toBeInTheDocument();
+
+      expect(JSON.parse(localStorage.getItem(localStorageKey)!)).toEqual({
+        'user:test': 'test-conversation-id',
+      });
     });
   });
 
   it('should reset localstorage if the conversations are empty', async () => {
-    const storedData = JSON.stringify({ [mockUser]: 'test-conversation-id' });
-    localStorage.setItem(localStorageKey, storedData);
+    const initialData = JSON.stringify({ [mockUser]: 'test-conversation-id' });
+    localStorage.setItem(localStorageKey, initialData);
 
     render(setupLightspeedChat());
 
@@ -164,4 +175,15 @@ describe('LightspeedChat', () => {
       expect(JSON.parse(localStorage.getItem(localStorageKey)!)).toEqual({});
     });
   });
+
+  it('should set correct accept attribute on file input', async () => {
+    render(setupLightspeedChat());
+
+    await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
+    const input = screen.getByTestId('attachment-input') as HTMLInputElement;
+    expect(input).toHaveAttribute(
+      'accept',
+      'text/plain,.txt,application/json,.json,application/yaml,.yaml,.yml,application/xml,.xml',
+    );
+  });
 });

workspaces/lightspeed/plugins/lightspeed/src/types.ts

@@ -55,6 +55,7 @@ export enum SupportedFileType {
   JSON = 'application/json',
   YAML = 'application/x-yaml',
   TEXT = 'text/plain',
+  XML = 'text/xml',
 }
 export interface FileContent {
   content: string;