@adatechnology/conversations-ui 0.3.0 → 0.3.2

package/dist/preview/index.d.ts

@@ -1,5 +1,5 @@
-import { V as MessagePayload, u as ConversationSummary, m as ConversationEventSource, x as ConversationsApi, R as ListConversationsParams, n as ConversationPage, ab as SSEProvider, k as ConversationDocument, ac as SendPreviewMediaParams, _ as PreviewUploadedMedia, a0 as PreviewWebhookClient, a9 as ResolveMediaUrl } from '../ConversationSimulatorPanel-ikgmlciE.js';
-export { A as AudioRecorderButton, a as AudioRecorderButtonLabels, b as AudioRecorderButtonProps, o as ConversationPreview, p as ConversationPreviewProps, q as ConversationSimulatorClient, r as ConversationSimulatorPanel, s as ConversationSimulatorPanelLabels, t as ConversationSimulatorPanelProps, D as CreatePreviewMediaUploaderParams, E as CreatePreviewWebhookClientParams, F as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, H as DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, J as DEFAULT_MEDIA_UPLOAD_PATH, X as PreviewInProductionError, Y as PreviewMediaUploadRejectedError, Z as PreviewMediaUploadRequest, $ as PreviewUploadedMedia, a1 as PreviewWebhookRejectedError, aa as SIMULATOR_FILE_MEDIA_KINDS, ad as SendSimulatorMediaParams, ae as SimulatorMediaKind, ag as ToSimulatorClientParams, aj as acceptsMediaKind, ak as assertPreviewEnvironment, ao as createPreviewMediaPoster, ap as createPreviewMediaUploader, aq as createPreviewWebhookClient, as as isConversationSimulatorClient, at as mediaKindOf, au as mediaTypeOf, av as signPreviewPayload, aw as simulatorPanelLabelsOf, ax as toConversationSimulatorClient } from '../ConversationSimulatorPanel-ikgmlciE.js';
+import { M as MessagePayload, C as ConversationSummary, a as ConversationEventSource, b as ConversationsApi, L as ListConversationsParams, c as ConversationPage, S as SSEProvider, d as ConversationDocument, e as SendPreviewMediaParams, P as PreviewUploadedMedia, f as PreviewWebhookClient, R as ResolveMediaUrl } from '../ConversationSimulatorPanel-DmV8uaFE.js';
+export { A as AudioRecorderButton, g as AudioRecorderButtonLabels, h as AudioRecorderButtonProps, i as ConversationPreview, j as ConversationPreviewProps, k as ConversationSimulatorClient, l as ConversationSimulatorPanel, m as ConversationSimulatorPanelLabels, n as ConversationSimulatorPanelProps, o as CreatePreviewMediaUploaderParams, p as CreatePreviewWebhookClientParams, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, q as DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, r as DEFAULT_MEDIA_UPLOAD_PATH, s as PreviewInProductionError, t as PreviewMediaUploadRejectedError, u as PreviewMediaUploadRequest, v as PreviewUploadedMedia, w as PreviewWebhookRejectedError, x as SIMULATOR_FILE_MEDIA_KINDS, y as SendSimulatorMediaParams, z as SimulatorMediaKind, T as ToSimulatorClientParams, B as acceptsMediaKind, E as assertPreviewEnvironment, F as createPreviewMediaPoster, G as createPreviewMediaUploader, H as createPreviewWebhookClient, I as isConversationSimulatorClient, J as mediaKindOf, K as mediaTypeOf, N as signPreviewPayload, O as simulatorPanelLabelsOf, Q as toConversationSimulatorClient } from '../ConversationSimulatorPanel-DmV8uaFE.js';
 import { InteractiveReplyOption } from '@adatechnology/meta-whatsapp-contracts/testing';
 import * as react from 'react';
 export { PREVIEW_MEDIA_ID_PREFIX } from '@adatechnology/meta-whatsapp-contracts';

package/dist/preview/index.js

@@ -705,7 +705,9 @@ function createMockConversationsApi(params) {
     },
     fetchMessages(conversationId, fetchParams) {
       return withLatency(() => {
-        const messages = params.store.listMessages(conversationId);
+        const allMessages = params.store.listMessages(conversationId);
+        const before = fetchParams?.before;
+        const messages = before ? allMessages.filter((message) => message.timestamp < before) : allMessages;
         const limit = fetchParams?.limit;
         return limit ? messages.slice(-limit) : messages;
       });

package/dist/styles.css

@@ -526,6 +526,22 @@
   font-size: 0.875rem;
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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.3.0"
+    "@adatechnology/meta-whatsapp-contracts": "0.4.0"
   },
   "peerDependencies": {
     "@xyflow/react": "^12",

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/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 =
@@ -424,9 +447,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

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',