@linktr.ee/messaging-react 2.2.0 → 2.2.2-rc-1779314025

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CctUDJSJ.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { Attachment } from 'stream-chat';
 import { Channel } from 'stream-chat';
 import { ChannelFilters } from 'stream-chat';
 import { ChannelListProps as ChannelListProps_2 } from 'stream-chat-react';
+import { ChannelMemberResponse } from 'stream-chat';
 import { ChannelSort } from 'stream-chat';
 import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
@@ -239,6 +240,11 @@ export declare interface ChannelViewProps {
      * Falls back to message.text when no matching translation exists.
      */
     viewerLanguage?: string;
+    /**
+     * Resolves the display label for the other channel participant.
+     * Defaults to name, then username, then "Unknown member" (never user.id).
+     */
+    getParticipantDisplayName?: (participant: ChannelMemberResponse | undefined) => string;
     /**
      * Custom render function for a banner/card component that renders
      * between the channel header and message list.
@@ -458,6 +464,8 @@ declare type ImageLoadingMode = 'lazy' | 'eager';
 
 export declare function isLinkAttachment(a: Attachment): boolean;
 
+export declare function isUuidLike(value: string): boolean;
+
 /**
  * Link previews (1P / 3P Link Apps) shown in the chat thread. Mirrors
  * the `LockedAttachment` API — render `LinkAttachment.Composer` while
@@ -1167,6 +1175,12 @@ export declare interface Participant {
     metadata?: Record<string, unknown>;
 }
 
+export declare type ParticipantDisplayUser = {
+    id?: string;
+    name?: string | null;
+    username?: string | null;
+};
+
 /**
  * Message metadata for paid messaging and chatbot flows.
  * Used to identify message types and payment status.
@@ -1232,6 +1246,12 @@ export declare function resolveLinkAttachment(message: LocalMessage): Attachment
 
 export declare function resolveMediaFromMessage(message: LocalMessage): MediaMessageResolved | null;
 
+/**
+ * Resolves a human-readable participant label from Stream user fields.
+ * Never falls back to user.id. UUID-like names are treated as missing.
+ */
+export declare function resolveParticipantDisplayName(user?: ParticipantDisplayUser | null): string;
+
 export declare interface SentCardProps extends LockedAttachmentBaseProps {
     /** Placeholder shown in the title slot when no title is set. */
     placeholderTitle?: string;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as h, i as u, j as L, k as c, l as d, m as A, n as C, o as v, p as F, q as p, s as k, t as b, u as f, v as x, w as S, x as q, y, z } from "./index-Dn7BC9xK.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-D55UTfgC.js";
 export {
   e as ActionButton,
   t as Avatar,
@@ -10,23 +10,25 @@ export {
   l as FaqListItem,
   r as LinkAttachment,
   M as LockedAttachment,
-  h as MediaMessage,
-  u as MessageAttachment,
-  L as MessageVoteButtons,
-  c as MessagingProvider,
+  u as MediaMessage,
+  L as MessageAttachment,
+  c as MessageVoteButtons,
+  h as MessagingProvider,
   d as MessagingShell,
-  A as buildCompactMetaLabel,
-  C as formatFileSize,
-  v as formatRelativeTime,
-  F as getFileExtensionLabel,
-  p as getMessageDisplayText,
+  p as buildCompactMetaLabel,
+  v as formatFileSize,
+  A as formatRelativeTime,
+  C as getFileExtensionLabel,
+  F as getMessageDisplayText,
   k as isLinkAttachment,
-  b as messageAttachmentGroupPositionFromStream,
-  f as normalizeLanguageCode,
-  x as resolveLinkAttachment,
-  S as resolveMediaFromMessage,
+  b as isUuidLike,
+  f as messageAttachmentGroupPositionFromStream,
+  x as normalizeLanguageCode,
+  y as resolveLinkAttachment,
+  P as resolveMediaFromMessage,
+  S as resolveParticipantDisplayName,
   q as useCustomMessage,
-  y as useMessageVote,
-  z as useMessaging
+  z as useMessageVote,
+  B as useMessaging
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "2.2.0",
+  "version": "2.2.2-rc-1779314025",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./styles.css": "./dist/assets/index.css"
   },

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

@@ -98,6 +98,50 @@ describe('ChannelInfoDialog', () => {
     expect(nameEl).toBeInTheDocument()
   })
 
+  it('uses participantDisplayName when provided', () => {
+    renderWithProviders(
+      <ChannelInfoDialog
+        {...defaultProps()}
+        participantDisplayName="Custom Label"
+      />
+    )
+
+    expect(screen.getByText('Custom Label', { selector: 'p' })).toBeInTheDocument()
+  })
+
+  it('falls back to username when name is UUID-like', () => {
+    renderWithProviders(
+      <ChannelInfoDialog
+        {...defaultProps()}
+        participant={createParticipant({
+          name: 'a1b2c3d4-e5f6-4789-a012-3456789abcde',
+          username: 'linkeruser',
+        })}
+      />
+    )
+
+    expect(screen.getByText('linkeruser', { selector: 'p' })).toBeInTheDocument()
+  })
+
+  it('shows Unknown member when name matches user id', () => {
+    renderWithProviders(
+      <ChannelInfoDialog
+        {...defaultProps()}
+        participant={{
+          user: {
+            id: 'opaque-user-id',
+            name: 'opaque-user-id',
+          },
+          role: 'member',
+        } as unknown as ChannelMemberResponse}
+      />
+    )
+
+    expect(
+      screen.getByText('Unknown member', { selector: 'p' })
+    ).toBeInTheDocument()
+  })
+
   it('renders participant username as secondary info', () => {
     renderWithProviders(
       <ChannelInfoDialog

package/src/components/ChannelInfoDialog/index.tsx

@@ -8,6 +8,7 @@ import React, { useState, useCallback, useEffect } from 'react'
 import type { Channel as ChannelType, ChannelMemberResponse } from 'stream-chat'
 
 import { useMessagingContext } from '../../providers/MessagingProvider'
+import { resolveParticipantDisplayName } from '../../utils/resolveParticipantDisplayName'
 import ActionButton from '../ActionButton'
 import { Avatar } from '../Avatar'
 import { CloseButton } from '../CloseButton'
@@ -26,6 +27,7 @@ export interface ChannelInfoDialogProps {
   dialogRef: React.RefObject<HTMLDialogElement>
   onClose: () => void
   participant: ChannelMemberResponse | undefined
+  participantDisplayName?: string
   channel: ChannelType
   followerStatusLabel?: string
   onLeaveConversation?: (channel: ChannelType) => void
@@ -45,6 +47,7 @@ export const ChannelInfoDialog: React.FC<ChannelInfoDialogProps> = ({
   dialogRef,
   onClose,
   participant,
+  participantDisplayName,
   channel,
   followerStatusLabel,
   onLeaveConversation,
@@ -177,7 +180,8 @@ export const ChannelInfoDialog: React.FC<ChannelInfoDialogProps> = ({
   if (!participant) return null
 
   const participantName =
-    participant.user?.name || participant.user?.id || 'Unknown member'
+    participantDisplayName ??
+    resolveParticipantDisplayName(participant.user)
   const participantImage = participant.user?.image
   const participantUsername = (participant.user as CustomUser)?.username
   const participantSecondary = participantUsername

package/src/components/ChannelList/CustomChannelPreview.test.tsx

@@ -66,6 +66,41 @@ describe('CustomChannelPreview', () => {
     onChannelSelect: vi.fn(),
   }
 
+  it('uses username when participant name is UUID-like', () => {
+    const channel = createMockChannel([])
+    channel.state.members['participant-1'] = {
+      user: {
+        id: 'participant-1',
+        name: 'a1b2c3d4-e5f6-4789-a012-3456789abcde',
+        username: 'alice',
+      },
+      user_id: 'participant-1',
+    }
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+
+    expect(screen.getByText('alice')).toBeInTheDocument()
+  })
+
+  it('shows Unknown member when participant has no usable name or username', () => {
+    const channel = createMockChannel([])
+    channel.state.members['participant-1'] = {
+      user: {
+        id: 'participant-1',
+        name: 'participant-1',
+      },
+      user_id: 'participant-1',
+    }
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+
+    expect(screen.getByText('Unknown member')).toBeInTheDocument()
+  })
+
   it('shows the latest non-system message when the last message is a system message', () => {
     const channel = createMockChannel([
       {

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -5,6 +5,7 @@ import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 import { useChannelStar } from '../../hooks/useChannelStar'
 import { formatRelativeTime } from '../../utils/formatRelativeTime'
 import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
+import { resolveParticipantDisplayName } from '../../utils/resolveParticipantDisplayName'
 import { Avatar } from '../Avatar'
 import { isChatbotMessage } from '../CustomMessage/MessageTag'
 
@@ -45,7 +46,7 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
     const participant = members.find(
       (member) => member.user?.id && member.user.id !== channel?._client?.userID
     )
-    const participantName = participant?.user?.name || 'Conversation'
+    const participantName = resolveParticipantDisplayName(participant?.user)
     const participantImage = participant?.user?.image
 
     // Get last non-system message for preview

package/src/components/ChannelView.test.tsx

@@ -85,9 +85,21 @@ vi.mock('../hooks/useChannelStar', () => ({
 const createChannel = ({
   currentUserId = 'visitor-1',
   currentUserRole = 'owner',
+  otherUser = {
+    id: 'linker-1' as const,
+    name: 'Linker' as string | undefined,
+    username: undefined as string | undefined,
+    is_account: true,
+  },
 }: {
   currentUserId?: 'visitor-1' | 'linker-1'
   currentUserRole?: 'owner' | 'member'
+  otherUser?: {
+    id: string
+    name?: string
+    username?: string
+    is_account?: boolean
+  }
 } = {}) =>
   ({
     id: 'channel-1',
@@ -106,9 +118,12 @@ const createChannel = ({
         },
         other: {
           user: {
-            id: currentUserId === 'visitor-1' ? 'linker-1' : 'visitor-1',
-            name: currentUserId === 'visitor-1' ? 'Linker' : 'Visitor',
-            is_account: currentUserId === 'visitor-1',
+            ...otherUser,
+            id:
+              otherUser.id ??
+              (currentUserId === 'visitor-1' ? 'linker-1' : 'visitor-1'),
+            is_account:
+              otherUser.is_account ?? currentUserId === 'visitor-1',
           },
           role: currentUserRole === 'owner' ? 'member' : 'owner',
         },
@@ -294,4 +309,51 @@ describe('ChannelView', () => {
 
     expect(activeChannelProps.SendButton).toBeUndefined()
   })
+
+  it('uses username when participant name is UUID-like', () => {
+    renderWithProviders(
+      <ChannelView
+        channel={createChannel({
+          otherUser: {
+            id: 'linker-1',
+            name: 'a1b2c3d4-e5f6-4789-a012-3456789abcde',
+            username: 'linkeruser',
+            is_account: true,
+          },
+        })}
+      />
+    )
+
+    expect(screen.getAllByText('linkeruser').length).toBeGreaterThan(0)
+    expect(avatarRenderCalls.some((call) => call.name === 'linkeruser')).toBe(
+      true
+    )
+  })
+
+  it('shows Unknown member when participant has no usable name or username', () => {
+    renderWithProviders(
+      <ChannelView
+        channel={createChannel({
+          otherUser: {
+            id: 'opaque-user-id',
+            name: 'opaque-user-id',
+            is_account: true,
+          },
+        })}
+      />
+    )
+
+    expect(screen.getAllByText('Unknown member').length).toBeGreaterThan(0)
+  })
+
+  it('uses getParticipantDisplayName override when provided', () => {
+    renderWithProviders(
+      <ChannelView
+        channel={createChannel()}
+        getParticipantDisplayName={() => 'Custom Label'}
+      />
+    )
+
+    expect(screen.getAllByText('Custom Label').length).toBeGreaterThan(0)
+  })
 })

package/src/components/ChannelView.tsx

@@ -7,7 +7,7 @@ import {
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useCallback, useRef } from 'react'
-import { Channel as ChannelType } from 'stream-chat'
+import { Channel as ChannelType, ChannelMemberResponse } from 'stream-chat'
 import {
   Channel,
   Window,
@@ -20,6 +20,7 @@ import {
 
 import { useChannelStar } from '../hooks/useChannelStar'
 import type { ChannelViewProps } from '../types'
+import { resolveParticipantDisplayName } from '../utils/resolveParticipantDisplayName'
 
 import { Avatar } from './Avatar'
 import { ChannelInfoDialog } from './ChannelInfoDialog'
@@ -46,6 +47,9 @@ const CustomChannelHeader: React.FC<{
   canShowInfo: boolean
   showStarButton?: boolean
   dmAgentEnabled?: boolean
+  getParticipantDisplayName: (
+    participant: ChannelMemberResponse | undefined
+  ) => string
 }> = ({
   onBack,
   showBackButton,
@@ -53,19 +57,21 @@ const CustomChannelHeader: React.FC<{
   canShowInfo,
   showStarButton = false,
   dmAgentEnabled = false,
+  getParticipantDisplayName,
 }) => {
   const { channel } = useChannelStateContext()
 
   // Get participant info (excluding current user)
   const participant = React.useMemo(() => {
-    const members = Object.values(channel.state.members || {})
+    const myUserId = channel._client?.userID
+    if (!myUserId) return undefined
+    const members = Object.values(channel.state?.members || {})
     return members.find(
-      (member) => member.user?.id && member.user.id !== channel._client.userID
+      (member) => member.user?.id && member.user.id !== myUserId
     )
-  }, [channel._client.userID, channel.state.members])
+  }, [channel._client?.userID, channel.state?.members])
 
-  const participantName =
-    participant?.user?.name || participant?.user?.id || 'Unknown member'
+  const participantName = getParticipantDisplayName(participant)
   const participantImage = participant?.user?.image
   const isStarred = useChannelStar(channel)
 
@@ -259,6 +265,9 @@ const ChannelViewInner: React.FC<{
   ) => React.ReactNode
   dmAgentEnabled?: boolean
   viewerLanguage?: string
+  getParticipantDisplayName: (
+    participant: ChannelMemberResponse | undefined
+  ) => string
 }> = ({
   onBack,
   showBackButton,
@@ -278,22 +287,27 @@ const ChannelViewInner: React.FC<{
   renderMessage,
   dmAgentEnabled = false,
   viewerLanguage,
+  getParticipantDisplayName,
 }) => {
   const { channel } = useChannelStateContext()
   const infoDialogRef = useRef<HTMLDialogElement>(null)
 
   // Get participant info for info dialog
   const participant = React.useMemo(() => {
-    const members = Object.values(channel.state.members || {})
+    const myUserId = channel._client?.userID
+    if (!myUserId) return undefined
+    const members = Object.values(channel.state?.members || {})
     return members.find(
-      (member) => member.user?.id && member.user.id !== channel._client.userID
+      (member) => member.user?.id && member.user.id !== myUserId
     )
-  }, [channel._client.userID, channel.state.members])
+  }, [channel._client?.userID, channel.state?.members])
 
   const currentMember = React.useMemo(() => {
-    const members = Object.values(channel.state.members || {})
-    return members.find((member) => member.user?.id === channel._client.userID)
-  }, [channel._client.userID, channel.state.members])
+    const myUserId = channel._client?.userID
+    if (!myUserId) return undefined
+    const members = Object.values(channel.state?.members || {})
+    return members.find((member) => member.user?.id === myUserId)
+  }, [channel._client?.userID, channel.state?.members])
 
   const currentUserIsAccount =
     (currentMember?.user as { is_account?: boolean } | undefined)?.is_account ??
@@ -363,7 +377,7 @@ const ChannelViewInner: React.FC<{
       <WithComponents overrides={{ Message: MessageOverride }}>
         <Window>
           {/* Custom Channel Header */}
-          <div className="p-4">
+          <div key="lt-channel-header" className="p-4">
             <CustomChannelHeader
               onBack={onBack}
               showBackButton={showBackButton}
@@ -371,14 +385,22 @@ const ChannelViewInner: React.FC<{
               canShowInfo={Boolean(participant)}
               showStarButton={showStarButton}
               dmAgentEnabled={showDmAgentHeader}
+              getParticipantDisplayName={getParticipantDisplayName}
             />
           </div>
 
           {/* Custom Banner/Summary */}
-          {renderChannelBanner?.()}
+          {renderChannelBanner ? (
+            <React.Fragment key="lt-channel-banner">
+              {renderChannelBanner()}
+            </React.Fragment>
+          ) : null}
 
           {/* Message List */}
-          <div className="flex-1 overflow-hidden relative">
+          <div
+            key="lt-channel-message-list"
+            className="flex-1 overflow-hidden relative"
+          >
             <MessageList
               hideDeletedMessages
               hideNewMessageSeparator={false}
@@ -386,10 +408,15 @@ const ChannelViewInner: React.FC<{
             />
           </div>
 
-          {renderConversationFooter?.(channel)}
+          {renderConversationFooter ? (
+            <React.Fragment key="lt-channel-conversation-footer">
+              {renderConversationFooter(channel)}
+            </React.Fragment>
+          ) : null}
 
           {/* Message Input */}
           <CustomMessageInput
+            key="lt-channel-message-input"
             renderActions={() => renderMessageInputActions?.(channel)}
           />
         </Window>
@@ -400,6 +427,7 @@ const ChannelViewInner: React.FC<{
         dialogRef={infoDialogRef}
         onClose={handleCloseInfo}
         participant={participant}
+        participantDisplayName={getParticipantDisplayName(participant)}
         channel={channel}
         followerStatusLabel={followerStatusLabel}
         onLeaveConversation={onLeaveConversation}
@@ -444,7 +472,15 @@ export const ChannelView = React.memo<ChannelViewProps>(
     renderMessage,
     sendButton,
     viewerLanguage,
+    getParticipantDisplayName: getParticipantDisplayNameProp,
   }) => {
+    const getParticipantDisplayName = useCallback(
+      (participant: ChannelMemberResponse | undefined) =>
+        getParticipantDisplayNameProp?.(participant) ??
+        resolveParticipantDisplayName(participant?.user),
+      [getParticipantDisplayNameProp]
+    )
+
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
     // 2. Adds skip_push and silent when DM agent is active
@@ -527,6 +563,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
               customChannelActions={customChannelActions}
               renderMessage={renderMessage}
               viewerLanguage={viewerLanguage}
+              getParticipantDisplayName={getParticipantDisplayName}
             />
           </Channel>
         </DmAgentEnabledContext.Provider>

package/src/index.ts

@@ -40,6 +40,11 @@ export {
   getMessageDisplayText,
   normalizeLanguageCode,
 } from './utils/getMessageDisplayText'
+export {
+  resolveParticipantDisplayName,
+  isUuidLike,
+} from './utils/resolveParticipantDisplayName'
+export type { ParticipantDisplayUser } from './utils/resolveParticipantDisplayName'
 
 // Types
 export type {

package/src/types.ts

@@ -6,6 +6,7 @@ import type { ComponentType } from 'react'
 import type {
   Channel,
   ChannelFilters,
+  ChannelMemberResponse,
   ChannelSort,
   LocalMessage,
   SendMessageAPIResponse,
@@ -183,6 +184,14 @@ export interface ChannelViewProps {
    */
   viewerLanguage?: string
 
+  /**
+   * Resolves the display label for the other channel participant.
+   * Defaults to name, then username, then "Unknown member" (never user.id).
+   */
+  getParticipantDisplayName?: (
+    participant: ChannelMemberResponse | undefined
+  ) => string
+
   /**
    * Custom render function for a banner/card component that renders
    * between the channel header and message list.

package/src/utils/resolveParticipantDisplayName.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  isUuidLike,
+  resolveParticipantDisplayName,
+} from './resolveParticipantDisplayName'
+
+describe('isUuidLike', () => {
+  it('returns true for standard UUID strings', () => {
+    expect(isUuidLike('a1b2c3d4-e5f6-4789-a012-3456789abcde')).toBe(true)
+  })
+
+  it('returns false for regular display names', () => {
+    expect(isUuidLike('Alice')).toBe(false)
+  })
+})
+
+describe('resolveParticipantDisplayName', () => {
+  it('returns a valid name when present', () => {
+    expect(
+      resolveParticipantDisplayName({
+        id: 'user-1',
+        name: 'Alice',
+        username: 'alice',
+      })
+    ).toBe('Alice')
+  })
+
+  it('prefers username when name is missing', () => {
+    expect(
+      resolveParticipantDisplayName({
+        id: 'user-1',
+        username: 'alice',
+      })
+    ).toBe('alice')
+  })
+
+  it('prefers username when name is UUID-like', () => {
+    expect(
+      resolveParticipantDisplayName({
+        id: 'user-1',
+        name: 'a1b2c3d4-e5f6-4789-a012-3456789abcde',
+        username: 'alice',
+      })
+    ).toBe('alice')
+  })
+
+  it('never falls back to user id', () => {
+    expect(
+      resolveParticipantDisplayName({
+        id: 'opaque-user-id',
+        name: 'opaque-user-id',
+      })
+    ).toBe('Unknown member')
+  })
+
+  it('returns Unknown member when no usable fields exist', () => {
+    expect(resolveParticipantDisplayName({ id: 'user-1' })).toBe(
+      'Unknown member'
+    )
+    expect(resolveParticipantDisplayName(undefined)).toBe('Unknown member')
+  })
+
+  it('ignores whitespace-only values', () => {
+    expect(
+      resolveParticipantDisplayName({
+        id: 'user-1',
+        name: '   ',
+        username: 'alice',
+      })
+    ).toBe('alice')
+  })
+})