@amityco/react-native-social-uikit 4.0.0 → 4.0.1-03923ef4.0

package/src/social/components/PollContent/PollOption.tsx

@@ -9,6 +9,7 @@ import Button, { BUTTON_SIZE } from '../Button/Button';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../core/routes/RouteParamList';
+import { useInteractionBehavior } from '../../hooks/useInteractionBehavior';
 
 type PollOptionsProps = {
   post?: Amity.Post<any>;
@@ -42,10 +43,10 @@ export function PollOptions({
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
   const { styles } = useStyles();
+  const { handleInteraction } = useInteractionBehavior();
   const [selectedOption, setSelectedOption] = useState<Amity.PollAnswer[]>([]);
 
   const btnDisabled = selectedOption.length === 0;
-  const optionDisabled = !!disabledPoll;
 
   return (
     <View>
@@ -60,7 +61,6 @@ export function PollOptions({
         <Radio.Group<Amity.PollAnswer>
           value={selectedOption[0]}
           style={styles.optionGroup}
-          disabled={optionDisabled}
           onChange={(value) => setSelectedOption([value])}
           select={(value, option) => value.id === option.id}
         >
@@ -79,11 +79,7 @@ export function PollOptions({
                 ]}
               >
                 <Radio.Label style={styles.optionLabel}>
-                  <Typography.BodyBold
-                    style={[optionDisabled && styles.optionLabelDisabled]}
-                  >
-                    {option.data}
-                  </Typography.BodyBold>
+                  <Typography.BodyBold>{option.data}</Typography.BodyBold>
                 </Radio.Label>
                 <Radio.Icon />
               </Radio.Option>
@@ -93,7 +89,6 @@ export function PollOptions({
         <CheckBox.Group<Amity.PollAnswer>
           value={selectedOption}
           style={styles.optionGroup}
-          disabled={optionDisabled}
           onChange={(value) => setSelectedOption(value)}
           select={(value, option) =>
             !!value.find((item) => item.id === option.id)
@@ -115,11 +110,7 @@ export function PollOptions({
                 ]}
               >
                 <CheckBox.Label style={styles.optionLabel}>
-                  <Typography.BodyBold
-                    style={[optionDisabled && styles.optionLabelDisabled]}
-                  >
-                    {option.data}
-                  </Typography.BodyBold>
+                  <Typography.BodyBold>{option.data}</Typography.BodyBold>
                 </CheckBox.Label>
                 <CheckBox.Icon />
               </CheckBox.Option>
@@ -144,12 +135,15 @@ export function PollOptions({
       )}
       {!isPollClosed && !isAlreadyVoted && (
         <TouchableOpacity
-          disabled={btnDisabled || optionDisabled}
-          style={[
-            styles.voteBtn,
-            (btnDisabled || optionDisabled) && styles.voteBtnDisabled,
-          ]}
-          onPress={() => votePoll(selectedOption.map((option) => option.id))}
+          disabled={btnDisabled}
+          style={[styles.voteBtn, btnDisabled && styles.voteBtnDisabled]}
+          onPress={() =>
+            handleInteraction({
+              defaultBehavior: () =>
+                votePoll(selectedOption.map((option) => option.id)),
+              isJoined: !disabledPoll,
+            })
+          }
         >
           <Typography.BodyBold style={styles.voteBtnLabel}>
             Vote

package/src/social/components/PostMenu/index.tsx

@@ -3,7 +3,7 @@ import { Alert, View } from 'react-native';
 import { getCommunityById } from '../../../core/legacy/community';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { useFlagPost, isModerator } from '../../hooks';
+import { useFlagPost, isModerator, useGlobalBehavior } from '../../hooks';
 import { deletePostById } from '../../../core/legacy/feed';
 import useAuth from '../../../core/hooks/useAuth';
 import globalFeedSlice from '../../../core/stores/slices/globalfeedSlice';
@@ -30,6 +30,7 @@ type PostMenuProps = {
 
 export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
   const { showToast } = useToast();
+  const { handleGlobalBehavior } = useGlobalBehavior();
   const { closePoll } = useClosePoll();
   const { client } = useAuth();
   const [communityData, setCommunityData] = useState<Amity.Community>(null);
@@ -121,7 +122,7 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
           iconProps={{ xml: report() }}
           onPress={() => {
             closeBottomSheet();
-            reportPost(postId);
+            handleGlobalBehavior({ defaultBehavior: () => reportPost(postId) });
           }}
         />
       ),
@@ -136,7 +137,9 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
           label={'Unreport post'}
           onPress={() => {
             closeBottomSheet();
-            unreportPost(postId);
+            handleGlobalBehavior({
+              defaultBehavior: () => unreportPost(postId),
+            });
           }}
         />
       ),

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

@@ -31,6 +31,7 @@ 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;
@@ -68,6 +69,8 @@ const CommentList: FC<ICommentListProp> = ({
   withAvatar,
   disabledComment,
 }) => {
+  const { isVisitorOrBot } = useAuth();
+  const hideComposer = disabledInteraction || isVisitorOrBot;
   const styles = useStyles();
   const theme = useTheme() as MyMD3Theme;
   const onNextPageRef = useRef<() => void | null>(null);
@@ -284,7 +287,7 @@ const CommentList: FC<ICommentListProp> = ({
               </TouchableOpacity>
             </View>
           )}
-          {!disabledInteraction &&
+          {!hideComposer &&
             (disabledComment ? (
               <View style={styles.disabledCommentWrap}>
                 <SvgXml

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

@@ -44,6 +44,7 @@ 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 { useInteractionBehavior } from '../../../hooks/useInteractionBehavior';
 import { LinkPreview } from '../../PreviewLink';
 import { Typography } from '../../../../core/components/Typography/Typography';
 import { pen, report, trash, unreport } from '../../../../core/assets/icons';
@@ -290,6 +291,20 @@ const CommentListItem = ({
     onClickReply && onClickReply(user, commentId);
   };
 
+  const { handleInteraction } = useInteractionBehavior();
+
+  const onPressLike = () =>
+    handleInteraction({
+      defaultBehavior: addReactionToComment,
+      isJoined: !disabledInteraction,
+    });
+
+  const onPressReply = () =>
+    handleInteraction({
+      defaultBehavior: onHandleReply,
+      isJoined: !disabledInteraction,
+    });
+
   const onPressCommentReaction = () => {
     setIsReactionListVisible(true);
   };
@@ -334,60 +349,55 @@ const CommentListItem = ({
               />
             )}
           </View>
-          {!disabledInteraction && (
-            <View style={styles.actionSection}>
-              <View style={styles.rowContainer}>
-                <View style={styles.timeRow}>
+          <View style={styles.actionSection}>
+            <View style={styles.rowContainer}>
+              <View style={styles.timeRow}>
+                <Typography.Caption style={styles.headerTextTime}>
+                  {timeDifference}
+                </Typography.Caption>
+                {(editedAt !== createdAt || isEditComment) && (
                   <Typography.Caption style={styles.headerTextTime}>
-                    {timeDifference}
+                    {' '}
+                    (edited)
                   </Typography.Caption>
-                  {(editedAt !== createdAt || isEditComment) && (
-                    <Typography.Caption style={styles.headerTextTime}>
-                      {' '}
-                      (edited)
-                    </Typography.Caption>
-                  )}
-                </View>
-                <TouchableOpacity
-                  onPress={() => addReactionToComment()}
-                  style={styles.likeBtn}
-                >
-                  <Typography.CaptionBold
-                    style={isLike ? styles.likedText : styles.btnText}
-                  >
-                    Like
-                  </Typography.CaptionBold>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  onPress={disabledComment ? undefined : onHandleReply}
-                  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>
+                )}
               </View>
-
-              {likeReaction > 0 && (
-                <TouchableOpacity
-                  onPress={onPressCommentReaction}
-                  style={styles.likeBtn}
+              <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
+                <Typography.CaptionBold
+                  style={isLike ? styles.likedText : styles.btnText}
                 >
-                  <Typography.Caption style={styles.btnText}>
-                    {likeReaction}
-                  </Typography.Caption>
-                  <SvgXml xml={likeCircle} width="20" height="20" />
-                </TouchableOpacity>
-              )}
+                  Like
+                </Typography.CaptionBold>
+              </TouchableOpacity>
+              <TouchableOpacity
+                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>
             </View>
-          )}
+
+            {likeReaction > 0 && (
+              <TouchableOpacity
+                onPress={onPressCommentReaction}
+                style={styles.likeBtn}
+              >
+                <Typography.Caption style={styles.btnText}>
+                  {likeReaction}
+                </Typography.Caption>
+                <SvgXml xml={likeCircle} width="20" height="20" />
+              </TouchableOpacity>
+            )}
+          </View>
 
           {previewReplyCommentList.length > 0 && !isOpenReply && (
             <ReplyCommentList
@@ -423,10 +433,10 @@ const CommentListItem = ({
               style={styles.viewMoreReplyBtn}
             >
               <SvgXml xml={expandIcon} />
-              <Typography.CaptionBold style={styles.viewMoreText}>
+              <Text style={styles.viewMoreText}>
                 View {childrenNumber}{' '}
                 {childrenNumber === 1 ? 'reply' : 'replies'}
-              </Typography.CaptionBold>
+              </Text>
             </TouchableOpacity>
           )}
 
@@ -436,9 +446,7 @@ const CommentListItem = ({
               style={styles.viewMoreReplyBtn}
             >
               <SvgXml xml={expandIcon} />
-              <Typography.CaptionBold style={styles.viewMoreText}>
-                View more replies
-              </Typography.CaptionBold>
+              <Text style={styles.viewMoreText}>View more replies</Text>
             </TouchableOpacity>
           )}
         </View>
@@ -492,7 +500,13 @@ const CommentListItem = ({
               </View>
             ) : (
               <TouchableOpacity
-                onPress={reportCommentObject}
+                onPress={() => {
+                  closeModal();
+                  handleInteraction({
+                    defaultBehavior: reportCommentObject,
+                    allowNonMember: true,
+                  });
+                }}
                 style={styles.modalRow}
               >
                 <SvgXml

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

@@ -71,12 +71,13 @@ export const useStyles = () => {
       paddingHorizontal: 8,
       marginTop: 12,
       flexDirection: 'row',
-      justifyContent: 'center',
       alignItems: 'center',
       alignSelf: 'flex-start',
     },
     viewMoreText: {
+      fontWeight: '600',
       color: theme.colors.secondaryShade1,
+      paddingHorizontal: 4,
     },
     commentText: {
       fontSize: 15,

package/src/social/components/legacy/Social/ReplyCommentList/index.tsx

@@ -44,6 +44,7 @@ import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../../../core/routes/RouteParamList';
 import { useTimeDifference } from '../../../../hooks';
+import { useGlobalBehavior } from '../../../../hooks/useGlobalBehavior';
 import { useToast } from '../../../../../core/stores/slices/toastSlice';
 import AmityReactionListComponent from '../../../../features/reaction/components/List';
 
@@ -155,6 +156,12 @@ export default function ReplyCommentList({
       await addCommentReaction(commentId, 'like');
     }
   };
+
+  const { handleGlobalBehavior } = useGlobalBehavior();
+
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+
   const deletePostObject = () => {
     Alert.alert('Delete reply', `This reply will be permanently deleted.`, [
       {
@@ -169,6 +176,7 @@ export default function ReplyCommentList({
     ]);
     setIsVisible(false);
   };
+
   const reportCommentObject = async () => {
     if (isReportByMe) {
       const unReportPost = await unReportTargetById('comment', commentId);
@@ -267,10 +275,7 @@ export default function ReplyCommentList({
                   </Typography.Caption>
                 )}
               </View>
-              <TouchableOpacity
-                onPress={() => addReactionToComment()}
-                style={styles.likeBtn}
-              >
+              <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
                 <Typography.CaptionBold
                   style={isLike ? styles.likedText : styles.btnText}
                 >
@@ -359,7 +364,12 @@ export default function ReplyCommentList({
               </View>
             ) : (
               <TouchableOpacity
-                onPress={reportCommentObject}
+                onPress={() => {
+                  closeModal();
+                  handleGlobalBehavior({
+                    defaultBehavior: reportCommentObject,
+                  });
+                }}
                 style={styles.modalRow}
               >
                 <SvgXml

package/src/social/elements/CommunityJoinButtonElement/CommunityJoinButtonElement.tsx

@@ -1,7 +1,11 @@
 import { FC, memo } from 'react';
 import { TouchableOpacityProps } from 'react-native';
 import { ComponentID, ElementID, PageID } from '../../enums/enumUIKitID';
-import { useAmityElement, useJoinCommunity } from '../../hooks';
+import {
+  useAmityElement,
+  useGlobalBehavior,
+  useJoinCommunity,
+} from '../../hooks';
 import { Button, BUTTON_SIZE } from '../../components/Button/Button';
 import { plus } from '../../../core/assets/icons';
 import { useCustomRankingGlobalFeed } from '../../hooks/useCustomRankingGlobalFeed';
@@ -36,9 +40,13 @@ const CommunityJoinButton: FC<CommunityJoinButtonType> = ({
     },
   });
 
+  const { handleGlobalBehavior } = useGlobalBehavior();
+
   const handleJoinCommunity = () => {
     if (!communityId) return;
-    joinCommunity(communityId);
+    handleGlobalBehavior({
+      defaultBehavior: () => joinCommunity(communityId),
+    });
   };
 
   if (isExcluded) return null;

package/src/social/features/comment/components/PostComment/CommentListItem/CommentListItem.tsx

@@ -43,7 +43,7 @@ import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../../../../core/providers/AmityUIKitProvider';
 import ReplyCommentList from '../ReplyCommentList/index';
 import { CommentRepository } from '@amityco/ts-sdk-react-native';
-import { useTimeDifference } from '../../../../../hooks';
+import { useGlobalBehavior, useTimeDifference } from '../../../../../hooks';
 import ModeratorBadgeElement from '../../../../../elements/ModeratorBadgeElement/ModeratorBadgeElement';
 import { BrandBadge } from '../../../../../elements/BrandBadge';
 import { ComponentID, PageID } from '../../../../../enums';
@@ -315,6 +315,14 @@ const CommentListItem = ({
     onClickReply && onClickReply(user, commentId);
   };
 
+  const { handleGlobalBehavior } = useGlobalBehavior();
+
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+
+  const onPressReply = () =>
+    handleGlobalBehavior({ defaultBehavior: onHandleReply });
+
   const onPressCommentReaction = () => {
     onNavigate && onNavigate();
     setIsReactionListVisible(true);
@@ -399,18 +407,12 @@ const CommentListItem = ({
                   )}
                 </View>
 
-                <TouchableOpacity
-                  onPress={() => addReactionToComment()}
-                  style={styles.likeBtn}
-                >
+                <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
                   <Text style={isLike ? styles.likedText : styles.btnText}>
                     {!isLike ? 'Like' : 'Liked'}
                   </Text>
                 </TouchableOpacity>
-                <TouchableOpacity
-                  onPress={onHandleReply}
-                  style={styles.likeBtn}
-                >
+                <TouchableOpacity onPress={onPressReply} style={styles.likeBtn}>
                   <Text style={styles.btnText}>Reply</Text>
                 </TouchableOpacity>
                 <TouchableOpacity onPress={openModal} style={styles.threeDots}>
@@ -532,7 +534,12 @@ const CommentListItem = ({
               </View>
             ) : (
               <TouchableOpacity
-                onPress={reportCommentObject}
+                onPress={() => {
+                  closeModal();
+                  handleGlobalBehavior({
+                    defaultBehavior: reportCommentObject,
+                  });
+                }}
                 style={styles.modalRow}
               >
                 <SvgXml

package/src/social/features/comment/components/PostComment/ReplyCommentList/index.tsx

@@ -27,6 +27,7 @@ import {
 import { Pressable } from 'react-native';
 import useAuth from '../../../../../../core/hooks/useAuth';
 import { useTimeDifference } from '../../../../../hooks/useTimeDifference';
+import { useGlobalBehavior } from '../../../../../hooks/useGlobalBehavior';
 import {
   isReportTarget,
   reportTargetById,
@@ -144,6 +145,12 @@ const ReplyCommentList = ({
       await addCommentReaction(commentId, 'like');
     }
   };
+
+  const { handleGlobalBehavior } = useGlobalBehavior();
+
+  const onPressLike = () =>
+    handleGlobalBehavior({ defaultBehavior: addReactionToComment });
+
   const deleteReplyComment = () => {
     Alert.alert('Delete reply', 'This reply will be permanently deleted.', [
       {
@@ -292,10 +299,7 @@ const ReplyCommentList = ({
                 )}
               </View>
 
-              <TouchableOpacity
-                onPress={() => addReactionToComment()}
-                style={styles.likeBtn}
-              >
+              <TouchableOpacity onPress={onPressLike} style={styles.likeBtn}>
                 <Text style={isLike ? styles.likedText : styles.btnText}>
                   {!isLike ? 'Like' : 'Liked'}
                 </Text>
@@ -342,6 +346,7 @@ const ReplyCommentList = ({
                 styles.twoOptions,
             ]}
           >
+            <View style={styles.handleBar} />
             {user?.userId === (client as Amity.Client).userId ? (
               <View>
                 <TouchableOpacity
@@ -369,7 +374,12 @@ const ReplyCommentList = ({
               </View>
             ) : (
               <TouchableOpacity
-                onPress={reportCommentObject}
+                onPress={() => {
+                  closeModal();
+                  handleGlobalBehavior({
+                    defaultBehavior: reportCommentObject,
+                  });
+                }}
                 style={styles.modalRow}
               >
                 <SvgXml

package/src/social/features/comment/components/PostComment/ReplyCommentList/styles.ts

@@ -6,6 +6,14 @@ export const useStyles = () => {
   const theme = useTheme() as MyMD3Theme;
 
   const styles = StyleSheet.create({
+    handleBar: {
+      alignSelf: 'center',
+      width: 36,
+      backgroundColor: theme.colors.baseShade4,
+      height: 5,
+      marginVertical: 10,
+      borderRadius: 10,
+    },
     commentWrap: {
       backgroundColor: theme.colors.background,
       paddingHorizontal: 12,

package/src/social/features/feed/components/TopNavigation/TopNavigation.tsx

@@ -15,6 +15,7 @@ import AmityCreatePostMenuComponent from '../CreatePostMenu';
 import TextKeyElement from '../../../../elements/TextKeyElement/TextKeyElement';
 import { usePopup } from '../../../../hooks/usePopup';
 import Popup from '../../../../components/PopupMenu/PopupMenu';
+import useAuth from '../../../../../core/hooks/useAuth';
 
 type AmitySocialHomeTopNavigationComponentType = {
   activeTab: string;
@@ -29,6 +30,7 @@ const AmitySocialHomeTopNavigationComponent: FC<
   const theme = componentConfig.themeStyles;
   const { AmitySocialHomeTopNavigationComponentBehaviour } = useBehaviour();
   const { isOpen, setIsOpen, toggle } = usePopup();
+  const { isVisitorOrBot } = useAuth();
 
   const [myCommunitiesTab] = useUiKitConfig({
     page: PageID.social_home_page,
@@ -169,7 +171,7 @@ const AmitySocialHomeTopNavigationComponent: FC<
           >
             <Image source={searchIcon} style={styles.icon} />
           </TouchableOpacity>
-          {activeTab !== exploreTab && (
+          {!isVisitorOrBot && activeTab !== exploreTab && (
             <TouchableOpacity
               style={styles.iconBtn}
               onPress={onPressCreate}

package/src/social/features/livestream/Player/Player.tsx

@@ -83,7 +83,7 @@ function AmityLiveStreamPlayerPage() {
   };
   useRoomSubscription({ room });
 
-  const { client } = useAuth();
+  const { client, isVisitorOrBot } = useAuth();
   const videoRef = useRef<any>(null);
   const isStreamEnding = useRef(false);
 
@@ -127,7 +127,7 @@ function AmityLiveStreamPlayerPage() {
   }, []);
 
   useEffect(() => {
-    if (!room?.status) return;
+    if (!room?.status || isVisitorOrBot) return;
 
     const shouldEnd =
       room.status === RoomStatus.ended ||
@@ -149,13 +149,14 @@ function AmityLiveStreamPlayerPage() {
         setVideoKey((prev) => prev + 1);
       }, 50);
     }
-  }, [room?.status, wasLive]);
+  }, [room?.status, wasLive, isVisitorOrBot]);
 
   useEffect(() => {
+    if (isVisitorOrBot) return;
     if (room?.status === RoomStatus.terminated) {
       navigation.replace('LivestreamTerminated', { type: 'viewer' });
     }
-  }, [room?.status, navigation]);
+  }, [room?.status, navigation, isVisitorOrBot]);
 
   const showControlsTemporarily = useCallback(() => {
     setShowControls(true);
@@ -171,9 +172,10 @@ function AmityLiveStreamPlayerPage() {
   }, [showControlsTemporarily]);
 
   const shouldShowEndThumbnail =
-    room?.status === RoomStatus.ended ||
-    (room?.status === RoomStatus.recorded && wasLive) ||
-    (room as any)?.user?.isGlobalBan;
+    !isVisitorOrBot &&
+    (room?.status === RoomStatus.ended ||
+      (room?.status === RoomStatus.recorded && wasLive) ||
+      (room as any)?.user?.isGlobalBan);
 
   if (!room || error) {
     return (
@@ -246,6 +248,7 @@ function AmityLiveStreamPlayerPage() {
                     setIsPaused(false);
                   }
                 }}
+                onEnd={() => setIsPaused(true)}
               />
             )}
 

package/src/social/features/post/Detail/index.tsx

@@ -43,6 +43,7 @@ import NetInfo from '@react-native-community/netinfo';
 import { useToast } from '../../../../core/stores/slices/toastSlice';
 import MyAvatar from '../../../components/MyAvatar/MyAvatar';
 import { MAX_MENTION_USERS } from '../../../../core/constants';
+import useAuth from '../../../../core/hooks/useAuth';
 
 import { SafeAreaView } from 'react-native-safe-area-context';
 import ErrorComponent from '../../../components/ErrorComponent/ErrorComponent';
@@ -73,6 +74,8 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
 }) => {
   const pageId = PageID.post_detail_page;
   const componentId = ComponentID.WildCardComponent;
+
+  const { isVisitorOrBot } = useAuth();
   const disabledInteraction = false;
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
@@ -285,7 +288,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
               </TouchableOpacity>
             </View>
           )}
-          {!disabledInteraction && (
+          {!disabledInteraction && !isVisitorOrBot && (
             <View style={styles.InputWrap}>
               <MyAvatar style={styles.myAvatar} />
               <View style={styles.inputContainer}>
@@ -398,7 +401,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
                 postData?.targetType === 'community' && postData?.targetId
               }
               postType="post"
-              disabledInteraction={false}
+              disabledInteraction={disabledInteraction}
               ListHeaderComponent={
                 postData && (
                   <AmityPostContentComponent