sendbird-uikit-react

[v3.14.5] (May 04, 2024)

Fixes

• Fixed a bug where channel scroll to bottom is not called internally when last message is updated with suggested replies

[v3.14.4] (May 02, 2024)

Features

• Added suggestedRepliesDirection global option which serves as vertical/horizontal scroll option for SuggestedReplies
  • How to use?

  <App
    appId={appId}
    userId={userId}
    uikitOptions={{
      groupChannel: {
        // Below turns on the `SuggestedReplies` feature (see v3.8.0 release changelog). Default value is false.
        enableSuggestedReplies: true,
        // Below changes scroll direction from horizontal to vertical.
        suggestedRepliesDirection: 'vertical'
      }
    }}
  />
  

• Added a new ui component Header (import Header from '@sendbird/uikit-react/ui/Header') which replaced all existing header components
• Added modal.onMounted handler to global eventHandlers. This event handler is triggered within the useEffect of the Modal component at mounting time.

Fixes

• Fixed a bug where suggested replies are incorrectly displayed when showSuggestedRepliesFor is set to 'last_message_only'

Features

• Add outputFormat to the image compression options

  <SendbirdProvider
    ...
    imageCompression={{
      outputFormat: 'preserve' | 'png' | 'jpeg',
    }}
  >
  </SendbirdProvider>
  

Fixes

• Set the message list padding with 12px in the mobile mode

Fixes

• Fixed a bug where right padding is added to messages sent by me in mobile devices
• Removed image section in the OGMessageItemBody if there is no og image
• Fixed that safely opens URL to prevent XSS
• Fixed that copying URI-list issue in the iOS device/Safari
• Fixed that channel badge count is not updated on iOS Webview

Fixes

• Fixed a bug where injecting an optional property with null value not rendering the expected default component
• Updated the type of renderMessage in the OpenChannel module
• Deprecated the renderInput prop and add a new renderMessageInput prop

[v3.14.0] (Apr 5, 2024)

Feature

• TemplateMessageItemBody now supports CarouselView type template
• Added 'wide' width support for MessageContent when value exists in message.extendedMessagePayload['ui']['container_type']
• Added template version validation for TemplateMessageItemBody

Message template fixes/updates

• Fixed a bug where argb color values are not converted to rgba
• Fixed a bug where style properties expecting numeric values are set with string values
• Removed default values of borderRadius, backgroundColor, and color for message template items

Other fixes

• Fixed a bug where scroll bar is displayed in message sender name container

Fixes

• Add a logger to the GroupChannelProvider for failing get channel
• Reduce the OGTag height in the mobile layout
• Prevent force refreshing of the ChannelSettings
• Keep context menu when failing the member operations (register/unregister operator, mute/unmute)
• Keep profile image during member operations on the MembersModal

Feature

• Support the Emoji Reactions feature in the super group channel
  • However, the Tooltip displaying who reacted will only appear in the normal group channel, not in the super group channel.
• Export the MessageFeedbackFailedModal component for consistency with other message feedback-related components.

Features

• Added a renderMenuItem to the MessageMenu component
  • How to use?

  <GroupChannel
    renderMessageContent={(props) => (
      <MessageContent
        {...props}
        renderMessageMenu={(props) => (
          <MessageMenu
            {...props}
            renderMenuItem={(props) => {
              const {
                className,
                onClick,
                dataSbId,
                disable,
                text,
              } = props;
              return <MenuItem /> // Render Custom Menu Item
            }}
          />
        )}
      />
    )}
  />
  

• Added onBeforeDownloadFileMessage to the <GroupChannel /> and <Thread /> modules
  • How to use?

  const ONE_MB = 1024 * 1024;
  /**
    * Use this list to check if it's displayed as a ThumbnailMessage.
    * (https://github.com/sendbird/sendbird-uikit-react/blob/main/src/utils/index.ts)
  */
  const ThumbnailMessageTypes = [
    'image/jpeg',
    'image/jpg',
    'image/png',
    'image/gif',
    'image/svg+xml',
    'image/webp', // not supported in IE
    'video/mpeg',
    'video/ogg',
    'video/webm',
    'video/mp4',
  ];
  
  <GroupChannel // or Thread
    onBeforeDownloadFileMessage={async ({ message, index = null }) => {
      if (message.isFileMessage()) {
        const confirmed = window.confirm(`The file size is ${(message.size / ONE_MB).toFixed(2)}MB. Would you like to continue downloading?`);
        return confirmed;
      }
      if (message.isMultipleFilesMessage()) {
        const confirmed = window.confirm(`The file size is ${(message.fileInfoList[index].fileSize / ONE_MB).toFixed(2)}MB. Would you like to continue downloading?`);
        return confirmed;
      }
      return true;
    }}
  />
  

• Added onDownloadClick to the FileViewer, FileViewerView, MobileBottomSheet, MobileContextMenu, and MobileMenu

Fixes

• Improved the stability of the ChannelSettings Modals
  • Support menu on the MembersModal, MutedMembersModal, and OperatorsModal
  • Display Operator description on the MembersModal
