@bootdesk/js-web-adapter-react

React components for BootDesk Chat SDK — drop-in chat widget with i18n, file uploads, push notifications, card rendering, and iframe embedding.

Install

npm install @bootdesk/js-web-adapter-react @bootdesk/js-web-adapter-core
Copy

Peer dependencies: react, marked, dompurify.

Quick Start

import { ChatWidget, ChatProvider } from "@bootdesk/js-web-adapter-react";
import { WebChatClient } from "@bootdesk/js-web-adapter-core";

const client = new WebChatClient({ baseUrl: "/api/chat", token });

function App() {
  return (
    <ChatProvider client={client}>
      <ChatWidget />
    </ChatProvider>
  );
}
Copy

Components

Component	Description
ChatWidget	Floating/fullscreen/embedded chat UI
Header	Chat header with connection status, fullscreen, close
MessageList	Message groups with reactions, timestamps, auto-scroll
MessageContent	Renders text (markdown), cards, and attachments
InputArea	Text input with send, attachments toggle, auto-resize
TypingIndicator	Animated typing dots
FloatingButton	FAB with badge count

Hooks

Hook	Description
useChatClient(client)	Connect/disconnect lifecycle
useMessages(client)	Message list, send, edit, delete, reactions
useStreaming(client)	Streaming message chunks
useTyping(client)	Typing indicator subscription
useAttachmentUpload(config)	File upload with progress
usePushNotifications(config)	Web Push API subscription

i18n

<ChatWidget locale="pt-BR" />
// or with overrides:
<ChatWidget locale={{ locale: "en", overrides: { chatWidget: { title: "Support" } } }} />
Copy

Built-in: en, en-US, en-GB, pt, pt-BR, pt-PT, es.

Cards

The card system renders platform-agnostic PHPCard objects (sections, fields, actions, tables, link buttons, images). Custom renderers:

<CardProvider renderers={{ "my-card": MyCardRenderer }}>
  <ChatWidget client={client} />
</CardProvider>
Copy

Pre-Entry Screen

Show a custom form (name, email, verification code, etc.) before the conversation starts. The developer controls all logic — validation, API calls, waiting for user confirmation. Call start(config?) when ready, and the widget reconfigures the client and transitions to normal chat.

<ChatWidget
  client={client}
  preEntry={({ start }) => (
    <PreEntryForm onReady={(data) => {
      start({ userId: data.id, userName: data.name, verifyToken: data.token });
    }} />
  )}
/>
Copy

The config passed to start() is forwarded to client.reconfigure(), which updates userId, userName, verifyToken, conversationId, and custom headers. Messages only begin loading after start() is called.

Theming

Set CSS variables on your root element:

:root {
  --chat-primary: #007bff;
  --chat-background: #ffffff;
  --chat-text: #1a1a1a;
  --chat-border: #e0e0e0;
  --chat-surface: #f5f5f5;
}
Copy

Iframe Embedding

The @bootdesk/chat-widget-bridge package enables embedding in an iframe with parent-page config (title, locale, theme) and message forwarding.

License

MIT