@adatechnology/conversations-ui 0.1.0-rc.4 → 0.1.0-rc.41

package/src/lib/composer-formatting.ts

@@ -0,0 +1,145 @@
+/**
+ * Estado e alternância da formatação dentro do campo rico.
+ *
+ * O botão precisa responder duas perguntas que o wrap manual não respondia: o cursor está dentro de
+ * um negrito? e, se está, como saio dele? `execCommand` é depreciado mas continua sendo o único
+ * caminho que alterna a formatação do cursor vazio — sem ele, ligar o negrito antes de digitar não
+ * existe, e era por isso que os botões não pareciam acender nem apagar.
+ *
+ * `queryCommandState` responde pelo estilo computado, então acende igual para `<strong>` (nosso) e
+ * `<b>` (do navegador). Onde o ambiente não tem as duas APIs — jsdom, teste — as funções avisam, e
+ * quem chama volta ao wrap manual.
+ */
+
+import { COMPOSER_MONOSPACE_CLASS } from '../composer.constant'
+import { ZERO_WIDTH_SPACE } from './whatsapp-formatting'
+
+export const FORMATTING_ACTION = {
+  BOLD: 'bold',
+  ITALIC: 'italic',
+  STRIKETHROUGH: 'strikethrough',
+  MONOSPACE: 'monospace',
+} as const
+export type FormattingAction = (typeof FORMATTING_ACTION)[keyof typeof FORMATTING_ACTION]
+
+/** Monoespaçado fica de fora: não existe comando nativo, o campo trata à mão. */
+const EXEC_COMMAND_BY_ACTION = {
+  [FORMATTING_ACTION.BOLD]: 'bold',
+  [FORMATTING_ACTION.ITALIC]: 'italic',
+  [FORMATTING_ACTION.STRIKETHROUGH]: 'strikeThrough',
+} as const
+
+/**
+ * O conjunto ativo viaja como string separada para o React comparar por valor: um `Set` novo a cada
+ * movimento do cursor rerenderizaria a barra inteira sem nada ter mudado.
+ */
+export const FORMATTING_SEPARATOR = '|'
+
+interface EditorNodeParams {
+  readonly node: Node
+  readonly editor: HTMLElement
+}
+
+/** O `<code>` que envolve o cursor, se houver — a marcação de monoespaçado que damos ao texto. */
+export function codeAncestorOf({ node, editor }: EditorNodeParams): HTMLElement | undefined {
+  let current: Node | null = node
+
+  while (current && current !== editor) {
+    if (current instanceof HTMLElement && current.tagName === 'CODE') return current
+    current = current.parentNode
+  }
+
+  return undefined
+}
+
+function canQueryCommandState(): boolean {
+  return typeof document !== 'undefined' && typeof document.queryCommandState === 'function'
+}
+
+export function canExecuteFormattingCommand(): boolean {
+  return typeof document !== 'undefined' && typeof document.execCommand === 'function'
+}
+
+function isCommandActive(command: string): boolean {
+  if (!canQueryCommandState()) return false
+  try {
+    return document.queryCommandState(command)
+  } catch {
+    // Fora de um campo editável o navegador lança em vez de responder `false`.
+    return false
+  }
+}
+
+export function activeFormattingIn(editor: HTMLElement): string {
+  const selection = typeof window !== 'undefined' ? window.getSelection() : null
+  const anchor = selection?.anchorNode
+  // Cursor fora do campo: nenhum botão aceso, senão a barra descreveria a seleção de outro lugar.
+  if (!anchor || !editor.contains(anchor)) return ''
+
+  const active: FormattingAction[] = []
+  for (const [action, command] of Object.entries(EXEC_COMMAND_BY_ACTION)) {
+    if (isCommandActive(command)) active.push(action as FormattingAction)
+  }
+  if (codeAncestorOf({ node: anchor, editor })) active.push(FORMATTING_ACTION.MONOSPACE)
+
+  return active.join(FORMATTING_SEPARATOR)
+}
+
+export function isFormattingActive({ active, action }: { active: string; action: FormattingAction }): boolean {
+  return active.split(FORMATTING_SEPARATOR).includes(action)
+}
+
+/**
+ * Liga o monoespaçado no cursor vago: abre o `<code>` e põe o cursor lá dentro, ancorado no espaço
+ * de largura zero — sem a âncora não há onde o cursor pousar, e o próximo caractere sai de fora.
+ * A âncora some na conversão para a notação do WhatsApp.
+ */
+export function startMonospaceAt(range: Range): void {
+  const code = document.createElement('code')
+  code.className = COMPOSER_MONOSPACE_CLASS
+  code.textContent = ZERO_WIDTH_SPACE
+  range.deleteContents()
+  range.insertNode(code)
+  placeCaretAfter(code.firstChild as Text, ZERO_WIDTH_SPACE.length)
+}
+
+/**
+ * Desliga o monoespaçado do cursor vago. Só mover o cursor para depois do `</code>` não basta — o
+ * navegador o traz de volta para dentro; é preciso uma âncora do lado de fora para ele pousar.
+ */
+export function exitMonospaceAfter(code: HTMLElement): void {
+  const anchor = document.createTextNode(ZERO_WIDTH_SPACE)
+  code.after(anchor)
+  placeCaretAfter(anchor, ZERO_WIDTH_SPACE.length)
+}
+
+/** Tira a marcação e devolve o texto ao redor — o que o clique com seleção dentro do código faz. */
+export function unwrapMonospace(code: HTMLElement): void {
+  code.replaceWith(document.createTextNode(code.textContent?.replace(ZERO_WIDTH_SPACE, '') ?? ''))
+}
+
+function placeCaretAfter(node: Text, offset: number): void {
+  const caret = document.createRange()
+  caret.setStart(node, offset)
+  caret.collapse(true)
+  const selection = window.getSelection()
+  selection?.removeAllRanges()
+  selection?.addRange(caret)
+}
+
+/**
+ * Alterna a formatação pelo navegador. Devolve `false` quando o comando não existe no ambiente,
+ * para o campo cair no wrap manual em vez de engolir o clique.
+ */
+export function toggleFormattingCommand(action: FormattingAction): boolean {
+  const command = EXEC_COMMAND_BY_ACTION[action as keyof typeof EXEC_COMMAND_BY_ACTION]
+  if (!command || !canExecuteFormattingCommand()) return false
+
+  try {
+    // Sem isto o Chrome escreve `<span style="font-weight:bold">`, que não sobrevive ao htmlToWA.
+    document.execCommand('styleWithCSS', false, 'false')
+    return document.execCommand(command)
+  } catch {
+    return false
+  }
+}

