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

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

package/src/workspace/ConversationPane.tsx

@@ -5,7 +5,7 @@
  * última mensagem, outro engolia falha de anexo, outro não abria a biblioteca de arquivos.
  */
 
-import { useEffect, useState, type ReactNode } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
 
 import { AudioRecorderButton } from '../AudioRecorderButton'
 import { ConversationContextPanel, type ConversationContextEntry } from '../ConversationContextPanel'
@@ -36,7 +36,8 @@ export interface ConversationPaneProps {
   readonly now: number
   readonly busy: boolean
   readonly labels: ConversationsWorkspaceLabels
-  readonly onTakeover?: (() => void) | undefined
+  /** Devolve a promessa quando o host a tem: o envio de template espera a tomada antes de sair. */
+  readonly onTakeover?: (() => void | Promise<void>) | undefined
   readonly onReturnToBot?: (() => void) | undefined
   readonly onFinish?: (() => void) | undefined
   readonly onBack: () => void
@@ -139,6 +140,9 @@ export function ConversationPane({
   const [selectedMessageIds, setSelectedMessageIds] = useState<ReadonlySet<string>>(new Set())
   const [draft, setDraft] = useState(initialComposerText ?? '')
   const [queuedFiles, setQueuedFiles] = useState<readonly File[]>([])
+  const [isSendingDraft, setIsSendingDraft] = useState(false)
+  /** Ref, não estado: entre dois cliques seguidos o React ainda não teria repintado a trava. */
+  const sendInFlightRef = useRef(false)
 
   // Trocar de conversa zera as duas coisas: seleção de mensagem e rascunho pertencem à thread, e
   // levá-los adiante faria copiar o trecho errado ou responder ao cliente errado.
@@ -187,18 +191,31 @@ export function ConversationPane({
    * Falha vira aviso na tela em vez de exceção silenciosa: o atendente escreveu ou gravou, achou
    * que mandou, e sem retorno não teria como saber que o cliente não recebeu nada.
    */
-  async function runSend(action: () => Promise<unknown>, fallback: string): Promise<void> {
+  /** Devolve se o envio passou: limpar o rascunho depois de uma falha apagaria o texto do operador. */
+  async function runSend(action: () => Promise<unknown>, fallback: string): Promise<boolean> {
     setSendFailure(undefined)
     try {
       await action()
       await refetch()
+      return true
     } catch (error: unknown) {
       setSendFailure(error instanceof Error ? error.message : fallback)
+      return false
     }
   }
 
-  async function handleSend(text: string): Promise<void> {
-    await runSend(() => api.sendMessage(conversation.id, text), labels.sendFailure)
+  async function handleSend(text: string): Promise<boolean> {
+    return runSend(() => api.sendMessage(conversation.id, text), labels.sendFailure)
+  }
+
+  /**
+   * Reabrir a janela é ato de atendente: quem manda o template quer conversar. A tomada vai antes do
+   * envio — se ficasse depois, a resposta do cliente chegaria com a conversa ainda no bot e o fluxo
+   * automático responderia por cima de quem acabou de reabri-la.
+   */
+  async function handleSendTemplate(): Promise<void> {
+    if (conversation.mode !== 'human' && onTakeover) await onTakeover()
+    await runSend(() => api.sendTemplate(conversation.id, {}), labels.sendFailure)
   }
 
   /**
@@ -206,17 +223,28 @@ export function ConversationPane({
    * frase embaixo, e mandar as duas separadas invertia a ordem quando a mídia demorava a subir.
    */
   async function handleRichSend(): Promise<void> {
-    if (onSendAttachments && queuedFiles.length > 0) {
-      const files = queuedFiles
-      const caption = draft
-      await runSend(() => onSendAttachments(files, caption), labels.attachFailure)
-      setQueuedFiles([])
-      setDraft('')
-      return
+    // O upload da mídia demora e não dá retorno na tela; sem esta trava o segundo clique — ou o
+    // Enter impaciente — mandava o mesmo arquivo outra vez.
+    if (sendInFlightRef.current) return
+    sendInFlightRef.current = true
+    setIsSendingDraft(true)
+    try {
+      if (onSendAttachments && queuedFiles.length > 0) {
+        const files = queuedFiles
+        const caption = draft
+        const didSend = await runSend(() => onSendAttachments(files, caption), labels.attachFailure)
+        if (didSend) {
+          setQueuedFiles([])
+          setDraft('')
+        }
+        return
+      }
+      if (!draft.trim()) return
+      if (await handleSend(draft)) setDraft('')
+    } finally {
+      sendInFlightRef.current = false
+      setIsSendingDraft(false)
     }
-    if (!draft.trim()) return
-    await handleSend(draft)
-    setDraft('')
   }
 
   async function handleAttach(file: File): Promise<void> {
@@ -309,10 +337,10 @@ export function ConversationPane({
         <div className="cv-workspace-selection">
           <span>{labels.messagesSelected(selectedMessageIds.size)}</span>
           <div className="cv-workspace-selection__actions">
-            <button type="button" onClick={() => setSelectedMessageIds(new Set())}>
+            <button data-cv-tooltip={labels.bulkClear} aria-label={labels.bulkClear} type="button" onClick={() => setSelectedMessageIds(new Set())}>
               {labels.bulkClear}
             </button>
-            <button type="button" onClick={copySelectedMessages}>
+            <button data-cv-tooltip={labels.copySelected} aria-label={labels.copySelected} type="button" onClick={copySelectedMessages}>
               {labels.copySelected}
             </button>
           </div>
@@ -328,7 +356,7 @@ export function ConversationPane({
       {blocked ? (
         <WindowExpiredNotice
           disabled={busy}
-          onSendTemplate={() => void api.sendTemplate(conversation.id, {}).then(() => refetch())}
+          onSendTemplate={() => void handleSendTemplate()}
         />
       ) : botOwnsConversation ? (
         // Responder com a conversa no bot atropelaria o fluxo automático no meio de uma pergunta.
@@ -348,7 +376,8 @@ export function ConversationPane({
                 }
               : {})}
           placeholder={labels.composerPlaceholder}
-          isSending={busy}
+          isSending={busy || isSendingDraft}
+          hasQueuedAttachments={queuedFiles.length > 0}
           {...(onRecordAudio
             ? {
                 idleAction: (
@@ -367,6 +396,7 @@ export function ConversationPane({
                       <li key={`${file.name}-${index}`}>
                         <span>{file.name}</span>
                         <button
+                          data-cv-tooltip={labels.attachmentRemove}
                           type="button"
                           aria-label={labels.attachmentRemove}
                           onClick={() =>

package/src/workspace/ConversationsInboxList.tsx

@@ -14,6 +14,7 @@ import { WINDOW_FILTERS } from '../conversationWindow'
 import type { ConversationSummary } from '../providers/types'
 import type { ConversationsWorkspaceLabels } from './labels'
 import type { UseConversationsInboxResult } from './useConversationsInbox'
+import { PAGINATION_LABELS } from '../pagination.constant'
 
 export interface ConversationsInboxListProps {
   readonly inbox: UseConversationsInboxResult
@@ -44,16 +45,17 @@ export function ConversationsInboxList({
         <div className="cv-workspace-bulk">
           <span className="cv-workspace-bulk__count">{labels.bulkSelected(inbox.selectedIds.size)}</span>
           <div className="cv-workspace-bulk__actions">
-            <button type="button" onClick={inbox.clearBulkSelection}>
+            <button data-cv-tooltip={labels.bulkClear} aria-label={labels.bulkClear} type="button" onClick={inbox.clearBulkSelection}>
               {labels.bulkClear}
             </button>
             {onSendTemplateToSelected ? (
-              <button type="button" onClick={onSendTemplateToSelected} disabled={inbox.busy}>
+              <button data-cv-tooltip={labels.bulkTemplate} aria-label={labels.bulkTemplate} type="button" onClick={onSendTemplateToSelected} disabled={inbox.busy}>
                 {labels.bulkTemplate}
               </button>
             ) : null}
             {inbox.canFinalize ? (
               <button
+                data-cv-tooltip={labels.bulkFinalize} aria-label={labels.bulkFinalize}
                 type="button"
                 disabled={inbox.busy}
                 onClick={() => {
@@ -89,9 +91,15 @@ export function ConversationsInboxList({
               type="button"
               onClick={() => inbox.setWindowFilter(filter.value)}
               aria-pressed={inbox.windowFilter === filter.value}
-              className={`cv-workspace-chip${inbox.windowFilter === filter.value ? ' cv-workspace-chip--on' : ''}`}
+              data-cv-tooltip={filter.label} aria-label={filter.label}
+              className={[
+                'cv-workspace-chip',
+                filter.tone ? `cv-workspace-chip--${filter.tone}` : '',
+                inbox.windowFilter === filter.value ? 'cv-workspace-chip--on' : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
             >
-              {filter.dotClass ? <span className={`cv-workspace-dot ${filter.dotClass}`} /> : null}
               {filter.label}
             </button>
           ))}
@@ -103,6 +111,7 @@ export function ConversationsInboxList({
             <span className="cv-workspace-chips__legend">{labels.channelLegend}</span>
             {inbox.channelFilters.map((filter) => (
               <button
+                data-cv-tooltip={filter.label} aria-label={filter.label}
                 key={filter.value}
                 type="button"
                 onClick={() => inbox.setChannelFilter(filter.value)}
@@ -150,14 +159,14 @@ export function ConversationsInboxList({
       <div className="cv-workspace-pager">
         <span>{labels.rangeOf(inbox.firstOnPage, inbox.lastOnPage, inbox.filteredCount)}</span>
         <div className="cv-workspace-pager__buttons">
-          <button type="button" onClick={() => inbox.goToPage(1)} disabled={inbox.page === 1} aria-label="Primeira página">
+          <button type="button" onClick={() => inbox.goToPage(1)} disabled={inbox.page === 1} aria-label={PAGINATION_LABELS.first} data-cv-tooltip={PAGINATION_LABELS.first}>
             «
           </button>
           <button
             type="button"
             onClick={() => inbox.goToPage(inbox.page - 1)}
             disabled={inbox.page === 1}
-            aria-label="Página anterior"
+            aria-label={PAGINATION_LABELS.previous} data-cv-tooltip={PAGINATION_LABELS.previous}
           >
             ‹
           </button>
@@ -166,7 +175,7 @@ export function ConversationsInboxList({
             type="button"
             onClick={() => inbox.goToPage(inbox.page + 1)}
             disabled={inbox.page === inbox.pageCount}
-            aria-label="Próxima página"
+            aria-label={PAGINATION_LABELS.next} data-cv-tooltip={PAGINATION_LABELS.next}
           >
             ›
           </button>
@@ -174,7 +183,7 @@ export function ConversationsInboxList({
             type="button"
             onClick={() => inbox.goToPage(inbox.pageCount)}
             disabled={inbox.page === inbox.pageCount}
-            aria-label="Última página"
+            aria-label={PAGINATION_LABELS.last} data-cv-tooltip={PAGINATION_LABELS.last}
           >
             »
           </button>