@adatechnology/conversations-ui 0.1.0-rc.26 → 0.1.0-rc.27

package/src/flows/labels.ts

@@ -21,6 +21,8 @@ export interface FlowEditorLabels {
     question: string
     options: string
     addOption: string
+    removeOption: string
+    close: string
     optionId: string
     optionLabel: string
     next: string
@@ -186,6 +188,8 @@ export const DEFAULT_FLOW_EDITOR_LABELS: FlowEditorLabels = {
     question: 'Texto da pergunta',
     options: 'Opções (choice)',
     addOption: 'Adicionar opção',
+    removeOption: 'Remover opção',
+    close: 'Fechar painel',
     optionId: 'Valor',
     optionLabel: 'Texto exibido',
     next: 'Próximo nó',

package/src/hooks/useContainerWidth.ts

@@ -0,0 +1,35 @@
+/**
+ * Largura do próprio elemento, para decidir layout pelo espaço que ele tem — e não pelo tamanho da
+ * janela.
+ *
+ * Os breakpoints do Tailwind (`sm:`, `lg:`) leem a janela, e é aí que erram nestas telas: abrir a
+ * prévia do simulador, ou a lista de conversas ao lado, estreita a coluna sem a janela mudar de
+ * tamanho. O layout continua achando que está no desktop e espreme o conteúdo flexível — o campo de
+ * texto do composer e o nome do cliente no cabeçalho — para caber os botões, que não cedem.
+ *
+ * `undefined` enquanto não mediu (SSR e teste de markup incluídos): quem consome trata ausência de
+ * medida como espaçoso, que é o layout completo.
+ */
+
+import { useEffect, useState, type RefObject } from 'react'
+
+export function useContainerWidth(ref: RefObject<HTMLElement | null>): number | undefined {
+  const [width, setWidth] = useState<number | undefined>(undefined)
+
+  useEffect(() => {
+    const element = ref.current
+    if (!element || typeof ResizeObserver === 'undefined') return
+
+    // Sempre a mesma medida nos dois caminhos: o `contentRect` do observer desconta o padding e o
+    // `getBoundingClientRect` não. Misturar os dois desloca o limiar pela largura do padding — no
+    // cabeçalho, 32px — e o layout decide uma coisa ao montar e outra ao redimensionar.
+    const measure = () => setWidth(element.getBoundingClientRect().width)
+
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [ref])
+
+  return width
+}

package/src/hooks/useConversationRealtime.ts

@@ -10,14 +10,16 @@ export function useConversationRealtime(
   conversationId: string | undefined,
   onEvent: ConversationRealtimeHandler,
 ): void {
-  const context = useConversations()
+  const sse = useConversations()?.sse
   const onEventRef = useRef(onEvent)
   onEventRef.current = onEvent
 
+  // Depende da porta SSE, não do objeto de contexto inteiro: reabrir o stream é caro (um ticket por
+  // abertura) e o contexto é o que mais muda de identidade quando o host renderiza.
   useEffect(() => {
-    if (!context || !conversationId) return
+    if (!sse || !conversationId) return
 
-    const source = context.sse.connectConversationStream(conversationId)
+    const source = sse.connectConversationStream(conversationId)
     const handler = (event: MessageEvent) => onEventRef.current(event)
     source.addEventListener('message', handler)
 
@@ -25,20 +27,20 @@ export function useConversationRealtime(
       source.removeEventListener('message', handler)
       source.close()
     }
-  }, [context, conversationId])
+  }, [sse, conversationId])
 }
 
 // Assina o stream global (ex: novas conversas entrando na fila, notificações cross-conversa)
 // — mesma porta SSEProvider, sem conversationId.
 export function useGlobalRealtime(onEvent: ConversationRealtimeHandler): void {
-  const context = useConversations()
+  const sse = useConversations()?.sse
   const onEventRef = useRef(onEvent)
   onEventRef.current = onEvent
 
   useEffect(() => {
-    if (!context) return
+    if (!sse) return
 
-    const source = context.sse.connectGlobalStream()
+    const source = sse.connectGlobalStream()
     const handler = (event: MessageEvent) => onEventRef.current(event)
     source.addEventListener('message', handler)
 
@@ -46,5 +48,5 @@ export function useGlobalRealtime(onEvent: ConversationRealtimeHandler): void {
       source.removeEventListener('message', handler)
       source.close()
     }
-  }, [context])
+  }, [sse])
 }

