@adatechnology/conversations-ui 0.6.0 → 0.7.0

package/README.md

@@ -5,7 +5,7 @@ Telas de conversa parametrizáveis por endpoint, tema e capacidades. Subpaths: `
 
 ## Visão do participante (`/participant`)
 
-Tela de conversa do lado de **quem conversa com a empresa** (app do motorista, portal do cliente). Não usa
+Tela de conversa do lado de **quem conversa com a empresa** (app de campo, portal do cliente). Não usa
 `ConversationsProvider`, não puxa `@xyflow/react` nem o `ConversationsWorkspace`, e não depende de Tailwind:
 todas as classes são `.cv-p-*` e vêm de `@adatechnology/conversations-ui/styles.css`.
 
@@ -157,9 +157,9 @@ pacote nunca gera nem conhece o formato, só **exibe, copia e busca**. Campo aus
 
 - **Lista:** a linha mostra o protocolo abaixo do título (fonte mono); o prefixo `labels.protocolPrefix` é um `<span>` só para
   leitor de tela (sem `aria-label` em elemento genérico, que o ARIA 1.2 proíbe).
-- **Cabeçalho da conversa:** protocolo abaixo do título e botão de copiar (alvo de 44px) que usa
-  `navigator.clipboard.writeText`; falha de cópia é silenciosa. Durante 3 s o texto visível do botão vira
-  `labels.protocolCopied` (o nome acessível segue "`copyProtocol` + código") e o aviso também vai numa região
+- **Cabeçalho da conversa:** ver "Cabeçalho da conversa" abaixo. O botão de copiar usa `navigator.clipboard.writeText`;
+  falha de cópia é silenciosa. É **só um ícone** (`Copy`, vira `Check` por 3 s) com `aria-label` = "`copyProtocol` + código";
+  durante os 3 s aparece ao lado do ícone o texto curto `labels.protocolCopied` e o aviso também vai numa região
   `aria-live="polite"` sempre na árvore; copiar de novo dentro dos 3 s reinicia o prazo e reanuncia.
 - **Busca:** um campo `type="search"` acima da lista filtra por título (sem acento nem caixa) **ou** protocolo
   (parcial, sem traço, sem caixa: `k7m2` acha `261009-K7M2`). Aparece só quando alguma conversa tem `protocol` ou
@@ -193,33 +193,140 @@ cv-p-channel--{canal}">`, um prefixo sr-only `Channels in this conversation: ` e
   o leitor dizer "Channels in this conversation: App, WhatsApp".
 - **`renderSubjectIcon`** deve ser **puro e não lançar** (o pacote não tem error boundary); `null`, `undefined`, `false` e
   `''` valem como ausente.
-- **Cabeçalho da conversa:** os mesmos selos ao lado do protocolo.
+- **Cabeçalho da conversa:** os mesmos selos, na variante `inline` (ícone de 16px), na mesma linha do protocolo.
 - **Labels novas** (defaults em inglês): `channelsGroup` ("Channels in this conversation"), `channelApp`,
   `channelWhatsapp`, `channelEmail`, `channelPortal`, `channelWebchat`.
 - **Classes novas:** `.cv-p-channels`, `.cv-p-channel`, `.cv-p-row__tags`, `.cv-p-inbox__icon`; cores opcionais
   `--cv-p-channel-app` (padrão: o destaque) e `--cv-p-channel-whatsapp` (padrão `#20914f`, ≥ 3:1 sobre as superfícies claras e
   escuras; ao trocar, mantenha 3:1).
 
