@adatechnology/conversations-ui 0.1.0-rc.4 → 0.1.0-rc.41

package/src/hooks/useScrollToLatestMessage.ts

@@ -0,0 +1,127 @@
+import { useCallback, useLayoutEffect, useRef, useState, type RefObject, type UIEvent } from 'react'
+
+/**
+ * Mantém a conversa no fim, como todo mensageiro.
+ *
+ * Abrir uma conversa no topo do histórico é errado por um motivo simples: o que interessa ao
+ * atendente é a última mensagem, e ele teria que rolar por semanas de conversa para chegar nela.
+ *
+ * Existe no pacote, e não em cada host, porque a regra tem duas sutilezas que se descobre só
+ * errando — o salto instantâneo na troca de conversa e o respeito a quem rolou para trás — e
+ * reimplementá-las em cada inbox garante que uma delas fique de fora.
+ */
+
+/**
+ * Distância do fim, em pixels, dentro da qual ainda consideramos o operador "acompanhando".
+ *
+ * Não é zero porque o navegador arredonda `scrollTop` fracionário em telas com zoom ou densidade
+ * alta: exigir o fim exato faria o painel achar que o operador rolou para trás sem ele ter tocado
+ * em nada, e a próxima mensagem não apareceria.
+ */
+const NEAR_BOTTOM_THRESHOLD_PX = 120
+
+/**
+ * Toda rolagem aqui é `'auto'` — nunca `'smooth'`.
+ *
+ * Tentamos suave para mensagem nova e medimos: em ambiente onde a rolagem suave está desligada, o
+ * `scrollTo({ behavior: 'smooth' })` **não faz nada e não avisa** — a mensagem nova simplesmente não
+ * entra na vista. E não dá para detectar isso pelo `prefers-reduced-motion`: no navegador em que
+ * reproduzimos, a media query respondia `false` e o smooth continuava sendo no-op.
+ *
+ * Trocar uma animação cosmética por garantia de que o operador vê a mensagem é barato: seguir uma
+ * mensagem nova salta a altura de uma bolha, que é quase imperceptível de qualquer forma.
+ */
+const SCROLL_BEHAVIOR: ScrollBehavior = 'auto'
+
+export type UseScrollToLatestMessageParams = {
+  /** Troca de conversa. Muda ⇒ salto instantâneo para o fim. */
+  readonly conversationId: string | undefined
+  /** Quantidade de mensagens carregadas. Cresce ⇒ acompanha o fim, se o operador estiver lá. */
+  readonly messageCount: number
+}
+
+export type UseScrollToLatestMessageResult = {
+  /** Vai no elemento que rola — tipicamente o `ConversationWallpaper`. */
+  readonly containerRef: RefObject<HTMLDivElement | null>
+  /** Ligue no `onScroll` do mesmo elemento: é o que detecta o operador lendo o histórico. */
+  readonly handleScroll: (event: UIEvent<HTMLDivElement>) => void
+  /** `true` quando o operador rolou para trás — serve a um botão "ir para a última". */
+  readonly isAwayFromBottom: boolean
+  readonly scrollToBottom: (behavior?: ScrollBehavior) => void
+}
+
+export function useScrollToLatestMessage({
+  conversationId,
+  messageCount,
+}: UseScrollToLatestMessageParams): UseScrollToLatestMessageResult {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const [isAwayFromBottom, setIsAwayFromBottom] = useState(false)
+
+  /**
+   * Espelha `isAwayFromBottom` para o efeito de mensagens novas ler o valor atual sem depender dele.
+   *
+   * Se o efeito dependesse do estado, cada rolagem do operador o re-disparava e o puxava de volta
+   * para o fim — exatamente o que a checagem existe para evitar.
+   */
+  const isAwayFromBottomRef = useRef(false)
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = SCROLL_BEHAVIOR) => {
+    const container = containerRef.current
+    if (!container) return
+    container.scrollTo({ top: container.scrollHeight, behavior })
+  }, [])
+
+  const handleScroll = useCallback((event: UIEvent<HTMLDivElement>) => {
+    const target = event.currentTarget
+    const distanceFromBottom = target.scrollHeight - target.scrollTop - target.clientHeight
+    const away = distanceFromBottom > NEAR_BOTTOM_THRESHOLD_PX
+
+    isAwayFromBottomRef.current = away
+    setIsAwayFromBottom((current) => (current === away ? current : away))
+  }, [])
+
+  /**
+   * Qual conversa já recebeu o salto de abertura.
+   *
+   * É o que separa "abriu a conversa" de "chegou mensagem", e não dá para usar só `conversationId`
+   * num efeito próprio: quando a conversa troca, a lista de mensagens ainda está vazia, então um
+   * salto ali rola um container sem conteúdo e não faz nada. O salto real precisa esperar a primeira
+   * leva de mensagens — e foi exatamente isso que deixou a conversa abrindo no topo.
+   */
+  const jumpedForConversationRef = useRef<string | undefined>(undefined)
+
+  useLayoutEffect(() => {
+    const isNewConversation = jumpedForConversationRef.current !== conversationId
+
+    if (isNewConversation) {
+      // Zera antes de qualquer coisa: "rolado para trás" da conversa anterior não pode bloquear o
+      // salto de abertura desta.
+      isAwayFromBottomRef.current = false
+      setIsAwayFromBottom(false)
+
+      // Sem mensagens ainda — o salto acontece quando a primeira leva chegar.
+      if (messageCount === 0) return
+
+      jumpedForConversationRef.current = conversationId
+      /**
+       * `'auto'`, sempre. Animar a rolagem por meses de histórico demora, mostra um borrão de
+       * mensagens antigas que ninguém pediu, e some por completo onde a rolagem suave está desligada
+       * (`prefers-reduced-motion`, alguns navegadores automatizados) — a conversa simplesmente
+       * abriria no topo. Abertura é salto, não animação.
+       */
+      scrollToBottom(SCROLL_BEHAVIOR)
+      return
+    }
+
+    /**
+     * Mensagem nova: acompanha, mas só se o operador já estava no fim.
+     *
+     * Puxar a rolagem de quem está lendo o histórico é pior do que não mostrar a mensagem — ele perde
+     * a posição e não sabe por quê. Quem rolou para trás recebe `isAwayFromBottom` e decide.
+     */
+    if (isAwayFromBottomRef.current) return
+    scrollToBottom(SCROLL_BEHAVIOR)
+  }, [conversationId, messageCount, scrollToBottom])
+
+  return { containerRef, handleScroll, isAwayFromBottom, scrollToBottom }
+}

