diff --git a/src/SessionMessages/SessionMessage/MessageFiles.tsx b/src/SessionMessages/SessionMessage/MessageFiles.tsx index 5d281a5..863b3e8 100644 --- a/src/SessionMessages/SessionMessage/MessageFiles.tsx +++ b/src/SessionMessages/SessionMessage/MessageFiles.tsx @@ -38,10 +38,13 @@ export const MessageFiles: FC = ({ files, children }) => { } ); + const maxImageLength = 3; + const truncateImages = !expanded && imageFiles.length > maxImageLength; + // Renders the image files based on the current expansion state const renderImageFiles = (images: ConversationFile[]) => { - return !expanded && imageFiles.length > 3 - ? images.slice(0, 3).map((image, index) => ( + return truncateImages + ? images.slice(0, maxImageLength).map((image, index) => (
= ({ files, children }) => { alt={image.name} className="relative w-full h-full object-cover rounded-lg" /> - {index === 2 && ( + {index === maxImageLength - 1 && (
setExpanded(true)} > - +{(imageFiles.length - 3).toLocaleString()} + +{(imageFiles.length - maxImageLength).toLocaleString()}
)}
@@ -72,7 +75,7 @@ export const MessageFiles: FC = ({ files, children }) => {
{imageFiles.length > 0 && renderImageFiles(imageFiles)}