Support UI for MSC2876: Widgets reading events from rooms

MSC: https://github.com/matrix-org/matrix-doc/pull/2876
Fixes https://github.com/vector-im/element-web/issues/15747
Requires https://github.com/matrix-org/matrix-widget-api/pull/34

src/i18n/strings/en_EN.json

@@ -598,20 +598,33 @@
     "Change which room, message, or user you're viewing": "Change which room, message, or user you're viewing",
     "Change the topic of this room": "Change the topic of this room",
     "See when the topic changes in this room": "See when the topic changes in this room",
+    "See the current topic for this room": "See the current topic for this room",
     "Change the topic of your active room": "Change the topic of your active room",
     "See when the topic changes in your active room": "See when the topic changes in your active room",
+    "See the current topic in your active room": "See the current topic in your active room",
     "Change the name of this room": "Change the name of this room",
     "See when the name changes in this room": "See when the name changes in this room",
+    "See the current name for this room": "See the current name for this room",
     "Change the name of your active room": "Change the name of your active room",
     "See when the name changes in your active room": "See when the name changes in your active room",
+    "See the current name of your active room": "See the current name of your active room",
     "Change the avatar of this room": "Change the avatar of this room",
     "See when the avatar changes in this room": "See when the avatar changes in this room",
+    "See the current avatar for this room": "See the current avatar for this room",
     "Change the avatar of your active room": "Change the avatar of your active room",
     "See when the avatar changes in your active room": "See when the avatar changes in your active room",
+    "See the current avatar for your active room": "See the current avatar for your active room",
+    "Kick, ban, or invite people to this room, and make you leave": "Kick, ban, or invite people to this room, and make you leave",
+    "See when people join, leave, or are invited to this room": "See when people join, leave, or are invited to this room",
+    "See the membership status of anyone in this room": "See the membership status of anyone in this room",
+    "Kick, ban, or invite people to your active room, and make you leave": "Kick, ban, or invite people to your active room, and make you leave",
+    "See when people join, leave, or are invited to your active room": "See when people join, leave, or are invited to your active room",
     "Send stickers to this room as you": "Send stickers to this room as you",
     "See when a sticker is posted in this room": "See when a sticker is posted in this room",
+    "See recent stickers posted to this room": "See recent stickers posted to this room",
     "Send stickers to your active room as you": "Send stickers to your active room as you",
     "See when anyone posts a sticker to your active room": "See when anyone posts a sticker to your active room",
+    "See recent stickers posted to your active room": "See recent stickers posted to your active room",
     "with an empty state key": "with an empty state key",
     "with state key %(stateKey)s": "with state key %(stateKey)s",
     "Send <b>%(eventType)s</b> events as you in this room": "Send <b>%(eventType)s</b> events as you in this room",

src/stores/widgets/StopGapWidgetDriver.ts

@@ -44,6 +44,7 @@ import { CHAT_EFFECTS } from "../../effects";
 import { containsEmoji } from "../../effects/utils";
 import dis from "../../dispatcher/dispatcher";
 import {tryTransformPermalinkToLocalHref} from "../../utils/permalinks/Permalinks";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
 
 // TODO: Purge this from the universe
 
@@ -144,6 +145,50 @@ export class StopGapWidgetDriver extends WidgetDriver {
         return {roomId, eventId: r.event_id};
     }
 
