MockChat

Simula thread de chat estilo Slack, Teams ou Discord. Ideal para demonstrar integrações de agentes AI.

Visão Geral

O MockChat simula uma thread de chat corporativo, suportando visual de Slack, Teams ou Discord. Perfeito para demonstrar como agentes kodda interagem em canais de comunicação.

Importação

import { MockChat, demoMessages } from '@/components/linear/mock-chat'

Props

Prop	Tipo	Default	Descrição
`platform`	`'slack' \| 'teams' \| 'discord' \| 'custom'`	`'slack'`	Plataforma visual
`channelName`	`string`	—	Nome do canal/thread
`messages`	`ChatMessage[]`	—	Lista de mensagens
`inputPlaceholder`	`string`	`'Message...'`	Placeholder do input
`showInput`	`boolean`	`true`	Exibir campo de input
`inputValue`	`string`	—	Valor do input (demos)
`className`	`string`	—	Classes adicionais

ChatMessage

interface ChatMessage {
  id: string;
  author: {
    name: string;
    avatar?: string;  // Emoji ou letra
    color?: string;   // Cor do avatar
  };
  content: string;
  time?: string;
  highlight?: boolean;  // Destaca a mensagem
}

Uso Básico

<MockChat
  platform="slack"
  channelName="operacoes"
  messages={demoMessages}
  className="h-80"
/>

Dados de Demo

O componente exporta demoMessages pronto para uso:

export const demoMessages: ChatMessage[] = [
  {
    id: '1',
    author: { name: 'kodda', color: '#5B5BD6' },
    content: 'Amanda (Caixa 3) registrou falta para hoje...',
    time: '06:45',
  },
  {
    id: '2',
    author: { name: 'sandra', color: '#E5484D' },
    content: 'Quem são as opções?',
    time: '06:46',
  },
  // ...
]

Customização

Plataformas

// Slack (padrão)
<MockChat platform="slack" channelName="alerts" messages={msgs} />

// Microsoft Teams
<MockChat platform="teams" channelName="Equipe Vendas" messages={msgs} />

// Discord
<MockChat platform="discord" channelName="suporte" messages={msgs} />

// Sem ícone de plataforma
<MockChat platform="custom" channelName="Chat" messages={msgs} />

Mensagens com Destaque

Use highlight: true para destacar mensagens importantes (respostas do agente):

const messages = [
  {
    id: '1',
    author: { name: 'kodda', color: '#5B5BD6' },
    content: 'Encontrei 3 opções de fornecedor...',
    highlight: true,  // Texto em foreground ao invés de muted
  }
]

Cores de Avatar

const messages = [
  {
    id: '1',
    author: {
      name: 'kodda',
      color: '#5B5BD6',  // kodda blue
    },
    content: '...'
  },
  {
    id: '2',
    author: {
      name: 'maria',
      color: '#E5484D',  // Vermelho
      avatar: 'M',       // Letra customizada
    },
    content: '...'
  }
]

Exemplo com BentoCard

import { BentoCard } from '@/components/linear/bento-grid'
import { MockChat, demoMessages } from '@/components/linear/mock-chat'

<BentoCard
  title="Integração Slack"
  description="Agente responde diretamente nos canais da equipe"
  colSpan={2}
>
  <MockChat
    platform="slack"
    channelName="operacoes"
    messages={demoMessages}
    className="h-64"
  />
</BentoCard>

On this page