sendbird/sendbird-uikit-react v3.9.0

on GitHub

[v3.9.0] (Nov 24 2023)

Features:

Typing indicator bubble feature

TypingIndicatorBubble is a new typing indicator UI that can be turned on through typingIndicatorTypes option. When turned on, it will be displayed in MessageList upon receiving typing event in real time.

• Added typingIndicatorTypes global option
• Added TypingIndicatorType enum
  • How to use?

  <App
    appId={appId}
    userId={userId}
    uikitOptions={{
      groupChannel: {
        // Below turns on both bubble and text typing indicators. Default is Text only.
        typingIndicatorTypes: new Set([TypingIndicatorType.Bubble, TypingIndicatorType.Text]),
      }
    }}
  />

• Added TypingIndicatorBubble
  • How to use?

  const moveScroll = (): void => {
    const current = scrollRef?.current;
    if (current) {
      const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
      if (scrollBottom < bottom && scrollBottom < SCROLL_BUFFER) {
        // Move the scroll as much as the height of the message has changed
        current.scrollTop += bottom - scrollBottom;
      }
    }
  };
  
  return (
    <TypingIndicatorBubble
      typingMembers={typingMembers}
      handleScroll={moveScroll} // Scroll to the rendered typing indicator message IFF current scroll is bottom.
    />
  );

Others

• Added support for eventHandlers.connection.onFailed callback in setupConnection. This callback will be called on connection failure
  • How to use?

    <Sendbird
      appId={appId}
      userId={undefined} // this will cause an error 
      eventHandlers={{
        connection: {
          onFailed: (error) => {
            alert(error?.message); // display a browser alert and print the error message inside
          }
        }
      }}
    >

• Added new props to the MessageContent component: renderMessageMenu, renderEmojiMenu, and renderEmojiReactions
  • How to use?

  <Channel
  renderMessageContent={(props) => {
    return <MessageContent
      {...props}
      renderMessageMenu={(props) => {
        return <MessageMenu {...props} />
      }}
      renderEmojiMenu={(props) => {
        return <MessageEmojiMenu {...props} />
      }}
      renderEmojiReactions={(props) => {
        return <EmojiReactions {...props} />
      }}
    />
  }}
  />

• Added onProfileEditSuccess prop to App and ChannelList components
• Added renderFrozenNotification in ChannelUIProps
  • How to use?

    <Channel
      channelUrl={channelUrl}
      renderFrozenNotification={() => {
        return (
          <div
            className="sendbird-notification sendbird-notification--frozen sendbird-conversation__messages__notification"
          >My custom Frozen Notification</div>
        );
      }}
    />

• Exported VoiceMessageInputWrapper and useHandleUploadFiles
  • How to use?

  import { useHandleUploadFiles } from '@sendbird/uikit-react/Channel/hooks/useHandleUploadFiles'
  import { VoiceMessageInputWrapper, VoiceMessageInputWrapperProps } from '@sendbird/uikit-react/Channel/components/MessageInput'

Fixes:

• Fixed a bug where setting startingPoint scrolls to the middle of the target message when it should be at the top of the message
• Applied dark theme to the slide left icon
• Fixed a bug where changing current channel not clearing pending and failed messages from the previous channel
• Fixed a bug where the thumbnail image of OGMessage being displayed as not fitting the container
• Fixed a bug where resending a failed message in Thread results in displaying resulting message in Channel
• Fixed a bug where unread message notification not being removed when scroll reaches bottom

Improvement:

• Channels list no longer displays unread message count badge for focused channel