@botonic/webchat-react 2.23.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/CHANGELOG.md +269 -0
- package/README.md +236 -0
- package/index.d.ts +81 -0
- package/index.js +46 -0
- package/lib/components/message/audio-message/audio-message.d.ts +20 -0
- package/lib/components/message/audio-message/index.d.ts +1 -0
- package/lib/components/message/button-message/button-message.d.ts +24 -0
- package/lib/components/message/button-message/index.d.ts +1 -0
- package/lib/components/message/carousel-message/carousel-message.d.ts +18 -0
- package/lib/components/message/carousel-message/index.d.ts +1 -0
- package/lib/components/message/document-message/document-message.d.ts +22 -0
- package/lib/components/message/document-message/index.d.ts +1 -0
- package/lib/components/message/image-message/image-message.d.ts +14 -0
- package/lib/components/message/image-message/index.d.ts +1 -0
- package/lib/components/message/index.d.ts +33 -0
- package/lib/components/message/location-message/index.d.ts +1 -0
- package/lib/components/message/location-message/location-message.d.ts +16 -0
- package/lib/components/message/message/index.d.ts +5 -0
- package/lib/components/message/message/message-avatar/index.d.ts +1 -0
- package/lib/components/message/message/message-avatar/message-avatar.d.ts +24 -0
- package/lib/components/message/message/message-bubble/index.d.ts +1 -0
- package/lib/components/message/message/message-bubble/message-bubble.d.ts +17 -0
- package/lib/components/message/message/message-info/index.d.ts +1 -0
- package/lib/components/message/message/message-info/message-info.d.ts +25 -0
- package/lib/components/message/message/message.d.ts +23 -0
- package/lib/components/message/message/use-message.d.ts +43 -0
- package/lib/components/message/text-message/index.d.ts +1 -0
- package/lib/components/message/text-message/text-message.d.ts +10 -0
- package/lib/components/message/video-message/index.d.ts +1 -0
- package/lib/components/message/video-message/video-message.d.ts +20 -0
- package/lib/components/message-machine-renderer/index.d.ts +3 -0
- package/lib/components/message-machine-renderer/message-machine-renderer.d.ts +28 -0
- package/lib/components/message-machine-renderer/use-avatar.d.ts +34 -0
- package/lib/components/message-machine-renderer/use-message-machine-renderer.d.ts +31 -0
- package/lib/components/shared/button-component/button-component.d.ts +24 -0
- package/lib/components/shared/button-component/index.d.ts +2 -0
- package/lib/components/shared/index.d.ts +2 -0
- package/lib/components/typing-indicator/index.d.ts +1 -0
- package/lib/components/typing-indicator/typing-indicator.d.ts +11 -0
- package/lib/components/webchat-app/index.d.ts +1 -0
- package/lib/components/webchat-app/webchat-app.d.ts +41 -0
- package/lib/components/webchat-container/use-webchat-container.d.ts +26 -0
- package/lib/components/webchat-container/webchat-container.d.ts +2 -0
- package/lib/components/webchat-header/use-webchat-header.d.ts +19 -0
- package/lib/components/webchat-header/webchat-header.d.ts +2 -0
- package/lib/components/webchat-input/use-webchat-input.d.ts +31 -0
- package/lib/components/webchat-input/webchat-input.d.ts +2 -0
- package/lib/components/webchat-messages/use-webchat-messages.d.ts +54 -0
- package/lib/components/webchat-messages/webchat-messages.d.ts +2 -0
- package/lib/components/webchat-overlay/base/confirm-modal/confirm-modal.d.ts +8 -0
- package/lib/components/webchat-overlay/base/confirm-modal/index.d.ts +2 -0
- package/lib/components/webchat-overlay/base/content/content.d.ts +9 -0
- package/lib/components/webchat-overlay/base/content/index.d.ts +2 -0
- package/lib/components/webchat-overlay/base/header/header.d.ts +4 -0
- package/lib/components/webchat-overlay/base/header/index.d.ts +3 -0
- package/lib/components/webchat-overlay/base/header/use-header.d.ts +13 -0
- package/lib/components/webchat-overlay/base/index.d.ts +5 -0
- package/lib/components/webchat-overlay/base/overlay/index.d.ts +3 -0
- package/lib/components/webchat-overlay/base/overlay/overlay.d.ts +18 -0
- package/lib/components/webchat-overlay/base/overlay/use-overlay.d.ts +23 -0
- package/lib/components/webchat-overlay/base/overlay-context.d.ts +25 -0
- package/lib/components/webchat-overlay/cover/frame/cover-frame.d.ts +8 -0
- package/lib/components/webchat-overlay/cover/frame/index.d.ts +2 -0
- package/lib/components/webchat-overlay/cover/index.d.ts +1 -0
- package/lib/components/webchat-overlay/index.d.ts +3 -0
- package/lib/components/webchat-overlay/webview/frame/index.d.ts +2 -0
- package/lib/components/webchat-overlay/webview/frame/webview-frame.d.ts +8 -0
- package/lib/components/webchat-overlay/webview/index.d.ts +1 -0
- package/lib/components/webchat-provider/webchat-provider.d.ts +22 -0
- package/lib/components/webchat-trigger/use-webchat-trigger.d.ts +38 -0
- package/lib/components/webchat-trigger/webchat-trigger-error-boundary.d.ts +19 -0
- package/lib/components/webchat-trigger/webchat-trigger.d.ts +2 -0
- package/lib/hooks/use-webchat-state.d.ts +21 -0
- package/lib/types/primitives.d.ts +15 -0
- package/lib/types/webchat-props.d.ts +103 -0
- package/package.json +37 -0
- package/styles.css +466 -0
- package/trigger.d.ts +40 -0
- package/trigger.js +215 -0
- package/webchat-app-CtAHJapU.js +2285 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,269 @@
|
|
|
1
|
+
## 2.23.1 (2026-03-23)
|
|
2
|
+
|
|
3
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
4
|
+
|
|
5
|
+
## 2.22.1 (2026-03-19)
|
|
6
|
+
|
|
7
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
8
|
+
|
|
9
|
+
## 2.22.0 (2026-03-16)
|
|
10
|
+
|
|
11
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
12
|
+
|
|
13
|
+
## 2.21.0 (2026-03-16)
|
|
14
|
+
|
|
15
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
16
|
+
|
|
17
|
+
## 2.20.0 (2026-03-13)
|
|
18
|
+
|
|
19
|
+
### 🩹 Fixes
|
|
20
|
+
|
|
21
|
+
- **botonic:** prevent vite-plugin-dts from rewriting import paths in webchat-react ([#731](https://github.com/metis-ai/hubtype-product/pull/731))
|
|
22
|
+
|
|
23
|
+
### ❤️ Thank You
|
|
24
|
+
|
|
25
|
+
- David Hidalgo @Davidhidalgo
|
|
26
|
+
|
|
27
|
+
## 2.19.0 (2026-03-12)
|
|
28
|
+
|
|
29
|
+
### 🚀 Features
|
|
30
|
+
|
|
31
|
+
- **webchat-react:** gateway pattern + lilara unified Storybook #BLT-2210 ([#717](https://github.com/metis-ai/hubtype-product/pull/717))
|
|
32
|
+
|
|
33
|
+
### ❤️ Thank You
|
|
34
|
+
|
|
35
|
+
- David Hidalgo @Davidhidalgo
|
|
36
|
+
|
|
37
|
+
## 2.18.0 (2026-03-04)
|
|
38
|
+
|
|
39
|
+
### 🚀 Features
|
|
40
|
+
|
|
41
|
+
- **publishing:** package fixes, lilara rename & token/reset unification #BLT-2205 #BLT-2221 #BLT-2206 ([#701](https://github.com/metis-ai/hubtype-product/pull/701))
|
|
42
|
+
|
|
43
|
+
### ❤️ Thank You
|
|
44
|
+
|
|
45
|
+
- David Hidalgo @Davidhidalgo
|
|
46
|
+
|
|
47
|
+
## 2.17.0 (2026-03-02)
|
|
48
|
+
|
|
49
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
50
|
+
|
|
51
|
+
## 2.16.0 (2026-02-23)
|
|
52
|
+
|
|
53
|
+
### 🚀 Features
|
|
54
|
+
|
|
55
|
+
- **webchat-trigger:** Figma design tokens, animations, and theme overrides ([#679](https://github.com/metis-ai/hubtype-product/pull/679))
|
|
56
|
+
- **webchat:** lazy loading trigger with optimized bundle splitting ([#614](https://github.com/metis-ai/hubtype-product/pull/614))
|
|
57
|
+
|
|
58
|
+
### ❤️ Thank You
|
|
59
|
+
|
|
60
|
+
- David Hidalgo @Davidhidalgo
|
|
61
|
+
|
|
62
|
+
## 2.15.0 (2026-02-13)
|
|
63
|
+
|
|
64
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
65
|
+
|
|
66
|
+
## 2.14.0 (2026-02-05)
|
|
67
|
+
|
|
68
|
+
### 🚀 Features
|
|
69
|
+
|
|
70
|
+
- **botonic:** add E2E publish flow testing with Verdaccio ([#577](https://github.com/metis-ai/hubtype-product/pull/577))
|
|
71
|
+
|
|
72
|
+
### ❤️ Thank You
|
|
73
|
+
|
|
74
|
+
- Marc Rabat @vanbasten17
|
|
75
|
+
|
|
76
|
+
## 2.13.4 (2026-02-02)
|
|
77
|
+
|
|
78
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
79
|
+
|
|
80
|
+
## 2.13.3 (2026-01-30)
|
|
81
|
+
|
|
82
|
+
### 🩹 Fixes
|
|
83
|
+
|
|
84
|
+
- **botonic-publish:** wait for checks before publishing ([#574](https://github.com/metis-ai/hubtype-product/pull/574))
|
|
85
|
+
|
|
86
|
+
### ❤️ Thank You
|
|
87
|
+
|
|
88
|
+
- David Hidalgo @Davidhidalgo
|
|
89
|
+
|
|
90
|
+
## 2.13.2 (2026-01-30)
|
|
91
|
+
|
|
92
|
+
### 🩹 Fixes
|
|
93
|
+
|
|
94
|
+
- broken styles after publishing packages and use of them along with generator ([#571](https://github.com/metis-ai/hubtype-product/pull/571))
|
|
95
|
+
|
|
96
|
+
### ❤️ Thank You
|
|
97
|
+
|
|
98
|
+
- Marc Rabat @vanbasten17
|
|
99
|
+
|
|
100
|
+
## 2.13.1 (2026-01-30)
|
|
101
|
+
|
|
102
|
+
### 🩹 Fixes
|
|
103
|
+
|
|
104
|
+
- **webchat-react:** bundle CSS tokens in build output ([#568](https://github.com/metis-ai/hubtype-product/pull/568))
|
|
105
|
+
|
|
106
|
+
### ❤️ Thank You
|
|
107
|
+
|
|
108
|
+
- David Hidalgo @Davidhidalgo
|
|
109
|
+
|
|
110
|
+
## 2.13.0 (2026-01-29)
|
|
111
|
+
|
|
112
|
+
### 🚀 Features
|
|
113
|
+
|
|
114
|
+
- add generic overlay system for webviews and cover components ([#547](https://github.com/metis-ai/hubtype-product/pull/547))
|
|
115
|
+
|
|
116
|
+
### 🩹 Fixes
|
|
117
|
+
|
|
118
|
+
- switch to single bundled CSS file ([#564](https://github.com/metis-ai/hubtype-product/pull/564))
|
|
119
|
+
|
|
120
|
+
### ❤️ Thank You
|
|
121
|
+
|
|
122
|
+
- David Hidalgo @Davidhidalgo
|
|
123
|
+
- Marc Rabat @vanbasten17
|
|
124
|
+
|
|
125
|
+
## 2.12.0 (2026-01-28)
|
|
126
|
+
|
|
127
|
+
### 🚀 Features
|
|
128
|
+
|
|
129
|
+
- enhance post-build script and executor for .env file management ([#560](https://github.com/metis-ai/hubtype-product/pull/560))
|
|
130
|
+
|
|
131
|
+
### ❤️ Thank You
|
|
132
|
+
|
|
133
|
+
- David Hidalgo @Davidhidalgo
|
|
134
|
+
|
|
135
|
+
## 2.11.5 (2026-01-28)
|
|
136
|
+
|
|
137
|
+
### 🩹 Fixes
|
|
138
|
+
|
|
139
|
+
- add external dependencies to Vite config for webchat-react ([#557](https://github.com/metis-ai/hubtype-product/pull/557))
|
|
140
|
+
|
|
141
|
+
### ❤️ Thank You
|
|
142
|
+
|
|
143
|
+
- David Hidalgo @Davidhidalgo
|
|
144
|
+
|
|
145
|
+
## 2.11.4 (2026-01-28)
|
|
146
|
+
|
|
147
|
+
### 🩹 Fixes
|
|
148
|
+
|
|
149
|
+
- use vite instead tsc ([#555](https://github.com/metis-ai/hubtype-product/pull/555))
|
|
150
|
+
|
|
151
|
+
### ❤️ Thank You
|
|
152
|
+
|
|
153
|
+
- David Hidalgo @Davidhidalgo
|
|
154
|
+
|
|
155
|
+
## 2.11.3 (2026-01-28)
|
|
156
|
+
|
|
157
|
+
### 🩹 Fixes
|
|
158
|
+
|
|
159
|
+
- update entrypoints to use .js and .d.ts extensions for module and types ([#552](https://github.com/metis-ai/hubtype-product/pull/552))
|
|
160
|
+
|
|
161
|
+
### ❤️ Thank You
|
|
162
|
+
|
|
163
|
+
- David Hidalgo @Davidhidalgo
|
|
164
|
+
|
|
165
|
+
## 2.11.2 (2026-01-21)
|
|
166
|
+
|
|
167
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
168
|
+
|
|
169
|
+
## 2.11.1 (2026-01-21)
|
|
170
|
+
|
|
171
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
172
|
+
|
|
173
|
+
## 2.11.0 (2026-01-21)
|
|
174
|
+
|
|
175
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
176
|
+
|
|
177
|
+
## 2.10.1 (2026-01-19)
|
|
178
|
+
|
|
179
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
180
|
+
|
|
181
|
+
## 2.10.0 (2026-01-18)
|
|
182
|
+
|
|
183
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
184
|
+
|
|
185
|
+
## 2.9.1 (2026-01-17)
|
|
186
|
+
|
|
187
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
188
|
+
|
|
189
|
+
## 2.9.0 (2026-01-17)
|
|
190
|
+
|
|
191
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
192
|
+
|
|
193
|
+
## 2.8.1 (2026-01-16)
|
|
194
|
+
|
|
195
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
196
|
+
|
|
197
|
+
## 2.8.0 (2026-01-16)
|
|
198
|
+
|
|
199
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
200
|
+
|
|
201
|
+
## 2.7.1 (2026-01-16)
|
|
202
|
+
|
|
203
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
204
|
+
|
|
205
|
+
## 2.7.0 (2026-01-15)
|
|
206
|
+
|
|
207
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
208
|
+
|
|
209
|
+
## 2.6.0 (2025-12-09)
|
|
210
|
+
|
|
211
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
212
|
+
|
|
213
|
+
## 2.5.0 (2025-12-09)
|
|
214
|
+
|
|
215
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
216
|
+
|
|
217
|
+
## 2.4.1 (2025-12-08)
|
|
218
|
+
|
|
219
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
220
|
+
|
|
221
|
+
## 2.4.0 (2025-12-05)
|
|
222
|
+
|
|
223
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
224
|
+
|
|
225
|
+
## 2.3.3 (2025-12-04)
|
|
226
|
+
|
|
227
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
228
|
+
|
|
229
|
+
## 2.3.2 (2025-12-04)
|
|
230
|
+
|
|
231
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
232
|
+
|
|
233
|
+
## 2.3.1 (2025-12-04)
|
|
234
|
+
|
|
235
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
236
|
+
|
|
237
|
+
## 2.3.0 (2025-12-04)
|
|
238
|
+
|
|
239
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
240
|
+
|
|
241
|
+
## 2.2.1 (2025-12-04)
|
|
242
|
+
|
|
243
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
|
244
|
+
|
|
245
|
+
## 2.2.0 (2025-12-04)
|
|
246
|
+
|
|
247
|
+
### 🚀 Features
|
|
248
|
+
|
|
249
|
+
- implement locale detection and user data handling in webchat, refactor user-related methods for consistency #BLT-2045 ([#435](https://github.com/metis-ai/hubtype-product/pull/435))
|
|
250
|
+
- fine tuning botonic release #BLT-2010 ([#428](https://github.com/metis-ai/hubtype-product/pull/428))
|
|
251
|
+
|
|
252
|
+
### ❤️ Thank You
|
|
253
|
+
|
|
254
|
+
- David Hidalgo @Davidhidalgo
|
|
255
|
+
|
|
256
|
+
## 2.1.0 (2025-12-02)
|
|
257
|
+
|
|
258
|
+
### 🚀 Features
|
|
259
|
+
|
|
260
|
+
- implement locale detection and user data handling in webchat, refactor user-related methods for consistency #BLT-2045 ([#435](https://github.com/metis-ai/hubtype-product/pull/435))
|
|
261
|
+
- fine tuning botonic release #BLT-2010 ([#428](https://github.com/metis-ai/hubtype-product/pull/428))
|
|
262
|
+
|
|
263
|
+
### ❤️ Thank You
|
|
264
|
+
|
|
265
|
+
- David Hidalgo @Davidhidalgo
|
|
266
|
+
|
|
267
|
+
## 2.0.1-alpha.0 (2025-11-27)
|
|
268
|
+
|
|
269
|
+
This was a version bump only for @botonic/webchat-react to align it with other projects, there were no code changes.
|
package/README.md
ADDED
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
# @botonic/webchat-react
|
|
2
|
+
|
|
3
|
+
React components and styles for Botonic webchat UIs, using CSS modules and **class-variance-authority** (CVA). Part of the **current** `@botonic/*` line.
|
|
4
|
+
|
|
5
|
+
## Source and versions
|
|
6
|
+
|
|
7
|
+
| Line | npm | Source |
|
|
8
|
+
| ----------- | ----- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
9
|
+
| **Legacy** | `0.x` | [github.com/hubtype/botonic](https://github.com/hubtype/botonic) |
|
|
10
|
+
| **Current** | `2.x` | [github.com/hubtype/hubtype-product](https://github.com/hubtype/hubtype-product) · [`libs/botonic/webchat-react`](https://github.com/hubtype/hubtype-product/tree/main/libs/botonic/webchat-react) |
|
|
11
|
+
|
|
12
|
+
Use the **same major version** as `@botonic/core` and related packages.
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
pnpm add @botonic/webchat-react
|
|
18
|
+
# or
|
|
19
|
+
npm install @botonic/webchat-react
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Dependencies
|
|
23
|
+
|
|
24
|
+
This package requires:
|
|
25
|
+
|
|
26
|
+
- `class-variance-authority` for conditional styling
|
|
27
|
+
- `react-aria` for accessibility patterns
|
|
28
|
+
|
|
29
|
+
## Usage
|
|
30
|
+
|
|
31
|
+
### Basic Setup
|
|
32
|
+
|
|
33
|
+
Import the library styles in your CSS or JavaScript:
|
|
34
|
+
|
|
35
|
+
```css
|
|
36
|
+
/* In your CSS file (recommended) */
|
|
37
|
+
@import '@botonic/webchat-react/styles.css';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
// Or in your JavaScript/TypeScript file
|
|
42
|
+
import '@botonic/webchat-react/styles.css'
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
This is the standard pattern used by CSS libraries like Tailwind, Bootstrap, etc.
|
|
46
|
+
|
|
47
|
+
### Components
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
import { WebchatProvider, WebchatContainer, WebchatHeader, WebchatMessages, WebchatInput, WebchatTrigger } from '@botonic/webchat-react'
|
|
51
|
+
|
|
52
|
+
function App() {
|
|
53
|
+
return (
|
|
54
|
+
<WebchatProvider>
|
|
55
|
+
{/* Trigger button - positioned fixed */}
|
|
56
|
+
<WebchatTrigger position='bottom-right' />
|
|
57
|
+
|
|
58
|
+
{/* Container - automatically positioned relative to trigger */}
|
|
59
|
+
<WebchatContainer layout='default' size='normal' position='bottom-right'>
|
|
60
|
+
<WebchatHeader title='Customer Support' subtitle="We're here to help" showClose={true} />
|
|
61
|
+
|
|
62
|
+
<WebchatMessages variant='default' />
|
|
63
|
+
|
|
64
|
+
<WebchatInput placeholder='Type your message...' variant='default' />
|
|
65
|
+
</WebchatContainer>
|
|
66
|
+
</WebchatProvider>
|
|
67
|
+
)
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Grid Layout System
|
|
72
|
+
|
|
73
|
+
The webchat container uses CSS Grid with template areas for a clean, flexible layout. Each child component is automatically assigned to a grid area.
|
|
74
|
+
|
|
75
|
+
#### Default Layout
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
// Default layout: header / messages / input (stacked vertically)
|
|
79
|
+
<WebchatContainer layout='default'>
|
|
80
|
+
<WebchatHeader title='Support' />
|
|
81
|
+
<WebchatMessages />
|
|
82
|
+
<WebchatInput />
|
|
83
|
+
</WebchatContainer>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
#### Grid Template Areas
|
|
87
|
+
|
|
88
|
+
The default layout uses the following CSS Grid template:
|
|
89
|
+
|
|
90
|
+
- **Grid areas**: `'header' / 'messages' / 'input'`
|
|
91
|
+
- **Grid rows**: `auto 1fr auto` (header auto-sized, messages flexible, input auto-sized)
|
|
92
|
+
- **Grid columns**: `1fr` (single column, full width)
|
|
93
|
+
|
|
94
|
+
#### Custom Layouts
|
|
95
|
+
|
|
96
|
+
Delivery teams can create custom layouts by extending the CSS module:
|
|
97
|
+
|
|
98
|
+
```css
|
|
99
|
+
/* custom-layout.module.css */
|
|
100
|
+
.custom-layout {
|
|
101
|
+
grid-template-areas:
|
|
102
|
+
'input header'
|
|
103
|
+
'messages messages';
|
|
104
|
+
grid-template-rows: auto 1fr;
|
|
105
|
+
grid-template-columns: 1fr auto;
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
```tsx
|
|
110
|
+
// Apply custom layout
|
|
111
|
+
<WebchatContainer className={customStyles.customLayout}>
|
|
112
|
+
<WebchatHeader title='Support' />
|
|
113
|
+
<WebchatMessages />
|
|
114
|
+
<WebchatInput />
|
|
115
|
+
</WebchatContainer>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Positioning System
|
|
119
|
+
|
|
120
|
+
The webchat uses a coordinate positioning system:
|
|
121
|
+
|
|
122
|
+
- **WebchatTrigger**: Always positioned `fixed` on the viewport
|
|
123
|
+
- **WebchatContainer**: Automatically positioned near the trigger
|
|
124
|
+
- **Supported positions**: `bottom-right` | `bottom-left` | `top-right` | `top-left`
|
|
125
|
+
|
|
126
|
+
```tsx
|
|
127
|
+
// Trigger in bottom-right, container appears above it
|
|
128
|
+
<WebchatTrigger position="bottom-right" />
|
|
129
|
+
<WebchatContainer position="bottom-right" />
|
|
130
|
+
|
|
131
|
+
// Trigger in top-left, container appears below it
|
|
132
|
+
<WebchatTrigger position="top-left" />
|
|
133
|
+
<WebchatContainer position="top-left" />
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### Open/Close State
|
|
137
|
+
|
|
138
|
+
The webchat is controlled by shared state through `WebchatProvider`:
|
|
139
|
+
|
|
140
|
+
- **Trigger click**: Toggles `isOpen` state
|
|
141
|
+
- **Container visibility**: Controlled by `isOpen` state
|
|
142
|
+
- **Animation**: Smooth slide-in/out animations
|
|
143
|
+
|
|
144
|
+
```tsx
|
|
145
|
+
// State is managed automatically
|
|
146
|
+
const state = useWebchatContext()
|
|
147
|
+
// state.isOpen - boolean
|
|
148
|
+
// state.open() - opens webchat
|
|
149
|
+
// state.close() - closes webchat
|
|
150
|
+
// state.toggle() - toggles webchat
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### Styling Patterns
|
|
154
|
+
|
|
155
|
+
This library follows the same patterns as `@lilara/ui-web-react`:
|
|
156
|
+
|
|
157
|
+
1. **Component Tokens**: Each component uses specific CSS custom properties that reference base tokens
|
|
158
|
+
2. **CSS Modules**: All styling is scoped using CSS modules
|
|
159
|
+
3. **CVA (Class Variance Authority)**: Conditional styling based on component props
|
|
160
|
+
4. **Design Tokens**: Uses design tokens
|
|
161
|
+
|
|
162
|
+
### Component Variants
|
|
163
|
+
|
|
164
|
+
#### WebchatContainer
|
|
165
|
+
|
|
166
|
+
- **layout**: `default` | `compact` | `fullscreen`
|
|
167
|
+
- **size**: `small` | `normal` | `large`
|
|
168
|
+
- **position**: `bottom-right` | `bottom-left` | `top-right` | `top-left`
|
|
169
|
+
- **Animation states**: `isOpening` | `isClosing`
|
|
170
|
+
|
|
171
|
+
#### WebchatTrigger
|
|
172
|
+
|
|
173
|
+
- **position**: `bottom-right` | `bottom-left` | `top-right` | `top-left`
|
|
174
|
+
- **Animation states**: `isPulsing` | `isOpening` | `isClosing`
|
|
175
|
+
|
|
176
|
+
#### WebchatHeader
|
|
177
|
+
|
|
178
|
+
- **variant**: `default` | `minimal`
|
|
179
|
+
|
|
180
|
+
#### WebchatMessages
|
|
181
|
+
|
|
182
|
+
- **variant**: `default` | `compact` | `bubble`
|
|
183
|
+
|
|
184
|
+
#### WebchatInput
|
|
185
|
+
|
|
186
|
+
- **variant**: `default` | `compact` | `outlined`
|
|
187
|
+
- **State**: `isLoading`
|
|
188
|
+
|
|
189
|
+
### Responsive Behavior
|
|
190
|
+
|
|
191
|
+
- **Desktop**: Container positioned relative to trigger
|
|
192
|
+
- **Mobile**: Container becomes fullscreen automatically
|
|
193
|
+
- **Positioning**: Responsive adjustments for smaller screens
|
|
194
|
+
|
|
195
|
+
### Customization
|
|
196
|
+
|
|
197
|
+
You can override the webchat-specific tokens by defining them after importing the styles:
|
|
198
|
+
|
|
199
|
+
```css
|
|
200
|
+
@import '@botonic/webchat-react/styles.css';
|
|
201
|
+
|
|
202
|
+
:root {
|
|
203
|
+
/* Override webchat tokens */
|
|
204
|
+
--webchat-container-bg: #f8f9fa;
|
|
205
|
+
--webchat-header-bg: #007bff;
|
|
206
|
+
--webchat-message-user-bg: #007bff;
|
|
207
|
+
--webchat-trigger-position-offset: 32px;
|
|
208
|
+
--webchat-trigger-size: 64px;
|
|
209
|
+
}
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
### React Aria Integration
|
|
213
|
+
|
|
214
|
+
Components use React Aria hooks for accessibility and follow the compound component pattern:
|
|
215
|
+
|
|
216
|
+
```tsx
|
|
217
|
+
// Access underlying hook if needed
|
|
218
|
+
import { useWebchatContainer, useWebchatTrigger } from '@botonic/webchat-react'
|
|
219
|
+
|
|
220
|
+
function CustomWebchat() {
|
|
221
|
+
const state = useWebchatState({
|
|
222
|
+
/* options */
|
|
223
|
+
})
|
|
224
|
+
const { containerProps } = useWebchatContainer(props, state, ref)
|
|
225
|
+
|
|
226
|
+
return <div {...containerProps}>/* custom implementation */</div>
|
|
227
|
+
}
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
## Architecture
|
|
231
|
+
|
|
232
|
+
- **Foundation hooks**: Core state management (e.g., `useWebchatState`)
|
|
233
|
+
- **Component hooks**: React Aria pattern hooks (e.g., `useWebchatContainer`)
|
|
234
|
+
- **React components**: Styled components using CSS modules + CVA
|
|
235
|
+
- **Design tokens**: Component-specific tokens that reference base design system
|
|
236
|
+
- **State management**: Shared state through React Context for open/close coordination
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @botonic/webchat-react
|
|
3
|
+
*
|
|
4
|
+
* React components for Hubtype webchat.
|
|
5
|
+
*
|
|
6
|
+
* ## Embedded Webchat (full control)
|
|
7
|
+
* ```tsx
|
|
8
|
+
* import { WebchatProvider, WebchatContainer, WebchatMessages, WebchatInput } from '@botonic/webchat-react'
|
|
9
|
+
* import '@botonic/webchat-react/styles.css'
|
|
10
|
+
*
|
|
11
|
+
* <WebchatProvider appId="your-app-id">
|
|
12
|
+
* <WebchatContainer>
|
|
13
|
+
* <WebchatHeader />
|
|
14
|
+
* <WebchatMessages />
|
|
15
|
+
* <WebchatInput />
|
|
16
|
+
* </WebchatContainer>
|
|
17
|
+
* </WebchatProvider>
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* ## Trigger with Lazy Loading
|
|
21
|
+
* For a floating trigger button that lazy-loads the webchat:
|
|
22
|
+
* ```tsx
|
|
23
|
+
* import { WebchatTrigger } from '@botonic/webchat-react/trigger'
|
|
24
|
+
* import '@botonic/webchat-react/styles.css'
|
|
25
|
+
*
|
|
26
|
+
* <WebchatTrigger appId="your-app-id" />
|
|
27
|
+
* ```
|
|
28
|
+
*
|
|
29
|
+
* ## Programmatic API
|
|
30
|
+
* ```tsx
|
|
31
|
+
* await window.botonic.ready
|
|
32
|
+
* window.botonic.open()
|
|
33
|
+
* ```
|
|
34
|
+
*/
|
|
35
|
+
export { useWebchatContext, WebchatProvider, } from './lib/components/webchat-provider/webchat-provider';
|
|
36
|
+
export { WebchatApp, type WebchatAppProps } from './lib/components/webchat-app';
|
|
37
|
+
export { WebchatContainer } from './lib/components/webchat-container/webchat-container';
|
|
38
|
+
export { WebchatHeader } from './lib/components/webchat-header/webchat-header';
|
|
39
|
+
export { WebchatInput } from './lib/components/webchat-input/webchat-input';
|
|
40
|
+
export { WebchatMessages } from './lib/components/webchat-messages/webchat-messages';
|
|
41
|
+
export { useWebchatContainer } from './lib/components/webchat-container/use-webchat-container';
|
|
42
|
+
export { useWebchatHeader } from './lib/components/webchat-header/use-webchat-header';
|
|
43
|
+
export { useWebchatInput } from './lib/components/webchat-input/use-webchat-input';
|
|
44
|
+
export { useWebchatMessages } from './lib/components/webchat-messages/use-webchat-messages';
|
|
45
|
+
export { useWebchatState } from './lib/hooks/use-webchat-state';
|
|
46
|
+
export { Message, type MessageProps } from './lib/components/message/message';
|
|
47
|
+
export { MessageBubble, type MessageBubbleProps, } from './lib/components/message/message/message-bubble';
|
|
48
|
+
export { MessageMachineRenderer } from './lib/components/message-machine-renderer/message-machine-renderer';
|
|
49
|
+
export { TypingIndicator } from './lib/components/typing-indicator/typing-indicator';
|
|
50
|
+
export { type CoverComponentRegistry, Overlay, OverlayConfirmModal, type OverlayConfirmModalProps, OverlayContent, type OverlayContentProps, OverlayContext, type OverlayContextValue, OverlayCoverFrame, type OverlayCoverFrameProps, OverlayHeader, type OverlayHeaderProps, type OverlayProps, OverlayWebviewFrame, type OverlayWebviewFrameProps, useOverlay, useOverlayContext, useOverlayHeader, } from './lib/components/webchat-overlay';
|
|
51
|
+
export { ButtonComponent, type ButtonComponentProps, } from './lib/components/shared';
|
|
52
|
+
export * from './lib/types/primitives';
|
|
53
|
+
export * from './lib/types/webchat-props';
|
|
54
|
+
export type { WebchatConfig, WebchatController, WebchatEmittedEvent, } from '@botonic/webchat-core';
|
|
55
|
+
export { Button, Spinner } from '@lilara/ui-web-react';
|
|
56
|
+
export type { TextInputProps } from '@lilara/ui-web-react';
|
|
57
|
+
export type { TextAreaProps } from '@lilara/ui-web-react';
|
|
58
|
+
export type { CheckboxProps } from '@lilara/ui-web-react';
|
|
59
|
+
export type { SwitchProps } from '@lilara/ui-web-react';
|
|
60
|
+
export type { SelectItem, SelectProps } from '@lilara/ui-web-react';
|
|
61
|
+
export type { SelectWithSectionsProps } from '@lilara/ui-web-react';
|
|
62
|
+
export type { MultiselectProps } from '@lilara/ui-web-react';
|
|
63
|
+
export type { MultiselectWithSectionsProps } from '@lilara/ui-web-react';
|
|
64
|
+
export type { SliderProps } from '@lilara/ui-web-react';
|
|
65
|
+
export { TextInput } from '@lilara/ui-web-react';
|
|
66
|
+
export { TextArea } from '@lilara/ui-web-react';
|
|
67
|
+
export { Checkbox } from '@lilara/ui-web-react';
|
|
68
|
+
export { Switch } from '@lilara/ui-web-react';
|
|
69
|
+
export { Select } from '@lilara/ui-web-react';
|
|
70
|
+
export { SelectWithSections } from '@lilara/ui-web-react';
|
|
71
|
+
export { Multiselect } from '@lilara/ui-web-react';
|
|
72
|
+
export { MultiselectWithSections } from '@lilara/ui-web-react';
|
|
73
|
+
export { Slider } from '@lilara/ui-web-react';
|
|
74
|
+
export type { BannerProps } from '@lilara/ui-web-react';
|
|
75
|
+
export type { TooltipProps } from '@lilara/ui-web-react';
|
|
76
|
+
export { Banner } from '@lilara/ui-web-react';
|
|
77
|
+
export { Tooltip } from '@lilara/ui-web-react';
|
|
78
|
+
export type { BadgeProps } from '@lilara/ui-web-react';
|
|
79
|
+
export type { TagProps } from '@lilara/ui-web-react';
|
|
80
|
+
export { Badge } from '@lilara/ui-web-react';
|
|
81
|
+
export { Tag } from '@lilara/ui-web-react';
|
package/index.js
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { B as s, M as t, a as r, b as n, O as o, c, d as l, e as i, f as h, g as u, h as b, T as W, W as v, i as p, j as d, k as y, l as O, m as C, u as M, n as g, o as x, p as S, q as m, r as B, s as T, t as f, v as H } from "./webchat-app-CtAHJapU.js";
|
|
2
|
+
import { Badge as k, Banner as w, Button as A, Checkbox as F, Multiselect as j, MultiselectWithSections as q, Select as P, SelectWithSections as R, Slider as z, Spinner as D, Switch as E, Tag as G, TextArea as J, TextInput as K, Tooltip as L } from "@lilara/ui-web-react";
|
|
3
|
+
export {
|
|
4
|
+
k as Badge,
|
|
5
|
+
w as Banner,
|
|
6
|
+
A as Button,
|
|
7
|
+
s as ButtonComponent,
|
|
8
|
+
F as Checkbox,
|
|
9
|
+
t as Message,
|
|
10
|
+
r as MessageBubble,
|
|
11
|
+
n as MessageMachineRenderer,
|
|
12
|
+
j as Multiselect,
|
|
13
|
+
q as MultiselectWithSections,
|
|
14
|
+
o as Overlay,
|
|
15
|
+
c as OverlayConfirmModal,
|
|
16
|
+
l as OverlayContent,
|
|
17
|
+
i as OverlayContext,
|
|
18
|
+
h as OverlayCoverFrame,
|
|
19
|
+
u as OverlayHeader,
|
|
20
|
+
b as OverlayWebviewFrame,
|
|
21
|
+
P as Select,
|
|
22
|
+
R as SelectWithSections,
|
|
23
|
+
z as Slider,
|
|
24
|
+
D as Spinner,
|
|
25
|
+
E as Switch,
|
|
26
|
+
G as Tag,
|
|
27
|
+
J as TextArea,
|
|
28
|
+
K as TextInput,
|
|
29
|
+
L as Tooltip,
|
|
30
|
+
W as TypingIndicator,
|
|
31
|
+
v as WebchatApp,
|
|
32
|
+
p as WebchatContainer,
|
|
33
|
+
d as WebchatHeader,
|
|
34
|
+
y as WebchatInput,
|
|
35
|
+
O as WebchatMessages,
|
|
36
|
+
C as WebchatProvider,
|
|
37
|
+
M as useOverlay,
|
|
38
|
+
g as useOverlayContext,
|
|
39
|
+
x as useOverlayHeader,
|
|
40
|
+
S as useWebchatContainer,
|
|
41
|
+
m as useWebchatContext,
|
|
42
|
+
B as useWebchatHeader,
|
|
43
|
+
T as useWebchatInput,
|
|
44
|
+
f as useWebchatMessages,
|
|
45
|
+
H as useWebchatState
|
|
46
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { MessageProps } from '../message';
|
|
2
|
+
export interface AudioMessageProps extends Omit<MessageProps, 'children'> {
|
|
3
|
+
/** The audio URL. */
|
|
4
|
+
src: string;
|
|
5
|
+
/** Alt text for the audio (for accessibility). */
|
|
6
|
+
alt?: string;
|
|
7
|
+
/** Callback when audio loads (useful for scroll adjustment). */
|
|
8
|
+
onAudioLoad?: () => void;
|
|
9
|
+
/** Callback when audio starts playing. */
|
|
10
|
+
onPlay?: () => void;
|
|
11
|
+
/** Callback when audio pauses. */
|
|
12
|
+
onPause?: () => void;
|
|
13
|
+
/** Callback when audio ends. */
|
|
14
|
+
onEnded?: () => void;
|
|
15
|
+
/** Additional CSS class names to apply to the message. */
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
/** Audio message component for displaying audio messages. */
|
|
19
|
+
export declare const AudioMessage: import('react').ForwardRefExoticComponent<AudioMessageProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
20
|
+
export default AudioMessage;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { AudioMessage, type AudioMessageProps, default } from './audio-message';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { MessageProps } from '../message';
|
|
2
|
+
export interface MessageButton {
|
|
3
|
+
/** The button text. */
|
|
4
|
+
text: string;
|
|
5
|
+
/** The button value or payload. */
|
|
6
|
+
value: string;
|
|
7
|
+
/** Whether the button is disabled. */
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
/** Handler for button click. */
|
|
10
|
+
onClick?: (value: string) => void;
|
|
11
|
+
}
|
|
12
|
+
export interface ButtonMessageProps extends Omit<MessageProps, 'children'> {
|
|
13
|
+
/** The text content of the message. */
|
|
14
|
+
text?: string;
|
|
15
|
+
/** Array of buttons to display. */
|
|
16
|
+
buttons: MessageButton[];
|
|
17
|
+
/** Maximum number of buttons to display per row. */
|
|
18
|
+
buttonsPerRow?: number;
|
|
19
|
+
/** Additional CSS class names to apply to the message. */
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
/** Button message component for displaying interactive messages with buttons. */
|
|
23
|
+
export declare const ButtonMessage: import('react').ForwardRefExoticComponent<ButtonMessageProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
24
|
+
export default ButtonMessage;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ButtonMessage, type ButtonMessageProps, default, type MessageButton, } from './button-message';
|