Display a preview of a replied-to message

[kevinaboos]

Most chat/messaging services display a preview of a message that is being replied to, which makes it a lot easier to mentally keep track of conversations

We want to add this feature to Robrix too, as Matrix supports message replies as part of its spec.

Matrix message content/format

The key part is the m.relates_to field of the message, which contains the ID of the event that this message is in reply to.

{
  "content": {
    ...
    "formatted_body": "<mx-reply><blockquote><a href=\"https://matrix.to/#/!ifW4td0it0scmZpEM6:computer.surgery/$yBlFwITRy5pUTJ9ewQMRanx6SRwZGWzuhmglkhTO3b4?via=computer.surgery&via=matrix.org&via=mozilla.org\">In reply to</a> <a href=\"https://matrix.to/#/@charles:computer.surgery\">@charles:computer.surgery</a><br><code>std::time::Duration</code> is kinda prior art for Debug I think</blockquote></mx-reply>Ty, this is a good reference point",
    "m.mentions": {
      "user_ids": [
        "@charles:computer.surgery"
      ]
    },
    "m.relates_to": {
      "m.in_reply_to": {
        "event_id": "$yBlFwITRy5pUTJ9ewQMRanx6SRwZGWzuhmglkhTO3b4"
      }
    },
    "msgtype": "m.text"
  },
  ...
}

In Element, this message is displayed like so:

Implementation Approach

For the Makepad DSL components, we can add a ReplyPreview view that can be added into all of the Message-like views: (Message, ImageMessage, etc).
Most likely, the best place to add this is right before the content subview in the code here:

robrix/src/home/room_screen.rs

Line 197 in a5ff746

content = <View> {

By default, this view would be marked as visible: false, and would only be set to visible: true if a given message contained an in_reply_to field. The Matrix SDK exposes this via the `Message:in_reply_to() method.

The RepliedToEvent struct contains the relevant details of the original message that is being replied to.

The ReplyPreview view should be clickable such that it jumps up to the original message (and highlights it temporarily for a few seconds) upon being clicked.

Examples

An example of Element's replied-to message format is above. However, I personally think the Discord-style view is easier to read and less visually cluttered than others, so we should imitate the Discord UI style.

Here's how Discord shows the replied-to message preview:

[kevinaboos]

Closed by #104