@adatechnology/conversations-ui 0.0.0

package/dist/styles.css

@@ -0,0 +1,11 @@
+/* src/styles.css */
+.cv-wallpaper {
+  background-color: #efeae2;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23d7cfc0' stroke-width='1.2' opacity='0.7'%3E%3Ccircle cx='15' cy='15' r='3'/%3E%3Cpath d='M40 10 q5 8 0 16 q-5 -8 0 -16z'/%3E%3Ccircle cx='70' cy='28' r='2'/%3E%3Cpath d='M18 55 l6 6 m-6 0 l6 -6'/%3E%3Ccircle cx='55' cy='68' r='2.5'/%3E%3Cpath d='M85 58 q6 6 0 12 q-6 -6 0 -12z'/%3E%3Ccircle cx='8' cy='85' r='2'/%3E%3Cpath d='M65 90 l5 5 m-5 0 l5 -5'/%3E%3C/g%3E%3C/svg%3E");
+  background-repeat: repeat;
+  background-size: 100px 100px;
+}
+.dark .cv-wallpaper {
+  background-color: #0b141a;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2319232a' stroke-width='1.2' opacity='0.9'%3E%3Ccircle cx='15' cy='15' r='3'/%3E%3Cpath d='M40 10 q5 8 0 16 q-5 -8 0 -16z'/%3E%3Ccircle cx='70' cy='28' r='2'/%3E%3Cpath d='M18 55 l6 6 m-6 0 l6 -6'/%3E%3Ccircle cx='55' cy='68' r='2.5'/%3E%3Cpath d='M85 58 q6 6 0 12 q-6 -6 0 -12z'/%3E%3Ccircle cx='8' cy='85' r='2'/%3E%3Cpath d='M65 90 l5 5 m-5 0 l5 -5'/%3E%3C/g%3E%3C/svg%3E");
+}

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@adatechnology/conversations-ui",
+  "version": "0.0.0",
+  "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./flows": {
+      "import": "./dist/flows/index.js",
+      "types": "./dist/flows/index.d.ts"
+    },
+    "./whatsapp": {
+      "import": "./dist/channel/index.js",
+      "types": "./dist/channel/index.d.ts"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "lucide-react": "^1.21.0",
+    "@adatechnology/meta-whatsapp-contracts": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "@xyflow/react": "^12"
+  },
+  "peerDependenciesMeta": {
+    "@xyflow/react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/flows/index.ts src/channel/index.ts src/styles.css --dts --format esm --external react --external react-dom --external @xyflow/react",
+    "build:watch": "tsup src/index.ts src/flows/index.ts src/channel/index.ts src/styles.css --watch --dts --format esm --external react --external react-dom --external @xyflow/react",
+    "check": "tsc -p tsconfig.json --noEmit",
+    "test": "bun test"
+  }
+}

