From 576298e5da281dafd703a44d56a2ee25a610550e Mon Sep 17 00:00:00 2001
From: Hyungu Kang | Airen <gusrn1423@naver.com>
Date: Wed, 5 Jun 2024 15:43:12 +0900
Subject: [PATCH] [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
---
 packages/uikit                                |  2 +-
 src/components/CustomChannelComponent.tsx     | 21 ++++++++++++++-----
 src/context/WidgetSettingContext.tsx          |  8 ++++++-
 ...=> useAutoDismissMobileKeyboardHandler.ts} |  0
 4 files changed, 24 insertions(+), 7 deletions(-)
 rename src/hooks/{useAutoDismissMobileKyeboardHandler.ts => useAutoDismissMobileKeyboardHandler.ts} (100%)

diff --git a/packages/uikit b/packages/uikit
index c675ff10d..70808e2a2 160000
--- a/packages/uikit
+++ b/packages/uikit
@@ -1 +1 @@
-Subproject commit c675ff10d3690ad70dbca7c2cb623ad1e46a4e9b
+Subproject commit 70808e2a24aeeb69af5f481d3e1a7ba72335982d
diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx
index cc4bad4fa..bb95513a8 100644
--- a/src/components/CustomChannelComponent.tsx
+++ b/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={() => (
diff --git a/src/context/WidgetSettingContext.tsx b/src/context/WidgetSettingContext.tsx
index c5054a7e5..2fcef0669 100644
--- a/src/context/WidgetSettingContext.tsx
+++ b/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}
diff --git a/src/hooks/useAutoDismissMobileKyeboardHandler.ts b/src/hooks/useAutoDismissMobileKeyboardHandler.ts
similarity index 100%
rename from src/hooks/useAutoDismissMobileKyeboardHandler.ts
rename to src/hooks/useAutoDismissMobileKeyboardHandler.ts