[v3.4.5] (Apr 07 2023)

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

[v3.4.4] (Mar 31 2023)

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} />

[v3.4.3] (Mar 24 2023)

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

[v3.4.2] (Mar 17 2023)

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

[v3.4.1] (Mar 10 2023)

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

[v3.4.0] (Mar 6 2023)

Voice Message

Voice message is a new type of message and feature that you can use in group channel. You can record your voice on the message input and send it to the channel. Also the messages will be displayed as a new design of the voice message. You are able to use this feature from this version.

How to turn on/off

• You can turn this feature on/off using the props isVoiceMessageEnabled on the and components. Here is an example.

import App from '@sendbird/uikit-react/App'
import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
import { useEffect } from 'react'

const QuickStart = () => (<App isVoiceMessageEnabled />)
const CustomApp = () => {
  const [useVoiceMessage, setUseVoiceMessage] = useEffect(true)
  return (
    <SendbirdProvider
      isVoiceMessageEnabled={useVoiceMessage}
    >
      {/* Implement your custom app here */}
    </SendbirdProvider>
  )
}

How to customize the voice message in Channel and Thread?

You can identify the voice message to check if message.type includes sbu_type=voice. But you can use isVoiceMessage util function to do that.

import Channel from '@sendbird/uikit-react/Channel'
import isVoiceMessage from '@sendbird/uikit-react/utils/message/isVoiceMessage'

const CustomChannel = () => {
  return (
    <Channel
      renderMessage={({ message }) => {
        if (isVoiceMessage(message)) {
          // Return your custom voice message item component
        }
        return null
      }}
    />
  )
}

Limitation & Next step

• For now, it's not able to customize the inner components of VoiceMessageInput. We are going to provide an interface to customize it in the future. Until that time, you can replace the VoiceMessageInput component using the renderVoiceMessageIcon props of MessageInput component.

What has been changed?

• Add props isVoiceMessageEnabled and voiceRecord props to the App, SendbirdProvider, and MessageInput components, to turn on/off the voice message recording feature

  import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
  const CustomApp = () => {
    return (
      <SendbirdProvider
        isVoiceMessageEnabled
        voiceRecord={{
          maxRecordingTime: 60000,
          minRecordingTime: 1000,
        }}
      >
        {/* implement custom application */}
      </SendbirdProvider>
    )
  }

• Add props onVoiceMessageIconClick to the MessageInput component
• Add props onBeforeSendVoiceMessage to the Channel component
• Fetch message list including MetaArray in the Channel and Thread modules
• Provide new IconType AudioOnLined & new IconColor Primary2 and OnBackground4
• Provide new string sets

  import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
  const CustomApp = () => {
    return (
      <SendbirdProvider
        stringSet={{
          BUTTON__OK: 'OK',
          VOICE_MESSAGE: 'Voice Message',
          MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_MUTED: 'You\'re muted by the operator.',
          MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_FROZEN: 'Channel is frozen.',
        }}
      >
        {/* implement custom application */}
      </SendbirdProvider>
    )
  }

  • BUTTON__OK: 'OK' → Used on the submit button of pop up modal
  • MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_MUTED: 'You're muted by the operator.' → Used in an alert pop-up modal
  • MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_FROZEN: 'Channel is frozen.' → Used in an alert pop-up modal
  • VOICE_MESSAGE: 'Voice Message' → Used in ChannelPreviewItem, QuoteMessage, and MessageSearch to appear that the message type is the voice## External Contributions

What has been added?

• Install lamejs to convert the audio file to mp3 (iOS support)
• UI components

  import PlaybackTime from "@sendbird/uikit-react/ui/PlaybackTime"
  import ProgressBar from "@sendbird/uikit-react/ui/ProgressBar"
  import VoiceMessageInput from "@sendbird/uikit-react/ui/VoiceMessageInput"
  import VoiceMessageItemBody from "@sendbird/uikit-react/ui/VoiceMessageItemBody"

  • PlaybackTime: Display the current time in 00:00 format with the received millisecond value
  • ProgressBar: Display the current progress status with the received maxSize and currentSize of millisecond unit value
  • VoiceMessageInput: UI component for recording and playing a voice message
  • VoiceMessageItemBody: UI component for rendering a voice message also able to play voice message
• VoiceRecorder

  import { VoiceRecorderProvider, useVoiceRecorderContext } from '@sendbird/uikit-react/VoiceRecorder/context'
  import useVoiceRecorder from '@sendbird/uikit-react/VoiceRecorder/useVoiceRecorder'

  • VoiceRecorderProvider: A react context provider component providing start, and stop functions
  • useVoiceRecorderContext: A react useContext hook of VoiceRecorderProvider
  • useVoiceRecorder: A react hook that provides advanced context, recordingLimit, recordingTime, recordingFile, and recordingStatus. Recommend using this hook in the customized components.
• VoicePlayer

  import { VoicePlayerProvider, useVoicePlayerContext } from '@sendbird/uikit-react/VoicePlayer/context'
  import useVoicePlayer from '@sendbird/uikit-react/VoicePlayer/useVoicePlayer'

  • VoicePlayerProvider: A react context provider component providing play, and pause functions
  • useVoicePlayerContext: A react useContext hook of VoicePlayerProvider
  • useVoicePlayer: A react hook that provides advanced context, playbackTime, duration, and playingStatus. Recommend using this hook in the customized components.
• utils/isVoiceMessage: A function that you can check if the given message is a voice message

  import isVoiceMessage from '@sendbird/uikit-react/utils/message/isVoiceMessage'
  const isVoiceMsg: boolean = isVoiceMessage(message);

Features:

• Add props renderFileUploadIcon, renderVoiceMessageIcon, and renderSendMessageIcon into the Channel, ChannelUI, and MessageInput component

  interface MessageInputProps {
    renderFileUploadIcon?: () =>  React.ReactElement;
    renderVoiceMessageIcon?: () =>  React.ReactElement;
    renderSendMessageIcon?: () =>  React.ReactElement;
  }

Fixes:

• Use ApplicationUserListQuery on ChannelSettings component
• Fix some visual issues on the normal User Panel of ChannelSettings
• Indentify faulty images in OG message
• Add classname: sendbird-og-message-item-body__og-thumbnail__empty to identify faulty images in OG message
  Clients can use CSS to target this class~

  .sendbird-og-message-item-body__og-thumbnail__empty {
    display: none;
  }

What's Changed

• fix: add classname for empty OG-image by @sravan-s in #412
• fix: use applicationuserlistQuery from ChannelSetting by @sravan-s in #419
• feature: Voice Message by @HoonBaek in #426
• fix: Disabling voice message input submit button by @HoonBaek in #428
• feat: bring lamejs.all built with parcel by @sravan-s in #429
• Release/v3.4.0 by @HoonBaek in #427

Full Changelog: v3.3.7...v3.4.0

[v3.3.7] (Feb 24 2023)

Features:

• Add props activeChannelUrl to ChannelList to give an option to pragmatically set a channel from a parent component router

  const MyChannelList = () => {
    const [myActiveChannel] = useState()
    return (<ChannelList activeChannelUrl={myActiveChannel.url} />)
  }

Fixes:

• Fix not showing newly recived messages in channel which has less messages
• Use a real channel.invitedAt value when trying to fetch MessageSearchQuery
• Disable the checkbox of the joined users on the InviteUsersModal
• Set the default value of CheckBox component: @sendbird/uikit-react/ui/CheckBox as false

[v3.3.6] (Feb 13 2023)

Fixes:

• pubsub should be initialized with useState
• update onBeforeCreateChannel example to use chat V4

[v3.5.0-beta.0] (Feb 6 2023)

Notification Channel

A notification channel is a new group channel dedicated to receiving one way marketing and transactional messages. To allow users to view messages sent through Sendbird Message Builder with the correct rendering, you need to implement the notification channel view using <NotificationChannel>

Overview:

