@adatechnology/conversations-ui 0.1.0-rc.5 → 0.1.0-rc.6
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-LITPZCWW.js +1465 -0
- package/dist/index.d.ts +135 -18
- package/dist/index.js +228 -589
- package/dist/preview/index.d.ts +82 -7
- package/dist/preview/index.js +314 -11
- package/dist/{types-C2Yexi8A.d.ts → types-CeixG2Z9.d.ts} +28 -1
- package/package.json +1 -1
- package/src/Avatar.tsx +13 -2
- package/src/ConversationListItem.tsx +18 -2
- package/src/DocumentsLibrary.tsx +322 -0
- package/src/FileIcon.test.ts +46 -1
- package/src/FileIcon.tsx +76 -10
- package/src/Lightbox.tsx +18 -3
- package/src/MessageBubble.tsx +18 -2
- package/src/MessageComposer.tsx +20 -3
- package/src/WhatsAppMessageEditor.tsx +28 -4
- package/src/index.ts +17 -10
- package/src/lib/createMediaUrlResolver.ts +33 -0
- package/src/preview/MediaTypesPreview.tsx +87 -0
- package/src/preview/createMockConversationsApi.ts +62 -8
- package/src/preview/index.ts +5 -0
- package/src/preview/mockDocumentsSearch.test.ts +57 -0
- package/src/preview/previewFileSamples.test.ts +151 -0
- package/src/preview/previewFileSamples.ts +74 -0
- package/src/preview/previewFixtures.ts +140 -8
- package/src/preview/previewMediaSource.test.ts +62 -0
- package/src/preview/previewMediaSource.ts +91 -0
- package/src/providers/types.ts +17 -0
- package/src/settings/WhatsAppCreateTemplateForm.tsx +3 -1
- package/dist/chunk-YWITIIHD.js +0 -728
package/dist/index.d.ts
CHANGED
|
@@ -1,17 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import react__default, { ReactNode, FormEvent } from 'react';
|
|
3
|
-
import {
|
|
4
|
-
export { C as CHANNEL_CAPABILITIES, a as CHANNEL_FILTER_ALL, b as CONVERSATION_CHANNEL, c as ChannelCapabilities, d as ChannelFilter, e as ChannelFilterOption,
|
|
5
|
-
|
|
6
|
-
type ResolveMediaUrl = (message: MessagePayload) => Promise<string | null>;
|
|
7
|
-
interface MediaRendererProps {
|
|
8
|
-
message: MessagePayload;
|
|
9
|
-
onLightbox: (src: string) => void;
|
|
10
|
-
onResolveUrl?: ResolveMediaUrl;
|
|
11
|
-
/** Aplicado no wrapper de cada tipo de mídia — imagem, vídeo, áudio e documento. */
|
|
12
|
-
className?: string;
|
|
13
|
-
}
|
|
14
|
-
declare function MediaRenderer({ message, onLightbox, onResolveUrl, className }: MediaRendererProps): react.JSX.Element | null;
|
|
3
|
+
import { v as MessagePayload, x as ResolveMediaUrl, p as ConversationsFeatures, m as ConversationSummary, h as ConversationChannel, L as ListConversationsParams, o as ConversationsApi, S as SSEProvider, t as ListDocumentsParams, i as ConversationDocument, n as ConversationTemplate } from './types-CeixG2Z9.js';
|
|
4
|
+
export { C as CHANNEL_CAPABILITIES, a as CHANNEL_FILTER_ALL, b as CONVERSATION_CHANNEL, c as ChannelCapabilities, d as ChannelFilter, e as ChannelFilterOption, f as CompanyDocument, g as CompanyDocumentPage, j as ConversationDocumentPage, k as ConversationEventSource, l as ConversationPage, q as ConversationsTheme, r as ConversationsUIConfig, D as DEFAULT_CONVERSATION_CHANNEL, F as FormatContactHandleParams, H as HANDLE_KIND, s as HandleKind, M as MediaRenderer, u as MediaRendererProps, R as REOPEN_MECHANISM, w as ReopenMechanism, y as capabilitiesOf, z as channelFiltersFor, A as contactFlag, B as formatContactHandle } from './types-CeixG2Z9.js';
|
|
15
5
|
|
|
16
6
|
interface MessageBubbleProps {
|
|
17
7
|
message: MessagePayload;
|
|
@@ -21,6 +11,10 @@ interface MessageBubbleProps {
|
|
|
21
11
|
isSelecting?: boolean;
|
|
22
12
|
isSelected?: boolean;
|
|
23
13
|
onToggleSelect?: () => void;
|
|
14
|
+
/**
|
|
15
|
+
* Como buscar a mídia da mensagem. Ausente, o balão usa o `ConversationsApi` do
|
|
16
|
+
* `ConversationsProvider` — passe apenas para sobrescrever (cache próprio, CDN, proxy do host).
|
|
17
|
+
*/
|
|
24
18
|
onResolveMediaUrl?: ResolveMediaUrl;
|
|
25
19
|
className?: string;
|
|
26
20
|
}
|
|
@@ -84,7 +78,14 @@ interface EmojiPickerProps {
|
|
|
84
78
|
}
|
|
85
79
|
declare const EmojiPicker: ({ onSelect, className }: EmojiPickerProps) => react.JSX.Element;
|
|
86
80
|
|
|
81
|
+
interface MessageComposerLabels {
|
|
82
|
+
emoji: string;
|
|
83
|
+
attach: string;
|
|
84
|
+
send: string;
|
|
85
|
+
}
|
|
86
|
+
declare const DEFAULT_MESSAGE_COMPOSER_LABELS: MessageComposerLabels;
|
|
87
87
|
interface MessageComposerProps {
|
|
88
|
+
labels?: Partial<MessageComposerLabels>;
|
|
88
89
|
onSend: (text: string) => void;
|
|
89
90
|
onAttach?: (file: File) => void;
|
|
90
91
|
value?: string;
|
|
@@ -101,9 +102,21 @@ interface MessageComposerClassNames {
|
|
|
101
102
|
root: string;
|
|
102
103
|
field: string;
|
|
103
104
|
}
|
|
104
|
-
declare const MessageComposer: ({ onSend, onAttach, value: externalValue, onChange: externalOnChange, features, placeholder, maxLength, disabled, acceptedFileTypes, className, classNames, }: MessageComposerProps) => react.JSX.Element;
|
|
105
|
+
declare const MessageComposer: ({ onSend, onAttach, value: externalValue, onChange: externalOnChange, features, placeholder, maxLength, disabled, acceptedFileTypes, className, classNames, labels, }: MessageComposerProps) => react.JSX.Element;
|
|
105
106
|
|
|
107
|
+
interface WhatsAppMessageEditorLabels {
|
|
108
|
+
bold: string;
|
|
109
|
+
/** Tooltip da negrito — traz a sintaxe do WhatsApp junto, por isso é separado do `aria-label`. */
|
|
110
|
+
boldHint: string;
|
|
111
|
+
italic: string;
|
|
112
|
+
italicHint: string;
|
|
113
|
+
strikethrough: string;
|
|
114
|
+
strikethroughHint: string;
|
|
115
|
+
insertPlaceholder: (token: string) => string;
|
|
116
|
+
}
|
|
117
|
+
declare const DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS: WhatsAppMessageEditorLabels;
|
|
106
118
|
interface WhatsAppMessageEditorProps {
|
|
119
|
+
labels?: Partial<WhatsAppMessageEditorLabels>;
|
|
107
120
|
value: string;
|
|
108
121
|
onChange: (value: string) => void;
|
|
109
122
|
placeholder?: string;
|
|
@@ -112,7 +125,7 @@ interface WhatsAppMessageEditorProps {
|
|
|
112
125
|
previewLabel?: string;
|
|
113
126
|
emptyPreviewText?: string;
|
|
114
127
|
}
|
|
115
|
-
declare function WhatsAppMessageEditor({ value, onChange, placeholder, placeholders, rows, previewLabel, emptyPreviewText, }: WhatsAppMessageEditorProps): react.JSX.Element;
|
|
128
|
+
declare function WhatsAppMessageEditor({ value, onChange, placeholder, placeholders, rows, previewLabel, emptyPreviewText, labels, }: WhatsAppMessageEditorProps): react.JSX.Element;
|
|
116
129
|
|
|
117
130
|
interface SimpleEmojiPickerProps {
|
|
118
131
|
onSelect: (emoji: string) => void;
|
|
@@ -133,16 +146,30 @@ interface DateDividerProps {
|
|
|
133
146
|
}
|
|
134
147
|
declare function DateDivider({ iso, className, classNames }: DateDividerProps): react.JSX.Element;
|
|
135
148
|
|
|
149
|
+
interface AvatarLabels {
|
|
150
|
+
/** Lido por leitor de tela quando não há nome nem imagem — a silhueta genérica. */
|
|
151
|
+
unnamedContact: string;
|
|
152
|
+
}
|
|
136
153
|
interface AvatarProps {
|
|
137
154
|
name?: string | null;
|
|
138
155
|
avatarUrl?: string;
|
|
139
156
|
size?: 'sm' | 'md' | 'lg';
|
|
140
157
|
className?: string;
|
|
158
|
+
labels?: Partial<AvatarLabels>;
|
|
141
159
|
}
|
|
142
|
-
declare
|
|
160
|
+
declare const DEFAULT_AVATAR_LABELS: AvatarLabels;
|
|
161
|
+
declare function Avatar({ name, avatarUrl, size, className, labels }: AvatarProps): react.JSX.Element;
|
|
143
162
|
|
|
163
|
+
interface ConversationListItemLabels {
|
|
164
|
+
/** Tooltip do ponto vermelho: a janela de atendimento de 24h já fechou. */
|
|
165
|
+
expiredWindow: string;
|
|
166
|
+
/** Tooltip do ponto laranja: a janela de atendimento está perto de fechar. */
|
|
167
|
+
warningWindow: string;
|
|
168
|
+
}
|
|
169
|
+
declare const DEFAULT_CONVERSATION_LIST_ITEM_LABELS: ConversationListItemLabels;
|
|
144
170
|
interface ConversationListItemProps {
|
|
145
171
|
conversation: ConversationSummary;
|
|
172
|
+
labels?: Partial<ConversationListItemLabels>;
|
|
146
173
|
active?: boolean;
|
|
147
174
|
selected?: boolean;
|
|
148
175
|
onClick?: () => void;
|
|
@@ -159,7 +186,7 @@ interface ConversationListItemProps {
|
|
|
159
186
|
*/
|
|
160
187
|
highlightActive?: boolean;
|
|
161
188
|
}
|
|
162
|
-
declare const ConversationListItem: ({ conversation, active, selected, onClick, onSelect, showDivider, highlightActive, }: ConversationListItemProps) => react.JSX.Element;
|
|
189
|
+
declare const ConversationListItem: ({ conversation, active, selected, onClick, onSelect, showDivider, highlightActive, labels, }: ConversationListItemProps) => react.JSX.Element;
|
|
163
190
|
|
|
164
191
|
type ToastType = 'success' | 'error' | 'info';
|
|
165
192
|
interface ToastContextValue {
|
|
@@ -179,12 +206,19 @@ interface StatusTicksProps {
|
|
|
179
206
|
}
|
|
180
207
|
declare function StatusTicks({ status, title }: StatusTicksProps): react.JSX.Element;
|
|
181
208
|
|
|
209
|
+
interface LightboxLabels {
|
|
210
|
+
/** Texto alternativo quando a imagem não tem legenda — sem ele o leitor de tela anuncia a URL. */
|
|
211
|
+
imageAlt: string;
|
|
212
|
+
close: string;
|
|
213
|
+
}
|
|
182
214
|
interface LightboxProps {
|
|
183
215
|
imageUrl: string;
|
|
184
216
|
caption?: string;
|
|
185
217
|
onClose: () => void;
|
|
218
|
+
labels?: Partial<LightboxLabels>;
|
|
186
219
|
}
|
|
187
|
-
declare
|
|
220
|
+
declare const DEFAULT_LIGHTBOX_LABELS: LightboxLabels;
|
|
221
|
+
declare function Lightbox({ imageUrl, caption, onClose, labels }: LightboxProps): react.JSX.Element;
|
|
188
222
|
|
|
189
223
|
interface FileIconProps {
|
|
190
224
|
filename?: string;
|
|
@@ -382,6 +416,76 @@ declare function WindowExpiredNotice({ onSendTemplate, disabled, labels: labelsO
|
|
|
382
416
|
*/
|
|
383
417
|
declare function isWindowBlocking(window: ConversationWindow): boolean;
|
|
384
418
|
|
|
419
|
+
/**
|
|
420
|
+
* Biblioteca de arquivos de TODAS as conversas — a tela de Documentos do painel, fora do
|
|
421
|
+
* atendimento.
|
|
422
|
+
*
|
|
423
|
+
* Distinta do `ConversationDocumentsPanel`: aquele parte de uma conversa aberta e vive dentro dela;
|
|
424
|
+
* esta varre a empresa e por isso mostra de qual conversa cada arquivo veio, com o número
|
|
425
|
+
* clicável. Sem essa referência, uma lista global de anexos não responde nenhuma pergunta.
|
|
426
|
+
*/
|
|
427
|
+
interface DocumentsLibraryLabels {
|
|
428
|
+
title: string;
|
|
429
|
+
searchPlaceholder: string;
|
|
430
|
+
empty: string;
|
|
431
|
+
noResults: string;
|
|
432
|
+
loading: string;
|
|
433
|
+
failure: string;
|
|
434
|
+
view: string;
|
|
435
|
+
download: string;
|
|
436
|
+
openConversation: string;
|
|
437
|
+
sourceFilterAll: string;
|
|
438
|
+
sourceFilterCustomer: string;
|
|
439
|
+
sourceFilterTeam: string;
|
|
440
|
+
sortMostRecent: string;
|
|
441
|
+
sortOldest: string;
|
|
442
|
+
clearFilters: string;
|
|
443
|
+
total: (count: number) => string;
|
|
444
|
+
page: (current: number, last: number) => string;
|
|
445
|
+
}
|
|
446
|
+
declare const DEFAULT_DOCUMENTS_LIBRARY_LABELS: DocumentsLibraryLabels;
|
|
447
|
+
interface DocumentsLibraryClassNames {
|
|
448
|
+
root: string;
|
|
449
|
+
title: string;
|
|
450
|
+
filters: string;
|
|
451
|
+
search: string;
|
|
452
|
+
sourceSelect: string;
|
|
453
|
+
sortButton: string;
|
|
454
|
+
clearButton: string;
|
|
455
|
+
status: string;
|
|
456
|
+
list: string;
|
|
457
|
+
item: string;
|
|
458
|
+
conversationLink: string;
|
|
459
|
+
filename: string;
|
|
460
|
+
meta: string;
|
|
461
|
+
pagination: string;
|
|
462
|
+
}
|
|
463
|
+
interface DocumentsLibraryProps {
|
|
464
|
+
/** Itens por página. O total vem do servidor. */
|
|
465
|
+
perPage?: number;
|
|
466
|
+
/** Abrir a conversa de origem. Ausente, o número aparece como texto e não como link. */
|
|
467
|
+
onOpenConversation?: (conversationId: string) => void;
|
|
468
|
+
labels?: Partial<DocumentsLibraryLabels>;
|
|
469
|
+
className?: string;
|
|
470
|
+
classNames?: Partial<DocumentsLibraryClassNames>;
|
|
471
|
+
}
|
|
472
|
+
declare function DocumentsLibrary({ perPage, onOpenConversation, labels: labelsOverride, className, classNames, }: DocumentsLibraryProps): react.JSX.Element | null;
|
|
473
|
+
|
|
474
|
+
/**
|
|
475
|
+
* Arquivos trocados na conversa. Sai do transcript e vira lista própria porque anexo é o que o
|
|
476
|
+
* atendente mais precisa reencontrar depois — rolar meses de mensagens para achar um comprovante é
|
|
477
|
+
* o caso que a busca por documento existe para eliminar.
|
|
478
|
+
*
|
|
479
|
+
* Usa `useConversationDocuments`, então funciona com qualquer `ConversationsApi`. Host sem
|
|
480
|
+
* biblioteca de documentos cai no estado vazio, sem quebrar.
|
|
481
|
+
*/
|
|
482
|
+
/** Origens que o filtro oferece. `all` não é origem — é a ausência de filtro. */
|
|
483
|
+
declare const DOCUMENT_SOURCE_FILTER: {
|
|
484
|
+
readonly ALL: "all";
|
|
485
|
+
readonly CUSTOMER: "customer";
|
|
486
|
+
readonly TEAM: "team";
|
|
487
|
+
};
|
|
488
|
+
type DocumentSourceFilter = (typeof DOCUMENT_SOURCE_FILTER)[keyof typeof DOCUMENT_SOURCE_FILTER];
|
|
385
489
|
interface ConversationDocumentsPanelLabels {
|
|
386
490
|
toggle: string;
|
|
387
491
|
title: string;
|
|
@@ -605,6 +709,7 @@ interface WhatsAppCreateTemplateFormLabels {
|
|
|
605
709
|
sectionDescription: string;
|
|
606
710
|
nameLabel: string;
|
|
607
711
|
nameHint: string;
|
|
712
|
+
namePlaceholder: string;
|
|
608
713
|
categoryLabel: string;
|
|
609
714
|
languageLabel: string;
|
|
610
715
|
headerLabel: string;
|
|
@@ -828,4 +933,16 @@ interface AsyncResourceState<T> {
|
|
|
828
933
|
refetch: () => Promise<void>;
|
|
829
934
|
}
|
|
830
935
|
|
|
831
|
-
|
|
936
|
+
/**
|
|
937
|
+
* Resolve a mídia de uma mensagem numa URL exibível, usando só o `ConversationsApi`.
|
|
938
|
+
*
|
|
939
|
+
* Mora no pacote, e não em cada host, porque a regra não tem nada de específico de produto: é a
|
|
940
|
+
* tradução de `uploadId`/`mediaId` pelos dois métodos que o próprio contrato já declara. Deixá-la no
|
|
941
|
+
* host significava que todo projeto que adotasse o SDK reescreveria as mesmas oito linhas — e, na
|
|
942
|
+
* prática, ninguém escrevia: o `MediaRenderer` só busca mídia pela porta `onResolveMediaUrl`, então
|
|
943
|
+
* onde nada era injetado foto, vídeo e áudio ficavam no placeholder para sempre.
|
|
944
|
+
*/
|
|
945
|
+
|
|
946
|
+
declare function createMediaUrlResolver(api: Pick<ConversationsApi, 'getDocumentUrl' | 'getMediaProxyUrl'>): ResolveMediaUrl;
|
|
947
|
+
|
|
948
|
+
export { type AsyncResourceState, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarLabels, type AvatarProps, type BuildTranscriptTextParams, CHANNEL_BRAND_COLOR, CONVERSATION_WINDOW, ChannelIcon, type ChannelIconProps, ConversationChannel, type ConversationContextEntry, ConversationContextPanel, type ConversationContextPanelClassNames, type ConversationContextPanelLabels, type ConversationContextPanelProps, ConversationDocument, ConversationDocumentsPanel, type ConversationDocumentsPanelClassNames, type ConversationDocumentsPanelLabels, type ConversationDocumentsPanelProps, ConversationHeader, type ConversationHeaderClassNames, type ConversationHeaderLabels, type ConversationHeaderProps, ConversationListItem, type ConversationListItemLabels, type ConversationListItemProps, type ConversationLocales, ConversationLocalesProvider, type ConversationLocalesProviderProps, type ConversationRealtimeHandler, ConversationRow, type ConversationRowClassNames, type ConversationRowProps, ConversationSummary, ConversationTemplate, ConversationWallpaper, type ConversationWallpaperProps, type ConversationWindow, ConversationsApi, ConversationsFeatures, ConversationsProvider, DEFAULT_AVATAR_LABELS, DEFAULT_CONVERSATION_CONTEXT_LABELS, DEFAULT_CONVERSATION_DOCUMENTS_LABELS, DEFAULT_CONVERSATION_HEADER_LABELS, DEFAULT_CONVERSATION_LIST_ITEM_LABELS, DEFAULT_DOCUMENTS_LIBRARY_LABELS, DEFAULT_LIGHTBOX_LABELS, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_TEMPLATES_SETTINGS_LABELS, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, DEFAULT_WINDOW_EXPIRED_LABELS, DOCUMENT_SOURCE_FILTER, DateDivider, type DateDividerClassNames, type DateDividerProps, type DocumentSourceFilter, DocumentsLibrary, type DocumentsLibraryClassNames, type DocumentsLibraryLabels, type DocumentsLibraryProps, EmojiPicker, type EmojiPickerProps, FileIcon, type FileIconProps, Lightbox, type LightboxLabels, type LightboxProps, ListConversationsParams, ListDocumentsParams, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerClassNames, type MessageComposerLabels, type MessageComposerProps, MessagePayload, MessageTail, MessageText, type MessageTextProps, MessageTimestamp, NARROW_MAX_WIDTH_PX, ResolveMediaUrl, SSEProvider, SimpleEmojiPicker, type SimpleEmojiPickerProps, StatusTicks, type StatusTicksProps, TEMPLATE_SETTINGS_TAB, type TemplateSettingsTab, ToastProvider, type TopicItem, TopicsForm, type TopicsFormLabels, type TopicsFormProps, type UseConversationActionsResult, type UseConversationContextResult, type UseConversationDocumentsParams, type UseConversationDocumentsResult, type UseConversationListParams, type UseConversationListResult, type UseConversationMessagesResult, type UseInboxActionsResult, type UseWaitingNotificationsLabels, type UseWaitingNotificationsParams, type UseWaitingNotificationsResult, WINDOW_FILTERS, WelcomeFarewellForm, type WelcomeFarewellFormLabels, type WelcomeFarewellFormProps, WhatsAppCreateTemplateForm, type WhatsAppCreateTemplateFormLabels, type WhatsAppCreateTemplateFormProps, type WhatsAppCreateTemplateResult, type WhatsAppCreateTemplateState, WhatsAppMessageEditor, type WhatsAppMessageEditorLabels, type WhatsAppMessageEditorProps, type WhatsAppTemplateHeaderType, WhatsAppTemplateSettingsForm, type WhatsAppTemplateSettingsFormLabels, type WhatsAppTemplateSettingsFormProps, type WhatsAppTemplateSummary, type WhatsAppTemplateVariableSuggestion, WhatsAppTemplatesSettings, type WhatsAppTemplatesSettingsLabels, type WhatsAppTemplatesSettingsProps, WindowExpiredNotice, type WindowExpiredNoticeLabels, type WindowExpiredNoticeProps, type WindowOfParams, buildTranscriptFilename, buildTranscriptText, createMediaUrlResolver, downloadTextFile, formatDateTime, formatFileSize, formatPhone, formatStalledFor, formatTimestamp, htmlToWA, isSameDay, isWindowBlocking, parseWhatsAppFormatting, phoneInitials, toast, useConversationActions, useConversationContext, useConversationDocuments, useConversationList, useConversationLocales, useConversationMessages, useConversationRealtime, useConversations, useDarkMode, useGlobalRealtime, useInboxActions, useIsDarkTheme, useIsNarrow, useToast, useWaitingNotifications, waToHTML, waToHTMLInline, windowOf };
|