feat: add typing indicator bubble ui and logic

Author: bang9

packages/uikit-react-native-foundation/src/index.ts

@@ -26,14 +26,14 @@ export { default as BottomSheet } from './ui/BottomSheet';
 export { default as Button } from './ui/Button';
 export { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';
 export { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';
+export { default as GroupChannelMessage } from './ui/GroupChannelMessage';
+export type { GroupChannelMessageProps } from './ui/GroupChannelMessage';
+export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
 export { default as MenuBar } from './ui/MenuBar';
 export type { MenuBarProps } from './ui/MenuBar';
-export { default as GroupChannelMessage } from './ui/GroupChannelMessage';
-export type { GroupChannelMessageProps } from './ui/GroupChannelMessage';
-export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
-
+export { default as MessageTypingBubble } from './ui/MessageTypingBubble';
 export { default as OpenChannelMessage } from './ui/OpenChannelMessage';
 export type { OpenChannelMessageProps } from './ui/OpenChannelMessage';
 export { default as OpenChannelPreview } from './ui/OpenChannelPreview';

packages/uikit-react-native-foundation/src/ui/Avatar/AvatarStack.tsx

@@ -0,0 +1,95 @@
+import React, { ReactElement } from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import Text from '../../components/Text';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+const DEFAULT_MAX = 3;
+const DEFAULT_BORDER_WIDTH = 2;
+const DEFAULT_AVATAR_GAP = -4;
+const DEFAULT_AVATAR_SIZE = 26;
+const DEFAULT_REMAINS_MAX = 99;
+
+type Props = React.PropsWithChildren<{
+  size?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  maxAvatar?: number;
+  avatarGap?: number;
+  styles?: {
+    borderWidth?: number;
+    borderColor?: string;
+  };
+}>;
+
+const AvatarStack = ({
+  children,
+  containerStyle,
+  styles,
+  maxAvatar = DEFAULT_MAX,
+  size = DEFAULT_AVATAR_SIZE,
+  avatarGap = DEFAULT_AVATAR_GAP,
+}: Props) => {
+  const { colors, palette } = useUIKitTheme();
+  const defaultStyles = { borderWidth: DEFAULT_BORDER_WIDTH, borderColor: colors.background };
+  const avatarStyles = { ...defaultStyles, ...styles };
+
+  const childrenArray = React.Children.toArray(children).filter((it) => React.isValidElement(it));
+  const remains = childrenArray.length - maxAvatar;
+  const shouldRenderRemains = remains > 0;
+
+  const actualGap = avatarGap - avatarStyles.borderWidth;
+
+  const renderAvatars = () => {
+    return childrenArray.slice(0, maxAvatar).map((child, index) =>
+      React.cloneElement(child as ReactElement, {
+        size,
+        containerStyle: {
+          left: actualGap * index,
+          borderWidth: avatarStyles.borderWidth,
+          borderColor: avatarStyles.borderColor,
+        },
+      }),
+    );
+  };
+
+  const renderRemainsCount = () => {
+    if (!shouldRenderRemains) return null;
+    return (
+      <View
+        style={[
+          avatarStyles,
+          {
+            left: actualGap * maxAvatar,
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: palette.background100,
+          },
+        ]}
+      >
+        <Text style={{ color: colors.onBackground02, fontSize: 8 }} caption4>
+          {`+${Math.min(remains, DEFAULT_REMAINS_MAX)}`}
+        </Text>
+      </View>
+    );
+  };
+
+  const calculateWidth = () => {
+    const widthEach = size + actualGap;
+    const avatarCountOffset = shouldRenderRemains ? 1 : 0;
+    const avatarCount = shouldRenderRemains ? maxAvatar : childrenArray.length;
+    const count = avatarCount + avatarCountOffset;
+    return widthEach * count - actualGap;
+  };
+
+  return (
+    <View style={[containerStyle, { flexDirection: 'row', width: calculateWidth() }]}>
+      {renderAvatars()}
+      {renderRemainsCount()}
+    </View>
+  );
+};
+
+export default AvatarStack;

packages/uikit-react-native-foundation/src/ui/Avatar/index.tsx

@@ -9,6 +9,7 @@ import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import AvatarGroup from './AvatarGroup';
 import AvatarIcon from './AvatarIcon';
+import AvatarStack from './AvatarStack';
 
 type Props = {
   uri?: string;
@@ -68,4 +69,5 @@ const styles = createStyleSheet({
 export default Object.assign(Avatar, {
   Group: AvatarGroup,
   Icon: AvatarIcon,
+  Stack: AvatarStack,
 });

packages/uikit-react-native-foundation/src/ui/MessageTypingBubble/index.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleProp, ViewStyle } from 'react-native';
+
+import type { SendbirdUser } from '@sendbird/uikit-utils';
+
+import Box from '../../components/Box';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Avatar from '../Avatar';
+
+type Props = {
+  typingUsers: SendbirdUser[];
+  containerStyle?: StyleProp<ViewStyle>;
+  styles?: {};
+
+  maxAvatar?: number;
+};
+
+const MessageTypingBubble = ({ typingUsers, containerStyle, maxAvatar }: Props) => {
+  if (typingUsers.length === 0) return null;
+
+  return (
+    <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'center'} style={containerStyle}>
+      <Avatar.Stack size={26} maxAvatar={maxAvatar} containerStyle={{ marginRight: 12 }}>
+        {typingUsers.map((user, index) => (
+          <Avatar key={index} uri={user.profileUrl} />
+        ))}
+      </Avatar.Stack>
+      <TypingDots />
+    </Box>
+  );
+};
+
+const TypingDots = () => {
+  const { select, palette, colors } = useUIKitTheme();
+  const animation = useRef(new Animated.Value(0)).current;
+  const dots = matrix.map(([timeline, scale, opacity]) => [
+    animation.interpolate({ inputRange: timeline, outputRange: scale, extrapolate: 'clamp' }),
+    animation.interpolate({ inputRange: timeline, outputRange: opacity, extrapolate: 'clamp' }),
+  ]);
+
+  useEffect(() => {
+    const animated = Animated.loop(
+      Animated.timing(animation, { toValue: 1.4, duration: 1400, easing: Easing.linear, useNativeDriver: true }),
+    );
+    animated.start();
+    return () => animated.reset();
+  }, []);
+
+  return (
+    <Box
+      flexDirection={'row'}
+      alignItems={'center'}
+      justifyContent={'center'}
+      borderRadius={16}
+      paddingHorizontal={12}
+      height={34}
+      backgroundColor={select({ light: palette.background100, dark: palette.background600 })}
+    >
+      {dots.map(([scale, opacity], index) => {
+        return (
+          <Animated.View
+            key={index}
+            style={[
+              styles.dot,
+              {
+                marginRight: index === dots.length - 1 ? 0 : 6,
+                opacity: opacity,
+                transform: [{ scale: scale }],
+                backgroundColor: colors.onBackground02,
+              },
+            ]}
+          />
+        );
+      })}
+    </Box>
+  );
+};
+
+const matrix = [
+  [
+    [0.4, 0.7, 1.0],
+    [1.0, 1.2, 1.0],
+    [0.12, 0.38, 0.12],
+  ],
+  [
+    [0.6, 0.9, 1.2],
+    [1.0, 1.2, 1.0],
+    [0.12, 0.38, 0.12],
+  ],
+  [
+    [0.8, 1.1, 1.4],
+    [1.0, 1.2, 1.0],
+    [0.12, 0.38, 0.12],
+  ],
+];
+
+const styles = createStyleSheet({
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+});
+
+export default MessageTypingBubble;

packages/uikit-react-native/package.json

@@ -61,7 +61,7 @@
   "dependencies": {
     "@sendbird/uikit-chat-hooks": "3.2.0",
     "@sendbird/uikit-react-native-foundation": "3.2.0",
-    "@sendbird/uikit-tools": "^0.0.1-alpha.38",
+    "@sendbird/uikit-tools": "0.0.1-alpha.42",
     "@sendbird/uikit-utils": "3.2.0"
   },
   "devDependencies": {

packages/uikit-react-native/src/components/ChannelMessageList/index.tsx

@@ -76,6 +76,7 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
     currentUserId?: ChannelMessageListProps<T>['currentUserId'];
     enableMessageGrouping: ChannelMessageListProps<T>['enableMessageGrouping'];
     bottomSheetItem?: BottomSheetItem;
+    isFirstItem: boolean;
   }) => React.ReactElement | null;
   renderNewMessagesButton: null | CommonComponent<{
     visible: boolean;
@@ -150,6 +151,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
       currentUserId,
       focused: (searchItem?.startingPoint ?? -1) === item.createdAt,
       bottomSheetItem,
+      isFirstItem: index === 0,
     });
   });
 

