MockWhatsApp

Simula interface de conversa WhatsApp Business. Perfeito para demos de agentes de atendimento.

Visão Geral

O MockWhatsApp reproduz fielmente a interface do WhatsApp, incluindo bolhas de mensagem, status de leitura e badge de agente AI. Ideal para demonstrar agentes de atendimento ao cliente.

Importação

import { MockWhatsApp, demoWhatsAppMessages } from '@/components/linear/mock-whatsapp'

Props

Prop	Tipo	Default	Descrição
`contactName`	`string`	—	Nome do contato
`contactAvatar`	`string`	—	Avatar (emoji ou texto)
`contactStatus`	`string`	`'online'`	Status do contato
`messages`	`WhatsAppMessage[]`	—	Lista de mensagens
`className`	`string`	—	Classes adicionais

WhatsAppMessage

interface WhatsAppMessage {
  id: string;
  type: 'sent' | 'received';
  content: string;
  time: string;
  status?: 'sent' | 'delivered' | 'read';  // Apenas para sent
  isAgent?: boolean;  // Exibe badge "kodda AI"
}

Uso Básico

<MockWhatsApp
  contactName="Julia"
  contactStatus="online"
  messages={demoWhatsAppMessages}
  className="h-96"
/>

Dados de Demo

export const demoWhatsAppMessages: WhatsAppMessage[] = [
  {
    id: '1',
    type: 'sent',
    isAgent: true,
    content: `Oi Julia! Tudo bem?

Amanda não poderá vir hoje (Caixa 3).
Você está de folga mas tem 8h de banco.

Pode cobrir das 10h às 18h?
Valor: R$ 145 + transporte`,
    time: '06:45',
    status: 'delivered',
  },
  {
    id: '2',
    type: 'received',
    content: 'Opa, posso sim! Chego às 10h certinho.',
    time: '06:48',
  },
  // ...
]

Features Visuais

Badge de Agente

Mensagens com isAgent: true exibem um badge "kodda AI" com gradiente roxo:

{
  id: '1',
  type: 'sent',
  isAgent: true,  // Mostra badge
  content: 'Mensagem do agente...',
  time: '06:45',
}

Status de Leitura

Para mensagens enviadas (type: 'sent'), o status mostra os checks característicos:

sent — 1 check cinza
delivered — 2 checks cinza
read — 2 checks azuis

{
  type: 'sent',
  status: 'read',  // Checks azuis
  content: '...',
  time: '06:45',
}

Background Autêntico

O chat usa o padrão de fundo característico do WhatsApp dark mode, com cor #0b141a e pattern sutil.

Exemplo Completo

import { MockWhatsApp } from '@/components/linear/mock-whatsapp'

const messages = [
  {
    id: '1',
    type: 'sent' as const,
    isAgent: true,
    content: 'Olá! Sou o assistente da Loja Centro. Como posso ajudar?',
    time: '10:30',
    status: 'read' as const,
  },
  {
    id: '2',
    type: 'received' as const,
    content: 'Quero saber o horário de funcionamento',
    time: '10:31',
  },
  {
    id: '3',
    type: 'sent' as const,
    isAgent: true,
    content: `Funcionamos de segunda a sábado:
- Seg a Sex: 8h às 22h
- Sábado: 8h às 20h
- Domingo: Fechado

Posso ajudar com mais alguma coisa?`,
    time: '10:31',
    status: 'delivered' as const,
  },
]

export function Demo() {
  return (
    <MockWhatsApp
      contactName="Cliente"
      contactStatus="online"
      messages={messages}
      className="h-[500px] max-w-sm"
    />
  )
}

Com BentoCard

<BentoCard
  title="Atendimento WhatsApp"
  description="Agente responde clientes 24/7"
  number="FIG 0.3"
>
  <MockWhatsApp
    contactName="Maria"
    messages={demoWhatsAppMessages}
    className="h-72"
  />
</BentoCard>

On this page