• Provide new module NotificationChannel
  • NotificationChannel
    import NotificationChannel from '@sendbird/uikit-react/NotificationChannel'
    props:
    • channelUrl: string;
    • children?: React.ReactElement;
      // To customize Query
    • messageListParams?: MessageListParams;
      // Sets last seen externally
    • lastSeen?: number;
      // handles Actions sepcified in Message Templates
    • handleWebAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage): null;
    • handleCustomAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage): null;
    • handlePredefinedAction?(event: React.SyntheticEvent, action: Action, message: BaseMessage): null;
      // UI overrides
    • isLoading?: boolean;
    • renderPlaceholderLoader?: () => React.ReactElement;
    • renderPlaceholderInvalid?: () => React.ReactElement;
    • renderPlaceholderEmpty?: () => React.ReactElement;
    • renderHeader?: () => React.ReactElement;
    • renderMessageHeader?: ({ message }) => React.ReactElement;
    • renderMessage?: ({ message }) => React.ReactElement;

example:
export const NotificationChannelComponenet = () => (
  <Sendbird
    appId={appId}
    userId={userId}
    accessToken={accessToken}
  >
    <div style={{ height: '960px', width: '360px' }}>
      <NotificationChannel
        channelUrl={`SENDBIRD_NOTIFICATION_CHANNEL_NOTIFICATION_${userId}`}
        renderPlaceholderLoader={() => <MyBrandLogo />};
        handleCustomAction={(event, action, message) => {
          ... implement custom action
        }}
      />
    </div>
  </Sendbird>
);

• Submodules:
  • Context
    import { NotficationChannelProvider useNotficationChannelContext } from '@sendbird/uikit-react/NotificationChannel/context'
    Handles business logic of Notification Channel
  • NotificationChannelUI
    import NotificationChannelUI from '@sendbird/uikit-react/NotificationChannel/components/NotificationChannelUI'
    UI wrapper of Notification Channel
  • NotificationMessageWrap
    import NotificationMessageWrap from '@sendbird/uikit-react/NotificationChannel/components/NotificationMessageWrap'
  • NotificationList
    import NotificationList from '@sendbird/uikit-react/NotificationChannel/components/NotificationList'
• External modules:
  Unlike some of our other releases we decide to release some components into seperate packages to enahnce reusability with other platforms/projects
  • MessageTemplateParser('@sendbird/react-message-template')
    • MessageTemplate
      import { createMessageTemplate } from '@sendbird/react-message-template'
    • Parser
      import { createParser } from '@sendbird/react-message-template'
    • Renderer
      import { createRenderer } from '@sendbird/react-message-template'
  • MessageTemplateParser('@sendbird/react-message-template')
    • Context
      import { MessageProvider, useMessageContext } from '@sendbird/react-uikit-message-template-view';
    • MessageTemplateView
      import { MessageTemplateView } from '@sendbird/react-uikit-message-template-view';

[v3.3.5] (Feb 3 2023)

Features:

• Voice Recorder&Player logic(not public yet)
  • Add a voice record logic: VoiceRecorderProvider, useVoiceRecorderContext, useVoiceRecorder
  • Add an audio play logic: VoicePlayerProvider, useVoicePlayerContext, useVoicePlayer
• Create an integrated sample for the group channel

Fix:

• Migrate the outdated ChannelListQuery interface
  • Issue: A customer said the userIdsFilter of ChannelListQuery doesn't work when receiving messages
    There's been an internal channel filtering logic with custom channelListQuery, but it's broken because we've used the outdated interface of Chat SDK.
  • Fix: We migrated the outdated interface _searchFilter and _userIdsFilter to new things searchFilter and `userIdsFilter
• Use the same word-splitting logic on the TextMessage and OGMessage
  • TextMessage will also allow opening the URL links
  • Use the same word wrapping style on the TextMessage and OGMessage
• Apply string set into the moderation section
  • Add string set
    • CHANNEL_SETTING__OPERATORS__ADD_BUTTON: 'Add'
    • CHANNEL_SETTING__MODERATION__EMPTY_BAN: 'No banned members yet'
    • CHANNEL_SETTING__MODERATION__ALL_BAN: 'All banned members'
• Edit should not be allowed when input is empty
• New channel interrupts the current conversation
  • Do not set the current channel when getting an invitation
  • Add test for USER_INVITED in the reducer of ChannelList