sendbird-uikit-react

Some small changes are included after 3.5.1 released

• #648 : fix: Race condition in disconnect/connect
• #650 : feat: add uikitOptions prop to App & SendbirdProvider

Fixes:

• Set fallback values \w global configs in App comp
• Use global config's replyType if channel one is undefined
• Use global disableUserProfile if each context's one is defined
• Clear scrollBottom on channel state loading
• Fixes a runtime error
  caused by clicking "Reply in thread" menu from a parent message
• Check if the message.type property is empty
  and return false when it is empty in the isVoiceMessage function

Release UIKit React v3.5.0 (Mobile Web Support)

Feat:

• Mobile Browser UX Revamp
  We have revamped the UX to support mobile devices -

  • Revamped Modals
  • Revamped Context Menu -> Long press to open context menu
  • Revamped Message Input

  This feature is disabled by default. To enable this feature, add the following prop to SendBirdProvider & App component.

  breakpoint?: string | boolean
  

  Example:

  <SendBirdProvider breakpoint="768px">
  

  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
  return (
    <SendbirdProvider breakpoint={isMobile} />
      {
        isMobile
          ? <MobileChatLayout />
          : <DesktopChatLayout />
      }
    </SendbirdProvider>
  )
  

  Other props:

  • SendbirdProvider?.onUserProfileMessage?: (channel: GroupChannel) => void
    Callback for handling when user sends a user profile message.
  • Channel?.onBackClick?: () => void
    Callback for handling when user clicks on back button in channel.
    This is only applicable for mobile devices.

• Configure UIKit through Dashboard(not released yet)
  We are doing groundwork to support configuring UIKit through
  the dashboard. This will allow you to configure UIKit without
  having to add props to each component. This feature will not be a
  breaking change and will be backwards compatible.

Chore:

• TSC error in typescript sample
• Samples -> Upgrade vite to 4.3.9

Fixes:

• Connection
  • Disconnect SDK on Sendbird provider component unmount
• Message
  • Desktop - allow text select on Labels
  • Remove loading placeholder on ThumbnailMessage
  • OGMessage width overflow while adding reaction
  • Center align & remove ellipsis from admin message
• Voice Message
  • Hide download option for voice message
  • Show warning when there is no voice recording permission
  • Race condition in playing audio files simultaneously
  • Stop voice player when recorder exits
  • Pause voice when component is removed from layout
• Replies
  • Quoted text alignment for reply messages
  • MessageList: Triggering of random clicks while scroll to parent
• Thread
  • Improve parent message detection
  • Emoji reactions overflow in message
• Settings
  • : Show context menu on click
• Open Channel
  • OpenChannel Context menu click leak
  • Vertical scroll on labels in open channel list

• place holder

The RC contains below feature config related changes

• https://github.com/sendbird/sendbird-uikit-react/pull/626: apply app attr impacted configs' value
• https://github.com/sendbird/sendbird-uikit-react/pull/630: make integrated toggle config options resettable
• https://github.com/sendbird/sendbird-uikit-react/pull/636: make sdk disconnected on Sendbird component umount
• https://github.com/sendbird/sendbird-uikit-react/pull/638: use global config's replyType if channel one is undefined
• https://github.com/sendbird/sendbird-uikit-react/pull/639: use global disableUserProfile if each context's one is defined
• https://github.com/sendbird/sendbird-uikit-react/pull/640: set fallback values \w global configs in App component

• #613: apply groupChannel & openChannel.enableDocument config
• #619: apply groupChannel.threadReplySelectType config
• #622: upgrade Vite version used for Sample Apps to resolve the security issue in old ver of Vite
• #623: reset default value of duplicated configs in modules/App

• https://github.com/sendbird/sendbird-uikit-react/pull/618: added breakpoint prop
• https://github.com/sendbird/sendbird-uikit-react/pull/614: replaced UIKitConfigProvider \w @sendbird/uikit-tools
• https://github.com/sendbird/sendbird-uikit-react/pull/616 & https://github.com/sendbird/sendbird-uikit-react/pull/617: applied enableMessageSearch & enableTypingIndicator UIKit Dashboard config

Fixes:
https://sendbird.atlassian.net/browse/UIKIT-4029
https://sendbird.atlassian.net/browse/UIKIT-4048
https://sendbird.atlassian.net/browse/UIKIT-3925
https://sendbird.atlassian.net/browse/UIKIT-4031
https://sendbird.atlassian.net/browse/UIKIT-3901
https://sendbird.atlassian.net/browse/UIKIT-3952
https://sendbird.atlassian.net/browse/UIKIT-4037
https://sendbird.atlassian.net/browse/UIKIT-4044

https://sendbird.atlassian.net/browse/UIKIT-4028
https://sendbird.atlassian.net/browse/UIKIT-4079
https://sendbird.atlassian.net/browse/UIKIT-3917

Fixes:

• ChannelList

  • Display a channel on channel list only when there's a message
  • Remove edited message from ChannelPreview