package/src/AudioPlayer.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState, type MouseEvent } from 'react'
+import { Pause, Play } from 'lucide-react'
+
+export interface AudioPlayerProps {
+  src: string
+  isMine?: boolean
+}
+
+// Waveform estático com 30 barras de altura pseudoaleatória mas estável — paridade com
+// financiamento-imobiliario-bot/apps/web/src/components/AudioPlayer.tsx. Waveform real
+// (a partir do áudio decodificado), velocidade de reprodução, gravador e transcrição (STT)
+// ficam como enhancement pós-paridade (fora do escopo desta task).
+const BARS = Array.from({ length: 30 }, (_, i) => {
+  const heights = [3, 5, 8, 12, 7, 10, 14, 9, 6, 11, 15, 8, 4, 13, 7, 10, 6, 12, 9, 5, 14, 8, 11, 6, 13, 7, 10, 5, 9, 4]
+  return heights[i % heights.length]
+})
+
+function fmt(sec: number): string {
+  if (!isFinite(sec)) return '0:00'
+  const m = Math.floor(sec / 60)
+  const s = Math.floor(sec % 60)
+  return `${m}:${s.toString().padStart(2, '0')}`
+}
+
+export function AudioPlayer({ src, isMine = false }: AudioPlayerProps) {
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const [playing, setPlaying] = useState(false)
+  const [progress, setProgress] = useState(0) // 0-1
+  const [duration, setDuration] = useState(0)
+  const [current, setCurrent] = useState(0)
+
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio) return
+    const onTime = () => {
+      setCurrent(audio.currentTime)
+      setProgress(audio.duration ? audio.currentTime / audio.duration : 0)
+    }
+    const onMeta = () => setDuration(audio.duration)
+    const onEnd = () => { setPlaying(false); setProgress(0); setCurrent(0) }
+    audio.addEventListener('timeupdate', onTime)
+    audio.addEventListener('loadedmetadata', onMeta)
+    audio.addEventListener('ended', onEnd)
+    return () => {
+      audio.removeEventListener('timeupdate', onTime)
+      audio.removeEventListener('loadedmetadata', onMeta)
+      audio.removeEventListener('ended', onEnd)
+    }
+  }, [])
+
+  const toggle = () => {
+    const audio = audioRef.current
+    if (!audio) return
+    if (playing) { audio.pause(); setPlaying(false) }
+    else { audio.play(); setPlaying(true) }
+  }
+
+  const seek = (e: MouseEvent<HTMLDivElement>) => {
+    const audio = audioRef.current
+    if (!audio || !audio.duration) return
+    const rect = e.currentTarget.getBoundingClientRect()
+    const ratio = (e.clientX - rect.left) / rect.width
+    audio.currentTime = ratio * audio.duration
+  }
+
+  const activeBars = Math.round(progress * BARS.length)
+
+  const playBtn = isMine
+    ? 'bg-green-600 hover:bg-green-700 text-white'
+    : 'bg-gray-600 hover:bg-gray-700 text-white'
+
+  const activeBar = isMine ? 'bg-green-700' : 'bg-gray-700'
+  const inactiveBar = isMine ? 'bg-green-300' : 'bg-gray-300'
+
+  return (
+    <div className="flex items-center gap-2 w-full" style={{ minWidth: '200px', maxWidth: '260px' }}>
+      <audio ref={audioRef} src={src} preload="metadata" />
+
+      <button
+        onClick={toggle}
+        className={`flex-shrink-0 w-9 h-9 rounded-full flex items-center justify-center transition-colors ${playBtn}`}
+      >
+        {playing ? <Pause size={16} /> : <Play size={16} className="translate-x-0.5" />}
+      </button>
+
+      <div className="flex-1 flex flex-col gap-1">
+        <div className="flex items-end gap-0.5 h-8 cursor-pointer" onClick={seek}>
+          {BARS.map((h, i) => (
+            <div
+              key={i}
+              className={`flex-1 rounded-full transition-colors ${i < activeBars ? activeBar : inactiveBar}`}
+              style={{ height: `${h * 2}px` }}
+            />
+          ))}
+        </div>
+
+        <span className="text-gray-400 tabular-nums text-xs">
+          {playing || current > 0 ? fmt(current) : fmt(duration)}
+        </span>
+      </div>
+    </div>
+  )
+}

package/src/Avatar.tsx

