@adatechnology/conversations-ui 0.1.0-rc.22 → 0.1.0-rc.23

package/dist/styles.css

@@ -319,3 +319,480 @@
     border-left: 0;
   }
 }
+.cv-workspace {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.cv-workspace-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgb(229 231 235);
+}
+.dark .cv-workspace-header {
+  border-color: rgb(51 65 85);
+}
+.cv-workspace-header__titles {
+  min-width: 0;
+}
+.cv-workspace-header__titles h1 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cv-workspace-header__titles p {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  color: rgb(107 114 128);
+}
+.cv-workspace-header__waiting {
+  color: rgb(217 119 6);
+}
+.dark .cv-workspace-header__waiting {
+  color: rgb(251 191 36);
+}
+.cv-workspace-header__actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+.cv-workspace-toggle {
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  min-height: 2.75rem;
+}
+.cv-workspace-toggle:disabled {
+  opacity: 0.5;
+}
+.cv-workspace-toggle--on {
+  background: rgb(37 99 235);
+  color: #fff;
+  border-color: rgb(37 99 235);
+}
+.dark .cv-workspace-toggle {
+  border-color: rgb(71 85 105);
+  color: rgb(226 232 240);
+}
+.cv-workspace-failure {
+  border-bottom: 1px solid rgb(253 230 138);
+  background: rgb(255 251 235);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: rgb(146 64 14);
+}
+.dark .cv-workspace-failure {
+  background: rgb(69 26 3);
+  color: rgb(253 230 138);
+  border-color: rgb(120 53 15);
+}
+.cv-workspace-grid {
+  display: grid;
+  flex: 1;
+  min-height: 0;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: rgb(243 244 246);
+}
+.dark .cv-workspace-grid {
+  background: rgb(17 24 39);
+}
+.cv-workspace-list,
+.cv-workspace-detail,
+.cv-workspace-simulator {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.75rem;
+  background: #fff;
+}
+.dark .cv-workspace-list,
+.dark .cv-workspace-detail,
+.dark .cv-workspace-simulator {
+  background: rgb(31 41 55);
+  border-color: rgb(51 65 85);
+}
+.cv-workspace-simulator {
+  flex-direction: row;
+}
+@media (max-width: 1023px) {
+  .cv-workspace-grid[data-detail=open] .cv-workspace-list {
+    display: none;
+  }
+  .cv-workspace-grid[data-detail=closed] .cv-workspace-detail {
+    display: none;
+  }
+}
+@media (min-width: 1024px) {
+  .cv-workspace-grid {
+    grid-template-columns: 360px minmax(0, 1fr);
+  }
+  .cv-workspace-grid--with-simulator {
+    grid-template-columns: minmax(0, 1fr) 24rem;
+  }
+  .cv-workspace-grid--with-simulator .cv-workspace-list {
+    display: none;
+  }
+}
+@media (min-width: 1280px) {
+  .cv-workspace-grid--with-simulator {
+    grid-template-columns: 320px minmax(0, 1fr) 24rem;
+  }
+  .cv-workspace-grid--with-simulator .cv-workspace-list {
+    display: flex;
+  }
+}
+.cv-workspace-pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.cv-workspace-transcript {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0.75rem 1rem;
+}
+.cv-workspace-failure__link {
+  text-decoration: underline;
+}
+.cv-workspace-selection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-top: 1px solid #bfdbfe;
+  background: #eff6ff;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: #1d4ed8;
+}
+.cv-workspace-selection__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.cv-workspace-selection__actions button {
+  min-height: 2.75rem;
+  border-radius: 0.375rem;
+  border: 1px solid #bfdbfe;
+  padding: 0 0.625rem;
+}
+.dark .cv-workspace-selection {
+  border-color: #1e40af;
+  background: rgb(23 37 84 / 40%);
+  color: #93c5fd;
+}
+.dark .cv-workspace-selection__actions button {
+  border-color: #1e40af;
+}
+.cv-workspace-notice {
+  border-top: 1px solid var(--cv-border, #e5e7eb);
+  background: #f3f4f6;
+  padding: 0.75rem 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+.dark .cv-workspace-notice {
+  border-top-color: #374151;
+  background: #1f2937;
+  color: #9ca3af;
+}
+.cv-workspace-alert {
+  border-top: 1px solid rgb(254 202 202);
+  background: rgb(254 242 242);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: rgb(185 28 28);
+}
+.dark .cv-workspace-alert {
+  background: rgb(69 10 10);
+  color: rgb(252 165 165);
+  border-color: rgb(127 29 29);
+}
+.cv-workspace-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid rgb(229 231 235);
+}
+.dark .cv-workspace-filters {
+  border-color: rgb(51 65 85);
+}
+.cv-workspace-search {
+  width: 100%;
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  background: transparent;
+}
+.dark .cv-workspace-search {
+  border-color: rgb(71 85 105);
+  color: rgb(226 232 240);
+}
+.cv-workspace-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+.cv-workspace-chips__legend {
+  color: rgb(107 114 128);
+}
+.cv-workspace-chip {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.5rem;
+}
+.cv-workspace-chip--on {
+  background: rgb(229 231 235);
+}
+.dark .cv-workspace-chip--on {
+  background: rgb(51 65 85);
+}
+.cv-workspace-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+}
+.cv-workspace-selectall {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+.cv-workspace-rows {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+.cv-workspace-empty {
+  padding: 1rem;
+  font-size: 0.875rem;
+  color: rgb(107 114 128);
+}
+.cv-workspace-bulk {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid rgb(191 219 254);
+  background: rgb(239 246 255);
+  font-size: 0.75rem;
+}
+.dark .cv-workspace-bulk {
+  background: rgb(23 37 84);
+  border-color: rgb(30 58 138);
+}
+.cv-workspace-bulk__count {
+  font-weight: 500;
+  color: rgb(29 78 216);
+}
+.dark .cv-workspace-bulk__count {
+  color: rgb(147 197 253);
+}
+.cv-workspace-bulk__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.cv-workspace-bulk__actions button {
+  border: 1px solid rgb(191 219 254);
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.5rem;
+}
+.cv-workspace-bulk__actions button:disabled {
+  opacity: 0.5;
+}
+.cv-workspace-pager {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-top: 1px solid rgb(229 231 235);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  color: rgb(107 114 128);
+}
+.dark .cv-workspace-pager {
+  border-color: rgb(51 65 85);
+}
+.cv-workspace-pager__buttons {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.cv-workspace-pager__buttons button {
+  padding: 0 0.5rem;
+}
+.cv-workspace-pager__buttons button:disabled {
+  opacity: 0.4;
+}
+.cv-workspace-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgb(0 0 0 / 50%);
+}
+.cv-workspace-modal__box {
+  display: flex;
+  width: 100%;
+  max-width: 28rem;
+  max-height: 80vh;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 25%);
+}
+.cv-workspace-modal__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  padding: 1rem 1.25rem;
+}
+.cv-workspace-modal__header h3 {
+  font-weight: 600;
+}
+.cv-workspace-modal__header p {
+  margin-top: 0.125rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+.cv-workspace-modal__search {
+  border-bottom: 1px solid #f3f4f6;
+  padding: 0.75rem 1rem;
+}
+.cv-workspace-modal__search input {
+  width: 100%;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+.cv-workspace-modal__list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+.cv-workspace-modal__item {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 0.125rem;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  text-align: left;
+  font-size: 0.875rem;
+}
+.cv-workspace-modal__item:hover {
+  background: #f9fafb;
+}
+.cv-workspace-modal__item--on {
+  border-color: #bfdbfe;
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+.cv-workspace-modal__item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+.cv-workspace-modal__item-meta {
+  font-size: 0.75rem;
+  color: #9ca3af;
+}
+.cv-workspace-modal__warning {
+  border-top: 1px solid #fde68a;
+  background: #fffbeb;
+  padding: 0.5rem 1rem;
+  font-size: 0.75rem;
+  color: #b45309;
+}
+.cv-workspace-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  border-top: 1px solid #e5e7eb;
+  padding: 0.75rem 1rem;
+}
+.cv-workspace-modal__footer button {
+  min-height: 2.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  padding: 0 0.875rem;
+  font-size: 0.875rem;
+}
+.cv-workspace-modal__footer button:last-child {
+  border-color: transparent;
+  background: #2563eb;
+  color: #fff;
+}
+.cv-workspace-modal__footer button:disabled {
+  opacity: 0.5;
+}
+.dark .cv-workspace-modal__box {
+  border-color: #374151;
+  background: #1f2937;
+}
+.dark .cv-workspace-modal__header,
+.dark .cv-workspace-modal__footer {
+  border-color: #374151;
+}
+.dark .cv-workspace-modal__search {
+  border-color: #374151;
+}
+.dark .cv-workspace-modal__search input {
+  border-color: #4b5563;
+  background: #374151;
+  color: #f3f4f6;
+}
+.dark .cv-workspace-modal__item:hover {
+  background: rgb(55 65 81 / 50%);
+}
+.dark .cv-workspace-modal__item--on {
+  border-color: #1e40af;
+  background: rgb(23 37 84 / 40%);
+  color: #93c5fd;
+}
+.dark .cv-workspace-modal__warning {
+  border-color: #92400e;
+  background: rgb(69 26 3 / 40%);
+  color: #fbbf24;
+}
+.dark .cv-workspace-modal__footer button {
+  border-color: #4b5563;
+  color: #f3f4f6;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.22",
+  "version": "0.1.0-rc.23",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -209,3 +209,18 @@ export { createMediaUrlResolver } from './lib/createMediaUrlResolver'
 export type { ConversationHeaderUtility } from './ConversationHeader'
 export { applyQuickReplyVariables, resolveQuickReply } from './MessageComposer'
 export type { QuickReply } from './MessageComposer'
+
+// Tela de atendimento completa. Fica no export principal — e não num subpath — porque é a
+// composição padrão do pacote: quem instala conversas quer esta tela, e as peças continuam
+// exportadas ao lado para quem precisar montar outra.
+export { ConversationsWorkspace, ConversationPane, ConversationsInboxList } from './workspace'
+export { useConversationsInbox, CONVERSATIONS_PER_PAGE, DEFAULT_CONVERSATIONS_WORKSPACE_LABELS } from './workspace'
+export type {
+  ConversationsWorkspaceProps,
+  ConversationsWorkspaceSimulator,
+  ConversationsWorkspaceLabels,
+  ConversationPaneProps,
+  ConversationsInboxListProps,
+  UseConversationsInboxParams,
+  UseConversationsInboxResult,
+} from './workspace'

package/src/preview/createPreviewWebhookClient.test.ts

@@ -36,6 +36,13 @@ function createCapturingFetch(status = 200): { fetchImplementation: typeof fetch
   return { fetchImplementation, captured }
 }
 
+/** `uploadMedia` é opcional no contrato — o cliente do webhook sempre traz, o teste garante isso. */
+function uploadMediaOf(client: { uploadMedia?: (file: File) => Promise<unknown> }) {
+  const upload = client.uploadMedia
+  if (!upload) throw new Error('createPreviewWebhookClient deveria expor uploadMedia')
+  return upload
+}
+
 describe('createPreviewWebhookClient', () => {
   it('assina com o mesmo HMAC que o servidor calcula em node:crypto', async () => {
     const { fetchImplementation, captured } = createCapturingFetch()
@@ -144,7 +151,7 @@ describe('createPreviewWebhookClient.uploadMedia', () => {
       fetchImplementation,
     })
 
-    const uploaded = await client.uploadMedia(audioFile())
+    const uploaded = (await uploadMediaOf(client)(audioFile())) as { mediaId: string; mimeType?: string }
 
     expect(calls[0]?.url).toBe('http://localhost:3000/v1/preview/media')
     expect(uploaded.mediaId).toBe(`${PREVIEW_MEDIA_ID_PREFIX}upl_123`)
@@ -160,7 +167,7 @@ describe('createPreviewWebhookClient.uploadMedia', () => {
       fetchImplementation,
     })
 
-    await client.uploadMedia(audioFile())
+    await uploadMediaOf(client)(audioFile())
 
     const expected = `sha256=${createHmac('sha256', APP_SECRET).update('audio/ogg').digest('hex')}`
     expect(calls[0]?.signature).toBe(expected)
@@ -175,7 +182,7 @@ describe('createPreviewWebhookClient.uploadMedia', () => {
       fetchImplementation,
     })
 
-    await client.uploadMedia(audioFile())
+    await uploadMediaOf(client)(audioFile())
 
     expect(calls[0]?.url).toBe('/v1/preview/media')
   })
@@ -189,6 +196,6 @@ describe('createPreviewWebhookClient.uploadMedia', () => {
       fetchImplementation,
     })
 
-    await expect(client.uploadMedia(audioFile())).rejects.toBeInstanceOf(PreviewMediaUploadRejectedError)
+    await expect(uploadMediaOf(client)(audioFile())).rejects.toBeInstanceOf(PreviewMediaUploadRejectedError)
   })
 })