fix: update based on comments

Author: lyjeileen

cypress/downloads/downloads.html

@@ -10,20 +10,20 @@ import BaseInput from '../../baseInput/baseInput'
 import Uploader from '../uploader/uploader'
 
 export default function MultimodalInput(props: MultimodalInputProps) {
-  const [fileList, setFileList] = useState<string[]>([])
+  const [fileNames, setFileNames] = useState<string[]>([])
   const [messageId, setMessageId] = useState(getUUID())
   const [filePreviewsContainer, setFilePreviewsContainer] =
     useState<HTMLDivElement>()
   const [errorMessagesContainer, setErrorMessagesContainer] =
     useState<HTMLDivElement>()
   const inputRef = useRef<HTMLDivElement>(null)
-  const hasAddedFiles = fileList.length > 0
+  const hasAddedFiles = fileNames.length > 0
 
-  function handleFileListChange(action: 'add' | 'remove', fileName: string) {
+  function handleFileUpdates(action: 'add' | 'remove', fileName: string) {
     if (action === 'add') {
-      setFileList((prev) => [...prev, fileName])
+      setFileNames((prev) => [...prev, fileName])
     } else {
-      setFileList((prev) => prev.filter((file) => file !== fileName))
+      setFileNames((prev) => prev.filter((file) => file !== fileName))
     }
   }
 
@@ -46,12 +46,12 @@ export default function MultimodalInput(props: MultimodalInputProps) {
     if (hasAddedFiles) {
       formattedMessage.id = messageId
       formattedMessage.format = 'multipart'
-      formattedMessage.data.files = fileList
+      formattedMessage.data.files = fileNames
     }
 
     props.ws.send(formattedMessage)
     setMessageId(getUUID())
-    setFileList([])
+    setFileNames([])
   }
 
   return (
@@ -69,7 +69,7 @@ export default function MultimodalInput(props: MultimodalInputProps) {
             maxFileSize={props.maxFileSize}
             uploadFileEndpoint={props.uploadFileEndpoint}
             deleteFileEndpoint={props.deleteFileEndpoint}
-            handleFileListChange={handleFileListChange}
+            onFileUpdate={handleFileUpdates}
             messageId={messageId}
             filePreviewsContainer={filePreviewsContainer}
             errorMessagesContainer={errorMessagesContainer}

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

@@ -153,14 +153,14 @@ function Uploader(props: UploaderProps) {
     setAddedFiles((prev) => prev.filter((file) => file.id !== id))
   }
 
-  function updateDuplicateFileName(file: File) {
+  function getFileName(file: File) {
     let fileName = file.name
-    const extensionIndex = fileName.lastIndexOf('.')
-    const baseName = fileName.substring(0, extensionIndex)
     const fileNameCount = fileNamesRef.current[fileName]
 
     if (fileNameCount) {
       const newCount = fileNameCount + 1
+      const extensionIndex = fileName.lastIndexOf('.')
+      const baseName = fileName.substring(0, extensionIndex)
       const extension = fileName.substring(extensionIndex)
       fileName = `${baseName}(${fileNameCount})${extension}`
       fileNamesRef.current = { ...fileNamesRef.current, [file.name]: newCount }
@@ -174,8 +174,10 @@ function Uploader(props: UploaderProps) {
   function uploadFile(file: File) {
     const formData = new FormData()
     const controller = new AbortController()
-    formData.append('file', file)
-    const fileName = updateDuplicateFileName(file)
+
+    const fileName = getFileName(file)
+    const updatedFile = new File([file], fileName, { type: file.type })
+    formData.append('file', updatedFile)
     const temporaryFileId = getUUID()
     const newAddedFile = {
       name: fileName,
@@ -185,15 +187,15 @@ function Uploader(props: UploaderProps) {
     }
 
     setAddedFiles((prev) => [...prev, newAddedFile])
-    props.handleFileListChange('add', fileName)
+    props.onFileUpdate('add', fileName)
 
     function handleUploadProgress(progressEvent: AxiosProgressEvent) {
       const percentageConversionRate = 100
       if (progressEvent.total) {
         const loadedPercentage =
           (progressEvent.loaded / progressEvent.total) *
           percentageConversionRate
-        updateProgress(loadedPercentage, temporaryFileId)
+        updateProgress(loadedPercentage, newAddedFile.id)
       }
     }
 
@@ -204,15 +206,15 @@ function Uploader(props: UploaderProps) {
         signal: controller.signal,
       })
       .then((response) => {
-        handleSuccessfulUpload(response.data, temporaryFileId)
+        handleSuccessfulUpload(response.data, newAddedFile.id)
       })
       .catch((error) => {
-        props.handleFileListChange('remove', fileName)
+        props.onFileUpdate('remove', fileName)
         fileNamesRef.current = {
           ...fileNamesRef.current,
           [fileName]: fileNamesRef.current[file.name]--,
         }
-        handleFailedUpload(file.name, temporaryFileId, error.response?.data)
+        handleFailedUpload(file.name, newAddedFile.id, error.response?.data)
       })
   }
 
@@ -223,7 +225,7 @@ function Uploader(props: UploaderProps) {
       ...fileNamesRef.current,
       [fileName]: fileNamesRef.current[fileName]--,
     }
-    props.handleFileListChange('remove', fileName)
+    props.onFileUpdate('remove', fileName)
     if (file.loadingProgress === maximumLoadingProgress) {
       const deleteUrl = `${props.deleteFileEndpoint}?message-id=${props.messageId}&file-id=${file.id}`
 
@@ -233,7 +235,7 @@ function Uploader(props: UploaderProps) {
           return setAddedFiles((prev) => prev.filter((_, i) => i !== index))
         })
         .catch(() => {
-          props.handleFileListChange('add', fileName)
+          props.onFileUpdate('add', fileName)
           return setErrorMessages((prevMessages) => [
             ...prevMessages,
             `Failed to delete ${fileName}. Please try again.`,

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

@@ -189,8 +189,8 @@ export interface UploaderProps {
   deleteFileEndpoint: string
   /** Used in the API request to link the file with the message that's going to be sent. */
   messageId: string
-  /** A function to handle changes in the file list. Parent component should use this to track file names and handle submit accordingly. */
-  handleFileListChange: (action: 'add' | 'remove', fileName: string) => void
+  /** A function to handle changes in the file list. The parent component should use this to track file names and handle submit accordingly. */
+  onFileUpdate: (action: 'add' | 'remove', fileName: string) => void
   /** Optional HTML div where the errors should be shown. */
   errorMessagesContainer?: HTMLDivElement
   /** Optional HTML div where the filePreviews should be shown. */
@@ -205,7 +205,7 @@ export type MultimodalInputProps = TextInputProps &
   Omit<
     UploaderProps,
     | 'messageId'
-    | 'handleFileListChange'
+    | 'onFileUpdate'
     | 'filePreviewsContainer'
     | 'errorMessagesContainer'
   >