Releases · sendbird/sendbird-uikit-react · GitHub

11 Oct 08:46

AhyoungRyu

[v3.6.10] (Oct 11 2023)

Fixes:

(in Safari) Display the placeholder of the MessageInput when the input text is cleared
Remove duplicated CSS line
(in iOS) fix focusing on the chat screen starts from the top in Mobile device
Move to the top in the ChannelList when the current user but a different peer sends a message

Assets 2

06 Oct 07:28

HoonBaek

[v3.6.9] (Oct 6 2023)

[v3.6.9] (Oct 6 2023)

Fixes:

(in Safari) Display the placeholder of the MessageInput when the input text is cleared
Remove duplicated CSS line
Able to see the quoted messages regardless of the ReplyType

Improve the types of the function props of ui/MessageInput component

interface MessageInputProps {
  ...
  onFileUpload?: (fileList: FileList) => void;
  onSendMessage?: (props: { message: string, mentionTemplate: string }) => void;
  onUpdateMessage?: (props: { messageId: string, message: string, mentionTemplate: string }) => void;
}

Move to the channel list when current user is banned or the channel is deleted in MobileLayout
Add new iconColor: THUMBNAIL_ICON which doesn't change by theme

Add some props types that we have missed in the public interface

ChannelProvider

Add

interface ChannelContextProps {
  onBeforeSendVoiceMessage?: (file: File, quotedMessage?: SendableMessageType) => FileMessageCreateParams;
}

Usage

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

<ChannelProvider
  onBeforeSendVoiceMessage={() => {}}
/>

ThreadProvider

Add

interface ThreadProviderProps {
  onBeforeSendUserMessage?: (message: string, quotedMessage?: SendableMessageType) => UserMessageCreateParams;
  onBeforeSendFileMessage?: (file: File, quotedMessage?: SendableMessageType) => FileMessageCreateParams;
  onBeforeSendVoiceMessage?: (file: File, quotedMessage?: SendableMessageType) => FileMessageCreateParams;
}

Usage

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

<ThreadProvider
  onBeforeSendUserMessage={() => {}}
  onBeforeSendFileMessage={() => {}}
  onBeforeSendVoiceMessage={() => {}}
/>

ui/Button

Add

enum ButtonTypes {
  PRIMARY = 'PRIMARY',
  SECONDARY = 'SECONDARY',
  DANGER = 'DANGER',
  DISABLED = 'DISABLED',
}
enum ButtonSizes {
  BIG = 'BIG',
  SMALL = 'SMALL',
}

Usage

import Button, { ButtonTypes, ButtonSizes } from '@sendbird/uikit-react/ui/Button'

<Button
  type={ButtonTypes.PRIMARY}
  size={ButtonSizes.BIG}
/>

ui/Icon

Add

export enum IconTypes {
  ADD = 'ADD',
  ARROW_LEFT = 'ARROW_LEFT',
  ATTACH = 'ATTACH',
  AUDIO_ON_LINED = 'AUDIO_ON_LINED',
  BAN = 'BAN',
  BROADCAST = 'BROADCAST',
  CAMERA = 'CAMERA',
  CHANNELS = 'CHANNELS',
  CHAT = 'CHAT',
  CHAT_FILLED = 'CHAT_FILLED',
  CHEVRON_DOWN = 'CHEVRON_DOWN',
  CHEVRON_RIGHT = 'CHEVRON_RIGHT',
  CLOSE = 'CLOSE',
  COLLAPSE = 'COLLAPSE',
  COPY = 'COPY',
  CREATE = 'CREATE',
  DELETE = 'DELETE',
  DISCONNECTED = 'DISCONNECTED',
  DOCUMENT = 'DOCUMENT',
  DONE = 'DONE',
  DONE_ALL = 'DONE_ALL',
  DOWNLOAD = 'DOWNLOAD',
  EDIT = 'EDIT',
  EMOJI_MORE = 'EMOJI_MORE',
  ERROR = 'ERROR',
  EXPAND = 'EXPAND',
  FILE_AUDIO = 'FILE_AUDIO',
  FILE_DOCUMENT = 'FILE_DOCUMENT',
  FREEZE = 'FREEZE',
  GIF = 'GIF',
  INFO = 'INFO',
  LEAVE = 'LEAVE',
  MEMBERS = 'MEMBERS',
  MESSAGE = 'MESSAGE',
  MODERATIONS = 'MODERATIONS',
  MORE = 'MORE',
  MUTE = 'MUTE',
  NOTIFICATIONS = 'NOTIFICATIONS',
  NOTIFICATIONS_OFF_FILLED = 'NOTIFICATIONS_OFF_FILLED',
  OPERATOR = 'OPERATOR',
  PHOTO = 'PHOTO',
  PLAY = 'PLAY',
  PLUS = 'PLUS',
  QUESTION = 'QUESTION',
  REFRESH = 'REFRESH',
  REPLY = 'REPLY',
  REMOVE = 'REMOVE',
  SEARCH = 'SEARCH',
  SEND = 'SEND',
  SETTINGS_FILLED = 'SETTINGS_FILLED',
  SLIDE_LEFT = 'SLIDE_LEFT',
  SPINNER = 'SPINNER',
  SUPERGROUP = 'SUPERGROUP',
  THREAD = 'THREAD',
  THUMBNAIL_NONE = 'THUMBNAIL_NONE',
  TOGGLE_OFF = 'TOGGLE_OFF',
  TOGGLE_ON = 'TOGGLE_ON',
  USER = 'USER',
}
export enum IconColors {
  DEFAULT = 'DEFAULT',
  PRIMARY = 'PRIMARY',
  PRIMARY_2 = 'PRIMARY_2',
  SECONDARY = 'SECONDARY',
  CONTENT = 'CONTENT',
  CONTENT_INVERSE = 'CONTENT_INVERSE',
  WHITE = 'WHITE',
  GRAY = 'GRAY',
  THUMBNAIL_ICON = 'THUMBNAIL_ICON',
  SENT = 'SENT',
  READ = 'READ',
  ON_BACKGROUND_1 = 'ON_BACKGROUND_1',
  ON_BACKGROUND_2 = 'ON_BACKGROUND_2',
  ON_BACKGROUND_3 = 'ON_BACKGROUND_3',
  ON_BACKGROUND_4 = 'ON_BACKGROUND_4',
  BACKGROUND_3 = 'BACKGROUND_3',
  ERROR = 'ERROR',
}

