@adatechnology/conversations-ui 0.4.1 → 0.5.0

package/src/MessageText.tsx

@@ -1,18 +1,22 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useState, type KeyboardEvent } from 'react'
 import { CHAT_TEXT_SECONDARY_CLASS } from './theme'
 import type { MessagePayload } from './types'
-import { useConversations } from './providers/ConversationsProvider'
 import { parseWhatsAppFormatting } from './lib/whatsapp-formatting'
+import { MessageTextCopiedBadge } from './MessageTextCopiedBadge'
 
 export interface MessageTextProps {
   message: MessagePayload
+  /** Defaults to true (tap copies the text, as in 0.3.1); false disables copying and its button semantics. */
+  copyOnClick?: boolean
+  /** Text of the badge shown after copying; absent means the package default ("Copied"). */
+  copiedLabel?: string
 }
 
-export function MessageText({ message }: MessageTextProps) {
+export function MessageText({ message, copyOnClick = true, copiedLabel }: MessageTextProps) {
   const [copied, setCopied] = useState(false)
 
   const handleCopy = useCallback(async () => {
-    if (!message.content) return
+    if (!copyOnClick || !message.content) return
     try {
       await navigator.clipboard.writeText(message.content)
       setCopied(true)
@@ -20,22 +24,26 @@ export function MessageText({ message }: MessageTextProps) {
     } catch {
       // Clipboard not available
     }
-  }, [message.content])
+  }, [copyOnClick, message.content])
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return
+    event.preventDefault()
+    void handleCopy()
+  }
 
   if (message.type === 'template')
     return <p className={`text-sm italic ${CHAT_TEXT_SECONDARY_CLASS}`}>{message.content ?? 'Template message'}</p>
 
   return (
     <div
-      onClick={handleCopy}
-      className="text-[14.2px] leading-[19px] whitespace-pre-wrap break-words select-all [&_strong]:font-bold [&_em]:italic [&_del]:line-through"
+      className={copyOnClick ? 'cv-message-text cv-message-text--copyable' : 'cv-message-text'}
+      {...(copyOnClick
+        ? { role: 'button', tabIndex: 0, onClick: handleCopy, onKeyDown: handleKeyDown }
+        : {})}
     >
       <div>{parseWhatsAppFormatting(message.content ?? '')}</div>
-      {copied && (
-        <span className="absolute top-0 right-0 -translate-y-full bg-[#3b4a54] text-white text-[11px] px-1.5 py-0.5 rounded shadow-lg">
-          Copiado!
-        </span>
-      )}
+      {copied && <MessageTextCopiedBadge label={copiedLabel} />}
     </div>
   )
 }

package/src/MessageTextCopiedBadge.tsx

@@ -0,0 +1,7 @@
+export interface MessageTextCopiedBadgeProps {
+  label?: string
+}
+
+export function MessageTextCopiedBadge({ label = 'Copied' }: MessageTextCopiedBadgeProps) {
+  return <span className="cv-message-text__copied">{label}</span>
+}

package/src/StatusTicks.test.tsx

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { StatusTicks } from './StatusTicks'
+
+const TAILWIND_UTILITIES = ['text-sky-500', 'text-red-500', 'text-black/40', 'flex', 'cursor-help', 'leading-none']
+
+describe('StatusTicks', () => {
+  it('renderiza o estado queued com relógio e rótulo acessível', () => {
+    const markup = renderToStaticMarkup(<StatusTicks status="queued" />)
+
+    expect(markup).toContain('cv-status-ticks--queued')
+    expect(markup).toContain('aria-label="Queued"')
+  })
+
+  it('trata bounced como failed', () => {
+    const markup = renderToStaticMarkup(<StatusTicks status="bounced" />)
+
+    expect(markup).toContain('cv-status-ticks--failed')
+    expect(markup).not.toContain('cv-status-ticks--bounced')
+  })
+
+  it.each(['sent', 'delivered', 'read', 'failed', 'queued'])('usa só classes cv-* em %s', (status) => {
+    const markup = renderToStaticMarkup(<StatusTicks status={status} />)
+
+    expect(markup).toContain(`cv-status-ticks--${status}`)
+    for (const utility of TAILWIND_UTILITIES) expect(markup).not.toContain(utility)
+    expect(markup).not.toContain('text-[')
+  })
+})

