"use client"; import { useLocaleDeData } from "@/hooks/i18n/useLocaleDeData"; import type { Locale } from "date-fns"; import { formatDistanceToNowStrict } from "date-fns"; import { useT } from "@/hooks/i18n/useT"; import { Check, Robot, Sparkle } from "@/lib/ui/icons"; import { ChannelLogo } from "@/components/inbox/ChannelLogo"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { ChipDeEtiqueta } from "@/components/tags/ChipDeEtiqueta"; import { OwnerBadge } from "@/components/kanban/OwnerBadge"; import { comandoDaConversa, esperaDaConversa, rotuloDaEspera, ROTULO_DO_COMANDO, STATUS_ENCERRADOS, } from "@/lib/inbox/comando-da-conversa"; import { cn } from "@/lib/utils"; import type { ConversationWithContact } from "@/hooks/inbox/useConversationsRealtime"; import { rotuloParaAEquipe } from "@/lib/contacts/rotulo-do-contato"; import { phoneForDisplay } from "@/lib/channels/phone-variants"; import { rotuloDoCanalDaConversa } from "@/lib/channels/estado"; /** * A régua do "quando" mora em `lib/i18n/hora-curta.ts` desde que o card do funil * precisou da MESMA resposta para a última mensagem do negócio. Aqui ela era * privada; duas cópias divergiriam no primeiro ajuste. */ import { horaCurta as relativeTime } from "@/lib/i18n/hora-curta"; interface Props { conversation: ConversationWithContact; isSelected: boolean; onSelect: (id: string) => void; /** Posição 1-based na fila (G5-03). Presente só na visão Fila. */ queuePosition?: number; /** * Mostrar POR ONDE a conversa entrou. * * Só com mais de um número conectado. Com um só, o rótulo seria a mesma * palavra em toda linha da lista — ruído que ensina o olho a ignorar a área * onde vivem os avisos que importam (bloqueado, tags). */ mostrarCanal?: boolean; /** * Mostrar QUEM está no comando de cada conversa. * * Mesma regra do canal, e pelo mesmo motivo: só quando o rótulo DISCRIMINA. Nas * abas "Fila" (todas sem dono), "Minhas" (todas do mesmo dono) e "IA" o badge * seria a mesma palavra em toda linha — ruído que ensina o olho a ignorar a * área onde vivem os avisos que importam. Quem decide é a lista, que é quem * sabe quantos donos distintos ela tem. */ mostrarAtendente?: boolean; /** * Mostrar o ícone de robô na prévia da mensagem, quando quem manda é o * automático. Mesma regra dos dois badges acima: só quando DISCRIMINA. Na * aba "Automático" toda linha já é robô, e o ícone repetido em cada uma vira * ruído. Ausente ou `true` = mostra (comportamento anterior, seguro para o * teste que não passa esta prop). */ mostrarAutomatico?: boolean; /** * A org tem atendimento automático de pé? Vem por PROP e não por hook: um hook * por linha faria 50 assinaturas de query na mesma lista para responder a MESMA * pergunta org-wide. `undefined` = "não sei", e a função trata isso como "não * afirme nada". */ automaticoDaOrg?: boolean; /** * Marca esta linha no lote (#2484, F1). Presente só quando a seleção * múltipla está ligada — sem ela a caixa não aparece, e a lista continua * sendo o que era. */ selecionado?: boolean; /** * Liga o modo de seleção: com esta prop a linha ganha a caixa de marcação. * A ação da caixa é SEPARADA do clique na linha — quem marca não abre a * conversa, e quem abre não marca. */ onAlternarSelecao?: (id: string) => void; /** * Marca (ou desmarca) ESTA conversa como exemplo para o agente aprender * (#3006). Presente = a linha monta o controle; AUSENTE = a linha é * exatamente a que era, sem controle nenhum e sem selo — é o que mantém os * testes que renderizam a linha sozinha, e a lista que não oferece a ação. * * A CHAMADA À ROTA NÃO MORA AQUI, e isso é de propósito. Vem por prop, como * o `automaticoDaOrg`: uma resposta por lista, não por linha — e, medido, a * linha é renderizada sem `QueryClientProvider` em vários testes do repo, o * que faria um `useQueryClient()` aqui dentro derrubar todos eles com "No * QueryClient set". Quem faz o `POST .../usable-for-rag` é a lista. */ onAlternarExemplo?: (id: string, enabled: boolean) => void; /** * Esta conversa tem uma menção PENDENTE para quem está olhando a lista * (#2372). Vem da lista (uma marca só, compartilhada) e não de hook por * linha, pela mesma razão do `automaticoDaOrg`. * * Ausente = sem marca, e é o default de todo teste que renderiza a linha * sozinha: o selo só aparece com `true` porque afirmar o contrário seria pior. */ mencionado?: boolean; } /** * A COR SAI DE QUEM MANDA, NÃO DO STATUS. * * O mapa anterior era por `conversations.status`, e o `bg-purple-500` de * `ai_handling` era a mesma mentira das abas em forma de cor: `ai_handling` é * escrito por UM caminho só em produção, então a bolinha do automático quase * nunca aparecia — enquanto o robô atendia a maior parte da lista — e, quando * aparecia, sobrevivia ao silêncio, porque o status não muda quando o atendente * cala o automático. * * As chaves são as de `Comando["quem"]`, ao lado de `ROTULO_DO_COMANDO`, pela * mesma razão que ele mora ali: a cor e a palavra dizem a mesma coisa e não * podem ser mantidas em arquivos diferentes. */ const COR_DO_COMANDO: Record = { humano: "bg-blue-500", automatico: "bg-purple-500", aguardando: "bg-amber-500", ninguem: "bg-muted-foreground/60", encerrada: "bg-muted-foreground/30", }; function initials(name: string | null | undefined, fallback: string): string { const v = (name ?? "").trim(); if (!v) return fallback.slice(0, 2).toUpperCase(); const parts = v.split(/\s+/).filter(Boolean); if (parts.length === 0) return fallback.slice(0, 2).toUpperCase(); if (parts.length === 1) return (parts[0] ?? "").slice(0, 2).toUpperCase(); const first = parts[0]?.[0] ?? ""; const last = parts[parts.length - 1]?.[0] ?? ""; return (first + last).toUpperCase(); } /** * "Aguardando há 5 min" — desde quando o cliente ESPERA. * * A régua é `esperaDaConversa`, a mesma `awaiting_since` que ordena a Fila * (#990): `last_inbound_at` é a ÚLTIMA mensagem do cliente, então a pílula de * quem insistia voltava para "há 1 min" a cada mensagem dele — o tempo na linha * contradizia a posição do lado e a ordem da lista. O fallback segue sendo a * criação, para a conversa que nunca recebeu mensagem. */ function waitingLabel( conversation: ConversationWithContact, t: (texto: string) => string = (texto) => texto, locale: Locale, ): string { // O texto mora em `rotuloDaEspera`, ao lado da régua (`esperaDaConversa`): // enquanto ele era escrito aqui, privado, a pílula só podia ser provada // renderizando a linha inteira — e a #990 ficou sem teste vermelho por isso. return rotuloDaEspera(esperaDaConversa(conversation), new Date(), t, locale); } export function ConversationListItem({ conversation, isSelected, onSelect, queuePosition, mostrarCanal, mostrarAtendente, mostrarAutomatico = true, automaticoDaOrg, selecionado = false, onAlternarSelecao, onAlternarExemplo, mencionado = false, }: Props) { const localeDaData = useLocaleDeData(); const t = useT(); const c = conversation.contacts ?? null; const displayName = rotuloParaAEquipe(c, t); const phoneFallback = c?.phone_number ? phoneForDisplay(c.phone_number) : "??"; const tags = c?.tags ?? []; const visibleTags = tags.slice(0, 2); const overflow = tags.length - visibleTags.length; const hiddenTags = tags.slice(2); const preview = conversation.last_message_preview?.trim() || t("Sem mensagens"); const truncated = preview.length > 60 ? `${preview.slice(0, 60)}…` : preview; const naFila = queuePosition !== undefined; /** * A HORA DO CANTO RESPONDE À MESMA PERGUNTA QUE ORDENA A LISTA. * * Na Fila a lista sai por TEMPO DE ESPERA (`ORDEM_DA_ESPERA`: `awaiting_since` * crescente — a mensagem mais antiga sem resposta, #990), mas a hora do canto era * sempre a da última mensagem de QUALQUER lado. Bastava o atendente responder para o número daquela linha pular para * agora sem que a linha saísse do lugar: lida de cima para baixo, a coluna de * horas saía fora de ordem (#464 — "a lista parece aleatória") embaixo de uma * lista que estava certa. * * Fora da Fila a ordem é por atividade recente, e aí a última mensagem de * qualquer lado É a resposta certa — a régua do relógio segue a régua da lista. * * A origem é a MESMA da pílula "Aguardando há…" (`waitingLabel`), inclusive no * fallback: duas respostas para o mesmo "desde quando?" na mesma linha, a 40px * de distância, seriam a próxima divergência. */ const horaDaOrdem = naFila ? esperaDaConversa(conversation) : conversation.last_message_at; const time = relativeTime(horaDaOrdem, localeDaData); const unread = conversation.unread_count_for_assignee ?? 0; /** * Quem manda, pela MESMA regra do cabeçalho. * * `status === 'ai_handling'` era um proxy ruim e foi medido: o único escritor * desse status em produção é o botão "Devolver ao automático", então o ícone de * robô aparecia só em conversa que já tinha sido escalada E devolvida — nunca * na que o automático atendeu do começo ao fim, que é a maioria. */ const { comando } = comandoDaConversa({ status: conversation.status, assigned_to_user_id: conversation.assigned_to_user_id, assigned_to_user_name: conversation.assigned_to_user_name ?? null, assignee_kind: conversation.assignee_kind ?? null, bot_silenced_until: conversation.bot_silenced_until ?? null, last_handoff_reason: conversation.last_handoff_reason ?? null, force_human: c?.force_human ?? null, is_blocked: c?.is_blocked ?? null, is_group: conversation.is_group ?? false, automaticoDaOrg, // O fato por NÚMERO (#4012) vem no próprio registro — nada de uma consulta // por linha. Ausente em cache antigo, e aí a regra cai no org-wide. automaticoDaConversa: conversation.automatico_da_conversa ?? undefined, }); const isAi = comando.quem === "automatico"; const dot = COR_DO_COMANDO[comando.quem] ?? COR_DO_COMANDO.ninguem; // A cor sozinha não se explica: quem não decorou a tabela perguntava o que // cada bolinha queria dizer. A palavra é a de ROTULO_DO_COMANDO, o rótulo que // o produto já define para cada estado, no passar do mouse e no leitor de // tela — antes ela era `aria-hidden`. // // Encerrada vence `humano` só na PALAVRA. Fechar não solta o dono // (`fn_service_status`), e `comandoDaConversa` segue dizendo `humano` para // nomear quem atendeu — a cor acompanha isso e fica como estava. Mas escrever // "Em atendimento" numa conversa fechada afirmaria no presente um atendimento // que acabou. const rotuloDoComando = t( STATUS_ENCERRADOS.has(conversation.status) ? ROTULO_DO_COMANDO.encerrada : (ROTULO_DO_COMANDO[comando.quem] ?? ROTULO_DO_COMANDO.ninguem), ); // QUEM MANDA ESTA CONVERSA — o número DA EMPRESA por onde ela chegou, não o // do cliente. Com dois canais é o que decide o tom da resposta e qual número // a pessoa vê respondendo. // // #2383: quando o canal tem nome ou número, o texto é o MESMO do card da tela // de canais (`/app/connections`), com o nome amigável na frente — antes o // número vencia o nome, e um canal chamado "Peças" saía na lista como o // número cru. Sem canal associado (grupo, conversa sem sessão, não-WA) e sem // nome E sem número o badge continua não existindo, como estava. const canal = conversation.channel_sessions ?? null; const rotuloCanal = rotuloDoCanalDaConversa(canal, t); /** * A CONVERSA MARCADA COMO EXEMPLO PARA O AGENTE (#3006). * * `usable_for_rag` é a coluna que a rota `usable-for-rag` liga; quem a traz * para cá é o `SELECT_COLS` da lista. Os dois rótulos são literais `t()` * separados — a cerca de espanhol cobra chave por chave, e uma escolha * ternária dentro do `t()` ficaria invisível para ela. */ const exemploMarcado = Boolean(conversation.usable_for_rag); const rotuloExemplo = exemploMarcado ? t("Deixar de usar como exemplo") : t("Usar como exemplo para a IA"); const temSelos = visibleTags.length > 0 || exemploMarcado || (mostrarAtendente && comando.quem === "humano") || (mostrarCanal && rotuloCanal != null) || Boolean(c?.is_blocked) || Boolean(c?.is_anonymized); return (
{/* A CAIXA DE SELEÇÃO (#2484, F1) — fora do botão da linha, de propósito: controle interativo dentro de ` )} {/* O CONTROLE DE "EXEMPLO PARA A IA" (#3006) fica FORA do botão da linha, como a caixa de seleção logo acima e pelo mesmo motivo: controle interativo dentro de ` )}
); }