npm - @adatechnology/conversations-ui - Versions diffs - 0.1.0-rc.4 → 0.1.0-rc.41 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/dist/ConversationSimulatorPanel--5fIzXWY.d.ts +804 -0
package/dist/chunk-BJNRLLDO.js +2708 -0
package/dist/chunk-DKPXKQGC.js +110 -0
package/dist/{chunk-OGRRHQQW.js → chunk-WCBDXZ3X.js} +68 -4
package/dist/flows/index.d.ts +422 -5
package/dist/flows/index.js +2389 -678
package/dist/index.d.ts +1171 -42
package/dist/index.js +3755 -843
package/dist/preview/index.d.ts +157 -42
package/dist/preview/index.js +772 -191
package/dist/styles.css +893 -0
package/package.json +9 -8
package/src/AudioPlayer.tsx +8 -0
package/src/AudioRecorderButton.test.tsx +30 -0
package/src/AudioRecorderButton.tsx +248 -0
package/src/AudioTranscription.test.tsx +115 -0
package/src/AudioTranscription.tsx +252 -0
package/src/Avatar.tsx +14 -3
package/src/ConversationContextPanel.tsx +218 -44
package/src/ConversationDocumentsPanel.tsx +347 -24
package/src/ConversationHeader.test.tsx +66 -0
package/src/ConversationHeader.tsx +163 -45
package/src/ConversationListItem.tsx +19 -2
package/src/ConversationLocalesProvider.tsx +28 -0
package/src/ConversationRow.tsx +31 -7
package/src/DarkModeToggle.test.tsx +76 -0
package/src/DarkModeToggle.tsx +92 -0
package/src/DocumentsLibrary.tsx +382 -0
package/src/EmojiPicker.tsx +70 -55
package/src/FileIcon.test.ts +83 -0
package/src/FileIcon.tsx +88 -11
package/src/InteractiveMessage.test.tsx +41 -0
package/src/InteractiveMessage.tsx +146 -0
package/src/Lightbox.tsx +18 -3
package/src/MediaRenderer.tsx +92 -16
package/src/MessageBubble.test.tsx +41 -0
package/src/MessageBubble.tsx +75 -6
package/src/MessageComposer.test.tsx +35 -0
package/src/MessageComposer.tsx +155 -19
package/src/RichMessageComposer.test.tsx +113 -0
package/src/RichMessageComposer.tsx +551 -0
package/src/SimpleEmojiPicker.tsx +5 -3
package/src/StatusTicks.tsx +1 -1
package/src/Toast.tsx +4 -0
package/src/Tooltip.test.ts +42 -0
package/src/Tooltip.tsx +167 -0
package/src/Wallpaper.test.tsx +21 -0
package/src/Wallpaper.tsx +67 -7
package/src/WhatsAppMessageEditor.tsx +34 -7
package/src/WindowExpiredNotice.tsx +12 -4
package/src/audioRecorderFormat.test.ts +67 -0
package/src/buildOutput.test.ts +79 -0
package/src/composer.constant.ts +33 -0
package/src/conversationTranscript.test.ts +57 -0
package/src/conversationTranscript.ts +29 -4
package/src/conversationWindow.ts +7 -5
package/src/documentTypeLabel.test.ts +57 -0
package/src/documents/DocumentsWorkspace.tsx +550 -0
package/src/documents/index.ts +8 -0
package/src/documents/labels.ts +92 -0
package/src/emojiCatalog.test.ts +35 -0
package/src/emojiCatalog.ts +189 -0
package/src/flows/FlowConnectionEdge.tsx +104 -0
package/src/flows/FlowGroupHeader.tsx +12 -2
package/src/flows/FlowLegend.tsx +125 -0
package/src/flows/FlowMapCanvas.tsx +15 -12
package/src/flows/FlowMapNode.tsx +4 -1
package/src/flows/FlowNodeCard.tsx +219 -34
package/src/flows/FlowNodePanel.tsx +153 -39
package/src/flows/FlowPalette.tsx +106 -69
package/src/flows/FlowPortalNode.tsx +1 -1
package/src/flows/FlowWhatsAppPreview.tsx +14 -3
package/src/flows/FlowsWorkspace.tsx +1219 -0
package/src/flows/flowCanvasModel.test.ts +456 -0
package/src/flows/flowCanvasModel.ts +378 -0
package/src/flows/flowEditorOps.test.ts +276 -0
package/src/flows/flowEditorOps.ts +202 -0
package/src/flows/flowGraph.ts +78 -53
package/src/flows/index.ts +51 -2
package/src/flows/labels.ts +180 -0
package/src/flows/workspaceContract.test.ts +126 -0
package/src/hooks/useContainerWidth.ts +35 -0
package/src/hooks/useConversationActions.ts +56 -0
package/src/hooks/useConversationDocuments.ts +11 -7
package/src/hooks/useConversationList.ts +15 -9
package/src/hooks/useConversationMessages.ts +2 -2
package/src/hooks/useConversationRealtime.ts +10 -8
package/src/hooks/useScrollToLatestMessage.ts +127 -0
package/src/hooks/useUrlFilterState.ts +107 -0
package/src/icon.constant.ts +12 -0
package/src/index.ts +129 -13
package/src/lib/cn.test.ts +29 -0
package/src/lib/composer-formatting.test.ts +78 -0
package/src/lib/composer-formatting.ts +145 -0
package/src/lib/createMediaUrlResolver.ts +33 -0
package/src/lib/paginated.test.ts +33 -0
package/src/lib/paginated.ts +26 -0
package/src/lib/whatsapp-formatting.test.tsx +37 -0
package/src/lib/whatsapp-formatting.tsx +28 -3
package/src/listing/index.tsx +202 -0
package/src/pagination.constant.ts +10 -0
package/src/preview/ConversationPreview.tsx +225 -17
package/src/preview/ConversationSimulatorClient.ts +143 -0
package/src/preview/ConversationSimulatorPanel.test.tsx +55 -0
package/src/preview/ConversationSimulatorPanel.tsx +131 -0
package/src/preview/MediaTypesPreview.tsx +87 -0
package/src/preview/conversationPreviewFailures.test.ts +64 -0
package/src/preview/createMockConversationsApi.ts +175 -15
package/src/preview/createPreviewBridgeClient.test.ts +92 -0
package/src/preview/createPreviewBridgeClient.ts +124 -0
package/src/preview/createPreviewMediaUploader.ts +82 -0
package/src/preview/createPreviewWebhookClient.test.ts +96 -0
package/src/preview/createPreviewWebhookClient.ts +127 -4
package/src/preview/index.ts +51 -3
package/src/preview/mediaTypeOf.test.ts +15 -0
package/src/preview/mockDocumentsSearch.test.ts +57 -0
package/src/preview/preview.test.ts +5 -3
package/src/preview/previewFileSamples.test.ts +151 -0
package/src/preview/previewFileSamples.ts +74 -0
package/src/preview/previewFixtures.ts +288 -1
package/src/preview/previewMediaSource.test.ts +62 -0
package/src/preview/previewMediaSource.ts +91 -0
package/src/preview/previewMediaUploader.test.ts +61 -0
package/src/providers/ConversationsProvider.tsx +8 -6
package/src/providers/types.ts +185 -10
package/src/quickReply.test.ts +58 -0
package/src/settings/MessagesWorkspace.tsx +571 -0
package/src/settings/TopicsForm.tsx +2 -0
package/src/settings/TranscriptionSettingsForm.test.tsx +81 -0
package/src/settings/TranscriptionSettingsForm.tsx +190 -0
package/src/settings/WelcomeFarewellForm.tsx +1 -0
package/src/settings/WhatsAppCreateTemplateForm.tsx +4 -1
package/src/settings/WhatsAppTemplateSettingsForm.tsx +5 -2
package/src/settings/WhatsAppTemplatesSettings.test.tsx +61 -0
package/src/settings/WhatsAppTemplatesSettings.tsx +22 -2
package/src/styles.css +858 -0
package/src/types.ts +64 -1
package/src/useWaitingNotifications.ts +74 -29
package/src/workspace/BulkTemplateModal.tsx +132 -0
package/src/workspace/ConversationPane.tsx +432 -0
package/src/workspace/ConversationsInboxList.tsx +194 -0
package/src/workspace/ConversationsWorkspace.tsx +423 -0
package/src/workspace/index.ts +17 -0
package/src/workspace/labels.test.ts +17 -0
package/src/workspace/labels.ts +85 -0
package/src/workspace/useConversationsInbox.ts +332 -0
package/dist/chunk-4R6Y43DQ.js +0 -726
package/dist/chunk-NV2RZ5KT.js +0 -56
package/dist/types-C0PtaO7S.d.ts +0 -207

