stream-chat-react 14.11.1 → 15.0.0-rc.1

package/dist/es/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelMemberActions.defaults.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberActions.defaults.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport debounce from 'lodash.debounce';\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport type { ChannelMemberResponse } from 'stream-chat';\n\nimport {\n  useChatContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useModalContext,\n  useTranslationContext,\n} from '../../../../context';\nimport { useChatViewNavigation } from '../../../SlotLayout';\nimport { useStableCallback } from '../../../../utils';\nimport { useStateStore } from '../../../../store';\nimport { Alert } from '../../../../components/Dialog';\nimport { Button } from '../../../../components/Button';\nimport { Switch } from '../../../../components/Form';\nimport { ListItemLayout } from '../../../../components/ListItemLayout';\nimport { GlobalModal } from '../../../../components/Modal';\nimport { useNotificationApi } from '../../../../components/Notifications';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\n\nexport type ChannelMemberActionType =\n  | 'blockUser'\n  | 'muteUser'\n  | 'removeUser'\n  | 'sendMessage'\n  | (string & {});\n\nexport type ChannelMemberActionItem = {\n  Component: React.ComponentType;\n  type: ChannelMemberActionType;\n};\n\ntype ChannelMemberActionContextValue = {\n  member: ChannelMemberResponse;\n  memberDisplayName: string;\n  targetUserId?: string;\n};\n\nconst ChannelMemberActionContext = createContext<\n  ChannelMemberActionContextValue | undefined\n>(undefined);\n\nexport const ChannelMemberActionProvider = ({\n  children,\n  value,\n}: React.PropsWithChildren<{ value: ChannelMemberActionContextValue }>) => (\n  <ChannelMemberActionContext.Provider value={value}>\n    {children}\n  </ChannelMemberActionContext.Provider>\n);\n\nexport const useChannelMemberActionContext = () => {\n  const contextValue = useContext(ChannelMemberActionContext);\n  if (!contextValue) {\n    throw new Error(\n      'The useChannelMemberActionContext hook was called outside of ChannelMemberActionProvider.',\n    );\n  }\n\n  return contextValue;\n};\n\nconst toError = (error: unknown) =>\n  error instanceof Error ? error : new Error('An unknown error occurred');\n\nconst MemberMuteActionIcon = () => {\n  const { IconMute } = useComponentContextIcons();\n\n  return (\n    <IconMute className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute' />\n  );\n};\n\nconst MemberUnmuteActionIcon = () => {\n  const { IconAudio } = useComponentContextIcons();\n\n  return (\n    <IconAudio className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--unmute' />\n  );\n};\n\nconst SendDirectMessageActionIcon = () => {\n  const { IconMessageBubble } = useComponentContextIcons();\n\n  return <IconMessageBubble className='str-chat__channel-detail__action-icon' />;\n};\n\nconst BlockUserActionIcon = () => {\n  const { IconNoSign } = useComponentContextIcons();\n\n  return (\n    <IconNoSign className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--block-user' />\n  );\n};\n\nconst RemoveUserActionIcon = () => {\n  const { IconUserRemove } = useComponentContextIcons();\n\n  return (\n    <IconUserRemove className='str-chat__icon--destructive str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--remove-user' />\n  );\n};\n\nconst channelMemberDetailActionClassName = 'str-chat__channel-member-detail-action';\n\nconst blockedUsersSelector = ({ userIds }: { userIds: string[] }) => ({ userIds });\n\ntype ChannelMemberConfirmationAlertProps = {\n  action: 'blockUser' | 'removeUser';\n  cancelLabel: string;\n  confirmLabel: string;\n  description: string;\n  isSubmitting?: boolean;\n  onCancel: () => void;\n  onConfirm: () => void;\n  testId: string;\n  title: string;\n};\n\nconst ChannelMemberConfirmationAlert = ({\n  action,\n  cancelLabel,\n  confirmLabel,\n  description,\n  isSubmitting,\n  onCancel,\n  onConfirm,\n  testId,\n  title,\n}: ChannelMemberConfirmationAlertProps) => (\n  <Alert.Root\n    className={clsx('str-chat__channel-member-confirmation-alert', {\n      [`str-chat__channel-member-confirmation-alert--${action}`]: action,\n    })}\n    data-testid={testId}\n  >\n    <Alert.Header description={description} title={title} />\n    <Alert.Actions>\n      <Button\n        appearance='solid'\n        data-testid={`${testId}-confirm-button`}\n        disabled={isSubmitting}\n        onClick={onConfirm}\n        size='md'\n        variant='danger'\n      >\n        {confirmLabel}\n      </Button>\n      <Button\n        appearance='outline'\n        autoFocus\n        data-testid={`${testId}-cancel-button`}\n        disabled={isSubmitting}\n        onClick={onCancel}\n        size='md'\n        variant='secondary'\n      >\n        {cancelLabel}\n      </Button>\n    </Alert.Actions>\n  </Alert.Root>\n);\n\nconst useChannelMemberActionFilterState = () => {\n  const { client } = useChatContext();\n  const { channel } = useChannelDetailContext();\n  const { targetUserId } = useChannelMemberActionContext();\n  const ownCapabilities = channel.data?.own_capabilities;\n  const isCurrentUser = targetUserId === client.user?.id;\n\n  return {\n    // Blocking is a personal, per-user action (client.blockUser/unBlockUser),\n    // independent of channel moderation capabilities like 'ban-channel-members'.\n    canBlockUser: !isCurrentUser && !!targetUserId,\n    canMuteUser: !isCurrentUser && !!targetUserId,\n    canRemoveUser:\n      !isCurrentUser &&\n      !!targetUserId &&\n      ownCapabilities?.includes('update-channel-members'),\n    canSendMessage: !isCurrentUser && !!targetUserId,\n  };\n};\n\nexport const useBaseChannelMemberActionSetFilter = (\n  channelMemberActionSet: ChannelMemberActionItem[],\n) => {\n  const { canBlockUser, canMuteUser, canRemoveUser, canSendMessage } =\n    useChannelMemberActionFilterState();\n\n  return useMemo(\n    () =>\n      channelMemberActionSet.filter((action) => {\n        switch (action.type) {\n          case 'blockUser':\n            return canBlockUser;\n          case 'muteUser':\n            return canMuteUser;\n          case 'removeUser':\n            return canRemoveUser;\n          case 'sendMessage':\n            return canSendMessage;\n          default:\n            return true;\n        }\n      }),\n    [canBlockUser, canMuteUser, canRemoveUser, canSendMessage, channelMemberActionSet],\n  );\n};\n\nconst SendDirectMessageAction = () => {\n  const { channelManager, client } = useChatContext();\n  const { open } = useChatViewNavigation();\n  const { close } = useModalContext();\n  const { channel } = useChannelDetailContext();\n  const { addNotification } = useNotificationApi();\n  const { t } = useTranslationContext();\n  const { targetUserId } = useChannelMemberActionContext();\n  const [isSending, setIsSending] = useState(false);\n\n  const openDirectMessage = useCallback(async () => {\n    if (!client.userID || !targetUserId || isSending) return;\n\n    setIsSending(true);\n    try {\n      const directMessageChannel = client.channel(channel.type, {\n        members: [client.userID, targetUserId].map((user_id) => ({ user_id })),\n      });\n      await directMessageChannel.watch();\n      // Selection is one navigation model: open the DM into a layout slot, then route it into\n      // the channel list(s) that should own it so it appears without a full re-query.\n      open({\n        key: directMessageChannel.cid ?? undefined,\n        kind: 'channel',\n        source: directMessageChannel,\n      });\n      channelManager.ingestChannel(directMessageChannel);\n      close();\n    } catch (error) {\n      addNotification({\n        context: { channel },\n        emitter: 'ChannelMemberDetail',\n        error: toError(error),\n        message: t(\n          'channelDetail.channelMemberActions.errorOpeningDirectMessage.text',\n          'Error opening direct message',\n        ),\n        severity: 'error',\n        type: 'api:channel:watch:failed',\n      });\n    } finally {\n      setIsSending(false);\n    }\n  }, [\n    addNotification,\n    channel,\n    client,\n    close,\n    channelManager,\n    isSending,\n    open,\n    t,\n    targetUserId,\n  ]);\n\n  const rootProps = useMemo(\n    () => ({\n      className: channelMemberDetailActionClassName,\n      disabled: isSending,\n      onClick: openDirectMessage,\n    }),\n    [isSending, openDirectMessage],\n  );\n\n  return (\n    <ListItemLayout\n      LeadingIcon={SendDirectMessageActionIcon}\n      RootElement='button'\n      rootProps={rootProps}\n      title={t(\n        'channelDetail.channelMemberActions.sendDirectMessage.title',\n        'Send direct message',\n      )}\n    />\n  );\n};\n\nconst UserMuteAction = () => {\n  const { channel } = useChannelDetailContext();\n  const { client, mutes } = useChatContext();\n  const { addNotification } = useNotificationApi();\n  const { t } = useTranslationContext();\n  const { targetUserId } = useChannelMemberActionContext();\n  const userMuted =\n    !!targetUserId && mutes.some((mute) => mute.target?.id === targetUserId);\n  const [optimisticUserMuted, setOptimisticUserMuted] = useState(userMuted);\n\n  useEffect(() => {\n    setOptimisticUserMuted(userMuted);\n  }, [userMuted]);\n\n  const toggleUserMuteRequest = useStableCallback(\n    (nextMuted: boolean, userId?: string) => {\n      if (!userId) return;\n\n      if (!nextMuted) {\n        return client.moderation\n          .unmute({ target_ids: [userId] })\n          .then(() =>\n            addNotification({\n              context: { channel },\n              emitter: 'ChannelMemberDetail',\n              message: t(\n                'channelDetail.channelManagementActions.userUnmuted.text',\n                'User unmuted',\n              ),\n              severity: 'success',\n              type: 'api:user:unmute:success',\n            }),\n          )\n          .catch((error) => {\n            // Reconcile to the truth source rather than a hard-coded value: with\n            // the debounced request, optimistic state may have flipped multiple\n            // times, so a fixed boolean can land on the wrong state.\n            setOptimisticUserMuted(userMuted);\n            return addNotification({\n              context: { channel },\n              emitter: 'ChannelMemberDetail',\n              error: toError(error),\n              message: t(\n                'channelDetail.channelManagementActions.errorUnmutingUser.text',\n                'Error unmuting user',\n              ),\n              severity: 'error',\n              type: 'api:user:unmute:failed',\n            });\n          });\n      }\n\n      return client.moderation\n        .mute({ target_ids: [userId] })\n        .then(() =>\n          addNotification({\n            context: { channel },\n            emitter: 'ChannelMemberDetail',\n            message: t(\n              'channelDetail.channelManagementActions.userMuted.text',\n              'User muted',\n            ),\n            severity: 'success',\n            type: 'api:user:mute:success',\n          }),\n        )\n        .catch((error) => {\n          setOptimisticUserMuted(userMuted);\n          return addNotification({\n            context: { channel },\n            emitter: 'ChannelMemberDetail',\n            error: toError(error),\n            message: t(\n              'channelDetail.channelManagementActions.errorMutingUser.text',\n              'Error muting user',\n            ),\n            severity: 'error',\n            type: 'api:user:mute:failed',\n          });\n        });\n    },\n  );\n\n  const toggleUserMute = useMemo(\n    () => debounce(toggleUserMuteRequest, 1000),\n    [toggleUserMuteRequest],\n  );\n\n  useEffect(\n    () => () => {\n      toggleUserMute.cancel();\n    },\n    [toggleUserMute],\n  );\n\n  const toggleOptimisticUserMute = useCallback(() => {\n    const nextMuted = !optimisticUserMuted;\n    setOptimisticUserMuted(nextMuted);\n    toggleUserMute(nextMuted, targetUserId);\n  }, [optimisticUserMuted, targetUserId, toggleUserMute]);\n\n  const rootProps = useMemo(\n    () => ({\n      'aria-pressed': optimisticUserMuted,\n      className: clsx('str-chat__form__switch-field', channelMemberDetailActionClassName),\n      onClick: toggleOptimisticUserMute,\n    }),\n    [optimisticUserMuted, toggleOptimisticUserMute],\n  );\n  const TrailingSlot = useMemo(() => {\n    function UserMuteSwitch() {\n      return <Switch on={optimisticUserMuted} presentation />;\n    }\n\n    return UserMuteSwitch;\n  }, [optimisticUserMuted]);\n\n  return (\n    <ListItemLayout\n      LeadingIcon={optimisticUserMuted ? MemberUnmuteActionIcon : MemberMuteActionIcon}\n      RootElement='button'\n      rootProps={rootProps}\n      title={\n        optimisticUserMuted\n          ? t('channelDetail.channelManagementActions.unmuteUser.title', 'Unmute user')\n          : t('channelDetail.channelManagementActions.muteUser.title', 'Mute user')\n      }\n      TrailingSlot={TrailingSlot}\n    />\n  );\n};\n\nconst BlockUserAction = () => {\n  const { client } = useChatContext();\n  const { Modal = GlobalModal } = useComponentContext();\n  const { channel } = useChannelDetailContext();\n  const { addNotification } = useNotificationApi();\n  const { t } = useTranslationContext();\n  const { memberDisplayName, targetUserId } = useChannelMemberActionContext();\n  const { userIds: blockedUserIds } = useStateStore(\n    client.blockedUsers,\n    blockedUsersSelector,\n  );\n  const isBlocked = !!targetUserId && new Set(blockedUserIds).has(targetUserId);\n  const [alertOpen, setAlertOpen] = useState(false);\n  const [userBlockInProgress, setUserBlockInProgress] = useState(false);\n\n  const closeBlockUserAlert = useCallback(() => {\n    setAlertOpen(false);\n  }, []);\n\n  const openBlockUserAlert = useCallback(() => {\n    setAlertOpen(true);\n  }, []);\n\n  const unblockUser = useCallback(async () => {\n    if (!targetUserId) return;\n\n    try {\n      setUserBlockInProgress(true);\n      await client.unblockUser(targetUserId);\n      addNotification({\n        context: { channel },\n        emitter: 'ChannelMemberDetail',\n        message: t('common.userUnblocked.text', 'User unblocked'),\n        severity: 'success',\n        type: 'api:user:unblock:success',\n      });\n    } catch (error) {\n      addNotification({\n        context: { channel },\n        emitter: 'ChannelMemberDetail',\n        error: toError(error),\n        message: t(\n          'channelDetail.channelManagementActions.errorUnblockingUser.text',\n          'Error unblocking user',\n        ),\n        severity: 'error',\n        type: 'api:user:unblock:failed',\n      });\n    } finally {\n      setAlertOpen(false);\n      setUserBlockInProgress(false);\n    }\n  }, [addNotification, channel, client, t, targetUserId]);\n\n  const blockUser = useCallback(async () => {\n    if (!targetUserId) return;\n\n    try {\n      setUserBlockInProgress(true);\n      await client.blockUser(targetUserId);\n      addNotification({\n        context: { channel },\n        emitter: 'ChannelMemberDetail',\n        message: t('common.userBlocked.text', 'User blocked'),\n        severity: 'success',\n        type: 'api:user:block:success',\n      });\n    } catch (error) {\n      addNotification({\n        context: { channel },\n        emitter: 'ChannelMemberDetail',\n        error: toError(error),\n        message: t(\n          'channelDetail.channelManagementActions.errorBlockingUser.text',\n          'Error blocking user',\n        ),\n        severity: 'error',\n        type: 'api:user:block:failed',\n      });\n    } finally {\n      setAlertOpen(false);\n      setUserBlockInProgress(false);\n    }\n  }, [addNotification, channel, client, t, targetUserId]);\n\n  const rootProps = useMemo(\n    () => ({\n      className: channelMemberDetailActionClassName,\n      disabled: userBlockInProgress,\n      onClick: openBlockUserAlert,\n    }),\n    [openBlockUserAlert, userBlockInProgress],\n  );\n\n  return (\n    <>\n      <ListItemLayout\n        destructive\n        LeadingIcon={BlockUserActionIcon}\n        RootElement='button'\n        rootProps={rootProps}\n        title={\n          isBlocked\n            ? t('channelDetail.channelMemberActions.unblockUser.title', 'Unblock user')\n            : t('channelDetail.channelManagementActions.blockUser.title', 'Block user')\n        }\n      />\n      <Modal open={alertOpen} role='alertdialog'>\n        <ChannelMemberConfirmationAlert\n          action='blockUser'\n          cancelLabel={t('common.cancel.label', 'Cancel')}\n          confirmLabel={\n            isBlocked\n              ? t('channelDetail.channelMemberActions.unblockUser.title', 'Unblock user')\n              : t('channelDetail.channelManagementActions.blockUser.title', 'Block user')\n          }\n          description={\n            isBlocked\n              ? t(\n                  'channelDetail.channelMemberActions.ableMessageAgain.description',\n                  '{{ member }} will be able to message you again.',\n                  {\n                    member: memberDisplayName,\n                  },\n                )\n              : t(\n                  'channelDetail.channelMemberActions.wonTAbleMessage.description',\n                  \"{{ member }} won't be able to message you anymore.\",\n                  {\n                    member: memberDisplayName,\n                  },\n                )\n          }\n          isSubmitting={userBlockInProgress}\n          onCancel={closeBlockUserAlert}\n          onConfirm={isBlocked ? unblockUser : blockUser}\n          testId='channel-detail-block-member-alert'\n          title={\n            isBlocked\n              ? t('channelDetail.channelMemberActions.unblockUser.title', 'Unblock user')\n              : t('channelDetail.channelManagementActions.blockUser.title', 'Block user')\n          }\n        />\n      </Modal>\n    </>\n  );\n};\n\nconst RemoveUserAction = () => {\n  const { Modal = GlobalModal } = useComponentContext();\n  const { channel } = useChannelDetailContext();\n  const { addNotification } = useNotificationApi();\n  const { t } = useTranslationContext();\n  const { memberDisplayName, targetUserId } = useChannelMemberActionContext();\n  const [alertOpen, setAlertOpen] = useState(false);\n  const [removeMemberInProgress, setRemoveMemberInProgress] = useState(false);\n\n  const closeRemoveUserAlert = useCallback(() => {\n    setAlertOpen(false);\n  }, []);\n\n  const openRemoveUserAlert = useCallback(() => {\n    setAlertOpen(true);\n  }, []);\n\n  const removeUser = useCallback(async () => {\n    if (!targetUserId) return;\n\n    try {\n      setRemoveMemberInProgress(true);\n      await channel.removeMembers([targetUserId]);\n      addNotification({\n        context: { channel },\n        emitter: 'ChannelMemberDetail',\n        message: t('channelDetail.channelMemberActions.userRemoved.text', 'User removed'),\n        severity: 'success',\n        type: 'api:channel:remove-members:success',\n      });\n      setAlertOpen(false);\n    } catch (error) {\n      addNotification({\n        context: { channel },\n        emitter: 'ChannelMemberDetail',\n        error: toError(error),\n        message: t(\n          'channelDetail.channelMemberActions.errorRemovingUser.text',\n          'Error removing user',\n        ),\n        severity: 'error',\n        type: 'api:channel:remove-members:failed',\n      });\n    } finally {\n      setRemoveMemberInProgress(false);\n    }\n  }, [addNotification, channel, t, targetUserId]);\n\n  const rootProps = useMemo(\n    () => ({\n      className: channelMemberDetailActionClassName,\n      disabled: removeMemberInProgress,\n      onClick: openRemoveUserAlert,\n    }),\n    [openRemoveUserAlert, removeMemberInProgress],\n  );\n\n  return (\n    <>\n      <ListItemLayout\n        destructive\n        LeadingIcon={RemoveUserActionIcon}\n        RootElement='button'\n        rootProps={rootProps}\n        title={t('channelDetail.channelMemberActions.removeUser.title', 'Remove user')}\n      />\n      <Modal open={alertOpen} role='alertdialog'>\n        <ChannelMemberConfirmationAlert\n          action='removeUser'\n          cancelLabel={t('common.cancel.label', 'Cancel')}\n          confirmLabel={t(\n            'channelDetail.channelMemberActions.removeUser.title',\n            'Remove user',\n          )}\n          description={t(\n            'channelDetail.channelMemberActions.removeChannel.description',\n            'Remove {{ member }} from this channel?',\n            {\n              member: memberDisplayName,\n            },\n          )}\n          isSubmitting={removeMemberInProgress}\n          onCancel={closeRemoveUserAlert}\n          onConfirm={removeUser}\n          testId='channel-detail-remove-member-alert'\n          title={t('channelDetail.channelMemberActions.removeUser.title', 'Remove user')}\n        />\n      </Modal>\n    </>\n  );\n};\n\nexport const DefaultChannelMemberActions = {\n  BlockUser: BlockUserAction,\n  MuteUser: UserMuteAction,\n  RemoveUser: RemoveUserAction,\n  SendDirectMessage: SendDirectMessageAction,\n};\n\nexport const defaultChannelMemberActionSet: ChannelMemberActionItem[] = [\n  {\n    Component: DefaultChannelMemberActions.SendDirectMessage,\n    type: 'sendMessage',\n  },\n  {\n    Component: DefaultChannelMemberActions.MuteUser,\n    type: 'muteUser',\n  },\n  {\n    Component: DefaultChannelMemberActions.BlockUser,\n    type: 'blockUser',\n  },\n  {\n    Component: DefaultChannelMemberActions.RemoveUser,\n    type: 'removeUser',\n  },\n];\n"],"mappings":"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"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberDetail.mjs

@@ -0,0 +1,77 @@
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { ChannelAvatar } from "../../../../components/Avatar/ChannelAvatar.mjs";
+import { Prompt } from "../../../../components/Dialog/components/Prompt.mjs";
+import { useModalContext } from "../../../../context/ModalContext.mjs";
+import { SectionNavigatorHeader } from "../../SectionNavigator/SectionNavigatorHeader.mjs";
+import { getMemberDisplayName } from "../ChannelMembersView/ChannelMembersView.utils.mjs";
+import { ChannelMemberActionProvider, defaultChannelMemberActionSet, useBaseChannelMemberActionSetFilter, useChannelMemberActionContext } from "./ChannelMemberActions.defaults.mjs";
+import { useMemo } from "react";
+import { convertTimestampToDate } from "stream-chat";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberDetail.tsx
+var getPresenceStatusText = (user, t) => {
+	if (user?.online) return t("common.online.label", "Online");
+	if (user?.last_active != null) return t("channelDetail.channelMemberDetail.lastSeen.label", "Last seen {{ timestamp }}", { timestamp: t("timestamp.ChannelMembersLastActive", { timestamp: convertTimestampToDate(user.last_active) }) });
+	return t("common.offline.label", "Offline");
+};
+var ChannelMemberDetail = ({ channelMemberActionSet = defaultChannelMemberActionSet, member, onBack }) => {
+	const { t } = useTranslationContext();
+	const memberDisplayName = getMemberDisplayName(member);
+	const memberStatusText = getPresenceStatusText(member.user, t);
+	return /* @__PURE__ */ jsx(ChannelMemberActionProvider, {
+		value: useMemo(() => ({
+			member,
+			memberDisplayName,
+			targetUserId: member.user?.id || member.user_id
+		}), [member, memberDisplayName]),
+		children: /* @__PURE__ */ jsx(ChannelMemberDetailContent, {
+			channelMemberActionSet,
+			memberDisplayName,
+			memberStatusText,
+			onBack
+		})
+	});
+};
+var ChannelMemberDetailContent = ({ channelMemberActionSet, memberDisplayName, memberStatusText, onBack }) => {
+	const { close } = useModalContext();
+	const { t } = useTranslationContext();
+	const { Avatar = ChannelAvatar } = useComponentContext();
+	const { member } = useChannelMemberActionContext();
+	const filteredActions = useBaseChannelMemberActionSetFilter(channelMemberActionSet);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "str-chat__channel-detail__channel-member-detail-view",
+		children: [/* @__PURE__ */ jsx(SectionNavigatorHeader, {
+			close,
+			goBack: onBack,
+			title: t("channelDetail.channelMemberDetail.memberDetail.title", "Member detail")
+		}), /* @__PURE__ */ jsxs(Prompt.Body, {
+			className: "str-chat__channel-detail__channel-member-detail-view__body",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__channel-detail__channel-member-detail-view__profile",
+				children: [/* @__PURE__ */ jsx(Avatar, {
+					imageUrl: member.user?.image,
+					isOnline: member.user?.online,
+					size: "2xl",
+					userName: memberDisplayName
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "str-chat__channel-detail__channel-member-detail-view__profile__details",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "str-chat__channel-detail__channel-member-detail-view__profile__details__title",
+						children: memberDisplayName
+					}), /* @__PURE__ */ jsx("div", {
+						className: "str-chat__channel-detail__channel-member-detail-view__profile__details__connection-status",
+						children: memberStatusText
+					})]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "str-chat__channel-detail__channel-member-detail-view__actions str-chat__form__switch-fieldset",
+				children: filteredActions.map(({ Component, type }) => /* @__PURE__ */ jsx(Component, {}, type))
+			})]
+		})]
+	});
+};
+//#endregion
+export { ChannelMemberDetail };
+
+//# sourceMappingURL=ChannelMemberDetail.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberDetail.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelMemberDetail.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMemberDetailView/ChannelMemberDetail.tsx"],"sourcesContent":["import { convertTimestampToDate } from 'stream-chat';\nimport React, { useMemo } from 'react';\nimport type { ChannelMemberResponse } from 'stream-chat';\n\nimport {\n  useComponentContext,\n  useModalContext,\n  useTranslationContext,\n} from '../../../../context';\nimport {\n  SectionNavigatorHeader,\n  type SectionNavigatorSectionContentProps,\n} from '../../SectionNavigator';\nimport { ChannelAvatar as DefaultChannelAvatar } from '../../../../components/Avatar';\nimport { Prompt } from '../../../../components/Dialog';\nimport {\n  type ChannelMemberActionItem,\n  ChannelMemberActionProvider,\n  defaultChannelMemberActionSet,\n  useBaseChannelMemberActionSetFilter,\n  useChannelMemberActionContext,\n} from './ChannelMemberActions.defaults';\nimport { getMemberDisplayName } from '../ChannelMembersView/ChannelMembersView.utils';\n\nexport type ChannelMemberDetailProps = SectionNavigatorSectionContentProps & {\n  /** The member whose details are shown. Required — the view is always opened\n   * for a specific, selected member. */\n  member: ChannelMemberResponse;\n  channelMemberActionSet?: ChannelMemberActionItem[];\n  onBack?: () => void;\n};\n\nconst getPresenceStatusText = (\n  user: ChannelMemberResponse['user'],\n  t: ReturnType<typeof useTranslationContext>['t'],\n) => {\n  if (user?.online) return t('common.online.label', 'Online');\n\n  if (user?.last_active != null) {\n    return t(\n      'channelDetail.channelMemberDetail.lastSeen.label',\n      'Last seen {{ timestamp }}',\n      {\n        timestamp: t('timestamp.ChannelMembersLastActive', {\n          timestamp: convertTimestampToDate(user.last_active),\n        }),\n      },\n    );\n  }\n\n  return t('common.offline.label', 'Offline');\n};\n\nexport const ChannelMemberDetail = ({\n  channelMemberActionSet = defaultChannelMemberActionSet,\n  member,\n  onBack,\n}: ChannelMemberDetailProps) => {\n  const { t } = useTranslationContext();\n\n  const memberDisplayName = getMemberDisplayName(member);\n  const memberStatusText = getPresenceStatusText(member.user, t);\n\n  const actionContextValue = useMemo(\n    () => ({\n      member,\n      memberDisplayName,\n      targetUserId: member.user?.id || member.user_id,\n    }),\n    [member, memberDisplayName],\n  );\n\n  return (\n    <ChannelMemberActionProvider value={actionContextValue}>\n      <ChannelMemberDetailContent\n        channelMemberActionSet={channelMemberActionSet}\n        memberDisplayName={memberDisplayName}\n        memberStatusText={memberStatusText}\n        onBack={onBack}\n      />\n    </ChannelMemberActionProvider>\n  );\n};\n\ntype ChannelMemberDetailContentProps = {\n  channelMemberActionSet: ChannelMemberActionItem[];\n  memberDisplayName: string;\n  memberStatusText: string;\n  onBack?: () => void;\n};\n\nconst ChannelMemberDetailContent = ({\n  channelMemberActionSet,\n  memberDisplayName,\n  memberStatusText,\n  onBack,\n}: ChannelMemberDetailContentProps) => {\n  const { close } = useModalContext();\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultChannelAvatar } = useComponentContext();\n  const { member } = useChannelMemberActionContext();\n\n  const filteredActions = useBaseChannelMemberActionSetFilter(channelMemberActionSet);\n\n  return (\n    <div className='str-chat__channel-detail__channel-member-detail-view'>\n      <SectionNavigatorHeader\n        close={close}\n        goBack={onBack}\n        title={t('channelDetail.channelMemberDetail.memberDetail.title', 'Member detail')}\n      />\n      <Prompt.Body className='str-chat__channel-detail__channel-member-detail-view__body'>\n        <div className='str-chat__channel-detail__channel-member-detail-view__profile'>\n          <Avatar\n            imageUrl={member.user?.image}\n            isOnline={member.user?.online}\n            size='2xl'\n            userName={memberDisplayName}\n          />\n          <div className='str-chat__channel-detail__channel-member-detail-view__profile__details'>\n            <div className='str-chat__channel-detail__channel-member-detail-view__profile__details__title'>\n              {memberDisplayName}\n            </div>\n            <div className='str-chat__channel-detail__channel-member-detail-view__profile__details__connection-status'>\n              {memberStatusText}\n            </div>\n          </div>\n        </div>\n\n        <div className='str-chat__channel-detail__channel-member-detail-view__actions str-chat__form__switch-fieldset'>\n          {filteredActions.map(({ Component, type }) => (\n            <Component key={type} />\n          ))}\n        </div>\n      </Prompt.Body>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAgCA,IAAM,yBACJ,MACA,MACG;CACH,IAAI,MAAM,QAAQ,OAAO,EAAE,uBAAuB,QAAQ;CAE1D,IAAI,MAAM,eAAe,MACvB,OAAO,EACL,oDACA,6BACA,EACE,WAAW,EAAE,sCAAsC,EACjD,WAAW,uBAAuB,KAAK,WAAW,EACpD,CAAC,EACH,CACF;CAGF,OAAO,EAAE,wBAAwB,SAAS;AAC5C;AAEA,IAAa,uBAAuB,EAClC,yBAAyB,+BACzB,QACA,aAC8B;CAC9B,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,oBAAoB,qBAAqB,MAAM;CACrD,MAAM,mBAAmB,sBAAsB,OAAO,MAAM,CAAC;CAW7D,OACE,oBAAC,6BAAD;EAA6B,OAVJ,eAClB;GACL;GACA;GACA,cAAc,OAAO,MAAM,MAAM,OAAO;EAC1C,IACA,CAAC,QAAQ,iBAAiB,CAIU;YAClC,oBAAC,4BAAD;GAC0B;GACL;GACD;GACV;EACT,CAAA;CAC0B,CAAA;AAEjC;AASA,IAAM,8BAA8B,EAClC,wBACA,mBACA,kBACA,aACqC;CACrC,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,SAAS,kBAAyB,oBAAoB;CAC9D,MAAM,EAAE,WAAW,8BAA8B;CAEjD,MAAM,kBAAkB,oCAAoC,sBAAsB;CAElF,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,wBAAD;GACS;GACP,QAAQ;GACR,OAAO,EAAE,wDAAwD,eAAe;EACjF,CAAA,GACD,qBAAC,OAAO,MAAR;GAAa,WAAU;aAAvB,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,UAAU,OAAO,MAAM;KACvB,UAAU,OAAO,MAAM;KACvB,MAAK;KACL,UAAU;IACX,CAAA,GACD,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBACZ;KACE,CAAA,GACL,oBAAC,OAAD;MAAK,WAAU;gBACZ;KACE,CAAA,CACF;MACF;OAEL,oBAAC,OAAD;IAAK,WAAU;cACZ,gBAAgB,KAAK,EAAE,WAAW,WACjC,oBAAC,WAAD,CAAuB,GAAP,IAAO,CACxB;GACE,CAAA,CACM;IACV;;AAET"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.mjs

