Apply review

packages/uikit-react-native-foundation/src/ui/GroupChannelMessage/MessageContainer.tsx

@@ -67,9 +67,7 @@ MessageContainer.Incoming = function MessageContainerIncoming({
  </Box>
  </Box>
  </Box>
- <Box marginLeft={40} marginTop={4} flexDirection={'row'} height={20}>
- {replyInfo}
- </Box>
+ {replyInfo}
  </Box>
  );
 };
@@ -102,9 +100,7 @@ MessageContainer.Outgoing = function MessageContainerOutgoing({
  </Box>
  <Box style={styles.bubble}>{children}</Box>
  </Box>
- <Box marginTop={4} flexDirection={'row-reverse'} height={20}>
- {replyInfo}
- </Box>
+ {replyInfo}
  </Box>
  );
 };

packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx

@@ -53,7 +53,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
  channel,
  messageToReply,
  setMessageToReply,
- messageToThread,
+ messageForThread,
  },
  ref,
 ) {
@@ -69,22 +69,25 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
  visible: voiceMessageInputVisible,
  setVisible: setVoiceMessageInputVisible,
  } = useDeferredModalState();
-
+ 
  const messageReplyParams = useIIFE(() => {
  const { groupChannel } = sbOptions.uikit;
- if (
- !channel.isGroupChannel() ||
- groupChannel.channel.replyType === 'none' ||
- (groupChannel.channel.replyType === 'quote_reply' && !messageToReply) ||
- (groupChannel.channel.replyType === 'thread' && !messageToThread)
- ) {
- return {};
+
+ if (channel.isGroupChannel()) {
+ if (groupChannel.channel.replyType === 'quote_reply' && messageToReply) {
+ return {
+ parentMessageId: messageToReply.messageId,
+ isReplyToChannel: true,
+ };
+ } else if (groupChannel.channel.replyType === 'thread' && messageForThread) {
+ return {
+ parentMessageId: messageForThread.messageId,
+ isReplyToChannel: true,
+ };
+ }
  }
-
- return {
- parentMessageId: messageToReply?.messageId ?? messageToThread?.messageId,
- isReplyToChannel: true,
- };
+
+ return {};
  });
 
  const messageMentionParams = useIIFE(() => {
@@ -161,7 +164,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
  if (inputFrozen) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
  if (inputDisabled) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
  if (messageToReply) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_REPLY;
- if (messageToThread) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_THREAD;
+ if (messageForThread) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_THREAD;
 
  return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
  };

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

@@ -65,7 +65,7 @@ export type ChannelInputProps = {
  // reply - only available on group channel
  messageToReply?: undefined | SendbirdUserMessage | SendbirdFileMessage;
  setMessageToReply?: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
- messageToThread?: undefined | SendbirdUserMessage | SendbirdFileMessage;
+ messageForThread?: undefined | SendbirdUserMessage | SendbirdFileMessage;
 
  // mention
  SuggestedMentionList?: CommonComponent<SuggestedMentionListProps>;

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

@@ -369,12 +369,10 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
  sheetItems.push(menu.delete(message));
  }
  if (channel.isGroupChannel()) {
- if (channel.isGroupChannel()) {
- if (sbOptions.uikit.groupChannel.channel.replyType === 'thread' && onReplyInThreadMessage !== undefined) {
- sheetItems.push(menu.replyInThread(message));
- } else if (sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
- sheetItems.push(menu.reply(message));
- }
+ if (sbOptions.uikit.groupChannel.channel.replyType === 'thread' && onReplyInThreadMessage !== undefined) {
+ sheetItems.push(menu.replyInThread(message));
+ } else if (sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
+ sheetItems.push(menu.reply(message));
  }
  }
  }

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

@@ -19,6 +19,7 @@ const AVATAR_LIMIT = 5;
 type Props = {
  channel: SendbirdGroupChannel;
  message: SendbirdMessage;
+ variant: 'outgoing' | 'incoming';
  onPress?: (message: SendbirdUserMessage | SendbirdFileMessage) => void;
 };
 
@@ -47,38 +48,50 @@ const createRepliedUserAvatars = (mostRepliedUsers: User[]) => {
  });
 };
 