package/src/lib/createMediaUrlResolver.ts

@@ -0,0 +1,33 @@
+/**
+ * Resolve a mídia de uma mensagem numa URL exibível, usando só o `ConversationsApi`.
+ *
+ * Mora no pacote, e não em cada host, porque a regra não tem nada de específico de produto: é a
+ * tradução de `uploadId`/`mediaId` pelos dois métodos que o próprio contrato já declara. Deixá-la no
+ * host significava que todo projeto que adotasse o SDK reescreveria as mesmas oito linhas — e, na
+ * prática, ninguém escrevia: o `MediaRenderer` só busca mídia pela porta `onResolveMediaUrl`, então
+ * onde nada era injetado foto, vídeo e áudio ficavam no placeholder para sempre.
+ */
+
+import type { MessagePayload } from '../types'
+import type { ConversationsApi } from '../providers/types'
+import type { ResolveMediaUrl } from '../MediaRenderer'
+
+export function createMediaUrlResolver(
+  api: Pick<ConversationsApi, 'getDocumentUrl' | 'getMediaProxyUrl'>,
+): ResolveMediaUrl {
+  return async (message: MessagePayload): Promise<string | null> => {
+    // Mídia já copiada para o storage do host: sai por URL assinada e o binário não passa pela API.
+    // `inline` porque aqui o arquivo é para VER na tela — `attachment` faria o navegador baixar.
+    if (message.uploadId) return api.getDocumentUrl(message.uploadId, 'inline')
+
+    // Antes da ingestão só existe o id na Meta, cuja URL expira; o backend busca e devolve base64.
+    // Data URL serve de `src` para `<img>`/`<video>`/`<audio>`: o bloqueio do Chrome a `data:` vale
+    // para navegação de topo, não para carregar mídia dentro da página.
+    if (message.mediaId) {
+      const { mimeType, data } = await api.getMediaProxyUrl(message.mediaId)
+      return `data:${mimeType};base64,${data}`
+    }
+
+    return null
+  }
+}

