sendbird-uikit-react

Fixes:

• Refactor --sendbird-vh CSS Variable Logic in InviteUsers Component
  • Improved code readability by moving logic to the InviteUsers component.
  • GitHub PR #899 (CLNP-1806)
• Prevent Access to window in SSR Environments
  • Fixed server-side rendering issues in NextJS by preventing access to the window object. (Original Author: Aaron James King)
  • GitHub PR #900 (SBISSUE-14287)
• Update Channel View to Show NO_CHANNEL Placeholder
  • Channel view now displays NO_CHANNEL placeholder after leaving all channels. (Original Author: Alden Quimby)
  • GitHub PR #901
• 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

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 animatedMessage instead of highlightedMessage in 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.
• Address the issue of not being assignable to type error, where the
  property 'children' doesn't exist on type PropsWithChildren.
  • Use PropsWithChildren<unknown> instead of PropsWithChildren.
• Fixed a voice message length parsing issue
• Include metaArray to the message list when fetching messages again by
  connecting

Features:

• Improved image loading speed by implementing lazy load with IntersectionObserver
• Replaced lamejs binary
• Applied the uikitUploadSizeLimit to 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_message is the default order.

Improvements:

• Divided <EditUserProfileUI /> into Modal and View parts
• Added a message prop to <ReactionItem /> component
• Improved the storybook of <EmojiReactions />