+### Conversa no desenho do WhatsApp, no nosso estilo
+
+A conversa segue os padrões de chat do WhatsApp, mas só com os tokens `--cv-p-*` (por exemplo, em um tema escuro de cantos
+retos, rótulos em mono). Tudo é `.cv-p-*`; nenhum componente do painel do operador é usado.
+
+**Cabeçalho** (barra única com piso de 4rem (com título longo, protocolo longo e 3 canais a linha meta quebra e a barra chega a cerca de 110px), fundo `--cv-p-surface-raised`, borda inferior de 1px), da esquerda para a direita:
+(1) **voltar** só com ícone (seta de 24px, sem caixa nem borda, área de toque 44x44, `aria-label` = label `back`, foco visível;
+ausente sem `onBack`); (2) **avatar da conversa**: tile de 2.5rem (`border-radius: var(--cv-p-radius)`) com o ícone do assunto, o
+mesmo da lista (`renderSubjectIcon` do host; se devolver vazio, o `icon` do grupo em `subjectGroups`; sem nenhum dos dois não há
+tile e o título recua). o `renderSubjectIcon` e o `icon` do grupo, que já existiam, passam a desenhar também esse tile (o cabeçalho não tem o
+fallback de duas letras da linha da lista); (3) **título em duas linhas**: o `subjectLabel` (uma linha com reticências, cortada só no `span` interno
+`.cv-p-thread__title-text` para o anel de foco do botão não ser recortado; clicável só com `onOpenSubject`) e a **linha meta**
+(`.cv-p-thread__meta`) com o protocolo, o botão de copiar só com ícone e os selos de canal inline. O rótulo do grupo (eyebrow) some quando há tile: o tile já representa o grupo e o espaço em 320px é curto. A área de toque do copiar tem 44px de
+largura e 36px de altura; a margem negativa de cima é coberta pelo `padding-top` da linha meta, então nunca invade o título.
+Sem `protocol` não há protocolo nem botão; sem `channels` não há selos; sem nenhum dos dois a linha meta não existe. O cartão de
+`renderSubjectCard` (do host) deve trazer só o que o cabeçalho não diz.
+
+**Fundo**: a lista de mensagens tem um padrão geométrico de pontos em CSS puro, derivado de `--cv-p-border`, de contraste
+mínimo. `--cv-p-wallpaper` o substitui (qualquer valor de `background-image`, em geral um gradiente; `none` desliga),
+com `--cv-p-wallpaper-size` para o tamanho do ladrilho (padrão `24px 24px`). Some em `forced-colors: active` e na impressão.
+
+**Separador de dia**: pílula centralizada (fundo elevado, borda de 1px, texto mono pequeno, raio do token), `role="separator"`
+com um `<time datetime="AAAA-MM-DD">` do dia local.
+
+**Rolagem**: as áreas verticais (mensagens, lista de conversas e campo de texto) têm barra fina (`scrollbar-width: thin`, 6px
+em WebKit, trilho transparente, sem setas), polegar `--cv-p-scrollbar-thumb` (padrão `--cv-p-border`) e `--cv-p-scrollbar-thumb-hover`
+(padrão `--cv-p-accent`) ao passar o mouse ou arrastar, sem reservar espaço (`scrollbar-gutter`) para as bolhas não se mexerem, e
+`overscroll-behavior-y: contain` para não encadear a rolagem na página. As faixas horizontais (filtros e respostas rápidas) rolam
+sem barra, com esmaecimento nas bordas, `scroll-snap-type: x proximity` e o filtro ativo trazido à vista ao ser escolhido. Em
+`forced-colors: active` voltam a barra do sistema e a faixa sem máscara. `scroll-behavior: smooth` só vale sob
+`prefers-reduced-motion: no-preference` (lista e faixas; o scroller da conversa continua instantâneo, pois o posicionamento inicial e a
+âncora ao carregar mensagens antigas atribuem `scrollTop`).
+
+**Ir para a última mensagem**: com o leitor longe do fim da conversa (o mesmo limiar de `shouldStickToBottom`, 80px), um botão
+flutuante de 44x44 com `ChevronDown` aparece no canto inferior do scroller; o `aria-label` é o label novo `scrollToLatest`
+(padrão "Scroll to latest message"). Um selo mostra quantas mensagens do outro lado chegaram enquanto o leitor estava longe (limite
+"99+"); ele é decorativo, e a região `aria-live` continua anunciando só o label `newMessages`. O clique rola ao fim (suave só sem
+`prefers-reduced-motion: reduce`) e o botão some ao chegar. Nada é desenhado perto do fim ou sem mensagens.
+
+**Direção do texto (RTL)**: margens, alinhamento e hora da bolha usam propriedades lógicas e espelham sozinhos; o **rabinho** do balão
+(triângulos e canto reto) usa posições físicas e em RTL continua à esquerda/direita como em LTR (limitação conhecida).
+
+**Bolha**: hora e ticks ficam na mesma bolha, juntos ao pé e à direita (`.cv-p-bubble__meta`); se o texto cabe com folga, a
+hora fica na mesma linha dele, senão cai para a linha de baixo, à direita, sem sobrepor. Largura máxima de 85%.
+
+**Compositor**: `[anexar] [campo] [enviar]` alinhados pela base, em barra elevada com borda superior; anexar e enviar são ícones
+(clipe e avião de papel, com `aria-label`), o campo é multilinha, parte de 44px e cresce até cerca de 4 linhas (depois rola),
+enviar é o botão primário e fica desabilitado sem conteúdo. As respostas rápidas continuam como chips acima da linha.
+
+Classes novas: `.cv-p-thread__avatar`, `.cv-p-thread__eyebrow`, `.cv-p-thread__meta`, `.cv-p-protocol__copied`, `.cv-p-day__label`,
+`.cv-p-composer__attach`, `.cv-p-composer__send`.
+
+### Avatar do autor (opt-in)
+
+**O SDK não tem foto de usuário**: o cadastro só traz `authorName`. O avatar é opt-in e o host fornece a foto pelo slot.
+
+- `avatars="initials"` (em `ParticipantConversations`): desenha, à esquerda da bolha **recebida**, um quadrado de 32px
+  (`border-radius: var(--cv-p-radius)`, respeita tema reto) com até 2 iniciais do autor (primeiro e último nome, ignorando
+  preposições e pontuação); nome vazio, `?` ou só emoji cai no ícone neutro. Aparece só na **primeira** mensagem de uma
+  sequência do mesmo autor (as seguintes reservam o espaço para alinhar as bolhas); mensagem própria nunca tem avatar.
+  O avatar é `aria-hidden`: o nome do autor já está no texto da bolha.
+- `renderAuthorAvatar?: (author: { name: string | null }) => ReactNode`: slot do host (uma `<img>`, por exemplo) desenhado
+  dentro do mesmo quadrado de 32px; tem precedência sobre as iniciais, liga o avatar sozinho e, se devolver `null`, `undefined`,
+  `false` ou `''`, cai nas iniciais. Deve ser puro e não lançar.
+- Sem nenhuma das duas props o markup da bolha é idêntico ao anterior. Classes novas: `.cv-p-avatar`, `.cv-p-bubble-row`,
+  `.cv-p-bubble-row__avatar`. Nenhum label novo.
+
+### Rabinho da bolha (`tail`)
+
+A bolha da conversa é um balão de fala: um rabinho triangular de 9px cola no canto **inferior esquerdo** da bolha recebida e
+no **inferior direito** da própria (convenção de chat). Ligado por padrão; `tail={false}` (em `ParticipantConversations`)
+remove o rabinho e devolve o canto arredondado (`.cv-p-bubble--no-tail`).
+
+- O rabo são dois triângulos de `border` (`::before` na cor da borda, `::after` na cor do fundo, 1px deslocado), então a
+  borda de 1px continua contínua. As cores saem dos mesmos tokens da bolha (`--cv-p-border`, `--cv-p-surface-raised`; na
+  própria, `--cv-p-accent` e `--cv-p-highlight`) e acompanham `.dark`.
+- Funciona com tema reto (`--cv-p-radius: 0`) e arredondado: o canto inferior correspondente fica reto para o rabo emendar.
+- É decorativo (`pointer-events: none`, pseudo-elemento): não muda área de toque, conteúdo nem altura mínima. Com avatar a
+  bolha recua 0.25rem para o rabo não encostar no quadrado. Sem animação.
+- Em `forced-colors: active` e na impressão os triângulos somem (viram quadrados sólidos sem `border-color` transparente) e o
+  canto volta ao raio do token.
+
+### Texto da mensagem (formatação, links e valores copiáveis)
+
+A bolha usa um renderizador próprio da visão do participante (`ParticipantMessageText`); o `MessageText` e a formatação do painel e dos outros fluxos **não mudam**. O texto vira nós React (nunca `innerHTML`); acima de 8000 caracteres aparece como foi digitado.
+
+| Digitado | Resultado |
+|---|---|
+| `*negrito*`, `_itálico_`, `~riscado~`, `*_ambos_*` | `<strong>`, `<em>`, `<del>`, aninhados; o marcador cola no texto (`* a *`, `2 * 3 * 4`, `snake_case_nome` ficam como estão) |
+| `` `código` `` e bloco entre três crases | `<code>` / `<pre><code>`; nada é formatado nem detectado dentro |
+| `> citação` (linhas seguidas = um bloco) | `<blockquote>` |
+| `- item`, `* item`, `• item` / `1. item`, `1) item` | `<ul>` / `<ol>` (exige o espaço depois do marcador) |
+| `http(s)://…` | `<a>` com `rel="noopener noreferrer nofollow ugc"` e `target="_blank"`, mais um botão de copiar a URL ao lado; pontuação final fica fora |
+| telefone BR/internacional, e-mail, CPF, CNPJ (numérico e alfanumérico), chave de acesso de 44 dígitos | botão que copia o valor como escrito |
+
+**Allowlist de links:** só `http:` e `https:` são gerados no texto (a allowlist de `isAllowedLinkHref` aceita também `mailto:` e `tel:`, mas o renderizador nunca os produz a partir do texto digitado); `javascript:`, `data:`, `vbscript:`, qualquer outro protocolo e URL com usuário/senha (`https://user:pass@host`) ficam como texto. Em bloco de código, um rótulo de linguagem sozinho na primeira linha (` ```js `) é descartado.
+
+**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.
+
+### Limitações conhecidas
+
+- O avatar alinha pelo topo da bolha, não pelo rabinho no canto inferior.
+- Sem suporte a RTL: o rabinho e o avatar assumem escrita da esquerda para a direita.
+
 ### Variáveis `--cv-p-*`
 
 Defina no `.cv-p`, no wrapper (`className`) ou em qualquer ancestral. Há também a prop `theme`
 (`primaryColor` → `--cv-p-accent`, `backgroundColor` → `--cv-p-surface`, `textPrimary` → `--cv-p-text`,
 `textSecondary` → `--cv-p-text-muted`).
 
-| Variável                  | Para que serve                          | Padrão (claro) |
-| ------------------------- | --------------------------------------- | -------------- |
-| `--cv-p-surface`          | fundo da tela                           | `#ffffff`      |
-| `--cv-p-surface-raised`   | fundo de bolhas recebidas e campos      | `#f3f4f6`      |
-| `--cv-p-text`             | texto principal                         | `#111827`      |
-| `--cv-p-text-muted`       | texto secundário                        | `#5b6573`      |
-| `--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-danger`           | erro e falha de envio                   | `#c62828`      |
-| `--cv-p-radius`           | raio dos cantos                         | `0`            |
-| `--cv-p-channel-app`      | cor do selo do canal app                | o destaque     |
-| `--cv-p-channel-whatsapp` | cor do selo do canal WhatsApp           | `#20914f`      |
+| Variável                  | Para que serve                               | Padrão (claro) |
+| ------------------------- | -------------------------------------------- | -------------- |
+| `--cv-p-surface`          | fundo da tela                                | `#ffffff`      |
+| `--cv-p-surface-raised`   | fundo de bolhas recebidas e campos           | `#f3f4f6`      |
+| `--cv-p-text`             | texto principal                              | `#111827`      |
+| `--cv-p-text-muted`       | texto secundário                             | `#5b6573`      |
+| `--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-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-channel-app`      | cor do selo do canal app                     | o destaque     |
+| `--cv-p-channel-whatsapp` | cor do selo do canal WhatsApp                | `#20914f`      |
 
 O tema escuro segue a classe `.dark` (mesma do restante do pacote). Os nomes `.cv-p-*` e `--cv-p-*` são API
 pública e não mudam sem nova versão maior.

package/dist/{chunk-HOKNKXIT.js → chunk-HMCOTZAX.js}

@@ -1,6 +1,6 @@
 import {
   cn
-} from "./chunk-MRVFFJEH.js";
+} from "./chunk-PJNR6UMN.js";
 
 // src/Tooltip.tsx
 import { useEffect, useRef, useState } from "react";

