@adatechnology/conversations-ui 0.7.0 → 0.8.0

package/README.md

@@ -299,6 +299,99 @@ A bolha usa um renderizador próprio da visão do participante (`ParticipantMess
 
 **Valores copiáveis:** a detecção é conservadora. CPF e CNPJ só valem com dígitos verificadores corretos (sequências repetidas não valem), a chave exige exatamente 44 dígitos (grupos de 4 opcionais) e o telefone exige 10 a 15 dígitos (BR: DDD 11–99) **com formatação**: sem máscara, só vale com `+55`, DDD entre parênteses ou separador depois do DDD (`1234567890` solto, como em "pedido 1234567890", não é telefone); número internacional exige `+`. Valores monetários, datas e números curtos não são destacados. O toque copia, mostra "Copied" no próprio valor e anuncia na região `aria-live` única da conversa. Os rótulos `copyValue`, `valueCopied` e `externalLinkHint` vêm de `labels` (padrão em inglês). O SDK só escreve na área de transferência quando a pessoa toca: não envia nem armazena nada.
 
+### `ConversationThread`: uma conversa, vista por qualquer um dos lados
+
+`ConversationThread` desenha **uma** conversa (um assunto) no mesmo desenho da visão do participante, sem lista
+e sem inbox. Serve ao app do participante e, com `perspective="operator"`, ao painel de quem atende. O SDK não
+conhece as ações do host: encerrar, reabrir ou qualquer outra entram pelo slot `headerActions`.
+
+```tsx
+import { ConversationThread } from '@adatechnology/conversations-ui/participant'
+
+<ConversationThread
+  api={operatorApi}
+  subject={{ subjectType: 'case', subjectId: caseId }}
+  perspective="operator"
+  title={caseTitle}
+  protocol={protocol}
+  channels={['app', 'whatsapp']}
+  status={isClosed ? 'closed' : 'open'}
+  counterpartLabel={`Participante: ${participantName}`}
+  headerActions={<button type="button" onClick={handleClose}>Fechar</button>}
+  avatars="initials"
+  quickReplies={quickReplies}
+  labels={{ messageInputPlaceholder: 'Mensagem ao participante' }}
+/>
+```
+
+| Prop | Tipo | Efeito |
+| ---- | ---- | ------ |
+| `api` | `ConversationThreadApi` | `fetchMessages`, `sendMessage` e `resolveAttachmentUrl` obrigatórios; `markRead` e `subscribe` opcionais (sem `markRead` não há marcação de leitura nem `onMarkedRead`). Deve ser **estável** (constante de módulo ou `useMemo`): um objeto novo a cada render recria o adapter e a revalidação. É o mesmo adapter de `ParticipantConversationsApi`, sem `listConversations` e `openConversation` |
+| `subject` | `ParticipantSubjectRef` | o assunto da conversa |
+| `perspective` | `'participant' \| 'operator'` | padrão `participant` (comportamento da tela de sempre) |
+| `title` | `string` | título do cabeçalho |
+| `protocol?`, `channels?` | | selo copiável e selos de canal; ausentes não desenham nada |
+| `status?` | `'open' \| 'closed'` | `closed` tira o compositor e mostra `labels.closedNotice` |
+| `counterpartLabel?` | `string` | linha curta sob o título, montada pelo host |
+| `headerActions?` | `ReactNode` | slot à direita do cabeçalho; ausente não desenha nada. Espera botões curtos ou só ícone, cada um com `aria-label`: com ações, a barra quebra de linha e o título mantém no mínimo `6rem` |
+| `onBack?` | `() => void` | ausente = sem seta (o diálogo do host já tem o próprio fechar) |
+| `quickReplies?` | `QuickReply[]` | chips acima do campo; tocar **preenche**, nunca envia |
+| `renderSubjectIcon?`, `subjectGroups?` | | ícone do assunto no cabeçalho, como na lista |
+| `avatars?`, `renderAuthorAvatar?`, `tail?` | | iguais aos de `ParticipantConversations` |
+| `labels?`, `theme?`, `className?`, `locale?`, `channel?` | | iguais aos de `ParticipantConversations` |
+| `pendingMessages?`, `onRetryPending?`, `onMarkedRead?` | | fila durável do host e aviso de leitura registrada |
+
+**Perspectiva.** `direction` é sempre do ponto de vista da empresa. Em `participant`, "minha" é `inbound`.
+Em `operator`, "minha" é `outbound`: a bolha própria vai à direita, os tiques de enviada, entregue e lida
+aparecem nas mensagens do operador, e o avatar de iniciais e o rótulo de autor (`authorName`) aparecem nas da
+contraparte (`inbound`). O envio, o rascunho local, os estados `sending`/`queued`/`failed` e o retry são os de
+sempre. A leitura segue a perspectiva: o componente chama `markRead(subject)` quando há mensagens **da outra
+parte** sem `readAt` e sem `status: 'read'`; o operador marca só as `inbound`. Sem `subscribe`, a conversa
+revalida ao voltar o foco, a visibilidade e a conexão.
+
+**Exemplo de adapter do operador.** O painel já tem as rotas dele; o adapter só traduz:
+
+```ts
+import { z } from 'zod'
+
+import { participantMessageSchema } from '@adatechnology/conversation-contracts'
+import type { ConversationThreadApi } from '@adatechnology/conversations-ui/participant'
+
+export const operatorThreadApi: ConversationThreadApi = {
+  fetchMessages: async ({ subjectType, subjectId }, params) =>
+    z.array(participantMessageSchema).parse(await http.get(`/conversations/${subjectType}/${subjectId}/messages`, { params })),
+  sendMessage: async ({ subject, clientMessageId, text, files }) => {
+    const body = await http.post(`/conversations/${subject.subjectType}/${subject.subjectId}/messages`, { text, files }, {
+      headers: { 'Idempotency-Key': clientMessageId },
+    })
+    return { outcome: 'sent', message: participantMessageSchema.parse(body) }
+  },
+  markRead: ({ subjectType, subjectId }) => http.post(`/conversations/${subjectType}/${subjectId}/read`),
+  resolveAttachmentUrl: async (attachment, disposition) => (await http.get(`/attachments/${attachment.id}/url`, { params: { disposition } })).url,
+}
+```
+
+**Tema claro do painel.** Os tokens padrão já são claros. Para um painel bege com acento laranja, basta mapear:
+
+```css
+.panel-conversation {
+  --cv-p-surface: #f2efe9;
+  --cv-p-surface-raised: #ffffff;
+  --cv-p-text: #1f2a30;
+  --cv-p-text-muted: #59636a;
+  --cv-p-border: #cfc8bb;
+  --cv-p-accent: #a85a1c;
+  --cv-p-highlight: #fbf3ea;
+}
+```
+
+Os contrastes são verificados por teste (`participantThemeContrast.test.ts`) com os padrões claro e escuro e com este
+mapeamento: texto, hora, autor, links e valores copiáveis nas duas bolhas a 4,5:1 ou mais; tiques, borda da bolha
+própria e sublinhado dos valores copiáveis a 3:1 ou mais; o fundo pontilhado se mantém sutil (no máximo 2:1 contra a
+superfície) e nenhum texto depende dele (o erro de carga ganha painel sólido). A borda da bolha **recebida** é
+decorativa (cerca de 1,4:1): quem a distingue da página é o preenchimento, e o texto passa de 4,5:1. Ao mapear o
+acento, mantenha-o a 4,5:1 contra `--cv-p-highlight`, que é onde ficam os links da bolha própria. Os contrastes só valem com `--cv-p-highlight` **opaco**: o padrão do tema escuro do pacote é translúcido (`rgb(213 138 71 / 10%)`), então o host que mapeia o token deve fornecer um valor opaco.
+
 ### Limitações conhecidas
 
 - O avatar alinha pelo topo da bolha, não pelo rabinho no canto inferior.
@@ -319,12 +412,14 @@ Defina no `.cv-p`, no wrapper (`className`) ou em qualquer ancestral. Há també
 | `--cv-p-border`           | bordas                                       | `#d5d9df`      |
 | `--cv-p-accent`           | destaque, botão primário, bolha própria      | `#a85a1c`      |
 | `--cv-p-accent-contrast`  | texto sobre o destaque                       | `#ffffff`      |
-| `--cv-p-highlight`        | fundo de "espera sua resposta"               | `#fbefe2`      |
+| `--cv-p-highlight`        | fundo de "espera sua resposta" e da bolha própria | `#fcf3ea` (use cor opaca: é fundo de bolha, e translúcido deixa o wallpaper aparecer) |
 | `--cv-p-danger`           | erro e falha de envio                        | `#c62828`      |
 | `--cv-p-radius`           | raio dos cantos                              | `0`            |
 | `--cv-p-wallpaper`        | fundo da lista de mensagens (`none` desliga) | pontos sutis   |
 | `--cv-p-scrollbar-thumb`  | polegar das barras de rolagem finas          | `--cv-p-border` |
 | `--cv-p-scrollbar-thumb-hover` | polegar ao passar o mouse ou arrastar   | `--cv-p-accent` |
+| `--cv-p-tick`             | tiques de enviada/entregue na bolha própria  | `--cv-p-text-muted` |
+| `--cv-p-tick-read`        | tique de lida                                | `#0369a1` (escuro `#5cc8ff`) |
 | `--cv-p-channel-app`      | cor do selo do canal app                     | o destaque     |
 | `--cv-p-channel-whatsapp` | cor do selo do canal WhatsApp                | `#20914f`      |
 

package/dist/{ConversationSimulatorPanel-CrfFjiWh.d.ts → ConversationSimulatorPanel-q-wVgBCN.d.ts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { M as MessagePayload, b as MessageTranscription, C as ConversationChannel, Q as QuickReply, c as QuickReplyInput, d as QuickReplyAttachment, S as StoredAttachmentSendResult, I as InteractiveSelection } from './quickReply.types-B4gmZsSr.js';
+import { M as MessagePayload, a as MessageTranscription, C as ConversationChannel, Q as QuickReply, b as QuickReplyInput, c as QuickReplyAttachment, S as StoredAttachmentSendResult, I as InteractiveSelection } from './quickReply.types-DzWH3NYV.js';
 import { InteractiveReplyOption, InboundMediaType } from '@adatechnology/meta-whatsapp-contracts/testing';
 
 type ResolveMediaUrl = (message: MessagePayload) => Promise<string | null>;

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as react from 'react';
 import react__default, { ReactNode, CSSProperties, UIEvent, FormEvent, RefObject, KeyboardEvent } from 'react';
-import { M as MessagePayload, I as InteractiveSelection, b as MessageTranscription, C as ConversationChannel, e as InteractivePayload, f as ConversationsFeatures, Q as QuickReply$1, T as TranscriptionMode, g as QueuedAttachment, c as QuickReplyInput, d as QuickReplyAttachment, h as ConversationVariable, i as ChannelFilter, j as ChannelFilterOption } from './quickReply.types-B4gmZsSr.js';
-export { k as CHANNEL_CAPABILITIES, l as CHANNEL_FILTER_ALL, m as CONVERSATION_CHANNEL, n as ChannelCapabilities, a as ConversationsTheme, o as ConversationsUIConfig, D as DEFAULT_CONVERSATION_CHANNEL, F as FormatContactHandleParams, H as HANDLE_KIND, p as HandleKind, q as InteractiveOption, r as InteractiveSection, s as QUICK_REPLY_ATTACHMENT_LIMIT, R as REOPEN_MECHANISM, t as ReopenMechanism, S as StoredAttachmentSendResult, u as TranscriptionStatus, v as capabilitiesOf, w as channelFiltersFor, x as contactFlag, y as formatContactHandle } from './quickReply.types-B4gmZsSr.js';
-import { R as ResolveMediaUrl, C as ConversationSummary, L as ListConversationsParams, b as ConversationsApi, S as SSEProvider, Q as ListDocumentsParams, d as ConversationDocument, U as ConversationTemplate, k as ConversationSimulatorClient, m as ConversationSimulatorPanelLabels, P as PreviewUploadedMedia } from './ConversationSimulatorPanel-CrfFjiWh.js';
-export { A as AudioRecorderButton, g as AudioRecorderButtonLabels, h as AudioRecorderButtonProps, V as CompanyDocument, W as CompanyDocumentPage, X as ConversationDocumentPage, a as ConversationEventSource, c as ConversationPage, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, Y as DEFAULT_MAX_RECORDING_MILLISECONDS, Z as MediaRenderer, _ as MediaRendererProps, y as SendSimulatorMediaParams, z as SimulatorMediaKind } from './ConversationSimulatorPanel-CrfFjiWh.js';
+import { M as MessagePayload, I as InteractiveSelection, a as MessageTranscription, C as ConversationChannel, e as InteractivePayload, f as ConversationsFeatures, Q as QuickReply$1, T as TranscriptionMode, g as QueuedAttachment, b as QuickReplyInput, c as QuickReplyAttachment, h as ConversationVariable, i as ChannelFilter, j as ChannelFilterOption } from './quickReply.types-DzWH3NYV.js';
+export { k as CHANNEL_CAPABILITIES, l as CHANNEL_FILTER_ALL, m as CONVERSATION_CHANNEL, n as ChannelCapabilities, d as ConversationsTheme, o as ConversationsUIConfig, D as DEFAULT_CONVERSATION_CHANNEL, F as FormatContactHandleParams, H as HANDLE_KIND, p as HandleKind, q as InteractiveOption, r as InteractiveSection, s as QUICK_REPLY_ATTACHMENT_LIMIT, R as REOPEN_MECHANISM, t as ReopenMechanism, S as StoredAttachmentSendResult, u as TranscriptionStatus, v as capabilitiesOf, w as channelFiltersFor, x as contactFlag, y as formatContactHandle } from './quickReply.types-DzWH3NYV.js';
+import { R as ResolveMediaUrl, C as ConversationSummary, L as ListConversationsParams, b as ConversationsApi, S as SSEProvider, Q as ListDocumentsParams, d as ConversationDocument, U as ConversationTemplate, k as ConversationSimulatorClient, m as ConversationSimulatorPanelLabels, P as PreviewUploadedMedia } from './ConversationSimulatorPanel-q-wVgBCN.js';
+export { A as AudioRecorderButton, g as AudioRecorderButtonLabels, h as AudioRecorderButtonProps, V as CompanyDocument, W as CompanyDocumentPage, X as ConversationDocumentPage, a as ConversationEventSource, c as ConversationPage, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, Y as DEFAULT_MAX_RECORDING_MILLISECONDS, Z as MediaRenderer, _ as MediaRendererProps, y as SendSimulatorMediaParams, z as SimulatorMediaKind } from './ConversationSimulatorPanel-q-wVgBCN.js';
 import { ChannelCapability } from '@adatechnology/conversation-contracts';
 export { ChannelCapability } from '@adatechnology/conversation-contracts';
 import '@adatechnology/meta-whatsapp-contracts/testing';

package/dist/participant/index.d.ts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { ParticipantConversationSummary, ParticipantSubjectRef, ParticipantConversationPage, ParticipantMessage, ParticipantAttachment } from '@adatechnology/conversation-contracts';
+import { ParticipantConversationSummary, ParticipantConversationPage, ParticipantSubjectRef, ParticipantMessage, ParticipantAttachment } from '@adatechnology/conversation-contracts';
 export { ParticipantAttachment, ParticipantConversationPage, ParticipantConversationSummary, ParticipantMessage, ParticipantSubjectRef } from '@adatechnology/conversation-contracts';
-import { C as ConversationChannel, a as ConversationsTheme, Q as QuickReply } from '../quickReply.types-B4gmZsSr.js';
+import { C as ConversationChannel, d as ConversationsTheme, Q as QuickReply } from '../quickReply.types-DzWH3NYV.js';
 
 type ParticipantAuthorAvatarRenderer = (author: {
     name: string | null;
@@ -198,6 +198,48 @@ type ParticipantConversationsProps = {
 };
 declare function ParticipantConversations(props: ParticipantConversationsProps): react.JSX.Element;
 
+/** What one conversation needs from the host: no list, no open-by-subject. `markRead` and `subscribe` are optional. */
+type ConversationThreadApi = Pick<ParticipantConversationsApi, 'fetchMessages' | 'sendMessage' | 'resolveAttachmentUrl'> & Partial<Pick<ParticipantConversationsApi, 'markRead' | 'subscribe'>>;
+
+/** Who is looking at the conversation. `participant` is the outside party; `operator` is the company. */
+type ParticipantPerspective = 'participant' | 'operator';
+
+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;
+};
+/** One conversation about one subject, drawn like the participant app and seen from either side. */
+declare function ConversationThread(props: ConversationThreadProps): react.JSX.Element;
+
 declare function groupParticipantConversations(params: GroupParticipantConversationsParams): ParticipantInboxView;
 
-export { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, type GroupParticipantConversationsParams, type ParticipantAuthorAvatarRenderer, type ParticipantConversationEvent, ParticipantConversations, type ParticipantConversationsApi, type ParticipantConversationsClassNames, type ParticipantConversationsLabels, type ParticipantConversationsProps, type ParticipantInboxSection, type ParticipantInboxView, type ParticipantLocalPendingMessage, type ParticipantPendingMessage, type ParticipantSendInput, type ParticipantSendResult, type ParticipantSubjectGroup, type ParticipantSubjectIconRenderer, groupParticipantConversations };
+export { ConversationThread, type ConversationThreadApi, type ConversationThreadProps, DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, type GroupParticipantConversationsParams, type ParticipantAuthorAvatarRenderer, type ParticipantConversationEvent, ParticipantConversations, type ParticipantConversationsApi, type ParticipantConversationsClassNames, type ParticipantConversationsLabels, type ParticipantConversationsProps, type ParticipantInboxSection, type ParticipantInboxView, type ParticipantLocalPendingMessage, type ParticipantPendingMessage, type ParticipantPerspective, type ParticipantSendInput, type ParticipantSendResult, type ParticipantSubjectGroup, type ParticipantSubjectIconRenderer, groupParticipantConversations };