package/src/hooks/useUrlFilterState.ts

@@ -0,0 +1,107 @@
+/**
+ * Estado de listagem espelhado na URL — ordenação, filtros e paginação (regra `web.md` §7).
+ *
+ * Escrito sobre `history.replaceState` e não sobre um router: o pacote roda em três produtos com
+ * routers diferentes, e exigir um deles arrastaria dependência de framework para dentro do módulo.
+ * `replaceState` também é o comportamento certo aqui — filtrar não é navegar, e cada tecla digitada
+ * na busca não deve virar uma entrada no botão "voltar".
+ */
+
+import { useCallback, useEffect, useState } from 'react'
+
+const LIST_SEPARATOR = ','
+
+function readParams(): URLSearchParams {
+  if (typeof window === 'undefined') return new URLSearchParams()
+  return new URLSearchParams(window.location.search)
+}
+
+function writeParam(key: string, value: string | undefined): void {
+  if (typeof window === 'undefined') return
+  const params = readParams()
+  if (value === undefined || value === '') params.delete(key)
+  else params.set(key, value)
+  const query = params.toString()
+  window.history.replaceState(null, '', query ? `${window.location.pathname}?${query}` : window.location.pathname)
+}
+
+/** `enabled: false` mantém o mesmo contrato de estado sem tocar na URL — para uso em preview e teste. */
+export interface UrlStateOptions {
+  readonly enabled?: boolean
+}
+
+export function useUrlStringState(
+  key: string,
+  initial: string,
+  { enabled = true }: UrlStateOptions = {},
+): [string, (next: string) => void] {
+  const [value, setValue] = useState(() => (enabled ? (readParams().get(key) ?? initial) : initial))
+
+  const update = useCallback(
+    (next: string) => {
+      setValue(next)
+      if (enabled) writeParam(key, next === initial ? undefined : next)
+    },
+    [enabled, key, initial],
+  )
+
+  return [value, update]
+}
+
+export function useUrlNumberState(
+  key: string,
+  initial: number,
+  { enabled = true }: UrlStateOptions = {},
+): [number, (next: number) => void] {
+  const [value, setValue] = useState(() => {
+    if (!enabled) return initial
+    const raw = Number(readParams().get(key))
+    return Number.isFinite(raw) && raw > 0 ? raw : initial
+  })
+
+  const update = useCallback(
+    (next: number) => {
+      setValue(next)
+      if (enabled) writeParam(key, next === initial ? undefined : String(next))
+    },
+    [enabled, key, initial],
+  )
+
+  return [value, update]
+}
+
+export function useUrlArrayState(
+  key: string,
+  { enabled = true }: UrlStateOptions = {},
+): [readonly string[], (next: readonly string[]) => void] {
+  const [value, setValue] = useState<readonly string[]>(() => {
+    if (!enabled) return []
+    const raw = readParams().get(key)
+    return raw ? raw.split(LIST_SEPARATOR).filter(Boolean) : []
+  })
+
+  const update = useCallback(
+    (next: readonly string[]) => {
+      setValue(next)
+      if (enabled) writeParam(key, next.length > 0 ? next.join(LIST_SEPARATOR) : undefined)
+    },
+    [enabled, key],
+  )
+
+  return [value, update]
+}
+
+/**
+ * Espera o usuário parar de digitar antes de deixar o valor chegar à query. Sem isto, cada tecla
+ * na busca vira uma chamada de rede e uma reescrita de URL.
+ */
+export function useDebouncedValue<TValue>(value: TValue, delayMs = 300): TValue {
+  const [debounced, setDebounced] = useState(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delayMs)
+    return () => clearTimeout(timer)
+  }, [value, delayMs])
+
+  return debounced
+}

