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

package/src/types.ts

@@ -20,9 +20,46 @@ export interface ConversationsFeatures {
   darkMode?: boolean
 }
 
+/**
+ * Recorte do bloco `interactive` da Meta que a UI precisa para desenhar o menu. Fica solto (e não
+ * espelhando o contrato inteiro) porque o que chega do banco é o payload cru já enviado ao
+ * WhatsApp: qualquer campo que a UI não conheça é ignorado, nunca causa erro de render.
+ */
+export interface InteractiveOption {
+  id: string
+  title: string
+  description?: string
+}
+
+export interface InteractiveSection {
+  title?: string
+  rows?: InteractiveOption[]
+}
+
+export interface InteractivePayload {
+  type?: 'button' | 'list' | string
+  header?: { text?: string }
+  body?: { text?: string }
+  footer?: { text?: string }
+  action?: {
+    /** Rótulo do botão que abre a lista — só existe em `type: 'list'`. */
+    button?: string
+    sections?: InteractiveSection[]
+    buttons?: { reply?: InteractiveOption }[]
+  }
+}
+
+/** Como o cliente respondeu a um menu: por botão ou por item de lista. */
+export type InteractiveSelection = {
+  readonly kind: 'button' | 'list'
+  readonly option: InteractiveOption
+}
+
 export interface MessagePayload {
   id: string
-  type: 'text' | 'image' | 'video' | 'audio' | 'document' | 'sticker' | 'template'
+  type: 'text' | 'image' | 'video' | 'audio' | 'document' | 'sticker' | 'template' | 'interactive'
+  /** Payload cru da mensagem. Em `type: 'interactive'`, carrega o menu que o cliente vê. */
+  payload?: InteractivePayload | null
   content?: string
   caption?: string
   mediaUrl?: string
@@ -47,6 +84,32 @@ export interface MessagePayload {
    * diferente de avaliado e limpo.
    */
   moderation?: { isOffensive: boolean; terms: string[] } | null
+  /**
+   * Transcrição do áudio, vinda do backend — a UI só exibe, nunca transcreve. Rodar STT no browser
+   * exigiria baixar modelo por aba e daria resultado diferente por versão de cliente.
+   *
+   * `null`/ausente = não avaliado, que é diferente de `'done'` com texto vazio (áudio em silêncio,
+   * já processado). É essa distinção que decide se o balão oferece "transcrever" ou "sem fala
+   * detectada".
+   */
+  transcription?: MessageTranscription | null
   isFirstInGroup?: boolean
   isLastInGroup?: boolean
 }
+
+export type TranscriptionStatus = 'pending' | 'done' | 'failed' | 'unsupported'
+
+/**
+ * Quando transcrever, escolhido nas configurações da empresa. Espelha o
+ * `TranscriptionMode` de `@adatechnology/meta-whatsapp-contracts`; declarado aqui para o pacote de
+ * UI não obrigar quem só desenha telas a instalar os contratos do backend.
+ */
+export type TranscriptionMode = 'auto' | 'onDemand'
+
+export interface MessageTranscription {
+  status: TranscriptionStatus
+  text?: string | null
+  /** ISO 639-1 ou nome do idioma, conforme o engine. Exibido como dica, não interpretado. */
+  language?: string | null
+  engine?: string | null
+}

package/src/useWaitingNotifications.ts

@@ -1,64 +1,109 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { useConversations } from './providers/ConversationsProvider'
-import type { ConversationSummary } from './providers/types'
+import { conversationsOf } from './lib/paginated'
+import type { ConversationSummary, ListConversationsParams } from './providers/types'
 
-interface UseWaitingNotificationsResult {
+const DEFAULT_POLL_INTERVAL_MS = 10_000
+const DEFAULT_LIMIT = 50
+
+export interface UseWaitingNotificationsLabels {
+  /** Título da notificação do sistema. Recebe a conversa para o host escolher nome × número. */
+  title: (conversation: ConversationSummary) => string
+  body: (conversation: ConversationSummary) => string
+}
+
+export interface UseWaitingNotificationsParams {
+  /**
+   * Repassado cru ao `fetchConversations`. É o que permite filtrar não lidas **no servidor** em
+   * vez de baixar a lista inteira e contar no cliente: um painel com milhares de conversas não
+   * pode paginar 50 por vez atrás de quem tem `unread > 0`.
+   */
+  readonly params?: ListConversationsParams
+  readonly intervalMs?: number
+  /** Desliga o polling sem desmontar quem chama — útil com a aba em segundo plano. */
+  readonly enabled?: boolean
+  readonly icon?: string
+  readonly labels?: Partial<UseWaitingNotificationsLabels>
+}
+
+export interface UseWaitingNotificationsResult {
   unreadCount: number
   conversations: ConversationSummary[]
+  /**
+   * Releitura sob demanda. Existe porque o polling é o piso, não o mecanismo: quem já recebe SSE
+   * ou acabou de marcar tudo como lido sabe da mudança antes do próximo tick, e esperar 10s para
+   * o contador acompanhar faz a interface parecer travada.
+   */
+  refresh: () => Promise<void>
+}
+
+const DEFAULT_LABELS: UseWaitingNotificationsLabels = {
+  title: (conversation) => conversation.clientName ?? conversation.whatsappNumber,
+  body: (conversation) => conversation.lastContent ?? 'Nova mensagem',
 }
 
-export function useWaitingNotifications(): UseWaitingNotificationsResult {
-  const conversationsCtx = useConversations()
+export function useWaitingNotifications(params?: UseWaitingNotificationsParams): UseWaitingNotificationsResult {
+  const conversationsContext = useConversations()
   const [conversations, setConversations] = useState<ConversationSummary[]>([])
   const previousUnreadMap = useRef<Map<string, number>>(new Map())
   const notifiedIds = useRef<Set<string>>(new Set())
+  // Trava de reentrância: com a rede lenta, o tick de 10s dispara sobre a busca anterior ainda em
+  // voo, e duas respostas fora de ordem fazem o contador oscilar e a notificação repetir.
+  const isPollingRef = useRef(false)
+
+  const isEnabled = params?.enabled ?? true
+  const intervalMs = params?.intervalMs ?? DEFAULT_POLL_INTERVAL_MS
+  const icon = params?.icon
+  const listParams = params?.params
+  const labelTitle = params?.labels?.title ?? DEFAULT_LABELS.title
+  const labelBody = params?.labels?.body ?? DEFAULT_LABELS.body
 
-  const pollConversations = useCallback(async () => {
-    if (!conversationsCtx) return
+  const refresh = useCallback(async () => {
+    if (!conversationsContext || isPollingRef.current) return
+    isPollingRef.current = true
 
     try {
-      const result = await conversationsCtx.api.fetchConversations({ limit: 50 })
+      const result = conversationsOf(
+        await conversationsContext.api.fetchConversations({ limit: DEFAULT_LIMIT, ...listParams }),
+      )
       setConversations(result)
 
       const currentMap = new Map<string, number>()
-      for (const conv of result) {
-        currentMap.set(conv.id, conv.unread)
-      }
+      for (const conversation of result) currentMap.set(conversation.id, conversation.unread)
 
-      for (const conv of result) {
-        if (conv.unread <= 0) continue
+      for (const conversation of result) {
+        if (conversation.unread <= 0) continue
 
-        const prev = previousUnreadMap.current.get(conv.id) ?? 0
+        const previousUnread = previousUnreadMap.current.get(conversation.id) ?? 0
+        if (conversation.unread <= previousUnread || notifiedIds.current.has(conversation.id)) continue
 
-        if (conv.unread > prev && !notifiedIds.current.has(conv.id)) {
-          notifiedIds.current.add(conv.id)
-
-          if (typeof window !== 'undefined' && 'Notification' in window && Notification.permission === 'granted') {
-            const title = conv.clientName ?? conv.whatsappNumber
-            const body = conv.lastContent ?? 'Nova mensagem'
-            new Notification(title, { body, icon: '/favicon.ico' })
-          }
+        notifiedIds.current.add(conversation.id)
+        if (typeof window !== 'undefined' && 'Notification' in window && Notification.permission === 'granted') {
+          new Notification(labelTitle(conversation), { body: labelBody(conversation), ...(icon ? { icon } : {}) })
         }
       }
 
       previousUnreadMap.current = currentMap
     } catch {
-      // Silently ignore polling errors
+      // Contador de badge não interrompe o atendimento: uma falha de rede some no próximo tick.
+    } finally {
+      isPollingRef.current = false
     }
-  }, [conversationsCtx])
+  }, [conversationsContext, listParams, icon, labelTitle, labelBody])
 
   useEffect(() => {
+    if (!isEnabled) return
+
     if (typeof window !== 'undefined' && 'Notification' in window && Notification.permission === 'default') {
       Notification.requestPermission()
     }
 
-    pollConversations()
-
-    const interval = setInterval(pollConversations, 10_000)
+    void refresh()
+    const interval = setInterval(() => void refresh(), intervalMs)
     return () => clearInterval(interval)
-  }, [pollConversations])
+  }, [refresh, isEnabled, intervalMs])
 
-  const unreadCount = conversations.reduce((sum, conv) => sum + conv.unread, 0)
+  const unreadCount = conversations.reduce((sum, conversation) => sum + conversation.unread, 0)
 
-  return { unreadCount, conversations }
+  return { unreadCount, conversations, refresh }
 }

package/src/workspace/BulkTemplateModal.tsx

@@ -0,0 +1,132 @@
+/**
+ * Escolha do template para o envio em lote.
+ *
+ * Fora da janela de 24h só template abre conversa, e a lista aprovada muda por conta da Meta — daí
+ * a busca: quem tem trinta templates não acha o certo rolando. Só aparece quando o host implementa
+ * `listTemplates`; sem a listagem não há o que escolher, e o envio cai no template padrão.
+ *
+ * O aviso de "nenhuma selecionada está fora da janela" existe porque o envio parecia falhar em
+ * silêncio: dentro da janela a Meta recusa o template, e a tela não dizia por quê.
+ */
+
+import { useEffect, useMemo, useState } from 'react'
+
+import { useConversations } from '../providers/ConversationsProvider'
+import type { ConversationTemplate } from '../providers/types'
+import type { ConversationsWorkspaceLabels } from './labels'
+
+export interface BulkTemplateModalProps {
+  readonly labels: ConversationsWorkspaceLabels
+  /** Quantas das selecionadas estão fora da janela — as únicas que o template atinge. */
+  readonly expiredCount: number
+  readonly sending: boolean
+  readonly onClose: () => void
+  readonly onSend: (templateName: string | undefined) => void
+}
+
+export function BulkTemplateModal({
+  labels,
+  expiredCount,
+  sending,
+  onClose,
+  onSend,
+}: BulkTemplateModalProps) {
+  const context = useConversations()
+  if (!context) {
+    throw new Error('BulkTemplateModal requires an ancestor <ConversationsProvider>')
+  }
+  const { api } = context
+
+  const [templates, setTemplates] = useState<readonly ConversationTemplate[]>([])
+  const [search, setSearch] = useState('')
+  const [selected, setSelected] = useState('')
+
+  useEffect(() => {
+    let active = true
+    void api
+      .listTemplates?.()
+      .then((loaded) => {
+        if (active) setTemplates(loaded)
+      })
+      .catch(() => {
+        // Lista vazia já comunica o que houve; um alerta a mais competiria com o atendimento.
+      })
+    return () => {
+      active = false
+    }
+  }, [api])
+
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase()
+    if (!term) return templates
+    return templates.filter((template) => template.name.toLowerCase().includes(term))
+  }, [templates, search])
+
+  return (
+    <div className="cv-workspace-modal" role="dialog" aria-modal="true" aria-label={labels.templateModalTitle}>
+      <div className="cv-workspace-modal__box">
+        <header className="cv-workspace-modal__header">
+          <div>
+            <h3>{labels.templateModalTitle}</h3>
+            <p>{labels.templateModalAvailable(templates.length)}</p>
+          </div>
+          <button data-cv-tooltip={labels.templateModalCancel} type="button" onClick={onClose} aria-label={labels.templateModalCancel}>
+            ✕
+          </button>
+        </header>
+
+        <div className="cv-workspace-modal__search">
+          <input
+            type="search"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={labels.templateModalSearch}
+            autoFocus
+          />
+        </div>
+
+        <div className="cv-workspace-modal__list">
+          {filtered.length === 0 ? <p className="cv-workspace-empty">{labels.templateModalEmpty}</p> : null}
+          {filtered.map((template) => (
+            <button
+              data-cv-tooltip={template.name} aria-label={template.name}
+              key={template.name}
+              type="button"
+              // Reclicar desmarca: sem isso não havia como voltar ao template padrão depois de
+              // escolher um por engano.
+              onClick={() => setSelected(template.name === selected ? '' : template.name)}
+              aria-pressed={template.name === selected}
+              className={`cv-workspace-modal__item${
+                template.name === selected ? ' cv-workspace-modal__item--on' : ''
+              }`}
+            >
+              <span className="cv-workspace-modal__item-name">{template.name}</span>
+              <span className="cv-workspace-modal__item-meta">
+                {template.language}
+                {template.category ? ` · ${template.category.toLowerCase()}` : ''}
+              </span>
+            </button>
+          ))}
+        </div>
+
+        {expiredCount === 0 ? (
+          <p className="cv-workspace-modal__warning">{labels.templateModalNoneExpired}</p>
+        ) : null}
+
+        <footer className="cv-workspace-modal__footer">
+          <button data-cv-tooltip={labels.templateModalCancel} aria-label={labels.templateModalCancel} type="button" onClick={onClose}>
+            {labels.templateModalCancel}
+          </button>
+          <button
+            data-cv-tooltip={sending ? labels.templateModalSending : labels.templateModalSend(expiredCount)} aria-label={sending ? labels.templateModalSending : labels.templateModalSend(expiredCount)}
+            type="button"
+            disabled={sending || expiredCount === 0}
+            onClick={() => onSend(selected || undefined)}
+          >
+            {sending ? labels.templateModalSending : labels.templateModalSend(expiredCount)}
+          </button>
+        </footer>
+      </div>
+    </div>
+  )
+}