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

package/dist/preview/index.js

@@ -8,8 +8,8 @@ import {
   DocumentsLibrary,
   MessageBubble,
   MessageComposer
-} from "../chunk-TV4OQRGH.js";
-import "../chunk-2AYDBWNE.js";
+} from "../chunk-UZJBYD5O.js";
+import "../chunk-WCBDXZ3X.js";
 
 // src/preview/previewStore.ts
 var GLOBAL_CHANNEL = "global";
@@ -1059,7 +1059,7 @@ function ConversationSimulatorPanel({
       ] }),
       /* @__PURE__ */ jsxs2("div", { className: "cv-simulator-panel__actions", children: [
         headerActions,
-        /* @__PURE__ */ jsx2("button", { type: "button", onClick: onClose, title: text.close, "aria-label": text.close, className: "cv-simulator-panel__close", children: /* @__PURE__ */ jsx2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18M6 6l12 12" }) }) })
+        /* @__PURE__ */ jsx2("button", { type: "button", onClick: onClose, "data-cv-tooltip": text.close, "aria-label": text.close, className: "cv-simulator-panel__close", children: /* @__PURE__ */ jsx2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18M6 6l12 12" }) }) })
       ] })
     ] }),
     /* @__PURE__ */ jsx2("div", { className: "cv-simulator-panel__body", children: /* @__PURE__ */ jsx2(ConversationPreview, { ...previewProps, placeholder: text.placeholder }) })

package/dist/styles.css

@@ -10,6 +10,9 @@
   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");
 }
 .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;
@@ -26,6 +29,9 @@
   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;
@@ -128,6 +134,9 @@
   background: rgb(30 41 59);
 }
 .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;
@@ -144,6 +153,11 @@
   border-color: rgb(71 85 105);
   color: rgb(226 232 240);
 }
+.cv-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
 .cv-only-wide {
   display: none;
 }
@@ -366,6 +380,9 @@
   gap: 0.5rem;
 }
 .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;
@@ -550,18 +567,26 @@
 }
 .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::-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;
 }
@@ -571,10 +596,53 @@
 .dark .cv-workspace-chip--on {
   background: rgb(51 65 85);
 }
-.cv-workspace-dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 9999px;
+.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;
@@ -913,3 +981,48 @@
 .dark .cv-listing-perpage {
   border-color: rgb(71 85 105);
 }
