Port attachments and embeds.

src/components/common/messaging/Message.tsx

@@ -1,7 +1,9 @@
+import Embed from "./embed/Embed";
 import UserIcon from "../user/UserIcon";
 import { Username } from "../user/UserShort";
 import Markdown from "../../markdown/Markdown";
 import { Children } from "../../../types/Preact";
+import Attachment from "./attachments/Attachment";
 import { attachContextMenu } from "preact-context-menu";
 import { useUser } from "../../../context/revoltjs/hooks";
 import { MessageObject } from "../../../context/revoltjs/util";
@@ -15,11 +17,12 @@ interface Props {
     head?: boolean
 }
 
-export default function Message({ attachContext, message, contrast, content, head }: Props) {
+export default function Message({ attachContext, message, contrast, content: replacement, head }: Props) {
     // TODO: Can improve re-renders here by providing a list
     // TODO: of dependencies. We only need to update on u/avatar.
     let user = useUser(message.author);
 
+    const content = message.content as string;
     return (
         <MessageBase contrast={contrast}
             onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel }) : undefined}>
@@ -30,7 +33,11 @@ export default function Message({ attachContext, message, contrast, content, hea
             </MessageInfo>
             <MessageContent>
                 { head && <Username user={user} /> }
-                { content ?? <Markdown content={message.content as string} /> }
+                { content ?? <Markdown content={content} /> }
+                { message.attachments?.map((attachment, index) =>
+                    <Attachment key={index} attachment={attachment} hasContent={ index > 0 || content.length > 0 } />) }
+                { message.embeds?.map((embed, index) =>
+                    <Embed key={index} embed={embed} />) }
             </MessageContent>
         </MessageBase>
     )