@adatechnology/conversations-ui 0.3.1 → 0.4.0

package/src/conversationWindow.ts

@@ -1,13 +1,15 @@
 /**
  * Janela de sessão: o intervalo em que o canal aceita mensagem livre do atendente. No WhatsApp são
  * 24h desde o último contato do cliente; fora dela só template. Cada canal tem a sua regra — e há
- * canal sem janela nenhuma — então a política vem de `capabilitiesOf`, não de constante fixa.
+ * canal sem janela nenhuma — então a política vem de `channelCapabilityFor` (RF10), não de
+ * constante fixa.
  *
  * Mora no SDK porque é regra de plataforma, não de produto: todo projeto que usa este pacote
  * precisa dela para saber o que o atendente ainda consegue fazer.
  */
 
-import { capabilitiesOf, type ConversationChannel } from './conversationChannel'
+import { channelCapabilityFor } from './channelCapability'
+import type { ConversationChannel } from './conversationChannel'
 
 const MINUTE_MS = 60_000
 const HOUR_MS = 60 * MINUTE_MS
@@ -52,12 +54,12 @@ export type WindowOfParams = {
  * bloquearia o composer inventando um limite que a plataforma não impõe.
  */
 export function windowOf(params: WindowOfParams): ConversationWindow {
-  const capabilities = capabilitiesOf(params.channel)
-  if (!capabilities.hasSessionWindow) return CONVERSATION_WINDOW.FRESH
+  const capability = channelCapabilityFor(params.channel)
+  if (capability.sessionWindowHours === null) return CONVERSATION_WINDOW.FRESH
 
   if (!params.lastInboundAt) return CONVERSATION_WINDOW.EXPIRED
 
-  const windowMs = capabilities.windowHours * HOUR_MS
+  const windowMs = capability.sessionWindowHours * HOUR_MS
   const elapsed = params.now - new Date(params.lastInboundAt).getTime()
 
   if (elapsed >= windowMs) return CONVERSATION_WINDOW.EXPIRED

package/src/hooks/useConversationMessages.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'bun:test'
+
+import {
+  dedupeMessagesById,
+  pageIndicatesMoreOlderMessages,
+  prependOlderMessages,
+  shouldFetchOlderMessages,
+} from './useConversationMessages'
+import type { MessagePayload } from '../types'
+
+function buildMessage(id: string, timestamp: string): MessagePayload {
+  return { id, type: 'text', content: id, direction: 'inbound', sender: 'customer', timestamp }
+}
+
+describe('dedupeMessagesById', () => {
+  it('mantém a primeira ocorrência de cada id e descarta as repetidas', () => {
+    const first = buildMessage('1', '2026-09-01T10:00:00.000Z')
+    const duplicate = buildMessage('1', '2026-09-01T10:00:00.000Z')
+    const second = buildMessage('2', '2026-09-01T10:01:00.000Z')
+
+    expect(dedupeMessagesById([first, duplicate, second])).toEqual([first, second])
+  })
+})
+
+describe('prependOlderMessages', () => {
+  it('prepende a página anterior descartando o que já estava carregado', () => {
+    const accumulated = [buildMessage('3', '2026-09-01T10:02:00.000Z')]
+    const olderPage = [buildMessage('1', '2026-09-01T10:00:00.000Z'), buildMessage('2', '2026-09-01T10:01:00.000Z')]
+
+    expect(prependOlderMessages(accumulated, olderPage)).toEqual([...olderPage, ...accumulated])
+  })
+
+  it('não duplica quando a mesma página anterior chega de novo', () => {
+    const message = buildMessage('1', '2026-09-01T10:00:00.000Z')
+    const accumulated = [message]
+
+    expect(prependOlderMessages(accumulated, [message])).toEqual([message])
+  })
+})
+
+describe('shouldFetchOlderMessages', () => {
+  const oldestMessage = buildMessage('1', '2026-09-01T10:00:00.000Z')
+
+  it('busca quando não há requisição em voo, ainda há mais páginas e existe uma mensagem mais antiga', () => {
+    expect(shouldFetchOlderMessages({ isLoading: false, hasMore: true, oldestMessage })).toBe(true)
+  })
+
+  it('não dispara requisição concorrente enquanto uma já está em voo', () => {
+    expect(shouldFetchOlderMessages({ isLoading: true, hasMore: true, oldestMessage })).toBe(false)
+  })
+
+  it('para de buscar quando uma página anterior já veio incompleta (hasMore=false)', () => {
+    expect(shouldFetchOlderMessages({ isLoading: false, hasMore: false, oldestMessage })).toBe(false)
+  })
+
+  it('não busca sem mensagem mais antiga para servir de before', () => {
+    expect(shouldFetchOlderMessages({ isLoading: false, hasMore: true, oldestMessage: undefined })).toBe(false)
+  })
+})
+
+describe('pageIndicatesMoreOlderMessages', () => {
+  it('página completa (igual ao limite) indica que pode haver mais', () => {
+    expect(pageIndicatesMoreOlderMessages(50, 50)).toBe(true)
+  })
+
+  it('página menor que o limite indica que não há mais mensagens antigas', () => {
+    expect(pageIndicatesMoreOlderMessages(12, 50)).toBe(false)
+  })
+
+  it('página vazia indica que não há mais mensagens antigas', () => {
+    expect(pageIndicatesMoreOlderMessages(0, 50)).toBe(false)
+  })
+})
+
+describe('preservação do histórico ao chegar mensagem nova (SSE/polling)', () => {
+  it('combina o acumulado antigo com a janela recente sem perder páginas já carregadas', () => {
+    const olderMessages = [buildMessage('1', '2026-09-01T10:00:00.000Z'), buildMessage('2', '2026-09-01T10:01:00.000Z')]
+    const recentWindowBeforeNewMessage = [buildMessage('3', '2026-09-01T10:02:00.000Z')]
+    const recentWindowAfterNewMessage = [
+      buildMessage('3', '2026-09-01T10:02:00.000Z'),
+      buildMessage('4', '2026-09-01T10:03:00.000Z'),
+    ]
+
+    const before = dedupeMessagesById([...olderMessages, ...recentWindowBeforeNewMessage])
+    const after = dedupeMessagesById([...olderMessages, ...recentWindowAfterNewMessage])
+
+    expect(before.map((message) => message.id)).toEqual(['1', '2', '3'])
+    expect(after.map((message) => message.id)).toEqual(['1', '2', '3', '4'])
+  })
+})

package/src/hooks/useConversationMessages.ts

@@ -1,8 +1,11 @@
-import { useCallback } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useConversations } from '../providers/ConversationsProvider'
 import { useAsyncResource } from './useAsyncResource'
 import type { MessagePayload } from '../types'
 
+/** Tamanho da página ao buscar mensagens anteriores — mesmo padrão do `before` sem `limit`. */
+const OLDER_MESSAGES_PAGE_LIMIT = 50
+
 export interface UseConversationMessagesResult {
   messages: MessagePayload[]
   loading: boolean
@@ -12,6 +15,59 @@ export interface UseConversationMessagesResult {
   sendMedia: (data: { base64: string; mimeType: string; filename: string; caption?: string }) => Promise<MessagePayload>
   sendTemplate: (data: { templateName?: string; languageCode?: string; bodyParams?: string[] }) => Promise<void>
   markRead: () => Promise<void>
+  /** Busca a página anterior de mensagens e prepende ao histórico já carregado. */
+  loadOlderMessages: () => Promise<void>
+  loadingOlderMessages: boolean
+  /** `false` assim que uma página vier menor que o limite — não há mais o que buscar antes dela. */
+  hasMoreOlderMessages: boolean
+}
+
+/** Descarta qualquer mensagem cujo `id` já apareceu antes, mantendo a primeira ocorrência. */
+export function dedupeMessagesById(messages: readonly MessagePayload[]): MessagePayload[] {
+  const seenIds = new Set<string>()
+  const deduped: MessagePayload[] = []
+  for (const message of messages) {
+    if (seenIds.has(message.id)) continue
+    seenIds.add(message.id)
+    deduped.push(message)
+  }
+  return deduped
+}
+
+/**
+ * Soma uma página de mensagens antigas ao acumulado já carregado, sem duplicar.
+ *
+ * Duplicar aconteceria numa corrida onde a mesma página chegasse duas vezes — o `id` é a única
+ * garantia de identidade da mensagem, o timestamp usado no `before` não basta sozinho.
+ */
+export function prependOlderMessages(
+  accumulated: readonly MessagePayload[],
+  olderPage: readonly MessagePayload[],
+): MessagePayload[] {
+  const existingIds = new Set(accumulated.map((message) => message.id))
+  const newMessages = olderPage.filter((message) => !existingIds.has(message.id))
+  return [...newMessages, ...accumulated]
+}
+
+export type LoadOlderMessagesGuardState = {
+  readonly isLoading: boolean
+  readonly hasMore: boolean
+  readonly oldestMessage: MessagePayload | undefined
+}
+
+/**
+ * Decide se vale a pena buscar a página anterior: nunca com uma busca já em voo (evita requisição
+ * concorrente), nunca depois que uma página já veio incompleta, e nunca sem uma mensagem mais
+ * antiga para servir de `before`.
+ */
+export function shouldFetchOlderMessages(state: LoadOlderMessagesGuardState): boolean {
+  if (state.isLoading || !state.hasMore) return false
+  return Boolean(state.oldestMessage)
+}
+
+/** A página veio menor que o limite pedido: não há mais nada antes dela para buscar. */
+export function pageIndicatesMoreOlderMessages(pageLength: number, limit: number): boolean {
+  return pageLength >= limit
 }
 
 // Camada headless: dados + ações de uma conversa, sem nenhuma tela acoplada — o produto
@@ -32,6 +88,52 @@ export function useConversationMessages(
     [conversationId, params?.limit, params?.before],
   )
 
+  const [olderMessages, setOlderMessages] = useState<MessagePayload[]>([])
+  const [hasMoreOlderMessages, setHasMoreOlderMessages] = useState(true)
+  const [loadingOlderMessages, setLoadingOlderMessages] = useState(false)
+  /**
+   * Espelha `loadingOlderMessages`: o guarda de concorrência precisa ler o valor atual na hora do
+   * clique/scroll, e o estado do React só reflete depois do próximo render.
+   */
+  const loadingOlderMessagesRef = useRef(false)
+
+  // Trocar de conversa zera a paginação de mensagens antigas — a anterior podia já ter esgotado o
+  // histórico, e isso não pode vazar para a conversa que acabou de abrir.
+  useEffect(() => {
+    setOlderMessages([])
+    setHasMoreOlderMessages(true)
+  }, [conversationId])
+
+  const messages = useMemo(() => dedupeMessagesById([...olderMessages, ...(data ?? [])]), [olderMessages, data])
+
+  const loadOlderMessages = useCallback(async () => {
+    const oldestMessage = messages[0]
+    if (
+      !shouldFetchOlderMessages({
+        isLoading: loadingOlderMessagesRef.current,
+        hasMore: hasMoreOlderMessages,
+        oldestMessage,
+      })
+    )
+      return
+    // `shouldFetchOlderMessages` já garante isto — repetido aqui só para o compilador estreitar o tipo.
+    if (!oldestMessage) return
+
+    loadingOlderMessagesRef.current = true
+    setLoadingOlderMessages(true)
+    try {
+      const olderPage = await api.fetchMessages(conversationId, {
+        limit: OLDER_MESSAGES_PAGE_LIMIT,
+        before: oldestMessage.timestamp,
+      })
+      if (!pageIndicatesMoreOlderMessages(olderPage.length, OLDER_MESSAGES_PAGE_LIMIT)) setHasMoreOlderMessages(false)
+      setOlderMessages((current) => prependOlderMessages(current, olderPage))
+    } finally {
+      loadingOlderMessagesRef.current = false
+      setLoadingOlderMessages(false)
+    }
+  }, [api, conversationId, hasMoreOlderMessages, messages])
+
   const sendMessage = useCallback(
     async (text: string) => {
       const message = await api.sendMessage(conversationId, text)
@@ -60,5 +162,17 @@ export function useConversationMessages(
 
   const markRead = useCallback(() => api.markRead(conversationId), [api, conversationId])
 
-  return { messages: data ?? [], loading, error, refetch, sendMessage, sendMedia, sendTemplate, markRead }
+  return {
+    messages,
+    loading,
+    error,
+    refetch,
+    sendMessage,
+    sendMedia,
+    sendTemplate,
+    markRead,
+    loadOlderMessages,
+    loadingOlderMessages,
+    hasMoreOlderMessages,
+  }
 }

package/src/hooks/useLoadOlderMessagesScroll.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'bun:test'
+
+import { computeScrollTopAfterPrepend } from './useLoadOlderMessagesScroll'
+
+describe('computeScrollTopAfterPrepend', () => {
+  it('mantém o mesmo ponto visual somando ao scrollTop a altura que o conteúdo antigo acrescentou', () => {
+    // Container tinha 2000px de conteúdo, operador em 300px do topo; a página anterior somou 800px.
+    const before = { scrollHeight: 2000, scrollTop: 300 }
+    expect(computeScrollTopAfterPrepend(before, 2800)).toBe(1100)
+  })
+
+  it('não desloca a rolagem quando a altura não muda', () => {
+    const before = { scrollHeight: 2000, scrollTop: 300 }
+    expect(computeScrollTopAfterPrepend(before, 2000)).toBe(300)
+  })
+
+  it('funciona a partir do topo absoluto (scrollTop=0)', () => {
+    const before = { scrollHeight: 2000, scrollTop: 0 }
+    expect(computeScrollTopAfterPrepend(before, 2500)).toBe(500)
+  })
+})

package/src/hooks/useLoadOlderMessagesScroll.ts

@@ -0,0 +1,76 @@
+import { useCallback, useLayoutEffect, useRef, type RefObject, type UIEvent } from 'react'
+
+/**
+ * Chegar perto do topo do transcript dispara a busca da página anterior, e a posição de rolagem é
+ * recalculada depois que o DOM cresce por cima do ponto atual — sem isso, prepender mensagens
+ * empurra visualmente tudo para baixo e o operador perde a linha onde estava lendo.
+ */
+const NEAR_TOP_THRESHOLD_PX = 200
+
+export type ScrollHeightSnapshot = {
+  readonly scrollHeight: number
+  readonly scrollTop: number
+}
+
+/** Novo `scrollTop` que mantém o mesmo ponto visual depois que o conteúdo cresceu por cima. */
+export function computeScrollTopAfterPrepend(before: ScrollHeightSnapshot, scrollHeightAfter: number): number {
+  return before.scrollTop + (scrollHeightAfter - before.scrollHeight)
+}
+
+export type UseLoadOlderMessagesScrollParams = {
+  readonly containerRef: RefObject<HTMLDivElement | null>
+  /** `id` da mensagem mais antiga já carregada — muda quando uma página nova é prependida. */
+  readonly oldestMessageId: string | undefined
+  readonly hasMore: boolean
+  readonly loading: boolean
+  readonly onLoadOlder: () => void
+}
+
+export type UseLoadOlderMessagesScrollResult = {
+  /** Ligue no `onScroll` do mesmo elemento que `containerRef`. */
+  readonly handleScroll: (event: UIEvent<HTMLDivElement>) => void
+  /** Para o botão "Carregar mensagens anteriores" — mesma lógica do gatilho por scroll. */
+  readonly triggerLoadOlder: () => void
+}
+
+export function useLoadOlderMessagesScroll({
+  containerRef,
+  oldestMessageId,
+  hasMore,
+  loading,
+  onLoadOlder,
+}: UseLoadOlderMessagesScrollParams): UseLoadOlderMessagesScrollResult {
+  const pendingSnapshotRef = useRef<ScrollHeightSnapshot | null>(null)
+  const previousOldestMessageIdRef = useRef(oldestMessageId)
+
+  const triggerLoadOlder = useCallback(() => {
+    if (loading || !hasMore) return
+    const container = containerRef.current
+    if (!container) return
+
+    pendingSnapshotRef.current = { scrollHeight: container.scrollHeight, scrollTop: container.scrollTop }
+    onLoadOlder()
+  }, [containerRef, hasMore, loading, onLoadOlder])
+
+  const handleScroll = useCallback(
+    (event: UIEvent<HTMLDivElement>) => {
+      if (event.currentTarget.scrollTop > NEAR_TOP_THRESHOLD_PX) return
+      triggerLoadOlder()
+    },
+    [triggerLoadOlder],
+  )
+
+  useLayoutEffect(() => {
+    const idChanged = previousOldestMessageIdRef.current !== oldestMessageId
+    previousOldestMessageIdRef.current = oldestMessageId
+
+    const container = containerRef.current
+    const pending = pendingSnapshotRef.current
+    if (!idChanged || !container || !pending) return
+
+    pendingSnapshotRef.current = null
+    container.scrollTop = computeScrollTopAfterPrepend(pending, container.scrollHeight)
+  }, [oldestMessageId, containerRef])
+
+  return { handleScroll, triggerLoadOlder }
+}

package/src/index.ts

@@ -53,7 +53,7 @@ export {
   isReplyOverdue,
 } from './replyLatency'
 export type { ReplyLatency, ReplyLatencyParams } from './replyLatency'
-// Canal de origem: capacidades por plataforma (janela de sessão, reabertura, tipo de identificador).
+// Canal de origem: exibição por plataforma (rótulo, ícone, reabertura, tipo de identificador).
 export {
   CONVERSATION_CHANNEL,
   DEFAULT_CONVERSATION_CHANNEL,
@@ -75,6 +75,10 @@ export type {
   HandleKind,
   FormatContactHandleParams,
 } from './conversationChannel'
+// Capacidade comportamental do canal (RF10, D3) — confirma leitura, janela, anexo, áudio, resposta
+// rápida, transporte próprio. Vem de `@adatechnology/conversation-contracts`; ver channelCapability.ts.
+export { channelCapabilityFor } from './channelCapability'
+export type { ChannelCapability } from '@adatechnology/conversation-contracts'
 export type { ConversationWindow } from './conversationWindow'
 export { ConversationRow } from './ConversationRow'
 export { ChannelIcon, CHANNEL_BRAND_COLOR } from './ChannelIcon'

package/src/preview/ConversationSimulatorPanel.tsx

@@ -66,6 +66,10 @@ const SIMULATOR_PANEL_CHANNEL_WORDING: Readonly<Record<ConversationChannel, Chan
     destinationHint: 'entrega na API do chat do site',
     placeholder: 'Escreva como o visitante…',
   },
+  [CONVERSATION_CHANNEL.EMAIL]: {
+    destinationHint: 'entrega na caixa de entrada do contratante',
+    placeholder: 'Escreva como quem respondeu o e-mail…',
+  },
 }
 
 /** Rótulos do painel já resolvidos para o canal — útil para o host que monta o cabeçalho por fora. */

package/src/preview/createMockConversationsApi.ts

@@ -108,7 +108,11 @@ export function createMockConversationsApi(params: CreateMockConversationsApiPar
 
     fetchMessages(conversationId, fetchParams): Promise<MessagePayload[]> {
       return withLatency(() => {
-        const messages = params.store.listMessages(conversationId)
+        const allMessages = params.store.listMessages(conversationId)
+        const before = fetchParams?.before
+        // Mesma semântica do backend real: com `before`, corta tudo a partir dessa mensagem (ela
+        // não volta) para simular a paginação de "carregar mensagens anteriores" no preview.
+        const messages = before ? allMessages.filter((message) => message.timestamp < before) : allMessages
         const limit = fetchParams?.limit
         return limit ? messages.slice(-limit) : messages
       })

package/src/styles.css

@@ -482,6 +482,25 @@
   color: #6b7280;
 }
 
+.cv-workspace-load-older {
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem 0;
+}
+
+.cv-workspace-load-older button {
+  min-height: 2.75rem;
+  border-radius: 0.375rem;
+  border: 1px solid var(--cv-border, #e5e7eb);
+  padding: 0 0.75rem;
+  font-size: 0.8125rem;
+  color: #6b7280;
+}
+
+.cv-workspace-load-older button:disabled {
+  opacity: 0.6;
+}
+
 .dark .cv-workspace-notice {
   border-top-color: #374151;
   background: #1f2937;

package/src/workspace/ConversationPane.tsx

@@ -22,6 +22,7 @@ import { buildTranscriptFilename, buildTranscriptText, downloadTextFile } from '
 import { useConversationContext } from '../hooks/useConversationContext'
 import { useConversationMessages } from '../hooks/useConversationMessages'
 import { useConversationRealtime } from '../hooks/useConversationRealtime'
+import { useLoadOlderMessagesScroll } from '../hooks/useLoadOlderMessagesScroll'
 import { useScrollToLatestMessage } from '../hooks/useScrollToLatestMessage'
 import { useConversations } from '../providers/ConversationsProvider'
 import type { ConversationSummary } from '../providers/types'
@@ -151,7 +152,9 @@ export function ConversationPane({
   }
   const { api } = context
 
-  const { messages, refetch } = useConversationMessages(conversation.id)
+  const { messages, refetch, loadOlderMessages, loadingOlderMessages, hasMoreOlderMessages } = useConversationMessages(
+    conversation.id,
+  )
   const { context: conversationContext } = useConversationContext(conversation.id)
   const [documentsOpen, setDocumentsOpen] = useState(false)
   const [sendFailure, setSendFailure] = useState<string | undefined>(undefined)
@@ -230,6 +233,16 @@ export function ConversationPane({
   // 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 })
 
+  // Chegar perto do topo busca a página anterior e devolve a rolagem ao mesmo ponto visual — sem
+  // isso, prepender mensagens antigas empurraria o operador para o meio do histórico.
+  const loadOlder = useLoadOlderMessagesScroll({
+    containerRef: scroll.containerRef,
+    oldestMessageId: messages[0]?.id,
+    hasMore: hasMoreOlderMessages,
+    loading: loadingOlderMessages,
+    onLoadOlder: () => void loadOlderMessages(),
+  })
+
   // O evento traz só `{ direction, sender }` — quem tem o conteúdo é a query.
   useConversationRealtime(conversation.id, () => {
     void refetch()
@@ -352,9 +365,19 @@ export function ConversationPane({
           mesma aparência, senão o preview deixa de ser referência confiável. */}
       <ConversationWallpaper
         ref={scroll.containerRef}
-        onScroll={scroll.handleScroll}
+        onScroll={(event) => {
+          scroll.handleScroll(event)
+          loadOlder.handleScroll(event)
+        }}
         className="cv-workspace-transcript"
       >
+        {hasMoreOlderMessages ? (
+          <div className="cv-workspace-load-older">
+            <button type="button" onClick={loadOlder.triggerLoadOlder} disabled={loadingOlderMessages}>
+              {loadingOlderMessages ? labels.loadingOlderMessages : labels.loadOlderMessages}
+            </button>
+          </div>
+        ) : null}
         {messages.map((message, index) => {
           const previous = index > 0 ? messages[index - 1] : undefined
           const startsNewDay =
@@ -366,6 +389,7 @@ export function ConversationPane({
               <MessageBubble
                 message={message}
                 isMine={message.direction === 'outbound'}
+                channel={conversation.channel}
                 isFirstInGroup={!previous || previous.sender !== message.sender}
                 {...(messageSelection
                   ? {
@@ -424,9 +448,11 @@ export function ConversationPane({
             ? {
                 onAttachFiles: (files: FileList) =>
                   enqueueAttachments(
-                    Array.from(files).map(
-                      (file): QueuedAttachment => ({ kind: 'local', localId: crypto.randomUUID(), file }),
-                    ),
+                    Array.from(files).map((file): QueuedAttachment => ({
+                      kind: 'local',
+                      localId: crypto.randomUUID(),
+                      file,
+                    })),
                   ),
               }
             : onAttach
@@ -482,6 +508,7 @@ export function ConversationPane({
           value={draft}
           onChange={setDraft}
           onSend={(text) => void handleSend(text)}
+          channel={conversation.channel}
           // 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) } : {})}

package/src/workspace/labels.ts

@@ -32,6 +32,8 @@ export interface ConversationsWorkspaceLabels {
   readonly templateModalSend: (count: number) => string
   readonly messagesSelected: (count: number) => string
   readonly copySelected: string
+  readonly loadOlderMessages: string
+  readonly loadingOlderMessages: string
   readonly composerPlaceholder: string
   readonly attachFailure: string
   /** Tira um arquivo da fila antes de enviar. */
@@ -81,6 +83,8 @@ export const DEFAULT_CONVERSATIONS_WORKSPACE_LABELS: ConversationsWorkspaceLabel
   templateModalSend: (count) => `Enviar para ${count}`,
   messagesSelected: (count) => `${count} mensagem${count === 1 ? '' : 's'} selecionada${count === 1 ? '' : 's'}`,
   copySelected: 'Copiar',
+  loadOlderMessages: 'Carregar mensagens anteriores',
+  loadingOlderMessages: 'Carregando…',
   composerPlaceholder: 'Responder como atendente…',
   attachFailure: 'Falha ao enviar o arquivo.',
   attachmentRemove: 'Remover anexo',