Releases: sendbird/sendbird-uikit-react
[v3.3.1] (Nov 23 2022)
[v3.3.1] (Nov 23 2022)
Fixes:
- Rename properties of
useThreadContext
channelStatus
tochannelState
parentMessageInfoStatus
toparentMessageState
threadListStatus
tothreadListState
- Change the state types to enum
enum ChannelStateTypes { NIL = 'NIL', LOADING = 'LOADING', INVALID = 'INVALID', INITIALIZED = 'INITIALIZED', } enum ParentMessageStateTypes { NIL = 'NIL', LOADING = 'LOADING', INVALID = 'INVALID', INITIALIZED = 'INITIALIZED', } enum ThreadListStateTypes { NIL = 'NIL', LOADING = 'LOADING', INVALID = 'INVALID', INITIALIZED = 'INITIALIZED', }
[v3.3.0] (Nov 23 2022)
Features:
- Provide new module
Thread
. See the specific informations of this module on the Docs page- You can use a combined component
Thread
. Import it withimport Thread from "@sendbird/uikit-react/Thread"
- Also you can use
ThreadProvider
anduseThreadContext
for customization. Import it withimport { ThreadProvider, useThreadContext } from "@sendbird/uikit-react/Thread/context"
- And the other UI components are provided under the Thread.
ThreadUI
,ThreadHeader
,ParentMessageInfo
,ParentMessageInfoItem
,ThreadList
,ThreadListItem
, andThreadMessageInput
are it
- You can use a combined component
- Add channel props
threadReplySelectType
: Type of the value should beYou can see how to use it belowenum ThreadReplySelectType { PARENT, THREAD }
import { ThreadReplySelectType } from "@sendbird/uikit-react/Channel/context"; <Channel ... threadReplySelectType={ThreadReplySelectType.PARENT} />
animatedMessage
: Type of the value should be number(messageId)onReplyInThread
: This function is called when user click the button "Reply in thread" on the message context menutype onReplyInThread = ({ message: UserMessage | FileMessage }) => void
onQuoteMessageClick
: This function is called when user click the quote message on the message of Channeltype onQuoteMessageClick = ({ message: UserMessage | FileMessage }) => {}
onMessageAnimated
: This function is called after that message item is animatedtype onMessageAnimated = () => void
onMessageHighlighted
: This function is called after that message item is highlightedtype onMessageHighlighted = () => void
- Add
ui/ThreadReplies
componentinterface ThreadRepliesProps { className?: string; threadInfo: ThreadInfo; onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void; }
Fixes:
- Do not allow operator to unregister itself on the OperatorList of GroupChannel
- Create new group channel when user open 1:1 channel on the UserProfile
- Register the channel creator as an operator in 1:1 channel
[v3.3.0] (Nov 23 2022)
Features:
- Provide new module
Thread
. See the specific informations of this module on the Docs page- You can use a combined component
Thread
. Import it withimport Thread from "@sendbird/uikit-react/Thread"
- Also you can use
ThreadProvider
anduseThreadContext
for customization. Import it withimport { ThreadProvider, useThreadContext } from "@sendbird/uikit-react/Thread/context"
- And the other UI components are provided under the Thread.
ThreadUI
,ThreadHeader
,ParentMessageInfo
,ParentMessageInfoItem
,ThreadList
,ThreadListItem
, andThreadMessageInput
are it
- You can use a combined component
- Add channel props
threadReplySelectType
: Type of the value should beYou can see how to use it belowenum ThreadReplySelectType { PARENT, THREAD }
import { ThreadReplySelectType } from "@sendbird/uikit-react/Channel/context"; <Channel ... threadReplySelectType={ThreadReplySelectType.PARENT} />
animatedMessage
: Type of the value should be number(messageId)onReplyInThread
: This function is called when user click the button "Reply in thread" on the message context menutype onReplyInThread = ({ message: UserMessage | FileMessage }) => void
onQuoteMessageClick
: This function is called when user click the quote message on the message of Channeltype onQuoteMessageClick = ({ message: UserMessage | FileMessage }) => {}
onMessageAnimated
: This function is called after that message item is animatedtype onMessageAnimated = () => void
onMessageHighlighted
: This function is called after that message item is highlightedtype onMessageHighlighted = () => void
- Add
ui/ThreadReplies
componentinterface ThreadRepliesProps { className?: string; threadInfo: ThreadInfo; onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void; }
Fixes:
- Do not allow operator to unregister itself on the OperatorList of GroupChannel
- Create new group channel when user open 1:1 channel on the UserProfile
- Register the channel creator as an operator in 1:1 channel
[v3.2.6] (Nov 14 2022)
Fix:
- Use ref instead of querySelector for DOM manipulation
Fixes the issue where input is not cleared when multiple channels are open at the same time - Apply pre-line into the OpenChannelUserMessage
Fixes the issue where OpenChannel UserMessage doesnt have new line
[v3.2.5] (Nov 7 2022)
Fix:
- Modify the type of parameters in the sendbirdSelectors
There has been unsyncronous between reality and types
This fix only affects to TypeScript- getLeaveGroupChannel:
channel
tochannelUrl
- getEnterOpenChannel:
channel
tochannelUrl
- getExitOpenChannel:
channel
tochannelUrl
- getLeaveGroupChannel:
[v3.2.4] (Nov 1 2022)
Features:
- For Channel component, added separate prop isLoading?.boolean
Usage:<Channel channelUrl {currentChannelUrl} isLoading={!currentChannelUrl} />
- For flicker in ChannelList, no extra props
Fixes:
- React UIKit placeholder rendering issue
- Fix scroll issue in ChannelList where user cannot load more channels
- Modify TS interface getLeaveChannel to getLeaveGroupChannel in selectors
[v3.2.3] (Oct 14 2022)
Feature:
- Add a prop
disableMarkAsRead
into the
This prop disables calling markAsRead in the Channel component
[v3.2.2] (Oct 13 2022)
Feature:
- Export a type
OutgoingMessageStates
- Type:
enum OutgoingMessageStates { NONE, PENDING, SENT, FAILED, DELIVERED, READ }
- Type:
- Export a util function
getOutgoingMessageState
- Importing path: "@sendbird/uikit-react/utils/message/getOutgoingMessageState"
- Interface:
function getOutgoingMessageState(channel, message): OutgoingMessageStates
- Add a prop
disableMarkAsDelivered
into the and
Some of our customers do not use the markAsDelivery feature,
but we always have called the markAsDelivered on the ChannelList with every channel
It caused a rate-limit issue, so we add a new prop to disable the markAdDelivered call for that case
[v3.2.1] (Oct 04 2022)
Fixes:
- Donot bundle chat sdk with uikit compiled code
Compiled UIKit code that is distributed through npm shouldnt have Chat SDK minified code included in it Chat SDK should be a dependency of UIKit
Advantages:
- Chat SDK bug fixes will be added for free
- Eliminate the need for handlers
What caused the issue:
If you are usig rollup for bundling
in config.external you have to be specific
ie>
This works:
external: [
'@sendbird/chat',
'@sendbird/chat/groupChannel',
'@sendbird/chat/openChannel',
'@sendbird/chat/message',
]
This doesnt:
external: [ '@sendbird/chat', ]
- Only react and react-dom should be peerDependencies
For npm >= v7, npm autoinstall peerDependency packages According to https://docs.npmjs.com/cli/v8/configuring-npm/package-json#peerdependencies You want to express the compatibility of your package with a host tool or library while not necessarily doing a require of this host Even though react is required, its better to show that react is the host tool
[v3.2.0] (Sep 27 2022)
Features:
- OpenChannelList component
- Create new smart components (modules)
- CreateOpenChannel
- OpenChannelList
- Add a renderHeader props into the ui/Modal component
- Add stringSet for OpenChannelLisit and CreateOpenChannel components
- OPEN_CHANNEL_LIST__TITLE: 'Channels',
- CREATE_OPEN_CHANNEL_LIST__TITLE: 'New channel profile',
- CREATE_OPEN_CHANNEL_LIST__SUBTITLE__IMG_SECTION: 'Channel image',
- CREATE_OPEN_CHANNEL_LIST__SUBTITLE__IMG_UPLOAD: 'Upload',
- CREATE_OPEN_CHANNEL_LIST__SUBTITLE__TEXT_SECTION: 'Channel name',
- CREATE_OPEN_CHANNEL_LIST__SUBTITLE__TEXT_PLACE_HOLDER: 'Enter channel name',
- CREATE_OPEN_CHANNEL_LIST__SUBMIT: 'Create',
- Create new smart components (modules)
- Add prop?.value to MessageWrappers
- @sendbird/uikit-react/Channel/components/MessageInput
- @sendbird/uikit-react/OpenChannel/components/OpenChannelInput
- @sendbird/uikit-react/ui/MessageInput
- Value is reset when channelURL changes
Fixes:
- Fix issue where ConnectionHandler overwrite SessionHandler
- Use queries from @sendbird/chat
- Use imported versions of GroupChannelListQueryParams and ApplicationUserListQueryParams
- Fix
o
penChannel casing in type defn - Add some missing localization variables
- Deprecate ChatHeader and ChannelPreview in @sendbird/uikit-react/ui
- Replace the ButtonTypes and ButtonSizes into the Button/index
- Apply scroll to input and dark theme color to UserProfile
- Disable the create channel button when no user invite
- Use ref from MessageInputWrapper props if present
- Some CSS level polishing fixes~
Dev. Env:
- Remove
enzyme
andreact-test-renderer
- Upgrade the
react
version to v18 - Upgrade the
storybook
version to v6.5.10 - Upgrade the
jest
andbabel-jest
to v29 - Upgrade the
jsdom
to v20 - Install
jest-environment-jsdom
- Install
global-jsdom
- Install
testing-library
(@testing-library/react
and@testing-library/jest-dom
) - Migrate every tests with
testing-library
instead of theenzyme
and `react-test-renderer - Replace node-sass with sass(Dart Sass)
- Reduce bundle size by treating react-dom/server as external
[v3.1.3] (Sep 19 2022)
Features:
- Export SessionHandler through
@sendbird/uikit-react/handlers/SessionHandler
- This is a workaround to fix an issue where inhertiance chains break custom handler implementation
import SessionHandler from '@sendbird/uikit-react/handlers/SessionHandler'
- Rem units can be used for typography
- Pass prop
config.isREMUnitEnabled
-> true on SendbirdProvider
to use "rem" units - We are adding rem as unit for typography/font size
- Pass prop
Fixes:
- Fix the position of ContextMenu
- Do not exit the current open channel when the channel state is changed
- Display menu only for operators on the member list
- Hide muted icon when pop-up component is appeared
- Set message context's border roundly by the state using the reaction feature
- Add props
isReactionEnabled
to the<TextMessageItemBody />
- Add props
isReactionEnabled
to the<OGMessageItemBody />
- Add props
isReactionEnabled
to the<FileMessageItemBody />
- Add props
isReactionEnabled
to the<ThumbnailMessageItemBody />
- Add props
isReactionEnabled
to the<UnknownMessageItemBody />
- Add props
- Add the message as a parameter of renderCustomSeparator
- before: renderCustomSeparator={() => ReactElement}
- after: renderCustomSeparator={(props: { message }) => ReactElement}
- Fix typo on the type
- renderCustomSep'e'rator to renderCustomSep'a'rator