Merge pull request #447 from Cognigy/bug/63390-display-properly-uploa…

…d-progressbar Fix file attachment upload progress bar
Cognigy · Jul 18, 2024 · f89f413 · f89f413
2 parents aaa7d45 + 015557f
commit f89f413
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 22 deletions.
diff --git a/src/webchat-ui/components/plugins/input/file/PreviewUploadedFiles.tsx b/src/webchat-ui/components/plugins/input/file/PreviewUploadedFiles.tsx
@@ -34,6 +34,8 @@ const UploadedFilesContainer = styled.div(({ theme }) => ({
 }));
 
 const FilePreviewWrapper = styled.div(({ theme }) => ({
+	position: 'relative',
+	overflow: 'hidden',
 	borderRadius: 15,
 	height: 33,
 	backgroundColor: theme.black95,
@@ -44,8 +46,11 @@ const FilePreviewWrapper = styled.div(({ theme }) => ({
 
 const UploadedFilePreview = styled.div(() => ({
 	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
 	gap: 12,
-	padding: "8px 12px",
+	padding: "0px 12px",
+	height: "100%",
 }));
 
 const FileName = styled(Typography)<Pick<IFile, "hasUploadError">>(({ hasUploadError, theme }) => ({
@@ -56,11 +61,6 @@ const FileName = styled(Typography)<Pick<IFile, "hasUploadError">>(({ hasUploadE
 	alignSelf: "center",
 }));
 
-const FileExtension = styled(Typography)(({ theme }) => ({
-	color: theme.black10,
-	alignSelf: "center",
-}));
-
 const FileSize = styled(Typography)(({ theme }) => ({
 	color: theme.black40,
 	alignSelf: "center",
@@ -117,22 +117,15 @@ const PreviewUploadedFiles: FC = () => {
 						>
 							<CloseIcon />
 						</RemoveFileButton>
-						<span>
-							<FileName
-								component="span"
-								variant="title2-regular"
-								hasUploadError={item.hasUploadError}
-							>
-								{!item.hasUploadError
-									? getFileName(item.file.name)
-									: item.uploadErrorReason}
-							</FileName>
-							{!item.hasUploadError && (
-								<FileExtension component="span" variant="title2-regular">
-									{getFileExtension(item.file.name)}
-								</FileExtension>
-							)}
-						</span>
+						<FileName
+							component="span"
+							variant="title2-regular"
+							hasUploadError={item.hasUploadError}
+						>
+							{!item.hasUploadError
+								? `${getFileName(item.file.name)}${getFileExtension(item.file.name)}`
+								: item.uploadErrorReason}
+						</FileName>
 						<FileSize component="span" variant="title2-regular">
 							{item.file.size > 1000000
 								? `${(item.file.size / 1000000).toFixed(2)} MB`

diff --git a/src/webchat-ui/components/presentational/LinearProgressBar.tsx b/src/webchat-ui/components/presentational/LinearProgressBar.tsx
@@ -6,6 +6,9 @@ const ProgressBarContainer = styled.div(() => ({
     width: '100%',
     backgroundColor: "#e0e0de",
     borderRadius: 50,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
 }));
 
 const ProgressBar = styled.div<ILinearProgressBarProps>(({ theme, progressPercentage }) => ({