@ethora/chat-component-rn 26.7.3 → 26.7.4

package/lib/commonjs/components/Modals/ChatProfileModal/ChatProfileModal.js

@@ -3,55 +3,72 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.searchScrollTarget = exports.default = exports.chatInitials = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactRedux = require("react-redux");
+var ImagePicker = _interopRequireWildcard(require("expo-image-picker"));
 var _useFileToken = require("../../../hooks/useFileToken");
 var _secureFileUrl = require("../../../helpers/secureFileUrl");
 var _styledModalComponents = require("../styledModalComponents");
-var _reactNative = require("react-native");
-var _ModalHeaderComponent = _interopRequireDefault(require("../ModalHeaderComponent"));
 var _ProfileImagePlaceholder = require("../../MainComponents/ProfileImagePlaceholder");
-var _reactRedux = require("react-redux");
 var _roomStore = require("../../../roomStore");
 var _auth = require("../../../networking/api-requests/auth.api");
 var _xmppProvider = require("../../../context/xmppProvider");
 var _roomsSlice = require("../../../roomStore/roomsSlice");
-var ImagePicker = _interopRequireWildcard(require("expo-image-picker"));
 var _Loader = _interopRequireDefault(require("../../styled/Loader"));
-var _Button = _interopRequireDefault(require("../../styled/Button"));
 var _icons = require("../../../assets/icons");
 var _useChatSettingState = require("../../../hooks/useChatSettingState");
 var _typography = require("../../../helpers/typography");
 var _getElementFont = require("../../../helpers/getElementFont");
+var _getIconColor = require("../../../helpers/getIconColor");
 var _rooms = require("../../../networking/api-requests/rooms.api");
 var _chatSettingsSlice = require("../../../roomStore/chatSettingsSlice");
 var _MODAL_TYPES = require("../../../helpers/constants/MODAL_TYPES");
-var _DropdownMenu = _interopRequireDefault(require("../../DropdownMenu/DropdownMenu"));
 var _SelectUsersModal = _interopRequireDefault(require("../SelectUsersModal/SelectUsersModal"));
 var _ToastContext = require("../../../context/ToastContext");
+var _useT = require("../../../i18n/useT");
 var _DeleteChatModal = _interopRequireDefault(require("./DeleteChatModal"));