package/src/lib/paginated.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'bun:test'
+import { conversationsOf, documentsOf, totalOf } from './paginated'
+import type { ConversationDocument, ConversationSummary } from '../providers/types'
+
+const conversation = { id: '1', whatsappNumber: '5511900000000' } as ConversationSummary
+const document = { id: 'd1', filename: 'contrato.pdf' } as ConversationDocument
+
+describe('normalização de lista ou página', () => {
+  // As duas formas existem porque o contrato aceita as duas: array puro é o retorno original, e
+  // implementações antigas continuam válidas. Um consumidor que só tratasse uma delas quebraria
+  // em runtime, não no compilador.
+  it('aceita o array puro do contrato original', () => {
+    expect(conversationsOf([conversation])).toEqual([conversation])
+    expect(documentsOf([document])).toEqual([document])
+  })
+
+  it('desembrulha a forma paginada', () => {
+    expect(conversationsOf({ conversations: [conversation], total: 42 })).toEqual([conversation])
+    expect(documentsOf({ documents: [document], total: 7 })).toEqual([document])
+  })
+
+  it('usa o total do servidor quando ele vem, e o tamanho da página quando não vem', () => {
+    // A distinção importa: com array puro não dá para saber se a página é a última, então o
+    // melhor palpite honesto é o que se tem em mãos.
+    expect(totalOf({ conversations: [conversation], total: 42 })).toBe(42)
+    expect(totalOf([conversation])).toBe(1)
+  })
+
+  it('trata página vazia sem confundir com ausência de dados', () => {
+    expect(conversationsOf({ conversations: [], total: 0 })).toEqual([])
+    expect(totalOf({ conversations: [], total: 0 })).toBe(0)
+  })
+})

package/src/lib/paginated.ts

@@ -0,0 +1,26 @@
+import type {
+  ConversationDocument,
+  ConversationDocumentPage,
+  ConversationPage,
+  ConversationSummary,
+} from '../providers/types'
+
+/**
+ * `fetchConversations` e `getDocuments` devolvem o array puro (contrato original) ou uma página
+ * com total. Normalizar num lugar só evita que cada consumidor invente sua própria checagem —
+ * e um consumidor esquecido não falha no compilador, falha em runtime com `.map is not a
+ * function`.
+ */
+export function conversationsOf(result: ConversationSummary[] | ConversationPage): ConversationSummary[] {
+  return Array.isArray(result) ? result : result.conversations
+}
+
+export function documentsOf(result: ConversationDocument[] | ConversationDocumentPage): ConversationDocument[] {
+  return Array.isArray(result) ? result : result.documents
+}
+
+export function totalOf(
+  result: ConversationSummary[] | ConversationPage | ConversationDocument[] | ConversationDocumentPage,
+): number {
+  return Array.isArray(result) ? result.length : result.total
+}

package/src/lib/whatsapp-formatting.test.tsx

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { parseWhatsAppFormatting } from './whatsapp-formatting'
+
+function render(text: string): string {
+  return renderToStaticMarkup(<>{parseWhatsAppFormatting(text)}</>)
+}
+
+describe('parseWhatsAppFormatting com marcador sem par', () => {
+  // Estes casos travavam a aba: o laço reprocessava a mesma string sem consumir o marcador.
+  it('trata o sublinhado solto de um nome de arquivo como texto', () => {
+    expect(render('IMG_2026.jpg')).toBe('<span>IMG</span><span>_</span><span>2026.jpg</span>')
+  })
+
+  it('não trava com asterisco, til ou crase sem fechamento', () => {
+    expect(render('3 * 4')).toContain('*')
+    expect(render('mais ou menos ~10')).toContain('~')
+    expect(render('use ` para código')).toContain('`')
+  })
+
+  it('sobrevive a uma linha só de marcadores', () => {
+    expect(render('*_~`')).toBe('<span>*</span><span>_</span><span>~</span><span>`</span>')
+  })
+})
+
+describe('parseWhatsAppFormatting com marcador fechado', () => {
+  it('continua formatando o par completo depois do marcador solto', () => {
+    expect(render('IMG_2026 *urgente*')).toContain('<strong>urgente</strong>')
+  })
+
+  it('mantém negrito, itálico e tachado', () => {
+    expect(render('*a* _b_ ~c~')).toBe(
+      '<strong>a</strong><span> </span><em>b</em><span> </span><del>c</del>',
+    )
+  })
+})

