v3.10.1

[v3.10.1] (Jan 26, 2024)

Fixes:

• Fixed a bug where MessageList is not scrolled to bottom upon entering a channel
• Changed behaviour of the feedback process:
  • old: On feedback icon button click -> open feedback form/menu
  • new: On feedback icon button click -> submit feedback -> open feedback form/menu
• Supported accepting mimeTypes to the MessageInput
• Applied the channelListQuery.order to the ChannelList
• Fixed a bug where muted member list is not being updated after a member had been unmuted
• Fixed a bug where operator list is not being updated after an operator had been removed
• Fixed a bug where a link subdomain has a hyphen or long top-level domain is not recognized as link text

v3.10.0

[v3.10.0] (Jan 19, 2024)

Features:

Feedback message feature

Now we are supporting Feedback Message feature!
Feedback message feature can be turned on through enableFeedback option. When turned on, feedback feature is applied to messages with non default myFeedbackStatus values.

• Added enableFeedback global option
  • How to use?

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

Others

• Added labelType, and labelColor props to ButtonProps
• Added renderMessageContent in ChannelUIProps
  • Now you can customize MessageContent through Channel in two ways:
    1. Customize with renderMessage

    <Channel
      renderMessage={(props) => (
        <Message
          {...props}
          renderMessageContent={(props) => (
            <MessageContent {...props} />
          )}
        />
      )}
    />

    2. [Simpler] Customize with renderMessageContent

    <Channel
      renderMessageContent={(props) => (
        <MessageContent {...props} />
      )}
    />

Fixes:

• Fixed a bug in mobile view where channel view is displaying a default channel when there is no channel in channel list
• Added missing props renderMessageContent in Channel
• Fixed a bug where center alignment of Badge and Button components breaking in FireFox browser
• Fixed a bug where messages sent by bot member in group channel are not triggering the expected hooks

[v3.9.3] (Jan 5, 2024)

Fixes:

• Refactor --sendbird-vh CSS Variable Logic in InviteUsers Component
  • Improved code readability by moving logic to the InviteUsers component.
  • GitHub PR #899 (CLNP-1806)
• Prevent Access to window in SSR Environments
  • Fixed server-side rendering issues in NextJS by preventing access to the window object. (Original Author: Aaron James King)
  • GitHub PR #900 (SBISSUE-14287)
• Update Channel View to Show NO_CHANNEL Placeholder
  • Channel view now displays NO_CHANNEL placeholder after leaving all channels. (Original Author: Alden Quimby)
  • GitHub PR #901
• Fix Replay of Voice Memos
  • Resolved the issue preventing the replay of voice memos. (Original Author: Alden Quimby)
  • GitHub PR #902
• Resolve Image Upsizing Issue in ImageCompression
  • Fixed the issue with image upsizing in ImageCompression. (Original Author: GitHub User) (CLNP-1832)
  • GitHub PR #903
• Update Peer Dependencies for npm Install
  • Addressed peer dependencies issues in npm install. (Original Author: GitHub User)
  • GitHub PR #905
• Fix Scroll Behavior in Open Channel
  • Fixed scroll behavior when sending a message in an open channel. (Original Author: GitHub User)
  • GitHub PR #906
• Fix Cross-Site Scripting Vulnerability in OGTag
  • Fixed cross-site scripting vulnerability in OGTag. (Original Author: GitHub User)
  • GitHub PR #907

[v3.9.2] (Dec 15 2023)

Fixes:

• Fixed scroll issues
  • Maintain scroll position when loading previous messages.
  • Maintain scroll position when loading next messages.
  • Move the logic that delays rendering mmf to the correct location.
• Resolve an issue where scroll position wasn't adjusting correctly when
  the message content size was updated (caused by debouncing scroll
  events).
• Use animatedMessage instead of highlightedMessage in the smart app
  component.
  • Reset text display issue
• Fix the appearance of incomplete text compositions from the previous
  input in the next input.
  • Fixed type errors
    • Resolve the type error related to PropsWithChildren.
• Address the issue of not being assignable to type error, where the
  property 'children' doesn't exist on type PropsWithChildren.
  • Use PropsWithChildren<unknown> instead of PropsWithChildren.
• Fixed a voice message length parsing issue
• Include metaArray to the message list when fetching messages again by
  connecting

