Merge pull request #619 from GetStream/thread-typing-events

CRNS-196: Support typing events in threads

Author: vishalnarkhede

examples/SampleApp/src/screens/ThreadScreen.tsx

@@ -4,8 +4,10 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   Channel,
   Thread,
+  ThreadContextValue,
   useAttachmentPickerContext,
   useTheme,
+  useTypingString,
 } from 'stream-chat-react-native';
 
 import { ScreenHeader } from '../components/ScreenHeader';
@@ -34,6 +36,31 @@ type ThreadScreenRouteProp = RouteProp<StackNavigatorParamList, 'ThreadScreen'>;
 type ThreadScreenProps = {
   route: ThreadScreenRouteProp;
 };
+
+export type ThreadHeaderProps = {
+  thread: ThreadContextValue<
+    LocalAttachmentType,
+    LocalChannelType,
+    LocalCommandType,
+    LocalEventType,
+    LocalMessageType,
+    LocalReactionType,
+    LocalUserType
+  >['thread'];
+};
+
+const ThreadHeader: React.FC<ThreadHeaderProps> = ({ thread }) => {
+  const typing = useTypingString();
+
+  return (
+    <ScreenHeader
+      inSafeArea
+      titleText='Thread Reply'
+      subtitleText={typing ? typing : `with ${thread?.user?.name}`}
+    />
+  );
+};
+
 export const ThreadScreen: React.FC<ThreadScreenProps> = ({
   route: {
     params: { channel, thread },
@@ -68,11 +95,7 @@ export const ThreadScreen: React.FC<ThreadScreenProps> = ({
         thread={thread}
       >
         <View style={styles.container}>
-          <ScreenHeader
-            inSafeArea
-            subtitleText={`with ${thread?.user?.name}`}
-            titleText='Thread Reply'
-          />
+          <ThreadHeader thread={thread} />
           <Thread<
             LocalAttachmentType,
             LocalChannelType,

src/components/MessageList/TypingIndicatorContainer.tsx

@@ -1,11 +1,17 @@
 import React, { PropsWithChildren } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { filterTypingUsers } from './utils/filterTypingUsers';
+
 import {
   ChatContextValue,
   useChatContext,
 } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import {
+  ThreadContextValue,
+  useThreadContext,
+} from '../../contexts/threadContext/ThreadContext';
 import {
   TypingContextValue,
   useTypingContext,
@@ -39,7 +45,8 @@ type TypingIndicatorContainerPropsWithContext<
   Re extends UnknownType = DefaultReactionType,
   Us extends DefaultUserType = DefaultUserType
 > = Pick<TypingContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'typing'> &
-  Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'>;
+  Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> &
+  Pick<ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'thread'>;
 
 const TypingIndicatorContainerWithContext = <
   At extends UnknownType = DefaultAttachmentType,
@@ -54,19 +61,16 @@ const TypingIndicatorContainerWithContext = <
     TypingIndicatorContainerPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>
   >,
 ) => {
-  const { children, client, typing } = props;
+  const { children, client, thread, typing } = props;
 
   const {
     theme: {
       messageList: { typingIndicatorContainer },
     },
   } = useTheme();
-  const typingUsers = Object.values(typing);
+  const typingUsers = filterTypingUsers({ client, thread, typing });
 
-  if (
-    !typingUsers.length ||
-    (typingUsers.length === 1 && typingUsers[0].user?.id === client?.user?.id)
-  ) {
+  if (!typingUsers.length) {
     return null;
   }
 
@@ -107,9 +111,13 @@ export const TypingIndicatorContainer = <
 ) => {
   const { typing } = useTypingContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { thread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   return (
-    <TypingIndicatorContainerWithContext {...{ client, typing }} {...props} />
+    <TypingIndicatorContainerWithContext
+      {...{ client, thread, typing }}
+      {...props}
+    />
   );
 };
 

src/components/MessageList/hooks/useTypingString.ts

@@ -1,4 +1,7 @@
+import { filterTypingUsers } from '../utils/filterTypingUsers';
+
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useTypingContext } from '../../../contexts/typingContext/TypingContext';
 
@@ -23,34 +26,24 @@ export const useTypingString = <
   Us extends UnknownType = DefaultUserType
 >() => {
   const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { thread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { t } = useTranslationContext();
   const { typing } = useTypingContext<At, Ch, Co, Ev, Me, Re, Us>();
 
-  const typingKeys = Object.keys(typing);
-  const nonSelfUsers: string[] = [];
-  typingKeys.forEach((typingKey) => {
-    if (client?.user?.id === typing?.[typingKey]?.user?.id) {
-      return;
-    }
-    const user =
-      typing?.[typingKey]?.user?.name || typing?.[typingKey]?.user?.id;
-    if (user) {
-      nonSelfUsers.push(user);
-    }
-  });
+  const filteredTypingUsers = filterTypingUsers({ client, thread, typing });
 
-  if (nonSelfUsers.length === 1) {
-    return t('{{ user }} is typing', { user: nonSelfUsers[0] });
+  if (filteredTypingUsers.length === 1) {
+    return t('{{ user }} is typing', { user: filteredTypingUsers[0] });
   }
 
-  if (nonSelfUsers.length > 1) {
+  if (filteredTypingUsers.length > 1) {
     /**
      * Joins the multiple names with number after first name
      * example: "Dan and Neil"
      */
     return t('{{ firstUser }} and {{ nonSelfUserLength }} more are typing', {
-      firstUser: nonSelfUsers[0],
-      nonSelfUserLength: nonSelfUsers.length - 1,
+      firstUser: filteredTypingUsers[0],
+      nonSelfUserLength: filteredTypingUsers.length - 1,
     });
   }
 

src/components/MessageList/utils/filterTypingUsers.ts

@@ -0,0 +1,69 @@
+import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
+import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
+import type { TypingContextValue } from '../../../contexts/typingContext/TypingContext';
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../../types/types';
+
+type FilterTypingUsersParams<
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends UnknownType = DefaultUserType
+> = Pick<TypingContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'typing'> &
+  Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> &
+  Pick<ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'thread'>;
+
+export const filterTypingUsers = <
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends UnknownType = DefaultUserType
+>({
+  client,
+  thread,
+  typing,
+}: FilterTypingUsersParams<At, Ch, Co, Ev, Me, Re, Us>) => {
+  const nonSelfUsers: string[] = [];
+
+  if (!client || !client.user || !typing) return nonSelfUsers;
+
+  const typingKeys = Object.keys(typing);
+
+  typingKeys.forEach((typingKey) => {
+    if (!typing[typingKey]) return;
+
+    /** removes own typing events */
+    if (client.user?.id === typing[typingKey].user?.id) {
+      return;
+    }
+
+    const isRegularEvent = !typing[typingKey].parent_id && !thread?.id;
+    const isCurrentThreadEvent = typing[typingKey].parent_id === thread?.id;
+
+    /** filters different threads events */
+    if (!isRegularEvent && !isCurrentThreadEvent) {
+      return;
+    }
+
+    const user = typing[typingKey].user?.name || typing[typingKey].user?.id;
+    if (user) {
+      nonSelfUsers.push(user);
+    }
+  });
+
+  return nonSelfUsers;
+};

src/contexts/messageInputContext/MessageInputContext.tsx

@@ -547,7 +547,10 @@ export const MessageInputProvider = <
     setText(newText);
 
     if (newText && channel) {
-      logChatPromiseExecution(channel.keystroke(), 'start typing event');
+      logChatPromiseExecution(
+        channel.keystroke(thread?.id),
+        'start typing event',
+      );
     }
 
     if (value.onChangeText) {