@linktr.ee/messaging-react 1.24.4 → 1.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.24.4",
+  "version": "1.25.0",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/Avatar/Avatar.stories.tsx

@@ -35,6 +35,13 @@ WithoutImage.args = {
   name: 'Bob Smith',
 }
 
+export const Starred: StoryFn<ComponentProps> = Template.bind({})
+Starred.args = {
+  id: 'user-9',
+  name: 'Kaiya Korsgaard',
+  starred: true,
+}
+
 export const SmallSize: StoryFn<ComponentProps> = Template.bind({})
 SmallSize.args = {
   id: 'user-3',

package/src/components/Avatar/index.tsx

@@ -1,3 +1,4 @@
+import { StarIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React from 'react'
 
@@ -9,6 +10,7 @@ export interface AvatarProps {
   image?: string
   size?: number
   className?: string
+  starred?: boolean
   shape?: 'squircle' | 'circle'
 }
 
@@ -20,6 +22,7 @@ export const Avatar: React.FC<AvatarProps> = ({
   image,
   size = 40,
   className,
+  starred = false,
   shape = 'squircle',
 }) => {
   const emoji = getAvatarEmoji(id)
@@ -43,30 +46,39 @@ export const Avatar: React.FC<AvatarProps> = ({
 
   return (
     <div
-      className={classNames('flex-shrink-0 overflow-hidden', className)}
+      className={classNames('relative flex-shrink-0', className)}
       style={{
         width: `${size}px`,
         height: `${size}px`,
-        ...borderStyle,
       }}
     >
-      {image ? (
-        <img
-          src={image}
-          alt=""
-          className="h-full w-full object-cover aspect-square"
-        />
-      ) : (
+      {starred && (
         <div
           aria-hidden="true"
-          className={classNames(
-            'avatar-fallback flex h-full w-full items-center justify-center font-semibold bg-[#E6E5E3] select-none transition-colors',
-            fontSizeClass
-          )}
+          className="absolute -left-1.5 -top-1.5 z-10 flex size-5 items-center justify-center rounded-full bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]"
         >
-          {emoji}
+          <StarIcon className="size-3 text-yellow-600" weight="duotone" />
         </div>
       )}
+      <div className="h-full w-full overflow-hidden" style={borderStyle}>
+        {image ? (
+          <img
+            src={image}
+            alt=""
+            className="aspect-square h-full w-full object-cover"
+          />
+        ) : (
+          <div
+            aria-hidden="true"
+            className={classNames(
+              'avatar-fallback flex h-full w-full items-center justify-center bg-[#E6E5E3] font-semibold select-none transition-colors',
+              fontSizeClass
+            )}
+          >
+            {emoji}
+          </div>
+        )}
+      </div>
     </div>
   )
 }

package/src/components/ChannelInfoDialog/ChannelInfoDialog.test.tsx

@@ -0,0 +1,259 @@
+import React from 'react'
+import type { Channel, ChannelMemberResponse } from 'stream-chat'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import { renderWithProviders, screen, userEvent, waitFor } from '../../test/utils'
+
+import { ChannelInfoDialog } from './index'
+
+vi.mock('../../providers/MessagingProvider', () => ({
+  useMessagingContext: () => ({
+    service: {
+      getBlockedUsers: vi.fn().mockResolvedValue([]),
+      blockUser: vi.fn().mockResolvedValue(undefined),
+      unBlockUser: vi.fn().mockResolvedValue(undefined),
+    },
+    debug: false,
+  }),
+}))
+
+vi.mock('../Avatar', () => ({
+  Avatar: ({ name }: { name: string }) => (
+    <div data-testid="avatar">{name}</div>
+  ),
+}))
+
+vi.mock('../CloseButton', () => ({
+  CloseButton: ({ onClick }: { onClick: () => void }) => (
+    <button data-testid="close-button" onClick={onClick} />
+  ),
+}))
+
+vi.mock('../ActionButton', () => ({
+  default: ({
+    children,
+    onClick,
+  }: {
+    children: React.ReactNode
+    onClick?: () => void
+  }) => (
+    <button data-testid="action-button" onClick={onClick}>
+      {children}
+    </button>
+  ),
+}))
+
+vi.mock('@phosphor-icons/react', () => ({
+  FlagIcon: () => <span data-testid="flag-icon" />,
+  ProhibitInsetIcon: () => <span data-testid="prohibit-icon" />,
+  SignOutIcon: () => <span data-testid="signout-icon" />,
+  SpinnerGapIcon: () => <span data-testid="spinner-icon" />,
+}))
+
+const createChannel = () =>
+  ({
+    id: 'channel-1',
+    cid: 'messaging:channel-1',
+    data: {},
+    _client: { userID: 'visitor-1' },
+    state: {
+      members: {},
+      membership: {},
+      messages: [],
+    },
+    hide: vi.fn(),
+  }) as unknown as Channel
+
+const createParticipant = (
+  overrides: Partial<{ name: string; email: string; username: string }> = {}
+) =>
+  ({
+    user: {
+      id: 'linker-1',
+      name: overrides.name ?? 'Linker',
+      image: undefined,
+      email: overrides.email,
+      username: overrides.username,
+    },
+    role: 'member',
+  }) as unknown as ChannelMemberResponse
+
+const defaultProps = () => ({
+  dialogRef: { current: document.createElement('dialog') },
+  onClose: vi.fn(),
+  channel: createChannel(),
+  participant: createParticipant(),
+})
+
+describe('ChannelInfoDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders participant name', () => {
+    renderWithProviders(
+      <ChannelInfoDialog {...defaultProps()} />
+    )
+
+    const nameEl = screen.getByText('Linker', { selector: 'p' })
+    expect(nameEl).toBeInTheDocument()
+  })
+
+  it('renders participant email as secondary info', () => {
+    renderWithProviders(
+      <ChannelInfoDialog
+        {...defaultProps()}
+        participant={createParticipant({ email: 'linker@example.com' })}
+      />
+    )
+
+    expect(screen.getByText('linker@example.com')).toBeInTheDocument()
+  })
+
+  it('renders participant username as secondary info when no email', () => {
+    renderWithProviders(
+      <ChannelInfoDialog
+        {...defaultProps()}
+        participant={createParticipant({ username: 'linkeruser' })}
+      />
+    )
+
+    expect(screen.getByText('linktr.ee/linkeruser')).toBeInTheDocument()
+  })
+
+  it('renders customProfileContent when provided', () => {
+    renderWithProviders(
+      <ChannelInfoDialog
+        {...defaultProps()}
+        customProfileContent={
+          <span data-testid="custom-profile">Subscriber Badge</span>
+        }
+      />
+    )
+
+    expect(screen.getByTestId('custom-profile')).toHaveTextContent(
+      'Subscriber Badge'
+    )
+  })
+
+  it('renders customChannelActions when provided', () => {
+    renderWithProviders(
+      <ChannelInfoDialog
+        {...defaultProps()}
+        customChannelActions={
+          <li data-testid="custom-action">Custom Action</li>
+        }
+      />
+    )
+
+    expect(screen.getByTestId('custom-action')).toHaveTextContent(
+      'Custom Action'
+    )
+  })
+
+  it('renders followerStatusLabel when provided', () => {
+    renderWithProviders(
+      <ChannelInfoDialog
+        {...defaultProps()}
+        followerStatusLabel="Subscribed to you"
+      />
+    )
+
+    expect(screen.getByText('Subscribed to you')).toBeInTheDocument()
+  })
+
+  it('hides followerStatusLabel when customProfileContent is provided', () => {
+    renderWithProviders(
+      <ChannelInfoDialog
+        {...defaultProps()}
+        followerStatusLabel="Subscribed to you"
+        customProfileContent={
+          <span data-testid="custom-profile">Custom Badge</span>
+        }
+      />
+    )
+
+    expect(
+      screen.queryByText('Subscribed to you')
+    ).not.toBeInTheDocument()
+    expect(screen.getByTestId('custom-profile')).toHaveTextContent(
+      'Custom Badge'
+    )
+  })
+
+  it('shows Delete Conversation button when showDeleteConversation is true', () => {
+    renderWithProviders(
+      <ChannelInfoDialog {...defaultProps()} showDeleteConversation={true} />
+    )
+
+    expect(screen.getByText('Delete Conversation')).toBeInTheDocument()
+  })
+
+  it('hides Delete Conversation button when showDeleteConversation is false', () => {
+    renderWithProviders(
+      <ChannelInfoDialog {...defaultProps()} showDeleteConversation={false} />
+    )
+
+    expect(screen.queryByText('Delete Conversation')).not.toBeInTheDocument()
+  })
+
+  it('calls onDeleteConversationClick when Delete Conversation is clicked', async () => {
+    const onDeleteConversationClick = vi.fn()
+    const props = defaultProps()
+    renderWithProviders(
+      <ChannelInfoDialog
+        {...props}
+        onDeleteConversationClick={onDeleteConversationClick}
+      />
+    )
+
+    await userEvent.click(screen.getByText('Delete Conversation').closest('button')!)
+    await waitFor(() => {
+      expect(onDeleteConversationClick).toHaveBeenCalledOnce()
+    })
+  })
+
+  it('calls onBlockParticipantClick when Block is clicked', async () => {
+    const onBlockParticipantClick = vi.fn()
+    renderWithProviders(
+      <ChannelInfoDialog
+        {...defaultProps()}
+        onBlockParticipantClick={onBlockParticipantClick}
+      />
+    )
+
+    await userEvent.click(screen.getByText('Block').closest('button')!)
+    await waitFor(() => {
+      expect(onBlockParticipantClick).toHaveBeenCalledOnce()
+    })
+  })
+
+  it('calls onReportParticipantClick when Report is clicked', async () => {
+    const onReportParticipantClick = vi.fn()
+    const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
+
+    renderWithProviders(
+      <ChannelInfoDialog
+        {...defaultProps()}
+        onReportParticipantClick={onReportParticipantClick}
+      />
+    )
+
+    await userEvent.click(screen.getByText('Report').closest('button')!)
+    await waitFor(() => {
+      expect(onReportParticipantClick).toHaveBeenCalledOnce()
+    })
+    windowOpenSpy.mockRestore()
+  })
+
+  it('returns null when participant is undefined', () => {
+    const { container } = renderWithProviders(
+      <ChannelInfoDialog
+        {...defaultProps()}
+        participant={undefined}
+      />
+    )
+
+    expect(container.querySelector('dialog')).not.toBeInTheDocument()
+  })
+})

package/src/components/ChannelInfoDialog/index.tsx

@@ -0,0 +1,316 @@
+import {
+  FlagIcon,
+  ProhibitInsetIcon,
+  SignOutIcon,
+  SpinnerGapIcon,
+} from '@phosphor-icons/react'
+import React, { useState, useCallback, useEffect } from 'react'
+import type { Channel as ChannelType, ChannelMemberResponse } from 'stream-chat'
+
+import { useMessagingContext } from '../../providers/MessagingProvider'
+import ActionButton from '../ActionButton'
+import { Avatar } from '../Avatar'
+import { CloseButton } from '../CloseButton'
+
+// 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
+}
+
+export interface ChannelInfoDialogProps {
+  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
+  customProfileContent?: React.ReactNode
+  customChannelActions?: React.ReactNode
+}
+
+/**
+ * Channel info dialog (matching original implementation)
+ */
+export const ChannelInfoDialog: React.FC<ChannelInfoDialogProps> = ({
+  dialogRef,
+  onClose,
+  participant,
+  channel,
+  followerStatusLabel,
+  onLeaveConversation,
+  onBlockParticipant,
+  showDeleteConversation = true,
+  onDeleteConversationClick,
+  onBlockParticipantClick,
+  onReportParticipantClick,
+  customProfileContent,
+  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>
+                )}
+                {/* Deprecated: use customProfileContent instead. followerStatusLabel will be removed in a future release. */}
+                {followerStatusLabel && !customProfileContent && (
+                  <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>
+                )}
+                {customProfileContent}
+              </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>
+  )
+}