package/src/DarkModeToggle.tsx ADDED Viewed

@@ -0,0 +1,92 @@
+import { Moon, Sun } from 'lucide-react'
+import { cn } from './lib/cn'
+import { ICON_SIZE_ACTION } from './icon.constant'
+export interface DarkModeToggleLabels {
+  /** Ação de ir para o tema escuro — é o rótulo lido enquanto o tema claro está ativo. */
+  toDark: string
+  toLight: string
+}
+export interface DarkModeToggleClassNames {
+  /** O tamanho do ícone vem daqui quando o host usa a própria escala (`size-4`, `size-5`). */
+  icon?: string
+  label?: string
+}
+export interface DarkModeToggleProps {
+  isDark: boolean
+  onToggle: () => void
+  /** Rótulo ao lado do ícone. Só-ícone exige a área de toque mínima, que a classe `cv-touch` dá. */
+  showLabel?: boolean
+  labels?: Partial<DarkModeToggleLabels>
+  /**
+   * Substitui a aparência do botão. As classes passam por `tailwind-merge`, então utilitário do
+   * host vence o do pacote em vez de somar: `px-4` descarta o `px-3` daqui.
+   *
+   * A exceção é utilitário de token do host (`rounded-panel`), que o merge não reconhece como
+   * família e deixa passar junto com o `rounded-lg` do pacote — aí quem decide é a ordem no CSS
+   * gerado, não a do atributo. Nesse caso use a forma arbitrária (`rounded-[var(--radius-panel)]`),
+   * que o merge entende e substitui.
+   */
+  className?: string
+  classNames?: DarkModeToggleClassNames
+}
+export const DEFAULT_DARK_MODE_TOGGLE_LABELS: DarkModeToggleLabels = {
+  toDark: 'Tema escuro',
+  toLight: 'Tema claro',
+}
+/**
+ * Interruptor de tema, apresentacional: o estado vem do host, junto com `useDarkMode`.
+ *
+ * Ele não monta o hook de propósito. `useDarkMode` é o controlador — escreve a classe `dark` no
+ * `<html>` e persiste a escolha —, e uma barra lateral que também existe como gaveta fica montada
+ * duas vezes na mesma tela. Dois controladores guardam estados iniciais separados, e o segundo
+ * botão passa a mostrar o ícone contrário ao tema que está no ar. Com o estado no host, o hook é
+ * chamado uma vez acima dos dois e as duas cópias concordam.
+ *
+ * O rótulo nomeia o destino, não o estado atual: no claro se lê "Tema escuro", que é o que o clique
+ * faz. `aria-pressed` diria o oposto na mesma frase, então fica de fora.
+ */
+export function DarkModeToggle({
+  isDark,
+  onToggle,
+  showLabel = false,
+  labels,
+  className,
+  classNames,
+}: DarkModeToggleProps) {
+  const label = isDark
+    ? (labels?.toLight ?? DEFAULT_DARK_MODE_TOGGLE_LABELS.toLight)
+    : (labels?.toDark ?? DEFAULT_DARK_MODE_TOGGLE_LABELS.toDark)
+  const Icon = isDark ? Sun : Moon
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      data-cv-tooltip={showLabel ? undefined : label}
+      aria-label={label}
+      className={cn(
+        'inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-600 transition-colors',
+        'hover:bg-gray-100 hover:text-gray-900',
+        'dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100',
+        !showLabel && 'cv-touch',
+        className,
+      )}
+    >
+      {/* Sem `size` quando o host manda classe: a prop vira `width`/`height` no SVG e atributo
+          ganha da folha, deixando o ícone fora da escala de tipografia do host. */}
+      <Icon
+        aria-hidden="true"
+        className={cn('shrink-0', classNames?.icon)}
+        size={classNames?.icon ? undefined : ICON_SIZE_ACTION}
+      />
+      {showLabel ? <span className={classNames?.label}>{label}</span> : null}
+    </button>
+  )
+}

