Build chat in minutes with Sendbird UIKit open source code.
MIT License
Published by liamcho 6 months ago
suggestedRepliesDirection
global option which serves as vertical/horizontal scroll option for SuggestedReplies
<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,
// Below changes scroll direction from horizontal to vertical.
suggestedRepliesDirection: 'vertical'
}
}}
/>
Header
(import Header from '@sendbird/uikit-react/ui/Header'
) which replaced all existing header componentsshowSuggestedRepliesFor
is set to 'last_message_only'Published by HoonBaek 6 months ago
<SendbirdProvider
...
imageCompression={{
outputFormat: 'preserve' | 'png' | 'jpeg',
}}
>
</SendbirdProvider>
12px
in the mobile modePublished by HoonBaek 6 months ago
Published by HoonBaek 6 months ago
renderMessage
in the OpenChannel
modulerenderMessageInput
propPublished by liamcho 7 months ago
TemplateMessageItemBody
now supports CarouselView
type templateMessageContent
when value exists in message.extendedMessagePayload['ui']['container_type']
TemplateMessageItemBody
borderRadius
, backgroundColor
, and color
for message template itemsPublished by HoonBaek 7 months ago
Published by AhyoungRyu 7 months ago
Emoji Reactions
feature in the super group channel
Tooltip
displaying who reacted will only appear in the normal group channel, not in the super group channel.MessageFeedbackFailedModal
component for consistency with other message feedback-related components.Published by HoonBaek 7 months ago
renderMenuItem
to the MessageMenu
component
<GroupChannel
renderMessageContent={(props) => (
<MessageContent
{...props}
renderMessageMenu={(props) => (
<MessageMenu
{...props}
renderMenuItem={(props) => {
const {
className,
onClick,
dataSbId,
disable,
text,
} = props;
return <MenuItem /> // Render Custom Menu Item
}}
/>
)}
/>
)}
/>
onBeforeDownloadFileMessage
to the <GroupChannel />
and <Thread />
modules
const ONE_MB = 1024 * 1024;
/**
* Use this list to check if it's displayed as a ThumbnailMessage.
* (https://github.com/sendbird/sendbird-uikit-react/blob/main/src/utils/index.ts)
*/
const ThumbnailMessageTypes = [
'image/jpeg',
'image/jpg',
'image/png',
'image/gif',
'image/svg+xml',
'image/webp', // not supported in IE
'video/mpeg',
'video/ogg',
'video/webm',
'video/mp4',
];
<GroupChannel // or Thread
onBeforeDownloadFileMessage={async ({ message, index = null }) => {
if (message.isFileMessage()) {
const confirmed = window.confirm(`The file size is ${(message.size / ONE_MB).toFixed(2)}MB. Would you like to continue downloading?`);
return confirmed;
}
if (message.isMultipleFilesMessage()) {
const confirmed = window.confirm(`The file size is ${(message.fileInfoList[index].fileSize / ONE_MB).toFixed(2)}MB. Would you like to continue downloading?`);
return confirmed;
}
return true;
}}
/>
onDownloadClick
to the FileViewer
, FileViewerView
, MobileBottomSheet
, MobileContextMenu
, and MobileMenu
MembersModal
, MutedMembersModal
, and OperatorsModal
Operator
description on the MembersModal
width
size of the OGMessageItemBody
component (You)
with the StringSet CHANNEL_SETTING__MEMBERS__YOU
in the UserListItem
Published by liamcho 7 months ago
MessageContent
when value exists in message.extendedMessagePayload['ui']['container_type']
Carousel
ui componentMessageTemplate
now supports composite templatesPublished by liamcho 7 months ago
Carousel
in mobile view displaying flickering effectfont-family
value to sendbird-message-template__root
Published by HoonBaek 7 months ago
renderHeader
props to the ChannelSettingsUIProps
<ChannelSettingsUI
renderHeader={() => ...}
/>
onClick
prop in UserListItem
and added onUserAvatarClick
. The deprecated prop will be removed in the next major versionmute/unmute
operationadd/remove
operator operationFileMessage
for the .mov
videoX
button on the ModalHeader of mobile modeCHANNEL_SETTING__MUTED_MEMBERS__TITLE
to CHANNEL_SETTING__BANNED_MEMBERS__TITLE
CHANNEL_SETTING__MODERATION__BAN
to CHANNEL_SETTING__MODERATION__UNBAN
channel_setting_banned_user_context_menu_ban
to channel_setting_banned_user_context_menu_unban
Published by bang9 8 months ago
Published by liamcho 8 months ago
Now we are supporting template message feature!
A message with valid extendedMessagePayload.template
value will be displayed with TemplateMessageItemBody
.
MessageTemplate
TemplateMessageItemBody
FallbackTemplateMessageItemBody
LoadingTemplateMessageItemBody
showSuggestedRepliesFor
global option
<App
appId={appId}
userId={userId}
uikitOptions={{
groupChannel: {
// Below setting always shows `SuggestedReplies` component of a message. Default value is 'last_message_only'.
showSuggestedRepliesFor: 'always',
}
}}
/>
renderSuggestedReplies
in Message
module
<Channel
renderSuggestedReplies={(suggestedRepliesProps) => {
const { replyOptions, onSendMessage, message } = suggestedRepliesProps;
return <CustomSuggestedReplies options={replyOptions} />;
}}
/>
renderMobileMenuOnLongPress
in MessageContentProps
<Channel
renderMessageContent={(props) => (
<MessageContent
{...props}
renderMobileMenuOnLongPress={(mobileMenuProps: MobileBottomSheetProps) => (
<CustomMobileMenu {...mobileMenuProps} />
)}
/>
)}
/>
useChannelSettingsContext
not returning channel on initial mount due to channel requests being made before the SDK connection successPublished by bang9 8 months ago
Added loading status to the ChannelSettings
module and addressed some layout issues
Added support for multiple lines in the MessageInput
on mobile devices
Fixed hard-coded text to localization text for uploading file size and count limits
Fixed the MessageListParams
type in the ChannelProvider
Fixed requests for empty image paths during the image optimization process
Fixed an infinite loop issue occurring when using the GroupChannel/components/Message
and Channel/components/Message
components in the renderMessage
method of the GroupChannel
and Channel
modules
The renderMessage
method of the GroupChannel
module no longer nests messages under the Message
component. If a container element for the Message
component is needed, use it as follows:
import { GroupChannel } from '@sendbird/uikit-react/GroupChannel';
import { Message } from '@sendbird/uikit-react/GroupChannel/components/Message';
const GroupChannelPage = () => {
return (
<GroupChannel
renderMessage={(props) => {
return (
<Message message={props.message}>
<div>{props.message.messageId}</div>
</Message>
)
}}
/>
)
}
The renderMessage
prop of the Channel/components/Message
and GroupChannel/components/Message
components has been deprecated. Instead, use the children
prop to customize message sub-elements
<Message message={props.message}>
<div>{props.message.messageId}</div>
</Message>
Added detailed comments for customizing-related props in the GroupChannel
module
Published by bang9 8 months ago
sdkInitParams
import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';
const App = () => (
<SendbirdProvider
// ...
sdkInitParams={{ localCacheEnabled: false }}
/>
)
GroupChannel
and GroupChannelList
modules.
GroupChannel
and GroupChannelList
, a new local caching feature has been added, allowing you to experience a more efficient chat environment.App
that combines all the features. From now on, this component will use GroupChannel
and GroupChannelList
instead of Channel
and ChannelList
.Channel
and ChannelList
, you can use enableLegacyChannelModules
to ensure the previous components are still available for use.
import SendbirdApp from '@sendbird/uikit-react/App';
const App = () => (
<SendbirdApp
// ...
enableLegacyChannelModules
/>
);
accessToken
was changed #969
isUserIdUsedForNickname
was not functioning properly #976
SendbirdProvider
Published by bang9 9 months ago
acceptableMimeTypes
to support web standard formatrenderChannelHeader
is not passed properlyPublished by liamcho 9 months ago
enableSuggestedReplies
global option
<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,
}
}}
/>
MessageInput
is now being disabled if channel.lastMessage.extendedMessagePayload['disable_chat_input']
is trueprofileUrl
changesChannelListUI
is not updated when network is reconnectedChannelList
where activeChannelUrl
is set but onChannelSelect
fires with null after loading ChannelList
renderMessage
of Channel
modulePublished by liamcho 9 months ago
MessageList
is not scrolled to bottom upon entering a channelmimeTypes
to the MessageInput
channelListQuery.order
to the ChannelList
Published by liamcho 9 months ago
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.
enableFeedback
global option
<App
appId={appId}
userId={userId}
uikitOptions={{
groupChannel: {
// Below turns on the feedback message feature. Default value is false.
enableFeedback: true,
}
}}
/>
labelType
, and labelColor
props to ButtonProps
renderMessageContent
in ChannelUIProps
MessageContent
through Channel
in two ways:
renderMessage
<Channel
renderMessage={(props) => (
<Message
{...props}
renderMessageContent={(props) => (
<MessageContent {...props} />
)}
/>
)}
/>
renderMessageContent
<Channel
renderMessageContent={(props) => (
<MessageContent {...props} />
)}
/>
Badge
and Button
components breaking in FireFox browser