@adatechnology/conversations-ui 0.1.0-rc.2 → 0.1.0-rc.20

package/src/AudioRecorderButton.tsx

@@ -0,0 +1,248 @@
+/**
+ * Gravação de áudio no simulador, pelo microfone do próprio navegador.
+ *
+ * Existe porque áudio é o formato que mais chega de cliente real e o que mais quebra fluxo: sem
+ * poder gravar aqui, testar o caminho de transcrição exigia mandar mensagem do celular de alguém.
+ *
+ * O arquivo gravado sai daqui como `File` e segue exatamente o mesmo caminho de um anexo — quem
+ * hospeda e devolve o `mediaId` é o host, via `uploadMedia`.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { AudioPlayer } from './AudioPlayer'
+
+export interface AudioRecorderButtonLabels {
+  start: string
+  stop: string
+  unsupported: string
+  denied: string
+  review: string
+  send: string
+  discard: string
+  empty: string
+}
+
+export const DEFAULT_AUDIO_RECORDER_BUTTON_LABELS: AudioRecorderButtonLabels = {
+  start: 'Gravar áudio',
+  stop: 'Parar gravação',
+  unsupported: 'Este navegador não grava áudio.',
+  denied: 'Sem permissão para usar o microfone.',
+  review: 'Ouça antes de enviar',
+  send: 'Enviar áudio',
+  discard: 'Descartar áudio',
+  empty: 'Nada foi captado pelo microfone.',
+}
+
+export interface AudioRecorderButtonProps {
+  onRecorded: (file: File) => void | Promise<void>
+  onFailure?: (message: string) => void
+  /**
+   * Avisa quando a gravação começa e termina. O botão é um interruptor — o segundo toque é que
+   * envia — e sem um aviso fora dele o operador grava, não vê nada acontecer e desiste achando
+   * que o microfone está quebrado.
+   */
+  onRecordingChange?: (isRecording: boolean) => void
+  /**
+   * Abre uma etapa de revisão quando a gravação para: o áudio toca ali mesmo e só sai depois de
+   * confirmado. Ligado por padrão — voz é o único anexo que quem envia não viu antes de mandar, e
+   * sem ouvir não há como saber se o microfone captou alguma coisa. Desligar volta ao envio direto.
+   */
+  reviewBeforeSend?: boolean
+  /**
+   * Teto de duração da gravação, em milissegundos. Passado o tempo, o gravador para e envia o que
+   * tem. Produto com limite próprio sobrescreve.
+   */
+  maxDurationMilliseconds?: number
+  labels?: Partial<AudioRecorderButtonLabels>
+  disabled?: boolean
+}
+
+/**
+ * Cinco minutos: com o codec de voz do WhatsApp isso dá menos de 3MB, folgado dentro do teto de
+ * 16MB que a Meta impõe a áudio, e é mais do que qualquer recado de cliente. O corte automático
+ * existe porque gravação esquecida aberta só se descobre no envio, com o arquivo inteiro perdido.
+ */
+export const DEFAULT_MAX_RECORDING_MILLISECONDS = 5 * 60 * 1000
+
+/**
+ * Ordem de preferência de formato: os dois primeiros o WhatsApp aceita como áudio; `webm` é só
+ * saída de emergência para navegador que não grava mais nada — gravar em webm e descobrir na hora
+ * do envio que o formato é inválido é pior do que gravar já no formato certo.
+ */
+const RECORDING_FORMATS = [
+  { mimeType: 'audio/ogg;codecs=opus', uploadMimeType: 'audio/ogg', extension: 'ogg' },
+  { mimeType: 'audio/mp4', uploadMimeType: 'audio/mp4', extension: 'm4a' },
+  { mimeType: 'audio/webm', uploadMimeType: 'audio/webm', extension: 'webm' },
+] as const
+
+export type RecordingFormat = (typeof RECORDING_FORMATS)[number]
+
+/** Primeiro formato que o navegador sabe gravar, ou `undefined` se não souber gravar nenhum. */
+export function resolveRecordingFormat(): RecordingFormat | undefined {
+  if (typeof MediaRecorder === 'undefined') return undefined
+  // `isTypeSupported` não existe em toda implementação; onde falta, o primeiro da lista é o palpite.
+  if (typeof MediaRecorder.isTypeSupported !== 'function') return RECORDING_FORMATS[0]
+  return RECORDING_FORMATS.find((format) => MediaRecorder.isTypeSupported(format.mimeType))
+}
+
+type PendingRecording = { file: File; objectURL: string }
+
+export function AudioRecorderButton({
+  onRecorded,
+  onFailure,
+  onRecordingChange,
+  reviewBeforeSend = true,
+  maxDurationMilliseconds = DEFAULT_MAX_RECORDING_MILLISECONDS,
+  labels,
+  disabled,
+}: AudioRecorderButtonProps) {
+  const labelOf = (key: keyof AudioRecorderButtonLabels): string =>
+    labels?.[key] ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS[key]
+  const [isRecording, setIsRecording] = useState(false)
+  const [pending, setPending] = useState<PendingRecording | undefined>(undefined)
+  const recorderRef = useRef<MediaRecorder | null>(null)
+  const autoStopRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  // O `objectURL` é um recurso do documento, não do React: sem revogar, cada gravação descartada
+  // deixa o blob inteiro preso na memória da aba até um reload.
+  const discard = useCallback(() => {
+    setPending((current) => {
+      if (current) URL.revokeObjectURL(current.objectURL)
+      return undefined
+    })
+  }, [])
+
+  useEffect(() => discard, [discard])
+
+  const confirm = useCallback(() => {
+    if (!pending) return
+    void onRecorded(pending.file)
+    discard()
+  }, [discard, onRecorded, pending])
+
+  const stop = useCallback(() => {
+    recorderRef.current?.stop()
+  }, [])
+
+  const start = useCallback(async () => {
+    const format = resolveRecordingFormat()
+    if (!format || !navigator.mediaDevices?.getUserMedia) {
+      onFailure?.(labels?.unsupported ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.unsupported)
+      return
+    }
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      const recorder = new MediaRecorder(stream, { mimeType: format.mimeType })
+      const chunks: Blob[] = []
+
+      recorder.addEventListener('dataavailable', (event) => {
+        if (event.data.size > 0) chunks.push(event.data)
+      })
+      recorder.addEventListener('stop', () => {
+        // Solta o microfone assim que para: sem isto o indicador de gravação do navegador fica
+        // aceso depois do envio, e o operador acha que o simulador continua ouvindo.
+        stream.getTracks().forEach((track) => track.stop())
+        clearTimeout(autoStopRef.current)
+        setIsRecording(false)
+        onRecordingChange?.(false)
+        recorderRef.current = null
+        // O `File` sai com o MIME sem os parâmetros de codec: `audio/ogg;codecs=opus` serve ao
+        // gravador, mas quem valida upload compara com `audio/ogg` puro.
+        const blob = new Blob(chunks, { type: format.uploadMimeType })
+        const file = new File([blob], `audio-${Date.now()}.${format.extension}`, {
+          type: format.uploadMimeType,
+        })
+
+        // Gravação vazia não vira anexo: microfone mudo ou permissão revogada no meio produzem um
+        // blob de zero byte, e mandá-lo adiante só falha lá na frente, sem dizer por quê.
+        if (blob.size === 0) {
+          onFailure?.(labelOf('empty'))
+          return
+        }
+
+        if (!reviewBeforeSend) {
+          void onRecorded(file)
+          return
+        }
+
+        setPending({ file, objectURL: URL.createObjectURL(blob) })
+      })
+
+      recorderRef.current = recorder
+      recorder.start()
+      autoStopRef.current = setTimeout(() => recorder.stop(), maxDurationMilliseconds)
+      setIsRecording(true)
+      onRecordingChange?.(true)
+    } catch {
+      onFailure?.(labels?.denied ?? DEFAULT_AUDIO_RECORDER_BUTTON_LABELS.denied)
+    }
+    // `labelOf` lê `labels` a cada render e não entra aqui; o que importa para recriar o gravador
+    // são o teto de duração, o destino da gravação e se há etapa de revisão.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [maxDurationMilliseconds, onFailure, onRecorded, onRecordingChange, reviewBeforeSend])
+
+  const toggleLabel = isRecording ? labelOf('stop') : labelOf('start')
+
+  return (
+    /* O painel de revisão flutua sobre o botão em vez de ocupar espaço na barra: o microfone mora
+       na caixa do botão de enviar, e empurrar o composer para cima a cada gravação faria a
+       conversa saltar. */
+    <div className="relative flex-shrink-0">
+      {pending && (
+        <div
+          role="group"
+          aria-label={labelOf('review')}
+          /* Largura presa à viewport, não ao conteúdo: ancorado à direita do microfone, qualquer
+             largura fixa maior que a tela sangra para fora no celular. `flex-wrap` é a segunda
+             rede — se o player e os dois botões não couberem lado a lado, os botões descem. */
+          className="absolute bottom-full right-0 z-20 mb-2 flex w-[calc(100vw-2rem)] max-w-[20rem] flex-wrap items-center justify-end gap-2 rounded-xl border border-gray-200 bg-white p-2 shadow-lg dark:border-gray-700 dark:bg-gray-800"
+        >
+          <div className="min-w-0 flex-1">
+            <AudioPlayer src={pending.objectURL} />
+          </div>
+          <button
+            type="button"
+            onClick={discard}
+            title={labelOf('discard')}
+            aria-label={labelOf('discard')}
+            className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-red-500 dark:hover:bg-gray-700"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
+          </button>
+          <button
+            type="button"
+            onClick={confirm}
+            title={labelOf('send')}
+            aria-label={labelOf('send')}
+            className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white transition-colors hover:bg-emerald-600"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" /></svg>
+          </button>
+        </div>
+      )}
+      <button
+        type="button"
+        disabled={disabled || pending !== undefined}
+        onClick={() => (isRecording ? stop() : void start())}
+        title={toggleLabel}
+        aria-label={toggleLabel}
+        aria-pressed={isRecording}
+        /* Mesma caixa do botão de enviar: o microfone ocupa o lugar dele enquanto o campo está
+           vazio, e qualquer diferença de tamanho faz a barra pular a cada letra digitada. */
+        className={`flex h-10 w-10 items-center justify-center rounded-full transition-colors disabled:opacity-50 ${
+          isRecording
+            ? 'animate-pulse bg-red-500 text-white ring-4 ring-red-500/30 hover:bg-red-600'
+            : 'text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
+        }`}
+      >
+        {isRecording ? (
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2" /></svg>
+        ) : (
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" /><path d="M19 11a7 7 0 0 1-14 0" /><line x1="12" y1="18" x2="12" y2="22" /></svg>
+        )}
+      </button>
+    </div>
+  )
+}

package/src/Avatar.tsx

@@ -1,8 +1,18 @@
+export interface AvatarLabels {
+  /** Lido por leitor de tela quando não há nome nem imagem — a silhueta genérica. */
+  unnamedContact: string
+}
+
 export interface AvatarProps {
   name?: string | null
   avatarUrl?: string
   size?: 'sm' | 'md' | 'lg'
   className?: string
+  labels?: Partial<AvatarLabels>
+}
+
+export const DEFAULT_AVATAR_LABELS: AvatarLabels = {
+  unnamedContact: 'Contato sem nome',
 }
 
 const sizeClasses = {
@@ -36,8 +46,9 @@ function getBgColor(name: string | undefined | null): string {
 
 // 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) {
+export function Avatar({ name, avatarUrl, size = 'md', className = '', labels }: AvatarProps) {
   const sizeClass = sizeClasses[size]
+  const unnamedContactLabel = labels?.unnamedContact ?? DEFAULT_AVATAR_LABELS.unnamedContact
 
   if (avatarUrl) {
     return (
@@ -49,15 +60,30 @@ export function Avatar({ name, avatarUrl, size = 'md', className = '' }: AvatarP
     )
   }
 
-  const initials = getInitials(name)
   const bgColor = getBgColor(name)
 
+  // Sem nome e sem imagem, a silhueta genérica. Iniciais exigem nome — derivá-las de um telefone
+  // produz rótulo sem significado ("+9"), que é pior que assumir o anonimato.
+  if (!name) {
+    return (
+      <div
+        className={`${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white flex-shrink-0 ${className}`}
+        role="img"
+        aria-label={unnamedContactLabel}
+      >
+        <svg viewBox="0 0 24 24" fill="currentColor" className="h-[60%] w-[60%]" aria-hidden>
+          <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z" />
+        </svg>
+      </div>
+    )
+  }
+
   return (
     <div
       className={`${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0 ${className}`}
-      title={name || undefined}
+      title={name}
     >
-      {initials}
+      {getInitials(name)}
     </div>
   )
 }

package/src/ChannelIcon.tsx

@@ -0,0 +1,87 @@
+/**
+ * Marca visual de cada canal.
+ *
+ * SVG em vez de emoji porque emoji não tem logo de marca: 💬 e 📨 não distinguem WhatsApp de
+ * Messenger para quem bate o olho numa fila de conversas. São marcas **simplificadas** desenhadas
+ * com primitivas — reconhecíveis pela forma e pela cor oficial, sem reproduzir o logotipo original.
+ *
+ * `currentColor` não serve aqui: a cor faz parte da identificação do canal.
+ */
+
+import { CONVERSATION_CHANNEL, capabilitiesOf, type ConversationChannel } from './conversationChannel'
+
+export const CHANNEL_BRAND_COLOR: Readonly<Record<ConversationChannel, string>> = {
+  [CONVERSATION_CHANNEL.WHATSAPP]: '#25D366',
+  [CONVERSATION_CHANNEL.MESSENGER]: '#0084FF',
+  [CONVERSATION_CHANNEL.INSTAGRAM]: '#E4405F',
+  [CONVERSATION_CHANNEL.WEBCHAT]: '#64748B',
+}
+
+export interface ChannelIconProps {
+  channel?: ConversationChannel | undefined
+  size?: number
+  className?: string
+}
+
+function Glyph({ channel }: { channel: ConversationChannel }) {
+  const color = CHANNEL_BRAND_COLOR[channel]
+
+  if (channel === CONVERSATION_CHANNEL.WHATSAPP) {
+    return (
+      <>
+        <circle cx="12" cy="12" r="11" fill={color} />
+        {/* Handset estilizado, o traço que identifica a marca à distância. */}
+        <path
+          d="M8.6 7.2c.3-.1.7 0 .9.3l1 1.6c.2.3.1.7-.1.9l-.7.7c.6 1.3 1.6 2.3 2.9 2.9l.7-.7c.2-.2.6-.3.9-.1l1.6 1c.3.2.4.6.3.9-.4 1-1.4 1.6-2.4 1.4-3-.5-5.4-2.9-5.9-5.9-.2-1 .4-2 1.4-2.4Z"
+          fill="#fff"
+        />
+      </>
+    )
+  }
+
+  if (channel === CONVERSATION_CHANNEL.MESSENGER) {
+    return (
+      <>
+        <circle cx="12" cy="12" r="11" fill={color} />
+        {/* Raio do Messenger. */}
+        <path d="M6.5 15.5 11 10.8l2.4 2.4L17.5 9l-4.6 4.9-2.4-2.4-4 4Z" fill="#fff" stroke="#fff" strokeWidth="1.4" strokeLinejoin="round" />
+      </>
+    )
+  }
+
+  if (channel === CONVERSATION_CHANNEL.INSTAGRAM) {
+    return (
+      <>
+        <rect x="2" y="2" width="20" height="20" rx="6" fill={color} />
+        <rect x="6.5" y="6.5" width="11" height="11" rx="3.5" fill="none" stroke="#fff" strokeWidth="1.6" />
+        <circle cx="12" cy="12" r="2.6" fill="none" stroke="#fff" strokeWidth="1.6" />
+        <circle cx="16.4" cy="7.6" r="1" fill="#fff" />
+      </>
+    )
+  }
+
+  return (
+    <>
+      <circle cx="12" cy="12" r="11" fill={color} />
+      <path d="M6.5 8.5h11v7h-5.5L8.5 18v-2.5h-2v-7Z" fill="#fff" />
+    </>
+  )
+}
+
+export function ChannelIcon({ channel, size = 14, className = '' }: ChannelIconProps) {
+  const resolved: ConversationChannel = channel ?? CONVERSATION_CHANNEL.WHATSAPP
+  const { label } = capabilitiesOf(resolved)
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      className={`inline-block shrink-0 ${className}`.trim()}
+      role="img"
+      aria-label={label}
+    >
+      <Glyph channel={resolved} />
+    </svg>
+  )
+}

package/src/ConversationContextPanel.tsx

@@ -0,0 +1,127 @@
+/**
+ * "Suas Seleções": o que o bot já coletou na conversa. Para o atendente que assume no meio, é a
+ * diferença entre ler o transcript inteiro e ver o estado em duas linhas.
+ *
+ * O pacote não interpreta o contexto — ele é `Record<string, unknown>` e cada produto nomeia as
+ * próprias chaves. O host traduz para `entries`; aqui só se decide como mostrar.
+ */
+
+import { useState } from 'react'
+
+import { cn } from './lib/cn'
+import { useIsNarrow } from './useIsNarrow'
+
+export interface ConversationContextEntry {
+  key: string
+  label: string
+  value?: string | undefined
+  icon?: string
+}
+
+export interface ConversationContextPanelLabels {
+  title: string
+  empty: string
+  collapse: string
+  expand: string
+}
+
+export const DEFAULT_CONVERSATION_CONTEXT_LABELS: ConversationContextPanelLabels = {
+  title: '📋 Suas Seleções',
+  empty: 'Nada coletado ainda nesta conversa.',
+  collapse: 'fechar',
+  expand: 'abrir',
+}
+
+export interface ConversationContextPanelClassNames {
+  root: string
+  toggle: string
+  counter: string
+  body: string
+}
+
+export interface ConversationContextPanelProps {
+  entries: readonly ConversationContextEntry[]
+  /**
+   * Estado inicial. Ausente, abre sozinho no desktop quando há algum dado preenchido.
+   *
+   * Existe porque "abre sozinho" nem sempre é o que o produto quer: com 1 de 6 campos preenchidos o
+   * painel ocupa altura mostrando quase só travessões, e empurra a conversa — que é o que se veio ver.
+   */
+  defaultOpen?: boolean
+  labels?: Partial<ConversationContextPanelLabels>
+  className?: string
+  classNames?: Partial<ConversationContextPanelClassNames>
+}
+
+export function ConversationContextPanel({
+  entries,
+  defaultOpen,
+  labels: labelsOverride,
+  className,
+  classNames,
+}: ConversationContextPanelProps) {
+  const labels = { ...DEFAULT_CONVERSATION_CONTEXT_LABELS, ...labelsOverride }
+  const filled = entries.filter((entry) => Boolean(entry.value))
+
+  // Abre sozinho só quando há algo coletado: um painel de seis traços ocupa a altura da conversa
+  // sem informar nada. O contador continua visível fechado, que é o dado útil de relance.
+  //
+  // `undefined` = usuário ainda não mexeu. Guardar só um booleano não serve: o contexto chega
+  // depois da montagem, então o estado inicial seria calculado com a lista vazia e o painel ficaria
+  // fechado mesmo com dados.
+  const isNarrow = useIsNarrow()
+  const [manualOpen, setManualOpen] = useState<boolean | undefined>(undefined)
+  // No celular nasce fechado mesmo com dados: aberto, o painel consome ~150px da conversa. O
+  // contador no cabeçalho já entrega a informação de relance.
+  const open = manualOpen ?? defaultOpen ?? (!isNarrow && filled.length > 0)
+
+  return (
+    <section className={cn('border-b', classNames?.root, className)}>
+      <button
+        type="button"
+        onClick={() => setManualOpen(!open)}
+        aria-expanded={open}
+        title={open ? labels.collapse : labels.expand}
+        className={cn(
+          'flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-left text-sm font-medium transition-colors hover:bg-gray-50 dark:hover:bg-gray-800',
+          classNames?.toggle,
+        )}
+      >
+        <span aria-hidden className="text-xs">
+          {open ? '▾' : '▸'}
+        </span>
+        <span>{labels.title}</span>
+        <span className={cn('rounded-full bg-gray-200 px-2 text-xs dark:bg-gray-700', classNames?.counter)}>
+          {filled.length}/{entries.length}
+        </span>
+        {/* Rótulo escrito na ponta direita: o caret sozinho não dizia que a linha inteira fecha o
+            painel — a pergunta "cadê o botão de fechar?" veio daí. */}
+        <span aria-hidden className="ml-auto text-xs text-gray-500">
+          {open ? labels.collapse : labels.expand}
+        </span>
+      </button>
+
+      {open ? (
+        <div className={cn('px-4 pb-3', classNames?.body)}>
+          {entries.length === 0 ? (
+            <p className="text-xs text-gray-500">{labels.empty}</p>
+          ) : (
+            <dl className="grid grid-cols-2 gap-2 text-xs">
+              {entries.map((entry) => (
+                <div key={entry.key} className="min-w-0">
+                  <dt className="truncate text-gray-500">
+                    {entry.icon ? `${entry.icon} ` : ''}
+                    {entry.label}
+                  </dt>
+                  <dd className="truncate font-medium">
+                    {entry.value ? <span className="text-green-700 dark:text-green-400">✓ {entry.value}</span> : '—'}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          )}
+        </div>
+      ) : null}
+    </section>
+  )
+}