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

package/dist/index.d.ts

@@ -545,6 +545,45 @@ type WindowOfParams = {
 declare function windowOf(params: WindowOfParams): ConversationWindow;
 declare function formatStalledFor(lastAt: string, now: number): string;
 
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * Há quanto tempo o cliente espera resposta.
+ *
+ * Não confundir com `conversationWindow`: aquilo é a janela de sessão da plataforma (o que o canal
+ * ainda deixa enviar), isto é serviço (quanto o cliente esperou). Os dois divergem justamente no
+ * caso que interessa — respondida a conversa, o relógio do SLA para e o da janela continua correndo.
+ *
+ * A conta sai de dados que a listagem já traz: se a última mensagem foi do cliente, ninguém
+ * respondeu ainda e a espera conta desde ela. Se a última foi nossa, não há espera pendente.
+ */
+declare const REPLY_LATENCY: {
+    /** Até 6h — dentro do combinado. */
+    readonly WITHIN: "within";
+    /** 6h a 12h — passou do combinado. */
+    readonly LATE: "late";
+    /** Acima de 12h. */
+    readonly CRITICAL: "critical";
+};
+type ReplyLatency = (typeof REPLY_LATENCY)[keyof typeof REPLY_LATENCY];
+declare const REPLY_LATENCY_LATE_HOURS = 6;
+declare const REPLY_LATENCY_CRITICAL_HOURS = 12;
+type ReplyLatencyParams = {
+    /** Direção da última mensagem. Ausente = desconhecida, e aí não se afirma espera. */
+    readonly lastDirection?: 'inbound' | 'outbound' | undefined;
+    readonly lastInboundAt: string | null;
+    readonly now: number;
+};
+/**
+ * `null` quando não há espera a mostrar — conversa já respondida, ou cliente que nunca escreveu.
+ *
+ * Devolver uma faixa nesses casos encheria a lista de selos em conversa que não deve nada, e o
+ * alerta que aponta para todo lado não aponta para lugar nenhum.
+ */
+declare function replyLatencyOf(params: ReplyLatencyParams): ReplyLatency | null;
+/** Só o que passou do combinado merece alerta — é o corte que a lista usa para destacar. */
+declare function isReplyOverdue(latency: ReplyLatency | null): boolean;
+
 type ConversationRowClassNames = {
     root: string;
     windowBar: string;
@@ -1880,4 +1919,4 @@ interface ConversationsInboxListProps {
 }
 declare function ConversationsInboxList({ inbox, labels, className, renderFilters, renderBulkActions, renderRow, onSendTemplateToSelected, }: ConversationsInboxListProps): react.JSX.Element;
 
-export { type AsyncResourceState, AudioPlayer, type AudioPlayerProps, AudioTranscription, type AudioTranscriptionProps, Avatar, type AvatarLabels, type AvatarProps, type BotMessages, type BuildTranscriptTextParams, BulkActionBar, type BulkActionBarProps, CHANNEL_BRAND_COLOR, CONVERSATIONS_PER_PAGE, CONVERSATION_WINDOW, ChannelFilter, ChannelFilterOption, ChannelIcon, type ChannelIconProps, ConversationChannel, type ConversationContextEntry, ConversationContextPanel, type ConversationContextPanelClassNames, type ConversationContextPanelLabels, type ConversationContextPanelProps, type ConversationContextStatus, ConversationDocument, ConversationDocumentsPanel, type ConversationDocumentsPanelClassNames, type ConversationDocumentsPanelLabels, type ConversationDocumentsPanelProps, ConversationHeader, type ConversationHeaderClassNames, type ConversationHeaderLabels, type ConversationHeaderProps, type ConversationHeaderUtility, ConversationListItem, type ConversationListItemLabels, type ConversationListItemProps, type ConversationLocales, ConversationLocalesProvider, type ConversationLocalesProviderProps, ConversationPane, type ConversationPaneProps, type ConversationRealtimeHandler, ConversationRow, type ConversationRowClassNames, type ConversationRowProps, ConversationSimulatorClient, ConversationSummary, ConversationTemplate, ConversationWallpaper, type ConversationWallpaperProps, type ConversationWindow, ConversationsApi, ConversationsFeatures, ConversationsInboxList, type ConversationsInboxListProps, ConversationsProvider, ConversationsWorkspace, type ConversationsWorkspaceLabels, type ConversationsWorkspaceProps, type ConversationsWorkspaceSimulator, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_AVATAR_LABELS, DEFAULT_CONVERSATIONS_WORKSPACE_LABELS, DEFAULT_CONVERSATION_CONTEXT_LABELS, DEFAULT_CONVERSATION_DOCUMENTS_LABELS, DEFAULT_CONVERSATION_HEADER_LABELS, DEFAULT_CONVERSATION_LIST_ITEM_LABELS, DEFAULT_DARK_MODE_TOGGLE_LABELS, DEFAULT_DOCUMENTS_LIBRARY_LABELS, DEFAULT_DOCUMENTS_WORKSPACE_LABELS, DEFAULT_EMOJI_PICKER_LABELS, DEFAULT_INTERACTIVE_MESSAGE_LABELS, DEFAULT_LIGHTBOX_LABELS, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_RICH_COMPOSER_TOOLTIPS, DEFAULT_TEMPLATES_SETTINGS_LABELS, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, DEFAULT_WINDOW_EXPIRED_LABELS, DOCUMENT_SOURCE_FILTER, DarkModeToggle, type DarkModeToggleLabels, type DarkModeToggleProps, DateDivider, type DateDividerClassNames, type DateDividerProps, type DocumentSourceFilter, type DocumentsFiltersContext, DocumentsLibrary, type DocumentsLibraryClassNames, type DocumentsLibraryLabels, type DocumentsLibraryProps, DocumentsWorkspace, type DocumentsWorkspaceClassNames, type DocumentsWorkspaceLabels, type DocumentsWorkspaceProps, EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, FileIcon, type FileIconProps, type FilterOption, InteractiveMessage, type InteractiveMessageLabels, type InteractiveMessageProps, InteractivePayload, InteractiveSelection, Lightbox, type LightboxLabels, type LightboxProps, ListConversationsParams, ListDocumentsParams, ListingPagination, type ListingPaginationProps, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerClassNames, type MessageComposerLabels, type MessageComposerProps, MessagePayload, MessageTail, MessageText, type MessageTextProps, MessageTimestamp, MessageTranscription, MessagesWorkspace, type MessagesWorkspaceApi, type MessagesWorkspaceLabels, type MessagesWorkspaceProps, type MessagesWorkspaceTemplateRole, MultiSelectFilter, type MultiSelectFilterProps, NARROW_MAX_WIDTH_PX, type QuickReply, RICH_COMPOSER_ACTION, ResolveMediaUrl, type RichComposerAction, type RichComposerQuickReply, type RichComposerTooltips, type RichComposerVariable, RichMessageComposer, type RichMessageComposerHandle, type RichMessageComposerProps, SSEProvider, SimpleEmojiPicker, type SimpleEmojiPickerProps, type SimulatorTransportFactory, type SimulatorTransportParams, type SortDirection, SortableHead, type SortableHeadProps, StatusTicks, type StatusTicksProps, TEMPLATE_SETTINGS_TAB, TOOLTIP_ATTRIBUTE, type TemplateSettings, type TemplateSettingsTab, ToastProvider, TooltipLayer, type TopicItem, TopicsForm, type TopicsFormLabels, type TopicsFormProps, TranscriptionMode, type TranscriptionSettings, TranscriptionSettingsForm, type TranscriptionSettingsFormLabels, type TranscriptionSettingsFormProps, type UrlStateOptions, type UseConversationActionsResult, type UseConversationContextResult, type UseConversationDocumentsParams, type UseConversationDocumentsResult, type UseConversationListParams, type UseConversationListResult, type UseConversationMessagesResult, type UseConversationsInboxParams, type UseConversationsInboxResult, type UseInboxActionsResult, type UseScrollToLatestMessageParams, type UseScrollToLatestMessageResult, type UseWaitingNotificationsLabels, type UseWaitingNotificationsParams, type UseWaitingNotificationsResult, WINDOW_FILTERS, WelcomeFarewellForm, type WelcomeFarewellFormLabels, type WelcomeFarewellFormProps, WhatsAppCreateTemplateForm, type WhatsAppCreateTemplateFormLabels, type WhatsAppCreateTemplateFormProps, type WhatsAppCreateTemplateResult, type WhatsAppCreateTemplateState, WhatsAppMessageEditor, type WhatsAppMessageEditorLabels, type WhatsAppMessageEditorProps, type WhatsAppTemplateHeaderType, WhatsAppTemplateSettingsForm, type WhatsAppTemplateSettingsFormLabels, type WhatsAppTemplateSettingsFormProps, type WhatsAppTemplateSummary, type WhatsAppTemplateVariableSuggestion, WhatsAppTemplatesSettings, type WhatsAppTemplatesSettingsLabels, type WhatsAppTemplatesSettingsProps, WindowExpiredNotice, type WindowExpiredNoticeLabels, type WindowExpiredNoticeProps, type WindowOfParams, applyQuickReplyVariables, buildTranscriptFilename, buildTranscriptText, createMediaUrlResolver, downloadTextFile, formatDateTime, formatFileSize, formatPhone, formatStalledFor, formatTimestamp, htmlToWA, isSameDay, isWindowBlocking, parseWhatsAppFormatting, phoneInitials, resolveQuickReply, searchEmojis, toast, useConversationActions, useConversationContext, useConversationDocuments, useConversationList, useConversationLocales, useConversationMessages, useConversationRealtime, useConversations, useConversationsInbox, useDarkMode, useDebouncedValue, useGlobalRealtime, useInboxActions, useIsDarkTheme, useIsNarrow, useScrollToLatestMessage, useToast, useUrlArrayState, useUrlNumberState, useUrlStringState, useWaitingNotifications, waToHTML, waToHTMLInline, windowOf };
+export { type AsyncResourceState, AudioPlayer, type AudioPlayerProps, AudioTranscription, type AudioTranscriptionProps, Avatar, type AvatarLabels, type AvatarProps, type BotMessages, type BuildTranscriptTextParams, BulkActionBar, type BulkActionBarProps, CHANNEL_BRAND_COLOR, CONVERSATIONS_PER_PAGE, CONVERSATION_WINDOW, ChannelFilter, ChannelFilterOption, ChannelIcon, type ChannelIconProps, ConversationChannel, type ConversationContextEntry, ConversationContextPanel, type ConversationContextPanelClassNames, type ConversationContextPanelLabels, type ConversationContextPanelProps, type ConversationContextStatus, ConversationDocument, ConversationDocumentsPanel, type ConversationDocumentsPanelClassNames, type ConversationDocumentsPanelLabels, type ConversationDocumentsPanelProps, ConversationHeader, type ConversationHeaderClassNames, type ConversationHeaderLabels, type ConversationHeaderProps, type ConversationHeaderUtility, ConversationListItem, type ConversationListItemLabels, type ConversationListItemProps, type ConversationLocales, ConversationLocalesProvider, type ConversationLocalesProviderProps, ConversationPane, type ConversationPaneProps, type ConversationRealtimeHandler, ConversationRow, type ConversationRowClassNames, type ConversationRowProps, ConversationSimulatorClient, ConversationSummary, ConversationTemplate, ConversationWallpaper, type ConversationWallpaperProps, type ConversationWindow, ConversationsApi, ConversationsFeatures, ConversationsInboxList, type ConversationsInboxListProps, ConversationsProvider, ConversationsWorkspace, type ConversationsWorkspaceLabels, type ConversationsWorkspaceProps, type ConversationsWorkspaceSimulator, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_AVATAR_LABELS, DEFAULT_CONVERSATIONS_WORKSPACE_LABELS, DEFAULT_CONVERSATION_CONTEXT_LABELS, DEFAULT_CONVERSATION_DOCUMENTS_LABELS, DEFAULT_CONVERSATION_HEADER_LABELS, DEFAULT_CONVERSATION_LIST_ITEM_LABELS, DEFAULT_DARK_MODE_TOGGLE_LABELS, DEFAULT_DOCUMENTS_LIBRARY_LABELS, DEFAULT_DOCUMENTS_WORKSPACE_LABELS, DEFAULT_EMOJI_PICKER_LABELS, DEFAULT_INTERACTIVE_MESSAGE_LABELS, DEFAULT_LIGHTBOX_LABELS, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_RICH_COMPOSER_TOOLTIPS, DEFAULT_TEMPLATES_SETTINGS_LABELS, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, DEFAULT_WINDOW_EXPIRED_LABELS, DOCUMENT_SOURCE_FILTER, DarkModeToggle, type DarkModeToggleLabels, type DarkModeToggleProps, DateDivider, type DateDividerClassNames, type DateDividerProps, type DocumentSourceFilter, type DocumentsFiltersContext, DocumentsLibrary, type DocumentsLibraryClassNames, type DocumentsLibraryLabels, type DocumentsLibraryProps, DocumentsWorkspace, type DocumentsWorkspaceClassNames, type DocumentsWorkspaceLabels, type DocumentsWorkspaceProps, EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, FileIcon, type FileIconProps, type FilterOption, InteractiveMessage, type InteractiveMessageLabels, type InteractiveMessageProps, InteractivePayload, InteractiveSelection, Lightbox, type LightboxLabels, type LightboxProps, ListConversationsParams, ListDocumentsParams, ListingPagination, type ListingPaginationProps, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerClassNames, type MessageComposerLabels, type MessageComposerProps, MessagePayload, MessageTail, MessageText, type MessageTextProps, MessageTimestamp, MessageTranscription, MessagesWorkspace, type MessagesWorkspaceApi, type MessagesWorkspaceLabels, type MessagesWorkspaceProps, type MessagesWorkspaceTemplateRole, MultiSelectFilter, type MultiSelectFilterProps, NARROW_MAX_WIDTH_PX, type QuickReply, REPLY_LATENCY, REPLY_LATENCY_CRITICAL_HOURS, REPLY_LATENCY_LATE_HOURS, RICH_COMPOSER_ACTION, type ReplyLatency, type ReplyLatencyParams, ResolveMediaUrl, type RichComposerAction, type RichComposerQuickReply, type RichComposerTooltips, type RichComposerVariable, RichMessageComposer, type RichMessageComposerHandle, type RichMessageComposerProps, SSEProvider, SimpleEmojiPicker, type SimpleEmojiPickerProps, type SimulatorTransportFactory, type SimulatorTransportParams, type SortDirection, SortableHead, type SortableHeadProps, StatusTicks, type StatusTicksProps, TEMPLATE_SETTINGS_TAB, TOOLTIP_ATTRIBUTE, type TemplateSettings, type TemplateSettingsTab, ToastProvider, TooltipLayer, type TopicItem, TopicsForm, type TopicsFormLabels, type TopicsFormProps, TranscriptionMode, type TranscriptionSettings, TranscriptionSettingsForm, type TranscriptionSettingsFormLabels, type TranscriptionSettingsFormProps, type UrlStateOptions, type UseConversationActionsResult, type UseConversationContextResult, type UseConversationDocumentsParams, type UseConversationDocumentsResult, type UseConversationListParams, type UseConversationListResult, type UseConversationMessagesResult, type UseConversationsInboxParams, type UseConversationsInboxResult, type UseInboxActionsResult, type UseScrollToLatestMessageParams, type UseScrollToLatestMessageResult, type UseWaitingNotificationsLabels, type UseWaitingNotificationsParams, type UseWaitingNotificationsResult, WINDOW_FILTERS, WelcomeFarewellForm, type WelcomeFarewellFormLabels, type WelcomeFarewellFormProps, WhatsAppCreateTemplateForm, type WhatsAppCreateTemplateFormLabels, type WhatsAppCreateTemplateFormProps, type WhatsAppCreateTemplateResult, type WhatsAppCreateTemplateState, WhatsAppMessageEditor, type WhatsAppMessageEditorLabels, type WhatsAppMessageEditorProps, type WhatsAppTemplateHeaderType, WhatsAppTemplateSettingsForm, type WhatsAppTemplateSettingsFormLabels, type WhatsAppTemplateSettingsFormProps, type WhatsAppTemplateSummary, type WhatsAppTemplateVariableSuggestion, WhatsAppTemplatesSettings, type WhatsAppTemplatesSettingsLabels, type WhatsAppTemplatesSettingsProps, WindowExpiredNotice, type WindowExpiredNoticeLabels, type WindowExpiredNoticeProps, type WindowOfParams, applyQuickReplyVariables, buildTranscriptFilename, buildTranscriptText, createMediaUrlResolver, downloadTextFile, formatDateTime, formatFileSize, formatPhone, formatStalledFor, formatTimestamp, htmlToWA, isReplyOverdue, isSameDay, isWindowBlocking, parseWhatsAppFormatting, phoneInitials, replyLatencyOf, resolveQuickReply, searchEmojis, toast, useConversationActions, useConversationContext, useConversationDocuments, useConversationList, useConversationLocales, useConversationMessages, useConversationRealtime, useConversations, useConversationsInbox, useDarkMode, useDebouncedValue, useGlobalRealtime, useInboxActions, useIsDarkTheme, useIsNarrow, useScrollToLatestMessage, useToast, useUrlArrayState, useUrlNumberState, useUrlStringState, useWaitingNotifications, waToHTML, waToHTMLInline, windowOf };

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 }) })
   ] });
 }