+var _ReportChatModal = _interopRequireDefault(require("./ReportChatModal"));
+var _ProfileHeader = require("../ProfileHeader/ProfileHeader");
+var _ProfileMenu = _interopRequireDefault(require("../ProfileHeader/ProfileMenu"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** @format */
+
+/**
+ * Where the header should sit when search opens: tucked away at the
+ * collapsed offset when the picture is still expanded, and left exactly
+ * where it is when the user already scrolled it away.
+ */
+const searchScrollTarget = (isCollapsed, collapseDistance) => isCollapsed ? null : collapseDistance;
+
+/** Two uppercase letters for a chat without a picture, same rule the
+ * avatar placeholder uses for people. */
+exports.searchScrollTarget = searchScrollTarget;
+const chatInitials = name => {
+  const words = (name || '').trim().split(/\s+/).filter(Boolean);
+  const letters = (words.length >= 2 ? [words[0][0], words[1][0]] : [words[0]?.[0], words[0]?.[1]]).filter(c => !!c && /[\p{L}\p{N}]/u.test(c));
+  return letters.join('').toUpperCase();
+};
+exports.chatInitials = chatInitials;
 const ChatProfileModal = ({
   handleCloseModal
 }) => {
+  const t = (0, _useT.useT)();
   const [loading, setLoading] = (0, _react.useState)(false);
-  const [visible, setVisible] = (0, _react.useState)(false);
-  const [isModalOpen, setIsModalOpen] = (0, _react.useState)(false);
+  const [isDeleteOpen, setIsDeleteOpen] = (0, _react.useState)(false);
+  const [isReportOpen, setIsReportOpen] = (0, _react.useState)(false);
+  const [memberQuery, setMemberQuery] = (0, _react.useState)('');
+  const [isSearchOpen, setIsSearchOpen] = (0, _react.useState)(false);
+  // Measured, not guessed: this screen renders inside whatever frame the
+  // host gives it (the demo app keeps its own tab bar above), so the
+  // window height would overshoot.
+  const [viewportHeight, setViewportHeight] = (0, _react.useState)(0);
   const {
     showToast
   } = (0, _ToastContext.useToast)();
-  const chatMenuOptions = (0, _react.useMemo)(() => [{
-    label: 'Delete chat',
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteIcon, {}),
-    onClick: () => {
-      setIsModalOpen(true);
-    },
-    styles: {
-      color: 'red'
-    }
-  }], []);
   const dispatch = (0, _reactRedux.useDispatch)();
   const {
     client
@@ -63,6 +80,22 @@ const ChatProfileModal = ({
   const activeRoom = (0, _reactRedux.useSelector)(state => (0, _roomStore.getActiveRoom)(state));
   const fileToken = (0, _useFileToken.useFileToken)();
 
+  // Drives both the hero's parallax and the collapsed bar's fade-in. One
+  // shared value, written natively by the ScrollView.
+  const scrollY = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const scrollRef = (0, _react.useRef)(null);
+  const searchInputRef = (0, _react.useRef)(null);
+  const {
+    collapseDistance
+  } = (0, _ProfileHeader.useHeaderMetrics)();
+  // `scrollY` is driven natively, so its value can't be read back with
+  // addListener. The Animated.event's `listener` still fires on the JS
+  // side, which is enough to know which state the header is in.
+  const [isCollapsed, setIsCollapsed] = (0, _react.useState)(false);
+  // Set when search collapsed the header itself, so only then does
+  // dismissing search (or the keyboard) expand it again.
+  const collapsedForSearchRef = (0, _react.useRef)(false);
+
   // Pull live member list from the MUC when the modal opens — REST
   // hydration only fills the *count* (item.participants /
   // item.members.length); the actual roster comes from a `getRoomMembers`
@@ -76,6 +109,11 @@ const ChatProfileModal = ({
       }
     }
   }, [client, activeRoom?.jid]);
+  (0, _react.useEffect)(() => {
+    if (!activeRoom) {
+      dispatch((0, _chatSettingsSlice.setActiveModal)(undefined));
+    }
+  }, [activeRoom, dispatch]);
   const onUpload = async () => {
     let loadingSet = false;
     try {
@@ -88,7 +126,7 @@ const ChatProfileModal = ({
       const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
       if (!perm.granted) {
         _reactNative.Alert.alert('Permission required', 'Photo library permission is needed to select images.', [{
-          text: 'Cancel',
+          text: t('action.cancel'),
           onPress: () => setLoading(false),
           style: 'cancel'
         }, {
@@ -150,7 +188,17 @@ const ChatProfileModal = ({
       }
     }
   };
-  const handleDeleteUser = async userId => {
+  const onRemoveIcon = () => {
+    client?.setRoomImageStanza(activeRoom?.jid || '', '', 'icon', 'none');
+    dispatch((0, _roomsSlice.updateRoom)({
+      jid: activeRoom?.jid || '',
+      updates: {
+        icon: null
+      }
+    }));
+  };
+  const handleDeleteUser = async user => {
+    const userId = user.xmppUsername;
     try {
       await (0, _rooms.deleteRoomMember)({
         roomId: activeRoom?.jid?.split('@')[0] || '',
@@ -159,7 +207,7 @@ const ChatProfileModal = ({
       dispatch((0, _roomsSlice.updateRoom)({
         jid: activeRoom?.jid || '',
         updates: {
-          roomMembers: activeRoom?.roomMembers?.filter(user => user.xmppUsername !== userId)
+          roomMembers: activeRoom?.roomMembers?.filter(member => member.xmppUsername !== userId)
         }
       }));
       showToast({
@@ -178,14 +226,15 @@ const ChatProfileModal = ({
       });
     }
   };
-  const onRemoveClick = async () => {
-    client?.setRoomImageStanza(activeRoom?.jid || '', '', 'icon', 'none');
-    dispatch((0, _roomsSlice.updateRoom)({
-      jid: activeRoom?.jid || '',
-      updates: {
-        icon: null
-      }
-    }));
+  const confirmRemoveMember = user => {
+    _reactNative.Alert.alert(t('modal.chatProfile.removeMember'), `${user.firstName} ${user.lastName}`.trim(), [{
+      text: t('action.cancel'),
+      style: 'cancel'
+    }, {
+      text: t('action.delete'),
+      style: 'destructive',
+      onPress: () => handleDeleteUser(user)
+    }]);
   };
   const handleUserAvatarClick = user => {
     dispatch((0, _chatSettingsSlice.setActiveModal)(_MODAL_TYPES.MODAL_TYPES.PROFILE));
@@ -199,209 +248,499 @@ const ChatProfileModal = ({
       refreshToken: ''
     }));
   };
-  const menuOptions = (0, _react.useMemo)(() => userId => [{
-    label: 'Appoint as an admin',
-    icon: null,
-    onClick: () => {
-      dispatch((0, _chatSettingsSlice.setActiveModal)(_MODAL_TYPES.MODAL_TYPES.PROFILE));
-      console.log('Profile clicked');
+
+  // Leaving is XMPP-side (an unavailable presence to the MUC); dropping the
+  // room from the store is what actually takes the user out of the chat in
+  // the UI, and the `!activeRoom` effect above then closes this modal.
+  const handleLeave = () => {
+    _reactNative.Alert.alert(t('modal.leaveChat.title'), t('modal.leaveChat.description'), [{
+      text: t('action.cancel'),
+      style: 'cancel'
+    }, {
+      text: t('action.leave'),
+      style: 'destructive',
+      onPress: () => {
+        try {
+          client?.leaveTheRoomStanza?.(activeRoom?.jid || '');
+        } catch (error) {
+          console.error('Failed to leave the room:', error);
+        }
+        dispatch((0, _roomsSlice.deleteRoom)({
+          jid: activeRoom?.jid || ''
+        }));
+        handleCloseModal?.();
+      }
+    }]);
+  };
+  const isModerator = activeRoom?.role === 'moderator';
+  const canEditIcon = !config?.disableChatInfo?.disableIconEdit && activeRoom?.role !== 'participant';
+  const canAddMembers = isModerator && activeRoom?.type === 'group';
+  const canDeleteChat = isModerator && activeRoom?.type !== 'private';
+  const hasIcon = !!activeRoom?.icon;
+  const scrollHeaderTo = y => scrollRef.current?.scrollTo?.({
+    y,
+    animated: true
+  });
+
+  // Opening search from an expanded header tucks the picture away so the
+  // results and the keyboard have room; from an already-collapsed header
+  // it just opens the field. Whatever it collapsed, it puts back.
+  const openMemberSearch = () => {
+    const target = searchScrollTarget(isCollapsed, collapseDistance);
+    if (target !== null) {
+      collapsedForSearchRef.current = true;
+      scrollHeaderTo(target);
     }
-  }, {
-    label: 'Unban',
-    icon: null,
-    onClick: () => {
-      dispatch((0, _chatSettingsSlice.setActiveModal)(_MODAL_TYPES.MODAL_TYPES.SETTINGS));
-      console.log('Settings clicked');
+    setIsSearchOpen(true);
+    setTimeout(() => searchInputRef.current?.focus(), 50);
+  };
+  const restoreHeader = () => {
+    if (!collapsedForSearchRef.current) {
+      return;
+    }
+    collapsedForSearchRef.current = false;
+    scrollHeaderTo(0);
+  };
+  const closeMemberSearch = () => {
+    setMemberQuery('');
+    setIsSearchOpen(false);
+    _reactNative.Keyboard.dismiss();
+    restoreHeader();
+  };
+
+  // Putting the keyboard away is the other way out of search, so it
+  // restores the header too — the field stays, results and all.
+  (0, _react.useEffect)(() => {
+    if (!isSearchOpen) {
+      return undefined;
     }
+    const sub = _reactNative.Keyboard.addListener('keyboardDidHide', restoreHeader);
+    return () => sub.remove();
+  }, [isSearchOpen]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const heroActions = (0, _react.useMemo)(() => [{
+    key: 'search',
+    label: t('action.search'),
+    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchIcon, {
+      color: color
+    }),
+    onPress: openMemberSearch
+  }, {
+    key: 'leave',
+    label: t('action.leave'),
+    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LeaveIcon, {
+      color: color
+    }),
+    onPress: handleLeave
   }, {
-    label: 'Delete',
-    icon: null,
-    onClick: e => {
-      e?.preventDefault();
-      handleDeleteUser(userId);
+    key: 'report',
+    label: t('action.report'),
+    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ReportIcon, {
+      color: color
+    }),
+    onPress: () => setIsReportOpen(true)
+  }], [t, activeRoom?.jid] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  // "…" menu. Edit is the chat picture — the only chat detail this SDK can
+  // actually change (there is no update-chat endpoint for title/description),
+  // so it is only offered when the picture is editable.
+  const menuItems = (0, _react.useMemo)(() => {
+    const items = [];
+    if (canEditIcon) {
+      items.push({
+        key: 'edit',
+        label: t('action.edit'),
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EditIcon, {
+          color: "#141414",
+          width: 18,
+          height: 18
+        }),
+        onPress: onUpload
+      });
+      if (hasIcon) {
+        items.push({
+          key: 'remove-photo',
+          label: t('modal.chatProfile.removePhoto'),
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteIcon, {
+            width: 18,
+            height: 18
+          }),
+          onPress: onRemoveIcon
+        });
+      }
     }
-  }], []);
-  (0, _react.useEffect)(() => {
-    if (!activeRoom) {
-      dispatch((0, _chatSettingsSlice.setActiveModal)(undefined));
+    // The hero's Search button is off-screen once collapsed, so the menu
+    // carries it — the design's collapsed menu does the same.
+    if (isCollapsed) {
+      items.push({
+        key: 'search',
+        label: t('action.search'),
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchIcon, {
+          color: "#141414",
+          width: 18,
+          height: 18
+        }),
+        onPress: openMemberSearch
+      });
     }
-  }, [activeRoom, dispatch]);
+    items.push({
+      key: 'report',
+      label: t('action.report'),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ReportIcon, {
+        color: "#141414",
+        width: 18,
+        height: 18
+      }),
+      onPress: () => setIsReportOpen(true)
+    });
+    if (canDeleteChat) {
+      items.push({
+        key: 'delete-and-leave',
+        label: t('action.deleteAndLeave'),
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteIcon, {
+          width: 18,
+          height: 18
+        }),
+        destructive: true,
+        onPress: () => setIsDeleteOpen(true)
+      });
+    }
+    return items;
+  }, [canEditIcon, canDeleteChat, hasIcon, isCollapsed, t]); // eslint-disable-line react-hooks/exhaustive-deps
+
   if (!activeRoom) {
     return null;
   }
+  const title = activeRoom.title || activeRoom.name;
+  const memberCount = activeRoom.usersCnt ?? 0;
+  const subtitle = t(memberCount === 1 ? 'modal.chatProfile.memberCountSingular' : 'modal.chatProfile.memberCountPlural', {
+    count: memberCount
+  });
+  const heroImage = (0, _secureFileUrl.appendFileToken)(activeRoom.icon, fileToken) || null;
+  // A single flat colour behind the initials — the config's avatar colour
+  // when set, otherwise the primary. (The old per-name hash colour is what
+  // made the header read as two different greens next to the members' own
+  // avatars.)
+  const heroColor = config?.colors?.avatar || (0, _getIconColor.getIconColor)(config);
+  const members = activeRoom.roomMembers ?? [];
+  const query = memberQuery.trim().toLowerCase();
+  const visibleMembers = query ? members.filter(user => `${user.firstName ?? ''} ${user.lastName ?? ''}`.toLowerCase().includes(query)) : members;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.ModalContainerFullScreen, {
-    style: {
-      position: 'relative'
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalHeaderComponent.default, {
-      handleCloseModal: handleCloseModal,
-      headerTitle: 'Chat Profile',
-      titleStyle: (0, _typography.chatTextStyle)(config?.typography?.profile?.screenTitle),
-      rightMenu: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [activeRoom?.type === 'public' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-          EndIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.QrIcon, {}),
-          onPress: () => setVisible(true)
-        }), activeRoom.role === 'moderator' && activeRoom.type !== 'private' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownMenu.default, {
-          position: "right",
-          options: chatMenuOptions,
-          openButton: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-            style: {
-              padding: 8,
-              height: 40
-            },
-            EndIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MoreIcon, {}),
-            unstyled: true
-          })
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-      style: {
-        width: '100%',
-        flex: 1
-      },
-      contentContainerStyle: {
-        flexGrow: 1
-      },
-      showsVerticalScrollIndicator: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.CenterContainer, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileImagePlaceholder.ProfileImagePlaceholder, {
-          name: activeRoom.title || activeRoom.name,
-          icon: (0, _secureFileUrl.appendFileToken)(activeRoom.icon, fileToken)
-          // Two gates control whether the icon is editable:
-          //   1. role — only non-participants could edit before.
-          //   2. NEW: `disableChatInfo.disableIconEdit` — hard kill from
-          //      config so a consumer can make the icon read-only for
-          //      everyone (e.g. branded rooms, patient-facing apps).
-          // Both must allow it for the picker/remove affordances to show.
-          ,
-          upload: {
-            onUpload,
-            active: !config?.disableChatInfo?.disableIconEdit && activeRoom?.role !== 'participant'
-          },
-          remove: {
-            enabled: !config?.disableChatInfo?.disableIconEdit,
-            onRemoveClick
-          },
-          role: activeRoom?.role,
-          size: 128
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.UserInfo, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.UserName, {
-            fontSize: config?.typography?.profile?.title?.fontSize,
-            fontWeight: config?.typography?.profile?.title?.fontWeight,
-            children: activeRoom.title || activeRoom.name
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.UserStatus, {
-            style: (0, _getElementFont.getElementFont)(config, 'profileStatus'),
-            children: [activeRoom.usersCnt, ' ', activeRoom.usersCnt > 1 ? 'members' : 'member']
-          })]
-        }), activeRoom.role === 'moderator' && activeRoom.type === 'group' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectUsersModal.default, {})
-        }), !config?.disableChatInfo?.disableDescription && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.BorderedContainer, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.LabelData, {
-            style: (0, _getElementFont.getElementFont)(config, 'profileSectionLabel'),
-            children: "Description"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Label, {
-            children: activeRoom?.description || '—'
+    style: styles.screen,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.ScrollView, {
+      ref: scrollRef,
+      style: styles.scroll
+      // The collapsed state has to be reachable even when the member list
+      // is short: without this the content was shorter than the viewport,
+      // so the scroll had nowhere to go and simply bounced back.
+      ,
+      contentContainerStyle: [styles.scrollContent, viewportHeight > 0 && {
+        minHeight: viewportHeight + collapseDistance
+      }],
+      onLayout: e => setViewportHeight(e.nativeEvent.layout.height),
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      scrollEventThrottle: 16,
+      onScroll: _reactNative.Animated.event([{
+        nativeEvent: {
+          contentOffset: {
+            y: scrollY
+          }
+        }
+      }], {
+        useNativeDriver: true,
+        listener: e => {
+          const y = e?.nativeEvent?.contentOffset?.y ?? 0;
+          setIsCollapsed(y >= collapseDistance - 8);
+        }
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileHeader.ProfileHero, {
+        title: title,
+        subtitle: subtitle,
+        imageUri: heroImage,
+        fallbackColor: heroColor,
+        initials: chatInitials(title),
+        scrollY: scrollY,
+        actions: heroActions,
+        titleStyle: (0, _typography.chatTextStyle)(config?.typography?.profile?.title),
+        subtitleStyle: (0, _getElementFont.getElementFont)(config, 'profileStatus')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.body,
+        children: [!config?.disableChatInfo?.disableDescription && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.card,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.cardLabel, (0, _getElementFont.getElementFont)(config, 'profileSectionLabel')],
+            children: t('modal.chatProfile.description')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.cardValue,
+            children: activeRoom.description || '—'
           })]
-        }), !config?.disableChatInfo?.disableType && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.BorderedContainer, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.LabelData, {
-            style: (0, _getElementFont.getElementFont)(config, 'profileSectionLabel'),
-            children: "Chat type"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Label, {
+        }), !config?.disableChatInfo?.disableType && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.card,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.cardLabel, (0, _getElementFont.getElementFont)(config, 'profileSectionLabel')],
+            children: t('modal.chatProfile.chatType')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.cardValue,
             children: activeRoom.type || '—'
           })]
-        }), !config?.disableChatInfo?.hideMembers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.BorderedContainer, {
-          style: {
-            paddingHorizontal: 16,
-            paddingVertical: 8
-          },
-          children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loader.default, {}) : (activeRoom?.roomMembers?.length ?? 0) === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Label, {
-            style: {
-              opacity: 0.6,
-              textAlign: 'center',
-              paddingVertical: 8
-            },
-            children: "Member list unavailable"
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            children: activeRoom?.roomMembers?.map((user, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: {
-                flexDirection: 'column',
-                alignItems: 'flex-start'
+        }), !config?.disableChatInfo?.hideMembers && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.card,
+          children: [canAddMembers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectUsersModal.default, {
+            trigger: open => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+              testID: "chat-profile-add-members",
+              activeOpacity: 0.7,
+              style: styles.addMembersRow,
+              onPress: open,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AddNewIcon, {
+                color: (0, _getIconColor.getIconColor)(config)
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.addMembersLabel,
+                children: t('modal.chatProfile.addMembers')
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.cardLabel, (0, _getElementFont.getElementFont)(config, 'profileSectionLabel')],
+            children: t('modal.chatProfile.membersLabel', {
+              count: memberCount
+            })
+          }), isSearchOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.searchRow,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchIcon, {
+              color: "#8C8C8C",
+              width: 18,
+              height: 18
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+              testID: "chat-profile-member-search",
+              ref: searchInputRef,
+              style: styles.searchInput,
+              value: memberQuery,
+              onChangeText: setMemberQuery,
+              placeholder: t('search.members'),
+              placeholderTextColor: "#8C8C8C",
+              autoCorrect: false,
+              returnKeyType: "search"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              testID: "chat-profile-search-close",
+              activeOpacity: 0.7,
+              hitSlop: {
+                top: 8,
+                bottom: 8,
+                left: 8,
+                right: 8
               },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                style: {
-                  flexDirection: 'row',
-                  justifyContent: 'flex-start',
-                  paddingHorizontal: 8,
-                  paddingVertical: 0,
-                  alignItems: 'center',
-                  width: '100%'
-                },
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-                  style: {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'flex-start',
-                    gap: 16
-                  }
-                  // `disableChatInfo.disableMemberTap` blocks the
-                  // tap entirely so the user-profile popup never
-                  // opens. `disableMemberProfileActions` only hid
-                  // the action buttons INSIDE that popup, leaving
-                  // the popup itself to open on tap — this gate
-                  // closes the door. Customer-reported #16.
-                  ,
-                  onPress: config?.disableChatInfo?.disableMemberTap ? undefined : () => handleUserAvatarClick(user),
-                  disabled: !!config?.disableChatInfo?.disableMemberTap,
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileImagePlaceholder.ProfileImagePlaceholder, {
-                    name: `${user.firstName} ${user.lastName}`,
-                    size: 40
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                    style: {
-                      flexDirection: 'column',
-                      gap: 2,
-                      alignItems: 'flex-start',
-                      justifyContent: 'center'
-                    },
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledModalComponents.Label, {
-                      style: [{
-                        fontSize: 16,
-                        fontWeight: 600
-                      }, (0, _typography.chatTextStyle)(config?.typography?.profile?.memberName)],
-                      children: [user.firstName, " ", user.lastName]
-                    }), user.last_active && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.LabelData, {
-                      style: (0, _getElementFont.getElementFont)(config, 'profileSectionLabel'),
-                      children: new Date(user.last_active * 1000).toLocaleString()
-                    })]
+              onPress: closeMemberSearch,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.searchClose,
+                children: "\xD7"
+              })
+            })]
+          }), loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loader.default, {}) : visibleMembers.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            testID: "chat-profile-members-empty",
+            style: styles.emptyMembers,
+            children: members.length === 0 ? t('modal.chatProfile.membersUnavailable') : t('search.noResults')
+          }) : visibleMembers.map((user, index) => {
+            const banned = user.ban_status === 'banned';
+            const roleLabel = user.role && user.role !== 'none' && user.role !== 'participant' ? user.role : null;
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: [styles.memberRow, index > 0 && styles.memberDivider],
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+                style: styles.memberMain
+                // `disableChatInfo.disableMemberTap` blocks the tap
+                // entirely so the user-profile popup never opens.
+                // `disableMemberProfileActions` only hid the action
+                // buttons INSIDE that popup, leaving the popup itself
+                // to open on tap — this gate closes the door.
+                // Customer-reported #16.
+                ,
+                onPress: config?.disableChatInfo?.disableMemberTap ? undefined : () => handleUserAvatarClick(user),
+                disabled: !!config?.disableChatInfo?.disableMemberTap,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileImagePlaceholder.ProfileImagePlaceholder, {
+                  name: `${user.firstName} ${user.lastName}`,
+                  size: 40
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.memberText,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                    numberOfLines: 1,
+                    style: [styles.memberName, (0, _typography.chatTextStyle)(config?.typography?.profile?.memberName)],
+                    children: [user.firstName, " ", user.lastName]
+                  }), !!user.last_active && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    numberOfLines: 1,
+                    style: [styles.memberStatus, (0, _getElementFont.getElementFont)(config, 'profileSectionLabel')],
+                    children: new Date(user.last_active * 1000).toLocaleString()
                   })]