package/src/icon.constant.ts

@@ -0,0 +1,12 @@
+/**
+ * Tamanhos de ícone da UI de conversas, em px, na escala de 4 da grade.
+ *
+ * Ícone vem da biblioteca (lucide), nunca emoji. Emoji desenha diferente em cada sistema
+ * operacional, não herda `currentColor` — então não acompanha o estado do controle (ativo,
+ * desabilitado, variante destrutiva) — e não escala com o token de tipografia. Numa mesma faixa,
+ * metade emoji e metade SVG lê como duas famílias de botão.
+ */
+
+export const ICON_SIZE_PILL = 12
+export const ICON_SIZE_INLINE = 14
+export const ICON_SIZE_ACTION = 16

package/src/index.ts

@@ -1,18 +1,37 @@
 export { MessageBubble } from './MessageBubble'
+export { InteractiveMessage, DEFAULT_INTERACTIVE_MESSAGE_LABELS } from './InteractiveMessage'
 export { ConversationWallpaper } from './Wallpaper'
 export { ConversationLocalesProvider, useConversationLocales } from './ConversationLocalesProvider'
 export { AudioPlayer } from './AudioPlayer'
-export { EmojiPicker } from './EmojiPicker'
-export { MessageComposer } from './MessageComposer'
-export { WhatsAppMessageEditor } from './WhatsAppMessageEditor'
+export { AudioTranscription } from './AudioTranscription'
+export { EmojiPicker, DEFAULT_EMOJI_PICKER_LABELS } from './EmojiPicker'
+export { EMOJI_CATEGORIES, searchEmojis } from './emojiCatalog'
+export { MessageComposer, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_ACCEPTED_FILE_TYPES } from './MessageComposer'
+export { RichMessageComposer, RICH_COMPOSER_ACTION, DEFAULT_RICH_COMPOSER_TOOLTIPS } from './RichMessageComposer'
+export type {
+  RichMessageComposerProps,
+  RichComposerAction,
+  RichComposerTooltips,
+  RichComposerQuickReply,
+  RichComposerVariable,
+  RichMessageComposerHandle,
+} from './RichMessageComposer'
+export {
+  AudioRecorderButton,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
+  DEFAULT_MAX_RECORDING_MILLISECONDS,
+} from './AudioRecorderButton'
+export type { AudioRecorderButtonProps, AudioRecorderButtonLabels } from './AudioRecorderButton'
+export { WhatsAppMessageEditor, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS } from './WhatsAppMessageEditor'
 export { SimpleEmojiPicker } from './SimpleEmojiPicker'
 export { DateDivider } from './DateDivider'
