@adatechnology/conversations-ui 0.1.0 → 0.2.0

package/dist/preview/index.d.ts

@@ -1,5 +1,5 @@
-import { U as MessagePayload, u as ConversationSummary, m as ConversationEventSource, w as ConversationsApi, Q as ListConversationsParams, n as ConversationPage, a5 as SSEProvider, k as ConversationDocument, a6 as SendPreviewMediaParams, Z as PreviewUploadedMedia, $ as PreviewWebhookClient, a3 as ResolveMediaUrl } from '../ConversationSimulatorPanel--5fIzXWY.js';
-export { A as AudioRecorderButton, a as AudioRecorderButtonLabels, b as AudioRecorderButtonProps, o as ConversationPreview, p as ConversationPreviewProps, q as ConversationSimulatorClient, r as ConversationSimulatorPanel, s as ConversationSimulatorPanelLabels, t as ConversationSimulatorPanelProps, B as CreatePreviewMediaUploaderParams, D as CreatePreviewWebhookClientParams, E as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, G as DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, I as DEFAULT_MEDIA_UPLOAD_PATH, W as PreviewInProductionError, X as PreviewMediaUploadRejectedError, Y as PreviewMediaUploadRequest, _ as PreviewUploadedMedia, a0 as PreviewWebhookRejectedError, a4 as SIMULATOR_FILE_MEDIA_KINDS, a7 as SendSimulatorMediaParams, a8 as SimulatorMediaKind, a9 as ToSimulatorClientParams, ac as acceptsMediaKind, ad as assertPreviewEnvironment, ah as createPreviewMediaPoster, ai as createPreviewMediaUploader, aj as createPreviewWebhookClient, al as isConversationSimulatorClient, am as mediaKindOf, an as mediaTypeOf, ao as signPreviewPayload, ap as simulatorPanelLabelsOf, aq as toConversationSimulatorClient } from '../ConversationSimulatorPanel--5fIzXWY.js';
+import { V as MessagePayload, u as ConversationSummary, m as ConversationEventSource, x as ConversationsApi, R as ListConversationsParams, n as ConversationPage, ab as SSEProvider, k as ConversationDocument, ac as SendPreviewMediaParams, _ as PreviewUploadedMedia, a0 as PreviewWebhookClient, a9 as ResolveMediaUrl } from '../ConversationSimulatorPanel-ikgmlciE.js';
+export { A as AudioRecorderButton, a as AudioRecorderButtonLabels, b as AudioRecorderButtonProps, o as ConversationPreview, p as ConversationPreviewProps, q as ConversationSimulatorClient, r as ConversationSimulatorPanel, s as ConversationSimulatorPanelLabels, t as ConversationSimulatorPanelProps, D as CreatePreviewMediaUploaderParams, E as CreatePreviewWebhookClientParams, F as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS, H as DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, J as DEFAULT_MEDIA_UPLOAD_PATH, X as PreviewInProductionError, Y as PreviewMediaUploadRejectedError, Z as PreviewMediaUploadRequest, $ as PreviewUploadedMedia, a1 as PreviewWebhookRejectedError, aa as SIMULATOR_FILE_MEDIA_KINDS, ad as SendSimulatorMediaParams, ae as SimulatorMediaKind, ag as ToSimulatorClientParams, aj as acceptsMediaKind, ak as assertPreviewEnvironment, ao as createPreviewMediaPoster, ap as createPreviewMediaUploader, aq as createPreviewWebhookClient, as as isConversationSimulatorClient, at as mediaKindOf, au as mediaTypeOf, av as signPreviewPayload, aw as simulatorPanelLabelsOf, ax as toConversationSimulatorClient } from '../ConversationSimulatorPanel-ikgmlciE.js';
 import { InteractiveReplyOption } from '@adatechnology/meta-whatsapp-contracts/testing';
 import * as react from 'react';
 export { PREVIEW_MEDIA_ID_PREFIX } from '@adatechnology/meta-whatsapp-contracts';

package/dist/preview/index.js

@@ -16,7 +16,7 @@ import {
   mediaTypeOf,
   simulatorPanelLabelsOf,
   toConversationSimulatorClient
-} from "../chunk-BJNRLLDO.js";
+} from "../chunk-NHQDQJL2.js";
 import "../chunk-WCBDXZ3X.js";
 
 // src/preview/previewStore.ts
@@ -648,6 +648,37 @@ var PREVIEW_TEMPLATES = [
   { name: "lembrete_documentos", language: "pt_BR", status: "APPROVED", category: "UTILITY" },
   { name: "promocao_taxa", language: "pt_BR", status: "PENDING", category: "MARKETING" }
 ];
