@adatechnology/conversations-ui 0.6.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.6.1",
+  "version": "0.8.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/ConversationThread.test.tsx

@@ -0,0 +1,165 @@
+import { afterAll, beforeAll, describe, expect, it, mock } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import type { ParticipantMessage } from '@adatechnology/conversation-contracts'
+
+import type { ConversationThreadApi } from './conversationThreadApi'
+import type { ConversationThreadProps } from './ConversationThread'
+import { buildMessage, findForeignClassTokens, findUtilityClassTokens } from './participantFixtures.test-helper'
+import * as realThreadModule from './useParticipantThread'
+
+const COUNTERPART = buildMessage({
+  id: 'a',
+  direction: 'inbound',
+  authorName: 'Ana Souza',
+  createdAt: '2026-10-01T10:00:00.000Z',
+})
+const OWN_READ = buildMessage({ id: 'b', direction: 'outbound', status: 'read', createdAt: '2026-10-01T10:01:00.000Z' })
+const OWN_DELIVERED = buildMessage({
+  id: 'c',
+  direction: 'outbound',
+  status: 'delivered',
+  createdAt: '2026-10-01T10:02:00.000Z',
+})
+
+const realUseParticipantThread = realThreadModule.useParticipantThread
+let injected: readonly ParticipantMessage[] | undefined
+
+const API: ConversationThreadApi = {
+  fetchMessages: async () => [],
+  sendMessage: async () => ({ outcome: 'queued' }),
+  resolveAttachmentUrl: async () => 'https://files.example/a',
+}
+
+let ConversationThread: typeof import('./ConversationThread').ConversationThread
+
+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 injected ? { ...result, messages: injected, status: 'ready' as const } : result
+    },
+  }))
+  ConversationThread = (await import('./ConversationThread')).ConversationThread
+})
+
+afterAll(() => {
+  injected = undefined
+})
+
+function render(messages: readonly ParticipantMessage[], overrides: Partial<ConversationThreadProps> = {}): string {
+  injected = messages
+  return renderToStaticMarkup(
+    <ConversationThread api={API} subject={{ subjectType: 'case', subjectId: '7' }} title="Case 7" {...overrides} />,
+  )
+}
+
+function bubblesOf(markup: string): string[] {
+  return markup.split('<div class="cv-p-bubble').slice(1)
+}
+
+describe('ConversationThread, operator perspective', () => {
+  const MESSAGES = [COUNTERPART, OWN_READ, OWN_DELIVERED]
+
+  it('owns the outbound messages and not the inbound ones', () => {
+    const bubbles = bubblesOf(render(MESSAGES, { perspective: 'operator' }))
+    expect(bubbles.map((bubble) => bubble.startsWith(' cv-p-bubble--mine'))).toEqual([false, true, true])
+  })
+
+  it('draws the ticks on the operator messages only', () => {
+    const [received, readOwn, deliveredOwn] = bubblesOf(render(MESSAGES, { perspective: 'operator' }))
+    expect(received).not.toContain('cv-status-ticks')
+    expect(readOwn).toContain('cv-status-ticks--read')
+    expect(deliveredOwn).toContain('cv-status-ticks--delivered')
+  })
+
+  it('draws the initials on the counterpart and never on the operator messages', () => {
+    const markup = render(MESSAGES, { perspective: 'operator', avatars: 'initials' })
+    expect(markup.match(/class="cv-p-avatar" aria-hidden="true">AS</g)?.length).toBe(1)
+    expect(markup.match(/class="cv-p-bubble-row"/g)?.length).toBe(1)
+    expect(render([OWN_READ, OWN_DELIVERED], { perspective: 'operator', avatars: 'initials' })).not.toContain(
+      'cv-p-avatar',
+    )
+  })
+
+  it('labels the received bubble with the author name', () => {
+    expect(render(MESSAGES, { perspective: 'operator' })).toContain(
+      '<span class="cv-p-bubble__author">Ana Souza</span>',
+    )
+  })
+})
+
+describe('ConversationThread, default perspective', () => {
+  const MESSAGES = [COUNTERPART, OWN_READ]
+
+  it('is the participant: inbound is mine, and naming it explicitly changes nothing', () => {
+    const implicit = render(MESSAGES)
+    expect(bubblesOf(implicit).map((bubble) => bubble.startsWith(' cv-p-bubble--mine'))).toEqual([true, false])
+    expect(render(MESSAGES, { perspective: 'participant' })).toBe(implicit)
+  })
+})
+
+describe('ConversationThread, header and footer', () => {
+  it('shows the host actions and the counterpart line in the header, and nothing without them', () => {
+    const plain = render([COUNTERPART])
+    expect(plain).not.toContain('cv-p-thread__actions')
+    expect(plain).not.toContain('cv-p-thread__counterpart')
+    const markup = render([COUNTERPART], {
+      headerActions: <button type="button">Close</button>,
+      counterpartLabel: 'Participant: Ana',
+    })
+    expect(markup).toContain('<div class="cv-p-thread__actions"><button type="button">Close</button></div>')
+    expect(markup).toContain('<p class="cv-p-thread__counterpart">Participant: Ana</p>')
+    expect(markup.indexOf('cv-p-thread__actions')).toBeLessThan(markup.indexOf('</header>'))
+  })
+
+  it('removes the composer and shows the notice when closed, and keeps it when open', () => {
+    const closed = render([COUNTERPART], { status: 'closed', perspective: 'operator' })
+    expect(closed).toContain('This conversation is closed')
+    expect(closed).not.toContain('<form')
+    expect(render([COUNTERPART], { status: 'open' })).toContain('<form')
+    expect(render([COUNTERPART])).toContain('<form')
+  })
+
+  it('draws the title, protocol and channels only from what the host gave', () => {
+    expect(render([COUNTERPART])).not.toContain('cv-p-protocol')
+    expect(render([COUNTERPART])).not.toContain('cv-p-channels')
+    const markup = render([COUNTERPART], { protocol: '261009-K7M2', channels: ['app', 'whatsapp'] })
+    expect(markup).toContain('261009-K7M2')
+    expect(markup).toContain('cv-p-channel--whatsapp')
+    expect(markup).toContain('Case 7')
+  })
+
+  it('draws no back arrow without onBack', () => {
+    expect(render([COUNTERPART])).not.toContain('cv-p-thread__back')
+    expect(render([COUNTERPART], { onBack: () => undefined })).toContain('cv-p-thread__back')
+  })
+
+  it('offers quick replies as plain buttons that only fill the field', () => {
+    const markup = render([COUNTERPART], {
+      quickReplies: [{ id: '1', title: 'Thanks', shortcut: 'ty', body: 'Thank you' }],
+    })
+    const chips = [...markup.matchAll(/<button[^>]*class="cv-p-chip"[^>]*>/g)].map((match) => match[0])
+    expect(chips).toHaveLength(1)
+    expect(chips[0]).toContain('type="button"')
+    expect(render([COUNTERPART])).not.toContain('cv-p-quick')
+  })
+
+  it('applies the theme and the class on a wrapper and uses only the package classes', () => {
+    const markup = render([COUNTERPART, OWN_READ], {
+      theme: { primaryColor: '#123456' },
+      className: 'host-panel',
+      onBack: () => undefined,
+    })
+    expect(markup).toContain('--cv-p-accent:#123456')
+    expect(markup).toContain('cv-p-root host-panel')
+    expect(findUtilityClassTokens(markup.replace('host-panel', ''))).toEqual([])
+    expect(findForeignClassTokens(markup.replace('host-panel', ''))).toEqual([])
+  })
+
+  it('draws the conversation without any provider or list around it', () => {
+    expect(render([])).toContain('cv-p-thread__title')
+  })
+})

