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

package/dist/preview/index.js

@@ -0,0 +1,576 @@
+import {
+  ConversationWallpaper,
+  DateDivider,
+  MessageBubble,
+  MessageComposer
+} from "../chunk-4R6Y43DQ.js";
+import "../chunk-OGRRHQQW.js";
+
+// src/preview/previewStore.ts
+var GLOBAL_CHANNEL = "global";
+function conversationChannel(conversationId) {
+  return `conv:${conversationId}`;
+}
+function createPreviewStore(params) {
+  const conversations = params.conversations.map((conversation) => ({ ...conversation }));
+  const messages = new Map(
+    Object.entries(params.messages).map(([conversationId, list]) => [conversationId, [...list]])
+  );
+  const listeners = /* @__PURE__ */ new Map();
+  const now = params.now ?? (() => /* @__PURE__ */ new Date());
+  let messageSequence = 0;
+  function emit(emission) {
+    for (const listener of listeners.get(emission.channel) ?? []) listener(emission);
+  }
+  function emitDataChanged() {
+    emit({ channel: GLOBAL_CHANNEL, event: "data-changed", payload: {} });
+  }
+  function findConversation(conversationId) {
+    return conversations.find((conversation) => conversation.id === conversationId);
+  }
+  return {
+    listConversations(filters) {
+      return conversations.filter((conversation) => filters?.waitingHuman ? conversation.waitingHuman : true).filter((conversation) => {
+        const search = filters?.search?.toLowerCase();
+        if (!search) return true;
+        return conversation.whatsappNumber.includes(search) || (conversation.clientName?.toLowerCase().includes(search) ?? false);
+      }).map((conversation) => ({ ...conversation })).sort((left, right) => right.lastAt.localeCompare(left.lastAt));
+    },
+    listMessages(conversationId) {
+      return [...messages.get(conversationId) ?? []];
+    },
+    appendMessage(appendParams) {
+      messageSequence += 1;
+      const timestamp = now().toISOString();
+      const message = {
+        id: `preview-${messageSequence}`,
+        type: "text",
+        content: appendParams.content,
+        direction: appendParams.direction,
+        sender: appendParams.sender,
+        timestamp,
+        status: appendParams.direction === "outbound" ? "sent" : void 0
+      };
+      const conversationMessages = messages.get(appendParams.conversationId) ?? [];
+      messages.set(appendParams.conversationId, [...conversationMessages, message]);
+      const conversation = findConversation(appendParams.conversationId);
+      if (conversation) {
+        conversation.lastContent = appendParams.content;
+        conversation.lastDirection = appendParams.direction;
+        conversation.lastAt = timestamp;
+        if (appendParams.direction === "inbound") {
+          conversation.lastInboundAt = timestamp;
+          conversation.unread += 1;
+        }
+      }
+      emit({
+        channel: conversationChannel(appendParams.conversationId),
+        event: "message",
+        payload: { direction: message.direction, sender: message.sender }
+      });
+      emitDataChanged();
+      return message;
+    },
+    setMode(modeParams) {
+      const conversation = findConversation(modeParams.conversationId);
+      if (!conversation) return;
+      conversation.mode = modeParams.mode;
+      conversation.assignedUserId = modeParams.assignedUserId ?? null;
+      if (modeParams.mode === "human") conversation.waitingHuman = false;
+      emit({
+        channel: conversationChannel(modeParams.conversationId),
+        event: "mode-changed",
+        payload: { mode: conversation.mode, assignedUserId: conversation.assignedUserId }
+      });
+      emitDataChanged();
+    },
+    requestHuman(conversationId) {
+      const conversation = findConversation(conversationId);
+      if (!conversation) return;
+      conversation.waitingHuman = true;
+      emitDataChanged();
+    },
+    markRead(conversationId) {
+      const conversation = findConversation(conversationId);
+      if (!conversation) return;
+      conversation.unread = 0;
+      emitDataChanged();
+    },
+    subscribe(channel, listener) {
+      const channelListeners = listeners.get(channel) ?? /* @__PURE__ */ new Set();
+      channelListeners.add(listener);
+      listeners.set(channel, channelListeners);
+      return () => {
+        channelListeners.delete(listener);
+      };
+    }
+  };
+}
+
+// src/preview/mockEventSource.ts
+function createMockEventSource() {
+  const listeners = /* @__PURE__ */ new Map();
+  let closed = false;
+  return {
+    get closed() {
+      return closed;
+    },
+    addEventListener(type, listener) {
+      const typeListeners = listeners.get(type) ?? /* @__PURE__ */ new Set();
+      typeListeners.add(listener);
+      listeners.set(type, typeListeners);
+    },
+    removeEventListener(type, listener) {
+      listeners.get(type)?.delete(listener);
+    },
+    close() {
+      closed = true;
+      listeners.clear();
+    },
+    emit(event, payload) {
+      if (closed) return;
+      const messageEvent = new MessageEvent(event, { data: JSON.stringify(payload) });
+      for (const listener of listeners.get(event) ?? []) listener(messageEvent);
+    }
+  };
+}
+
+// src/preview/createMockConversationsApi.ts
+var PREVIEW_IMAGE_BASE64 = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYGD4DwABBAEAX+XyEgAAAABJRU5ErkJggg==";
+var DEFAULT_LATENCY_MS = 120;
+function createMockConversationsApi(params) {
+  const latencyMs = params.latencyMs ?? DEFAULT_LATENCY_MS;
+  async function withLatency(produce) {
+    await new Promise((resolve) => setTimeout(resolve, latencyMs));
+    return produce();
+  }
+  return {
+    fetchConversations(fetchParams) {
+      return withLatency(() => {
+        const conversations = params.store.listConversations({
+          waitingHuman: fetchParams?.waitingHuman,
+          search: fetchParams?.search
+        });
+        const limit = fetchParams?.limit ?? conversations.length;
+        const page = fetchParams?.page ?? 1;
+        return conversations.slice((page - 1) * limit, page * limit);
+      });
+    },
+    fetchMessages(conversationId, fetchParams) {
+      return withLatency(() => {
+        const messages = params.store.listMessages(conversationId);
+        const limit = fetchParams?.limit;
+        return limit ? messages.slice(-limit) : messages;
+      });
+    },
+    sendMessage(conversationId, text) {
+      return withLatency(
+        () => params.store.appendMessage({ conversationId, content: text, direction: "outbound", sender: "agent" })
+      );
+    },
+    sendMedia(conversationId, data) {
+      return withLatency(
+        () => params.store.appendMessage({
+          conversationId,
+          content: data.caption ?? data.filename,
+          direction: "outbound",
+          sender: "agent"
+        })
+      );
+    },
+    sendTemplate(conversationId, data) {
+      return withLatency(() => {
+        params.store.appendMessage({
+          conversationId,
+          content: `[template] ${data.templateName}`,
+          direction: "outbound",
+          sender: "agent"
+        });
+      });
+    },
+    markRead(conversationId) {
+      return withLatency(() => params.store.markRead(conversationId));
+    },
+    getContext(conversationId) {
+      return withLatency(() => {
+        const conversation = params.store.listConversations().find((item) => item.id === conversationId);
+        return {
+          currentState: conversation?.currentState ?? "unknown",
+          mode: conversation?.mode ?? "bot",
+          preview: true
+        };
+      });
+    },
+    getDocuments() {
+      return withLatency(() => []);
+    },
+    getDocumentUrl() {
+      return withLatency(() => `data:image/png;base64,${PREVIEW_IMAGE_BASE64}`);
+    },
+    getMediaProxyUrl() {
+      return withLatency(() => ({ mimeType: "image/png", data: PREVIEW_IMAGE_BASE64 }));
+    }
+  };
+}
+
+// src/preview/createMockSSEProvider.ts
+function createMockSSEProvider(params) {
+  function connect(channel) {
+    const source = createMockEventSource();
+    const unsubscribe = params.store.subscribe(channel, (emission) => {
+      source.emit(emission.event, emission.payload);
+    });
+    const close = source.close.bind(source);
+    source.close = () => {
+      unsubscribe();
+      close();
+    };
+    return source;
+  }
+  return {
+    connectConversationStream(conversationId) {
+      return connect(conversationChannel(conversationId));
+    },
+    connectGlobalStream() {
+      return connect(GLOBAL_CHANNEL);
+    }
+  };
+}
+
+// src/preview/previewFixtures.ts
+var BASE_DAY = "2026-07-26";
+function at(time) {
+  return `${BASE_DAY}T${time}.000Z`;
+}
+var PREVIEW_CONVERSATIONS = [
+  {
+    id: "5511988887777",
+    whatsappNumber: "5511988887777",
+    clientName: "Marina Alves",
+    lastContent: "quero 2kg de arroz e um \xF3leo",
+    lastDirection: "inbound",
+    lastAt: at("14:32:00"),
+    lastInboundAt: at("14:32:00"),
+    mode: "bot",
+    assignedUserId: null,
+    waitingHuman: false,
+    unread: 2,
+    currentState: "list_review"
+  },
+  {
+    id: "5511977776666",
+    whatsappNumber: "5511977776666",
+    clientName: "Diego Prado",
+    lastContent: "preciso falar com algu\xE9m",
+    lastDirection: "inbound",
+    lastAt: at("14:20:00"),
+    lastInboundAt: at("14:20:00"),
+    mode: "bot",
+    assignedUserId: null,
+    waitingHuman: true,
+    unread: 1,
+    currentState: "awaiting_human"
+  },
+  {
+    id: "5511966665555",
+    whatsappNumber: "5511966665555",
+    clientName: "Sofia Nakamura",
+    lastContent: "j\xE1 separei seu pedido, confere?",
+    lastDirection: "outbound",
+    lastAt: at("13:58:00"),
+    lastInboundAt: at("13:50:00"),
+    mode: "human",
+    assignedUserId: "agent-1",
+    waitingHuman: false,
+    unread: 0,
+    currentState: "human_handling"
+  },
+  {
+    id: "5511955554444",
+    whatsappNumber: "5511955554444",
+    lastContent: "\xC1udio",
+    lastDirection: "inbound",
+    lastAt: at("13:31:00"),
+    lastInboundAt: at("13:31:00"),
+    mode: "bot",
+    assignedUserId: null,
+    waitingHuman: false,
+    unread: 1,
+    currentState: "list_import"
+  }
+];
+var PREVIEW_MESSAGES = {
+  "5511988887777": [
+    {
+      id: "fixture-1",
+      type: "text",
+      content: "oi, boa tarde",
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("14:30:00")
+    },
+    {
+      id: "fixture-2",
+      type: "text",
+      content: "Boa tarde! Me manda sua lista de compras que eu monto o carrinho.",
+      direction: "outbound",
+      sender: "bot",
+      timestamp: at("14:30:30"),
+      status: "read"
+    },
+    {
+      id: "fixture-3",
+      type: "text",
+      content: "quero 2kg de arroz e um \xF3leo",
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("14:32:00")
+    }
+  ],
+  "5511977776666": [
+    {
+      id: "fixture-4",
+      type: "text",
+      content: "esse valor do frete est\xE1 certo?",
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("14:19:00")
+    },
+    {
+      id: "fixture-5",
+      type: "text",
+      content: "preciso falar com algu\xE9m",
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("14:20:00")
+    }
+  ],
+  "5511966665555": [
+    {
+      id: "fixture-6",
+      type: "text",
+      content: "consegue trocar o leite integral por desnatado?",
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("13:50:00")
+    },
+    {
+      id: "fixture-7",
+      type: "text",
+      content: "j\xE1 separei seu pedido, confere?",
+      direction: "outbound",
+      sender: "agent",
+      timestamp: at("13:58:00"),
+      status: "delivered",
+      agentName: "Ana"
+    }
+  ],
+  "5511955554444": [
+    {
+      id: "fixture-8",
+      type: "audio",
+      mediaId: "preview-audio-1",
+      mimeType: "audio/ogg",
+      direction: "inbound",
+      sender: "customer",
+      timestamp: at("13:31:00")
+    }
+  ]
+};
+
+// src/preview/ConversationPreview.tsx
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GROUPING_WINDOW_MS = 5 * 60 * 1e3;
+function decorate(messages) {
+  return messages.map((message, index) => {
+    const previous = index > 0 ? messages[index - 1] : void 0;
+    const currentTime = new Date(message.timestamp).getTime();
+    const previousTime = previous ? new Date(previous.timestamp).getTime() : 0;
+    return {
+      message,
+      isFirstInGroup: !previous || previous.sender !== message.sender || currentTime - previousTime > GROUPING_WINDOW_MS,
+      showDateDivider: !previous || new Date(message.timestamp).toDateString() !== new Date(previous.timestamp).toDateString()
+    };
+  });
+}
+function ConversationPreview({
+  client,
+  sse,
+  conversationId,
+  loadMessages,
+  placeholder
+}) {
+  const [messages, setMessages] = useState([]);
+  const [failure, setFailure] = useState(void 0);
+  const loadMessagesRef = useRef(loadMessages);
+  const bottomRef = useRef(null);
+  loadMessagesRef.current = loadMessages;
+  const refresh = useCallback(async () => {
+    try {
+      setMessages(await loadMessagesRef.current(conversationId));
+    } catch {
+      setMessages([]);
+    }
+  }, [conversationId]);
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  useEffect(() => {
+    const source = sse.connectConversationStream(conversationId);
+    const handler = () => {
+      void refresh();
+    };
+    source.addEventListener("message", handler);
+    return () => {
+      source.removeEventListener("message", handler);
+      source.close();
+    };
+  }, [sse, conversationId, refresh]);
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  const rendered = useMemo(() => decorate(messages), [messages]);
+  async function handleSend(text) {
+    setFailure(void 0);
+    try {
+      await client.sendText(text);
+      await refresh();
+    } catch (error) {
+      setFailure(error instanceof Error ? error.message : "Falha ao entregar a mensagem no webhook.");
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs(ConversationWallpaper, { className: "flex-1 min-h-0 overflow-y-auto px-4 py-3", children: [
+      rendered.map(({ message, isFirstInGroup, showDateDivider }) => /* @__PURE__ */ jsxs("div", { children: [
+        showDateDivider ? /* @__PURE__ */ jsx(DateDivider, { iso: message.timestamp }) : null,
+        /* @__PURE__ */ jsx(
+          MessageBubble,
+          {
+            message,
+            isMine: message.direction === "inbound",
+            isFirstInGroup
+          }
+        )
+      ] }, message.id)),
+      /* @__PURE__ */ jsx("div", { ref: bottomRef })
+    ] }),
+    failure ? /* @__PURE__ */ jsx("p", { role: "alert", className: "px-4 py-2 text-sm text-red-600 dark:text-red-400", children: failure }) : null,
+    /* @__PURE__ */ jsx(
+      MessageComposer,
+      {
+        onSend: (text) => void handleSend(text),
+        placeholder: placeholder ?? "Escreva como o cliente\u2026"
+      }
+    )
+  ] });
+}
+
+// src/preview/createPreviewWebhookClient.ts
+import {
+  buildInboundAudioPayload,
+  buildInboundInteractivePayload,
+  buildInboundTextPayload,
+  serializeWebhookPayload
+} from "@adatechnology/meta-whatsapp-contracts/testing";
+var PreviewInProductionError = class extends Error {
+  constructor() {
+    super("O preview de conversa carrega um app secret e n\xE3o pode ser montado em produ\xE7\xE3o.");
+    this.name = "PreviewInProductionError";
+  }
+};
+var PreviewWebhookRejectedError = class extends Error {
+  constructor(status) {
+    super(`O webhook recusou a entrega do preview (HTTP ${status}).`);
+    this.status = status;
+    this.name = "PreviewWebhookRejectedError";
+  }
+};
+function assertPreviewEnvironment(isProduction) {
+  if (isProduction) throw new PreviewInProductionError();
+}
+async function signWithWebCrypto(params) {
+  const encoder = new TextEncoder();
+  const key = await globalThis.crypto.subtle.importKey(
+    "raw",
+    encoder.encode(params.appSecret),
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["sign"]
+  );
+  const signature = await globalThis.crypto.subtle.sign("HMAC", key, encoder.encode(params.rawBody));
+  return `sha256=${[...new Uint8Array(signature)].map((byte) => byte.toString(16).padStart(2, "0")).join("")}`;
+}
+function createPreviewWebhookClient(params) {
+  const sendPayload = async (payload) => {
+    const rawBody = serializeWebhookPayload(payload);
+    const signature = await signWithWebCrypto({ rawBody, appSecret: params.appSecret });
+    const performRequest = params.fetchImplementation ?? fetch;
+    const response = await performRequest(params.webhookUrl, {
+      method: "POST",
+      headers: { "content-type": "application/json", "x-hub-signature-256": signature },
+      body: rawBody
+    });
+    if (!response.ok) throw new PreviewWebhookRejectedError(response.status);
+  };
+  const envelope = { from: params.from, phoneNumberId: params.phoneNumberId };
+  return {
+    sendText: (text) => sendPayload(buildInboundTextPayload({ ...envelope, text })),
+    sendButtonReply: (reply) => sendPayload(buildInboundInteractivePayload({ ...envelope, buttonReply: reply })),
+    sendListReply: (reply) => sendPayload(buildInboundInteractivePayload({ ...envelope, listReply: reply })),
+    sendAudio: (mediaId) => sendPayload(buildInboundAudioPayload({ ...envelope, mediaId }))
+  };
+}
+
+// src/preview/startPreviewScript.ts
+var DEFAULT_PREVIEW_SCRIPT = [
+  (store) => store.appendMessage({
+    conversationId: "5511988887777",
+    content: "pode trocar o \xF3leo por azeite?",
+    direction: "inbound",
+    sender: "customer"
+  }),
+  (store) => store.requestHuman("5511988887777"),
+  (store) => store.appendMessage({
+    conversationId: "5511955554444",
+    content: "e o troco?",
+    direction: "inbound",
+    sender: "customer"
+  }),
+  (store) => store.setMode({ conversationId: "5511977776666", mode: "human", assignedUserId: "agent-2" }),
+  (store) => store.appendMessage({
+    conversationId: "5511977776666",
+    content: "Oi Diego, sou a Ana. J\xE1 vi seu pedido.",
+    direction: "outbound",
+    sender: "agent"
+  }),
+  (store) => store.setMode({ conversationId: "5511966665555", mode: "bot" })
+];
+var DEFAULT_INTERVAL_MS = 4e3;
+function startPreviewScript(params) {
+  const steps = params.steps ?? DEFAULT_PREVIEW_SCRIPT;
+  const intervalMs = params.intervalMs ?? DEFAULT_INTERVAL_MS;
+  let index = 0;
+  const timer = setInterval(() => {
+    steps[index % steps.length]?.(params.store);
+    index += 1;
+  }, intervalMs);
+  return () => clearInterval(timer);
+}
+export {
+  ConversationPreview,
+  DEFAULT_PREVIEW_SCRIPT,
+  GLOBAL_CHANNEL,
+  PREVIEW_CONVERSATIONS,
+  PREVIEW_MESSAGES,
+  PreviewInProductionError,
+  PreviewWebhookRejectedError,
+  assertPreviewEnvironment,
+  conversationChannel,
+  createMockConversationsApi,
+  createMockEventSource,
+  createMockSSEProvider,
+  createPreviewStore,
+  createPreviewWebhookClient,
+  startPreviewScript
+};