package/src/StatusTicks.tsx

@@ -1,17 +1,21 @@
-import { AlertTriangle } from 'lucide-react'
+import { AlertTriangle, Clock } from 'lucide-react'
 
 export interface StatusTicksProps {
   status: string
   title?: string
 }
 
-const STATUS_COLOR_CLASS: Record<string, string> = {
-  sent: 'text-black/40 dark:text-white/40',
-  delivered: 'text-black/40 dark:text-white/40',
-  read: 'text-sky-500',
-  failed: 'text-red-500',
+const STATUS_MODIFIER: Record<string, string> = {
+  queued: 'queued',
+  sent: 'sent',
+  delivered: 'delivered',
+  read: 'read',
+  failed: 'failed',
+  bounced: 'failed',
 }
 
+const QUEUED_LABEL = 'Queued'
+
 function Ticks({ double }: { double: boolean }) {
   return (
     <svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -28,12 +32,23 @@ function Ticks({ double }: { double: boolean }) {
 
 // Paridade com financiamento-imobiliario-bot/apps/web/src/components/MessageBubble.tsx —
 // mesmo path de SVG, mesma cor por status (read → sky-500, failed → red-500 com AlertTriangle).
+function StatusIcon({ modifier }: { modifier: string }) {
+  if (modifier === 'failed') return <AlertTriangle size={11} />
+  if (modifier === 'queued') return <Clock size={11} />
+  return <Ticks double={modifier !== 'sent'} />
+}
+
 export function StatusTicks({ status, title }: StatusTicksProps) {
-  const colorClass = STATUS_COLOR_CLASS[status] ?? STATUS_COLOR_CLASS.sent
+  const modifier = STATUS_MODIFIER[status] ?? 'sent'
+  const ariaLabel = modifier === 'queued' ? QUEUED_LABEL : undefined
 
   return (
-    <span className={`cursor-help leading-none flex items-center ${colorClass}`} data-cv-tooltip={title}>
-      {status === 'failed' ? <AlertTriangle size={11} /> : <Ticks double={status !== 'sent'} />}
+    <span
+      className={`cv-status-ticks cv-status-ticks--${modifier}`}
+      data-cv-tooltip={title ?? ariaLabel}
+      aria-label={ariaLabel}
+    >
+      <StatusIcon modifier={modifier} />
     </span>
   )
 }

package/src/buildOutput.test.ts

@@ -77,3 +77,44 @@ describe('o bundle do host não paga por @xyflow/react sem pedir', () => {
     expect(await distText('index.js')).not.toContain('@xyflow/react')
   })
 })
+
+describe('a visão do participante é leve e isolada', () => {
+  const PARTICIPANT_ENTRY_LIMIT_BYTES = 250 * 1024
+
+  async function participantBundle(): Promise<string> {
+    // O entry mais os chunks relativos que ele importa, transitivamente: é o que o host baixa.
+    const seen = new Set<string>()
+    const queue = ['participant/index.js']
+    let total = ''
+    while (queue.length > 0) {
+      const file = queue.shift() as string
+      if (seen.has(file)) continue
+      seen.add(file)
+      const text = await distText(file)
+      total += text
+      for (const match of text.matchAll(/(?:from|import)\s*"(\.[^"]+\.js)"/g)) {
+        const target = new URL(match[1] as string, `file:///${file}`).pathname.slice(1)
+        queue.push(target)
+      }
+    }
+    return total
+  }
+
+  it('não puxa o xyflow nem o ConversationsWorkspace', async () => {
+    const bundle = await participantBundle()
+
+    expect(bundle).not.toContain('xyflow')
+    expect(bundle).not.toContain('ConversationsWorkspace')
+  })
+
+  it('fica abaixo de 250 KB com os chunks que importa', async () => {
+    const bundle = await participantBundle()
+
+    expect(new TextEncoder().encode(bundle).length).toBeLessThan(PARTICIPANT_ENTRY_LIMIT_BYTES)
+  })
+
+  it('entrega a tela e os tipos no subpath /participant', async () => {
+    expect(await distText('participant/index.js')).toContain('ParticipantConversations')
+    expect(await distText('participant/index.d.ts')).toContain('ParticipantConversations')
+  })
+})

package/src/channelCapability.test.ts

@@ -45,3 +45,20 @@ describe('linhas da capacidade que a tela não pode fingir', () => {
     expect(CORE_CHANNEL_CAPABILITIES.portal.audio).toEqual({ plays: true, records: false })
   })
 })
