diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx index 613a5eed0..0f2bebf28 100644 --- a/app/soapbox/features/chats/components/chat-message-list.tsx +++ b/app/soapbox/features/chats/components/chat-message-list.tsx @@ -195,13 +195,12 @@ const ChatMessageList: React.FC = ({ chat }) => { }; const maybeRenderMedia = (chatMessage: ChatMessageEntity) => { - const { attachment } = chatMessage; - if (!attachment) return null; + if (!chatMessage.media_attachments.size) return null; return ( {(Component: any) => ( @@ -316,7 +315,7 @@ const ChatMessageList: React.FC = ({ 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 = ({ 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, diff --git a/app/soapbox/normalizers/chat-message.ts b/app/soapbox/normalizers/chat-message.ts index af67f351e..e928eeaaf 100644 --- a/app/soapbox/normalizers/chat-message.ts +++ b/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(), card: null as Card | null, chat_id: '', content: '', @@ -24,12 +24,15 @@ export const ChatMessageRecord = ImmutableRecord({ }); const normalizeMedia = (status: ImmutableMap) => { + 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()); } };