@chatwoot/agent-react-components 4.2.0-beta.1 → 4.2.0-dev.0b56add844
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 +69 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
# Chatwoot React Components
|
|
2
|
+
|
|
3
|
+
React components for embedding Chatwoot messaging interface with Vue Web Components under the hood.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @chatwoot/agent-react-components
|
|
9
|
+
# or
|
|
10
|
+
yarn add @chatwoot/agent-react-components
|
|
11
|
+
# or
|
|
12
|
+
pnpm add @chatwoot/agent-react-components
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
### Basic MessageList Integration
|
|
18
|
+
|
|
19
|
+
```jsx
|
|
20
|
+
import React from 'react';
|
|
21
|
+
import { ChatwootProvider, ChatwootConversation } from '@chatwoot/agent-react-components';
|
|
22
|
+
import '@chatwoot/agent-react-components/style.css';
|
|
23
|
+
|
|
24
|
+
function App() {
|
|
25
|
+
return (
|
|
26
|
+
<ChatwootProvider
|
|
27
|
+
baseURL="https://your-chatwoot-instance.com"
|
|
28
|
+
accountId="123"
|
|
29
|
+
conversationId={123}
|
|
30
|
+
userToken="your-auth-token"
|
|
31
|
+
websocketURL="wss://your-chatwoot-instance.com"
|
|
32
|
+
pubsubToken="your-pubsub-token"
|
|
33
|
+
>
|
|
34
|
+
<ChatwootConversation />
|
|
35
|
+
</ChatwootProvider>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Components
|
|
41
|
+
|
|
42
|
+
### ChatwootProvider
|
|
43
|
+
|
|
44
|
+
Root provider component that manages global configuration and initialization.
|
|
45
|
+
|
|
46
|
+
**Props:**
|
|
47
|
+
- `baseURL` (string, required): Your Chatwoot instance URL
|
|
48
|
+
- `accountId` (string|number, required): account identifier
|
|
49
|
+
- `userToken` (string, required): Authentication token
|
|
50
|
+
- `conversationId` (number, required): ID of the conversation to display
|
|
51
|
+
- `websocketURL` (string, optional): WebSocket endpoint, defaults to baseURL/cable
|
|
52
|
+
- `pubsubToken` (string, optional): PubSub token, defaults to userToken
|
|
53
|
+
|
|
54
|
+
### ChatwootConversation
|
|
55
|
+
|
|
56
|
+
Component that renders a specific conversation interface.
|
|
57
|
+
|
|
58
|
+
### useChatwoot
|
|
59
|
+
|
|
60
|
+
Hook to access the Chatwoot configuration within a ChatwootProvider.
|
|
61
|
+
|
|
62
|
+
```jsx
|
|
63
|
+
import { useChatwoot } from '@chatwoot/agent-react-components';
|
|
64
|
+
|
|
65
|
+
function MyComponent() {
|
|
66
|
+
const { baseURL, userId, userToken } = useChatwoot();
|
|
67
|
+
// Use configuration as needed
|
|
68
|
+
}
|
|
69
|
+
```
|
package/package.json
CHANGED