package/src/DocumentsLibrary.tsx ADDED Viewed

@@ -0,0 +1,382 @@
+/**
+ * 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, useRef, useState } from 'react'
+import { ArrowUpDown, Bot, Download, Eye, MessageSquare, Upload, 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 { PAGINATION_LABELS } from './pagination.constant'
+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
+  upload: string
+  uploadError: 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',
+  upload: 'Enviar documento',
+  uploadError: 'Não foi possível enviar o arquivo.',
+  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 [uploading, setUploading] = useState(false)
+  const [uploadFailed, setUploadFailed] = useState(false)
+  const [reloadToken, setReloadToken] = useState(0)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const hasFilters = search !== '' || sourceFilter !== DOCUMENT_SOURCE_FILTER.ALL || sortDirection !== 'desc'
+  const lastPage = Math.max(1, Math.ceil(total / perPage))
+  const fetchAll = context?.api.getAllDocuments
+  const uploadDocument = context?.api.uploadDocument
+  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, reloadToken])
+  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')
+  }
+  async function handleUpload(file: File): Promise<void> {
+    if (!uploadDocument) return
+    setUploading(true)
+    setUploadFailed(false)
+    try {
+      await uploadDocument(file)
+      setReloadToken((token) => token + 1)
+    } catch {
+      setUploadFailed(true)
+    } finally {
+      setUploading(false)
+    }
+  }
+  // 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
+          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)}
+        >
+          <ArrowUpDown size={14} />
+          {sortDirection === 'desc' ? labels.sortMostRecent : labels.sortOldest}
+        </button>
+        {hasFilters ? (
+          <button
+            data-cv-tooltip={labels.clearFilters} aria-label={labels.clearFilters}
+            type="button"
+            onClick={() =>
+              applyFilter(() => {
+                setSearch('')
+                setSourceFilter(DOCUMENT_SOURCE_FILTER.ALL)
+                setSortDirection('desc')
+              })
+            }
+            className={cn('cv-header-action', classNames?.clearButton)}
+          >
+            {labels.clearFilters}
+          </button>
+        ) : null}
+        {uploadDocument ? (
+          <>
+            <input
+              ref={fileInputRef}
+              type="file"
+              hidden
+              onChange={(event) => {
+                const file = event.target.files?.[0]
+                event.target.value = ''
+                if (file) void handleUpload(file)
+              }}
+            />
+            <button
+              data-cv-tooltip={labels.upload}
+              aria-label={labels.upload}
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={uploading}
+              className="cv-header-action ml-auto inline-flex items-center gap-1 disabled:opacity-40"
+            >
+              <Upload size={14} aria-hidden="true" />
+              {labels.upload}
+            </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}
+      {uploadFailed ? (
+        <p role="alert" className={cn('text-sm text-red-600 dark:text-red-400', classNames?.status)}>
+          {labels.uploadError}
+        </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)} data-cv-tooltip={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)}
+                  data-cv-tooltip={labels.openConversation} aria-label={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')}
+                  data-cv-tooltip={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')}
+                  data-cv-tooltip={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
+              data-cv-tooltip={PAGINATION_LABELS.previous} aria-label={PAGINATION_LABELS.previous}
+              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
+              data-cv-tooltip={PAGINATION_LABELS.next} aria-label={PAGINATION_LABELS.next}
+              type="button"
+              onClick={() => setPage(page + 1)}
+              disabled={page >= lastPage}
+              className="cv-header-icon disabled:opacity-40"
+            >
+              ›
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/EmojiPicker.tsx CHANGED Viewed

@@ -1,39 +1,27 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useMemo } from 'react'
+import { EMOJI_CATEGORIES, searchEmojis, type EmojiEntry } from './emojiCatalog'
+export interface EmojiPickerLabels {
+  search: string
+  noResults: string
+}
+export const DEFAULT_EMOJI_PICKER_LABELS: EmojiPickerLabels = {
+  search: 'Buscar emoji',
+  noResults: 'Nenhum emoji encontrado',
+}
 export interface EmojiPickerProps {
   onSelect: (emoji: string) => void
+  labels?: Partial<EmojiPickerLabels>
   className?: string
 }
-const EMOJI_CATEGORIES: { name: string; emojis: string[] }[] = [
-  {
-    name: 'Smileys',
-    emojis: ['😀', '😃', '😄', '😁', '😅', '😂', '🤣', '😊', '😇', '🙂', '😉', '😌', '😍', '🥰', '😘', '😗', '😋', '😛', '😜', '🤪'],
-  },
-  {
-    name: 'Gestures',
-    emojis: ['👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙', '👋', '🤚', '🖐️', '✋', '🖖', '👏', '🙌', '🤝', '🙏', '✍️', '💅', '🤳'],
-  },
-  {
-    name: 'Hearts',
-    emojis: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔', '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟', '♥️'],
-  },
-  {
-    name: 'Food',
-    emojis: ['🍔', '🍟', '🍕', '🌭', '🍿', '🧂', '🥓', '🥚', '🍳', '🧇', '🥞', '🧈', '🍞', '🥐', '🥨', '🥯', '🥖', '🧀', '🥗', '🥙'],
-  },
-  {
-    name: 'Drinks',
-    emojis: ['☕', '🍵', '🍶', '🍾', '🍷', '🍸', '🍹', '🍺', '🍻', '🥂', '🥃', '🥤', '🧋', '🧃', '🧉', '🧊', '🥢', '🍽️', '🍴', '🥄'],
-  },
-  {
-    name: 'Objects',
-    emojis: ['🎁', '🎂', '🎈', '🎉', '🎊', '🎀', '📱', '💻', '⌚', '📷', '🔑', '💰', '💳', '📝', '📌', '📍', '✂️', '🔍', '💡', '🔔'],
-  },
-]
-export const EmojiPicker = ({ onSelect, className = '' }: EmojiPickerProps) => {
+export const EmojiPicker = ({ onSelect, labels, className = '' }: EmojiPickerProps) => {
+  const searchLabel = labels?.search ?? DEFAULT_EMOJI_PICKER_LABELS.search
+  const noResultsLabel = labels?.noResults ?? DEFAULT_EMOJI_PICKER_LABELS.noResults
   const [activeCategory, setActiveCategory] = useState(0)
+  const [query, setQuery] = useState('')
   const handleSelect = useCallback(
     (emoji: string) => {
@@ -42,36 +30,63 @@ export const EmojiPicker = ({ onSelect, className = '' }: EmojiPickerProps) => {
     [onSelect],
   )
+  // Buscando, as abas de categoria saem do caminho: o resultado atravessa todas elas, e manter uma
+  // aba destacada sugeriria que a busca está restrita àquela categoria.
+  const isSearching = query.trim().length > 0
+  const visibleEntries: readonly EmojiEntry[] = useMemo(
+    () => (isSearching ? searchEmojis(query) : EMOJI_CATEGORIES[activeCategory].entries),
+    [isSearching, query, activeCategory],
+  )
   return (
     <div className={`bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden ${className}`}>
-      <div className="flex border-b border-gray-200 overflow-x-auto">
-        {EMOJI_CATEGORIES.map((category, index) => (
-          <button
-            key={category.name}
-            onClick={() => setActiveCategory(index)}
-            className={`px-3 py-2 text-xs font-medium whitespace-nowrap border-b-2 transition-colors ${
-              activeCategory === index
-                ? 'border-blue-500 text-blue-600'
-                : 'border-transparent text-gray-500 hover:text-gray-700'
-            }`}
-          >
-            {category.emojis[0]} {category.name}
-          </button>
-        ))}
+      <div className="p-2 border-b border-gray-200">
+        <input
+          type="search"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder={searchLabel}
+          aria-label={searchLabel}
+          className="w-full rounded-md border border-gray-200 px-2 py-1.5 text-sm outline-none focus:border-blue-500"
+        />
       </div>
-      <div className="grid grid-cols-10 gap-0.5 p-2 max-h-[240px] overflow-y-auto">
-        {EMOJI_CATEGORIES[activeCategory].emojis.map((emoji) => (
-          <button
-            key={emoji}
-            onClick={() => handleSelect(emoji)}
-            className="w-8 h-8 flex items-center justify-center text-lg hover:bg-gray-100 rounded transition-colors cursor-pointer"
-            aria-label={emoji}
-          >
-            {emoji}
-          </button>
-        ))}
-      </div>
+      {isSearching ? null : (
+        <div className="flex border-b border-gray-200 overflow-x-auto">
+          {EMOJI_CATEGORIES.map((category, index) => (
+            <button
+              data-cv-tooltip={category.name} aria-label={category.name}
+              key={category.name}
+              onClick={() => setActiveCategory(index)}
+              className={`px-3 py-2 text-xs font-medium whitespace-nowrap border-b-2 transition-colors ${
+                activeCategory === index
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              {category.entries[0].emoji} {category.name}
+            </button>
+          ))}
+        </div>
+      )}
+      {visibleEntries.length === 0 ? (
+        <p className="px-3 py-6 text-center text-sm text-gray-500">{noResultsLabel}</p>
+      ) : (
+        <div className="grid grid-cols-10 gap-0.5 p-2 max-h-[240px] overflow-y-auto">
+          {visibleEntries.map((entry) => (
+            <button
+              key={entry.emoji}
+              onClick={() => handleSelect(entry.emoji)}
+              className="w-8 h-8 flex items-center justify-center text-lg hover:bg-gray-100 rounded transition-colors cursor-pointer"
+              aria-label={entry.emoji}
+              data-cv-tooltip={entry.keywords[0]}
+            >
+              {entry.emoji}
+            </button>
+          ))}
+        </div>
+      )}
     </div>
   )
 }