@adatechnology/conversations-ui 0.1.0-rc.2 → 0.1.0-rc.20

package/src/settings/WhatsAppTemplatesSettings.tsx

@@ -0,0 +1,106 @@
+/**
+ * Configurações de template do WhatsApp, com submenu próprio.
+ *
+ * Junta as duas telas que já existiam soltas — escolher o template de reengajamento e criar um novo
+ * para aprovação da Meta — porque na cabeça de quem opera é um só assunto. Cada host montava esse
+ * agrupamento por conta, e é justamente o tipo de composição que deve nascer no pacote.
+ *
+ * Segue presentacional: nenhuma chamada de rede aqui. Templates, estado e handlers vêm por props.
+ */
+
+import { useState, type FormEvent } from 'react'
+import {
+  WhatsAppTemplateSettingsForm,
+  type WhatsAppTemplateSummary,
+  type WhatsAppTemplateVariableSuggestion,
+} from './WhatsAppTemplateSettingsForm'
+import {
+  WhatsAppCreateTemplateForm,
+  type WhatsAppCreateTemplateResult,
+  type WhatsAppCreateTemplateState,
+} from './WhatsAppCreateTemplateForm'
+
+export const TEMPLATE_SETTINGS_TAB = {
+  SELECT: 'select',
+  CREATE: 'create',
+} as const
+export type TemplateSettingsTab = (typeof TEMPLATE_SETTINGS_TAB)[keyof typeof TEMPLATE_SETTINGS_TAB]
+
+export interface WhatsAppTemplatesSettingsLabels {
+  selectTab: string
+  createTab: string
+}
+
+export const DEFAULT_TEMPLATES_SETTINGS_LABELS: WhatsAppTemplatesSettingsLabels = {
+  selectTab: 'Template de reengajamento',
+  createTab: 'Criar template',
+}
+
+export interface WhatsAppTemplatesSettingsProps {
+  templates: WhatsAppTemplateSummary[]
+  loadingTemplates?: boolean
+  templatesError?: boolean
+  onRefreshTemplates?: () => void
+  selectedTemplateName: string
+  onSelectTemplate: (name: string, template: WhatsAppTemplateSummary | undefined) => void
+  variables: string[]
+  onVariablesChange: (variables: string[]) => void
+  availableVariables?: WhatsAppTemplateVariableSuggestion[]
+  saving?: boolean
+  saveSuccess?: boolean
+  onSave: (event: FormEvent) => void
+  /** Ausente = host não sabe criar template; a aba de criação nem aparece. */
+  create?: {
+    value: WhatsAppCreateTemplateState
+    onChange: (value: WhatsAppCreateTemplateState) => void
+    onSubmit: (event: FormEvent) => void
+    submitting?: boolean
+    result?: WhatsAppCreateTemplateResult | null
+  }
+  labels?: Partial<WhatsAppTemplatesSettingsLabels>
+}
+
+export function WhatsAppTemplatesSettings({
+  labels: labelsOverride,
+  create,
+  ...settingsProps
+}: WhatsAppTemplatesSettingsProps) {
+  const labels = { ...DEFAULT_TEMPLATES_SETTINGS_LABELS, ...labelsOverride }
+  const [tab, setTab] = useState<TemplateSettingsTab>(TEMPLATE_SETTINGS_TAB.SELECT)
+
+  return (
+    <div className="space-y-4">
+      <nav className="flex gap-1 border-b" role="tablist">
+        <button
+          type="button"
+          role="tab"
+          aria-selected={tab === TEMPLATE_SETTINGS_TAB.SELECT}
+          onClick={() => setTab(TEMPLATE_SETTINGS_TAB.SELECT)}
+          className={`cv-subtab ${tab === TEMPLATE_SETTINGS_TAB.SELECT ? 'cv-subtab--active' : ''}`}
+        >
+          {labels.selectTab}
+        </button>
+
+        {/* A aba de criação só existe se o host souber criar: sem handler, ela seria um formulário
+            que não leva a nada. */}
+        {create ? (
+          <button
+            type="button"
+            role="tab"
+            aria-selected={tab === TEMPLATE_SETTINGS_TAB.CREATE}
+            onClick={() => setTab(TEMPLATE_SETTINGS_TAB.CREATE)}
+            className={`cv-subtab ${tab === TEMPLATE_SETTINGS_TAB.CREATE ? 'cv-subtab--active' : ''}`}
+          >
+            {labels.createTab}
+          </button>
+        ) : null}
+      </nav>
+
+      {tab === TEMPLATE_SETTINGS_TAB.SELECT ? (
+        <WhatsAppTemplateSettingsForm {...settingsProps} />
+      ) : create ? (
+        <WhatsAppCreateTemplateForm {...create} />
+      ) : null}
+    </div>
+  )
+}