package/src/participant/ConversationThread.tsx

@@ -0,0 +1,117 @@
+import { useCallback, useMemo, useReducer, useRef, 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 type { ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
+import { ParticipantThread } from './ParticipantThread'
+import { toParticipantApi, type ConversationThreadApi } from './conversationThreadApi'
+import { buildThreadSummary } from './conversationThreadSummary'
+import type { ParticipantSubjectGroup, ParticipantSubjectIconRenderer } from './participant.types'
+import type { ParticipantPendingMessage } from './participantApi.types'
+import { draftKey, type ParticipantDrafts } from './participantDrafts'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, type ParticipantConversationsLabels } from './participantLabels'
+import type { ParticipantPerspective } from './participantPerspective'
+import { participantSendStatesReducer } from './participantSendStates'
+import { buildParticipantThemeStyle } from './participantTheme'
+import { useParticipantThreadController, type ParticipantThreadCoreProps } from './useParticipantThreadController'
+
+export type ConversationThreadProps = {
+  readonly api: ConversationThreadApi
+  readonly subject: ParticipantSubjectRef
+  /** `participant` (default) is the outside party; `operator` is the company, which owns the outbound messages. */
+  readonly perspective?: ParticipantPerspective
+  readonly title: string
+  readonly protocol?: string
+  readonly channels?: ParticipantConversationSummary['channels']
+  /** `closed` removes the composer and shows `labels.closedNotice`. */
+  readonly status?: 'open' | 'closed'
+  /** Short line under the title, written by the host (for example "Participant: Ana"). */
+  readonly counterpartLabel?: string
+  /** Slot at the end of the header bar for the host's own actions (close, reopen...). The package knows none of them. */
+  readonly headerActions?: ReactNode
+  /** Absent draws no back arrow. */
+  readonly onBack?: () => void
+  readonly renderSubjectIcon?: ParticipantSubjectIconRenderer
+  readonly subjectGroups?: readonly ParticipantSubjectGroup[]
+  /** Chips above the field: tapping one fills the text, it never sends. */
+  readonly quickReplies?: readonly QuickReply[]
+  readonly labels?: Partial<ParticipantConversationsLabels>
+  readonly theme?: ConversationsTheme
+  readonly className?: string
+  readonly locale?: string
+  readonly channel?: ConversationChannel
+  readonly pendingMessages?: readonly ParticipantPendingMessage[]
+  readonly onRetryPending?: (clientMessageId: string) => void
+  /** Tells the host the other side's messages were marked read, to refresh its own badges. */
+  readonly onMarkedRead?: (subject: ParticipantSubjectRef) => void
+  readonly tail?: boolean
+  readonly avatars?: 'initials'
+  readonly renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
+}
+
+function useConversationThreadCore(props: ConversationThreadProps): ParticipantThreadCoreProps {
+  const { perspective = 'participant' } = props
+  const { subjectType, subjectId } = props.subject
+  const subject = useMemo<ParticipantSubjectRef>(() => ({ subjectType, subjectId }), [subjectType, subjectId])
+  const onMarkedReadRef = useRef(props.onMarkedRead)
+  onMarkedReadRef.current = props.onMarkedRead
+  const handleMarkedRead = useCallback((marked: ParticipantSubjectRef) => onMarkedReadRef.current?.(marked), [])
+  const api = useMemo(() => toParticipantApi(props.api), [props.api])
+  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 { title, protocol, channels, status } = props
+  const conversation = useMemo(
+    () => buildThreadSummary({ subject, title, protocol, channels, status }),
+    [subject, title, protocol, channels, status],
+  )
+  return useParticipantThreadController({
+    api,
+    subject,
+    conversation,
+    labels,
+    draftsRef,
+    sendStates,
+    dispatchSendStates,
+    onMarkedRead: handleMarkedRead,
+    channel: props.channel,
+    locale: props.locale,
+    pendingMessages: props.pendingMessages,
+    onRetryPending: props.onRetryPending,
+    perspective,
+  })
+}
+
+function ConversationThreadBody(props: ConversationThreadProps) {
+  const core = useConversationThreadCore(props)
+
+  return (
+    <div
+      className={['cv-p-root', props.className].filter(Boolean).join(' ')}
+      style={buildParticipantThemeStyle(props.theme)}
+    >
+      <div className="cv-p-root__screen">
+        <ParticipantThread
+          {...core}
+          onBack={props.onBack}
+          quickReplies={props.quickReplies}
+          subjectGroups={props.subjectGroups}
+          renderSubjectIcon={props.renderSubjectIcon}
+          avatars={props.avatars}
+          renderAuthorAvatar={props.renderAuthorAvatar}
+          tail={props.tail}
+          counterpartLabel={props.counterpartLabel}
+          headerActions={props.headerActions}
+        />
+      </div>
+    </div>
+  )
+}
+
+/** One conversation about one subject, drawn like the participant app and seen from either side. */
+export function ConversationThread(props: ConversationThreadProps) {
+  return <ConversationThreadBody key={draftKey(props.subject)} {...props} />
+}

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>
+  )
+}