@adatechnology/conversations-ui 0.4.2 → 0.5.0

package/src/participant/ParticipantConversations.test.tsx

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ParticipantConversations } from './ParticipantConversations'
+import { ParticipantConversationsScreen, type ParticipantConversationsScreenProps } from './ParticipantConversationsScreen'
+import type { ParticipantConversationsApi } from './participantApi.types'
+import { buildConversation, findForeignClassTokens, findUtilityClassTokens } from './participantFixtures.test-helper'
+
+const API: ParticipantConversationsApi = {
+  listConversations: async () => ({ data: [] }),
+  fetchMessages: async () => [],
+  sendMessage: async () => ({ outcome: 'queued' }),
+  markRead: async () => undefined,
+  resolveAttachmentUrl: async () => 'https://files.example/a',
+}
+
+const GROUPS = [{ subjectType: 'invoice', label: 'Invoices' }]
+
+function renderScreen(overrides: Partial<ParticipantConversationsScreenProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantConversationsScreen
+      api={API}
+      subjectGroups={GROUPS}
+      selected={undefined}
+      onSelect={() => undefined}
+      inbox={{
+        status: 'ready',
+        conversations: [buildConversation({ subjectId: '1', subjectLabel: 'Invoice 4521' })],
+        hasMore: false,
+        refresh: async () => undefined,
+        loadMore: async () => undefined,
+        markSubjectRead: () => undefined,
+      }}
+      {...overrides}
+    />,
+  )
+}
+
+describe('ParticipantConversations', () => {
+  it('renders the list without any ConversationsProvider around it', () => {
+    const markup = renderToStaticMarkup(
+      <ParticipantConversations api={API} subjectGroups={GROUPS} selected={undefined} onSelect={() => undefined} />,
+    )
+
+    expect(markup).toContain('cv-p-inbox')
+    expect(findUtilityClassTokens(markup)).toEqual([])
+    expect(findForeignClassTokens(markup)).toEqual([])
+  })
+
+  it('renders the inbox rows when selected is undefined', () => {
+    const markup = renderScreen()
+
+    expect(markup).toContain('cv-p-inbox')
+    expect(markup).toContain('Invoice 4521')
+    expect(markup).not.toContain('cv-p-thread')
+  })
+
+  it('mounts the conversation shell with the subject label when selected is set', () => {
+    const markup = renderScreen({ selected: { subjectType: 'invoice', subjectId: '1' } })
+
+    expect(markup).toContain('cv-p-thread__title')
+    expect(markup).toContain('Invoice 4521')
+    expect(markup).not.toContain('cv-p-inbox')
+    expect(findUtilityClassTokens(markup)).toEqual([])
+  })
+
+  it('shows the not-found state when the subject is absent and the api cannot open it', () => {
+    const markup = renderScreen({ selected: { subjectType: 'invoice', subjectId: '999' } })
+
+    expect(markup).toContain('Conversation not found')
+  })
+
+  it('merges partial labels over the defaults', () => {
+    const markup = renderScreen({ labels: { inboxTitle: 'Minhas conversas' } })
+
+    expect(markup).toContain('Minhas conversas')
+  })
+
+  it('applies the theme as --cv-p-* variables and the class names on the wrapper', () => {
+    const markup = renderScreen({
+      theme: { primaryColor: '#123456' },
+      className: 'host-wrapper',
+      classNames: { inbox: 'host-inbox' },
+    })
+
+    expect(markup).toContain('--cv-p-accent:#123456')
+    expect(markup).toContain('host-wrapper')
+    expect(markup).toContain('host-inbox')
+  })
+})