+var PREVIEW_QUICK_REPLIES = [
+  { id: "1", title: "Boas-vindas", shortcut: "ola", body: "Ol\xE1 {{nome}}, bem-vindo!" },
+  {
+    id: "2",
+    title: "Lista de documentos",
+    shortcut: "documentos",
+    body: "Segue a lista de documentos necess\xE1rios para prosseguir com sua solicita\xE7\xE3o.",
+    attachments: [
+      { uploadId: "upload-1", filename: "Checklist de documentos.pdf", mimeType: "application/pdf", sizeBytes: 245e3 },
+      { uploadId: "upload-2", filename: "Tabela de taxas.png", mimeType: "image/png", sizeBytes: 125e3 }
+    ]
+  },
+  {
+    id: "3",
+    title: "Prazo de an\xE1lise",
+    shortcut: "prazo",
+    body: "Sua solicita\xE7\xE3o est\xE1 em an\xE1lise e o resultado sair\xE1 em at\xE9 48 horas."
+  },
+  {
+    id: "4",
+    title: "Agendar liga\xE7\xE3o",
+    shortcut: "ligacao",
+    body: "Ol\xE1 {{nome}}, voc\xEA gostaria de agendar uma liga\xE7\xE3o comigo? Que horas funcionam melhor para voc\xEA?"
+  },
+  {
+    id: "5",
+    title: "Encerramento",
+    shortcut: "tchau",
+    body: "Obrigado {{nome_completo}}, foi um prazer atender voc\xEA. Qualquer d\xFAvida, \xE9 s\xF3 chamar!"
+  }
+];
 function createMockConversationsApi(params) {
   const latencyMs = params.latencyMs ?? DEFAULT_LATENCY_MS;
   async function withLatency(produce) {
@@ -826,6 +857,121 @@ ${names.join("\n")}`], { type: "application/zip" });
     },
     listTemplates() {
       return withLatency(() => [...PREVIEW_TEMPLATES]);
+    },
+    listQuickReplies(searchParams) {
+      return withLatency(() => {
+        let results = [...PREVIEW_QUICK_REPLIES];
+        if (searchParams?.search) {
+          const term = searchParams.search.toLowerCase();
+          results = results.filter(
+            (qr) => qr.title.toLowerCase().includes(term) || qr.shortcut.toLowerCase().includes(term) || qr.body.toLowerCase().includes(term)
+          );
+        }
+        return results;
+      });
+    },
+    createQuickReply(input) {
+      return withLatency(() => {
+        if (PREVIEW_QUICK_REPLIES.some((qr) => qr.shortcut === input.shortcut)) {
+          const error = new Error("Atalho j\xE1 existe");
+          error.code = "QUICK_REPLY_SHORTCUT_TAKEN";
+          throw error;
+        }
+        const newQuickReply = {
+          id: String(Date.now()),
+          title: input.title,
+          shortcut: input.shortcut,
+          body: input.body
+        };
+        PREVIEW_QUICK_REPLIES.push(newQuickReply);
+        return newQuickReply;
+      });
+    },
+    updateQuickReply(id, input) {
+      return withLatency(() => {
+        const index = PREVIEW_QUICK_REPLIES.findIndex((qr) => qr.id === id);
+        if (index === -1) {
+          throw new Error("Mensagem pronta n\xE3o encontrada");
+        }
+        if (PREVIEW_QUICK_REPLIES.some((qr) => qr.id !== id && qr.shortcut === input.shortcut)) {
+          const error = new Error("Atalho j\xE1 existe");
+          error.code = "QUICK_REPLY_SHORTCUT_TAKEN";
+          throw error;
+        }
+        const updated = {
+          id,
+          title: input.title,
+          shortcut: input.shortcut,
+          body: input.body
+        };
+        PREVIEW_QUICK_REPLIES[index] = updated;
+        return updated;
+      });
+    },
+    deleteQuickReply(id) {
+      return withLatency(() => {
+        const index = PREVIEW_QUICK_REPLIES.findIndex((qr) => qr.id === id);
+        if (index !== -1) {
+          PREVIEW_QUICK_REPLIES.splice(index, 1);
+        }
+      });
+    },
+    uploadQuickReplyAttachment(file, options) {
+      return new Promise((resolve, reject) => {
+        if (options.signal.aborted) {
+          reject(new DOMException("Aborted", "AbortError"));
+          return;
+        }
+        const abortHandler = () => {
+          reject(new DOMException("Aborted", "AbortError"));
+        };
+        options.signal.addEventListener("abort", abortHandler);
+        const steps = 6;
+        const stepDuration = 1500 / steps;
+        let step = 0;
+        const progressInterval = setInterval(() => {
+          if (options.signal.aborted) {
+            clearInterval(progressInterval);
+            options.signal.removeEventListener("abort", abortHandler);
+            reject(new DOMException("Aborted", "AbortError"));
+            return;
+          }
+          step += 1;
+          const progress = step / steps;
+          if (progress <= 1) {
+            options.onProgress(Math.round(progress * 100));
+          }
+          if (step >= steps) {
+            clearInterval(progressInterval);
+            options.signal.removeEventListener("abort", abortHandler);
+            resolve({
+              uploadId: `upload-${Date.now()}-${Math.random().toString(36).substring(7)}`,
+              filename: file.name,
+              mimeType: file.type,
+              sizeBytes: file.size
+            });
+          }
+        }, stepDuration);
+      });
+    },
+    sendStoredAttachments(params2) {
+      return withLatency(() => {
+        const results = [];
+        for (let index = 0; index < params2.uploadIds.length; index += 1) {
+          const uploadId = params2.uploadIds[index];
+          const isFailed = uploadId.includes("falha");
+          if (isFailed) {
+            results.push({ uploadId, status: "failed" });
+            continue;
+          }
+          if (index > 0 && results[index - 1]?.status === "failed") {
+            results.push({ uploadId, status: "skipped" });
+            continue;
+          }
+          results.push({ uploadId, status: "sent" });
+        }
+        return { results };
+      });
     }
   };
 }

package/dist/styles.css

@@ -899,6 +899,141 @@
 .dark .cv-workspace-attachments li {
   border-color: rgb(51 65 85);
 }
+.cv-attachment-item {
+  max-width: 16rem;
+}
+.cv-attachment-item__thumbnail {
+  display: block;
+  flex: none;
+  width: 2rem;
+  height: 2rem;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  background: rgb(226 232 240);
+}
+.dark .cv-attachment-item__thumbnail {
+  background: rgb(51 65 85);
+}
+.cv-attachment-item__thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.cv-attachment-item__info {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+.cv-attachment-item__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+.cv-attachment-item__meta {
+  font-size: 0.6875rem;
+  color: rgb(100 116 139);
+}
+.dark .cv-attachment-item__meta {
+  color: rgb(148 163 184);
+}
+.cv-attachment-item--failed .cv-attachment-item__meta {
+  color: rgb(220 38 38);
+}
+.dark .cv-attachment-item--failed .cv-attachment-item__meta {
+  color: rgb(248 113 113);
+}
+.cv-attachment-item--sent .cv-attachment-item__meta {
+  color: rgb(22 163 74);
+}
+.dark .cv-attachment-item--sent .cv-attachment-item__meta {
+  color: rgb(74 222 128);
+}
+.cv-attachment-item--skipped .cv-attachment-item__meta {
+  color: rgb(180 83 9);
+}
+.dark .cv-attachment-item--skipped .cv-attachment-item__meta {
+  color: rgb(251 191 36);
+}
+.cv-attachment-item__retry {
+  flex: none;
+  border: 0;
+  background: none;
+  padding: 0;
+  font-size: 0.6875rem;
+  text-decoration: underline;
+  color: rgb(37 99 235);
+  cursor: pointer;
+}
+.cv-attachment-item {
+  transition: opacity 200ms ease, transform 200ms ease;
+  opacity: 1;
+  transform: scale(1);
+}
+.cv-attachment-item--departing {
+  opacity: 0;
+  transform: scale(0.92);
+}
+@media (prefers-reduced-motion: reduce) {
+  .cv-attachment-item {
+    transition: none;
+  }
+}
+.cv-skeleton-line {
+  border-radius: 0.25rem;
+  background:
+    linear-gradient(
+      90deg,
+      rgb(226 232 240) 25%,
+      rgb(241 245 249) 50%,
+      rgb(226 232 240) 75%);
+  background-size: 200% 100%;
+  animation: cv-skeleton-shimmer 1.4s ease-in-out infinite;
+}
+.dark .cv-skeleton-line {
+  background:
+    linear-gradient(
+      90deg,
+      rgb(51 65 85) 25%,
+      rgb(71 85 105) 50%,
+      rgb(51 65 85) 75%);
+  background-size: 200% 100%;
+}
+@keyframes cv-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cv-skeleton-line {
+    animation: none;
+  }
+}
+.cv-skeleton-line--title {
+  width: 70%;
+  height: 0.75rem;
+}
+.cv-skeleton-line--shortcut {
+  width: 50%;
+  height: 0.75rem;
+}
+.cv-skeleton-line--body {
+  width: 90%;
+  height: 0.75rem;
+}
+.cv-row-departing {
+  transition: opacity 200ms ease;
+  opacity: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cv-row-departing {
+    transition: none;
+  }
+}
 .cv-filter-count {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -31,7 +31,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
     "tailwind-merge": "^3.6.0",
-    "@adatechnology/meta-whatsapp-contracts": "0.2.0"
+    "@adatechnology/meta-whatsapp-contracts": "0.3.0"
   },
   "peerDependencies": {
     "@xyflow/react": "^12",

package/src/MessageComposer.test.tsx

@@ -32,4 +32,18 @@ describe('MessageComposer', () => {
     expect(markup).toContain('aria-label="Enviar"')
     expect(markup).not.toContain('aria-label="Gravar áudio"')
   })
+
+  it('sem savedQuickReplies, não desenha o botão de raio nem o combobox', () => {
+    const withPort = renderToStaticMarkup(
+      <MessageComposer
+        onSend={() => {}}
+        savedQuickReplies={{ listQuickReplies: async () => [], conversationId: 'c1' }}
+      />,
+    )
+    const withoutPort = renderToStaticMarkup(<MessageComposer onSend={() => {}} />)
+
+    expect(withPort).toContain('aria-label="Mensagens prontas"')
+    expect(withoutPort).not.toContain('aria-label="Mensagens prontas"')
+    expect(withoutPort).not.toContain('role="combobox"')
+  })
 })