[v3.9.1] (Dec 8 2023)

Features:

• Improved image loading speed by implementing lazy load with IntersectionObserver
• Replaced lamejs binary
• Applied the uikitUploadSizeLimit to the Open Channel Message Input
  • Check the file size limit when sending file messages from Open Channel
  • Display the modal alert when the file size over the limit

Fixes:

• Fixed a bug where the admin message disappears when sending a message
• Recognized the hash property in the URL
• Fixed a bug where resending MFM fails in the thread
• Group channel user left or banned event should not be ignored
• Removed left 0px from <Avatar /> component to fix ruined align
• Applied StringSet for the file upload limit notification
• Updated currentUserId properly in the channel list initialize step.
  • Fixed group channel doesn't move to the top in a channel list even though latest_last_message is the default order.

Improvements:

• Divided <EditUserProfileUI /> into Modal and View parts
• Added a message prop to <ReactionItem /> component
• Improved the storybook of <EmojiReactions />

[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

[v3.8.2] (Nov 10 2023)

Features:

• MessageContent is not customizable with three new optional properties:
  • renderSenderProfile, renderMessageBody, and renderMessageHeader
  • How to use?

    import Channel from '@sendbird/uikit-react/Channel'
    import { useSendbirdStateContext } from '@sendbird/uikit-react/useSendbirdStateContext'
    import { useChannelContext } from '@sendbird/uikit-react/Channel/context'
    import MessageContent from '@sendbird/uikit-react/ui/MessageContent'
    
    const CustomChannel = () => {
      const { config } = useSendbirdStateContext();
      const { userId } = config;
      const { currentGroupChannel } = useChannelContext();
      return (
        <Channel
          ...
          renderMessage={({ message }) => {
            return (
              <MessageContent
                userId={userId}
                channel={currentGroupChannel}
                message={message}
                ...
                renderSenderProfile={(props: MessageProfileProps) => (
                  <MessageProfile {...props}/>
                )}
                renderMessageBody={(props: MessageBodyProps) => (
                  <MessageBody {...props}/>
                )}
                renderMessageHeader={(props: MessageHeaderProps) => (
                  <MessageHeader {...props}/>
                )}
              />
            )
          }}
        />
      )
    }
    

Fixes:

• Fix runtime error due to publishing modules
• Add missing date locale to the UnreadCount banner since string
• Use the more impactful value between the resizingWidth and resizingHeight
  • So, the original images' ratio won't be broken
• Apply the ImageCompression to the Thread module
• Apply the ImageCompression for sending file message and multiple files message

Improvements:

• Use channel.members instead of fetching for non-super group channels in the SuggestedMentionList

[v3.8.1] (Nov 10 2023) - DEPRECATED

[v3.8.0] (Nov 3 2023)

Feat:

• Added a feature to support predefined suggested reply options for AI chatbot trigger messages.
• Introduced custom date format string sets, allowing users to customize the date format for DateSeparators and UnreadCount.
• Exported the initialMessagesFetch callback from the hook to provide more flexibility in UIKit customization.

Fixes:

• Removed duplicate UserProfileProvider in `OpenChannelSettings``.
• Removed the logic blocking the addition of empty channels to the ChannelList.
• Fixed a runtime error in empty channels.
• Added precise object dependencies in effect hooks to prevent unnecessary re-renders in the Channel module.
• Used channel members instead of fetch when searched.

Chores:

• Migrated the rest of modules & UI components to TypeScript from Javascript.
• Introduced new build settings:
  • Changes have been made to export modules using the sub-path exports in the package.json. If you were using the package in a Native CJS environment, this might have an impact. In that case, you can migrate the path as follows:

    - const ChannelList = require('@sendbird/uikit-react/cjs/ChannelList');
    + const ChannelList = require('@sendbird/uikit-react/ChannelList');
    

  • TypeScript support also has been improved. Now, precise types based on the source code are used.