@adatechnology/conversations-ui 0.1.0-rc.2 → 0.1.0-rc.20
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.
- package/dist/{chunk-ZDURDZTM.js → chunk-2AYDBWNE.js} +14 -0
- package/dist/chunk-OIDAIVCH.js +1985 -0
- package/dist/flows/index.d.ts +14 -2
- package/dist/flows/index.js +117 -39
- package/dist/index.d.ts +729 -136
- package/dist/index.js +1418 -1104
- package/dist/preview/index.d.ts +373 -0
- package/dist/preview/index.js +1247 -0
- package/dist/styles.css +198 -0
- package/dist/types-O7kMP1Yn.d.ts +416 -0
- package/package.json +10 -3
- package/src/AudioRecorderButton.test.tsx +30 -0
- package/src/AudioRecorderButton.tsx +248 -0
- package/src/Avatar.tsx +30 -4
- package/src/ChannelIcon.tsx +87 -0
- package/src/ConversationContextPanel.tsx +127 -0
- package/src/ConversationDocumentsPanel.tsx +425 -0
- package/src/ConversationHeader.tsx +257 -0
- package/src/ConversationListItem.tsx +54 -7
- package/src/ConversationLocalesProvider.tsx +16 -0
- package/src/ConversationRow.tsx +137 -0
- package/src/DateDivider.tsx +16 -3
- package/src/DocumentsLibrary.tsx +322 -0
- package/src/EmojiPicker.tsx +69 -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 +143 -0
- package/src/Lightbox.tsx +18 -3
- package/src/MediaRenderer.tsx +64 -21
- package/src/MessageBubble.tsx +54 -5
- package/src/MessageComposer.test.tsx +35 -0
- package/src/MessageComposer.tsx +146 -19
- package/src/RichMessageComposer.test.tsx +83 -0
- package/src/RichMessageComposer.tsx +380 -0
- package/src/Wallpaper.test.tsx +21 -0
- package/src/Wallpaper.tsx +54 -6
- package/src/WhatsAppMessageEditor.tsx +28 -4
- package/src/WindowExpiredNotice.tsx +57 -0
- package/src/audioRecorderFormat.test.ts +67 -0
- package/src/conversationChannel.test.ts +53 -0
- package/src/conversationChannel.ts +146 -0
- package/src/conversationTranscript.test.ts +65 -0
- package/src/conversationTranscript.ts +64 -0
- package/src/conversationWindow.test.ts +90 -0
- package/src/conversationWindow.ts +78 -0
- package/src/documentTypeLabel.test.ts +57 -0
- package/src/emojiCatalog.test.ts +35 -0
- package/src/emojiCatalog.ts +189 -0
- package/src/flows/FlowGroupHeader.tsx +12 -2
- package/src/flows/FlowMapCanvas.tsx +17 -14
- package/src/flows/FlowMapNode.tsx +3 -1
- package/src/flows/FlowNodeCard.tsx +22 -4
- package/src/flows/FlowNodePanel.tsx +132 -35
- package/src/flows/FlowPalette.tsx +6 -2
- package/src/flows/FlowWhatsAppPreview.tsx +14 -3
- package/src/flows/flowGraph.ts +5 -5
- package/src/flows/labels.ts +5 -0
- package/src/hooks/useConversationActions.ts +56 -0
- package/src/hooks/useConversationDocuments.ts +15 -9
- package/src/hooks/useConversationList.ts +15 -9
- package/src/hooks/useConversationMessages.ts +2 -2
- package/src/index.ts +129 -16
- package/src/lib/cn.test.ts +29 -0
- package/src/lib/cn.ts +15 -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/phone.ts +34 -0
- package/src/preview/ConversationPreview.tsx +325 -0
- package/src/preview/MediaTypesPreview.tsx +87 -0
- package/src/preview/conversationPreviewFailures.test.ts +64 -0
- package/src/preview/createMockConversationsApi.ts +271 -0
- package/src/preview/createMockSSEProvider.ts +40 -0
- package/src/preview/createPreviewBridgeClient.test.ts +92 -0
- package/src/preview/createPreviewBridgeClient.ts +88 -0
- package/src/preview/createPreviewWebhookClient.test.ts +105 -0
- package/src/preview/createPreviewWebhookClient.ts +131 -0
- package/src/preview/index.ts +61 -0
- package/src/preview/mediaTypeOf.test.ts +15 -0
- package/src/preview/mockDocumentsSearch.test.ts +57 -0
- package/src/preview/mockEventSource.ts +53 -0
- package/src/preview/preview.test.ts +177 -0
- package/src/preview/previewFileSamples.test.ts +151 -0
- package/src/preview/previewFileSamples.ts +74 -0
- package/src/preview/previewFixtures.ts +440 -0
- package/src/preview/previewMediaSource.test.ts +62 -0
- package/src/preview/previewMediaSource.ts +91 -0
- package/src/preview/previewStore.ts +193 -0
- package/src/preview/startPreviewScript.ts +60 -0
- package/src/providers/types.ts +163 -11
- package/src/quickReply.test.ts +58 -0
- package/src/settings/WhatsAppCreateTemplateForm.tsx +3 -1
- package/src/settings/WhatsAppTemplatesSettings.tsx +106 -0
- package/src/styles.css +136 -0
- package/src/types.ts +46 -1
- package/src/useDarkMode.ts +26 -0
- package/src/useIsNarrow.ts +29 -0
- package/src/useWaitingNotifications.ts +74 -29
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `ConversationsApi` servido pelo store em memória. Como o pacote é headless e recebe a API por
|
|
3
|
+
* injeção, o preview de atendimento humano não precisa de servidor, banco nem Meta: é só outra
|
|
4
|
+
* implementação deste mesmo contrato.
|
|
5
|
+
*
|
|
6
|
+
* Toda resposta é assíncrona e passa por um atraso configurável — API instantânea esconde estados
|
|
7
|
+
* de carregamento, e é neles que a inbox costuma mostrar defeito.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
import type { MessagePayload } from '../types'
|
|
11
|
+
import type {
|
|
12
|
+
CompanyDocumentPage,
|
|
13
|
+
ConversationDocumentPage,
|
|
14
|
+
ConversationPage,
|
|
15
|
+
ConversationTemplate,
|
|
16
|
+
ConversationsApi,
|
|
17
|
+
ListConversationsParams,
|
|
18
|
+
} from '../providers/types'
|
|
19
|
+
import { PREVIEW_DOCUMENTS } from './previewFixtures'
|
|
20
|
+
import { previewFileBase64, previewFileUrl } from './previewMediaSource'
|
|
21
|
+
import type { PreviewStore } from './previewStore'
|
|
22
|
+
|
|
23
|
+
export type CreateMockConversationsApiParams = {
|
|
24
|
+
readonly store: PreviewStore
|
|
25
|
+
readonly latencyMs?: number
|
|
26
|
+
readonly agentName?: string
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const DEFAULT_LATENCY_MS = 120
|
|
30
|
+
|
|
31
|
+
const PREVIEW_AGENT_ID = 'preview-agent'
|
|
32
|
+
|
|
33
|
+
const PREVIEW_TEMPLATES: readonly ConversationTemplate[] = [
|
|
34
|
+
{ name: 'retomada_atendimento', language: 'pt_BR', status: 'APPROVED', category: 'UTILITY' },
|
|
35
|
+
{ name: 'lembrete_documentos', language: 'pt_BR', status: 'APPROVED', category: 'UTILITY' },
|
|
36
|
+
{ name: 'promocao_taxa', language: 'pt_BR', status: 'PENDING', category: 'MARKETING' },
|
|
37
|
+
]
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* O mock satisfaz `ConversationsApi`, mas com o retorno de `fetchConversations` ESTREITADO para a
|
|
41
|
+
* forma paginada. Sem isto o contrato — que aceita array ou página — obrigaria todo consumidor do
|
|
42
|
+
* preview a desempacotar uma união que aqui nunca varia.
|
|
43
|
+
*/
|
|
44
|
+
export type MockConversationsApi = Omit<ConversationsApi, 'fetchConversations'> & {
|
|
45
|
+
fetchConversations(params?: ListConversationsParams): Promise<ConversationPage>
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export function createMockConversationsApi(params: CreateMockConversationsApiParams): MockConversationsApi {
|
|
49
|
+
const latencyMs = params.latencyMs ?? DEFAULT_LATENCY_MS
|
|
50
|
+
|
|
51
|
+
async function withLatency<TResult>(produce: () => TResult): Promise<TResult> {
|
|
52
|
+
await new Promise((resolve) => setTimeout(resolve, latencyMs))
|
|
53
|
+
return produce()
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
return {
|
|
57
|
+
// Devolve a forma paginada, não o array puro: é a que o contrato passou a oferecer e a que
|
|
58
|
+
// permite o preview desenhar controles de página. O total é contado ANTES do corte — depois
|
|
59
|
+
// dele seria sempre o tamanho da página, e a paginação nunca sairia da primeira.
|
|
60
|
+
fetchConversations(fetchParams): Promise<ConversationPage> {
|
|
61
|
+
return withLatency(() => {
|
|
62
|
+
const conversations = params.store.listConversations({
|
|
63
|
+
waitingHuman: fetchParams?.waitingHuman,
|
|
64
|
+
search: fetchParams?.search,
|
|
65
|
+
})
|
|
66
|
+
|
|
67
|
+
const limit = fetchParams?.limit ?? conversations.length
|
|
68
|
+
const page = fetchParams?.page ?? 1
|
|
69
|
+
return {
|
|
70
|
+
conversations: conversations.slice((page - 1) * limit, page * limit),
|
|
71
|
+
total: conversations.length,
|
|
72
|
+
}
|
|
73
|
+
})
|
|
74
|
+
},
|
|
75
|
+
|
|
76
|
+
fetchMessages(conversationId, fetchParams): Promise<MessagePayload[]> {
|
|
77
|
+
return withLatency(() => {
|
|
78
|
+
const messages = params.store.listMessages(conversationId)
|
|
79
|
+
const limit = fetchParams?.limit
|
|
80
|
+
return limit ? messages.slice(-limit) : messages
|
|
81
|
+
})
|
|
82
|
+
},
|
|
83
|
+
|
|
84
|
+
sendMessage(conversationId, text): Promise<MessagePayload> {
|
|
85
|
+
return withLatency(() =>
|
|
86
|
+
params.store.appendMessage({ conversationId, content: text, direction: 'outbound', sender: 'agent' }),
|
|
87
|
+
)
|
|
88
|
+
},
|
|
89
|
+
|
|
90
|
+
sendMedia(conversationId, data): Promise<MessagePayload> {
|
|
91
|
+
return withLatency(() =>
|
|
92
|
+
params.store.appendMessage({
|
|
93
|
+
conversationId,
|
|
94
|
+
content: data.caption ?? data.filename,
|
|
95
|
+
direction: 'outbound',
|
|
96
|
+
sender: 'agent',
|
|
97
|
+
}),
|
|
98
|
+
)
|
|
99
|
+
},
|
|
100
|
+
|
|
101
|
+
sendTemplate(conversationId, data): Promise<void> {
|
|
102
|
+
return withLatency(() => {
|
|
103
|
+
params.store.appendMessage({
|
|
104
|
+
conversationId,
|
|
105
|
+
// Sem nome, o host está pedindo o template padrão do backend — o mock representa isso
|
|
106
|
+
// pelo que o atendente veria, não por um nome inventado.
|
|
107
|
+
content: `[template] ${data.templateName ?? PREVIEW_TEMPLATES[0]?.name ?? 'padrao'}`,
|
|
108
|
+
direction: 'outbound',
|
|
109
|
+
sender: 'agent',
|
|
110
|
+
})
|
|
111
|
+
})
|
|
112
|
+
},
|
|
113
|
+
|
|
114
|
+
markRead(conversationId): Promise<void> {
|
|
115
|
+
return withLatency(() => params.store.markRead(conversationId))
|
|
116
|
+
},
|
|
117
|
+
|
|
118
|
+
getContext(conversationId): Promise<Record<string, unknown>> {
|
|
119
|
+
return withLatency(() => {
|
|
120
|
+
const conversation = params.store.listConversations().find((item) => item.id === conversationId)
|
|
121
|
+
return {
|
|
122
|
+
currentState: conversation?.currentState ?? 'unknown',
|
|
123
|
+
mode: conversation?.mode ?? 'bot',
|
|
124
|
+
preview: true,
|
|
125
|
+
}
|
|
126
|
+
})
|
|
127
|
+
},
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* Espelha o backend em busca, filtro de origem, ordenação E paginação. Mock que ignora params
|
|
131
|
+
* faz o painel parecer quebrado aqui e, pior, esconde o caso em que o backend também os ignora
|
|
132
|
+
* — foi exatamente assim que o filtro de origem passou a existir só no contrato.
|
|
133
|
+
*/
|
|
134
|
+
getDocuments(conversationId, documentParams): Promise<ConversationDocumentPage> {
|
|
135
|
+
return withLatency(() => {
|
|
136
|
+
let documents = [...(PREVIEW_DOCUMENTS[conversationId] ?? [])]
|
|
137
|
+
|
|
138
|
+
const search = documentParams?.search?.trim().toLowerCase()
|
|
139
|
+
if (search) {
|
|
140
|
+
documents = documents.filter((document) => document.filename.toLowerCase().includes(search))
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
// 'team' agrupa agent + bot, como o painel apresenta.
|
|
144
|
+
const source = documentParams?.source
|
|
145
|
+
if (source === 'team') {
|
|
146
|
+
documents = documents.filter((document) => document.source === 'agent' || document.source === 'bot')
|
|
147
|
+
} else if (source) {
|
|
148
|
+
documents = documents.filter((document) => document.source === source)
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
documents.sort((left, right) =>
|
|
152
|
+
documentParams?.sortDirection === 'asc'
|
|
153
|
+
? left.linkedAt.localeCompare(right.linkedAt)
|
|
154
|
+
: right.linkedAt.localeCompare(left.linkedAt),
|
|
155
|
+
)
|
|
156
|
+
|
|
157
|
+
// Total contado ANTES do corte — depois seria sempre o tamanho da página, e a paginação
|
|
158
|
+
// nunca sairia da primeira.
|
|
159
|
+
const total = documents.length
|
|
160
|
+
const limit = documentParams?.limit ?? total
|
|
161
|
+
const page = documentParams?.page ?? 1
|
|
162
|
+
|
|
163
|
+
return { documents: documents.slice((page - 1) * limit, page * limit), total }
|
|
164
|
+
})
|
|
165
|
+
},
|
|
166
|
+
|
|
167
|
+
/**
|
|
168
|
+
* Zip de mentira: um texto listando o que entraria. Basta para exercitar seleção, botão e o
|
|
169
|
+
* caminho de download no preview, sem arrastar uma lib de compactação para o pacote.
|
|
170
|
+
*/
|
|
171
|
+
downloadDocumentsArchive(conversationId, uploadIds): Promise<Blob> {
|
|
172
|
+
return withLatency(() => {
|
|
173
|
+
const known = PREVIEW_DOCUMENTS[conversationId] ?? []
|
|
174
|
+
const names = uploadIds.map((id) => known.find((document) => document.id === id)?.filename ?? id)
|
|
175
|
+
return new Blob([`preview: ${names.length} arquivo(s)\n${names.join('\n')}`], { type: 'application/zip' })
|
|
176
|
+
})
|
|
177
|
+
},
|
|
178
|
+
|
|
179
|
+
/** Junta as bibliotecas de todas as conversas do fixture, com a origem de cada arquivo. */
|
|
180
|
+
getAllDocuments(documentParams): Promise<CompanyDocumentPage> {
|
|
181
|
+
return withLatency(() => {
|
|
182
|
+
let all = Object.entries(PREVIEW_DOCUMENTS).flatMap(([conversationId, docs]) =>
|
|
183
|
+
docs.map((document) => ({ ...document, conversationId })),
|
|
184
|
+
)
|
|
185
|
+
|
|
186
|
+
// Mesma regra do backend (`companyDocumentSearch`): o termo casa nome do arquivo OU
|
|
187
|
+
// telefone da conversa, e o telefone só pelos dígitos — o preview mostra o número
|
|
188
|
+
// formatado, então é assim que o atendente vai colá-lo na busca.
|
|
189
|
+
const search = documentParams?.search?.trim().toLowerCase()
|
|
190
|
+
if (search) {
|
|
191
|
+
const digits = search.replace(/\D/g, '')
|
|
192
|
+
all = all.filter(
|
|
193
|
+
(document) =>
|
|
194
|
+
document.filename.toLowerCase().includes(search) ||
|
|
195
|
+
(digits !== '' && document.conversationId.includes(digits)),
|
|
196
|
+
)
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
const source = documentParams?.source
|
|
200
|
+
if (source === 'team') {
|
|
201
|
+
all = all.filter((document) => document.source === 'agent' || document.source === 'bot')
|
|
202
|
+
} else if (source) {
|
|
203
|
+
all = all.filter((document) => document.source === source)
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
all.sort((left, right) =>
|
|
207
|
+
documentParams?.sortDirection === 'asc'
|
|
208
|
+
? left.linkedAt.localeCompare(right.linkedAt)
|
|
209
|
+
: right.linkedAt.localeCompare(left.linkedAt),
|
|
210
|
+
)
|
|
211
|
+
|
|
212
|
+
const total = all.length
|
|
213
|
+
const limit = documentParams?.limit ?? total
|
|
214
|
+
const page = documentParams?.page ?? 1
|
|
215
|
+
return { documents: all.slice((page - 1) * limit, page * limit), total }
|
|
216
|
+
})
|
|
217
|
+
},
|
|
218
|
+
|
|
219
|
+
// Devolve os bytes DO TIPO do documento, não uma imagem para tudo: antes, abrir um PDF entregava
|
|
220
|
+
// um PNG rotulado `application/pdf` e o leitor recusava o arquivo. O `uploadId` é a única pista
|
|
221
|
+
// que o contrato dá, então o tipo vem da própria biblioteca.
|
|
222
|
+
getDocumentUrl(uploadId): Promise<string> {
|
|
223
|
+
return withLatency(() => {
|
|
224
|
+
const found = Object.values(PREVIEW_DOCUMENTS)
|
|
225
|
+
.flat()
|
|
226
|
+
.find((document) => document.id === uploadId)
|
|
227
|
+
return previewFileUrl(found?.mimeType, found?.filename)
|
|
228
|
+
})
|
|
229
|
+
},
|
|
230
|
+
|
|
231
|
+
// Caminho da mídia ainda não ingerida: o backend busca na Meta e devolve base64. Resolve pelo
|
|
232
|
+
// id para a bolha receber os bytes DO TIPO dela — devolvendo um PNG para todo id, vídeo e áudio
|
|
233
|
+
// apareciam quebrados na thread mesmo havendo amostra válida do formato.
|
|
234
|
+
getMediaProxyUrl(mediaId): Promise<{ mimeType: string; data: string }> {
|
|
235
|
+
return withLatency(() => {
|
|
236
|
+
const found = Object.values(PREVIEW_DOCUMENTS)
|
|
237
|
+
.flat()
|
|
238
|
+
.find((document) => document.id === `preview/inbound/${mediaId}`)
|
|
239
|
+
return previewFileBase64(found?.mimeType, found?.filename)
|
|
240
|
+
})
|
|
241
|
+
},
|
|
242
|
+
|
|
243
|
+
takeover(conversationId): Promise<void> {
|
|
244
|
+
return withLatency(() =>
|
|
245
|
+
params.store.setMode({ conversationId, mode: 'human', assignedUserId: PREVIEW_AGENT_ID }),
|
|
246
|
+
)
|
|
247
|
+
},
|
|
248
|
+
|
|
249
|
+
release(conversationId): Promise<void> {
|
|
250
|
+
return withLatency(() => params.store.setMode({ conversationId, mode: 'bot' }))
|
|
251
|
+
},
|
|
252
|
+
|
|
253
|
+
// Encerrar devolve ao bot como o release, e é de propósito: a diferença entre os dois é a
|
|
254
|
+
// despedida, que o host manda antes de chamar aqui. O mock não a inventa.
|
|
255
|
+
finalize(conversationId): Promise<void> {
|
|
256
|
+
return withLatency(() => params.store.setMode({ conversationId, mode: 'bot' }))
|
|
257
|
+
},
|
|
258
|
+
|
|
259
|
+
markAllRead(): Promise<void> {
|
|
260
|
+
return withLatency(() => {
|
|
261
|
+
for (const conversation of params.store.listConversations()) {
|
|
262
|
+
params.store.markRead(conversation.id)
|
|
263
|
+
}
|
|
264
|
+
})
|
|
265
|
+
},
|
|
266
|
+
|
|
267
|
+
listTemplates(): Promise<ConversationTemplate[]> {
|
|
268
|
+
return withLatency(() => [...PREVIEW_TEMPLATES])
|
|
269
|
+
},
|
|
270
|
+
}
|
|
271
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `SSEProvider` servido pelo store em memória. Mesmo mapeamento de canal do servidor
|
|
3
|
+
* (`conv:<conversationId>` e `global`), para que a UI não perceba a troca.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import type { SSEProvider } from '../providers/types'
|
|
7
|
+
import { createMockEventSource } from './mockEventSource'
|
|
8
|
+
import { conversationChannel, GLOBAL_CHANNEL, type PreviewStore } from './previewStore'
|
|
9
|
+
|
|
10
|
+
export type CreateMockSSEProviderParams = {
|
|
11
|
+
readonly store: PreviewStore
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export function createMockSSEProvider(params: CreateMockSSEProviderParams): SSEProvider {
|
|
15
|
+
function connect(channel: string): ReturnType<typeof createMockEventSource> {
|
|
16
|
+
const source = createMockEventSource()
|
|
17
|
+
const unsubscribe = params.store.subscribe(channel, (emission) => {
|
|
18
|
+
source.emit(emission.event, emission.payload)
|
|
19
|
+
})
|
|
20
|
+
|
|
21
|
+
const close = source.close.bind(source)
|
|
22
|
+
// O unsubscribe tem de acontecer no close, senão cada remontagem de componente deixa um
|
|
23
|
+
// listener preso no store e a mesma mensagem chega duplicada na UI.
|
|
24
|
+
source.close = (): void => {
|
|
25
|
+
unsubscribe()
|
|
26
|
+
close()
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
return source
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
return {
|
|
33
|
+
connectConversationStream(conversationId: string) {
|
|
34
|
+
return connect(conversationChannel(conversationId))
|
|
35
|
+
},
|
|
36
|
+
connectGlobalStream() {
|
|
37
|
+
return connect(GLOBAL_CHANNEL)
|
|
38
|
+
},
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* O que estes testes protegem é a propriedade de segurança da ponte: nenhum caminho pode voltar a
|
|
3
|
+
* exigir segredo no navegador, e o corpo enviado tem que ser a INTENÇÃO — se um refactor passar a
|
|
4
|
+
* mandar payload da Meta montado no cliente, a rota do host vira injetor de webhook arbitrário.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import { describe, expect, it } from 'bun:test'
|
|
8
|
+
|
|
9
|
+
import { createPreviewBridgeClient, PreviewBridgeRejectedError } from './createPreviewBridgeClient'
|
|
10
|
+
import type { PreviewInboundCommand } from './createPreviewBridgeClient'
|
|
11
|
+
|
|
12
|
+
const FROM = '5511999999999'
|
|
13
|
+
|
|
14
|
+
function createRecordingClient() {
|
|
15
|
+
const commands: PreviewInboundCommand[] = []
|
|
16
|
+
const client = createPreviewBridgeClient({
|
|
17
|
+
from: FROM,
|
|
18
|
+
sendCommand: async (command) => {
|
|
19
|
+
commands.push(command)
|
|
20
|
+
},
|
|
21
|
+
})
|
|
22
|
+
return { client, commands }
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
describe('createPreviewBridgeClient', () => {
|
|
26
|
+
it('entrega a intenção do cliente, carimbando o remetente em cada comando', async () => {
|
|
27
|
+
const { client, commands } = createRecordingClient()
|
|
28
|
+
|
|
29
|
+
await client.sendText('quero simular')
|
|
30
|
+
await client.sendButtonReply({ id: 'hab_pronto', title: 'Imóvel pronto' })
|
|
31
|
+
await client.sendListReply({ id: 'faixa_2', title: 'Faixa 2' })
|
|
32
|
+
await client.sendAudio('media-1')
|
|
33
|
+
await client.sendMedia({ mediaType: 'document', mediaId: 'media-2', filename: 'rg.pdf' })
|
|
34
|
+
|
|
35
|
+
expect(commands).toEqual([
|
|
36
|
+
{ kind: 'text', from: FROM, text: 'quero simular' },
|
|
37
|
+
{ kind: 'buttonReply', from: FROM, reply: { id: 'hab_pronto', title: 'Imóvel pronto' } },
|
|
38
|
+
{ kind: 'listReply', from: FROM, reply: { id: 'faixa_2', title: 'Faixa 2' } },
|
|
39
|
+
{ kind: 'audio', from: FROM, mediaId: 'media-1' },
|
|
40
|
+
{ kind: 'media', from: FROM, mediaType: 'document', mediaId: 'media-2', filename: 'rg.pdf' },
|
|
41
|
+
])
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
it('nunca embute assinatura nem segredo no que sai do navegador', async () => {
|
|
45
|
+
const { client, commands } = createRecordingClient()
|
|
46
|
+
|
|
47
|
+
await client.sendText('oi')
|
|
48
|
+
|
|
49
|
+
const serialized = JSON.stringify(commands[0])
|
|
50
|
+
expect(serialized).not.toMatch(/sha256=/)
|
|
51
|
+
expect(serialized).not.toMatch(/secret/i)
|
|
52
|
+
expect(commands[0]).not.toHaveProperty('entry')
|
|
53
|
+
})
|
|
54
|
+
|
|
55
|
+
it('posta no endpoint do host com os headers de sessão que o host injeta', async () => {
|
|
56
|
+
const calls: Array<{ url: string; init: RequestInit }> = []
|
|
57
|
+
const client = createPreviewBridgeClient({
|
|
58
|
+
from: FROM,
|
|
59
|
+
endpointUrl: 'https://host.test/api/conversations/preview/inbound',
|
|
60
|
+
headers: { authorization: 'Bearer token-do-painel' },
|
|
61
|
+
fetchImplementation: (async (url: string, init: RequestInit) => {
|
|
62
|
+
calls.push({ url, init })
|
|
63
|
+
return { ok: true } as Response
|
|
64
|
+
}) as unknown as typeof fetch,
|
|
65
|
+
})
|
|
66
|
+
|
|
67
|
+
await client.sendText('oi')
|
|
68
|
+
|
|
69
|
+
expect(calls[0]?.url).toBe('https://host.test/api/conversations/preview/inbound')
|
|
70
|
+
expect(calls[0]?.init.method).toBe('POST')
|
|
71
|
+
expect(calls[0]?.init.headers).toMatchObject({
|
|
72
|
+
'content-type': 'application/json',
|
|
73
|
+
authorization: 'Bearer token-do-painel',
|
|
74
|
+
})
|
|
75
|
+
expect(JSON.parse(String(calls[0]?.init.body))).toEqual({ kind: 'text', from: FROM, text: 'oi' })
|
|
76
|
+
})
|
|
77
|
+
|
|
78
|
+
it('converte recusa do host em erro tipado, para o painel poder mostrar o motivo', async () => {
|
|
79
|
+
const client = createPreviewBridgeClient({
|
|
80
|
+
from: FROM,
|
|
81
|
+
endpointUrl: 'https://host.test/preview',
|
|
82
|
+
fetchImplementation: (async () => ({ ok: false, status: 403 }) as Response) as unknown as typeof fetch,
|
|
83
|
+
})
|
|
84
|
+
|
|
85
|
+
await expect(client.sendText('oi')).rejects.toBeInstanceOf(PreviewBridgeRejectedError)
|
|
86
|
+
await expect(client.sendText('oi')).rejects.toThrow(/403/)
|
|
87
|
+
})
|
|
88
|
+
|
|
89
|
+
it('recusa configuração sem forma de entregar, em vez de falhar só no primeiro envio', () => {
|
|
90
|
+
expect(() => createPreviewBridgeClient({ from: FROM })).toThrow(/sendCommand.*endpointUrl/)
|
|
91
|
+
})
|
|
92
|
+
})
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cliente do preview que NÃO carrega segredo: em vez de montar e assinar o payload da Meta no
|
|
3
|
+
* navegador, manda um comando semântico (`{ kind: 'text', text }`) para uma rota do próprio host,
|
|
4
|
+
* autenticada pela sessão que o painel já tem. Quem monta o payload e assina é o servidor, com o
|
|
5
|
+
* app secret que nunca sai de lá.
|
|
6
|
+
*
|
|
7
|
+
* Por que esta fábrica existe ao lado de `createPreviewWebhookClient`: assinar no navegador exige o
|
|
8
|
+
* app secret dentro do bundle, e bundle é público por definição — em qualquer ambiente com URL
|
|
9
|
+
* acessível isso é o mesmo que publicar o segredo. Com o segredo vazado, qualquer um forja webhooks
|
|
10
|
+
* válidos daquele app: injeta mensagens de qualquer número e dispara os fluxos. `createPreviewWebhook
|
|
11
|
+
* Client` continua servindo para execução puramente local (docker de dev, onde o bundle não é
|
|
12
|
+
* servido para ninguém); para qualquer ambiente publicado, a ponte é o caminho.
|
|
13
|
+
*
|
|
14
|
+
* O pacote não decide autenticação: o host injeta `sendCommand` (ou `headers` + `fetchImplementation`),
|
|
15
|
+
* porque token, cookie e cabeçalho de sessão são do produto, não da biblioteca.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
import type { InboundMediaType, InteractiveReplyOption } from '@adatechnology/meta-whatsapp-contracts/testing'
|
|
19
|
+
import type { PreviewWebhookClient, SendPreviewMediaParams } from './createPreviewWebhookClient'
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Comando semântico entregue ao host. É deliberadamente o QUE o cliente fez, não o payload da Meta:
|
|
23
|
+
* se o navegador mandasse o payload pronto, a rota viraria um injetor de webhook arbitrário para
|
|
24
|
+
* quem tivesse sessão. Mandando a intenção, o servidor é quem escolhe a forma.
|
|
25
|
+
*/
|
|
26
|
+
export type PreviewInboundCommand =
|
|
27
|
+
| { readonly kind: 'text'; readonly from: string; readonly text: string }
|
|
28
|
+
| { readonly kind: 'buttonReply'; readonly from: string; readonly reply: InteractiveReplyOption }
|
|
29
|
+
| { readonly kind: 'listReply'; readonly from: string; readonly reply: InteractiveReplyOption }
|
|
30
|
+
| { readonly kind: 'audio'; readonly from: string; readonly mediaId: string }
|
|
31
|
+
| ({ readonly kind: 'media'; readonly from: string } & SendPreviewMediaParams)
|
|
32
|
+
|
|
33
|
+
export type SendPreviewInboundCommand = (command: PreviewInboundCommand) => Promise<void>
|
|
34
|
+
|
|
35
|
+
export class PreviewBridgeRejectedError extends Error {
|
|
36
|
+
constructor(readonly status: number) {
|
|
37
|
+
super(`A rota de preview do host recusou a entrega (HTTP ${status}).`)
|
|
38
|
+
this.name = 'PreviewBridgeRejectedError'
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export type CreatePreviewBridgeClientParams = {
|
|
43
|
+
readonly from: string
|
|
44
|
+
/**
|
|
45
|
+
* Entrega o comando. Use quando o host já tem um cliente HTTP com sessão, interceptors e refresh
|
|
46
|
+
* de token — reimplementar isso aqui só duplicaria a autenticação do produto.
|
|
47
|
+
*/
|
|
48
|
+
readonly sendCommand?: SendPreviewInboundCommand
|
|
49
|
+
/** Alternativa a `sendCommand` para hosts sem cliente HTTP próprio. */
|
|
50
|
+
readonly endpointUrl?: string
|
|
51
|
+
readonly headers?: Readonly<Record<string, string>>
|
|
52
|
+
readonly fetchImplementation?: typeof fetch
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
function buildFetchSender(params: CreatePreviewBridgeClientParams): SendPreviewInboundCommand {
|
|
56
|
+
const endpointUrl = params.endpointUrl
|
|
57
|
+
if (!endpointUrl) {
|
|
58
|
+
throw new Error('createPreviewBridgeClient exige `sendCommand` ou `endpointUrl`.')
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
return async (command) => {
|
|
62
|
+
const performRequest = params.fetchImplementation ?? fetch
|
|
63
|
+
const response = await performRequest(endpointUrl, {
|
|
64
|
+
method: 'POST',
|
|
65
|
+
// `credentials` fica com o host via `headers`/`fetchImplementation`: sessão por cookie e por
|
|
66
|
+
// bearer não convivem numa escolha default sem quebrar um dos dois.
|
|
67
|
+
headers: { 'content-type': 'application/json', ...params.headers },
|
|
68
|
+
body: JSON.stringify(command),
|
|
69
|
+
})
|
|
70
|
+
|
|
71
|
+
if (!response.ok) throw new PreviewBridgeRejectedError(response.status)
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export function createPreviewBridgeClient(params: CreatePreviewBridgeClientParams): PreviewWebhookClient {
|
|
76
|
+
const send = params.sendCommand ?? buildFetchSender(params)
|
|
77
|
+
const from = params.from
|
|
78
|
+
|
|
79
|
+
return {
|
|
80
|
+
sendText: (text) => send({ kind: 'text', from, text }),
|
|
81
|
+
sendButtonReply: (reply) => send({ kind: 'buttonReply', from, reply }),
|
|
82
|
+
sendListReply: (reply) => send({ kind: 'listReply', from, reply }),
|
|
83
|
+
sendAudio: (mediaId) => send({ kind: 'audio', from, mediaId }),
|
|
84
|
+
sendMedia: (media) => send({ kind: 'media', from, ...media }),
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export type { InboundMediaType }
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* O risco aqui não é o cliente montar o payload errado — é o HMAC do WebCrypto divergir do que o
|
|
3
|
+
* servidor calcula com `node:crypto`. Uma divergência de um byte transforma todo envio do preview
|
|
4
|
+
* em 401, então o teste compara as duas implementações diretamente.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import { createHmac } from 'node:crypto'
|
|
8
|
+
import { describe, expect, it } from 'bun:test'
|
|
9
|
+
import {
|
|
10
|
+
assertPreviewEnvironment,
|
|
11
|
+
createPreviewWebhookClient,
|
|
12
|
+
PreviewInProductionError,
|
|
13
|
+
PreviewWebhookRejectedError,
|
|
14
|
+
} from './createPreviewWebhookClient'
|
|
15
|
+
|
|
16
|
+
const APP_SECRET = 'dev-app-secret'
|
|
17
|
+
const FROM = '5511988887777'
|
|
18
|
+
const WEBHOOK_URL = 'http://localhost:3000/v1/webhook/whatsapp'
|
|
19
|
+
|
|
20
|
+
type CapturedRequest = {
|
|
21
|
+
body: string
|
|
22
|
+
signature: string
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
function createCapturingFetch(status = 200): { fetchImplementation: typeof fetch; captured: CapturedRequest[] } {
|
|
26
|
+
const captured: CapturedRequest[] = []
|
|
27
|
+
|
|
28
|
+
const fetchImplementation = (async (_url: string, init?: RequestInit) => {
|
|
29
|
+
const headers = init?.headers as Record<string, string>
|
|
30
|
+
captured.push({ body: String(init?.body), signature: headers['x-hub-signature-256'] ?? '' })
|
|
31
|
+
return { ok: status >= 200 && status < 300, status } as Response
|
|
32
|
+
}) as unknown as typeof fetch
|
|
33
|
+
|
|
34
|
+
return { fetchImplementation, captured }
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
describe('createPreviewWebhookClient', () => {
|
|
38
|
+
it('assina com o mesmo HMAC que o servidor calcula em node:crypto', async () => {
|
|
39
|
+
const { fetchImplementation, captured } = createCapturingFetch()
|
|
40
|
+
const client = createPreviewWebhookClient({
|
|
41
|
+
webhookUrl: WEBHOOK_URL,
|
|
42
|
+
appSecret: APP_SECRET,
|
|
43
|
+
from: FROM,
|
|
44
|
+
fetchImplementation,
|
|
45
|
+
})
|
|
46
|
+
|
|
47
|
+
await client.sendText('quero 2kg de arroz')
|
|
48
|
+
|
|
49
|
+
const request = captured[0]
|
|
50
|
+
const expected = `sha256=${createHmac('sha256', APP_SECRET)
|
|
51
|
+
.update(request?.body ?? '')
|
|
52
|
+
.digest('hex')}`
|
|
53
|
+
expect(request?.signature).toBe(expected)
|
|
54
|
+
})
|
|
55
|
+
|
|
56
|
+
it('envia exatamente os bytes que assinou', async () => {
|
|
57
|
+
const { fetchImplementation, captured } = createCapturingFetch()
|
|
58
|
+
const client = createPreviewWebhookClient({
|
|
59
|
+
webhookUrl: WEBHOOK_URL,
|
|
60
|
+
appSecret: APP_SECRET,
|
|
61
|
+
from: FROM,
|
|
62
|
+
fetchImplementation,
|
|
63
|
+
})
|
|
64
|
+
|
|
65
|
+
await client.sendButtonReply({ id: 'confirmar', title: 'Confirmar' })
|
|
66
|
+
|
|
67
|
+
const request = captured[0]
|
|
68
|
+
const reparsed = JSON.stringify(JSON.parse(request?.body ?? '{}'))
|
|
69
|
+
expect(request?.body).toBe(reparsed)
|
|
70
|
+
})
|
|
71
|
+
|
|
72
|
+
it('mensagens de texto idêntico produzem assinaturas distintas', async () => {
|
|
73
|
+
const { fetchImplementation, captured } = createCapturingFetch()
|
|
74
|
+
const client = createPreviewWebhookClient({
|
|
75
|
+
webhookUrl: WEBHOOK_URL,
|
|
76
|
+
appSecret: APP_SECRET,
|
|
77
|
+
from: FROM,
|
|
78
|
+
fetchImplementation,
|
|
79
|
+
})
|
|
80
|
+
|
|
81
|
+
await client.sendText('sim')
|
|
82
|
+
await client.sendText('sim')
|
|
83
|
+
|
|
84
|
+
expect(captured[0]?.signature).not.toBe(captured[1]?.signature)
|
|
85
|
+
})
|
|
86
|
+
|
|
87
|
+
it('propaga a recusa do webhook em vez de engolir', async () => {
|
|
88
|
+
const { fetchImplementation } = createCapturingFetch(401)
|
|
89
|
+
const client = createPreviewWebhookClient({
|
|
90
|
+
webhookUrl: WEBHOOK_URL,
|
|
91
|
+
appSecret: APP_SECRET,
|
|
92
|
+
from: FROM,
|
|
93
|
+
fetchImplementation,
|
|
94
|
+
})
|
|
95
|
+
|
|
96
|
+
await expect(client.sendText('oi')).rejects.toBeInstanceOf(PreviewWebhookRejectedError)
|
|
97
|
+
})
|
|
98
|
+
})
|
|
99
|
+
|
|
100
|
+
describe('assertPreviewEnvironment', () => {
|
|
101
|
+
it('recusa montar em produção', () => {
|
|
102
|
+
expect(() => assertPreviewEnvironment(true)).toThrow(PreviewInProductionError)
|
|
103
|
+
expect(() => assertPreviewEnvironment(false)).not.toThrow()
|
|
104
|
+
})
|
|
105
|
+
})
|