feat: Support message with multiple attachments

app/containers/AudioPlayer/styles.ts

@@ -10,8 +10,7 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		height: 56,
 		borderWidth: 1,
-		borderRadius: 4,
-		marginBottom: 8
+		borderRadius: 4
 	},
 	playPauseButton: {
 		alignItems: 'center',

app/containers/message/Components/Attachments/Attachments.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { dequal } from 'dequal';
+import { View } from 'react-native';
 
 import Image from './Image';
 import Audio from './Audio';
@@ -87,7 +88,7 @@ const Attachments: React.FC<IMessageAttachments> = React.memo(
 				/>
 			);
 		});
-		return <>{attachmentsElements}</>;
+		return <View style={{ gap: 4 }}>{attachmentsElements}</View>;
 	},
 	(prevProps, nextProps) => dequal(prevProps.attachments, nextProps.attachments)
 );

app/containers/message/Message.stories.tsx

@@ -378,7 +378,7 @@ export const WithImage = () => (
 			attachments={[
 				{
 					title: 'This is a title',
-					description: 'This is a description',
+					description: 'This is a description :nyan_rocket:',
 					image_url: '/dummypath'
 				}
 			]}
@@ -387,7 +387,21 @@ export const WithImage = () => (
 			attachments={[
 				{
 					title: 'This is a title',
-					description: 'This is a description :nyan_rocket:',
+					description: 'Header false',
+					image_url: '/dummypath'
+				}
+			]}
+			isHeader={false}
+		/>
+		<Message
+			msg='multi file'
+			attachments={[
+				{
+					title: 'This is a title',
+					image_url: '/dummypath'
+				},
+				{
+					title: 'This is a title',
 					image_url: '/dummypath'
 				}
 			]}
@@ -417,6 +431,21 @@ export const WithVideo = () => (
 		/>
 		<Message
 			attachments={[
+				{
+					title: 'This is a title',
+					description: 'Header false',
+					video_url: '/dummypath'
+				}
+			]}
+			isHeader={false}
+		/>
+		<Message
+			msg='multi file'
+			attachments={[
+				{
+					title: 'This is a title',
+					video_url: '/dummypath'
+				},
 				{
 					title: 'This is a title',
 					video_url: '/dummypath'
@@ -437,34 +466,28 @@ export const WithAudio = () => (
 				}
 			]}
 		/>
-		<Message msg='First message' isHeader={false} />
 		<Message
 			attachments={[
 				{
 					title: 'This is a title',
-					description: 'This is a description',
+					description: 'Header false',
 					audio_url: '/dummypath'
 				}
 			]}
 			isHeader={false}
 		/>
 		<Message
+			msg='multi file'
 			attachments={[
 				{
 					title: 'This is a title',
 					audio_url: '/dummypath'
-				}
-			]}
-			isHeader={false}
-		/>
-		<Message
-			attachments={[
+				},
 				{
 					title: 'This is a title',
 					audio_url: '/dummypath'
 				}
 			]}
-			isHeader={false}
 		/>
 	</>
 );
@@ -483,11 +506,22 @@ export const WithFile = () => (
 			attachments={[
 				{
 					text: 'File.pdf',
-					description: 'This is a description :nyan_rocket:'
+					description: 'Header false'
 				}
 			]}
 			isHeader={false}
 		/>
+		<Message
+			msg='multi file'
+			attachments={[
+				{
+					text: 'File.pdf'
+				},
+				{
+					text: 'File.pdf'
+				}
+			]}
+		/>
 	</>
 );
 

app/lib/methods/handleMediaDownload.ts

@@ -202,42 +202,44 @@ export async function cancelDownload(messageUrl: string): Promise<void> {
 const mapAttachments = ({
 	attachments,
 	uri,
-	encryption
+	encryption,
+	downloadUrl
 }: {
 	attachments?: IAttachment[];
 	uri: string;
 	encryption: boolean;
+	downloadUrl: string;
 }): TMessageModel['attachments'] =>
 	attachments?.map(att => ({
 		...att,
-		title_link: uri,
+		title_link: att.image_url && downloadUrl.includes(att.image_url) ? uri : att.title_link,
 		e2e: encryption ? 'done' : undefined
 	}));
 
-const persistMessage = async (messageId: string, uri: string, encryption: boolean) => {
+const persistMessage = async (messageId: string, uri: string, encryption: boolean, downloadUrl: string) => {
 	const db = database.active;
 	const batch: Model[] = [];
 	const messageRecord = await getMessageById(messageId);
 	if (messageRecord) {
 		batch.push(
 			messageRecord.prepareUpdate(m => {
-				m.attachments = mapAttachments({ attachments: m.attachments, uri, encryption });
+				m.attachments = mapAttachments({ attachments: m.attachments, uri, encryption, downloadUrl });
 			})
 		);
 	}
 	const threadRecord = await getThreadById(messageId);
 	if (threadRecord) {
 		batch.push(
 			threadRecord.prepareUpdate(m => {
-				m.attachments = mapAttachments({ attachments: m.attachments, uri, encryption });
+				m.attachments = mapAttachments({ attachments: m.attachments, uri, encryption, downloadUrl });
 			})
 		);
 	}
 	const threadMessageRecord = await getThreadMessageById(messageId);
 	if (threadMessageRecord) {
 		batch.push(
 			threadMessageRecord.prepareUpdate(m => {
-				m.attachments = mapAttachments({ attachments: m.attachments, uri, encryption });
+				m.attachments = mapAttachments({ attachments: m.attachments, uri, encryption, downloadUrl });
 			})
 		);
 	}
@@ -282,7 +284,7 @@ export function downloadMediaFile({
 				await Encryption.addFileToDecryptFileQueue(messageId, result.uri, encryption, originalChecksum);
 			}
 
-			await persistMessage(messageId, result.uri, !!encryption);
+			await persistMessage(messageId, result.uri, !!encryption, downloadUrl);
 
 			emitter.emit(`downloadMedia${downloadUrl}`, result.uri);
 			return resolve(result.uri);