Widget Chat (Need to show timestamp with messages )

[vcs_account]

Hi everyone and @Sravan_S @Jason ,
I am using widget chat in a project. It is working fine.
Now the client want to show the timestamp along with the messages.

Is there any way to implement this or if someone has a code to implement this would be highly appreciated?

Thanks

[Tyler]

Hello @vcs_account,

The timestamp is included in the message data that is returned for each message. You can pull the data out and display it in your widget. An example I use in React is:

{new Date(message.createdAt).toLocaleString('ko-KR', {
                  timeStyle: 'short',
                  hourCycle: 'h24',
                })}

The message.createdAt is the timestamp in Millisecond format.

[vcs_account]

@Tyler
How can I bind this script with the DOM element. ?

[walter.rodriguez]

Vanilla Javascript or React?

If you use this one, then Javascript is what you need, correct?

sendbird/SendBird-JavaScript

[walter.rodriguez]

For Widget (please see this as a guidance on how you can modify data but I encourage you to create your own code):

1. Go to chat-section.js
2. Find function:

createMessageItem(message, isCurrentUser, isContinue, unreadCount) { … }

3. Replace this code:

var itemUnread = this.createDiv();
this._setClass(itemUnread, [className.UNREAD]);
this.setUnreadCount(itemUnread, unreadCount);

4. With this one:

// Message timestamp
var timestamp = ‘<small>’ + new Date(message.createdAt).toLocaleDateString() + ‘</small>’;

var itemUnread = this.createDiv();
this._setClass(itemUnread, [className.UNREAD]);
this.setUnreadCount(itemUnread, unreadCount);

// Timestamp outside the bubble
this._setContent(itemUnread, timestamp);

Or, you can place it inside the bubble:

// Message timestamp inside the bubble
var formattedDate = new Date(message.createdAt).toLocaleDateString();
var timestamp = “<p><small>” + formattedDate + “</small></p>”
const timestampDiv = this.createDiv();
timestampDiv.innerHTML = timestamp;
itemText.appendChild(timestampDiv);

If you want to have the entire function:

https://gist.github.com/warodri-sendbird/2033fc3e7c2d23e550036ebb4e530a0d

[tahiralvi]

Yes, using Javascript.

[tahiralvi]

@walter.rodriguez

// Message timestamp
var timestamp = ‘’ + new Date(message.createdAt).toLocaleDateString() + ‘’;

var itemUnread = this.createDiv();
this._setClass(itemUnread, [className.UNREAD]);
this.setUnreadCount(itemUnread, unreadCount);

// Timestamp outside the bubble
this._setContent(itemUnread, timestamp);

Thanks for providing the detailed description.

Great!!, it perfectly working for me (except I update the toLocalDateString() to toLocalTimeString(‘en-US’)).

[vcs_account]

Thanks @walter.rodriguez ,
It is working for me. Great

[Jay_Patel]

@walter.rodriguez Thank you the solution. Appreciate your help.
I found that it’s working great with the message we send, but not working for message we receive.
Is there any solution for it?

[Tyler]

@Jay_Patel,

Is there a difference in the way you display your sent messages vs your received messages? The previousMessageListQuery should return an array of messages that all have the same data associated with it.

-Tyler

[Jay_Patel]

@Tyler, Thank you for your response.
No, I am not doing anything different. What I found is somehow it was applying display: none; on the timestamp div.
I solve this issue by doing some customization in widget.js where we have a for loop for the list of messages. I am using some conditions to figure out if the message should show a time stamp or not by comparing previous and next messages. Passed new variable showTimeStamp in chatSection.createMessageItem using which I am showing the timestamp at certain conditions.
Like if there is a difference of minute in continuous messages then showing the timestamp and if the message sender and next message sender is different then showing timestamp and if next message is null that means it’s a last message then also showing the timestamp.
Added a rapper div and used custom css to show timestamp properly. Attached screenshot of it.

[walter.rodriguez]

Hello, I modified 2 files and made it cleaner.

chat-section.js

Red color is the removed code and replaced with the green code:

And also here:

utils.js

Please try it out and let me know.

chat-section.js (20.9 KB)
utils.js (5.0 KB)

[tahiralvi]

It is looking awesome.

[Jay_Patel]

@walter.rodriguez Thank you. That is great. I merged your changed with mine and now it looks exactly same as full page chat. Here is the screenshot.