feat: typing indicator (#3436)

## 🎯 Goal

This PR implements the new designs for the typing indicator in both
`MessageList` and `MessageFlashList`.

While it was relatively trivial for `MessageList`, on `MessageFlashList`
there is no automatic autoscroll if footer layout changes. Hence, we
have to write an adapter to do this manually.

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: isekovanic

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -11,7 +11,6 @@ import {
   useChannelPreviewDisplayName,
   useChatContext,
   useTheme,
-  useTypingString,
   AITypingIndicatorView,
   useTranslationContext,
   MessageActionsParams,
@@ -56,7 +55,6 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channel }) => {
   const { isOnline } = useChatContext();
   const { chatClient } = useAppContext();
   const navigation = useNavigation<ChannelScreenNavigationProp>();
-  const typing = useTypingString();
 
   const isOneOnOneConversation =
     channel &&
@@ -108,7 +106,7 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channel }) => {
       )}
       showUnreadCountBadge
       Subtitle={isOnline ? undefined : NetworkDownIndicator}
-      subtitleText={typing ? typing : membersStatus}
+      subtitleText={membersStatus}
       titleText={displayName}
     />
   );
@@ -229,7 +227,6 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
         channel={channel}
         messageInputFloating={messageInputFloating}
         onPressMessage={onPressMessage}
-        disableTypingIndicator
         initialScrollToFirstUnreadMessage
         keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : -300}
         messageActions={messageActions}

package/src/components/MessageInput/MessageInput.tsx