• Fixed the width size of the OGMessageItemBody component
• Added fallback logic on template rendering error
• Replaced the hardcoded text (You) with the StringSet CHANNEL_SETTING__MEMBERS__YOU in the UserListItem

[v3.14.0-beta] (Mar 15, 2024)

Features

• Added 'wide' and 'full' width support for MessageContent when value exists in message.extendedMessagePayload['ui']['container_type']
• Added Carousel ui component
• MessageTemplate now supports composite templates

[v3.14.0-beta.2] (Mar 22, 2024)

Fixes

• Fixed a bug where swiping Carousel in mobile view displaying flickering effect
• Added missing default font-family value to sendbird-message-template__root

Features

• Add a renderHeader props to the ChannelSettingsUIProps

  <ChannelSettingsUI
    renderHeader={() => ...}
  />
  

Fixes

• Deprecated the onClick prop in UserListItem and added onUserAvatarClick. The deprecated prop will be removed in the next major version
• Added throttling in mute/unmute operation
• Added throttling in add/remove operator operation
• Fixed that the Chat SDK is not initialized more than once
• Display the normal FileMessage for the .mov video
• Show X button on the ModalHeader of mobile mode
• Modify the incorrect stringSet on the BannedUsersModal
  • CHANNEL_SETTING__MUTED_MEMBERS__TITLE to CHANNEL_SETTING__BANNED_MEMBERS__TITLE
  • CHANNEL_SETTING__MODERATION__BAN to CHANNEL_SETTING__MODERATION__UNBAN
  • also modified the dataSbId, channel_setting_banned_user_context_menu_ban to channel_setting_banned_user_context_menu_unban
• Fixed a specific environment issue (Android emulator) - Resolved an issue in modals used in ChannelSettings such as MembersModal, MutedMembersModal, AddOperatorsModal, OperatorsModal, BannedUsersModal, where even when scrolling to the end, additional members were not fetched
• Fixed a specific environment issue (Safari) - Similarly addressed an issue within lists inside modals, where overflow occurred instead of scrolling

[v3.13.1] (Mar 08, 2024)

Fixes

• Fixed a GroupChannel scroll issue on Safari when scrollBehavior is set to smooth
• Fixed the case where the calculation of the input height in the chat window was not functioning properly

[v3.13.0] (Feb 29, 2024)

Template message feature

Now we are supporting template message feature!

A message with valid extendedMessagePayload.template value will be displayed with TemplateMessageItemBody.

• Added new ui components:
  • MessageTemplate
  • TemplateMessageItemBody
  • FallbackTemplateMessageItemBody
  • LoadingTemplateMessageItemBody

Others

• Added showSuggestedRepliesFor global option
  • How to use?

  <App
    appId={appId}
    userId={userId}
    uikitOptions={{
      groupChannel: {
        // Below setting always shows `SuggestedReplies` component of a message. Default value is 'last_message_only'.
        showSuggestedRepliesFor: 'always',
      }
    }}
  />
  

• Added renderSuggestedReplies in Message module
  • How to use?

  <Channel
    renderSuggestedReplies={(suggestedRepliesProps) => {
      const { replyOptions, onSendMessage, message } = suggestedRepliesProps;
      return <CustomSuggestedReplies options={replyOptions} />;
    }}
  />
  

• Added renderMobileMenuOnLongPress in MessageContentProps
  • How to use?

  <Channel
    renderMessageContent={(props) => (
      <MessageContent
        {...props}
        renderMobileMenuOnLongPress={(mobileMenuProps: MobileBottomSheetProps) => (
          <CustomMobileMenu {...mobileMenuProps} />
        )}
      />
    )}
  />
  

Fixes

• Fixed a bug where bouncing animation is applied to pending message
• Fixed a bug useChannelSettingsContext not returning channel on initial mount due to channel requests being made before the SDK connection success

[v3.12.1] (Feb 26, 2024)

Fixes:

• Added loading status to the ChannelSettings module and addressed some layout issues

• Added support for multiple lines in the MessageInput on mobile devices

• Fixed hard-coded text to localization text for uploading file size and count limits

• Fixed the MessageListParams type in the ChannelProvider

• Fixed requests for empty image paths during the image optimization process

• Fixed an infinite loop issue occurring when using the GroupChannel/components/Message and Channel/components/Message components in the renderMessage method of the GroupChannel and Channel modules

• The renderMessage method of the GroupChannel module no longer nests messages under the Message component. If a container element for the Message component is needed, use it as follows:

  import { GroupChannel } from '@sendbird/uikit-react/GroupChannel';
  import { Message } from '@sendbird/uikit-react/GroupChannel/components/Message';
  
  const GroupChannelPage = () => {
    return (
      <GroupChannel
        renderMessage={(props) => {
          return (
            <Message message={props.message}>
              <div>{props.message.messageId}</div>
            </Message>
          )
        }}
      />
    )
  }
  

