refactor: use typing event to indicate bot is responding

Author: bang9

src/components/CustomTypingIndicatorBubble.tsx renamed to src/components/BotTypingIndicator.tsx

@@ -1,7 +1,7 @@
 import BotProfileImage from './BotProfileImage';
 import { TypingBubble } from '../foundation/components/TypingBubble';
 
-function CustomTypingIndicatorBubble() {
+function BotTypingIndicator() {
   return (
     <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, marginTop: 16 }}>
       <BotProfileImage size={28} />
@@ -10,4 +10,4 @@ function CustomTypingIndicatorBubble() {
   );
 }
 
-export default CustomTypingIndicatorBubble;
+export default BotTypingIndicator;

src/components/CustomMessage.tsx

@@ -8,7 +8,6 @@ import BotMessageWithBodyInput from './BotMessageWithBodyInput';
 import { useChatContext } from './chat/context/ChatProvider';
 import CurrentUserMessage from './CurrentUserMessage';
 import CustomMessageBody from './CustomMessageBody';
-import CustomTypingIndicatorBubble from './CustomTypingIndicatorBubble';
 import FileMessage from './FileMessage';
 import { CarouselMessage } from './messages/CarouselMessage';
 import FormMessage from './messages/FormMessage';
@@ -25,20 +24,19 @@ import { isSentBy } from '../utils/messages';
 
 type Props = {
   message: BaseMessage;
-  activeSpinnerId: number;
   chainTop?: boolean;
   chainBottom?: boolean;
 };
 
 export default function CustomMessage(props: Props) {
+  const { message } = props;
+
   const { botUser } = useChatContext();
-  const { message, activeSpinnerId } = props;
   const { replacementTextList, enableEmojiFeedback } = useConstantState();
   const { userId: currentUserId } = useWidgetSession();
   const getCarouselItems = useCarouselItems(message);
 
   const botUserId = botUser?.userId;
-  const isWaitingForBotReply = activeSpinnerId === message.messageId && !!botUser;
 
   const shouldRenderFeedback = () => {
     return (
@@ -61,28 +59,8 @@ export default function CustomMessage(props: Props) {
 
   // Sent by current user
   if (isSentBy(message, currentUserId)) {
-    if (message.isUserMessage()) {
-      /**
-       * If a message to render is sent by me and is a last message,
-       * typing indicator bubble is displayed below to indicate
-       * a reply message from bot is expected to arrive.
-       */
-      return (
-        <div>
-          <CurrentUserMessage message={message} />
-          {isWaitingForBotReply && <CustomTypingIndicatorBubble />}
-        </div>
-      );
-    }
-
-    if (message.isFileMessage()) {
-      return (
-        <div>
-          <OutgoingFileMessage message={message} />
-          {isWaitingForBotReply && <CustomTypingIndicatorBubble />}
-        </div>
-      );
-    }
+    if (message.isUserMessage()) return <CurrentUserMessage message={message} />;
+    if (message.isFileMessage()) return <OutgoingFileMessage message={message} />;
   }
 
   // Sent by bot user

src/components/chat/hooks/useIsBotTyping.ts

@@ -0,0 +1,29 @@
+import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
+import { useEffect, useState } from 'react';
+
+import { useChatContext } from '../context/ChatProvider';
+
+export const useIsBotTyping = () => {
+  const { sdk, channel, botUser, scrollSource } = useChatContext();
+  const [isBotTyping, setIsBotTyping] = useState(false);
+
+  useEffect(() => {
+    if (sdk?.groupChannel?.addGroupChannelHandler) {
+      const handler = new GroupChannelHandler({
+        onTypingStatusUpdated(it) {
+          if (it.url === channel?.url) {
+            const typing = it.getTypingUsers().some((user) => user.userId === botUser?.userId);
+            if (typing) scrollSource.scrollPubSub.publish('scrollToBottom', { animated: true });
+            setIsBotTyping(typing);
+          }
+        },
+      });
+
+      const id = 'bot-typing';
+      sdk.groupChannel.addGroupChannelHandler(id, handler);
+      return () => sdk.groupChannel.removeGroupChannelHandler(id);
+    }
+  }, [sdk, botUser]);
+
+  return isBotTyping;
+};

src/components/chat/hooks/useTypingTargetMessageId.ts

@@ -11,12 +11,13 @@ import { Placeholder } from '../../../foundation/components/Placeholder';
 import { ScrollToBottomButton } from '../../../foundation/components/ScrollToBottomButton';
 import { isDashboardPreview } from '../../../utils';
 import { getMessageGrouping } from '../../../utils/messages';
+import BotTypingIndicator from '../../BotTypingIndicator';
 import CustomMessage from '../../CustomMessage';
 import MessageDataContent from '../../MessageDataContent';
 import SuggestedRepliesContainer from '../../SuggestedRepliesContainer';
 import { useChatContext } from '../context/ChatProvider';
 import { useBotStudioView } from '../hooks/useBotStudioView';
-import { useTypingTargetMessageId } from '../hooks/useTypingTargetMessageId';
+import { useIsBotTyping } from '../hooks/useIsBotTyping';
 
 export const ChatMessageList = () => {
   const { channel, dataSource, scrollSource, handlers } = useChatContext();
@@ -29,7 +30,7 @@ export const ChatMessageList = () => {
     messageStackDirection = 'bottom',
   } = useConstantState();
 
-  const typingTargetMessageId = useTypingTargetMessageId();
+  const isBotTyping = useIsBotTyping();
   const { filteredMessages, shouldShowOriginalDate, renderBotStudioWelcomeMessages } = useBotStudioView();
 
   const render = () => {
@@ -55,6 +56,13 @@ export const ChatMessageList = () => {
         onLoadNext={dataSource.loadNext}
         depsForResetScrollPositionToBottom={[dataSource.initialized, dataSource.messages.length !== 0]}
         messageTopArea={renderBotStudioWelcomeMessages()}
+        messageBottomArea={
+          isBotTyping && (
+            <div style={{ padding: '0 16px' }}>
+              <BotTypingIndicator />
+            </div>
+          )
+        }
         renderMessage={({ message, index }) => {
           const prevCreatedAt = filteredMessages[index - 1]?.createdAt ?? 0;
           const suggestedReplies = message.suggestedReplies ?? [];
@@ -79,12 +87,7 @@ export const ChatMessageList = () => {
                 />
               )}
               <div style={{ marginBottom: index === filteredMessages.length - 1 ? 0 : 16 }}>
-                <CustomMessage
-                  message={message as any}
-                  activeSpinnerId={typingTargetMessageId}
-                  chainTop={top}
-                  chainBottom={bottom}
-                />
+                <CustomMessage message={message as any} chainTop={top} chainBottom={bottom} />
 
                 {message.data &&
                   isDashboardPreview(customUserAgentParam) &&