@botonic/webchat-react 2.26.0 → 2.27.0

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 (95) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/CLAUDE.md +170 -0
  3. package/index.d.ts +12 -5
  4. package/index.js +59 -28
  5. package/lib/components/dialog/backdrop/backdrop.d.ts +5 -0
  6. package/lib/components/dialog/dialog/dialog.d.ts +7 -0
  7. package/lib/components/dialog/dialog-context.d.ts +3 -0
  8. package/lib/components/dialog/dialog-provider.d.ts +17 -0
  9. package/lib/components/dialog/dialog-types.d.ts +24 -0
  10. package/lib/components/dialog/icons/check-icon.d.ts +1 -0
  11. package/lib/components/dialog/icons/xmark-icon.d.ts +1 -0
  12. package/lib/components/dialog/index.d.ts +5 -0
  13. package/lib/components/dialog/webchat-dialog-provider.d.ts +6 -0
  14. package/lib/components/message/audio-message/audio-message.d.ts +2 -0
  15. package/lib/components/message/audio-message/use-audio-message.d.ts +294 -0
  16. package/lib/components/message/button-message/button-message.d.ts +6 -1
  17. package/lib/components/message/carousel-message/carousel-message.d.ts +2 -2
  18. package/lib/components/message/carousel-message/icons/chevron-left-icon.d.ts +1 -0
  19. package/lib/components/message/carousel-message/icons/chevron-right-icon.d.ts +1 -0
  20. package/lib/components/message/carousel-message/index.d.ts +1 -1
  21. package/lib/components/message/carousel-message/use-carousel-message.d.ts +47 -0
  22. package/lib/components/message/document-message/document-message.d.ts +2 -8
  23. package/lib/components/message/document-message/use-document-message.d.ts +11 -0
  24. package/lib/components/message/image-message/use-image-message.d.ts +10 -0
  25. package/lib/components/message/index.d.ts +2 -1
  26. package/lib/components/message/message/message-avatar/message-avatar.d.ts +2 -0
  27. package/lib/components/message/message/message-bubble/message-bubble.d.ts +0 -3
  28. package/lib/components/message/message/message-info/message-info.d.ts +2 -0
  29. package/lib/components/message/message/message.d.ts +2 -0
  30. package/lib/components/message/message/use-message.d.ts +3 -3
  31. package/lib/components/{typing-indicator → message/typing-message}/index.d.ts +1 -1
  32. package/lib/components/{typing-indicator/typing-indicator.d.ts → message/typing-message/typing-message.d.ts} +0 -5
  33. package/lib/components/message/video-message/use-video-message.d.ts +21 -0
  34. package/lib/components/message/video-message/video-message.d.ts +3 -1
  35. package/lib/components/message-machine-renderer/message-machine-renderer.d.ts +1 -0
  36. package/lib/components/message-machine-renderer/use-message-machine-renderer.d.ts +1 -0
  37. package/lib/components/shared/button-component/external-link-icon.d.ts +1 -0
  38. package/lib/components/webchat-app/webchat-app.d.ts +10 -3
  39. package/lib/components/webchat-container/use-webchat-container.d.ts +1 -0
  40. package/lib/components/webchat-header/icons/close-icon.d.ts +1 -0
  41. package/lib/components/webchat-header/icons/download-icon.d.ts +1 -0
  42. package/lib/components/webchat-header/icons/leave-icon.d.ts +1 -0
  43. package/lib/components/webchat-header/icons/menu-icon.d.ts +1 -0
  44. package/lib/components/webchat-header/icons/sounds-icon.d.ts +1 -0
  45. package/lib/components/webchat-header/icons/start-over-icon.d.ts +1 -0
  46. package/lib/components/webchat-header/use-webchat-header.d.ts +11 -2
  47. package/lib/components/webchat-header/webchat-header.d.ts +4 -1
  48. package/lib/components/webchat-header/webchat-menu/dropdown-menu-item-download-transcript.d.ts +5 -0
  49. package/lib/components/webchat-header/webchat-menu/dropdown-menu-item-reset-conversation.d.ts +5 -0
  50. package/lib/components/webchat-header/webchat-menu/dropdown-menu-item-reset-session.d.ts +5 -0
  51. package/lib/components/webchat-header/webchat-menu/dropdown-menu-item-sounds.d.ts +5 -0
  52. package/lib/components/webchat-header/webchat-menu/use-dropdown-menu-item-reset-session.d.ts +9 -0
  53. package/lib/components/webchat-input/attachment-preview/attachment-preview.d.ts +2 -0
  54. package/lib/components/webchat-input/attachment-preview/index.d.ts +3 -0
  55. package/lib/components/webchat-input/attachment-preview/use-attachment-preview.d.ts +23 -0
  56. package/lib/components/webchat-input/audio-input/audio-input.d.ts +2 -0
  57. package/lib/components/webchat-input/audio-input/index.d.ts +3 -0
  58. package/lib/components/webchat-input/audio-input/use-audio-input.d.ts +34 -0
  59. package/lib/components/webchat-input/audio-waveform/audio-waveform.d.ts +5 -0
  60. package/lib/components/webchat-input/audio-waveform/index.d.ts +1 -0
  61. package/lib/components/webchat-input/audio-waveform/static-waveform.d.ts +9 -0
  62. package/lib/components/webchat-input/constants.d.ts +3 -0
  63. package/lib/components/webchat-input/icons/cancel-icon.d.ts +1 -0
  64. package/lib/components/webchat-input/icons/close-icon.d.ts +1 -0
  65. package/lib/components/webchat-input/icons/confirm-icon.d.ts +1 -0
  66. package/lib/components/webchat-input/icons/file-icon.d.ts +2 -0
  67. package/lib/components/webchat-input/icons/file-pdf-icon.d.ts +2 -0
  68. package/lib/components/webchat-input/icons/pause-icon.d.ts +1 -0
  69. package/lib/components/webchat-input/icons/play-icon.d.ts +1 -0
  70. package/lib/components/webchat-input/use-webchat-input.d.ts +21 -10
  71. package/lib/components/webchat-input/webchat-input.d.ts +6 -1
  72. package/lib/components/webchat-messages/use-webchat-messages-list-scroll.d.ts +15 -0
  73. package/lib/components/webchat-messages/use-webchat-messages.d.ts +18 -0
  74. package/lib/components/webchat-provider/webchat-context.d.ts +8 -0
  75. package/lib/components/webchat-provider/webchat-provider.d.ts +1 -10
  76. package/lib/components/webchat-trigger/icons/chat-icon.d.ts +1 -0
  77. package/lib/components/webchat-trigger/icons/chevron-down-icon.d.ts +1 -0
  78. package/lib/components/webchat-trigger/use-webchat-trigger.d.ts +10 -0
  79. package/lib/contexts/media-playback-context.d.ts +11 -0
  80. package/lib/hero-header-layout/index.d.ts +3 -0
  81. package/lib/hero-header-layout/use-webchat-hero-header-layout.d.ts +40 -0
  82. package/lib/hero-header-layout/webchat-hero-header-layout-config.d.ts +26 -0
  83. package/lib/hero-header-layout/webchat-hero-header-layout-utils.d.ts +2 -0
  84. package/lib/hooks/use-audio-recorder.d.ts +20 -0
  85. package/lib/hooks/use-webchat-state.d.ts +7 -0
  86. package/lib/hooks/webchat-client-settings-behaviors.d.ts +13 -0
  87. package/lib/types/webchat-props.d.ts +43 -2
  88. package/lib/utils/audio-utils.d.ts +1 -0
  89. package/lib/utils/uuid-utils.d.ts +1 -0
  90. package/package.json +4 -3
  91. package/styles.css +154 -14
  92. package/trigger.js +231 -135
  93. package/webchat-app-DSDMjE-m.js +4051 -0
  94. package/lib/components/webchat-messages/use-custom-scrollbar.d.ts +0 -11
  95. package/webchat-app-CLGvs-LL.js +0 -2518
