feat: Add Sendbird Extensions in connection (#682)

Call addSendbirdExtensions in connection

[CLNP-197]:
https://sendbird.atlassian.net/browse/CLNP-197?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: HoonBaek

package.json

@@ -67,7 +67,7 @@
     "react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@sendbird/chat": "^4.9.2",
+    "@sendbird/chat": "^4.9.6",
     "@sendbird/uikit-tools": "0.0.1-alpha.40",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",

src/lib/Sendbird.tsx

@@ -24,7 +24,7 @@ import { UIKitConfigProvider, useUIKitConfig } from '@sendbird/uikit-tools';
 
 import { VoiceMessageProvider } from './VoiceMessageProvider';
 import { LocalizationProvider } from './LocalizationContext';
-import { MediaQueryProvider } from './MediaQueryContext';
+import { MediaQueryProvider, useMediaQueryContext } from './MediaQueryContext';
 import getStringSet from '../ui/Label/stringSet';
 import { VOICE_RECORDER_DEFAULT_MAX, VOICE_RECORDER_DEFAULT_MIN } from '../utils/consts';
 import { uikitConfigMapper } from './utils/uikitConfigMapper';
@@ -156,6 +156,7 @@ const SendbirdSDK = ({
     userMention = {},
     isREMUnitEnabled = false,
   } = config;
+  const { isMobile } = useMediaQueryContext();
   const [logger, setLogger] = useState(LoggerFactory(logLevel as LogLevel));
   const [pubSub] = useState(pubSubFactory());
   const [sdkStore, sdkDispatcher] = useReducer(sdkReducers, sdkInitialState);
@@ -172,6 +173,7 @@ const SendbirdSDK = ({
     userId,
     accessToken,
     isUserIdUsedForNickname,
+    isMobile,
   }, {
     logger,
     nickname,

src/lib/hooks/useConnect/connect.ts

@@ -17,6 +17,7 @@ export async function connect({
   accessToken,
   sdk,
   sdkInitParams,
+  isMobile,
 }: ConnectTypes): Promise<void> {
   await disconnectSdk({
     logger,
@@ -38,5 +39,6 @@ export async function connect({
     profileUrl,
     accessToken,
     sdkInitParams,
+    isMobile,
   });
 }

src/lib/hooks/useConnect/index.ts

@@ -4,7 +4,7 @@ import { ReconnectType, StaticTypes, TriggerTypes } from './types';
 import { connect } from './connect';
 
 export default function useConnect(triggerTypes: TriggerTypes, staticTypes: StaticTypes): ReconnectType {
-  const { userId, appId, accessToken, isUserIdUsedForNickname } = triggerTypes;
+  const { userId, appId, accessToken, isMobile, isUserIdUsedForNickname } = triggerTypes;
   const {
     logger,
     nickname,
@@ -39,6 +39,7 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
         initDashboardConfigs,
         isUserIdUsedForNickname,
         sdkInitParams,
+        isMobile,
       });
     } catch (error) {
       logger?.error?.('SendbirdProvider | useConnect/useEffect', error);
@@ -64,6 +65,7 @@ export default function useConnect(triggerTypes: TriggerTypes, staticTypes: Stat
         initDashboardConfigs,
         isUserIdUsedForNickname,
         sdkInitParams,
+        isMobile,
       });
     } catch (error) {
       logger?.error?.('SendbirdProvider | useConnect/reconnect/useCallback', error);

src/lib/hooks/useConnect/setupConnection.ts

@@ -1,4 +1,4 @@
-import SendbirdChat, { SendbirdError, User } from '@sendbird/chat';
+import SendbirdChat, { DeviceOsPlatform, SendbirdError, SendbirdPlatform, SendbirdProduct, User } from '@sendbird/chat';
 import { OpenChannelModule } from '@sendbird/chat/openChannel';
 import { GroupChannelModule } from '@sendbird/chat/groupChannel';
 
@@ -80,6 +80,7 @@ export async function setUpConnection({
   accessToken,
   isUserIdUsedForNickname,
   sdkInitParams,
+  isMobile = false,
 }: SetupConnectionTypes): Promise<void> {
   return new Promise((resolve, reject) => {
     logger?.info?.('SendbirdProvider | useConnect/setupConnection/init', { userId, appId });
@@ -100,6 +101,22 @@ export async function setUpConnection({
       }
 
       logger?.info?.('SendbirdProvider | useConnect/setupConnection/setVersion', { version: APP_VERSION_STRING });
+      /**
+       * Keep optional chaining to the addSendbirdExtensions
+       * for supporting the ChatSDK v4.9.5 or less
+       */
+      newSdk?.addSendbirdExtensions?.(
+        [
+          {
+            product: SendbirdProduct?.UIKIT_CHAT ?? 'uikit-chat',
+            version: APP_VERSION_STRING,
+            platform: SendbirdPlatform?.JS ?? 'js',
+          },
+        ],
+        isMobile
+          ? (DeviceOsPlatform?.MOBILE_WEB ?? 'mobile_web')
+          : (DeviceOsPlatform?.WEB ?? 'web'),
+      );
       newSdk.addExtension('sb_uikit', APP_VERSION_STRING);
 
       const connectCbSucess = async (user: User) => {

src/lib/hooks/useConnect/types.ts

@@ -18,6 +18,7 @@ export type TriggerTypes = {
   // todo: doulbe check this type before merge
   accessToken?: string;
   isUserIdUsedForNickname?: boolean;
+  isMobile?: boolean;
 };
 
 export type ConfigureSessionTypes = (sdk: SendbirdChat | SendbirdGroupChat | SendbirdOpenChat) => SessionHandler;

yarn.lock

@@ -2430,15 +2430,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sendbird/chat@npm:^4.9.2":
-  version: 4.9.2
-  resolution: "@sendbird/chat@npm:4.9.2"
+"@sendbird/chat@npm:^4.9.6":
+  version: 4.9.6
+  resolution: "@sendbird/chat@npm:4.9.6"
   peerDependencies:
     "@react-native-async-storage/async-storage": ^1.17.6
   peerDependenciesMeta:
     "@react-native-async-storage/async-storage":
       optional: true
-  checksum: 5b615711a1ee3c90525d810d748e6a3e777006fc2c0678c590d21730b9c225bca3215cb3382efb294a62f22b7e0328d5589789c54499a7c211eb0124238ae4d9
+  checksum: 70e3a92e2d0343519112b301c2fc5ddacc5b89f94c84cbba83a56a70a781bfb0207ec55bd2a310e1653dbc6bf1bf7d28d9592cfd6fe931a7e4d200f84b021c0d
   languageName: node
   linkType: hard
 
@@ -2459,7 +2459,7 @@ __metadata:
     "@rollup/plugin-node-resolve": ^7.1.3
     "@rollup/plugin-replace": ^2.4.2
     "@rollup/plugin-typescript": ^8.2.1
-    "@sendbird/chat": ^4.9.2
+    "@sendbird/chat": ^4.9.6
     "@sendbird/uikit-tools": 0.0.1-alpha.40
     "@storybook/addon-actions": ^6.5.10
     "@storybook/addon-docs": ^6.5.10