@@ -69,6 +69,11 @@ const useStyles = () => {
   } = useTheme();
   return useMemo(() => {
     return StyleSheet.create({
+      autocompleteInputContainer: {
+        flex: 1,
+        flexShrink: 1,
+        minWidth: 0,
+      },
       pollModalWrapper: {
         alignItems: 'center',
         flex: 1,
@@ -418,7 +423,10 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                     <>
                       <MessageInputLeadingView />
 
-                      <Animated.View layout={LinearTransition.duration(200)}>
+                      <Animated.View
+                        style={styles.autocompleteInputContainer}
+                        layout={LinearTransition.duration(200)}
+                      >
                         <AutoCompleteInput
                           TextInputComponent={TextInputComponent}
                           {...additionalTextInputProps}

package/src/components/MessageList/MessageFlashList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   LayoutChangeEvent,
   ScrollViewProps,
@@ -10,11 +10,12 @@ import {
 
 import Animated, { LinearTransition } from 'react-native-reanimated';
 
-import type { FlashListProps, FlashListRef } from '@shopify/flash-list';
+import { FlashListProps, FlashListRef, useFlashListContext } from '@shopify/flash-list';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useMessageList } from './hooks/useMessageList';
 import { useShouldScrollToRecentOnNewOwnMessage } from './hooks/useShouldScrollToRecentOnNewOwnMessage';
+import { useTypingUsers } from './hooks/useTypingUsers';
 import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
 import { InlineLoadingMoreRecentIndicator } from './InlineLoadingMoreRecentIndicator';
 import { InlineLoadingMoreRecentThreadIndicator } from './InlineLoadingMoreRecentThreadIndicator';
@@ -274,7 +275,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     disableTypingIndicator,
     EmptyStateIndicator,
     // FlatList,
-    FooterComponent = LoadingMoreRecentIndicator,
+    FooterComponent,
     HeaderComponent = InlineLoadingMoreIndicator,
     hideStickyDateHeader,
     isLiveStreaming = false,
@@ -1002,6 +1003,29 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     currentListHeightRef.current = height;
   });
 
+  const ListFooterComponent = useCallback(() => {
+    if (FooterComponent) {
+      return <FooterComponent />;
+    }
+
+    return (
+      <FlashListFooterTypingAdapter enabled={!disableTypingIndicator && !!TypingIndicator}>
+        <LoadingMoreRecentIndicator />
+        {!disableTypingIndicator && TypingIndicator && (
+          <TypingIndicatorContainer>
+            <TypingIndicator />
+          </TypingIndicatorContainer>
+        )}
+      </FlashListFooterTypingAdapter>
+    );
+  }, [
+    FooterComponent,
+    LoadingMoreRecentIndicator,
+    TypingIndicator,
+    TypingIndicatorContainer,
+    disableTypingIndicator,
+  ]);
+
   if (loading) {
     return (
       <View style={styles.container}>
@@ -1034,7 +1058,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
             }
             keyboardShouldPersistTaps='handled'
             keyExtractor={keyExtractor}
-            ListFooterComponent={FooterComponent}
+            ListFooterComponent={ListFooterComponent}
             ListHeaderComponent={HeaderComponent}
             maintainVisibleContentPosition={maintainVisibleContentPosition}
             onMomentumScrollEnd={onUserScrollEvent}
@@ -1060,11 +1084,6 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
           <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
         ) : null}
       </View>
-      {!disableTypingIndicator && TypingIndicator && (
-        <TypingIndicatorContainer>
-          <TypingIndicator />
-        </TypingIndicatorContainer>
-      )}
       <Animated.View
         layout={LinearTransition.duration(200)}
         style={[
@@ -1088,6 +1107,49 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
   );
 };
 
+/**
+ * Unfortunately, FlashList does not handle autoscrolling if the footer changes properly. Because
+ * of that, we calculate this manually and autoscroll to the bottom if we're near the end. We only
+ * do this if the typing indicator is about to be rendered for now. Later on we can rely on proper
+ * layout calculations.
+ */
+const FlashListFooterTypingAdapter = ({
+  enabled,
+  children,
+}: PropsWithChildren<{
+  enabled: boolean;
+}>) => {
+  const api = useFlashListContext();
+  const typingUsers = useTypingUsers();
+
+  const typingUsersLengthRef = useRef<number>(typingUsers.length);
+
+  useEffect(() => {
+    const listApi = api?.getRef();
+
+    if (!enabled || !listApi) {
+      return;
+    }
+
+    const lastScrollOffset = listApi.getAbsoluteLastScrollOffset();
+    const contentSize = listApi.getChildContainerDimensions();
+    const windowSize = listApi.getWindowSize();
+
+    const visibleLength = windowSize.height;
+    const contentLength = contentSize.height + listApi.getFirstItemOffset();
+
+    const isNearEnd = Math.ceil(lastScrollOffset + visibleLength) >= contentLength;
+
+    if (listApi && typingUsersLengthRef.current === 0 && typingUsers.length > 0 && isNearEnd) {
+      listApi.scrollToEnd({ animated: true });
+    }
+
+    typingUsersLengthRef.current = typingUsers.length;
+  }, [enabled, api, typingUsers.length]);
+
+  return children;
+};
+
 export type MessageFlashListProps = Partial<MessageFlashListPropsWithContext>;
 
 /**

package/src/components/MessageList/MessageList.tsx

@@ -329,7 +329,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     EmptyStateIndicator,
     FlatList,
     FooterComponent = InlineLoadingMoreIndicator,
-    HeaderComponent = LoadingMoreRecentIndicator,
+    HeaderComponent,
     hideStickyDateHeader,
     inverted = true,
     isLiveStreaming = false,
@@ -1214,6 +1214,29 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     viewportHeightRef.current = nextViewportHeight;
   });
 
+  const ListHeaderComponent = useCallback(() => {
+    if (HeaderComponent) {
+      return <HeaderComponent />;
+    }
+
+    return (
+      <>
+        <LoadingMoreRecentIndicator />
+        {!disableTypingIndicator && TypingIndicator && (
+          <TypingIndicatorContainer>
+            <TypingIndicator />
+          </TypingIndicatorContainer>
+        )}
+      </>
+    );
+  }, [
+    HeaderComponent,
+    LoadingMoreRecentIndicator,
+    TypingIndicator,
+    TypingIndicatorContainer,
+    disableTypingIndicator,
+  ]);
+
   if (!ListComponent) {
     return null;
   }
@@ -1247,7 +1270,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
             keyboardShouldPersistTaps='handled'
             keyExtractor={keyExtractor}
             ListFooterComponent={FooterComponent}
-            ListHeaderComponent={HeaderComponent}
+            ListHeaderComponent={ListHeaderComponent}
             /**
             If autoscrollToTopThreshold is 10, we scroll to recent only if before the update, the list was already at the
             bottom (10 offset or below).
@@ -1283,11 +1306,6 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           <StickyHeader date={stickyHeaderDate} DateHeader={DateHeader} />
         ) : null}
       </View>
-      {!disableTypingIndicator && TypingIndicator && (
-        <TypingIndicatorContainer>
-          <TypingIndicator />
-        </TypingIndicatorContainer>
-      )}
       {scrollToBottomButtonVisible ? (
         <Animated.View
           layout={LinearTransition.duration(200)}

package/src/components/MessageList/TypingIndicator.tsx

@@ -1,43 +1,63 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
 
-import { useTypingString } from './hooks/useTypingString';
+import { useTypingUsers } from './hooks/useTypingUsers';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
+import { components, primitives } from '../../theme';
 import { LoadingDots } from '../Indicators/LoadingDots';
+import { UserAvatarStack } from '../ui';
 
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    height: 24,
-    justifyContent: 'flex-start',
-  },
-  loadingDots: {
-    marginLeft: 8,
-  },
-  typingText: {
-    marginLeft: 8,
-  },
-});
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          justifyContent: 'flex-start',
+          gap: primitives.spacingXs,
+        },
+        loadingDots: {},
+        loadingDotsBubble: {
+          borderTopLeftRadius: components.messageBubbleRadiusGroupBottom,
+          borderTopRightRadius: components.messageBubbleRadiusGroupBottom,
+          borderBottomRightRadius: components.messageBubbleRadiusGroupBottom,
+          borderBottomLeftRadius: components.messageBubbleRadiusTail,
+          backgroundColor: semantics.chatBgIncoming,
+          paddingVertical: primitives.spacingMd,
+          paddingHorizontal: primitives.spacingSm,
+        },
+        avatarStackContainer: {
+          paddingTop: primitives.spacingXxs,
+        },
+      }),
+    [semantics],
+  );
+};
 
 export const TypingIndicator = () => {
   const {
     theme: {
-      colors: { grey, white_snow },
-      typingIndicator: { container, text },
+      typingIndicator: { container, loadingDotsBubble, avatarStackContainer },
     },
   } = useTheme();
-  const typingString = useTypingString();
+  const styles = useStyles();
+
+  const typingUsers = useTypingUsers();
 
   return (
-    <View
-      style={[styles.container, { backgroundColor: `${white_snow}E6` }, container]}
-      testID='typing-indicator'
-    >
-      <LoadingDots style={styles.loadingDots} />
-      <Text style={[styles.typingText, { color: grey }, text]}>{typingString}</Text>
+    <View style={[styles.container, container]} testID='typing-indicator'>
+      <View style={[styles.avatarStackContainer, avatarStackContainer]}>
+        <UserAvatarStack users={typingUsers} avatarSize='md' maxVisible={3} overlap={0.4} />
+      </View>
+      <View style={[styles.loadingDotsBubble, loadingDotsBubble]}>
+        <LoadingDots style={styles.loadingDots} />
+      </View>
     </View>
   );
 };

package/src/components/MessageList/TypingIndicatorContainer.tsx

@@ -7,11 +7,12 @@ import { ChatContextValue, useChatContext } from '../../contexts/chatContext/Cha
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 import { TypingContextValue, useTypingContext } from '../../contexts/typingContext/TypingContext';
+import { primitives } from '../../theme';
 
 const styles = StyleSheet.create({
   container: {
-    bottom: 0,
-    position: 'absolute',
+    paddingVertical: primitives.spacingXs,
+    paddingHorizontal: primitives.spacingMd,
     width: '100%',
   },
 });