@adatechnology/conversations-ui 0.1.0-rc.8 → 0.1.0

package/dist/chunk-NV2RZ5KT.js

@@ -1,56 +0,0 @@
-// src/useDarkMode.ts
-import { useState, useEffect, useCallback } from "react";
-var STORAGE_KEY = "conversations-ui-dark-mode";
-function getInitialDark() {
-  if (typeof window === "undefined") return false;
-  const stored = localStorage.getItem(STORAGE_KEY);
-  if (stored !== null) {
-    return stored === "true";
-  }
-  return window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
-function useIsDarkTheme() {
-  const [isDark, setIsDark] = useState(
-    () => typeof document !== "undefined" && document.documentElement.classList.contains("dark")
-  );
-  useEffect(() => {
-    const root = document.documentElement;
-    const observer = new MutationObserver(() => setIsDark(root.classList.contains("dark")));
-    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
-    setIsDark(root.classList.contains("dark"));
-    return () => observer.disconnect();
-  }, []);
-  return isDark;
-}
-function useDarkMode() {
-  const [isDark, setIsDark] = useState(getInitialDark);
-  useEffect(() => {
-    const root = document.documentElement;
-    if (isDark) {
-      root.classList.add("dark");
-    } else {
-      root.classList.remove("dark");
-    }
-    localStorage.setItem(STORAGE_KEY, String(isDark));
-  }, [isDark]);
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = (event) => {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored === null) {
-        setIsDark(event.matches);
-      }
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, []);
-  const toggle = useCallback(() => {
-    setIsDark((prev) => !prev);
-  }, []);
-  return { isDark, toggle };
-}
-
-export {
-  useIsDarkTheme,
-  useDarkMode
-};

package/dist/types-B5C1DLu1.d.ts