package/src/participant/ParticipantConversations.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react'
+
+import type {
+  ParticipantConversationSummary,
+  ParticipantSubjectRef,
+} from '@adatechnology/conversation-contracts'
+
+import type { ConversationChannel } from '../conversationChannel'
+import type { QuickReply } from '../quickReplies/quickReply.types'
+import type { ConversationsTheme } from '../types'
+import { ParticipantConversationsScreen } from './ParticipantConversationsScreen'
+import type { ParticipantConversationsClassNames, ParticipantSubjectGroup } from './participant.types'
+import type { ParticipantConversationsApi, ParticipantPendingMessage } from './participantApi.types'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import { useParticipantInbox } from './useParticipantInbox'
+
+export type ParticipantConversationsProps = {
+  api: ParticipantConversationsApi
+  subjectGroups: readonly ParticipantSubjectGroup[]
+  /** undefined renders the list; defined renders that conversation. */
+  selected: ParticipantSubjectRef | undefined
+  onSelect: (subject: ParticipantSubjectRef) => void
+  onBack?: () => void
+  channel?: ConversationChannel
+  labels?: Partial<ParticipantConversationsLabels>
+  locale?: string
+  theme?: ConversationsTheme
+  className?: string
+  classNames?: Partial<ParticipantConversationsClassNames>
+  pendingMessages?: readonly ParticipantPendingMessage[]
+  onRetryPending?: (clientMessageId: string) => void
+  quickReplies?: readonly QuickReply[]
+  renderSubjectCard?: (conversation: ParticipantConversationSummary) => ReactNode
+  onOpenSubject?: (subject: ParticipantSubjectRef) => void
+}
+
+export function ParticipantConversations(props: ParticipantConversationsProps) {
+  const inbox = useParticipantInbox(props.api)
+  const { status, conversations, hasMore, refresh, loadMore, markSubjectRead } = inbox
+
+  return <ParticipantConversationsScreen {...props} inbox={{ status, conversations, hasMore, refresh, loadMore, markSubjectRead }} />
+}

package/src/participant/ParticipantConversationsScreen.tsx