package/src/styles.css

@@ -19,3 +19,139 @@
   background-color: #0b141a;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2319232a' stroke-width='1.2' opacity='0.9'%3E%3Ccircle cx='15' cy='15' r='3'/%3E%3Cpath d='M40 10 q5 8 0 16 q-5 -8 0 -16z'/%3E%3Ccircle cx='70' cy='28' r='2'/%3E%3Cpath d='M18 55 l6 6 m-6 0 l6 -6'/%3E%3Ccircle cx='55' cy='68' r='2.5'/%3E%3Cpath d='M85 58 q6 6 0 12 q-6 -6 0 -12z'/%3E%3Ccircle cx='8' cy='85' r='2'/%3E%3Cpath d='M65 90 l5 5 m-5 0 l5 -5'/%3E%3C/g%3E%3C/svg%3E");
 }
+
+/* Botão de ação do cabeçalho de conversa e do aviso de janela. Vive no stylesheet, como o
+   .cv-wallpaper, para não depender da configuração de Tailwind do consumidor. */
+.cv-header-action {
+  border: 1px solid rgb(203 213 225);
+  border-radius: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+  background: transparent;
+  cursor: pointer;
+}
+.cv-header-action:disabled { opacity: 0.5; cursor: not-allowed; }
+.dark .cv-header-action { border-color: rgb(71 85 105); color: rgb(226 232 240); }
+
+.cv-header-icon {
+  border: 1px solid rgb(203 213 225);
+  border-radius: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  background: transparent;
+  cursor: pointer;
+  line-height: 1;
+}
+.cv-header-icon--active { background: rgb(241 245 249); border-color: rgb(148 163 184); }
+.cv-header-icon:disabled { opacity: 0.5; cursor: not-allowed; }
+.dark .cv-header-icon { border-color: rgb(71 85 105); }
+.dark .cv-header-icon--active { background: rgb(51 65 85); }
+
+.cv-header-action--primary {
+  background: rgb(37 99 235);
+  border-color: rgb(37 99 235);
+  color: white;
+  font-weight: 500;
+}
+.cv-header-action--danger {
+  background: rgb(239 68 68);
+  border-color: rgb(239 68 68);
+  color: white;
+  font-weight: 500;
+}
+
+.cv-subtab {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: rgb(100 116 139);
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+}
+.cv-subtab--active { color: inherit; font-weight: 500; border-bottom-color: rgb(37 99 235); }
+
+/* Pills de estado da conversa. No stylesheet, como os demais cv-*, para não depender do Tailwind
+   do consumidor. */
+.cv-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  background: rgb(241 245 249);
+  color: rgb(71 85 105);
+}
+.cv-pill--success { background: rgb(220 252 231); color: rgb(21 128 61); }
+.cv-pill--warning { background: rgb(254 243 199); color: rgb(146 64 14); }
+.cv-pill--danger { background: rgb(255 237 213); color: rgb(194 65 12); }
+.dark .cv-pill { background: rgb(51 65 85); color: rgb(203 213 225); }
+.dark .cv-pill--success { background: rgb(20 83 45); color: rgb(187 247 208); }
+.dark .cv-pill--warning { background: rgb(120 53 15); color: rgb(253 230 138); }
+.dark .cv-pill--danger { background: rgb(124 45 18); color: rgb(254 215 170); }
+
+/* Linha da inbox: realce e hover cobrem a linha toda, incluindo checkbox, barra de janela e pills. */
+.cv-row:hover { background: #f0f2f5; }
+.cv-row--active, .cv-row--active:hover { background: #f0f2f5; }
+.dark .cv-row:hover { background: rgb(30 41 59); }
+.dark .cv-row--active, .dark .cv-row--active:hover { background: rgb(30 41 59); }
+
+/* Voltar do master/detail: existe só onde lista e conversa não cabem lado a lado. */
+.cv-back {
+  border: 1px solid rgb(203 213 225);
+  border-radius: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  background: transparent;
+  cursor: pointer;
+  line-height: 1;
+}
+@media (min-width: 1024px) { .cv-back { display: none; } }
+.dark .cv-back { border-color: rgb(71 85 105); color: rgb(226 232 240); }
+
+/* Utilitários de densidade: em tela estreita o texto das ações vira ícone, porque rótulo longo
+   empilha e come a altura útil da conversa. */
+.cv-only-wide { display: none; }
+@media (min-width: 1024px) { .cv-only-wide { display: inline; } }
+.cv-only-narrow { display: inline-flex; }
+@media (min-width: 1024px) { .cv-only-narrow { display: none; } }
+
+.cv-menu { position: relative; }
+.cv-menu-panel {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.25rem);
+  z-index: 20;
+  min-width: 12rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.375rem;
+  border: 1px solid rgb(203 213 225);
+  border-radius: 0.5rem;
+  background: #fff;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+.dark .cv-menu-panel { background: rgb(30 41 59); border-color: rgb(71 85 105); }
+.cv-menu-panel .cv-header-action { text-align: left; }
+
+/* Área de toque mínima do padrão de responsividade (44px). Só em tela estreita: no desktop o
+   cursor é preciso e botões de 44px viram blocos desproporcionais. */
+@media (max-width: 1023px) {
+  .cv-touch { min-width: 44px; min-height: 44px; }
+  .cv-back { min-width: 44px; min-height: 44px; }
+  .cv-menu-panel .cv-touch { min-height: 44px; }
+}
+
+/* Em tela estreita o painel do menu ancora na viewport, não no botão: ancorado ao botão ele
+   escapava pela borda quando o gatilho ficava perto da esquerda, e o texto era cortado. */
+@media (max-width: 1023px) {
+  .cv-menu-panel {
+    position: fixed;
+    right: 0.75rem;
+    left: auto;
+    top: auto;
+    max-width: calc(100vw - 1.5rem);
+  }
+}

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
@@ -39,6 +76,14 @@ export interface MessagePayload {
   readAt?: string
   agentName?: string | null
   templateName?: string
+  /**
+   * Veredito de moderação vindo do backend — a UI só exibe, nunca calcula. Dicionário no browser
+   * seria peso morto e daria veredito diferente por versão de cliente.
+   *
+   * `null`/ausente = não avaliado (moderação desligada, ou mensagem anterior ao recurso), que é
+   * diferente de avaliado e limpo.
+   */
+  moderation?: { isOffensive: boolean; terms: string[] } | null
   isFirstInGroup?: boolean
   isLastInGroup?: boolean
 }

package/src/useDarkMode.ts

@@ -13,6 +13,32 @@ function getInitialDark(): boolean {
   return window.matchMedia('(prefers-color-scheme: dark)').matches
 }
 
+/**
+ * Leitura passiva do tema do host: observa a classe `dark` no `<html>` e não escreve nada.
+ *
+ * Existe porque `useDarkMode` é um controlador — ele grava a classe e persiste a preferência. Um
+ * componente que só precisa escolher cor não pode usá-lo: bastava renderizar o mapa de fluxos
+ * para o app inteiro do host trocar de tema, seguindo o `prefers-color-scheme` do sistema em vez
+ * da configuração da aplicação.
+ */
+export function useIsDarkTheme(): boolean {
+  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
+}
+
 export function useDarkMode(): { isDark: boolean; toggle: () => void } {
   const [isDark, setIsDark] = useState(getInitialDark)
 

package/src/useIsNarrow.ts

@@ -0,0 +1,29 @@
+/**
+ * Detecta tela estreita para decisões que CSS não resolve — como abrir ou não um painel por padrão.
+ *
+ * O breakpoint é o mesmo das classes `cv-only-*` e `.cv-back` (1024px). Duplicado aqui porque
+ * JavaScript não lê media query do stylesheet; se um dia divergirem, o sintoma é painel abrindo
+ * numa largura onde o resto da UI já mudou de modo.
+ */
+
+import { useEffect, useState } from 'react'
+
+export const NARROW_MAX_WIDTH_PX = 1023
+
+export function useIsNarrow(): boolean {
+  const [isNarrow, setIsNarrow] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia(`(max-width: ${NARROW_MAX_WIDTH_PX}px)`).matches,
+  )
+
+  useEffect(() => {
+    const query = window.matchMedia(`(max-width: ${NARROW_MAX_WIDTH_PX}px)`)
+    const handleChange = (event: MediaQueryListEvent): void => setIsNarrow(event.matches)
+
+    query.addEventListener('change', handleChange)
+    setIsNarrow(query.matches)
+
+    return () => query.removeEventListener('change', handleChange)
+  }, [])
+
+  return isNarrow
+}

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 }
 }