Merge pull request #298 from lyjeileen/input

fix(input): add popover menu to multimodalInput and uploader

Author: Shiti

src/components/input/multimodal/multimodalInput/multimodalInput.cy.tsx

@@ -41,6 +41,20 @@ describe('Input', () => {
         getUploadData={() => {
           return { userId: testUser.id }
         }}
+        uploadOptions={[
+          {
+            label: 'Upload Excel Sheet',
+            iconName: 'request_quote',
+            metadata: { file_meta: '{"uploadedBy":"id","category":"Finance"}' },
+          },
+          {
+            label: 'Upload Video',
+            iconName: 'movie',
+            metadata: { file_meta: '{"uploadedBy":"id","category": "Video"}' },
+            acceptedFileTypes:
+              '.mp4, .mov, .avi, .mkv, .wmv, .flv, .webm, .m4v',
+          },
+        ]}
       />
     )
   })
@@ -333,5 +347,34 @@ describe('Input', () => {
         cy.get(fileName).should('not.exist')
       })
     })
+
+    it(`displays upload options correctly on ${viewport} screen`, () => {
+      cy.viewport(viewport)
+      cy.get(uploadButton).click()
+      cy.contains('Upload Excel Sheet').should('be.visible')
+      cy.contains('Upload Video').should('be.visible')
+    })
+
+    it('uploads file with correct metadata', () => {
+      cy.viewport(viewport)
+
+      cy.intercept(
+        {
+          method: 'POST',
+          url: '/upload?message-id=*',
+        },
+        { url: '' }
+      ).as('upload')
+      cy.get(uploadButton).click()
+      cy.contains('Upload Video').click()
+      cy.get('input[type=file]').selectFile([videoFile], {
+        force: true,
+      })
+      cy.wait('@upload').interceptFormData((formData) => {
+        expect(formData['file_meta']).to.eq(
+          '{"uploadedBy":"id","category": "Video"}'
+        )
+      })
+    })
   })
 })

src/components/input/multimodal/multimodalInput/multimodalInput.stories.tsx

@@ -139,6 +139,21 @@ multiModalInputMeta.argTypes = {
       type: { summary: '(fileName: string) => { [key: string]: any }' },
     },
   },
+  uploadOptions: {
+    description:
+      'Optional props. Defines the available options for file upload, displayed within a popover menu. If no options are provided, an upload icon button will be displayed by default.',
+    table: {
+      type: {
+        summary: 'An array of UploadOption.\n',
+        detail:
+          'Each UploadOption has the following fields:\n' +
+          '  label: The text label displayed for the upload option, shown in the popover menu.\n' +
+          '  metadata: Metadata associated with this upload option, provided as key-value pairs. This data is typically sent along with the uploaded file to provide additional context or configuration.\n' +
+          '  acceptedFileTypes: Optional props. Specifies the types of files accepted for this upload option, formatted as a comma-separated string. If not provided, acceptedFileTypes for the entire component will be applied. \n' +
+          '  iconName: Optional props. The name of the Material Symbol to display alongside this upload option.',
+      },
+    },
+  },
 }
 
 export default multiModalInputMeta
@@ -182,7 +197,7 @@ export const PDFAndImageOnly = {
     ...Default.args,
     acceptedFileTypes: 'image/*,.pdf',
     getUploadData: () => {
-      return { userId: 'testUserId' }
+      return { file_meta: '{ "uploadedBy": "testId" }' }
     },
   },
 }
@@ -207,3 +222,26 @@ export const SpeechToText = {
     enableSpeechToText: true,
   },
 }
+
+export const HasMenu = {
+  args: {
+    ...Default.args,
+    acceptedFileTypes: '.xlsx, .xls, .csv',
+    getUploadData: () => {
+      return { file_meta: '{ "uploadedBy": "testId" }' }
+    },
+    uploadOptions: [
+      {
+        label: 'Upload Excel Sheet',
+        iconName: 'request_quote',
+        metadata: { file_meta: '{"uploadedBy":"id","category":"Finance"}' },
+      },
+      {
+        label: 'Upload Video',
+        iconName: 'movie',
+        metadata: { file_meta: '{"uploadedBy":"id","category": "Video"}' },
+        acceptedFileTypes: '.mp4, .mov, .avi, .mkv, .wmv, .flv, .webm, .m4v',
+      },
+    ],
+  },
+}

src/components/input/multimodal/multimodalInput/multimodalInput.tsx