packages/uikit-react-native/src/components/GroupChannelMessageRenderer/index.tsx

@@ -1,7 +1,13 @@
-import React, { useRef } from 'react';
+import React, { useContext, useRef } from 'react';
 
 import type { GroupChannelMessageProps, RegexTextPattern } from '@sendbird/uikit-react-native-foundation';
-import { Box, GroupChannelMessage, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import {
+  Box,
+  GroupChannelMessage,
+  MessageTypingBubble,
+  Text,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
 import {
   SendbirdAdminMessage,
   SendbirdFileMessage,
@@ -17,6 +23,7 @@ import {
 } from '@sendbird/uikit-utils';
 
 import { VOICE_MESSAGE_META_ARRAY_DURATION_KEY } from '../../constants';
+import { GroupChannelContexts } from '../../domain/groupChannel/module/moduleContext';
 import type { GroupChannelProps } from '../../domain/groupChannel/types';
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
 import SBUUtils from '../../libs/SBUUtils';
@@ -37,7 +44,9 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
   focused,
   prevMessage,
   nextMessage,
+  isFirstItem,
 }) => {
+  const { typingUsers } = useContext(GroupChannelContexts.TypingIndicator);
   const playerUnsubscribes = useRef<(() => void)[]>([]);
   const { palette } = useUIKitTheme();
   const { sbOptions, currentUser, mentionManager } = useSendbirdChat();
@@ -284,10 +293,19 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     }
   });
 