package/src/lib/whatsapp-formatting.tsx

@@ -90,9 +90,15 @@ function parseInlineTokens(text: string): FormatToken[] {
       if (remaining) result.push({ type: 'text', content: remaining })
       break
     }
-    if (nextSpecial > 0) {
-      result.push({ type: 'text', content: remaining.slice(0, nextSpecial) })
+    // Marcador sem par — o `_` de `IMG_2026.jpg` é o caso comum. Nenhuma das regras casou e o
+    // marcador está na posição zero: sem consumir esse caractere o laço reprocessa a mesma string
+    // para sempre e trava a aba inteira, porque isto roda no render de cada mensagem.
+    if (nextSpecial === 0) {
+      result.push({ type: 'text', content: remaining.slice(0, 1) })
+      remaining = remaining.slice(1)
+      continue
     }
+    result.push({ type: 'text', content: remaining.slice(0, nextSpecial) })
     remaining = remaining.slice(nextSpecial)
   }
 
@@ -137,6 +143,15 @@ function unescapeHtml(text: string): string {
 const CODE_TOKEN_MARK = String.fromCharCode(0xe000)
 const CODE_TOKEN_REGEX = new RegExp(`${CODE_TOKEN_MARK}(\\d+)${CODE_TOKEN_MARK}`, 'g')
 
+/**
+ * Âncora invisível que o campo rico usa para pôr o cursor dentro (ou fora) de um `<code>` — não
+ * existe comando de navegador para monoespaçado, e o cursor sozinho não fica onde não há texto.
+ * Ela é do editor, nunca da mensagem: sai toda aqui, na conversão de volta.
+ */
+export const ZERO_WIDTH_SPACE = String.fromCharCode(0x200b)
+const EMPTY_CODE_REGEX = new RegExp(`<code[^>]*>[${ZERO_WIDTH_SPACE}\\s]*</code>`, 'gi')
+const ZERO_WIDTH_SPACE_REGEX = new RegExp(ZERO_WIDTH_SPACE, 'g')
+
 // waToHTML/htmlToWA formam um par round-trip: todo texto que sai de waToHTML deve
 // reconstruir exatamente o original ao passar por htmlToWA (inclusive blocos de
 // código multi-linha, que exigem distinguir ``` de ` via atributo data-wa).
@@ -156,7 +171,10 @@ export function waToHTML(text: string): string {
   let html = escapeHtml(working)
   html = html.replace(/\*([^*\n]+)\*/g, '<strong>$1</strong>')
   html = html.replace(/_([^_\n]+)_/g, '<em>$1</em>')
-  html = html.replace(/~([^~\n]+)~/g, '<del>$1</del>')
+  // `<s>` e não `<del>`: o navegador se recusa a tirar o tachado de um `<del>` — o botão acendia,
+  // o clique não fazia nada e o texto continuava riscado. Com `<s>` a alternância funciona, e a
+  // linha na tela é a mesma. `<del>` continua certo na exibição da mensagem, que não é editável.
+  html = html.replace(/~([^~\n]+)~/g, '<s>$1</s>')
   html = html.replace(/\n/g, '<br>')
 
   html = html.replace(CODE_TOKEN_REGEX, (_match, indexStr: string) => {
@@ -175,6 +193,9 @@ export function htmlToWA(html: string): string {
   if (!html) return ''
 
   let text = html
+  // O `<code>` que o cursor abre nasce só com a âncora de largura zero. Sem nada digitado dentro,
+  // ele viraria um par de crases vazias no texto enviado.
+  text = text.replace(EMPTY_CODE_REGEX, '')
   text = text.replace(/<code data-wa="block"[^>]*>([\s\S]*?)<\/code>/gi, (_match, inner: string) => (
     `\`\`\`${unescapeHtml(inner.replace(/<br\s*\/?>/gi, '\n'))}\`\`\``
   ))
@@ -195,11 +216,15 @@ export function htmlToWA(html: string): string {
   text = text.replace(/<i>(.*?)<\/i>/gi, '_$1_')
   text = text.replace(/<del>(.*?)<\/del>/gi, '~$1~')
   text = text.replace(/<s>(.*?)<\/s>/gi, '~$1~')
+  // O `strikeThrough` do navegador escreve `<strike>`, que não é o que geramos mas chega no campo.
+  text = text.replace(/<strike>(.*?)<\/strike>/gi, '~$1~')
   // Compat: HTML sem os marcadores data-wa (ex: vindo de outro editor) ainda vira código inline.
   text = text.replace(/<code[^>]*>(.*?)<\/code>/gi, '`$1`')
 
   text = text.replace(/<[^>]+>/g, '')
   text = unescapeHtml(text)
+  // A âncora do cursor sobrevive dentro do `<code>` que ganhou texto; ela é do editor, não da mensagem.
+  text = text.replace(ZERO_WIDTH_SPACE_REGEX, '')
   return text.trim()
 }
 

package/src/listing/index.tsx

@@ -0,0 +1,202 @@
+/**
+ * Peças de listagem que toda tela tabular do pacote precisa ter iguais: cabeçalho ordenável,
+ * filtro de seleção múltipla, barra de ação em lote e paginação (regra `web.md` §7).
+ *
+ * Vivem aqui, e não dentro de cada tela, porque a alternativa já se provou pior: cada workspace
+ * recriava o seu, e o mesmo "limpar filtros" ficava em três lugares com três comportamentos.
+ */
+
+import { useState, type ReactNode } from 'react'
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, X } from 'lucide-react'
+
+import { cn } from '../lib/cn'
+
+export type SortDirection = 'asc' | 'desc'
+
+export interface SortableHeadProps {
+  readonly label: string
+  readonly field: string
+  readonly activeField: string
+  readonly direction: SortDirection
+  readonly onSort: (field: string) => void
+  readonly className?: string
+}
+
+export function SortableHead({ label, field, activeField, direction, onSort, className }: SortableHeadProps) {
+  const isActive = activeField === field
+  const Icon = !isActive ? ArrowUpDown : direction === 'asc' ? ArrowUp : ArrowDown
+
+  return (
+    <th scope="col" className={cn('px-3 py-2 text-left text-xs font-medium', className)}>
+      <button
+        data-cv-tooltip={label}
+        type="button"
+        onClick={() => onSort(field)}
+        aria-label={label}
+        className="inline-flex items-center gap-1 hover:text-gray-900 dark:hover:text-gray-100"
+      >
+        {label}
+        <Icon size={12} className={isActive ? '' : 'opacity-40'} aria-hidden="true" />
+      </button>
+    </th>
+  )
+}
+
+export interface FilterOption {
+  readonly value: string
+  readonly label: string
+}
+
+export interface MultiSelectFilterProps {
+  readonly label: string
+  readonly options: readonly FilterOption[]
+  readonly selected: readonly string[]
+  readonly onChange: (selected: readonly string[]) => void
+  readonly className?: string
+}
+
+export function MultiSelectFilter({ label, options, selected, onChange, className }: MultiSelectFilterProps) {
+  const [open, setOpen] = useState(false)
+
+  function toggle(value: string): void {
+    onChange(selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value])
+  }
+
+  return (
+    <div className={cn('relative', className)}>
+      <button
+        data-cv-tooltip={label} aria-label={label}
+        type="button"
+        onClick={() => setOpen((current) => !current)}
+        className="cv-header-action inline-flex items-center gap-1"
+      >
+        {label}
+        {selected.length > 0 ? <span className="cv-filter-count">{selected.length}</span> : null}
+        <ChevronDown size={12} className={open ? 'rotate-180 transition-transform' : 'transition-transform'} aria-hidden="true" />
+      </button>
+
+      {open ? (
+        <>
+          {/* Sem a camada de fundo o dropdown só fechava clicando de novo no botão, e ficava aberto
+              por cima da tabela enquanto o usuário tentava clicar numa linha. */}
+          <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
+          <div className="cv-filter-menu">
+            {options.map((option) => (
+              <label key={option.value} className="cv-filter-option">
+                <input
+                  type="checkbox"
+                  checked={selected.includes(option.value)}
+                  onChange={() => toggle(option.value)}
+                  className="cursor-pointer rounded border-gray-300 text-blue-600 dark:border-gray-600"
+                />
+                {option.label}
+              </label>
+            ))}
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+export interface BulkActionBarProps {
+  readonly selectedCount: number
+  readonly selectedLabel: (count: number) => string
+  readonly clearLabel: string
+  readonly onClear: () => void
+  readonly children?: ReactNode
+}
+
+export function BulkActionBar({ selectedCount, selectedLabel, clearLabel, onClear, children }: BulkActionBarProps) {
+  if (selectedCount === 0) return null
+
+  return (
+    <div className="cv-bulk-bar" role="toolbar" aria-label={selectedLabel(selectedCount)}>
+      <span className="text-xs font-medium">{selectedLabel(selectedCount)}</span>
+      {children}
+      <button data-cv-tooltip={clearLabel} aria-label={clearLabel} type="button" onClick={onClear} className="cv-header-action ml-auto inline-flex items-center gap-1">
+        <X size={12} aria-hidden="true" />
+        {clearLabel}
+      </button>
+    </div>
+  )
+}
+
+export interface ListingPaginationProps {
+  readonly page: number
+  readonly total: number
+  readonly perPage: number
+  readonly perPageOptions?: readonly number[]
+  readonly onPageChange: (page: number) => void
+  readonly onPerPageChange?: (perPage: number) => void
+  readonly labels: {
+    readonly show: string
+    readonly perPage: string
+    readonly total: (count: number) => string
+    readonly page: (current: number, last: number) => string
+    readonly previous: string
+    readonly next: string
+  }
+}
+
+export function ListingPagination({
+  page,
+  total,
+  perPage,
+  perPageOptions,
+  onPageChange,
+  onPerPageChange,
+  labels,
+}: ListingPaginationProps) {
+  const lastPage = Math.max(1, Math.ceil(total / perPage))
+
+  return (
+    <div className="cv-listing-pagination">
+      <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+        {onPerPageChange && perPageOptions ? (
+          <>
+            <span>{labels.show}</span>
+            <select
+              value={perPage}
+              onChange={(event) => onPerPageChange(Number(event.target.value))}
+              aria-label={labels.perPage}
+              className="cv-listing-perpage"
+            >
+              {perPageOptions.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+            <span>{labels.perPage}</span>
+          </>
+        ) : null}
+        <span className="ml-1">{labels.total(total)}</span>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button
+          data-cv-tooltip={labels.previous}
+          type="button"
+          onClick={() => onPageChange(page - 1)}
+          disabled={page <= 1}
+          aria-label={labels.previous}
+          className="cv-header-icon disabled:opacity-40"
+        >
+          ‹
+        </button>
+        <span className="text-xs text-gray-500">{labels.page(page, lastPage)}</span>
+        <button
+          data-cv-tooltip={labels.next}
+          type="button"
+          onClick={() => onPageChange(page + 1)}
+          disabled={page >= lastPage}
+          aria-label={labels.next}
+          className="cv-header-icon disabled:opacity-40"
+        >
+          ›
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/pagination.constant.ts

@@ -0,0 +1,10 @@
+/**
+ * Rótulos dos controles de paginação. Os pagers da inbox, do painel de documentos e da biblioteca
+ * são o mesmo controle repetido: o texto mora aqui para os três dizerem a mesma coisa.
+ */
+export const PAGINATION_LABELS = {
+  first: 'Primeira página',
+  previous: 'Página anterior',
+  next: 'Próxima página',
+  last: 'Última página',
+} as const