@@ -0,0 +1,63 @@
+export interface AvatarProps {
+  name?: string | null
+  avatarUrl?: string
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const sizeClasses = {
+  sm: 'w-6 h-6 text-xs',
+  md: 'w-8 h-8 text-sm',
+  lg: 'w-10 h-10 text-base',
+}
+
+const bgColors = [
+  'bg-blue-500',
+  'bg-green-500',
+  'bg-purple-500',
+  'bg-pink-500',
+  'bg-yellow-500',
+  'bg-red-500',
+  'bg-indigo-500',
+]
+
+function getInitials(name: string | undefined | null): string {
+  if (!name) return '?'
+  const parts = name.trim().split(' ')
+  if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+  return (parts[0]?.substring(0, 2) || '?').toUpperCase()
+}
+
+function getBgColor(name: string | undefined | null): string {
+  if (!name) return 'bg-gray-400'
+  const hash = name.charCodeAt(0) + (name.charCodeAt(name.length - 1) || 0)
+  return bgColors[hash % bgColors.length]
+}
+
+// Paridade com financiamento-imobiliario-bot/apps/web/src/components/Avatar.tsx —
+// mesmas iniciais (primeira+última letra), mesmo hash de cor, mesmas classes de tamanho.
+export function Avatar({ name, avatarUrl, size = 'md', className = '' }: AvatarProps) {
+  const sizeClass = sizeClasses[size]
+
+  if (avatarUrl) {
+    return (
+      <img
+        src={avatarUrl}
+        alt={name || undefined}
+        className={`${sizeClass} rounded-full object-cover flex-shrink-0 ${className}`}
+      />
+    )
+  }
+
+  const initials = getInitials(name)
+  const bgColor = getBgColor(name)
+
+  return (
+    <div
+      className={`${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0 ${className}`}
+      title={name || undefined}
+    >
+      {initials}
+    </div>
+  )
+}

package/src/ConversationListItem.tsx

@@ -0,0 +1,147 @@
+import { useMemo } from 'react'
+import { Avatar } from './Avatar'
+import { formatPhone } from './lib/phone'
+import type { ConversationSummary } from './providers/types'
+
+export interface ConversationListItemProps {
+  conversation: ConversationSummary
+  active?: boolean
+  selected?: boolean
+  onClick?: () => void
+  onSelect?: (id: string) => void
+}
+
+function formatRelativeTime(dateStr: string): string {
+  try {
+    const date = new Date(dateStr)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffMins = Math.floor(diffMs / 60_000)
+    const diffHours = Math.floor(diffMs / 3_600_000)
+    const diffDays = Math.floor(diffMs / 86_400_000)
+
+    if (diffMins < 1) return 'Agora'
+    if (diffMins < 60) return `${diffMins}m`
+    if (diffHours < 24) return `${diffHours}h`
+    if (diffDays < 7) return `${diffDays}d`
+    const day = date.getDate().toString().padStart(2, '0')
+    const month = (date.getMonth() + 1).toString().padStart(2, '0')
+    return `${day}/${month}`
+  } catch {
+    return ''
+  }
+}
+
+function getWindowStatus(lastInboundAt: string | null): { label: string; color: string } | null {
+  if (!lastInboundAt) return null
+
+  try {
+    const lastInbound = new Date(lastInboundAt).getTime()
+    const now = Date.now()
+    const hoursElapsed = (now - lastInbound) / 3_600_000
+
+    if (hoursElapsed <= 12) return { label: 'active', color: '#22c55e' }
+    if (hoursElapsed <= 21) return { label: 'approaching', color: '#eab308' }
+    if (hoursElapsed <= 24) return { label: 'warning', color: '#f97316' }
+    return { label: 'expired', color: '#ef4444' }
+  } catch {
+    return null
+  }
+}
+
+function lastMessagePreview(conversation: ConversationSummary): { icon: string | null; preview: string } {
+  if (!conversation.lastContent) return { icon: null, preview: '' }
+
+  const content = conversation.lastContent
+
+  if (content.startsWith('[image]') || content.startsWith('[Image]')) {
+    return { icon: '\u{1F5BC}', preview: 'Imagem' }
+  }
+  if (content.startsWith('[video]') || content.startsWith('[Video]')) {
+    return { icon: '\u{1F3AC}', preview: 'Vídeo' }
+  }
+  if (content.startsWith('[audio]') || content.startsWith('[Audio]')) {
+    return { icon: '\u{1F3A4}', preview: 'Áudio' }
+  }
+  if (content.startsWith('[document]') || content.startsWith('[Document]')) {
+    return { icon: '\u{1F4C4}', preview: 'Documento' }
+  }
+  if (content.startsWith('[sticker]') || content.startsWith('[Sticker]')) {
+    return { icon: '\u{1F3AF}', preview: 'Sticker' }
+  }
+
+  return { icon: null, preview: content }
+}
+
+export const ConversationListItem = ({
+  conversation,
+  active = false,
+  selected = false,
+  onClick,
+  onSelect,
+}: ConversationListItemProps) => {
+  const isActive = active || selected
+  const windowStatus = useMemo(() => getWindowStatus(conversation.lastInboundAt), [conversation.lastInboundAt])
+  const preview = useMemo(() => lastMessagePreview(conversation), [conversation.lastContent])
+  const name = conversation.clientName || formatPhone(conversation.whatsappNumber) || conversation.whatsappNumber
+  const timestamp = formatRelativeTime(conversation.lastAt)
+  const isInbound = conversation.lastDirection === 'inbound'
+
+  const handleClick = () => {
+    onClick?.()
+    onSelect?.(conversation.id)
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      className="w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-[#f0f2f5] border-b border-[#e9edef]"
+      style={{
+        backgroundColor: isActive ? '#f0f2f5' : 'transparent',
+      }}
+    >
+      <div className="relative flex-shrink-0">
+        <Avatar name={name} size="lg" />
+        {conversation.waitingHuman && (
+          <div className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-amber-400 rounded-full border-2 border-white" />
+        )}
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-1.5 min-w-0">
+            <span className="text-[16px] text-[#111b21] truncate">{name}</span>
+            {windowStatus && windowStatus.label === 'expired' && (
+              <span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0" title="Janela expirada" />
+            )}
+            {windowStatus && windowStatus.label === 'warning' && (
+              <span className="w-2 h-2 rounded-full bg-orange-500 flex-shrink-0" title="Janela próxima do fim" />
+            )}
+          </div>
+          {timestamp && (
+            <span className="text-xs text-[#667781] flex-shrink-0">{timestamp}</span>
+          )}
+        </div>
+        <div className="flex items-center justify-between mt-0.5">
+          <span className="text-sm text-[#667781] truncate max-w-[180px]">
+            {preview.icon && <span className="mr-1">{preview.icon}</span>}
+            {preview.preview || 'Sem mensagens'}
+          </span>
+          {conversation.unread > 0 && (
+            <span className="bg-[#25d366] text-white text-xs font-semibold rounded-full min-w-[20px] h-5 px-1.5 flex items-center justify-center flex-shrink-0 ml-2">
+              {conversation.unread > 99 ? '99+' : conversation.unread}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1.5 mt-1">
+          {conversation.mode === 'human' && (
+            <span className="text-[10px] px-1.5 py-0.5 rounded font-medium bg-purple-100 text-purple-700">Humano</span>
+          )}
+          {conversation.mode === 'bot' && conversation.waitingHuman && (
+            <span className="text-[10px] px-1.5 py-0.5 rounded font-medium bg-amber-100 text-amber-700">Aguardando</span>
+          )}
+        </div>
+      </div>
+    </button>
+  )
+}

package/src/ConversationLocalesProvider.tsx

@@ -0,0 +1,76 @@
+import React, { createContext, useContext } from 'react'
+
+export interface ConversationLocales {
+  bubble: {
+    customer: string
+    bot: string
+    agent: string
+    document: string
+    media: string
+    templateLabel: string
+    readAt: string
+    windowExpired: string
+    viewImage: string
+    listenAudio: string
+    viewVideo: string
+  }
+  selection: {
+    select: string
+  }
+  dateDivider: {
+    today: string
+    yesterday: string
+  }
+}
+
+const DEFAULT_LOCALES: ConversationLocales = {
+  bubble: {
+    customer: 'Cliente',
+    bot: 'Bot',
+    agent: 'Atendente',
+    document: 'documento',
+    media: 'mídia',
+    templateLabel: 'Template',
+    readAt: 'Lida às ',
+    windowExpired: 'Janela de 24h expirada',
+    viewImage: 'Ver imagem',
+    listenAudio: 'Ouvir áudio',
+    viewVideo: 'Ver vídeo',
+  },
+  selection: {
+    select: 'Selecionar',
+  },
+  dateDivider: {
+    today: 'Hoje',
+    yesterday: 'Ontem',
+  },
+}
+
+type PartialLocales = {
+  [K in keyof ConversationLocales]?: Partial<ConversationLocales[K]>
+}
+
+const ConversationLocalesContext = createContext<ConversationLocales>(DEFAULT_LOCALES)
+
+export interface ConversationLocalesProviderProps {
+  children: React.ReactNode
+  locales?: PartialLocales
+}
+
+export function ConversationLocalesProvider({ children, locales }: ConversationLocalesProviderProps) {
+  const merged: ConversationLocales = {
+    bubble: { ...DEFAULT_LOCALES.bubble, ...locales?.bubble },
+    selection: { ...DEFAULT_LOCALES.selection, ...locales?.selection },
+    dateDivider: { ...DEFAULT_LOCALES.dateDivider, ...locales?.dateDivider },
+  }
+
+  return (
+    <ConversationLocalesContext.Provider value={merged}>
+      {children}
+    </ConversationLocalesContext.Provider>
+  )
+}
+
+export function useConversationLocales(): ConversationLocales {
+  return useContext(ConversationLocalesContext)
+}

package/src/DateDivider.tsx

@@ -0,0 +1,32 @@
+import { useConversationLocales } from './ConversationLocalesProvider'
+import { isSameDay } from './lib/format'
+
+export interface DateDividerProps {
+  iso: string
+}
+
+// Paridade com financiamento-imobiliario-bot/apps/web/src/components/DateDivider.tsx —
+// sticky no topo do scroll, "Hoje"/"Ontem" localizados, senão data completa pt-BR.
+export function DateDivider({ iso }: DateDividerProps) {
+  const { dateDivider } = useConversationLocales()
+
+  return (
+    <div className="flex justify-center sticky top-0 z-10 my-2 pointer-events-none">
+      <span className="bg-white/95 dark:bg-gray-800/95 text-gray-600 dark:text-gray-300 text-xs font-medium px-3 py-1 rounded-lg shadow-sm">
+        {formatDividerLabel(iso, dateDivider)}
+      </span>
+    </div>
+  )
+}
+
+function formatDividerLabel(iso: string, dateDivider: { today: string; yesterday: string }): string {
+  const date = new Date(iso)
+  const today = new Date()
+  const yesterday = new Date(today)
+  yesterday.setDate(today.getDate() - 1)
+
+  if (isSameDay(date, today)) return dateDivider.today
+  if (isSameDay(date, yesterday)) return dateDivider.yesterday
+
+  return date.toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' })
+}

package/src/EmojiPicker.tsx

@@ -0,0 +1,77 @@
+import { useState, useCallback } from 'react'
+
+export interface EmojiPickerProps {
+  onSelect: (emoji: string) => void
+  className?: string
+}
+
+const EMOJI_CATEGORIES: { name: string; emojis: string[] }[] = [
+  {
+    name: 'Smileys',
+    emojis: ['😀', '😃', '😄', '😁', '😅', '😂', '🤣', '😊', '😇', '🙂', '😉', '😌', '😍', '🥰', '😘', '😗', '😋', '😛', '😜', '🤪'],
+  },
+  {
+    name: 'Gestures',
+    emojis: ['👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙', '👋', '🤚', '🖐️', '✋', '🖖', '👏', '🙌', '🤝', '🙏', '✍️', '💅', '🤳'],
+  },
+  {
+    name: 'Hearts',
+    emojis: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔', '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟', '♥️'],
+  },
+  {
+    name: 'Food',
+    emojis: ['🍔', '🍟', '🍕', '🌭', '🍿', '🧂', '🥓', '🥚', '🍳', '🧇', '🥞', '🧈', '🍞', '🥐', '🥨', '🥯', '🥖', '🧀', '🥗', '🥙'],
+  },
+  {
+    name: 'Drinks',
+    emojis: ['☕', '🍵', '🍶', '🍾', '🍷', '🍸', '🍹', '🍺', '🍻', '🥂', '🥃', '🥤', '🧋', '🧃', '🧉', '🧊', '🥢', '🍽️', '🍴', '🥄'],
+  },
+  {
+    name: 'Objects',
+    emojis: ['🎁', '🎂', '🎈', '🎉', '🎊', '🎀', '📱', '💻', '⌚', '📷', '🔑', '💰', '💳', '📝', '📌', '📍', '✂️', '🔍', '💡', '🔔'],
+  },
+]
+
+export const EmojiPicker = ({ onSelect, className = '' }: EmojiPickerProps) => {
+  const [activeCategory, setActiveCategory] = useState(0)
+
+  const handleSelect = useCallback(
+    (emoji: string) => {
+      onSelect(emoji)
+    },
+    [onSelect],
+  )
+
+  return (
+    <div className={`bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden ${className}`}>
+      <div className="flex border-b border-gray-200 overflow-x-auto">
+        {EMOJI_CATEGORIES.map((category, index) => (
+          <button
+            key={category.name}
+            onClick={() => setActiveCategory(index)}
+            className={`px-3 py-2 text-xs font-medium whitespace-nowrap border-b-2 transition-colors ${
+              activeCategory === index
+                ? 'border-blue-500 text-blue-600'
+                : 'border-transparent text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            {category.emojis[0]} {category.name}
+          </button>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-10 gap-0.5 p-2 max-h-[240px] overflow-y-auto">
+        {EMOJI_CATEGORIES[activeCategory].emojis.map((emoji) => (
+          <button
+            key={emoji}
+            onClick={() => handleSelect(emoji)}
+            className="w-8 h-8 flex items-center justify-center text-lg hover:bg-gray-100 rounded transition-colors cursor-pointer"
+            aria-label={emoji}
+          >
+            {emoji}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/FileIcon.tsx

@@ -0,0 +1,33 @@
+import { FileArchive, FileSpreadsheet, FileText, File as FileGeneric } from 'lucide-react'
+
+export interface FileIconProps {
+  filename?: string
+  mimeType?: string
+  size?: number
+  className?: string
+}
+
+const EXTENSION_STYLE: Record<string, { Icon: typeof FileText; colorClass: string }> = {
+  pdf: { Icon: FileText, colorClass: 'text-red-500' },
+  doc: { Icon: FileText, colorClass: 'text-blue-500' },
+  docx: { Icon: FileText, colorClass: 'text-blue-500' },
+  xls: { Icon: FileSpreadsheet, colorClass: 'text-green-600' },
+  xlsx: { Icon: FileSpreadsheet, colorClass: 'text-green-600' },
+  zip: { Icon: FileArchive, colorClass: 'text-orange-500' },
+}
+
+function getExtension(filename?: string, mimeType?: string): string {
+  const fromFilename = filename?.split('.').pop()?.toLowerCase()
+  if (fromFilename && EXTENSION_STYLE[fromFilename]) return fromFilename
+  return mimeType?.split('/')[1]?.toLowerCase() ?? ''
+}
+
+// Melhoria sobre a paridade da bolha de documento (T6.7 usava um único ícone genérico
+// para qualquer tipo de arquivo) — ícone e cor variam por extensão/mimeType.
+export function FileIcon({ filename, mimeType, size = 20, className = '' }: FileIconProps) {
+  const extension = getExtension(filename, mimeType)
+  const style = EXTENSION_STYLE[extension] ?? { Icon: FileGeneric, colorClass: 'text-gray-500' }
+  const { Icon, colorClass } = style
+
+  return <Icon size={size} className={`${colorClass} ${className}`.trim()} />
+}

package/src/Lightbox.tsx

@@ -0,0 +1,17 @@
+export interface LightboxProps {
+  imageUrl: string
+  caption?: string
+  onClose: () => void
+}
+
+export function Lightbox({ imageUrl, caption, onClose }: LightboxProps) {
+  return (
+    <div className="fixed inset-0 z-50 bg-black/85 flex items-center justify-center p-4" onClick={onClose}>
+      <div className="max-w-[90vw] max-h-[90vh] flex flex-col items-center" onClick={(e) => e.stopPropagation()}>
+        <img src={imageUrl} alt={caption ?? 'Image'} className="max-w-full max-h-[80vh] object-contain rounded-lg" />
+        {caption && <p className="text-white text-sm mt-3 text-center">{caption}</p>}
+        <button onClick={onClose} className="mt-4 px-4 py-2 bg-white/20 text-white rounded-lg hover:bg-white/30 transition-colors">Fechar</button>
+      </div>
+    </div>
+  )
+}