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

89 views Asked by At

"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

enter image description here 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?

0

There are 0 answers