@@ -0,0 +1,190 @@
+import { useStateStore } from "../../../../store/hooks/useStateStore.mjs";
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { Avatar } from "../../../../components/Avatar/Avatar.mjs";
+import { extractDisplayInfo } from "../../../../components/Avatar/utils.mjs";
+import { useNotificationApi } from "../../../../components/Notifications/hooks/useNotificationApi.mjs";
+import { Prompt } from "../../../../components/Dialog/components/Prompt.mjs";
+import { Checkbox } from "../../../../components/Form/Checkbox.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { ListItemLayout } from "../../../../components/ListItemLayout/ListItemLayout.mjs";
+import { useChannelDetailContext } from "../../ChannelDetailContext.mjs";
+import { ChannelDetailListLoadingIndicator } from "../../ChannelDetailListLoadingIndicator.mjs";
+import { canUpdateChannelMembers, getUserDisplayName } from "./ChannelMembersView.utils.mjs";
+import { VirtualizedList } from "../../VirtualizedList/VirtualizedList.mjs";
+import { useChannelMemberIds } from "./useChannelMemberIds.mjs";
+import { ChannelDetailSearchInput } from "../../ChannelDetailSearchInput.mjs";
+import { ChannelDetailEmptyList } from "../../ChannelDetailEmptyList.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { UserSearchSource } from "stream-chat";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx
+var USER_SEARCH_PAGE_SIZE = 30;
+var searchSourceItemsStateSelector = (state) => ({
+	isLoading: state.isLoading,
+	users: state.items
+});
+var EMPTY_USERS = [];
+var computeUserItemKey = (_, user) => user.id;
+var MuteIndicator = () => {
+	const { IconMute } = useComponentContextIcons();
+	return /* @__PURE__ */ jsx(IconMute, { className: "str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute" });
+};
+var readOnlyRootProps = { className: "str-chat__channel-detail__channel-members-view__list-item" };
+var ChannelMembersAddViewItem = ({ canManageChannelMembers, isMember, isMuted, isSelected, toggleSelectedUser, user }) => {
+	const { t } = useTranslationContext();
+	const { Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
+	const displayName = getUserDisplayName(user);
+	const LeadingSlot = useMemo(() => function MemberAvatar() {
+		return /* @__PURE__ */ jsx(Avatar$1, {
+			...extractDisplayInfo$1({ user }),
+			isOnline: user.online,
+			size: "md"
+		});
+	}, [
+		Avatar$1,
+		extractDisplayInfo$1,
+		user
+	]);
+	const SelectableTrailingSlot = useMemo(() => function SelectCheckbox() {
+		return /* @__PURE__ */ jsx(Checkbox, {
+			"aria-hidden": true,
+			checked: isSelected
+		});
+	}, [isSelected]);
+	const selectableRootProps = useMemo(() => ({
+		"aria-pressed": isSelected,
+		className: "str-chat__channel-detail__channel-members-view__list-item",
+		onClick: () => toggleSelectedUser(user.id)
+	}), [
+		isSelected,
+		toggleSelectedUser,
+		user.id
+	]);
+	if (canManageChannelMembers && !isMember) return /* @__PURE__ */ jsx(ListItemLayout, {
+		LeadingSlot,
+		RootElement: "button",
+		rootProps: selectableRootProps,
+		title: displayName,
+		TrailingSlot: SelectableTrailingSlot
+	});
+	return /* @__PURE__ */ jsx(ListItemLayout, {
+		LeadingSlot,
+		rootProps: readOnlyRootProps,
+		subtitle: isMember ? t("channelDetail.channelMembersAdd.alreadyMember.label", "Already a member") : void 0,
+		title: displayName,
+		TrailingSlot: isMuted ? MuteIndicator : void 0
+	});
+};
+var ChannelMembersAddView = ({ modeController, searchSource }) => {
+	const { client, mutes } = useChatContext();
+	const { t } = useTranslationContext();
+	const { channel } = useChannelDetailContext();
+	const canManageChannelMembers = canUpdateChannelMembers(channel);
+	const { addNotification } = useNotificationApi();
+	const memberUserIds = useChannelMemberIds(channel);
+	const memberIdSet = useMemo(() => new Set(memberUserIds), [memberUserIds]);
+	const userSearchSource = useMemo(() => searchSource ?? new UserSearchSource(client, {
+		allowEmptySearchString: true,
+		pageSize: USER_SEARCH_PAGE_SIZE,
+		resetOnNewSearchQuery: false
+	}), [client, searchSource]);
+	const { isLoading, users } = useStateStore(userSearchSource.state, searchSourceItemsStateSelector);
+	const [isSaving, setIsSaving] = useState(false);
+	const [selectedUserIds, setSelectedUserIds] = useState([]);
+	useEffect(() => {
+		userSearchSource.activate();
+		userSearchSource.search("");
+		return () => userSearchSource.cancelScheduledQuery();
+	}, [userSearchSource]);
+	const selectedUserIdSet = useMemo(() => new Set(selectedUserIds), [selectedUserIds]);
+	const mutedUserIdSet = useMemo(() => new Set(mutes.map((mute) => mute.target?.id)), [mutes]);
+	const handleSearchChange = useCallback((query) => {
+		userSearchSource.search(query);
+	}, [userSearchSource]);
+	const toggleSelectedUser = useCallback((userId) => setSelectedUserIds((currentSelectedUserIds) => currentSelectedUserIds.includes(userId) ? currentSelectedUserIds.filter((id) => id !== userId) : [...currentSelectedUserIds, userId]), []);
+	const renderItem = useCallback((_, user) => /* @__PURE__ */ jsx(ChannelMembersAddViewItem, {
+		canManageChannelMembers,
+		isMember: memberIdSet.has(user.id),
+		isMuted: mutedUserIdSet.has(user.id),
+		isSelected: selectedUserIdSet.has(user.id),
+		toggleSelectedUser,
+		user
+	}), [
+		canManageChannelMembers,
+		memberIdSet,
+		mutedUserIdSet,
+		selectedUserIdSet,
+		toggleSelectedUser
+	]);
+	const EmptyPlaceholder = useMemo(() => function ChannelMembersAddEmptyPlaceholder() {
+		if (isLoading || !users) return null;
+		return /* @__PURE__ */ jsx(ChannelDetailEmptyList, { children: t("channelDetail.channelMembersAdd.noUserFound.text", "No user found") });
+	}, [
+		isLoading,
+		t,
+		users
+	]);
+	const Footer = useMemo(() => function ChannelMembersAddListFooter() {
+		return /* @__PURE__ */ jsx(ChannelDetailListLoadingIndicator, { searchSource: userSearchSource });
+	}, [userSearchSource]);
+	const handleSave = async () => {
+		if (!canManageChannelMembers || !selectedUserIds.length || isSaving) return;
+		setIsSaving(true);
+		try {
+			await channel.addMembers(selectedUserIds);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMembersView",
+				message: t("channelDetail.channelMembersAdd.membersAdded.text", {
+					count: selectedUserIds.length,
+					defaultValue_one: "{{ count }} member added",
+					defaultValue_other: "{{ count }} members added"
+				}),
+				severity: "success",
+				type: "api:channel:addMembers:success"
+			});
+			setSelectedUserIds([]);
+			setIsSaving(false);
+			modeController.setMode("browse");
+		} catch (error) {
+			setIsSaving(false);
+			addNotification({
+				context: { channel },
+				emitter: "ChannelMembersView",
+				error,
+				message: t("channelDetail.channelMembersAdd.errorAddingMembers.text", "Error adding members"),
+				severity: "error",
+				type: "api:channel:addMembers:failed"
+			});
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Prompt.Body, {
+		className: "str-chat__channel-members-view__body",
+		children: [/* @__PURE__ */ jsx(ChannelDetailSearchInput, {
+			autoFocus: true,
+			onSearchChange: handleSearchChange
+		}), /* @__PURE__ */ jsx(VirtualizedList, {
+			className: "str-chat__channel-detail__channel-members-view__list",
+			computeItemKey: computeUserItemKey,
+			data: users ?? EMPTY_USERS,
+			EmptyPlaceholder,
+			Footer,
+			itemContent: renderItem,
+			loadNext: userSearchSource.search
+		})]
+	}), canManageChannelMembers && selectedUserIds.length > 0 && /* @__PURE__ */ jsx(Prompt.Footer, { children: /* @__PURE__ */ jsx(Prompt.FooterControls, { children: /* @__PURE__ */ jsx(Prompt.FooterControlsButtonPrimary, {
+		disabled: isSaving,
+		onClick: handleSave,
+		children: t("channelDetail.channelMembersAdd.addMembers.text", {
+			count: selectedUserIds.length,
+			defaultValue_one: "Add {{ count }} member",
+			defaultValue_other: "Add {{ count }} members"
+		})
+	}) }) })] });
+};
+//#endregion
+export { ChannelMembersAddView };
+
+//# sourceMappingURL=ChannelMembersAddView.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelMembersAddView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersAddView.tsx"],"sourcesContent":["import { type SearchSourceState, type UserResponse, UserSearchSource } from 'stream-chat';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport {\n  useChatContext,\n  useComponentContext,\n  useTranslationContext,\n} from '../../../../context';\nimport { useStateStore } from '../../../../store';\nimport { Avatar as DefaultAvatar } from '../../../../components/Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../../components/Avatar/utils';\nimport { Checkbox } from '../../../../components/Form';\nimport { useComponentContextIcons } from '../../../../context';\nimport { ListItemLayout } from '../../../../components/ListItemLayout';\nimport { VirtualizedList } from '../../VirtualizedList';\nimport { Prompt } from '../../../../components/Dialog';\nimport { useChannelDetailContext } from '../../ChannelDetailContext';\nimport { canUpdateChannelMembers, getUserDisplayName } from './ChannelMembersView.utils';\nimport { useChannelMemberIds } from './useChannelMemberIds';\nimport type { ChannelMembersModeViewProps } from './ChannelMembersView';\nimport { useNotificationApi } from '../../../../components/Notifications';\nimport { ChannelDetailSearchInput } from '../../ChannelDetailSearchInput';\nimport { ChannelDetailEmptyList } from '../../ChannelDetailEmptyList';\nimport { ChannelDetailListLoadingIndicator } from '../../ChannelDetailListLoadingIndicator';\n\nexport type ChannelMembersAddViewProps = ChannelMembersModeViewProps & {\n  searchSource?: UserSearchSource;\n};\n\nconst USER_SEARCH_PAGE_SIZE = 30;\n\nconst searchSourceItemsStateSelector = (state: SearchSourceState<UserResponse>) => ({\n  isLoading: state.isLoading,\n  users: state.items,\n});\n\nconst EMPTY_USERS: UserResponse[] = [];\n\nconst computeUserItemKey = (_: number, user: UserResponse) => user.id;\n\nconst MuteIndicator = () => {\n  const { IconMute } = useComponentContextIcons();\n\n  return (\n    <IconMute className='str-chat__channel-detail__action-icon str-chat__channel-detail__action-icon--mute' />\n  );\n};\n\nconst readOnlyRootProps = {\n  className: 'str-chat__channel-detail__channel-members-view__list-item',\n};\n\nconst ChannelMembersAddViewItem = ({\n  canManageChannelMembers,\n  isMember,\n  isMuted,\n  isSelected,\n  toggleSelectedUser,\n  user,\n}: {\n  canManageChannelMembers: boolean;\n  isMember: boolean;\n  isMuted: boolean;\n  isSelected: boolean;\n  toggleSelectedUser: (userId: string) => void;\n  user: UserResponse;\n}) => {\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const displayName = getUserDisplayName(user);\n\n  const LeadingSlot = useMemo(\n    () =>\n      function MemberAvatar() {\n        const displayInfo = extractDisplayInfo({ user });\n\n        return <Avatar {...displayInfo} isOnline={user.online} size='md' />;\n      },\n    [Avatar, extractDisplayInfo, user],\n  );\n\n  const SelectableTrailingSlot = useMemo(\n    () =>\n      function SelectCheckbox() {\n        return <Checkbox aria-hidden checked={isSelected} />;\n      },\n    [isSelected],\n  );\n\n  const selectableRootProps = useMemo(\n    () => ({\n      'aria-pressed': isSelected,\n      className: 'str-chat__channel-detail__channel-members-view__list-item',\n      onClick: () => toggleSelectedUser(user.id),\n    }),\n    [isSelected, toggleSelectedUser, user.id],\n  );\n\n  // Only non-members can be selected for adding. Existing members are\n  // listed (and flagged below) but render as a non-actionable row, like\n  // the read-only no-permission case.\n  if (canManageChannelMembers && !isMember) {\n    return (\n      <ListItemLayout\n        LeadingSlot={LeadingSlot}\n        RootElement='button'\n        rootProps={selectableRootProps}\n        title={displayName}\n        TrailingSlot={SelectableTrailingSlot}\n      />\n    );\n  }\n\n  return (\n    <ListItemLayout\n      LeadingSlot={LeadingSlot}\n      rootProps={readOnlyRootProps}\n      subtitle={\n        isMember\n          ? t('channelDetail.channelMembersAdd.alreadyMember.label', 'Already a member')\n          : undefined\n      }\n      title={displayName}\n      TrailingSlot={isMuted ? MuteIndicator : undefined}\n    />\n  );\n};\n\nexport const ChannelMembersAddView = ({\n  modeController,\n  searchSource,\n}: ChannelMembersAddViewProps) => {\n  const { client, mutes } = useChatContext();\n  const { t } = useTranslationContext();\n  const { channel } = useChannelDetailContext();\n  const canManageChannelMembers = canUpdateChannelMembers(channel);\n  const { addNotification } = useNotificationApi();\n\n  const memberUserIds = useChannelMemberIds(channel);\n  const memberIdSet = useMemo(() => new Set(memberUserIds), [memberUserIds]);\n\n  const userSearchSource = useMemo(\n    () =>\n      searchSource ??\n      new UserSearchSource(client, {\n        allowEmptySearchString: true,\n        pageSize: USER_SEARCH_PAGE_SIZE,\n        resetOnNewSearchQuery: false,\n      }),\n    [client, searchSource],\n  );\n\n  const { isLoading, users } = useStateStore(\n    userSearchSource.state,\n    searchSourceItemsStateSelector,\n  );\n\n  const [isSaving, setIsSaving] = useState(false);\n  const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);\n\n  useEffect(() => {\n    userSearchSource.activate();\n    userSearchSource.search('');\n\n    return () => userSearchSource.cancelScheduledQuery();\n  }, [userSearchSource]);\n\n  const selectedUserIdSet = useMemo(() => new Set(selectedUserIds), [selectedUserIds]);\n  const mutedUserIdSet = useMemo(\n    () => new Set(mutes.map((mute) => mute.target?.id)),\n    [mutes],\n  );\n\n  const handleSearchChange = useCallback(\n    (query: string) => {\n      userSearchSource.search(query);\n    },\n    [userSearchSource],\n  );\n\n  const toggleSelectedUser = useCallback(\n    (userId: string) =>\n      setSelectedUserIds((currentSelectedUserIds) =>\n        currentSelectedUserIds.includes(userId)\n          ? currentSelectedUserIds.filter((id) => id !== userId)\n          : [...currentSelectedUserIds, userId],\n      ),\n    [],\n  );\n\n  const renderItem = useCallback(\n    (_: number, user: UserResponse) => (\n      <ChannelMembersAddViewItem\n        canManageChannelMembers={canManageChannelMembers}\n        isMember={memberIdSet.has(user.id)}\n        isMuted={mutedUserIdSet.has(user.id)}\n        isSelected={selectedUserIdSet.has(user.id)}\n        toggleSelectedUser={toggleSelectedUser}\n        user={user}\n      />\n    ),\n    [\n      canManageChannelMembers,\n      memberIdSet,\n      mutedUserIdSet,\n      selectedUserIdSet,\n      toggleSelectedUser,\n    ],\n  );\n\n  // Only show the \"no results\" copy once a query has resolved (`users` is an\n  // array); while the first page loads `users` is undefined and nothing shows.\n  const EmptyPlaceholder = useMemo(\n    () =>\n      function ChannelMembersAddEmptyPlaceholder() {\n        if (isLoading || !users) return null;\n        return (\n          <ChannelDetailEmptyList>\n            {t('channelDetail.channelMembersAdd.noUserFound.text', 'No user found')}\n          </ChannelDetailEmptyList>\n        );\n      },\n    [isLoading, t, users],\n  );\n\n  const Footer = useMemo(\n    () =>\n      function ChannelMembersAddListFooter() {\n        return <ChannelDetailListLoadingIndicator searchSource={userSearchSource} />;\n      },\n    [userSearchSource],\n  );\n\n  const handleSave = async () => {\n    if (!canManageChannelMembers || !selectedUserIds.length || isSaving) return;\n\n    setIsSaving(true);\n    try {\n      await channel.addMembers(selectedUserIds);\n      addNotification({\n        context: { channel },\n        emitter: 'ChannelMembersView',\n        message: t('channelDetail.channelMembersAdd.membersAdded.text', {\n          count: selectedUserIds.length,\n          defaultValue_one: '{{ count }} member added',\n          defaultValue_other: '{{ count }} members added',\n        }),\n        severity: 'success',\n        type: 'api:channel:addMembers:success',\n      });\n      setSelectedUserIds([]);\n      setIsSaving(false);\n      modeController.setMode('browse');\n    } catch (error) {\n      setIsSaving(false);\n      addNotification({\n        context: { channel },\n        emitter: 'ChannelMembersView',\n        error: error as Error,\n        message: t(\n          'channelDetail.channelMembersAdd.errorAddingMembers.text',\n          'Error adding members',\n        ),\n        severity: 'error',\n        type: 'api:channel:addMembers:failed',\n      });\n    }\n  };\n\n  return (\n    <>\n      <Prompt.Body className='str-chat__channel-members-view__body'>\n        <ChannelDetailSearchInput autoFocus onSearchChange={handleSearchChange} />\n        <VirtualizedList\n          className='str-chat__channel-detail__channel-members-view__list'\n          computeItemKey={computeUserItemKey}\n          data={users ?? EMPTY_USERS}\n          EmptyPlaceholder={EmptyPlaceholder}\n          Footer={Footer}\n          itemContent={renderItem}\n          loadNext={userSearchSource.search}\n        />\n      </Prompt.Body>\n      {canManageChannelMembers && selectedUserIds.length > 0 && (\n        <Prompt.Footer>\n          <Prompt.FooterControls>\n            <Prompt.FooterControlsButtonPrimary disabled={isSaving} onClick={handleSave}>\n              {t('channelDetail.channelMembersAdd.addMembers.text', {\n                count: selectedUserIds.length,\n                defaultValue_one: 'Add {{ count }} member',\n                defaultValue_other: 'Add {{ count }} members',\n              })}\n            </Prompt.FooterControlsButtonPrimary>\n          </Prompt.FooterControls>\n        </Prompt.Footer>\n      )}\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.mjs