-                }), user.role && user.role !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: {
-                    backgroundColor: user.ban_status !== 'banned' ? '#F3F6FC' : '#FFEBEE',
-                    color: user.ban_status !== 'banned' ? '#0052CD' : '#F44336',
-                    padding: 5,
-                    borderRadius: 16,
-                    fontSize: 12
-                  },
-                  children: user.role
-                }), stateUser.xmppUsername !== user.xmppUsername && activeRoom.role === 'moderator' && activeRoom.type !== 'private' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownMenu.default, {
-                  options: menuOptions(user.xmppUsername),
-                  openButton: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-                    onPress: () => {},
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                      children: "More Options"
-                    })
-                  }),
-                  onClose: () => console.log('Dropdown closed')
                 })]
-              }), index < (activeRoom?.roomMembers?.length || 0) - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Divider, {})]
-            }, user.xmppUsername))
-          })
+              }), (banned || roleLabel) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.memberRole, banned && styles.memberBanned],
+                children: banned ? t('status.banned') : roleLabel
+              }), isModerator && activeRoom.type !== 'private' && stateUser.xmppUsername !== user.xmppUsername && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                testID: `chat-profile-remove-${user.xmppUsername}`,
+                activeOpacity: 0.7,
+                hitSlop: {
+                  top: 8,
+                  bottom: 8,
+                  left: 8,
+                  right: 8
+                },
+                style: styles.memberRemove,
+                onPress: () => confirmRemoveMember(user),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteIcon, {
+                  width: 20,
+                  height: 20
+                })
+              })]
+            }, user.xmppUsername);
+          })]
         })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileHeader.ProfileTopBar, {
+      title: title,
+      subtitle: subtitle,
+      imageUri: heroImage,
+      fallbackColor: heroColor,
+      initials: chatInitials(title),
+      scrollY: scrollY,
+      onBack: handleCloseModal,
+      titleStyle: (0, _typography.chatTextStyle)(config?.typography?.profile?.screenTitle),
+      menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileMenu.default, {
+        items: menuItems
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DeleteChatModal.default, {
-      isModalOpen: isModalOpen,
-      setIsModalOpen: setIsModalOpen
+      isModalOpen: isDeleteOpen,
+      setIsModalOpen: setIsDeleteOpen
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReportChatModal.default, {
+      visible: isReportOpen,
+      onClose: () => setIsReportOpen(false)
     })]
   });
 };