+
+// App e portal são canais do contrato que a UI passou a exibir (T1.0a): a capacidade vem do
+// contrato, nunca da regra do WhatsApp, que daria janela de 24h e 100 MB onde não existem.
+describe('canais app e portal', () => {
+  it('app: anexo de 25 MB, grava áudio e não tem janela de sessão', () => {
+    const capability = channelCapabilityFor(CONVERSATION_CHANNEL.APP)
+
+    expect(capability).toBe(CORE_CHANNEL_CAPABILITIES.app)
+    expect(capability.attachments.maxBytes).toBe(25 * 1024 * 1024)
+    expect(capability.audio.records).toBe(true)
+    expect(capability.sessionWindowHours).toBeNull()
+  })
+
+  it('portal: ouve áudio e não grava', () => {
+    expect(channelCapabilityFor(CONVERSATION_CHANNEL.PORTAL).audio.records).toBe(false)
+  })
+})

package/src/conversationChannel.test.ts

@@ -1,5 +1,15 @@
 import { describe, expect, it } from 'bun:test'
-import { CONVERSATION_CHANNEL, CHANNEL_FILTER_ALL, channelFiltersFor } from './conversationChannel'
+import { CONVERSATION_CHANNEL as CORE_CONVERSATION_CHANNEL } from '@adatechnology/conversation-contracts'
+
+import {
+  CHANNEL_CAPABILITIES,
+  CHANNEL_FILTER_ALL,
+  CONVERSATION_CHANNEL,
+  HANDLE_KIND,
+  REOPEN_MECHANISM,
+  channelFiltersFor,
+  type ConversationChannel,
+} from './conversationChannel'
 
 describe('channelFiltersFor', () => {
   // O ponto do helper: a barra oferece só o que existe. Oferecer Instagram numa conta que só tem
@@ -51,3 +61,22 @@ describe('channelFiltersFor', () => {
     expect(first).toEqual(second)
   })
 })
+
+describe('canais do contrato exibidos pela UI', () => {
+  // Canal novo no contrato sem entrada aqui reprova no tsc (Record completo); este teste cobre o
+  // mesmo ponto em runtime, para o caso de o vocabulário ser alterado sem recompilar a UI.
+  it('todo canal do contrato tem entrada de exibição', () => {
+    for (const channel of CORE_CONVERSATION_CHANNEL) {
+      expect(CHANNEL_CAPABILITIES[channel as ConversationChannel]).toBeDefined()
+    }
+  })
+
+  it('app e portal existem como canais, com rótulo e sem reabertura por template ou tag', () => {
+    expect(CONVERSATION_CHANNEL.APP).toBe('app')
+    expect(CONVERSATION_CHANNEL.PORTAL).toBe('portal')
+    expect(CHANNEL_CAPABILITIES.app.reopenMechanism).toBe(REOPEN_MECHANISM.NONE)
+    expect(CHANNEL_CAPABILITIES.portal.reopenMechanism).toBe(REOPEN_MECHANISM.NONE)
+    expect(CHANNEL_CAPABILITIES.app.handleKind).toBe(HANDLE_KIND.SESSION)
+    expect(CHANNEL_CAPABILITIES.portal.handleKind).toBe(HANDLE_KIND.SESSION)
+  })
+})

package/src/conversationChannel.ts

@@ -10,16 +10,22 @@
  * funcionando exatamente como antes.
  */
 
+import type { ConversationChannel as CoreConversationChannel } from '@adatechnology/conversation-contracts'
+
 import { formatPhone, phoneCountryFlag } from './lib/phone'
 
 export const CONVERSATION_CHANNEL = {
   WHATSAPP: 'whatsapp',
   MESSENGER: 'messenger',
   INSTAGRAM: 'instagram',
+  APP: 'app',
+  PORTAL: 'portal',
   WEBCHAT: 'webchat',
   EMAIL: 'email',
 } as const
-export type ConversationChannel = (typeof CONVERSATION_CHANNEL)[keyof typeof CONVERSATION_CHANNEL]
+
+/** O que o contrato conhece, mais os dois canais da Meta que a UI já servia antes dele. */
+export type ConversationChannel = CoreConversationChannel | 'messenger' | 'instagram'
 
 export const DEFAULT_CONVERSATION_CHANNEL: ConversationChannel = CONVERSATION_CHANNEL.WHATSAPP
 