@@ -0,0 +1,111 @@
+import { useChatContext } from "../../../../context/ChatContext.mjs";
+import { useComponentContext } from "../../../../context/ComponentContext.mjs";
+import { useTranslationContext } from "../../../../context/TranslationContext.mjs";
+import { Avatar } from "../../../../components/Avatar/Avatar.mjs";
+import { extractDisplayInfo } from "../../../../components/Avatar/utils.mjs";
+import { Prompt } from "../../../../components/Dialog/components/Prompt.mjs";
+import { useComponentContextIcons } from "../../../../context/useComponentContextIcons.mjs";
+import { ListItemLayout } from "../../../../components/ListItemLayout/ListItemLayout.mjs";
+import { ChannelDetailListLoadingIndicator } from "../../ChannelDetailListLoadingIndicator.mjs";
+import { getMemberDisplayName, getMemberUserId } from "./ChannelMembersView.utils.mjs";
+import { VirtualizedList } from "../../VirtualizedList/VirtualizedList.mjs";
+import { ChannelDetailSearchInput } from "../../ChannelDetailSearchInput.mjs";
+import { ChannelDetailEmptyList } from "../../ChannelDetailEmptyList.mjs";
+import { useChannelMembersSearch } from "./useChannelMembersSearch.mjs";
+import { useCallback, useMemo } from "react";
+import { convertTimestampToDate } from "stream-chat";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx
+var getMemberRoleTranslation = (member, t) => {
+	if ([member.user?.role, member.channel_role].includes("admin")) return t("channelDetail.channelMembersBrowse.admin.label", "Admin");
+	if (member.channel_role === "channel_moderator" || member.channel_role === "moderator") return t("channelDetail.channelMembersBrowse.moderator.label", "Moderator");
+	if (member.role === "owner") return t("channelDetail.channelMembersBrowse.owner.label", "Owner");
+};
+var getPresenceStatusText = (user, t) => {
+	if (user?.online) return t("common.online.label", "Online");
+	if (user?.last_active != null) return t("channelDetail.channelMemberDetail.lastSeen.label", "Last seen {{ timestamp }}", { timestamp: t("timestamp.ChannelMembersLastActive", { timestamp: convertTimestampToDate(user.last_active) }) });
+	return t("common.offline.label", "Offline");
+};
+var ChannelMembersBrowseViewItem = ({ isMuted, member, onMemberSelect }) => {
+	const { t } = useTranslationContext();
+	const { Avatar: Avatar$1 = Avatar, extractDisplayInfo: extractDisplayInfo$1 = extractDisplayInfo } = useComponentContext();
+	const user = member.user;
+	const displayName = getMemberDisplayName(member);
+	const roleTranslation = getMemberRoleTranslation(member, t);
+	const LeadingSlot = useMemo(() => function MemberAvatar() {
+		return /* @__PURE__ */ jsx(Avatar$1, {
+			...extractDisplayInfo$1({ user: user ?? void 0 }),
+			isOnline: user?.online,
+			size: "md"
+		});
+	}, [
+		Avatar$1,
+		extractDisplayInfo$1,
+		user
+	]);
+	const TrailingSlot = useMemo(() => function MemberTrailingSlot() {
+		const { IconMute } = useComponentContextIcons();
+		return /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__channel-detail__channel-members-view__list-item__trailing-slot",
+			children: [roleTranslation ? /* @__PURE__ */ jsx("span", {
+				className: "str-chat__channel-detail__channel-members-view__role-label",
+				children: roleTranslation
+			}) : null, isMuted ? /* @__PURE__ */ jsx(IconMute, { className: "str-chat__channel-detail__channel-members-view__list-item__indicator-icon str-chat__channel-detail__channel-members-view__list-item__indicator-icon--mute" }) : null]
+		});
+	}, [isMuted, roleTranslation]);
+	return /* @__PURE__ */ jsx(ListItemLayout, {
+		LeadingSlot,
+		RootElement: "button",
+		rootProps: useMemo(() => ({
+			"aria-label": t("channelDetail.channelMembersBrowse.viewMemberDetails.ariaLabel", "View member details for {{ member }}", { member: displayName }),
+			className: "str-chat__channel-detail__channel-members-view__list-item",
+			onClick: () => onMemberSelect?.(member)
+		}), [
+			displayName,
+			member,
+			onMemberSelect,
+			t
+		]),
+		subtitle: getPresenceStatusText(user, t),
+		title: displayName,
+		TrailingSlot
+	});
+};
+var computeMemberItemKey = (_, member) => getMemberUserId(member);
+var ChannelMembersBrowseView = ({ onMemberSelect }) => {
+	const { mutes } = useChatContext();
+	const { t } = useTranslationContext();
+	const { displayedMembers, handleSearchChange, hasMembers, membersSearchSource, searchInputResetKey } = useChannelMembersSearch();
+	const mutedUserIdSet = useMemo(() => new Set(mutes.map((mute) => mute.target?.id)), [mutes]);
+	const renderableMembers = useMemo(() => displayedMembers.filter((member) => getMemberUserId(member)), [displayedMembers]);
+	const renderItem = useCallback((_, member) => /* @__PURE__ */ jsx(ChannelMembersBrowseViewItem, {
+		isMuted: mutedUserIdSet.has(getMemberUserId(member)),
+		member,
+		onMemberSelect
+	}), [mutedUserIdSet, onMemberSelect]);
+	const EmptyPlaceholder = useMemo(() => function ChannelMembersEmptyPlaceholder() {
+		return /* @__PURE__ */ jsx(ChannelDetailEmptyList, { children: t("channelDetail.channelMembersBrowse.noMemberFound.text", "No member found") });
+	}, [t]);
+	const Footer = useMemo(() => function ChannelMembersListFooter() {
+		return /* @__PURE__ */ jsx(ChannelDetailListLoadingIndicator, { searchSource: membersSearchSource });
+	}, [membersSearchSource]);
+	return /* @__PURE__ */ jsxs(Prompt.Body, {
+		className: "str-chat__channel-members-view__body",
+		children: [hasMembers && /* @__PURE__ */ jsx(ChannelDetailSearchInput, {
+			onSearchChange: handleSearchChange,
+			resetKey: searchInputResetKey
+		}), /* @__PURE__ */ jsx(VirtualizedList, {
+			className: "str-chat__channel-detail__channel-members-view__list",
+			computeItemKey: computeMemberItemKey,
+			data: renderableMembers,
+			EmptyPlaceholder,
+			Footer,
+			itemContent: renderItem,
+			loadNext: hasMembers ? membersSearchSource.search : void 0
+		})]
+	});
+};
+//#endregion
+export { ChannelMembersBrowseView };
+
+//# sourceMappingURL=ChannelMembersBrowseView.mjs.map

