@adatechnology/conversations-ui 0.1.0-rc.21 → 0.1.0-rc.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.21",
+  "version": "0.1.0-rc.23",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -209,3 +209,18 @@ export { createMediaUrlResolver } from './lib/createMediaUrlResolver'
 export type { ConversationHeaderUtility } from './ConversationHeader'
 export { applyQuickReplyVariables, resolveQuickReply } from './MessageComposer'
 export type { QuickReply } from './MessageComposer'
+
+// Tela de atendimento completa. Fica no export principal — e não num subpath — porque é a
+// composição padrão do pacote: quem instala conversas quer esta tela, e as peças continuam
+// exportadas ao lado para quem precisar montar outra.
+export { ConversationsWorkspace, ConversationPane, ConversationsInboxList } from './workspace'
+export { useConversationsInbox, CONVERSATIONS_PER_PAGE, DEFAULT_CONVERSATIONS_WORKSPACE_LABELS } from './workspace'
+export type {
+  ConversationsWorkspaceProps,
+  ConversationsWorkspaceSimulator,
+  ConversationsWorkspaceLabels,
+  ConversationPaneProps,
+  ConversationsInboxListProps,
+  UseConversationsInboxParams,
+  UseConversationsInboxResult,
+} from './workspace'

package/src/preview/ConversationSimulatorPanel.test.tsx

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ConversationSimulatorPanel, type ConversationSimulatorPanelProps } from './ConversationSimulatorPanel'
+import { createMockSSEProvider } from './createMockSSEProvider'
+import { createPreviewStore } from './previewStore'
+
+function markupOf(overrides: Partial<ConversationSimulatorPanelProps> = {}): string {
+  const store = createPreviewStore({ conversations: [], messages: {} })
+
+  return renderToStaticMarkup(
+    <ConversationSimulatorPanel
+      conversationId="5511900000042"
+      onClose={() => {}}
+      client={{ sendText: async () => {}, sendInteractiveReply: async () => {} } as never}
+      sse={createMockSSEProvider({ store })}
+      loadMessages={async () => []}
+      {...overrides}
+    />,
+  )
+}
+
+describe('ConversationSimulatorPanel', () => {
+  it('mostra o telefone formatado pelo host, e não o id cru', () => {
+    expect(markupOf({ displayNumber: '+55 (11) 90000-0042' })).toContain('+55 (11) 90000-0042')
+  })
+
+  it('cai no id da conversa quando o host não formata', () => {
+    expect(markupOf()).toContain('5511900000042')
+  })
+
+  it('avisa para onde a mensagem vai, para ninguém achar que é conversa de mentira', () => {
+    expect(markupOf()).toContain('entrega no webhook real')
+  })
+
+  it('dá nome acessível ao botão de fechar, que só tem ícone', () => {
+    expect(markupOf()).toContain('aria-label="Fechar simulador"')
+  })
+
+  it('aceita rótulos parciais do host sem exigir o conjunto inteiro', () => {
+    const markup = markupOf({ labels: { title: 'Testar fluxo' } })
+
+    expect(markup).toContain('Testar fluxo')
+    // O que não foi sobrescrito continua no default.
+    expect(markup).toContain('aria-label="Fechar simulador"')
+  })
+
+  it('renderiza ação extra do host no cabeçalho', () => {
+    expect(markupOf({ headerActions: <button type="button">Rodar roteiro</button> })).toContain('Rodar roteiro')
+  })
+
+  it('nomeia o próprio aside, para o leitor de tela distinguir do transcript ao lado', () => {
+    expect(markupOf()).toContain('aria-label="Simulador do cliente"')
+  })
+})

