@linktr.ee/messaging-react 1.24.4 → 1.25.0-rc-1774238116

package/src/components/ChannelView.tsx

@@ -1,19 +1,11 @@
 import {
   ArrowLeftIcon,
   DotsThreeIcon,
-  FlagIcon,
-  ProhibitInsetIcon,
-  SignOutIcon,
-  SpinnerGapIcon,
   StarIcon,
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useState, useCallback, useRef, useEffect } from 'react'
-import {
-  Channel as ChannelType,
-  ChannelMemberResponse,
-  Event,
-} from 'stream-chat'
+import { Channel as ChannelType, Event } from 'stream-chat'
 import {
   Channel,
   Window,
@@ -24,12 +16,10 @@ import {
   MessageUIComponentProps,
 } from 'stream-chat-react'
 
-import { useMessagingContext } from '../providers/MessagingProvider'
 import type { ChannelViewProps } from '../types'
 
-import ActionButton from './ActionButton'
 import { Avatar } from './Avatar'
-import { CloseButton } from './CloseButton'
+import { ChannelInfoDialog } from './ChannelInfoDialog'
 import { CustomDateSeparator } from './CustomDateSeparator'
 import { CustomMessage } from './CustomMessage'
 import { CustomMessageInput } from './CustomMessageInput'
@@ -37,17 +27,6 @@ import { CustomSystemMessage } from './CustomSystemMessage'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 import { LoadingState } from './MessagingShell/LoadingState'
 
-// Custom user type with email and username
-type CustomUser = {
-  email?: string
-  username?: string
-}
-
-// Blocked user from Stream Chat API
-type BlockedUser = {
-  blocked_user_id: string
-}
-
 const ICON_BTN_CLASS =
   'size-10 rounded-full bg-[#F1F0EE] hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150 focus-ring'
 
@@ -231,292 +210,6 @@ const CustomChannelHeader: React.FC<{
   )
 }
 