package/dist/es/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelMembersBrowseView.mjs","names":[],"sources":["../../../../../../src/plugins/ChannelDetail/Views/ChannelMembersView/ChannelMembersBrowseView.tsx"],"sourcesContent":["import { convertTimestampToDate } from 'stream-chat';\nimport type { ChannelMemberResponse } from 'stream-chat';\nimport React, { useCallback, useMemo } from 'react';\n\nimport {\n  useChatContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../../../context';\nimport { Avatar as DefaultAvatar } from '../../../../components/Avatar';\nimport { extractDisplayInfo as defaultExtractDisplayInfo } from '../../../../components/Avatar/utils';\nimport { ListItemLayout } from '../../../../components/ListItemLayout';\nimport { VirtualizedList } from '../../VirtualizedList';\nimport { Prompt } from '../../../../components/Dialog';\nimport { getMemberDisplayName, getMemberUserId } from './ChannelMembersView.utils';\nimport { ChannelDetailEmptyList } from '../../ChannelDetailEmptyList';\nimport { ChannelDetailListLoadingIndicator } from '../../ChannelDetailListLoadingIndicator';\nimport { ChannelDetailSearchInput } from '../../ChannelDetailSearchInput';\nimport { useChannelMembersSearch } from './useChannelMembersSearch';\n\nconst getMemberRoleTranslation = (\n  member: ChannelMemberResponse,\n  t: ReturnType<typeof useTranslationContext>['t'],\n) => {\n  if ([member.user?.role, member.channel_role].includes('admin'))\n    return t('channelDetail.channelMembersBrowse.admin.label', 'Admin');\n  if (member.channel_role === 'channel_moderator' || member.channel_role === 'moderator')\n    return t('channelDetail.channelMembersBrowse.moderator.label', 'Moderator');\n  if (member.role === 'owner')\n    return t('channelDetail.channelMembersBrowse.owner.label', 'Owner');\n\n  return undefined;\n};\n\nconst getPresenceStatusText = (\n  user: ChannelMemberResponse['user'],\n  t: ReturnType<typeof useTranslationContext>['t'],\n) => {\n  if (user?.online) return t('common.online.label', 'Online');\n\n  if (user?.last_active != null) {\n    return t(\n      'channelDetail.channelMemberDetail.lastSeen.label',\n      'Last seen {{ timestamp }}',\n      {\n        timestamp: t('timestamp.ChannelMembersLastActive', {\n          timestamp: convertTimestampToDate(user.last_active),\n        }),\n      },\n    );\n  }\n\n  return t('common.offline.label', 'Offline');\n};\n\nconst ChannelMembersBrowseViewItem = ({\n  isMuted,\n  member,\n  onMemberSelect,\n}: {\n  isMuted: boolean;\n  member: ChannelMemberResponse;\n  onMemberSelect?: (member: ChannelMemberResponse) => void;\n}) => {\n  const { t } = useTranslationContext();\n  const { Avatar = DefaultAvatar, extractDisplayInfo = defaultExtractDisplayInfo } =\n    useComponentContext();\n  const user = member.user;\n  const displayName = getMemberDisplayName(member);\n  const roleTranslation = getMemberRoleTranslation(member, t);\n\n  const LeadingSlot = useMemo(\n    () =>\n      function MemberAvatar() {\n        const displayInfo = extractDisplayInfo({ user: user ?? undefined });\n\n        return <Avatar {...displayInfo} isOnline={user?.online} size='md' />;\n      },\n    [Avatar, extractDisplayInfo, user],\n  );\n\n  const TrailingSlot = useMemo(\n    () =>\n      function MemberTrailingSlot() {\n        const { IconMute } = useComponentContextIcons();\n        return (\n          <div className='str-chat__channel-detail__channel-members-view__list-item__trailing-slot'>\n            {roleTranslation ? (\n              <span className='str-chat__channel-detail__channel-members-view__role-label'>\n                {roleTranslation}\n              </span>\n            ) : null}\n            {isMuted ? (\n              <IconMute className='str-chat__channel-detail__channel-members-view__list-item__indicator-icon str-chat__channel-detail__channel-members-view__list-item__indicator-icon--mute' />\n            ) : null}\n          </div>\n        );\n      },\n    [isMuted, roleTranslation],\n  );\n\n  const rootProps = useMemo(\n    () => ({\n      'aria-label': t(\n        'channelDetail.channelMembersBrowse.viewMemberDetails.ariaLabel',\n        'View member details for {{ member }}',\n        {\n          member: displayName,\n        },\n      ),\n      className: 'str-chat__channel-detail__channel-members-view__list-item',\n      onClick: () => onMemberSelect?.(member),\n    }),\n    [displayName, member, onMemberSelect, t],\n  );\n\n  return (\n    <ListItemLayout\n      LeadingSlot={LeadingSlot}\n      RootElement='button'\n      rootProps={rootProps}\n      subtitle={getPresenceStatusText(user, t)}\n      title={displayName}\n      TrailingSlot={TrailingSlot}\n    />\n  );\n};\n\nconst computeMemberItemKey = (_: number, member: ChannelMemberResponse) =>\n  getMemberUserId(member) as string;\n\nexport type ChannelMembersBrowseViewProps = {\n  onMemberSelect?: (member: ChannelMemberResponse) => void;\n};\n\nexport const ChannelMembersBrowseView = ({\n  onMemberSelect,\n}: ChannelMembersBrowseViewProps) => {\n  const { mutes } = useChatContext();\n  const { t } = useTranslationContext();\n  const {\n    displayedMembers,\n    handleSearchChange,\n    hasMembers,\n    membersSearchSource,\n    searchInputResetKey,\n  } = useChannelMembersSearch();\n  const mutedUserIdSet = useMemo(\n    () => new Set(mutes.map((mute) => mute.target?.id)),\n    [mutes],\n  );\n\n  // Only members with a resolvable user id are rendered; pre-filtering keeps the\n  // virtualized item renderer total in sync with what it can actually display.\n  const renderableMembers = useMemo(\n    () => displayedMembers.filter((member) => getMemberUserId(member)),\n    [displayedMembers],\n  );\n\n  const renderItem = useCallback(\n    (_: number, member: ChannelMemberResponse) => (\n      <ChannelMembersBrowseViewItem\n        isMuted={mutedUserIdSet.has(getMemberUserId(member) as string)}\n        member={member}\n        onMemberSelect={onMemberSelect}\n      />\n    ),\n    [mutedUserIdSet, onMemberSelect],\n  );\n\n  const EmptyPlaceholder = useMemo(\n    () =>\n      function ChannelMembersEmptyPlaceholder() {\n        return (\n          <ChannelDetailEmptyList>\n            {t(\n              'channelDetail.channelMembersBrowse.noMemberFound.text',\n              'No member found',\n            )}\n          </ChannelDetailEmptyList>\n        );\n      },\n    [t],\n  );\n\n  const Footer = useMemo(\n    () =>\n      function ChannelMembersListFooter() {\n        return <ChannelDetailListLoadingIndicator searchSource={membersSearchSource} />;\n      },\n    [membersSearchSource],\n  );\n\n  return (\n    <Prompt.Body className='str-chat__channel-members-view__body'>\n      {hasMembers && (\n        <ChannelDetailSearchInput\n          onSearchChange={handleSearchChange}\n          resetKey={searchInputResetKey}\n        />\n      )}\n      <VirtualizedList\n        className='str-chat__channel-detail__channel-members-view__list'\n        computeItemKey={computeMemberItemKey}\n        data={renderableMembers}\n        EmptyPlaceholder={EmptyPlaceholder}\n        Footer={Footer}\n        itemContent={renderItem}\n        loadNext={hasMembers ? membersSearchSource.search : undefined}\n      />\n    </Prompt.Body>\n  );\n};\n"],"mappings":"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"}