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

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>

package/src/workspace/ConversationsWorkspace.tsx

@@ -12,7 +12,9 @@
  */
 
 import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { Check, CheckCheck, FlaskConical, Hourglass, Mail, MessagesSquare } from 'lucide-react'
 
+import { ICON_SIZE_ACTION, ICON_SIZE_INLINE } from '../icon.constant'
 import type { ConversationContextEntry } from '../ConversationContextPanel'
 import type { ConversationHeaderUtility } from '../ConversationHeader'
 import type { QuickReply } from '../MessageComposer'
@@ -23,6 +25,7 @@ import { ConversationPane } from './ConversationPane'
 import { ConversationsInboxList } from './ConversationsInboxList'
 import { DEFAULT_CONVERSATIONS_WORKSPACE_LABELS, type ConversationsWorkspaceLabels } from './labels'
 import { useConversationsInbox, type UseConversationsInboxResult } from './useConversationsInbox'
+import { TooltipLayer } from '../Tooltip'
 
 export interface ConversationsWorkspaceSimulator {
   /**
@@ -32,7 +35,8 @@ export interface ConversationsWorkspaceSimulator {
   render(params: { conversationId: string; close: () => void }): ReactNode
   /** Ausente = ligado. Serve para esconder fora de desenvolvimento sem condicionar o JSX. */
   readonly enabled?: boolean
-  readonly icon?: string
+  /** Ícone da biblioteca (lucide) no utilitário do cabeçalho. Ausente, entra o frasco de teste. */
+  readonly icon?: ReactNode
   readonly label?: string
 }
 
