sendbird/sendbird-uikit-react v3.14.11

[v3.14.11] (June 20, 2024)

on GitHub

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
    

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

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

    1. 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.