@adatechnology/conversations-ui 0.1.0-rc.5 → 0.1.0-rc.7

package/dist/{types-C2Yexi8A.d.ts → types-B5C1DLu1.d.ts}

@@ -1,3 +1,5 @@
+import * as react from 'react';
+
 interface ConversationsUIConfig {
     apiBaseUrl: string;
     theme?: ConversationsTheme;
@@ -17,9 +19,50 @@ interface ConversationsFeatures {
     emoji?: boolean;
     darkMode?: boolean;
 }
+/**
+ * Recorte do bloco `interactive` da Meta que a UI precisa para desenhar o menu. Fica solto (e não
+ * espelhando o contrato inteiro) porque o que chega do banco é o payload cru já enviado ao
+ * WhatsApp: qualquer campo que a UI não conheça é ignorado, nunca causa erro de render.
+ */
+interface InteractiveOption {
+    id: string;
+    title: string;
+    description?: string;
+}
+interface InteractiveSection {
+    title?: string;
+    rows?: InteractiveOption[];
+}
+interface InteractivePayload {
+    type?: 'button' | 'list' | string;
+    header?: {
+        text?: string;
+    };
+    body?: {
+        text?: string;
+    };
+    footer?: {
+        text?: string;
+    };
+    action?: {
+        /** Rótulo do botão que abre a lista — só existe em `type: 'list'`. */
+        button?: string;
+        sections?: InteractiveSection[];
+        buttons?: {
+            reply?: InteractiveOption;
+        }[];
+    };
+}
+/** Como o cliente respondeu a um menu: por botão ou por item de lista. */
+type InteractiveSelection = {
+    readonly kind: 'button' | 'list';
+    readonly option: InteractiveOption;
+};
 interface MessagePayload {
     id: string;
-    type: 'text' | 'image' | 'video' | 'audio' | 'document' | 'sticker' | 'template';
+    type: 'text' | 'image' | 'video' | 'audio' | 'document' | 'sticker' | 'template' | 'interactive';
+    /** Payload cru da mensagem. Em `type: 'interactive'`, carrega o menu que o cliente vê. */
+    payload?: InteractivePayload | null;
     content?: string;
     caption?: string;
     mediaUrl?: string;
@@ -51,6 +94,16 @@ interface MessagePayload {
     isLastInGroup?: boolean;
 }
 
+type ResolveMediaUrl = (message: MessagePayload) => Promise<string | null>;
+interface MediaRendererProps {
+    message: MessagePayload;
+    onLightbox: (src: string) => void;
+    onResolveUrl?: ResolveMediaUrl;
+    /** Aplicado no wrapper de cada tipo de mídia — imagem, vídeo, áudio e documento. */
+    className?: string;
+}
+declare function MediaRenderer({ message, onLightbox, onResolveUrl, className }: MediaRendererProps): react.JSX.Element | null;
+
 /**
  * Canal de origem da conversa e o que cada um permite.
  *
@@ -154,6 +207,14 @@ interface ListDocumentsParams {
     source?: string;
     sortDirection?: 'asc' | 'desc';
 }
+/** Arquivo na biblioteca da empresa: o mesmo da conversa, mais de qual conversa veio. */
+interface CompanyDocument extends ConversationDocument {
+    conversationId: string;
+}
+interface CompanyDocumentPage {
+    documents: CompanyDocument[];
+    total: number;
+}
 interface ConversationDocumentPage {
     documents: ConversationDocument[];
     total: number;
@@ -212,6 +273,13 @@ interface ConversationsApi {
      * lote em vez de oferecer um botão que falha.
      */
     downloadDocumentsArchive?(conversationId: string, uploadIds: readonly string[]): Promise<Blob>;
+    /**
+     * Biblioteca de TODAS as conversas, para uma tela de Documentos fora do atendimento.
+     *
+     * Opcional por capacidade: host que só expõe anexo dentro da conversa não implementa, e o
+     * componente de biblioteca simplesmente não é usável — melhor que uma tela que sempre erra.
+     */
+    getAllDocuments?(params?: ListDocumentsParams): Promise<CompanyDocumentPage>;
     getMediaProxyUrl(mediaId: string): Promise<{
         mimeType: string;
         data: string;
@@ -294,4 +362,4 @@ interface ConversationDocument {
     linkedAt: string;
 }
 
-export { CHANNEL_CAPABILITIES as C, DEFAULT_CONVERSATION_CHANNEL as D, type FormatContactHandleParams as F, HANDLE_KIND as H, type ListConversationsParams as L, type MessagePayload as M, REOPEN_MECHANISM as R, type SSEProvider as S, CHANNEL_FILTER_ALL as a, CONVERSATION_CHANNEL as b, type ChannelCapabilities as c, type ChannelFilter as d, type ChannelFilterOption as e, type ConversationChannel as f, type ConversationDocument as g, type ConversationDocumentPage as h, type ConversationEventSource as i, type ConversationPage as j, type ConversationSummary as k, type ConversationTemplate as l, type ConversationsApi as m, type ConversationsFeatures as n, type ConversationsTheme as o, type ConversationsUIConfig as p, type HandleKind as q, type ListDocumentsParams as r, type ReopenMechanism as s, capabilitiesOf as t, channelFiltersFor as u, contactFlag as v, formatContactHandle as w };
+export { type ResolveMediaUrl as A, capabilitiesOf as B, CHANNEL_CAPABILITIES as C, DEFAULT_CONVERSATION_CHANNEL as D, channelFiltersFor as E, type FormatContactHandleParams as F, contactFlag as G, HANDLE_KIND as H, type InteractiveOption as I, formatContactHandle as J, type ListConversationsParams as L, MediaRenderer as M, REOPEN_MECHANISM as R, type SSEProvider as S, CHANNEL_FILTER_ALL as a, CONVERSATION_CHANNEL as b, type ChannelCapabilities as c, type ChannelFilter as d, type ChannelFilterOption as e, type CompanyDocument as f, type CompanyDocumentPage as g, type ConversationChannel as h, type ConversationDocument as i, type ConversationDocumentPage as j, type ConversationEventSource as k, type ConversationPage as l, type ConversationSummary as m, type ConversationTemplate as n, type ConversationsApi as o, type ConversationsFeatures as p, type ConversationsTheme as q, type ConversationsUIConfig as r, type HandleKind as s, type InteractivePayload as t, type InteractiveSection as u, type InteractiveSelection as v, type ListDocumentsParams as w, type MediaRendererProps as x, type MessagePayload as y, type ReopenMechanism as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.5",
+  "version": "0.1.0-rc.7",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -31,7 +31,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
     "tailwind-merge": "^3.6.0",
-    "@adatechnology/meta-whatsapp-contracts": "0.2.0-rc.5"
+    "@adatechnology/meta-whatsapp-contracts": "0.2.0-rc.6"
   },
   "peerDependencies": {
     "react": "^18 || ^19",

package/src/Avatar.tsx

@@ -1,8 +1,18 @@
+export interface AvatarLabels {
+  /** Lido por leitor de tela quando não há nome nem imagem — a silhueta genérica. */
+  unnamedContact: string
+}
+
 export interface AvatarProps {
   name?: string | null
   avatarUrl?: string
   size?: 'sm' | 'md' | 'lg'
   className?: string
+  labels?: Partial<AvatarLabels>
+}
+
+export const DEFAULT_AVATAR_LABELS: AvatarLabels = {
+  unnamedContact: 'Contato sem nome',
 }
 
 const sizeClasses = {
@@ -36,8 +46,9 @@ function getBgColor(name: string | undefined | null): string {
 
 // Paridade com financiamento-imobiliario-bot/apps/web/src/components/Avatar.tsx —
 // mesmas iniciais (primeira+última letra), mesmo hash de cor, mesmas classes de tamanho.
-export function Avatar({ name, avatarUrl, size = 'md', className = '' }: AvatarProps) {
+export function Avatar({ name, avatarUrl, size = 'md', className = '', labels }: AvatarProps) {
   const sizeClass = sizeClasses[size]
+  const unnamedContactLabel = labels?.unnamedContact ?? DEFAULT_AVATAR_LABELS.unnamedContact
 
   if (avatarUrl) {
     return (
@@ -58,7 +69,7 @@ export function Avatar({ name, avatarUrl, size = 'md', className = '' }: AvatarP
       <div
         className={`${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white flex-shrink-0 ${className}`}
         role="img"
-        aria-label="Contato sem nome"
+        aria-label={unnamedContactLabel}
       >
         <svg viewBox="0 0 24 24" fill="currentColor" className="h-[60%] w-[60%]" aria-hidden>
           <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z" />

package/src/ConversationHeader.tsx

@@ -52,6 +52,20 @@ export interface ConversationHeaderClassNames {
   mobileMenu: string
 }
 
+/**
+ * Utilitário extra que o host pendura no cabeçalho — ícone no desktop, item de menu no celular,
+ * como os nativos. Entra por aqui, e não por um slot de ReactNode, porque é isso que preserva o
+ * comportamento responsivo: um nó solto viraria um quarto ícone em 375px, sem área de toque.
+ */
+export interface ConversationHeaderUtility {
+  key: string
+  /** Emoji, para casar com os utilitários nativos do cabeçalho. */
+  icon: string
+  label: string
+  run: () => void
+  active?: boolean
+}
+
 export interface ConversationHeaderProps {
   conversation: ConversationSummary
   busy?: boolean
@@ -61,6 +75,8 @@ export interface ConversationHeaderProps {
   onDownload?: () => void
   onOpenDocuments?: () => void
   documentsOpen?: boolean
+  /** Ações do produto que não existem no contrato do pacote (ex.: ferramentas de dev). */
+  extraUtilities?: readonly ConversationHeaderUtility[]
   onBack?: () => void
   labels?: Partial<ConversationHeaderLabels>
   className?: string
@@ -76,6 +92,7 @@ export function ConversationHeader({
   onDownload,
   onOpenDocuments,
   documentsOpen = false,
+  extraUtilities,
   onBack,
   labels: labelsOverride,
   className,
@@ -96,6 +113,7 @@ export function ConversationHeader({
       ? { key: 'documents', icon: '📄', label: labels.documents, run: onOpenDocuments, active: documentsOpen }
       : undefined,
     onDownload ? { key: 'download', icon: '⬇️', label: labels.download, run: onDownload, active: false } : undefined,
+    ...(extraUtilities ?? []).map((utility) => ({ ...utility, active: utility.active ?? false })),
   ].filter(
     (utility): utility is { key: string; icon: string; label: string; run: () => void; active: boolean } =>
       Boolean(utility),

package/src/ConversationListItem.tsx

@@ -3,8 +3,21 @@ import { Avatar } from './Avatar'
 import { contactFlag, formatContactHandle } from './conversationChannel'
 import type { ConversationSummary } from './providers/types'
 
+export interface ConversationListItemLabels {
+  /** Tooltip do ponto vermelho: a janela de atendimento de 24h já fechou. */
+  expiredWindow: string
+  /** Tooltip do ponto laranja: a janela de atendimento está perto de fechar. */
+  warningWindow: string
+}
+
+export const DEFAULT_CONVERSATION_LIST_ITEM_LABELS: ConversationListItemLabels = {
+  expiredWindow: 'Janela expirada',
+  warningWindow: 'Janela próxima do fim',
+}
+
 export interface ConversationListItemProps {
   conversation: ConversationSummary
+  labels?: Partial<ConversationListItemLabels>
   active?: boolean
   selected?: boolean
   onClick?: () => void
@@ -92,7 +105,10 @@ export const ConversationListItem = ({
   onSelect,
   showDivider = true,
   highlightActive = true,
+  labels,
 }: ConversationListItemProps) => {
+  const expiredWindowLabel = labels?.expiredWindow ?? DEFAULT_CONVERSATION_LIST_ITEM_LABELS.expiredWindow
+  const warningWindowLabel = labels?.warningWindow ?? DEFAULT_CONVERSATION_LIST_ITEM_LABELS.warningWindow
   const isActive = active || selected
   const windowStatus = useMemo(() => getWindowStatus(conversation.lastInboundAt), [conversation.lastInboundAt])
   const preview = useMemo(() => lastMessagePreview(conversation), [conversation.lastContent])
@@ -134,10 +150,10 @@ export const ConversationListItem = ({
             {!conversation.clientName && flag ? <span aria-hidden>{flag}</span> : null}
             <span className="text-[16px] text-[#111b21] truncate">{name}</span>
             {windowStatus && windowStatus.label === 'expired' && (
-              <span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" title="Janela expirada" />
+              <span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" title={expiredWindowLabel} />
             )}
             {windowStatus && windowStatus.label === 'warning' && (
-              <span className="w-2 h-2 rounded-full bg-orange-500 flex-shrink-0" title="Janela próxima do fim" />
+              <span className="w-2 h-2 rounded-full bg-orange-500 flex-shrink-0" title={warningWindowLabel} />
             )}
           </div>
           {timestamp && (

package/src/DocumentsLibrary.tsx

@@ -0,0 +1,322 @@
+/**
+ * Biblioteca de arquivos de TODAS as conversas — a tela de Documentos do painel, fora do
+ * atendimento.
+ *
+ * Distinta do `ConversationDocumentsPanel`: aquele parte de uma conversa aberta e vive dentro dela;
+ * esta varre a empresa e por isso mostra de qual conversa cada arquivo veio, com o número
+ * clicável. Sem essa referência, uma lista global de anexos não responde nenhuma pergunta.
+ */
+
+import { useEffect, useState } from 'react'
+import { ArrowUpDown, Bot, Download, Eye, MessageSquare, Users } from 'lucide-react'
+import { useConversations } from './providers/ConversationsProvider'
+import { DOCUMENT_SOURCE_FILTER, type DocumentSourceFilter } from './ConversationDocumentsPanel'
+import { FileIcon } from './FileIcon'
+import { cn } from './lib/cn'
+import { formatDateTime, formatFileSize } from './lib/format'
+import { formatPhone } from './lib/phone'
+import type { CompanyDocument } from './providers/types'
+
+export interface DocumentsLibraryLabels {
+  title: string
+  searchPlaceholder: string
+  empty: string
+  noResults: string
+  loading: string
+  failure: string
+  view: string
+  download: string
+  openConversation: string
+  sourceFilterAll: string
+  sourceFilterCustomer: string
+  sourceFilterTeam: string
+  sortMostRecent: string
+  sortOldest: string
+  clearFilters: string
+  total: (count: number) => string
+  page: (current: number, last: number) => string
+}
+
+export const DEFAULT_DOCUMENTS_LIBRARY_LABELS: DocumentsLibraryLabels = {
+  title: 'Documentos',
+  searchPlaceholder: 'Buscar por nome do arquivo ou telefone',
+  empty: 'Nenhum arquivo trocado ainda.',
+  noResults: 'Nenhum arquivo encontrado para os filtros aplicados',
+  loading: 'Carregando arquivos…',
+  failure: 'Não foi possível carregar os arquivos.',
+  view: 'Visualizar',
+  download: 'Baixar',
+  openConversation: 'Abrir conversa',
+  sourceFilterAll: 'Todas as origens',
+  sourceFilterCustomer: 'Cliente',
+  sourceFilterTeam: 'Equipe',
+  sortMostRecent: 'Mais recentes',
+  sortOldest: 'Mais antigos',
+  clearFilters: 'Limpar filtros',
+  total: (count: number) => `${count} arquivo${count === 1 ? '' : 's'}`,
+  page: (current: number, last: number) => `${current} / ${last}`,
+}
+
+export interface DocumentsLibraryClassNames {
+  root: string
+  title: string
+  filters: string
+  search: string
+  sourceSelect: string
+  sortButton: string
+  clearButton: string
+  status: string
+  list: string
+  item: string
+  conversationLink: string
+  filename: string
+  meta: string
+  pagination: string
+}
+
+export interface DocumentsLibraryProps {
+  /** Itens por página. O total vem do servidor. */
+  perPage?: number
+  /** Abrir a conversa de origem. Ausente, o número aparece como texto e não como link. */
+  onOpenConversation?: (conversationId: string) => void
+  labels?: Partial<DocumentsLibraryLabels>
+  className?: string
+  classNames?: Partial<DocumentsLibraryClassNames>
+}
+
+const TEAM_SOURCES = new Set(['agent', 'bot'])
+const DEFAULT_PER_PAGE = 20
+
+export function DocumentsLibrary({
+  perPage = DEFAULT_PER_PAGE,
+  onOpenConversation,
+  labels: labelsOverride,
+  className,
+  classNames,
+}: DocumentsLibraryProps) {
+  const labels = { ...DEFAULT_DOCUMENTS_LIBRARY_LABELS, ...labelsOverride }
+  const context = useConversations()
+  const [search, setSearch] = useState('')
+  const [sourceFilter, setSourceFilter] = useState<DocumentSourceFilter>(DOCUMENT_SOURCE_FILTER.ALL)
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc')
+  const [page, setPage] = useState(1)
+  const [documents, setDocuments] = useState<readonly CompanyDocument[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(false)
+  const [failed, setFailed] = useState(false)
+
+  const hasFilters = search !== '' || sourceFilter !== DOCUMENT_SOURCE_FILTER.ALL || sortDirection !== 'desc'
+  const lastPage = Math.max(1, Math.ceil(total / perPage))
+  const fetchAll = context?.api.getAllDocuments
+
+  useEffect(() => {
+    if (!fetchAll) return
+    let active = true
+    setLoading(true)
+    setFailed(false)
+
+    void fetchAll({
+      search,
+      page,
+      limit: perPage,
+      sortDirection,
+      ...(sourceFilter === DOCUMENT_SOURCE_FILTER.ALL ? {} : { source: sourceFilter }),
+    })
+      .then((result) => {
+        // `active` evita que uma resposta antiga sobrescreva a nova: digitar rápido na busca dispara
+        // várias chamadas e a ordem de retorno não é garantida.
+        if (!active) return
+        setDocuments(result.documents)
+        setTotal(result.total)
+      })
+      .catch(() => {
+        if (active) setFailed(true)
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+
+    return () => {
+      active = false
+    }
+  }, [fetchAll, search, sourceFilter, sortDirection, page, perPage])
+
+  function applyFilter(change: () => void): void {
+    change()
+    setPage(1)
+  }
+
+  async function handleOpen(uploadId: string, disposition: 'inline' | 'attachment'): Promise<void> {
+    const url = await context?.api.getDocumentUrl(uploadId, disposition)
+    if (url) window.open(url, '_blank', 'noopener,noreferrer')
+  }
+
+  // Host sem `getAllDocuments` não tem o que mostrar aqui — some, em vez de renderizar vazio para
+  // sempre e fazer parecer que a empresa não tem arquivo nenhum.
+  if (!fetchAll) return null
+
+  return (
+    <div className={cn('space-y-3', classNames?.root, className)}>
+      <h2 className={cn('text-lg font-semibold', classNames?.title)}>{labels.title}</h2>
+
+      <div className={cn('flex flex-wrap items-center gap-2', classNames?.filters)}>
+        <input
+          type="search"
+          value={search}
+          onChange={(event) => applyFilter(() => setSearch(event.target.value))}
+          placeholder={labels.searchPlaceholder}
+          aria-label={labels.searchPlaceholder}
+          className={cn('w-full rounded-md border px-3 py-2 text-sm sm:w-64', classNames?.search)}
+        />
+
+        <select
+          value={sourceFilter}
+          onChange={(event) => applyFilter(() => setSourceFilter(event.target.value as DocumentSourceFilter))}
+          aria-label={labels.sourceFilterAll}
+          className={cn('w-full rounded-md border px-2 py-2 text-sm sm:w-40', classNames?.sourceSelect)}
+        >
+          <option value={DOCUMENT_SOURCE_FILTER.ALL}>{labels.sourceFilterAll}</option>
+          <option value={DOCUMENT_SOURCE_FILTER.CUSTOMER}>{labels.sourceFilterCustomer}</option>
+          <option value={DOCUMENT_SOURCE_FILTER.TEAM}>{labels.sourceFilterTeam}</option>
+        </select>
+
+        <button
+          type="button"
+          onClick={() => applyFilter(() => setSortDirection(sortDirection === 'desc' ? 'asc' : 'desc'))}
+          className={cn('cv-header-action inline-flex items-center gap-1', classNames?.sortButton)}
+        >
+          <ArrowUpDown size={14} />
+          {sortDirection === 'desc' ? labels.sortMostRecent : labels.sortOldest}
+        </button>
+
+        {hasFilters ? (
+          <button
+            type="button"
+            onClick={() =>
+              applyFilter(() => {
+                setSearch('')
+                setSourceFilter(DOCUMENT_SOURCE_FILTER.ALL)
+                setSortDirection('desc')
+              })
+            }
+            className={cn('cv-header-action', classNames?.clearButton)}
+          >
+            {labels.clearFilters}
+          </button>
+        ) : null}
+      </div>
+
+      {loading ? <p className={cn('text-sm text-gray-500', classNames?.status)}>{labels.loading}</p> : null}
+      {failed ? (
+        <p role="alert" className={cn('text-sm text-red-600 dark:text-red-400', classNames?.status)}>
+          {labels.failure}
+        </p>
+      ) : null}
+      {!loading && !failed && documents.length === 0 ? (
+        <p className={cn('text-sm text-gray-500', classNames?.status)}>
+          {hasFilters ? labels.noResults : labels.empty}
+        </p>
+      ) : null}
+
+      <ul className={cn('space-y-2', classNames?.list)}>
+        {documents.map((document) => {
+          const isFromCustomer = !TEAM_SOURCES.has(document.source)
+          const SourceIcon = isFromCustomer ? Users : Bot
+
+          return (
+            <li
+              key={`${document.conversationId}:${document.id}`}
+              className={cn(
+                'flex items-center justify-between gap-3 rounded-lg border px-3 py-2 dark:border-gray-700',
+                classNames?.item,
+              )}
+            >
+              <div className="flex min-w-0 flex-1 items-center gap-3">
+                <FileIcon filename={document.filename} mimeType={document.mimeType} />
+                <div className="min-w-0 flex-1">
+                  <div className={cn('truncate text-sm font-medium', classNames?.filename)} title={document.filename}>
+                    {document.filename}
+                  </div>
+                  <div className={cn('flex flex-wrap items-center gap-x-2 text-xs text-gray-500', classNames?.meta)}>
+                    <span className="inline-flex items-center gap-1">
+                      <SourceIcon size={11} />
+                      {isFromCustomer ? labels.sourceFilterCustomer : labels.sourceFilterTeam}
+                    </span>
+                    <span>·</span>
+                    <span>{formatDateTime(document.linkedAt)}</span>
+                    <span>·</span>
+                    <span>{formatFileSize(document.sizeBytes)}</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* A conversa de origem é o dado que só esta tela tem. Vira botão quando o host sabe
+                  navegar; sem handler, fica texto — link que não leva a lugar nenhum é pior. */}
+              {onOpenConversation ? (
+                <button
+                  type="button"
+                  onClick={() => onOpenConversation(document.conversationId)}
+                  title={labels.openConversation}
+                  className={cn('cv-header-action inline-flex shrink-0 items-center gap-1', classNames?.conversationLink)}
+                >
+                  <MessageSquare size={12} />
+                  {formatPhone(document.conversationId)}
+                </button>
+              ) : (
+                <span className={cn('shrink-0 text-xs text-gray-500', classNames?.conversationLink)}>
+                  {formatPhone(document.conversationId)}
+                </span>
+              )}
+
+              <div className="flex shrink-0 gap-1">
+                <button
+                  type="button"
+                  onClick={() => void handleOpen(document.id, 'inline')}
+                  title={labels.view}
+                  aria-label={`${labels.view}: ${document.filename}`}
+                  className="cv-header-icon"
+                >
+                  <Eye size={14} />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => void handleOpen(document.id, 'attachment')}
+                  title={labels.download}
+                  aria-label={`${labels.download}: ${document.filename}`}
+                  className="cv-header-icon"
+                >
+                  <Download size={14} />
+                </button>
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+
+      {total > perPage ? (
+        <div className={cn('flex items-center justify-between border-t pt-2 text-xs dark:border-gray-700', classNames?.pagination)}>
+          <span className="text-gray-400">{labels.total(total)}</span>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setPage(page - 1)}
+              disabled={page <= 1}
+              className="cv-header-icon disabled:opacity-40"
+            >
+              ‹
+            </button>
+            <span className="text-gray-500">{labels.page(page, lastPage)}</span>
+            <button
+              type="button"
+              onClick={() => setPage(page + 1)}
+              disabled={page >= lastPage}
+              className="cv-header-icon disabled:opacity-40"
+            >
+              ›
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}