@sendbird/uikit-react-native 2.0.3 → 2.2.0

package/src/components/MessageRenderer/FileMessage/ImageFileMessage.tsx

@@ -34,7 +34,7 @@ const useRetry = (hasError: boolean, retryCount = 5) => {
   return retryCountRef.current;
 };
 
-const ImageFileMessage = ({ message }: FileMessageProps) => {
+const ImageFileMessage = ({ message, children, variant }: FileMessageProps) => {
   const { colors } = useUIKitTheme();
   const [imageNotFound, setImageNotFound] = useState(false);
 
@@ -44,29 +44,36 @@ const ImageFileMessage = ({ message }: FileMessageProps) => {
   const key = useRetry(imageNotFound);
 
   return (
-    <View style={style}>
-      <Image
-        key={key}
-        source={{ uri: fileUrl }}
-        style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}
-        resizeMode={'cover'}
-        resizeMethod={'resize'}
-        onError={() => setImageNotFound(true)}
-        onLoad={() => setImageNotFound(false)}
-      />
-      {imageNotFound && (
-        <Icon
-          containerStyle={StyleSheet.absoluteFill}
-          icon={'thumbnail-none'}
-          size={48}
-          color={colors.onBackground02}
+    <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>
+      <View style={style}>
+        <Image
+          key={key}
+          source={{ uri: fileUrl }}
+          style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}
+          resizeMode={'cover'}
+          resizeMethod={'resize'}
+          onError={() => setImageNotFound(true)}
+          onLoad={() => setImageNotFound(false)}
         />
-      )}
+        {imageNotFound && (
+          <Icon
+            containerStyle={StyleSheet.absoluteFill}
+            icon={'thumbnail-none'}
+            size={48}
+            color={colors.onBackground02}
+          />
+        )}
+      </View>
+      {children}
     </View>
   );
 };
 
 const styles = createStyleSheet({
+  bubbleContainer: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
   image: {
     width: 240,
     maxWidth: 240,

package/src/components/MessageRenderer/FileMessage/VideoFileMessage.tsx

@@ -41,26 +41,33 @@ const useRetry = (videoFileUrl: string, retryCount = 5) => {
   return state;
 };
 
-const VideoFileMessage = ({ message }: FileMessageProps) => {
+const VideoFileMessage = ({ message, variant, children }: FileMessageProps) => {
   const { colors } = useUIKitTheme();
 
   const fileUrl = getAvailableUriFromFileMessage(message);
-  const style = [styles.image, { backgroundColor: colors.onBackground04 }];
+  const style = [styles.video, { backgroundColor: colors.onBackground04 }];
 
   const { loading, thumbnail } = useRetry(fileUrl);
 
   if (loading) {
     return (
-      <View style={[style, styles.container]}>
-        <PlayIcon />
+      <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>
+        <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>
+          <View style={style} />
+          <PlayIcon />
+        </View>
+        {children}
       </View>
     );
   }
 
   return (
-    <View style={styles.container}>
-      <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />
-      <PlayIcon />
+    <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>
+      <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>
+        <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />
+        <PlayIcon />
+      </View>
+      {children}
     </View>
   );
 };
@@ -79,15 +86,18 @@ const PlayIcon = () => {
 };
 
 const styles = createStyleSheet({
-  container: {
+  bubbleContainer: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  bubbleInnerContainer: {
     alignItems: 'center',
     justifyContent: 'center',
   },
-  image: {
+  video: {
     width: 240,
     maxWidth: 240,
     height: 160,
-    borderRadius: 16,
   },
   playIcon: {
     position: 'absolute',

package/src/components/MessageRenderer/MessageIncomingAvatar.tsx

@@ -1,18 +1,25 @@
 import React from 'react';
-import { View } from 'react-native';
+import { Pressable, View } from 'react-native';
 
 import { Avatar, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
 
+import { useUserProfile } from '../../hooks/useContext';
+
 type Props = {
   message: SendbirdMessage;
   grouping: boolean;
 };
 const MessageIncomingAvatar = ({ message, grouping }: Props) => {
+  const { show } = useUserProfile();
   if (grouping) return <View style={styles.avatar} />;
   return (
     <View style={styles.avatar}>
-      {(message.isFileMessage() || message.isUserMessage()) && <Avatar size={26} uri={message.sender?.profileUrl} />}
+      {(message.isFileMessage() || message.isUserMessage()) && (
+        <Pressable onPress={() => show(message.sender)}>
+          <Avatar size={26} uri={message.sender?.profileUrl} />
+        </Pressable>
+      )}
     </View>
   );
 };

package/src/components/MessageRenderer/UserMessage/BaseUserMessage.tsx

@@ -1,33 +1,101 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { Text, URLParsedText, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { urlRegexStrict } from '@sendbird/uikit-utils';
 
-import { useLocalization } from '../../../hooks/useContext';
+import { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';
+import { openUrl } from '../../../utils/common';
 import type { UserMessageProps } from './index';
 
-const BaseUserMessage = ({ message, variant, pressed }: UserMessageProps) => {
-  const { colors } = useUIKitTheme();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+const BaseUserMessage = ({
+  message,
+  variant,
+  pressed,
+  children,
+  onLongPressMentionedUser,
+  onLongPressURL,
+}: UserMessageProps) => {
+  const { mentionManager, currentUser } = useSendbirdChat();
+  const { show } = useUserProfile();
   const { STRINGS } = useLocalization();
+  const { colors, palette } = useUIKitTheme();
+
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+
   return (
     <View style={[styles.container, { backgroundColor: color.background }]}>
-      <URLParsedText body3 strict color={color.textMsg}>
-        {message.message}
-        {Boolean(message.updatedAt) && (
-          <Text body3 color={color.textEdited}>
-            {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}
-          </Text>
-        )}
-      </URLParsedText>
+      <View style={styles.wrapper}>
+        <Text body3 color={color.textMsg}>
+          <RegexText
+            body3
+            color={color.textMsg}
+            patterns={[
+              {
+                regex: mentionManager.templateRegex,
+                replacer({ match, groups, parentProps, index, keyPrefix }) {
+                  const user = message.mentionedUsers?.find((it) => it.userId === groups[2]);
+                  if (user) {
+                    return (
+                      <Text
+                        {...parentProps}
+                        key={`${keyPrefix}-${index}`}
+                        onPress={() => show(user)}
+                        onLongPress={onLongPressMentionedUser}
+                        style={[
+                          parentProps?.style,
+                          { fontWeight: 'bold' },
+                          user.userId === currentUser?.userId && { backgroundColor: palette.highlight },
+                        ]}
+                      >
+                        {`${mentionManager.asMentionedMessageText(user)}`}
+                      </Text>
+                    );
+                  }
+                  return match;
+                },
+              },
+              {
+                regex: urlRegexStrict,
+                replacer({ match, parentProps, index, keyPrefix }) {
+                  return (
+                    <Text
+                      {...parentProps}
+                      key={`${keyPrefix}-${index}`}
+                      onPress={() => openUrl(match)}
+                      onLongPress={onLongPressURL}
+                      style={[parentProps?.style, { textDecorationLine: 'underline' }]}
+                    >
+                      {match}
+                    </Text>
+                  );
+                },
+              },
+            ]}
+          >
+            {mentionManager.shouldUseMentionedMessageTemplate(message)
+              ? message.mentionedMessageTemplate
+              : message.message}
+          </RegexText>
+          {Boolean(message.updatedAt) && (
+            <Text body3 color={color.textEdited}>
+              {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}
+            </Text>
+          )}
+        </Text>
+      </View>
+      {children}
     </View>
   );
 };
 const styles = createStyleSheet({
   container: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  wrapper: {
     paddingHorizontal: 12,
     paddingVertical: 6,
-    borderRadius: 16,
   },
 });
 

package/src/components/MessageRenderer/UserMessage/OpenGraphUserMessage.tsx

@@ -2,88 +2,156 @@ import React, { useState } from 'react';
 import { Linking, TouchableOpacity, View } from 'react-native';
 
 import type { OGMetaData } from '@sendbird/chat/message';
-import {
-  Icon,
-  Image,
-  Text,
-  URLParsedText,
-  createStyleSheet,
-  useUIKitTheme,
-} from '@sendbird/uikit-react-native-foundation';
-import { conditionChaining } from '@sendbird/uikit-utils';
+import { Icon, Image, RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { conditionChaining, urlRegexRough } from '@sendbird/uikit-utils';
 
-import { useLocalization } from '../../../hooks/useContext';
+import { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';
+import { openUrl } from '../../../utils/common';
 import type { UserMessageProps } from './index';
 
 type Props = UserMessageProps & {
   ogMetaData: OGMetaData;
 };
-const OpenGraphUserMessage = ({ message, variant, pressed, ogMetaData }: Props) => {
+
+const OpenGraphUserMessage = ({
+  message,
+  variant,
+  pressed,
+  ogMetaData,
+  children,
+  onLongPressMentionedUser,
+  onLongPressURL,
+}: Props) => {
+  const { mentionManager, currentUser } = useSendbirdChat();
   const { STRINGS } = useLocalization();
+  const { show } = useUserProfile();
   const { colors, select, palette } = useUIKitTheme();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+
   const [imageNotFound, setImageNotFound] = useState(false);
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+
+  const containerBackground = select({ dark: palette.background400, light: palette.background100 });
+
   return (
-    <View style={[styles.container, { backgroundColor: color.background }]}>
-      <View style={styles.messageContainer}>
-        <URLParsedText body3 color={color.textMsg}>
-          {message.message}
-          {Boolean(message.updatedAt) && (
-            <Text body3 color={color.textEdited}>
-              {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}
-            </Text>
-          )}
-        </URLParsedText>
-      </View>
-      <TouchableOpacity activeOpacity={0.7} onPress={() => Linking.openURL(ogMetaData.url).catch()}>
-        <View
-          style={[
-            styles.ogImageContainer,
-            { backgroundColor: select({ dark: palette.background500, light: palette.background200 }) },
-          ]}
-        >
-          {conditionChaining(
-            [imageNotFound],
-            [
-              <Icon containerStyle={styles.ogImage} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />,
-              <Image
-                source={{ uri: ogMetaData.defaultImage?.url }}
-                style={styles.ogImage}
-                resizeMode={'cover'}
-                onError={() => setImageNotFound(true)}
-              />,
-            ],
-          )}
+    <View style={[styles.bubbleContainer, { backgroundColor: containerBackground }]}>
+      <View style={[styles.container, styles.bubbleContainer, { backgroundColor: color.background }]}>
+        <View style={styles.messageContainer}>
+          <Text body3 color={color.textMsg}>
+            <RegexText
+              body3
+              color={color.textMsg}
+              patterns={[
+                {
+                  regex: mentionManager.templateRegex,
+                  replacer({ match, groups, parentProps, keyPrefix, index }) {
+                    const user = message.mentionedUsers?.find((it) => it.userId === groups[2]);
+                    if (user) {
+                      const isCurrentUser = user.userId === currentUser?.userId;
+                      return (
+                        <Text
+                          {...parentProps}
+                          key={`${keyPrefix}-${index}`}
+                          onPress={() => show(user)}
+                          onLongPress={onLongPressMentionedUser}
+                          style={[
+                            parentProps?.style,
+                            styles.mentionedText,
+                            isCurrentUser && { backgroundColor: palette.highlight },
+                          ]}
+                        >
+                          {`${mentionManager.asMentionedMessageText(user)}`}
+                        </Text>
+                      );
+                    }
+                    return match;
+                  },
+                },
+                {
+                  regex: urlRegexRough,
+                  replacer({ match, parentProps, keyPrefix, index }) {
+                    return (
+                      <Text
+                        {...parentProps}
+                        key={`${keyPrefix}-${index}`}
+                        onPress={() => openUrl(match)}
+                        onLongPress={onLongPressURL}
+                        style={[parentProps?.style, styles.urlText]}
+                      >
+                        {match}
+                      </Text>
+                    );
+                  },
+                },
+              ]}
+            >
+              {mentionManager.shouldUseMentionedMessageTemplate(message)
+                ? message.mentionedMessageTemplate
+                : message.message}
+            </RegexText>
+            {Boolean(message.updatedAt) && (
+              <Text body3 color={color.textEdited}>
+                {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}
+              </Text>
+            )}
+          </Text>
         </View>
-        <View
-          style={[
-            styles.ogContainer,
-            { backgroundColor: select({ dark: palette.background400, light: palette.background100 }) },
-          ]}
+        <TouchableOpacity
+          style={{ backgroundColor: select({ dark: palette.background500, light: palette.background200 }) }}
+          activeOpacity={0.85}
+          onPress={() => Linking.openURL(ogMetaData.url).catch()}
         >
-          <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>
-            {ogMetaData.title}
-          </Text>
-          {Boolean(ogMetaData.description) && (
-            <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>
-              {ogMetaData.description}
+          <View
+            style={[
+              styles.ogImageContainer,
+              { backgroundColor: select({ dark: palette.background500, light: palette.background200 }) },
+            ]}
+          >
+            {conditionChaining(
+              [imageNotFound],
+              [
+                <Icon
+                  containerStyle={styles.ogImage}
+                  icon={'thumbnail-none'}
+                  size={48}
+                  color={colors.onBackground02}
+                />,
+                <Image
+                  source={{ uri: ogMetaData.defaultImage?.url }}
+                  style={styles.ogImage}
+                  resizeMode={'cover'}
+                  onError={() => setImageNotFound(true)}
+                />,
+              ],
+            )}
+          </View>
+          <View style={[styles.ogContainer, { backgroundColor: containerBackground }]}>
+            <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>
+              {ogMetaData.title}
             </Text>
-          )}
-          <Text numberOfLines={1} caption2 color={colors.onBackground02}>
-            {ogMetaData.url}
-          </Text>
-        </View>
-      </TouchableOpacity>
+            {Boolean(ogMetaData.description) && (
+              <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>
+                {ogMetaData.description}
+              </Text>
+            )}
+            <Text numberOfLines={1} caption2 color={colors.onBackground02}>
+              {ogMetaData.url}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+      {children}
     </View>
   );
 };
 
 const styles = createStyleSheet({
+  bubbleContainer: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
   container: {
     width: 240,
     maxWidth: 240,
-    borderRadius: 16,
-    overflow: 'hidden',
   },
   messageContainer: {
     paddingVertical: 6,
@@ -109,6 +177,12 @@ const styles = createStyleSheet({
     lineHeight: 14,
     marginBottom: 8,
   },
+  mentionedText: {
+    fontWeight: 'bold',
+  },
+  urlText: {
+    textDecorationLine: 'underline',
+  },
 });
 
 export default OpenGraphUserMessage;

package/src/components/MessageRenderer/UserMessage/index.tsx

@@ -6,7 +6,14 @@ import type { MessageRendererInterface } from '../index';
 import BaseUserMessage from './BaseUserMessage';
 import OpenGraphUserMessage from './OpenGraphUserMessage';
 
-export type UserMessageProps = MessageRendererInterface<SendbirdUserMessage>;
+export type UserMessageProps = MessageRendererInterface<
+  SendbirdUserMessage,
+  {
+    onLongPressMentionedUser?: () => void;
+    onLongPressURL?: () => void;
+  }
+>;
+
 const UserMessage = (props: UserMessageProps) => {
   if (props.message.ogMetaData) {
     return <OpenGraphUserMessage {...props} ogMetaData={props.message.ogMetaData} />;

package/src/components/MessageRenderer/index.tsx

@@ -1,12 +1,20 @@
 import React from 'react';
-import { Pressable, View } from 'react-native';
+import { Pressable, PressableProps, View } from 'react-native';
 
 import { createStyleSheet } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
-import { calcMessageGrouping, conditionChaining, isMyMessage, useIIFE } from '@sendbird/uikit-utils';
+import {
+  calcMessageGrouping,
+  conditionChaining,
+  isMyMessage,
+  shouldRenderReaction,
+  useIIFE,
+} from '@sendbird/uikit-utils';
 
 import { DEFAULT_LONG_PRESS_DELAY } from '../../constants';
 import type { GroupChannelProps } from '../../domain/groupChannel/types';
+import { useSendbirdChat } from '../../hooks/useContext';
+import { ReactionAddons } from '../ReactionAddons';
 import AdminMessage from './AdminMessage';
 import FileMessage from './FileMessage';
 import MessageContainer from './MessageContainer';
@@ -19,7 +27,7 @@ import UnknownMessage from './UnknownMessage';
 import UserMessage from './UserMessage';
 
 type MessageStyleVariant = 'outgoing' | 'incoming';
-export interface MessageRendererInterface<T = SendbirdMessage> {
+export type MessageRendererInterface<T = SendbirdMessage, AdditionalProps = unknown> = {
   message: T;
   prevMessage?: SendbirdMessage;
   nextMessage?: SendbirdMessage;
@@ -27,7 +35,8 @@ export interface MessageRendererInterface<T = SendbirdMessage> {
   groupWithPrev: boolean;
   groupWithNext: boolean;
   pressed: boolean;
-}
+  children?: React.ReactElement | null;
+} & AdditionalProps;
 
 const MessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({
   currentUserId,
@@ -49,8 +58,17 @@ const MessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({
     rest.nextMessage,
   );
 
+  const { features } = useSendbirdChat();
+
+  const reactionChildren = useIIFE(() => {
+    if (shouldRenderReaction(channel, features.reactionEnabled) && message.reactions && message.reactions.length > 0) {
+      return <ReactionAddons.Message channel={channel} message={message} />;
+    }
+    return null;
+  });
+
   const messageComponent = useIIFE(() => {
-    const pressableProps = {
+    const pressableProps: PressableProps = {
       style: styles.msgContainer,
       disabled: !onPress && !onLongPress,
       onPress,
@@ -62,7 +80,17 @@ const MessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({
     if (message.isUserMessage()) {
       return (
         <Pressable {...pressableProps}>
-          {({ pressed }) => <UserMessage message={message} pressed={pressed} {...messageProps} />}
+          {({ pressed }) => (
+            <UserMessage
+              message={message}
+              pressed={pressed}
+              onLongPressURL={onLongPress}
+              onLongPressMentionedUser={onLongPress}
+              {...messageProps}
+            >
+              {reactionChildren}
+            </UserMessage>
+          )}
         </Pressable>
       );
     }
@@ -70,7 +98,11 @@ const MessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({
     if (message.isFileMessage()) {
       return (
         <Pressable {...pressableProps}>
-          {({ pressed }) => <FileMessage message={message} pressed={pressed} {...messageProps} />}
+          {({ pressed }) => (
+            <FileMessage message={message} pressed={pressed} {...messageProps}>
+              {reactionChildren}
+            </FileMessage>
+          )}
         </Pressable>
       );
     }
@@ -158,7 +190,7 @@ const styles = createStyleSheet({
   },
   outgoingContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-end',
     justifyContent: 'center',
   },
 });