Modifying message preview in ChannelList preview


I’m trying to find a way to change the message that shows in the channel preview. The specific case here is that I’m trying to modify the “direct_call:start” and “direct_call:end” messages that are generated by the Calls functionality.

I have a custom message render function for the Channel component that replaces the “direct_call” messages with friendly text. I’d like to apply something similiar to the Channel preview, because if the most recent activity was a call it will show “direct_call:end”.

I see that I can do this with renderChannelPreview, but then I need to essentially re-create the entire UI Kit component. I’m hoping for a way to use the built-in renderer without needing to replicate all the functionality from it myself, but also modify the message that show.

Is there any way to do this, or am I better off using renderChannelPreview with a custom component? Is there any way to get a source for the built-in renderer so I can copy it?


Using UI Kit version 2.2.1.

Hey @kevinkasson,

There is no way for you to hook into the preview message without utilizing the renderChannelPreview(). I see two potential options in order to achieve what you’re looking for.

The first, would be to recreate the preview component. You can see how the current implementation is built here: sendbird-uikit-react-sources/src/ui/ChannelPreview at main · sendbird/sendbird-uikit-react-sources · GitHub

The second option would be to utilize webhooks to send a custom message to the channel with the text you would prefer to see. The webhooks trigger off of direct_call:dial, direct_call:accept and direct_call:end. Utilizing webhooks, you could receive those events and formulate your own message back to the channel with the copy that you would prefer to see.

The issue with the webhook method is that the webhook body does not contain a channelId, so you’d have to determine what channel it needs to be sent to.

Thank you! Looking at that source actually gave me another idea, I’m able to use sortChannelList and modify the lastMessage property of each channel in the sort function. That’s probably not exactly intended behavior but it seems to work safely enough.