Delivery receipt is a feature that allows a user to know whether their messages have been successfully delivered to other users in the channel. Once the recipients in the channel receive a message notification or see the message in the channel list view, it will be marked as delivered. The delivery receipt appears in the MessageList component of the Channel module and in the ChannelPreview component of the ChannelList module. If the sender’s message has been delivered to all recipients of the channel, a double-tick icon will appear above the message’s timestamp. Delivery receipt is only visible to the sender of the message.
While the delivery receipt feature is turned on by default in the Channel module, you have to set the feature's setter method to true in the ChannelList module. Implement the code below to turn on the delivery receipt in a channel list view.
import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';
import ChannelList from '@sendbird/uikit-react/ChannelList';
import { ChannelListProvider } from '@sendbird/uikit-react/ChannelList/context';
// Using SendbirdProvider
const CustomApp = () => {
return (
<SendbirdProvider
// ...
isMessageReceiptStatusEnabledOnChannelList
>
{/* implement custom app with useSendbirdStateContext() */}
</SendbirdProvider>
);
};
// Using ChannelList
const UseChannelList = () => {
return (
<ChannelList
// ...
isMessageReceiptStatusEnabled
/>
);
};
// Using ChannelListProvider
const CustomChannelList = () => {
return (
<ChannelListProvider
// ...
isMessageReceiptStatusEnabled
>
{/* implement channel list with useChannelListContext() */}
</ChannelListProvider>
);
};
You can customize the UI for delivery receipt by following the code below.
import Channel from '@sendbird/uikit-react/Channel';
import { useChannelContext } from '@sendbird/uikit-react/Channel/context';
import { SendingStatus } from '@sendbird/chat/message';
const CustomMessage = (props) => {
const { message } = props;
const { currentGroupChannel } = useChannelContext();
if (message.sendingStatus === SendingStatus.SUCCEEDED
&& currentGroupChannel?.getUndeliveredMemberCount?.(message) === 0) {
return (
// Implement if the message was delivered to all members of the channel.
);
}
return null;
};
const UseChannel = () => {
return (
<Channel
// ...
renderMessage={({ message, chainTop, chainBottom }) => (
<CustomMessage message={message} />
)}
/>
);
};
Note : The same double-tick icon is used for both read receipt and delivery receipt. The only difference is the color of the icon. Default icon colors used for delivery receipt are onlight_03 for Light theme, and ondark_03 for Dark theme.