feat: add sdkInitParams prop (#692)

Addresses https://sendbird.atlassian.net/browse/AC-217

�Added 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
  }}
/>
```

Author: AhyoungRyu

scripts/index_d_ts

@@ -6,7 +6,7 @@
 declare module "SendbirdUIKitGlobal" {
   import type React from 'react';
   import type SendbirdChat from '@sendbird/chat';
-  import { GroupChannelModule, ModuleNamespaces, OpenChannelModule } from '@sendbird/chat/lib/__definition';
+  import { GroupChannelModule, ModuleNamespaces, OpenChannelModule, SendbirdChatParams, Module } from '@sendbird/chat/lib/__definition';
   import { SBUConfig } from '@sendbird/uikit-tools';
   import type {
     SendbirdError,
@@ -113,6 +113,7 @@ declare module "SendbirdUIKitGlobal" {
     isTypingIndicatorEnabledOnChannelList?: boolean;
     isMessageReceiptStatusEnabledOnChannelList?: boolean;
     uikitOptions?: UIKitOptions;
+    sdkInitParams?: SendbirdChatParams<Module[]>;
   }
 
   export type Logger = {
@@ -292,6 +293,7 @@ declare module "SendbirdUIKitGlobal" {
     isTypingIndicatorEnabledOnChannelList?: boolean;
     isMessageReceiptStatusEnabledOnChannelList?: boolean;
     uikitOptions?: UIKitOptions;
+    sdkInitParams?: SendbirdChatParams<Module[]>;
   }
 
   export interface SendBirdStateConfig {

src/lib/Sendbird.tsx

@@ -35,7 +35,7 @@ import { useMarkAsDeliveredScheduler } from './hooks/useMarkAsDeliveredScheduler
 import { getCaseResolvedReplyType, getCaseResolvedThreadReplySelectType } from './utils/resolvedReplyType';
 import { useUnmount } from '../hooks/useUnmount';
 import { disconnectSdk } from './hooks/useConnect/disconnectSdk';
-import { UIKitOptions, CommonUIKitConfigProps } from './types';
+import { UIKitOptions, CommonUIKitConfigProps, SendbirdChatInitParams } from './types';
 
 export type UserListQueryType = {
   hasNext?: boolean;
@@ -87,6 +87,7 @@ export interface SendbirdProviderProps extends CommonUIKitConfigProps {
   onUserProfileMessage?: () => void;
   uikitOptions?: UIKitOptions;
   isUserIdUsedForNickname?: boolean;
+  sdkInitParams?: SendbirdChatInitParams;
 }
 
 function Sendbird(props: SendbirdProviderProps) {
@@ -148,6 +149,7 @@ const SendbirdSDK = ({
   onUserProfileMessage = null,
   breakpoint = false,
   isUserIdUsedForNickname = true,
+  sdkInitParams,
 }: SendbirdProviderProps): React.ReactElement => {
   const {
     logLevel = '',
@@ -177,6 +179,7 @@ const SendbirdSDK = ({
     configureSession,
     customApiHost,
     customWebSocketHost,
+    sdkInitParams,
     sdk,
     sdkDispatcher,
     userDispatcher,

src/lib/hooks/useConnect/__test__/setupConnection.spec.ts

@@ -202,4 +202,23 @@ describe('useConnect/setupConnection/setUpParams', () => {
     });
     expect(newSdk).toEqual(mockSdk);
   });
+
+  it('should call init with sdkInitParams', async () => {
+    const setUpConnectionProps = generateSetUpConnectionParams();
+    const { appId, sdkInitParams } = setUpConnectionProps;
+    const newSdk = setUpParams({ appId, sdkInitParams });
+    // @ts-ignore
+    expect(require('@sendbird/chat').init).toBeCalledWith({
+      appId,
+      newInstance: true,
+      modules: [
+        // @ts-ignore
+        new (require('@sendbird/chat/groupChannel').GroupChannelModule)(),
+        // @ts-ignore
+        new (require('@sendbird/chat/openChannel').OpenChannelModule)(),
+      ],
+      sdkInitParams,
+    });
+    expect(newSdk).toEqual(mockSdk);
+  });
 });

src/lib/hooks/useConnect/connect.ts

@@ -16,6 +16,7 @@ export async function connect({
   profileUrl,
   accessToken,
   sdk,
+  sdkInitParams,
 }: ConnectTypes): Promise<void> {
   await disconnectSdk({
     logger,
@@ -36,5 +37,6 @@ export async function connect({
     nickname,
     profileUrl,
     accessToken,
+    sdkInitParams,
   });
 }

src/lib/hooks/useConnect/index.ts

@@ -16,6 +16,7 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
     sdkDispatcher,
     userDispatcher,
     initDashboardConfigs,
+    sdkInitParams,
   } = staticTypes;
   logger?.info?.('SendbirdProvider | useConnect', { ...triggerTypes, ...staticTypes });
 
@@ -37,6 +38,7 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
         userDispatcher,
         initDashboardConfigs,
         isUserIdUsedForNickname,
+        sdkInitParams,
       });
     } catch (error) {
       logger?.error?.('SendbirdProvider | useConnect/useEffect', error);
@@ -61,6 +63,7 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
         userDispatcher,
         initDashboardConfigs,
         isUserIdUsedForNickname,
+        sdkInitParams,
       });
     } catch (error) {
       logger?.error?.('SendbirdProvider | useConnect/reconnect/useCallback', error);

src/lib/hooks/useConnect/setupConnection.ts

@@ -8,6 +8,7 @@ import { USER_ACTIONS } from '../../dux/user/actionTypes';
 import { isTextuallyNull } from '../../../utils';
 
 import { SetupConnectionTypes } from './types';
+import { SendbirdChatInitParams } from '../../types';
 
 const APP_VERSION_STRING = '__react_dev_mode__';
 
@@ -25,10 +26,12 @@ export function setUpParams({
   appId,
   customApiHost,
   customWebSocketHost,
+  sdkInitParams,
 }: {
   appId: string;
   customApiHost?: string;
   customWebSocketHost?: string;
+  sdkInitParams?: SendbirdChatInitParams;
 }): SendbirdChat {
   const params = {
     appId,
@@ -37,6 +40,7 @@ export function setUpParams({
       new OpenChannelModule(),
     ],
     newInstance: true,
+    ...sdkInitParams,
   };
   if (customApiHost) {
     params['customApiHost'] = customApiHost;
@@ -74,6 +78,7 @@ export async function setUpConnection({
   profileUrl,
   accessToken,
   isUserIdUsedForNickname,
+  sdkInitParams,
 }: SetupConnectionTypes): Promise<void> {
   return new Promise((resolve, reject) => {
     logger?.info?.('SendbirdProvider | useConnect/setupConnection/init', { userId, appId });
@@ -84,6 +89,7 @@ export async function setUpConnection({
         appId,
         customApiHost,
         customWebSocketHost,
+        sdkInitParams,
       });
 
       if (configureSession && typeof configureSession === 'function') {

src/lib/hooks/useConnect/types.ts

@@ -7,6 +7,8 @@ import { UserActionTypes } from '../../dux/user/actionTypes';
 
 import { Logger } from '../../SendbirdState';
 
+import { SendbirdChatInitParams } from '../../types';
+
 type SdkDispatcher = React.Dispatch<SdkActionTypes>;
 type UserDispatcher = React.Dispatch<UserActionTypes>;
 
@@ -31,6 +33,7 @@ export type StaticTypes = {
   sdkDispatcher: SdkDispatcher;
   userDispatcher: UserDispatcher;
   initDashboardConfigs: (sdk: SendbirdChat) => Promise<void>;
+  sdkInitParams?: SendbirdChatInitParams;
 };
 
 export type ConnectTypes = TriggerTypes & StaticTypes;

src/lib/types.ts

@@ -1,5 +1,5 @@
 import type SendbirdChat from '@sendbird/chat';
-import type { User } from '@sendbird/chat';
+import type { User, SendbirdChatParams } from '@sendbird/chat';
 import type {
   GroupChannel,
   GroupChannelCreateParams,
@@ -29,6 +29,8 @@ import { PartialDeep } from '../utils/typeHelpers/partialDeep';
 
 import { SBUConfig } from '@sendbird/uikit-tools';
 
+import { Module } from '@sendbird/chat/lib/__definition';
+
 // note to SDK team:
 // using enum inside .d.ts won’t work for jest, but const enum will work.
 export const Role = {
@@ -244,3 +246,5 @@ export type UIKitOptions = PartialDeep<{
   groupChannelSettings: SBUConfig['groupChannel']['setting'];
   openChannel: SBUConfig['openChannel']['channel'];
 }>;
+
+export type SendbirdChatInitParams = SendbirdChatParams<Module[]>;

src/modules/App/index.jsx

@@ -47,6 +47,7 @@ export default function App(props) {
     isMessageReceiptStatusEnabledOnChannelList,
     uikitOptions,
     isUserIdUsedForNickname,
+    sdkInitParams,
   } = props;
   const [currentChannel, setCurrentChannel] = useState(null);
   return (
@@ -82,6 +83,7 @@ export default function App(props) {
       showSearchIcon={showSearchIcon}
       uikitOptions={uikitOptions}
       isUserIdUsedForNickname={isUserIdUsedForNickname}
+      sdkInitParams={sdkInitParams}
     >
       <AppLayout
         isReactionEnabled={isReactionEnabled}
@@ -154,6 +156,7 @@ App.propTypes = {
   isTypingIndicatorEnabledOnChannelList: PropTypes.bool,
   isMessageReceiptStatusEnabledOnChannelList: PropTypes.bool,
   isUserIdUsedForNickname: PropTypes.bool,
+  sdkInitParams: PropTypes.shape({}),
 };
 
 App.defaultProps = {
@@ -194,4 +197,5 @@ App.defaultProps = {
   isTypingIndicatorEnabledOnChannelList: undefined,
   isMessageReceiptStatusEnabledOnChannelList: undefined,
   isUserIdUsedForNickname: true,
+  sdkInitParams: undefined,
 };

src/modules/App/types.ts

@@ -9,6 +9,7 @@ import {
   UserListQuery,
   RenderUserProfileProps,
   SendBirdProviderConfig,
+  SendbirdChatInitParams,
 } from '../../types';
 
 export interface AppLayoutProps {
@@ -75,4 +76,5 @@ export default interface AppProps {
   disableAutoSelect?: boolean;
   isTypingIndicatorEnabledOnChannelList?: boolean;
   isMessageReceiptStatusEnabledOnChannelList?: boolean;
+  sdkInitParams?: SendbirdChatInitParams;
 }