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

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"

package/src/settings/WhatsAppTemplateSettingsForm.tsx

@@ -132,6 +132,7 @@ export function WhatsAppTemplateSettingsForm({
           <div className="flex items-center justify-between mb-1.5">
             <label className="text-sm font-medium text-gray-700 dark:text-gray-300">{labels.templateLabel}</label>
             <button
+              data-cv-tooltip={labels.refreshList} aria-label={labels.refreshList}
               type="button"
               onClick={onRefreshTemplates}
               disabled={loadingTemplates}
@@ -180,6 +181,7 @@ export function WhatsAppTemplateSettingsForm({
           <div className="flex items-center justify-between mb-1.5">
             <label className="text-sm font-medium text-gray-700 dark:text-gray-300">{labels.variablesLabel}</label>
             <button
+              data-cv-tooltip={labels.addVariable} aria-label={labels.addVariable}
               type="button"
               onClick={() => onVariablesChange([...variables, ''])}
               className="flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400 hover:underline"
@@ -198,7 +200,7 @@ export function WhatsAppTemplateSettingsForm({
                     key={available.token}
                     type="button"
                     onClick={() => insertVariable(available.token)}
-                    title={`Inserir ${available.token}`}
+                    data-cv-tooltip={`Inserir ${available.token}`} aria-label={`Inserir ${available.token}`}
                     className="inline-flex items-center gap-1 rounded-md border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs hover:border-blue-400 dark:hover:border-blue-500 transition-colors"
                   >
                     <code className="text-blue-600 dark:text-blue-300">{available.token}</code>
@@ -233,7 +235,7 @@ export function WhatsAppTemplateSettingsForm({
                   type="button"
                   onClick={() => removeVariable(index)}
                   className="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors flex-shrink-0"
-                  title={labels.removeVariable}
+                  data-cv-tooltip={labels.removeVariable} aria-label={labels.removeVariable}
                 >
                   <Trash2 size={14} />
                 </button>
@@ -250,6 +252,7 @@ export function WhatsAppTemplateSettingsForm({
 
         <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 || !selectedTemplateName.trim()}
             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/WhatsAppTemplatesSettings.tsx

@@ -78,6 +78,7 @@ export function WhatsAppTemplatesSettings({
     <div className="space-y-4">
       <nav className="flex gap-1 border-b" role="tablist">
         <button
+          data-cv-tooltip={labels.selectTab} aria-label={labels.selectTab}
           type="button"
           role="tab"
           aria-selected={tab === TEMPLATE_SETTINGS_TAB.SELECT}
@@ -91,6 +92,7 @@ export function WhatsAppTemplatesSettings({
             que não leva a nada. */}
         {create ? (
           <button
+            data-cv-tooltip={labels.createTab} aria-label={labels.createTab}
             type="button"
             role="tab"
             aria-selected={tab === TEMPLATE_SETTINGS_TAB.CREATE}

package/src/styles.css

@@ -22,7 +22,12 @@
 
 /* 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. */
+/* `inline-flex` com gap em todo controle com ícone: o ícone é SVG e, como elemento inline, assentava
+   na baseline do texto — o traço ficava um fio abaixo do rótulo em cada botão. */
 .cv-header-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
   border: 1px solid rgb(203 213 225);
   border-radius: 0.375rem;
   padding: 0.375rem 0.75rem;
@@ -34,6 +39,9 @@
 .dark .cv-header-action { border-color: rgb(71 85 105); color: rgb(226 232 240); }
 
 .cv-header-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid rgb(203 213 225);
   border-radius: 0.5rem;
   padding: 0.375rem 0.5rem;
@@ -100,6 +108,9 @@
 
 /* Voltar do master/detail: existe só onde lista e conversa não cabem lado a lado. */
 .cv-back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid rgb(203 213 225);
   border-radius: 0.5rem;
   padding: 0.25rem 0.5rem;
@@ -110,6 +121,13 @@
 @media (min-width: 1024px) { .cv-back { display: none; } }
 .dark .cv-back { border-color: rgb(71 85 105); color: rgb(226 232 240); }
 
+/* Contador do cabeçalho da inbox: ícone e número na mesma linha de base ótica. */
+.cv-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
 /* 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; }
@@ -328,6 +346,9 @@
 }
 
 .cv-workspace-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
   border: 1px solid rgb(229 231 235);
   border-radius: 0.375rem;
   padding: 0.5rem 0.75rem;
@@ -495,24 +516,48 @@
 }
 .dark .cv-workspace-search { border-color: rgb(71 85 105); color: rgb(226 232 240); }
 
+/* Linha única com rolagem, e não wrap: quebrando, a fila de janelas empurrava a categoria e a
+   lista para baixo toda vez que a coluna estreitava. */
 .cv-workspace-chips {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
   font-size: 0.75rem;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
-.cv-workspace-chips__legend { color: rgb(107 114 128); }
+.cv-workspace-chips::-webkit-scrollbar { display: none; }
+.cv-workspace-chips__legend { color: rgb(107 114 128); flex-shrink: 0; }
 .cv-workspace-chip {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   gap: 0.25rem;
+  white-space: nowrap;
   border-radius: 0.375rem;
   padding: 0.25rem 0.5rem;
 }
 .cv-workspace-chip--on { background: rgb(229 231 235); }
 .dark .cv-workspace-chip--on { background: rgb(51 65 85); }
-.cv-workspace-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; }
+
+/* A cor do próprio rótulo é o estado da janela; selecionado, o mesmo tom vira o fundo. */
+.cv-workspace-chip--fresh { color: rgb(22 163 74); }
+.cv-workspace-chip--warning { color: rgb(202 138 4); }
+.cv-workspace-chip--critical { color: rgb(220 38 38); }
+.cv-workspace-chip--expired { color: rgb(107 114 128); }
+.cv-workspace-chip--fresh.cv-workspace-chip--on { background: rgb(220 252 231); }
+.cv-workspace-chip--warning.cv-workspace-chip--on { background: rgb(254 249 195); }
+.cv-workspace-chip--critical.cv-workspace-chip--on { background: rgb(254 226 226); }
+.cv-workspace-chip--expired.cv-workspace-chip--on { background: rgb(229 231 235); }
+.dark .cv-workspace-chip--fresh { color: rgb(74 222 128); }
+.dark .cv-workspace-chip--warning { color: rgb(250 204 21); }
+.dark .cv-workspace-chip--critical { color: rgb(248 113 113); }
+.dark .cv-workspace-chip--expired { color: rgb(148 163 184); }
+.dark .cv-workspace-chip--fresh.cv-workspace-chip--on { background: rgb(20 83 45); }
+.dark .cv-workspace-chip--warning.cv-workspace-chip--on { background: rgb(113 63 18); }
+.dark .cv-workspace-chip--critical.cv-workspace-chip--on { background: rgb(127 29 29); }
+.dark .cv-workspace-chip--expired.cv-workspace-chip--on { background: rgb(51 65 85); }
 
 .cv-workspace-selectall {
   display: flex;
@@ -842,3 +887,54 @@
   font-size: 0.75rem;
 }
 .dark .cv-listing-perpage { border-color: rgb(71 85 105); }
+
+/* Dica de ação (ver `Tooltip.tsx`). Impressa em `document.body`, então a posição é da janela e o
+   `z-index` fica acima de qualquer painel do produto. */
+.cv-tooltip {
+  position: fixed;
+  z-index: 9999;
+  max-width: min(16rem, 90vw);
+  transform: translate(-50%, -100%);
+  border-radius: 0.375rem;
+  background: rgb(17 24 39 / 95%);
+  padding: 0.3125rem 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1.2;
+  color: #fff;
+  text-align: center;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
+  pointer-events: none;
+  animation: cv-tooltip-in 90ms ease-out;
+}
+
+.cv-tooltip--bottom {
+  transform: translate(-50%, 0);
+}
+
+.dark .cv-tooltip {
+  background: rgb(243 244 246 / 96%);
+  color: rgb(17 24 39);
+}
+
+@keyframes cv-tooltip-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cv-tooltip { animation: none; }
+}
+
+/* Barra de composição: fundo neutro para separar da conversa e para os atalhos e o campo de texto
+   terem contraste próprio. Sobre branco, régua branca e campo cinza-claro se confundiam num bloco
+   só, sem hierarquia. */
+.cv-composer-bar {
+  border-top: 1px solid rgb(229 231 235);
+  background: rgb(240 242 245);
+  padding: 0.625rem 0.75rem;
+}
+
+.dark .cv-composer-bar {
+  border-top-color: rgb(51 65 85);
+  background: rgb(17 24 39);
+}

package/src/workspace/BulkTemplateModal.tsx

@@ -70,7 +70,7 @@ export function BulkTemplateModal({
             <h3>{labels.templateModalTitle}</h3>
             <p>{labels.templateModalAvailable(templates.length)}</p>
           </div>
-          <button type="button" onClick={onClose} aria-label={labels.templateModalCancel}>
+          <button data-cv-tooltip={labels.templateModalCancel} type="button" onClick={onClose} aria-label={labels.templateModalCancel}>
             ✕
           </button>
         </header>
@@ -89,6 +89,7 @@ export function BulkTemplateModal({
           {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
@@ -113,10 +114,11 @@ export function BulkTemplateModal({
         ) : null}
 
         <footer className="cv-workspace-modal__footer">
-          <button type="button" onClick={onClose}>
+          <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)}