-/**
- * Channel info dialog (matching original implementation)
- */
-const ChannelInfoDialog: React.FC<{
-  dialogRef: React.RefObject<HTMLDialogElement>
-  onClose: () => void
-  participant: ChannelMemberResponse | undefined
-  channel: ChannelType
-  followerStatusLabel?: string
-  onLeaveConversation?: (channel: ChannelType) => void
-  onBlockParticipant?: (participantId?: string) => void
-  showDeleteConversation?: boolean
-  onDeleteConversationClick?: () => void
-  onBlockParticipantClick?: () => void
-  onReportParticipantClick?: () => void
-  customChannelActions?: React.ReactNode
-}> = ({
-  dialogRef,
-  onClose,
-  participant,
-  channel,
-  followerStatusLabel,
-  onLeaveConversation,
-  onBlockParticipant,
-  showDeleteConversation = true,
-  onDeleteConversationClick,
-  onBlockParticipantClick,
-  onReportParticipantClick,
-  customChannelActions,
-}) => {
-  const { service, debug } = useMessagingContext()
-  const [isParticipantBlocked, setIsParticipantBlocked] = useState(false)
-  const [isLeaving, setIsLeaving] = useState(false)
-  const [isUpdatingBlockStatus, setIsUpdatingBlockStatus] = useState(false)
-
-  // Check if participant is blocked when participant changes
-  const checkIsParticipantBlocked = useCallback(async () => {
-    if (!service || !participant?.user?.id) return
-
-    try {
-      const blockedUsers = await service.getBlockedUsers()
-      const isBlocked = blockedUsers.some(
-        (user: BlockedUser) => user.blocked_user_id === participant?.user?.id
-      )
-      setIsParticipantBlocked(isBlocked)
-    } catch (error) {
-      console.error(
-        '[ChannelInfoDialog] Failed to check blocked status:',
-        error
-      )
-    }
-  }, [service, participant?.user?.id])
-
-  useEffect(() => {
-    checkIsParticipantBlocked()
-  }, [checkIsParticipantBlocked])
-
-  const handleLeaveConversation = async () => {
-    if (isLeaving) return
-
-    // Fire analytics callback before action
-    onDeleteConversationClick?.()
-
-    if (debug) {
-      console.log('[ChannelInfoDialog] Leave conversation', channel.cid)
-    }
-    setIsLeaving(true)
-
-    try {
-      const actingUserId = channel._client?.userID ?? null
-      await channel.hide(actingUserId, false)
-
-      if (onLeaveConversation) {
-        await onLeaveConversation(channel)
-      }
-
-      onClose()
-    } catch (error) {
-      console.error('[ChannelInfoDialog] Failed to leave conversation', error)
-    } finally {
-      setIsLeaving(false)
-    }
-  }
-
-  const handleBlockUser = async () => {
-    if (isUpdatingBlockStatus || !service) return
-
-    // Fire analytics callback before action
-    onBlockParticipantClick?.()
-
-    if (debug) {
-      console.log('[ChannelInfoDialog] Block member', participant?.user?.id)
-    }
-    setIsUpdatingBlockStatus(true)
-
-    try {
-      await service.blockUser(participant?.user?.id)
-
-      if (onBlockParticipant) {
-        await onBlockParticipant(participant?.user?.id)
-      }
-
-      onClose()
-    } catch (error) {
-      console.error('[ChannelInfoDialog] Failed to block member', error)
-    } finally {
-      setIsUpdatingBlockStatus(false)
-    }
-  }
-
-  const handleUnblockUser = async () => {
-    if (isUpdatingBlockStatus || !service) return
-
-    // Fire analytics callback before action
-    onBlockParticipantClick?.()
-
-    if (debug) {
-      console.log('[ChannelInfoDialog] Unblock member', participant?.user?.id)
-    }
-    setIsUpdatingBlockStatus(true)
-
-    try {
-      await service.unBlockUser(participant?.user?.id)
-
-      if (onBlockParticipant) {
-        await onBlockParticipant(participant?.user?.id)
-      }
-
-      onClose()
-    } catch (error) {
-      console.error('[ChannelInfoDialog] Failed to unblock member', error)
-    } finally {
-      setIsUpdatingBlockStatus(false)
-    }
-  }
-
-  const handleReportUser = () => {
-    // Fire analytics callback before action
-    onReportParticipantClick?.()
-
-    onClose()
-    window.open(
-      'https://linktr.ee/s/about/trust-center/report',
-      '_blank',
-      'noopener,noreferrer'
-    )
-  }
-
-  if (!participant) return null
-
-  const participantName =
-    participant.user?.name || participant.user?.id || 'Unknown member'
-  const participantImage = participant.user?.image
-  const participantEmail = (participant.user as CustomUser)?.email
-  const participantUsername = (participant.user as CustomUser)?.username
-  const participantSecondary = participantEmail
-    ? participantEmail
-    : participantUsername
-      ? `linktr.ee/${participantUsername}`
-      : undefined
-  const participantId = participant.user?.id || 'unknown'
-
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-    <dialog
-      ref={dialogRef}
-      className="mes-dialog group"
-      onClose={onClose}
-      onClick={(e) => {
-        if (e.target === dialogRef.current) {
-          onClose()
-        }
-      }}
-    >
-      <div className="ml-auto flex h-full w-full flex-col bg-white shadow-none transition-shadow duration-200 group-open:shadow-max-elevation-light">
-        <div className="flex items-center justify-between border-b border-sand px-4 py-3">
-          <h2 className="text-base font-semibold text-charcoal">Chat info</h2>
-          <CloseButton onClick={onClose} />
-        </div>
-
-        <div className="flex-1 px-2 overflow-y-auto w-full">
-          <div
-            className="flex flex-col items-center gap-3 self-stretch px-4 py-2 mt-6 rounded-lg border border-black/[0.04]"
-            style={{ backgroundColor: '#FBFAF9' }}
-          >
-            <div className="flex items-center gap-3 w-full">
-              <Avatar
-                id={participantId}
-                name={participantName}
-                image={participantImage}
-                size={88}
-                shape="circle"
-              />
-              <div className="flex flex-col min-w-0 flex-1">
-                <p className="truncate text-base font-semibold text-charcoal">
-                  {participantName}
-                </p>
-                {participantSecondary && (
-                  <p className="truncate text-sm text-[#00000055]">
-                    {participantSecondary}
-                  </p>
-                )}
-                {followerStatusLabel && (
-                  <span
-                    className="mt-1 rounded-full text-xs font-normal w-fit"
-                    style={{
-                      padding: '4px 8px',
-                      backgroundColor:
-                        followerStatusLabel === 'Subscribed to you'
-                          ? '#DCFCE7'
-                          : '#F5F5F4',
-                      color:
-                        followerStatusLabel === 'Subscribed to you'
-                          ? '#008236'
-                          : '#78716C',
-                      lineHeight: '133.333%',
-                      letterSpacing: '0.21px',
-                    }}
-                  >
-                    {followerStatusLabel}
-                  </span>
-                )}
-              </div>
-            </div>
-          </div>
-
-          <ul className="flex flex-col gap-2 mt-2">
-            {showDeleteConversation && (
-              <li>
-                <ActionButton
-                  onClick={handleLeaveConversation}
-                  disabled={isLeaving}
-                  aria-busy={isLeaving}
-                >
-                  {isLeaving ? (
-                    <SpinnerGapIcon className="h-5 w-5 animate-spin" />
-                  ) : (
-                    <SignOutIcon className="h-5 w-5" />
-                  )}
-                  <span>Delete Conversation</span>
-                </ActionButton>
-              </li>
-            )}
-            <li>
-              {isParticipantBlocked ? (
-                <ActionButton
-                  onClick={handleUnblockUser}
-                  disabled={isUpdatingBlockStatus}
-                  aria-busy={isUpdatingBlockStatus}
-                >
-                  {isUpdatingBlockStatus ? (
-                    <SpinnerGapIcon className="h-5 w-5 animate-spin" />
-                  ) : (
-                    <ProhibitInsetIcon className="h-5 w-5" />
-                  )}
-                  <span>Unblock</span>
-                </ActionButton>
-              ) : (
-                <ActionButton
-                  onClick={handleBlockUser}
-                  disabled={isUpdatingBlockStatus}
-                  aria-busy={isUpdatingBlockStatus}
-                >
-                  {isUpdatingBlockStatus ? (
-                    <SpinnerGapIcon className="h-5 w-5 animate-spin" />
-                  ) : (
-                    <ProhibitInsetIcon className="h-5 w-5" />
-                  )}
-                  <span>Block</span>
-                </ActionButton>
-              )}
-            </li>
-            <li>
-              <ActionButton variant="danger" onClick={handleReportUser}>
-                <FlagIcon className="h-5 w-5" />
-                <span>Report</span>
-              </ActionButton>
-            </li>
-            {customChannelActions}
-          </ul>
-        </div>
-      </div>
-    </dialog>
-  )
-}
-
 /**
  * Inner component that has access to channel context
  */
