feat(lightspeed): support drag and drop in lightspeed (#954)

* support file drag and drop in lightspeed

* add unit tests

* add drag and drop support for attachments

Author: karthikjeeyar

workspaces/lightspeed/.changeset/healthy-olives-rush.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
+---
+
+Added support for Drag and Drop attachment upload

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

@@ -31,14 +31,15 @@ import {
   ChatbotHeaderMain,
   ChatbotHeaderMenu,
   ChatbotHeaderTitle,
+  FileDropZone,
   MessageBar,
   MessageProps,
 } from '@patternfly/chatbot';
 import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
 import { DropdownItem, DropEvent, Title } from '@patternfly/react-core';
 import { useQueryClient } from '@tanstack/react-query';
 
-import { TEMP_CONVERSATION_ID } from '../const';
+import { supportedFileTypes, TEMP_CONVERSATION_ID } from '../const';
 import {
   useBackstageUserIdentity,
   useConversationMessages,
@@ -232,11 +233,19 @@ export const LightspeedChat = ({
     (async () => {
       if (conversationId !== TEMP_CONVERSATION_ID) {
         setMessages([]);
+        setFileContents([]);
+        setUploadError({ message: null });
         setConversationId(TEMP_CONVERSATION_ID);
         setNewChatCreated(true);
       }
     })();
-  }, [conversationId, setConversationId, setMessages]);
+  }, [
+    conversationId,
+    setConversationId,
+    setMessages,
+    setUploadError,
+    setFileContents,
+  ]);
 
   const openDeleteModal = (conversation_id: string) => {
     setTargetConversationId(conversation_id);
@@ -324,9 +333,11 @@ export const LightspeedChat = ({
         }
         return c_id;
       });
+      setFileContents([]);
+      setUploadError({ message: null });
       scrollToBottomRef.current?.scrollToBottom();
     },
-    [setConversationId, scrollToBottomRef],
+    [setConversationId, setUploadError, setFileContents, scrollToBottomRef],
   );
 
   const conversationFound = !!conversations.find(
@@ -424,7 +435,13 @@ export const LightspeedChat = ({
           onNewChat={newChatCreated ? undefined : onNewChat}
           handleTextInputChange={handleFilter}
           drawerContent={
-            <>
+            <FileDropZone
+              onFileDrop={(e, data) => handleAttach(data, e)}
+              displayMode={ChatbotDisplayMode.embedded}
+              infoText="Supported file types are: .txt, .yaml, .json and .xml. The maximum file size is 25 MB."
+              allowedFileTypes={supportedFileTypes}
+              onAttachRejected={onAttachRejected}
+            >
               {showAlert && uploadError.message && (
                 <div className={classes.errorContainer}>
                   <ChatbotAlert
@@ -438,6 +455,7 @@ export const LightspeedChat = ({
                   </ChatbotAlert>
                 </div>
               )}
+
               <ChatbotContent>
                 <LightspeedChatBox
                   userName={userName}
@@ -461,18 +479,13 @@ export const LightspeedChat = ({
                       inputTestId: 'attachment-input',
                     },
                   }}
-                  allowedFileTypes={{
-                    'text/plain': ['.txt'],
-                    'application/json': ['.json'],
-                    'application/yaml': ['.yaml', '.yml'],
-                    'application/xml': ['.xml'],
-                  }}
+                  allowedFileTypes={supportedFileTypes}
                   onAttachRejected={onAttachRejected}
                   placeholder="Send a message and optionally upload a JSON, YAML, TXT, or XML file..."
                 />
                 <ChatbotFootnote {...getFootnoteProps(classes.footerPopover)} />
               </ChatbotFooter>
-            </>
+            </FileDropZone>
           }
         />
       </Chatbot>

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

@@ -24,7 +24,13 @@ import { usePermission } from '@backstage/plugin-permission-react';
 import { mockApis, TestApiProvider } from '@backstage/test-utils';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { useConversations } from '../../hooks';
@@ -186,4 +192,38 @@ describe('LightspeedChat', () => {
       'text/plain,.txt,application/json,.json,application/yaml,.yaml,.yml,application/xml,.xml',
     );
   });
+
+  it('should show an alert when unsupported file types are dropped', async () => {
+    render(setupLightspeedChat());
+
+    const fileDropzone = screen.getByText('MessageBox')
+      .parentElement as HTMLElement;
+
+    const invalidFile = new File(['dummy'], 'file.pdf', {
+      type: 'application/pdf',
+    });
+
+    const dataTransfer = {
+      files: [invalidFile],
+      items: [
+        {
+          kind: 'file',
+          type: 'application/pdf',
+          getAsFile: () => invalidFile,
+        },
+      ],
+      types: ['Files'],
+    };
+    await act(async () => {
+      fireEvent.drop(fileDropzone, {
+        dataTransfer,
+      });
+    });
+
+    expect(
+      screen.getByText(
+        'Unsupported file type. Supported types are: .txt, .yaml, .json and .xml.',
+      ),
+    ).toBeInTheDocument();
+  });
 });

workspaces/lightspeed/plugins/lightspeed/src/const.ts

@@ -25,6 +25,13 @@ const createPrompt = (title: string, message: string) => {
   return { title, message };
 };
 
+export const supportedFileTypes = {
+  'text/plain': ['.txt'],
+  'application/json': ['.json'],
+  'application/yaml': ['.yaml', '.yml'],
+  'application/xml': ['.xml'],
+};
+
 export const DEFAULT_SAMPLE_PROMPTS: SamplePrompts = [
   createPrompt(
     'Get Help On Code Readability',