@@ -1170,6 +1176,30 @@ function formatStalledFor(lastAt, now) {
   return `${minutes}m`;
 }
 
+// src/replyLatency.ts
+var HOUR_MS2 = 60 * 60 * 1e3;
+var REPLY_LATENCY = {
+  /** Até 6h — dentro do combinado. */
+  WITHIN: "within",
+  /** 6h a 12h — passou do combinado. */
+  LATE: "late",
+  /** Acima de 12h. */
+  CRITICAL: "critical"
+};
+var REPLY_LATENCY_LATE_HOURS = 6;
+var REPLY_LATENCY_CRITICAL_HOURS = 12;
+function replyLatencyOf(params) {
+  if (params.lastDirection !== "inbound") return null;
+  if (!params.lastInboundAt) return null;
+  const elapsedHours = (params.now - new Date(params.lastInboundAt).getTime()) / HOUR_MS2;
+  if (elapsedHours < REPLY_LATENCY_LATE_HOURS) return REPLY_LATENCY.WITHIN;
+  if (elapsedHours < REPLY_LATENCY_CRITICAL_HOURS) return REPLY_LATENCY.LATE;
+  return REPLY_LATENCY.CRITICAL;
+}
+function isReplyOverdue(latency) {
+  return latency === REPLY_LATENCY.LATE || latency === REPLY_LATENCY.CRITICAL;
+}
+
 // src/ConversationRow.tsx
 import { AlarmClock, Bot, Hourglass, Play, UserRound } from "lucide-react";
 