[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 typingIndicatorTypes global option
• Added TypingIndicatorType enum
  • 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.onFailed callback in setupConnection. 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 MessageContent component: renderMessageMenu, renderEmojiMenu, and renderEmojiReactions
  • 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 onProfileEditSuccess prop to App and ChannelList components
• Added renderFrozenNotification in ChannelUIProps
  • 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 VoiceMessageInputWrapper and useHandleUploadFiles
  • 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 startingPoint scrolls 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 OGMessage being displayed as not fitting the container
• Fixed a bug where resending a failed message in Thread results in displaying resulting message in Channel
• 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

Features:

• MessageContent is not customizable with three new optional properties:
  • renderSenderProfile, renderMessageBody, and renderMessageHeader
  • 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 UnreadCount banner since string
• Use the more impactful value between the resizingWidth and resizingHeight
  • So, the original images' ratio won't be broken
• Apply the ImageCompression to the Thread module
• Apply the ImageCompression for sending file message and multiple files message

Improvements:

• Use channel.members instead of fetching for non-super group channels in the SuggestedMentionList

[v3.8.1] (Nov 10 2023)

Features:

• MessageContent is not customizable with three new optional properties:
  • renderSenderProfile, renderMessageBody, and renderMessageHeader
  • 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 UnreadCount banner since string
• Use the more impactful value between the resizingWidth and resizingHeight
  • So, the original images' ratio won't be broken
• Apply the ImageCompression to the Thread module
• Apply the ImageCompression for sending file message and multiple files message

Improvements:

• Use channel.members instead of fetching for non-super group channels in the SuggestedMentionList

Feat:

• Added a feature to support predefined suggested reply options for AI chatbot trigger messages.
• Introduced custom date format string sets, allowing users to customize the date format for DateSeparators and UnreadCount.
• Exported the initialMessagesFetch callback from the hook to provide more flexibility in UIKit customization.

Fixes:

• Removed duplicate UserProfileProvider in `OpenChannelSettings``.
• Removed the logic blocking the addition of empty channels to the ChannelList.
• Fixed a runtime error in empty channels.
• Added precise object dependencies in effect hooks to prevent unnecessary re-renders in the Channel module.

Chores:

• Migrated the rest of modules & UI components to TypeScript from Javascript.
• Introduced new build settings:
  • Changes have been made to export modules using the sub-path exports in the package.json. If you were using the package in a Native CJS environment, this might have an impact.
    In that case, you can migrate the path as follows:

    - const ChannelList = require('@sendbird/uikit-react/cjs/ChannelList');
    + const ChannelList = require('@sendbird/uikit-react/ChannelList');
    

  • TypeScript support also has been improved. Now, precise types based on the source code are used.

Multiple Files Message

Now we are supporting Multiple Files Message feature!
You can select some multiple files in the message inputs, and send multiple images in one message.
If you select several types of files, only images will be combined in the message and the other files will be sent separately.
Also we have resolved many issues found during QA.

How to enable this feature?

You can turn it on in four places.

1. App Component

import App from '@sendbird/uikit-react/App'

<App
  ...
  isMultipleFilesMessageEnabled
/>

2. SendbirdProvider

import { SendbirdProvider } from '@sendbird/uikit-react/SendbirdProvider'

<SendbirdProvider
  ...
  isMultipleFilesMessageEnabled
>
  {...}
</SendbirdProvider>

3. Channel

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

<Channel
  ...
  isMultipleFilesMessageEnabled
/>
<ChannelProvider
  ...
  isMultipleFilesMessageEnabled
>
  {...}
</ChannelProvider>

3. Thread

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

<Thread
  ...
  isMultipleFilesMessageEnabled
/>
<ThreadProvider
  ...
  isMultipleFilesMessageEnabled
>
  {...}
</ThreadProvider>

Interface change/publish

• The properties of the ChannelContext and ThreadContext has been changed little bit.
  • allMessages of the ChannelContext has been divided into allMessages and localMessages
  • allThreadMessages of the ThreadContext has been divided into allThreadMessages and localThreadMessages
  • Each local messages includes pending and failed messages, and the all messages will contain only succeeded messages
  • Please keep in mind, you have to migrate to using the local messages, IF you have used the local messages to draw your custom message components.
• pubSub has been published
  • publishingModules has been added to the payload of pubSub.publish
    You can specify the particular modules that you propose for event publishing

  import { useCallback } from 'react'
  import { SendbirdProvider, useSendbirdStateContext } from '@sendbird/uikit-react/SendbirdProvider'
  import { PUBSUB_TOPICS as topics, PublishingModuleTypes } from '@sendbird/uikit-react/pubSub/topics'
  
  const CustomApp = () => {
    const globalState = useSendbirdStateContext();
    const { stores, config } = globalState;
    const { sdk, initialized } = stores.sdkStore;
    const { pubSub } = config;
  
    const onSendFileMessageOnlyInChannel = useCallback((channel, params) => {
      channel.sendFileMessage(params)
        .onPending((pendingMessage) => {
          pubSub.publish(topics.SEND_MESSAGE_START, {
            channel,
            message: pendingMessage,
            publishingModules: [PublishingModuleTypes.CHANNEL],
          });
        })
        .onFailed((failedMessage) => {
          pubSub.publish(topics.SEND_MESSAGE_FAILED, {
            channel,
            message: failedMessage,
            publishingModules: [PublishingModuleTypes.CHANNEL],
          });
        })
        .onSucceeded((succeededMessage) => {
          pubSub.publish(topics.SEND_FILE_MESSAGE, {
            channel,
            message: succeededMessage,
            publishingModules: [PublishingModuleTypes.CHANNEL],
          });
        })
    }, []);
  
    return (<>...</>)
  };
  
  const App = () => (
    <SendbirdProvider>
      <CustomApp />
    </SendbirdProvider>
  );
  

Fixes:

• Improve the pubSub&dispatch logics
• Allow deleting failed messages
• Check applicationUserListQuery.isLoading before fetching user list
  • Fix the error message: "Query in progress."
• Fix missed or wrong type definitions
  • quoteMessage of ChannelProviderInterface
  • useEditUserProfileProviderContext has been renamed to useEditUserProfileContext

    import { useEditUserProfileProviderContext } from '@sendbird/uikit-react/EditUserProfile/context'
    // to
    import { useEditUserProfileContext } from '@sendbird/uikit-react/EditUserProfile/context'
    

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

[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}
      />
      

[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

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)

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.

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

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)

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.

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

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

Feat:

• Official support for Feature Configuration
  • You can now configure the features of UIKit through the uikitOptions prop of <SendbirdProvider /> or <App /> component. You can also find the detailed sample usage from SAMPLE.md#UIKit-Configuration-Samples
  • The minimum @sendbird/chat version has been increased to 4.9.2.

  <SendbirdProvider
    uikitOptions={{
      common: {
        enableUsingDefaultUserProfile: true,
      },
      groupChannel: {
        enableMention: false,
        enableOgtag: true,
        enableReaction: true,
        enableTypingIndicator: true,
        input: {
          camera: {
            enablePhoto: true,
            enableVideo: true,
          },
          gallery: {
            enablePhoto: true,
            enableVideo: true,
          },
          enableDocument: true,
        },
      },
      groupChannelList: {
        enableTypingIndicator: true,
        enableMessageReceiptStatus: true,
      },
      groupChannelSettings: {
        enableMessageSearch: true,
      },
      openChannel: {
        enableOgtag: true,
        input: {
          camera: {
            enablePhoto: true,
            enableVideo: true,
          },
          gallery: {
            enablePhoto: true,
            enableVideo: true,
          },
          enableDocument: true,
        },
      },
    }}
  />

Fixes:

• Allow to reduce the mobile app height
  It was not able to reduce the height of the mobile app with some wrapper components
• Do not display the UnreadCount(new message notification) comp when unreadSince is null
• Improve sampling and bitrate of Voice Recording
  • sampling rate: 11025
  • bit rate: 12000
• Move scroll every time when message height changes
  It moved scroll only when the last message height changes