@@ -1,365 +0,0 @@
-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;
-
-/**
- * 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 { type ResolveMediaUrl as A, capabilitiesOf as B, CHANNEL_CAPABILITIES as C, DEFAULT_CONVERSATION_CHANNEL as D, channelFiltersFor as E, type FormatContactHandleParams as F, contactFlag as G, HANDLE_KIND as H, type InteractiveOption as I, formatContactHandle as J, type ListConversationsParams as L, MediaRenderer as M, REOPEN_MECHANISM as R, type SSEProvider as S, CHANNEL_FILTER_ALL as a, CONVERSATION_CHANNEL as b, type ChannelCapabilities as c, type ChannelFilter as d, type ChannelFilterOption as e, type CompanyDocument as f, type CompanyDocumentPage as g, type ConversationChannel as h, type ConversationDocument as i, type ConversationDocumentPage as j, type ConversationEventSource as k, type ConversationPage as l, type ConversationSummary as m, type ConversationTemplate as n, type ConversationsApi as o, type ConversationsFeatures as p, type ConversationsTheme as q, type ConversationsUIConfig as r, type HandleKind as s, type InteractivePayload as t, type InteractiveSection as u, type InteractiveSelection as v, type ListDocumentsParams as w, type MediaRendererProps as x, type MessagePayload as y, type ReopenMechanism as z };

package/src/preview/AudioRecorderButton.tsx

@@ -1,117 +0,0 @@
-/**
- * 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`.
- */
-
-import { useCallback, useRef, useState } from 'react'
-
-export interface AudioRecorderButtonLabels {
-  start: string
-  stop: string
-  unsupported: string
-  denied: string
-}
-
-export const DEFAULT_AUDIO_RECORDER_BUTTON_LABELS: AudioRecorderButtonLabels = {
-  start: 'Gravar áudio',
-  stop: 'Parar gravação',
-  unsupported: 'Este navegador não grava áudio.',
-  denied: 'Sem permissão para usar o microfone.',
-}
-
-export interface AudioRecorderButtonProps {
-  onRecorded: (file: File) => void | Promise<void>
-  onFailure?: (message: string) => void
-  labels?: Partial<AudioRecorderButtonLabels>
-  disabled?: boolean
-}
-
-/**
- * Ordem de preferência de formato: os dois primeiros o WhatsApp aceita como áudio; `webm` é só
- * saída de emergência para navegador que não grava mais nada — gravar em webm e descobrir na hora
- * do envio que o formato é inválido é pior do que gravar já no formato certo.
- */
-const RECORDING_FORMATS = [
-  { mimeType: 'audio/ogg;codecs=opus', uploadMimeType: 'audio/ogg', extension: 'ogg' },
-  { mimeType: 'audio/mp4', uploadMimeType: 'audio/mp4', extension: 'm4a' },
-  { mimeType: 'audio/webm', uploadMimeType: 'audio/webm', extension: 'webm' },
-] as const
-
-export type RecordingFormat = (typeof RECORDING_FORMATS)[number]
-
-/** Primeiro formato que o navegador sabe gravar, ou `undefined` se não souber gravar nenhum. */
-export function resolveRecordingFormat(): RecordingFormat | undefined {
-  if (typeof MediaRecorder === 'undefined') return undefined
-  // `isTypeSupported` não existe em toda implementação; onde falta, o primeiro da lista é o palpite.
-  if (typeof MediaRecorder.isTypeSupported !== 'function') return RECORDING_FORMATS[0]
-  return RECORDING_FORMATS.find((format) => MediaRecorder.isTypeSupported(format.mimeType))
-}
-
-export function AudioRecorderButton({ onRecorded, onFailure, labels, disabled }: AudioRecorderButtonProps) {
-  const startLabel = labels?.start ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.start
-  const stopLabel = labels?.stop ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.stop
-  const [isRecording, setIsRecording] = useState(false)
-  const recorderRef = useRef<MediaRecorder | null>(null)
-
-  const stop = useCallback(() => {
-    recorderRef.current?.stop()
-  }, [])
-
-  const start = useCallback(async () => {
-    const format = resolveRecordingFormat()
-    if (!format || !navigator.mediaDevices?.getUserMedia) {
-      onFailure?.(labels?.unsupported ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.unsupported)
-      return
-    }
-
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
-      const recorder = new MediaRecorder(stream, { mimeType: format.mimeType })
-      const chunks: Blob[] = []
-
-      recorder.addEventListener('dataavailable', (event) => {
-        if (event.data.size > 0) chunks.push(event.data)
-      })
-      recorder.addEventListener('stop', () => {
-        // Solta o microfone assim que para: sem isto o indicador de gravação do navegador fica
-        // aceso depois do envio, e o operador acha que o simulador continua ouvindo.
-        stream.getTracks().forEach((track) => track.stop())
-        setIsRecording(false)
-        recorderRef.current = null
-        // O `File` sai com o MIME sem os parâmetros de codec: `audio/ogg;codecs=opus` serve ao
-        // gravador, mas quem valida upload compara com `audio/ogg` puro.
-        const blob = new Blob(chunks, { type: format.uploadMimeType })
-        void onRecorded(
-          new File([blob], `audio-${Date.now()}.${format.extension}`, { type: format.uploadMimeType }),
-        )
-      })
-
-      recorderRef.current = recorder
-      recorder.start()
-      setIsRecording(true)
-    } catch {
-      onFailure?.(labels?.denied ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.denied)
-    }
-  }, [labels?.denied, labels?.unsupported, onFailure, onRecorded])
-
-  return (
-    <button
-      type="button"
-      disabled={disabled}
-      onClick={() => (isRecording ? stop() : void start())}
-      title={isRecording ? stopLabel : startLabel}
-      aria-label={isRecording ? stopLabel : startLabel}
-      aria-pressed={isRecording}
-      className={`flex h-9 w-9 items-center justify-center rounded-full transition-colors ${
-        isRecording ? 'bg-red-100 text-red-600 dark:bg-red-900/40' : 'text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700'
-      }`}
-    >
-      {isRecording ? '■' : '🎤'}
-    </button>
-  )
-}