• MarkAsRead & MarkAsDelivered

  • Batch markAsRead & markAsDelivered requests

• Scrolling

  • Various scroll issues in Channel component
  • Shaky scroll on messages when fetching messages
  • Scroll into view when starting point is set
  • Scroll into message on clicking quote reply
  • Inconsistent rendering on scrollToBottom button

• Mention

  • Improve max mention count logic in Messages
  • Improve mention detection when there are curly braces in user's name Mentions
    were not working when user nickname had curly braces

• Special channels

  • Disable mention in the broadcast channel
  • Change OpenChannelInput muted state notice text in broadcast channel

• Reply

  • Apply ellipsis to a sender of quote and admin message

• Thread

  • Add border bottom to the ParentMessageInfo component
  • Modify string set for thread menu "Reply to Thread" -> "Reply in Thread"
    Do not display "Reply in Thread" to the reply messages
  • Prevent hover style of ParentMessageInfo component

• OpenChannel

  • Apply theme to the OpenChannelList header

Chores:

• Add a sample with router
• Add dataId to the every menu items

Contributors: @AhyoungRyu @HoonBaek @sravan-s

Nightly for mobile ~

Fixes:

• Prevent white space only text sending
• Mentioned user Regex parsing
  Mention will now work even if userId has .*+?^${}()|[\]\\ characters.
• ChannelList blink when when message is send
  Happened when there were two channelLists in the same page with
  different query params.
• ChannelSetting renderUserProfile prop
  We were applying renderChannelProfile in place of renderUserProfile.
• MessageBody: Words break mid word
  Words were breaking midword because all white spaces were converted into nbsps.
  CSS couldnt distinguish nbsps as whitespaces, so wrapping didnt work well.

Chores:

• Setup CircleCI
  • We are moving from Github Actions to CircleCI
• Setup Husky
  • Setup lint on post push
  • Auto run yarn install on post pull
• Update EsLint
  • Update version to 8.40.x
  • Apply more strict rules

Contributors: @chrisallo, @HoonBaek , @AhyoungRyu , @sravan-s

Jira comments points here, But release note is in
https://github.com/sendbird/sendbird-uikit-react/releases/tag/3.4.7

Important Notes:

• @sendbird/[email protected] has an issue with abortcontroller-polyfill plugin. Please use version 4.7.2 or install it separately.

Features:

• Set Chat SDK v4.3.0 as the minimum required version.
• Add a new UI component, Toggle:
  • ToggleContainer: A context provider component that manages only the toggle status.
  • ToggleUI: A UI component that does not include the status managing logic.
  • Toggle: A combination of ToggleContainer and ToggleUI components.
  • useToggleContext: A custom useContext hook that provides context from ToggleContainer.

  import { Toggle, ToggleContainer, ToggleUI,  useToggleContext } from '@sendbird/ui/Toggle';
  

Fixes:

• Apply isMuted to the participant list. Operators can now unmute the muted participants from the participant list.
• Update the max mention count notice message.
• Modify the URL Regex to filter various types of formats.
• Give a left margin to the link text inside the message.
• Move the message list scroll after the OG image is loaded.
• Specify that getSdk returns SendbirdGroupChannel or SendbirdOpenChannel.
• Fix the issue where the current channel flickers on the ChannelList while creating a new group channel.

Chores:

• Rewrite the connection logic in sdk/thunks to hooks/useConnect

  const reconnect = useConnect({
    appId,
    userId,
    accessToken,
  }, {
    logger,
    nickname,
    profileUrl,
    configureSession,
    customApiHost,
    customWebSocketHost,
    sdk: sdkStore?.sdk,
    sdkDispatcher,
    userDispatcher,
  });
  

• Rename smart-components/ to modules/.
• Modify Logger method:
  • The first parameter (log message) of the method is now required.
  • Any other values can be passed to the second parameter of the method in a key-value format.

Fixes:

• Use markAsReadScheduler in MessageList:
  • markAsReadScheduler method throttles markAsRead calls.
  • Reduces cmd no ack error.
• Apply common scroll hook to GroupChannel MessageList:
  • Prevent whole page from scrolling when <GroupChannel /> scrolls.
    This issue occurs when customer implements an <GroupChannel /> in a web page with scroll.
  • This is a same fix that we fixed OpenChannel in v3.4.4.
• To unify message sending policies with ios & android:
  • Do not show send button when there is only new line or empty space in the input.
  • Do not trim leading white spaces in message text.
• Optimize lamjs import:
  • Lazy load the audio converting processor(lamejs) only when isVoiceMessageEnabled is true.
  • This saves 106KB Gzipped(85KB Brotli) if you are not using the VoiceMessage feature.

Features:

• Add a message list filter of UI level in the Channel module

  • Add Channel.filterMessageList?: (messages: BaseMessage): boolean;, a UI level filter prop
    to Channel. This function will be used to filter messages in <MessageList />

    example:

    // set your channel URL
    const channel = "";
    export const ChannelWithFilter = () => {
      const channelFilter = useCallback((message) => {
        const now = Date.now();
        const twoWeeksAgo = now - 1000 * 60 * 60 * 24 * 14;
        return message.createdAt > twoWeeksAgo;
      }, []);
      return (
        <Channel
             channelUrl={channel}
             filterMessageList={channelFilter}
         />
      );
    };
    

