@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.
Files changed (80) hide show
  1. package/CHANGELOG.md +269 -0
  2. package/README.md +236 -0
  3. package/index.d.ts +81 -0
  4. package/index.js +46 -0
  5. package/lib/components/message/audio-message/audio-message.d.ts +20 -0
  6. package/lib/components/message/audio-message/index.d.ts +1 -0
  7. package/lib/components/message/button-message/button-message.d.ts +24 -0
  8. package/lib/components/message/button-message/index.d.ts +1 -0
  9. package/lib/components/message/carousel-message/carousel-message.d.ts +18 -0
  10. package/lib/components/message/carousel-message/index.d.ts +1 -0
  11. package/lib/components/message/document-message/document-message.d.ts +22 -0
  12. package/lib/components/message/document-message/index.d.ts +1 -0
  13. package/lib/components/message/image-message/image-message.d.ts +14 -0
  14. package/lib/components/message/image-message/index.d.ts +1 -0
  15. package/lib/components/message/index.d.ts +33 -0
  16. package/lib/components/message/location-message/index.d.ts +1 -0
  17. package/lib/components/message/location-message/location-message.d.ts +16 -0
  18. package/lib/components/message/message/index.d.ts +5 -0
  19. package/lib/components/message/message/message-avatar/index.d.ts +1 -0
  20. package/lib/components/message/message/message-avatar/message-avatar.d.ts +24 -0
  21. package/lib/components/message/message/message-bubble/index.d.ts +1 -0
  22. package/lib/components/message/message/message-bubble/message-bubble.d.ts +17 -0
  23. package/lib/components/message/message/message-info/index.d.ts +1 -0
  24. package/lib/components/message/message/message-info/message-info.d.ts +25 -0
  25. package/lib/components/message/message/message.d.ts +23 -0
  26. package/lib/components/message/message/use-message.d.ts +43 -0
  27. package/lib/components/message/text-message/index.d.ts +1 -0
  28. package/lib/components/message/text-message/text-message.d.ts +10 -0
  29. package/lib/components/message/video-message/index.d.ts +1 -0
  30. package/lib/components/message/video-message/video-message.d.ts +20 -0
  31. package/lib/components/message-machine-renderer/index.d.ts +3 -0
  32. package/lib/components/message-machine-renderer/message-machine-renderer.d.ts +28 -0
  33. package/lib/components/message-machine-renderer/use-avatar.d.ts +34 -0
  34. package/lib/components/message-machine-renderer/use-message-machine-renderer.d.ts +31 -0
  35. package/lib/components/shared/button-component/button-component.d.ts +24 -0
  36. package/lib/components/shared/button-component/index.d.ts +2 -0
  37. package/lib/components/shared/index.d.ts +2 -0
  38. package/lib/components/typing-indicator/index.d.ts +1 -0
  39. package/lib/components/typing-indicator/typing-indicator.d.ts +11 -0
  40. package/lib/components/webchat-app/index.d.ts +1 -0
  41. package/lib/components/webchat-app/webchat-app.d.ts +41 -0
  42. package/lib/components/webchat-container/use-webchat-container.d.ts +26 -0
  43. package/lib/components/webchat-container/webchat-container.d.ts +2 -0
  44. package/lib/components/webchat-header/use-webchat-header.d.ts +19 -0
  45. package/lib/components/webchat-header/webchat-header.d.ts +2 -0
  46. package/lib/components/webchat-input/use-webchat-input.d.ts +31 -0
  47. package/lib/components/webchat-input/webchat-input.d.ts +2 -0
  48. package/lib/components/webchat-messages/use-webchat-messages.d.ts +54 -0
  49. package/lib/components/webchat-messages/webchat-messages.d.ts +2 -0
  50. package/lib/components/webchat-overlay/base/confirm-modal/confirm-modal.d.ts +8 -0
  51. package/lib/components/webchat-overlay/base/confirm-modal/index.d.ts +2 -0
  52. package/lib/components/webchat-overlay/base/content/content.d.ts +9 -0
  53. package/lib/components/webchat-overlay/base/content/index.d.ts +2 -0
  54. package/lib/components/webchat-overlay/base/header/header.d.ts +4 -0
  55. package/lib/components/webchat-overlay/base/header/index.d.ts +3 -0
  56. package/lib/components/webchat-overlay/base/header/use-header.d.ts +13 -0
  57. package/lib/components/webchat-overlay/base/index.d.ts +5 -0
  58. package/lib/components/webchat-overlay/base/overlay/index.d.ts +3 -0
  59. package/lib/components/webchat-overlay/base/overlay/overlay.d.ts +18 -0
  60. package/lib/components/webchat-overlay/base/overlay/use-overlay.d.ts +23 -0
  61. package/lib/components/webchat-overlay/base/overlay-context.d.ts +25 -0
  62. package/lib/components/webchat-overlay/cover/frame/cover-frame.d.ts +8 -0
  63. package/lib/components/webchat-overlay/cover/frame/index.d.ts +2 -0
  64. package/lib/components/webchat-overlay/cover/index.d.ts +1 -0
  65. package/lib/components/webchat-overlay/index.d.ts +3 -0
  66. package/lib/components/webchat-overlay/webview/frame/index.d.ts +2 -0
  67. package/lib/components/webchat-overlay/webview/frame/webview-frame.d.ts +8 -0
  68. package/lib/components/webchat-overlay/webview/index.d.ts +1 -0
  69. package/lib/components/webchat-provider/webchat-provider.d.ts +22 -0
  70. package/lib/components/webchat-trigger/use-webchat-trigger.d.ts +38 -0
  71. package/lib/components/webchat-trigger/webchat-trigger-error-boundary.d.ts +19 -0
  72. package/lib/components/webchat-trigger/webchat-trigger.d.ts +2 -0
  73. package/lib/hooks/use-webchat-state.d.ts +21 -0
  74. package/lib/types/primitives.d.ts +15 -0
  75. package/lib/types/webchat-props.d.ts +103 -0
  76. package/package.json +37 -0
  77. package/styles.css +466 -0
  78. package/trigger.d.ts +40 -0
  79. package/trigger.js +215 -0
  80. 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';