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

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

@@ -321,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" }),
@@ -336,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" }),
@@ -345,7 +377,13 @@ 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 }) });
     }

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-RNCZO2FM.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-RNCZO2FM.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.16",
+  "version": "0.1.0-rc.17",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

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'
@@ -84,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 (
@@ -111,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 (
@@ -131,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 (

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])