Chats: support displaying multiple attachments

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -195,13 +195,12 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
   };
 
   const maybeRenderMedia = (chatMessage: ChatMessageEntity) => {
-    const { attachment } = chatMessage;
-    if (!attachment) return null;
+    if (!chatMessage.media_attachments.size) return null;
     return (
       <Bundle fetchComponent={MediaGallery}>
         {(Component: any) => (
           <Component
-            media={ImmutableList([attachment])}
+            media={chatMessage.media_attachments}
             onOpenMedia={onOpenMedia}
             visible
           />
@@ -316,7 +315,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
               space={0.5}
               className={classNames({
                 'max-w-[85%]': true,
-                'flex-1': chatMessage.attachment,
+                'flex-1': !!chatMessage.media_attachments.size,
                 'order-2': isMyMessage,
                 'order-1': !isMyMessage,
               })}
@@ -331,8 +330,8 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                     className={
                       classNames({
                         'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2 [&_.mention]:underline': true,
-                        'rounded-tr-sm': chatMessage.attachment && isMyMessage,
-                        'rounded-tl-sm': chatMessage.attachment && !isMyMessage,
+                        'rounded-tr-sm': (!!chatMessage.media_attachments.size) && isMyMessage,
+                        'rounded-tl-sm': (!!chatMessage.media_attachments.size) && !isMyMessage,
                         '[&_.mention]:text-primary-600 dark:[&_.mention]:text-accent-blue': !isMyMessage,
                         '[&_.mention]:text-white dark:[&_.mention]:white': isMyMessage,
                         'bg-primary-500 text-white': isMyMessage,

app/soapbox/normalizers/chat-message.ts

@@ -11,7 +11,7 @@ import type { Attachment, Card, Emoji } from 'soapbox/types/entities';
 
 export const ChatMessageRecord = ImmutableRecord({
   account_id: '',
-  attachment: null as Attachment | null,
+  media_attachments: ImmutableList<Attachment>(),
   card: null as Card | null,
   chat_id: '',
   content: '',
@@ -24,12 +24,15 @@ export const ChatMessageRecord = ImmutableRecord({
 });
 
 const normalizeMedia = (status: ImmutableMap<string, any>) => {
+  const attachments = status.get('media_attachments');
   const attachment = status.get('attachment');
 
-  if (attachment) {
-    return status.set('attachment', normalizeAttachment(attachment));
+  if (attachments) {
+    return status.set('media_attachments', ImmutableList(attachments.map(normalizeAttachment)));
+  } else if (attachment) {
+    return status.set('media_attachments', ImmutableList([normalizeAttachment(attachment)]));
   } else {
-    return status;
+    return status.set('media_attachments', ImmutableList());
   }
 };