@@ -0,0 +1,67 @@
+import { useMemo, useReducer, useRef, useState } from 'react'
+
+import { ParticipantInbox } from './ParticipantInbox'
+import type { ParticipantConversationsProps } from './ParticipantConversations'
+import { ParticipantThreadScreen } from './ParticipantThreadScreen'
+import { draftKey, type ParticipantDrafts } from './participantDrafts'
+import { groupParticipantConversations } from './participantGrouping'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { participantSendStatesReducer } from './participantSendStates'
+import { buildParticipantThemeStyle } from './participantTheme'
+import type { UseParticipantInboxResult } from './useParticipantInbox'
+
+export type ParticipantConversationsScreenProps = ParticipantConversationsProps & {
+  readonly inbox: Pick<UseParticipantInboxResult, 'status' | 'conversations' | 'hasMore' | 'refresh' | 'loadMore' | 'markSubjectRead'>
+}
+
+const ALL_FILTER = 'all'
+
+export function ParticipantConversationsScreen(props: ParticipantConversationsScreenProps) {
+  const { selected, inbox, subjectGroups, classNames } = props
+  const [filter, setFilter] = useState(ALL_FILTER)
+  const draftsRef = useRef<ParticipantDrafts>(new Map())
+  const [sendStates, dispatchSendStates] = useReducer(participantSendStatesReducer, new Map())
+  const labels = useMemo(
+    () => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }),
+    [props.labels],
+  )
+  const view = useMemo(
+    () => groupParticipantConversations({ conversations: inbox.conversations, subjectGroups, filter }),
+    [inbox.conversations, subjectGroups, filter],
+  )
+  const rootClassName = ['cv-p-root', props.className, classNames?.root].filter(Boolean).join(' ')
+
+  return (
+    <div className={rootClassName} style={buildParticipantThemeStyle(props.theme)}>
+      {selected === undefined ? (
+        <div className={['cv-p-root__screen', classNames?.inbox].filter(Boolean).join(' ')}>
+          <ParticipantInbox
+            view={view}
+            subjectGroups={subjectGroups}
+            filter={filter}
+            onFilterChange={setFilter}
+            onSelect={props.onSelect}
+            labels={labels}
+            status={inbox.status}
+            refresh={() => void inbox.refresh()}
+            hasMore={inbox.hasMore}
+            loadMore={() => void inbox.loadMore()}
+            locale={props.locale}
+          />
+        </div>
+      ) : (
+        <div className={['cv-p-root__screen', classNames?.thread].filter(Boolean).join(' ')}>
+          <ParticipantThreadScreen
+            key={draftKey(selected)}
+            {...props}
+            selected={selected}
+            labels={labels}
+            draftsRef={draftsRef}
+            sendStates={sendStates}
+            dispatchSendStates={dispatchSendStates}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/participant/ParticipantInbox.test.tsx

@@ -0,0 +1,147 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { buildConversation, findForeignClassTokens, findUtilityClassTokens } from './participantFixtures.test-helper'
+import { groupParticipantConversations } from './participantGrouping'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import type { ParticipantSubjectGroup } from './participant.types'
+import { ParticipantInbox } from './ParticipantInbox'
+
+const GROUPS: readonly ParticipantSubjectGroup[] = [
+  { subjectType: 'invoice', label: 'Invoice' },
+  { subjectType: 'incident', label: 'Incident' },
+]
+
+const CONVERSATIONS = [
+  buildConversation({ subjectId: '1', subjectLabel: 'Awaiting one', awaitingParticipant: true, unreadCount: 2, lastMessagePreview: 'Please send the photo' }),
+  buildConversation({ subjectId: '2', subjectLabel: 'Invoice two' }),
+  buildConversation({ subjectId: '3', subjectType: 'incident', subjectLabel: 'Incident three' }),
+  buildConversation({ subjectId: '4', subjectLabel: 'Old one', status: 'closed' }),
+]
+
+type RenderOverrides = {
+  conversations?: typeof CONVERSATIONS
+  filter?: string
+  status?: 'idle' | 'loading' | 'ready' | 'error'
+  hasMore?: boolean
+}
+
+function render(overrides: RenderOverrides = {}): string {
+  const view = groupParticipantConversations({
+    conversations: overrides.conversations ?? CONVERSATIONS,
+    subjectGroups: GROUPS,
+    filter: overrides.filter,
+  })
+  return renderToStaticMarkup(
+    <ParticipantInbox
+      view={view}
+      subjectGroups={GROUPS}
+      filter={overrides.filter ?? 'all'}
+      onFilterChange={() => undefined}
+      onSelect={() => undefined}
+      labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+      status={overrides.status ?? 'ready'}
+      refresh={() => undefined}
+      hasMore={overrides.hasMore ?? false}
+      loadMore={() => undefined}
+    />,
+  )
+}
+
+describe('ParticipantInbox', () => {
+  it('renders section headers with label and count, awaiting highlighted', () => {
+    const markup = render()
+
+    expect(markup).toContain('Waiting for your reply')
+    expect(markup).toContain('cv-p-section--awaiting')
+    expect(markup).toContain('Invoice')
+    expect(markup).toContain('Incident')
+  })
+
+  it('renders rows as buttons with the subject label as text and the preview', () => {
+    const markup = render()
+
+    expect(markup).toContain('<button')
+    expect(markup).toContain('Awaiting one')
+    expect(markup).toContain('Please send the photo')
+    expect(markup).toContain('cv-p-row__kind')
+    expect(markup).toContain('cv-p-row--awaiting')
+  })
+
+  it('shows an unread badge with accessible text only when there are unread messages', () => {
+    const markup = render()
+
+    expect(markup).toContain('2 unread')
+    expect(markup.match(/cv-p-row__unread/g)?.length).toBe(1)
+  })
+
+  it('puts closed conversations inside a collapsible details', () => {
+    const markup = render()
+
+    expect(markup).toContain('<details')
+    expect(markup).toContain('Closed')
+    expect(markup).toContain('Old one')
+  })
+
+  it('renders filters only when showFilters is true', () => {
+    const withFilters = render()
+    const single = render({ conversations: [CONVERSATIONS[1] as (typeof CONVERSATIONS)[number]] })
+
+    expect(withFilters).toContain('cv-p-filters')
+    expect(withFilters).toContain('aria-pressed="true"')
+    expect(single).not.toContain('cv-p-filters')
+  })
+
+  it('renders the empty state when there are no sections', () => {
+    const markup = render({ conversations: [] })
+
+    expect(markup).toContain('No conversations yet')
+    expect(markup).not.toContain('cv-p-row"')
+  })
+
+  it('while loading shows a busy skeleton and never the empty state', () => {
+    const markup = render({ conversations: [], status: 'loading' })
+
+    expect(markup).toContain('aria-busy="true"')
+    expect(markup).toContain('Loading…')
+    expect(markup).not.toContain('No conversations yet')
+    expect(render({ conversations: [], status: 'idle' })).not.toContain('No conversations yet')
+  })
+
+  it('on error shows an alert with retry and never the empty state', () => {
+    const markup = render({ conversations: [], status: 'error' })
+
+    expect(markup).toContain('role="alert"')
+    expect(markup).toContain('Could not load')
+    expect(markup).toContain('Retry')
+    expect(markup).not.toContain('No conversations yet')
+    expect(markup).not.toContain('aria-busy="true"')
+  })
+
+  it('on success shows the empty state without busy or alert', () => {
+    const markup = render({ conversations: [], status: 'ready' })
+
+    expect(markup).toContain('No conversations yet')
+    expect(markup).not.toContain('role="alert"')
+    expect(markup).toContain('aria-busy="false"')
+  })
+
+  it('keeps the rows and adds the alert when a later request fails', () => {
+    const markup = render({ status: 'error' })
+
+    expect(markup).toContain('Awaiting one')
+    expect(markup).toContain('role="alert"')
+  })
+
+  it('shows load more only when there is a next page', () => {
+    expect(render()).not.toContain('Load more')
+    expect(render({ hasMore: true })).toContain('Load more')
+  })
+
+  it('uses only cv-p-* classes and no Tailwind utilities', () => {
+    const markup = render()
+
+    expect(findUtilityClassTokens(markup)).toEqual([])
+    expect(findForeignClassTokens(markup)).toEqual([])
+  })
+})

package/src/participant/ParticipantInbox.tsx

@@ -0,0 +1,168 @@
+import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
+
+import { formatTimestamp, isSameDay } from '../lib/format'
+import type {
+  ParticipantInboxFilter,
+  ParticipantInboxSection,
+  ParticipantInboxView,
+  ParticipantSubjectGroup,
+} from './participant.types'
+import { formatParticipantLabel, type ParticipantConversationsLabels } from './participantLabels'
+import { resolveLoadView, type ParticipantLoadStatus } from './participantLoadView'
+import { ParticipantLoadError, ParticipantLoading } from './ParticipantLoadState'
+
+export type ParticipantInboxProps = {
+  readonly view: ParticipantInboxView
+  readonly subjectGroups: readonly ParticipantSubjectGroup[]
+  /** subjectType of the active filter, or 'all'. */
+  readonly filter: string
+  readonly onFilterChange: (filter: string) => void
+  readonly onSelect: (subject: ParticipantSubjectRef) => void
+  readonly labels: ParticipantConversationsLabels
+  readonly status: ParticipantLoadStatus
+  readonly refresh: () => void
+  readonly hasMore: boolean
+  readonly loadMore: () => void
+  readonly locale?: string
+}
+
+const ALL_FILTER = 'all'
+
+function formatRowTime(iso: string, locale: string | undefined): string {
+  const date = new Date(iso)
+  if (isSameDay(date, new Date())) return formatTimestamp(iso)
+  return date.toLocaleDateString(locale, { day: '2-digit', month: '2-digit' })
+}
+
+function sectionTitle(section: ParticipantInboxSection, props: ParticipantInboxProps): string {
+  if (section.key === 'awaiting') return props.labels.sectionAwaiting
+  if (section.key === 'closed') return props.labels.sectionClosed
+  if (section.key === 'other') return props.labels.sectionOther
+  return props.subjectGroups.find((group) => group.subjectType === section.key)?.label ?? section.key
+}
+
+type FiltersProps = {
+  readonly filters: readonly ParticipantInboxFilter[]
+  readonly active: string
+  readonly labels: ParticipantConversationsLabels
+  readonly onChange: (filter: string) => void
+}
+
+function Filters({ filters, active, labels, onChange }: FiltersProps) {
+  return (
+    <div className="cv-p-filters" role="group" aria-label={labels.filtersGroup}>
+      {filters.map((filter) => (
+        <button
+          key={filter.subjectType}
+          type="button"
+          className="cv-p-chip"
+          aria-pressed={filter.subjectType === active}
+          onClick={() => onChange(filter.subjectType)}
+        >
+          {filter.subjectType === ALL_FILTER ? labels.filterAll : filter.label}
+          {filter.unreadCount > 0 ? <b className="cv-p-chip__count">{filter.unreadCount}</b> : null}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+type RowProps = {
+  readonly conversation: ParticipantConversationSummary
+  readonly group: ParticipantSubjectGroup | undefined
+  readonly labels: ParticipantConversationsLabels
+  readonly locale?: string
+  readonly onSelect: (subject: ParticipantSubjectRef) => void
+}
+
+function Row({ conversation, group, labels, locale, onSelect }: RowProps) {
+  const kind = group?.label ?? conversation.subjectType
+  const className = conversation.awaitingParticipant ? 'cv-p-row cv-p-row--awaiting' : 'cv-p-row'
+  const { subjectType, subjectId } = conversation
+
+  return (
+    <button type="button" className={className} onClick={() => onSelect({ subjectType, subjectId })}>
+      <span className="cv-p-row__icon" aria-hidden="true">
+        {group?.icon ?? kind.slice(0, 2)}
+      </span>
+      <span className="cv-p-row__body">
+        <span className="cv-p-row__kind">{kind}</span>
+        <span className="cv-p-row__title">{conversation.subjectLabel}</span>
+        {conversation.lastMessagePreview ? <span className="cv-p-row__preview">{conversation.lastMessagePreview}</span> : null}
+      </span>
+      <span className="cv-p-row__meta">
+        {conversation.lastMessageAt ? <span>{formatRowTime(conversation.lastMessageAt, locale)}</span> : null}
+        {conversation.unreadCount > 0 ? (
+          <span className="cv-p-row__unread">
+            <span aria-hidden="true">{conversation.unreadCount}</span>
+            <span className="cv-p-sr-only">{formatParticipantLabel(labels.unreadCount, conversation.unreadCount)}</span>
+          </span>
+        ) : null}
+      </span>
+    </button>
+  )
+}
+
+function SectionHeading({ title, count }: { readonly title: string; readonly count: number }) {
+  return (
+    <>
+      <span className="cv-p-section__title">{title}</span>
+      <span className="cv-p-section__count">{count}</span>
+    </>
+  )
+}
+
+function Section({ section, props }: { readonly section: ParticipantInboxSection; readonly props: ParticipantInboxProps }) {
+  const rows = section.conversations.map((conversation) => (
+    <Row
+      key={`${conversation.subjectType}:${conversation.subjectId}`}
+      conversation={conversation}
+      group={props.subjectGroups.find((group) => group.subjectType === conversation.subjectType)}
+      labels={props.labels}
+      locale={props.locale}
+      onSelect={props.onSelect}
+    />
+  ))
+  const heading = <SectionHeading title={sectionTitle(section, props)} count={section.conversations.length} />
+
+  if (section.key === 'closed') {
+    return (
+      <details className="cv-p-section cv-p-section--closed">
+        <summary className="cv-p-section__heading">{heading}</summary>
+        {rows}
+      </details>
+    )
+  }
+  const modifier = section.key === 'awaiting' ? ' cv-p-section--awaiting' : ''
+  return (
+    <section className={`cv-p-section${modifier}`}>
+      <h3 className="cv-p-section__heading">{heading}</h3>
+      {rows}
+    </section>
+  )
+}
+
+export function ParticipantInbox(props: ParticipantInboxProps) {
+  const { view, labels, filter, onFilterChange } = props
+  const loadView = resolveLoadView({ status: props.status, hasItems: view.sections.length > 0 })
+
+  return (
+    <div className="cv-p cv-p-inbox" aria-busy={loadView.isLoading}>
+      <h2 className="cv-p-inbox__title">{labels.inboxTitle}</h2>
+      {view.showFilters ? (
+        <Filters filters={view.filters} active={filter} labels={labels} onChange={onFilterChange} />
+      ) : null}
+      {loadView.isLoading ? <ParticipantLoading labels={labels} /> : null}
+      {loadView.hasError ? <ParticipantLoadError labels={labels} onRetry={props.refresh} /> : null}
+      {loadView.isEmpty ? <p className="cv-p-empty">{labels.emptyInbox}</p> : null}
+      {view.sections.map((section) => (
+        <Section key={section.key} section={section} props={props} />
+      ))}
+      {props.hasMore ? (
+        <button type="button" className="cv-p-button cv-p-inbox__more" onClick={props.loadMore}>
+          {labels.loadMore}
+        </button>
+      ) : null}
+    </div>
+  )
+}

package/src/participant/ParticipantLoadState.tsx

@@ -0,0 +1,27 @@
+import type { ParticipantConversationsLabels } from './participantLabels'
+
+export type ParticipantLoadErrorProps = {
+  readonly labels: ParticipantConversationsLabels
+  readonly onRetry: () => void
+}
+
+export function ParticipantLoadError({ labels, onRetry }: ParticipantLoadErrorProps) {
+  return (
+    <div className="cv-p-error" role="alert">
+      <p className="cv-p-error__message">{labels.loadError}</p>
+      <button type="button" className="cv-p-button" onClick={onRetry}>
+        {labels.retry}
+      </button>
+    </div>
+  )
+}
+
+export function ParticipantLoading({ labels }: { readonly labels: ParticipantConversationsLabels }) {
+  return (
+    <div className="cv-p-loading">
+      <span className="cv-p-skeleton" aria-hidden="true" />
+      <span className="cv-p-skeleton" aria-hidden="true" />
+      <span className="cv-p-sr-only">{labels.loading}</span>
+    </div>
+  )
+}