@adatechnology/conversations-ui 0.1.0-rc.43 → 0.1.0-rc.44

package/dist/index.js

@@ -847,6 +847,12 @@ function Avatar({ name, avatarUrl, size = "md", className = "", labels }) {
 
 // src/ConversationListItem.tsx
 import { useMemo } from "react";
+
+// src/theme.ts
+var CHAT_TEXT_PRIMARY_CLASS = "text-[#111b21] dark:text-[#e9edef]";
+var CHAT_TEXT_SECONDARY_CLASS = "text-[#667781] dark:text-[#8696a0]";
+
+// src/ConversationListItem.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_CONVERSATION_LIST_ITEM_LABELS = {
   expiredWindow: "Janela expirada",
@@ -949,18 +955,18 @@ var ConversationListItem = ({
           /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2", children: [
             /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5 min-w-0", children: [
               !conversation.clientName && flag ? /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: flag }) : null,
-              /* @__PURE__ */ jsx5("span", { className: "text-[16px] text-[#111b21] truncate", children: name }),
+              /* @__PURE__ */ jsx5("span", { className: `text-[16px] ${CHAT_TEXT_PRIMARY_CLASS} truncate`, children: name }),
               windowStatus && windowStatus.label === "expired" && /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-red-500 flex-shrink-0", "data-cv-tooltip": expiredWindowLabel }),
               windowStatus && windowStatus.label === "warning" && /* @__PURE__ */ jsx5("span", { className: "w-2 h-2 rounded-full bg-orange-500 flex-shrink-0", "data-cv-tooltip": warningWindowLabel })
             ] }),
-            timestamp && /* @__PURE__ */ jsx5("span", { className: "text-xs text-[#667781] flex-shrink-0", children: timestamp })
+            timestamp && /* @__PURE__ */ jsx5("span", { className: `text-xs ${CHAT_TEXT_SECONDARY_CLASS} flex-shrink-0`, children: timestamp })
           ] }),