package/src/preview/ConversationSimulatorPanel.tsx

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2026 Ada Technology. All rights reserved.
+ *
+ * This source code is proprietary and confidential. Unauthorized copying,
+ * modification, distribution, or use of this file, via any medium, is
+ * strictly prohibited without prior written permission from Ada Technology.
+ *
+ * Author: Anderson Filho <andersonfrfilho@gmail.com>
+ *
+ * Painel lateral do simulador de cliente: a moldura em volta do `ConversationPreview`.
+ *
+ * Existe como componente do pacote porque cada produto tinha reescrito a mesma moldura —
+ * `<aside>`, cabeçalho com título e telefone, botão de fechar — e as cópias divergiram. Uma delas
+ * migrou para o cliente-ponte (assinatura no servidor) e a outra ficou assinando no navegador, com
+ * o app secret publicado no bundle. É o tipo de correção que precisa chegar a todo mundo de uma vez.
+ *
+ * Mora DENTRO da tela de conversas, e não numa aba própria, por um motivo prático: o token do
+ * atendente costuma viver em `sessionStorage`, que é por aba. Numa aba separada o simulador nascia
+ * sem sessão, o transcript nunca carregava, e o sintoma era "mandei e não aconteceu nada".
+ *
+ * O efeito de cada envio aparece na thread ao lado pelo mesmo stream que a inbox já assina — este
+ * painel não abre conexão própria.
+ */
+
+import type { ReactNode } from 'react'
+
+import { ConversationPreview, type ConversationPreviewProps } from './ConversationPreview'
+
+export type ConversationSimulatorPanelLabels = {
+  readonly title: string
+  /** Complementa o telefone no subtítulo, explicando para onde a mensagem realmente vai. */
+  readonly destinationHint: string
+  readonly close: string
+  readonly placeholder: string
+}
+
+export const DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS: ConversationSimulatorPanelLabels = {
+  title: 'Simulador do cliente',
+  destinationHint: 'entrega no webhook real',
+  close: 'Fechar simulador',
+  placeholder: 'Escreva como o cliente…',
+}
+
+export type ConversationSimulatorPanelProps = Omit<ConversationPreviewProps, 'placeholder'> & {
+  readonly onClose: () => void
+  /**
+   * Telefone já formatado para leitura. É o host que formata: máscara de telefone é convenção
+   * regional, e o pacote não tem como saber a do produto.
+   */
+  readonly displayNumber?: string
+  readonly labels?: Partial<ConversationSimulatorPanelLabels>
+  /** Ações extras no cabeçalho — roteiro automático, limpar conversa, trocar de contato. */
+  readonly headerActions?: ReactNode
+}
+
+export function ConversationSimulatorPanel({
+  onClose,
+  displayNumber,
+  labels,
+  headerActions,
+  ...previewProps
+}: ConversationSimulatorPanelProps) {
+  const text = { ...DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, ...labels }
+  const subtitle = [displayNumber ?? previewProps.conversationId, text.destinationHint].join(' · ')
+
+  return (
+    <aside className="cv-simulator-panel" aria-label={text.title}>
+      <header className="cv-simulator-panel__header">
+        <div className="cv-simulator-panel__heading">
+          <h2 className="cv-simulator-panel__title">{text.title}</h2>
+          <p className="cv-simulator-panel__subtitle">{subtitle}</p>
+        </div>
+        <div className="cv-simulator-panel__actions">
+          {headerActions}
+          <button type="button" onClick={onClose} title={text.close} aria-label={text.close} className="cv-simulator-panel__close">
+            {/* SVG inline em vez de lucide-react: o pacote não impõe biblioteca de ícone ao host. */}
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </header>
+
+      <div className="cv-simulator-panel__body">
+        <ConversationPreview {...previewProps} placeholder={text.placeholder} />
+      </div>
+    </aside>
+  )
+}

package/src/preview/createPreviewWebhookClient.test.ts

@@ -36,6 +36,13 @@ function createCapturingFetch(status = 200): { fetchImplementation: typeof fetch
   return { fetchImplementation, captured }
 }
 
+/** `uploadMedia` é opcional no contrato — o cliente do webhook sempre traz, o teste garante isso. */
+function uploadMediaOf(client: { uploadMedia?: (file: File) => Promise<unknown> }) {
+  const upload = client.uploadMedia
+  if (!upload) throw new Error('createPreviewWebhookClient deveria expor uploadMedia')
+  return upload
+}
+
 describe('createPreviewWebhookClient', () => {
   it('assina com o mesmo HMAC que o servidor calcula em node:crypto', async () => {
     const { fetchImplementation, captured } = createCapturingFetch()
@@ -144,7 +151,7 @@ describe('createPreviewWebhookClient.uploadMedia', () => {
       fetchImplementation,
     })
 
-    const uploaded = await client.uploadMedia(audioFile())
+    const uploaded = (await uploadMediaOf(client)(audioFile())) as { mediaId: string; mimeType?: string }
 
     expect(calls[0]?.url).toBe('http://localhost:3000/v1/preview/media')
     expect(uploaded.mediaId).toBe(`${PREVIEW_MEDIA_ID_PREFIX}upl_123`)
@@ -160,7 +167,7 @@ describe('createPreviewWebhookClient.uploadMedia', () => {
       fetchImplementation,
     })
 
-    await client.uploadMedia(audioFile())
+    await uploadMediaOf(client)(audioFile())
 
     const expected = `sha256=${createHmac('sha256', APP_SECRET).update('audio/ogg').digest('hex')}`
     expect(calls[0]?.signature).toBe(expected)
@@ -175,7 +182,7 @@ describe('createPreviewWebhookClient.uploadMedia', () => {
       fetchImplementation,
     })
 
-    await client.uploadMedia(audioFile())
+    await uploadMediaOf(client)(audioFile())
 
     expect(calls[0]?.url).toBe('/v1/preview/media')
   })
@@ -189,6 +196,6 @@ describe('createPreviewWebhookClient.uploadMedia', () => {
       fetchImplementation,
     })
 
-    await expect(client.uploadMedia(audioFile())).rejects.toBeInstanceOf(PreviewMediaUploadRejectedError)
+    await expect(uploadMediaOf(client)(audioFile())).rejects.toBeInstanceOf(PreviewMediaUploadRejectedError)
   })
 })

package/src/preview/index.ts

@@ -25,6 +25,9 @@ export type { CreateMockSSEProviderParams } from './createMockSSEProvider'
 
 export { PREVIEW_CONVERSATIONS, PREVIEW_MESSAGES, PREVIEW_DOCUMENTS } from './previewFixtures'
 
+export { ConversationSimulatorPanel, DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS } from './ConversationSimulatorPanel'
+export type { ConversationSimulatorPanelProps, ConversationSimulatorPanelLabels } from './ConversationSimulatorPanel'
+
 export { ConversationPreview } from './ConversationPreview'
 export { mediaTypeOf } from './ConversationPreview'
 export type { ConversationPreviewProps, PreviewUploadedMedia } from './ConversationPreview'