[v3.9.1] (Dec 8 2023)

Features:

• Improved image loading speed by implementing lazy load with IntersectionObserver
• Replaced lamejs binary
• Applied the uikitUploadSizeLimit to the Open Channel Message Input
  • Check the file size limit when sending file messages from Open Channel
  • Display the modal alert when the file size over the limit

Fixes:

• Fixed a bug where the admin message disappears when sending a message
• Recognized the hash property in the URL
• Fixed a bug where resending MFM fails in the thread
• Group channel user left or banned event should not be ignored
• Removed left 0px from <Avatar /> component to fix ruined align
• Applied StringSet for the file upload limit notification
• Updated currentUserId properly in the channel list initialize step.
  • Fixed group channel doesn't move to the top in a channel list even though latest_last_message is the default order.

Improvements:

• Divided <EditUserProfileUI /> into Modal and View parts
• Added a message prop to <ReactionItem /> component
• Improved the storybook of <EmojiReactions />

v3.9.0

[v3.9.0] (Nov 24 2023)

Features:

Typing indicator bubble feature

TypingIndicatorBubble is a new typing indicator UI that can be turned on through typingIndicatorTypes option. When turned on, it will be displayed in MessageList upon receiving typing event in real time.

• Added typingIndicatorTypes global option
• Added TypingIndicatorType enum
  • How to use?

  <App
    appId={appId}
    userId={userId}
    uikitOptions={{
      groupChannel: {
        // Below turns on both bubble and text typing indicators. Default is Text only.
        typingIndicatorTypes: new Set([TypingIndicatorType.Bubble, TypingIndicatorType.Text]),
      }
    }}
  />

• Added TypingIndicatorBubble
  • How to use?

  const moveScroll = (): void => {
    const current = scrollRef?.current;
    if (current) {
      const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
      if (scrollBottom < bottom && scrollBottom < SCROLL_BUFFER) {
        // Move the scroll as much as the height of the message has changed
        current.scrollTop += bottom - scrollBottom;
      }
    }
  };
  
  return (
    <TypingIndicatorBubble
      typingMembers={typingMembers}
      handleScroll={moveScroll} // Scroll to the rendered typing indicator message IFF current scroll is bottom.
    />
  );

Others

• Added support for eventHandlers.connection.onFailed callback in setupConnection. This callback will be called on connection failure
  • How to use?

    <Sendbird
      appId={appId}
      userId={undefined} // this will cause an error 
      eventHandlers={{
        connection: {
          onFailed: (error) => {
            alert(error?.message); // display a browser alert and print the error message inside
          }
        }
      }}
    >

• Added new props to the MessageContent component: renderMessageMenu, renderEmojiMenu, and renderEmojiReactions
  • How to use?

  <Channel
  renderMessageContent={(props) => {
    return <MessageContent
      {...props}
      renderMessageMenu={(props) => {
        return <MessageMenu {...props} />
      }}
      renderEmojiMenu={(props) => {
        return <MessageEmojiMenu {...props} />
      }}
      renderEmojiReactions={(props) => {
        return <EmojiReactions {...props} />
      }}
    />
  }}
  />

• Added onProfileEditSuccess prop to App and ChannelList components
• Added renderFrozenNotification in ChannelUIProps
  • How to use?

    <Channel
      channelUrl={channelUrl}
      renderFrozenNotification={() => {
        return (
          <div
            className="sendbird-notification sendbird-notification--frozen sendbird-conversation__messages__notification"
          >My custom Frozen Notification</div>
        );
      }}
    />

• Exported VoiceMessageInputWrapper and useHandleUploadFiles
  • How to use?

  import { useHandleUploadFiles } from '@sendbird/uikit-react/Channel/hooks/useHandleUploadFiles'
  import { VoiceMessageInputWrapper, VoiceMessageInputWrapperProps } from '@sendbird/uikit-react/Channel/components/MessageInput'

Fixes:

• Fixed a bug where setting startingPoint scrolls to the middle of the target message when it should be at the top of the message
• Applied dark theme to the slide left icon
• Fixed a bug where changing current channel not clearing pending and failed messages from the previous channel
• Fixed a bug where the thumbnail image of OGMessage being displayed as not fitting the container
• Fixed a bug where resending a failed message in Thread results in displaying resulting message in Channel
• Fixed a bug where unread message notification not being removed when scroll reaches bottom