@@ -75,6 +81,18 @@ export const CHANNEL_CAPABILITIES: Readonly<Record<ConversationChannel, ChannelC
     reopenMechanism: REOPEN_MECHANISM.TAG,
     handleKind: HANDLE_KIND.USERNAME,
   },
+  [CONVERSATION_CHANNEL.APP]: {
+    label: 'App',
+    icon: '📱',
+    reopenMechanism: REOPEN_MECHANISM.NONE,
+    handleKind: HANDLE_KIND.SESSION,
+  },
+  [CONVERSATION_CHANNEL.PORTAL]: {
+    label: 'Portal',
+    icon: '🔗',
+    reopenMechanism: REOPEN_MECHANISM.NONE,
+    handleKind: HANDLE_KIND.SESSION,
+  },
   [CONVERSATION_CHANNEL.WEBCHAT]: {
     // Chat próprio: sem intermediário, sem janela. Bloquear o composer aqui seria inventar limite.
     label: 'Chat do site',

package/src/participant/ParticipantAttachmentItem.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react'
+
+import type { ParticipantAttachment } from '@adatechnology/conversation-contracts'
+
+import { formatFileSize } from '../lib/format'
+import { isSafeAttachmentUrl } from './participantAttachmentUrl'
+import type { ParticipantConversationsLabels } from './participantLabels'
+
+export type ResolveParticipantAttachmentUrl = (
+  attachment: ParticipantAttachment,
+  disposition?: 'inline' | 'attachment',
+) => Promise<string>
+
+export type ParticipantAttachmentItemProps = {
+  readonly attachment: ParticipantAttachment
+  readonly resolveAttachmentUrl: ResolveParticipantAttachmentUrl
+  readonly labels: ParticipantConversationsLabels
+}
+
+function useAttachmentUrl(
+  attachment: ParticipantAttachment,
+  resolveAttachmentUrl: ResolveParticipantAttachmentUrl,
+): string | undefined {
+  const [url, setUrl] = useState<string | undefined>(undefined)
+  const disposition = attachment.kind === 'document' ? 'attachment' : 'inline'
+
+  useEffect(() => {
+    let isCurrent = true
+    resolveAttachmentUrl(attachment, disposition).then(
+      (resolved) => {
+        if (isCurrent) setUrl(isSafeAttachmentUrl(resolved) ? resolved.trim() : undefined)
+      },
+      () => {
+        if (isCurrent) setUrl(undefined)
+      },
+    )
+    return () => {
+      isCurrent = false
+    }
+  }, [attachment, disposition, resolveAttachmentUrl])
+
+  return url
+}
+
+export function ParticipantAttachmentItem({ attachment, resolveAttachmentUrl, labels }: ParticipantAttachmentItemProps) {
+  const url = useAttachmentUrl(attachment, resolveAttachmentUrl)
+
+  if (attachment.kind === 'image') {
+    return (
+      <figure className="cv-p-attachment cv-p-attachment--image">
+        {url ? <img className="cv-p-attachment__image" src={url} alt={attachment.filename} /> : null}
+        <figcaption className="cv-p-attachment__name">{attachment.filename}</figcaption>
+      </figure>
+    )
+  }
+
+  if (attachment.kind === 'audio') {
+    return (
+      <div className="cv-p-attachment cv-p-attachment--audio">
+        <span className="cv-p-attachment__name">{attachment.filename}</span>
+        <audio className="cv-p-attachment__audio" controls preload="none" src={url} />
+      </div>
+    )
+  }
+
+  return (
+    <a
+      className="cv-p-attachment cv-p-attachment--document"
+      href={url}
+      download={attachment.filename}
+      aria-label={`${labels.downloadAttachment}: ${attachment.filename}`}
+    >
+      <span className="cv-p-attachment__name">{attachment.filename}</span>
+      <span className="cv-p-attachment__size">{formatFileSize(attachment.sizeBytes)}</span>
+    </a>
+  )
+}

package/src/participant/ParticipantComposer.test.tsx

@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import type { QuickReply } from '../quickReplies/quickReply.types'
+import { findForeignClassTokens, findUtilityClassTokens } from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { ParticipantComposer, type ParticipantComposerProps } from './ParticipantComposer'
+
+const QUICK_REPLIES: readonly QuickReply[] = [
+  { id: '1', title: 'On my way', shortcut: 'way', body: 'I am on my way' },
+  { id: '2', title: 'Delivered', shortcut: 'done', body: 'Delivered' },
+]
+
+function render(overrides: Partial<ParticipantComposerProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantComposer
+      value=""
+      onChange={() => undefined}
+      files={[]}
+      onFilesChange={() => undefined}
+      onSend={() => undefined}
+      labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+      {...overrides}
+    />,
+  )
+}
+
+describe('ParticipantComposer', () => {
+  it('renders a form with a labelled textarea and the maxLength prop', () => {
+    const markup = render({ maxLength: 500 })
+
+    expect(markup).toContain('<form')
+    expect(markup).toContain('<textarea')
+    expect(markup).toContain('maxLength="500"')
+    expect(markup).toContain('aria-label="Message"')
+  })
+
+  it('disables send without content and enables it with text or files', () => {
+    expect(render()).toMatch(/<button[^>]*type="submit"[^>]*disabled/)
+    expect(render({ value: 'hi' })).not.toMatch(/<button[^>]*type="submit"[^>]*disabled/)
+    const file = new File(['x'], 'a.png', { type: 'image/png' })
+    expect(render({ files: [file] })).not.toMatch(/<button[^>]*type="submit"[^>]*disabled/)
+  })
+
+  it('disables send when the composer is disabled even with text', () => {
+    expect(render({ value: 'hi', disabled: true })).toMatch(/<button[^>]*type="submit"[^>]*disabled/)
+  })
+
+  it('renders the hidden multiple file input with accept and the attach button', () => {
+    const markup = render({ acceptedTypes: ['image/*'] })
+
+    expect(markup).toContain('type="file"')
+    expect(markup).toContain('multiple')
+    expect(markup).toContain('accept="image/*"')
+    expect(markup).toContain('Attach')
+  })
+
+  it('lists chosen files with a remove button', () => {
+    const file = new File(['x'], 'photo.png', { type: 'image/png' })
+    const markup = render({ files: [file] })
+
+    expect(markup).toContain('photo.png')
+    expect(markup).toContain('Remove attachment')
+  })
+
+  it('renders quick reply chips only when quickReplies is non-empty', () => {
+    expect(render()).not.toContain('cv-p-quick')
+    expect(render({ quickReplies: [] })).not.toContain('cv-p-quick')
+    const markup = render({ quickReplies: QUICK_REPLIES })
+    expect(markup).toContain('cv-p-quick')
+    expect(markup).toContain('On my way')
+    expect(markup).toContain('type="button"')
+  })
+
+  it('renders chips as type=button so tapping one never submits the form', () => {
+    const markup = render({ quickReplies: QUICK_REPLIES })
+    const chips = [...markup.matchAll(/<button[^>]*class="cv-p-chip"[^>]*>/g)].map((match) => match[0])
+
+    expect(chips).toHaveLength(2)
+    for (const chip of chips) {
+      expect(chip).toContain('type="button"')
+      expect(chip).not.toContain('type="submit"')
+    }
+    expect(markup.match(/type="submit"/g)).toHaveLength(1)
+  })
+
+  it('has no microphone control', () => {
+    expect(render({ quickReplies: QUICK_REPLIES }).toLowerCase()).not.toMatch(/microphone|record/)
+  })
+
+  it('uses only cv-p-* classes and no Tailwind utilities', () => {
+    const markup = render({ quickReplies: QUICK_REPLIES, value: 'x' })
+
+    expect(findUtilityClassTokens(markup)).toEqual([])
+    expect(findForeignClassTokens(markup)).toEqual([])
+  })
+})

