virtus-desk-chat-react

Componente React e hook para incorporar o widget de chat da VirtusDesk na sua aplicação.

Instalação

npm install virtus-desk-chat-react

Peer dependencies: React 18+

Como usar

ChatWidget (pronto pra usar)

Adicione o widget na sua aplicação e ele cuida de tudo — autenticação, histórico de conversas e mensagens em tempo real.

import { ChatWidget } from 'virtus-desk-chat-react'

export default function App() {
  return (
    <>
      {/* sua aplicação */}
      <ChatWidget productId="seu-product-id" />
    </>
  )
}

useChat (headless)

Use o hook diretamente se quiser construir sua própria interface.

import { useChat } from 'virtus-desk-chat-react'

function MeuChat() {
  const { state } = useChat({ productId: 'seu-product-id' })

  return (
    <div>
      {state.messages.map(msg => (
        <p key={msg.id}>{msg.content}</p>
      ))}
    </div>
  )
}

Props

ChatWidget

| Prop | Tipo | Obrigatório | Descrição | | ----------- | -------- | ----------- | -------------------------------------- | | productId | string | Sim | Identificador do seu produto VirtusDesk |

useChat(config)

| Campo | Tipo | Obrigatório | Descrição | | ------------ | -------- | ----------- | -------------------------------------- | | productId | string | Sim | Identificador do seu produto VirtusDesk |

Retorna um objeto ChatState com o estado atual do chat.

Tipos

type SenderType = 1 | 2 | 3                    // 1=Cliente, 2=Agente, 3=Sistema
type ConversationStatus = 0 | 1 | 2 | 3 | 4   // Pendente, Aguardando, Ativo, Fechado, AguardandoCliente

interface Message {
  id: string
  conversationId: string
  content: string
  senderType: SenderType
  senderId: string | null
  senderName: string
  sentAt: string
  isRead: boolean
}

interface ChatConfig {
  productId: string
}

Licença

MIT