Improvement:

• Channels list no longer displays unread message count badge for focused channel

[v3.8.2] (Nov 10 2023)

Features:

• MessageContent is not customizable with three new optional properties:
  • renderSenderProfile, renderMessageBody, and renderMessageHeader
  • How to use?

    import Channel from '@sendbird/uikit-react/Channel'
    import { useSendbirdStateContext } from '@sendbird/uikit-react/useSendbirdStateContext'
    import { useChannelContext } from '@sendbird/uikit-react/Channel/context'
    import MessageContent from '@sendbird/uikit-react/ui/MessageContent'
    
    const CustomChannel = () => {
      const { config } = useSendbirdStateContext();
      const { userId } = config;
      const { currentGroupChannel } = useChannelContext();
      return (
        <Channel
          ...
          renderMessage={({ message }) => {
            return (
              <MessageContent
                userId={userId}
                channel={currentGroupChannel}
                message={message}
                ...
                renderSenderProfile={(props: MessageProfileProps) => (
                  <MessageProfile {...props}/>
                )}
                renderMessageBody={(props: MessageBodyProps) => (
                  <MessageBody {...props}/>
                )}
                renderMessageHeader={(props: MessageHeaderProps) => (
                  <MessageHeader {...props}/>
                )}
              />
            )
          }}
        />
      )
    }

Fixes:

• Fix runtime error due to publishing modules
• Add missing date locale to the UnreadCount banner since string
• Use the more impactful value between the resizingWidth and resizingHeight
  • So, the original images' ratio won't be broken
• Apply the ImageCompression to the Thread module
• Apply the ImageCompression for sending file message and multiple files message

Improvements:

• Use channel.members instead of fetching for non-super group channels in the SuggestedMentionList

[v3.8.1] (Nov 10 2023) - DEPRECATED

[v3.8.1] (Nov 10 2023)

Features:

• MessageContent is not customizable with three new optional properties:
  • renderSenderProfile, renderMessageBody, and renderMessageHeader
  • How to use?

    import Channel from '@sendbird/uikit-react/Channel'
    import { useSendbirdStateContext } from '@sendbird/uikit-react/useSendbirdStateContext'
    import { useChannelContext } from '@sendbird/uikit-react/Channel/context'
    import MessageContent from '@sendbird/uikit-react/ui/MessageContent'
    
    const CustomChannel = () => {
      const { config } = useSendbirdStateContext();
      const { userId } = config;
      const { currentGroupChannel } = useChannelContext();
      return (
        <Channel
          ...
          renderMessage={({ message }) => {
            return (
              <MessageContent
                userId={userId}
                channel={currentGroupChannel}
                message={message}
                ...
                renderSenderProfile={(props: MessageProfileProps) => (
                  <MessageProfile {...props}/>
                )}
                renderMessageBody={(props: MessageBodyProps) => (
                  <MessageBody {...props}/>
                )}
                renderMessageHeader={(props: MessageHeaderProps) => (
                  <MessageHeader {...props}/>
                )}
              />
            )
          }}
        />
      )
    }

Fixes:

• Fix runtime error due to publishing modules
• Add missing date locale to the UnreadCount banner since string
• Use the more impactful value between the resizingWidth and resizingHeight
  • So, the original images' ratio won't be broken
• Apply the ImageCompression to the Thread module
• Apply the ImageCompression for sending file message and multiple files message

Improvements:

• Use channel.members instead of fetching for non-super group channels in the SuggestedMentionList

[v3.8.0] (Nov 3 2023)

Feat:

• Added a feature to support predefined suggested reply options for AI chatbot trigger messages.
• Introduced custom date format string sets, allowing users to customize the date format for DateSeparators and UnreadCount.
• Exported the initialMessagesFetch callback from the hook to provide more flexibility in UIKit customization.

Fixes:

• Removed duplicate UserProfileProvider in `OpenChannelSettings``.
• Removed the logic blocking the addition of empty channels to the ChannelList.
• Fixed a runtime error in empty channels.
• Added precise object dependencies in effect hooks to prevent unnecessary re-renders in the Channel module.

Chores:

• Migrated the rest of modules & UI components to TypeScript from Javascript.
• Introduced new build settings:
  • Changes have been made to export modules using the sub-path exports in the package.json. If you were using the package in a Native CJS environment, this might have an impact.
    In that case, you can migrate the path as follows:

    - const ChannelList = require('@sendbird/uikit-react/cjs/ChannelList');
    + const ChannelList = require('@sendbird/uikit-react/ChannelList');

  • TypeScript support also has been improved. Now, precise types based on the source code are used.

[v3.7.0] (Oct 23 2023)

Multiple Files Message

Now we are supporting Multiple Files Message feature!

You can select some multiple files in the message inputs, and send multiple images in one message.

If you select several types of files, only images will be combined in the message and the other files will be sent separately.
Also we have resolved many issues found during QA.

How to enable this feature?

You can turn it on in four places.

1. App Component

import App from '@sendbird/uikit-react/App'

<App
  ...
  isMultipleFilesMessageEnabled
/>

2. SendbirdProvider

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

<SendbirdProvider
  ...
  isMultipleFilesMessageEnabled
>
  {...}
</SendbirdProvider>

3. Channel

import Channel from '@sendbird/uikit-react/Channel';
import { ChannelProvider } from '@sendbird/uikit-react/Channel/context';

<Channel
  ...
  isMultipleFilesMessageEnabled
/>
<ChannelProvider
  ...
  isMultipleFilesMessageEnabled
>
  {...}
</ChannelProvider>

3. Thread

import Thread from '@sendbird/uikit-react/Thread';
import { ThreadProvider } from '@sendbird/uikit-react/Thread/context';

<Thread
  ...
  isMultipleFilesMessageEnabled
/>
<ThreadProvider
  ...
  isMultipleFilesMessageEnabled
>
  {...}
</ThreadProvider>

Interface change/publish

• The properties of the ChannelContext and ThreadContext has been changed little bit.
  • allMessages of the ChannelContext has been divided into allMessages and localMessages
  • allThreadMessages of the ThreadContext has been divided into allThreadMessages and localThreadMessages
  • Each local messages includes pending and failed messages, and the all messages will contain only succeeded messages
  • Please keep in mind, you have to migrate to using the local messages, IF you have used the local messages to draw your custom message components.
• pubSub has been published
  • publishingModules has been added to the payload of pubSub.publish
    You can specify the particular modules that you propose for event publishing

  import { useCallback } from 'react'
  import { SendbirdProvider, useSendbirdStateContext } from '@sendbird/uikit-react/SendbirdProvider'
  import { PUBSUB_TOPICS as topics, PublishingModuleTypes } from '@sendbird/uikit-react/pubSub/topics'
  
  const CustomApp = () => {
    const globalState = useSendbirdStateContext();
    const { stores, config } = globalState;
    const { sdk, initialized } = stores.sdkStore;
    const { pubSub } = config;
  
    const onSendFileMessageOnlyInChannel = useCallback((channel, params) => {
      channel.sendFileMessage(params)
        .onPending((pendingMessage) => {
          pubSub.publish(topics.SEND_MESSAGE_START, {
            channel,
            message: pendingMessage,
            publishingModules: [PublishingModuleTypes.CHANNEL],
          });
        })
        .onFailed((failedMessage) => {
          pubSub.publish(topics.SEND_MESSAGE_FAILED, {
            channel,
            message: failedMessage,
            publishingModules: [PublishingModuleTypes.CHANNEL],
          });
        })
        .onSucceeded((succeededMessage) => {
          pubSub.publish(topics.SEND_FILE_MESSAGE, {
            channel,
            message: succeededMessage,
            publishingModules: [PublishingModuleTypes.CHANNEL],
          });
        })
    }, []);
  
    return (<>...</>)
  };
  
  const App = () => (
    <SendbirdProvider>
      <CustomApp />
    </SendbirdProvider>
  );

Fixes:

• Improve the pubSub&dispatch logics
• Allow deleting failed messages
• Check applicationUserListQuery.isLoading before fetching user list
  • Fix the error message: "Query in progress."
• Fix missed or wrong type definitions
  • quoteMessage of ChannelProviderInterface
  • useEditUserProfileProviderContext has been renamed to useEditUserProfileContext

    import { useEditUserProfileProviderContext } from '@sendbird/uikit-react/EditUserProfile/context'
    // to
    import { useEditUserProfileContext } from '@sendbird/uikit-react/EditUserProfile/context'