@@ -0,0 +1,294 @@
1
+ interface UseAudioMessageProps {
2
+ src: string;
3
+ messageId?: string;
4
+ onAudioLoad?: () => void;
5
+ onPlay?: () => void;
6
+ onPause?: () => void;
7
+ onEnded?: () => void;
8
+ }
9
+ export declare function useAudioMessage({ src, messageId, onAudioLoad, onPlay, onPause, onEnded, }: UseAudioMessageProps): {
10
+ audioRef: import('react').RefObject<HTMLAudioElement>;
11
+ audioBlob: Blob | undefined;
12
+ isPlaying: boolean;
13
+ audioProgress: number;
14
+ timerLabel: string;
15
+ handlePlayPause: () => void;
16
+ handleSeek: (seekProgress: number) => void;
17
+ audioProps: {
18
+ onLoadedMetadata: () => void;
19
+ onTimeUpdate: () => void;
20
+ onPlay: () => void;
21
+ onPause: () => void;
22
+ onEnded: () => void;
23
+ };
24
+ playButtonProps: {
25
+ 'data-focus-visible': boolean;
26
+ defaultChecked?: boolean | undefined;
27
+ defaultValue?: string | number | readonly string[] | undefined;
28
+ suppressContentEditableWarning?: boolean | undefined;
29
+ suppressHydrationWarning?: boolean | undefined;
30
+ accessKey?: string | undefined;
31
+ autoFocus?: boolean | undefined;
32
+ className?: string | undefined;
33
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
34
+ contextMenu?: string | undefined;
35
+ dir?: string | undefined;
36
+ draggable?: (boolean | "true" | "false") | undefined;
37
+ hidden?: boolean | undefined;
38
+ id?: string | undefined;
39
+ lang?: string | undefined;
40
+ nonce?: string | undefined;
41
+ slot?: string | undefined;
42
+ spellCheck?: (boolean | "true" | "false") | undefined;
43
+ style?: import('react').CSSProperties | undefined;
44
+ tabIndex?: number | undefined;
45
+ title?: string | undefined;
46
+ translate?: "yes" | "no" | undefined;
47
+ radioGroup?: string | undefined;
48
+ role?: import('react').AriaRole | undefined;
49
+ about?: string | undefined;
50
+ content?: string | undefined;
51
+ datatype?: string | undefined;
52
+ inlist?: any;
53
+ prefix?: string | undefined;
54
+ property?: string | undefined;
55
+ rel?: string | undefined;
56
+ resource?: string | undefined;
57
+ rev?: string | undefined;
58
+ typeof?: string | undefined;
59
+ vocab?: string | undefined;
60
+ autoCapitalize?: string | undefined;
61
+ autoCorrect?: string | undefined;
62
+ autoSave?: string | undefined;
63
+ color?: string | undefined;
64
+ itemProp?: string | undefined;
65
+ itemScope?: boolean | undefined;
66
+ itemType?: string | undefined;
67
+ itemID?: string | undefined;
68
+ itemRef?: string | undefined;
69
+ results?: number | undefined;
70
+ security?: string | undefined;
71
+ unselectable?: "on" | "off" | undefined;
72
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
73
+ is?: string | undefined;
74
+ inert?: "" | undefined;
75
+ "aria-activedescendant"?: string | undefined;
76
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
77
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
78
+ "aria-braillelabel"?: string | undefined;
79
+ "aria-brailleroledescription"?: string | undefined;
80
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
81
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
82
+ "aria-colcount"?: number | undefined;
83
+ "aria-colindex"?: number | undefined;
84
+ "aria-colindextext"?: string | undefined;
85
+ "aria-colspan"?: number | undefined;
86
+ "aria-controls"?: string | undefined;
87
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
88
+ "aria-describedby"?: string | undefined;
89
+ "aria-description"?: string | undefined;
90
+ "aria-details"?: string | undefined;
91
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
92
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
93
+ "aria-errormessage"?: string | undefined;
94
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
95
+ "aria-flowto"?: string | undefined;
96
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
97
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
98
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
99
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
100
+ "aria-keyshortcuts"?: string | undefined;
101
+ "aria-label"?: string | undefined;
102
+ "aria-labelledby"?: string | undefined;
103
+ "aria-level"?: number | undefined;
104
+ "aria-live"?: "off" | "assertive" | "polite" | undefined;
105
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
106
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
107
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
108
+ "aria-orientation"?: "horizontal" | "vertical" | undefined;
109
+ "aria-owns"?: string | undefined;
110
+ "aria-placeholder"?: string | undefined;
111
+ "aria-posinset"?: number | undefined;
112
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
113
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
114
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
115
+ "aria-required"?: (boolean | "true" | "false") | undefined;
116
+ "aria-roledescription"?: string | undefined;
117
+ "aria-rowcount"?: number | undefined;
118
+ "aria-rowindex"?: number | undefined;
119
+ "aria-rowindextext"?: string | undefined;
120
+ "aria-rowspan"?: number | undefined;
121
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
122
+ "aria-setsize"?: number | undefined;
123
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
124
+ "aria-valuemax"?: number | undefined;
125
+ "aria-valuemin"?: number | undefined;
126
+ "aria-valuenow"?: number | undefined;
127
+ "aria-valuetext"?: string | undefined;
128
+ children?: import('react').ReactNode | undefined;
129
+ dangerouslySetInnerHTML?: {
130
+ __html: string | TrustedHTML;
131
+ } | undefined;
132
+ onCopy?: import('react').ClipboardEventHandler<HTMLButtonElement> | undefined;
133
+ onCopyCapture?: import('react').ClipboardEventHandler<HTMLButtonElement> | undefined;
134
+ onCut?: import('react').ClipboardEventHandler<HTMLButtonElement> | undefined;
135
+ onCutCapture?: import('react').ClipboardEventHandler<HTMLButtonElement> | undefined;
136
+ onPaste?: import('react').ClipboardEventHandler<HTMLButtonElement> | undefined;
137
+ onPasteCapture?: import('react').ClipboardEventHandler<HTMLButtonElement> | undefined;
138
+ onCompositionEnd?: import('react').CompositionEventHandler<HTMLButtonElement> | undefined;
139
+ onCompositionEndCapture?: import('react').CompositionEventHandler<HTMLButtonElement> | undefined;
140
+ onCompositionStart?: import('react').CompositionEventHandler<HTMLButtonElement> | undefined;
141
+ onCompositionStartCapture?: import('react').CompositionEventHandler<HTMLButtonElement> | undefined;
142
+ onCompositionUpdate?: import('react').CompositionEventHandler<HTMLButtonElement> | undefined;
143
+ onCompositionUpdateCapture?: import('react').CompositionEventHandler<HTMLButtonElement> | undefined;
144
+ onFocus?: import('react').FocusEventHandler<HTMLButtonElement> | undefined;
145
+ onFocusCapture?: import('react').FocusEventHandler<HTMLButtonElement> | undefined;
146
+ onBlur?: import('react').FocusEventHandler<HTMLButtonElement> | undefined;
147
+ onBlurCapture?: import('react').FocusEventHandler<HTMLButtonElement> | undefined;
148
+ onChange?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
149
+ onChangeCapture?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
150
+ onBeforeInput?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
151
+ onBeforeInputCapture?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
152
+ onInput?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
153
+ onInputCapture?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
154
+ onReset?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
155
+ onResetCapture?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
156
+ onSubmit?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
157
+ onSubmitCapture?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
158
+ onInvalid?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
159
+ onInvalidCapture?: import('react').FormEventHandler<HTMLButtonElement> | undefined;
160
+ onLoad?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
161
+ onLoadCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
162
+ onError?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
163
+ onErrorCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
164
+ onKeyDown?: import('react').KeyboardEventHandler<HTMLButtonElement> | undefined;
165
+ onKeyDownCapture?: import('react').KeyboardEventHandler<HTMLButtonElement> | undefined;
166
+ onKeyPress?: import('react').KeyboardEventHandler<HTMLButtonElement> | undefined;
167
+ onKeyPressCapture?: import('react').KeyboardEventHandler<HTMLButtonElement> | undefined;
168
+ onKeyUp?: import('react').KeyboardEventHandler<HTMLButtonElement> | undefined;
169
+ onKeyUpCapture?: import('react').KeyboardEventHandler<HTMLButtonElement> | undefined;
170
+ onAbort?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
171
+ onAbortCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
172
+ onCanPlay?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
173
+ onCanPlayCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
174
+ onCanPlayThrough?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
175
+ onCanPlayThroughCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
176
+ onDurationChange?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
177
+ onDurationChangeCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
178
+ onEmptied?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
179
+ onEmptiedCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
180
+ onEncrypted?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
181
+ onEncryptedCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
182
+ onEnded?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
183
+ onEndedCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
184
+ onLoadedData?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
185
+ onLoadedDataCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
186
+ onLoadedMetadata?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
187
+ onLoadedMetadataCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
188
+ onLoadStart?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
189
+ onLoadStartCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
190
+ onPause?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
191
+ onPauseCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
192
+ onPlay?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
193
+ onPlayCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
194
+ onPlaying?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
195
+ onPlayingCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
196
+ onProgress?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
197
+ onProgressCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
198
+ onRateChange?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
199
+ onRateChangeCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
200
+ onResize?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
201
+ onResizeCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
202
+ onSeeked?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
203
+ onSeekedCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
204
+ onSeeking?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
205
+ onSeekingCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
206
+ onStalled?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
207
+ onStalledCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
208
+ onSuspend?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
209
+ onSuspendCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
210
+ onTimeUpdate?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
211
+ onTimeUpdateCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
212
+ onVolumeChange?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
213
+ onVolumeChangeCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
214
+ onWaiting?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
215
+ onWaitingCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
216
+ onAuxClick?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
217
+ onAuxClickCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
218
+ onClick?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
219
+ onClickCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
220
+ onContextMenu?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
221
+ onContextMenuCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
222
+ onDoubleClick?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
223
+ onDoubleClickCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
224
+ onDrag?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
225
+ onDragCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
226
+ onDragEnd?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
227
+ onDragEndCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
228
+ onDragEnter?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
229
+ onDragEnterCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
230
+ onDragExit?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
231
+ onDragExitCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
232
+ onDragLeave?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
233
+ onDragLeaveCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
234
+ onDragOver?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
235
+ onDragOverCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
236
+ onDragStart?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
237
+ onDragStartCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
238
+ onDrop?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
239
+ onDropCapture?: import('react').DragEventHandler<HTMLButtonElement> | undefined;
240
+ onMouseDown?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
241
+ onMouseDownCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
242
+ onMouseEnter?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
243
+ onMouseLeave?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
244
+ onMouseMove?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
245
+ onMouseMoveCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
246
+ onMouseOut?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
247
+ onMouseOutCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
248
+ onMouseOver?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
249
+ onMouseOverCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
250
+ onMouseUp?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
251
+ onMouseUpCapture?: import('react').MouseEventHandler<HTMLButtonElement> | undefined;
252
+ onSelect?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
253
+ onSelectCapture?: import('react').ReactEventHandler<HTMLButtonElement> | undefined;
254
+ onTouchCancel?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
255
+ onTouchCancelCapture?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
256
+ onTouchEnd?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
257
+ onTouchEndCapture?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
258
+ onTouchMove?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
259
+ onTouchMoveCapture?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
260
+ onTouchStart?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
261
+ onTouchStartCapture?: import('react').TouchEventHandler<HTMLButtonElement> | undefined;
262
+ onPointerDown?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
263
+ onPointerDownCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
264
+ onPointerMove?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
265
+ onPointerMoveCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
266
+ onPointerUp?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
267
+ onPointerUpCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
268
+ onPointerCancel?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
269
+ onPointerCancelCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
270
+ onPointerEnter?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
271
+ onPointerLeave?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
272
+ onPointerOver?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
273
+ onPointerOverCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
274
+ onPointerOut?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
275
+ onPointerOutCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
276
+ onGotPointerCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
277
+ onGotPointerCaptureCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
278
+ onLostPointerCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
279
+ onLostPointerCaptureCapture?: import('react').PointerEventHandler<HTMLButtonElement> | undefined;
280
+ onScroll?: import('react').UIEventHandler<HTMLButtonElement> | undefined;
281
+ onScrollCapture?: import('react').UIEventHandler<HTMLButtonElement> | undefined;
282
+ onWheel?: import('react').WheelEventHandler<HTMLButtonElement> | undefined;
283
+ onWheelCapture?: import('react').WheelEventHandler<HTMLButtonElement> | undefined;
284
+ onAnimationStart?: import('react').AnimationEventHandler<HTMLButtonElement> | undefined;
285
+ onAnimationStartCapture?: import('react').AnimationEventHandler<HTMLButtonElement> | undefined;
286
+ onAnimationEnd?: import('react').AnimationEventHandler<HTMLButtonElement> | undefined;
287
+ onAnimationEndCapture?: import('react').AnimationEventHandler<HTMLButtonElement> | undefined;
288
+ onAnimationIteration?: import('react').AnimationEventHandler<HTMLButtonElement> | undefined;
289
+ onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLButtonElement> | undefined;
290
+ onTransitionEnd?: import('react').TransitionEventHandler<HTMLButtonElement> | undefined;
291
+ onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLButtonElement> | undefined;
292
+ };
293
+ };
294
+ export {};
@@ -1,3 +1,4 @@
1
+ import { BotonicButtonType } from '@botonic/shared';
1
2
  import { MessageProps } from '../message';
