allow to save attachments even if there is multiple of them

This is a bit dirty for now

Relates #2229

ts/components/conversation/Image.tsx

@@ -23,6 +23,7 @@ type Props = {
   playIconOverlay?: boolean;
   softCorners?: boolean;
   forceSquare?: boolean;
+  attachmentIndex?: number;
 
   onClick?: (attachment: AttachmentTypeWithPath | AttachmentType) => void;
   onClickClose?: (attachment: AttachmentTypeWithPath | AttachmentType) => void;
@@ -45,6 +46,7 @@ export const Image = (props: Props) => {
     playIconOverlay,
     softCorners,
     forceSquare,
+    attachmentIndex,
     url,
     width,
   } = props;
@@ -87,6 +89,7 @@ export const Image = (props: Props) => {
         maxHeight: `${height}px`,
         maxWidth: `${width}px`,
       }}
+      data-attachmentindex={attachmentIndex}
     >
       {pending || loading ? (
         <div

ts/components/conversation/ImageGrid.tsx

@@ -47,6 +47,7 @@ export const ImageGrid = (props: Props) => {
           url={isMessageVisible ? getThumbnailUrl(attachments[0]) : undefined}
           onClick={onClickAttachment}
           onError={onError}
+          attachmentIndex={0}
         />
       </div>
     );
@@ -65,6 +66,7 @@ export const ImageGrid = (props: Props) => {
           url={isMessageVisible ? getThumbnailUrl(attachments[0]) : undefined}
           onClick={onClickAttachment}
           onError={onError}
+          attachmentIndex={0}
         />
         <Image
           alt={getAlt(attachments[1])}
@@ -76,6 +78,7 @@ export const ImageGrid = (props: Props) => {
           url={isMessageVisible ? getThumbnailUrl(attachments[1]) : undefined}
           onClick={onClickAttachment}
           onError={onError}
+          attachmentIndex={1}
         />
       </div>
     );
@@ -94,6 +97,7 @@ export const ImageGrid = (props: Props) => {
           url={isMessageVisible ? getThumbnailUrl(attachments[0]) : undefined}
           onClick={onClickAttachment}
           onError={onError}
+          attachmentIndex={0}
         />
         <div className="module-image-grid__column">
           <Image
@@ -105,6 +109,7 @@ export const ImageGrid = (props: Props) => {
             url={isMessageVisible ? getThumbnailUrl(attachments[1]) : undefined}
             onClick={onClickAttachment}
             onError={onError}
+            attachmentIndex={1}
           />
           <Image
             alt={getAlt(attachments[2])}
@@ -116,6 +121,7 @@ export const ImageGrid = (props: Props) => {
             url={isMessageVisible ? getThumbnailUrl(attachments[2]) : undefined}
             onClick={onClickAttachment}
             onError={onError}
+            attachmentIndex={2}
           />
         </div>
       </div>
@@ -136,6 +142,7 @@ export const ImageGrid = (props: Props) => {
               url={isMessageVisible ? getThumbnailUrl(attachments[0]) : undefined}
               onClick={onClickAttachment}
               onError={onError}
+              attachmentIndex={0}
             />
             <Image
               alt={getAlt(attachments[1])}
@@ -146,6 +153,7 @@ export const ImageGrid = (props: Props) => {
               url={isMessageVisible ? getThumbnailUrl(attachments[1]) : undefined}
               onClick={onClickAttachment}
               onError={onError}
+              attachmentIndex={1}
             />
           </div>
           <div className="module-image-grid__row">
@@ -159,6 +167,7 @@ export const ImageGrid = (props: Props) => {
               url={isMessageVisible ? getThumbnailUrl(attachments[2]) : undefined}
               onClick={onClickAttachment}
               onError={onError}
+              attachmentIndex={2}
             />
             <Image
               alt={getAlt(attachments[3])}
@@ -170,6 +179,7 @@ export const ImageGrid = (props: Props) => {
               url={isMessageVisible ? getThumbnailUrl(attachments[3]) : undefined}
               onClick={onClickAttachment}
               onError={onError}
+              attachmentIndex={3}
             />
           </div>
         </div>
@@ -193,6 +203,7 @@ export const ImageGrid = (props: Props) => {
             url={isMessageVisible ? getThumbnailUrl(attachments[0]) : undefined}
             onClick={onClickAttachment}
             onError={onError}
+            attachmentIndex={0}
           />
           <Image
             alt={getAlt(attachments[1])}
@@ -203,6 +214,7 @@ export const ImageGrid = (props: Props) => {
             url={isMessageVisible ? getThumbnailUrl(attachments[1]) : undefined}
             onClick={onClickAttachment}
             onError={onError}
+            attachmentIndex={1}
           />
         </div>
         <div className="module-image-grid__row">
@@ -216,6 +228,7 @@ export const ImageGrid = (props: Props) => {
             url={isMessageVisible ? getThumbnailUrl(attachments[2]) : undefined}
             onClick={onClickAttachment}
             onError={onError}
+            attachmentIndex={2}
           />
           <Image
             alt={getAlt(attachments[3])}
@@ -227,6 +240,7 @@ export const ImageGrid = (props: Props) => {
             url={isMessageVisible ? getThumbnailUrl(attachments[3]) : undefined}
             onClick={onClickAttachment}
             onError={onError}
+            attachmentIndex={3}
           />
           <Image
             alt={getAlt(attachments[4])}
@@ -240,6 +254,7 @@ export const ImageGrid = (props: Props) => {
             url={isMessageVisible ? getThumbnailUrl(attachments[4]) : undefined}
             onClick={onClickAttachment}
             onError={onError}
+            attachmentIndex={4}
           />
         </div>
       </div>

ts/components/conversation/message/message-content/MessageContextMenu.tsx

@@ -73,7 +73,6 @@ export const MessageContextMenu = (props: Props) => {
   const isOutgoing = direction === 'outgoing';
   const showRetry = status === 'error' && isOutgoing;
   const isSent = status === 'sent' || status === 'read'; // a read message should be replyable
-  const multipleAttachments = attachments && attachments.length > 1;
 
   const onContextMenuShown = useCallback(() => {
     window.contextMenuShown = true;
@@ -120,13 +119,23 @@ export const MessageContextMenu = (props: Props) => {
 
   const saveAttachment = useCallback(
     (e: any) => {
+      // this is quite dirty but considering that we want the context menu of the message to show on click on the attachment
+      // and the context menu save attachment item to save the right attachment I did not find a better way for now.
+      let targetAttachmentIndex = e.triggerEvent.path[1].getAttribute('data-attachmentindex');
       e.event.stopPropagation();
       if (!attachments?.length) {
         return;
       }
+
+      if (!targetAttachmentIndex) {
+        targetAttachmentIndex = 0;
+      }
+      if (targetAttachmentIndex > attachments.length) {
+        return;
+      }
       const messageTimestamp = timestamp || serverTimestamp || 0;
       void saveAttachmentToDisk({
-        attachment: attachments[0],
+        attachment: attachments[targetAttachmentIndex],
         messageTimestamp,
         messageSender: sender,
         conversationId: convoId,
@@ -173,7 +182,7 @@ export const MessageContextMenu = (props: Props) => {
       onHidden={onContextMenuHidden}
       animation={animation.fade}
     >
-      {!multipleAttachments && attachments && attachments[0] ? (
+      {attachments?.length ? (
         <Item onClick={saveAttachment}>{window.i18n('downloadAttachment')}</Item>
       ) : null}