@adatechnology/conversations-ui 0.1.0-rc.2 → 0.1.0-rc.20

package/dist/styles.css

@@ -9,3 +9,201 @@
   background-color: #0b141a;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2319232a' stroke-width='1.2' opacity='0.9'%3E%3Ccircle cx='15' cy='15' r='3'/%3E%3Cpath d='M40 10 q5 8 0 16 q-5 -8 0 -16z'/%3E%3Ccircle cx='70' cy='28' r='2'/%3E%3Cpath d='M18 55 l6 6 m-6 0 l6 -6'/%3E%3Ccircle cx='55' cy='68' r='2.5'/%3E%3Cpath d='M85 58 q6 6 0 12 q-6 -6 0 -12z'/%3E%3Ccircle cx='8' cy='85' r='2'/%3E%3Cpath d='M65 90 l5 5 m-5 0 l5 -5'/%3E%3C/g%3E%3C/svg%3E");
 }
+.cv-header-action {
+  border: 1px solid rgb(203 213 225);
+  border-radius: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+  background: transparent;
+  cursor: pointer;
+}
+.cv-header-action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.dark .cv-header-action {
+  border-color: rgb(71 85 105);
+  color: rgb(226 232 240);
+}
+.cv-header-icon {
+  border: 1px solid rgb(203 213 225);
+  border-radius: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  background: transparent;
+  cursor: pointer;
+  line-height: 1;
+}
+.cv-header-icon--active {
+  background: rgb(241 245 249);
+  border-color: rgb(148 163 184);
+}
+.cv-header-icon:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.dark .cv-header-icon {
+  border-color: rgb(71 85 105);
+}
+.dark .cv-header-icon--active {
+  background: rgb(51 65 85);
+}
+.cv-header-action--primary {
+  background: rgb(37 99 235);
+  border-color: rgb(37 99 235);
+  color: white;
+  font-weight: 500;
+}
+.cv-header-action--danger {
+  background: rgb(239 68 68);
+  border-color: rgb(239 68 68);
+  color: white;
+  font-weight: 500;
+}
+.cv-subtab {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: rgb(100 116 139);
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+}
+.cv-subtab--active {
+  color: inherit;
+  font-weight: 500;
+  border-bottom-color: rgb(37 99 235);
+}
+.cv-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  background: rgb(241 245 249);
+  color: rgb(71 85 105);
+}
+.cv-pill--success {
+  background: rgb(220 252 231);
+  color: rgb(21 128 61);
+}
+.cv-pill--warning {
+  background: rgb(254 243 199);
+  color: rgb(146 64 14);
+}
+.cv-pill--danger {
+  background: rgb(255 237 213);
+  color: rgb(194 65 12);
+}
+.dark .cv-pill {
+  background: rgb(51 65 85);
+  color: rgb(203 213 225);
+}
+.dark .cv-pill--success {
+  background: rgb(20 83 45);
+  color: rgb(187 247 208);
+}
+.dark .cv-pill--warning {
+  background: rgb(120 53 15);
+  color: rgb(253 230 138);
+}
+.dark .cv-pill--danger {
+  background: rgb(124 45 18);
+  color: rgb(254 215 170);
+}
+.cv-row:hover {
+  background: #f0f2f5;
+}
+.cv-row--active,
+.cv-row--active:hover {
+  background: #f0f2f5;
+}
+.dark .cv-row:hover {
+  background: rgb(30 41 59);
+}
+.dark .cv-row--active,
+.dark .cv-row--active:hover {
+  background: rgb(30 41 59);
+}
+.cv-back {
+  border: 1px solid rgb(203 213 225);
+  border-radius: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  background: transparent;
+  cursor: pointer;
+  line-height: 1;
+}
+@media (min-width: 1024px) {
+  .cv-back {
+    display: none;
+  }
+}
+.dark .cv-back {
+  border-color: rgb(71 85 105);
+  color: rgb(226 232 240);
+}
+.cv-only-wide {
+  display: none;
+}
+@media (min-width: 1024px) {
+  .cv-only-wide {
+    display: inline;
+  }
+}
+.cv-only-narrow {
+  display: inline-flex;
+}
+@media (min-width: 1024px) {
+  .cv-only-narrow {
+    display: none;
+  }
+}
+.cv-menu {
+  position: relative;
+}
+.cv-menu-panel {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.25rem);
+  z-index: 20;
+  min-width: 12rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.375rem;
+  border: 1px solid rgb(203 213 225);
+  border-radius: 0.5rem;
+  background: #fff;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+.dark .cv-menu-panel {
+  background: rgb(30 41 59);
+  border-color: rgb(71 85 105);
+}
+.cv-menu-panel .cv-header-action {
+  text-align: left;
+}
+@media (max-width: 1023px) {
+  .cv-touch {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .cv-back {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .cv-menu-panel .cv-touch {
+    min-height: 44px;
+  }
+}
+@media (max-width: 1023px) {
+  .cv-menu-panel {
+    position: fixed;
+    right: 0.75rem;
+    left: auto;
+    top: auto;
+    max-width: calc(100vw - 1.5rem);
+  }
+}

package/dist/types-O7kMP1Yn.d.ts

@@ -0,0 +1,416 @@
+import * as react from 'react';
+
+interface ConversationsUIConfig {
+    apiBaseUrl: string;
+    theme?: ConversationsTheme;
+    features?: ConversationsFeatures;
+}
+interface ConversationsTheme {
+    primaryColor?: string;
+    backgroundColor?: string;
+    bubbleSent?: string;
+    bubbleReceived?: string;
+    textPrimary?: string;
+    textSecondary?: string;
+}
+interface ConversationsFeatures {
+    audio?: boolean;
+    documents?: boolean;
+    emoji?: boolean;
+    darkMode?: boolean;
+}
+/**
+ * Recorte do bloco `interactive` da Meta que a UI precisa para desenhar o menu. Fica solto (e não
+ * espelhando o contrato inteiro) porque o que chega do banco é o payload cru já enviado ao
+ * WhatsApp: qualquer campo que a UI não conheça é ignorado, nunca causa erro de render.
+ */
+interface InteractiveOption {
+    id: string;
+    title: string;
+    description?: string;
+}
+interface InteractiveSection {
+    title?: string;
+    rows?: InteractiveOption[];
+}
+interface InteractivePayload {
+    type?: 'button' | 'list' | string;
+    header?: {
+        text?: string;
+    };
+    body?: {
+        text?: string;
+    };
+    footer?: {
+        text?: string;
+    };
+    action?: {
+        /** Rótulo do botão que abre a lista — só existe em `type: 'list'`. */
+        button?: string;
+        sections?: InteractiveSection[];
+        buttons?: {
+            reply?: InteractiveOption;
+        }[];
+    };
+}
+/** Como o cliente respondeu a um menu: por botão ou por item de lista. */
+type InteractiveSelection = {
+    readonly kind: 'button' | 'list';
+    readonly option: InteractiveOption;
+};
+interface MessagePayload {
+    id: string;
+    type: 'text' | 'image' | 'video' | 'audio' | 'document' | 'sticker' | 'template' | 'interactive';
+    /** Payload cru da mensagem. Em `type: 'interactive'`, carrega o menu que o cliente vê. */
+    payload?: InteractivePayload | null;
+    content?: string;
+    caption?: string;
+    mediaUrl?: string;
+    base64?: string;
+    uploadId?: string;
+    mediaId?: string;
+    mimeType?: string;
+    filename?: string;
+    sizeBytes?: number;
+    direction: 'inbound' | 'outbound';
+    sender: 'bot' | 'customer' | 'agent';
+    timestamp: string;
+    status?: 'sent' | 'delivered' | 'read' | 'failed';
+    readAt?: string;
+    agentName?: string | null;
+    templateName?: string;
+    /**
+     * Veredito de moderação vindo do backend — a UI só exibe, nunca calcula. Dicionário no browser
+     * seria peso morto e daria veredito diferente por versão de cliente.
+     *
+     * `null`/ausente = não avaliado (moderação desligada, ou mensagem anterior ao recurso), que é
+     * diferente de avaliado e limpo.
+     */
+    moderation?: {
+        isOffensive: boolean;
+        terms: string[];
+    } | null;
+    isFirstInGroup?: boolean;
+    isLastInGroup?: boolean;
+}
+
+type ResolveMediaUrl = (message: MessagePayload) => Promise<string | null>;
+interface MediaRendererProps {
+    message: MessagePayload;
+    onLightbox: (src: string) => void;
+    onResolveUrl?: ResolveMediaUrl;
+    /** Aplicado no wrapper de cada tipo de mídia — imagem, vídeo, áudio e documento. */
+    className?: string;
+}
+declare function MediaRenderer({ message, onLightbox, onResolveUrl, className }: MediaRendererProps): react.JSX.Element | null;
+
+/**
+ * Gravação de áudio no simulador, pelo microfone do próprio navegador.
+ *
+ * Existe porque áudio é o formato que mais chega de cliente real e o que mais quebra fluxo: sem
+ * poder gravar aqui, testar o caminho de transcrição exigia mandar mensagem do celular de alguém.
+ *
+ * O arquivo gravado sai daqui como `File` e segue exatamente o mesmo caminho de um anexo — quem
+ * hospeda e devolve o `mediaId` é o host, via `uploadMedia`.
+ */
+interface AudioRecorderButtonLabels {
+    start: string;
+    stop: string;
+    unsupported: string;
+    denied: string;
+    review: string;
+    send: string;
+    discard: string;
+    empty: string;
+}
+declare const DEFAULT_AUDIO_RECORDER_BUTTON_LABELS: AudioRecorderButtonLabels;
+interface AudioRecorderButtonProps {
+    onRecorded: (file: File) => void | Promise<void>;
+    onFailure?: (message: string) => void;
+    /**
+     * Avisa quando a gravação começa e termina. O botão é um interruptor — o segundo toque é que
+     * envia — e sem um aviso fora dele o operador grava, não vê nada acontecer e desiste achando
+     * que o microfone está quebrado.
+     */
+    onRecordingChange?: (isRecording: boolean) => void;
+    /**
+     * Abre uma etapa de revisão quando a gravação para: o áudio toca ali mesmo e só sai depois de
+     * confirmado. Ligado por padrão — voz é o único anexo que quem envia não viu antes de mandar, e
+     * sem ouvir não há como saber se o microfone captou alguma coisa. Desligar volta ao envio direto.
+     */
+    reviewBeforeSend?: boolean;
+    /**
+     * Teto de duração da gravação, em milissegundos. Passado o tempo, o gravador para e envia o que
+     * tem. Produto com limite próprio sobrescreve.
+     */
+    maxDurationMilliseconds?: number;
+    labels?: Partial<AudioRecorderButtonLabels>;
+    disabled?: boolean;
+}
+/**
+ * Cinco minutos: com o codec de voz do WhatsApp isso dá menos de 3MB, folgado dentro do teto de
+ * 16MB que a Meta impõe a áudio, e é mais do que qualquer recado de cliente. O corte automático
+ * existe porque gravação esquecida aberta só se descobre no envio, com o arquivo inteiro perdido.
+ */
+declare const DEFAULT_MAX_RECORDING_MILLISECONDS: number;
+declare function AudioRecorderButton({ onRecorded, onFailure, onRecordingChange, reviewBeforeSend, maxDurationMilliseconds, labels, disabled, }: AudioRecorderButtonProps): react.JSX.Element;
+
+/**
+ * Canal de origem da conversa e o que cada um permite.
+ *
+ * Existe porque as regras que a inbox precisa respeitar não são do WhatsApp, são **de cada canal**:
+ * a janela de sessão, o jeito de reabrir a conversa e o formato do identificador do contato mudam
+ * entre WhatsApp, Messenger, Instagram e chat de site. Tratar a regra do WhatsApp como universal
+ * faria a UI bloquear o composer num chat de site, onde janela nenhuma existe.
+ *
+ * `whatsapp` é o padrão em todo lugar: instalações que ainda não informam canal continuam
+ * funcionando exatamente como antes.
+ */
+declare const CONVERSATION_CHANNEL: {
+    readonly WHATSAPP: "whatsapp";
+    readonly MESSENGER: "messenger";
+    readonly INSTAGRAM: "instagram";
+    readonly WEBCHAT: "webchat";
+};
+type ConversationChannel = (typeof CONVERSATION_CHANNEL)[keyof typeof CONVERSATION_CHANNEL];
+declare const DEFAULT_CONVERSATION_CHANNEL: ConversationChannel;
+/** Como o canal reabre uma conversa fora da janela de sessão. */
+declare const REOPEN_MECHANISM: {
+    readonly TEMPLATE: "template";
+    readonly TAG: "tag";
+    readonly NONE: "none";
+};
+type ReopenMechanism = (typeof REOPEN_MECHANISM)[keyof typeof REOPEN_MECHANISM];
+/** Natureza do identificador do contato — decide como exibi-lo. */
+declare const HANDLE_KIND: {
+    readonly PHONE: "phone";
+    readonly USERNAME: "username";
+    readonly SESSION: "session";
+};
+type HandleKind = (typeof HANDLE_KIND)[keyof typeof HANDLE_KIND];
+type ChannelCapabilities = {
+    readonly label: string;
+    readonly icon: string;
+    readonly hasSessionWindow: boolean;
+    readonly windowHours: number;
+    readonly reopenMechanism: ReopenMechanism;
+    readonly handleKind: HandleKind;
+};
+declare const CHANNEL_CAPABILITIES: Readonly<Record<ConversationChannel, ChannelCapabilities>>;
+declare function capabilitiesOf(channel: ConversationChannel | undefined): ChannelCapabilities;
+declare const CHANNEL_FILTER_ALL = "all";
+type ChannelFilter = ConversationChannel | typeof CHANNEL_FILTER_ALL;
+type ChannelFilterOption = {
+    readonly value: ChannelFilter;
+    readonly label: string;
+};
+/**
+ * Opções derivadas do que existe na lista, não do catálogo inteiro: oferecer Instagram numa conta
+ * que só tem WhatsApp promete um recorte que nunca traz resultado.
+ *
+ * Devolve vazio com menos de dois canais — um filtro de opção única não filtra nada, e a barra só
+ * ocuparia espaço. O host usa isso para esconder a seção.
+ */
+declare function channelFiltersFor(conversations: readonly {
+    readonly channel?: ConversationChannel | undefined;
+}[]): ChannelFilterOption[];
+type FormatContactHandleParams = {
+    readonly handle: string;
+    readonly channel?: ConversationChannel | undefined;
+};
+/**
+ * Exibição do identificador conforme a natureza dele. Formatar tudo como telefone — o que a UI
+ * fazia — transforma um `@perfil` do Instagram em dígitos sem sentido.
+ */
+declare function formatContactHandle(params: FormatContactHandleParams): string;
+/** Bandeira só faz sentido quando o identificador é telefone. */
+declare function contactFlag(params: FormatContactHandleParams): string;
+
+interface ListConversationsParams {
+    page?: number;
+    limit?: number;
+    waitingHuman?: boolean;
+    search?: string;
+    /**
+     * Recortes que só o produto conhece (tipo de financiamento, carteira, campanha) repassados
+     * crus ao backend dele. É o que evita o vocabulário de uma vertical virar campo fixo aqui:
+     * o pacote transporta o filtro sem saber o que ele significa.
+     */
+    filters?: Record<string, string | undefined>;
+}
+/**
+ * Página com o total, para a UI conseguir desenhar controles de paginação.
+ *
+ * `fetchConversations` devolve isto **ou** o array puro de antes: implementações existentes
+ * continuam válidas sem mudar uma linha, e quem precisa paginar passa a ter o total. Sem a união
+ * seria impossível saber se um retorno curto é a última página ou uma página cheia por acaso.
+ */
+interface ConversationPage {
+    conversations: ConversationSummary[];
+    total: number;
+}
+interface ListDocumentsParams {
+    search?: string;
+    page?: number;
+    /** Tamanho da página. Sem ele, `page` sozinho não define fatia nenhuma. */
+    limit?: number;
+    /** Origem do arquivo (`customer`, `agent`, `bot`…). O vocabulário é do host. */
+    source?: string;
+    sortDirection?: 'asc' | 'desc';
+}
+/** Arquivo na biblioteca da empresa: o mesmo da conversa, mais de qual conversa veio. */
+interface CompanyDocument extends ConversationDocument {
+    conversationId: string;
+}
+interface CompanyDocumentPage {
+    documents: CompanyDocument[];
+    total: number;
+}
+interface ConversationDocumentPage {
+    documents: ConversationDocument[];
+    total: number;
+}
+/**
+ * Template disponível para envio a partir da inbox. Distinto do `WhatsAppTemplateSummary` de
+ * `settings/`, e de propósito: aquele serve ao formulário que **edita** template e carrega o que
+ * a edição precisa (`shortId`, `variableCount`); este serve a quem só vai **escolher um para
+ * enviar**, e pedir os campos de edição obrigaria todo host a produzi-los sem uso.
+ */
+interface ConversationTemplate {
+    name: string;
+    language: string;
+    status: string;
+    category?: string;
+    bodyText?: string | null;
+}
+interface ConversationsApi {
+    fetchMessages(conversationId: string, params?: {
+        limit?: number;
+        before?: string;
+    }): Promise<MessagePayload[]>;
+    fetchConversations(params?: ListConversationsParams): Promise<ConversationSummary[] | ConversationPage>;
+    sendMessage(conversationId: string, text: string): Promise<MessagePayload>;
+    sendMedia(conversationId: string, data: {
+        base64: string;
+        mimeType: string;
+        filename: string;
+        caption?: string;
+    }): Promise<MessagePayload>;
+    /**
+     * `templateName` é opcional porque reabrir a janela é a operação, e escolher *qual* template a
+     * usa nem sempre é decisão da UI: backends que guardam um template padrão configurado só
+     * precisam do "reabra". Exigir o nome obrigaria toda inbox a listar templates antes de poder
+     * mandar o primeiro — e a listagem é `listTemplates?`, opcional.
+     */
+    sendTemplate(conversationId: string, data: {
+        templateName?: string;
+        languageCode?: string;
+        bodyParams?: string[];
+    }): Promise<void>;
+    markRead(conversationId: string): Promise<void>;
+    getContext(conversationId: string): Promise<Record<string, unknown>>;
+    getDocuments(conversationId: string, params?: ListDocumentsParams): Promise<ConversationDocument[] | ConversationDocumentPage>;
+    /**
+     * `disposition` decide entre abrir no navegador e baixar. É o backend que assina a URL e grava
+     * o `Content-Disposition` nela, então a escolha precisa viajar na chamada — depois de assinada
+     * não há como o cliente mudá-la. Ausente = o padrão do host.
+     */
+    getDocumentUrl(uploadId: string, disposition?: 'inline' | 'attachment'): Promise<string>;
+    /**
+     * Baixa vários arquivos num zip único.
+     *
+     * **Opcional por capacidade:** montar zip exige o host LER os bytes do storage, o que nem toda
+     * instalação faz — as que só assinam URL não conseguem. Ausente, o painel esconde a seleção em
+     * lote em vez de oferecer um botão que falha.
+     */
+    downloadDocumentsArchive?(conversationId: string, uploadIds: readonly string[]): Promise<Blob>;
+    /**
+     * Biblioteca de TODAS as conversas, para uma tela de Documentos fora do atendimento.
+     *
+     * Opcional por capacidade: host que só expõe anexo dentro da conversa não implementa, e o
+     * componente de biblioteca simplesmente não é usável — melhor que uma tela que sempre erra.
+     */
+    getAllDocuments?(params?: ListDocumentsParams): Promise<CompanyDocumentPage>;
+    getMediaProxyUrl(mediaId: string): Promise<{
+        mimeType: string;
+        data: string;
+    }>;
+    /**
+     * Operações de atendimento humano. **Opcionais por capacidade, não por descuido:** nem toda
+     * inbox tem fila humana — um canal só-bot, ou um chat de site sem operador, não sabe o que é
+     * assumir conversa. Quem não implementa não ganha o botão, em vez de ganhar um botão que
+     * estoura no clique. Os hooks devolvem `undefined` para a ação ausente, e é isso que a UI
+     * consulta para decidir se desenha a afordância.
+     */
+    takeover?(conversationId: string): Promise<void>;
+    release?(conversationId: string): Promise<void>;
+    /** Encerra o atendimento. Despedida, se houver, é decisão do host — o pacote não a inventa. */
+    finalize?(conversationId: string): Promise<void>;
+    markAllRead?(): Promise<void>;
+    listTemplates?(): Promise<ConversationTemplate[]>;
+    /**
+     * Transcrição completa gerada pelo servidor. Existe ao lado de `buildTranscriptText`, que monta
+     * a partir das mensagens já em memória: a tela costuma ter só a última página carregada, e
+     * exportar dali entregaria um recorte parcial com cara de histórico inteiro. Opcional porque
+     * nem todo backend expõe a rota — quem não tem continua usando o builder local.
+     */
+    exportTranscript?(conversationId: string): Promise<{
+        transcript: string;
+        filename: string;
+    }>;
+}
+/**
+ * Superfície mínima de stream que o pacote consome — exatamente o que `useConversationRealtime`
+ * usa: assinar 'message', desassinar e fechar. Deliberadamente estrutural em vez de
+ * `EventSource`: sem servidor HTTP não existe `EventSource`, e é isso que impediria alimentar a
+ * inbox com dados mockados em desenvolvimento. Um `EventSource` nativo satisfaz este tipo, então
+ * quem já implementa `SSEProvider` continua válido sem mudança.
+ */
+interface ConversationEventSource {
+    addEventListener(type: string, listener: (event: MessageEvent) => void): void;
+    removeEventListener(type: string, listener: (event: MessageEvent) => void): void;
+    close(): void;
+}
+interface SSEProvider {
+    connectConversationStream(conversationId: string): ConversationEventSource;
+    connectGlobalStream(): ConversationEventSource;
+}
+interface ConversationSummary {
+    id: string;
+    /**
+     * @deprecated Use `contactId` com `channel`. Mantido obrigatório para não quebrar quem já
+     * consome; some quando o segundo canal entrar em produção.
+     */
+    whatsappNumber: string;
+    /** Identificador neutro do contato. Ausente = usa `whatsappNumber`. */
+    contactId?: string;
+    /** Ausente = `whatsapp`, o comportamento de antes desta mudança. */
+    channel?: ConversationChannel;
+    clientName?: string;
+    lastContent?: string;
+    lastDirection?: 'inbound' | 'outbound';
+    lastAt: string;
+    lastInboundAt: string | null;
+    mode: 'bot' | 'human';
+    assignedUserId: string | null;
+    waitingHuman: boolean;
+    unread: number;
+    currentState: string;
+    /**
+     * Atributos que só o produto conhece e desenha (tipo de financiamento, carteira, campanha). É a
+     * contraparte de leitura do `filters` de `ListConversationsParams`: o pacote transporta e nunca
+     * interpreta. Sem isto, exibir um selo próprio na linha exigiria o host manter uma segunda
+     * consulta paralela à mesma listagem — a implementação duplicada que o pacote existe para evitar.
+     */
+    attributes?: Record<string, string | undefined>;
+}
+interface ConversationDocument {
+    id: string;
+    filename: string;
+    mimeType: string;
+    sizeBytes: number;
+    source: string;
+    linkedAt: string;
+}
+
+export { AudioRecorderButton as A, type ListDocumentsParams as B, CHANNEL_CAPABILITIES as C, DEFAULT_AUDIO_RECORDER_BUTTON_LABELS as D, type MediaRendererProps as E, type FormatContactHandleParams as F, type MessagePayload as G, HANDLE_KIND as H, type InteractiveOption as I, type ReopenMechanism as J, type ResolveMediaUrl as K, type ListConversationsParams as L, MediaRenderer as M, capabilitiesOf as N, channelFiltersFor as O, contactFlag as P, formatContactHandle as Q, REOPEN_MECHANISM as R, type SSEProvider as S, type AudioRecorderButtonLabels as a, type AudioRecorderButtonProps as b, CHANNEL_FILTER_ALL as c, CONVERSATION_CHANNEL as d, type ChannelCapabilities as e, type ChannelFilter as f, type ChannelFilterOption as g, type CompanyDocument as h, type CompanyDocumentPage as i, type ConversationChannel as j, type ConversationDocument as k, type ConversationDocumentPage as l, type ConversationEventSource as m, type ConversationPage as n, type ConversationSummary as o, type ConversationTemplate as p, type ConversationsApi as q, type ConversationsFeatures as r, type ConversationsTheme as s, type ConversationsUIConfig as t, DEFAULT_CONVERSATION_CHANNEL as u, DEFAULT_MAX_RECORDING_MILLISECONDS as v, type HandleKind as w, type InteractivePayload as x, type InteractiveSection as y, type InteractiveSelection as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.2",
+  "version": "0.1.0-rc.20",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -19,13 +19,19 @@
       "import": "./dist/channel/index.js",
       "types": "./dist/channel/index.d.ts"
     },
+    "./preview": {
+      "import": "./dist/preview/index.js",
+      "types": "./dist/preview/index.d.ts"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
+    "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
-    "@adatechnology/meta-whatsapp-contracts": "0.2.0-rc.2"
+    "tailwind-merge": "^3.6.0",
+    "@adatechnology/meta-whatsapp-contracts": "0.2.0-rc.8"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -38,13 +44,14 @@
     }
   },
   "devDependencies": {
+    "@types/bun": "1.3.14",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "@types/react": "^18 || ^19",
     "@types/react-dom": "^18 || ^19"
   },
   "scripts": {
-    "build": "tsup src/index.ts src/flows/index.ts src/channel/index.ts src/styles.css --dts --format esm --external react --external react-dom --external @xyflow/react",
+    "build": "tsup src/index.ts src/flows/index.ts src/channel/index.ts src/preview/index.ts src/styles.css --dts --format esm --external react --external react-dom --external @xyflow/react",
     "build:watch": "tsup src/index.ts src/flows/index.ts src/channel/index.ts src/styles.css --watch --dts --format esm --external react --external react-dom --external @xyflow/react",
     "check": "tsc -p tsconfig.json --noEmit",
     "test": "bun test"

package/src/AudioRecorderButton.test.tsx

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { AudioRecorderButton, DEFAULT_AUDIO_RECORDER_BUTTON_LABELS } from './AudioRecorderButton'
+
+const noop = () => {}
+
+describe('AudioRecorderButton', () => {
+  it('começa oferecendo gravar, sem painel de revisão à vista', () => {
+    const markup = renderToStaticMarkup(<AudioRecorderButton onRecorded={noop} />)
+
+    expect(markup).toContain(`title="${DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.start}"`)
+    expect(markup).not.toContain(`title="${DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.send}"`)
+    expect(markup).not.toContain('<audio')
+  })
+
+  it('deixa o host trocar o texto de um rótulo sem perder os outros', () => {
+    const markup = renderToStaticMarkup(
+      <AudioRecorderButton onRecorded={noop} labels={{ start: 'Gravar recado' }} />,
+    )
+
+    expect(markup).toContain('title="Gravar recado"')
+  })
+
+  it('mantém a caixa de 40px do botão de enviar para a barra não pular', () => {
+    const markup = renderToStaticMarkup(<AudioRecorderButton onRecorded={noop} />)
+
+    expect(markup).toContain('h-10 w-10')
+  })
+})