@sendbird/uikit-react-native 3.7.5 → 3.8.0

package/src/components/GroupChannelMessageRenderer/GroupChannelMessageReplyInfo.tsx

@@ -74,21 +74,21 @@ const styles = createStyleSheet({
     alignItems: 'center',
   },
   avatarContainer: {
-    marginRight: 4,
+    marginEnd: 4,
   },
   avatarOverlay: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
     bottom: 0,
     borderRadius: 10,
   },
   plusIcon: {
     position: 'absolute',
     top: 3,
-    left: 3,
-    right: 0,
+    start: 3,
+    end: 0,
     bottom: 0,
   },
 });

package/src/components/GroupChannelMessageRenderer/index.tsx

@@ -122,7 +122,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
           let seekFinished = !shouldSeekToTime;
 
           const forPlayback = playerService.addPlaybackListener(({ stopped, currentTime, duration }) => {
-            voiceMessageStatusManager.setCurrentTime(message.channelUrl, message.messageId, currentTime);
+            voiceMessageStatusManager.setCurrentTime(message.channelUrl, message.messageId, stopped ? 0 : currentTime);
             if (seekFinished) {
               setState((prevState) => ({ ...prevState, currentTime: stopped ? 0 : currentTime, duration }));
             }
@@ -189,7 +189,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
       if (
         mentionManager.shouldUseMentionedMessageTemplate(message, sbOptions.uikit.groupChannel.channel.enableMention)
       ) {
-        return message.mentionedMessageTemplate;
+        return message.mentionedMessageTemplate ?? '';
       } else {
         return message.message;
       }
@@ -212,6 +212,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
                 color={mentionColor}
                 onPress={() => messageProps.onPressMentionedUser?.(user)}
                 onLongPress={messageProps.onLongPress}
+                suppressHighlighting
                 style={[
                   parentProps?.style,
                   { fontWeight: '700' },

package/src/components/MessageSearchResultItem.tsx

@@ -30,9 +30,9 @@ const MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultIte
       <Box style={styles.container}>
         <Avatar size={styles.avatarSize.width} uri={getSenderProfile(message)} containerStyle={styles.avatar} />
 
-        <Box flex={1} paddingRight={16}>
+        <Box flex={1} paddingEnd={16}>
           <Box style={styles.titleLine}>
-            <Box flex={1} marginRight={4} justifyContent={'center'}>
+            <Box flex={1} marginEnd={4} justifyContent={'center'} alignItems={'flex-start'}>
               <Text subtitle2 color={colors.onBackground01} numberOfLines={1}>
                 {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_TITLE(message)}
               </Text>
@@ -58,15 +58,18 @@ const MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultIte
                 />
               )}
 
-              <Text
-                body3
-                numberOfLines={fileIcon ? 1 : 2}
-                ellipsizeMode={fileIcon ? 'middle' : 'tail'}
-                style={styles.bodyText}
-                color={colors.onBackground03}
-              >
-                {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_BODY(message)}
-              </Text>
+              <Box flex={1} alignItems={'flex-start'}>
+                <Text
+                  body3
+                  numberOfLines={fileIcon ? 1 : 2}
+                  ellipsizeMode={fileIcon ? 'middle' : 'tail'}
+                  style={styles.bodyText}
+                  color={colors.onBackground03}
+                  supportRTLAlign
+                >
+                  {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_BODY(message)}
+                </Text>
+              </Box>
             </Box>
           </Box>
 
@@ -108,16 +111,15 @@ const styles = createStyleSheet({
     borderRadius: 8,
     width: 26,
     height: 26,
-    marginRight: 4,
+    marginEnd: 4,
   },
   bodyText: {
-    flex: 1,
     lineHeight: 16,
   },
   separator: {
     position: 'absolute',
-    left: 0,
-    right: -16,
+    start: 0,
+    end: -16,
     bottom: 0,
     height: 1,
   },

package/src/components/ReactionAddons/BottomSheetReactionAddon.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { Pressable, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { BaseMessage } from '@sendbird/chat/message';
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { Logger, SendbirdBaseChannel, SendbirdBaseMessage, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
+import { Logger, SendbirdBaseChannel, SendbirdBaseMessage, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import { UNKNOWN_USER_ID } from '../../constants';
 import { useReaction, useSendbirdChat } from '../../hooks/useContext';
@@ -19,10 +18,9 @@ const BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {
   const { emojiManager, currentUser, sdk } = useSendbirdChat();
   const { updateReactionFocusedItem, openReactionList } = useReaction();
   const { colors } = useUIKitTheme();
-  const handlerId = useUniqHandlerId('BottomSheetReactionAddon');
-  const { left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
 
-  useChannelHandler(sdk, handlerId, {
+  useGroupChannelHandler(sdk, {
     async onReactionUpdated(eventChannel, event) {
       if (channel?.url === eventChannel.url && event.messageId === message?.messageId) {
         const msg = (await sdk.message.getMessage({
@@ -40,7 +38,7 @@ const BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {
   const color = colors.ui.reaction.default;
 
   return (
-    <View style={[styles.container, { marginRight: right, marginLeft: left }]}>
+    <View style={[styles.container, { marginStart: safeArea.paddingStart, marginEnd: safeArea.paddingEnd }]}>
       {emojiAll.map(({ key, url }) => {
         const reactionUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];
         const currentUserIdx = reactionUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);

package/src/components/ReactionAddons/MessageReactionAddon.tsx

@@ -7,7 +7,7 @@ import { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';
 import type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';
 import { getReactionCount } from '@sendbird/uikit-utils';
 
-import { DEFAULT_LONG_PRESS_DELAY, UNKNOWN_USER_ID } from '../../constants';
+import { DEFAULT_LONG_PRESS_DELAY } from '../../constants';
 import { useReaction, useSendbirdChat } from '../../hooks/useContext';
 import ReactionRoundedButton from './ReactionRoundedButton';
 
@@ -15,10 +15,6 @@ 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;
-};
-
 const createOnPressReaction = (
   reaction: SendbirdReaction,
   channel: SendbirdBaseChannel,
@@ -41,7 +37,6 @@ const createReactionButtons = (
   emojiLimit: number,
   onOpenReactionList: () => void,
   onOpenReactionUserList: (focusIndex: number) => void,
-  currentUserId?: string,
   reactionAddonType?: ReactionAddonType,
 ) => {
   const reactions = message.reactions ?? [];
@@ -51,7 +46,7 @@ const createReactionButtons = (
     return (
       <Pressable
         key={reaction.key}
-        onPress={createOnPressReaction(reaction, channel, message, getUserReacted(reaction, currentUserId))}
+        onPress={createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted)}
         onLongPress={() => onOpenReactionUserList(index)}
         delayLongPress={DEFAULT_LONG_PRESS_DELAY}
       >
@@ -59,11 +54,11 @@ const createReactionButtons = (
           <ReactionRoundedButton
             url={getEmoji(reaction.key).url}
             count={getReactionCount(reaction)}
-            reacted={pressed || getUserReacted(reaction, currentUserId)}
+            reacted={pressed || reaction.hasCurrentUserReacted}
             style={
               reactionAddonType === 'default'
-                ? [isNotLastOfRow && styles.marginRight, isNotLastOfCol && styles.marginBottom]
-                : [styles.marginRight, styles.marginBottom]
+                ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom]
+                : [styles.marginEnd, styles.marginBottom]
             }
           />
         )}
@@ -91,7 +86,7 @@ const MessageReactionAddon = ({
   reactionAddonType?: ReactionAddonType;
 }) => {
   const { colors } = useUIKitTheme();
-  const { sdk, emojiManager, currentUser } = useSendbirdChat();
+  const { sdk, emojiManager } = useSendbirdChat();
   const { openReactionList, openReactionUserList } = useReaction();
   const forceUpdate = useForceUpdate();
 
@@ -113,7 +108,6 @@ const MessageReactionAddon = ({
     emojiManager.allEmoji.length,
     () => openReactionList({ channel, message }),
     (focusIndex) => openReactionUserList({ channel, message, focusIndex }),
-    currentUser?.userId,
     reactionAddonType,
   );
 
@@ -145,8 +139,8 @@ const styles = createStyleSheet({
     flexDirection: 'row',
     flexWrap: 'wrap',
   },
-  marginRight: {
-    marginRight: 4.5,
+  marginEnd: {
+    marginEnd: 4.5,
   },
   marginBottom: {
     marginBottom: 4,

package/src/components/ReactionAddons/ReactionRoundedButton.tsx

@@ -60,7 +60,7 @@ const styles = createStyleSheet({
   emoji: {
     width: 20,
     height: 20,
-    marginRight: 4,
+    marginEnd: 4,
   },
   count: {
     width: 13,

package/src/components/ReactionBottomSheets/ReactionListBottomSheet.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { FlatList, Pressable, View, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { BaseMessage } from '@sendbird/chat/message';
 import { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { Logger } from '@sendbird/uikit-utils';
+import { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import { UNKNOWN_USER_ID } from '../../constants';
 import type { ReactionBottomSheetProps } from './index';
@@ -12,7 +11,7 @@ import type { ReactionBottomSheetProps } from './index';
 const NUM_COLUMN = 6;
 const ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => {
   const { width } = useWindowDimensions();
-  const { bottom, left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['bottom', 'left', 'right']);
   const { colors } = useUIKitTheme();
 
   const { currentUser, emojiManager } = chatCtx;
@@ -32,10 +31,10 @@ const ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, cha
           styles.container,
           {
             width,
-            paddingBottom: bottom,
+            paddingBottom: safeArea.paddingBottom,
             backgroundColor: colors.ui.dialog.default.none.background,
-            paddingLeft: left + styles.container.paddingHorizontal,
-            paddingRight: right + styles.container.paddingHorizontal,
+            paddingStart: safeArea.paddingStart + styles.container.paddingHorizontal,
+            paddingEnd: safeArea.paddingEnd + styles.container.paddingHorizontal,
           },
         ]}
       >
@@ -86,8 +85,8 @@ const ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, cha
 const styles = createStyleSheet({
   container: {
     overflow: 'hidden',
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
+    borderTopStartRadius: 8,
+    borderTopEndRadius: 8,
     paddingTop: 16,
     paddingHorizontal: 18,
     flexDirection: 'row',

package/src/components/ReactionBottomSheets/ReactionUserListBottomSheet.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Easing, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Animated, Easing, I18nManager, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
 
 import {
   Avatar,
@@ -11,7 +10,7 @@ import {
   createStyleSheet,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdReaction, getReactionCount, truncatedCount } from '@sendbird/uikit-utils';
+import { SendbirdReaction, getReactionCount, truncatedCount, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import type { ReactionBottomSheetProps } from './index';
 
@@ -25,7 +24,7 @@ const ReactionUserListBottomSheet = ({
   onPressUserProfile,
 }: ReactionBottomSheetProps) => {
   const { width } = useWindowDimensions();
-  const { bottom, left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right', 'bottom']);
   const { colors } = useUIKitTheme();
 
   const [tabIndex, setTabIndex] = useState(0);
@@ -42,8 +41,8 @@ const ReactionUserListBottomSheet = ({
   const reactions = message?.reactions ?? [];
   const focusedReaction = reactions[tabIndex] as SendbirdReaction | undefined;
   const containerSafeArea = {
-    paddingLeft: left + styles.layout.paddingHorizontal,
-    paddingRight: right + styles.layout.paddingHorizontal,
+    paddingStart: safeArea.paddingStart + styles.layout.paddingHorizontal,
+    paddingEnd: safeArea.paddingEnd + styles.layout.paddingHorizontal,
   };
 
   const focusTab = (index: number, animated = true) => {
@@ -64,7 +63,7 @@ const ReactionUserListBottomSheet = ({
   };
 
   const layoutCalculated = () => {
-    return tabIndicatorValue.current.length === reactions.length && tabIndicatorValue.current.every(Boolean);
+    return tabIndicatorValue.current.filter(Boolean).length === reactions.length;
   };
 
   useEffect(() => {
@@ -87,12 +86,14 @@ const ReactionUserListBottomSheet = ({
           return (
             <Pressable
               key={reaction.key}
-              style={[styles.tabItem, isLastItem && { marginRight: styles.layout.marginRight }]}
+              style={[styles.tabItem, isLastItem && { marginEnd: styles.layout.marginEnd }]}
               onPress={() => focusTab(index)}
               onLayout={(e) => {
-                tabIndicatorValue.current[index] = e.nativeEvent.layout;
+                const indexForLayout = I18nManager.isRTL ? reactions.length - 1 - index : index;
+                tabIndicatorValue.current[indexForLayout] = e.nativeEvent.layout;
                 if (layoutCalculated()) {
                   if (focusedWithLayoutCalculated.current) {
+                    // re-calculating layout when screen rotation
                     focusTab(tabIndex, false);
                   } else {
                     focusedWithLayoutCalculated.current = true;
@@ -112,7 +113,7 @@ const ReactionUserListBottomSheet = ({
           style={[
             styles.tabIndicator,
             {
-              left: tabIndicatorAnimated.x,
+              start: tabIndicatorAnimated.x,
               width: tabIndicatorAnimated.width,
               backgroundColor: color.selected.highlight,
             },
@@ -123,31 +124,37 @@ const ReactionUserListBottomSheet = ({
   };
 
   const renderPage = () => {
+    const userCountDifference = (focusedReaction?.count || 0) - (focusedReaction?.sampledUserInfoList.length || 0);
+
     return (
       <>
-        {focusedReaction?.userIds.map((userId) => {
+        {focusedReaction?.sampledUserInfoList.map((reactedUserInfo) => {
           if (channel?.isGroupChannel()) {
-            const user = channel.members.find((x) => x.userId === userId);
             return (
               <Pressable
-                key={userId}
+                key={reactedUserInfo.userId}
                 onPress={async () => {
-                  if (user) {
-                    await onClose();
-                    onPressUserProfile(user);
-                  }
+                  await onClose();
+                  onPressUserProfile(reactedUserInfo);
                 }}
                 style={styles.pageItem}
               >
-                <Avatar size={36} uri={user?.profileUrl} containerStyle={styles.avatar} />
+                <Avatar size={36} uri={reactedUserInfo?.profileUrl} containerStyle={styles.avatar} />
                 <Text subtitle2 style={{ flex: 1 }}>
-                  {user?.nickname || STRINGS.LABELS.USER_NO_NAME}
+                  {reactedUserInfo?.nickname || STRINGS.LABELS.USER_NO_NAME}
                 </Text>
               </Pressable>
             );
           }
           return null;
         })}
+        {userCountDifference > 0 && (
+          <View style={styles.pageItem}>
+            <Text body3 color={colors.onBackground02}>
+              {STRINGS.REACTION.MORE_USERS(userCountDifference)}
+            </Text>
+          </View>
+        )}
       </>
     );
   };
@@ -163,7 +170,7 @@ const ReactionUserListBottomSheet = ({
       <View
         style={[
           styles.container,
-          { width, paddingBottom: bottom, backgroundColor: colors.ui.dialog.default.none.background },
+          { width, paddingBottom: safeArea.paddingBottom, backgroundColor: colors.ui.dialog.default.none.background },
         ]}
       >
         <ScrollView
@@ -192,12 +199,12 @@ const ReactionUserListBottomSheet = ({
 const styles = createStyleSheet({
   layout: {
     paddingHorizontal: 16,
-    marginRight: 0,
+    marginEnd: 0,
   },
   container: {
     overflow: 'hidden',
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
+    borderTopStartRadius: 8,
+    borderTopEndRadius: 8,
     paddingTop: 16,
     alignItems: 'center',
   },
@@ -216,7 +223,7 @@ const styles = createStyleSheet({
     height: 44,
   },
   tabItem: {
-    marginRight: 16,
+    marginEnd: 16,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
@@ -224,7 +231,7 @@ const styles = createStyleSheet({
   tabEmoji: {
     width: 28,
     height: 28,
-    marginRight: 4,
+    marginEnd: 4,
   },
   tabIndicator: {
     position: 'absolute',
@@ -242,7 +249,7 @@ const styles = createStyleSheet({
     alignItems: 'center',
   },
   avatar: {
-    marginRight: 16,
+    marginEnd: 16,
   },
 });
 

package/src/components/ReactionBottomSheets/index.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import type { SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
+import { SendbirdReactedUserInfo } from '@sendbird/uikit-utils';
 
 import type { LocalizationContext } from '../../contexts/LocalizationCtx';
 import type { ReactionContext } from '../../contexts/ReactionCtx';
@@ -13,7 +13,7 @@ export type ReactionBottomSheetProps = {
   visible: boolean;
   onDismiss: () => void;
   onClose: () => Promise<void>;
-  onPressUserProfile: (user: SendbirdUser | SendbirdMember) => void;
+  onPressUserProfile: (user: SendbirdReactedUserInfo) => void;
   chatCtx: GetFromContext<typeof SendbirdChatContext>;
   reactionCtx: GetFromContext<typeof ReactionContext>;
   localizationCtx: GetFromContext<typeof LocalizationContext>;

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

@@ -54,7 +54,7 @@ const styles = createStyleSheet({
   },
   name: {
     flexShrink: 1,
-    marginLeft: 8,
+    marginStart: 8,
   },
 });
 

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

@@ -16,6 +16,7 @@ export type VoiceFileMessageState = {
 type Props = ThreadParentMessageRendererProps<{
   durationMetaArrayKey?: string;
   onUnmount: () => void;
+  initialCurrentTime?: number;
 }>;
 
 const ThreadParentMessageFileVoice = (props: Props) => {
@@ -25,6 +26,7 @@ const ThreadParentMessageFileVoice = (props: Props) => {
     parentMessage,
     durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
     onUnmount,
+    initialCurrentTime,
   } = props;
 
   const fileMessage: SendbirdFileMessage = parentMessage as SendbirdFileMessage;
@@ -38,7 +40,7 @@ const ThreadParentMessageFileVoice = (props: Props) => {
     const initialDuration = value ? parseInt(value, 10) : 0;
     return {
       status: 'paused',
-      currentTime: 0,
+      currentTime: initialCurrentTime || 0,
       duration: initialDuration,
     };
   });
@@ -83,7 +85,7 @@ const ThreadParentMessageFileVoice = (props: Props) => {
               )}
               <Text
                 body3
-                style={{ lineHeight: undefined, marginLeft: 6, opacity: 0.88 }}
+                style={{ lineHeight: undefined, marginStart: 6, opacity: 0.88 }}
                 color={uiColors.enabled.textVoicePlaytime}
               >
                 {millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)}

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

@@ -33,11 +33,20 @@ const ThreadParentMessageUserOg = (props: Props) => {
     });
 
   return (
-    <Box>
+    <Box flex={1} alignItems={'flex-start'}>
       <PressBox activeOpacity={0.85} onPress={onPressMessage(userMessage)}>
-        <Text body3 color={colors.onBackground01} suppressHighlighting>
+        <Text
+          body3
+          suppressHighlighting
+          supportRTLAlign
+          originalText={userMessage.message}
+          color={colors.onBackground01}
+        >
           <RegexText
             body3
+            suppressHighlighting
+            supportRTLAlign
+            originalText={userMessage.message}
             color={colors.onBackground01}
             patterns={[
               ...(props.regexTextPatterns ?? []),
@@ -106,14 +115,14 @@ const styles = createStyleSheet({
     paddingTop: 8,
     paddingBottom: 12,
     maxWidth: 240,
-    borderBottomLeftRadius: 16,
-    borderBottomRightRadius: 16,
+    borderBottomStartRadius: 16,
+    borderBottomEndRadius: 16,
   },
   ogImage: {
     width: 240,
     height: 136,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
+    borderTopStartRadius: 16,
+    borderTopEndRadius: 16,
   },
   ogUrl: {
     marginBottom: 4,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { type RegexTextPattern, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { Box, 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';
 
@@ -18,37 +18,43 @@ const ThreadParentMessageUser = (props: Props) => {
   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>
-              );
+    <Box flex={1} alignItems={'flex-start'}>
+      <Text body3 color={colors.onBackground01} suppressHighlighting supportRTLAlign originalText={userMessage.message}>
+        <RegexText
+          body3
+          suppressHighlighting
+          supportRTLAlign
+          originalText={userMessage.message}
+          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>
+          ]}
+        >
+          {props.renderRegexTextChildren?.(userMessage)}
+        </RegexText>
+        {Boolean(userMessage.updatedAt) && (
+          <Text body3 color={colors.onBackground02}>
+            {/*FIXME: edited to string set*/}
+            {' (edited)'}
+          </Text>
+        )}
+      </Text>
+    </Box>
   );
 };