open-index/open-npm huggingface dataset:
npm package: @saulo.martins/chat
Description: React chat component with API integration, persistence and i18n
Latest version: 1.2.2

# chat

React chat component with API integration, conversation persistence (localStorage), and built-in i18n. Use with [chat.api](https://github.com/saulommartins/chat.api) or any API that implements the same contract.

## Install

```bash
npm install chat
# or from Git
npm install git+ssh://git@github.com:saulommartins/chat.git
```

**Peer dependencies:** `react`, `react-dom` (>=17).  
**Styling:** The component uses Tailwind CSS classes. Ensure your project uses Tailwind (or include the chat styles in your build).

## Usage

```tsx
import { Chat } from 'chat';

function App() {
  return (
    <Chat
      apiBaseUrl="https://your-api.com"
      locale="pt-BR"
      theme="dark"
      embedded={false}
    />
  );
}
```

### Props (ChatConfig)

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `apiBaseUrl` | string | **required** | Base URL of the chat API. Must expose `POST /api/chat` and `GET /api/chat/:conversationId`. |
| `storageKey` | string | `'chat_conversation_id'` | localStorage key used to persist the conversation id (so refresh keeps the thread). |
| `locale` | string | `'en'` | Locale for built-in translations: `pt-BR`, `en`, `pt`, `fr`. |
| `translations` | Partial\<ChatTranslations\> | — | Override specific translation keys (or provide all). Overrides `locale`. |
| `theme` | `'light' \| 'dark'` | `'dark'` if embedded, else `'light'` | UI theme. |
| `embedded` | boolean | `false` | If `true`, renders a compact widget layout (e.g. floating chat). |

### Custom translations

```tsx
import { Chat, getTranslations } from 'chat';

// Override only some keys
<Chat
  apiBaseUrl="https://api.example.com"
  translations={{
    title: 'Suporte',
    placeholder: 'Mensagem...',
  }}
/>

// Or pass a full object (e.g. from your i18n)
<Chat apiBaseUrl="..." translations={myChatTranslations} />
```

### Embed as widget

```tsx
<Chat
  apiBaseUrl="https://api.example.com"
  embedded
  theme="dark"
/>
```

## API contract

The component expects the backend to:

- **POST /api/chat** — Body: `{ message: string, conversationId?: string }`. Response: `{ conversationId: string, reply: string }` (or `message`). On error: `{ error: string }`.
- **GET /api/chat/:conversationId** — Response: `{ conversationId: string, messages: Array<{ role: string, content: string }> }`.

## Repo

<https://github.com/saulommartins/chat>