@sendbird/uikit-react-native 3.5.4 → 3.7.0

package/src/components/ReactionAddons/MessageReactionAddon.tsx

@@ -3,6 +3,7 @@ import { Pressable } from 'react-native';
 
 import type { Emoji } from '@sendbird/chat';
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';
 import type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';
 import { getReactionCount } from '@sendbird/uikit-utils';
 
@@ -12,6 +13,7 @@ import ReactionRoundedButton from './ReactionRoundedButton';
 
 const NUM_COL = 4;
 const REACTION_MORE_KEY = 'reaction-more-button';
+export type ReactionAddonType = 'default' | 'thread_parent_message';
 
 const getUserReacted = (reaction: SendbirdReaction, userId = UNKNOWN_USER_ID) => {
   return reaction.userIds.indexOf(userId) > -1;
@@ -40,6 +42,7 @@ const createReactionButtons = (
   onOpenReactionList: () => void,
   onOpenReactionUserList: (focusIndex: number) => void,
   currentUserId?: string,
+  reactionAddonType?: ReactionAddonType,
 ) => {
   const reactions = message.reactions ?? [];
   const buttons = reactions.map((reaction, index) => {
@@ -57,7 +60,11 @@ const createReactionButtons = (
             url={getEmoji(reaction.key).url}
             count={getReactionCount(reaction)}
             reacted={pressed || getUserReacted(reaction, currentUserId)}
-            style={[isNotLastOfRow && styles.marginRight, isNotLastOfCol && styles.marginBottom]}
+            style={
+              reactionAddonType === 'default'
+                ? [isNotLastOfRow && styles.marginRight, isNotLastOfCol && styles.marginBottom]
+                : [styles.marginRight, styles.marginBottom]
+            }
           />
         )}
       </Pressable>
@@ -74,12 +81,30 @@ const createReactionButtons = (
   return buttons;
 };
 
-const MessageReactionAddon = ({ channel, message }: { channel: SendbirdBaseChannel; message: SendbirdBaseMessage }) => {
+const MessageReactionAddon = ({
+  channel,
+  message,
+  reactionAddonType = 'default',
+}: {
+  channel: SendbirdBaseChannel;
+  message: SendbirdBaseMessage;
+  reactionAddonType?: ReactionAddonType;
+}) => {
   const { colors } = useUIKitTheme();
-  const { emojiManager, currentUser } = useSendbirdChat();
+  const { sdk, emojiManager, currentUser } = useSendbirdChat();
   const { openReactionList, openReactionUserList } = useReaction();
+  const forceUpdate = useForceUpdate();
 
-  if (!message.reactions?.length) return null;
+  useGroupChannelHandler(sdk, {
+    async onReactionUpdated(_, event) {
+      if (event.messageId === message.messageId) {
+        message.applyReactionEvent(event);
+        forceUpdate();
+      }
+    },
+  });
+
+  if (reactionAddonType === 'default' && !message.reactions?.length) return null;
 
   const reactionButtons = createReactionButtons(
     channel,
@@ -89,12 +114,16 @@ const MessageReactionAddon = ({ channel, message }: { channel: SendbirdBaseChann
     () => openReactionList({ channel, message }),
     (focusIndex) => openReactionUserList({ channel, message, focusIndex }),
     currentUser?.userId,
+    reactionAddonType,
   );
 
+  const containerStyle =
+    reactionAddonType === 'default' ? styles.reactionContainer : styles.reactionThreadParentMessageContainer;
+
   return (
     <Pressable
       style={[
-        styles.reactionContainer,
+        containerStyle,
         { backgroundColor: colors.background, borderColor: colors.ui.reaction.rounded.enabled.background },
       ]}
     >
@@ -112,6 +141,10 @@ const styles = createStyleSheet({
     borderRadius: 16,
     borderWidth: 1,
   },
+  reactionThreadParentMessageContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
   marginRight: {
     marginRight: 4.5,
   },

package/src/components/ThreadChatFlatList/index.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef, useRef } from 'react';
+import { FlatListProps, FlatList as RNFlatList, StyleSheet } from 'react-native';
+
+import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { NOOP, SendbirdMessage, getMessageUniqId, useFreshCallback } from '@sendbird/uikit-utils';
+
+import FlatListInternal from '../ChatFlatList/FlatListInternal';
+
+const BOTTOM_DETECT_THRESHOLD = 50;
+const UNREACHABLE_THRESHOLD = Number.MIN_SAFE_INTEGER;
+
+type Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {
+  onBottomReached: () => void;
+  onTopReached: () => void;
+  onScrolledAwayFromBottom: (value: boolean) => void;
+};
+const ThreadChatFlatList = forwardRef<RNFlatList, Props>(function ThreadChatFlatList(
+  { onTopReached, onBottomReached, onScrolledAwayFromBottom, onScroll, ...props },
+  ref,
+) {
+  const { select } = useUIKitTheme();
+  const contentOffsetY = useRef(0);
+
+  const _onScroll = useFreshCallback<NonNullable<Props['onScroll']>>((event) => {
+    onScroll?.(event);
+
+    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+
+    const prevOffsetY = contentOffsetY.current;
+    const currOffsetY = contentOffset.y;
+
+    const bottomDetectThreshold = contentSize.height - layoutMeasurement.height - BOTTOM_DETECT_THRESHOLD;
+    if (bottomDetectThreshold < prevOffsetY && currOffsetY <= bottomDetectThreshold) {
+      onScrolledAwayFromBottom(true);
+    } else if (bottomDetectThreshold < currOffsetY && prevOffsetY <= bottomDetectThreshold) {
+      onScrolledAwayFromBottom(false);
+    }
+
+    contentOffsetY.current = contentOffset.y;
+  });
+
+  return (
+    <FlatListInternal
+      bounces={false}
+      removeClippedSubviews
+      keyboardDismissMode={'on-drag'}
+      keyboardShouldPersistTaps={'handled'}
+      indicatorStyle={select({ light: 'black', dark: 'white' })}
+      {...props}
+      ref={ref}
+      onEndReached={onBottomReached}
+      onScrollToIndexFailed={NOOP}
+      onStartReached={onTopReached}
+      scrollEventThrottle={16}
+      onScroll={_onScroll}
+      keyExtractor={getMessageUniqId}
+      style={{ flex: 1, ...StyleSheet.flatten(props.style) }}
+      maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: UNREACHABLE_THRESHOLD }}
+    />
+  );
+});
+
+export default ThreadChatFlatList;

package/src/components/ThreadParentMessageRenderer/ThreadParentMessage.file.image.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { Box, PressBox, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import { ImageWithPlaceholder } from '@sendbird/uikit-react-native-foundation';
+import { SendbirdFileMessage, getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
+
+import { ThreadParentMessageRendererProps } from './index';
+
+const ThreadParentMessageFileImage = (props: ThreadParentMessageRendererProps) => {
+  const fileMessage: SendbirdFileMessage = props.parentMessage as SendbirdFileMessage;
+  if (!fileMessage) return null;
+
+  return (
+    <Box style={styles.container}>
+      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>
+        <ImageWithPlaceholder source={{ uri: getThumbnailUriFromFileMessage(fileMessage) }} style={styles.image} />
+      </PressBox>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  image: {
+    maxWidth: 240,
+    width: 240,
+    height: 160,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+});
+
+export default ThreadParentMessageFileImage;

package/src/components/ThreadParentMessageRenderer/ThreadParentMessage.file.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { Box, Icon, PressBox, Text, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { SendbirdFileMessage, getFileExtension, getFileType, truncate } from '@sendbird/uikit-utils';
+
+import { useLocalization } from './../../hooks/useContext';
+import { ThreadParentMessageRendererProps } from './index';
+
+const ThreadParentMessageFile = (props: ThreadParentMessageRendererProps) => {
+  const fileMessage: SendbirdFileMessage = props.parentMessage as SendbirdFileMessage;
+  if (!fileMessage) return null;
+
+  const { STRINGS } = useLocalization();
+  const { select, colors, palette } = useUIKitTheme();
+
+  const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.name));
+  const fileName = STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(fileMessage) ?? fileMessage.name;
+
+  return (
+    <Box
+      style={styles.fileBubbleContainer}
+      backgroundColor={select({ light: palette.background100, dark: palette.background400 })}
+    >
+      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>
+        <Box style={styles.iconBackground}>
+          <Icon.File
+            fileType={fileType}
+            size={24}
+            containerStyle={{ backgroundColor: palette.background50, borderRadius: 8 }}
+          />
+          <Text body3 numberOfLines={1} color={colors.onBackground01} style={styles.name}>
+            {truncate(fileName, { mode: 'mid', maxLen: 30 })}
+          </Text>
+        </Box>
+      </PressBox>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  fileBubbleContainer: {
+    alignSelf: 'flex-start',
+    overflow: 'hidden',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 16,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  iconBackground: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  name: {
+    flexShrink: 1,
+    marginLeft: 8,
+  },
+});
+
+export default ThreadParentMessageFile;

package/src/components/ThreadParentMessageRenderer/ThreadParentMessage.file.video.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { Box, PressBox, VideoThumbnail, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import { SendbirdFileMessage, getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
+
+import { ThreadParentMessageRendererProps } from './index';
+
+type Props = ThreadParentMessageRendererProps<{
+  fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;
+}>;
+
+const ThreadParentMessageFileVideo = (props: Props) => {
+  const fileMessage: SendbirdFileMessage = props.parentMessage as SendbirdFileMessage;
+  if (!fileMessage) return null;
+
+  const uri = getThumbnailUriFromFileMessage(fileMessage);
+
+  return (
+    <Box style={styles.container}>
+      <PressBox activeOpacity={0.8} onPress={props.onPress} onLongPress={props.onLongPress}>
+        <VideoThumbnail
+          style={styles.image}
+          source={uri}
+          fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}
+        />
+      </PressBox>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  image: {
+    maxWidth: 240,
+    width: 240,
+    height: 160,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+});
+
+export default ThreadParentMessageFileVideo;

package/src/components/ThreadParentMessageRenderer/ThreadParentMessage.file.voice.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+
+import { Box, Icon, PressBox, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { LoadingSpinner, ProgressBar } from '@sendbird/uikit-react-native-foundation';
+import { createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import { SendbirdFileMessage, millsToMSS } from '@sendbird/uikit-utils';
+
+import { ThreadParentMessageRendererProps } from './index';
+
+export type VoiceFileMessageState = {
+  status: 'preparing' | 'playing' | 'paused';
+  currentTime: number;
+  duration: number;
+};
+
+type Props = ThreadParentMessageRendererProps<{
+  durationMetaArrayKey?: string;
+  onUnmount: () => void;
+}>;
+
+const ThreadParentMessageFileVoice = (props: Props) => {
+  const {
+    onLongPress,
+    onToggleVoiceMessage,
+    parentMessage,
+    durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
+    onUnmount,
+  } = props;
+
+  const fileMessage: SendbirdFileMessage = parentMessage as SendbirdFileMessage;
+  if (!fileMessage) return null;
+
+  const { colors } = useUIKitTheme();
+
+  const [state, setState] = useState<VoiceFileMessageState>(() => {
+    const meta = fileMessage.metaArrays.find((it) => it.key === durationMetaArrayKey);
+    const value = meta?.value?.[0];
+    const initialDuration = value ? parseInt(value, 10) : 0;
+    return {
+      status: 'paused',
+      currentTime: 0,
+      duration: initialDuration,
+    };
+  });
+
+  useEffect(() => {
+    return () => {
+      onUnmount();
+    };
+  }, []);
+
+  const uiColors = colors.ui.groupChannelMessage['incoming'];
+  const remainingTime = state.duration - state.currentTime;
+
+  return (
+    <Box style={styles.container} backgroundColor={uiColors.enabled.background}>
+      <PressBox onPress={() => onToggleVoiceMessage?.(state, setState)} onLongPress={onLongPress}>
+        <ProgressBar
+          current={state.currentTime}
+          total={state.duration}
+          style={{ minWidth: 136, height: 44 }}
+          trackColor={uiColors.enabled.voiceProgressTrack}
+          overlay={
+            <Box
+              flex={1}
+              flexDirection={'row'}
+              alignItems={'center'}
+              justifyContent={'space-between'}
+              paddingHorizontal={12}
+            >
+              {state.status === 'preparing' ? (
+                <LoadingSpinner size={24} color={uiColors.enabled.voiceSpinner} />
+              ) : (
+                <Icon
+                  size={16}
+                  containerStyle={{
+                    backgroundColor: uiColors.enabled.voiceActionIconBackground,
+                    padding: 6,
+                    borderRadius: 16,
+                  }}
+                  icon={state.status === 'paused' ? 'play' : 'pause'}
+                />
+              )}
+              <Text
+                body3
+                style={{ lineHeight: undefined, marginLeft: 6, opacity: 0.88 }}
+                color={uiColors.enabled.textVoicePlaytime}
+              >
+                {millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)}
+              </Text>
+            </Box>
+          }
+        />
+      </PressBox>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+    maxWidth: 136,
+  },
+});
+
+export default ThreadParentMessageFileVoice;

package/src/components/ThreadParentMessageRenderer/ThreadParentMessage.user.og.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+
+import {
+  Box,
+  ImageWithPlaceholder,
+  PressBox,
+  RegexText,
+  type RegexTextPattern,
+  Text,
+  createStyleSheet,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import { SendbirdUserMessage, urlRegexStrict, useFreshCallback } from '@sendbird/uikit-utils';
+
+import { useSendbirdChat } from './../../hooks/useContext';
+import { ThreadParentMessageRendererProps } from './index';
+
+type Props = ThreadParentMessageRendererProps<{
+  regexTextPatterns?: RegexTextPattern[];
+  renderRegexTextChildren?: (message: SendbirdUserMessage) => string;
+}>;
+
+const ThreadParentMessageUserOg = (props: Props) => {
+  const userMessage: SendbirdUserMessage = props.parentMessage as SendbirdUserMessage;
+  if (!userMessage) return null;
+
+  const { sbOptions } = useSendbirdChat();
+  const { select, colors, palette } = useUIKitTheme();
+  const enableOgtag = sbOptions.uikitWithAppInfo.groupChannel.channel.enableOgtag;
+  const onPressMessage = (userMessage: SendbirdUserMessage) =>
+    useFreshCallback(() => {
+      typeof userMessage.ogMetaData?.url === 'string' && props.onPressURL?.(userMessage.ogMetaData.url);
+    });
+
+  return (
+    <Box>
+      <PressBox activeOpacity={0.85} onPress={onPressMessage(userMessage)}>
+        <Text body3 color={colors.onBackground01} suppressHighlighting>
+          <RegexText
+            body3
+            color={colors.onBackground01}
+            patterns={[
+              ...(props.regexTextPatterns ?? []),
+              {
+                regex: urlRegexStrict,
+                replacer({ match, parentProps, keyPrefix, index }) {
+                  return (
+                    <Text
+                      {...parentProps}
+                      key={`${keyPrefix}-${index}`}
+                      onPress={() => props.onPressURL?.(match)}
+                      style={[parentProps?.style, styles.urlText]}
+                    >
+                      {match}
+                    </Text>
+                  );
+                },
+              },
+            ]}
+          >
+            {props.renderRegexTextChildren?.(userMessage)}
+          </RegexText>
+          {Boolean(userMessage.updatedAt) && (
+            <Text body3 color={colors.onBackground02}>
+              {' (edited)'}
+            </Text>
+          )}
+        </Text>
+      </PressBox>
+      {userMessage.ogMetaData && enableOgtag && (
+        <PressBox onPress={onPressMessage(userMessage)} style={styles.container}>
+          <Box>
+            {!!userMessage.ogMetaData.defaultImage && (
+              <ImageWithPlaceholder style={styles.ogImage} source={{ uri: userMessage.ogMetaData.defaultImage.url }} />
+            )}
+            <Box
+              style={styles.ogContainer}
+              backgroundColor={select({ dark: palette.background400, light: palette.background100 })}
+            >
+              <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>
+                {userMessage.ogMetaData.title}
+              </Text>
+              {!!userMessage.ogMetaData.description && (
+                <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>
+                  {userMessage.ogMetaData.description}
+                </Text>
+              )}
+              <Text numberOfLines={1} caption2 color={colors.onBackground02}>
+                {userMessage.ogMetaData.url}
+              </Text>
+            </Box>
+          </Box>
+        </PressBox>
+      )}
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  ogContainer: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 12,
+    maxWidth: 240,
+    borderBottomLeftRadius: 16,
+    borderBottomRightRadius: 16,
+  },
+  ogImage: {
+    width: 240,
+    height: 136,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  ogUrl: {
+    marginBottom: 4,
+  },
+  ogTitle: {
+    marginBottom: 4,
+  },
+  ogDesc: {
+    lineHeight: 14,
+    marginBottom: 8,
+  },
+  urlText: {
+    textDecorationLine: 'underline',
+  },
+});
+
+export default ThreadParentMessageUserOg;

package/src/components/ThreadParentMessageRenderer/ThreadParentMessage.user.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { type RegexTextPattern, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { RegexText, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
+import { SendbirdUserMessage, urlRegexStrict } from '@sendbird/uikit-utils';
+
+import { ThreadParentMessageRendererProps } from './index';
+
+type Props = ThreadParentMessageRendererProps<{
+  regexTextPatterns?: RegexTextPattern[];
+  renderRegexTextChildren?: (message: SendbirdUserMessage) => string;
+}>;
+
+const ThreadParentMessageUser = (props: Props) => {
+  const userMessage: SendbirdUserMessage = props.parentMessage as SendbirdUserMessage;
+  if (!userMessage) return null;
+
+  const { colors } = useUIKitTheme();
+
+  return (
+    <Text body3 color={colors.onBackground01} suppressHighlighting>
+      <RegexText
+        body3
+        color={colors.onBackground01}
+        patterns={[
+          ...(props.regexTextPatterns ?? []),
+          {
+            regex: urlRegexStrict,
+            replacer({ match, parentProps, keyPrefix, index }) {
+              return (
+                <Text
+                  {...parentProps}
+                  key={`${keyPrefix}-${index}`}
+                  onPress={() => props.onPressURL?.(match)}
+                  style={[parentProps?.style, styles.urlText]}
+                >
+                  {match}
+                </Text>
+              );
+            },
+          },
+        ]}
+      >
+        {props.renderRegexTextChildren?.(userMessage)}
+      </RegexText>
+      {Boolean(userMessage.updatedAt) && (
+        <Text body3 color={colors.onBackground02}>
+          {' (edited)'}
+        </Text>
+      )}
+    </Text>
+  );
+};
+
+const styles = createStyleSheet({
+  bubble: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  urlText: {
+    textDecorationLine: 'underline',
+  },
+});
+
+export default ThreadParentMessageUser;