@ethora/chat-component-rn 26.8.1 → 26.8.2

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 _styledModalComponents = require("../styledModalComponents");
 var _reactNative = require("react-native");
-var _ModalHeaderComponent = _interopRequireDefault(require("../ModalHeaderComponent"));
-var _ProfileImagePlaceholder = require("../../MainComponents/ProfileImagePlaceholder");
 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 _ProfileImagePlaceholder = require("../../MainComponents/ProfileImagePlaceholder");
 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 _useT = require("../../../i18n/useT");
 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 t = (0, _useT.useT)();
-  const chatMenuOptions = (0, _react.useMemo)(() => [{
-    label: t('action.deleteChat'),
-    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteIcon, {}),
-    onClick: () => {
-      setIsModalOpen(true);
-    },
-    styles: {
-      color: 'red'
-    }
-  }], [t]);
   const dispatch = (0, _reactRedux.useDispatch)();
   const {
     client
@@ -61,6 +78,23 @@ const ChatProfileModal = ({
     config
   } = (0, _useChatSettingState.useChatSettingState)();
   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 /
@@ -75,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 {
@@ -149,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] || '',
@@ -158,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({
@@ -179,14 +228,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));
@@ -200,154 +250,311 @@ const ChatProfileModal = ({
       refreshToken: ''
     }));
   };
-  const menuOptions = (0, _react.useMemo)(() => userId => [{
-    label: t('action.appointAsAdmin'),
-    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);
+    }
+    setIsSearchOpen(true);
+    setTimeout(() => searchInputRef.current?.focus(), 50);
+  };
+  const restoreHeader = () => {
+    if (!collapsedForSearchRef.current) {
+      return;
     }
-  }, {
-    label: t('action.unban'),
-    icon: null,
-    onClick: () => {
-      dispatch((0, _chatSettingsSlice.setActiveModal)(_MODAL_TYPES.MODAL_TYPES.SETTINGS));
-      console.log('Settings clicked');
+    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
   }, {
-    label: t('action.delete'),
-    icon: null,
-    onClick: e => {
-      e?.preventDefault();
-      handleDeleteUser(userId);
+    key: 'leave',
+    label: t('action.leave'),
+    icon: color => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LeaveIcon, {
+      color: color
+    }),
+    onPress: handleLeave
+  }, {
+    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
+        });
+      }
     }
-  }], [t]);
-  (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: t('modal.chatProfile.title'),
-      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.jsxs)(_styledModalComponents.CenterContainer, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileImagePlaceholder.ProfileImagePlaceholder, {
-        name: activeRoom.title || activeRoom.name,
-        icon: activeRoom.icon
-        // 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.jsx)(_styledModalComponents.UserStatus, {
-          style: (0, _getElementFont.getElementFont)(config, 'profileStatus'),
-          children: t(activeRoom.usersCnt > 1 ? 'modal.chatProfile.memberCountPlural' : 'modal.chatProfile.memberCountSingular', {
-            count: activeRoom.usersCnt
-          })
-        })]
-      }), 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: t('modal.chatProfile.description')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Label, {
-          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: t('modal.chatProfile.chatType')
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Label, {
-          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: t('modal.chatProfile.memberListUnavailable')
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-          style: {
-            maxHeight: 400
-          },
-          showsVerticalScrollIndicator: true,
-          nestedScrollEnabled: true,
-          children: activeRoom?.roomMembers?.map((user, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: {
-              flexDirection: 'column',
-              alignItems: 'flex-start'
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: {
-                flexDirection: 'row',
-                justifyContent: 'flex-start',
-                paddingHorizontal: 8,
-                paddingVertical: 0,
-                alignItems: 'center',
-                width: '100%'
+    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)(_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.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
               },
+              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: {
-                  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.
+                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,
@@ -355,51 +562,187 @@ const ChatProfileModal = ({
                   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)],
+                  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)(_styledModalComponents.LabelData, {
-                    style: (0, _getElementFont.getElementFont)(config, 'profileSectionLabel'),
+                  }), !!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
+              }), (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
                 },
-                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: t('action.moreOptions')
-                  })
-                }),
-                onClose: () => console.log('Dropdown closed')
+                style: styles.memberRemove,
+                onPress: () => confirmRemoveMember(user),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteIcon, {
+                  width: 20,
+                  height: 20
+                })
               })]
-            }), index < (activeRoom?.roomMembers?.length || 0) - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledModalComponents.Divider, {})]
-          }, user.xmppUsername))
-        })
+            }, 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