"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?