fix: Fixed type error.

src/hooks/VoicePlayer/useVoicePlayer.tsx

@@ -25,7 +25,7 @@ export interface UseVoicePlayerContext {
 export const useVoicePlayer = ({
   key = '',
   channelUrl = '',
-  audioFile = null,
+  audioFile,
   audioFileUrl = '',
 }: UseVoicePlayerProps): UseVoicePlayerContext => {
   const [groupKey] = useState<string>(generateGroupKey(channelUrl, key));

src/hooks/VoiceRecorder/WebAudioUtils.ts

@@ -14,11 +14,13 @@ function encodeMp3(arrayBuffer: ArrayBuffer): WavHeader {
   if (wav.channels > 1) {
     for (let j = 0; j < samplesLeft.length; j++) {
       samplesLeft[j] = dataView[j * 2];
-      samplesRight[j] = dataView[j * 2 + 1];
+      if (samplesRight) {
+        samplesRight[j] = dataView[j * 2 + 1];
+      }
     }
   }
 
-  const dataBuffer = [];
+  const dataBuffer: Int8Array[] = [];
   let remaining = samplesLeft.length;
   for (let i = 0; remaining >= maxSamples; i += maxSamples) {
     const left = samplesLeft.subarray(i, i + maxSamples);
@@ -44,7 +46,7 @@ function downsampleToWav(file: File, callback: (buffer: ArrayBuffer) => void): v
   const fileReader = new FileReader();
   fileReader.onload = function (ev) {
     // Decode audio
-    audioCtx.decodeAudioData(ev.target.result as ArrayBuffer, (buffer) => {
+    audioCtx.decodeAudioData(ev.target?.result as ArrayBuffer, (buffer) => {
       // this is where you down sample the audio, usually is 44100 samples per second
       const usingWebkit = !window.OfflineAudioContext;
       const offlineAudioCtx = new OfflineAudioContext(1, 16000 * buffer.duration, 16000);

src/hooks/VoiceRecorder/index.tsx

@@ -107,7 +107,7 @@ export const VoiceRecorderProvider = (props: VoiceRecorderProps): React.ReactEle
               lastModified: new Date().getTime(),
               type: VOICE_MESSAGE_MIME_TYPE,
             });
-            eventHandler?.onRecordingEnded(convertedAudioFile);
+            eventHandler?.onRecordingEnded?.(convertedAudioFile);
             logger.info('VoiceRecorder: Succeeded converting audio file.', convertedAudioFile);
           });
           stream?.getAudioTracks?.().forEach?.(track => track?.stop());

src/hooks/VoiceRecorder/useVoiceRecorder.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { VoiceRecorderEventHandler, useVoiceRecorderContext } from '.';
 import useSendbirdStateContext from '../useSendbirdStateContext';
+import { VOICE_RECORDER_DEFAULT_MAX } from '../../utils/consts';
 
 // export interface UseVoiceRecorderProps extends VoiceRecorderEventHandler {
 //   /**
@@ -34,11 +35,11 @@ export const useVoiceRecorder = ({
 }: VoiceRecorderEventHandler): UseVoiceRecorderContext => {
   const { config } = useSendbirdStateContext();
   const { voiceRecord } = config;
-  const { maxRecordingTime } = voiceRecord;
+  const maxRecordingTime = voiceRecord?.maxRecordingTime ?? VOICE_RECORDER_DEFAULT_MAX;
   const voiceRecorder = useVoiceRecorderContext();
   const { isRecordable } = voiceRecorder;
 
-  const [recordedFile, setRecordedFile] = useState<File>(null);
+  const [recordedFile, setRecordedFile] = useState<File | null>(null);
   const [recordingStatus, setRecordingStatus] = useState<VoiceRecorderStatus>(VoiceRecorderStatus.PREPARING);
   useEffect(() => {
     if (isRecordable && recordingStatus === VoiceRecorderStatus.PREPARING) {

src/hooks/useThrottleCallback.ts

@@ -12,8 +12,8 @@ export function useThrottleCallback<T extends(...args: any[]) => void>(
     trailing: false,
   },
 ) {
-  const timer = useRef(null);
-  const trailingArgs = useRef(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const trailingArgs = useRef<any[] | null>(null);
 
   useEffect(() => {
     return () => {

src/lib/Sendbird.tsx

@@ -271,19 +271,19 @@ const SendbirdSDK = ({
 
   useEffect(() => {
     const body = document.querySelector('body');
-    body.classList.remove('sendbird-experimental__rem__units');
+    body?.classList.remove('sendbird-experimental__rem__units');
     if (isREMUnitEnabled) {
-      body.classList.add('sendbird-experimental__rem__units');
+      body?.classList.add('sendbird-experimental__rem__units');
     }
   }, [isREMUnitEnabled]);
   // add-remove theme from body
   useEffect(() => {
     logger.info('Setup theme', `Theme: ${currentTheme}`);
     try {
       const body = document.querySelector('body');
-      body.classList.remove('sendbird-theme--light');
-      body.classList.remove('sendbird-theme--dark');
-      body.classList.add(`sendbird-theme--${currentTheme || 'light'}`);
+      body?.classList.remove('sendbird-theme--light');
+      body?.classList.remove('sendbird-theme--dark');
+      body?.classList.add(`sendbird-theme--${currentTheme || 'light'}`);
       logger.info('Finish setup theme');
       // eslint-disable-next-line no-empty
     } catch (e) {
@@ -292,8 +292,8 @@ const SendbirdSDK = ({
     return () => {
       try {
         const body = document.querySelector('body');
-        body.classList.remove('sendbird-theme--light');
-        body.classList.remove('sendbird-theme--dark');
+        body?.classList.remove('sendbird-theme--light');
+        body?.classList.remove('sendbird-theme--dark');
         // eslint-disable-next-line no-empty
       } catch { }
     };

src/lib/emojiManager.tsx

@@ -58,7 +58,7 @@ export class EmojiManager {
   }
 
   public getEmojiUrl(reactionKey: Reaction['key']) {
-    return this.AllEmojisAsArray.find((emoji) => emoji.key === reactionKey).url ?? '';
+    return this.AllEmojisAsArray.find((emoji) => emoji.key === reactionKey)?.url ?? '';
   }
 
   public get emojiContainer() {

src/lib/hooks/useOnlineStatus.ts

@@ -78,14 +78,14 @@ function useOnlineStatus(sdk: SendbirdChat, logger: LoggerInterface) {
     const body = document.querySelector('body');
     if (!isOnline && !sdk?.isCacheEnabled) {
       try {
-        body.classList.add('sendbird__offline');
+        body?.classList.add('sendbird__offline');
         logger.info('Added class sendbird__offline to body');
       } catch (e) {
         //
       }
     } else {
       try {
-        body.classList.remove('sendbird__offline');
+        body?.classList.remove('sendbird__offline');
         logger.info('Removed class sendbird__offline from body');
       } catch (e) {
         //

src/lib/selectors.ts

@@ -472,7 +472,7 @@ export const getSendUserMessage = (state: SendBirdState, publishingModules: Publ
           topics.SEND_MESSAGE_FAILED,
           { error, message: message as UserMessage, channel, publishingModules },
         );
-        handler.triggerFailed(error, message);
+        handler.triggerFailed(error, message as SendableMessage);
       })
       .onPending((message) => {
         pubSub.publish(

src/modules/App/DesktopLayout.tsx

@@ -119,7 +119,7 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayout
           sendbird-app__conversation-wrap
         `}
       >
-        {enableLegacyChannelModules ? <Channel {...channelProps} /> : <GroupChannel {...channelProps} />}
+        {enableLegacyChannelModules ? <Channel {...channelProps} /> : <GroupChannel {...channelProps} startingPoint={channelProps.startingPoint ?? undefined}/>}
       </div>
       {showSettings && (
         <div className="sendbird-app__settingspanel-wrap">

src/modules/App/MobileLayout.tsx

@@ -62,7 +62,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (props: MobileLayoutPro
 
   useEffect(() => {
     if (panel !== PANELS.CHANNEL) {
-      goToMessage(null, () => setHighlightedMessage(null));
+      goToMessage(null, () => setHighlightedMessage?.(null));
     }
   }, [panel]);
 
@@ -173,7 +173,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (props: MobileLayoutPro
       )}
       {panel === PANELS.CHANNEL && (
         <div className="sb_mobile__panelwrap">
-          {enableLegacyChannelModules ? <Channel {...channelProps} /> : <GroupChannel {...channelProps} />}
+          {enableLegacyChannelModules ? <Channel {...channelProps} /> : <GroupChannel {...channelProps} startingPoint={channelProps.startingPoint ?? undefined}/>}
         </div>
       )}
       {panel === PANELS.CHANNEL_SETTINGS && (
@@ -218,7 +218,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (props: MobileLayoutPro
               setCurrentChannel(channel);
               goToMessage(message, (messageId) => {
                 setPanel(PANELS.CHANNEL);
-                setHighlightedMessage(messageId);
+                setHighlightedMessage?.(messageId);
               });
             }}
           />

src/modules/App/index.tsx

@@ -12,6 +12,7 @@ import { AppLayout } from './AppLayout';
 import './index.scss';
 
 import { AppLayoutProps } from './types';
+import { GroupChannel } from '@sendbird/chat/groupChannel';
 
 interface AppProps {
   appId: SendbirdProviderProps['appId'];
@@ -102,27 +103,27 @@ export default function App(props: AppProps) {
     isUserIdUsedForNickname = true,
     enableLegacyChannelModules = false,
   } = props;
-  const [currentChannel, setCurrentChannel] = useState(null);
+  const [currentChannel, setCurrentChannel] = useState<GroupChannel | null>(null);
 
   return (
     <Sendbird
-      stringSet={stringSet}
+      stringSet={stringSet ?? undefined}
       appId={appId}
       userId={userId}
       accessToken={accessToken}
       customApiHost={customApiHost}
       customWebSocketHost={customWebSocketHost}
-      breakpoint={breakpoint}
+      breakpoint={breakpoint ?? undefined}
       theme={theme}
       nickname={nickname}
       profileUrl={profileUrl}
-      dateLocale={dateLocale}
-      userListQuery={userListQuery}
+      dateLocale={dateLocale ?? undefined}
+      userListQuery={userListQuery ?? undefined}
       config={config}
-      colorSet={colorSet}
+      colorSet={colorSet ?? undefined}
       disableUserProfile={disableUserProfile}
       disableMarkAsDelivered={disableMarkAsDelivered}
-      renderUserProfile={renderUserProfile}
+      renderUserProfile={renderUserProfile ?? undefined}
       imageCompression={imageCompression}
       isReactionEnabled={isReactionEnabled}
       isMentionEnabled={isMentionEnabled}
@@ -152,9 +153,9 @@ export default function App(props: AppProps) {
         showSearchIcon={showSearchIcon}
         isMessageGroupingEnabled={isMessageGroupingEnabled}
         allowProfileEdit={allowProfileEdit}
-        onProfileEditSuccess={onProfileEditSuccess}
+        onProfileEditSuccess={onProfileEditSuccess ?? undefined}
         disableAutoSelect={disableAutoSelect}
-        currentChannel={currentChannel}
+        currentChannel={currentChannel ?? undefined}
         setCurrentChannel={setCurrentChannel}
         enableLegacyChannelModules={enableLegacyChannelModules}
       />

src/modules/Channel/components/Message/index.tsx

@@ -75,7 +75,7 @@ const Message = (props: MessageProps): React.ReactElement => {
       updateUserMessage={(messageId, params) => {
         updateMessage({
           messageId,
-          message: params.message,
+          message: params.message ?? '',
           mentionedUsers: params.mentionedUsers,
           mentionTemplate: params.mentionedMessageTemplate,
         });

src/modules/Channel/components/MessageFeedbackModal/index.tsx

@@ -37,9 +37,9 @@ export default function MessageFeedbackModal(props: MessageFeedbackModalProps):
 
   const onSubmitWrapper = () => {
     if (!selectedFeedback) return;
-    const comment = inputRef.current.value ?? '';
+    const comment = inputRef.current?.value ?? '';
     if (isEdit) {
-      if (comment !== message.myFeedback.comment) {
+      if (comment !== message.myFeedback?.comment) {
         onUpdate?.(selectedFeedback, comment);
       } else {
         onClose?.();
@@ -50,7 +50,7 @@ export default function MessageFeedbackModal(props: MessageFeedbackModalProps):
   };
 
   const modalRef = useRef(null);
-  const inputRef = useRef(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const onKeyDown = useKeyDown(modalRef, {
     Enter: () => onSubmitWrapper(),

src/modules/Channel/components/MessageInputWrapper/index.tsx

@@ -30,10 +30,10 @@ export const MessageInputWrapper = (props: MessageInputWrapperProps) => {
 
   const lastMessage = currentGroupChannel?.lastMessage;
   const isLastMessageSuggestedRepliesEnabled = config?.groupChannel?.enableSuggestedReplies
-    && getSuggestedReplies(lastMessage).length > 0
+    && getSuggestedReplies(lastMessage ?? undefined).length > 0
     && localMessages?.length === 0;
   const disableMessageInput = props.disabled
-    || isLastMessageSuggestedRepliesEnabled && !!lastMessage.extendedMessagePayload?.['disable_chat_input'];
+    || isLastMessageSuggestedRepliesEnabled && !!lastMessage?.extendedMessagePayload?.['disable_chat_input'];
 
   return (
     <MessageInputWrapperView
@@ -46,17 +46,17 @@ export const MessageInputWrapper = (props: MessageInputWrapperProps) => {
           message: params.message,
           mentionTemplate: params.mentionedMessageTemplate,
           mentionedUsers: params.mentionedUsers,
-          quoteMessage,
+          quoteMessage: quoteMessage ?? undefined,
         });
       }}
       sendFileMessage={(params) => {
-        return sendFileMessage(params.file as File, quoteMessage);
+        return sendFileMessage(params.file as File, quoteMessage ?? undefined);
       }}
       sendVoiceMessage={({ file }, duration) => {
-        return sendVoiceMessage(file as File, duration, quoteMessage);
+        return sendVoiceMessage(file as File, duration, quoteMessage ?? undefined);
       }}
       sendMultipleFilesMessage={({ fileInfoList }) => {
-        return sendMultipleFilesMessage(fileInfoList.map((fileInfo) => fileInfo.file) as File[], quoteMessage);
+        return sendMultipleFilesMessage(fileInfoList.map((fileInfo) => fileInfo.file) as File[], quoteMessage ?? undefined);
       }}
     />
   );

src/modules/Channel/context/ChannelProvider.tsx

@@ -163,7 +163,7 @@ export interface ChannelProviderInterface extends ChannelContextProps, MessageSt
   renderUserMentionItem?: (props: { user: User }) => JSX.Element;
 }
 
-const ChannelContext = React.createContext<ChannelProviderInterface | null>(undefined);
+const ChannelContext = React.createContext<ChannelProviderInterface | null>(null);
 
 const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextProps) => {
   const {
@@ -225,7 +225,7 @@ const ChannelProvider: React.FC<ChannelContextProps> = (props: ChannelContextPro
     setHighLightedMessageId(highlightedMessage);
   }, [highlightedMessage]);
   const userFilledMessageListQuery = queries?.messageListParams;
-  const [quoteMessage, setQuoteMessage] = useState<SendableMessageType>(null);
+  const [quoteMessage, setQuoteMessage] = useState<SendableMessageType | null>(null);
   const [isScrolled, setIsScrolled] = useState(false);
 
   const [messagesStore, messagesDispatcher] = useReducer(messagesReducer, messagesInitialState);

src/modules/Channel/context/hooks/useDeleteMessageCallback.ts

@@ -36,7 +36,7 @@ function useDeleteMessageCallback(
         } else {
           logger.info('Channel | useDeleteMessageCallback: Deleting message from remote:', sendingStatus);
           currentGroupChannel
-            .deleteMessage(message)
+            ?.deleteMessage(message)
             .then(() => {
               logger.info('Channel | useDeleteMessageCallback: Deleting message success!', message);
               messagesDispatcher({

src/modules/Channel/context/hooks/useFileInfoListWithUploaded.ts

@@ -35,10 +35,10 @@ export const useFileInfoListWithUploaded = (message: CoreMessageType): UploadedF
       isUploaded: true,
     }));
   } else {
-    return message.messageParams.fileInfoList.map((it, index) => ({
+    return message?.messageParams?.fileInfoList.map((it, index) => ({
       ...it,
       url: getObjectURL(index) ?? it.fileUrl ?? (it.file instanceof Blob ? getObjectURL(index, it.file) : undefined),
       isUploaded: !it.file && typeof it.fileUrl === 'string' && it.fileUrl.length > 0,
-    }));
+    })) ?? [];
   }
 };

src/modules/Channel/context/hooks/useHandleChannelEvents.ts

@@ -66,7 +66,9 @@ function useHandleChannelEvents({
             let scrollToEnd = false;
             try {
               const { current } = scrollRef;
-              scrollToEnd = current.offsetHeight + current.scrollTop >= current.scrollHeight - 10;
+              if (current) {
+                scrollToEnd = current.offsetHeight + current.scrollTop >= current.scrollHeight - 10;
+              }
               // 10 is a buffer
             } catch (error) {
               //

src/modules/Channel/context/hooks/useHandleReconnectForChannelList.ts

@@ -87,7 +87,7 @@ function useHandleReconnectForChannelList({
                 logger.info('ChannelList refresh - channel list sorted', sortedChannelList);
               }
               // select first channel
-              let newCurrentChannel: GroupChannel = !disableAutoSelect ? sortedChannelList[0] : null;
+              let newCurrentChannel: GroupChannel | null = !disableAutoSelect ? sortedChannelList[0] : null;
               if (currentGroupChannel?.url) {
                 const foundChannel = sortedChannelList.find((channel) => (
                   channel.url === currentGroupChannel.url

src/modules/Channel/context/hooks/useResendMessageCallback.ts

@@ -28,7 +28,7 @@ function useResendMessageCallback(
         // userMessage
         if (failedMessage.isUserMessage()) {
           currentGroupChannel
-            .resendMessage(failedMessage)
+            ?.resendMessage(failedMessage)
             .onPending((message) => {
               logger.info('Channel: Resending message start!', message);
               messagesDispatcher({
@@ -52,7 +52,7 @@ function useResendMessageCallback(
             });
         } else if (failedMessage.isFileMessage()) {
           currentGroupChannel
-            .resendMessage(failedMessage)
+            ?.resendMessage(failedMessage)
             .onPending((message) => {
               logger.info('Channel: Resending file message start!', message);
               messagesDispatcher({
@@ -76,7 +76,7 @@ function useResendMessageCallback(
             });
         } else if (failedMessage.isMultipleFilesMessage()) {
           currentGroupChannel
-            .resendMessage(failedMessage)
+            ?.resendMessage(failedMessage)
             .onPending((message) => {
               logger.info('Channel: Resending multiple files message start!', message);
               messagesDispatcher({
@@ -93,7 +93,7 @@ function useResendMessageCallback(
               });
               pubSub.publish(topics.ON_FILE_INFO_UPLOADED, {
                 response: {
-                  channelUrl: currentGroupChannel.url,
+                  channelUrl: currentGroupChannel?.url ?? '',
                   requestId,
                   index,
                   uploadableFileInfo,