+.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;
+  }
+}
+.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.26",
+  "version": "0.1.0-rc.28",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -51,7 +51,7 @@
     "@types/react-dom": "^18 || ^19"
   },
   "scripts": {
-    "build": "tsup src/index.ts src/flows/index.ts src/channel/index.ts src/preview/index.ts src/styles.css --dts --format esm --external react --external react-dom --external @xyflow/react",
+    "build": "tsup src/index.ts src/flows/index.ts src/channel/index.ts src/preview/index.ts src/styles.css --dts --clean --format esm --external react --external react-dom --external @xyflow/react",
     "build:watch": "tsup src/index.ts src/flows/index.ts src/channel/index.ts src/styles.css --watch --dts --format esm --external react --external react-dom --external @xyflow/react",
     "check": "tsc -p tsconfig.json --noEmit",
     "test": "bun test"

package/src/AudioPlayer.tsx

@@ -15,6 +15,13 @@ const BARS = Array.from({ length: 30 }, (_, i) => {
   return heights[i % heights.length]
 })
 
+// O player não recebe bag de rótulos do host: são duas palavras, e criar um contrato de labels só
+// para elas custaria mais do que resolve.
+const AUDIO_PLAYER_LABELS = {
+  play: 'Reproduzir',
+  pause: 'Pausar',
+} as const
+
 function fmt(sec: number): string {
   if (!isFinite(sec)) return '0:00'
   const m = Math.floor(sec / 60)
@@ -77,6 +84,7 @@ export function AudioPlayer({ src, isMine = false }: AudioPlayerProps) {
       <audio ref={audioRef} src={src} preload="metadata" />
 
       <button
+        data-cv-tooltip={playing ? AUDIO_PLAYER_LABELS.pause : AUDIO_PLAYER_LABELS.play} aria-label={playing ? AUDIO_PLAYER_LABELS.pause : AUDIO_PLAYER_LABELS.play}
         onClick={toggle}
         className={`flex-shrink-0 w-9 h-9 rounded-full flex items-center justify-center transition-colors ${playBtn}`}
       >

package/src/AudioRecorderButton.test.tsx

@@ -9,8 +9,8 @@ describe('AudioRecorderButton', () => {
   it('começa oferecendo gravar, sem painel de revisão à vista', () => {
     const markup = renderToStaticMarkup(<AudioRecorderButton onRecorded={noop} />)
 
-    expect(markup).toContain(`title="${DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.start}"`)
-    expect(markup).not.toContain(`title="${DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.send}"`)
+    expect(markup).toContain(`data-cv-tooltip="${DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.start}"`)
+    expect(markup).not.toContain(`data-cv-tooltip="${DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.send}"`)
     expect(markup).not.toContain('<audio')
   })
 
@@ -19,7 +19,7 @@ describe('AudioRecorderButton', () => {
       <AudioRecorderButton onRecorded={noop} labels={{ start: 'Gravar recado' }} />,
     )
 
-    expect(markup).toContain('title="Gravar recado"')
+    expect(markup).toContain('data-cv-tooltip="Gravar recado"')
   })
 
   it('mantém a caixa de 40px do botão de enviar para a barra não pular', () => {

package/src/AudioRecorderButton.tsx

@@ -205,7 +205,7 @@ export function AudioRecorderButton({
           <button
             type="button"
             onClick={discard}
-            title={labelOf('discard')}
+            data-cv-tooltip={labelOf('discard')}
             aria-label={labelOf('discard')}
             className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-red-500 dark:hover:bg-gray-700"
           >
@@ -214,7 +214,7 @@ export function AudioRecorderButton({
           <button
             type="button"
             onClick={confirm}
-            title={labelOf('send')}
+            data-cv-tooltip={labelOf('send')}
             aria-label={labelOf('send')}
             className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white transition-colors hover:bg-emerald-600"
           >
@@ -226,7 +226,7 @@ export function AudioRecorderButton({
         type="button"
         disabled={disabled || pending !== undefined}
         onClick={() => (isRecording ? stop() : void start())}
-        title={toggleLabel}
+        data-cv-tooltip={toggleLabel}
         aria-label={toggleLabel}
         aria-pressed={isRecording}
         /* Mesma caixa do botão de enviar: o microfone ocupa o lugar dele enquanto o campo está

package/src/AudioTranscription.tsx

@@ -136,7 +136,7 @@ export function AudioTranscription({ transcription, onTranscribe, isMine = false
         {hasText && (
           <button
             onClick={handleCopy}
-            title={locales.copy}
+            data-cv-tooltip={locales.copy}
             aria-label={hasCopied ? locales.copied : locales.copy}
             className="ml-auto flex flex-shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[11px] text-gray-500 transition-colors hover:bg-black/5 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200"
           >
@@ -182,6 +182,7 @@ export function AudioTranscription({ transcription, onTranscribe, isMine = false
               tela, não sobre o que o operador cola no sistema interno. */}
           {isLong && (
             <button
+              data-cv-tooltip={isExpanded ? locales.showLess : locales.showMore} aria-label={isExpanded ? locales.showLess : locales.showMore}
               onClick={() => setIsExpanded((current) => !current)}
               className="mt-1 text-[11px] font-medium text-gray-500 underline decoration-dotted hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
             >
@@ -194,6 +195,7 @@ export function AudioTranscription({ transcription, onTranscribe, isMine = false
       {/* Retranscrever fica escondido atrás do hover do balão: é ação rara e paga cota de engine. */}
       {onTranscribe && (
         <button
+          data-cv-tooltip={isTranscribing ? locales.transcribing : locales.retry} aria-label={isTranscribing ? locales.transcribing : locales.retry}
           onClick={handleTranscribe}
           disabled={isTranscribing}
           className="mt-1 flex items-center gap-1 text-[11px] text-gray-400 opacity-0 transition-opacity hover:text-gray-600 focus:opacity-100 group-hover:opacity-100 disabled:opacity-50 dark:text-gray-500 dark:hover:text-gray-300"
@@ -234,6 +236,7 @@ function TranscribeButton({
 }) {
   return (
     <button
+      data-cv-tooltip={label} aria-label={label}
       onClick={onClick}
       disabled={isBusy || isDisabled}
       className="flex items-center gap-1.5 rounded px-1.5 py-0.5 text-[11px] text-gray-500 transition-colors hover:bg-black/5 hover:text-gray-700 disabled:opacity-60 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200"

package/src/Avatar.tsx

@@ -81,7 +81,7 @@ export function Avatar({ name, avatarUrl, size = 'md', className = '', labels }:
   return (
     <div
       className={`${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0 ${className}`}
-      title={name}
+      data-cv-tooltip={name}
     >
       {getInitials(name)}
     </div>

package/src/ConversationContextPanel.tsx

@@ -156,7 +156,7 @@ export function ConversationContextPanel({
           type="button"
           onClick={() => setManualOpen(!open)}
           aria-expanded={open}
-          title={open ? labels.collapse : labels.expand}
+          data-cv-tooltip={open ? labels.collapse : labels.expand} aria-label={open ? labels.collapse : labels.expand}
           className={cn(
             'flex w-full cursor-pointer items-center justify-between gap-2 px-4 py-2.5 text-left transition-colors hover:bg-blue-100/40 dark:hover:bg-blue-900/20',
             classNames?.toggle,
@@ -263,7 +263,7 @@ export function ConversationContextPanel({
                             ? 'text-gray-900 dark:text-gray-100'
                             : 'italic font-normal text-gray-400 dark:text-gray-500',
                         )}
-                        title={entry.value ?? labels.notCollected}
+                        data-cv-tooltip={entry.value ?? labels.notCollected}
                       >
                         {entry.value ?? labels.notCollected}
                       </dd>

package/src/ConversationDocumentsPanel.tsx

@@ -13,6 +13,7 @@ import { useConversationDocuments } from './hooks/useConversationDocuments'
 import { useConversations } from './providers/ConversationsProvider'
 import { FileIcon } from './FileIcon'
 import { cn } from './lib/cn'
+import { PAGINATION_LABELS } from './pagination.constant'
 import { formatDateTime, formatFileSize } from './lib/format'
 
 /** Origens que o filtro oferece. `all` não é origem — é a ausência de filtro. */
@@ -239,6 +240,7 @@ export function ConversationDocumentsPanel({
           </select>
 
           <button
+            data-cv-tooltip={sortDirection === 'desc' ? labels.sortMostRecent : labels.sortOldest} aria-label={sortDirection === 'desc' ? labels.sortMostRecent : labels.sortOldest}
             type="button"
             onClick={() => applyFilter(() => setSortDirection(sortDirection === 'desc' ? 'asc' : 'desc'))}
             className={cn('cv-header-action inline-flex items-center gap-1', classNames?.sortButton)}
@@ -250,6 +252,7 @@ export function ConversationDocumentsPanel({
           {/* Só aparece com filtro ativo: botão que não faz nada visível é ruído. */}
           {hasFilters ? (
             <button
+              data-cv-tooltip={labels.clearFilters} aria-label={labels.clearFilters}
               type="button"
               onClick={() =>
                 applyFilter(() => {
@@ -291,7 +294,7 @@ export function ConversationDocumentsPanel({
               {labels.selectAll}
             </label>
             {selectedIds.length > 0 ? (
-              <button type="button" onClick={() => void handleDownloadSelected()} className="cv-header-action">
+              <button data-cv-tooltip={labels.downloadSelected(selectedIds.length)} aria-label={labels.downloadSelected(selectedIds.length)} type="button" onClick={() => void handleDownloadSelected()} className="cv-header-action">
                 {labels.downloadSelected(selectedIds.length)}
               </button>
             ) : null}
@@ -347,7 +350,7 @@ export function ConversationDocumentsPanel({
                     {/* `title` no nome: truncado, o atendente não tem outro jeito de ler inteiro. */}
                     <div
                       className={cn('truncate text-sm font-medium', classNames?.filename)}
-                      title={document.filename}
+                      data-cv-tooltip={document.filename}
                     >
                       {document.filename}
                     </div>
@@ -366,7 +369,7 @@ export function ConversationDocumentsPanel({
                   <button
                     type="button"
                     onClick={() => void handleOpen(document.id, 'inline')}
-                    title={labels.view}
+                    data-cv-tooltip={labels.view}
                     aria-label={`${labels.view}: ${document.filename}`}
                     className={cn('cv-header-icon', classNames?.viewButton)}
                   >
@@ -375,7 +378,7 @@ export function ConversationDocumentsPanel({
                   <button
                     type="button"
                     onClick={() => void handleOpen(document.id, 'attachment')}
-                    title={labels.download}
+                    data-cv-tooltip={labels.download}
                     aria-label={`${labels.download}: ${document.filename}`}
                     className={cn('cv-header-icon', classNames?.downloadButton)}
                   >
@@ -401,7 +404,8 @@ export function ConversationDocumentsPanel({
                 type="button"
                 onClick={() => setPage(page - 1)}
                 disabled={page <= 1}
-                aria-label={labels.sortOldest}
+                aria-label={PAGINATION_LABELS.previous}
+              data-cv-tooltip={PAGINATION_LABELS.previous}
                 className="cv-header-icon disabled:opacity-40"
               >
                 ‹
@@ -411,7 +415,8 @@ export function ConversationDocumentsPanel({
                 type="button"
                 onClick={() => setPage(page + 1)}
                 disabled={page >= lastPage}
-                aria-label={labels.sortMostRecent}
+                aria-label={PAGINATION_LABELS.next}
+              data-cv-tooltip={PAGINATION_LABELS.next}
                 className="cv-header-icon disabled:opacity-40"
               >
                 ›

package/src/ConversationHeader.test.tsx

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ConversationHeader } from './ConversationHeader'
+import type { ConversationSummary } from './providers/types'
+
+const noop = () => {}
+
+const CONVERSATION: ConversationSummary = {
+  id: 'conv-1',
+  clientName: 'Anderson Silva',
+  whatsappNumber: '5511988887777',
+  channel: 'whatsapp',
+  mode: 'human',
+  assignedUserId: null,
+  waitingHuman: false,
+  unread: 0,
+  currentState: 'idle',
+  lastAt: '2026-01-01T12:00:00.000Z',
+  lastInboundAt: null,
+}
+
+describe('ConversationHeader sem medida da faixa', () => {
+  // Sem `ResizeObserver` (SSR e este teste de markup) o cabeçalho nasce completo. O recolhimento é
+  // medido no próprio elemento, e é verificado no navegador.
+  it('mostra utilitários e ações na faixa, sem duplicar no menu', () => {
+    const markup = renderToStaticMarkup(
+      <ConversationHeader
+        conversation={CONVERSATION}
+        onDownload={noop}
+        onOpenDocuments={noop}
+        onReturnToBot={noop}
+        onFinish={noop}
+      />,
+    )
+
+    expect(markup).toContain('aria-label="Baixar conversa"')
+    expect(markup).toContain('aria-label="Finalizar"')
+    expect(markup).not.toContain('aria-label="Mais ações"')
+  })
+
+  it('escreve o canal e o modo por extenso quando há espaço', () => {
+    const markup = renderToStaticMarkup(<ConversationHeader conversation={CONVERSATION} />)
+
+    expect(markup).toContain('atendimento humano')
+  })
+
+  // Emoji desenha diferente em cada sistema e não herda a cor do controle: os ícones do cabeçalho
+  // são SVG da biblioteca, como no resto do produto.
+  it('desenha os ícones como SVG, sem emoji no meio dos rótulos', () => {
+    const markup = renderToStaticMarkup(
+      <ConversationHeader
+        conversation={CONVERSATION}
+        onBack={noop}
+        onDownload={noop}
+        onOpenDocuments={noop}
+        onReturnToBot={noop}
+        onFinish={noop}
+      />,
+    )
+
+    expect(markup).toContain('lucide-download')
+    expect(markup).not.toContain('✕')
+    expect(markup).not.toContain('⬇️')
+  })
+})