@adatechnology/conversations-ui 0.0.0

package/src/MediaRenderer.tsx

@@ -0,0 +1,158 @@
+import { useState } from 'react'
+import { AudioPlayer } from './AudioPlayer'
+import { FileIcon } from './FileIcon'
+import { useConversationLocales } from './ConversationLocalesProvider'
+import { formatFileSize } from './lib/format'
+import type { MessagePayload } from './types'
+
+function resolveMediaSource(message: MessagePayload): string | null {
+  if (message.mediaUrl) return message.mediaUrl
+  if (message.base64) {
+    const prefix = message.mimeType
+      ? `data:${message.mimeType};base64,`
+      : 'data:application/octet-stream;base64,'
+    return prefix + message.base64
+  }
+  return null
+}
+
+function hasLazyRef(message: MessagePayload): boolean {
+  return Boolean(message.uploadId || message.mediaId)
+}
+
+export type ResolveMediaUrl = (message: MessagePayload) => Promise<string | null>
+
+export interface MediaRendererProps {
+  message: MessagePayload
+  onLightbox: (src: string) => void
+  // Porta injetada pelo host para resolver `uploadId`/`mediaId` numa URL assinada sob
+  // demanda (lazy) — o pacote nunca chama um endpoint fixo. Paridade com o padrão
+  // loadUrl/loadMedia de financiamento-imobiliario-bot/apps/web/src/components/MessageBubble.tsx,
+  // porém delegando o fetch ao host em vez de hardcodar `/uploads/:id/download-url`.
+  onResolveUrl?: ResolveMediaUrl
+}
+
+function useLazyMediaUrl(message: MessagePayload, onResolveUrl?: ResolveMediaUrl) {
+  const [url, setUrl] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(false)
+
+  const load = async () => {
+    if (url || loading || !onResolveUrl) return
+    setLoading(true)
+    setError(false)
+    try {
+      const resolved = await onResolveUrl(message)
+      if (resolved) setUrl(resolved)
+      else setError(true)
+    } catch {
+      setError(true)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return { url, loading, error, load }
+}
+
+export function MediaRenderer({ message, onLightbox, onResolveUrl }: MediaRendererProps) {
+  const { bubble } = useConversationLocales()
+  const eagerSrc = resolveMediaSource(message)
+  const lazy = useLazyMediaUrl(message, onResolveUrl)
+  const src = eagerSrc ?? lazy.url
+  const canLazyLoad = !eagerSrc && hasLazyRef(message) && Boolean(onResolveUrl)
+
+  const lazyButtonClass = 'text-xs text-blue-600 underline flex items-center gap-1'
+
+  switch (message.type) {
+    case 'image':
+    case 'sticker': {
+      if (!src && canLazyLoad) {
+        return (
+          <button onClick={lazy.load} className={lazyButtonClass}>
+            {lazy.loading ? 'Carregando...' : lazy.error ? 'Erro — tentar novamente' : bubble.viewImage}
+          </button>
+        )
+      }
+      return (
+        <div className="min-w-[200px]">
+          {src ? (
+            <img src={src} alt={message.caption ?? 'Image'} className="w-full max-h-80 object-cover cursor-pointer hover:opacity-90 transition-opacity" onClick={() => onLightbox(src)} loading="lazy" />
+          ) : (
+            <div className="w-full h-40 bg-gray-200 flex items-center justify-center text-gray-400">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2" /><circle cx="8.5" cy="8.5" r="1.5" /><polyline points="21 15 16 10 5 21" /></svg>
+            </div>
+          )}
+        </div>
+      )
+    }
+    case 'video': {
+      if (!src && canLazyLoad) {
+        return (
+          <button onClick={lazy.load} className={lazyButtonClass}>
+            {lazy.loading ? 'Carregando...' : lazy.error ? 'Erro — tentar novamente' : bubble.viewVideo}
+          </button>
+        )
+      }
+      return (
+        <div className="min-w-[200px]">
+          {src ? (
+            <video src={src} className="w-full max-h-80 rounded-lg" controls preload="metadata"><track kind="captions" /></video>
+          ) : (
+            <div className="w-full h-32 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><polygon points="23 7 16 12 23 17 23 7" /><rect x="1" y="5" width="15" height="14" rx="2" ry="2" /></svg>
+            </div>
+          )}
+        </div>
+      )
+    }
+    case 'audio': {
+      if (!src && canLazyLoad) {
+        return (
+          <button onClick={lazy.load} className={lazyButtonClass}>
+            {lazy.loading ? 'Carregando...' : lazy.error ? 'Erro — tentar novamente' : bubble.listenAudio}
+          </button>
+        )
+      }
+      return (
+        <div className="min-w-[200px]">
+          {src ? <AudioPlayer src={src} isMine={message.direction === 'outbound'} /> : (
+            <div className="h-12 bg-gray-200 rounded-lg flex items-center justify-center text-gray-400 text-xs">Audio unavailable</div>
+          )}
+        </div>
+      )
+    }
+    case 'document': {
+      const typeLabel = message.mimeType?.split('/')[1]?.toUpperCase() ?? 'FILE'
+      const sizeLabel = message.sizeBytes ? formatFileSize(message.sizeBytes) : null
+      return (
+        <div className="flex items-center gap-3 min-w-[200px]">
+          <div className="w-10 h-10 bg-gray-200 rounded-lg flex items-center justify-center flex-shrink-0">
+            <FileIcon filename={message.filename} mimeType={message.mimeType} />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium truncate">{message.filename ?? 'Document'}</p>
+            <p className="text-xs text-gray-500">{sizeLabel ? `${typeLabel} · ${sizeLabel}` : typeLabel}</p>
+          </div>
+          {src ? (
+            <a href={src} download={message.filename} className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors" aria-label="Download">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-gray-600"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></svg>
+            </a>
+          ) : canLazyLoad ? (
+            <button
+              onClick={lazy.load}
+              disabled={lazy.loading}
+              className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 hover:bg-gray-300 flex-shrink-0 transition-colors disabled:opacity-50"
+              aria-label="Download"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-gray-600"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" /></svg>
+            </button>
+          ) : null}
+          {lazy.error && <span className="text-xs text-red-500 flex-shrink-0">Erro</span>}
+        </div>
+      )
+    }
+    default:
+      return null
+  }
+}

package/src/MessageBubble.tsx

@@ -0,0 +1,129 @@
+import { useState } from 'react'
+import { Check } from 'lucide-react'
+import type { MessagePayload } from './types'
+import { useConversationLocales } from './ConversationLocalesProvider'
+import { StatusTicks } from './StatusTicks'
+import { MediaRenderer, type ResolveMediaUrl } from './MediaRenderer'
+import { Lightbox } from './Lightbox'
+import { parseWhatsAppFormatting } from './lib/whatsapp-formatting'
+import { formatTimestamp, formatDateTime } from './lib/format'
+
+export interface MessageBubbleProps {
+  message: MessagePayload
+  isMine: boolean
+  senderName?: string | null
+  isFirstInGroup?: boolean
+  isSelecting?: boolean
+  isSelected?: boolean
+  onToggleSelect?: () => void
+  onResolveMediaUrl?: ResolveMediaUrl
+}
+
+// Hex arbitrários (não os tokens `whatsapp.*` do Tailwind) — o pacote fica autocontido,
+// sem exigir que o host replique a configuração de tema feita em tailwind.config.ts do bot.
+const BUBBLE_COLOR: Record<string, string> = {
+  agent: 'bg-[#d9fdd3] dark:bg-[#005c4b]',
+  bot: 'bg-[#d7f0ec] dark:bg-[#0a3d3a]',
+  customer: 'bg-white dark:bg-[#202c33]',
+}
+
+const MEDIA_TYPES = new Set(['image', 'audio', 'video', 'document', 'sticker'])
+
+// Paridade com financiamento-imobiliario-bot/apps/web/src/components/MessageBubble.tsx —
+// cor por sender, tail só no isFirstInGroup, agrupamento mt-2/mt-0.5, ring vermelho em
+// falha, tick de status colorido, tooltip de readAt/janela expirada.
+//
+// Requer '@adatechnology/conversations-ui/styles.css' (ConversationWallpaper) ou um
+// tailwind.config do host expondo as cores `whatsapp.*` — ver Wallpaper.tsx e T6.2.
+export function MessageBubble({
+  message, isMine, senderName, isFirstInGroup = true, isSelecting = false, isSelected = false, onToggleSelect,
+  onResolveMediaUrl,
+}: MessageBubbleProps) {
+  const { bubble, selection } = useConversationLocales()
+  const [lightboxSrc, setLightboxSrc] = useState<string | null>(null)
+
+  const bubbleColor = BUBBLE_COLOR[message.sender] ?? BUBBLE_COLOR.customer
+  const hasError = message.status === 'failed'
+  const isMedia = MEDIA_TYPES.has(message.type)
+  const isTemplate = message.type === 'template'
+  const displayName = message.sender === 'agent' && senderName ? senderName : bubble[message.sender] ?? message.sender
+
+  const tooltipText = message.status === 'read' && message.readAt
+    ? `${bubble.readAt}${formatDateTime(message.readAt)}`
+    : message.status === 'failed'
+      ? bubble.windowExpired
+      : undefined
+
+  // Cantinho reto no topo (o "rabinho" do balão do WhatsApp) só na primeira mensagem de um grupo
+  // consecutivo do mesmo remetente — o resto do grupo fica com os dois cantos superiores arredondados.
+  const tailCornerClass = isFirstInGroup ? (isMine ? 'rounded-tr-md' : 'rounded-tl-md') : ''
+
+  const checkbox = (
+    <button
+      onClick={(e) => { e.stopPropagation(); onToggleSelect?.() }}
+      title={selection.select}
+      className={`
+        flex-shrink-0 self-end mb-1 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all
+        ${isSelected ? 'bg-teal-600 border-teal-600' : 'bg-white/80 dark:bg-black/40 border-black/20 dark:border-white/30'}
+        ${isSelecting ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}
+      `}
+    >
+      {isSelected && <Check size={12} className="text-white" strokeWidth={3} />}
+    </button>
+  )
+
+  return (
+    <div className={`flex items-end gap-1.5 ${isMine ? 'justify-end' : 'justify-start'} group ${isFirstInGroup ? 'mt-2' : 'mt-0.5'}`}>
+      {isMine && checkbox}
+      <div
+        onClick={isSelecting ? onToggleSelect : undefined}
+        className={`
+          max-w-[75%] sm:max-w-[65%] rounded-2xl ${tailCornerClass} px-2.5 py-1.5 shadow-sm
+          ${bubbleColor}
+          ${hasError ? 'ring-1 ring-inset ring-red-400' : ''}
+          ${isSelecting ? 'cursor-pointer' : ''}
+          ${isSelected ? 'ring-2 ring-teal-500' : ''}
+          relative
+        `}
+      >
+        {isMine && isFirstInGroup && (message.sender === 'bot' || (message.sender === 'agent' && senderName)) && (
+          <div className="text-xs font-semibold mb-0.5 text-teal-700 dark:text-teal-400">
+            {displayName}
+          </div>
+        )}
+
+        {isMedia ? (
+          <MediaRenderer message={message} onLightbox={setLightboxSrc} onResolveUrl={onResolveMediaUrl} />
+        ) : (
+          <>
+            {isTemplate && (
+              <p className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 mb-0.5">
+                <span>📨</span>
+                <span className="font-medium">
+                  {bubble.templateLabel}{message.templateName ? ` — ${message.templateName}` : ''}
+                </span>
+              </p>
+            )}
+            <div className="text-sm text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words leading-[19px]">
+              {parseWhatsAppFormatting(message.content ?? '')}
+            </div>
+          </>
+        )}
+
+        <div className="flex items-center justify-end gap-1 mt-0.5 select-none">
+          <span className="text-xs text-black/40 dark:text-white/40 font-medium">
+            {formatTimestamp(message.timestamp)}
+          </span>
+          {isMine && message.status && (
+            <StatusTicks status={message.status} title={tooltipText} />
+          )}
+        </div>
+      </div>
+      {!isMine && checkbox}
+
+      {lightboxSrc && (
+        <Lightbox imageUrl={lightboxSrc} onClose={() => setLightboxSrc(null)} />
+      )}
+    </div>
+  )
+}

package/src/MessageComposer.tsx

@@ -0,0 +1,211 @@
+import { useState, useRef, useCallback, type KeyboardEvent, type ChangeEvent } from 'react'
+import type { ConversationsFeatures } from './types'
+import { EmojiPicker } from './EmojiPicker'
+
+export interface MessageComposerProps {
+  onSend: (text: string) => void
+  onAttach?: (file: File) => void
+  value?: string
+  onChange?: (value: string) => void
+  features?: ConversationsFeatures
+  placeholder?: string
+  maxLength?: number
+  disabled?: boolean
+  acceptedFileTypes?: string
+}
+
+// Paridade com financiamento-imobiliario-bot/apps/web/src/pages/ConversationsPage.tsx:1490
+const DEFAULT_ACCEPTED_FILE_TYPES = 'image/*,video/*,audio/*,.pdf,.doc,.docx,.xls,.xlsx,.zip'
+
+interface FilePreview {
+  file: File
+  previewUrl: string
+}
+
+export const MessageComposer = ({
+  onSend,
+  onAttach,
+  value: externalValue,
+  onChange: externalOnChange,
+  features,
+  placeholder = 'Digite uma mensagem...',
+  maxLength,
+  disabled = false,
+  acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES,
+}: MessageComposerProps) => {
+  const [internalText, setInternalText] = useState('')
+  const [showEmoji, setShowEmoji] = useState(false)
+  const [attachments, setAttachments] = useState<FilePreview[]>([])
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const isControlled = externalValue !== undefined
+  const text = isControlled ? externalValue : internalText
+
+  const setText = useCallback((newText: string) => {
+    if (isControlled) {
+      externalOnChange?.(newText)
+    } else {
+      setInternalText(newText)
+    }
+  }, [isControlled, externalOnChange])
+
+  const showEmojiButton = features?.emoji !== false
+  const showAttachButton = features?.documents !== false
+
+  const sendMessage = useCallback(() => {
+    const trimmed = text.trim()
+    if (!trimmed && attachments.length === 0) return
+    if (trimmed) onSend(trimmed)
+    for (const a of attachments) {
+      onAttach?.(a.file)
+      URL.revokeObjectURL(a.previewUrl)
+    }
+    if (!isControlled) setInternalText('')
+    setAttachments([])
+    setShowEmoji(false)
+    if (textareaRef.current) textareaRef.current.style.height = 'auto'
+  }, [text, attachments, onSend, onAttach, isControlled])
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      if (!disabled) sendMessage()
+    }
+  }, [sendMessage, disabled])
+
+  const handleInput = useCallback(() => {
+    const ta = textareaRef.current
+    if (!ta) return
+    ta.style.height = 'auto'
+    ta.style.height = `${Math.min(ta.scrollHeight, 100)}px`
+  }, [])
+
+  const handleEmojiSelect = useCallback((emoji: string) => {
+    const ta = textareaRef.current
+    if (!ta) { setText(text + emoji); return }
+    const start = ta.selectionStart
+    const end = ta.selectionEnd
+    const newText = text.slice(0, start) + emoji + text.slice(end)
+    setText(newText)
+    requestAnimationFrame(() => {
+      ta.focus()
+      ta.setSelectionRange(start + emoji.length, start + emoji.length)
+      handleInput()
+    })
+  }, [text, setText, handleInput])
+
+  const handleFileChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (!files) return
+    const previews: FilePreview[] = []
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i]
+      previews.push({ file, previewUrl: file.type.startsWith('image/') ? URL.createObjectURL(file) : '' })
+    }
+    setAttachments(prev => [...prev, ...previews])
+    if (fileInputRef.current) fileInputRef.current.value = ''
+  }, [])
+
+  const removeAttachment = useCallback((index: number) => {
+    setAttachments(prev => {
+      const next = [...prev]
+      if (next[index].previewUrl) URL.revokeObjectURL(next[index].previewUrl)
+      next.splice(index, 1)
+      return next
+    })
+  }, [])
+
+  const insertFormatting = useCallback((marker: string) => {
+    const ta = textareaRef.current
+    if (!ta) return
+    const start = ta.selectionStart; const end = ta.selectionEnd
+    const sel = text.slice(start, end)
+    if (sel) {
+      setText(text.slice(0, start) + marker + sel + marker + text.slice(end))
+      requestAnimationFrame(() => {
+        ta.focus()
+        ta.setSelectionRange(start + marker.length + sel.length + marker.length, start + marker.length + sel.length + marker.length)
+      })
+    }
+  }, [text, setText])
+
+  const canSend = text.trim().length > 0 || attachments.length > 0
+  const remaining = maxLength ? maxLength - text.length : null
+
+  return (
+    <div>
+      {attachments.length > 0 && (
+        <div className="flex gap-2 px-1 pb-2 overflow-x-auto">
+          {attachments.map((a, i) => (
+            <div key={i} className="relative flex-shrink-0">
+              {a.previewUrl ? (
+                <img src={a.previewUrl} alt="" className="w-16 h-16 object-cover rounded-lg border border-gray-200" />
+              ) : (
+                <div className="w-16 h-16 bg-gray-100 rounded-lg border border-gray-200 flex items-center justify-center">
+                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                </div>
+              )}
+              <button onClick={() => removeAttachment(i)} className="absolute -top-2 -right-2 w-5 h-5 bg-gray-600 text-white rounded-full flex items-center justify-center hover:bg-gray-800 text-xs">✕</button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="flex items-end gap-1.5 bg-[#f0f2f5] rounded-xl px-3 py-2">
+        {showEmojiButton && (
+          <div className="relative flex-shrink-0">
+            <button onClick={() => setShowEmoji(v => !v)} className="w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 transition-colors" aria-label="Emoji">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><circle cx="9" cy="9" r="0.5" fill="currentColor"/><circle cx="15" cy="9" r="0.5" fill="currentColor"/></svg>
+            </button>
+            {showEmoji && (
+              <div className="absolute bottom-full left-0 mb-2 z-10">
+                <EmojiPicker onSelect={handleEmojiSelect} />
+              </div>
+            )}
+          </div>
+        )}
+
+        <textarea
+          ref={textareaRef}
+          value={text}
+          onChange={e => { setText(e.target.value); handleInput() }}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          rows={1}
+          disabled={disabled}
+          className="flex-1 resize-none bg-transparent text-[15px] text-[#3b4a54] placeholder-[#8696a0] outline-none py-1.5 max-h-[100px] leading-relaxed"
+          style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" }}
+        />
+
+        {showAttachButton && (
+          <>
+            <input ref={fileInputRef} type="file" multiple accept={acceptedFileTypes} onChange={handleFileChange} className="hidden" />
+            <button onClick={() => fileInputRef.current?.click()} className="w-9 h-9 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 flex-shrink-0 transition-colors" aria-label="Anexar">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+            </button>
+          </>
+        )}
+
+        <button
+          onClick={sendMessage}
+          disabled={!canSend || disabled}
+          className={`w-10 h-10 flex items-center justify-center rounded-full flex-shrink-0 transition-all ${
+            canSend && !disabled
+              ? 'bg-[#00a884] text-white hover:bg-[#06cf9c] shadow-sm'
+              : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+          }`}
+          aria-label="Enviar"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
+        </button>
+      </div>
+
+      {remaining !== null && (
+        <div className="flex justify-end mt-1 pr-1">
+          <span className={`text-xs ${remaining < 20 ? 'text-red-500' : 'text-gray-400'}`}>{remaining}</span>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/MessageTail.tsx

@@ -0,0 +1,18 @@
+export interface MessageTailProps {
+  isOutbound: boolean
+}
+
+export function MessageTail({ isOutbound }: MessageTailProps) {
+  if (isOutbound)
+    return (
+      <svg className="absolute top-0 -right-[5px] w-[5px] h-[11px]" viewBox="0 0 5 11" fill="#d9fdd3">
+        <path d="M5 0H0v11c1.5-2 4.5-2 5-4V0z" />
+      </svg>
+    )
+
+  return (
+    <svg className="absolute top-0 -left-[5px] w-[5px] h-[11px]" viewBox="0 0 5 11" fill="white">
+      <path d="M0 0h5v11C3.5 9 .5 9 0 7V0z" />
+    </svg>
+  )
+}

package/src/MessageText.tsx

@@ -0,0 +1,42 @@
+import { useCallback, useState } from 'react'
+import type { MessagePayload } from './types'
+import { useConversations } from './providers/ConversationsProvider'
+import { parseWhatsAppFormatting } from './lib/whatsapp-formatting'
+
+export interface MessageTextProps {
+  message: MessagePayload
+}
+
+export function MessageText({ message }: MessageTextProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = useCallback(async () => {
+    if (!message.content) return
+    try {
+      await navigator.clipboard.writeText(message.content)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // Clipboard not available
+    }
+  }, [message.content])
+
+  if (message.type === 'template')
+    return <p className="text-sm italic text-[#667781]">{message.content ?? 'Template message'}</p>
+
+  return (
+    <div
+      onClick={handleCopy}
+      className="text-[14.2px] leading-[19px] whitespace-pre-wrap break-words select-all [&_strong]:font-bold [&_em]:italic [&_del]:line-through"
+    >
+      <span>
+        {parseWhatsAppFormatting(message.content ?? '')}
+      </span>
+      {copied && (
+        <span className="absolute top-0 right-0 -translate-y-full bg-[#3b4a54] text-white text-[11px] px-1.5 py-0.5 rounded shadow-lg">
+          Copiado!
+        </span>
+      )}
+    </div>
+  )
+}

package/src/MessageTimestamp.tsx

@@ -0,0 +1,22 @@
+import { StatusTicks } from './StatusTicks'
+
+export interface MessageTimestampProps {
+  timestamp: string
+  status?: string
+  isOutbound: boolean
+}
+
+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">
+        {timestamp}
+      </span>
+      {isOutbound && status && (
+        <span className="flex items-center -mr-[2px]">
+          <StatusTicks status={status} />
+        </span>
+      )}
+    </div>
+  )
+}

package/src/SimpleEmojiPicker.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState } from 'react'
+import { Smile } from 'lucide-react'
+
+const EMOJIS = [
+  '😀', '😂', '🤣', '😊', '😍', '🥰', '😘', '😜', '🤪', '😎',
+  '🤩', '😇', '🙂', '😏', '😌', '😔', '😢', '😭', '😤', '😡',
+  '🥺', '😰', '😱', '🥳', '🤔', '🤗', '👍', '👎', '👏', '🙌',
+  '🤝', '💪', '🙏', '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤',
+  '🤍', '💔', '🔥', '⭐', '🎉', '✨', '💯', '✅', '❌', '⚠️',
+  '🚀', '💡', '📌', '📎', '📝', '📊', '📈', '💰', '💳', '🏠',
+  '🏦', '🚗', '✈️', '⏰', '📅', '🔔', '📞', '💬', '🗨️', '👋',
+  '🤖', '🎯', '🏆', '📋', '📄', '🔍', '🎓', '🌟', '💼', '🛡️',
+]
+
+export interface SimpleEmojiPickerProps {
+  onSelect: (emoji: string) => void
+  label?: string
+  pickerWidth?: string
+  pickerMaxHeight?: string
+}
+
+// Paridade com financiamento-imobiliario-bot/apps/web/src/components/SimpleEmojiPicker.tsx —
+// grade única (sem categorias), botão de alternância com fecho ao clicar fora. Distinto do
+// EmojiPicker categorizado já existente no pacote, que é sempre-aberto/multi-categoria.
+export function SimpleEmojiPicker({ onSelect, label = 'Emojis', pickerWidth = '280px', pickerMaxHeight = '220px' }: SimpleEmojiPickerProps) {
+  const [open, setOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [open])
+
+  return (
+    <div ref={containerRef} className="relative flex-shrink-0">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-7 h-7 flex items-center justify-center rounded-lg text-gray-400 dark:text-gray-500 hover:text-teal-600 dark:hover:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/30 transition-colors"
+        title={label}
+      >
+        <Smile size={15} />
+      </button>
+
+      {open && (
+        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl p-2 z-50">
+          <div
+            className="grid grid-cols-10 gap-0.5 overflow-y-auto"
+            style={{ width: pickerWidth, maxHeight: pickerMaxHeight }}
+          >
+            {EMOJIS.map((emoji) => (
+              <button
+                key={emoji}
+                type="button"
+                onClick={() => { onSelect(emoji); setOpen(false) }}
+                className="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-lg leading-none transition-colors"
+              >
+                {emoji}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}