[v3.15.2] (Sep 6th, 2024)

Features

• Introduced new message event handlers for onSendMessageFailed,
  onUpdateMessageFailed, and onFileUploadFailed in the eventHandlers
  prop of the message input component. These handlers allow developers to
  respond to message send, update, and file upload failures.

  • How to use?

  <Sendbird
    eventHandlers={{
      message: {
        onSendMessageFailed: (message, error) => {
        // You can use the message parameter to create specific conditions
          if (message.isUserMessage()) {
            alert(`Message failed to send: ${error?.message}`);
          }
        },
        onUpdateMessageFailed: (message, error) => {
          console.error(`Failed to update message: ${message.messageId}, Error: ${error}`);
        },
        onFileUploadFailed: (error) => {
          console.error('File upload failed', error);
        },
      },
    }}

Fixes

• Fixed an issue where the channel UI's scroll did not work after
  sending a new message. This issue was specific to the NextJS
  environment.

[v3.15.1] (Aug 29, 2024)

Fixes

• Fixed unread count badge position on the ChannelPreview item component.

[v3.15.0] (Aug 29, 2024)

Features

• UIKit now supports form messages! Messages with messageForm will be displayed as form messages.

  • Added enableFormTypeMessage global option
    • How to use?

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

  • MessageInput is now being disabled if a channel has a form message that is not submitted and its extendedMessagePayload['disable_chat_input'] value is true
  • Added FormMessageItemBody, and FormInput

• Added support for EmojiCategory. You can now filter emojis for different messages when adding Reactions to a message.

• Added filterEmojiCategoryIds to GroupChannelProvider and ThreadProvider.

  • How to Use

  const filterEmojiCategoryIds = (message: SendableMessage) => {
      if (message.customType === 'emoji_category_2') return [2];
  
      return [1];
  }
  
  <GroupChannel 
    filterEmojiCategoryIds={filterEmojiCategoryIds}
  />

  • Note: You need to set your custom EmojiCategory using Sendbird Platform API in advance.

• Added sub-rendering props to the ThreadListItem and ThreadListItemContent components.

  • Added props list: renderSenderProfile, renderMessageBody, renderMessageHeader, renderEmojiReactions, and renderMobileMenuOnLongPress.
  • How to use:

  const CustomThread = () => (
    <ThreadProvider>
      <ThreadUI
        renderMessage={(props) => (
          <ThreadListItem
            {...props}
            renderSenderProfile={() => <></>}
          />
        )}
      />
    </ThreadProvider>
  );

• Exported subcomponents of MessageContent:

  import { MessageBody, MessageHeader, MessageProfile } from '@sendbird/uikit-react/ui/MessageContent';

Fixes

• Fixed broken CSS in Thread:
  • Style was not applied to ParentMessageInfo until the first message was received on the thread list.
  • Scroll functionality was not working on the thread list.
• Fixed an issue where HTML entities like &sect or &lt were automatically converted to symbols when pasted into a contentEditable element, ensuring they are now preserved as plain text.
• Fixed an issue where the style was breaking in messages due to emoji reactions.
• Fixed a bug where y-scroll was not working in EditUserProfileUIView when the app was displayed in horizontal view on mobile devices.
• Fixed a bug where an offline banned user was not leaving the channel upon reconnecting in mobile view.
• Fixed thumbnail image overflow in OG messages in open channels.
• Fixed broken file viewer title in mobile view.
• Fixed a bug where markdown messages were incorrectly displayed in channel previews.
• Renamed the prop onUserProfileMessage to onStartDirectMessage.
  • Deprecated the onUserProfileMessage prop in SendbirdProvider and UserProfileProvider.
  • Deprecated the onUserProfileMessage interface in SendbirdStateContext and UserProfileContext.
  • Use onStartDirectMessage instead.

[v3.14.14] (Aug 1, 2024)

Features

• Added forceLeftToRightMessageLayout to enable LTR message layout display in RTL mode. This helps users who set htmlTextDirection='rtl' to keep the message layout in LTR format (outgoing messages on the right, incoming messages on the left).

  import SendbirdProvider from ‘@sendbird/uikit-react/SendbirdProvider’;
  import ar from 'date-fns/locale/ar';
  
  const YourComponent() => {
    return (
      <SendbirdProvider
        htmlTextDirection="rtl" // for RTL display
        forceLeftToRightMessageLayout={true} // to enforce the message layout to Left-to-Right direction even though htmlTextDirection is set to ‘rtl’
        dateLocale={ar} // locale setting would be necessary too
        {…other props}
      >
        {...other components}
      </SendbirdProvider>
    )
  }

• Banned members no longer affect the ChannelSettings/Profile.

Fixes

• Fixed an issue where the GroupChannelCollection was not recreated when channelListQueryParams changed. The channel list now refreshes when the values of channelListQueryParams are updated.
• Fixed a bug where replied child message width did not fit the content.
• Corrected the direction of some icons in RTL mode. Specifically, the leave channel icon and the broadcast channel icon.
• Fixed an issue where the feedback modal was not displayed on feedback button click in mobile view. No change in desktop view behavior.
• Fixed an issue where banned members affected the ChannelSettings/Profile. Banned members now do not affect these settings.

Chores

• Omitted renderUserListItem of ChannelSettingsUIProps from the ChannelSettingsProps.

[v3.14.13] (July 18, 2024)

Features

• Address RTL UI Feedback

  • Fixed an issue where the htmlTextDirection prop didn't work when using SendbirdProvider, but only worked in the App module.
  • Updated the paper plane icon to point left instead of right in RTL mode.

• Message Menu Customization in Threads

  • Added renderMessageMenu and renderEmojiMenu props to the <ParentMessageInfo />, <ThreadListItem />, and <ThreadListItemContent /> components.
  • Example usage:

    <Thread
      renderMessage={(props) => (
        <ThreadListItem {...props} renderMessageMenu={(props) => (
          <MessageMenu {...props} renderMenuItems={({ items }) => (
            <>
              <items.CopyMenuItem />
              <items.DeleteMenuItem />
            </>
          )} />
        )} />
      )}
    />

Fixes

• Deprecation Marks on Channel & ChannelList Modules
  • Marked Channel, ChannelProvider, ChannelList, and ChannelListProvider as deprecated.
  • For migration guidance, please refer to the Group Channel Migration Guide.

Chore

• Improve Stability of useMenuItems
  • Improved the stability of the useMenuItems hook.
  • Exported ChannelListQueryParamsType.
  • Moved the renderUserListItem prop to the Provider from the UI component.
  • Exported the ChannelSettingsMenuItem component.
• Added interop: "compat" setting for the CommonJS output in Rollup Config to enhance the compatibility between ESM and CJS.

[v3.14.12] (July 3, 2024)

Features

• RTL Support

  • Added htmlTextDirection prop to SendbirdProvider to support Right-To-Left (RTL) text direction for Middle East customers. Read more.

  import ar from 'date-fns/locale/ar';
  <SendbirdProvider
    ...
    htmlTextDirection={'rtl' | 'ltr'}
    // Setting a proper value to dateLocale would be necessary
    dateLocale={ar}
  >
  </SendbirdProvider>

• DX Improvements: ChannelSetting SettingMenu

  • Added new components and hooks to make the menu items in the ChannelSettingsUI more modular and customizable.
  • New Files:
    • useMenuItems.tsx: Custom hook for menu items based on user roles.
    • MenuItem.tsx: Reusable and customizable menu item component.
    • MenuListByRole.tsx: Renders a list of menu items based on user roles.
  • Example usage:
    To customize the moderation panel with selected menu items:

    import React from 'react';
    import ChannelSettingsUI from '@sendbird-uikit/ChannelSettings/components/ChannelSettingsUI';
    import useMenuItems from '@sendbird-uikit/ChannelSettings/hooks/useMenuList';
    
    const CustomChannelSettings = () => {
      const menuItems = useMenuItems();
    
      const renderCustomModerationPanel = () => {
        // Create a new object by selecting only the desired menu items.
        const customMenuItems = {
          operator: {
            operators: menuItems.operator.operators, // Keep the operators menu
            allUsers: menuItems.operator.allUsers, // Keep the all users menu
            // Add or remove other menu items as needed.
          },
          nonOperator: {
            allUsers: menuItems.nonOperator.allUsers, // Keep the all users menu
            // Add or remove other menu items as needed.
          },
        };
    
        return <MenuListByRole menuItems={customMenuItems} />;
      };
    
      return (
        <ChannelSettingsUI renderModerationPanel={renderCustomModerationPanel} />
      );
    };
    
    export default CustomChannelSettings;

