cometchat-visual-builder-no-code 1.0.10-test26 → 1.0.10-test28
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 +62 -231
- package/dist/assets/svg/Copy.4d5c5370c2badfa4ec72.svg +5 -0
- package/dist/assets/svg/right-arrow.d430f526b3249ce1e4c9.svg +3 -0
- package/dist/assets/svg/send-message.fa7501d52cb01566a038.svg +3 -0
- package/dist/assets/svg/stop-message.394e6adf2af527d6b219.svg +3 -0
- package/dist/main.js +1 -1
- package/dist/main.js.LICENSE.txt +9 -0
- package/dist/src/CometChat/CometChatSettings.d.ts +6 -1
- package/dist/src/CometChat/context/CometChatContext.d.ts +19 -14
- package/dist/src/CometChat/customHook/useThemeStyles.d.ts +2 -0
- package/dist/src/CometChatNoCode/CometChatApi.d.ts +1 -0
- package/dist/src/CometChatNoCode/components/AIAgentView/AIAgentView.d.ts +6 -0
- package/package.json +8 -7
package/README.md
CHANGED
|
@@ -1,249 +1,80 @@
|
|
|
1
1
|
<p align="center">
|
|
2
2
|
<img alt="CometChat" src="https://assets.cometchat.io/website/images/logos/banner.png">
|
|
3
3
|
</p>
|
|
4
|
-
|
|
5
4
|
<p>
|
|
6
|
-
<img alt="version" src="https://img.shields.io/badge/version-v1.0.
|
|
5
|
+
<img alt="version" src="https://img.shields.io/badge/version-v1.0.0-blue" />
|
|
7
6
|
<img alt="status" src="https://img.shields.io/badge/status-stable-brightgreen" />
|
|
8
|
-
<img alt="react" src="https://img.shields.io/badge/react-supported-61DAFB?logo=react" />
|
|
9
|
-
<img alt="vite" src="https://img.shields.io/badge/vite-supported-646CFF?logo=vite" />
|
|
10
|
-
<img alt="typescript" src="https://img.shields.io/badge/typescript-supported-blue" />
|
|
11
7
|
</p>
|
|
8
|
+
# CometChat Chat Builder Widget Integration Guide
|
|
12
9
|
|
|
13
|
-
# Integration steps for Chat Builder
|
|
14
|
-
|
|
15
|
-
Follow these steps to integrate it into your existing React project:
|
|
16
10
|
|
|
17
|
-
|
|
11
|
+
### 1. Register on CometChat & Gather Your Keys
|
|
18
12
|
|
|
19
|
-
|
|
13
|
+
Before you begin, sign up at the CometChat Dashboard and create a new app. Copy:
|
|
14
|
+
- App ID
|
|
15
|
+
- Region
|
|
16
|
+
- Auth Key
|
|
20
17
|
|
|
21
|
-
|
|
18
|
+
### 2. Include the Chat-Embed Script in `<head>`
|
|
22
19
|
|
|
23
|
-
|
|
24
|
-
npm install @cometchat/chat-uikit-react@6.0.7 @cometchat/calls-sdk-javascript
|
|
25
|
-
```
|
|
20
|
+
Add this inside the <head> section of your HTML file to load the CometChat bundle:
|
|
26
21
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
Copy the `cometchat-app-react/src/CometChat` folder into your project’s `src` directory.
|
|
30
|
-
|
|
31
|
-
## 3. Initialize CometChat UI Kit
|
|
32
|
-
|
|
33
|
-
The initialization process varies depending on your setup. Select your framework:
|
|
34
|
-
|
|
35
|
-
<details>
|
|
36
|
-
<summary>CRA</summary>
|
|
37
|
-
|
|
38
|
-
Open the file `src/index.tsx` and update it to include the required imports and initialization logic.
|
|
39
|
-
|
|
40
|
-
```typescript
|
|
41
|
-
import React from "react";
|
|
42
|
-
import ReactDOM from "react-dom/client";
|
|
43
|
-
import App from "./App";
|
|
44
|
-
import {
|
|
45
|
-
UIKitSettingsBuilder,
|
|
46
|
-
CometChatUIKit,
|
|
47
|
-
} from "@cometchat/chat-uikit-react";
|
|
48
|
-
import { setupLocalization } from "./CometChat/utils/utils";
|
|
49
|
-
import { CometChatProvider } from "./CometChat/context/CometChatContext";
|
|
50
|
-
|
|
51
|
-
export const COMETCHAT_CONSTANTS = {
|
|
52
|
-
APP_ID: "", // Replace with your App ID
|
|
53
|
-
REGION: "", // Replace with your App Region
|
|
54
|
-
AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
const uiKitSettings = new UIKitSettingsBuilder()
|
|
58
|
-
.setAppId(COMETCHAT_CONSTANTS.APP_ID)
|
|
59
|
-
.setRegion(COMETCHAT_CONSTANTS.REGION)
|
|
60
|
-
.setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
|
|
61
|
-
.subscribePresenceForAllUsers()
|
|
62
|
-
.build();
|
|
63
|
-
|
|
64
|
-
CometChatUIKit.init(uiKitSettings)?.then(() => {
|
|
65
|
-
setupLocalization();
|
|
66
|
-
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
|
67
|
-
<CometChatProvider>
|
|
68
|
-
<App />
|
|
69
|
-
</CometChatProvider>
|
|
70
|
-
);
|
|
71
|
-
});
|
|
22
|
+
```html
|
|
23
|
+
<script defer src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@latest/dist/main.js"></script>
|
|
72
24
|
```
|
|
73
25
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
.
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
})
|
|
26
|
+
### 3. Embed & Initialize the Widget in `<body>`
|
|
27
|
+
|
|
28
|
+
Paste the following just before the closing </body> tag:
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<div id="cometChatMount"></div>
|
|
32
|
+
|
|
33
|
+
<script>
|
|
34
|
+
const COMETCHAT_CREDENTIALS = {
|
|
35
|
+
appID: "<YOUR_APP_ID>",
|
|
36
|
+
appRegion: "<YOUR_APP_REGION>",
|
|
37
|
+
authKey: "<YOUR_AUTH_KEY>",
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
const COMETCHAT_LAUNCH_OPTIONS = {
|
|
41
|
+
targetElementID: "cometChatMount", // Element ID to mount the widget
|
|
42
|
+
isDocked: true, // true = floating bubble, false = embedded
|
|
43
|
+
width: "700px", // Widget width
|
|
44
|
+
height: "500px", // Widget height
|
|
45
|
+
|
|
46
|
+
// Optional advanced settings:
|
|
47
|
+
// variantID: "YOUR_VARIANT_ID", // Variant configuration ID
|
|
48
|
+
// chatType: "user", // "user" or "group"
|
|
49
|
+
// defaultChatID: "uid_or_guid", // UID or GUID to open chat by default
|
|
50
|
+
// dockedAlignment: "right", // For docked mode: "left" or "right"
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
const COMETCHAT_USER_UID = "UID"; // Replace with your actual user UID
|
|
54
|
+
|
|
55
|
+
window.addEventListener("DOMContentLoaded", () => {
|
|
56
|
+
CometChatApp.init(COMETCHAT_CREDENTIALS)
|
|
57
|
+
.then(() => {
|
|
58
|
+
console.log("[CometChat] Initialized successfully");
|
|
59
|
+
return CometChatApp.login({ uid: COMETCHAT_USER_UID });
|
|
60
|
+
})
|
|
61
|
+
.then(user => {
|
|
62
|
+
console.log("[CometChat] Logged in as:", user);
|
|
63
|
+
return CometChatApp.launch(COMETCHAT_LAUNCH_OPTIONS);
|
|
64
|
+
})
|
|
65
|
+
.then(() => {
|
|
66
|
+
console.log("[CometChat] Chat launched!");
|
|
67
|
+
})
|
|
68
|
+
.catch(error => {
|
|
69
|
+
console.error("[CometChat] Error:", error);
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
</script>
|
|
113
73
|
```
|
|
114
74
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
## 4. User Login
|
|
118
|
-
|
|
119
|
-
Refer to the [User Login Guide](https://www.cometchat.com/docs/ui-kit/react/react-js-integration#step-4-user-login) to implement user authentication in your app.
|
|
120
|
-
|
|
121
|
-
## 5. Render CometChatApp Component
|
|
122
|
-
|
|
123
|
-
Add the `CometChatApp` component to your app:
|
|
124
|
-
|
|
125
|
-
```typescript
|
|
126
|
-
import CometChatApp from "./CometChat/CometChatApp";
|
|
127
|
-
|
|
128
|
-
const App = () => {
|
|
129
|
-
return (
|
|
130
|
-
/* The CometChatApp component requires a parent element with an explicit height and width
|
|
131
|
-
to render properly. Ensure the container has defined dimensions, and adjust them as needed
|
|
132
|
-
based on your layout requirements. */
|
|
133
|
-
<div style={{ width: "100vw", height: "100dvh" }}>
|
|
134
|
-
<CometChatApp />
|
|
135
|
-
</div>
|
|
136
|
-
);
|
|
137
|
-
};
|
|
138
|
-
|
|
139
|
-
export default App;
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
### Note:
|
|
143
|
-
|
|
144
|
-
Use the `CometChatApp` component to launch a chat interface with a selected user or group.
|
|
145
|
-
|
|
146
|
-
```typescript
|
|
147
|
-
import { useEffect, useState } from "react";
|
|
148
|
-
import { CometChat } from "@cometchat/chat-sdk-javascript";
|
|
149
|
-
import CometChatApp from "./CometChat/CometChatApp";
|
|
150
|
-
|
|
151
|
-
const App = () => {
|
|
152
|
-
const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(
|
|
153
|
-
undefined
|
|
154
|
-
);
|
|
155
|
-
const [selectedGroup, setSelectedGroup] = useState<
|
|
156
|
-
CometChat.Group | undefined
|
|
157
|
-
>(undefined);
|
|
158
|
-
|
|
159
|
-
useEffect(() => {
|
|
160
|
-
const UID = "UID"; // Replace with your User ID
|
|
161
|
-
CometChat.getUser(UID).then(setSelectedUser).catch(console.error);
|
|
162
|
-
|
|
163
|
-
const GUID = "GUID"; // Replace with your Group ID
|
|
164
|
-
CometChat.getGroup(GUID).then(setSelectedGroup).catch(console.error);
|
|
165
|
-
}, []);
|
|
166
|
-
|
|
167
|
-
return (
|
|
168
|
-
/* CometChatApp requires a parent with explicit height & width to render correctly.
|
|
169
|
-
Adjust the height and width as needed.
|
|
170
|
-
*/
|
|
171
|
-
<div style={{ width: "100vw", height: "100vh" }}>
|
|
172
|
-
<CometChatApp user={selectedUser} group={selectedGroup} />
|
|
173
|
-
</div>
|
|
174
|
-
);
|
|
175
|
-
};
|
|
176
|
-
|
|
177
|
-
export default App;
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
This implementation applies when you choose the **Without Sidebar** option for Sidebar.
|
|
181
|
-
|
|
182
|
-
- If `chatType` is `user` (default), only User chats will be displayed (either the selected user or the default user).
|
|
183
|
-
- If `chatType` is `group`, only Group chats will be displayed (either the selected group or the default group).
|
|
75
|
+
Replace `<YOUR_APP_ID>`, `<YOUR_APP_REGION>`, `<YOUR_AUTH_KEY>`, and `COMETCHAT_USER_UID` with your actual credentials and user ID.
|
|
184
76
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
Finally, start your app using the appropriate command based on your setup:
|
|
188
|
-
|
|
189
|
-
- Vite
|
|
190
|
-
|
|
191
|
-
```bash
|
|
192
|
-
npm run dev
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
- Create React App (CRA):
|
|
196
|
-
|
|
197
|
-
```bash
|
|
198
|
-
npm start
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
## Note:
|
|
202
|
-
|
|
203
|
-
Enable the following features in the Dashboard in your App under Chat > Features to ensure full functionality.
|
|
204
|
-
|
|
205
|
-
> Mentions, Reactions, Message translation, Polls, Collaborative whiteboard, Collaborative document, Emojis, Stickers, Conversation starter, Conversation summary, Smart reply.
|
|
206
|
-
|
|
207
|
-
---
|
|
208
|
-
|
|
209
|
-
If you face any issues while integrating the builder in your app project, please check if you have the following configurations added to your `tsConfig.json`:
|
|
210
|
-
|
|
211
|
-
```json
|
|
212
|
-
{
|
|
213
|
-
"compilerOptions": {
|
|
214
|
-
"jsx": "react-jsx",
|
|
215
|
-
"resolveJsonModule": true
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
```
|
|
77
|
+
### 4. Documentation & Advanced Configuration
|
|
219
78
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
## Run the Chat Builder App Independently (optional)
|
|
223
|
-
|
|
224
|
-
>
|
|
225
|
-
>
|
|
226
|
-
> 1. Open the `cometchat-app-react` folder.
|
|
227
|
-
> 2. Add credentials for your app in `src/index.tsx` (`src/main.tsx` incase for Vite):
|
|
228
|
-
>
|
|
229
|
-
> ```typescript
|
|
230
|
-
> export const COMETCHAT_CONSTANTS = {
|
|
231
|
-
> APP_ID: "", // Replace with your App ID
|
|
232
|
-
> REGION: "", // Replace with your App Region
|
|
233
|
-
> AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
|
|
234
|
-
> };
|
|
235
|
-
> ```
|
|
236
|
-
>
|
|
237
|
-
> 3. Install dependencies:
|
|
238
|
-
>
|
|
239
|
-
> ```bash
|
|
240
|
-
> npm i
|
|
241
|
-
> ```
|
|
242
|
-
>
|
|
243
|
-
> 4. Run the app:
|
|
244
|
-
>
|
|
245
|
-
> ```bash
|
|
246
|
-
> npm start
|
|
247
|
-
> ```
|
|
248
|
-
|
|
249
|
-
For detailed steps, refer to our <a href="https://www.cometchat.com/docs/ui-kit/react/builder-integration" target="_blank">Chat Builder documentation</a>
|
|
79
|
+
For detailed information on configuration options, advanced features, and troubleshooting, refer to
|
|
80
|
+
[CometChat Widget Builder Guide](https://www.cometchat.com/docs/widget/builder-guide-html) .
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="Base_Icon">
|
|
3
|
+
<path id="Vector" d="M7.92188 18.6641C7.49471 18.6641 7.12404 18.5069 6.80988 18.1926C6.49554 17.8784 6.33838 17.5077 6.33838 17.0806V3.74731C6.33838 3.32015 6.49554 2.94948 6.80988 2.63531C7.12404 2.32115 7.49471 2.16406 7.92188 2.16406H18.2551C18.6823 2.16406 19.053 2.32115 19.3671 2.63531C19.6813 2.94948 19.8384 3.32015 19.8384 3.74731V17.0806C19.8384 17.5077 19.6813 17.8784 19.3671 18.1926C19.053 18.5069 18.6823 18.6641 18.2551 18.6641H7.92188ZM7.92188 17.0806H18.2551V3.74731H7.92188V17.0806ZM4.75513 21.8306C4.32796 21.8306 3.95729 21.6735 3.64313 21.3593C3.32896 21.0451 3.17188 20.6745 3.17188 20.2473V6.11806C3.17188 5.90223 3.24921 5.71706 3.40387 5.56256C3.55854 5.4079 3.74604 5.33056 3.96638 5.33056C4.18671 5.33056 4.37321 5.4079 4.52588 5.56256C4.67871 5.71706 4.75513 5.90223 4.75513 6.11806V20.2473H15.8844C16.1002 20.2473 16.2854 20.3249 16.4399 20.4801C16.5945 20.6352 16.6719 20.8211 16.6719 21.0378C16.6719 21.2608 16.5945 21.4487 16.4399 21.6016C16.2854 21.7542 16.1002 21.8306 15.8844 21.8306H4.75513Z" fill="#A1A1A1"/>
|
|
4
|
+
</g>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M2 5.2C2 4.0799 2 3.51984 2.21799 3.09202C2.40973 2.71569 2.71569 2.40973 3.09202 2.21799C3.51984 2 4.0799 2 5.2 2H10.8C11.9201 2 12.4802 2 12.908 2.21799C13.2843 2.40973 13.5903 2.71569 13.782 3.09202C14 3.51984 14 4.0799 14 5.2V10.8C14 11.9201 14 12.4802 13.782 12.908C13.5903 13.2843 13.2843 13.5903 12.908 13.782C12.4802 14 11.9201 14 10.8 14H5.2C4.0799 14 3.51984 14 3.09202 13.782C2.71569 13.5903 2.40973 13.2843 2.21799 12.908C2 12.4802 2 11.9201 2 10.8V5.2Z" fill="white"/>
|
|
3
|
+
</svg>
|