package/dist/{chunk-FAQLC3TX.js → chunk-L3OFAQPS.js}

@@ -1,7 +1,8 @@
 import {
   cn,
+  parseWhatsAppFormatting,
   useIsDarkTheme
-} from "./chunk-MRVFFJEH.js";
+} from "./chunk-PJNR6UMN.js";
 import {
   CONVERSATION_CHANNEL,
   DEFAULT_CONVERSATION_CHANNEL,
@@ -13,9 +14,6 @@ import {
   formatTimestamp,
   isSameDay
 } from "./chunk-O6457XHK.js";
-import {
-  parseWhatsAppFormatting
-} from "./chunk-CBYEHPX6.js";
 
 // src/ConversationLocalesProvider.tsx
 import { createContext, useContext } from "react";

package/dist/{chunk-CBYEHPX6.js → chunk-PJNR6UMN.js}

@@ -217,10 +217,72 @@ function waToHTMLInline(text) {
   return escapeHtml(text).replace(/\*([^*\n]+)\*/g, "<strong>$1</strong>").replace(/_([^_\n]+)_/g, "<em>$1</em>").replace(/~([^~\n]+)~/g, "<del>$1</del>").replace(/`([^`\n]+)`/g, "<code>$1</code>");
 }
 
+// src/useDarkMode.ts
+import { useState, useEffect, useCallback } from "react";
+var STORAGE_KEY = "conversations-ui-dark-mode";
+function getInitialDark() {
+  if (typeof window === "undefined") return false;
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored !== null) {
+    return stored === "true";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function useIsDarkTheme() {
+  const [isDark, setIsDark] = useState(
+    () => typeof document !== "undefined" && document.documentElement.classList.contains("dark")
+  );
+  useEffect(() => {
+    const root = document.documentElement;
+    const observer = new MutationObserver(() => setIsDark(root.classList.contains("dark")));
+    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+    setIsDark(root.classList.contains("dark"));
+    return () => observer.disconnect();
+  }, []);
+  return isDark;
+}
+function useDarkMode() {
+  const [isDark, setIsDark] = useState(getInitialDark);
+  useEffect(() => {
+    const root = document.documentElement;
+    if (isDark) {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+    localStorage.setItem(STORAGE_KEY, String(isDark));
+  }, [isDark]);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (event) => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored === null) {
+        setIsDark(event.matches);
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const toggle = useCallback(() => {
+    setIsDark((prev) => !prev);
+  }, []);
+  return { isDark, toggle };
+}
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
 export {
+  cn,
   parseWhatsAppFormatting,
   ZERO_WIDTH_SPACE,
   waToHTML,
   htmlToWA,
-  waToHTMLInline
+  waToHTMLInline,
+  useIsDarkTheme,
+  useDarkMode
 };

package/dist/flows/index.js

@@ -1,13 +1,11 @@
 import {
   TooltipLayer,
   WhatsAppMessagePreview
-} from "../chunk-HOKNKXIT.js";
+} from "../chunk-HMCOTZAX.js";
 import {
+  parseWhatsAppFormatting,
   useIsDarkTheme
-} from "../chunk-MRVFFJEH.js";
-import {
-  parseWhatsAppFormatting
-} from "../chunk-CBYEHPX6.js";
+} from "../chunk-PJNR6UMN.js";
 
 // src/flows/FlowNodeCard.tsx
 import { useState } from "react";