@@ -104,6 +104,7 @@ export default function MultimodalInput(props: MultimodalInputProps) {
             errorMessagesContainer={errorMessagesContainer}
             showFullName={props.showFullName}
             getUploadData={props.getUploadData}
+            uploadOptions={props.uploadOptions}
           />
         </Box>
       </BaseInput>

src/components/input/multimodal/uploader/uploader.tsx

@@ -12,7 +12,9 @@ import { createPortal } from 'react-dom'
 import { v4 as getUUID } from 'uuid'
 
 import FilePreview from '../../../filePreview/filePreview'
-import type { UploaderProps } from '../../../types'
+import Icon from '../../../icon'
+import PopoverMenu from '../../../menu/popoverMenu'
+import type { UploaderProps, UploadOption } from '../../../types'
 
 const maximumLoadingProgress = 100
 
@@ -56,6 +58,10 @@ export function getFileSizeAbbrev(bytes: number): string {
 function Uploader(props: UploaderProps) {
   const [addedFiles, setAddedFiles] = useState<FileInfo[]>([])
   const [errorMessages, setErrorMessages] = useState<string[]>([])
+  const [additionalMetadata, setAdditionalMetadata] = useState<{
+    [key: string]: any
+  }>({})
+
   const fileNamesRef = useRef<{ [key: string]: number }>({})
   const inputId = getUUID()
 
@@ -176,11 +182,19 @@ function Uploader(props: UploaderProps) {
     const fileName = getFileName(file)
     const updatedFile = new File([file], fileName, { type: file.type })
 
-    if (props.getUploadData) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const extraData: { [key: string]: any } = props.getUploadData(fileName)
-      Object.keys(extraData).map((key) => {
-        formData.append(key, extraData[key])
+    if (props.getUploadData || additionalMetadata) {
+      const generalMetadata = props.getUploadData
+        ? props.getUploadData(fileName)
+        : {}
+
+      const combinedData = { ...generalMetadata, ...additionalMetadata }
+
+      Object.keys(combinedData).forEach((key) => {
+        const value = combinedData[key]
+        formData.append(
+          key,
+          typeof value === 'object' ? JSON.stringify(value) : value
+        )
       })
     }
 
@@ -327,25 +341,52 @@ function Uploader(props: UploaderProps) {
     }
   }
 
+  function handleMenuClick(option: UploadOption) {
+    setAdditionalMetadata(option.metadata)
+    const fileInput = document.getElementById(inputId) as HTMLInputElement
+    if (fileInput) {
+      fileInput.accept = option.acceptedFileTypes || props.acceptedFileTypes
+    }
+
+    fileInput.click()
+  }
+
+  const menuItems = props.uploadOptions?.map((option) => {
+    return {
+      label: option.label,
+      onClick: () => handleMenuClick(option),
+      startDecorator: option.iconName && <Icon name={option.iconName} />,
+    }
+  })
+
   return (
     <>
       <Box className="rustic-uploader">
         <label htmlFor={inputId} data-cy="upload-button">
-          <Tooltip title="Upload">
-            <IconButton
-              component="span"
-              aria-label="Upload file"
-              sx={{
-                color: 'primary.light',
-                '&:hover': {
-                  color: 'primary.main',
-                },
-              }}
-            >
-              <span className="material-symbols-rounded">upload_2</span>
-            </IconButton>
-          </Tooltip>
+          {menuItems?.length ? (
+            <PopoverMenu
+              ariaLabel="Upload"
+              icon={<Icon name="upload_2" />}
+              menuItems={menuItems}
+            />
+          ) : (
+            <Tooltip title="Upload">
+              <IconButton
+                component="span"
+                aria-label="Upload file"
+                sx={{
+                  color: 'primary.light',
+                  '&:hover': {
+                    color: 'primary.main',
+                  },
+                }}
+              >
+                <span className="material-symbols-rounded">upload_2</span>
+              </IconButton>
+            </Tooltip>
+          )}
         </label>
+
         <input
           type="file"
           id={inputId}

src/components/types.ts

@@ -261,6 +261,13 @@ export interface TextInputProps
   ws: WebSocketClient
 }
 
+export interface UploadOption {
+  label: string
+  metadata: { [key: string]: any }
+  acceptedFileTypes?: string
+  iconName?: string
+}
+
 export interface UploaderProps {
   /** The types of files that are allowed to be selected for upload. For safety reasons, only allow file types that can be handled by your server. Avoid accepting executable file types like .exe, .bat, or .msi. For more information, refer to the [mdn web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
   acceptedFileTypes: string
@@ -284,6 +291,8 @@ export interface UploaderProps {
   showFullName?: boolean
   /** A function that can be used to define additional data to be sent along with the file upload. */
   getUploadData?: (fileName: string) => { [key: string]: any }
+  /** Defines the available options for file upload, displayed within a popover menu. If no options are provided, an upload icon button will be displayed by default.*/
+  uploadOptions?: UploadOption[]
 }
 
 export type MultimodalInputProps = TextInputProps &
@@ -364,4 +373,4 @@ export interface FormFormat extends DataFormat {
   schema: any
 }
 
-export interface DynamicFormProps extends FormFormat, ConversationProps {}
+export interface DynamicFormProps extends FormFormat, ConversationProps {}