package/src/icon.constant.ts

@@ -0,0 +1,12 @@
+/**
+ * Tamanhos de ícone da UI de conversas, em px, na escala de 4 da grade.
+ *
+ * Ícone vem da biblioteca (lucide), nunca emoji. Emoji desenha diferente em cada sistema
+ * operacional, não herda `currentColor` — então não acompanha o estado do controle (ativo,
+ * desabilitado, variante destrutiva) — e não escala com o token de tipografia. Numa mesma faixa,
+ * metade emoji e metade SVG lê como duas famílias de botão.
+ */
+
+export const ICON_SIZE_PILL = 12
+export const ICON_SIZE_INLINE = 14
+export const ICON_SIZE_ACTION = 16

package/src/index.ts

@@ -28,6 +28,7 @@ export { DateDivider } from './DateDivider'
 export { Avatar, DEFAULT_AVATAR_LABELS } from './Avatar'
 export { ConversationListItem, DEFAULT_CONVERSATION_LIST_ITEM_LABELS } from './ConversationListItem'
 export { ToastProvider, useToast, toast } from './Toast'
+export { TooltipLayer, TOOLTIP_ATTRIBUTE } from './Tooltip'
 
 export { StatusTicks } from './StatusTicks'
 export { Lightbox, DEFAULT_LIGHTBOX_LABELS } from './Lightbox'

package/src/lib/composer-formatting.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'bun:test'
+
+import {
+  FORMATTING_ACTION,
+  FORMATTING_SEPARATOR,
+  activeFormattingIn,
+  canExecuteFormattingCommand,
+  isFormattingActive,
+  toggleFormattingCommand,
+} from './composer-formatting'
+import { ZERO_WIDTH_SPACE, htmlToWA, waToHTML } from './whatsapp-formatting'
+
+describe('isFormattingActive', () => {
+  it('reconhece cada formatação dentro do conjunto ativo', () => {
+    const active = [FORMATTING_ACTION.BOLD, FORMATTING_ACTION.MONOSPACE].join(FORMATTING_SEPARATOR)
+
+    expect(isFormattingActive({ active, action: FORMATTING_ACTION.BOLD })).toBe(true)
+    expect(isFormattingActive({ active, action: FORMATTING_ACTION.MONOSPACE })).toBe(true)
+    expect(isFormattingActive({ active, action: FORMATTING_ACTION.ITALIC })).toBe(false)
+  })
+
+  it('não acende nada quando o conjunto está vazio', () => {
+    expect(isFormattingActive({ active: '', action: FORMATTING_ACTION.BOLD })).toBe(false)
+  })
+})
+
+describe('activeFormattingIn', () => {
+  it('não acende nada quando não há seleção no documento', () => {
+    const editor = { contains: () => false } as unknown as HTMLElement
+
+    expect(activeFormattingIn(editor)).toBe('')
+  })
+})
+
+describe('toggleFormattingCommand', () => {
+  it('avisa que não executou onde o comando não existe, para o campo cair no wrap manual', () => {
+    if (canExecuteFormattingCommand()) return
+    expect(toggleFormattingCommand(FORMATTING_ACTION.BOLD)).toBe(false)
+  })
+
+  it('não tem comando nativo para monoespaçado', () => {
+    expect(toggleFormattingCommand(FORMATTING_ACTION.MONOSPACE)).toBe(false)
+  })
+})
+
+describe('waToHTML dentro do campo editável', () => {
+  it('escreve o tachado como <s>, que é o que o navegador consegue desfazer', () => {
+    expect(waToHTML('~riscado~')).toBe('<s>riscado</s>')
+  })
+
+  it('mantém o ida e volta do tachado', () => {
+    expect(htmlToWA(waToHTML('~riscado~'))).toBe('~riscado~')
+  })
+})
+
+describe('htmlToWA e a âncora do cursor', () => {
+  it('descarta o código que só tem a âncora, para não sair um par de crases vazio', () => {
+    expect(htmlToWA(`oi <code>${ZERO_WIDTH_SPACE}</code>`)).toBe('oi')
+  })
+
+  it('tira a âncora de dentro do código que o operador chegou a preencher', () => {
+    expect(htmlToWA(`<code>${ZERO_WIDTH_SPACE}npm run dev</code>`)).toBe('`npm run dev`')
+  })
+
+  it('não deixa a âncora vazar para o texto enviado', () => {
+    expect(htmlToWA(`oi${ZERO_WIDTH_SPACE} tudo bem`)).toBe('oi tudo bem')
+  })
+})
+
+describe('htmlToWA com a marcação do navegador', () => {
+  it('converte o <strike> do execCommand para o tachado do WhatsApp', () => {
+    expect(htmlToWA('<strike>cancelado</strike>')).toBe('~cancelado~')
+  })
+
+  it('converte o <b> e o <i> do navegador junto com as nossas tags', () => {
+    expect(htmlToWA('<b>oi</b> <i>tudo</i> <strong>bem</strong>')).toBe('*oi* _tudo_ *bem*')
+  })
+})

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

