@adatechnology/conversations-ui 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -35,8 +35,8 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
     "tailwind-merge": "^3.6.0",
-    "@adatechnology/meta-whatsapp-contracts": "0.6.0",
-    "@adatechnology/conversation-contracts": "0.5.0"
+    "@adatechnology/conversation-contracts": "0.5.0",
+    "@adatechnology/meta-whatsapp-contracts": "0.6.0"
   },
   "peerDependencies": {
     "@xyflow/react": "^12",

package/src/participant/ParticipantAuthorAvatar.test.tsx

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'bun:test'
+import type { ReactNode } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ParticipantAuthorAvatar } from './ParticipantAuthorAvatar'
+
+function render(hostResult: unknown): string {
+  return renderToStaticMarkup(<ParticipantAuthorAvatar name="Ana Souza" render={() => hostResult as ReactNode} />)
+}
+
+describe('ParticipantAuthorAvatar host slot', () => {
+  it('uses the host content when it returns something', () => {
+    const markup = render(<img src="https://files.example/ana.png" alt="" />)
+    expect(markup).toContain('ana.png')
+    expect(markup).not.toContain('>AS<')
+  })
+
+  it.each([
+    ['false', false],
+    ['an empty string', ''],
+    ['null', null],
+    ['undefined', undefined],
+  ])('falls back to the initials when the host returns %s', (_label, hostResult) => {
+    expect(render(hostResult)).toContain('>AS<')
+  })
+
+  it('keeps zero as host content', () => {
+    expect(render(0)).toContain('>0<')
+  })
+})

package/src/participant/ParticipantAuthorAvatar.tsx

@@ -0,0 +1,24 @@
+import { User } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+import { authorInitials } from './participantAvatar'
+
+export type ParticipantAuthorAvatarRenderer = (author: { name: string | null }) => ReactNode
+
+export type ParticipantAuthorAvatarProps = {
+  readonly name: string | null
+  /** Host slot (a photo, for instance); its result wins over the initials. */
+  readonly render?: ParticipantAuthorAvatarRenderer
+}
+
+export function ParticipantAuthorAvatar({ name, render }: ParticipantAuthorAvatarProps) {
+  const fromHost = render?.({ name })
+  const hasHostContent = !(fromHost == null || fromHost === false || fromHost === '')
+  const initials = authorInitials(name)
+  const fallback = initials ?? <User size={16} aria-hidden={true} />
+  return (
+    <span className="cv-p-avatar" aria-hidden="true">
+      {hasHostContent ? fromHost : fallback}
+    </span>
+  )
+}

package/src/participant/ParticipantBackButton.tsx

@@ -0,0 +1,14 @@
+import { ArrowLeft } from 'lucide-react'
+
+export type ParticipantBackButtonProps = {
+  readonly label: string
+  readonly onBack: () => void
+}
+
+export function ParticipantBackButton({ label, onBack }: ParticipantBackButtonProps) {
+  return (
+    <button type="button" className="cv-p-thread__back" aria-label={label} onClick={onBack}>
+      <ArrowLeft size={24} aria-hidden="true" focusable="false" />
+    </button>
+  )
+}

package/src/participant/ParticipantBubbleStatus.tsx

@@ -0,0 +1,67 @@
+import { StatusTicks } from '../StatusTicks'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import type { ParticipantOwnMessageStatus } from './participantMessages'
+
+function statusText(status: ParticipantOwnMessageStatus, labels: ParticipantConversationsLabels): string {
+  const byStatus: Record<ParticipantOwnMessageStatus, string> = {
+    sending: labels.statusSending,
+    queued: labels.statusQueued,
+    sent: labels.statusSent,
+    delivered: labels.statusDelivered,
+    read: labels.statusRead,
+    failed: labels.statusFailed,
+  }
+  return byStatus[status]
+}
+
+type OwnStatusProps = {
+  readonly status: ParticipantOwnMessageStatus
+  readonly labels: ParticipantConversationsLabels
+  readonly onRetry?: () => void
+}
+
+export function OwnStatus({ status, labels, onRetry }: OwnStatusProps) {
+  const ticksStatus = status === 'sending' ? 'queued' : status
+  const isVisibleText = status === 'sending' || status === 'queued' || status === 'failed'
+
+  if (status === 'failed' && onRetry) {
+    return (
+      <button type="button" className="cv-p-bubble__retry" onClick={onRetry}>
+        <StatusTicks status="failed" appearance="stylesheet" />
+        <span>{labels.statusFailed}</span>
+      </button>
+    )
+  }
+
+  const text = status === 'failed' ? labels.statusFailedShort : statusText(status, labels)
+  return (
+    <span className="cv-p-bubble__status">
+      <StatusTicks status={ticksStatus} appearance="stylesheet" />
+      <span className={isVisibleText ? 'cv-p-bubble__status-text' : 'cv-p-sr-only'}>{text}</span>
+    </span>
+  )
+}
+
+type FailedActionsProps = {
+  readonly labels: ParticipantConversationsLabels
+  readonly onDiscard?: () => void
+  readonly onEdit?: () => void
+}
+
+export function FailedActions({ labels, onDiscard, onEdit }: FailedActionsProps) {
+  if (!onDiscard && !onEdit) return null
+  return (
+    <span className="cv-p-bubble__actions">
+      {onEdit ? (
+        <button type="button" className="cv-p-bubble__action" onClick={onEdit}>
+          {labels.edit}
+        </button>
+      ) : null}
+      {onDiscard ? (
+        <button type="button" className="cv-p-bubble__action" onClick={onDiscard}>
+          {labels.discard}
+        </button>
+      ) : null}
+    </span>
+  )
+}

package/src/participant/ParticipantChannelBadges.tsx

@@ -24,25 +24,33 @@ export type ParticipantChannelBadgesProps = {
   readonly labels: ParticipantConversationsLabels
   /** 'list' draws ul/li; 'inline' draws spans only, valid inside a button. */
   readonly variant?: 'list' | 'inline'
+  /** Icon size in pixels. */
+  readonly iconSize?: number
 }
 
 type BadgeProps = {
   readonly descriptor: ParticipantChannelDescriptor
   readonly labels: ParticipantConversationsLabels
   readonly separator: string
+  readonly iconSize: number
 }
 
-function BadgeContent({ descriptor, labels, separator }: BadgeProps) {
+function BadgeContent({ descriptor, labels, separator, iconSize }: BadgeProps) {
   const Icon = ICONS[descriptor.iconName]
   return (
     <>
-      <Icon size={14} aria-hidden={true} />
+      <Icon size={iconSize} aria-hidden={true} />
       <span className="cv-p-sr-only">{`${resolveParticipantChannelLabel(descriptor, labels)}${separator}`}</span>
     </>
   )
 }
 
-export function ParticipantChannelBadges({ channels, labels, variant = 'list' }: ParticipantChannelBadgesProps) {
+export function ParticipantChannelBadges({
+  channels,
+  labels,
+  variant = 'list',
+  iconSize = 14,
+}: ParticipantChannelBadgesProps) {
   const descriptors = resolveParticipantChannels(channels)
   if (descriptors.length === 0) return null
 
@@ -56,6 +64,7 @@ export function ParticipantChannelBadges({ channels, labels, variant = 'list' }:
               descriptor={descriptor}
               labels={labels}
               separator={index < descriptors.length - 1 ? ', ' : ''}
+              iconSize={iconSize}
             />
           </span>
         ))}
@@ -67,7 +76,7 @@ export function ParticipantChannelBadges({ channels, labels, variant = 'list' }:
     <ul className="cv-p-channels" aria-label={labels.channelsGroup}>
       {descriptors.map((descriptor) => (
         <li key={descriptor.channel} className={`cv-p-channel cv-p-channel--${descriptor.channel}`}>
-          <BadgeContent descriptor={descriptor} labels={labels} separator="" />
+          <BadgeContent descriptor={descriptor} labels={labels} separator="" iconSize={iconSize} />
         </li>
       ))}
     </ul>

package/src/participant/ParticipantComposer.tsx

@@ -1,9 +1,10 @@
-import { useRef, useState, type ChangeEvent, type FormEvent } from 'react'
+import { useState, type ChangeEvent, type FormEvent } from 'react'
 
 import { channelCapabilityFor } from '../channelCapability'
 import type { ConversationChannel } from '../conversationChannel'
 import { formatFileSize } from '../lib/format'
 import type { QuickReply } from '../quickReplies/quickReply.types'
+import { AttachControl, MessageField, SendButton } from './ParticipantComposerControls'
 import { maxBytesForChannel, reduceFilesSelection, type ParticipantFileRejection } from './participantFileValidation'
 import type { ParticipantConversationsLabels } from './participantLabels'
 import { applyQuickReply } from './participantQuickReply'
@@ -73,34 +74,6 @@ function rejectionText(rejection: ParticipantFileRejection, labels: ParticipantC
   return rejection === 'tooLarge' ? labels.attachmentTooLarge : labels.attachmentTypeNotAccepted
 }
 
-type AttachControlProps = {
-  readonly labels: ParticipantConversationsLabels
-  readonly disabled: boolean
-  readonly acceptedTypes?: readonly string[]
-  readonly onChosen: (event: ChangeEvent<HTMLInputElement>) => void
-}
-
-function AttachControl({ labels, disabled, acceptedTypes, onChosen }: AttachControlProps) {
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  return (
-    <>
-      <input
-        ref={fileInputRef}
-        className="cv-p-composer__file-input"
-        type="file"
-        multiple
-        hidden
-        accept={acceptedTypes?.join(',')}
-        onChange={onChosen}
-      />
-      <button type="button" className="cv-p-button" disabled={disabled} onClick={() => fileInputRef.current?.click()}>
-        <span aria-hidden="true">＋</span>
-        <span className="cv-p-sr-only">{labels.attach}</span>
-      </button>
-    </>
-  )
-}
-
 function useFileSelection(props: ParticipantComposerProps) {
   const [rejection, setRejection] = useState<ParticipantFileRejection | undefined>(undefined)
   const { files, onFilesChange, channel } = props
@@ -147,20 +120,15 @@ export function ParticipantComposer(props: ParticipantComposerProps) {
         {channelCapabilityFor(channel).attachments.accepted ? (
           <AttachControl labels={labels} disabled={disabled} acceptedTypes={props.acceptedTypes} onChosen={handleFilesChosen} />
         ) : null}
-        <textarea
-          className="cv-p-composer__input"
-          aria-label={labels.messageInputLabel}
-          placeholder={labels.messageInputPlaceholder}
-          rows={1}
+        <MessageField
           value={value}
-          maxLength={props.maxLength}
+          label={labels.messageInputLabel}
+          placeholder={labels.messageInputPlaceholder}
           disabled={disabled}
-          onChange={(event) => onChange(event.target.value)}
+          maxLength={props.maxLength}
+          onChange={onChange}
         />
-        <button type="submit" className="cv-p-button cv-p-button--primary" disabled={!canSend}>
-          <span aria-hidden="true">➤</span>
-          <span className="cv-p-sr-only">{labels.send}</span>
-        </button>
+        <SendButton label={labels.send} disabled={!canSend} />
       </div>
     </form>
   )

package/src/participant/ParticipantComposerControls.tsx

@@ -0,0 +1,83 @@
+import { useLayoutEffect, useRef, type ChangeEvent } from 'react'
+
+import { Paperclip, Send } from 'lucide-react'
+
+import { fitTextareaHeight } from './participantAutoGrow'
+import type { ParticipantConversationsLabels } from './participantLabels'
+
+type AttachControlProps = {
+  readonly labels: ParticipantConversationsLabels
+  readonly disabled: boolean
+  readonly acceptedTypes?: readonly string[]
+  readonly onChosen: (event: ChangeEvent<HTMLInputElement>) => void
+}
+
+export function AttachControl({ labels, disabled, acceptedTypes, onChosen }: AttachControlProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  return (
+    <>
+      <input
+        ref={fileInputRef}
+        className="cv-p-composer__file-input"
+        type="file"
+        multiple
+        hidden
+        accept={acceptedTypes?.join(',')}
+        onChange={onChosen}
+      />
+      <button
+        type="button"
+        className="cv-p-composer__attach"
+        aria-label={labels.attach}
+        disabled={disabled}
+        onClick={() => fileInputRef.current?.click()}
+      >
+        <Paperclip size={24} aria-hidden="true" focusable="false" />
+      </button>
+    </>
+  )
+}
+
+export function SendButton({ label, disabled }: { readonly label: string; readonly disabled: boolean }) {
+  return (
+    <button
+      type="submit"
+      className="cv-p-button cv-p-button--primary cv-p-composer__send"
+      aria-label={label}
+      disabled={disabled}
+    >
+      <Send size={20} aria-hidden="true" focusable="false" />
+    </button>
+  )
+}
+
+type MessageFieldProps = {
+  readonly value: string
+  readonly label: string
+  readonly placeholder: string
+  readonly disabled: boolean
+  readonly maxLength?: number
+  readonly onChange: (value: string) => void
+}
+
+export function MessageField({ value, label, placeholder, disabled, maxLength, onChange }: MessageFieldProps) {
+  const fieldRef = useRef<HTMLTextAreaElement>(null)
+
+  useLayoutEffect(() => {
+    if (fieldRef.current) fitTextareaHeight(fieldRef.current)
+  }, [value])
+
+  return (
+    <textarea
+      ref={fieldRef}
+      className="cv-p-composer__input"
+      aria-label={label}
+      placeholder={placeholder}
+      rows={1}
+      value={value}
+      maxLength={maxLength}
+      disabled={disabled}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  )
+}

package/src/participant/ParticipantConversationAvatar.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react'
+
+export type ParticipantConversationAvatarProps = {
+  readonly icon: ReactNode
+}
+
+export function ParticipantConversationAvatar({ icon }: ParticipantConversationAvatarProps) {
+  return (
+    <span className="cv-p-thread__avatar" aria-hidden="true">
+      {icon}
+    </span>
+  )
+}

package/src/participant/ParticipantConversations.tsx

@@ -5,6 +5,7 @@ import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@ada
 import type { ConversationChannel } from '../conversationChannel'
 import type { QuickReply } from '../quickReplies/quickReply.types'
 import type { ConversationsTheme } from '../types'
+import type { ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
 import { ParticipantConversationsScreen } from './ParticipantConversationsScreen'
 import type {
   ParticipantConversationsClassNames,
@@ -34,6 +35,12 @@ export type ParticipantConversationsProps = {
   renderSubjectIcon?: ParticipantSubjectIconRenderer
   renderSubjectCard?: (conversation: ParticipantConversationSummary) => ReactNode
   onOpenSubject?: (subject: ParticipantSubjectRef) => void
+  /** Absent draws no avatar. The SDK has no photo: the host supplies it through renderAuthorAvatar. */
+  avatars?: 'initials'
+  /** Host slot for the author's photo; wins over 'initials' and enables avatars on its own. */
+  renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
+  /** Speech-bubble tail on the bottom corner; false removes it. Default true. */
+  tail?: boolean
 }
 
 export function ParticipantConversations(props: ParticipantConversationsProps) {

package/src/participant/ParticipantConversationsOptions.test.tsx

@@ -0,0 +1,87 @@
+import { afterAll, beforeAll, describe, expect, it, mock } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import type { ParticipantConversationsApi } from './participantApi.types'
+import { buildConversation, buildMessage } from './participantFixtures.test-helper'
+import type { ParticipantConversationsScreenProps } from './ParticipantConversationsScreen'
+import * as realThreadModule from './useParticipantThread'
+
+const MESSAGES = [
+  buildMessage({ id: 'a', authorName: 'Ana Souza', createdAt: '2026-10-01T10:00:00.000Z' }),
+  buildMessage({ id: 'b', direction: 'inbound', createdAt: '2026-10-01T10:01:00.000Z' }),
+]
+const realUseParticipantThread = realThreadModule.useParticipantThread
+let isInjecting = false
+
+const API: ParticipantConversationsApi = {
+  listConversations: async () => ({ data: [] }),
+  fetchMessages: async () => [],
+  sendMessage: async () => ({ outcome: 'queued' }),
+  markRead: async () => undefined,
+  resolveAttachmentUrl: async () => 'https://files.example/a',
+}
+
+let ParticipantConversationsScreen: typeof import('./ParticipantConversationsScreen').ParticipantConversationsScreen
+
+beforeAll(async () => {
+  // Server rendering runs no effects, so the messages are injected over the real hook.
+  mock.module('./useParticipantThread', () => ({
+    ...realThreadModule,
+    useParticipantThread: (...args: Parameters<typeof realUseParticipantThread>) => {
+      const result = realUseParticipantThread(...args)
+      return isInjecting ? { ...result, messages: MESSAGES, status: 'ready' as const } : result
+    },
+  }))
+  ParticipantConversationsScreen = (await import('./ParticipantConversationsScreen')).ParticipantConversationsScreen
+  isInjecting = true
+})
+
+afterAll(() => {
+  isInjecting = false
+})
+
+function renderThread(overrides: Partial<ParticipantConversationsScreenProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantConversationsScreen
+      api={API}
+      subjectGroups={[{ subjectType: 'invoice', label: 'Invoices' }]}
+      selected={{ subjectType: 'invoice', subjectId: '1' }}
+      onSelect={() => undefined}
+      inbox={{
+        status: 'ready',
+        conversations: [buildConversation({ subjectId: '1', subjectLabel: 'Invoice 4521' })],
+        hasMore: false,
+        refresh: async () => undefined,
+        loadMore: async () => undefined,
+        markSubjectRead: () => undefined,
+      }}
+      {...overrides}
+    />,
+  )
+}
+
+describe('participant options reach the DOM through the screen', () => {
+  it('injects the messages (sanity)', () => {
+    expect(renderThread()).toContain('cv-p-bubble--mine')
+  })
+
+  it('draws the group eyebrow from subjectGroups', () => {
+    expect(renderThread()).toContain('<p class="cv-p-thread__eyebrow">Invoices</p>')
+  })
+
+  it('draws no avatar by default and the initials with avatars="initials"', () => {
+    expect(renderThread()).not.toContain('cv-p-avatar')
+    expect(renderThread({ avatars: 'initials' })).toContain('class="cv-p-avatar" aria-hidden="true">AS<')
+  })
+
+  it('draws the host slot through renderAuthorAvatar', () => {
+    const markup = renderThread({ renderAuthorAvatar: () => <i>PHOTO</i> })
+    expect(markup).toContain('<i>PHOTO</i>')
+  })
+
+  it('keeps the tail by default and removes it from every bubble with tail={false}', () => {
+    expect(renderThread()).not.toContain('cv-p-bubble--no-tail')
+    const markup = renderThread({ tail: false })
+    expect(markup.match(/cv-p-bubble--no-tail/g)?.length).toBe(2)
+  })
+})

package/src/participant/ParticipantCopyAnnouncer.tsx

@@ -0,0 +1,48 @@
+import { createContext, useCallback, useContext, useEffect, useReducer, useRef, type ReactNode } from 'react'
+
+import {
+  INITIAL_COPY_ANNOUNCEMENT,
+  copyAnnouncementReducer,
+  resolveLiveText,
+  type CopyAnnouncementState,
+} from './participantCopyAnnouncement'
+
+const ANNOUNCEMENT_MS = 3000
+
+const AnnounceContext = createContext<(text: string) => void>(() => undefined)
+const AnnouncementContext = createContext<CopyAnnouncementState>(INITIAL_COPY_ANNOUNCEMENT)
+
+export function useAnnounceCopy(): (text: string) => void {
+  return useContext(AnnounceContext)
+}
+
+/** Holds the text of the conversation's single polite region; the copy buttons announce through it. */
+export function ParticipantCopyAnnouncer({ children }: { readonly children: ReactNode }) {
+  const [announcement, dispatch] = useReducer(copyAnnouncementReducer, INITIAL_COPY_ANNOUNCEMENT)
+  const announce = useCallback((text: string): void => dispatch({ type: 'announce', text }), [])
+
+  useEffect(() => {
+    if (announcement.text === '') return undefined
+    const timer = setTimeout(() => dispatch({ type: 'expired' }), ANNOUNCEMENT_MS)
+    return () => clearTimeout(timer)
+  }, [announcement.tick, announcement.text])
+
+  return (
+    <AnnounceContext.Provider value={announce}>
+      <AnnouncementContext.Provider value={announcement}>{children}</AnnouncementContext.Provider>
+    </AnnounceContext.Provider>
+  )
+}
+
+/** The one aria-live region of the thread: new-message notice, or the last copy announcement. */
+export function ParticipantThreadLive({ notice }: { readonly notice: string }) {
+  const copy = useContext(AnnouncementContext)
+  const baselineNotice = useRef<string | undefined>(undefined)
+  const resolution = resolveLiveText({ copy, notice, baselineNotice: baselineNotice.current })
+  baselineNotice.current = resolution.baselineNotice
+  return (
+    <div className="cv-p-thread__live" role="status" aria-live="polite">
+      {resolution.text}
+    </div>
+  )
+}

package/src/participant/ParticipantCopyableToken.tsx

@@ -0,0 +1,51 @@
+import { Check, Copy } from 'lucide-react'
+
+import { useParticipantCopyFeedback } from './useParticipantCopyFeedback'
+import type { CopyableKind } from './participantMessageFormat.types'
+import type { ParticipantConversationsLabels } from './participantLabels'
+
+type CopyLabels = Pick<ParticipantConversationsLabels, 'copyValue' | 'valueCopied'>
+
+export type ParticipantCopyableTokenProps = {
+  readonly copyKind: CopyableKind
+  readonly value: string
+  readonly labels: CopyLabels
+}
+
+export function ParticipantCopyableToken({ copyKind, value, labels }: ParticipantCopyableTokenProps) {
+  const { isCopied, copy } = useParticipantCopyFeedback()
+  return (
+    <button
+      type="button"
+      className={`cv-p-copyable cv-p-copyable--${copyKind}`}
+      aria-label={`${labels.copyValue} ${value}`}
+      onClick={() => copy(value, labels.valueCopied)}
+    >
+      {value}
+      {isCopied ? (
+        <span className="cv-p-copyable__done" aria-hidden="true">
+          <Check size={12} aria-hidden={true} /> {labels.valueCopied}
+        </span>
+      ) : null}
+    </button>
+  )
+}
+
+export type ParticipantLinkCopyButtonProps = {
+  readonly value: string
+  readonly labels: CopyLabels
+}
+
+export function ParticipantLinkCopyButton({ value, labels }: ParticipantLinkCopyButtonProps) {
+  const { isCopied, copy } = useParticipantCopyFeedback()
+  return (
+    <button
+      type="button"
+      className="cv-p-text__link-copy"
+      aria-label={`${labels.copyValue} ${value}`}
+      onClick={() => copy(value, labels.valueCopied)}
+    >
+      {isCopied ? <Check size={14} aria-hidden={true} /> : <Copy size={14} aria-hidden={true} />}
+    </button>
+  )
+}

package/src/participant/ParticipantDayDivider.tsx

@@ -0,0 +1,18 @@
+import { toDateTimeAttribute } from './participantDay'
+
+export type ParticipantDayDividerProps = {
+  readonly day: Date
+  readonly locale?: string
+}
+
+export function ParticipantDayDivider({ day, locale }: ParticipantDayDividerProps) {
+  const label = day.toLocaleDateString(locale, { weekday: 'short', day: '2-digit', month: '2-digit' })
+
+  return (
+    <div className="cv-p-day" role="separator" aria-label={label}>
+      <time className="cv-p-day__label" dateTime={toDateTimeAttribute(day)}>
+        {label}
+      </time>
+    </div>
+  )
+}

package/src/participant/ParticipantInbox.tsx

@@ -12,6 +12,7 @@ import { resolveLoadView, type ParticipantLoadStatus } from './participantLoadVi
 import { ParticipantInboxRow } from './ParticipantInboxRow'
 import { ParticipantInboxSearchField, type ParticipantInboxSearch } from './ParticipantInboxSearchField'
 import { ParticipantLoadError, ParticipantLoading } from './ParticipantLoadState'
+import { useRevealActiveChip } from './useRevealActiveChip'
 
 export type ParticipantInboxProps = {
   readonly view: ParticipantInboxView
@@ -54,8 +55,9 @@ type FiltersProps = {
 }
 
 function Filters({ filters, active, labels, onChange }: FiltersProps) {
+  const strip = useRevealActiveChip(active)
   return (
-    <div className="cv-p-filters" role="group" aria-label={labels.filtersGroup}>
+    <div className="cv-p-filters" role="group" aria-label={labels.filtersGroup} ref={strip}>
       {filters.map((filter) => (
         <button
           key={filter.subjectType}

package/src/participant/ParticipantInboxRow.tsx

@@ -4,6 +4,7 @@ import { formatTimestamp, isSameDay } from '../lib/format'
 import type { ParticipantSubjectGroup, ParticipantSubjectIconRenderer } from './participant.types'
 import { formatParticipantLabel, type ParticipantConversationsLabels } from './participantLabels'
 import { ParticipantChannelBadges } from './ParticipantChannelBadges'
+import { isDrawable, resolveConversationIcon } from './participantSubjectIcon'
 
 export type ParticipantInboxRowProps = {
   readonly conversation: ParticipantConversationSummary
@@ -21,17 +22,18 @@ function formatRowTime(iso: string, locale: string | undefined): string {
 }
 
 function RowIcon({ props, kind }: { readonly props: ParticipantInboxRowProps; readonly kind: string }) {
-  const custom = props.renderSubjectIcon?.(props.conversation)
-  if (custom !== null && custom !== undefined && custom !== false && custom !== '') {
+  const { conversation, group, renderSubjectIcon } = props
+  const hostIcon = renderSubjectIcon?.(conversation)
+  if (isDrawable(hostIcon)) {
     return (
       <span className="cv-p-row__icon cv-p-inbox__icon" aria-hidden="true">
-        {custom}
+        {hostIcon}
       </span>
     )
   }
   return (
     <span className="cv-p-row__icon" aria-hidden="true">
-      {props.group?.icon ?? kind.slice(0, 2)}
+      {resolveConversationIcon({ conversation, group }) ?? kind.slice(0, 2)}
     </span>
   )
 }