-export { Avatar } from './Avatar'
-export { ConversationListItem } from './ConversationListItem'
+export { Avatar, DEFAULT_AVATAR_LABELS } from './Avatar'
+export { ConversationListItem, DEFAULT_CONVERSATION_LIST_ITEM_LABELS } from './ConversationListItem'
 export { ToastProvider, useToast, toast } from './Toast'
+export { TooltipLayer, TOOLTIP_ATTRIBUTE } from './Tooltip'
 
 export { StatusTicks } from './StatusTicks'
-export { Lightbox } from './Lightbox'
+export { Lightbox, DEFAULT_LIGHTBOX_LABELS } from './Lightbox'
 export { MediaRenderer } from './MediaRenderer'
 export { FileIcon } from './FileIcon'
 export { MessageText } from './MessageText'
@@ -60,11 +79,34 @@ export { ConversationContextPanel, DEFAULT_CONVERSATION_CONTEXT_LABELS } from '.
 export type {
   ConversationContextPanelProps,
   ConversationContextEntry,
+  ConversationContextStatus,
   ConversationContextPanelLabels,
   ConversationContextPanelClassNames,
 } from './ConversationContextPanel'
 export { WindowExpiredNotice, isWindowBlocking, DEFAULT_WINDOW_EXPIRED_LABELS } from './WindowExpiredNotice'
 export type { WindowExpiredNoticeProps, WindowExpiredNoticeLabels } from './WindowExpiredNotice'
+export { DocumentsLibrary, DEFAULT_DOCUMENTS_LIBRARY_LABELS } from './DocumentsLibrary'
+export type { DocumentsLibraryProps, DocumentsLibraryLabels, DocumentsLibraryClassNames } from './DocumentsLibrary'
+export { DocumentsWorkspace, DEFAULT_DOCUMENTS_WORKSPACE_LABELS } from './documents'
+export type {
+  DocumentsWorkspaceProps,
+  DocumentsWorkspaceLabels,
+  DocumentsWorkspaceClassNames,
+  DocumentsFiltersContext,
+} from './documents'
+export { SortableHead, MultiSelectFilter, BulkActionBar, ListingPagination } from './listing'
+export type {
+  SortableHeadProps,
+  MultiSelectFilterProps,
+  BulkActionBarProps,
+  ListingPaginationProps,
+  FilterOption,
+  SortDirection,
+} from './listing'
+export { useUrlStringState, useUrlNumberState, useUrlArrayState, useDebouncedValue } from './hooks/useUrlFilterState'
+export type { UrlStateOptions } from './hooks/useUrlFilterState'
+export { DOCUMENT_SOURCE_FILTER } from './ConversationDocumentsPanel'
+export type { DocumentSourceFilter } from './ConversationDocumentsPanel'
 export type { ConversationDocumentsPanelClassNames } from './ConversationDocumentsPanel'
 export { ConversationDocumentsPanel, DEFAULT_CONVERSATION_DOCUMENTS_LABELS } from './ConversationDocumentsPanel'
 export type { ConversationDocumentsPanelProps, ConversationDocumentsPanelLabels } from './ConversationDocumentsPanel'
@@ -72,8 +114,15 @@ export { buildTranscriptText, buildTranscriptFilename, downloadTextFile } from '
 export type { BuildTranscriptTextParams } from './conversationTranscript'
 
 export { useDarkMode, useIsDarkTheme } from './useDarkMode'
+export { DarkModeToggle, DEFAULT_DARK_MODE_TOGGLE_LABELS } from './DarkModeToggle'
+export type { DarkModeToggleProps, DarkModeToggleLabels } from './DarkModeToggle'
 export { useIsNarrow, NARROW_MAX_WIDTH_PX } from './useIsNarrow'
 export { useWaitingNotifications } from './useWaitingNotifications'
+export type {
+  UseWaitingNotificationsLabels,
+  UseWaitingNotificationsParams,
+  UseWaitingNotificationsResult,
+} from './useWaitingNotifications'
 
 export { ConversationsProvider, useConversations } from './providers/ConversationsProvider'
 
@@ -82,6 +131,7 @@ export { ConversationsProvider, useConversations } from './providers/Conversatio
 export { WhatsAppTemplateSettingsForm } from './settings/WhatsAppTemplateSettingsForm'
 export { WhatsAppCreateTemplateForm } from './settings/WhatsAppCreateTemplateForm'
 export { WelcomeFarewellForm } from './settings/WelcomeFarewellForm'