@@ -1246,6 +1276,11 @@ var WINDOW_TITLE = {
   [CONVERSATION_WINDOW.EXPIRED]: "Janela de 24h expirada \u2014 s\xF3 template"
 };
 var STALLED_THRESHOLD_MS = 60 * 60 * 1e3;
+var REPLY_LATENCY_PILL_CLASS = {
+  [REPLY_LATENCY.WITHIN]: "cv-pill--success",
+  [REPLY_LATENCY.LATE]: "cv-pill--warning",
+  [REPLY_LATENCY.CRITICAL]: "cv-pill--danger"
+};
 var TAKEOVER_LABEL = "Continuar Atendimento";
 var WINDOW_BAR_CLASS = {
   [CONVERSATION_WINDOW.ALL]: "bg-transparent",
@@ -1271,6 +1306,11 @@ function ConversationRow({
   const stalledMs = now - new Date(conversation.lastAt).getTime();
   const isStalled = stalledMs > STALLED_THRESHOLD_MS;
   const isWaiting = conversation.mode === "bot" && conversation.waitingHuman;
+  const replyLatency = replyLatencyOf({
+    lastDirection: conversation.lastDirection,
+    lastInboundAt: conversation.lastInboundAt,
+    now
+  });
   return /* @__PURE__ */ jsxs9("div", { className: cn("cv-row flex border-b", active && "cv-row--active", classNames?.root, className), children: [
     /* @__PURE__ */ jsx11(
       "span",
@@ -1321,6 +1361,12 @@ function ConversationRow({
           /* @__PURE__ */ jsx11(Bot, { size: ICON_SIZE_PILL, "aria-hidden": "true" }),
           " bot ativo"
         ] }) : null,
+        replyLatency ? /* @__PURE__ */ jsxs9("span", { className: cn("cv-pill", REPLY_LATENCY_PILL_CLASS[replyLatency]), children: [
+          /* @__PURE__ */ jsx11(AlarmClock, { size: ICON_SIZE_PILL, "aria-hidden": "true" }),
+          " sem resposta h\xE1",
+          " ",
+          formatStalledFor(conversation.lastInboundAt ?? conversation.lastAt, now)
+        ] }) : null,
         isStalled ? /* @__PURE__ */ jsxs9("span", { className: "cv-pill cv-pill--danger", children: [
           /* @__PURE__ */ jsx11(AlarmClock, { size: ICON_SIZE_PILL, "aria-hidden": "true" }),
           " parada h\xE1",
@@ -5000,6 +5046,9 @@ export {
   MultiSelectFilter,
   NARROW_MAX_WIDTH_PX,
   REOPEN_MECHANISM,
+  REPLY_LATENCY,
+  REPLY_LATENCY_CRITICAL_HOURS,
+  REPLY_LATENCY_LATE_HOURS,
   RICH_COMPOSER_ACTION,
   RichMessageComposer,
   SimpleEmojiPicker,
@@ -5033,10 +5082,12 @@ export {
   formatStalledFor,
   formatTimestamp,
   htmlToWA,
+  isReplyOverdue,
   isSameDay,
   isWindowBlocking,
   parseWhatsAppFormatting,
   phoneInitials,
+  replyLatencyOf,
   resolveQuickReply,
   searchEmojis,
   toast,

package/package.json

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

@@ -21,6 +21,7 @@ import {
   windowOf,
   type ConversationWindow,
 } from './conversationWindow'
+import { REPLY_LATENCY, replyLatencyOf } from './replyLatency'
 
 
 const WINDOW_TITLE: Record<ConversationWindow, string> = {
@@ -34,6 +35,14 @@ const WINDOW_TITLE: Record<ConversationWindow, string> = {
 // Abaixo disto a conversa é recente e o aviso de "parada" só faria ruído.
 const STALLED_THRESHOLD_MS = 60 * 60 * 1000
 
+// Verde só até 6h: a partir daí o selo perde a cor de "tudo certo", que é o sinal que o operador
+// varre na lista. Crítico ganha vermelho para não se confundir com uma espera de 7h.
+const REPLY_LATENCY_PILL_CLASS = {
+  [REPLY_LATENCY.WITHIN]: 'cv-pill--success',
+  [REPLY_LATENCY.LATE]: 'cv-pill--warning',
+  [REPLY_LATENCY.CRITICAL]: 'cv-pill--danger',
+} as const
+
 const TAKEOVER_LABEL = 'Continuar Atendimento'
 
 const WINDOW_BAR_CLASS: Record<ConversationWindow, string> = {
@@ -81,6 +90,13 @@ export function ConversationRow({
   // ao `waitingHuman` escondia justamente o caso ruim: conversa assumida e esquecida.
   const isStalled = stalledMs > STALLED_THRESHOLD_MS
   const isWaiting = conversation.mode === 'bot' && conversation.waitingHuman
+  // Espera do cliente por resposta — outra coisa que a janela de sessão acima: aqui o relógio para
+  // quando alguém responde. Ver `replyLatency.ts`.
+  const replyLatency = replyLatencyOf({
+    lastDirection: conversation.lastDirection,
+    lastInboundAt: conversation.lastInboundAt,
+    now,
+  })
 
   // Realce e hover ficam na linha inteira: com eles no item, só o bloco dele ficava cinza enquanto
   // checkbox, barra lateral e pills continuavam brancos — parecia meia linha selecionada.
@@ -137,6 +153,12 @@ export function ConversationRow({
               <Bot size={ICON_SIZE_PILL} aria-hidden="true" /> bot ativo
             </span>
           ) : null}
+          {replyLatency ? (
+            <span className={cn('cv-pill', REPLY_LATENCY_PILL_CLASS[replyLatency])}>
+              <AlarmClock size={ICON_SIZE_PILL} aria-hidden="true" /> sem resposta há{' '}
+              {formatStalledFor(conversation.lastInboundAt ?? conversation.lastAt, now)}
+            </span>
+          ) : null}
           {isStalled ? (
             <span className="cv-pill cv-pill--danger">
               <AlarmClock size={ICON_SIZE_PILL} aria-hidden="true" /> parada há{' '}

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/index.ts

@@ -42,6 +42,17 @@ export { MessageTail } from './MessageTail'
 // plataforma e do ofício de atender, não de um produto — por isso moram aqui.
 export { CONVERSATION_WINDOW, WINDOW_FILTERS, windowOf, formatStalledFor } from './conversationWindow'
 export type { WindowOfParams } from './conversationWindow'
+
+// Tempo sem resposta (SLA), distinto da janela de sessão acima: o host usa isto para o alerta e
+// para filtrar quem está esperando demais.
+export {
+  REPLY_LATENCY,
+  REPLY_LATENCY_LATE_HOURS,
+  REPLY_LATENCY_CRITICAL_HOURS,
+  replyLatencyOf,
+  isReplyOverdue,
+} from './replyLatency'
+export type { ReplyLatency, ReplyLatencyParams } from './replyLatency'
 // Canal de origem: capacidades por plataforma (janela de sessão, reabertura, tipo de identificador).
 export {
   CONVERSATION_CHANNEL,

package/src/replyLatency.test.ts

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * A distinção que estes testes protegem: janela de sessão e tempo sem resposta medem coisas
+ * diferentes, e reaproveitar `windowOf` para o SLA marcaria como atrasada toda conversa já
+ * respondida — o alerta apontaria para tudo, ou seja, para nada.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+import { REPLY_LATENCY, isReplyOverdue, replyLatencyOf } from './replyLatency'
+
+const NOW = new Date('2026-08-29T12:00:00Z').getTime()
+const hoursAgo = (hours: number) => new Date(NOW - hours * 60 * 60 * 1000).toISOString()
+
+describe('faixas de espera', () => {
+  it('até 6h está dentro do combinado', () => {
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: hoursAgo(0), now: NOW })).toBe(
+      REPLY_LATENCY.WITHIN,
+    )
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: hoursAgo(5.9), now: NOW })).toBe(
+      REPLY_LATENCY.WITHIN,
+    )
+  })
+
+  it('de 6h a 12h já passou do combinado', () => {
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: hoursAgo(6), now: NOW })).toBe(REPLY_LATENCY.LATE)
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: hoursAgo(11.9), now: NOW })).toBe(
+      REPLY_LATENCY.LATE,
+    )
+  })
+
+  it('acima de 12h é crítico — não se confunde com uma espera de 7h', () => {
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: hoursAgo(12), now: NOW })).toBe(
+      REPLY_LATENCY.CRITICAL,
+    )
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: hoursAgo(72), now: NOW })).toBe(
+      REPLY_LATENCY.CRITICAL,
+    )
+  })
+})
+
+describe('quando não há espera a mostrar', () => {
+  it('conversa já respondida não tem selo, por mais antiga que seja', () => {
+    // É aqui que o SLA se separa da janela de sessão: `windowOf` marcaria isto como crítico.
+    expect(replyLatencyOf({ lastDirection: 'outbound', lastInboundAt: hoursAgo(20), now: NOW })).toBeNull()
+  })
+
+  it('cliente que nunca escreveu não tem espera', () => {
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: null, now: NOW })).toBeNull()
+  })
+
+  it('direção desconhecida não afirma espera', () => {
+    expect(replyLatencyOf({ lastInboundAt: hoursAgo(20), now: NOW })).toBeNull()
+  })
+
+  it('relógio adiantado não vira conversa crítica', () => {
+    expect(replyLatencyOf({ lastDirection: 'inbound', lastInboundAt: hoursAgo(-0.05), now: NOW })).toBe(
+      REPLY_LATENCY.WITHIN,
+    )
+  })
+})
+
+describe('o que merece alerta', () => {
+  it('só o que passou de 6h', () => {
+    expect(isReplyOverdue(REPLY_LATENCY.WITHIN)).toBe(false)
+    expect(isReplyOverdue(REPLY_LATENCY.LATE)).toBe(true)
+    expect(isReplyOverdue(REPLY_LATENCY.CRITICAL)).toBe(true)
+    expect(isReplyOverdue(null)).toBe(false)
+  })
+})

