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

``bash
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

`tsx
// 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 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

`bash
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:

`bash
cd example
npm install
npm run dev
`

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