@adatechnology/conversations-ui 0.1.0-rc.15 → 0.1.0-rc.17

package/dist/{chunk-SOWV4264.js → chunk-OIDAIVCH.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) {
@@ -313,12 +321,35 @@ function MediaRenderer({ message, onLightbox, onResolveUrl, className }) {
   const lazy = useLazyMediaUrl(message, onResolveUrl);
   const src = eagerSrc ?? lazy.url;
   const canLazyLoad = !eagerSrc && hasLazyRef(message) && Boolean(onResolveUrl);
-  const lazyButtonClass = "text-xs text-blue-600 underline flex items-center gap-1";
+  function LazyMediaButton({ icon, label }) {
+    return /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        onClick: lazy.load,
+        disabled: lazy.loading,
+        className: "flex min-w-[180px] items-center gap-2 rounded-lg bg-black/5 px-2 py-1.5 text-left transition-colors hover:bg-black/10 disabled:opacity-60 dark:bg-white/10 dark:hover:bg-white/15",
+        children: [
+          /* @__PURE__ */ jsx5("span", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-gray-600 text-white", children: icon }),
+          /* @__PURE__ */ jsx5("span", { className: "truncate text-xs text-gray-600 dark:text-gray-300", children: label })
+        ]
+      }
+    );
+  }
   switch (message.type) {
     case "image":
     case "sticker": {
       if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage });
+        return /* @__PURE__ */ jsx5(
+          LazyMediaButton,
+          {
+            icon: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", 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" })
+            ] }),
+            label: 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 ?? 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" }),
@@ -328,7 +359,16 @@ function MediaRenderer({ message, onLightbox, onResolveUrl, className }) {
     }
     case "video": {
       if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo });
