MockCustomerChat

Chat de atendimento ao cliente com suporte a agente AI, humano e transferência. Inclui métricas de performance.

Visão Geral

O MockCustomerChat simula um chat de atendimento ao cliente, suportando mensagens de clientes, agentes AI e humanos. Ideal para demonstrar como agentes podem atender e transferir para humanos quando necessário.

Importação

import { MockCustomerChat, demoCustomerChatData } from '@/components/linear/mock-customer-chat'

Props

Prop	Tipo	Default	Descrição
`customerName`	`string`	`'Cliente'`	Nome do cliente
`agentName`	`string`	`'kodda AI'`	Nome do agente
`messages`	`ChatMessage[]`	—	Lista de mensagens
`stats`	`Stats`	—	Métricas de performance
`className`	`string`	—	Classes adicionais

ChatMessage

interface ChatMessage {
  id: string;
  type: 'customer' | 'agent' | 'system';
  content: string;
  time: string;
  agentName?: string;   // Para agentes humanos
  isAI?: boolean;       // Mostra badge "AI"
}

Stats

interface Stats {
  responseTime: string;      // Ex: "3 segundos"
  resolutionRate: string;    // Ex: "78%"
}

Uso Básico

<MockCustomerChat
  {...demoCustomerChatData}
  className="h-[500px]"
/>

Dados de Demo

O demo mostra um fluxo completo:

Cliente pede segunda via de boleto
AI encontra contrato e envia boleto
Cliente pede informações do contrato
AI responde com detalhes
Cliente quer negociar renovação
Sistema transfere para humano (Marina)
Agente humano continua atendimento

Tipos de Mensagem

Cliente (`type: 'customer'`)

Alinhado à direita
Background primary
Borda arredondada com ponta no canto direito

Agente AI (`type: 'agent', isAI: true`)

Avatar com estrela
Badge "AI"
Nome "kodda AI"

Agente Humano (`type: 'agent', isAI: false`)

Avatar com inicial
Nome customizado via agentName

Sistema (`type: 'system'`)

Centralizado
Badge arredondado
Usado para transferências

Features Visuais

Ícone de chat com badge online verde
Status "Agente disponível 24/7"
Botões de ação (expandir, menu)

Tempo de resposta
Taxa de resolução sem humano
Link "Falar com humano"

Avatar AI

Gradiente primary
Ícone de estrela
Badge "AI" ao lado do nome

Exemplo Customizado

import { MockCustomerChat } from '@/components/linear/mock-customer-chat'

const data = {
  messages: [
    {
      id: '1',
      type: 'customer' as const,
      content: 'Qual o prazo de entrega?',
      time: '10:00',
    },
    {
      id: '2',
      type: 'agent' as const,
      isAI: true,
      content: `Para sua região (SP-Capital):

• Compras até 14h: Entrega no mesmo dia
• Após 14h: Entrega no próximo dia útil

Frete grátis para compras acima de R$ 200.`,
      time: '10:00',
    },
  ],
  stats: {
    responseTime: '2 segundos',
    resolutionRate: '85%',
  },
}

export function Demo() {
  return <MockCustomerChat {...data} className="h-80" />
}

Com BentoCard

<BentoCard
  title="Atendimento AI"
  description="Respostas instantâneas com escalação inteligente"
  colSpan={2}
>
  <MockCustomerChat {...demoCustomerChatData} />
</BentoCard>