@@ -29,6 +29,7 @@ export function SortableHead({ label, field, activeField, direction, onSort, cla
   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}
@@ -64,6 +65,7 @@ export function MultiSelectFilter({ label, options, selected, onChange, classNam
   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"
@@ -112,7 +114,7 @@ export function BulkActionBar({ selectedCount, selectedLabel, clearLabel, onClea
     <div className="cv-bulk-bar" role="toolbar" aria-label={selectedLabel(selectedCount)}>
       <span className="text-xs font-medium">{selectedLabel(selectedCount)}</span>
       {children}
-      <button type="button" onClick={onClear} className="cv-header-action ml-auto inline-flex items-center gap-1">
+      <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>
@@ -174,6 +176,7 @@ export function ListingPagination({
 
       <div className="flex items-center gap-2">
         <button
+          data-cv-tooltip={labels.previous}
           type="button"
           onClick={() => onPageChange(page - 1)}
           disabled={page <= 1}
@@ -184,6 +187,7 @@ export function ListingPagination({
         </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}

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

package/src/preview/ConversationSimulatorPanel.tsx

@@ -72,7 +72,7 @@ export function ConversationSimulatorPanel({
         </div>
         <div className="cv-simulator-panel__actions">
           {headerActions}
-          <button type="button" onClick={onClose} title={text.close} aria-label={text.close} className="cv-simulator-panel__close">
+          <button type="button" onClick={onClose} data-cv-tooltip={text.close} aria-label={text.close} className="cv-simulator-panel__close">
             {/* SVG inline em vez de lucide-react: o pacote não impõe biblioteca de ícone ao host. */}
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
               <path d="M18 6 6 18M6 6l12 12" />

package/src/providers/ConversationsProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, type ReactNode } from 'react'
+import { createContext, useContext, useMemo, type ReactNode } from 'react'
 import type { ConversationsApi, SSEProvider } from './types'
 
 interface ConversationsContextValue {
@@ -17,11 +17,13 @@ export function ConversationsProvider({
   sse: SSEProvider
   children: ReactNode
 }) {
-  return (
-    <ConversationsContext.Provider value={{ api, sse }}>
-      {children}
-    </ConversationsContext.Provider>
-  )
+  // Objeto novo a cada render fazia todo efeito que depende do contexto reexecutar junto — o do
+  // `useConversationRealtime` fecha e reabre o SSE da conversa, e cada reabertura pede um ticket
+  // novo. Uma tela que renderiza em rajada saturava as 6 conexões do navegador com requisições
+  // pendentes que nunca chegavam a servir para nada.
+  const value = useMemo(() => ({ api, sse }), [api, sse])
+
+  return <ConversationsContext.Provider value={value}>{children}</ConversationsContext.Provider>
 }
 
 export function useConversations(): ConversationsContextValue | null {

package/src/settings/MessagesWorkspace.tsx

@@ -33,6 +33,7 @@ import {
   type TranscriptionSettingsFormLabels,
 } from './TranscriptionSettingsForm'
 import type { TranscriptionMode } from '../types'
+import { TooltipLayer } from '../Tooltip'
 
 export interface BotMessages {
   welcomeMessage: string
@@ -345,6 +346,7 @@ export function MessagesWorkspace({
 
   return (
     <div className={`space-y-6 p-4 lg:p-0 ${className ?? ''}`}>
+      <TooltipLayer />
       <header>
         <h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100">{labels.title}</h1>
         <p className="text-sm text-gray-500 dark:text-gray-400">{labels.subtitle}</p>
@@ -355,6 +357,7 @@ export function MessagesWorkspace({
         <nav className="flex gap-1 border-b border-gray-200 dark:border-gray-700" role="tablist">
           {tabs.map((item) => (
             <button
+              data-cv-tooltip={item.label} aria-label={item.label}
               key={item.id}
               type="button"
               role="tab"

package/src/settings/TopicsForm.tsx

@@ -66,6 +66,7 @@ export function TopicsForm({
                 <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{topic.label}</p>
               </div>
               <button
+                data-cv-tooltip={topic.label} aria-label={topic.label}
                 type="button"
                 onClick={() => onToggle(topic.key)}
                 className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
@@ -94,6 +95,7 @@ export function TopicsForm({
 
         <div className="flex items-center gap-3">
           <button
+            data-cv-tooltip={labels.saveButton} aria-label={labels.saveButton}
             type="submit"
             disabled={saving}
             className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"

package/src/settings/TranscriptionSettingsForm.test.tsx

@@ -76,6 +76,6 @@ describe('TranscriptionSettingsForm', () => {
     const markup = render({ saving: true })
 
     expect(markup).toContain('Salvando...')
-    expect(findTag(markup, /<button type="submit"[^>]*>/g, 'type="submit"')).toContain('disabled')
+    expect(findTag(markup, /<button[^>]*>/g, 'type="submit"')).toContain('disabled')
   })
 })

package/src/settings/TranscriptionSettingsForm.tsx

@@ -132,6 +132,7 @@ export function TranscriptionSettingsForm({
 
         <div className="flex justify-end">
           <button
+            data-cv-tooltip={saving ? labels.saving : labels.save} aria-label={saving ? labels.saving : labels.save}
             type="submit"
             disabled={saving || !isAvailable}
             className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm"

package/src/settings/WelcomeFarewellForm.tsx

@@ -104,6 +104,7 @@ export function WelcomeFarewellForm({
 
         <div className="flex justify-end">
           <button
+            data-cv-tooltip={saving ? labels.saving : labels.save} aria-label={saving ? labels.saving : labels.save}
             type="submit"
             disabled={saving}
             className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm"

package/src/settings/WhatsAppCreateTemplateForm.tsx

@@ -297,6 +297,7 @@ export function WhatsAppCreateTemplateForm({
 
         <div className="flex justify-end">
           <button
+            data-cv-tooltip={submitting ? labels.sending : labels.sendForApproval} aria-label={submitting ? labels.sending : labels.sendForApproval}
             type="submit"
             disabled={submitting || !value.name || !value.bodyText}
             className="flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 disabled:bg-emerald-400 text-white font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm"