@realtimexsco/live-chat 1.3.0 → 1.3.1
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 +194 -13
- package/dist/index.cjs +227 -61
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +78 -10
- package/dist/index.d.ts +78 -10
- package/dist/index.mjs +227 -62
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -60,19 +60,20 @@ Socket.IO client, REST API client, Zustand store, Radix UI, emoji picker, and al
|
|
|
60
60
|
17. [All component slots + examples](#all-component-slots--examples)
|
|
61
61
|
18. [All classNames keys](#all-classnames-keys)
|
|
62
62
|
19. [Wrapping package defaults (`packageDefaultComponents`)](#wrapping-package-defaults-packagedefaultcomponents)
|
|
63
|
-
20. [
|
|
64
|
-
21. [
|
|
65
|
-
22. [
|
|
66
|
-
23. [
|
|
67
|
-
24. [
|
|
68
|
-
25. [
|
|
69
|
-
26. [
|
|
70
|
-
27. [
|
|
71
|
-
28. [
|
|
72
|
-
29. [
|
|
73
|
-
30. [
|
|
74
|
-
31. [
|
|
75
|
-
32. [
|
|
63
|
+
20. [API query params](#api-query-params)
|
|
64
|
+
21. [ChatMain props reference](#chatmain-props-reference)
|
|
65
|
+
22. [Chat provider (composable mode)](#chat-provider-composable-mode)
|
|
66
|
+
23. [Hooks & store](#hooks--store)
|
|
67
|
+
24. [React (Vite) — full setup](#react-vite--full-setup)
|
|
68
|
+
25. [Next.js — full setup](#nextjs--full-setup)
|
|
69
|
+
26. [Environment variables](#environment-variables)
|
|
70
|
+
27. [Dev proxy (CORS)](#dev-proxy-cors)
|
|
71
|
+
28. [Architecture](#architecture)
|
|
72
|
+
29. [All exports](#all-exports)
|
|
73
|
+
30. [Troubleshooting](#troubleshooting)
|
|
74
|
+
31. [Setup checklist](#setup-checklist)
|
|
75
|
+
32. [Package development (maintainers)](#package-development-maintainers)
|
|
76
|
+
33. [License](#license)
|
|
76
77
|
|
|
77
78
|
---
|
|
78
79
|
|
|
@@ -1164,6 +1165,166 @@ Also exported for reference:
|
|
|
1164
1165
|
|
|
1165
1166
|
---
|
|
1166
1167
|
|
|
1168
|
+
## API query params
|
|
1169
|
+
|
|
1170
|
+
Pass extra query string params from your app into package HTTP requests. Params are merged in the axios interceptor (built-in params like `limit` / `page` / `conversationId` still win if they conflict).
|
|
1171
|
+
|
|
1172
|
+
**Default behavior:** `queryParams` apply to **all GET APIs** only (`queryParamApis` defaults to `['get']`). Login, create group, and other POST/PATCH calls are **not** affected unless you opt in with `queryParamApis={['all']}`.
|
|
1173
|
+
|
|
1174
|
+
---
|
|
1175
|
+
|
|
1176
|
+
### 1. Default — same params on every GET API
|
|
1177
|
+
|
|
1178
|
+
**When to use:** Your app needs the same filter (e.g. `branchId`) on every list/fetch GET call inside the chat package.
|
|
1179
|
+
|
|
1180
|
+
**Explanation:** You only pass `queryParams`. You do **not** need `queryParamApis` — it defaults to `['get']`, so every GET endpoint below receives these params. POST/PATCH stay clean.
|
|
1181
|
+
|
|
1182
|
+
```tsx
|
|
1183
|
+
<ChatMain
|
|
1184
|
+
{...chatConfig}
|
|
1185
|
+
queryParams={{ branchId: "12" }}
|
|
1186
|
+
// queryParamApis default = ['get']
|
|
1187
|
+
/>
|
|
1188
|
+
```
|
|
1189
|
+
|
|
1190
|
+
**What happens on the network:**
|
|
1191
|
+
|
|
1192
|
+
| Request | Query string |
|
|
1193
|
+
|---------|----------------|
|
|
1194
|
+
| `GET /user/list` | `?branchId=12` |
|
|
1195
|
+
| `GET /conversation/list` | `?limit=20&page=1&branchId=12` |
|
|
1196
|
+
| `GET /message/get-all-from-conversation` | `?conversationId=…&limit=…&branchId=12` |
|
|
1197
|
+
| `GET …/pinned-messages` | `?conversationId=…&branchId=12` |
|
|
1198
|
+
| `POST /user/login/client-user` | *(no extra query params)* |
|
|
1199
|
+
|
|
1200
|
+
**GET APIs covered by default (`CHAT_GET_API_KEYS`):**
|
|
1201
|
+
|
|
1202
|
+
| Key | Endpoint |
|
|
1203
|
+
|-----|----------|
|
|
1204
|
+
| `users` | `GET /user/list` |
|
|
1205
|
+
| `conversations` | `GET /conversation/list` |
|
|
1206
|
+
| `conversationInfo` | `GET /conversation/get/information/:id` |
|
|
1207
|
+
| `messages` | `GET /message/get-all-from-conversation` |
|
|
1208
|
+
| `pinnedMessages` | `GET message/pinned-messages` |
|
|
1209
|
+
| `starredMessages` | `GET message/starred-messages` |
|
|
1210
|
+
| `searchMessages` | `GET /message/search-messages` |
|
|
1211
|
+
| `searchMessagesContext` | `GET /message/searched-message/context` |
|
|
1212
|
+
|
|
1213
|
+
```tsx
|
|
1214
|
+
import { CHAT_GET_API_KEYS, CHAT_API_KEYS } from "@realtimexsco/live-chat";
|
|
1215
|
+
```
|
|
1216
|
+
|
|
1217
|
+
---
|
|
1218
|
+
|
|
1219
|
+
### 2. Different params per GET API
|
|
1220
|
+
|
|
1221
|
+
**When to use:** Each endpoint needs its own query keys (e.g. conversations need `branchId`, messages need `locale`, users need `orgId`).
|
|
1222
|
+
|
|
1223
|
+
**Explanation:** Use `queryParamsByApi` with named API keys. Only the APIs you list get params — and each can have a different object. You do not need `queryParams` or `queryParamApis` for this pattern.
|
|
1224
|
+
|
|
1225
|
+
```tsx
|
|
1226
|
+
<ChatMain
|
|
1227
|
+
{...chatConfig}
|
|
1228
|
+
queryParamsByApi={{
|
|
1229
|
+
conversations: { branchId: "12" },
|
|
1230
|
+
messages: { locale: "en" },
|
|
1231
|
+
users: { orgId: "x" },
|
|
1232
|
+
}}
|
|
1233
|
+
/>
|
|
1234
|
+
```
|
|
1235
|
+
|
|
1236
|
+
**What happens on the network:**
|
|
1237
|
+
|
|
1238
|
+
| Request | Query string |
|
|
1239
|
+
|---------|----------------|
|
|
1240
|
+
| `GET /conversation/list` | `?…&branchId=12` |
|
|
1241
|
+
| `GET /message/get-all-from-conversation` | `?…&locale=en` |
|
|
1242
|
+
| `GET /user/list` | `?orgId=x` |
|
|
1243
|
+
| Other GET APIs (not listed) | *(no extra params from this prop)* |
|
|
1244
|
+
|
|
1245
|
+
---
|
|
1246
|
+
|
|
1247
|
+
### 3. Only one GET API
|
|
1248
|
+
|
|
1249
|
+
**When to use:** You want shared-style `queryParams`, but only on a single endpoint (e.g. conversation list), not on messages or users.
|
|
1250
|
+
|
|
1251
|
+
**Explanation:** Pass `queryParams` for the values, and restrict with `queryParamApis={['conversations']}`. Other GET APIs will not receive `branchId`.
|
|
1252
|
+
|
|
1253
|
+
```tsx
|
|
1254
|
+
<ChatMain
|
|
1255
|
+
{...chatConfig}
|
|
1256
|
+
queryParams={{ branchId: "12" }}
|
|
1257
|
+
queryParamApis={["conversations"]}
|
|
1258
|
+
/>
|
|
1259
|
+
```
|
|
1260
|
+
|
|
1261
|
+
**What happens on the network:**
|
|
1262
|
+
|
|
1263
|
+
| Request | Query string |
|
|
1264
|
+
|---------|----------------|
|
|
1265
|
+
| `GET /conversation/list` | `?limit=20&page=1&branchId=12` |
|
|
1266
|
+
| `GET /message/get-all-from-conversation` | *(no `branchId`)* |
|
|
1267
|
+
| `GET /user/list` | *(no `branchId`)* |
|
|
1268
|
+
|
|
1269
|
+
You can also target multiple selected GETs:
|
|
1270
|
+
|
|
1271
|
+
```tsx
|
|
1272
|
+
<ChatMain
|
|
1273
|
+
{...chatConfig}
|
|
1274
|
+
queryParams={{ orgId: "x" }}
|
|
1275
|
+
queryParamApis={["messages", "users"]}
|
|
1276
|
+
/>
|
|
1277
|
+
```
|
|
1278
|
+
|
|
1279
|
+
---
|
|
1280
|
+
|
|
1281
|
+
### Bonus: shared + per-API together
|
|
1282
|
+
|
|
1283
|
+
**Explanation:** Shared params apply to the APIs in `queryParamApis`. Per-API params from `queryParamsByApi` merge on top for that endpoint.
|
|
1284
|
+
|
|
1285
|
+
```tsx
|
|
1286
|
+
<ChatMain
|
|
1287
|
+
{...chatConfig}
|
|
1288
|
+
queryParams={{ tenant: "abc" }}
|
|
1289
|
+
queryParamApis={["conversations", "messages"]}
|
|
1290
|
+
queryParamsByApi={{
|
|
1291
|
+
conversations: { branchId: "12" },
|
|
1292
|
+
messages: { locale: "en" },
|
|
1293
|
+
}}
|
|
1294
|
+
/>
|
|
1295
|
+
```
|
|
1296
|
+
|
|
1297
|
+
- conversations → `?tenant=abc&branchId=12`
|
|
1298
|
+
- messages → `?tenant=abc&locale=en`
|
|
1299
|
+
|
|
1300
|
+
---
|
|
1301
|
+
|
|
1302
|
+
### `queryParamApis` options
|
|
1303
|
+
|
|
1304
|
+
| Value | Meaning |
|
|
1305
|
+
|-------|---------|
|
|
1306
|
+
| `['get']` | **Default.** All GET endpoints in the table above |
|
|
1307
|
+
| `['all']` | Every `apiClient` request (GET + POST + PATCH) |
|
|
1308
|
+
| Specific keys | Only those endpoints (e.g. `['conversations']`) |
|
|
1309
|
+
|
|
1310
|
+
### Imperative helpers
|
|
1311
|
+
|
|
1312
|
+
```tsx
|
|
1313
|
+
import {
|
|
1314
|
+
setChatQueryParams,
|
|
1315
|
+
setChatQueryParamApis,
|
|
1316
|
+
setChatQueryParamsByApi,
|
|
1317
|
+
} from "@realtimexsco/live-chat";
|
|
1318
|
+
|
|
1319
|
+
setChatQueryParams({ branchId: "12" });
|
|
1320
|
+
setChatQueryParamApis(["conversations"]);
|
|
1321
|
+
setChatQueryParamsByApi({ messages: { locale: "en" } });
|
|
1322
|
+
```
|
|
1323
|
+
|
|
1324
|
+
Socket connection query and S3 presigned uploads are **not** changed by these props.
|
|
1325
|
+
|
|
1326
|
+
---
|
|
1327
|
+
|
|
1167
1328
|
## ChatMain props reference
|
|
1168
1329
|
|
|
1169
1330
|
| Prop | Type | Default | Description |
|
|
@@ -1173,6 +1334,9 @@ Also exported for reference:
|
|
|
1173
1334
|
| `loggedUserDetails` | `object` | — | **Required.** `{ _id, name, email }` — `_id` must match JWT |
|
|
1174
1335
|
| `apiUrl` | `string` | — | **Required.** REST API ending with `/api/v1` (pass from your env/config) |
|
|
1175
1336
|
| `socketUrl` | `string` | derived | Optional socket host (no `/api/v1`). Defaults to `apiUrl` without `/api/v1` |
|
|
1337
|
+
| `queryParams` | `Record<string, string \| number \| boolean>` | — | Shared query params for selected APIs (see `queryParamApis`) |
|
|
1338
|
+
| `queryParamApis` | `ChatApiKey[]` | `['get']` | Which APIs receive `queryParams`. Default = all GET endpoints |
|
|
1339
|
+
| `queryParamsByApi` | `ChatQueryParamsByApi` | — | Different query params per API key |
|
|
1176
1340
|
| `viewportHeight` | `"full" \| "screen" \| string` | `"full"` | Chat root height. Use `"screen"` for full page, or `"calc(100dvh - 4rem)"` below fixed header |
|
|
1177
1341
|
| `viewportClassName` | `string` | — | Extra classes on the built-in viewport wrapper |
|
|
1178
1342
|
| `colorMode` | `"light" \| "dark"` | — | Controlled light/dark (use with your app theme) |
|
|
@@ -1247,6 +1411,9 @@ export default function ChatPage() {
|
|
|
1247
1411
|
| `loggedUserDetails` | `object` | Yes | User profile |
|
|
1248
1412
|
| `apiUrl` | `string` | No | REST base URL |
|
|
1249
1413
|
| `socketUrl` | `string` | No | Socket host |
|
|
1414
|
+
| `queryParams` | `ChatQueryParams` | No | Shared query params (default target: all GET APIs) |
|
|
1415
|
+
| `queryParamApis` | `ChatApiKey[]` | No | Which APIs receive `queryParams` (default `['get']`) |
|
|
1416
|
+
| `queryParamsByApi` | `ChatQueryParamsByApi` | No | Per-API query params |
|
|
1250
1417
|
| `themeColor` | `string` | No | Accent color |
|
|
1251
1418
|
| `uiConfig` | `UIConfig` | No | `components`, `classNames`, `features` |
|
|
1252
1419
|
| `onMessageReceived` | `(msg) => void` | No | Background message callback |
|
|
@@ -1531,12 +1698,26 @@ import ChatMain, {
|
|
|
1531
1698
|
setChatClientId,
|
|
1532
1699
|
setChatAccessToken,
|
|
1533
1700
|
setChatBaseURL,
|
|
1701
|
+
setChatSocketUrl,
|
|
1702
|
+
setChatQueryParams,
|
|
1703
|
+
getChatQueryParams,
|
|
1704
|
+
setChatQueryParamApis,
|
|
1705
|
+
getChatQueryParamApis,
|
|
1706
|
+
setChatQueryParamsByApi,
|
|
1707
|
+
getChatQueryParamsByApi,
|
|
1708
|
+
CHAT_API_KEYS,
|
|
1709
|
+
CHAT_GET_API_KEYS,
|
|
1710
|
+
resolveChatApiKey,
|
|
1534
1711
|
socketService,
|
|
1535
1712
|
getSocketConfig,
|
|
1536
1713
|
showNotification,
|
|
1537
1714
|
downloadFile,
|
|
1538
1715
|
|
|
1539
1716
|
// ── Types ──
|
|
1717
|
+
type ChatApiKey,
|
|
1718
|
+
type ChatGetApiKey,
|
|
1719
|
+
type ChatQueryParams,
|
|
1720
|
+
type ChatQueryParamsByApi,
|
|
1540
1721
|
type ChatComponents,
|
|
1541
1722
|
type ChatClassNames,
|
|
1542
1723
|
type ChatFeatures,
|