[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

[v3.3.4] (Jan 6 2023)

Fix:

• Add the time stamp rendering case for before this year on the ChannelList
• Improve the message input security
  • Possibility of XSS has been discovered
  • Recommend to do a version up, if you are using UIKit version 3.0.0 or higher

[v3.3.3] (Dec 22 2022)

Fix:

• Change default value of the image compression rate to 70%(0.7)

[v3.3.2] (Dec 8 2022)

[v3.3.2] (Dec 8 2022)

Features:

• Add props renderTitle to the component

  • renderHeader of will be deprecated

• Add interface overrideInviteUser

  Add overrideInviteUser to ChannelList, CreateChannel and ChannelSettings

  This interface overrides InviteMember functionality. Customer has to create the channel
  and close the popup manually

  export type OverrideInviteUserType = {
      users: Array<string>;
      onClose: () => void;
      channelType: 'group' | 'supergroup' | 'broadcast';
  };
  export interface ChannelListProps {
    overrideInviteUser?(params: OverrideInviteUserType): void;
  }
  export interface CreateChannelProps {
    overrideInviteUser?(params: OverrideInviteUserType): void;
  }
  export type OverrideInviteMemberType = {
      users: Array<string>;
      onClose: () => void;
      channel: GroupChannel;
  };
  ChannelSettings.overrideInviteUser?(params: OverrideInviteMemberType): void;

  example:

  <ChannelList
    overrideInviteUser={({users, onClose, channelType}) => {
      createMyChannel(users, channelType).then(() => {
        onClose();
      })
    }}
  />

Fixes:

• Allow to override entire message search query.
  Now message search query supports searching messages in multiple channels.
• Modify type definitions for props ThreadUIProps.renderMessage.
• Remove duplication of create channel button when using renderHeader of .
• The online status should work even configureSession is provided.
  This was disabled because of a bug in sessionHandler in SDK now, we can re-enable this.
• Create channel sometimes had empty operatorID.
  Use sendbird state to access currentUserID and use it incase prop value is empty.
  Also, remove legacy HOC pattern.
• Add the props type isMentionEnabled of .
• Change the props type messageSearchQuery of to MessageSearchQueryParams.

What's Changed

• [v3.3.1] (Nov 23 2022) by @HoonBaek in #369
• fix: Add types for renderMessage of ThreadUI by @HoonBaek in #371
• fix: create channel sometimes had empty operatorID by @sravan-s in #372
• fix: onlinestatus should work even configureSession is provided by @sravan-s in #366
• Fix: Mark as read definitely when receiving message by @HoonBaek in #373
• feat: add interface overrideInviteUser by @sravan-s in #370
• fix: Allow overriding entire message search query by @HoonBaek in #374
• fix: Include renderIconButton into the renderHeader range by @HoonBaek in #375
• fix: Change the type definition of messageSearchQuery by @HoonBaek in #376
• fix: Add props type isMentionEnabled to the App component by @HoonBaek in #377
• Release v3.3.2 on Dec 8 by @HoonBaek in #378

Full Changelog: v3.3.0...v3.3.2