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

package/dist/{chunk-OGRRHQQW.js → chunk-2AYDBWNE.js}

@@ -151,9 +151,63 @@ function waToHTMLInline(text) {
   return escapeHtml(text).replace(/\*([^*\n]+)\*/g, "<strong>$1</strong>").replace(/_([^_\n]+)_/g, "<em>$1</em>").replace(/~([^~\n]+)~/g, "<del>$1</del>").replace(/`([^`\n]+)`/g, "<code>$1</code>");
 }
 
+// src/useDarkMode.ts
+import { useState, useEffect, useCallback } from "react";
+var STORAGE_KEY = "conversations-ui-dark-mode";
+function getInitialDark() {
+  if (typeof window === "undefined") return false;
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored !== null) {
+    return stored === "true";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function useIsDarkTheme() {
+  const [isDark, setIsDark] = useState(
+    () => typeof document !== "undefined" && document.documentElement.classList.contains("dark")
+  );
+  useEffect(() => {
+    const root = document.documentElement;
+    const observer = new MutationObserver(() => setIsDark(root.classList.contains("dark")));
+    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+    setIsDark(root.classList.contains("dark"));
+    return () => observer.disconnect();
+  }, []);
+  return isDark;
+}
+function useDarkMode() {
+  const [isDark, setIsDark] = useState(getInitialDark);
+  useEffect(() => {
+    const root = document.documentElement;
+    if (isDark) {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+    localStorage.setItem(STORAGE_KEY, String(isDark));
+  }, [isDark]);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (event) => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored === null) {
+        setIsDark(event.matches);
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const toggle = useCallback(() => {
+    setIsDark((prev) => !prev);
+  }, []);
+  return { isDark, toggle };
+}
+
 export {
   parseWhatsAppFormatting,
   waToHTML,
   htmlToWA,
-  waToHTMLInline
+  waToHTMLInline,
+  useIsDarkTheme,
+  useDarkMode
 };

package/dist/{chunk-TGTBMMFC.js → chunk-G5BM3VBP.js}

@@ -1,6 +1,7 @@
 import {
-  parseWhatsAppFormatting
-} from "./chunk-OGRRHQQW.js";
+  parseWhatsAppFormatting,
+  useIsDarkTheme
+} from "./chunk-2AYDBWNE.js";
 
 // src/ConversationLocalesProvider.tsx
 import { createContext, useContext } from "react";
@@ -394,6 +395,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 +413,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",
       {
@@ -606,8 +617,32 @@ function MessageBubble({
 
 // src/Wallpaper.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-function ConversationWallpaper({ children, className }) {
-  return /* @__PURE__ */ jsx10("div", { className: cn("cv-wallpaper", className), children });
+function doodlePattern(strokeColor, opacity) {
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='${strokeColor}' stroke-width='1.2' opacity='${opacity}'><circle cx='15' cy='15' r='3'/><path d='M40 10 q5 8 0 16 q-5 -8 0 -16z'/><circle cx='70' cy='28' r='2'/><path d='M18 55 l6 6 m-6 0 l6 -6'/><circle cx='55' cy='68' r='2.5'/><path d='M85 58 q6 6 0 12 q-6 -6 0 -12z'/><circle cx='8' cy='85' r='2'/><path d='M65 90 l5 5 m-5 0 l5 -5'/></g></svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+var LIGHT_WALLPAPER = {
+  backgroundColor: "#efeae2",
+  backgroundImage: doodlePattern("#d7cfc0", 0.7),
+  backgroundRepeat: "repeat",
+  backgroundSize: "100px 100px"
+};
+var DARK_WALLPAPER = {
+  backgroundColor: "#0b141a",
+  backgroundImage: doodlePattern("#19232a", 0.9),
+  backgroundRepeat: "repeat",
+  backgroundSize: "100px 100px"
+};
+function ConversationWallpaper({ children, className, style }) {
+  const isDark = useIsDarkTheme();
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: cn("cv-wallpaper", className),
+      style: { ...isDark ? DARK_WALLPAPER : LIGHT_WALLPAPER, ...style },
+      children
+    }
+  );
 }
 
 // src/emojiCatalog.ts

package/dist/flows/index.js

@@ -1,9 +1,7 @@
 import {
+  parseWhatsAppFormatting,
   useIsDarkTheme
-} from "../chunk-NV2RZ5KT.js";
-import {
-  parseWhatsAppFormatting
-} from "../chunk-OGRRHQQW.js";
+} from "../chunk-2AYDBWNE.js";
 
 // src/flows/FlowNodeCard.tsx
 import { Handle, Position } from "@xyflow/react";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { ReactNode, FormEvent } from 'react';
+import react__default, { ReactNode, CSSProperties, FormEvent } from 'react';
 import { y as MessagePayload, A as ResolveMediaUrl, v as InteractiveSelection, t as InteractivePayload, p as ConversationsFeatures, m as ConversationSummary, h as ConversationChannel, L as ListConversationsParams, o as ConversationsApi, S as SSEProvider, w as ListDocumentsParams, i as ConversationDocument, n as ConversationTemplate } from './types-B5C1DLu1.js';
 export { C as CHANNEL_CAPABILITIES, a as CHANNEL_FILTER_ALL, b as CONVERSATION_CHANNEL, c as ChannelCapabilities, d as ChannelFilter, e as ChannelFilterOption, f as CompanyDocument, g as CompanyDocumentPage, j as ConversationDocumentPage, k as ConversationEventSource, l as ConversationPage, q as ConversationsTheme, r as ConversationsUIConfig, D as DEFAULT_CONVERSATION_CHANNEL, F as FormatContactHandleParams, H as HANDLE_KIND, s as HandleKind, I as InteractiveOption, u as InteractiveSection, M as MediaRenderer, x as MediaRendererProps, R as REOPEN_MECHANISM, z as ReopenMechanism, B as capabilitiesOf, E as channelFiltersFor, G as contactFlag, J as formatContactHandle } from './types-B5C1DLu1.js';
 
@@ -41,8 +41,10 @@ declare function InteractiveMessage({ payload, onSelect, labels, className }: In
 interface ConversationWallpaperProps {
     children?: ReactNode;
     className?: string;
+    /** Ajusta ou substitui o fundo padrão — para produto com identidade visual própria. */
+    style?: CSSProperties;
 }
-declare function ConversationWallpaper({ children, className }: ConversationWallpaperProps): react.JSX.Element;
+declare function ConversationWallpaper({ children, className, style }: ConversationWallpaperProps): react.JSX.Element;
 
 interface ConversationLocales {
     bubble: {

package/dist/index.js

@@ -1,7 +1,3 @@
-import {
-  useDarkMode,
-  useIsDarkTheme
-} from "./chunk-NV2RZ5KT.js";
 import {
   AudioPlayer,
   ConversationDocumentsPanel,
@@ -43,13 +39,15 @@ import {
   useConversationDocuments,
   useConversationLocales,
   useConversations
-} from "./chunk-TGTBMMFC.js";
+} from "./chunk-G5BM3VBP.js";
 import {
   htmlToWA,
   parseWhatsAppFormatting,
+  useDarkMode,
+  useIsDarkTheme,
   waToHTML,
   waToHTMLInline
-} from "./chunk-OGRRHQQW.js";
+} from "./chunk-2AYDBWNE.js";
 
 // src/WhatsAppMessageEditor.tsx
 import { useRef } from "react";

package/dist/preview/index.js

@@ -6,8 +6,8 @@ import {
   DocumentsLibrary,
   MessageBubble,
   MessageComposer
-} from "../chunk-TGTBMMFC.js";
-import "../chunk-OGRRHQQW.js";
+} from "../chunk-G5BM3VBP.js";
+import "../chunk-2AYDBWNE.js";
 
 // src/preview/previewStore.ts
 var GLOBAL_CHANNEL = "global";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.7",
+  "version": "0.1.0-rc.9",
   "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 ? (

package/src/Wallpaper.test.tsx

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ConversationWallpaper } from './Wallpaper'
+
+describe('ConversationWallpaper', () => {
+  it('desenha o fundo sozinho, sem depender do styles.css do host', () => {
+    const markup = renderToStaticMarkup(<ConversationWallpaper />)
+
+    expect(markup).toContain('background-color:#efeae2')
+    expect(markup).toContain('background-image:url(&quot;data:image/svg+xml,')
+    expect(markup).toContain('cv-wallpaper')
+  })
+
+  it('deixa o produto sobrescrever o fundo por style', () => {
+    const markup = renderToStaticMarkup(<ConversationWallpaper style={{ backgroundColor: '#123456' }} />)
+
+    expect(markup).toContain('background-color:#123456')
+    expect(markup).not.toContain('background-color:#efeae2')
+  })
+})

package/src/Wallpaper.tsx

@@ -1,15 +1,61 @@
-import type { ReactNode } from 'react'
+/**
+ * Fundo da conversa — a textura clara/escura do WhatsApp.
+ *
+ * O fundo vem embutido, e não da folha de estilo do pacote: `styles.css` é um import opcional que o
+ * host precisa lembrar de fazer, e esquecê-lo deixava a conversa sobre branco liso, sem erro nenhum
+ * para denunciar o problema. Fundo é identidade do componente, não tema do host.
+ *
+ * A classe `cv-wallpaper` continua no elemento para quem já sobrescreve por CSS.
+ */
+
+import type { CSSProperties, ReactNode } from 'react'
 
 import { cn } from './lib/cn'
+import { useIsDarkTheme } from './useDarkMode'
+
+/** Textura do WhatsApp: rabiscos esparsos que se repetem a cada 100px. */
+function doodlePattern(strokeColor: string, opacity: number): string {
+  const svg =
+    `<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'>` +
+    `<g fill='none' stroke='${strokeColor}' stroke-width='1.2' opacity='${opacity}'>` +
+    `<circle cx='15' cy='15' r='3'/><path d='M40 10 q5 8 0 16 q-5 -8 0 -16z'/>` +
+    `<circle cx='70' cy='28' r='2'/><path d='M18 55 l6 6 m-6 0 l6 -6'/>` +
+    `<circle cx='55' cy='68' r='2.5'/><path d='M85 58 q6 6 0 12 q-6 -6 0 -12z'/>` +
+    `<circle cx='8' cy='85' r='2'/><path d='M65 90 l5 5 m-5 0 l5 -5'/>` +
+    `</g></svg>`
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`
+}
+
+const LIGHT_WALLPAPER: CSSProperties = {
+  backgroundColor: '#efeae2',
+  backgroundImage: doodlePattern('#d7cfc0', 0.7),
+  backgroundRepeat: 'repeat',
+  backgroundSize: '100px 100px',
+}
+
+const DARK_WALLPAPER: CSSProperties = {
+  backgroundColor: '#0b141a',
+  backgroundImage: doodlePattern('#19232a', 0.9),
+  backgroundRepeat: 'repeat',
+  backgroundSize: '100px 100px',
+}
 
 export interface ConversationWallpaperProps {
   children?: ReactNode
   className?: string
+  /** Ajusta ou substitui o fundo padrão — para produto com identidade visual própria. */
+  style?: CSSProperties
 }
 
-// Requer o import de '@adatechnology/conversations-ui/styles.css' uma vez no host —
-// a classe `.cv-wallpaper` (e sua variante `.dark`) vive nesse stylesheet, não em CSS-in-JS,
-// para não depender da configuração de Tailwind do consumidor.
-export function ConversationWallpaper({ children, className }: ConversationWallpaperProps) {
-  return <div className={cn('cv-wallpaper', className)}>{children}</div>
+export function ConversationWallpaper({ children, className, style }: ConversationWallpaperProps) {
+  const isDark = useIsDarkTheme()
+
+  return (
+    <div
+      className={cn('cv-wallpaper', className)}
+      style={{ ...(isDark ? DARK_WALLPAPER : LIGHT_WALLPAPER), ...style }}
+    >
+      {children}
+    </div>
+  )
 }

package/dist/chunk-NV2RZ5KT.js

@@ -1,56 +0,0 @@
-// src/useDarkMode.ts
-import { useState, useEffect, useCallback } from "react";
-var STORAGE_KEY = "conversations-ui-dark-mode";
-function getInitialDark() {
-  if (typeof window === "undefined") return false;
-  const stored = localStorage.getItem(STORAGE_KEY);
-  if (stored !== null) {
-    return stored === "true";
-  }
-  return window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
-function useIsDarkTheme() {
-  const [isDark, setIsDark] = useState(
-    () => typeof document !== "undefined" && document.documentElement.classList.contains("dark")
-  );
-  useEffect(() => {
-    const root = document.documentElement;
-    const observer = new MutationObserver(() => setIsDark(root.classList.contains("dark")));
-    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
-    setIsDark(root.classList.contains("dark"));
-    return () => observer.disconnect();
-  }, []);
-  return isDark;
-}
-function useDarkMode() {
-  const [isDark, setIsDark] = useState(getInitialDark);
-  useEffect(() => {
-    const root = document.documentElement;
-    if (isDark) {
-      root.classList.add("dark");
-    } else {
-      root.classList.remove("dark");
-    }
-    localStorage.setItem(STORAGE_KEY, String(isDark));
-  }, [isDark]);
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = (event) => {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored === null) {
-        setIsDark(event.matches);
-      }
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, []);
-  const toggle = useCallback(() => {
-    setIsDark((prev) => !prev);
-  }, []);
-  return { isDark, toggle };
-}
-
-export {
-  useIsDarkTheme,
-  useDarkMode
-};