Composer file upload Module API

apps/web/playwright/e2e/messages/messages.spec.ts

@@ -252,6 +252,7 @@ test.describe("Message url previews", () => {
                         "og:title": "A simple site",
                         "og:description": "And with a brief description",
                         "og:image": mxc,
+                        "og:image:alt": "The riot logo",
                     },
                 });
             });

apps/web/src/PosthogTrackers.ts

@@ -13,7 +13,6 @@ import { type Interaction as InteractionEvent } from "@matrix-org/analytics-even
 import { type PinUnpinAction } from "@matrix-org/analytics-events/types/typescript/PinUnpinAction";
 import { type RoomListSortingAlgorithmChanged } from "@matrix-org/analytics-events/types/typescript/RoomListSortingAlgorithmChanged";
 import { type UrlPreviewRendered } from "@matrix-org/analytics-events/types/typescript/UrlPreviewRendered";
-import { type UrlPreview } from "@element-hq/web-shared-components";
 
 import PageType from "./PageTypes";
 import Views from "./Views";
@@ -151,7 +150,7 @@ export default class PosthogTrackers {
      * @param isEncrypted Whether the event (and effectively the room) was encrypted.
      * @param previews The previews generated from the event.
      */
-    public trackUrlPreview(eventId: string, isEncrypted: boolean, previews: UrlPreview[]): void {
+    public trackUrlPreview(eventId: string, isEncrypted: boolean, previews: { image?: unknown }[]): void {
         // Discount any previews that we have already tracked.
         if (this.previewedEventIds.get(eventId)) {
             return;

apps/web/src/components/views/rooms/MessageComposerButtons.tsx

@@ -23,6 +23,8 @@ import {
     StickerIcon,
     TextFormattingIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ComposorApiFileUploadLocal } from "@element-hq/element-web-module-api";
+import { MultiOptionButton } from "@element-hq/web-shared-components";
 
 import { _t } from "../../../languageHandler";
 import { CollapsibleButton } from "./CollapsibleButton";
@@ -43,6 +45,7 @@ import { filterBoolean } from "../../../utils/arrays";
 import { useSettingValue } from "../../../hooks/useSettings";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
 import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
+import { ModuleApi } from "../../../modules/Api.ts";
 
 interface IProps {
     addEmoji: (emoji: string) => boolean;
@@ -89,7 +92,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
             ),
         ];
         moreButtons = [
-            uploadButton(), // props passed via UploadButtonContext
+            <UploadButton key="uploads" />, // props passed via UploadButtonContext
             showStickersButton(props),
             voiceRecordingButton(props, narrow),
             props.showPollsButton ? pollButton(room, props.relation) : null,
@@ -106,7 +109,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
             ) : (
                 emojiButton(props)
             ),
-            uploadButton(), // props passed via UploadButtonContext
+            <UploadButton key="uploads" />, // props passed via UploadButtonContext
         ];
         moreButtons = [
             showStickersButton(props),
@@ -164,9 +167,43 @@ function emojiButton(props: IProps): ReactElement {
     );
 }
 
-function uploadButton(): ReactElement {
-    return <UploadButton key="controls_upload" />;
-}
+const UploadButton: React.FC = () => {
+    const overflowMenuCloser = useContext(OverflowMenuContext);
+    const onLocalUploadClick = useContext(UploadButtonContext);
+    const { room } = useScopedRoomContext("room");
+
+    const onLocalClick = (): void => {
+        onLocalUploadClick?.();
+        overflowMenuCloser?.(); // close overflow menu
+    };
+
+    const options = [...ModuleApi.instance.composor.fileUploadOptions.values()].map((uploadOption) => {
+        if (uploadOption.type === ComposorApiFileUploadLocal) {
+            return {
+                icon: AttachmentIcon,
+                label: _t("common|attachment"),
+                onSelect: onLocalClick,
+            };
+        } else {
+            return {
+                icon: uploadOption.icon,
+                label: uploadOption.label,
+                onSelect: () => {
+                    uploadOption.onSelected(room!.roomId, (res) => {
+                        console.log("Do something with the result", res);
+                    });
+                },
+            };
+        }
+    });
+
+    return (
+        <MultiOptionButton
+            options={options}
+            multipleOptionsButton={{ label: _t("action|upload_file"), icon: AttachmentIcon }}
+        />
+    );
+};
 
 type UploadButtonFn = () => void;
 export const UploadButtonContext = createContext<UploadButtonFn | null>(null);
@@ -234,23 +271,6 @@ const UploadButtonContextProvider: React.FC<IUploadButtonProps> = ({ roomId, rel
     );
 };
 
-// Must be rendered within an UploadButtonContextProvider
-const UploadButton: React.FC = () => {
-    const overflowMenuCloser = useContext(OverflowMenuContext);
-    const uploadButtonFn = useContext(UploadButtonContext);
-
-    const onClick = (): void => {
-        uploadButtonFn?.();
-        overflowMenuCloser?.(); // close overflow menu
-    };
-
-    return (
-        <CollapsibleButton className="mx_MessageComposer_button" onClick={onClick} title={_t("common|attachment")}>
-            <AttachmentIcon />
-        </CollapsibleButton>
-    );
-};
-
 function showStickersButton(props: IProps): ReactElement | null {
     return props.showStickersButton ? (
         <CollapsibleButton

apps/web/src/modules/Api.ts

@@ -33,6 +33,7 @@ import { StoresApi } from "./StoresApi.ts";
 import { WidgetLifecycleApi } from "./WidgetLifecycleApi.ts";
 import { WidgetApi } from "./WidgetApi.ts";
 import { CustomisationsApi } from "./customisationsApi.ts";
+import { ComposorApi } from "./ComposorApi.ts";
 
 const legacyCustomisationsFactory = <T extends object>(baseCustomisations: T) => {
     let used = false;
@@ -94,6 +95,7 @@ export class ModuleApi implements Api {
     public readonly rootNode = document.getElementById("matrixchat")!;
     public readonly client = new ClientApi();
     public readonly stores = new StoresApi();
+    public readonly composor = new ComposorApi();
 
     public createRoot(element: Element): Root {
         return createRoot(element);

apps/web/src/modules/ComposorApi.ts

@@ -0,0 +1,41 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import AttachmentIcon from "@vector-im/compound-design-tokens/assets/web/icons/attachment";
+import {
+    ComposorApiFileUploadLocal,
+    type ComposorApiFileUploadOption,
+    type ComposorApi as ModuleComposorApi,
+} from "@element-hq/element-web-module-api";
+
+import { _t } from "../languageHandler";
+
+export class ComposorApi implements ModuleComposorApi {
+    public readonly ComposorApiFileUploadLocal: string = ComposorApiFileUploadLocal;
+    public readonly fileUploadOptions: Map<string, ComposorApiFileUploadOption> = new Map();
+
+    public constructor() {
+        this.fileUploadOptions.set(ComposorApiFileUploadLocal, {
+            type: ComposorApiFileUploadLocal,
+            icon: AttachmentIcon as any,
+            label: _t("common|attachment"),
+            onSelected: () => {
+                // TODO: Fill in
+            },
+        });
+    }
+
+    public addFileUploadOption(option: ComposorApiFileUploadOption): void {
+        if (this.fileUploadOptions.has(option.type)) {
+            throw new Error(`Another module has already registered "${option.type}"`);
+        }
+        this.fileUploadOptions.set(option.type, option);
+    }
+    public disableFileUploadOption(type: string): boolean {
+        return this.fileUploadOptions.delete(type);
+    }
+}

apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts

@@ -34,8 +34,10 @@ export interface UrlPreviewGroupViewModelProps {
 }
 
 export const MAX_PREVIEWS_WHEN_LIMITED = 2;
-export const PREVIEW_WIDTH = 100;
-export const PREVIEW_HEIGHT = 100;
+export const PREVIEW_WIDTH_PX = 478;
+export const PREVIEW_HEIGHT_PX = 200;
+export const MIN_PREVIEW_PX = 96;
+export const MIN_IMAGE_SIZE_BYTES = 8192;
 
 export enum PreviewVisibility {
     /**
@@ -100,28 +102,77 @@ export class UrlPreviewGroupViewModel
             typeof response["og:description"] === "string" && response["og:description"].trim()
                 ? response["og:description"].trim()
                 : undefined;
-        let siteName =
+        const siteName =
             typeof response["og:site_name"] === "string" && response["og:site_name"].trim()
                 ? response["og:site_name"].trim()
-                : undefined;
+                : new URL(link).hostname;
 
+        // If there is no title, use the description as the title.
         if (!title && description) {
             title = description;
             description = undefined;
         } else if (!title && siteName) {
             title = siteName;
-            siteName = undefined;
         } else if (!title) {
             title = link;
         }
 
+        // If the description matches the site name, don't bother with a description.
+        if (description && description.toLowerCase() === siteName.toLowerCase()) {
+            description = undefined;
+        }
+
         return {
             title,
             description: description && decode(description),
             siteName,
         };
     }
 
+    /**
+     * Calculate the best possible author from an opengraph response.
+     * @param response The opengraph response
+     * @returns The author value, or undefined if no valid author could be found.
+     */
+    private static getAuthorFromResponse(response: IPreviewUrlResponse): UrlPreview["author"] {
+        let calculatedAuthor: string | undefined;
+        if (response["og:type"] === "article") {
+            if (typeof response["article:author"] === "string" && response["article:author"]) {
+                calculatedAuthor = response["article:author"];
+            }
+            // Otherwise fall through to check the profile.
+        }
+        if (typeof response["profile:username"] === "string" && response["profile:username"]) {
+            calculatedAuthor = response["profile:username"];
+        }
+        if (calculatedAuthor && URL.canParse(calculatedAuthor)) {
+            // Some sites return URLs as authors which doesn't look good in Element, so discard it.
+            return;
+        }
+        return calculatedAuthor;
+    }
+
+    /**
+     * Calculate whether the provided image from the preview response is an full size preview or
+     * a site icon.
+     * @returns `true` if the image should be used as a preview, otherwise `false`
+     */
+    private static isImagePreview(width?: number, height?: number, bytes?: number): boolean {
+        // We can't currently distinguish from a preview image and a favicon. Neither OpenGraph nor Matrix
+        // have a clear distinction, so we're using a heuristic here to check the dimensions & size of the file and
+        // deciding whether to render it as a full preview or icon.
+        if (width && width < MIN_PREVIEW_PX) {
+            return false;
+        }
+        if (height && height < MIN_PREVIEW_PX) {
+            return false;
+        }
+        if (bytes && bytes < MIN_IMAGE_SIZE_BYTES) {
+            return false;
+        }
+        return true;
+    }
+
     /**
      * Determine if an anchor element can be rendered into a preview.
      * If it can, return the value of `href`
@@ -278,38 +329,54 @@ export class UrlPreviewGroupViewModel
         }
 
         const { title, description, siteName } = UrlPreviewGroupViewModel.getBaseMetadataFromResponse(preview, link);
+        const author = UrlPreviewGroupViewModel.getAuthorFromResponse(preview);
         const hasImage = preview["og:image"] && typeof preview?.["og:image"] === "string";
         // Ensure we have something relevant to render.
         // The title must not just be the link, or we must have an image.
         if (title === link && !hasImage) {
             return null;
         }
         let image: UrlPreview["image"];
+        let siteIcon: string | undefined;
         if (typeof preview["og:image"] === "string" && this.visibility > PreviewVisibility.MediaHidden) {
             const media = mediaFromMxc(preview["og:image"], this.client);
             const declaredHeight = UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["og:image:height"]);
             const declaredWidth = UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["og:image:width"]);
-            const width = Math.min(declaredWidth ?? PREVIEW_WIDTH, PREVIEW_WIDTH);
-            const height = thumbHeight(width, declaredHeight, PREVIEW_WIDTH, PREVIEW_WIDTH) ?? PREVIEW_WIDTH;
-            const thumb = media.getThumbnailOfSourceHttp(PREVIEW_WIDTH, PREVIEW_HEIGHT, "scale");
-            // No thumb, no preview.
-            if (thumb) {
-                image = {
-                    imageThumb: thumb,
-                    imageFull: media.srcHttp ?? thumb,
-                    width,
-                    height,
-                    fileSize: UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["matrix:image:size"]),
-                };
+            const imageSize = UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["matrix:image:size"]);
+            const alt = typeof preview["og:image:alt"] === "string" ? preview["og:image:alt"] : undefined;
+
+            const isImagePreview = UrlPreviewGroupViewModel.isImagePreview(declaredWidth, declaredHeight, imageSize);
+            if (isImagePreview) {
+                const width = Math.min(declaredWidth ?? PREVIEW_WIDTH_PX, PREVIEW_WIDTH_PX);
+                const height =
+                    thumbHeight(width, declaredHeight, PREVIEW_WIDTH_PX, PREVIEW_WIDTH_PX) ?? PREVIEW_WIDTH_PX;
+                const thumb = media.getThumbnailOfSourceHttp(PREVIEW_WIDTH_PX, PREVIEW_HEIGHT_PX, "scale");
+                const playable = !!preview["og:video"] || !!preview["og:video:type"] || !!preview["og:audio"];
+                // No thumb, no preview.
+                if (thumb) {
+                    image = {
+                        imageThumb: thumb,
+                        imageFull: media.srcHttp ?? thumb,
+                        width,
+                        height,
+                        fileSize: UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["matrix:image:size"]),
+                        alt,
+                        playable,
+                    };
+                }
+            } else if (media.srcHttp) {
+                siteIcon = media.srcHttp;
             }
         }
 
         const result = {
             link,
             title,
+            author,
             description,
             siteName,
-            showTooltipOnLink: link !== title && PlatformPeg.get()?.needsUrlTooltips(),
+            siteIcon,
+            showTooltipOnLink: !!(link !== title && PlatformPeg.get()?.needsUrlTooltips()),
             image,
         } satisfies UrlPreview;
         this.previewCache.set(link, result);

apps/web/src/viewmodels/room/UploaderViewModel.ts

@@ -0,0 +1,23 @@
+// /*
+//  * Copyright 2026 Element Creations Ltd.
+//  *
+//  * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+//  * Please see LICENSE files in the repository root for full details.
+//  */
+
+// import { BaseViewModel } from "@element-hq/web-shared-components";
+// import { ComposorApi } from "../../modules/ComposorApi";
+
+// interface UploaderViewSnapshot {
+//     primaryOption: {
+//         label: string;
+//         icon: string;
+//     }
+// }
+
+// export class UploaderViewModel extends BaseViewModel<UploaderViewSnapshot, never> {
+//     public constructor(moduleComposorApi: ComposorApi) {
+//         moduleComposorApi.
+//         super()
+//     }
+// }

apps/web/test/unit-tests/PosthogTrackers-test.ts

@@ -18,20 +18,10 @@ describe("PosthogTrackers", () => {
         const tracker = new PosthogTrackers();
         tracker.trackUrlPreview("$123456", false, [
             {
-                title: "A preview",
-                image: {
-                    imageThumb: "abc",
-                    imageFull: "abc",
-                },
-                link: "a-link",
-            },
-        ]);
-        tracker.trackUrlPreview("$123456", false, [
-            {
-                title: "A second preview",
-                link: "a-link",
+                image: {},
             },
         ]);
+        tracker.trackUrlPreview("$123456", false, [{}]);
         // Ignores subsequent calls.
         expect(PosthogAnalytics.instance.trackEvent).toHaveBeenCalledWith({
             eventName: "UrlPreviewRendered",