-const GroupChannelMessageReplyInfo = ({ channel, message, onPress }: Props) => {
+const GroupChannelMessageReplyInfo = ({ channel, message, variant, onPress }: Props) => {
  const { STRINGS } = useLocalization();
  const { select, palette } = useUIKitTheme();
 
  if (!channel || !message.threadInfo || !message.threadInfo.replyCount) return null;
 
- const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLAY_POSTFIX(message.threadInfo.replyCount || 0);
+ const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLAY_COUNT(message.threadInfo.replyCount || 0);
  const onPressReply = () => {
  onPress?.(message as SendbirdUserMessage | SendbirdFileMessage);
  };
 
  const renderAvatars = createRepliedUserAvatars(message.threadInfo.mostRepliedUsers);
-
+ const containerStyle = variant === 'incoming' ? styles.incomingContainer : styles.outgoingContainer;
  return (
- <PressBox onPress={onPressReply} style={styles.messageContainer}>
+ <Box style={containerStyle}>
+ <PressBox onPress={onPressReply} style={styles.replyContainer}>
  {renderAvatars}
- <Text caption3 color={select({ light: palette.primary300, dark: palette.primary200 })} style={styles.message}>
+ <Text caption3 color={select({ light: palette.primary300, dark: palette.primary200 })} style={styles.replyText}>
  {replyCountText}
  </Text>
  </PressBox>
+ </Box>
  );
 };
 
 const styles = createStyleSheet({
- container: {
+ incomingContainer: {
+ marginTop: 4,
+ justifyContent: 'flex-start',
+ flexDirection: 'row',
+ height: 20,
+ },
+ outgoingContainer: {
+ marginTop: 4,
  flexDirection: 'row',
+ justifyContent: 'flex-end',
+ height: 20,
  },
- messageContainer: {
+ replyContainer: {
+ marginLeft: 40,
  flexDirection: 'row',
- alignItems: 'flex-end',
+ alignItems: 'center',
  },
- message: {
+ replyText: {
  marginHorizontal: 4,
  },
  avatarContainer: {
@@ -87,8 +100,9 @@ const styles = createStyleSheet({
  height: 20,
  },
  avatar: {
- width: '100%',
- height: '100%',
+ width: 20,
+ height: 20,
+ borderRadius: 10,
  },
  avatarOverlay: {
  position: 'absolute',

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

@@ -74,10 +74,10 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
  return null;
  });
 
- const renderReplyInfo = useIIFE(() => {
+ const replyInfo = useIIFE(() => {
  if (sbOptions.uikit.groupChannel.channel.replyType !== 'thread') return null;
  if (!channel || !message.threadInfo || !message.threadInfo.replyCount) return null;
- return <GroupChannelMessageReplyInfo channel={channel} message={message} onPress={onReplyInThreadMessage} />;
+ return <GroupChannelMessageReplyInfo channel={channel} message={message} variant={variant} onPress={onReplyInThreadMessage} />;
  });
 
  const resetPlayer = async () => {
@@ -154,7 +154,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
  groupedWithPrev: groupWithPrev,
  groupedWithNext: groupWithNext,
  children: reactionChildren,
- replyInfo: renderReplyInfo,
+ replyInfo: replyInfo,
  sendingStatus: isMyMessage(message, currentUser?.userId) ? (
  <GroupChannelMessageOutgoingStatus channel={channel} message={message} />
  ) : null,

packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadInput.tsx

@@ -22,7 +22,7 @@ const GroupChannelThreadInput = ({ inputDisabled, ...props }: GroupChannelThread
  channel={channel}
  messageToEdit={messageToEdit}
  setMessageToEdit={setMessageToEdit}
- messageToThread={parentMessage}
+ messageForThread={parentMessage}
  keyboardAvoidOffset={keyboardAvoidOffset}
  inputMuted={chatAvailableState.muted}
  inputFrozen={chatAvailableState.frozen}

packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadParentMessageInfo.tsx

@@ -1,4 +1,3 @@
-import { format } from 'date-fns';
 import React, { useContext } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
@@ -48,8 +47,8 @@ const GroupChannelThreadParentMessageInfo = (props: GroupChannelThreadProps['Par
  const { sbOptions } = useSendbirdChat();
 
  const nickName = parentMessage.sender?.nickname || STRINGS.LABELS.USER_NO_NAME;
- const messageTimestamp = format(new Date(parentMessage.updatedAt), "MMM dd 'at' h:mm a");
- const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLAY_POSTFIX(parentMessage.threadInfo?.replyCount || 0);
+ const messageTimestamp = STRINGS.GROUP_CHANNEL_THREAD.PARENT_MESSAGE_TIME(parentMessage);
+ const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLAY_COUNT(parentMessage.threadInfo?.replyCount || 0);
  const createMessagePressActions = useCreateMessagePressActions({
  channel: props.channel,
  currentUserId: props.currentUserId,
@@ -102,7 +101,7 @@ const GroupChannelThreadParentMessageInfo = (props: GroupChannelThreadProps['Par
  channel={props.channel}
  message={parentMessage}
  reactionAddonType={'thread_parent_message'}
- ></ReactionAddons.Message>
+ />
  </View>
  );
  } else {

packages/uikit-react-native/src/domain/groupChannelThread/module/moduleContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useRef, useState } from 'react';
+import React, { createContext, useRef, useState } from 'react';
 import type { FlatList } from 'react-native';
 
 import {
@@ -70,7 +70,7 @@ export const GroupChannelThreadContextsProvider: GroupChannelThreadModule['Provi
  parentMessage,
  keyboardAvoidOffset,
  messageToEdit: messageToEdit,
- setMessageToEdit: useCallback((message) => setMessageToEdit(message), []),
+ setMessageToEdit,
  }}
  >
  <GroupChannelThreadContexts.PubSub.Provider value={groupChannelThreadPubSub}>

packages/uikit-react-native/src/localization/StringSet.type.ts

@@ -142,8 +142,9 @@ export interface StringSet {
  MESSAGE_BUBBLE_EDITED_POSTFIX: string;
  MESSAGE_BUBBLE_UNKNOWN_TITLE: (message: SendbirdMessage) => string;
  MESSAGE_BUBBLE_UNKNOWN_DESC: (message: SendbirdMessage) => string;
-
- REPLAY_POSTFIX: (replyCount: number) => string;
+
+ PARENT_MESSAGE_TIME: (message: SendbirdMessage, locale?: Locale) => string;
+ REPLAY_COUNT: (replyCount: number) => string;
 
  /** GroupChannelThread > Suggested mention list */
  MENTION_LIMITED: (mentionLimit: number) => string;

packages/uikit-react-native/src/localization/createBaseStringSet.ts

@@ -1,6 +1,6 @@
 import type { Locale } from 'date-fns';
 
-import type { PartialDeep } from '@sendbird/uikit-utils';
+import { getThreadParentMessageTimeFormat, PartialDeep, SendbirdMessage } from '@sendbird/uikit-utils';
 import {
  getDateSeparatorFormat,
  getGroupChannelPreviewTime,
@@ -139,8 +139,9 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
  MESSAGE_BUBBLE_EDITED_POSTFIX: ' (edited)',
  MESSAGE_BUBBLE_UNKNOWN_TITLE: () => '(Unknown message type)',
  MESSAGE_BUBBLE_UNKNOWN_DESC: () => 'Cannot read this message.',
-
- REPLAY_POSTFIX: (replyCount: number) => getReplyCountFormat(replyCount),
+
+ PARENT_MESSAGE_TIME: (message: SendbirdMessage, locale?: Locale) => getThreadParentMessageTimeFormat(new Date(message.createdAt), locale ?? dateLocale),
+ REPLAY_COUNT: (replyCount: number) => getReplyCountFormat(replyCount),
 
  MENTION_LIMITED: (mentionLimit) => `You can have up to ${mentionLimit} mentions per message.`,
  ...overrides?.GROUP_CHANNEL_THREAD,

packages/uikit-utils/src/ui-format/common.ts

@@ -167,3 +167,14 @@ export const getReplyCountFormat = (replyCount: number) => {
 
  return '';
 };
+
+/**
+ * Thread parent message time format
+ *
+ * @param {Date} date
+ * @param {Locale} [locale]
+ * @returns {string}
+ * */
+export const getThreadParentMessageTimeFormat = (date: Date, locale?: Locale): string => {
+ return format(date, "MMM dd 'at' h:mm a", { locale });
+};