Skip to content

Releases: sendbird/sendbird-uikit-react

[v3.3.1] (Nov 23 2022)

23 Nov 06:58
Compare
Choose a tag to compare

[v3.3.1] (Nov 23 2022)
Fixes:

  • Rename properties of useThreadContext
    • channelStatus to channelState
    • parentMessageInfoStatus to parentMessageState
    • threadListStatus to threadListState
  • 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 with
      import Thread from "@sendbird/uikit-react/Thread"
    • Also you can use ThreadProvider and useThreadContext for customization. Import it with
      import { ThreadProvider, useThreadContext } from "@sendbird/uikit-react/Thread/context"
    • And the other UI components are provided under the Thread. ThreadUI, ThreadHeader, ParentMessageInfo, ParentMessageInfoItem, ThreadList, ThreadListItem, and ThreadMessageInput are it
  • Add channel props
    • threadReplySelectType: Type of the value should be
      enum ThreadReplySelectType { PARENT, THREAD }
      You can see how to use it below
      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 menu
      type onReplyInThread = ({ message: UserMessage | FileMessage }) => void
    • onQuoteMessageClick: This function is called when user click the quote message on the message of Channel
      type onQuoteMessageClick = ({ message: UserMessage | FileMessage }) => {}
    • onMessageAnimated: This function is called after that message item is animated
      type onMessageAnimated = () => void
    • onMessageHighlighted: This function is called after that message item is highlighted
      type onMessageHighlighted = () => void
  • Add ui/ThreadReplies component
    interface 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)

23 Nov 05:41
df73f01
Compare
Choose a tag to compare

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 with
      import Thread from "@sendbird/uikit-react/Thread"
    • Also you can use ThreadProvider and useThreadContext for customization. Import it with
      import { ThreadProvider, useThreadContext } from "@sendbird/uikit-react/Thread/context"
    • And the other UI components are provided under the Thread. ThreadUI, ThreadHeader, ParentMessageInfo, ParentMessageInfoItem, ThreadList, ThreadListItem, and ThreadMessageInput are it
  • Add channel props
    • threadReplySelectType: Type of the value should be
      enum ThreadReplySelectType { PARENT, THREAD }
      You can see how to use it below
      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 menu
      type onReplyInThread = ({ message: UserMessage | FileMessage }) => void
    • onQuoteMessageClick: This function is called when user click the quote message on the message of Channel
      type onQuoteMessageClick = ({ message: UserMessage | FileMessage }) => {}
    • onMessageAnimated: This function is called after that message item is animated
      type onMessageAnimated = () => void
    • onMessageHighlighted: This function is called after that message item is highlighted
      type onMessageHighlighted = () => void
  • Add ui/ThreadReplies component
    interface 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)

15 Nov 01:31
f18cb4d
Compare
Choose a tag to compare

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

https://sendbird.atlassian.net/browse/SDKRLSD-562

[v3.2.5] (Nov 7 2022)

06 Nov 23:20
Compare
Choose a tag to compare

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 to channelUrl
    • getEnterOpenChannel: channel to channelUrl
    • getExitOpenChannel: channel to channelUrl

[v3.2.4] (Nov 1 2022)

02 Nov 03:31
e48710f
Compare
Choose a tag to compare

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)

14 Oct 03:57
d4c95d1
Compare
Choose a tag to compare

Feature:

  • Add a prop disableMarkAsRead into the
    This prop disables calling markAsRead in the Channel component

[v3.2.2] (Oct 13 2022)

13 Oct 02:03
319d263
Compare
Choose a tag to compare

Feature:

  • Export a type OutgoingMessageStates
    • Type: enum OutgoingMessageStates { NONE, PENDING, SENT, FAILED, DELIVERED, READ }
  • 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)

04 Oct 05:22
Compare
Choose a tag to compare

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)

27 Sep 04:53
1bcbef9
Compare
Choose a tag to compare

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',
  • 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 openChannel 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 and react-test-renderer
  • Upgrade the react version to v18
  • Upgrade the storybook version to v6.5.10
  • Upgrade the jest and babel-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 the enzyme 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)

19 Sep 07:10
Compare
Choose a tag to compare

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

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 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