@@ -535,6 +228,7 @@ const ChannelViewInner: React.FC<{
   showStarButton?: boolean
   chatbotVotingEnabled?: boolean
   renderChannelBanner?: () => React.ReactNode
+  customProfileContent?: React.ReactNode
   customChannelActions?: React.ReactNode
   renderMessage?: (
     messageNode: React.ReactElement,
@@ -554,6 +248,7 @@ const ChannelViewInner: React.FC<{
   showStarButton = false,
   chatbotVotingEnabled = false,
   renderChannelBanner,
+  customProfileContent,
   customChannelActions,
   renderMessage,
 }) => {
@@ -664,6 +359,7 @@ const ChannelViewInner: React.FC<{
         onDeleteConversationClick={onDeleteConversationClick}
         onBlockParticipantClick={onBlockParticipantClick}
         onReportParticipantClick={onReportParticipantClick}
+        customProfileContent={customProfileContent}
         customChannelActions={customChannelActions}
       />
     </>
@@ -694,6 +390,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     showStarButton = false,
     chatbotVotingEnabled = false,
     renderChannelBanner,
+    customProfileContent,
     customChannelActions,
     renderMessage,
   }) => {
@@ -771,6 +468,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
             showStarButton={showStarButton}
             chatbotVotingEnabled={chatbotVotingEnabled}
             renderChannelBanner={renderChannelBanner}
+            customProfileContent={customProfileContent}
             customChannelActions={customChannelActions}
             renderMessage={renderMessage}
           />

package/src/components/MessagingShell/index.tsx

@@ -38,6 +38,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   chatbotVotingEnabled = false,
   renderMessagePreview,
   renderChannelBanner,
+  customProfileContent,
   customChannelActions,
   renderMessage,
 }) => {
@@ -499,6 +500,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 onMessageSent={onMessageSent}
                 showStarButton={showStarButton}
                 chatbotVotingEnabled={chatbotVotingEnabled}
+                customProfileContent={customProfileContent}
                 customChannelActions={customChannelActions}
                 renderMessage={renderMessage}
               />

package/src/types.ts

@@ -185,6 +185,16 @@ export interface ChannelViewProps {
    */
   renderChannelBanner?: () => React.ReactNode
 
+  /**
+   * Custom content rendered below the participant name and contact details
+   * in the channel info dialog profile card.
+   * Useful for badges (e.g. follower status), metadata, or any extra info.
+   *
+   * @example
+   * customProfileContent={<SubscriptionBadge isFollower={channel.data?.isFollower} />}
+   */
+  customProfileContent?: React.ReactNode
+
   /**
    * Custom actions rendered at the bottom of the channel info dialog
    * (below Delete Conversation, Block/Unblock, Report).
@@ -227,6 +237,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'showStarButton'
   | 'chatbotVotingEnabled'
   | 'renderChannelBanner'
+  | 'customProfileContent'
   | 'customChannelActions'
   | 'renderMessage'
 >