@adatechnology/conversations-ui 0.1.0-rc.4 → 0.1.0-rc.41

package/src/workspace/ConversationPane.tsx

@@ -0,0 +1,432 @@
+/**
+ * Coluna do meio: cabeçalho, contexto, documentos, transcript e composer da conversa aberta.
+ *
+ * Era a peça mais copiada entre os produtos, e a que mais divergia: um perdia o salto para a
+ * última mensagem, outro engolia falha de anexo, outro não abria a biblioteca de arquivos.
+ */
+
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+
+import { AudioRecorderButton } from '../AudioRecorderButton'
+import { ConversationContextPanel, type ConversationContextEntry } from '../ConversationContextPanel'
+import { ConversationDocumentsPanel } from '../ConversationDocumentsPanel'
+import { ConversationHeader, type ConversationHeaderUtility } from '../ConversationHeader'
+import { ConversationWallpaper } from '../Wallpaper'
+import { DateDivider } from '../DateDivider'
+import { MessageBubble } from '../MessageBubble'
+import { MessageComposer, applyQuickReplyVariables, type QuickReply } from '../MessageComposer'
+import { RichMessageComposer, type RichComposerVariable } from '../RichMessageComposer'
+import { WindowExpiredNotice, isWindowBlocking } from '../WindowExpiredNotice'
+import { windowOf } from '../conversationWindow'
+import {
+  buildTranscriptFilename,
+  buildTranscriptText,
+  downloadTextFile,
+} from '../conversationTranscript'
+import { useConversationContext } from '../hooks/useConversationContext'
+import { useConversationMessages } from '../hooks/useConversationMessages'
+import { useConversationRealtime } from '../hooks/useConversationRealtime'
+import { useScrollToLatestMessage } from '../hooks/useScrollToLatestMessage'
+import { useConversations } from '../providers/ConversationsProvider'
+import type { ConversationSummary } from '../providers/types'
+import type { ConversationsWorkspaceLabels } from './labels'
+
+export interface ConversationPaneProps {
+  readonly conversation: ConversationSummary
+  readonly now: number
+  readonly busy: boolean
+  readonly labels: ConversationsWorkspaceLabels
+  /** 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
+  readonly extraUtilities?: readonly ConversationHeaderUtility[]
+  /** Traduz o contexto cru do produto nas linhas do painel. Ausente, o painel não aparece. */
+  readonly contextEntriesOf?: (context: Record<string, unknown> | undefined) => readonly ConversationContextEntry[]
+  readonly quickReplies?: readonly QuickReply[]
+  /**
+   * Recebe o contexto junto porque o dado que interessa à variável (o nome que o bot perguntou,
+   * por exemplo) vive no contexto do fluxo, não no resumo da listagem.
+   */
+  readonly quickReplyVariablesFor?: (
+    conversation: ConversationSummary,
+    context: Record<string, unknown> | undefined,
+  ) => Record<string, string>
+  /** Etapa do fluxo ao lado do contexto (ex.: "Anotando o pedido"). */
+  readonly flowLabel?: string | undefined
+  /**
+   * Substitui o download local do transcript. Existe para o produto que exporta pela rota do
+   * servidor, onde o arquivo sai completo em vez de só com o que a tela carregou.
+   */
+  readonly onDownload?: (() => void) | undefined
+  /**
+   * Bloqueia o composer enquanto a conversa estiver com o bot. Ligado, responder sem assumir
+   * atropelaria o fluxo automático no meio de uma pergunta.
+   */
+  readonly requireTakeoverToReply?: boolean
+  /**
+   * Deixa marcar mensagens e copiar o trecho. É o que se faz para levar um pedaço da conversa a um
+   * e-mail ou a um chamado, sem baixar o transcript inteiro.
+   */
+  readonly messageSelection?: boolean
+  /** Texto já no campo ao abrir (deep link que sugere a resposta). */
+  readonly initialComposerText?: string | undefined
+  /**
+   * Peça do produto entre o contexto e o transcript (ex.: ficha do lead, resumo do pedido). Recebe o
+   * contexto do fluxo junto: é dele que sai o resumo, e sem isso o host teria de buscá-lo de novo.
+   */
+  readonly renderAboveTranscript?: (
+    conversation: ConversationSummary,
+    context: Record<string, unknown> | undefined,
+  ) => ReactNode
+  readonly onAttach?: ((file: File) => Promise<void>) | undefined
+  /**
+   * `rich` troca o `textarea` pelo campo com a formatação do WhatsApp desenhada enquanto se escreve.
+   * Vale onde o atendente manda texto longo e formatado; para responder "já vou ver" o campo simples
+   * é menos coisa na tela.
+   */
+  readonly composer?: 'simple' | 'rich'
+  /** Valores que o operador insere sem digitar. Só o composer `rich` os oferece. */
+  readonly composerVariablesFor?: (
+    conversation: ConversationSummary,
+    context: Record<string, unknown> | undefined,
+  ) => readonly RichComposerVariable[]
+  /**
+   * Fila de anexos com legenda, como no WhatsApp: os arquivos escolhidos ficam visíveis acima da
+   * barra e saem junto com o texto escrito. Ausente, o clipe manda cada arquivo na hora — o que
+   * perde a legenda, e era a diferença entre as telas.
+   */
+  readonly onSendAttachments?: (files: readonly File[], caption: string) => Promise<void>
+  /** Grava e envia nota de voz. Ausente, o microfone não aparece. */
+  readonly onRecordAudio?: (file: File) => Promise<void>
+}
+
+export function ConversationPane({
+  conversation,
+  now,
+  busy,
+  labels,
+  onTakeover,
+  onReturnToBot,
+  onFinish,
+  onBack,
+  extraUtilities,
+  contextEntriesOf,
+  quickReplies,
+  quickReplyVariablesFor,
+  flowLabel,
+  onDownload,
+  requireTakeoverToReply,
+  messageSelection,
+  initialComposerText,
+  renderAboveTranscript,
+  onAttach,
+  composer = 'simple',
+  composerVariablesFor,
+  onSendAttachments,
+  onRecordAudio,
+}: ConversationPaneProps) {
+  const context = useConversations()
+  if (!context) {
+    throw new Error('ConversationPane requires an ancestor <ConversationsProvider>')
+  }
+  const { api } = context
+
+  const { messages, refetch } = useConversationMessages(conversation.id)
+  const { context: conversationContext } = useConversationContext(conversation.id)
+  const [documentsOpen, setDocumentsOpen] = useState(false)
+  const [sendFailure, setSendFailure] = useState<string | undefined>(undefined)
+  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.
+  useEffect(() => {
+    setSelectedMessageIds(new Set())
+    setDraft(initialComposerText ?? '')
+    setQueuedFiles([])
+  }, [conversation.id, initialComposerText])
+
+  function toggleMessageSelected(messageId: string): void {
+    setSelectedMessageIds((current) => {
+      const next = new Set(current)
+      if (next.has(messageId)) next.delete(messageId)
+      else next.add(messageId)
+      return next
+    })
+  }
+
+  /** Data, quem falou e o texto: fora do painel o trecho precisa se sustentar sozinho. */
+  function copySelectedMessages(): void {
+    const transcript = messages
+      .filter((message) => selectedMessageIds.has(message.id))
+      .map(
+        (message) =>
+          `[${new Date(message.timestamp).toLocaleString()}] ${message.sender}: ${message.content ?? `(${message.type})`}`,
+      )
+      .join('\n')
+    void navigator.clipboard.writeText(transcript)
+    setSelectedMessageIds(new Set())
+  }
+
+  // Abrir no topo do histórico obrigava a rolar semanas até a última mensagem — que é sempre o que
+  // interessa. O hook salta ao trocar de conversa sem arrastar quem estiver lendo o histórico.
+  const scroll = useScrollToLatestMessage({ conversationId: conversation.id, messageCount: messages.length })
+
+  // O evento traz só `{ direction, sender }` — quem tem o conteúdo é a query.
+  useConversationRealtime(conversation.id, () => {
+    void refetch()
+  })
+
+  const blocked = isWindowBlocking(
+    windowOf({ lastInboundAt: conversation.lastInboundAt, now, channel: conversation.channel }),
+  )
+
+  /**
+   * 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.
+   */
+  /** 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<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)
+  }
+
+  /**
+   * O texto escrito é a legenda do anexo, não uma segunda mensagem: no WhatsApp a foto chega com a
+   * frase embaixo, e mandar as duas separadas invertia a ordem quando a mídia demorava a subir.
+   */
+  async function handleRichSend(): Promise<void> {
+    // 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)
+    }
+  }
+
+  async function handleAttach(file: File): Promise<void> {
+    if (!onAttach) return
+    await runSend(() => onAttach(file), labels.attachFailure)
+  }
+
+  function handleDownload(): void {
+    downloadTextFile(
+      buildTranscriptFilename(conversation.whatsappNumber, new Date()),
+      buildTranscriptText({
+        messages,
+        whatsappNumber: conversation.whatsappNumber,
+        clientName: conversation.clientName,
+      }),
+    )
+  }
+
+  const contextEntries = contextEntriesOf?.(conversationContext)
+  const composerVariables = composerVariablesFor?.(conversation, conversationContext)
+  /**
+   * As mesmas `quickReplies` do composer simples, com as variáveis já resolvidas — o campo rico
+   * recebe texto pronto. Uma segunda lista, só de formato diferente, é como as telas divergiam.
+   */
+  const richQuickReplies = quickReplies?.map((reply) => ({
+    id: reply.key,
+    label: reply.label,
+    text:
+      typeof reply.text === 'string'
+        ? applyQuickReplyVariables(reply.text, quickReplyVariablesFor?.(conversation, conversationContext) ?? {})
+        : reply.text(quickReplyVariablesFor?.(conversation, conversationContext) ?? {}),
+  }))
+  const botOwnsConversation = Boolean(requireTakeoverToReply) && conversation.mode !== 'human'
+
+  return (
+    <div className="cv-workspace-pane">
+      <ConversationHeader
+        conversation={conversation}
+        busy={busy}
+        {...(onTakeover ? { onTakeover } : {})}
+        {...(onReturnToBot ? { onReturnToBot } : {})}
+        {...(onFinish ? { onFinish } : {})}
+        onDownload={onDownload ?? handleDownload}
+        onBack={onBack}
+        onOpenDocuments={() => setDocumentsOpen(!documentsOpen)}
+        documentsOpen={documentsOpen}
+        {...(extraUtilities ? { extraUtilities } : {})}
+      />
+
+      {(contextEntries && contextEntries.length > 0) || flowLabel ? (
+        <ConversationContextPanel entries={contextEntries ?? []} {...(flowLabel ? { flowLabel } : {})} />
+      ) : null}
+      <ConversationDocumentsPanel conversationId={conversation.id} open={documentsOpen} />
+
+      {renderAboveTranscript?.(conversation, conversationContext)}
+
+      {/* Mesmo wallpaper do preview do cliente: atendente e cliente devem ver a conversa com a
+          mesma aparência, senão o preview deixa de ser referência confiável. */}
+      <ConversationWallpaper
+        ref={scroll.containerRef}
+        onScroll={scroll.handleScroll}
+        className="cv-workspace-transcript"
+      >
+        {messages.map((message, index) => {
+          const previous = index > 0 ? messages[index - 1] : undefined
+          const startsNewDay =
+            !previous || new Date(message.timestamp).toDateString() !== new Date(previous.timestamp).toDateString()
+
+          return (
+            <div key={message.id}>
+              {startsNewDay ? <DateDivider iso={message.timestamp} /> : null}
+              <MessageBubble
+                message={message}
+                isMine={message.direction === 'outbound'}
+                isFirstInGroup={!previous || previous.sender !== message.sender}
+                {...(messageSelection
+                  ? {
+                      isSelecting: selectedMessageIds.size > 0,
+                      isSelected: selectedMessageIds.has(message.id),
+                      onToggleSelect: () => toggleMessageSelected(message.id),
+                    }
+                  : {})}
+              />
+            </div>
+          )
+        })}
+      </ConversationWallpaper>
+
+      {messageSelection && selectedMessageIds.size > 0 ? (
+        <div className="cv-workspace-selection">
+          <span>{labels.messagesSelected(selectedMessageIds.size)}</span>
+          <div className="cv-workspace-selection__actions">
+            <button data-cv-tooltip={labels.bulkClear} aria-label={labels.bulkClear} type="button" onClick={() => setSelectedMessageIds(new Set())}>
+              {labels.bulkClear}
+            </button>
+            <button data-cv-tooltip={labels.copySelected} aria-label={labels.copySelected} type="button" onClick={copySelectedMessages}>
+              {labels.copySelected}
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      {sendFailure ? (
+        <p role="alert" className="cv-workspace-alert">
+          {sendFailure}
+        </p>
+      ) : null}
+
+      {blocked ? (
+        <WindowExpiredNotice
+          disabled={busy}
+          onSendTemplate={() => void handleSendTemplate()}
+        />
+      ) : botOwnsConversation ? (
+        // Responder com a conversa no bot atropelaria o fluxo automático no meio de uma pergunta.
+        <p className="cv-workspace-notice">{labels.takeoverToReply}</p>
+      ) : composer === 'rich' ? (
+        <RichMessageComposer
+          value={draft}
+          onChange={setDraft}
+          onSend={() => void handleRichSend()}
+          {...(onSendAttachments
+            ? { onAttachFiles: (files: FileList) => setQueuedFiles((current) => [...current, ...Array.from(files)]) }
+            : onAttach
+              ? {
+                  onAttachFiles: (files: FileList) => {
+                    for (const file of Array.from(files)) void handleAttach(file)
+                  },
+                }
+              : {})}
+          placeholder={labels.composerPlaceholder}
+          isSending={busy || isSendingDraft}
+          hasQueuedAttachments={queuedFiles.length > 0}
+          {...(onRecordAudio
+            ? {
+                idleAction: (
+                  <AudioRecorderButton
+                    onRecorded={(file) => void runSend(() => onRecordAudio(file), labels.recordFailure)}
+                    onFailure={(failureMessage) => setSendFailure(failureMessage)}
+                  />
+                ),
+              }
+            : {})}
+          {...(queuedFiles.length > 0
+            ? {
+                attachmentsPreview: (
+                  <ul className="cv-workspace-attachments">
+                    {queuedFiles.map((file, index) => (
+                      <li key={`${file.name}-${index}`}>
+                        <span>{file.name}</span>
+                        <button
+                          data-cv-tooltip={labels.attachmentRemove}
+                          type="button"
+                          aria-label={labels.attachmentRemove}
+                          onClick={() =>
+                            setQueuedFiles((current) => current.filter((_, position) => position !== index))
+                          }
+                        >
+                          ✕
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                ),
+              }
+            : {})}
+          {...(richQuickReplies ? { quickReplies: [...richQuickReplies] } : {})}
+          {...(composerVariables ? { variables: [...composerVariables] } : {})}
+        />
+      ) : (
+        <MessageComposer
+          value={draft}
+          onChange={setDraft}
+          onSend={(text) => void handleSend(text)}
+          // Habilita clipe E microfone: o composer desenha o gravador sozinho quando existe um jeito
+          // de entregar arquivo, porque áudio gravado é um anexo como qualquer outro.
+          {...(onAttach ? { onAttach: (file: File) => void handleAttach(file) } : {})}
+          placeholder={labels.composerPlaceholder}
+          {...(quickReplies ? { quickReplies } : {})}
+          {...(quickReplyVariablesFor ? { quickReplyVariables: quickReplyVariablesFor(conversation, conversationContext) } : {})}
+        />
+      )}
+    </div>
+  )
+}

package/src/workspace/ConversationsInboxList.tsx

@@ -0,0 +1,194 @@
+/**
+ * Coluna da esquerda: busca, filtros de janela e canal, seleção em massa, linhas e paginação.
+ *
+ * Recebe o resultado do hook inteiro em vez de vinte props: é a mesma máquina de estado, e passar
+ * peça por peça só criaria oportunidade de um produto ligar metade dos controles.
+ */
+
+import type { ReactNode } from 'react'
+
+import { ChannelIcon } from '../ChannelIcon'
+import { ConversationRow } from '../ConversationRow'
+import { CHANNEL_FILTER_ALL } from '../conversationChannel'
+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
+  readonly labels: ConversationsWorkspaceLabels
+  readonly className?: string
+  /** Barra extra do produto acima da lista (ex.: filtro de carteira, seletor de campanha). */
+  readonly renderFilters?: (inbox: UseConversationsInboxResult) => ReactNode
+  /** Ações em lote do produto, ao lado de finalizar e template. */
+  readonly renderBulkActions?: (inbox: UseConversationsInboxResult) => ReactNode
+  readonly renderRow?: (conversation: ConversationSummary) => ReactNode
+  readonly onSendTemplateToSelected?: () => void
+}
+
+export function ConversationsInboxList({
+  inbox,
+  labels,
+  className,
+  renderFilters,
+  renderBulkActions,
+  renderRow,
+  onSendTemplateToSelected,
+}: ConversationsInboxListProps) {
+  const hasSelection = inbox.selectedIds.size > 0
+
+  return (
+    <aside className={className}>
+      {hasSelection ? (
+        <div className="cv-workspace-bulk">
+          <span className="cv-workspace-bulk__count">{labels.bulkSelected(inbox.selectedIds.size)}</span>
+          <div className="cv-workspace-bulk__actions">
+            <button data-cv-tooltip={labels.bulkClear} aria-label={labels.bulkClear} type="button" onClick={inbox.clearBulkSelection}>
+              {labels.bulkClear}
+            </button>
+            {onSendTemplateToSelected ? (
+              <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={() => {
+                  // Confirmação porque finalizar em lote não tem desfazer: encerra o atendimento de
+                  // todas as conversas marcadas de uma vez.
+                  if (window.confirm(labels.bulkFinalizeConfirm(inbox.selectedIds.size))) {
+                    void inbox.finalizeSelected()
+                  }
+                }}
+              >
+                {labels.bulkFinalize}
+              </button>
+            ) : null}
+            {renderBulkActions?.(inbox)}
+          </div>
+        </div>
+      ) : null}
+
+      <div className="cv-workspace-filters">
+        <input
+          type="search"
+          value={inbox.search}
+          onChange={(event) => inbox.setSearch(event.target.value)}
+          placeholder={labels.search}
+          className="cv-workspace-search"
+        />
+
+        <div className="cv-workspace-chips">
+          <span className="cv-workspace-chips__legend">{labels.windowLegend}</span>
+          {WINDOW_FILTERS.map((filter) => (
+            <button
+              key={filter.value}
+              type="button"
+              onClick={() => inbox.setWindowFilter(filter.value)}
+              aria-pressed={inbox.windowFilter === filter.value}
+              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.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Some quando há um canal só: filtro de opção única não filtra nada. */}
+        {inbox.channelFilters.length > 0 ? (
+          <div className="cv-workspace-chips">
+            <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)}
+                aria-pressed={inbox.channelFilter === filter.value}
+                className={`cv-workspace-chip${inbox.channelFilter === filter.value ? ' cv-workspace-chip--on' : ''}`}
+              >
+                {filter.value === CHANNEL_FILTER_ALL ? null : <ChannelIcon channel={filter.value} />}
+                {filter.label}
+              </button>
+            ))}
+          </div>
+        ) : null}
+
+        {renderFilters?.(inbox)}
+
+        <label className="cv-workspace-selectall">
+          <input type="checkbox" checked={inbox.allOnPageSelected} onChange={inbox.toggleSelectAllOnPage} />
+          {labels.selectAll}
+        </label>
+      </div>
+
+      <div className="cv-workspace-rows">
+        {inbox.pageConversations.map((conversation) =>
+          renderRow ? (
+            <div key={conversation.id}>{renderRow(conversation)}</div>
+          ) : (
+            <ConversationRow
+              key={conversation.id}
+              conversation={conversation}
+              active={conversation.id === inbox.selectedId}
+              selected={inbox.selectedIds.has(conversation.id)}
+              now={inbox.now}
+              busy={inbox.busy}
+              onOpen={() => inbox.selectConversation(conversation.id)}
+              onToggleSelected={() => inbox.toggleSelected(conversation.id)}
+              onTakeover={() => void inbox.takeover(conversation.id)}
+            />
+          ),
+        )}
+        {!inbox.loading && inbox.filteredCount === 0 ? (
+          <p className="cv-workspace-empty">{labels.emptyList}</p>
+        ) : null}
+      </div>
+
+      <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={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={PAGINATION_LABELS.previous} data-cv-tooltip={PAGINATION_LABELS.previous}
+          >
+            ‹
+          </button>
+          <span>{labels.pageOf(inbox.page, inbox.pageCount)}</span>
+          <button
+            type="button"
+            onClick={() => inbox.goToPage(inbox.page + 1)}
+            disabled={inbox.page === inbox.pageCount}
+            aria-label={PAGINATION_LABELS.next} data-cv-tooltip={PAGINATION_LABELS.next}
+          >
+            ›
+          </button>
+          <button
+            type="button"
+            onClick={() => inbox.goToPage(inbox.pageCount)}
+            disabled={inbox.page === inbox.pageCount}
+            aria-label={PAGINATION_LABELS.last} data-cv-tooltip={PAGINATION_LABELS.last}
+          >
+            »
+          </button>
+        </div>
+      </div>
+    </aside>
+  )
+}