package/src/participant/ParticipantComposer.tsx

@@ -0,0 +1,167 @@
+import { useRef, 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 { maxBytesForChannel, reduceFilesSelection, type ParticipantFileRejection } from './participantFileValidation'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import { applyQuickReply } from './participantQuickReply'
+
+export type ParticipantComposerProps = {
+  readonly value: string
+  readonly onChange: (value: string) => void
+  readonly files: readonly File[]
+  readonly onFilesChange: (files: readonly File[]) => void
+  readonly onSend: () => void
+  readonly labels: ParticipantConversationsLabels
+  /** Absent means the `app` channel. */
+  readonly channel?: ConversationChannel
+  readonly disabled?: boolean
+  /** Blocks only the send button: the field stays editable while a send is in flight. */
+  readonly isSending?: boolean
+  readonly maxLength?: number
+  /** MIME types or wildcards offered to the file picker and enforced before sending. */
+  readonly acceptedTypes?: readonly string[]
+  /** Tapping a chip fills the text; it never sends. Absent or empty means no strip. */
+  readonly quickReplies?: readonly QuickReply[]
+}
+
+type QuickReplyStripProps = {
+  readonly quickReplies: readonly QuickReply[]
+  readonly labels: ParticipantConversationsLabels
+  readonly onPick: (body: string) => void
+}
+
+function QuickReplyStrip({ quickReplies, labels, onPick }: QuickReplyStripProps) {
+  return (
+    <div className="cv-p-quick" role="group" aria-label={labels.quickRepliesGroup}>
+      {quickReplies.map((quickReply) => (
+        <button key={quickReply.id} type="button" className="cv-p-chip" onClick={() => onPick(quickReply.body)}>
+          {quickReply.title}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+type FileListProps = {
+  readonly files: readonly File[]
+  readonly labels: ParticipantConversationsLabels
+  readonly onRemove: (file: File) => void
+}
+
+function FileList({ files, labels, onRemove }: FileListProps) {
+  if (files.length === 0) return null
+  return (
+    <ul className="cv-p-files" aria-label={labels.attachmentsList}>
+      {files.map((file, index) => (
+        <li key={`${file.name}-${file.size}-${index}`} className="cv-p-files__item">
+          <span className="cv-p-files__name">{file.name}</span>
+          <span className="cv-p-files__size">{formatFileSize(file.size)}</span>
+          <button type="button" className="cv-p-files__remove" aria-label={`${labels.removeAttachment}: ${file.name}`} onClick={() => onRemove(file)}>
+            <span aria-hidden="true">×</span>
+            <span className="cv-p-sr-only">{labels.removeAttachment}</span>
+          </button>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+function rejectionText(rejection: ParticipantFileRejection, labels: ParticipantConversationsLabels): string {
+  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
+  const maxBytes = maxBytesForChannel(channel)
+
+  function handleFilesChosen(event: ChangeEvent<HTMLInputElement>): void {
+    const chosen = Array.from(event.target.files ?? [])
+    event.target.value = ''
+    const result = reduceFilesSelection({ current: files, incoming: chosen, maxBytes, acceptedTypes: props.acceptedTypes })
+    setRejection(result.rejected[0]?.reason)
+    if (result.files.length !== files.length) onFilesChange(result.files)
+  }
+
+  function handleRemoveFile(file: File): void {
+    setRejection(undefined)
+    onFilesChange(files.filter((current) => current !== file))
+  }
+
+  return { rejection, handleFilesChosen, handleRemoveFile }
+}
+
+export function ParticipantComposer(props: ParticipantComposerProps) {
+  const { value, onChange, files, onSend, labels, channel = 'app', disabled = false, isSending = false } = props
+  const { rejection, handleFilesChosen, handleRemoveFile } = useFileSelection(props)
+  const canSend = !disabled && !isSending && (value.trim().length > 0 || files.length > 0)
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault()
+    if (canSend) onSend()
+  }
+
+  return (
+    <form className="cv-p-composer" onSubmit={handleSubmit}>
+      {props.quickReplies && props.quickReplies.length > 0 ? (
+        <QuickReplyStrip quickReplies={props.quickReplies} labels={labels} onPick={(body) => onChange(applyQuickReply(value, body))} />
+      ) : null}
+      <FileList files={files} labels={labels} onRemove={handleRemoveFile} />
+      {rejection ? (
+        <p className="cv-p-composer__error" role="alert">
+          {rejectionText(rejection, labels)}
+        </p>
+      ) : null}
+      <div className="cv-p-composer__row">
+        {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}
+          value={value}
+          maxLength={props.maxLength}
+          disabled={disabled}
+          onChange={(event) => onChange(event.target.value)}
+        />
+        <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>
+      </div>
+    </form>
+  )
+}