@adatechnology/conversations-ui 0.1.0-rc.7 → 0.1.0-rc.8

package/dist/{chunk-TGTBMMFC.js → chunk-73MW5HNT.js}

@@ -394,6 +394,7 @@ function Lightbox({ imageUrl, caption, onClose, labels }) {
 // src/InteractiveMessage.tsx
 import { useState as useState3 } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var FORMATTING_CLASSES = "[&_strong]:font-bold [&_em]:italic [&_del]:line-through";
 var DEFAULT_INTERACTIVE_MESSAGE_LABELS = {
   openList: "Ver op\xE7\xF5es"
 };
@@ -411,9 +412,18 @@ function InteractiveMessage({ payload, onSelect, labels, className }) {
   const hasRows = collectRows(payload).length > 0;
   const isInteractable = onSelect !== void 0;
   return /* @__PURE__ */ jsxs5("div", { className: cn("flex flex-col gap-1", className), children: [
-    payload.header?.text ? /* @__PURE__ */ jsx7("p", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: payload.header.text }) : null,
-    payload.body?.text ? /* @__PURE__ */ jsx7("p", { className: "whitespace-pre-wrap break-words text-sm text-gray-900 dark:text-gray-100", children: payload.body.text }) : null,
-    payload.footer?.text ? /* @__PURE__ */ jsx7("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: payload.footer.text }) : null,
+    payload.header?.text ? /* @__PURE__ */ jsx7("p", { className: cn("text-sm font-semibold text-gray-900 dark:text-gray-100", FORMATTING_CLASSES), children: parseWhatsAppFormatting(payload.header.text) }) : null,
+    payload.body?.text ? /* @__PURE__ */ jsx7(
+      "p",
+      {
+        className: cn(
+          "whitespace-pre-wrap break-words text-sm text-gray-900 dark:text-gray-100",
+          FORMATTING_CLASSES
+        ),
+        children: parseWhatsAppFormatting(payload.body.text)
+      }
+    ) : null,
+    payload.footer?.text ? /* @__PURE__ */ jsx7("p", { className: cn("text-xs text-gray-500 dark:text-gray-400", FORMATTING_CLASSES), children: parseWhatsAppFormatting(payload.footer.text) }) : null,
     buttons.length > 0 ? /* @__PURE__ */ jsx7("div", { className: "mt-1 flex flex-col gap-1 border-t border-gray-200 pt-1 dark:border-gray-700", children: buttons.map((button) => /* @__PURE__ */ jsx7(
       "button",
       {

package/dist/index.js

@@ -43,7 +43,7 @@ import {
   useConversationDocuments,
   useConversationLocales,
   useConversations
-} from "./chunk-TGTBMMFC.js";
+} from "./chunk-73MW5HNT.js";
 import {
   htmlToWA,
   parseWhatsAppFormatting,

package/dist/preview/index.js

@@ -6,7 +6,7 @@ import {
   DocumentsLibrary,
   MessageBubble,
   MessageComposer
-} from "../chunk-TGTBMMFC.js";
+} from "../chunk-73MW5HNT.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.7",
+  "version": "0.1.0-rc.8",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/InteractiveMessage.test.tsx

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { InteractiveMessage } from './InteractiveMessage'
+import type { InteractivePayload } from './types'
+
+function render(payload: InteractivePayload): string {
+  return renderToStaticMarkup(<InteractiveMessage payload={payload} />)
+}
+
+describe('InteractiveMessage', () => {
+  it('formata negrito no corpo, como o aparelho faz', () => {
+    const markup = render({ type: 'button', body: { text: 'Qual o *prazo desejado*?' } })
+
+    expect(markup).toContain('<strong>prazo desejado</strong>')
+    expect(markup).not.toContain('*prazo desejado*')
+  })
+
+  it('formata cabeçalho e rodapé também', () => {
+    const markup = render({
+      type: 'list',
+      header: { text: '*Menu*' },
+      body: { text: 'corpo' },
+      footer: { text: '_Selecione_' },
+    })
+
+    expect(markup).toContain('<strong>Menu</strong>')
+    expect(markup).toContain('<em>Selecione</em>')
+  })
+
+  it('deixa título de opção literal, porque o WhatsApp não formata ali', () => {
+    const markup = render({
+      type: 'button',
+      body: { text: 'corpo' },
+      action: { buttons: [{ reply: { id: 'sim', title: '*Sim*' } }] },
+    })
+
+    expect(markup).toContain('*Sim*')
+    expect(markup).not.toContain('<strong>Sim</strong>')
+  })
+})

package/src/InteractiveMessage.tsx

@@ -13,6 +13,10 @@
 import { useState } from 'react'
 import type { InteractiveOption, InteractivePayload, InteractiveSelection } from './types'
 import { cn } from './lib/cn'
+import { parseWhatsAppFormatting } from './lib/whatsapp-formatting'
+
+/** `parseWhatsAppFormatting` emite `<strong>`/`<em>`/`<del>`, que o reset do Tailwind zera. */
+const FORMATTING_CLASSES = '[&_strong]:font-bold [&_em]:italic [&_del]:line-through'
 
 export interface InteractiveMessageLabels {
   /** Fallback do rótulo do botão que abre a lista, quando o payload não traz um. */
@@ -51,18 +55,31 @@ export function InteractiveMessage({ payload, onSelect, labels, className }: Int
 
   return (
     <div className={cn('flex flex-col gap-1', className)}>
+      {/* Cabeçalho, corpo e rodapé passam pela formatação do WhatsApp — o aparelho renderiza
+          `*negrito*` neles como em qualquer texto. Título e descrição de opção NÃO: ali o WhatsApp
+          mostra os asteriscos literais, e formatá-los aqui deixaria o simulador mais bonito que o
+          aparelho, que é o tipo de divergência que só aparece com o cliente na frente. */}
       {payload.header?.text ? (
-        <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">{payload.header.text}</p>
+        <p className={cn('text-sm font-semibold text-gray-900 dark:text-gray-100', FORMATTING_CLASSES)}>
+          {parseWhatsAppFormatting(payload.header.text)}
+        </p>
       ) : null}
 
       {payload.body?.text ? (
-        <p className="whitespace-pre-wrap break-words text-sm text-gray-900 dark:text-gray-100">
-          {payload.body.text}
+        <p
+          className={cn(
+            'whitespace-pre-wrap break-words text-sm text-gray-900 dark:text-gray-100',
+            FORMATTING_CLASSES,
+          )}
+        >
+          {parseWhatsAppFormatting(payload.body.text)}
         </p>
       ) : null}
 
       {payload.footer?.text ? (
-        <p className="text-xs text-gray-500 dark:text-gray-400">{payload.footer.text}</p>
+        <p className={cn('text-xs text-gray-500 dark:text-gray-400', FORMATTING_CLASSES)}>
+          {parseWhatsAppFormatting(payload.footer.text)}
+        </p>
       ) : null}
 
       {buttons.length > 0 ? (