Use updates stable relations from js-sdk (#8715)

* Use updates stable relations from js-sdk

* Relations is now accessible on the Room instead

* Reuse more existing code and ditch confusing `isThreadRelation`

* Fix last usage of removed `isThreadRelation`

* Update tests to match removal of isThreadRelation

* Tweak method naming to closer match spec

* Fix missing method name change

src/MatrixClientPeg.ts

@@ -285,7 +285,6 @@ class MatrixClientPegClass implements IMatrixClientPeg {
                 SHOW_QR_CODE_METHOD,
                 verificationMethods.RECIPROCATE_QR_CODE,
             ],
-            unstableClientRelationAggregation: true,
             identityServer: new IdentityAuthClient(),
             cryptoCallbacks: {},
         };

src/components/structures/MessagePanel.tsx

@@ -469,12 +469,9 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
     // TODO: Implement granular (per-room) hide options
     public shouldShowEvent(mxEv: MatrixEvent, forceHideEvents = false): boolean {
-        if (this.props.hideThreadedMessages && this.threadsEnabled) {
-            if (mxEv.isThreadRelation) {
-                return false;
-            }
-
-            if (this.shouldLiveInThreadOnly(mxEv)) {
+        if (this.props.hideThreadedMessages && this.threadsEnabled && this.props.room) {
+            const { shouldLiveInRoom } = this.props.room.eventShouldLiveIn(mxEv, this.props.events);
+            if (!shouldLiveInRoom) {
                 return false;
             }
         }
@@ -497,24 +494,6 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         return !shouldHideEvent(mxEv, this.context);
     }
 
-    private shouldLiveInThreadOnly(event: MatrixEvent): boolean {
-        const associatedId = event.getAssociatedId();
-
-        const targetsThreadRoot = event.threadRootId === associatedId;
-        if (event.isThreadRoot || targetsThreadRoot || !event.isThreadRelation) {
-            return false;
-        }
-
-        // If this is a reply, then we use the associated event to decide whether
-        // this should be thread only or not
-        const parentEvent = this.props.room.findEventById(associatedId);
-        if (parentEvent) {
-            return this.shouldLiveInThreadOnly(parentEvent);
-        } else {
-            return true;
-        }
-    }
-
     public readMarkerForEvent(eventId: string, isLastEvent: boolean): ReactNode {
         const visible = !isLastEvent && this.props.readMarkerVisible;
 

src/components/structures/RoomView.tsx

@@ -974,9 +974,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         CHAT_EFFECTS.forEach(effect => {
             if (containsEmoji(ev.getContent(), effect.emojis) || ev.getContent().msgtype === effect.msgType) {
-                // For initial threads launch, chat effects are disabled
-                // see #19731
-                if (!SettingsStore.getValue("feature_thread") || !ev.isThreadRelation) {
+                // For initial threads launch, chat effects are disabled see #19731
+                if (!SettingsStore.getValue("feature_thread") || !ev.isRelation(THREAD_RELATION_TYPE.name)) {
                     dis.dispatch({ action: `effects.${effect.command}` });
                 }
             }

src/components/structures/TimelinePanel.tsx

@@ -1425,27 +1425,18 @@ class TimelinePanel extends React.Component<IProps, IState> {
         // if we're at the end of the live timeline, append the pending events
         if (!this.timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
             const pendingEvents = this.props.timelineSet.getPendingEvents();
-            if (this.context.timelineRenderingType === TimelineRenderingType.Thread) {
-                events.push(...pendingEvents.filter(e => e.threadRootId === this.context.threadId));
-            } else {
-                events.push(...pendingEvents.filter(e => {
-                    const hasNoRelation = !e.getRelation();
-                    if (hasNoRelation) {
-                        return true;
-                    }
+            events.push(...pendingEvents.filter(event => {
+                const {
+                    shouldLiveInRoom,
+                    threadId,
+                } = this.props.timelineSet.room.eventShouldLiveIn(event, pendingEvents);
 
-                    if (e.isThreadRelation) {
-                        return false;
-                    }
-
-                    const parentEvent = this.props.timelineSet.findEventById(e.getAssociatedId());
-                    if (!parentEvent) {
-                        return false;
-                    } else {
-                        return !parentEvent.isThreadRelation;
-                    }
-                }));
-            }
+                if (this.context.timelineRenderingType === TimelineRenderingType.Thread) {
+                    return threadId === this.context.threadId;
+                } {
+                    return shouldLiveInRoom;
+                }
+            }));
         }
 
         return {
@@ -1678,7 +1669,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         eventId: string,
         relationType: RelationType,
         eventType: EventType | string,
-    ) => this.props.timelineSet.getRelationsForEvent(eventId, relationType, eventType);
+    ) => this.props.timelineSet.relations?.getChildEventsForEvent(eventId, relationType, eventType);
 
     private buildCallEventGroupers(events?: MatrixEvent[]): void {
         this.callEventGroupers = buildCallEventGroupers(this.callEventGroupers, events);

src/components/views/messages/MessageActionBar.tsx

@@ -189,7 +189,7 @@ const ReplyInThreadButton = ({ mxEvent }: IReplyInThreadButton) => {
                 action: Action.ViewUserSettings,
                 initialTabId: UserTab.Labs,
             });
-        } else if (mxEvent.isThreadRelation) {
+        } else if (mxEvent.getThread() && !mxEvent.isThreadRoot) {
             showThread({
                 rootEvent: mxEvent.getThread().rootEvent,
                 initialEvent: mxEvent,

src/components/views/rooms/SendMessageComposer.tsx

@@ -285,8 +285,8 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
                 let shouldReact = true;
                 const lastMessage = events[i];
                 const userId = MatrixClientPeg.get().getUserId();
-                const messageReactions = this.props.room.getUnfilteredTimelineSet()
-                    .getRelationsForEvent(lastMessage.getId(), RelationType.Annotation, EventType.Reaction);
+                const messageReactions = this.props.room.relations
+                    .getChildEventsForEvent(lastMessage.getId(), RelationType.Annotation, EventType.Reaction);
 
                 // if we have already sent this reaction, don't redact but don't re-send
                 if (messageReactions) {

src/utils/EventUtils.ts

@@ -21,6 +21,7 @@ import { logger } from 'matrix-js-sdk/src/logger';
 import { M_POLL_START } from "matrix-events-sdk";
 import { M_LOCATION } from "matrix-js-sdk/src/@types/location";
 import { M_BEACON_INFO } from 'matrix-js-sdk/src/@types/beacon';
+import { THREAD_RELATION_TYPE } from 'matrix-js-sdk/src/models/thread';
 
 import { MatrixClientPeg } from '../MatrixClientPeg';
 import shouldHideEvent from "../shouldHideEvent";
@@ -231,7 +232,10 @@ export async function fetchInitialEvent(
         initialEvent = null;
     }
 
-    if (initialEvent?.isThreadRelation && client.supportsExperimentalThreads() && !initialEvent.getThread()) {
+    if (client.supportsExperimentalThreads() &&
+        initialEvent?.isRelation(THREAD_RELATION_TYPE.name) &&
+        !initialEvent.getThread()
+    ) {
         const threadId = initialEvent.threadRootId;
         const room = client.getRoom(roomId);
         try {

test/components/views/messages/MessageActionBar-test.tsx

@@ -443,7 +443,7 @@ describe('<MessageActionBar />', () => {
                     },
                 });
                 // mock the thread stuff
-                jest.spyOn(threadReplyEvent, 'isThreadRelation', 'get').mockReturnValue(true);
+                jest.spyOn(threadReplyEvent, 'isThreadRoot', 'get').mockReturnValue(false);
                 // set alicesMessageEvent as the root event
                 jest.spyOn(threadReplyEvent, 'getThread').mockReturnValue(
                     { rootEvent: alicesMessageEvent } as unknown as Thread,