@adatechnology/conversations-ui 0.1.0-rc.14 → 0.1.0-rc.16

package/dist/{chunk-SOWV4264.js → chunk-RNCZO2FM.js}

@@ -276,6 +276,14 @@ function formatFileSize(bytes) {
 // src/MediaRenderer.tsx
 import { useState as useState2 } from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function documentTypeLabel(filename, mimeType) {
+  const extension = filename?.split(".").pop();
+  if (extension && extension.length <= 5 && extension !== filename) return extension.toUpperCase();
+  const subtype = mimeType?.split(";")[0]?.split("/")[1];
+  if (!subtype) return "FILE";
+  const compacto = subtype.split(".").pop() ?? subtype;
+  return compacto.slice(0, 12).toUpperCase();
+}
 function resolveMediaSource(message) {
   if (message.mediaUrl) return message.mediaUrl;
   if (message.base64) {
@@ -342,13 +350,13 @@ function MediaRenderer({ message, onLightbox, onResolveUrl, className }) {
       return /* @__PURE__ */ jsx5("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx5(AudioPlayer, { src, isMine: message.direction === "outbound" }) : /* @__PURE__ */ jsx5("div", { className: "h-12 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 text-xs", children: bubble.mediaUnavailable }) });
     }
     case "document": {
-      const typeLabel = message.mimeType?.split("/")[1]?.toUpperCase() ?? "FILE";
+      const typeLabel = documentTypeLabel(message.filename, message.mimeType);
       const sizeLabel = message.sizeBytes ? formatFileSize(message.sizeBytes) : null;
       return /* @__PURE__ */ jsxs3("div", { className: cn("flex items-center gap-3 min-w-[200px]", className), children: [
         /* @__PURE__ */ jsx5("div", { className: "w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx5(FileIcon, { filename: message.filename, mimeType: message.mimeType }) }),
         /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
           /* @__PURE__ */ jsx5("p", { className: "text-sm font-medium truncate", children: message.filename ?? bubble.untitledDocument }),
-          /* @__PURE__ */ jsx5("p", { className: "text-xs text-gray-500", children: sizeLabel ? `${typeLabel} \xB7 ${sizeLabel}` : typeLabel })
+          /* @__PURE__ */ jsx5("p", { className: "truncate text-xs text-gray-500", children: sizeLabel ? `${typeLabel} \xB7 ${sizeLabel}` : typeLabel })
         ] }),
         src ? /* @__PURE__ */ jsx5("a", { href: src, download: message.filename, className: "w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors", "aria-label": bubble.downloadFile, children: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "text-gray-600", children: [
           /* @__PURE__ */ jsx5("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
@@ -1187,9 +1195,9 @@ function AudioRecorderButton({
         {
           role: "group",
           "aria-label": labelOf("review"),
-          className: "absolute bottom-full right-0 z-20 mb-2 flex w-64 items-center gap-2 rounded-xl border border-gray-200 bg-white p-2 shadow-lg dark:border-gray-700 dark:bg-gray-800",
+          className: "absolute bottom-full right-0 z-20 mb-2 flex w-[calc(100vw-2rem)] max-w-[20rem] flex-wrap items-center justify-end gap-2 rounded-xl border border-gray-200 bg-white p-2 shadow-lg dark:border-gray-700 dark:bg-gray-800",
           children: [
-            /* @__PURE__ */ jsx13("audio", { src: pending.objectURL, controls: true, className: "h-8 min-w-0 flex-1" }),
+            /* @__PURE__ */ jsx13("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx13(AudioPlayer, { src: pending.objectURL }) }),
             /* @__PURE__ */ jsx13(
               "button",
               {

package/dist/index.js

@@ -44,7 +44,7 @@ import {
   useConversationDocuments,
   useConversationLocales,
   useConversations
-} from "./chunk-SOWV4264.js";
+} from "./chunk-RNCZO2FM.js";
 import {
   htmlToWA,
   parseWhatsAppFormatting,
@@ -319,15 +319,16 @@ var RichMessageComposer = forwardRef(function RichMessageComposer2({
   return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col", className), children: [
     attachmentsPreview,
     quickReplies?.length ? (
-      /* Uma linha rolável no celular, quebrando em várias no desktop: empilhar os chips no
-         celular come a altura da conversa, que é o que o operador precisa ver. */
-      /* @__PURE__ */ jsx2("div", { className: "mb-2 flex flex-nowrap gap-1 overflow-x-auto sm:flex-wrap sm:overflow-x-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx2(
+      /* Uma linha só, rolando na horizontal. Deixar quebrar em várias linhas faz a barra crescer
+         conforme o número de respostas rápidas e empurrar a conversa para cima — o composer
+         precisa ter altura previsível, independente de quantos atalhos o host configurou. */
+      /* @__PURE__ */ jsx2("div", { className: "mb-2 flex flex-nowrap gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: quickReplies.map((quickReply) => /* @__PURE__ */ jsx2(
         "button",
         {
           type: "button",
           title: quickReply.tooltip,
           onClick: () => replaceContent(quickReply.text),
-          className: "whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400",
+          className: "flex-shrink-0 whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400",
           children: quickReply.label
         },
         quickReply.id

package/dist/preview/index.js

@@ -8,7 +8,7 @@ import {
   DocumentsLibrary,
   MessageBubble,
   MessageComposer
-} from "../chunk-SOWV4264.js";
+} from "../chunk-RNCZO2FM.js";
 import "../chunk-2AYDBWNE.js";
 
 // src/preview/previewStore.ts

package/package.json

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

package/src/AudioRecorderButton.tsx

@@ -10,6 +10,8 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react'
 
+import { AudioPlayer } from './AudioPlayer'
+
 export interface AudioRecorderButtonLabels {
   start: string
   stop: string
@@ -192,9 +194,14 @@ export function AudioRecorderButton({
         <div
           role="group"
           aria-label={labelOf('review')}
-          className="absolute bottom-full right-0 z-20 mb-2 flex w-64 items-center gap-2 rounded-xl border border-gray-200 bg-white p-2 shadow-lg dark:border-gray-700 dark:bg-gray-800"
+          /* Largura presa à viewport, não ao conteúdo: ancorado à direita do microfone, qualquer
+             largura fixa maior que a tela sangra para fora no celular. `flex-wrap` é a segunda
+             rede — se o player e os dois botões não couberem lado a lado, os botões descem. */
+          className="absolute bottom-full right-0 z-20 mb-2 flex w-[calc(100vw-2rem)] max-w-[20rem] flex-wrap items-center justify-end gap-2 rounded-xl border border-gray-200 bg-white p-2 shadow-lg dark:border-gray-700 dark:bg-gray-800"
         >
-          <audio src={pending.objectURL} controls className="h-8 min-w-0 flex-1" />
+          <div className="min-w-0 flex-1">
+            <AudioPlayer src={pending.objectURL} />
+          </div>
           <button
             type="button"
             onClick={discard}

package/src/MediaRenderer.tsx

@@ -6,6 +6,25 @@ import { formatFileSize } from './lib/format'
 import { cn } from './lib/cn'
 import type { MessagePayload } from './types'
 
+/**
+ * Rótulo curto do tipo, para a linha de baixo da bolha de documento.
+ *
+ * O subtipo cru do Office é gigantesco — `vnd.openxmlformats-officedocument.wordprocessingml.document`
+ * vira uma linha de 58 caracteres em caixa alta que estica a bolha, empurra a coluna da conversa e
+ * quebra o layout de três painéis. A extensão do arquivo diz a mesma coisa em quatro letras.
+ */
+export function documentTypeLabel(filename?: string, mimeType?: string): string {
+  const extension = filename?.split('.').pop()
+  if (extension && extension.length <= 5 && extension !== filename) return extension.toUpperCase()
+
+  const subtype = mimeType?.split(';')[0]?.split('/')[1]
+  if (!subtype) return 'FILE'
+  // Sem extensão e com subtipo longo (áudio/vídeo sem nome), fica o sufixo depois do último ponto:
+  // `…wordprocessingml.document` -> `DOCUMENT`, que ainda informa e não estoura.
+  const compacto = subtype.split('.').pop() ?? subtype
+  return compacto.slice(0, 12).toUpperCase()
+}
+
 function resolveMediaSource(message: MessagePayload): string | null {
   if (message.mediaUrl) return message.mediaUrl
   if (message.base64) {
@@ -126,7 +145,7 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl, className }:
       )
     }
     case 'document': {
-      const typeLabel = message.mimeType?.split('/')[1]?.toUpperCase() ?? 'FILE'
+      const typeLabel = documentTypeLabel(message.filename, message.mimeType)
       const sizeLabel = message.sizeBytes ? formatFileSize(message.sizeBytes) : null
       return (
         <div className={cn('flex items-center gap-3 min-w-[200px]', className)}>
@@ -135,7 +154,7 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl, className }:
           </div>
           <div className="flex-1 min-w-0">
             <p className="text-sm font-medium truncate">{message.filename ?? bubble.untitledDocument}</p>
-            <p className="text-xs text-gray-500">{sizeLabel ? `${typeLabel} · ${sizeLabel}` : typeLabel}</p>
+            <p className="truncate text-xs text-gray-500">{sizeLabel ? `${typeLabel} · ${sizeLabel}` : typeLabel}</p>
           </div>
           {src ? (
             <a href={src} download={message.filename} className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors" aria-label={bubble.downloadFile}>

package/src/RichMessageComposer.tsx

@@ -246,16 +246,17 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
       {attachmentsPreview}
 
       {quickReplies?.length ? (
-        /* Uma linha rolável no celular, quebrando em várias no desktop: empilhar os chips no
-           celular come a altura da conversa, que é o que o operador precisa ver. */
-        <div className="mb-2 flex flex-nowrap gap-1 overflow-x-auto sm:flex-wrap sm:overflow-x-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        /* Uma linha só, rolando na horizontal. Deixar quebrar em várias linhas faz a barra crescer
+           conforme o número de respostas rápidas e empurrar a conversa para cima — o composer
+           precisa ter altura previsível, independente de quantos atalhos o host configurou. */
+        <div className="mb-2 flex flex-nowrap gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
           {quickReplies.map((quickReply) => (
             <button
               key={quickReply.id}
               type="button"
               title={quickReply.tooltip}
               onClick={() => replaceContent(quickReply.text)}
-              className="whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400"
+              className="flex-shrink-0 whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400"
             >
               {quickReply.label}
             </button>

package/src/documentTypeLabel.test.ts

@@ -0,0 +1,57 @@
+/**
+ * Guarda o rótulo de tipo da bolha de documento.
+ *
+ * O defeito que motivou: `mimeType.split('/')[1].toUpperCase()` transformava um `.docx` em
+ * `VND.OPENXMLFORMATS-OFFICEDOCUMENT.WORDPROCESSINGML.DOCUMENT` — 58 caracteres numa linha que não
+ * quebra, esticando a bolha até empurrar a coluna da conversa e estourar o layout de três painéis.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+import { documentTypeLabel } from './MediaRenderer'
+
+describe('documentTypeLabel', () => {
+  // O caso que quebrou a tela.
+  it('usa a extensão do arquivo em vez do subtipo gigante do Office', () => {
+    const rotulo = documentTypeLabel(
+      'contrato.docx',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    )
+
+    expect(rotulo).toBe('DOCX')
+  })
+
+  it('serve para os tipos curtos também', () => {
+    expect(documentTypeLabel('nota-fiscal.pdf', 'application/pdf')).toBe('PDF')
+    expect(documentTypeLabel('lista.txt', 'text/plain')).toBe('TXT')
+  })
+
+  // Áudio e sticker chegam sem nome de arquivo: o rótulo vem do mimeType, ainda curto.
+  it('cai no sufixo do subtipo quando não há nome', () => {
+    expect(documentTypeLabel(undefined, 'application/vnd.ms-excel')).toBe('MS-EXCEL')
+    expect(documentTypeLabel(undefined, 'application/pdf')).toBe('PDF')
+  })
+
+  it('descarta parâmetro do mimeType', () => {
+    expect(documentTypeLabel(undefined, 'audio/ogg; codecs=opus')).toBe('OGG')
+  })
+
+  // Nome sem ponto não tem extensão — o id da mídia, por exemplo.
+  it('não confunde nome sem extensão com extensão', () => {
+    expect(documentTypeLabel('seed-media-03', 'application/zip')).toBe('ZIP')
+  })
+
+  it('tem rótulo para o caso sem nome e sem tipo', () => {
+    expect(documentTypeLabel()).toBe('FILE')
+  })
+
+  // Teto de tamanho: nenhum rótulo pode voltar a esticar a bolha.
+  it('nunca passa de 12 caracteres', () => {
+    const longo = documentTypeLabel(
+      undefined,
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    )
+
+    expect(longo.length).toBeLessThanOrEqual(12)
+  })
+})