Merge pull request #101 from sendbird/feat/improve-initial-rendering

[EL-909] Improve initial rendering

src/App.tsx

@@ -4,7 +4,6 @@ import { Constant } from './const';
 interface Props extends Partial<Constant> {
   applicationId?: string;
   botId?: string;
-  hashedKey?: string;
   autoOpen?: boolean;
   renderWidgetToggleButton?: (props: {
     onClick: () => void;
@@ -29,7 +28,6 @@ const App = (props: Props) => {
       chatBottomContent={props.chatBottomContent}
       messageBottomContent={props.messageBottomContent}
       replacementTextList={props.replacementTextList}
-      hashedKey={props.hashedKey}
       instantConnect={props.instantConnect}
       customRefreshComponent={props.customRefreshComponent}
       configureSession={props.configureSession}

src/components/Chat.tsx

@@ -13,7 +13,6 @@ import {
   useConstantState,
   ConstantStateProvider,
 } from '../context/ConstantContext';
-import { HashedKeyProvider } from '../context/HashedKeyContext';
 import { useChannelStyle } from '../hooks/useChannelStyle';
 import { getTheme } from '../theme';
 import { assert, isMobile } from '../utils';
@@ -103,7 +102,6 @@ interface Props extends ChatWidgetProps {
 export const Chat = ({
   applicationId,
   botId,
-  hashedKey,
   isOpen = true,
   setIsOpen,
   ...constantProps
@@ -140,9 +138,7 @@ export const Chat = ({
         setIsOpen={setIsOpen}
         {...constantProps}
       >
-        <HashedKeyProvider hashedKey={hashedKey ?? null}>
           {isOpen && <SBComponent />}
-        </HashedKeyProvider>
       </ConstantStateProvider>
     </ThemeProvider>
   );
@@ -153,7 +149,15 @@ export const Chat = ({
  * Do not use this component directly. Use Chat instead for internal use.
  */
 export default function ChatClient(props: Props) {
-  const queryClient = new QueryClient();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+        staleTime: 5000,
+      },
+    },
+  });
 
   return (
     <QueryClientProvider client={queryClient}>

src/components/ChatAiWidget.tsx

@@ -161,8 +161,8 @@ const Component = (props: Props) => {
   };
 
   useEffect(() => {
-    if (props.autoOpen || channelStyle.autoOpen) {
-      timer.current = setTimeout(() => setIsOpen(() => true), 1000);
+    if (!isMobile && (props.autoOpen || channelStyle.autoOpen)) {
+      timer.current = setTimeout(() => setIsOpen(true), 200);
     }
   }, [channelStyle.autoOpen, props.autoOpen]);
 
@@ -172,7 +172,7 @@ const Component = (props: Props) => {
     isOpen,
   };
   return isMobile && isOpen ? (
-    <MobileContainer width={mobileContainerWidth}>
+    <MobileContainer width={mobileContainerWidth} id="aichatbot-widget-window">
       <Chat {...props} isOpen={isOpen} setIsOpen={setIsOpen} />
     </MobileContainer>
   ) : (
@@ -185,7 +185,15 @@ const Component = (props: Props) => {
 };
 
 export default function ChatAiWidget(props: Props) {
-  const queryClient = new QueryClient();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+        staleTime: 5000,
+      },
+    },
+  });
   const CHAT_WIDGET_APP_ID =
     import.meta.env.VITE_CHAT_WIDGET_APP_ID ?? props.applicationId;
   const CHAT_WIDGET_BOT_ID =

src/components/CustomChannel.tsx

@@ -1,40 +1,27 @@
-import { User } from '@sendbird/chat';
-import { type SendbirdGroupChat } from '@sendbird/chat/groupChannel';
 import { GroupChannelProvider } from '@sendbird/uikit-react/GroupChannel/context';
-import { default as useSendbirdStateContext } from '@sendbird/uikit-react/useSendbirdStateContext';
-
 import { CustomChannelComponent } from './CustomChannelComponent';
 import LoadingScreen from './LoadingScreen';
 import { useConstantState } from '../context/ConstantContext';
-import { useCreateGroupChannel } from '../hooks/useCreateGroupChannel';
-import { useGetBotUser } from '../hooks/useGetBotUser';
 import { assert } from '../utils';
+import { useGroupChannel } from '../hooks/useGroupChannel';
 
 export default function CustomChannel() {
-  const { botId, instantConnect } = useConstantState();
-  const store = useSendbirdStateContext();
-  const sb: SendbirdGroupChat = store.stores.sdkStore.sdk as SendbirdGroupChat;
-
+  const { botId } = useConstantState();
   assert(botId !== null, 'botId must be provided');
 
-  const botUser: User = useGetBotUser(sb.currentUser, botId) as User;
-  const [channel, createGroupChannel] = useCreateGroupChannel(
-    sb.currentUser,
-    botUser
-  );
+  const { data } = useGroupChannel();
 
-  if (instantConnect && !channel) {
+  if (data == null) {
     return <LoadingScreen />;
   }
-
+  const { channel, botUser } = data;
   return (
     <GroupChannelProvider
-      channelUrl={channel?.url}
+      channelUrl={channel.url}
       scrollBehavior="smooth"
       reconnectOnIdle={false}
     >
       <CustomChannelComponent
-        createGroupChannel={createGroupChannel}
         botUser={botUser}
       />
     </GroupChannelProvider>

src/components/CustomChannelComponent.tsx

@@ -19,7 +19,6 @@ import ChatBottom from './ChatBottom';
 import CustomChannelHeader from './CustomChannelHeader';
 import CustomMessage from './CustomMessage';
 import DynamicRepliesPanel from './DynamicRepliesPanel';
-import LoadingScreen from './LoadingScreen';
 import { useConstantState } from '../context/ConstantContext';
 import { useScrollOnStreaming } from '../hooks/useScrollOnStreaming';
 import { isSpecialMessage, scrollUtil, hideChatBottomBanner } from '../utils';
@@ -110,12 +109,11 @@ const Root = styled.div<RootStyleProps>`
 
 type CustomChannelComponentProps = {
   botUser: User;
-  createGroupChannel?: () => void;
 };
 
 export function CustomChannelComponent(props: CustomChannelComponentProps) {
-  const { botUser, createGroupChannel } = props;
-  const { userId, suggestedMessageContent } = useConstantState();
+  const { botUser } = props;
+  const { userId, suggestedMessageContent, botId } = useConstantState();
   const { messages: allMessages, currentChannel: channel } =
     useGroupChannelContext();
   const lastMessageRef = useRef<HTMLDivElement>(null);
@@ -124,7 +122,7 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
   ] as ClientUserMessage;
   const isLastBotMessage =
     !(lastMessage?.messageType === 'admin') &&
-    (lastMessage as ClientUserMessage)?.sender?.userId === botUser.userId;
+    (lastMessage as ClientUserMessage)?.sender?.userId === botId;
 
   const [activeSpinnerId, setActiveSpinnerId] = useState(-1);
   const messageCount = allMessages?.length ?? 0;
@@ -145,7 +143,7 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
     allMessages &&
     messageCount > 1 &&
     !(lastMessage?.messageType === 'admin') &&
-    lastMessage.sender?.userId === botUser.userId &&
+    lastMessage.sender?.userId === botId &&
     !isMessageInStreaming &&
     !isSpecialMessage(
       lastMessage.message,
@@ -189,17 +187,16 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
   );
 
   const botWelcomeMessages = useMemo(() => {
-    return getBotWelcomeMessages(allMessages, botUser.userId);
+    return getBotWelcomeMessages(allMessages, botId);
   }, [messageCount]);
   return (
     <Root height={'100%'}>
       <ChannelUI
         renderChannelHeader={() => {
-          return channel && createGroupChannel && botUser ? (
+          return channel && botUser ? (
             <CustomChannelHeader
               botUser={botUser}
               channel={channel as GroupChannel}
-              createGroupChannel={createGroupChannel}
             />
           ) : (
             <ChannelHeader />
@@ -238,7 +235,6 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
           );
         }}
         renderTypingIndicator={() => <></>}
-        renderPlaceholderLoader={() => <LoadingScreen />}
       />
       <Banner />
     </Root>

src/components/CustomChannelHeader.tsx

@@ -12,6 +12,7 @@ import BotProfileImage from './BotProfileImage';
 import { useConstantState } from '../context/ConstantContext';
 import { ReactComponent as CloseButton } from '../icons/ic-widget-close.svg';
 import { isMobile } from '../utils';
+import { useGroupChannel } from '../hooks/useGroupChannel';
 
 const Root = styled.div`
   display: flex;
@@ -63,13 +64,13 @@ const RenewButtonContainer = styled.div`
 type Props = {
   channel: GroupChannel;
   botUser: User;
-  createGroupChannel: () => void;
 };
 
 export default function CustomChannelHeader(props: Props) {
-  const { channel, createGroupChannel, botUser } = props;
+  const { channel, botUser } = props;
   const { betaMark, customBetaMarkText, customRefreshComponent } =
     useConstantState();
+  const { refetch: createGroupChannel } = useGroupChannel();
   const { setIsOpen } = useConstantState();
 
   function onClickRenewButton() {

src/hooks/useChannelStyle.ts

@@ -27,7 +27,6 @@ export const useChannelStyle = ({
   const { data, isPending, isLoading, isFetching } = useQuery({
     enabled: !!appId && !!botId,
     queryKey: ['getChannelStyle', appId, botId],
-    retry: 0,
     queryFn: async () => {
       try {
         const response = await fetch(