+        return /* @__PURE__ */ jsx5(
+          LazyMediaButton,
+          {
+            icon: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+              /* @__PURE__ */ jsx5("polygon", { points: "23 7 16 12 23 17 23 7" }),
+              /* @__PURE__ */ jsx5("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" })
+            ] }),
+            label: 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" }),
@@ -337,18 +377,24 @@ function MediaRenderer({ message, onLightbox, onResolveUrl, className }) {
     }
     case "audio": {
       if (!src && canLazyLoad) {
-        return /* @__PURE__ */ jsx5("button", { onClick: lazy.load, className: lazyButtonClass, children: lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.listenAudio });
+        return /* @__PURE__ */ jsx5(
+          LazyMediaButton,
+          {
+            icon: /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", className: "translate-x-0.5", children: /* @__PURE__ */ jsx5("polygon", { points: "5 3 19 12 5 21 5 3" }) }),
+            label: 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: 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 +1233,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.d.ts

@@ -560,6 +560,8 @@ interface ConversationContextEntry {
 interface ConversationContextPanelLabels {
     title: string;
     empty: string;
+    collapse: string;
+    expand: string;
 }
 declare const DEFAULT_CONVERSATION_CONTEXT_LABELS: ConversationContextPanelLabels;
 interface ConversationContextPanelClassNames {
@@ -570,11 +572,18 @@ interface ConversationContextPanelClassNames {
 }
 interface ConversationContextPanelProps {
     entries: readonly ConversationContextEntry[];
+    /**
+     * Estado inicial. Ausente, abre sozinho no desktop quando há algum dado preenchido.
+     *
+     * Existe porque "abre sozinho" nem sempre é o que o produto quer: com 1 de 6 campos preenchidos o
+     * painel ocupa altura mostrando quase só travessões, e empurra a conversa — que é o que se veio ver.
+     */
+    defaultOpen?: boolean;
     labels?: Partial<ConversationContextPanelLabels>;
     className?: string;
     classNames?: Partial<ConversationContextPanelClassNames>;
 }
-declare function ConversationContextPanel({ entries, labels: labelsOverride, className, classNames, }: ConversationContextPanelProps): react.JSX.Element;
+declare function ConversationContextPanel({ entries, defaultOpen, labels: labelsOverride, className, classNames, }: ConversationContextPanelProps): react.JSX.Element;
 
 interface WindowExpiredNoticeLabels {
     title: string;

package/dist/index.js

@@ -44,7 +44,7 @@ import {
   useConversationDocuments,
   useConversationLocales,
   useConversations
-} from "./chunk-SOWV4264.js";
+} from "./chunk-OIDAIVCH.js";
 import {
   htmlToWA,
   parseWhatsAppFormatting,
@@ -1337,10 +1337,13 @@ function useIsNarrow() {
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_CONVERSATION_CONTEXT_LABELS = {
   title: "\u{1F4CB} Suas Sele\xE7\xF5es",
-  empty: "Nada coletado ainda nesta conversa."
+  empty: "Nada coletado ainda nesta conversa.",
+  collapse: "fechar",
+  expand: "abrir"
 };
 function ConversationContextPanel({
   entries,
+  defaultOpen,
   labels: labelsOverride,
   className,
   classNames
@@ -1349,7 +1352,7 @@ function ConversationContextPanel({
   const filled = entries.filter((entry) => Boolean(entry.value));
   const isNarrow = useIsNarrow();
   const [manualOpen, setManualOpen] = useState7(void 0);
-  const open = manualOpen ?? (!isNarrow && filled.length > 0);
+  const open = manualOpen ?? defaultOpen ?? (!isNarrow && filled.length > 0);
   return /* @__PURE__ */ jsxs11("section", { className: cn("border-b", classNames?.root, className), children: [
     /* @__PURE__ */ jsxs11(
       "button",
@@ -1357,7 +1360,11 @@ function ConversationContextPanel({
         type: "button",
         onClick: () => setManualOpen(!open),
         "aria-expanded": open,
-        className: cn("flex w-full items-center gap-2 px-4 py-3 text-left text-sm font-medium", classNames?.toggle),
+        title: open ? labels.collapse : labels.expand,
+        className: cn(
+          "flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-left text-sm font-medium transition-colors hover:bg-gray-50 dark:hover:bg-gray-800",
+          classNames?.toggle
+        ),
         children: [
           /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "text-xs", children: open ? "\u25BE" : "\u25B8" }),
           /* @__PURE__ */ jsx13("span", { children: labels.title }),
@@ -1365,7 +1372,8 @@ function ConversationContextPanel({
             filled.length,
             "/",
             entries.length
-          ] })
+          ] }),
+          /* @__PURE__ */ jsx13("span", { "aria-hidden": true, className: "ml-auto text-xs text-gray-500", children: open ? labels.collapse : labels.expand })
         ]
       }
     ),

package/dist/preview/index.js

@@ -8,7 +8,7 @@ import {
   DocumentsLibrary,
   MessageBubble,
   MessageComposer
-} from "../chunk-SOWV4264.js";
+} from "../chunk-OIDAIVCH.js";
 import "../chunk-2AYDBWNE.js";
 
 // src/preview/previewStore.ts
@@ -938,7 +938,7 @@ function ConversationPreview({
     return () => clearInterval(timer);
   }, [pollIntervalMs, refresh]);
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
   }, [messages]);
   const rendered = useMemo(() => decorate([...messages, ...pendingLocal]), [messages, pendingLocal]);
   async function refreshWithFollowUps() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.15",
+  "version": "0.1.0-rc.17",
   "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/ConversationContextPanel.tsx

@@ -21,11 +21,15 @@ export interface ConversationContextEntry {
 export interface ConversationContextPanelLabels {
   title: string
   empty: string
+  collapse: string
+  expand: string
 }
 
 export const DEFAULT_CONVERSATION_CONTEXT_LABELS: ConversationContextPanelLabels = {
   title: '📋 Suas Seleções',
   empty: 'Nada coletado ainda nesta conversa.',
+  collapse: 'fechar',
+  expand: 'abrir',
 }
 
 export interface ConversationContextPanelClassNames {
@@ -37,6 +41,13 @@ export interface ConversationContextPanelClassNames {
 
 export interface ConversationContextPanelProps {
   entries: readonly ConversationContextEntry[]
+  /**
+   * Estado inicial. Ausente, abre sozinho no desktop quando há algum dado preenchido.
+   *
+   * Existe porque "abre sozinho" nem sempre é o que o produto quer: com 1 de 6 campos preenchidos o
+   * painel ocupa altura mostrando quase só travessões, e empurra a conversa — que é o que se veio ver.
+   */
+  defaultOpen?: boolean
   labels?: Partial<ConversationContextPanelLabels>
   className?: string
   classNames?: Partial<ConversationContextPanelClassNames>
@@ -44,6 +55,7 @@ export interface ConversationContextPanelProps {
 
 export function ConversationContextPanel({
   entries,
+  defaultOpen,
   labels: labelsOverride,
   className,
   classNames,
@@ -61,7 +73,7 @@ export function ConversationContextPanel({
   const [manualOpen, setManualOpen] = useState<boolean | undefined>(undefined)
   // No celular nasce fechado mesmo com dados: aberto, o painel consome ~150px da conversa. O
   // contador no cabeçalho já entrega a informação de relance.
-  const open = manualOpen ?? (!isNarrow && filled.length > 0)
+  const open = manualOpen ?? defaultOpen ?? (!isNarrow && filled.length > 0)
 
   return (
     <section className={cn('border-b', classNames?.root, className)}>
@@ -69,7 +81,11 @@ export function ConversationContextPanel({
         type="button"
         onClick={() => setManualOpen(!open)}
         aria-expanded={open}
-        className={cn('flex w-full items-center gap-2 px-4 py-3 text-left text-sm font-medium', classNames?.toggle)}
+        title={open ? labels.collapse : labels.expand}
+        className={cn(
+          'flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-left text-sm font-medium transition-colors hover:bg-gray-50 dark:hover:bg-gray-800',
+          classNames?.toggle,
+        )}
       >
         <span aria-hidden className="text-xs">
           {open ? '▾' : '▸'}
@@ -78,6 +94,11 @@ export function ConversationContextPanel({
         <span className={cn('rounded-full bg-gray-200 px-2 text-xs dark:bg-gray-700', classNames?.counter)}>
           {filled.length}/{entries.length}
         </span>
+        {/* Rótulo escrito na ponta direita: o caret sozinho não dizia que a linha inteira fecha o
+            painel — a pergunta "cadê o botão de fechar?" veio daí. */}
+        <span aria-hidden className="ml-auto text-xs text-gray-500">
+          {open ? labels.collapse : labels.expand}
+        </span>
       </button>
 
       {open ? (

package/src/MediaRenderer.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, type ReactNode } from 'react'
 import { AudioPlayer } from './AudioPlayer'
 import { FileIcon } from './FileIcon'
 import { useConversationLocales } from './ConversationLocalesProvider'
@@ -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) {
@@ -65,16 +84,35 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl, className }:
   const src = eagerSrc ?? lazy.url
   const canLazyLoad = !eagerSrc && hasLazyRef(message) && Boolean(onResolveUrl)
 
-  const lazyButtonClass = 'text-xs text-blue-600 underline flex items-center gap-1'
+  /**
+   * O carregamento sob demanda continua sendo um botão, mas com a forma da mídia que ele vai virar
+   * — um link sublinhado no meio da conversa lê como texto da mensagem, não como controle, e é a
+   * única bolha que não se parece com o que contém.
+   */
+  function LazyMediaButton({ icon, label }: { icon: ReactNode; label: string }) {
+    return (
+      <button
+        onClick={lazy.load}
+        disabled={lazy.loading}
+        className="flex min-w-[180px] items-center gap-2 rounded-lg bg-black/5 px-2 py-1.5 text-left transition-colors hover:bg-black/10 disabled:opacity-60 dark:bg-white/10 dark:hover:bg-white/15"
+      >
+        <span className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-gray-600 text-white">
+          {icon}
+        </span>
+        <span className="truncate text-xs text-gray-600 dark:text-gray-300">{label}</span>
+      </button>
+    )
+  }
 
   switch (message.type) {
     case 'image':
     case 'sticker': {
       if (!src && canLazyLoad) {
         return (
-          <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage}
-          </button>
+          <LazyMediaButton
+            icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><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>}
+            label={lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewImage}
+          />
         )
       }
       return (
@@ -92,9 +130,10 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl, className }:
     case 'video': {
       if (!src && canLazyLoad) {
         return (
-          <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo}
-          </button>
+          <LazyMediaButton
+            icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="23 7 16 12 23 17 23 7" /><rect x="1" y="5" width="15" height="14" rx="2" ry="2" /></svg>}
+            label={lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.viewVideo}
+          />
         )
       }
       return (
@@ -112,9 +151,10 @@ export function MediaRenderer({ message, onLightbox, onResolveUrl, className }:
     case 'audio': {
       if (!src && canLazyLoad) {
         return (
-          <button onClick={lazy.load} className={lazyButtonClass}>
-            {lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.listenAudio}
-          </button>
+          <LazyMediaButton
+            icon={<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="translate-x-0.5"><polygon points="5 3 19 12 5 21 5 3" /></svg>}
+            label={lazy.loading ? bubble.mediaLoading : lazy.error ? bubble.mediaRetry : bubble.listenAudio}
+          />
         )
       }
       return (
@@ -126,7 +166,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 +175,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/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)
+  })
+})

package/src/preview/ConversationPreview.tsx

@@ -188,7 +188,10 @@ export function ConversationPreview({
   }, [pollIntervalMs, refresh])
 
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+    // `block: 'nearest'` e não o padrão ('start'): o padrão alinha o elemento ao topo da área
+    // visível MAIS PRÓXIMA que role — e quando o container do preview não tem altura limitada, essa
+    // área é a PÁGINA. O efeito era a tela inteira saltar para baixo ao abrir/usar o simulador.
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
   }, [messages])
 
   const rendered = useMemo(() => decorate([...messages, ...pendingLocal]), [messages, pendingLocal])