Temporary contoso fix for typing indicator to go away with timeout (#201)

* temporary contoso fix for typing indicator for sample chat

* Change files

* comment edit

* comment edit 2

change/@azure-acs-chat-selector-2b0cc573-619d-480b-a7e8-9d682c5f18d8.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Temporary TypingIndicator fix for sample chat",
+  "packageName": "@azure/acs-chat-selector",
+  "email": "miguelgamis@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/acs-chat-selector/src/typingIndicatorSelector.ts

@@ -20,8 +20,7 @@ const filterTypingIndicators = (typingIndicators: TypingIndicator[], userId: str
       continue;
     }
     if (typingIndicator.receivedOn < date8SecondsAgo) {
-      // assuming typingIndicators is ordered from oldest to newest so we don't need to check the rest
-      break;
+      continue;
     }
     if (seen.has(typingIndicator.sender.user.communicationUserId)) {
       continue;

samples/Chat/src/app/ChatArea.tsx

@@ -3,7 +3,7 @@
 import { ErrorBar as ErrorBarComponent, SendBox, TypingIndicator, MessageThread } from 'react-components';
 import { connectFuncsToContext, MapToErrorBarProps } from 'react-composites';
 import { Stack } from '@fluentui/react';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { chatAreaContainerStyle, sendBoxParentStyle } from './styles/ChatArea.styles';
 import { usePropsFor } from './hooks/usePropsFor';
 
@@ -26,6 +26,16 @@ export const ChatArea = (props: ChatAreaProps): JSX.Element => {
 
   const onLoadPreviousChatMessages = chatThreadProps.onLoadPreviousChatMessages;
 
+  // This state is a temporary contoso fix and will be the typingUsers prop passed to TypingIndicator
+  const [transientTypingUsers, setTransientTypingUsers] = useState(typingIndicatorProps.typingUsers);
+  // This useEffect is to set transientTypingUsers to be empty after a timeout of no updates from usePropsFor
+  useEffect(() => {
+    setTransientTypingUsers(typingIndicatorProps.typingUsers);
+    setTimeout(() => {
+      setTransientTypingUsers([]);
+    }, 8000); //wait 8000 milliseconds to make sure it cleans up well
+  }, [typingIndicatorProps.typingUsers]);
+
   // Initialize the Chat thread with history messages
   useEffect(() => {
     (async () => {
@@ -38,7 +48,7 @@ export const ChatArea = (props: ChatAreaProps): JSX.Element => {
       <MessageThread {...chatThreadProps} onRenderAvatar={props.onRenderAvatar} numberOfChatMessagesToReload={5} />
       <Stack.Item align="center" className={sendBoxParentStyle}>
         <div style={{ paddingLeft: '0.5rem', paddingRight: '0.5rem' }}>
-          <TypingIndicator {...typingIndicatorProps} />
+          <TypingIndicator typingUsers={transientTypingUsers} />
         </div>
         <ErrorBar />
         <SendBox {...sendBoxProps} />