Skip to content

Commit

Permalink
feat: added thread type in GroupChannel
Browse files Browse the repository at this point in the history 
fixed issue with mention suggestion list sorting
fixed issue with file upload size limit exceeded
  • Loading branch information
@OnestarLee
OnestarLee authored Jul 9, 2024
1 parent 3836c10 commit 5e815ea
Show file tree
Hide file tree
Showing 57 changed files with 3,180 additions and 785 deletions.
3 changes: 2 additions & 1 deletion packages/uikit-chat-hooks/src/common/useAppFeatures.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { ApplicationAttributes, PremiumFeatures, SendbirdChatSDK } from '@sendbird/uikit-utils';

export const useAppFeatures = (sdk: SendbirdChatSDK) => {
const { premiumFeatureList = [], applicationAttributes = [] } = sdk.appInfo ?? {};
const { premiumFeatureList = [], applicationAttributes = [], uploadSizeLimit } = sdk.appInfo ?? {};
return {
deliveryReceiptEnabled: premiumFeatureList.includes(PremiumFeatures.delivery_receipt),
broadcastChannelEnabled: applicationAttributes.includes(ApplicationAttributes.allow_broadcast_channel),
superGroupChannelEnabled: applicationAttributes.includes(ApplicationAttributes.allow_super_group_channel),
reactionEnabled: applicationAttributes.includes(ApplicationAttributes.reactions),
uploadSizeLimit: uploadSizeLimit,
};
};
Binary file added packages/uikit-react-native-foundation/src/assets/icon/icon-thread.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/uikit-react-native-foundation/src/assets/icon/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/uikit-react-native-foundation/src/assets/icon/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/uikit-react-native-foundation/src/assets/icon/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ const IconAssets = {
'streaming': require('./icon-streaming.png'),
'supergroup': require('./icon-supergroup.png'),
'theme': require('./icon-theme.png'),
'thread': require('./icon-thread.png'),
'thumbnail-none': require('./icon-thumbnail-none.png'),
'unarchive': require('./icon-unarchive.png'),
'user': require('./icon-user.png'),
Expand Down
18 changes: 17 additions & 1 deletion packages/uikit-react-native-foundation/src/ui/GroupChannelMessage/Message.file.voice.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ type Props = GroupChannelMessageProps<
{
durationMetaArrayKey?: string;
onUnmount: () => void;
initialCurrentTime?: number;
onSubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
onUnsubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
}
>;
const VoiceFileMessage = (props: Props) => {
Expand All @@ -35,6 +38,9 @@ const VoiceFileMessage = (props: Props) => {
message,
durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
onUnmount,
initialCurrentTime,
onSubscribeStatus,
onUnsubscribeStatus,
} = props;

const { colors } = useUIKitTheme();
Expand All @@ -45,7 +51,7 @@ const VoiceFileMessage = (props: Props) => {
const initialDuration = value ? parseInt(value, 10) : 0;
return {
status: 'paused',
currentTime: 0,
currentTime: initialCurrentTime || 0,
duration: initialDuration,
};
});
Expand All @@ -56,6 +62,16 @@ const VoiceFileMessage = (props: Props) => {
};
}, []);

useEffect(() => {
const updateCurrentTime = (currentTime: number) => {
setState((prev) => ({ ...prev, currentTime }));
};
onSubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);
return () => {
onUnsubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);
};
}, []);

const uiColors = colors.ui.groupChannelMessage[variant];
const remainingTime = state.duration - state.currentTime;