• DX Improvements: ChannelSetting UserListItem

  • UserListItemMenu has been newly created
  • Provided it as a module which also contains UserListItemMenuProvider and useUserListItemMenuContext

    import { UserListItemMenu, UserListItemMenuProvider, useUserListItemMenuContext } from '@sendbird/uikit-react/ui/UserListItemMenu';

  • Added new renderUserListItem props to the list components of ChannelSettings:
    • OperatorList, MemberList, MutedMemberList, BannedUserList
  • Exported the following modules:
    • OperatorList, MemberList, MutedMemberList, BannedUserList

    import { OperatorList, MemberList, MutedMemberList, BannedUserList } from '@sendbird/uikit-react/ChannelSettings/components/ChannelSettingsUI';

  • Merged ui/UserListItem and ChannelSettings/components/UserListItem:
    • Use ui/UserListItem from now on
    • Added size prop to UserListItem, which now accepts two values: 'normal' and 'small' ('small' replaces the previous ChannelSettings/components/UserListItem)
      • normal: Used primarily in Modals
      • small: Used primarily in Lists
  • Example usage:

    <ChannelSettings
      renderUserListItem={(props) => (
        <UserListItem {...props}
          renderListItemMenu={(props) => (
            <UserListItemMenu
              {...props}
              onToggleOperatorState={({ user, newState, error }) => {/** Handle operator state change */}}
              onToggleMuteState={({ user, newState, error }) => {/** Handle mute state change */}}
              onToggleBanState={({ user, newState, error }) => {/** Handle ban state change */}}
              renderTrigger={({ ref }) => (<div ref={ref}>{/** Render your custom trigger icon here */}</div>)}
              renderMenuItems={({ items }) => (
                <>
                  <items.OperatorToggleMenuItem />
                  <items.MuteToggleMenuItem />
                  <items.BanToggleMenuItem />
                </>
              )}
            />
          )}
        />
      )}
    />

Fixes

• Fixed image file viewer header style
• Disabled isSuperGroupReactionsEnabled setter
• Use APP_LAYOUT_ROOT to get the area info of the UIKit

  export const APP_LAYOUT_ROOT = 'sendbird-app__layout';

  • To ensure the menu positions are calculated correctly, wrap the entire area using SendbirdProvider with a tag that has the specified ID.

Chore

• Updated @sendbird/chat version to 4.13.0
  • Improved channel/message refreshing performance utilizing LocalCaching.

[v3.14.11] (June 20, 2024)

Features

• Markdown Support for Text Messages

  • Added enableMarkdownForUserMessage to UIKitOptions. When enabled, markdown syntaxes for bold and link are now applied to user messages.

• Descriptive Color Names Support

  • Users can now customize the color set using more descriptive color names instead of numerical codes.
  • Added a color map parsing utility function, mapColorKeys, to support both new and existing color names.
  • Detailed color name mappings:
    1. Primary, Secondary, Error, information

    Primary-500 -> Primary-extra dark
    Primary-400 -> Primary-dark
    Primary-300 -> Primary-main
    Primary-200 -> Primary-light
    Primary-100 -> Primary-extra light
    Secondary-500 -> Secondary-extra dark
    Secondary-400 -> Secondary-dark
    Secondary-300 -> Secondary-main
    Secondary-200 -> Secondary-light
    Secondary-100 -> Secondary-extra light
    

    2. Background 100~700: No changes
    3. Overlay

    Overlay-01 -> Overlay-dark
    Overlay-02 -> Overlay-light
    

    4. OnLight & OnDark

    // On Light
    On Light-01 -> Onlight-text-high-emphasis
    On Light-02 -> Onlight-text-mid-emphasis
    On Light-03 -> Onlight-text-low-emphasis
    On Light-04 -> Onlight-text-disabled
    // On Dark
    On Dark -01 -> Ondark-text-high-emphasis
    On Dark -02 -> Ondark-text-mid-emphasis
    On Dark -03 -> Ondark-text-low-emphasis
    On Dark -04 -> Ondark-text-disabled
    