• Improve structure of message UI for copying
  Before:

  • The words inside messages were kept in separate spans
  • This would lead to unfavourable formatting when pasted in other applications

  After:

  • Remove span for wrapping simple strings in message body
  • Urls and Mentions will still be wrapped in spans(for formatting)
  • Apply new logic & components(TextFragment) to tokenize strings
  • Improve keys used in rendering inside message,
    • UUIDs are not the optimal way to improve rendering
    • Create a composite key with message.updatedAt
  • Refactor usePaste hook to make mentions work ~
  • Fix overflow of long strings
  • Deprecate Word and convertWordToStringObj

• Export MessageProvider, a simple provider to avoid prop drilling into Messages
  Note - this is still in works, but these props will remain

  • In the future, we will add methods - to this module - to:
    • Edit & delete callbacks
    • Menu render options(ACLs)
    • Reaction configs
    • This will improve the customizability and remove a lot of prop drilling in Messages

  export type MessageProviderProps = {
    children: React.ReactNode;
    message: BaseMessage;
    isByMe?: boolean;
  }
  
  import { MessageProvider, useMessageContext } from '@sendbird/uikit-react/Message/context'
  

  Incase if you were using MessageComponents and see error message
  useMessageContext must be used within a MessageProvider
  use: <MessageProvider message={message}><CustomMessage /></MessageProvider>

• Add a scheduler for calling markAsRead intervally

  • The markAsRead is called on individual channels is un-optimal(causes command ack. error)
    because we have a list of channels that do this
    ideally this should be fixed in server/SDK
    this is a work around for the meantime to un-throttle the customer

Fixes:

• Set current channel on ChannelList when opening channel from the parent message of Thread
  • Issue: The ChannelPreview item is not selected when opening the channel from
    the ParentMessage of the Thread
  • Fix: Set activeChannelUrl of ChannelList
• Detect new lines in safari on the MessageInput component
  • Safari puts <div>text</div> for new lines inside content editable div(input)
  • Other browsers put newline or br

Thanks @HoonBaek @AhyoungRyu

Features:

• Increase default maximum recording time of Voice Message to 10 minutes
• Add logger to VoicePlayer, VoiceRecorder, and useSendVoiceMessage hook

Fixes:

• Prevent whole page from scrolling when OpenChannel scrolls
  This issue occurs when customer implements an OpenChannel in a web page with scroll
• Fix edgecase in which voice messages were sent twice
• Clean up Thread interface
  If message.parentMessage doesnt exist, treat message as parentMessage
  <Thread message={message} />

Features:

• Add rollup-plugin-size-snapshot for bundle-size
  Run rollup-plugin-size-snapshot on build,
  we will check bundle size before every release
• Move old samples to use vite
  React team these days are using vite for their samples,
  CRA is discourged
• Run code coverage on commenting ./coverage
  Check code coverage on PR comment
• Add prop to disable Channel & Thread inputs
  Add prop: disabled?: false for Channel & Thread MessageInputWrapper
• Replace renderToString(react-dom) with custom fn
  Replace renderToString from react-dom/server with custom function
  This function was creating issue in customers with cra@4 & react@17

Fixes:

• Replace outdated CSS rules
  justify-content: start; and height: fill-available;
• Menu position in tight screens
  • Condition where some menus get clipped in left side:
    • Usually user profile in channel moderation
  • Context menu of last item in channel gets clipped in the bottom

Features:

• Mentions should be preserved when copy pasted from sendbird-messages and message input

  • Make sure you are posting mentions of users from same channel

  • We dont support pasting of rich text from other applications

  • For copying simple text, we recommend using paste option in message context-menu

  • Conditions tested:

    1. paste simple text
    2. paste text with mention
    3. paste text with mention and text
    4. paste text with mention and text and paste again before and after
    5. copy message with mention(only one mention, no other text) and paste
    6. copy message with mention from input and paste(before and after)

Chores:

• Arrange the order of the string set table
  Some string-set were missing on the current string set table, so our customers werent able to use the latest state of the string set feature

Library added:

• [email protected]: +8Kb Gzipped

Fixes:

• Keep scroll if context menu is opened when receiving messages
• Handle Ephemeral channel
  • Group channel list
    • Remove the message receipt status (channel preview)
    • Remove the unread message count (channel preview)
  • Group channel
    • Remove the message edit
    • Remove the message delete
    • Remove the message reactions
    • Remove the message receipt status (message)
    • Remove the message reply (quote_reply, thread)
  • Group channel settings
    • Remove the search in channel
  • Open channel
    • Remove the message edit
    • Remove the message delete
• Clear timeout in useLayoutEffect of Message
  • This removes memory leak warnings

SDKRLSD-714