Merge pull request #115 from lyjeileen/files

Shiti · web-flow · commit 06d705ec5d26 · 2024-05-03T13:43:45.000-04:00
feat: add multipart component
diff --git a/src/components/filePreview/filePreview.css b/src/components/filePreview/filePreview.css
@@ -0,0 +1,9 @@
+.rustic-file-preview {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 8px 8px 8px 16px;
+  justify-content: space-between;
+  width: 220px;
+  height: 56px;
+}
diff --git a/src/components/filePreview/filePreview.tsx b/src/components/filePreview/filePreview.tsx
@@ -0,0 +1,33 @@
+import './filePreview.css'
+
+import Card from '@mui/material/Card'
+import { useTheme } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+import React from 'react'
+
+import { shortenString } from '../helper'
+import type { FileData } from '../types'
+
+export interface FilePreviewProps {
+  file: FileData
+}
+
+export default function FilePreview(
+  props: React.PropsWithChildren<FilePreviewProps>
+) {
+  const theme = useTheme()
+  const maximumFileNameLength = 15
+  return (
+    <Card
+      className="rustic-file-preview"
+      data-cy="file-preview"
+      variant="outlined"
+      sx={{ boxShadow: theme.shadows[1] }}
+    >
+      <Typography variant="subtitle2" data-cy="file-name">
+        {shortenString(props.file.name, maximumFileNameLength)}
+      </Typography>
+      {props.children}
+    </Card>
+  )
+}
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -13,6 +13,7 @@ import Video from './media/video/video'
 import PopoverMenu from './menu/popoverMenu'
 import MessageCanvas from './messageCanvas/messageCanvas'
 import MessageSpace from './messageSpace/messageSpace'
+import Multipart from './multipart/multipart'
 import NavBar from './navBar/navBar'
 import ParticipantsContainer from './participantsContainer/participantsContainer'
 import Table from './table/table'