Usage

import Icon, { IconTypes, IconColors } from '@sendbird/uikit-react/ui/Icon'

<Icon
  type={IconTypes.INFO}
  fillColor={IconColors.PRIMARY}
/>

Assets 2

01 Sep 08:19

HoonBaek

[v3.6.8] (Sep 1 2023)

[v3.6.8] (Sep 1 2023)

Feats:

Update ui/FileViewer to support multiple images

Modify the props structure

export enum ViewerTypes {
  SINGLE = 'SINGLE',
  MULTI = 'MULTI',
}
interface SenderInfo {
  profileUrl: string;
  nickname: string;
}
interface FileInfo {
  name: string;
  type: string;
  url: string;
}
interface BaseViewer {
  onClose: (e: React.MouseEvent) => void;
}
interface SingleFileViewer extends SenderInfo, FileInfo, BaseViewer {
  viewerType?: typeof ViewerTypes.SINGLE;
  isByMe?: boolean;
  disableDelete?: boolean;
  onDelete: (e: React.MouseEvent) => void;
}
interface MultiFilesViewer extends SenderInfo, BaseViewer {
  viewerType: typeof ViewerTypes.MULTI;
  fileInfoList: FileInfo[];
  currentIndex: number;
  onClickLeft: () => void;
  onClickRight: () => void;
}
export type FileViewerComponentProps = SingleFileViewer | MultiFilesViewer;

Export misc. utils
- Channel/utils/getMessagePartsInfo
- Channel/utils/compareMessagesForGrouping
- Message/hooks/useDirtyGetMentions
- ui/MessageInput/hooks/usePaste

Fixes:

Apply some props which are related to the metadata to the ChannelListQuery

Add metadataKey, metadataValues, and metadataStartsWith to the Channel.queries.channelListQuery

How to use

<Channel or ChannelProvider
  queries={{
    channelListQuery: {
      metadataKey: 'isMatching',
      metadataValues: ['true'],
    }
  }}
/>

Improve types of ui/FileViewer and Channel/component/FileViewer
- Add some props that have been missed
Fix <ImageRenderer /> not converting number to pixel string
Modify the types on useChannelContext & useThreadContext
- useChannelContext.setQuoteMessage should accept UserMessage | FileMessage
- useThreadContext.sendMessage should be string

Assets 2

11 Aug 08:06

AhyoungRyu

[v3.6.7] (Aug 11 2023)

Feats:

Added a new ImageGrid UI component (for internal use only) (#703)

Introduced fetchChannelList to the ChannelListContext.

Implemented a custom hook function useFetchChannelList.
Utilized this function to fetch the channel list within the ChannelListUI component.
Added relevant tests for this function.

Provided the method through the ChannelListContext: fetchChannelList.
Example Usage:

import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
import useSendbirdStateContext from '@sendbird/uikit-react/useSendbirdStateContext'
import { ChannelListProvider, useChannelListContext } from '@sendbird/uikit-react/ChannelList/context'

const isAboutSame = (a, b, px) => (Math.abs(a - b) <= px);

const CustomChannelList = () => {
  const {
    allChannels,
    fetchChannelList,
  } = useChannelListContext();

  return (
    <div
      className="custom-channel-list"
      onScroll={(e) => {
        const target = e.target;
        if (isAboutSame(target.clientHeight + target.scrollTop, target.scrollHeight, 10)) {
          fetchChannelList();
        }
      }}
    >
      {allChannels.map((channel) => {
        return // custom channel list item
      })}
    </div>
  );
};

const CustomApp = () => {
  return (
    <div className="custom-app">
      <SendbirdProvider ... >
        <ChannelListProvider ... >
          <CustomChannelList />
        </ChannelListProvider>
      </SendbirdProvider>
    </div>
  );
};

Fixes:

Removed duplicated getEmoji API call from the useGetChannel hook (#705).
Fixed missing SEND_MESSAGE_FAILED event publishing (#704):
- Addressed the failure state in sendbirdSelectors.getSendUserMessage and published the SEND_MESSAGE_FAILED event.
- Corrected typo SEND_MESSAGEGE_FAILURE.

Chores:

Added a troubleshooting guide to the README. (#702)
Made minor improvements to the onboarding process. (#701)

Assets 2

04 Aug 07:53

AhyoungRyu

[v3.6.6] (Aug 4 2023)

Feat:

Add customExtensionParams for sdk.addSendbirdExtensions (#698)
The 3rd parameter customData to the sdk.addSendbirdExtension function, allowing it to be delivered from outside of UIKit React.
e.g.
```
<SendbirdProvider
  customExtensionParams={{
    a: 'a', // the key-value set will be passed when sdk.addSendbirdExtensions is called
  }}
/>
```
Call sdk.addSendbirdExtensions during the connection process (#682)

Fixes:

Change the MessageInput cursor style from disabled to not-allowed; Thanks @roderickhsiao (#697)
PendingMsg is missing isUserMessage method (#695)
This resolves the issue where spreading the message object in the reducer loses some methods like isUserMessage and isFileMessage
fix util functions logic of verifying message type. We updated logic in util functions to verify the message type. (#700)

Chore:

Update Trunk-Based Development to Scaled Trunk-Based Development (#696)
It describes the flow with short-lived feature branches, code review, and build automation before integrating into main.

Contributors

roderickhsiao

Assets 2

21 Jul 06:31

AhyoungRyu

[v3.6.5] (July 21 2023)

Feat:

Add a new prop sdkInitParams that allows passing custom parameters when sdk.init(params) is called from outside of UIKit.

e.g.

<SendbirdProvider
  sdkInitParams={{
    appStateToggleEnabled: false,
    debugMode: true,
    // more options can be found here https://sendbird.com/docs/chat/v4/javascript/ref/interfaces/_sendbird_chat.SendbirdChatParams.html
  }}
/>

Assets 2

20 Jul 04:46

AhyoungRyu

[v3.6.4] (July 20 2023)

Feat:

Create a separate package.json for CommonJS (cjs) module during build time. This package.json is located under dist/cjs directory. (#687)
Add a new prop isUserIdUsedForNickname to the public interface. This prop allows using the userId as the nickname. (#683)
Add an option to the ChannelProvider: reconnectOnIdle(default: true), which prevents data refresh in the background. (#690)

Fixes:

Fix an issue where the server returns 32 messages even when requesting 31 messages in the Channel. Now, hasMorePrev will not be set to false when the result size is larger than the query. (#688)
Verify the fetched message list size with the requested size of the MessageListParams. Added a test case for verifying the fetched message list size. (#686)
Address the incorrect cjs path in package.json. The common js module path in the pacakge.json has been fixed. (#685)

Assets 2

07 Jul 05:19

AhyoungRyu

[v3.6.3] (July 6 2023)

Feat:

Add new scrollBehavior prop to Channel (#676)
The default option is set to "auto," preserving the existing scroll behavior.
Possible to set smooth for smooth scroll effect.

Fixes:

Move message list scroll when the last message is edited (#674)
Added optional parameters to moveScroll to scroll only when the last message reaches the bottom.
Scroll is now moved only when the updatedAt property of the last message is changed.
Add missing UIKitConfig to type definition (#677)
Reported by GitHub PR #650.

Assets 2

30 Jun 10:31

sravan-s

[v3.6.2] (June 30 2023)

Fixes:

[email protected] build error on CRA (#668)
[email protected] wouldnt work by default on CRA
because of module resolution error on uikit-tools
This is fixed in uikit-tools, and released in 40.alpha
see: https://github.com/sendbird/sendbird-uikit-core-ts/pull/55
Improve invitation modal submit btn disable condition
Modify the invitation modal disable condition to not include the
logged-in user for the user counting logic

Assets 2

30 Jun 06:19

sravan-s

[v3.6.1] (June 30 2023)

Feat:

Enable channel creation when no user present to select
If there are no users in the channel creation menu,
User still get to create an empty channel with themselves
Mobile: Keep keyboard open after sending the message

Fixes:

Update @sendbird/uikit-tools to 0.0.1-alpha.39
alpha.39 has CJS support, otherwise, UIKit wont work
on next-js page router

Chore:

Update all examples to V4 + StackBlitz
- Update all sample code to V4
- Convert CodeSandbox to StackBlitz
- Render all examples with Vite

Contributors: @tylerhammer

Contributors

tylerhammer

Assets 2