@@ -166,7 +170,7 @@ export function ConversationsWorkspace({
       ...fromProduct,
       {
         key: 'simulator',
-        icon: simulator?.icon ?? '🧪',
+        icon: simulator?.icon ?? <FlaskConical size={ICON_SIZE_ACTION} />,
         label: simulator?.label ?? 'Simular cliente',
         active: simulatorOpen,
         run: () => setSimulatorOpen((open) => !open),
@@ -176,22 +180,23 @@ export function ConversationsWorkspace({
 
   return (
     <div className={`cv-workspace${className ? ` ${className}` : ''}`}>
+      <TooltipLayer />
       {/* Cabeçalho denso em tela estreita: ícone + número. O rótulo escrito ocupava três linhas em
           375px e empurrava a lista para fora da tela. */}
       <header className="cv-workspace-header">
         <div className="cv-workspace-header__titles">
           <h1>{labels.title}</h1>
           <p>
-            <span title={labels.conversations}>
-              💬 {inbox.totalCount}
+            <span data-cv-tooltip={labels.conversations} className="cv-stat">
+              <MessagesSquare size={ICON_SIZE_INLINE} aria-hidden="true" /> {inbox.totalCount}
               <span className="cv-only-wide"> {labels.conversations}</span>
             </span>
-            <span title={labels.waiting} className="cv-workspace-header__waiting">
-              ⏳ {inbox.waitingCount}
+            <span data-cv-tooltip={labels.waiting} className="cv-stat cv-workspace-header__waiting">
+              <Hourglass size={ICON_SIZE_INLINE} aria-hidden="true" /> {inbox.waitingCount}
               <span className="cv-only-wide"> {labels.waiting}</span>
             </span>
-            <span title={labels.unread}>
-              ✉️ {inbox.unreadCount}
+            <span data-cv-tooltip={labels.unread} className="cv-stat">
+              <Mail size={ICON_SIZE_INLINE} aria-hidden="true" /> {inbox.unreadCount}
               <span className="cv-only-wide"> {labels.unread}</span>
             </span>
           </p>
@@ -202,22 +207,24 @@ export function ConversationsWorkspace({
             type="button"
             onClick={() => inbox.setWaitingOnly(!inbox.waitingOnly)}
             aria-pressed={inbox.waitingOnly}
-            title={labels.waitingOnly}
+            data-cv-tooltip={labels.waitingOnly} aria-label={labels.waitingOnly}
             className={inbox.waitingOnly ? 'cv-workspace-toggle cv-workspace-toggle--on' : 'cv-workspace-toggle'}
           >
-            ⏳<span className="cv-only-wide"> {labels.waitingOnly}</span>
+            <Hourglass size={ICON_SIZE_ACTION} aria-hidden="true" />
+            <span className="cv-only-wide">{labels.waitingOnly}</span>
           </button>
           {/* O contador só aparece com seleção: " (0)" era texto morto ao lado do ícone. */}
           <button
             type="button"
             onClick={() => void inbox.markSelectedAsRead()}
             disabled={inbox.selectedIds.size === 0 || inbox.busy}
-            title={labels.markSelectedAsRead}
+            data-cv-tooltip={labels.markSelectedAsRead}
             aria-label={labels.markSelectedAsRead}
             className="cv-workspace-toggle"
           >
-            ✓<span className="cv-only-wide"> {labels.markSelectedAsRead}</span>
-            {inbox.selectedIds.size > 0 ? ` (${inbox.selectedIds.size})` : ''}
+            <Check size={ICON_SIZE_ACTION} aria-hidden="true" />
+            <span className="cv-only-wide">{labels.markSelectedAsRead}</span>
+            {inbox.selectedIds.size > 0 ? <span>({inbox.selectedIds.size})</span> : null}
           </button>
           {/* Só com não lida na tela e só onde o host implementa a rota: sem isso o botão zerava
               nada e ainda assim ocupava o cabeçalho. */}
@@ -226,10 +233,11 @@ export function ConversationsWorkspace({
               type="button"
               onClick={() => void inbox.markAllAsRead()}
               disabled={inbox.busy}
-              title={labels.markAllAsRead}
+              data-cv-tooltip={labels.markAllAsRead} aria-label={labels.markAllAsRead}
               className="cv-workspace-toggle"
             >
-              ✓✓<span className="cv-only-wide"> {labels.markAllAsRead}</span>
+              <CheckCheck size={ICON_SIZE_ACTION} aria-hidden="true" />
+              <span className="cv-only-wide">{labels.markAllAsRead}</span>
             </button>
           ) : null}
           {renderHeaderActions?.(inbox)}
@@ -283,7 +291,7 @@ export function ConversationsWorkspace({
               now={inbox.now}
               busy={inbox.busy}
               labels={labels}
-              {...(inbox.canTakeover ? { onTakeover: () => void inbox.takeover(selected.id) } : {})}
+              {...(inbox.canTakeover ? { onTakeover: () => inbox.takeover(selected.id) } : {})}
               {...(inbox.canTakeover ? { onReturnToBot: () => void inbox.releaseToBot(selected.id) } : {})}
               {...(inbox.canFinalize ? { onFinish: () => void inbox.finalize(selected.id) } : {})}
               {...(flowLabelOf ? { flowLabel: flowLabelOf(selected) } : {})}

package/src/workspace/useConversationsInbox.ts

@@ -265,8 +265,11 @@ export function useConversationsInbox(params: UseConversationsInboxParams = {}):
     selectedConversation: conversations.find((conversation) => conversation.id === selectedId),
     loading,
     now,
-    totalCount: conversations.length,
-    unreadCount: conversations.reduce((total, conversation) => total + conversation.unread, 0),
+    // Com paginação no servidor `conversations` é só a página, então contar o array mostrava o
+    // tamanho da página no lugar do tamanho da base. Não lidas e aguardando seguem sendo da página:
+    // somar a base inteira exige agregado do servidor, que a listagem não devolve.
+    totalCount: params.serverPaginated ? total : conversations.length,
+    unreadCount: conversations.reduce((sum, conversation) => sum + conversation.unread, 0),
     waitingCount: conversations.filter((conversation) => conversation.waitingHuman).length,
     filteredCount: totalForPaging,
     expiredSelectedCount: conversations.filter(