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

package/dist/{chunk-N7B24WYD.js → chunk-4R6Y43DQ.js}

@@ -18,7 +18,14 @@ var DEFAULT_LOCALES = {
     viewImage: "Ver imagem",
     listenAudio: "Ouvir \xE1udio",
     viewVideo: "Ver v\xEDdeo",
-    moderationFlagged: "Linguagem ofensiva"
+    moderationFlagged: "Linguagem ofensiva",
+    mediaLoading: "Carregando...",
+    mediaRetry: "Erro \u2014 tentar novamente",
+    mediaError: "Erro",
+    mediaUnavailable: "M\xEDdia indispon\xEDvel",
+    imageAlt: "Imagem",
+    untitledDocument: "Documento",
+    downloadFile: "Baixar"
   },
   selection: {
     select: "Selecionar"
@@ -254,9 +261,9 @@ function MediaRenderer({ message, onLightbox, onResolveUrl }) {
     case "image":
     case "sticker": {
       if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? "Carregando..." : lazy.error ? "Erro \u2014 tentar novamente" : bubble.viewImage });
+        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage });
       }
-      return /* @__PURE__ */ jsx5("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx5("img", { src, alt: message.caption ?? "Image", className: "w-full max-h-80 object-cover cursor-pointer hover:opacity-90 transition-opacity", onClick: () => onLightbox(src), loading: "lazy" }) : /* @__PURE__ */ jsx5("div", { className: "w-full h-40 bg-gray-200 flex items-center justify-center text-gray-400", children: /* @__PURE__ */ jsxs3("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+      return /* @__PURE__ */ jsx5("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx5("img", { src, alt: message.caption ?? bubble.imageAlt, className: "w-full max-h-80 object-cover cursor-pointer hover:opacity-90 transition-opacity", onClick: () => onLightbox(src), loading: "lazy" }) : /* @__PURE__ */ jsx5("div", { className: "w-full h-40 bg-gray-200 flex items-center justify-center text-gray-400", children: /* @__PURE__ */ jsxs3("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
         /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
         /* @__PURE__ */ jsx5("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
         /* @__PURE__ */ jsx5("polyline", { points: "21 15 16 10 5 21" })
@@ -264,7 +271,7 @@ function MediaRenderer({ message, onLightbox, onResolveUrl }) {
     }
     case "video": {
       if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? "Carregando..." : lazy.error ? "Erro \u2014 tentar novamente" : bubble.viewVideo });
+        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo });
       }
       return /* @__PURE__ */ jsx5("div", { className: "min-w-[200px]", children: src ? /* @__PURE__ */ jsx5("video", { src, className: "w-full max-h-80 rounded-lg", controls: true, preload: "metadata", children: /* @__PURE__ */ jsx5("track", { kind: "captions" }) }) : /* @__PURE__ */ jsx5("div", { className: "w-full h-32 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400", children: /* @__PURE__ */ jsxs3("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
         /* @__PURE__ */ jsx5("polygon", { points: "23 7 16 12 23 17 23 7" }),
@@ -273,9 +280,9 @@ function MediaRenderer({ message, onLightbox, onResolveUrl }) {
     }
     case "audio": {
       if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? "Carregando..." : lazy.error ? "Erro \u2014 tentar novamente" : bubble.listenAudio });
+        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.listenAudio });
       }
-      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: "Audio unavailable" }) });
+      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";
@@ -283,10 +290,10 @@ function MediaRenderer({ message, onLightbox, onResolveUrl }) {
       return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 min-w-[200px]", 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 ?? "Document" }),
+          /* @__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 })
         ] }),
-        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": "Download", children: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "text-gray-600", children: [
+        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" }),
           /* @__PURE__ */ jsx5("polyline", { points: "7 10 12 15 17 10" }),
           /* @__PURE__ */ jsx5("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
@@ -296,7 +303,7 @@ function MediaRenderer({ message, onLightbox, onResolveUrl }) {
             onClick: lazy.load,
             disabled: lazy.loading,
             className: "w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors disabled:opacity-50",
-            "aria-label": "Download",
+            "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" }),
               /* @__PURE__ */ jsx5("polyline", { points: "7 10 12 15 17 10" }),
@@ -304,7 +311,7 @@ function MediaRenderer({ message, onLightbox, onResolveUrl }) {
             ] })
           }
         ) : null,
-        lazy.error && /* @__PURE__ */ jsx5("span", { className: "text-xs text-red-500 flex-shrink-0", children: "Erro" })
+        lazy.error && /* @__PURE__ */ jsx5("span", { className: "text-xs text-red-500 flex-shrink-0", children: bubble.mediaError })
       ] });
     }
     default:

package/dist/index.d.ts