+export { TranscriptionSettingsForm } from './settings/TranscriptionSettingsForm'
 export {
   WhatsAppTemplatesSettings,
   TEMPLATE_SETTINGS_TAB,
@@ -89,40 +139,70 @@ export {
 } from './settings/WhatsAppTemplatesSettings'
 export { TopicsForm } from './settings/TopicsForm'
 
+// Tela composta de Mensagens: junta os formulários acima com abas, estado e salvamento, para o
+// host não remontar essa mesma colagem em cada produto (foi assim que eles divergiram).
+export { MessagesWorkspace } from './settings/MessagesWorkspace'
+export type {
+  MessagesWorkspaceProps,
+  MessagesWorkspaceApi,
+  MessagesWorkspaceLabels,
+  MessagesWorkspaceTemplateRole,
+  BotMessages,
+  TemplateSettings,
+  TranscriptionSettings,
+} from './settings/MessagesWorkspace'
+
 // Camada headless (T6.9) — hooks de dados/ações independentes de qualquer tela, para o
 // produto montar sua própria UI sobre eles. Requerem <ConversationsProvider> como ancestral.
 export { useConversationMessages } from './hooks/useConversationMessages'
+export { useScrollToLatestMessage } from './hooks/useScrollToLatestMessage'
 export { useConversationList } from './hooks/useConversationList'
 export { useConversationContext } from './hooks/useConversationContext'
 export { useConversationDocuments } from './hooks/useConversationDocuments'
 export { useConversationRealtime, useGlobalRealtime } from './hooks/useConversationRealtime'
+export { useConversationActions, useInboxActions } from './hooks/useConversationActions'
 
 export { parseWhatsAppFormatting, waToHTML, htmlToWA, waToHTMLInline } from './lib/whatsapp-formatting'
 export { formatPhone, phoneInitials } from './lib/phone'
-export { formatTimestamp, formatFileSize } from './lib/format'
+// `formatDateTime` e `isSameDay` já eram usados pelas bolhas e pelo divisor de data; exportá-los
+// evita que cada host mantenha a própria cópia e acabe com timeline e transcript divergindo.
+export { formatTimestamp, formatFileSize, formatDateTime, isSameDay } from './lib/format'
 
 export type { MessagePayload, ConversationsUIConfig, ConversationsTheme, ConversationsFeatures } from './types'
+export type { InteractivePayload, InteractiveSection, InteractiveOption, InteractiveSelection } from './types'
+export type { MessageTranscription, TranscriptionStatus, TranscriptionMode } from './types'
 export type {
   ConversationsApi,
   SSEProvider,
   ConversationEventSource,
   ConversationSummary,
   ConversationDocument,
+  ConversationPage,
+  ConversationDocumentPage,
+  CompanyDocument,
+  CompanyDocumentPage,
+  ConversationTemplate,
+  ListConversationsParams,
+  ListDocumentsParams,
 } from './providers/types'
+export type { UseConversationActionsResult, UseInboxActionsResult } from './hooks/useConversationActions'
 
 export type { MessageBubbleProps } from './MessageBubble'
 export type { ConversationWallpaperProps } from './Wallpaper'
 export type { ConversationLocales, ConversationLocalesProviderProps } from './ConversationLocalesProvider'
 export type { AudioPlayerProps } from './AudioPlayer'
-export type { EmojiPickerProps } from './EmojiPicker'
-export type { MessageComposerProps, MessageComposerClassNames } from './MessageComposer'
-export type { WhatsAppMessageEditorProps } from './WhatsAppMessageEditor'
+export type { AudioTranscriptionProps } from './AudioTranscription'
+export type { EmojiPickerProps, EmojiPickerLabels } from './EmojiPicker'
+export type { EmojiEntry, EmojiCategory } from './emojiCatalog'
+export type { InteractiveMessageProps, InteractiveMessageLabels } from './InteractiveMessage'
+export type { MessageComposerProps, MessageComposerClassNames, MessageComposerLabels } from './MessageComposer'
+export type { WhatsAppMessageEditorProps, WhatsAppMessageEditorLabels } from './WhatsAppMessageEditor'
 export type { SimpleEmojiPickerProps } from './SimpleEmojiPicker'
 export type { DateDividerProps, DateDividerClassNames } from './DateDivider'
-export type { AvatarProps } from './Avatar'
-export type { ConversationListItemProps } from './ConversationListItem'
+export type { AvatarProps, AvatarLabels } from './Avatar'
+export type { ConversationListItemProps, ConversationListItemLabels } from './ConversationListItem'
 export type { StatusTicksProps } from './StatusTicks'
-export type { LightboxProps } from './Lightbox'
+export type { LightboxProps, LightboxLabels } from './Lightbox'
 export type { MediaRendererProps, ResolveMediaUrl } from './MediaRenderer'
 export type { FileIconProps } from './FileIcon'
 export type { MessageTextProps } from './MessageText'
@@ -141,6 +221,10 @@ export type {
   WhatsAppCreateTemplateFormLabels,
 } from './settings/WhatsAppCreateTemplateForm'
 export type { WelcomeFarewellFormProps, WelcomeFarewellFormLabels } from './settings/WelcomeFarewellForm'
+export type {
+  TranscriptionSettingsFormProps,
+  TranscriptionSettingsFormLabels,
+} from './settings/TranscriptionSettingsForm'
 export type {
   WhatsAppTemplatesSettingsProps,
   WhatsAppTemplatesSettingsLabels,
@@ -151,6 +235,38 @@ export type { TopicsFormProps, TopicItem, TopicsFormLabels } from './settings/To
 export type { UseConversationMessagesResult } from './hooks/useConversationMessages'
 export type { UseConversationListParams, UseConversationListResult } from './hooks/useConversationList'
 export type { UseConversationContextResult } from './hooks/useConversationContext'
+export type { UseScrollToLatestMessageParams, UseScrollToLatestMessageResult } from './hooks/useScrollToLatestMessage'
 export type { UseConversationDocumentsParams, UseConversationDocumentsResult } from './hooks/useConversationDocuments'
 export type { ConversationRealtimeHandler } from './hooks/useConversationRealtime'
 export type { AsyncResourceState } from './hooks/useAsyncResource'
+export { createMediaUrlResolver } from './lib/createMediaUrlResolver'
+export type { ConversationHeaderUtility } from './ConversationHeader'
+export { applyQuickReplyVariables, resolveQuickReply } from './MessageComposer'
+export type { QuickReply } from './MessageComposer'
+
+// Tela de atendimento completa. Fica no export principal — e não num subpath — porque é a
+// composição padrão do pacote: quem instala conversas quer esta tela, e as peças continuam
+// exportadas ao lado para quem precisar montar outra.
+export { ConversationsWorkspace, ConversationPane, ConversationsInboxList } from './workspace'
+export { useConversationsInbox, CONVERSATIONS_PER_PAGE, DEFAULT_CONVERSATIONS_WORKSPACE_LABELS } from './workspace'
+export type {
+  ConversationsWorkspaceProps,
+  ConversationsWorkspaceSimulator,
+  SimulatorTransportFactory,
+  SimulatorTransportParams,
+  ConversationsWorkspaceLabels,
+  ConversationPaneProps,
+  ConversationsInboxListProps,
+  UseConversationsInboxParams,
+  UseConversationsInboxResult,
+} from './workspace'
+
+// A porta do simulador entra no export principal como TIPO: `simulator.transports` é tipado por ela,
+// e obrigar o host a abrir o subpath `/preview` só para declarar a fábrica seria pedir que ele
+// importasse fixtures para escrever uma assinatura. `export type` é apagado no build — o `preview/`
+// continua fora do bundle de quem só declara o transporte.
+export type {
+  ConversationSimulatorClient,
+  SendSimulatorMediaParams,
+  SimulatorMediaKind,
+} from './preview/ConversationSimulatorClient'

package/src/lib/cn.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'bun:test'
+
+import { cn } from './cn'
+
+describe('cn', () => {
+  // O contrato de `classNames`/`className` dos componentes depende disto: se o override não vencer,
+  // a API de customização é decorativa. Concatenar falharia justo no caso comum — o Tailwind emite
+  // `px-2` antes de `px-4`, então a base ganharia de quem quer apertar o espaçamento.
+  it('o override do host vence a classe base em conflito', () => {
+    expect(cn('px-4 py-3', 'px-2')).toBe('py-3 px-2')
+  })
+
+  it('mantém o que não conflita', () => {
+    expect(cn('flex items-center gap-3', 'gap-1')).toBe('flex items-center gap-1')
+  })
+
+  it('preserva classes próprias do pacote, que o merge não conhece', () => {
+    expect(cn('cv-row flex', 'bg-red-50')).toBe('cv-row flex bg-red-50')
+  })
+
+  it('ignora ausente, falso e vazio', () => {
+    expect(cn('border-b', undefined, false, '')).toBe('border-b')
+  })
+
+  it('aplica condicional na ordem recebida', () => {
+    const isCompact = false
+    expect(cn('mt-2', isCompact && 'mt-8', 'mt-4')).toBe('mt-4')
+  })
+})

package/src/lib/composer-formatting.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'bun:test'
+
+import {
+  FORMATTING_ACTION,
+  FORMATTING_SEPARATOR,
+  activeFormattingIn,
+  canExecuteFormattingCommand,
+  isFormattingActive,
+  toggleFormattingCommand,
+} from './composer-formatting'
+import { ZERO_WIDTH_SPACE, htmlToWA, waToHTML } from './whatsapp-formatting'
+
+describe('isFormattingActive', () => {
+  it('reconhece cada formatação dentro do conjunto ativo', () => {
+    const active = [FORMATTING_ACTION.BOLD, FORMATTING_ACTION.MONOSPACE].join(FORMATTING_SEPARATOR)
+
+    expect(isFormattingActive({ active, action: FORMATTING_ACTION.BOLD })).toBe(true)
+    expect(isFormattingActive({ active, action: FORMATTING_ACTION.MONOSPACE })).toBe(true)
+    expect(isFormattingActive({ active, action: FORMATTING_ACTION.ITALIC })).toBe(false)
+  })
+
+  it('não acende nada quando o conjunto está vazio', () => {
+    expect(isFormattingActive({ active: '', action: FORMATTING_ACTION.BOLD })).toBe(false)
+  })
+})
+
+describe('activeFormattingIn', () => {
+  it('não acende nada quando não há seleção no documento', () => {
+    const editor = { contains: () => false } as unknown as HTMLElement
+
+    expect(activeFormattingIn(editor)).toBe('')
+  })
+})
+
+describe('toggleFormattingCommand', () => {
+  it('avisa que não executou onde o comando não existe, para o campo cair no wrap manual', () => {
+    if (canExecuteFormattingCommand()) return
+    expect(toggleFormattingCommand(FORMATTING_ACTION.BOLD)).toBe(false)
+  })
+
+  it('não tem comando nativo para monoespaçado', () => {
+    expect(toggleFormattingCommand(FORMATTING_ACTION.MONOSPACE)).toBe(false)
+  })
+})
+
+describe('waToHTML dentro do campo editável', () => {
+  it('escreve o tachado como <s>, que é o que o navegador consegue desfazer', () => {
+    expect(waToHTML('~riscado~')).toBe('<s>riscado</s>')
+  })
+
+  it('mantém o ida e volta do tachado', () => {
+    expect(htmlToWA(waToHTML('~riscado~'))).toBe('~riscado~')
+  })
+})
+
+describe('htmlToWA e a âncora do cursor', () => {
+  it('descarta o código que só tem a âncora, para não sair um par de crases vazio', () => {
+    expect(htmlToWA(`oi <code>${ZERO_WIDTH_SPACE}</code>`)).toBe('oi')
+  })
+
+  it('tira a âncora de dentro do código que o operador chegou a preencher', () => {
+    expect(htmlToWA(`<code>${ZERO_WIDTH_SPACE}npm run dev</code>`)).toBe('`npm run dev`')
+  })
+
+  it('não deixa a âncora vazar para o texto enviado', () => {
+    expect(htmlToWA(`oi${ZERO_WIDTH_SPACE} tudo bem`)).toBe('oi tudo bem')
+  })
+})
+
+describe('htmlToWA com a marcação do navegador', () => {
+  it('converte o <strike> do execCommand para o tachado do WhatsApp', () => {
+    expect(htmlToWA('<strike>cancelado</strike>')).toBe('~cancelado~')
+  })
+
+  it('converte o <b> e o <i> do navegador junto com as nossas tags', () => {
+    expect(htmlToWA('<b>oi</b> <i>tudo</i> <strong>bem</strong>')).toBe('*oi* _tudo_ *bem*')
+  })
+})