@amityco/react-native-social-uikit 4.0.0-df1703f8.0 → 4.0.0-e0eb8745.0

package/src/social/components/RenderTextWithMention/RenderTextWithMention.tsx

@@ -1,4 +1,4 @@
-import { Text, Linking, TouchableOpacity } from 'react-native';
+import { Text, Linking } from 'react-native';
 import { useStyles } from './styles';
 import { memo, useCallback } from 'react';
 import { useNavigation } from '@react-navigation/native';
@@ -6,7 +6,7 @@ import { IMentionPosition } from '../../../core/types';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../core/routes/RouteParamList';
 import ReadMore from '@fawazahmed/react-native-read-more';
-import { URL_REGEX } from '../../../core/constants';
+import { createUrlRegex } from '../../../core/constants';
 
 interface IrenderTextWithMention {
   mentionPositionArr: IMentionPosition[];
@@ -30,8 +30,9 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
     useNavigation() as NativeStackNavigationProp<RootStackParamList>;
   const linkArr = useCallback((text: string): LinkInfo[] => {
     const links: LinkInfo[] = [];
+    const urlRegex = createUrlRegex();
     let match;
-    while ((match = URL_REGEX.exec(text)) !== null) {
+    while ((match = urlRegex.exec(text)) !== null) {
       links.push({
         link: match[0],
         index: match.index,
@@ -88,20 +89,20 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
   }
 
   let currentPosition = 0;
-  const result: (string | React.JSX.Element)[][] = heightlightTextPositions.map(
-    ({ index, length, userId, link }, i) => {
+  const result: (string | React.ReactElement)[][] =
+    heightlightTextPositions.map(({ index, length, userId, link }, i) => {
       // Add non-highlighted text before the mention
       const nonHighlightedText = textPost.slice(currentPosition, index);
       // Add highlighted text
       const highlightedText = (
-        <TouchableOpacity
+        <Text
           onPress={() => handleOnClick(link, userId)}
           key={`highlighted-${i}`}
+          style={styles.mentionText}
+          selectable
         >
-          <Text style={styles.mentionText} selectable>
-            {textPost.slice(index, index + length)}
-          </Text>
-        </TouchableOpacity>
+          {textPost.slice(index, index + length)}
+        </Text>
       );
 
       // Update currentPosition for the next iteration
@@ -109,8 +110,7 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
 
       // Return an array of non-highlighted and highlighted text
       return [nonHighlightedText, highlightedText];
-    }
-  );
+    });
 
   // Add any remaining non-highlighted text after the mentions
   const remainingText = textPost.slice(currentPosition);

package/src/social/components/SearchResultItem/SearchResultItem.tsx

@@ -12,6 +12,7 @@ import { useAmityComponent } from '../../hooks';
 import TextElement from '../../elements/CommonElements/TextElement';
 import ImageElement from '../../elements/CommonElements/ImageElement';
 import { formatNumber } from '../../../core/utils/number';
+import { BrandBadge } from '../../elements/BrandBadge';
 type SearchResultItemType = {
   pageId?: PageID;
   componentId?: ComponentID;
@@ -95,6 +96,9 @@ const SearchResultItem: FC<SearchResultItemType> = ({
           searchType === TabName.Users ? item?.avatarCustomUrl : undefined
         }
         targetType={searchType === TabName.Communities ? 'community' : 'user'}
+        displayName={
+          searchType === TabName.Users ? item?.displayName : undefined
+        }
       />
       <View style={styles.profileInfoContainer}>
         <View style={styles.rowContainer}>
@@ -113,7 +117,12 @@ const SearchResultItem: FC<SearchResultItemType> = ({
             elementID={ElementID.community_display_name}
             text={item.displayName}
             style={styles.diaplayName}
+            numberOfLines={1}
+            ellipsizeMode="tail"
           />
+          {!isCommunity && item.isBrand && (
+            <BrandBadge width={20} height={20} />
+          )}
 
           {showOfficialBadgeIcon && (
             <ImageElement

package/src/social/components/SearchResultItem/styles.ts

@@ -10,13 +10,14 @@ export const useStyles = (theme: MyMD3Theme) => {
       marginVertical: 8,
     },
     avatar: {
-      width: 64,
-      height: 64,
-      borderRadius: 64,
+      width: 40,
+      height: 40,
+      borderRadius: 40,
     },
     profileInfoContainer: {
       marginLeft: 16,
       justifyContent: 'center',
+      flex: 1,
     },
     category: {
       marginVertical: 2,
@@ -37,13 +38,15 @@ export const useStyles = (theme: MyMD3Theme) => {
       marginVertical: 2,
     },
     rowContainer: {
-      justifyContent: 'center',
+      alignItems: 'center',
       flexDirection: 'row',
+      flex: 1,
     },
     diaplayName: {
       fontWeight: '600',
       fontSize: 15,
       color: theme.colors.base,
+      flexShrink: 1,
     },
     lockIcon: {
       width: 20,

package/src/social/components/Social/CommentList/CommentList.tsx

@@ -1,8 +1,7 @@
 import {
+  Alert,
   FlatList,
   Keyboard,
-  KeyboardAvoidingView,
-  Platform,
   Text,
   TouchableOpacity,
   View,
@@ -31,12 +30,14 @@ import MyAvatar from '../../MyAvatar/MyAvatar';
 import { useToast } from '../../../../core/stores/slices/toastSlice';
 import { lock } from '../../../../core/assets/icons';
 import { Typography } from '../../../../core/components/Typography/Typography';
+import { MAX_MENTION_USERS } from '../../../../core/constants';
+import useAuth from '../../../../core/hooks/useAuth';
 
 interface ICommentListProp {
   postId: string;
   postType: Amity.CommentReferenceType;
   disabledInteraction?: boolean;
-  onNavigate?: () => void;
+  onNavigate?: (userId: string) => void;
   withAvatar?: boolean;
   disabledComment?: boolean;
 }
@@ -68,10 +69,14 @@ const CommentList: FC<ICommentListProp> = ({
   withAvatar,
   disabledComment,
 }) => {
+  // Web parity: visitors never see the comment composer
+  const { isVisitorOrBot } = useAuth();
+  const hideComposer = disabledInteraction || isVisitorOrBot;
   const styles = useStyles();
   const theme = useTheme() as MyMD3Theme;
   const onNextPageRef = useRef<() => void | null>(null);
   const [commentList, setCommentList] = useState<IComment[]>([]);
+  const [loadingComments, setLoadingComments] = useState(true);
   const [replyUserName, setReplyUserName] = useState<string>('');
   const [replyCommentId, setReplyCommentId] = useState<string>('');
   const [inputMessage, setInputMessage] = useState('');
@@ -79,12 +84,29 @@ const CommentList: FC<ICommentListProp> = ({
   const [mentionsPosition, setMentionsPosition] = useState<IMentionPosition[]>(
     []
   );
+  const [inputBarHeight, setInputBarHeight] = useState(0);
+
   const { showCommentErrorToast } = useToast();
   const { renderInput, renderSuggestions } = useMention({
     value: inputMessage,
     onChange: setInputMessage,
     setMentionUsers: (user: TSearchItem) => {
-      setMentionNames((prev) => [...prev, user]);
+      setMentionNames((prev) => {
+        if (prev.some((mentionedUser) => mentionedUser.id === user.id)) {
+          return prev;
+        }
+
+        if (prev.length >= MAX_MENTION_USERS) {
+          Alert.alert(
+            'Too many users mentioned',
+            `You can only mention up to ${MAX_MENTION_USERS} users per post.`,
+            [{ text: 'OK' }]
+          );
+          return prev;
+        }
+
+        return [...prev, user];
+      });
     },
     setMentionPosition: (position: IMentionPosition) => {
       setMentionsPosition((prev) => [...prev, position]);
@@ -107,6 +129,7 @@ const CommentList: FC<ICommentListProp> = ({
         limit: commentListLimit,
       },
       ({ error, loading, data, hasNextPage, onNextPage }) => {
+        setLoadingComments(loading);
         if (error) return;
         if (!loading) {
           data && data.length > 0 && queryComment(data);
@@ -120,14 +143,22 @@ const CommentList: FC<ICommentListProp> = ({
   }, [postId, postType]);
 
   useEffect(() => {
-    const checkMentionNames = mentionNames.filter((item) => {
-      return inputMessage.includes(item.displayName);
-    });
-    const checkMentionPosition = mentionsPosition.filter((item) => {
-      return inputMessage.includes(item.displayName as string);
-    });
-    setMentionNames(checkMentionNames);
-    setMentionsPosition(checkMentionPosition);
+    // Parse active mention user IDs directly from the controlled-mentions
+    // value format: {@}[DisplayName](userId)
+    // Using displayName.includes() is unreliable — the same name can appear as
+    // plain text, and deletions may not remove the entry correctly.
+    const mentionTokenRegex = /\{@\}\[([^\]]*)\]\(([^)]*)\)/g;
+    const activeUserIds = new Set<string>();
+    let match: RegExpExecArray | null;
+    while ((match = mentionTokenRegex.exec(inputMessage)) !== null) {
+      activeUserIds.add(match[2]); // userId is capture group 2
+    }
+    setMentionNames((prev) =>
+      prev.filter((item) => activeUserIds.has(item.id))
+    );
+    setMentionsPosition((prev) =>
+      prev.filter((item) => activeUserIds.has(item.userId))
+    );
   }, [inputMessage]);
 
   const queryComment = async (comments: Amity.InternalComment[]) => {
@@ -184,8 +215,14 @@ const CommentList: FC<ICommentListProp> = ({
     if (inputMessage.trim() === '') {
       return;
     }
-    setInputMessage('');
-    Keyboard.dismiss();
+    if (mentionNames.length > MAX_MENTION_USERS) {
+      Alert.alert(
+        'Too many users mentioned',
+        'You can only mention up to 30 users per post.',
+        [{ text: 'OK' }]
+      );
+      return;
+    }
     const comment = replaceTriggerValues(
       inputMessage,
       ({ name }) => `@${name}`
@@ -202,6 +239,7 @@ const CommentList: FC<ICommentListProp> = ({
         );
       } catch (error) {
         showCommentErrorToast(error);
+        return;
       }
     } else {
       try {
@@ -214,9 +252,11 @@ const CommentList: FC<ICommentListProp> = ({
         );
       } catch (error) {
         showCommentErrorToast(error);
+        return;
       }
     }
     setInputMessage('');
+    Keyboard.dismiss();
     setMentionNames([]);
     setMentionsPosition([]);
     onCloseReply();
@@ -224,74 +264,74 @@ const CommentList: FC<ICommentListProp> = ({
 
   const renderFooterComponent = () => {
     return (
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.commentListFooter}
-        keyboardVerticalOffset={Platform.OS === 'ios' ? 140 : 20}
-      >
+      <View style={styles.commentListFooter}>
         {renderSuggestions({
           type: 'comment',
           style: styles.suggestionContainer,
+          bottom: inputBarHeight,
         })}
-        {replyUserName.length > 0 && (
-          <View style={styles.replyLabelWrap}>
-            <Text style={styles.replyLabel}>
-              Replying to{' '}
-              <Text style={styles.userNameLabel}>{replyUserName}</Text>
-            </Text>
-            <TouchableOpacity>
-              <TouchableOpacity onPress={onCloseReply}>
+        <View onLayout={(e) => setInputBarHeight(e.nativeEvent.layout.height)}>
+          {replyUserName.length > 0 && (
+            <View style={styles.replyLabelWrap}>
+              <Text style={styles.replyLabel}>
+                Replying to{' '}
+                <Text style={styles.userNameLabel}>{replyUserName}</Text>
+              </Text>
+              <TouchableOpacity>
+                <TouchableOpacity onPress={onCloseReply}>
+                  <SvgXml
+                    style={styles.closeIcon}
+                    xml={closeIcon(theme.colors.baseShade2)}
+                    width={20}
+                  />
+                </TouchableOpacity>
+              </TouchableOpacity>
+            </View>
+          )}
+          {!hideComposer &&
+            (disabledComment ? (
+              <View style={styles.disabledCommentWrap}>
                 <SvgXml
-                  style={styles.closeIcon}
-                  xml={closeIcon(theme.colors.baseShade2)}
                   width={20}
+                  height={20}
+                  xml={lock()}
+                  color={theme.colors.baseShade2}
                 />
-              </TouchableOpacity>
-            </TouchableOpacity>
-          </View>
-        )}
-        {!disabledInteraction &&
-          (disabledComment ? (
-            <View style={styles.disabledCommentWrap}>
-              <SvgXml
-                width={20}
-                height={20}
-                xml={lock()}
-                color={theme.colors.baseShade2}
-              />
-              <Typography.Body style={styles.disabledCommentText}>
-                Comments are disabled for this story
-              </Typography.Body>
-            </View>
-          ) : (
-            <View style={styles.inputWrap}>
-              {withAvatar && <MyAvatar />}
-              <View style={styles.inputContainer}>
-                {renderInput({
-                  multiline: true,
-                  style: styles.textInput,
-                  placeholder: 'Say something nice...',
-                  placeholderTextColor: theme.colors.baseShade3,
-                })}
+                <Typography.Body style={styles.disabledCommentText}>
+                  Comments are disabled for this story
+                </Typography.Body>
               </View>
-              <TouchableOpacity
-                disabled={inputMessage.length > 0 ? false : true}
-                onPress={handleSend}
-                style={styles.postBtn}
-              >
-                <Text
-                  style={
-                    inputMessage.length > 0
-                      ? styles.postBtnText
-                      : styles.postDisabledBtn
-                  }
+            ) : (
+              <View style={styles.inputWrap}>
+                {withAvatar && <MyAvatar />}
+                <View style={styles.inputContainer}>
+                  {renderInput({
+                    multiline: true,
+                    scrollEnabled: true,
+                    style: [styles.textInput, { lineHeight: 20 }],
+                    placeholder: 'Say something nice...',
+                    placeholderTextColor: theme.colors.baseShade3,
+                  })}
+                </View>
+                <TouchableOpacity
+                  disabled={inputMessage.length > 0 ? false : true}
+                  onPress={handleSend}
+                  style={styles.postBtn}
                 >
-                  Post
-                </Text>
-              </TouchableOpacity>
-            </View>
-          ))}
-      </KeyboardAvoidingView>
+                  <Text
+                    style={
+                      inputMessage.length > 0
+                        ? styles.postBtnText
+                        : styles.postDisabledBtn
+                    }
+                  >
+                    Post
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            ))}
+        </View>
+      </View>
     );
   };
 
@@ -300,6 +340,7 @@ const CommentList: FC<ICommentListProp> = ({
       <FlatList
         keyboardShouldPersistTaps="handled"
         data={itemWithAds}
+        contentContainerStyle={styles.listContent}
         renderItem={({ item }) => {
           if (isAmityAd(item)) {
             return <CommentAdComponent ad={item} />;
@@ -319,6 +360,13 @@ const CommentList: FC<ICommentListProp> = ({
         keyExtractor={(item, index) =>
           (isAmityAd(item) ? item.adId : item.commentId) + `_${index}`
         }
+        ListEmptyComponent={
+          loadingComments ? null : (
+            <View style={styles.emptyContainer}>
+              <Text style={styles.emptyText}>No comments yet</Text>
+            </View>
+          )
+        }
         onEndReachedThreshold={0.8}
         onEndReached={() => onNextPageRef.current && onNextPageRef.current()}
       />

package/src/social/components/Social/CommentList/styles.ts

@@ -10,9 +10,7 @@ export const useStyles = () => {
       height: '100%',
       paddingBottom: 40,
     },
-    suggestionContainer: {
-      bottom: 0,
-    },
+    suggestionContainer: {},
     container: {
       flex: 1,
       backgroundColor: theme.colors.background,
@@ -78,6 +76,7 @@ export const useStyles = () => {
       backgroundColor: theme.colors.baseShade4,
       paddingVertical: Platform.OS === 'android' ? 8 : 12,
       paddingHorizontal: Platform.OS === 'android' ? 12 : 14,
+      maxHeight: 5 * 20 + (Platform.OS === 'android' ? 8 * 2 : 12 * 2),
     },
     mentionText: {
       color: theme.colors.primary,
@@ -122,6 +121,10 @@ export const useStyles = () => {
     },
     commentListFooter: {
       width: width,
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
     },
     disabledCommentWrap: {
       flexDirection: 'row',
@@ -135,6 +138,18 @@ export const useStyles = () => {
     disabledCommentText: {
       color: theme.colors.baseShade2,
     },
+    emptyContainer: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    listContent: {
+      flexGrow: 1,
+    },
+    emptyText: {
+      color: theme.colors.baseShade2,
+      fontSize: 15,
+    },
   });
 
   return styles;

package/src/social/components/Social/CommentListItem/CommentListItem.tsx

@@ -38,9 +38,13 @@ import EditCommentModal from '../../legacy/EditCommentModal';
 import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../../core/providers/AmityUIKitProvider';
 import { useNavigation } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from '../../../../core/routes/RouteParamList';
 import ReplyCommentList from '../../legacy/Social/ReplyCommentList';
+import AmityReactionListComponent from '../../../features/reaction/components/List';
 import { CommentRepository } from '@amityco/ts-sdk-react-native';
 import { useTimeDifference } from '../../../hooks/useTimeDifference';
+import { useGlobalBehavior } from '../../../hooks/useGlobalBehavior';
 import { LinkPreview } from '../../PreviewLink';
 import { Typography } from '../../../../core/components/Typography/Typography';
 import { pen, report, trash, unreport } from '../../../../core/assets/icons';
@@ -69,7 +73,7 @@ export interface ICommentList {
   postType: Amity.CommentReferenceType;
   disabledInteraction?: boolean;
   disabledComment?: boolean;
-  onNavigate?: () => void;
+  onNavigate?: (userId: string) => void;
 }
 
 const CommentListItem = ({
@@ -78,8 +82,8 @@ const CommentListItem = ({
   onClickReply,
   postType,
   disabledInteraction,
-  onNavigate,
   disabledComment,
+  onNavigate,
 }: ICommentList) => {
   const theme = useTheme() as MyMD3Theme;
   const styles = useStyles();
@@ -122,7 +126,9 @@ const CommentListItem = ({
   const [editCommentModal, setEditCommentModal] = useState<boolean>(false);
   const [isEditComment, setIsEditComment] = useState<boolean>(false);
   const slideAnimation = useRef(new Animated.Value(0)).current;
-  const navigation = useNavigation<any>();
+  const [isReactionListVisible, setIsReactionListVisible] =
+    useState<boolean>(false);
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const { showToast } = useToast();
 
   useEffect(() => {
@@ -285,12 +291,15 @@ const CommentListItem = ({
     onClickReply && onClickReply(user, commentId);
   };
 
+  // Web parity: visitors see Like/Reply but taps show the sign-in toast
+  const { handleGlobalBehavior, isVisitorOrBot } = useGlobalBehavior();
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+  const onPressReply = () =>
+    handleGlobalBehavior({ defaultBehavior: onHandleReply });
+
   const onPressCommentReaction = () => {
-    onNavigate && onNavigate();
-    navigation.navigate('ReactionList', {
-      referenceId: commentId,
-      referenceType: 'comment',
-    });
+    setIsReactionListVisible(true);
   };
 
   return (
@@ -310,7 +319,19 @@ const CommentListItem = ({
         )}
         <View style={styles.rightSection}>
           <View style={styles.headerRow}>
-            <Text style={styles.headerText}>{user?.displayName}</Text>
+            <TouchableOpacity
+              disabled={!user?.userId}
+              onPress={() => {
+                if (!user?.userId) return;
+                if (onNavigate) {
+                  onNavigate(user.userId);
+                } else {
+                  navigation.navigate('UserProfile', { userId: user.userId });
+                }
+              }}
+            >
+              <Text style={styles.headerText}>{user?.displayName}</Text>
+            </TouchableOpacity>
           </View>
 
           <View style={styles.commentBubble}>
@@ -335,10 +356,7 @@ const CommentListItem = ({
                     </Typography.Caption>
                   )}
                 </View>
-                <TouchableOpacity
-                  onPress={() => addReactionToComment()}
-                  style={styles.likeBtn}
-                >
+                <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
                   <Typography.CaptionBold
                     style={isLike ? styles.likedText : styles.btnText}
                   >
@@ -346,20 +364,22 @@ const CommentListItem = ({
                   </Typography.CaptionBold>
                 </TouchableOpacity>
                 <TouchableOpacity
-                  onPress={disabledComment ? undefined : onHandleReply}
+                  onPress={disabledComment ? undefined : onPressReply}
                   style={styles.likeBtn}
                 >
                   <Typography.CaptionBold style={styles.btnText}>
                     Reply
                   </Typography.CaptionBold>
                 </TouchableOpacity>
-                <TouchableOpacity onPress={openModal}>
-                  <SvgXml
-                    xml={threeDots(theme.colors.baseShade2)}
-                    width="20"
-                    height="20"
-                  />
-                </TouchableOpacity>
+                {!isVisitorOrBot && (
+                  <TouchableOpacity onPress={openModal}>
+                    <SvgXml
+                      xml={threeDots(theme.colors.baseShade2)}
+                      width="20"
+                      height="20"
+                    />
+                  </TouchableOpacity>
+                )}
               </View>
 
               {likeReaction > 0 && (
@@ -386,6 +406,7 @@ const CommentListItem = ({
                 previewReplyCommentList[previewReplyCommentList.length - 1]
               }
               onDelete={onDelete}
+              onNavigate={onNavigate}
             />
           )}
           {isOpenReply && (
@@ -396,6 +417,7 @@ const CommentListItem = ({
                   commentId={item.commentId}
                   commentDetail={item}
                   onDelete={onDelete}
+                  onNavigate={onNavigate}
                 />
               )}
               keyExtractor={(item, index) => item.commentId + index}
@@ -409,7 +431,8 @@ const CommentListItem = ({
             >
               <SvgXml xml={expandIcon} />
               <Typography.CaptionBold style={styles.viewMoreText}>
-                View {childrenNumber} replies
+                View {childrenNumber}{' '}
+                {childrenNumber === 1 ? 'reply' : 'replies'}
               </Typography.CaptionBold>
             </TouchableOpacity>
           )}
@@ -499,6 +522,20 @@ const CommentListItem = ({
         onFinishEdit={onEditComment}
         onClose={onCloseEditCommentModal}
       />
+      <AmityReactionListComponent
+        isModalVisible={isReactionListVisible}
+        onCloseModal={() => setIsReactionListVisible(false)}
+        referenceId={commentId}
+        referenceType="comment"
+        onPressUser={(userId) => {
+          setIsReactionListVisible(false);
+          if (onNavigate) {
+            onNavigate(userId);
+          } else {
+            navigation.navigate('UserProfile', { userId });
+          }
+        }}
+      />
     </View>
   );
 };