Expand Down
64 changes: 37 additions & 27 deletions packages/uikit-react-native-foundation/src/ui/GroupChannelMessage/MessageContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const MessageContainer = (props: Props) => {

MessageContainer.Incoming = function MessageContainerIncoming({
children,
replyInfo,
groupedWithNext,
groupedWithPrev,
message,
Expand All @@ -34,43 +35,49 @@ MessageContainer.Incoming = function MessageContainerIncoming({
const color = colors.ui.groupChannelMessage.incoming;

return (
<Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>
<Box width={26} marginRight={12}>
{(message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && (
<Pressable onPress={onPressAvatar}>
<Avatar size={26} uri={message.sender?.profileUrl} />
</Pressable>
)}
</Box>
<Box flexShrink={1}>
{parentMessage}
{!groupedWithPrev && !message.parentMessage && (
<Box marginLeft={12} marginBottom={4}>
{(message.isFileMessage() || message.isUserMessage()) && (
<Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>
{strings?.senderName ?? message.sender.nickname}
</Text>
)}
</Box>
)}

<Box flexDirection={'row'} alignItems={'flex-end'}>
<Box style={styles.bubble}>{children}</Box>
{!groupedWithNext && (
<Box marginLeft={4}>
<Text caption4 color={color.enabled.textTime}>
{strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
</Text>
<Box flexDirection={'column'} justifyContent={'flex-start'} alignItems={'flex-start'}>
<Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>
<Box width={26} marginRight={12}>
{(message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && (
<Pressable onPress={onPressAvatar}>
<Avatar size={26} uri={message.sender?.profileUrl} />
</Pressable>
)}
</Box>
<Box flexShrink={1}>
{parentMessage}
{!groupedWithPrev && !parentMessage && (
<Box marginLeft={12} marginBottom={4}>
{(message.isFileMessage() || message.isUserMessage()) && (
<Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>
{strings?.senderName ?? message.sender.nickname}
</Text>
)}
</Box>
)}
<Box flexDirection={'row'} alignItems={'flex-end'}>
<Box style={styles.bubble}>{children}</Box>
{!groupedWithNext && (
<Box marginLeft={4}>
<Text caption4 color={color.enabled.textTime}>
{strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
</Text>
</Box>
)}
</Box>
</Box>
</Box>
<Box flexDirection={'row'} marginTop={4}>
<Box width={26} marginRight={12} justifyContent={'flex-start'} />
{replyInfo}
</Box>
</Box>
);
};

MessageContainer.Outgoing = function MessageContainerOutgoing({
children,
replyInfo,
message,
groupedWithNext,
strings,
Expand All @@ -96,6 +103,9 @@ MessageContainer.Outgoing = function MessageContainerOutgoing({
</Box>
<Box style={styles.bubble}>{children}</Box>
</Box>
<Box flexDirection={'row'} justifyContent={'flex-end'} marginTop={4}>
{replyInfo}
</Box>
</Box>
);
};
Expand Down
1 change: 1 addition & 0 deletions packages/uikit-react-native-foundation/src/ui/GroupChannelMessage/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps
children?: React.ReactNode;
sendingStatus?: React.ReactNode;
parentMessage?: React.ReactNode;
replyInfo?: React.ReactNode;

groupedWithPrev: boolean;
groupedWithNext: boolean;
Expand Down
2 changes: 1 addition & 1 deletion packages/uikit-react-native/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
"@openspacelabs/react-native-zoomable-view": "^2.1.5",
"@sendbird/uikit-chat-hooks": "3.5.4",
"@sendbird/uikit-react-native-foundation": "3.5.4",
"@sendbird/uikit-tools": "0.0.1-alpha.76",
"@sendbird/uikit-tools": "0.0.1-alpha.77",
"@sendbird/uikit-utils": "3.5.4"
},
"devDependencies": {
Expand Down
29 changes: 24 additions & 5 deletions packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
channel,
messageToReply,
setMessageToReply,
messageForThread,
},
ref,
) {
Expand All @@ -71,11 +72,22 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(

const messageReplyParams = useIIFE(() => {
const { groupChannel } = sbOptions.uikit;
if (!channel.isGroupChannel() || groupChannel.channel.replyType === 'none' || !messageToReply) return {};
return {
parentMessageId: messageToReply.messageId,
isReplyToChannel: true,
};

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 {};
});

const messageMentionParams = useIIFE(() => {
Expand Down Expand Up @@ -152,6 +164,13 @@ 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 (messageForThread) {
if (messageForThread.threadInfo && messageForThread.threadInfo.replyCount > 0) {
return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_REPLY_TO_THREAD;
} else {
return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_REPLY_IN_THREAD;
}
}

return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
};
Expand Down
1 change: 1 addition & 0 deletions packages/uikit-react-native/src/components/ChannelInput/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export type ChannelInputProps = {
// reply - only available on group channel
messageToReply?: undefined | SendbirdUserMessage | SendbirdFileMessage;
setMessageToReply?: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
messageForThread?: undefined | SendbirdUserMessage | SendbirdFileMessage;

// mention
SuggestedMentionList?: CommonComponent<SuggestedMentionListProps>;
Expand Down
32 changes: 27 additions & 5 deletions packages/uikit-react-native/src/components/ChannelMessageList/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,10 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe

onEditMessage: (message: HandleableMessage) => void;
onReplyMessage?: (message: HandleableMessage) => void; // only available on group channel
onReplyInThreadMessage?: (message: HandleableMessage) => void; // only available on group channel
onDeleteMessage: (message: HandleableMessage) => Promise<void>;
onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<HandleableMessage | void>;
onPressParentMessage?: (parentMessage: SendbirdMessage) => void;
onPressParentMessage?: (parentMessage: SendbirdMessage, childMessage: HandleableMessage) => void;
onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;

renderMessage: (props: {
Expand All @@ -70,12 +71,14 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
onPress?: () => void;
onLongPress?: () => void;
onPressParentMessage?: ChannelMessageListProps<T>['onPressParentMessage'];
onReplyInThreadMessage?: ChannelMessageListProps<T>['onReplyInThreadMessage'];
onShowUserProfile?: UserProfileContextType['show'];
channel: T;
currentUserId?: ChannelMessageListProps<T>['currentUserId'];
enableMessageGrouping: ChannelMessageListProps<T>['enableMessageGrouping'];
bottomSheetItem?: BottomSheetItem;
isFirstItem: boolean;
hideParentMessage?: boolean;
}) => React.ReactElement | null;
renderNewMessagesButton:
| null
Expand All @@ -93,6 +96,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
channel,
onEditMessage,
onReplyMessage,
onReplyInThreadMessage,
onDeleteMessage,
onResendFailedMessage,
onPressMediaMessage,
Expand Down Expand Up @@ -123,6 +127,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
currentUserId,
onEditMessage,
onReplyMessage,
onReplyInThreadMessage,
onDeleteMessage,
onResendFailedMessage,
onPressMediaMessage,
Expand All @@ -139,6 +144,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
onPress,
onLongPress,
onPressParentMessage,
onReplyInThreadMessage,
onShowUserProfile: show,
enableMessageGrouping,
channel,
Expand Down Expand Up @@ -196,6 +202,7 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
onResendFailedMessage,
onEditMessage,
onReplyMessage,
onReplyInThreadMessage,
onDeleteMessage,
onPressMediaMessage,
}: Pick<
Expand All @@ -204,6 +211,7 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
| 'currentUserId'
| 'onEditMessage'
| 'onReplyMessage'
| 'onReplyInThreadMessage'
| 'onDeleteMessage'
| 'onResendFailedMessage'
| 'onPressMediaMessage'
Expand Down Expand Up @@ -322,6 +330,12 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
title: STRINGS.LABELS.CHANNEL_MESSAGE_REPLY,
onPress: () => onReplyMessage?.(message),
}),
replyInThread: (message: HandleableMessage) => ({
disabled: Boolean(message.parentMessageId),
icon: 'thread' as const,
title: STRINGS.LABELS.CHANNEL_MESSAGE_THREAD,
onPress: () => onReplyInThreadMessage?.(message),
}),
download: (message: HandleableMessage) => ({
icon: 'download' as const,
title: STRINGS.LABELS.CHANNEL_MESSAGE_SAVE,
Expand All @@ -336,8 +350,12 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
sheetItems.push(menu.edit(message));
sheetItems.push(menu.delete(message));
}
if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
sheetItems.push(menu.reply(message));
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));
}
}
}
}
Expand All @@ -350,8 +368,12 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
if (isMyMessage(message, currentUserId) && message.sendingStatus === 'succeeded') {
sheetItems.push(menu.delete(message));
}
if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
sheetItems.push(menu.reply(message));
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));
}
}
}
}
Expand Down
Loading

0 comments on commit 5e815ea

Please sign in to comment.