+const styles = _reactNative.StyleSheet.create({
+  screen: {
+    position: 'relative',
+    backgroundColor: '#F2F3F5'
+  },
+  scroll: {
+    width: '100%',
+    flex: 1
+  },
+  scrollContent: {
+    paddingBottom: 32
+  },
+  body: {
+    padding: 12,
+    gap: 12
+  },
+  card: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 14,
+    padding: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 1
+  },
+  cardLabel: {
+    color: '#8C8C8C',
+    fontSize: 14
+  },
+  cardValue: {
+    color: '#141414',
+    fontSize: 16,
+    marginTop: 4
+  },
+  addMembersRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    paddingBottom: 14,
+    marginBottom: 10,
+    borderBottomWidth: _reactNative.StyleSheet.hairlineWidth,
+    borderBottomColor: '#EFEFF2'
+  },
+  addMembersLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#141414'
+  },
+  searchRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginTop: 10,
+    paddingHorizontal: 12,
+    height: 40,
+    borderRadius: 12,
+    backgroundColor: '#F2F3F5'
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 15,
+    color: '#141414',
+    padding: 0
+  },
+  searchClose: {
+    fontSize: 22,
+    lineHeight: 24,
+    color: '#8C8C8C'
+  },
+  emptyMembers: {
+    opacity: 0.6,
+    textAlign: 'center',
+    paddingVertical: 8,
+    color: '#141414'
+  },
+  memberRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10
+  },
+  memberDivider: {
+    borderTopWidth: _reactNative.StyleSheet.hairlineWidth,
+    borderTopColor: '#EFEFF2'
+  },
+  memberMain: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12
+  },
+  memberText: {
+    flex: 1
+  },
+  memberName: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#141414'
+  },
+  memberStatus: {
+    fontSize: 13,
+    color: '#8C8C8C',
+    marginTop: 2
+  },
+  memberRole: {
+    fontSize: 13,
+    color: '#8C8C8C',
+    marginLeft: 8
+  },
+  memberBanned: {
+    color: '#E53935'
+  },
+  memberRemove: {
+    marginLeft: 12
+  },
+  menuButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0,0,0,0.28)',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
 var _default = exports.default = ChatProfileModal;
 //# sourceMappingURL=ChatProfileModal.js.map