@@ -31,6 +32,7 @@ export {
   MessageCanvas,
   MessageSpace,
   MultimodalInput,
+  Multipart,
   NavBar,
   OpenLayersMap,
   ParticipantsContainer,
diff --git a/src/components/input/multimodal/multimodalInput/multimodalInput.css b/src/components/input/multimodal/multimodalInput/multimodalInput.css
@@ -26,7 +26,3 @@
 .rustic-bottom-buttons {
   padding: 8px;
 }
-
-.rustic-multimodal-input .rustic-files {
-  padding: 16px;
-}
diff --git a/src/components/input/multimodal/multimodalInput/multimodalInput.stories.tsx b/src/components/input/multimodal/multimodalInput/multimodalInput.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 import { v4 as getUUID } from 'uuid'
 
-import type { Message } from '../../../types'
+import type { FileData, Message } from '../../../types'
 import MultimodalInput from './multimodalInput'
 
 const meta: Meta<React.ComponentProps<typeof MultimodalInput>> = {
@@ -159,7 +159,9 @@ export const Default = {
         let fileMessage = ''
         let textMessage = ''
         if (message.data.files && message.data.files.length > 0) {
-          const fileNames = message.data.files.join(', ')
+          const fileNames = message.data.files
+            .map((file: FileData) => file.name)
+            .join(', ')
           fileMessage = `File(s): ${fileNames}`
         }
         if (message.data.text) {
diff --git a/src/components/input/multimodal/multimodalInput/multimodalInput.tsx b/src/components/input/multimodal/multimodalInput/multimodalInput.tsx
@@ -1,29 +1,30 @@
 import './multimodalInput.css'
+import '../../../../index.css'
 
 import Box from '@mui/material/Box'
 import { useEffect, useRef, useState } from 'react'
 import React from 'react'
 import { v4 as getUUID } from 'uuid'
 
-import type { Message, MultimodalInputProps } from '../../../types'
+import type { FileData, Message, MultimodalInputProps } from '../../../types'
 import BaseInput from '../../baseInput/baseInput'
 import Uploader from '../uploader/uploader'
 
 export default function MultimodalInput(props: MultimodalInputProps) {
-  const [fileNames, setFileNames] = useState<string[]>([])
+  const [filesInfo, setFilesInfo] = useState<FileData[]>([])
   const [messageId, setMessageId] = useState(getUUID())
   const [filePreviewsContainer, setFilePreviewsContainer] =
     useState<HTMLDivElement>()
   const [errorMessagesContainer, setErrorMessagesContainer] =
     useState<HTMLDivElement>()
   const inputRef = useRef<HTMLDivElement>(null)
-  const hasAddedFiles = fileNames.length > 0
+  const hasAddedFiles = filesInfo.length > 0
 
   function handleFileUpdates(action: 'add' | 'remove', fileName: string) {
     if (action === 'add') {
-      setFileNames((prev) => [...prev, fileName])
+      setFilesInfo((prev) => [...prev, { name: fileName }])
     } else {
-      setFileNames((prev) => prev.filter((file) => file !== fileName))
+      setFilesInfo((prev) => prev.filter((file) => file.name !== fileName))
     }
   }
 
@@ -46,12 +47,12 @@ export default function MultimodalInput(props: MultimodalInputProps) {
     if (hasAddedFiles) {
       formattedMessage.id = messageId
       formattedMessage.format = 'multipart'
-      formattedMessage.data.files = fileNames
+      formattedMessage.data.files = filesInfo
     }
 
     props.ws.send(formattedMessage)
     setMessageId(getUUID())
-    setFileNames([])
+    setFilesInfo([])
   }
 
   return (
diff --git a/src/components/input/multimodal/uploader/uploader.css b/src/components/input/multimodal/uploader/uploader.css
@@ -1,12 +1,3 @@
-.rustic-file-preview {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  justify-content: space-between;
-  width: 220px;
-}
-
 .rustic-file-preview .rustic-upload-progress {
   width: 40px;
   height: 8px;
@@ -21,12 +12,10 @@
   display: none;
 }
 
-.rustic-files {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
 .rustic-error-message {
   display: block;
 }
+
+.rustic-padding-16 {
+  padding: 16px;
+}
diff --git a/src/components/input/multimodal/uploader/uploader.tsx b/src/components/input/multimodal/uploader/uploader.tsx
@@ -1,7 +1,6 @@
 import './uploader.css'
 
 import Box from '@mui/material/Box'
-import Card from '@mui/material/Card'
 import IconButton from '@mui/material/IconButton'
 import LinearProgress from '@mui/material/LinearProgress'
 import Tooltip from '@mui/material/Tooltip'
@@ -12,10 +11,9 @@ import React, { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { v4 as getUUID } from 'uuid'
 
-import { shortenString } from '../../../helper'
+import FilePreview from '../../../filePreview/filePreview'
 import type { UploaderProps } from '../../../types'
 
-const maximumFileNameLength = 15
 const maximumLoadingProgress = 100
 
 interface FileInfo {
@@ -251,41 +249,33 @@ function Uploader(props: UploaderProps) {
     }
   }
 
-  function renderFilePreview(file: FileInfo, index: number) {
-    return (
-      <Card className="rustic-file-preview" key={index}>
-        <Typography variant="subtitle2" data-cy="file-name">
-          {shortenString(file.name, maximumFileNameLength)}
-        </Typography>
-
-        <Box className="rustic-flex-center">
-          {file.loadingProgress < maximumLoadingProgress && (
-            <LinearProgress
-              variant="determinate"
-              color="secondary"
-              value={file.loadingProgress}
-              className="rustic-upload-progress"
-            />
-          )}
-          <Tooltip title="Delete">
-            <IconButton
-              data-cy="delete-button"
-              color="primary"
-              onClick={() => handleDelete(file, index)}
-              className="rustic-delete-button"
-              aria-label="cancel file upload"
-            >
-              <span className="material-symbols-rounded">cancel</span>
-            </IconButton>
-          </Tooltip>
-        </Box>
-      </Card>
-    )
-  }
-
   const filePreviews = (
-    <Box className="rustic-files">
-      {addedFiles.map((file, index) => renderFilePreview(file, index))}
+    <Box className="rustic-files rustic-padding-16">
+      {addedFiles.map((file, index) => (
+        <FilePreview file={{ name: file.name }} key={index}>
+          <Box className="rustic-flex-center">
+            {file.loadingProgress < maximumLoadingProgress && (
+              <LinearProgress
+                variant="determinate"
+                color="secondary"
+                value={file.loadingProgress}
+                className="rustic-upload-progress"
+              />
+            )}
+            <Tooltip title="Delete">
+              <IconButton
+                data-cy="delete-button"
+                color="primary"
+                onClick={() => handleDelete(file, index)}
+                className="rustic-delete-button"
+                aria-label="cancel file upload"
+              >
+                <span className="material-symbols-rounded">cancel</span>
+              </IconButton>
+            </Tooltip>
+          </Box>
+        </FilePreview>
+      ))}
     </Box>
   )
 
diff --git a/src/components/messageSpace/messageSpace.stories.tsx b/src/components/messageSpace/messageSpace.stories.tsx
@@ -7,6 +7,7 @@ import {
   MarkedMarkdown,
   MarkedStreamingMarkdown,
   type Message,
+  Multipart,
   OpenLayersMap,
   RechartsTimeSeries,
   Sound,
@@ -372,6 +373,25 @@ export const Default = {
           title: 'Video Title',
         },
       },
+      {
+        ...humanMessageData,
+        id: getUUID(),
+        timestamp: '2024-01-02T00:20:00.000Z',
+        format: 'text',
+        data: {
+          text: 'Could you show me an example of the multipart component?',
+        },
+      },
+      {
+        ...agentMessageData,
+        id: getUUID(),
+        timestamp: '2024-01-02T00:21:00.000Z',
+        format: 'multipart',
+        data: {
+          text: 'Here is an example of the multipart component:',
+          files: [{ name: 'imageExample.png' }, { name: 'pdfExample.pdf' }],
+        },
+      },
     ],
     supportedElements: {
       text: Text,
@@ -387,6 +407,7 @@ export const Default = {
       codeSnippet: CodeSnippet,
       sound: Sound,
       video: Video,
+      multipart: Multipart,
     },
     getProfileComponent: (message: Message) => {
       if (message.sender.includes('Agent')) {
diff --git a/src/components/multipart/multipart.css b/src/components/multipart/multipart.css
@@ -0,0 +1,5 @@
+.rustic-multipart {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
diff --git a/src/components/multipart/multipart.cy.tsx b/src/components/multipart/multipart.cy.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+import { supportedViewports } from '../../../cypress/support/variables'
+import Multipart from './multipart'
+
+describe('Multipart Component', () => {
+  const props = {
+    text: 'This is a test message',
+    files: [{ name: 'image.jpg' }, { name: 'document.pdf' }],
+  }
+
+  const filePreview = `[data-cy=file-preview]`
+  supportedViewports.forEach((viewport) => {
+    it(`renders text and file previews correctly on ${viewport} screen`, () => {
+      const maximumFileNameLength = 15
+      cy.mount(<Multipart {...props} />)
+
+      cy.contains(props.text).should('be.visible')
+      cy.get(filePreview).should('have.length', props.files.length)
+
+      props.files.forEach((file, index) => {
+        cy.get(`${filePreview}:eq(${index})`).within(() => {
+          cy.get('[data-cy=file-name]').should(
+            'contain',
+            file.name.substring(0, maximumFileNameLength)
+          )
+        })
+      })
+    })
+
+    it(`renders without text on ${viewport} screen`, () => {
+      cy.mount(<Multipart files={props.files} />)
+
+      cy.contains(props.text).should('not.exist')
+      cy.get(filePreview).should('have.length', props.files.length)
+    })
+  })
+})
diff --git a/src/components/multipart/multipart.stories.tsx b/src/components/multipart/multipart.stories.tsx
@@ -0,0 +1,51 @@
+import Multipart from './multipart'
+
+const meta = {
+  title: 'Rustic UI/Multipart/Multipart',
+  component: Multipart,
+  tags: ['autodocs'],
+  argTypes: {
+    files: {
+      table: {
+        type: {
+          summary: 'An array of FileData.\n',
+          detail:
+            'Each FileData has the following fields:\n' +
+            '  name: The name of the file.\n' +
+            '  url: Optional string of the file url. \n',
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The `Multipart` component is a versatile message format designed to accommodate both textual content and file attachments within a single message interface.',
+      },
+    },
+  },
+}
+
+export default meta
+
+const fileList = [
+  { name: 'File1.pdf' },
+  { name: 'File2.doc' },
+  { name: 'File3.docx' },
+  { name: 'File4.png' },
+  { name: 'File5.jpg' },
+]
+
+export const Default = {
+  args: {
+    text: 'This is a multipart message with text',
+    files: fileList,
+  },
+}
+
+export const FilesOnly = {
+  args: {
+    files: fileList,
+  },
+}
diff --git a/src/components/multipart/multipart.tsx b/src/components/multipart/multipart.tsx
diff --git a/src/components/types.ts b/src/components/types.ts
diff --git a/src/index.css b/src/index.css

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,3 @@`
`26`	`26`	`.rustic-bottom-buttons {`
`27`	`27`	`padding: 8px;`
`28`	`28`	`}`
`29`		`-`
`30`		`-.rustic-multimodal-input .rustic-files {`
`31`		`- padding: 16px;`
`32`		`-}`