Implement is_falling_back in accordance to MSC3440 (#8055)

src/components/structures/ThreadView.tsx

@@ -289,6 +289,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
         return {
             "rel_type": THREAD_RELATION_TYPE.name,
             "event_id": this.state.thread?.id,
+            "is_falling_back": true,
             "m.in_reply_to": {
                 "event_id": this.state.lastThreadReply?.getId() ?? this.state.thread?.id,
             },

src/components/views/elements/ReplyChain.tsx

@@ -35,7 +35,7 @@ import ReplyTile from "../rooms/ReplyTile";
 import Pill from './Pill';
 import { ButtonEvent } from './AccessibleButton';
 import { getParentEventId, shouldDisplayReply } from '../../../utils/Reply';
-import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
+import RoomContext from "../../../contexts/RoomContext";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 
 /**
@@ -205,8 +205,6 @@ export default class ReplyChain extends React.Component<IProps, IState> {
 
     render() {
         let header = null;
-
-        const inThread = this.context.timelineRenderingType === TimelineRenderingType.Thread;
         if (this.state.err) {
             header = <blockquote className="mx_ReplyChain mx_ReplyChain_error">
                 {
@@ -214,7 +212,7 @@ export default class ReplyChain extends React.Component<IProps, IState> {
                         'it either does not exist or you do not have permission to view it.')
                 }
             </blockquote>;
-        } else if (this.state.loadedEv && shouldDisplayReply(this.state.events[0], inThread)) {
+        } else if (this.state.loadedEv && shouldDisplayReply(this.state.events[0])) {
             const ev = this.state.loadedEv;
             const room = this.matrixClient.getRoom(ev.getRoomId());
             header = <blockquote className={`mx_ReplyChain ${this.getReplyChainColorClass(ev)}`}>

src/components/views/rooms/EventTile.tsx

@@ -1329,8 +1329,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
             msgOption = readAvatars;
         }
 
-        const inThread = this.context.timelineRenderingType === TimelineRenderingType.Thread;
+        const replyChain = haveTileForEvent(this.props.mxEvent) && shouldDisplayReply(this.props.mxEvent)
-        const replyChain = haveTileForEvent(this.props.mxEvent) && shouldDisplayReply(this.props.mxEvent, inThread)
             ? <ReplyChain
                 parentEv={this.props.mxEvent}
                 onHeightChanged={this.props.onHeightChanged}

src/components/views/rooms/SendMessageComposer.tsx

@@ -63,7 +63,6 @@ import { getNestedReplyText, makeReplyMixIn } from '../../../utils/Reply';
 interface IAddReplyOpts {
     permalinkCreator?: RoomPermalinkCreator;
     includeLegacyFallback?: boolean;
-    inThread?: boolean;
 }
 
 function addReplyToMessageContent(
@@ -73,7 +72,7 @@ function addReplyToMessageContent(
         includeLegacyFallback: true,
     },
 ): void {
-    const replyContent = makeReplyMixIn(replyToEvent, opts.inThread);
+    const replyContent = makeReplyMixIn(replyToEvent);
     Object.assign(content, replyContent);
 
     if (opts.includeLegacyFallback) {
@@ -133,7 +132,6 @@ export function createMessageContent(
         addReplyToMessageContent(content, replyToEvent, {
             permalinkCreator,
             includeLegacyFallback: includeReplyLegacyFallback,
-            inThread: relation?.rel_type === THREAD_RELATION_TYPE.name,
         });
     }
 
@@ -399,7 +397,6 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
                         addReplyToMessageContent(content, replyToEvent, {
                             permalinkCreator: this.props.permalinkCreator,
                             includeLegacyFallback: true,
-                            inThread: this.props.relation?.rel_type === THREAD_RELATION_TYPE.name,
                         });
                     }
                 } else {

src/utils/Reply.ts

@@ -142,14 +142,13 @@ export function getNestedReplyText(
     return { body, html };
 }
 
-export function makeReplyMixIn(ev?: MatrixEvent, inThread = false): RecursivePartial<IContent> {
+export function makeReplyMixIn(ev?: MatrixEvent): RecursivePartial<IContent> {
     if (!ev) return {};
 
     const mixin: RecursivePartial<IContent> = {
         'm.relates_to': {
             'm.in_reply_to': {
                 'event_id': ev.getId(),
-                'io.element.show_reply': inThread, // MSC3440 unstable `is_falling_back` field
             },
         },
     };
@@ -160,9 +159,10 @@ export function makeReplyMixIn(ev?: MatrixEvent, inThread = false): RecursivePar
      * that know how to handle that relation will
      * be able to render them more accurately
      */
-    if (ev.isThreadRelation) {
+    if (ev.isThreadRelation || ev.isThreadRoot) {
         mixin['m.relates_to'] = {
             ...mixin['m.relates_to'],
+            is_falling_back: false,
             rel_type: THREAD_RELATION_TYPE.name,
             event_id: ev.threadRootId,
         };
@@ -171,11 +171,16 @@ export function makeReplyMixIn(ev?: MatrixEvent, inThread = false): RecursivePar
     return mixin;
 }
 
-export function shouldDisplayReply(event: MatrixEvent, inThread = false): boolean {
+export function shouldDisplayReply(event: MatrixEvent): boolean {
-    const parentExist = Boolean(getParentEventId(event));
+    const inReplyTo = event.getWireContent()?.["m.relates_to"]?.["m.in_reply_to"];
-    if (!parentExist) return false;
+    if (!inReplyTo) {
-    if (!inThread) return true;
+        return false;
-
+    }
-    const inReplyTo = event.getRelation()?.["m.in_reply_to"];
+
-    return inReplyTo?.is_falling_back ?? inReplyTo?.["io.element.show_reply"] ?? false;
+    const relation = event.getRelation();
+    if (relation?.rel_type === THREAD_RELATION_TYPE.name && relation?.is_falling_back) {
+        return false;
+    }
+
+    return !!inReplyTo.event_id;
 }

test/components/views/elements/ReplyChain-test.tsx

@@ -70,7 +70,7 @@ describe("ReplyChain", () => {
                     },
                     "m.relates_to": {
                         "rel_type": "m.replace",
-                        "event_id": originalEventWithRelation.event_id,
+                        "event_id": originalEventWithRelation.getId(),
                     },
                 },
                 user: "some_other_user",
@@ -114,7 +114,7 @@ describe("ReplyChain", () => {
                     },
                     "m.relates_to": {
                         "rel_type": "m.replace",
-                        "event_id": originalEvent.event_id,
+                        "event_id": originalEvent.getId(),
                     },
                 },
                 user: "some_other_user",
@@ -163,7 +163,7 @@ describe("ReplyChain", () => {
                     },
                     "m.relates_to": {
                         "rel_type": "m.replace",
-                        "event_id": originalEventWithRelation.event_id,
+                        "event_id": originalEventWithRelation.getId(),
                     },
                 },
                 user: "some_other_user",
@@ -208,7 +208,7 @@ describe("ReplyChain", () => {
                     },
                     "m.relates_to": {
                         "rel_type": "m.replace",
-                        "event_id": originalEventWithRelation.event_id,
+                        "event_id": originalEventWithRelation.getId(),
                     },
                 },
                 user: "some_other_user",