Does stream-chat-react's MessageSimple Component Indicate Edited Messages?

[mahijendra]

"stream-chat-react": "^10.8.8"

Description

I am currently using the stream-chat-react library to integrate chat functionalities into my application. My application utilizes the MessageSimple component for displaying messages. I have encountered a specific question regarding the handling of edited messages.

Question

Does the stream-chat-react library, specifically the MessageSimple component, automatically provide an "Edited" label for messages that have been edited after being sent? Currently, MessageSimple renders the message content and the timestamp (e.g., "Today at 6:22 PM") but does not indicate if a message has been edited.

Context

In my application, it's important for users to know when a message has been edited after its initial posting. The MessageSimple component handles the rendering of messages, including their timestamps, but it does not seem to display any indication of whether the message has been edited. I noticed that messages have created_at and updated_at timestamps, and I am considering using these to manually implement an "Edited" label. However, before proceeding, I wanted to confirm if such a feature already exists in the stream-chat-react library or if there are recommended practices for this.

Screenshot

Attached is a screenshot for reference, showing how messages are currently displayed using the MessageSimple component. My aim is to add an "Edited" label next to the timestamp when a message has been modified after its initial creation.

I want the Edited Label right after the Timestamp something like this Today at 6:22PM (Edited).

Code Usage

import {
  MessageSimple,
  StreamMessage,
  useChannelStateContext,
  useMessageContext,
} from 'stream-chat-react';

export const IamCustomMessage = (): JSX.Element => {
  const { message } = useMessageContext();

  const isMessageEdited =
    message.created_at !== undefined &&
    message.updated_at !== undefined &&
    new Date(message.updated_at).getTime() >
    new Date(message.created_at).getTime();
      
return (
         <div>
               <MessageSimple />
         </div>
    );
}

Additional Information

I would greatly appreciate any guidance or information regarding this feature. If it's not currently available, could you please advise on the best approach to implement this functionality manually?

[arnautov-anton]

Hey, @mahijendra! Unfortunately, our default UI component does not come with such feature but I'll keep this issue open because it makes sense to include it sometime in the future. You can implement it yourself by easily comparing created_at and edited_at, if these values don't equal, you can consider this message as edited.

[mahijendra]

Hello @arnautov-anton, in the JSON data, there seems to be no edited_at attribute, even though it represents an edited message. I'm leaning towards using the updated_at attribute, but it gets modified for various reasons, including reactions and thread replies. How can we pinpoint whether a message has been edited based solely on the updated_at attribute?

Json of edited message

{
    "id": "1234",
    "text": "\"Hi salmon!\"",
    "html": "<p>“Hi salmon!”</p>\n",
    "type": "regular",
    "user": {
        "id": "1234",
        "role": "c",
        "created_at": "2023-06-28T07:10:47.64578Z",
        "updated_at": "2023-12-07T10:58:51.304975Z",
        "last_active": "2023-12-07T11:07:00.250848066Z",
        "banned": false,
        "online": true,
        "name": "c1",
        "nickname": "c1"
    },
    "attachments": [],
    "latest_reactions": [],
    "own_reactions": [],
    "reaction_counts": {},
    "reaction_scores": {},
    "reply_count": 0,
    "deleted_reply_count": 0,
    "cid": "messaging:87878",
    "created_at": "2023-12-06T11:26:00.505Z",
    "updated_at": "2023-12-07T11:07:14.135Z",
    "shadowed": false,
    "mentioned_users": [],
    "silent": false,
    "pinned": false,
    "pinned_at": null,
    "pinned_by": null,
    "pin_expires": null,
    "__html": "<p>“Hi salmon!”</p>\n",
    "status": "received"
}

[arnautov-anton]

Hey, @mahijendra - you are correct, mistakes were made - I'm sorry, here's what I came up with that should rectify my previous statements:

const WrappedChannel = ({ children }: PropsWithChildrenOnly) => {
  const { client } = useChatContext();

  return (
    <Channel
      doUpdateMessageRequest={(_cid, updatedMessage, options) => {
        console.log('updating', updatedMessage);
        if (!updatedMessage.edited_at) {
          updatedMessage.edited_at = new Date().toJSON();
        }
        return client.updateMessage(updatedMessage, undefined, options);
      }}
    >
      {children}
    </Channel>
  );
};

Here you check that if field edited_at does not exist on the message object, you add it and update the message through our client. You could probably extend this and update edited_at accordingly on subsequent message updates. This custom handler is not being triggered when the reactions are being added/removed so it shouldn't affect your expected behavior.

I see you use TypeScript so I suggest you to extend your messageType (StreamChat generic) with this extra field. :)