+    public async readRoomEvents(eventType: string, msgtype: string | undefined, limit: number): Promise<MatrixEvent[]> {
+        limit = limit > 0 ? Math.min(limit, 25) : 25; // arbitrary choice
+
+        const client = MatrixClientPeg.get();
+        const roomId = ActiveRoomObserver.activeRoomId;
+        const room = client.getRoom(roomId);
+        if (!client || !roomId || !room) throw new Error("Not in a room or not attached to a client");
+
+        const results: MatrixEvent[] = [];
+        const events = room.getLiveTimeline().getEvents(); // timelines are most recent last
+        for (let i = events.length - 1; i > 0; i--) {
+            if (results.length >= limit) break;
+
+            const ev = events[i];
+            if (ev.getType() !== eventType) continue;
+            if (eventType === EventType.RoomMessage && msgtype && msgtype !== ev.getContent()['msgtype']) continue;
+            results.push(ev);
+        }
+
+        return results.map(e => e.event);
+    }
+
+    public async readStateEvents(eventType: string, stateKey: string | undefined, limit: number): Promise<MatrixEvent[]> {
+        limit = limit > 0 ? Math.min(limit, 100) : 100; // arbitrary choice
+
+        const client = MatrixClientPeg.get();
+        const roomId = ActiveRoomObserver.activeRoomId;
+        const room = client.getRoom(roomId);
+        if (!client || !roomId || !room) throw new Error("Not in a room or not attached to a client");
+
+        const results: MatrixEvent[] = [];
+        const state = room.currentState.events.get(eventType);
+        if (state) {
+            if (stateKey === "" || !!stateKey) {
+                const forKey = state.get(stateKey);
+                if (forKey) results.push(forKey);
+            } else {
+                results.push(...Array.from(state.values()));
+            }
+        }
+
+        return results.slice(0, limit).map(e => e.event);
+    }
+
     public async askOpenID(observer: SimpleObservable<IOpenIDUpdate>) {
         const oidcState = WidgetPermissionStore.instance.getOIDCState(
             this.forWidget, this.forWidgetKind, this.inRoomId,

src/widgets/CapabilityText.tsx

@@ -70,30 +70,48 @@ export class CapabilityText {
             [WidgetKind.Room]: {
                 [EventDirection.Send]: _td("Change the topic of this room"),
                 [EventDirection.Receive]: _td("See when the topic changes in this room"),
+                [EventDirection.Read]: _td("See the current topic for this room"),
             },
             [GENERIC_WIDGET_KIND]: {
                 [EventDirection.Send]: _td("Change the topic of your active room"),
                 [EventDirection.Receive]: _td("See when the topic changes in your active room"),
+                [EventDirection.Read]: _td("See the current topic in your active room"),
             },
         },
         [EventType.RoomName]: {
             [WidgetKind.Room]: {
                 [EventDirection.Send]: _td("Change the name of this room"),
                 [EventDirection.Receive]: _td("See when the name changes in this room"),
+                [EventDirection.Read]: _td("See the current name for this room"),
             },
             [GENERIC_WIDGET_KIND]: {
                 [EventDirection.Send]: _td("Change the name of your active room"),
                 [EventDirection.Receive]: _td("See when the name changes in your active room"),
+                [EventDirection.Read]: _td("See the current name of your active room"),
             },
         },
         [EventType.RoomAvatar]: {
             [WidgetKind.Room]: {
                 [EventDirection.Send]: _td("Change the avatar of this room"),
                 [EventDirection.Receive]: _td("See when the avatar changes in this room"),
+                [EventDirection.Read]: _td("See the current avatar for this room"),
             },
             [GENERIC_WIDGET_KIND]: {
                 [EventDirection.Send]: _td("Change the avatar of your active room"),
                 [EventDirection.Receive]: _td("See when the avatar changes in your active room"),
+                [EventDirection.Read]: _td("See the current avatar for your active room"),
+            },
+        },
+        [EventType.RoomMember]: {
+            [WidgetKind.Room]: {
+                [EventDirection.Send]: _td("Kick, ban, or invite people to this room, and make you leave"),
+                [EventDirection.Receive]: _td("See when people join, leave, or are invited to this room"),
+                [EventDirection.Read]: _td("See the membership status of anyone in this room"),
+            },
+            [GENERIC_WIDGET_KIND]: {
+                [EventDirection.Send]: _td("Kick, ban, or invite people to your active room, and make you leave"),
+                [EventDirection.Receive]: _td("See when people join, leave, or are invited to your active room"),
+                [EventDirection.Read]: _td("See the membership status of anyone in this room"),
             },
         },
     };
@@ -103,10 +121,12 @@ export class CapabilityText {
             [WidgetKind.Room]: {
                 [EventDirection.Send]: _td("Send stickers to this room as you"),
                 [EventDirection.Receive]: _td("See when a sticker is posted in this room"),
+                [EventDirection.Read]: _td("See recent stickers posted to this room"),
             },
             [GENERIC_WIDGET_KIND]: {
                 [EventDirection.Send]: _td("Send stickers to your active room as you"),
                 [EventDirection.Receive]: _td("See when anyone posts a sticker to your active room"),
+                [EventDirection.Read]: _td("See recent stickers posted to your active room"),
             },
         },
     };