+  const renderTypingBubble = () => {
+    if (!isFirstItem) return null;
+    if (!sbOptions.uikit.groupChannel.channel.enableTypingIndicator) return null;
+    if (!sbOptions.uikit.groupChannel.channel.typingIndicatorTypes.has('bubble')) return null;
+
+    return <MessageTypingBubble typingUsers={typingUsers} containerStyle={{ marginTop: 20 }} />;
+  };
+
   return (
     <Box paddingHorizontal={16} marginBottom={messageGap}>
       <GroupChannelMessageDateSeparator message={message} prevMessage={prevMessage} />
       <GroupChannelMessageFocusAnimation focused={focused}>{renderMessage()}</GroupChannelMessageFocusAnimation>
+      {renderTypingBubble()}
     </Box>
   );
 };

packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelHeader.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import { Header, Icon, createStyleSheet, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
 
 import ChannelCover from '../../../components/ChannelCover';
-import { useLocalization } from '../../../hooks/useContext';
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
 
@@ -13,11 +13,21 @@ const GroupChannelHeader = ({
   onPressHeaderLeft,
   onPressHeaderRight,
 }: GroupChannelProps['Header']) => {
+  const { sbOptions } = useSendbirdChat();
   const { headerTitle, channel } = useContext(GroupChannelContexts.Fragment);
   const { typingUsers } = useContext(GroupChannelContexts.TypingIndicator);
   const { STRINGS } = useLocalization();
   const { HeaderComponent } = useHeaderStyle();
-  const subtitle = STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers);
+
+  const renderSubtitle = () => {
+    const subtitle = STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers);
+
+    if (!subtitle) return null;
+    if (!sbOptions.uikit.groupChannel.channel.enableTypingIndicator) return null;
+    if (!sbOptions.uikit.groupChannel.channel.typingIndicatorTypes.has('text')) return null;
+
+    return <Header.Subtitle style={styles.subtitle}>{subtitle}</Header.Subtitle>;
+  };
 
   const isHidden = shouldHideRight();
 
@@ -29,7 +39,7 @@ const GroupChannelHeader = ({
           <ChannelCover channel={channel} size={34} containerStyle={styles.avatarGroup} />
           <View style={{ flexShrink: 1 }}>
             <Header.Title h2>{headerTitle}</Header.Title>
-            {Boolean(subtitle) && subtitle && <Header.Subtitle style={styles.subtitle}>{subtitle}</Header.Subtitle>}
+            {renderSubtitle()}
           </View>
         </View>
       }

packages/uikit-utils/src/types.ts

@@ -60,7 +60,9 @@ export type UnionToIntersection<U> = (U extends unknown ? (k: U) => void : never
 export type OmittedValues<T, K extends keyof T> = Omit<T, K>[keyof Omit<T, K>];
 
 export type PartialDeep<T> = T extends object
-  ? T extends Function
+  ? T extends Set<unknown>
+    ? T
+    : T extends Function
     ? T
     : {
         [P in keyof T]?: PartialDeep<T[P]>;

sample/src/App.tsx

@@ -60,6 +60,7 @@ const App = () => {
         },
         groupChannel: {
           enableMention: true,
+          typingIndicatorTypes: new Set(['bubble']),
         },
         groupChannelList: {
           enableTypingIndicator: true,