@@ -44,6 +44,13 @@ interface ConversationLocales {
         listenAudio: string;
         viewVideo: string;
         moderationFlagged: string;
+        mediaLoading: string;
+        mediaRetry: string;
+        mediaError: string;
+        mediaUnavailable: string;
+        imageAlt: string;
+        untitledDocument: string;
+        downloadFile: string;
     };
     selection: {
         select: string;

package/dist/index.js

@@ -18,7 +18,7 @@ import {
   formatFileSize,
   formatTimestamp,
   useConversationLocales
-} from "./chunk-N7B24WYD.js";
+} from "./chunk-4R6Y43DQ.js";
 import {
   htmlToWA,
   parseWhatsAppFormatting,

package/dist/preview/index.js

@@ -3,7 +3,7 @@ import {
   DateDivider,
   MessageBubble,
   MessageComposer
-} from "../chunk-N7B24WYD.js";
+} from "../chunk-4R6Y43DQ.js";
 import "../chunk-OGRRHQQW.js";
 
 // src/preview/previewStore.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.3",
+  "version": "0.1.0-rc.4",
   "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-rc.3"
+    "@adatechnology/meta-whatsapp-contracts": "0.2.0-rc.4"
   },
   "peerDependencies": {
     "react": "^18 || ^19",

package/src/ConversationLocalesProvider.tsx

@@ -14,6 +14,13 @@ export interface ConversationLocales {
     listenAudio: string
     viewVideo: string
     moderationFlagged: string
+    mediaLoading: string
+    mediaRetry: string
+    mediaError: string
+    mediaUnavailable: string
+    imageAlt: string
+    untitledDocument: string
+    downloadFile: string
   }
   selection: {
     select: string
@@ -38,6 +45,13 @@ const DEFAULT_LOCALES: ConversationLocales = {
     listenAudio: 'Ouvir áudio',
     viewVideo: 'Ver vídeo',
     moderationFlagged: 'Linguagem ofensiva',
+    mediaLoading: 'Carregando...',
+    mediaRetry: 'Erro — tentar novamente',
+    mediaError: 'Erro',
+    mediaUnavailable: 'Mídia indisponível',
+    imageAlt: 'Imagem',
+    untitledDocument: 'Documento',
+    downloadFile: 'Baixar',
   },
   selection: {
     select: 'Selecionar',

package/src/MediaRenderer.tsx

@@ -70,14 +70,14 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl }: MediaRender
       if (!src && canLazyLoad) {
         return (
           <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? 'Carregando...' : lazy.error ? 'Erro — tentar novamente' : bubble.viewImage}
+            {lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage}
           </button>
         )
       }
       return (
         <div className="min-w-[200px]">
           {src ? (
-            <img src={src} alt={message.caption ?? 'Image'} className="w-full max-h-80 object-cover cursor-pointer hover:opacity-90 transition-opacity" onClick={() => onLightbox(src)} loading="lazy" />
+            <img src={src} alt={message.caption ?? bubble.imageAlt} className="w-full max-h-80 object-cover cursor-pointer hover:opacity-90 transition-opacity" onClick={() => onLightbox(src)} loading="lazy" />
           ) : (
             <div className="w-full h-40 bg-gray-200 flex items-center justify-center text-gray-400">
               <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle cx="8.5" cy="8.5" r="1.5" /><polyline points="21 15 16 10 5 21" /></svg>
@@ -90,7 +90,7 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl }: MediaRender
       if (!src && canLazyLoad) {
         return (
           <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? 'Carregando...' : lazy.error ? 'Erro — tentar novamente' : bubble.viewVideo}
+            {lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo}
           </button>
         )
       }
@@ -110,14 +110,14 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl }: MediaRender
       if (!src && canLazyLoad) {
         return (
           <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? 'Carregando...' : lazy.error ? 'Erro — tentar novamente' : bubble.listenAudio}
+            {lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.listenAudio}
           </button>
         )
       }
       return (
         <div className="min-w-[200px]">
           {src ? <AudioPlayer src={src} isMine={message.direction === 'outbound'} /> : (
-            <div className="h-12 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 text-xs">Audio unavailable</div>
+            <div className="h-12 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 text-xs">{bubble.mediaUnavailable}</div>
           )}
         </div>
       )
@@ -131,11 +131,11 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl }: MediaRender
             <FileIcon filename={message.filename} mimeType={message.mimeType} />
           </div>
           <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium truncate">{message.filename ?? 'Document'}</p>
+            <p className="text-sm font-medium truncate">{message.filename ?? bubble.untitledDocument}</p>
             <p className="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="Download">
+            <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}>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-gray-600"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></svg>
             </a>
           ) : canLazyLoad ? (
@@ -143,12 +143,12 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl }: MediaRender
               onClick={lazy.load}
               disabled={lazy.loading}
               className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors disabled:opacity-50"
-              aria-label="Download"
+              aria-label={bubble.downloadFile}
             >
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-gray-600"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></svg>
             </button>
           ) : null}
-          {lazy.error && <span className="text-xs text-red-500 flex-shrink-0">Erro</span>}
+          {lazy.error && <span className="text-xs text-red-500 flex-shrink-0">{bubble.mediaError}</span>}
         </div>
       )
     }