chat

React chat component with API integration, conversation persistence (localStorage), and built-in i18n. Use with chat.api or any API that implements the same contract.

Install

npm install chat
# or from Git
npm install git+ssh://[email protected]: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

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

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

<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