@bootdesk/js-web-adapter-react 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +93 -0
- package/dist/index.cjs +2536 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +395 -0
- package/dist/index.d.ts +395 -0
- package/dist/index.js +2466 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +1 -0
- package/package.json +64 -0
package/README.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# @bootdesk/js-web-adapter-react
|
|
2
|
+
|
|
3
|
+
React components for BootDesk Chat SDK — drop-in chat widget with i18n, file uploads, push notifications, card rendering, and iframe embedding.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @bootdesk/js-web-adapter-react @bootdesk/js-web-adapter-core
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Peer dependencies: `react`, `marked`, `dompurify`.
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { ChatWidget, ChatProvider } from "@bootdesk/js-web-adapter-react";
|
|
17
|
+
import { WebChatClient } from "@bootdesk/js-web-adapter-core";
|
|
18
|
+
|
|
19
|
+
const client = new WebChatClient({ baseUrl: "/api/chat", token });
|
|
20
|
+
|
|
21
|
+
function App() {
|
|
22
|
+
return (
|
|
23
|
+
<ChatProvider client={client}>
|
|
24
|
+
<ChatWidget />
|
|
25
|
+
</ChatProvider>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Components
|
|
31
|
+
|
|
32
|
+
| Component | Description |
|
|
33
|
+
|-----------|-------------|
|
|
34
|
+
| `ChatWidget` | Floating/fullscreen/embedded chat UI |
|
|
35
|
+
| `Header` | Chat header with connection status, fullscreen, close |
|
|
36
|
+
| `MessageList` | Message groups with reactions, timestamps, auto-scroll |
|
|
37
|
+
| `MessageContent` | Renders text (markdown), cards, and attachments |
|
|
38
|
+
| `InputArea` | Text input with send, attachments toggle, auto-resize |
|
|
39
|
+
| `TypingIndicator` | Animated typing dots |
|
|
40
|
+
| `FloatingButton` | FAB with badge count |
|
|
41
|
+
|
|
42
|
+
## Hooks
|
|
43
|
+
|
|
44
|
+
| Hook | Description |
|
|
45
|
+
|------|-------------|
|
|
46
|
+
| `useChatClient(client)` | Connect/disconnect lifecycle |
|
|
47
|
+
| `useMessages(client)` | Message list, send, edit, delete, reactions |
|
|
48
|
+
| `useStreaming(client)` | Streaming message chunks |
|
|
49
|
+
| `useTyping(client)` | Typing indicator subscription |
|
|
50
|
+
| `useAttachmentUpload(config)` | File upload with progress |
|
|
51
|
+
| `usePushNotifications(config)` | Web Push API subscription |
|
|
52
|
+
|
|
53
|
+
## i18n
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
<ChatWidget locale="pt-BR" />
|
|
57
|
+
// or with overrides:
|
|
58
|
+
<ChatWidget locale={{ locale: "en", overrides: { chatWidget: { title: "Support" } } }} />
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Built-in: `en`, `en-US`, `en-GB`, `pt`, `pt-BR`, `pt-PT`, `es`.
|
|
62
|
+
|
|
63
|
+
## Cards
|
|
64
|
+
|
|
65
|
+
The card system renders platform-agnostic `PHPCard` objects (sections, fields, actions, tables, link buttons, images). Custom renderers:
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
<CardProvider renderers={{ "my-card": MyCardRenderer }}>
|
|
69
|
+
<ChatWidget client={client} />
|
|
70
|
+
</CardProvider>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Theming
|
|
74
|
+
|
|
75
|
+
Set CSS variables on your root element:
|
|
76
|
+
|
|
77
|
+
```css
|
|
78
|
+
:root {
|
|
79
|
+
--chat-primary: #007bff;
|
|
80
|
+
--chat-background: #ffffff;
|
|
81
|
+
--chat-text: #1a1a1a;
|
|
82
|
+
--chat-border: #e0e0e0;
|
|
83
|
+
--chat-surface: #f5f5f5;
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Iframe Embedding
|
|
88
|
+
|
|
89
|
+
The `@bootdesk/chat-widget-bridge` package enables embedding in an iframe with parent-page config (title, locale, theme) and message forwarding.
|
|
90
|
+
|
|
91
|
+
## License
|
|
92
|
+
|
|
93
|
+
MIT
|