package/src/replyLatency.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2026 Ada Technology. MIT License.
+ *
+ * Há quanto tempo o cliente espera resposta.
+ *
+ * Não confundir com `conversationWindow`: aquilo é a janela de sessão da plataforma (o que o canal
+ * ainda deixa enviar), isto é serviço (quanto o cliente esperou). Os dois divergem justamente no
+ * caso que interessa — respondida a conversa, o relógio do SLA para e o da janela continua correndo.
+ *
+ * A conta sai de dados que a listagem já traz: se a última mensagem foi do cliente, ninguém
+ * respondeu ainda e a espera conta desde ela. Se a última foi nossa, não há espera pendente.
+ */
+
+const HOUR_MS = 60 * 60 * 1000
+
+export const REPLY_LATENCY = {
+  /** Até 6h — dentro do combinado. */
+  WITHIN: 'within',
+  /** 6h a 12h — passou do combinado. */
+  LATE: 'late',
+  /** Acima de 12h. */
+  CRITICAL: 'critical',
+} as const
+export type ReplyLatency = (typeof REPLY_LATENCY)[keyof typeof REPLY_LATENCY]
+
+export const REPLY_LATENCY_LATE_HOURS = 6
+export const REPLY_LATENCY_CRITICAL_HOURS = 12
+
+export type ReplyLatencyParams = {
+  /** Direção da última mensagem. Ausente = desconhecida, e aí não se afirma espera. */
+  readonly lastDirection?: 'inbound' | 'outbound' | undefined
+  readonly lastInboundAt: string | null
+  readonly now: number
+}
+
+/**
+ * `null` quando não há espera a mostrar — conversa já respondida, ou cliente que nunca escreveu.
+ *
+ * Devolver uma faixa nesses casos encheria a lista de selos em conversa que não deve nada, e o
+ * alerta que aponta para todo lado não aponta para lugar nenhum.
+ */
+export function replyLatencyOf(params: ReplyLatencyParams): ReplyLatency | null {
+  if (params.lastDirection !== 'inbound') return null
+  if (!params.lastInboundAt) return null
+
+  const elapsedHours = (params.now - new Date(params.lastInboundAt).getTime()) / HOUR_MS
+  // Espera negativa é relógio fora de sincronia entre servidor e navegador, não conversa do futuro:
+  // tratar como recém-chegada evita um selo "crítico" nascido de alguns segundos de diferença.
+  if (elapsedHours < REPLY_LATENCY_LATE_HOURS) return REPLY_LATENCY.WITHIN
+  if (elapsedHours < REPLY_LATENCY_CRITICAL_HOURS) return REPLY_LATENCY.LATE
+  return REPLY_LATENCY.CRITICAL
+}
+
+/** Só o que passou do combinado merece alerta — é o corte que a lista usa para destacar. */
+export function isReplyOverdue(latency: ReplyLatency | null): boolean {
+  return latency === REPLY_LATENCY.LATE || latency === REPLY_LATENCY.CRITICAL
+}

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