[AC-2264] fix: handle channel not found error case (#263)

## Changes
Reset the session when the channel is not found.


https://github.com/sendbird/chat-ai-widget/assets/26326015/8c0c6432-2546-4dfc-aa58-20e2605f55dc

ticket: [AC-2264]

[AC-2264]:
https://sendbird.atlassian.net/browse/AC-2264?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

src/components/CustomChannelComponent.tsx

@@ -6,7 +6,7 @@ import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 
 import useSendbirdStateContext from '@uikit/hooks/useSendbirdStateContext';
-import ChannelUI from '@uikit/modules/GroupChannel/components/GroupChannelUI';
+import GroupChannelUI from '@uikit/modules/GroupChannel/components/GroupChannelUI';
 import Message from '@uikit/modules/GroupChannel/components/Message';
 import MessageInputWrapper from '@uikit/modules/GroupChannel/components/MessageInputWrapper';
 import { useGroupChannelContext } from '@uikit/modules/GroupChannel/context/GroupChannelProvider';
@@ -19,8 +19,11 @@ import MessageDataContent from './MessageDataContent';
 import WelcomeMessages from './messages/WelcomeMessages';
 import StaticRepliesPanel from './StaticRepliesPanel';
 import { useConstantState } from '../context/ConstantContext';
-import { useWidgetSession } from '../context/WidgetSettingContext';
-import useAutoDismissMobileKyeboardHandler from '../hooks/useAutoDismissMobileKyeboardHandler';
+import {
+  useWidgetSession,
+  useWidgetSetting,
+} from '../context/WidgetSettingContext';
+import useAutoDismissMobileKeyboardHandler from '../hooks/useAutoDismissMobileKeyboardHandler';
 import { useBlockWhileBotResponding } from '../hooks/useBlockWhileBotResponding';
 import { useResetHistoryOnConnected } from '../hooks/useResetHistoryOnConnected';
 import { useScrollOnStreaming } from '../hooks/useScrollOnStreaming';
@@ -137,6 +140,7 @@ export function CustomChannelComponent() {
     scrollToBottom,
     refresh,
   } = useGroupChannelContext();
+  const { resetSession } = useWidgetSetting();
   const { userId: currentUserId } = useWidgetSession();
 
   // NOTE: Filter out messages that should not be displayed.
@@ -173,7 +177,7 @@ export function CustomChannelComponent() {
     enableEmojiFeedback
   );
 
-  useAutoDismissMobileKyeboardHandler();
+  useAutoDismissMobileKeyboardHandler();
   useResetHistoryOnConnected();
   useScrollOnStreaming({
     isLastBotMessage,
@@ -238,9 +242,16 @@ export function CustomChannelComponent() {
   const welcomeMessageTimeStamp =
     lastWelcomeMessageCreatedAt ?? firstMessageCreatedAt;
 
+  const resetReqCounter = useRef(0);
+
   return (
     <Root height={'100%'} isStaticReplyVisible={isStaticReplyVisible}>
-      <ChannelUI
+      <GroupChannelUI
+        onChannelFetchFailed={() => {
+          if (resetReqCounter.current > 5) return;
+          resetReqCounter.current += 1;
+          resetSession();
+        }}
         renderFileUploadIcon={() => <></>}
         renderVoiceMessageIcon={() => <></>}
         renderMessageInput={() => (

src/context/WidgetSettingContext.tsx

@@ -38,6 +38,7 @@ type Context = {
   botStyle: BotStyle;
   widgetSession: WidgetSession | null;
   initManualSession: (sdk: SendbirdChatWith<[GroupChannelModule]>) => void;
+  resetSession: () => Promise<void>;
 };
 
 const WidgetSettingContext = createContext<Context | null>(null);
@@ -76,7 +77,10 @@ export const WidgetSettingProvider = ({
     null
   );
 
-  async function initSessionByStrategy(strategy: 'auto' | 'manual') {
+  async function initSessionByStrategy(
+    strategy: 'auto' | 'manual',
+    clearCache = false
+  ) {
     const cachedSession = getWidgetSessionCache({
       appId,
       botId,
@@ -85,6 +89,7 @@ export const WidgetSettingProvider = ({
     const reuseCachedSession = ((
       cache: typeof cachedSession
     ): cache is NonNullable<typeof cachedSession> => {
+      if (clearCache) return false;
       if (!cache || cache.strategy !== strategy) return false;
       if (cache.strategy === 'manual') {
         // NOTE: There is no need to check the expiration of the session if it is managed manually.
@@ -195,6 +200,7 @@ export const WidgetSettingProvider = ({
         },
         widgetSession,
         initManualSession,
+        resetSession: () => initSessionByStrategy(sessionStrategy, true),
       }}
     >
       {widgetSession ? children : null}