ai-chat-client

Componentes React reutilizáveis para construir experiências de chat com aparência semelhante ao WhatsApp. O pacote exporta componentes, ícones, contexto de estado e tipos utilitários, oferecendo uma base pronta para conectar a qualquer fonte de dados.

Instalação

npm install ai-chat-client
# ou
yarn add ai-chat-client

Peer dependencies: react e react-dom (>= 18). Certifique-se de que já existam no seu projeto.

Uso Rápido

// App.tsx
import "ai-chat-client/styles.css" // opcional, fornece o estilo padrão pronto
import { ChatProvider, ChatWindow, Sidebar } from "ai-chat-client"

export default function App() {
  return (
    <ChatProvider>
      <div className="app">
        <Sidebar />
        <ChatWindow />
      </div>
    </ChatProvider>
  )
}

• ChatProvider disponibiliza o estado mockado de chats e handlers (selectChat, sendMessage).
• Sidebar renderiza a lista de conversas e controla a seleção.
• ChatWindow mostra mensagens, cabeçalho e campo de envio.
• O CSS incluído define variáveis de cor, layout responsivo e estilos das bolhas e inputs.

Estilos

Os estilos podem ser importados diretamente no entry-point da aplicação: import "ai-chat-client/styles.css". Se preferir um design customizado, copie o conteúdo de styles.css e ajuste conforme necessário.

Componentes Exportados

• Layout: ChatWindow, Sidebar, SingleChat (exemplo independente) e Header.
• Entrada e mensagens: MessageInput, MessageList.
• Acessórios: Avatar, ChatListItem, ícones (AttachIcon, BackIcon, EmojiIcon, SearchIcon, SendIcon).
• Contexto: ChatProvider, useChat.
• Tipos: ChatThread, ChatMessage, ChatSender, ChatContextValue.

Construindo Manualmente

npm install
npm run build

O comando gera dist/ com bundles ESM (index.mjs), CJS (index.cjs) e declarações TypeScript (index.d.ts), além do arquivo styles.css prontos para publicação no npm.

Exemplo Next.js

Este repositório inclui um exemplo em example/ que consome a biblioteca localmente. Para rodá-lo:

cd example
npm install
npm run dev

O app usará o pacote diretamente do diretório raiz (file:..) para facilitar testes durante o desenvolvimento.