-          conversation.clientName ? /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1 text-xs text-[#667781]", children: [
+          conversation.clientName ? /* @__PURE__ */ jsxs4("div", { className: `flex items-center gap-1 text-xs ${CHAT_TEXT_SECONDARY_CLASS}`, children: [
             flag ? /* @__PURE__ */ jsx5("span", { "aria-hidden": true, children: flag }) : null,
             /* @__PURE__ */ jsx5("span", { className: "truncate", children: displayHandle })
           ] }) : null,
           /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between mt-0.5", children: [
-            /* @__PURE__ */ jsxs4("span", { className: "text-sm text-[#667781] truncate max-w-[180px]", children: [
+            /* @__PURE__ */ jsxs4("span", { className: `text-sm ${CHAT_TEXT_SECONDARY_CLASS} truncate max-w-[180px]`, children: [
               preview.icon && /* @__PURE__ */ jsx5("span", { className: "mr-1", children: preview.icon }),
               preview.preview || "Sem mensagens"
             ] }),
@@ -1098,7 +1104,7 @@ function MessageText({ message }) {
     }
   }, [message.content]);
   if (message.type === "template")
-    return /* @__PURE__ */ jsx7("p", { className: "text-sm italic text-[#667781]", children: message.content ?? "Template message" });
+    return /* @__PURE__ */ jsx7("p", { className: `text-sm italic ${CHAT_TEXT_SECONDARY_CLASS}`, children: message.content ?? "Template message" });
   return /* @__PURE__ */ jsxs6(
     "div",
     {
@@ -1116,7 +1122,7 @@ function MessageText({ message }) {
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function MessageTimestamp({ timestamp, status, isOutbound }) {
   return /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-end gap-[3px]", children: [
-    /* @__PURE__ */ jsx8("span", { className: "text-[11px] text-[#667781] leading-[15px] select-none", children: timestamp }),
+    /* @__PURE__ */ jsx8("span", { className: `text-[11px] ${CHAT_TEXT_SECONDARY_CLASS} leading-[15px] select-none`, children: timestamp }),
     isOutbound && status && /* @__PURE__ */ jsx8("span", { className: "flex items-center -mr-[2px]", children: /* @__PURE__ */ jsx8(StatusTicks, { status }) })
   ] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.43",
+  "version": "0.1.0-rc.44",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"

package/src/ConversationListItem.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { CHAT_TEXT_PRIMARY_CLASS, CHAT_TEXT_SECONDARY_CLASS } from './theme'
 import { Avatar } from './Avatar'
 import { contactFlag, formatContactHandle } from './conversationChannel'
 import type { ConversationSummary } from './providers/types'
@@ -149,7 +150,7 @@ export const ConversationListItem = ({
           <div className="flex items-center gap-1.5 min-w-0">
             {/* Sem nome, o título já é o telefone — a bandeira vai nele. */}
             {!conversation.clientName && flag ? <span aria-hidden>{flag}</span> : null}
-            <span className="text-[16px] text-[#111b21] truncate">{name}</span>
+            <span className={`text-[16px] ${CHAT_TEXT_PRIMARY_CLASS} truncate`}>{name}</span>
             {windowStatus && windowStatus.label === 'expired' && (
               <span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" data-cv-tooltip={expiredWindowLabel} />
             )}
@@ -158,20 +159,20 @@ export const ConversationListItem = ({
             )}
           </div>
           {timestamp && (
-            <span className="text-xs text-[#667781] flex-shrink-0">{timestamp}</span>
+            <span className={`text-xs ${CHAT_TEXT_SECONDARY_CLASS} flex-shrink-0`}>{timestamp}</span>
           )}
         </div>
         {/* Telefone só como subtítulo quando o título é o nome — repetir o número embaixo dele
             mesmo gastaria uma linha para dizer duas vezes a mesma coisa. */}
         {conversation.clientName ? (
-          <div className="flex items-center gap-1 text-xs text-[#667781]">
+          <div className={`flex items-center gap-1 text-xs ${CHAT_TEXT_SECONDARY_CLASS}`}>
             {flag ? <span aria-hidden>{flag}</span> : null}
             <span className="truncate">{displayHandle}</span>
           </div>
         ) : null}
 
         <div className="flex items-center justify-between mt-0.5">
-          <span className="text-sm text-[#667781] truncate max-w-[180px]">
+          <span className={`text-sm ${CHAT_TEXT_SECONDARY_CLASS} truncate max-w-[180px]`}>
             {preview.icon && <span className="mr-1">{preview.icon}</span>}
             {preview.preview || 'Sem mensagens'}
           </span>

package/src/MessageText.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react'
+import { CHAT_TEXT_SECONDARY_CLASS } from './theme'
 import type { MessagePayload } from './types'
 import { useConversations } from './providers/ConversationsProvider'
 import { parseWhatsAppFormatting } from './lib/whatsapp-formatting'
@@ -22,7 +23,7 @@ export function MessageText({ message }: MessageTextProps) {
   }, [message.content])
 
   if (message.type === 'template')
-    return <p className="text-sm italic text-[#667781]">{message.content ?? 'Template message'}</p>
+    return <p className={`text-sm italic ${CHAT_TEXT_SECONDARY_CLASS}`}>{message.content ?? 'Template message'}</p>
 
   return (
     <div

package/src/MessageTimestamp.tsx

@@ -1,4 +1,5 @@
 import { StatusTicks } from './StatusTicks'
+import { CHAT_TEXT_SECONDARY_CLASS } from './theme'
 
 export interface MessageTimestampProps {
   timestamp: string
@@ -9,7 +10,7 @@ export interface MessageTimestampProps {
 export function MessageTimestamp({ timestamp, status, isOutbound }: MessageTimestampProps) {
   return (
     <div className="flex items-center justify-end gap-[3px]">
-      <span className="text-[11px] text-[#667781] leading-[15px] select-none">
+      <span className={`text-[11px] ${CHAT_TEXT_SECONDARY_CLASS} leading-[15px] select-none`}>
         {timestamp}
       </span>
       {isOutbound && status && (

package/src/theme.ts

@@ -28,3 +28,16 @@ export function getCustomStyles(theme?: ConversationsTheme): Record<string, stri
 
   return styles
 }
+
+/**
+ * Texto do chat nos dois temas.
+ *
+ * Existe porque as cores viviam cravadas em hexadecimal na marcação, sem variante escura: nome do
+ * cliente em `#111b21` e número, horário e prévia em `#667781` — os cinzas do WhatsApp CLARO. Com o
+ * tema escuro ligado eles continuavam escuros sobre fundo escuro, e a lista virava texto quase
+ * ilegível. O mesmo par aparecia dentro do balão, que também escurece.
+ *
+ * Os valores escuros são os que o próprio WhatsApp usa, para a tela não inventar uma paleta própria.
+ */
+export const CHAT_TEXT_PRIMARY_CLASS = 'text-[#111b21] dark:text-[#e9edef]'
+export const CHAT_TEXT_SECONDARY_CLASS = 'text-[#667781] dark:text-[#8696a0]'