2
3
  export interface MessageButton {
3
4
  /** The button text. */
@@ -6,6 +7,10 @@ export interface MessageButton {
6
7
  value: string;
7
8
  /** Whether the button is disabled. */
8
9
  disabled?: boolean;
10
+ /** The button type (web_url opens external link, postback sends payload). */
11
+ type?: BotonicButtonType;
12
+ /** Webview URL if the button opens a webview. */
13
+ webview?: string;
9
14
  /** Handler for button click. */
10
15
  onClick?: (value: string) => void;
11
16
  }
@@ -19,6 +24,6 @@ export interface ButtonMessageProps extends Omit<MessageProps, 'children'> {
19
24
  /** Additional CSS class names to apply to the message. */
20
25
  className?: string;
21
26
  }
22
- /** Button message component for displaying interactive messages with buttons. */
27
+ /** Button message component for displaying interactive messages with floating buttons. */
23
28
  export declare const ButtonMessage: import('react').ForwardRefExoticComponent<ButtonMessageProps & import('react').RefAttributes<HTMLDivElement>>;
24
29
  export default ButtonMessage;
@@ -8,11 +8,11 @@ export interface CarouselMessageProps extends Omit<MessageProps, 'children'> {
8
8
  elements: CarouselElement[];
9
9
  /** Callback when a button is clicked. */
10
10
  onButtonClick?: (button: BotonicButtonContent) => void;
11
- /** Callback when an element image loads. */
11
+ /** Callback when an element image loads or errors. */
12
12
  onElementImageLoad?: (elementIndex: number) => void;
13
13
  /** Additional CSS class names. */
14
14
  className?: string;
15
15
  }
16
- /** Carousel message component displaying a list of elements with images and buttons. */
16
+ /** Carousel message component displaying a horizontally scrollable list of cards with images and buttons. */
17
17
  export declare const CarouselMessage: import('react').ForwardRefExoticComponent<CarouselMessageProps & import('react').RefAttributes<HTMLDivElement>>;
18
18
  export default CarouselMessage;
@@ -0,0 +1 @@
1
+ export declare function ChevronLeftIcon(): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare function ChevronRightIcon(): import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- export { type CarouselElement, type CarouselMessageProps, } from './carousel-message';
1
+ export { type CarouselElement, CarouselMessage, type CarouselMessageProps, } from './carousel-message';
@@ -0,0 +1,47 @@
1
+ import { BotonicButtonContent } from '@botonic/shared';
2
+ import { CarouselElement } from './carousel-message';
3
+ interface UseCarouselMessageProps {
4
+ elements: CarouselElement[];
5
+ onButtonClick?: (button: BotonicButtonContent) => void;
6
+ onElementImageLoad?: (elementIndex: number) => void;
7
+ }
8
+ export declare function useCarouselMessage({ elements, onButtonClick, onElementImageLoad, }: UseCarouselMessageProps): {
9
+ containerProps: {
10
+ role: "region";
11
+ 'aria-label': string;
12
+ onKeyDown: (e: React.KeyboardEvent) => void;
13
+ tabIndex: number;
14
+ };
15
+ sliderProps: {
16
+ ref: import('react').RefObject<HTMLDivElement>;
17
+ role: "list";
18
+ onScroll: () => void;
19
+ };
20
+ cardProps: (index: number) => {
21
+ role: "listitem";
22
+ 'aria-label': string;
23
+ };
24
+ imageProps: (index: number) => {
25
+ onLoad: () => void | undefined;
26
+ onError: () => void | undefined;
27
+ };
28
+ prevArrowProps: {
29
+ onClick: () => void;
30
+ 'aria-label': string;
31
+ disabled: boolean;
32
+ };
33
+ nextArrowProps: {
34
+ onClick: () => void;
35
+ 'aria-label': string;
36
+ disabled: boolean;
37
+ };
38
+ handleButtonClick: (button: BotonicButtonContent | {
39
+ text: string;
40
+ value: string;
41
+ }) => void;
42
+ variants: {
43
+ canScrollPrev: boolean;
44
+ canScrollNext: boolean;
45
+ };
46
+ };
47
+ export {};
@@ -4,19 +4,13 @@ export interface DocumentMessageProps extends Omit<MessageProps, 'children'> {
4
4
  src: string;
5
5
  /** The filename of the document. */
6
6
  filename?: string;
7
- /** The MIME type of the document. */
7
+ /** The MIME type of the document (used to select the icon). */
8
8
  mimeType?: string;
9
- /** The file size in bytes. */
10
- size?: number;
11
- /** Alt text for the document (for accessibility). */
12
- alt?: string;
13
- /** Callback when document loads (useful for scroll adjustment). */
14
- onDocumentLoad?: () => void;
15
9
  /** Callback when document is downloaded. */
16
10
  onDownload?: () => void;
17
11
  /** Additional CSS class names to apply to the message. */
18
12
  className?: string;
19
13
  }
20
- /** Document message component for displaying document messages. */
14
+ /** Document message component — matches the attachment preview file row style. */
21
15
  export declare const DocumentMessage: import('react').ForwardRefExoticComponent<DocumentMessageProps & import('react').RefAttributes<HTMLDivElement>>;
22
16
  export default DocumentMessage;
@@ -0,0 +1,11 @@
1
+ interface UseDocumentMessageProps {
2
+ src: string;
3
+ filename?: string;
4
+ onDownload?: () => void;
5
+ }
6
+ export declare function useDocumentMessage({ src, filename, onDownload, }: UseDocumentMessageProps): {
7
+ downloadProps: {
8
+ onClick: () => void;
9
+ };
10
+ };
11
+ export {};
@@ -0,0 +1,10 @@
1
+ interface UseImageMessageProps {
2
+ onImageLoad?: () => void;
3
+ }
4
+ export declare function useImageMessage({ onImageLoad }: UseImageMessageProps): {
5
+ imageProps: {
6
+ onLoad: () => void;
7
+ onError: () => void;
8
+ };
9
+ };
10
+ export {};
@@ -25,9 +25,10 @@
25
25
  export { Message, type MessageProps } from './message';
26
26
  export { AudioMessage, type AudioMessageProps } from './audio-message';
27
27
  export { ButtonMessage, type ButtonMessageProps, type MessageButton, } from './button-message';
28
- export { type CarouselElement, type CarouselMessageProps, } from './carousel-message';
28
+ export { type CarouselElement, CarouselMessage, type CarouselMessageProps, } from './carousel-message';
29
29
  export { DocumentMessage, type DocumentMessageProps } from './document-message';
30
30
  export { ImageMessage, type ImageMessageProps } from './image-message';
31
31
  export { LocationMessage, type LocationMessageProps } from './location-message';
32
32
  export { TextMessage, type TextMessageProps } from './text-message';
33
+ export { TypingIndicator, type TypingIndicatorProps } from './typing-message';
33
34
  export { VideoMessage, type VideoMessageProps } from './video-message';
@@ -4,6 +4,8 @@ export interface MessageAvatarProps {
4
4
  variant?: 'user' | 'bot' | 'system' | 'agent';
5
5
  /** The size of the avatar. */
6
6
  size?: 'small' | 'medium' | 'large';
7
+ /** The shape of the avatar. */
8
+ shape?: 'circle' | 'square';
7
9
  /** The source URL for the avatar image. */
8
10
  src?: string;
9
11
  /** Alt text for the avatar image. */
@@ -1,12 +1,9 @@
1
1
  import { default as React } from 'react';
2
- import { MessageAvatarProps } from '../message-avatar';
3
2
  export interface MessageBubbleProps {
4
3
  /** The variant of the message indicating who sent it. */
5
4
  variant?: 'user' | 'bot' | 'system' | 'agent';
6
5
  /** The status of the message. */
7
6
  status?: 'sending' | 'sent' | 'error';
8
- /** Avatar props when avatar should be rendered inside the bubble. */
9
- avatarProps?: MessageAvatarProps;
10
7
  /** A class name to apply to the bubble. */
11
8
  className?: string;
12
9
  /** The content to render inside the bubble. */
@@ -15,6 +15,8 @@ export interface MessageInfoProps {
15
15
  status?: 'sending' | 'sent' | 'error';
16
16
  /** Avatar props when avatar should be rendered in the info area. */
17
17
  avatarProps?: MessageAvatarProps;
18
+ /** The sender name to display next to the avatar. */
19
+ senderName?: string;
18
20
  /** A class name to apply to the info container. */
19
21
  className?: string;
20
22
  /** Additional content to render in the info area. */
@@ -13,6 +13,8 @@ export interface MessageProps {
13
13
  showStatus?: boolean;
14
14
  /** Pre-computed avatar configuration from useAvatar hook. */
15
15
  avatarConfig?: AvatarConfigResult;
16
+ /** The sender name to display in the info row. */
17
+ senderName?: string;
16
18
  /** A class name to apply to the message. */
17
19
  className?: string;
18
20
  /** The content to render inside the message bubble. */
@@ -15,6 +15,8 @@ export interface UseMessageProps {
15
15
  showStatus?: boolean;
16
16
  /** Pre-computed avatar configuration from useAvatar hook. */
17
17
  avatarConfig?: AvatarConfigResult;
18
+ /** The sender name to display in the info row. */
19
+ senderName?: string;
18
20
  /** A class name to apply to the message. */
19
21
  className?: string;
20
22
  /** The content to render inside the bubble. */
@@ -26,9 +28,7 @@ export interface UseMessageReturn {
26
28
  /** CSS classes for the message container */
27
29
  messageClasses: string;
28
30
  /** Props to spread into MessageBubble component */
29
- bubbleProps: MessageBubbleProps & {
30
- avatarProps?: MessageAvatarProps;
31
- };
31
+ bubbleProps: Omit<MessageBubbleProps, 'children'>;
32
32
  /** Props to spread into MessageInfo component */
33
33
  infoProps: MessageInfoProps & {
34
34
  avatarProps?: MessageAvatarProps;
@@ -1 +1 @@
1
- export { TypingIndicator, type TypingIndicatorProps } from './typing-indicator';
1
+ export { TypingIndicator, type TypingIndicatorProps } from './typing-message';
@@ -1,11 +1,6 @@
1
1
  import { default as React } from 'react';
2
2
  export interface TypingIndicatorProps {
3
- /** Whether the typing indicator should be visible */
4
3
  isVisible?: boolean;
5
- /** Custom class name for styling */
6
4
  className?: string;
7
5
  }
8
- /**
9
- * Typing indicator component that shows animated dots when the bot is typing
10
- */
11
6
  export declare const TypingIndicator: React.FC<TypingIndicatorProps>;
@@ -0,0 +1,21 @@
1
+ interface UseVideoMessageProps {
2
+ messageId?: string;
3
+ onVideoLoad?: () => void;
4
+ onPlay?: () => void;
5
+ onPause?: () => void;
6
+ onEnded?: () => void;
7
+ }
8
+ export declare function useVideoMessage({ messageId, onVideoLoad, onPlay, onPause, onEnded, }: UseVideoMessageProps): {
9
+ videoRef: import('react').RefObject<HTMLVideoElement>;
10
+ isPlaying: boolean;
11
+ videoProps: {
12
+ onLoadedMetadata: () => void;
13
+ onPlay: () => void;
14
+ onPause: () => void;
15
+ onEnded: () => void;
16
+ };
17
+ playButtonProps: {
18
+ onClick: () => void;
19
+ };
20
+ };
21
+ export {};
@@ -2,6 +2,8 @@ import { MessageProps } from '../message';
2
2
  export interface VideoMessageProps extends Omit<MessageProps, 'children'> {
3
3
  /** The video URL. */
4
4
  src: string;
5
+ /** Unique message identifier — used to coordinate exclusive playback. */
6
+ messageId?: string;
5
7
  /** Alt text for the video (for accessibility). */
6
8
  alt?: string;
7
9
  /** Callback when video loads (useful for scroll adjustment). */
@@ -15,6 +17,6 @@ export interface VideoMessageProps extends Omit<MessageProps, 'children'> {
15
17
  /** Additional CSS class names to apply to the message. */
16
18
  className?: string;
17
19
  }
18
- /** Video message component for displaying video messages. */
20
+ /** Video message component — shows a thumbnail with a play overlay; native controls appear on play. */
19
21
  export declare const VideoMessage: import('react').ForwardRefExoticComponent<VideoMessageProps & import('react').RefAttributes<HTMLDivElement>>;
20
22
  export default VideoMessage;
@@ -13,6 +13,7 @@ export interface MessageMachineRendererProps {
13
13
  baseProps?: Partial<MessageProps> & {
14
14
  avatarConfig?: AvatarConfig;
15
15
  customMessages?: any;
16
+ onUserInteraction?: () => void;
16
17
  };
17
18
  /** Callback when content (like images) finishes loading */
18
19
  onContentLoad?: () => void;
@@ -22,6 +22,7 @@ export interface UseMessageMachineRendererOptions {
22
22
  baseProps?: Record<string, any> & {
23
23
  botAvatarConfig?: AvatarConfigResult | null;
24
24
  agentAvatarConfig?: AvatarConfigResult | null;
25
+ onUserInteraction?: () => void;
25
26
  };
26
27
  }
27
28
  /**
@@ -0,0 +1 @@
1
+ export declare function ExternalLinkIcon(): import("react/jsx-runtime").JSX.Element;