• Message Menu Component Refactor

  • Created MessageMenuProvider, useMessageMenuContext, and MessageMenu component.

  • Replaced MessageItemMenu with MessageMenu in GroupChannel. Future PR will apply it to Thread.

  • Migrated MobileContextMenu and MobileBottomSheet using MessageMenuProvider.

  • Exported the MobileMenu

    import { MobileMenu, MobileContextMenu, MobileBottomSheet } from '@sendbird/uikit-react/ui/MobileMenu';

  • How to use?

    Desktop menu

    import GroupChannel from '@sendbird/uikit-react/GroupChannel';
    import MessageContent from '@sendbird/uikit-react/ui/MessageContent';
    import { MessageMenu } from '@sendbird/uikit-react/ui/MessageMenu';
    
    const GroupChannelPage = () => (
      <GroupChannel
        renderMessageContent={(props) => (
          <MessageContent
            {...props}
            renderMessageMenu={(props) => (
              <MessageMenu
                {...props}
                renderMenuItems={(props) => {
                  const {
                    CopyMenuItem,
                    ReplyMenuItem,
                    // ...
                    DeleteMenuItem,
                  } = props.items;
                  // organize the menu items using the items
                  return (
                    <>
                      <CopyMenuItem />
                      <DeleteMenuItem />
                    </>
                  );
                }}
              />
            )}
          />
        )}
      />
    );

    Mobile menu

    import GroupChannel from '@sendbird/uikit-react/GroupChannel';
    import MessageContent from '@sendbird/uikit-react/ui/MessageContent';
    import { MobileMenu } from '@sendbird/uikit-react/ui/MessageMenu';
    
    const GroupChannelPage = () => (
      <GroupChannel
        renderMessageContent={(props) => (
          <MessageContent
            {...props}
            renderMobileMenuOnLongPress={(props) => (
              <MobileMenu
                {...props}
                renderMenuItems={(props) => {
                  const {
                    CopyMenuItem,
                    ReplyMenuItem,
                    // ...
                    DeleteMenuItem,
                  } = props.items;
                  // organize the menu items using the items
                  return (
                    <>
                      <CopyMenuItem />
                      <DeleteMenuItem />
                    </>
                  );
                }}
              />
            )}
          />
        )}
      />
    );

Fixes

• Fixed an issue where the newMessages array was not being reset even after the message list scroll reached the bottom, causing the message notification bar to not disappear properly. Manually called resetNewMessages() under certain conditions.
• Updated the logic to align with other platforms for consistency. Relocated the logic to the same section where other disabled conditions are checked.

[v3.14.10] (June 13, 2024)

Fixes

• Replaced onlight-05 with onlight-03 since onlight-05 doesn't exist in the product design guide.
• Added the onClose event to the modals inside of the FileViewer components.

v3.14.9

[v3.14.9] (June 7, 2024)

Fixes

• Resolved an issue where M4A format audio files were not playing in Safari. M4A files are now parsed as audio/x-m4a to ensure proper playback.
• Prevented the newly created channels from being filtered out from the ChannelList.

Features

• Added a modal to the FileViewer components for utilizing the onMounted event handler.

[v3.14.8] (May 30, 2024)

Fixes

• Resolved the issue of storybook user leaving the channel
• Added a workaround to reset IME in mobile webkit for better input handling
  • This fix involves creating a ghost input to manage focus transitions, preventing the virtual keyboard from closing and ensuring the proper composition of characters like Hangul
  • The ghost input is used to reset the IME context, and focus is moved back to the original input using requestAnimationFrame to avoid delays
• Retry connection when failed with a token expired error
• Ensure scroll to the bottom of the list when mounted before painting
• Minor bug fixes and adjustments for SuggestedReplyItem component:
  • Fixed a bug where horizontal suggested reply items contents are not wrapping to multiple lines
  • Adjusted bubble size
  • Added missing margin

Features

• Added support for rendering .mov file type only in Safari browser