• The renderMessage prop of the Channel/components/Message and GroupChannel/components/Message components has been deprecated. Instead, use the children prop to customize message sub-elements

  <Message message={props.message}>
    <div>{props.message.messageId}</div>
  </Message>
  

• Added detailed comments for customizing-related props in the GroupChannel module

[v3.12.0] (Feb 16, 2024)

Features:

• Local cache is enabled by default
  • If desired, it can be disabled using sdkInitParams

  import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';
  
  const App = () => (
    <SendbirdProvider
      // ...
      sdkInitParams={{ localCacheEnabled: false }}
    />
  )
  

• Added GroupChannel and GroupChannelList modules.
  • With the introduction of GroupChannel and GroupChannelList, a new local caching feature has been added, allowing you to experience a more efficient chat environment.
    We provide a massive component called App that combines all the features. From now on, this component will use GroupChannel and GroupChannelList instead of Channel and ChannelList.
    If you wish to continue using Channel and ChannelList, you can use enableLegacyChannelModules to ensure the previous components are still available for use.

    import SendbirdApp from '@sendbird/uikit-react/App';
      
    const App = () => (
      <SendbirdApp
        // ...
        enableLegacyChannelModules
      />
    );
    

  • You can find detailed changes, usage instructions, and migration methods in the document here: Migration Guide

Fixes:

• Fixed a bug where the session refresh failed when the accessToken was changed #969
• Fixed a bug causing infinite loading when the channel is not selected in the Channel module #970
• Fixed a bug where the mention feature was not functioning properly #971
• Fixed a bug where URLs with numbered top-level domains were treated as links #972
• Fixed a bug where message scroll delays were inconsistently applied #975
• Fixed a bug where isUserIdUsedForNickname was not functioning properly #976
• Optimized the rendering of SendbirdProvider
• Optimized the SDK initialization logic for StrictMode

[v3.11.1] (Feb 08, 2024)

Fixes:

• Fixed acceptableMimeTypes to support web standard format
• Fixed a bug where renderChannelHeader is not passed properly

[v3.11.0] (Feb 07, 2024)

Features:

• Added enableSuggestedReplies global option
  • How to use?

  <App
    appId={appId}
    userId={userId}
    uikitOptions={{
      groupChannel: {
        // Below turns on the `SuggestedReplies` feature (see v3.8.0 release changelog). Default value is false.
        enableSuggestedReplies: true,
      }
    }}
  />
  

• MessageInput is now being disabled if channel.lastMessage.extendedMessagePayload['disable_chat_input'] is true

Fixes:

• Fixed a bug where channel is being removed from my channel list when other member leaves the channel
• Fixed a bug where channel avatar image is not updated when a member leaves, or joins, or profileUrl changes
• Fixed a bug where ChannelListUI is not updated when network is reconnected
• Fixed a bug in ChannelList where activeChannelUrl is set but onChannelSelect fires with null after loading ChannelList
• Fixed a bug where url text wrapped around special characters not parsed as link
• Fixed a bug where space character before url text is removed in sent message
• Fixed a runtime error occurring when using renderMessage of Channel module

[v3.10.1] (Jan 26, 2024)

Fixes:

• Fixed a bug where MessageList is not scrolled to bottom upon entering a channel
• Changed behaviour of the feedback process:
  • old: On feedback icon button click -> open feedback form/menu
  • new: On feedback icon button click -> submit feedback -> open feedback form/menu
• Supported accepting mimeTypes to the MessageInput
• Applied the channelListQuery.order to the ChannelList
• Fixed a bug where muted member list is not being updated after a member had been unmuted
• Fixed a bug where operator list is not being updated after an operator had been removed
• Fixed a bug where a link subdomain has a hyphen or long top-level domain is not recognized as link text

[v3.10.0] (Jan 19, 2024)

Features:

Feedback message feature

Now we are supporting Feedback Message feature!
Feedback message feature can be turned on through enableFeedback option. When turned on, feedback feature is applied to messages with non default myFeedbackStatus values.

• Added enableFeedback global option
  • How to use?

  <App
    appId={appId}
    userId={userId}
    uikitOptions={{
      groupChannel: {
        // Below turns on the feedback message feature. Default value is false.
        enableFeedback: true,
      }
    }}
  />
  

Others

• Added labelType, and labelColor props to ButtonProps
• Added renderMessageContent in ChannelUIProps
  • Now you can customize MessageContent through Channel in two ways:
    1. Customize with renderMessage

    <Channel
      renderMessage={(props) => (
        <Message
          {...props}
          renderMessageContent={(props) => (
            <MessageContent {...props} />
          )}
        />
      )}
    />
    

    2. [Simpler] Customize with renderMessageContent

    <Channel
      renderMessageContent={(props) => (
        <MessageContent {...props} />
      )}
    />
    

Fixes:

• Fixed a bug in mobile view where channel view is displaying a default channel when there is no channel in channel list
• Added missing props renderMessageContent in Channel
• Fixed a bug where center alignment of Badge and Button components breaking in FireFox browser
• Fixed a bug where messages sent by bot member in group channel are not triggering the expected hooks