Releases: sendbird/sendbird-uikit-react
Releases · sendbird/sendbird-uikit-react
v3.12.0
[v3.12.0] (Feb 16, 2024)
Features:
- Local cache is enabled by default
- If desired, it can be disabled using
sdkInitParams
import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'; const App = () => ( <SendbirdProvider // ... sdkInitParams={{ localCacheEnabled: false }} /> )
- If desired, it can be disabled using
- Added
GroupChannelandGroupChannelListmodules.- With the introduction of
GroupChannelandGroupChannelList, a new local caching feature has been added, allowing you to experience a more efficient chat environment.
We provide a massive component calledAppthat combines all the features. From now on, this component will useGroupChannelandGroupChannelListinstead ofChannelandChannelList.
If you wish to continue usingChannelandChannelList, you can useenableLegacyChannelModulesto ensure the previous components are still available for use.import SendbirdApp from '@sendbird/uikit-react/App'; const App = () => ( <SendbirdApp // ... enableLegacyChannelModules /> );
- You can find detailed changes, usage instructions, and migration methods in the document here: Migration Guide
- With the introduction of
Fixes:
- Fixed a bug where the session refresh failed when the
accessTokenwas changed #969 - Fixed a bug causing infinite loading when the channel is not selected in the Channel module #970
- Fixed a bug where the mention feature was not functioning properly #971
- Fixed a bug where URLs with numbered top-level domains were treated as links #972
- Fixed a bug where message scroll delays were inconsistently applied #975
- Fixed a bug where
isUserIdUsedForNicknamewas not functioning properly #976 - Optimized the rendering of
SendbirdProvider - Optimized the SDK initialization logic for StrictMode
v3.11.1
v3.11.0
[v3.11.0] (Feb 07, 2024)
Features:
- Added
enableSuggestedRepliesglobal option- How to use?
<App appId={appId} userId={userId} uikitOptions={{ groupChannel: { // Below turns on the `SuggestedReplies` feature (see v3.8.0 release changelog). Default value is false. enableSuggestedReplies: true, } }} />
MessageInputis now being disabled ifchannel.lastMessage.extendedMessagePayload['disable_chat_input']is true
Fixes:
- Fixed a bug where channel is being removed from my channel list when other member leaves the channel
- Fixed a bug where channel avatar image is not updated when a member leaves, or joins, or
profileUrlchanges - Fixed a bug where
ChannelListUIis not updated when network is reconnected - Fixed a bug in
ChannelListwhereactiveChannelUrlis set butonChannelSelectfires with null after loadingChannelList - Fixed a bug where url text wrapped around special characters not parsed as link
- Fixed a bug where space character before url text is removed in sent message
- Fixed a runtime error occurring when using
renderMessageofChannelmodule
v3.10.1
[v3.10.1] (Jan 26, 2024)
Fixes:
- Fixed a bug where
MessageListis 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
mimeTypesto theMessageInput - Applied the
channelListQuery.orderto theChannelList - 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
enableFeedbackglobal 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, andlabelColorprops toButtonProps - Added
renderMessageContentinChannelUIProps- Now you can customize
MessageContentthroughChannelin two ways:- Customize with
renderMessage
<Channel renderMessage={(props) => ( <Message {...props} renderMessageContent={(props) => ( <MessageContent {...props} /> )} /> )} />
- [Simpler] Customize with
renderMessageContent
<Channel renderMessageContent={(props) => ( <MessageContent {...props} /> )} />
- Customize with
- Now you can customize
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
BadgeandButtoncomponents 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-vhCSS Variable Logic in InviteUsers Component- Improved code readability by moving logic to the
InviteUserscomponent. - GitHub PR #899 (CLNP-1806)
- Improved code readability by moving logic to the
- Prevent Access to
windowin SSR Environments- Fixed server-side rendering issues in NextJS by preventing access to the
windowobject. (Original Author: Aaron James King) - GitHub PR #900 (SBISSUE-14287)
- Fixed server-side rendering issues in NextJS by preventing access to the
- Update Channel View to Show
NO_CHANNELPlaceholder- Channel view now displays
NO_CHANNELplaceholder after leaving all channels. (Original Author: Alden Quimby) - GitHub PR #901
- Channel view now displays
- 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
animatedMessageinstead ofhighlightedMessagein 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.
- Resolve the type error related to
- Fixed type errors
- Address the issue of not being assignable to type error, where the
property 'children' doesn't exist on typePropsWithChildren.- Use
PropsWithChildren<unknown>instead ofPropsWithChildren.
- Use
- 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
uikitUploadSizeLimitto 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_messageis the default order.
- Fixed group channel doesn't move to the top in a channel list even though
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
typingIndicatorTypesglobal option - Added
TypingIndicatorTypeenum- 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.onFailedcallback insetupConnection. 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
MessageContentcomponent:renderMessageMenu,renderEmojiMenu, andrenderEmojiReactions- 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
onProfileEditSuccessprop toAppandChannelListcomponents - Added
renderFrozenNotificationinChannelUIProps- 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
VoiceMessageInputWrapperanduseHandleUploadFiles- 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
startingPointscrolls 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
OGMessagebeing displayed as not fitting the container - Fixed a bug where resending a failed message in
Threadresults in displaying resulting message inChannel - 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:
MessageContentis not customizable with three new optional properties:renderSenderProfile,renderMessageBody, andrenderMessageHeader- 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
UnreadCountbanner since string - Use the more impactful value between the
resizingWidthandresizingHeight- So, the original images' ratio won't be broken
- Apply the
ImageCompressionto theThreadmodule - Apply the
ImageCompressionfor sending file message and multiple files message
Improvements:
- Use
channel.membersinstead of fetching for non-super group channels in theSuggestedMentionList